人気ワード

Copy Title & URL

Bookmark

Feed

Share

コンテンツタイプ【キープ】:キープJS

目次

  1. コンテンツタイプ【キープ】:キープJSとは
    1. キープJSコンテンツ新規作成
    2. キープJSの設定
      1. 作成例:ボタンクリックでキープ(お気に入り)
      2. 作成例:ページロードでキープ(閲覧履歴)
    3. ステータスコード

コンテンツタイプ【キープ】:キープJSとは

キープJS」コンテンツは、キープモジュールに関する挙動(イベント)をJavaScriptコードで出力するコンテンツです。
作成したJSコードを対象シートの一覧・詳細コンテンツで読み込むことで、キープモジュールを動作させます。

▼「キープJS」コンテンツを利用した「お気に入り」機能の設定イメージ

キープjs_コンテンツ関連イメージ
  1. アイテム一覧や詳細コンテンツに「お気に入りボタン」を配置
  2. 「お気に入りボタン」の挙動を「キープJS」コンテンツで設定
    ※キープボタンに関する各種挙動を記述します。

キープJSコンテンツは、JSに精通していない方でもコード生成補助を利用すれば、必要な項目を設定するだけで、キープの挙動を作成することができます。

キープJSコンテンツ新規作成

画面右上歯車マーク >コンテンツ > 新規作成

コンテンツタイプ:キープJSを選択し、キープ対象とするシートを選択します。

キープjs_コンテンツの新規作成
図1-1:コンテンツの新規作成

キープJSの設定

まず、基本的なページ情報の設定、閲覧権限や公開設定などを行った上、キープ機能の挙動はJavaScriptで記述します。

直接記述も可能ですが、ここでは「コード生成補助」による入力補完機能について解説していきます。

キープjs_コード生成補助

キープJS設定
動作設定 実行時の挙動 / 引数 利用例
切替(登録/削除) 登録・削除が一つのボタン(toggle)で操作の切り替えが可能
対象のキープが記録されていなければ記録し、記録されていれば削除
引数:toggle
お気に入りコンテンツ
登録 登録のみ実行
引数:fixed_add
お気に入りコンテンツ
閲覧履歴コンテンツ
削除 削除のみ実行
引数:fixed_del
お気に入りコンテンツ
更新 既にあるキープレコードを常に最新のキープレコードに上書き
引数:update
閲覧履歴コンテンツ

※引数なし、引数不正は、toggleと同じ動きをします。

イベント種別 動作の発火条件 利用例
クリック ページクリック時に発火 お気に入りコンテンツ
ページロード ページアクセス時に発火 閲覧履歴コンテンツ

完了動作設定 実行後の動作 利用例
なし コンテンツ側の表示に変更はなく、レコードのみ生成 お気に入りコンテンツ
閲覧履歴コンテンツ
遷移 ページを遷移 お気に入りコンテンツ
更新 ページを更新 お気に入りコンテンツ
アラート アラートを表示
※SweetAlertを使用。
利用先のコンテンツに[SweetAlaert]変数の設置が必要
お気に入りコンテンツ
閲覧履歴コンテンツ

設定方式は、既に入力されているコードを差し替える場合、「差し替え」を指定します。
※デフォルトは「挿入」

1. 作成例:ボタンクリックでキープ(お気に入り)

実際にクリックイベントの作成例を見てみましょう。

① 新規キープJSコンテンツを作成
・コンテンツID:item_keep

以下の設定値でコード生成補助を利用してJSコードを出力します。
利用先コンテンツでの指定例
・「お気に入りボタン」をクリックした際のイベントハンドラのclass名として「keep
・対象IDを格納したイベントハンドラに付与されるカスタムデータ属性名(data-*)として「data-keep

キープjs_基本JS_1

② キープ対象のコンテンツ(アイテム一覧・詳細)

①で生成したキープ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

キープjs_基本JS_2

② キープ対象のコンテンツ(アイテム一覧・詳細)

<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で制御してください。

レスポンスの内容については、キープ処理のステータスコード を参照してください。

keepモジュール関連マニュアル

関連記事