homppe
This guide is currently available in Japanese only. An English version is coming soon.

ガイドメニュー

背景動画の挿入方法

ブログやWebサービスに動画を貼り付けようとしたとき、次のようなURLを求められることがあります。
https://example.com/video.mp4
これは、動画ファイルそのものを開くMP4の直リンクです。
ホムっぺでも動画を挿入する場合、MP4の直リンクが必要です。
ここでは、MP4の直リンクを無料で取得するところから、実際にホムっぺで作成したサイトに動画を差し込むやり方を解説していきます。

① Cloudflareのアカウントを作る
まず、お使いのブラウザ(ChromeやSafariなど)で「Cloudflare」と検索かけ、cloudflareのサイトをクリック。
動画挿入手順1

サイトにアクセスできたら、右上赤枠部分の「ログイン」をクリック。動画挿入手順2

ここでアカウント登録を行います。動画挿入手順3
登録ができたら、右上の赤丸部分をクリック。日本語に設定するとわかりやすいです。動画挿入手順4
② MP4直リンク取得準備
左メニューの「計算する」をクリック。動画挿入手順5
同じく左メニューの「従業員とページ」をクリック。動画挿入手順6
右上の「アプリケーションを作成する」をクリック。動画挿入手順7
赤枠部分の「静的ファイルをアップロードしてください」をクリック。動画挿入手順8
fileかfolderをクリックし、対象の動画をアップする。ドラッグ&ドロップでもアップできます。動画挿入手順9
アップされるとこのような表示になるので、内容が正しければ「Deploy」をクリック。動画挿入手順10

③ アップした動画を公開し、MP4リンクを取得
Deploy後、1分ほど待つと更新されるので、右上の「訪問」をクリック。更新されてなければ、更新されるまでお待ちいただいて、再度「訪問」をクリック。
動画挿入手順11
更新されると、このように対象の動画がネット上にアップされる。動画挿入手順12
アップされたリンクをコピーして、URLの末に「/動画のファイル名.mp4」を付け足して検索かけると、MP4の直リンクで対象の動画を見ることができる。これでMP4の直リンクの取得が完了です。動画挿入手順13動画挿入手順14

④ ホムっぺのAI編集で、動画を差し込む
ホムっぺに戻り、動画を差し込みたい対象のセクションで「AI編集」をクリック。
動画挿入手順15
赤枠の指示内容に「このセクションの背景に、(取得したMP4の直リンクを貼り付ける)を使用して」と入力。動画挿入手順16
指示内容入力できたら、赤枠部分の「修正を実行」をクリック。動画挿入手順17
修正が完了すると、このように動画が差し込まれます。動画挿入手順18
プレビューでみても反映されてます。ぜひ試してみてください!動画挿入手順19