無料のMovableTypeをHTMLコーディングのサポートツールとして使う

コーディング作業をしていてこのようなケースってありませんか?

  • 大量のExcelのデータからHTMLを作ること
  • 行事カレンダーなどで、年間カレンダーのHTMLを作ること

どちらも1つ1つコピー&ペーストをすると、とても時間のかかる作業です。 そこで今回はMovableTypeをローカルにインストールしてコーディングの サポートツールとして使用する方法を紹介します。

必要なもの

ケース1. ExcelやCSVのデータからリンク集を作成する場合

ExcelやCSVなどの1列目にリンク先のサイト名、2列目にリンク先のURLが 入っているとします。

Excelシートの内容を全て選択して、テキストエディタにコピー&ペーストをすると テキストデータが得られますので、以下のような形に整形します。

サイト名##URL サイト名##URL サイト名##URL

次にそのテキストを以下のMovableTypeテンプレートのSetvarBlockの部分に入れます。

サンプルコード

<MTSetvarBlock name="data">
Yahoo##http://www.yahoo.co.jp
Google##http://www.google.co.jp
</MTSetvarBlock>

<MTRemoveBlank>
<mt:var name="data" split="\n" setvar="array">

<MTLoop name="array">
<mt:var name="__value__" split="##" setvar="colarray">

<MTIf name="__counter__" op="%" value="4" eq="1">
<mt:setvar name="localcnt" value="1" op="++">
<ul class="<MTIf name="localcnt" op="%" value="2" eq="1">even<MTElse>odd</MTIf>">
</MTIf>

<li><a href="<mt:var name="colarray" index="1">" target="_blank"><mt:var name="colarray" index="0"></a></li>

<MTIf name="__counter__" op="%" value="4" eq="0">
</ul>
</MTIf>

</MTLoop>

</MTRemoveBlank>

今回はulの例ですが、この例を応用するとTableでもdlでも様々なものでテキストデータから HTMLを作成することが可能です。

ケース2. 行事カレンダーなどで、カレンダーのHTMLを作ること

こちらは元データが無いので、非常にシンプルです。 カレンダーの作成には、MTタグ「MTCalendar」を使用します。

以下のサンプルコードをMovableTypeのテンプレートに登録して、再構築をします。 MTForのtoの部分には必要なカレンダーの数を指定します。

<MTRemoveBlank>
<mt:SetVarBlock name="newerY"><$MTDate format="%Y" sprintf="%d"$></mt:SetVarBlock>
<mt:SetVarBlock name="newerM"><$MTDate format="%m" sprintf="%d"$></mt:SetVarBlock>

<MTFor var="calcnt" from="1" to="15">
<mt:SetVars>
ymNewer=<$MTVar name="newerY"$><$MTVar name="newerM" sprintf="%02s"$>
</mt:SetVars>

<table>
<caption><$MTVar name="newerY"$>年 <$MTVar name="newerM" sprintf="%02s"$>月</caption>
<thead>
<tr>
<td>日</td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
<td>土</td>
</tr>
</thead>

	<tbody>
	<MTCalendar month="$ymNewer">
	<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
	<td><MTCalendarIfEntries><$MTCalendarDay$></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
	<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
	</MTCalendar>
	</tbody>
</table>

<$MTSetVar name="newerM" op="++" $>
<mt:If name="newerM" gt="12">
<$MTSetVar name="newerM" value="1"$>
<$MTSetVar name="newerY" op="++"$>
</mt:If>
</MTFor>
</MTRemoveBlank>

MovableTypeはCMS以外にも、このようなスニペットツールとしても非常に有用です。 CMSを導入していない案件のHTML管理などに是非使ってみてください。