自分で出来るカラーミーショップの常時SSL化、その修正箇所について

SSLでインターネットセキュリティ

Googleが推奨していることもあり、近年、常時SSL化の勢いは増すばかりです。
「いつか必要になるでしょうが、いつやりましょうか?」というようなものだと、そんな風に考えていましたが、周囲の様子をうかがっていると、そろそろ対応する時期がきているのかもしれません。

カラーミーショップは、ショップサイトの常時SSLは有料オプション(1,000円+税)ですが、常時SSLへの切り替えは、簡単に行えるような仕組みが用意されています(後述の自動チェック機能)。

常時SSLに切り替える前に、一般的には何をする必要があるの?

ごく簡単に言うと、参照先URLがhttp://なら、https://に修正する必要があります。ポイントは二つ。
1. 参照先が自サイト以外は絶対パスで書いていますので、すべて修正対象
2. 参照先が自サイトの場合は相対パスで書いてあれば修正対象外
以下で具体例を挙げてみます。

・画像ファイルを参照している

例)<img src="http://exsample.com/sample.jpg">

相対パスで書いてある場合は問題ありません。
画像ファイルの参照先URLを絶対パスで書いてある場合は修正対象です。http://→https://に変更します。
CSSの「background-image」も画像ファイルの場合があります。確認が必要です。

・ファイルを読み込んでいる

例)<script src="http://exsample.com/sample.js"></script>
例)<link rel=“stylesheet” href=“http://exsample.com/sample.css”>
例)<iframe src="http://exsample.com/sample.htm"></iframe>

相対パスで書いてある場合は問題ありません。
外部サイト(レンタルサーバーなど)からファイル(CSS、JavaScript、iframe)を読み込んでいる場合は、その参照先URLと参照先のファイル内に書いてあるURLも修正対象です(見逃しやすい)。

・画像やファイルを置いている場所が非SSLの場合

置き場所の外部サイトが非SSLの場合は、SSLに対応している場所にアップロードしなおし、それを参照するようにURLを変更します。

・aタグのリンクは修正対象ではない

例)<a href="http://exsample.com/sample.html">

リンクは移動先を指定しているだけで、参照しているわけでも、読み込んでいるわけでもないので、修正対象外です。

じゃあ、カラーミーショップはどうなの?

カラーミーショップは自動チェック機能があり、ボタン一つで自動修正してくれます。
自動修正の対象は、「画像ファイル管理」にアップロードしている画像(http://img??.shop-pro.jp/~)、FTPオプションでカラーミーショップのファイルサーバーにアップロードしている画像(http://file???.shop-pro.jp/~)です。

チェック範囲は、テンプレート内(スマホ含む)、商品説明、ショップ情報のお知らせ・フリースペース、カテゴリ―のフリースペース、配送説明など。HTMLタグが入れられる場所はおおむねチェックしてくれるようです。
ただし、フリーページは一部チェック対象外みたいです(注意!)。

自動チェックした結果はこんな感じです。ログが表示されます。

カラーミーショップのSSL自動チェック

漏れた項目を確認しながら手動修正

外部サイトにある画像を参照している場合は自動修正しません。
たとえば、商品登録画面の「説明」欄に自分のブログサイトにある画像を参照している場合は自動修正から漏れます(ログに「httpsへの修正をお願いします」と表示されています)。
件数が多い場合は商品データ(CSV)をダウンロードして、ExcelやCSVエディタを使って、まとめて置換するとよいでしょう。

外部サイトに置いてある画像、CSS、JavaScript、iframeをテンプレートで読み込んでいる場合も自動修正から漏れます。同様に、カラーミーショップでHTMLタグが入れられる場所(上参照)、外部サイトを参照先にしている場合は自動修正から漏れます。
自動チェックのログを確認して、手動で修正します。

フリーページは一部のみ自動修正、大部分は効かないので、これは目視で要チェックです(ログにも表示されないです)。チェックすべき点はこれまでと同様です。

カラーミーショップの常時SSLのまとめ+補足

自動チェックで自動修正してくれる場合は、簡単に常時SSLへ切り替えることが可能です。
手動修正の箇所が多い場合は、HTMLに慣れていないと難しいと思います。

aタグは修正対象ではありませんが、ついでに直しておくとより良いです(任意)。

カラーミーショップは常時SSLに切り替えると、httpでページを開いたとき、httpsにリダイレクトするようになっています。外部サイトからカラーミーショップにリンクを張っている場合も、張りなおさなくて大丈夫。

Google Analyticsは、管理画面からボタンでhttp://→https://に変更するだけです。これまでの数字を引き継ぎます。
Google Search Consoleは、新しいURL(https://)で登録しなおす必要があります。カウンタはゼロになり、新たにサイトマップを送信します。

SNSのシェアボタンのカウンターもリセットされます。

執筆者

えーじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。