javascript - mecablog

Firebase Authentication のデータを別プロジェクトにコピーするスクリプトを書いた

表題の通り、Firebase Authentication のデータを別プロジェクトにコピーしたい状況が起こったので、それを行うためのスクリプトを書いた。 copy_firebase_auth.sh 使い方 Firebase CLI でコピー元、コピー先それぞれのプロジェクトにログインする Firebase の Web コンソール上でコピー元のハッシュパラメータをコピーし、スクリプトと同じディレクトリに .hashParameter として保存する PROJECT_FROM={コピー元プロジェクトID} PROJECT_TO={コピー先プロジェクトID} copy_firebase_auth.sh を実行する解説基本的にやっていることは単純で、Firebase のCLI にはユーザーのデータをディスク上に書き出す firebase auth:export と、書き出されたファイルから Authentication にデータを読み込む

tech

追加ソフトのインストール無しで、ボイスロイド品質のTwitchチャット読み上げを行う。

この記事の内容はもう使えません 2019年6月17日をもって、docomo による「音声合成【Powered by AI】API」が終了した [^1]。これにより、以下の方法によるチャット読み上げは使えなくなった。以前書いた、Webブラウザに内蔵されている音声合成エンジンを利用する記事（棒読みちゃんなどのインストール無しで簡単にTwitchチャットの読み上げを行う）を利用してほしい。あるいは、株式会社エーアイが提供するもの以外（HOYA製とNTTテクノクロス製）の音声合成エンジンを利用するAPIは引き続き提供されているので、知識のある方はそれらを使うのもいいだろう。概要先日、棒読みちゃんなどのインストール無しで簡単にTwitchチャットの読み上げを行うという記事を書いた。この記事では、StreamLab の Chat Box と、Web Speech API を組み合わせることで、追加のソフトウェアをインストールすることなく、Twitch チャットの読み上げを行う方法を書いた。上記の方法を応用すると、Twitch チャットの情報を Web Speech API

tech

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

2022年5月26日: 最近のOBS（Streamlabs OBS ではなく本家の方）は、OBSのブラウザ自体が音声を再生できるようになったようです。その場合について追記しました。（二重に音声が聞こえた場合、別にブラウザを開く必要はないので閉じてしまってください。） 2020年8月23日: コードを修正した件について追記しました。後続記事（docomo の API を使う版）は既に動かなくなっているので、その旨を追記しました。概要本記事では、追加のソフトウェアのインストールを行うことなく Twitch チャットの読み上げを行う方法について説明する。正確を期せば Chrome、 Firefox、Edge といったブラウザが必要になるが、多くの環境ではすでに導入されているだろう。

tech

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

概要 Cloud Firestore エミュレータをコマンドの並列実行支援モジュール concurrently と一緒に使う場合、コマンドを少し工夫しないと期待通りに動作しない。以下を行う必要がある。エミュレータの起動の際、firebase serve --only firestore < /dev/null とし、標準入力を /dev/null から取るようにする。 concurrently の--success (-s) オプションを適切に設定する。期待通りに動作する npm script の例を以下に示す。 "scripts": { "test": "concurrently --success=first --kill-others -n 'emulator,

development

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://gist.github.com/mecab/9890416390e8c5a2c42547823d252e20 で参照できる。 (adsbygoogle = window.adsbygoogle || []).push({}); 背景と問題 Firebase Hosting は Google が提供する静的コンテンツのホスティングサービスだ。コンテンツを用意して適切な設定を書けば、そのコンテンツをHTTPで取得できるように

javascript

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

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