titanium nagoya chatroom vol.2 はじめの一歩

51
First Step of Titanium @sngmr

Upload: mori-shingo

Post on 30-Jun-2015

4.061 views

Category:

Technology


0 download

DESCRIPTION

2012年3月14日に開催された、Titanium Nagoya Chatroom vol.2 でお話した、「Titanium はじめの一歩」のスライドです。

TRANSCRIPT

Page 1: Titanium Nagoya Chatroom vol.2 はじめの一歩

First Step of Titanium

@sngmr

Page 2: Titanium Nagoya Chatroom vol.2 はじめの一歩

自己紹介

Page 3: Titanium Nagoya Chatroom vol.2 はじめの一歩

ConnectionWorks Inc.(株)コネクションワークス

Twitter: @sngmr

Web系エンジニア兼営業兼企画兼コンサル兼経理

Shingo Mori森 真 吾

Page 4: Titanium Nagoya Chatroom vol.2 はじめの一歩

Titanium Certified Application Developer です

( ・´ー・`)ドヤ

Page 5: Titanium Nagoya Chatroom vol.2 はじめの一歩

まずアンケート結果を

発表します

Page 6: Titanium Nagoya Chatroom vol.2 はじめの一歩

どうやって知りましたか?

Twitter37%

勉強会News等24%

職場の人・知人から24%

ML6%

その他9%

Twitter勉強会News等職場の人・知人からMLその他

Page 7: Titanium Nagoya Chatroom vol.2 はじめの一歩

職業は?

プログラマ50%

学生22%

デザイナ6%

企画2%

営業2%

その他19%

プログラマ学生デザイナ企画営業その他

Page 8: Titanium Nagoya Chatroom vol.2 はじめの一歩

ではみなさんのTitanium経験は!?

Page 9: Titanium Nagoya Chatroom vol.2 はじめの一歩

Titanium歴はどんな感じ?

33%

17%17%

10%

6%

16%

全く触ったことない。名前だけ知ってる開発環境はダウンロードした。だけどそこまでとりあえずちょっと試したそれなりに書けると思うアプリをリリースしたその他

Page 10: Titanium Nagoya Chatroom vol.2 はじめの一歩

ついでに

一つ質問させて下さい

Page 11: Titanium Nagoya Chatroom vol.2 はじめの一歩

✤ iOS系

✤ Android系

✤ どっちも

つくりたいのはどれ?

Page 12: Titanium Nagoya Chatroom vol.2 はじめの一歩

ここから本番

Page 13: Titanium Nagoya Chatroom vol.2 はじめの一歩

Titanium歴はどんな感じ?

33%

17%17%

10%

6%

16%

全く触ったことない。名前だけ知ってる開発環境はダウンロードした。だけどそこまでとりあえずちょっと試したそれなりに書けると思うアプリをリリースしたその他

Page 14: Titanium Nagoya Chatroom vol.2 はじめの一歩

どこからはじめればいいんだろう・・・

Page 15: Titanium Nagoya Chatroom vol.2 はじめの一歩

First Step of Titanium

Page 16: Titanium Nagoya Chatroom vol.2 はじめの一歩

まず!どっちのプラットフォームで作るか決めましょう

Page 17: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 18: Titanium Nagoya Chatroom vol.2 はじめの一歩

•開発にはMacが必須です

•Lionの場合は必須ではありませんが、iOS Developer Programに加入しましょう。捗ります。Freeです。

•XcodeをAppStoreからダウンロード•最新バージョンは4.3.2

•でも4.3系はTitaniumがまだ対応してないです

•一応動きます。ぐぐると動かし方がでてきます

•ただ・・・

iOSアプリを作る場合

Page 19: Titanium Nagoya Chatroom vol.2 はじめの一歩

•無難にいきたい場合、Xcode 4.2系を使いましょう

•AppStoreからはダウンロードできません

• iOS Dev Centerからダウンロード

• iOS Developer Program への加入が必要

•Xcode4.3の場合、Command Line Tools for Xcodeもインストールしておきましょう(不要かな?)

•実機インストールしたい場合は、さらにAppleへお布施(年8,500円)が必要

iOSアプリを作る場合

Page 20: Titanium Nagoya Chatroom vol.2 はじめの一歩

Androidアプリを作る場合

•WindowsでもいいけどMacのがいい・・・かも

•Android SDK をダウンロード

•Android SDK ManagerでターゲットバージョンのSDKをダウンロード

• ごめんなさい。Androidあんまりやってないのでちょっと曖昧です

Page 21: Titanium Nagoya Chatroom vol.2 はじめの一歩

分からなかったらggrましょう。英語日本語問わずたくさん情報はあります。

Page 22: Titanium Nagoya Chatroom vol.2 はじめの一歩

Titanium Studio

Page 23: Titanium Nagoya Chatroom vol.2 はじめの一歩

Titanium Studiohttp://www.appcelerator.com/

Page 24: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 25: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 26: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 27: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 28: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 29: Titanium Nagoya Chatroom vol.2 はじめの一歩

Titanium Studioは

起動できた!

Page 30: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 31: Titanium Nagoya Chatroom vol.2 はじめの一歩

右クリック

Page 32: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 33: Titanium Nagoya Chatroom vol.2 はじめの一歩

KitchenSink ?

なにそれ流し台?

Page 34: Titanium Nagoya Chatroom vol.2 はじめの一歩

•Titanium Mobile でできるほぼすべての部品や機能がつまったサンプルとしてアプリ

•とりあえず動かさいてザッと眺めてみて、何ができるか把握できます

•初めてのパーツ・機能を使う場合、森もまだまだお世話になってます

Kitchen Sinkってなに?

Page 35: Titanium Nagoya Chatroom vol.2 はじめの一歩
Page 36: Titanium Nagoya Chatroom vol.2 はじめの一歩

•例えばボタンが使ってみようと思った場合

•KitchenSinkを動かして、ボタンのサンプルを見つける。たくさんありすぎて意外と至難の業・・・

•オススメサイト

•http://ks.kanna.asia/

•該当するページのソースをみて学ぶ

•Resources/examples以下に大量に入ってる

使い方

Page 37: Titanium Nagoya Chatroom vol.2 はじめの一歩

•動かない事が多いっぽいです

•Androidシミュレータ遅いです(́・ω・`)

•ただ速くなったの出た!・・・んですよね?

•頑張らないといけないかもしれません。

with Android

Page 38: Titanium Nagoya Chatroom vol.2 はじめの一歩

•例えば button.js 等、各ソースファイル内の書き方のみ参考にした方がいい

•もちろんKitchenSinkのやり方でも動きます

•ただ本格的にアプリを作る場合、画面遷移のやり方などはマネしない方がいいです

•Appceleratorも・・・

Attention!!

Page 39: Titanium Nagoya Chatroom vol.2 はじめの一歩

じゃぁどうすりゃいいんだよ!

Page 40: Titanium Nagoya Chatroom vol.2 はじめの一歩

One more step!!

Page 41: Titanium Nagoya Chatroom vol.2 はじめの一歩

ToDo

Page 42: Titanium Nagoya Chatroom vol.2 はじめの一歩

•タブの使い方・画面遷移のやり方

•TableViewの使い方

•モーダルWindowの使い方

•ローカルデータベースの使い方

ToDo みどころ

Page 43: Titanium Nagoya Chatroom vol.2 はじめの一歩

RSS Reader

Page 44: Titanium Nagoya Chatroom vol.2 はじめの一歩

•独自TableViewRowの使い方

•通信によるデータ取得の行い方

•WebViewの使い方

•機種毎のViewファイル切り分け方

RSS Reader みどころ

Page 45: Titanium Nagoya Chatroom vol.2 はじめの一歩

•ソース分割の方法で推奨(?)されているやり方

•KitchenSinkのような urlプロパティによる呼び出し

•Ti.includeを使った呼び出し

•requireを使った呼び出し ←Now!!

•CommonJSを調べると幸せになれるかも

•node.jsと考え方は同じです

exportsとかrequire?

Page 46: Titanium Nagoya Chatroom vol.2 はじめの一歩

いかがでしたか?

なんとなくつかめました?

Page 47: Titanium Nagoya Chatroom vol.2 はじめの一歩

•公式ドキュメント ~Quick Start~•https://wiki.appcelerator.org/display/guides/Quick+Start

•公式APIドキュメント•http://developer.appcelerator.com/apidoc/mobile/latest

•日本語APIカタログ•http://code.google.com/p/titanium-mobile-doc-ja/

その他のリソース

Page 48: Titanium Nagoya Chatroom vol.2 はじめの一歩

•Titanium BBS•http://ti.masuidrive.jp/

•Twitter•#TitaniumJP

•GitHub

その他のリソース

Page 49: Titanium Nagoya Chatroom vol.2 はじめの一歩

あとはアイディア次第!

とりあえず勢いで作ってみましょう!

Page 50: Titanium Nagoya Chatroom vol.2 はじめの一歩

Code Strong

Page 51: Titanium Nagoya Chatroom vol.2 はじめの一歩

ご清聴ありがとうございました。