はてなブログのHTTPS化の状況
2017年9月25日に全ページHTTPS化に向けたロードマップが出た。
しかし作業は当初見積りより遅れ、
2017年11月20日に管理画面がHTTPS化、第一段階が終わった。
2018年2月22日にようやく第二段階のはてな提供ドメインのブログHTTPS化がアナウンスされたが、これは全ユーザー一斉ではなく順次だった。
つい最近になってようやくHTTPS化の対象になったのでHTTPS化した。
HTTPS化の瞬間
ポチッとな。
テーマ側の対応
検索ボックスのアイコン
このブログはテーマを自作しているのでそっちの対応も必要だ。まあもともとHTTPS化の流れを知っていた私に隙はない(ｷﾘｯ
・・・とか思っていたがそうでもなかった。あやややや。
でも述べたとおり、自作テーマははてなが提供しているBoilerplateをforkして作っているのだが、そのはてな提供部分が問題だった。
検索ボックスの検索アイコンは、CSSのbackground-imageで実現しているのだが、それがどのようになっていたかというと、
.search-module-button { width: 20px; height: 20px; background: transparent url(http://blog.hatena.ne.jp/images/theme/search.png) no-repeat right center; border: none; outline: none; text-indent: -9999px; position: absolute; top: 5px; right: 5px; opacity: 0.5; &:hover { opacity: 0.85; }
のようにhttpから始まるURLの画像が指定されていた。これはPull Requestチャンスだな！と思って
を投げたのだが、よく見たら
あれ～、開発終了している・・・。まじか。どうも
lessをやめて、sassに移行したらしい。は？意味がわからん。一体 @ueday氏(はてなの中の人？)は何をやってるんや？？？
まあそれはいい。で、そのsassの方の該当部分はどうなっとるんじゃろなと思ってみると、
.search-module-button { width: 24px; height: 24px; margin-right: 5px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat center; background-size: 20px 20px; border: none; outline: none; color: transparent; overflow: hidden; opacity: .5; cursor: pointer; &:hover { opacity: .85; } }
まあそっちのほうがいいかってことでこちらも追従した。
CIを直す
自作テーマはCIで自動デプロイしているんだが、このCIが前から壊れていた。原因はテーマのハックに使っているJavaScriptをminify&ugrifyするGoogle Closure CompilerがJava7で動かなくなったためらしい。Shippableのコンテナに入っているのは
によればv6.3.4のイメージのハズだから、
v6.3.4 - Shippable Docs#nodejs
Java 1.8.0が入っているはずなのだが、どうもjava -versionする限りでは1.7が入っている。
やってられんのでdocker imageを指定してやることにしようとしたが、その迷走の過程で
大量のcommitを濫造した。うへぇ・・・。
ついでにClosure Compilerのinstall scriptに使ってたfs-promiseがいつの間にかdeprecatedになってたのでfs-extraを使うように直したり、その他Node.jsのdependencyを更新したりして、
どうにかCIが通った。
本当は本家がlessからsassに移行したのに追従してこっちもsassにするべきなんだろうけど、だるいのでやめた。
記事のMixed Contentsとの戦い
まあもともとHTTPS化の流れを知っていた私に隙はない(ｷﾘｯ
・・・と思ったがこちらもやはり穴があったようで数箇所httpなコンテンツを読み込んでいた。
まあ修正箇所は多くないし全部単純な置換で済んだので良かった。
よく言われるHTTPS化のメリットについて検証
鍵マークがつく
Mixed Contentsを全部潰したところ、ついた。なんか気持ちいい。
http2対応による対応ブラウザで表示速度アップ
速いと噂のhttp2を使うにはHTTPS化が前提になる。
http2対応していないブラウザとかもう絶滅しているのでいいとして(IE11ですら対応している)、はてな側でhttp2対応しないと意味がない。
見た感じまだまだ全然http2対応していないのでまあ当然速度アップとかない。
・・・というかそもそもはてなブログは読み込むものが多すぎてhttp2対応しても効果が吹き飛びそう
SEO
もともと急にどうこういう話でもないし、そんなに大きなfactorでもないし気にしない。
