Freeway iPhone、iPadに最適なサイトにAndroidを対応させる

以前に iPhone、iPadに最適なサイトという記事を投稿しましたがそれに関してお問い合わせが有りました。

お問い合わせ頂いた方いわく、『パブリッシュした「index.html」ファイルをエディタで開き、 iPhone|iPodの記述の後に「|Android」(縦棒は必須) 加えて保存したファイルをＦＴＰソフトでアップロードするという方法でアンドロイドにも対応できる事は分かったが、もっと良い方法は有りませんか？』という事でした。

なるほど！、そういう方法があるのかと勉強になりましたが、一つ問題が有ります。これだとサイトをパブリッシュするごとに元に戻ってしまうので、毎回htmlを書き直してアップロードする必要が有る......という事です。多分この事についてもっと良い方法を.....と思われているのでしょう。

アンドロイドを持ってないので検証できませんが、この手間がかからない方法をご紹介したいと思います。

先ずは、iPhone/iPadリダイレクト_アクションを実行するとhtmlはどのように変化するのかを確認してみましょう。

アクションによってスクリプトが追加されているのが分かります。(オレンジで囲まれた部分)　iPhone,iPodでブラウンジングした時にそれぞれリダイレクトするページが指定されているのが分かります。</head>の前に記述されている事に注目しておいて下さい。それではその下にAndroid用の１文を書き加えてみたいと思いますが、パブリッシュした後に元に戻らないようにFreeway内で実行したいと思います。書き加えるのはこの一分。(青文字部分は任意)
if(navigator.userAgent.match(/Android/i))
window.location.replace("Android_page.html");

それでは手順を説明します。下記スクリプトをコピーしましょう。(青文字部分は任意)

<script type="text/javascript">//<![CDATA[
(function(){
if(navigator.userAgent.match(/iPhone|iPod/i))
window.location.replace("ココにiPhone用のページのurlを記入");
if(navigator.userAgent.match(/iPad/i))
window.location.replace("ココにiPad用のページのurlを記入");
if(navigator.userAgent.match(/Android/i))
window.location.replace("ココにAndroid用のページのurlを記入");
})();
//]]></script>

Freewayに戻り、ページ/HTMLマークアップを選択します。

先ほどコピーしたものをマークアップに貼付けて、挿入を『＜/head＞タグの前』にします。

もしiPhone/iPadリダイレクトを適用済みの場合は不要になりますので、アクションを削除します。(削除しないと2重記述になります)

パブリッシュしてみると、ちゃんとスクリプトが</head>タグの前に書き込まれていました。この方法で良いと思うのですが.......。どなたか検証してみたら教えて下さい！