18.外部ファイルを使ったパスワード(フォーム編)
 
 Javaスクリプトは実際にHTML文書の中に記述するだけでなく、外部ファイル(拡張子が *.js のファイル)を使って実装することができます。これはその外部ファイルを使ったパスワードです。

(HTML文書)
 
<HTML>
<TITLE>Password</TITLE>
<SCRIPT language="JavaScript" SRC="password.js"> //(1)
</SCRIPT>
<BODY>
<FORM>
<INPUT TYPE="PASSWORD" NAME="secret"> //(2)
<INPUT TYPE="BUTTON" VALUE="送信" onClick="pass(this.form)">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
</BODY>
</HTML>
 
(外部ファイル"password.js")
 
function pass(checkform){
var word=checkform.secret.value;
if(word=='Ayu&Risky'){location.href='http://www18.freeweb.ne.jp/art/hasky/index.html'} //(3)
else if(word=='ayumi'){location.href='http://www18.freeweb.ne.jp/art/hasky/ayu/profile.html'}
else if(word=='wakako'){location.href='http://www18.freeweb.ne.jp/art/hasky/risky/profile.html'}
else if(word=='Flyhigh'){location.href='http://www18.freeweb.ne.jp/art/hasky/link/link.html'}
else if(word=='SEASONS'){location.href='http://www18.freeweb.ne.jp/art/hasky/ayu/disco.html'}
else if(word=='Mylifeis'){location.href='http://www18.freeweb.ne.jp/art/hasky/risky/disco.html'}
else {alert('パスワードが正しくありません')}
}

 (説明)
 普通JavaスクリプトはHTML文書の中に直接書き込むわけですが、時と場合によっては直接書き込みたくない場合があります。その場合とは以下の3点です。
 1.スクリプトのコードが非常に長くなる場合
 2.同じスクリプトを複数のファイルで使う
 3.ある事情でコードを見せたくない
このスクリプトでは3番にあたります。パスワードという性格上当然でしょう。
 
 (HTMLファイル)
 (1)の<SCRIPT language="JavaScript" SRC="password.js">でスクリプトの宣言と呼び出す外部ファイルのパスを指定します。パスは相対パス、絶対パスのどちらでもかまいません。
 (2)の<INPUT TYPE="PASSWORD" NAME="secret">でフォームのINPUT TYPEを「PASSWORD」にします。こうすることでこのフォームはパスワードになり、文字を入力したとき文字列が「*」で表示されます。以下送信ボタンは「BUTTON」、リセットボタンは「RESET」にします。
 
 (外部ファイル)
 スクリプトを実行するのに必要な外部ファイルを作成します。拡張子は「*.js」とします。ファイル名はここでは「password.js」としましたが、任意ですのでわかりやすいファイル名にした方がいいでしょう。
 (3)の「if (word == 'Ayu&Risky') { location.href = 'http://www18.freeweb.ne.jp/art/hasky/index.html' }」でwordの部分には任意のパスワード(もちろん半角英数字)を、location.hrefの部分にはそのパスワードが入力されたときにジャンプするリンク先のURLを入力します。URLは相対パス、絶対バスどちらでもかまいません。if〜else文を用いることでパスワードによってそれぞれのページにジャンプすることができます。
 フォームにパスワードを入力して「送信」ボタンをクリックすると指定したページにジャンプします。「ENTER」キーでは反応しないので注意してください。
 
 (注意)
 この外部ファイルによる実装はユーザーにコードを見せなくてすむ、HTML文書に書き込む量が少なくてすむというメリットがありますが、同時にデメリットもあります。それは以下の3点です。
 1.ネットスケープ3以上、インターネットエクスプローラー4以上ないと動作しない
 2.HTML文書のほかに外部ファイルをダウンロードしなければならないので、それだけサーバーに負担がかかる
 3.一部のプロバイダーでは外部ファイルを許可していない
まず1番ですが、現在ではほとんどのユーザーがNN、IEともバージョン4以上を使っているのであまり問題にならないでしょう。2番は外部ファイルの性格上仕方ないことですが、このスクリプトで使っている外部ファイルの大きさであれば心配することではありません。3番は有名なプロバイダーであれば問題なく動作します(たぶん)。ちなみにわたしの加入しているプロバイダーのBIGLOBEでは問題なく動作しました。もし動作しないようであれば、Javaスクリプトファイルの置かれているサーバー上のディレクトリに「.htaccess」というファイルを用意します。このファイルは「.(ピリオド)」で始まる珍しいファイルで、このファイルの内容には、
  AddType application/x-javascript.js
という文章を記述します。ただしこれでも動作しないことがあるので、わからない場合はプロバイダーに直接問い合わせてください。
また、最初の<SCRIPT language="JavaScript" SRC="password.js">で「*.js」ファイルのあるパスがわかってしまうので、そこにアクセスすることで「*.js」ファイルがダウンロードされてしまいます。ということはこのスクリプトの場合パスワードが丸見えになってしまいます。ですからセキュリティを万全にしたいならば、もっとまともなパスワード(たとえばエイベックスのホームページにある会員用のサイトにあるようなやつ)にしたほうがいいでしょう。
 
このサンプルでのパスワードとそれに対応するリンク先は以下の通りです。
パスワード リンク先のページ
Ayu&Risky Ayu&Riskyトップページ
ayumi 浜崎あゆみプロフィール
wakako 島崎和歌子プロフィール
Flyhigh Ayu&Riskyリンクコーナー
SEASONS あゆディスコグラフィー
Mylifeis 和歌子ディスコグラフィー
大文字、小文字を区別しますので間違えないでください。

実行結果

BACK