更新日:2018年2月10日1はてなブックマーク2facebookTweettwitter送るline皆さんこんにちは、伊達あずさです。トラブルがある毎に更新されるこのカテゴリーなわけですが・・・今回はぽっぽブログをSSL化(https化)させた時に起こってしまった問題について書きたいと思います。Layerの略でインターネットにおけるデータの送受信を暗号化する仕組みのことです。詳細な個人情報やクレジットカードの情報などをやり取りする必要があるサイトなどで、悪意のある第三者からユーザを保護するために重要な意味を持っています。いえ、ぽっぽブログではクレジットカードの決済などは当然行っていませんし、詳細な個人情報を取り扱ったりしているわけでもありません。して突然SSL化(https化)させようと思ったのか・・・それは、私がやった方が良いと言われていることをやらずにいるのが嫌な性分なせいです!!・・・というのが本当の理由ではあるのですが、建前としてはSSL化(https化)がGoogleの検索順位に影響するという点です。Googleは質の高いサイトが検索結果に高い順位で表示されることを目指しているわけですから、その質の中に「安全性」が考慮されるというのは何らおかしな話ではありません。いうか、何より検索結果に影響するとGoogleが自ら発表したわけですから、確実性が高いことは間違いありません。(影響度合いはまた別の話ですけど・・・)正直SEO対策という名目で記事の内容を弄ったりするのは、本位ではないのですが、ブログの安全性によって評価が得られるということあれば、それもやぶさかではない・・・っていうか内容は弄らないし!ということで、今回チャレンジするに至った次第です。SSL化(https化)するにあたって必要な手続きSSL化(https化)するためにはSSLサーバー証明書なるものを取得しなければなりません。これはセキュリティのグレードによってピンからキリまであり、価格もそれ相応になります。それこそクレジットカード情報などを取り扱うサイトでは高いグレードの証明書が必要になりますが、普通のブログ程度であれば、そこまでグレードにこだわる必要も無いでしょう。きを行ってくれるレンタルサーバーも増えてきているんです。各レンタルサーバーにおけるSSL設定法エックスサーバーさくらサーバーロリポップWordPressの設定を変更レンタルサーバーでSSL設定を行い、しばらくまってhttpsで自分のブログにアクセス可能になったらいよいよWordPress側での設定を開始します。言うのも、現状ではhttpから始まるページとhttpsから始まるページの2つにアクセス可能となってしまっているため、折角SSL化したのにhttpsで始まるページの方に閲覧者を誘導できないのですよね。それに、WordPressが各記事をhttpの方で認識しているため、WordPressが自動で張っているリンクが全てhttpのままになってしまうのです。検索エンジンから2つのページが別のページと判断されてしまってはこれまでの検索順位を引き継げなくなってしまうかもしれません。設定自体は非常に簡単。(URL)」に書かれているhttp:の部分をhttps:に修正し、変更を保存します。(恐らくこの時、httpsの管理画面に再ログインを要求されるでしょう)これで、WordPressによって自動で張られているリンクは全てhttpsに置き換わります。記事を覗いてみると、パーマリンクの部分がhttpsに変わっていることが確認できると思います。これでWordPressはhttpsのページをメインであると認識したわけですが、これだけだと検索エンジンや過去のページリンクなどで直接各記事にhttpでアクセスされた場合、httpのページのまま閲覧できてしまいます。.htaccessを使ってhttpsにリダイレクトするhttpでのアクセスを全てhttpsにリダイレクトするため、WordPressのルートフォルダにある.htaccessの中に以下を追記します。[L,R=301]</IfModule>こんな感じにしておけば、httpで張られているリンクを辿ってたどり着いたとしても、自動的にhttpsにリダイレクトされます。ちなみに[L,R=301]の301は301リダイレクトを示していて、ページのURLが恒久的に変更していることを伝えるもので、これによりページランクが変更後のURLへと引き継がれるそうです。記事内の(画像)URLをhttpsに変更するこれで、ページへのアクセスについてはhttpsにリダイレクトされるようになりましたが、実はこれだけではまだ不完全です。httpsで表示されている画面の中にhttpの画像データが混じっていると「ページの一部が安全ではない」と判断されてしまうのです。そこで、全ての記事(および固定ページ)内に記載されている全ての画像ファイルをhttpsに変更します。自分のサイトの画像データについては「http:」→「https:」と書き直すだけでOKなのですが、他のサイトから画像を張っている場合は単純にhttpsにしたからと言って必ずしも読めるとは限らないので注意が必要です。リダイレクトされるとはいえ、折角なのでついでに内部リンクも全てhttpsに書き変えてしまいましょう。・・・と、言うのは簡単なのですが、このぽっぽブログですら1000近い(2017/06/08現在)記事数があります。これだけの数の記事の中にあるhttpの記載を全てhttpsに変えるとなると・・・考えただけでも悪寒がします。Replace」というプラグインです。これを使えば、全ての記事(および固定ページ)内にある文字列を自由に置換することが可能になるのです。導入法・使い方はいたって簡単。Replace」で検索してみましょう。するとこんな感じのプラグインが検索にひっかかるので、これをインストール、有効化しましょう。Replace」が追加されているはずです。Replaceの使い方はとてもシンプル。by:に置換後の文字列を記入し、In:の中から置換対象(Postは記事、Pagesは固定ページ)をチェックした上でGo!ボタンを押すだけ。これで、全ての記事(および固定ページ)内に書かれているhttp:がhttps:に置換されます。慎重派の人は置換前にちゃんとデータベースのバックアップを取ってくださいね!ただし、ウィジェットで記載されている記述やメニュー内にあるカスタムリンクなどは置換してくれないのでそこは素直に手作業で修正しましょう。広告がSSLに対応しているか確認する広告によってはhttpsでアクセスすると表示されなくなってしまう場合もあります。Amazonアソシエイトのタグなどは、ごく最近の物(2017年になってからのものは大丈夫かな?)であれば問題ありませんが、古いタグのままだとブラウザによっては表示されなくなってしまいます。大変ですが、新しいタグに張り替えなくてはなりません。WordPressの環境次第では問題が発生する場合があるこれでめでたく終了!思っていたより簡単じゃないですか!・・・と、なればよかったのですが、ぽっぽブログの場合、そう簡単には終わらなかったのです。・・・これでめでたくSSL化(https化)することには成功したのですが、それによって思わぬ問題が発生してしまったのです。ケース1:画像が表示されなくなることがある何と言ってもたちが悪いところは「ことがある」ということなんですよね。テスト時には気づかなかったのですが、実際にブログをSSL化(https化)してみると一部画像が表示されない記事があったのです。Load」と言うプラグインにありました。Loadは実際に画面をスクロールするまで、画像の読み込みを遅延させるプラグインで、画像が多く使われている記事などでその威力を発揮します。・・・httpsとなったページでは上手く動作してくれないみたいなのです。表示されたりされなかったりしていたのは、画像数や文字数などによって画像の配置位置が変わっていたことによるものだったみたいです。原因に気づいてしまえば何てことはないのですが、気づくまでが大変なんですよね。その他にも管理画面で表示されるべき情報が表示されなくなるケースもありました。Cacheのダッシュボード」が表示されなくなりました。どちらも、ページが表示された後に読み込むタイプですね。Loadと同じ現象なのかも)ケース2:動作しなくなるプラグインがある記事を書く際のクイックタグを簡単に追加できるようにする「AddQuicktag」と言うプラグインを使用していたのですが、これが動作しなくなりました。このプラグインを外せばデフォルトのクイックタグは復活しますが、カスタマイズしたクイックタグを追加したい場合には、自分でfunction.phpにクイックタグ追加用のコードを追加しなくてはなりません。その他にもちょっと変わったケースでは、「ビジュアルリッチエディター」が使用できなくなることがあるようです。この「ビジュアル」のタブが押せなくなってしまうんです。これは必ず再現するという訳でもないようで、英語版ぽっぽブログ(作成中なんですが)の方ではちゃんと使えたんですよね。日本語版WordPressに関係したものなのか、その他何らかの環境依存によるものなのかは不明ですが、httpに戻すとちゃんと機能することだけは確かでした。ちなみにビジュアルリッチエディターが動かない状況では、クイックタグもまったく表示されなくなってしまうため、非常に不便!この状況を回避するためには、ユーザーの個人設定から、「ビジュアルリッチエディターを使用しない」にチェックを入れる必要があります。これでビジュアルリッチエディターは使用できなくなるものの、クイックタグだけは復活します。問題も発生してしまったわけなのです。してJSファイルが読めなくなってるのかも(2018/02/10追記)と、上記のような2ケースの問題が発生してしまったわけですが・・・実はこれには当時の私が気付かなかった設定ミスがあったんです。env=ok_url</Files>実はこんな感じでJSファイルをぽっぽブログのドメインからしか読めないようにhtaccessファイルに記載しちゃってたんですよね。ok_url」とすることで上記2つのケースは改善されました。サーバーによっては初期設定で上記記述がされている場合があるので、途中からSSL化した場合は要チェックです!管理画面だけhttpにするという選択でも、ケース1の一部(管理画面の画像)とケース2に関しては別の方法で回避することも一応できるんです。ブログ自体はSSL化(https化)しつつも、WordPressの管理画面だけhttpにすることで、ダッシュボード等の表示やhttps環境下では動作しないプラグインを復活させることができます。HTTPS」というプラグインを使ったやり方をご紹介してみますが、何分古いプラグインなので(アップデートが再開されたみたいです!(2018/01/26更新))、使用する際は十分にテストしてからにしてくださいね。HTTPSはここからダウンロードできます。ダウンロードしたファイルを解凍するとできる「wordpress-https」をWordPressのインストールフォルダ「/wp-content/plugin/」以下にアップロードします。その後、プラグインを有効化すれば導入はOKです。(URL)」はhttp:のまま変更する必要はありません。.htaccessを使って301リダイレクトさせる必要もありません。いえば、記事内の内部リンクをhttpsに書き変える必要すらありません。Load」を使っていた場合は外してくださいね。(ちゃんとJSファイルが読めるようになっていれば大丈夫でした!(2018/02/10追記)やることは2つ。管理画面に新たに追加された「HTTPS」という項目をクリックします。Exclusivelyという項目にチェックを入れる。これをチェックしないと、管理画面からブログを見た際に管理画面に戻ってこれなくなる。Filtersにhttpsで接続したいページの上位フォルダを指定する。ブログの場合は全てのコンテンツが「poppoblog」以下にあるため、「/poppoblog/」と設定しています。これだけです!こうするだけで、記事内にある自サイトのhttpは全てブラウザに表示される際、自動的にhttpsに書き換わり、httpでアクセスされたものは全てhttpsにリダイレクトされるのです。管理画面にはhttpで入れるため、プラグインも不具合を起こしません。post」にチェックすればそのページだけをSSL(https)対応させることもできます。Filtersを使う必要はありません。HTTPSを使うことで、非常に簡単かつ安全にSSL化(https化)させる事が出来ます。いった重要な部分をあまりプラグインに頼ると、WordPressがバージョンアップして行った際に問題が起こってしまうかもしれません。それに、本来は管理画面だってhttpsでアクセスした方が良い(特にログイン時)わけですから、これは最終手段としてご検討ください。SSL化(https化)自体は簡単だったのですが、その後の問題解決に物凄く時間がかかってしまった伊達あずさがお送りしました。POPPOのプログラム兼システム担当です。ウォーキング・デッド大好き!ダリルかっこいいよっ!主食はキノコです。コメントをキャンセルメールアドレスが公開されることはありません。*上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。最近のコメント伊達あずさコメントありがとうございます。ファミコンのBGMって音数が少ないながら、耳に残る曲がとても多いですよね。BGMの事を思い出しながらお読みいただければと思います。ロマンシアのプレイ日記1:レトロゲーム(ファミコン)カリカリ梅いつも楽しく見せて頂いてます。町の曲がすごくいい曲だ!と感動していたのを思い出します。思えばあれがゲームの曲で感動した最初の出来事だったかも。この先も更新楽しみにしています。ロマンシアのプレイ日記1:レトロゲーム(ファミコン)伊達あずさコメントありがとうございます。もって、ファン王子は第8王子だったのですね。お兄さんが増えちゃいましたね。そんなにお兄さんが沢山いるからこそ、自由に旅とかできちゃってるのかもしれませんね。ロマンシアのプレイ日記1:レトロゲーム(ファミコン)romanうわー、ファン・フレディ第8王子でした。旅の中で偶然ロマンシアに辿り着いたことになっているのですが、他の王子が生死すら不明なので王位継承争いでの暗殺を恐れて行方を眩ましてるのかもしれませんね。むむむ・・・私の考えた捏造ストーリー上、それはちょっと都合が悪い事実でした。