【楽をしてサイト構築をするためのウンチクノート】
第４回
埋め込みコンテンツとその活用
CMSというのはページ全体を構成するように思われるでしょうが、一部分つまりパーツとしての要件もわすれてはならない要素です。
ページ全体が構成できればそれでよし？
ウェブサイト管理・構築ツールというとウェブサイト全体だけがクローズアップされるのだが、ウェブサイトを構成するパーツとしての役割も非常に目が離せません。たとえば、バナー広告やウイルス情報がウェブサイトに張ってある例をみたことがないという方は少ないと思います。あれはページ全体は構成していないのですが、ページの一部として機能としています。つまり、ページ全体は構成していないが、ページの一部として埋め込むことでページが活性化する。これはサイト内のファイルのひとつを変えても複数のファイルを変更する必要が発生する依存性の解消にも役に立ってくれるわけで、CMSの働きがあるということができないでしょうか。
実際の埋め込まれ方
多くの場合が、指定されたタグを埋め込むだけで完了のものがあります。ただし、微調整を行う場合、できるものとできないものがあり、調整できる場合はタグやスクリプトの知識が必要となることが多いです。ただし、埋め込むことそのものの作業は難しいことではありません。特定のタグと埋め込むコンテンツのありかを指定するだけです。
例として、このページにはスタイルシートと呼ばれるものが埋め込まれています。それはこのページのソースの上部の以下の部分でわかります。
これで、配色をその都度指定しなくともfhpg.cssの内容にそって配色が決定します。
JavaScriptでも同様の効果をもつものがあります。スタッフページでは執筆した最新コラムの表示にJavaScriptが埋め込まれています。
これは、src以後に執筆したコラム最新5つを表示するスクリプトをする機能があり、それをブラウザは読み取るため、その場所に表示されています。
ほかにもフレームという手があります。トップページではインラインフレームという機能を使って埋め込んでいます。これはページの一部に異なるページを表示できるという便利な機能です。
ただし、この場合、表示に関する場所を多少調整する必要があります。上記では、高さ 260px、長さ 100% とし、フレームの線を消すことでひとつのページとして見えるようにしています。つまり、結果的にはフレームに過ぎませんので、もし http://fhpg.net/php/news/index2.php4 が高さ 260px を上回ってしまうとスクロールバーが出るということが発生します。デザインを気になさる方は十分に気をつけたほうがよいでしょう。
※（サイト運営担当 注） 現在、上記内容の表示にはJavaScriptによる埋め込みを使用しています。ただし、ブラウザのJavaScript設定が無効の場合にはインラインフレームにて表示します（<noscript></noscript>内に上記記述を埋め込み）。
埋め込みコンテンツの利点
埋め込み型の利点は、埋め込みコンテンツの部分に変更が生じても、その変更部分は他の部分とは独立しているため、静的にコンテンツを生み出すの場合でも動的にコンテンツを生み出す場合でも、それ以外の場所にはまったく変更の必要がないところでしょう。また、動的に埋め込みコンテンツを作成する場合であっても、ページ全体を表示する場合と比べた場合、テキストとして排出する量に違いがあり、処理量は減少をすることが期待されます。また、その埋め込む作業は特定の文字列をメモ帳のようなテキストエディタで書き加えるだけでよいので、非常に簡単に導入できるということも大きな魅力でしょう。
しかし、このような埋め込みコンテンツの弱点は、そのコンテンツの埋め込み作業はあくまでもユーザが使用しているブラウザ任せであるということです。つまり、ユーザのブラウザが対応していなければ何もなりません。また、埋め込みをしすぎるとスクリプトまみれになることもあり、あまりきれいなソースとはいえない状況になることもありますし、実はページ全体を生成してしまったほうが早かったという結果もありえます。
筆者は、埋め込みコンテンツはちょっとしたことに使うことをお勧めします。たとえばアクセスカウンタは毎回更新が必要ですが、ページ全体を生成するにはいたりません。一行広告が変化するからといってページ全体書き換える必要はないわけです。状況に応じてこういったサブとしてのパーツコンテンツも上手に利用していきたいものです。
関連コラム
- シリーズ 【楽をしてサイト構築をするためのウンチクノート】
- 第１回 - サイトのファイルの依存性を理解する
- 第２回 - サイト運営・設計を楽にする機能
- 第３回 - CMSのコンテンツ生成と結合
- 第５回 - ツリー構造
- 第６回 - メッシュ構造
- 第７回 - データベース参照構造
- 嫌にならない更新のために
- サイト運営って、どうやってるの？