jQuery: » jQuery 1.5.1 Released
出ましたね！待ちに待った1.5.1。近々jQuery Mobile alpha 4もくるみたいですね！
1.5.1になってIE9での不具合が解消されたおかげで、とうとう機能するようになりました。
ぐっと来た.cc
http://guttokita.cc
1.5.1にするまではひどいもんですよ。ロードした時点でjQueryさんが起こるもんだから、画面真っ黒。まだまだjQuery Mobileが本気じゃないみたいなので、Webkitバリのレンダリングにはならないけど、これでクマさんも使ってくれるようになることでしょう。ね！
も、同じ問題を抱えてたので、こっちは1.4.4を使ってたんですが、試してみたところ、大丈夫そうだったのでそれぞれ1.5.1にバージョンアップです！
嬉しさあまってThinkpad x201sも買っちゃいました。てへ。情報くれた@wakakoo サンクス！
MVCだけじゃないよ。WebFormも使ってるよ。最近GridViewで表示結果が1件だけだったら最初から選択状態にしたいな、なんて思ったわけですが、そんなときってSelectedIndexに行番号セットすれば済むよね。
<asp:GridView runat="server" ID="gridView"
DataSourceID="dataSource" AutoGenerateColumns="false"
SelectedRowStyle-CssClass="selectedRow"
ShowHeader="false" DataKeyNames="Name">
<Columns>
<asp:CommandField ShowSelectButton="true" />
<asp:BoundField DataField="Name" />
<asp:BoundField DataField="AkumaNoMi" />
</Columns>
</asp:GridView>
<asp:ObjectDataSource runat="server" ID="dataSource"
TypeName="WebApplication1.People" SelectMethod="Select">
</asp:ObjectDataSource>
<asp:Button runat="server" ID="button" Text="ぼたーん" />
<h2 runat="server" id="subject"></h2>
こんなページでしょうか。
コードビハインドはこうですよね。
public class Person
{
public string Name { get; set; }
public string AkumaNoMi { get; set; }
}
public class People
{
private static List<Person> _people = new List<Person>
{
new Person {Name = "ルフィー", AkumaNoMi = "ゴムゴム"},
new Person {Name = "ニューゲート", AkumaNoMi = "グラグラ"},
};
public IEnumerable<Person> Select()
{
return _people;
}
}
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
gridView.SelectedIndexChanged += (s, ev) =>
subject.InnerText = gridView.SelectedIndex + "行目";
}
}
ObjectDataSourceを使ってるのはデータバインドの処理とか実際にはコード書かないっていう前提だからです。この状態で、選択ボタンを押すとちゃんと「n行目」って選択した行が表示されましょう。そうでしょう。
これって普通なんだけど、GridViewのSelectedIndexにセットするようPage_Loadに書いてみても「n行目」とは表示されませぬ。されませぬ。
protected void Page_Load(object sender, EventArgs e)
{
gridView.SelectedIndexChanged += (s, ev) =>
subject.InnerText = gridView.SelectedIndex + "行目";
if(!IsPostBack)
{
gridView.SelectedIndex = 1;
}
}
↑ちゃんとニューゲート選択されてるけど「1行目」とは表示されない。なぜでしょうか。SelectedIndexプロパティに値をセットしても、GridViewがSelectedIndexChanging/SelectedIndexChangedイベントをRaiseしてくれないからですね。これをRaiseしてあげればいいんだけどそんなことしてくれないと思うので、そんな時にはGridViewにあるprotectedなOnSelectedIndexChanging/OnSelectedIndexChangedを呼べばいいでしょう。GetMethodで取り出せばprotectedだとしても知ったこっちゃないしね。
private void GridViewSelectedIndex(GridView grid, int index)
{
grid.SelectedIndex = index;
var selectedIndexChanged = typeof(GridView).
GetMethod("OnSelectedIndexChanged",
BindingFlags.NonPublic |
BindingFlags.Instance);
if (selectedIndexChanged != null)
{
selectedIndexChanged.Invoke(grid,
new object[] { new EventArgs() });
}
}
これをPage_Loadの”gridView.SelectedIndex = 1;”の部分で呼び出してあげるように書き換えちゃえば、ほら出来た！
うぬ。悪くない。でも、これと同じことをクライアントサイドで選択ボタンを押したことにすることでも、実現できますね。例えばこう。
<script type="text/javascript">
<% if(!IsPostBack){ %>
$(function () {
__doPostBack("<%=gridView.ClientID.Replace("_","$") %>","Select$1");
});
<%} %>
</script>
固定でニューゲートを選択させてます。Select$1の部分。これはちょっと気持ち悪いかも。悪くないとは言いがたい。UpdatePanelに入れておけばそれなりな感じでいいかもしれないけど、普通に1回PostBackされるから悩ましい。
サーバーサイドとクライアントサイドのどちらをチョイスしてもいいかなと思うけど、どうでしょうね。いきなりGridViewの話をしているのはフリで、ここからが本題です。
AjaxControlToolkit(ACT)をがんばって使ってます。WebFormでの簡単Ajax導入に関してACTはとてもいい選択肢ではありますね。お金払わなくていいし、クライアントサイドの知識も要らないし。でも気に入らない部分も多くてウキャ～！ってなる。ACTとはいえ、レンダリングされてしまえばただのHTMLとJavaScriptなわけじゃないですか。気に入らなければ書き換えちゃえばいい。どこを書き換えるかがポイントだと思いますが、今回Accordionを書き換えてみました。ボス、ごめんね！
先程のGridViewのサンプルの続きに書き足していきます。
まずはASPXに以下を追加。これでAccordionが使えます(なんつーかツールボックスからのドラッグアンドドロップのやり方を知ってるともっとラクにかけるんだろうけど、そんなやり方はわすれたので普通に手で書いてます)。
<asp:ToolkitScriptManager runat="server"></asp:ToolkitScriptManager>
<asp:Accordion runat="server" ID="accordion"
HeaderCssClass="acd_header" HeaderSelectedCssClass="acd_selected"
ContentCssClass="acd_content">
<Panes>
<asp:AccordionPane runat="server" ID="pane1">
<Header>pane 1</Header>
<Content>パネルのコンテンツ その1
<p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p>
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="pane2">
<Header>pane 2</Header>
<Content>パネルのコンテンツ その2
<p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p>
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="pane3">
<Header>pane 3</Header>
<Content>パネルのコンテンツ その3
<p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p>
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="pane4">
<Header>pane 4</Header>
<Content>パネルのコンテンツ その4
<p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p>
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="pane5">
<Header>pane 5</Header>
<Content>パネルのコンテンツ その5
<p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
恐ろしいほど簡単。もちろん、サーバーサイドで動的にPaneを追加するような使い方も多いでしょう。そうすると、Paneが10個や20個にナッチャウことも。そうなるとインターフェースとしてちょっと問題あり。そんなに追加しなきゃAccordionっていいのにとつくづく思う。でも、かなり開発が進んでしまうと、おいそれとインターフェースを変更するのはしんどい作業になります。変更箇所多すぎるし。そんなこんなで、クライアントサイドで何とかしてしまいます。
完成形は↑これです。何をしてるのかというと、AccordionのHeaderをSelect(DropDown)にして、選択したら該当するPaneの中身を表示するという動きです。ヒマがあったら動かしてみてね。
まずは、AccordionがレンダリングするHTMLを確認。
<div>
<input type=”hidden” value=”選択してるPaneのIndex”/>
<div class=”header class name”>header 1</div>
<div class=”content class name”>content 1</div>
<div class=”header class name”>header 2</div>
<div class=”content class name”>content 2</div>
</div>
こんな構造ですね。ヘッダとコンテンツが、連続してるdiv要素をクラス名で判別というのがちょっと気に入らないですが、今回そこはどうでもいいです。最初にこういう構造でレンダリングされるというのがわかりさえすればいいです。
続いて、どういうスクリプトが動いてるのかを確認してみると、ページ内では↓これだけですね。
<script type="text/javascript">
//<![CDATA[
(function() {var fn = function() {
$get("ctl00_MainContent_ToolkitScriptManager1_HiddenField").value = '';
Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.AccordionBehavior,
{"ClientStateFieldID":"ctl00_MainContent_accordion_AccordionExtender_ClientState",
"HeaderCssClass":"acd_header",
"HeaderSelectedCssClass":
"acd_selected","id":"ctl00_MainContent_accordion_AccordionExtender"},
null, null, $get("ctl00_MainContent_accordion"));
});
//]]>
</script>
Sys.Application.add_initのタイミングでAccordionBehaviorオブジェクト(クラスのような作りかな？)を渡してますね。そもそもSystem.Extendedが何者なのかしらないですけど、ソースが公開されてるので確認してみたところ、各種Behaviorオブジェクトのprototype.initializeでいろいろ初期化処理を書いてました。
ということは、そこを壊せば、Accordionの初期化処理は走らなくなるということなので、add_initで追加したものが実行される前に、AccodionBehavior.prototype.initializeを壊してみました。runat="server"なform要素の閉じタグ直前に以下のコードを書き足します。
<script type="text/javascript">
if (Sys.Extended !== undefined &&
Sys.Extended.UI.AccordionBehavior !== undefined) {
Sys.Extended.UI.AccordionBehavior.prototype.initialize = function () { };
}
</script>
やりすぎな感じもしますが、まぁいいでしょう。
続いてドロップダウンを表示する枠と、Paneの中身を表示する枠を用意します。Accordionタグの上にでもおいておきます。
<div id="dropdown"></div> <div id="viewer"></div>
最後に、Accordionそのものが表示されてしまわないように、Accordionを非表示するためのCSSを定義します。Visibleを指定しちゃうとホントになくなっちゃうからCSSだけで消しちゃうのがいいです。
<asp:Accordion runat="server" ID="accordion"
CssClass="accordion_hack" HeaderCssClass="acd_header" HeaderSelectedCssClass="acd_selected"
ContentCssClass="acd_content">
太字のところで、クラス名指定して、そのクラスはdisplay:none;だけを適用してます。
あとはJavaScriptでDropDownを生成するのと選択肢を変えたときに表示を切り替えるようなコードをゴリゴリ書けば完成。
<script type="text/javascript">
$(function () {
var hack = function () {
var accordion = $(".accordion_hack:first");
var viewer = $("#viewer");
var dropdown = $("<select />");
var currentId = accordion.find(".acd_selected")
.next()
.attr("id");
var prevId = currentId;
accordion.find(".acd_content").each(function (idx, e) {
$(dropdown).append(
$("<option />").text($(e).prev().text())
.val($(e).attr("id")));
});
$(dropdown).appendTo("#dropdown");
$(dropdown).change(function (e) {
prevId = currentId;
currentId = $(this).val();
viewer.fadeOut("fast",function () {
if (currentId != prevId) {
$("#" + prevId).appendTo(accordion);
}
$("#" + currentId).show().appendTo(viewer);
}).fadeIn("fast");
//
accordion.find("input[type='hidden']:first")
.val($(this).find("[value=" + currentId + "]").index());
});
$(dropdown).val(currentId).trigger("change");
};
hack();
});
</script>
わざわざhack変数にいれてるのは、特に意味ないです。テスト目的なので気にしないでね！長々とMVCとは関係ないことを書きましたが、要はJavaScriptとHTML、DOM操作、CSSを理解してると、ASP.NETもいろいろカスタムなレンダリングを気軽に実装できるよっていう話なのと、ACTをハックすることでちょっと勝てた気になれたので、調子にのってエントリしてみました。
今回の一式もダウンロード出来るようにしておきます。興味があればどうぞ。
だた、注意点があります。VS2010でASP.NET 4をターゲットにして作ってるのに、ACTは4.0じゃなくて3.5向けのものを使ってます。理由はACT4のAccordionPaneがMasterPageを使ってる時に、id属性を正しく吐き出してくれないからです。3.5だと問題ないので、4.0でなんかおかしくなったんじゃないかな。気をつけてね。
TEERA 2.0 » YSlow web page optimization for ASP.NET MVC
上記サイトでは一般的な話になってるけど、せっかくなのでNerdDinner(NerdDinner.com - Where Geeks Eat - Home)がどこまで最適化できるのか試してみようと思います(ビデオ見疲れたし)。
まずは現状↓こんな感じです。
※クリックで拡大。
見ての通り、あまり最適化の余地がない．．．。localhostからの取得自体が少なすぎ。Site.cssとHome/IndexのHTMLと、jQueryとMap.js。あとはVirtualEarthのサーバーから取得。
トータルGradeは60ポイントでD判定。
うぬ～。マッシュアップ恐るべし。
あまりいいサンプルじゃないのは分かってるけど、少し最適化。最適化手法そのものはどんなサイトでも通用する物なので。今回どこを最適化するかというとCSSとJavaScript。画像もないし、ETagもVirtualEarthがらみだし、CDNも勘弁。NerdDinnerサンプルではCSSは1個しかないけど圧縮して、キャッシュが効くように。同じくJavaScriptも圧縮してキャッシュが効くようにするけど、さらに動的に１つのファイルにしてしまう。今回はHome/Indexしかいじらないですが、Viewに埋め込まれてるJavaScriptも外だしにしてしまいます。
ようするに以前の投稿の続きです。スタティックハンドラはそのまま使います。JSONPが無いのでそこもスルー。
圧縮と縮小化、連結、キャッシュヘッダのコントロールを行うのに新しいコントローラを作成します。コントローラのアクションの結果が圧縮されたCSSかJavaScriptになるようにします。わざわざStaticFileHandlerじゃないのは複数ファイルを連結させたいからです。
まずは圧縮させるためのActionFilterを定義。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using System.IO.Compression;
namespace ClientTagHelpers
{
public class CompressAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
// base.OnResultExecuted(filterContext);
var request = filterContext.HttpContext.Request;
string acceptEncoding = request.Headers["Accept-Encoding"];
if (string.IsNullOrEmpty(acceptEncoding)) return;
acceptEncoding = acceptEncoding.ToUpperInvariant();
var response = filterContext.HttpContext.Response;
if (acceptEncoding.Contains("GZIP"))
{
response.AppendHeader("Content-encoding", "gzip");
response.Filter = new GZipStream(response.Filter, CompressionMode.Compress);
}
else if (acceptEncoding.Contains("DEFLATE"))
{
response.AppendHeader("Content-encoding", "deflate");
response.Filter = new DeflateStream(response.Filter, CompressionMode.Compress);
}
}
}
}なんてことないです。Response.Filterに圧縮用のストリームを指定するだけ。後はよしなにはからってくれます。使い方はこれをコントローラのアクションに指定するだけです。続いてコントローラ。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using System.Text;
using System.IO;
using System.Web.UI;
using System.Web.Caching;
using ClientTagHelpers;
namespace NerdDinner.Controllers
{
public class UtilityController : Controller
{
[Compress, OutputCache(Duration = (30 * 24 * 3600), VaryByParam = "*")]
public ActionResult Compress(string src, string key, string ver)
{
var mime = key.Equals("css", StringComparison.CurrentCultureIgnoreCase) ?
"text/css" : "application/x-javascript";
var path = TagRegisterHelper.GetKeyVirtualPath(key);
var items = src.Split(',');
if (items != null && items.Length > 0)
{
var cacheKey = src + key + ver;
var responseText = (string)HttpContext.Cache.Get(cacheKey);
if (responseText == null)
{
var srcText = new StringBuilder();
foreach (var script in items)
{
string fullpath = Server.MapPath(path + script);
if (System.IO.File.Exists(fullpath))
srcText.Append(System.IO.File.ReadAllText(fullpath));
}
if (key.ToLower() == "css")
{
responseText = srcText.ToString();
}
else
{
var minJs = new StringBuilder();
using (TextReader tr = new StringReader(srcText.ToString()))
{
using (TextWriter tw = new StringWriter(minJs))
{
new JavaScriptSupport.JavaScriptMinifier().Minify(tr, tw);
}
}
responseText = minJs.ToString();
}
HttpContext.Cache.Insert(cacheKey, responseText);
}
return Content(responseText, mime );
}
return new EmptyResult();
}
}
}Utility/Compress?src={カンマ区切りでファイル名}&key={種類}&ver={キャッシュさせるためのバージョン} ↑こんな感じのUrlで使用します。ルーティングを登録すればもう少し綺麗になりますね。気になる方はチャレンジしてみてください。
ここでJavaScriptの縮小化をするのにJavaScriotMinifierと言うのを使ってます。これはSmallSharpTools.Packer - Tracから取得出来ます。自分で書いてもいいです。単純にコメントと空白を削除するだけなので自分でも書けるところですが、ここでは楽します。変数名やファンクション名を最適化とかは無しです。自分でそこまでするならハフマン的なことをすればいいかも。
ファイルを１つに連結して縮小化のステップを毎回処理するのは大変(CPUとIOが)なので、HttpRuntimeのCacheに入れてしまいましょう。キャッシュのクリアは考えない富豪プログラミングで。パラメータで指定しているverには指定したファイル群の中で最大の最終更新日時を整数化したものを渡すように作れば上手く行く寸法です。
OutputCache属性はMVCにそもそも用意されてるものなので、そのまま利用しましょう。ここでは有効期限1ヶ月を指定してます。もっと長くてもいいです。どうせverの値が変われば再生成なのでお構いなし。
サーバー上でメモリに実体をキャッシュし、クライアントでも有効期限を指定してファイルキャッシュさせるのは無駄なように見えますが、違うUAからのアクセスならクライアントキャッシュは入って無いので、その時サーバー上のメモリキャッシュが賢く機能してくれます。その為には両方のキャッシュを上手く使う事が大事。中間にリバースプロキシを入れてそこでキャッシュさせたりすると、アプリケーションサーバーの負荷を下げるのに役立つよね。やったこと無いですが。
後は、Viewで使うヘルパーを。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Routing;
using System.Web.Mvc;
using System.Text;
using System.IO;
using System.Web.Script.Serialization;
namespace ClientTagHelpers
{
public static class TagRegisterHelper
{
public static string SourceKey = "_sourceKeys";
public static string ModelKey = "_modelKeys";
public static string UrlKey = "_urlKeys";
static string _formatScript = "<script type=\"text/javascript\" src=\"{0}\"></script>\n";
static string _formatCss = "<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" />\n";
static string _pageScriptPath = "~/Views/";
public static string ToJSON(object values)
{
if (values != null)
{
#pragma warning disable 0618
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(values);
#pragma warning restore 0618
}
else
return "";
}
public static Dictionary<string, string> PathList = new Dictionary<string, string>()
{
{"css","/Content/"},
{"site","/Scripts/"},
{"page","/ViewScripts/"},
{"jsonp",""}
};
static Dictionary<string, List<object>> GetContextItems(HttpContextBase context, string key)
{
var items = context.Items[key] as Dictionary<string, List<object>>;
if (items == null)
context.Items[key] = items = new Dictionary<string, List<object>>();
return items;
}
public static string GetKeyVirtualPath(string key)
{
var path = PathList[key.ToLower()];
if (key.Equals("page", StringComparison.CurrentCultureIgnoreCase))
path = _pageScriptPath;
return path;
}
static DateTime GetLastModify(string basePath, IEnumerable<string> fileNames)
{
return fileNames.Max(fileName => File.GetLastWriteTime(basePath + fileName.Replace("/", "\\")));
}
// -------------------------------------
public static void RegisterViewScripts(this HtmlHelper helper)
{
helper.RegisterViewScripts(null, null);
}
public static void RegisterViewScripts(this HtmlHelper helper, string scriptName)
{
helper.RegisterViewScripts(scriptName, null);
}
public static void RegisterViewScripts(this HtmlHelper helper, object values)
{
helper.RegisterViewScripts(null, values);
}
public static void RegisterViewScripts(this HtmlHelper helper, string scriptName, object values)
{
// ViewPathからScriptファイル名を推測
if (string.IsNullOrEmpty(scriptName))
{
var webFormView = helper.ViewContext.View as WebFormView;
if (webFormView != null)
{
var viewFile = (helper.ViewContext.View as WebFormView).ViewPath;
scriptName = viewFile.Replace(".aspx", "") + ".js";
}
}
else if (!scriptName.StartsWith(_pageScriptPath))
scriptName = _pageScriptPath + scriptName;
// 実体パス
var filepath = helper.ViewContext.HttpContext.Server.MapPath(scriptName);
// ファイルがあるならリストに追加
// ※ベースフォルダを除外したパス
if (System.IO.File.Exists(filepath))
helper.RegisterSource("page", scriptName.Replace(_pageScriptPath, ""));
if(values!=null)
helper.RegisterJSON(values);
}
public static void RegisterJSON(this HtmlHelper helper, string key, object value)
{
var items = GetContextItems(helper.ViewContext.HttpContext, ModelKey);
// ModelDataの場合は同一キーで値を入れようとしてもダメよ。
// 常に最初に入れた値だけが取り出せます。
if (!items.Keys.Contains(key))
items.Add(key, new List<object>());
items[key].Add(value);
}
public static void RegisterJSON(this HtmlHelper helper, object values)
{
var modelValues = new RouteValueDictionary(values);
foreach (var modelValue in modelValues)
helper.RegisterJSON(modelValue.Key, modelValue.Value);
}
public static void RegisterSource(this System.Web.Mvc.HtmlHelper helper, string key, string fileName)
{
var items = GetContextItems(helper.ViewContext.HttpContext, SourceKey);
if (!items.ContainsKey(key))
items[key] = new List<object>();
if (fileName.StartsWith("~/"))
fileName = VirtualPathUtility.ToAbsolute(fileName, helper.ViewContext.HttpContext.Request.ApplicationPath);
items[key].Add(fileName);
}
// -------------------------------------
public static string RenderModelJSON(this HtmlHelper helper)
{
var formatJSON = "<script type=\"text/javascript\">\n" +
"var pageModel = {0};\n" +
"</script>\n";
string json = "{}";
var values = GetContextItems(helper.ViewContext.HttpContext, ModelKey);
if (values != null && values.Count > 0)
{
var modelData = values.Select(v=>new {
Key = v.Key,
Value = v.Value[0]
})
.ToDictionary(v=>v.Key, v=>v.Value);
json = ToJSON(modelData);
}
return string.Format(formatJSON, json);
}
private static string ScriptTags(this System.Web.Mvc.HtmlHelper helper, string key)
{
var items = GetContextItems(helper.ViewContext.HttpContext, SourceKey);
var sb = new StringBuilder();
if (items.ContainsKey(key))
foreach (var item in items[key])
sb.Append(helper.ScriptTag(PathList[key] + item.ToString()));
return sb.ToString();
}
public static string ScriptTag(this HtmlHelper helper, string source)
{
return string.Format(_formatScript, source);
}
public static string RenderScriptTags(this HtmlHelper helper)
{
return helper.RenderScriptTags("site") +
helper.RenderScriptTags("jsonp") +
helper.RenderModelJSON() +
helper.RenderScriptTags("page");
}
public static string RenderScriptTags(this System.Web.Mvc.HtmlHelper helper, string key)
{
var nonCompress = new[] { /*"page",*/ "jsonp" };
if (nonCompress.Contains(key.ToLower()))
return helper.ScriptTags(key);
else
return helper.CompressTags(key, _formatScript);
}
public static string RenderCssTags(this System.Web.Mvc.HtmlHelper helper, string key)
{
return helper.CompressTags(key, _formatCss);
}
public static string RenderCssTags(this System.Web.Mvc.HtmlHelper helper, string[] fileNameList)
{
var key = "css";
var items = GetContextItems(helper.ViewContext.HttpContext, SourceKey);
items[key] = new List<object>();
foreach (var fileName in fileNameList)
items[key].Add(fileName);
return helper.CompressTags(key, _formatCss);
}
private static string CompressTags(this System.Web.Mvc.HtmlHelper helper, string key, string format)
{
var basePath = GetKeyVirtualPath(key);
var path = helper.ViewContext.HttpContext.Server.MapPath(basePath);
var items = GetContextItems(helper.ViewContext.HttpContext, SourceKey);
if (items.ContainsKey(key))
{
var list = GetContextItems(helper.ViewContext.HttpContext, SourceKey)[key].Cast<string>();
var maxDate = GetLastModify(path, list);
var ver = maxDate.ToFileTime().ToString();
string names = list.Select(l => l).Aggregate((s, ss) => s + "," + ss);
if (!string.IsNullOrEmpty(names))
return string.Format(
format,
string.Format("/Utility/Compress?src={0}&key={1}&ver={2}",
new[]{
helper.ViewContext.HttpContext.Server.UrlEncode(names),
key,
ver})
);
}
return "";
}
}
}前回のエントリの中でも説明しましたが、CSS・サイト共通外部JS・ページ固有外部JS・ 無名クラスをJSONで展開の4パターンを上手いこと処理するヘルパーです。それぞれ固定のパスにファイルがあるという前提でタグを出力します。CSSは/Content、サイト共有のJavaScriptは/Scripts、ページ固有のJavaScriptはViewと同じフォルダにViewと同じ名前で作成(/ViewScripts/Home/Index.jsの形式でアクセス)。
Compressアクションに指定するverを生成するために、GetLastModifyがファイルに直接アクセスして最終更新日時を取得してるけど、ここでもHttpRuntimeのCacheをCacheDependencyを上手く利用してしまえば、実体へのアクセス(IO)はなくせるので、さらに改良の余地あり。
Viewも変更します。まずはSite.Master。<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<% = Html.RenderCssTags(new[] { "site.css" }) %>
<meta content="Nerd, Dinner, Geek, Luncheon, Dweeb, Breakfast, Technology, Bar, Beer, Wonk" name="keywords" />
<meta name="description" content="Host and promote your own Nerd Dinner free!" />
<% Html.RegisterSource("site", "jquery-1.2.6.js"); %>
</head>
<body>
<!-- 省略 -->
<%= Html.RenderScriptTags() %>
</body>
</html>ヘッダでCSSをlinkタグで書いていたのをHtml.RenderCssTagsに変更。引数は文字列配列でファイル名を並べてください。いくつ書いてもOKです。すべてを1つのファイルに連結して、圧縮したレスポンスを返すようにUtility/Compressを参照するlinkタグを生成します。同じくjQueryのscriptタグをHtml.RegisterScriptTagsに変更。最初の引数"site"はサイト共有を表します。閉じbodyの直前にあるHtml.RenderScriptTagsでRegisterしているすべてのスクリプト(サイト共有、ページ固有、無名クラス３つとも)を展開します。こうすればページの最後ですべてのスクリプトを展開出来るようになって、YSlow的にも高評価。
今回はHome/Indexしか最適化しない(全部は面倒)ので、Home/IndexのViewを少し変更します。
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
Find a Dinner
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
<h2>Find a Dinner</h2>
<div id="mapDivLeft">
<div id="searchBox">
Enter your location: <%= Html.TextBox("Location") %> or <%= Html.ActionLink("View All Upcoming Dinners", "Index", "Dinners") %>.
<input id="search" type="submit" value="Search" />
</div>
<div id="theMap">
</div>
</div>
<div id="mapDivRight">
<div id="dinnerList"></div>
</div>
<% Html.RegisterSource("site", "Map.js");%>
<% Html.RegisterViewScripts();%>
</asp:Content>ここでマッシュアップするためにVirtualEarthのサーバーからスクリプトを取得するようになってますね。これに関してもちゃんとページの最後にタグ出力しなきゃいけないところですが、そこまでは作ってないので、これまた興味のある人はRegisterOuterScripts的な関数を作ってみてSite.MasterのRenderで一括出力できるようにしてみてはどうでしょう。今回そこは作ってないので、直接ここに残したままにしときます。サイトで使うVirtualEarth用の関数群を保持してるMap.jsは、本来サイト共有のスクリプトなのでSite.Masterで一括して指定しておきたいところですが、無駄にすべてのページに反映されるのも良くないので、ViewでRegisterします。こうすると、サイト共有のスクリプトキャッシュが2種類作成されることになります。1つはjQuery＋Mapと、もう一つはjQueryのみのキャッシュ。それほど迷惑な話でもないので、これでもいいんじゃないかなと思いますがどうですかね。最後のRegisterViewScriptsがページ固有の外部JSを登録してる部分です。Viewのパスから勝手にスクリプト名を判断してます。複数のViewで共有っていうこともあり得る(例えば、データの新規登録と編集では共通のスクリプトを使いたいけど、それはサイト共有じゃない)ので、スクリプト名を指定するオーバーロードもあります。細かいところはソースを見てね。
最後にViewScripts用のルートを登録すれば完成です。前投稿と同じですが再掲(Global.asax)。
// -----------------------------------------
// view scripts routing
routes.MapRoute(
"ViewScripts",
"ViewScripts/{*scriptName}",
null,
new { scriptName = @"[\w]*\/[.|\w]*\.js" }
).RouteHandler = new ClientTagHelpers.ViewScriptRouteHandler();これで、再度YSlow！
※クリックで拡大。
ちゃんとCSSとJavaScriptは圧縮されてファイルサイズも小さく(トータルが425KBから325KBに縮小)なってるけど、全体的には全く効果が無いに等しい．．．。Grade 67でDのままだし。7ポイントアップはしたけど。
VirtualEarthが有効期限の無いレスポンスを返してるのと、Etagがちゃんと制御されてないのが大きなところ。これ以上はどうしようもないかな～。
もっと、本格的なアプリケーションだとこれでずいぶん最適化される(CompressをHome/IndexアクションにつけるとかもOKだけど認証かかってる物のキャッシュは気をつけてね)し、画像なんかが多い場合も最適化の余地が残されてる可能性大なので。
興味ある人はお試しアレ。
今まで、プロジェクトのソースを直接書いてたけど、ダウンロード出来る方が試しやすいと気がついたので、貼り付けておきます。
そうそう、Prototype of VEToolkit + ASP.NET MVC 1.0 Component Checked InというサイトでVirtualEarthのMVC用ヘルパーを公開中です。Ajax.MapでJavaScript(NerdDinnerのMap.jsの部分)を出力してくれます。外部ファイルにならないけど、パラメータ指定がチェインしててなんかオシャレな感じ。でもこれなら無名クラスでしていして、内部でデフォルト値とマージするスタイルの方がいい気がするね。
<%-- Create a Map and name it's global JavaScript variable "myMap" so it can be referenced from your own JavaScript code --%>
<%=Ajax.Map("myMap")
.SetCssClass("MapWithBorder")
.SetCenter(new Location(44, -78))
.SetZoom(6)
.SetMapStyle(MapStyle.Road)
.SetOnMapLoaded("MapLoaded")%>↑こうやって使うんだけど、↓こうの方が分かりやすくないですか？
<%=Ajax.Map("myMap")
.Set(new {
CssClass = "MapWithBorder",
Center = new Location(44, -78),
Zoom = 6,
MapStyle = MapStyle.Road,
OnMapLoaded = "MapLoaded"
}) %>
この辺は好みだから、自分で作っちゃえばいいんだけどね！ちなみにソースを確認してて、面白いEnumヘルパー発見。EnumExtensionsクラスでEnumに拡張メソッドを指定してるんだけど、Enumに属性でJavaScriptに出力するときの文字列を指定しておくというもの。例えば↓。
public enum MapMode : int
{
/// <summary>
/// Displays the map in the traditional two dimensions
/// </summary>
[JavaScriptValue("VEMapMode.Mode2D")]
Mode2D = 0,
/// <summary>
/// Loads the Virtual Earth 3D control, displays the map in three dimensions, and displays the 3D navigation control
/// </summary>
[JavaScriptValue("VEMapMode.Mode3D")]
Mode3D = 1
}こうやって、Enumの属性に指定しておいて、出力するときにToJavaScriptValueの結果をレンダリング。賢い～！！
Maarten Balliauw {blog} - Creating an ASP.NET MVC application with Google Gears
面白いエントリー発見。 Gearsは最初のリリースの時に少し触ってみた程度で、名前からGoogleが消えたあたりから全く状況を追いかけてないんだけど、このサンプルがかなり面白い。
エントリーには２つソリューションがあって、１つはMVCオンリーでもう一つがGears対応版。両方見比べると分かりやすいんだけど、なにせDBファイル込みになってるから少しサイズが大きいのが難点。今時気にしないか。
どっちにも共通して存在してる(デフォルトで作成されるファイルを除く)のが、NoteControllerとそのView達(List/Detail/Edit/Create)。
で、Gears対応版では、Routeにmanifest.jsonへのリクエストに応えるためのルート登録をして(GearsController)、関連jsファイルが含まれててそれをインクルードするためにSite.Masterが少し違うだけ。
MVC部に注目してみると、GearsControllerのIndexアクションが~/Contentと~/Scriptsフォルダの全ファイルのURL、それとMVCがViewを返すURL(/Homeや/NoteList)、データ詳細のURLをJsonで返すだけに見える。
一体全体どこでデータとViewのHTMLとを分離するコードがあるんだろう。テンプレート的な物が定義されてるんだとばかり思ってたけど、そんなコードが見あたらない。
demo_offline.jsはGearsを有効にしたり、無効にしたときのローカルストアの操作と、完全オフラインになったときに編集用リンクを無効にしたり、オフラインかどうかを監視するコードだけっぽい。 gears_init.jsはいじらないコードだよね。
formやinputのname属性とかを見て自動で判断してくれてるのかな。それともシンプルに各URLに対するアクションをすべて記録してて、オンラインになったときに再生？ ちゃんとGearsの仕様を確認すれば分かることなんだろうけど、まぁ、ねぇ。今はそんなに興味ないって言うか。
それにしても、Gearsはずいぶんスゴイ事になってる気がするし、MVCとの連携がこれほどシンプルに出来るのもViewStateとPostBackがないおかげだよね。
You Still Can’t Create a jQuery Plugin? – NETTUTS
まだ、作ったことないっていうかjQuery自体まだ使ったことないってばよ。fnに入れればいいんでしょ？
そのくらいしか、知識がないので、ビデオでお勉強。
シンプルなプラグインだけど、まずはシンプルな物を理解しないとね！
(function($){
…
})(jQuery);
っていうのは基本みたい。jQuery本体を引数に渡して$でショートカット。
ちょっと、不思議に思ったのがthisの扱い。
Enumerable(っていうのかな)なリストに対して、プラグインを実行すると、プラグイン内でのthisがこのリストを指す。プラグイン内でそのリストをeachで回したときのthisはDOMエレメント(だよね？)。だからeach内では$(this)でjQueryでかぶせて色々便利になるようにしないといけない。
hoverに渡すfunctionがmouseenterとmouseoutの両方なのが素敵な感じがする。
ビデオ中ではmouseoutの時に$(‘tooltip’).hide()って書いてるけど、これじゃ、無限に同じIDのtooltipが出来ちゃうからダメじゃん！と思ってたけど、デモで使ってるコード(ブログエントリの最後のコードも)ではちゃんとremove()になってる。前もそうだったけど、ここで取り上げるビデオな何かしら引っかけがあるよね。
最後に、チェインするためにreturn thisでエレメントのリストをそのまま返すあたりも、jQuery流なのかな。これしないと、"."で区切って続けていろいろ出来ないもんね。
この例だと、fnに単一のfunction(内部では無名関数使ってるけど)を入れてるだけの、シンプルな物だけどもっと大きなプラグインを作る時にはどうするか気になる。けど、そこはすでに公開されてる他のプラグインをいくらでも参照すればいいから、さぁ、作ってみよう！って言うときにはそれほど問題にならないよね、きっと。
もちろんASP.NET MVCで作るときの話。
ところでタイトル変だね。全部一緒にまとめて圧縮ってわけじゃないですよ。 JavaScriptもCSSも、外部ファイルにするでしょ。で、外部ファイルにする単位ってやっぱり機能や役割で分割すると思うんですよ。 分割したはいいけど、それらを個別にscriptタグやらlinkタグで読み込むとそれはそれはたくさんのHTTP要求が発生しますよ。
サイトのパフォーマンスをチェックするときに、YSlowって使うでしょ。使いませんか？そうですか。 いやいや、使うんですよ。 で、ハイパフォーマンスWebサイトにも書いてるけど ・HTTP要求の回数を減らしましょう。 ・JavaScriptとCSSは圧縮しましょう。 ・CSSはページの上部、JavaScriptは下部でインクルードしましょう。 ・キャッシュの有効期限設定しましょう。 っていうのが、オーソドックスなパフォーマンスを上げる方法になりますよね。 調べてみたんですよ。今作ってるやつどんなかな、って。 ひどいもんですよ。軒並みF判定ですよ。悲しいよね。 でも、そんなの分かってたことなんだよね。だって、最適化なんてしてないし。そろそろこの辺もちゃんと手をつけようと考えますわね。
ASP.NET MVC Action Filter - Caching and Compression - Kazi Manzur Rashid's Blog
もう、答え出ちゃってる感あるけど、まずはこのサイトを参考に。というか、もうそのまま。Cacheに関してはここのクラスを使わずOutputCacheフィルターを使います。 まずは、テスト用にプロジェクトを作成。 で、スタイルシートのStylesheet1.css、Stylesheet2.css、Stylesheet3.cssと、JavaScriptのJScript1.js、JScript2.js、JScript3.jsをContentの中に作成（中身は適当で）。 で、Helpersフォルダをルートに作って、その中にCompressAttribute.csとCompressHelper.csをそれぞれ“クラス”テンプレートで作成。
↑こんな感じになりましょう。
CompressAttribute.csの中身は先のページのままコピペ。 ヘッダをみて、圧縮ロジックを決めて、Response.Filterにセットするだけ。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO.Compression;
namespace MvcApplication1.P5
{
/// <summary>
///
/// </summary>
/// <seealso href="http://weblogs.asp.net/rashid/archive/2008/03/28/asp-net-mvc-action-filter-caching-and-compression.aspx">Original Source by Kazi Manzur Rashid</seealso>
public class CompressAttribute : ActionFilterAttribute
{
/// <summary>
/// Initializes a new instance of the <see cref="CompressAttribute"/> class.
/// </summary>
public CompressAttribute()
{
}
/// <summary>
/// Called when [action executing].
/// </summary>
/// <param name="filterContext">The filter context.</param>
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
HttpRequestBase request = filterContext.HttpContext.Request;
string acceptEncoding = request.Headers["Accept-Encoding"];
if (string.IsNullOrEmpty(acceptEncoding))
return;
acceptEncoding = acceptEncoding.ToUpperInvariant();
HttpResponseBase response = filterContext.HttpContext.Response;
if (acceptEncoding.Contains("GZIP"))
{
response.AppendHeader("Content-encoding", "gzip");
response.Filter = new GZipStream(response.Filter, CompressionMode.Compress);
}
else if (acceptEncoding.Contains("DEFLATE"))
{
response.AppendHeader("Content-encoding", "deflate");
response.Filter = new DeflateStream(response.Filter, CompressionMode.Compress);
}
}
}
}続いて、ちょっと便利に使うためのヘルパー関数群を定義したCompressHelper.cs↓。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Text;
namespace System.Web.Mvc
{
public static class CompressHelper
{
public static string ItemsKey = "_compressKeys";
static string _formatScript = "<script type=\"text/javascript\" src=\"{0}\"></script>";
static string _formatCss = "<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" />";
static Dictionary<string, List<string>> getItems(System.Web.UI.Page page)
{
var items = page.Items[ItemsKey] as Dictionary<string, List<string>>;
if (items == null)
page.Items[ItemsKey] = items = new Dictionary<string, List<string>>();
return items;
}
public static void AddCompressSrc(this System.Web.UI.Page page, string key, string srcPath)
{
var items = getItems(page);
if (!items.ContainsKey(key))
items[key] = new List<string>();
items[key].Add(srcPath);
}
public static string ScriptTags(this System.Web.UI.Page page, string key)
{
var items = getItems(page);
var sb = new StringBuilder();
foreach (var item in items[key])
sb.Append(string.Format(_formatScript, item));
return sb.ToString();
}
public static string CompressScriptTag(this System.Web.UI.Page page, string key)
{
return CompressTag(page, key, "application/x-javascript", _formatScript);
}
public static string CompressCssTag(this System.Web.UI.Page page, string key)
{
return CompressTag(page, key, "text/css", _formatCss);
}
public static string CompressCssTag(this System.Web.UI.Page page, string[] srcList)
{
var key = Guid.NewGuid().ToString();
var items = getItems(page);
items[key] = new List<string>();
foreach (var src in srcList)
items[key].Add(src);
return CompressTag(page, key, "text/css", _formatCss);
}
private static string CompressTag(this System.Web.UI.Page page, string key, string type, string format)
{
var items = getItems(page);
var list = items[key] as List<string>;
if (list != null && list.Count > 0)
return string.Format(format,
string.Format("/Home/Compress?src={0}&type={1}",
page.Server.UrlEncode(list.Aggregate((s, ss) => s + "," + ss)),
page.Server.UrlEncode(type)));
return "";
}
}
}namespaceをSystem.Web.Mvcにしてるのは、ページでImport書くのが面倒だから。HtmlHelperにしてないのはPage.Itemsを使いたいから。 Page.Items にそのページで使うJavaScriptやらCSSやらを入れておいてまとめて出力するのに使ってます。Page.Itemsに入れておけば、マスターファイルとページファイルのそれぞれで入れた値をマスターファイル（Site.Masterね）から簡単に取り出せるから。同じコンテキスト内（HTTP 要求内って意味でのコンテキスト）でのデータの受け渡しができる（Session使う必要ないし）。 CSSの場合はページ上部にまとめて書いちゃうからPage.Itemsに入れる必要はないんだけど、その辺は好みの問題ってことで。 名前をつけて置けば、名前ごとの圧縮ファイルにできると思って、keyを渡すようにします。ぶっちゃけ意味なし。 どうやって使うかというと、まずはSite.Masterのheadタグの部分を↓こんな感じに変えましょう。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><%= Html.Encode(ViewData["Title"]) %></title>
<%=Page.CompressCssTag(new[] { "/Content/Site.css", "/Content/Stylesheet1.css", "/Content/Stylesheet2.css", "/Content/Stylesheet3.css" })%>
<% Page.AddCompressSrc("msajax", "/Content/MicrosoftAjax.js"); %>
<% Page.AddCompressSrc("msajax", "/Content/MicrosoftMvcAjax.js"); %>
</head>CSSは文字列配列でがっつり渡す。JavaScriptはまだタグのレンダリングしたくないので、Page.Itemsに入れておく。headに書いてるのは定義場所が上の方が見やすいかな、と思ったから。 で、同じくSite.Masterのbody閉じ以降を↓こんな感じで。
</body>
<%=Page.CompressScriptTag("msajax")%>
<%=Page.CompressScriptTag("myscript")%>
</html>ここまでで、"msajax"をキーにしたスクリプトは２つ定義してるけど、"myscript"をはどこで入れ点だよ！って思った？それはHome/Index.aspxの中で入れてるんですね～。 各ページごとのスクリプトがサイト共通のスクリプトよりも上位に展開されると、悲しい結末が訪れるから、ちゃんとHTMLの最後に展開されるようにしましょう。
で、Home/Index.aspxの最後の部分を↓こんな感じで。
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<% Page.AddCompressSrc("myscript", "/Content/jscript1.js"); %>
<% Page.AddCompressSrc("myscript", "/Content/jscript2.js"); %>
<% Page.AddCompressSrc("myscript", "/Content/jscript3.js"); %>
</asp:Content>これを実行すると展開されるHTML（Home/Index）は↓こう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Home Page</title> <link rel="stylesheet" href="/Home/Compress?src=%2fContent%2fSite.css%2c%2fContent%2fStylesheet1.css%2c%2fContent%2fStylesheet2.css%2c%2fContent%2fStylesheet3.css&type=text%2fcss" type="text/css" /> </head> <body> ～省略～ </body> <script type="text/javascript" src="/Home/Compress?src=%2fContent%2fMicrosoftAjax.js%2c%2fContent%2fMicrosoftMvcAjax.js&type=application%2fx-javascript"></script> <script type="text/javascript" src="/Home/Compress?src=%2fContent%2fjscript1.js%2c%2fContent%2fjscript2.js%2c%2fContent%2fjscript3.js&type=application%2fx-javascript"></script> </html>
これだけだと、外部ファイルはちゃんと読み込めませんね。 HomeコントローラーにCompressアクションを実装してませんでした。
[Compress]
[OutputCache(Duration=3600,VaryByParam="src")]
public ActionResult Compress(string src, string type)
{
var items = src.Split(',');
if (items != null && items.Length > 0)
{
var sb = new StringBuilder();
foreach (var script in items)
{
string path = Server.MapPath(script);
if (File.Exists(path))
sb.Append(File.ReadAllText(path));
}
return new ContentResult() { Content = sb.ToString(), ContentType = type };
}
return new EmptyResult();
} srcパラメータにまとめるファイル名をカンマ区切りで渡すと（渡すときにUrlEncodeしても、自動でUrlDecodeしてくれます）、ファイルを読み込んで1個にまとめて出力するようにしてます。 圧縮はCompressAttributeにお任せ。OutputCacheを指定して、パラメータ毎（外部ソース毎）に1時間キャッシュするように指定してみました。 CompressとOutputCacheを外してFirebugで見た結果が↓。
※CSSのレスポンス
※JavaScriptのレスポンス。
どっちも圧縮されてないし、Expiresヘッダもないね。
で、CompressとOutputCacheをつけてFirebugで見た結果が↓。
※CSSのレスポンス。
※JavaScriptのレスポンス。
いずれもファイルサイズも小さくなってるし、Expiresヘッダもついてクライアントキャッシュが有効になってます。 ここまで来て圧縮なら「IISの静的ファイル圧縮使えば？」という思いが当然のごとく出てくるよね。もちろん試しましたよ！ファイルを1つにまとめる機能はないけど、圧縮はできるはずだもんね。でもね、なんかうまく出来なかったんですよ。CSSは出来てるのにJSが出来なかった。 httpCompressionのstaticTypesの指定が悪いのかなんなのか。何にせよ、設定でちゃんと思い通りに出来なかったらコードを書けばいいじゃないか！ ※負け犬．．．。
ASP.NET Ajaxとの相性が良くないよね、という思いからprototype.jsへ返り咲き。 jQueryにはすごいのがあったしね。あ、でもそこまで(Controllerを派生させてExecuteとRenderViewをオーバーライドして、Site.Masterか Ajax.Masterか切り替え。さらにクライアントサイドのjQueryで対象エレメント部だけを抽出しなおして描画に反映。すごくて感動した)のはちょっと面倒なので、軽くね。
ここまでで準備完了。イメージ的には/Secure/Indexはログインしてないとアクセスできないよ、って言う感じです。 ルートのweb.configでForm認証使うことと、セキュアなパスを指定。
<authentication mode="Forms">
<forms loginUrl="/Home/Login"></forms>
</authentication>↑これと↓これ。
<location path="Secure"> <system.web> <authorization> <deny users="?"/> </authorization> </system.web> </location>
Views/Shared/Site.Masterのhead要素内にprototype.jsへのscriptタグを作成。
<script src="/Content/prototype.js" type="text/javascript"></script>
※常にルートを指すようにしてるけど、相対で参照するようにしたい場合は、ヘルパーを作りましょう。標準で用意してくれることを希望しつつ。 Views/Home/Indexの中身は単純にSecure/Indexへのリンクだけ。これをActionLink<T>で作成(なんかこれがお勧めなリンクの作り方っぽい)。
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %> <%@import Namespace="MvcApplication1.Controllers" %> <asp:Content ID="indexContent" ContentPlaceHolderID="MainContentPlaceHolder" runat="server"> <h2>Ajaxな認証機能</h2> <p> <%= Html.ActionLink<SecureController>(c=>c.Index(),"Secure Page") %> </p> </asp:Content>
※@importでコントローラのnamespaceを指定しておく。
"Secure Page"のリンク先は"/Secure/Index"(Indexは省略されてるけど)。 中身は単純に↓こんな感じにしときました。
<h2>要認証！！</h2> ログインしてないとみれないよ。<br /> Welcome <b><%=User.Identity.Name %></b>!!
この段階でリンクをクリックすると認証してないので、単純に”Home/Login”にリダイレクトされます。なので、今度はそっちを用意。
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="MvcApplication1.Views.Home.Login" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<form>
<table>
<tr>
<th>Longin ID</th>
<td><%=Html.TextBox("id") %></td>
</tr>
<tr>
<th>Password</th>
<td><%=Html.Password("pass") %></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Login" onclick="login()" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
function login() {
var params = $H({"id":$F("id"), "pass":$F("pass")}).toQueryString();
new Ajax.Request("/Api/Login",{
method:"post",
postBody:params,
onComplete:function(req){
var status = req.status;
//req.responseText
if (status==200)
alert("Success!! " + req.responseText);
else
alert("Fail... " + req.responseText);
}
});
}
</script>
</asp:Content> 認証するためのリクエストパスが"Api/Login"になってるのと、認証結果はRESTfulっぽくステータスコードで判定。今回は成功すれば200(OK)、失敗すれば406(Not Acceptable)を利用(使い方があってるのか自信ないけど．．．)。 HTTPステータスコード – Wikipedia
続いて、Api/Loginの中身。今回は単純なIDとPasswordを利用してみます。実際にはMembershipを使うと思うけど。
public void Login()
{
string id = this.ReadFromRequest("id");
string pass = this.ReadFromRequest("pass");
ViewData["login"] = false;
if (id == "yama" && pass == "kawa")
{
ViewData["login"] = true;
FormsAuthentication.SetAuthCookie(id, false);
}
RenderView("Login");
} 続いて、Views/Api/Login。 ここは戻り値を返すだけの機能にしたいし、レスポンス内容をJsonにしてみるために、Masterを参照しないページ(Mvc View Page)にしました。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="MvcApplication1.Views.Api.Login" %> (<%= ResponseJson() %>)
ページの中身は↑これだけ。
public void Page_Load() { Response.ContentType = "application/json"; if ((bool)ViewData["login"] == true) Response.StatusCode = 200; else Response.StatusCode = 406; } public string ResponseJson() { return "{\"result\":" + (ViewData["login"]+"").ToLower() + "}"; }
↑コードもこれだけ。Jsonをベタ書きしてるけど、実際には上手いことシリアライズを使うでしょうね。
で、動かす！
あえて、違うID/Passwordを入れてみる。
正しく入れる。
この成功か失敗の判定はレスポンス内容のJsonをevalして判定せず、XHRのstatsプロパティが200かどうかで判定。RESTfulっぽい～。 画像だと分かりにくいけど、画面のリフレッシュは発生してないからね！ 最後に、Home/Indexに戻って"Secure Page"のリンクをクリックすると～。
イエ～イ。 実際にはControllerでSetAuthCookieやるより、Viewでやるの？ViewでJsonとか返したかったらControllerFactory使うの？えらい人教えて！ これやってて思ったけど、承認はアクション毎にかけるのがMVCっぽいんだね(今回は違うけど)。リソースに対するアクションに権限があるかどうかの方が、コントローラに権限があるかどうかよりもRESTfulだし。フォルダに制限をかけるっていう発想じゃなくて、誰がどのリソースにどんな権限があるかってことだもんね。 結局ActionFilterAttributeで制限かけるのが王道になるのかな～。
