先に＜注意＞を記載しておきます。
＜注意＞
このやり方は、ページのアドレスを知られてしまうと意味のない方法です。
それは、直接URLをアドレスバーに打ち込まれてアクセスされてしまうからです。
ただ、そうしたことに詳しくない人には有効な手段です。
そして、パスワードの入力を促すことで、少しだけセキュリティ効果がありそうに見えるので、見栄えが良いです。
パスワード入力画面 実際の見え方
ネット上では以下のように表示されるページが出来上がります。
↓ ↓ ↓ ↓
そして「パスワードを入力してHPにアクセスする」というボタンを押すとこうなります。
↓ ↓ ↓ ↓
この仕掛けは、「index」と空欄に入力すれば「index.html」に飛び、「password」と入力すれば「password.html」に飛びます。
もちろん「1111」などの数字でも同じで「1111」と入力すれば「1111.html」に飛びます。
つまり、パスワードがそのまま.htmlとなって、そのページに飛ぶという仕掛けです。
但し、事前にパスワードと同じ名前のhtmlファイルをアップロードしておく必要があります。
飛ばし先を複数作るのであれば、複数のhtmlファイルを作れば、そのファイル名がパスワードとなります。
Aさん、Bさん、Cさんに自分の名前がパスワードであることをメールで伝え、入力してもらえれば、それぞれの専用ページを表示させるということが可能になります。
簡易パスワードページの作り方
＜この下からまるっとコピー＞となっている下からコピーをして、htmlファイルにするだけです。
同じ階層にパスワードにしたい名称のhtmlファイルをつくり、全て同じ階層に置くだけです。
例えば、コピーして作ったパスワードを訊いてくるページを「index.html」として「news.html」「blog.html」という2つの飛ばし先のページを作るとします。
つまり、newsとパスワードの空欄に打ち込めば「news.html」に飛び、blogと打ち込めば「blog.html」に飛ぶということになります。
飛んだ先URLをコピーされ直接アドレスバーに入力されてしまうと、閲覧されてしまいます。
ここが、この方法の弱いところではありますが、若干の抑止にはなると思います。
＜この下からまるっとコピー＞
<!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”>
<title>簡単パスワード認証</title>
<style type=”text/css”>
span.password { font-size: 150%; font-family: monospace; font-weight: bold; margin: 0px 0.3em; }
input[type=button] { font-size: 125%; margin: 2em; }
div.guide { background-color: #e0e0e0; padding: 3px 1em; }
</style>
</head>
<body>
<h1>認証ページ</h1>
<p>
下記のボタンをクリックすると、パスワード入力ダイアログが表示されます。<br>
パスワードとして、「<span class=”password”>メールでお知らせしたパスワード</span>」を入力するとアクセスできます。
</p>
<!– ================================================ –>
<!– ▼JavaScriptを使った簡単パスワード認証用のソース –>
<!– ================================================ –>
<script type=”text/javascript”>
function gate(){
// ユーザの入力を求める
var UserInput = prompt(“パスワードを入力して下さい:”,””);
// 入力内容をチェック
if( /\W+/g.test(UserInput) ) {
// 半角英数字以外の文字が存在したらエラー
alert(“半角英数字のみを入力して下さい。”);
}
else if( UserInput != null ) {
// 入力内容からファイル名を生成して移動
location.href = UserInput + “.html”;
}
}
</script>
<p>
<input type=”button” value=”パスワードを入力してHPにアクセスする” onclick=”gate();”>
</p>
<!– ========== –>
<!– ▲ここまで –>
<!– ========== –>
<div class=”guide”>
<p>
ユーザの操作によって、以下のように動作します。
</p>
<ul>
<li>正しいパスワードを入力した場合、HPへ移動します。</li>
<li>パスワードを間違えた場合は、正しいページに移動できず、「Not Found」エラーページが表示されます。</li>
<li>半角英数字（a～z、A～Z、0～9、アンダーバー）のみ認証します。</li>
<li>パスワードの入力欄で「キャンセル」ボタンをクリックした場合は、どこにも移動しません。</li>
</ul>
</div>
</body>
</html>
———–＜ここまで＞———————-
表示される文言をホームページビルダーなどのソフトで編集カスタマイズすれば、オリジナルのパスワード入力画面となります。
お試しくださいね。