Movable Type 7 から導入された コンテンツタイプ と MTAppjQuery 2 を利用して、データはコンテンツデータで管理し、そのデータを出力するためのコンテンツタイプを作ってコンテンツタイプのブロックを作ってみようと思います。具体例として、Amazon アソシエイトを利用した「オススメ書籍」のブロックを作ってみたいと思います。
言葉では説明しにくいのですが、Movable Type 7 から導入された コンテンツタイプ と MTAppjQuery 2 を利用して、データはコンテンツデータで管理し、そのデータを出力するためのコンテンツタイプを作ってコンテンツタイプのブロックを作ってみようと思います。
具体例として、下図のような Amazon アソシエイトを利用した「オススメ書籍」のブロックを作ってみたいと思います。
データ構造の全体像は下図のようになります。
Amazon アソシエイトのリンクタグと書籍名を管理する オススメ書籍
というコンテンツタイプを作成します。
定義したフィールドは下図の通り、 リンクタグ
という名前の 埋め込みテキスト
フィールドです。
上記で作成したコンテンツデータをピックアップしてグループにするための コンテンツデータブロック
というコンテンツタイプを作成します。
定義したフィールドは下図の通り、 オススメ書籍一覧
という名前の テキスト
フィールドです。
まず、上記で作成した コンテンツデータブロック
に かたつむりくんのWWWコードブロック
というコンテンツデータを保存します。現時点では下図のような UI になっています。
これだと何もできないので、 MTAppjQuery の MTAppListing
というメソッドを利用して、GUI でコンテンツデータを選択できるようにします。
なお、Movable Type 7 の機能としてコンテンツデータを選択するフィールドも用意されていますが、並び順を制御することができない、同じコンテンツタイプは選択できない、といったデメリットもあるので、柔軟性の高い MTAppListing
を利用します。
MTAppListing
を利用するためには、MTAppjQuery プラグインの設定で「利用データの設定 > 旧バージョンのメソッド」を 有効
にする必要があります。
今回は Data API を利用して、 オススメ書籍
のコンテンツデータを取得するようにします。下記リンク先のコードを user.js
に書いて保存します。
https://gist.github.com/tinybeans/6ac21e610637d150e360d87e10aad151
コードの解説はコード中のコメントをご確認ください。
このコードを適用すると下図のようになります。
実際に使って見ると下の動画のようになります。
動画では3つ選択しましたが、もう少し増やして6つ選択してみました。
今保存したコンテンツデータのIDは 16
でした。
そこで、下記のようなテンプレートでコンテンツデータを出力します。
<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>
これで無事に冒頭のキャプチャのようにコンテンツデータを取り出すことができました。
以上です。お試しください。