-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
482 lines (477 loc) · 34.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Use title if it's in the page YAML frontmatter -->
<title>Titanium™ インストールガイド</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic" rel="stylesheet">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<div id="sidebar">
<p class="title"><a href="#">Titanium™ インストールガイド</a></p>
<a class="toc" href="#introduction">はじめに</a>
<a class="toc" href="#environment">環境構築</a>
<ul class="menu">
<li><a href="#environment-01">OS</a></li>
<li><a href="#environment-02">開発キット等</a></li>
<li><a href="#environment-03">Titanium™</a>
<ul style="margin: 0;">
<li><a href="#environment-03-01">Titanium Studio のインストール</a>
<a href="#environment-03-01-win">Win</a> / <a href="#environment-03-01-mac">Mac</a></li>
<li><a href="#environment-03-02">Titanium Studio を起動</a>
<a href="#environment-03-02-win">Win</a> / <a href="#environment-03-02-mac">Mac</a></li>
</ul></li>
<li><a href="#environment-04">Android SDK</a>
<ul style="margin: 0;">
<li><a href="#environment-04-01">Android SDK のインストール</a>
<a href="#environment-04-01-win">Win</a> / <a href="#environment-04-01-mac">Mac</a></li>
</ul></li>
<li><a href="#environment-05">Xcode</a>
<ul style="margin: 0;">
<li><a href="#environment-05-01">Xcode のインストール</a></li>
</ul></li>
<li><a href="#environment-06">Genymotion∞</a>
<ul style="margin: 0;">
<li><a href="#environment-06-01">VirtualBox のインストール</a>
<a href="#environment-06-01-win">Win</a> / <a href="#environment-06-01-mac">Mac</a></li>
<li><a href="#environment-06-02">Genymotion のインストール</a>
<a href="#environment-06-02-win">Win</a> / <a href="#environment-06-02-mac">Mac</a></li>
<li><a href="#environment-06-03">Genymotion を起動</a>
<a href="#environment-06-03-win">Win</a> / <a href="#environment-06-03-mac">Mac</a></li>
<li><a href="#environment-06-04">Titanium Studio で設定</a>
<a href="#environment-06-04-win">Win</a> / <a href="#environment-06-04-mac">Mac</a></li>
</ul></li>
</ul>
<a class="toc" href="#tutorial">チュートリアル</a>
<ul class="menu">
<li><a href="#tutorial-01">Windows</a></li>
<li><a href="#tutorial-02">Mac OS X</a></li>
</ul>
<a class="toc" href="#commandline">Titanium CLI</a>
<a class="toc" href="#faq">よくある質問</a>
<ul class="menu">
<li><a href="#faq-01">Windows</a></li>
<li><a href="#faq-02">Mac OS X</a></li>
</ul>
<a class="toc" href="#changelog">更新履歴</a>
</div>
<div id="content">
<h1>Titanium™ インストールガイド</h1>
<h2 id="introduction">はじめに</h2>
<p>米国 Appcelerator 社が提供している、JavaScript で iOS / Android のネイティブアプリを開発することができる Titanium™ の導入方法の日本語解説サイトです。</p>
<p>Titanium Studio、Titanium SDK、Titanium CLI、Alloy、Node.ACS の環境構築からアプリのプロジェクトを生成し、シミュレータ、もしくはエミュレータでアプリを起動するところまでの流れを解説します。
nvm で node.js をインストールされていたりする場合等、特殊な環境下でのセットアップにつきましては、解説を省かせていただきますのでご了承ください。
また、ターゲットとなるアプリのプラットフォームは iOS / Android のみとさせていただきます。</p>
<p>もしもうまく動かない場合は、<a href="http://support.titanium-mobile.jp/">ユーザ会のサポートフォーラム</a>で質問してみましょう。</p>
<h2 id="introduction">インストールガイドでの対応バージョン</h2>
<dl>
<dt>Titanium Studio
<small>3.2.0</small></dt>
<dd>Titanium で iOS / Android アプリを開発するための、Eclipse ベースの統合開発環境</dd>
<dt>Titanium SDK
<small>3.2.0.GA</small></dt>
<dd>Titanium で iOS / Android アプリをビルドするための開発キット</dd>
<dt>Titanium CLI
<small>3.2.0</small></dt>
<dd>コマンドライン(CLI)でプロジェクトの生成からアプリのビルドまで行えるようにするツール。
Titanium Studio が不要になります</dd>
<dt>Alloy
<small>1.3.0</small></dt>
<dd>Titanium 開発元の Appcelerator が提供している公式 MVC フレームワーク</dd>
<dt>Node.ACS
<small>1.0.11</small></dt>
<dd>Appcelerator が提供する PaaS。
同じく、Appcelerator が提供している mBaaS である、Appcelerator Cloud Services(ACS)と親和性が非常に高く、ACS で提供されていない機能を独自で拡張できたりもします</dd>
</dl>
<hr>
<h2 id="environment">環境構築</h2>
<h3 id="environment-01">OS</h3>
<dl>
<dt>Windows</dt>
<dd>Windows 7、もしくは Window 8</dd>
<dt>Mac OS X</dt>
<dd>Mountain Lion 以降</dd>
</dl>
<p>※ Linux については解説を省きます</p>
<h3 id="environment-02">開発キット等</h3>
<dl>
<dt>Xcode</dt>
<dd>iOS アプリをビルドするために必要となります。
つまり、Xcode が提供されていない Windows では iOS アプリをビルドすることができません</dd>
<dd><a href="https://developer.apple.com/downloads/">Apple 開発者向けサイト</a>からダウンロードできます</dd>
<dt>JDK</dt>
<dd>Android アプリをビルドするために必要となります。
Windows の場合は Titanium Studio をインストールする際に JDK がインストールされていない場合、Titanium Studio をインストールすると同時に自動でダウンロードしてインストールされます。
手動でインストールする場合は必ず 32bit 版をインストールしてください</dd>
<dd><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Oracle 開発者向けサイト</a>、もしくは、<a href="https://developer.apple.com/downloads/">Apple 開発者向けサイト</a>からダウンロードできます</dd>
<dt>Android SDK</dt>
<dd>Android アプリをビルドするために必要となります。
こちらは手動でインストールする必要があります。
また、Titanium 自体に Android SDK 2.3.3 が必要になりますのでご注意ください</dd>
<dd><a href="http://developer.android.com/sdk/index.html">Google の Android 開発者向けサイト</a>からダウンロードできます。
Titanium のみで開発するのであれば(Eclipse を使って Java で開発しない)、SDK Tools Only 版をインストールすることをおすすめします</dd>
<dt>node.js</dt>
<dd>iOS / Android 問わず、Titanium でアプリをビルドする際に必要となります。
Windows の場合は Titanium Studio をインストールする際に node.js がインストールされていない場合、Titanium Studio をインストールすると同時に自動でダウンロードしてインストールされます</dd>
<dd><a href="http://nodejs.org/download/">node.js のダウンロードページ</a>からダウンロードできます</dd>
<dt>git</dt>
<dd>アプリのプロジェクトを管理するために必要となります。
その他にも、Appcelerator が提供している Kitchen Sink 等のお手本プロジェクトを Titanium Studio で GitHub からダウンロードしたりもします。
Windows の場合は Titanium Studio をインストールする際に git がインストールされていない場合、Titanium Studio をインストールすると同時に自動でダウンロードしてインストールされます</dd>
<dd><a href="http://git-scm.com/downloads">git のダウンロードページ</a>からダウンロードできます</dd>
<dt>Genymotion∞</dt>
<dd>デフォルトの Android エミュレータの代わりに利用します。
Genymotion は VirtualBox が必要となりますので、そちらも忘れずにインストールしてください</dd>
<dd><a href="http://www.genymotion.com/">Genymotion のダウンロードページ</a>からダウンロードできます</dd>
<dt>VirtualBox</dt>
<dd>Genymotion を動かすために必要となります</dd>
<dd><a href="https://www.virtualbox.org/wiki/Downloads">VirtualBox のダウンロードページ</a>からダウンロードできます</dd>
</dl>
<h3 id="environment-03">Titanium™</h3>
<h4 id="environment-03-01">Titanium Studio のインストール</h4>
<p>Appcelerator のアカウントが必要となります。
<a href="https://my.appcelerator.com/auth/signup">レジストページ</a>より必要情報を入力してアカウント登録を行ってください。
登録が完了したらログインし、<a href="https://my.appcelerator.com/resources">My Resources</a> ページより Titanium Studio をダウンロードします。
<img src="/img/environment/myresources.png"></p>
<p id="environment-03-01-win">それではダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。</p>
<ol>
<li>ダウンロードした Titanium_Studio.exe からセットアップウィザードを起動します
<img src="/img/environment/studio_windows-01.png"></li>
<li>利用規約に同意します
<img src="/img/environment/studio_windows-02.png"></li>
<li>インストールパスを確認します。
デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
<img src="/img/environment/studio_windows-03.png"></li>
<li>スタートメニューに登録したくない場合はチェックしてください
<img src="/img/environment/studio_windows-04.png"></li>
<li>ファイルを関連付けたくない場合はチェックを外してください
<img src="/img/environment/studio_windows-05.png"></li>
<li>JDK がインストールされていない場合は自動でインストールするという確認になります
<img src="/img/environment/studio_windows-06.png"></li>
<li>git がインストールされていない場合は自動でインストールするという確認になります
<img src="/img/environment/studio_windows-07.png"></li>
<li>node.js がインストールされていない場合は自動でインストールするという確認になります
<img src="/img/environment/studio_windows-08.png"></li>
<li>インストールが始まります
<img src="/img/environment/studio_windows-09.png"></li>
<li>JDK がインストールされています
<img src="/img/environment/studio_windows-10.png"></li>
<li>git がインストールされています
<img src="/img/environment/studio_windows-11.png"></li>
<li>node.js がインストールされています
<img src="/img/environment/studio_windows-12.png"></li>
<li>Titanium Studio がインストールされています
<img src="/img/environment/studio_windows-13.png"></li>
<li>Titanium Studio のインストールが完了しました
<img src="/img/environment/studio_windows-14.png"></li>
<li>Close ボタンをクリックしてセットアップウィザードを完了します
<img src="/img/environment/studio_windows-15.png"></li>
</ol>
<p id="environment-03-01-mac">続いて、Mac OS X のセットアップになります。</p>
<ol>
<li>ダウンロードした Titanium_Studio.dmg をマウントすると、Finder が表示されます
<img src="/img/environment/studio_mac-01.png"></li>
<li>表示されている Titanium Studio フォルダを Applications フォルダへドラッグアンドドロップして完了です</li>
</ol>
<h4 id="environment-03-02">Titanium Studio を起動</h4>
<p id="environment-03-02-win">まずは Windows から、Titanium Studio を起動するとワークスペースのパスを設定するように促されます。
<img src="/img/environment/studio_windows-workspace.png">
その後、Appcelerator のアカウントがあるか聞かれます。
Titanium Studio をダウンロードする際に作ってあるので、I do have an account with Appcelerator にチェックを入れて Next ボタンをクリックします。
<img src="/img/environment/studio_windows-account.png">
ログインダイアログが表示されますので、Appcelerator のアカウントを入力してログインしましょう。
<img src="/img/environment/studio_windows-login.png"></p>
<p>ログインすると自動でアップデート処理が走ります。
Titanium SDK や Titanium CLI、Alloy、Node.ACS のインストール、もしくはアップデートをすることができます。
<img src="/img/environment/studio_windows-update.png"></p>
<p>Android SDK がインストールされていない、もしくはパスが設定されていないと、設定ダイアログが表示されます。
Android SDK のダウンロード、インストールが完了したらパスの設定も忘れずに行いましょう。
Android SDK をインストーラでインストールしてデフォルトパスのままでしたら、C:¥Users¥hoge¥AppData¥Local¥Android¥android-sdk となります
<img src="/img/environment/studio_windows-androidsdk.png">
万が一、この設定ダイアログを閉じてしまっても、ダッシュボートの Get Started タブの下部にある Configure Native SDKs → Android SDK → Install or Update Android SDK をクリックすれば表示されます。
<img src="/img/environment/studio_windows-configure.png"></p>
<p id="environment-03-02-mac">続いて、Mac OS X の Titanium Studio を起動します。
<img src="/img/environment/studio_mac-workspace.png">
その後、Accelerator のアカウントがあるか聞かれます。
Titanium Studio をダウンロードする際に作ってあるので、I do have an account with Appcelerator にチェックを入れて Next ボタンをクリックします。
<img src="/img/environment/studio_mac-account.png">
ログインダイアログが表示されますので、Appcelerator のアカウントを入力してログインしましょう。
<img src="/img/environment/studio_mac-login.png"></p>
<p>ログインすると自動でアップデート処理が走ります。
Titanium SDK や Titanium CLI、Alloy、Node.ACS のインストール、もしくはアップデートをすることができます。
<img src="/img/environment/studio_mac-update.png"></p>
<p>Android SDK がインストールされていない、もしくはパスが設定されていないと、設定ダイアログが表示されます。
Android SDK のダウンロード、インストールが完了したらパスの設定も忘れずに行いましょう。
<img src="/img/environment/studio_mac-androidsdk.png">
万が一、この設定ダイアログを閉じてしまっても、ダッシュボートの Get Started タブの下部にある Configure Native SDKs → Android SDK → Install or Update Android SDK をクリックすれば表示されます。
<img src="/img/environment/studio_mac-configure.png"></p>
<h3 id="environment-04">Android SDK</h3>
<p><a href="http://developer.android.com/sdk/index.html">Google の Android 開発者向けサイト</a>からダウンロードしてください(Windows の場合は Recommended になっているインストーラ版で説明します)。
<img src="/img/environment/androidsdk.png"></p>
<h4 id="environment-04-01">Android SDK のインストール</h4>
<p id="environment-04-01-win">ダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。</p>
<ol>
<li>ダウンロードしたインストーラ(android-sdk_r22.3-windows.exe)からセットアップウィザードを起動します
<img src="/img/environment/androidsdk_windows-01.png"></li>
<li>JDK がインストールされていることを確認します
<img src="/img/environment/androidsdk_windows-02.png"></li>
<li>Android SDK をインストールするユーザを指定します。
今回は Install just for me で Windows にログインしているユーザのみとします
<img src="/img/environment/androidsdk_windows-03.png"></li>
<li>インストールパスを確認します。
デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
<img src="/img/environment/androidsdk_windows-04.png"></li>
<li>スタートメニューに登録したくない場合はチェックしてください
<img src="/img/environment/androidsdk_windows-05.png"></li>
<li>インストールが始まります
<img src="/img/environment/androidsdk_windows-06.png"></li>
<li>インストールが完了しました
<img src="/img/environment/androidsdk_windows-07.png"></li>
<li>そのまま Android SDK Manager を起動するので、Start SDK Manager へチェックを入れたまま Finish をクリックします
<img src="/img/environment/androidsdk_windows-08.png"></li>
<li>Tools と 今回は Android 4.4.2(API 19)にチェックを入れて Install XX Packages をクリックします。
他の Android バージョンの SDK や エミュレータ等もインストールしたい場合は、適宜チェックしてください。
また、Titanium 自体に Android SDK 2.3.3 が必要になりますのでこちらもあわせてチェックしてください
<img src="/img/environment/androidsdk_windows-09.png"></li>
<li>Accept License をチェックし、Install をクリックします
<img src="/img/environment/androidsdk_windows-10.png"></li>
<li>ダウンロードが始まります
<img src="/img/environment/androidsdk_windows-11.png"></li>
<li>ログに Done loading packages. が表示されたら Close をクリックます
<img src="/img/environment/androidsdk_windows-12.png"></li>
<li>Status が Installed になったことを確認したら、Android SDK Manager を閉じて完了です
<img src="/img/environment/androidsdk_windows-13.png"></li>
</ol>
<p id="environment-04-01-mac">続いて、Mac OS X のセットアップになります。</p>
<ol>
<li>ダウンロードした ZIP ファイル(android-sdk_r22.3-macosx.zip)を解凍して、適当なフォルダへ設置します。
今回は、~/sdks/android-sdk-macosx とします。
ここからはターミナルで作業を行っていきますので、ターミナルを起動してください</li>
<li>android-sdk-macosx の中にある platform-tools と tools のパスを通します
<pre>$ vi ~/.bash_profile</pre>
vi が起動したら以下を追加し、保存して終了します
<pre>export PATH="$HOME/sdks/android-sdk-macosx/platform-tools:$PATH"
export PATH="$HOME/sdks/android-sdk-macosx/tools:$PATH"</pre>
.bash_profile を再読み込みします
<pre>$ source ~/.bash_profile</pre></li>
<li>Android SDK Manager を起動します。
ここで android コマンドが存在しないとエラーが返ってきたら、パスが上手く通っていないので一つ前を見なおしてください
<pre>$ android</pre></li>
<li>Tools と 今回は Android 4.4.2(API 19)にチェックを入れて Install XX Packages をクリックします。
他の Android バージョンの SDK や エミュレータ等もインストールしたい場合は、適宜チェックしてください。
また、Titanium 自体に Android SDK 2.3.3 が必要になりますのでこちらもあわせてチェックしてください
<img src="/img/environment/androidsdk_mac-01.png"></li>
<li>Accept License をチェックし、Install をクリックします
<img src="/img/environment/androidsdk_mac-02.png"></li>
<li>ダウンロードが始まります
<img src="/img/environment/androidsdk_mac-03.png"></li>
<li>ログに Done loading packages. が表示されたら Close をクリックます
<img src="/img/environment/androidsdk_mac-04.png"></li>
<li>Status が Installed になったことを確認したら、Android SDK Manager を閉じて完了です
<img src="/img/environment/androidsdk_mac-05.png"></li>
</ol>
<h3 id="environment-05">Xcode</h3>
<p>iOS アプリの開発に必要となり、App Storeからダウンロードすることができます。</p>
<h4 id="environment-05-01">Xcode のインストール</h4>
<ol>
<li>Xcodeのダウンロード、インストールが完了したら起動してください。
Xcode → Preferences → Downloads から Command Line Tools をインストールします。
あわせて開発中の動作確認に必要となる iOS シミュレータもインストールしましょう
<img src="/img/environment/xcode_mac-01.png">
Mac OS X Mavericks の方は以下のコマンドで Command Line Tools をインストールしてください
<pre>$ xcode-select --install</pre></li>
</ol>
<h3 id="environment-06">Genymotion∞</h3>
<p>Android アプリを開発する際にAndroid SDK に標準でついてくるエミュレータで動作確認を行ったりするのですが、このエミュレータが非常に重いです。
そこで、この Genymotion の登場です。
全然ストレスを感じない軽快な動作で、開発が非常に楽になります。
特に Windows では Android アプリの開発のみとなりますので、是非、導入することをおすすめします。</p>
<h4 id="environment-06-01">VirtualBox のインストール</h4>
<p>Genymotion を起動するには VirtualBox が必要となりますので、<a href="https://www.virtualbox.org/wiki/Downloads">ダウンロードページ</a>からダウンロードし、セットアップを済ませてください。
<img src="/img/environment/virtualbox.png"></p>
<p id="environment-06-01-win">ダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。</p>
<ol>
<li>ダウンロードしたインストーラ(VirtualBox-4.3.6-91406-Win.exe)からセットアップウィザードを起動します
<img src="/img/environment/virtualbox_windows-01.png"></li>
<li>インストールパスを確認します。
デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
<img src="/img/environment/virtualbox_windows-02.png"></li>
<li>各ショートカットを登録したくない場合はチェックを外してください
<img src="/img/environment/virtualbox_windows-03.png"></li>
<li>Yes をクリックして進めます
<img src="/img/environment/virtualbox_windows-04.png"></li>
<li>Install をクリックするとインストールが始まります
<img src="/img/environment/virtualbox_windows-05.png"></li>
<li>インストール中です
<img src="/img/environment/virtualbox_windows-06.png"></li>
<li>Finish をクリックして完了となります
<img src="/img/environment/virtualbox_windows-07.png"></li>
</ol>
<p id="environment-06-01-mac">続いて、Mac OS X のセットアップになります。</p>
<ol>
<li>ダウンロードした VirtualBox-4.3.6-91406-OSX.dmg をマウントすると、Finder が表示されます
<img src="/img/environment/virtualbox_mac-01.png"></li>
<li>表示されている VirtualBox.pkg からセットアップウィザードを起動します
<img src="/img/environment/virtualbox_mac-02.png"></li>
<li>インストールをクリックするとインストールが始まります
<img src="/img/environment/virtualbox_mac-03.png"></li>
<li>インストール中です
<img src="/img/environment/virtualbox_mac-04.png"></li>
<li>閉じるをクリックして完了となります
<img src="/img/environment/virtualbox_mac-05.png"></li>
</ol>
<h4 id="environment-06-02">Genymotion のインストール</h4>
<p>Genymotion は<a href="http://www.genymotion.com/">こちらからダウンロード</a>することができます。
Free で構いません。
ただし Genymotion のアカウントが必要となりますのでアカウント登録を済ませて、ログインしてからダウンロード、セットアップをしてください。
その後、Genymotion を起動すると Android の色々な VM がダウンロードできるようになります。
開発対象の実機に近いものを選択すると良いと思います。
<img src="/img/environment/genymotion.png"></p>
<p id="environment-06-02-win">ダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。</p>
<ol>
<li>ダウンロードしたインストーラ(genymotion-2.0.3.exe)からセットアップウィザードを起動します
<img src="/img/environment/genymotion_windows-01.png"></li>
<li>インストールパスを確認します。
デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
<img src="/img/environment/genymotion_windows-02.png"></li>
<li>スタートメニューに登録したくない場合はチェックしてください
<img src="/img/environment/genymotion_windows-03.png"></li>
<li>デスクトップへアイコンを登録したくない場合はチェックを外してください
<img src="/img/environment/genymotion_windows-04.png"></li>
<li>Install をクリックするとインストールが始まります
<img src="/img/environment/genymotion_windows-05.png"></li>
<li>インストール中です
<img src="/img/environment/genymotion_windows-06.png"></li>
<li>Finish をクリックして完了となります
<img src="/img/environment/genymotion_windows-07.png"></li>
</ol>
<p id="environment-06-02-mac">続いて、Mac OS X のセットアップになります。</p>
<ol>
<li>ダウンロードした genymotion-2.0.3.dmg をマウントすると、Finder が表示されます
<img src="/img/environment/genymotion_mac-01.png"></li>
<li>表示されている Genymotion Shell.app と Genymotion.app を Applications フォルダへドラッグアンドドロップして完了です</li>
</ol>
<h4 id="environment-06-03">Genymotion を起動</h4>
<p id="environment-06-03-win">インストールが完了したら、Genymotion を起動しましょう。まずは Windows の場合になります。</p>
<ol>
<li>初期起動時は VM がないので入れるように促されます。
Yes をクリックしてすすめましょう
<img src="/img/environment/genymotion_windows-08.png"></li>
<li>Connect をクリックして、Genymotion をダウンロードした際に作ったアカウントでログインします
<img src="/img/environment/genymotion_windows-09.png"></li>
<li>お好みの VM を選択して、Next をクリックします。
Android SDK Manager でインストールした API レベルのものにあわせましょう
<img src="/img/environment/genymotion_windows-10.png"></li>
<li>VM の名前を指定することができます。
ここで指定した名前は、Titanium Studio で Genymotion と連携する際に必要となります
<img src="/img/environment/genymotion_windows-11.png"></li>
<li>インストール中です
<img src="/img/environment/genymotion_windows-12.png"></li>
<li>Finish をクリックします
<img src="/img/environment/genymotion_windows-13.png"></li>
<li>ダウンロードした VM が一覧へ追加されていたら完了です
<img src="/img/environment/genymotion_windows-14.png"></li>
</ol>
<p id="environment-06-03-mac">続いて、Mac OS X のセットアップになります。</p>
<ol>
<li>初期起動時は VM がないので入れるように促されます。
Yes をクリックしてすすめましょう
<img src="/img/environment/genymotion_mac-02.png"></li>
<li>Connect をクリックして、Genymiton をダウンロードした際に作ったアカウントでログインします
<img src="/img/environment/genymotion_mac-03.png"></li>
<li>お好みの VM を選択して、Next をクリックします。
Android SDK Manager でインストールした API レベルのものにあわせましょう
<img src="/img/environment/genymotion_mac-04.png"></li>
<li>VM の名前を指定することができます。
ここで指定した名前は、Titanium Studio で Genymotion と連携する際に必要となります
<img src="/img/environment/genymotion_mac-05.png"></li>
<li>インストール中です
<img src="/img/environment/genymotion_mac-06.png"></li>
<li>Finish をクリックします
<img src="/img/environment/genymotion_mac-07.png"></li>
<li>ダウンロードした VM が一覧へ追加されていたら完了です
<img src="/img/environment/genymotion_mac-08.png"></li>
</ol>
<h4 id="environment-06-04">Titanium Studio で設定</h4>
<p>Titanium Studio で Android アプリをビルドする際、アプリの転送先を Genymotion にする事ができます。</p>
<p id="environment-06-04-win">Windows の場合は、Titanium Studio の Window → Preference → Studio → Platforms → Android → Default Emulator に Genymotion でダウンロードした Android の VM 名が入っているのでそれを選択します。
<img src="/img/environment/studio_windows-genymotion.png"></p>
<p id="environment-06-04-mac">Mac OS X の場合は、Titanium Studio の環境設定 → Studio → Platforms → Android → Default Emulator に Genymotion でダウンロードした Android の VM 名が入っているのでそれを選択します。
<img src="/img/environment/studio_mac-genymotion.png"></p>
<hr>
<h2 id="tutorial">チュートリアル</h2>
<p>Titanium の開発環境は整いましたか?
それでは Appcelerator が提供しているお手本デモアプリ、Kitchen Sink を実際に Genymotion で動かしてみましょう。
Kitchen Sink は <a href="https://github.com/appcelerator/KitchenSink">GitHub で公開されています</a>が、Titanium Studio で簡単にインポートすることができます。</p>
<h3 id="tutorial-01">Windows</h3>
<ol>
<li>ダッシュボード → Develop タブ → Kitchen Sink の IMPORT ボタンをクリック
<img src="/img/tutorial/kitchensink_windows-01.png"></li>
<li>特に変更しなければそのまま Finish をクリック
<img src="/img/tutorial/kitchensink_windows-02.png"></li>
<li>インポート中です
<img src="/img/tutorial/kitchensink_windows-03.png"></li>
<li>インポートが完了すると Project Explorer に Kitchen Sink が追加されているのでそこをクリックし、Run → Android Emulator でビルドが始まり、完了すると Genymotion が起動します
<img src="/img/tutorial/kitchensink_windows-04.png"></li>
</ol>
<h3 id="tutorial-01">Mac OS X</h3>
<ol>
<li>ダッシュボード → Develop タブ → Kitchen Sink の IMPORT ボタンをクリック
<img src="/img/tutorial/kitchensink_mac-01.png"></li>
<li>特に変更しなければそのまま Finish をクリック
<img src="/img/tutorial/kitchensink_mac-02.png"></li>
<li>インポート中です
<img src="/img/tutorial/kitchensink_mac-03.png"></li>
<li>インポートが完了すると Project Explorer に Kitchen Sink が追加されているのでそこをクリックし、Run → Android Emulator でビルドが始まり、完了すると Genymotion が起動します
<img src="/img/tutorial/kitchensink_mac-04.png"></li>
</ol>
<hr>
<h2 id="commandline">Titanium CLI</h2>
<p>上級者向けにコマンドラインで Titanium を操作するマニュアルを書く予定</p>
<hr>
<h2 id="faq">よくある質問</h2>
<h3 id="faq-01">Windows</h3>
<dl>
<dt>Titanium Studio が起動しない</dt>
<dd>titaniumstudio.ini の設定を書き換えると起動することがあるようです。
インストールパスを変更されていないようでしたら、C:¥Users¥hoge¥AppData¥Local¥Titanium Studio¥titaniumstudio.ini をテキストエディタで開き、-Xmx1024m を -Xmx512m 等の低い値でお試しください</dd>
<dt>Genymotion が Titanium Studio で認識されない</dt>
<dd>Windows コマンド プロセッサ(cmd.exe)を開き、以下のコマンドをお試しください
<pre>C:¥Users¥hoge>titanium config genymotion.enabled true</pre></dd>
</dl>
<h3 id="faq-01">Mac OS X</h3>
<hr>
<h2 id="changelog">更新履歴</h2>
<dl>
<dt>2014 年 01 月 12 日</dt>
<dd>Xcode を追加
<a href="https://twitter.com/k0sukey">@k0sukey</a></dd>
<dt>2014 年 01 月 08 日</dt>
<dd>Android SDK、Genymotion∞ チュートリアルを追加
<a href="https://twitter.com/k0sukey">@k0sukey</a></dd>
<dt>2014 年 01 月 07 日</dt>
<dd>環境構築まで作成
<a href="https://twitter.com/k0sukey">@k0sukey</a></dd>
</dl>
<hr>
<p class="footer">Titanium™ インストールガイドは <a href="http://titanium-mobile.jp/">Titanium Mobile ユーザー会</a>の提供でお送りしております</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>