静的ファイルをサイトで管理

第5版作成 2026/09/25 04:09最終更新 2026/10/02 11:50（日本時間）

確認バージョン1.5.8.1

カスタムのアイコン画像などを wwwroot/ に置くと、バージョンアップのたびにバックアップと再配置が必要になります。記録テーブルの添付ファイル項目にアップロードすれば、ファイルはデータベースの Binaries テーブルに保存され、/binaries/{GUID}/show で参照できます。アプリケーションファイルの更新の影響を受けないため、再配置が不要になります。

背景

バージョンアップでは既存のアプリケーションファイルを新しいファイルで置き換えるため、wwwroot/ 以下に独自に置いたファイルが上書き・削除されることがあります。そのため毎回次の作業が必要になり、再配置を忘れるとファイルが参照できなくなります。

1. カスタムファイルをバックアップする
2. バージョンアップを実施する
3. カスタムファイルを再配置する

管理方法	バージョンアップ時の対応
静的ファイル（wwwroot/ 配下）	ファイルの再配置が必要
管理サイト（データベース保存）	対応不要

管理サイトの設計

設定項目	値	理由
サイトの種別	記録テーブル	添付ファイル項目を使用するため
アクセス権	全員: 読取のみ	ログイン済みの全ユーザーがファイルにアクセスできるようにする
アクセス権	管理者: 管理権限	ファイルの登録・更新は管理者のみ行う
読取専用の場合は画面に表示しない	有効	読取権限のみの一般ユーザーのサイトメニューに表示しない

管理者のサイトメニューには表示されるのですぐに管理でき、一般ユーザーには見えないので業務の邪魔になりません。

セットアップ手順

1. 管理フォルダを作る: ルートフォルダ（または管理系の親フォルダ）に「静的ファイル管理」など用途が分かる名前のフォルダを作ります。
2. アクセス権を設定する: フォルダの管理画面でアクセス権を設定します。
   • 不要なアクセス権を削除する
   • 「全員」（または全ユーザーが所属する組織）に「読取」権限を付与する
   • 管理者（または管理者グループ）に管理権限を付与する
3. 「読取専用の場合は画面に表示しない」を有効にする: フォルダの管理画面の「サイトの設定」タブで有効にします。
4. 記録テーブルを作る: 管理フォルダの中に記録テーブルを作り、用途に合わせた名前（「サイトアイコン」「スタートガイドアイコン」など）を付けます。エディタで添付ファイル項目を有効にし、ファイル数に応じて項目を追加します。1 レコードの複数の添付ファイル項目にまとめても、ファイルごとにレコードを分けてもかまいません。
5. ファイルをアップロードする: レコードを作成して添付ファイル項目にアップロードします。PNG、JPEG、SVG などの画像以外のファイルもアップロードできます。
6. GUID を確認する: 添付ファイルのリンクを右クリックして URL をコピーすると /binaries/{GUID}/download 形式の URL が得られます。この {GUID} 部分がファイルの識別子です。

INFO

「全員」に読取権限を付けるのは、添付ファイルの URL にアクセスするには読取権限が必要なためです。

ファイルの参照方法

URL	用途
/binaries/{GUID}/show	画像の表示（<img> タグや CSS の background-image など）
/binaries/{GUID}/download	ファイルのダウンロード

WARNING

添付ファイルの URL は認証が必要です。プリザンターにログイン済みのユーザーしかアクセスできません。

活用例

拡張スタイルのサイトアイコン

サイト種別ごとのアイコンを CSS の background-image で指定する拡張スタイル（サイトアイコンとサイト種別の表示を両立する方法【別解】）では、静的ファイル（/images/icon-site-*.svg）の代わりに管理サイトの添付ファイル URL を指定できます。GUID は実際にアップロードしたファイルのものに置き換えてください。

.conditions .reference {
    display: none !important;
}

/* サブディレクトリで運用している場合はurlのパスの書き換えが必要 */
.nav-site:not(.to-parent):not(:has(.site-icon img)) {
    background-position: left 0.5em bottom 0.5em;
    background-repeat: no-repeat;
    background-size: 2em;

    .title {
        padding-left: 2em;
        padding-right: 2em;
    }

    &.sites {
        background-image: url("/binaries/a1b2c3d4e5f6/show");
    }

    &.results {
        background-image: url("/binaries/1a2b3c4d5e6f/show");
    }

    &.issues {
        background-image: url("/binaries/b1c2d3e4f5a6/show");
    }

    &.wikis {
        background-image: url("/binaries/c1d2e3f4a5b6/show");
    }

    &.dashboards {
        background-image: url("/binaries/d1e2f3a4b5c6/show");
    }
}

拡張スタートガイドのアイコン

拡張スタートガイドの ImgNameLight / ImgNameDark は、内部で /images/ を先頭に付けてパスを生成します。../binaries/{GUID}/show と指定すると /images/../binaries/{GUID}/show となり、ブラウザがパスを解決して /binaries/{GUID}/show にアクセスします。確認したソースでは、画像のパスは ApplicationPath + images/ + 指定値を小文字にしたもので組み立てられます（SiteUtilities.cs、Locations.cs）。サブディレクトリ配置でも同じ指定で動き、GUID が小文字になってもダウンロード時に大文字へ変換されるため問題ありません（BinaryUtilities.cs）。

{
    "ImgNameLight": "../binaries/a1b2c3d4e5f6/show",
    "ImgNameDark": "../binaries/f6e5d4c3b2a1/show"
}

別の方法: サイト画像

アイコン用途ならサイト画像も使えます。各サイトの管理画面からアップロードし、次の URL で参照します。

/items/{SiteId}/binaries/siteimageicon/
/items/{SiteId}/binaries/siteimagethumbnail/

WARNING

サイト画像はアップロード時に PNG 形式にリサイズされます（ImageData.cs）。SVG をそのまま使いたい場合は添付ファイルを使ってください。

関連ページ

• ナビゲーションとテーマ
• バージョンアップ
• ファイルのみのアップロード・大容量ファイル