第5回　Microformats、TrimPathで簡単機能拡張

前回からだいぶ期間が空いてしまいました。

宣伝になってしまいますが、その期間中にSMART4Bというサイトに高度な検索機能と形態素解析などを駆使したトレンド機能の追加などを行っていました（もしかしたらこちらの内容の方が興味をもっていただけるかもしれません⁠）⁠。バックエンドでいろいろな仕組みを使っている、技術的に非常におもしろいサービスです。興味のある方は一度さわってみていただけると幸いです。

MetaGatewayのMicroformats対応

ところで、feedpathのブログエディタをどのくらいの方がご存知かわかりませんが、実はMetaGatewayはfeedpathのブログエディタ（PHP用）をフルスクラッチでさらにポストグループ機能を追加し、それ自体をAPIの塊としてGoogle App Engine（Python）用としてより高機能なものとして再設計することによって生まれたサービスなのです。

もともとの前身であるfeedpathのブログエディタも私一人で実装したもので、実はその時の投稿エンジン部分の技術ノウハウをフル活用したアプリケーションです。

feedpathのブログエディタの売りの機能のひとつとして、Microformatsへの対応がありました。MetaGatewayではこの時の機能をさらに押し進めたものが実装されています。ただ、残念ながら現状Microformatsはあまり流行ってはいません。理由は日々のツールとして手軽に書き出すことのできるものが存在しないことにつきると思います。毎日無理なく、なにげなく使えるツールでなければなんの意味もありません。MetaGatewayはWebをより整理したものにすることを目標に、そこに対しても挑戦を試みているのです。

今回はGoogleカレンダーへの投稿を例に挙げ、この部分の技術的な話について説明してみようかと思います。ブログエディタを利用してGoogleカレンダーへ投稿─ 単純に聞くとこの意味がわからない方もいらっしゃるのではないでしょうか。Microformatsを利用すると、HTMLのデータの中に構造化されたデータを持たせることができるようになり、それをGoogleカレンダーが理解できるような形でMetaGatewayが仲介するのです。

図1を参照してください。これはカレンダー（スケジュール）の構造化テンプレートです。ここに、タイトルや開始時間、終了時間などを設定します。

「OK」をクリックすると、図2のようにHTMLとして反映されます。

図3はそのHTMLのソースコードを表示したものです。これを見ればなんとなく理解できるのではないかと思いますが、MicroformatsのhCalendarという形式で吐き出されています。これによって、HTMLに“⁠カレンダー⁠”というメタデータを含めることが可能になります。

これをそのまま投稿すると、図4のようにタイトル、期間、場所、コメント等をGoogleカレンダーに載せることができます。

これは他のブログなどへもそもまま再利用できますので、カンファレンスの告知等を行いたいユーザが、二度手間で投稿する必要がなくなります。また、Microformatsのプラグインを入れているブラウザ等を利用すれば、カンファレンスなど他のブログのカレンダーをそのまま他のユーザが取り込むこともできます。

TrimPathによる機能拡張

MetaGatewayでは、残念ながら独自テンプレートの機能を作る画面は用意されていないのですが、実は低レベルの仕組みとしてはfeedpathの時よりも柔軟に拡張できる仕組みをもっています。

feedpathでは、ユーザがSmartyのスクリプトを記述することが可能でした。当然あらゆるパターンでのセキュリティ対策を施していましたが、FacebookのFBMLやFBJSのように、どこかに漏れがあるかもしれないのを常に注意しながら実装する必要がありました。

MetaGatewayでは、JSONデータとTrimPath（JavaScriptテンプレート）で記述されたデータを利用して簡単に機能拡張が可能です。

たとえばデフォルトで用意されている、先ほどのカレンダー（スケジュール）のデータはリスト1、2のような形になります。このようなデータを作成すれば、図1のような画面や、図3のようなテンプレートがプラグインされて作成されます。

リスト1　TrimPathへ渡すためのJSONデータ

templates = {
  'schedule':[
    {'key':'title', 'name':'タイトル','type':'single_text', 'require':1},
    {'key':'start_time', 'name':'開始時間','type':'datetime', 'require':1, 'start':true},
    {'key':'end_time', 'name':'終了時間','type':'datetime', 'require':1},
    {'key':'comment', 'name':'コメント','type':'multi_text'},
    {'key':'location', 'name':'場所','type':'single_text'},
    {'key':'map', 'name':'地図','type':'map'}
  ],
}

リスト2　TrimPath用のHTMLテンプレート

<textarea id="template_template_output_schedule" style="display:none;">
{% filter escape %}
<div class="vevent">
  <p><strong>${datas.title.name}:</strong> <span class="summary">${datas.title.value}</span></p>
  <p><strong>${datas.start_time.name}:</strong> <span class="dtstart" title="${datas.start_time.value}">${datas.start_time.value}</span></p>
  <p><strong>${datas.end_time.name}:</strong> <span class="dtend" title="${datas.end_time.value}">${datas.end_time.value}</span></p>
  {if datas.comment.value}<p><strong>${datas.comment.name}:</strong><br><span class="description">${datas.comment.value}</span></p>{/if}
  {if datas.location.value}<p><strong>${datas.location.name}:</strong> <span class="location">${datas.location.value}</span></p>{/if}
  {if datas.map.value}<p><strong>${datas.map.name}:</strong> <a href="${datas.map.value}">[地図]</span></a></p>{/if}
</div>
{% endfilter %}
</textarea>

このように、MetaGatewayはJavaScript、HTML側に関しても、非常に拡張しやすい側面をもっていることがわかっていただけるのでがないかなと思います。