アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » MetaGatewayに見る次世代Webサービス » 第5回 Microformats,TrimPathで簡単機能拡張

MetaGatewayに見る次世代Webサービス

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

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

私たち2人は,4月1日にmodiphiという会社に転職しました。

宣伝になってしまいますが,その期間中に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を参照してください。これはカレンダー(スケジュール)の構造化テンプレートです。ここに,タイトルや開始時間,終了時間などを設定します。

図1

図1

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

図2

図2

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

図3

図3

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

図4

図4

これは他のブログなどへもそもまま再利用できますので,カンファレンスの告知等を行いたいユーザが,二度手間で投稿する必要がなくなります。また,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側に関しても,非常に拡張しやすい側面をもっていることがわかっていただけるのでがないかなと思います。

著者プロフィール

Techmonkey

コンビのWebビジネスプロデューサー。

社内マイクロブログ - しゃべるエンタープライズサーチ - どこかな?次世代投稿管理サービス - MetaGateway などを2人で開発。今はクラウド型の究極のチームコラボレーションソフトウェアを開発中です。

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス