メインコンテンツへスキップ
  • この記事では、デザインテンプレートを適用可否の確認方法や、既存のテンプレートとデザインテンプレートの差分確認方法、デザインテンプレートの適用方法についてご紹介します。

     

    01SMPのテンプレートとは?

    SHANON MARKETING PLATFORM(以降、SMP)で作成するフォーム、サイトが参照するHTML、CSS、Javascriptの集合データです。

    デザインテンプレートを編集して更新することで、SMPで作成するフォームやサイトのデザインを自社サイトにあわせたり、お好みのWebやフォームデザインに変更することが可能です。

    システム立ち上げ時は、弊社で用意しているデザインテンプレートが反映されています。

    form.PNG

    図1.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つでも登録されている個別キャンペーンは、既にカスタマイズを行っている可能性が高いです。

    そのため、お客様側で適用操作は行わず、シャノンにご依頼いただくことを推奨します。
    まずは営業担当者またはカスタマーサポートまでご連絡ください。

    個キャンテンプレート.png

    図2.seminar.zipのダウンロード箇所

    system.zip(システムテンプレート)の場合

    system.zipは、全キャンペーン(青色の画面)の管理モードで設定を行い、
    システム全体の共通デザインとなるテンプレートです。

    影響範囲を確認した上で適用可否を判断します。

    全キャンペーンテンプレート.png

    図3.system.zipのダウンロード箇所

    seminar.zipとsystem.zipの影響範囲や優先順位等の詳細は、以下マニュアルをご確認ください。

     

    影響範囲を確認する

    現在SMPに適用中の既存テンプレートと、デザインテンプレートの差分を確認することで影響範囲を確認します。

    差分確認を行い、最新バージョンのデザインテンプレートのコードが、既存のデザインテンプレートと異なる場合は、デザインテンプレートのカスタマイズが行われている可能性があります。

    差分確認のポイントは、以下画像もご参照ください。

     

    sabun.jpg

    図4.差分イメージ

     

    次の章では、具体的な差分の確認方法をご紹介します。

     

    03デザインテンプレートの差分を確認する

    現在SMPに適用させている既存テンプレートとデザインテンプレートの差分を確認する際は、Diff(テキスト比較ツール)を活用します。ここでは、「WinMerge(ウィンマージ)」というソフトウェア(無料)を用いた方法をご紹介します。
    ※お客様が普段利用しているツールがある場合はそちらのツールをご利用ください。

     

    差分の確認で必要なもの

    • WinMerge
    • SMPに適用させている既存テンプレート
    • 最新のデザインテンプレート

     

    差分を確認するための準備をする

    1. 「WinMerge」をダウンロード(無料)します。 ダウンロードはこちら
    2. SMPにログインし、全キャンペーン管理画面(青い画面)の[WEB]より[テンプレート変更]をクリックします。
    3. [登録日時]が一番最新のものをダウンロードします。
      ※テンプレートが登録されていない場合は、右上の[デフォルトダウンロード(system.zip)]をクリックし、ダウンロードします。
    4. 最新のデザインテンプレートをダウンロードします。
    5. 手順3と4でダウンロードしたzipをそれぞれ解凍します。

     

    WinMergeで差分を確認する

    1. ダウンロードしたWinMergeを開きます。
    2. 左上[ファイル]>[開く]をクリックします。
      1..png
    3. 1番目のファイルまたはフォルダーの[参照]をクリックし、ダウンロードし解凍した既存のテンプレートを選択し[開く]をクリックし、もう一度[開く]をクリックします。
      1番目のファイルまたはフォルダーも[参照]をクリックし、ダウンロードした最新のデザインテンプレートを同じ手順で開きます。
      2.gif
    4. 右下の[比較]をクリックし、差分があるかを確認します。
      ※以下画像のように、差分がある箇所はオレンジ色で表示されます。
      5.png

     

    差分を確認して、デザインテンプレートの適用可否を判断する

    デザインテンプレートを適用できる差分と適用できない差分があります。
    下記にそれぞれの特徴をご紹介します。下記の差分確認でもデザインテンプレートへの適用を判断できかねる場合は、営業担当者またはカスタマーサポートまでご連絡ください。

     

    ■デザインテンプレートを適用できる場合の差分例

    例:デザインテンプレートのバージョンアップにより「受講票」のファイルがリリース更新された場合

    例)更新されたデザインテンプレートパス:system\seminar_base\bill\plain.html

    下記gifのように、WinMergeで差分を確認すると、更新された「受講票」のテンプレートパスでのみ既存のテンプレートとは差分があることが分かります。


    このような場合、デザインテンプレートを適用させても、他のファイルには影響を与えないため「4.適用するにあたっての注意事項」をご確認の上、「5.デザインテンプレートを適用させる」を実施することが可能です。

    4.gif

    図5.差分なしイメージ(左:デザインテンプレート、右:既存のテンプレート)

     

    ■デザインテンプレートを適用できない場合の差分例

    例:デザインテンプレートのバージョンアップにより「受講票」のファイルがリリース更新された場合

    例)更新されたデザインテンプレートパス:system\seminar_base\bill\plain.html

    下記画像のように、更新された「受講票」のデザインテンプレートパス以外にも複数のファイルで差分が場合、既存のテンプレートでカスタマイズを行っている可能性があります。

    このような場合は、デザインテンプレートを適用させると他のファイルにも影響を与え、申込みができなくなったり、フォームの表示が崩れてしまう等のトラブルに繋がる恐れがあるため、シャノンへの対応依頼を推奨いたします。


    シャノンでは、影響範囲を調査した上で、既存のカスタマイズ箇所は変更せず、今回更新のあったデザインテンプレートの箇所のみ最新情報として適用することが可能です。

    まずは営業担当までご連絡ください。

    5.png

    図6.デザインテンプレートを適用できない場合の差分イメージ

     

     

    04適用するにあたっての注意事項

    デザインテンプレートの適用の際は以下ご理解・ご注意の上ご対応ください。

    • 適用するタイミングはなるべく影響が少ない時間帯に実施するようお願いします。

    • 作業前は必ず更新前の「.zip」ファイルのバックアップの保管をお願いします。
      詳細は、以下「.zip」ファイルのバックアップ手順をご確認ください。

    • デザインテンプレートを適用させる際は、必ずサンドボックスで事前に検証を行ってください。
      ※初期状態では、サンドボックス機能は有効化されていません。
      サンドボックス有効化は、弊社の担当営業にご依頼ください。

    • お客様側での操作および環境(htmlファイル)変更にともなう不具合やエラーは、
      当社では一切の責任を負いかねます。あらかじめご了承ください。

    • お客様側での操作および環境(htmlファイル)変更にともなうエラー復旧・調査を弊社に依頼する場合は、別途料金がかかるケースがあります。

     

    05デザインテンプレートを適用させる

    デザインテンプレートの用意ができたら、テンプレート適用を行いますが、
    テンプレート適用前には、必ずzipファイルのバックアップを取っておきましょう。

    バックアップを用意しておくことで、デザインなどが意図しない結果になった際に、
    バックアップを持っていることで元の状態に戻すことが可能になるため、

    適用前にまずは以下手順でzipファイルのバックアップを取得します。

     

    「.zip」ファイルのバックアップ手順

    1. SMP(本番環境)へログインします。
    2. 全キャンペーン管理画面(青い画面)の[WEB]より[テンプレート変更]をクリックします。
    3. 登録日時が最新のテンプレートファイルの右側にあるダウンロードリンクをクリックして、ローカルPC上の任意の場所にファイルを保存します。
      backup.gif

     

    サンドボックスでデザインテンプレートを適用させる

    1. SMP(サンドボックス)へログインします。
    2. 全キャンペーン管理画面(青い画面)の[WEB]より[テンプレート変更]をクリックします。
    3. [登録日時]が一番最新のものをダウンロードします。
      ※テンプレートが登録されていない場合は、右上の[デフォルトダウンロード(system.zip)]をクリックし、ダウンロードします。
    4. デザインテンプレートを適用させます。
      手順2と同じ画面に遷移し、右上の[新規登録]をクリックします。
      デザインテンプレートを選択し、任意のファイル名を入力した後に[登録]します。
    5. 表示崩れが発生していないかを確認します。
      個別キャンペーン管理画面(オレンジ色の画面)の[キャンペーン]>[一覧]の[来場側詳細WEBページ(代理登録利用可)]をクリックし、フォームに表示崩れが発生していないかを確認します。
      ※複数のキャンペーンの表示を同様に確認することを推奨します。
    6. 表示崩れが発生していない場合は、本番環境にもデザインテンプレートを適用しましょう。
      表示崩れが発生した場合は、「6.デザインが崩れた場合の対処方法」をご確認ください。

     

    SMP(本番環境)にデザインテンプレートを適用させる

    1. SMP(本番環境)へログインします。
    2. 全キャンペーン管理画面(青い画面)の[WEB]より[テンプレート変更]をクリックします。
    3. [登録日時]が一番最新のものをダウンロードします。
      ※テンプレートが登録されていない場合は、右上の[デフォルトダウンロード(system.zip)]をクリックし、ダウンロードします。
    4. デザインテンプレートを適用させます。
      手順2と同じ画面に遷移し、右上の[新規登録]をクリックします。
      デザインテンプレートを選択し、任意のファイル名を入力した後に[登録]します。
    5. 表示崩れが発生していないかを確認します。
      個別キャンペーン管理画面(オレンジ色の画面)の[キャンペーン]>[一覧]の[来場側詳細WEBページ(代理登録利用可)]をクリックし、フォームに表示崩れが発生していないかを確認します。
      ※複数のキャンペーンの表示を同様に確認することを推奨します。
    6. 表示崩れが発生した場合は、「6.デザインが崩れた場合の対処方法」をご確認ください。

     

    system.gif

    図7.デザインテンプレート適用イメージ

     

    06デザインが崩れた場合の対処方法

    デザインテンプレート適用後、デザインが崩れた場合は、適用前のファイル(バックアップファイル)を再度適用することで、元の状態に戻すことができます。

     

    バックアップファイル(適用前ファイル)を適用させる

    1. SMP(本番環境)へログインします。
    2. 全キャンペーン管理画面(青い画面)の[WEB]より[テンプレート変更]をクリックします。
    3. 右上の[新規登録]をクリックします。
    4. 「.zip」ファイルのバックアップ手順 で保存しておいたバックアップファイルを選択し、任意のファイル名を入力した後に[登録]します。

     表示崩れが発生した場合は、上記元の状態に戻した状態で、営業担当者またはカスタマーサポートまでご連絡ください。

    デザインテンプレートの適用可否の判断とSMPへの適用方法について

  • ここでは、Webページを修正するための「デザインテンプレート」の概要について紹介させていただきます。

     

    1-1. デザインテンプレートができること

    SMPではリードのデータ管理やメールなどの施策管理だけでなく、CMSとしてマイページや申込画面のコンテンツを管理することが可能です。中級編をマスターしていただくと、SMPで作成するページのコンテンツ・レイアウト・動きを、皆様の運用に合わせてカスタマイズすることができます。このコンテンツ・レイアウト・動きを決めているのが「デザインテンプレート」です。本編では、これをカスタマイズする方法をご紹介します。

     

    1-2. デザインテンプレートの構成要素

     

    contents.png

    図1:デザインテンプレート内のファイル

    テンプレートの中には以下のファイルが含まれています。

    ・HTMLファイル:ページの見出し・本文・構造を決める

    ・CSSファイル:ページ内の色や配置などのレイアウトを決める

    ・javascriptファイル:ユーザーの閲覧や操作に応じてポップアップやデータの授受などの動きを決める

    ・画像ファイル:ページで表示する画像を決める

     

    1-3. デザインテンプレートで編集できるページ

    SMPでは下記図に示すページをご用意しています。これらのページ全てをSMPのデザインテンプレートで編集することができます。

     

    mceclip0.png

    図2:SMPサイトマップ(サイト構成/画面遷移図)

    拡大版ダウンロード:【標準デザインテンプレート】SMPサイトマップ(サイト構成/画面遷移設計図)

    大きく分けると以下の画面があります
    ・キャンペーン詳細、申込フォーム
    ・キャンペーン一覧(ポータルページ)
    ・マイページ
    ・ログイン
    ・そのほかエラーや配信停止

     

    1-4. デザインテンプレートの種類

     

    __98.png

    図3:デザインテンプレートのダウンロード画面

    デザインテンプレートには以下2種類あり、それぞれ適用範囲が異なります。

    全キャンペーン管理画面(青色の画面)から取得・登録する「システムテンプレート=system.zip」

    個キャンペーン管理画面(オレンジ色の画面)から取得・登録する「キャンペーンテンプレート=seminar.zip」

     

    ■「システムテンプレート」の適用範囲

    システムテンプレートの編集内容は、全てのキャンペーンの、全て画面(サイトマップ参照)に反映されます。

    ■「キャンペーンテンプレート」の適用範囲

    キャンペーンテンプレートの編集内容は、そのキャンペーンの、ピンク領域の画面(サイトマップ参照)にのみ反映されます。

    MEMO≫ 適用範囲の違いについて

    サイトマップのピンク領域に含まれる画面は、個々のキャンペーン毎に用意されています。それに対してピンク領域以外は「マイページ」や「ログイン画面」など特定のキャンペーンに依存しない画面(システムに共通する1つの画面)なので、「システムテンプレート」でのみ編集可能です。

    MEMO≫「キャンペーンテンプレート」で編集した画面を「システムテンプレート」で編集すると更新されるか?

    この場合は更新されません。前提として、デザインテンプレートの適用優先度は以下です。

      「キャンペーンテンプレート」>「システムテンプレート」

    キャンペーンテンプレートを既に適用している場合、その後システムテンプレートを登録しても、そのキャンペーンに反映されません(反対に、システムテンプレート登録によるデザイン変更後、キャンペーンテンプレートを登録すると、デザインは適用されます)。

     

    system.zip_inf.png

    図4:デザインテンプレートの適用優先度

     

     

    1-5. デザインテンプレートのフォルダ構成

     

    folder.png

    図5:フォルダ構成

    ■テンプレートの構成

    ・キャンペーンテンプレートの中にはapplication,unsubscribeなどのフォルダがあり、これらの中にキャンペーン詳細画面、申込画面などのHTMLファイルが含まれています。また、Sharedの中にCSS,JS,画像ファイルが存在します。

    ・システムテンプレートの中にはlogin,mypageなどのフォルダがあり、これらの中にログイン画面やマイページ画面のHTMLファイルが含まれています。また、seminar_beseというフォルダがありますが、これは個別キャンペーンにまだキャンペーンテンプレートを適用していない場合にデフォルトで適用されるデザインです。実際にseminar_baseフォルダの中身を見ると構成がSeminar.zipと同じ(上記図参照)となっていますが、これは個別キャンペーンのデフォルトデザインだからです。

     

    1-6. 画像・CSS・jsの編集方法

     

    path4.png

    図6:ファイルパス指定

    ■ファイルの設置方法(フォルダの階層)

    sharedの中に画像・CSS・JavaScriptのフォルダ・ファイルが用意されているので、これらの中に各種ファイルを設置してください。

    ■ファイルパス(相対パス)の指定方法

    画像,CSS,jsが含まれるsharedフォルダは、キャンペーンテンプレートにもシステムテンプレート(seminar_beseフォルダ内)にも存在します。通常の運用であまり意識することはないですが、どのようなファイルパスを宣言するかによって、キャンペーンテンプレートのsharedフォルダ(画像,CSS,js)を読み込むか、システムテンプレートのsharedフォルダ(画像,CSS,js)を読み込むかを決めることができます。

    具体的には、ファイルパスを

    href="__base_system_path__/shared/css/***.css"

    と書いた場合、それを宣言したHTMLファイルが仮にキャンペーンテンプレートのものであったとしても、システムテンプレートからファイルを読み込んできます。

    href="__base_seminar_path__/shared/css/***.css"

    と書いた場合、それを記載したHTMLファイルがシステムテンプレートのものであったとしても、キャンペーンテンプレートからファイルを読み込んできます。

    MEMO≫ パスとは?

    Webページで画像・CSS・JavaScriptを読み込むためには、その画面に対応するHTMLが読み込まれた際、そのHTMLからさらに画像・CSS・JavaScriptファイルを読み込む必要があります。その場所を指定するための宣言がファイルパスです。

     

    1-7. 変数($FORM)の特徴

    ■変数とは

    キャンペーンのタイトルを変更したいとき、あるいはフォームの入力項目の表示非表示を切り替えたいなどというとき、わざわざHTMLを書き替えるのは面倒ですよね。SMPでご用意している「変数」を予めHTMLに埋め込んでおけば、後の運用では管理画面から設定を少し変えるだけで、ページに出力される様々な内容を変えることができます。

    ■変数の仕組み

    例として、管理画面で変更したキャンペーンタイトルがWebページに表示される仕組みは以下のようになっています。

    1. サイト訪問者がブラウザでWebページ(キャンペーン詳細画面)を読み込む=HTMLが読み込まれる

    2. HTML内に埋め込んだ変数(例:$FORM{title})が読み込まれる

    3. 変数に格納されているSMP設定項目の値(例:(キャンペーンタイトル))が読み込まれる

    4.SMP設定項目の値(例:(キャンペーンタイトル))がWebページに表示される

    このように、変数が管理画面の設定値を読み込み、その情報をページ上に表示してくれるため、HTMLを書き替える必要がなくなります。

     

    variable.png

    図7:変数

     

    MEMO≫ 変数($FORM)の入れ子構造

    一部の変数では、上記のように管理画面の設定値を読み込むために使われるのではなく、別のHTMLファイルの内容を出力するためのものがあります。例えば、確認画面のHTMLである「confirm/index.html」ファイルには$FORM{cart}があります。この変数には下右図のように別のHTMLファイル「confirm/cart.html」が格納されています。これにより、確認画面を読み込む際は、下左図の$FORM{cart}部分に「confirm/cart.html」の内容が挿入される形で表示されることになります。

     

    variable2.png

    図8:変数($FORM)の入れ子構造

    この変数はHTMLの内容を分類整理するために使われる変数です。HTML編集を行う際は知っておくと便利ですので、覚えておきましょう。

     

    1. デザインテンプレートの構成を知ろう

  • ここでは、Webページを修正するための「デザインテンプレート」の修正方法を紹介させていただきます

     

    2-1. デザインテンプレートをダウンロードする

    個別キャンペーンまたは全キャンペーン管理画面のテンプレートをダウンロードします。

    テンプレート一覧画面から、最新登録日時の[ダウンロード]リンクをクリックします。 テンプレートが何も登録されていない場合は、[デフォルトダウンロード(seminar.zip)]ボタンをクリックします。

     

    ■全キャンペーン画面から取得・登録「システムテンプレート=system.zip」

     [WEB]≫[テンプレート変更]メニュー ≫「ダウンロード」または「新規登録」

    __102.png

    図1:システムテンプレートのダウンロード

    ■個別キャンペーン画面から取得・登録「キャンペーンテンプレート=seminar.zip」

     [キャンペーン]≫[キャンペーンテンプレート変更]メニュー ≫「ダウンロード」または「新規登録」 

    __106.png

    図2:キャンペーンテンプレートのダウンロード

    MEMO≫ 「デフォルトダウンロード」とは何か?

    __110.png

    図3:[デフォルトダウンロード]ボタン

    キャンペーンテンプレートの「デフォルトダウンロード」を使うと、登録されているシステムテンプレートの中から、キャンペーンに関連する画面のみ取得してくることができます(=SMPに登録されているシステムテンプレートの"seminar_base"フォルダ。seminar_baseフォルダについてはページ「1-1.デザインテンプレートの構成を知ろう」の見出し「1-5. デザインテンプレートのフォルダ構成」を参照)。
    システムテンプレートの「デフォルトダウンロード」は古いデザインのテンプレートが取得されますので、基本的には使用しないでください。

     

    2-2. 修正したい画面のHTMLファイルパスを確認する

    ■テンプレートパスの表示方法

    管理画面から来場側詳細WEBページ(「プレビュー画面」とも呼ぶ)にアクセスします。

    __114.png

    図4:[来場側詳細WEBページ]リンク

     

    画面左上にポップアップが出ます。その中にある「テンプレートパスの表示」をON にしてください。

    ▽テンプレートパスの表示 OFF

    path_off.png

    図5:テンプレートのパスの表示:OFF

    ▽テンプレートパスの表示 ON

    path_on.png

    図6:テンプレートのパスの表示:ON


    ■テンプレートパスの見方

    ページのなかで修正したい箇所のすぐ上に表示されている「テンプレートパス」で指定されたHTMLファイルを修正します。

    (例)テンプレートパスが以下の指定されている場合

    seminar_base/application/application_flow_master_id/user_enquete/index.html

    それぞれのテンプレートから、以下のファイルを確認します。

    ◇システムテンプレート(system.zip)

    system¥seminar_base¥application¥application_flow_master_id¥user_enquete¥index.html

    ◇キャンペーンテンプレート(seminar.zip)

    seminar¥application_flow_master_id¥user_enquete¥index.html

    ▽デスクトップに置いたキャンペーンテンプレート("seminar"フォルダ内の該当HTMLファイル)

    file.png

    図7:キャンペーンテンプレート内の該当HTML

    MEMO≫ テンプレートパスが消えない場合

    稀に「テンプレートパスの表示 OFF」をクリックしても、テンプレートパスが消えない場合があります。
    これを解消するには、「管理者ページに戻る」で管理画面に戻ります。

    [設定]≫[システム設定一覧]メニュー≫[キャッシュクリア]ボタン(ページ最下部)をクリック

    サーバーのキャッシュが残っていることが原因です。このボタンをクリックすることで、サーバーのキャッシュをクリアすることができます。
    上記を行うと、すべてのページのキャッシュがクリアされます。そのため、お客様への影響の少ない時間帯に実施しましょう。

    __118.png

    図8:[キャッシュクリア]ボタン

     

    2-3. HTMLファイルを修正する

    テキストエディタを使い、該当のHTMLファイルを修正してください。

     

    2-4. デザインテンプレートを圧縮し、アップロードする

    ZIP形式に圧縮し、[新規登録]ボタンから更新します。

    __120.png

    図9:デザインテンプレートのアップロード

    MEMO≫新規登録時にエラー「設定ファイル(Config.yaml)のフォーマットが違います。」が出る場合

    デザインテンプレートは、誤って別のキャンペーンに登録されたり、別のSMPドメインに登録されたりすることを防ぐため、config.yamlというファイルを含んでいます。このファイルに記載されたドメイン名やキャンペーンIDと異なるドメイン・キャンペーンにアップロードしようとすると、エラーとなります。

    config.yaml

    Url: https://***.jp/
    SeminarId: ***

    特にキャンペーンコピーにより作成されたキャンペーンでは、config.yamlに記載のキャンペーンIDがコピー元キャンペーンのIDであるため、IDが一致せずエラーが発生します。エラーが発生した場合は、適用されるキャンペーンのキャンペーンIDに変更しましょう。

    2-5. 修正した画面を確認する

    反映結果を確認してください。

    ※確認方法は「2-2. 修正したい画面のHTMLファイルパスを確認する」参照

    MEMO≫デザインテンプレートを適用したにもかかわらず、Webページに反映されない場合

    以下を実施してください。

    (1)ブラウザのキャッシュクリア

    (2)SMPのシステム設定一覧画面最下部の[キャッシュクリア]ボタンをクリック(ボタンの場所は「2-2. 修正したい画面のHTMLファイルパスを確認する」参照)

    (3)相対パスの正誤確認(前ページ「1-6. 画像・CSS・jsの編集方法」≫「ファイルパス(相対パス)の指定方法」を参照)

    2. デザインテンプレートの利用手順を知ろう

  • ここでは、デザインテンプレートを変更方法を身につけるための課題を紹介させていただきます。

     

    3-1. 【課題】申込確認画面≫カート編集/削除

    無料のセミナーを開催するときに参加費を表示したくない、またはそもそも申込内容は表示させず、申込者情報だけ表示させれば良い、という場合を想定します。下記のafterのように、申込内容(「カート」と呼ぶ)から「参加費」を削除、また、「お申込内容」を削除してみましょう。

    ▽before

    cart_default.png

    図1:お申込内容

    ▽after1: 「お申込内容」≫「参加費」欄を削除

    cart_1.png

    図2:お申込内容の編集

    ▽after2: 「お申込内容」を削除

    cart_2.png

    図3:お申込内容の削除

     

    3-2. 【課題】キャンペーン詳細画面≫キャンペーン追加項目の表示

    キャンペーン詳細画面に表示させる項目として、新たに「後援」という情報を追加する場合を想定します。なお、手順としてはキャンペーン項目として「後援」を新たに追加し、その項目に対応する変数をHTMLに記載する必要がありますが、これら項目追加および変数確認の方法は本項で後述します。

    ▽before:「後援」という項目がない状態

    preview_default.png

    図4:キャンペーン詳細

    ▽after: 「後援」という項目がある状態

    preview_1.png

    図5:キャンペーン詳細に後援を追加

    MEMO≫ キャンペーン項目「後援」の追加方法

    [キャンペーン]≫[項目追加]メニュー≫[新規登録]ボタン

    から追加してください(新規登録画面で設定する「表示/非表示」は「表示」を選択)。

    __124.png

    図6:キャンペーンの項目追加

    MEMO≫ 追加した項目に対応する変数の確認方法

    テンプレートの登録画面から[システムテンプレート変数簡易一覧]ボタンをクリックし、設定項目と変数の対応表をダウンロードしてください(以下はシステムテンプレートの図だが、キャンペーンテンプレートの場合も同様)。

    __128.png

    図7:[システムテンプレート変数簡易一覧]ボタン

     

    3-3. 【課題】キャンペーン詳細画面≫申込ボタンの変更

    アンケートフォームを作るため、キャンペーン詳細画面からフォームに遷移させるためのボタンを、「申込」ボタンから「回答」ボタンに変更します。

    ▽before

    preview_button_before.png

    図8:[申込]ボタン

    ▽after

    preview_button_after.png

    図9:[申込]ボタンから[回答]ボタンへ変更

    MEMO≫ 変数のファイルパスへの利用(「回答」ボタン画像のありか)

    「申込」ボタン/「回答」ボタンとして、画像が標準で用意されています。これらの画像のファイルパスについて補足します。

    申込ボタンのファイルパスを見ると、下記のようになっています。

    seminar_base/application/application_flow_master_id/application_button_at_seminar_view/
    application_link.html

    さらに、application_link.htmlの中身を見ると、ボタンのファイルパスが下記のように記載されており、btn_form_o.gifを読み込んでいることが分かります。

    <input type="image" src="__base_seminar_path__/shared/themes/$FORM{theme}/img/btn_form_o.gif" 
    alt="申込" onclick="location='/public/application/add/$FORM{id}'" >

    この「$FORM{theme}」が分かれば、テンプレートのフォルダ階層が分かり、画像の置き場所を探すことができます。

    下記GIFのように画像のアドレスを見ると、この$FORM{theme}の箇所には"skyblue"が格納されていることが分かります。

    img_path.gif

    図10:画像置き場の確認方法

    以下の階層で探せば画像ファイルが見つかります

    shared¥themes¥skyblue¥img¥btn_form_o.gif

    ※$FORM{theme}はSMPの公開画面のテーマカラーの設定であり、以下「ヘッダーフッター編集」画面で設定可能です。設定するとどうなるか、ぜひ試してみてください。

    __132.png

    図11:テーマカラーの変更

    3. デザインテンプレートを変更してみよう 課題編

  • ここでは、「デザインテンプレートを変更してみよう 課題編」の具体的な変更手順について解説させていただきます。

     

    4-1.【課題】申込確認画面≫カート編集/削除

    STEP1:デザインテンプレートをダウンロードする

    テンプレート一覧画面で最新登録日時の[ダウンロード]リンクをクリックします。テンプレートが登録されていない場合は、[デフォルトダウンロード(seminar.zip)]ボタンをクリックします。

    ダウンロードされたZIPファイルは解凍しておきます。

    _______12.gif

    図1:デザインテンプレートのダウンロード


    STEP2:修正したい画面のHTMLファイルパスを確認する

    今回はカートのすぐ上に表示された3つのパスが対象です。

    seminar_base/application/application_flow_master_id/confirm/cart.html
    seminar_base/application/application_flow_master_id/confirm/cart_record.html
    seminar_base/application/application_flow_master_id/confirm/cart_sum.html

    ※キャプチャでは 管理画面(テンプレート一覧)≫管理画面(キャンペーン詳細)≫キャンペーン詳細画面≫フォーム入力画面≫フォーム確認画面≫カート関連パス選択...と操作しています。

    _______14.gif

    図2:修正したい画面のHTMLファイルパスを確認

    STEP3:HTMLファイルを修正する

    「STEP1」で展開しておいたフォルダ/ファイルをテキストエディタで開きます。事前に編集するファイルをコピーしておきます。(例)cart.html→cart_bkup.html

    ①まずはカートのテーブルの一行目三列目「参加費」のヘッダーを削除します

    seminar_base/application/application_flow_master_id/confirm/cart.html

    work1_step3_1.gif

    図3:カートのテーブルの<th>参加費</th>を削除

    ②カートのテーブルの二行目三列目「***円」のセルを削除します。

    seminar_base/application/application_flow_master_id/confirm/cart_record.html

    work1_step3_2.gif

    図4:カートのテーブルの<td>$FORM{unit_price}円</td>を削除


    ③カートのテーブルの三行目をすべて削除します。

    seminar_base/application/application_flow_master_id/confirm/cart_sum.html

    work1_step3_3.gif

    図5:カートのテーブルの三行目を削除

    MEMO≫ テンプレート編集のシミュレーション

    SMPの機能ではありませんが、ブラウザの開発者コンソール(F12ボタン)を使えば、HTMLのどの箇所を編集するとページがどう変わるかのシミュレーションができます。

    work1_step3_memo.gif

    図6:テンプレート編集のシミュレーション

    STEP4:デザインテンプレートを圧縮し、アップロードする

    _______13.gif

    図7:デザインテンプレートの圧縮(zip)、アップロード

    STEP5:修正した画面を確認する

    __114.png

    図8:来場側詳細WEBページから編集した画面を確認

    もし反映されない場合、ブラウザのキャッシュクリア、システム設定のキャッシュクリアをお試しください。

     

    4-2.【課題】キャンペーン詳細画面≫キャンペーン追加項目の表示

    事前準備1:キャンペーン項目「後援」の追加

    (全キャンペーン)[キャンペーン]≫[項目追加]メニュー≫[新規登録]ボタン

    キャンペーン項目「後援」を追加し、キャンペーンの詳細設定で該当の項目に値を登録します。

    _______15.gif

    図9:キャンペーン項目の追加と該当項目の値を入力

    事前準備2:追加した項目に対応する変数の確認

    [キャンペーン]≫[キャンペーンテンプレート変更]メニュー≫[テンプレート変数簡易一覧]ボタン

    _______16.gif

    図10:テンプレートの変数一覧から項目変数の確認

    STEP1:デザインテンプレートをダウンロードする

    テンプレート一覧画面で最新登録日時の[ダウンロード]リンクをクリックします。テンプレートが登録されていない場合は、[デフォルトダウンロード(seminar.zip)]ボタンをクリックします。

    ダウンロードされたZIPファイルは解凍しておきます。

    _______12.gif

    図11:デザインテンプレートのダウンロード

    STEP2:修正したい画面のHTMLファイルパスを確認する

    以下のHTMLがキャンペーンの詳細情報を直接出力していることを確認します。

    seminar/preview.html

    work2_step2.gif

    図12:修正したい画面のHTMLファイルパスを確認

    STEP3:HTMLファイルを修正する

    「事前準備2:追加した項目に対応する変数の確認」で分かった変数をテンプレートに埋め込みます。_______13.gif

    work2_step3.gif

    図13:テーブルの<tr></tr>を追加、項目名と変数を編集

    STEP4:デザインテンプレートを圧縮し、アップロードする

    _______13.gif

    図14:デザインテンプレートの圧縮(zip)、アップロード

    STEP5:修正した画面を確認する

    __114.png

    図15:来場側詳細WEBページから編集した画面を確認

     

    4-3.【課題】キャンペーン詳細画面≫申込ボタンの変更

    STEP1:デザインテンプレートをダウンロードする

    テンプレート一覧画面で最新登録日時の[ダウンロード]リンクをクリックします。テンプレートが登録されていない場合は、[デフォルトダウンロード(seminar.zip)]ボタンをクリックします。

    ダウンロードされたZIPファイルは解凍しておきます。

    _______12.gif

    図16:デザインテンプレートのダウンロード

    STEP2:修正したい画面のHTMLファイルパスを確認する

    以下のパスでボタンを出力していることを確認します。

    application/application_flow_master_id/application_button_at_seminar_view/application_link.html


    また、このボタンはCSSではなく画像(gif)で作られていることから、画像を差し替えることで変更できることが分かります。

    https://(ドメイン名)/static/upload/(ドメイン名)/seminar/(キャンペーンID)/shared/themes/skyblue/img/btn_form_o.gif

    work3_2.gif

    図17:画像置き場の確認方法

    STEP3:HTMLファイルを修正する

    ①HTMLファイルを確認する

    HTMLファイルを見ると以下のようなコードで画像が出力されていることが分かります。

    <input type="image" src="__base_seminar_path__/shared/themes/$FORM{theme}/img/btn_form_o.gif" 
    alt="申込" onclick="location='/public/application/add/$FORM{id}'" >

    この"btn_form_o.gif"を別ファイルの画像名に変更すれば画像が差し替わります。

    work3_3.gif

    図18:HTMLファイルから画像を確認

    この画像のパスの「$FORM{theme}」部分ですが、STEP2で画像のURLを確認したとおり「skyblue」が入るので、「skyblue」≫「img」フォルダからこの「申込」ボタンに代わる「回答」ボタンの画像を探しましょう。

    https://(ドメイン名)/static/upload/(ドメイン名)/seminar/(キャンペーンID)/shared/themes/skyblue/img/btn_form_o.gif

    「回答」ボタンを見つけたら、HTMLのパスをその画像名に書き替えます。

    work3_3_2.gif

    図19:HTMLのパスを画像名に変更

    STEP4:デザインテンプレートを圧縮し、アップロードする

    _______13.gif

    図20:デザインテンプレートの圧縮(zip)、アップロード

    STEP5:修正した画面を確認する

    __114.png

    図21:来場側詳細WEBページから編集した画面を確認

    4. デザインテンプレートを変更してみよう 回答編

  • デザインテンプレートをアップロードするカスタマイズしたデザインテンプレートをSMPにアップロードします。補足定期的にユーザ様向けのトレーニングを実施しております。カスタマイズが難しい場合は、弊社でデザインテンプレートカスタマイズサービスを有償でご提供しております。また、専用のトレーニング実施も有償にて実施しています。有償サービスをご希望の場合は、弊社担当者もしくはカスタマーサポートまでお問合せください。デザインテンプレートをアップロードする方法は、次のとおりです。テンプレート画面の[新規登録]ボタンをクリックして、カスタマイズしたsystem.zipをアップロードしますテンプレートの登録情報を指定します補足「ファイル名」はアップロードしたファイル名が自動で挿入されますが、改めてファイル名を変更することもできます。[登録]ボタンをクリックしますテンプレート一覧画面にテンプレートが表示(登録)されていることを確認します注意■共通の注意事項・「system」や「seminar」といったフォルダ名と圧縮したZIPファイル名に使用できる文字は半角の英数字、半角記号です。・フォルダ名・ファイル名は、ダブルバイト不可です(半角英数字のみ)のでご注意ください。・解凍する際に、使用するソフトによっては、自動的に「system」などのフォルダの中に展開するものもあります。登録用の圧縮ファイルを作る際は、下の図を参考に、フォルダの階層に注意してください。■システムテンプレート(system.zip)をアップロードする前の注意事項システムテンプレートをアップロードする際はConfig.yamlファイルのURLがテンプレートを割り当てるドメイン名になっているかを確認します。確認ファイルは、「Config.yamlファイルConfig.yamlファイル内」です。■キャンペーンテンプレート(seminar.zip)をアップロードする前の注意事項キャンペーンテンプレートをアップロードする際はConfig.yamlファイルのseminarIDがテンプレートを割り当てるキャンペーンのIDである必要があります。キャンペーンIDは、全キャンペーンモード、キャンペーンメニュー、一覧の該当キャンペーンの「プレビュー」リンクにカーソルを合わせた際にウィンドウ下に表示されるURLの末尾番号となります。確認ファイルは、次の2箇所です。・「Config.yamlファイルConfig.yamlファイル内」・全キャンペーンモード「キャンペーン」一覧の該当キャンペーンの「プレビュー」リンク
    https://smpdoc.shanon.co.jp/ja/web/systemtemplate/chapter003/

    デザインテンプレートをアップロードする

  • テンプレートを確認するシステム全体またはキャンペーン全体にテンプレートを適用することで、サイトのデザイン変更をすることができ、自社サイトにあわせたりお好みのWebやフォームデザインにすることが可能です。システム立ち上げ時は弊社デフォルトテンプレートが反映されています。補足・テンプレートとは、システムが利用するHTML、CSS、Javascriptの集合です。・デザインテンプレートには、環境全体の基盤となるシステムテンプレート(system.zip)と個別キャンペーンの中だけに影響させる際に使用するキャンペーンテンプレート(semina.zip)があります。詳細は「デザインテンプレートの種類」ページをご参照ください。テンプレート一覧画面を確認するテンプレートを新規登録するテンプレートのデフォルトテンプレートをダウンロードするテンプレートの変数簡易一覧を確認するテンプレートを該当バージョンに戻すアップロードされたことのあるテンプレートをダウンロードするテンプレート一覧画面を確認するシステムテンプレートの一覧を確認するには、次のとおりです。項目の詳細は、次のとおりです。No項目説明1新規登録システムテンプレートを新規登録します。詳細は「デザインテンプレートをアップロードする」ページもご参照ください。2デフォルトダウンロード(system.zip)システムテンプレートを作成するためのデフォルトテンプレートとなるsystem.zipをダウンロードすることができます。詳細は「テンプレートのデフォルトテンプレートをダウンロードする」をご参照ください。3システムテンプレート変数簡易一覧テンプレートのカスタマイズ時に利用できる各項目の変数($FORM)と利用できるフォーム画面の一覧です。詳細は「テンプレートの変数簡易一覧を確認する」をご参照ください。4このバージョンに戻す該当テンプレートのテンプレートバージョンに戻します。詳細は「テンプレートを該当バージョンに戻す」をご参照ください。5ダウンロード該当テンプレートをダウンロードします。詳細は「アップロードされたことのあるテンプレートをダウンロードする」テンプレートを新規登録するテンプレートを新規で作成し登録します。テンプレートの登録方法は「デザインテンプレートをアップロードする」ページをご参照ください。テンプレートのデフォルトテンプレートをダウンロードするテンプレートのデフォルトテンプレートをダウンロードします。デフォルトテンプレートとはカスタマイズする前のシステムで保持しているテンプレートを指します。デフォルトダウンロード方法は、次のとおりです。テンプレート変更画面([WEB][テンプレート変更])に遷移します[デフォルトダウンロード(system.zip)]ボタンをクリックしますダウンロードしたzipファイルより、フォルダ内をカスタマイズしますテンプレートの変数簡易一覧を確認するテンプレートのカスタマイズ時に利用できる各項目の変数($FORM)と利用できるフォーム画面の一覧をダウンロードすることができます。変数一覧の確認方法は、次の通りです。テンプレート変更画面([WEB][テンプレート変更])に遷移します[システムテンプレート変数簡易一覧]ボタンをクリックしますダウンロードしたファイルより、利用できる各項目の変数($FORM)とその利用可能なフォーム画面を確認しますテンプレートを該当バージョンに戻す該当テンプレートのテンプレートバージョンに戻します。履歴の最上位に位置しているテンプレートが最新であり、システムに反映されているテンプレートです。該当テンプレートバージョンに戻す方法は、次のとおりです。テンプレート変更画面([WEB][テンプレート変更])に遷移します戻したいテンプレートの[このバージョンに戻す]リンクをクリックしますテンプレート一覧画面の最上位に移動されている(=テンプレートが反映されている)ことを確認しますアップロードされたことのあるテンプレートをダウンロードする過去にアップロードされたことのあるテンプレートを再利用してテンプレートの編集ができます。テンプレートを画面上で確認することができるのは、直近アップロードされたテンプレート3件までです。テンプレート変更画面([WEB][テンプレート変更])に遷移します再利用したいテンプレートの[ダウンロード]リンクをクリックします
    https://smpdoc.shanon.co.jp/ja/web/systemtemplate/chapter001/

    テンプレートを確認する

  • SMPに管理者ログインした状態で申込み画面を表示した際、テンプレートパスが表示されない原因は「ファイルパスの表示がOFF」「カスタマイズCSSの影響」のいずれかが考えられます。本記事では、それぞれの対処方法を説明します。

    _________________.JPG

    図1:テンプレートパスが表示されているイメージ

     

    1.原因

    テンプレートのファイルパスが表示されない原因は、大きく分けて2つあります。

    • ファイルパスの表示がOFFになっている
    • ファイルパスの表示用タグがCSSの影響で画面上に見えない

     

    2.対処方法

    2.1. テンプレートパスの表示がOFFになっている場合

    テンプレートパスの表示を、OFFからONに切り替えます。

    全キャンペーン管理モード(青画面)>サイドメニュー:キャンペーン>一覧リンク

     

    1. 全キャンペーン管理モードの[キャンペーン]タブ>対象のキャンペーン>プレビューをクリックします。
    2. 申込画面が表示されます。
    3. 画面左上に表示される枠内の「テンプレートパスの表示」項目を確認します。
    4. OFFになっている場合、「切り替え」をクリックし、「ON」にします。

    _____________.gif

    図2:テンプレートパスの表示切り替えイメージ

     

    2.2. ファイルパスの表示用タグがCSSの影響で画面上に見えない

    表示用タグには「template-layout」という「id名」が付与されています。
    この表示用タグが、HTMLソースに記載されているか確認してください。

    pass.gif

    図3:セミナープレビューのページでの表示タグ確認イメージ

     

    HTMLソースに記載されている場合、テンプレートカスタマイズを行った際に追加したCSSの影響を受けている可能性が高いと考えられます。シャノンの担当営業もしくは、テンプレートのカスタマイズを行った企業様へお問い合わせください。

    <HTMLソース表示方法>
    Microsoft Edge の場合

    1. 対象のページを表示し、 [F12] を押して「開発者ツール」を表示します。
    2. 「要素」タブをクリックします。
    3. 左上のメニューからテンプレートパスの表示:ONにします。
    4. 「template-layout」というid名の要素がソースに追加されたか確認します。

    Google Chrome の場合

    1. 対象のページを表示し、 [Ctrl]+[Shift]+[i] を押して「デベロッパーツール」を表示します。
    2. 「要素」タブをクリックします。
    3. 左上のメニューからテンプレートパスの表示:ONにします。
    4. template-layout」というid名の要素がソースに追加されたか確認します。

    Mozilla Firefox の場合

    1. 対象のページを表示し、 [Ctrl]+[Shift]+[i] を押して「開発ツール」を表示します。
    2. 「インスペクター」タブをクリックします。
    3. 左上のメニューからテンプレートパスの表示:ONにします。
    4. 「template-layout」というid名の要素がソースに追加されたか確認します。

     

    3.関連コンテンツ

    テンプレートのファイルパスが表示されない原因と対処方法について

  • 申込画面で「次へ」ボタンをクリックしても、入力画面から確認画面へ遷移しない原因の一つとして、デザインテンプレート内に必要な記述が入っていない可能性があります。

     

    1.原因

    デザインテンプレート修正の際に、申込入力画面の入力、確認画面のindex.htmlファイル内にある下記$FORMをコメントアウト、または削除している場合、申込み画面の「次へ」ボタンをクリックしても、入力画面から確認画面へ遷移しません。

    $FORM 説明
    $FORM{Common.all_vars} クロスサイトリクエストフォージェリ(CSRF)対策のために用意された弊社独自のデザインテンプレート変数
    • クロスサイトリクエストフォージェリ(CSRF)とは、WEBアプリケーションの利用者に、特定のURLをクリックさせることなどによって、本来ログインしていなければ実行できないはずのリクエストを、利用者を介して第三者が実行する攻撃手法のことです。

     

    _______________.png

    図1:申込入力画面のindex.htmlをテキストエディタで開いたイメージ

    注意点

    $FORM{Common.all_vars}に加え、図1赤枠の<form AUTOCOMPLETE ~から始まる変数も、申込フォームに必要な要素です。コメントアウトまたは削除しないようにご注意ください。

     

    2.対策

    コメントアウトされた該当の$FORMをコメントアウトを解除するか、記述自体ない場合、index.htmlファイルに追記します。

    全キャンペーン>個別キャンペーン:「管理開始」リンク>サイドメニュー>[キャンペーンテンプレート変更]
    1. 全キャンペーンより、個別キャンペーンの[管理開始]リンクをクリックします。
    2. サイドメニュー>[キャンペーンテンプレート変更]リンクをクリックします。
    3. キャンペーン内の最新登録日時のseminar.zip、または[デフォルトダウンロード(seminar.zip)]リンクをクリックします。
    4. seminar.zipを解凍します。
    5. 申込入力画面のindex.htmlをテキストエディタで開きます。

      ※キャンペーンのフローにより、index.htmlへのファイルパスは異なります。

      例1)フロー名:キャンペーン申し込み([ユーザー情報])
      申込入力画面:seminar/application/application_flow_master_id/user/index.html

      例2)フロー名:キャンペーン申し込み([ユーザー情報/アンケート])
      申込入力画面:seminar/application/application_flow_master_id/userenquete/index.html

      上記、seminar.zipを適用されている場合のファイルパスとなります。

    6.  $FORM{Common.all_vars}のコメントアウトを解除する、または記述自体ない場合は追記し、上書き保存します。
    7. 修正が終わったseminar.zipを再度ZIPに圧縮します。
    8. 個別キャンペーン画面に戻り、サイドメニュー>[キャンペーン]をクリックします。
    9. サイドメニューの[キャンペーンテンプレート変更]をクリックします。
    10. [新規登録]ボタンをクリックして、seminar.zipを選択し、 [登録]ボタンをクリックします。
    11. 申込み画面より、「次へ」ボタンをクリックし、確認画面に遷移することを確認します。

    cart.gif

    図2:デザインテンプレート編集イメージ

     

    3.関連コンテンツ

    「次へ」ボタンをクリックしても、入力画面から確認画面へ遷移しない②

  • 日英のアクセス集中時のエラー文言を出し分けることはできませんが、テンプレートを修正することで、日英のエラー文言を下記のように並列表示させることは可能です。

    __40.png

    図1:日本語と英語の文言を並列させたエラー画面

    SMP管理画面ログイン後、テンプレート変更画面([WEB] > [テンプレート変更])より、
    system.zipファイルをダウンロードし、アクセス集中時エラー画面の文言調整を行います。

     

     

    system.zipの編集方法

    1. SMP管理画面にログイン後、テンプレート変更画面([WEB] > [テンプレート変更])に遷移します。
    2. [デフォルトダウンロード(system.zip)]ボタンをクリックします。
      __50.png
    3. ダウンロードしたsystem.zipを展開し、system階層にerrorフォルダを作成します。
    4. 以下のURLにアクセスし、アクセス集中時のエラー画面を表示します。
      https://お客様ドメイン名/error/sysbusy.html
      __40.png
    5. 画面が表示されましたらブラウザの機能で該当ページのソースを表示します。
      表示されたソースを全てコピーし、「sysbusy.html」というファイル名で保存します。
      保存先は、3で作成したerrorフォルダになります。
      __60.png
    6. sysbusy.htmlのファイルに、日本語と英語で出し分けを行いたいエラー文言を記載してください。
      __70.png
    7. カスタマイズが完了しましたら3のsystemフォルダを圧縮して通常のデザインテンプレート同様適用作業を行います。
      デザインテンプレートのアップロード方法につきましては下記マニュアルをご参照ください。
      ・[マニュアル]デザインテンプレートをアップロードする
    8. デザインテンプレートアップロードが完了しましたら、再度以下のURLにアクセスして6で編集した内容が反映されているかご確認下さい。
      https://お客様ドメイン名/error/sysbusy.html
      __40.png



    関連マニュアル

     

    「アクセス集中画面」の文言を変更する方法

  •  

    原因

    アクセスしたキャンペーンにBasic認証がかかっていることが原因として考えられます。
    Chromeの場合、Basic認証をかけたままCookieを無効化してキャンペーンにアクセスすると、下記のようなエラー画面に直接遷移してしまいます。

     

    ___.png

    図1:Chromeのエラー画面

     

    Basic認証はそもそもCookieを用いたサーバとクライアント間の認証方法になるため、Cookieを無効にするとBasic認証が挙動せず、キャンペーンにアクセスできないという現象が発生します。
    ※実際にCookieを無効にした状態でアクセスするとBasic認証ウィンドウが表示されません。

    Cookieを無効化した場合、Basic認証を解除してからキャンペーンの動作検証を行うようにしてください。

     

    ___0.png

    図2:Basic認証を解除した場合の画面表示

     

    解決方法

    Basic認証の解除方法については下記マニュアルをご参照ください。

    該当のキャンペーンの[キャンペーン設定]に[Basic認証の使用]という項目が表示されない場合、システム設定一覧からサイト全体に対してBasic認証を有効にしていることが考えられますので、下記画面より[無効]にしていただくようお願いいたします。

     

    [設定]>[システム設定一覧]>[Basic認証の使用(サイト全体)]>[無効]

    __30.png

    図3:システム設定一覧画面



    関連FAQ

    Chrome Cookie無効化時のエラー原因と対処方法

  • Config.yaml はテンプレートアップロード時にドメイン名/キャンペーン(セミナー)IDを指定するための設定ファイルです。
    Config.yamlに記載されているキャンペーン(セミナー)IDと、テンプレートをアップロードしたキャンペーン(セミナー)のキャンペーン(セミナー)IDが異なる場合、
    「設定ファイル(Config.yaml)のSeminarIdがログイン中のキャンペーン(セミナー)と一致しません。」とエラーが表示されます。

      例:キャンペーン(セミナー)ID:1をコピーして、キャンペーン(セミナー)ID:100を作成した場合
       以下のように、キャンペーン(セミナー)ID:100の設定ファイル(Config.yaml)内を書き換えます。 
       <変更前> 
       SeminarId: 1 
       ↓ 
       <変更後> 
       SeminarId: 100 
        ※「:(コロン)」と数字の間に半角スペースを入れます。

     変更が完了したら、再度テンプレートのアップロードを行ってください。 
    下記、デザインテンプレートカスタマイズマニュアルでも説明しております。

    関連マニュアル

    「設定ファイル(Config.yaml)のSeminarIdがログイン中のキャンペーン(セミナー)と一致しません。」エラーの原因と対処法

  • 下記手順で、表示している画面のファイルパスの確認ができます。

     

    画面のファイルパス確認方法

    1. 対象キャンペーン(セミナー)の[管理開始]リンクをクリックします。
      キャンペーン(セミナー)タブにある、[来場側詳細WEBページ(代理登録利用可)]リンクをクリックし、キャンペーン詳細画面(ランディングページ)を表示します。
    2. キャンペーン(セミナー)左上のアクティングアラートフィールドに「テンプレートパスの表示」の項目が表示されますので、[切り替え]リンクをクリックし「ON」にします。
      ONにすると、表示されている申込画面で使用しているデザインテンプレートファイルのファイルパスが表示されます。
      81.jpg
    3. ファイルパスを確認したいページへ移動し、画面左上の赤太枠で囲まれたファイルパスを確認します。
      こちらが現ページのhtmlファイルパスとなりますので、デザインテンプレートファイル(seminar.zip、system.zip)を展開して、そのパスを元にファイルを特定します。
      91.JPG

     


    ファイルパスの例

    system.zipを読み込んでいる場合は、seminar_baseが表示されます。
    seminar_baseとseminar.zipの最初のseminarの階層は同じです。
    例)キャンペーン(セミナー)詳細ページ
    system/seminar_base/seminar/preview.html
    seminar/seminar/preview.html

     

    注意点

    ※入力画面~確認画面~完了画面はURLが同一になりますが、別々のhtmlファイルを参照しています。
    また、キャンペーン(セミナー)のフローにより、ファイルパスは異なります。




    例1.フロー名:キャンペーン申し込み([ユーザー情報])
    ※seminar.zipを適用されている場合

    キャンペーン(セミナー)詳細画面:seminar/seminar/preview.html
    申込入力画面:seminar/application/application_flow_master_id/user/index.html
    申込確認画面:seminar/application/application_flow_master_id/confirm/index.html
    申込完了画面:seminar/application/application_flow_master_id/complete/index.html


    例2.フロー名:キャンペーン申し込み([ユーザー情報/アンケート])
    ※seminar.zipを適用されている場合

    キャンペーン(セミナー)詳細画面:seminar/seminar/preview.html
    申込入力画面:seminar/application/application_flow_master_id/userenquete/index.html
    申込確認画面:seminar/application/application_flow_master_id/confirm/index.html
    申込完了画面:seminar/application/application_flow_master_id/complete/index.html

     

    上記例1、例2のファイルパスは、個別キャンペーン(セミナー)にてデザインテンプレートを設定している場合のものになります。

     

     

    関連マニュアル

    フォームのデザインを変更する際のファイルパス確認方法

  • Config.yaml はテンプレートアップロード時にドメイン名/キャンペーン(セミナー)IDを指定するための設定ファイルです。
    Config.yamlに記載されているキャンペーン(セミナー)IDと、テンプレートをアップロードしたキャンペーン(セミナー)のキャンペーン(セミナー)IDが異なる場合、
    「設定ファイル(Config.yaml)のフォーマットが違います。」とエラーが表示されます。

      例:設定ファイル(Config.yaml)内に必要な空白(半角スペース)がない場合。
        以下のように、該当キャンペーンの設定ファイル(Config.yaml)内を書き換えます。 
       <変更前> 
       SeminarId:808
       ↓ 
       <変更後> 
       SeminarId: 808
       ※「:(コロン)」と数字の間に半角スペースを入れます。

     変更が完了したら、再度テンプレートのアップロードを行ってください。
    下記、デザインテンプレートカスタマイズマニュアルでも説明しております。

    関連マニュアル

    エラー:設定ファイル(Config.yaml)のフォーマットが違います。

  • デザインテンプレートのアップロード可能なファイルサイズは、システムで利用するテンプレート、キャンペーン(セミナー)で利用するテンプレートともに50MBになります。
    ※このファイルサイズの変更はできません。

     

    アップロード可能サイズの確認方法

    1. 全キャンペーン(セミナー)管理モードの[設定]タブ > [システム設定一覧]メニューをクリックします。
    2. システム設定一覧画面より以下の項目を確認します。
      テンプレートのファイルサイズ制限(MB)  50MB
      ______-_______________.gif
                図1:アップロード可能サイズ確認方法のイメージ


    以下の機能でシステム設定で設定されている通り、ファイルサイズの制限が設けられています。


    ファイル制限が設定される機能

    • システムで利用するテンプレート
    • キャンペーン(セミナー)で利用するテンプレート

    システムで利用するテンプレート(WEB-テンプレート変更)

    1. 全キャンペーン(セミナー)管理モードの[WEB]タブ > [テンプレート変更]メニューをクリックします。
    2. システムで利用するテンプレート画面より[新規登録]ボタンをクリックします。
    3. システムテンプレート登録画面が表示されます。
      WEB__________.gif
                  図2:システムテンプレート確認イメージ


    キャンペーン(セミナー)で利用するテンプレート(キャンペーン(セミナー)テンプレート変更)

    1. 個別キャンペーン(セミナー)管理モードの[WEB]タブ > [キャンペーン(セミナー)テンプレート変更]メニューをクリックします。
    2. キャンペーン(セミナー)で利用するテンプレート画面より[新規登録]ボタンをクリックします。
    3. キャンペーン(セミナー)テンプレート登録画面が表示されます。
      ________________.gif
              図3:キャンペーン(セミナー)テンプレート確認イメージ


    関連マニュアル

    デザインテンプレートのアップロード方法に関しましては、以下SHANON MARKETING PLATFORM ユーザーマニュアルをご確認下さい。

    デザインテンプレートのアップロード可能サイズ(MB)

  • config.yamlファイルとは

    キャンペーン(セミナー)テンプレートは、誤って別のキャンペーン(セミナー)に登録されたり、サンドボックス環境のものを本番稼働環境に登録されたりすることを防ぐために、「config.yaml」ファイルを含んでいます。

    ここではSHANON MARKETING PLATFORM (以下、SMPと表記)ドメインの変更や他のキャンペーンに登録する際の「config.yaml」ファイルの編集方法をご案内します。

     

    config.yamlファイルの編集方法

    1. テキストエディタで[config.yaml]ファイルを開きます。
    2. ファイル内の「Url:」を[https://ドメイン名/]に書き換えます。
    3. [config.yaml]ファイルを保存します。

     

    system.zipの場合

    sys_configyaml.jpg

    図1:system.zipの場合

     

     

    semina.zipの場合

    アップロードするキャンペーン(セミナー)のIDの記載が必要になります。

    sem_configyaml.jpg

    図2:semina.zipの場合

     

     

    関連マニュアル

    キャンペーン(セミナー)テンプレートのダウンロード、アップロード方法はSMPご利用ガイドをご参照下さい。

     

    config.yamlファイルとは

  • 独自のデザインテンプレート変数($FORM)は、「コンテンツ機能」を利用することで作成することが可能です。
    こちらの機能では、増やした「項目枠」へ「共通のソースコード」を入れ、お客様側で一元管理ができます。


    「コンテンツ機能」とは

    全キャンペーン(セミナー)管理 [WEB]タブ>サイドメニュー:ヘッダーフッター編集 の中に
    「コンテンツ1」〜「コンテンツ10」という「項目枠」を追加することができます。
    「コンテンツ1」〜「コンテンツ10」分の変数が利用できるようになります。

    360026424613-1.jpg

    図1:ヘッダーフッター編集画面

    コンテンツをシステムのWEBページに出力するための変数は以下になりますので、
    デザインテンプレートの編集にて差込をしたいページに以下変数を埋め込み、管理します。
    コンテンツ1:$FORM{Common.contents1}
    コンテンツ2:$FORM{Common.contents2}
       ・
       ・
       ・
    コンテンツ10:$FORM{Common.contents10}

     

    関連マニュアル

    デザインテンプレートの変更方法につきましては、以下マニュアルをご参照ください。

    ご留意点

    ・「コンテンツ機能」機能を利用するためには、「共通コンテンツの使用」を有効化する必要があります。有効でない場合はシャノン カスタマーサポートまでご連絡ください。
     ※「コンテンツ機能」を有効にするには数日かかる可能性がありますのでご了承ください。
     ◆「コンテンツ機能」機能有効/無効の確認方法
    1.全キャンペーン(セミナー)管理モード[設定]タブ>サイドメニュー[システム設定一覧]を開きます。
    2.[共通コンテンツの使用]が[有効]となっているか確認します。

    ・「コンテンツ機能」にて追加される変数は「システムテンプレート変数簡易一覧」には表示されません。
    ・機能有効後の運用・管理に関しましては、お客様にて設定などを行ってください。
    ・コンテンツ項目内に弊社の独自変数($FORM変数)を記載することはできかねます。

    デザインテンプレート変数($FORM)を独自で作成する方法

  • アップロードされたsystem.zipは、残念ながら削除できません。
    アップロードしたsystem.zipは直近の3ファイルまで保存されますので、戻すことが可能となります。

    誤って以前のsystem.zipに戻せないなどの発生を防ぐため、登録したファイルはバックアップとして保管することをお勧めいたします。

    アップロードしたsystem.zipをSMPから削除したい

  • 受講票のテンプレートは下記手順にて変更することが可能です。
     
    1. 全キャンペーン(セミナー)管理モードを表示します。
    2. [WEB]タブをクリックします。
    3. テンプレート更新履歴一覧最上部(最新)のファイルの[ダウンロード]リンクをクリックします。
    4. ダウンロードされたsystem.zipを解凍します。
    5. 以下のHTMLファイルが受講票のファイルとなりますので編集を行って下さい。
      mypage/ticket/plain.html
    6. 編集したHTMLを保存し、ダウンロードしたフォルダをZIP形式に圧縮します。
    7. 3.のテンプレート更新履歴一覧の[新規登録]ボタンからsystem.zipをアップロードします。

    受講票を変更したい

  • 2011年2月以降からご利用開始されている標準テンプレートでは、キャンペーン説明文の上下に申込ボタンを表示するように設定されております。
    テンプレートを編集していただき、減らしたい箇所にある申込ボタンの変数の$FOR{application_link}を削除いただく必要があります。
    下記に個別キャンペーンでの修正方法についてご案内いたします。

    ※テンプレートを修正を行う前に、以下FAQ記事を必ずご参照ください。


    申込ボタンの削除手順

    1. 全キャンペーン(セミナー)管理画面(青い画面)より、
      個別キャンペーン(セミナー)の[管理開始]リンクをクリックします。
    2. キャンペーン(セミナー)タブをクリックします。 
    3. 左メニューの[キャンペーン(セミナー)テンプレート変更]をクリックします。 
    4. 登録日時(最新日時)がついた[ダウンロード]リンクをクリックし、ダウンロードします。 
      ※登録日時がついた[ダウンロード]リンクがない場合は、system.zipを参照しています。 
      キャンペーン(セミナー)内の[デフォルトダウンロード(seminar.zip)」をクリックするか、全キャンペーン(セミナー)のsystem.zipを編集します。 
      ※ダウンロードしたseminar.zipは修正用とバックアップ用に分けて保存してください。 
    5. seminar.zipを解凍します。 
    6. 下記ファイルパスより、対象タグをテキストエディタ内で検索すると2つ表示されますので、
      どちらかを削除し、ファイルを保存します。 

      パス:seminar\preview.html
      対象タグ:$FORM{application_link} 

    7. 上記修正が終わったseminar.zipを再度ZIPに圧縮します。
    8. 個別キャンペーン(セミナー)画面に戻り、[キャンペーン(セミナー)]タブをクリックします。
    9. 左メニューの「キャンペーン(セミナー)テンプレート変更」をクリックします。
    10. [新規登録]ボタンをクリックして、seminar.zipを選択し、[登録]ボタンをクリックします。


    関連FAQ

    ファイルパスの確認方法の詳細につきましては、以下FAQをご参照ください。

     

    申込フォームの申込ボタンを一つ削除したい

  • テンプレートカスタマイズにつきましては、
    テキストエディタによるHTMLの記述・編集ができる方を対象としています。
    テンプレートを修正する際は下記注意点について予めご了承ください。

    テンプレートを修正する際の注意点

    ・htmlファイルを編集する際は、 html編集エディタ(Dreamweaverやサクラエディタ)などをご使用ください。メモ帳は基本的にはお使いいただけません。

    ・作業を始める前には必ず.zipファイルや設定をバックアップ保存やメモをしておいてください。

    ・system.zipのテンプレートを修正する場合は全キャンペーン(セミナー)に影響がございますので、サンドボックスにて検証後に、本番環境へ適用するなど、ご注意の上、作業をおすすめください。

    ・カスタマーサポートでは、テンプレートのご案内は編集対象のテンプレートのファイル名と、システム独自の変数($FORM)のご案内とさせていただいております。
    html、CSSの記述などにつきましてはお客様環境にて検証を行っていただくか、弊社の担当営業へお問合せください。

    ・お客様での操作および環境(HTMLファイル)変更に伴う不具合、エラーにつきまして当社では一切の責任を負いかねます。

    ・お客様での操作に伴う、不具合・エラー復旧・調査が発生する場合、別途、有償対応となりますので、併せてご了承ください。



    関連マニュアル

    テンプレートは、HTMLの知識がなくてもカスタマイズできますか