6.4 NSURLConnectionを使った演習

ネットワーク通信を行ったサンプルを作ってみましょう

概要

この演習では、適当なAPIから画像のURLを含むjsonを受け取り、その画像をtableviewに表示するサンプルを作ります。

APIはflickrのAPI

• http://www.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1

youtubeのAPI

• http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?v=2&alt=json

が認証なしで使うことができます。

設計方針

• 上記APIから取得できるjsonを一度パースします
• その中に含まれている画像のurlを抜き出して、urlから画像を取得します。

NSData *data = [NSData dataWithContentsOfURL:<画像のURL>];
UIImage *image = [UIImage imageWithData:data];

とすることで、URLから画像データを取得し、UIImageに変換することができます。

• プロパティとしてNSMutableArrayを持っておきます。取得した画像はこのArrayに順次代入していきます。
• [self.tableView reloadData];でテーブルビューを再描画します
• 各cellの描画する箇所で、画像をセットします
  • cell.imageView.image = <UIImageのインスタンス>とすることでセットできます

注意する点

• APIを叩く箇所や画像を取得する箇所はsendAsynchronousRequestで非同期で実行してください
• このメソッドの実行ブロックは別スレッドで動いているので、再描画を促すときはメインスレッドで実行します

[[NSOperationQueue mainQueue] addOperationWithBlock:^{
    [self.tableView reloadData];
}];

ヒント、TIPS

プロジェクトのテンプレートからUITableViewControllerを最初の画面に出来てない時があります。UITableViewControllerをサブクラス化したい場合は、

1. New File から UITableViewControllerのサブクラスを作ります
2. appDelegate.mのapplication:didFinishLaunchingWithOptions:内で

self.viewController = [MixiTableViewController new];

とすることで、1.で作ったクラスを利用することができます。

困ったときは、こちらのソースを参考にしてください https://github.com/mixi-inc/iOSTraining/tree/master/SampleProjects/6.4