株式会社インフィニットループ PHPとスマホアプリ開発を行う札幌のシステム会社

技術ブログ

  1. トップ>
  2. 技術ブログ>
  3. 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件

2011年04月07日 (木)

著者 : 

初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件

どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。
初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。
JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、2週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。
ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。

そもそもTitanium Mobileとは?

Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。


iPhoneやiPad、Androidを対象とした開発が可能で、ひとつのソースコードでマルチプラットフォーム展開をすることができます。
開発に使う言語はWebアプリケーション開発でおなじみのJavaScriptです。プラットフォーム別にObjective-CやJavaを覚える必要はありません。
JavaScriptを使うからWebアプリケーションになるかというと、そんなことはありません。JavaScriptを使ってネイティブアプリケーションの開発ができます。具体的には、次のような処理を実装することができます。

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

しかも、これだけできてオープンソースソフトウェアです。商用・非商用を問わずに無料で利用可能です。一時期、iPhoneアプリはObjective-Cで開発したものじゃないと駄目だ、という話がありましが、今は解決済みみたいです。
開発環境のOSはWindows、Mac、Linuxどれでも大丈夫です。ですがiPhoneもAndroidもSDKのインストールが必須なことから、iPhone開発をしたい場合にはMac限定になります。
実例としては「もぐもぐエンターテイメント系Twitterクライアント MogSnap 〜We Love Mogmog!〜」というアプリケーションがTitanium mobileで作られたみたいです。


MogSnap PV v1.3 from KANTETSU WORKS on Vimeo.

このレベルのアプリケーションが作れるとなるとワクワクしてきますね。

実際のコード

とまあ、いろいろと書きましたが、実際どんなコードでどんなものが出来るのかって話ですよね。
新規プロジェクトを作成すると、以下のコードが生成されます。

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
var label1 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});
win1.add(label1);
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});
var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});
win2.add(label2);
//
//  add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();

これの実行結果が、次のとおり。

本当にJavaScriptでアプリケーションができてます。
さらにありがたいことに、Titanium mobileは充実したサンプルアプリケーションが公開されています。


ソースコードもGitHubにて公開されています。実際に自分でビルドして動作させることができます。なので、困ったときにはどの機能をどんな風にすれば再現できるのか確認できて助かりました。
ちなみに、僕が仕様を考えるところからはじめて2週間ほどで作ったのが、次のアプリケーションです。


簡単なサイコロ風アプリです。
グラフィックは見ての通り「お察し下さい」状態ですが、ログ機能や出目の範囲指定に個数指定、あとは乱数発生器にメルセンヌ・ツイスタを使うなど、ニッチな需要があるんじゃないかなと思って企画してみました。ボードゲームなどをやる人でもないと、まったく使わなそうですが。。。
企画を考えた時間やUIに悩んだ時間、サンプルアプリを作って勉強した時間などを除けば、プログラムをはじめてから一週間ほどでできました。
プラットフォームをiPhoneに絞ったからというのもありますが、JavaScript初心者が0から一週間でそれなりに形にできることを考えると、Titanium mobileのすごさが身に染みます。

CoffeeScriptやIDEによる快適な開発

CoffeeScript

今回、Titanium mobileの開発にCoffeeScriptを使ってみました。
CoffeeScriptとは、RubyやPythonに近い記述の言語でJavaScriptのプログラムができるという言語です。JavaScriptのコードにコンパイルが可能で、より効率的にJavaScriptの開発が可能になります。文法は「CoffeeScript基礎文法最速マスター | 株式会社インフィニットループ技術ブログ」という記事でまとめてみました。
あちこちで噂を耳にして気になっていたので、サイコロアプリのプログラムを始める際に導入してみましたが、とにかく書いてて気持ちいいです。
例えば、先ほど載せた自動生成されたJavaScript。CoffeeScriptだと次のように書けます。

# this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor '#000'
# create tab group
tabGroup = Titanium.UI.createTabGroup()
#
# create base UI tab and root window
#
win1 = Titanium.UI.createWindow(
title:'Tab 1'
backgroundColor:'#fff'
)
tab1 = Titanium.UI.createTab(
icon:'KS_nav_views.png'
title:'Tab 1'
window:win1
)
label1 = Titanium.UI.createLabel(
color:'#999'
text:'I am Window 1'
font:{fontSize:20,fontFamily:'Helvetica Neue'}
textAlign:'center'
width:'auto'
)
win1.add label1
#
# create controls tab and root window
#
win2 = Titanium.UI.createWindow(
title:'Tab 2',
backgroundColor:'#fff'
)
tab2 = Titanium.UI.createTab(
icon:'KS_nav_ui.png'
title:'Tab 2'
window:win2
)
label2 = Titanium.UI.createLabel(
color:'#999'
text:'I am Window 2'
font:{fontSize:20,fontFamily:'Helvetica Neue'}
textAlign:'center'
width:'auto'
)
win2.add label2
#
#  add tabs
#
tabGroup.addTab tab1
tabGroup.addTab tab2
# open tab group
tabGroup.open()

ループなどがないのであまり変わらないですが、例えばメソッドの引数としてオブジェクトを渡すところで、コンマやオブジェクトの括弧を省略できてます。
ただでさえ簡単にアプリ開発ができるTitanium mobileで、さらに効率よくプログラム出来ちゃうんですから、もう使わない手はありません。
 

Titanium Studio

さらに、先日Titanium StudioというIDEのプレビュー版が公開されました。
Titanium Studio 1.0プレビュー版とデバッガをリリース « Appcelerator Developer Center
僕はvimが好きなのでTitanium Studioはまだ試していませんが、なかなか便利そうです。書いててとても気持ちのいいCoffeeScriptですが、Titanium Studioの恩恵をあまり受けられなくなるのが難点ですね。
どちらのスタイルで開発するにせよ、プログラマにとってかなり心地のよい環境で開発できそうです。

Titanium mobileの得意分野と苦手分野

ここまでTitanium mobileを褒めちぎってきましたが、やはり得手不得手があります。
例えばゲーム開発には向かないです。特に、リアルタイム性の高いものや、3Dなどは厳しいですね。
また、メモリ管理ができないので、どうしても普通に作ったアプリよりも性能に限界があります。デバイスの性能をフルに引き出したければ、やはりデバイス個別にプログラムする必要があります。
逆に言えば、メモリ管理をしなくていいというのが、Titanium mobileの強さでもあります。一般的なツール系のアプリや、フロントエンド用のアプリなど、そんなにメモリを気にしなくていいものであれば、GCに任せてしまったほうが遥かに楽です。
Webアプリケーションでクライアント側をJavaScriptで書いていたように、Titanium mobileでフロントエンド部分をJavaScriptで書くことで、比較的楽にWebアプリケーションの専用アプリを作ったりできるんじゃないかなと思いました。

参考サイト・おすすめ勉強法

ということで、Titanium mobileおすすめです。趣味でやるにも簡単に始められる気軽さが魅力的ですね。
僕個人のおすすめの勉強法は、次のPDFを読むことです。
Titanium MobileではじめるiPhoneアプリ開発
スマートフォンアプリを作ろうというくらいなら、きっと何かしらスマートフォンを持ってると思うので、このPDFをさっくり眺めましょう。
何が出来るのか、どんな風にできるのか、簡単なイメージをつかめるはずです。
KitchenSinkを触るのもいいですね。
その後、実際にプログラムを始めたあとは、次のサイトが参考になりました。

あとは必要に応じてググってました。わりと簡単なことで詰まったりしてたので、「連載:Titanium Mobileで作る! iPhone/Androidアプリ|gihyo.jp … 技術評論社」を追って実際に作ってみるのもありだったかなーと今では思ってます。

24件のコメント

  1. […] 新着情報です。 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ […]

    2011年4月7日 16:47

  2. […] 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ […]

    2011年4月7日 22:48

  3. […] 展開をすることができます。 … ですがiPhoneもAndroidもSDKの インストールが必須なことから、iPhone開発をしたい場合にはMac限定になります。 …www.infiniteloop.co.jp/blog/2011/04/titanium_mobile/ […]

    2011年4月8日 03:31

  4. […] 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ (tags: iphone apps) […]

    2011年4月8日 07:00

  5. […] 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ […]

    2011年4月8日 07:26

  6. […] Reply田村耕太郎kotarotamura おい裕太とかチャンスだぞ。w 【追記】 ☆初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 iPhoneアプリは2週間で作れるとな!? […]

    2011年4月8日 10:24

  7. […] ■ 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ […]

    2011年4月8日 22:44

  8. […] anium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。初め てのお仕事として「Titanium M… original article […]

    2011年4月9日 01:16

  9. […] えた5日、中国各地で、紙で作られたiPadやノートパソコン、液晶テレ… 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ […]

    2011年4月9日 08:01

  10. […] 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ. […]

    2011年4月9日 23:13

  11. […] 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ […]

    2011年4月10日 05:08

  12. […] 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 […]

    2011年4月11日 01:18

  13. […] ■ 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ […]

    2011年4月11日 22:33

  14. […] Posted 初心者でも2週間でiPhoneアプリが作れちゃう. […]

    2011年5月10日 15:02

  15. […] 株式会社インフィニットループ技術ブログ を参考にしました。 タグ: Androidアプリ, iPhoneアプリ, javascript, objective-c, titanium mobile, オープンソース, スマートフォン ショートURL:http://shinofa […]

    2011年6月1日 21:22

  16. […] 30. ずるっこ! 31. 覚えておくと必ず役立つ生活の裏ワザ20選まとめ 32. 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい 33. クレジットカードが驚くほど良くわかる、まとめ記事のまとめ 34. […]

    2011年11月25日 17:20

  17. […] 初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 […]

    2012年6月25日 19:58

  18. […] ・初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 […]

    2012年9月17日 02:14

  19. […] ・初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 […]

    2012年9月17日 16:53

  20. ご質問です。iPhoneアプリ開発をXcodeかTitanium Mobileではじめるか悩んでいたらこのブログを拝見いたしました。2012年12月現在、プログラミング初心者がこれからアプリを開発していくにあたりどちらがオススメでしょうか。ちなみにそんなに難しいものを作ろうとは考えておりません。ほぼ静的で、ゴールは簡単なカジュアルゲームが作れたらいいなと思っております。もしよろしければご返答いただけると幸いです。

    2012年12月13日 20:24

    投稿者 : matukou
  21. matukou さんコメントありがとうございます。
    Titanium Mobile 勉強中の take がお答えいたします。

    Titanium Mobile 向けにライブラリが移植されており、込み入ったものでなければ比較的容易に開発が可能だと思います。
    http://developer.appcelerator.com/blog/2011/09/gaming-comes-to-titanium-introducing-the-box2d-module.html
    これとは別に、公式でゲームエンジンが開発されていますが、まだ正式にリリースされていません。
    http://lanica.co/about/platino/
    個人的には、 Titanium Mobile をお勧めします。

    JavaScript と Titanium Mobile を学ぶには、次のサイトが参考になります。
    ・JavaScript
    – JavaScriptの基礎
    http://dotinstall.com/lessons/basic_javascript

    ・Titanium Mobile
    – 小さな Titanium Mobile の読み物 (改訂版)
    http://ti.imthinker.net/
    – Titanium Mobileの基礎
    http://dotinstall.com/lessons/basic_titanium
    – Titanium Mobileユーザー会
    http://titanium-mobile.jp/

    2012年12月25日 21:03

    投稿者 : take
  22. Picking out Quick Products In fashion news | Home | FarmLocal

    初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ

    2013年9月3日 12:51

  23. webpage

    初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ

    2013年9月28日 22:23

    投稿者 : webpage

  • このブログについて

    このブログは、札幌市の「株式会社インフィニットループ」が運営する技術ブログです。
    お仕事で使えるITネタを社員たちが発信します!

    最新の記事