独自SSLの導入とRapidWeaver7の設定（トラブルメモ）

このブログは、ロリポップのレンタルサーバーを利用しており、2017年7月11日から全プラン対象で無料で独自SSL（Secure Sockets Layer：サーバーとプラウザ間の通信データを暗号化する送受信方法）が利用できる様になりました。　そこで、遅ればせながら、当ブログもSSL化することを思い立ちました。(具体的には ブログドメインをhttpsにします。 ) 　

簡単にSSLへ移行できると思いきや、意外にハードルが高く、更にRapidWeaver7にもhttps化での問題があることも判りました。　このトラブル経過の顛末（一部進行形）を記してみます。

https化へのステップ

SSL化する前に、RapidWeaver7でブログを作成しているプロジェクトファイルをバックアップしておきます。

（ 目 次 ）項目をクリックするとStep先へジャンプします

• Step-１：ロリポップサーバーのSSL設定を行う
• Step-２：RapidWeaver7のhttps設定
• Step-３：RapidWeaver7の混在コンテンツ（内部リンクが、httpを参照している場合はhttpsへ置換）を排除して、サイトにアップロードする。
• Step-４：Google AnalyticsやGoogle Consoleの設定
• Step-５：常時SSLの設定

SSL化が完了するとブラウザのアドレスバーに鍵マークのアイコンが表示される様になります。

Step-１：ロリポップサーバーのSSL設定

ロリポップの説明によれば

SSL化したウェブサイトは次世代通信プロトコル「HTTP/2」が自動で適用されるため、ウェブサイトの表示速度の改善も期待できるとのこと。　速度確認できるサイト　https://www.httpvshttps.com

ただし、認識すべきこととしてロリポップのSSL設定画面（下の画像を参照）で「※ Let's Encryptとその提供元のポリシーを確認・同意の上でご利用ください。また、Let's Encryptの仕様変更等によって予告なく利用できなくなる場合もあります。ご了承ください。」との注記があります。

では、ロリポップサーバのSLLを設定します。
詳細は、ロリポップのマニュアルを参照してください。

ロリポップユーザ専用ページにログインして、「セキュリティ」→「独自SSL証明書導入」をクリックし　更に、赤丸の「独自SS（無料）を設定する」をクリックして、SLL化設定します。


SSL化処理が完了（当ブログの場合５分位）しますと、以下の画面で、SSL化されたことが判ります。
ここで留意すべきこと！！

ここで、例えば、従来のhttpのアドレスでブラウザを見ても、正常に表示されますし、httpsのアドレスでブラウザを見ても、同じ様に表示されます。　しかし、このままでは、後から述べます、混在コンテンツが原因で、アドレスがhttpsでもSSL化されず、アドレスバーの表示には、鍵マークは付いていないと思います。！！

 

もう一つ留意すべきこととして、SSL化が完了したので、てっきり独自ドメイン（http://xxxx.com）が、https://xxxx.comに変更されたと思いきや、独自ドメインは従来と同じhttp://のままです。（ロリポップに、このことを問い合わせしたら「独自ドメインをhttpsに変更することはできません」とのことでした。）　つまり、SSL化で、httpsの独自ドメインが新たに加わったと言うことですね。。

 

このままでは、httpとhttpsの二刀流のドメインになっていますので、最終的に、httpsに一本化（後述の、常時SSL化と言います）することが必要になります。　このためには、全てのStepが終了してから、.htaccessに３０１リダイレクトを記述して、httpにアクセスがあったら、httpsへリダイレクトする様にすれば、httpsに一本化（常時SSL化）できます。

Step-２：RapidWeaver7のhttps設定

RapidWeaver7は、プロジェクト毎に、WebAddress（２ヶ所）を以下のように設定します。

１．一般設定（General）にある、WebAddressをhttpsにします。


２．公開設定（Publishing）にあるWebAddressをhttpsにします。

 

 

Step-３：RapidWeaver7の混在コンテンツを排除して、サイトにアップロードする。

SSLは、非常に厳格で、ページ内に絶対パスで参照する内部リンクにhttpが混在（混在コンテンツと言います）していると、ブラウザのアドレスバーに安全性を示す鍵アイコンが出ません。　そこで、以下の様にページ毎にhttpを検索して、httpsに置換して行くなどが必要です。

RapidWeaver7は、検索する機能の中に、「Find in Project」がありますので、プロジェクト全体を見渡した検索も可能です。（置換はできませんが、その場所は特定できます。）混在コンテンツ（内部リンクが、httpの混在）を排除できたら　ようやく、プロジェクトを自分のサイトに公開します。　「Publish Button」を押すと、自分のサイトへアップロードが始まります。　終了したら、自分のホームページへhttpsでアクセスします。　例えば、Google Chromeで、アドレスバーに鍵アイコンが出ていれば成功ですが、NGなら、ページを右クリックし「検証」を選んでみます。　混在コンテツを示す「Mixed Content」で示される混在コンテンツ エラーがあるか？を確認して行きます。　RapidWeaver7の編集画面に戻り、エラー箇所を排除していく作業が必要です。　httpが紛れ込んでいる可能性のある場所しては、head内やiflemeの参照先があります。

＜トラブル事例＞
前回ブログの「最新記事リスト」ですが、この中でYQL APIを利用した jQueryのコード記述にhttpがあり、これをhttpsに変更し　た所、YQL APIのコールバックが、サムネールの参照先URLが、「https:/」となって、「最新記事リスト」のサムネイルがブランクになってしまいました。　この場合は、jQueryのコード記述は、何故か？元のhttpのままでSSL化も問題無く（アドレスバーに鍵アイコンが表示されます）　OKでした。　（2018/9/7：取消し線で訂正）

ネットで「混在コンテンツのチェック」で検索すると、色々な方法がありますので、確認してみてください。

よって、ブログページが多い場合は、非常に大変な作業になりますので、ブログページが少ない時にhttps化するのが得策ですね。

ここで、RapidWeaver7のバグと思われるトラブルについて、

前回ブログでも紹介しました様に、RSSのfeed.xmlを利用して「最新記事」を表示しています。　https化したら、サムネイル画像が出なくなってしまいました。　feed.xmlの内容を見ますと、サムネイル画像を参照しているURLが、https:/xxxxになって「/」が欠落しています。　現在、RapidWeaver7の開発元に問い合わせ中です。　取敢えずの対応策として、「mi」というエディターを使って、正しい「https://」になるように置換し、feed.xmlをサイトにアップロードしています。

実際は、「mi」と「FileZilla 」と連携し、ブログページを更新・アップロードした直後「FileZilla 」で、feed.xmlを右クリックして、「表示／編集」を選択すると、「mi」が起動し、サイト先のfeed.xmlを直接　編集・置換することができます。　非常に不合理なパッチ作業なので、早期にソフト開発元で解決してもらいたいものです。

なお、RapidWeaver7の使用バージョンは、Version 7.5.5 です。

Step-４：Google AnalyticsやGoogle Consoleの設定

この設定は、ネットで検索しますと色々出てきますので、ご参照頂くとして、ここでは、戸惑ったことを述べます。

AnalyticsやConsoleの設定後、戸惑ったこと

設定後２，３日経過しても、インデックス登録が「保留」のままで、「新しいコンソールを試す」のURL検査ツールを使ってみると、「URL は Google に登録されていません」となっている。　ちょっと不安になりますよね。インデックス登録が登録されたものの、登録件数が１件のままで、２，３日経過しても登録件数が増えないない。

解決策かどうか？は判りませんが、robot.txtをサイトのルートに設置していたことを思い出し、ロリポップのFTPツールで中身を確認すると、httpになっていましたので、httpsに変えて保存しました。robot.txtについて、詳しくは、「https://digital-marketing.jp/seo/sitemap-xml-and-robots-txt/」を参照してください。そうこうしている内に、設定後の時間経過（４日以上要する？）に因るものか、robot.txtの変更に因るものか不明ですが、Google Consoleのインデックス登録数が、前のhttpのときの件数と同じになりました。　また、URL検査ツールを使ってみて、「URL は Google に登録されています」となっていました。

Step-５：常時SSLの設定

 

httpsのドメインアドレスで、ブラウザを見たときに、アドレスバーに鍵アイコンが常に表示されることが、全てのページで確認できたら、最後に常時SSLの設定を行います。

これで、SSL化設定の最終Stepになります。

常時SSLの設定は、サーバーにhttpのアクセスがあった時は、自動的に常にhttpsへリダイレクトするようにします。　これを行う様にサーバーへ指示するのが、サイトのルートに設置している.htaccessに「３０１リダイレクト」を追記します。


これは、上の様にロリポップFTPで直接編集できます。　コードは、以下の通りです。

以上が、SSL化設定の経過とトラブル顛末でした。　SSL化を安易に考えていましたが、意外にも手こずってしまいまいました。　このトラブルメモが、何らのヒントになれば幸いです。