かたつむりくんのWWW

お問い合わせ

MTAppjQuery v3 の mtapp('csvEditor') のデータをテンプレートで扱うサンプル

MTAppjQuery の mtapp('csvEditor') のデータをテンプレートで扱う際に役立つサンプルテンプレートをご紹介します。

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

MTAppjQuery v2 まではオプションプラグインとして別売りされていた MTAppCSVEditor が MTAppjQuery v3 から本体に統合されました。

これまで $(selector).MTAppCSVEditor() としていた書き方を $(selector).mtapp('csvEditor') とするだけで、これまでと全く同様にご利用になれます。

つまり、これまで 20,000円で販売されていたオプションプラグインが統合されたということで、MTAppjQuery v3 は MTAppjQuery v2 よりも2万円もお得！ということになります。

さて、今回はこの.mtapp('csvEditor')をテンプレートで扱うTipsをご紹介したいと思います。

.mtapp('csvEditor') とは

.mtapp('csvEditor') は、Movable Type の管理画面のテキストエリアの入力フィールドに CSV ファイルのインポート、編集、エクスポート機能を追加するメソッドです。詳細は「MTAppCSVEditor」のページをご覧ください。オプションプラグインとしての紹介ページですが、機能は変わっていません。

保存されるデータ

今回は以下のようなCSVデータを用意しました。

なお、今回の記事で利用しているデータは「個人情報テストデータジェネレーター」で生成されたダミーデータです。

"氏名","氏名（ひらがな）","年齢","生年月日","性別","血液型"
"黒澤 恵","くろさわ めぐみ",76,"1948年06月06日","女","O"
"木原 高広","きはら たかひろ",37,"1987年03月13日","男","O"
"菅原 裕恵","すがわら ひろえ",40,"1984年03月06日","女","A"
"森島 友也","もりしま ゆうや",67,"1957年04月25日","男","A"
"今井 たく","いまい たく",24,"1999年11月05日","男","B"
"大塚 寛","おおつか ひろし",27,"1996年11月07日","男","B"
"荒山 篤志","あらやま あつし",26,"1997年11月17日","男","A"
"三浦 大輔","みうら だいすけ",64,"1960年03月12日","男","B"
"井口 理恵子","いぐち りえこ",70,"1954年03月20日","女","A"
"松井 謙","まつい けん",34,"1989年07月30日","男","B"

そして、ベースネームが csv_normal という「テキスト（複数行）」のカスタムフィールドを作成し、下記のコードを user.js に記載して .mtapp('csvEditor') を適用しました。

(function ($) {
    $('#customfield_csv_normal').mtapp('csvEditor', {
        debug: true,
        header: 1,
    });
})(jQuery);

このフィールドで先ほど用意したCSVデータを読み込むと下図のように表形式でデータが表示され、編集も簡単に行えるようになります。

Clean Shot 2024 06 26 at 14 13 19 2x

そして、このフィールドでは、読み込んだCSVデータが以下のようなJSONデータに変換されて保存されます（下記のデータは見やすいように整形していますが、実際は1行のテキストデータとして保存されます）。

[
   [
      "氏名",
      "氏名（ひらがな）",
      "年齢",
      "生年月日",
      "性別",
      "血液型"
   ],
   [
      "黒澤 恵",
      "くろさわ めぐみ",
      "76",
      "1948年06月06日",
      "女",
      "O"
   ],
   [
      "木原 高広",
      "きはら たかひろ",
      "37",
      "1987年03月13日",
      "男",
      "O"
   ],
   [
      "菅原 裕恵",
      "すがわら ひろえ",
      "40",
      "1984年03月06日",
      "女",
      "A"
   ],
   [
      "森島 友也",
      "もりしま ゆうや",
      "67",
      "1957年04月25日",
      "男",
      "A"
   ],
   [
      "今井 たく",
      "いまい たく",
      "24",
      "1999年11月05日",
      "男",
      "B"
   ],
   [
      "大塚 寛",
      "おおつか ひろし",
      "27",
      "1996年11月07日",
      "男",
      "B"
   ],
   [
      "荒山 篤志",
      "あらやま あつし",
      "26",
      "1997年11月17日",
      "男",
      "A"
   ],
   [
      "三浦 大輔",
      "みうら だいすけ",
      "64",
      "1960年03月12日",
      "男",
      "B"
   ],
   [
      "井口 理恵子",
      "いぐち りえこ",
      "70",
      "1954年03月20日",
      "女",
      "A"
   ],
   [
      "松井 謙",
      "まつい けん",
      "34",
      "1989年07月30日",
      "男",
      "B"
   ]
]

テーブルで表示

まずはこのデータをテーブル（表形式）で表示してみます。

テンプレートの処理の大まかな流れとしては、MTAppjQuery で追加されたテンプレートタグ「mt:Foreach」を使って、縦方向（各行）のループを回しつつ、その中で1行ごとに横方向（各列）のループを回してデータを取り出す形となります。つまり mt:Foreach タグを入れ子にして利用する形になります。

今回のCSVのケースでは、1行目がヘッダーですので、テーブルにおいても1行目を thead で表示するようにしています。

<mt:csv_normal convert_breaks="0" json_decode="1" setvar="rows" />

<mt:If name="rows">
    <table>
        <mt:Ignore>--- CSVデータ（rows）を行ごと（columns）にループして処理 ---</mt:Ignore>
        <mt:Foreach name="rows" as="columns">
            <mt:Ignore>--- 1回目の行のループのときの処理（thead） ---</mt:Ignore>
            <mt:If name="__counter__" eq="1">
                <thead>
                    <tr>
                        <mt:Ignore>--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---</mt:Ignore>
                        <mt:Foreach name="columns" as="column">
                            <th><mt:Var name="column" /></th>
                        </mt:Foreach>
                    </tr>
                </thead>
            <mt:Ignore>--- 1回目以外の行のループの処理（tbody） ---</mt:Ignore>
            <mt:Else>
                <tbody>
                    <tr>
                        <mt:Ignore>--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---</mt:Ignore>
                        <mt:Foreach name="columns" as="column">
                            <td><mt:Var name="column" /></th>
                        </mt:Foreach>
                    </tr>
                </thead>
            </mt:If>
        </mt:Foreach>
    </table>
</mt:If>

出力したテンプレートを表示すると下図のようになりました。

Clean Shot 2024 06 26 at 14 34 56 2x

列ごとに処理を分ける

次は上記のテーブルを行ごとに少し表示を変えたり非表示にしたりしてみます。今回は以下のルールで表示してみます。

  • 2列目の「氏名（ひらがな）」は small タグで小さく表示
  • 4列目の生年月日は表示しない

これを実現するテンプレートは以下のようになります。

<mt:csv_normal convert_breaks="0" json_decode="1" setvar="rows" />

<mt:If name="rows">
    <table>
        <mt:Ignore>--- CSVデータ（rows）を行ごと（columns）にループして処理 ---</mt:Ignore>
        <mt:SetVar name="rows_counter" value="0" note="行のループのカウンター変数を初期化" />
        <mt:Foreach name="rows" as="columns">
            <mt:SetVar name="rows_counter" op="inc" note="行のループのカウンター変数を1増やす" />
            <mt:Ignore>--- 1回目の行のループのときの処理（thead） ---</mt:Ignore>
            <mt:If name="rows_counter" eq="1">
                <thead>
                    <tr>
                        <mt:Ignore>--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---</mt:Ignore>
                        <mt:SetVar name="columns_counter" value="0" note="列のループのカウンター変数を初期化" />
                        <mt:Foreach name="columns" as="column">
                            <mt:SetVar name="columns_counter" op="inc" note="列のループのカウンター変数を1増やす" />
                            <mt:If name="columns_counter" ne="4" note="4列目以外の処理 = 4列目は出力しない">
                                <th><mt:Var name="column" /></th>
                            </mt:If>
                        </mt:Foreach>
                    </tr>
                </thead>
            <mt:Ignore>--- 1回目以外の行のループの処理（tbody） ---</mt:Ignore>
            <mt:Else>
                <tbody>
                    <tr>
                        <mt:Ignore>--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---</mt:Ignore>
                        <mt:SetVar name="columns_counter" value="0" note="列のループのカウンター変数を初期化" />
                        <mt:Foreach name="columns" as="column">
                            <mt:SetVar name="columns_counter" op="inc" note="列のループのカウンター変数を1増やす" />
                            <mt:If name="columns_counter" eq="2" note="2列目の処理">
                                <td><small><mt:Var name="column" /></small></th>
                            <mt:ElseIf name="columns_counter" ne="4" note="4列目以外の処理 = 4列目は出力しない">
                                <td><mt:Var name="column" /></th>
                            </mt:If>
                        </mt:Foreach>
                    </tr>
                </thead>
            </mt:If>
        </mt:Foreach>
    </table>
</mt:If>

このテンプレートの中では、行をループする mt:Foreach と列をループする mt:Foreach の中で、それぞれのループの回数をカウントする変数 rows_counter と columns_counter を定義しています。

mt:Foreach の中では予約変数である __counter__ でもループの回数は取得できます。この変数はローカルスコープを持っているので、親のループと子のループは別々に扱われます。

しかし、どちらも同じ変数名だとテンプレートの可読性が落ちますので、上記のテンプレートのようにそれぞれカウンター変数を用意した方が良いと思います。カウンター変数を利用するのがどちらか一方の mt:Foreach だけであればそのまま __counter__ を利用しても問題ありません。

Clean Shot 2024 06 26 at 17 37 55 2x

キーと値の形のJSONとして出力

次は、項目を取り出しやすいように key value の形のJSONとして出力してみたいと思います。具体的には以下のような形のJSONです。

[
   {
      "age":"76",
      "bloodType":"O",
      "dateOfBirth":"1948年06月06日",
      "gender":"女",
      "kana":"くろさわ めぐみ",
      "name":"黒澤 恵"
   },
   {
      "age":"37",
      "bloodType":"O",
      "dateOfBirth":"1987年03月13日",
      "gender":"男",
      "kana":"きはら たかひろ",
      "name":"木原 高広"
   },
   {
      "age":"40",
      "bloodType":"A",
      "dateOfBirth":"1984年03月06日",
      "gender":"女",
      "kana":"すがわら ひろえ",
      "name":"菅原 裕恵"
   },
   {
      "age":"67",
      "bloodType":"A",
      "dateOfBirth":"1957年04月25日",
      "gender":"男",
      "kana":"もりしま ゆうや",
      "name":"森島 友也"
   },
   {
      "age":"24",
      "bloodType":"B",
      "dateOfBirth":"1999年11月05日",
      "gender":"男",
      "kana":"いまい たく",
      "name":"今井 たく"
   },
   {
      "age":"27",
      "bloodType":"B",
      "dateOfBirth":"1996年11月07日",
      "gender":"男",
      "kana":"おおつか ひろし",
      "name":"大塚 寛"
   },
   {
      "age":"26",
      "bloodType":"A",
      "dateOfBirth":"1997年11月17日",
      "gender":"男",
      "kana":"あらやま あつし",
      "name":"荒山 篤志"
   },
   {
      "age":"64",
      "bloodType":"B",
      "dateOfBirth":"1960年03月12日",
      "gender":"男",
      "kana":"みうら だいすけ",
      "name":"三浦 大輔"
   },
   {
      "age":"70",
      "bloodType":"A",
      "dateOfBirth":"1954年03月20日",
      "gender":"女",
      "kana":"いぐち りえこ",
      "name":"井口 理恵子"
   },
   {
      "age":"34",
      "bloodType":"B",
      "dateOfBirth":"1989年07月30日",
      "gender":"男",
      "kana":"まつい けん",
      "name":"松井 謙"
   }
]

上記のJSONは以下のテンプレートで出力できます。このテンプレートでは、冒頭でそれぞれの列に対応するキーを定義しています。

<mt:csv_normal convert_breaks="0" json_decode="1" setvar="rows" />

<mt:Ignore>--- それぞれの列に対応するキーを定義（ key には列番号をセット） ---</mt:Ignore>
<mt:SetVar name="props" key="1" value="name" />
<mt:SetVar name="props" key="2" value="kana" />
<mt:SetVar name="props" key="3" value="age" />
<mt:SetVar name="props" key="4" value="dateOfBirth" />
<mt:SetVar name="props" key="5" value="gender" />
<mt:SetVar name="props" key="6" value="bloodType" />

<mt:If name="rows">
    <mt:Ignore>--- 最終的にJSONとして出力する変数を定義 ---</mt:Ignore>
    <mt:SetVar name="items" value="" />

    <mt:Ignore>--- CSVデータ（rows）を行ごと（columns）にループして処理 ---</mt:Ignore>
    <mt:SetVar name="rows_counter" value="0" note="行のループのカウンター変数を初期化" />
    <mt:Foreach name="rows" as="columns">
        <mt:SetVar name="rows_counter" op="inc" note="行のループのカウンター変数を1増やす" />

        <mt:Ignore>--- 1行目のループのときの処理（thead） ---</mt:Ignore>
        <mt:If name="rows_counter" ne="1">

            <mt:Ignore>--- 各行のデータを入れる変数を定義 ---</mt:Ignore>
            <mt:SetVar name="item" value="" />

            <mt:Ignore>--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---</mt:Ignore>
            <mt:SetVar name="columns_counter" value="0" note="列のループのカウンター変数を初期化" />
            <mt:Foreach name="columns" as="column">
                <mt:SetVar name="columns_counter" op="inc" note="列のループのカウンター変数を1増やす" />

                <mt:Ignore>--- ループ中の列のキーを取得 ---</mt:Ignore>
                <mt:Var name="props" key="$columns_counter" setvar="prop" />

                <mt:Ignore>--- 取得したキーと値を item にセット ---</mt:Ignore>
                <mt:SetVar name="item" key="$prop" value="$column" />
            </mt:Foreach>

            <mt:Ignore>--- 各行のデータを items に追加 ---</mt:Ignore>
            <mt:SetVar name="items" function="push" value="$item" />
        </mt:If>
    </mt:Foreach>

    <mt:Ignore>--- JSON にして出力 ---</mt:Ignore>
    <mt:Var name="items" to_json="1" trim="1" />
</mt:If>

以上です。

.mtapp('csvEditor') が CSV を利用する際の選択肢の一つとなれば幸いです。

Published 2024-06-26
Updated 2024-06-26

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

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