kaz_konno's blog: walkthisway

Titanium Mobileの事など。

iPhoneアプリの起動画面でローディングを出す方法

初心者向けのiPhone用Tipsです。

Flashをやってきた人達には当たり前のように付ける起動時のローディングをTitaniumで実現する方法を紹介します。

ソースはこちらです。https://github.com/KAZUAKI/StartupLoading

f:id:kaz_konno:20120221210555p:image

タブがあるアプリでもやり方は簡単です。
ローディングビューを出している間だけ、タブを表示するタイミングを遅らせているだけです。
画像データなどを先にダウンロードさせるタイプのアプリなら、処理が終わったらタブを開くようにすれば良いでしょう。

試してみてください。

Ti.tokyo.GIG 2012 最高でした！

f:id:kaz_konno:20120124000621j:image

皆さん、お疲れさまでした。おかげさまで無事Ti.tokyoGIGを開催することができました。
これまでで最も濃い内容のイベントになったかと思います。


プレゼンをしていただいた皆さん、ビデオレターをくれたJeffさん、Boydleeさん、Sharryさん、特に遠方からこのイベントに駆けつけてくれた皆さん、本当にありがとうございました。感謝の気持ちでいっぱいです。


イベントの詳細については、既に参加者の方々がブログ等でレポートしていただいているのでここでは割愛させていただきます。
Titanium関連のニュースは、@donayamaさんが始めた「Titanium News」サイトを見れば全て把握できると思います。
Titanium News


実は、今回のGIGのコンセプトは、「世界との繋がり」でした。
これまでの日本国内のTitanium関連の情報を見ていて感じていたこと、それは英語圏からの孤立です。
言語の違いがあるのは仕方の無いことですが、英語圏からは日本語圏はあまり見えていませんでした。それは単純に日本語を理解できないからですが、私たちも英語圏に向かって、積極的に英語でアピールすることも無かったかと思います。
そのため、どうも日本語圏だけ独自にTitanium関連の情報が交換され、発展してきているように感じていました。


そんな時、 @astronaughtsさんが「Titanium Advent Calendar 2011」を立ち上げてくれました。素晴らしい企画でした。そこに掲載された内容は、世界からも注目されるに値する様々なテクニックやノウハウが含まれていました。


私は、以前から海外のTitaniumデベロッパの情報に常にアンテナを張っていたので、日本のレベルは世界でも通用するものが多くあると感じていました。そして、実際にいくつかの情報は世界中のTitaniumデベロッパに伝播しました。それを見ていて、もっと日本から情報を発信して世界にアピールしていなければと思いました。


@learningtiのSharryさんの貢献が大きいと思いますが、日本の有益な情報をGoogle翻訳までして内容を理解しようとしてくれている海外のTitaniumユーザー達が出てきています。我々日本サイドも、今後は少し努力していかないといけないかと思います。


そうは言っても、簡単に現状が変わる訳ではありません。そこで、微力ではありますが、今回のGIGで少しでも「世界との繋がり」を感じてもらえる方法は無いかものかと模索し、キーパーソンである、Jeffさん、Boydleeさん、Sharryさんにビデオメッセージをお願いしました。
我々は世界のTitaniumコミュニティーの一員なんだと言う事を、もし少しでも皆さんに肌で感じてもらえることができたとしたら嬉しいです。（そんな風に感じることが無かったらすみません。）


長々と書いてしまいましたが、細かい事は抜きにして、とにかく楽しかったです。ありがとうございました！


皆さん、2012年もよろしくお願いします！
また次回もよろしくお願いします。


Ti.tokyo.gig slides
Ti Tokyo Meetup Jan 2012 - Learning Appcelerator Titanium
Featured dev – Kazuaki Konno - Learning Appcelerator Titanium


レポート記事が掲載されました！
Ti Tokyo GIG Meetup report - Learning Appcelerator Titanium

Ti.tokyo.GIG "Titanium新年会 2012" 開催します！

Ti.tokyo.GIG

f:id:kaz_konno:20120109002418p:image

「Titaniumユーザーで新年を祝いましょう」と言う事で、また開催します！

http://atnd.org/events/23775


今回で2回目です。
ものすごい勢いでユーザー数が増えているTitanium Mobileですが、まだ実質1年くらいしか経ってないんですねぇ〜。皆必死に情報を探していた頃がとても懐かしい。


参加登録を見ていると、とても濃いメンバーが集まるようなのでとても楽しみです。
年明けで皆さんお忙しいでしょうに、既に定員以上に参加登録していただいて光栄です。
実はスタンディングスタイルも考えましたが、3時間はきついと思うので着席のみとしました。希望者全員参加してもらうことができず申し訳なく思っています。


「GIG」とは、本来1回きりのライブやセッションなどに使われる場合が多いと思いますが、ライブ感やワクワク感のある濃い人達の集まりの意味を込めて付けました。


それでは皆さん、よろしくお願いします！

【Titanium Advent Calendar 2011：前座】Titanium Studioの怪

Titanium Advent Calendar 2011 Titanium Studio

【まえおき】
この記事は、@astronaughtsさん企画の「Titanium Advent Calendar 2011　ありがとう、2011。ありがとう、Titanium。」向けに書いています。すばらしい企画を立ててくれた@astronaughtsさんに感謝します。
※土壇場で勝手に前座名乗ってすみません（汗）
今後ともTitanium Mobileを盛り上げていきましょう。皆さんよろしくお願いします！



さて、今回の記事は、「Titanium Studioの怪」と題して、
〜Titanium Studioの実機転送でiOS5しかSDKバージョンが選べない時の対処法〜をご紹介します。


f:id:kaz_konno:20111130190858p:image

実は、Xcode 4.2.1を真っさらなLionに入れた後Titanium Studioをインストールしたところ、実機転送でiOS SDKバージョン選択でiOS5しか選べなくなってしまいました。この現象は「Run On Device」だけでなく、「Distribute」でも同様に発生していました。

現状iOS5の普及率はまだまだなので、今の時点ではiOS4.xもサポートしない訳にはいきません。
※iOS5の比率はまだ38%ぐらいらしい。参考サイト


困りました〜。
Lion入れるまえにハードディスクを初期化していたので、古いXcodeインストーラも残っていませんでした。
仕方ないので、とりあえずTitanium Studioの環境設定をよくよく見てみました。

f:id:kaz_konno:20111130192749p:image


あれ？あれ？
何故かiOS SDK Directoryが、シミュレータの場所になっているようです。
そして、Finderでその場所を見てみると〜、
f:id:kaz_konno:20111130192750p:image

確かにiOS5のシミュレータしかありません。
と言うことは、シミュレータがあれば良い？


次に、Xcode 4.2.1を起動して、Preferences内をよく見てみました。
Downloadsタブを開くと、下のようにiOS4.3のシミュレータをインストールできるようです。
f:id:kaz_konno:20111130192751p:image
早速インストールボタンを押してみました。約400MBほどがダウンロードされました。
そして、下のようにiOS4.3のシミュレータがインストールされました。
f:id:kaz_konno:20111130193911p:image


ここでTitanium Studioを再起動して、Run On Device画面を見てみると、、、
ちゃら〜ん！この通り！

f:id:kaz_konno:20111130193912p:image

これで4.3向けにもアプリが作れるようになりました！

※ちなみに、古いマシンから「iPhoneSimulator4.2.sdk」フォルダを持ってきたところ、iOS4.2も選べるようになりました。

更に、更に！

「iPhoneSimulator4.1.sdk」という名前のフォルダをシミュレータのあるフォルダに作ってみたところ〜、、、。
もちろん中身は空っぽです。
f:id:kaz_konno:20111130201009p:image

すると、、、
f:id:kaz_konno:20111130201318p:image
SDKバージョンの選択で4.1が選べます！


推測ですが、XcodeでDeployできるバージョン範囲なら、この空フォルダを用意するだけでそのバージョン向けのアプリが作れるのではないでしょうか。あくまで推測です。

手元にiOS4.1の実機が無いので本当に4.1で動作するかは分かりません。もし持っている人がいたら、是非試して教えてください！


以上、「Titanium Studioの怪」についてのお話でした。


12月1日から25日までの間、全国のTitaniumデベロッパの皆さんによるブログリレーが始まります。
あ〜、もうすぐ1日になりますね〜。
それでは参加者の皆さん、頑張ってください。
楽しみにしてます！

【Titanium Advent Calendar 2011】急遽前座で参加させていただきます！

f:id:kaz_konno:20111130223113p:image
12月1日まで残り1時間半。
「Titanium Advent Calendar 2011」に参加できなくて残念とツイートしたら、
@astronaughtsさんが期間延長を申し出てくれました。しかし、せっかくのルールを曲げてもらうのも申し訳ないので、急遽前座として、Titanium Mobileに関する記事を書かせていただきます！

たいした記事かけませんが、よろしくお願いします。

JavaScriptでモジュールを作ろう！

モジュール Tips

f:id:kaz_konno:20111125002537p:image

マーケットプレイスを良く見て行くと、様々なモジュールやテンプレート、デザインなどが揃っています。英語が分からない人でもスクリーンショットなどを見ればどんなものなのか分かるはずなので、是非じっくり回遊してみてください。


さて、Titanium Mobile用のモジュールを作るには、通常Objective-CやJavaで書く事になりますが、実はJavaScriptでもモジュールを作ることができます。実際、マーケットプレイスにJavaScriptで書かれたモジュールもいくつか見つかります。


これまで自分には無関係と思っていた人も、アイデア次第ではJavaScriptベースのモジュールで小遣い稼ぎができるかもしれませんよ〜！


モジュールの一番の目的は、Titanium Mobileに足らない機能をモジュールによって拡張することです。しかし、それ以外にライブラリ的などのように、開発の効率化を図るためにもとても重宝します。


例えば、自分用に、機能別のモジュールを用意しておいて、要所要所で機能別のモジュールをパーツとして設置してアプリをくみ上げていくということが可能です。JavaScriptでモジュールを作る場合、CommonJSスタイルにするのでデータの受け渡しさえ間違えなければ、様々なプログラムに設置することができるはずです。


それでは実際に作ってみましょう。
今回作るのは、ローディング画面からフェードアウトしてアプリトップに遷移するフェードアウトアニメーションモジュールです。
仕組みはローディング画像（Default.png）と同じ画像を表示し、そのViewにフェードアウトアニメーションを付けることで実現します。
iphone/Default.pngの画像と同じだからと言って、iphone/Default.pngを指定しても、アプリからは見えない場所なので、必ずResources以下もしくはimages等任意のフォルダを作って同じ画像を設置してください。



var HomeWindow = require('HomeWindow').HomeWindow;
HomeWindow().open({

	modal : Ti.Platform.osname === "iphone",

	modalTransitionStyle : Ti.UI.iPhone.MODAL_TRANSITION_STYLE_CROSS_DISSOLVE,

	navBarHidden : true

});

modalで実は上記のように設定するとフェードアウトアニメーションできますが、rootウィンドウでmodal設定をするとwarningが出て不安定になるので、ちょっと危険かもしれません。

実際モジュールにしなくても実現できるのですが、敢えてモジュールにしてみます。
例えば、自分用のツールパックモジュールのようなものを予め作っておき、必要に応じて利用するのも良いかもしれません。


モジュールベースの作り方
preview版のTitanium Studioでは、既に新規モジュール開発テンプレートが選べるようになっています。近い将来安定板にも反映されると思われます。それまでの間は、以下のようにコマンドラインでベースを作成します。

titanium create --type=module --platform=iphone --id=com.kazkonno.newtools --name=newtools

f:id:kaz_konno:20111125012256p:image:left

このような構成でベースが出来上がります。
Objective-Cでモジュールを書く場合は、.xcodeprojが付いたプロジェクトファイルを開いて、Xcodeで開発をしていくことになります。


JSモジュールの書き方
書き方については、最後に明記します。


JSモジュールのビルド前準備

JavaScriptでモジュールを作る場合は、「assets」フォルダに、先ほどidに設定した名称のファイルを設置します。


今回は、com.kazkonno.newtools.jsというファイルをassetsフォルダに設置します。
ファイル名がとても重要です。必ずidで設定した名前にしてください。
f:id:kaz_konno:20111125013112p:image


JSモジュールのビルド

設置したら、コマンドラインツールでプロジェクトフォルダに移動してビルドします。

./build.py

ビルドに成功すると、「com.kazkonno.newtools-iphone-0.1.zip」という圧縮ファイルができあがります。


JSモジュールの設置

ここまで出来たら、通常のモジュールと同じようにインストールしてください。
汎用的なモジュールなら、/Library/Application Support/Titanium/modules/iphone/フォルダ内設置してください。
特定のプロジェクト用であれば、アプリのプロジェクトフォルダ内に設置してください。
モジュール設置方法についての参考ページ：Repeated BackgroundImageモジュールが素晴らしい！


JSモジュールの書き方

呼び出し側はこんな感じです。



	var newtools = require('com.kazkonno.newtools');

	Ti.API.info("module is => " + newtools);



	var bgOption = {

		backgroundImage : 'loading.png',

		waitTime : 2000,

		fadeTime : 600,

		window : self

	};
	var indOption = {

		loading : true, // loading indicator

		labelon: true, // loading label

		label : L('loading'),

		type: 2, // 0: BIG, 1: DARK, 2:PLAIN

		width: 20,

		height: 20,

		bottom: 140		

	};
	var fader = newtools.loadingFadeView(bgOption, indOption);

	self.add(fader);

是非皆さんもJSモジュールで開発効率化を試してみてください。



[※補足]

呼ばれる側のcom.kazkonno.newtools.jsファイルはこんな感じです。



exports.loadingFadeView = function(bgOption, indOption) {

	var self = Ti.UI.createView();

	self.backgroundImage = bgOption.backgroundImage;
	if(indOption.labelon) {

		var label = Ti.UI.createLabel({

                    .

                    .

                    .

                    .

               return self;

};

このファイルに、exports.xxxで設定して行けば、複数の機能モジュールを組み込むことができます。アプリ容量には十分気をつけてください。

お客さん、つまりiPhoneを使っている人達の多くは、無線LAN設定ができなかったり、iTunes同期もしていなかったりするので、私自身は、基本的に3G回線で落とせる20MB以内を目安にしています。

Repeated BackgroundImageモジュールが素晴らしい！

モジュール

f:id:kaz_konno:20111116032042p:image:left
f:id:kaz_konno:20111116023752p:image




https://marketplace.appcelerator.com/apps/823
今回は、AppceleratorのMarketplaceでモジュールをリリースしている数少ない日本人デベロッパの一人@atsusyさん作の「Repeated BackgroundImage」モジュールを紹介します。


このモジュールを使うと、名前の通り、背景画像をリピート配置することができます。パターン柄の背景画像には最適でしょう。


更に、私は知らなかったのですが、ナビゲーションバーのbarImageにも利用できます。

Titaniumでアプリをデザインする際、barColorを指定することで簡単に色合いを変更することはできます。
しかし、こんな感じでテカリの付いた規定のグラデーションを変更することができません。

f:id:kaz_konno:20111116032043p:image:left
※例) barColor: '#777'



個人的にはマット系なグラデーションを使いたい。そのため、自分でbarImage用に下のような画像を用意していました。

f:id:kaz_konno:20111116031105p:image


もしWebだったら、下のような幅の狭い画像を用意してCSSでリピートするのが普通だと思います。

f:id:kaz_konno:20111116031106p:image

ところが、Titaniumでは画像のリピート配置に対応していません。
そこでRepeated BackgroundImageモジュールの出番です。


モジュールの使い方は簡単です。

1) Repeated BackgroundImageモジュールの購入。
　購入にはPaypalアカウントが必要です。

2) 購入処理が完了すると、MY PRODUCTS内に「Repeated BackgroundImage」モジュールが登録されます。
f:id:kaz_konno:20111116032044p:image

3) MY PRODUCTS内の「Repeated BackgroundImage」モジュールアイコンをクリックすると、ダウンロードすることができます。（2011/11/16日現在では「jp.msmc.repeatedbackgroundimage-iphone-1.2.zip」というファイルがダウンロードされるはずです。）

4) このzipファイルを下の自分のTitaniumプロジェクトフォルダに移動します。
f:id:kaz_konno:20111116032045p:image

5) tiapp.xmlを編集します。
初期の状態では、となっているので、以下のように編集します。


jp.msmc.repeatedbackgroundimage

6) barImageの設定を変更します。
　barImage: 'navbg.png'と指定しているところを以下のように修正します。

repeatedBarImage:'navbg.png'

とっても簡単です！
※このモジュールでは、require指定は必要ありません。

この後、エミュレータで動かしてみてください。
ビルドを行うと、zipファイルだったモジュールが自動的に以下のように展開されます。
f:id:kaz_konno:20111116032046p:image

ビルド時、コンソールに以下のログが出ているか確認してください。

[DEBUG] Detected module for iphone: jp.msmc.repeatedbackgroundimage 1.2 @ /Users/kazkonno/Documents/Titanium Studio Workspace/NewTemplate/modules/iphone/jp.msmc.repeatedbackgroundimage/1.2


[INFO] Detected third-party module: jp.msmc.repeatedbackgroundimage/1.1

この通り、barImageに画像をリピート配置することができました！
f:id:kaz_konno:20111116032047p:image





さて、ここからが重要です！


TitaniumでbarImageを利用している人なら皆知っている事だと思いますが、barImageを使っていると、背景画像の初回読み込み時に、ピカっとフラッシュします。画像の読み込み方が良くないせいだと思います。
もし気付いていない場合は良く見てください。

普段から仕事で開発に携わっている自分としては、このクオリティーはどうしても許せませんでした。そのため、自分でアプリを作る際は、navBarを使わず、自前のviewを作成して対応していました。

たまたま@atsusyさんからbarImageで利用できることを教えてもらい、試したところ同じ問題がありました。
しかし、＠atsusyさんに相談したところ、この問題をモジュールレベルで解決してくれましたーーーー！

＠atsusyさん、本当感謝です！ありがとうございました！

皆さんもAppStoreに出すアプリでbarImageを利用しているなら、現状のクオリティーに満足してはいけません。
ユーザーは細かいところが気になるものです。ユーザーに気持ち良く使ってもらうためにも、このRepeated BackgroundImageモジュールはオススメです！いや、必須だと思います！