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

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

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

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

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

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

 今週の課題 ■ JavaScript講座 第1回
       ■ Tips:ホームページに求められるもの

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

◆今回から、少しずつJavaScriptに関する講座を始めていきます。初心者にも分
かりやすくスクリプトが作成できるように順を追って解説します。
 なお、JavaScriptに関する講座は不定期にお伝えしますのでご了承ください。

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

◆JavaScript講座 第1回

■ JavaScriptとは何?
まず最初にお断りしなければならないのは、JavaScriptとJavaはまったく違うと
いうことです。
 Javaとは、米国サン・マイクロシステムズ社が開発したオブジェクト指向のプ
ログラミング言語で、厳密には書かれたコーディング・シートをコンピューター
が実行可能なバイナリデータとしてコンパイルする必要があります。

 一方、JavaScriptは、Netscape  Nvigatorを開発していたNetscape社の手によ
って、ブラウザ上 (Netscape2.0)で実行するスクリプト言語が作られ、初期の頃
には LiveScriptと呼ばれていました。
 Javaとの大きな違いは、HTML内に直接記述でき、何もコンパイルする必要のな
い実行可能なプログラムを、誰でも特別なソフトを必要としないで書くことがで
きる点でしょう。このように、コンパイルの必要がないプログラムを「インタプ
リタ言語」と呼びます。CGIで使うPerl言語もそのひとつです。

 HTMLやCSSは、Webページにどのような文書構造で、どのように表示するかを記
述するもので、基本的にはページに変化をもたらしたり、ユーザの操作で表示を
反応させるようなことはできません。
 JavaScriptを使うと、ページに動きを加えられ、ユーザのマウス操作で反応し
てメッセージを表示することなど HTML、CSSではできなかったことが可能になり
ます。

 通常、ブラウザに表示させたいドキュメントはHTMLで書かれ、ユーザエージェ
ンシー(ブラウザなど)のリクエストによって、HTTPサーバーに送られ、サーバ
がそのリクエストに応じてデータの中身を変更せずにテキストデータとして転送
されます。
 ブラウザは受け取ったデータに埋め込まれているマークアップされた情報を元
に、ユーザの画面にテキストを表示し、レイアウトを整えます。画像データやア
プレットなどが存在する場合は、これと平行してバイナリデータを指定されたURL
からHTTPを経由して転送し、所定の場所に表示します。

 JapaScriptのプログラムはテキストで記述され、HTML文書に埋め込まれます。
そのため、Javaのようなコンパイラを使用して実行可能なオブジェクトに変換す
る必要がなく、CGIのようにサーバにプログラムを置く必要もありません。ありが
たいことに日本語が使えるのも大きな利点でしょう。JavaScriptは、あくまでも
テキストベースのスクリプトであることがお分かりいただけたと思います。

 JavaScriptのスクリプトは、HTMLと同時にブラウザに送られ、受信したデータ
の行から逐次実行されます。ただし、ブラウザ側がJavaScriptの実行可能な状態
でなければなりません。
 現在の視覚系ブラウザのほとんどが、JavaScriptをサポートしているので意識
的にスクリプトを「オフ」にしていない限り実行可能です。世界的規模の調査に
よるとスクリプトを「オフ」の状態にしているユーザは20%を超えていると言わ
れています。
 また、非視覚系ブラウザではサポートしていないものが多いのも事実です。

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

◆JavaScriptの互換性
当初のJavaScriptから次々に改良が加えられ、バージョンアップしてきました。
アップグレードされたJavaScriptは、常に新しいブラウザで使用が可能となって
いますが、古いブラウザでは改良されたスクリプトが搭載されておらず、置き去
りにされて実行できない場合もあります。
 また、マイクロソフト社では、独自のスクリプト JScriptを自身のブラウザに
搭載しており、MSIE以外では動作が異なるスクリプトも存在しています。

 本講座では、できる限り視覚系ブラウザの種類に関係なく動作が可能なスクリ
プトを掲載する予定です。

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

◆JavaScriptの記述法と作法
JavaScriptを記述してHTMLに埋め込む方法は2種類あります。HTML文書に直接書
き込む場合と、外部にスクリプトファイルを読み込ませる方法があります。
 スクリプトは基本的に半角小文字で記述します。全角ではテキストですので、
スクリプトにはなりません。スクリプトは厳格には、大文字と小文字を別の扱い
となります。大文字や全角文字が使えるのは、テキストだけです。

■HTML内での記述
 HTML文書に直接埋め込む場合は、script要素を使います。この要素の属性とし
て少し前までは、language属性を使ってスクリプト言語を指定していました。
 例: <script language="JavaScript"> 〜 </script>
 前回の講座でも説明したとおり、W3Cでは上記の記述法を非推奨として、
 <script type="text/javascript"> このように記述することを推奨してます。
当講座では、すべてこの記述を用います。

 また、スクリプトに対応していないブラウザの配慮として、スクリプトのコメ
ントタグを用います。
 例: <!--  〜 //-->
 スクリプトを記述する場所の多くはヘッダに記述しますが、スクリプトを実行
する部分に記述する場合もあります。

■外部に置くスクリプト
 外部にJavaScriptを記述する場合、ファイルの拡張子は「js」です。スクリプ
トをHTML内に読み込ませるには
  <script type="text/javascript" src="banban.js"></script>
このように記述して、外部にあるJavaScriptファイルを読み込ませます。この場
合、スクリプトのコメントタグは必要ありません。本文のみを記述します。

  W3Cでは、スクリプトはなるべく外部に記述するように推奨しています。その
理由は、スクリプト内でよく用いられる実体記号「&」やタグに用いられる不平
等記号「 < 」や「 > 」などは、ブラウザによってはHTML内に記述すると、混乱
を起こす危険性があると警告しています。
 実際に、XHTML1.0/1.1では外部にスクリプトを置くことが決められています。
できる限りスクリプトを外部に置くように心がけましょう。

■JavaScriptに対応していないブラウザのために
非視覚系ブラウザの多くがJavaScriptには対応していません。そのためのアクセ
シビリティとして、noscript要素があります。この要素内に、スクリプト内容が
理解できる代替のテキストか、代替ページへのリンクを記述しておきます。

  例: <noscript>
         <p>あなたのブラウザではJavaScriptが実行できません。
            ここではスライドショーを行っております。お手数ですが、
      <a href="next.html">代替ページ</a>へ移動してください。</p>
    </noscript>

 決してこの中に、「何だ、JavaScript使えないのか、帰れ!」などと書いては
いけません。スクリプトが実行できる環境では、noscript要素内のテキストなど
は表示されません。

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

◆JavaScript入門
■はじめに
JavaScriptでは、変数や関数、オブジェクト、メソッド、イベントなど「専門的
な用語」が登場します。最初にそれを説明したのでは、日が暮れますし夜が明け
ます。また、最初に難しいことをしつこく並べたのでは「やる気」がなくなって
しまいます。
 本講座では、そのような「専門的なもの」が出現した時に、解説を加えます。
また、スクリプトしか記述しませんので、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">
<!--
//  この範囲にスクリプトを記述します。
//-->
</script>
</head>

<body>

</body>
</html>

スクリプトは必ず、<!-- から //--> の間に記述します。これはスクリプトに対
応していないブラウザへの配慮となります。スクリプト未対応のブラウザでは、
この範囲はコメントと判断して表示されません。
 スクリプト内のコメントは // と記述し、改行されるとコメントアウトになり
ます。複数行にまたがるコメントは /* 〜 */ と記述します。

 なお、あらかじめ上記のようなテンプレートを作っておくと便利でしょう。
できることなら、外部にスクリプトを置くことをお奨めします。

■ テキストを表示する
まず簡単なスクリプトを記述します。

<script type="text/javascript">
<!--
document.writeln("Hello World!");
document.write("JavaScript");
//-->
</script>

■解説
「Hello World!」は、ほとんどのプログラム言語入門でのお決まりです。プログ
ラム入門では最初に出てくる表示例です。例外に漏れず採用しました。

document.writeln();
document.write();

 writeln()とwrite()の違いは、改行を出力するかしないかですが、実際に改行
はしません。HTMLでは余白が与えられるだけですので、両者ともほとんど同じ表
示で変化がありません。

document.writelnとは、()内のテキストを表示させる場合に使用します。
ここでは直接テキストを書き込みましたが、「変数」を表示させることができま
す。なお、テキストを書き込む場合は、テキストに必ずダブルコーテーションで
囲みます。

■構文の分析----重要:必ず覚えましょう
document オブジェクト
writeln  メソッド
()内   引数(ひきすう)
「;」  (セミコロン)スクリプトの区切り

 ●オブジェクト
 JavaScriptでは、とにかくオブジェクトを用意する必要があります。オブジェ
 クトとは操作対象を指し、ブラウザウィンドウンのツールやテキスト、文書、
 画像やボタン、さらにはユーザがアクセスした URLの履歴までがオブジェクト
 として扱われます。
  なお、ここでのオブジェクト document にはその前に window が含まれてい
 ます。正しくは、window.document となりますが、windowは省略されています。
 ブラウザに表示させる window は省略が可能となります。

 ●メソッド
 オブジェクトなどの操作対象に対して、何らかのアクションを働きかけるもの
 を、メソッドと呼びます。「引数」に当てられた具体的な内容を表示したり、
 動かしたり、揺らしたりします。

 ●引数
 メソッド単体では役に立たず、必ず「具体的な内容」を示す引数を伴わなけれ
 ばなりません。引数を割り当てて、はじめて処理を実行します。

■変数(へんすう)
さっそく「変数」なる言葉が登場しました。決して「変わった数」ではありませ
ん。テキストや数値を「代入(だいにゅう)」する場合に使います。
 つまり、あるテキストや数値を格納する「箱」と思ってください。実際には箱
はなく、パソコンのメモリに格納されるわけですが、理解しやすくするためにあ
えて「箱」という言葉を使います。

 変数名 =  代入させるテキストや数値

 変数は必ず左側に配置し、=で右側の「値」を代入させます。テキストを代入
させる場合には、必ずダブルコートで囲みます。

 例えば、「初心者のためのホームページ作り」という言葉を表示させるには、
必ず「初心者のためのホームページ作り」と記述します。しかし、それが2度3
度と表示させたい時、いちいち記述するのは面倒です。
 そこで、「初心者のためのホームページ作り」というテキストを「箱」に格納
します。

<script type="text/javascript">
<!--
banban = "初心者のためのホームページ作り";
document.writeln(banban);
//-->
</script>

このスクリプトでは、「banban」という「箱」に「初心者のためのホームページ
作り」というテキストを代入しました。
 「banban」という箱を取り出して表示せよ、というコマンドステートメントで
引数に代入された「箱」の中身が表示されます。

 なお、変数の名前は自由に設定できますが、JavaScriptであらかじめ設定され
ているメソッド名や関数名などの単語は使用できません。自分の名前や意味のあ
る「単語」を使うといいでしょう。
(JavaScriptで予約されている単語は「今週のおさらい」に掲載しました。)

■変数を利用した計算結果の表示
変数に数値データを与え、変数同士を計算させる仕組みがあります。

<script type="text/javascript">
<!--
a = 2;
b = 3;
c = a + b;
document.writln (c);
//-->
</script>

賢明な読者はもうお分かりでしょう。この計算による画面の表示は「5」です。
非常に簡単な例を示しましたが、スクリプトでは計算する能力も備わっています。
 JavaScriptは、複雑な数式を用い、高度な計算を利用して多彩な表示が可能な
のです。
 なお、数値データは、ダブルコートは必要ありません。

■変数にHTMLを埋め込む
「変数」が便利だということがお分かりいただけたと思います。今度は、変数に
HTML文を代入して画像を表示させます。
 (画像ファイルは教材をダウンロードしてください。あるいはご自分で用意し
画像でもかまいません。パス(URL)にご注意ください。)

<script type="text/javascript">
<!--
banban = "<img src='images/niagara.jpg'>";
document.writeln(banban);
//-->
</script>

「banban」という箱にHTML、<img src="images/niagara.jpg"> を代入しました。

banban = "<img src='images/niagara.jpg'>"; この中で、シングルコートを使
っているのは、ダブルコートとの違いをブラウザに理解させるために用います。
 もし、同じダブルコートですと、「banban」という箱には、初まりのダブルコ
ートから、次に来るダブルコートまでしか代入されずエラーとなってしまいます。
banban = "<img src=" だけでは正しく画像が表示されません。
 テキストを変数に代入する場合は、ダブルコートの間ですので、シングルコー
トを利用して、違いをはっきりさせる必要があります。

「banban」という箱にはHTMLが埋め込まれ、ブラウザは「banban」という箱を表
示します。箱の中身はHTMLですから、ブラウザはそれを理解してHTMLを実行しま
すので、画像が表示されます。

 変数にHTML文を代入する場合は、「<」と「>」を使いますので、外部スクリプ
トにした方が安全です。外部スクリプトを作るのは難しくありません。テキスト
エディタで簡単に作れます。
 例えば、

  banban = "<img src='images/niagara.jpg'>";
  document.writeln(banban);

 の2行をテキストエディタで記述して、保存の際に「js」の拡張子をつけます。
test.js と保存すれば立派な外部スクリプトになり、HTML分で読み込ませれば、
ブラウザに実行結果が表示されます。

 HTMLでの読み込み方法は先ほども述べたとおり、
 <script type="text/javascript" src="test.js"></script> これだけです。
 src属性を使ってスクリプトを読み込ませます。すごく簡単です。

  テキストや画像の表示はスクリプトでなくとも、HTMLだけで十分可能です。今
回はあくまで、JavaScript入門として、簡単なスクリプトとその解説をしただけ
です。今後はもっと複雑になってきますが、今回の講座の要点だけでもしっかり
覚えておきましょう。

<今回の要点>
    オブジェクト.メソッド("引数");
        変数 = 値 (値を変数に代入)

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

◆Tips:ホームページに求められるもの --- コンテンツ
読者の多くがホームページ作成に勤めていると思います。ページ作成に役立てる
情報としてお読みください。
 ここの記載する記事は、すべて私が過去に何百というページを作成してきた私
なりの「経験」から生まれた「持論」であることをお断りしておきます。

 ■コンテンツ
 コンテンツとはページに掲載する情報の中身そのものです。どのようなコンテ
 ンツをページに埋め込むかは、それぞれの目的によって異なります。何を情報
 として取り上げるのかが大きなテーマです。

  皆さんがインターネットにアクセスする「動機」は何でしょう?
 インターネットに接続するには、回線の確保、プロバイダとの契約など少なく
 ない経済的負担と、実際に閲覧する「時間の消費」が必要です。
  何らかの「動機」があったからこそ、インターネットに接続するわけです。
 仕事や勉強のための情報を収集する、オンラインショッピングを利用する、ニ
 ュースや時事を閲覧する、ゲームや音楽、映画、時にはアダルトサイトでHな
 画像を楽しむなど実にさまざまな「動機」があることと思います。

  では、あなたが作るコンテンツにはその中のどれにあたるでしょう?

  今年の春に私の娘がホームページを立ち上げました。(ほとんど手伝わされ
 ましたが・・)家で飼っている猫がテーマです。適当に自分で作った「マンガ」
 などを配した実に中身のないページです。
  案の定、まったくアクセスがありません。誰も見てくれないのです。そこで
 私から「提案」を出しました。
  1.猫がテーマなら、猫にかかわる情報を集めよ
    (猫の生態、食事、病気、しつけ、種類、ルーツなど)
  2.「猫好き」に共通するキーワードは何か
  3.テーマ別にページをデザインせよ
  4.更新後に検索エンジンへの登録・推薦を片っ端からトライせよ

 猫を飼っている読者の方はご存知でしょう、猫の癖や表現方法など、あるいは
 鳴き声で何を訴えているのかを。
  先ほども述べたとおり、ユーザはどのような「動機」でネットにアクセスす
 るのかを理解しなくてはいけません。
  初めて猫を飼う人、猫のしつけに困っている人、猫の病気で困っている人、
 あるいは飼っている猫が行方不明になってしまった人などなど。そのような人
 たちが「猫」のページのユーザになり得るわけです。

  単純に、自分の飼っている猫だけを取り上げているのでは、誰も見てくれま
 せん。偶然に訪れても「猫か」で終わりです。2度と見てくれません。
  ホームページ作成のために勉強するのなら、「飼っている猫」だけのページ
 でもかまいません。ですが、実際にサイトオープンするのなら話は別です。
  世界中で何10億という Webページが存在する中で、意味のある情報として発
 信するページ作りには「少しの工夫」が必要です。でなければ、何10億の中で
 埋もれてしまいます。
  例えば、JavaScriptや FLASHなどを盛り込んで、ページに動きを与え、見栄
 えの良いものを作ったとしても、それは一過性のものに過ぎません。
  ページの表現方法は問題ではありません。問題になってくるのは中身です。

  もし、訪れるユーザが「便利だな」「いいね」「なるほどね」と感じてくれ
 れば「優れたページ」の資質があります。
  Webとは情報の発信であり提供だということを、頭の中に叩き込みましょう。

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

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

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

次回は、色の組み合わせの応用について詳しく解説します。

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

質問・ご意見ははこちらまで→ 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

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

<えでぃた〜ず・るーむ>
「ハリー・ポッター第4巻」の予約が何と 230万部!これは大変な数字です。聞
くところによると通常、小説などのハードカバーは5万部売れるとヒットと言わ
れ、10万部で大ヒット、50万部で大大ヒットとなるそうな。

 1冊の定価が3900円だから、ざっと90億円近い売り上げになる。しかもすべて
買取り制なので返本はゼロ。作者への著作料とか、印刷代、物流費を除いても約
30億円が版元に収益になるわけだ。貧乏人はすぐに計算してしまうのです。
 日本国内の書籍の市場規模は年間約1兆円といわれているので、1冊の書籍で
年間市場の約9%を売り上げると言うことは、大大大大大大大ヒット!

 「ハリー・ポッター」は子供だけでなく、広い世代で読まれており、魔法の世
界を冒険心たっぷりで描いた夢のある物語です。原作者が英国の女性なので、お
国の歴史的な背景もあって、このような素晴らしい本が生まれたのだと推測して
います。「夢」があるって楽しいことです。

 「夢」を追い続けていろんなことをしてきました。夢破れたこともありました
が、それでもまだ「夢」は捨てていません。本日は私の誕生日、いくつになって
も子供のようにずっと「夢」を追いかけていきたいものです。
 それにしても「ハリー・ポッター」恐るべし!

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

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

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



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