ロリポップのサイトを常時SSL化する


時代の流れで、個人サイトもSSL化(通信の暗号化)する動きが高まってきてるようだ。

SSL化というのはご存知の如く、サイトを「https」通信でつながるようにすること。

当ブログはロリポップレンタルサーバを使用しているが、しばらく前にロリポップの管理元から「無料でSSL化できるのでやらない?」というメールが届いていた。

いつかはやらなければと思ったものの、まだ先かな~と思っていた。

しかし、ここ最近は例のウイルスの影響で休日もどこへも出かけられず、いい機会だったので思い切って常時SSL化をおこなってみた。

今回はその過程をまとめたものだ。

これからSSL化しようとしている方のご参考になれば幸い。

SSL化は必要なのか

世の中に、「やらないよりはやった方がマシ。」という言い方があるが、この「常時SSL化」はやらないといけない部類に入る。

「常時SSL化」とは、ウェブサイトの閲覧を常にSSLで通信を行うこと。

SSL通信とは、インターネット上の通信を暗号化するため仕組みで、通信を暗号化することでクライアントとサーバー間の盗聴や、改ざんができなくなる。

例えて言えば、いままでハガキで送っていたものを封筒に入れて送るようなもの。しかもカギ付きの。

郵便配達の人や、ひょっとしたらご近所の人にもハガキは読まれてしまう可能性があるが、封筒に入れておけばその心配は無いというわけだ。
まあ、カギ付き封筒というのは無いけどね。

こんな怪しい時代になってきたもんだからウェブブラウザのベンダーは、2017年ころから徐々にSSL化してないサイトに対して「保護されていない通信」という警告を出すようになってきた。

当ブログ(metabanium.com)の構成

当サイトはロリポップのレンタルサーバを使用、ドメインはムームードメインで独自ドメイン、「metabanium.com」を取得している。

DNS等の設定も標準的なものになっている。

コンテンツはWordPressを使用し作成している。

一般的なよくあるパターンのブログサイトだと思う。

SSL化というと、なーんか難しそうに感じるがやってみるとそうでもない。

ただし、うまくいかないときに自力解決できるかどうかがスキル(解決方法を探ることも含めて)を持っているかどうかの分かれ道。

わしなんか素人に毛が生えたぐらい。よくわからないところもいっぱいあったが勉強すると意外と霧が晴れてくるもんです。
あきらめずに調べてやってみることだね。

尚、最初にお断りしておくが、以下の手順は全て自己責任での対応をお願います。
ひょっとすると、誤った情報が書いてあるかもしれませんよぉ~。

サイトがくっちゃくちゃになっても責任は負いませんので(笑)

常時SSL化、変更の流れ

常時SSL化する流れとしては以下のようになる。
また、SSL化する場合、ちょっと時間がかかるのでサイトをメンテナンス中表示にしておくとよいと思う。
来訪者にメンテナンスモードを知らせるプラグインがあるのでそれを使うとよいと思う。

1.サイトのバックアップを取得
万が一失敗したらこれまでの苦労が・・・ということにならないためにバックアップを取っておこう。
失敗してもバックアップさえあればなんとかなる。

2.「Database Search and Replace Script in PHP」の入手と転送
SSL化しただけでは変更できないサイト内のhttp記述をhttpsへ一括置換する便利ツール。

これを6.で使用するのだが、少々手間がかかるので事前にツールのダウンロード、サイトへのFTP転送を行う。

3.ロリポップ独自SSLの設定
これは簡単に設定できる。しかも無料。但し適用すると元には戻れない。

4..htaccessにリダイレクトの記述を追加
「.htaccess」にリダイレクト(振替え)の記述を追加する。

5.Wordpressの設定変更
これは簡単。
WordPressの管理画面から「https」へ選択を変更するだけ。

6.「Database Search and Replace Script in PHP」で文字列を置換
2.で転送したツールを使ってサイト内の「http」と記述を「https」へ一発で置換する。

7.必要によって手直し
サイトを見て画像が表示が正しく表示されているかなどをチェックして、おかしなところがあれば修正する。

8.グーグルアナリティクスの設定変更
グーグルアナリシスを使用している人の変更設定。

9.グーグルサーチコンソールの設定変更
グーグルサーチコンソールを使用している人の設定変更。
グーグルサーチコンソールの所有権の確認のためムームードメインのDNS設定を変更する。

10.グーグルアドセンスの正常性確認
まあ、ちゃんと広告が表示されればいいんですが、とりあえず確認。

■ 手順 ■

では流れに示した具体的手順は下記のようになる。

1.サイトのバックアップを取得

バックアップはFTPで取得する手もあるが、プラグインを使用するとお手軽で早い。

わたしの場合は「BackWPup」というプラグインを使用した。

使い方はネットを探していただくとわかると思う。

例えば、
  (株)ルーシー バズ部 BackWPUpで確実にWordPressのバックアップを取る方法
の「2.手動バックアップの方法」を参考されるとよいと思う。

2.「Database Search and Replace Script in PHP」の入手と転送

SSL化する前に、上記の項番6.で使用するツールを手に入れておこう。
それは「Database Search and Replace Script in PHP」(データベースサ-チリプレーススクリプト)というWordPressデータベース内の文字列を一括で置換してくれる便利ツールだ。

SSL化したのはいいが、!マークが表示されて完全なSSL化になってない~!!と困ったちゃんになった人のために有効。

これは非SSLで作成したWordPressを途中でSSL化した場合、これまで作成して貼っ付けてきた画像のURLが「http」のままになっているため。

そこで「http」の文字列を「https」に一括で替えてしまおうというわけだ。

ツールをダウンロードして、サイトに転送するまでを書いておく。
(FTP転送はけっこう手こずる場合があるので、面倒なことは先に済ませておこうというわけだ。)

■以下のサイトにアクセスする。

Database Search and Replace Script in PHP

あっさりした英文字サイトが表示される。

最初に以下の注意が書いてある。

「警告にもかかわらず一部のユーザーがこのスクリプトをサーバーに放置しており、それは非常に危険である。」と。

実はこのツールはサーバ上に存在していると大きなリスクとなる。

サーバに入れたツールを誰かが悪用してデータベースを改ざんしてしまう可能性があることだ。

つまり使用するときはフォルダ名を変更しておくとともに、使用が終了したら直ちにツールを消去するべきなのだ。

■3つの項目にチェックを入れる。

チェックの項目は以下。

・このスクリプトはセキュリティリスクになる可能性があることを認める。
・このスクリプトを一般向けのWebサーバーに残してはならないことを理解している。
・私は開発者であり、私が行っていることを認識している。

■名前とツールのダウンロードリンクを取得するためのメールアドレスを入れる。

入力したら一番下にある「Submit」をクリックする。すると登録したメルアドにメールが届く。

■メールのダウンロードリンクをクリックする。
届いたメール内の”here”をクリックするとツールがダウンロードできる。

■ツールをダウンロードする。
ダウンロードしたファイルはzip形式なので展開しておこう。ファイルの大きさは約110KB。

■ツールをサイトへ転送する。
展開したツールをフォルダごとFTPを使ってとWordPressインストールフォルダ配下に転送する。

ロリポップFTPではフォルダごと転送することができないし、ファイルも一つづつしか送れないのでここはフリーソフトのFTPクライアントを使おう。

わたしの場合は、FFFTPを使用した。
FFFTPは大量ファイルの転送には向かないが、今回のファイル量なら十分。使い勝手も良い。

FFFTPで転送先の階層をWordPressのインストールフォルダにしたら、ツールのフォルダを右クリックして「アップロード」をクリック。

これで転送が始まりすぐ終わる。

ツールが転送された。フォルダが作成されている。

先ほども書いたが、デフォルトのままのフォルダ名だと悪用される可能性が無きにしもあらず。
フォルダ名を適当な名前に変更しておこう。

転送されたフォルダを右クリックして名前変更する。

後でツールを起動するので変更したフォルダ名は覚えておくこと。
わたしの場合は”order66″にした。(笑)

ツールは後程(項番6.)で使用するので、次にロリポップ独自SSLの設定を行う。

3.ロリポップ独自SSLの設定

ロリポップユーザ専用ページにログインする。

左ペインの「セキュリティ」から「独自SSL証明書導入」をクリックする。

対象のドメイン(wwwありなし両方)にチェックを入れて、独自SSL(無料)を設定する」をクリックする。

実行中は「SSL設定作業中」の表示になる。実行は3分程度で終わった。

ページを何度か更新させてみる。設定が終了すると「SSL保護されていないドメイン」タブでは「該当する独自ドメインはありません。」と表示される。

「SSLで保護されているドメイン」タブを開くと設定変更したドメインが表示される。

ロリポップユーザ専用ページはログアウトせずこのままでよい。

これでロリポップの独自SSL設定は終わり。

4..htaccessにリダイレクトの記述を追加

.htaccessに俗に言う301リダイレクトを記述してあげる。

これはいままで「http」で来ていた人(ブラウザにhttpでブックマークとかしてる人)を「https」側のサイトに自動的につないでくれるという仕組み。

それがなぜ必要かと言うと、web上では「http」と「https」のサイトはドメインが同じであっても違うサイトとみなされてしまう。
そこで、検索エンジンやブラウザに同じサイトなんだよ~ということを教えてあげる訳だ。

まず「.htaccess」のバックアップを取っておく。

ロリポップユーザ専用ページの「サーバの管理・設定」から「ロリポップ!FTP」をクリック。

「.htaccess」をクリックする。

「.htaccessの編集中」画面が表示される。

「ダウンロード」をクリック。

「ダウンロードして宜しいですか?」と聞いてくるので「OK」をクリックして保存する。

次に.htaccessへの追加。
以下のパラメータをコピーして「.htaccess」に追加する。

尚、注意として”#BIGIN WordPress”の文字から”#END WordPress”の間には入れないこと。
(この範囲はWordPressが動的に生成している領域であるため、追記しても消されてしまう。)


<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</ifmodule>

パラメータを追加したら、「保存する」をクリックする。

変更して宜しいですか?と聞いてくるので「OK」をクリック。

以上で.htaccessへリダイレクトの記述は終わり。

5.Wordpressの設定変更

WordPressの設定を「http」から「https」へ書き換える。

WordPressにログインして、「設定」から「一般」をクリックする。

「WordPressアドレス(URL)」と「サイトアドレス(URL)」を”http”から”https”へ書き換える。
※間違えるとサイトにアクセスできなくなるのでよく確認。

「変更を保存」をクリックする。

WordPressからいったんログアウトさせられるので、再度WordPressにログインする。

「WordPressアドレス(URL)」と「サイトアドレス(URL)」正しく書き換わっていることを確認。

以上でWordpressの設定変更は終わり。

6.「Database Search and Replace Script in PHP」で文字列を置換

2.で転送したツールを使ってサイト内の「http」と記述を「https」へ置換する。

データベースにはサイトの情報や画像などの在りかがURLのフルパスの文字列で格納されているのでこれを「https」の文字列に置き換えするわけだ。

サイトに転送した「Database Search and Replace Script in PHP」のフォルダ(ディレクトリ)をブラウザで開く。
手順2.でフォルダ名を Search-Replace-DB-xxx から変更していると思うので、その変更した名前にする。

例えば、https://①example.com/②wordpress/③abcdef

①がサイトのドメイン名
②がWordPressインストールフォルダ名
③が「Database Search and Replace Script in PHP」のフォルダ名になる。
(わたしの場合、「order66」とい名前に変更してある。

ツールを起動すると、データベース名が勝手に入ってくるとの話だったが、空白になっていた。
この場合は手入力する必要がある。

入力する必要があるのは、

database Name(データベース名)
username(データベースのユーザ名)
pass(データベースのパスワード)
host(ホスト名)。

これは、WordPressのインストールフォルダにある「wp-config.php」というファイルを覗いてみればわかる。
このファイルの「define (‘DB_NAME’)・・・」から「define (‘DB_HOST’)・・・」までがそれぞれの入力内容だ。

入力後、「Test connection」をクリックする。これでデータベースにアクセスできるかわかる。
エラーになるときは何かが間違っている。

データベースにアクセスできれば「Test connection」の横に「Success.You are connected.」と緑色で表示される。

どうしてもうまく接続できない場合は以下の方法でデータベースにつなげられるか試してみるとよい。

ロリポップの管理画面から「データベース」をクリックし、データベース管理ページの「php MyAdminを開く」をクリック。

ログイン画面でユーザー名、パスワード、サーバの選択を入力する。
これは先ほどの「wp-config.php」ファイルの記述内容だ。
これでデータベースに入れれば「Database Search and Replace Script in PHP」のdatabase Detailsは合っている。

さて、データベースにつなげられたら、変更する文字列を「replace」と「with」に入力する。
つまり「replace」が変更前の”http”、「with」が変更後の文字列”https”になる。

重要なので誤りのないようによく確認しよう。

入力したらLet’s goの欄にある「Do a self test run」をクリックする。
これは昔のDry testと同じで、まだ文字列を書き換えず、「ここを書き換えますよ」と事前に教えてくれる機能。

書き換えようとしている部分と数が表示される。

更に「view changes」をクリックすると、書き換え前後の内容を表示してくれる。

これで書き換えしても良ければ「Serach and Replace」をクリックする。

書き換えていいの?の確認のポップアップが開くので「OK」をクリック。これで書き換えが行われる。

書き換えた数が「Updates」に表示される。

サイトをブラウザで開いてみる。
ページをテキスト表示させみると、いままで”http”だった部分が”https”になっているのがわかる。

書き換えがうまくいっていそうならツールを削除する。
これは外部からツールを悪用されるのを防ぐため。

DELETE欄にある「delete me」をクリックする。

以上で「Database Search and Replace Script in PHP」で文字列置換は終わり。

7.必要によって手直し

サイトを見て画像が表示が正しく表示されているかなどをチェックして、おかしなところがあれば手直しをする。

わたしの場合テーマにSimplicity2を使用しているが、ヘッダー画像が表示されなくなったので、一旦日表示にして、再度設定しなおしたら表示されるようになった。

また、変更されなかった「http」の記述も変更が必要になる場合がある。
例えばテーマファイル(phpやcss、js)などに直接http://〜と記載しているものは変更されないので、テーマファイルに直接書き込んでいる場合は手動で修正が必要となる。

更にロリポップのアクセスカウンタを使用している人は、httpsに対応していないので、カウンタ値は表示されなくなる。
わたしの場合消えたままなので別の方法を考えないといけない。

8.グーグルアナリティクスの設定変更

グーグルアナリティクスは、サイトの訪問ユーザーについて「訪問者数」「どこから来たか」「使われたデバイスはスマホかパソコンか」などが分かるツール。

これの設定変更は簡単。

グーグルアナリティクス画面で「プロパティ」をクリックする。

「デフォルトのURL」の選択で「http://」を「https://」に変更する。

これでグーグルアナリティクスの設定変更は終わり。

9.グーグルサーチコンソールの設定変更

グーグルサーチコンソールは検索結果にサイトが「どのような検索ワードで」「どれくらい表示されて」「どれくらいクリックされたか」などがわかるツール。

これの設定変更はちょっと長いので意識を集中してやりましょう。

グーグルサーチコンソールの画面から左上のドメインをクリックして「+プロパティ追加」をクリックする。

プロパティ タイプの選択で「ドメイン」側に自ドメイン名を入力して「続行」をクリックする。

「DNSレコードでのドメイン所有権の確認」のポップアップが開くので、「2.以下のTXTレコードを・・・のDNS設定にコピーします。」から「コピー」をクリックする。
画面はこのまま放置でもよい。

次にムームドメインにログインする。

ドメイン管理の「ネームサーバ設定変更」をクリックする。

「ネームサーバ設定変更」をクリックする。

サーバ設定変更画面で、たぶんロリポップ!レンタルサーバにチェックが入っていると思うので、「ムームードメインのネームサーバ(ムームーDNS)を使用する」にチェック変更する。

チェックを入れたら、「ネームサーバ設定変更」をクリックする。

ポップアップが開くので「OK」をクリックする。

ネームサーバの設定変更を行ってよろしいですか?と聞いてくるので「OK」をクリックする。

「ネームサーバの設定を変更しました。」の画面が表示される。

次にドメイン管理の「ムームーDNS」をクリックする。

自ドメインの処理「変更」をクリックする。

「設定1」のサービスをロリポップに設定する。(なっていればそれでよし。)

「設定2」を使ってカスタムセットアップを行う。

「種別」で「TXT」を選択する。
「内容」に先ほど、グーグルサーチコンソールでコピーしたコードを貼り付けし、「セットアップ情報変更」をクリックする。

「カスタム設定をセットアップしてもよろしいですか?」と聞いてくるので「OK」をクリックする。

「カスタム設置のセットアップは正常に終了しました。」で「OK」をクリックする。

設定状態が表示される。

再び、ロリポップユーザ専用ページの「サーバの管理・設定」から「ムームーDNSへ移行」をクリックする。
「独自ドメインを選択してください」から自ドメインを選択する。

「管理状態」が「ムームーDNSをご利用中」になっていることを確認する。

再びグーグルサーチコンソールに戻り「確認」をクリックする。

するとこんな「所有権を証明できませんでした」という赤い画面が表示されると思う。
これは設定した情報がDNSサーバ(ネームサーバ)に反映されるまでしばらく時間がかかるため。
わたしの場合、10時間ほどで反映されたが、一日程待てばよいと思う。

この画面は「OK」をクリックして閉じてしまっても良い。「所有権の確認」画面も「後で確認」をクリックして閉じしまってよい。

再びグーグルサーチコンソールの「DNSレコードでのドメイン所有権の確認」のポップアップ画面を開くにはグーグルサーチコンソールの左上の自ドメインをクリックする。

DNSサーバに情報が反映されされていれば「所有権の確認」画面で「確認」をクリックすると「所有権を自動確認しました」の画面が表示される。
おめでとうございます。

「OK」をクリックすればグーグルサーチコンソールの設定は終わりだ。

時間が経っても所有権の確認ができない場合は、以下の項目をチェックしてみよう。

10.グーグルアドセンスの正常性確認

サイトを表示してみて、ちゃんと広告が表示されれば問題無いと思う。

古い AdSense 広告コードを使用している場合は変更する必要があるそうだ。
(古いAdSense 広告コードっていつのことだ?)

AdSense 広告コードのスクリプトが「http://」で始まっていた場合は、「https://」に手で書き換えればよいらしい。

以上で常時SSL化の一連の作業は終わり。

おわりに

今回、常時SSL化を行ってみたが、ところどころ意外なところでつまづくというのが印象。

全体的にはそう悩まずできたが、実施するにあたっては事前に手順をまとめておくのがよいかと思う。

できれば手順や注意点を書き出しておいたり、参考になりそうなサイトをプリンタで印刷しておく等々。

ずいぶん長い記事になってしまったので何か間違っているところがあるかもしれない。
追々、リライト、足りないところを追記していきたいと思う。