MashPadガジェットを作ってみた。

マッシュアップメモ帳サービスのMashPadがMashup Award5で部門賞を受賞されたそうです。作者のopakenさん、おめでとうございます！

ということで、受賞記念にガジェットを作ってみました。
MashPadの楽しみの一つは自分で作って、使って、公開できるガジェットです。MashPadのガジェットはGoogle Gadget互換なので、私もGoogle Gadgetのエディタを使ってコードを書きます。Webベースのエディタで、本格的なものを書くには辛そうだけど、ちょっとしたガジェットなら問題ないです。簡単に試せるのがいい。

テキストエリアにコードを書いて、「File」メニューからOpenやSave、Publishなどの機能が呼び出せます。マニュアルのページ中に何気なくエディタが混じっているのが新鮮。

Cookpadメモガジェット

さて、今回はこんな利用ケースを想定したガジェットを作ってみました。

たまには男の料理もいいよなぁ。
で、レシピといえばCookpadだ。
おいしかった！
せっかくなので感想含めて記録残しておきたいな。
じゃ、MashPadでマッシュアップメモしとこ！

単にCookpadのレシピを埋め込むだけなのですが、結構便利そうです。ハイパーリンクを埋め込むより画像などの情報入ってるほうが思いだしやすいし。MashPadなら自分なりのメモも埋め込めるし。

早速作ってみよう

Google Gadgets Editor を使ってコードを書いていきます。詳細はGoogle Gadgets Editorのページからたどれば簡単にわかるので割愛します。結果的に今回はこんなコードになりました。ほとんどサンプルのまんまですね。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Cookpad memo" width="500" />
  
  <UserPref name="recipeid" display_name="レシピID" datatype="string"
         default_value="" required="true" />
         
  <Content type="html">
    <![CDATA[
    <div id="content_div" style="border:1px dashed;padding:5px;">contents area</div>
    <div id="link_div"></div>  
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1");
      function getHtml() {
        var prefs = new gadgets.Prefs();
        var recipeid = prefs.getString("recipeid");
      
        var params = {};  
        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;  
        var url = "http://cookpad.com/recipe/" + recipeid;  
        gadgets.io.makeRequest(url, response, params);
  
        var link = document.getElementById('link_div');
        link.innerHTML = "<a href='" + url + "' target='_new'>詳細はこちら</a>";
      };
      function response(obj) {  
        var html = obj.text;
        var div = document.getElementById('content_div');
        div.innerHTML = html;
  
        content = $(div).hide().find("#recipe-main").html();
        $(div).html(content).show();
  
        gadgets.window.adjustHeight();
      };
      gadgets.util.registerOnLoadHandler(getHtml);
    </script>
    ]]>
  </Content>
</Module>

Google AJAX Library APIからjqueryを使ってますが、今回の場合必須ではありません。単に使ってみたかったからです。あと、Ubiquityと似たコードにしたかったという理由もあります。

さて、書いたコードをpublishすると書いたコード（XML）がGoogleのサーバーから公開され、ガジェットのURLを知ることができます。後はこれをMashPadに登録すればOK。ちなみにテストはGoogle Gadget Editorの場合、iGoogleを使ってテストすることができます。ただしキャッシュが効きすぎる傾向があるので、コードをsaveしても反映されないことも多いです。そのようなときはsaveAsして別物にしちゃいましょう。

MashPadでマッシュアップ

MashPadでの登録が成功すると、↓な感じでダッシュボードから埋め込むことができます。

そして、「投稿する」！

と、このような感じでCookpadのメモがMashPadにマッシュアップできました。もちろん、ガジェットは個人利用するだけでなく、MashPadユーザー全体に公開することもできます（このCookpad memoはまだ公開してませんが・・）。

技術と情熱

この甲子園に出るという目標があるからこそ、日々の仕事の中でも、新しい技術を試したり、市場の動向をウォッチしたりできるのだと思います。そして、同じ目標に向かって作品を作っている人と出会えるのもすごいことだと思います。

「甲子園」とはいい得て妙ですね。毎回応募し、しかも毎回受賞する技術と情熱にはホント頭が下がる思いです。MashPadの面白いところは「メモ」に割り切った手軽さと一方、ガジェットを埋め込み可能にすることで得た拡張性です。凝りたい人はガジェットを書くことでマニアックなこともできる。これがいい。今回のようなWebページの切り貼りなら簡単にできちゃうので、是非皆さんもMashPadしてみてください！