この記事のURLをスマートフォンに送る
今回もあまりがっつり書ける時間が無いので、超小技のエントリー( ̄▽ ̄;)
たとえば、Yahooさんとかがやっているんですが、
「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。
(Yahooさんの手法とは違うかもしれませんが)
その方法を紹介します。
この記事のURLをスマートフォンに送る
ちょっと今回はまめ知識的な内容です。
最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。
(jQuery Mobileなどを利用した開発方法は置いといて)
HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。
とくに、よくmetaタグを使った「Webアプリモード(フルスクリーンモード)」にする方法が書かれていたりします。
<meta name="apple-mobile-web-app-capable" content="yes" />これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。
これで、サイトをアプリっぽく見せられる!ってちょっと興奮しちゃいますよね。
ただ、これって意外な落とし穴があるんです( ̄▽ ̄;)
今回は、僕が知ってる大きな2つの注意点を挙げます。
★基本的にリンクは全てJavaScript化、もしくはページ内リンク(#使ったやつ)にする必要がある。
★「戻る」ボタン的な用意がほぼ必須になる。
なぜかというと、ふつうのリンク記述だとせっかく設定したWebアプリモードから抜けて、
Safariに飛ばされてしまうのです
では、前回の記事のサンプルソースを使って、検証してみたいと思います。
この記事のURLをスマートフォンに送る
即座にDLできるようにアーカイブ化。
※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。
(あまりいらっしゃらないとは思いますが…)もしそれ以前にDLされた方は、現在修正版をお使いください。
ご報告いただいたnaruさん、ありがとうございました。
(ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください)