ブラウザのプッシュ通知が簡単にできちゃうFirebase

2020.03.20

Logging

ブラウザのプッシュ通知が簡単にできちゃうFirebaseのでやり方を簡略的に記載します。

  1. Firebaseにプロジェクトを作成する(グーグルのアカウントが必要)。
  2. firebase cliというパッケージソフトをOSにダウンロードしそのソフトを任意のフォルダの中に移動させて起動させる。Node.jsはインストール済みとする(※手順)。
  3. 試しにホスティングしてみる。ホスティングはプロジェクトの左側の項目よりホスティングをクリックすると手順の説明通り行うと出来ます。
  4. URLより確認し表示されているか確認する。
  5. Cloud Messagingの設定よりFCM でウェブ認証情報を設定するからメッセージング オブジェクトを取得するまでをブラウザで操作し設定を行う。
  6. ローカルに下記のURLよりファイルをダウンロードする。ダウンロードするファイルはfirebase-messaging-sw.js, firebase-logo.png.webp, index.html, main.cssになります。動かない場合は再設定が必要。
    https://github.com/firebase/quickstart-js/tree/f76b14ca00cca48dbfca5c787c0a4ca73eb9857d/messaging
  7. ダウンロードしたファイルはpublicか自分が決めたフォルダに入れる。
  8. index.htmlソースの中に ‘<YOUR_PUBLIC_VAPID_KEY_HERE>’ と記載している部分があるので変更する。
  9. firebase cli より『 firebase deploy』する。
  10. ページを再読み込みして通知を許可する。
  11. Cloud Messagingから送信してみる。
  12. 通知が届くことを確認する。
    ※今回はブラウザのプッシュ通知なのでアプリを追加する際はWEB(</>)を選んでください。
Introducing Firebase Cloud Messaging

ではでは?健闘を祈る?

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

cli, Cloud, FCM, Firebase, firebase-logo, firebase-messaging-sw, index, JS, Messaging, node, OS, png, url, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, , 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目,

テキストを日本語ボイスに変換してくれるしょぼいWindowsソフトを作ったよ。

2020.01.21

Logging

VS2017のC#で、テキストを日本語ボイスに変換してくれるしょぼいWindowsソフト( 滑舌が悪いけどYOUTUBERしたい人用)を作ったよ。自分はかなり滑舌悪いくてどもるので、YOUTUBER向かないのですがユーチューバーしてみたい願望があったので、Gさんの「Cloud Text-to-Speech API」で適当に作ってみた。ちなみにまだYOUTUBERするかは決めてない!

APIですが月に0?100万文字までは無料枠なので、大量に使わない限り無料枠で収まると思います。これを他の人に提供しようとするとアウトだろうけど・・。
自分だけが使用するのには何とかその範囲内かと思います。

尚、ソースコードを提供します可変してお好みで使ってください。大量のテキストをボイス変換した場合、ビジーになるかもしれません。そこら辺の処理は入れてません。またGさんからダウンロードしたJSONファイルを置いている階層に合わしてください。

参考にしたサイトは下記になります。
https://cloud.google.com/text-to-speech/docs/quickstart-client-libraries?hl=ja#client-libraries-install-csharp

フォームのオブジェクトの配置は下記になります。画像を参照ください。

ソースコードは下記になります。

using System;
using System.IO;
using System.Windows.Forms;
using Google.Cloud.TextToSpeech.V1;
namespace テキストを日本語ボイスする
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            if(richTextBox1.Text.Replace("\r", "").Replace("\n", "") == "")
            {
                MessageBox.Show("文字を入力してください");
                return;
            }
            Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", "C:\\xxxxx\\xxxxx\\xxxxx\\xxxxx.json", EnvironmentVariableTarget.Process);
            TextToSpeechClient client = TextToSpeechClient.Create();
            SynthesisInput input = new SynthesisInput
            {
                Text = richTextBox1.Text.Replace("\r", "").Replace("\n", "")
            };
            VoiceSelectionParams voice = new VoiceSelectionParams
            {
                LanguageCode = "ja-JP",
                Name = "ja-JP-Wavenet-A",
                SsmlGender = SsmlVoiceGender.Neutral,
            };
            AudioConfig config = new AudioConfig
            {
                AudioEncoding = AudioEncoding.Mp3,
                SpeakingRate = f1(trackBar1.Value),
                Pitch = f2(trackBar2.Value),
            };
            var response = client.SynthesizeSpeech(new SynthesizeSpeechRequest
            {
                Input = input,
                Voice = voice,
                AudioConfig = config
            });
            DateTime dt = DateTime.Now;
            string dttimename = dt.ToString("yyyy-MM-dd-HH-mm-ss");
            using (Stream output = File.Create("voice-" + dttimename + ".mp3"))
            {
                response.AudioContent.WriteTo(output);
                Console.WriteLine($"Audio content written to file 'voice - " + dttimename + ".mp3'");
                MessageBox.Show("生成しました=>>voice - " + dttimename + ".mp3");
                System.Diagnostics.Process.Start(Directory.GetCurrentDirectory());
            }
        }
        private void trackBar1_ValueChanged(object sender, EventArgs e)
        {
            label3.Text = string.Format("{0:0.00}", f1(trackBar1.Value));
        }
        private void trackBar2_ValueChanged(object sender, EventArgs e)
        {
            label4.Text = string.Format("{0:0.00}", f2(trackBar2.Value));
        }
        private double f1(int a) {
            return Convert.ToDouble(a) / 100;
        }
        private double f2(int a)
        {
            return Convert.ToDouble(a) - 20;
        }
    }
}

変換したボイスはこんな感じです!

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

0, 100, 2017, API, Cloud, json, Text-to-Speech, VS, Windows, YOUTUBER, アウト, お好み, かなり, コード, これ, ソース, そこら辺, ソフト, ダウンロード, テキスト, ビジー, ファイル, ボイス, ユーチューバー, , , , 使用, 処理, 場合, 変換, 大量, 提供, 日本語, , , 滑舌, 無料, 範囲, 自分, 適当, 限り, 願望,