2024/02/03 Fukuoka .NET Conf登壇資料

1. 九州工業大学 情報工学部2年
木須 遥大

2. • 自己紹介
• 主な活動
• 活動のきっかけ
• 作成したプロダクトや記事 (推し技術の紹介)
• C# Dev Kit (.NET MAUI)
• .NET MAUIにおけるC# Devkit
• .NET 8 におけるMAUI

4. • 名前 : 木須 遥大
• ハンドルネーム : Mizuha
• 所属 : 九州工業大学情報工学部 2年
• よく使う言語 :
C#, TypeScript, (稀にF#)
• 好んで使うフレームワーク等 :
ASP.NET Core, WinUI3, UWP
• 最近の一言 :
「Azure for Studentのサブスクリプションが切れた(絶望)」
X:
@mizuha_kis

5. • 所属サークル :「C3」
• コンピューターを使った創作活動をするサークル
• 個人開発やハッカソンへの出場
• 個人開発の内容
• Windows Desktop アプリ開発
• Web アプリ開発

6. 1. 大学1年の時，授業で習うC言語のCUIのアプリだけではなく，
GUIのアプリにも触れたかった．
2. 大学生協で偶然，C#のWindows Formsを使ったGUIアプリ開
発の入門書を見かけた．
3. C言語もC#も似ているだろうという当時何も知らない私の偏
見からC#を触り始めた．
4. Visual Studioにあるプロジェクトテンプレートのリストから，
気になった.NETのフレームワークを調べて，触るようになっ
た．

7. • 「TransClip」
• スクリーンショットから，文字認識して翻訳するアプリ
• ハッカソン出場時に作成
• 「Echo Reminder」
• 音声認識で予定の追加でき，その声でリマインドするアプリ
• ハッカソン出場時に作成
• Static Web Appsを使ったTodoアプリのハンズオン
• React.js + Azure Functions(C#)でTodoアプリを作るハンズオン記事
• 「C3 Advent Calendar」の一環として作成
(todo-app/README.md at main · Mizuha-hk/todo-app (github.com))

8. • 使用したフレームワーク，ライブラリ
• WinUI3
• Windows App SDKに付属するネイティブUIプラットフォームコンポーネント
• Windows10以降を対象としたデスクトップアプリが作成できる
• Windows.Media.Ocr
• Windows ランタイム APIに属し，画像からテキストを読み取るOCR APIを提供
する．
• ZXing.net
• 2次元バーコードを読み取るライブラリ．
• WebView2
• Microsoft Edgeをレンダリングエンジンとして，ネイティブアプリにWeb要素を
埋め込むことができる．

9. • 機能詳細
• スクリーンショットを撮ると，その画像から文字を認識する．
• 認識した文字を外部の翻訳APIを使って翻訳し，結果を出力する．
• スクリーンショットに含まれる2次元バーコードを読み取り，読み取っ
たURLを画面右側に配置されたWebViewで表示する．

10. • 外観
詳しくは，こちらから(TransClip | Topa'z (topaz.dev))

11. • Fluent Design システムを採用
• Windows11 のモダンなUI
• XAMLによるUIの記述
• Xamlデザイナー未対応が惜しい…
• UXスタック，コントロールライブラリがWindows SDKから完
全に分離されている
• 後述のWindows SDKと密接なUWPと比べ，ライブラリの互換性が高
い

12. • OCRの機能がほんの数行でできる

13. • OCRで認識する言語について
• 日本語を指定して，OCRを実行すると文字認識するが，英語を指定す
ると，OCRが動かない問題．
↓
Windows ランタイム APIなので，実行しているWindowsに英語の言語
パックがインストールされていないと動かない．

14. • 使用したフレームワーク，ライブラリ，サービス
• UWP
• Windows 10以降のデスクトップアプリを作成可能．
• Windows を実行するすべてのデバイスで共通の API を使用できる．
• Azure Speech Service
• 入力した音声をテキストに変換するために使用．
• UWPの環境でも使えるSDKがある．
• Open AI Api
• ユーザーが話した内容を予定に変換するために使用．

15. • 詳細
• UWPで使える音声入力機能を使って，「〇日に~~の予定を入れて」と
いった話しかける．
• Azure Speech Service が音声をテキスト変換．
• Open AI APIがテキストから予定をJsonとして整形して返す．
• JsonからデフォルトのWindowsのカレンダーに予定を登録
• Windowsカレンダーと予定の同期機能もある

16. • 外観
詳細はこちらから(Echo Reminder | Topa'z (topaz.dev))

17. • Windows10のUIデザインをデフォルトで使用できる．
• このアプリでは， Microsoft.UI.Xaml パッケージをインストールし，
リソースを適応させてFluent Design (Windows 11) を使用．
• Xamlデザイナー対応で，快適な開発体験
• Windows SDKと密接にかかわっている．
• 利点: Windowsの機能を使いやすい
• 欠点: C#ライブラリの互換性が低い

18. • ダーク/ライトモードの対応
• アクセントカラーの取得(ユーザー設定の色)
• ローカライズ(言語設定)
↓
全て動作環境のWindowsの設定を参照して，勝手に変わる

19. • ローカライズ
リソースファイルを書き，特定の場所に入れるだけでいい
ディレクトリ構造
└ Project //UWPアプリのプロジェクト
├ Strings //各言語ごとのリソースファイル
├ en-US
｜ └ *.resw
└ ja-JP
└ *.resw
リソースファイル(.resw)

21. • Visual Studio Code向けのC#言語拡張機能
• 統合されたソリューション エクスプローラーによる C# プロジェクト
とソリューションの管理
• テスト エクスプローラーを使用してテストを実行およびデバッグする
ためのネイティブ テスト環境
• Roslyn を利用した言語サービスにより、コード ナビゲーション、リ
ファクタリング、セマンティック認識など、クラス最高の C# 言語機
能を実現します
• AI支援開発
(拡張機能の説明から抜粋，翻訳)
(Published 2023-06-07, 03:21:00)

22. • C# Dev Kitの拡張
• 機能
• F5キーで即座にアプリのデバッグ可能
• GUIでデバッグターゲットの変更可能

23. • ソリューションエクスプローラー
普通のファイルエクスプローラー 追加された
ソリューションエクスプローラー

24. • デバッグターゲットの変更
• 画面右下の { } をクリック
• MAUIのデバッグターゲットの選択可能
• デバッグ開始するプロジェクトの選択可能

25. • デバッグターゲットの変更

26. • F5キーでデバッグ

27. • ブレークポイントもVisual Studioと同じように使える
画面上部のメニューから操作可能

28. • 感じた問題点
• XAMLの書き心地
• ツールボックス，プロパティが見れない
ツールボックス プロパティ

29. • 感じた問題点
• XAMLの書き心地
• コード補完が無い
Visual Studio Visual Studio Code

30. • 問題へのアプローチ
Blazor Hybridで作る
Blazorであれば拡張機能が豊富
で書きやすい

32. • .NET 8 におけるMAUIは品質向上がメイン
• いくつかの新機能の追加
• 気になった新機能を紹介
• キーボードアクセラレータ
• ジェスチャ認識エンジン

33. • デスクトップ環境(Windows / Mac)でのショートカットキーの
実装ができるようになった
• 現状，MenuFlyoutItemオブジェクトにのみ適応可能

34. • プラットフォーム毎の指定
• Mac環境ではCmdキー，Windows環境ではCtrlキーのように指定が可能
参考(キーボード アクセラレータ - .NET MAUI | Microsoft Learn)

35. • 追加されたジェスチャー認識エンジン
• ポインター ジェスチャ
• ドラッグアンドドロップ ジェスチャ

36. • OnPointerEntered イベント
• 対象のUI要素にポインターが重なったときのイベント
• OnPointerExited イベント
• 対象のUI要素からポインターが出たときのイベント
• OnPointerMoved イベント
• 対象のUI要素の中でポインターが動いた時のイベント

37. • ある画像要素にポインタージェスチャを適応
参考(ポインター ジェスチャを認識する - .NET MAUI | Microsoft Learn)

38. • DragGestureRecognizer
• DragStarting イベント
• このUI要素をドラッグ開始したときのイベント
• DragStartingEventArgsクラスの引数eからデータパッケージを作成できる
• DropGestureRecognizer
• DragOver イベント
• この要素にドロップされたときのイベント
• DropEventArgsクラスの引数eからデータパッケージの情報を取得できる
参考(ドラッグ アンド ドロップ ジェスチャを認識する - .NET MAUI | Microsoft Learn)

39. • Visual Studio Codeを用いた.NET MAUIの開発について
• C# Dev Kitと.NET MAUI拡張機能により，Visual Studioが使用できな
い環境でも十分なデバッグ環境が提供された
• 現状XAMLの補完がまだ弱いので，Blazor HybridでMAUIのアプリを作
成するのが良さそう．
• .NET 8 のMAUI
• キーボードアクセラレータやジェスチャー認識エンジンの追加により，
デスクトップアプリ開発の選択肢としてMAUIを選択しやすくなった