ちょっと今回はまめ知識的な内容です。

最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。

（jQuery Mobileなどを利用した開発方法は置いといて）

HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。

とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。

<meta name="apple-mobile-web-app-capable" content="yes" />

これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。
これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。

ただ、これって意外な落とし穴があるんです(￣▽￣;)

今回は、僕が知ってる大きな２つの注意点を挙げます。


★基本的にリンクは全てJavaScript化、もしくはページ内リンク（#使ったやつ）にする必要がある。
★「戻る」ボタン的な用意がほぼ必須になる。



なぜかというと、ふつうのリンク記述だとせっかく設定したWebアプリモードから抜けて、

Safariに飛ばされてしまうのです


では、前回の記事のサンプルソースを使って、検証してみたいと思います。



前回使ったサンプルソースですが、ページとしてはこんな感じです。


このサンプルに例のmetaタグとアイコンを設定して、Webアプリ風にしてみます。
<meta name="apple-mobile-web-app-capable" content="yes&" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />


（サンプルをサーバにアップしてみましたので、iPhoneお持ちの方はぜひお試しを）
サンプル（外部サイトです）
アクセスしたら、「ホーム画面に追加」をおこないます。
※下の画像は英語ですが、日本語環境の場合は「ホーム画面に追加」と出ているので、それを選んでください。


そうするとこういう画面になります。


右上の「追加」ボタンを押して、追加するとホーム画面にアイコンが追加されます。


そして、このアイコンを押してサイトにアクセス、というかWebアプリを起動します。
すると…

URLバーなどが無くなり、ネイティブアプリっぽくなりました！

ちなみに、ここでメニュー部分のHTMLソースがどうなっているか見てみましょう。
（※spanが多く入って、あまりかっこはよくないですが…）
<div id="globalNav" class="clearfix">
<ul>
<li><a href="second.html" title="iMac"><span><img src="images/icon1.png" width="48" height="48" /></span><span>iMac</span></a></li>
<li><a href="second.html" title="MacBook Pro"><span><img src="images/icon2.png" width="48" height="48" /></span><span>MacBook Pro</span></a></li>
<li><a href="second.html" title="iPhone"><span><img src="images/icon3.png" width="48" height="48" /></span><span>iPhone</span></a></li>
<li><a href="second.html" title="Search"><span><img src="images/icon4.png" width="48" height="48" /></span><span>Search</span></a></li>
<li><a href="second.html" title="RSS"><span><img src="images/icon5.png" width="48" height="48" /></span><span>RSS</span></a></li>
</ul>
</div>


なんの変哲もないソースです。
全てリンク先はsecond.htmlに飛ぶようにしてます。
なので、当然Webアプリのリンクを押すと、画面が遷移すると思いますよね。

ところが、メニューを押してみると…

なんとSafariに飛ばされてしまったぁ。。。



こ、これではWebアプリにした意味があんまり無い。。。

これは、はっきりと仕様確認したわけじゃないのですが、
#～なページ内リンク以外は、アプリの外とみなす仕様になっているんだと思います。
で、こんなときどうするかというと、
僕が知ってる手っとり早い方法は、リンクはJavaScriptのonClickイベントで処理することです。
わざわざページ内リンクにして、どうにか他のページに遷移する仕組みを作るのはけっこう大変です。
単純に画面遷移をおこないたいなら、これで事足りると思います。
記述がすっきりなjQuery使います。
jQuery読込み
<script src="js/jquery-1.5.min.js"></script>


下記のようなスクリプトを記述します。
（ページにスクリプトを直に書くのは好きじゃありませんが…今回はとりあえず直に）
$(function(){
//ページ内のaタグ群を取得。aTagsに配列として代入。
var aTags = $('a');
//全てのaタグについて処理
aTags.each(function(){
//aタグのhref属性からリンク先url取得
var url = $(this).attr('href');
　　　//念のため、href属性は削除
$(this).removeAttr('href');
//クリックイベントをバインド
$(this).click(function(){
location.href = url;
});
});
});

そうすると、Safariに飛ばず画面遷移するようになりました。

しかし…お気づきかと思いますが、ブラウザの各バーを消しているので、
戻ることができません。

そこで、２ページ目に「戻る」ボタンを付けます。
jQuery使うまでもありません。
<div id="backButton"><a href="javascript:history.back();">←戻る</a></div>



戻れるようになりました。
リンク飛べるようになった方は、こちらです。
サンプル2（外部サイトです）




徹底解説 HTML5 APIガイドブック ビジュアル系API編

作者: 羽田野太巳
出版社/メーカー: 秀和システム
発売日: 2011/01
メディア: 単行本
購入: 2人 クリック: 21回
この商品を含むブログ (4件) を見る