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

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

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

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

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

[html]

[/html]

これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。

これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。

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

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

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

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

このサンプルに例のmetaタグとアイコンを設定して、Webアプリ風にしてみます。

[html]


[/html]

（サンプルをサーバにアップしてみましたので、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件) を見る

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン