スマート埋め込み

PreviewFileのプレビューリンクをさまざまなシナリオで埋め込み、自動的に適応させる方法を学びます

PreviewFileの /p/xxx プレビューリンクはインテリジェントなリクエストソース検出をサポートしており、使用シナリオに基づいて最適なコンテンツ形式を自動的に返します。

コア機能

1つのプレビューリンクで、複数のユースケースに対応：

🖼️ <img> タグ内: 画像またはファイルタイプアイコンを返します
🎬 <video> タグ内: 動画またはプレースホルダーアイコンを返します
🎵 <audio> タグ内: 音声またはプレースホルダーアイコンを返します
📺 <iframe> タグ内: 埋め込みビューアー（PDF/動画/画像）を返します
🌐 ブラウザ直接アクセス: 完全なプレビューインターフェースを表示します

仕組み

PreviewFileはHTTPリクエストヘッダー（sec-fetch-dest, accept）を検出してリクエストソースを識別し、対応する形式のコンテンツをインテリジェントに返します。

使用シナリオ

1. IMG タグ - サムネイルとアイコン

Markdown、メール、ドキュメントでファイルプレビューを素早く表示します：

<img src="https://previewfile.dev/p/abc123" alt="ファイルプレビュー">

動作:

✅ 画像ファイル → 実際の画像を表示
✅ PDFファイル → 📄 PDFアイコンを表示
✅ 動画ファイル → 🎬 VIDEOアイコンを表示
✅ ドキュメントファイル → 📝 DOCアイコンを表示
✅ 期限切れ/見つからない → ⏰ エラーアイコンを表示

サポートされているアイコンタイプ:

ファイルタイプ	アイコン	拡張子例
Image	🖼️	jpg, png, gif, webp
Video	🎬	mp4, mov, avi, mkv
Audio	🎵	mp3, wav, aac, flac
PDF	📄	pdf
Document	📝	doc, docx, txt, md
Spreadsheet	📊	xls, xlsx, csv
Presentation	📽️	ppt, pptx, key
Archive	📦	zip, rar, 7z, tar
Code	💻	js, ts, py, java
Unknown	📎	その他のタイプ

実際の例:

<!-- Markdown -->
![請求書](https://previewfile.dev/p/invoice-2024)

<!-- HTML -->
<img src="https://previewfile.dev/p/contract-v2" width="200">

<!-- React -->
<Image src="https://previewfile.dev/p/design-mockup" alt="デザイン" />

2. VIDEO タグ - 動画再生

ウェブページに動画を直接埋め込みます：

<video src="https://previewfile.dev/p/demo-video" controls></video>

動作:

✅ 動画ファイル (mp4/mov/webm) → 動画を直接ストリーミング
✅ 非動画ファイル → ファイルタイプアイコンを表示
✅ 期限切れ → 410 Gone を返す

高度な設定:

<video 
  src="https://previewfile.dev/p/tutorial"
  controls
  autoplay
  muted
  loop
  width="800"
  height="450"
  poster="https://example.com/thumbnail.jpg"
>
  お使いのブラウザは動画の再生をサポートしていません。
</video>

3. AUDIO タグ - 音声再生

音声ファイル（ポッドキャスト、音楽、録音）を埋め込みます：

<audio src="https://previewfile.dev/p/podcast-ep1" controls></audio>

動作:

✅ 音声ファイル (mp3/wav/aac) → 音声を直接ストリーミング
✅ 非音声ファイル → ファイルタイプアイコンを表示

カスタムプレーヤー:

<audio 
  src="https://previewfile.dev/p/meeting-recording"
  controls
  preload="metadata"
>
  お使いのブラウザは音声の再生をサポートしていません。
</audio>

4. IFRAME - 埋め込みビューアー

埋め込みビューアーでファイルを表示します（PDF、動画、画像）：

<iframe 
  src="https://previewfile.dev/p/report-q4"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

サポートされているファイルタイプ:

✅ PDF: ネイティブブラウザPDFビューアー
✅ 動画: HTML5動画プレーヤー
✅ 画像: 全画面画像表示
❌ その他のタイプ: 「サポートされていません」メッセージを表示

レスポンシブ 16:9 コンテナ:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe 
    src="https://previewfile.dev/p/presentation"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

5. ブラウザ直接アクセス - 完全なプレビューページ

ユーザーがリンクをクリックするか、ブラウザ経由で直接アクセスした場合：

<a href="https://previewfile.dev/p/abc123" target="_blank">
  ファイルを表示
</a>

機能:

✅ ファイルメタデータ（名前、サイズ、タイプ）を表示
✅ アクセス統計（閲覧数、残り時間）を表示
✅ セキュリティインジケーター（透かし、ダウンロード制限）
✅ プレビューエリア（画像/動画/PDF）
✅ ダウンロードボタン（有効な場合）
✅ 埋め込みコード例

高度な使用法

1. 画像の遅延読み込み

ページの読み込みパフォーマンスを向上させます：

<img 
  src="https://previewfile.dev/p/large-image"
  loading="lazy"
  alt="大きな画像"
/>

2. エラーハンドリング

期限切れまたは見つからないファイルのフォールバックを提供します：

<img 
  src="https://previewfile.dev/p/abc123"
  onerror="this.src='https://placehold.co/600x400?text=File+Expired'"
  alt="プレビュー"
/>

3. JavaScriptによる動的埋め込み

// 動的画像
const img = document.createElement('img');
img.src = 'https://previewfile.dev/p/dynamic-file';
img.alt = '動的プレビュー';
document.getElementById('preview-container').appendChild(img);

// 動的動画
const video = document.createElement('video');
video.src = 'https://previewfile.dev/p/video-clip';
video.controls = true;
document.getElementById('video-container').appendChild(video);

4. レスポンシブCSS

埋め込みコンテンツがあらゆる画面サイズに適応するようにします：

img, video, audio, iframe {
  max-width: 100%;
  height: auto;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

5. 多言語サポート (Localization)

lang または locale クエリパラメータを追加することで、プレビューインターフェースの言語を強制的に指定できます。

サポートされている言語:

en: 英語
zh-CN: 簡体字中国語
zh-TW: 繁体字中国語
ja: 日本語

例:

<!-- 英語インターフェースを強制 -->
<iframe src="https://previewfile.dev/p/abc123?lang=en"></iframe>

<!-- 日本語インターフェースを強制 -->
<a href="https://previewfile.dev/p/abc123?lang=ja">リンク</a>

これにより、ユーザーのブラウザ設定に関係なく、エラーメッセージやUI要素が指定された言語で表示されるようになります。

ソーシャルメディア統合

Discord / Slack

リンクを貼り付けるだけで、リッチプレビューが自動的に行われます：

https://previewfile.dev/p/screenshot

GitHub README

![プロジェクトスクリーンショット](https://previewfile.dev/p/demo-screenshot)

<!-- またはサイズ指定のためのHTML -->
<img src="https://previewfile.dev/p/architecture" width="800" />

Notion

Markdown画像構文または /embed ブロックを使用します：

![デザインモックアップ](https://previewfile.dev/p/figma-export)

メール (HTML)

<a href="https://previewfile.dev/p/invoice-2024">
  <img src="https://previewfile.dev/p/invoice-2024" alt="Invoice" width="600" />
</a>

セキュリティポリシーへの影響

異なるアクセス方法は、セキュリティポリシーを異なる方法で尊重します：

ポリシー	ブラウザアクセス	HTML埋め込み
TTL期限切れ	「プレビュー期限切れ」メッセージを表示	エラーアイコンまたは 410 Gone を返す
ワンタイムリンク	「リンク使用済み」メッセージを表示	403 Forbidden を返す
ダウンロード無効	UIで右クリック無効	通常表示（ブラウザコントロール）
透かし	半透明の透かしを表示	ファイルタイプに依存

⚠️ 注意: インテリジェントルーティングはリクエストタイプに基づいて異なるコンテンツを返しますが、ファイルのダウンロード（ブラウザのネイティブ機能）を完全に防ぐことはできません。

アクセストラッキング

すべてのアクセス方法（ブラウザおよびHTML埋め込み）は以下を行います：

✅ viewCount をインクリメント
✅ TTLおよびワンタイムリンクポリシーを確認
✅ データベースに記録

これにより、ファイルがさまざまなプラットフォームでどのようにアクセスされているかを追跡できます。

埋め込み機能のテスト

1. テストページの使用

アクセス: http://localhost:3707/test-embed.html

以下を含む完全なインタラクティブテストインターフェースを提供します：

セクション 1: IMG タグテスト
セクション 2: VIDEO タグテスト
セクション 3: AUDIO タグテスト
セクション 4: IFRAME タグテスト
セクション 5: ブラウザ直接アクセス
セクション 6: 使用例

2. cURLの使用

# ブラウザアクセス（React UIを返す）
curl -H "sec-fetch-dest: document" https://previewfile.dev/p/abc123

# IMG タグアクセス（画像またはアイコンを返す）
curl -H "sec-fetch-dest: image" https://previewfile.dev/p/abc123

# VIDEO タグアクセス（動画またはアイコンを返す）
curl -H "sec-fetch-dest: video" https://previewfile.dev/p/abc123

# AUDIO タグアクセス（音声またはアイコンを返す）
curl -H "sec-fetch-dest: audio" https://previewfile.dev/p/abc123

# IFRAME アクセス（HTMLプレーヤーを返す）
curl -H "sec-fetch-dest: iframe" https://previewfile.dev/p/abc123

3. ブラウザDevToolsの使用

Networkパネルを開く
/p/abc123 にアクセス
リクエストヘッダーの sec-fetch-dest 値を確認
返されたコンテンツタイプを観察

FAQ

Q1: なぜ1つのルートで複数の機能をサポートするのですか？

A: Next.jsミドルウェアがHTTPリクエストヘッダー（sec-fetch-dest）を検出することで、システムはブラウザアクセスかHTMLタグ埋め込みかを自動的に識別し、適切なコンテンツを返します。

Q2: 埋め込まれたリンクは期限切れになりますか？

A: はい、プレビューセッションのTTL設定に従います。期限切れ後、ブラウザアクセスでは「プレビュー期限切れ」メッセージが表示され、HTMLタグ埋め込みではエラーアイコンが表示されるか、410 Goneが返されます。

Q3: プライベートファイルを埋め込むことはできますか？

A: はい。システムは、有効期限（通常は1時間または残りのTTLのいずれか短い方）付きのS3署名付きURLを生成します。

Q4: IMGタグが非画像ファイルにアクセスするとどうなりますか？

A: システムは、ファイル拡張子と対応する絵文字アイコンを表示するSVGファイルタイプアイコン（200x200px）を返します。

Q5: VIDEO/AUDIOタグが非動画/音声ファイルにアクセスするとどうなりますか？

A: 同様にSVGファイルタイプアイコンを返し、ファイルの種類の不一致によるページエラーを防ぎます。

Q6: IFRAME埋め込みはどのファイルタイプをサポートしていますか？

A: 現在、PDF、動画（MP4/MOV/AVIなど）、画像（JPG/PNG/GIFなど）をサポートしています。サポートされていないファイルタイプは「ファイルタイプはサポートされていません」というメッセージを表示します。

Q7: 埋め込みリンクの悪用を防ぐにはどうすればよいですか？

A: 以下の戦略を組み合わせて使用してください：

短いTTLを設定する（例：30分）
ワンタイムリンクを有効にする（oneTime: true）
viewCount を監視し、閾値を超えたら手動で無効にする
S3レイヤーでアクセス頻度を制限する

ベストプラクティス

1. 統一された `/p/[shortUrl]` を使用する

ブラウザアクセスと埋め込みアクセスを区別する必要はありません
システムが自動的に識別し、適切なコンテンツを返します
共有と統合を簡素化します

2. 合理的なTTLを設定する

一時的な共有：30～60分
短期使用：1～24時間
長期埋め込み：慎重に使用し、代わりにCDNを検討してください

3. 有効期限の処理

<img 
  src="https://previewfile.dev/p/abc123"
  onerror="this.src='https://placehold.co/600x400?text=File+Expired'"
  alt="Preview"
/>

4. レスポンシブデザインを使用する

img, video, audio, iframe {
  max-width: 100%;
  height: auto;
}

5. ファイルタイプアイコンのフォールバックを活用する

ファイルタイプが一致しなくても、フレンドリーなアイコンが表示されます
追加のエラーハンドリングロジックは不要です
ユーザーエクスペリエンスを向上させます

次のステップ

プレビューリンクをプログラムで作成する方法については、APIドキュメントを参照してください
さらなる保護対策については、セキュリティドキュメントをお読みください
ダッシュボードにアクセスして、すべてのプレビューリンクを管理してください

スマート埋め込み

On this page