Titanium Studio のインストールと設定

ホーム | JavaScript メモ | オブジェクト指向 | オブジェクト指向 続き | Aptana Studio | Titanium Studio のインストールと設定 | Hello プロジェクト | Creating Your First Titanium Apps 改 | ナビゲーションウィンドウ for iOS | book データを追加する


Titanium Studio

Mobile アプリの開発のために Aptana Studio から Titanium Studio へ切り替えます。 Aptana Studio では Mobile アプリを開発することができません。一方 Titanium Studio は Aptana Studio を買収して Aptana Studio + Mobile アプリ開発という 形になっています。これから順をおって Titanium Studio のインストールと設定方法を 説明していきます。なお Titanium はチタンやチタニウムのことですが、タイタニウムと発音 するのが正しいそうです。また Aptana Studio と Titanium Studio は Linux、Windows、 Mac OS X で同じように使えますが、iOS アプリを開発するためには Titaniuam Studio を Mac OS X にインストールする必要があります。Titanium Studio を Linux や Windows に インストールした場合は Android アプリだけが開発可能です。ここでは、iOS アプリと Android アプリの両方を開発するために Titanium Studio を Mac OS X にインストール することにいたします。



Aptana Studio のアンインストール

Aptana Studio をインストールしていた場合は、Titanium Studio をインストールする前に まず Aptana Studio をアンインストールしておきましょう。Mac をお使いの場合は、 appcleaner.softonic.jp/mac から AppCleaner をダウンロードしてください。AppCleaner を起動して表示されるパネルへ アプリケーションフォルダの Aptana Studio をドラッグします。本体だけで なく関連ファイルも削除するかどうかを聞かれますのですべて削除してください。削除したファイル はゴミ箱に移動されます。ここで一度 Mac を再起動してからゴミ箱を空にします。 再起動せずにゴミ箱を空にしようとしてもいくつかのファイルが起動中のため 空にできないでしょう。



Titanium Studio のダウンロード

Titanium Studio は Appcelerator という会社からリリースされています。 www.appcelerator.com にアクセスして Titanium (Developers) の DOWNLOAD FOR FREE をクリックしてください。

ダウンロードは無料ですが、登録が必要です。サイトの指示に従って名前とEメールを登録します 。次の画面では Download Titanium Studio から iOS と Android の両方のアプリが 開発できる Mac をダウンロードします。2014年1月12日現在の最新版は 3.2.0 です。



Titanium Studio のインストール

ダウンロードされた Titanium_Studio.dmg をダブルクリックして開いてください。そして Titanium Studio フォルダを Applications フォルダにドラッグしてコピーします。

Applications フォルダへのコピーが終われば Launchpad を起動して TitaniumStudio の アイコンをクリックします。次のようなアラートが出ると思いますが「開く」をクリックしなければ Titanium Studio を起動することはできません。

最初に今後作成するプロジェクトの保存場所を決めるパネルが表示されます。デフォルトではユーザの 書類フォルダの中の Titanium_Studio_Workspace フォルダになっています。慣れるまではこの ままのほうが良いでしょう。後で場所を変更できるように Use this as the default and do not ask again にもチェックはしません。

無事にインストールできれば、次のような Titanium Studio のウィンドウが開きます。



テキストエディタの設定

続けて Titanium Studio のテキストエディタの設定をします。デフォルトままでかまわない ようでしたら、この項目はとばしてももらっても差し支えありません。

Titanium Studio メニューで環境設定... を選ぶと Preferences パネルが表示されます。 typr fileter text と表示されているフィールドに emacs と入力してください。

Keys 項目を選択して Scheme を Default から Emacs へ変更しパネル右下の Apply ボタン をクリックしてください。これで Mac で標準になっている Emacs キーバインディングが使える ようになります。

続けてフォントサイズなどを設定します。emacs と入力したフィールドに今度は font と入力 してください。そして Themes 項目を選択します。好みで Editor Theme を変更します。 私は黒字に白文字で表示される Dark Studio を選びました。またフォントを変更する場合は Font フィールドの右側にある Select... ボタンをクリックするとフォントパネルが表示され ます。私は 11pt から 13pt に変更しました。最後に Apply ボタンをクリックしてから OK ボタンをクリックして Preferences パネルを閉じます。



FTP サーバーの設定

Web サイトの構築には興味がないという場合は、この項目をとばしてもらってかまいません。

HTML エディタ兼FTP クライアントとしても使えることは Titanium Studio の特筆すべき特色 だと思います。Window メニュー → Show View → Other... と進んでください。そして表示される Show View パネルで Studio → Remote を 選び OK ボタンをクリックします。

Titaniuam Studio のアプリケーションウィンドウに Remote タブが追加されます。地球の アイコンをクリックしてください。

次に現れる New Connection パネルで FTP サーバーの設定をします。パスワードの入力まで 終わったら取りあえず Test ボタンをクリックして無事に接続されているか確認しましょう。 接続が完了しているようでしたら最後の Remote Path の Browse.. ボタンをクリックして 設定してください。設定が終われば最後に OK ボタンをクリックします。

Remote タブに 設定した Connections のアイコンが表示されます。これをクリックすると サーバーのファイルが表示され、エディタで直接編集できるようになります。おぉなんと便利な。
しかしこのままではサーバーへファイルをアップロードしたりサーバーからファイルをダウン ロードすることはまだ出来ません。

では、ファイルのアップロードとダウンロードをできるようにしましょう。File メニュー → New → Project.. を選んで New Project パネルを開きます。そして Web → Project を選択して Next > ボタンをクリックします。

次の New Web Project パネルで Default Project を選んで Next > ボタンをクリック します。

そして Project name を決めて Finish ボタンをクリックしてください。

Project Explorer に設定した Web Project が表示されます。そして中の Connections をダブルクリックしてください。

Connection Manager パネルが開きます。さきほど Remote で設定した Remote サーバが 表示されているはずです。デフォルトまま OK ボタンをクリックしてください。

Connections アイコンの下にさらに新しい Connections アイコンが出来上がります。この Connections を表示している時には上下矢印(同期ボタン)上向き矢印(アップロードボタン) 、下向き矢印(ダウンロードボタン)が表示されます。上下矢印をクリックするとサーバーと ローカルデータを同期する準備が始まります。

同期の準備には時間がかかると思いますが、準備が完了すればパネル右下の Syncronize ボタンが 有効になりますのでクリックしてください。サーバのデータ量が多い場合は同期が完了するまでに かなりの時間がかかります。お茶でも飲んで表示される進捗状況ゆっくり眺めてください。

同期が完了すると Project Explorer にローカルデータとリモートデータ(サーバデータ)が 表示されます。Connections アイコンより上がローカルデータで Connections アイコンより 下がリモート(サーバ)データになります。これで上向き矢印、あるいは下向き矢印をクリックして ファイルのアップロードとダウンロードができるようになります。

遠回りになりましたが、これで Titanium Studio を Aptana Studio と同様に HTML エディタ兼 FTP クライアントとして使えるようになりました。ローカルファイルを編集する 場合は Project Explorer で編集したいファイルをダブルクリックするとエディタ画面で編集 できるようになります。アップロードする場合は、ファイルもしくはフォルダを選択して上向き 矢印をクリックします。

【Note】
しかし残念ながら今のところ Aptana Studio のように Run ボタンを使って HTML ファイルを 直接 Web Browser に表示させることはできません。Titanium Studio のツールバーにある Run ボタンは Mobile アプリケーションを実行させるためのものです。Mac にインストール されている Web ブラウザに HTML ファイルを直接表示させたい場合は、表示させたい HTML ファイルを右クリックして Open With メニューから Web Browser メニューを選んでください。 デフォルトでは HTML Editor になっているはずです。これでその HTML ファイルを ダブルクリックすると直接 Web Bowser に表示されるようになります。しかしこの方法ですと、 次からその HTML ファイルをダブルクリックした場合は常に Web Browser が開くようになります 。ここはデフォルトのままのほうが使いやすいと思います。デフォルトに戻すには HTML ファイルを 右クリックして Open With メニューから HTML Editor を選びます。そして HTML の表示確認をするには、確認したい HTML ファイルを選択しサーバーへアップロードして、Web ブラウザでその URL にアクセスして確認するのが良いように思います。


次節からは Titanium Studio を使って Mobile アプリの作成を始めます。 お楽しみに(^^)



ホーム | JavaScript メモ | オブジェクト指向 | オブジェクト指向 続き | Aptana Studio | Titanium Studio のインストールと設定 | Hello プロジェクト | Creating Your First Titanium Apps 改 | ナビゲーションウィンドウ for iOS | book データを追加する
Copyright (c) 2006 - 2014 vivacocoa.jp All Rights Reserved.