イチからはじめるスマホサイト制作 その５ 電話・メール・地図
今回は問い合わせやアクセス情報に掲載する電話やメールアドレス、地図の記述方法についてです
基本的に今までの携帯サイトとほぼ一緒でよいみたいですが、いくつか気をつける事項もあるようなので一応確認しておきたいと思います
１．電話
<a href="tel:03-xxxx-xxxx">03-xxxx-xxxx</a> ※赤字を電話番号に置換
というようにtel:リンクを使えば、クリックで指定した番号に電話をかけられます
Mobile Safariではハイフンで切った数字の羅列を自動的に電話番号と認識する機能があるようですが、間違って電話番号ではない箇所にリンクが貼られてしまった場合、下記のように記述すれば自動認識をオフにすることが出来ます
<meta name="format-detection" content="telephone=no"/>
２．メール
<a href="mailto:xxx@co.jp">xxxt@co.jp</a> ※赤字をメールアドレスに置換
のようにmailto:リンクで、メーラーの作成画面がたちあがります
Subject、本文にあらかじめ定型文を入れておくことも可能
<a href="mailto:xxx@co.jp?subject=（サブジェクト）&body=（本文）">
赤字の箇所に入れたい文言を書くだけですが、サブジェクト、本文とも日本語のままだと文字化けする可能性があるため、URLエンコードする必要があります
URLエンコードは無料ツールがたくさん公開されているので、ネット上でも変換できます
TAG index URLエンコード・デコードフォーム
http://www.tagindex.com/tool/url.html
３．地図
アクセス情報はiPhoneでもandroidでも標準で搭載されているGoogleマップにリンクを貼っておくのが親切だと思います。Googleマップなら現在地と照らし合わせたり、ルート案内を使ったり出来るからです。たまにオリジナルの静止画の地図を使っているサイトを見ると、方向オンチの私としてはとても残念に思ってしまいます。
リンクさせるURLはPCのGoogle Mapで指定したい場所を開き、左カラムの上部にあるリンクアイコンから取得することができます
その他、TwitterなどSNSサービスへのリンクですが、こちらも普通にリンクを貼るだけで自動的に有効なアプリが起動します
４．Twitter
<a href="https://twitter.com/xxxx">@xxxx</a> ※赤字をアカウント名に置換
５．Facebookページ
普通にFacebookページのURLへリンクを貼ってもよいし、開発者用ページでいいねボタンなどのコードを取得して貼り付ける方法もあります
Like Box
http://developers.facebook.com/docs/reference/plugins/like-box/
Like Button
http://developers.facebook.com/docs/reference/plugins/like/
＞イチからはじめるスマホサイト制作 その４ Viewport
＞イチからはじめるスマホサイト制作 その３ Androidエミュレーター
＞イチからはじめるスマホサイト制作 その２ iPhoneシミュレータ
＞イチからはじめるスマホサイト制作 その１ 制作ガイドライン
|
|
|
|
