パソコン自作の部屋
◇ホームページ作成でもプログラミングが活躍
|
パソコン自作の部屋 ◇ホームページ作成でもプログラミングが活躍
|
このページの内容：
インターネットブラウザに表示されるWebページ（平たく言えば「ホームページ」）は、皆さまご存じのとおりHTML形式のファイルとして作成します。HTMLは「Hyper Text Markup Language」の略です。「Language」（言語）という言葉が含まれていますから、HTMLファイルを作成することは、HTMLという言語を使った一種のプログラミングであると言ってよいと思います。
とはいえ、インターネットがこれほど普及し、家庭の主婦や子供たちまでもが自分のホームページを作成して公開できるようになったのは、ワープロ感覚で簡単に利用できるホームページ作成ソフトのおかげでしょう。どんなソフトがあるのかと思って試しにアマゾンで検索してみますと、たくさんのホームページ作成ソフトが販売されています（アマゾンのサイトでホームページ作成ソフトを「売れている順番」で閲覧）。Windows用では「ホームページビルダー」に人気が集中しているようですね。
もっと手軽にホームページを作成できるツールもあります。私が利用している@nifty（ニフティ）では、ホームページを簡単に作成できる「サクサク作成君」というツール
が無償で提供されています（もちろん、@niftyをプロバイダとして利用しているユーザー向けです）。画面の説明に従って必要事項を順番に入力したり選択したりすれば、「トップページ」1枚と「サブページ」9枚の合計10ページまでのホームページを作成できるのだそうです。
また、ベクターのサイトの「HTML作成」というカテゴリを見ると、様々な種類のHTMLファイル作成支援ツールやエディタがフリーソフトやシェアウェアとして公開されていますから、そのようなツールを利用するのもよいでしょう。
とはいえ、少しでもプログラミング経験をお持ちの方ならば、テキストエディタだけでホームページを作ったほうが「楽しい」と思われることでしょう。かくいう私も、このサイト全体を「秀丸」というテキストエディタだけで作成しています（もっとも、後で説明するとおり、フリーで公開されているCGIプログラムを利用させていただいていますが…）。秀丸エディタは有名なので説明の必要はないかと思いますが、まだ使っておられない方は作者の秀まるお氏のホームページからダウンロードできます（気に入って継続利用する場合はシェアウェア料金の支払いをお忘れなく）。秀丸エディタでは、HTMLファイルを入力する際にタグやコメントを色分け表示するように設定できますので、なかなか使いやすいと感じています。
もちろんHTML言語でWebページを“プログラミング”するには、HTML言語の文法規則（構文）を知っていなければなりません。書店には「HTMLリファレンス」のような本が並んでいますし、インターネット上にも便利な解説サイトがあります。たとえば：
ホームページ作成の入門的な情報から、HTML、CSS、JavaScript、Perlなどのリファレンスまで、たいへん情報豊富で役立ちます。
「ABC順」と「目的別」のHTMLリファレンスのほか、このあと説明するCSSスタイルシートのリファレンスや、特殊文字リファレンスなどが掲載されており、たいへん便利です。
HTMLだけのリファレンス書もありますが、CSSやJavaScriptを一緒に取り上げている本も多いですね。やはり今のホームページにCSSやJavaScriptは欠かせないということなのでしょう。
CSS（Cascading Style Sheet）は、文字のフォントや色を指定したり、段落の間隔やインデントを指定したり、画像や表の配置を指定したりするものです。HTML言語だけでは記述できないレイアウト上の細かなデザインを指定する補助機能だと考えれば間違いはないと思います。
このサイトでもCSSを活用しています。CSSを記述する場所としては、次の3つがあります。
作成した .css ファイルは、HTMLファイルの <HEAD> 要素の中で <LINK> タグを使って指定することによりインポートします。同じ .css ファイルを複数のHTMLファイルで利用できるので、多数のページのデザインを統一したい場合に便利です。
<STYLE>〜</STYLE> の中にスタイル指定を記述します。そのHTMLファイル内だけで有効です。HTML要素に特定のスタイルを適用するには、HTMLタグの属性として「CLASS=" (スタイル名) "」を記述します。
タグ内の属性として「STYLE=" (CSSによるスタイル指定) "」を記述します。
プロの作品は、ほとんどが 1. の方法をとっていると思います。後でデザインを変更する必要が生じたとき、いくつかのパターン別に作成した少数の .css ファイルを修正するだけで、サイト全体のデザインを簡単に修正できるからです。ただ、事前によく計画する必要があります（ソフトウェアを設計する場合と似ていますね）。
私も 1. の方法を採用すればよかったのですが、いろいろと試行錯誤しながら作成してきたため、よく使用するスタイルは 2. の方法で設定し、局所的にスタイルを調整したい箇所では 3. の方法を使用するという、なんとも素人っぽい記述になっています。まぁ、趣味で作っていますので…。でも、もしサイトのデザインを一新しようと思ったら、作業がたいへんです（多分、しないでしょうが）。
CSSについてさらにお知りになりたい方は、前述の「HTMLクイックリファレンス」のサイトをご覧になるか、アマゾンのサイトからCSS関係の書籍を検索・購入なさっていただきたいと思います。
JavaSciptを使うとなると、いよいよプログラミングらしくなってきますね。このスクリプト言語を活用すると、条件に応じてWebページの内容の一部を変化させたり、ある文字列や画像の上にマウスポインタが来たときに表示内容が変わるようにしたり、といった具合に「Webページに動きを持たせる」ことができます。HTMLとCSSだけでは「スタティック（静的）なページ」ですが、スクリプトを使うと「ダイナミック（動的）なページ」を作成できるわけです。
このサイトでも、ごく簡単な「仕掛け」をJavaScriptで記述して活用しています。
１つは、参考用に外部のサイトを別ブラウザで表示する仕組みです。HTMLタグだけを使用する場合でも、次のように記述すれば、このページをアクセスした人がこのリンクをクリックすると、別のブラウザ（別窓）に参照先のサイトが表示されます。
<A HREF="http://www.xxx.yyy/" TARGET="_blank">参照サイト</A>
普通はこの方法で十分なのですが、ちょっと気になるのは、たくさんの外部サイトを参照している場合に、それらのリンクを次々にクリックしていくと、多数のブラウザウィンドウがどんどん開いていき、画面上がウィンドウでいっぱいになってしまうことです（外部サイトを見た後すぐにそのウィンドウを閉じる習慣をお持ちの方もおられるでしょうが…）。
多数のウィンドウを開かないようにする１つの方法は、次のように、自分で設定したウィンドウ名を使用することです。
<A HREF="http://www.xxx.yyy/" TARGET="MyNewWindow">参照サイト</A>
外部サイトを参照するリンクにすべて「TARGET="MyNewWindow"」を指定すれば、それらのリンクをクリックしたときに別のブラウザウインドウに外部サイトが表示されますが、どのリンクをクリックしてもすべて同じウィンドウが再利用されて表示されます。
ただ、この方法には少しだけ難点があります。２回目以降に外部サイトへのリンクをクリックしたときに、別のブラウザウィンドウが「裏に隠れたまま」になってしまうのです。試しに、このリンク（Google）をクリックしてみてください。Google検索のサイトが別ウィンドウに表示されるはずです。
次に、Googleのウィンドウを開いたまま、この「ソフトウェアも自作できる」のウィンドウに戻り、このリンク（インフォシーク）をクリックしてみてください。インフォシークのサイトが先ほどのGoogleのウィンドウに表示されるのですが、裏に隠れてしまっているはずです。ちなみに、これは Internet Explorer 6 の場合の動きです。Netscape の場合は調べていません。
これでは不便だと思います。同じ別ウィンドウを再利用するとともに、そのウィンドウが自動的に前面に表示されるようにできたら親切ですよね。そこでWebをいろいろ検索してみたところ、どこかのBBSにヒントとなる情報が投稿されていたので、それを利用させていただきました。どんなJavaScriptになっているかは、このページのソースを表示していただければ分かりますが（IEでは［表示］メニューの［ソース］をクリック）、このあと概略を紹介します。
まず、<HEAD> 要素の内側に、次のようなJavaScript関数を記述します。
<SCRIPT type="text/javascript"><!--
function OpenNewWin(url) {
myWin = window.open(url, "MyNewWindow");
myWin.focus(); // 開いた別ウィンドウにフォーカスを置く（前面に表示）
}
// --></SCRIPT>
外部サイトへの参照は、次のように記述します。
<A HREF="javascript:OpenNewWin('http://www.xxx.yyy/')">参照サイト</A>
試しに、このリンク（Google）をクリックしてみてください。どうです？ 別ウィンドウが前面に表示されますよね（IEで左側に「お気に入り」を表示している場合、この方法で開く別ウィンドウになぜか「お気に入り」が表示されないのが不思議です…）。
<NOSCRIPT> タグを使って通常のリンクも併記するのが最も親切な方法なのだと思います。ちょっと手間がかかるので、このサイトでは省略させていただいています。 → 簡単に <NOSCRIPT> 〜 </NOSCRIPT> のテキストを生成できる「秀丸」のマクロを作成したので、サイト内の該当するページを更新しました。
<A onclick="OpenNewWin('http://www.xxx.yyy/')"> に書き換えると、これはブロックされてしまいました。
このサイトで利用しているもう１つの「仕掛け」は、"NEW" や "UP" のアニメーションGIFの表示を自動制御するスクリプトです。サイトのトップページなどで利用しています。単純なプログラムですが、いちおう私が自分で考案しました。このコーナーの前ページに書いたとおり、「面倒な作業はコンピュータにやらせるべきだ」というのが私のモットーですので、この種の自動制御はぜひ実現させたかったんです。
用意するJavaScript関数は次の２つです。
<SCRIPT type="text/javascript"><!--
var curY;
var curM;
var curD;
var curDate;
function SetCurDate() {
var day = new Date(); //現在時刻を取得
curY = day.getYear().toString();
curM = (day.getMonth() + 1).toString();
curD = day.getDate().toString();
if (curM.length < 2) {curM = "0" + curM;} // "1" → "01" など
if (curD.length < 2) {curD = "0" + curD;}
curDate = curY + curM + curD; // "20040904" という形式の文字列になる
}
function DetDisp(id, limit) {
// 要素に設定されているリミット日付以前なら、その要素を表示
if (curDate <= limit) {
id.style.display="";
}
}
// --></SCRIPT>
Webページがブラウザにロードされる時点で、ユーザーが使用しているコンピュータから時刻を取得してJavaScriptの変数に設定するために、次のように記述します。
<BODY onload="SetCurDate();">
表示/非表示を自動制御したい要素は、次のように記述します。
<IMG SRC="../img/up.gif" STYLE="display:none;" NAME="up1" onload="DetDisp(this, 20040915);" />
この場合、2004年9月15日まではこのgifイメージが表示されますが、それより後になると表示されません。NAME="xxx" で指定する要素名は任意ですが、１つのファイル内で要素名が重複しているとこのスクリプトが機能しません。なお、HTMLタグ内のCSSスタイルとして "display:none;" と記述していますので、スクリプトが動かない環境ではこのgifイメージはいつも表示されないことになります（実害はないですよね）。それと、もしユーザーが使っているコンピュータの内蔵クロックの日付が間違っていると、当然ながらこの仕組みは誤動作します。
このセクションの結びに、JavaScriptの参考資料をご紹介します。
JavaScriptはWebページを見ている人のコンピュータ上で実行されるプログラムですが、CGI（Common Gateway Interface）スクリプトはWebサーバー上で実行されるプログラムです。その分だけ、セキュリティ上の危険を考慮に入れる必要があるなど、プログラミングは難しくなります。また、自分のホームページをホスティングしているプロバイダや利用しているWebサーバーによってどんなスクリプト言語を使用できるかが異なりますし、CGIを使用する上でのセキュリティ上の制限も様々です。
私はまだ自分でCGIスクリプトをプログラミングした経験はありません。でも、インターネット上では優秀なCGIスクリプトがたくさん公開されていますので、それを利用する方法さえマスターすれば、自分でプログラミングできなくても便利な機能をホームページに設定することができます。私も、このサイトでいくつか利用させていただきました。
CGIスクリプトの利用例としては、アクセスカウンタ、様々なタイプののBBS（電子掲示板）、アンケート機能、チャット機能、アクセス統計の収集機能などがあります。
CGIスクリプトは、使い方を誤ったり、CGIスクリプトのプログラミングに問題があったりすると、いわゆるセキュリティホールの原因となりかねないそうです。また、自分でプログラミングしたCGIプログラムにバグがあって無限ループに陥ったりすると、同じWebサーバーを利用している他のユーザーに迷惑がかかります。ですから、インターネットからCGIスクリプトをダウンロードして使用する際には、その信頼性をよく確認しないといけません。私は、@niftyのホームページ作りのフォーラムからリンクが張られていた「Kent Web」というサイトのCGIを利用しています。
毎度お決まりですが、アマゾンで売れ筋のCGI関連（Perl言語）の書籍はこちらをご覧ください。また、All About Japanでも情報が豊富に提供されています。
（2004/9/18 公開）
「ソフトウェアも自作できる」