Pages

Swiftで始めるTwitterアプリ事始め(パート3)

2014年6月11日水曜日
前回は、Twitterに投稿するボタンにプログラムを追加して投稿できるようにしました。
第3回目となる今回は、Twitterのアカウント情報を取得するプログラムを追加しようとお思います。
※この記事は、ツイッターアプリを作ろう。誰でもわかるiPhone開発講座を参考に作成しています。


目次

  • frameworkを追加する
  • アカウント情報にアクセス許可を求めるプログラムを追加する
  • アカウント情報を取得する

frameworkを追加する

  1. 左側サイドバーからTwift(プロジェクト名)を選択します。
  2. "Build Phases"ー"Link Binary With Libraries"の順に選択します。
  3. "Link Binary With Libraries"内の"+"をクリックします。
  4. 表示されたダイアログから[Accounts.framework]をクリックします。
  5. Addをクリックします。
  6. "Link Binary With Libraries"に"Accounts.framework"が追加されます。
  7. 左側サイドバーから"TimelineViewController.swift"をクリックします。
  8. "import Twitter"の次の行に"import Accounts"を追加します。


アカウント情報にアクセス許可を求めるプログラムを追加する

class宣言のすぐ下に"override func viewDidLoad()"メソッドがあります。
viewDidLoad()メソッドに下記のプログラムを追加します。


viewDidLoad()メソッドとは

viewDidLoadメソッドは、画面が表示されるときに呼び出されるメソッドです。
画面を表示するタイミングで処理を行いたいときは、このメソッドの中にプログラムを書きます。

コードを追加したら、左上にある▶をクリックして動作を確認してください。
実行するとアカウント情報にアクセスを求める画面が表示されます。


アカウント情報を取得する

アカウント情報を取得するプログラムを書きます。
下記のプログラムを追加してください。


コードを追加したら、左上にある▶をクリックして動作を確認してください。
Debug areaに取得したTwitterアカウントの情報が表示されます。

Debug areaは

shift+command+y キーを押すことでXcodeの下部に表示されます。
背景が黒で白色の文字のウィンドウです。

Read more ...

【修正版】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"をクリックします。

Read more ...

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

2014年6月10日火曜日
AppBankさんのツイッターアプリを作ろう。誰でもわかるiPhone開発講座という記事がとても解かり易かったので、参考に Swift 版の記事を作成しました。
何回かに分けて記事を書いていこうと思いますので、気長にお付き合いください。

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

はじめに

はじめに、この記事を読み始めるにあたって、既にXcode 6.0 β版がインストール済みであることを確認しておいてください。

目次

今回の記事で取り上げるのはこの2つです。
  • プロジェクトの作成
  • タイムライン表示画面の作成

プロジェクトの作成


  1. Xcode 6.0 β版を起動起動して "Create a new Xcode project"をクリックします。
  2. 左側のプロジェクトの種類から[iOS]-[Application]をクリックをします。
  3. "Single View Application" → OKの順にクリックします。
  4. [Product Name]に"Twift"と入力します。(作成するアプリの名前です。もちろんTwift以外もOK)
  5. [Language]から"Swift"を選択します。
  6. [Use Core Data]にチェックが入っていないことを確認して、OKをクリックします。
  7. プロジェクトの保存先を選択して、Createをクリックします
  8. 作成したプロジェクトの設定画面が開かれます。

タイムライン表示画面の作成

不要なViewControllerの削除


  1. まずは、テンプレートで作成されたViewをストーリーボードから削除します。
  2. "Main.storyboard"をクリックします。
  3. ステータスバーをクリックして、"View Controller"を選択します。
  4. [Delete]キーを押して、選択した"View Contorller"を削除します。

タイムラインを表示するTable View Controllerの追加


  1. Twitterから取得したタイムラインを表示する画面を作成します。
  2. ドラッグ・アンド・ドロップして、"Table View Controller"を追加します。
  3. Table View Controller がストーリーボードに追加されます。

ナビゲーションバーの追加


  1. ストーリーボードに"Navigation Controller"を追加します。
  2. Xcodeメニューから[Editor]-[Embed In]-[Navigation Controller]を選択します。
  3. "Navigation Controller"が追加されます。

 ツイートボタンの追加


  1. 画面にツイートボタンを追加します。
  2. "Bar Button Item" を "Table View Controller" の右上にドラッグ・アンド・ドロップします。
  3. 画面の右上にドラッグ・アンド・ドロップした"Bar Button Item"が追加されます。
  4. [Bar Button Item]、[Attrbutes inspector]、[Identifer]-[Compose]の順にクリックします。
  5. Compose を選択すると、ボタンのアイコンが変わります。

以上で、ストーリーボードを使ったアプリ画面の作成は完了になります。
次回は、イベント毎にイベントをプログラミングしていこうと思います。
Read more ...

Swiftで始めるTwitterアプリ事始め(お詫び)

2014年6月9日月曜日
Swiftで始めるTwitterアプリ事始め(パート1〜パート2)ですが、内容に問題があったため、公開を停止致しました。

内容を訂正し、改めて公開します。


メールや、サイト等で指摘してくださったみなさま、本当にありがとうございました。

Read more ...

Swiftを使ったTwitterアプリの作成が完了しました

2014年6月7日土曜日
ソースはGithubにあります。
作成中の困ったことは、Qiitaにまとめました

Read more ...

Swift使ってTwitterアプリを作り始めた

2014年6月4日水曜日
Swiftを使ってHello, Worldを書いたので、今回はTwitterアプリを作り始めてみました。
実際に作ることで理解を深めることができたと思います。

今日作成できたのは、Twitter APIの情報をログに出力するのと、ツイートする機能だけです。


作成中のコードはここ(develop ブランチのみソースがあります)
作成中に困ったりハマったりしたことはここ(Qiita)に書きました。

まだまだ、作成途中ですが完成できるまで書き残していこうと思います。
コードの問題などご指摘がありましたら、ご連絡お待ちしております。



Read more ...

話題になっている新しい言語 swift で Hello, World やってみた

2014年6月4日水曜日
昨夜のWWDCデベロッパーで発表されたプログラミング言語 Swift でお決まりの「Hello, World」を作ってみました。

コードはここ


Developer契約の期間がいつの間にか過ぎてしまっていたので、契約やダウンロードやsimulatorのセットアップをしていたら、環境構築だけで2時間かかってしまいました。

時間を作ってもう少し遊べるプログラミングを組む時間を設けないとな。
Read more ...