この記事のURLをスマートフォンに送る この記事のURLをスマートフォンに送る

今回もあまりがっつり書ける時間が無いので、超小技のエントリー( ̄▽ ̄;)

たとえば、Yahooさんとかがやっているんですが、

「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。

Yahoo! JAPAN (スマートフォンサイト)

(Yahooさんの手法とは違うかもしれませんが)

その方法を紹介します。

 
この記事のURLをスマートフォンに送る この記事の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をスマートフォンに送る この記事のURLをスマートフォンに送る

即座にDLできるようにアーカイブ化。

※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。

(あまりいらっしゃらないとは思いますが…)もしそれ以前にDLされた方は、現在修正版をお使いください。

ご報告いただいたnaruさん、ありがとうございました。

(ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください)

 
この記事のURLをスマートフォンに送る この記事のURLをスマートフォンに送る

PCサイトをスマホ対応するという記事を1・2回と続けてみて、意外とボリューム満載になってしまったので、

一旦ここまでのCSSテクについてまとめます。

■第1回 メニュー編

■記事はこちら 

f:id:izit_kosuke:20110130014951p:image