【iPhone/iPad対応はできているかチェック】HTML5＋CSS3で作る 魅せるiPhoneサイト/谷拓樹
HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
読了。
フィーチャーフォンからスマートフォンへの移行というのがだんだん進んでいるわけですが、そんな中でもiPhone！ということでiPhoneで何ができるのかを勉強するべく購入。
サンプルなどもあって非常に分かりやすい本でした。
（サンプルはサイトURLが掲載されています）
目次
スマートフォン時代のwebサイト
iPhoneサイト構築のワークフロー
基本的なページの作成
iPhone風ナビゲーションページの作成
アニメーションするページの作成
ユーザビリティの高いフォームの作成
webサービスと連携したページの作成
ショッピングサイトの作成
気になった
サイト事例（カラーページ）
日本語フォントは一つのみ
iPhoneシミュレーターでの検証
アクセスを振り分ける三つの方法
（.htaccess/JS/php）
AppleのiPhoneヒューマンインターフェースガイドライン
ViewPortでのサイズ指定
電話番号認識の無効化
アニメーション
iPhoneで使えるフォームの属性と値
パフォーマンス調整でiPhoneサイトをより快適に
デスクトップサイトをiPadに対応させる
スクロールバーは表示されない
マウスオーバーが使えない
画面設計に役立つツール/サービス
感想
非常に分かりやすい本でした。
iPhoneユーザーが増加傾向にあるというのは現実でそのユーザーに向けていかに快適な環境を提供できるか、ですよね。
「PCサイトもiPhoneで見られるから特に気にしなくてもいい」というわけではなく、例えばマウスオーバーの制限だったりスクロールバーの制限だったりがあって、そういった細々とした部分で機会損失を起こしているかもしれないわけです。
「これからiPhoneサイトを勉強しよう」という方にも「気になってたけど手付かず」という方にもおすすめ。
フィーチャーフォンが主流だった時に「ユーザーの半分位が携帯電話から来ている」というサイトがあったように、今後スマートフォンやタブレット端末ユーザーがサイト訪問者の半分とかを占める時代が来るかもしれません。（もしかしたらもうあるかも？）
慌てて対応するのではなく、あらかじめ知識をつけておくことが大事なのではと感じました。
と言っても、このサイトも特に何もやってないのですがｗ
Categories CSSやろう, iPhone, webデザイン, 書籍・雑誌 | Comment (0)
WordPressプラグイン「WPTouch」のwebクリップ&スマホページのファビコン変更方法
「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
「ホーム画面用のアイコン指定方法」
というのがありました。
iPhoneで「webクリップ」と呼ばれている機能らしいです。まずその説明から。
webクリップとは？
MobileSafariの機能の一つ。
設定方法は簡単。
MobileSafariでサイトを開いてブラウザ下の四角い部分をタップします。
「ホーム画面に追加」をタップ。
このようにデスクトップ上にショートカットが！
（「ホーム画面に追加」の後にアイコン名は選択できます。上記はデフォルトの状態）
webクリップアイコンの変更方法（wptouch.ver）
通常のスマートフォン向けサイトであればタグを記述して指定するのですが、WordPressのスマートフォン向けサイト最適化プラグイン「wptouch」ではオプションでこの変更が可能です。
その手順を説明します。
1.メニューの「設定」→「WPTouch」を選択
2.「Default & Custom Icon Pool」という箇所があるので、そこの「Upload」の部分をクリックし、任意のアイコンをアップロードします。
If you’re adding a logo icon, the best dimensions for it are 59x60px (png) when used as a bookmark icon.
（59×60pxのpng形式のものが好ましそうです。自分は単色なので適当なサイズでアップしちゃいました）
3.「Logo Icon // Menu Items & Pages Icons」で使用するロゴを選択
※もしかするとアップロード直後には表示されないかもしれないので、その場合、画面一番下の「Save Options」で一旦設定を保存すると表示されます。
4.設定を保存して、完了。
実際の表示
スマホサイトのファビコン。
左：変更前/右：変更後
ページ上部のファビコン部分が変わってます。
左：変更前/右：変更後
デスクトップはこんな感じに。
その他オプションに関して
「Logo Icon // Menu Items & Pages Icons」の最初のオプション「If you do not want your logo to have the glossy effect added to it, make sure you select Enable Flat Bookmark Icon」ですがアイコンに光沢を持たせるか持たせないかの選択です。
初期がチェックボックス未設定（光沢あり）。チェックボックスを入れると光沢なしに変化します。
違いはこんな感じ。
左が光沢あり、右が光沢なし。
自分は光沢なしの方がしっくり来たので光沢なしにしてみました。
Categories iPhone, WordPress | Comment (0)スマートフォン、その先を想像する
Googleがスマートフォン用クローラーを発表し、巷では「これからはスマホサイト重要だよね！」という流れになりつつありますが、PCサイトの立ち位置は今までより縮小されてしまうのでしょうか？
そのへんをちょっと妄想してみました。
スマートフォンの進化系？
YouTubeで見つけたスマートフォンの将来映像。
（※多分公式ではないです）
電子ディスプレイ！
（※電子ディスプレイの未来は夏野剛さんが今のスマホが出る前から仰ってました。）
スマホからデスクトップが出現！
今後の話
実際にこのような電子ディスプレイが出るのかどうなのかも分からないし、出るにしても何年後になるのかサッパリ分からないわけですが、あながち間違った未来予測ではないのではないような気がします。
（近年の技術発達を見ていると5年以内くらいにはこういうの出てきそうですよね）
この技術が完成したからといってスマホサイトがなくなりはしないでしょう。
例えば、電車の中だったり、人と人が密接しているような空間では他人から丸見えになってしまう場合、このディスプレイは落ち着かない。
スマホサイト→出勤/通学途中/帰宅途中
PCサイト→外出時/待ち合わせ時/自宅/旅行の滞在先
などによって使い分けられてくるのではないでしょうか。
個人的な空間で携帯電話を使うユーザーが増えてきており、携帯サイトでの効果も見られるサイトが多いです。
ただ、今後電子ディスプレイのような技術が出てきた場合、PCサイトがさらに重要になってくるのではと感じました。
もっと将来を想像しよう。
Categories Google, iPhone, モバイル | Comment (0)スマートフォン向けクローラーが発表。検索結果の順位は？
まさかの年末急展開。
Googleのスマホ向けクローラーをテストで回しているという話は出回っていましたが、遂に公式発表がありました。
Google ウェブマスター向け公式ブログ: スマートフォン版 Googlebot-Mobile の導入について
Googleでは、従来の携帯電話（フィーチャーフォン）のユーザーエージェントを使用した Googlebot-Mobile に加えて、スマートフォンのユーザーエージェントを使用した Googlebot-Mobile によるクロールを開始しましたのでお知らせいたします。スマートフォン版 Googlebot-Mobile の導入により、より幅広くスマートフォン用コンテンツを収集して、スマートフォンユーザーのための検索サービスの改善に利用していきます。
気になる検索結果の順位
（個人的な予想です）
現状スマホ向けのページを生成しているサイトはそれほど多くないように感じています。
なのでスマホ向けページを生成しているからといって大幅に順位が上がる、なんてことは直近では「ない」のではないかと思うわけです。
ユーザーはコンテンツを探したいのであって、フォーマットを探したいのではないのです、ただし、スマートフォンというユーザインターフェースやそのデバイスが持つ機能を考慮したら、優れたUXを提供するために行うべきことは行われていくのでしょう。
（米Google、スマートフォンサイト専用のクローラを発表 Googlebot-Mobile ::SEM R）
渡辺さんのこの言葉にあるように、コンテンツが優れていないと検索結果の上位に表示する意味はないと思うのです。
「スマホ向けページがある」＝「優れたコンテンツ」というわけでは決してないので。
ただ、
・「スマホ向けページがある」という点が評価の一つに加味される
・「スマホ向けページがあるサイトに絞り込む」みたいなメニューが出てくる
（フォーマットを探したいわけではない、という考え方からすると違うのかもですが）
・Googleモバイルの携帯マーク（※）のようなものが付与される
ということはあるのではないかと予測しています。
※携帯マーク
公式に書かれているようにスマホ向けサイトを持っている場合、UAの振り分けをきちんと確認しておくことが重要です。
また今後スマホ向けページを持っておくということが何かしらのアドバンテージになるのかなと思います。
なによりユーザーにとっては使い勝手がいいですからね。
スマートフォンの場合、日本語URLがうまく処理できない場合があるかもしれない
前回「当サイト11月のアクセス解析」で書きましたが、解析を取るとURLに文字化けが起こっているのがあります。
で、その時は
11/17なので「リンクが少ないですね！」のコンテンツなんだろうけど、アクセスしようとすると404エラー。
過去に「スマホでアクセスしようとすると404を返す」と言われたことがあったのでその影響かも・・・
日本語URLが原因なのだろうか。ちょっと分からないんだけど注視してみます。
なんて悠長なことを書いてたのですが、ちょっと調べてみることにしました。
OSを調べる
iPhone/Androidの二択。
（ここでは分かりやすく11/17の該当URLのデータを取得していますが他の文字化けのものもこの2つが表示）
ブラウザ
どういうわけか数字がずれますが、
iPhone-Mozilla Compatible Agent
Android-Android Browser
という構図は間違いなさそう。
※Mozilla Compatible Agentに関して参考になりそうなサイト
What does “Mozilla Compatible Agent / iPhone” mean? – Google Analytics Help（英語）
iPhoneのUserAgentということで間違いなさそう。
仕組みが書いてあるけどよく分からないｗ
調べている途中で「クローラーです」と言ってるサイトもあったけど、プロバイダ見る限りは普通のユーザーと考えてよさそう。
というか、Analyticsはクローラー含まないですよね。
リファラー
短縮URL（twitterから）/facebookなど遷移前の影響ではないようにも思えますが・・・
まとめ
結局のところ解決策があまり良くわからないという話です。
日本語URLの変換がうまくいってないんじゃないかと思うわけですが、どうするべきか・・・
※追記2012.1.1 10:55
どうしてもfacebookやtwitterの変換機能に依存してしまうことが多いので、日本語URLはあまり推奨できないという結論に至りました。
WordPressでの日本語URL解決方法はこちら
スマートフォンで起こってしまう日本語URL文字化け→404エラー対処法（WordPress編）
それでも日本語URLでfacebookに投稿する！という場合は一時しのぎ的な方法ですがこちらへ
facebookに投稿した日本語URLの文字化け問題の解決方法
