スマホゲームの「マッチ3D」の攻略サイト（マッチ3D攻略 研究所）をサブドメインで作ってますが、縦型のゲーム動画(mp4)をYouTubeにアップして、Daily Challenges という記事で公開してみました。
動画の編集は昔何かで買ってほとんど使って無かった PowerDirector 17 ですが、実施した手順をメモしておきます。
使用環境
2022/10/11現在の自分の環境は以下です。
| iphone 11 Pro Max | iOS 15.6.1 |
| Windows | Windows 10 Pro 21H2 |
| Power Director | 17.0.2514.2 |
作成した縦型ゲーム動画(mp4)
以下は YouTube にアップした動画のリンクを貼ってます。
いつも音無しでゲームしてるので、音楽はフリーのものを付けてます。
以下は iphone で録画した元ファイルと、編集して YouTube にアップした上記のmp4ファイルの情報です。
| ファイル形式 | 元ファイル(mp4) | 編集後ファイル(mp4) |
| 画像サイズ | 888 x 1920 | 720 x 1280 |
| アスペクト比 | 約9:19 | 9:16 |
| フレームレート | 55 fps | 30 fps |
| 時間 | 4:08 | 3:03 |
| ファイルサイズ | 436 MB | 97.2 MB |
YouTubeで縦型動画のアスペクト比は明確には書かれて無いですが 9:16 が一般的なようです。
iphone 11 Pro Max の画面は約 9:19 とかなり縦長になっているため、上下をカットするなどの工夫がいります。
時間やフレームレートが違いますが、ファイルサイズはだいぶ小さくなったようです。
ゲーム動画をmp4で録画
iphone でゲーム動画をmp4で録画
自分はマッチ3Dは通常 iphone で遊んでますが、iphone で動画の取得方法は以下。
- 設定 → カメラ → フォーマット で「互換性優先」を選択。※動画がmp4になる
- 画面録画(動画)：画面右上から下にスワイプしてコントロールセンターを開き録画ボタン(二重丸)を選択、録画停止はサイドボタン(右)でスリープが簡単
- 録画された動画は mp4 でアルバムに追加される
マッチ3Dでは通常のゲームと別に Daily Challenges という1日に1面増えるゲームがあり、こちらは色や形状などを同じもので揃えたりと面白い面が多いです。
特に同じ色の面は難しいし面白いので、途中から動画を残すようになりました。
- Daily Challenges のメニューで、一旦、ゲーム画面からホーム画面に戻る
- 画面録画を開始して、ゲーム画面に戻り、ゲーム開始
- ゲーム終了後、広告が面倒なので、広告が始まったらサイドボタン(右)で録画終了
iphone からPCへ動画を転送
iphoneからPCへの写真やビデオの転送はいくつか方法がありますが、USBケーブルで接続して大量に送ると途中でエラーになったり不安定で昔から苦労してました。
現在、自分が安定して転送できるオススメの方法はUSBメモリを使う方法です。
自分の場合は Transcend の JetDriveGo という製品で、USB3.1 と Lightning の両方が使えるUSBメモリを使ってますが、残念ながら現在は販売終了しています。
今も売ってる製品で安心なメーカーだと SanDisk の iXpand でしょうか。
「iXpand Drive」という専用アプリを使って、前回バックアップした後からの差分バックアップなどができるようです。
ちなみに複数端末で使う場合は保存先のフォルダ名を変えるとのこと。
ということは巨大な動画ファイルを友達に渡したい時、iXpand 経由で渡すこともできそうですね。
あとは iXpand に入ってる動画や音楽をそのまま再生できるようで、Amazon Fire TV 経由でTVで表示なんかもできるんだとか。
以降、iphone からPCにファイルを転送済でPC上に変換したい動画(mp4)がある前提で記載します。
動画(mp4)を PowerDirector で編集する
フリーソフトでも mp4 を編集できるものはあるようですが、せっかく持ってるので今回は PowerDirector 17 を使ってみました。
ちなみに PowerDirector の最新は PowerDirector 365 で1年ライセンスのサブスクになったようです。PowerDirector 21 が永続ライセンスの最後の版のようです。
バージョン毎の差に何があるか確認して、特に新しい機能がいらないようであれば古い版を購入するのでも良いと思います。
また、他に動画ソフトを持っていれば安い乗換え版が使えると思うので調べてみましょう。
ファイル読み込み
PowerDirector を起動すると以下の画面が出るので、9:16 を選択して「タイムラインモード」を選択します。
PowerDirector の編集画面が表示されたので、エクスプローラーから編集したい mp4 ファイルをドラッグ＆ドロップで下のタイムラインの 1. の先頭（00;00;00;00）に入れると、動画ファイルが表示されました。
前後の不要な部分を削除（トリミング）
トリミングの機能もあるようですが、自分はカットしたい位置で動画を分割して、不要な方の動画を削除するやり方でやってます。
以下は後半の不要部分を削る場合です。
- Ctrl を押しながらマウスのホイールを動かすと下のタイムテーブルの幅が変わるので最大まで広げる（コマで表示される）
⇒ または左下のバーをマウス左ボタンで(＋)の最大に変更する - タイムラインの下のバーをマウス左ボタンで動かして分割したい辺りに移動、分割したい位置の時間の表記があるあたりをクリック（右上の画面に表示が出る）
- 上メニューで [編集]⇒[現在時間で分割]
- 分割された不要な方を右クリックして [削除] で不要な部分を削除
画像の拡大・縮小
iphone 11 Pro Max の動画はアスペクト比が約9:19なので、9:16で出力すると左右に黒いエリアができてしまいます。
ゲーム動画を見ると上下に不要なエリアがあるので、動画のオブジェクトを少し拡大して上下の不要なエリアが切れるようにしてみます。
広告表示をモザイク
再生して動画を確認してみると、ゲーム画面で下に広告が表示されていることに気付きました。
広告なので、そのままでも問題は無いですが気になるので消しておこうと思います。
モザイクは「fx」(エフェクト)にあるので、モザイクをかけたい動画のオブジェクトの fx のエリアに drag & drop すると使えます。
「モザイク」をダブルクリックすると「エフェクトの設定」が出るので細かい設定を行います。
「マスク」でモザイクのエリアを設定。
モザイクをかけたい期間を調整して完成。
その他の方法としては「テキスト」のオブジェクトを配置して文字の背景に色をつけて透過度無しにするなどができそうです。
音楽を付ける
マッチ3Dは音を出すのもできますが、自分は通常音無しでゲームしてます。
音無しで動画をアップするのも何なので、何か適当に音楽を付けてみます。
動画はトリミングして約3分なので、約3分の音楽を探すことにしました。
PowerDirector でオーディオのボリュームやエフェクトも編集できそうですが、今回はちょうど3分の曲を見つけたので、とりあえず音は編集せずにそのまま利用しました。
動画は YouTube に上げるので音楽は著作権フリーでないといけませんが、無料で著作権フリーの音楽が提供されてる代表的なサイトは以下でしょうか。
- YouTubeオーディオライブラリー
参考）YouTubeのオーディオライブラリーとは？使い方やBGMの活用方法、選び方について解説！ - NCS
参考）著作権フリーで曲が使えるNCSとは？ダウンロード方法も解説！ - soundcloud
参考）Soundcloudで著作権フリーの音楽を無料でダウンロードする方法
今回は、YouTubeオーディオライブラリーで「ダンス＆エレクトロニック」「2:50以上」「帰属表示が不要」でフィルタをして、「Polymetric Juggling」という曲(Polymetric Juggling - DivKid.mp3)を「ダウンロード」しました。
ダウンロードした音楽(mp3)ファイルをタイムラインの 2 の音声エリアに配置。
1 の音声は念のためにミュートにしておきました。
右上のプレビューで再生してみて想定通りの動画になっているか確認しておきましょう。
動画(mp4)ファイル出力
「出力」を選択して、必要に応じてサイズ、フレームレートを選択して「開始」。
今回は 720x1280/30p を選択しました。
出力が完了すると出力フォルダ配下にmp4ファイルが作成されています。
自分の環境では約3分の動画作成で約1分45秒かかりました。
作成された動画が想定通りか確認します。
補足に記載しましたが、自分の場合、VLCメディアプレイヤーを使って確認したところ、動画の下が切れていたので悩みましたが、Windows Media Player や chrome で確認すると切れてませんでした。
試しにそのまま mp4 を出力したところ下が切れた動画が出力されて原因がわからず、数日悩みました。。
結果、原因は使っているVLCメディアプレイヤーのバグ？のようで、Windows Media Player や chrome では正常に表示されることがわかりました。。
※VLCメディアプレイヤーは10/22の最新3.0.17.4にアップしましたが同じ現象でした
VLCメディアプレイヤーだと下が切れて見える
Windows Media Player だと切れてませんでした
chrome でも切れずに正しく表示されました
YouTube へ動画をアップロード
YouTube へ動画をアップロードするやり方は検索するといろいろ出て来るので、ここでは既にYouTubeチャンネルを持っていてアップロードしたことある前提とします。
また、動画は一般公開はせずにブログから見れるようにしたいと思います。
YouTube Studio にログインして動画をアップロード
YouTube Studio にログインして、右上の「作成」を選択。
「動画のアップロード」が出るので、作成した動画(mp4)ファイルを drug & drop でアップロードが始まります。
動画の詳細設定
アップロードすると「動画の詳細」の設定画面になります。
とりあえず以下を設定して「次へ」。
- タイトル（必須）：daily challenges 20200709 green
- 説明：（必須ではないので今回は空欄にしました）
- サムネイル：そのままだと自動で動画から作成させるようです。縦型動画でもサムネイルは横型(1280x720)のようなので自分で作成して設定。WebPは使えないのでJPGで作成しました。
- 再生リスト：（必須ではないので今回は設定せず）
- 視聴者：特に問題は無いため「はい、子ども向けです」を選択
「動画の要素」で字幕や終了画面などを追加できるようですが、特に不要なので「次へ」。
「チェック」では著作権に問題があるかのチェック結果が表示されるので「問題は検出されませんでした」を確認して「次へ」。
最後に「公開設定」ですが、今回は「限定公開」としました。
動画リンクを右のボタンでブログに貼ると、ブログからは動画が見れますが、YouTube の検索では出て来ない動画となります。
「保存」すれば、YouTube への動画のアップは終了です。
YouTube 動画を WordPress の記事に貼る
YouTube 動画を WordPress の記事に貼るやり方は検索すると出て来て4通りほどあるようです。
YouTube 埋め込みブロックの場合
最初は以下のように「YouTube の埋め込みブロック」を使って、YouTube へアップロードした時の動画リンクを貼ってみました。
特に問題は無いのですが、iphone で見ると画像が粗いことが気になりました。
カスタムHTMLブロックでオプション指定する場合
WordPressに動画・YouTubeを埋め込む方法を解説！おすすめプラグインも紹介 の記事に「4．動画終了時の関連動画を非表示にする」にあり、余計な画像が出るのはあまり良く無いので「カスタムHTMLブロック」にしてオプション指定をすることにしました。
YouTube へアップロードした時の動画リンクを chrome で開くと普通に動画の画面が出るので、「共有」⇒「埋め込む」で動画埋め込みのコードをコピーします。
WordPress で「カスタムHTML」ブロックを作成し、上記でコピーしたコードを貼り付けて、以下のオプションを追加しました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/q7xUZl_ad4I?loop=1&playlist=q7xUZl_ad4I&hd=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
オプションは、WordPressに動画・YouTubeを埋め込む方法を解説！おすすめプラグインも紹介の「4．動画終了時の関連動画を非表示にする」にあるもの ＋ 強制的に高画質にする hd=1 を設定してみました。
関連動画が表示されず動画がループするようになったのですが、iphone で見るとデフォルトの画質は悪く、設定で画質を 720p にすると綺麗になります。
とりあえず完成
まだ iphone で見た時の画質は解決できてないですが、とりあえず以上で iphone で録画したゲーム動画をブログに貼ることができました。
コメント