The procedure of asp.net at 201908 sakurug seminar
•Download as PPTX, PDF•
0 likes•101 views
【初学者歓迎】ノンコーディングでできるWEBアプリケーション開発 https://sakurug.connpass.com/event/138370/
Recommended
More Related Content
Similar to The procedure of asp.net at 201908 sakurug seminar
Similar to The procedure of asp.net at 201908 sakurug seminar (20)
More from SAKURUG co.
More from SAKURUG co. (9)
The procedure of asp.net at 201908 sakurug seminar
- 2. 新しいプロジェクトの作成 • Visual Studio 2019を起動 • 新しいプロジェクトの作成を 押下します。
- 3. プロジェクトテンプレートの選択 • 「ASP.NET Webアプリケー ション(.NET Framework)」 を選択して「次へ」ボタンを 押下します。 • このとき「C#」、「Web」、 「Windows」でフィルタリン グをかけると探しやすいです。
- 4. 新しいプロジェクトの構成 • 「プロジェクト名」、「場 所」、「ソリューション名」 に指定はありません。デフォ ルトのままでよいです。 • 「フレームワーク」は「.NET Framework 4.7.2」を選択し ます。 • 「次へ」ボタンを押下します。
- 5. 新しいASP.NET Webアプリケーションを 作成する • MVCを選択します。 • 「認証」の「変更」リンクを クリックします。
- 7. 新しいASP.NET Webアプリケーションを 作成する • 「MVC」が選択状態になって いる • 「認証」が「個別のユーザー アカウント」になっている • 以上を確認したら「作成」ボ タンを押下します。
- 8. プロジェクトが作成されました • 無事にプロジェクトが作成さ れました。 • この状態で動作するかどうか 試してみましょう！ • 「Ctrl」+「F5」を押下して ください
- 9. 初回だけ注意 • 初回実行の時にVisual Studio が自己署名証明書をインス トールします • 「はい」を押下してください。
- 11. ログインしてみましょう • 画面右上に「登録」と「ログ イン」があります。 • これは実際に動作するものに なっています。 • 試しにアカウントを登録して ログインしてみましょう。
- 12. アカウントの登録 • ここでの「電子メール」、 「パスワード」は架空のもの でOKです。 • 「パスワード」は一定の複雑 度を有する文字列でないと受 け付けられません。 • 6文字以上 • 大文字小文字数字記号のうち3 種以上
- 13. ログインできましたか？ • 右上に登録した電子メールが 表示されていたらログイン成 功です。 • 念のため、ログオフしてもう 一度ログインできることを確 かめましょう。 • 他の電子メールや間違ったパ スワードでログインできない ことを確かめましょう。
- 15. テーブルデータを見るには？ • サーバーエクスプローラを更 新します • データ接続を展開すると 「DefaultConnection」がで きています。 • 先ほど作ったIDは 「AspNetUsers」テーブルに あります。
- 17. EFモデルを作ろう • 左側から「データ」を選択し ます。 • 「ADO.NET Entity Data Model」を選択します。 • 名前はそのままでOKです。 • 「追加」ボタンを押下します。
- 18. EFモデルを作ろう • 「データベースから EF Designer」を選択します。 • 「次へ」ボタンを押下します。
- 25. スキャフォールディング • 「Entity Frameworkを使用し た、ビューがあるMVC5コン トローラ」を選択します。 • 「追加」ボタンを押下します。
- 26. スキャフォールディング • モデルクラスに 「AspNetUsers」を選択しま す。 • データコンテキストクラスに 「Entites」 (WebApplication1.Models)を 選択します。 • 「追加」ボタンを押下します。
- 28. CRUDできたかな？ • 先ほどのテーブルデータが表 示されています。 • 「Create New」で新規レ コードを作ることができます。 • 横スクロールすると、 「Edit」、「Details」、 「Delete」のリンクがあり実 際にそれぞれ動作します。
- 34. 実行してみよう • ログインしていない状態でCRUD Indexリンクを押下するとロ グイン画面に遷移します • ログインしてからCRUD Indexリンクを押下するとCRUD Index 画面に遷移します。
Editor's Notes
- ここで、今回は皆さんに一からプロジェクトを作って欲しいので「新しいプロジェクトの作成」をしてもらいます。 この画面で、既存のローカルドライブなどのあるプロジェクトを開くことができます。 注目して欲しいのが一番上でGitHubやAzureDevOpsのオンライン上にあるリポジトリから開くこともできます。 いままで、よくある形だとGitHubからプロジェクトを一旦、ローカルドライブにダウンロードしてプロジェクトファイルを開くという感じだと思うのですがこれがVisualStudioの機能でできるようになっています。 AzureDevOpsはMicrosoftのプロダクトということもあるのですがGitHubもこのあたりマイクロソフトが買収したことによるシナジー効果が感じられます。 ところで、AzureDevOpsは聞き慣れない方もいらっしゃるかと思いますが、これはマイクロソフトが提供しているDevOpsのためのツール群でリポジトリー部分はGit互換になっています。
- では、プロジェクトのテンプレートの選択に移っていきます。 実に様々なタイプのテンプレートが存在していますので一つ一つ解説していったらちょっと今日の時間が終わってしまいそうですのでポイントだけ。 この絞った状態だと気になるのが.NET Coreというのです。 これは、新しい.NET Frameworkで実際来年2020年には.NET5としてリリースされる予定です。 今年5月のBuildというイベントで発表されたところによると旧来の.NETFrameworkは現バージョンで終了でセキュリティメンテナンスのみしか行われません。新機能の実装は今後は.NET Coreにたいして行われます。 .NET Coreの特徴としては、マルチプラットフォームに対応しているというところで、WindowsだけでなくLinuxやMacOSでも動作するというところです。 とくに、ASP.NET CoreにおいてはいままでのASP.NETではIISの使用が前提になっていましたがこれがなくなりました。 もちろん、IISでも動作させることは可能ですが、そのほかのプラットフォームでも動作させることが可能になっています。 また、ASP.NET Coreとしてビルドしたものそのものにもアプリケーションサーバーとしての機能が備わっており今はやりのコンテナ配備などに対応しています。 フレームワークとしての互換性というところで100％ではないことから現在のプロジェクトをすぐに移行するということではないですが、新規のプロジェクトに関してはすでにマイクロソフトがEndを示していることから.NET Coreで開発することが推奨されます。 とはいえ、実際まだまだ旧来の.NET Frameworkは使われ続けるのではないかと思います。 現在までに構築されているシステムにおいては旧来の.NET Frameworkでメンテナンスされると予想します。 本日は、旧来の.NET Frameworkで進めていきます。
- プロジェクトの構成ですが、このあたりは特に指定はありません。 こだわりがなければ、表示されたままで大丈夫です。 実際の業務ではプロジェクトの名称が入ることが多いです。 フレームワークはターゲットの動作環境のバージョンを指定します。 本日は、ローカルで動作させるだけですので最新版の4.7.2を指定します。
- この画面ではどのタイプのWebアプリケーションにするかということですが、今回はMVCを選択します。 画面のあるWebアプリケーションを作るにはWebフォームにするかMVCにするかの2つの道があります。 歴史的に見てWebフォームというのが最初にありました。 これは、VBなどのWindowsフォーム開発になれた開発者が違和感なくWebの開発ができるように作られたものです。 Web特有のブラウザからサーバに行ってサーバで処理してまたブラウザに返すといった一連の処理のところがあたかも一枚板のようなイメージで動作しているかのようにうまいこと作られています。 悪く言えば、Webのことあんまりしらなくてもそれなりに動くものが作れちゃう。良くも悪くもそれが特徴です。 一方、MVCはそんなことはなくてちゃんとWebのことを知ってないと作れません。 MはModel VはView CはControlerを意味しています。 Modelで画面のビジネスロジックを定義します。 Viewで画面デザインを定義します。 ControlerはWeb特有の処理を定義します。 なので、たとえば画面のデザインだけ変えたいけども表示すべきデータやら要件が変わらなければViewだけの修正でModelやControlerは修正不要といえます。 これが、WebFormだとWebFormのViewにそうとうするaspxのみ修正すればいいような気がしますがそうとも言い切れないケースがあります。 で、本日MVCを選択する理由ですが単純です。 スキャフォールディングがMVCの形式でされるからです。 ですので、あらかじめ必要な参照などが入っているMVCのテンプレートを使います。 そして、認証の変更をします。
- 認証の変更ですが個別のユーザアカウントとします。 これは、SQL Serverにユーザアカウントを格納することができます。 これを選択して動作させるとプロジェクト内にLocalDBと言われるDBが自動的に作成されここにユーザ情報を書き込んでいきます。 今回、このDBを使いたいので個別のユーザアカウントで認証をかけるようにしました。 また、FacebookとかTwitterなどのID連携をすることも可能です。 今回はこのあたりは解説しません。 他にも選択肢があります。 職場または学校アカウントとすると、AzureADまたはオンプレのADによって認証を行うことができます。 Windows認証とするとサーバのローカルIDで認証をかけます。こちらはあんまり使うことはないかなと思います。 それぞれ、詳細リンクを押下するとマイクロソフトの提供しているWebドキュメントを参照できます。 開発者向け情報も日本語情報がだんだんふえてきているのでこうしたリンクも大変有効になってきているのでなにかわからないときはこうしたリンクに頼ってみるというのがいいと思います。
- ここまでの操作でプロジェクトが作成されました。 右側のソリューションエクスプローラーというところにプロジェクトのテンプレートが展開されているのがわかります。 この中でも重要な意味を持つフォルダーを一通り見ていきましょう。 一つ目は「App_Start」です。 これは、ASP.NETMVCにおいてスタートポイントを担う大事なプログラム群が格納されています。 たとえば、ルートフォルダにたいしてURIを決定するルールなんかはこのフォルダの中に入っています。 えーっと、いますごく大事な用語が出ました。ASP.NETとはちょっと離れますが一般的にWeb技術者としては抑えておきたい用語です。 URIです。 URIとURL。 この違い意識していますか？ URLといったら正確には位置情報のみを指します。たとえば、sakurug.co.jpのような 一方、URIといったらスキームを含んだ情報になります。たとえば、http://www.sakurug.co.jpのような URLのような場所情報だけですとhttpかもしれないしftpかもしれないしもしかしたらrdpとかもありえるかもしれない。 プロトコルが当然に決まるような場合にはURLという表記でいいかもしれないけども、ブラウザのアドレス欄のようにある程度のプロトコルを受け付けるようなものに関しては技術者ならかっこよくURIって言って上げましょう。 話がそれました。 ここから先さらに重要なフォルダーがあります 「Controllers」ですね。見た目通り、MVCのコントローラが入ります。 すでに、テンプレートを表示させるためのコントローラが入っています。 おもに、先ほど認証ありにしたのでこの認証のためのロジックを含んだものが入っています。 本日はこの認証についての具体的なところについては触れません。 後ほどのアンケートの記入状況によってはこのあたり次回以降に検討させていただきます。 次は「Models」。見た目通りMVCのモデルが入ります。 本日はEntityFrameworkのモデルを自動生成して行きたいと思います。 もちろん、EntityFrameworkにこだわらなければ自由にモデルを手で作ることも可能です。 が、大抵の場合においてDBのテーブルに即した形、または画面に合わせる形になるので半自動生成の形を取ることが多いかなと思います。 最後に「Views」想像の通りMVCのビューが入ります。 本日のメインテーマであるスキャフォールディングをするとここに画面がいくつか自動生成されます。 現在は、テンプレートに含まれている数画面のみですね。 以上が、ざっと重要なフォルダーでした。 で、テンプレートそのままの状態で一度実行したいのですが上のメニューのデバッグのところからもいけるのですが「F5」でも実行できます。 また、ツールバーの再生ボタンでも実行できます。
- 初回だけですが2回ほど警告画面がでるかと思います。 これは、テンプレートを作るときにHTTPSの構成となっているために証明書が必要です。 通常、証明書というのはルート証明書というブラウザにあらかじめ信頼済みの証明書で署名したものを使います。 これならば、特に警告画面など出てきません。 しかし、たいていの場合こういった証明書は有料です。 しかも、現在においてローカルネットワークに対しての証明書は発行されません。 今回はテスト目的ということもあって自己署名の証明書をVisualStudioが作成しこれをインストールしてもよいですかという警告画面です。 これのリスクというのは、仮にこのルート証明書が外部に漏れた場合、よく精査しないと正規の証明書なのか今回作った証明書なのかということが 見分けられないということ。
- さて、実行できてますか。 ちょっと表示するのに時間がかかるかもしれません。
- 画面、右上に登録ボタンとログインがあります。 実際に動作するものになっています。 では、登録してみましょう。
- IDとして電子メールアドレスを登録します。 もちろん、ここではメールを送信などするわけではないので架空のものでOKです。 ただ、メール形式のチェックはしているのでそれっぽい形式で入力します。 パスワードも一定の複雑度がある文字列でないと受け付けられません。 テンプレートですがこのように入力チェックがされてます。 テンプレートといえどもこのソースを調べることでいろいろと実装のヒントが見つかると思います。
- 右上に登録した電子メールアドレスが表示されていたらログイン状態です。 これが実際に動作しているものかどうか確かめましょう。 一度ログオフしてみてもう一度ログインできるかどうか確かめてみましょう。 そして、間違った電子メールやパスワードではログインできないことを確かめてみましょう。 （2－3分）
- さて、先ほどのアカウント情報はどこに記録されているのでしょう。 先ほど、LocalDBを使うと言いました。 まさに、LocalDBに記録されています。 エクスプローラでApp_dataのフォルダーを見てみるとSQLServerのデータファイルがあります。 これが、データの実体です。
- データの実体があるのはわかりました。 では、そのテーブルデータはどうやって見たらよいでしょうか？ 左側にサーバエクスプローラーがあります。 これを更新するとデータ接続が展開できるようになります。 次々に展開していくと。。。。 先ほど作ったIDはAspNetUsersというテーブルにあります。 ここで、セキュリティ観点から重要なところがあります。 パスワードは平文ではデータベースに記録してはならないというのが常識になっています。 このテーブルはどうでしょうか？ パスワードハッシュになっていますね。 ちゃんと、なんらかのハッシュ値で記録されていることがわかります。 DBが流出する事態になってもパスワードそのものが抜かれるということはなさそうです。 最低限のセキュリティは考慮されているようです。 ちなみに、認証系だけは何らかのフレームワークを使うなり.NET標準部品を使うなりしましょう。 独自実装するとだいたい穴ができます。 このテンプレートでは.NET標準部品を使って構成されているようです。 外部からパスワードがハッシュ化されて記録されているかどうかなんですが 少なくともパスワード忘れの時パスワードを平文で送ってくるようなシステムだったらハッシュでは記録されてないですね。 ハッシュで記録されていたら平文で送れないですから。 平文からハッシュにすることは容易ですが、その逆は極めて難しいというか計算量が膨大です。
- では、今みたテーブルに対してCRUDしてみることにしましょう。 EFのデータモデルを作っていきます。 とはいっても、マウスで選んでいくだけでできます。 ではまず、新規クラスを作りたいので新しい項目。
- データモデルはデータに分類されているのでデータを選択して目的のADO.NET Entity Data Modelを選択します。 名前はわかる名前でよいです。 まあ、そのままでもよいでしょう。
- 今回は、データベースをスキャンしてEFモデルを作りたいのでデータベースからEFデザイナーを選択します。 これの対になっているのがコードファーストっていうもので、データベースの構造をコードで記述してそれをデータベースに反映していくというやり方があります。 実は、コードファースト今はやりのやり方です。 コードファーストで作り込んでいって、違う環境でもデプロイと同時にデータベースのテーブル作成も行うということができるのでソフトウェアのデプロイと同じ感覚でDBまで展開されてしまうというと言うところ。 それと、今まではDBというとDDL文を別で管理して、、、DDL文っていうのはCREATE TABLEのようなDBのオブジェクトを作るような文のことで、これをコードと一体となって管理できる。 Gitなんかのリポジトリに入れられるというところで採用が増えてきているみたいです。 しかし、こっちでやるとノンコーディングという本日のポリシーに反するし、先ほどせっかく意識せずテーブルを作ったのでDBからで行きます。