Visual Studio 2015 Community の cordova(phonegap) で googlemap を表示する
前回 に引き続き、もう少しアプリらしいGooglemapをandroidに表示させる簡単なアプリを作ります。 まず最初にpluginをVS2015にインストールしましょう。 cordova(phonegap)はプラグインを追加することで機能の拡張が可能です。 [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が表示されます。
”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を実行しているだけなんですね。 なにか良い手はないものでしょうか。