Contents
1️⃣ はじめに
本稿は 自分が権利者であるか、公開設定された自分の動画 の 直接 MP4 URL を取得する手順をまとめたものです。
取得した URL はブログや社内ツールへの埋め込みなど 閲覧目的に限り 利用できます。
⚠️ 違法ダウンロード・再配布は厳禁 です。以下の「法的留意点」で詳しく説明しますので必ずお読みください。
2️⃣ 前提条件と法的留意点
| 項目 | 内容 |
|---|---|
| 対象動画 | 自分が投稿した動画、または自分のページで「公開」設定された動画。 |
| 必要な権限 | Facebook にログインした状態(ブラウザ・API 共通)。Graph API を利用する場合は pages_read_engagement と video_access が必須です。 |
| 公式情報 | - 開発者向けドキュメント: https://developers.facebook.com/docs/graph-api - Video エンドポイントリファレンス(v18): https://developers.facebook.com/docs/graph-api/reference/video |
| 利用規約の抜粋 | 「取得したメディア URL は、個人的な利用または Facebook が提供する埋め込みウィジェット以外で配布・販売してはならない」(Facebook Platform Terms 第5条)。 |
| 違反時リスク | アカウントの一時停止・削除、著作権侵害訴訟、罰金等。 |
重要ポイント
- 取得対象は必ず自分が権利者か公開設定されたものに限定すること
- 取得した URL は「閲覧」や「埋め込み」に限り使用し、ファイルそのものを保存・再配布してはいけません
- サードパーティのダウンロードサービスは公式には推奨されておらず、利用は自己責任です
3️⃣ 方法①:デスクトップブラウザの開発者ツールで取得
手順(Chrome / Edge / Firefox 共通)
- 対象動画ページにアクセスし、ログイン状態を確認
- キーボードショートカット
F12または右クリック → 「検証」で DevTools を開く - タブから Network(ネットワーク)→ フィルタで Media を選択
-
動画の再生ボタンを押すと、
.mp4へのリクエストが一覧に表示される -
Type 列が “media”、ステータスコードは
200が目安です。 -
URL に
fbcdn.netが含まれることが多いので、検索欄にmp4と入力すると絞り込みやすくなります。 -
該当リクエストを右クリック → Copy → Copy link address で URL を取得
- 必要に応じてテキストエディタへ貼り付け、保存または埋め込みコードに利用
📌 ポイント:開発者ツールはブラウザ側のキャッシュや広告ブロッカーが有効だとリクエストが隠れることがあります。必要なら「Disable cache」にチェックし、再読み込みしてください。
4️⃣ 方法②:Graph API(v18 以降)で video_url を取得
必要な権限・アクセストークンの作り方
| 手順 | 操作内容 |
|---|---|
| 1. アプリ登録 | Facebook 開発者コンソール (https://developers.facebook.com/) → 「My Apps」→「Create App」。タイプは「Consumer」か「Business」から選択。 |
| 2. トークン取得 | 「ツール」→「Access Token Debugger」へ移動し、User Token を生成。 権限に pages_read_engagement と video_access(※2024 年 10 月現在)を追加。 |
| 3. トークンの有効化 | デバッグ画面で「Extend Access Token」ボタンをクリックし、長期トークン(約60日)に変換。 |
📎 公式ドキュメント:https://developers.facebook.com/docs/facebook-login/access-tokens
API 呼び出し例
|
1 2 3 4 5 6 7 8 |
# Bash + curl (video-id と access_token は実際の値に置き換えてください) VIDEO_ID="1234567890123456" TOKEN="EAABsbCS1...yourLongLivedToken..." curl -G "https://graph.facebook.com/v18.0/${VIDEO_ID}" \ --data-urlencode "fields=video_url" \ --data-urlencode "access_token=${TOKEN}" |
成功時の JSON レスポンス例
|
1 2 3 4 5 |
{ "video_url": "https://video.xx.fbcdn.net/v/t42.1790-2/....mp4?...", "id": "1234567890123456" } |
JavaScript(Fetch)で取得するサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> const videoId = '1234567890123456'; const token = 'EAABsbCS1...yourLongLivedToken...'; fetch(`https://graph.facebook.com/v18.0/${videoId}?fields=video_url&access_token=${token}`) .then(r => r.json()) .then(d => { console.log('Direct URL →', d.video_url); // ここで <video> タグに貼り付ける等の処理を記述 }) .catch(e => console.error('API error:', e)); </script> |
留意点
video_access権限は 審査が必要 な場合があります。審査が通らないとエラー ((#200) Permissions error) が返ります。- API のバージョンは 毎年 4 月に更新 されるため、常に最新バージョン(執筆時点では v18)を使用してください。
5️⃣ 方法③:モバイル環境で取得する手順
| デバイス | 推奨方法 |
|---|---|
| Android (Chrome) | USB デバッグと Chrome のリモートデバッグ (chrome://inspect/#devices) を利用し、PC 側の DevTools で Network → Media を確認。 |
| iOS (Safari) | Safari の Web インスペクタは Media フィルタが限定的なので、Graph API または PC で同ページを開く方法が現実的。 |
Android Chrome リモートデバッグの流れ
- スマホ側 設定 → 開発者向けオプション → USB デバッグ を有効化
- PC の Chrome にて
chrome://inspect/#devicesを開き、USB 接続した端末が表示されることを確認 - 対象の Facebook タブ右側にある Inspect ボタンをクリック
- デスクトップと同様に Network → Media で
.mp4リクエストを検索し、URL をコピー
💡 iOS ユーザーは「PC の Chrome/Edge で同じ動画 URL にアクセス」すれば手順①がそのまま適用できます。
6️⃣ サードパーティツールの取扱い(例:FDown.net)
| 項目 | コメント |
|---|---|
| 公式方針 | Facebook の Platform Terms は「第三者サービスを通じて取得したメディアデータの保存・再配布」を禁止しています。 |
| 利用シーン | 「自己所有動画のバックアップ」目的であっても、ツール側が動画ファイルを自社サーバーに転送するため プライバシーリスク が伴います。 |
| 推奨対応 | 可能な限り 公式手段(DevTools / Graph API) を使用し、外部サービスの利用は最小限に抑えること。どうしても利用したい場合は、利用規約・プライバシーポリシーを熟読し自己責任で 行ってください。 |
注意:本記事ではサードパーティツールの具体的な使用方法は記載していません。紹介はあくまで「存在する」ことと、リスクだけを伝える目的です。
7️⃣ 取得した URL の安全な活用例
7.1 HTML5 <video> タグで埋め込む(シンプル版)
|
1 2 3 4 5 |
<video controls width="100%" poster="https://example.com/thumbnail.jpg"> <source src="取得した_direct_url.mp4" type="video/mp4"> お使いのブラウザは video タグに対応していません。 </video> |
controls→ 再生・音量調整ボタンを表示poster→ サムネイル画像(任意)
7.2 JavaScript で動的埋め込み(背景動画や自動再生向け)
|
1 2 3 4 5 6 7 8 9 |
<div id="bgVideo"></div> <script> const url = '取得した_direct_url.mp4'; document.getElementById('bgVideo').innerHTML = ` <video autoplay muted loop playsinline style="width:100%;height:auto;"> <source src="${url}" type="video/mp4"> </video>`; </script> |
playsinlineはモバイルでの自動再生を有効化します。
7.3 アクセシビリティと SEO 対策
| 項目 | 実装例 |
|---|---|
| 字幕 | <track kind="captions" src="captions.vtt" srclang="ja" label="Japanese"> を追加 |
| ARIA ラベル | <video aria-label="商品紹介動画"> のように説明文を付与 |
| 構造化データ | JSON‑LD VideoObject に contentUrl(取得した URL)と uploadDate 等を記載し、検索エンジンに認識させる |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "商品紹介動画", "description": "新製品の特徴を解説した公式動画です。", "thumbnailUrl": "https://example.com/thumb.jpg", "contentUrl": "取得した_direct_url.mp4", "uploadDate": "2024-09-15T08:00:00+09:00" } </script> |
8️⃣ まとめと今後の留意点
- 取得は自分が権利者か公開設定された動画に限る
- 公式手段(DevTools・Graph API)を優先し、サードパーティツールはリスクを理解した上で自己責任で使用
- 取得した URL は「閲覧・埋め込み」に留め、保存や再配布は絶対に行わない
- Facebook の API バージョンは年2回更新される ので、定期的に公式ドキュメントをチェックし、権限やエンドポイントの変更に対応すること
✅ 正しく手順を踏めば、自分の動画を安全に外部サイトへ埋め込む ことができます。
🚨 法的リスクを回避したい場合は、必ず Facebook の利用規約・開発者ポリシー を最新情報として確認してください。
本ガイドは執筆時点(2024 年 10 月)に基づく情報です。法律やプラットフォームの方針は変更される可能性がありますので、利用前に必ず公式サイトで最新版をご確認ください。