明日もデザインで食べていこう![30]WebデザイナーでもiPhoneアプリを!──はじめてのTitanium Studio(1)/秋葉秀樹

投稿:  著者:  読了時間:11分(本文:約5,100文字)


こんにちは、秋葉です。今回から数回にわたって、Titanium Studioを使って簡単なiPhoneアプリを作ってみたいと思います。iPhoneアプリの導入から、簡単なプログラムを使って、最後はiPhoneのカメラで撮影した写真をサーバに投稿して地図に配置します。

前提として、最後は実機のカメラ使うのですが、iPhoneのシミュレータだと撮影ができないので、撮影以降はiPhone実機を使わないといけません。そのためにはiOS Developer Program(有料)に参加している必要があります。

ひとまず簡単なデモなら、iPhoneシミュレータだけでOKです。つまりアプリを実機で試す前までは、わざわざお金を払って勉強する必要はありません。数回にわたってやってみようと思った方は、自己責任でiOS Developer Programに登録してください。

最後の回あたりでは簡単なPHPプログラムの紹介もして、サンプルアプリを通じて、全体の流れがわかるまでの理解を深めましょう。

本記事はWebデザイナーの方向けなので、プログラム言語が分からない方を対象としています。




iPhoneのアプリは、Xcodeという開発環境で開発しプログラム言語はObjective-Cという言語が必要です。これらの言語や環境は、Webデザイナーにとって最初の敷居が高いため、始めるにはなかなかの覚悟がいるのですが、Titanium StudioはJavaScriptを使って開発できるので、それに多少慣れて方にとってはスキルを活かせるメリットがあります。

しかも、Titanium Studio自体が開発環境になっているので、他の環境をあまり必要としません。コードヒントも充実しているので、スクリプトを学習して少しでも慣れてきたらその便利さが分かるでしょう。

私はMacを使っているので、その流れで解説します。前提として、iPhoneシミュレーターがインストールされているとして、今回の記事では実機は使わずにシミュレーターを使って表示の確認を行っていきます。

◎導入

まずは公式サイトにアクセスして、アプリケーションをダウンロードします。
< http://www.appcelerator.com/products/titanium-studio/ >
から右上のボタン(Download Titanium)

さらにアカウントを作ります
→ < http://akibahideki.com/digicre/20120305/fig-01.png >

さて、テスト実行までに大まかな流れですが、まずはここまで進むことを目標にしましょう。

1)ダウンロード/インストール
2)新規プロジェクト(Create Projectボタンを押す)
3)プロジェクトの種類を選択(Titanium Mobile Projectを選択)
4)新規プロジェクトの設定(名前、App idを決める)

では、ここまでの流れを細かく見てみましょう。

1)ダウンロード/インストール

進んでいくとダウンロードが可能なので、そのままインストールまで行います(このあたりの手順は他のダウンロード→インストールとそんなに変わりありません)。インストールが終わったらまずはアプリを起動します。

2)新規プロジェクト(Create Projectボタンを押す)

アプリを一つ作るたびに「プロジェクトを作る」という考え方を覚えておきましょう。

ここで新規プロジェクトを作ると、Titanium Studioで作るアプリのデータなどがどこに保存されるか、指定をします。プロジェクトの場所はプロジェクトごとに変えることも出来ますが、慣れないうちは同じフォルダの中で複数のプロジェクトを作っていってもいいでしょう。

画面左にCreate Projectボタンがあるので、それをクリックし、設定画面に入ります。
→ < http://akibahideki.com/digicre/20120305/fig-02.png >

3)プロジェクトの種類を選択(Titanium Mobile Projectを選択)

ここで図の通り色々な種類のプロジェクトがあるので、「Titanium Mobile Project」を選択して進みます。
→ < http://akibahideki.com/digicre/20120305/fig-03.png >

4)新規プロジェクトの設定(名前、App idを決める)

初めて使う人は、おそらくここでスムーズに進まないことがあります。図ではあえてAndroidのSDKをインストールしていないので、画面の上部に「Missing the Android SDK」と表示されているのが分かるでしょう。 Android SDKがインストールされていない、あるいはTitanium Studioが認識していないとこう出ます。

iPhoneアプリ開発には、iOSのSDKをインストールしていないとこの先に進めません。

インストール手段は色々と記事にされていますが、何となく一番やりやすかったのが、この新規プロジェクトの設定ウインドウ内「Set-up/Configure SDKs」のリンクをクリックしてiOSの欄にある「Configure」ボタンを押してみると、背面のウインドウ「Dashboard」内に、SDKをダウンロードできるボタンが見えます。

このあたりの流れに従って進めていってください(ダウンロードにはある程度時間がかかります。コーヒーでも飲んで待ちましょう)。私の経験上ですが、SDKをダウンロードしてインストールしたら、Titanium Studioも再起動したほうが良さそうです。

さて、無事SDKもインストールが出来たら、もう一度新規プロジェクトを設定します。先ほどのプロジェクトの画面でProject nameに「test_project」としてApp Idに「test_id」としておきましょう。

本来はもっと色々な設定があるのですが、今回はこの2つだけ入力して「Finish」ボタンを押します。新規プロジェクトのフォルダが作られたりしています。
→ < http://akibahideki.com/digicre/20120305/fig-04.png >

ウインドウの中にコードを記述できるタブ「app.js」が見えると思います。これがTitanium Studioでアプリを作るために、私たちがコードを打ち込むJavaScriptファイルとなります。
→ < http://akibahideki.com/digicre/20120305/fig-05.png >

さていよいよ実行してみましょう! 画面上部の緑色の再生ボタン、あるいは上部メニュー「Run」→「Run」を押して実行させます。すると初回は「どのシミュレータを使いますか?」と聞かれますので、iPhone Simulatorを選択しましょう。
→ < http://akibahideki.com/digicre/20120305/fig-06.png >

画面の下に文字が色々と表示されますが、しばらく待っているとiPhoneシミュレータが起動して、Titaniumで最初から用意されているアプリが立ち上がると成功です。
→ < http://akibahideki.com/digicre/20120305/fig-07.png >

マシンの種類などにもよりますが、30秒近くかかったかもしれません。これは最初だけ、アプリに必要なファイルを書き出すので、2度目からはここまで時間はかからないでしょう。

2度目以降にうまく実行できない、あるいはエラーが起こるといった場合、プロジェクトのフォルダを見て、「build」以下のファイルをすべて削除するとうまくいくケースがあります。
→ < http://akibahideki.com/digicre/20120305/fig-08.png >

ここまでできたらまずは一安心。Titanium Studioでは学習しやすいように、新規プロジェクトを立ち上げると、基本のプログラムがもうすでに用意された状態で学習が始められるような親切設計になっています。

アプリを見てみましょう。画面下のタブにはtab1、tab2が用意されていて、どうやら2画面をタブによって切り替えられるようなアプリのようになっています。私たちはここから改造していったらいいんですね。

◎プログラムをちょっと触ってみよう

ここからはJavaScriptをはじめ、プログラム未経験の方のための解説となります。app.jsを見ましょう。

●タブを調べてみる

5行目、
var tabGroup = Titanium.UI.createTabGroup();

とありますが、これはアプリ下部(※)に出ているタブをまとめる機能だと思ってください。タブの場合、まずはグループを作って、その中に個別のタブを追加するという流れが一般的です。
※(iPhoneの場合は下部、Androidの場合は基本上部に表示されます)

var tabGroup とは「変数を宣言しますよ」というもので、その中にタブのグループが代入されています。

15行目に var tab1 = Titanium.UI.createTab({ ...とありますが、これが、個別のタブ設定です。

さらに38行目にもvar tab2 = Titanium.UI.createTab({ ...とありますので、結局2つのタブを作っているわけです。

2つタブの設定ができました。ところがこれではまだ表示されません。

59行目以降のプログラムを見ると、
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// open tab group
tabGroup.open();

となっています。タブグループにaddTab、つまり追加して、そのグループをopenすることで使えるようになる、といった流れとなります。

●文字を入れ替えてみる

21行目を見てみましょう。

var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

今度はタブではなく、ラベル(つまり文字を表示する場所のような)の設定をしています。Titanium.UI.createLabelの中には、それぞれ文字を表示する設定がしてあります。

なんとなく、WebデザイナーとしてはCSSを彷彿させられる気がしますが、多分みただけで「意味」はわかると思います。つまりCSSが分かっている方ならなんとなく理解できるレベルですね。

text:'I am Window 1'の中の文字を変更しましょう。
「はじめてのiPhoneアプリ」と入れ替えましょう。
どうせなら、色も変えましょう。

var label1 = Titanium.UI.createLabel({
color:'#f00',
text:'はじめてのiPhoneアプリ',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

colorとtextだけ変更しました、コマンド+Sでapp.jsを保存します。実行しましょう。
→ < http://akibahideki.com/digicre/20120305/fig-09.png >

さて、次回はこのプログラムを少しずつ変えていき、カスタマイズしていきましょう。

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/ >

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign......多種スキルを持つ。Web標準技術だけに執着せず、すべてのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。