httpsでLiveReloadを使おうとしてちょっとはまった話
https（SSL）環境でLiveReload使おうとしたら、LiveReloadしてくれなくってちょっとはまった話。
LiveReload は開発時に使用するものだから、https で使うって今までなかった。
けど、Baas 使ってアプリつくろうと思ったら、あれ、LiveReloadきかないじゃんって悪戦苦闘したので、その記録です。
環境
- Chrome 39.0.2171.95 (64-bit)
- LiveReload Chrome Extension 2.0.9
なんで LiveReload できないの？
使っている LiveReload クライアントによって、動作は違うかもしれないけど、Chrome Extension の LiveReload は、https にアクセスしているときでも、 LiveReload 開始すると、今見ているページに script で以下を追加する。
<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.0.9"></script>
でも、https のページから http のスクリプトを呼び出すことになるので、これは危険だと Chrome さんが判断して無効にしてしまう。
このとき、Chrome の Console を見ると、以下のようなエラーメッセージが出力される。
Mixed Content: The page at 'https://xxxx/index.html' was loaded over HTTPS, but requested an insecure script 'http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.0.9'. This request has been blocked; the content must be served over HTTPS.
で、LiveReload の script を呼び出せないから、いくら LiveReload に change メッセージを送信してもブラウザがリロードされないという現象になってしまう。
回避方法
自分で作成中のページにアクセスして発生している現象であれば、Chrome さんに、このページについては http の呼び出しを例外的に許可する設定をすることで回避できる。
URL 表示欄の右端にある 
をクリックして、 load unsafe script ボタンをポチッとする。
※セキュリティ的に安全でないことをすることになるので、どんなページでも無条件にポチっていいものではありません。
これで、https 環境でも LiveReload を楽しむことができる。やった。
もしかしたらこんな方法もあるのかな
そもそも、https にアクセスしているのだから、 LiveReload のスクリプトを https で埋め込めれば、もっとまっとうな解決ができる。
ただ、Chrome Extension の LiveReload を https で埋め込む方法については、調べたけどわかんなかった。
もし、script で https://127.0.0.1:35729/livereload.js を埋め込めるのであれば、あとは LiveReload サーバを https で起動してあげればいい。
https での起動方法や環境設定方法は、以下のページがとてもわかりやすく、参考になりました。
Complete guide to livereload over ssl (https) using grunt watch
