daimac64's blog

50代からのWEBアプリ開発とその他もろもろの備忘録

Web Application その1

サンプルを作ってみる

  • 空のプロジェクトを作成
  • ControllersフォルダにMVC 5コントローラを追加(Home)

    最初に表示されるHTMLを返すHomeコントローラを追加

どうしてHomeなの?

ASP.NET ルーティングルール

ASP.NET ルーティングでは、URLに指定されたコントローラ名に「Controller」を続けた名前のコントローラクラスを見つけて、URLにしてされたアクションメソッド名のメソッドが実行される仕組みになっている。 ルーティングルールは、App_Start\RouteConfig.csに定義されている。

定義されているルートは、{controller}/{action}/{id}。

URLで未指定(デフォルト)時の規定値は以下の通り。

  • controller → Home
  • action → Index

だから、サーバー名のみでアクセスした時に呼び出されるのが、HomeControllerのIndexメソッドということになる。

自動定義されたIndexアクションメソッドに対応するIndexビューを追加

追加したHomeControllerには、自動的にIndexメソッドが定義されている。Indexメソッドの戻り値は、Viewメソッドになっている。 ファイル名からビューを見つけてHTMLに変換して返してくれるので、Views\HomeフォルダにIndexビューを追加する。

  • HTMLのbody の div に適当な文言を記述し、実行

適当な文言がブラウザに表示されてめでたしめでたしとなると思ったら…

‘/’ アプリケーションでサーバー エラーが発生しました。

<customErrors> タグで “mode” 属性を “off” に設定する」ともっと具体的なエラーメッセージが表示されるそうな。 web.config に以下を追加する

<configuration>
 <system.web>
  <customErrors mode="Off"/>
 </system.web>
</configuration>`

ビュー ‘Index’ またはそのマスターが見つからなかったか…

追加したビューの名前が間違っていました。

TypeScript(JavaScript)を追加する

  • jQueryをインストー
    jQueryってなんだ? JavaScriptのライブラリです。
  • jquery.TypeScript.DifinitelyTypedをインストー
    標準のTypeScriptではjQuery型に対応していないので、 TypeScriptで使用するためのjQueryの型定義ファイルをインストー

インストールしたjQueryを使用することをビューで宣言

インストールされたjQueryは、[Scripts]フォルダにあるので、ビュー(index.cshtml)のhead要素にdropして参照スクリプトを挿入

jquery-x.x.x.min.js

[Scripts]フォルダにTypeScriptファイルを追加(app.ts)

追加したTypeScriptを使用することをビューで宣言

app.tsを同様にビュー(index.cshtml)のhead要素にdropして参照スクリプトを挿入

.ts→.jsに変更されて挿入されます。TypeScriptが変換されたJavaScriptを参照するため。

TypeScriptの中身

<div>要素に文字列を追加するスクリプト

$().ready(() => {

var text = "SAMPLE";

$("div").append(text);

});

TypeScriptが実行されます。

Web APIコントローラも追加してみる

  • ControllersフォルダにWeb API 2コントローラを追加(Hello)
  • HelloControllerにGetHelloメソッドを追加
    ⇒WebAPIのルーティングルールによりURLは、
    /api/Hello/Hello
    ということになる。
    メソッド内でC#のオブジェクトを返すとJSONで返却される。

前出のTypeScriptを、WebAPIを呼び出した結果(JSON)を<div>要素に文字列を追加するスクリプトに変更する。 この呼び出しをAjax通信と呼ぶそうな。方法の名前ね。

ブラウザの開発者向けツール(F12)

DOMを見ることができたり、ブラウザからのリクエストとその応答などを確認できる。 これは、デバッグの強い見方になりそうだ。

デプロイ

とりあえず、インターネット上で動いている。最低限の骨組みが動いた。HTML+CSS+TypeScript(JavaScript)でUIを装飾して、Web API経由で取得したデータを表示するということになりそうだ。なんか作れそうな気がしてきた。
参考にした以下の書籍では、無料のAzure App Serviceに公開している。 WebサーバーでWebDeployを用いている。本当はもっと一般的な公開方法を知りたいが、それはもう少し先の話かな。

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)