■じっくり学ぶiPhone制作
たにぐちまこと
■Session1 設計•デザイン
•iPhoneとは。
→表示はPC、通信は携帯。
※PCだと思い設計すると、すごく重くて困ることになる。
→クリック（タップ）は指
•会場アンケート
左手でiPhoneを持ち、右手で操作する人。 ７割
左手で持って、左手の親指で操作する人。 ３割
両手で持って、両手で操作する人。
※問題は、親指で操作する人。
→左上まで届かない。
→親指の腹が右下にあたり操作しにく。
→キーボードは非常に使いにくい。
フリック入力もまだまだ使いにくい。
•iPhone Safari(Mobile Safari)
→プラグインすべてに未対応（FLASHだけが悪いわけではない）
WMV SilverLight Javaアプレットなど。
→文字コードの変更ができない。
通常のブラウザのようには変更できない（たまに文字化けするサイト）
テキストファイルにリンクを直接貼る場合は、必ずShift-JISで保存する、
UTF-8だと文字化けする。
→ウィンドウの制御ができない。
iPhoneでは小窓の制御ができない。エラーメッセージも出さず、
スルーする。（サファリの設定でポップアップブロックがデフォルトでオンになっているため。）
iPhoneでは小さな窓という概念がない。基本全画面。
→ファイルをアップロード、ダウンロードができない。
•ファイルのアップロードボタンだけ表示されるが機能しない。
（アプリ上では可能）
•ダウンロード
ZIP
ほぼすべての拡張子はダウンロードできない。
実機ではそのiPhoneで対応するアプリで開こうとするが、開けない。
PDFもシミュレーターであれば、ダウンロードできるが表示しない。
実機の場合は
•フォントは１種類
デフォルトはヒラギノ角ゴシック
→Macだとヒラギノ明朝がインストールされているが、
ヒラギノ明朝はインストールされていない。
（iPadにはインストールされている。）
■ブラウザの種類
•ヴァニラサーフ
※サードパーティのレンダリングのエンジンはSafariと同じなので、
SafariがOKなら大丈夫。
※ただし、Opera Miniだけはレンダリングエンジンが違う！！
•Opera Miniは例外
※SafariとOperaがあまりにも違うため、
両方に最適化するのはほぼ不可能、
そのため、MIxiやYahooでは、OperaはPCサイトに飛ばしている。
■制作環境
•実機（iPhone 3GS、iPhone4）
※通信料が気になる場合は、iPod TouchでもOK
•PC
※Macだと、効率があがるので、なるべく準備する。
•サーバー
•iPhoneシミュレーター
現在はMacのみ
•エディター
※HTML5とCSS3を多様するので、最新のエディターを使う
■iPadは？
•タップであることは、iPhoneと同じ、
•片手で使うのは無理。
•画面が大きすぎる
※そのため、iPadはPCサイトと割り切る。
■Androidは？
•画面サイズはバラバラ
•カーソルもあったりなかったり
•キーボードがあったりなかったり
•縦にならない端末や、横にならない端末もある。
•バージョンによって仕様もバラバラ
※特にAndoroid 1.6
※もうAndroidはカオス状態、海外端末を入れるともっとカオス。
■入り口設計
•URLの直打ち
→PCはURLを広告などで•••
ただ、iPhoneでは絶望的。
•QRコード
→一応、iPhoneもQRコードを読めるが、専用ソフトが必要。
•検索
→そのため、検索されることがiPhoneサイトには重要。
•検索•SEO対策
→携帯のSEOは公式サイトの登録してもらうのがキモ
→iPhoneで検索した場合、iPhoneサイトはPCサイトと混じって検索される。
PCサイトとiPhoneサイトで検索した場合は、じゃっかんだけ表示が違う。
→PCサイトとiPhoneサイトを両方持っており、エージェント切り替えを使う場合は、振り分けた方のiPhoneサイトはどうやらクロールしていないみたい。
例 Yahoo
■ゴール設計
※フォーム入力に難があるので、ゴールがフォームだとまずい。
→指だとチェックボックスを操作しにくい。
→ラベル要素に対応していないため、テキストをクリックできない。
→入力要素が多すぎる
悪い例 HIS
↓じゃあ代わりは？
•電話
良い例 TOWN NOTE
→電話番号がタップでき、電話を掛けられる。
•地図
→Google Mapを起動でき、ナビゲーションできる。
※詳細な地図などを準備する必要がない。
•URLの共有
→入力はPCにしてもらうため、メールを送付できるように機能をつける。
→口コミ効果
•Twitterなど。
•ブックマーク•ホーム画面に追加。
→「ホーム画面に追加」の吹き出しを実装する。
（なんども訪れてもらう。）
■設計時のポイント
•階層は浅く、1ページは長く。
→携帯に近い。
→携帯はいつも通信できるとはできず、
階層を深くしているとリンク先が移動できず、離脱してしまう可能性がある。駅についたときにいっきに読み込むような作りにする。
•画面サイズ
→有効表示範囲に制限があるので、要注意
→縦表示で使うユーザーが大多数。
※iPhoneのホーム画面には横画面がないため、必ず縦を経由する。
見づらかったり、寝転んだときに横画面にする。
↓
横にした際に、どういう設計にするかは考えないといけない。
例：iza ニュースサイトはボタンを横の開いたスペースに移動している。
→縦表示も工夫が必要。
なるべく表示画面を大きくするため、JavaScriptなどを使い、
折りたたみ等を実装する。
→フォントサイズ
13pxだと見にくい、15px～16px
→ボタンサイズ
ホームボタンと同じぐらいのサイズである、40pxぐらいが理想。
→設計ツール
•カクー http://cacoo.com/
※PowerPointと似たような操作感
※iPhone用のステンシルが準備されている。
•LiveView
※をPCとiPhoneにインストールすると、両方を同期してくれる。
■Session 2 デザイン•コーディング
•デザイン時のポイント
→縦と横を変えたときのデザインも意識する。
※写真やバナーが切れたり•••
•画像は少なく
→携帯と同じように。表現はCSS3で。
•文字は（基本）画像にしない
•コントラストを意識。
良い例 Naverの黒字に白文字
•ロールオーバーは使えない
→ロールオーバーもiPhoneにはないので、
リンクは最初から下線をつけているデザインにする。
•PNGを利用しよう
→圧縮率がいい。（iPhoneではそこまでシビヤに。）
→フルカラーが使える。
→アルファチャンネルがつかえる。
→JPEGよりは若干大きい
（写真や絵のような画像）
•ロゴ、イラストはPNG
•写真、絵画はJPEG
•アニメーションはGIF（くるくるアイコンなど）
※PhotoShop CS5はズームツールが使いにくくなっているので、
「スクラブツール」のチェックを外す。
※コーディングの際は、「デザイン」モードで作業すると楽。
※Photoshopはレイヤーを選択しないと、要素を選択できない。
（矢印ツールのオプション「自動選択」と「バウンディングボックス」にチェックを入れる）
※iPhoneでデザインする場合、ステンシルが欲しいよね、
→PSDを配布している人がいる。（書籍参照）
※iPhoneでは「ガワ」を入れるか、入れないかでデザインがかなりかわるので、ガワを入れよう。
•HTML5を積極的に利用する。
→使うメリットがある、というか使わない理由がない。
※HTML5のDoctypeは <!DOCTYPE HTML> だけで、
既存ページのDoctypeを変更するだけでOK。
•CSS3
•セレクタが大幅に追加。（first-child、last-childなど）
•角丸
•グラデーション
•複数背景の指定
•ドロップシャドウ、エンボス
※角丸
border-radiusのみだと、iOS4
-webkit-border-radiutだと iOS3
•DreamweaverはHTML5拡張機能がある。
※Dreが作るHTML5フォーマットはちょっと惜しい。
※デザインビューで「ライブビュー」にチェックを入れると、HTML5も表示する。
■iPhone等特有の要素
•Viewport
→iPhoneは320pxの幅で、900px以上の画面サイズを表示できる。
（PCサイトを見るときはいいが、iPhoneサイトではじゃまになる）
↓
ViePortを設定する。
※maximum scaleでサイズを固定できるが、
アクセシビリティを考えた上で、決める。
•format-detection
→iPhoneは電話番号を見ると、勝手にリンクを貼る、
ただ、精度が低く、じゃまなので、基本は「なし」にする。
•apple–touch-icon
→何もしないと、ホーム画面にブックマークしたときに、そのサイトのキャプチャーになってしまう••• apple-touch-iconを設定すると、アイコンを使うことができる（画像は準備する）
•特殊リンク
→tel:リンク
→mailto:リンク
→Googleマップ
※地図を選択し、右上の「リンク」ボタンのURLを利用する。
（Google Labsで、短縮URLをオンにすると短くなる）
→Youtubu
※「共有」ボタンからリンクを準備。
→AppStore
※ちょっと面倒。
「LinkMaker」を利用する。
※iPhone3とiPhone4で使用する画像の切り替えは？
たしかにiPhone4に高解像度の画像を準備することも検討の余地があるが、
結構めんどうくさいらしいので、写真サイトみたいな場合は作ってもいいかも。
■Section 3 プログラミング
•振り分け処理
→Javascriptでユーザーエージェントを見る
※iPadの初期バージョンで何もバージョンしてない場合は、ユーザーエージェントにiPhoneという文字があるため、要注意
→メディアクエリー
※CSSだけで、PCサイトをiPhoneに最適できる。
例：進研ゼミ 高校講座の会員専用サイト
※製作中のため、要注意
※ナビゲーションをJavascriptでタブ切り替えにしているため、
かなり大変。
※メディアクエリーだけで、PCサイトを最適化できるかというと、かなり難しい。
実際はJavaScriptでCSSを切り替えている。
•スライドパネル
•タブパネル
•パルーンポップアップ
普通にHTMLで書いて、JavaScriptで実装。
•フォームの改良
→テキストエリアではみ出た場合、画面外に消えてしまう、
その場合、「むしめがね」状態にしてスクロールする。
→インラインフレームでも同じ、２本指でスクロールすると見ることができる。
↓
jqueryなどで対処
→テキストエリアに文字を入れる場合は、プレースフォルダー属性を使う。
→input typeをnumberにすると、キーボードを数字にしてくれる。
→autocapitalise
→オフにすると、文字の最初を大文字にする機能を消せる。
→autocorrect
→サジェスト機能だけど、メールアドレス入力等の邪魔になることが多いのでオフにする。
•CSS Transitions
→JavaScriptだと端末によっては、処理が間に合わない場合があるため。
CSS3だど、軽い。
メリット：軽い
デメリット：やることに限度がある。
書き方が複雑で面倒
→ただし、ブラウザ依存が激しい。
※Operaはもちろん、AndroidだとFIrefoxが主流になっていくため、
ちょっと厳しい。
■iPhone用JSライブラリ
→iui
→jQTouch ※Sencha Touchの開発に参加しているので、今後はどうなのかな？
→Sencha Touch
→jQuery Mobile（４月ごろリリース）
※ノンプラグミングで操作を実装。
（ただし、デザイン変更が必要）
■まとめ
→よいサイトをたくさん見ましょう
•ミートアイ http://web.meet-i.com/
→HTML5 + CSS3を勉強しましょう。
→jQueryをおぼえましょう
（逆引きマニュアル）
→iPhoneを好きになりましょう。
■書籍のサポートサイト
H2Oカレッジ
コメント