R&Dトレンドレポート

第24回 マッシュアップ開発のススメ[その10:モバイル版アプリケーションを作ろう④]

この記事を読むのに必要な時間:およそ 3.5 分

グラフ機能の実装

iPhoneではwebviewというウェブコンポーネント(ウェブキット)を使用することで,HTMLを用いた表現が可能となっています。要するにブラウザと同等の機能を有するわけです。

ということはPC版クライアントの時に使用したhighchartsがそのまま利用できるということです。これは便利ですね。

グラフ描画処理の流れとしては以下のようになります。

図2 グラフ描画のシーケンス

図2 グラフ描画のシーケンス

また,グラフをタッチしたときにTitanium側にフィードバックする機能は以下のようになります。

図3 グラフタッチのシーケンス

図3 グラフタッチのシーケンス

グラフ描画

それではグラフの実装について見てみましょう。まずはウェブビューの定義です。これはTitanium側で行います。

リスト5 ウェブビューの実装

var w = Ti.UI.createWebView({
  top: v2.top + v2.height,
  width:316,
  height: “auto”,
  url: "html/chart.html"
});

ここではウェブビューの部品を作っていますが,実体はhtml/chart.htmlにあります。ウェブビューではリモートのウェブページ以外にもローカルのhtmlファイルも表示することが可能です。

ウェブビューはブラウザそのものですので,Titaniumでは使用できなかったjqueryも使用できます。ディレクトリはResources/htmlを作成し,その直下にjqueryとhighchartsのjsファイルをコピーします。また,chart.htmlも同じところにおきます。

それではウェブビューの中身を見ていきましょう。

リスト6 ウェブビューのHTML部分

<html >
<head >
<script type = "text/javascript"src = "jquery-1.3.2.min.js" > </script>
<script type = "text/javascript"src = "highcharts.src.js" > </script>
    <script type="text/javascript ">

function graphinit( data, asec ){
  var options = {
    credits: {
        enabled: false,
    },
   ~省略~
    plotOptions: 
    {
      series: 
      {
        point: 
        {
          events: 
          {
            click: function(e) {
              t = this.x * asec;
              Ti.App.fireEvent("click_chart",{x:t, y:this.y, pxx:e.x});
            },
          }
        },
        marker:
        {
          enabled: false,
        }
      },
    }
}
    </script>
  </head>

  <body>
    <!--Div that will hold the chart-->
    <div id="myChart" style="width:305; height:140;"></div>
  </body>
</html>

このように普通のhtmlを記述できます。青字のメソッド定義がTitaniumから呼び出されるメソッドとなります。

次に,Titaniumでサーバからグラフデータのダウンロードを行い,ウェブビューのメソッドを呼び出す部分です。

リスト7 メソッド呼び出し
var baseURL = "http://example.com/xxx/";

var url = baseURL + "thumb.cgi?id=" + myData.id;
var linevalue;

var xhr = Titanium.Network.createHTTPClient();
xhr.open("GET", url);
xhr.send();
xhr.onreadystatechange = function(){
  if ( xhr.readyState == 4 && xhr.status == 200 )
  {
    json = JSON.parse(xhr.responseText);
    linevalue = JSON.stringify(json.data.graph);
    asec = json.data.asec;
    Ti.API.info(linevalue);
    Ti.API.info(w);
    w.evalJS('graphinit('+  linevalue + ', ' + asec + ')');
  }
};

上記ソースの青字の部分がウェブビュー側の関数を呼び出している部分です。evalJSというメソッドを使用することで,ウェブビュー側で定義しているgraphinit()というメソッドが呼び出されます。

これでTitanium側からデータを渡し,グラフを描画させることができました。

グラフからのフィードバック

再度,⁠ウェブビューのHTML部分⁠のソース(リスト6)を参照ください。ここでのポイントは赤字の部分,ネイティブアプリ側の関数を呼び出している部分です。fireEvent関数を使用することで,ウェブビュー内から今度は逆にTitanium側の関数を呼び出すことが可能となっています。

以下は呼び出されるメソッドの定義です。

Ti.App.addEventListener("click_chart", function(e){

~アイコン作ったりとか処理~

});

ここで注意しておきたいのが,fireEventで呼び出すメソッドは一意に識別できる名称にしておかないといろんなところで呼ばれる可能性があります(試してみたところ,現在アクティブなウインドウの定義とapp.jsでの定義は同列に扱われるようです⁠⁠。

このように実装することで,ネイティブ部分とウェブビュー部分で互いにデータのやりとりやイベントのハンドリングが可能となります。非常に便利ですが,ひとつ難点を言うとすると,動作が緩慢になる可能性があります。描画やタッチからの動作が比較的遅い感じがしました。ただ,表現力が高いためそこら辺のトレードオフは十分にあると思います。用途に合わせて使い分けたいですね。

こんな感じになりました。

図4

図4

次回は動画再生部分になります。よろしくお願いします。

著者プロフィール

脇本武士(わきもとたけし)

都内中小IT企業(メイサンソフト(株))に所属。某大手自動車会社でのシステム開発,運用を経て,現在は研究開発部署に席をお借りしています。DB周りの保守サポート,ウェブ技術開発を主に手がけてきました。現在は大規模計算フレームワークの活用とKVSに注目しています。普段はOS Xを使用していますが一番よく使うアプリはTerminalです(笑)。

R&Dトレンドレポート(てくらぼ)