memorandum: Titanium

ラベル Titanium の投稿を表示しています。すべての投稿を表示

2013年5月9日木曜日

Titaniumでアプリ開発(13)　起動画面とアイコンの設定

起動画面とアイコンは/Resources/iphoneを設定する。
サイズは以下の通り。

ファイル名	サイズ	説明
appicon.png	57 x 57	for non-retina iPhone/iPod touch (3/3G/3GS)
appicon@2x.png	114 x 114	for retina iPhone/iPod touch
appicon-72.png	72 x 72	for non-retina iPad
appicon-72@2x.png	144 x 144	for retina iPad
appicon-Small.png	29 x 29	for non-retina iPhone/iPod touch Spotlight and Settings (optional)
appicon-Small@2x.png	58 x 58	for retina iPhone/iPod touch Spotlight and Settings (optional)
appicon-Small-50.png	50 x 50	for non-retina iPad Spotlight and Settings (optional)
appicon-Small-50@2x.png	100 x 100	for retina iPad Spotlight and Settings (optional)
iTunesArtwork	1024 x 1024	for Ad Hoc, iTunes PNGで作成し、拡張子は付けないサイズは512×512でもいいけど1024×1024が推奨

ファイル名	サイズ	説明
Default.png	320 x 480	for non-retina iPhone/iPod touch (3/3G/3GS)
Default@2x.png	640 x 960	for retina iPhone/iPod touch
Default-568h@2x.png	640 x 1136	for iPhone 5/iPod touch (4inch)
Default-Portrait.png	768 x 1004	for non-retina iPad (portrait) ステータスバー（20px）を除いたサイズ
Default-Portrait@2x.png	1536 x 2008	for retina iPad (portrait) ステータスバー（40px）を除いたサイズ
Default-Landscape.png	1024 x 748	for non-retina iPad (landscape) ステータスバー（20px）を除いたサイズ
Default-Landscape@2x.png	2048 x 1496	for retina iPad (landscape) ステータスバー（40px）を除いたサイズ

Titaniumでアプリ開発(12)　メール画面を開く

メール画面を開くにはTi.UI.createEmailDialog()を用います。

Titanium.Geolocation.getCurrentPositionと組み合わせて現在地の緯度経度をメール本文に入れてみました。

function postMail () {

 Titanium.Geolocation.getCurrentPosition(

  function(e) {

   if(!e.success || e.error){

    alert('位置情報が取得できませんでした');

    return;

}

   // 現在地をセット

   latitude = e.coords.latitude;

         longitude = e.coords.longitude;

}

);

 var emailDialog = Ti.UI.createEmailDialog();

    // メールの宛先

    emailDialog.setToRecipients(['to@example.com']);

    // メール本文

    emailDialog.setMessageBody("緯度："+latitude+"\n経度："+longitude);

    // メールの題名

    emailDialog.setSubject('');

    // メール送信画面を起動

    emailDialog.open();

}

うまく本文に表示出来ました。

Titaniumでアプリ開発(11)　labelを変更する

前回表示された緯度経度のlabelをクリアボタンで消したい。

色々方法がありそうだけど、labelを張っていたview自体を上書いてみます。

var clearButton = Ti.UI.createButton(

    {

        top: 190,

        right: 115,

        width: 90,

        height: 44,

        title: 'クリア'

    }

);

clearButton.addEventListener(

    'click',

    clearData

);

view.add(clearButton);

function clearData () {
 var topView = Ti.UI.createView(
  {
   height:150,
 width:300,
  top:20,
 font:{fontSize:20},
 borderWidth:2,
 borderColor:'#bbb',
 backgroundColor:'#fff',
 borderRadius:5
  }
 );
 view.add(topView);

}

上書きに成功しました。

調べていると、win.remove()してどうこうって方法もあったけど、エラーが出てだめでした。

2013年5月6日月曜日

Titaniumでアプリ開発(10)　位置情報を表示する

ひとまず緯度経度を表示するアプリが完成しました。

ソースの一部


③の部分

タブを作成する
// タブの作成
var tabGroup = Ti.UI.createTabGroup();


var tab1 = Ti.UI.createTab({
    icon: 'KS_nav_views.png',
    title: 'いどけーど',
    window: win1
});


var tab2 = Ti.UI.createTab({
    icon: 'KS_nav_ui.png',
    title: 'ヘルプ',
    window: win2
});


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



// 現在地ボタンを押したときの処理

function setCurrentPosition () {
 Titanium.Geolocation.getCurrentPosition(
  function(e) {
   if(!e.success || e.error){
    alert('位置情報が取得できませんでした');
    return;
   }
   // 現在地をセット
   latitude = e.coords.latitude;
  　　　　　longitude = e.coords.longitude;
   // 現在地を動的に表示する
   var currentPos = Titanium.Map.createAnnotation({
    latitude: latitude,
    longitude: longitude,
    pincolor: Titanium.Map.ANNOTATION_RED,
    animate: true
   });

   ①の部分

 　　　　　　　　　　　　　　 現在地をラベルとして表示する

　　　　　　　　　　　　　　　\でなく¥を使うとエラーになる
   var lolabel = {
    text: "緯度："+latitude+"\r経度："+longitude,
    height: Ti.UI.SIZE
   };
   var label = Ti.UI.createLabel(lolabel);
   topWindow.add(label);

   
  mapview.addAnnotation(currentPos);
 mapview.show(); // 隠していた地図を表示する
 mapview.setLocation({   // 現在地まで地図をスクロールする
  latitude:latitude,
  longitude:longitude,
  latitudeDelta:0.01,
  longitudeDelta:0.01
 });
  }
 );

}



②の部分

topのwindowを作成する
var topWindow = Ti.UI.createWindow(
    {
        height:150,
        width:300,
        top:20,
        font:{fontSize:20},
        borderWidth:2,
        borderColor:'#bbb',
        backgrondColor:'#fff',
        borderRadius:5
    }
);

④の部分
ボタンを作成
var locationButton = Ti.UI.createButton(
    {
        top: 190,
        left: 10,
        width: 90,
        height: 44,
        title: '現在地'
    }
);
ボタンを押したときに関数をsetCurrentPosition()を実行
locationButton.addEventListener(
    'click',
    setCurrentPosition
);


クリアボタン、メールボタン、ヘルプとかを一通り実装した段階で試しにAppleStoreに申請してみます。

2013年4月30日火曜日

Titaniumでアプリ開発(9)　現在地を表示する

GPSから現在地情報を取得するにはgetCurrentPositionメソッドを用います

var win = Ti.UI.createWindow({

 title: 'Home',

 backgroundColor: '#F4F4F4'

});

var view = Ti.UI.createView();

// 最初に中心となる位置をセットしておく

var mapview = Ti.Map.createView({

 mapType: Ti.Map.STANDARD_TYPE,

 region: {latitude:35.6911, longitude:139.7067, latitudeDelta:0.01, longitudeDelta:0.01},

 animate: true,

 regionFit: true,

 width: 300,

 height: 400

});

view.add(mapview);

win.add(view);

Titanium.Geolocation.purpose = 'サンプル';

Titanium.Geolocation.getCurrentPosition(

 function(e) {

  if(!e.success || e.error){

   alert('位置情報が取得できませんでした');

   return;

}

  // 現在地をセット

  latitude = e.coords.latitude;

        　　　　　longitude = e.coords.longitude;

  // 現在地を動的に表示する

  var currentPos = Titanium.Map.createAnnotation({

   latitude: latitude, 

   longitude: longitude, 

   pincolor: Titanium.Map.ANNOTATION_RED,

   animate: true

});

     mapview.addAnnotation(currentPos);

        　　 mapview.show(); // 隠していた地図を表示する

            mapview.setLocation({   // 現在地まで地図をスクロールする

            latitude:latitude,

            longitude:longitude,

            latitudeDelta:0.01,

            longitudeDelta:0.01

});

}

);

win.open();

2013年4月29日月曜日

Titaniumでアプリ開発(8)　Mapを表示する

MapViewを用いるとMapが表示できます

MapViewを用いた例

var win = Ti.UI.createWindow({

 backgroundColor: '#F4F4F4'

});

var view = Ti.UI.createView();

var map = Ti.Map.createView({

 mapType: Ti.Map.STANDARD_TYPE,

 region: {latitude:35.6911, longitude:139.7067, latitudeDelta:0.01, longitudeDelta:0.01},

 animate: true,

 regionFit: true,

 width: 300,

 height: 400

});

view.add(map);

win.add(view);

win.open();

[説明]

mapType:以下の3つが用意されています。

Titanium.Map.STANDARD_TYPE：全ての道路と一部の道路名を表示する、衛生画像は表示しない。
Titanium.Map.SATELLITE_TYPE：衛星画像を表示する。
Titanium.Map.HYBRID_TYPE：衛星画像や道路の名前を表示する。

region:latitude(緯度),longitude(経度),latitudeDelta,longitudeDelta(縮尺)

[実行結果]

新宿周辺が表示される。

ピンの操作

var shinjuku = Titanium.Map.createAnnotation({

 latitude: 35.6911, longitude: 139.7067, 

 pincolor: Titanium.Map.ANNOTATION_RED,

})

[説明]

pincolor：ピンの色。以下の3つが用意されている。
Titanium.Map.ANNOTATION_GREEN
Titanium.Map.ANNOTATION_PURPLE
Titanium.Map.ANNOTATION_RED

[実行結果]

ピンが追加された。

ひとまず、現在地の緯度経度を確認出来るという簡単なアプリを作ってみようと思います。

2013年4月27日土曜日

Titaniumでアプリ開発(7)　PROVファイルの読み込みとビルド

前提：対象のアプリのtiapp.xmlに前回取得したAppIDを入力しておく。
1. Titanium Studioを起動しiOS Deviceをクリックします。

2. Browseから前回ダウンロードしたPROVファイルを選択します。

　3. Finishでビルドされ、iTunesからデバイスに自動で転送されます。

なんとか転送できた。全く未経験だったので、初回は結構大変でした。
以下、参考にしたサイト。
http://tande.jp/lab/2012/01/1621
http://www.kayakinglifestyle.jp/
http://kentaro-shimizu.com/lecture/iphone/step3.html
http://www.adobe.com/jp/devnet/flash/articles/iphone_flash_1.html#articlecontentAdobe_numberedheader_2

Titaniumでアプリ開発(6)　AppIDの登録とProvisioning Profile の作成

AppIDの登録
1. Developerサイトから[Identifiers]-[AppID]-右上の[+]をクリックします。

2. 「Description」：説明文

　「Bundle ID」：アプリ固有の名前

　　　　　　　　ドメイン名を逆さまにした「com.domainname.appname」などが推奨。

　　　　　　　　Titaniumの設定でも使う

Provisioning Profileの作成
1. Developerサイトから[Provisioning Profiles]-[Distribution]-右上の[+]をクリックします。

2. 指示に従ってすすめていく。前回までで登録した、Developer、AppID、デバイスを選択する。全て入力したらGenerateしてPROVファイルをダウンロードします。

Titaniumでアプリ開発(5)　開発デバイスの登録

1. 前回と同様にDevelopサイトへアクセスします。
2. Devicesから[+]をクリックし登録を開始します。
　Name：デバイス名（何でもOK）
　UDID：デバイスとiTuneをつなげて確認
　　　　→シリアルNoのとこをクリックすると変わります
　　　　→右クリックでコピー可です

3. Submitして確定させます。

アカウント1つにつき、100個までデバイス登録できるそうでsy。

2013年4月26日金曜日

Titaniumでアプリ開発(4)　証明書の取得と登録

@yktmnbさんの全体図を拝借。

1. Macで[アプリケーション]-[ユーティリティ]-[キーチェーンアクセス]を起動し、「証明書署名要求ファイル(CSRファイル)」を生成する。

下記サイト参照

http://www.adobe.com/jp/devnet/flash/articles/iphone_flash_1.html#articlecontentAdobe_numberedheader_2

2. iPhone Developer Programで1.で作ったCSRを登録

3. 登録すると証明書がダウンロードできるようになるのでダウンロード。

4. 3. でダウンロードした証明書をダブルクリックするとインストールされる。
キーチェーンアクセス

[2013/4/27追記]
4.の証明書をデスクトップなどに書き出しておく必要あり。

あとやることは・・・
・iPhoneのデバイス情報の登録

・AppIDの取得
・Titanium Studioプロジェクトの設定
・Provisioning Profilesの登録

わりと大変？

2013年4月23日火曜日

Titaniumでアプリ開発(3)　Developer登録

iPhoneにアプリを転送するにはDeveloper登録が必要です(年8400円)
https://developer.apple.com/jp/

登録するとメールでIDが届きます。メールのIDをクリックしてアクティベート!
が、失敗。赤線部分をクリックして確認してみます。

問い合わせしないといけないらしい。。。

日本語でもOKだそうです。

[2013/4/25追記]
どうやらAppleIDをローマ字表記にして、Developerサイトと紐付けしないといけないようです。

Titaniumでアプリ開発(2)　Hello Worldを表示する

がんばって環境構築したら、HelloWorldを表示してみます。
右クリック-[New]から[Titanuim Project]を選択し、プロジェクトを作成。

1. app.jsを開く
2. コーディング
　・windowの作成
　・viewの作成
　・labelの作成
　・labelをviewに追加
　・viewをwindowに追加
3.iphoneシミュレータを起動

HelloWorldが表示された。
簡単!

参考：http://dotinstall.com/lessons/basic_titanium

2013年4月16日火曜日

Titaniumでアプリ開発(1)　環境構築

アプリ作ってみたいと思いJSで手軽に作れるということで、Titanumについてちょっと勉強してみます。
まずは環境構築。

Titaniumとは？
iPhoneアプリ→Objective-C
Androidアプリ→Java
Titanium→Javascriptで開発が可能に!

出来ること
・加速度センサや電子コンパスなどのハードウェアへアクセス
・音声や動画の再生・録画・録音
・HTTPClientによる通信
・SQLiteによるデータベース処理

→無料で利用出来る

参考にするサイト

Titanium

APIリファレンス
Titanium MobileではじめるiPhoneアプリ開発

登録: 投稿 (Atom)