HOME > 設定手順 > Webフォームを利用して複数の画像を登録させたい

Webフォームを利用して複数の画像を登録させたい

Webフォームから複数の画像を受け付ける際の設定方法についてご案内します。



スパイラルで画像を登録するには、画像型フィールドを利用します。画像型フィールドは1DBにつき、1フィールドのみ利用できる仕様なので、画像を複数登録させたい場合は、JavaScriptを用いて、1回の登録でDBに複数の画像を登録させます。


1.フロー

登録者が画像を複数登録する場合は、はじめに画像以外の情報をフォームから送信し、その後に画像を登録します。画像とそれ以外の情報は別のDBに格納され、それぞれの情報には同じ投稿IDがつきます。投稿IDでDB連携し、仮想DB(連携型)を作成し、基本情報と画像情報を統合できます。


※画像登録フォームは、インラインフレームで1画面に複数のフォームを表示し、JavaScriptで登録を制御しています。
Safariには対応していないため、Safariの登録を受け付ける場合は、基本情報フォームのサンキューページのJavaScriptで、専用のフォームに誘導するように設定します。


※画像登録後に表示する登録完了ページは、URLで任意のページを指定できます。


2.JavaScript概要

画像を複数登録するフローを構築する場合は3種類のJavaScriptを設定します。

(1)ブラウザ判定用分岐ページ

画像を複数同時に登録させるJavaScriptは、ブラウザSafariで正しく機能しない場合があります。
複数画像を登録できるフォームを公開する時は、基本情報登録フォームのサーバ内サンキューページにブラウザ判定用の分岐ページを設置します。
分岐ページのJavaScriptでブラウザ判定をするように設定すると、Safari専用の登録フォームに誘導できます。
なお、Safari専用のフォームに誘導しない場合は、Webサイトに、ブラウザSafariには対応していない旨を記載することをお勧めします。

(2)画像登録フォーム

画像登録フォームは、制御用フォームとインラインフレーム内のフォームの2種類のフォームで構成されます。
各フォームに専用のJavaScriptを使うことで、画像登録フォームで、複数の画像を一度に送信することが可能です。



1)インラインフレーム内のフォームを送信するJacvaScript
制御用ページに挿入するJavaScriptは、インラインフレーム内のフォームを送信するJavaScriptです。
2)画像情報を制御フォームに渡すJavaScript
インラインフレーム内のフォームの[入力ページ][確認ページ]に挿入するJavaScriptは、登録する画像情報※2を制御フォームに渡すJavaScriptです。
※1 インラインフレーム内のフォームは、1フォームで画像1枚を送信します。そのため、一度に登録する画像の枚数分フォームを発行します。
※2 画像のサイズの情報を制御フォームに渡し、インラインフレームのサイズを画像サイズにあわせて調整できるようにします。


3.HTMLとJavaScript

(1)エントリー情報フォーム

サンキューページに下記リンク先のソースを設置してください。


サンキューページソース



(2)画像登録フォーム(制御用)

入力ページに下記リンク先のソースを設置してください。


入力ページソース(前半)
入力ページソース(後半)



(3)画像登録フォーム(インラインフレーム用)

【入力ページ】
入力ページに以下リンク先のソースを設置してください。


入力ページソース



【確認ページ】
確認ページに以下リンク先のソースを設置してください。


確認ページソース




4.注意事項

ブラウザSafariでの登録について

インラインフレームとJavaScriptを使った画像登録フォームは、Safariに対応していません。Safariから登録する場合は、Safari専用のフォームに誘導し、ステップ登録で画像を登録するようにしてください。
エントリー情報フォームのサンキューページのJavaScriptで、Safari専用のフォームに誘導できるように設定できます。
(ステップ登録の方法につきましては、別途ユーザーズデスクにお問い合わせください。)