スタンフォード大学のiPhoneアプリ開発講座の宿題(Presence 2)

Presence 2Twitterからユーザのつぶやきを取得してきて、それをTable Viewに表示するという課題であるが、Twitterから情報を取得して来るための便利なクラス(TwitterHelper)を事前に提供してくれるので、これを使えば非常に簡単に情報を取得する事が出来る。

今回の課題で難しかったのは、Twitterの呟きはそれぞれ長さが違うので、それにあわせてTable Viewの高さを変更しなければならないという点と、Table Viewを効率的に使用するため、Cellの再利用をするという部分である。

なお、本課題の回答は以下のブログで非常に明解に説明されているので、本ブログでは一部追加課題のコードのみ触れる事にする。

また、Presence 2ではUITableViewCellを継承したクラスを作るというアプローチもあり、その方法を分かりやすく説明したビデオチュートリアルが以下(英語)。

更に以下のブログも非常に参考になった。


1. 各ユーザ毎のつぶやきを表示するTable Viewの上部にユーザの顔写真を表示する

// PersonDetailViewController.m
// Table ViewのtableHeaderViewというプロパティを利用して
// ユーザの顔写真を表示する
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = person.name;
    
    // Get timeline info from Twitter.
    person.statusList =
    [[TwitterHelper fetchTimelineForUsername:person.userName] mutableCopy];
    
    // Show twitter icon image on table header
    UIView *hearderView =
        [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 110)];
    UIImageView *imageView =
        [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 90, 90)];
    imageView.image =
    [UIImage imageWithData:[NSData dataWithContentsOfURL:person.imageURL]];
    [hearderView addSubview:imageView];
    [imageView release];
    self.tableView.tableHeaderView = hearderView;
    [hearderView release];
}


2. ユーザ一覧を表示するメイン画面でユーザの削除・並べ変えを可能にする

// PersonListViewController.m
- (void)viewDidLoad {
    // この一行で編集ボタンが追加出来る。
    // 後は削除時のメソッドと並べ替え時のメソッドを用意すれば
    // それらが自動的に呼ばれる。
    self.navigationItem.rightBarButtonItem = self.editButtonItem;
    …
}

// 削除時の処理
- (void)tableView:(UITableView *)tableView
    commitEditingStyle:(UITableViewCellEditingStyle)editingStyle
    forRowAtIndexPath:(NSIndexPath *)indexPath {
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        // Delete the row from the data source
        [personList removeObjectAtIndex:[indexPath row]];
        [tableView deleteRowsAtIndexPaths:
            [NSArray arrayWithObject:indexPath]
            withRowAnimation:UITableViewRowAnimationTop];
    } else if (editingStyle == UITableViewCellEditingStyleInsert) {
        // ユーザの追加はしないので処理は無し
    }
}

// 移動時の処理
- (void)tableView:(UITableView *)tableView
    moveRowAtIndexPath:(NSIndexPath *)fromIndexPath
    toIndexPath:(NSIndexPath *)toIndexPath {
    Person *person =
        [[personList objectAtIndex:[fromIndexPath row]] retain];
    [personList removeObjectAtIndex:[fromIndexPath row]];
    [personList insertObject:person atIndex:[toIndexPath row]];
    [person release];
}


3. TwitterのつぶやきのTimestampを取得し表示する

// TwitterのつぶやきのTimestampはグリニッジ標準時(GMT)なので、
// それをローカルのタイムゾーンに変更する処理を抜粋
NSDateFormatter *dfin = [[NSDateFormatter alloc] init];
[dfin setLocale:[[[NSLocale alloc] initWithLocaleIdentifier:@"US"] autorelease]];
[dfin setDateFormat:@"EEE MMM dd HH:mm:ss ZZZZ yyyy"];

// Use another date formatter to change time zone and output format.
NSDateFormatter *dfout = [[NSDateFormatter alloc] init];
[dfout setTimeZone:[NSTimeZone localTimeZone]];
[dfout setLocale:[NSLocale currentLocale]];
[dfout setDateStyle:NSDateFormatterMediumStyle];
[dfout setTimeStyle:NSDateFormatterMediumStyle];

NSString *gmtTime = ... // Twitterから取得したTimestampを代入
NSDate *date = [dfin dateFromString:gmtTime];
NSString *localTime = [dfout stringFromDate:date];


以下は私が作成したPresence 2のイメージ。