スマフォサイト制作の時に勉強になるサイトとか、あれこれ。
こんにちは、taku-workです。
galaxy s2に伸縮式のアンテナが付いていることを買ってしばらくしてから気づきました。ビックリ。
どおりでワンセグの感度が悪いわけだ。そりゃあアンテナ伸ばしてないんですから。
意気揚々とアンテナを伸ばしてみたところ、たいして受信感度が変わらなくて、二度ビックリです。
ということで、今回はスマフォサイト制作の時に勉強になるサイトのおはなし。
スマフォもだいぶ浸透してきたようですし、機種も増えてそれぞれの仕様など気になるところ。
もろもろの参考にいかがでしょうか。
スマートフォン比較表
スマートフォン比較表
http://www.smph.info/
まずは各スマフォの仕様確認から。
開発対象になる機種のOS、メモリに保存容量、画面解像度などは把握しておきたいところですね。
画面解像度のほかにもdevicePixelRatioというものがあるようで、以下の記事が参考になります。
Android端末のdevicePixelRatio[to-R]
http://blog.webcreativepark.net/2011/01/25-173502.html
ふむふむ。なるほど。
User Interface Guidelinesの仕様について
iOS Human Interface Guidelines: Introduction
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.htmlUser Interface Guidelines | Android Developers
http://developer.android.com/intl/ja/guide/practices/ui_guidelines/index.htmlControls Design Guidelines for Windows Phone
http://msdn.microsoft.com/en-us/library/hh202879(v=VS.92).aspx
iOS、android、Windows PhoneそれぞれのInterface Guidelinesです。
アプリ開発にはもちろんですが、サイト制作の際にも読んでおくとよさそうです。
確認用にUA（ユーザーエージェント）のまとめ
スマートフォンUSERAGENT一覧+モバイル版クローラ | カグア！
http://www.kagua.biz/android/ualist.htmlスマートフォン UA 一覧｜Memo Record の ブログ
http://ameblo.jp/memorecord/entry-10786048055.html
テストデータなどの確認を実機でできる環境があればよいですが、なかなかすべての機種を手元揃えるのも大変です。
Firefoxでは機能拡張で、chromeではterminalから操作することで、safariなら開発メニューからUAを変更することができます。
その他の小技
Docsource mobile bookmarklet | High Performance Web Sites
http://www.stevesouders.com/blog/2011/01/24/docsource-mobile-bookmarklet/
スマフォの実機上でHTMLやCSSを確認したいときにはこのbookmarkletが便利です。
リンク先のInstallationの項目に使い方が書かれています。
チュートリアル:9patchで画像を作る ? Tech Booster
http://techbooster.jpn.org/andriod/environment/3996/
android SDKには9patch（矩形を9つに分割して作って矩形の拡大縮小に対応するもの）というのがありまして、それの作り方の解説です。
ということで
他にもデザインの良いスマフォ対応サイトまとめなどいろいろありますが、それはまたの機会に。
いつぞやのガラケーサイト制作のようにスマフォもどんどん細かな対応が求められていくのでしょうね。
いやはや、勉強しておかねば、ですね。
