記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">&lt;img src=&quot;data:image/png;base64,...&quot;&gt;</code> のような&nbsp;Base64埋め込み方式 は HTML が肥大化し、ブラウザキャッシュも効きにくいという欠点があります。 これを ASP.NET MVC のコントローラー経由で画像を配信する方法に変えるには、<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">FileResult</code> を使って画像を返すエンドポイントを作り、<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">&lt;img src=&quot;...&quot;&gt;</code> でそのURLを指定します。<h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 18px / 24px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">実装例</h2><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">1. コントローラーで画像配信アクションを作成</h3><pre data-priority="2" style="color: rgb(17, 17, 17); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">using System;
using System.Web.Mvc;

public class ImageController : Controller
{
 /// &lt;summary&gt;
 /// DBやファイルから画像を取得して返す
 /// &lt;/summary&gt;
 /// &lt;param name=&quot;id&quot;&gt;画像ID&lt;/param&gt;
 public ActionResult GetKamokuImage(int id)
 {
 try
 {
 // 例: DBから画像バイト配列を取得
 byte[] imageBytes = GetImageFromDatabase(id); // 実装は別途
 if (imageBytes == null || imageBytes.Length == 0)
 {
 return HttpNotFound(); // 画像がない場合
 }

 // MIMEタイプを適切に設定（例: PNG）
 return File(imageBytes, &quot;image/png&quot;);
 }
 catch (Exception ex)
 {
 // ログ出力など
 return new HttpStatusCodeResult(500, &quot;画像取得エラー&quot;);
 }
 }

 private byte[] GetImageFromDatabase(int id)
 {
 // 実際にはDBアクセスコードを書く
 // ここではダミーでnullを返す
 return null;
 }
}
</code></pre><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">2. View 側で <code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">&lt;img&gt;</code> タグを変更</h3><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Base64埋め込みではなく、コントローラーのURLを指定します。<pre data-priority="2" style="color: rgb(17, 17, 17); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">@foreach (var item in Model)
{
 &lt;img src=&quot;@Url.Action(&quot;GetKamokuImage&quot;, &quot;Image&quot;, new { id = item.Id })&quot;
 alt=&quot;@item.KamokuName&quot;
 style=&quot;width: 40px; height: auto;&quot; /&gt;
}
</code></pre><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">3. この方式のメリット</h3><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">HTMLサイズ削減：Base64文字列をHTMLに埋め込まないため軽量化。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">ブラウザキャッシュ有効：同じURLならブラウザがキャッシュを利用。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">遅延読み込み可能：<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">loading=&quot;lazy&quot;</code> などの属性が使える。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">セキュリティ制御：コントローラーで認証・認可チェックが可能。</li></ul><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">4. キャッシュ制御（任意）</h3><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">もし画像が頻繁に変わらない場合は、HTTPヘッダーでキャッシュを有効化できます。<pre data-priority="2" style="color: rgb(17, 17, 17); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetMaxAge(TimeSpan.FromDays(30));
return File(imageBytes, &quot;image/png&quot;);
</code></pre><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">✅ この方法にすれば、 <code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">&lt;img src=&quot;data:image/png;base64,...&quot;&gt;</code> のような長いHTMLを避けつつ、 ASP.NET MVC の <code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">FileResult</code> を使って効率的に画像を配信できます。<p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a>

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる