1.
/ 42
Mobile Blazor Bindings
1
城東.NET #41
2020年02月19日
石崎 充良

2.
/ 42
自己紹介
石崎 充良 ( @mishi_cs )
Microsoft MVP for Developer Technologies
言語： C# XAML
活動：
・C# もくもく会 (connpass)
・城東.NET (connpass)
・C# Tokyo (connpass)
2

3.
/ 42
今 Blazor が熱い
3

4.
/ 42
Blazor
4https://www.publickey1.jp/blog/20/blazor_webassembly5blazorpwa.html
画像は Publickey より

5.
/ 42
ただし
現在、正式なのは Blazor サーバー アプリ だけ
しかしいくつかはプレビューや実験版で試せる
5

6.
/ 42
プロジェクト作成
6

7.
/ 42
作成してみたもの
•Blazor サーバーアプリ
•Blazor WebAssembly アプリ
•Mobile Blazor Bindings アプリ
7

8.
/ 42
Blazor サーバー
8

9.
/ 42
結論
普通に作れる
9

10.
/ 42
Windows
10

11.
/ 42
Windows
11

12.
/ 42
mac
12

13.
/ 42
生まれたもの
13

14.
/ 42
Blazor WebAssembly
14

15.
/ 42
プレビュー
プレビュー版です。
テンプレートのインストール
インストールされているテンプレートの確認
15
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
dotnet new --help

16.
/ 42
NuGet
16https://www.nuget.org/packages/Microsoft.AspNetCore.Blazor.Templates/

17.
/ 42
バージョン
17https://www.nuget.org/packages/Microsoft.AspNetCore.Blazor.Templates/

18.
/ 42
プロジェクト作成
18
dotnet new blazorwasm
>dotnet run
info: Microsoft.Hosting.Lifetime[0]
Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Production
info: Microsoft.Hosting.Lifetime[0]
Content root path: X:XXXXXX

19.
/ 42
生まれるソリューション
19
WebAssembly Server

20.
/ 42
Visual Studio (Win のみ)
20

21.
/ 42
Mobile Blazor
Bindings
21

22.
/ 42
WebAssembly と同じ
実験版です。
テンプレートのインストール
プロジェクトの新規作成
22
dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta
dotnet new mobileblazorbindings
02/09 まで
現在は 0.2.42-preview

23.
/ 42
生まれるソリューション
23

24.
/ 42
実行 (Android)
24

25.
/ 42
実行 (iOS)
25https://github.com/xamarin/MobileBlazorBindings/issues/30
02/05 に Closed
今は動作する

26.
/ 42
選択肢は増えない
26

27.
/ 42
Mobile Blazor Bindings
2020/02 アップデート
27

28.
/ 42
Announcing Experimental Mobile Blazor Bindings
February update
28https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-feb-2020-update/

29.
/ 42
概要
• コンポーネント(コントロール)の追加
• Xamarin.Essentials をプロジェクトテンプレートに追加
• 既存コンポーネントへの機能追加
• Blazor コンポーネントから Xamarin.Forms コントロール参照を簡単に取得
29

30.
/ 42
概要
• コンポーネント(コントロール)の追加
• Xamarin.Essentials をプロジェクトテンプレートに追加
• 既存コンポーネントへの機能追加
• Blazor コンポーネントから Xamarin.Forms コントロール参照を簡単に取得
30
今回の対象

31.
/ 42
テンプレート
テンプレートのインストール
インストールされているテンプレートのバージョン確認
または
31
dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.2.42-preview
dotnet new --debug:showconfig
dotnet new -u

32.
/ 42
既存プロジェクトのアップデート
.csproj ファイルを編集
↓
32
<PackageReference Include="Microsoft.MobileBlazorBindings" Version="0.1.173-beta" />
<PackageReference Include="Microsoft.MobileBlazorBindings" Version="0.2.42-preview" />

33.
/ 42
コンポーネント追加
33

34.
/ 42
百聞は一見に如かず
34https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-feb-2020-update/

35.
/ 4235https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-feb-2020-update/

36.
/ 42
動かしてみる
36
Slider に連動して
Progress の値も変化
(check ボックスでも)
ImageButton タップ
slider が Max に
(progress も Maxに)

37.
/ 42
ImageButton の画像表示
37

38.
/ 42
ImageButton の画像表示
38https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-feb-2020-update/

39.
/ 42
Xamarin.Forms
コントロールへの
参照を簡単に取得
39

40.
/ 42
参照を簡単に取得
40

41.
/ 42
まとめ
41

42.
/ 42
まとめ
•まだこれから
（少なくとも日本での実績・記事）
•注目度合いは非常に高い
（クライアントアプリサイド動き少ないし）
•話題になるし優先的に押さえておこう
42https://www.nuget.org/packages/Microsoft.MobileBlazorBindings/0.2.42-preview

43.
/ 42
ありがとうございました。
43