iPadを買おうという野望もあり、その時には絶対やる。
なので、そのためのメモ。
元はW&R : Jazzと読書の日々さんの「iOS6でGoogleMapsをフルスクリーン表示にしてみました」という記事。
要するに、以下のjavascriptをiPhone(iPad)のSafariのURL欄に張り付けろと。
「ホーム画面に追加」という文字しか出てこないが、Safari の下のバーから「ホーム画面に追加」を選ぶと、見事にGoogleMapsがアプリのように使える。
data:text/html;charset=UTF-8,<title>GoogleMaps</title><meta name="apple-mobile-web-app-capable" content="yes"><link rel="apple-touch-icon" href="http://farm5.staticflickr.com/4035/4564840873_85c02262e9_z.jpg"><script>if(window.navigator.standalone){location.href="https://maps.google.co.jp/";}else{document.write("ホーム画面に追加")}</script>この中で、link ref="apple-touch-icon" の後の href は、ホーム画面に記載されるアイコンのURL。
申し訳ないが、アイコンに白枠がついているので、あまり好きな感じではない。
本当は、自分でアイコンを作るなり、フリーのアイコンを持ってきて、Dropbox の public フォルダにぶちこんで、そのURLを href で指定するのが一番いいのだろうが・・・
同じような事を考える方はいらっしゃるもので、crocodile notebookさんの「iOS6ユーザ必携のWEBアプリ版Google Mapsが便利すぎてスゴすぎる！」には、iOS6のマップアプリアイコンと、iOS5のGoogleMapsアイコンで上の技を使う方法が載っている。
もちろん上記でもいいのだが、iOS6のマップアプリと並べると、アイコンに光沢があって、なんか嫌。
ということで、apple-touch-icon を apple-touch-icon-precomposed におきかえて、光沢を消してみましたよ。
data:text/html;charset=UTF-8,<title>GoogleMaps</title><meta name="apple-mobile-web-app-capable" content="yes"><link rel="apple-touch-icon-precomposed" href="http://mag.torumade.nu/wp-content/uploads/2012/09/google_map_torumade.png"><script>if(window.navigator.standalone) {location.href="https://maps.google.co.jp/";}else{document.write("ホーム画面に追加")}</script>上記はiOS5のGoogleMapsアイコンの場合で、iOS6マップアプリアイコンにしたい場合は、アイコンのURLを "http://mag.torumade.nu/wp-content/uploads/2012/09/iphone_map_torumade.png" にすればよい。
同じくW&R : Jazzと読書の日々さんの「iOS6でGoogleストリートビューを見るWebアプリを作りました」は、まったく文句の付けようがない。
data:text/html;charset=UTF-8,<head><meta name=viewport content="initial-scale=1.0, user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes><link rel=apple-touch-icon href="http://googlediscovery.com/wp-content/uploads/pegman.png"><title>StreetView</title><script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true"type="text/javascript"></script><script>var geocoder;var map;function initialize(){geocoder = new google.maps.Geocoder();myOptions = {zoom:17,mapTypeId:google.maps.MapTypeId.ROADMAP,zoomControl:true,zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.LEFT_BOTTOM}};map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);navigator.geolocation.getCurrentPosition(function(position){initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);map.setCenter(initialLocation);marker = new google.maps.Marker({map: map,position: initialLocation,animation: google.maps.Animation.DROP});});}function codeAddress() {var address = document.getElementById("address").value;geocoder.geocode({ "address": address}, function(results, status){if(status == google.maps.GeocoderStatus.OK) {map.setCenter(results[0].geometry.location);marker = new google.maps.Marker({map: map,position: results[0].geometry.location,animation: google.maps.Animation.DROP});}else{alert("見つかりませんでした");}});}</script></head><body onload="initialize()"><div><input id="address" type="textbox" value="現在地"><input type="button" value="検索" onclick="codeAddress()"></div><div id="map_canvas" style="height:100%"></div></body>この２つは絶対にやるべき。
