Technical Works

ASC Technical support site

*

ハイブリッドアプリの開発について(2)

      2014/12/24

ハイブリッドアプリの開発環境構築

ハイブリッドアプリ開発とは、HTML5を中心としたWeb技術で、端末上で動作する、いわゆるネイティブ形式のアプリを開発する手法です。Web技術はモバイルのOSに関係なく共通です。つまり、一つのソースコードからAndroidとiOSの両方に対応したアプリを作ることができるわけです。

HTML5を活用したハイブリッドアプリ開発では、モバイルOSが標準で提供する「WebView」の仕組みを活用してアプリケーションを開発します。WebViewはアプリ内でブラウザ機能を利用する仕組みで、一般的にはアプリの画面にHTMLを表示するために使用します。ハイブリッドアプリ開発では、このWebViewの仕組みを応用してHTMLやJavaScriptのソースコードを展開します。そうすることで、さまざまなデバイスに対応する、いわゆるクロスプラットフォームなアプリを実現します。

ハイブリッドアプリを開発するためのフレームワークがいくつかありますが、その中でも最も有名なものは「Cordova (PhoneGap)」です。ここでは「Cordova (PhoneGap)」について紹介します。

HTML5とネイティブ間のブリッジ

Cordavaを使うことでJavaScriptからカメラ、コンパス、センサー、連絡先、ネットワークなどの本来JavaやObjective-CでしかアクセスできないネイティブのAPIを呼ぶことができます。また、Cordovaのプラグインを自分で作ってHTML5アプリに組み込むことで、JavaScriptから呼ぶことのできるネイティブのAPIを拡張することができます。

 HTML5をアプリとしてラッピングする

CordovaにはデフォルトでモバイルアプリをWebViewで表示する機能が備わっています。CordovaがWebViewに関連するネイティブのコードを提供するので、ハイブリッドアプリ開発者は、HTMLアプリを用意するだけで、ネイティブのコードを記述することなしにアプリを開発できます。

Cordovaについて(まとめ)

Cordovaにはデフォルトでモバイルアプリを・作成するアプリのフレームワーク的な存在です。

・アプリ内ブラウザ(WebView)の生成
・JavaScriptからネイティブコードのAPIをコールする仕組みの提供
・プラグインと呼ばれる機能拡張の仕組みの提供
・セキュリティ機能
・カメラ、GPSのデバイス用APIの提供
・UIについて: CordovaはUIを持たないので、onsenUIまたはJquery Mobileを使用する。

今回の開発環境はWindows上でAndroidの開発を前提に設定します。iOSの開発はMac上の開発ツールにソースをコピーすることでiOS端末のアプリケーションを開発することができます。
よって今回使用するOSは Windows7-64bi上のディレクトリー(C:\Android)に次の順序で構築します。

(1)Java JDKのインストール
(2)Apache Antのインストール
(3)Android SDK( Eclipseを含む)のインストール
(4)node.js(nodist)のインストール
(5)Cordovaのインストール
(6)Cordova(Android)の稼動確認

(1)Java JDKのインストール(既にインストール済みは不要)

URL:http://www.oracle.com/technetwork/java/javase/downloads/index.html
現在の最新バァージョン:「Java SE Development Kit 8u25」
プラットフォーム:「Windows x64:jdk-8u25-windows-x64.exe」
・インストール(EXEの実行)
・システムPathの登録
__変数(JAVA_HOME=C:\Program Files\Java\jdk1.8.0_20)
__Path追加(%JAVA_HOME%\bin;)

・確認(既にインストールしてある場合はバージョン確認)

C:\>javac -version
javac 1.8.0_20

(2)Apache Antのインストール(Windowsのみ)

URL:http://ant.apache.org/bindownload.cgi
ファイル: apache-ant-1.9.4-bin.zip
・アンロード&解凍(Unzip)
・開発用のディレクトリーにコピー(今回はc:\Android\apache-ant)
・システムPathの登録
__変数(ANT_HOME=c:\android\apache-ant)
__Path追加(%ANT_HOME%\bin;)

・確認

C:\>ant -version
Apache Ant(TM) version 1.9.4 compiled on April 29 2014

(3)Android SDK(Eclipsを含む)のインストール

URL:http://developer.android.com/sdk/index.html
パッケージ:「Download Eclipse ADT with the Android SDK for Windows」
プラットフォーム「64-bit」
・アンロードファイルの解凍(Unzip)
・開発用のディレクトリーにコピー(今回はc:\Android\SDK\)
・システムPathの追加
__変数(ANDROID_HOME=C:\Android\SDK\sdk)
__Path追加(%ANDROID_HOME%\tools;)
__Path追加(%ANDROID_HOME%\platform-tools;)

・インストール後の構成:
c:\Android
____+–SDK
____+– eclipse
________+– eclipse.exe (ディスクトップにショートカットを作成すると便利)
____+– sdk
____+– SDK Manager.exe
・確認

C:\>adb -help
Android Debug Bridge version 1.0.31
:
C:\>emulator -help
C:\>Android Emulator usage: emulator [options] [-qemu args]

・SDKライブラリのインストール(SDK Manager→ C:\>”\Android\SDK\SDK Manager.exe”)
まず「Tools」の中から「Android SDK Tools」、「Android SDK Plarform-tools」、「Android SDK Build-tools」の最新版のStatusが「Installed」となっている事を確認する。「Not Installed」となっている場合はチェックをする。次に、任意でAndroid各バージョンの「SDK Platform」と「ARM EABI v7a System Image」をチェックする。(今回は、Android 4系(API 14以降)全てをチェックした。) 最後に「Install n Package…」ボタンをクリックすると、ダウンロードとインストールが始まる。(時間がかかる)

(4)node.js(nodist)のインストール

Cordova/PhoneGapのインストールにはnode.jsのnpmコマンドを使う必要があるため、まずはnode.jsをインストールする必要がある。公式サイトからインストーラをダウンロードするのが手っ取り早いが、アップデートが頻繁に行われているため、バージョン管理ツール(nodist)を使ってインストールすることにした。
Node.jsは、非同期I/Oを特徴とするJavaScript処理系です。JavaScriptのエンジンとして、Chromeがオープンソースで公開しているV8を利用しています。Cordovaが提供するこのコマンドラインツールは、Cordovaフレームワークを用いたアプリのプロジェクトの作成・管理に利用されます。このツールをインストールすると、ターミナル(コンソール)でCordovaコマンドが利用できるようになります。開発者は、Cordovaコマンドによって開発したいアプリのプロジェクトのひな形を生成できます。
AndroidとiOSなど、複数のプラットフォームに向けたアプリを開発する際にもワンソースでクロスプラットフォームな構成のプロジェクトをCordovaコマンドで作成することができます。

(4.1)nodist(最新管理ソフト)のインストール

URL:https://github.com/marcelklehr/nodist
「Download ZIP」->Zip解凍->コピー(C:\Android\nodist-master)
・システムPathの登録
__変数(NODIST_PREFIX=c:\Android\nodist-master)
__Path追加(%NODIST_PREFIX%\bin;)

(4.2)nodeの最新版の取得

C:\>nodist update
Installing latest stable version…
Update dependencies…
:

・確認

C:\>node -v
v0.10.32
C:\>npm -v
1.4.28

(5)Cordovaのインストール

C:\>npm install -g cordova
C:\Android\nodist-master\bin\cordova -> C:\Android\nodist-master\bin\node_modules
\cordova\bin\cordova
cordova@4.1.2 C:\Android\nodist-master\bin\node_modules\cordova
:

・確認

C:\>cordova -v
4.1.2

・Cordovaプロジェクトの作成
シンタックス:
cordova create [プロジェクトディレクトリのパス] [アプリケーションID] [アプリケーション名] -d

C:\>cordova create c:\Android\hello com.example.hello HelloWorld -d
Creating a new cordova project with name “HelloWorld” and id “com.example.hello”
at location “c:\Android\hello”
Using stock cordova hello-world application.
Requesting {“url”:”https://git-wip-us.apache.org/repos/asf?p=cordova-app-hello-wo
rld.git;a=snapshot;h=3.6.3;sf=tgz”,”strictSSL”:true}…
Downloading cordova library for www…
Downloaded, unzipped and extracted 9833339 byte response.
Download complete
Copying stock Cordova www assets into “c:\Android\hello\www”

・次に、プロジェクトにAndroidの環境を追加します。

c:\>cd c:\Android\hello
c:\Android\hello>cordova platform add android
Creating android project…
Creating Cordova project for the Android platform:
Path: platforms\android
Package: com.example.hello
Name: HelloWorld
Android target: android-19
Copying template files…
Project successfully created.

・エラーは表示されたら
SDK Manager( C:\>”\Android\SDK\SDK Manager.exe”)を実行して足らないモジュールを追加する。
エラーがなくなるまで、Android環境の追加を繰り返す。

(6)Cordova(Android)の稼動確認

(6.1)Andriod環境の確認

c:\>cd c:\Android\hello
c:\Android\hello>cordova platforms ls
Installed platforms: android 3.6.4
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, wi
ndows8, wp8

(6.2)ここまででのディレクトリー構成
C:\Android
____+– apache-ant     (Cordovaのコマンド機能)
____+– hello        (今回のテスト用プロジェクト)
____+–  hooks       (Cordovaのコメント)
________+– platforms    (Android用ライブラリー)
________+– plugins     (CordovaのPluginライブラリー)
________+– www      (HTMLのリソース)
____+– nodist-master   (nood.js)
____+– SDK        (Android SDK)
____+– workspace     (Eclipseの開発プロジェクト用ディレクトリー)

(6.3)ブラウザ( Chromeが良い)で実行する。
上記ディレクトリーのHTMLを実行する。(Expolerでダブルクリックする)
(C:\Android\hello\www\index.html)

(6.4)Androidエミュレータで実行する。

・SDK仮想端末の設定(SDK Manager→ C:\>”\Android\SDK\SDK Manager.exe”)
「Tools」→「Manage AVD…」を選択し、「Android Virtual Devices」画面を表示します。
「Cleate…」を選択し、端末定義画面を表示します。
今回は
__AVD Name:WVGA←入力
__Device:5.1″ WVGA (400 x 800 mdbi)←選択
__※他の項目はそのままで「OK」をクリックする。

・仮Built(コンパイル)でエラーがないことを確認する。

c:\>cd c:\Android\hello
c:\Android\hello>cordova build
Generating config.xml from defaults for platform “android”
Preparing android project

Platform “android” compiled successfully.

・Androidエミュレーターで表示を確認する。

c:\>cd c:\Android\hello
c:\Android\hello>cordova platform add android
Generating config.xml from defaults for platform “android”
Preparing android project

Booting up emulator (this may take a while)………..
(※死ぬほど時間がかかります。実際はAPKの転送で行います)

Androidエミュレーターでテスト画面が表示されれば今回のテーマは終了です。

 - HTML5

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


画像で表示される認証コードを入力して下さい。

CAPTCHA


  関連記事

gmaptest
ハイブリッドアプリの開発について(4)

AndroidのCordovaを使用したネイティブアプリ開発について第3回を終え …

gmaptest
ハイブリッドアプリの開発について(3)

Cordovaプラグインを利用した開発 前回までの説明でスマホ(Android、 …

monaca-4-638
ハイブリッドアプリの開発について(1)

現在、ASCでもハイブリッドアプリ開発としてGeneXusを推進していますが、日 …

monaca-4-638
ハイブリッドアプリの開発について(5)

前回までで、アプリケーション開発は可能になりました。今回は完成したハイブリッドア …