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

                毎週金曜日配信 What's New 2004年5月14日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

                banban@scollabo.com

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

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

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

   今週のコンテンツ
       ■ JavaScript講座 (第18回) --- location、及び historyオブジェクト
    ■ インターネット用語解説 (第7回) --- SSL

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

◆JavaScript講座 --- location、historyオブジェクト

 JavaScriptにおける locationオブジェクトとは現在表示されているページの
 位置情報を扱い、historyオブジェクトは、現在のブラウザの履歴を扱います。
  今回は、似て非なる2つのオブジェクトについて解説します。


 ■ locationオブジェクト
 locationオブジェクトとは、現在表示されているページの位置や通信状態など
 を参照する場合に用いられます。また、現在のページを他のページに変更する
 ということも可能です。

  locationオブジェクトのプロパティとメソッドは以下のように定義されてい
 ます。

 □locationオブジェクトのプロパティ
  ◆ hash   現在のアンカーを参照、または指定したアンカーへ移動する
       ここで示すアンカーとは、<a name="……">〜</a> で埋め込まれ
       たリンク先を示すアンカーを扱います。

   書式
    document.link{参照番号].hash = "URL" 設定する場合
    参照番号は、埋め込まれたリンクの順番を示します。最初の番号は 0に
    なることに注意してください。

   例文
    document.write(location.links[参照番号].hash);

    ◆ host 訪問中のホスト情報を参照する。
       ホストの具体的な情報とは、そのホストのドメイン名、あるいは
       IPアドレスを返します。

   書式
    location.host

   例文
    document.write(location.host); ホストを参照します。

    ◆ hostname 訪問中のホスト名(ドメイン名)を参照する。
       hostプロパティと同じように、現在のドメイン名を返します。

   書式
    location.hostname

   例文
    document.write(location.hostname);
     現在のホスト名を参照します。具体的には、hostプロパティと同じ結
     果になります。

  ◆ href  表示しているページの URIを参照、または他の URIに移動する。
       現在のページ内で埋め込まれている <a href="……">〜</a> で
       示されるアンカーの URIを参照したり、リンク先を個別に設定す
       ることができます。

   書式
    document.write(location.links[参照番号].href) リンク先の参照
    location.href = URI  リンク先の設定
     参照番号は、そのページに示されるリンクの登場順となります。
     最初の番号は 0 になることに注意してください。

   例文
    <input type="button" value="Yahoo" 
            onclick="location.href='http://www.yahoo.co.jp'">

  ◆ port  表示中のページのポート番号を参照、または設定する。
       ポート番号を参照する場合、あらかじめポート番号が指定されて
       いない場合には何も表示されません。

   書式
    location.port

   例文
    document.write("ポート番号は",location.port);

  ◆ protocol 現在通信中の通信手順(プロトコル)を返す。
       プロトコルとは、コンピュータ間の通信を行う際に、決められた
       規則(手順)にしたがって行われるものです。Webでは HTTPプロ
       トコルが使われます。
        <a href=" 〜 "> などで指定された現在のページ、またはリン
       ク先のプロトコル名 (http:,ftp: など) を参照または設定します。
       返されるプロトコル名はサーバによって異なる場合があります。

    書式
     location.protocol または、
     location.links[参照番号].protocol (リンク先のプロトコル参照)

    例文
     document.write(location.protocol);
      現在のページのプロトコルを参照します。

  ◆ search CGI などに渡される URIを参照、または設定する。
       <a href=" 〜 "> で設定されたリンク先、または現在のページの
       CGIなどに渡されるサーチ部分(?マーク以降の文字列)を参照、
       または設定します。

    書式
     location.search

    例文
     document.write(location.search);

 □locationオブジェクトのメソッド
  ◆ reload  現在表示中のページのリロード (再読み込み) をする。

   書式
    ウィンドウ名.location.reload();
     現在のページをリロードする場合、ウィンドウ名を省略することがで
    きます。

   例文
   <input tepe="button" value="再読込み" onclick="location.reload();">

    ボタンが押されると、現在のページを再読み込みします。

  ◆ replace ブラウザに現在のページの履歴を残さずに移動します。そのた
        め、移動先からブラウザの「戻るボタン」をクリックしても元の
       ページには戻れません。

   書式
    ウィンドウ名.location.replace(移動先 URI)
     ウィンドウ名は省略可能です。

   例文
   <input type="button" value="Yahoo" 
        onclick="location.replace('http://www.yahoo.co.jp')">

 ■ historyオブジェクト
 historyオブジェクトは、ブラウザの履歴(訪問済みの URIの記録) を操作した
 り、画面上に表示しているページの移動などの操作に利用します。

 □ histoyオブジェクトのプロパティ
  ◆ length 現在ブラウザが持っている訪問済みの URI の履歴の数を参照する。

   書式
    hostory.length

   例文
    document.write(現在の履歴数は", history.length);

 □ histoyオブジェクトのメソッド
  ◆ back  現在表示中のページの以前のページに戻る。
     Webブラウザの履歴の引数に示される分のページに戻ります。1つ前
     のページに戻るときには 1、2つ前の場合は 2 とするように、その
     数の分だけの履歴に戻ります。
      ただし、履歴がない場合には無視されます。

   書式
    history.back(戻るページの数)

   例文
    <a href="javascript:history.back(1)">[1つ前に戻る]</a>

  ◆ foward  現在表示中のページの先のページへ移動する。
       1つ先のページに移動します。ただし、そのページが既に読み込
       まれていることが前提となります。

   書式
    history.fward

   例文
    <a href="javascript:history.foward">[1つ先に進む]</a>

  ◆ go  指定した数のページに移動します。負数を指定した場合には、履歴
     から参照します。移動するページがなければ何もしません。なお、引
     数には絶対パスを記述することも可能です。

   書式
    history.go(移動するページ数:負数も可能)

   例文
    <a href="javascript:history.go(-1)">[1つ前に戻る]</a>

 ■locationオブジェクトと、Linkオブジェクト
 <a href="……"> 〜 </a> というリンクを扱うオブジェクトに Linkオブジェ
 クトが定義されています。このオブジェクトの内容は Areaオブジェクトとも
 まったく同じものとして定義されています。

  特に、locationオブジェクトと Linkオブジェクトでは、それらのプロパテ
 ィに多くの共通点を見ることができます。locationオブジェクトに定義され
 ていないものは、targetプロパティだけで、後はすべて同じもので構成されて
 います。

  2つオブジェクトの使い分けは、特に意識することなく同じ目的で利用する
 ことが可能です。

 ■ historyオブジェクトの注意点
 ブラウザの履歴を使う historyオブジェクトを利用するに当たって、特に注意
 しなくてはならない点があります。

  例えば、検索サーチから訪れた閲覧者に対して historyオブジェクトを使っ
 た場合、閲覧者の履歴で動作することになりますので、意図しないページに移
 動することになります。その意味では、あまりお勧めできないオブジェクトで
 あるといえるでしょう。

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

◆インターネット用語解説 --- SSL (Secure Socket Layer)

 オンラインショッピングなどで買い物をするとき、個人情報を入力する画面で
 は、そのほとんどで SSLを利用しているサイトがあります。これは一体、何を
 意味しているのでしょうか?

 ■ SSLとは
 インターネット草明期には、交換される情報 (電子メールを含め) に暗号化な
 どの手段がなく、第三者に見られるという不具合がありました。そのため、情
 報の機密性を高める暗号化という要求が高まり SSLが登場しました。

 SSLは、Netscape Communications社が最初に開発し、同社の Webブラウザに搭
 載された HTTP上の暗号プロトコル (通信手順) でした。
  現在では、ほとんどのブラウザやメーラーに標準で装備されています。

 ■ SSLの仕組み
 ごく簡単にネットワークについて解説します。詳しく解説すると1年分のメー
 ルマガジンでは足りません。本当にごく入り口について述べます。

 Webで利用する通信プロトコル (通信手順:通信するための規則) は TCP/IPと
 いわれる代表的なプロトコルが使われます。TCP/IPのIPは、ネットワーク層と
 いう階層のプロトコルで TCPはその上のトランスポート層のプロトコルという
 レイヤー (層状) で成り立っています。

  ネットワーク層は第一層から第四層までの下位層 (Lower layers) で区切ら
 れ、主に電気的なシステム間通信を制御するプロトコルです。
  一方、下位層のアプリケーション層と呼ばれる上位層 (Upper layers) は、
 人間に近い言語で示されています。これら全体を OSI参照モデルと呼びます。

  OSI参照モデルは以下の層で構成されています。

          ┏━ アプリケーション層
   IP 上位層 ━╋━ プレゼンテーション層
          ┗━ セッション層

   TCP 下位層 ━┳━ トランスポート層
          ┗━ ネットワーク層

  TCP/IPでは、HTTP、FTP、SMTP、POPなど実にさまざまな通信プロトコルをサ
 ポートしています。現在では世界標準といわれるほどのネットワークにおける
 プロトコルになっています。

  SSLは TCP/IPの中で実装されているセキュリティ通信で HTTPSというプロト
 コルによって実現しています。具体的には、以下のレイヤーの関係になってい
 ます。

       TCP/IP (OSI参照モデル)   SSLプロトコル (HTTPS)
      ---------------------------------------------------
      アプリケーション層   →   HTML
      プレゼンテーション層  →   HTML
      セッション層      →   SSL
      トランスポート層    →   TCP
      ネットワーク層     →   IP

 ■ SSLは何故安全なのか?
 最新の SSLでは、伝送される情報暗号化、認証機能、データ完全性の機能の3
 つで成立しています。以下は、SSLにおける情報の流れです。

  最初は、クライアント (ユーザ) が使用可能な暗号の種類をサーバに送信し
 ます。サーバは両者が使える最強の共通鍵暗号を選択します。
  サーバは証明書と、サーバの署名をクライアントに送信して、サーバの「な
 りすまし」を防ぐことになります。
  クライアントは、共有鍵を生成しサーバの公開鍵で暗号化してサーバに送り
 暗号化通信の開始を行います。

 証明書
  証明書とは、本人であることを照明するための認証に用いられるもので、例
  えば、免許証とか住民票などに当たるものです。
  証明書にはその証明書の所有者の情報、例えば e-mail アドレスや、名前や
  証明書の使用目的、有効期間、情報の場所、または通常名(Common Name, CN)
  を含む識別名(Distinguish Name, DN) (web サイトのアドレスや e-mail 
  アドレスは用法に依存します)、そしてこの情報に保証を与えた(つまり署
  名した)人物の証明書 ID が含まれています。
   さらに、証明書はその公開鍵を含み、最後に、その証明書全体が改竄され
  ていないことを保証するためのハッシュ値を含んでいます。

 暗号化
  暗号化を行うアルゴリズムには、さまざまな手法が考えられます。暗号化ア
  ルゴリズムの決められた規則にしたがって、第三者に見られなくしたりデー
  タの改竄を阻止します。
   暗号化されたデータの復号化には暗号表に当たる「鍵」を使いますが、必
  ず対になる2つの鍵を使う公開鍵暗号と、どちらにも同じ鍵を用いる秘密鍵
  暗号があります。前者にはRSA、ElGamal暗号、楕円曲線暗号などがあり、後
  者にはアメリカ政府標準のDESや、IDEA、FEAL、MISTYなどがあります。

 ハッシュ値
  ハッシュ値)とはハッシュ関数によってメッセージから作られたある数字の
  ことを表します。これは一方通行関数とも呼ばれるもので、そのハッシュか
  ら元のメッセージを得ることが不可能であることを意味しています。
   しかし、ハッシュは元のメッセージがほんの少し変更されても劇的に変化
  します。したがって、ハッシュ値を変えないままメッセージを変形すること
  は非常に困難になっています。
   ハッシュ関数はパスワード方式の仕組みや、アプリケーションがオリジナ
  ルであることを保証するためや、一般的にはメッセージが改竄されていない
  ことを確証するために使われます。 

 秘密鍵と公開鍵
 秘密鍵、あるいは公開鍵の鍵ペアを用いる暗号化は、データが一方の鍵で暗号
 化されると、その対である他方の鍵でしか復号できない、ということを保証し
 ます。つまり、一方の鍵が暗号化すると、その対の鍵で復号化できる仕組みと
 なっています。
  この鍵対は素数の性質に基づいていて、それらのビット長が対の鍵なしにメ
 ッセージを復号する困難さを保証します。

 ■ SSLの安全性
 必ずしも SSLが完全というわけではありません。確かに暗号化はより高度で複
 雑になりましたが、第三者がそれを解く鍵を持っていれば、セキュリティは確
 保することができません。(滅多にないが、絶対ないわけではない)
  鍵の種類は有限ですから、1つずつ確かめていけばいつかは開錠できるわけ
 です。しかしながら、1つずつ確かめる時間を長くする(例えば1年とか10年
 とかという長時間)することで、ある程度のセキュリティを保つことができま
 す。

  オンラインショッピングで、クレジットカードなどを入力する際に、こうし
 た SSLを実装していないサイトならば、買い物はやめたほうが安全です。
  一般的に SSLを実装した場合、その URL は、https:// と表示されます。
 また、ブラウザ画面の右下には「鍵マーク」が施錠されているアイコンを表示
 します。

  Webサイトで SSLを実装するためには、それなりに経済的負担がかかります。
 オープン SSL というフリー版もありますが、最近ではセキュリティホールが
 発見され、その脆弱性が問われています。

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

今回はここまで。

 「今週のおさらい」は未完です。先週の分を含めて何も手がつけられない状態
 です。まことに申し訳ありません。私の宿題としてください。

  次回は 5月28日 (2週間後) に配信を予定しています。来週は「出張」する
 関係で、お休みさせていただきます。

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

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

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

 発行者 ばんばん
 協力  スズキ・コラボレーション 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

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

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

 会社を設立して以来、忙しい日々が続いています。仕事があるってことは、本
 当にありがたいことで、クライアントに足を向けて寝れません。
  おかげで、家族揃って今日も食べることができます。仕事は大小さまざまで
 すが、お客様に満足できるようすべて全力投球の姿勢です。

  1日が終わると精も根も尽き果ててしまいますが、毎日充実した日々を送っ
 ています。しかしながら、個人の時間が持てず、当サイトの更新やメールマガ
 ジンの原稿作成など思いのままにならないのが、唯一の悩みです。

  今後も不意な「休刊」などがあると思いますが、どうぞ末永いお付き合いを
 お願いします。元気で頑張りますから・・

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

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

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


This page is Valid HTML 4.01! 最新公開日 2004年5月28日
Copyright(C) 2002-2004 banban@scollabo.com