スマホゲームの「マッチ3D」の攻略サイト（マッチ3D攻略 研究所）をサブドメインで作ってますが、新しいアイテムが増えた時に表示される動画を NEW PACK OPENED という記事にアップしてます。
これまではアニメーションGIFでアップしてましたが、アニメーションWebPの方がサイズが小さくて画像が綺麗なのを知って、少しづつWebPへ乗せ換え中です。
フリーのツールでスマホの動画(mp4)からアニメーションGIF/WebPを作る手順をメモしておきます。
使用環境
2022/10/11現在の自分の環境は以下です。
| 項目 | 内容 | |
|---|---|---|
| iphone 11 Pro Max | iOS 15.6.1 | |
| Windows | Windows 10 Pro 21H2 | |
| Chrome | 105.0.5195.127 | |
| GIMP | 2.10.30 |
作成したアニメーションGIF/WebP
以下はmp4の元ファイル(左)と作成したアニメーションGIF(中)/WebP(右)です。
※ mp4はメニューでフルスクリーン、GIF/WebPはクリックすると大きなサイズで見れます。
大きくして見るとわかりやすいですが、WebPが1670万色以上に対してアニメーションGIFは256色なのでグラデーションの色がなだらかでは無いです。
以下は上記のファイルの比較情報です。
サイズや枚数を考えると mp4 が効率が良いですが、wordpress では少し使いづらいです。
アニメーションGIFよりWebPの方がファイルサイズが小さいのに綺麗なのでWebPにするべきですね。
| ファイル形式 | 元ファイル(mp4) | アニメーションGIF | アニメーションWebP | |
|---|---|---|---|---|
| 画像サイズ | 888 x 1920 | 450 x 800 | 450 x 800 | |
| フレームレート | 30 fps | 10 fps | 10 fps | |
| 枚数(時間) | 約 180 枚 | 58 枚(約6秒) | 60 枚(6秒) | |
| 圧縮率 | 不明 | 指定無し | 70 ％ | |
| ファイルサイズ | 3,034 KB | 2,630 KB | 871 KB |
ゲーム動画をmp4で録画
iphone でゲーム動画をmp4で録画
自分はマッチ3Dは通常 iphone で遊んでますが、iphone で動画の取得方法は以下。
- 設定 → カメラ → フォーマット で「互換性優先」を選択。※動画がmp4になる
- 画面録画(動画)：画面右上から下にスワイプしてコントロールセンターを開き録画ボタン(二重丸)を選択、録画停止はサイドボタン(右)でスリープが簡単
- 録画された動画は mp4 でアルバムに追加される
マッチ3Dでは不定期にアイテム追加が開始され、1ゲーム終了毎に4％づつゲージが溜まり、100％で NEW PACK OPENED の画面が表示されます。
NEW PACK OPENED の画面ではOKを押すまで8つのアイテムがクルクル回り続けるので、以下の手順で動画を録画してます。
- 一旦、ゲーム画面からホーム画面に戻る
- 画面録画を開始して、ゲーム画面に戻る
- NEW PACK OPENED ではアイテムが6秒で1回転するので2回転ちょいくらいを録画
- サイドボタン(右)で録画終了
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)がある前提で記載します。
ちなみに自分が今使ってるのは台湾の Maktar社 の Qubii Pro です。microSDカードが使えて便利。microSDカードは別売りですがセットで売ってるショップもあるようです。
自分が使ってるmicroSDカードはTranscendの256GBです。
iphone 15 に対応した Qubii EX というのが出てるようですね。スピードが速くなったせいかメモリは内蔵版のようです。
ちなみに Qubii シリーズも最後にバックアップしたファイル以降のファイルをバックアップしてくれるので、念のために256GBのmicroSDカードにしましたが、たいして使っておらず、64GBくらいでも充分でした。
最初の1回目が大きいかもしれないですが、バックアップ中は iphone に表示されてるアプリで任意のところで停止できます。一度停止して Qubii から PC に移動後、また続きを取ればよいです。PCに移動する前提であれば、画像ファイルの合計が64GB以上でも、複数人で使うのでも、メモリは64GBでも問題ないです。
動画(mp4)をアニメーションGIFに変換する場合
JavaScript の Web サイトで mp4 → アニメーションGIFに変換
「mp4 アニメーションGIF」で検索すると Web 上に mp4 をアップロードすると変換されたアニメーションGIFがダウンロードできるサイトや、変換ツールなどが出てきます。
安心なサイトかわからないと変換するためとは言え mp4 を変換サイトにアップロードするのは少し抵抗がありますし、無料の変換ツールはマルウェアが仕込まれてるかもしれないので不安です。
自分が使ってるオススメの Web サイトは以下です。
このサイトは JavaScript で変換しているので少し遅いですが、サイトにファイルはアップロードはせず自分のマシン上で変換してくれるので安心です。
上記のサイトで具体的にマッチ3Dの NEW PACK OPENED 動画を変換する手順は以下です。
- Chrome で動画のGIFアニメ変換のサイトにアクセス
- 画面上に変換したい mp4 ファイルをドラッグ＆ドロップ
- Step1配下に動画が表示されるのでスライダーをクリックして変換したい開始位置に移動し『現在の時間を「開始時間」とする』を選択
- マッチ3Dの NEW PACK OPENED は6秒で1周するので、フレームレートを10枚/秒にする場合、開始時間＋5.90秒付近に移動し『現在の時間を「終了時間」とする』を選択
- フレームレート(fps)：10枚/秒
- Step2. GIFアニメの設定 ⇒ 幅：480px、高品質にチェック、色数：256色、繰り返し回数：0、表示時間：10
- 「変換の実行」を選択、しばらく待つと作成されたGIFアニメが表示される
- 想定通りであればGIFアニメの上の「ダウンロード」でダウンロード
- 想定と違った場合は設定を修正して再度「変換の実行」
この段階で 480 x 1038 のアニメーションGIFファイルが作成されました。
ダブルクリックで開いて想定通りの無限ループのアニメになるか確認します。
GIMP2 でサイズ調整とトリミング
フリーの画像編集ソフトの GIMP2 はアニメーションGIF/WebP に標準で対応しているので、画像を編集するのと同じ操作でアニメーションGIF/WebP の編集ができます。
GIMP2で検索するといろんなダウンロードサイトが出ますが本物のサイトや信頼できるサイトじゃない場合、マルウェアなどが仕込まれてる可能性があります。信頼できないサイトからはダウンロードしないようにしましょう。
wordpress にアップするのに横幅を 450 にして上下の不要部分をトリミングしたいと思います。
- GIMP2 に編集したいアニメーションGIF をドラッグ＆ドロップ
- フレーム1(100ms)～フレーム60(100ms) などのレイヤーになって表示される
- 画像 ⇒ 画像の拡大・縮小 で幅を450に変更して「拡大・縮小」（高さは自動で変わる）
- 全フレームのサイズが変わる
- 画像 ⇒ キャンバスサイズの変更 で高さを800、オフセットで Y：-50 で「リサイズ」
- ファイル ⇒ 名前を付けてエクスポート で newpack_20221006.gif など、gifの拡張子で適当なファイル名を設定して「エクスポート」
- 警告は「Crop」、「画像をGIF形式でエクスポート」のダイアログで、「アニメーションとしてエクスポート」にチェックを入れて「エクスポート」
450 x 800 のアニメーションGIFファイルが作成されました。
ダブルクリックで開いて想定通りの無限ループのアニメになるか確認します。
mp4 からアニメーションGIFを作成する方法は以上です。
動画(mp4)をアニメーションWebPに変換する場合
JavaScript の Web サイトで mp4 → アニメーションWebPに変換
アニメーションGIFと同様に JavaScript で変換してくれるオススメの Web サイトは以下です。
残念ながら、このサイトでは開始位置、終了位置は数字を手入力となっているため、別の方法で開始位置の時間を調べないといけないです。
mp4 のプレイヤーで時間が小数点2桁まで出るのを探すのも面倒なので、自分の場合は開始位置を探すのに先に記載したアニメーションGIFの変換サイトを使ってます。笑
具体的にマッチ3Dの NEW PACK OPENED 動画を変換する手順は以下です。
- まずは動画のGIFアニメ変換で開始位置の秒(少数点2桁)を確認しておく
- 動画からアニメWebP生成にアクセスして「動画ファイルを選択」で変換したいファイルを選択
- 開始位置(秒)：確認した開始位置を小数点2桁までで指定、終了位置(秒)：開始位置＋5.90、フレームステップ(秒)：0.1、フレーム時間(秒)：0.1 で「アニメWebP生成」を選択、しばらく待つと作成されたアニメWebPが表示される
- 想定通りであればアニメWebPの下の「アニメWebPダウンロード」でダウンロード
- 想定と違った場合は設定を修正して再度「アニメWebP生成」
このサイトではリサイズは無いので 888 x 1920 のアニメーションWebPファイルが作成されました。
ダブルクリックで開いて想定通りの無限ループのアニメになるか確認します。
GIMP2 でサイズ調整とトリミング
この工程はアニメーションGIFとほぼ同じです。
フリーの画像編集ソフトの GIMP2 はアニメーションGIF/WebP に標準で対応しているので、画像を編集するのと同じ操作でアニメーションGIF/WebP の編集ができます。
GIMP2で検索するといろんなダウンロードサイトが出ますが本物のサイトや信頼できるサイトじゃない場合、マルウェアなどが仕込まれてる可能性があります。信頼できないサイトからはダウンロードしないようにしましょう。
wordpress にアップするのに横幅を 450 にして上下の不要部分をトリミングしたいと思います。
- GIMP2 に編集したいアニメーションWebP をドラッグ＆ドロップ
- フレーム1(100ms)～フレーム60(100ms) などのレイヤーになって表示される
- 画像 ⇒ 画像の拡大・縮小 で幅を450に変更して「拡大・縮小」（高さは自動で変わる）
- 全フレームのサイズが変わる
- 画像 ⇒ キャンバスサイズの変更 で高さを800、オフセットで Y：-50 で「リサイズ」
- ファイル ⇒ 名前を付けてエクスポート で newpack_20221006.webp など、webpの拡張子で適当なファイル名を設定して「エクスポート」
- Image quality：70、As Animation にチェック して「エクスポート」
450 x 800 のアニメーションWebPファイルが作成されました。
ダブルクリックで開いて想定通りの無限ループのアニメになるか確認します。
mp4 からアニメーションWebPを作成する方法は以上です。
アニメーションGIF/WebPを WordPress に貼る方法
以前は wordpress は WebP は対応してなかったようですが、今は普通の画像ファイルと同じようにメディアのアップロードでアップして、画像で選択すると表示ができます。
アニメーションGIF/WebP を記事中に貼ると普通に無限ループの動画が表示されます。
ちなみに、NEW PACK OPENED では数が多すぎるのでサイズ削減のため静止画のJPGを貼って、クリックするとアニメーションGIFを表示するようにしていますが、静止画も以下のようにJPGファイルよりWebPファイルの方が小さくなるため、今後は静止画も動画も全てWebPに置き換えてサイズ削減しようと思ってます。
| ファイル形式 | jpegファイル | WebPファイル | |
|---|---|---|---|
| 画像サイズ | 450 x 800 | 450 x 800 | |
| 圧縮率 | 50 % | 70 ％ | |
| ファイルサイズ | 30 KB | 16 KB |
コメント