Googleが「HTTPS everywhere」を提唱していることなどが影響して、HTTPSで通信できるようにWebサイト全体を独自ドメインに対してSSL/TLSによる暗号化を行い、運用をスタートしている様子がちらほら私の周りには増えてきました。
Google ではさらにもう一歩踏み込んで、数か月前の Google I/O では、「HTTPS everywhere」をウェブで提唱しました。
ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。
私はしばらく動向を伺っていましたが「Webサイト全体をHTTPSへ切り替える流れは今後はより加速すると考えてもいい」と判断をし、このブログも全体をHTTPSで通信できるように切り替えました。
これからは「https://www.imamura.biz/blog/」でアクセスしてください。
切り替え作業中には「ああ、こんなことに気を付けないといけないんだな～」と思うこともいくつかありました。また「既存のWebサイトをHTTPからHTTPSへ切り替える」対応を知っておくと、新しく構築するWebサイト設計などにも役に立ちそうです。そんな理由から、以下に作業メモを書きました。
「HTTPSへの切り替えを検討中」の方や「HTTPSへの切り替え作業中にうまくいかない」方などいらっしゃいましたら、一例としてご参考ください。
「HTTP」から「HTTPS」へ切り替える流れ
いろいろやり方はあると思いますが、私は以下の流れでHTTPSへの切り替え作業をしました。
- 外部から読み込むURLを変更
- SSL証明書の取得申請・インストール
- アップロードされたメディアのURLを変更
- WebサイトのURLを変更
- 「HTTP」から「HTTPS」へリダイレクト
- 念のためもう一度「混在コンテンツ」のチェック
- Google Search Console（グーグル サーチコンソール）の登録
- Google Analytics（グーグル アナリティクス）の設定変更
順番に概要を解説しましたのでご参考ください。「すでにどこかのサーバーを使っていて、Webサイトを公開している」という前提にしますね。
1.外部から読み込むURLを変更
HTTPSに切り替える前にやることがあります。まずは、外部から読み込むURLを変更しましょう。HTTPからの読み込みをHTTPSから読み込むようにURLを変更します。
なぜURLを変更するの？
HTTPSページにHTTPで読み込んでいる画像やスクリプトファイルなどがあると「コンテンツが混在している状態」になります。
「コンテンツが混在している状態」は安全な通信を行っているHTTPSページに対して安全性を保障できるかどうかわからない画像やスクリプトを読み込んでいる状態です。「安全にサイトを閲覧してもらおう」ということでHTTPSに切り替えているのに「コンテンツが混在している状態」は、その主旨から外れてしまいますよね。なのでURLの変更が必要です。
どんなURLを変更すればいいの？
Webサイトの数だけデザインや記事などが違うように、運営状況も異なります。つまり「どんなコンテンツをウェブサイトで使用（掲載）しているのか」によって、変更しなければいけないURLが違います。一例として、私が変更したURLを以下にまとめましたのでご参考ください。
| 変更前 | 変更後 | |
|---|---|---|
| Dropbox | http://dl.dropbox.com | https://dl.dropboxusercontent.com |
| http://db.tt | ||
| GoogleAdsense | http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js | //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js |
| はてなブックマーク | http://b.st-hatena.com/js/bookmark_button.js | //b.hatena.ne.jp/js/bookmark_button.js |
| amazonの商品画像 | http://ecx.images-amazon.com | https://images-na.ssl-images-amazon.com |
| WordPress関連 | http://i0.wp.com | //i0.wp.com |
| Twitterのプロフィールアイコン | http://pbs.twimg.com | //pbs.twimg.com |
| slideshare | http://www.slideshare.net | 埋め込みたいスライドのURLにアクセスして、「share」→「Embed」から埋め込みコード取得 |
| jsfiddle | http://jsfiddle.net | //jsfiddle.net |
「HTTPS」で読み込まれているものは変更しなくてもOK
私の場合は、以下の埋め込みコードはもともと「HTTPS」で読み込まれていたので変更なしで大丈夫でした。もし「HTTP」で読み込まれている場合は「HTTPS」で読み込むようにURLを変更してください。
- codepen
- GitHub
- YouTube（https:からはじまるもの）
- googlemap
- googleストリートビュー
2.SSL証明書の取得申請・インストール
次に、SSL証明書の取得やインストールを行います。HTTPSに切り替えられるサーバーなのかどうか確認は済んでいるものとします。
HTTPSに切り替えられるかどうかわからない場合は、聞く
レンタルサーバー会社でサーバーを契約をされている方は、SSL証明書について公式サイトなどで情報を公開している場合が多いです。調べてもどうしてもわからなければ、問い合わせ窓口などがあるはずですので聞きましょう。
また、サーバーにSSL証明書がインストールされていない場合は、SSL証明書を取得してインストールする必要があります。
SSL証明書の取得やインストールってどうすればいいの？
巷にはSSL証明書を発行してくれる「認証局」がいくつかあって、認証局ごとにブランドやグレード（class）が設定されていることが多く、販売価格はそれぞれ違います。
また、レンタルサーバー会社などではSSL証明書の取得やインストールを一部代行してくれるところもあります。「最初の1年間は無料」「今なら○○%割引」などといったキャンペーンを行っていることもあるので、キャンペーン期間中に申し込みをするとオトクですね。
ちなみにこのブログは今のところエックスサーバーに置いています。エックスサーバーでは管理パネルからSSL証明書の取得申請を行う事ができ、サーバーへのインストールも行ってもらえたので手間が減りました。
私は過去に社内システム構築の一環としてレンタルサーバー事業に関わったことがあります。自社サーバーを構築して、その際にHTTPSでも通信できるようにチューニングを行い、CSRを作成して認証局に取得申請、インストールなど一通り行った経験はあります。その時の手間を考えると、ずいぶんラクな方法もあるなぁと思いました。
共用SSLと独自SSLは全く別物なので注意
レンタルサーバー会社によっては「共用（共有）SSL」を提供しているところもありますが、利用するのは共用SSLではありませんので注意してください。HTTPSに切り替えたいドメイン（このブログだと「imamura.biz」）に対してSSL証明書の申請をしましょう。独自ドメインに対してSSL証明書を取得するので「独自SSL」という呼び方をすることもあります。
申請するSSL証明書は「名前ベース」か「IPベース」どちらか
サーバーの構成によって変わると思います。私は名前ベースのSSL証明書をインストールしました。わからない場合はサーバー管理者かレンタルサーバー会社に問い合わせましょう。
SSL証明書の取得・インストールまでの流れ
だいたい以下のような流れです。
- SSL証明書取得申請
- 認証局から承認メールが届くので許可する
- SSL証明書取得完了
- サーバーにSSL証明書をインストール
SSL証明書の取得完了まで数日かかることがあります。私は申請からインストールまで1日弱かかりました。
SSL証明書をインストールするとこんな状態になります
私の場合を例にしますが、SSL証明書をインストールすると「http」「https」どちらからでもアクセスが可能になりました。また、エックスサーバーではSSL証明書の取得の際にコモンネームを「www.imamura.biz」と「www」付きで申請したため、「https://www.imamura.biz/」「https://imamura.biz/」どちらでもアクセスが可能となりました。
と、ここまででSSL証明書取得やインストールの流れはおおよそ理解できると思います。エックスサーバーだと以下のページにSSL証明書について書かれていますので、あわせてご参考ください。
3.アップロードされているメディアのURLを変更
このブログはWordPressで作られていますので、WordPressでHTTPSへ切り替えをする場合を例にしますね。（WordPressで作ってない方も共通して行う作業もあるのでご参考ください）
「HTTP」「HTTPS」どちらでもアクセスができる状態になったら、WordPressのメディアからアップロードされている画像や動画ファイルのURLを変更します。
「http://www.imamura.biz/wp-content/uploads/～」とHTTPで読み込んでいるURLを「https://www.imamura.biz/wp-content/uploads/～」へ変更しましょう。
4.WebサイトのURLを変更
今回はWorPressを例にしています。WordPressの管理画面から「設定」→「一般」を選択して「一般設定」ページを開きます。
- WordPressアドレス（URL）
- サイトアドレス（URL）
の値に注目しましょう。
以下のように「HTTPS」で通信できるようにURLを変更します。
URLを変更して「変更を保存」すると、一旦WordPressの管理画面からログアウトされるので「HTTPS」で再度ログインしましょう。
5.HTTPからHTTPSへリダイレクト
今回は「.htaccess」が使える場合を例にしますね。「.htaccess」ファイルにリダイレクトルールを追記してサーバーにアップロードします。(.htaccessは改ざん防止のためパーミッションを「404」や「604」など適切に設定しておきましょう)
リダイレクトは「301」にしておこう
リダイレクトにも種類があって、一時的なリダイレクトをさせたいなら「302」で、この先ずっとリダイレクトさせたいなら「301」でリダイレクトを行います。
今回の場合はずっとリダイレクトさせておきたいので、「301」でリダイレクトルールを追記します。以下はリダイレクトルールの例ですのでご参考ください。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
WordPressをインストールした際に作成される「.htaccess」にリダイレクトルールを追記する場合は「# BEGIN WordPress～# END WordPress」の中には書かないように注意します。（パーマリンクの構造などを変更した際にWordPress側で「# BEGIN WordPress～# END WordPress」の中身を書き換えて、追記した部分が消えてしまうことがあるためです）
WordPressで「HTTP」から「HTTPS」にリダイレクトする「.htaccess」の記述方法は調べるといくつかあるみたいですので、よりよい方法がありましたらご教示ください。
6.念のためもう一度「混在コンテンツ」のチェック
HTTPSに切り替える前に行ったURL変更以外にも、把握していないところで混在コンテンツがあるかもしれませんので、チェックしましょう。
実際私は把握してなかったようなことがいくつか後々出てきました。（現在対応中のものもあります）
7.Google Search Console（グーグル サーチコンソール）の登録
Google Search Console（グーグル サーチコンソール）で「HTTPS」で新しくWebサイトの登録を行い、サイトマップを送信します。このブログを例にすると「https://imamura.biz/blog/」で登録すればいいですね。
徐々にインデックスに登録されます。
8.Google Analytics（グーグル アナリティクス）の設定変更
Google Analytics（グーグル アナリティクス）にログインして、「アナリティクス設定」→「プロパティ設定」のページ中にある「デフォルトのURL」を「https://」に変更しました。
HTTPSへの切り替えで行った主な作業は以上です。ここから以下は、HTTPSへの切り替えに役立つツールの紹介や、HTTPSへの切り替えによる「メリット」「デメリット」など、考え方について中心に書いています。
HTTPSへの切り替えに便利なツール2つ
HTTPSへの切り替えで手間がかかる作業は「HTTP」「HTTPS」の混在コンテンツのチェックだと思います。チェックが幾らかラクになるツール2つをご紹介しますので、活用ください。
1.Google Chromeの「デベロッパーツール」が便利
Google Chromeの「デベロッパーツール」を開いてコンソールタブを見ると、混在しているコンテンツがわかります。
混在しているコンテンツがあると、以下の画像のようなメッセージが表示されます。
画像中にある「Mixed Content」とは、そのまんま「コンテンツが混在してますよ～」という意味です。このような表示がある場合はHTTPSで読み込むようにURLを変更しましょう。
2.一括置換のプラグインを使うと便利
1ページずつチェックしてURLを変更するのは大変ですよね。なので、便利なWordPressプラグイン「Better Search Replace」を使うと条件にあった文字列を一括で置換できるのでラクです。
「Better Search Replace」の画面
「Search for」に置換前の文字列、「Replace with」に置換後の文字列を入れます。「Select tables」で置換の対象としたいテーブルを選択（複数可）します。
「Run as dry run」とは、「予行演習」や「リハーサル」のような意味です。置換する前に、条件に合ったものを事前に把握したい場合はチェックを入れておきます。実際に置換する時はこのチェックを外しましょう。
念のため、一括置換する前にデータベースのバックアップは取っておいた方がいいです。
HTTPSに切り替えたことによる「メリット」「デメリット」ってあるの？
ここで、HTTPSに切り替えたことによる「メリット」「デメリット」について考えてみました。「HTTPSに切り替えることによって、どんな影響が出るの？」と私も考えたことがあります。
もしHTTPSへの切り替えをしようかどうか判断に迷っている方などいらっしゃいましたら、ご参考ください。
HTTPSに切り替えたことによる「メリット」
ユーザーに安全なWebサイトを提供できる
やはりこのメリットが大きいのではないでしょうか。「安全性についても配慮している」という取り組みは、Webサイトの信頼性を高めることにもつながり、よりWebサイトを活用してくれるきっかけにもなります。
また、Googleがランキングシグナルに使用すると表明していること、「HTTPS everywhere」の提唱、Googleが都度HTTPSに関する話題に触れている様子を見ると、今後HTTPSでWebサイトを運用していくことによって何かしら有利に働く可能性はありそうです。（あくまで予想です）
2018/05/21追記
Webブラウザーによって様々な表示がされますが、Google Chromeでは「HTTPSに変更してね」とより強く、視覚的に促されるようになりました。私がこの記事を書いた当時よりもさらに「HTTPSへの対応が重要となってきた」と言ってもいいのではないかと思います。
HTTPSに切り替えたことによる「デメリット」
SSL証明書の取得やインストール、HTTPSへの切り替えにかかるコスト
HTTPからHTTPSへ切り替えるにしても、初めからHTTPSでWebサイトを構築するにしても、SSL証明書の取得やインストール作業にかかるコストは必要ですね。
ソーシャルでのシェア数がリセットされる
FacebookやGoogle+など、ソーシャルでのシェア数を引き継ぐなら「HTTPS」に切り替える前に全ページに対してソーシャルでのシェア数を取得してDBに保存しておく、というのも一つの方法ですね。私の場合は、「301」でリダイレクトを行う事によってページ評価を引き継ぐだけで十分だと判断し、シェア数は引き継がないことにしました。（Twitterのツイート数は試験的に引き継いでいます）
HTTPSに切り替える際には、1,000はてぶや2,000ツイート、3,000いいね！など、とても多くソーシャルでシェアされたものもあったな～、なつかしい・・・と振り返っていました。
HTTPSに対応していないURLは読み込み「できない」
ASPから提供されているAPIや配信広告などがHTTPSに対応していない場合は混在コンテンツとなってしまうので、読み込みできないです。「HTTPSの対応はしてくれるのかどうか」問い合わせをすると、対応中という返事を頂くことは多いです。私個人的にはどんどん対応して頂けるとありがたいです。
RSSフィードのURLが変わります
RSSフィードのURLが変わりfeedlyの購読URLも変わりましたので、購読者数がリセットされました。もしこの機会にご登録いただける方はよろしくお願いします。よろしくお願いします・・・！
- RSSフィードのURL
- FeedlyのURL(以前のURLでも購読は可能ですが、もしよろしければ新しいURLで購読いただけますと嬉しいです)
まとめ
「HTTP」から「HTTPS」への切り替えについて一通りの流れを書きました。「結構やらなきゃなんないことあるな～。手間だなぁ」と思う方もいらっしゃるかもしれませんが、もともとHTTPSでWebサイトを作っていれば「URLの変更」「シェア数の引き継ぎ」「RSSフィードのURL」などは考える必要のないことです。
「SSL証明書の取得・インストール」さえできれば、後は混在コンテンツにならないようにWebサイトを構築していけばいいだけです。ですので、原則としてHTTPSでWebサイトを作ることを前提とする考え方がより広がってもいいと思います。私個人的には、ですが。
また、Webサイト制作を仕事としている方は、ディレクション段階などで「SSL証明書とは何か」「HTTPSにすることで、どういう意味があるのか」「HTTPSでWebサイトを構築するにはどういった作業が必要なのか」など、このページで紹介したような内容が必要になってくることも往々にしてあるでしょう。依頼主にはいつでも説明できるように準備をしておくといいですね。
もし「HTTPS」への対応を依頼されることがあれば、見積項目として明記したほうがいいです。「HTTPSにするにはこんなことをするよ。だから、これだけのコストがかかるよ」など、コストについて伝えることを忘れないようにしましょう。
逆に対応を依頼するのではなく内製の場合は「こういった作業や考え方があるんだなぁ」と、少しでもご参考となる箇所がありましたら幸いです。
このページを共有する