アーカイブ

Archive for 2014年7月

Visual Studio(Web Essentials)でCSSスプライトを作成する。

あんまり触っていなかったんですが、Web Essentialsってすごいですね。Webページのパフォーマンス改善をやっていたのですが、Web Essentialsのお陰でかなり作業がはかどりました。

Web Essentialsの概要については井上さんのブログがとても参考になります。

    CSSスプライトってなに?

    CSSスプライトは複数の画像ファイルを一つのファイルにまとめることで、ダウンロード回数を減らし、ページ全体の表示を高速にする手法です。

詳しいことは、Googleさんに聞いてください。

で、前からCSSスプライト処理には興味はあったんですが、一部の画像だけ変更されたり、画像が追加されたりした場合に、画像の再結合作業がめんどくさかったり、CSSを調整するのが面倒だったりしてよほど読み込み頻度が多いような画像以外は対応していなかったんですよね。

Visual Studio(Web Essentials)を使ったCSSスプライト

Web Essentialsを使うと、このCSSスプライト処理を簡単に行えるというわけです。しかも画像が変更された場合は自動的に再作成してくれるし、画像が追加された場合も簡単な作業でCSSスプライトを更新できます。

Web Essentialsがインストールされていない場合は、Visual Studioの拡張機能と更新からWeb Essentialsを選択してインストールしてください。Visual Studioギャラリーからダウンロードしてインストールすることもできます。

image

画像の結合と関連ファイルの作成

チェックボックスをイメージしたこんな2つの画像があるとします。

image

ソリューションエクスプローラーで結合したいファイルを選択後、コンテキストメニューから Web Essentials → Create image sprite… を順にクリックします。適当に名前をつけてSpriteファイルを保存します。

image image

spriteファイルの他に、png,css,less,map,scssと言ったファイルがソリューションに取り込まれます。

image

エクスプローラーでImagesフォルダーを見てみると、こんな感じにファイルたちが作成されています。lessやscssはcssファイルはcssを簡易に記述するためのCSS拡張メタ言語用のファイルです。mapファイルにはscssやless,cssを出力するための定義がJSON形式で記述されています。

image

画像を表示する

先ほど作成された、cssファイルを確認してみます。もちろんlessやscssからcssを生成したい場合はそちらを参照しても良いです。取り込んだ画像ファイルは、[フォルダー名_画像ファイル名(拡張子なし)]で表示用のクラスが定義されていることを確認できます。ちゃんとbackgroundにオフセットが指定されていますね。

/*
This is an example of how to use the image sprite in your own CSS files
*/
.Images-checkbox_off {
/* You may have to set 'display: block' */
    width: 16px;
    height: 16px;
    background: url('CheckboxSprite.png') 0 0;
}
.Images-checkbox_on {
/* You may have to set 'display: block' */
    width: 16px;
    height: 16px;
    background: url('CheckboxSprite.png') 0 -16px;
}

こんなHTMLを作成すれば画像を表示できます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Images/CheckboxSprite.png.css" rel="stylesheet" />
</head>
    <body>
        <div class="Images-checkbox_on"></div>
        <div class="Images-checkbox_off"></div>
    </body>
</html>

表示できましたね。

image

画像の差し替え

画像を差し替えたい場合は、ファイルを差し替えるだけです。先ほどとは色合いが違う画像を同じ名前でVisual Studioに取り込んであげます。

image

いっぺんにファイルをソリューションフォルダーにドロップすると、アクセス拒否されるので、一つ一つドロップしてあげてください。取り込み後のImageフォルダーを見ると、結合画像も同時に更新されていることが確認できます。

image

画像の追加

Spriteに画像を追加する場合はSpriteを作り直しても良いですが、Spriteファイルに定義を追加してあげればSpriteファイルを保存したタイミングで再生成してくれます。filses要素に<file>/Images/ping.png</file>を追加しました。

<?xml version="1.0" encoding="utf-8"?>
<sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd">
  <settings>
    <!--Determines if the sprite image should be automatically optimized after creation/update.-->
    <optimize>true</optimize>
    <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.-->
    <orientation>vertical</orientation>
    <!--File extension of sprite image.-->
    <outputType>png</outputType>
    <!--Determin whether to generate/re-generate this sprite on building the solution.-->
    <runOnBuild>false</runOnBuild>
    <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.-->
    <fullPathForIdentifierName>true</fullPathForIdentifierName>
    <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).-->
    <useAbsoluteUrl>false</useAbsoluteUrl>
    <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForCss />
    <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForLess />
    <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForScss />
  </settings>
  <!--The order of the <file> elements determines the order of the images in the sprite.-->
  <files>
    <file>/Images/checkbox_off.png</file>
    <file>/Images/checkbox_on.png</file>
    <file>/Images/pin.png</file>
  </files>
</sprite>

追加されていますね。

image

画像やCSSの再生成なんかを後ろで勝手にやってくれるのは楽ですね。いや、ホント楽ですね。

広告
カテゴリー:ASP.NET, Javascript タグ: , ,

ASP.NET Web APIのサービスをJSONPで呼び出す。

2014年7月9日 3件のコメント

MSDNフォーラムをのぞいたら、こんなスレッドがあったのでWeb APIの入門を兼ねていじってみます。

クロスドメインリクエストへの対応については松崎さんのブログで詳しくまとまっています。

JSONP などクロス ドメイン (Cross-Domain) 問題の回避と諸注意

Web Apiの追加

まずは何も考えずに、WebApiを一つ追加しましょう。

image image

名前はとりあえずUserControllerとかにしておきます。

image 

とりあえずそのまま動作を確認してみる

この状態で http://host/api/user/http://host/api/user/1 といったURLをリクエストすれば、[ “value1”, “value2" ] や “value” といったJSON文字列が取得できるはずです。

FiddlerやChromeのAdvanced Rest Clientなんかから確認してみましょう。

一応それっぽい文字列が帰ってきていますね。

image

jQueryから呼び出してみる。

jQueryのajax関数から呼び出すとするとこんなかんじですね。

$("#getUser").on("click", function () {
    var userId = $("#userId").val();
    $.ajax({
        url: "http://localhost:45924/api/user/" + userId,
        type: 'GET',
        dataType: 'json'
    }).success(function (data) {
        alert(data);
    }).error(function(data) {
        alert(data);
    });
});

ちゃんと返ってきました。

image

Web ApiをJSONPに対応させる。

Web ApiでJSONP形式で値を返したい場合は、NugetパッケージのWebApiContrib.Formatting.Jsonpを使うと簡単に実現できます。前述のパッケージを導入後、Global.asaxやWebApiConfigなどのクラスでコールバック付き(?callback=関数名)のリクエストを受け付けた場合にJSONP形式に整形するFormatterを登録します。

Public Module WebApiConfig
    Public Sub Register(ByVal config As HttpConfiguration)
        ' Web API の設定およびサービス

        ' Web API ルート
        config.MapHttpAttributeRoutes()

        config.Routes.MapHttpRoute(
            name:="DefaultApi",
            routeTemplate:="api/{controller}/{id}",
            defaults:=New With {.id = RouteParameter.Optional}
        )

        config.AddJsonpFormatter()
    End Sub
End Module

ちょっと見えづらいですが、Responseタブの中身を見ると、JSONP形式(a([“value1”, “value2”]))で結果が帰ってきたのを確認できます。

image

jQueryから呼び出す。

jQueryを使っている場合は、ajax関数のdataTypeパラメーターに”jsonp”を指定するだけですね。

$(function() {
    $("#getUser").on("click", function () {
        var userId = $("#userId").val();

        $.ajax({
            url: "http://localhost:45924/api/user/" + userId,
            type: 'GET',
            dataType: 'jsonp'
        }).success(function (data) {
            alert(data);
        }).error(function(data) {
            alert(data);
        });
    });
});
カテゴリー:ASP.NET, Javascript, Visual Basic