[iOS]WKWebViewでローカルの画像や動画が表示されない対応

目的

UIWebViewのDeprecated対応はもう必須となりました。

ということで、
アプリ内で使われているUIWebViewをWKWebViewに対応したところ、WebView内で利用していたローカル画像や動画が表示されなくなったのでその対応メモです。  

ちなみにWebViewでhtmnl言語のimgタグなどで画像を利用している状況です。

環境

• Xcode Version 12.5
• Swift 5

参照サイト

DevelopersIO　[Swift] そう、あの頃の僕はただWKWebViewにアプリ内に保存された画像ファイルを表示させたかったんだ

対応の前に

そもそも画像を表示するのになんでWebViewでhtmlなんか使うんや！とのツッコミがあります。

どうやら一時期、アニメーションGIFをアプリで利用する場合、UIWebViewでhtmlで表現する手法が流行った!?ようです。

個人的見解で、真相は不明ですが、
特にObjective-C世代のアプリでは、アニメーションGIFを手軽に導入する術は無かったのかもしれないです。

対応メモ

対応策は3つあると思いました。

• 画像はBASE64形式に直して、htmlで使い続ける
• アニメーションGIFに対応した、ライブラリを利用する
• アニメーションGIFを画像に分解して、UIImageの配列に入れてタイマーで回す

画像はBASE64形式に直して、htmlで使い続ける

元からhtmlを使っていたのであれば、この手法が一番既存アプリへの影響度は少ないと思いますが。
ちょっと辛い面もあります（後述）。

参照サイトの通り、セキュリティの観点からかWKWebViewではhtmlで読み込むファイルは素で利用できないようです。
なんで表示されないかずっと悩んでいたので、参照サイトには助かりました。

具体的なプログラムは参照先を御覧ください。

//ファイルのパスを求める
URL形式でしたらpathとかlastPathComponentオプションを利用して求められるかも

//URL形式からData形式に変換
FileManagerを使うか、NSDataのcontentsOfFIleを利用する

//Base64形式にする
base64EncodedStringを使う

//ファイルの拡張子を取得する
URL形式でしたらpathExtensionとかでしょうか

以下の
「拡張子」 にはアニメーションGIFでしたらgif、動画でしたらmp4とかでしょうか。
↑のようにコマンドで取得するようにしました。
*は自分の環境では使えませんでした。
「Base64形式ファイルデータ」 に、↑のbase64EncodedStringで返ってきた変数を入れます。

<img src='data:image/「拡張子」/base64,「Base64形式ファイルデータ」' ... />
<video src='data:video/「拡張子」;base64,「Base64形式ファイルデータ」' ... />

アニメーションGIFに対応した、ライブラリを利用する

SwiftGif
や
LBGIFImage
ライブラリを使ってUIImageViewやUIImageに変換して、表示させます。
個人的にはこの対応が一番手軽でしたが、上記ライブラリが最近更新されなくなっているので、今後のOSアップデートによる対応必要性が不安ですね。

アニメーションGIFを画像に分解して、UIImageの配列に入れてタイマーで回す

アニメーションGIFはFinderアプリで1枚ずつ画像で確認でき、保存できると思うので、分解します。
アプリでUIImageの配列を作り1枚ずつ入れ込みます。

画面表示用のUIImageViewを作り、初期は uiImageView.image = uiImageList[0]を設定して、NSTimerを使って、一定時間ごとにUIImageをカウントアップさせていくものです。

NSTimerで呼ぶ関数は以下のようなカンジでしょうか。

@objc
func timerXX() {
    if uiImageList <= 画像数 {
        imagecount = 0
    }
    uiImageView.image = uiImageList[imagecount]
    imagecount += 1
}

対応メモは以上です。