メモ帳

「Chrome」、「Edge」、「Opera」、「Brave」といったChromium系のブラウザに読み込んで使える拡張機能、 Chrome拡張機能 を本家Googleの「 Chromeウェブストア 」から追加する時の流れをメモしておきます。 [目次] Chrome拡張機能の追加 Chromeウェブストア Chromeウェブストアで拡張機能の検索 Chromeブラウザへ拡張機能の追加 アイコンの固定 Chrome拡張機能の管理ページ Operaブラウザの場合 Edgeブラウザの場合は👉『📝 ChromeウェブストアからEdgeブラウザに追加 』を参照 Chrome拡張機能の追加 以前は、「.crx」というファイルからChrome拡張機能をChromeブラウザに読み込ませる事も出来たみたいですが、現行バージョンのChromeでは、安全面上、Chrome拡張機能はGoogleの運営する「 Chromeウェブストア 」からChromeに直接ダウンロードして追加するのが標準になっています。 既に、追加したいChrome拡張機能のウェブストアのページへのリンク(URL)がある場合はそのページを拡張機能をインストールしたいブラウザで開いてそのページから追加します (👉 Chromeブラウザへ拡張機能の追加 へジャンプ)。 そうでない場合は、まず、Chromeウェブストアで追加したいChrome拡張機能のページを探します👇。 Chromeウェブストア Chromeウェブストアは https://chromewebstore.google.com/category/extensions のURLで開く事が出来ますが、Chromeブラウザの場合は次の手順を踏むと、ツールバーから数クリックでストアのページを開く事が出来ます。 (1) ブラウザのウインドウの上部にあるツールバーの左側 ( 左の 上の 画像内、 赤...

ツイキャス配信のサポートツールを２つ、 Chrome拡張機能 として試しに作って Chromeウェブストア に登録してみました。 Chrome拡張機能は機能する部分が主にHTML、JavaScriptとCSSで構成されているので、JavaScripでのプログラミングを触った事がある人ならば比較的簡単に開発が出来るかもしれません。 また、開発したChrome拡張機能は、 GoogleのChromeウェブストア に登録すると、Googleの審査を通ると一般公開する事も出来ます。 [ 28/Oct/2020 追記 ] 作った拡張機能が両方共、無事審査を通過したので、今回作ったツールの説明も兼ねてここにメモしておきます。 ＿〆ヾ(￣(エ)￣ ﾒ [目次] 拡張機能 (Extension) Chrome拡張機能の追加 Chrome拡張機能: ツイキャスツール配信ページへGO 開発の経緯 Chrome拡張機能: ツイキャス配信用アイテムビュー ※ 使い方 ポップアップ オプションページ 無効化 ※ツイキャス配信用アイテムビューv0.5以降の情報は『📝 ツイキャス配信用アイテムビュー v0.5+ 』を参照して下さい。 拡張機能 (Extension) ウェブブラウザの「拡張機能」の事ですが、最近のブラウザだと、表計算とか、テキストチャットなどといった、ブラウザ上で処理出来るまとまった機能をウェブストアから拡張機能というパッケージとして読み込んで、ブラウザのツールバーからアプリの様に呼び出して使えるのが普通になっています。 昔はブラウザごとに独自の拡張機能が開発されていたみたいですが、最近は「Opera」ブラウザや、マイクロソフトの「Edge」ブラウザでは中身に「 Chromium (クロミウム) 」という、Chromeブラウザの中心部にも使われているGoogleのオープンソースのブラウザが使われている...

カメラが付いているのがほぼ当たり前のスマホだと、自撮りアプリの「 SNOW (スノー) 」の様に、カメラに映る顔にエフェクトを付ける『 顔面加工フィルター 』機能がある無料アプリが沢山存在します。 でも、同様のアプリはパソコンでとなると、カメラが標準で付いているとは限らないのが理由になのかもしれませんが、そこまで多くなく、また、多くが有料だったりします。 そこで、『 Snap Inc (スナップ社) 』が公開している、マックやウインドウズのパソコンのカメラで 顔面加工フィルター機能が使える無料の仮想カメラアプリ 『 スナップ・カメラ (Snap Camera) 』の使い方をメモしておきます。 [目次] スナップチャット (Snapchat) レンズ (Lens) スナップ・カメラ (Snap Camera) スナップ・カメラの使い方 スナップ・カメラを使ってみた レンズ・スタジオ (Lens Studio) スナップチャット (Snapchat) 英語圏だと『 スナップチャット 』は、スナップ会社が開発しているスマホ用のチャット/通話アプリの名前としてかなり高い知名度があります。 日本でも『 スナチャ 』という和製の呼び名もあるみたいなので、ある程度の知名度はあるかと思います。 元々は、画像共有機能の付いたチャットアプリでしたが、現在ではビデオ通話機能も追加されています。 一度表示したり一定時間が過ぎると動画/メッセージが消去されるという、LINEの既読よりも一つ上の縛りがあるアプリとなっていますが、会話を後に残さない仕様で、まさにその瞬間を共有するというのが目的だそうです。 因みに、「 顔面加工フィルター 」の話をする時に、日本だと「 スノーの加工 」を例にすると話が通じる場合が多いと思いますが、英語圏ではスノーがそこまで浸透していないので「スノー」自体が認知されない場合が多いと思います。 でも、「 スナップチャットのカメラのやつ 」と言えば話が通じる可能性が高くなります。 レンズ (Lens) スナップチャットで使われる...

OBSの音声ミキサー 以前、「 仮想カメラ プラグイン (Windows版) 前編 」で、OBSの仮想カメラを使って、OBSで構成したシーンの映像をLINEやDiscord、Skype、Zoomといったビデオ通信アプリのカメラ入力として取り込む方法をメモしましたが、仮想カメラの機能では、 OBSの音声ミキサーからのオーディオ出力 を同様のアプリに取り込む事は出来ませんでした。 初めは、OBSの音声ミキサーを経由せずに配信アプリで直接オーディオ入力を設定するのが唯一の方法かと思っていましたが、 OBSの音声ミキサーからの出力を他のアプリで取り込む方法 がOBSのフォーラムにあったのでここにメモしておきます。 [目次] OBSのオーディオ出力も他のアプリへ？ OBSの音声ミキサーの「音声モニタリング」機能 音声モニタリングの設定 出力デバイス ⇒ 入力デバイス まとめ 1. OBSのオーディオ出力も他のアプリへ？ OBSで構成したシーンの出力 (映像とオーディオ) は、OBS本来の機能だと、配信サーバーか録画ファイルにOBSから直接送られます。 でも、OBSの仮想カメラを使うとOBSからの出力映像は他のアプリにカメラの映像として取り込む事ができます (👉「 仮想カメラ プラグイン (Windows版) 前編 」参照)。 ウインドウズ版の仮想カメラだと、OBSの出力映像とサウンドはマイクロソフトの DirectShow によって、サウンドも画像と一緒に他のアプリに渡されるみたいですが、最近は、DirectShowのサウンド入力に対応していないアプリがほとんどなので、サウンド出力は仮想カメラでなく別の方法を使って他のアプリに渡す必要があります。 最近、OBSのフォーラムで見つけたのは (昔からあった方法みたいですが)、OBSの音声ミキサーの「 音声モニタリング 」機能を使う方法で、この方法でOBSのミキサーの音源をオーディオデバイスに出力出来るので、その出力を他のアプリの入力へ渡す事が可能になります。 ...

「 OBSキャスコメCSSカスタマイザー 」は、OBSのブラウザーソースを使ってツイキャスのコメント欄を表示する時に使う「 カスタムCSS 」をクリック感覚で作成できます ( 👉 コメント欄をOBSで表示する方法 📝 メモ )。 また、カスタマイザーの「 コメント欄サンプル 」ではコメント欄がOBS上でどの様に表示されるかがカスタマイズ中に確認出来ます。 「コメント欄サンプル」の下 (v.0.0の場合は上) にあるテキストボックスとボタンを使うと、サンプル表示の背景色を変更したり、背景に画像を張り付ける事も出来るので、ここに使い方をメモしておきます。 背景画像と背景色の設定用のパネル 注 : あくまでもカスタマイズ中にコメント欄の色合いを確認する為の機能で、OBS上で表示されるコメント欄の背景画像や背景色を設定する機能ではありません。 [目次] コメント欄サンプルの背景画像と背景色の設定のパネル 背景色 背景画面 使い方 ※ 以前はカスタマイザーの各バージョンのページの下方に載せていた内容ですが、重複するのでこのメモに移動しました。 [👉 最新版の「キャスコメCSSカスタマイザー」の「コメント欄サンプル」表示 ] コメント欄サンプルの背景画像と背景色の設定のパネル 背景画像URL: 背景色: [ 背景画像と背景色の説明 ] カスタマイザーのバージョンがv0.1以降の場合は、ページを縦にスクロールしてもある程度のスクロールなら「コメント欄サンプル」は表示画面の上部に固定して表示される設定になっていますが、背景画像と背景色の設定用のパネルはページと一緒にスクロールするので表示画面の外に移動してしまいます。 背景画像と背景色の設定を操作したい場合は、ページ...