Kaleidoscope このページをアンテナに追加 RSSフィード

2011-02-19

izit_kosuke2011-02-19

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

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

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

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

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


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

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

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

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


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


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


★基本的にリンクは全てJavaScript化、もしくはページ内リンク(#使ったやつ)にする必要がある。

★「戻る」ボタン的な用意がほぼ必須になる。


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

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


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





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

f:id:izit_kosuke:20110219035000p:image


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

<!--Webアプリモード(フルスクリーンモード)-->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<!--ホームアイコンの設定-->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

(サンプルをサーバにアップしてみましたので、iPhoneお持ちの方はぜひお試しを)

サンプル(外部サイトです)

アクセスしたら、「ホーム画面に追加」をおこないます。

※下の画像は英語ですが、日本語環境の場合は「ホーム画面に追加」と出ているので、それを選んでください。

f:id:izit_kosuke:20110219040228p:image


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

f:id:izit_kosuke:20110219040441p:image


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

f:id:izit_kosuke:20110219040442p:image


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

すると…


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

f:id:izit_kosuke:20110219040903p:image

ちなみに、ここでメニュー部分の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に飛ばされてしまったぁ。。。

f:id:izit_kosuke:20110219043034p:image:left

f:id:izit_kosuke:20110219041853p:image


こ、これでは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に飛ばず画面遷移するようになりました。

f:id:izit_kosuke:20110219084845p:image



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

戻ることができません。


そこで、2ページ目に「戻る」ボタンを付けます。

jQuery使うまでもありません。

    <div id="backButton"><a href="javascript:history.back();">←戻る</a></div>

f:id:izit_kosuke:20110219084846p:image


戻れるようになりました。

リンク飛べるようになった方は、こちらです。

サンプル2(外部サイトです)


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

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

misomiso 2011/02/21 15:11 アドレスバーを隠すという行為自体セキュリティ的にどうなんでしょう

izit_kosukeizit_kosuke 2011/02/21 15:37 >misoさま
行為というか機能としてあるので、その辺はAppleに聞いていただければです。
一度Safariでサイトにアクセスしないと、上記はできないので隠すことにはならないと思いますよ。
URLが見える状態で利用したい場合は、Safariでアクセスすればよいかと思います。

cormocormo 2011/02/21 18:55 一番最初にJQuery mobileについて触れられてますが、
これ使ってアプリモードにするだけで、記事の件を回避してネイティブアプリっぽく
できちゃいますね。元からAjaxリンクとハッシュでのヒストリー管理になってるので。
(今手元でやってみました。metaタグ追加しただけですけど)

ただ、リロードができなくなるので、エラーが起きた時にフリーズしたまま…
とかになるので、同機能を持ったUIを付けてあげるべきかなぁ、と思いました。
ともあれ、色々試してみたくなります。

misomiso 2011/02/21 20:19 >一度Safariでサイトにアクセスしないと、上記はできないので隠すことにはならないと思いますよ。
それはアクセス時、どのリンクも踏まない場合でないと意味が無いと思います。
自作のもの以外でやるのはとても危険な行為です。
Apple自身も問題を認識しているようです。

izit_kosukeizit_kosuke 2011/02/21 20:34 >cormoさま
そうですよね。jQuery Mobileは、遷移時にアニメーションまでしてくれますよね。
jQuery Mobileで枠組みを作って、自分でカスタマイズしていくのが良さそうですよね。

izit_kosukeizit_kosuke 2011/02/21 20:39 >misoさま
>Apple自身も問題を認識しているようです。
そうなんですね。知らなかったです。
PCサイトと違って、スマホサイトはタッチしないことにはURLがわかりません。
でしたら、スマホサイトやアプリは使わないのが一番いいかと。
そこを危険だと言われても、ちょっと僕には答えようがありません。
URLを見えなくしよう!と薦めてるわけではないので。ごめんなさい。

HondyHondy 2012/03/08 18:27 はじめまして、とてもためになりました!
さっそく実装してみたんですが、動作は全く問題ありませんでしたが外部リンクをウェブアプリ内でしてしまった場合同じウェブアプリ内で表示してしまう為、リンク先に行ったまま戻る事ができませんでした。外部リンクだけ外に出す方法なんかはあるようでしたら、ご教授お願いいたします!

また、ホームページをパソコンで見るとリンクの部分にカーソルをあてるとポインタが選択形式のポインタになってしまうのですが、普通のポインタにする事ってできますかね?

スタイルシートでリンクタグに cursor: hand  を入れてみたんですが
なんかダメでした。。。(泣)

thatthat 2012/12/14 00:13 はじめまして
勉強になります。ご存知であれば教えてください。
アイコンを削除しましたら、プライバシーの位置情報のところに com.apple.webapp が残って
消せなくなっていました。これを削除する方法がありますでしょうか。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430