読者です 読者をやめる 読者になる 読者になる

Titanium mobileでGeoHex

技術 ジオ

最近、流行りのTitanium Moblile。"チタニウム"ではなく、"タイタニウム"らしいです。
javascriptでコードを書くと、Android用、iphone用、それぞれのアプリを生成してくれるという優れモノ。

色々メリットはあるのは他所でも紹介されているのでここでは省いて、自分がぱっと思ったのは、過去にGeoHexのobjective-c版に挑戦(http://d.hatena.ne.jp/seikoudoku2000/20110425)したりしていたのですが、それ要らないじゃんということww。
ということで、少し試してみました。
ただ、結果から言うと、現時点では期待通りの動作をさせることはできませんでした。polygon使えない、地図上のtouchイベント、dragイベントが拾えないetc..
↓こんな仕上がりです。。
f:id:seikoudoku2000:20110731014318p:image

app.js

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();

//win1を適当にtab1にセット

var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
     url:'map_sample.js'
});

var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
tabGroup.open();

mapsample.js
どう見てももっと短くできます。。

Ti.include( 'hexcore.js' );

var lon = 35.667092;
var lat = 139.716507;

var hex = getZoneByLocation(35.667092, 139.716507, 7);
var hexCoords = hex.getHexCoords();

// マーカーはAnnotationオブジェクトとして表現される。
var center = Titanium.Map.createAnnotation({
        latitude:hex.lat,
        longitude:hex.lon,
        title:hex.code,
        subtitle:'GeoHex code',
        pincolor:Titanium.Map.ANNOTATION_PURPLE,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:center // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
});

var pin1 = Titanium.Map.createAnnotation({
        latitude:hexCoords[0].lat,
        longitude:hexCoords[0].lon,
        title:'頂点1',
        subtitle:'pin1',
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:pin1 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
});

var pin2 = Titanium.Map.createAnnotation({
        latitude:hexCoords[1].lat,
        longitude:hexCoords[1].lon,
        title:'頂点2',
        subtitle:'pin2',
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:pin2 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
});

var pin3 = Titanium.Map.createAnnotation({
        latitude:hexCoords[2].lat,
        longitude:hexCoords[2].lon,
        title:'頂点3',
        subtitle:'pin3',
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:pin3 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
});

var pin4 = Titanium.Map.createAnnotation({
        latitude:hexCoords[3].lat,
        longitude:hexCoords[3].lon,
        title:'頂点4',
        subtitle:'pin4',
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:pin4 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
});

var pin5 = Titanium.Map.createAnnotation({
        latitude:hexCoords[4].lat,
        longitude:hexCoords[4].lon,
        title:'頂点5',
        subtitle:'pin5',
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:pin5 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
});

var pin6 = Titanium.Map.createAnnotation({
        latitude:hexCoords[5].lat,
        longitude:hexCoords[5].lon,
        title:'頂点6',
        subtitle:'pin6',
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:pin6 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
});


// MapViewオブジェクトを作成する。
var mapview = Titanium.Map.createView({
        mapType: Titanium.Map.STANDARD_TYPE,
        region: {latitude:35.667092, longitude:139.716507, latitudeDelta:0.01, longitudeDelta:0.01},
        animate:true,
        regionFit:true,
        userLocation:true,
        annotations:[center,pin1,pin2,pin3,pin4,pin5,pin6]
});

Ti.UI.currentWindow.add(mapview);

hexcore.jsはGeoHexのサンプルからhex_xx_core.js(xxにはバージョン番号)を持ってきて、一番大外の

(function (win) {	// グローバルを汚さないように関数化
})(this);

を取り除いたものを配置。自分は手元にあったv3(現在、非公開)で試してしまったのですが、v2でも同様なはず。


polygonはドキュメントにないんで、引けないんだろうな〜というのはあったんですが、地図上のclickイベントは取れるのかなと思って、ドキュメント見つつ、こういうのも試したんですが、動かず。。(2011/7現在。)
clickイベントはannotationをクリックした時と、その次くらいは動くんですが。。

//動かん。。
/*
mapview.addEventListener('click',function(evt)
{
var clickSource = evt.clicksource;
Ti.API.info('mapview click clicksource = ' + clickSource);
});
*/
/*
mapview.addEventListener('click', function(e){
	Ti.API.info(e.globalPoint);
});
*/

この辺が普通に動く & polygon対応 & dragイベントも対応してもらえたら、簡単にGeoHexを取り込んでアプリを作成できそうな予感がします。
Appcelerator社に期待!!

GeoHex by sa2da is licensed under a Creative Commons 表示-継承 2.1 日本 License.


この本は実用的なサンプルが多くていいな〜と思ったので買ってみましたが、KitchenSinkのサンプルがかなり充実しているので、それだけでソースを追える人は、仕様とかもバリバリ変わってるみたいだし、今のタイミングで書籍を購入しなくてもいいかな〜と思ったりもしました。

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)