[Chrome拡張機能] ツイキャス配信サポートツール２つ
ツイキャス配信のサポートツールを２つ、Chrome拡張機能として試しに作ってChromeウェブストアに登録してみました。
Chrome拡張機能は機能する部分が主にHTML、JavaScriptとCSSで構成されているので、JavaScripでのプログラミングを触った事がある人ならば比較的簡単に開発が出来るかもしれません。 また、開発したChrome拡張機能は、GoogleのChromeウェブストアに登録すると、Googleの審査を通ると一般公開する事も出来ます。
※ツイキャス配信用アイテムビューv0.5以降の情報は『📝ツイキャス配信用アイテムビュー v0.5+』を参照して下さい。
拡張機能 (Extension)
ウェブブラウザの「拡張機能」の事ですが、最近のブラウザだと、表計算とか、テキストチャットなどといった、ブラウザ上で処理出来るまとまった機能をウェブストアから拡張機能というパッケージとして読み込んで、ブラウザのツールバーからアプリの様に呼び出して使えるのが普通になっています。
昔はブラウザごとに独自の拡張機能が開発されていたみたいですが、最近は「Opera」ブラウザや、マイクロソフトの「Edge」ブラウザでは中身に「Chromium (クロミウム)」という、Chromeブラウザの中心部にも使われているGoogleのオープンソースのブラウザが使われているので、これらのブラウザで多くのChrome用の拡張機能がそのまま使えます。 なので、現時点では複数のブラウザで使えるChromeブラウザの拡張機能のシェアが大きい様です。 又、現在でも独自の拡張機能を開発しているSafariとFirfoxのブラウザーでも、Chromeの拡張機能との互換性を強めてきていて、Chromeの拡張機能の開発者であれば、Chrome用のコードに変更を加えてパッケージ化を可能にするツールや方法が各ブラウザの開発元から公開されています。
Chrome拡張機能の追加
Chrome拡張機能の追加のについては次のメモを参考にしてください。
- 『📝Chromeウェブストアから追加』 パソコン版 ChromeとOperaへのインストール方法
- 『📝ChromeウェブストアからEdgeブラウザに追加』 パソコン版 Edgeへのインストール方法
注: 以降のChrome拡張機能は「Chrome」、「Edge」、「Opera」、「Brave」といったChromiunベースのパソコン版ブラウザでの使用が前提となります。
Chrome拡張機能: ツイキャスツール配信ページへGO
このChrome拡張機能は単にツイキャスの「ツール・ゲームズ配信」ページを開くだけのとてもシンプルな拡張機能です (命名センスに関してはスルーしてくださいｗ)。
拡張機能はブラウザのツールバーにアイコンを表示して、そのアイコンをクリックすると何かが起こるという機能を設定出来るので、この拡張機能は、ツールバー上に表示されたこの拡張機能のアイコンをクリックすると新しいタブでツール・ゲームズ配信ページ用のURLを開くという申し訳ない程にシンプルな機能になっています。
| Chrome拡張機能 | Firefoxアドオン | 更新内容 |
| v1.0 ( 公開) |
v1.0w ( 公開) |
英語名を「Go to Twitcasting Broadcastertool」から「Go to Twitcas Broadcastertool」に変更 |
| v0.1 ( 公開) |
v0.1w ( 公開) |
初回リリース |
開発の経緯
以前のメモ「📝ブラウザーでツイキャス配信中のアイテム確認」にも書きましたが、ツイキャスの「ブラウザ配信」又は「ツール・ゲームズ配信」ページにあるコメント欄では、スマホのツイキャス配信専用アプリと同様に、アイテムの確認がコメント欄で出来ます。
配信ツールのOBSを使ったツイキャス配信の場合、ツイキャス配信の視聴側で閲覧できるコメント欄の内容は、専用のアプリ(コメビュなど)のウインドウをウインドウキャプチャしたり、ツイキャスのサイトからコメ欄表示用のURLをコピーしてブラウザソースでシーンに追加するのが一般的です。 でも、この方法だと配信側のコメント欄に表示されるアイテムが表示されません。
「ブラウザ配信」と「ツール・ゲームズ配信」ページはツイキャスのサイトからだと、ページ右上のヘッダーにある青色の 配信する ボタンにマウスのポインターを持っていくと表示されるリンクから選ぶ事が出来ます (ブラウザの表示幅が狭い場合は青色のボタンは表示されませんが、ページ上部右側に表示されるユーザーアイコンの右の「」をクリックすると表示されます)。
ブラウザによってはブックマークをツールバーに表示してクリックし易くする事も出来ますが、拡張機能の場合だと多くのブラウザでツールバーに表示が出来るので、この「ツイキャスツール配信ページへGO」拡張機能をツールバーに表示させておけばワンクリックで「ツール・ゲームズ配信」ページを開く事が出来る様になっています。
Chrome拡張機能: ツイキャス配信用アイテムビュー
ツイキャス配信用アイテムビューv0.5の公開を期に新機能の紹介などを含むメモを改めて公開しました。 今後のツイキャス配信用アイテムビュー関連の情報は
に掲載していきます。
このChrome拡張機能は、上の「ツイキャスツール配信ページへGO」などを使って、ブラウザで「ツール・ゲームズ配信」ページ (以降、ツール配信ページ) を表示した際に、ページの一部の表示を簡素化してコメント欄をページ内に大きく表示出来る様にします。
また、ポップアップ内の「アイテムのみ」のオプションが✅になっているとコメント欄のコメントが非表示になって、アイテムの通知みが表示されます。
📦Chromeウェブストア: 「ツイキャス配信用アイテムビュー」
- v0.5 ( 公開): 試験的機能としてアイテムごとの表示/非表示に対応。 詳しくは 👉『📝ツイキャス配信用アイテムビュー v0.5+』
- v0.4.2 ( 公開): シアターパーティ開始後にポップアップが開けなくなる不都合を修正。
- v0.4.1 ( 公開): 「配信ツール向けオーバーレイを非表示」オプションの追加
- v0.4 ( 公開): ツール配信以外のページで拡張機能のアイコンをクリックするとツールページが開く様に変更。
- v0.3 ( 公開): タイムスタンプ表示オプションの追加。 ブラウザの更新ボタンを押した場合、それまで表示されていたアイテムが更新後でも表示される様に変更 (但し、順番はコメントのタイムスタンプとは同期されません)。
- v0.2.2 ( 公開): 配信ページ再読み込み時に表示オプション設定が無効になる不都合を修正。
- v0.2.1 ( 公開): 配信画面の横幅の設定変更をポップアップに追加。 コメント入力欄を表示するオプションを追加
- v0.2 ( 公開): ヘッダー、テロップ設定や配信設定などを表示するオプションを追加
- v0.1 ( 公開): 初リリ－ス
注: 「Chrome」、「Edge」、「Opera」、「Brave」といったChromiunベースのパソコン版ブラウザの使用を前提としています。
使い方
この拡張機能をダウンロードする前か、無効になっている状態でツール配信ページを開くと右の様なページが表示されます。
拡張機能が有効になっている状態で同じページを開くと次の様な状態でツール配信ページが表示されます。
因みに、ツール配信ページ上では普段は灰色になって無効状態になっている拡張機能のアイコン
がツールバー内で有効になります。
この拡張期のを初めて追加した後の状態では、上の画像の様に、ページの上から、ページヘッダー、配信画面とコメント欄の順番で並んで表示されていますが、「ページヘッダー」と「配信画面」は次記の「ポップアップ」ウインドウで表示/非表示の切り替えが出来ます。
ポップアップ
ツールバー内の拡張機能のアイコンをクリックすると右にある画像の様にポップアップウインドウが開きます。
(仕様上、ツール配信ページ以外ではアイコンは無効になっていてクリック出来ないので、このポップアップを開くのには「ツール配信ページ」に移動する必要があります。)
このポップアップには次の３つのオプションが表示されます。
- ヘッダーを非表示: 選択するとツール配信ページのヘッダーが非表示になります。
- 配信画面を非表示: 選択するとツール配信ページの配信画面が非表示になります。
- アイテムのみ: 選択するとコメント欄のコメントが非表示になってアイテムのみが表示されます。
次の画像は「ヘッダーを非表示」と「配信画面を非表示」の両方を選択した場合のツール配信ページのスクショで、コメ欄のみが表示された状態 になっています。
「アイテムのみ」のオプションでコメントの表示を切り替えが出来ますが、次の画像はこのオプションが非選択(左)/選択(右)の場合のツール配信ページのスクショになります。 画像内右側のウインドウではアイテムだけが表示になっています。
オプションページ
この拡張機能の「オプションページ」は「ツイキャス配信用アイテムビュー」の設定画面で、ツール配信ページを新規で開いた時の初期値を設定出来る様になっています。 オプションページを開くには;
- ツールバーのアイコンが表示されている場合は、アイコンを右クリックして、
- Chromeブラウザの場合は「拡張機能を管理」
- Edgeブラウザの場合は「拡張機能のオブション」
- Operaブラウザの場合は「拡張機能の管理...」
- アドレスに「chrome://extensions」と入力して開くブラウザの拡張機能管理ページから「ツイキャス配信用アイテムビュー」の拡張機能を探して「詳細」をクリックして開くページで「拡張機能のオブション」を選択します。
オプションページのレイアウトは次の画像の様になっています。
オプションページは上にタイトルと「ツール・ゲームズ配信」ページを開くボタンがある他は、上下の二つのセクションに分かれています。
上のセクションは配信ページを新しいタブで開いた時の初期状態を指定します。
- ヘッダーを非表示
- 配信画面の横幅
- アイテムのみ
これらの設定は、ツール配信ページを開いた後にポップアップ内で変更出来るオプションとほぼ同じですが、「配信画面を非表示」だけはこのオプションが有効の状態で新しい配信ページを開くとページの幅設定がおかしくなる現象があったので、現時点では、新しくツール配信ページを開く場合はこのオプションは無効の設定で開く使用になっています。 その代わり、「配信画面の横幅」を100~450ピクセルに指定出来る様になっています。
下のセクションは配信ページ内の背景や文字の色合いを調整出来るオプション設定ですが、現時点では3種類のオプションを保存出来る様になっています。
下のセクションの設定を変更した場合、「オプション設定の保存」をボタンを押して保存する必要がありますが、上のセクションの設定は変更時に保存されます。
無効化
この拡張機能が有効になっている場合はツール・ゲームズ配信ページ上のカテゴリー設定や配信設定情報といった配信画面とコメント欄以外の情報は常に非表示になります。 そういった非表示の情報を確認するには、別の拡張機能を設定していないブラウザで確認するか、拡張機能を無効にすると表示されます。
拡張機能を無効にするのには、拡張機能の管理ページで無効にしたい拡張機能を見つけてスライドボタンをオフにして無効にします。
この拡張機能は「Chrome」「Edge」「Opera」「Brave」といった複数のブラウザに対応しているので、普段使っているブラウザとは別のブラウザにこの拡張機能を追加して使い分ける方法もありだと思います。
備考
- 機能的には「ツール・ゲームズ配信」ページを開く「ツイキャスツール配信ページへGO」の機能もサポートしたかったのですが、登録時の審査が複雑になりそうだったので今回は別の拡張機能として開発しました。 [追記] 公開のv0.4で、アイコンに▶マークが重なって表示されている時にクリックすると「ツール・ゲームズ配信」ページが新しいタブで開く様になりました。
- 「ブラウザ配信」と「ツール・ゲームズ配信」のページはブラウザの更新をするとそれまでに受け取ったアイテムの情報は引き継がれない仕様なので、この「ツイキャス配信用アイテムビュー」の拡張機能使用中も、ブラウザの更新ボタンを押すとアイテム情報は消えてしまいます。 [追記] 公開のv0.3以降では更新ボタンを押す直前まで表示されていたアイテム情報であれば更新後も最高50個までなら再表示される様に変更しましたが、サイトの仕様上、コメント欄の最後にまとめて表示されます。 「アイテムのみ表示」のオプションが設定されていれば問題ありませんが、無効の場合は表示されるアイテムとコメントの順番は実際受け取った順番とは異なる場合があります。 [追記] 公開のv0.5では、最高100個までのアイテム情報が引き継がる様に仕様を変更しました。
- 現在のバージョンの「ツイキャス配信用アイテムビュー」が有効になっているブラウザではテロップの変更が出来ないとのフィードバックがあったので、次のバージョンでは設定を表示させるオプションを付け加えてみたいと思います。 現時点では別のブラウザ (macの場合はSafariなど)でツイキャスにログインしてテロップの変更をするのが無難だと思います。 [追記] 公開のv0.2で、ポップアップ/オプションページからテロップや配信設定などのパーツの表示/非表示を切り替えられる様に更新しました。
- 配信中にアイテムがリフレッシュされてアイテムの表示が消えてしまう事例があるみたいです。 コメントとの数に関係があるみたいですが、個人的には報告された症状を再現する方法が無いので手探りになってしまいますが、どうにか対処方を探してみたいと思います。
- 個人的には必要の無い機能の拡張機能を作ってしまったので、基本的なテストはしましたが、短期間で沢山のアイテムやコメントを受け取った場合の動作チェックなどは現時点では実施出来ていません。 なので、使った感想などをこのページにコメントしてもらえたら幸いです。
- [追記] シアターパーティで動画再生中に配信画面のプレビューをクリックして動画の停止・再生などを操作すると、拡張機能のアイコンからポップアップが開けなくなってしまい、新しく配信ページが別のタブで開くという不都合が発生しています。 現時点では対処方を検討中なのでシアターパーティを操作したい場合は、複数の配信ページを別のタブで開いて一つをシアターパーティ操作専用にする事をお勧めします。( )
[追々記] 公開のv0.4.2にて修正しました。
コメント
コメントを投稿