Top Example

差し込み記法

head line
    1. 差し込み記法とは、
      1. なぜ、差し込み記法なのか
    2. サンプル
      1. 編集時の入力内容
      2. 生成したhtmlソース
    3. サンプル2
      1. 編集時の入力内容

差し込み記法とは、

<<主題>>[0]
いきなり差し込み記法といわれてもわからないのですが、、、
【主題】

<table><tr><td><table><tr><td><!--%主題%--></td></tr></table></td></tr></table>

同じページ内で、   色の部分を   の部分で置き換える機能です。

なぜ、差し込み記法なのか

WEBページを編集する場合、WYSWYGエディタ wiki記法、ローカルのhtml編集プログラム(ホームページ作成ソフト)のいずれか、または組み合わせによります。

単純な文字列を入力する場合は、どの方法でも、効率に大きな差は出ません。

しかし、見易く整った形で、表示したい場合は、htmlタグを使用したり、記法を使用して記述する必要性が出ます。

htmlや記法を駆使するためには、それなりの学習が必要になります。

下に記述したサンプルは、スペースとコメント部分を除いたコード部分に1127文字 表示する文字列が200文字程度なのに対して、5倍以上になる(画像記法による生成タグ部分は除外しています1画像110文字以上)画像を含めると7倍以上は、見えないソースの部分に費やされています。

もっと短いソースで記述できるはずだとか、この部分が無駄だ等、ご意見もあると思いますが、その当然の意見こそは、html自体が、見た目の同じ一枚のドキュメントを得るための、コーディングは、それこそ千差万別に行われていることを示しています。

しかし、ひとつのサイトを運営する中で、ページを作成するたびに、同じ入力を繰り返す必要はありません。
決まりきった部分は、それはそれ、これはこれと、まとめておいて、変更部分だけを更新できればよいのですが、その自然な方法は、WYSWYGエディタにもWikiにも実装されているものではないようです。
差し込み記法は、定型部分と否定形部分を、一枚のドキュメントの中で分割することで、常に柔軟で自由度のある、プリセットレイアウト方の編集を実現しようとするものです。

差し込み元マーカーは、日本語のタグを自由に作成しているのと似ているので、ドキュメントの更新を依頼する場合など、とても伝わりやすくなるという一面もあります。

サンプル

サンプルレイアウトを使って、実際のドキュメントの編集に近い状態で説明させていただきます。

今週の日替わりランチです。 今週のランチ担当シェフは、イケメン1号です。

月曜日 

550円

ナポリタンか、ミートソースを選べます。

先着:5名さま、ブルーマウンテン食後に出ます。
ランチと一緒にサラダご注文の場合
サラダは、100円ですよ。(普段は、350円)

火曜日

秋刀魚定食、煮付け定食

550円

気仙沼からの直送品です。
今年は、特に油が乗ってます。

水曜日

釜飯定食、かにと、ホタテを選べます。

650円

釜飯は、15分ほどお待ちいただきますので、ご了承くださいませ


編集時の入力内容

【今週の日替わりランチタイトル】

txt2img>(p:mikaP13:今週の日替わりランチです。    今週のランチ担当シェフは、イケメン1号です。)

【/今週の日替わりランチタイトル】

【左のパネル】

月曜日

http://www.….com/tunami/images/spa_meat_.gif?w=105h=59

<strong>550円</strong>

【/左のパネル】



【左のパネルコメント】

ナポリタンか、ミートソースを選べます。¶

先着:5名さま、ブルーマウンテン食後に出ます。

ランチと一緒にサラダご注文の場合

サラダは、100円ですよ。(普段は、350円)

【/左のパネルコメント】



【真ん中のパネル】

火曜日

http://www.….com/tunami/images/sanma.gif?w=100h=75

秋刀魚定食、煮付け定食

<strong>550円</strong>

【/真ん中のパネル】



【真ん中のパネルコメント】

気仙沼からの直送品です。

今年は、特に油が乗ってます。

【/真ん中のパネルコメント】



【右のパネル】

水曜日

http://www.….com/tunami/images/kamamesi.gif?w=75h=100

釜飯定食、かにと、ホタテを選べます。

<strong>650円</strong>

【/右のパネル】

【右のパネルコメント】

釜飯は、15分ほどお待ちいただきますので、ご了承くださいませ

【/右のパネルコメント】





[ランチテンプレート][1]

[は便宜上全角を使っています。

編集する場合は、日本語で示した括弧の中に、最低限のhtmlと記法を組み合わせて書くだけですみますので、編集更新作業が楽になると思います。
以下に実際のhtmlソースを示しますので、比較してみてください。

生成したhtmlソース

<table border="0" cellpadding="0" cellspacing="0" width="765" style="background:url(../images/table_sample.jpg)">

<tr><!-- row 1 -->

<td colspan="7" width="765" height="93" border="0" style="vertical-align:top;padding-left:10px;"><!--%今週の日替わりランチタイトル%--></td>

</tr>

<tr><!-- row 2 -->

<td width="34" height="358" border="0" ></td>

<td width="185" height="358" border="0" style="vertical-align:top;"><div style="height:350px;overflow:hidden;border:none;">

<!--%左のパネル%--><div style="color:#06f;padding:3px;width:170px;overflow:auto;height:150px;border:none;">

<!--%左のパネルコメント%-->

</div></div>

</td>

<td width="70" height="358" border="0"></td>

<td width="183" height="358" border="0" style="vertical-align:top;"><div style="height:350px;overflow:hidden;border:none;">

<!--%真ん中のパネル%--><div style="color:#06f;padding:3px;width:170px;overflow:auto;height:150px;border:none;">

<!--%真ん中のパネルコメント%-->

</div></div></td>

<td width="64" height="358" border="0" ></td>

<td width="190" height="358" border="0" style="vertical-align:top;"><div style="height:350px;overflow:hidden;border:none;">

<!--%右のパネル%--><div style="color:#06f;padding:3px;width:170px;overflow:auto;height:150px;border:none;">

<!--%右のパネルコメント%-->

</div></div></td>

<td width="39" height="358" border="0" ></td>

</tr>

<tr><!-- row 3 -->

<td colspan="7" width="765" height="41" border="0" alt=""></td>

</tr>

</table>

サンプル2

Lorem   Ipsum   Dolar  
» 氏名 山田太郎
» 住所 仙台市青葉区中央1丁目
» メールアドレス yamada@sample.com
» 電話 080-0000-0000
Lorem   Ipsum   Dolar  
» 氏名 山田太郎吉
» 住所 仙台市若林区
» メールアドレス yamada@sample.com
» 電話 080-0000-0000
Lorem   Ipsum   Dolar  
» 氏名 山田太郎衛門
» 住所 仙台市宮城野区
» メールアドレス yamada@sample.com
» 電話 080-0000-0000
Lorem   Ipsum   Dolar  
» 氏名 山田太郎
» 住所 仙台市青葉区中央1丁目
» メールアドレス yamada@sample.com
» 電話 080-0000-0000

編集時の入力内容

【氏名】

山田太郎

【/氏名】

【住所】

仙台市青葉区中央1丁目

【/住所】

【メール】

yamada@sample.com

【/メール】

【電話】

080-0000-0000

【/電話】

<table width="100%" border="0" cellspacing="0" cellpadding="2">

<tr>

<td style="background-color: #000000;text-align: center;color: #cccccc;">Lorem</td>

<td>&nbsp;</td>

<td style="background-color: #dedeca;text-align: center;"><a href="#">Ipsum</a></td>

<td>&nbsp;</td>

<td style="background-color: #dedeca;text-align: center;"><a href="#">Dolar</a></td>

<td width="100%">&nbsp;</td>

</tr>

<tr>

<td colspan="6" style="background-color: #000000;">

 <table width="100%" border="0" …>

<tr>

<td style="text-align: right;">&raquo;</td>

<td width="30%"style="text-align: left;width:12em;">氏名</td>

<td width="70%" style="text-align: left;"><!--%氏名%--></td>

</tr>

<tr>

<td style="text-align: right;">&raquo;</td>

<td>住所</td>

<td style="text-align: left;"><!--%住所%--></td>

</tr>

<tr>

<td style="text-align: right;">&raquo;</td>

<td>メールアドレス</td>

<td style="text-align: left;"><!--%メール%--></td>

</tr>

<tr>

<td style="text-align: right;">&raquo;</td>

<td>電話</td>

<td style="text-align: left;"><!--%電話%--></td>

</tr>

</table></td>

</tr>

</table>

  • [0]<<gt;>これらの記号は、必要に応じてカスタマイズできます。主題などの名称は、披置換部分と同じ文字であればよく、わかりやすい言葉を使うことが出来ます。
  • [1]ランチテンプレートの内容は、change.xmlに登録した登録名です。繰り返して使うような、htmlソースのブロックは登録しておくと便利です。