プロ文.com 勉強会 phase 1

プロ文.com 勉強会Phase1

Yuki UrataHiroki Toyokawa

2012/07/14 プロ文.com 勉強会

アウトライン• プロフィール

• 本日作るiPhoneアプリ

• iPhoneアプリを作る方法

• Titanium Mobileの使い方

• Titanium Mobileによるプログラミング

• 地図アプリの作成

• iPhoneアプリの基礎

• APIリファレンスの使い方

2


プロフィール• 浦田祐輝

• プログラミング歴：10年以上!!

• 使用可能言語：主要言語全て

• 得意言語はC

• 豊川弘樹

• プログラミング歴：5年

• 使用可能言語：おおよその主要言語

• 得意言語はJavaScript

3

2012/07/14 プロ文.com 勉強会4

本日作るiPhoneアプリ


iPhoneアプリを作る方法

5

Xcode

Titanium Mobile

HTML 5


各開発環境の特徴

6

開発言語メリットデメリット

ObjectiveC純正品デバッガが充実

現状ほぼiPhoneアプリだけのためにObjCを学ぶ必要がある

JavaScript言語的なハードルが低い

サードパーティ製のためiOSバージョンアップに追いつかないことも

HTML, CSSJavaScript

Web開発と同じ通信が必要なためネイティブアプリほどきびきび動かないことも


プロジェクト作成

7

選択

2012/07/14 プロ文.com 勉強会8

プロジェクト名入力

App ID入力

iPhoneのみチェック

クリックして作成

2012/07/14 プロ文.com 勉強会9

クリックしてProject Explorerを表示


早速動かしてみましょう!!

10

① クリック② iPhone Simulatorを選択


Titaniumへようこそ!

11


Titanium Mobileの使い方

12

コードを書くエリア

デバッグ用エリア

ファイル一覧


app.jsが超重要!!

13

app.js

Titanium Mobileでは起動時にapp.jsが自動的に読み込まれる。つまり、ここにコードを書いていけば良い。


コードを書いてみましょう

14

元からあったコードは/* ~ */で囲ってコメントアウトします。

app.js

2012/07/14 プロ文.com 勉強会15

実行すると...


コード解説

16

iPhoneのWindowを作り、win

という名前の変数に格納

Windowの背景色をカラーコードで指定 (オレンジ色)

作成したWindowを開く(起動)


JavaScriptの復習• JavaScriptとJavaの違いって？

• 両者は全く別の言語

• JavaScript(JS)はブラウザ上で動く言語として、JavaはOSに依らない言語として開発された。

• プログラミングと言えばよくオブジェクト指向という言葉を耳にするけど...？

• JavaScriptは関数型言語と呼ばれ、オブジェクト指向型言語ではありません。

17


JavaScriptのデバッグ

18

alertを追加


alertデバッグ

19


alertデバッグって何に使うん？

20

hogeってなんだっけ...？


alert「1だよ!」

21

「知ってた」


いよいよMapを使ってみましょう

22

2012/07/14 プロ文.com 勉強会23


コード解説

24

マップに立てるピンを作成

マップビューを作成

マップビューをWindowに追加

マップに作成したピンを追加


iPhoneアプリの基礎

25

Window

View

Button

LabelLabel, ButtonなどのアイテムはWindowの上に直接置かずに、必ずViewの上に置く。


APIリファレンスの使い方

26

「発見!」

• http://docs.appcelerator.com/titanium/2.1/#!/api

http://docs.appcelerator.com/titanium/2.1/#!/api



まずは例を見る

27

「ほう...」

これは補足説明

サンプルコード


コピペして動かしてみる

28

変数名の変更をお忘れなく!

サンプルコードwindow

オリジナルwin

2012/07/14 プロ文.com 勉強会29


少し変えて動かしてみる

30

値を変えてみる

2012/07/14 プロ文.com 勉強会31

「伸びただと...!?」


Enjoy Your Programming Life!!

32


以上です。ありがとうございました。

33


次回は...

• PHPとMySQLを使ったサーバサイドプログラミング

• 今回作成した地図アプリとサーバとの連携

34

みたいなことを浦田さんがやってくれるはず...

しかし浦田さんは僕の10倍多忙です。


参考URL

• Titanium SDK APIリファレンス(本家)


• Titanium SDK APIリファレンス(日本語wiki)

http://code.google.com/p/titanium-mobile-doc-ja/w/list

• titanium-mobile-doc-ja / MapViewhttp://code.google.com/p/titanium-mobile-doc-ja/wiki/MapView

• appcelerator / KitchenSinkTitaniumのベストプラクティス。Titaniumを本気でやりたい方はどうぞ。https://github.com/appcelerator/KitchenSink/

35





http://code.google.com/p/titanium-mobile-doc-ja/wiki/MapView

http://code.google.com/p/titanium-mobile-doc-ja/wiki/MapView

https://github.com/appcelerator/KitchenSink/

https://github.com/appcelerator/KitchenSink/

プロ文.com 勉強会 phase 1

Technology