MTAppjQuery v3 の mtapp('csvEditor') のデータをテンプレートで扱うサンプル
目次
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データを読み込むと下図のように表形式でデータが表示され、編集も簡単に行えるようになります。
そして、このフィールドでは、読み込んだ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 で表示するようにしています。
--- CSVデータ（rows）を行ごと（columns）にループして処理 ---
--- 1回目の行のループのときの処理（thead） ---
--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---
--- 1回目以外の行のループの処理（tbody） ---
--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---
出力したテンプレートを表示すると下図のようになりました。
列ごとに処理を分ける
次は上記のテーブルを行ごとに少し表示を変えたり非表示にしたりしてみます。今回は以下のルールで表示してみます。
- 2列目の「氏名（ひらがな）」は
smallタグで小さく表示 - 4列目の生年月日は表示しない
これを実現するテンプレートは以下のようになります。
--- CSVデータ（rows）を行ごと（columns）にループして処理 ---
--- 1回目の行のループのときの処理（thead） ---
--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---
--- 1回目以外の行のループの処理（tbody） ---
--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---
このテンプレートの中では、行をループする mt:Foreach と列をループする mt:Foreach の中で、それぞれのループの回数をカウントする変数 rows_counter と columns_counter を定義しています。
mt:Foreach の中では予約変数である __counter__ でもループの回数は取得できます。この変数はローカルスコープを持っているので、親のループと子のループは別々に扱われます。
しかし、どちらも同じ変数名だとテンプレートの可読性が落ちますので、上記のテンプレートのようにそれぞれカウンター変数を用意した方が良いと思います。カウンター変数を利用するのがどちらか一方の mt:Foreach だけであればそのまま __counter__ を利用しても問題ありません。
キーと値の形の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は以下のテンプレートで出力できます。このテンプレートでは、冒頭でそれぞれの列に対応するキーを定義しています。
--- それぞれの列に対応するキーを定義（ key には列番号をセット） ---
--- 最終的にJSONとして出力する変数を定義 ---
--- CSVデータ（rows）を行ごと（columns）にループして処理 ---
--- 1行目のループのときの処理（thead） ---
--- 各行のデータを入れる変数を定義 ---
--- 行の中の列のデータ（columns）を列ごと（column）にループして処理 ---
--- ループ中の列のキーを取得 ---
--- 取得したキーと値を item にセット ---
--- 各行のデータを items に追加 ---
--- JSON にして出力 ---
以上です。
.mtapp('csvEditor') が CSV を利用する際の選択肢の一つとなれば幸いです。
