【Swift】TwitterKitを使ってTwitterクライアントのサンプルを作る その1【4.2】

モールス信号でつぶやける自作Twitterクライアント「TwitMorse」のiOS版を片手間に開発しています。
食わず嫌いしていたxcodeのストーリーボードと格闘しつつ、iOSアプリ開発の自習をしつつ、軽いサンプルをつくったので、動くところまでできたものを紹介します。
なお、途中書き落とした部分があるかと思いますので、うまくいかない部分はコメントで質問してくださると幸いです。


手早くTwitterクライアントのサンプルをつくる

ここでは2018年10月末でサポート終了してしまったTwitterKitというライブラリを使って、手早くTwitterクライアントアプリを作る方法を、雑に書きます。サポートは終了したとはいえ、githubにライブラリが公開されていますので、依然として利用することができます。
このネタを思いついたのは、自分でSwiftでTwitterクライアントアプリを作ろうとした時に、どのブログ記事のサンプルも動かないコードになっていたため、とりあえず動くものを実装した時の記録を後学のために残しておこうという思いつき。

機能

とりあえず、下記に記す最低限の機能が動くところまで

  • Twitter認証
  • ホームタイムラインの表示
  • 投稿機能

何も考えずにxcodeを開き、File->new->Project

File->new->Project

xcode->new->Project->Single View app

Single View appを選択

ProjectNameなどを入力

Project name:適当(好きなプロジェクト名)
Team: Apple Developer IDがアレばそれに紐づけた方がいい,noneも選択可能だが後々面倒になる
Organization Name: Apple Developer IDに紐づく名前が選ばれる
Language: Swift
Use Core Data: チェック必要なし
Include Unit Tests: そのままで良い
Include UI Tests: そのままで良い

Twitter Developer 登録してAppを作っておく

割愛しますが、開発者として承認されるまでに日数を要します。すぐに承認が降りるものではないため、「今すぐTwitterアプリを作りたい」と言ってできるものではないので、まずこれをやっておいてください。

下記を参考に置いておきます。

CallbackURLについて注意

アプリの設定画面で、CallbackUrlを入力する部分がありますが、下記のようにしないとエラーが出て認証が失敗します。

twitterkit-{連携アプリの Consumer Key}://

TwitterKitを使うにあたってPodfileを編集

外部からライブラリ「TwitterKit」を使えるようにします。
いくつか方法はあるようですが、ここではCocoaPodsをというライブラリ管理ツールを使ってTwitterkitをインストールする方法を書きます。

まず、CocoaPodのインストールが必要ですので、ターミナルを開いてください。

$ sudo gem install cocoapods

私の場合は、プロジェクトを作った時点でPodfileがあったのですが、ない場合はプロジェクトディレクトリまで移動して下記を実行してください。

$ pod init

Podfile

target 'twitmorse' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!
  pod 'TwitterKit'
  # Pods for twitmorse
  target 'twitmorseTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'twitmorseUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

pod ‘TwitterKit’

の部分を追記したら、

$ pod install

してあげてください。TwitterKitライブラリがインストールされます。
この状態まで行ったら再度xcodeプロジェクトファイルを開いてください。

参考資料


Fabricの準備

ここも省略します。多分必須ではない・・・が、動いたものは入れたので一応。

上記を参考にFabricをセットアップ。

TwitterのConsumerKeyなどを反映させる

※ここからはTwitterデベロッパーアカウントが必要になります。

Twitter Developerにアクセスし、追加しておいたappを選択。

Twitter DeveloperでアプリからconsumerKeyを取得しよう

Apps→ Detail → Key and Tokenを選択
表示されたconsumerKey,consumerKeySecretを控えておいてください。

Twitter Developerでappの設定
※Read and Writeでappを設定しておかないとTwitter投稿ができませんのでご注意!!

xcodeに戻って・・・

Info.plistを開きます。
ちなみにただ開いただけだとコピペができないので、
Info.plistを右クリック→Open as→Source code

xcodeでInfo.plistのコードを表示する

Info.plist

    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>twitterkit-[ここにconsumerKeyを貼り付ける]</string>
            </array>
        </dict>
    </array>

上記を追記。

続いて、AppDelegate.swiftを開き、CosumerKey,ConsumerKeySecretを入れておく

AppDelegate.swift

import UIKit
import Fabric
import Crashlytics
import TwitterKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        // 1. TwitterAPIのAPI keyとAPI secret keyを設定
        TWTRTwitter.sharedInstance().start(withConsumerKey: "*******************",
                                           consumerSecret: "**********************************************")
        Fabric.with([Crashlytics.self])
        return true
    }

    func application(_ app: UIApplication, open url: URL,
                     options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        // 2. Twitter認証からのコールバック
        if TWTRTwitter.sharedInstance().application(app, open: url, options: options) {
            return true
        }

        return false
    }
    // 以下省略
}

上記AppDelegate.swiftには
Apps→ Detail → Key and Tokenを選択、表示されたconsumerKey,consumerKeySecretを入力してください。

Main.storyboardでNavigationControllerとViewControllerを追加する

ここから画面を追加していきます。この辺から結構ややこしくなってくるので、分からないところは聞いてください。(答えられるか分かりませんが)

NavigationControllerを追加する

xcodeに戻り、Main.storyboardを開きます。xcode上部(ツールバー)の○に□が入っているボタンを押すか、cmd + shift + Lと同時押しでオブジェクトライブラリを出します。そこでNavigationControllerを見つけて(検索窓にNaviと打つと結果が絞られます)、ドラッグしてStoryboard上にドロップします。

Twitter認証用のViewControllerを追加する

Navigation Controllerの設定

Navigation Controllerを選択した状態でcontrolキーを押しながらView Controller(デフォルトであるViewControllerを使いました)に接続。
Manual Segueが出てきますのでRelationShip Segueとしてroot view controllerを選択します。これによってViewControllerがrootのViewになります。
このrootとなったViewControllerでは、Twitterアカウントとの連携を行ったり、認証済みかどうかをチェックして次の画面に遷移させる、といった機能を担うことになります。


ホームタイムライン用のViewControllerを追加する

続いて、つぶやき一覧画面・ホームタイムラインを表示する画面を追加します。

これと同じようにcmd + shift + Lと同時押しでオブジェクトライブラリを出し、View Controllerをストーリーボードにドラッグアンドドロップで配置してください。そしてまたcmd + shift + Lと同時押しでオブジェクトライブラリを出していき、Table ViewをドラッグしてViewControllerとします。

ホームタイムライン用のTableViewを持つViewControllerを準備
↑画像ではPrototype Cellsなるものがありますが、これは後でプログラムで実装して上書きするので必須ではありません。

そしてアプリディレクトリで右クリック→new File→Swift Fileを選択してTimelineViewControllerという名前をつけて保存。
TimelineViewControllerクラスが、作ろうとしているTwitterクライアントアプリのホームタイムライン表示機能にあたるとお考えください。

さて、ここまでで結構長い記事になってきたので、続きは次回記事に書きたいと思います

続き

【Swift】TwitterKitを使ってTwitterクライアントのサンプルを作る その2【4.2】


githubにあげておきました

参考資料

コメント

  1. […] […]

タイトルとURLをコピーしました