T.K's Factory

サイト内検索メニュー


AND OR

What's NEW?
最新の5件 

2008.08.20

V.galleryに三菱アイのSMART仕様を追加しました

2008.04.13

Virtual.Factoryにて三菱アイのリヤビューを公開しました

2008.03.13

Virtual.Factoryに三菱アイの3DCGを追加しました

2007.11.03

Vf.FactoryにiPodガレージを追加しました

2007.07.15

today TYPE-R 07MYデビュー! in VF.gallery




gogo.gs
kog banner Vfactory banner
T.K's Factory
K-CAR OWNER'S GARDEN Virtual Factory K-CAR OWNER'S DATA Link to Link Visitor's file コミュニケーション・ルーム
CONTENTS

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



CGIスクリプト(Common Gateway Interface)

CGIとは?

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

Perl言語とは?

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

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

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

フォームによる入力方法(※表示例のため動作しません)
テキストボックス :
メニューバー   :
チェックボックス :
ボタン      :

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

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

具体例紹介

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


Javascript

JavaScriptとは?

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

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

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

初期画像:image1
V Factory イベント=マウスカーソルON:image2
イベント=マウスカーソルOFF:image1


SSI(Server Side Include)

SSIとは?

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

SSIで利用できるコマンド

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

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

更新履歴の自動化

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

HTML内の記述方法:#exec cgi="CGIスクリプト実行ファイル.cgi"
以下実行結果
[an error occurred while processing this directive]

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

HTML内の記述方法:#include virtual="CGIスクリプト実行ファイル.cgi?変数=today"
以下実行結果(ホンダ・トゥデイ関連の情報だけ表示される)
[an error occurred while processing this directive]

HTML 4.01/XHTML1.0

HTML4.01

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

XHTML1.0

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

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

DOCTYPE

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

1.Strict DTD 非推奨属性やフレームなど一切使えない
2.Traditional DTD 非推奨属性が使えます
3.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のレイアウト指定方法の例
1.枠の幅:3px、色:グレー、タイプ:RIDGE(枠だけ飛び出たようなタイプ)
2.背景はグレー、テキストサイズ:90%
3.内容領域と枠の隙間(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によるアクティブリンクの例(枠設定)

V Factory

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

アクティブリンクの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の記述内容としてはとてもシンプルになります。当HPではT.K's Factoryのスタイルシートを作成し、そのカラーや画像などを変更したファイルをVirtual Factoryなどの別デザインへ適用しています。これにより統一されたデザインが簡単に実現できます。また外部ファイルの変更だけで、webデザインを大きく変更することも可能です。

外部スタイルシートの参照記述方法(head内に記述)
T.K's Factoryの場合
<link rel=stylesheet href="スタイルシートファイルA" type="text/css">
Virtual Factoryの場合
<link rel=stylesheet href="スタイルシートファイルB" type="text/css">

不具合対策記録 

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

IE7.0でいくつか問題がありましたが大きなところが画像の左側にスペースができてしまっている症状。長い間ほっておいたのですが、この度、ようやく解決にこぎつけました。
 当HPではインラインフレーム要素に対して、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の解釈としては画面基準ではなく、なぜか関係ない(といっても隣り合っている要素)

要素の枠の指定を引き継いでしまったようです。
対策後では左右の位置指定として「左側のマージンを0pxとする」という指定を追加したことで解決しました。


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

更新履歴の自動化で紹介した5件の更新情報についてWindowsで確認したところなぜかセンタリングされていました。(同画像中央部)これについてはalign="left"を追加して解決しました。

対策前
<tr><th>2007.08.20</th><td>・・・・</td></tr>

対策後
<tr><th>2007.08.20</th><td align = "left" >・・・・</td></tr>

通常タグはデフォルトで左寄せになるはずなのでわざわざ指定する必要ないはずなんですが・・・。列のトップにタグでセンタリングされているのを引きずってしまっているのでしょうか。

Windows IE7.0 画像の並び方不具合対策

同じ画像のメニューボタンの並びに隙間があることがわかります。IE7以外では隙間なかったはずなんですが・・・。対策方法としてはこんな手法で解決したので紹介します。

対策前
<img name="img2" src="../image/icon/vfactory.gif" border = 0 /><br />

対策後
<img name="img2" src="../image/icon/vfactory.gif" border = 0 align = middle />

余計な<br />を削除したことで間隔は狭くなったんですがそれでもちょっと隙間が残る。いろいろ試した結果、imgタグ内にalign = middleという指定を追加することで解決しました。

Windows IE7.0 フレーム表示統一化対策

同じ画像のインラインフレームに枠線が表示されているのがわかります。本来ここはborder=0と指定してるので、表示されないはずなんですが・・・。以下の方法で表示させないようにしました。

対策前
<iframe id="side" name="side" src="・・・・

対策後
<iframe id="side" name="side" frameborder="0" framespacing="0" src="・・・・

このインラインフレーム要素の枠はid="side"のborder="0"としてCSSに記述しております。他のブラウザではこれに従ってくれるんですが、IEの場合はへそ曲げてしまいます。そこでHTMLのタグ側にframeborderとframespacingという指定を追加することで見栄えが統一されました。



参考文献

書名著者名出版社備考
HTML&XHTML&CSS辞典大藤 幹秀和システム最新のHTML4.01とCSS2.0の仕様が詳細に解説。当HPのリニューアルに大いに役立ちました。
詳解HTML&JavaScript辞典岡蔵龍一、半場方人秀和システム最新のHTML4.0とJavaScript1.3のコマンドが満載。同書のホームページも活用可能で、便利。
改訂第2版JavaScriptポケットリファレンス古籏一浩技術評論社改訂版となりJavaScript1.3に対応
CGI&Perlポケットリファレンス藤田 郁、三島俊司技術評論社プログラムを考えるときに片手に持ちたい1冊です。
Perl/CGIプログラミング&サンプル大島智樹、平尾潤一秀和システムPerlにしぼった解説。シンプルでわかりやすいです。
続・HTML入門
新機能、CGI、Webの進化
ローラ・リメイプレンティスホールかなりマニアック。内容が古いけど詳細な説明がグッドです。