アンケートフォーム簡易作成機能マニュアル

Size: px

Start display at page:

Download "アンケートフォーム簡易作成機能マニュアル"

よしたかわにべ
5 years ago
Views:

1 HeartCore アンケートフォーム簡易作成機能マニュアル October 2013 Ver

2 改訂履歴改訂日改訂内容 Ver 年 07 月マニュアル改訂 Ver 年 10 月行間の修正不要外枠の削除対象ライセンス項目の追加 - 2 -

3 目次 1. 本文書の目的と対象ライセンス目的対象ライセンス機能概要アンケート機能とは? アンケート機能の利用目的アンケートモジュール導入 ( 適応 ) 手順アンケートの作成新規作成アンケート内容入力アンケートタイプ選択別 HTMLソース生成例アンケートの保存定義ファイルの出力定義ファイルの取り込みアンケートテンプレートの作成テンプレートの新規作成アンケートの表示実際の表示イメージアンケートの公開と非公開公開中アンケートの非公開非開中アンケートの公開アンケート結果アンケート結果閲覧アンケート結果出力アンケート結果の削除アンケートの削除その他注意事項

4 1. 本文書の目的と対象ライセンス 1.1. 目的本文書はお客様が実際にアンケート機能を利用するにあたり本文書を参照することで該当機能の一通りの操作を行うことができることを目的としておりますアンケート機能はマーケティング等を目的に様々なウェブサイトで使用されているアンケートを作成することができますまた集計結果を閲覧する事や集計結果をファイルとして出力することも可能です 1.2. 対象ライセンス当該機能を提供しているライセンスは以下の通りです Professional Enterprise Standard Suite Standard Suite アンケート機能 1. : 標準装備 : オプション装備 -: 設定なし 2. 機能概要 2.1. アンケート機能とは? HeartCore ではオプション機能としてアンケート機能を準備しています HeartCore のアンケート機能はアンケート項目を HeartCore の WEB コンテンツとして登録しアンケートの流れを設定する事によって自動的にアンケートを作成する事を実現します 2.2. アンケート機能の利用目的複数のアンケートを HeartCore の WEB コンテンツとして登録し様々なアンケートを作成する事やアンケートの公開非公開削除の操作また公開したアンケートの結果を管理画面より確認可能ですのでアンケート設定や作成公開非公開削除等の一連の必要工数を削減する事ができます - 4 -

5 3. アンケートモジュール導入 ( 適応 ) 手順新規にモジュールを導入される場合に導入手順を実施して下さい既にモジュールが導入されている場合は次項目作成手順をご参照下さい (1) アンケートモジュール内の ROOT ディレクトリを既存の HeartCore 環境へ上書きします (2) アンケートモジュールに同封されている SQL フォルダ直下の SQL ファイル create.mysql.sql を実行しデータベースへアンケートモジュール用テーブルを作成します実行例 $ mysql -u root [ データベース名 ] < create.mysql.sql (3) 上記の実行例は mysql ユーザ名 root の場合の実行例となります (4) 上記の実行例は MySQL での実行例となります (5) webadmin/module/config.jsp にメニューにアンケートメニューの定義を追加します定義方法はアンケートモジュールに同封されている sample_config.jsp ファイルをご参考下さい追記例 <%@ include file="hcenquete/config.jsp" %> (6) config.jsp を編集する場合は必ずバックアップして下さい (7) メニューの定義は必ず一行で記述しファイル末尾へは改行等は含まないようご注意下さい (8) プロパティファイルの内容を WEB-INF/classes 配下のプロパティファイルに追記しますアンケートモジュールに同封されている added_hardcore_en.properties の内容を hardcore.properties hardcore_en.properties プロパティファイルに追記しますアンケートモジュールに同封されている added_hardcore_ja.properties の内容を hardcore_ja.properties プロパティファイルに追記します (9) ドキュメントルート直下の config.static.jsp へ以下の文をアンケートジュールに同封されている sample_config.static.jsp の様に追記します - 5 -

6 追記例 myconfig.settemp("enquete_csv_charset", "windows-31j"); 記述内容の説明 enquete_csv_charset CSV の import export 時のデフォルトエンコードを指定します (10) config.static.jsp を編集する場合は必ずバックアップして下さい (11) config.static.jsp ファイル末尾へは改行等は含まないようご注意下さいモジュール適用後 Tomcat 環境のキャッシュのクリア及び再起動を行って頂けますようお願い致します 2013 年 10 月現在では対応言語は日本語英語のみとなります 4. アンケートの作成 4.1. 新規作成Ｗｅｂサイトコンテンツアンケート機能を選択し右上の追加ボタンより新規作成ページを開きます -6

7 4.2. アンケート内容入力アンケートを取りたい内容を下記のように設定します 1. アンケートタイプアンケートの作成タイプを選択します 2. アンケートテンプレート作成したアンケートに適用するテンプレートを選択します 3. コンテンツグループ作成したアンケートが格納されるコンテンツグループを選択します 4. 登録後表示画面アンケートの回答完了時にユーザへ表示するページ選択ボタンより既存コンテンツを選択します - 7 -

8 5. 構成要素作成したアンケートが格納される構成要素を選択します 6. アンケートタイトル任意のタイトル名を入力します 7. アンケート識別子 id アンケートフォームに存在するタグの id id の先頭は必ずアルファベットで設定下さいを設定します 8. アンケートタイプページングあり作成したアンケートを項番ごとにページングで作成しますページングなし作成したアンケートを１ページで作成します構成要素作成したアンケートを構成要素として作成します 9. 登録後集計結果表示アンケート後の集計結果構成要素の場合のみの表示を設定します 10. 項番アンケート項目の識別番号 11. 項目種類表示のみ複数選択単項目選択テキスト入力の中から選択します 12. 質問内容ユーザへの質問内容として表示されるテキストを入力します 13. 次の項目ユーザがその項目を回答した後次に表示させる項目の項番を選択しますユーザが選択した項目によって次に表示させる項目が異なる場合には選択項目内にてオプションテキスト末尾へコロン項番で指定します上図の場合はいを選択すると２番の項目へ遷移しいいえを選択すると４番の項目へ遷移します作成時は必ず順番を意識して本項目を設定して下さい設定によってはループや完了まで至らないアンケートが出来上がります 14. 選択項目質問への回答オプションとして表示させるテキストを入力します 15. 最小入力数チェック最小入力数ユーザへ要求する最低限の入力数を設定します -8

9 エラーメッセージ : 最小入力数に満たない場合に表示させるメッセージ 16. 最大入力数チェック最大入力数 : ユーザへ許可する最大限の入力数を設定しますエラーメッセージ : 最大入力数を超える場合に表示させるメッセージ 4.3. アンケートタイプ選択別 HTML ソース生成例アンケートタイプでページングありを選択した場合の HTML ソース例 <form action="/enquete.jsp" id="enquetesample_form" method="post"> EnqueteSample <div id="enquetesample0">2 つまで選択してください <div><input id="enquetesample0_1" name="enquetesample0_1" type="checkbox" value=" 選択肢 1" /><label for="enquetesample0_1"> 選択肢 1</label> <div><input id="enquetesample0_2" name="enquetesample0_2" type="checkbox" value=" 選択肢 2" /><label for="enquetesample0_2"> 選択肢 2</label> <div><input id="enquetesample0_3" name="enquetesample0_3" type="checkbox" value=" 選択肢 3" /><label for="enquetesample0_3"> 選択肢 3</label> <div id="enquetesample0_minerror" style="color: red;"> 選択してください <div id="enquetesample0_maxerror" style="color: red;">3 つは選択できません <div id="enquetesample1">1 つ選択してください <div> <input id="enquetesample1_1" name="enquetesample1" type="radio" value=" 単選択 1" /><label for="enquetesample1_1"> 単選択 1</label> <div><input id="enquetesample1_2" name="enquetesample1" type="radio" value=" 単選択 2" /><label for="enquetesample1_2"> 単選択 2</label> <div><input id="enquetesample1_3" name="enquetesample1" type="radio" value=" 単選択 3" /><label for="enquetesample1_3"> 単選択 3</label> <div id="enquetesample1_minerror" style="color: red;">1 つだけ選択してください <div id="enquetesample2"> 何か入力してください <textarea cols="50" id="enquetesample2_1" name="enquetesample2_1" rows="5"></textarea> <div id="enquetesample2_minerror" style="color: red;"> 入力してください <div id="enquetesample3"> 送信します <div><input type="submit" /> <input type="button" value="next" id="enquetesample_configgroup" /> <input type="hidden" name="enquete_id" value="enquetesample" /> </form> - 9 -

10 アンケートタイプで構成要素を選択した場合の HTML ソース例 <form action="/enquete_element.jsp" id="enquetesample_form" method="post" target="enquetesample_iframe"> EnqueteSample <div id="enquetesample0">2 つまで選択してください <div> <input id="enquetesample0_1" name="enquetesample0_1" type="checkbox" value=" 選択肢 1" /><label for="enquetesample0_1"> 選択肢 1</label> <div><input id="enquetesample0_2" name="enquetesample0_2" type="checkbox" value=" 選択肢 2" /><label for="enquetesample0_2"> 選択肢 2</label> <div><input id="enquetesample0_3" name="enquetesample0_3" type="checkbox" value=" 選択肢 3" /><label for="enquetesample0_3"> 選択肢 3</label> <div id="enquetesample0_minerror" style="color: red;"> 選択してください <div id="enquetesample0_maxerror" style="color: red;">3 つは選択できません <div id="enquetesample1">1 つ選択してください <div> <input id="enquetesample1_1" name="enquetesample1" type="radio" value=" 単選択 1" /><label for="enquetesample1_1"> 単選択 1</label> <div><input id="enquetesample1_2" name="enquetesample1" type="radio" value=" 単選択 2" /><label for="enquetesample1_2"> 単選択 2</label> <div><input id="enquetesample1_3" name="enquetesample1" type="radio" value=" 単選択 3" /><label for="enquetesample1_3"> 単選択 3</label> <div id="enquetesample1_minerror" style="color: red;">1 つだけ選択してください <div id="enquetesample2"> 何か入力してください <textarea cols="50" id="enquetesample2_1" name="enquetesample2_1" rows="5"></textarea> <div id="enquetesample2_minerror" style="color: red;"> 入力してください <div id="enquetesample3"> 送信します <div> <input type="submit" /> <input type="hidden" name="enquete_id" value="enquetesample" /> <div id="enquetesample_formresult_hint" style="display:none"> <iframe id="enquetesample_iframe" name="enquetesample_iframe" src="/hc_config/empty.html" style="display: none;"></iframe> <input type="hidden" name="enquete_preview_mode" value="true"> <input type="hidden" name="enquete_id" value="enquetesample"> <input type="hidden" name="display_result" value="1"> </form>

4.4. アンケートの保存アンケート内容の設定が完了したら保存して閉じるで保存します公開チェックボックスのチェックを外して保存すると非公開の状態で保存されます注意 : 作成したアンケートを一度保存するとその後そのアンケートを直接更新することはできません保存する前にプレビューボタンより実際の表示や遷移を確認することをお勧めしますまた定義ファイル出力

11 4.4. アンケートの保存アンケート内容の設定が完了したら保存して閉じるで保存します公開チェックボックスのチェックを外して保存すると非公開の状態で保存されます注意 : 作成したアンケートを一度保存するとその後そのアンケートを直接更新することはできません保存する前にプレビューボタンより実際の表示や遷移を確認することをお勧めしますまた定義ファイル出力ボタンにてファイルとして出力しておくと後々便利です ( 詳細は 4.4 定義ファイルの出力 4.5 定義ファイルの取り込みをご参照ください ) 4.5. 定義ファイルの出力新規作成画面また詳細表示画面にある定義ファイル出力ボタンを選択すると設定しているアンケート内容がファイルとして出力されます出力したファイルは以後テンプレートとして使用したりまた作成過程の一時保存的な役割で使用したりあるいは保存済みアンケートの更新目的として使用したりと活用できます 4.6. 定義ファイルの取り込み出力した定義ファイルを取り込んで新規アンケートを作成することが可能です参照ボタンよりファイルを選択し定義ファイル取り込みボタンにて取り込みます必要な箇所のみ編集を加えて保存することで効率的に新規アンケートを設定することができます定義ファイルを取り込むとコンテンツグループ登録後表示画面アンケートタイトル入力欄が初期化されるのでアンケート定義ファイルを取り込んだ後に設定するようにしてください

12 5. アンケートテンプレートの作成 5.1. テンプレートの新規作成設定 > アンケートテンプレートを選択し右上の追加ボタンより新規作成ページを開きます

13 アンケートテンプレート作成画面 1. テンプレートタイトルテンプレートのタイトル名を設定します 2. アンケートタイプ利用するアンケートタイプの種類を設定しますページングあり : 作成したアンケートを項番ごとにページングで作成しますページングなし : 作成したアンケートを 1ページで作成します構成要素 : 作成したアンケートを構成要素として作成します

14 3. スクリプト制御 JavaScript 制御の利用有無を設定しますなお利用しないを選択した場合には以下の機能が利用できませんページング機能最大最小入力値チェック機能 4. メインテンプレートアンケート入力画面の基本デザイン 5. form タグ iframe タグ hidden タグについては自動生成されますので変更できません標準値設定内容アンケートのタイトルが設定されますアンケート項目の設定箇所に設定された箇所にブロックテンプレートおよびページングボタンテンプレートが適用されますなおページングボタンの場所については必ず最後尾になります 6. ブロックテンプレートアンケート 1 問に対する基本デザインアンケート内容入力画面では各項番に入力された内容となります標準値アンケート 1 問の識別実際の input 送信ボタンを配置

15 補足ページング機能を用いる場合には必ず全体をタグで囲んだ上でを設定してくださいページングありでない場合にははメインテンプレートに設定することも可能です 7. ブロックテンプレート ( 偶数列 ) アンケート 1 問に対する基本デザイン ( 設問が偶数列の場合 ) 任意項目です ( 省略時はブロックテンプレートが利用されます ) 8. 単項目選択テンプレート単項目選択を利用した際のデザインラジオボタンに関するデザインを指定しますアンケート内容入力画面では項目種類に単項目選択を選択した場合に適用されます標準値 <div> <input id="@@@html_id@@@" name="@@@html_name@@@" type="radio" value="@@@enquete_answer@@@" /> <label for="@@@html_id@@@">@@@enquete_answer@@@</label> ラジオボタン識別ラジオボタンの name 選択項目に入力した内容補足 input タグは必ず以下の設定を追加してください id="@@@html_id@@@" name="@@@html_name@@@" type="radio" value="@@@enquete_answer@@@" その他のクラス等の追加は自由です 9. 単項目選択テンプレート ( 偶数列 ) 単項目選択を利用した際のデザイン任意項目です ( 省略時は単項目選択テンプレートが利用されます )

16 10. 複数選択テンプレート複数選択を利用した際のデザインチェックボックスに関するデザインを指定しますアンケート内容入力画面では項目種類に複数選択を選択した場合に適用されます標準値 <div> <input type="checkbox" /> <label 設定内容チェックボックス識別 ID チェックボックスの name 属性選択項目に入力した内容補足 input タグは必ず以下の設定を追加してください type="checkbox" その他のクラス等の追加は自由ですとは同じ内容になります 11. 複数選択テンプレート ( 偶数列 ) 複数選択を利用した際のデザイン任意項目です ( 省略時は複数選択テンプレートが利用されます ) 12. テキスト入力テンプレートテキスト入力を利用した際のデザインアンケート内容入力画面では項目種類にテキスト入力を選択した場合に適用されます標準値 <textarea cols="50" id="@@@html_id@@@" name="@@@html_name@@@" rows="5"></textarea> チェックボックス識別チェックボックスの name 属性

17 補足 id 属性および name 属性は必ず指定してください 13. その他のクラス等の追加は自由ですテキストエリアではなくテキストボックスを利用することも可能です <input type="text" /> 13. 最小エラーテンプレート最小入力数チェックを利用した際のメッセージデザインスクリプト制御を利用しない場合は設定すると必ず表示されるようになりますアンケート内容入力画面では最小入力数を入力した場合に適用されます標準値 <div style="color: 設定内容メッセージ識別 ID 表示させるメッセージ補足 id 属性は必ず指定してください 14. 最大エラーテンプレート最大入力数チェックを利用した際のメッセージデザインスクリプト制御を利用しない場合は設定すると必ず表示されるようになりますアンケート内容入力画面では最大入力数を入力した場合に適用されます標準値 <div style="color: 設定内容メッセージ識別 ID 表示させるメッセージ補足 id 属性は必ず指定してください

18 15. 送信ボタンテンプレート送信ボタンのデザイン標準値 <div><input type="submit" /> 16. ページングボタンテンプレートページングボタン (next) のデザイン標準値 <input type="button" value="next" /> 設定内容ページングボタン識別 ID 補足 id 属性は必ず指定してください 17. プレビュー時 Head コードプレビュー使用時にスタイルシート等を定義したい場合に記述します

19 アンケートテンプレートの標準値を元にした生成 HTML イメージ 6. <form action="/enquete.jsp" id="enquetesample_form" method="post"> EnqueteSample <div id="enquetesample0">2 つまで選択してください <div><input id="enquetesample0_1" name="enquetesample0_1" type="checkbox" value=" 選択肢 1" /> <label for="enquetesample0_1"> 選択肢 1</label> <div><input id="enquetesample0_2" name="enquetesample0_2" type="checkbox" value=" 選択肢 2" /> <label for="enquetesample0_2"> 選択肢 2</label> <div><input id="enquetesample0_3" name="enquetesample0_3" type="checkbox" value=" 選択肢 3" /> <label for="enquetesample0_3"> 選択肢 3</label> <div id="enquetesample0_minerror" style="color: red;"> 選択してください <div id="enquetesample0_maxerror" style="color: red;">3 つは選択できません <div id="enquetesample1">1 つ選択してください <div><input id="enquetesample1_1" name="enquetesample1" type="radio" value=" 単選択 1" /> <label for="enquetesample1_1"> 単選択 1</label> <div><input id="enquetesample1_2" name="enquetesample1" type="radio" value=" 単選択 2" /> <label for="enquetesample1_2"> 単選択 2</label> <div><input id="enquetesample1_3" name="enquetesample1" type="radio" value=" 単選択 3" /> <label for="enquetesample1_3"> 単選択 3</label> <div id="enquetesample1_minerror" style="color: red;">1 つだけ選択してください <div id="enquetesample2"> 何か入力してください <textarea cols="50" id="enquetesample2_1" name="enquetesample2_1" rows="5"></textarea> <div id="enquetesample2_minerror" style="color: red;"> 入力してください <div id="enquetesample3"> 送信します <div><input type="submit" /> <input type="button" value="next" id="enquetesample_configgroup" /> <input type="hidden" name="enquete_id" value="enquetesample" /> </form> メインテンプレートブロックテンプレート単項目選択テンプレー複数選択テンプレートテキスト入力テンプレ最小エラーテンプレー最大エラーテンプレー送信ボタンテンプレーページングボタンテンプレー

20 アンケートの表示 6.1. 実際の表示イメージエラーメッセージ表示時

21 7. アンケートの公開と非公開 7.1. 公開中アンケートの非公開公開中アンケートの非公開処理や非公開の状態で保存されているアンケートを公開するには非公開にするまたは公開するリンクを選択します公開ステータスのコンテンツにある非公開にするリンクをクリックすると公開中アンケートは非公開となります 7.2. 非開中アンケートの公開非公開ステータスのコンテンツにある公開するリンクをクリックすると非公開アンケートは公開となります

8. アンケート結果 8.1. アンケート結果閲覧詳細表示リンクよりアンケートの集計結果を閲覧することができますアンケート結果画面ではユーザが選択入力したオプションが件数としてカウント表示されます 1. 文字コード選択 CSV 出力にてエクスポートされるデータの文字コードを選択します 2.

22 8. アンケート結果 8.1. アンケート結果閲覧詳細表示リンクよりアンケートの集計結果を閲覧することができますアンケート結果画面ではユーザが選択入力したオプションが件数としてカウント表示されます 1. 文字コード選択 CSV 出力にてエクスポートされるデータの文字コードを選択します 2. CSV 出力 CSV 出力ボタンを押下することでアンケート結果を CSV 形式でエクスポートします 3. 完全削除アンケートを削除します 4. アンケート結果削除アンケートの結果のみ削除します 5. 定義ファイルの出力作成したアンケート項目設定を xml データでエクスポートします

23 補足 : アンケートが格納されているコンテンツグループから対象コンテンツを削除した場合アンケート結果は一覧から閲覧可能なままですがステータスは削除済みとなりプレビュー公開する / 非公開にするリンクが表示されなくなります 8.2. アンケート結果出力集計されたアンケート結果をファイル形式で出力することも可能です上部にあるプルダウンメニューより文字コードを選択し CSV 出力ボタンにてファイルを出力します 9. アンケート結果の削除集計されたアンケートの結果を削除するにはアンケート結果削除ボタンにて実行します 10. アンケートの削除アンケートを削除するには完全削除ボタンにて実行しますアンケートを削除する場合は必ず当該アンケートと対になるページコンテンツを削除してから行ってください

24 11. その他注意事項 1. 定義ファイル出力ボタンでエクスポートされる XML データの文字コードは Java の文字コードに依存いたします 2. 作成したアンケートページを関数等を使用して表示するには構成要素で作成したアンケートのみとなります作成したアンケートページを関数等を使用して表示する事は出来ません以上

ウェブサイト内検索機能マニュアル

HeartCore ウェブサイト内検索機能マニュアル October2013 Ver1.1-1 - 改訂履歴改訂日改訂内容 Ver1.0 2013 年 07 月マニュアル改訂 Ver1.1 2013 年 10 月フォーマット改訂 - 2 - 目次 1. 本文書の目的と対象ライセンス... - 4-1.1 目的...- 4-1.2 対象ライセンス...- 4-2. 機能概要... - 4-2.1