NEW
カスタムフィールドでアップロードした動画ファイルの1フレーム目をposter画像にする方法
記事を書いた人：Webデザイナー 新謙二
このエントリーはa-blog cms Advent Calendar 2025の21日目の記事です。
11月21日に開催された「a-blog cms Training Camp 2025」でご紹介させていただいた、弊社が開発している「SWIPE LP」テーマを制作する際に、アップロードした動画のposter画像を生成する方法を考えましたので、ご紹介させていただこうと思います。
「SWIPE LP」テーマとは
「SWIPE LP」テーマとはスマートフォンでの操作に最適化された、スワイプ形式のランディングページ用テンプレートです。1画面ずつ情報を見せる構成なので、ストーリーに沿ってスムーズに閲覧していただける点が特徴となります。離脱を抑えながら最後まで読み進めてもらいやすく、SNSのような操作感から若年層やスマートフォン利用が中心のユーザーと相性の良い形式です。
スマートフォンの場合は、真ん中のスライド部分が表示され、左右カラムの情報はメニューの中に格納されます。PCの場合は、真ん中の部分がスワイプ可能で、左右カラムの情報は固定で表示されます。
1枚のカード（コンテンツ）はエントリーで構成されており、動画・画像・ブロックエディタがレイヤー構造になっています。この様なエントリーを複数並べることで、LPページを構成する少し変わったテーマになります。
・「SWIPE LP」テーマ サンプルサイト
https://www.ideasource.jp/swipelp/
アップロードした動画からposter画像を生成する
では、早速ですが動画のカスタムフィールドの設定から、poster画像の生成まで、順番にご説明させていただきます。
最後にまとめたコードも一式掲載をしておきますので、ぜひチェックしてみてください。
エントリーの編集画面
動画用メディアカスタムフィールド、プレビュー用<video>タグ、poster用画像カスタムフィールドの設置
a-blog cmsの仕様では、メディアのカスタムフィールドに動画をアップロードすると、エントリー編集画面には「動画アイコン」が表示され動画自体は表示されませんが、今回の処理ではposter画像を生成するために動画自体を利用する必要がありますので、ファイルをアップロードするカスタムフィールドに加えて、動画のプレビューも設置が必要となります。
まずはエントリーの編集画面に必要な下記の3つ要素を追加します。
- 動画アップロード用のカスタムフィールド（メディア）
- 動画プレビュー用の<video>タグ
- poster画像用のカスタムフィールド（画像）
操作の流れ
- 動画ファイルをメディアで登録しエントリーを保存します。
- 再度エントリーの編集画面を開くとプレビュー箇所に動画が表示されます。
- プレビュー動画の下にある「動画からポスター画像を生成」ボタンを押すと、jsの処理が動いてposter用の画像がカスタムフィールドの値に設定されます。（動画の1フレーム目をキャプチャして画像を生成します）
- その状態でエントリーを保存するとposter画像がカスタムフィールドに登録されます。
poster画像の生成は「動画からポスター画像を生成」ボタンをクリックすると、プレビュー用の動画からcanvas機能を使いpngファイルを生成します。
生成されたpngファイルは、そのままposter画像用のカスタムフィールドに値が設定されます。設定の処理が終わったら説明文言が切り替わりますので、その状態で「保存」をしてください。ちなみに生成されたposter画像は画面に表示させたくないため（プレビューと同じ画面なので）、cssで非表示にしています。
poster画像が設定されている状態で、エントリー編集画面を開くと「ポスター画像は登録されています。」に表示が切り替わります。この状態になっていたらエントリーの編集画面への実装は完了となります。poster画像を作り直したいときは、一度「ポスター画像を削除」にチェックを入れてエントリーを保存してから、再度エントリーの編集を行なってください。
エントリー編集画面のテンプレートの記述
エントリーのカスタムフィールドの設定とposter画像の設定をおこなっています。poster画像は軽量にするために横幅を200pxにしていますがお好みで変更してください。要素のIDなども自由に変えていただいてOKですが、jsと関連付いている所がありますのでご注意ください。また、jsをhtmlのテンプレートに直接記述する場合は「{}」にエスケープが必要な場合があります。ご利用のテンプレートに合わせて調整してください。
■ エントリー編集画面のカスタムフィールド
<table class="acms-admin-table-admin-edit cstm-admin-table-admin-edit">
<tbody>
<tr>
<th>
<span>動画</span>
</th>
<td>
<div class="acms-admin-flex-column" id="swipelp-movwrapper">
<div class="js-media-field" id="swipelp-moviewrapper">
<div class="js-droparea" data-thumbnail="{swipelp_video@thumbnail}" data-type="file" data-thumbnail-type="{swipelp_video@type}" data-width="200px" data-height="200px"></div>
<p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
<div class="acms-admin-margin-top-mini">
<button type="button" class="js-insert acms-admin-btn" data-type="file">メディアを選択</button>
</div>
<input type="hidden" name="swipelp_video" class="js-value" value="{swipelp_video}" />
<input type="hidden" name="field[]" value="swipelp_video" />
<input type="hidden" name="swipelp_video:extension" value="media" />
</div>
</div>
<div class="acms-admin-flex-column cstm-movie-box">
動画プレビュー<br>
<video src="%{ARCHIVES_DIR}{swipelp_video@path}" controls
mutedcontrolslist="nodownload"id="swipeli_video" class="acms-admin-img-responsive" width="200px"></video>
</div>
<div class="cstm-movie-box">
ポスター画像は登録されています。<br>
<div class="acms-admin-form-checkbox">
<input type="checkbox" name="swipelp_video_image@edit" value="delete" id="input-checkbox-posterImg-delete" />
<label for="input-checkbox-posterImg-delete">
<i class="acms-admin-ico-checkbox"></i>
ポスター画像を削除
</label>
</div>
<img src="%{ARCHIVES_DIR}{swipelp_video_image@path}" class="js-img_resize_preview" alt="{swipelp_video_image@alt}" style="display:none" />
<input type="hidden" name="swipelp_video_image@old" value="{swipelp_video_image@path}" />
</div>
<div class="cstm-movie-box">
<a href="javascript:void(0);" onclick="generatePoster()" class="acms-admin-btn" style="width:200px;margin: 0.5em 0;padding:0.5em;">動画からポスター画像を生成</a><br>
<div id="posterImageView">ポスター画像が登録されていません。<br>生成ボタンを押して画像を設定してください。</div>
<div id="posterImageView-all" style="display:none">ポスター画像が設定されました。<br>エントリーを『保存』してください。</div>
</div>
<canvas id="canvas" style="display: none;"></canvas>
<img id="posterImage" alt="Generated Poster" style="display: none; max-width: 200px;">
<input type="file" name="swipelp_video_image" size="20" class="js-img_resize_input" id="swipelp_video_image_poster" style="display:none" />
<input type="hidden" name="field[]" value="swipelp_video_image" />
<input type="hidden" name="swipelp_video_image:extension" value="image" />
<input type="hidden" name="swipelp_video_image@width" value="200" />
<input type="hidden" name="swipelp_video_image@filename" value="" />
</td>
</tr>
</tbody>
</table>続いてjavascriptの処理になります。
こちらがプレビュー用の動画から、動画の1フレーム目をcanvasを利用してpngにし、画像のカスタムフィールドに値をセットする処理になります。
poster画像のカスタムフィールドの種類を、メディアではなく画像のカスタムフィールドにしている理由は、画像のカスタムフィールドではカスタムフィールドの<input>に値が設定されていれば、エントリー保存時に画像のアップロードが出来ますので、今回の様な処理の中でも簡単に実装が可能になります。
■エントリー編集画面のjavascript
<script>
const video = document.getElementById('swipeli_video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const posterImage = document.getElementById('posterImage');
const hiddenInput = document.getElementById('swipelp_video_image_poster');
const posterImageView = document.getElementById("posterImageView");
const posterImageViewAll = document.getElementById("posterImageView-all");
function generatePoster() {
// readyStateが1 (HAVE_METADATA) 未満の場合、メタデータが読み込まれていない
if (video.readyState < HTMLMediaElement.HAVE_METADATA) {
// loadedmetadataイベントを一度だけ待ち、読み込み完了後にgeneratePosterを再実行
video.addEventListener('loadedmetadata', generatePoster, { once: true });
return;
}
// seekedイベントの二重登録を防ぐため、一度解除
video.removeEventListener('seeked', onSeeked);
// seekedイベント登録
video.addEventListener('seeked', onSeeked, { once: true });
// 1秒目にシーク
video.currentTime = 1;
}
// seekedイベントの処理（修正版）
function onSeeked() {
// 元の動画サイズ
const originalWidth = video.videoWidth;
const originalHeight = video.videoHeight;
// 縮小後の幅を200pxに固定
const targetWidth = 200;
const scale = targetWidth / originalWidth;
const targetHeight = originalHeight * scale;
// キャンバスサイズを設定
canvas.width = targetWidth;
canvas.height = targetHeight;
// 動画フレームを縮小して描画
ctx.drawImage(video, 0, 0, targetWidth, targetHeight);
// Blobとしてエクスポート（PNG形式）
canvas.toBlob((blob) => {
// Fileオブジェクトを作成（ファイル名を指定）
const file = new File([blob], 'poster.png', { type: 'image/png' });
// DataTransferを使用してFileListを作成
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
// input[type="file"]のfilesプロパティに設定
hiddenInput.files = dataTransfer.files;
// 変更イベントを発火
hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
// プレビュー表示（Blob URLを使用）
const blobUrl = URL.createObjectURL(blob);
posterImage.src = blobUrl;
// メモリリーク防止
setTimeout(() => URL.revokeObjectURL(blobUrl), 10000);
// posterImage要素のスタイルを設定
if (posterImageView) {
posterImageView.style.display = "none";
}
// posterImage-all要素のスタイルを設定
if (posterImageViewAll) {
posterImageViewAll.style.display = "block";
}
}, 'image/png', 0.95); // 品質を95%に設定
}
</script>エントリーの表示画面
poster画像のパスは%{ARCHIVES_DIR}になります。動画ファイルに使っているメディア用の%{MEDIA_ARCHIVES_DIR}と間違えない様にしてください。poster画像の設定は、画像ファイルの設定がある場合のみ出力する様にしています。
■ エントリーの表示画面
<!-- BEGIN_IF [{swipelp_video@type}/eq/file] -->
<video src="%{MEDIA_ARCHIVES_DIR}{swipelp_video@path}"<!-- BEGIN_IF [{swipelp_video_image@path}/nem] --> poster="%{ARCHIVES_DIR}{swipelp_video_image@path}"<!-- END_IF --> preload="none" class="acms-top-0 acms-left-0 acms-z-0" width="100%" height="100%" loop autoplay muted playsinline></video>
<!-- END_IF -->まとめ
カスタムフィールドでアップロードした動画ファイルの1フレーム目から、poster画像を設定する方法を考えてみました。
動画はYouTubeにアップロードをする事で手間を省くことも多いですが、自サーバにアップする際にはposter画像のことも考えなくてはいけない場合があると思います。そんな時には、是非こちらの内容を参考にしていただけると幸いです。
今回も少し変わった内容だったかもしれませんが、実際の案件にも使えると思います。
今後もこの様なTIPSもご紹介させていただきますので、皆さまのa-blog cmsでのサイト制作に役立てていただければ幸いです。
では皆さま、良いクリスマスを、そして良いお年をお迎えください。
