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

748cf16e1d5fdb508f9725cd91fe1768?s=47 Atria
March 15, 2020

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

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

748cf16e1d5fdb508f9725cd91fe1768?s=128

Atria

March 15, 2020
Tweet

Transcript

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

  2. About me. @AtriaSoft http://atriasoft.work/ Atria64 • Atria(あとりあ) • 公立はこだて未来大学B1 •

    .NET技術を勉強しています • C#絡むと目の色変えます • 最近はBlazor,Xamarin • TweetDeck2窓検知 TwD3作りました使ってください
  3. .NETの技術が好き!

  4. 本日の話題 Speaker : @AtriaSoft

  5. Speaker : @AtriaSoft Blazor

  6. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク! • オープンソースのフレームワーク • かなり新しい技術

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

    • Razor構文で記述できる(ASP.NET利用者に優しい) • 豊富な.NET資産を使える(多くのライブラリやNuGet) シングルページアプリケーション (Single Page Application) 単一のWebページでアプリケーションを構成する設計構 造の名称 「なんかいい感じのやつ」と捉えておけばいいと思います
  8. 手軽に アプリを作ってみる Speaker : @AtriaSoft

  9. 新規プロジェクトを作成します Visual Studio 2019 Preview(16.5.0 Preview 4.0) を使用しています Q.プロジェクトテンプレートがない A.

    Visual Studioのバージョンが低い or インストール諸々をしていないなど ここでは説明を省きます Speaker : @AtriaSoft
  10. “Blazor サーバーアプリ” を選択 Speaker : @AtriaSoft

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

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

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

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

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

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

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

  18. 解説パートです

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

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

  21. 割と慣れれば簡単。

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

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

  24. つくるもの Speaker : @AtriaSoft

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

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

  27. 解説パート2

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

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

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

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

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

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

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

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

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

  37. BlazorInputFile導入の手順 1. NuGetする 2. _Imports.razorの編集 3. _Host.cshtmlの編集 4. ファイルアップロードを行う インターフェイス&クラスの作成

    5. StartUp.csの編集 6. インターフェイスのインジェクト 正直なところ大変です Speaker : @AtriaSoft
  38. みんな大好きNuGet プレリリースを含める にチェックを入れること

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

  40. _Host.cshtmlの編集 <head>に以下の一文を追加します。 <script src="_content/BlazorInputFile/inputfile.js"></script> Speaker : @AtriaSoft

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

  42. ざっと書く • 細かい説明は省く • インターフェイスを宣言する →実装する • UploadAsyncは 指定したパスに アップされたデータの

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

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

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

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

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

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

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

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

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

  52. 未来を感じる技術Blazor • 超特急で開発が進んでいる激アツフレームワーク • 簡単に色々なものが作れそうなポテンシャル • Blazorでネイティブモバイルアプリが作れる(かも)!? – キーワード:Mobile blazor

    bindings • 何よりC#で書けるのが素晴らしいよねって話 Speaker : @AtriaSoft
  53. Blazorはじめてみませんか? Speaker : @AtriaSoft

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

  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