初心者のためのホームページ作り 第77号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第77号> 今週のおさらい
                   毎週金曜日配信 What's New 2003/12/5
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ JavaScript講座  第15回 --- 基本のおさらい
   ■ プライン特許問題における解決法
JavaScript講座 --- 基本のおさらい
新しい読者も増えてきたことや、まだJavaScriptの仕組みが分からない、という方のために、もう一度JavaScriptの基本的なことに関して解説します。
JavaScriptは、その仕組みやあらかじめ定義されている様々な仕様について知ることが、上達の早道です。難しい面もありますが、他のプログラム開発言語と比べると、とてもとっつきやすい簡単な言語でありことが実感できると思います。
JavaScriptの実行環境
JavaScriptのプログラムは、HTMLの文中に書き込むことができるテキストベースの言語です。そして、そのプログラムが実行できるのは、唯一閲覧者のユーザエージェント(Webブラウザ)です。決してサーバ側で何かをするなどといったことはありません。
ただし、閲覧者のユーザエージェントが JavaScript を実行できる環境にない場合、プログラムは実行できません。特に非視覚系ブラウザでは、JavaScriptを実装していないことが多いものです。また、閲覧者のセキュリティの観点から、JavaScriptを「オフ」にしている視覚系ブラウザもあることを知ってください。
オブジェクトと制御命令
JavaScriptの構文を構成するものが、「オブジェクト」と「制御命令」です。
オブジェクトとは「モノ」という意味がありますが、JavaScriptではブラウザ画面に表示させる、ウィンドウをコントロールする、計算する、日付を扱うなど、実に様々なオブジェクトがあらかじめ定義されています。こうしたオブジェクトを利用することで、複雑なプログラミングを必要とせず、比較的簡単に作成することができます。

JavaScriptのオブジェクトと制御命令を読み込んでいる図

この図は、閲覧者のブラウザで HTMLに記述された JavaScriptを実行させる仕組みを描いたものです。JavaScriptは、基本的にオブジェクト、制御命令で構成されており、プログラムはそうしたオブジェクトなどを利用して作成します。
「制御命令」は、条件によって分岐するプログラム、あるいは処理を繰り返すプログラムなどを作成する場合に用いられます。ユーザの操作によって返す答えを選択することができる条件分岐は、実に多くのシーンで使われています。
「オブジェクト」と、「制御命令」をマスターすることは、それだけでも十分立派に通用するプログラムを書くことができるといっても過言ではないでしょう。
関数
HTMLから、JavaScriptの関数を読んでいる図 関数とは、ある小さなプログラムをあらかじめ作成し、それを「関数として定義」することで、必要に応じて自由に呼び出すことができる「サブルーチン」のようなことを指します。
関数は JavaScriptであらかじめ組み込まれている「ビルトイン関数」と、制作者が任意に作成する「ユーザ関数」とに区別されています。
一般的に最も多く利用されているのが「ユーザ関数」で、「function」という制御文を利用して定義します。関数名は自由ですが、JavaScriptであらかじめ予約されている「予約語」を使うことはできません。
関数は、上記の図にあるとおり、HTMLの構文(イベント属性を利用する)から、直接呼び寄せることができます。ユーザの操作に応じて JavaScriptを実行することができる機能を持っているので、JavaScriptを作成する上で、非常に重要なキーワードとなります。
JavaScriptの作法
不幸にして閲覧者の環境によっては、JavaScriptが実行できない場合があります。そのとき、その閲覧者はプログラムで表現する内容(情報)を得ることができません。
HTML4.01では、スクリプトが実行できない閲覧者のために、noscript要素 が用意されており、その範囲に代替のコンテンツを用意するように強く求められています。
noscript要素 の使い方は、以下のとおりです。
<script type="text/javascript">
<!--
  JavaScript のプログラム
//-->
</script>
  <noscript>
    <p>代替のコンテンツ</p>
  </noscript>
プラグイン特許問題の解決法
今年9月、米国Eolas社は Microsoft社製 Webブラウザ Microsoft Interbet Explorer(以下 MSIE)におけるプラグインツール、ActiveXが、同社の持つ特許に抵触するとの裁判で勝訴し、MSIEは来春早々に、その仕様を変更せざるを得ない状況に陥っています。
この特許問題に絡む内容とは、MSIEブラウザで表現する各種のプラグインツールを用いるオブジェクトが、「自動的に」表現されるという、つまり、object、および embed 要素などで埋め込まれるオブジェクトの表現方法が、特許に触れるわけです。
Microsoft社が予定している新しいMSIEでは、それらの要素を利用したページを閲覧する際に、警告のウィンドウを出して、閲覧者に「再生するかどうか」を尋ねてきます。特にマクロメディア社のオーサリング Flashを多用したサイトでは、決定的なダメージを負うことになります。
そこで、そうしたオブジェクト(動画、Flash、アニメーションなど)を、新しい MSIEで警告ウィンドウを表示させずに、「自動的」に再生する JavaScriptをご案内します。
Flashムービー再生の JavaScript
今回は非常に多くのサイトで人気のある Flashムービーの再生を自動的に行う JavaScriptの案内です。外部に置く JavaScriptを2つ用意し、HTMLの中では、Flashムービーを再生した居場所に配置する記述を行います。
JavaScriptを使った基本的な仕組みは、以下の図のようになります。これによって Flashムービーは警告ウィンドウなしで表現することができます。

JavaScriptからFlashファイルを読み込んでいる図

Webブラウザは HTMLを読み込みます。すると HTMLは、JavaScriptを読み込み、JavaScriptは Flashファイルを読み込み実行します。
Eolas社の特許では、MSIEが自身の ActiveXを起動させてプラグインツールを読み込み、Flashファイルを再生する仕組みと、この JavaScriptを利用する仕組みが異なることで、特許に抵触せず、なおかつページが読み込まれたときに「自動的」に再生することができるわけです。
この JavaScriptを使った Flashムービーの再生は、他の視覚系ブラウザでも有効に利用できますので、制作者はブラウザ別にコンテンツを作成する必要がありません。
JavaScriptファイルのダウンロード
2つの外部JavaScriptファイルについての構文は、今週のメールマガジン 「第77号」 で掲載していますので、そちらを参照してください。ここでは、作るのが面倒くさいという人に、当方で作成した JavaScriptをダウンロードしてお使いできるようにしました。
なお、JavaScriptファイルは ZIP形式で圧縮していますので、解凍する際には専用のソフトが必要になります。ソフトウェアは Web上にたくさんありますので、あなたの環境にマッチしたものを入手してください。
JavaScript圧縮ファイル 2.62KB 利用の際の説明書がありますので、必ずお読みください。
JavaScriptを使った Flashムービーのサンプル


This page is Valid HTML 4.01! Copyright(C) 2002-2003 banban@scollabo.com