シェルフ生成ツール
設定
- 0点
- 排他選択肢
- 商品の陳列
- 設問タイプ
- パイピング
- 値札
- モーダル
- 選択後の商品
シェルフカスタマイズ生成ツール ご利用ガイド
本ツールは、Qナンバーと商品画像を設定するだけで、forSurvey上で動作する「商品棚（シェルフ）」のカスタマイズコードを生成・ダウンロードできるツールです。
1. ツールの利用手順
【準備】 あらかじめ、対象設問の Qナンバー（
aから始まるもの）と
商品画像 をご用意ください。
- 基本設定 Qナンバーを入力し、商品画像を棚エリアへ ドラッグ&ドロップ して配置してください。
-
オプション選択
陳列間隔、値札表示、クリック時の挙動などを選択します。
⚠️ 棚札のタイプに「画像」を選択した場合 forSurvey側に、
price_{Qナンバー}_{商品の連番}.jpgのファイル名の「棚札画像」アップロードする必要があります。- 例）a0001設問の、最初の商品の棚札画像：
price_a0001_1.jpg
⚠️ 商品クリック時に「画像を切り替える」を選択した場合 forSurvey側に、select_から始まるファイル名の「切り替え用画像」をアップロードする必要があります。- 例）商品画像：
apple.png - 例）切り替え用：
select_apple.png
- 例）a0001設問の、最初の商品の棚札画像：
- ダウンロード 設定完了後、コードファイルをダウンロードし、ファイルに記載された指示に従いforSurveyに適用してください。
2. 【重要】forSurvey設定時の必須ルール
※コードを正しく動作させるため、forSurveyの画面作成画面で以下の設定を必ず行ってください。
設問・選択肢の設定
- グループ設定（必須）： 作成する設問は、必ず 【選択肢 - グループ設定】 にチェックを入れてください。
- グループ数： 棚数分のグループを作成し、棚ごとに選択肢を入力しててください。また、「なし」などの排他選択肢が必要な場合は、それ専用に 「グループ」を1つ追加 してください。
i-タイル設定の注意点
- 機能の競合回避： 本シェルフは「i-タイルテンプレート」上で動作しますが、個別の設問設定では必ず 【i-タイル設定 - 利用しない】 を選択してください。
- ※「利用する」に設定すると正しく表示されません。
パイピング（紐付け）を行う場合
- 親（元）設問： 必ず 「MA（複数選択）」 または 「隠しMA」 形式にしてください。
- 子（先）設問： 本ツールでパイピングを設定する場合、forSurvey側の選択肢ラベルには pipeタグを記述しないでください。
画像ファイルについて
- 高画質な画像は回答画面の読み込み遅延を招き、回答者の離脱につながります。Web用に圧縮するなど、ファイル容量にご配慮ください。
3. シェルフのデザインの設定変更（追加オプションの指定方法）
生成されたコード（JavaScript）内の設定部分に以下のパラメーターを追記することで、棚やモーダルウインドウのデザインを自由に変更できます。
-
棚画像を変更する [shelfImage]
独自の棚画像を使用したい場合に、画像のパスを指定します。
※指定しない場合には、標準の棚画像（shelf.jpg）が適用されます。
%%mydir%%の指定は可能です。⚠️ 棚画像の設定例backAnsData: (typeof back_ans_data !== 'undefined' ? back_ans_data : {}),<-- 既存の行shelfImage: `%%mydir%%new_shelf.jpg`,<-- 棚画像のオプション設定を追加
-
モーダルウインドウの画像領域サイズを変更する [modalCanvasWidth, modalCanvasHeight]
モーダルウインドウの画像表示領域の縦と横のサイズをpx数で指定します。
※指定しない場合には、縦横ともに「315px」が適用されます。⚠️ モーダル画像領域サイズの設定例backAnsData: (typeof back_ans_data !== 'undefined' ? back_ans_data : {}),<-- 既存の行modalCanvasWidth: 400,<-- モーダル画像領域の横サイズpxを数値で指定modalCanvasHeight: 500,<-- モーダル画像領域の縦サイズpxを数値で指定
-
モーダルウインドウの背景色を変更する [modalBgColor]
モーダルウインドウの背景色をカラーコード（例：#e0ffff）で指定します。
※指定しない場合には「白（#FFFFFF）」が適用されます。⚠️ モーダル背景色の設定例backAnsData: (typeof back_ans_data !== 'undefined' ? back_ans_data : {}),<-- 既存の行modalBgColor: '#000000',<-- モーダル背景色のオプション設定を追加
-
モーダル内画像の枠線の指定 [modalImgBorder]
モーダルウインドウの画像の枠線の有無の指定をします。
※指定しない場合には「枠線なし（none）」が適用されます。⚠️ モーダル画像枠線の設定例backAnsData: (typeof back_ans_data !== 'undefined' ? back_ans_data : {}),<-- 既存の行modalImgBorder: '1px solid #000000',<-- モーダル画像枠線のオプション設定を追加
-
棚とモーダルで表示する商品画像を変える（接頭辞の指定） [modalImgPrefix]
モーダルウインドウの画像ファイルを別の画像にしたい場合に、接頭辞を指定します。
※指定しない場合には同じファイル名の画像が適用されます。⚠️ モーダル画像の接頭辞の設定例backAnsData: (typeof back_ans_data !== 'undefined' ? back_ans_data : {}),<-- 既存の行modalImgPrefix: 'modal_',<-- モーダル画像の接頭辞のオプション設定を追加- この指定をした場合、元の画像のファイル名の頭に
modal_をつけたファイル名もアップロードする必要があります。
