CASE.08 複数画面でバナー表示/非表示を切り替えたい

トップ＞開発をする方向け＞ App活用事例＞データアクセスAPI

CASE.08 複数画面でバナー表示/非表示を切り替えたい

概要

定期的に同じイベントを行っており、その際イベント画像を複数のページで表示したいが、
ページ毎にテンプレートの修正をせずに、一括で修正を行いたいといった場合のカスタマイズ例をご紹介します。

利用するAPI

カスタマイズ例

初期設定とは店舗単位で処理の分岐や設定を追加したい場合に独自の設定を行えるといった仕組みになります。
こちらの例では、初期設定にイベント画像を表示するフラグとなるラジオボタンを設定し、
そのラジオボタンにチェックが入っている場合に画像を表示する、といった形のカスタマイズ例になります。

初期設定の追加方法

例えば、ebisumartNoが EBISU_TEST の店舗様へ APPS_TEST Appsをインストールする際に
APPS_TEST:EVENT_IMAGE_SETTINGというIDで初期設定を追加する場合、次のような手順で追加が可能です。

次のデータアクセスAPIで「APPS_TEST:EVENT_IMAGE_SETTING」の初期設定情報を取得
```
GET /EBISU_TEST/dataaccess/configurations.json?names=APPS_TEST:EVENT_IMAGE_SETTING
```

1の結果がnullの場合、以下のデータアクセスAPIで初期設定を登録

POST /EBISU_TEST/dataaccess/configurations.json
body:
{
	"CLIENT_CONFIG_NAME":"TEST_YONEYAMA:EVENT_IMAGE_SETTING",
	"CLIENT_CONFIG_USE_KBN":1,
	"CLIENT_CONFIG_VALUE":0,
	"DISP_ORDER":20000,
	"DISP_NAME":"イベント用バナー表示設定",
	"DISP_COMMENT":"イベント用バナーを表示するかしないかを設定します",
	"FORM_TYPE":4,
	"FORM_OPTION":"0:画像を表示しません,1:画像を表示します",
	"CHECK_PROPERTY":1    
}

上記サンプルのbodyに設定している要素については店舗設定関連のリソース一覧をご参照ください。

注意点として、APPS_TEST:EVENT_IMAGE_SETTINGが初期設定を特定するキーとなります。
形式は必ず[Apps名]:[任意の文字列]の形で設定してください。

また、configurations.jsonはPOST実行時、CLIENT_CONFIG_NAMEをキーに初期設定を検索し、
既に初期設定が存在する場合はエラーを返却する仕様となっています。
そのため事前に追加したい初期設定をGETで取得し、nullが返却された場合はPOSTで登録、という手順が必要となります。

初期設定の利用例

正常に処理が完了すると、システム設定＞システム設定マスタ＞初期設定に次のような設定が追加されます。

今回は追加された初期設定にて「画像を表示します」を選択しました。

この状態で下記のリクエストを送ると、初期設定で選択されている値を取得することができます。

GET /EBISU_TEST/dataaccess/configurations/APPS_TEST:EVENT_IMAGE_SETTING.json

上記のリクエストで取得できる値は、FORM_OPTIONの設定値を「0:XXX,1:YYY,....」の形で設定した場合、
ラジオボタンには「XXX,YYY,....」の形で選択肢が表示され、選択されている選択肢の「0,1,....」部分の文字列を取得します。
その為、今回上記のリクエストで取得できる値は「1」になります。

次に、上記で取得した値をビューアドオンAPIを利用して画面にバナーを表示するか判断します。
初期設定で設定した文字列を表示したいテンプレートに対して、次のような内容を追記してください。

テンプレートに記述する内容

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://mayaa.seasar.org" xml:lang="ja" lang="ja" xmlns:sample="eb:APPS_TEST/view_common.json">

....

<!-- 初期設定の値を記載する箇所 -->
<div sample:if="FLAG">
	<img src="images/dummy1.png" width="770" height="300" alt="ダミー" />
</div>

次に、Getした値が0ならFLAGにfalseを返し、1ならFLAGにtrueを返す、といった具合で
先ほど初期設定より取得した値を用いて、画像を表示するかしないかをApps側で判断します。

今回は「1」が返ってきたため、レスポンスのFLAGにtrueを格納すると最終的に次のように置換されます。

ビューアドオンAPIへのレスポンス

{
	"FLAG":true
}

最終的に置換されるHTML

<!-- 初期設定の値を反映する箇所 -->
<div>
    <img src="images/dummy1.png" width="770" height="300" alt="ダミー" />
</div>

なお、レスポンスのFLAGにfalseを格納すると最終的に次のように置換され、imgタグはテンプレートに記載されません。

ビューアドオンAPIへのレスポンス

{
	"FLAG":false
}

最終的に置換されるHTML

<!-- 初期設定の値を反映する箇所 -->

このやり方のメリットとしては、初期設定のラジオボタンの選択を切り替えるだけで
自動的にこの対応を実施したすべてのテンプレートに対して内容が反映されるという点が挙げられます。

例えば、トップ画面、商品一覧画面、商品詳細画面のテンプレートに上記ビューアドオンAPIの記述をしていた場合、
イベント終了時にバナーを消したいといった対応が発生した際、テンプレートやAppsの修正をせずとも
初期設定を修正するだけで各ページにその内容が反映されます。

最後に、これらのAPIの各パラメータは Apps通信ログ を利用することで確認できます。
送られてくるリクエストパラメータは「対象データ」に、返したレスポンスパラメータは「処理結果メッセージ」に記載されます。
利用方法などについては上記ページにて掲載されておりますので、ぜひご確認ください。

CASE.08 複数画面でバナー表示/非表示を切り替えたい | サポートサイト

開発者向けサポート