アプリ作成 (5) マーカーと住所を表示

アプリ作成 (5) マーカーと住所を表示 – メディアデザイン実習Jさて、「アプリ」や「サービス」というには機能的にちょっと物足りないかもしれませんが、ひとまずこのへんでそれなりの形にしてしまいたいと思います。

あなたが「ちょっと物足りない」と思うとしたら、それは機能やデザインを工夫して、作り込んでいくチャンスです。
そして、各人のイメージによってどういうプロダクトになっていくか、分かれ道でもあります。

また、教える側の都合としては、個別の機能追加についてひとつひとつこまかく説明していく時間がないという問題もあります。

基本的な概念と基本的なコードを理解すれば、あとは各自で調べていくことができます。「ggrks」ってやつです。
逆に言えば、「もっと面白いものが作りたい」という自分の知的好奇心を解決するには、自分でやっていくしかありません。

 

ともかく、今回のサンプルの仕上げとして、

  • マーカーを表示
  • 吹き出しを表示
  • 吹き出しに住所を表示
  • 緯度経度を表示

という変更を加えたいと思います。

 

動作デモ
http://dev.koekatamarin.com/zokei/20130604_geolocation3/

 

仕上げのコード

index.html の <head>内部

ページ名です。いいアイディアがあれば、別にこれでなくてもいいですよ。

 

index.html の <body>内部

 

script.js

ローカルPC上で問題なく動いたら、
ファイルをサーバーにアップロードして、スマホで確認ましょう。

 

iPhone/iPadの「ホームに追加」機能

このサイトをiOSのSafariで表示して、次のようにすれば、サイトがアプリっぽくなります。自分で作ったサイトをこのようにアプリ化しておけば、人にプレゼンする時などにいい感じですよ。

apple1

apple2

apple3

apple4

 

メニューバーを消す
<head>内に記述

こうすると、メニューバーが表示されなくなり、(ほぼ)全画面表示されます。アプリっぽいですね。
ただし、戻る/進むボタンも表示されなくなるので、必要な場合はjQueryとCSSで実装する必要があります。

参考)iOSで「ホームに追加」したWebclip(WebApp)モードのサイトに戻る/進むボタンを付ける
http://tokyozokei.sakura.ne.jp/zokei.koekatamarin.com/archives/409
 

オリジナルのアプリアイコンを設定する
参考)
http://arigato-ipod.com/lab-webclip-apple-touch-icon.html

Have fun!(^ω^)


コメントを残す

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