ツバメビューアのフォルダ一覧ページの表示を速くした話

ツバメビューア v1.8.19 の更新からフォルダ一覧ページの高速表示が利用できるようになりました。デフォルトでは従来動作を尊重するため無効となっているため、設定ページから「高速なフォルダアイテム表示を使用」を有効にすることで利用できます。（将来バージョンではデフォルトに置き換わっているかもしれません）

この記事では、v1.8.19にて追加したフォルダ一覧ページを高速表示するために実装した手法について説明していきます。

ツバメビューア - Microsoft Store の公式アプリ

従来のフォルダ一覧の表示方法

アプリリリース当初から「フォルダ内にあるStorageItemを全部列挙してから」「表示範囲のアイテムだけサムネイル画像を読み込む」よう実装していました。

この実装方法は単純なコードで実現できるメリットはありつつも、表示対象が1000件を超えたあたりで既に表示までに数秒の待ちを感じるようになり、1万件超えると30秒以上も掛かる状況になっていました。

Incremental Loading はどうか？

よくある高速化は Incremental Loading と呼ばれるものです。ページ末尾が表示されそうになったら新しいコンテンツを読み込むスタイルです。

読み込みのタイミングを小分けに出来るため、ページ到達初回時の読み込みも素早くなります。表示する全体量がダイナミックに変化するWeb経由の検索結果表示などによく使われるかと思います。

この方法は今回のツバメビューアでは採用しませんでしたが、以前別の某ニッコリな動画を視聴するアプリを作った際には検索結果やランキング動画一覧などの表示手法として使っていました。

Index Access Loading

という名前の技法があるのかは知らないですが、今回ツバメビューアで採用しました。

ローカルなファイルシステムを対象にしている場合にフォルダ内アイテム取得をインデックス指定する方法です。

動作は単純に…

１．全体の表示対象となるアイテム数を取得し
２．表示範囲に入ったアイテムは自身に割り当てられたインデックスを使ってファイルシステムからアイテムを取得して表示を更新する

というものです。

従来では「最初にフォルダ内全部のStorageItemを取得する」ところにボトルネックがあったので、StorageItemを小分けに取得し、かつ最初に全体のアイテム数を取得することで（表示アイテムのサイズが事前に決定していることを前提条件としますが）ユーザーに対してフォルダ内のアイテム数の全体感をスクロールバーとして表現したいと考えました。

実装の差し替え作業としては当初より表示範囲に入ったらサムネイル画像を読み込む処理をしていたところに、インデックスを使ったStorageItem取得処理を加える形で実装しました。

実際のコードは以下で確認できますhttps://github.com/tor4kichi/TsubameViewer/blob/7de0a3e14940e468512716f7493d960e5c907501/TsubameViewer.Core/Models/ImageViewer/ImageCollectionContext.cs#L86

ツバメビューアはフォルダの他に.zipなどのアーカイブファイル内部もフォルダ表示する機能があるため、直接にStorageFolderを使う形ではなく IImageCollectionContext というインターフェイスでプロパティと処理の共通化を図りながら実装しています。