Moonmile Solutions Blog

MVVM でユーザーコントロールを作るときに微妙にハマるのがユーザーコントロールです。例えば、ユーザーコントロール内に TextBox を貼り付けておいて、外側の ViewModel からユーザーコントロールに値を設定することはできるのですが、逆にユーザーコントロール内の TextBox に入力された値を ViewModel の反映しようとすると難儀します。というか、難儀していたのだけど、解決できたので書き残しておきます。

UserControl に対して ViewModel 側からバインドしたい場合は、DependencyProperty を使って依存関係プロパティを作って設定します。表示のための TextBlock とか DataGrid を使ったリスト表示の場合は、これで十分なのであまり問題はないのですが、さて、UserControl 内に貼り付けた TextBox から ViewModel のプロパティに反映させるためにはどうしたものか？と考えてしまうわけです。

色々調べていくと、ElementName を使って TextBox.Text に直接バインドする仕組みが紹介されているのですが、この方法だと UserControl の独立性が低くなって汎用性が低くなります。じゃあ、標準の TextBox やその他のコントロールのがりがりにカスタムで組んでしまえばできそうなものなのですが、これもちょっと大変すぎる。

BindingOperations.GetBindingExpression を使う

.NET Framework の WPF の TextBox コードを直接眺めていくと https://referencesource.microsoft.com/#PresentationFramework/src/Framework/System/Windows/Controls/TextBox.cs,77a66fa4f401a49f? BindingOperations.GetBindingExpression というメソッドがあって、バインド関係の情報を取得することができます。バインド先のプロパティ名を示す Path プロパティや、結びついているオブジェクトを示す Target プロパティなどがあります。

コントロールから ViewModel への値の設定（コントロールからソースへの反映）は、主にコントロールからフォーカスが外れたときになるので LostFocus イベントで設定すると以下のようにシンプルに書けます。

this.text.LostFocus += (_, __) => {
    BindingExpression beb = BindingOperations.GetBindingExpression(this, YourNameProperty);
    if (beb != null)
    {
        beb.Target.SetValue(YourNameProperty, text.Text);
        beb.UpdateSource();
    }
};

バインドをしていないと、BindingOperations.GetBindingExpression メソッドは null を返すのでそれだけチェックをします。

バインド可能なユーザーコントロールを作る

2つのテキストボックスと1つの日付コントロールを持つユーザーコントロールを作ります。ユーザーコントロール内で MVVM してしまうと、MainView の DataContext と競合してしまうので、ユーザーコントロール内では x:Name で名前を付けて参照します。

public partial class PersonControl : UserControl
 {
     public PersonControl()
     {
         InitializeComponent();
         this.Loaded += PersonControl_Loaded;
     }

    public static readonly DependencyProperty YourNameProperty =
         DependencyProperty.Register(
             "YourName",
             typeof(string),
             typeof(PersonControl),
             new FrameworkPropertyMetadata(
                 "",
                 FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
                 new PropertyChangedCallback((o, e) => {
                     var uc = o as PersonControl;
                     if (uc != null)
                     {
                         string v = (string)e.NewValue;
                         uc.text.Text = v;
                     }
                 })));
     public static readonly DependencyProperty YourAddrProperty =
         DependencyProperty.Register(
             "YourAddr",
             typeof(string),
             typeof(PersonControl),
             new FrameworkPropertyMetadata(
                 "",
                 FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
                 new PropertyChangedCallback((o, e) => {
                     var uc = o as PersonControl;
                     if (uc != null)
                     {
                         string v = (string)e.NewValue;
                         uc.addr.Text = v;
                     }
                 })));
     public static readonly DependencyProperty YourBirthdayProperty =
         DependencyProperty.Register(
             "YourBirthday",
             typeof(DateTime),
             typeof(PersonControl),
             new FrameworkPropertyMetadata(
                 DateTime.Now,
                 FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
                 new PropertyChangedCallback((o, e) => {
                     var uc = o as PersonControl;
                     if (uc != null)
                     {
                         DateTime v = (DateTime)e.NewValue;
                         uc.date.SelectedDate = v;
                     }
                 })));
         
     public string YourName { get => this.text.Text; set => this.text.Text = value; }
     public string YourAddr { get => this.addr.Text; set => this.addr.Text = value; }
     public DateTime? YourBirthday { get => this.date.SelectedDate; set => this.date.SelectedDate = value; }

    private void PersonControl_Loaded(object sender, RoutedEventArgs e)
     {
         this.text.LostFocus += (_, __) => {
             BindingExpression beb = BindingOperations.GetBindingExpression(this, YourNameProperty);
             if (beb != null)
             {
                 beb.Target.SetValue(YourNameProperty, text.Text);
                 beb.UpdateSource();
             }
         };
         this.addr.LostFocus += (_, __) => {
             BindingExpression beb = BindingOperations.GetBindingExpression(this, YourAddrProperty);
             if (beb != null)
             {
                 beb.Target.SetValue(YourAddrProperty, addr.Text);
                 beb.UpdateSource();
             }
         };
         this.date.LostFocus += (_, __) => {
             BindingExpression beb = BindingOperations.GetBindingExpression(this, YourBirthdayProperty);
             if (beb != null)
             {
                 if (date.SelectedDate != null)
                 {
                     beb.Target.SetValue(YourBirthdayProperty, date.SelectedDate);
                     beb.UpdateSource();
                }
             }
         };
    }
}

3つのコントロールが貼ってありますので多少コードが長くなっていますが、

• DependencyProperty で、外側から設定できるプロパティを作る
• YourName 等で、簡易アクセスができるプロパティを作る
• LostFocus イベントで、内側から外の ViewModel に値を設定する

ということをやっています。ユーザーコントロールは3つのプロパティ

• YourName
• YourAddr
• YourBirthday

を持ちます。

謎だったユーザーコントロール内の TextBox 等の入力コントロール（これ自体はバインド機能がなくてよい）から、外側の ViewModel にデータを渡すためには、

• BindingOperations.GetBindingExpression でバインド先を探す
• Target.SetValue で値を更新する
• UpdateSourceでソース（バインド先のViewModel）に通知する

という手順になります。通知するタイミングは、サンプルの通り LostFocus イベントでもよいし、TextBox 内のテキストが変更されたタイミング、キータイプされたタイミングでも良いでしょう。

MainWindow から使う

メインウィンドウにユーザーコントロールといくつかのボタンを貼り付けます。ユーザーコントロールへのバインドは、独自に作ったプロパティにバインドさせます。

<local:PersonControl 
 YourName=&quot;{Binding Name}&quot; 
 YourAddr=&quot;{Binding Addr}&quot; 
 YourBirthday=&quot;{Binding Birthday}&quot; 
 Margin=&quot;4&quot; Grid.Row=&quot;1&quot; Height=&quot;99&quot; VerticalAlignment=&quot;Top&quot;/>

後はふつうの TextBox などと同じように MVVM でバインドするだけですね。これだとユーザーコントロールは一般的なコントロールと変わらないので、

public partial class MainWindow : Window
 {
     public MainWindow()
    {
         InitializeComponent();
         this.Loaded += (_, __) =>
         {
             _vm = new MainViewModel();
             this.DataContext = _vm;
         };
     }
     MainViewModel _vm;

    private void clickSave(object sender, RoutedEventArgs e)
     {
         _vm.Output = $"{_vm.Name}  {_vm.Addr}  {_vm.Birthday.ToString()}"; 
     }

    private void clickLoad(object sender, RoutedEventArgs e)
     {
         _vm.Name = "MASDUA";
         _vm.Addr = "OSAKA";
         _vm.Birthday = DateTime.Parse( "2000/1/1");

    }
 }
 public class MainViewModel : ObservableObject
 {
     private string _name ;
     private string _addr;
     private DateTime? _birthday;
     private string _output;

    public string Name { get => _name; set => SetProperty(ref _name, value, nameof(Name)); }
     public string Addr { get => _addr; set => SetProperty(ref _addr, value, nameof(Addr)); }
     public DateTime? Birthday { get => _birthday; set => SetProperty(ref _birthday, value, nameof(Birthday)); }
     public string Output { get => _output; set => SetProperty(ref _output, value, nameof(Output)); }
 }

実行すると、こんな感じになります。

参考にしてみてください。

FireScratch を C# で作っていた時に発覚したメモリーリックっぽい現象に当たったので、珍しく issue https://github.com/dotnet/corefx/issues/32454 を立てました。

サーバーのほうで、.NET Core か .NET Framework を使って以下のような簡易 HTTP サーバーを作ります。

namespace CheckHttpListener
 {
     class Program
     {
         static void Main(string[] args)
         {
             Console.WriteLine("test server .net framework");
             var listener = new System.Net.HttpListener();
             listener.Prefixes.Add("http://127.0.0.1:5411/");
             listener.Start();
             while (true)
             {
                 var context = listener.GetContext();
                 var res = context.Response;
                 res.StatusCode = 200;
                 var sw = new System.IO.StreamWriter(res.OutputStream);
                 sw.Write(string.Format("text {0}", DateTime.Now.ToString()));
                 sw.Close();
             }
         }
     }
 }

これに対して、テスト用にアクセスするクライアントを作っておきます。

namespace CheckClient
{
    class Program
     {
         static void Main(string[] args)
         {
             HttpClient client = new HttpClient();
             int cnt = 0;
             while ( true )
             {
                 var res = client.GetAsync("http://localhost:5411").Result;
                 var text = res.Content.ReadAsStringAsync().Result;
                 Console.WriteLine($"{cnt} {text}");
                 cnt++;
                 System.Threading.Thread.Sleep(20);
             }
         }
     }
 }

これを動かしておくと、.NET Framework の時にはサーバーのメモリが程よい大きさで止まるのですが、.NET Core のほうは、がんがんとメモリを食い潰してしまって最後にサーバーが倒れます。だいたい1時間ぐらい放置しておくと落ちます。

同じコードで、.NET Framework と .NET Core の挙動が異なるので、.NET Core の HttpListener のバグか？とも思ったのですが、どうやら HttpListener.GetContext が HttpListnerContonet が持つ Response オブジェクトの挙動が異なるので、一概にバグとは言えないような感じです。

Response を明示的に Close するか using を使う

解決策としては、Response に対して明示的に Close メソッドを呼び出すか、using を使って暗黙に Response が閉じられるようにします。

var context = listener.GetContext();
var res = context.Response;
 res.StatusCode = 200;
var sw = new System.IO.StreamWriter(res.OutputStream);
 sw.Write(string.Format("text {0}", DateTime.Now.ToString()));
 sw.Close();
 res.Close(); // ★

あるいは、

var context = listener.GetContext();
using (var res = context.Response)  // ★
 {
     res.StatusCode = 200;
     using (var sw = new System.IO.StreamWriter(res.OutputStream))
     {
         sw.Write(string.Format("text {0}", DateTime.Now.ToString()));
     }
}

のように書きます。この Close 処理は .NET Framework でも有効なので、これで同じコードで .NET Core でも .NET Framework でもメモリリークが出ないようになります。

大抵のサンプルは HttpListener をたくさん回さないので、この問題にあたることはないのですが、実際に作ってサーバー化すると数時間後に落ちたりするので注意が必要ですね。これ、Windows + .NET Core だけの現象なのか、それとも Linux + .NET Core でも発生するのかはあとで調べておきます。

クレウスさんの、

C#は倒しにくいけどJSならなんとかなる。
帰ったらnode.jsと戦う。

— クレウス@VRChat (@kleus_balut) 2018年9月28日

なところから、Web Speech API がブラウザ上で使えることが分かったので試してみるの巻です。

Web Speech APIの実装 – Speech Synthesis API | CodeGrid https://app.codegrid.net/entry/2016-web-speech-api-1

ブラウザ上で Web Speech API を使って文章の読み上げができる、って話は聞いてことはあったのですが、これ OS の機能をブラウザから呼び出している訳ではなくて、ブラウザの内部機能として実装されている、という話だったのですね。なので、Google Chrome で読み上げると Google の音声で喋るし、Edge で動かすと Microsoft の音声出力になります。おそらく Safari とかも違う音声になっているはず。

Javascript は簡単

読み上げするだけなら非常に簡単で、

var text = “hello world.”;
speechSynthesis.speak(new SpeechSynthesisUtterance(text));

と Javascript で書くだけです。text の部分は、文章を選択した場所でもよいし、何かを喋らせたい文章を書くもよし。声質も変えられるので、自前であれこれできます。

じゃあ、.NET から使ってみよう

ブラウザ上で音声を出せることは分かったけど、では、.NET からどう扱えばいいのか？ってことを考えると悩みどころなのですが、まあ、定番の WebBrowser か WebView を使えばなんとかなるでしょう？と考えました。

が、試してみると、意外と難関があることが判明。

• WinForms や WPF で使われている WebBrowser は内部で IE を使っているので、Web Speech API の対象にならない。

なので、確か WPF などで Edge エンジンを使えるようになったような気がしたので、調べなおしてみると、

WPFやWindowsフォームでEdgeのWebViewを使うには？［Windows 10 1803以降］：.NET TIPS – ＠IT
http://www.atmarkit.co.jp/ait/articles/1807/04/news017.html

に、ありますね。

どうやら、NuGet で「Windows Community Toolkit v3.0」を落としてきて、その中にある WebView を使えばよいそうです。Microsoft.Toolkit.Win32.Controls を NuGet でダウンロードします。ちなみに、このコントロールは .NET Framework 4.6.2 以上なので、別途 .NET Framework をダウンロードする必要があります。開発者向けのをダウンロードしないといけないので、https://docs.microsoft.com/ja-jp/dotnet/framework/install/guide-for-developers から新しいものを入れてください。

ツールボックスに「WebView」コントロールが増えるので、これをウィンドウに貼り付けます。

読み上げるための TextBox と Button も貼り付けておきます。

グレーの WebView は、呼び出し用にあるだけなので見えなくても大丈夫なはず。大抵の例は、ブラウザ上で Web Speech API を動かすわけですが、ここでは WPF に貼り付けてある TextBox を読み上げるようにします。

InvokeScript で Javascript を実行する

ブラウザ内にある Javascript を実行するのに、WebView には InvokeScript というメソッドがあります。WebBrowser のときには、WebBrowser.Document.InvokeScript だったのですが、WebView では Document がなくなっていて、直接 InvokeScript メソッドが追加されていますね。Document がなくなったのでブラウザの DOM を直接見ることはできなくなったのですが、まあ、InvokeScript があればトリッキーなことをして DOM を探ることもできるので問題はありません。

以下、は動作コードですが、いつか試行錯誤の痕跡を残しておきます。

public partial class MainWindow : Window
 {
     public MainWindow()
     {
         InitializeComponent();
         this.Loaded += MainWindow_Loaded;
     }
     private void MainWindow_Loaded(object sender, RoutedEventArgs e)
     {
         // web.IsJavaScriptEnabled = true;
         // web.Navigate("http://moonmile.net/speech.html");
         // 非推奨だがローカルファイルから読み込む
        web.NavigateToLocal("speech.html");
     }

    private void clickGo(object sender, RoutedEventArgs e)
     {
         var text = @"
<body>
<script>
function hello(text){
  speechSynthesis.speak(new SpeechSynthesisUtterance(text));
}
</script>
</body>
 &quot;;
         // 直接文字列を入れるとダメ
        // web.NavigateToString(text);
         this.web.InvokeScript(&quot;hello&quot;, new string[] { text1.Text } );
     }
 }

NavigateToString メソッドを使って、直接 HTML を入れることはできるのですが、なぜか InvokeScript メソッドを呼び出したときにアプリケーションごと落ちてしまいます。仕方がないので、Navigate メソッドで外部サイトから読み込むか、NavigateToLocal メソッドでローカルファイル（exeと同じフォルダ）から読み込みます。NavigateToLocal は非推奨ってことになっていますが、まあ、そのまま使えます。InvokeScript メソッドの呼び出しで落ちるのは、何かの初期化が足りていないんでしょう。

InvokeScript メソッドは、HTML 内にある Javascript の関数を直接呼び出せます。パラメータも渡すことができるので、これを TextBox から取り込みます。

ローカルファイルにある speech.html の内容は、以下のように hello 関数にひとつの引数を入れたものだけです。

<body>
<script>
function hello(text){
  speechSynthesis.speak(new SpeechSynthesisUtterance(text));
}
</script>
</body>

後は、ボタンを押して InvokeScript を呼び出せばふつうに Edge で喋ってくれます。

これは Unity で使えるのか？

さて、肝心のこの仕組みは Unity で使えるんでしょうか？って話なんですが、たぶん、ダメだと思うんですよね。UWP だと使えるんでしたっけ？

と思って、UWP で使ってみると…あっさりいけますね。UWP のほうはもともと内部的に Edge が使われているので大丈夫そうです。NavigateToString メソッドも普通に使えます。InvokeScript はダメで、InvokeScriptAsync だとうまく動きます。

public sealed partial class MainPage : Page
 {
     public MainPage()
     {
         this.InitializeComponent();
         this.Loaded += MainPage_Loaded;
     }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
     {
         // this.web.Navigate(new Uri( "http://moonmile.net/speech.html"));
         var text = @"
<body>
<script>
function hello(text){
  speechSynthesis.speak(new SpeechSynthesisUtterance(text));
}
</script>
</body>
 &quot;;
         this.web.NavigateToString(text);
     }

    private async void clickGo(object sender, RoutedEventArgs e)
     {
         await web.InvokeScriptAsync(&quot;hello&quot;, new string[] { text1.Text });
     }
 }

ってことは、Unity でもいけるのかも。

～～～
追記 2018/10/01

Unity はやってないのでわからないのですが、Xamarin.Forms と Xamarin.Android の WebView で試してみました。結果は「ダメ」です。Android 上の Chrome では動くのですが、WebView の内部で使っている Chrome（Chroniumらしい）が対応していないらしく、AspeechSynthesis を認識できません。ちなみに音声を出すだけならば、TextToSpeech があるので、それを使えば ok. iOS の WebView の場合は AspeechSynthesis が使えるようです。