登録者:cnomiya

2009-07-28_muto-y_iphone_3-3.pdf

2009-08-12 22:36:05
アクセス数:941
タグ: open-im iPhone 2009-07-28 2009-08-05
0

■説明

第5回 第6回【Open INTRA-MART 勉強会】(3/3)

1/3 → http://handsout.jp/slide/1606
2/3 → http://handsout.jp/slide/1607
3/3 → http://handsout.jp/slide/1608

武藤先生、超多忙にも関わらず、開催してくれてありがとうございますっ!
感謝感謝です。そして、そのやる気と実行力、素敵です。

ソースコード等 → http://oss.intra-mart.org/study_meeting/2009-07-28/2009-07-28_muto-y_iphone_src.tar.gz
※iPhoneSDK 3.0な方は、一度プロジェクトをクリーニングしてください。

以下、アジェンダ。

武藤先生のiPhoneアプリ作成ワークショップ
* 「価格.comの商品検索アプリ」を作ってみよう
* まずは、!HelloWorldから。
* 実装ファイルからUIを操作する
* UIから実装ファイルのメソッドを呼び出す
* デリゲートを使ってみる
* いよいよ「価格.comの商品検索アプリ」を作成する!
* 大まかな設計を考える - 必要なクラス・画面
* 価格.comのAPIをHTTPで呼び出すクラス
* 返値であるXMLのパーサ
* 検索結果を保持するモデルクラス
* リスト表示画面
* 詳細表示画面
* では、作ってみましょう!

http://oss.intra-mart.org/projects/im-jssp/discussion/3/31

リンク

このスライドの現在表示中のページへのリンク
ブログパーツ
google ガジェット

関連するスライド

お気に入り登録したユーザ


GoodJobしたユーザ


タグクラウド

■スライド内のテキスト

スライド1: 武藤先生のiPhoneアプリ作成ワークショップ2009年8月12日水曜日

スライド2: 自己紹介2009年8月12日水曜日

スライド3: 自己紹介名前2009年8月12日水曜日武藤 靖之 (むとう やすゆき)

スライド4: 自己紹介名前所属2009年8月12日水曜日武藤 靖之 (むとう やすゆき)データリンクス株式会社

スライド5: 自己紹介名前所属2009年8月12日水曜日武藤 靖之 (むとう やすゆき)データリンクス株式会社マカー歴2007年4月~現在

スライド6: 自己紹介名前所属2009年8月12日水曜日武藤 靖之 (むとう やすゆき)データリンクス株式会社マカー歴2007年4月~現在iPhoneアプリ開発歴2008年11月~現在 で8ヶ月ぐらいです

スライド7: 今日作るモノ2009年8月12日水曜日価格.comの商品検索アプリ

スライド8: 価格.comアプリを作る2009年8月12日水曜日

スライド9: クラス図2009年8月12日水曜日

スライド10: 一から作るクラス2009年8月12日水曜日

スライド11: 自動生成されたものを修正するクラス2009年8月12日水曜日

スライド12: プロトコル(interface)2009年8月12日水曜日

スライド13: 既存のクラス2009年8月12日水曜日

スライド14: 主な役割RootViewController Kakaku•View描画時•Kakakuの初期化•seach呼び出し•UITableViewのデリゲートメソッド実装2009年8月12日水曜日•価格.comAPIの呼び出し•返値(XML)のパース•Itemの生成•Itemのリスト保持Item•検索結果の値を保持するモデルDetailViewController•詳細画面の表示

スライド15: 新しいプロジェクトを作る2009年8月12日水曜日

スライド16: テンプレートを選ぶ2009年8月12日水曜日Navigation-based Applicationを選択します。

スライド17: 名前と保存場所を決める2009年8月12日水曜日今回はデスクトップにKakakuSearchという名前でプロジェクトを作ります。

スライド18: ファイルをコピーします2009年8月12日水曜日RootViewController.h, .mKakaku.h, .mItem.h, .mDetailViewController.h, .m, xib

スライド19: モデル2009年8月12日水曜日@interface Item : NSObject {NSString *productName;NSString *marketName;NSString *comment;NSNumber *lowestPrice;}@property(nonatomic,retain)NSString *productName;@property(nonatomic,retain)NSString *marketName;@property(nonatomic,retain)NSString *comment;@property(nonatomic,retain)NSNumber *lowestPrice;

スライド20: モデル2009年8月12日水曜日@implementation Item@synthesize productName;@synthesize marketName;@synthesize comment;@synthesize lowestPrice;@end

スライド21: コントローラー2009年8月12日水曜日Kakaku価格.comAPIの呼び出し返値(XML)のパースItemの生成Itemのリスト保持NSMutableArray *itemList

スライド22: HTTPの通信を行う2009年8月12日水曜日NSURLConnection同期通信sendSynchronousRequest:returningResponse:error:非同期通信connectionWithRequest:delegate:initWithRequest:delegate:initWithRequest:delegate:startImmediately:start

スライド23: HTTPの通信を行う2009年8月12日水曜日NSURLConnection同期通信今日は非同期通信を使いますsendSynchronousRequest:returningResponse:error:非同期通信connectionWithRequest:delegate:initWithRequest:delegate:initWithRequest:delegate:startImmediately:start

スライド24: リクエストの送信//価格.comのAPIを呼び出します。指定するパラメータは、検索キーワードです。-(id)search:(NSString *)keyword{}[itemList removeAllObjects];//詳細は http://apiblog.kakaku.com/KakakuItemSearchV1.0.htmlNSString* a_url = [NSString stringWithFormat:@"http://api.kakaku.com/WebAPI/ItemSearch/Ver1.0/ItemSearch.aspx?"];"Keyword=%@""&resultset=medium""&categorygroup=ALL""&HitNum=20""&pagenum=1""&ApiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxx",[keywordstringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]NSURLRequest* a_request = [NSURLRequest requestWithURL:[NSURL URLWithString:a_url]];[NSURLConnection connectionWithRequest:a_request delegate:self];return self;2009年8月12日水曜日

スライド25: レスポンスの受信/// サーバからレスポンスが送られてきたときのデリゲート- (void)connection:(NSURLConnection *)i_connection didReceiveResponse:(NSURLResponse*)i_response{}// データ蓄積用に NSMutableData を初期化m_data = [[NSMutableData alloc] init];/// サーバからデータが送られてきたときのデリゲート- (void)connection:(NSURLConnection *)i_connection didReceiveData:(NSData *)i_data{}[m_data appendData:i_data];/// データのロードか完了した時のデリゲート- (void)connectionDidFinishLoading:(NSURLConnection *)i_connection{}NSXMLParser *parser = [[NSXMLParser alloc] initWithData:m_data];[parser setDelegate:self];[parser parse];2009年8月12日水曜日

スライド26: XMLパーサ1//SAX Parser-(void) parser:(NSXMLParser *)parserdidStartElement:(NSString *)elementName{}namespaceURI:(NSString *) namespaceURIqualifiedName:(NSString *)qNameattributes:(NSDictionary *)attributeDictif ([elementName isEqual:@"Item"]) {item = [[Item alloc] init];return;} else if ([elementName isEqual:@"Error"]) {//エラーハンドリングをします。今回は実装しません。return;}else {}if (value) {[value release];}2009年8月12日水曜日value = nil;value = [[NSMutableString alloc] initWithCapacity:100];

スライド27: XMLパーサ2-(void) parser:(NSXMLParser *)parserdidEndElement:(NSString *)elementNamenamespaceURI:(NSString *)namespaceURIqualifiedName:(NSString *)qName{if ([elementName isEqualToString:@"Item"]) {[itemList addObject:item];}[item release];return;if ([elementName isEqualToString:@"ProductID"]) {item.productID = value;} else if([elementName isEqualToString:@"ProductName"]) {item.productName = value;//省略}} else if ([elementName isEqualToString:@"LowestPrice"]) {item.lowestPrice = [NSNumber numberWithInt:[value intValue]];}[value release];value = nil;2009年8月12日水曜日

スライド28: XMLパーサ3-(void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string{}if (value) {}[value appendString:string];- (void)parserDidEndDocument:parser {//UITableViewを再描画するように依頼します。}[tableView reloadData];return;2009年8月12日水曜日

スライド29: リスト表示画面2009年8月12日水曜日UITableViewiPhoneといえばこのUI!

スライド30: UITableViewのデータソースとデリゲート2009年8月12日水曜日UITableViewDelegate画面表示を司るUITableViewDataSource表示するためのデータを扱う一つのクラスでどちらも実装することが多いようです

スライド31: UITableViewの動き方1. UITableViewを初期化します2. reloadDataの呼び出し3. UITableViewDataSourceはセクションの数を返します4. UITableViewDataSourceはセクション内の行数を返します5. UITableViewDelegateは、UITableViewCellを返します6. UITableViewは画面を描画します2009年8月12日水曜日

スライド32: セクションの数を返す- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1;}2009年8月12日水曜日

スライド33: セクション内の行数を返す2009年8月12日水曜日- (NSInteger)tableView:(UITableView *)tableViewnumberOfRowsInSection:(NSInteger)section{return [kakaku.itemList count];}

スライド34: UITableViewCellを返す- (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath{static NSString *CellIdentifier = @"Cell";}2009年8月12日水曜日UITableViewCell *cell =[tableView dequeueReusableCellWithIdentifier:CellIdentifier];if (cell == nil) {cell =[[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier] autorelease];}Item *item = [kakaku.itemList objectAtIndex:indexPath.row];cell.textLabel.text = item.productName;return cell;

スライド35: 動かしてみる...の前に2009年8月12日水曜日まずはファイルの保存

スライド36: 動かしてみる2009年8月12日水曜日XCodeの「ビルドと実行」を実行します

スライド37: こうなります2009年8月12日水曜日

スライド38: 次のステップ詳細画面を開く2009年8月12日水曜日

スライド39: NavigationController2009年8月12日水曜日にゅ~っていう画面遷移をコントロールします

スライド40: NavigationControllerのメソッド2009年8月12日水曜日– pushViewController:animated:– popViewControllerAnimated:– popToRootViewControllerAnimated:– popToViewController:animated:

スライド41: NavigationControllerのメソッド2009年8月12日水曜日基本的にこのメソッド以外使用しません– pushViewController:animated:– popViewControllerAnimated:– popToRootViewControllerAnimated:– popToViewController:animated:

スライド42: 使い方UITableViewの行を選択されたときに、次画面をパラメータとして呼び出します- (void) tableView:(UITableView *)tableViewdidSelectRowAtIndexPath:(NSIndexPath *)indexPath{//詳細画面のインスタンスが無ければ生成します}if (vc == nil) {vc = [[DetailViewController alloc]initWithNibName:@"DetailViewController" bundle:nil];}vc.item = [kakaku.itemList objectAtIndex:indexPath.row];//NavigationControllerに詳細画面のコントローラをPushします[self.navigationController pushViewController:vc animated:YES];2009年8月12日水曜日

スライド43: DetailViewController.xib2009年8月12日水曜日新規ファイルを作成し、View XIB を作成します。

スライド44: DetailViewController.xibを開く2009年8月12日水曜日

スライド45: UITableViewを貼り付ける2009年8月12日水曜日

スライド46: こんな感じになります2009年8月12日水曜日

スライド47: Groupスタイルにします2009年8月12日水曜日

スライド48: アウトレットの接続2009年8月12日水曜日次の二つをFile’sOwnerに接続しますdatasourcedelegateFile’sOwnerのアウトレット tableView をTableViewに接続します

スライド49: DetailViewController- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1;}- (NSInteger)tableView:(UITableView *)tableViewnumberOfRowsInSection:(NSInteger)section {return 4;}2009年8月12日水曜日

スライド50: DetailViewController- (UITableViewCell *)tableView:(UITableView *)atableView{}cellForRowAtIndexPath:(NSIndexPath *)indexPathNSString *cellIdentifier;switch (indexPath.row) {//省略case 0:cellIdentifier = @"productNameCell";}UITableViewCell *cell = [atableView dequeueReusableCellWithIdentifier:cellIdentifier];if (cell == nil) {cell = [[[UITableViewCell alloc]}switch (indexPath.row) {//省略initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellIdentifier] autorelease];case 0:cell.textLabel.text = item.productName;}return cell;2009年8月12日水曜日

スライド51: 動かしてみる...の前に2009年8月12日水曜日まずはファイルの保存

スライド52: 動かしてみる2009年8月12日水曜日XCodeの「ビルドと実行」を実行します

スライド53: 次のステップSearchBarをつける2009年8月12日水曜日

スライド54: RootViewController.xibを開く2009年8月12日水曜日SearchBarを貼り付けます

スライド55: こんな感じになります2009年8月12日水曜日

スライド56: delegateの接続2009年8月12日水曜日UISearchBarのdelegateをFile’sOwnerに接続します

スライド57: SearchBar- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar{[kakaku search:searchBar.text];}//おまじない[searchBar resignFirstResponder];2009年8月12日水曜日

スライド58: こんな感じになります2009年8月12日水曜日

スライド59: 覚えたこと2009年8月12日水曜日UITableViewUISearchBarNSURLConnectionNSXMLParserデリゲートメソッドのいくつか新しいViewの作り方

スライド60: 最後に参考になるもの2009年8月12日水曜日

スライド61: 参考URL2009年8月12日水曜日Apple Developer Connection のドキュメントhttp://developer.apple.com/jp/24/7 twenty-four sevenhttp://d.hatena.ne.jp/KishikawaKatsumi/もとまかのiPhone・iPod touch戯れ日記http://d.hatena.ne.jp/moto_maka/Stanford University CP193P iPhone Application Programminghttp://www.stanford.edu/class/cs193p/cgi-bin/index.php

スライド62: 参考書籍2009年8月12日水曜日iPhoneSDKiPhoneSDKプログラミング大全iPhoneデベロッパーズクックブックユメみるiPhoneObjective-CたのしいCocoaプログラミング詳解Objective-C 2.0

スライド63: ご静聴ありがとうございました自分のアプリも作ってみてね2009年8月12日水曜日