コンテンツタイプ【keep】：キープJS
コンテンツタイプ【keep】：キープJSとは
「キープJS」コンテンツは、keepモジュールに関する挙動（イベント）をJavaScriptコードで出力するコンテンツです。
作成したJSコードを対象シートの一覧・詳細コンテンツで読み込むことで、keepモジュールを動作させます。
▼「キープJS」コンテンツを利用した「お気に入り」機能の設定イメージ
- アイテム一覧や詳細コンテンツに「お気に入りボタン」を配置
- 「お気に入りボタン」の挙動を「キープJS」コンテンツで設定
※キープボタンに関する各種挙動を記述します。
キープJSコンテンツは、JSに精通していない方でもコード生成補助を利用すれば、必要な項目を設定するだけで、キープの挙動を作成することができます。
キープJSコンテンツ新規作成
画面右上歯車マーク >コンテンツ > 新規作成
コンテンツタイプ：キープJSを選択し、キープ対象とするシートを選択します。
キープJSの設定
まず、基本的なページ情報の設定、閲覧権限や公開設定などを行った上、キープ機能の挙動はJavaScriptで記述します。
直接記述も可能ですが、ここでは「コード生成補助」による入力補完機能について解説していきます。
| 動作設定 | 実行時の挙動 / 引数 | 利用例 |
|---|---|---|
| 切替（登録／削除） | 登録・削除が一つのボタン（toggle）で操作の切り替えが可能 対象のキープが記録されていなければ記録し、記録されていれば削除 引数：toggle |
お気に入りコンテンツ |
| 登録 | 登録のみ実行 引数：fixed_add |
お気に入りコンテンツ 閲覧履歴コンテンツ |
| 削除 | 削除のみ実行 引数：fixed_del |
お気に入りコンテンツ |
| 更新 | 既にあるキープレコードを常に最新のキープレコードに上書き 引数：update |
閲覧履歴コンテンツ |
※引数なし、引数不正は、toggleと同じ動きをします。
| イベント種別 | 動作の発火条件 | 利用例 |
|---|---|---|
| クリック | ページクリック時に発火 | お気に入りコンテンツ |
| ページロード | ページアクセス時に発火 | 閲覧履歴コンテンツ |
| 完了動作設定 | 実行後の動作 | 利用例 |
|---|---|---|
| なし | コンテンツ側の表示に変更はなく、レコードのみ生成 | お気に入りコンテンツ 閲覧履歴コンテンツ |
| 遷移 | ページを遷移 | お気に入りコンテンツ |
| 更新 | ページを更新 | お気に入りコンテンツ |
| アラート | アラートを表示 ※SweetAlertを使用。 利用先のコンテンツに [SweetAlaert]変数の設置が必要 |
お気に入りコンテンツ 閲覧履歴コンテンツ |
設定方式は、既に入力されているコードを差し替える場合、「差し替え」を指定します。
※デフォルトは「挿入」
1. 作成例：ボタンクリックでキープ（お気に入り）
実際にクリックイベントの作成例を見てみましょう。
① 新規キープJSコンテンツを作成
・コンテンツID：item_keep
以下の設定値でコード生成補助を利用してJSコードを出力します。
利用先コンテンツでの指定例
・「お気に入りボタン」をクリックした際のイベントハンドラのclass名として「keep」
・対象IDを格納したイベントハンドラに付与されるカスタムデータ属性名（data-*）として「data-keep」
② キープ対象のコンテンツ（アイテム一覧・詳細）
①で生成したキープJSをキープ対象のコンテンツで読み込みます。
<head>内に以下のように記述します。src属性に指定する外部リソースURL(キープJSコンテンツのURL）は変数で挿入できます。
<head>タグ記述例
<script type="text/javascript" src="[keep_js_item_keep_url]"></script>HTML出力例
<script type="text/javascript" src="./contents.php?c=item_keep"></script><body>内の「お気に入りボタン」に、①で指定したclass名：keep、データ属性：data-keepに対象ID（[item_id]）を格納します。
<body>タグ記述例
<input type="button" class="keep" data-keep="[item_id]" value="お気に入り" />HTML出力例
<input type="button" class="keep" data-keep="************" value="お気に入り" />※ ************ の部分にキープ対象アイテムのシステムIDが展開されます。
Attention
コード生成補助はjQueryを利用しています。
利用先のコンテンツに「jQuery」変数を読み込んでおきます。
2. 作成例：ページロードでキープ（閲覧履歴）
① 新規キープJSコンテンツを作成
・コンテンツID：item_keep
ページロードイベントの場合は、キープ対象のアイテムIDを格納するパラメータ名を指定します。
・指定パラメータ名：keep
② キープ対象のコンテンツ（アイテム一覧・詳細）
<head>タグ内に以下のように記述します。
src属性に外部リソースURL(キープJSコンテンツのURL変数）、パラメータ：keepにキープ対象アイテムのシステムIDを渡します。
<head>タグ記述例
<script type="text/javascript" src="[keep_js_item_keep_url]&keep=[item_id]"></script>HTML出力例
<script type="text/javascript" src="./contents.php?c=item_keep&keep=************"></script>※ ************ の部分にキープ対象アイテムのシステムIDが展開されます。
ステータスコード
キープ処理のレスポンスは、JSON形式で返却します。
ステータスコードを判断条件として、エラー内容の出力やアラートの変更、キープボタン表示などの処理をJSで制御してください。
レスポンスの内容については、キープ処理のステータスコード を参照してください。
