スマートフォンらしい機能を

前回まではアプリ作成に必要なTitaniumの基本的な機能について解説してきましたが、今回からは、GPSやカメラなどスマートフォンらしい機能の解説をしていきます。GPS,カメラそして加速度センサなどが簡単に利用でき、またiPhoneとAndroidで共通のコードで扱うことができるというのはTitaniumの大きな利点です。

GPS情報とMap

Twitterには位置情報を投稿する機能もあるので、今回はこの投稿部分を拡張してくことにします。前々回に作った投稿画面のコードを拡張して、投稿画面を次のような形に変更します。

左側のLocationボタンをタップすると、画面下側に地図が表示され現在位置が表示されます。テキストエリアにコメントを入れてPostボタンを押すと現在位置付きでPostされます。Twitter側の設定で位置情報を受け付ける設定にしないと、投稿しても無視されるので、実際に試すときはは設定を変更しておいてください。設定変更後は自宅など位置が公開されては困るところで実行しないように注意してくださいね！

では実装の解説です。次のコードを、前々回作ったmessage_windo.jsに追加しています。

var mapview = Titanium.Map.createView(
    {
        width: 320,
        height: 240,
        top: 220,
        mapType: Titanium.Map.STANDARD_TYPE,
        region:{latitude:40.0, longitude:130, latitudeDelta:30, longitudeDelta:30},
        animate:true,
        regionFit:true,
    }
);
mapview.hide();
win.add(mapview);

この部分は地図を表示しているコードで、width, height, topなどはほかのUI部品の指定と変わりありません。注目すべきはregionのパラメータで、ここに地図の中心となる緯度（latitude⁠）⁠、経度（longitude⁠）⁠、表示する幅（latitudeDelta, longitudeDelta）を指定することで実際に地図に表示される範囲が決まります。このパラメータですとだいたい日本付近が表示されます。ただし、この例ではLocationボタンがタップされたときに初めて表示されるように、viewを作成したあとすぐにmapview.hide()によって表示を消しています。

さらに次のコードを加えます。

Titanium.Geolocation.purpose = 'Twitter投稿のため';
function setCurrentPosition () {
    Titanium.Geolocation.getCurrentPosition(
        function(e) {
            textArea.blur();
            if (!e.success || e.error)
            {
                alert('位置情報が取得できませんでした');
                return;
            }

            latitude = e.coords.latitude;
            longitude = e.coords.longitude;

            var currentPos = Titanium.Map.createAnnotation(
                {
                    latitude:latitude,
                    longitude:longitude,
                    title:"現在地",
                    pincolor:Titanium.Map.ANNOTATION_GREEN,
                    animate:true
                }
            );
            mapview.addAnnotation(currentPos);
            mapview.show();
            mapview.setLocation(
                {
                    latitude:latitude,
                    longitude:longitude,
                    latitudeDelta:0.01,
                    longitudeDelta:0.01
                }
            );
        }
    );
}

このコードはGPSを利用して位置情報を取得し、さらに先に作っていた地図上で現在位置を表示します。また現在位置にはピンが立つように実装しています。Titanium.Geolocation.purposeに指定している文字列は、ユーザーに対して位置情報を取得する旨を伝えるダイアログに現れます。iOS 4以降ではなにか文字列を設定しておくことが必須です。

Titanium.Geolocation.getCurrentPositionが位置情報を取得するためのメソッドで、位置情報を取得したときの処理をコールバック関数として与えます。取得に成功していた場合、コールバック関数に渡ってくる値 e のe.coordsオブジェクトから現在位置（coords.latitude, coords.longitude）や、速度（coords.speed⁠）⁠、向いている方角（coords.heading）などが取得できます。詳しい仕様についてはこちらに情報があります。

緯度経度を取得した後のTitanium.Map.createAnnotationは地図上に現れるピンを作成しています。作られたAnnotationオブジェクトは、mapviewのaddAnnotationメソッドで地図上に表示させることができます。

またこのサンプルでは、Annotationを表示したあとに、mapview.show()を呼び出すことで隠されていた地図を初めて表示し、setLocationによって現在地まで地図をスクロールさせています。

そして、最後に位置情報取得を行うボタンを追加します。

var locationButton = Ti.UI.createButton(
    {
        top: 170,
        left: 10,
        width: 100,
        height: 44,
        title: 'Location'
    }
);

locationButton.addEventListener(
    'click',
    setCurrentPosition
);
win.add(locationButton);

このコードを追加すると、画面にLocationボタンが現れ、タップすると現在地が表示されるようになります。

Twitterに投稿しよう

ここまでで位置情報は取得できるのですが、Twitterへ投稿するコードがまだありません。message_window.jsのtweet関数の冒頭部分を次のように変更しましょう。

Ti.include("lib/twitter_api.js");
//initialization
Ti.App.twitterApi = new TwitterApi({
    consumerKey:'YOUR_CONSUMER_KEY',
    consumerSecret:'YOUR_CONSUMER_SECRET'
});
var twitterApi = Ti.App.twitterApi;
twitterApi.init(); 

var latitude;
var longitude;
function tweet(message) {
    var params = {status: message};
    if (latitude && longitude) {
        params['lat']  = latitude;
        params['long'] = longitude;
    }
    twitterApi.statuses_update(
        {
            onSuccess: function(responce){
                alert('tweet success');
                Ti.API.info(responce);
            },
            onError: function(error){
                Ti.API.error(error);
            },
            parameters:params
        }
    );
}

YOUR_CONSUMER_KEYとYOUR_CONSUMER_SECRETには、ご自身のCunsumer KeyとConsumer Secretを記入してください。

ここで、latitude, longitudeを関数の外側で定義しているのは、先に説明したTitanium.Geolocation.getCurrentPositionメソッドの中でこの変数に現在位置の情報を代入するためです。同じ変数を、tweet関数の中で参照することで位置情報が取得できている場合には、Twitterへの投稿に追加するように実装しています。

実際の投稿に成功すると、このようにツイートのパーマリンクから投稿した場所が確認できます。

先のサンプルではもう一つ注目してほしい点があります。それは、冒頭でtwitter_api.jsをincludeしている点で、前回までのサンプルではoauth_adapter.jsを利用していたところを変更しています。twitter_api.jsはmogyaこと古川大輔さんが開発したoatuh_adapter.jsのラッパーで、oauth_adapter.js自体も改良がなされています。自分のhome_timelineの取得も可能になっているので、このライブラリを使うことでTwitterクライアントの作成がより簡単になります。

ライブラリ自体は古川さんのGitHubで公開されており、古川さんによる10分でtwitterクライアントを作る実演もあります。

また今回のサンプルを動かすために、table_view.jsからmessage_window.jsを読み込んでwindowを開く処理を変更しています。具体的にはWindowオブジェクトのopen()メソッドから、Ti.UI.currentTab.openに変更しています。詳しくはGitHubでコードの変更点をご覧になってください。

まとめ

このようにTitaniumではMapの機能やGPS情報の取得が非常に簡単に利用できるようになっています。来週以降解説する、カメラや加速度センサといった機能も同様でとても短いコードでスマートフォンに独特な機能を呼び出すことができます。ということで次回以降もお楽しみに！