サイトSSL化しました、導入時の問題とその解決ヒント(素人編)

CDディスクと南京錠
CDディスクと南京錠

自サイトにSSL通信環境を取り入れました。開設当初から設定していれば楽だそうですが、通常は、ブログを開始、その後、導入という方がほとんどだと思いますので、私と同じようなレベルの方のお役に立てばと思い、健忘録を書きました。素人による、素人のためのSSL導入あれこれです。

大変やわ、このSSL設定は

素人以上の知識、スキルをお持ちの場合は、この記事を読む必要はありません。おそらく、もっとスムーズに問題点を見つけて、サクッと改善されると思うのですが、コードを書けない、理解できない方は、ググりながら苦労されると思うのです。そんな時に参考になればという程度ですから、専門の説明サイトではありません。基本は葬儀ブログですので(汗)

で、とりあえずSSL化できたので、今回の経験が、皆さんの今後のお役に立つかもしれないかもと、健忘録として、素人による、素人のための独自SSL導入覚え書きを作成しました。

まずはググってみた

いつもお世話になっている、テーマ作者のわいひらさんのSimplicityのフォーラムで、「Simplicity の SSL化について」のトピックなどや、サイト上のあらゆる知恵を集めても、
この設定は一筋縄ではいかなかった。

三日坊主のようなサイトを運営上、SSL化するメリットがそれほどはないと思うのですが、先へ進むステップの一つとして、まずは、導入、運営コストの低いSNI SSL(ネームベース)から、チャレンジも兼ねて暗号化通信環境を取り入れようとやってみたのです。

サイトの閲覧やフォーラムなどでは、このSSL通信がある事によって、ある程度の信用性も高まるでしょうし、つまらない事かもしれませんが、「私は、アフィリエイターではありませんよ、ブログ記事、真剣に書いてますんで!」との意思表示が、私の中ではあの小さな鍵マークかもしれません。(コンテンツが一番大事ですが…)

わいひらさんのフォーラムでサポートをされている、Hidekichiさん(この方、スーパーサポーターです)曰く、

こういったこともあるので、基本的にssl化は後からせずに、最初からsslにしてある状態の環境で始めるほうが何かとよいですね。まぁGoogleもsslうんぬんと言ってますが、個人的にはまだちょいとsslは早いんじゃなかろうかと思っていたりもします。http/2が本格始動してからでも十分かと。

全くその通りで、手強いやつです。この独自SLLちゅうのは。

素人による、素人のための落とし穴に入らないポイント

通常以上のスキルをお持ちの方は、ローカル環境でXAMPPなどを使用して、「これ、使ってみたらどうやろか」とか、「phpファイルを変更したけど試してみよう」なんて事を検証してから、サーバーへアップロードして書き換えたりされます。

私たち素人は、XAMPPをインストールしてもとっつきにくく、私も放置状態です。いきなり運営しているサイトにライブで変更を加えようとします。(余談ですが、Mac環境なのでFileMakerは理解できるが、PowerPointは大嫌いみたいな感じですかね。どちらもデーターベースソフトながら、なぜか片方は使えない)

これにより、例えば不具合が生じるとサイトが表示されなくなる現象がおきますが、この時に訪問されている読者はびっくりするでしょうね。いきなりグルグルとなり、ページが表示されない。さっきまでリンクが飛んでいたのに、404エラーなんて出て、ページが見つかりませんなんて言ってくるんです。

私も、数々の無限ループを生み出しながら、サイトを訪問してくださった方に迷惑をかけながらやっていますが、このようなリスキーな環境で、それでも変更してやるぜ!という素人のための覚書です。

まずは、独自SSLの申請

独自SSL申請からサイトへ導入まではそれほど難しいものでもありません。一部、.htaccessへの追加記述があるのでバックアップをとり忘れないよう気をつけてください。また、今回はエックスサーバーでのステップです。お使いのサーバーにより環境が違うので、それぞれ確認をお願いします。

【当サイトの動作環境】

エックスサーバー:プラン10

WPバージョン:常に最新(新しいもの好きだから。これもバックアップを取ってから更新するのがベターなんでしょうが、ま、信用してとらずにやってますね…)

テーマ:Simplicity(わいひらさん作)いつもありがとうございます。

使用プラグインによる影響:内部SEO施策やOGP情報などはテーマデフォルト状態で使用しています。また、テーマと相性が悪いとされるプラグインは干渉を避けるため使用していません。他は多数使用していますが、特に問題なくクリアしています。

作者:葬儀の事は分かりますが、システムについては手探り状態。ブラインドタッチは独自のスタイルを織り交ぜてくるため、時折、¥¥¥¥なんて打っている。あと、ビールが記事を書く原動力になっている。

まず、サーバーでの申請を行います。

オプション独自SSLのお申し込み手順 | レンタルサーバー【エックスサーバー】
レンタルサーバー「エックスサーバー」でオプション独自SSLをご利用いただくための手順のご案内です。エックスサーバーでは有料の「オプション独自SSL」のほか、無料・無制限に利用可能な「無料独自SSL」も取り扱っています。

エックスサーバーのインフォパネルから追加の申し込みを選択し、「SSL新規取得」から申し込みます。

エックスサーバー操作パネル写真
エックスサーバー操作パネル写真

エックスサーバーSSL設定画面
エックスサーバーSSL設定画面

「IPアドレスベース」なのか「SNI SSL(ネームベース)」にするのかどうする?と聞いてきますが、その違いは、SSL通信に対応するブラウザの違いと、ネームベースではhttpsだけ使用可能で、他の機能では使えないと言う事です。

SNI SSL(ネームベース)」とは、SNI(Server Name Indication)を利用したSSLのことです。
従来のIPアドレスを必要とするSSLの設定とは異なり、SSL専用のIPアドレスが不要となるため、SSL証明書導入におけるコストを大幅に削減することが可能です。

現在では利用されているほとんどのWebブラウザが「SNI SSL(ネームベース)」に対応してきたことから、注目が集まっています。

次にコモンネームの申請を間違わないことが注意点です。三日坊主は、最初の申し込みの際にはこれを間違いました。

対象サーバー名を選択するところと、コモンネーム
(SSLを利用するドメイン名もしくは、サブドメイン名)を選択するところがあります。

エックスサーバーコモンネーム画面
エックスサーバーコモンネーム画面

ここで対象サーバーID(サーバー登録時のもの)を複数お持ちの方は選択するのですが、私の場合は一つなので間違えない。次に、コモンネームのところに登録しているドメインの数だけWWW有り無しのドメイン名が出てくるのです。ズラ〜っと。

この時点では「コモンネーム?」って感じの知識ですから、現在、使用しているアドレスはこっちやしって感じで何の躊躇もなく、無しのドメイン名を選択しました。

エックスサーバーコモンネーム画面
エックスサーバーコモンネーム画面

で、本来は有りを選択しておきたかったので、「しまった…」となるのですが、この後、登録料、使用料などの料金を決済してから自身の情報を入力するところで、再度、「コモンネームどうするの?」と聞いてきますので、ここでWWW有りを選び、問題なく解決しました。

申込承認後、メール認証かもしくはドメイン認証が済み次第、サーバー上にインストールされ使用可能となります。

リンクを検証します

自サイト内のhttp://3kabouzu.comから始まる内部リンク記述を全てhttps://3kabouzu.comもしくは//3kabouzu.comへ変更します。手作業ではとても無理なんで、プラグインを使用して一括で変更します。

プラグインは、「Search Regex」を使用して変更しますが、それほど難しい事でもない。
この使い方、説明はこちらのサイトを参考にいたしました。

Search Regexプラグイン(記事やコメント内容を一括置換) - WordPressプラグインの一覧
Search Regexプラグインは過去に投稿した記事の内容を一括置換することができるプラグインです。記事の本文やコメントの内容など、対象を指定して指定した文字列に一致するものを一括して別の文字列に置換することができます。ここではSearch Regexプラグインのインストール方法と使い方について解説します。

「Broken Link Checker」というプラグインでも書き換えはできますし、リンク切れもチェックできるのですが、どうもうまくいかない感じもします。

一括操作でURLの再設定と再確認ができて、ステータスにOKが出るのですが、表示されている一部でOKがでない。でも、リンク切れをチェックすると一応クリアーしている状態です。

一括じゃダメなのか? でも、これを一つ一つなんてやってられない感じなので、私は無視しました。出来てることにしました。リンク切れてないって言うんだから。(笑)

301リダイレクトを記述する

私の場合、Mac環境なので、css、phpなどのファイルに変更を加える場合、「テーマの編集」から開いたファイルを一旦コピーして、「Xcodo」や「mi」にペーストしておき、念のためにディスクトップあたりのわかりやすいところへ保存しています。

.htaccessも同様にコピー&ペーストしておくのですが、「.」から始まるファイル名はそのままの名称では保存できないので、一旦、「.」を外して保存しています。また、拡張子にtxtなどが付いて保存されてしまうので、この状態でそのままサーバー上にアップしてもダメですから、アップロードしてから元の「.htaccess」の名称に変更します。

ご存知のようにサーバーにアップロードする際は、FFFTPソフトで行います。私は「FileZilla」を使用していますが、これらの使用方法もググっていただければそれほど難しいものでもありません。すぐに慣れます。

ブログを始めた当初は、テーマファイルをいじって保存し、次の瞬間、画面が真っ白になった時点で意識を失いそうになりました。ブラウザで「戻る」をクリックすると、元の正常な画面になるのですが、それはキャッシュに残っているイメージで、すでにサイトはやられています。お前はもう…のケンシロウ状態です。

こんな時、慌てず、FFFTPソフトでサーバーへ保存しておいた元のファイルを掘り込めば、蘇ってきますので。

エックスサーバーから直接、.htaccessを編集する

一通りの設定を終えて、.htaccessへ301リダイレクトの書き込みを行うのですが、 エックスサーバーではサーバーパネルから.htaccessを直接編集できます。ここで、やってしまった事が一つ。301リダイレクトの記述を書き込み、編集を終了し、旧アドレスのhttp://〜からアドレスバーに入力してサイトを見ると表示されている。

「おっ、やるじゃん状態」ところが、リンク先をクリックすると500エラーが出て表示されない。一瞬、真っ青に。なんで?

何が原因なのか? わからない。う〜ん…と悩んで「FileZilla」で.htaccessを見たら301リダイレクトのコードしかない。エックスサーバーで.htaccessを直接編集すると、真っ白な状態に書き込んでいる事に気が付かなかった。要は、301リダイレクトの記述しかなく、元のファイルが無くなって変更されている。追加での記述ではないので注意が必要です。

バックアップを取っておいた.htaccessファイルに301リダイレクトの記述を書き加え保存。リダイレクトを検証するサイトからもテスト接続するとリダイレクトできている。何も問題ない。サイトもリンクはOK。なのにまだ鍵はかかっていない。

おそらくここまでの手順はみなさんもサイトで検索して、悩みながらクリアできると思うのです。が、素人には落とし穴があった。その一つが、ブログ記事におけるサルネイムまたはアイキャッチを貼り直す事。もう一つは、ウィジェットに記述している内容です。

手作業でチェックした

先のフォーラムでHidekichiさんが言っていたコメントにヒントがありました。

もっと言えば、仮にアドレスを置換したとしても、サムネイルなどは再度作成し直さないと表示されないかも知れません。画像が入っている場所が同じなので、記事中のhttpがhttps(あるいは省略)に変われば正しく表示されるとも思います。ただその情報等がデータベースにあるならそれはやはり書き変えないといけません。

ここで、ハッと思いました。サルネイムかアイキャッチが怪しい…と、で、これを張り直すしかないかと悩みつつ、全ての記事について画像を置き換えしました。アイキャッチ画像を一旦削除して記事を更新すると、Simplicityでは新たなアイキャッチ画像が設定されるので、これでどうやと!

アイキャッチを一括で置き換えするプラグインもあるようですが、この際、記事の見直しも含めて手作業でやりました。数時間かかって記事の画像をすべて張り替えて、違うブラウザでサイトを見てみると… まだ、鍵がかかっていない。え〜ぇ…なんで? 何が原因なんすか? もう、わからん。

で、結局、私が陥った落とし穴は、わいひらさんから拝借した、グーグルをリンクして検索するコードでした。わいひらさんのサイトの記事検索がかっこよかったので、色々と調べてコードがわかり、それをサイドバーウィジェットに入れていたのです。これが引っかかった。

コードは以下の分で、この記述の中にあるhttp://wwwが、最後までわからなかったのです。リンク先はOKだと思っていたし、まさかグーグルさんのURLの記述方法がダメとは思わないので… 

申し訳ありません。当サイトはコピー出来ないので参考までにという事で。

右クリックがきかなくてもコピーできるみたいです。

<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
  <div>
    <input type="hidden" name="cx" value="partner-pub-5013049212476266:6857225436" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" />
    <input type="submit" name="sa" value="検索" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

ブラウザでページを検証しなさいとかググるとでてきます。ソース上のhttp://記述が見えて、そこをたどっていくとどこかに解決のヒントがあると言われるのですが、ウィジェットの中の記述をブラウザのツール開発や検証から探し出すなんて素人にさっぱりわかりません。

で、ひょっとしてと思い、このウィジェットを外して、WPのオリジナルの検索ウィジェットを掘り込んでみたら… できました! 鍵がかかりました。

で、もう一つ検証したのが、http://www.google.co.jp/とある部分を、先頭のhttp://www.を取って//google.co.jp/と変更したらOKでした。

詳しい説明は… 無理です(笑)が、このような事はサイト上でググっても出てこないし、仮に掲載されているとしても、その検索ワードがわかっているなら、多分、問題を先に解決できていると思うのです。

今回のポイント

「Search Regex」で内部リンクの記述を変更する。
「Broken Link Checker」でリンクチェック。リンク切れがあればアドレスを再確認。
.htaccessへ301リダイレクトの書き込み。

ここまでは、サイト上で皆さんがアドバイスを投げてくれています。

記事のサルネイム、アイキャッチを張り直す事。
Simplicityの場合、子テーマに書き込んだコードを検証。
ウィジェットに書き込んだコードの検証。

これが今回のミソでした。

おそらく、私のようにHTMLやCSSなどの記述を理解していなくて、誰かのコードを拝借するようなレベルでは、サイト上で説明しているのを参考にして進むと思うのですが、そのレベルで行き着く先には限界があると思うのです。

ブラウザでソースを検証したり、その内容を理解するのにも苦労すると思うのです。そんな状況でヒントになるならと思い、書きました。

プラグインが原因の場合、全てのプラグインを一旦停止すれば、鍵がかかるか否かはすぐ判断できます。CSSやその他のテーマファイル等もほとんど問題はありません。

今回は、サルネイムまたはアイキャッチの画像を再度張り替える事と、ウィジェット内に独自のコードを入れている事に中々気づかないという点を、皆さんお気をつけくださいと思い、フォーラムに投稿するより、自分の記事でお知らせしようと書いています。

私と同レベル程度の皆さんのお役に立てればと願っております。

最後に、わいひらさんのページもそうですが、多くの方がサイト上で便利なコードを載せてくださっていたり、様々な説明を書いてくださっていたりと、そのおかげでカスタマイズできたりします。

今回、皆さんのまね事のようなスタイルで記事を書いてみましたが、その都度、検証をして書かないといけなくて、その大変さを痛切しました。
いつも気軽に利用させていただいていますが、改めて感謝申し上げます。

やはり、餅は餅屋です。今後は、葬儀ブログにもっと力を入れていきます。(笑)

シェアする

トップへ戻る