Technical Works

ASC Technical support site

*

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

   

Cordovaプラグインを利用した開発

前回までの説明でスマホ(Android、iOS)の開発環境(今回は主にAndroid)構築を説明してきました。特に最後の「Androidエミュレーターでの表示」は断念した方が多かったと思います。(私も実際は断念しました)
今回は実機(Android端末)によるテストとEclipseでの修正、およびCordovaプラインについて説明いたします。また、前回までの開発環境構築をまとめてコマンド等を列挙し、不足な部分の追加説明を行います。(詳細は前回までの説明を参照)

これらのことから、Cordovaによるネイティブ・アプリでブラウザの基本モジュール(WebKit)を呼びだす仕組みが解ると思います。
また、前提基礎技術として
・HTML5(CSS、Javascript、追加機能)
・CLI(Command line interface:OSのコマンド)
・jQuery(JavaScriptライブラリ)
・Cordovaプラグイン(詳細)
・Eclipse(IDE:Integrated Development Environment)
については各自で学習して下さい。

開発環境基盤の作成手順

(1)Java JDKのインストール

・アンロード&インストール(インストール&Path設定)

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

・アンロード&インストール(解凍&コピー&Path設定)

(3)Android SDKのインストール

・アンロード&インストール(解凍&コピー&Path設定)
・Eclipse(ADTプラグイン付き)
・Android SDK
・Andriod SDK Manager

(4)Nodistのインストール

・アンロード&インストール(解凍&コピー&Path設定)
・Node.js
・nodeの更新
__C:\>nodist update

(5)Cordovaのインストール

__C:\>npm install -g cordova
・Cordovaを最新に更新する
__C:\>npm update cordova -g
・Cordovaのバァージョン指定(頻繁に更新されるので戻す場合)
__C:\>npm uninstall cordova -g  (Cordovaの削除)
__C:\>npm install -g cordova@3.6.3-0.2.13  (Cordovaのバァージョン指定)

アプリケーション開発

(1)Cordovaプロジェクトの作成

__C:\>cordova create c:\Android\hello com.example.hello HelloWorld -d
・プロジェクトディレクトリPathの決定(新たに作成されます)
・アプリケーションIDの決定(com.xxxxxx.xxxxxx)
・アプリケーション名の決定

(2)Andriod SDK Managerの実行

__C:\Android\SDK>android(またはEclips→Window→Andriod SDK Manager)
・[Packages]:モジュールとAndroid APIの更新(ターゲットAPIは必ず設定、その他は最新にする)
・[Tools]:実行用仮想端末の定義

(3)プラットフォーム(Android)の追加

__C:\>cd c:\Android\hello  (プロジェクトを指定)
__C:\Android\hello>cordova platform add android   (Androidの追加)
__C:\Android\hello>cordova platform add ios  (iOSの追加)
__C:\Android\hello>cordova platform rm android  (Androidの削除)
__C:\Android\hello>cordova platform rm ios  (iOSの削除)
__C:\Android\hello>cordova platform update android (プラトフォームの更新)
__C:\Android\hello>cordova platforms ls  (プラトフォームの確認)

(4)Eclipseプロジェクトに取り込み(EclipseでのGUI)

・Eclipseプロジェクトに取り込む
・HTMLの作成(ユーザアプリとして修正)
・Javascriptの作成(ユーザアプリとして修正)
・その他のリソース(ユーザアプリで必要なイメージファイル等)のコピー

(5)デバッグ

・ビルド(テスト)
__C:\Android\hello>cordova build android -d
__C:\Android\hello>cordova build -d
・ブラウザでテスト(JavaScript,CSSの確認)
__C:\Android\hello>cordova serve android
__ブラウザ起動=> http://localhost:8000/
__終了:CTRL + C
・Androidエミュレータでテスト(実行までが遅いので使用しない
__C:\Android\hello>cordova emulate android
・Android端末(USBケーブル接続)でテスト
__C:\Android\hello>cordova run android
・config.xmlの確認
・AndroidManifest.xmlの確認
・Cordovaプラグインの追加

Android端末(USBケーブル接続)でテスト

・USBケーブル(Aタイプ[オス]⇔マイクロUSB[オス])の準備(充電専用はデータ通信が出来ない為ダメです)
・端末の設定(Androidバージョンで一部異なります)
__[設定]を開き、
__[ロックとセキュリティ]→「提供元不明のアプリ」をチェックする。
__[開発者オプション]→開発者オプションをONにし、「USBデバッグ」をチェックする。
・PCの設定
__Android端末用のUSBドライバーを確認(接続してみる、端末のメーカーにより異なるのでインストールは端末機種で検索)
__USBケーブルで接続(エクスプローラのツリーに端末機種が表示されればOK)
・実行(今度は出たでしょう)
__C:\Android\hello>cordova run android

Eclipseでのプロジェクト実行(GUI)

プロジェクトの登録(CordovaプロジェクトをEclipseプロジェクトとする)
__File → New→Project… → Android Project from Exsitig Code → Next →Root Directory:Cordovaプロジェクト・パス → Copy projects into workspace(チェックを入れない)→ Finish
(※Workspceに入れない:Cordovaコマンド使用する場合に切り離す為)
Java Build Pathの修正
__Project→Properties → Resource → Java Build Path→Oder and Expot(タブ) → …/srcと…/gen以外はチェックをはずす → OK。
デレクトリー・ツリーのフィルター削除(WWW以下が表示されない場合)
__Project → Properties → Resource → Resource Filters → Restore Defualt(Filteオルrなし) → Apply → OK
Editor文字コード(UTF-8N)の設定
__Window → Preferences → General → Workspace → Text file encoding → Other:UTF-8 → Apply → OK
Device Viewの表示
__Window → Show View → Other… → Devices → OK
・ユーザアプリの設定(修正)・・・プロジェクト/assets/www以下がAndroid端末で使用される
(注意:Cordovaプロジェクトはプロジェクト直下のwwwの内容を実行時(Run)にassets以下にコピーされる。)
__index.html:Corudovaから最初に呼ばれるユーザアプリ(HTML)です
__プロジェクト/assets/www/CSS:CSSを入れます。
__プロジェクト/assets/www/js:Javascriptを入れます。
__プロジェクト/assets/www/img:iconやbackgraund等のイメージファイルを入れます。
実行
__Run → Run → Android Device Chooser → 実行端末(選択) → OK
・Cordovaプロジェクト(コマンドによる)修正の場合
__Eclipeプロジェクトの削除(実態は削除しない)→ユーザツール(またはcordovaコマンド)での修正→Eclipeプロジェクトの登録

(7)Cordovaプラグインの利用

__C:\Android\hello>cordova plugin ls  (プラグインの確認)
__C:\Android\hello>cordova plugin add プラグインURL  (プラグインの追加)
__C:\Android\hello>cordova plugin rm プラグインURL  (プラグインの削除)
__C:\Android\hello>cordova prepare -d (プラグイン設定の反映)

Cordovaプライン説明(プラグイン・リポジトリーのURL)

Accelerometer(org.apache.cordova.device-motion):
加速度センサーの情報を取得する。X/Y/Z軸方向の傾きやタイムスタンプ、指定した時間間隔における加速度などの情報を取得できる。
Camera(org.apache.cordova.camera):
デバイスのカメラ機能を利用する。カメラで撮影した写真の画像データや、フォトアルバムから選んだ画像ファイルのデータを取得できる。
Capture(org.apache.cordova.media-capture):
デバイスのマイクやカメラの機能にアクセスして、音声の録音や写真/動画の撮影を行う。HTML5のCapture APIに対応している。
Compass(org.apache.cordova.device-orientation):
デバイスに搭載された電子コンパスを利用して、デバイスが向いている方向を取得する。
Connection(org.apache.cordova.network-information):
デバイスの回線情報を取得する。ネットワーク接続の種類や接続状態を確認できる。
Contacts(org.apache.cordova.contacts):
連絡先データベース(いわゆる電話帳)にアクセスする。登録済みの連絡先の情報を取得したり、新しい連絡先の登録を行える。
Device(org.apache.cordova.device):
各種デバイスのハードウェアおよびソフトウェア情報を取得する.
Events(Coreとして装備されている)
Cordova独自のイベントハンドラ機能を提供する。Corudovaライブラリのロードが完了した際に発生するdevicereadyイベントや、
各種ボタンが押された際に発生するイベントなどが用意されている。
File(org.apache.cordova.file):
デバイスのファイルシステムにアクセスしてファイルの読み書きを行う。
・File Transfer(org.apache.cordova.file-transfer):
サーバにファイルをアップロード・ダウンロードすることができます
Geolocation(org.apache.cordova.geolocation):
デバイスの位置情報を取得する。GPSセンサーによる緯度経度やネットワーク情報をもとに算出された現在位置を取得できる。
W3C Geo location API Specificationに準拠している。
Globalization(org.apache.cordova.globalization):
端末情報を取得し、ユーザーのロケール、言語、およびタイム ゾーンに固有の操作を実行します。
Media(org.apache.cordova.media):
オーディオの再生や録音を行う。HTML5のmedia APIに対応している。
Dailog(org.apache.cordova.dialogs,org.apache.cordova.vibration)
ダイアログや音による通知が行える。
Vibration(org.apache.cordova.dialogs,org.apache.cordova.vibration)
バイブレーションによる通知が行える。
その他(Codova作成、ユーザ作成 等)
Barcode、Bluetooth、datepicker、SQL、PushNotification 等 最新機能を含めて多数あります。
※HTML5でサポートされている機能はAdd不要。(注意:HTML5の実装はWebkitのバージョンや各端末スペックによる)
※AddコマンドのURLは記載のもので良いが、AndroidManifest.xmlのパーミッションIDとは異なります。

まとめ:今回のテーマの最後に新たプロジェクト(複数画面と「Google Map」を作りましょう。

今までに利用したコマンドは(C:\Android\hello>→C:\Android\gmap>)と読み替えてください。
(1)Cordovaプロジェクトの作成
__C:\>cordova create c:\Android\gmap com.test.gmap GoogleMap -d
(2)Android APIの追加
__C:\>cd C:\Android\gmap
__C:\Android\gmap>cordova platform add android
__C:\Android\gmap>cordova platform update android
(3)仮Build(確認)
__C:\Android\gmap>cordova build android -d
(4)Cordovaプラグインの追加
__C:\>cd C:\Android\gmap
__C:\Android\gmap>cordova plugin add org.apache.cordova.dialogs (ダイアログ機能の追加)
__C:\Android\gmap>cordova plugin add org.apache.cordova.geolocation (GPS機能の追加)
__C:\Android\gmap>cordova prepare -d (プラグイン設定の反映)
(5)ユーザアプリの修正
__index.html(下記参照)をC:\Android\gmap\www\index.htmlへ上書きする。
__(※全てのリソースはUTF-8Nで作成・修正する。日本語を利用する為)
__Javascript(C:\Android\gmap\www\js)にjQuery関連のScriptを追加する。
____jquery.mobile-1.4.3.js、jquery-2.1.1.js
__Javascript(C:\Android\gmap\www\js)のindex.jsは削除する。
_CSS(C:\Android\gmap\www\js)にjQuery関連のCSSを追加する。
____jquery.mobile-1.4.3.css、style.css
※jQuery関連のソースは事前に自分JS/CSSフォルダーにダウンロードすることで高速にする。
(6)Android端末(USBケーブル接続)でテスト
__C:\>cd C:\Android\gmap
__C:\Android\gmap>cordova run android

実行結果
gmaptest

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Google Map</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css" />
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.3.js"></script>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="cordova.js"></script>

     
<script type="text/javascript">

var map;
var marker;
var infowindow;
var watchID;
 
$(document).ready(function(){
    document.addEventListener("deviceready", load_map, false);
    //uncomment for testing in Chrome browser
    //load_map();
});

function load_map(){
 // google.load("maps", "3.17", {"callback": onDeviceReady, other_params: "sensor=true&language=en"});
    google.load("maps", "3.17", {"callback": onDeviceReady, other_params: "sensor=true"});
}
 
//PhoneGap is ready function
function onDeviceReady() {
	$(window).on("pagecontainershow", function( event, ui ) {
		//init map when map page show
		if($(":mobile-pagecontainer").pagecontainer("getActivePage").attr('id') == 'map_page'){
			max_height();
			show_map();
		}
	});
	$(window).on("orientationchange resize", function( event, ui ) {
		if($(":mobile-pagecontainer").pagecontainer("getActivePage").attr('id') == 'map_page'){
			max_height();
		}
	});
}
 
function max_height(){
	var d = $(document).height();
	var t = $('#map_page div[data-role="header"]').outerHeight(true) + $('#map_page div[data-role="footer"]').outerHeight(true);
	var w = $(window).height();
	if(d > w){
		$('#map').height(w-t);
	}else{
		$('#map').height(d-t);
	}
}
         
function show_map(){

    if(!map){
     // var latlng = new google.maps.LatLng(55.17, 23.76);
        var latlng = new google.maps.LatLng(35.732941, 139.728416);
        var myOptions = {
            zoom: 17,
            center: latlng,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: true
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
         
        google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
            //watch for geoposition change
            watchID = navigator.geolocation.watchPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });  
        });
         
        $("#map_zoom_in").click(function(){
            map.setZoom(map.getZoom() + 1);
            return false;
        });
         
        $("#map_zoom_out").click(function(){
            map.setZoom(map.getZoom() - 1);
            return false;
        });
    }else{
		var center = map.getCenter();
		google.maps.event.trigger(map, "resize");
    	map.setCenter(center);
    }
}
 
function geo_error(error){
    //alert error for debug
    //alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
 
function geo_success(position) {
     
    map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    map.setZoom(15);
 
    var info =
    ('Latitude: '         + position.coords.latitude          + '<br>' +
    'Longitude: '         + position.coords.longitude         + '<br>' +
    'Altitude: '          + position.coords.altitude          + '<br>' +
    'Accuracy: '          + position.coords.accuracy          + '<br>' +
    'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '<br>' +
    'Heading: '           + position.coords.heading           + '<br>' +
    'Speed: '             + position.coords.speed             + '<br>' +
    'Timestamp: '         + new Date(position.timestamp));
 
    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    if(!marker){
        //create marker
        marker = new google.maps.Marker({
            position: point,
            map: map
        });
    }else{
        //move marker to new position
        marker.setPosition(point);
    }
    if(!infowindow){
        infowindow = new google.maps.InfoWindow({
            content: info
        });
    }else{
        infowindow.setContent(info);
    }
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
}

</script>
 
</head>
<body>
 
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
		<h1>Page Header</h1>
	</div>
    <div role="main" class="ui-content">
        <a href="#map_page" class="ui-btn ui-btn-inline">Map</a>
		<a href="#test" class="ui-btn ui-btn-inline">Test</a>
    </div>
    <div data-role="footer" data-position="fixed">
		<h4>Page Footer</h4>
	</div>
</div>
 
<div data-role="page" id="map_page">
    <div data-role="header" data-add-back-btn="true" data-back-btn-text="Go back" data-position="fixed">
        <h1>Map Header</h1>
    </div>
    <div role="main" class="ui-content" style="padding:0;margin:0;">
        <div id="map"></div>
    </div>
    <div data-role="footer" data-position="fixed">
		<div data-role="controlgroup" data-type="horizontal">
			<a id="map_zoom_in" href="#" class="ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all">Zoom In</a>
			<a id="map_zoom_out" href="#" class="ui-btn ui-icon-minus ui-btn-icon-notext ui-corner-all">Zoom Out</a>
		</div>
    </div>
</div>
	
<div data-role="page" id="test">
    <div data-role="header" data-add-back-btn="true" data-back-btn-text="Back" data-position="fixed">
        <h1>Header</h1>
    </div>
    <div role="main" class="ui-content">
        Test page
        日本語が正しく表示されていますか。</br>
        Hello.</br>
        今日は。
    </div>
</div>
 
</html>

 

※今回のjQuery関連のダウンロード方法
URL:http://polyetilen.lt/en/files/2014/09/map3.7z
「map3.7z」はUnixの圧縮形式ですのでWindowsでは解凍ツールをインストールすれば使用可能です。

 - HTML5

Loading Facebook Comments ...

Message

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

CAPTCHA


*

  関連記事

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

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

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

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

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

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

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

ハイブリッドアプリの開発環境構築 ハイブリッドアプリ開発とは、HTML5を中心と …