Blazorをはじめよう!!-Get started with Blazor!

Slide 1

Slide 1 text

Blazorをはじめよう!! Get started with Blazor! Speaker:@AtriaSoft 2020/03/15(日) SAMIT Online! 20.03

Slide 2

Slide 2 text

About me. @AtriaSoft http://atriasoft.work/ Atria64 • Atria(あとりあ) • 公立はこだて未来大学B1 • .NET技術を勉強しています • C#絡むと目の色変えます • 最近はBlazor,Xamarin • TweetDeck２窓検知 TwD3作りました使ってください

Slide 3

Slide 3 text

.NETの技術が好き！

Slide 4

Slide 4 text

本日の話題 Speaker : @AtriaSoft

Slide 5

Slide 5 text

Speaker : @AtriaSoft Blazor

Slide 6

Slide 6 text

Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 • Razor構文で記述できる(ASP.NET利用者に優しい) • 豊富な.NET資産を使える(多くのライブラリやNuGet)

Slide 7

Slide 7 text

Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 • Razor構文で記述できる(ASP.NET利用者に優しい) • 豊富な.NET資産を使える(多くのライブラリやNuGet) シングルページアプリケーション（Single Page Application）単一のWebページでアプリケーションを構成する設計構造の名称「なんかいい感じのやつ」と捉えておけばいいと思います

Slide 8

Slide 8 text

手軽にアプリを作ってみる Speaker : @AtriaSoft

Slide 9

Slide 9 text

新規プロジェクトを作成します Visual Studio 2019 Preview(16.5.0 Preview 4.0) を使用しています Q.プロジェクトテンプレートがない A. Visual Studioのバージョンが低い or インストール諸々をしていないなどここでは説明を省きます Speaker : @AtriaSoft

Slide 10

Slide 10 text

“Blazor サーバーアプリ” を選択 Speaker : @AtriaSoft

Slide 11

Slide 11 text

こんな感じのが生成されて Speaker : @AtriaSoft

Slide 12

Slide 12 text

Runしてみるとしっかりと動く SPAなので、ネットワークアクセスが最初だけ Speaker : @AtriaSoft

Slide 13

Slide 13 text

Razor構文なので、

タグなどでページを表現できる Speaker : @AtriaSoft

Slide 14

Slide 14 text

でボタンの設置もらくらく Speaker : @AtriaSoft

Slide 15

Slide 15 text

入門文字を切り替える Speaker : @AtriaSoft

Slide 16

Slide 16 text

ボタンをクリックしたら文字を切り替えるアプリを作ってみる Speaker : @AtriaSoft

Slide 17

Slide 17 text

ソースコードの全容 Speaker : @AtriaSoft

Slide 18

Slide 18 text

解説パートです

Slide 19

Slide 19 text

@codeブロック @codeブロック内ではイベント処理などをC#コードで記述できる。いつものようにC#を書ける。

Slide 20

Slide 20 text

@を起点としてcodeブロックの記述とつなげる事ができる。

“@変数”

などと記述すると変数がstring型として解釈され表示される。の@onclickを設定すればcodeブロックの関数を起動できる

Slide 21

Slide 21 text

割と慣れれば簡単。

Slide 22

Slide 22 text

Runしてみるとしっかり動くことがわかる Speaker : @AtriaSoft

Slide 23

Slide 23 text

ステップアップ部分文字列か判定する Speaker : @AtriaSoft

Slide 24

Slide 24 text

つくるもの Speaker : @AtriaSoft

Slide 25

Slide 25 text

元の文字列からある文字列が含まれているかを確認する Speaker : @AtriaSoft

Slide 26

Slide 26 text

ソースコードの全容 Speaker : @AtriaSoft

Slide 27

Slide 27 text

解説パート2

Slide 28

Slide 28 text

タグでユーザー入力インターフェイスを作成できる。入力された情報を @bindを用いることで変数にバインドしている。これにより、@inputや@checkerの変数を参照することでどんな文字列が入力されたかを把握できる。

Slide 29

Slide 29 text

ボタンがクリックされたときに String.Containsメソッドを用いて部分文字列かどうかを判定している。判定の結果によって @status の値を変更している。 Input,checkerには先程バインドしたことで入力された値が格納される。バインド is 便利.

Slide 30

Slide 30 text

やっぱり慣れれば簡単。

Slide 31

Slide 31 text

実際に動かしてみる Speaker : @AtriaSoft

Slide 32

Slide 32 text

応用編ファイルのアップロードをしてみる Speaker : @AtriaSoft

Slide 33

Slide 33 text

普通に難しいと思うのでさらっと聞いていってください Speaker : @AtriaSoft

Slide 34

Slide 34 text

リンク先の変更 (1/2) • NavMenu.razorファイルを編集することでナビゲーションメニュー周りを編集できる。 • NavLinkのhrefを任意のリンク名に編集する • (((NavLink色々いじると楽しいです))) Speaker : @AtriaSoft

Slide 35

Slide 35 text

リンク先の変更 (2/2) 先程NavLinkのhrefに設定した、任意のリンク名を @page にも記述する。 →リンク先URLを変更できた！ Speaker : @AtriaSoft

Slide 36

Slide 36 text

今回はBlazorInputFileを使用します調べた感じこれが便利そうに見えました(もっといいのあるかも) Speaker : @AtriaSoft

Slide 37

Slide 37 text

BlazorInputFile導入の手順 1. NuGetする 2. _Imports.razorの編集 3. _Host.cshtmlの編集 4. ファイルアップロードを行うインターフェイス&クラスの作成 5. StartUp.csの編集 6. インターフェイスのインジェクト正直なところ大変です Speaker : @AtriaSoft

Slide 38

Slide 38 text

みんな大好きNuGet プレリリースを含めるにチェックを入れること

Slide 39

Slide 39 text

_Imports.razorの編集あらかじめ使用する名前空間を _imports.razorに追加しておきます。 Speaker : @AtriaSoft

Slide 40

Slide 40 text

_Host.cshtmlの編集に以下の一文を追加します。 Speaker : @AtriaSoft

Slide 41

Slide 41 text

インターフェイス&クラスの作成 “新しい要素の追加”から新しくファイルアップロード周りのクラスを追加します。 Speaker : @AtriaSoft

Slide 42

Slide 42 text

ざっと書く • 細かい説明は省く • インターフェイスを宣言する →実装する • UploadAsyncは指定したパスにアップされたデータのバイナリを流し込んでいるだけ。 Speaker : @AtriaSoft

Slide 43

Slide 43 text

IWebHostEnvironmentの知見 • IWebHostEnvironment.WebRootPathと取ると wwwrootまでの絶対パスをstring型で取ることができる。 • IWebHostEnvironment.ContentRootPathと取るとアプリケーションのコンテンツファイルを含むディレクトリへの絶対パスをstring型で取ることができる Speaker : @AtriaSoft

Slide 44

Slide 44 text

StartUp.csの編集 ConfigureServicesに以下のように追加。 services.AddScoped<{作ったインターフェイス名},{クラス名}>(); Speaker : @AtriaSoft

Slide 45

Slide 45 text

インターフェイスのインジェクト @inject {作ったインターフェイス名} 任意の名前で inject できます。これでやっとつかえる。 Speaker : @AtriaSoft

Slide 46

Slide 46 text

タグで”ファイル選択ボタン”が設置できるように Speaker : @AtriaSoft

Slide 47

Slide 47 text

ダイアログも出てくれる Speaker : @AtriaSoft

Slide 48

Slide 48 text

[下準備]ディレクトリの整備 • 先程出力先のPathに ”Upload”を設定したので、 webroot直下に”Uploadフォルダ” を作成しておこう Speaker : @AtriaSoft

Slide 49

Slide 49 text

これでファイルを選択すれば Speaker : @AtriaSoft

Slide 50

Slide 50 text

webroot¥Uploadにファイルがアップロードされる！ Speaker : @AtriaSoft

Slide 51

Slide 51 text

実際に動かしてみる(2) Speaker : @AtriaSoft

Slide 52

Slide 52 text

未来を感じる技術Blazor • 超特急で開発が進んでいる激アツフレームワーク • 簡単に色々なものが作れそうなポテンシャル • Blazorでネイティブモバイルアプリが作れる(かも)!? – キーワード:Mobile blazor bindings • 何よりC#で書けるのが素晴らしいよねって話 Speaker : @AtriaSoft

Slide 53

Slide 53 text

Blazorはじめてみませんか? Speaker : @AtriaSoft

Slide 54

Slide 54 text

Blazorをはじめよう!! Get started with Blazor! Speaker:@AtriaSoft 2020/03/15(日) SAMIT Online! 20.03

Slide 55

Slide 55 text

参考文献リスト • File uploads with Blazor (http://blog.stevensanderson.com/2019/09/13/blazor-inputfile/) • Getting the Web Root Path and the Content Root Path in ASP.NET Core (https://mariusschulz.com/blog/getting-the-web-root-path-and-the-content-root-path-in-asp-net-core) • Announcing Experimental Mobile Blazor Bindings (https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/) Speaker : @AtriaSoft