FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

MacOSでKitchen Sinkを試してみた 〜ソースコードが最強のドキュメント〜

こんにちは!@kakeyangです!



今回はKitchen Sinkについて調べてみましたので、紹介したいと思います。

Kitchen SinkとはTitanium Mobleのサンプルコードです。



f:id:k_chindamaikul:20150722155221p:plain


アプリ自体が公開されているわけではなく、あくまでもTitanium Mobileの開発者に捧ぐ、

ひと通りのI/Fを網羅したサンプルコードです。

※これを書きながら、椎名林檎さん好きだぁって思ってます。



スマートフォンアプリをTitanium Mobileを使用して開発する際、

Titanium Mobileで実現したい動作をKitchen Sinkで探し出し、その部分のソースコードを追えば、

書き方が分かってしまうという算段なんですねぇ。便利!

Titanium mobileとは

スマートフォンアプリのクロスプラットフォーム開発ツール

iPhoneandroidのアプリを共通のソースコードで実装できるのがウリです。

2011年5月現在のスコープとしては、

まで。IDEではありません(2011年5月14日現在)。



ウィンドウやタブといった画面素材をオブジェクトで定義し、

ユーザアクションをイベントハンドラとして登録。

各オブジェクトのデザインは、ほぼCSSと同じテイストでプロパティとして定義することで、

アプリを実装していくイメージです。

今のバージョンではHTMLは使用しません。


メリット

  • iPhoneandroidのアプリのソースコードを共通化できるほとんどのロジックを共通化可能。
    言語はjavascript
    「戻るボタンは、iPhoneは左上にあるけど、androidは端末のボタンを使用」
    のように、I/Fの差異を条件分岐するだけでOK。
  • 一部をネイティブコードで実装可能
    処理を高速化させたい部分だけObjective-Cで書く、的なことも可能。
  • Objective-Cの学習コストをカットできる
    癖がある言語なんで、僕は出来る限り関わりたくないですw


デメリット

  • 演算処理速度やメモリ使用量にやや難有り
    画像処理や音声処理など、ゴリゴリ演算が必要系は苦手。
  • 標準でのSDK適応が不可
    AdMobに限っては、開発元がモジュールを提供しているので使用可能。
    他の広告配信(AdMaker)やアプリ内計測は使用不可と思ったほうが良い。


向いているアプリ


向いていないアプリ

  • (本気の)ゲーム系
    動きがぎこちなくなるでしょう。
  • 大量画像を使用する系
    単純に重くなるでしょう。


Titanium Mobileをインストールする

前提環境

下記以外の環境では動作を確認していません。


インストールと起動

こちらを参考にしてくださいwww


Kitchen Sinkをダウンロード

こちらを参考にしてくださいwww


ちょっとはまったとこ

色々とエラーが出て、Kitchen Sinkのソースコードをダウンロードしてきても、

すぐに動作を確認することができませんでした。



覚えている限りのエラーとその対策を列挙します。

Titanium、iOS SDKandroid SDKの全てのバージョンを最新にしておくことは

大前提のようです。


1. コンパイルエラー(iPhone


IOError: [Errno 2] No such file or directory: u'/Users/UserName/Desktop/appcelerator-KitchenSink-7b502db/KitchenSink/build/iphone/Classes/ApplicationRouting.h'

右上に"New Mobile SDK available"が出ているはずですので、これをクリックし、

SDKをアップデートします。

その後、プロジェクトを再インポートすることで回避されました。


2. コンパイルエラー(android


Failed installing com.appcelerator.kitchensink: pkg: /data/local/tmp/app.apk

SDK Manager でAPIパッケージをインストールしたら解消されました。

/tools/android

を実行することで自動的にインストールされます。


3. android SDKのパスを指定しろとうるさい

ので、Andorid SDK をダウンロードして適当なディレクトリに展開し、

右上「Perspectives」のひとりアイコンからSDKのパスとして展開したディレクトリを指定しました。

すると、「Couldn't find adb .....」的な感じで怒られてしまいました。



これに関しては、以下の記事にお世話になり回避しました。

http://jmblog.jp/archives/744


4. コンパイルエラー(iPhone


[ERROR] Error: Traceback (most recent call last):
File "/Library/Application Support/Titanium/mobilesdk/osx/1.6.2/iphone/builder.py", line 1091, in main
execute_xcode("iphonesimulator%s" % link_version,["GCC_PREPROCESSOR_DEFINITIONS=__LOG__ID__=%s DEPLOYTYPE=development TI_DEVELOPMENT=1 DEBUG=1 TI_VERSION=%s" % (log_id,sdk_version)],False)
File "/Library/Application Support/Titanium/mobilesdk/osx/1.6.2/iphone/builder.py", line 1012, in execute_xcode
output = run.run(args,False,False,o)
File "/Library/Application Support/Titanium/mobilesdk/osx/1.6.2/iphone/run.py", line 39, in run
sys.exit(rc)
SystemExit: 1


これが一番しつこかった。。。

http://stackoverflow.com/questions/4588749/titanium-wont-run-iphone-android-emulator

こちらにあるようにTitanium mobile SDKの最新バージョンを所定の

ディレクトリに配置すると、やっと正常にコンパイルできました(T_T)

f:id:k_chindamaikul:20150722155250p:plain



サンプルを使用したコーディング



Kitchen Sinkは画面とファイルが一対一になっています。



実際にアプリケーションを実装する際には、

Kitchen Sinkから必要な素材を探し出し、画面タイトルをもつファイルを検索すれば、

どのように使用できるかがわかります。



例えば、以下のようなスイッチはswitch.jsで表現されます。

f:id:k_chindamaikul:20150722155314p:plain

で、ソースコードは以下のようになります。


//
// BASIC SWITCH
//
var basicSwitchLabel = Titanium.UI.createLabel({
   text:'Basic Switch value = false' ,
   color:'#999',
   font:{
   fontFamily:'Helvetica Neue',
   fontSize:15
},
textAlign:'center',
top:10,
height:'auto'
});

var basicSwitch = Titanium.UI.createSwitch({
   value:false,
   top:30
});

basicSwitch.addEventListener('change',function(e)
{
   basicSwitchLabel.text = 'Basic Switch value = ' + e.value + ' act val ' + basicSwitch.value;
});