TweetUi キットでは、必要な認証、REST APIへのアクセス、アプリで個々のツイートを描写するTWTRTweetView
が使用できます。
Note
ユーザー認証やゲスト認証を使った場合でもツイートを表示することができます。Twitterにログインするを参照してください。
一つのツイートを表示するには、ネットワークからツイートを読み込み(TwitterのREST APIにアクセスするを参照してください)、
ツイートモデルオブジェクトでビューを作成して設定する必要があります。そうして、ビューの階層に追加できるようになります。
UITableView
にツイートを描写したいのであれば、 「ツイートのUITableView
を表示する」を参照してください。
Twitter APIの応答を保存しているのであれば、保存しているJSON 形式のデータからツイートモデルオブジェクトを作成することもできます(後述する、「保存しているJSONデータをツイートに使う」 を参照してください)。
1.Twitter キットフレームワークをインポートする
// Swift import TwitterKit
// Objective-C #import <TwitterKit/TwitterKit.h>
2. ネットワークからツイートを読み込み、completion ブロック内でTWTRTweetView
を作成する
// Swift Twitter.sharedInstance().logInGuestWithCompletion { session, error in if let validSession = session { Twitter.sharedInstance().APIClient.loadTweetWithID("20") { tweet, error in if let t = tweet { self.tweetView.configureWithTweet(t) } else { println("Failed to load Tweet: \(error.localizedDescription)") } } } else { println("Unable to login as guest: \(error.localizedDescription)") } }
// Objective-C __weak typeof(self) weakSelf = self; [TwitterKit logInGuestWithCompletion:^(TWTRGuestSession *guestSession, NSError *error) { if (session) { // Loading public Tweets do not require user auth [[[Twitter sharedInstance] APIClient] loadTweetWithID:@"20" completion:^(TWTRTweet *tweet, NSError *error) { if (tweet) { [weakSelf.tweetView configureWithTweet:tweet] } else { NSLog(@"Failed to load tweet: %@", [error localizedDescription]); } }]; } else { NSLog(@"Unable to log in as guest: %@", [error localizedDescription]); } }];
ツイートビューには二つの異なるスタイルが用意されています: TWTRTweetViewStyleRegular
とTWTRTweetViewStyleCompact
です。
一般的なツイートビューでは大きな画像を表示しツイート共有(Share Tweet)”ボタンを持っています。それに対してコンパクトツリービューは、TWTRTweetTableViewCell
を使って
tableviews に設置される用に設計されています(ツイートのUITableView
を表示する、を参照してください )。
ツイートビューの色を変更するために、二つのオプションがあります:
1. TWTRTweetViewのテーマプロパティを設定する。
// Objective-C // 直接テーマを設定する tweetView.theme = TWTRTweetViewThemeDark; // カスタムカラーを使用する tweetView.primaryTextColor = [UIColor yellowColor]; tweetView.backgroundColor = [UIColor blueColor];
// Swift // Set the theme directly tweetView.theme = .Dark //カスタムカラーを使用する tweetView.primaryTextColor = UIColor.yellowColor() tweetView.backgroundColor = UIColor.blueColor()
2. UIAppearanceProxyを使って TWTRTweetViewの見栄えを設定する。
// Objective-C // Set all future tweet views to use dark theme using UIAppearanceProxy [TWTRTweetView appearance].theme = TWTRTweetViewThemeDark; // カスタムカラーを使用する [TWTRTweetView appearance].primaryTextColor = [UIColor yellowColor]; [TWTRTweetView appearance].backgroundColor = [UIColor blueColor]; [TWTRTweetView appearance].linkTextColor = [UIColor redColor];
// Swift // UIAppearanceProxyを使い、以降全てのツイートビューにdarkテーマを使うように設定する TWTRTweetView.appearance().theme = .Dark // カスタムカラーを使用する TWTRTweetView.appearance().primaryTextColor = UIColor.yellowColor() TWTRTweetView.appearance().backgroundColor = UIColor.blueColor() TWTRTweetView.appearance().linkTextColor = UIColor.redColor()
TWTRTweetTableViewCell
はテーブルビュー内にツイートビューを表示するのに使用できます。
// Objective-C // TweetTableViewDemoViewController.m #import <TwitterKit/TwitterKit.h> #import "TweetTableViewDemoViewController.h" static NSString * const TweetTableReuseIdentifier = @"TweetCell"; @interface TweetTableViewDemoViewController () <TWTRTweetViewDelegate> @property (nonatomic, strong) NSArray *tweets; // Hold all the loaded tweets @end @implementation TweetTableViewDemoViewController - (void)viewDidLoad { [super viewDidLoad]; NSArray *tweetIDs = @[@"20", // @jack's first Tweet @"510908133917487104" // our favorite Bike tweet ]; // tableviewを設定する self.tableView.estimatedRowHeight = 150; self.tableView.rowHeight = UITableViewAutomaticDimension; // Explicitly set on iOS 8 if using automatic row height calculation self.tableView.allowsSelection = NO; [self.tableView registerClass:[TWTRTweetTableViewCell class] forCellReuseIdentifier:TweetTableReuseIdentifier]; //ツイートを読み込む __weak typeof(self) weakSelf = self; [[[Twitter sharedInstance] APIClient] loadTweetsWithIDs:tweetIDs completion:^(NSArray *tweets, NSError *error) { if (tweets) { typeof(self) strongSelf = weakSelf; strongSelf.tweets = tweets; [strongSelf.tableView reloadData]; } else { NSLog(@"Failed to load tweet: %@", [error localizedDescription]); } }]; } # pragma mark - UITableViewDelegate Methods - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.tweets count]; } - (TWTRTweetTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { TWTRTweet *tweet = self.tweets[indexPath.row]; TWTRTweetTableViewCell *cell = (TWTRTweetTableViewCell *)[tableView dequeueReusableCellWithReuseIdentifier:TweetTableReuseIdentifier forIndexPath:indexPath]; [cell configureWithTweet:tweet]; cell.tweetView.delegate = self; return cell; } // 各行の高さを計算する - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { TWTRTweet *tweet = self.tweets[indexPath.row]; return [TWTRTweetTableViewCell heightForTweet:tweet width:CGRectGetWidth(self.view.bounds)]; } @end
// Swift import TwitterKit class TweetTableViewDemoViewController: UITableViewController, TWTRTweetViewDelegate { let tweetTableReuseIdentifier = "TweetCell" // Hold all the loaded Tweets var tweets: [TWTRTweet] = [] { didSet { tableView.reloadData() } } let tweetIDs = ["20", // @jack's first Tweet "510908133917487104"] // our favorite bike Tweet override func viewDidLoad() { // Setup the table view tableView.estimatedRowHeight = 150 tableView.rowHeight = UITableViewAutomaticDimension // Explicitly set on iOS 8 if using automatic row height calculation tableView.allowsSelection = false tableView.registerClass(TWTRTweetTableViewCell.self, forCellReuseIdentifier: tweetTableReuseIdentifier) // ツイートを読み込む Twitter.sharedInstance().APIClient.loadTweetsWithIDs(tweetIDs) { tweets, error in if let ts = tweets as [TWTRTweet] { self.tweets = ts } else { println("Failed to load tweets: \(error.localizedDescription)") } } } // MARK: UITableViewDelegate Methods override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return self.tweets.count } override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let tweet = tweets[indexPath.row] let cell = tableView.dequeueReusableCellWithIdentifier(tweetTableReuseIdentifier, forIndexPath: indexPath) as TWTRTweetTableViewCell cell.tweetView.delegate = self return cell } override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { let tweet = tweets[indexPath.row] return TWTRTweetTableViewCell.heightForTweet(tweet, width: CGRectGetWidth(self.view.bounds)) } }
ツイートビュー上でのユーザーの操作に応じて様々な動作を実行できます。例えば、ユーザーがツイートビュをタップした時、ツイートの詳細をwebview で表示したい場合です。
メソッドの委譲に対応するには、TWTRTweetViewDelegate
プロトコルを実装します:
// MyViewController.h #import <TwitterKit/TwitterKit.h> @interface MyViewController : UIViewController <TWTRTweetViewDelegate> @end // MyViewController.m @implementation MyViewController : UIViewController <TWTRTweetViewDelegate> // My stuff @end
必要に応じて、これらオプションメソッドを実装します:
tweetView:didSelectTweet:
- (void)tweetView:(TWTRTweetView *)tweetView didSelectTweet:(TWTRTweet *)tweet { NSLog(@"log in my app that user selected tweet"); }
// Swift func tweetView(tweetView: TWTRTweetView!, didSelectTweet tweet: TWTRTweet!) { println("Tweet selected: \(tweet)") }
tweetView:didTapURL:
// Objective-C - (void)tweetView:(TWTRTweetView *)tweetView didTapURL:(NSURL *)url { // Open your own custom webview MyWebViewController *webViewController = [MyWebViewController alloc] init]; // *or* Use a system webview UIViewController *webViewController = [[UIViewController alloc] init]; UIWebView *webView = [[UIWebView alloc] initWithFrame:webViewController.view.bounds]; [webView loadRequest:[NSURLRequest requestWithURL:url]]; webViewController.view = webView; [self.navigationController pushViewController:webViewController animated:YES]; }
// Swift func tweetView(tweetView: TWTRTweetView!, didTapURL url: NSURL!) { // Open your own custom webview let webViewController = MyWebViewController() // *or* Use a system webview let webViewController = UIViewController() let webView = UIWebView(frame: webViewController.view.bounds) webView.loadRequest(NSURLRequest(URL: url)) webViewController.view = webView self.navigationController!.pushViewController(webViewController, animated: true) }
tweetView:willShareTweet:
// Objective-C - (void)tweetView:(TWTRTweetView *)tweetView willShareTweet:(TWTRTweet *)tweet { // Log to my analytics that a user started to share a tweet NSLog(@"Tapped share for tweet: %@", tweet); }
// Swift func tweetView(tweetView: TWTRTweetView!, willShareTweet tweet: TWTRTweet!) { println("Tapped share for tweet: \(tweet)") }
tweetView:didShareTweet:withType:
// Objective-C - (void)tweetView:(TWTRTweetView *)tweetView didShareTweet:(TWTRTweet *)tweet withType:(NSString *)shareType { // Log to to my analytics that a user shared a tweet NSLog(@"Completed share: %@ for tweet: %@", shareType, tweet); }
// Swift func tweetView(tweetView: TWTRTweetView!, didShareTweet tweet: TWTRTweet!, withType shareType: String!) { println("Completed share: \(shareType) for tweet: \(tweet)") }
tweetView:cancelledShareTweet:
- (void)tweetView:(TWTRTweetView *)tweetView cancelledShareTweet:(TWTRTweet *)tweet { // Log to to my analytics that a user cancelled a share NSLog(@"Cancelled share for tweet: %@", tweet); }
// Swift func tweetView(tweetView: TWTRTweetView!, cancelledShareTweet tweet: TWTRTweet!) { println("Cancelled share for tweet: \(tweet)") }
また、他の方法でTwitter APIから取得したツイートを標準のJSON形式で保存したデータから、TWTRTweet オブジェクトを作成するオプションも記載します。
// Objective-C // Create a single tweet model object from JSON TWTRTweet *tweet = [[TWTRTweet alloc] initWithJSONDictionary:dictionary]; // Create an array of tweet model objects from a JSON array NSArray *tweets = [TWTRTweet tweetsWithJSONArray:array];
// Swift // Create a single tweet model object from JSON let tweet = TWTRTweet(JSONDictionary: dictionary) // Create an array of tweet model objects from a JSON array let tweets = TWTRTweet.tweetsWithJSONArray(array)