Allied ArchitectsAllied ArchitectsEngineer Blog

Javascriptでスマホアプリを作ろう〜Titanium mobile 入門〜

2013/10/21 JavaScript

お久しぶりです。野瀬です。モニプラ ファンブログを担当してます。
前回はC#でWindowsアプリを作るシリーズでいこうと思ったのですがPC
シリーズ打ち切りを余儀なくされました。C#ではまた違った形で記事にできればと思います。
こちらが前回の記事

さて今回からはこれ!

Titanium Mobile!

Titanium Mobileとは何かというとHTMLとJavascriptでiPhone/Androidアプリが作れるというもの。
ではさっそく作ってみましょう。
あ、ちなみになんて読むかというと「チタニウム モバイル」

と読んだ方、恥ずかしい!!

正解は「タイタニウム モバイル」

 

開発環境〜新規プロジェクト作成

今回開発する環境として Titanium Studioを使ってみます。
インストールなどはここでは省略します。

Titanium Studioを起動するとこんな画面

で左側にある[Create Project]ボタンを押します。
次の画面 Select a wizard でMobile Projectを選択し、[Next >]ボタン

Project Templateの画面

今回は初めてなので[Classic] -> [Default Project] -> [Next >]

Project Location画面でProject nameとApp Id入力し[Finish]
すると...

これでプロジェクト完成!!!

TiApp Editorタブがアプリの設定ファイル編集画面

app.jsタブがどうやらソースファイルのようでこのファイルを編集するのかな。。。

まずはこのまま実行してみます!!

コンソールが動いてます!!

出たっ!!

Hello World〜ちょこっと応用

次にこの[I am Window 1]テキストエリアの文言を[Hello World 1]へ変更してみましょう!

app.js

変更前

変更後

そして、実行…

出来ました!!ちゃんと変更出来ましたね。

ではもうちょっと変更を加えます。タブを追加し、windowにTableViewを追加してみたいと思います。

表示するWindowのオブジェクトを生成。
Tabのオブジェクトを生成。
TableViewで必要なLabelオブジェクトデータ群を生成。
TableViewを生成しを表示Windowに追加する。
TabをTabGroupへ追加する。
追加したプログラムについての流れはこんな感じ。

そして、実行へ…

出来ました!!!
タブが三つになりテーブルビューも表示されました。
まだまだ色々できそうですが今日はこのへんで終わりにします。

また今回はAndroidだけでしたがその他にもiOSやBlackBerryなどでも作れそうなので
次回はそのあたりを紹介したいと思います。

nose.rei
  • nose.rei
  • ソフトウェアエンジニア
  • こんにちは、フットサル大好きな二児のパパです。 たまにはいい記事書けるようにがんばります。よろしくお願いします~!

RELATION ENTRY

Vagrant + PHP + Xdebug リモートデバッグする設定手順

Vagrant + PHP + Xdeb...

2014/08/29 Vagrant

お久しぶりです。野瀬です。 最後の投稿から約1年が経っており、時が経つのは早いなぁ〜と感じる今日この頃。 最近自分の周りでの開発環境はVagrantを使うのが増えてきています。 自分も流行に乗っかりVagrantを使って開発しています。 今回はそんなVagrantとPHPとXde...

続きを読む

C#でWindows アプリ作ってみる。その1:環境構築

C#でWindows アプリ作ってみる。...

2013/05/1 C#

ごあいさつ はじめまして、アライドアーキテクツの野瀬です。 先月4月にアライドアーキテクツに入社しまして、モニプラJPを担当してます。 普段ブログなど書くことがない私なので読みにくいとは思いますが、挑戦してみたいと思います。 暖かい目で見守ってくださると幸いです。 ...

続きを読む

nose.reiの記事一覧へ

ページTOPへ