• Home
  • Movable Type
  • MTAppjQuery
  • Movable Type 7 + MTAppjQuery 2 + MTAppListing でコンテンツデータ内で他のコンテンツデータと関連付ける

Movable Type 7 + MTAppjQuery 2 + MTAppListing でコンテンツデータ内で他のコンテンツデータと関連付ける

Movable Type 7 のコンテンツデータ内で MTAppjQuery 2 の MTAppListing を使って他のコンテンツデータと関連付ける方法をご紹介します。「サイトに埋め込むパーツを「MTAppjQuery 2 +コンテンツデータ」で管理して「コンテンツデータグループ」を作ってみよう」の記事がベースになっています。

関連付け用のテキストフィールドを用意

コンテンツデータを関連付けるためのフィールドを用意します。フィールドの種類は「テキスト」にしてください。

今回は「関連記事」という名前のフィールドにしました。

Clean Shot 2022 08 26 09 34 41

DataAPI を有効にする

関連付けるコンテンツデータが保存されているサイトの「Webサービス」設定で「Data API の利用を許可する。」にチェックを入れ「変更を保存」します。

Clean Shot 2022 08 26 09 37 16

user.js にコードを書く

user.js に下記の Gist のコードをコピペします。コードの説明はコード内のコメントを参照してください。

これで「関連記事」フィールドの「」をクリックすると、下図のように他のサイトのコンテンツタイプを選択するダイアログが表示されます。

Clean Shot 2022 08 26 10 21 45

検索(フィルタ)も可能

MTAppListing では、ダイアログに表示された項目のデータを検索してフィルタすることもできます。

Clean Shot 2022 08 26 10 05 20

項目に無いものでフィルタする

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.headerjsontable.headerOderdatadate を追加しました。

この状態で MTAppListing のダイアログを表示すると下図のようになります。

Clean Shot 2022 08 26 11 03 41

次に user.css を利用して見せる必要のない項目(列)を隠します。user.css は次のようになります。

/* id 列の幅を調整 */
[data-name="id"] {
    width: 5em;
}
/* フィルタ用に追加した列を非表示 */
[data-name="data"],[data-name="date"] {
    display: none;
}

これでダイアログは下図のように戻りました。

Clean Shot 2022 08 26 11 06 24

試しに表示されていない項目で検索してみると下図のように動いていることがわかります。

本文中のワードで検索

Clean Shot 2022 08 26 11 10 17

公開日で検索

Clean Shot 2022 08 26 11 14 19

さらに細かくフィルタするには

さらに細かくフィルタしたい場合は、

  • インデックステンプレートであらかじめ JSON を書き出しておき、それをMTAppListing で読み込むようにする
  • プラグインで DataAPI をカスタマイズする
  • DataAPIExtendSearch を利用してレスポンスをカスタマイズする

といった方法が考えられます。このあたりはケースバイケースで実装していくと良いでしょう。

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

MTAppjQuery