前回の続きです。
最初に、前回までのエントリーで書いてきたことを少し振り返ります。
現時点で、成果物として次の２つのものができあがりました。
１．人間の話し声を、日本語認識し、テキスト化する機能
２．任意のテキストを、美少女ボイスで音声合成し、発声する機能
この２つの機能があれば、１．で生成したテキストを、２．に受け渡す工程を、人間の手で介在させてやることで、目的の「人間の声を美少女ボイスに変換・発声するシステム」が成立します。
ただ、人間の手を介在させるのはシステムとしてどうかというところがあるので、これら２つの機能をプログラムで結びつけます。
同時に、１．で使用しているWeb Speech APIは、ブラウザ上で動作するものですが、httpsな環境下で動作していないと、認識の都度、マイク使用の許可が必要になります。これでは不便ですので、httpsなサーバー上で動作するものを構築していきます。
JavaScript + C# = Blazor
上述のシステムを構成するのに適したフレームワークがあります。
それが「Blazor」です！
Blazorは、C#を使ったウェブアプリケーションを構築するのに適したフレームワークです。JavaScriptとC#をともに利用でき、それぞれのいい部分で、お互いの不利な部分を補うことができます。
詳しいことや、Visual Studio上で必要なSDK等については、上記のページで説明されているので、そちらをご一読ください。
Blazorには、サーバーサイド型と、クライアント型（WebAssembly）の2種類がありますが、CeVIOアプリケーションがWindows PC内でしか動作しないので、サーバーサイド型を使用します。
また、Blazorで作成したプログラムは、実行すると、それ自体はウェブサーバーとして動作します。ブラウザからウェブサーバーにアクセスすることで、実装したアプリケーション（ウェブサイト）の機能を利用することができます。
このとき、アプリケーション（ウェブサイト）はhttps上で動作し、また開発環境上では開発用のSSL認証情報を使用できるため、カメラの再許可問題も解決できます。
近年急速に成長するブラウザの機能も、C#と協調してアプリケーション内に取り込むことができるので、かなり強力なフレームワークになるのではないかと期待しています。
Blazor を使ってみよう！
多くの方はBlazorをさわったことがないでしょうから、まずはカンタンなサンプルをビルド＆実行してみましょう。
その後、このサンプルを少しいじって、目的の機能を実現します。
なお、開発にはVisual Studio 2019を使用します。
前回、TalkAgentのソリューション＆プロジェクトを作成しました。
今回は、前回のソリューションにプロジェクトを追加する形で、機能をたしかめていきます。
ソリューションに新しいプロジェクトを追加します。
「Blazorアプリ」という項目を選択してください。
無い場合は、Visual Studio にBlazor関係のパッケージを追加してください。
.NET Core 3.1 のSDKも必要です。詳しくは先ほど示したリンクに書いてあると思います。
VoiceRecognizerというプロジェクト名をつけました。
これ自体は、あくまで人間の声をテキスト化するものなので、これでいいんじゃないかなーなんて。
まぁ、人それぞれです。
ここはかなり重要な設定なので間違えないでください。
アプリの種類としては、
・Blazor サーバーアプリ
を選択します。
右側の「認証」の項目が、「認証なし」であることを確認します。
右側の「詳細設定」の項目が、「HTTPS用の構成」にチェックが入っていること、また「Dockerサポートを有効にする」にはチェックが入っていないことを確認してください。
それぞれ正しく設定されていれば、このまま「作成」します。
大部分がテンプレートから展開されます。
実はこのまま実行することもできます。なので、ためしに実行してみましょう。
そのまえに、ビルドの設定を変更します。
次の設定にしてください。
・ビルドの種類は「Debug」
・スタートアッププログラムは「VoiceRecognizer」を選択
・デフォルトではIIS Express となっている実行方法を「VoiceRecognizer」に変更
・Webブラウザーを「Google Chrome」に設定
サーバープログラムを1つのEXEにまとめるには、IIS Express ではなく実行プログラム（ここではVoiceRecognizer）を指定する必要があります。
また、日本語音声認識はChromeでしか動作しないので、WebブラウザはChromeである必要があります。
ビルドの種類をDebugにするのは、開発用SSL認証情報が使えるようにするためです。
もしかしたらReleaseでもいいのかもですが。。
私の場合、Blazorはすでに何度か触っているので、初回の方とは出てくる画面が違うかもしれませんが、もしSSLまわりでダイアログがでてきたら、有効にする的な選択肢をクリックしてください。
デバッグ実行してみましょう。
すると、この黒い画面が立ち上がります。
これは、ウェブサーバープログラムです。先ほど、IIS Express から単体アプリケーションに切り替えたので、一度ビルドしてしまえば、次からはVisual Studio なしにEXEを実行するだけでウェブサーバーが動作します。
同時にChromeも自動的に立ち上がります。
（たまに起動せずにこけることもあるので、その時は一度デバッグを停止して、もう一度デバッグ実行してみてください。）
URLを見ると、「https」で通信していることがわかります。
別のブラウザを立ち上げて、このURLを入力すると、そちらでもウェブサイトにアクセスできることが確認できます。
サンプルとして、かんたんなプログラムも用意されています。
たとえば、左メニューから「Counter」を選択し、「Click me」ボタンをクリックすると、数値が１ずつ加算され、表示が更新されます。
見た目はなんてことのない例ですが、実際にコードをみると、Blazorらしい実装がされています。
ブラウザを閉じると、アプリが終了します。
Blazor のプログラムを見てみよう！
Blazorのプログラムを見てみます。
今回主に編集するのは
Pages以下にある「Counter.razor」と「_Host.cshtml」の２つのファイルだけです。
これらをいじって、目的の機能を実現します。
Counter.razor を開いてみます。
中身はほんの16行のコードだけです。
「Click me」ボタンをクリックすると、IncrementCount()メソッドが呼び出されて、currentCount変数の値がインクリメントされます。
Current count: の横には、currentCount変数が指定されていて、この変数の内容がブラウザに表示されます。
かんたんですよね？
@code{}ブロック内や、@なんとかには、C#のコードや変数、メソッド名を記述します。
次に_Host.cshtml を開いてみます。
中身はHTMLのコードですが、これがすべてのrazorページ（先ほどのCounter.razorなど）をブラウザ上で表示するためのテンプレートになります。
JavaScriptのコードは、この_Host.cshtmlに記述することになります。
ちょっと長くなりましたが、今回はBlazorとは？というところと、サンプルプログラムの実行をしてみました。
次回は、日本語音声認識の機能をこのBlazorウェブサーバーに持たせます。
なんかけっこうゴールが見えてきた気がしませんか？
それではつづく！
