$30 off During Our Annual Pro Sale. View Details »

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

Atria
March 15, 2020
Programming
1
750

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

See All by Atria
TwD3の紹介/Introduction to TwD3
atria
0
47
CUI風ポートフォリオを作った/I made a CUI-style portfolio.
atria
0
320
プログラミング言語C#で世界を創る - Create the world with the programming language C#.
atria
0
300
タスク管理を行うSPAを"C#で"作ってみた / I made a task management SPA "in C#".
atria
2
1k
FUNCoder オンラインサークル説明用スライド2020
atria
0
280
Linqの魅力 / attractiveness of Linq
atria
0
190
All C#なモバイル開発. / All C # Mobile Development.
atria
0
380
Discordユーザー認証botを作った話 / The Discord User Authentication Bot
atria
0
16k
C#のよさを伝えたい
atria
1
1.2k

Other Decks in Programming

See All in Programming
Cloudflare Workers は楽しい！
codehex
8
2.2k
Kyo - Functional Scala 2023
fwbrasil
0
1.5k
個人から始める開発生産性向上
takamin55
1
150
ニフティ開発インターンで使うAWS環境をできるだけ楽に構築した話 (LT) - NIFTY Tech Day 2023
niftycorp
0
110
ChatGPTをソフトウェア開発に活用する
fbei_ot
0
130
GoにおけるCall Graphを用いた 大規模コードベースの影響調査
ffjlabo
0
100
.NET 8世代のBlazorについて
tomokusaba
0
150
Foreign Function & Memory API ( FFM API )を用いたNativeライブラリ呼び出しと既存ライブラリの比較 ( JJUG CCC 2023 Fall )
hiroisojp
1
360
Second-System Syndrome: A tale of power-assert
twada
PRO
9
3.5k
リーンスタートアップのリーンな品質の話
techouse
0
470
Spring + Localstack : usando aws de forma gratuita
kamilahsantos
2
110
Open Source - A Journey of Contribution and Collaboration
ivargrimstad
0
700

Featured

See All Featured
How STYLIGHT went responsive
nonsquared
89
4.5k
Embracing the Ebb and Flow
colly
77
3.9k
WebSockets: Embracing the real-time Web
robhawkes
58
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
71
7.9k
Clear Off the Table
cherdarchuk
81
300k
Side Projects
sachag
450
39k
Adopting Sorbet at Scale
ufuk
66
8.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
123
31k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
13
5.9k
Music & Morning Musume
bryan
38
5.2k
Visualization
eitanlees
131
13k
Debugging Ruby Performance
tmm1
68
11k

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