1. Uno platformかBlazor
ちょっとだけかじるレイアウトとUI技術のお話
Hiroyuki Mori
Microsoft MVP - Developer Technologies
#GyutanKaigi2019

2. #GyutanKaigi2019
自己紹介
森 博之 (もり ひろゆき)
Work
• Microsoft開発技術を専門にするフリーランスエンジニア
• テクニカルライター
• セミナースピーカー
Community
• AWS .NET Developer Users Group Japan
• Visual Studio Users Community Japan
• 極東IT-Engineers
• Visual Studio Code - Japanese Translation

3. #GyutanKaigi2019
Agenda
Uno platformかBlazor
• あらためてユーザーインターフェース
• Blazor
• Uno platform

4. #GyutanKaigi2019
ユーザーインターフェース
とデザイン
変わることと変わらないこと
4

5. #GyutanKaigi2019
この書籍はご存知ですか？
「デザインが苦手」の処方箋
フッターを追加 5

6. #GyutanKaigi2019
ジョシュアツリーの悟り
言葉を知ることの重要性
• 言葉を知り
• 言葉を得て
• 言葉を意識し
• 言葉を支配し
• 言葉を所有し
• 言葉をコントロールできる
6

7. #GyutanKaigi2019
4つの基本原則
フッターを追加 7
整列 近接
反復 コントラスト

8. #GyutanKaigi2019
整列
• 表示されるものはすべてを意図的に配置する必要がある
• あらゆる要素は他の要素と視覚的な関連を持つ必要がある
• これにより明解、洗練、新鮮という印象が生まれる

9. #GyutanKaigi2019
意図をもって位置を決める
• 表現として位置を決める

10. #GyutanKaigi2019
関係を表す
• インデントによって重要度を表現

11. #GyutanKaigi2019
近接
• 互いに関連する項目は近づけることでグループ化する
• バラバラな要素じゃなくなることで視覚的なユニットして認識される
• 近接は情報の組織化に役立ち、混乱を減らし、明解な構造を提供できる

12. #GyutanKaigi2019
整列と組み合わせると
• 極端な例ですが、関係や組織、構造は明確になったように思いませんか？

13. #GyutanKaigi2019
反復
• 色、形、質感、位置関係、線の太さ、書体、サイズ、画像などの視覚要素を繰り返す
• 繰り返すことで組織化を促進し、一体性を強化する

14. #GyutanKaigi2019
コントラスト
• コントラストによってページ上にある要素同士が「類似」するのを避ける
• もし、要素（書体、色、サイズ、線の太さ、形、空きなど）が「同一」ではないのであれば、はっきり違わ
せる
• コントラストはページ上でもっとも重要な要素に視覚を引き付ける要因になる。
• つまり「読む気にさせる」役割を持つ

15. #GyutanKaigi2019
フォントのサイズを調整
• 要素同士の関係が明確になったように思いませんか？

16. #GyutanKaigi2019
さらにコントラスト・整列・反復・近接を加える
• 意図や要素間の関係が明確になり、読みやすくなったような気がしませんか？

17. #GyutanKaigi2019
このように…
• レイアウトの基礎原則だけですが、キーワードを知り、理解できれば、コントロールできますね

18. #GyutanKaigi2019
WebAssembly
高速処理をWebで！
フッターを追加 18

19. #GyutanKaigi2019
WebAssembly
• Webブラウザーで実行可能なバイナリーコードによる処理を実行する仕組み
• コンパクトなバイナリー形式の言語で、ネイティブに近いパフォーマンスで動作
• HTML5の標準規格に含まれる機能でモダンなWebブラウザーが対応
• バイナリコードで記述するためサイズも小さいためロードも早く、効率的な構文解析が行われる
フッターを追加 19

20. #GyutanKaigi2019
Why WebAssembly?
• Webのコンテキストでは振る舞いを記述するのはJavaScript
• インタープリター言語であること。
• 動的型付け言語であるため構文解析に時間がかかる
• 本来、ちょっとした飾り付け程度の処理を行う用途で使用
• 現在のJavaScriptの用途
• フレームワークによる複雑なUI操作やアニメーション
• WebGLなどのグラフィック処理
• 高速な演算が必要な処理
• その他多岐にわたって利用されている
• Webの高速化→asm.js
• asm.jsはJavaScriptの記述方法に制約を設けることで型を明確にしてブラウザが事前コンパイルできるようにする技
術
• メリットはあったが、デメリットも･･･。
asm.jsの解決策→WebAssembly
Webのコンテキストでは振る舞いを記述するのはJavaScriptの役割
では、現在のJavaScriptの役割は？
Webの高速化→asm.js
asm.jsの解決策→WebAssembly

21. #GyutanKaigi2019
Blazor
インタラクティブなWeb UIをC#で！
フッターを追加 21

22. #GyutanKaigi2019
Blazor
• .NET(C#)でインタラクティブなUIを構築するためのフレームワーク
• 特徴
• JavaScriptではなく、.NET(Razor Pages , C#)でインタラクティブなWeb UIを作成
• WebAssemblyにホストされ、対応ブラウザーで動作
• Server-Client間でロジックの共有が可能
• Visual Studio を使用して開発できる
https://blazor.net
.NET(C#)でインタラクティブなUIを構築するためのフレームワーク

23. #GyutanKaigi2019
２つのホスティングモデル
• Server-side (recommendation
→Blazor Server App
• Client-side
→Blazor WebAssembly App
Signal R
Server-side (recommendation)
Blazor Server App
Client-side (preview)
Blazor WebAssembly App

24. #GyutanKaigi2019
Demonstration
Blazor
24

25. #GyutanKaigi2019
HTML5 - Web Standard
• Semantic Web Designに基づいてレイアウト

26. #GyutanKaigi2019
UnoPlatform
Single CodebaseアプリをC# / XAML で！
26

27. #GyutanKaigi2019
Uno Platform
• Universal Windows Platformは従来通り
• iOS, AndroidはMono + Xamarin上にUno Platformが用意したUWP互換APIを使用
• WebはWebAssembly上に動作するMonoにUno PlatformのUWP互換APIを使用
https://platform.uno/
フッターを追加 27
Web / Mobile / Desktop(UWP)をC# ＋ XAMLのシングルコードベースで開発するプラットフォーム

28. #GyutanKaigi2019
Demonstration
Blazor
28

29. #GyutanKaigi2019
XAML
• XML ベースのマークアップ言語
• UI構造の調整はXMLイメージで行いやすい！

30. #GyutanKaigi2019
UIテクノロジーには4つの基礎原則を用いる！
名前を知ったあなたはもうUIデザインが怖くなった！
30
まとめ

31. #GyutanKaigi2019
Thankyou!
Hiroyuki Mori
@hiroyuki_mori
31