Pages

【修正版】Swiftで始めるTwitterアプリ事始め(パート2)

2014年6月10日火曜日

前回は、Swiftプロジェクトの作成からストーリーボードを使ってアプリの画面を作成しました。
今回は、ツイート画面を表示して実際にTwitterにツイートするロジックを追加しようと思います。最後には、シミュレーターを使って実際に投稿するまでの手順を書きます。
※この記事は、ツイッターアプリを作ろう。誰でもわかるiPhone開発講座を参考に作成しています。

2014-06-10
Apple社のNDAに違反いるとのご指摘を受け、ブログ内から抵触するスクリーンショットを削除致しました。指摘してくださったみなさま、ありがとうございました。

目次

今回の目次は、次のとおりです。
  • クラスを追加する
  • 画面とクラスを関連付ける
  • ツイートボタンのタップイベントを追加する
  • frameworkを追加する
  • タップイベントにコードを追加する
  • Twitterアカウントの設定する
  • アプリを実行する

クラスを追加する

プロジェクトを作成したとき、既にクラスが作成されています。
今回は、既存のファイルを書き換えて画面の処理を実装していきます。


  1. 左のプロジェクトナビゲーターから"ViewController.swift"をクリックします。
  2. EnterKeyを押しすとファイル名が反転するので、"ViewController.swift"を"TimelineViewController.swift"に変更します。
  3. Save Anyway をクリックします。
  4. 選択したファイルのコードが表示されます。
  5. 表示されたエディタを使ってベースクラスとクラス名を変更します。
  6. "ViewController"→"TimelineViewContoller"
  7. "UIViewController"→"UITableViewController"
変更前

変更後

画面とクラスを関連付ける


  1. "Main.storyboard"を選択します。
  2. "Table View"のステータスバーをクリックします。
  3. "Identity inspector"をクリックし、"Class"から"TimelimeViewController"を選択します。

ツイートボタンのタップイベントを追加する

ツイートボタンがタップされたときのイベントを作成します。


  1. "Table View"が選択された状態で、"Assistant editor"ボタンをクリックします。
  2. クリックすると左側がストーリーボードの画面に、右側がエディタ画面になります。
  3. controlキーを押しながら、"Bar Button Item"から"didReceiveMemoryWarning"メソッドの下の行までドラッグ・アンド・ドロップします。
  4. "Connection"から"Action"を選択します。
  5. "Name"に"pressComposeButton"と入力します。
  6. "Type"から"UIBarButtonItem"を選択し、Connectをクリックします。

frameworkを追加する

Twitter APIを使用するためのframeworkがiOSに用意されています。
Twiftでは、iOSで用意されているAPIを使ってTwitterに投稿できるようにプログラミングします。


  1. "Show the Standard Editor"をクリックします。
  2. 画面左側のProject Navigatorから"Twift(プロジェクト作成時に別の名前を付けた場合は、付けた名前のプロジェクト名)"を選択します。
  3. "General"-"Deployment Info"-"Deployment Target"から[7.0]を選択します。
  4. "Build Phases"-"Link Binary With Libraries"左の▼をクリックして展開します。
  5. "+"をクリックします。
  6. 検索バーに"twitter"と入力します。
  7. Twitter.frameworkを選択して、Addボタンをクリックします。
  8. "Twitter.framework"がライブラリーに追加されます。

いよいよ。Swiftを使ってプログラミングを始めます。


  1. "TimelineViewController.swift"を選択します。
  2. 追加した"Twitter.framework"を利用するためには、"TimelineViewController"クラスからTwitter.frameworkを使えるように宣言します。


タップイベントにコードを追加する

ツイートボタンをタップしたときに投稿画面を表示するコードを追加します。
プログラムの下方にある"pressComposeButton"メソッドにコードを追加します。(「ツイートボタンのタップイベントを追加する」で追加したメソッドです。)


Twitterアカウントの設定する

以上の手順でTwitterに投稿するプログラムが完成しました。
この章では、シミュレーターを使って作成したTwitterアプリを動作させてみましょう。

動作させる前にシミュレーターにTwitterの設定が必要です。
それでは、シミュレーターを起動してTwitterの設定方法を見て行きましょう。


  1. Xcode上部にある"iPhone 4s"をクリックして、エミュレーターを"iPhone 5s"に変更します。
  2. ▶をクリックしてシミュレーターを起動します。
  3. 自動でコンパイルが実行され、シミュレーターが起動します。
  4. ツイートボタンをクリックしたいところですが、一旦 Twitterの設定をします。
  5. Shift+Command+hキーを押します。
  6. 左から右にドラッグ・アンド・ドロップして、画面を切り替えます。
  7. Settingsをクリックします。
  8. Twitterをクリックします。(Twitterが表示されていないときは、下から上にドラッグ・アンド・ドロップしてリストを移動します。)
  9. "User Name"と"Password"に使用する情報を入力して、Sign Inをクリックします。
  10. アカウントが追加されます。


アプリを実行する

さあ、いよいよ。作成したTwitterアプリを動作させます。


  1. ▶をクリックしてアプリを起動します。
  2. ツイートボタンをクリックします。
  3. 投稿画面が表示されるので、何かつぶやくメッセージを入力し、Postをタッチします。



どうでしょう?Twitterのタイムラインに入力した内容は表示されたでしょうか?
次回以降は、タイムラインのデータを取得してリストに表示するプログラムを作る予定です。次回の更新をお楽しみに!


こんなことが起きたら…

ツイートボタンをクリックしたときにXcodeの画面に切り替わり、エディタ画面の右側に"Thread 1: break point 1.1"と表示された場合は、Control+Command+y キーを押してみましょう。処理が実行され、投稿画面が表示されるようになります。

これは、指定した行(図では24行目)にブレークポイントというものが設定されているため、プログラムがブレークポイントで停止しているために発生します。Control+Command+yキーを押すことによって、停止していたプログラムが再開されるようになります。

意図しないブレークポイントを設定してしまい、都度プログラムが止まってしまって困るというときにはブレークポイントを削除することで対処することができます。

ブレークポイントを削除するには、"Breakpoint Navigator"を開いて設定されているブレークポイントを削除することができます。

"TimelineViewController.swift"を副ボタンクリック(2本指クリック)します。
"Delete Breakpoints"をクリックします。

0 件のコメント:

コメントを投稿