ブログTOP | PowerCMS X

2025-05-20

PowerCMS X Version 4.0 をリリースしました

およそ3年半ぶりに PowerCMS X のメジャーバージョンアップを実施しました。

AI を活用してウェブサイト運用やウェブアクセシビリティ向上を支援する PowerCMS X Version 4.0 の提供を開始 | PowerCMS X

派手な新機能はありませんが、今回は運用やウェブアクセシビリティ向上の支援を強化しています。上記のプレスリリースで一部の機能を紹介していますが、紹介しきれなかった機能やアップデートを数回に分けて公開していきます。

※ 各機能について紹介した記事が公開されたら、下記にリンクを追加していきます。

新機能

AIによる見出し・概要の自動生成
LINE 連携プラグイン
管理画面ログのローテーション
管理者ログイン時にメール通知
アセットのファイル名のバリデーション

アップデート

AIによる文字起こし、字幕作成・動画合成など（VideoCaptionsプラグイン）
- VideoCaptionsプラグインで動画に字幕をつける | PowerCMS X
リッチテキストエディタプラグインのボタン追加（TinyMCEプラグイン）
HTML_CodeSniffer 2.1 対応（HTML_CodeSnifferプラグイン）
「リンクチェックを実行」ボタン（LinkCheckerプラグイン）
ログインセッションのブラウザセッション対応

オンラインセミナー「PowerCMS X ミーティング Vol.3」を開催！

PowerCMS X ver.4 と PowerCMS X クラウド WAF/CDN オプションをご紹介する無料オンラインセミナーを開催いたします。

第一部では新たに追加された機能を中心にご紹介、第二部では、PowerCMS X クラウド WAF/CDN オプションのご紹介、第三部では AI による自動要約機能と自動字幕生成機能を追加し大幅にアップデートした VideoCaptions プラグインをご紹介します。お申し込みは下記のページからお願いします。

PowerCMS X ミーティング Vol.3 | PowerCMS X

カテゴリー：リリース＆アップデート情報

投稿者：Masaki

2025-05-16

VideoCaptionsプラグインで動画に字幕をつける

用語

用語	説明
字幕	動画の題・配役・説明・台詞(せりふ)などを文字で映し出すもの。
バリアフリー字幕	上記の字幕に加え、それ以外の情報、話者、動画の効果音などの音などの情報を文字で表した字幕。
SRT	動画に字幕をつけるためのファイルフォーマットの1つ(拡張子 .srt)。
VTT(WebVTT)	動画や音声トラックなどの他のメディアと時間軸を合わせて配置された特定のテキスト「キュー」を提供するテキストファイル(拡張子.vtt)。 subtitles : 音声のダイアログにテキスト翻訳を提供します。 captions : 話されたテキストの文字起こしを提供し、音楽や背景の音など、の音声に関する情報を記載することができます。これらは聴覚障害のあるユーザーのためのものです。 chapters : 高レベルなナビゲーション情報を提供し、ユーザーが関連するコンテンツに簡単に切り替えられるようにします。 metadata : 他のあらゆる時系列情報に用いられます。 ※ PowerCMS Xでは captions(または subtitles)と、chaptersに対応するVTTファイルを生成できます。
SRV3	動画に字幕をつけるためのファイルフォーマットの1つ(拡張子 .srv3)。XMLで記述し字幕にルビや色情報などを持たせることが可能です。
ハード字幕	SRT/VTT/SRV3などと異なり、映像そのものに字幕を合成(焼き付け)したものです。環境を問わずに字幕を表示させることができますが、字幕を消したりすることはできず、合成処理には時間(負荷)がかかります。
Groq (グロック)	言語モデル処理に特化したLPU(Language Processing Unit)を開発しているアメリカ企業。この会社が適用する自動文字起こしなどのAIサービス。
Amazon Transcribe	AWS(Amazon Web Services)が提供する音声からの文字起こしサービスの名称
Google Cloud Speech-to-Text	Google Cloudの音声からの文字起こしサービスの名称
プロンプト	AIに対するユーザーからの指示や質問のこと。AIによる文字起こしサービスに「Groq」を利用する時はAIにヒントや固有名詞などを渡すことで文字起こしの精度を上げることができます。

字幕テキストのフォーマット

SRT形式

シンプルで普及しているフォーマットです。

1
00:00:00,500 --> 00:00:05,000
吾輩は猫である


2
00:00:05,500 --> 00:00:10,000
名前はまだ無い

VTT (WebVTT)形式

cタグ(<c.vttTitle.vttWhite>吾輩は猫である</c>)はスタイルを適用するためのものです。HTMLを含めることができるので、ruby, rtタグを使うことでふりがなを付けることができます。PowerCMS Xの動画プレイヤーはこの VTT形式のファイルを利用します。

WEBVTT


00:00:00.500 --> 00:00:05.000  line:50%
<c.vttTitle.vttWhite>吾輩は猫である</c>


00:00:05.500 --> 00:00:10.000  line:100%
<c.vttBottom.vttWhite>名前はまだ無い</c>

WebVTTは字幕のほかにチャプターを作成することもできます。

WEBVTT


00:00:00.000 --> 00:10:00.000 0
第一章


00:10:00.000 --> 00:20:00.000 0
第二章

字幕とチャプターを両方読み込ませることで、動画プレイヤーの右下の部分で指定した箇所にジャンプすることができるようになります。

<video controls src="video.mp4">
  <track default kind="captions" src="captions.vtt" />
  <track default kind="chapters" src="chapters.vtt" />
</video>

動画プレイヤーの右下にチャプターがポップアップ表示されちる

SRV3形式

head内に位置、色、表示などの情報を記述しbody内に字幕の時間とテキスト、定義した表示情報を属性で指定します。WebVTTに rubyタグを入れたものは YouTubeには対応していないのに対して、SRV3形式でルビを指定したものは YouTubeでふりがな付きで表示できます(モバイルアプリは未対応)。

<?xml version="1.0" encoding="utf-8" ?>
<timedtext format="3">
<head>
<pen id="1" sz="400" fc="#FFFFFF" ec="#000000" et="3" bo="0" b="1" />
<pen id="2" sz="200" fc="#FFFFFF" ec="#000000" et="3" bo="0" b="1" />
<wp id="1" ap="7" ah="50" av="100"/>
<wp id="2" ap="4" ah="50" av="50" />
<ws id="1" ju="2"/>
</head>
<body>
<p t="500" d="4500" wp="1" ws="1"><s p="1">吾輩は猫である</s></p>
<p t="5500" d="4500" wp="2" ws="1"><s p="2">名前はまだ無い</s></p>
</body>
</timedtext>

利用するプラグイン

以下の4つのプラグインを有効化する必要があります。

FileUploader : 大容量のファイルアップロードを可能にするプラグイン
VideoCaptions : 動画の字幕作成や編集を行うプラグイン
SimplifiedJapanese : 字幕にふりがなを付けたり辞書を利用するために有効化します
BannedWords : 自動で文字起こしされたテキストの文字校正を自動で行います

ライブラリと環境変数

以下のソフトウェアをサーバーにインストールしてください。

FFmpeg / ffprobe : https://www.ffmpeg.org/ 別ウィンドウで開きます
MeCab / mecab-dict-index / IPA 辞書 : https://taku910.github.io/mecab/ 別ウィンドウで開きます
wkhtmltoimage : https://wkhtmltopdf.org/ 別ウィンドウで開きます

以下の環境変数を config.jsonに追加します。

ffmpeg_pathと ffprobe_path以外は初期値が登録済みです。

"mecab_path" : "/usr/local/bin/mecab",
"mecab_dict_index_path" : "/usr/local/libexec/mecab/mecab-dict-index",
"mecab_dic_path" : "/usr/local/lib/mecab/dic/ipadic",
"wkhtmltoimage_path" : "/usr/local/bin/wkhtmltoimage",
"ffmpeg_path": "/usr/local/bin/ffmpeg",
"ffprobe_path": "/usr/local/bin/ffprobe",

文字起こし AIの APIキーを取得する

以下のサービスに対応しています。

速度、コスト、精度と設定の容易さの面から Groqをオススメします(APIコール数に制限はありますが無料で利用できます)。

以下 Groqでの設定方法を示します。

https://groq.com/ 別ウィンドウで開きますにアクセスしてアカウントを作成
Developers → Free API Key → Create API Key で APIキーを作成
PowerCMS Xのシステムプラグイン設定 → Groqの設定に APIキーを登録して保存します。

モデルは whisper-large-v3 と whisper-large-v3-turboから選択できます。ここでは初期値 whisper-large-v3のままとします。

以上で準備は整いました。

動画をアップロードして AIで字幕を生成する

システムオブジェクト → ファイルを選択して「新しいファイル」から動画をアップロードします。字幕の作成を開始するために一度そのまま保存してください。
言語コード(規定値は「日本語」)を選択して「AI字幕生成」ボタンをクリックします。

言語コードが「日本語」の場合のみ次のダイアログが表示されます。ここに動画のシナリオや固有名詞などを含むテキストをペーストして「固有名詞を抽出する」ボタンをクリックします。

抽出された固有名詞にチェックを入れるとWhisper APIにプロンプトとして渡されるほか「ユーザー辞書」に固有名詞として登録され文字起こし後の後処理で誤りの自動修正に利用されます。

「単語を登録して字幕を作成する」をクリックすると、動画の長さに比例して処理時間がかかりますが、しばらく待つと字幕が生成されカード一覧のレイアウトになります。

カード一覧画面のレイアウト

動画プレイヤー(プレビューエリア)
「プレビュー」ボタン : 現在編集中の字幕をプレビュー再生します。
「 AI字幕生成」ボタン : もう一度実行すると現在編集中の字幕は破棄され再度自動文字起こしを行います(自動文字起こし実行済みの動画の場合は APIコールは発生せずにキャッシュから再生成します。辞書などを登録してから再実行することで固有名詞の反映などが可能です)。
「字幕合成」ボタン : 動画に字幕を合成します(いわゆるハード字幕で、処理には動画の長さと字幕のコマ数に応じて処理時間がかかります)。
「字幕作成」ボタン : テキスト字幕ファイルを生成します。フィーマットは「SRT」「VTT」「SRV3」の3種類です。
「時間調整」ボタン : 字幕全体、もしくはアクティブなカード以降の字幕の時間を秒を指定してずらします。前へずらす場合はマイナスの数字を指定します。
「言語コード」ドロップダウンメニュー : 言語を指定するほか「自動判別」を選択できます。言語が単一でわかっている場合は処理時間と正確性の点で指定した方が良い結果が得られます。
「カード」「タブ区切り」切り替えタブ : カードをパネル状にレイアウトした表示とテキストエリア表示を切り替えます。テキストエリア表示の時は時間と字幕、設定がタブ区切りテキストとして格納されています。Microsoft Excelなどの表計算ソフトのデータをペーストしたり表計算ソフトで字幕を編集することができます。
「カード追加」ボタン : プレビュー動画の現在の再生位置にカードを追加します。セットされる秒数は環境変数「video_captions_fill_card_per」で指定された秒(初期値は5秒)です。
「固有名詞」ボタン : ダイアログに固有名詞の一覧を表示し、代替の変換候補がある場合はあわせて表示します。対象の固有名詞を選択して一括置換が可能です。
「検証」ボタン : 字幕の長さ(文字数)、字幕の時間(短すぎる、重複しているなど)、常用漢字外の漢字、フィラーなどを検証します。エラーが検出されると一覧が表示されます。
「検索」ボタン : 検索と置換が行えます。Ctrl(⌘)キー+Fキーで呼び出すこともできます。
カード : 1つのシーンの字幕テキストと設定などは各々カードとして時間順に配置されます。カードをクリックすると編集ダイアログが開きます。動画プレイヤーの再生時間とマッチしているカードはアクティブなカードとして青い枠線が付きます。
カード時間(左上) : クリックするとプレビュー動画の再生時間がそのカードの開始時間にセットされます。
カード削除ボタン(右上1) : このカードを削除します。
カード追加ボタン(右上2) : このカードの後ろにカードを追加します。1秒以上の空きが必要です。

カード編集ダイアログ

カードをクリックすると編集ダイアログが開きます。新規カード作成ボタンをクリックした時も同じ画面となります。

動画プレイヤー(プレビューエリア)
開始時間・終了時間 : 右のビデオカメラアイコンをクリックすると動画プレイヤーの現在の時間をセットします。
録音 / 音声作成 : ボタンをクリックするとマイクの音声を録音します。録音した内容を再生して確認後、動画に合成することができます。「音声作成」チェックボックスは SimplifiedJapaneseプラグインで音声エクスポートの設定を有効化している場合のみ表示されます(AWS Pollyを利用してテキストの読み上げ音声を作成します)。
字幕編集エリア : 文字数が多い時は自動的に改行されます(プラグイン設定または個人設定で変更可能)。明示的に改行を入れるにはHTMLの「<br>」タグを入力します(Shiftキー+Returnキーで挿入できます)。
表示位置 : なし、上または下、タイトルを選択すると中央に文字サイズ大で配置されます。
テキスト処理 : ふりがなや分かち書きを自動処理することができます。
文字 : 文字色(白または黒)、半透明の背景を入れる・入れない、斜体の設定ができます。
チャプター : チャプターを選択すると別名のチャプター用 VTTファイルが生成されます(filename.mp4に対して filename-ch.vtt というファイル名で生成されます)。
編集 : 動画の簡易編集が可能です。動画編集処理には動画の長さに比例して処理時間がかかります。
1. 映像を一時停止 : 開始時間から終了時間の間映像を静止画にして無音部分を作ります。
2. シーンをカットする : 指定された開始時間から終了時間の間の動画をカットして動画を短くします。
3. シーンをエクスポートする : 指定時間の動画、または開始時間の静止画をエクスポートします。
4. ウォーターマークを合成 : テロップやロゴなど、静止画を指定時間範囲の動画に合成します。「シーンをエクスポート」で静止画としてエクスポートした画像をベースに作成することで、サイズをあわせることができます。
字幕を分割 : 字幕編集エリアのキャレット位置でカードを分割します(各々の時間は半分になります)。
次をマージ : 次のカードと編集中のカードをマージして 1シーンにまとめます。マウスオーバーすると次のカードの字幕の文字と時間を確認できます。
ふりがなボタン : 字幕編集エリアの選択されたテキストにふりがなを追加します(HTMLのルビタグでマークアップされます)。自動で付けたルビが誤っている時や特定の文字にルビを振りたい時に利用します。
校正支援ボタン : 固有名詞の誤りや常用漢字外の漢字など、修正の提案を表示します。詳しくは「BannedWordsプラグインによる新しい校正支援機能について別ウィンドウで開きます」をご覧ください。
プレビュー : 動画プレイヤーに現在編集中の字幕をプレビュー表示します。
プレビュー(カメラアイコン付き) : 動画プレイヤーに現在編集中の「ハード字幕」をプレビュー表示します(画像の生成に少し時間がかかります)。
削除 : このカードを削除します。
確定して前へ : 内容を確定して一つ前のカードの編集ダイアログに遷移します。
保存 : 内容を確定してダイアログを閉じます。
確定して次へ : 内容を確定して一つ次のカードの編集ダイアログに遷移します。
ダイアログオプション : ダイアログの項目の表示非表示、初期値などを個人ごとに設定するダイアログを表示します。

ダイアログオプション

ダイアログオプションボタンをクリックすると、カードの編集画面の表示項目のカスタマイズを行えます。設定はユーザーごとに保存されます。

表示 : チェックを外すとその項目が非表示となります。
規定の位置 : 上、下、またはタイトルから選択
規定の文字色 : 白、黒から選択
テキスト処理 : なし、ルビ、分かち書き、ルビと分かち書きから選択
自動的に改行する : 文字数が多い時、できるだけ均等に、単語の切れ目を避けた位置で改行します
最大文字数、1秒あたりの最大文字数、最小表示時間については「検証」ボタンをクリックしてチェックする時に目安として利用されます(文字数超過や短すぎる場合に警告を表示)。

追加ファイル

「追加ファイル」欄にファイルをドラッグ&ドロップすることで、動画や音声の合成や字幕テキストのインポートが可能です。

画像 (タイトル画像・エンディング画像)

画像を指定した時間静止画動画にして動画の前もしくは後ろに連結合成します。

オーディオ (MP3)

ナレーションやBGMなどの音声を合成することができます。合成する音量を調整することが可能です。一定時間または終了時間にあわせてフェードアウトすることもできます。

動画 (MP4)

動画を連結またはワイプ合成することができます。

テキスト字幕ファイル (VTT/SRT)

字幕をインポートできます。編集中の字幕とマージするか上書きするかを選択できます。YouTubeなどからエクスポートした字幕を反映することなどが可能です。

動画編集・合成後のファイル名について

ダイアログで動画編集を行う際、または追加ファイルで動画や静止画、音声を合成する時、ファイル名を選択するドロップダウンメニューが表示されます。保存できるファイルはオリジナルの他に2ファイルです。ファイル名に追加される文字列は環境変数で指定されています。これらの環境変数を空 "" とすると、ファイル名を選択するドロップダウンメニューは表示されず、オリジナルを常に上書きするようになります。

名称・種別	ファイル名	環境変数名	初期値
オリジナル	filename.mp4	-	-
字幕合成	filename-su.mp4	video_captions_postfix	-su
合成動画	filename-ed.mp4	video_captions_concat_postfix	-ed

カテゴリー：プラグイン | 技術情報 | リリース＆アップデート情報

投稿者：Junnama Noda

2025-04-24

GitHubを利用したPowerCMS Xのテーマ運用の実際

PowerCMS Xの開発、そしてウェブサイト構築・運用案件にも携わっている安倍です。イマドキのフロントエンドに興味があり、Next.jsを使用したブログ構築も経験したことがあります。今日はPowerCMS X利用者目線で記事を書きたいと思います。

ある案件でテーマを利用せず、開発環境で制作したビューを本番環境にコピーアンドペーストで適用していたのですが、誤りなく本番環境に適用しようにも確認がしづらかったり心理的負荷が大きかったりしました。そこで、Theme_GitHubプラグインを利用して本番環境に適用することでリリース作業を行えるようにしました。

Theme_GitHubプラグインの基本的な設定については、「テーマをGitHubで管理する | PowerCMS X」及びそのページからリンクされているページをご覧いただければと思います。

下準備

今回の案件では構築時に独自のテーマが適用された状態でした。もしまだテーマが何も適用されていない、もしくは標準テーマが適用されている状態の場合、ビューの一覧からリストアクション「テーマのエクスポート」を実行し、環境変数theme_pathsで指定したディレクトリに配置して、そのテーマを適用します。

その後、本番環境でビューの編集画面にあるベースネーム・ファイルへのリンクを漏れなく設定していきました。%t/news/index.tmplのようにディレクトリ名とファイル名をファイルへのリンクに設定すると、テーマエクスポート時に指定したディレクトリ・ファイル名でビューが出力されるので、ビューを判別しやすくなります。（設定しなかった場合はUUIDが利用されます。）

最後に、theme.jsonにリポジトリ情報を記述して本番環境に再度適用します。これでGitHubからPullするための設定ができるようになります。何も更新作業がないタイミングを見計らって開発環境にも同一のテーマを適用しました。

テーマ適用時に同一のビューであると判断される材料は？

本番環境にテーマを再適用すると不具合が起こらないか（具体的には同一のビューと判断されず、ビューの数が増えてしまうのでは？）と心配でした。実際には何も問題は起こらなかったのですが、実装を調べたところテーマ適用時には同一のビューであることを判断する材料として以下の項目が使われるので、重複しないように気を付けてください。

名前
ベースネーム
クラス
UUID

全ての情報をAND条件で検索しておらずOR条件で検索しているので（ベースネームとクラスはAND条件）、名前を変更してもUUIDが同じであれば同じビューと判断されます。ないと思いますが、誤ってUUIDを重複させることがなければ大丈夫です。

運用

各自がローカルに開発環境を持ち、ローカル開発環境でビューを編集してコミット、リリース日にmainブランチにマージして本番環境に適用、とできれば良いのですが、PowerCMS Xのライセンスの問題、さらにクライアントにデータを入力してもらったり表示を確認してもらったりする必要があるため、なかなかそうはできないだろうというのが現状です。

では開発環境でビューを編集してコミットすれば？と思われますが、複数のチケットの更新作業をしているとビューには複数の作業内容が混ざっている可能性があって、単純にはコミットできないケースも予想されます。（TowerのようなGitクライアントだと編集した行を選択してそこだけコミットできるのですが…）

よって、現状では開発環境のビューを手元でマージしてGitHubにPushしています。（実装作業中はチケット毎にブランチを切って保存しておくのも良いかも。）Next.jsを触った経験も踏まえ、本番環境のブランチにマージするまでの工程で何かイノベーションを起こせないかとずっと考えているのですが、なかなか良いアイデアが浮かびません。

ビューを新規追加した場合

開発環境でビューの一覧からリストアクション「テーマのエクスポート」を実行します。そして、viewsの中にある新規追加したテンプレートファイルをリポジトリのviews内に配置します。そして、theme.json内の新規追加したビューに関する情報（下記のようなコード）をリポジトリのtheme.jsonにマージしてコミットします。

"000d9725-9d3a-479e-8467-b3cbae9c5b56": {
    "name": "記事一覧",
    "subject": "",
    "status": "2",
    "class": "Archive",
    "basename": "entry_list",
    "linked_file": "%t/news/entry_list.tmpl",
    "urlmappings": [
        {
            "name": "記事一覧",
            "model": "template",
            "mapping": "news\/index.html",
            "date_based": "",
            "publish_file": "1",
            "container": "entry",
            "container_scope": "1",
            "trigger_scope": "0"
        }
    ]
}

これを本番環境に適用すると、ビュー・URLマップが新しく追加されます。

ビューを更新した場合

開発環境のビューの内容をリポジトリのviews内にある該当ファイルに反映します。これをコミットして本番環境に適用するとビューが更新されます。更新前の状態はリビジョンに残ります。

ビューもしくはURLマップを削除した場合

リポジトリのviews内にある該当ファイルを削除します。さらにtheme.json内にある当該ビュー・URLマップの情報を削除してコミットします。

これを本番環境に適用するとビュー・URLマップが消えて欲しいのですが…、現状は消えません。theme.jsonを上からなぞって処理するだけだと削除したという情報が得られないからだと考えます。（1つ前のtheme.jsonと比較する必要があるということ。）これは製品の検討課題でしょうか。とりあえず手動で削除処理をしています。

細かい話や注意点

Pullしたテーマはpowercmsx/support/themes/pull/[ワークスペースID]に格納されます
テーマの適用時はtheme.jsonを上からなぞって処理・保存していくので、全てのビュー・URLマップの更新日時が変わります
本番環境に適用後は手動で再構築を行う必要があります
本番環境でビューが編集されている可能性があるので、ビューの更新日時もしくは「GitHubにコミット」ボタンを押して差分がないか確認した方が良いかもしれません（もしくは本番環境の管理画面デビューを編集しないというルールにする）

運用結果

GitHubを利用することで事前に差分を分かりやすく可視化できました
過去にどのようなコードを反映したのかをGitHubで確認できるようになりました
本番環境反映にかかる所要時間の短縮、心理的負荷の大幅軽減ができました

おわりに

Theme_GitHubプラグインを利用した運用を、利用者目線でまとめてみました。環境や運用状況に合わせて適宜調整しながらお試し頂ければと思います。本番環境は誤りの無い確実な操作が求められるので、私はテーマ化して本当に楽になったなと感じます。あとは更新方法を関係者に確実に共有しておくことが大事だと考えています。

カテゴリー：技術情報

投稿者：安倍

PowerCMS X ブログ