What metadata fields can I edit?

You can add or edit Title, Author/Artist, Copyright, Keywords, and Description/Caption. These are written as JPEG COM (Comment) segments in the output file, which are readable by most photo software.

Will my EXIF camera data be preserved?

Yes. The tool writes the new metadata as additional COM segments while keeping the original JPEG data intact, including any existing EXIF segments.

JPEG COM segments are a simple, universal way to embed text metadata that works without external libraries. PNG, WebP, and TIFF use different metadata formats that require more complex parsers and writers.

Is this the same as full IPTC/XMP editing?

No. Full IPTC/XMP editing requires dedicated software. This tool writes metadata as JPEG comment fields, which is readable by most tools but is not the same as structured IPTC or XMP blocks.

画像 EXIF 編集 —タイトル、説明、著作権を編集

🖼️

ここに JPEG をドロップするか、クリックして選択してください

JPEG のみ — メタデータの書き込みには JFIF/EXIF セグメントのサポートが必要です

この画像には EXIF データが検出されませんでした。

タイトル

作者 / アーティスト

著作権

キーワードカンマ区切り

説明 / キャプション

<div class="notice">
          ⚀新しいメタデータは Comment (COM) セグメントを使用して新しい JPEG コピーに書き込まれます。元の EXIF カメラデータ（絞り、GPS など）はそのまま保持されます。IPTC フィールドを完全に IPTC/XMP へ埋め込むには専用ソフトウェアが必要です。
        </div>
        <button class="save-btn" id="saveBtn">更新された JPEG をダウンロード</button>
      </div>
    </div>
  </div>

<div class="ds-seo-content">
  <section class="ds-seo-section">
    <h2 class="ds-seo-section__title">画像 EXIF 編集とは？</h2>
    <p>画像 EXIF 編集では、JPEG を開いて既存の EXIF カメラ情報（メーカー、モデル、日付、サイズ）を読み取り、説明的なメタデータフィールド（タイトル、作成者、著作権、キーワード、説明）を追加または編集できます。新しいメタデータは、ダウンロードしたファイルのコピーに JPEG COM セグメントとして埋め込まれます。</p>
  </section>
  <section class="ds-seo-section">
    <h2 class="ds-seo-section__title">画像 EXIF 編集の使い方</h2>
    <ol>
      <li>JPEG ファイルをドロップゾーンにドロップするか、クリックして参照してください。</li>
      <li>サマリーパネルに表示される既存の EXIF データを確認します。</li>
      <li>メタデータフィールド（タイトル、作成者、著作権、キーワード、説明）を入力します。</li>
      <li>「更新された JPEG をダウンロード」をクリックして、編集したファイルを保存します。</li>
    </ol>
  </section>
</div>

<div class="ds-related-tools">
  <h2 class="ds-related-title">関連ツール</h2>
  <div class="ds-related-grid">
    <a href="exif-viewer.html" class="ds-related-card"><span class="ds-related-icon">🔍</span><div><div class="ds-related-name">EXIF ビューアー</div><div class="ds-related-desc">任意の画像からカメラモデル、GPS、露出、完全な EXIF メタデータを読み取ります</div></div></a>
    <a href="remove-exif.html" class="ds-related-card"><span class="ds-related-icon">🛡️</span><div><div class="ds-related-name">EXIF 削除</div><div class="ds-related-desc">写真からGPS位置情報とEXIFメタデータを削除します</div></div></a>
    <a href="image-to-base64.html" class="ds-related-card"><span class="ds-related-icon">🔢</span><div><div class="ds-related-name">画像 Base64 変換</div><div class="ds-related-desc">任意の画像を Base64 文字列またはデータ URI に変換し、HTML/CSS への埋め込みに利用できます</div></div></a>
  </div>
</div>

<details class="ds-seo-more">
  <summary class="ds-seo-more__toggle">
    <span>画像メタデータを理解する</span>
    <span class="ds-seo-more__arrow">▾</span>
  </summary>
  <div class="ds-seo-more__body">
    <details class="ds-seo-collapse">
      <summary>例</summary>
      <div class="ds-seo-collapse__body">
        <div class="ds-seo-example">
          <div class="ds-seo-example__row">
            <span class="ds-seo-example__label">入力</span>
            <span class="ds-seo-example__value">photo.jpg（メタデータなし）</span>
          </div>
          <div class="ds-seo-example__row">
            <span class="ds-seo-example__label">出力</span>
            <span class="ds-seo-example__value">photo_edited.jpg（タイトル: Sunset | 作者: Jane Smith | 著作権: 2024）</span>
          </div>
        </div>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>一般的な使用例</summary>
      <div class="ds-seo-collapse__body">
        <ul>
          <li>オンラインで写真を共有する前に著作権情報を追加</li>
          <li>アーカイブ済み画像にタイトルと説明を付与</li>
          <li>JPEGファイルの作者クレジットを修正または追加</li>
          <li>写真を検索可能にするキーワードを追加</li>
        </ul>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>このツールを使う理由</summary>
      <div class="ds-seo-collapse__body">
        <ul>
          <li>写真を公開する前に著作権と作者情報を追加してください。</li>
          <li>既存のEXIF Artistタグがある場合、作者フィールドを事前入力します。</li>
          <li>非破壊 — 新しいファイルを作成し、元ファイルを上書きしません。</li>
          <li>100%ローカル —画像がアップロードされることはありません。</li>
        </ul>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>よくある質問</summary>
      <div class="ds-seo-collapse__body">
        <div class="ds-seo-faq-item"><strong>編集できるメタデータフィールドはどれですか？</strong><p>タイトル、作者/アーティスト、著作権、キーワード、説明/キャプションを追加または編集できます。これらは出力ファイル内にJPEG COM（Comment）セグメントとして書き込まれ、ほとんどの写真ソフトウェアで読み取れます。</p></div>
        <div class="ds-seo-faq-item"><strong>EXIFのカメラデータは保持されますか？</strong><p>はい。このツールは新しいメタデータを追加のCOMセグメントとして書き込み、既存のEXIFセグメントを含む元のJPEGデータをそのまま保持します。</p></div>
        <div class="ds-seo-faq-item"><strong>JPEGのみなのはなぜですか？</strong><p>JPEG COMセグメントは、外部ライブラリなしで動作する、テキストメタデータを埋め込むためのシンプルで汎用的な方法です。PNG、WebP、TIFFは異なるメタデータ形式を使用しており、より複雑なパーサーとライターが必要です。</p></div>
        <div class="ds-seo-faq-item"><strong>これは完全なIPTC/XMP編集と同じですか？</strong><p>いいえ。完全な IPTC/XMP 編集には専用ソフトウェアが必要です。このツールはメタデータを JPEG コメントフィールドとして書き込むため、ほとんどのツールで読み取れますが、構造化された IPTC または XMP ブロックとは異なります。</p></div>
      </div>
    </details>
  </div>
</details>

</div>
<script>
  'use strict';

let originalBuf = null;
  let origFileName = 'image.jpg';

// Minimal EXIF reader for display only
  function readExif(buf) {
    const dv = new DataView(buf);
    const fields = {};
    if (dv.getUint16(0) !== 0xFFD8) { document.getElementById('exifReadout').textContent = 'Not a valid JPEG.'; return; }
    let pos = 2;
    while (pos < dv.byteLength - 1) {
      const marker = dv.getUint16(pos);
      if (marker === 0xFFE1) {
        const segLen = dv.getUint16(pos + 2);
        const id = String.fromCharCode(...new Uint8Array(buf, pos + 4, 4));
        if (id === 'Exif') {
          const tiff = pos + 10;
          const le = dv.getUint16(tiff) === 0x4949;
          const ifd0 = tiff + dv.getUint32(tiff + 4, le);
          const n = dv.getUint16(ifd0, le);
          for (let i = 0; i < n; i++) {
            const eOff = ifd0 + 2 + i * 12;
            const tag = dv.getUint16(eOff, le);
            const type = dv.getUint16(eOff + 2, le);
            const count = dv.getUint32(eOff + 4, le);
            if (type === 2) {
              const dataOff = count > 4 ? tiff + dv.getUint32(eOff + 8, le) : eOff + 8;
              let s = '';
              const bytes = new Uint8Array(buf, dataOff, count);
              for (let j = 0; j < count; j++) { if (!bytes[j]) break; s += String.fromCharCode(bytes[j]); }
              if (tag === 0x010F) fields['Make'] = s.trim();
              if (tag === 0x0110) fields['Model'] = s.trim();
              if (tag === 0x0132) fields['DateTime'] = s.trim();
              if (tag === 0x013B) fields['Artist'] = s.trim();
            }
            if (tag === 0xA002 && (type === 3 || type === 4)) {
              fields['Width'] = type === 3 ? dv.getUint16(eOff + 8, le) : dv.getUint32(eOff + 8, le);
            }
            if (tag === 0xA003 && (type === 3 || type === 4)) {
              fields['Height'] = type === 3 ? dv.getUint16(eOff + 8, le) : dv.getUint32(eOff + 8, le);
            }
          }
        }
        pos += 2 + segLen;
        continue;
      }
      if ((marker & 0xFF00) !== 0xFF00) break;
      if (marker === 0xFFD9) break;
      pos += 2 + dv.getUint16(pos + 2);
    }

document.getElementById('exifReadout').innerHTML = parts.length
      ? parts.join('  ·  ')
      : 'No readable EXIF fields found. You can still add metadata fields below.';
  }

// Write metadata as JPEG COM segments
  document.getElementById('saveBtn').addEventListener('click', () => {
    if (!originalBuf) return;

const fields = {
      title: document.getElementById('mTitle').value.trim(),
      author: document.getElementById('mAuthor').value.trim(),
      copyright: document.getElementById('mCopyright').value.trim(),
      keywords: document.getElementById('mKeywords').value.trim(),
      description: document.getElementById('mDesc').value.trim()
    };

const comments = Object.entries(fields)
      .filter(([, v]) => v)
      .map(([k, v]) => `${k.charAt(0).toUpperCase() + k.slice(1)}: ${v}`);

// Build new JPEG: keep SOI + existing segments, inject COM before SOS/EOI
    const encoder = new TextEncoder();
    const parts = [];
    // SOI
    parts.push(new Uint8Array([0xFF, 0xD8]));
    // COM segments
    for (const comment of comments) {
      const data = encoder.encode(comment);
      const segLen = data.length + 2;
      const seg = new Uint8Array(4 + data.length);
      seg[0] = 0xFF; seg[1] = 0xFE;
      seg[2] = (segLen >> 8) & 0xFF; seg[3] = segLen & 0xFF;
      seg.set(data, 4);
      parts.push(seg);
    }
    // Rest of original JPEG (skip original SOI, keep everything else)
    parts.push(originalBuf.slice(2));

const totalLen = parts.reduce((s, p) => s + p.length, 0);
    const out = new Uint8Array(totalLen);
    let offset = 0;
    for (const p of parts) { out.set(p, offset); offset += p.length; }