はじめに
個人間で書類共有するためのページを作る必要があった。
webど素人の自分が簡単な鍵付きページを実装したメモ。
やりたいこと
- パスワードを入力して、正しければページを開く
- ファイル名を入力して遷移する方法を使用
- 直接リンクを叩かれた場合にパスワード入力ページへリダイレクト
- 検索に引っかからないようにする
やったこと
0.事前準備
以下のファイルを作成。
├── index.html
├── goal.html
└── js_dir
├── password.js
└── redirect.js
1.パスワード入力の実装
password.jsを実装。
password.js
let pass = prompt('パスワードを入力してください');
location.href = "./" + pass + ".html";
index.htmlのbodyに以下を追加。
index.html
<script src="./js/password.js"></script>
パスワードで入力してもらった値がそのまま遷移先になるという実装。
ここではユーザーがgoalと入力すればgoal.htmlに遷移できる。
goal以外が入力された場合は404になる。
2.直接リンクを叩かれた時のリダイレクトを実装
redirect.jsを実装。
redirect.js
var ref = document.referrer;
if (ref.match(/index/) != null) {
// index.htmlから来た場合
} else {
// index.html以外から来た場合
location.href = "./index.html";
}
goal.htmlのbodyに以下を追加。
goal.html
<script src="./js/redirect.js"></script>
document.referrerを使うと遷移元の情報が取れるらしい。
これを使って、遷移元のurlにindexが入っている場合はそのまま表示し、
入っていない場合はindex.htmlに飛ばすように実装した。
3.検索に引っかからないようにする
goal.htmlのheadに以下を追加した。
goal.html
<meta name="robots" content="noindex">
これで検索に引っかからないらしい。
（検証しようがないから信じてるだけ...）
結果
（スクショ貼れませんが）
- index.htmlを参照するとパスワードが聞かれる
- goalを入力するとgoal.htmlが開く
- goal以外を入力すると404になる
- goal.htmlを直接参照するとindex.htmlに自動で飛ぶ
webど素人でも1時間くらいで作成できたので、個人で使う分にはこのレベルでちょうどいいのかなと感じました。
大したことはしてませんが、ちょっと「web作った！」感があって楽しかったです。笑