Microsoft Popfly は、マッシュアップやウェブサイト作成および共有のためのツールとウェブサイトの 2 つから構成されています。

これらは、Popfly Creator というマッシュアップやウェブサイト作成用のオンラインツールと、Popfly Space といったソーシャル ネットワーク サイトの 2 つになります。現在これらはベータ版として提供させていただいておりますが、より良い製品をお客様にご利用いただく為、日々改良しています。

上記で紹介しました Popfly に加え、マイクロソフトは Popfly Explorer といった、Microsoft Visual Studio 2005 で作成されたプロジェクトを Popfly Space にアップロードするためのアドオンも提供しています。

※ Popfly Explorer をご利用いただくには、事前に Popfly のアカウント登録を済ませる必要があります。

プログラミングは決して長い年月をかけて学習せねばならないものではありません。Popfly Creator を利用することにより、ものの数分で人々を驚かせることのできるプログラムを作成できます。

Popfly を使うことにより、Virtual Earth、Flickr、Yahoo! の各種サービスや Twitter などの Web サービス機能をマッシュアップすることが可能になります。他にもたとえば、あなたの友達の画像を Flickr から取ってきて、「もぐらたたきゲーム」の画像として簡単に使うことができます。

Popfly Creator はウェブページを作る環境も提供します。ウェブページは視覚的にわかりやすく、さらに作成したマッシュアップをウェブページに追加することもできます。

オペレーティング システム :

ウェブ ブラウザ :

必須条件 :

ウェブページやマッシュアップの作成方法につきまして、まず下記リンクのチュートリアルをご参照下さい。
※ 英語版のみとなります

http://www.popfly.ms/Overview

ウェブページを作るためには、[Create Stuff] ボタンをクリックし、次に Web Page というリンクを選択します。ブラウザ内に WYSIWYG のウェブ ページ エディタが起動します。WYSIWYG は ”what you see is what you get” の略で、「見たものがそのまま作られたもの」を意味します。

ウェブ ページ エディタを使用し、タイトルエリアの画像やスタイルの編集などが簡単に実行可能になります。さらに、スタイルや文字の色を変更することも可能で、画像やマッシュアップをページの上に貼り付けることもできます。これらの作業すべてが、HTML のコードを書かずとも可能なのです。

マッシュアップを作るためには、Popfly の [Create Stuff] メニューから、[Mashup] リンクを選択します。Popfly Creator の左側にあるリストに格納されているブロックを使用しマッシュアップの作成ができます。リストの上にある検索バーからブロックを検索したりカテゴリー分けされたブロックから目的にあったブロックを探し出すことも可能です。

マッシュアップは、リストに列挙されるブロックを「マッシュアップ デザイン サーフェス」(真ん中の広いエリア) に追加してゆくことで作成可能です。

1. ドラッグ & ドロップによって、ブロックを選んでデザインサーフェスに追加します。そうすることで、赤いブロックがデザインサーフェスに出現します。
2. ドラッグ & ドロップにより、ブロックを選択しデザインサーフェスに追加します。
3. 追加された赤いブロックをダブルクリックするか、レンチのアイコンをクリックすることにより、そのアイテムの設定を変更することができます。
4. 設定変更の画面では、ブロックに実行させたい操作内容の編集ができます。
5. 必須の入力についてはアスタリスク (*) がついています。必要な情報を入力した後に、レンチのアイコンをクリックすることにより元の画面に戻れます。
6. デザインサーフェスの上部にある [Preview] ボタンをクリックし、アプリケーションの途中経過を確認することも可能です。
7. プレビュー画面からデザイン エリアに戻るには、同画面の下部にある [Customize] ボタンをクリックします。

マッシュアップを作成する場合、複数のブロックを繋ぐ必要があります。多くのマッシュアップでは、Virtual Earth、Carousel、Slideshow、PhotoStack、PageTurner、Video Player などの表示ブロックが便利です。
※ いくつかのブロックは互換性の関係で、繋ぎ合せることができない場合もありますので、予めご了承下さい

1. 上記で作成したブロックに情報を送る 2 つ目のブロックを選択します。
2. 選択したブロックをマッシュアップ デザイン サーフェス上に追加します。
3. ブロック同士をつなぎ合せるには、1 つ目のブロックをクリックした後に、 2 つ目のブロックをクリックします。
4. 追加したブロックの設定画面を開き、操作の内容を指定します。
5. [Preview] ボタンを押して、マッシュアップの結果を見ることができます。

[Clear] ボタンを押すと、すべてのブロックをマッシュアップ デザイン エリアから削除されます。

作成したブロックはアップロードし、ほかの Popfly メンバーと共有することができます。

Block Building Guide (英語) はブロック作成に役立つコードが含まれています。 Popfly Editor には文法のハイライト機能やデバッグ機能がない為、Microsoft Visual Web developer 2005 Express Edition (無料) を使用したブロックの開発をお勧めします。

現在、ブロック作成用の JavaScript エディタの改良も行っています。

ブロックをアップロードするには、[Create Stuff] メニューから [Block] を選びます。ブロックのコードをコピーし、[Block Code] と [Block Description] のエリアに貼り付けます。最後にブロックに名前を付け、保存します。

最初の一歩としてお勧めするのが、既存のブロックからブロックの構成について学ぶことです。既存のブロックのコードと記述はすべて誰でも見ることができます。

Block Description はブロックについて XML で書かれており、Block Code はブロックのロジックが JavaScript で書かれています。

マッシュアップ
[Preview] ボタンをクリックすることで、マッシュアップのコードを実行させることができます。[Customize] ボタンをクリックすると、マッシュアップ デザイン サーフェスに戻ることができます。この際、マッシュアップはバックグラウンドで動き続けます。

ウェブページ
[Preview] ボタンをクリックすることにより、新規ウィンドウにページを開きます。
※ [Preview] ボタンは [Save] ボタンの隣にあります。

プロジェクトの保存
[Save] か [Save as] ボタンをクリックすることで保存ができます。現在、自動保存機能は追加されていない為、プロジェクトの保存には十分気を付け適度に実行することを推奨します。

既存プロジェクトを開く
[My Stuff] メニューから [Projects] をクリックします。プロジェクトの名前をクリックすると、プロジェクトを実行できます。プロジェクトを編集する場合、[Edit] ボタンをクリックします。

プロジェクトを共有する
[My Stuff] メニューから [Projects] ページを開き、プロジェクトの一覧を表示させます。それぞれのプロジェクトは、共有するか共有しないかを選ぶ為、 share/unshare のリンクがあります。既定では unshared が選択されていますが、[share] ボタンをクリックすることにより、プロジェクトを Popfly のコミュニティに公開し、共有することができます。
共有されたプロジェクトは、MashOut といった追加メニューから利用方法を指定できるようになります。

ほかの人のプロジェクトを見る場合、My Stuff メニューをクリックして [Project] をクリックします。

お客様のプロジェクトをほかの人が見つけやすくするため、もしくは左バーのカテゴリに入れるために、作成したプロジェクトをいくつかのキーワードでタグ付けすることができます。

プロジェクト保存時に、プロジェクトに名前を付けた後、[Description and Tags] のボタンを押し、空欄に適当なキーワードを記入します。複数のタグを付ける場合、スペースで区切ります。なお、タグの編集は Project Detail から実行可能です。

以下のカテゴリが現在タグに対応しています。

作成したマッシュアップをウェブ ページに埋め込むには、My Project で自分のプロジェクトを share した後、MashOut リンクをクリックします。

リンク先にて Embedded It のメニューをクリックすると、HTML タグが表示されます。表示された HTML タグをコピーすることによって、どのウェブ ページにもマッシュアップを埋め込むことができます。

作成したプロジェクトに細かい修正を加える場合― (例) 写真のフレームの色を変える、検索するものを変えるなど― tweaking 機能で実行可能です。即ち、ブロックを変更したり削除したりするなどの大きな変更は Mashup から、小さな変更は tweak から行うことで、作業の効率化が見込めます。

Tweaking の機能を利用するには 2 つの方法があります。
1 つ目は埋め込まれたマッシュアップの上に表示される [Customize this!] をクリックすること。 2 つ目は My Project から、[tweak it] のリンクをクリックすることです。
Tweaking 機能によって、いかなる設定も変更することができます。

作成したマッシュアップは、Windows Vista のサイドバー ガジェットとして登録することや、Windows Live Gallery に登録することができます。

Windows Vista のサイドバー ガジェットとして登録するには、以下の手順にて実行できます。

1. My Project ページから、サイドバーに登録したいマッシュアップを探し Share します。
2. Mashout メニューから、Windows Gadget を選びファイル ダウンロードを開始します。
3. ダウンロード完了後、ファイル開きます。
4. 注意書きの内容を確認しウェブのコンテンツを開くことを許可し、インストールを実行します。
5. インストールされたサイドバー ガジェットが Windows Vista のサイドバーに登録されます。

Windows Live Gallery に登録するには、以下の手順を実行ください。

1. My Project のページから Live Gallery に登録したいマッシュアップを探し、share します。
2. Mashout メニューから、[Live Gallery] ボタンを選びます。

残念ながら、ウェブ ページの移行はできません。何卒ご理解下さいますようお願い申し上げます。作成されたウェブ ページは誰でも見ることができます。

他人の Popfly ページを見た際に確認できる [add to Friends] ボタンをクリックすることで友達申請メールが対象者に送られます。リクエストが承諾されると、友達登録がされます。

自分のプロジェクトにも他人のプロジェクトにもコメントを付けることができます。プロジェクトのページを開いた後、Project Detail を開くと、コメントをつけることができます。なお、追加されたコメントはいつでも削除することができます。

コメントと同様の手順で評価することができます。評価は星のマークで表示されます。

Popfly のいくつかのブロックは Developer Key を必要とする場合があります。Developer Key とは、ウェブ サービスの使用上の注意を守ることに同意するという意思表示に必要な、ユニークな認証情報のことです。この方法によって、各ウェブ サービスを誰が情報を扱っているのか知ることができます。

Developer Key を必要とするウェブ サイトは、key status area というものをブロックの下側に持っています (マッシュアップ デザイン サーフェスにブロックを置いたとき表示されます)。仮に、 Missing Key という赤い表示が出てきた場合、保存する前に Key の入力が必要になります。Missing Key の表示をクリックし、指示に従うことで Key の取得ができます。

Key を入力すると、key status area は緑色に変わり、You Have a Key と表示されます。以後の Key の変更は You Have a key をクリックすることによって可能です。