スマホサイト：Webアプリモードで意外と書かれていない落とし穴

izit_kosuke2011-02-19

ちょっと今回はまめ知識的な内容です。
最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。
（jQuery Mobileなどを利用した開発方法は置いといて）
HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。


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

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

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


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


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



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


なぜかというと、ふつうのリンク記述だとせっかく設定したWebアプリモードから抜けて、
Safariに飛ばされてしまうのです


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





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


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

<!--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が多く入って、あまりかっこはよくないですが…）

      <!--globalNav-->
      <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><!--/globalNav-->


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


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


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


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


これは、はっきりと仕様確認したわけじゃないのですが、
#〜なページ内リンク以外は、アプリの外とみなす仕様になっているんだと思います。



で、こんなときどうするかというと、
僕が知ってる手っとり早い方法は、リンクはJavaScriptのonClickイベントで処理することです。
わざわざページ内リンクにして、どうにか他のページに遷移する仕組みを作るのはけっこう大変です。
単純に画面遷移をおこないたいなら、これで事足りると思います。

記述がすっきりなjQuery使います。

jQuery読込み

<!--だいぶすっきりしてますが、一応HTML5記述で-->
<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（外部サイトです）


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

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