テスターですが何か?

ホビープログラマ略してHPです

Posts Tagged ‘ASP.NET MVC4

ASP.NET MVCのクラスの作り方を考えてみた(4)

leave a comment »

前回のブログエントリーでUnityでのインターフェースと型のマッピングがC#には書けず、設定ファイルに書かなければならないという内容を書きましたが、実はC#にもマッピングの設定を記述することができます。あまりに自分が無知ですみません。このブログエントリーを見て気づきました。

IoCフレームワーク、クラスとConfigファイルの両方から設定する (miso_soup3さん)

設定方法は、UnityContainer.ResisterTypeでインターフェースと型を登録します。C#で設定を行うのでintellisenseが効いてタイプミスを防ぐことができます。Global.asax.csのApplication_Startにはこのように記述します。UnityContainer.LoadConfigurationをコメントアウトしているのは、設定ファイルを作成しているとこのメソッドを呼び出した際に設定が上書きされてしまうためです。

IUnityContainer container = new UnityContainer();

 

// Unity用マッピング設定

container.RegisterType<IHogeWorkerService, HogeWorkerService>();

container.RegisterType<IHogeDao, HogeDao>();

//container.LoadConfiguration();

 

IDependencyResolver resolver = new UnityDependencyResolver(container);

DependencyResolver.SetResolver(resolver);

 

C#でUnityのマッピング設定を行うことができることがわかったので、もう使わない手はないですね。DIなしで単体テストを行うなんて狂気の沙汰ですから。(単体テストを行わないなんてもっと 以下略) #if debugを使用すればテスト用とRelease用の設定も分けることが(たぶん)できるでしょうし。やっぱり個人的にはUnityを使う場合はC#でマッピングの設定を書きたいですね、設定ファイル地獄はC#の文化には合わないと思います。

今回はUnityをテーマに書きました。作成したソースはSkyDriveにアップしてあります。「MvcHogeApp_v4」をダウンロードしてください。サイズを抑えるため、アセンブリ類は削除してあるのでVisual Studio 2012 Express for Webがインストールされた環境で開いてください。

広告

Written by david9142

2012年8月4日 at 11:39 PM

カテゴリー: ASP.NET MVC

Tagged with ,

クラウディアタイマー2 part3 デスクトップ版公開

leave a comment »

クラウディアタイマー2を色々と更新しました。

http://david9142.cloudapp.net/CT/

  • Webフォントを「あんず」に変更
  • ダウンロードするJSON形式のクラウディアを最適化して通信量を約25%削減
  • デスクトップ版を公開

最近「クラウディアタイマー」でググると検索結果に表示されるようになりました。再公開して1ヶ月近くになると思いますが、何で今までクロールされなかったんだろう。今回の更新内容を解説します。

Webフォントを「あんず」に変更

これまでデコもじの「ゆる字フォント」を使用していまいした、手書き風文字で気に入っていたのですが無償利用のためにはページ下部にロゴが表示されます。

image

これがデスクトップ版の作成時にネックになってしまうので、ロゴを表示しないフリーのフォントを探していました。フリーのWebフォントサービスはどこもロゴなりブログパーツのようなものを表示させなければならず(当たり前と言えば当たり前なんですが)、通常のフォントをサーバー上にアップロードしてWebフォントとして使用させることにしました。手書き風フォントってかなりたくさんありますが、どれも2MB級なんですよね…フルブラウザ版だと10MB超えJSONのダウンロードを要求するサイトなので、更にフォント2MBもダウンロードさせるわけにはいきません。

サイズの小さい手描き風フォントとして見つけたのは「あんずもじ始」です。漢字を小学校で習う約1000文字に限定してサイズを抑えている(900KB)ようです。以下のサイトで公開されています。

あんずいろapricot×color

http://www8.plala.or.jp/p_dolce/index.html

ただでさえMB級のJSON形式データを転送しているWebロールの負荷を減らそうと思い、フォントはBlobストレージに置きました。するとChromeではちゃんと表示されるのに、IE9ではフォントが表示されません。「F12開発者ツール」で調べてみると、コンソールに

「CSS3117: @font-face が cross-origin 要求に失敗しました。リソースアクセスが制限されています」と表示されていました。

image

詳しくは調べてはいませんが、異なるドメインでのリソースのアクセスがIE9では制限されているようです。Webロールは「*.cloudapp.net」、Blobストレージは「*.blob.core.windows.net」なので、ことなるドメインと判断されるようです、まぁ…ドメインが違うことは違うんですが、こちらとしては同じAzureのサービスとして使っているのですが…FireFoxやChromeではこのような制限がないようです。IEもインターネットオプションから設定を変更可能ですが、変更を強制するわけにいかないので、IE用のフォントファイルをWebロールに置くことにしました。CSSやJavaScriptは問題ないのに、なんでフォントだけ?とは思いますが、詳しく調べていません。

このようにフォントは表示されます、配布サイトと印象が異なるのはフォントサイズが違うからでしょうか。

image

image

JSONデータを約25%削減

このアプリ最大のネックをやや改善しました。フルブラウザ版では約13.5MB、モバイルブラウザ版でも4.4MBのJSON形式のクラウディアをダウンロードする必要がありました。(「JSON形式のクラウディア」という表現につっこまないでください)今回、約20~30%データ量を削減しました。

改善前 改善後 削減率
フルブラウザ版 13.5MB 10.1MB 25%
モバイルブラウザ版 4.4MB 3.0MB 31%

 

一応、削減したことを証明する画像を貼っておきます。

フルブラウザ版

image

モバイルブラウザ版

image

データの削減に当たっては、まず画像を小さくしました。フルブラウザ版は1376×768でも縦スクロールが表示されないように、モバイルブラウザ版はデスクトップ版と共通の大きさにしました。あとは、canvasに長方形を描画する際に「X軸、Y軸、縦幅、横幅、色情報」の5つのプロパティを持ったJSON化するオブジェクトを作成していましたが、縦幅を1に固定してデータを作成することで描画する長方形の数が増えました(約31000個)が、プロパティが1つ減ったことでJSONデータを小さくすることができました。

デスクトップ版を公開

デスクトップアプリ(Windows Form)用クラウディアタイマーを公開しました。これまでのクラウディアタイマーを踏襲したものになっています。Blobストレージ上にOneClickInstaller用のインストーラーを配置しているので、「for Desktop」のリンクをクリックするとインストールが開始されます。

image

もちろん証明書は使っていないので警告が出ますが、インストールを実行してください。

image

アプリが起動するとデスクトップ左上にモバイルブラウザ用のページが表示されます。位置は動かせません。

image

秒数を入力すると、モバイルブラウザ版のサイズでカウントダウンが表示されます。

image

他のウィンドウよりも前面に表示されます。このようにPowerPointを全面表示しても、その前面に表示されます。

image

アイコンはあの画像を使わせていただきました。問題があればすぐに変更します。

image

技術的な話を少し、このアプリはWindowsFormにWebBrowserコントロールを貼り付けてモバイル版のWebページを表示しています。ウィンドウの枠を表示させないために、「FormBorderStyle」をnoneに、前面に表示させるために「TopMost」をtrueに設定しています。あと、記述しているソースはこれだけです。

[DllImport("urlmon.dll", CharSet = CharSet.Ansi)]

private static extern int UrlMkSetSessionOption(int dwOption, string str, int nLength, int dwReserved);

 

private void Form1_Load(object sender, EventArgs e)

{

    this.StartPosition = FormStartPosition.Manual;

    this.DesktopLocation = new Point(0, 0);

 

    const int URLMON_OPTION_USERAGENT = 0x10000001;

    string ua = "iPhone";

    UrlMkSetSessionOption(URLMON_OPTION_USERAGENT, ua, ua.Length, 0);

 

    webBrowser1.Navigate(http://david9142.cloudapp.net/CT/);

}

画面左上に表示させるために、StartPositionプロパティをManualに設定して、DestopPositionを(0,0)のいちに設定しています。また、モバイル用のページを表示させるために、ブラウザのUser-Agent文字列を”iPhone”にしています。

ソースはこちらからダウンロード可能です。「ClaudiaTimer2_part3.zip」をダウンロードしてください。ソースのビルドにはVisual Studio 11 Beta Express for Web(たぶんVisual Web Developer 2010でも可)と、ASP.NET MVC4 Betaが必要です。

Written by david9142

2012年5月13日 at 12:39 AM

Windows Azure上にたった3時間でサービスを公開してみた

leave a comment »

Windows Developer Daysの2日目の基調講演で公開された映像、「Through the Window」は約1分半しかありません。いわゆる「Shortバージョン」と呼ばれる長さです。おそらく作成されてはいないのでしょうが、フルバージョンを見たいという思いがありました。自分と同じようにフルバージョンの動画を見たいと思っている人はいるはずなので、その人たちのコメントを集めるサイトを作ってみました。

http://david9142.cloudapp.net/TTW/

image

実はこのサイトを作ろうと計画していたわけではなく、5/1の朝Twitterでリツイートされた @metamon30 さんのツイートをみてほぼ衝動的に作りました。ところどころハマりましたが、ほぼ3時間でサイトを公開することができたので、「Windows Azureならたった3時間でサイトを公開できる」みたいな感じで記録を残しておきます。

前提

まったくのゼロからサイトの作成を始めたわけではなく、クラウド(Windows Azure)上のサブスクリプションとローカルの開発環境は整備済みでした。具体的には以下の環境は事前に構築済みです。

  • Windows Azure上にホステッドサービス・ストレージサービスが作成済みで、いつでもアプリケーションがデプロイ可能な状態になっている
  • Visual Studio 2010 (Visual Web Developer 2010)とWindows Azure SDKがインストール済み

プロジェクトの新規作成

Visual Web Developerで新規プロジェクトを作成します。テンプレートは「Windows Azureプロジェクト」、ロールは「ASP.NET MVC4」を選択し、MVC4のインターネットアプリケーションテンプレートを使用しました。

モデルの作成

コメントを登録する機能を実装していきます。EntiryFrameworkのCodeFirst機能を使用する予定なので、コメント用のも出るクラスを作成します。本当に単純なクラスです。

    public class CommentModels

    {

        public int ID { get; set; }

 

        public string Name { get; set; }

 

        public string Comment { get; set; }

    }

コントローラー、ビューの作成(スキャフォールディング)

スキャフォールディング+EntityFramework(CodeFirst)の機能を利用して一気にControllerクラス、Viewを作成します。Controllersの追加から、以下のように指定して一気に自動生成させます。

image

実はここで少しハマりました。コントローラーを作成すると「オブジェクト参照がオブジェクト インスタンスに設定されていません。」と表示され、エラーになってしまいました。NugetでEntityFrameworkをアップデートしたら発生しなくなりました、なぜかはよくわかっていません。

これでコメントを登録・削除・編集する機能が一気に自動生成されました。単純なCRUD操作をするだけならあっという間に完成してしまうので、本当にスキャフォールディングの機能は便利です。

ビューの修正

ビュー(*.cshtml)を修正します。コメント機能に関して、以下の変更を行なっています。

  • トップページ(/Home/Index)から、コメント一覧画面(/Comment/Index)へのリンクを追加
  • コメント一覧画面からコメントを編集・削除するためのリンクを削除
  • コメント一覧画面に現在のコメント件数を表示

コメントは一覧・登録機能だけを提供することにしました。トップページのデザインを作成するのと、コメント一覧へのリンクをつけています。ASP.NET MVC4のインターネットアプリケーションテンプレートをそのまま利用しているので、分かる人には「あぁ、MVC4つかってるんだな」とバレてしまうと思います。

これでアプリケーションは完成です(笑) F5キーからAzureエミュレータを起動し、Webブラウザからコメントを登録すると、ローカルのSQL Server Expressにデータベース・テーブルが自動的に作成され、データが登録されます。CodeFirst機能の素晴らしいところはRDBMSのスキーマを意識せず、コードに集中できる点ですね。モデルの定義以外は自動生成コードしか使用していないので、動作確認もあっさり終了です。

SQL Azureサーバーの作成

ローカルにあるSQL Server Expressで動作確認を行ってきましたが、アプリケーションはWindows Azure上にデプロイするのでデータベースもクラウド(Windows Azure上)に用意する必要があります。SQL Azureサーバーの作成はウィザードに従えば一瞬です。他のWindows Azureサービスからアクセスできるようにファイヤーウォールを構成します。ファイヤーウォール設定の適用に約5分かかるところは注意点です。Web.configの接続文字列を変更しつつ待ちます。

image

Windows Azure上へのデプロイ

もう最後のプロセスです、ここまでの経過時間は約2時間です。アプリケーションをWindows Azureへデプロイします、自分はVisual Web Developerからパッケージを作成し、Windows Azure管理ポータルから「新規運用環境へのデプロイ」で行う派です。デプロイ実行後、Twitterで「デプローーーイ!!」とつぶやきます。(ここ重要)デプロイ完了後wktkしてページを確認すると、文字化けが...しかも、_Layout.cshtmlとHome/Index.cshtmlのみ文字化けしているようです。@normalianさんからアドバイスを頂いて文字コードを確認してみると、なぜかこの2つのファイルのみsjisになっていました。なぜかは分かりませんが。

テキストエディターを使って文字コードをutf-8に変更し、再デプロイします。次はコメント登録時に名前は登録されるのに、コメントの内容が登録されない現象が...コメント入力テキストボックスの長さを変更した時に、<input>のname属性を変更していました...name属性を自動生成値のまま、テキストボックスの長さを変更するように変更して、再々デプロイします。ここまでの経過時間は約2時間半です。

完成

サイト完成です!ここまでの経過時間は約3時間です。そのうちデプロイ後の修正・再デプロイを2回行なっているので、2時間半でのサイト構築も可能だと思います。WindowsAzureはもちろんですが、ASP.NET MVC4, EntityFrameworkの恩恵に預かる部分も大きいと思います。

このサイトのソースはこちらで公開しています、「TTWAzure.zip」をダウンロードしてください。ソリューションを開くにはVisual Web Developer 2010, ASP.NET MVC4 Beta, Windows Azure SDKが必要です。

Written by david9142

2012年5月3日 at 1:46 PM

カテゴリー: WindowsAzure

Tagged with , ,

クラウディアタイマー2 part2 (モバイル版を公開)

leave a comment »

先にフルブラウザ版を公開したクラウディアタイマーですが、モバイル版(スマホ向け)を公開しました。

http://david9142.cloudapp.net/CT/

2012-04-24T01-28-57

2012-04-24T01-28-46

フルブラウザ版が光回線推奨なので、ADSL・3G回線の人は「for Mobile」のリンクからモバイル版を利用してください。

【注意】

  • iOS5+Safari, Android4(標準ブラウザ), Windows7+IE9/Chrome18で動作確認しています。Android4のChromeでは正しく動作しません
  • モバイル版でも4.5MBのJSONデータをダウンロードします、回線が細い人は表示に時間がかかるかもしれません。

image

解説

基本的な仕組みはフルブラウザ版と同じで、画像ではなくCanvasでクラウディアを描画しています。ただ、モバイル版は以下の技術要素を使って、ASP.NET MVC4らしさを出しています。

  • jQuery Mobile
  • DisplayModes
  • ViewSwitcher

jQuery Mobile

モバイル版の画面はjQueryMobileで作っています、スマホ向け(タッチUI向け)の画面が作りやすいのはいいのですが、ある程度カスタマイズしないとjQueryMobileで作ったことがバレバレなのが難点ですね。jQueryMobileのスタイルシートで要素単位にフォントが指定されているので、WebFontを反映させるためにfont-familyの指定を全部削除しましたw

2012-04-24T01-28-57

DisplayModes

フルブラウザ用とモバイルブラウザ用のViewをそれぞれ作成し、DisplayModesの機能を利用してAndroid,iOSからのリクエストが来た場合はモバイルブラウザ用のViewを表示するようにしています。DisplayModesを使用すると特別な振り分けロジックを記載しなくてもデバイスに応じて表示するViewを切り替えることができます。

image

DisplayModesについての解説は以下のサイトにわかりやすく記載されているので、詳細を知りたい人は参考にしてください。

ASP.NET MVC 4 : モバイル デバイスの検出とビューの切り替え機能 (1)

ViewSwitcher

回線が細い人向けに、デスクトップ用Viewからモバイル用Viewへの切り替えにViewSwitcherの機能を利用しています。フルブラウザ用の画面の「for Mobile」のリンクからモバイル用の画面へ切り替えることができます。

キャプチャ2

デフォルトで自動生成されるViewSwitcherのHTMLは使用せず、フルブラウザからモバイルブラウザ向けの切り替えとして、以下のようにHTMLを記載しています。ViewSwitcherコントローラーのSwitchViewアクションをモバイル用に切り替えとして呼び出しています。

<a href="ViewSwitcher/SwitchView?mobile=True&returnUrl=@Request.Url.PathAndQuery" rel="external">

<div style="background-color: #38A3DB; height: 120px">

<span class="TileContents">for</span><br />

<span class="TileContents2"> Mobile</span>

</div>

</a>

また、モバイル用の画面からフルブラウザ用の画面への切り替えは「For FullBrowser」で行います。ソースは以下のとおりです、今度はモバイルからフルブラウザ用への切り替えです。

<li>@Html.ActionLink("for FullBrowser", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })</li>

キャプチャ

ViewSwitcherについては以下のサイトで素晴らしくまとめられているので、詳細を知りたい人は参考にしてください。

ASP.NET MVC 4 : モバイル デバイスの検出とビューの切り替え機能 (2)

ソースはこちらからダウンロード可能です。「ClaudiaTimer2_part2.zip」をダウンロードしてください。ソースのビルドにはVisual Studio 11 Beta Express for Web(たぶんVisual Web Developer 2010でも可)と、ASP.NET MVC4 Betaが必要です。

Written by david9142

2012年4月24日 at 2:02 AM

A look at ASP.NET MVC4 日本語解説 後編

leave a comment »

2/19 オランダで行われたTechDays2012でのScott Guthrieのセッションが動画で公開されています。

A look at ASP.NET MVC 4 (Channel9)

タイトルは「A look at ASP.NET MVC4」ですが、ASP.NET全体だけではなくWeb開発全体(データアクセス、クライアントスクリプト)についても触れています。もちろん全編英語なんですが、Visual Studioを使用してのデモが中心なので、コードが読めればだいたい理解できると思います。(たぶん...っていうかこのくらいの英語は何となく分からないと新しい情報を吸収するのは難しいです)個人的にも非常に興味深い内容なので、ざっくりと日本語でまとめたいと思います。あくまでテキストになぐり書きしたものを載せているので、「ざっくり」です。

前半部分はこちらのエントリーで公開しています。

Why Web APIs?

利用する側/提供する側も含めてつかったことあるよね?MVC4でデータや機能を外部に公開するためのWebAPIを簡単に作れるようになった。

なぜWebAPIが必要?

  • Build Richer Apps(よりリッチなアプリケーションをつくる)
  • Reach More Clients(多くのクライアントで利用可能にする)

クライアントとはブラウザ(ajax, flash etc)はもちろん、いろんなデバイスWin8(metro)、WP7など。データ、機能を外部に公開する綺麗な方法(Clean Way)

近年Twitter, facebookなどのAPIを使ったアプリがたくさんつくられている。

Demo: Building a Web API

  • 「Web API Controller」をつかってWebAPI用のコントローラーを作成
  • コントローラーは余分な属性などはついておらず、ApiControllerを継承している
  • コントローラーに必要なアクションメソッドを実装していく
  • RESTベースのURIフォーマット(GET/POST/DELETE etc)
  • Fiddler(HTTPリクエストを送信するツール)を使ってAPIをテスト
  • Final Releaseにはweb apiをテストできるツールを提供予定
  • URL(http://localhost:52145/api/products)を実行するとアクションメソッドが実行され、JSON形式のデータを取得することができる
  • データ形式を指定しなければ、デフォルトはJSON。サーバーサイドのソースでデータ形式を指定する必要はない
  • HTTPのAcceptヘッダーにapplication/xmlと記述するとxml形式のデータを取得することができる
  • アクションメソッドの戻り値の型をIQueriable型とすることで、でURLにODataクエリを記述してフィルタなどを行うことができる
  • データを追加するアクションメソッドを作成、引数はProduct型を指定
  • クライアントからJSONデータを送信(POST)すると、データを追加することができる
  • サーバー再度でJSON形式データをデシリアライズしてくれる
  • デフォルトではHTTPステータスは200を返す
  • アクションメソッドの戻り値をHttpResponseMessage型とすることで、ステータスコード・ロケーションヘッダーをカスタマイズすることができる。
  • MVCの機能はWebAPIでもそのまま利用できる(Authorize属性 など)

Demo: Calling a Web API from JavaScript

JavaScriptでWeb APIを呼び出すデモ、jQueryの$get, $ajaxで呼び出すサンプルを紹介

Web API Testing

テストは通常のコントローラーのテストと同様、簡単にユニットテストができる

Web API Hosting

IISだけでなく、コンソールアプリケーションなどでセルフホスト可能

コンソールアプリケーション内でホスティングするデモ

Mobile Web

いろんなプラットフォーム向けにネイティブアプリを作るのもいいけど、Mobile用Webサイトをつくっていろんなプラットフォームで利用できるようにするのも手だよね

MVC4ではいろんなデバイス向け、モバイル向けのページが作りやすくなっている

Adaptive Rendering

  • デフォルトプロジェクトテンプレートにCSS Media Queryが組み込まれている
  • ブラウザのウィンドウの大きさに応じてサイトのレイアウトが調整される

Display Modes

  • デバイスに応じてViewをオーバーライド可能(デバイスは違ってもURLは1つ)
  • アクセスのあったクライアントのデバイス情報に応じてリクエストを振り分ける処理を記述する必要はない

Mobile Optimized Templates

  • jQueryMobileを使用して、タッチデバイス用のページを作りやすくなっている

デスクトップ向けをメインターゲットにするのか、モバイル向けをメインターゲットにするのかで最適な機能を選ぶことができる

Real Time Communication with SignalR

  • ASP.NET 4.5でWebSocketがサポートされる
  • SignalRを使ってクライアント・サーバー間で双方向通信ができる
  • マルチユーザー向けのリアルタイムWebアプリが作成可能
  • SignalRはGitHubで公開されている
  • クライアントはJavaScriptで記述
  • サーバーではクライアント側で呼び出されるメソッドを記述する
  • // 今気づいた、デモ用のPCには拡張子が表示されていない
  • IE、Chromeでアプリを動作させ、片方のブラウザでの変更(オブジェクトの移動)がリアルタイムでもう一つのブラウザにも反映されるデモを行なっている

Asynchronous Support

サーバーサイドでも非同期処理は重要、リモートコンピューターへのアクセスのように時間のかかる処理を非同期で行うことでスレッドの占有時間、スレッド数を減らすことができ、よりスケール可能になる。

Visual Studio11を使うとMVCで非同期処理は以下のように記述できる
public class Products : Controller {

  public async Task<ActionResult> IndexAsync() {

    webClient web = new WebClient();

    string result = await web.DownloadStringAsync("www.bing.com");

    return View();
  }

}

まとめ、ASP.NET MVC4 新機能リスト

  • Bundling/Minification Support
  • Database Migrations
  • Mobile Web
  • Web APIs
  • Real Time Communication
  • Asynchronous Support

 

Written by david9142

2012年3月24日 at 11:26 AM

A look at ASP.NET MVC4 日本語解説 前編

leave a comment »

2/19 オランダで行われたTechDays2012でのScott Guthrieのセッションが動画で公開されています。

A look at ASP.NET MVC 4 (Channel9)

タイトルは「A look at ASP.NET MVC4」ですが、ASP.NET全体だけではなくWeb開発全体(データアクセス、クライアントスクリプト)についても触れています。もちろん全編英語なんですが、Visual Studioを使用してのデモが中心なので、コードが読めればだいたい理解できると思います。(たぶん...っていうかこのくらいの英語は何となく分からないと新しい情報を吸収するのは難しいです)個人的にも非常に興味深い内容なので、ざっくりと日本語でまとめたいと思います。あくまで「ざっくり」です。

ASP.NET MVC4新機能

  • Bundling/Minification Support
  • Database Migration (EF CodeFirst)
  • Web APIs
  • Mobile Web
  • Real Time Communication
  • Asynchronous Support

これらの機能を利用するためにサーバーには何もインストールしなくてもいい、必要なアセンブリを一緒にデプロイするだけ。(Windows Server/Azureともに)

MVC4はGoLiveライセンス

// デモPCにChromeのショートカットが

MVC4のプロジェクトテンプレートの説明

  • Internet
  • Intranet
  • Mobile
  • SPA
  • WebAPI

デモ(インターネットアプリケーションテンプレート)

  • 見た目がカッコよくなってるぜ
  • Bundlingはデフォルトで有効(JS,CSSを圧縮)
  • セマンティックタグ(<section>など)を使用
  • ajaxベースのログイン/登録操作、ファイナルリリースではOAuth2をサポート予定(liveIDなどでログイン)

Bundling and Minification

JavaScript、CSSの読み込みのためのHTTPのリクエスト数・サイズを小さし、パフォーマンスを向上させる。

今まではこうやって書いていた

<link href="styles/reset.css" rel="Stylesheet" />
<link href="styles/styles.css" rel="Stylesheet" />
<link href="styles/content.css" rel="Stylesheet" />
<link href="styles/glocals.css" rel="Stylesheet" />
<link href="styles/forms.css" rel="Stylesheet" />
<link href="styles/menu.css" rel="Stylesheet" />

こう書くと6回HTTP通信が行われる。今後は1つの記述「(ディレクトリ名)/css」でまとめて読み込みが行うことができる。

<link href="styles/css" rel="Stylesheet" />

コメント・改行・空白がカットされ、コンパクトになる。JavaScriptであれば以下のような記述

<script src="scripts/js"></script>

デモ

IEの開発者ツール(F12)でHTTPリクエスト数を確認して、リクエスト数・通信量が減っていることを確認。

JavaScript,CSSが1つのファイルに結合されていて、改行・空白が除去されていることを確認。

開発者はスクリプトの目的に応じてファイルを分け、読みやすいように改行や空白を入れて書いておいてもそのまま利用できる。

ヘルパーを使って、js/cssのファイル名をわからなくするようにできる。以下のように書くとクライアントからHTMLソースにはハッシュが表示され、ファイル名はわからない。

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/scripts/js")></script>

「Bundling and Minification」はMVCだけじゃなくて、WebFormでも動くよ。

Razorの新機能

URL Resolution Enhancements

HTMLに書かれているチルダ(~)を解釈できるようになったので、今まで書いていた記述

<script src="@Url.Content("~/Script/Site.js")"></script>

は、このように書くことができる

<script src="~/Script/Site.js"></script>

Conditional Attribute Enhancements

HTML要素・属性を条件に応じて出力する/しないの制御が大変だった。こんな感じに書く必要がある。
@{
  string myClass = null;

  if (someCondition){
    myClass = "shinyFancy";
  }
}

<div @{if (myClass != null) { <text>class="@myClass"</text> } } Content</div>

今後は、こんな感じに簡単に記述できる。

@{
  string myClass = null;

  if (someCondition){
    myClass = "shinyFancy";
  }
}

<div class="@myClass">Content</div>

こう書くとmyClassがnullの場合は「class=」の部分も出力されない

Database Migrations

Entity Framework Code Firstの話、Migration機能とは、コードからデータベーススキーマを変更できるようにすること。DBAに渡すためのSQLを生することも可能。

デモ (EF 4.3)

  • NugetでEFを更新(update-package EntityFramework)
  • モデル作成し、スキャフォールディングでCRUD操作を行うController,Viewを作成
  • データを何件か登録、データベース・テーブルが作成されていることを確認
  • Enable-MigrationをPackage manage Consoleで実行→「Migration」フォルダにタイムスタンプ付きのデータベース移行用のコードが生成される
  • モデルを変更(プロパティを追加)
  • Add-Migration (任意の名前)を実行→「Migration」フォルダに、列を追加するためのコードが自動生成される
  • Udatate-Databaseを実行→モデルの変更がデータベースに反映される
  • モデルを変更(NameプロパティにRequired属性を付加)
  • Add-Migration (任意の名前)を実行→「Migration」フォルダに、列属性を変更(NULLを許可しない)するためのコードが自動生成される
  • Udatate-Databaseを実行→モデルの変更がデータベースに反映される
  • Update-Database (Migrationファイル名)でロールバックも可能
  • Update-Database -Script -SourceMigration"移行前" -TargetMigration"移行後" でデータベース変更用のSQLを生成することができる(本番環境適用用など)
  • SQLを作らなくてもサーバーデプロイすれば差分をとって自動的にスキーマを移行可能

 

Written by david9142

2012年3月13日 at 1:08 AM

2/25(土) .NETラボ勉強会でスピーカーを担当させていただきます

leave a comment »

サイトにて公開されていますが、,NETラボ勉強会でスピーカーを担当させていただきます。

.NETラボ勉強会2012年2月

テーマはASP.NET MVC4です。お話をいただいた時点ではDeveloper Previewだったのでその話をしようと思っていましたが、最近ベータが公開されたので、MVC4 Betaについてお話させていただこうと思います。

おそらく、世界最速のASP.NET MVC4の勉強会セッションになるのではないでしょうか(笑)

リリースから勉強会まで10日しかないので、発表された情報をすべて消化して整理してまとめることが非常に難しいですが、自分の知り得る情報をデモを交えつつ出来る限りお伝えしたいと思います。どんな新機能なのか理解できていなかったり、ちょっと間違ったことを話してしまうかもしれませんが、ご容赦ください。マイクロソフトエバンジェリストの井上章さんもスピーカーを担当されるので、わからない点はフォローしてもらおう。

作成中ですが、当日どんなお話をするのかわかりやすくするために資料を公開します。

https://r.office.microsoft.com/r/rlidPowerPointEmbed?p1=1&p2=1&p3=SD5549D6C74FFBB345!2799&p4=&ak=!AP1BfDB03V7jbis&kip=1&authkey=!AP1BfDB03V7jbis

概要としては以下のとおりです。

  • ASP.NETの歴史
  • ASP.NETとは
  • ASP.NETの役割
  • ASP.NET MVCの歴史
  • ASP.NET MVC4 Beta
  • ASP.NET MVC4のテーマ
  • ASP.NET MVC4の新機能
  • 新プロジェクトテンプレート
  • Internet Application
  • Intranet Application
  • Mobile
  • Web API
  • Single Page Application
  • まとめ(プロジェクトテンプレート)
  • Display Modes
  • Browser Overriding
  • View Seitcher
  • Recipe
  • 非同期コントローラー
  • Windows Azure 統合
  • 学習用コンテンツ
  • ASP.NET 4.5
  • WebFormは? / WCFは?
  • まとめ

Written by david9142

2012年2月20日 at 12:10 AM

カテゴリー: .NETラボ

Tagged with ,