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

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

インターネットクラウド × イントラネット

これまで様々なWeb上の情報をマッシュアップするダッシュボードを作成してきました。最近は各種APIを提供するWebサービスや、「Googleスプレッドシート」のようにインターネットクラウド上に情報を保管して提供するサービスが多数出てきました。これらをうまく利用すれば、まったく企業内にシステムを持つことなく新たなシステムを作成することも可能になってきています。

ただ、実際の企業内の情報システムにおいては、今までの既存システム資産を活かすため、あるいはセキュリティなどの懸念点から、自社内のサーバにまったく情報をもたなくなることはおそらく数年はないでしょう。

このため、企業向けのサービスとしてマッシュアップを提供するという観点に立った場合、イントラネット内の情報についても簡単にマッシュアップ対象として統合できるかどうか、ということが大変重要になります。

ということで、今回のダッシュボードに表示する顧客名簿については、外部サービスに委託することなく自社のイントラネット内で管理運用しているという想定でおこないます。

CSV情報の取り込み

顧客情報はCSV形式で保管されており、イントラネット内のWebサーバからダウンロードできるものとします。今回は、こちらのCSVファイルをダウンロードして、適当なWebサーバにアップロードしておきましょう。例えば、ローカルPC内でHTTPサーバがあがっている場合はそちらでもかまいません。大事なのはWebブラウザから直接URLでアクセスできる場所に置かれていることです。

ここではアップロードしたCSVのURLを仮に

http://intranet.example.org/csv/accounts.csv

としておきます。

なお、現在のところ読み込むCSVはUTF-8形式エンコーディングされている必要があります。通常Microsoft Excel等で保存したCSVはシフトJISになっているので、その場合は別途エディタなどで開いてUTF-8形式で保存する必要があります。

Afrous Dashboardの画面から、右の引き出しパネルにあるデータソースの＜追加＞ボタンを押します。ダイアログが立ち上がり、データソースの種類を尋ねられますので、ここでは「CSV データソース」を選択します(図1)。

図1 新たに「CSV データソース」を追加する

続いてCSVデータソースを作成するウィザードが表示されます。ウィザード中に表示されるCSVのURLを入力するフィールドの中に先ほどのCSVをアップロードしたURLを入力します。パラメータについては、今回は静的なファイルを読み込むだけなので、指定する必要はありません(図2)。

図2 読み込むCSVファイルのURLを入力

クロスドメイン・プロキシの設定

URLを入力して＜次へ＞ボタンを押してウィザードを進めると、次に、クロスドメインプロキシを設定する画面が現れます(図3)。

図3 クロスドメインプロキシの設定

通常のWebブラウザでは、異なるドメインのリソースに直接リクエストを投げることを制限しています。このため、クロスドメインのリクエストを代理で受け取って対象となるリソースにアクセスするプロキシサービスが必要になります。Afrousではサーバサイド・プロキシサービスの代わりにクライアントサイドのプロキシを利用してクロスドメインの通信を行います。

ここでは、エージェントになるクロスドメイン・プロキシHTMLファイルをウィザード中に表示されているリンクからダウンロードし、CSVファイルが配置されているサーバと同じドメイン上のWebサーバに配置します。配置したウィザードの中のHTMLファイルのURLを控えておき、フィールドの中に入力します(ここでは http://intranet.example.org/csv/xd-proxy.html とします)。入力が完了したら＜次へ＞ボタンを押します。

プレビュー画面が表示されるので、＜送信＞ボタンを押して実際にCSVに対してリクエストを送信します。CSVを取得した結果がテーブルの中に表示されるのが確認できます(図4)。なお、チェックボックスをオンにしておくと、CSVの最初の行を各列のヘッダとして利用することができます。

図4 読み込んだCSVファイルの結果を確認

＜次へ＞ボタンを押して、最後にデータソースのタイトルなどのメタデータを入力して＜完了＞ボタンを押します(図5)。ウィザード終了後、カスタムデータソースのノードに作成したデータソースがリストされているのが確認できます(図6)。

図5 データソースのタイトルなどを入力	図6 カスタムデータソースに追加される

あとは前回までと同様に、データソースをダッシュボードにドラッグ&ドロップして、ウィジットとして表示します。ここではグリッド表を選んで表示します(図7)。ウィジットの編集画面から、CSVから取得した列のうちグリッドの中に表示するものを2、3選んで＜OK＞ボタンを押します(図8)。CSVのデータがグリッド表として表示できるのが確認できます(図9)。

図7 ウィジット/グリッド表としてダッシュボードに追加

図8 ウィジットに表示したい項目を選択	図9 CSVデータの表示を確認する

次回はこのデータソースをマッシュアップエディタを利用して拡張してみましょう。

⇒第6回 - マッシュアップエディタによる拡張

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

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