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

                  毎週金曜日配信 What's New 2003/12/27
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第33号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。

 当講座では HTML4.01 を中心とした文法が主体となっています。なお、このマ
ガジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題 ■ JavaScript講座 第4回 (本年最後の配信になります。)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆関数と配列
いよいよJavaScriptも佳境に入ってきました。今回解説する関数と配列を覚えれ
ば、過去学習したことを合わせると、もうオリジナルのスクリプトが作れます。
だんだん難しくなってきますが、分からないと思った時には、第1回から読み直
してみると、理解が深まると思います。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆関数
関数とは、ある処理をひとまとめにして、何度でも利用できるように定義するこ
とを指します。
 具体的には、同じ処理を要求されて、その都度スクリプトを用意することは大
変なので、あらかじめ処理すべきスクリプトを用意(定義)しておくことを意味
します。
 他のプログラミング言語では、「サブルーチン」と呼ばれ、必要な時にだけプ
ログラムを呼び出したりします。

 関数には2つの種類があります。
 1つは、「ビルトイン関数」と呼ばれるもので、3つの形が定義されています。
 これについては、いずれ講座の中で解説します。

 もう1つが、これから学ぶもので、自由に関数を定義するものです。
 関数を定義するのには、function(ファンクション) を使います。

 function.myLabel {
       処理プログラムの記述
  }

   myLabel を関数と定義するため、function で宣言します。 { と } で囲まれ
 たブロック内に処理プログラムを記述して、関数名に関連付けをおこないます。
  こうして、定義された関数名 myLabl を、他のスクリプトやHTML文から何度
 でも呼び出して使うことができます。

 関数名は、JavaScriptで予約された名前以外で、自由に設定できます。
 関数を使ったスクリプトを読み込んだだけでは、スクリプトは実行されません。
 HTML文中で関数を呼び出したときに、初めて実行されます。

 ■まとめ
 function.関数名 { 処理プログラム }
  関数の基本ですので必ず覚えてください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆関数を使ったサンプルスクリプト
それでは早速、関数を使ってスクリプトとHTMLを作りましょう。
 なお、あらかじめ縦横比が同じサイズの画像(JPEG形式)を数枚用意し、それ
ぞれの名前を連番で、0 から 用意した枚数分の数字にしてください。
 (例: 0.jpg、1.jpg、2.jpg、3.jpg というように)
 画像をクリックすると別の画像に入れ替わるスクリプトです。

 テキストエディタ(SimpleText、メモ帳など)を起動して、下記のようにタイ
プしてください。スタイルシートも併用しますので、コロン、セミコロンを間違
えないように注意してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript講座/関数を使う</title>
<style type="text/css">
<!--
img { border-style: none }
-->
</style>

<script type="text/javascript">
<!--
var num = 0;
function myImage()
{
   num++;
   num %=8; // この数字は画像の枚数を記述
   document.banIMG.src= "num + ".jpg";
}
//-->
</script>
</head>

<body>
<div>
<a href="JavaScript:myImage()">
<img src="0.jpg" name="banIMG" alt="画像の入れ替わり" width="xx" 
height="xx"></a><!-- xx は用意した画像のサイズ。1行で記述します -->

<noscript>
<p>残念ながら、あなたのブラウザは、このスクリプトには対応しておりません。
このスクリプトは、クリックすると画像が入れ替わるようにしています。</p>
</noscript>
</div>

</body>
</html>

 実行結果
 http://www.scollabo.com/banban/magazine/sample/mmsample_062.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説 --- スクリプトを中心とした解説になります。

var num = 0;
 変数 num を宣言し、初期値を 0 としました。

function myImage()
 関数を定義しています。関数名は、myImage() なります。

num++;
 関数内のプログラムで、num の値を1つ増やします。

num %=8;
 指定された枚数(ここでは8枚)を超えたら、numの値を 0 に戻します。

document.banIMG.src= "num + ".jpg";
 画像を表示する構文で、0〜8.jpgまでのJPEG形式の画像が順に選択されます。

<a href="JavaScript:myImage()">
  アンカーによるJavaScriptの記述で、myImage()関数を呼び出しています。
 クリックすると関数が実行され、画像を入れ替えます。

<img src="0.jpg" name="banIMG" alt="画像の入れ替わり" width="xx" 
height="xx">
 初期値の画像。クリックされる前に表示される画像を指定しています。
 関数を実行するためには、name="banIMG" は必須です。
  なお、この中の横幅(width)、高さ(height)の設定は、用意した画像のサ
 イズを記述してください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆配列
通常、変数には1つの値が格納されます。ですが、配列を定義することによって
複数の値を格納し、その値を取り出して処理することが可能になります。

 配列を使うために、
 「new」 という演算子を用います。同時に 「Array」というオブジェクトを
作成して配列を定義します。

  myBack = new Array(5)

  この構文は、myBack という変数に、5つの値を格納するよう「定義」します。
 5つの「箱」が用意されたと理解していただくと分かりやすいでしょう。

 用意された「箱」に値を格納する場合、
  myBack = "blue"
  通常の変数の代入の仕方ですが、これでは、"blue"という値は、5つある箱の
 どこに格納したらいいのか分かりません。
 そこで、代入する場合には、「箱」の番号を教える必要があります。

  myBack[3]= "blue"

 これで無事「4番目の箱」に格納されました。[3] なのに何故4番目なのか?
配列の箱は必ず、0番から始まります。
 0、1、2、3、4、このようにして5つの箱があります。

 また、配列を定義したときに直接、値を書き込むこともできます。

 myBack = new Array("gray", "yellow", "aqua", "blue", "green")

 5つの箱に.それぞれの値を代入しています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

それでは、上記配列を踏まえてHTML文を作成します。テキストエディタを立ち上
げて下記のようにタイプしてください。セミコロンの記述を間違えないように。
 今回は関数と配列を組み合わせています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript講座/配列を使う</title>
<script type="text/javascript">
<!--
myBack= new Array();
myBack[0]="#ffffcc";
myBack[1]="#ccffff";
myBack[2]="#ffccff";
myBack[3]="#ccccff";
myBack[4]="#cccccc";
myBack[5]="#ccffcc";
myBack[6]="#ffcccc";
my_time=1; n=0; cnt=0;

function my_bgcolor()
        {
         document.bgColor=myBack[cnt];
         cnt++;
         if(cnt>=myBack.length)cnt=0;
         clearTimeout(n);
         n=setTimeout('my_bgcolor();',my_time*2000);
        }
//-->
</script>
</head>

<body onLoad="my_bgcolor();">
<p>背景色が2秒毎に変化します。</p>

</body>
</html>

実行結果
 http://www.scollabo.com/banban/magazine/sample/mmsample_063.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説 --- スクリプトを中心とした解説です。

myBack= new Array();
 myBack という変数名に配列を定義します。

myBack[0]="#ffffcc"; 〜 myBack[6]="#ffcccc";
  myBack の 1〜6 までの7つを用意し、すべてカラーコードを記述しました。

my_time=1; n=0; cnt=0;
 それぞれ用意した変数の初期値を設定しています。

function my_bgcolor()
 my_bgcolor() を関数名として定義しました。これ以下 { } は関数のブロック
 です。

 document.bgColor=myBack[cnt];
 documentオブジェクトのプロパティ、bgColorによる背景色の指定です。

cnt++;
 cntの値を関数が実行されるたびに1つずつ増やします。

if(cnt>=myBack.length)cnt=0;
 cntの値が、配列宣言された数を超えると、cntの値を 0 に戻します。

n=setTimeout('my_bgcolor();',my_time*2000);
 my_bgcolorが実行されると、最大2秒後に背景色を変えます。
  setTimeout とは、Dateオブジェクトが持つタイマーのメソッドで分秒単位で
 設定できます。

<body onLoad="my_bgcolor();">
 HTMLの読み込みが完了すると、my_bgcolor()関数が実行されます。

(注意点)
 あらかじめHTMLでは、背景色を指定しないようにします。もし、設定されてい
 ると、背景色は変化しません。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆関数と配列を覚えることは
JavaScriptでは、この2つは非常にポピュラーです。言い換えれば、関数も配列
もプログラムを書く上で、切り離せない存在です。少なくともこの2つを習得す
ることは、スクリプトの習得に通じます。
 今後の講座にも、この2つは頻繁に登場することになります。是非覚えてくだ
さい。

 次回のJavaScript講座は、今までお伝えしてきた内容を振り返って、サンプル
プログラムを提示しながら、詳しく解説する予定です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆インターネット展望 --- 個人的主観として
2002年は、今終わろうとしています。
 冬季オリンピックで明け、ワールドカップ日本大会で湧き、北朝鮮拉致被害者
帰国で揺れた1年でしたが反面、深刻なデフレ不況は深い影を落とし、高齢者の
自殺が相次ぎ、倒産企業も4万を超え、生活苦を滲ませました。いつまで続くの
でしょうか・・

 日本国内のインターネット・シーンでは、ブロードバンドが急速に普及し、か
つてない広がりを見せています。

 来年は大都市圏(関東)を中心にして、デジタルテレビの地上波放送も始まり
ます。そして2011年を目指し、その放送網は全国に及ぶことが決定しています。
 デジタル放送はパソコンとの親和性が高いので、簡単にパソコン上で高画質高
音質のハイビジョン並みのテレビ放送を楽しむことが可能になります。
 デジタル放送は双方向性に富み、画面上でショッピングやアンケートにも答え
られ、一般視聴者の自宅に居ながらにして番組参加が可能になることは、容易に
想像できます。

 一方で深刻なのが、魅力的なデジタルコンテンツの不足が挙げられています。
ハードやインフラが進んでも、肝心のソフトがなくては意味がありません。そし
て、それはインターネットでも同じことが言えるでしょう。

 政府が推進している e-Japan計画では、国民のすべてがブロード環境を与えら
れ、地域を含んだネット社会を構築しようとしています。それを支えるハードや
インフラは着実に進歩しており、遅くても10年後には DVDのデータ3枚分(約6
時間30分の映像)を、たったの1秒で送信可能になると予想されています。

 現在、ネットに関わる産業は大変な競争に明け暮れています。10年後の生き残
りを賭けて必死です。もしかしたら最後の大ビジネスチャンスかも知れません。

 インターネットも単に情報の閲覧だけにとどまらない、もっとリアルタイムで
新鮮な「なにか」を、生活や仕事などのあらゆるシーンで有効な手段として大き
く形を変える可能性を秘めています。

 ネット上でアプリケーションが走り、瞬時に欲しいデータを得て、双方向に会
話する XMLは実験段階を脱して、実用化の域に入りました。
 すでにインターネットは新しい段階に入っていると断言しても言い過ぎではあ
りません。

 1991年、SGMLのオンラインサブセットとして世界ではじめてHTMLが発表されて
以来、当時のテキストベースの Webページから今日の高画質映像をリアルタイム
で閲覧するページまで大きく様変わりしてきましたが、一方で様々な弊害をもた
らしてきました。

 HTMLは、ブラウザメーカーの独自仕様で壊されつつある現実に W3Cのワーキン
ググループは新しいHTMLとして、2000年に XHTMLを私たちに投げつけました。
 理解できないまま、2001年にはモジュール化した XHTML1.1 が勧告され Web制
作は新たな道を模索しはじめました。

 今後の Web制作がどのような手法に変わっていくのかを予測するには、あまり
にも材料が不足していますが、個人的な意見として、間違いなくHTMLはその使命
を終えようとしています。
 そして新しい始まりは、ドラマチックで、センセーショナルに私たち制作者の
中に溶け込んでいくものでしょう・・・

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/mmsample_033.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆お知らせ
次週金曜日(2003年1月3日)は、お休みさせていただきます。次回の配信はその
翌週(2003年1月10日)になりますので、ご了承ください。

 なお、次回より装いを改めて、HTMLの原点であるタグの詳細および、中級者向
けになりますが、 XHTML講座を予定しています。とりわけ次号では、かなりの読
み応えのある内容になるでしょう。ご期待ください。
 (もちろん中級者といっても初心者にも分かりやすく解説いたします。)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆更新情報
「初めての XHTML講座」をサイトに掲載しました。
 賢明な読者の皆様には、当サイトのトップページが11月中旬には XHTML1.1 で
記述されていることは既にご存知のことと思います。

 この XHTMLは当講座でも取り上げていく題材となります。初心者の方にはやや
難しいかも知れませんが、できる限り分かりやすく説明していく予定です。

 XHTMLとは何か? を学ぶ上で、ザッと目を通していただくと、講座での解説に
理解が深まると思います。是非新しいマークアップ言語の扉を開いてください。

 なお、全文が XHTML1.1 で記述されているため、対応しているブラウザが限ら
れます。Netscape 6.0以上、MSIE 5.01以上、Opera 6.0以上、Mozilla 1.0 以上
などの最新のブラウザが XHTMLに対応しています。(Win/Mac共に)
 MSIE4.5以前、Netscape 4.x、iCab などは不可となっています。また、Lynxや
W3Mなどのテキストブラウザは表示が可能です。

 「初めての XHTML講座」はこちらから
   http://www.scollabo.com/banban/senior/

  ■逆引きリファレンス
 読者の方からたくさんのリクエストがありました「逆引きリファレンス」につ
 いては、現在制作中です。多分、正月休み明けくらいにはと思っています。
  「逆引きリファレンス」では、目的別に要素やスタイルシートを説明し、サ
 ンプルを掲載する予定です。期待しないでお待ちください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
 ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
アーカイブ    http://www.scollabo.com/banban/daf/archive.html
講座教材     http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
あっという間の1年でした。本当に忙しくて体調を悪くしたりしたこともありま
したが、多くの読者の皆様に支えられ、1度も休むことなく何とかやってくるこ
とができました。誠にありがとうございます。
 特に熱い励ましをいただいた読者の方には、紙面の上からお礼申し上げます。

 本日まで33回にわたってホームページ作りに役立つHTML、スタイルシートなど
を学んできました。読者の中には、それなりにマスターされ、立派なホームペー
ジを立ち上げている方も少なくありません。
 一方で、少しペースが早過ぎたかな、と反省しています。同時にかなり端折っ
て説明してきたことも否めません。進行が早すぎて、わけが分からなくなったと
いう声もありました。

 次回より、編集スタンスを改めて、HTMLの原点に立ち返って、その上でそれぞ
れのタグや属性、値などをきめ細かく解説していく予定です。もっともっと初心
者に分かりやすい内容にしなければならない、という思いです。

 また、読者の中には相当に勉強されたHTMLの使い手もおります。あらゆる層の
読者を満足させることは困難ですが、HTMLの基本と XHTMLの入門を併記する構成
で臨んでいきます。

 何故 XHTMLを題材とするのか?その多くは、今後(あるいは現在も)読者の皆
さんが Web制作の道を歩むとすれば、必ず XMLにたどり着きます。しかし、初心
者が XMLに手を出すのは容易なことではありません。
 近い将来を熟慮すれば、XMLより先に XHTMLを優先すべきとの結論から、次回よ
り XHTML講座を開催することになりました。

 XHTMLは間違いなく、XML文書であり、HTMLを継承した比較的分かりやすい言語
です。今までのHTML講座がまったく無駄にならない XHTMLは決して難しくありま
せん。じっくりと分かりやすく解説を加えていきます。

 偶然にも次回からは2003年になります。私なりにメールマガジン配信の初心に
戻って、常に新しい気持ちで編集していくつもりです。ご期待ください。
 とは言え、次号からの原稿は何1つできておりません。年末年始の休みの間に
腰を落ち着けて、ゆったりした気持ちで書き上げていこうかと思っています。

 年末年始には、お出かけになると思います。どうぞ事件・事故に巻き込まれぬ
よう無事にお戻りください。

 皆様にとって、新しい年が今年以上に良い年でありますように・・

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。

              Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



Copyright(C) 2002-3003 banban@scollabo.com