かごんま.NET 勉強会 #6 XAML
1. TL;DR
-
かごんま.NET 勉強会 #6 XAML
2020/02/19(水)
-
内容
2. XAML の紹介
スピーカー：政倉様
2.1. WPFについて
一度死滅したようなものだが、.NET Coreのデスクトップアプリケーションで採用されたため、よみがえった。現時点では、Windowsのデスクトップアプリで使用する。
XAMLベースである。
レイアウトの考え方がWebに近く、DIVタグのように親に対して最大の大きさとなるのが基本。コンテンツが画面サイズに対してはみ出さないようなサイズに調整される。つまりマルチサイズに強い。
WinFormsもマルチサイズで対応できないわけではないが、WPFに比べると苦労する。
2.2. 特徴
2.2.1. High DPI
最近のノートPCは高解像度が基本である。高解像度ということはディスプレイの拡大率が100%ではなく、150%表示の設定になる。
WinFormsはこの高解像度に対応していなかったため、WPFはその点が強みだった。
しかし、.NET CoreになってからWinFomsも高解像度に対応したため、必ずしもWPFの強み、というわけではなくなった。
| フレームワーク | アプリケーションタイプ | 高解像度 |
|---|---|---|
| .NET Fx | WPF | 対応 |
| .NET Fx | WinForms | 部分的に対応（★詳細を未調査） |
| .NET Core | WPF | 対応 |
| .NET Core | WinForms | 対応（★詳細を未調査） |
参考：Windows フォームでの高 DPI サポート
https://docs.microsoft.com/ja-jp/dotnet/framework/winforms/high-dpi-support-in-windows-forms
2.2.2. WPF Themas
コントロールごとにテーマを適用することができる。
カスケードはできないためCSSまでとはいかないが、コントロールに対してテーマを適用できるので統一したデザインを行うことができる。
WPFコントロールのデフォルトスタイルもこのテーマを利用して適用されている。
2.2.3. Flexible Control
WPFの大きな利点であり特徴といえる。
これは、コントロールの中にコントロールを表示できるということ。例えば、ボタンの中にボタンを入れられる。
これだけなら何に使うんだ？と思うかもしれないが、コントロールの中に階層化できるということは
・ボタンの中にイメージ、テキストを並べる
・リストボックスの中にイメージ、ラベル、イメージを並べる
・リストボックスの1行の複数行のコントロールを並べる
のようなことが簡単に短い行数で実現できる。
しかもこれは使いまわし可能！
WinFormsでも同様なことはできなくはないが
・工数が増大する（オーナードロー、座標を計算して自分で描画）
・後で見てもどういうことをしているかわかりにくい（構造的に示されていない）
・変更しても変更点がわかりにくい（ソース管理で変更履歴が追いにくい）
など、工数がかかり管理しにくい
ぜひ使ってみてほしい！
2.2.3.1. コードの見やすさとソース管理システムとの相性の良さ
XAMLはXMLなので、コントロールの階層化がコードを見たときにもわかりやすい。
しかしWinFormsではわかりにくい。
WinFormsでは、Designer.vbに書かれているが階層化されておらず関係性がわかりにくい。正確にはデザイナーとアウトラインウインドウでないと人間が把握することは厳しい。
これはソース管理（Git, AzureDevOpsなど）との相性が悪く、履歴を見ても何を変更したのかわからないということでもある。
2.2.4. Animation 3D
例えばマウスオーバーの時に色が変わる、ということをしようと思ったら
・WinForms → イベントにコーディング
・WPF → XAMLでコントロールにプロパティを設定
しかもこのプロパティではアニメーション（回転したりなども！）を行うことができる。
コントロールの振る舞いとしてアニメーションを簡単につけることができる。
例えば、OKというテキストを持つ場合にはボールドにするなどを行うことができる。
この発展形としては、立体を書いてその一面に入力した文字をテクスチャとしてリアルタイムで貼り付けて反映する等もできる。
しかもこれをXAMLだけで！
これらの3Dに関するプロパティや設定値はUnityなどをしていたらなじみ深いかもしれない。Unityなどでよく使う効果（ぼやけさせる等）もそろっており、カメラの角度等も変更することができる。
2.2.5. Data Bindings
データモデルは、ViewとViewModelと分かれている。
これらのプロパティを双方向に監視している（双方向バインディング）のが特徴。Viewのプロパティが変われば、ViewModelで感知して反映、ViewModelのプロパティが変われば、Viewで感知して反映される。
もしこれをコードで書くとなるとコード量が大変になるし、ループしないように書かなければいけないので大変。
実は、WPFにはMVVMという考え方はなかった。後からできた考え方なので簡単にやるならばPrism等のプラグインを使用したほうが楽である。
2.2.5.1. WinFormsでは
WinFormsのバインディングにはバグがあるし、Designer.vbの行を見るかひたすらコントロールのプロパティを見なければいけないので大変。
2.2.5.2. データバインドは必須ではない
確かに、WPFでのデータバインディング、MVVMには利点も多いが必須ではない。WinFormsで行っていたようにプロパティに設定する方法も使用できる。
必要性、どのようなプログラムなのかを考えて選択すればよい。
2.2.5.3. バインディングの利点
WPFでバインディングを使用していると、Viewの改善が楽である。
もしバインディングしているViewのコントロールが不要となったら消すだけでよく、反映されなくなるだけ。変更に伴うコード量を少なくすることができる。
2.2.5.4. 【余談】他フレームワーク（Web）でのMVVMの実装について
Vue.js、Anguler.jsでもMVVMを実現しているが、この実装は無理やりだったりする。Angularは値を総なめしていることで強引に実現している。
2.2.6. Command
処理をコントロールに関連付ける、というもの。
イベントに記載する方法と比べると、コントロールに対する処理ということがはっきりし、処理をまとめやすい。
2.3. コントロールについて
最初からStack、Gridなどのレイアウト用コントロールが存在している。これらのコントロールを使用してレイアウトをしていく。
マルチサイズという利点はなくなるが、どうしても固定配置（絶対配置）を行いたいならばCanvasというものが存在する。
2.4. 参考になるライブラリ
2.4.1. Prism
MVVMフレームワーク。MVVMを行うならば、必須となる。
参考
2.4.2. Extended WPF Tool kit
様々なコントロール集。
例えば、スピンコントロール（数値を上下の小さいボタンで切り替えるコントロール）も、Visual Studioのドックウインドウもある。もともとはSharpDevelopのVisual Studioもどきで使われていた。
参考
2.4.3. Avalonia
デスクトップアプリのクロスプラットフォーム。詳細は自分で調べてみよう。
参考
2.5. WPFはどのような人が使うべきか？
- 見た目にこだわりたい
- 3Dを使う
- アニメーション
- （筆者の経験から）タッチ対応（タブレット対応）したい
- WinFormsで、タブレット対応をは困難。スクロールがスムーズでない、High DPI対応が大変、スクロールに反応しない（ラベルやボタンをおくとスクロールしなくなったりし煩雑なコーディングが必要か、実現できない）など。
2.6. WPFの欠点は？
- プロパティとイベントがC#標準のものではない
- Mainウインドウにプロパティを足すのが大変。すごく長い行を書く必要がある。（ぜひResharperを使いましょう！）
- 標準ではものすごく大変。
- コントロール拡張が大変
- 変更を検出する仕組みは自分で書かないといけない。これはMVVMは後から出てきた考えのため。
- INotifiPropertyChangedをつける
- 標準ではなく、Prismを導入したほうが良い
- Resharperは便利！！！！！
3. 余談
政倉さんの豊富な知識により色々教えていただきました！
3.1. VSCodeでElectronを使っているらしいが、どうやってクロスプラットフォームを実現しているのか
これはChromiumとnode.jsを使って実現している
https://qiita.com/seihmd/items/8caf3af3b7a612b3c628
https://qiita.com/saki-engineering/items/203892838e15b3dbd300
Visual Studio Codeは、もともとVisual Studio Onlineとして実現しようとしていたコードが元となっている。
なので政倉さんが書いた記事にあるように、Web上でコードエディタを実現することが楽にできる
https://qiita.com/masakura/items/5683e8e3e655bfda6756#おまけ
3.2. NETでWebAssemblyで夢が広がるか？
3.2.1. WebAssemblyをつかうとWebが速くなるのか
速いとは、という定義を考えてみる必要がある。
たとえば、C++よりJavaのほうが早い場合がある。本気で最適化したC++には勝てないが、Javaは動作しながらコンパイル（JITコンパイル）しているので、処理によってはJavaが速い場合もある
3.2.2. 速度比較
純粋な動作比較をしてみたところ、WebAssemblyのほうが早い。ただ、JavaScriptエンジンも早くなってきているので、それほど変わらないかもしれない。
3.2.3. WebAssemblyで気になるのは
起動に時間がかかる。たとえば、.NETのWebAsseblyなら必要なところを読むのデータ量が多いこともあり、起動するまでに時間がかかる。
また、Web側とメモリ共有していないので受け渡しに時間がかかる
3.2.4. Blazor
今のところ、Blazor for Serverというサーバー側で動作するものがリリースされている。Blazorのクライアント版は今のところはパフォーマンスを上げられていない。
関連
3.3. XMLの成り立ち
XHTMLをかくためにXMLを作った。が、XHTMLは流行らず無くなった。
なぜ流行らなかったのか？一番の問題だったのは厳密さである。
HTMLは記述が少々間違っていても出る。足りなくても補完されるし、下手したらタグがなくても出る。これは、書いたことが表示されるべきである、という考え方によるもの
XHTMLは厳密すぎて、記述がちょっと外れていただけでも表示されないのが問題
3.4. BlinkとWebKitは似ているの？（EdgeがChromium化されたことによる質問）
たしかにBlinkはWebKit派生ではあるが、もうあまり似ていない。
FireFoxがなくなることを考えると、Chrome系とSafari系の2つのみとなりそう。独占されることがいいことかはわからないが。
3.5. 5Gの登場でDaaS（Desktop as a Service）は再燃するのか？
デスクトップ環境がクラウド上に展開され、外部のサービス事業者が提供している場合はDaaS。自社内のサーバー（またはデスクトップPC）にデスクトップ環境が展開され、自社内で運用されている場合はVDIといえるでしょう。
5Gにおける目標性能は、「高速・大容量：20Gbps」、「低遅延：1msec」、「多数接続：100万デバイス/㎢」と4Gを圧倒します。現状の4Gであっても3D CADのような負荷の高い利用用途でなければ、ほとんど問題はないと思いますが、5Gの通信環境であれば、ストレスのないThin Client環境の構築も可能となるでしょう。
そうなると最大のネックは通信料となりますが、NTT docomoの吉沢和弘社長は産経新聞のインタビューにて以下のように発言がありました。
５Ｇは通信速度が現行の主流規格の４Ｇの10倍以上になるため、データ通信量も速度に比例して飛躍的に増加する見通し。ただ、通信料金をデータの使用量に比例して増やせば、利用料金が大幅に高くなる。吉沢氏は「速度が10倍なら料金を10分の１、速度が20倍なら20分の１にできるように通信ネットワークの技術を高め、コストを削減しなければいけない」と強調した。