こんにちは
本日はTwitterでご質問頂いた「パスワード保護されたページを作る方法」について書きたいと思います。
Web初心者の方には分かりにくい内容だったり、ソースコードを見ればパスが分かってしまうようなやり方もありましたので、悩んだ末に一番シンプルな方法をご紹介させて頂きます。
１、まず「パスワードを入力するページ」と「正確なパスワードを入力すると表示されるページ」の２つを作成します。
図のように２ページ作りましょう。
「passwordprotected」というページが「パスワードを入力するページ」
「tokyo」と書いているのが「正確なパスワードを入力すると表示されるページ」
です。
ページ名は任意ですので、お好きな名前を付けてください。
ここで注意なのですが、
「正確なパスワードを入力すると表示されるページ」の名前（この場合はtokyo）は入力するパスワードと同じにしてください。
２、javascriptを挿入する
「パスワードを入力するページ」を開きます。
このようにお好きにデザインしてください。
次に「オブジェクト」から「HTMLを挿入する」を選び、
下記のコードをコピペして貼付けてください。
<!-- start GateKeeper code -->
<!-- http://www.HTMLisEasy.com/keeper/ -->
<form name="keeper" action="javascript:location.href =
window.document.keeper.page.value + '.html'" style="margin:0;">
<div style="display:inline;">
<input type="text" name="page">
<!-- <input type="submit" value="Go"> -->
<noscript><div style="display:inline;color:#ff0000;
background-color:#ffff66; font:normal 11px tahoma,sans-serif;">
<br>Javascript is required to access this<br>area. Yours seems
to be disabled.</div></noscript></div></form>
<!-- end GateKeeper code -->
すると下記のように白いボックスが表示されますのでお好きな場所に配置してください。
これがパスワード入力ボックスになります。
これで完成です。
３、秘密のページをサイトマップ、メニューから外す
次にプラン画面に戻ります。
秘密のページ（この場合はtokyoというページ）を右クリックし、ページプロパティを開きます。
「ページをsitemap.xmlに含める」のチェックを外します。
「メニューオプション」は「ページをメニューに含まない」に設定します。
これはgoogleなどの検索結果に秘密のページが表示されないように隠すために行います。
以上でパブリッシュして本番環境に移してみましょう。
上記のページを表示して、パスワードを入力してみてください。
（パスワードは「tokyo」です）
上手く行きましたでしょうか？
是非使ってみてくださいね。
パスワードを変更したい時は一緒にページの名前も変更してくださいね。
※注意
このやり方はセキュリティ的には高いとは言えませんので、大事なデーターや機密情報などが絡む場合は使用しないでください！これが原因で何か問題が起きても当方は責任は取れませんのでご了承くださいませ。自己責任でお使いくださいませ。
今回はこちらのサイトで紹介されているjavascriptを参考にさせて頂きました。
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。
それでは、またお会いしましょう。
