共通部分を一元化して修正を楽にする

ホームページ全体(サイト)で数ページなら問題ありませんが、20ページ、50ページ、100ページと増えてくると、頭の痛い問題があります。それは、共通部分の修正です。メニューボタンは全てのページに出てくるようにしたいので全ページに設置しますが、メニューを追加するとか、一つ削除するなどの修正が必要となった場合、100ページ全部で同じ修正を施さなくてはなりません。これは面倒ですね。そういう場合を想定して、ページ数の多いサイトでは、メニューなどの共通部分を別ファイルにし、各ページに取り込む形にする例が多いようです。

ご覧になっているサイトも最上部の「編集って何よ!?」 という題名とメニューの部分(ヘッダー)、そして最下部のフッター(題名と各項目へのリンクおよびコピーライト)は、共通部分としてそれぞれのファイルを取り込む形にしてあります。

こうした取り込みは、一般にはPHPと呼ばれるプログラム (スクリプト言語)がよく使われます。PHPは、HTML内に書くことができるため、利便性が高く、ホームページ作りではよく使われます。特に上記のようなヘッダーやフッターを取り込む形は定番となっていると言っても過言ではありません。

PHPを書き込んだHTMLファイルは、拡張子を「.php」とする必要があるため、一般のホームページのように「.html」とは異なる形になります。となるとアクセスする人が混乱したりする場合があるかもしれません。それを 避けるため、PHPでありながら、拡張子「.html」でアクセスできるようにしたり、拡張子なしでアクセスできるようにしたりと、さまざまな方法が考え出されています。

前のページ(5)でお話ししたCMSは、ほとんどがPHPで構築されており、そのためページのURL(アドレス)に拡張子がない場合が多いですね。またヘッダーなどの取り込みは、前のページ(9)でお話ししたフレーム機能の代替えとしてよく使われているとも言えます。

同様にヘッダー等を取り込む方法として、JavaScriptがあります。PHPはサーバー側で動作するスクリプトですのでPHPが動作するサーバーでないと使えませんが、JavaScriptはブラウザ側で動作しますので、サーバーを選びません。近年では、jQueryと呼ばれ JavaScriptライブラリ(いろいろな動作を提供するプログラム)が普及しており、その一機能を使ってヘッダーなどを取り込むこともできます。

ホームページ作りの経験を積んでくると、上記のような「取り込み」をはじめ、多くの「こうしたい、ああしたい」ことが出てきます。それらは概ね、なんらかの方法で実現できますので、根気よく調べていくといいですね。物作りは何でもそうですが「もうこれで終わり」とか「これで極めた」という到達点がありません。新しい技術は次から次へと出てきますし、分かっていたつもりでも知らなかったこと、勘違いしていたことなど、本当にたくさんあります。だから制作の面白さは永遠に続くのでしょうね。