Pages
Stay In Touch
More
© 2011 Kaleidoscope
この記事のURLをスマートフォンに送る
はてなからブログを引越しました。
WordPressに移行しました。
前のブログはこっち
http://d.hatena.ne.jp/izit_kosuke/
基本的なスマホ対応してます。（iPhone・Androidでアクセスしてください）
【サイトトップ】
超突貫で作ったので、細かい部分でいろいろ行き届いてません。
カテゴリやエントリがないリンクすらありますw
IE6は完全切り捨てです（笑）
IE7ではレイアウトが微妙に崩れるようです。
iPhone／Android対応してますが、フリックできるところとか
（完全なフリックの実装はしてない）
ときどきバグります。
また、スマホ時もPCサイトの画像（サイズの大きい画像）をそのまま読込んでいるので
ページ読込みにやや時間がかかります。
スマホサイトやアプリの制作関連をエントリしていきつつ、
サイトも良くしていこうと思ってます。
新しいブログ スマートフォンビュー
この記事のURLをスマートフォンに送る
今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;)
たとえば、Yahooさんとかがやっているんですが、
「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。
（Yahooさんの手法とは違うかもしれませんが）
その方法を紹介します。
この記事のURLをスマートフォンに送る
ちょっと今回はまめ知識的な内容です。
最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。
（jQuery Mobileなどを利用した開発方法は置いといて）
HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。
とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。
<meta name="apple-mobile-web-app-capable" content="yes" />これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。
これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。
ただ、これって意外な落とし穴があるんです(￣▽￣;)
今回は、僕が知ってる大きな２つの注意点を挙げます。
★基本的にリンクは全てJavaScript化、もしくはページ内リンク（#使ったやつ）にする必要がある。
★「戻る」ボタン的な用意がほぼ必須になる。
なぜかというと、ふつうのリンク記述だとせっかく設定したWebアプリモードから抜けて、
Safariに飛ばされてしまうのです
では、前回の記事のサンプルソースを使って、検証してみたいと思います。
この記事のURLをスマートフォンに送る
即座にDLできるようにアーカイブ化。
※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。
（あまりいらっしゃらないとは思いますが…）もしそれ以前にDLされた方は、現在修正版をお使いください。
ご報告いただいたnaruさん、ありがとうございました。
（ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください）