Movable Type 7 + MTAppjQuery 2 + MTAppListing でコンテンツデータ内で他のコンテンツデータと関連付ける
Movable Type 7 のコンテンツデータ内で MTAppjQuery 2 の MTAppListing を使って他のコンテンツデータと関連付ける方法をご紹介します。
Movable Type 7 のコンテンツデータ内で MTAppjQuery 2 の MTAppListing を使って他のコンテンツデータと関連付ける方法をご紹介します。「サイトに埋め込むパーツを「MTAppjQuery 2 ＋コンテンツデータ」で管理して「コンテンツデータグループ」を作ってみよう」の記事がベースになっています。
関連付け用のテキストフィールドを用意
コンテンツデータを関連付けるためのフィールドを用意します。フィールドの種類は「テキスト」にしてください。
今回は「関連記事」という名前のフィールドにしました。
DataAPI を有効にする
関連付けるコンテンツデータが保存されているサイトの「Webサービス」設定で「Data API の利用を許可する。」にチェックを入れ「変更を保存」します。
user.js にコードを書く
user.js に下記の Gist のコードをコピペします。コードの説明はコード内のコメントを参照してください。
これで「関連記事」フィールドの「」をクリックすると、下図のように他のサイトのコンテンツタイプを選択するダイアログが表示されます。
検索（フィルタ）も可能
MTAppListing では、ダイアログに表示された項目のデータを検索してフィルタすることもできます。
項目に無いものでフィルタする
MTAppListing は「ダイアログの表の中のデータを検索」する仕組みになっているので、ダイアログの項目に存在しないものでは検索することができません。
裏を返せば、データが表に入ってさえいればいいので、フィルタに使いたい項目を表に追加して、それを CSS で非表示にしてみようと思います。
今回はコンテンツデータのフィールドの中身と公開日を追加します。
まずは、先ほどの user.js の 66 〜 73 行目あたりの jsontable というところを下記のようにカスタマイズします。
jsontable: {
header: { id: 'ID', label: 'タイトル', data: 'データ', date: '公開日' },
headerOrder: ['id', 'label', 'data', 'date'],
itemsRootKey: 'items',
listingTargetKey: 'id',
listingCheckboxType: 'checkbox',
listingTargetEscape: false
}コンテンツデータの各フィールドのデータは、DataAPI のレスポンスの data プロパティにまとめて入っています。また、公開日はレスポンスの date プロパティです。したがって、jsontable.header と jsontable.headerOder に data と date を追加しました。
この状態で MTAppListing のダイアログを表示すると下図のようになります。
次に user.css を利用して見せる必要のない項目（列）を隠します。user.css は次のようになります。
/* id 列の幅を調整 */
[data-name="id"] {
width: 5em;
}
/* フィルタ用に追加した列を非表示 */
[data-name="data"],[data-name="date"] {
display: none;
}これでダイアログは下図のように戻りました。
試しに表示されていない項目で検索してみると下図のように動いていることがわかります。
本文中のワードで検索
公開日で検索
さらに細かくフィルタするには
さらに細かくフィルタしたい場合は、
- インデックステンプレートであらかじめ JSON を書き出しておき、それをMTAppListing で読み込むようにする
- プラグインで DataAPI をカスタマイズする
- DataAPIExtendSearch を利用してレスポンスをカスタマイズする
といった方法が考えられます。このあたりはケースバイケースで実装していくと良いでしょう。
以上です。
, Updated 2022-08-26