バイリンガル字幕対応のピクチャーインピクチャーChrome拡張機能「DualPiP」を作りました
皆さん、こんにちは！動画学習用のChrome拡張機能「DualPiP」を開発したので、コミュニティの皆さんにシェアしたいと思います。
DualPiPとは
DualPiPは、ブラウザのネイティブピクチャーインピクチャー機能の制限を解決する拡張版プレイヤーです：
主要機能：
- 🎬 拡張ピクチャーインピクチャーモード - 主要動画サイトでワンクリックPiP、完全な再生コントロール付き
- 🌐 バイリンガル字幕表示 - 二言語字幕の自動検出・表示、語学学習に最適
- 🖼️ サムネイルプレビュー - プログレスバーホバーで動画サムネイル表示、素早いナビゲーション
- 💬 弾幕サポート - Bilibili、NicoVideo、ライブストリームなどのリアルタイムコメント対応
- ⚡ 豊富なキーボードショートカット - 効率的な操作のための包括的なホットキーサポート
対応サイト
開発時に、幅広い互換性を確保するため、主に2つのリソースを参考にしました：
- Immersive Translateのバイリンガル字幕要望まとめ - 200以上の動画サイトがリストアップされており、ほとんどをテスト・サポート済み
- 海外主要アニメストリーミングサイト - 主要な国際アニメストリーミングプラットフォームをカバー
現在対応済み：YouTube、Netflix、Bilibili、iQiyi、Tencent Video、Youku、Coursera、Udemy、Khan Academyなど、多数の主流プラットフォーム。
現在のバージョンとロードマップ
現在のバージョン（v1.0）：
- 基本的なピクチャーインピクチャー機能を無料提供
- 無料機械翻訳エンジン対応（Google、Microsoft、Yandex）
- 基本的なバイリンガル字幕と弾幕サポート
次期開発重点：
- 🤖 AI翻訳統合 - より高品質な翻訳
- 🎨 弾幕カスタム設定 - フォント、色、位置のパーソナライゼーション
- 📝 字幕フォーマット拡張サポート - SRT、ASSなどのフォーマットとの互換性向上
技術実装
ChromeのDocument Picture-in-Picture APIを使用して、ネイティブPiPの制限を克服しています。
ダウンロード・お試し
拡張機能はChrome ウェブストアで公開中：
https://chromewebstore.google.com/detail/ddkmobcljbfggkmibabekgpbighaogpn
なぜImmersive Translateがあるのに作ったのか？
Immersive Translateが既に動画のバイリンガル字幕をサポートしているのに、なぜ作ったのかと疑問に思われるかもしれません。Immersive Translateは確かに優秀ですが、DualPiPには2つの重要な差別化要因があります：
1. ピクチャーインピクチャーの独自の利点
- 真のマルチタスク処理：他の作業をしながら動画視聴、動画は常に最前面に表示
- 独立したウィンドウ制御：PiPウィンドウのサイズと位置を自由に調整、ブラウザタブに依存しない
- 集中学習体験：ブラウザの他のタブによる気散らしを排除、長時間の学習セッションに最適
- クロスアプリケーション使用：他のアプリケーションに切り替えても動画が見える状態を維持
2. 強化された字幕自動検出
- 深いサイト統合：200以上の動画サイトに特化した字幕検出最適化
- 複数字幕フォーマットサポート：ウェブ字幕、SRT、VTT外部字幕、Video TextTrackに対応
簡単に言うと：ブラウザ内での動画視聴が主な場合はImmersive Translateが最適ですが、マルチタスクが必要だったり、より集中した学習環境を求める場合は、DualPiPがより良い選択です。
開発者として、この拡張機能を作った動機は、YouTube学習動画を見ているときにネイティブPiP機能の制限にフラストレーションを感じ、動画を見ながらメモを取ったり調べ物をしたりする必要があったからです。DualPiPとImmersive Translateは実際に相互補完的に使用できます - ブラウザ内視聴にはImmersive Translate、集中学習時にはDualPiPを使用。
このプロジェクトを積極的にメンテナンスしており、コミュニティからのフィードバック、バグレポート、機能提案をお待ちしています！
語学学習者や動画愛好家の皆さんのお役に立てれば幸いです！🚀