アーカイブ

Archive for 2012年12月

ASP.NET 4 WebFormでモバイルサイトを作成する場合のスクリプト結合

これはOne ASP.NET Advent Calendar 2012の12/17日分の記事となります。前回の記事はnobuhisaさんの「知っている人は知っている、知らない人は知らない『NDjango』」です。次回の記事はnakamura_toさんです。

。。。やべっす。書くネタが無いです。ASP.NETといっても、いろいろありますが基本WebFormしか触っていないので、ちょうど都合よく発生した、お仕事で困ったことで逃げるとします。

スクリプトがいっぱい

少し前ですがWebFormとjQueryMobile、knockoutを基盤に使ったシステムの開発方針を決めたことがあります。もともと単純な機能しか利用しないし画面もそう多くないのででさらっと作れればいいよーという話だったので、メンテナンス性を考え、ページはViewModel毎に1つのJavascriptファイルと、ViewModelが利用するサービスクラスが名前空間毎にファイルを分けて作成することにしました。

開発が終盤になり、なんとなくソリューションを覗いてみたら、画面や機能はどんどん追加され、Javascriptだけでも40以上がマスターページに登録されていました。

スクリプトのロードを早くしたい

ASP.NETでjQueryMobileなページを作成する場合、どのページからランディングされても動くように、マスターページ側でそのサイトで利用する全てのスクリプトをロードさせます。このため、初めてのそのサイトにアクセスの場合は、数十のスクリプトがロードされることになり、場合によってはそれなりにロード時間がかかります。

Fiddlerでネットワーク帯域のエミュレートをしながらダウンロードを調査してみました。Fiddlerでのネットワーク帯域の制限方法はココが参考になります(→Android開発で3G回線速度を再現する)。近頃のモバイルネットワークは高速ですが、今回は下りが大体512kbpsぐらいに制限して調査してみます。

image image

タイムラインは下のほうが切れてしまっていますが、ページ全体で758KBの読み込みで、2.8秒の時間がかかっています。

ASP.NET 4 WebFormでの解決案

ASP.NET 4.5では、System.Web.Optimization名前空間を使った便利な仕組みがあるようなのですが、ASP.NET 4な環境では使えません。チャックさんのJavaScript / CSS ファイルの自動縮小・結合処理: ASP.NET MVC 4 新機能シリーズがわかりやすいです。

ASP.NETでは古くからのScriptMangerコントロールにも、スクリプトの結合機能(クライアント スクリプトを複合スクリプトに結合)があります。今回はScriptManagerのスクリプト結合機能を利用してjQueryやknockout, jQueryMobileのスクリプトを結合することでスクリプトのロードが早くなるかを検証します。

ScriptManagerのCompositeScript機能を利用したスクリプトの結合

まずはマスターページを開いて、ScriptManagerを追加します。

今回、ASP.NET AJAX関連JavaScriptは読み込む必要は無いのでAjaxFrameworkModeをDisabledに変更しています(あっ、ScriptManagerはrunat=”server”なformの中に置きましょうね。ココの記事ではformを消してしまいましたが、無いと上手く動いてくれません)。

<asp:ScriptManager runat="server" AjaxFrameworkMode="Disabled">
<CompositeScript>
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/json2.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.validate.min.js"/>
        <asp:ScriptReference Path="~/Scripts/knockout-2.1.0.js"/>

        <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.1.0.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.i8n.jp.js"/>
    </Scripts>
</CompositeScript>
</asp:ScriptManager>

さて実行するとどうなるかな?。。。。。。ありゃ、Javascriptのエラーが出ちゃいました。どうもjson2が上手く読み込めていない様子なので、外に出してあげます。

image

マスターページのコードはこうなりました。

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication6.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5.0,user-scalable=yes"/>
    <link href='~/Content/jquery.mobile-1.1.0.min.css' rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src='<%= ResolveClientUrl("~/Scripts/json2.min.js") %>'></script>
    <asp:ContentPlaceHolder ID="Head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager runat="server" AjaxFrameworkMode="Disabled">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js"/>
                <asp:ScriptReference Path="~/Scripts/knockout-2.1.0.js"/>

                ... 略 ...

                <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.1.0.min.js"/>
                <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.min.js"/>
                <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.i8n.jp.js"/>
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>
    </form>                
    
    <asp:ContentPlaceHolder ID="Contents" runat="server">
    </asp:ContentPlaceHolder>
</body>
</html>

どかなー

とりあえず適当なページを作って実行すると、問題なく表示されましたね。

image

コンテンツのロード状況を見ると、ページ全体で239KBの読み込みで1.9秒の時間がかかっています。ページのサイズとしては500KBの軽量化、ページのロード時間としては1秒ぐらい早くなっています。ScriptManagerのComposit機能では、スクリプト自体の圧縮を行わないのでこんなものでしょうかね。

imageimage

Ajax Minifierでビルド時にスクリプトファイルを圧縮してあげると、スクリプト自体のサイズが小さくなるのでもう少し早くなるかもしれませんね。

カテゴリー:ASP.NET, インフラ, モバイル タグ:

開発中にHTTP Status 503でASP.NETのページが真っ白になっちゃった

ASP.NETの開発中に、デバック実行(F5)や実行(Ctrl+F5)でプログラムを実行したら、Webブラウザーが真っ白で何も表示されなくなっちゃいました。システムログには何もログがなかったのですが、F12開発者ツールで通信を確認したらHTTP Status 503(Service Unavailable)が発生していました。

image

他の既存プロジェクトや新しいプロジェクトでは問題無く実行ができるし、他のコンピューターで同じプロジェクトを実行することもできるので、自分のPC&このプロジェクトだけの問題なようです。もーこんな時に。

ASP.NET一時フォルダーの削除

開発機でHTTP Status 503が出る場合は、Webサーバーのキャッシュ状態なんかがおかしくなっていることが多いです、ASP.NETのプログラムはページを実行する際に下記のフォルダーにコンパイル結果を保存するのでこのあたりのフォルダーを綺麗にしてみるのがひとつの手です。

  • IIS: %SystemRoot%\Microsoft.NET\Framework\v(バージョン)\Temporary ASP.NET Files
  • Visual Studio: %TMP%\Temporary ASP.NET Files

Visual Studioで実行する場合に使うフォルダーはコンピューターの一時フォルダーなので、ディスクのクリーンアップできれいにしてもいいですね。あと、とりあえずフォルダーを全部消して最新ソースを取得しなおしてみるっていうのも手かもしれませんね。

僕はとりあえずこれで動くようになりました。

カテゴリー:ASP.NET, メモ, Visual Studio タグ:

GL04Pの更新

イーモバイルのGL04Pというモバイルルーターを使っています。以前使っていたGP02に比べ大きくはなりましたが、LTEに対応してかつバッテリーの持ちも良いので、常に持ち歩いています。ただ、Windows7やAndroid、iOSだと特に問題ないのですが、Windows 8だと頻繁に「制限付きアクセス」と表示されてしまいます。

今日、GL04Pを再起動したらこんなメッセージが表示されていました。

image

管理画面のアップデートにはこんなメッセージ

image

おっ、Windows 8対応!!、更にNAS対応!!これは期待。

メモ http://luispc.com/archives/1837

カテゴリー:インフラ, モバイル

ARR 3.0 Beta

つい先日ARR 2.5を使ったTomcatとの連携のポストをしましたが、ARR 3.0のBetaが公開されたそうです。

Announcing Application Request Router 3.0 Beta!

大きな対応としては、Web SocketとHealth Checkへの対応があるようです。Web Socketは今のところ使う予定は無いんですが、ルーティング先のヘルスチェック(存在確認、生存確認)ができるようになると嬉しいですね。

カテゴリー:インフラ, IIS, Windows タグ:

Windows 8 App with HTML5 and Javascript Unleashed Kindle版を買った

Silverlightの時に、同シリーズの良書っぷりに心を奪われたのでWindows 8 Apps with HTML5 and JavaScript Unleashed [Kindle版]を購入してみた。欲しい本(しかも発行して間もない本)がワンクリックですぐに読めるっていいですよね。

Windows 8 Apps with HTML5 and JavaScript Unleashed [Kindle版]

早く日本の出版事情も追いついてくれないかなー。

早くWindows PhoneやWindows RT、Windows版のKindleアプリのアップデート来ないかなー。

#USのAmazonアカウントの統合をしていないから、だんだんどっちに入っているかわからなくなってきた。すでに日本のAmazonアカウントで本を何冊かかっているから統合面倒なんだよなー。

カテゴリー:メモ, Windows, Windows, タグ: ,

Visual Studio 2012イメージライブラリー

MSDNの方法: Visual Studio Image Library をインストールするを見ると、イメージライブラリーは「Visual Studioのインストールフォルダー\Common7VS2012ImageLibrary\ロケール」フォルダーにあるよ(デフォルトのインストールではC:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7)ということですが、とりあえず僕の環境にはありませんでした。

11/30付で英語版のイメージライブラリーがダウンロード可能になっています。

Visual Studio Image Library

名前がVS2012 Modern Image LibraryとなりWindows8に対応したアイコンが入っています。今回からVisual Studio Icon Library – Common Elements.pdfとVisual Studio Icon Library – Icons.pdfという2つのPDFファイルに各アイコンの説明入のドキュメントが付属していました。これほしかったんですよねー。

IISの設定情報の保存先

いつも忘れて調べるのでメモ。

ココ→ %WinDir%\System32\Inetsrv\Config

IIS 7.0 コンフィギュレーション リファレンス

IIS7からは、仮想ディレクトリーの設定やWebアプリケーションの設定、AppPoolやマシーンキーなど、IISマネージャーで設定した項目はすべてサーバーのXMLファイルに保存されています。ロードバランサー環境で全く同じ構成のWebサーバーが複数台存在する場合は、一つ一つのWebサーバーで仮想ディレクトリーの設定をするよりもこのXMLファイルをかくサーバーに撒いたほうが管理が楽です。

カテゴリー:インフラ, IIS タグ: ,