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

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

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

.NETの技術が好き！

本日の話題 Speaker : @AtriaSoft

Speaker : @AtriaSoft Blazor

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

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

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

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

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

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

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

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

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

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

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

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

解説パートです

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

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

割と慣れれば簡単。

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

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

つくるもの Speaker : @AtriaSoft

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

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

解説パート2

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

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

やっぱり慣れれば簡単。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Decks by Atria

Other Decks in Programming

Featured

Transcript