Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Atria
March 15, 2020

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

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

Atria

March 15, 2020
Tweet

More Decks by Atria

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. .NETの技術が好き!

    View full-size slide

  4. 本日の話題
    Speaker : @AtriaSoft

    View full-size slide

  5. Speaker : @AtriaSoft
    Blazor

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 解説パートです

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 割と慣れれば簡単。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. つくるもの
    Speaker : @AtriaSoft

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 解説パート2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Speaker : @AtriaSoft

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide