ビデオコンポーネント向けアイコンと多言語翻訳の追加

2026年04月24日 00:16 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2194

ビデオプレーヤーコンポーネントの新設に向けて、システムアイコンライブラリに16種のアイコンを追加し、全26言語の翻訳ファイルに17種のビデオ操作UIキーを一括追加した変更です。

背景

このPRは、webawesome-proリポジトリの#168と対になる姉妹PRとして作成されました。プロ版で開発されるビデオコンポーネントが必要とするUIリソース（アイコンおよびi18nテキスト）を、オープンソース側のコアパッケージに先行して整備することが目的です。

コンポーネントのUIを構成するアイコンや操作ラベルは、コンポーネント実装とは独立して管理される設計になっています。そのため、コンポーネント本体の実装を待たずにアセット層だけを先にマージできる構造になっています。

技術的な変更

システムアイコンライブラリへの追加

packages/webawesome/src/components/icon/library.system.ts の solid バリアントに、16種のSVGアイコンが追加されました。追加されたアイコンキーは以下の通りです：

backward / backward-step / forward / forward-step: 再生位置のスキップとステップ送り
closed-captioning / closed-captioning-slash: 字幕のオン・オフトグル
compress / expand: 画面サイズの縮小・拡大（全画面切り替え）
ellipsis-vertical: 縦3点リーダー（追加オプションメニュー）
gauge / gear: 再生速度・設定
picture-in-picture: ピクチャー・イン・ピクチャー
play-circle: 円形の再生ボタン
volume / volume-low / volume-xmark: 音量の高・低・ミュート状態の表現

すべてのSVGはFont Awesome Free v7.2.0のパスデータをインライン文字列として格納しており、既存アイコン（play、pauseなど）と同じパターンに従っています。

翻訳キーの追加

packages/webawesome/src/translations/ 配下の全26言語ファイル（en.ts、ar.ts、de.ts、ja.ts 等）に、以下の17キーが一括追加されました：

captions: 字幕
enterFullscreen / exitFullscreen: 全画面モードの開始・終了
mute / unmute: ミュート・ミュート解除
moreOptions: 追加オプション
nextVideo / previousVideo: 前後の動画へのナビゲーション
pause / play: 一時停止・再生
pictureInPicture: ピクチャー・イン・ピクチャー
playbackSpeed: 再生速度
playlist: プレイリスト
seek: シーク操作
seekProgress: シーク位置の読み上げ（関数型）
currentlyPlaying: 現在再生中
videoPlayer: プレーヤーのARIAラベル
volume: 音量（en-GB・ja.ts のみ追加）

seekProgress は他キーと異なり、(current, duration) => string 型の関数として定義されており、言語ごとの語順やフォーマット（${current} of ${duration}、${current} / ${duration} など）に対応できる設計です。右横書き言語（アラビア語・ヘブライ語・ペルシャ語）を含む全言語でカバーされています。

設計判断

アイコンとi18nを実装より先行してコアパッケージへ投入する方針が採られています。ビデオコンポーネントの本体はプロ版リポジトリで管理される一方、UIリソースはオープンソース側のシステムライブラリとして一元管理されます。これにより、コンポーネントがリリースされた時点で多言語対応とアイコンが揃った状態になります。

既存の pauseAnimation / playAnimation という既存キーとは意味的に分離した形で、ビデオ操作用の pause / play キーが新設されています。既存キーはそのまま残されており、アニメーション制御とビデオ再生制御の翻訳文脈が明確に分離されています。

まとめ

本PRは、ビデオコンポーネントというUIレイヤーの変更を、アイコン定義とi18n翻訳というアセット層に分離して先行マージした変更です。26言語への同時対応を含む大規模な翻訳追加を一括で行うことで、コンポーネント本体のリリース時に多言語化の負債を残さない設計になっています。