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

                   毎週金曜日配信 What's New 2004/1/30
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第83号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

 当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。

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

  今週のコンテンツ
      ■ JavaScript講座 第16回 --- windowオブジェクト
   ■ CSS講座 第4回 --- 色を扱い
   ■ インターネット用語解説  第5回 --- FAQ

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆JavaScript講座 windowオブジェクト

 今回よりオブジェクトについて順次解説します。JavaScriptを学ぶ上でオブジ
ェクトは欠かすことができません。JavaScriptがオブジェクト指向の簡易的なプ
ログラム言語であるため、オブジェクトを理解することは、JavaScriptのプログ
ラミングを理解することに通じます。

 ■オブジェクト
 JavaScriptでは、多くのオブジェクトをあらかじめ持っています。オブジェク
 トを利用することで、時間や日付、ページや文字列、複雑な計算などを扱うこ
 とができ、ユーザの操作によって反応するインタラクティブな表現を実現する
 ことができます。

  オブジェクトにはあらかじめ、メソッドやプロパティを持っており、作者は
 オブジェクトをどのように扱うのかを、そうしたメソッド、プロパティを利用
 してプログラム開発を行います。

 ■メソッド
 メソッドとは、ごく簡単に言うと一種の命令と考えてください。つまり、各オ
 ブジェクトが持っている自身に対する操作のことを指します。
  オブジェクトを理解する上で、オブジェクトが持つメソッドを理解すること
 はとても大切なことです。複雑なプログラムを組むことなく、メソッドを記述
 することで、オブジェクトを操ることができます。

 ■プロパティ
 プロパティとは、オブジェクトが持つ「属性」を意味し、プロパティを利用す
 ることで、オブジェクト自身があらかじめ持っている機能や部品などをコント
 ロールすることができます。


◆Windowオブジェクト

 windowオブジェクトは、JavaScriptのオブジェクト階層の最上位に位置し、画
 面上に表示されているすべてのオブジェクトの親となるオブジェクトです。
 様々なオブジェクトは、この windowオブジェクトの下位層に位置しています。

 JavaScriptでは、windowオブジェクトの、「window」を省略して記述すること
 ができます。

 ■windowオブジェクトのメソッド

 alert     警告のダイヤログボックスを表示する
 blur      現在表示中のウィンドウを背面に移動する
 clearInterval setIntervalで設定したタイマーを解除する
 clearTimeout setTimeoutで設定したタイマーを解除する
 close     現在表示中のウィンドウを閉じる
 confirm    確認ダイヤログボックスで真(ture)か、偽(false)の値を参照
 focus     背面にあるウィンドウを前面に移動する
 moveBy    ウィンドウの表示位置を指定した座標に移動させる
 moveTo    ウィンドウの表示位置を指定した距離まで移動させる
 open     新たなウィンドウを開く
 prompt    入力ダイヤログボックスを表示し、入力値を値として取り込む
 resizeBy   現在のウィンドウサイズを指定した分だけ変更させる
 resizeTo   現在のウィンドウサイズの幅と高さを変更する
 scroll    現在表示中のページの指定した位置までスクロールさせる
 scrollBy   現在表示中のページの指定した位置までスクロールさせる
 scrollTo   現在表示中のページの指定した距離までスクロールさせる
 setInterval  一定時間毎に処理するタイマーの設定
 setTimeout  一定時間後に処理するタイマーの設定

 windowオブジェクトメソッドの記述法は以下のとおりです。

  オブジェクト名.メソッド(引数);
  window.alert('警告ウィンドウの表示');

 windowオブジェクトでは、オブジェクト名の省略ができるので、
  alert('警告ウィンドウの表示'); と記述することができます。

 ■windowオブジェクトのプロパティ

 defaultStatus ステータスバーに表示されるデフォルトのメッセージ 
 status    ステータスバーに表示中のメッセージ 
 name     表示されているウィンドウ名を参照する 
 opener    新たに開かれたウィンドウから見た親ウィンドウを参照 
 length    ウィンドウに表示されるフレームの総数を取得する 
 closed    ウィンドウが閉じられていた場合に真、開いていた場合には偽
        を返す 

 windowオブジェクトのプロパティの記述法は以下のとおりです。
  オブジェクト名.プロパティ=値;

 書式は以下のとおりです。
   windows.status="ステータスバーにメッセージ";


◆windowオブジェクトを使ったJavaScript

 閲覧者の操作で開かれた新しいウィンドウを、時間経過によって自動的にその
 ウィンドウを閉じるスクリプトです。

<!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>開いたウィンドウを閉じる</title>
<script type="text/javascript">
<!--
  function newWindow() {
   newWin = window.open("samp.html","NewWindow","width=300,height=80");
   setTimeout("closeWin()",10*1000);
   }
     function closeWin() {
     if (!newWin.closed) newWin.close();
  }
// -->
</script>
</head>

<body>
<h1>自動的に閉じるウィンドウ<h1>
<p>
<input type="button" value="Open" onclick="newWindow();">
</p>

</body>
</html>

  <ご注意>
 このJavaScriptでは、別途「samp.html」という名前のHTML文書が必要です。
 適当なHTMLを作成し、この文書と同じディレクトリ(フォルダ)に置いてくだ
 さい。該当するファイルがないと自動的に閉じられません。

 サンプルの実行結果
 http://www.scollabo.com/banban/magazine/mm/sample_83-1.html


◆解説

 ここでは、windowオブジェクトが持つ3つのメソッドを利用して、新たに開か
 れたウィンドウを 10秒後に自動的に閉じる JavaScriptです。

■function newWindow() {

 関数を定義しています。この関数名は newWindow() となっており、HTMLでは、
 イベントハンドラ(イベント属性)を使って、関数を呼びます。

■newWin = window.open("samp.html","NewWindow","width=300,height=80");

 新しく開くウィンドウの内容を設定しています。ここでは新たに開かれるウィ
 ンドウ内に表示する文書を samp.html という HTML文書を指定しています。
 ウィンドウの横幅を 300ピクセル、高さを 80ピクセルとしました。
  なお、指定した文書が見つからないとウィンドウは閉じられません。

■setTimeout("closeWin()",10000); 

 タイマーの設定をしています。ここでは10秒が経過したら closeWin() という
 関数を実行します。なお、1秒は 1000 となりますので、自由に数値を変えて
 タイマーの時間を調整してください。

■function closeWin() {

 closeWin() という名の関数を定義しています。
 この関数では、指定された関数によって開かれたウィンドウを閉じます。

■<input type="button" value="Open" onclick="newWindow();">

 input要素は単独でも利用できます。ただし、古い Webブラウザでは無視され
 る場合がありますので、その場合には、form要素の中で配置してください。
 type属性で、入力フィールドをボタンに設定しています。ボタンに表示される
 文字は value属性で指定します。

 onclick属性とは、イベント属性の1つで、ここではボタンがクリックされた
 ら JavaScriptで定義された newWindow() という関数を呼びます。


◆windowオブジェクトのまとめ

 windowオブジェクトでは、現在表示されているウィンドウを含めた、ウィンド
 ウ全体をオブジェクト(モノ)の対象としています。
  windowオブジェクトの中には、閲覧者が嫌がる傾向のメソッドが含まれてい
 ます。例えば断りなく新しいウィンドウを開くとか、うざったい警告ウィンド
 ウとか、ステータスバーにメッセージを流すとか、迷惑なスクリプトを実に簡
 単に作成することができます。

  JavaScriptが万人に受け入れられるよう、最低限のマナーを守りながら、創
 意あふれる自由で独自のスクリプトを作るように心がけましょう。

  次回は(いつになるのか分かりませんが)、documentオブジェクトについて
 解説する予定です。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆CSS講座(第4回) --- 色を扱う

 スタイルシートで扱える色は、24ビットのフルカラー(1677万色以上)になり
 ます。恐ろしい数ですが、どんな環境でも再現できる色は 216色しかありませ
 ん。その点を含めて、色について解説します。

 ■文字色と背景色の関係
 高齢者の方は、明るい光を好みません。最近の統計によれば2人に1人、つま
 り50%以上の人たちが目に異常を持っており、その多くが「白内障」です。
  その障害をもつと、明るい光は目が痛く感じられます。ご存知のとおり、コ
 ンピュータのモニターで描画される文字や背景、様々なドキュメントは光の3
 原色によって色が作られています。

  つまり、文字であれなんであれ、モニターに映し出されるすべては光である
 ということを覚えてください。その光が明るすぎると、高齢者にとって辛い状
 況に陥ります。
  WindowsOS では、「ユーザ補助」という機能が備わっており、これを「オン」
 にすると画面全体が暗くなります。高齢者にとっては目に優しくなるわけです。

  実は Webブラウザにも同じ機能を持っています。自分なりに文字色や背景色
 を設定する機能が備わっています。非常に多くの人たちが利用しています。

  前置きが長くなりました。これからが本題です。
 W3C (World Wide Web Consotium:Webの標準化を制定する団体) では、文字色
 を指定する場合には、一緒に背景色も指定するように推奨されています。
  文字色を黒色にしたとき、先ほど説明したとおり、閲覧者側で背景色を黒色
 に設定した場合には、文字を読むことができなくなります。

  同様に、背景色を指定した場合にも、文字色を同時に指定する必要が出てき
 ます。せっかく作り上げたコンテンツが、環境によって読めなくなるのは、作
 者も閲覧者も悲劇というものです。

 ■Webセーフカラー
 スタイルシートを使うということは、HTMLの文書構造からビジュアルデザイン
 を分離するという基本的な考え方があります。その最大の理由は、閲覧者の環
 境に依存しない正しいマークアップに他なりません。

  そうした考え方を踏襲すれば、閲覧者の環境に依存しない色を使うことには
 スタイルシートを利用することと何ら変わるものではありません。読者の皆様
 には、是非、色を扱うう際には Webセーフカラーという閲覧者の環境に依存し
 ない色を使っていただきたいと考えます。

  Webセーフカラー・カラーパレット一覧
   http://www.scollabo.com/banban/lectur/websafe.html

 ■スタイルシートの色の指定
 色を扱う場合の基本が16進数の記述です。16進数では、赤緑青という順序で色
 を指定します。発色の度合いが高いほど数値も高くなります。

   #000000    何も発色しない → 黒色
   #ffffff    全部が発色   → 白色
   #ffff00    赤と緑が発色  → 黄色

 このようにして、色を決めていきます。
  ところで Webセーフカラーでは、f、c、9、6、3、0、という数値だけしか扱
 えません。しかしこれを組み合わせることで 216色が使えるようになります。

  スタイルシートの場合には Webセーフカラーも含め、3桁で色を指定するこ
 とができます。なお、この指定は Webセーフカラー以外の指定も行うことが可
 能で、全部で4096色を扱うことができます。

  スタイルシートで、スタイルを設定する属性とその値はコロン「:」で区切
 りますが、複数の属性と値を設定する場合には、セミコロン「;」で区切るこ
 とにより幾つでも記述することができます。セミコロンの前後には自由に空白
 文字(半角かタブキーのみ有効)を配置できます。

   #000 → 黒色  赤緑青それぞれを1桁ずつで記述

  書式: p { color: #000; background: #fff }
    (段落 p要素の範囲の文字色を黒色に、背景色を白色に指定)

  スタイルシートでは RGBによる指定も可能です。その引数には以下のように
 記述します。

  書式: p { color: rgb(0,0,0); background: rgb(255,255,255) }

  これは、16進数の色指定を10進数に変換して指定する方法です。f は 256番
 目の色であるため 255とします。コンピュータは 0 から数えますので、255は
 f と同じ値を持ちます。この記述では、24ビットフルカラーが扱えます。

  また、色をパーセントでも指定することができます。この場合は 0 〜 100
 となりますので、全部で 100万色が指定できます。

  書式: p { color: rgb(0%,0%,0%); background: rgb(100%,100%,100%) }

 ■色を扱うことの注意点
 この講座で何度となく述べてきましたが、色を扱う際にはその配色に配慮して
 ください。文字色と背景色の配色がうまくないと、コンテンツを読めなくなる
 可能性があります。

  明るい色の背景色で、明るい色も文字色では「ステルス効果」になってしま
 い、文字を読み取ることができません。また、色弱障害者は赤系色と緑系色の
 区別が上手く行われません。このような点にも配慮して色を使うようにしてく
 ださい。あまり色に頼ったページにならないように気をつけましょう。

  次回はスタイルシートで扱う単位について解説します。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆インターネット用語解説 --- FAQ

 多くの商用 サイトでは、この FAQなるものを提示しています。これは「よくあ
 る質問」という意味の「Frequently Asked Question」からきた略語です。

 製品やソフトウェアなどを紹介するページでは、トラブルに関する情報が満載
 されています。そのことは消費者にとって、非常に有益な情報となります。

  皆様が Webサイトを構築するときに、関連した情報として、困ったときや分
 からないこと、あるいは閲覧者から寄せられた質問などから、特に多い問題点
 などを集め、コンテンツとして提供することができれば、信頼感と親しみやさ
 を演出することができます。

  最近は掲示板の人気も急増していますが、困ったときに探しやすいという点
 では、FAQの右に出るものはないでしょう。
  作者自身が便利だと感じるものから掲載すると、案外作業がはかどることで
 しょう。もっと FAQは活用されてもいいのではないかと考えます。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆更新情報

 当メールマガジン「第71号」から「第80号」までを圧縮ファイルにしました。
自由にダウンロードすることができます。特に、新しく読者になられた方には、
オフラインでゆっくり読むことができますので、ご利用ください。

 なお、圧縮ファイルはプラットフォーム環境ごとに用意していますので、あな
たの環境に合わせてご利用ください。バックナンバーで利用している文字符号は
「Shift_Jis」を採用しています。

 アーカイブファイル・ダウンロード
  http://www.scollabo.com/banban/daf/archive.html

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

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

 次回は、2月6日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOSや Webブラウザ、テキストエデ
ィタなど、なるべく分かりやすく制作環境を明記していただけると回答しやすく
なると思います。
 ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。

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

 誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

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

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

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

<えでぃた〜ず・る〜む>

  新たなコンピュータウィルスが猛烈な勢いで広まっています。くれぐれも不
 用意にメールに添付された意味不明のファイルを開かないように注意してくだ
 さい。
  もしかしたら、私のメールアドレスを利用してばら撒いているかもしれませ
 んが、私のほうから皆さんに一歩的にメールすることはありませんので、くれ
 ぐれも誤解なきよう。

  かく言う私は、インフルエンザ・ウィルスに感染し、激しい高熱とのどの痛
 み。吐き気に悩まされています。当地は乾燥が激しく、ウィルスが生息するの
 には格好の季節となっています。
  読者の皆様も、うがいやビタミンCの摂取を日頃から積極的に行ってくださ
 い。病気になっても、いい事は何もありません、辛いだけです。トホホ・・

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□



最新更新日 2004/2/3
Copyright(C) 2002-2004 banban@scollabo.com