Entries

スポンサーサイト

カテゴリ:スポンサー広告
更新日:--------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

iPad向けのWebサイトを作るときに気がついたこと

カテゴリ:iOS/iPad/iPhone
タグ: iPad  Google  Maps  地図 
更新日:2010-06-12
先日、雑誌風のWebサイトを作ることができる、Myムック「すみれ」というWebサービスを公開した。

> Myムック「すみれ」

公開後、何人かがアクセスしてくれたみたいなんだけれど、エラーが出ていることに気がついた。症状としては、トップページからムックを作成しようとするとユーザー登録画面に遷移できていなかったことなんだけれど、ムックを表示したときにユーザー登録してあるとActionメニューでいろいろできる機能と混信していて、なんだかややこしいことになっていた。公開直後で妙に焦ってしまったので、もうちょっと詰めたほうがいいところはあるけど、とりあえず応急処置にした。まだ、おかしかったら遠慮なくコメントください。お願いします。

> まだ全然、完成度は低いんだけれど、電子書籍まわりの動きも早いので、とりあえず公開しちゃいます。自分で雑誌風デザインのサイトが作れるWebサービスです。表示はiPadに最適化。 - Myムック「すみれ」

詳しくは、上記のエントリを読んでもらうとして、このサイトは、iPadを買う口実としてiPad向けのサイトとして構築してある。もちろん、普通のブラウザでも見れるけど、iPadならより効果的になるようにと考えている。作り始めたときには実機がないので、こんなものかなぁ、と手探りで作っていたんだけれど、実機で動かしてみてびっくり!というのがいくつかあったので、いちおう報告しておこうと思う。

画面のサイズ

スペックによるとiPadの画素数は、横 768px × 縦1024px(縦方向)となっている。最近、Webサイトを作るときには、横800pxで作っているので、まぁそんなものか、と作っていた。ところが、iPadで表示すると、大きな余白がある。どうやら、iPadのSafariは、擬似的に横980pxで表示するらしい。

> iPadに最適化したサイトがつくれるかもしれない5つの方法(基本編)

Myムック「すみれ」でムックを表示するとiPadでぴったりになるようにしてある。これを普通のPCのブラウザで見ると下のほうはかなり欠けるんじゃないだろうか。私は、今、1920x1080のハイビジョンモニタで見ているけれど、全部は表示できない。

これだけのサイズをいちべつできると、一覧性はかなりいい。文字は少し小さいけれど、PCモニタより近くで見る姿勢のため、まったく読めないという程でもない。さらにダブルタップで読みたいところがすぐに拡大するから、最近、老眼の自覚症状が出てきたけれど、問題なく読むことができる。

これだけの一覧性と高速な拡大縮小は、人の視覚の動きに近い。人の視覚は、普段は全体が見えていて、読もうと意識すると、その周辺は見えなくなるんだけれど、これと同じような動きになっている。iPadで見ることがストレスなく、心地いいのは、こういうところにあるんだろうと思う。

そうそう、ダブルタップで拡大したとき、横幅は、そのブロックの横幅に合わせるようになっているようだ。ブロックの配置が凝っていると、拡大しすぎたり、足りなかったりと、うまくいかないときがある。ピンチで調整はできるけど、ひと手間かかるので、気を付けたいところだ。

Google Mapsの埋め込み

Myムック「すみれ」は、旅行ガイドを目指して作り始めたので、Google Mapsを埋め込むのは必須事項だった。iPadで表示できたときには、ひと安心だったんだけれど、次の瞬間、ダメなことがわかった。ドラッグすると、ページがスクロールしてしまって、地図の操作ができないのだ。コントロールボタンも、小さくてタップしにくい。

応急処置として地図の四方にスクロールボタンをつけるようにしたけど、まだ拡大縮小の問題もある。Google Mapsの処理も重いのか、反応も鈍い。このあたりは考えなおさないといけないなぁ。地図アプリがあるんだから、あれを呼び出すことはできないんだろうか?

インラインに表示してドラッグできる地図というのがGoogle Mapsのウリだった。それが、iPadでは、それ以前の地図の操作に戻されてしまうわけだ。Appleが地図の会社を買収したのは、このあたりにも事情があるのかなぁ、と思う。操作性に難があるということは、Appleとしてはかなり致命的なことだ。地図はかなり重要なアプリだから、そこを他社に依存していては、先進性を確保することが難しくなってしまう。Googleもタブレットタイプは視野に入っているようだから、Google Mapsにも改良は加えられるんだろうけど、それを待ってもいられない。なら、自分たちでやるしかない、というところか。

Google MapsのV3 APIならiPadでも操作できます。

> Webページに埋め込んだGoogle Mapsは、V3ならiPadでも操作できるらしいので、さっそく、Myムック「すみれ」をバージョンアップしました

(2010年7月22日追記)



iPadショック

iPadショック

価格:1,680円(税込、送料別)




スポンサーサイト

Appendix

プロフィール

いむら@fintopo いむら@fintopo

ガーデニングが趣味のフリーのシステムエンジニア兼プログラマ(フルスタックエンジニア)です。

仕事募集中です。個人なので、融通がききます。 大規模な開発はできないかもしれませんが、研究や製品開発レベルでの小規模開発、特に相談しながら新しいものを作っていくのが得意です。詳しくはWebサイトをご覧ください。
詳しくは「fintopoとは」をご覧ください。

> fintopoとは

このページのQRコード

季節暦

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。