目次
最終更新日
2008/05/28 0:25:01
テクニカルノート
福々式CMSを使用するときの個別のテクニックを紹介します。
サイト構築
福々式CMSを用いてサイトを構築する方法の一例を紹介します。
Web上にサイトを作るにはLocalのコンピュータにWebに作るのと同じ構成のフォルダを作り、ローカルで動作を検証した後、フォルダの内容をそのままアップロードするのが分かり易いと思います。
ローカルフォルダは福々式CMS用のEXCELファイルのあるフォルダの中にフォルダを作るのがプロジェクトの移動などに都合がいいでしょう。
ここでは、MyProjectフォルダに福々式CMS用のワークブックMyWeb.xlsとサイト用のローカルフォルダsiteを作成します。またsiteフォルダの中に画像用のimagesフォルダも作ります。imagesフォルダの中には必要な画像ファイルをあらかじめ用意します。
| MyProjectフォルダ | +-- | MyWeb.xls | ||
| +-- | siteフォルダ | +-- | (生成されたCSSファイル) | |
| +-- | (生成されたHTMLファイル) | |||
| +-- | imageフォルダ(イメージ格納用) |
EXCELを開き福々式CMSのメニューよりに「新規ブック作成」を実行すると、新しい福々式CMS用のワークブックが作成されます。これを一旦MyProjectフォルダにMyWeb.xmlで保存します。
設定用ワークシートを開きのLocalFolderにsiteと入力します。Web用のローカルフォルダはMyWeb.xmlからの相対指定になり、Project\siteに設定されます。
CSS用シートとHTML用シートを編集し、福々式CMSのメニューよりCSSやHTMLファイルをローカルWEBフォルダに作成します。作成されたHTMLファイルを開くとWebブラウザで閲覧できます。意図した通りにHTMLが表示されるかを検証し、違っていればHTML用シートを変更し、HTMLに再変換します。ブラウザの更新ボタンで変更を確かめます。このように編集中のEXCELファイルを保存することなく変換と確認ができますので、効率的に編集が行えます。
実施例
福々式CMSを理解するには実際の例を見るのが早いかもしれません。ご覧のこのサイト(www.monju-project.com)は福々式CMSを用いて作られています。このサイトを作るのに用いたExcelファイルと画像等のプロジェクトファイル一式が次のリンクよりダウンロードできます。
当サイト用プロジェクトのダウンロード
ダウンロードしたファイルを展開すると、次のようなファイルとフォルダが作成されます。
| MonjuProjectフォルダ | +-- | Monju.xls | ||||
| +-- | Minimal.xls | |||||
| +-- | Fukufuku.xls | |||||
| +-- | siteフォルダ | +-- | (*.css) | |||
| +-- | (*.html) | |||||
| +-- | imageフォルダ | |||||
| +-- | minimalフォルダ | +-- | (*.css) | |||
| +-- | (*.html) | |||||
| +-- | imageフォルダ | |||||
| +-- | fukufukuフォルダ | +-- | (*.css) | |||
| +-- | (*.html) | |||||
| +-- | imageフォルダ |
MonjuProjectフォルダは福々式CMS用のExcelファイルを入れるフォルダでプロジェクトフォルダと呼びます。任意の場所、任意の名前でかまいません。Excelより生成されるcssファイルやhtmlファイルはこのプロジェクトフォルダの下に置けば、プロジェクトのポータビリティが得られます。
Monju.xlsはwww.monju-project.com/のルートフォルダ用のExcelファイルです。
Minimal.xlsはwww.monju-project.com/minimalフォルダ用のExcelファイルです。
Fukufuku.xlsはwww.monju-project.com/fukufukuフォルダ用のExcelファイルです。
このようにWEBサイトの一つのフォルダに対して一つのブックを作り、プロジェクトフォルダの直下に置くことを推奨します。
siteフォルダはwww.monju-project.com/に対応したローカルフォルダです。Webサイトと同一の構造になるよう配下のフォルダを作成します。Excelより作られるcssやhtmlファイルはこの中の各フォルダの(*.css)や(*.html)の位置に生成されるように設定されています。
ダウンロードしたファイルにはcssファイルやhtmlファイルは含まれませんが、Monju.xls、Minimal.xls、Fukufuku.xlsを開いて福々式CMSアドインメニューから全てのcssとhtmlファイルを生成することができます。生成後、siteフォルダのindex.htmlを開いて確認してください。
siteフォルダの中身をそのままwww.monju-project.com/にFTP転送すればWEBサイトは完成します。
テーブルの記述法
福々式ではテーブルも分かり易く記述することができます。
| 列A | 列B | 列C | 列D |
|---|---|---|---|
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
例えば上記のテーブルは次のように記述します。
| Name | Tag | Attribute | Contents | ||||||
|---|---|---|---|---|---|---|---|---|---|
| table | |||||||||
| tr | th(4) | 列A | 列B | 列C | 列D | ||||
| tr | td(4) | A1 | B1 | C1 | D1 | ||||
| tr | td(4) | A2 | B2 | C2 | D2 | ||||
| tr | td(4) | A3 | B3 | C3 | D3 |
th(4)はth;th;th;thの略記法です。
テーブル内容の記述がContents欄から始まっていないのは、Contents欄はtrのためのものだからです。
欄幅の指定
欄の幅を指定したい場合はcolにwidth属性を指定します。
| 列A | 列B | 列C | 列D |
|---|---|---|---|
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
例えばC欄の幅を200にしたい場合は次のように記述します。
| Name | Tag | Attribute | Contents | ||||||
|---|---|---|---|---|---|---|---|---|---|
| table | |||||||||
| col(4) | ;;width="200" | ||||||||
| tr | th(4) | 列A | 列B | 列C | 列D | ||||
| tr | td(4) | A1 | B1 | C1 | D1 | ||||
| tr | td(4) | A2 | B2 | C2 | D2 | ||||
| tr | td(4) | A3 | B3 | C3 | D3 |
３番目の欄ですので「;;width="200"」のように欄位置を示すためにセミコロンが２つ付きます。B欄にWidth="100"を追加すると「;width=100;width=200」となります。
セルの結合
セルの結合を指定したい場合はrowspan属性やcolspan属性を指定します。
| 列A | 列B | 列C | 列D |
|---|---|---|---|
| A1 | B1 | C1 | D1 |
| A2 | B2 | D2 | |
| B3 | C3 | D3 | |
例えばA2とA3、B2とC2を結合する場合は次のように記述します。
| Name | Tag | Attribute | Contents | ||||||
|---|---|---|---|---|---|---|---|---|---|
| table | |||||||||
| tr | th(4) | 列A | 列B | 列C | 列D | ||||
| tr | td(4) | A1 | B1 | C1 | D1 | ||||
| tr | td(3) | ;rowspan="2";colspan=2 | A2 | B2 | D2 | ||||
| tr | td(3) | B3 | C3 | D3 |
結合されたセルA3、C2はなくなりますで、セルの内容を記述する位置が左詰めされます。
これでも構いませんが、欠員セルフラグをA3、C2に対応する位置に記述することで記述を見やすくすることができます。
| Name | Tag | Attribute | Contents | ||||||
|---|---|---|---|---|---|---|---|---|---|
| table | |||||||||
| tr | th(4) | 列A | 列B | 列C | 列D | ||||
| tr | td(4) | A1 | B1 | C1 | D1 | ||||
| tr | td(3) | ;rowspan="2";colspan=2 | A2 | B2 | [Void] | D2 | |||
| tr | td(3) | [Void] | B3 | C3 | D3 |
Contents欄とインライン要素
福々式では要素をタグとテキストに分離することにより分かり易い記述になっています。タグはTag欄に、テキストはContents欄に記述することが基本です。しかしながらインライン要素に関してはContents欄のテキストの中にインライン要素を混在させることもできます。例えば
お問い合わせの前に<a href="faq.html>よくある質問</ a>をご覧ください。
などの記述が可能です。
タグとテキストを分離するか混在させるかは、要は分かり易い記述になるかどうかで判断して下さい。
(注)
Contents欄のタグはそのまま出力されます。<や>をタグ以外の用途に使用したい場合は文字実体参照で書くか、文字実体参照変換機能を使用し下さい。
ワークシートの修飾
福々式CMSはEXCELのワークブックに記述しますが、ワークシート上の文字情報だけを利用して、フォントサイズ、色、罫線などの修飾情報は利用していません。
ですからワークシートを見やすくするために適宜ワークシートに色や書式などをつけてもかまいません。筆者の場合はスタイルシート用とHTML用のワークシートでは見出しの部分の背景に色を付加しています。またスタイルシートの見出しのうち、継承するプロパティだけ色を変えて継承関係を分かりやすくしています。
セルの書式は基本的に上詰めで折り返し表示をしないようにしています。ただしContents領域だけは折り返して全体を表示するようにしています。
EXCEL関数の利用
福々式CMSはEXCELのワークシートにHTMLを記述し、記述された文字情報を利用します。ワークシートでEXCELの関数を利用した場合は変換直前に関数が再計算され、結果としての文字列で変換されます。
例えばToday()やNow()関数を用いることで更新日時を自動的にHTMLに埋め込むことができます。当サイトの左側の更新日時の表示もNow()関数を利用しています。
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| p | br | 更新日時 | ||
| text | =NOW() |
また次のように一行にして使うこともできます。
| Name | Tag | Attribute | Contents | |||
|---|---|---|---|---|---|---|
| p | 今日は | =TODAY() | です。 |
EXCEL関数の利用はアイデア次第で色々な場面で使用することができますが、あまり使いすぎると分かり辛くなりますので適宜御利用下さい。