GitHub Pages などの静的ホスティングサービスでサーバを自由にいじれない環境でもパスワードをつける方法です。

デモ

デモサイト
ハッシュ値チェック
リポジトリ

パスワードは password

概要

GitHub Pages などの静的ホスティングでサーバの設定ができない場合、パスワードによる制限をつけることが難しいです。

それでも、パスワードによって閲覧を制限したい場合に、今回の方法が使えます。

簡単な説明をするとパスワードによって制限したいページをハッシュ化された文字列の名前を持つディレクトリに入れることで、URI を用いた認証をつけます。

これにより、パスワードを知っている人のみがページへアクセスすることができます。

仕組みの詳細

パスワードの入力

あらかじめ正解のパスワードが入力された場合のハッシュ値（ デモサイトでは SHA-256 を使用 ）をそのままアクセスされるディレクトリの名前にしておきます。

訪問者はパスワード入力ページでパスワードを入力します。

パスワードが入力されたら、JavaScript でハッシュ化（ ライブラリは jsSHA を使用してます ）し、XMLHttpRequest を利用してハッシュ値の名前を持つディレクトリの存在を確認します。

正常なレスポンスが返されればアクセスに成功とし、遷移します。

そうでない場合は、再入力を促します。

詳細なコードはリポジトリにある index.html を見れば全てわかります。

セキュリティ

（ 専門ではないので間違いがある可能性があります。 ）
上記の仕組みを見れば分かる通り、URI の存在を確認しているだけなので、それを知られるとパスワード無しで閲覧できてしまいます。

なので、ディレクトリリスティングの設定や noindex などを利用して、リンクを知られないようした上で SSL を利用しましょう。

しかし、簡単なパスワードを利用していない限りは URI を知られてもパスワード自体が知られることはないでしょう。

おわりに

簡易的ではありますが、静的ホスティングサービスでパスワード認証を利用する方法の紹介でした。

ちょっとした認証に利用できそうなので、使う機会があれば使っていきたいですね。

大学の研究室で後輩にGitとGitHubの使い方を教える会を前にやったので、ついでに記事として残しておきます。

Git

ダウンロード/インストール

インストールされてなければこちらからダウンロードし、インストールをします。

初期設定(GitHub登録してからの方がいいかも)

ターミナルから以下のコマンドを打ちます。

$ git config --global user.name "GitHubのユーザ名(じゃ無くてもいいけど揃えとくといい)"
$ git config --global user.email "GitHubのメールアドレス(じゃ無くてもいいけど揃えとくといい)"

ローカルでリポジトリごとに設定することも可能です。

GitHub

登録

Join GitHubからUsername/Email address/Passwordを入力しアカウントを作ります。多分躓くところはないと思います。

あと、GitHubは学生プランもあるのでオススメです。

リポジトリ作成

画像にあるように「New」から作成できます。

作成ができたら、リポジトリの情報を入力していきます。

ローカルリポジトリ

自分の手元で扱うリポジトリです。

リポジトリ単位で、バージョン管理を行うのですが大まかな流れは

1. インデックスに追加
2. インデックスに追加されたものをコミット

です。ここで行ったコミットがどんどん積み重なっていき、特定の地点のコミットに戻れたりします。

またブランチを切ることで、別バージョンの開発ができたりします。

初期化

以下のコマンドで、現在のディレクトリをGitリポジトリとすることができます。

$ git init

インデックスに追加

やり方は以下のどれかです。

$ git add <追加したいファイル/ディレクトリ>
$ git add .   # 全て追加
$ git add README.md   # README.mdというファイルを追加
$ git add assets  # assetsというディレクトリを追加

一番よく使うのはgit add .だと思います。

ただ、これだと全てのファイルを追加してしまうため、Gitでバージョン管理しないものやアップロードされては困るファイル/ディレクトリ(例えばシークレットキーが書かれたファイルやビルドしたバイナリとか)まで追加されてしまいます。

そこで.gitignoreというファイルでGitでの管理に含めないファイル/ディレクトリを指定できます。

コミット

次のどちらかで、コミットを登録しましょう。

$ git commit -m "コミットメッセージ"
or
$ git commit  # エディタが開いてメッセージを打てます

コミットメッセージは自由に打てますが、プロジェクトごとに書式が決まってたりもします。特になければ、変更点をわかりやすく書けばいいと思います。

またコミットの頻度も自由ですが、細かくやることを推奨します。1つの機能や何かタスクが終わるごとにやるといいでしょう。

ローカルリポジトリでの更新はaddとcommitがあればいいので、この2つがもっとも高い頻度で使うことになると思います。

ブランチ

別バージョンの開発や、機能の追加/修正ごとなどに使うことがある、バージョンの枝分かれ機能です。特に他人との共同開発ではよく使うことになると思います。

コマンド一覧を示しておきます。

$ git branch <ブランチ名>  # ブランチの登録
$ git checkout <ブランチ名>    # ブランチの切替
or
$ git checkout -b <ブランチ名>   # 上の二つをまとめてできる

$ git branch -d <ブランチ名>   # ブランチの消去

$ git merge <ブランチ名>   # 他のブランチと結合

リモートリポジトリ(今回はGitHub)

リモートリポジトリの追加

先ほどのgit addと似ていますが、こちらはgit remote addを使用します。以下の通りです。

$ git remote add <リポジトリ名> <URL>
$ git remote add origin https://github.com/hoge/huga.git # リポジトリのデフォルトの名前がoriginです

プッシュ

ローカルリポジトリの変更をリモートリポジトリにアップロードします。以下の通りです。

$ git push -u <リポジトリ名> <ブランチ名>    # -uをつけると次回からgit pushのみで良くなります
$ git push -u origin master
$ git push

プル

リモートリポジトリから最新版を持ってきます。作業前に必ずやるようにしましょう。

$ git pull

おわりに

これで一通りの作業ができると思います。

ここに書いていないことや、困った時は先輩が残してくれた作業別Gitコマンド集を見れば、だいたい書いてあると思います。

GitHubのデフォルトアイコンはドット絵のようなアイコンですよね。

あれが何者なのか気になったので、色々と覗いてみました。

ユーザごとに違うアイコン

GitHubもそうですけど、Slackとかも初期アイコンがユーザごとに違うものってありますよね。どうやらそういうアイコンのことをIdenticonというそうです。

特に、GitHubのIdenticonについてはGitHubのブログに書かれています。

自分のアイコンを確認

現在のアイコンを確認

Identiconを見る前に、現在設定しているアイコンを見てみましょう。

現在のアイコンはhttps://github.com/<username>.pngから見ることができます。ちなみにこのアドレスからリダイレクトされるURLの最後の方に書かれている数字、または画像を保存した時の名前が自分のユーザIDとなっています。このユーザIDはあとでも見返すので、なんとなく覚えといてください。

アイコンを変更していない人はこの方法でもIdenticonを確認できます。

Identiconを確認

アイコンを自分で変更した人でもIdenticonを確認することができます。

Identiconはhttps://github.com/identicons/<username>.pngから見ることができます。

懐かしいですね。しかしこの画像よく見ると、少しおかしいです…

Identiconの謎

画像の情報をみてみると、画像サイズは420 x 420 pxのようです。なるほど。上下左右で35 pxのマージンと縦横5 x 5のドット絵でそれぞれ70 pxであれば420 pxとなります。

しかし

画像を拡大してみましょう。わかりやすく、70 pxの境界線に線を引きました。

そうです。1 pxズレているのです。

これは5 x 5の全てのドットで左上は35 + 70(n - 1)の座標にあるのですが、そこから塗りつぶしの範囲が71 x 71 pxになっているのです。つまり、右と下に1 pxずつはみ出しています。

気づいてしまった時には気になって気になって仕方なかったです。

なんでこんな仕様になっているのでしょう…

そもそもこのアイコンはどのようにしてできているか

こちらは上記にブログに少し書いてあったり、他のサイトでも紹介されていますが、ユーザID（さっきも出てきましたが自分で決めたusernameではなくGiuHubが側が発行したユニークな番号）から生成されます。

具体的にはユーザID（僕の場合は29699789）をMD5を用いてハッシュ値を得ます。得られた32桁（僕の場合は696f9ab9a21cf934a3bb45c2352808bf）の先頭15桁の偶奇から塗りつぶす/つぶさないを形を決定（図参照）。

そして下7桁の内、前3桁から色相、中2桁を彩度、後2桁を輝度に割り当てることで色が決まります。

作り方をみても謎は解けませんでした…

おわりに

ほんとに71 x 71 pxの謎が気になって仕方がない。

謎すぎる…