添付ファイルのサムネイル付き一覧（ライブラリ表示）
添付ファイル項目は「ファイル名 (サイズ)」を縦に並べるだけで、画像でもサムネイルは出ません。このページは、画像はサムネイル、それ以外は拡張子に応じたアイコンを並べる「ライブラリ表示」を足す本体改修の設計メモです。本体の標準機能ではありません。
画像をクリックしてモーダルで開くだけなら、スクリプトで実現できます（画像をプレビューモーダルで表示する）。
前提にした現行実装
添付ファイルの HTML
1 件ごとに、虫眼鏡アイコン（/binaries/{guid}/show を別タブで開く）、ファイル名のリンク（ダウンロード）、削除ボタンを出します（HtmlControls.cs）。
サムネイルがあるのは説明項目の画像だけ
Binaries テーブルには Thumbnail・Icon 列がありますが、使い方は種類で違います。
| BinaryType | サムネイル |
|---|---|
SiteImage | Regular・Thumbnail・Icon の 3 サイズを作る |
TenantImage | Logo だけ |
Images・TenantManagementImages（説明項目などに貼った画像） | 項目の ThumbnailLimitSize、なければ BinaryStorage.json の ThumbnailLimitSize が 0 より大きいとき、そのサイズで作る（BinaryUtilities.cs） |
Attachments（添付ファイル項目） | 作らない |
/binaries/{guid}/show はファイルを FileContentResults.Download で取り出します。?thumbnail=1 を付けるとサムネイルを返すのは BinaryType が Images のときだけです（FileContentResults.cs、L295-L310）。
アイコンのフォント
Google の Material Symbols（Outlined・Rounded・Sharp）が本体に入っています（Implem.PleasanterFrontend/wwwroot/src/plugins/material-symbols/）。<span class="material-symbols-sharp">attach_file</span> のように、アイコン名の文字列で表示します。
設計
サムネイルはアップロード時に作る
| アップロード時に作る | 表示するときに作る | |
|---|---|---|
| 表示の速さ | 速い | 初回は遅い |
| アップロード | 画像の縮小の分だけ遅くなる | 変わらない |
| 容量 | サムネイルの分だけ増える（小さい PNG） | 作り方次第 |
| 既存の仕組み | Thumbnail 列と ImageData の縮小をそのまま使える | キャッシュの仕組みを新しく作る |
アップロード時に作ります。説明項目の画像（UploadImage）と同じ形です。
図を読み込み中…
- 画像かどうかは MIME タイプで判定し、ImageSharp で読めなければサムネイルを作らずに元ファイルだけ保存します。アップロード自体は失敗させません。
- サムネイルは PNG に作り直すので、元の画像のメタデータは入りません。
- 既存の添付ファイルにはサムネイルがありません。後で一括で作るより、サムネイルが無いものはアイコンで表示するのが簡単です。
サムネイルの配信
FileContentResults.Download の switch で、Attachments のときも thumbnail のクエリを見て Bytes(..., thumbnail: true) を呼ぶようにします。Thumbnail 列が空なら元のファイルを返す動きは Images と同じです。
| URL | 返すもの |
|---|---|
/binaries/{guid}/show | 元のファイル |
/binaries/{guid}/show?thumbnail=1 | サムネイル（無ければ元のファイル） |
/binaries/{guid}/download | ダウンロード |
画像以外はアイコンで表す
サムネイルが無いときは、拡張子から Material Symbols のアイコンを選びます。
| 拡張子 | アイコン名 |
|---|---|
.pdf | picture_as_pdf |
.doc・.docx | description |
.xls・.xlsx | table_chart |
.ppt・.pptx | slideshow |
.txt・.csv・.log | text_snippet |
.zip・.rar・.7z・.gz・.tar | folder_zip |
.mp4・.avi・.mov・.webm・.mkv | movie |
.mp3・.wav・.ogg・.flac・.aac | audio_file |
.html・.css・.js・.ts | code |
.json・.xml・.yaml・.yml | data_object |
| その他 | attach_file |
表示
<div class="attachment-library">
<div class="attachment-library-item">
<a class="attachment-thumbnail" href="/binaries/{guid}/show" target="_blank">
<img src="/binaries/{guid}/show?thumbnail=1" alt="{ファイル名}" loading="lazy">
<!-- サムネイルが無い場合 -->
<!-- <span class="material-symbols-sharp">picture_as_pdf</span> -->
</a>
<a class="file-name" href="/binaries/{guid}/download">{ファイル名}</a>
<span class="file-size">({サイズ})</span>
</div>
</div>.attachment-library {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.attachment-thumbnail {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.attachment-thumbnail img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.attachment-thumbnail .material-symbols-sharp {
font-size: 48px;
}従来のリスト表示と切り替えられるように、項目の設定で表示方法を選べるようにします。
改修するファイル
| ファイル | 内容 |
|---|---|
Libraries/Images/ImageData.cs | 添付ファイル用のサムネイル・アイコンの作成 |
Models/Binaries/BinaryUtilities.cs・BinaryModel.cs | 添付ファイルの保存時にサムネイルを入れる |
Libraries/Responses/FileContentResults.cs | Attachments でも ?thumbnail を返す |
Libraries/HtmlParts/HtmlControls.cs | ライブラリ表示の HTML と、拡張子からのアイコンの選択 |
Libraries/Settings/Column.cs | 表示方法の設定 |
wwwroot/src/scripts/generals/attachmentsevents.js・スタイル | 表示の切り替えとスタイル |