2018年6月12日火曜日

TwitterKit を使って Twitter のログインページを作ってみた

概要
環境
事前準備
ライブラリインストール
AppDelegate.swift の編集
Info.plist の編集
GameViewController.swift の編集
動作確認
最後に
参考サイト

概要

TwitterKit は Twitter が公式で提供している Swift 用の SDK です
今回は SpriteKit プロジェクトで TwitterKit を使ってみました
簡単なログイン画面を実装してみます

環境

macOS 10.13.5
Xcode Version 9.4 (9F1027a)
twitter-kit 3.3.0

事前準備

Twitter のアプリ作成画面からアプリを作成しておきましょう
作成後以下を確認してください

Consumer Key と Consumer Secret Key の取得
Callback URL の設定
Read, Write の設定

Consumer Key と Consumer Secret Key はアプリを作成すると取得できるのでアプリを作成すれば OK です
Callback URL は以下の画像にあるように twitterkit- から始まるアドレスを設定しましょう
こうすることでアプリで認証後に再度アプリの画面に戻ることができます
Read, Write の設定は Permissions タグから行うことができます

最終的に Details タブで確認して以下のようになっていれば OK です

ライブラリインストール

pod init
vim Podfile

pod 'TwitterKit'

pod install

で作成された .xcworkspace のプロジェクトを Xcode で開きます

AppDelegate.swift の編集

まず didFinishLaunchingWithOptions で Consumer Key を登録します

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    TWTRTwitter.sharedInstance().start(withConsumerKey: "isQRxxxxxxxxxxxxxxxxxxxxx", consumerSecret: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
    return true
}

Info.plist の編集

次に Info.plist を編集して先程アプリに設定したコールバック URL をこちらにも登録します
これを登録しないとコールバック URL がおかしいと言われてエラーが発生します
直接 XML を編集したほうが簡単なので Info.plist を選択した状態で

Open As -> Source Code

で開いて以下を貼り付けましょう

<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>twitterkit-isQRxxxxxxxxxxxxxxxxxxxxx</string>
        </array>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>twitter</string>
    <string>twitterauth</string>
</array>

GameViewController.swift の編集

ログイン用のボタンを設置しましょう
viewDidLoad の先頭に以下を追記しましょう

override func viewDidLoad() {
    super.viewDidLoad()
    let logInButton = TWTRLogInButton(logInCompletion: { session, error in
        if let s = session {
            print("signed in as \(s.userName)");
        }
        if let e = error {
            print("error: \(e.localizedDescription)");
        }
    })
    logInButton.center = self.view.center
    self.view.addSubview(logInButton)
    // ...
}

... の部分は元々ある SKScene をロードするコードを書いておきます
TWTRLogInButton を作成して addSubview で GameViewController のど真ん中にボタンを配置しています
とりあえず今回はログイン後に何もせずデバッグのメッセージを表示します

あと最後に GameScene.sks ファイルの Hello World のラベルを削除すれば OK です

動作確認

アプリを起動して動作確認しましょう
ログインボタンを押すとログイン用の View が出てくるのでログインしましょう

コンソールを確認して以下のようにログイン OK のメッセージが出ていれば OK です

signed in as hawksnowlog

最後に

TwitterKit を使ってログイン画面を実装してみました
あとはログイン後の処理をデバッグ画面の表示ではなく画面遷移などに変更すれば OK だと思います
そしてツイートを取得したりツイートする処理を実装すればそれっぽい Twitter クライアントができると思います

hawksnowlog