超原始的な私のホームページの作成法
私のホームページの作り方は実に原始的なものであります。１ページ毎をテキストエディターで一文字、一文字打ち込んでいくというシロモノであります。当然最初はそうじゃなかったんですよ。ホームページを簡単に作る道具も使っていました。最初はIBMの「ホームページビルダー」から始まって最終的にはマクロメディアのドリームウエバーなどというものに行き着きました。それでも時間を経って気がついてみると結局はテキストエディターに戻ってしまっていました。たとえ多少の手間ひまがかかっても結局私にはこの超原始的な方法が合っているみたいです。メンテナンスが大変
１ページや数ページのサイトでしたら、私のこの超原始的な方法でいいのですが、どうも根が駄文書き散らしの性格のようで、ひとつのサイトが数十ページにどうしてもなってしまいます。そうしますと各ページの共通部分に変更が生じた時が大変なのであります。一つひとつのページを開いて変更部分を書き換えていきます。共通部分で特に多く書き換えが生じるのはメニュー部分です。ページが増減した場合にリンクを増やしたり減らしたりという作業をやり続けるわけであります。もちろドリームウエバー等のツールを使用している場合は簡単なのでありますが。その点デザイン部分に変更が生じた場合は簡単です。デザイン部分はすでにデータのあるhtml部分とデザイン制御のあるcss部分を分離していますから、css部分を書き換えれば何十ページあろうが何百ページあろうが瞬時に変更可能であります。
一箇所を変更すれば何百ページにも渡る共通部分を変更する方法を遅ればせながら発見したわけであります。次の項からが本日の主題であります。
各ページのメニュー（nav）部分をまとめて JSで読み込む
この部分はすでにこのサイトに適用されています。同じようにfooter部分も共通なので同様の処理をしました。これによって共通部分が何十ページになろうとも１箇所のjsファイルを変更することによってその変更箇所が瞬時に反映されることになります。このJavaScriptが私にとっては最初の実用的なものとなります。読み込まれる側の.jsファイルを用意します。
navi.jsファイルの内容document.write('<h3>Navigation</h3>');
document.write('<ul>');
document.write('<li><a href="./index.html">HOME</a></li>');
document.write('<li><a href="./ht5-1.html">HTML5</a></li>');
document.write('<li><a href="./css3-1.html">CSS3</a></li>');
document.write('<li><a href="./js-1.html">JavaScript</a></li>');
document.write('</ul>');
読み込む側の記述例<nav>
<script src="./navi.js"></script>
</nav>
以下のようにどのページにも反映されるはずです。すでに10ページ分ほど試したので大丈夫です。Navigation
ここまでは試してみたので、大丈夫なのですが、読み込む時の記述が問題なのです。この部分はまだ充分に理解していないのでどうしようかと迷っているのであります。通常は以下のように書くようです。<script language="JavaScript"> <!-- ここにJavaScriptを書き込む // --> </script>この書き方が正しいようなのですが、今のところ動作していますので、なにか不具合が起きた場合には置き換えすることにします。
余談 効率だけを追求してはいけません
JavaScriptやCSSを使用して効率を追求する方法を紹介してきましたが、最初はあまり効率を追求してはいけません。愚直にいちいち手作業で何十回、何百箇所を訂正したり追加したり削除したりの作業を行うことを薦めます。一見すると非効率のようでありますが、最終的に自分の技倆を向上させることになります。人は頭だけでは技術を習得できません。特に私のような凡庸なものにとっては特にそう思います。だから数限りない反復訓練が必要なのです。よって、一見して不合理で非効率な作業を繰り返すことによって最終的には自分の身体の芯に刻み込むことができるのだと信じています。
0 件のコメント:
コメントを投稿