今日もヒトリ勉強会。
スマートフォン制作 入門本を見ながら出来るところまで。
★スマートフォンを制作するには大きく分けて３つの方法がある
1.専用サイトをフルスクラッチで構築する
PCサイトとは別にスマートフォン専用サイトをフルスクラッチ（いちから）構築し、
スマートフォンからのアクセスの場合は自動的に誘導する。
2.PCサイトをCSS/JavaScriptを使って見やすくする
3.携帯電話向けのサイトを流用する
携帯サイトをベースにスマートフォンサイトを構築するケースの場合、
以下のことに気を付ける。
●半角カナ
スマートフォンサイトの場合、可読性などの理由から半角カナは使われない傾向に。
あらかじめ全角カナに変換しておくとよい。
●絵文字
スマートフォンサイトでは、絵文字は表示できないので、削除するか画像などに置き換える必要がある。
●アクセスキー
携帯電話のキーボード操作でサイト内を移動できる「アクセスキー」も利用できないので再検討する必要がある。
★スマートフォンサイトの制作に必要な知識
1.HTML+CSS(HTML5/CSS3を含む)
2.JavaScript
3.スマートフォンの特徴・仕様
★iPhoneの仕様について
画面解像度 iPhone3Gまで 320×480px
iPhone4 640×960px
搭載ブラウザ safari（Mobile Safari）
オープンソースのレンダリングエンジン「WebKit」を採用
※JavaScriptが高速に動作するのが特（ChromeやOperaとも肩を並べる性能）
【例外 :: Opera miniについて】
Opera miniはレンダリングエンジンを内蔵しておらず、オペラのサーバー上でレンダリングした結果を受け取って表示する。
iPhoneとOpera miniでは表示結果に違いが出てしまう。（ボタンや罫線など）
◆中にはOpera miniからのアクセスの場合はPCとみなすiPhoneさいともあるので要注意！
■WebKitとは？
WebKitは「HTMLレンダリングエンジン」と呼ばれるプログラムの一種で、Webブラウザーの内部でHTMLやCSSを解釈し、
画面に描画する役割を担うもの。
■Mobile Safariの制限
●プラグインに非対応（Flash、Windows Media Video、QuickTimeムービーなど）
●文字コードの変更ができない（テキストファイルを表示させる場合はShift JISで保存する）
●ウィンドウの制御ができない
●ファイルのアップロード、ダウンロードができない
●ファイルサイズなどの制限事項（細かな制限についてはアップルの「Safari Web Content Guide」にて確認）
●日本語フォントは1書体のみ搭載（ゴシック体（ヒラギノ角ゴのW3 W6）だけで表示され、明朝体はない。欧文フォントは数多く収録）
★Androidの仕様を確認
画面解像度 320×480px〜640×960pxと幅がある。
搭載ブラウザ その名も「ブラウザ」！
特に固有の名称は付いておらず、実際にChromeに非常に近い性能を持つことから「Chrome Lite」と呼ぶ人もいるそう。
★Androidの特徴
●Flash Playerを搭載
●文字コードの変更に対応
●ファイルのダウンロードに対応
●画像形式やファイルサイズなどの（明確な規定は無いが、ダウンロードサイズの大きなページでは開けないことがある）
●「Droid Font」と呼ばれるOS標準フォントもしくは端末メーカーが独自に用意したフォントが搭載されている。
一部の端末では「CJK統合漢字」と呼ばれる、中国（Chinese）・日本語（Japanese）・韓国語（Korean）で共通して
同じ漢字を利用する仕組みを採用しているため、日本語のページを表示すると若干不自然に見える場合がある！
◆モジラがAndroid版「Firefox」（ベータ版）を開発。
★PC上で確認できるプレビュー環境を用意する
◆Safari/Google Chromeでプレビューする
特にSafariでは、[開発][ユーザーエージェント]メニューから簡単にユーザーエージェントを切り替えられるので、
iPhoneやiPod touchからアクセスしたときのようにスマートフォンサイトとPCサイトとの振り分けも確認できる。
iPhoneに設定をするとこのように切り替えて表示される。
ただし、厳密にはまったく同じというわけではないので、あくまでも簡易的な表示確認にとどめておくのが無難。
★シミュレーターをインストールする
さらに実機に近いイメージで確認したい場合は、iPhoneやAndroidのアプリ開発者向けに配布されている
SDK（Software Development Kit）の中に含まれています。 SDKは本来、アプリ開発者を対象にしたソフトです。
●iOSシミュレータ
iPhoneの場合、Mac OS上で動作するiOSシミュレータが配布されている。（Windows版はありません）
「iOS Dev Center」から無償ダウンロードできます
●Androidエミュレーター
「Android Developers」からAndroid SDKをダウンロード。
○また、Androidエミュレーターは、オープンソースの開発ツール「Eclipse」で動作するので、
Eclipse本体も公式サイトからダウンロード。
（※Eclipse Classicをダウンロード）
○続いて、EclipseのAndroid用のプラグインをインストール。
1.Eclipse - [Help] - [Install New Software...] - [Install] - [Add...]ボタンをクリック！
2.[Add Repository] で、https://dl-ssl.google.com/android/eclipse/と入力しOKボタンを。
3.[Developer Tools]にチェックを入れて[Next]ボタンをクリック。
4.[Review Licenses] - [I accept the terms of license agreements]にチェック - [Finish]
5.途中出てくる[Security Warning]などは[OK]ボタンで続行！
6.インストール完了後、Eclipseを再起動すると、メニューバーにAndroid用のボタンが追加！
7.Eclipseの環境設定を行う。
[Window] - [Preferences] - [Android] - [SDK Location]項目に、コピーしておいた
[Android SDK]のフォルダを指定し、OKボタンで確定！
8.ツールバーに追加されたAndroidマークの[Opens the Android SDK and AVD Manager]ボタンをクリック。
Androidの仮想環境を作成。
8-1.画面左側の[Available Packages]をクリックし、右側のリスト三角アイコンをクリック。
仮想環境パッケージのリストを表示。
8-2.リスト内[SDK Platform Android 2.2, API 8, revision 2]のチェックをつけ[Install selected]
ボタンをクリック。
8-3.確認ウィンドウで[Install]ボタンをクリックすると仮想環境のインストールが開始。
8-4終了したら[Close]ボタンでウィンドウを閉じる。
【なぞ現象】私が上記作業をしようとしたところ、どうにもこうにもリスト内に[SDK Platform Android 2.2, API 8, revision 2]が
出てこなかったので、そのまま下記のステップを試してみたところ、通常通りエミュレーターが起動しました！
それが正しいのか否か深く調べていないのでわかりかねますが、とりあえず少し重いですが動きました。
8-5.次に、ウィンドウ左側の[Virtual Devices]を選択し、右端にある[New]ボタンをクリック。
8-6.[Name]に適当な名前を付け、[Target]から、インストールした[Android 2.2 - API Level 8]を選んで、
[Create AVD]ボタンをクリック。
8-7.作成された[AVD(Android Virtual Device)]を選択し[Start...]をクリック。
8-8.[Launch Options]ダイアログの設定は変えず、[Launch]ボタンをクリック。
8-9.しばらくするとAndroidエミュレーターが起動し、ホーム画面から地球儀アイコンをクリックすると
[ブラウザ]が起動しWebサイトの表示をシミュレーションできます。
＜＜Home画面＞＞
★サイトマップ作成用 オンラインドローイングツール
Cacoo
サイトマップ用のステンシル（テンプレート部品）が揃っており、必要なパーツ同士をコネクタでつなげていくと
簡単にサイトマップが作れる。
★デザインカンプ時にネット配布されているデザインテンプレートを利用する
iPhone 4 GUI PSD(Retina Display)
