試してわかる『Afrous』の可能性 Vol.6 - マッシュアップエディタによる拡張

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

Vol.1 - ビジネス環境でも使えるマッシュアッププラットフォーム
Vol.2 - マッシュアップダッシュボード画面の作成
Vol.3 - カスタムデータソースの作成(1)
Vol.4 - カスタムデータソースの作成(2)
Vol.5 - イントラネット内のCSVファイルの統合

Afrous Mashup Editor

Afrousプラットフォームには、これまで見てきたマッシュアップしたデータを表示する「Afrous Dashboard」の他に、マッシュアッププロセスを記述するためのオンライン開発環境である「Afrous Mashup Editor」があります。これによって単なるWebサービスの表示のみならず、高度なマッシュアップ処理を記述することが可能になっています。

今回はこのAfrous Mashup Editorを利用して、前回作成したCSVのデータソースに、指定したパラメータ値でフィルタリングが行えるようにします。

CSVデータをフィルタリングする

Afrous Mashup Editorを起動するには、データソースの＜追加＞ボタンを押してダイアログから「Afrous マッシュアッププロセス」を選択するか、すでに作成済みのデータソースに対して右クリックで編集を行います。ここでは、前回CSVウィザードを利用して作成した結果のCSVデータソースである「顧客名簿」を右クリックして編集します(図1)。

編集メニューを選択すると、Afrous Mashup Editorが新規にウィンドウとして表示されます(図2)。この中にはすでにファイルをURLから取り込んでCSVとして解析する処理がプロセスに埋め込まれています。今回はこの中のCSV解析後に得られたレコード列に対してフィルタリングを行う処理を追加します。

Mashup Editorの中には小さなウィンドウ形状のパネルが縦に並んでいます。この中の一番上にあるパネルをパラメータパネル、一番下をアウトプットパネルと呼び、その間にある数個のパネルをアクションパネルと呼びます。マッシュアッププロセスの作成とは、基本的にはパラメータパネルから入力値を受け取り、アクションパネルを連ねることによってデータを取得・変換し、最終的な出力をアウトプットパネルにつなげることになります。

ここで、アクションパネルのうちの一番下にあるパネル「CSV Parse(result)」をクリックしてフォーカスします。アクションパネル中にある＜更新＞ボタンを押すことによって、実際にそのアクションが出力するデータを見ることができます。出力結果はツリー状に表示され、ノードをクリックすることで出力されたオブジェクトのプロパティをデバッグすることができます(図3)。

ここで、出力されたツリーの一番ルートとなるノード(result)をマウスでドラッグし、アクションパネルの下のスペースにドラッグ&ドロップします(図4)。ドロップした際にポップアップメニューが現れます(図5)が、これはこのドロップしたデータに対して適用できるアクション操作の一覧をリストしています。ここでは「Filter」アクションを選択し、出力結果を絞り込みできるようにします。

ポップアップメニューから「Filter」を選択すると、フィルタの条件を選択するアクションパネルが現れます(図6)。パネル中の＜追加＞ボタンをクリックし、新たに絞り込み条件を追加します。今回は取引先名で絞り込みを行うため、プルダウンから取引先名を選択し、条件として「次の値と一致する」を選択、最後にパラメータ入力フィールドに絞り込みを行う企業名を入力します(ここでは仮に「ヤフー」と入力しておきます、図7)。

＜更新＞ボタンをクリックすると、出力されるレコードの全体の件数が少なくなっており、実際にツリーを展開すると取引先名が「ヤフー」に合致するレコードのみが抜き出されているのがわかります(図8)。

プロセスのパラメータを追加

先ほどアクションの絞り込み条件に「ヤフー」と直接入力してしまいましたが、この値はプロセスの外部から自由に設定できるようにするべきです。そのため、プロセスのパラメータを新たに定義する必要があります。

プロセスパラメータの定義は、画面上部のパラメータパネル上で行います。パネルのタイトルバーの右上にある＜設定＞ボタンをクリックし(図9)、パラメータ定義のダイアログを表示します(図10)。

取引先の名前を入力できるように、＜パラメータの追加＞ボタンをクリックし、以下の情報を入力し、＜OK＞ボタンを押します。

参照変数名	name
表示ラベル	取引先名
データ型	string

パラメータの定義を完了すると、図11のようにパラメータがパネル内に現れます。パラメータの横の＜編集＞ボタン(鉛筆アイコン)をクリックすることで、パラメータに指定する値を実際にテキスト入力して指定することができます(図12)。

パラメータの値を設定したら、図13のように、このパラメータの値をドラッグして、先ほどのフィルタアクションの条件式のパラメータ入力フィールドにドロップします。その後、＜更新＞ボタンをクリックして、実際にレコードがパラメータに設定した値フィルタリングされていることを確かめます。

最後に、フィルタリングの結果として得られたアクションの出力結果をそのまま画面最下部のアウトプットパネルのフィールドに図14のようにドラッグ&ドロップして、＜保存＞ボタンを押し、プロセスエディタを終了します。

フィルタリング結果をウィジットで表示

ここでもう一度データソースのリストから「顧客名簿」データソースを選択し、ダッシュボードにドラッグ&ドロップします。また、ウィジットの表示形式として「グリッド表」を選択します。ウィジットの変種画面が表示されますが、ここに先ほどMashup Editorで定義したパラメータがウィジットのパラメータとして追加されているのが確認できます(図15)。

あとは、前回までに学んだように、Googleスプレッドシートのレコードの行をクリックして、その中の「取引先名」の値をそのままパラメータに設定して、ウィジット同士の関連付けを行います(図16)。最終的にクリックした取引先に合致する顧客名簿に絞り込んで表示できるのが確認できるはずです(図17)。

これでチュートリアルのダッシュボードはほぼ完成しました。最終回はこのダッシュボードをエクスポートして、自分のWebサイトに貼り付けたり自社のポータルとして利用する方法を学びます。

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

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