PR

Visual Studio 2015 Community の cordova(phonegap) で googlemap を表示する


前回 に引き続き、もう少しアプリらしいGooglemapをandroidに表示させる簡単なアプリを作ります。 まず最初にpluginをVS2015にインストールしましょう。 cordova(phonegap)はプラグインを追加することで機能の拡張が可能です。   vs2015-cordova-phonegap-36   [config.xml]タブの[プラグイン]を選び、次に[コア]タブをクリックします。 そこでGeolocationを探してすぐ右の[追加]をクリックします。 数秒でインストールが終了します。

続いて、同様の方法でWhitelistもインストールしましょう。 プラグインの追加作業は、VS2013と比べると速くなって安定しているような気がします。

つぎに、[index.html]を書き換えます。 おそらく、[config.xml]の横あたりにあるであろう[index.html]タブをクリックし、エディタを起動させます。

続いて、以下のコードにすべて書き換えます。

完全なコピペでOKです!  

[code language=”javascript”]
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src*;script-src’self’ ‘unsafe-inline’ ‘unsafe-eval’*;style-src ‘self’ ‘unsafe-inline’;" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true"></script>

<script type="text/javascript">
function init() {

var map = document.getElementById("map");
var options = {
zoom: 17,
center: new google.maps.LatLng(35.6904, 139.6999),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(map, options);
};
</script>
</head>
<body onload="init()">
<div id="map" style="width :100%; height :100%;"></div>

</body>
</html>
[/code]

 コードをコピーしたら,”Google Android エミュレーター” もしくは ”VS Emulator”でDebugします。

”VS Emulator”の起動でエラーが出た場合は、前回の記事を参考にしてみてください。  

無事起動すると、Googlemapが表示されます。

vs2015-cordova-phonegap-37

”Google Android エミュレーター” と ”VS Emulator”を並べてみました。

見た目に大きな変化はないですが、起動速度は”VS Emulator”が圧倒ですね!

  ところで問題がひとつ。   どうもVisual Studio 2015 communityでは実機での実行に失敗します。 実機のandoridのバージョンは4.1.2ですが、まったく起動しないのです。

VS2013のときはサクサク起動したのですが。。。  

でも、他の方法で起動させることもできます。

もっとも原始的な方法は、APKファイルを探し出し、直接実機にインストールする方法。

とりあえず、skydriveなどでapkファイルをandoridに渡してインストールすれば問題なく起動します。

どうも、cordovaの実行ファイル(APK)の生成に問題なさそうですが、VS2015のインストーラ・ランチャーに不具合がありそうです。

皮肉なことに、インストール後に[デバイス]でデバッグすると、実機にインストールしたアプリが起動します。

でも、実機に手動でインストールしたAPKが起動しただけで、新しいAPKは全く反映されていません。

つまり、実機のapkを実行しているだけなんですね。 なにか良い手はないものでしょうか。

 

スポンサードリンク