どうも！
Ganapatiです。
昨日お知らせしましたように、テストサイトを立ち上げはてなブログを常時HTTPS化することに成功しました。
やった～！＼(^_^)／
（浮かれぽんちで外出したら財布を落とすという最悪な出来事もついてきたのですがね。。。）
それではその手順について解説します。
※なお、この記事執筆時点ではこのブログ自体はまだHTTPS化していません。
目次[表示]
- はてなブログHTTPS化の解説の前に・・・
- はてなブログHTTPS化の全手順
はてなブログHTTPS化の解説の前に・・・
HTTPS化の考え方などについて
まず、そもそも「HTTPS化って何？」「HTTPS化して何の意味があるの？」「なぜはてなブログではできなかったの？」などといった基本的な考え方については本投稿では省略します。
別途解説しますのでそちらで確認してください。
スポンサーリンク
紹介する方法のメリット・デメリット
今回ご紹介するはてなブログをHTTPS化する方法は「はてな」が準備している公式なHTTPS化の手法ではありません。いつまでたってもHTTPS化の準備が進んだというニュースが流れてこないので自分で何とかしちゃいましょうという方法です。
これでWordpressに流れるユーザーが少なくなればと・・・元WPユーザーでWP大好きな私がいうのもなんですが。
具体的にはCloudflare（クラウドフレア）を使います。CloudflareはもともとWEBサイトやアプリのコンテンツを高速表示させるためのCDN（コンテンツデリバリーネットワーク）サービスで、無料で利用できることから世界中に多くのユーザーが存在する超有名サービスです。ご安心を。Wordpressユーザーは特にお世話になっている人が多いですね。
※Cloudflareって何？どういう仕組み？どんな機能があるの？という人はググってください。
今回ご紹介するCloudflareを使用する手法のメリット・デメリットですが
■メリット
- はてなの公式手法を待たずに実現できる
- 無料でできる
- コンテンツ内のHTTP記述部分をHTTPSに書き換え不要
- はてなブログではCDN化されなかったコンテンツがCDN化される
- データの圧縮がされる（表示が多少早くなる）
- はてなではできないその他のメリットがついてくる（後述）
■デメリット
- 独自ドメインでないと使用できない（＝PROユーザー限定）
- サブドメインだけでなくメインドメインもHTTPS化される可能性がある
- Cloudflareのサービスが落ちるとサイトが表示されなくなる
- はてなブログサーバーのIPアドレスが変更されると再設定まで表示されなくなる
- 完全な方法ではない（一部ブラウザで「承認されていないソースからスクリプトを読み込もうとしています」的な表示がアドレスバーの右端に盾マークで表示されます)
- DNS設定等が必要であり初心者は「怖い」「難しい」気持ちになる（やってみると簡単ですが）
その他注意事項
その他の注意事項です。
- HTTPS化する前にRSS購読者向けに設定し直しをブログでアナウンスしましょう（念のため）
- サイトが表示されなくなっても慌てない（DNSを元に戻してしばらくすると復活します）
- アクセスの多い人は少ない時間帯の作業がおススメ
- HTTPS化直後はWEBページの表示が遅くなることがあります
- 公式手法が公開されたら公式手法に切り替えも検討しましょう。相性によっては表示速度が遅いままの可能性があるのです
- 方法を発見して間もないので長期的な運用経験がないため保証できません
- 私はWEB屋ではないので専門用語に間違いがあったらごめんなさい
はてなブログHTTPS化の全手順
それでは、はてなブログのHTTPS化の全手順について解説します。
既にはてなブログ「PRO」ユーザーで既存サイトをHTTPS化する人は⑤からご覧ください。
①～④については他のブログでもいろいろ紹介されていますので詳細な手順はググってください。
なお、⑤から作業完了まで私は30分くらいで済みました。作業自体は単純です。
① はてなブログPROでない人は契約しよう！
無料のはてなユーザー、これから新規ではてなブログを使うユーザーはまずはてなブログPROに契約して下さい。前述もしましたが今回の手法は「オリジナルドメイン」が必須なためです。
お金が出せない、もったいないという人は公式手法が発表されるまで待ちましょう。いつかHTTPS化するはずです。
② オリジナル（独自）ドメインを取得しよう！
※既にはてなブログ用のオリジナルドメイン（〇〇〇.comなど）を取得済みの人は無視して次のステップください。
次にオリジナルドメインを取得しましょう。初めて取得する人はムームードメインやお名前.comがおススメです。レンタルサーバー契約なしでもサブドメインの管理や細かなDNS設定ができます。
取得したらはてなブログ用にサブドメインを作っておきましょう。サブドメインではなくメインドメインをはてなブログに充てたい人は作成の必要はありません。ただし、メインドメインを充てた人はwwwからのリダイレクトの設定をしておきましょう。
なお、前述しましたが今回の手法でははてなブログ用のサブドメインだけHTTPS化というのはできません。メインドメインもHTTPS化してしまいます。これによってメインドメインのサイトに影響が発生して困るという人は専用のドメインを取得してください。それも嫌ならCloudflareの設定でなんとかしましょう。そこの部分は出来そうだという所まで見つけていますが今回検証していないので紹介しません。
③ はてなブログを開設しよう！
次に、はてなブログを開設しましょう。開設したらテスト用に画像付きで1投稿位はしておくと後で表示テストの際便利です。
通常だと開設後様々なデザイン設定などをするわけですが、そんなのはHTTPS化後にしましょう。
④ オリジナルドメインを充てよう！
はてなブログを開設したらオリジナルドメインを充てます。と言っても、はてなブログの管理画面の「詳細設定」からオリジナルドメインを登録するだけです。この段階でのDNSの変更は不要です。
※こんな感じ
⑤Cloudflareに登録しよう！
次にCloudflareに登録しアカウントを開設します。
Cloudflare - The Web Performance & Security Company | Cloudflare
登録に必要なのはメールアドレスとパスワードのみ。
メールアドレス宛に認証メールが届いたら認証用URLをクリックしておきましょう。それで登録は完了！
登録が完了したらCloudflareにログインしてください。（ログイン済みの状態ならそれでOK）
⑥Cloudflareにオリジナルドメインを設定しよう！
ログインしたらオリジナルドメインを登録・設定します。
以下のような入力フォームが表示されているはずなので、ここにドメインを入力し「BeginScan」をクリックます。
ここでの注意事項ですが、wwwも含めた「サブドメイン」を入力してもエラーになるということです。あくまで取得したドメイン（〇〇〇.comなど）そのものを入力して下さい。
入力して問題がなければ1分くらいで登録が完了します。
※登録時に個人情報を入力するかもしれません。昔はなかったのですが・・・。
※プランを選択する際にはもちろんFreeで。
⑦DNSの設定を変更しよう！
⑥が完了すると画面にDNS設定の指示が表示されます。そこに表示された内容に従ってDNS設定画面（ドメイン管理会社やレンタルサーバーの管理画面）で設定をします。
私の場合はこんな感じでした。（エックスサーバーを経由している事例です）
設定の操作手順についてはDNSサービスを提供している会社に聞いてください。。。
DNSって何？AとかCNAMEとか何？って人はググっていただくか今回のHTTPS化に関する考察の投稿でご確認を。
⑧Cloudflareで対象とするブログ（サイト）のドメインを登録しよう！
DNS側での設定が完了したらCloudflareに画面を戻し、次のステップに進みましょう。
次のステップはDNSの変更が浸透したか（有効になったか）の確認です。
一般的には10分～15分くらいかかります。オリジナルドメインでブログを運営して長い人はもっと時間がかかるかもしれません。ひどいときは半日から1日かかることもあるそうです。
浸透するまでは待つしかありません。浸透したら次のような表示になります。
上記のような状態になったら今度ははてなブログにドメインを充てる作業を行います。
まずは
Aレコードに充てるはてなブログサーバーのIPアドレスを調べます。
変わっていなければ「52.69.186.243」のはずですが、実際に調べる際は以下のページに「hatenablog.com」と入力して調べればわかります。
IPアドレスがわかったらAレコードをCloudflareに追加します。valueにはIPアドレスを入力して下さい。
※参考となる図はこの後（サブドメイン～）にあります。
Aレコードを追加出来たら次にCNAMEレコードを追加します。単純にCNAMEを選択しvalueに「hatnablog.com」と入力するだけです。
※注意 必ずAレコードから操作してください。CNAMEレコードからやるとエラー表示されます。またCNAMEレコードのみの設定の場合はサイトが表示されなくなります。
私と同じようにCloudflareでHTTPS化しようとしてできなかったブログ記事がありその内容を参考に今回の方法を考えました。情報ありがとうございました！
サブドメインを充てる人の参考
以下の図を参考にサブドメインをAレコード、CNAMEレコードの順で追加してください。valueは前述の通りです。
メインドメインを充てる人の参考
上記の図の上から4番目のオリジナルドメインのAレコードのvalueに調べたIPアドレスを入力してください。
その次にCNAMEレコードとしてnameに同じメインドメイン、valueに「hatenablog.com」と入力して追加してください。
検証していませんがこれでできるはず。
オリジナルドメインのメールを使用している人への注意事項
大丈夫かとは思いますがレンタルサーバーなどのIPアドレスにMXレコードが向いているか確認しておきましょう。間違っていたりレンタルサーバーを変更したりした場合は修正をしなければなりません。
⑨ブログ（サイト）が表示されるか確認しよう！
⑧が完了したらまずはブログ（サイト）が表示されるか確認してください。表示されるまで5分くらいかかることもあるので焦らず待ちましょう。
⑧の設定がきちんとしていて、かつ、はてなブログの詳細設定画面でも間違いなく登録していて1日経っても表示されないようなときは潔く諦めてDNSを元に戻してください。
⑩HTTPS化し「保護された通信」になるように追加の設定をしよう！
⑨の段階ではまだHTTPS化はされていません。CDNサービスが有効になったというだけです。
まずはCloudflareのダッシュボード上部のメニューから「Crypto」をクリックし「SSL」と表示されたBOXでデフォルトの「Full」から「Flexible」に変更します。（選択するだけで変更されます。Saveなどのボタンはありません）
FlexibleになるとHTTPS化が始まります。
しかしこの段階ではまだ完全ではありません。
実際にはてなブログのアドレスに「https://」を追加して表示させてみましょう。
すると以下のような「ｉ」を丸で囲んだ表示になるはずです。（ＰＣブラウザの場合）
これは「HTTPS接続はできているけれどもSSLが信用できるだけであって全て信用できる状態ではありません」という表示です。HTTPコンテンツが混在しているということです。
実際にChromeのデベロッパーモードで確認してみると何が混在しているのか確認できます。
この状態でも決して悪いわけではありませんが、せっかくなので「保護された通信」という表示を目指しましょう。
そのためにはいくつかCloudflareで設定が必要です。先ほどのCryptoの設定画面に続き次の図を参考に設定を進めてください。※設定不要なところは飛ばしています。
Always use HTTPS
上記のようにoffのままにします。Onが正解のはずですが私の場合はOnにしたらサイトの表示がされなくなりました。Onでもできた！という方がいればコメント下さい。
HTTP Strict Transport Security (HSTS)
上記の図を参考に設定してください。取りあえずStatusは必ずOn、Subdomainsはサブドメイン使用者はOnにしておきましょう。
HSTSって何？という人はググってください。ひと言でいうと「http」でアクセスした人は「https」に直してアクセスしてくださいねってブラウザに指示する機能です。httpsにリダイレクトする機能ではありません。
Authenticated Origin Pullsなど3項目
特に設定は不要ですが詳しい方は変更しても可。
Automatic HTTPS Rewrites
これは超大事な設定。絶対Onにしてください。忘れずに。これによってわざわざ記事や設定内のhttp表記部分をhttpsにかき直さなくても良くなります。
ここまでの設定でようやく「保護された通信」表示にかわります。（設定後１分くらい時間がかかるかも）
cloudflare上ではこんな感じになって入ればOKです。
⑪Cloudflareのその他の便利な機能を設定しよう！
せっかくなのでCloudflareの便利機能を確認・設定しておきましょう。
Speedメニューから
AutoMinify
こんな感じでデフォルトで圧縮してくれるようになっています。設定はこのまま。
残念ながらCloudflareでは図までは自動で圧縮してくれないようです。まあ、はてなブログにアップした画像ははてなのCDNから配信されるので関係ないですが・・・。
Enable Accelerated Mobile Links
Cloudflareを使用する場合はココからAMPに対応したほうが良いかもしれません。
Rocket Loaderなど
このあたりもデフォルトのままでOK。モバイル専用にサブドメインを設定している人はココから設定できるのですが、そもそもはてなブログはそういうモバイル設定になっていないので意味はないです。
Cachingメニューから
Purge Cacheなど
Purge CacheはCloudflareにキャッシュ(保管)されたデータをクリアする機能です。サイトのCSSやテーマ（つまり設定画面上の操作）を変更した場合はここで一度クリアしてください。
クリアしなくとも時間と共に新しいデータに置き換わりますが表示崩れなどを防ぐ意味でもクリアすることをお勧めします。Wordpressはこのあたり自動化できるのですよねぇ。。。
Browser Cache Expirationなど
Browser Cache Expirationは1か月前後ぐらいに設定しておくことを個人的にはお勧めします。表示速度が速くなります。
AllwaysOnlineははてなブログのサーバーがダウンもしくはメンテ状態になったときにCloudflareだけでサイトを表示させる機能です。
PageRulesメニュー
ページ単位で細かな設定ができます。図だけ載せておきます。
その他の設定としてはこんなところです。有料版であればもっと素晴らしい設定がありますが、まあそれは好みの問題です。
この方法を実践した感想や、残された問題（冒頭のデメリット欄で紹介）を解決された方など是非コメント下さい！
はてなブログのHTTPS化は難しくない！丁寧に設定しよう！
※この記事が役に立ったというブログ飯実践者の方いたら、欲しいものリストから恵んでくれると嬉しいです。ぜいたく品ばかりですが・・・。
Amazon CAPTCHA