- Coding Methodology
- 第11回 ナビゲーションの一元管理
第11回 ナビゲーションの一元管理
コーディングの世界では、サイト全体に共通するグローバルナビゲーションやフッターの文言やリンク先が変更になった場合、全てのページのグローバルメニューやフッターのソースを変更しなければなりません。
ページ数が少なければ手作業で直せば済む話なのですが、大型案件になり、担当者もページ数も増えれば増えるほど、変更箇所と変更したファイルの管理に時間も手間もかかってしまいます。
しかし、共通ナビゲーション部分の設計方法を少し工夫するだけで、変更や更新の工数は大きく変わります。
Webサイトを作っている限り、サイトマップの変更があるものと心得る
ちょっとした変更が時として、予想以上の大作業に発展することがあります。
例えば、当初のサイトマップになかった1ページを追加する場合、純粋にその1ページを作る工数はお客様にも理解して頂けます。しかし、それに伴う他の全てのページの変更が必要となり、工数や費用が増えてしまったり、最悪の場合は対応できないというお客様の不利益にもつながりかねません。とはいえ大型案件ともなると、最初から最後まで変更のないサイトマップはそうありません。
変更に即座に対応しづらい大型案件ほど変更が発生しやすいというジレンマの中で、コーダーもお客様も悩んでいるのです。
「フレーム」と同じ柔軟性を実現するための4つの方法
10年ほど前のコーディングでは、「フレーム」で1ページを分割し、ナビゲーション部分とコンテンツ部分を2つのHTMLファイルに分ける方法が主流でした。検索エンジン対策に不利な上ユーザーにとっても使いづらかったため、現在では使われることはありませんが、「ナビゲーションとコンテンツを分ける」という発想は、CSSの世界でも応用されています。
- 1.インクルードファイル（SSI）
- 2.JavaScriptでの書き出し
- 3.Dreamweaverのテンプレート機能
- 4.Dreamweaverのライブラリ機能
『ナビゲーションの一元管理例』
- 1.インクルードファイル（SSI：サーバーサイドインクルード）
- ナビゲーションをインクルードファイルとして独立して管理し、各HTML内でそのファイルを呼び出して1ファイルに生成した後、ユーザのブラウザに送信します。サーバの設定により、利用できない場合もあります。
- 2.JavaScriptでの書き出し
- innerHTMLやdocument.write関数を使ってソースを外部のjsから吐き出します。インクルードファイルと同様、ナビゲーションが各HTMLとは独立しているため、更新が容易です。レアケースとはいえ、JavaScriptがoffに設定されているブラウザ上では表示されません。
- 3.Dreamweaverのテンプレート機能
- ナビゲーション部分をテンプレート化します。テンプレートに変更を加えた場合、サイト全体に一気に変更を適用できます。しかし、ソースが直接書き変わるため、毎回HTMLが変更されてしまいます。
また、DW以外の環境で更新すると、テンプレート機能が壊れる場合があります。 - 4.Dreamweaverのライブラリ機能
- ナビゲーション部分をライブラリ化します。ライブラリという外部ファイルで管理している点はSSIと似ていますが、ライブラリ内を変更するとサイト全体に変更が適用されるため、テンプレート機能同様、毎回HTMLが変更されています。
スピーディに更新に対応するためのあくなき努力
それぞれのメリットやデメリットは、左表に記載しました。最終的に、この中のどの方法が適しているのかは、各案件によって異なります。また、あまりにも規模が大きかったり、更新が頻繁になることがあらかじめ予想されている場合、CMSを導入し、そもそもナビゲーションの更新をシステムに任せるようなサイト構築も1つの選択肢です。
サイト制作フェーズにかけられる時間や費用と、運用にかけられる工数や費用、また、運用担当者の負荷や更新の頻度まで含めて、最も適した方法を選択することも、コーディングの1つのノウハウであると考えています。
各方法のメリット・デメリット
| 評価ポイント | SSI | JS | テンプレート | ライブラリ |
|---|---|---|---|---|
| サーバ環境に 依存しない |
× | ○ | ○ | ○ |
| ブラウザ環境に 依存しない |
○ | × | ○ | ○ |
| 制作環境に 依存しない |
○ | ○ | × | × |
| 自由度が高い | ○ | ○ | △ | △ |
| 変更が容易 | ○ | ○ | △ | △ |
