この記事はVASILY DEVELOPERS BLOGにも同じ内容で投稿しています。よろしければ他の記事も御覧ください。
iQONのiOSアプリはまだ全てObjective-Cで記述されています。
Swiftへの移行については「たいしてパフォーマンスが上がるわけでもないし…」と思って渋っていました。
そんな中、オフィスの移転をきっかけに来客の受付システムをiPadアプリで作ることになりました。
スクラッチでアプリを作るのならSwiftで、ということでSwiftで作りました。
今回は、受付システムの社員を呼び出すデータ通信と、トップページの時計に使ったCADisplayLink実装を紹介します。
完成品 (動画)
まずは動画をご覧ください。
呼び出したい社員を選択すると、twilio から各個人の携帯電話に自動音声の電話がかかってきます。
電話呼び出しと同時にSlackにも通知が飛ぶようになっています。
実装
データの流れは下記のようになっています。
アプリからはherokuのAPIをリクエストするだけなので、エラーハンドリングも簡単に済みました。
データ通信
- iPadから呼び出したい社員を選択すると、アプリからHerokuのAPIにリクエスト
- HerokuのAPIがSlackとtwilioにリクエスト
- 社員のケータイに電話(自動音声)とSlackの通知が飛びます
アプリの実装
ネイティブ側では下記のようなことをやっています。
- Swift製通信ライブラリのAlamofireを使用
-
CAGradientLayerでiPhoneのロック解除のようなシマーアニメーションを実装 - 時計のアニメーションを
CADisplayLinkを使って正確に描画 -
UICollectionViewFlowLayoutをオーバーライドして、セル追加アニメーションを実装 - 呼び出しリクエスト中に
AudioToolbox.frameworkで効果音を無限ループさせる - 通信中の波形アニメーションも
CADisplayLinkを使ってアニメーション - アプリアイコンは基本的に見せないので、identiconでデザイン工数ゼロ
その中の一つ、今回はCADisplayLinkの実装を紹介します。
時計のアニメーションとCADisplayLink
アナログ時計のような無限に動き続けるアニメーションを実装するとき、NSTimerやdispatch_afterを使って0.01秒ごとに位置を修正する処理を実行するような実装が考えられます。
受付システムのアナログ時計アニメーションの実装には、CADisplayLinkを使用しています。
CADisplayLinkは画面のリフレッシュレートと同期して描画させるタイマーオブジェクトです。
vs NSTimer
NSTimerを使ったり、dispatch_afterをループしても同じような処理を実装できます。
例えば、NSTimerのインターバルを1秒に設定して、その処理の実行時間が1.5秒だった場合、処理実行中は次のタイマー処理がスキップされ、処理が実行されるのは2秒間隔になってしまいます。(いわゆるフレームスキップ)
これはCADisplayLinkでも同じことです。CADisplayLinkの場合でもスキップはありますが、あくまでも呼び出されるタイミングは画面の更新に同期するのでアニメーションを使うには効率が良いのです。
CADisplayLinkの実装
CADisplayLinkオブジェクトを生成時にターゲットとメソッド名を登録します。
生成したCADisplayLinkオブジェクトをNSRunLoopのメインループに追加すると、画面描画のリフレッシュごとに登録したメソッドが呼ばれます。
let displayLink = CADisplayLink(target: self, selector: Selector("update:"))
displayLink.addToRunLoop(NSRunLoop.currentRunLoop(), forMode: NSRunLoopCommonModes)
円を描く実装
実装の一部を一つのViewControllerにまとめました。
GitHubにサンプルプロジェクトを置いてあるので動かしてみてください。
import UIKit
class ViewController: UIViewController {
private let secondLayer = CAShapeLayer()
override func viewDidLoad() {
super.viewDidLoad()
// 円のレイヤー
let frame = view.frame
let path = UIBezierPath()
path.addArcWithCenter(
CGPointMake(CGRectGetMidX(frame), CGRectGetMidY(frame)),
radius: frame.width / 2.0 - 20.0,
startAngle: CGFloat(-M_PI_2),
endAngle: CGFloat(M_PI + M_PI_2),
clockwise: true)
secondLayer.path = path.CGPath
secondLayer.strokeColor = UIColor.blackColor().CGColor
secondLayer.fillColor = UIColor.clearColor().CGColor
secondLayer.speed = 0.0 // ※1
view.layer.addSublayer(secondLayer)
// 円を描くアニメーション
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0.0
animation.toValue = 1.0
animation.duration = 60.0
secondLayer.addAnimation(animation, forKey: "strokeCircle")
// CADisplayLink設定
let displayLink = CADisplayLink(target: self, selector: Selector("update:"))
displayLink.frameInterval = 1 // ※2
displayLink.addToRunLoop(NSRunLoop.currentRunLoop(), forMode: NSRunLoopCommonModes)
}
func update(displayLink: CADisplayLink) {
// timeOffsetに現在時刻の秒数を設定
let time = NSDate().timeIntervalSince1970
let seconds = floor(time) % 60
let milliseconds = time - floor(time)
secondLayer.timeOffset = seconds + milliseconds // ※3
}
}
※1 secondLayer.speed = 0.0
CALayerのspeedを0にして、自動でアニメーションが動かないようにする
※2 displayLink.frameInterval = 1
1フレームごとに処理を実行する
※3 secondLayer.timeOffset = seconds + milliseconds
アニメーションの進捗具合を設定する
CALayerの speed = 0.0 の状態で、timeOffsetを操作しているので、円が一周しても、また最初から描画が始まって無限に動き続けます。
Swiftで書いてみて思ったこと
メリット
- コード量が減る
- .h/.m → .swift 一つになります
- 型推論
- Objective-Cでの不便なことが改善
- 文字列の扱い、Switch、enum
- Optional Value (?, !)
- ビルドせずに静的解析でバグに気付くことができます
- iOSエンジニアに以外の可読性向上
- Objective-Cの独特な記法がなくなって、iOSエンジニア以外でもなんとなく理解できるぐらい読みやすくなりました
- これがきっかけでAndroidエンジニアがplaygroundを触るようになりました
- 普段アプリをObjective-Cで作っている人には、たいして難しくない (簡単というわけでもないですが)
- 何より書いていて楽しい
デメリット
- Xcodeでメソッドの定義に飛ぶショートカット(Cmd+Ctrl+J)があまり効かない
- optionキーを押しながら、コードをクリックして回避しています
- ライブラリの利用が面倒
- 今回Alamofireをgitのsubmoduleを使ってインストールしましたが、かなり面倒でした
- CocoaPodsで扱えるようになるのは、0.36以降の予定です。正式リリースが待たれます
メリットの方が大きいと思ったので日々のコードも新しいものからSwiftで書いていこうと思います。