1-07 User Interface Design for iPhone Application.m4v

ビデオのメモ

iPhone用アプリケーションを考える前に読む注意書きで、プログラマだけでなくマーケティングも見ると良いと思います。

■ iPhoneの特性
　今までと全く異なる
　マウスとタップは異なる
　テキスト入力を最小限に
　表示するものを厳選（小型スクリーン）
　480 x 320の　有効利用
　マルチタスクでない

iPhoneはシングルタスクで、ユーザが作業中に他のアプリケーションを立ち上げると、その時のアプリケーションは終了し、それまでのデータは失われてしまう。次回に起動したときに同じ状態にしたい場合には、終了時の状態を保存する機構が必要である・・・

・・・と、ここまでは分かったですが、そのためのAPIはどの程度まで提供されているのかは説明されていません。例えば、実メモリの状態をそのままスワップアウトするような機能はあると便利です。

■ ソリューションの提供
　機能ではなく結果を提供
モバイルであるため、何度も短い時間利用されることを意識したデザインが必要である。

■ 必須の機能のみ
Mac OS XのiPhotoとiPhoneのPhotoを比較して解説しています。同様にそれぞれのMailを比較しています。

■ 使いやすさの設計
仕事の流れを考慮します。データ表示は概要から詳細に移るように設計します。面白いことにiPhoneのNSTableViewは縦一列だけです。これは小さな画面で分かりやすく処理させるためで、画面を切り替えて次の一列を表示させることで、複数列の問題を処理しています。

指でタップできる大きさにします。ボタンのサイズは44 pointの四角が最小サイズだそうです。

デザイナが使いたがりそうな、ズームやパンは最小限にするように言っています。見る時間が短時間であるため時間のロスは良くない、と言うことのようです。

情報の入力は最小限にしろと言っています。これはメモ代わりという私の使用目的には合いません。しかし、録音はできたはずなので全く使えないというわけではありません。この意味では文字入力も図を描くことも、録音も写真もできるSony Clieの方が有効です。

■ 一貫性の確保
ボタンなど組込済みのコントロールを利用することで、見た目の一貫性を持たせるように言っています。コントロールは以下のようなものがあります。
　Tool bar
　Navigation bar
　Table view
　Segmented control
　Page indicator
　Picker
　Activity indicator
　Slider
　Button
　Switch
＞と丸で囲まれた＞の意味は異なるそうです。
　＞のみは・・・
　　さらにデータがさらにあり、
　　欄全体がボタンになっていて、
　　押すと次のページに移ります。
　丸で囲まれた＞は・・・
　　＞のみがボタンになっていて、
　　押すと詳細が表形式で表示されます。
　　色遣いにも注意が必要です。

■ 驚きと喜びを
まあ、これはiPhoneをみれば、わかるでしょう（笑）

Macintosh、Mac OS Xと同様に、iPhoneにもiPhone Human Interface Guidelinesがあるそうです。

1-06 Using iPhone Features in Your Application.m4v

ビデオのメモ

iPhoneのアプリケーションはアドレス帳や写真からデータにアクセスできます。また、Webの内容をアプリケーション内に埋め込むこともできます。
アドレス帳のアクセス方法
既存のデータ利用
　ABPeoplePickerNavigationController
　ABPersonViewController
データ生成
　ABNewPersonViewController
未処理データの扱い
　ABUnknownPersonViewController
データの読み書き
　ABAddressBookCopyPeopleWithName
　ABPersonCopyImageData
　ABPersonCreate
　ABRecordSetValue
注意事項
　CFRetaiとCFReleaseを使用すること
　CopyとCreateを使用したときは必ず解放すること
　Getは自身でメモリを確保していないらしく、解放する必要がないらしい

写真のアクセス方法
iPhoneやiPod touchの写真ライブラリから写真を表示する方法

// 写真ライブラリが空でないことを確認
if ([UIImagePickerController isSourceTypeAvailable:
　UIImagePickerControllerSourceTypePhotoLibrary]) {

　UIImagePickerController *picker;
　picker = [[UIImagePickerController alloc] init];
　picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;

　picker.allowsImageEditing = YES;

　picker.delegate = self;

　[currentViewController presentModalViewController:picker animated:YES];
}

カメラは上記のソースを少し変更するだけで利用できます。
// 写真ライブラリが空でないことを確認
if ([UIImagePickerController isSourceTypeAvailable:
　UIImagePickerControllerSourceTypeCamera]) { // Cameraになっています

　UIImagePickerController *picker;
　picker = [[UIImagePickerController alloc] init];
　picker.sourceType = UIImagePickerControllerSourceTypeCamera; // Cameraになっています

　picker.allowsImageEditing = YES;

　picker.delegate = self;

　[currentViewController presentModalViewController:picker animated:YES];
}

写真の編集
元になる関数は以下の通りです。
- (void) imagePickerController:(UIImagePickerController *) picker
　　　　　didFinishPickingImage:(UIImage *) imagePickerController
　　　　　　　　　　　editingInfo:(NSDictionary *) editingInfo {
// 必要に応じてイメージを処理
　[self saveImage;image];
}

例です。

- (void) imagePickerController:(UIImagePickerController *) picker
　　　　　didFinishPickingImage:(UIImage *) image
　　　　　　　　　　　editingInfo:(NSDictionary *)editingInfo{

// 元のイメージを入手
　UIImage *origialImage = [editingInfo
　　　　　　　　　　　valueForKey:UIImagePickerControllerOriginalImage];

// メタデータとして保存
　[self saveTagZone:[editingInfo
　　　　valueForKey:UIImagePickerControllerCropRect]];
}

Webの内容を入手

// Web viewを生成
　CGRect rect = [[UIScreen mainScreen] appicationFrame];
　UIWebView *webView = [[UIWebView alloc] initWithFrame:rect];

// 電話番号の検出機能を切る
　webView.detectsPhoneNumbers = NO;

// Web viewにURLをロード
　NSURL url = [NSURL URLWithString:@"http://foo.com"];
　NSURLRequest *req = [NSURLRequest requestWithURL:url];
　[webView loadRequest:req];

以下の方法でURLを開く感覚で他のアプリケーションを開くこともできると言っています。

　NSURL *url = [NSURL URLWithString:@"http://apple.com"];
　[[UIApplication sharedApplication] openURL:url];

URLに応じて以下のアプリケーションを開くことができると言っています。
　Safari：http://, https://, feed://
　Mail；mailto:
　Google Map：http://maps.google.com/
　You Tube：http://www.youtube.com/
　iTunes：itms://
独自アプリケーション：myapp://

独自アプリケーションをURLで起動できるようにするにはinfo.plistに以下の項目を追加します。
CFBundleURLType 　　　 　Array
　0 　　　　　　　　　　　Dictionary
　　CFBundleURLName 　　String My Custom URL
　　CFBundleURLSchemes 　Array
　　　0 　　　　　　　　　　String myapp
　　LSIsAppleDeaultForScheme Boolean Yes

- (BOOL)application:(UIApplication *) application
　handleOpenURL:(NSURL *) uel {
// 送られてきた問い合わせの文字列を入手
　NSString *queryString = [url query];

// 送られてきた文字列から情報を取得...

//キーと値を処理 ...
}

他のiPhoneとの通信
Bonjourを使用して通信できるとしていますが、消費電力が増大し電池使用時間が短くなる、とも言っています。

1-05 iPhone Graphics and Media Overview.m4v

ビデオのメモ

グラフィック関連ではUIKit Graphics、Quartz 2D、Core Animation、OpenGL ES、Media Player、Core Audioの6つを利用できます。

UIKitのGraphicsは画面切り替えなどのアニメーションも含む2Dのユーザインタフェースを作り、Quartz 2Dは低レベルの2D描画、Core Animationはアプリケーションなどのアニメーション、OpenGL ESはゲーム用、Media Playerは動画再生、Core AudoとOpen ALは音声と役割を担っています。

UIKit Graphicsの主なClassは以下の通りです。
UIImage - イメージデータのクラス
UIImageView - インタフェースにイメージをいれたり、スライドショーのイメージを入れる
UIColor - 装置の色関連
UIFont、UILabel - 文字処理関連
UIScreen - スクリーン関連
他にユーティリティ関数がある。

低レベルのグラフィック処理を担当するQuartz 2Dでは、点や線、曲線、四角などはCGPathRefで扱い、四角の塗りつぶしはCGGradientRef、CGImageRefはPNGを中心にしてTIFF、JPEG、GIF、BMP、ICO、CUR、XBMを扱い、CGPDFDocumentRefはPDFを扱っています。

Core Graphicsで緑の枠に青い四角を描く描画サンプルです。
- (void) drawRect:(CGRect)rect
{
　CGContextRef myContext = UICurrentContext();

　CGRect ourRect = CGRectMake(40, 40, 240, 120);

　CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
　CGContextFillRect(context, ourRect);

　CGContextSetRGBStrokeColor(context, 0.0, 1.0, 0.0, 1.0);
　CGContextStrokeRectWithWidth(context, ourRect, 10);
}

Core Animationはユーザインタフェースのアニメーションを提供しています。レイヤをサポートしており、一つのレイヤに写真を置き、その上に文字のレイヤを置き、さらに絵のレイヤを置くことができます。また、レイヤを半透明にしたり、フェイドインアウトでレイヤを入れ替えることもできます。

Core AnimationのレイヤではCALayerが主のクラスとなり、CAEAGLLayre、CATiledLayer、CAScrollLayerがあります。また、アニメーションのクラスではCAAnimationが主のクラスとなり、CAPropertyAnimation、CABasicAnimation、CAKeyframeAnimationがあります。CAAnimationの下にはCAPropertyAnimationの他に、CATransitionとCAAnimationGroupがあります。

OpenGL ESはOpenGLの機能制限版でiPhoneで採用しているのはバージョン1.1です。詳細は以下のURLを参照してください。

http://www.khronos.org/opengles/

Media Player Frameworkの動画はフルスクリーンのみで、.mov、.mp4、.m4v、.3gpの再生ができます。

動画の生成と制御
- (id) initWithContentURL:(NSURL *)url;
- (void) play;
- (void) stop;

プロパティ
@property MPMovieScalingMode scalingMode;
@property BOOL userCanShowTransportControls;

ノティフィケイション
NSString * const MPMoviePlayerScalingModeDidChangeNotification;
NSString * const MPMoviePlayerPlaybackDidFinishNotification;

MPMoviePlayerCotrollerの例

- (void) playMovieAtURL: (NSURL *)theURL
{
　MPMoviePlayerCotroller *theMovie = [[MPMoviePlayerCotroller alloc] initWithContentURL:theURL];
　theMovie.userCanShowTransportControls = NO; default

　[[NSNotificationCenter defaultCenter] addObserver:self
　　　　　　　　　　selector:@selsector(myMovieFinishedCallbask:)
　　　　　　　　　　　　name:MPMoviePlayerPlaybackDidFinishNotification
　　　　　　　　　　　object:theMovie];
　[theMovie.play];
}

- (void) myMovieFinishedCallbask:(NSNotification*) aNotificaition
{
// remove the observer, release the MPMoviePlayerController
}

1-04 iPhone Application Frameworks - In Depth.m4v

ビデオのメモ

1-01と似たアーキテクチャのレイヤを解説しています。その後にMac OS XのCocoaとiPhoneのCocoa Touchを比較していて、Foundationは同じとして、AppKitとUIKitの違いに重点をおいています。UIViewの下にUIWindowとUIControlが配置されています。UIWindow、UIView、UIViewControllerの説明が続きます。UIViewControllerはviewを呼び出すだけでなく、メモリ不足の警告も出すようです。UIViewControllerの一つとしてUINavigationControllerをアドレス帳を例にソースコードと画面の動きを見せながら解説しています。各画面をスタックにプッシュしながらデータの詳細に移動し、再度データの概要　を見るときにはスタックからポップしています。

次にStatus Barの下にUIWindowでウィンドウを生成し、図 UIImageViewやデータ UITableView、ツールバー UITullbarControllerなどの部品を配置する方法を解説しています。

画面の構成の後は、EventとGesturesの処理が続きます。GesturesのUITouchSwipedRightは興味深いです。

「UIKitのControlとView」ではUIPickerというユーザインタフェースが紹介されています。UITableViewは一つの列だけを扱い、他の列を表すときには右にスライドするアニメーションを利用します。

1-03 iPhone Application Development - Getting Started.m4v

ビデオのメモ

このビデオ シリーズではiPhoneのFrameworkをCocoa Touchと読んでいますが、どうもこのCocoa Touchは「ここ タッチ」に聞こえます（笑）

最初の部分は今までのビデオの解説と重複していて、次にObjective-C、View Controller Modelの解説が続きます。

Cocoa Touch命名省略ルールは以下の通りです。
iPhoneの"UIImageView"を例にすると
"UI" - UIKit frameworkの一部
"Image" - UIImageと共に機能
"View" - UIViewのサブクラス

UIImageViewはpropertieとaccessorメソッドを採用
Getter: animationImages
Setter: setAnimationImages

Delegation、Categories、Subclassの解説が続き、ようやくCocoa TouchのUIKitの解説が始まります。iPhoneのUIKitはMac OS XのAppKitにあたるそうです。UIKitには色々なframework（ツール）が含まれていて、ビデオではそのツール次々と列挙されます。

1-02 iPhone Development Tools Overview.m4v

ビデオのメモ

Xcodeの解説です。1-01のプロジェクト作成がデモンストレーションされます。iPhone関連のプロジェクトはCocoa Touchの名前で呼ばれているようです。

Organizerでプロジェクト管理やiPhoneへのダウンロードなどを行う。コンソールやクラッシュログ、スクリーンショットなども提供されている。

次はXcodeがもつコーディング部分の解説です。コード管理ツールShapshotsやSCMの解説もしています。最新版ではさらに便利なっているようです。また、APIの解説が表示されるResearch Assistantも紹介されています。

Interface Builderは"COMING SOON"になっています（笑）

ビルドのデバッグでは、デバッグ情報が吹き出しがポップアップします。iPhoneシミュレータとデバッガを同期させてデバッグできます。ポップアップメニューでシミュレータとiPhoneを切り替えて検証できます。

パフォーマンス解析ツールとしてInstrumentsが提供されていて、Xcodeと連携して動作します。メモリやプロセッサの占有度をグラフィカルに表示します。Runメニューの"Start with Performance ToolからActivity MonitorやCPU Sampler、File Activity、Leaksなどを選択できます。

1-01 Introduction to the iPhone SDK.m4v

今日からメモを取りながら解説の動画見ることにしました。

まずは、iPhone SDKに入っているツールの紹介です。

Xcode 言わずとしれたMac OS XのIDE
Instruments リアルタイムでメモリやプロセッサのモニタ
Dashcode Webのユーザインタフェース構築ツール
Simulator iPhoneのシミュレータ

XcodeでCoco Touch Listテンプレートを使ったデモンストレーションをしています。ただし、ここで表示されているリストの内容はβ6では消えていました。New Projectの画面デザインも変わっています。

次にアーキテクチャの解説でCore OS、Core Services、Media、Cocoa Touchの各レイヤが解説されます。

Core OSではLibSystem library、
Core ServicesではCore foundation frameworkとCFNetwork framework、Security framework、SQLite library、XML libraries、
Mediaではグラフィック技術としてQuartz、Core Animation、OpenGL ESがあり、音声技術ではCore AudioとAudio ToolBox frameworks、OpenALがる。さらに動画技術ではMediaPlayer frameworkがある。
Cocoa TouchではUIKit frameworkがある。UIKitはアプリケーション間通信、グラフィックスとウィンド サービス、タッチなどのイベント処理、ボタンなのパーツ、Webとテキスト処理、加速検出のデータ処理、カメラ処理、写真ライブラリ処理、装置のID提供しています。さらに、Addressbook frameworkとAddressbook UI framework、場所情報を入手するCore Location frameworkも提供しています。