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

Movable Type 7 から導入された コンテンツタイプ と MTAppjQuery 2 を利用して、データはコンテンツデータで管理し、そのデータを出力するためのコンテンツタイプを作ってコンテンツタイプのブロックを作ってみようと思います。具体例として、Amazon アソシエイトを利用した「オススメ書籍」のブロックを作ってみたいと思います。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

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

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

Content block00 min

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

Content block layout min

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

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

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

Content block02 min

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

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

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

Content block03 min

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

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

Content block04 min

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

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

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

user.js で MTAppListing を設定

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

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

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

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

Content block05 min

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

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

Content block07 min

テンプレートで出力する

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

Content block06 min

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

<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>

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

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

Published 2019-02-08
Updated 2022-08-26

「MTAppjQuery」カテゴリの記事一覧