・smoothScroll.js

http://blog.webcreativepark.net/2007/07/12-143406.html

そのほかの関連URL

　iPhone/Androidには電話や地図のほかにも関連アプリが起動するリンク機能があります。それぞれの使い方を紹介しましょう。

YouTube

　YouTubeの場合もGoogleマップと同様にムービーへのリンクを貼るだけです。画面内の「共有」からリンク用の短いURLを取得できます。

YouTubeは｢共有」からリンク用のURLを取得できる

　YouTubeのURLをタップすると、iPhoneの場合は自動的に内蔵アプリに切り替わって映像が再生されます。Androidの場合は一度YouTubeのスマートフォンサイトに移動して、その後サムネイルをタップするとアプリが起動してムービーが再生されます。ムービーへのコメントなどが閲覧できるという意味では、Androidの方が優れた動作と言えるかもしれません。

　また、YouTubeの「埋め込みコード」で取得できるコードをページ内に埋め込むとサムネイルが表示され、再生ボタン（サムネイルの中心にある三角形の再生マーク）をタップするとアプリに切り替わって再生されます。

ムービー

　YouTubeではなく自社やクライアントのサーバーに置いたムービーに直接リンクを貼りたい場合もあるでしょう。ムービー機能について、iPhone 4のスペック表には次のように記載されています。

H.264ビデオ：最大720ピクセル、毎秒30フレーム、メインプロファイルレベル3.1（最高160KbpsのAAC-LC）、48kHz、.m4v、.mp4、.movファイルフォーマットのステレオオーディオ；MPEG4ビデオ：最高2.5Mbps、640x480ピクセル、毎秒30フレーム、シンプルプロファイル（最高160KbpsのAAC-LC）、48kHz、.m4v、.mp4、.movファイルフォーマットのステレオオーディオ ；Motion JPEG（M-JPEG）：最高35Mbps、1280x720ピクセル、毎秒30フレーム、audio in ulaw、.aviファイルフォーマットのPCMステレオオーディオ

　AndroidではアプリをインストールするとAVIファイルやWMVファイルなども再生できますが、iPhone/Androidともに標準の状態で再生するには、.mp4か.m4v形式を採用するのがよいでしょう。また、携帯電話などで利用される.3gpフォーマットも再生できるので、3G回線での再生や一般の携帯電話で撮影した動画を掲載する場合には.3gpを使う手もあります。

　ムービーをWebサーバーにアップロードしたら、ファイルに直接リンクを張るだけです。

<a href="movie.mp4">ムービーを再生する</a>

　これで、iPhone/Androidともに内蔵のムービープレイヤーが自動的に起動して再生が始まります。

[iPhone] App Store

　自作のアプリを紹介する場合などで、App Storeにリンクしたい場合は若干特殊な手続きが必要です。まず、次の「iTunes Link Maker」にアクセスします。

iTunes Link Makerにアクセスする

http://itunes.apple.com/linkmaker?lang=9&country=JP

　ここで希望のアプリを探し出してURLを取得し、リンクを張ります。

<a href="http://itunes.apple.com/jp/app/weekly-ascii-plus-for-iphone/id388627625?mt=8&uo=4" target="itunes_store">Weekly ASCII PLUS for iPhone - ASCII MEDIA WORKS Inc.</a>

専用のURLを含むリンクが生成されるのでコピー＆ペーストでリンクを張る

　なお、App StoreへのリンクをAndroid端末で開くとPCからアクセスされたとみなされ、iTunesのダウンロードページが表示されるので、注意書きを記載するか、ユーザーエージェントの切り替え（後述）によってリンクを表示させないなど工夫しましょう。

[Android] Android Market

　Androidのアプリを紹介する場合のリンクもやや特殊です。現在、Android Marketの各アプリの詳細ページに直接リンクを貼るためのURLはなく、検索結果画面にキーワードを指定してリンクすることで、当該アプリを表示させる方法を採ることが多いようです。

　次のURLにキーワードを付け加えて検索結果に移動できるようにします。

http://market.android.com/search?q=【検索キーワード】

　このURLにリンクを貼るとアプリを探し出せます。Android MarketのリンクはiPhoneからはアクセスできず、「Not Found」になってしまいます。こちらも、注意書きを加えるなどの対応をしておきましょう。

Android Marketの検索結果画面。個別のアプリへリンクできないので検索画面へのリンクを設定する

メールを送信する

　最後に、ページ内に記載したメールアドレスへリンクを設定します。メールへのリンクはPCの場合と同様に次のようにマークアップします。

<a href="mailto:【メールアドレス】">...</a>

　メールアドレスをタップすると、メールソフトが起動します。次のようにパラメータを加えると、メールのサブジェクトや本文をあらかじめ埋め込むこともできます。

<a href="mailto:【メールアドレス】?subject=【サブジェクト】&amp;body=【内容】">...</a>

　ただし、URLに日本語が含まれる場合はURLエンコーディングが必要です。簡単に変換できるソフトやオンラインツールが多数ありますので「URLエンコーディング」などのキーワードで検索して好みのツールを使ってください。

　たとえば以下のような宛先、サブジェクト、内容のメールを送りたいとします。

宛先：info@playgroup-kiba.com
サブジェクト：お問い合わせ
内容：お問い合わせありがとうございます。大変お手数ではございますが、「お名前」と「ご連絡先電話番号」を合わせてご明記いただけると幸いです。

　この場合、それぞれの要素をURLエンコーディングして、次のようなリンクを設定します。

<a href="mailto:info@playgroup-kiba.com?subject=%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b&amp;body=%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b%e3%81%82%e3%82%8a%e3%81%8c%e3%81%a8%e3%81%86%e3%81%94%e3%81%96%e3%81%84%e3%81%be%e3%81%99%e3%80%82%e5%a4%a7%e5%a4%89%e3%81%8a%e6%89%8b%e6%95%b0%e3%81%a7%e3%81%af%e3%81%94%e3%81%96%e3%81%84%e3%81%be%e3%81%99%e3%81%8c%e3%80%81%e3%80%8c%e3%81%8a%e5%90%8d%e5%89%8d%e3%80%8d%e3%81%a8%e3%80%8c%e3%81%94%e9%80%a3%e7%b5%a1%e5%85%88%e9%9b%bb%e8%a9%b1%e7%95%aa%e5%8f%b7%e3%80%8d%e3%82%92%e5%90%88%e3%82%8f%e3%81%9b%e3%81%a6%e3%81%94%e6%98%8e%e8%a8%98%e3%81%84%e3%81%9f%e3%81%a0%e3%81%91%e3%82%8b%e3%81%a8%e5%b9%b8%e3%81%84%e3%81%a7%e3%81%99%e3%80%82">info@playgroup-kiba.com</a>

iPhoneホーム用アイコンを作る

　ここまでの作業でサイトに必要な要素が一通り完成しました。あとは公開といいたいところですが、せっかく作ったサイトですから、なるべく多くのユーザーに見てもらい、ブックマークへ登録してもらいたいものです。

　iPhoneでは、ブックマークの代わりに、ホーム画面にWebサイトをアプリと並べて登録できます。ホーム画面に登録すると、ブックマーク以上に気軽にアクセスできるのでユーザーにとって便利です。 このとき特に指定しないとサイトのスクリーンショットがホーム画面のアイコンになります。

ホーム画面へWebサイトを登録するとデフォルトではサイトのスクリーンショットになる

　これでは見栄えがしませんが、Webサイトのオリジナルの「Web Clip Icon」というアイコン画像を用意すると、ホーム画面に登録したときに表示されるようになります。

　Web Clip Iconを作成するには、以下のような画像を準備します。サイズは57×57ピクセルで、PNGフォーマットで保存します。

作成したアイコン画像

　保存したPNGファイルをWebサーバーにアップロードして、アイコンを使用したいHTMLのmeta要素にPNGファイルのURLを指定します。

<link rel="apple-touch-icon" href="iphone.png">

　これでWeb Clip Iconが設定できました。WebサイトをiPhoneのホーム画面に登録すると以下のようにiPhoneアプリのアイコンと同じように表示されます。角丸や光沢といった処理はiPhone側で自動的に適用されるので、アイコン画像では特に必要ありません。

iPhoneで実際に登録して表示した。光沢と角丸処理が適用されている

　逆にアイコンのデザインに光沢が合わない場合など、処理が不要な場合はmeta要素を次のように書き換えます。

<link rel="apple-touch-icon-precomposed" href="iphone.png">

　これで、光沢と角丸処理が適用されず、元のアイコン画像のまま表示されます。

左はiPhoneの自動処理を適用したアイコン。右は元画像のまま表示したアイコン

スマートフォンとPCの振り分け

　ここまでできたらいよいよサイトの公開です。今回は、スマートフォンサイト用に「iphone」というサブドメインを割り当てました。

　作成したファイルをWebサーバーにアップロードすれば一応完成ですが、スマートフォンサイトのURLをユーザーに入力してもらうのは現実的ではないので、iPhone/AndoridからPCサイトにアクセスしたときには自動的にスマートフォン専用サイトに振り分けるようにしましょう。

　iPhone/Androidからのアクセスを判別して専用サイトに振り分けるには、JavaScriptやPHPなどのプログラム言語か、Webサーバーの設定を利用します。今回はもっとも手軽なJavaScriptを使って振り分ける方法を紹介します。まず、端末の振り分けのときに利用するのが、「ユーザーエージェント」と呼ばれる情報です。

ユーザーエージェントとは

　ユーザーエージェント（User Agent）とはWebブラウザーや検索エンジンのクローラーといったWebサイトへアクセスするプログラムのことですが、Web制作では一般的に、WebブラウザーがHTTP通信時にサーバーへ送信する固有の文字列情報を指します。たとえば、iPhone 4のSafariのユーザーエージェントは次のような文字列になっています。

　ユーザーエージェント文字列にはOSやブラウザーの名称、バージョンといった情報が含まれているので、ユーザーエージェントを見ればユーザーがどんな環境からアクセスしているか分かるというわけです。

　Android端末（ここではHTC Desire）の「ブラウザ」のユーザーエージェント文字列は次のようになります。

　これらのユーザーエージェント文字列を利用して、iPhoneやAndroidからのアクセスを判断します。たとえば、iPhoneには必ず「iPhone」というキーワードが含まれていますし、Androidはメーカーや端末が異なっていても「Android」というキーワードが含まれています。

JavaScriptでiPhone/Androidを判別する

　ユーザーエージェント文字列の取得の方法はプログラム言語によって異なりますが、JavaScriptの場合は次の方法で取得できます。

navigator.userAgent

　取得したユーザーエージェント文字列に「iPhone」や「Android」といったキーワード含まれているかはindexOf()というメソッドで判断します。具体的なプログラムは次のようになります（本連載ではJavaScriptの詳しい文法は紹介しませんので、必要に応じて入門書籍などを参照してください）。

<script type="text/javascript">
// iPhoneまたは、Androidの場合は振り分けを判断
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    if(confirm('プレイグループ木場へようこそ。€このサイトにはスマートフォン用のサイトがあります。€表示しますか？')) {
        location.href = 'http://iphone.playgroup-kiba.com';
    }
}
</script>

　プログラムを少しずつ分解して見ていきましょう。まず、ユーザーエージェントがiPhoneかどうかは次のようなプログラムで調べられます。

if (navigator.userAgent.indexOf('iPhone') > 0)...

　indexOf()メソッドは、指定したキーワードを発見すると文字列中の位置を、発見できなければ「-1」の数値を返します。そのため、値が「0より上」であればキーワードが発見できた（＝iPhoneからのアクセス）と分かります。

　同様に、Androidかどうかは次のようにして調べられます。

if (navigator.userAgent.indexOf('Android') > 0)...

　今回のように「iPhoneまたはAndroid」と判断したい場合は、「||（または）」という記号で2つの判断をつなげます。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0)...

　iPhone/Androidだけでなく、iPod touchからのアクセスもスマートフォンサイトに振り分けたい場合もあるでしょう。iPod touchのユーザーエージェント文字列は次のようになっています。

　iPod touchからのアクセスでは、「iPod」というキーワードが含まれるのが特徴です。ブラウザーを搭載したiPodはiPod touchしか存在しませんので、このキーワードを手がかりにします。前のルールに従ってつなげて記述すると次のようになります。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 || navigator.userAgent.indexOf('iPod') > 0)...

　最後にもうひとつ、iPad向けの記述を追加します。第3回で説明したとおり、iPadはiPhoneに非常に近い性質を持つ端末ですが、iPhoneに比べて画面が大きく、ノートPC並みの解像度があるので、スマートフォンサイトを表示すると逆に見づらくなります。そこでiPadからのアクセスの場合はスマートフォンサイトではなくPCサイトを表示します。

　iPadのSafariのユーザーエージェント文字列は次のようになっています。

　このユーザーエージェント文字列にはキーワード「iPad」しかないので問題ありませんが、発売当初のiPadのユーザーエージェント文字列には「iPhone OS」というキーワードも含まれていました。このキーワードが「iPhone」という文字列が含まれていると判断されて、iPhoneと誤認識する場合があります。そこで念のためiPadを完全に除外する処理を加えておきましょう。次のようになります。

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) ...

　少し複雑ですが、indexOf('iPad')メソッドが-1の場合、つまりユーザーエージェント文字列の中に「iPad」が見つからなかった場合の条件を加えることで、「iPhoneというキーワードが含まれており、かつiPadというキーワードが含まれていない場合」という条件になります。

　以上で、振り分けの条件が完成です。続いて、iPhone/Androidからのアクセスだった場合に実行する処理を作っていきます。

スマートフォンサイトへ移動する

　スマートフォン向けのサイトに自動的に移動するには次のように記述するだけです。

location.href = 'http://iphone.playgroup-kiba.com';

　ただし、今回のスマートフォンサイトは地図や電話番号といったアクセス情報に絞ったシンプルなサイトなので、ニュースやブログなどのコンテンツはPCサイトでしか見られません。強制的にスマートフォンサイトに移動してしまうとPCサイトの情報を求めているユーザーに不便なので、スマートフォンサイトへ移動してよいか、事前に確認するようにしましょう。

　次のようなプログラムを用意します。

    if(confirm('プレイグループ木場へようこそ。€このサイトにはスマートフォン用のサイトがあります。€表示しますか？')) {
        location.href = 'http://iphone.playgroup-kiba.com';
    }

　このプログラムは次のような確認ダイアログを表示し、「OK」が選択されるとスマートフォンサイトへ移動します。

iPhone/Androidからアクセスすると確認のダイアログが表示される

PCサイトとスマートフォンサイトを行き来する

　スマートフォンサイトとPCサイトとで別々のコンテンツを表示している場合は、互いに行き来できたほうが便利です。そこで、ページの一番下に次のようなリンクを用意し、PCサイトとスマートフォンサイトを移動できるようにします。

<p><a href="http://playgroup-kiba.com/">PC</a> | スマートフォン</a></p>

PCサイトとスマートフォンサイトを移動できるようにリンクを用意する

　ただし、このままではPCサイトへ移動するたびに確認ダイアログが表示されてしまうので、プログラムを次のように変更します。

<script type="text/javascript">
// iPhoneまたは、Androidの場合は振り分けを判断
if (document.referrer.indexOf('playgroup-kiba.com') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
    if(confirm('プレイグループ木場へようこそ。€\nこのサイトにはスマートフォン用のサイトがあります。€\n表示しますか？')) {
        location.href = 'http://iphone.playgroup-kiba.com';
    }
}
</script>

　変更した部分だけ見てみましょう。

if (document.referrer.indexOf('playgroup-kiba.com') == -1 && (....)) {
...

　document.referrerは「リファラー情報」と呼ばれ、直前に見ていたページのURLを取得できます。たとえば、今回のスマートフォンサイトを見ていた場合のリファラー情報は次のようになります。

http://iphone.playgroup-kiba.com/

　リファラー情報の文字列に「playgroup-kiba.com」が含まれていた場合はサイト内の遷移と分かるので、確認ダイアログを出さずに処理を終了します。これで、スマートフォンサイトとPCサイトを切り替えるたびに確認を求められる煩わしさがなくなります。

◆

　以上で、3回に渡って解説してきた「プレイグループ木場校」のスマートフォンサイトが完成しました。次回は別のサンプルを使って、マルチデバイス対応サイトの制作方法を紹介します。

navigator.platformの利用

　JavaScriptには、navigator.userAgentのほかにnavigator.platformというプラットフォームを表す情報があります。navigator.platformを使うと、iPhoneの場合は「iPhone」、iPadの場合は「iPad」と、振り分けに必要な情報が簡単に取得でき、よりシンプルなプログラムになります。

　ただし、navigator.platformでAndroidのプラットフォーム情報を取得すると「Linux armv7l」（HTC Desireの場合）のようになり、Androidであることが特定できません。AndroidはLinux OSをベースに作られているので、PlatformとしてはLinuxに分類されるためです。そこで今回はnavigator.platformではなくnavigator.userAgentを利用しています。

PHPでの振り分け

　本文ではJavaScriptを使った振り分けの方法を解説しましたが、そのほかのプログラム言語でも同じ考え方でプログラムを作成できます。たとえばPHPの場合は次のようなプログラムになります。

<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($agent, 'iPhone') !== false && strpos($agent, 'iPad') === false) || strpos($agent, 'iPod') !== false || strpos($agent, 'Android') !== false) {
?>
<script type="text/javascript">
    if(confirm('プレイグループ木場へようこそ。このサイトにはスマートフォン用のサイトがあります。表示しますか？')) {
        location.href = 'http://iphone.playgroup-kiba.com';
    }
</script>
<?php
}
?>