ホームページ小技、裏技紹介

Top ＞ Virtual Factory ＞ HTML Tech

当ページで紹介するテクニックは基本的なHTMLをマスターした方を対象に説明しております。疑問点、不具合等ありましたら、直接メール下さい。【2004.04.18】

---

CGIスクリプト（Common Gateway Interface）

CGIとは？

「ホームページとは？」という質問には大抵の方が答えられるでしょう。ホームページとはHTML言語で書かれたものをブラウザソフトが読み、テキスト、画像、音などマルチメディアソースを自由に記述できるものです。当初ホームページでは情報発信の機能しか持っていませんでした。そこに閲覧者に対してインタラクティブな機能を持たせる技術をCGI(Common Gateway Interface)と呼びます。例えば、掲示板やアンケートなどです。
　実際にはひとつのプログラムをWWWサーバー上で実行し、その結果をブラウザソフトに送り返すことになります。プログラム言語はサーバー環境で制限されますが、いろいろな言語を使うことができます。中でも広く用いられるものがPerl言語です。

Perl言語とは？

いくつかプログラム言語が使えるのに、なぜPerl言語がよく使われるのでしょうか？
その理由は書いてみるとわかります。Perl言語はインタプリタ言語（１行ずつ実行するプログラム言語）であり、テキスト処理能力に優れています。例えばC言語では変数の宣言にはじまり、ひとつのプログラムを書くのに何行も必要になります。一方Perl言語では変数扱いが柔軟で、テキストと数値を同じ変数で扱えたりします。よってＣ言語の半分以下で書くことができるでしょう。また、機種依存性も低く、どのマシンでも扱えることも人気の理由のひとつです。

インタラクティブな機能とは？

インタラクティブな機能とは、単に発信された情報を見るだけではなく、その情報から閲覧者が答えられる何かが必要です。選択肢とか文章による回答とか。インタラクティブと呼べるためには閲覧者から何らかの入力を受け入れなければできません。
　入力を受け付けるにはブラウザソフトにはフォームと呼ばれる次のようなHTMLをサポートしています。
これらのフォームにはすべて、
変数の指定：INPUT NAME="???"と
値の指定：VALUE="!!!"
が設定されます。これらの変数をもとにプログラムを実行させ、その結果をHTMLとしてブラウザへ返すことでインタラクティブ性を実現させています。

フォームによる入力方法（※表示例のため動作しません）

テキストボックス　：
メニューバー　　　： 選択肢１ メニューから選択 選択肢２
チェックボックス　：
ボタン　　　　　　：

ホームページ上からの実行方法

例えばsample.cgiというプログラムを実行させるためには、いくつかの方法があります。ブラウザソフトで直接ファイル名を指定してもOKです。また、ホームページ上に先ほどのボタンを使って実行させることも可能。後に紹介しますが、Javascriptと組み合わせて実行させることも可能です。
※プロバイダによってはCGIの使用を許可してないところもあります。

具体例紹介

当ＨＰとしては以下のページにCGIスクリプトを利用しています。主にデータベース機能や掲示板、自動更新、ユーザー登録などに活用しています。アクセスカウンタもCGIのひとつです。

• What's New!
• Link to Link
• Viitor's Files

---

Javascript

JavaScriptとは？

CGIがサーバー側で実行するプログラムであることに対して、Javascriptはクライアント側で実行するプログラムです。ブラウザにはJavascriptの動作をON/OFFすることができます。ユーザー側が実行するかしないかを選択できます。注意しなければいけないのはJavascriptが動作しない環境でも不具合ないような設定を考慮することです。
　スクリプトはHTML内にタグとして記述されます。イベントハンドラと呼ぶパラメータによってHTMLにインタラクティブな機能を追加することが可能になります。イベントとは「マウスをクリックする」とか「マウスカーソルを当てる」とかいろいろあります。マウスを当てただけでボタンの色が変わるようなものはよく使われています。

JavaScriptによるアクティブボタンの例

当ＨＰで活用しているアクティブボタンを紹介します。左のフレームにあるボタンにアクティブボタンを採用しています。同様の画像を右側に表示しています。マウスカーソルを当てると黄色が表れます。これはマウスカーソルが当たったときに＜img src＞タグのsrcをJavascriptでimage2に書き換えるという指定を行っています。合わせてフォーカスが外れたときにはsrcをimage1に戻すという指示が入っています。

初期画像：image1
イベント＝マウスカーソルON：image2
イベント＝マウスカーソルOFF：image1

---

SSI（Server Side Include）

SSIとは？

これはサーバーサイドインクルードといって文字通りサーバー側でプログラムを実行して、その結果をHTMLファイルの中に組み込むという方法です。CGIスクリプトの実行結果等を特定のHTMLファイルの中に差し込む（インクルード）という動作になります。一般的にはSSIを使ったファイルには.shtmlという拡張子を使うよう推奨されています。当ＨＰでは更新情報のはめ込みに活用しています。※webサーバーによっては利用できないところもあります。

SSIで利用できるコマンド

SSIで利用できる主なコマンドは次のとおり。サーバー側の情報をHTML内に取り込むため、動的な部分だけをSSIに記述させるだけでインタラクティブなページにすることが可能。

コマンド	内容
#include	htmlファイルを指定することで、そのファイルに記述されたタグが追加される。HTML全体を記述する必要はなく、追加したいタグだけファイルに記述してあればＯＫ。
#include virtual	CGIスクリプトを指定することで、その実行結果（HTMLタグ）を追加する。#execでは変数を与えることができませんが、このコマンドなら変数指定が可能。
#exec	CGIスクリプトを指定することで、その実行結果（HTMLタグ）を追加する。
#echo	サーバーの情報を表示する。現在時刻などの変数を指定することでHTML内に時刻を表示することが可能。
#flastmod	ファイルの最終更新時刻を表示することが可能

更新履歴の自動化

当ＨＰでは代表的なページに更新情報の表をSSI(#exec)を使ってはめ込んでいます。CGIスクリプトによって更新した内容を登録し、その結果をCGIスクリプトによって最新の５件だけを＜table＞タグで出力させます。

HTML内の記述方法：#exec cgi="CGIスクリプト実行ファイル.cgi"
以下実行結果

その後の改訂で各カテゴリのページに関連する更新情報のみ表示させるように変更しました。今度はカテゴリキーワード（例：today）から更新情報を検索し、最新５件を＜table＞タグで出力させます。この場合#excecコマンドでは変数指定ができません。そこで#include virtualというコマンドを使うことで解決できました。

HTML内の記述方法：#include virtual="CGIスクリプト実行ファイル.cgi?変数=today"
以下実行結果（ホンダ・トゥデイ関連の情報だけ表示される）

---

HTML 4.01/XHTML1.0

HTML4.01

CSSの説明の前にHTML4.01について触れておきましょう。わたしがホームページ作成をはじめたのは９６年頃。Netscape全盛期で、後にInternetExplorerが登場した頃です。当時のHTMLではフォントサイズの指定＜FONT＞タグ、センタリングには＜CENTER＞といったタグが使われていました。実は現在のHTML4.01ではこれらのタグは非推奨とされています。
　現在のHTMLの考え方は大きく異なってきました。HTMLには構造を記述。スタイル（見え方、レイアウト）はCSSに記述するという方向になっています。スタイルシートという技術が入ってきてwebのデザインは自由度が非常に高くなりました。それゆえHTMLから分離させてスタイルを指定するという形になってきたようです。

XHTML1.0

実は当ＨＰでは大幅改定にあたってHTML4.01で進めてきました。この段階でもうひとつ新たな仕様が存在しました。それがXHTML1.0です。タグの指定方法がより厳しく定義されています。いまのところXHTMLを採用する大きなメリットはありませんが、今後の発展を考えるとXHTMLの記述に対応しておく方がいいと考え、途中からXHTML1.0対応に切り替えました。
　基本的にはHTML4.01をベースとしています。その仕様にXML（ユーザーがタグを指定できるHTMLの拡張機能）の利用を踏まえた形になっています。
　タグの記述方法の主な違いを紹介すると、すべてのタグには開始と終了タグが存在すること。空要素には必ず終了タグの形式を取ること。といったものです。

タグ	HTML4.01	XHTML1.0
ブロック要素	＜p＞段落１ 行間をいれるために使用可能	＜p＞段落１＜/p＞ 必ず段落を囲むように使用。＜p＞だけを使用することはできません。
リスト要素	＜li＞項目１ ＜li＞項目２ 終了タグが省略可能	＜li＞項目１＜/li＞ ＜li＞項目２＜/li＞ 終了タグは省略できません
空要素	＜br＞改行	＜br /＞空要素には半角スペースとスラッシュを入れて閉じる形をとる 他＜hr＞、＜img＞なども同様。

DOCTYPE

DOCTYPEとはHTMLの記述方法を指定することです。HTMLの記述方法にはDTD（Document Type Definition)によって定義された３種類あります（実際にはバージョンごとにDTDが存在します）。当ＨＰではTraditional DTDをDOCTYPE宣言しています。一部フレームを使っているページにはFrameset DTDを宣言しています。宣言文がなくても特に問題ありません。宣言がない場合は各ブラウザの仕様に応じて解釈されます。つまりブラウザによってレイアウトが異なる場合が出てきます。

１．Strict DTD　非推奨属性やフレームなど一切使えない
２．Traditional DTD　非推奨属性が使えます
３．Frameset DTD　Traditional DTDにフレーム関連要素を加えた仕様

ブラウザソフトの互換モードについて

DOCTYPE宣言がなくても不都合ないと書きましたが、何のための宣言なのでしょうか。たくさんのブラウザソフトが存在する中で、解釈できる要素も様々です。実はDOCTYPE宣言をHTMLに明記することで、ブラウザソフトは互換モードで表示されるようになります。ブラウザソフトがデフォルトで持つ解釈では表示がソフトで異なる場合がありますが、DOCTYPE宣言により互換モードで表示された場合ほとんどどのソフトでも同じレイアウトで表示することが可能となります。

---

CSS（Cascading Stile Sheet）

CSSとは？

カスケーディングとは継承という意味です。HTMLの特徴は文章を構造化することです。階層構造となった文章に装飾を施すのがCSSです。トップ階層に指定した内容はすべてに適用されます。一部の階層に指定した内容はその階層より上には影響しません。これがカスケーディング（継承）と呼ばれる特徴です。
　現在はCSS2という仕様が公開されていますが、未だブラウザソフトでCSS2を完全対応したものはありません。つまりブラウザによっては使えるスタイルシートとそうでないものが存在します。よって制作者は閲覧するひとに不都合がないように配慮すべきです。

CSSの自由度の高いレイアウト指定方法

CSSの特徴としては非常に細かいレイアウトの指定ができることです。以下は＜div id="box"＞というブロック要素にboxというidにスタイルを適用した例です。これ以外にも背景画像を入れたり、画面の位置を指定するなど多彩なレイアウトが可能です。

CSSのレイアウト指定方法の例
１．枠の幅：3px、色：グレー、タイプ：RIDGE（枠だけ飛び出たようなタイプ）
２．背景はグレー、テキストサイズ：90%
３．内容領域と枠の隙間（Padding)：10px

CSSによるアクティブリンクの例（文字色）

Javascriptのところでアクティブボタンの例を紹介しましたが、こちらは画像を使わずテキストの色指定を変更するというCSSの特徴を使ったアクティブリンクです。マウスをリンクの文字にフォーカスしたときだけ文字の色が赤色に変わります。T.K's Factoryではすべてのページでこの設定を利用しています。

アクティブリンクのCSS指定方法
a:link {color:#0000FF}　（a要素がlinkの場合：青色）
a:visited {color:#000066}　（a要素がキャッシュ済みの場合：紺色）
a:hover {color:#ff0c59}　（a要素にマウスカーソルがフォーカスしたとき：赤色）
a:active {color:#ffff00}　（a要素にマウスカーソルが押されたとき：黄色）

CSSによるアクティブリンクの例（枠設定）

これも文字色の変更と同様の手法ですが、画像に設定した枠の種類をマウスカーソルの状況に応じて変化させた例です。画像にリンク設定がされた場合に適用されるようにしています。右の画像にマウスカーソルを当てると枠設定がアウトセット（飛び出たタイプ）からインセット（引っ込んだタイプ）に変化します。

アクティブリンクのCSS指定方法
a:link img {border: 2px outset #999999}
　（a要素がlinkで画像がある場合：枠の色＝グレー、幅2px、枠のタイプ＝アウトセット）
a:hover img {border: 2px inset #999999}
　（a要素の画像にマウスカーソルがフォーカスしたとき：枠の色＝グレー、幅2px、枠のタイプ＝インセット）

外部スタイルシートの活用

CSSの指定方法にはHTMLに組み込む方法と外部スタイルシートを参照する方法があります。HTMLに組み込む方法は構造化されたタグにスタイルを個々に指定するというもの。すべてのタグに指定していくのは大変です。
　そこで外部スタイルシートを参照する方法が役に立ちます。＜link＞要素でスタイルシートのファイルを指定します。従来のHTMLの書き方ではタグ内にレイアウトの設定パラメータ等をいくつも下記並べる必要がありましたが、スタイルシートを外部ファイルに書くことで、タグにはスタイルシートで定義した”クラス”や”ID”という区別により共用が可能となり、HTMLの記述内容としてはとてもシンプルになります。当ＨＰではT.K's Factoryのスタイルシートを作成し、そのカラーや画像などを変更したファイルをVirtual Factoryなどの別デザインへ適用しています。これにより統一されたデザインが簡単に実現できます。また外部ファイルの変更だけで、webデザインを大きく変更することも可能です。

外部スタイルシートの参照記述方法（head内に記述）
T.K's Factoryの場合
＜link rel=stylesheet href="スタイルシートファイルＡ" type="text/css"＞
Virtual Factoryの場合
＜link rel=stylesheet href="スタイルシートファイルＢ" type="text/css"＞

---

不具合対策記録　

Windows IE7.0 position指定不具合報告

IE7.0でいくつか問題がありましたが大きなところが画像の左側にスペースができてしまっている症状。長い間ほっておいたのですが、この度、ようやく解決にこぎつけました。
　当ＨＰではインラインフレーム要素に対して、positionのfixedというメイン画面をスクロールしてもインラインフレームは動かない仕様としておりました。このときのCSSの指定に問題がありました。

対策前
iframe#side {position: fixed; width: 150px; border-width: 0; float: left;}

対策後
iframe#side {position: fixed; left: 0px; width: 150px; border-width: 0; float: left;}

通常ブラウザでは画面左上を基準としてフレームの位置が決定されますが、対策前の場合、IE7の解釈としては画面基準ではなく、なぜか関係ない（といっても隣り合っている要素）

Top ＞ Virtual Factory ＞ ホームページ小技、裏技紹介

このホームページはCss対応ブラウザでご覧下さい。サイト内の画像・文章の無断掲載・転載はご遠慮ください。

Copyright 1996〜2008 t-kondo(t-kondo@eris.ais.ne.jp)