• Home
  • Movable Type
  • MTAppjQuery
  • サイトに埋め込むパーツを「MTAppjQuery 2 +コンテンツデータ」で管理して「コンテンツデータグループ」を作ってみよう

サイトに埋め込むパーツを「MTAppjQuery 2 +コンテンツデータ」で管理して「コンテンツデータグループ」を作ってみよう

言葉では説明しにくいのですが、Movable Type 7 から導入された コンテンツタイプMTAppjQuery 2 を利用して、データはコンテンツデータで管理し、そのデータを出力するためのコンテンツタイプを作ってコンテンツタイプのブロックを作ってみようと思います。

具体例として、下図のような Amazon アソシエイトを利用した「オススメ書籍」のブロックを作ってみたいと思います。

content-block00-min.png

データ構造の全体像は下図のようになります。

content-block-layout-min.png

Amazon アソシエイトのリンクを管理するコンテンツタイプを定義

Amazon アソシエイトのリンクタグと書籍名を管理する オススメ書籍 というコンテンツタイプを作成します。

定義したフィールドは下図の通り、 リンクタグ という名前の 埋め込みテキスト フィールドです。

content-block02-min.png

コンテンツデータのグループを管理するコンテンツタイプを定義

上記で作成したコンテンツデータをピックアップしてグループにするための コンテンツデータブロック というコンテンツタイプを作成します。

定義したフィールドは下図の通り、 オススメ書籍一覧 という名前の テキスト フィールドです。

content-block03-min.png

コンテンツデータを選択するためのフィールドはどうする?

まず、上記で作成した コンテンツデータブロックかたつむりくんのWWWコードブロック というコンテンツデータを保存します。現時点では下図のような UI になっています。

content-block04-min.png

これだと何もできないので、 MTAppjQueryMTAppListing というメソッドを利用して、GUI でコンテンツデータを選択できるようにします。

なお、Movable Type 7 の機能としてコンテンツデータを選択するフィールドも用意されていますが、並び順を制御することができない、同じコンテンツタイプは選択できない、といったデメリットもあるので、柔軟性の高い MTAppListing を利用します。

MTAppListing を利用するためには、MTAppjQuery プラグインの設定で「利用データの設定 > 旧バージョンのメソッド」を 有効 にする必要があります。

user.js で MTAppListing を設定

今回は Data API を利用して、 オススメ書籍 のコンテンツデータを取得するようにします。下記リンク先のコードを user.js に書いて保存します。

https://gist.github.com/tinybeans/6ac21e610637d150e360d87e10aad151

コードの解説はコード中のコメントをご確認ください。

このコードを適用すると下図のようになります。

content-block05-min.png

実際に使って見ると下の動画のようになります。

動画では3つ選択しましたが、もう少し増やして6つ選択してみました。

content-block07-min.png

テンプレートで出力する

今保存したコンテンツデータのIDは 16 でした。

content-block06-min.png

そこで、下記のようなテンプレートでコンテンツデータを出力します。

<mt:Ignore>===
 オススメ書籍一覧フィールドの値(選択したコンテンツデータのID)を配列として取得
 - 変数ids: 選択したコンテンツデータのIDの配列
 - 変数l: ids の最後のインデックス
===</mt:Ignore>
<mt:Contents id="16">
 <mt:ContentField content_field="458bfcba60d77a82c98ddde891ce2a9c4acd9fb2">
 <mt:ContentFieldValue regex_replace="/^,|,$/g","" split="," setvar="ids" />
 </mt:ContentField>
</mt:Contents>
<mt:Var name="ids" function="count" op="--" setvar="l" />

<mt:Ignore>=== 選択したコンテンツデータをループして「id+ID」をキーとしてハッシュに保存 ===</mt:Ignore>
<mt:SetVar name="fields" />
<mt:SetVar name="fields_length" />
<mt:Contents id="$ids">
 <mt:ContentField content_field="dc13648671150ec9221565bc2087c8ce85b1aac8">
 <mt:SetVarBlock name="key">id<mt:ContentID /></mt:SetVarBlock>
 <mt:SetVarBlock name="fields" key="$key">
 <mt:ContentFieldValue regex_replace="/img /","img class='img-fluid' " />
 </mt:SetVarBlock>
 </mt:ContentField>
</mt:Contents>

<mt:Ignore>=== IDの配列をループしてハッシュから値を取り出す(順序を確保するため) ===</mt:Ignore>
<div class="g-bg-gray-light-v5 g-pa-30 g-mb-20 text-center">
 <div class="row">
 <mt:For var="i" from="0" to="$l" compress="3">
 <div class="col-sm">
 <mt:SetVarBlock name="key">id<mt:Var name="ids" index="$i" /></mt:SetVarBlock>
 <mt:Var name="fields" key="$key" />
 </div>
 </mt:For>
 </div>
</div>

これで無事に冒頭のキャプチャのようにコンテンツデータを取り出すことができました。

以上です。お試しください。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

MTAppjQuery