PhoneGap チュートリアル

PhoneGap

スマホ全盛のこのご時世、お客さんからiOS/Android に対応したアプリの相談が来る。前から PhoneGap と Titanium が気になってたわけだし PhoneGap からいってみますか。まずは参考になりそうなサイトを調べてみたよ。:-)


PhoneGap の公式サイトはこちら。今だと 2.4.0 が最新らしい。2.0.0 の日本語チュートリアルもある。PhoneGap 開発環境の構築とか参考になる。2.0.0 の説明だと Cordova-2.0.0.pkg をダウンロードしてね！と書いてあるんだけど、2.4.0 だと zip しかダウンロードできないっぽい。基本的な手順を 2.0.0 で理解して、2.4.0 を見ながら作業した方が良さそう。:-)


ちなみに上（↑）で分かるのは HelloWorld の動かし方まで。これだけじゃ先に進めない。もちっとしっかりしたチュートリアルないかなーと探してたら、良さげなサイト見っけ。^^

１つは技術評論社。よくお世話になってます。ここで Storage API、Camera API とか File API の使い方とかマスターできそう。


もう１つは PhoneGap Github。公式レポジトリ？らしく、ここで紹介されているチュートリアルが濃い！一緒に紹介されている PhoneGap 開発のワークフローもね :-)


まだどのチュートリアルもざっくり眺めただけだけど、この辺こなすだけで PhoneGap の基本的なアプリ開発なら行けそうな気がしてきた。がんばろっと :-)

Lightning SD カードリーダーは iPhone 5 に使えない

iPhone

お客さんから Lightning - SDカードカメラリーダー を借りる機会があったので、iPhone 5 に差してみたらダメだった。このアクセサリーは使えない、とはっきり拒否られた。えーーーー (T^T)


Apple の商品サイトにも「iPod の第５世代は使えない」との書き込みがあるし、製品紹介サイトには「iPad Retina ディスプレイモデルやiPad miniに」となっているので、確かに iPhone や iPod で動作するとは一言も書いてない。うーん、なるほど。でも、親切じゃないね、これは。。。

同じタイミングで出した製品だし、旅先とかでSDカードが満杯になったら、iPhone に画像を退避させて空けたくなるやん。うーん、Apple のユーザ体験にしちゃ、配慮が薄いなぁ。:-(

iOS/Android デザインテンプレート

iOS Android

iOS/Android に対応したアプリの見積もり依頼をもらったので、ついでに UI イメージを作ってみることにした。Photoshop が使えると、ネットで公開されている iPhone とかのデザインテンプレートが使えるから便利なんだよね。:-)

良さげなテンプレートをさがしてたら Teehan+Lax さんの紹介ブログを発見。サイトの Download を見てみたら iOS 6 + iPhone 5 向けとか、その時々のバージョンに合わせてデザインを公開してくれてる。すげーーありがたい。:-)


デザインも良いんだけど、レイヤーが部品単位で整理されているので、こーやってデザインを整理しましょ、って意味でも良いお手本。いろいろ参考になりまする。^^

問題は自分が使いこなせるか、、、だね。がんばろ ^^;)

追記

iOS 6 GUI PSD (iPhone 5) のマップは部品化されていないので、地図アプリを作りたいときには、こちら以外のデザインテンプレートが必要そう。スマホ専用ってわけじゃないけど、こちら（↓）を探すと欲しい部品とか見つかりそう。他にもカレンダーやログイン画面でもまとめられてるので、重宝しそうだね。:-)

色被りの補正にはレンズフィルターがあるんだ

Photoshop Photoshop

昨日の日記でトーンカーブを使ってみたけど、そもそもレンズフィルターってのがあって、それで色被りを補正できるんだね。知らなかった。^^;)>

1. カラーサンプラーツールで RGB の高い値を確認する。

2. 色調補正パネルでレンズフィルタを選ぶ。

3. 属性パネルのフィルタで色温度を打ち消す色を選んで、適用量を調整する。


今回の場合、オレンジっぽく色被りしてるから、寒色系（例：フィルタ寒色系（80））をかぶせれば良いっぽい。規定値でイマイチならカスタムで色を指定する方法もある。なるほどね :-)


○ 修正前

○修正後

○トーンカーブで補正（前の日記）


今回の方が自然な色味が出てる。というか前回日記のトーンカーブでの補正の仕方が手荒すぎたね ^^;)

環境

プロファイルの不一致対策

Photoshop

プロファイルの不一致（sRGB と Adobe RGB の混在とか）を予防したいなら、メニュー [編集 > カラー設定] のカラーマネジメントポリシーでプロファイルの不一致にチェックをつけとくと良いらしい。:-)

カラープロファイル

Photoshop Illustrator

カラープロファイルをちゃんと設定しとかないと、他のデバイスやユーザに渡したときにちゃんと色味が再現できなくなるらしい。とりあえず sRGB, Adobe RGB, Apple RGB の3つを覚えておけば良いのかな？整理しとこ。φ(.. )

sRGB

ディスプレイとかプリンタに関係なく同じ色を再現させるための規格ってことね。

IEC(国際電気標準会議)が1998年10月に策定した、色空間の国際標準規格。パソコンの機種の違いや、ディスプレイやプリンタなど機器の違いによらず、意図したとおりの色を再現するための表現形式を定めている。

色空間とは、表示・印刷できる色の範囲やその表現方式のことで、機器の特性によって表現できる色が異なることから、様々な方式がある。sRGBは異なる環境間で色の再現性を確保するために定められた色空間で、CRTディスプレイの色表現をベースに策定された規格。

sRGB - e-words

Adobe RGB

Adobe RGB は印刷、sRGB は CRTディスプレイでの色の表現を想定したもんだってことらしい。

AdobeRGBとは、Adobe Systemsが定義した色空間（カラースペース）のこと。DTPなどの場面において多く用いられている。
sRGBは基本的にCRTディスプレイで色を表現することを想定しているため、表現できる色の範囲には一定の限りがある。AdobeRGBは、sRGBに比べても遥かに広い範囲の再現領域を持ち、きめの細やかな色彩の表現が可能となっている。印刷物に対する適合性や色構成の厳密性も高く、特にDTPの分野などでは長らくAdobeRGBが標準的に用いられている。

AdobeRGB - IT用語辞典

Apple RGB

Mac OSX で使われてる色空間プロファイル。sRGB の亜種だと思ってれば良いのかな？

Apple社が開発・販売を行なっているMacintosh用オペレーティングシステム、Mac OS Xでの基本となる色空間プロファイル。sRGBの色空間よりわずかに広い。

Apple RGB - ピクシブ百科事典


なるほどね。:-)

ウィンドウの表示・非表示

Photoshop

ツール系ウィンドウとかキャンバスを残して全部いきなり非表示になるときがある。ちょいと困った。知らないショートカットを実行してるんだろうけど、いちいちウィンドウメニューから復活させるのはめんどい。 :-(

どうやらウィンドウの一括表示・非表示のショートカットが [tab] キーになってるのに気付かずに押してたみたい。知ってて使う分には確かに便利なキーバインドなんだろね。^^;)>

この辺（↓）参考にして、必要なショートカットはちゃんと覚えとこ ^^