2817 チュートリアル スマートフォンと 呼 ばれる 携 帯 型 端 末 の 普 及 は 目 覚 しいものがあり アプリと 呼 ばれるス マートフォン 向 けアプリケーションも 日 々 膨 大 な 数 が 世 界 中 でリリースされています 今 回 は 代 表 的 な2つのスマートフォン 用 OS 上 でのソフトウェア 開 発 に 関 するチュートリアル ( 全 4 回 シリーズ)の 第 4 回 目 として 東 洋 大 学 の 塩 谷 隆 二 先 生 中 林 靖 先 生 に 解 説 していた だきます なお チュートリアル 記 事 は1ページ 目 のみを 本 誌 に 掲 載 し 続 きは 日 本 計 算 工 学 会 HP 上 で 公 開 していますので そちらも 併 せてご 参 照 ください スマートフォンアプリ 開 発 入 門 - ios vs. Android(4) 塩 谷 隆 二 中 林 靖 1 はじめに 1 3 Android Web App Inventor 1 App Inventor ios vs. Android OS OS ios Objective-C Android Java Windows Phone C# Visual Basic 筆 者 紹 介 1996 CAE ADVENTURE 1999 JavaScript HTML 1 PhoneGap Titanium mobile PhoneGap Nitobi Software HTML CSS JavaScript Web Web Adobe Systems Titanium mobile Appcelerator JavaScript Titanium Studio ios Android Titanium mobile Windows Mac OS X Linux Titanium Desktop 1 4 Web Vol.17, No.3 HP: http://www.jsces.org/issue/journal/ Vol.17, No.3 2012 37
2 Titanium Mobile によるアプリ 開 発 Titanium Mobile(タイタニウム モバイル)も こ れまで 紹 介 してきた Xcode や Eclipse 同 様 頻 繁 にバ ージョンアップが 行 われており インストール 手 順 が バージョンの 違 いにより 大 幅 に 異 なることがあるため 今 回 は 手 順 については 概 略 を 示 すのみとし 最 新 のバ ージョンの 手 順 については Web 上 の 情 報 を 参 照 して いただきたい (1) Titanium Mobile の 概 要 Titanium Mobile は 米 国 Appcelerator Inc.[1]によっ て 開 発 販 売 されている JavaScript を 用 いたマルチプ ラットフォームに 対 応 する 開 発 環 境 であり 本 稿 執 筆 時 において 30 万 人 の 開 発 ユーザーが 登 録 と 示 されて いる 無 料 版 の 基 本 システムからセキュリティーなど に 対 応 した 有 料 版 をリリースしている 無 料 版 の 基 本 システムには Titanium Mobile SDK と Titanium Studio があり Titanium Mobile SDK を 用 いることにより 単 一 コードから Android/iOS/Web などのハイブリッドア プリを 開 発 することができ Titanium Studio は Eclipse をベースにした 開 発 環 境 である 本 稿 では Titanium Studio を 用 いた 開 発 方 法 について 解 説 する Titanium Studio ではプログラミング 言 語 は JavaScript のみにより ios SDK や Android SDK 向 け のアプリを 開 発 することができるが 実 行 環 境 には ios SDK や Android SDK が 必 要 となる そのため 動 作 するプラットフォームとして Windows, Mac OSX, Linux をサポートしているが ios SDK を 使 用 する 時 は Mac OSX のみとなるのは Xcode と 同 様 である (2) ダウンロードとインストール 本 稿 では ios と Android の 両 方 での 実 行 の 様 子 を 示 すために Mac OSX 上 での 実 行 方 法 を 解 説 する ソフトウェアのダウンロードにはユーザー 登 録 が 必 要 となる 以 下 に 示 す Appcelerator Inc.のホームページ の sign up よりユーザー 登 録 を 行 い login する http://www.appcelerator.com メニューの platform から Titanium studio と 進 み Download Titanium ボタンを 選 択 する Titanium Downloads の 項 目 から 対 象 の OS を 選 択 する 本 稿 執 筆 時 点 での 配 布 バージョンは Titanium Mobile SDK 2.1.0 と Titanium Studio 2.1.0 であり サポートしてい る OS は OS X Windows Linux (32 Bit) Linux ( 64 Bit ) となっている OS X を 選 択 すると Titanium_Studio.dmg のダウンロードが 行 われる この ファイルをマウントし Titanium Studio アイコンを Applications アイコンにドラッグ( 図 1)することによ り 実 行 ファイルが 以 下 の 場 所 にコピーされる /Applications/Titanium Studio/TitaniumStudio.app これを 実 行 すると Login 画 面 ( 図 2)が 表 示 されるの で ユーザー 登 録 した 内 容 で Login する クラウドシ ステムの 利 用 オプションも 用 意 されており オンライ ン 状 態 での 利 用 が 必 要 となる 図 1 Titanium Studioのインストール 画 面 図 2 Titanium StudioのLogin 画 面 (3) Hello World の 実 行 Dashboard ウィンドウに Configure, Learn, Develop, Explore のタブがあり Configure タブでは Android や ios SDK の 設 定 が 行 える( 図 3) Learn タブでは 設 定 や 使 い 方 などドキュメントが 多 く 用 意 されている 新 規 プロジェクトを 作 成 するには Develop タブの Templates 内 Create new project 横 NEW PROJECT ボタ ンをクリックし Mobile を 選 択 ( 図 4)し Project Name ( 例 :TM01), App Id( 例 :com.sample.tm01 などアプ リケーションを 一 意 に 判 別 するための ID)を 入 力 する ここでは 例 として Single Window Application を 選 択 したケースを 紹 介 する プロジェクトを 作 成 すると 左 側 の workspace タブ 内 に 作 成 したプロジェクトフォル ダが 表 示 され その 中 の Resources フォルダ 内 に 選 択 した Target(android, iphone など)のフォルダが 作 成 さ れている 図 3 Titanium StudioのConfigure 画 面 計 算 工 学 (37-2) Vol.17, No.3 2012
図 4 Titanium Studio の Develop 画 面 また 最 初 に 実 行 される JavaScript のソースファイル app.js が Resources フォルダ 内 に 作 成 されている app.js の 中 を 見 ると tablet, android, その 他 で 分 岐 されてい るのがわかる( 図 5) 図 6 Run Configurations 画 面 if (istablet) { Window = require('ui/tablet/applicationwindow'); else { // Android uses platform-specific properties to create windows. // All other platforms follow a similar UI pattern. if (osname === 'android') { Window = require('ui/handheld/android/applicationwindow'); else { Window = require('ui/handheld/applicationwindow'); 図 7 Titanium Studio の Develop 画 面 図 5 app.jsの 分 岐 部 分 各 ApplicationWindow.js ファイルを 見 ると 全 てから 次 の 共 通 ファイルが 呼 ばれていることがわかる var FirstView = require('ui/common/firstview'); この FirstView.js を 見 ると 9 行 目 に text:string.format(l('welcome'),'titanium'), とあるので この 部 分 に Hello World を 追 加 保 存 し 実 行 を 行 う 実 行 はメニューから Run - Run Configurations... を 選 択 し 実 行 環 境 を 作 成 する Titanium Android Emulator と Titanium ios Simulator を ダブルクリックし New_configuration を 追 加 する( 図 6) 右 側 画 面 に Name, Project を 入 力 し Apply をク リックする 図 6 では TM01 プロジェクトを Android (TM01Android)と ios(tm01ios)で 実 行 する 環 境 をそれぞれ 作 成 した 様 子 を 示 している 実 行 環 境 を 作 成 後 は Run ボタンより 各 環 境 を 選 択 可 能 となる( 図 7) 作 成 した 2 つの 実 行 環 境 で 実 行 し 左 側 に ios Simulator 右 側 に Android Emulator 上 で 実 行 した 様 子 を 図 8 に 示 す 図 8 Simulator 上 での 実 行 画 面 (4) Kitchen Sink 実 行 次 に Android で 用 意 されている API Demos に 対 応 する 豊 富 なサンプルアプリとして Kitchen Sink の 利 用 について 紹 介 する ダウンロードは Dashboard の Develop タブ 内 Samples の 中 にある Kitchen Sink の IMPORT をクリックする( 図 9) 図 9 Kitchen Sink の IMPORT 計 算 工 学 (37-3) Vol.17, No.3 2012
Project name と Location 入 力 ウィンドウが 表 示 され るので 適 当 な 名 前 を 入 力 し 新 規 プロジェクトを 作 成 する( 図 10) 作 成 されたプロジェクトについて 実 行 環 境 を 作 成 し 実 行 した 様 子 ( 左 側 に ios Simulator 右 側 に Android Emulator)を 図 11 に 示 す 初 期 メニューの 画 面 から 豊 富 なサンプルが 選 択 可 能 なため 動 作 を 確 認 し 対 応 したソースファイルが Kitchen Sink Resources examples の 中 にあるため 参 考 にすることができる ここでは Platform Sockets 内 にある Socket 通 信 を 利 用 したサンプルアプリについて 紹 介 する wifi で Lan に 接 続 している 2 台 で 実 行 し 2 台 間 でのデータ 通 信 を 行 うアプリである 接 続 要 求 側 が socket_connect.js に 待 機 側 が socket_listener.js に 記 述 されている これを 利 用 すると スマートフォンを 用 いた 並 列 処 理 も 可 能 となる ios Simulator で Listening socket を 実 行 し Android Emulator で Connecting socket を 実 行 した 様 子 を 図 12 図 12 sockets アプリ 実 行 の 様 子 に 示 す Android 側 で ios 側 に 表 示 されている IP アド レスとポート 番 号 を 入 力 し メッセージを 入 力 後 Write ボタンを 押 すと メッセージが ios 側 に 送 信 さ れ 表 示 される このように 複 数 の Simulator によるテストを 行 うに は 異 なる OS 利 用 となるが 複 数 Simulator が 同 時 に 起 動 できる 利 便 性 がある 図 10 Kitchen Sink の Project 作 成 画 面 3 PhoneGap によるアプリ 開 発 PhoenGap(フォンギャップ)のバージョンアップも Titanium Mobile 等 と 同 様 に 非 常 に 高 い 頻 繁 で 行 われて おり 本 稿 執 筆 時 点 のバージョンは 2.0.0 であるが PhoneGap はバージョンが 上 がってもインストール 手 順 や 使 い 方 等 はそれほど 変 わらずに 機 能 アップが 成 さ れている 以 下 では バージョン 2.0.0 を 使 用 した 説 明 を 行 う 図 11 Kitchen Sink の Simulator 上 での 実 行 画 面 (1) PhoneGap の 概 要 PhoneGap[2]は カナダのNitobi Softwareによって 開 発 されたHTML, CSS, JavaScriptを 用 いるオープンソー スのモバイルアプリ 開 発 フレームワークであり 各 プ ラットフォームのWebレンダリング 機 能 を 利 用 して 実 行 されるため Webアプリケーションを 開 発 するよう にアプリ 開 発 を 行 える 現 在 はAdobe Systemsに 買 収 さ れ 開 発 が 進 められており Adobe Dreamweaverの 新 機 能 としても 実 装 されている またモバイル 開 発 フレー ムワークをオープンソース 化 し Apache Software Foundationに 寄 贈 され Apache Cordovaプロジェクト [3]として 公 開 されているため PhoneGapとCordovaの 名 前 を 有 しており ファイル 名 などにCordovaが 用 いら れている PhoneGapは 同 一 のHTML, CSS, JavaScriptからiOSや Android 用 のアプリを 開 発 することが 出 来 るが 実 際 に iosやandroid 用 のアプリを 開 発 するためにはそれぞれ 計 算 工 学 (37-4) Vol.17, No.3 2012
以 下 のツールが 必 要 となる <iosアプリ 開 発 > Mac OS X, Xcode, ios SDK <Androidアプリ 開 発 > JDK, Eclipse, Android SDK, ADT すなわち 本 チュートリアルの 1 回 目 で 解 説 した ios や Android 用 のアプリをそれぞれ Objective-C や Java のソースコードから 開 発 する 場 合 と 全 く 同 じ 環 境 を 用 意 し それに PhoneGap をプラグインとして 追 加 する 形 を 取 る 以 下 では PhoneGap 2.0.0 を 用 いて Android 用 アプリ を 開 発 するための 詳 細 について 説 明 する なお PhoneGap 以 外 の 各 ツールのバージョンは 以 下 の 通 り である JDK 1.7.0 Eclipse Pleiades 3.6 Android SDK 20.0.1 ADT 20.0.1 (2) ダウンロードとインストール 以 下 のホームページ( 図 13)よりダウンロードする http://phonegap.com/ ここでは 既 にこの 構 築 が 終 了 しているものとして 説 明 を 続 ける 次 に Eclipse のファイルメニューから 新 規 Android プロジェクトを 作 成 し プロジェクト 名 を HelloAndroid ビルド ターゲットを Android 2.2 とする 作 成 されたプロジェクト エクスプローラの HelloAndroid ツリーの 中 に 以 下 のファイルとフォ ルダをそれぞれ 指 定 された 場 所 にコピーする libs フォルダの 中 に 既 に android-support-v4.jar 等 のファ イルがあるが ここに 前 述 した cordova-2.0.0.jar フ ァイルをコピーする なお Android-SDK のバージョ ンによっては libs フォルダがデフォルトで 存 在 しな いが その 場 合 は 新 規 作 成 してから cordova-2.0.0.jar ファイルをコピーする 次 に assets フォルダの 中 に 新 規 に www フォルダを 作 成 し その 中 に cordova-2.0.0.js ファイルをコピーし また 同 じフ ォルダに 空 の 新 規 ファイル index.html を 作 成 する 最 後 に res フォルダの 中 に xml フォルダをコピ ーする ファイル 情 報 を 更 新 させるため ファイル- リフレッシュ(F5) 実 行 する この 操 作 により Java の Build Path の Library Android Dependencies 内 に cordova-2.0.0.jar が 追 加 される プロジェクト エクス プローラは 図 14 の 様 になる 図 13 PhoneGap ホームページ 最 新 バージョンを 上 記 URL よりダウンロードし zip ファイルを 展 開 すると lib フォルダの 中 に Android, ios, BlackBerry などの 各 OS 用 のライブラリが 用 意 さ れている 本 稿 では Android 用 アプリ 開 発 のみについ て 説 明 するが この 場 合 には lib/android フォルダ 内 にある 以 下 のファイルとフォルダのみ 必 要 となる cordova-2.0.0.jar cordova-2.0.0.js xml プロジェクトを 作 成 する 毎 に これらをプロジェクト フォルダの 中 にコピーする 必 要 がある その 詳 細 は 次 に 説 明 する Hello Android の 実 行 方 法 で 示 す (3) Hello Android の 実 行 本 チュートリアルの 1 回 目 または 3 回 目 を 参 照 して Eclipse 上 で Android アプリを 開 発 する 環 境 を 構 築 する 図 14 HelloAndroid プロジェクトのファイルツリー 以 上 で PhoneGap によるアプリ 開 発 の 環 境 が 整 ったの で 次 にプログラムを 書 く 段 階 となる 初 めに src com.example.helloandroid フォルダ(フォルダ 名 はプロジェクト 名 パッケージ 名 による) 内 にある MainActivity.java ファイルを 図 15 のように 下 線 を 付 け た 部 分 を 書 き 換 える このファイルの 内 容 は Android SDK のバージョンによって 若 干 異 なるので 注 意 が 必 要 である 下 線 部 で 行 っていることを 説 明 すると 最 初 の 個 所 は PhoneGap のクラスライブラリを 使 うための 宣 言 2 つ 目 はメインのアクティビティを Activity クラスでは なく DroidGap という PhoneGap で 提 供 された 新 たなク ラスを 継 承 して 作 成 することを 意 味 している 最 後 の 計 算 工 学 (37-5) Vol.17, No.3 2012
行 はロードする html ファイルの 場 所 を 指 示 している 次 に HelloAndroid プロジェクトのトップフォルダ にある AndroidManifest.xml ファイル 中 の 2-5 行 目 package com.example.helloandroid; import android.os.bundle; import org.apache.cordova.droidgap; public class MainActivity extends DroidGap { @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); super.loadurl("file:///android_asset/www/index.ht ml"); 図 15 MainActivity.java ファイルの 書 き 換 え <supports-screens android:largescreens="true" android:normalscreens="true" android:smallscreens="true" android:resizeable="true" android:anydensity="true" /> "android.permission.camera" /> "android.permission.vibrate" /> "android.permission.access_coarse_location" /> "android.permission.access_fine_location" /> "android.permission.read_phone_state" /> "android.permission.internet" /> "android.permission.receive_sms" /> "android.permission.record_audio" /> "android.permission.modify_audio_settings" /> "android.permission.read_contacts" /> "android.permission.write_contacts" /> "android.permission.write_external_storage" /> "android.permission.access_network_state" /> 図 16 AndroidManifest.xml ファイルの 追 加 項 目 <manifest>タグと 7 行 目 <user-sdk>の 間 に 図 16 のタグ を 追 加 する.xml ファイルを 編 集 するには ファ イルを 右 クリックし アプリケーションから 開 く テキ スト エディターを 選 択 することにより ソースファ イルの 編 集 画 面 が 開 く 次 に assets フォルダ 内 の www フォルダ 内 に 作 成 した index.html ファイルを 編 集 する ここでは 画 面 に Hello Android と 表 示 するアプリを 作 成 する ため 図 17 に 示 す 内 容 を 追 加 する <!DOCTYPE HTML> <html> <head> <title>hello Android</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> </head> <body> <h1>hello Android</h1> </body> </html> 図 17 Hello Android 用 の index.html ファイル head 部 分 で cordova-2.0.0.js を 読 み 込 むことを 指 定 するだけで body 部 分 は 通 常 の HTML の 書 式 と 何 ら 変 わらない この 例 では<h1>のサイズで Hello Android の 文 字 を 表 示 するだけであり 実 行 結 果 は 図 18 の 通 りとなる 図 18 Hello Android の 実 行 結 果 この 実 行 結 果 は html ファイルを Android 端 末 にブラウ ザにより 表 示 したのではなく HTML で 書 かれたソー スを PhoneGap によって Android アプリに 変 換 して Android 端 末 で 実 行 している 点 である 同 様 の 方 法 で 任 意 の HTML で 書 かれた Web ページ を Android アプリ(または ios や BlackBerry アプリな ど)に 変 換 することができ HTML の 拡 張 である JavaScript や CSS, HTML5 などを 利 用 することが 可 能 となっている 計 算 工 学 (37-6) Vol.17, No.3 2012
(4) JavaScript の 実 行 本 チュートリアルで 何 度 か 登 場 している 円 を 描 画 するアプリを 例 として JavaScript を 用 いた HTML ソ ースを PhoneGap により Android アプリに 変 換 する 方 法 を 試 してみる HelloAndroid との 変 更 点 は index.html ファイルだけ であり それ 以 外 の.java ファイルや.xml ファイル 等 は 全 てそのまま 用 いる 事 が 出 来 る Index.html ファイル は 図 19 のように 書 き 換 える なお プロジェクト 名 は Test Circle としている <!DOCTYPE HTML> <html> <head> <title>test Circle</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> </head> <body> <canvas id="mycanvas" width="320" height="240" style="border:1px solid #c3c3c3;"> </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.fillstyle="#ff0000"; ctx.beginpath(); ctx.arc(160,120,70,0,math.pi*2,true); ctx.closepath(); ctx.fill(); </script> </body> </html> 図 19 Test Circle 用 の index.html ファイル JavaScript の 詳 細 は 省 略 するが canvas を 利 用 して 320x240 のキャンバスを 用 意 し その 中 心 (160, 120) に 半 径 70 の 赤 い 円 を 描 く 簡 単 なものである このファ イルを 用 いた 実 行 結 果 を 図 20 に 示 す 4 おわりに 本 チュートリアル 最 終 回 として Titanium Mobileと PhoneGapを 用 いたアプリ 開 発 の 方 法 について 解 説 し た これらのツールを 利 用 することにより html/javascript/css/html5 等 のWebベースのソースコ ードからiOS/Android/BlackBerry 等 のスマフォ 用 のア プリケーションを 開 発 することが 可 能 となり これま でに 開 発 されてきた 膨 大 なソフトウェア 資 源 がそのま ま 次 世 代 のOSであるスマフォ 用 OS 上 で 利 用 出 来 るこ とや 複 数 のOSのアプリを 同 時 に 単 一 ソースで 開 発 出 来 ること 等 メリットは 大 きい 図 21 に HTML5 および WebGL を 用 いた CAE システ ムを 利 用 するための Web アプリケーション[4]を 使 用 した 解 析 モデルの 表 面 パッチ 情 報 をブラウザ 上 で 表 示 した 例 を 示 すが WebGL についても Titanium Mobile と PhoneGap では 実 装 可 能 であり このような 計 算 工 学 に 利 用 されている Web アプリも スマフォアプリと して 構 築 が 可 能 となる 本 チュートリアルでは 特 に ios と Android に 着 目 して 様 々なアプローチでアプリを 開 発 する 方 法 を 解 説 してきた 本 稿 執 筆 の 間 にも 紹 介 したツールのバージ ョン 更 新 が 頻 繁 に 行 われていたように 今 後 もさらに 有 用 なツールが 多 く 登 場 してくると 思 われる 計 算 工 学 においてもスマフォやタブレット PC の 利 用 が 広 ま り 多 くの 関 連 アプリが 開 発 されることを 期 待 する 参 考 文 献 [1] Appcelerator Inc. : http://www.appcelerator.com [2] PhoneGap: http://phonegap.com/ [3] Apache Cordova: http://incubator.apache.org/cordova/ [4] Parallel CAE System for Large Scale problems Based on HTML5 and WebGL, K. Yodo, et al., Proceedings of the ASME IDETC/CIE 2012, DETC2012-70818.pdf, pp.1-7, 2012. 図 20 Test Circle の 実 行 結 果 図 21 WebGL による 表 面 パッチ 表 示 画 面 計 算 工 学 (37-7) Vol.17, No.3 2012