2011年12月22日木曜日

【Titanium Advent Calendar 2011:22日目】グラフModule作ってみました


Titanium Advent Calendar 2011:22日目

はじめまして。明後日が誕生日の@goandoです。

この記事は@astronaughtsさん主催のTitanium Advent Calendar2011に向けて書いています。昨日の@misoppuさんの【Titanium Advent Calendar 2011:21 日目】たまには使おうScrollView からのバトンタッチです。



私がはじめてTitanium Mobileと出会い、イベント等に参加させてもらいはじめたのは2011年3月くらいで随分前なのですが、未だにTitaniumを使ったアプリをちゃんと開発した実績がなく、2011年も終わりに近付きつつありました。

「このままじゃ何も作らず今年が終わっちゃう」
という焦りから、何かTitaniumで作るために意を決してTitanium Advent Calendarに参加させていただきました。

前置きが長くなりましたが、今回ははじめてのTitaniumという事で、以前からやってみたかったiOS用のモジュールを作る事にしました。

何のモジュールを作るか
私が初めて開発したBicycle StatsというiOSアプリがあります。

私の趣味でもある自転車乗りをターゲットに作ったアプリで、自転車に乗った距離や、平均速度、距離、カロリーなどを記録していく為のアプリです。

しかし、iPhoneでこれらの数値を計測する術が無く、サイクルコンピューター等のセンサーで計測した数値を、いちいち自分で入力しなくてはならないという、非常〜に面倒くさいアプリに仕上がっております。

そんなわけでAppStoreの成績も芳しくないのですが、こんなアプリでも他の開発者の方に見せるとなかなかウケがいい機能があります。

それはグラフのUIです。
    ↓

※クリスマスムードいっぱいなムービーにしましたので、音声付きでご覧下さい。

このグラフの機能は出来るだけ美しいUIにしようと、当時かなり心血を注いだ部分でした。

そこで、もしこの機能をコンポーネント化する事が出来たら、誰かに使ってもらえるんじゃなかろうか?と思い立ち、Titaniumのモジュールにする事にしました。
モジュール用のプロジェクト作成
モジュール開発には、モジュールのXCodeプロジェクトの雛形を作成する所から始めます。

同じくTitanium Advent Calendarの11日目に寄稿された@chris4403さんの
【Titanium Advent Calendar 2011:十一日目】はじめてのTitanium Mobile Module作成 iPhone編
の記事が非常に判りやすかったので、かなり参考にさせていただきました。

以下の様にtitaniumコマンドでモジュールの雛形を作ります。
モジュールの名前は綺麗なグラフ、を目標にという事でprettychartsにしました。

titanium create --platform=iphone --type=module --dir=. --name=prettycharts --id=com.gnddesign.prettycharts
ViewProxyとか
モジュールの雛形が出来たら、モジュールの実装をします。

今回作るのはグラフのUIという事でViewのモジュールなります。
モジュール開発に必要になるのがViewProxyとかProxyとか、最初いまいち全体像が掴めなかったんですが、こちらのスライドを見たら一発で判りました。さすが本家。
モジュールを動かしてみる
とりあえずexampleは動いてたので、Titanium Studioでプロジェクトを作ってモジュールを組み込んでみることに。

モジュールのプロジェクトフォルダで./build.pyを実行すると、モジュールのプロジェクトフォルダにzipが出来てました。

このzipをTitanium Studioで新しく作ったプロジェクトChartModuleTesterのフォルダに置いて、tiapp.xmlにモジュールの情報を追加します。

<modules>
    <module platform="iphone" version="0.1">com.gnddesign.prettycharts</module>
 </modules>


Resources/app.jsは、とりあえずモジュールのexample/app.jsと同じものを置いて、Titanium Studioでビルドを実行しました。

おお、動いた。すごい。
完成?
かなり端折りましたが(一応)動くものが出来上がりました。
iOS用グラフモジュールです。ちょっとアニメーションとか付けちゃったので、(宣伝)ムービーをご覧下さい。


・・・と、本当はMarketplaceでの公開を目標にしてたのですが、ちょっと完成レベルまで至らなかったので、もうちょっとブラッシュアップしてからMarketplaceに出そうかなと思ってます。
現状のモジュールはサンプルとしてGitHubにアップしましたので、良かったらいじってみて下さい。
https://github.com/goando/PrettyChartsSample
使い方
モジュールを落としていただいた方向けですが、使い方は簡単にこんなところです。

var PrettyCharts = require('com.gnddesign.prettycharts');
var chart = PrettyCharts.createChart({
    // 左側のデータ
    leftChartType: 0, // 0:棒グラフ 1:折れ線グラフ
    leftChartColor: 2, // 0:青 1:緑 2:赤 3:オレンジ 4: 黄 5:紫
    leftDataTitle: "体重", // データ名称
    leftDataUnit: "kg", // 単位
    leftDataArray: [ 100, 115, 132, 153, 114, 246, 99, 196, 209, 211, 248, 115, 132, 153, 123, 132, 196, 209, 211, 173, 99, 123, 132, 114, 246, 173, 248],

    // 右側のデータ
    rightDataEnabled: true, // 右側のグラフを出したかったらtrue
    rightChartType: 1,
    rightChartColor: 0,
    rightDataTitle: "身長",
    rightDataUnit: "cm",
    rightDataArray: [ 246, 218, 100, 115, 132, 153, 114, 146, 118, 99, 173, 99, 115, 132, 153, 114, 123, 132, 96, 109, 93, 82, 116, 159, 211, 100, 211],
    top: 0,
    left: 0,
    width: 320, // required
    height: 400, // required
});

window.add(chart);
window.open();

引数の*DataArrayにはグラフ化する数値を配列で渡すのですが、左右のグラフで要素数が異なると落ちるので注意して下さい。あと他にも*ChartTypeとか*ChartColorも指定外の数値を渡すと落ちると思いますw
Marketplaceに出すには、まだまだ見直さないとですね。


明日はMogSnapの@toru0325さんです。よろしくお願いします!