Microsoft Popfly とは…

　10月19日、Microsoftが提供するオンラインマッシュアップツール「Popfly」がついにオープンベータ版として公開された。グラフィカルなインターフェース、かつノンコーディングでウェブサービスを組み合わせることができるこのツールを利用すれば、プログラミングの素人でも、レゴブロックを積み上げていく要領で自分のアイデアを形にすることができる。

from CNET japan

Microsoftが割と本気出して作った、Mushupが簡単に作れるサービスということで、Microsoft Popflyを試してみました。話によると、Yahoo!Pipesのようなことができるとか・・・？

hotmailアカウントがあったので、簡単にスタートできました。

ログインしてみると、編集画面のイメージはまんまYahoo!Pipesです。

画面右下に「Tutorials」とあるので、それを押してみると、まずは「Live Image Search」という画像収集ブロックと「Photo Sphere」という画像表示ブロックを組み合わせて遊んでみろ、とありましたので、その通りやってみました。

左側のカテゴリから「Images & Video」というのがあるので、その中の「Live Image Search」をクリックすると、画面上にポン、と赤いブロックが表れました。
これがLive Image Searchのブロックのようです。

この赤いボックスの右上に浮かぶアイコンの中に、レンチのアイコンがあるので、それをクリックしてみます。たぶんこれがこのボックスの設定画面に飛ぶアイコンではないかと・・・。

当たりでした。

ボックスがぐぐっと拡大して、設定画面になりました。
queryという項目があるので、ここにおもむろに「初音ミク」と入れてみます。このキーワードで、MSN Live Searchから画像を取ってきてくれるということなのでしょう。
日本語が通るかどうか分からないのですが、まあとりあえずいっとけというやつです。
countは、検索結果の最大個数と思われるので、1000とか入れておきます。

再度、右上のレンチアイコン（でかい）をクリックすると、元の画面に戻ります。

次に、DisplayカテゴリからPhoto Sphereブロックを今度はドラッグ＆ドロップで画面上に持ってきます。
Live Image Searchブロックの右下あたりに配置してみました。

それにしても、Pipesと違ってSilverlight（FlashのMS版）を使っているので、いろいろエフェクトが派手です。

既に後ろの方で、なにやらPhotoSphereのプレビューと思わしき映像が背景として表示されています。
微妙に邪魔です・・・。

次にこの二つをリンクさせてやる必要があります。
Live Image Searchブロックをクリックすると、マウスカーソルの動きに合わせてうにょにょにょーっと青い→が伸びてきました。これをPhotoSphereブロックの上に持ってきて再度クリック。つながりました。

さっそくプレビューしてみます。
編集画面左上の「Preview」というリンクをクリックしてみます。

何か、変な黒い染みが広がっています・・・。
左上に赤いエラーメッセージが出ています。
よくわかりませんが、どうせ「初音ミク」がダメだったのでしょう。まさかMSの陰謀…？
もとい、日本語がNGだったんじゃないかということで、Live Image Searchの設定画面に戻ります。

編集画面への戻り方は、画面下の「Customize」をクリックします。

queryに「hatsune miku」と入れなおします。
さあ、今度はどうだ？？

無事、初音ミク画像が黒い染みの周りを回るアニメーションが表示されました〜。
マウスでグリグリ動かせます。結構面白い。

ここに貼っておきます。Silverlightプラグインが入ってないと見れませんので悪しからず・・・。

IFRAMEがうまく表示できない場合はこちらから。

せっかくなのでなんか他のdisplayブロックも試してみましょう。

SlideShowなんてどうかな？
PhotoSphereブロックの右上の「×」アイコンでブロックを削除し、今度はDisplayカテゴリから新たにSlideShowブロックを持ってきてつなぎ直します。

果たして、いい感じのフォトスライドが完成しました！

これもSilverlightを貼っておきます。

IFRAMEがうまく表示できない場合はこちらから。

これに名前をつけて保存してみます。
画面右上の Save を押すと、Save As ダイアログが表示されるので、適当に名前をつけます。

えっと、「初音ミク スライドショー」と・・・。

これで「Accept and Save」を押します。

・・・怒られました・・・。orz
「不正な文字が含まれています」だそうで。はいそうですか日本語はお嫌いですか。

おとなしく「Hatsune Miku Slide Show」と入れなおした所、問題なく保存できました。
保存が完了すると、さっきのSaveリンクの上に保存した名前のリンクが出来ます。

これをクリックすると、作成したMushupの詳細画面に移ります。

この状態では、このMushupはまだ非公開（Private）になっています。
この右上に４つほどアイコンが並んでいるので、この右から２つめの手を差し出しているアイコンをクリックすると、その時点で公開（Publish）されます。

すぐにブログ等に貼り付けられるIFRAMEソースが取得できるようになっているのは良いですね。
まあ、表示にはSilverlightプラグインが必要なので、今のところまだ微妙なんですが…。
生成されるIFRAMEソースは、widthとheightが100%になっているので、480px, 360pxぐらいにするとブログに貼るのにちょうど良いかもしれません。

もういっちょ、ついでに PageTunerブロックも試してみましょう。

これは、スライドショーを書籍をめくるような感じで楽しめるDisplayブロックです。

せっかくなのでこれも貼っておきますね。相変わらず表示にはSilverlightプラグインが必要です。

IFRAMEがうまく表示できない場合はこちらから。

この手の写真表示Displayブロックがたくさんあるので、「無料で使えるスライドショーブログパーツ」としてもいろいろ活用できそうです。データソースは自分でRSSを作ってRSSブロックを置けばOKですね。
もちろん、自分のFlickr IDからデータを取ってくるブロックとかもありますよ。

さて、画像関係は比較的分かり易いと思うので、もうちょっと別の方向から、RSSをデータソースにしたMushupを試してみます。

Displayブロックを見てみると、Bar Graphというブロックが見つかりました。
直感的には、これは入力データソース中の「数値とテキスト」のリストから、棒グラフを表示してくれるブロックだと思われます。これを使ってみましょう。

RSS中に数値情報を含むようなものって何があるかなーということで、「そうだ、Diggならたぶん、Digg（投票数）の数をRSSの中に含めてくれているだろー」ということで、News & RSSカテゴリを見ると、まんま Diggというブロックがありました。

これをBar Graphとつなげてみます。

で、即プレビューしてみると・・・。

いつまで待ってもグラフが表示されません。おかしいな、と思って下を見ると、「Show Console」というリンクがあるのに気づきます。おお、これでデバッグ情報が見れるのかな、ということでクリック。

下の方にコンソール出力が表示されました。

Bar Graph:
barGraph: Calling addBar(84, "", "http://www.readwriteweb.com/archives/google_translation_systran.php", <br />Topic Name: Tech Industry News<br />Topic Shortname: tech_news<br />Container: Technology<br />Container Shortname: technology)...
WARNING: Problem with item #1: barGraph: Error from addBar: this.LabelArray[x].match is not a function
barGraph: Calling addBar(100, "", "http://libertarianempire.com/GAO.html", <br />Topic Name: US Elections 2008<br />Topic Shortname: 2008_us_elections<br />Container: World & Business<br />Container Shortname: world_business)...
WARNING: Problem with item #2: barGraph: Error from addBar: this.LabelArray[x].match is not a function

ふーむ、barGraphのaddBarという命令を実行しようとしてエラーになっているようですね…。
というか、popflyって、内部的にはこうやってJavaScriptとして実行されているのですね。GUIの結果がJavaScriptソースに変換されている訳か…。

で、よく見ると、「addBar」の呼び出し部分の第三引数部分が、めちゃめちゃ長い文字列が入ってます。これってひょっとして、RSSの本文では？ BRタグとか入っちゃってて、それでおかしくなってるんじゃないでしょうか。

そこで、Bar Graphの設定画面を確認してみます。

やはり、Labelとして「topic」というデータが使われているようです。
これを「title」に変更して、再度プレビュー。

出ました〜。
・・・でもなんか、全部値が「1」・・・。

あ、そうか、多分Diggブロックの設定が、「新着」になってるんでしょう。
新着なので、まだ誰もDiggしてない（diggが1のまま）、と。
Diggブロックの設定を確認してみます。

「getStories」という設定になっています。このプルダウンメニューの中に、getPopluarStoriesというものがあったので、それに変更してみました。たぶんこれが人気エントリのことでしょう。

めでたく、Diggの人気エントリの棒グラフが出来上がりました！

せっかくなのでこれも貼っておきます。


IFRAMEがうまく表示できない場合はこちらから。

ところで、DiggブロックとBarGraphブロックを繋げると、BarGraphブロックの「Data」項目に自動的にDiggの「digg」項目が割り当てられるようです。
これは内部的に「入力ブロックがDiggだったら〜」というようなコードをベタで書いているのか、それとも、入力データ中の数値要素を自動的に識別しているのか…後者だったらなかなか賢いですね。

こんな感じで、なかなか楽しめそうです。

Yahoo!Pipesとの最大の違いは、

・Pipesはデータを加工してデータとして出力するだけなのに対して、PopflyではSilverlightを使って表示する為のUIまで含めて、サービスとして完結させている。

という点でしょうか。
個人的には、様々な形で応用が可能なPipesの方が好きなのですが、お手軽さという点ではPopflyの方が面白そうです。

ただ、Popflyの売り文句である「素人歓迎！」というのは、微妙にどうなの・・・とは思いました。
Yahoo!Pipesでも同じですが、やはり、エンジニア的な発想というのは必要になるような気がします。

それでも、最終的なUIまで含めて完結している為、誰でもとっつきやすいというのはあるかもしれません。

全体的に、「Mushupツール」と言いつつSilverlightの普及が目的のように感じましたが、なかなか良い所を突いていると思います。実際、ちょっとSilverlightにも興味出てきましたし。

以上、簡単ではありますがPopflyの体験レポートでした。
ちなみに、全てWindows上のFirefoxで作業を行いましたが、まったく問題なく作業ができました。
Safariにはまだ対応していないとのことで、MacユーザーはFirefoxで試してみましょう〜。

【参考記事】
素人さん歓迎のブロック感覚マッシュアップツール「Popfly」、オープンベータ公開
http://japan.cnet.com/news/media/story/0,2000056023,20359083,00.htm

マイクロソフトのマッシュアップ作成サービス「Popfly」が一般ベータ公開
http://internet.watch.impress.co.jp/cda/news/2007/10/19/17242.html

マイクロソフト、マッシュアップ用ツールサービス「Popfly」を発表
http://japan.cnet.com/news/media/story/0,2000056023,20349152,00.htm

MS、マッシュアップなWebデザインオンラインサービス「Popfly」を発表
http://www.itmedia.co.jp/news/articles/0705/19/news006.html

MicrosoftがPipesを超越した3Dマッシュアップツール「Popfly」をリリース
http://blog.fkoji.com/2007/05190838.html