毎週金曜日配信 What's New 2003/10/31
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第72号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となってい
ます。なお、このマガジンは等幅フォントでお読みいただくと快適に読めるよう
になります。
今週のコンテンツ
■ JavaScript講座 第14回 --- 背景画像を扱う
■ インターネット用語解説 第３回 --- HTTP
■ ActiveX（プラグイン）技術特許問題のその後
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆JavaScript講座（第14回) 背景画像を扱う
今回は、画像を扱うスクリプトについて解説します。なお、ここでは背景画像
を中心としています。
■背景画像を切り替える
JavaScriptでは、背景色を変化させることが簡単に行えますが、背景画像とな
ると、少し手を加えなければなりません。タイマーを利用して、ある一定の時
間が経過したら、背景画像を変化させます。
最初に背景画像となる画像を用意してください。今回のスクリプトでは５つ
の画像を用意しています。画像の名前は、0.gif、1.gif 〜 4.gif というよう
に、0 からの連番を付けてください。
なお、背景画像を作れない方のために、今回利用する画像を「教材」として
提供していますので、あなたの環境に合わせた圧縮ファイルをダウンロードし
て、任意のフォルダで解凍してください。
第72号教材のダウンロードはこちらから
http://www.scollabo.com/banban/daf/material.html
背景画像を切り替えるJavaScript（ヘッダ部で記述します。）
<script type="text/javascript">
<!--
var myImage=new Array()
myImage[0] = "0.gif"
myImage[1] = "1.gif"
myImage[2] = "2.gif"
myImage[3] = "3.gif"
myImage[4] = "4.gif"
myImage[5] = "5.gif"
var speed = 5000
var changImg = new Array()
for (count = 0; count < myImage.length; count++)
{
changImg[count] = new Image()
changImg[count].src = myImage[count]
}
var banGa = -1
function myBack()
{
if (banGa < myImage.length - 1)
banGa++
else
banGa=0
document.body.background = changImg[banGa].src
}
if (document.all || document.getElementById)
window.onload = new Function('setInterval("myBack()",speed)')
//-->
</script>
なお、body要素は以下のように記述してください。
<body background="5.gif">
この記述は、ページが読み込まれたときに、最初に表示させる背景画像を指定
しています。この記述は、「非推奨」扱いとなりますので、HTMLの冒頭で宣言
する文書型定義（DTD）は、Transitional をお選びください。
※最初の５秒は、初期値で設定した背景画像が表示されます。その後、５秒毎
に順次背景画像が切り替わります。
背景画像の切り替え実行サンプル
http://www.scollabo.com/banban/magazine/mm/sample_72-1.html
◆解説
■var myImage=new Array()
変数myImage に、配列を定義しています。
■myImage[0] = "0.gif" 〜 myImage[0] = "0.gif"
変数myImage は配列が定義されており、ここでは６個の配列に、それぞれ画像
を割り当てています。
■var speed = 5000
変数speed に、5000 という数値を格納しています。
一般的に varによって宣言された変数は、グローバル変数と呼ばれ、ブロッ
ク越しにその値を維持して利用することができます。
■var changImg = new Array()
ここでも、変数chanrImg に配列を定義しています。
■for (count = 0; count < myImage.length; count++)
for構文は、繰り返しを処理する命令文で、ここでは、変数myImageの配列数の
数を超えるまで同じ処理が繰り返されます。
for構文は初期値、論理値、増減値の３つの値で構成されます。ここでは、
変数count の初期値を 0、変数count が配列数よりも大きくなった場合を論理
値とし、そして、増減値として countの数を１つずつ増やします。
■changImg[count] = new Image()
変数changImg を配列として定義しています。
■changImg[count].src = myImage[count]
配列に定義された変数changImg{cont] （0〜6が定義される）に、最初に定義し
た画像を持つ変数から同じ値が格納されます。
■var banGa = -1
banGa をグローバル変数として定義し、その値には、-1 が格納されます。
■ if (banGa < myImage.length - 1)
if構文によって分岐処理を行います。ここでは、変数myImage の配列数が、
変数banGa の値との大きさを比較しています。
つまり、配列数よりも大きかったり小さかったりしていないかを監視する
目的があります。このスクリプトでは６枚の画像しかないわけで、その数を
タイマーが働くごとにチェックする必要があります。
■ banGa++ else banGa=0
先ほどのif構文で、変数banGa の値に１つづつ数を足します。if構文から分岐
された内容が、0 から配列数までの値が格納されます。
■document.body.background = changImg[banGa].src
ここではじめて、背景画像に配列で格納された画像が表示されます。
表示される背景画像は、changImg[0} 〜 changImg[6} までの間の１番目から
選択されて表示します。
■if (document.all || document.getElementById)
window.onload = new Function('setInterval("myBack()",speed)')
このスクリプトを書いている文書がブラウザに読み込まれたら、５秒間隔で
関数myBack() が実行されることを示しています。
このスクリプトを実行すると、JavaScriptに記述してあるように、画像が選択
されてから５秒毎に表示を変えます。
この中で、var speed = 5000 と記述されている部分の数字は、５秒を表わ
しますので、数字を変えると、時間が変わりますので、この値は任意に設定し
てください。
■背景画像をスクロールさせる
次に、背景画像をしたから上にスクロールさせるスクリプトを作成します。
やはり、同じようにタイマーを設定して画像を少しずつ上にずらして表示さ
せるようにします。
なお、ここで表示する背景画像は「教材」で提供していますが、ご自分で作
成した画像を利用していたダウ手もかまいません。
以下のHTML文書参照してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>背景画像のスクロール/JavaScript講座</title>
<script type="text/javascript" language="JavaScript">
<!--
var n=0;
function upImage() {
window.setInterval("banban()",20);
}
function banban() {
n=n+1;
document.body.style.backgroundPosition="0 -0"+n;
}
//-->
</script>
</head>
<body onload="upImage()" background="back.gif">
<h1 style="text-align:center">背景画像のスクロール</h1>
</body>
</html>
背景画像のスクロール実行サンプル
http://www.scollabo.com/banban/magazine/mm/sample_72-3.html
◆解説
■var n=0;
n をグローバル変数として設定し、その初期値として 0 を格納しています。
■function upImage()
upImage という名の関数を定義しています。スクリプトはこの関数を呼び出し
て実行されます。
■window.setInterval("banban()",20);
ウィンドウ全体の表示をタイマーとして設定しています。タイマーは 0.02秒
に設定していますが、この数値を変更すると、タイマーを変更することができ
ます。タイマーは、関数banban() を 0.02秒ごとに呼び出して動作させます。
■n=n+1;
タイマーが動作するごとに、変数n の値をひとつずつ増やしています。この値
が、背景画像の垂直方向の位置を指定します。なお、n++ という記述方式と、
まったく同じ意味になります。
■document.body.style.backgroundPosition="0 -0"+n;
背景画像の位置を指定して表示させています。タイマーごとにその位置が変化
します。
■<body onload="upImage()" background="back.gif">
ページが読み込まれたときに発生する onload属性というイベントを使ってい
ます。初期値として、背景画像を background属性を利用しています。この属性
は非推奨扱いであるため、冒頭で文書型定義を過渡期仕様（Transitional）に
設定しています。
◆背景画像を利用する注意点
今回サンプルとして取り上げたスクリプトは、やや誇張して設定しています。
理由として、その効果が早く具現させるためのものです。その点を含んで、背景
画像に関する注意点について述べます。
Webページの主人公はコンテンツであり、決して背景画像ではありません。ど
んなに素晴らしい画像を背景に埋め込んでも、それは背景でしか過ぎません。
背景画像がゴチャゴチャして、肝心のコンテンツを邪魔するようでは、まった
く意味がないばかりか、本末転倒です。
同じように、ここで掲げたスクリプトを使用することで、背景画像を動作させ
ることも注意が必要です。本来のコンテンツが主人公にならなければ、それも意
味をなしません。
ページに埋め込む背景とは、コンテンツを表現する土台です。その土台がペー
ジで自分自身を主張しても何にもならないのです。どうしても画像を表現したい
ならば、背景にするのではなく、別のページで「ギャラリー」として表現した方
が、閲覧者にとっても有益なことでしょう。
背景は、さりげなく、自己主張することのない、ページを表現するための土台
であることを十分に理解した上で、今回のスクリプトを利用してください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆インターネット用語解説 --- HTTP
HTTP（HyperText Transfer Protocol）とは、Webブラウザと Webサーバ間で、
HTMLファイルなどの文書を転送するために用いられるアプリケーションレベルの
プロトコル（通信手順）を指し、この技術によってインターネットの情報のやり
取りが、容易にできる仕組みを提供しています。
HTTPは、情報の転送を依頼するリクエストとそれに対するサーバのレスポンス
から構成されています。
通常、URLやユーザ名とパスワード、Webブラウザの種類、使用言語などの情報
を、GETリクエストで Webサーバ側に送信すると、Webサーバはそれに応じてデー
タや、エラーコードなどを転送してきます。
HTTPの GET（要求）リクエストでは、以下の情報を Webサーバに伝えます。
GET /banban/http-index.html HTTP/1.1
Host: www.scollabo.com
Accept: text/html, text/plain, text/sgml, */*;q=0.01
Accept-Encoding: gzip, compress
Accept-Language: ja
If-Modified-Since: Wed, 02 Oct 2003 02:35:10 GMT
User-Agent: Mozilla/4.0 (Red Hat 7.0; Gecko/20030624 Netscape/7.1)
これに対して Webサーバは Webブラウザからの要求にこたえ、以下のレスポンス
（応答）を返します。
HTTP/1.1 200 OK
Date: Sun, 24 Sep 2003 12:00:12 GMT
Server: Apache/1.3.12
Content-Location: http-index.html.ja
Vary: negotiate,accept-language,accept-charset
TCN: choice
Last-Modified: Mon, 06 Oct 2003 06:10:09 GMT
Connection: close
Content-Type: text/html; charset=iso-2002-jp
Content-Language: ja
つまり、HTTPによる通信手順でリクエストした情報は、HTTPヘッダで処理され
その結果として、HTTP応答ヘッダが返され、その情報をサーバ内で記録し、それ
がアクセスログとなるわけです。
つまり、私たちがインターネットにアクセスする場合、知らずのうちにHTTPと
いう通信手順を利用して、要求する URLを送信し、その答えが Webサーバより返
されるわけです。
こうしたことで、Webサーバを HTTPサーバと呼ぶことがあります。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆ActiveX（プラグイン）技術特許問題のその後
第70号でお伝えした米国 Eolas社がマイクロソフト社を提訴した特許問題につ
いて、新しい動きがありましたのでお伝えします。
■MSIE（Microsoft Interbet Explorer）の仕様変更
マイクロソフト社では、米Eolas Technologiesの特許を侵害したとして提訴さ
れた訴訟で、敗訴という結果になったことを受けて、MSIEに「控えめな変更」
を施す方向で対策を進めていることを言明しました。
提案している変更箇所は ActiveXコントロールを使用した一部の Webページ
に対するMSIEの処理方法です。
ActiveXコントロールは、マクロメディア社の Flashや Appleの QuickTime、
RealNetworksの RealOneといったプラグインソフトウェアで使われているオブ
ジェクト指向プログラミング技術やツールのことで、マイクロソフトは、2004
年始めまでにIEの変更を行なう見込みだと報じています。
マイクロソフト社のガイドラインでは、Flashや Javaアプレットを Webペー
ジに埋め込むためのタグをHTMLファイルに直接記述せずに、これらタグを出力
する「JavaScript」ファイルを別に用意し、スクリプト内で、HTMLファイルを
インクルードして、Flashなどを利用するための objectタグなどを出力するよ
うに推奨しています。
マイクロソフト社のガイドライン http://msdn.microsoft.com/ieupdate/
※ この方法については、当講座内でも予定しています。
■W3C、ブラウザ特許の再審査を要求
Webブラウザのプラグインに関する特許問題で、今週29日、Webにおける標準化
を制してしている W3C（World Wide Web Consortium）は、米国特許商標局に
対して、米 Eolas社の所有する Webブラウザ関連の米国特許が無効であると主
張し、再審査を請求しました。
W3Cの生みの親でもある Tim Berners-Lee氏が、知的所有権商務次官宛に文
書で再調査を要求しており、無効の根拠となる先行技術も提示したことを明ら
かにしました。
主だった内容は、「同特許の記述によると、先行技術の Webブラウザは、コ
ンテンツを新しいウィンドウに表示するのに対し、同特許の発明したブラウザ
はコンテンツを同一ウィンドウ内に表示するものとしており、外部プログラム
が同一ウィンドウにコンテンツを表示・埋め込み・生成するというこうした機
能は、我々が提出した先行技術で記述済みだ」と主張したものです。
つまり、同特許が対象としている「らしい」オブジェクト組み込み技術は、
Webが利用され始めた早い時期から HTML標準の一部となっていた、とするもの
です。
W3Cの主張は、Web上で既に実装済みの先行技術であると、以前からの持論を
展開しています。
Web業界を震撼させた Eolas社の特許裁判は、新たな動きを見せています。
私たち Web制作に関わる者として、今後の成り行きを注目せざるを得ません。
とにかく W3Cには、是非がんばってもらいところです。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Webサイト更新情報 「バックナンバーをアップしました」
当メールマガジン「第61号」から「第70号」までを圧縮ファイルにしました。
自由にダウンロードすることができます。特に、新しく読者になられた方には、
オフラインでゆっくり読むことができますので、ご利用ください。
アーカイブファイル・ダウンロード
http://www.scollabo.com/banban/daf/archive.html
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_072.html
次回は、11月7日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのＯＳや 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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
今週は仕事の関係で夜間勤務となりました。午後７時から翌日午前５時までの
変則勤務で、昼と夜が逆さまになっています。
夜、少人数で業務に当たることは、決して効率のよいやり方とは思いません。
人間は朝目覚め、夜眠るという自然の摂理があるわけで、いくら忙しいとはいえ
あまり健康的なやり方ではありません。
しかし、会社の設備や資源には限りがあるため、それを有効に利用するとなる
と、人と時間を分けて業務に当たるというのは、どの会社でも同じことかもしれ
ません。
慣れてくると夜の静かさが気に入りました。おかげですっかり夜型人間になり
太陽がまぶしく感じます。やはり明るい昼間では、なかなか眠りにつくのが容易
ではありませんなぁ。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTML、スクリプトなどをご自分のページ作成
に自由に使っていただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新更新日 2003/11/4
Copyright(C) 2002-3003 banban@scollabo.com