棒読みちゃんなどのインストール無しで簡単にTwitchチャットの読み上げを行う

概要 本記事では、追加のソフトウェアのインストールを行うことなく Twitch チャットの読み上げを行う方法について説明する。正確を期せば Chrome、 Firefox、Edge といったブラウザが必要になるが、多くの環境ではすでに導入されているだろう。本手法では、Streamlabs の Chat Box に対して、受信したチャットメッセージを Web Speech API の SpeechSynthesis に渡すカスタム Javascript コードを設定することで読み上げを実現する。 »

Cloud Firestore エミュレータ を concurrently と一緒に使う

概要 Cloud Firestore エミュレータ を コマンドの並列実行支援モジュール concurrently と一緒に使う場合、コマンドを少し工夫しないと期待通りに動作しない。以下を行う必要がある。 エミュレータの起動の際、firebase serve --only firestore < /dev/null とし、標準入力を /dev/null から取るようにする。 concurrently の--success (-s) »

Firebase Hosting のルーティングを噛ませて webpack-dev-server などの静的コンテンツホストを使うためのプロキシ

2019/1/14 午前5:57 (JST) provider のコードを修正。 概要 Firebase Hosting 用に設定したURL書き換えを利用しつつ、webpack-dev-server などの他の開発サーバーからコンテンツの取得をしたい。この問題に対して、Firebase Hosting の開発サーバー (firebase serve) が内部的に利用している superstatic を使い、URLを書き換えた上で別のサーバーからコンテンツを取得するようなプロキシを作ることで解決した。 完全なコードは https: »

Knockout.jsで新しいコンテンツが現在のコンテンツの上からスライドして入ってくるトランジションを作る

本記事ではタイトルに示すようにKnockout.jsで新しいコンテンツが現在のコンテンツの上からスライドして入ってくるトランジションの実装方法を説明する。文章だけではわかりにくいので以下に成果物のGIFを示す。 Knockout.jsでは、templateバインディングを用いると、ある種類のデータを表示するためのテンプレートを定義しておき、JS上でデータを与えると自動的にそのテンプレートを用いて描画するということができる。新しいデータを設定すると、明示的に変更を反映するような操作を行わずとも表示も更新される。 templateバインディングを拡張すれば、描画の前後にDOMの操作を行う新たなバインディングを作成することができる。これを利用して、 描画する直前に元々の要素をクローンする 元の要素を画面外右側へ移動する 元の要素を新しいデータで更新する 元の要素を通常の場所までトランジション付きで移動させる 移動が完了したら、クローンした要素を消す という手順で目標が達成できる。 完全なコードを以下に示す。なお、トランジションの時間もバインディングの際のプロパティで指定できるようにしてみた。 HTML: <!DOCTYPE »