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

Yahoo! iOSマップSDKを使ったtitanium moduleを作ってみた

概要

最近はDBの勉強をほっぽってtitaniumの勉強の勉強なんぞをしてます。
手始めにYahoo!のiOSマップSDKを使ったmodule作りを作ってみたので、環境構築を含めて手順を残しておきます。
titaniumもobj-cも初心者なので、間違っていたらご指摘いただけるとうれしいです。

実行環境

以下の環境で動かしました。

  • Mac OSX Lion
  • Xcode 4.3
  • iOS SDK 5.1
  • titanium 2.0.1
  • Yahoo! iOSマップSDK 1.0.6

titaniumの用意

ユーザ登録して、以下のページからダウンロード。
Titanium Cross Platform Mobile App SDK | Native iOS, Android, Hybrid, and Mobile Application Development | Appcelerator Inc

インストール方法と細かい設定は省略。
Xcode4.3の場合は以下のようにパスを設定しておきます。

$ sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

あとはtitaniumを起動しやすいようにエイリアスを張っておきます。

$ alias titanium='~/Library/Application\ Support/Titanium/mobilesdk/osx/2.0.1.GA2/titanium.py'

Yahoo! iOSマップSDKの用意

以下のページからsdkをダウンロード。
YOLP(地図):Yahoo! iOSマップSDK - Yahoo!デベロッパーネットワーク

sdkの利用にあたりアプリケーションIDが必要になるので、アプリケーションIDを取得します。
アプリケーションの管理:Yahoo!デベロッパーネットワーク

プロジェクトの作成

作業ディレクトリでプロジェクトを作成。
自分はIDEに慣れてないのでターミナルで作業してますが、titanium studioで作業してもおkです。

titanium create --platform=iphone --type=module --name=YMapTest --id=ymap.test

Xcodeでの作業

作成したプロジェクトに移動して、xcode用のプロジェクトファイルを開きます。

$ cd YMapTest
$ open ymaptest.xcodeproj

ClassesにViewを追加。
New Files... -> Appcelerator -> TiUIViewで"YmapTestView"として保存します。
さらにViewProxyも追加。
New Files... -> Appcelerator -> TiUIViewProxyで"YmapTestViewProxy"として保存します。

最後にYahoo! iOSマップSDKを追加。
左カラムのProject Navigatorのプロジェクト名を選択し、
TARGETS -> ymaptest ->Build Phases -> Link Binary With Librariesに
ダウンロードしてきたYahoo! iOSマップSDKの中のYMapKit.Frameworkを追加します。
imageの中のファイルは今回利用しません。

OpenGLES.Frameworkの修正

(YMapKitのバグなのか)そのままビルドしようとすると/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/Frameworks/OpenGLES.framework/Headers/ES1/gl.hでエラーが出ます。
仕方ないので修正。

#define GL_API extern

#ifndef GL_ES_VERSION_2_0 // 追加

typedef unsigned int    GLenum;
typedef unsigned char   GLboolean;
typedef unsigned int    GLbitfield;
typedef signed char     GLbyte;
typedef short           GLshort;
typedef int             GLint;
typedef int             GLsizei;
typedef unsigned char   GLubyte;
typedef unsigned short  GLushort;
typedef unsigned int    GLuint;
typedef float           GLfloat;
typedef float           GLclampf;
typedef void            GLvoid;
typedef int             GLfixed;
typedef int             GLclampx;

typedef long            GLintptr;
typedef long            GLsizeiptr;

#endif // 追加

YmapTestView.hの実装

#import "TiUIView.h"
#import <YMapKit/YMapKit.h>

@interface YmapTestView : TiUIView {
    YMKMapView *map;
}

@end

YmapTestView.mの実装

チュートリアルに習って地図を表示するだけの実装です。

#import "YmapTestView.h"

@implementation YmapTestView

-(void)dealloc {
    RELEASE_TO_NIL(map);
    [super dealloc];
}

-(YMKMapView*)map {
    if (map == nil) {
        map = [[YMKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 320) appid:@"アプリケーションID"];        map.mapType = YMKMapTypeStandard;

        CLLocationCoordinate2D center;
        center.latitude = 35.6657214;
        center.longitude = 139.7310058;
        map.region = YMKCoordinateRegionMake(center, YMKCoordinateSpanMake(0.002, 0.002));
        [self addSubview:map];
    }   
    return map;
}

-(id)init {
    [super init];
    [self map];
    return self;
}

@end

module.xconfigの編集

以下の行を追記します。

OTHER_LDFLAGS=$(inherited) -framework YMapKit

moduleのビルド

ひとまずビルドしてみます。

$ ./build.py

example/app.jsの編集

ビルドに成功したら、自作moduleを使ったサンプルアプリを実装してみます。
app.jsの適当な場所に以下を追記。

var ymapView = ymaptest.createView();
win.add(ymapView);
win.open();

サンプルアプリの実行

あとは動くことを祈りながらビルド。
ちょっと時間がかかるので筋トレでもしましょう。

$ titanium run

みんな大好きミッドタウンが表示されたら成功!

感想

titanium楽そう!と思って取り組んだけど、objective-c触ってる時間の方が長くて若干後悔してます。