iPhoneのSafariでフォントサイズが勝手に変わる際の対処法

iOSはおせっかいで余計なことを自動でやってくれちゃうので
スタイル指定を無視してフォントサイズを自動調整してくれちゃいます。

この自動調整を無効化する -webkit-text-size-adjust というプロパティがあるので
以下のように body などに記述しておくと良いと思います。

参考
iPhoneでフォントサイズが勝手に変わっちゃう時の解決方法 | YOUSORO.blog
-webkit-text-size-adjust: none を絶対に設定してはいけない理由 - てっく煮ブログ

body {
    -webkit-text-size-adjust: 100%;
}

郵便番号フィールドにinput[type="number"]を使ってはいけない

スマホサイトを制作したのだがフォームにフォーカスを当てた際に出るキーボードを
数字キーボードにしたいという要望があったので
input[type="number"] や input[type="tel"] を使えば良いと聞いていた俺は
それぞれ郵便番号と電話番号のフィールドの type を text から変更したのだけど
input[type="number"] には罠があったので共有します。
input[type="number"] というよりは iOS の Safari にある罠です。

iOS の Safari は input[type="number"] のフィールドで入力値がゼロ始まりの数値の場合、頭のゼロを自動で除去する

この仕様…あのおせっかいな Excel を思い出す仕様だぜ…ｷﾞﾘｯ…

例えば皇居の郵便番号 100-0001 は分割された郵便番号フォームの後ろの部分が以下のように頭ゼロになります。
-
表示上は iOS でも全く問題ないのだけれど POST するタイミングで iOS の Safari は 0001 を 1 に変換します。
ベーシックなバリデーションで郵便番号 7 桁とか判定して 7 桁入力してくださいとかエラー出すと
ユーザーは 7 桁入力したのにとなるので確実にクレームものです。
iPhone を普段使いしていない僕は完全に油断してやられました。
iOS のみで起こり、input[type="number"] でゼロ始まりの数値を POST した時にようやく分かるバグです。
全く油断もすきもありません。

とりあえず対処として input[type="text"] に戻しました。
input[type="tel"] に変えるのも一瞬考えましたが
電話番号でないフィールドに input[type="tel"] を適用するのも
またろくでもないことになりそうだったのでやめておきました。

[書評]モバイルデザインパターン

モバイルデザインパターン― ユーザーインタフェースのためのパターン集
Theresa Neil
オライリージャパン
発売日：2012-09-24

ブクログでレビューを見る»
モバイルアプリデザインのベストプラクティスのカタログ本です。
実際のアプリのスクリーンショットを用いて
それぞれのデザインパターンについて説明しているので用途がイメージしやすいです。
アンチパターンについても書かれているので
開発したアプリがアンチパターンに陥っていないか確認するのに良いと思います。

基本的には良い本なんだけど私が嫌いなデザインの本にありがちな何点かの問題があるため☆5とは行かず。

1. 説明とスクリーンショットがページをまたぐ。
2. 説明の文末に対象の図番号を記述するので読み終わるまでどのSSについての説明なのかわからない。
3. 実際の UI なのでその他のコンポーネントが多くてどの部分について説明しているのかわかりにくい。
4. 実例を見ながらの説明なので説明文がなんとなくまとまっていない。

上記の4点のせいで何回も説明とスクリーンショットを見比べなければならないので頭に入って来にくかったけど
付録でデザインパターンと簡潔な説明がわかりやすく載っていたので良しとする。

デザインパターンの種類とスクリーンショットは以下のページにあります。
Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More

他にもモバイルアプリデザインパターンを集めたサイトがたくさんあります。
Pttrns — Mobile User Interface Patterns
Mobile Patterns
MOBILE PATTERNS
Patterns of Designdiscovering the best in iOS app design
TapFancy – An iPhone app design showcase and gallery
TappGala: The Best in Mobile Interface Design
Android App Patterns
Tumblrにスクリーンショットがたくさんアップされているので参考フォローしておくのもいいかもしれません。
lovely ui
Well-Placed Pixels
Android niceties
以下のサイトは Android アプリの挙動のパターンを解説していて Android を使わない人に便利かな。
Android Interaction Design Patterns |

デザインパターンも大事だけどまずはデザインガイドラインを知ることから始めないといけませんね。
Design | Android Developers
Icon Design Guidelines | Android Developers
iOSヒューマンインターフェイスガイドライン(pdf)
iOS Human Interface Guidelines: Introduction

[書評]日経ソフトウエア 2012年 02月号

日経ソフトウエア 2012年 02月号 [雑誌]
日経BP社
発売日：2011-12-24

ブクログでレビューを見る»
iOS & Android 同時アプリ開発入門、Androidアプリ設定法、Xcode4.2使い方入門など。
付録はゲームプログラミング入門的な冊子。

日経ソフトウエア　ダウンロード - 2012年：ITpro

iOS & Android 同時アプリ開発入門

ゲームとかでC/C++で共通化とか他のSDK使ったり、ちょっとしたアプリにHTML5やTitanium MobileでJavascriptとか。
重い処理をC/C++に投げるんじゃなければネイティブが良いと思っているのでやらないだろうけど概要が知れて良かった。

Androidアプリ設計法

TODOリストを作るという設定で色々解説してくれる。
ListViewの再利用のためのViewHolderのサンプルとかあって良い感じ。
Androidでやってる時はなんか難しそうな気がしてたけど
iPhoneでUITableViewを使って再利用が理解できたのでAndroidでもできる気がする。
データベースとかも扱ってるし、似たようなことをやる時はサンプルコードを参考にしたい。

Xcode4.2使い方入門

エディタ周りの使い方やコードスニペット登録や使い方、Class Referenceの見方、リファクタリングのための機能解説など。
すごく参考になる！やはりキーボードショートカットがないのは惜しい。キー操作で息をするようにXcodeを使いこなしたい。
連載まとめてキーボードショートカットつけたら電子書籍で売れるんじゃないかなーてか買う。出して！

サンプル作成で学ぶAndroidプログラミング　ライブ壁紙

ライブ壁紙アプリの開発方法の解説。
設定に表示させるAndroidManifest.xmlの書き方からライブ壁紙として画像を動かす方法など。
作るときにはサンプルコードが参考になりそう。

おまけ

インターン女子C#を学ぶという一時話題になっていた漫画が始まるのがこの号から。
付録はゲームプログラミングを始めようという薄い冊子。ゲーム作るのは大変そうだからあんまり読んでない。

日経ソフトウエアを読んでるとAndroidやりたくなってくる。時間取ってやりたい。

[書評]iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン
Josh Clark
オライリージャパン
発売日：2011-06-18

ブクログでレビューを見る»
iPhone/Android関係なく全てのスマホアプリ開発者が読むべき本。
デザインと言うからエンジニアは敬遠しがちだと思うが、
機能美と言えばエンジニアがこだわるべき事だと認識してもらえると思う。
この本のdesignの意味は芸術的な見た目ではなく、設計のことだ。
帯に「デザイン≠アプリの見た目」「デザイン=アプリの機能+性能+UI」と書いてあることからもわかる。
本書を読めば今までのアプリを一新したくなるほどデザインについて学ぶことができる。

iPhoneアプリ設計の極意 サポートページ — 目次 — マーリンアームズ株式会社

ご購入検討中の方へ

アプリが売れなくて困っている人――この本を読んで売れるアプリに変えましょう
アプリを開発中の人――この本を読んでもっとよいアプリを完成させましょう
これから開発する人――まずこの本から始めましょう
Androidアプリ開発者――この本を参考にiPhoneアプリに負けないモノを作りましょう
アプリの舞台裏を知りたい人――この本でアプリがどんな風に作られているのかがわかります
iPhoneを徹底活用したい人――この本でとっておきのテクニックを学びましょう

そのほか、下記のような方々にもおすすめです。

iPhoneのいろいろなアプリを知りたい方
Appleの『ヒューマンインターフェースガイドライン』を、マニュアル的な文章でない文章で読みたい方
Apple（Apple製品）が好きな方
Apple製品がなぜ美しいのか知りたい方
いろいろなアイディアに触れるのが好きな方

エンジニアは本書からスマホに特化した機能美を学ぶことのできるだろう。
デザイナーは機能美を理解してこそ、いわゆるデザインを創れるんじゃないかと思う。
どっちかというと機能美というよりインダストリアルデザインかな？あまり一般的な言葉じゃないけど。
エンジニアがいわゆるデザインをできなくてもいいけどインダストリアルデザインはできなきゃダメだと思う。
デザイナーの立場はなったことがないからわからん。でも知らないでデザインってダメだよね。
つまりスマホアプリ開発者は必修教材なわけです。
O'Reilly Japan - iPhoneアプリ設計の極意で7章がPDFで丸々見ることができるので読んでおきましょう。

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

[書評]iPhoneプログラミングUIKit詳解リファレンス

iPhoneプログラミングUIKit詳解リファレンス
所友太
リックテレコム
発売日：2010-01-12

ブクログでレビューを見る»
iPhone/iPadアプリを開発するなら必ず読んでおきたい一冊。
InterfaceBuilderを使わずに開発する方法が詳しく載っている。
InterfaceBuilderを使う人も動的な設定変更などは
コードで指定しなければならないので設定方法が網羅されている本書は役立つはずだ。

iPhoneプログラミング　UIKit詳解リファレンス | リックテレコム 書籍情報 http://www.ric.co.jp/book/contents/book_844.html

UIKit本への追加コンテンツと補足情報をこちらに追加していきます - iPhoneアプリ開発まっしぐら★
帯にはiOS4でも使える基礎知識と書かれているけどiOS5でも使えるし、
きっと今度のiOS6でも使えるんじゃないかと思う。
InterfaceBuilderが結構使えるからコードで色々設定することは少ないけど
プログラムで動的に変更するなんてことはよくあるので全iOSデベロッパーにオススメできると思う。
全部役に立つから逆に何を書いていいかわからない状態に陥るくらいに役立つ本です。
本当に何を書いていいのかわからないので
とりあえず目次でも見て役立ちそうなところを探してみればいいんじゃないかな？そして買おう！

iPhoneプログラミングUIKit詳解リファレンス - 目次

Chapter00　本書を読む前に

はじめに／UIKitとは／サンプルコードについて

Chapter01　Hello, UIKit !

いちばん簡単なHello, world!／Hello, world! をちょっとだけ改造
Interface Builder を使わないHello, world!／Interface Builderとの本当の決別

Chapter02　UIView 徹底解説

UIViewの基本／コンテンツの管理／UIViewの入れ子構造／UIViewのレイアウト／UIView の状態監視

Chapter03　UIViewControllerと画面遷移

UIViewControllerと画面／画面遷移／タブバーの活用（UITabBarController）
ナビゲーションバーの活用（UINavigationController）／ツールバーの活用
バーボタンアイテム／UIViewController と各要素の関連／UIViewController の状態監視

Chapter04　フルスクリーンと画面の回転

フルスクリーン／画面の回転／画面回転とフルスクリーンの共存

Chapter05　グラフィックス＆アニメーション

文字列の表示／フォントの指定（UIFont）／色の指定（UIColor）／画像の表示／UIView アニメーション

Chapter06　タッチ操作＆モーション

コントロールの操作／レスポンダ（UIResponder）
マルチタップ／ジェスチャーマルチタッチ／モーション／加速度センサー

Chapter07　ユーザへの通知と意思確認

アラート表示（UIAlertView）／アクションシート（UIActionSheet）／ステータスバー

Chapter08　テキストとWeb の表示

テキスト表示（UITextView）／キーボード（UITextInputTraits）／Web コンテンツ表示（UIWebView）

Chapter09　テーブル表示

テーブル表示／テーブルの情報取得／テーブルの編集
セルのカスタマイズ／セルの選択とスクロール／UILocalizedIndexedCollationの利用

Chapter10　UI部品の利用

ラベル（UILabel）／ボタン（UIButton）／テキストフィールド（UITextField）
スイッチ（UISwitch）／セグメンティッドコントロール（UISegmentedController）
スライダー（UISlider）／日付・時刻ピッカー（UIDatePicker）／ピッカー（UIPickerView）
アクティビティインジケータ（UIActivityIndicatorView）／プログレスバー（UIProgressView）
検索バー（UISearchBar）／ページコントロール（UIPageControl）／スクロールビュー（UIScrollView）

Chapter11　アプリケーション＆デバイス情報

アプリケーションの機能／デバイス情報へのアクセス／コピー＆ペーストの利用／画面サイズの取得（UIScreen）

Chapter12　カメラ撮影＆ムービー編集

カメラと写真アルバム（UIImagePickerController）／ビデオ編集（UIVideoEditorController）

[書評]よくわかるiPhoneアプリ開発の教科書【iOS 5＆Xcode 4.2対応版】

よくわかるiPhoneアプリ開発の教科書【iOS 5＆Xcode 4.2対応版】
森巧尚
マイナビ
発売日：2012-02-23

ブクログでレビューを見る»
iPhoneアプリ開発の教科書というだけあって入門書としては最良です。
開発環境の準備から開発ツールの使い方、Objective-Cの基本、
iPhoneのパーツや機能のサンプル、実機でのテストまでが
スクリーンショットや図を交えてわかりやすく解説されています。
現在Xcodeのバージョンが上がっていますが、
ほとんど問題ありませんしサポートサイトで説明があるので安心です。
「よくわかるiPhoneアプリ開発の教科書」サポートサイト http://book.mycom.co.jp/support/pc/iphonesdk_book/

iPhoneアプリ開発したい！でもiPhone持ってない！
iPhoneって何ができるの？開発ツールの使い方がわからん！
これだけわからないとググってアレコレするにも時間が掛かるのでとりあえず買ってみた。

Androidでもそうだったんだけど開発するにあたって何ができるのかどんなパーツがあるのかを
解説してくれてる本を最初に読むのは重要ですね。
画面の作り方や部品の使い方がわかれば見た目を変更できるので
ちょっとしたプログラムを書くだけで大きな変化を出せて開発してる気分になれます。
こういう成功体験を積み重ねることで投げ出さずに開発を続けられますよ。
iPhoneアプリの開発にチャレンジしたい人、一度は挫折したけど開発したい人にはオススメ！

[書評]詳解 Objective-C 2.0 第3版

詳解 Objective-C 2.0 第3版
荻原剛志
ソフトバンククリエイティブ
発売日：2011-12-28

ブクログでレビューを見る»
決して易しい内容ではないが、Objective-Cで書くなら必読だと思う。
Objective-Cは変わっているので他の言語を知っていても意味も分からない事がよくあり、
そんなObjective-Cをネットからコピペしたコードでハマって時間を使うより、
本書を時間をかけてでも読んで理解してコーディングすべきだろう。
Mac OS X Lion、iOS 5以降に導入されたメモリ管理方式のARCに完全対応しているので
既にObjective-Cを理解している人も読む価値はあると思う。

Objective-Cは変わっているので他の言語を知っていても意味も分からない(大事なことなので(ry
宣言プロパティの属性指定や既存のクラスにメソッドを追加できるカテゴリ、
Javaで言うところのインターフェースであるプロトコル、
他の言語ではクロージャとして知られている言語機能に相当するブロックオブジェクト、
コールバック的なことができるデリゲートなど役立つ情報がいっぱいです。
これだけのまとまった情報をネット上で手に入れることは不可能だと思います。
Objective-Cやるなら必読だと思いますよ！

ソフトバンク クリエイティブ:詳解 Objective-C 2.0 第3版
ARCに完全対応!!

Mac OS X Lion、およびiOS 5以降の標準的なメモリ管理方式として
新しく導入されたAutomatic Reference Counting（ARC）に対応して全面改定。
iPhone/iPadプログラマ必携!
アップルプロダクトの標準プログラミング言語Objective-Cを徹底解説。

CHAPTER01 オブジェクトに基づくソフトウェアの作成
CHAPTER02 Objective-Cのプログラム
CHAPTER03 継承とクラス
CHAPTER04 オブジェクトの型と動的結合
CHAPTER05 リファレンスカウンタを用いたメモリ管理方式
CHAPTER06 ガーベジコレクション
CHAPTER07 宣言プロパティ
CHAPTER08 NSObjectクラスとランタイムシステム
CHAPTER09 Foundationフレームワークの重要なクラス
CHAPTER10 カテゴリ
CHAPTER11 抽象クラスとクラスクラスタ
CHAPTER12 プロトコル
CHAPTER13 オブジェクトのコピーと保存
CHAPTER14 ブロックオブジェクト
CHAPTER15 メッセージ送信のパターン
CHAPTER16 アプリケーションの構造
CHAPTER17 例題：簡易画像ビューア
CHAPTER18 例外とエラー
CHAPTER19 並列プログラミング
CHAPTER20 キー値コーディング
APPENDIX01 Foundationフレームワークの概要
APPENDIX02 Core Foundationフレームワークの概要
APPENDIX03 コーディングの指針