この記事では、デザインテンプレートを適用可否の確認方法や、既存のテンプレートとデザインテンプレートの差分確認方法、デザインテンプレートの適用方法についてご紹介します。
目次
01SMPのテンプレートとは？
SHANON MARKETING PLATFORM（以降、SMP）で作成するフォーム、サイトが参照するHTML、CSS、Javascriptの集合データです。
デザインテンプレートを編集して更新することで、SMPで作成するフォームやサイトのデザインを自社サイトにあわせたり、お好みのWebやフォームデザインに変更することが可能です。
システム立ち上げ時は、弊社で用意しているデザインテンプレートが反映されています。
|
図１．SMPのフォームイメージ |
デザインテンプレートの種類
デザインテンプレートには2種類のテンプレートが存在します。
環境全体の基盤となるsystem.zip（システムテンプレート）と、個別キャンペーンの中だけに影響させる際に使用するseminar.zip（キャンペーンテンプレート）があります。
適用タイミング
テンプレートの種類に関わらず、デザインテンプレートはSMPにテンプレートを登録した時点で、即時反映されます。
※公開中のフォームに適用する場合は、デザイン崩れ等が起きる恐れがあるため、アクセスが多い時間帯を避けて更新する等の注意が必要です。
参照先の優先順位
個別キャンペーンにseminar.zipが既に適用されている場合、キャンペーンはsystem.zipよりその適用済みのseminar.zipを優先して参照します。
02デザインテンプレートの適用可否を判断する
デザインテンプレート適用の前に影響範囲を確認してから適用可否を判断します。
既にテンプレートのカスタマイズを行っている環境で、影響範囲を確認せずにデザインテンプレートを適用した場合はデザインが崩れたり、フォームに申込できなくなるなどの影響が出る恐れがあります。
| 既にカスタマイズを行っているケース例 | 影響範囲を確認せずに適用した後の影響例 |
|---|---|
| 申込ボタンの遷移先を変更している |
必要な記述が変更/削除され、申込ができない |
| reCAPTCHAを実装している | |
| フォームにGTM、GAタグを埋め込んでいる | フォームのアクセス分析が不可となる |
| フォーム上のデザイン(HTML/CSS等)を変更している | フォームの項目の並び順や見た目が変わる、または表示が崩れる |
seminar.zip（キャンペーンテンプレート）の場合
seminar.zipは、個別キャンペーン（オレンジ色の画面）の管理モードで設定を行い、
設定したキャンペーンのみが適用範囲となるテンプレートです。
seminar.zipが1つでも登録されている個別キャンペーンは、既にカスタマイズを行っている可能性が高いです。
そのため、お客様側で適用操作は行わず、シャノンにご依頼いただくことを推奨します。
まずは営業担当者またはカスタマーサポートまでご連絡ください。
|
図２．seminar.zipのダウンロード箇所 |
system.zip（システムテンプレート）の場合
system.zipは、全キャンペーン（青色の画面）の管理モードで設定を行い、
システム全体の共通デザインとなるテンプレートです。
影響範囲を確認した上で適用可否を判断します。
|
図３．system.zipのダウンロード箇所 |
seminar.zipとsystem.zipの影響範囲や優先順位等の詳細は、以下マニュアルをご確認ください。
影響範囲を確認する
現在SMPに適用中の既存テンプレートと、デザインテンプレートの差分を確認することで影響範囲を確認します。
差分確認を行い、最新バージョンのデザインテンプレートのコードが、既存のデザインテンプレートと異なる場合は、デザインテンプレートのカスタマイズが行われている可能性があります。
差分確認のポイントは、以下画像もご参照ください。
|
図４．差分イメージ |
次の章では、具体的な差分の確認方法をご紹介します。
03デザインテンプレートの差分を確認する
現在SMPに適用させている既存テンプレートとデザインテンプレートの差分を確認する際は、Diff（テキスト比較ツール）を活用します。ここでは、「WinMerge（ウィンマージ）」というソフトウェア（無料）を用いた方法をご紹介します。
※お客様が普段利用しているツールがある場合はそちらのツールをご利用ください。
差分の確認で必要なもの
- WinMerge
- SMPに適用させている既存テンプレート
- 最新のデザインテンプレート
差分を確認するための準備をする
- 「WinMerge」をダウンロード（無料）します。 ダウンロードはこちら
- SMPにログインし、全キャンペーン管理画面（青い画面）の[WEB]より[テンプレート変更]をクリックします。
- [登録日時]が一番最新のものをダウンロードします。
※テンプレートが登録されていない場合は、右上の[デフォルトダウンロード(system.zip)]をクリックし、ダウンロードします。 - 最新のデザインテンプレートをダウンロードします。
- 手順３と４でダウンロードしたzipをそれぞれ解凍します。
WinMergeで差分を確認する
- ダウンロードしたWinMergeを開きます。
- 左上[ファイル]＞[開く]をクリックします。
- １番目のファイルまたはフォルダーの[参照]をクリックし、ダウンロードし解凍した既存のテンプレートを選択し[開く]をクリックし、もう一度[開く]をクリックします。
１番目のファイルまたはフォルダーも[参照]をクリックし、ダウンロードした最新のデザインテンプレートを同じ手順で開きます。 - 右下の[比較]をクリックし、差分があるかを確認します。
※以下画像のように、差分がある箇所はオレンジ色で表示されます。
差分を確認して、デザインテンプレートの適用可否を判断する
デザインテンプレートを適用できる差分と適用できない差分があります。
下記にそれぞれの特徴をご紹介します。下記の差分確認でもデザインテンプレートへの適用を判断できかねる場合は、営業担当者またはカスタマーサポートまでご連絡ください。
■デザインテンプレートを適用できる場合の差分例
例：デザインテンプレートのバージョンアップにより「受講票」のファイルがリリース更新された場合
例）更新されたデザインテンプレートパス：system\seminar_base\bill\plain.html
下記gifのように、WinMergeで差分を確認すると、更新された「受講票」のテンプレートパスでのみ既存のテンプレートとは差分があることが分かります。
このような場合、デザインテンプレートを適用させても、他のファイルには影響を与えないため「４．適用するにあたっての注意事項」をご確認の上、「５.デザインテンプレートを適用させる」を実施することが可能です。
|
図５．差分なしイメージ（左：デザインテンプレート、右：既存のテンプレート） |
■デザインテンプレートを適用できない場合の差分例
例：デザインテンプレートのバージョンアップにより「受講票」のファイルがリリース更新された場合
例）更新されたデザインテンプレートパス：system\seminar_base\bill\plain.html
下記画像のように、更新された「受講票」のデザインテンプレートパス以外にも複数のファイルで差分が場合、既存のテンプレートでカスタマイズを行っている可能性があります。
このような場合は、デザインテンプレートを適用させると他のファイルにも影響を与え、申込みができなくなったり、フォームの表示が崩れてしまう等のトラブルに繋がる恐れがあるため、シャノンへの対応依頼を推奨いたします。
シャノンでは、影響範囲を調査した上で、既存のカスタマイズ箇所は変更せず、今回更新のあったデザインテンプレートの箇所のみ最新情報として適用することが可能です。
まずは営業担当までご連絡ください。
|
図６．デザインテンプレートを適用できない場合の差分イメージ |
04適用するにあたっての注意事項
デザインテンプレートの適用の際は以下ご理解・ご注意の上ご対応ください。
-
適用するタイミングはなるべく影響が少ない時間帯に実施するようお願いします。
-
作業前は必ず更新前の「.zip」ファイルのバックアップの保管をお願いします。
詳細は、以下「.zip」ファイルのバックアップ手順をご確認ください。 -
デザインテンプレートを適用させる際は、必ずサンドボックスで事前に検証を行ってください。
※初期状態では、サンドボックス機能は有効化されていません。
サンドボックス有効化は、弊社の担当営業にご依頼ください。 -
お客様側での操作および環境（htmlファイル）変更にともなう不具合やエラーは、
当社では一切の責任を負いかねます。あらかじめご了承ください。 -
お客様側での操作および環境（htmlファイル）変更にともなうエラー復旧・調査を弊社に依頼する場合は、別途料金がかかるケースがあります。
05デザインテンプレートを適用させる
デザインテンプレートの用意ができたら、テンプレート適用を行いますが、
テンプレート適用前には、必ずzipファイルのバックアップを取っておきましょう。
バックアップを用意しておくことで、デザインなどが意図しない結果になった際に、
バックアップを持っていることで元の状態に戻すことが可能になるため、
適用前にまずは以下手順でzipファイルのバックアップを取得します。
「.zip」ファイルのバックアップ手順
- SMP(本番環境)へログインします。
- 全キャンペーン管理画面（青い画面）の[WEB]より[テンプレート変更]をクリックします。
-
登録日時が最新のテンプレートファイルの右側にあるダウンロードリンクをクリックして、ローカルPC上の任意の場所にファイルを保存します。
サンドボックスでデザインテンプレートを適用させる
- SMP(サンドボックス)へログインします。
- 全キャンペーン管理画面（青い画面）の[WEB]より[テンプレート変更]をクリックします。
- [登録日時]が一番最新のものをダウンロードします。
※テンプレートが登録されていない場合は、右上の[デフォルトダウンロード(system.zip)]をクリックし、ダウンロードします。 - デザインテンプレートを適用させます。
手順２と同じ画面に遷移し、右上の[新規登録]をクリックします。
デザインテンプレートを選択し、任意のファイル名を入力した後に[登録]します。 - 表示崩れが発生していないかを確認します。
個別キャンペーン管理画面(オレンジ色の画面)の[キャンペーン]＞[一覧]の[来場側詳細WEBページ（代理登録利用可）]をクリックし、フォームに表示崩れが発生していないかを確認します。
※複数のキャンペーンの表示を同様に確認することを推奨します。 - 表示崩れが発生していない場合は、本番環境にもデザインテンプレートを適用しましょう。
表示崩れが発生した場合は、「６．デザインが崩れた場合の対処方法」をご確認ください。
SMP(本番環境)にデザインテンプレートを適用させる
- SMP(本番環境)へログインします。
- 全キャンペーン管理画面（青い画面）の[WEB]より[テンプレート変更]をクリックします。
- [登録日時]が一番最新のものをダウンロードします。
※テンプレートが登録されていない場合は、右上の[デフォルトダウンロード(system.zip)]をクリックし、ダウンロードします。 - デザインテンプレートを適用させます。
手順２と同じ画面に遷移し、右上の[新規登録]をクリックします。
デザインテンプレートを選択し、任意のファイル名を入力した後に[登録]します。 - 表示崩れが発生していないかを確認します。
個別キャンペーン管理画面(オレンジ色の画面)の[キャンペーン]＞[一覧]の[来場側詳細WEBページ（代理登録利用可）]をクリックし、フォームに表示崩れが発生していないかを確認します。
※複数のキャンペーンの表示を同様に確認することを推奨します。 - 表示崩れが発生した場合は、「６．デザインが崩れた場合の対処方法」をご確認ください。
|
図７．デザインテンプレート適用イメージ |
06デザインが崩れた場合の対処方法
デザインテンプレート適用後、デザインが崩れた場合は、適用前のファイル（バックアップファイル）を再度適用することで、元の状態に戻すことができます。
バックアップファイル（適用前ファイル）を適用させる
- SMP(本番環境)へログインします。
- 全キャンペーン管理画面（青い画面）の[WEB]より[テンプレート変更]をクリックします。
- 右上の[新規登録]をクリックします。
- 「.zip」ファイルのバックアップ手順 で保存しておいたバックアップファイルを選択し、任意のファイル名を入力した後に[登録]します。
表示崩れが発生した場合は、上記元の状態に戻した状態で、営業担当者またはカスタマーサポートまでご連絡ください。