「Google Mashup Editorがあなたのアカウントで使えるようになりました。」というメールが数日前に届いたので、さくっと試してみました。

作成したサンプルはこちら。
http://fkoji-example.googlemashups.com/

Google Mashup Editorは名前の通り「エディタ」です。テキスト入力でアプリケーションのマッシュアップを作れる「エディタ」。

作成するマッシュアップは、「HTML/CSS/JavaScript」と「Google Mashup Editor独自のタグ(<gm:hoge />)」とで構成されています。

独自のタグは、たとえば地図のウィジェットを使いたければ「<gm:map ... > ... </gm:map>」というタグを記述し、カレンダーのウィジェットを使いたければ「<gm:calendar ... > ... </gm:calendar>」というタグを記述します。

地図とカレンダーとRSSフィードを表示させたい場合は、たとえば以下のように書けます。

<gm:page title="My App" authenticate="false">

  <div style="float:left;widht:40%;margin:12px;">
    <gm:map />
  </div>

  <div style="float:left;widht:40%;margin:12px;">
    <gm:calendar />
  </div>

  <gm:list data="http://feeds.feedburner.jp/blog-fkoji" template="feed" />

  <gm:template id="feed">
    <table>
      <tr repeat="true">
        <td><gm:link labelref="atom:title" ref="atom:link/@href" /></td>
      </tr>
    </table>
  </gm:template>

</gm:page>

Templateを使うところが、ちょっとXSLTっぽい。

これをコンパイルして実行(実際はエディタの「Test」ボタンを押すだけでよい)すると、プレビューを確認できます。「編集」→「コンパイル」→「確認」→「編集」→「コンパイル」→・・・という開発スタイルです。

そして、作成したマッシュアップはgooglemashups.comのサブドメインで公開できます。ということで、かなり申し訳ないサンプルですが、 http://fkoji-example.googlemashups.com/ にてサンプルを公開しています。(IEとFxでは見栄えがかなり違いますが・・・。)

サンプルの右上に「Sing in」とあることで分かるように、Googleアカウントを利用したアプリケーションを作ることも可能です。

ちなみにドメインの最後には s がついています。googlemashups.comです。 s がついていないドメインはまったくの別物です。