0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【SwiftUI】で背景に動画を流す方法

Posted at

🪄 はじめに
SwiftUIでも動画を背景として再生することができます。
アプリの世界観を一気に高めたいときや、リラックス系・夜系アプリ(例:「夜音 - Yoruoto」)などにぴったりです。
今回は プロジェクトへの動画追加 → コードで再生 → 自動ループ までをすべて解説します。

🧱 Step 1. プロジェクトに動画ファイルを追加する
Xcodeの左側ナビゲーターで 「Assets.xcassets」 ではなく、プロジェクトルート(YourAppName)をクリック
右クリック → “Add Files to ‘YourAppName’...” を選択
.mp4 動画ファイルを選んで追加(例:wave_background.mp4)
✅ 「Add to targets」に現在のアプリがチェックされていることを確認(これ超重要)
💡 追加後、Xcodeのプロジェクト内で wave_background.mp4 が表示されればOK。
これで Bundle.main.url(forResource: "wave_background", withExtension: "mp4") からアクセスできるようになります。

🧩 Step 2. 背景動画を再生するViewを作る
VideoBackgroundView.swift を新規作成し、次のコードを貼ります👇
スクリーンショット 0007-10-24 16.08.34.png

🌌 Step 3. SwiftUI画面で背景に使う
たとえば HomeView.swift のような画面で次のように使えます👇
スクリーンショット 0007-10-24 16.10.03.png

🎨 Step 4. 動画とUIをなじませるコツ
.resizeAspectFill:黒帯が出ず、端末全体にきれいに表示
.ignoresSafeArea():Safe Areaを無視してフルスクリーンに
.shadow(radius:) や .background(Color.black.opacity()) を使うと文字が見やすくなる

⚙️ Step 5. 動画を切り替えたい場合
複数の動画を使いたい場合は、enum で管理するのがおすすめ👇
スクリーンショット 0007-10-24 16.11.45.png

そして HomeView 側で:
スクリーンショット 0007-10-24 16.19.51.png
※エラーにはならないので気にしないでください。

完成イメージ※これは静止画ですが本来はこれが動く形になります。
Simulator Screenshot - iPhone 16 - 2025-10-24 at 16.23.12.png

🚀 おわりに
SwiftUIでもほんの数行で動く背景動画が実現できます。
App Storeでもよく見る「静かな背景が動くアプリ」は、ほとんどこの仕組みです。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?