試してわかる『Afrous』の可能性 Vol.2 - マッシュアップダッシュボード画面の作成

試してわかる『Afrous』の可能性

Vol.1 - ビジネス環境でも使えるマッシュアッププラットフォーム
Vol.2 - マッシュアップダッシュボード画面の作成
Vol.3 - カスタムデータソースの作成(1)
Vol.4 - カスタムデータソースの作成(2)
Vol.5 - イントラネット内のCSVファイルの統合
Vol.6 - マッシュアップエディタによる拡張
Vol.7 - ダッシュボードの外部サイト公開と独自ポータル構築

ダッシュボードの起動

Afrous Dashboardにアクセスするには、『Afrous』にアクセスし、「Start Afrous Dashboard」と書かれているボタンをクリックするか(図1)、直接 http://dashboard.afrous.comにアクセスします。

はじめにグリーティングダッシュボードが表示されますが、画面上部のメニューバーから「新規」ボタンをクリックして、新たにダッシュボードを作成します。レイアウト指定のダイアログが表示されますが、ここでは「3列」に指定し、OKボタンを押します(図2)。

その後、ダッシュボード画面がブランク状態に初期化されますので、この状態からチュートリアルを開始します。

ダッシュボードにウィジットを追加する

まず、画面右側の折りたたみ可能な引き出しパネルの中に、「データソース」というセクションが表示されているのが確認できます(図3)。この中にサンプルデータソースとしてWebサービスからマッシュアップ結果を取得するためのデータソースがリストされています。

ウィジットを追加するには、この中からダッシュボード中に表示したいデータソースを選び、マウスでダッシュボードのメイン領域にドラッグ&ドロップします。ここでは、サンプルデータソースの中から「Google スプレッドシート」を選び、ダッシュボードのメイン領域にドラッグ&ドロップします。

データソースをドロップすると、図4のようなポップアップメニューが現れ、どのウィジット形式でデータを表示するかを選ぶように促されます。これは、Afrous Dashboardでは、データと表示形式(ウィジット)が分離されており、任意のデータに対して自由に表示形式を割り当てることが可能になっているためです。

ここではウィジット形式として「グリッド表」を選択し、マッシュアップ結果のデータソースを表形式で表示することにします。

ダッシュボードにウィジットを追加すると、最初にウィジットの編集画面が開き、ウィジットに必要なパラメータを設定するように促されます(図5)。このパラメータはデータソースとなっているマッシュアッププロセスの入力パラメータとして利用されます。

ここでは、パラメータとして「Googleスプレッドシート」のドキュメントのキー値を設定します。キーの値は、GoogleスプレッドシートのURLの中から取り出すことができます。

http://spreadsheets.google.com/ccc?key=<キー値>

そのままデフォルトの値を利用できますが、独自のGoogleスプレッドシートを作成し利用しても構いません。ただしその場合、キーに指定するスプレッドシートは事前に公開設定にしておく必要があります。

OKボタンをクリックすると、次にどのデータをグリッド表の列として表示するかを選択する画面になります。左側の「プロパティのソース」から必要な値を選択し、右側の「表示する列」のエリアにドラッグ&ドロップします(図6)。

再びOKボタンを押し、ウィジットの表示を確定します。Googleスプレッドシートに格納されているデータがグリッド表形式のウィジットとして描画されるのが確認できます(図7)。

連動するウィジットを作成する

次に、ダッシュボードにもう一つデータソースを追加します。追加するデータソースは「Googleニュース検索」です。今回は、先のGoogleスプレッドシートのウィジットと連動し、グリッド表の行がクリックされると自動的に取引先名をキーワードとしてニュース検索が実行されるように設定します。

「Googleニュース検索」データソースをサンプルデータソースのリストから選択し、ダッシュボード上にドロップします。前回と同様にウィジットの種類を選択するポップアップメニューが現れますので、今回は「リスト」を選択します。ウィジットの編集画面(図8)が開き、パラメータを設定するフィールドが表示されます。

ここで「キーワード」パラメータを指定することで該当キーワードを含むGoogleニュース検索を実行できますが、今回は先ほど作成したGoogleスプレッドシート内の企業情報のリストから、取引先名をキーワードとして動的に取得するように設定します。

この設定を行うには、編集画面が開いた状態で、Googleスプレッドシートの行を一旦クリックします。すると図9のようなポップアップウィンドウが開きます。このポップアップウィンドウの中には、マウスでクリックした行に対応しているレコードのプロパティがツリー形式で表示されています。

このポップアップウィンドウの中からデータとして取得する値のノードをマウスでドラッグし、編集画面のパラメータフィールドの中にドロップします。ここではツリー中の「取引先名」ノードをそのまま「キーワード」フィールドに図10のようにドロップします。

編集画面のOKボタンを押すと、リストとして表示するプロパティを選択する画面になります。「タイトル」「URL」および「要約」フィールドに対して、それぞれ「タイトル」「URL」および「内容(HTML)」を「プロパティのソース」からドラッグ&ドロップして設定します(図11)。

再びOKボタンを押して、ウィジットの表示を確定します。クリックした行に含まれている取引先名をキーワードとして、Googleニュースの検索結果がリスト形式で表示されるのが確認できます(図12。また、グリッド表ウィジットの他の行をクリックし、そのクリックした取引先の名前で自動的にGoogleニュース検索が実行されることを確かめてください。

次回は、カスタムデータソースの追加について解説します。

⇒第3回 - カスタムデータソースの作成(1)

著者プロフィール:冨田慎一

2000年 東京大学大学院 理学系研究科 情報科学専攻 修士課程修了。大学院卒業後、日本オラクル株式会社に入社。おもにアプリケーションサーバ製品のコンサルティング、および新規ビジネスの研究・開発に携わる。2006年、株式会社セールスフォース・ドットコムに入社。同社在籍中の2007年にIPA未踏ソフトウェア創造事業に採択される。プロジェクト名は「宣言的アプローチによるJavaScriptマッシュアップエンジンの開発」。2008年1月に株式会社マッシュマトリックスを設立し、代表取締役に就任。ブログは「snippets from shinichitomita's journal」(技術系)、「http://blog.mashmatrix.com/stomita/」(会社系)。