Titanium Mobileとは？http://www.flickr.com/photos/vaucher/5763894833/

11年11月28日月曜日

iPhone開発のおさらい

Objective-C文法を覚える

作りたいアプリに関するAPIを理解

+

標準ライブラリ（拡張ライブラリ）利用法学ぶ

+

11年11月28日月曜日

Android開発のおさらい

Javaの文法を覚える

作りたいアプリに関するAPIを理解

+ +

標準ライブラリ（拡張ライブラリ）利用法学ぶ

11年11月28日月曜日

iPhone/Androidでそれぞれ違う言語＆API覚えるのは大変

http://www.flickr.com/photos/panman_/4507107513/

11年11月28日月曜日

Titanium Mobileの場合の開発は？

// commentvar sampleCode = ‘Hello’;alert(sampleCode);

JavaScriptの文法を覚える（*1）

作りたいアプリに関するAPIを理解

+（任意）ライブラリ利用法学ぶ

+

tw_twitter_api

*1:参考情報：Node.jsの開発をしている人には馴染みがあるCommonJSにTitanium Mobileも準拠しています。詳しくは本家の英語情報を（http://wiki.appcelerator.org/display/guides/CommonJS+in+Titanium）

11年11月28日月曜日

Titanium Mobileの動作原理

JavaScriptインタプリタ JavaScriptインタプリタ

APIs APIs

Application（JavaScriptで書かれたプログラム）

iOS Android OS

Modules Modules

Native iOS app Native Android app

TitaniumMobile

JavaScriptのプログラムからObjective-CやJavaで構築されたTitaniumMobileのAPIを呼び出して動作（※誤解されやすいですがJavaScriptのコードがObjective-CやJavaに自動変換されているわけではありません）

11年11月28日月曜日

Objective-Cで構築されたTitanium.UI.Viewのソースコード

Javaで構築されたTitanium.UI.Viewのソースコード

参考までにTitanium MobileのAPI（Titanium.UI.View）

※ ソースコードはGitHub（https://github.com/appcelerator/titanium_mobile）にあります。

11年11月28日月曜日

Titanium Mobileが提供するAPI✤ iPhone/AndroidのそれぞれのAPIをより簡単かつ共通的に操作できるようになってます。

✤ 代表的な機能は右記通り

NativeUI

メディア機能

データI/O

ネットワーク通信

デバイス操作

ラベル、テキスト入力、ボタン等、Webブラウザ機能

画像、動画の表示

ファイルシステムの操作SQLiteデータベース

XHR(XMLHttpRequest)Socket通信

カメラ、GPS

11年11月28日月曜日

Titanium Mobileでの開発する上での参考書籍✤ 基本的には以下書籍をベースにしてTitaniumMobileの使い方について説明しますので復習/予習のために書籍購入をオススメします

✤ TitaniumMobileで開発するiPhone/AndroidアプリJavaScriptによるスマートフォンアプリ開発入門http://amzn.to/tIcL0t

11年11月28日月曜日

Titanium Studioとは？http://www.flickr.com/photos/alanant/4483533096/

11年11月28日月曜日

Titanium Studioとは？✤ コード補完、Git連携をサポートしたエディタ、プロジェクトの管理、シミュレーター、実機でのアプリの実行機能を持った統合開発環境

✤ 詳しくはこちら（http://bit.ly/vBbq20）

✤ Aptana Studioがベースになっているので、細かい使い方についてはAptanaの情報も参考になると思います

✤ ※日頃からプログラミングされている人向けの情報※Emacs/Vim/TextMate/CotEditor..等各自好みのテキストエディタを使ってコードを書き、ターミナルから所定のコマンド入力することでbuildすることも可能。くわしくはこちら（http://wiki.appcelerator.org/display/guides/Titanium+Command+Line+Interface）

11年11月28日月曜日

プロジェクト設定✤ TitaniumStudioを起動した後、File→New→Titanium Mobile Projectと進みます

✤ 右記画面が表示されますので今回は以下入力してプロジェクトの設定を行います✤ Project name: webbrowse

✤ App Id:jp.co.pasonatech.20111130

✤ 補足）今回はローカルでの作業のため App Idを仮にこのようにしましたがAppStoreで配布する場合、他のアプリケーションと重複することは出来ません。

11年11月28日月曜日

プロジェクト設定後✤ TitaniumStudioが自動的にいくつかのフォルダ＆ファイルを自動生成して最終的に右記のような画面が表示されます

✤ app.js以外のファイルは基本的には編集することはありません。

✤ TitaniumStudio起動時にはウィンドウが複数表示されて画面が狭く感じる場合、レイアウト変更可能です

✤ フォントが小さく感じる場合補足資料を参照

11年11月28日月曜日

ビルドしてiPhoneSimulator上で動作するか確認しましょうAppExplorerのウィンドウを選択して1.赤枠のボタンをclick2.iPhoneSimulatorを選択

11年11月28日月曜日

Webサイトを表示出来るアプリケーションを作る※「TitaniumMobileで開発するiPhone/Androidアプリ」34ページから38ページを参考に作成

11年11月28日月曜日

アプリケーション開発①✤ App Explorerからapp.jsをダブルクリックしてapp.jsを開きます

✤ App Explorerがどこにあるかわからない場合にはTitanium StudioのメニューでWindow→Show View→App Explorerを選択するとApp Explorerが表示されます

11年11月28日月曜日

アプリケーション開発②app.jsソースコード前半＆解説// this sets the background color of the master UIView (when there are no windows/tab groups on it)Titanium.UI.setBackgroundColor('#000');// create tab groupvar tabGroup = Titanium.UI.createTabGroup();//// create base UI tab and root window//var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff'});var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1});var label1 = Titanium.UI.createLabel({! color:'#999',! text:'I am Window 1',! font:{fontSize:20,fontFamily:'Helvetica Neue'},! textAlign:'center',! width:'auto'});win1.add(label1);

タイトルが「Tab 1]、背景色が白（#fff）のWindowを生成win1という名前を付けてます

タイトルが「Tab 1]、アイコンを指定、対応するWindowとしてWin1を指定したTabを生成tab1という名前を付けてます

表示内容「I am Window 1」、表示色を灰色（#999）、フォント名＆サイズを指定したLabelを生成label1という名前を付けてます

win1の内部にlabel1を配置してます

Tabを格納するためのTabGroupを生成tabGroupという名前を付けてます

11年11月28日月曜日

アプリケーション開発③ここまでのUIイメージ

TabGroup

tabwindow

label

11年11月28日月曜日

アプリケーション開発④app.jsソースコード後半＆解説// create controls tab and root window//var win2 = Titanium.UI.createWindow({ title:'Tab 2', backgroundColor:'#fff'});var tab2 = Titanium.UI.createTab({ icon:'KS_nav_ui.png', title:'Tab 2', window:win2});var label2 = Titanium.UI.createLabel({! color:'#999',! text:'I am Window 2',! font:{fontSize:20,fontFamily:'Helvetica Neue'},! textAlign:'center',! width:'auto'});win2.add(label2);//// add tabs//tabGroup.addTab(tab1); tabGroup.addTab(tab2); // open tab grouptabGroup.open();

背景色が白（#fff）のWindowを生成win2という名前を付けてます

タイトルが「Tab 2]、アイコンを指定、対応するWindowとしてWin2を指定したTabを生成tab2という名前を付けてます

表示内容「I am Window 2」、表示色を灰色（#999）、フォント名＆サイズを指定したLabelを生成label2という名前を付けてます

win2の内部にlabel2を配置してます

tabGroupの内部にtab1，tab2を配置

tabGroupを開く（＝ 表示する）11年11月28日月曜日

アプリケーション開発⑤app.jsを改造する

var label1 の行から、win1.add(label1);の所まで削除します

// this sets the background color of the master UIView (when there are no windows/tab groups on it)Titanium.UI.setBackgroundColor('#000');// create tab groupvar tabGroup = Titanium.UI.createTabGroup();//// create base UI tab and root window//var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff'});var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1});var label1 = Titanium.UI.createLabel({! color:'#999',! text:'I am Window 1',! font:{fontSize:20,fontFamily:'Helvetica Neue'},! textAlign:'center',! width:'auto'});win1.add(label1);

11年11月28日月曜日

アプリケーション開発⑥WebView配置// this sets the background color of the master UIView (when there are no windows/tab groups on it)Titanium.UI.setBackgroundColor('#000');// create tab groupvar tabGroup = Titanium.UI.createTabGroup();//// create base UI tab and root window//var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff'});var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1});var webView = Titanium.UI.createWebView({! url:'http://www.google.co.jp'});win1.add(webView);

11年11月28日月曜日

アプリケーション開発⑦WebViewとは✤ WebKitブラウザ機能とほぼ同等の機能を持った部品✤ WebKitとは：WebブラウザのSafariにも標準搭載されるオープンソースソフトウェアでHTML、CSS、JavaScript等を解釈して画面描画を担当

✤HTML5/CSS3ベースのHTMLコンテンツをほぼそのまま動作させることが可能

✤ 指定したURLのHTMLコンテンツ表示

✤ あらかじめ自分が作成したHTMLコンテンツの表示

Titanium Mobileの機能を使ってiPhoneアプリでよく見かける標準的なUI（含む

HTMLベースのコンテンツを表示する部分にTitaniumMobileのWebViewを活用

11年11月28日月曜日

アプリケーション開発⑧HTMLコンテンツ準備して表示～中略～var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff'});var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1});var webView = Titanium.UI.createWebView({});webView.html = '<html>' + '<head>' + '<title>自分で準備したHTMLを表示</title>' + '</head>' + '<body>' + '<h1>自分でつくったHTMLコンテンツ表示する</h1>' + '<p>こんな感じでコンテンツが表示できます</p>' + '</body>' + '</html>';win1.add(webView);

11年11月28日月曜日

余力あったら簡易WebブラウザTitanium.UI.setBackgroundColor('#FFF');var tabGroup = Titanium.UI.createTabGroup();var win1 = Titanium.UI.createWindow({ title:'簡易ブラウザ', backgroundColor:'#fff'});var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1});// １．URLを入力できるテキストフィールドを準備var urlBox = Titanium.UI.createTextField({ color:'#336699', top:10, left:10, width:200, height:30, hintText:'enter url', keyboardType:Titanium.UI.KEYBOARD_URL, returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, autocapitalization: false, borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED});

urlBox.addEventListener('blur',function(e){ actInd.show(); webView.url = e.value; webView.reload();});win1.add(urlBox);

// ２．読み込み処理を中止するボタンを準備var stopBtn = Ti.UI.createButton({ title:'stop', top:10, left:220, width:60, height:30, systemButton:Titanium.UI.iPhone.SystemButton.STOP});stopBtn.addEventListener('click',function(e){ webView.stopLoading(); actInd.hide();});win1.add(stopBtn);

次のページに続く

11年11月28日月曜日

余力あったら簡易Webブラウザ// ４．「読み込み中」ということを示すためのActivityIndicatorを準備var actInd = Titanium.UI.createActivityIndicator({ top:50, height:55, width:'auto', opacity:0.5, color:'#FFFFFF', backgroundColor:'#000', borderRadius:5, borderColor:'#000', font:{fontFamily:'Helvetica Neue', fontSize:13}, message:' Loading...', style:Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN});win1.add(actInd);

tabGroup.addTab(tab1);tabGroup.open();

// ３．HTMLコンテンツを表示するためのWebViewを準備var webView = Titanium.UI.createWebView({ top:50, left:0, width:'auto', height:'auto'});webView.addEventListener('beforeload',function(e){ actInd.show();});webView.addEventListener('load',function(e){ actInd.hide();});win1.add(webView);

11年11月28日月曜日

補足資料：App Id：

✤ 自分が作成するアプリケーションがAppStore上で唯一のものと判別出来るように利用されるID

✤ 唯一のIDとして名前を考えるときにはドメイン名を反転させたもの＋アプリケーション名が推奨されてます。仮にアプリケーション名をpasonatechappsとした場合に

✤ 独自ドメイン（仮：h5y1m141.jp）を取得している場合：jp.h5y1m141.pasonatechapps

✤ 独自ドメインは持ってないがtwitterアカウント（例:h5y1m141）を持っている場合：com.twitter.h5y1m141.pasonatechapps

11年11月28日月曜日

補足資料：TitaniumStudioのフォント設定

✤ フォントが小さく読みづらい場合TitaniumStudio設定変更します

✤ TitaniumStudio → Preferencesを選択

✤ Generalメニューをクリック

✤ Appearanceをクリック

✤ Colors and Fontsをクリック

✤ TextFontのメニュークリック

11年11月28日月曜日