FlutterKaigi 2023 - Flutterで構築する漫画ビューア 補足

こんにちは。エキサイト株式会社 モバイルアプリエンジニアの克です。

このたび、FlutterKaigi 2023に登壇しました。

fortee.jp

speakerdeck.com

今回は、当日お話しできなかった内容をいくつか補足したいと思います。

画像の保存場所

発表では画像の保存場所としてアプリケーションのディレクトリを使用しましたが、実際にはもう少し検討する必要があります。
大まかにいうと、AndroidiOSも、アプリケーションディレクトリとキャッシュディレクトリの2箇所が候補になります。
アプリケーションディレクトリはアプリのデータの一般的な保存場所で、ここに保存したファイルは自動的にバックアップされます。再取得が可能なデータはバックアップするべきではないので、漫画の画像ファイルはバックアップから除外したほうがいいでしょう。
キャッシュディレクトリはキャッシュ用の保存場所で、ここに保存したファイルはバックアップされることはありません。ただし、OSによってファイルが削除される場合があるため、ファイルが存在するかを確認しながら運用する必要があります。
アプリケーションディレクトリで画像ファイルを自動バックアップから除外して運用するか、キャッシュディレクトリで常にファイルの確認をしながら運用するかというのがいいのかなと思います。

ImageProviderの進捗管理

画像を読み込んでいる間の進捗表示は、ImageのloadingBuilderで実装することができます。
この際に、進捗を表すImageChunkEventはImageProviderから提供されます。
ImageProviderを自作する場合は、このImageChunkEventの管理も行う必要があるため、忘れずに実装するようにしましょう。

edgeToEdgeのOSバージョン対応

SystemUiModeのedgeToEdgeは、Android 10以降でのみ使用可能なモードです。そのため、それ以下の場合には別の対応をする必要があります。
しかし、現在のFlutterではこれ以外の方法で操作をする方法が見つからず、ネイティブ側での実装が必要になるかもしれません。
また、対象のOSバージョンは古く今後も利用率は下がっていくため、edgeToEdgeが利用できない場合にはmanualでシステムUIを出しっぱなしにするという選択もありなのかなと思います。

見開き表示の実装方法

今回の発表では2枚の画像を連結して1枚の画像にしましたが、やり方によってはウィジェットを2つ並べて表示すれば画像を連結しなくても見開きページを実現することはできるかもしれません。 元のサービスの仕様で、画像を切り取って共有することができるというものがありました。そのため、1枚の画像として扱えたほうが都合が良かったのでこういった実装にしたという経緯もあります。

さいごに

やはりオフラインでのイベントは熱意と雰囲気が直に伝わってきますし、人と人との繋がりもあって非常にいいものだなと思いました。 イベントの開催にご尽力いただきました運営の皆様、セッションをお聞きいただいた皆様、ありがとうございました。

採用情報

エキサイトではエンジニアを随時募集しています。 興味がありましたらお気軽にご連絡いただければ幸いです。

www.wantedly.com