Titanium Mobileで作る! iPhone/Androidアプリ

第6回 TitaniumでTwitterクライアント──GPSとMap

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

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

前回まではアプリ作成に必要な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ボタンが現れ,タップすると現在地が表示されるようになります。

著者プロフィール

倉井龍太郎(くらいりゅうたろう)

株式会社はてな アプリケーションエンジニア。

スマートフォンアプリからSQLチューニングまで幅広く格闘中。好きな言語はRuby。

URLhttp://d.hatena.ne.jp/r_kurain/
Twitter@kurain

コメント

コメントの記入