お客様各位

誠に勝手ながら2026年度のGW休暇を下記日程にて実施させていただきます。
大変ご迷惑をおかけいたしますが、何卒ご了承の程よろしくお願い申し上げます。

【2026年GW休暇】
2026年4月29日（水）、5月2日（土）〜5月6日（水）

※休暇中のお問い合わせに関しましては、休暇後の対応とさせていただきます。

毎月恒例のa-blog cms勉強会へ

今月も毎月恒例のベースキャンプ名古屋で開催される、a-blog cms勉強会に行ってきました。
a-blog cms勉強会は、a-blog cmsの最新情報や機能紹介、開発状況、参加された方の質疑応答など、毎回a-blog cmsの様々な話題で盛り上がる、大変有意義な勉強会となっております。もちろんWeb業界の話題もあり、最近ではAIの活用方法なども積極的に情報交換をおこなったりと、私たちにとって欠かせない勉強の時間となっています。

勉強会後は懇親会へ

実は今年に入りa-blog cmsの開発リーダーの世代交代があり、今回は勉強会の後に懇親会をおこないました。
三代目開発リーダーさん「いままでありがとうございました！」そして四代目開発リーダーさん「これからもよろしくお願いします！」という会でしたので、楽しんで参加させていただきました。

たくさんお話をさせていただいて、めっちゃめっちゃ楽しかったです。
ご一緒させていただいた皆さま、ありがとうございました。

最後に

三代目開発リーダーの伊藤さん。
四代目開発リーダーの宇井さん。
合体して「ういとうさん」になっています。笑

いつも本当にありがとうございます。
今後ともどうぞ宜しくお願いいたします。

・a-blog cmsをお勧めする理由
・a-blog cms公式サイト

現在、弊社代表の名前をかたり、LINEワークスのグループ作成・招待、QRコードの生成・返信等を求める不審なメールが確認されております。
こちらは弊社とは一切関係ございませんのでご注意ください。不審なメールを受信した場合は、下記の点にご注意いただき速やかにメールを削除してください。

・メールに記載されたURLはクリックしないでください。
・個人情報などの入力や返信をしないでください。
・不審なメールの指示に従いLINEワークスのグループ作成・参加やQRコードの生成などはしないでください。

宜しくお願いいたします。

お取引先様各位

ご挨拶

新年あけましておめでとうございます。
旧年中は格別なご高配を賜り、まことに有難く厚く御礼申し上げます。
本年も、より一層のご支援を賜りますよう、従業員一同心よりお願い申し上げます。

敬具 　令和8年1月
代表取締役　新 謙二

このエントリーは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画像用のカスタムフィールド（画像）

操作の流れ

1. 動画ファイルをメディアで登録しエントリーを保存します。
2. 再度エントリーの編集画面を開くとプレビュー箇所に動画が表示されます。
3. プレビュー動画の下にある「動画からポスター画像を生成」ボタンを押すと、jsの処理が動いてposter用の画像がカスタムフィールドの値に設定されます。（動画の1フレーム目をキャプチャして画像を生成します）
4. その状態でエントリーを保存すると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でのサイト制作に役立てていただければ幸いです。
では皆さま、良いクリスマスを、そして良いお年をお迎えください。

お客様各位

平素より格別のお引き立てを賜り、厚く御礼申し上げます。
誠に勝手ながら下記期間を2025年度の冬期休暇とさせていただきます。
大変ご迷惑をおかけいたしますが、何卒ご理解の程、宜しくお願い申し上げます。

【冬期休暇期間】
2025年12月27日（土）〜2026年1月4日（日）

※休暇中のお問い合わせに関しましては、休暇後の対応とさせていただきます。

年に1度のa-blog cmsのビッグイベント「a-blog cms Training Camp」

2025/11/21に名古屋で開催された「a-blog cms Training Camp 2025」に参加してきました。
a-blog cms Training Campは、年に1度a-blog cmsのユーザーが全国から集まる非常に大きなイベントです。

今回は9月にリリースされたVer3.2の情報が盛りだくさんで、登壇された方々の事例やノウハウの紹介、twigテンプレートの実装方法、そして進化が止まらないAiの利用方法など、a-blog cmsを取り巻くWeb業界のトレンドを踏まえた新鮮な話題で盛り上がりました。

当日スピーカーとして20分ほどの枠で登壇させていただきました

今回は「少し変わったテーマ制作に役立ったver3.2の新機能」というテーマで、現在弊社で開発している a-blog cms ver3.2 の新機能を活用した、オリジナルテーマ開発の話題で登壇させていただきました。

こちらのテーマは「SWIPE LP」としてスマートフォンでの利用をメインとしたシンプルな構造になっており、1エントリーを1画面（1枚のカード）のコンテンツとして捉えて構成していき、スワイプでスライドしながら閲覧をするという少し変わったテーマとなります。

テーマで利用したver3.2の新機能

ブロックエディタの導入

スマートフォンをメインとした1画面ごとのカードで構成したシンプルなテーマのため、エントリーの入力形式もシンプルにするために、ブロックエディタを導入しています。エントリーのユニット構造がa-blog cmsの特徴ではあるのですが、ブロックエディタをカスタムフィールドで必要な箇所に設けることで、シンプルながらも画像／見出し／本文などのレイアウトが簡単に組めますので、非常に操作性が良く分かりやすい入力インターフェイスが実現できました。

フォームでhtmxの利用

htmxの利用が簡単になったver3.2の特性を活かして、お問合せの流れ「入力→確認（エラー）→送信完了まで」をその場で完結できる様にカスタマイズしてみました。今回はフォームでの利用ですが、htmxは画面遷移のストレスが減りユーザーの利用体験が向上しますので、ぜひ色々な箇所で取り入れてみたい機能です。

発表の後、皆様からご質問やご感想をいただき、お答えしながら私自身も非常に勉強になりました。こちらのテーマは今後も開発を進めていき、何らかの形で世に出したいと思っておりますので、ぜひ暖かく見守っていただけますと幸いです。現在開発中で完成はしておりませんので、今後変わっていく可能性はございますが、下記にサンプルサイトをご用意しておりますので、宜しければぜひご覧ください。

・SWIPE LPテーマ（今後1ヶ月ほどは公開しておきます）
https://www.ideasource.jp/swipelp/

・当日発表したスライド
少し変わったテーマ制作で役立ったver3.2の新機能

当日開催されたセッション

有料のリアルイベントということですので、こちらでは個々のセッション内容の詳細は省略させていただきます。非常に有益なものばかりで、休憩を挟みながらも約5時間の長丁場でしたが、セッションの内容はもちろん参加者の皆さんが集中をしながら情報収集をされている姿をみて、今回も非常に刺激をいただきました。

セッション内容

・実案件で失敗しない a-blog cms v3.2 へのアップデート術
　宇井 陸登 さん / 有限会社アップルップル

・Web業界以外の人に、a-blog cms 3.2をおすすめしてみる（できるか？）
　坂本 邦夫 さん / フォルトゥナ

・a-blog cmsで考えるレイアウトと文字組み
　石川 寿刀 さん / Letoro* Design

・a-blog cms cloud のサービス開始
　平山 智則 さん / アルブストリクス株式会社
　永富 敬千 さん / 有限会社アップルップル

・イベントサイトで今週のイベントを表示する
　入交 昭 さん / HOOP Design

・FullCalendarを利用したイベントカレンダーの実装
　小澤 琢磨 さん / 株式会社あんどぷらす

・少し変わったテーマ制作に役立ったver3.2の新機能
　新 謙二 / 株式会社アイデアソース

・a-blog cms Ver. 3.2 の V2モジュールと Twig記法を導入してみて
　菅原 彩 さん / 有限会社アップルップル

・Twigでパワーアップした校正オプション
　田村 章吾 さん / ましじめ株式会社

・生成AIにa-blog cmsのテーマを作らせてみた
　たにぐち まこと さん / H2O space

・a-blog cmsについて質問ができるAIをgeminiのgemという機能を使って作ってみた件
　三ツ石 皓太郎 さん / 株式会社ヘルツ

・a-blog cms x MCP 試してみた
　伊藤 淳 さん / 有限会社アップルップル

セッションのより詳細な内容は下記のページに記載がございますので、興味がある方はぜひご確認ください。
開発元のアップルップルさんや、実際のユーザーの皆さんと直接会って話す機会は大変貴重です。

・a-blog cms Training Camp 2025（DoorKeeper）

こちらは会場で配られたa-blog cmsマークのクッキーです。
あしかクッキーの「オリジナルロゴクッキー」で作られたみたい。可愛くて美味しい！！

・あしかクッキーのオリジナルロゴクッキー
https://ashikacookie.com/

イベント終了後は懇親会へ

イベント終了後は、前回のcontents.nagoya 2025の時と同様に「シルクロード 名古屋駅店」へ行き、イベントに参加された皆さんとの懇親会になりました。食事・お酒をいただきながら楽しい打ち上げです。登壇の準備と役割を終えてホッとした気持ちもあり、普段より開放気分一杯で楽しませていただきました。

沢山おしゃべりをしつつ、勉強になりそして楽しい時間を過ごさせていただきました。
ご一緒させていただいた皆さまありがとうございました。

最後に

今年また大きな進化を遂げたa-blog cmsですが、今後この新しい機能を活用できると思うとワクワクします。
また、今回のセッションでAiの話題が沢山ありましたとおり、今後a-blog cms ＋ Aiの組み合わせた活用方法が、どんどん広がっていくことが期待できるイベントでした。これからの進化が本当に楽しみです。

弊社ではa-blog cmsを利用したWebサイト制作やSEO対策、Web Vitalsの改善、Webマーケティング施策はもちろん、a-blog cmsの機能を利用した社内システムによる業務改善・情報ツールとしての活用なども考えておりますので、ぜひa-blog cmsを利用した取り組みに興味がございましたらお気軽にご相談ください。どうぞ宜しくお願いいたします。

・a-blog cmsをお勧めする理由
・a-blog cms公式サイト
・a-blog cms Training Camp 2025（DoorKeeper）