【Swift】iPhoneアプリで縦書き文字を使う方法【TTTAttributedLabel】

TTTAttributedLabelで縦書きを指定するには？
M_Pのエラーメッセージが出る場合は？
こんな疑問に答えていきます。

本記事の内容

TTTAttributedLabelのインストール
文字を縦書きにするコード
方向が縦になっただけで文字自体が回転しない場合
文章を改変したい時は、変数を定義しておく
文字入力の細かい調整
縦書き文字を使う他の方法

縦書き…というのは、日本語の独特文化ですよね。
でも、僕が作っているアプリでは、どうしても使いたいんです。

グローバルルールじゃないから簡単には無理かな、って思って調べました。
「TTTAttributedLabel」という、文字に関するいろんなツールの詰まったパッケージを使えばいけるみたいです。

こんな万能なツールがあるんですね。
iPhoneアプリをApp storeで公開中の僕が解説していきます。

作業環境

Xcode Version 10.0 (10A255)
Mac OSX High Sierra
Swift 4.2

TTTAttributedLabelのインストール

こちらが、公式ページです。

CocoaPodsでインストール

インストールは、CocoaPodsで行います。
出ましたね…超めんどくさいやつです…

CocoaPodsdでXcodeにツールをインストールする方法はこちらのサイトがわかりやすいです。
超めんどくさいので、覚悟しましょう。

ちなみに、毎回忘れそうになりますが、大事なことがあります。
Cocoa podsでツールをインストールした後は「.xcodeproj」ではなく「.xcworkspace」から開くことになります。
超注意しましょう。
そうしないと、TTTAttributedLabelのエラーでアプリが起動できません。

TTTAttributedLabelの著作権表示

TTTAttributedLabelはMIT Licenseです。
これはみんなアプリの特定の専用記述欄に記載しているので、今はそんな気にしなくてよさそうです。

MIT Licenseとは
著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。

ライセンス情報の書き方に関しては、こちらのページに詳しく載っていました。

文字を縦書きにするコード

では、次は実際に文字を縦書きにする設定をしていきます。

ストーリーボードだけでいける？

無理っぽいです。
でも文字の大きさや色はストーリーボードで指定すればいいと思います。

TTTAttributedLabelの機能を使ってコードで指定

こちらのサイトを参考にさせていただきました。

objectice-cの方のコードが詳しく説明してあるので、わかりやすいですね。
これを参考に、以下のように実践してみました。

（１）TTTAttributedLabelとしてLabelの定義をしておく。
（２）Labelの細かい定義はストーリーボードで行う。（文字の大きさとか色とか）
（３）ラベルを90°回転させる
（４）表示する文章の初期設定を指定する
（５）文章を縦書きに変更する（.setText）

ラベルを90°回転させる部分は、Xcodeバージョン進化によって、次のように書き換えました。

// ラベルを90°回転させる
        let angle = (Double.pi)/2
        FirstWordLabel.transform = CGAffineTransform(rotationAngle: CGFloat(angle))

方向が縦になっただけで文字自体が回転しない場合

方向が縦になっただけで文字自体が回転しない場合は、以下の一文に注目です。

let angle = M_PI/2

この部分で注意アラートが出ます。

'M_PI' is deprecated: Please use 'Double.pi' or '.pi' to get the value of correct type and avoid casting.

let angle = (Double.pi)/2と、指示通りに書き換えれば、大丈夫でした。

文章を改変したい時は、変数を定義しておく

表示する文章を「FirstSerifutext」などと定義しておいて、その「FirstSerifutext」を改変していくようにします。
それをsetTextで縦にすればOKです。

文字入力の細かい調整

文字入力の細かい調整は、この記事では書きません。
Labelの定義をしていけば、調整できますね。

（文字に関しての課題）
・文章をデフォルトは入れておいて、フィールドから取得して更新できるようにする
・文字を入れて、エンター押すと他が消えるのはなぜか
・Label自体の位置の設定（Auto Layout）
・Label自体の大きさは（ストーリーボードで入力すればいい）
・キーボードを閉じる必要がある
・文字を入力した時に自動スクロールする