本記事は、2月4日にリリースが予定されているGoogle Chromeブラウザのバージョン80、
および3月17日にリリースが予定されているバージョン81において、
段階的に実装される混合コンテンツのブロックに際し、確認や修正が必要な点についてご案内しております。

Google Chromeのバージョンアップ内容そのものを確認されたい場合は、以下のサイトをご参照ください。

　▼E-Commerce Magazine：デッドラインは2020年2月！Chromeが混合コンテンツをブロック。サイトへの影響とその対策を解説
　https://www.future-shop.jp/magazine/info-mixed-content

　▼Google公式：Chrome Platform Status（英字サイト）
　https://www.chromestatus.com/features/schedule

　▼Google公式：Google Security Blog／No More Mixed Messages About HTTPS（英字サイト）
　https://security.googleblog.com/2019/10/no-more-mixed-messages-about-https_3.html

 

なお、ご利用PCにGoogle Chromeブラウザがインストールされていない場合は、以下を確認してインストールしてください。

　▼Google Chromeヘルプ：Google Chrome をダウンロードしてインストールする
　https://support.google.com/chrome/answer/95346

 

また、本記事内容はHTMLに不慣れな方向けのご案内となっております。
HTMLやCSSの解析ができ、当該記述や前後のタグから管理画面のおおよその記述箇所が把握できる方は、
前述のE-Commerce Magazine記載の通り、Chromeの検証機能（デベロッパーツール）の利用をお勧めします。
 

---

常時SSL化対応状況を確認する

本件の影響を受けるかどうかの確認範囲は、常時SSL化の対応有無により異なります。
まずは自店舗が常時SSL化対応済みかどうかをご確認ください。

構築メニュー＞その他　にて「送料とお支払い方法について」のURLをご確認いただき、
URLが「http」の場合は常時SSL化未対応、「https」の場合は常時SSL化対応済みです。

構築メニューの中に「その他」が存在しない店舗様はコマースクリエイターをご利用中であり、常時SSL対応化済みです。
コマースクリエイター利用店舗様は、本記事下部の「コマースクリエイター利用店舗様の場合」をご確認ください。

 

常時SSL化対応有無をご確認いただいた後、以下より自店舗に適した項目をご確認ください。

• 常時SSL化未対応


• 常時SSL化対応済み

 

---

常時SSL化未対応

構築メニュー＞その他　の「https」ではじまるURLの全ページが、本件の影響を受ける可能性がある範囲となります。

また、SSL用FTPサーバーにHTMLファイルをアップロードしている場合は、そちらのページも影響を受ける可能性があります。

「https」ではじまるURLの各ページにGoogle Chromeブラウザでアクセスしていただき、
以下画像のようにアドレスバーに鍵マークが表示されているかどうかをご確認ください。

鍵マークが表示されるページは対応不要、iマークが表示されるページは対応が必要です。

※購入手続きページなど直接アクセスできないページは、プレビューモードで注文手続きを行ってご確認ください。

※商品ページなど、httpではじまるURLのページは本仕様変更の影響を受けませんので確認不要です。

 

iマークが表示されたページの対応方法

まずはじめに、該当ページのURLに「/fs/」が含まれているかどうかを確認します。

URLに/fs/が含まれていない場合

URLに/fs/が含まれないページはSSL用FTPサーバーにアップロードされているページですので、
SSL用FTPサーバーに接続して該当ページのファイルをダウンロードします。
（FTPサーバーへの接続方法がわからない方は、こちらをご確認ください。）

ファイル内の画像やCSS、JavaScript、iframe、formを確認し、httpから読み込んでいるファイルがあればhttpsに変更します。

その際、画像はSSL用FTPサーバー（ホスト名がsecure2ではじまるサーバー）にアップロードするか、
もしくは構築メニュー＞デザイン設定＞画像ファイル管理にアップロードして、「https」もしくは「//」ではじまるパスに書き換えてください。
CSSやJavaScript、iframeはSSL用FTPサーバーにアップロードして、「https」もしくは「//」ではじまるパスに書き換えてください。

広告計測用の外部JavaScriptなどをhttpから読み込んでいる場合は、
サービス提供元にhttpsで読み込む際のファイルパスをご確認の上で適切な記述に書き換えてください。

商品検索フォームを設置している場合は、httpsのパス（ログインページと同じドメイン）に変更してください。

 

URLに/fs/が含まれている場合

URLに/fs/が含まれているページはfutureshopにより生成されたページですので、futureshop管理画面内を変更します。

httpのパスが記述されている可能性がある箇所は複数ございますので、以下に沿って各箇所を確認してください。
なお各ステップごとに該当ページを確認し、鍵マーク表示になったかどうかをご確認ください。
鍵マーク表示に切り替わりましたら、該当ページでは以降のステップは確認不要です。

該当ページがスマートフォンページの場合は、後述の「スマートフォンページの場合」をご確認ください。

 

STEP1)ヘッダー・左右メニュー・フッターにhttpからの読み込みがないか確認する

構築メニュー＞デザイン設定＞利用中デザインの「編集」を押下してレイアウト編集画面に入ります。

「レイアウト指定」を押下して、起点ページと商品グループページ以外のレイアウト指定を確認します。
以下のようにプルダウンが「00」以外である場合は、「追加レイアウト」を利用している状態です。

レイアウト指定の商品詳細ページ以降の各プルダウンが00番のみだった場合、
レイアウト編集画面に戻り、基本レイアウトにhttp領域から画像、CSS、JavaScript、iframe、formなどを読み込んでいないか調べます。

追加レイアウトを適用中の場合、レイアウト編集画面に戻り、基本レイアウトだけでなく、追加レイアウトにも切り替えて調べます。
（追加レイアウトへの切り替え方法がわからない方は、こちらをご確認ください。）

なお調べる際には、キーボードの[ctrl]キー＋[f]キーを同時に押してブラウザ検索を開き、「http://」で検索すると見つけやすくなります。

http領域から読み込んでいる画像は、SSL用FTPサーバーにアップロードする、
もしくは構築メニュー＞デザイン設定＞画像ファイル管理にアップロードして、ファイルパスを適切な記述に書き換えてください。

CSSやJavaScriptはSSL用FTPサーバーにアップロードして、ファイルパスを適切な記述に書き換えてください。

広告計測用の外部JavaScriptなどをhttpから読み込んでいる場合は、
サービス提供元にhttpsで読み込む際のファイルパスをご確認の上で適切な記述に書き換えてください。

商品検索フォームを設置している場合は、httpsのパス（ログインページと同じドメイン）に書き換えてください。

 

STEP2)「カラー/サイズ編集」「オリジナルCSS/JavaScript編集」にhttpからの読み込みがないか確認する

STEP1の対応で鍵マーク表示にならない場合は、「カラー/サイズ編集」「オリジナルCSS/JavaScript編集」を押下し、
STEP1と同じくブラウザ検索を利用してhttpからの読み込みがないか確認します。
なお「カラー/サイズ編集」の画面左上に「上級モードに切替（CSS編集）」と表示されている場合は確認不要です。

httpからの読み込みが存在していた場合、STEP1と同じ対応をします。

外部CSSファイルやJavaScriptファイルをimportしている場合、外部ファイル内にhttpからの読み込みがないか確認してください。

 

STEP3)コメントパターンにhttpからの読み込みがないか確認する

STEP2の対応で鍵マーク表示にならない場合は、構築メニュー＞ページ設定＞各ページ設定　にて、
該当ページで「コメントパターン」を利用していないか確認します。
利用していた場合、構築メニュー＞ページ設定＞コメントパターン一覧　の該当コメントパターン名を押下し、
コメント内容欄にhttpからの読み込みがないか確認し、httpからの読み込みがあった場合にはSTEP1と同じ対応をします。

 

PCページで上記の3ステップを確認・変更しても鍵マークにならない場合、
外部CSSや外部JavaScript、futureRecommend2のテンプレート(*1)などに記述されている可能性があります。

どうしても問題の記述を見つけられない場合は、弊社サポートにご相談ください。

*1…futureRecommend2は有料オプションです。ご契約中の場合は、
　　レコメンド管理画面の　設定＞テンプレート　から利用中テンプレートもご確認ください。

 

スマートフォンページの場合

futureshopが生成するスマートフォンページは、上記ではなく「モバイル」タブ内の記述が出力されます。

以下の設定箇所および利用している外部ファイルにhttpからの読み込みがないか確認し、
httpから読み込む記述がある場合にはSTEP1と同じ対応をします。

• モバイル＞デザイン設定＞デザインCSS
• モバイル＞ページ設定＞トップページ設定
• モバイル＞ページ設定＞基本設定
• モバイル＞ページ設定＞コメントパターン一覧

 

 

---

常時SSL化対応済み

サイト上の全ページが、本件の影響を受ける可能性がある範囲となります。

各ページにGoogle Chromeブラウザでアクセスしていただき、
以下画像のようにアドレスバーに鍵マークが表示されているページは対応不要です。

※購入手続きページなど直接アクセスできないページは、プレビューモードで注文手続きを行ってご確認ください。

 

iマークが表示されたページの対応方法

常時SSL化対応済みの場合は、コマースクリエイター利用有無により、確認箇所・修正方法が異なります。
コマースクリエイター利用店舗様（構築メニュー＞その他が存在しない店舗様）は、
後述の「コマースクリエイター利用店舗様の場合」をご確認ください。

コマースクリエイター未利用店舗様は、該当ページのURLに「/fs/」が含まれているかどうかを確認します。

URLに/fs/が含まれていない場合

URLに/fs/が含まれないページは、コンテンツ用FTPサーバーもしくはCMS用FTPサーバー(*1)に
アップロードされているページですので、各FTPサーバーに接続して該当ページのファイルをダウンロードします。

ファイル内の画像やCSS、JavaScript、iframe、formを確認し、httpから読み込んでいるファイルがあればhttpsに変更します。

その際、画像はコンテンツ用FTPサーバーまたはCMS用FTPサーバー(*2）にアップロードするか、
もしくは構築メニュー＞デザイン設定＞画像ファイル管理にアップロードして、ファイルパスを適切な記述に書き換えてください。

CSSやJavaScript、iframeはコンテンツ用FTPサーバーまたはCMS用FTPサーバー(*2）にアップロードして、
ファイルパスを適切な記述に書き換えてください。

広告計測用の外部JavaScriptなどをhttpから読み込んでいる場合は、
サービス提供元にhttpsで読み込む際のファイルパスをご確認の上で適切な記述に書き換えてください。

商品検索フォームを設置している場合は、httpsのパスに変更してください。

*1…CMS用FTPサーバーは、CMSサーバー(VPS)オプション（MovableType・WordPressオプション）ご契約時に発行しています。

*2…CMSサーバー(VPS)オプション（MovableType・WordPressオプション）を「ドメイン直下」で利用している場合、
　　コンテンツ用FTPサーバーからファイルを読み込むことができませんので、CMS用FTPサーバーにアップロードしてください。

 

URLに/fs/が含まれている場合

URLに/fs/が含まれているページはfutureshopにより生成されたページですので、futureshop管理画面内を変更します。

httpのパスが記述されている可能性がある箇所は複数ございますので、以下に沿って各箇所を確認してください。
なお各ステップごとに該当ページを確認し、鍵マーク表示になったかどうかをご確認ください。
鍵マーク表示に切り替わりましたら、該当ページでは以降のステップは確認不要です。

該当ページがスマートフォンページの場合は、後述の「スマートフォンページの場合」をご確認ください。

該当ページが商品グループページや商品詳細ページで、以下のステップの確認・変更をしても鍵マークにならない場合は、
後述の「グループページ・商品詳細ページの場合」をご確認ください。

 

STEP1)ヘッダー・左右メニュー・フッターにhttpからの読み込みがないか確認する

構築メニュー＞デザイン設定＞利用中デザインの「編集」を押下してレイアウト編集画面に入ります。
基本レイアウトにhttp領域から画像、CSS、JavaScript、iframe、formなどを読み込んでいないか調べます。

グループページや商品ページ個別に「追加レイアウト」を利用されている可能性もありますので、
追加レイアウトに切り替えて、HTMLが記述されている追加レイアウトが存在していれば、そちらも調べます。
（追加レイアウトへの切り替え方法がわからない方は、こちらをご確認ください。）

なお調べる際には、キーボードの[ctrl]キー＋[f]キーを同時に押してブラウザ検索を開き、「http://」で検索すると見つけやすくなります。

http領域から読み込んでいる各ファイルは、httpsはじまりの記述に書き換えてください。

広告計測用の外部JavaScriptなどをhttpから読み込んでいる場合は、
サービス提供元にhttpsで読み込む際のファイルパスをご確認の上で適切な記述に書き換えてください。

商品検索フォームを設置している場合は、httpsのパスに書き換えてください。

 

STEP2)「カラー/サイズ編集」「オリジナルCSS/JavaScript編集」にhttpからの読み込みがないか確認する

STEP1の対応で鍵マーク表示にならない場合は、「カラー/サイズ編集」「オリジナルCSS/JavaScript編集」を押下し、
STEP1と同じくブラウザ検索を利用してhttpからの読み込みがないか確認します。
なお「カラー/サイズ編集」の画面左上に「上級モードに切替（CSS編集）」と表示されている場合は確認不要です。

httpからの読み込みが存在していた場合、httpsに書き換えてください。

外部CSSファイルやJavaScriptファイルをimportしている場合、外部ファイル内にhttpからの読み込みがないか確認してください。

 

STEP3)コメントパターンにhttpからの読み込みがないか確認する

STEP2の対応で鍵マーク表示にならない場合は、構築メニュー＞ページ設定＞各ページ設定　にて、
該当ページで「コメントパターン」を利用していないか確認します。
利用していた場合、構築メニュー＞ページ設定＞コメントパターン一覧　の該当コメントパターン名を押下し、
コメント内容欄にhttpからの読み込みがないか確認し、httpからの読み込みがあった場合にはhttpsに書き換えてください。

 

STEP4）SNSや広告計測関連のタグにhttpからの読み込みがないか確認する

構築メニュー＞ページ設定＞商品ページ設定　の「ツイートボタン(HTMLタグ)設定」「いいねボタン(HTMLタグ)設定」にhttpからの読み込みがないか確認してください。
また、構築メニュー＞プロモーション管理　の「任意アフィリエイト設定」「広告測定設定」「Google設定」「任意測定タグ設定」に
httpからの読み込みがないか確認してください。
上記にhttpからの読み込みがあった場合、ご利用中の外部ファイルのサービス提供元にご確認の上で、httpsはじまりのパスに書き換えてください。

 

 

グループページ・商品詳細ページの場合

グループページや商品詳細ページは、上部・下部コメント、商品説明などに問題の記述が存在する可能性があります。
グループページや商品詳細のHTML自由記述箇所はCSVで取得できますので、CSV編集ソフトの一括検索・置換機能を利用します。

１）HTML自由記述箇所をCSVで取得できるようにする

futureshop管理画面にCSVをアップロードする際、「CSV上に存在する列」と「商品データ一括登録項目設定のチェックボックス」が
一致しているかどうかをチェックしており、不一致の場合はエラーになります。

本作業後には元のチェック状況に戻していただきますので、以下手順でチェックをONにした項目はメモ帳などに控えておいてください。

 

＜グループページの場合＞

運用メニュー＞商品管理＞商品データ一括登録項目設定＞商品グループ　にて以下にチェックを入れて登録してください。

• コメントHTMLタグ
• 上部コメントHTMLタグ
• 下部コメントHTMLタグ
• BODY直下テキスト
• 上部コメントHTMLタグ（スマートフォン）
• 下部コメントHTMLタグ（スマートフォン）

＜商品詳細ページの場合＞

運用メニュー＞商品管理＞商品データ一括登録項目設定＞商品　にて以下にチェックを入れて登録してください。

• 商品一言説明HTMLタグ
• 商品説明HTMLタグ
• BODY直下テキスト
• 上部コメントHTMLタグ
• 下部コメントHTMLタグ
• 商品価格上部コメントHTMLタグ
• 入荷お知らせメールコメント設定
• 入荷お知らせメール申込誘導コメント設定
• 返品特約について設定
• ツイートボタン表示
• いいねボタン表示
• 上部コメントHTMLタグ（スマートフォン）
• 下部コメントHTMLタグ（スマートフォン）
• 商品説明HTMLタグ（スマートフォン）

 

２）CSVを取得する

運用メニュー＞商品管理＞商品データ一括登録項目設定＞商品データ一括取得　にてCSVを取得します。

グループページの場合は「商品グループ一括登録用ファイル」、
商品詳細ページの場合は「商品一括登録用ファイル」をダウンロードしてください。

 

３）CSV編集ソフトで検索・置換する

CSV編集ソフトで「http://契約ドメイン/」で検索し、「https://契約ドメイン/」に置換します。
（例：http://future-shop.jp→https://future-shop.jpへの置換）

このとき「置換対象が見つかりません」「0個のセルを置換しました。」と表示される場合、
商品説明などのHTML自由記述箇所には原因箇所がありませんので以降の操作は不要です。

置換が行われた場合、CSVで出力したデータ内に原因箇所が存在していた可能性がありますので、
コントロールカラム列に「u」を入力、別名保存をして、
運用メニュー＞商品管理＞商品データ一括登録項目設定＞商品データ一括登録　にてCSVを登録します。

登録後は、運用メニュー＞商品管理＞商品データ一括登録項目設定＞商品データ一括登録履歴一覧　にて
エラーが出ずに「完了」になっていることを確認してください。

 

４）CSV出力項目をもとの状態に戻す

手順１でチェックボックスのON/OFFを変更した場合、作業前の状態に戻して「登録する」ボタンを押下します。

 

スマートフォンページの場合

futureshopが生成するスマートフォンページは、上記ではなく「モバイル」タブ内の記述が出力されます。

以下の設定箇所および利用している外部ファイルにhttpからの読み込みがないか確認し、
httpから読み込む記述がある場合にはhttpsに書き換えてください。

• モバイル＞デザイン設定＞デザインCSS
• モバイル＞ページ設定＞トップページ設定
• モバイル＞ページ設定＞基本設定
• モバイル＞ページ設定＞コメントパターン一覧

 

---

コマースクリエイター利用店舗様の場合

サイト上の全ページが、本件の影響を受ける可能性がある範囲となります。

各ページにGoogle Chromeブラウザでアクセスしていただき、
以下画像のようにアドレスバーに鍵マークが表示されているページは対応不要です。

※購入手続きページなど直接アクセスできないページは、プレビューモードで注文手続きを行ってご確認ください。

iマークが表示されたページの対応方法

コマースクリエイターで構築した店舗の場合、CMSサーバー（VPS）オプションを用いてWordPressなどで作ったページ、
もしくはコマースクリエイターのアイテム内にアップロードした静的HTMLファイル以外は、futureshopが生成したページとなります。

futureshopが生成していないページは、サーバーから該当ページのファイルをダウンロードし、
httpから読み込んでいるファイルはhttpsに書き換えてください。
WordPressで作成したページは、WordPress管理画面内の記述を変更してください。

futureshopが生成したページは、該当ページ上で右クリック→「ページのソースを表示」をクリックしてHTMLソースを表示し、
[Ctrl]キー＋[f]キーを同時押下してブラウザ検索を開き、「http://」で検索してください。

画像などのファイルがHITした場合、そちらの部分を「https://」に書き換える必要がございます。
HITしたファイルパスをコピーするか、もしくはメモ帳などに控えてください。

コマースクリエイターでは、主には「パーツ」や「メッセージ」でHTMLを記述しますので、
commerce creator＞パーツ　もしくは　commerce creator＞メッセージ　にて、
先の手順で控えておいたファイルパスを検索してHITしたものを確認・修正してください。
（パーツ検索時は「□表示内容を検索対象にする」にもチェックを入れてください。）

futureshopが生成したページで、URLに/f/が含まれている場合は「フリーページ作成機能」で生成したページですので、
commerce creator＞フリーページ　にて検索してください。

もし上記を確認・変更していただいても鍵マークにならず、問題箇所を見つけられない場合は、サポートにご相談ください。

 

 

以上により、httpsページのアドレスバーが鍵マークに変われば、本件の対応は完了となります。