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

SAMIT Online! 20.03でのBlazorに関するLT資料です。
ConnpassURL→https://samit.connpass.com/event/169421/
---
・Blazorの概要
・入門-ボタンで文字を切り替える
・ステップアップ-部分文字列か判定する
・応用-ファイルのアップロードをしてみる
・その他 IWebHostEnvironmentの知見 など

Transcript

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

   View Slide

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

   View Slide

3. .NETの技術が好き！
   

   View Slide

4. 本日の話題
   Speaker : @AtriaSoft
   

   View Slide

5. Speaker : @AtriaSoft
   Blazor
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Razor構文なので、
    タグなどでページを表現できる
    Speaker : @AtriaSoft
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 解説パートです
    

    View Slide

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

    View Slide

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

    View Slide

21. 割と慣れれば簡単。
    

    View Slide

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

    View Slide

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

    View Slide

24. つくるもの
    Speaker : @AtriaSoft
    

    View Slide

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

    View Slide

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

    View Slide

27. 解説パート2
    

    View Slide

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

    View Slide

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

    View Slide

30. やっぱり慣れれば簡単。
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. StartUp.csの編集
    ConfigureServicesに以下のように追加。
    services.AddScoped();
    Speaker : @AtriaSoft
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. 参考文献リスト
    • 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
    

    View Slide