目次
最終更新日
2008/05/28 0:25:01
HTML用シート
福々式でHTMLを作ることは、EXCELのワークシートにHTMLのモジュール(部品)を記述することです。
HTMLに関する記述をするためのワークシートには共通モジュール用シートと個別ページ用シートがあります。共通モジュール用シートはこのブックで作られる全てのHTMLで共通に使うことができるモジュールを記述し、個別ページ用シートには個別のHTMLで使うモジュールを記述します。個別ページ用シートは生成するHTMLに一対一で対応しています。これら２種類のシートに記述方法の違いは無く使用目的が違うだけです。これらを合わせてHTML用シートと呼びます。
- モジュールとは
- ワークシートの記述方法
- 基本的なモジュールの書き方
- １行に複数タグ
- 終了タグ
- text擬似タグ
- モジュールの組込み
- モジュールの呼び出し順
- Mainモジュール
- デフォルトテンプレート
- 属性変数
モジュールとは
福々式ではHTMLを記述する場合の最大の特徴はモジュール化です。モジュールとは「交換可能な構成要素」という意味です。簡単にいうと部品です。
福々式では複数のモジュールを組合せて一つのHTMLを作成します。モジュールの組合せとは単に並列的に並べるだけでなく、モジュールの中に別のモジュールを組込むことも含まれます。
モジュール化の利点には次のものが考えられます。
- モジュールの交換が簡単です。すなわち部分的に機能を変えることが容易です。
- モジュール単位で作ればいいので、全体の構成が分かりやすくなります。
- モジュールの再利用がし易くなります。ページ内だけでなく、サイトや組織、さらにはパブリックにモジュールが共有できます。
ワークシートの記述方法
ワークシートの１行目のA欄はシート識別子で共通モジュール用シートは module と記入し、個別ページ用シートは page と記入します。
１行目のB欄には個別ページ用シートの場合はページタイトルを書きます。ページリストを作成する場合に使用されます。共通モジュール用シートでは摘要になります。
１行目のC欄には個別ページ用シートの場合はHTML出力時のファイル名を書きます。空欄の場合はHTMLファイルの名前はシート名に拡張子(.html)を付けたものになります。
２行目は見出し行です。
３行目以降にモジュールを記述します。
見出し行はA1はName、B1はTag、いくつかの空白を置いて、Attribute、Contentsという構成になります。
Name列はモジュールの名前を記入する欄です。
Tag列からAttribute列の前までには要素タグ名を記入する欄です。
Attribute列は属性を記入する欄です。
Contents列以降は主にテキストを記入する欄です。
例えば個別ページ用シートは次のようになります。
| page | ホーム | index.html | ||
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| Main | ||||
| [テンプレート] |
１つのシートには複数のモジュールが記述できます。共通モジュール用は大きくなるようでしたら複数のシートに分割しても構いません。個別ページ用シートは分割できません。
基本的なモジュールの書き方
例えば次のようなHTMLがあります。
<h1>新着情報 What's new</h1>
<h2>2008/04/01 さくら咲く<h2>
<p>八幡山に桜がさきました
<img src="whatnew.jpg" />
</p>
これに「WhatNew」というモジュール名をつけて福々式で書くと
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| WhatNew | h1 | 新着情報 What's new | ||
| h2 | 2008/04/01 さくら咲く | |||
| p | 八幡山に桜がさきました。 | |||
| img | src="whatnew.jpg" |
となります。
基本の規則
- モジュール名はA欄に書きます。
- モジュールの開始行ははモジュール名が書かれた行です。
- モジュールの終了行は次のモジュール名が書かれた行の前かシートの終わりまでです。
- タグはB欄から階層的にタグ名のみを書きます。
- 最初のタグ名はB欄に書きます。
- 次のタグが前のタグの子要素の場合は、前のタグ名が書かれている欄の次の欄にタグ名を書きます。
- タグの階層は必要なだけ増やすことができます。それに応じてAttribute欄の位置を調整して下さい。通常は４〜６階層位が目安で、それ以上の場合はモジュールを分けた方がいいでしょう。
- タグの属性はAttribute欄に記入します。
- Attribute欄がどこにあるかは見出し行にあるAttributeの文字で判断します。
- 要素のテキストはContents欄に記入します。
- Contents欄はAttribute欄の次の欄以降です。
- 同一行の複数のContents欄にテキストを書くことも可能です。この場合は各欄のテキストは連結されます。
- HTML用シート上の１行は、HTMLでも１行となります。ただしシート上の空行はHTMLには出力されません。
- (注)A1欄の先頭が * の行は注釈行になりHTML作成時には無視されます。
１行に複数タグ
HTMLで一行に複数のタグを置くには、福々式でも同一行にタグを書きます。
例えば次のようなHTMLの場合
<h1>新着情報 What's new</h1>
<h2>2008/04/01 さくら咲く<h2><p>八幡山に桜がさきました<img src="whatnew.jpg" /></p>
福々式では次のようになります。
| Name | Tag | Attribute | Contents | ||
|---|---|---|---|---|---|
| WhatNew | h1 | 新着情報 What's new | |||
| h2;p | img | ;;src="whatnew.jpg" | 2008/04/01 さくら咲く | 八幡山に桜がさきました。 |
h2とpタグは同じ階層ですので、同じ欄にセミコロン(;)で区切って記入します。
imgはP要素の子要素なので次の欄へ記入します。
Attribute欄には各要素の属性をセミコロン(;)で区切って記入します。例の場合は３つの要素の属性を書きます。
各要素のテキストは要素別にText欄以降の欄に別々に書きます。例の場合、最初のh2要素のテキストはText欄に、p要素のテキストはテキスト欄の次の欄に書きます。要素にテキストがない場合は空欄として空けておきます。
一行に複数のタグを書く規則
- 同一階層のタグはタグ名をセミコロンで区切って同一の欄に記入します。
- タグが前のタグの子要素の場合は、前のタグ名が書かれている欄の次の欄にタグ名を書きます。
- 属性はAttribute欄に同一行にに現れる要素の順にセミコロンで区切って記入します。
- 同一階層の同一属性が連続する場合は(繰返し数)で略記できます。例えば td;td;td;td;td は td(5) と記述できます。
- 属性のない場合もセミコロンは必要ですが、以降の属性が全て空の場合は右側のセミコロンは全て省略可能です。
- 各要素のテキストは要素別にContents欄以降の欄に別々の欄を使って記入します。テキストがない場合は空欄にします。
- Contents欄が要素数より多い場合は残りのContents欄のテキストは最後の要素のものとして連結されます。
終了タグ
HTML用シート上には明示的に終了タグを記述しません。
終了タグはその要素の階層と同じ階層か上位の階層の要素が現れた場合、またはモジュールの終了で自動的にHTMLに出力されます。
終了タグを出力するとき、現在行にその要素の開始タグがあれば同一行に終了タグを出力します。それ以外は改行されてから終了タグを出力します。
なお空要素タグの場合は独立した終了タグは出力されず、開始タグと一体となった/>で終わるタグを出力します。
空要素タグは次のタグです。
area base param meta link col br hr img input
text擬似タグ
次のようなHTMLがあります。
<a href="#TopOfPage">
<img src="topagetop.png" />
このページのトップへ
</a>
これを福々式で書くと
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| ToTopPage | a | href="#TopOfPage" | ||
| img | src="topagetop.png" | |||
| このページのトップへ |
となりそうですが、これをHTMLに変換すると
<a href="#TopOfPage">
<img src="topagetop.png">
このページのトップへ
</ img>
</a>
になってしまいます。
この場合、imgは空要素なので正しい変換ができるように変換プログラムを工夫することも可能ですが、空要素でないのにテキストがない場合もありますので一般的ではありません。
そこで汎用的な記述が可能なように福々式ではtext擬似タグを設けています。text擬似タグは通常のタグと同様に記述しますが、HTMLのタグではなくHTMLには出力されません。text擬似タグの目的はテキストがどの要素に属するものかを示すものです。
上記の例の正しい福々式での記述は次の通りです。
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| ToTopPage | a | href="#TopOfPage" | ||
| img | src="topagetop.png" | |||
| text | このページのトップへ |
このように書くことにより、「このページのトップへ」が a要素に属していることを指示できます。
モジュールの組込み
Contents欄のテキストの中に[]で括ってモジュール名を書くことによりモジュールの組込むことができます。組込まれたモジュールはHTML作成しに呼び出だされて展開されます。
例えば
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| h1 | 新着情報 What's new | |||
| h2 | 2008/04/01 さくら咲く | |||
| p | 八幡山に桜がさきました。 | |||
| img | src="whatnew.jpg" | |||
| p | ||||
| [ToTopPage] |
とすると
<h1>新着情報 What's new</h1>
<h2>2008/04/01 さくら咲く<h2>
<p>八幡山に桜がさきました
<img src="whatnew.jpg" />
</p>
<p>
<a href="#TopOfPage">
<img src="topagetop.png" />
このページのトップへ
</a>
</p>
のようなHTMLが作られます。
モジュールの呼び出しはテキストの途中にも記入することができますので、語句や数値をモジュール呼出で挿入することも可能です。
例えば
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| 日付 | 2008/05/01 | |||
| 価格 | 128 |
が共通モジュール用シートか、自分の個別ページ用シートにあれば
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| p | 今日([日付])のガソリン価格は[価格]円です。 |
は
<p>今日(2008/5/1)のガソリン価格は128円です。</p>
になります。
モジュールの呼び出し順
同一の名前のモジュールを共通モジュール用シートと個別ページ用シートに重複して記述することができます。
Contents欄に組込まれたモジュールを呼び出す場合には、まず変換対象となる個別ページ用シートのなかでモジュール名を検索し、有ればそれを使用します。
個別ページ用シートになければ、共通モジュール用シートをブックの先頭から順次モジュール名を検索し最初に見つけたモジュールを使用します。
個別ページ用シートにも共通モジュール用シートにも該当モジュール名がなければ変換されず、モジュール名はそのまま出力されます。
同一の名前のモジュールを共通モジュール用シートと個別ページ用シートに重複して記述することで、全ページで共通に使用するテンプレートに組込まれたモジュールの一部をを特定のページだけ別のモジュールに置き換えることができます。これをモジュールのオーバーライドと呼びます。
Mainモジュール
個別ページ用シートには１つのMainモジュールが記述できます。
個別ページ用シートをHTMLファイルに変換する場合は、個別ページ用シートにあるMainモジュールが変換されます。Mainモジュールの中で他のモジュールの組込みがあれば、そのモジュールが呼び出されて変換されHTMLに挿入されます。呼び出されたモジュールからまた別のモジュールを呼び出して幾重にも階層的にモジュールが呼び出されて最終的に１つのHTMLファイルが作成されます。
個別ページ用シートにMainモジュールを書かないこともできます。この場合は
個別ページ用シートに[Main]モジュールが無い場合は個別ページ用シートに次のモジュールがあるとみなして処理されます。
デフォルトテンプレート
個別ページ用シートにMainモジュールを書かないこともできます。個別ページ用シートにMainモジュールが無い場合は共通モジュール用シートにあるデフォルトテンプレートモジュールが変換されます。
デフォルトテンプレートより個別ページ用シートにのモジュールが呼び出されて個別ページのHTMLが作成されます。
デフォルトテンプレートのモジュール名は設定用シートで設定されます。
属性変数
属性変数は属性記述の一部を変数化し、属性値を変更可能にするためのものです。属性変数をモジュール内で使うことにより、同じモジュールを使用してもページにより属性を変えることができます。
属性変数は属性変数名と属性変数値のペアをHTML用シートのName欄とContents欄を使用して記述します。
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| 検索語 | EXCEL;HTML;CMS;テキストエディタ;テンプレート;構造化 | |||
| ページ説明 | EXCELでCMSで構造化HTML |
例えば個別ページ用シートで上記ように記述し、次のような記述があるテンプレートを各々のページで使用した場合
| Name | Tag | Attribute | Contents | |
|---|---|---|---|---|
| meta | name="Keywords" content="[検索語]" | |||
| meta | name="Description" content="[ページ説明]" |
各ページの[検索語]と[ページ説明]は各々のページ用に設定した記述に置き換えられます。