動くGIFのチュートリアルを作ってみた #Swift

はじめに

アドベントカレンダー3日目は新潟県十日町市で開発したアプリまちかどギルドについてです。
開発時に色々と大変なことがあったのですが、その中の一つの動くチュートリアルを作った時のことについて書きます。

※どんなアプリなのかはこちらの動画をご確認ください。

動くチュートリアル

下記のようなチュートリアルを作成しました。

GIFをiOSアプリで再生

GIFを再生しているのですが、iOSアプリで再生するのは結構めんどくさいです。
なぜならGIFを簡単に再生する方法がXcodeでは提供されていないからです。
そのため下記のような方法でGIFを細切れの画像(UIImage)に変換して、それをパラパラ漫画のように再生しています。

Swift

guard let gifFile = Bundle.main.path(forResource: fileName, ofType: "gif"),
     let data = NSData(contentsOfFile: gifFile),
     let cgImageSource = CGImageSourceCreateWithData(data, nil) else {
         return []
}

return (0...CGImageSourceGetCount(cgImageSource)).flatMap{ CGImageSourceCreateImageAtIndex(cgImageSource, $0, nil) }.map{ UIImage(cgImage: $0) }

こだわった点

見終わった感を出すため、ページをスクロールすると今見ていたGIFは途中でも最後の画像になるようにしました。
新しく開くページは必ず最初から再生されるようにしています。
またGIFを細切れの画像に変換する処理は少し重いため、必要最低限の回数で処理しています。
例えば下記のように画像の最初と最後、枚数をキャッシュして変換を何度もしなくて良いようにしています。
UIImageViewから取ってきたら良いと言われるかもしれませんが、次の項目の困ったことを解決するためにそれができませんでした。

Swift

tutorialItems.enumerated().forEach { i, tutorialItem in
    var images = tutorialItem.images
    let tutorialImageInformation = TutorialImageInformation(first: images.first, last: images.last, count: images.count)

    ....

}

困ったこと

リリース後に発覚したのですが、古いデバイス(iPhone 4s、iPhone 5s、初期のiPad)だと落ちることがわかりました。。
原因はUIImageViewに細切れの画像を持っていたためです。
そこで再生しているGIFの画像以外は持たないようにしました。
シンプルに下記のような感じで画像を解放しています。

Swift

imageView.animationImages = []

今後の課題

今回はこれでよかったのですが、おそらく長い時間のGIFだと落ちるかもっさりします。。

最後に

こうしてできたチュートリアルをGitHubから確認できます。
もしよかったら見てください。ついでにスター付けてもらえると嬉しいですw

余談

新潟県十日町市は縁もゆかりもないところでしたが、皆さまにあたたかくしてもらいました。
正直都会にしか住みたくないと思っていましたが、今は田舎の魅力にとりつかれていますw
とても良いところですので、もし良かったら皆さんも行ってみてください。個人的には夏がオススメです。