ツイートを投稿してみよう
投稿フォームの作成
前回までは、Twitterでフォローしている友達のツイートを見るためにタイムラインを実装しました。ですが、自分でツイートができなければ友達とコミュニケーションをとることができませんよね。せっかくツイートがみれるのに友達とコミュニケーションが取れないのはつまらないですよね。
なので、今回は友達とコミュニケーションが取れるようにツイートする機能を作っていきます。今回も前回利用したフレームワークを利用していきます。
ファイルの作成とストーリーボードへの追加
まず、ツイート投稿をするために投稿画面を作っていきます。投稿画面用のViewControllerが必要なのでTweetPostViewController.swiftファイルを新規に追加します。
新規作成するファイルのテンプレート"Cocoa Touch Class"を選択します。
Class:TweetPostViewController, Subclass:UIViewController, Language:Swiftにします。xibは使わないので、チェックボックスはオフにします。
作成するとナビゲーションエリアにTweetPostViewController.swiftが追加されます。
次は、Storybaord上にViewControllerを追加しましょう。
Main.storyboardを選択してstoryboard上にViewControllerを追加します。
次に、インスペクタエリアから追加したViweControllerのクラスをTweetPostViewControllerにします。
投稿フォームへの画面遷移
次は、追加したタイムラインから投稿フォームに遷移する処理を追加します。
遷移するためのボタンをタイムラインのナビゲーションバーの左側に追加したいと思います。ナビゲーションバーにボタンを追加するには、まず、ナビゲーションバーの上に"Navigation Item"というUIを追加します。
設置したNavigation Item上の右側に"Bar Button Item"を持っていきます。するとボタンが追加できるようになっています。
ここからは、今まで何どもやっている"Triggered Segues"を使った画面遷移で投稿フォームへ遷移する処理を追加します。先ほど追加したボタンを選択した状態で、インスペクタエリアの一番右のタブを選択してTriggered Seguesの"action"の右側の◯からStoryboard上のTweetPostViewControllerへドラッグして接続します。ポップアップが出現するので今回は"show detail"を選択します。
すると、ボタンをタップした時にこの接続を参照して投稿フォームがモーダルで表示されるようになっています。
接続したら、シミュレーターを起動してボタンを押した時に遷移するか確かめてみましょう。
投稿フォームのレイアウト
ここからは、ボタンやラベルを使って投稿フォームを作っていきます。
設置したTweetPostViewController以下のようにLabel, TextView, Buttonを２つ設置してみましょう。各パーツのラベルも変更しましょう。
AutoLayoutを各パーツに設定して、自動的にサイズ調整をできるようにしましょう。
- Label: Top, Left
- TextView: Top, Left, Right
- Send/Cancel: Top, Left
シミュレーターで起動して、向きを変えてもレイアウトされるか確認しましょう。
投稿ロジック
次は、投稿フォームからツイートするための処理をプログラムで書いていきます。
まず初めに、Storyboard上に設置したボタンとテキストビューをプログラムと接続しましょう。
TweetPostViewControllerを選択した状態で"Show the assistant editor"ボタン、もしくは"option"を押しながらstoryboardを選択してアシスタントエディターを表示します。
"Control"ボタンを押しながらパーツを選択し、プログラムの上にドラッグするとプログラムにパーツを追加して接続することができます。
これで、プログラム内でも各パーツを扱えるようになります。次は、各ボタンにアクションを追加していきましょう。
まずは、Cancelボタンにアクションをつけていきます。
class TweetPostViewController: UIViewController {
/* 省略 */
@IBAction func tappedCancelButton(sender: AnyObject) {
self.dismissViewControllerAnimated(true, completion: nil)
}
}
シミュレーターを実行してみましょう。
次は、Sendボタンにアクションを追加していきます。
class TweetPostViewController: UIViewController {
/* 省略 */
@IBAction func tappedSendButton(sender: AnyObject) {
let URL = NSURL(string: "https://api.twitter.com/1.1/statuses/update.json")
if count(postField.text) <= 0 {
var alert = UIAlertController(title: "Error", message: "Please input text", preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction(UIAlertAction(title: "OK", style: .Default, handler:nil))
self.presentViewController(alert, animated: true, completion:nil)
return
}
var params = ["status": postField.text]
// リクエストを生成
let request = SLRequest(forServiceType: SLServiceTypeTwitter,
requestMethod: .POST,
URL: URL,
parameters: params)
// 取得したアカウントをセット
request.account = twAccount
// APIコールを実行
request.performRequestWithHandler { (responseData, urlResponse, error) -> Void in
if error != nil {
println("error is \(error)")
}
else {
// 結果の表示
let result = NSJSONSerialization.JSONObjectWithData(responseData, options: .AllowFragments, error: nil) as! NSDictionary
println("result is \(result)")
}
}
self.dismissViewControllerAnimated(true, completion: nil)
}
}
シミュレーターを実行してみましょう。投稿フォームからテキストビューに入力してSendボタンを押して送信してみましょう。
友達のつぶやきをRetweet, Favoriteしてみよう
プロフィールを更新してみよう
Menuボタンをタイムラインのナビゲーションバーの左側に追加しましょう。
Menuボタンにアクションを追加しましょう。
class TimelineViewController: UITableViewController, UITableViewDelegate, UITableViewDataSource {
@IBAction func tappedMenuButton(sender: AnyObject) {
var alertController = UIAlertController(title: "Menu", message: nil, preferredStyle: .ActionSheet)
alertController.addAction(UIAlertAction(title: "Edit Profile", style: .Default, handler: {
(action) -> Void in
}))
alertController.addAction(UIAlertAction(title: "Logout", style: .Default, handler: {
(action) -> Void in
self.navigationController?.popViewControllerAnimated(true)
}))
let CanceledAction = UIAlertAction(title: "Cancel", style: .Cancel, handler: nil)
alertController.addAction(CanceledAction)
self.presentViewController(alertController, animated: true, completion: nil)
}
}
シミュレーターで実行してみましょう！プロフィールに遷移することができます。
UIとクラスの作成
StoryboardでUIを作ってみましょう。
AutoLayoutを設定しましょう
プロフィールを更新するロジック
ProfileEditViewControllerに次の表示ロジックを追加していきます。
@IBOutlet var userIcon: UIImageView!
@IBOutlet var userNameLabel: UILabel!
@IBOutlet var twitterIdLabel: UILabel!
@IBOutlet var profileMessageView: UITextView!
@IBOutlet var sendButton: UIButton!
var twAccount = ACAccount()
override func viewDidLoad() {
super.viewDidLoad()
UIApplication.sharedApplication().networkActivityIndicatorVisible = true
let URL = NSURL(string: "https://api.twitter.com/1.1/users/lookup.json?screen_name="+twAccount.username)
let request = SLRequest(forServiceType: SLServiceTypeTwitter,
requestMethod: .GET,
URL: URL,
parameters: nil)
request.account = twAccount
request.performRequestWithHandler { (data, response, error:NSError?) -> Void in
UIApplication.sharedApplication().networkActivityIndicatorVisible = false
if error != nil {
println("Fetching Error: \(error)")
return;
}
var tweetResponse: AnyObject? = NSJSONSerialization.JSONObjectWithData(data, options: .AllowFragments, error: nil)
if let tweetDict = tweetResponse as? Dictionary<String, AnyObject>{
if let errors = tweetDict["errors"] as? Array<Dictionary<String,AnyObject>>{
var alert = UIAlertController(title: "Error", message: errors[0]["message"] as? String, preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction(UIAlertAction(title: "OK", style: .Default, handler:nil))
self.presentViewController(alert, animated: true, completion:nil)
}
return
}
var results = tweetResponse as! Array<Dictionary<String, AnyObject>>
var myStatus = results[0]
var userName = myStatus["name"] as? String
var profileMessage = myStatus["description"]as? String
var twitterID = "@"+self.twAccount.username
var imageURL = NSURL(string: myStatus["profile_image_url"] as! String)
var image = UIImage(data: NSData(contentsOfURL: imageURL!)!)
dispatch_async(dispatch_get_main_queue(), {
self.userNameLabel.text = userName
self.profileMessageView.text = profileMessage
self.twitterIdLabel.text = twitterID
self.userIcon.image = image
})
}
}
シミュレーターを再起動して、表示してみましょう。プロフィールを表示することができます。次に、更新処理を追加していきます。
@IBAction func tappedSendButton(sender: AnyObject) {
let URL = NSURL(string: "https://api.twitter.com/1.1/account/update_profile.json")
if count(profileMessageView.text) <= 0 {
var alert = UIAlertController(title: "Error", message: "Please input text", preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction(UIAlertAction(title: "OK", style: .Default, handler:nil))
self.presentViewController(alert, animated: true, completion:nil)
return
}
var params = ["description": profileMessageView.text]
// リクエストを生成
let request = SLRequest(forServiceType: SLServiceTypeTwitter,
requestMethod: .POST,
URL: URL,
parameters: params)
// 取得したアカウントをセット
request.account = twAccount
// APIコールを実行
request.performRequestWithHandler { (responseData, urlResponse, error) -> Void in
if error != nil {
println("error is \(error)")
}
else {
// 結果の表示
let result = NSJSONSerialization.JSONObjectWithData(responseData, options: .AllowFragments, error: nil) as! NSDictionary
println("result is \(result)")
}
}
self.navigationController?.popViewControllerAnimated(true)
}
まとめ
- Frameworkを使ってツイートを取得したように、ツイートを投稿することもできる
- ツイートやプロフィールの投稿にはテキストビューを使おう
- ログアウト時はpopViewControllerを使おう