第1回　まずは基本のXHTMLを作ることから

XHTML＋CSS＋スクリプトの基本を身に付け，手作りのメリットと面白さを発見してみましょう！

2007.07.05

自分で書いて，しくみを理解！

古いけれども今も使える『無料の』技術で， Webプログラミングの面白さを，再発見してみましょう！ ぜひ，リストを追いながら，初心にかえって，入力してみてください。プログラミングの楽しさを実感できることでしょう。

便利すぎる今こそ，頭と手を鍛えよう！

　えっ！？いまさら手入力だなんて！？と思うかもしれません。効率や生産性に逆行しているように思えるかもしれません。最近の開発環境はコスト・パフォーマンスに優れ，優れた無償のツールもあります。ところが，こんなご時世だからこそ，手入力が有効なのです。

　便利さに依存していたのでは，基本を理解できません。プログラムが動いた時の感動も薄く，応用が利きません。

　本稿で取り上げるプログラムは，さしずめ，シンプルな「おむすび」の作り方のようなものです。炊飯器（パソコン）とお米（ブラウザ）と塩（テキスト・エディタ）さえあれば簡単に学べます。シンプルな塩むすびだって，自分で作ると，何倍もおいしく感じられ，感動するものです。そして，ジャコを混ぜてみようとか，薄焼き玉子でくるんでみようとか，アイデアがわくようになります。基本を知っていればこそ，同じご飯ものである，いなり寿司やきんぴらバーガーを作る必要が生じても，戸惑いません。出来合いのおむすびを買うことしか知らない人なら，悩んでしまいます。

　プログラミングも同じです。自分が書いた命令通りにプログラムが動作すると，うれしいものです。プログラミングっておもしろいな，という気持ちが，コードの組み合わせ方や，新しいアイデアにつながります。基本を知っているからこそ，新しい技術にも取り組みやすくなります。最近，さらに基盤となるコンピュータの仕組みを伝える記事も増えていますが，これも，同じ理由からでしょう。

　出来合いのコードを理解することなく簡単に利用して済ませることは，逆に言えば，誰にでも，類似のものを作れるということです。そんな作業「だけ」を続けていて，モチベーションを維持できるでしょうか？息切れせずに仕事を続けていくには，「自分にしか作れないもの」を，少しずつ増やしていかなければならないのではないでしょうか。

　手入力ができる実力を養ったうえで，ツールを使いこなすことができれば，鬼に金棒です。本稿では，無料の技術を使った，ほんの数行の小さなコードから取り上げていきます。仕事の合間に，箸休めのように，気軽な気持ちで取り組んでみてください。本連載の合言葉は「スローなコードで行こう！」です。

スクリプトを書く準備
～まずは，ひな型のXHTMLファイルを作る～

　本稿では，テキスト・エディタひとつでのプログラミングを紹介します。エディタは，Windowsに付属する「メモ帳」でも何でもかまいません。

　スクリプト言語は，JavaScriptを使います（図1)。ブラウザは，Windows版Microsoft Internet Explorer（IE）7.0およびMozilla Firefoxバージョン2.0.0.1で，表示を確認していきます。一部，IEのみで動作するものも取り上げる場合に限り，サンプルタイトルの横に対応ブラウザ名を明記しますので確認してください。

図1●スクリプト言語の変遷（普及時期による）
[画像のクリックで拡大表示]

　次回から，スクリプトを書く実践に移りますので，今回は，ひな型のXHTML（＊1）ファイルを作っておきましょう。リスト1のように入力して，「ひな型.html」のような任意のファイル名を付けて，リスト中に指定した文字コードで保存しておいてください）。（＊2）。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "
-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xml:lang="ja" lang="ja">
<head>
<title>ここにタイトルを書きます</title>
<style type="text/css">

ここにCSS（エンベデッド・スタイルシート）を書きます
</style>
<script type="text/javascript">
<!--
ここにスクリプト(この場合はJavaScript）を書きます
//-->
</script>
</head>
<body>
ここに内容を書きます
</body>
</html>

　Web標準に関心がある人なら，XHTMLにもなじみがあるとは思いますが，本サイトを初めて訪れる読者のために，XHTML1.0の基本ソースであるリスト1について，少し補足説明をしておきます。

　DOCTYPE宣言は，HTML同様，strict，transitional，framesetの3種類があります。本稿では，フレームも，非推奨のタグも使いませんから，strict（ストリクト）を宣言しています。そして，文字コードは，Shift_JISを使っています。現在普及しているブラウザでは，文字コードをShift_JISではなく，例えば，UTF-8を指定して保存すると，文字化けの発生するケースがあるからです。

　XHTMLのタグは小文字で書きます。また，HTMLをXMLで再定義した仕様ですから，ウェル・フォームド（整形式）になるように，開始タグと終了タグは，きちんと入れ子にしましょう。 HTMLでは，終了タグが省略できたり，不要なものもありますが，XHTMLでは必須です。 <hr>は<hr/>，<img src="hoge.gif" alt="hoge">の場合は <img src="hoge.gif" alt="hoge" />のように書きます。さらに，属性値は，ダブルクォート（"）で挟みましょう（＊3）。

3大スクリプトの作法の違いを把握しておこう

　先に書いたとおり，本稿ではスクリプト言語としてJavaScriptを使います。ただ，読者には，スクリプト言語としてVBScriptやJScriptに親しんでいる人もいることでしょう。そうした方々のために，注意点を簡単に挙げておきます。基本的には同じですが，ちょっと記述方法が違います（図2）。

●VBScript
(1)　VBScriptは，米Microsoftが開発したスクリプト言語で，Windowsアプリケーション開発言語「Visual Basic」のサブセットです。
(2)　IEでのみ動作します。
(3)　コードは基本的に<head></head>内に記述します。sub～end sub内にコードを記述するsubプロシジャと，function～end function内にコードを記述するfunctionプロシジャがあります。subプロシジャは値を返しませんが，functionプロシジャは値を返すことができます。また，functionプロシジャは，呼び出したプロシジャから，定数や変数，あるいは式などの引数を取得できます。
(4)　変数名には，大文字小文字の区別がありません。例えば，Dim myCodeとDim mycodeは，同じものとして扱われます。

●JScript
(1)　JScriptはMicrosoftが開発したスクリプト言語で，米Netscape Communicationsと米Sun Microsystemsが共同開発したJavaScriptに，Microsoft社の独自機能を追加したものです。
(2)IEでしか動作しませんが，JavaScriptで共通に使用されているメソッドや関数を使用した場合は，IE以外のブラウザ（Firefox等）でも動作します。その場合，<script type>の宣言にはJavaScriptを指定する必要があります。
(3)　基本的に，<head></head>内に記述します。関数を定義する場合は以下のように記述します。
　　　　 function myCode(){
　　　　　　～ここに内容を定義～
　　　　 }
(4)　変数名の大文字小文字を区別します。例えば，var myCode;とvar mycode;は別物として扱われます。
(5)　コードの終わりは「；(セミコロン)」で閉じます。例えば，次のように書きます。window.alert("Hello DynamicHTML");

●JavaScript
(1)　JavaScriptはNetscape CommunicationsとSun Microsystemsが共同開発したスクリプト言語です。
(2)　基本的には主要なWebブラウザ（Firefox等）上で動作します。構造は，JScriptとほぼ同じです。

図2●VBScript，JScript，JavaScriptの違い

　具体例で，コーディング上の違いも把握しておきましょう。リスト2は，「Hello DynamicHTML！」と表示するコードを，VBScript，JScript，JavaScriptで，それぞれ記述したものです。

●VBScriptのコード
<script type="text/VBScript">
<!--
  sub window_onload()
    MsgBox("Hello DynamicHTML!")
  end sub
-->
</script>

●JScriptのコード（＊4）
<script type="text/JScript">
<!--
    window.alert("Hello DynamicHTML!");
//-->
</script>


●JavaScriptのコード（＊5）
<script type="text/JavaScript">
<!--
    window.alert ("Hello DynamicHTML!");
//-->
</script></code></pre></td>

リスト2●

　これらのコードからわかるように，JScriptとJavaScriptについては，<script>のtype宣言以外の記述方法は同じです。このような簡単なコードの場合は，使用されているメソッド（alert）がJScriptやJavaScriptに共通ですから，JScriptのtype宣言部分をJavaScript向けに変更するだけで，IEだけでなく，Firefoxでも動作するようになります。

まだまだ現役で活躍している，古い技術がある

　さて，スクリプトを書くための準備ができたところで，ちょっとお耳を拝借。皆さんは，リッチ・クライアントを開発するための手法である「Ajax」をご存じのことと思います。実はAjaxは，Firefoxなどの上で動作するXMLHttpRequestオブジェクト，IE上で動作するActiveXObject("Microsoft.XMLHTTP")と，JavaScript，DynamicHTML（DHTML）という，昔からある技術の組み合わせなのです。

　XMLHttpRequestは6年以上も前に使われていました。今年の7月にはMicrosoftがXAML（＊6）の書き出しをサポートするWeb制作ツール・スイート「Expression Studio」をリリースする見込みですが，図1のように，MicrosoftのWeb技術は，ActiveX→DynamicHTML→DirectAnimarion→（DirectX）→Chromeffects→XAMLのように発表されてきています。おおもとの技術は，少しも古びていないのです。JavaScriptだって，いわずもがなです。それらの“古い”技術が，今も，現役で使われています。

　FlashやSpry（＊7）が全盛ではありますが，ちょっとしたオブジェクトの移動やビジュアル効果なら，スクリプト・ベースでじゅうぶん可能です。また，ブラウザを特定する場合は，ノード数が多くないXMLデータの処理であれば，スクリプトでカンタンにできてしまいます。

　次回からは，リスト1のひな型のXHTMLファイルを使って，スクリプトによる処理を，紹介していきます。ここ数年，プログラムを始めた学卒者や若い人たちには，初耳のこともあるはずです。知っていれば，ちょっとイバれる？かもしれませんよ。お楽しみに！