Part 7. ASP.NET Web API による SPA 型データ更新アプリ

いよいよ最後のエントリです。引き続き、Part 6. で作成したアプリを SPA 型で実装してみることにします。SPA 型でのデータ更新アプリ実装で厄介なのは、下図に示すように、クライアント側では JavaScript、サーバ側では C# を使って単体入力チェックロジックを実装する必要があり、うっかりすると二重実装になってしまう点です。 これに関しては、Part 6. で解説した、ASP.NET MVC のモデルバリデーション機能を活用するとうまく回避することができます。では、具体的な作成方法について解説します。 ■ ファイルの配置 まずはコントローラクラス、ビュークラスのファイルをそれぞれ配置しておきます。(Part 6. で配置した、入力チェック用の JavaScript, CSS 定義も利用します。) /Controllers/Sample03Controller.cs /Views/Sample03/ListAuthors.cshtml /Views/Sample03/EditAuthor.cshtml ■ 著者一覧ページの実装 まずは Part 5 で解説した方法をもとに、著者一覧ページを作成しましょう。 これについては特に説明は不要でしょう。 [/Controllers/Sample03Controller.cs] using Decode2016.WebApp.Models; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace Decode2016.WebApp.Controllers { public class Sample03Controller : Controller { [HttpGet]…

1

Part 6. ASP.NET MVC Coreによるデータ更新アプリ

では引き続き、更新系アプリを作成してみます。Web API でデータ更新アプリを作るのはちょっと骨が折れるので、まずは ASP.NET MVC Core でデータ更新アプリを作ってみることにします。若干遠回りではありますが、こちらをいったん理解しておくと、Web API でのデータ更新アプリの作り方も理解しやすくなるでしょう。   ■ ファイルの追加 ここまで作ってきたプロジェクトに /Controllers/Sample02Controller.cs、/Views/Sample02/ListAuthors.cshtml、/Views/Sample02/EditAuthor.cshtml ファイルを追加しておきます。 ■ 著者一覧ページの実装 まずは Part 3 で解説した方法をもとに、著者一覧ページを作成しましょう。 using Decode2016.WebApp.Models; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace Decode2016.WebApp.Controllers { public class Sample02Controller : Controller { [HttpGet] public ActionResult ListAuthors() { using (PubsEntities pubs = new PubsEntities()) { var…

0

Part 5. ASP.NET Web API を使った SPA 型 Web アプリ開発

では引き続き、ASP.NET Web API を使って SPA 型で同じアプリを開発してみたいと思います。 ■ SPA 型 Web アプリとは? SPA (Single Page Application)型 Web アプリとは、単一ページで機能を提供する Web アプリです。具体的な設計・実装モデルとしては、データを Web API で取得し、画面を構築する処理をブラウザ側にもってくる形になります。 非 SPA 型 Web アプリと SPA 型 Web アプリの作り方の違いについては、de:code 2016 DEV-010 セッションにて詳しく解説しているのでそちらを見ていただくことにして、ここでは具体的な作り方について解説したいと思います。ここでは、① すべての著者データを一覧表示する、② 州によるフィルタリングを行う、という 2 つの画面を作成してみます。   ■ ファイルの配置 まず、コントローラクラス Sample01Controller.cs とビューファイル ShowAllAuthors.cshtml, ShowAuthorsByState.cshtml を配置します。作成するのは 2 つのページですが、コントローラクラスは業務(ビューのフォルダ)単位でよいので、ここでは 1 つだけ作ります。(コントローラとビューは、先にビューから考えると配置しやすいです。) まずは空のページを作っておきましょう。Sample01Controller.cs ファイルにアクションメソッド 2 つを用意しておきます。…

0

Part 4. ページレイアウトの構造化

ここまでで ASP.NET MVC Core を使った簡単なページはできましたが、ちょっとダサいです;。なのでこれを jQuery や Bootstrap でちょっと綺麗にしてみます。 ■ Bootstrap の利用 Bootstrap は非常に有名な CSS フレームワークのひとつで、これを利用することにより、レスポンシブ対応の Web サイトを比較的容易に構築していくことができます。Bootstrap については日本語でも多数の書籍が出ていますので、詳細についてはここでは書きません。先に作成した Index.cshtml ファイルの Web ページを、Bootstrap を使ってカッコよくしてみると、以下のようになります。 Index.cshtml ファイルのソースコードは以下の通りです。(かなり長いですが、大半は呪文です。要点はソースコードの後ろに書いてあります。) @using Decode2016.WebApp.Models <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>de:code 2016</title> <meta name="viewport" content="width=device-width, intial-scale=1.0" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style type="text/css"> @@media only screen and…

0

Part 3. ASP.NET MVC Core 1.0 の基本的な使い方

では、データアクセスができるようになったところで、ASP.NET MVC Core 1.0 の基本的な使い方を見ていくことにします。 ■ ASP.NET MVC の超簡単解説 ASP.NET Web Forms しか開発したことがない方のために、超ざっくりと ASP.NET MVC を解説しておきます。(ASP.NET MVC を触ったことがある方はここは飛ばしていただいて OK です。) ASP.NET MVC とは、論理 3 階層型の Web アプリケーション(UI/BC/DAC に分解される Web アプリケーション)を開発する際に、UI 部分を「きれいに分解しながら」作ることができる技術のひとつ。 クライアントのブラウザから、特定のコントローラクラスのアクションメソッドを呼び出すと、それに対応する処理が動き、対応するビューによりレスポンス HTML データが作成され、ブラウザに返却される、という仕組みになっている。 ASP.NET MVC に関して、まず特に覚えておいていただきたいポイントは以下の 3 つです。 ブラウザからのリクエストは、URL で指定されたコントローラクラスのアクションメソッドで処理される。 例えば、ブラウザから http://localhost:xxx/Sample01/GetAuthors/ という URL を呼び出すと、Sample01Controller.cs というクラスの、GetAuthors() というメソッドが呼び出される。(第一引数でコントローラクラス名を指定し、第二引数でアクションメソッド名を指定する。) このメソッドの中では、ビジネスロジッククラスやデータアクセスクラスを呼び出してデータベースからデータを取り出したり、処理結果をビューに引き渡したりする。 クライアントに送り返す HTML データは、対応するビューファイル(.cshtml ファイル)により作成される。 コントローラクラスからデータを受け取り、それを使って、クライアントに送り返す HTML…

0

Part 2. Entity Framework Core 1.0 の基本的な使い方

では引き続き、Entity Framework Core の利用方法を解説していきます。 ■ 基本的な Entity Framework Core の利用方法 従来の Entity Framework と異なり、EF Core では O/R マッパーファイル(*.dbml)を使うことができません。このため、O/R マッピング(データベーステーブルのどこを構造体クラスのどこにマッピングするのか?)はすべてコードで指定する必要があります。ツールを利用して自動生成させることも(ある程度は)可能ですが、現時点(2016/07/02)では、手で書いてしまったほうがやりやすいと思います。 まずは以下 2 つのファイルを用意します。 データベースファイル プロジェクトファイル直下に App_Data フォルダを掘り、pubs.mdf ファイルを置きます。 データベースファイルは公開する必要がないため、wwwroot 下に置く必要はありません。私は昔の名残で App_Data という名前を使っていますが、この名前である必要性も特にありません。お好みで変えていただいて結構です。 モデルファイル プロジェクトファイル直下に Models フォルダを切り、Pubs.cs ファイルを作成します。 Pubs.cs ファイルに、データを取り出すための構造体クラスを記述し、そこに O/R マッピング情報を記述していきます。今回は、全テーブルをやるとキリがないので、以下 6 つのテーブルについてだけ取り出してマッピングしてみます。 authors : 著者データ titles : 書籍データ titleauthor : 著者と書籍の多対多中間テーブル publishers : 出版社データ stores…

2

Part 1. ASP.NET Core 1.0 ことはじめ

まずは基本的な ASP.NET Core 1.0 のアプリの作り方から開始していきます。 ■ ソリューションファイルとプロジェクトファイルの作成 Visual Studio を開き、新しいプロジェクトを作成します。 今回、Application Insights は利用しないのでチェックを外しておきます。名前は “Decode2016.WebApp” にしておきます。 テンプレートは「空」を選びましょう。認証は今回はなし、Microsoft Azure へのホストもなしにしておきます。作成すると、以下のようなプロジェクトファイルが出来上がります。 従来の ASP.NET から大きく変わった点として、以下 2 つに注意してください。 wwwroot と書かれたフォルダは、公開する静的コンテンツ(HTML ファイルや JPEG ファイルなど)を置く場所です。従来と異なり、アプリケーションコードはここには置かず、上位のフォルダに置きます。 ソースコードフォルダ内のファイルは、基本的にすべてプロジェクトに所属するものとして扱われます。今回の場合だと、C:\Users\nakama\Documents\Visual Studio 2015\Projects\Decode2016.WebApp\src\Decode2016.WebApp にプロジェクトフォルダが作成されていますが、ここにファイルを配置すると、そのファイルは自動的にプロジェクトのメンバであるとみなされるようになっています。(従来の *.csproj のような管理ファイルは存在しません) プロジェクトファイル内には以下の 2 つのコードがあります。それぞれざっくりとした解説は以下の通りです。 Program.cs ファイル Main() 関数が書かれており、Web サーバを起動するためのコードが書かれています。 Startup.cs ファイル ASP.NET ランタイムの初期化コードが書かれています。 では、早速 Ctrl + F5 で実行してみてください。Hello World というメッセージが表示されます。 このような実行結果になったのは、Startup.cs ファイル内にある…

0

Hello World, ASP.NET Core 1.0!

ご存じの方も多いと思いますが、先日、クロスプラットフォーム対応の ASP.NET Core 1.0 が正式リリースされました。Windows OS だけでなく、Linux や Mac OS 上でも動作する新しいランタイムとして設計・実装されているのですが、半面、MVC/EF の知識を必須とするため、ASP.NET Web Forms や型付きデータセットで開発されてきた方々には、非常にハードルが高い開発プラットフォームにもなっています。 このハードルの高さは、先日の de:code 2016 DEV-010 「エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法」でもお話しさせていただいた SPA 型開発でも触れた話で、高水準 UI 部品が大量に存在していた ASP.NET Web Forms から、いきなりスクラッチ開発に近い ASP.NET MVC/EF 開発ベースに移れと言われても正直キツすぎる、と感じられている方も多いのではないでしょうか。(いや、実際キツいですけどね;) 今回のエントリでは、de:code 2016 のセッションで利用したサンプルアプリの具体的な作り方などもご紹介しつつ、ASP.NET Core 1.0 ベースでのアプリケーション開発の基本について解説したいと思います。 なお、最近は MS も OSS 押しではありますが、私は純血派ですのでw、利用する環境は安心の Visual Studio 2015 Update 3 + .NET…

1

『変わらない開発現場』を変えていくために。

前回のエントリですが、はてブや Twitter でびっくりするほどたくさんのコメントをいただきました。当該ページの PV も 2 万超え、そして 1,000 件を超えるはてブは初めてで、勉強になるコメントも多く、なるほどと頷かされるご指摘が多かったです。この場を借りてお礼申し上げます。ありがとうございました。(はてブでエールを送っていただいた皆様もありがとうございました。励みになります。m(_ _)m) コメントを読んでいると、やはりものすごく現場で苦しまれている方が多いと改めて感じると共に、年次や役職で抱える悩みはずいぶん違う、という印象も受けました。ただ、いずれの悩みにも共通するのは、 「意思決定者の方々になかなか理解してもらえない・動かせない」 (意思決定者=自分のマネージャ、お客様など) という点だと思いました。実際問題として、意思決定権者にしか変えられないこと・決められないことについて、正論をタテに現場担当者に解決を詰め寄るのはただの無理ゲーで、これだと、あんまり建設的な議論にはならないのですよね;。この件に関しては様々な宗教論争、もとい議論を見てきましたが、全体的にビジネスの仕組み的な観点からの考察が不足していることや適切な問題分解・整理がなされていないこと、さらに多彩な開発現場を十把一絡げに議論しようとしていることが、建設的な議論を妨げている、と感じました。 この辺の解決方法は、結局、現場や人ごとに大きく変わるので、万能な処方箋は存在しない(個々人で自分の問題としてじっくり考えるしかない)のですが、コンサル的な視点から、考え方に関して多少のヒントは書けるかも? と思って、補足エントリとして書いてみることにしました。蛇足ではありますが、何かのヒントになれば幸いです。 今日のエントリで書きたいポイントは 3 つです。タイトルだけでだいたい内容の想像はつくと思いますので、ピンと来た方は特に読まなくてもよいと思います、はい^^。 問題分解の必要性:責任境界線を明らかにする 変わらない意思決定者への「伝え方」のヒント 鶏と卵、先に変わるべきはどちらか?:プロフェッショナルとして ■ 問題分解の必要性:責任境界線を明らかにする 前述したように、SI 開発現場に関わる様々な問題には、自分でも変えられることと、意思決定者にしか変えられないことが存在します。(下記の例はとりあえずのケーススタディとして書きましたが、それぞれの開発現場、そしてご自身の役職やロール次第で、話は大きく変わります。なので、ちょっと時間を取って書き出してみるとよいかと思います) 例 1. 「請負契約」を前提条件として、大きな粒度のアジャイルを可能にするために必要なことは? お客様(意思決定者)に求められること 要件定義への積極的な参画 素早い契約締結 柔軟な予算確保と執行 (※ アジャイルの大きな阻害要因のひとつは、日本でよくある予算確保と予算執行の硬直性です。) SIer (現場担当者)に求められること 適切なベースライン定義と変更管理 精度の高い見積もりを素早く出せること 高速な開発(設計・実装・ビルド・テスト) 両者に求められること 誠実な信頼関係とプロフェッショナリズム 例 2. 請負契約の境界を超えない範囲で、小さな粒度のアジャイルを回していくために必要なことは? SIer のプロパー(意思決定者)に求められること Scrum などのアジャイル方法論の導入 見積もり手法と実績管理手法の変更(プラニングポーカーとかタスクボードとか) チーム運営方法の変更 係数ベースのプロジェクト管理手法の導入 フラットで風通しのよい現場環境の醸成 品質管理指標やプロセスの変更(または二重管理) (※ 全社的な品質管理基準が今どきの開発スタイルに合っておらず、そこがネックになって新しい手法などが導入しにくくなっているケースがあります。特に大きな SIer にありがちなパターンです。)…

0