Twitterの文字数チェックを組み込む #Swift

概要

iOSアプリへTwitterの投稿機能を持たせています。私が作った投稿機能はTwitterの部品ではなくアプリ独自で組み込みを行っているため、文字数チェックの組み込みが必要です。文字数チェックは単純に文字列をカウントするだけではTwitterの文字数と差異が発生するため、Twitterのオープンソースで提供されている文字数チェックのツール「twitter-text」を使用します。

環境

macOS：10.14.6
xcode：11.2.1
swift：5.1.2
iOS：13.0
twitter-text：V3

準備

twitter-textをプロジェクトへインストール

podsファイルへtwitter-textを追記。
※CocoaPodsの導入について、事前にこちらのページを参照するといいです

podfile

# Uncomment the next line to define a global platform for your project
platform :ios, '13.0'

target 'app' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for MyTweetTool
  pod 'twitter-text'

end

ターミナルからインストールを実施

    # プロジェクトのフォルダへ移動
    cd /Users/xxx/develop/app

    # インストール実施
    pod install

コーディング

import UIKit
import twitter_text

class MainView: UIViewController, SFSafariViewControllerDelegate, UITextViewDelegate {
// ------------------------------
// MARK: controls
// ------------------------------
    let txtTweet = UITextView()
    let lblCharCounter = UILabel.init(frame: .zero)

// ------------------------------
// MARK: override
// ------------------------------
    override func viewDidLoad() {
        setupUI()
    }

// ------------------------------
// MARK: function
// ------------------------------
    func setupUI() {
        // 背景色の指定
        self.view.backgroundColor = .white

        // ■ 投稿文章入力フィールド
        txtTweet.delegate = self
        txtTweet.frame = CGRect(x: 10, y: 100, width: getPosition(pPoint: widthSize, pAxis: .width), height: getPosition(pPoint: 0.4, pAxis: .height))
        txtTweet.center = CGPoint(x: getPosition(pPoint: 0.5, pAxis: .width), y:getPosition(pPoint: 0.27, pAxis: .height) )
        txtTweet.backgroundColor = UIColor.rgba(red: 224, green: 255, blue: 255, alpha: 1)
        // フォント設定
        txtTweet.textColor = .black
        txtTweet.font = UIFont.systemFont(ofSize: 20)
        // テキストフィールドを角丸にする
        txtTweet.layer.borderWidth = 1
        txtTweet.layer.cornerRadius = 10
        txtTweet.layer.masksToBounds = true
        self.view.addSubview(txtTweet)

        // ■ 入力済み文字数のカウント
        lblCharCounter.frame = CGRect(x: 0,y: 0, width:  50, height:  50);
        lblCharCounter.backgroundColor = .clear
        lblCharCounter.textColor = .gray
        // フォント設定
        lblCharCounter.textAlignment = .center
        lblCharCounter.text = String(format: "%@ char",defaultCounter.description)
        lblCharCounter.font = UIFont.systemFont(ofSize: 17)
        // サイズを調整してから配置する
        btnClearTweetText.sizeToFit()
        lblCharCounter.center = CGPoint(x: getPosition(pPoint: 0.7, pAxis: .width), y:  getPosition(pPoint: 0.575, pAxis: .height));
        self.view.addSubview(lblCharCounter)
    }

    // テキストビューの更新イベントを取得
    func textViewDidChange(_ textView: UITextView) {
        // 入力文字数に応じた画面制御
        let result: TwitterTextParseResults = getTweetCharactorCount(pCharactors: txtTweet.text)
        setDisplayByInputCharactor(pResult: result)
    }

    // 入力文字数取得（twitterのツールを使用して正確な文字数を取得する）
    func getTweetCharactorCount(pCharactors: String) -> TwitterTextParseResults {
        // 初期化
        let parser = TwitterTextParser.init(configuration: TwitterTextConfiguration.init(fromJSONResource: kTwitterTextParserConfigurationV3))
        // 文字列取得
        let result: TwitterTextParseResults = parser.parseTweet(pCharactors)
        return result
    }

    /**
     入力文字数による画面制御
     */
    func setDisplayByInputCharactor(pResult: TwitterTextParseResults) {
        lblCharCounter.text = String(format: "%@ char", pResult.weightedLength.description)
        lblCharCounter.sizeToFit()
        setPostEnabled(pValid: pResult.isValid)
        if pResult.isValid {
            lblCharCounter.textColor = .gray
        }else {
            lblCharCounter.textColor = .red
        }

}

参考ページ

twitter-textのソースコード（github）
twitterの文字数カウントに関わるドキュメント

おわりに

標準の部品を使うことが多いケースではドキュメントが少ないので苦労することもあると思います。特定の部分を特化させた機能を作るときに、少しでもお役にたてれば幸いです。