テーブルに入っている内容を取り出して、再配列する | サロンのホームページ制作 Healing Solutions

テーブルに入っている内容を取り出して、再配列する

Movable typeのMTタグは、何かと便利です。

僕は、プログラムのことが全くと言っていいほどわかりませんが、MTタグでは色々とやることができます。

例えば、テーブルに入っている内容を使って、別のテーブルを書き出したい時。

実用例としては、PC版とスマートフォン版で、別のテーブルを出したい時などに使えるかなと思います。

 

全てのテーブルができるわけではなく、いくつかの制限がありますが、

メモがきをしておきます。

 

まずは、テーブルの構造を確かめる

一般的なテーブルで、一番上の行だけ、見出しになっているパターンで考えてみます。

セルが結合されている場合などは、上手く動作しないので、ご了承下さい。

 

テーブル構造は、こんな感じですね。

<table>
<tbody>
​
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
    <td>セル5</td>
    <td>セル6</td>
  </tr>
※ 以降、trとtd内容が連続
</tbody>
</table>

PC版では、画像が大きいので、一番上にだけ見出しがあれば大丈夫なんですが、

スマートフォン版では、スクロールしているうちに、「これは何の項目だっけ?」と、わからなくなってしまいます。

そこで、こういうデータ構造に置き換えます。

<table>
<tbody>
  <tr>
    <th>見出し1</th>
    <td>セル1</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>セル2</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>セル3</td>
  </tr>
</table>
<table>
  <tr>
    <th>見出し1</th>
    <td>セル4</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>セル5</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>セル6</td>
  </tr>
</tbody>
</table>

つまり、見出しが毎回表示されるようにしたいということですね。

 

手順

1.見出しを、1つずつにわける

まず、<mt:entrybody>は、mt_body という変数に格納してあるものとします。

 

処理の順番としては、

thまでで区切られているものを、改行タグを除外してtable_title_arrayという配列に入れていきます。

つまり、

<table><tbody>
  <tr>
    <th>見出し1

ここまでが、 table_title_array[0] となるはずです。

 

<th>見出し2

これが、table_title_array[1]

 

<th>見出し3

これが、table_title_array[2]

 

そして、そこから下全部がtable_title_array[3] として格納されます。

 

こうすれば、<mt:Unless name="__last__">〜 で、最後の要素以外をループさせるということができ、

テーブルの見出し要素を、必要な分だけ格納できます。

必要な要素を得るために、<th>以下に続く内容だけを正規表現で抽出しています。

それが、以下の処理。

<$MTVar name="mt_body" split="</th>" regex_replace="/<br />/g","n" setvar="table_title_array">
<mt:Loop name="table_title_array">
   <mt:Unless name="__last__">
   <mt:SetVarBlock name="title_array{$__counter__}"><mt:Var name="__value__" regex_replace="/(.+?)<th>(.+?)/g","$2"></mt:SetVarBlock>
   </mt:Unless>
</mt:Loop>

 

こうすると、余分なタグが排除された状態で、title_array[数字]という配列変数に格納できます。

まずは、タイトルをバラバラにすることができました。

 

2.中身の要素を、行ごとに分解する

同じ要領で、行ごとに配列変数に格納していきます。

<$MTVar name="mt_body" split="</tr>" regex_replace="/<br />/g","n" setvar="table_tr_array">

<mt:Loop name="table_tr_array">
<mt:SetVarBlock name="tr_array{$__counter__}"><mt:Var name="__value__" regex_replace="/(.+?)<tr>(.+?)/g","$2" replace="<br />",""></mt:SetVarBlock>
</mt:Loop>

まずは、</tr>ごとに、余分な改行を取り除いて、table_tr_array という配列に入れていきます。

そして、その配列をつかってループ処理をし、今度は<tr>の中身だけを、取り出していきます。

 

3.テーブルのヘッダーと、フッターを準備

次に、テーブルのヘッダー部分とフッター部分を何度も使うので、これを設定します。

mt:EntryBody全体から、<tbody>までを抜き出したものが、テーブルのヘッダー。

つまり、<table>までです。<tbody>が置き換えでなくなってしまうので、正規表現で補完します。

<mt:var name="mt_body" replace="<br />","" regex_replace="/<tbody>(.*)/g","<tbody>" setvar="table_header">
 

テーブルのフッターは

<mt:var name="mt_body" replace="<br />","" regex_replace="/(.*)</tbody>/g","</tbody>">

こんな感じで、</tbody>まですべてを削除したものとなります。

 

 

4.分解した行を、内容ごとにさらに粉々にする

ここまでで、

tr_array[1] には、

    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>

ここまでが入り、

tr_array[2] には、

    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>

ここまでが入っている状態です。

その後の処理は、順を追って一気に説明していきます。

 

2重のmt:Loopで処理をします。

先ほど作ったtable_tr_array(行ごとに格納したもの)で、もう一度ループさせます。

ループ処理の最初には、余分なテーブルが入っているので、このテーブルは除外します。

2回目のループで、整形したテーブルヘッダーを呼び出します。

 

そして、ループの途中で、中身を呼び出します。

中身は、それぞれ __counter__ というキーで保存されています。

これは、タイトルと中身が対応する数字となっているので、カウンターの回数に合わせたキーを呼び出せば、

ループ1回目 ーーーーー

1番目の見出し:1行目の1番目の中身

2番目の見出し:1行目の2番目の中身

3番目の見出し:1行目の3番目の中身

ループ2回目 ーーーーー

1番目の見出し:2行目の1番目の中身

2番目の見出し:2行目の2番目の中身

3番目の見出し:2行目の3番目の中身

・・・

という対比で、データを並べる事ができます。

それが、以下の内容です。

 

<mt:Loop name="table_tr_array">
            
           <mt:Unless name="__first__">
           <mt:Ignore><!– テーブルヘッダー –></mt:Ignore>
           <mt:var name="mt_body" replace="<br />","" regex_replace="/<tbody>(.*)/g","<tbody>" setvar="table_header">
           </mt:Unless>
           
            <$MTVar name="__value__" split="</td>" regex_replace="/<br />/g","n" setvar="table_td_array">
                <mt:Loop name="table_td_array">
                    <mt:Unless name="__last__">
                    <tr>
                    <mt:SetVarBlock name="title_data"><mt:var name="title_array" key="$__counter__" replace="<br />",""></mt:SetVarBlock>
                    <mt:IfNonEmpty name="title_data"><th><mt:var name="title_data" replace="<th>",""></th></mt:IfNonEmpty>
                    
                    <mt:SetVarBlock name="td_data"><mt:Var name="__value__" regex_replace="/(.+?)<td>(.+?)/g","$2" replace="<br />",""></mt:SetVarBlock>
                    <mt:IfNonEmpty name="td_data"><td><mt:var name="td_data" replace="<td>",""></td></mt:IfNonEmpty>
                    </tr>
                    </mt:Unless>
                </mt:Loop>
               <mt:Unless name="__first__">
               <mt:Ignore><!– テーブルフッター –></mt:Ignore><mt:var name="mt_body" replace="<br />","" regex_replace="/(.*)</tbody>/g","</tbody>">
               </mt:Unless>
</mt:Loop>

 

まとめ

けっこう強引な方法ではありますが、セルの結合がないテーブルであれば、

見出しと中身を対比して、繰り返し表示させることが可能になります。

 

あまり使うケースはないかもしれませんが、Movable Typeのタグを使えば、
プログラムがわからない人間でも、ここまでの処理が可能になるという可能性は、とてもありがたいと思いました。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る
こんな記事も読まれています
mautic is open source marketing automation