2017-02-06

Web Application その１

サンプルを作ってみる

空のプロジェクトを作成
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開発入門 (マイクロソフト関連書)

作者: 古賀慎一
出版社/メーカー: 日経BP社
発売日: 2016/11/12
メディア: 単行本
この商品を含むブログを見る

2017-02-06

C# でスクレイピング

スクレイピング

VBAでは、ゲキ重だったのでデスクトップアプリにしてみる。

前回の「VBAでスクレイピング」でのXPathはそのまま使用できる。

Webページ解析は、「Html Agility Pack」を使って楽する。

これもある程度できたので、作りこみはWebアプリで行うとしよう。

www.atmarkit.co.jp

2017-02-01

Single Page Application

APT.NET MVC ASP.NET Core SPA

Webアプリを作るといっても、20年近く前にHTML+CSSでほんのすこしレイアウトのお手伝いをした程度で、サーバーにアップしたこともない。

20年の時の流れはわからないので、すっ飛ばしてVisualStudioが慣れているのでASP.NET SPAで開発してみようと思う。仕事でWPFアプリを作るときは、MVVMなので、MVCとかデータバインドとかしっくりきそうな感じがある、この本を参考に始めます。本当は、IIS(WinodwsServer)にロックインされたくないので、.NET Coreで作りたいのですが、まずは参考書に従って、.NET Frameworkで。

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

作者: 古賀慎一
出版社/メーカー: 日経BP社
発売日: 2016/11/12
メディア: 単行本
この商品を含むブログを見る

.NET Coreについては、平行してこちらを参考にしていこう。

ASP.NET MVCプログラミング入門 (マイクロソフト関連書)

作者: 増田智明
出版社/メーカー: 日経BP社
発売日: 2016/11/12
メディア: 単行本
この商品を含むブログを見る

2017-02-01

パッケージ管理システム

Mac homebrew

まずは、開発環境を整えるところから。

手元にあるPC・MacbookAir・Raspberry Pi2を使っていろいろ試したいと思う。

とりあえず、パッケージ管理システムを用意すると後々便利なようだ。

Raspberry PI2のOSは、Raspian。APTがあるのでよし。

PCは、WIndows7/VisualStudio2015なので、NuGetでよし。

MBA(macOS Sierra)には、Homebrew。なんとなくです。

Homebrewをインストール。

Homebrew — macOS 用パッケージマネージャー

いきなりXcodeのバージョンが古いと怒られたので、Xcodeをアップデート。

次は、proxyでインストールできない。

いつ設定されたかは不明だが、proxy関連の環境変数がサンプルで設定されていた。

http://example.com:8080/

proxy未使用なので、消去する。

$ export http_proxy=""
$ export https_proxy=""

2017-02-01

Macで開発したいけど...

Mac 換装

手持ちのMacは、数年前に中古で購入したMacBookAir Late2010 11inch Core2Duo1.6GHz DDR3 4GB 128GB。当時、地元の家電量販店にソフマップと提携した中古パソコンコーナーがあり、液晶に傷があるとのことで価格は３万円。店員も私も傷は確認できなかった程度だったので即購入。現在でもこの条件ではなかなか入手しにくいと思います。暫くは、仕事で打ち合わせやセミナーでのテキスト打ちに使用していました。

少し時間が取れるようになったので、iOSでアプリも作りたいし、Web開発もしたい。Unityなんかも触ってみたい。でも、Xcodeをはじめ様々な開発環境を試してみるには、容量が心もとない。そんな時、以下の記事を発見。SSDを240GBに換装して、macOS Sierraにアップデート。BOOTCAMPでWindows7もインストール。

3年前のMacBook Airをたった5分で爆速に変身させる大容量SSD｜Mac - 週刊アスキー