data URI Schemeを使ってHTTPリクエストを削減する方法を紹介します。

１．概略

HTMLで画像を表示する場合、

<img src="http://user-domain/foo.jpg" />

という風に、httpを使ってサーバ上の画像ファイルを表示させるのが一般的ですが、httpの代わりにdata URI Schemeを使えば、HTMLファイルに埋め込んだインラインデータで画像を表示することができます。

２．data URI Schemeとは

RFCの規定上、http、https、ftpなどは「URI Scheme（スキーム）」と呼ばれます。

data URI Schemeは、「http」にあたる部分が「data」であるURI Schemeのことを指し、RFC2397で規定されています。

３．data URI Schemeの構文とサンプル

data URI Schemeの構文は次のようになります。

data:[<メディアタイプ>][;base64],<データ>

「<データ>」には、Base64エンコードしたデータを設定します（エンコードツールは後方で紹介）。「メディアタイプ」はMIMEタイプのことです。

下はRFC2397に掲載されているdata URI Scheme（赤色部分）を利用したimg要素のサンプルです（分かりにくいので改行をいれて折り返してます）。

<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///
          ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu
          5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhR
          NzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TP
          g7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnyc
          QZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK
          05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7
          tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx
          4dbgYKAAA7" alt="Larry" />

上記のimg要素は次のように表示されます（罫線はCSSで指定しています）。

data URI SchemeはCSSでも利用できます。

background-img: url("data:image/gif;base64,R0lG...AA7");

data URI Schemeは画像以外にも、即値として利用したいさまざまなデータを扱うことができます。

下はCSSの例です。

<link rel="stylesheet" type="text/css" href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

下はJavaScriptの例です。

<script src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

メディアタイプにはパラメータを含めることができます。次の例はcharsetパラメータを含んだ例です。

data:text/plain;charset=iso-8859-7,%be%fg%be

４．対応ブラウザ

この技術は古くからあるのですが、IEが対応していなかったという理由でながらく使われていなかったようです。

主要ブラウザの対応状況は次のとおりです。

• Firefox2以降
• Google Chrome
• IE8以降
• Opera 7.2以降
• Safari

最近、data URI Schemeをふんだんに使っている普通のウェブサイトをみつけたのですが、見失ってしまいました。運よくみつけたらここに掲載しておきます。

５．注意事項

RFC2397ではdata URI Schemeを「短い値に適用することが有益である」としています。

言い換えると、表示データをインラインで埋め込むため、ファイルサイズが大きくなるとファイルロードに時間がかかってしまい、本末転倒になってしまいます。

背景画像はCSS Spriteを利用してHTTPリクエストを削減する手段もあるので、要は「バランスを考えて利用しましょう」ということです。

なお、RFC2397では、RFC1866で規定するLITLEN（表記の長さ）を1024バイト、TAGLEN（開始タグの長さ）が2100バイトとなっており、指定可能な長さに制限があるようです。

またネットで調べた感じではブラウザによってもファイルサイズに制限があるようです。

６．Base64エンコードするツール

データをBase64にするツールは探せばいろいろあるようです。

ここでは「Binary File to Base64 Encoder / Translator」を紹介しておきます。

Binary File to Base64 Encoder / Translator

Base64エンコードしたいデータのURLを入力して「送信」をクリックすれば、データのMIMEタイプに応じたdata URI Schemeを生成してくれます。

CDNでウェブサイトを高速化するためのまとめです。

「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。

認識誤り等ありましたらどこかでつぶやいてください。

１．CDNとは

CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Contents Distribution Network（コンテンツディストリビューションネットワーク）」のことで（注）、コンテンツを配信するために最適化されたネットワークを指します。

Wikipediaの「コンテンツデリバリネットワーク」の説明によると、次のサービス（企業）が著名な商用CDNサービスを提供しているようです。

• Akamai Technologies
• Limelight Networks
• CDNetworks
• EdgeCast Networks

また、次のページで有料CDNサービスの一覧を確認できます。

• 最適なＣＤＮサービスを手早く導入しよう

上記に商用CDNサービスをざっと紹介しましたが、なじみ深いのはGoogleのCDNサービス「Google Libraries API」ではないでしょうか。

Google Libraries API

ということで、以降は「Google Libraries API」について説明を進めます。

Google CDNサービスの具体的な利用方法は、script要素のURLにGoogleで配信するライブラリのURLを指定するだけです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

各ライブラリのURL（＝script要素のコード）は、上記ページのリンク先に掲載されているので、そこから取得するか、６項で紹介する「scriptsrc」から取得してください。

２．CDNを利用するメリット

CDNを利用するメリットはタイトルのとおり、ウェブサイトを高速化できる可能性があることです。

同じサイズのファイルでも自サーバから取得するよりも、CDNを利用した方がダウンロード時間が短くなる可能性があります。結果的にウェブサイトの高速化に結びつきます。

また、多くのユーザーが同じファイルを利用することで、ユーザーのブラウザにキャッシュされる可能性も高くなります。

３．フォールバック

CDNサービスを利用することで２項のメリットを享受できますが、CDNサービスが故障した場合、ウェブサイトが共倒れにならないよう、フォールバックを行うことを推奨します。

フォールバックとは、「代替手段への切替」を意味します。

jQueryの場合、次の2行目の指定を行うことで、（1行目で）CDNサービスからコンテンツを読み込めなかった場合でも、自サーバのコンテンツを読み込むことができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>

４．バージョンの省略指定

Google CDNサービスでは、バージョンの指定を省略することで、最新バージョンを取得することができます。

次のように「1.7」を指定すれば、2012年6月現在の最新バージョン「1.7.2」を取得できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

次のように「1」を指定しても、2012年6月現在では「1.7.2」が取得できますが、「1.8」がリリースされれば「1.7」指定よりさらに最新のバージョンが取得できるはずです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

ライブラリの最新バージョンで動作確認を行いたい場合などは、この指定方法がよいでしょう。

５．バージョン指定によるキャッシュの違い

４項ではバージョン指定を変更することで最新バージョンを取得できる方法を紹介しましたが、マイナーバージョンを指定しないとキャッシュが短くなります。

具体的には、jQueryの場合では「1.7.2」を指定すれば1年キャッシュされますが、「1.7」や「1」を指定すると、24時間しかキャッシュされません。

以下はFirefoxのLive HTTP Headersを使ってキャプチャしたバージョン別指定のHTTPリクエスト・レスポンスです。

「1.7.2」を指定

GET /ajax/libs/jquery/1.7.2/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Thu, 07 Jun 2012 06:25:13 GMT
Expires: Fri, 07 Jun 2013 06:25:13 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Cache-Control: public, max-age=31536000
Age: 461047

「1.7」を指定

GET /ajax/libs/jquery/1.7/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Tue, 12 Jun 2012 14:00:22 GMT
Expires: Fri, 08 Jun 2012 19:40:33 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Age: 1891
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=3600

「1」を指定

GET /ajax/libs/jquery/1/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Tue, 12 Jun 2012 13:51:32 GMT
Expires: Fri, 08 Jun 2012 19:39:52 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Age: 2455
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=3600

また、最新バージョンを取得することで互換性がなくなる可能性もあります。

よって、運用で利用する場合は末端のマイナーバージョンまで指定することを推奨します。

６．CDNのscript要素を簡単に取得できる「scriptsrc」

最後に、Google CDNサービスのscript要素を簡単に取得できる「scriptsrc」を紹介します。

scriptsrc

Windowsの場合、「copy」をクリックすればscript要素（最新マイナーバージョン指定）がクリップボードにコピーされます。

これを利用すればscript要素を手入力したり、どこかのサイトからコピーする必要がなくなります。

７．参考サイト

参考サイトは下記です。ありがとうございました。

• CDNからjQueryが読み込めなかった場合のフォールバック
• GoogleのCDNを使ってjQueryを読み込む時の注意点（原文元記事）

注：「Contents Delivery Network」が一般的なようですが、Google Libraries API - Developer's Guideの説明には、「content distribution network」と記載されています。

ブルーライトをカットするiPhone・iPadフィルムの紹介です。

１．iPhone4S・iPad2はブルーライトを多く発しているらしい

液晶ディスプレイが発する光の中にある青い部分「ブルーライト」が眼に悪影響を与えているという指摘があるようで、ブルーライトをカットする製品が最近出回ってきているようです。

液晶ディスプレイはLED（発光ダイオード）をバックライトに使っている構造上、蛍光管ディスプレイに比べ、ブルーライトの成分が多く含まれているらしいです。

特にiPhone4S/iPad2は、他のデバイスよりブルーライトを発している量が多いようです（下）。記事は2011年12月のものなので、3世代目のiPadも同じかもしれません。

マイナビニュース - 【特別企画】疲れ眼の原因は液晶の青色光?「J!NS PC」で眼を守るという新習慣 (1) 実は怖い！ 液晶のブルーライト

ということですでにご存知の方も多いと思いますが、ブルーライトをカットするiPhone・iPad用フィルムを紹介します。

２．iPhone用ブルーライトカットフィルム

iPhone用はソフトバンクから発売されており、ブルーライトを約18.5％低減するようです。

スマートフォン向けブルーライトガードフィルムとしてはこれが日本初のようです（根拠はブルーライトガード フィルム for iPhone 4S/4を参照）。

「ブルーライトカット用メガネをかけたくない」という方にはいいかもしれません。ただ実際に使ってみた訳ではないので効果のほどは不明です。すいません。

SoftBank SELECTION ブルーライトガードフイルム for iPhone 4S/4

posted with amazlet at 12.06.13

SoftBank SELECTION
売り上げランキング: 2799

Amazon.co.jp で詳細を見る

2012年6月13日現在では、ソフトバンクオンラインショップの方が若干安いかもしれません（1880円+送料0円+手数料420円=2300円。地域によって送料がかかるかもしれません）。

ソフトバンクオンラインショップ - ブルーライトガード フィルム for iPhone 4S/4

３．iPad/iPad2用ブルーライトカットフィルム

iPad/iPad2用ブルーライトカットフィルムはエレコムから発売されています。

iPad 2012/iPad2対応液晶保護フィルム（ブルーライトカット光沢） TB-A12FLBLG

posted with amazlet at 12.06.13

エレコム

Amazon.co.jp で詳細を見る

ただしブルーライトの軽減率については記載がないので、下記の記事を参考にしてください。掲載されているグラフでは20%程度低減されているようにみえます。

ELECOMニュースリリース - ディスプレイを見続ける機会が多い現代人の目を保護！「ブルーライト」を大幅にカットする液晶保護フィルムiPad 2012およびiPad 2対応モデルを発売

PerlでJSONデータ・JSONPデータを処理する方法です。

１．JSONデータを処理する

JSONPデータの処理を解説する前に、JSONデータの処理について簡単に紹介します。

外部APIを起動し、次のようなJSONデータを受信したと想定します。

[
  {
    'link' => 'http://user-domain/aaa.html',
    'title' => "テスト1"
  },
  {
    'link' => 'http://user-domain/bbb.html',
    'title' => "テスト2"
  },
  {
    'link' => 'http://user-domain/ccc.html',
    'title' => "テスト3"
  }
];

この受信データの場合、次のようにJSONモジュールを利用することでPerlで処理できるようになります。

#!/usr/bin/perl
use strict;
use warnings;
 
use CGI;
use JSON;
use LWP::UserAgent;
 
my $q = new CGI;
print $q->header( -charset => "utf-8" );
 
my $ua = LWP::UserAgent->new;
my $req = HTTP::Request->new( GET => '外部APIのURL' );
my $res = $ua->request( $req );
 
# $res->contentにJSONデータ
my $data = from_json( $res->content );
foreach (@{$data}) {
    print $_->{ link };
    print $_->{ title };
}

下のコードによる実装も可能です。他にもあるようですがここでは割愛します。

my $json = new JSON;
my $perl_scalar = $json->decode($json_text);

２．JSONPデータを処理する

本題はここからで、まず、はてなブックマークの人気エントリー取得用APIに「json」をつけて起動するとJSONデータを取得できるという情報がありました。

http://b.hatena.ne.jp/entrylist/json?url=http%3A%2F%2Fwww.koikikukan.com%2F&sort=count

が、実際には次のようなJSONPデータが返却されてしまいます（API起動方法が間違っていたらすいません）。データの一部は省略しています。

([
  {
    'link' => 'http://user-domain/aaa.html',
    'title' => "テスト1"
  },
  {
    'link' => 'http://user-domain/bbb.html',
    'title' => "テスト2"
  },
  {
    'link' => 'http://user-domain/ccc.html',
    'title' => "テスト3"
  }
]);

ということで、JSONPをPerlで処理する方法が必要になりました。

JSONデータをPerlで処理するには、１項のJSONやJSON:Syckなどが用意されていますが、JSONPについてはサーバ処理（JSONPデータを返却する処理）はありましたが、クライアントとして処理するモジュールやサンプルがみつけらませんでした。

よって力技ですが、次のようにJSONPデータにある先頭と末尾のカッコを除去して、JSONデータに変換してからJSONモジュールで処理してみました（赤色部分）。

#!/usr/bin/perl
use strict;
use warnings;
 
use CGI;
use JSON;
use LWP::UserAgent;
 
my $q = new CGI;
print $q->header( -charset => "utf-8" );
 
my $ua = LWP::UserAgent->new;
my $req = HTTP::Request->new( GET => '外部APIのURL' );
my $res = $ua->request( $req );
my $content = $res->content;
$content =~ s/^\((.*)\);$/$1/;
my $data = from_json( $content );
foreach (@{$data}) {
    print $_->{ link };
    print $_->{ title };
}

が、間違いなく適切な方法があると思ってますので、誰かが正解をつぶやかれたらこの記事を修正したいと思います。他力本願ですいません。

ちなみに、さきほどのJSONPデータを正しいJSONPとして処理したい場合は、はてなブックマークの人気エントリー取得用APIのクエリパラメータに「callback=xxx」を付与します。

<pre><code>http://b.hatena.ne.jp/entrylist/json?url=http%3A%2F%2Fwww.koikikukan.com%2F&amp;sort=count&amp;callback=foo</code></pre>

これでJSONPデータが返却されます。

foo([
  {
    'link' => 'http://user-domain/aaa.html',
    'title' => "テスト1"
  },
  {
    'link' => 'http://user-domain/bbb.html',
    'title' => "テスト2"
  },
  {
    'link' => 'http://user-domain/ccc.html',
    'title' => "テスト3"
  }
]);

2012年8月4日(土)に「MTDDC 2012」が開催されます。

MTDDCは「Movable Type Developers & Designers Conference」の略称で、無料で参加できるシックス・アパート主催のカンファレンスです。

日程・会場等は次の通りです。

• 日時：2012年8月4日（土）13:00～18:00（予定）
• 会場：日本マイクロソフト株式会社 品川本社（東京都港区港南 2-16-3 品川グランドセントラルタワー）
• 定員：100名（先着）
• 参加費：無料（懇親会は4000円。Lightning Talks発表者は懇親会無料）
• 協賛：メディアスポンサーgihyo.jp

当日のプログラム（予定）は次の通りです。今秋リリース予定のMT5.2の概略も聞けそうです。

1. 開会の挨拶 : 関信浩（シックス・アパート株式会社 代表取締役）
2. Movable Typeのサステナビリティ : マネジャー 長内 毅志（シックス・アパート株式会社 Movable Type 製品企画 マネジャー）
3. クラウドを活用したWeb構築事業の支援プラットフォーム構想とプロトタイプのご紹介 : 作村裕史（シックス・アパート株式会社 クラウド事業開発 シニアコンサルタント）
4. Movable Type 5.2 Overview （エンジニア目線） : 高山裕司（シックス・アパート株式会社 Movable Type 開発エンジニア）
5. Azure と MT のフシギな関係 : 柳下剛利（シックス・アパート株式会社 シニアコンサルタント）
6. The New Rich Text Editor:天野卓（株式会社ToI企画 取締役 Movable Type 開発エンジニア）
7. Movable Typeとスマートフォン対応技術の最新事情 : 宮永邦彦（アイデアマンズ株式会社 代表取締役 宮永 邦彦）
8. Lightning Talks
9. 18:30 - 懇親会（希望者のみ）

参加を希望される方は以下の申し込みフォームからどうぞ。

MTDDC 2012 申し込みフォーム

Firefoxでサイトパフォーマンスのボトルネックをチェックできるアドオン「PageSpeed」を紹介します。PageSpeedはGoogleから提供されています。

このアドオンを利用すれば、「ブラウザのキャッシュを活用する・圧縮を有効にする・CSSスプライトに画像をまとめる」といったパフォーマンスの最適化のための項目や、その詳細なデータを確認することができます。

なお、このアドオンを利用するには、Firebugアドオンを先に入れておく必要があります。

Firebugの使い方は以下も参考にどうぞ。

Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ

１．インストール

Make the Web Faster - Google Developersのページにある「PageSpeed Insights for Firefox」をクリック。

「このサイト(developers.google.com)からはFirefoxにソフトウェアをインストールできない設定になっています。」が表示されたら「許可」をクリック。

「今すぐインストール」をクリック。これでインストールが開始します。

「今すぐ再起動」をクリック。これでインストールが完了します。

２．使い方

測定したいページを表示した状態で「F12」をクリック、またはメニューの「Web開発」→「Firebug」→「Firebugを開く」で、Firebugの画面（スクリーンショットの下半分の部分）を起動します。

Firebugの上部メニューの右側にある「PageSpeed」をクリック。

「Analyze Performance」をクリック。

分析が開始します。

分析結果です。全体のスコア（Page Speed Score）が100点満点換算で上部に表示され、左側には優先度（高：赤丸・中：黄色三角・低：緑チェックマーク）別の対策が表示されます。

左側のアイコンまたはテキスト右側の余白部分をクリックすれば、詳細な情報が中央に表示されます。

テキストをクリックすれば、最適化の詳細な解説のページに移動します。

ウェブサイトを閲覧しているとき、ページのトップに戻りたいことがあると思います。また、ページの一番下に移動したいこともあると思います。

トップに戻る場合、「トップに戻る」ボタンを表示しているウェブサイトも増えてきましたがそうでないものもありますし、戻りたいときにボタンが表示されていないケースもあります。また一番下に移動するボタンを備えているウェブサイトはほぼ皆無かと思います。

ということで、ページのトップに戻る（または一番下に移動する）方法をいろいろ調べてみました。

１．トップに戻る

Windowsの場合、「HOME」でページの先頭に移動することができます。IE/Firefox/Google Chrome/Safari/Opera共通です。

Macの場合、「Command」+「↑」でページの先頭に移動することができるようです。

２．一番下に移動する

Windowsの場合、「End」でページの最後に移動することができます。IE/Firefox/Google Chrome/Safari/Opera共通です。

Macの場合、「Command」+「↓」でページの最後に移動することができるようです。

３．ページの任意の位置に一気に移動する

Windowsの場合、「Shift」+スクロールバー上の任意の位置をクリック、で移動します。IE/Firefox/Google Chrome/Safariで動作することを確認しました。Operaは動作しませんでした。

またIEオンリーですが、スクロールバー上を右クリックすればスクロールバーのメニューが表示されるので（下）、その中の「ここへスクロール」を選択しても同じ動作になります。

Macの場合、「Option」+スクロールバー上の任意の位置をクリック、で移動できるようです。

４．トップに戻る／一番下に移動するブックマークレット

ついでにブックマークレットも作ってみましたのでご利用ください。

ページトップに移動するブックマークレット（以下をブックマークしてください）

トップに戻る

ページの一番下に移動するブックマークレット（以下をブックマークしてください）

一番下へ

以上です。これでマウスのホイールを無駄にぐりぐりする回数が減るかもしれません。

ウェブサイトをgzip圧縮を使って高速化するカスタマイズを紹介します。当サイトでもgzip圧縮を利用しています。

１．gzip圧縮によるウェブサイト高速化のイメージ

gzip圧縮によるウェブサイト高速化のイメージをご覧ください。

（クリックすれば拡大します）

クライアント（ブラウザ）から、あるウェブサイトの「index.html」にアクセスしたとき、リクエストを受信したサーバでは、HTTPリクエストの分析や、「index.html」の圧縮ファイル「index.html.gz」の有無などをチェックして、圧縮ファイルが返却可能であれば「index.html.gz」を返却します。

返却できない場合は通常の「index.html」をレスポンスで返却します。

圧縮ファイルを返却できれば、データの転送量を減らすことができるので、これによりウェブサイトの高速化につながります。

圧縮ファイルは受信したブラウザ側で展開することができます。主要なモダンブラウザはほぼこの機能を有しています。

２．圧縮ファイル形式

圧縮ファイル形式はgzipです。ファイルの拡張子は「.gz」になります。deflate圧縮もありますが、本エントリーでは割愛しています。

gzip圧縮する方法については、以下の記事を参考にしてください。

gzipコマンドの使い方

gzipはLinuxコマンドです。

Windowsの場合はThe gzip home pageからツールをダウンロードできるようです。32bitの場合はUnxUtilsやUnxUpdatesをインストールすれば、コマンドプロンプトから利用可能になります。WinRARでも大丈夫みたいです。

Windowsでソースコードの差分を取得する方法

Macはターミナルコマンドで普通に使えると思います。

３．圧縮可能なファイル形式

HTMLファイル、CSSファイル、JavaScriptファイルなどが圧縮可能です。

PHPも圧縮可能ですが、最初から圧縮された状態でサーバ上に配置していると肝心のサーバサイドPHP処理ができなくなるので、PHP処理を行ってから圧縮するという手はあるかもしれません。

WordPressであれば「GZIP Output」というプラグインがあります。

Movable Typeでは当ブログで「GzipFilePublisherプラグイン」を公開しています。

４．HTTPでgzip圧縮ファイルが利用可能な理由

１項で「圧縮ファイルは受信したブラウザ側で展開します」と書きましたが、そもそもブラウザが圧縮ファイルをサポートしている場合、HTTPリクエストに次のような「Accept-Encoding」ヘッダを付加します。

GET user-domain/index.html HTTP/1.1
Host: user-domain
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0
Accept: */*
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

上のリクエストは、要するに「（index.htmlについて）gzip圧縮やdeflate圧縮ファイルを受けつけられますよ」ということをサーバに伝えています。

このリクエストを受信したサーバは、圧縮ファイルを返却できる場合、次のような「Content-Encoding」ヘッダを付与したレスポンス（と圧縮したファイル）を返却します。

HTTP/1.1 200 OK
Date: Thu, 31 May 2012 10:02:44 GMT
Server: Apache/2.2.8 (Win32) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8g mod_autoindex_color mod_fastcgi/2.4.6 PHP/5.2.5
Last-Modified: Sat, 16 Jun 2012 06:24:56 GMT
Etag: "8000000043450-25c3-4c111066fbeff"
Accept-Ranges: bytes
Content-Length: 9667
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/javascript; charset=utf-8
Content-Encoding: gzip

レスポンスを受信したクライアント（ブラウザ）は、Content-Encodingヘッダーを見て「gzip」と設定されているので受信したファイルをgzipファイルと認識して、展開します。

５．HTMLタグの書き方

調べていてよく分からなかったのがHTMLタグの書き方です。

CSSファイルやJavaScriptファイルを圧縮した場合、link要素やscript要素に、次のように圧縮ファイル名をそのまま書くものと思ってましたが、そうではないようです。

非推奨な例

<link rel="stylesheet" href="http://user-domain/style.css.gz" type="text/css" title="Default" media="screen,tv" />
<script src="http://user-domain/foo.js.gz"></script>

圧縮ファイルを読み込む仕組みは後述します。ここでは「圧縮ファイルを利用する場合でもHTMLタグの変更は必要ない」ということだけをお伝えしておきます。

６．圧縮ファイルの読み込みかた

圧縮ファイルは.htaccessを利用して読み込みます。

.htaccessには次のような判定条件を設定し、すべての条件を満たした場合、リクエストURLの末尾に「.gz」を付与します。つまり圧縮ファイルが呼び出されたものとみなして圧縮ファイルを返却します。条件を満たさない場合はURLの末尾に「.gz」を付与しません。

• HTTPリクエストで圧縮ファイルを許容しているか（＝Accept-Encodingヘッダで「gzip」が許容されているか）
• HTTPリクエストの末尾が「.gz」でないか
• リクエストの末尾に「.gz」を付与したファイルがサーバに存在するか

７．.htaccessの解説

以下の内容を記述した.htaccessを用意し、サーバのディレクトリにアップロードします。サーバ上でviエディタ等で直接作成してもOKです。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<files *.html.gz>
AddType "text/html;charset=utf-8" .gz
</files>
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>
AddEncoding x-gzip .gz

６項の説明の繰り返しになりますが、設定内容の解説です。

1つめのRewriteCondディレクティブで、HTTPの「Accept-Encoding」ヘッダでgzipが許容されていれば次に進みます。gzipをサポートしていないブラウザなどからのリクエストで、このヘッダが付与されていなければ、ここで処理が終わって非圧縮ファイルを返却します。

RewriteCond %{HTTP:Accept-Encoding} gzip

2つめのRewriteCondディレクティブで、拡張子が「.gz」でなければ次に進みます。

RewriteCond %{REQUEST_FILENAME} !\.gz$

3つめのRewriteCondディレクティブで、元のファイルの末尾に「.gz」を付与したファイルが存在すれば次に進みます。

RewriteCond %{REQUEST_FILENAME}\.gz -s

上記3つの条件を満たしたリクエストについて、RewriteRuleディレクティブでURIの末尾に「.gz」を付与して処理をおこないます。

RewriteRule .+ %{REQUEST_URI}.gz

ファイル名の末尾が「.gz」のファイルについては、ファイル種別に応じて振り分けてAddTypeディレクティブでHTTPレスポンスの「Content-Type」ヘッダを付与します。HTMLファイルには「text/html」を、CSSファイルには「text/css」を、JavaScriptファイルには「text/javascript」を付与します。「charset=utf-8」は必要に応じて設定してください。

<files *.html.gz>
AddType "text/html;charset=utf-8" .gz
</files>
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>

最後にAddEncodingディレクティブを使って、HTTPレスポンスに「Content-Encoging: gzip」を付与します。

AddEncoding x-gzip .gz

すでに.htaccessを使っている場合は、ファイルの末尾または先頭に上記の内容を追加してください。

８．gzip圧縮で通信されていることを確認する

Firefoxのアドオン「Live HTTP Headers」などで確認できます。

LiveHTTPHeaders（Firefox 機能拡張）でHTTP ヘッダを表示する

普通にリロードすると304が返却される可能性があるので、Windowsの場合は「Ctrl+F5」で強制リロードするとよいでしょう。

９．CDNサービスのファイルはgzip圧縮されている

ご存知かもしれませんが、Google CDNサービスなどはgzip圧縮されたファイルを返却します。

GET /ajax/libs/jquery/1.7.2/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0.1
Accept: */*
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://user-domain/
Pragma: no-cache
Cache-Control: no-cache

HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Thu, 14 Jun 2012 14:53:48 GMT
Expires: Fri, 14 Jun 2013 14:53:48 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Cache-Control: public, max-age=31536000
Age: 344451

Google AnalyticsやGoogle Adsenseのコードも圧縮されています。

１０．参考サイト

参考サイトは下記です。ありがとうございました。

• How to compress css & javascript: An alternative to mod_deflate or mod_gzip
• mod_rewrite でリクエストに応じて gzip 圧縮ファイルを返す
• .cssファイル、.jsファイルをgzip圧縮してみる

iPhoneで拡大できない画面を拡大する方法を紹介します。

１．問題点

iPhoneのブラウザやマップなどの画面を拡大するには、ピンチアウト（2本の指を画面上でタップして指の間隔を広げていく）という操作で行います。

ピンチアウト前の画面

ピンチアウト後の画面

逆に縮小するには、ピンチイン（2本の指を画面上でタップして指の間隔を縮めていく）します。

ただし、ホーム画面や管理画面などはこのピンチアウト・ピンチインで拡大・縮小することはできません。

ピンチアウトできない画面（ホーム画面）

また、レスポンシブデザインでスマホ用に横幅を最適化したウェブサイトも拡大できないケースがあります。

が、そういった画面でも、次のように拡大できるようになります（スクリーンショットがとれないので筐体ごと撮りました）。

以下、設定方法です。この操作はiPhone4Sで確認しています。

２．拡大・縮小を可能にする設定

iPhoneにはアクセシビリティ確保のための「ズーム機能」が用意されていて、これを有効にします。

「設定」→「一般」をタップ。

「アクセシビリティ」をタップ。

「ズーム機能」をタップ。

ズーム機能を「オン」にします。これで設定完了です。

３．画面の拡大・縮小

設定画面に記載されていますが、ここにも掲載しておきます。基本は3本指タップです。

• 拡大する／元に戻す：3本指でダブルタップ
• 画面の表示範囲を動かす：拡大表示中に3本指でドラッグ
• 拡大倍率を上げる：3本指でダブルタップして上にドラッグ
• 拡大倍率を下げる：3本指でダブルタップして下にドラッグ

４．その他

操作して気がついた点をまとめました。

• ズームした状態で画面を移動した場合、移動先の画面でもズーム状態が維持されます。
• ズーム機能を使った画面の拡大では、ピンチアウトと異なり、テキストの輪郭がぼやけます。
• 拡大倍率を上げたあと倍率をダブルタップで元に戻して、再度ダブルタップすると直前の倍率に拡大します。
• ロック画面やカメラなども拡大可能で、多分この機能でズームできない画面はないと思われます。
• ブラウザもズーム機能で拡大できますが、スクロール操作はできません。リンクはクリックできます。

ということで、iPhoneの細かい字が読めない方、いかがでしょうか。

Google ChromeでスクロールキャプチャできるChrome拡張「Webpage Screenshot」を紹介します。

この拡張を利用すれば、画面キャプチャやスクロールキャプチャはもちろん、ページ上に図形や文字を描いたり、ページ上でテキスト編集を行うこともできます。

１．インストール

「Chrome ウェブストア - Webpage Screenshot」のページ右側にある「CHROMEに追加」をクリック。

「追加」をクリック。これでインストールが開始します。

インストールが完了すると次のようなページが表示されます。

２．キャプチャする

キャプチャしたいウェブサイトの右上にあるカメラマークのアイコンをクリック。

メニューが表示されます。ここでは「ページすべてをスクリーンショット」を選択します。

スクロールキャプチャが開始します。

キャプチャが完了すると次のような画面が表示されます。

（クリックで拡大します）

ページ上部のメニューにある「Save」をクリックすれば保存できます。

２．図形や文字を描く

キャプチャ画面上部左側にあるメニューを利用します。カラーパレットで色を選び、描画したいオブジェクトを選択します。

このような感じで描けます。

アンドゥやリドゥも可能です。キャプチャした画面の一部を切り抜くことも可能です。

３．画面を編集する

カメラアイコンをクリックして、「Beta: Edit content」を選択。

「OK」をクリック。

これで表示されている画面の編集が可能になります。編集後にキャプチャもできるので、ウェブサイトを自由自在に加工できます。

４．オプション

キャプチャ後のページ上部右の「Options」をクリック。

オプションが表示されます。

受信したメールの「undisclosed-recipients:;」について調べてみました。

１．事象

受信したメールを開いたときに、宛先欄にはメールの送信先の名前が表示されます。

下のスクリーンショットはThunderbirdでの受信メールの表示例で、「To:」に自分のメールアドレスが設定されている場合、宛先欄には「(自分)」と表示されます。

が、この宛先欄に「undisclosed-recipients:;」と表示される場合があります。

２．原因

受信メールの「To:」や「Cc:」にメールアドレスが設定されておらず、「Bcc:」のみにメールアドレスが設定されている場合、そのメールを開くと、宛先欄に「undisclosed-recipients:;」が表示されます。

３．「undisclosed-recipients」の意味

では、この「undisclosed-recipients」とは何を意味するのでしょうか。

「undisclosed」は「知られない」、「recipients」は「受取人」や「受信者」を意味するので、「undisclosed-recipients」は「知られない受取人」となりますが、意訳すると「受信者不明」が適切ではないかと思われます。

メールを受信できたにもかかわらず「受信者不明」としている根拠は次のとおりです。

前述したとおり、「undisclosed-recipients」が表示されるメールは「Bcc:」のみで送られたメールです。「Bcc:」はブラインドカーボンコピー（Blind Carbon Copy）の略で、「To:」と「Cc:」のユーザーにメールのコピーを送ったユーザーを知られたくない場合に利用します。

「Bcc:」ヘッダは、メール送信時にクライアント（MUA:Mail User Agent）またはメールサーバ（MTA：Mail Tranfer Agent）で削除してから送信・転送されます。

つまり、「Bcc:」のみでメールを送信した場合、ユーザーに配信された時点ですべてのメールアドレスが削除された状態になっています。

よって、そのメールを受信したメールクライアントでは、誰に送信されたメールであるか判断できないため、「受信者不明」という意味で、「undisclosed-recipients」を表示している、ということです。

OracleがSun Microsystemsを買収してからJavaのダウンロード先が分かりにくくなりました。

とりあえずGoogleで「Java ダウンロード」を検索すると、次のページがヒットします。

Windowsの場合、ここでダウンロードするのは、「jxpiinstall.exe」というファイルで、このファイルを実行すると、最新版のJRE（Java Runtime Environment）をダウンロードします。

が、Java開発用であるJDK（Java Development Kit）をダウンロードしたい場合や、さらには旧バージョンのものをダウンロードしたい場合、上記のサイトからはうまくたどりつけないようです（間違ってたらご指摘ください）。

ということで、OracleのトップページからJava（JDK/JRE）のダウンロードページへ進む方法を紹介します。

最新版のダウンロードと旧バージョンのダウンロードで、若干手順が異なります。どちらも１項の手順を行ったあと、最新バージョンのダウンロードは２項、旧バージョンのダウンロードは３項に進んでください。

１．共通手順

Oracleのトップページにある「Downloads」をクリック。

「Java for Developers」のリンクをクリック。

２．最新バージョンのダウンロード

最新バージョンをダウンロードする場合は、一番左のアイコンをクリック。

最新バージョン「Java SE Development Kit 7u5（2012年6月現在）」の「Accept License Agreement」を選択。

ダウンロードしたいプロダクトを選択します。

これでダウンロードが開始します。

３．旧バージョンのダウンロード

旧バージョンのダウンロードは厄介です。

旧バージョンをダウンロードする場合は、「Previous Releases」をクリック。

ダウンロードしたいメジャーバージョンをクリック。これで該当バージョンのダウンロードページに移動します。

ここでは「Java SE Development Kit 6u32」の「Accept License Agreement」を選択。

ダウンロードしたいプロダクトを選択します。

予想外のサインインが求められます。アカウントを持っていない場合はサインアップしてください。以降、サインアップの手順です。

新規ユーザー登録でEメールとパスワードを設定。

ユーザー情報を入力。ここまではいいと思います。

が、次にすべての人に対して会社情報の入力が要求されます。必須です。

コミュニティ会員やニュースレターの選択をして、一番下の「作成」をクリック。

アカウント確認画面が表示されます。この画面はそのままにしておきます。

登録したメールアドレスに送信された確認メールの「アカウントの確認」をクリック。

サインインします。

これでアカウントが確認されました。画面にある「アカウントにアクセス」をクリック。

アカウントの更新画面が表示されるので「確認」をクリック。

このようなエラー画面が表示されました。

上のエラー画面は無視して、３項の最初から手順をやり直してダウンロードを実行します。

サインインした状態になっているので、これでダウンロードできると思います。

Movable Typeを再インストールする場合の手順を紹介します。

最近発生したファーストサーバの障害で多くのウェブサイトが影響を受けているようで、その中にはMovable Typeで構築されたサイトもあるようです。

そういった万が一のケースを考慮して、MTの再インストール手順を把握しておき、復旧を少しでも迅速に行えるようにしておくことが必要でしょう。

ここでは、障害前のデータベースが残っていてMTのプログラムファイルのみ消失した場合、あるいはすべて消失したものの、MySQLでエクスポートしたデータベースのバックアップが手元に残っていて、それをMySQLにインポートした状態からの、Movable Typeの再インストールについて解説します。

１．MTプログラムのアップロード

復旧前と同じディレクトリにMTプログラムをアップロードします。

障害前のmt-config.cgiが残っている場合は、それを元のディレクトリにアップロードしてください。

２．MTの再インストール（mt-config.cgiが残っている場合）

１項でmt-config.cgiが残っている場合、mt.cgiにアクセスすればログイン画面が表示されるので、これで再インストールは完了です。

ログインすれば障害前の管理画面にアクセスできます。管理画面が正常に動作することと、再構築が正常に行われることを確認してください。

３．MTの再インストール（mt-config.cgiが残っていない場合：その1）

mt-config.cgiが残っていない場合は、新しいMTをインストールするときのインストールウィザードにそって作業を進めます。

この手順を行うことでmt.config.cgiファイルが生成されます。この手順でデータベースの内容が初期化されることはありませんが、万が一、ウェブサイトの設定を行う手順に進んでしまった場合、データベースの内容が初期化される可能性があるので作業を中止してください。

MTをインストールしたディレクトにアクセスして「サインイン」をクリック。

「開始」をクリック。

「次へ」をクリック。

障害前と同じデータベース情報を設定して「接続テスト」をクリック。

「次へ」をクリック。

障害前と同じメール設定を行って「次へ」をクリック。

「次へ」をクリック。

新規インストールであればアカウント設定画面に遷移しますが、データベースに情報があるのでインストールウィザードは完了して、次のようにログイン画面が表示されます。

ログインすれば障害前の管理画面にアクセスできます。管理画面が正常に動作することと、再構築が正常に行われることを確認してください。

４．MTの再インストール（mt-config.cgiが残っていない場合：その2）

３項の手順の代わりに、障害前と同じmt-config.cgiを手作業で作成すれば復旧できます。

５．環境変数の設定（mt-config.cgiが残っていない場合）

障害前のmt-config.cgiが残っていない場合、新たに作成したmt-config.cgiをダウンロードして任意のエディタで開き、障害前に設定されていた環境変数を設定します。

設定後、元のディレクトリにアップロードしてください。

環境変数の設定有無、あるいはどのような環境変数が設定されているかは利用しているMTによって異なります。

HTMLのdel要素で、取り消し線を文字と異なる色にする方法を紹介します。

変更前

削除したコンテンツ

変更後

削除したコンテンツ

１．del要素とは

del要素は、コンテンツの修正箇所を残す場合に利用するもので、指定した範囲が削除されたことを示します。

HTMLマークアップ

<del>削除したコンテンツ</del>

del要素で括ったコンテンツは、次のように取り消し線が表示されます。

削除したコンテンツ

del要素にはcite属性とdatetime属性を指定できます。

• cite属性：削除理由となる情報のURLを設定
• datetime属性：削除した日付と時刻を設定

設定例

<del datetime="2012-06-24T08:15:30-05:00"
     cite="http://www.foo.org/mydoc/comments.html">
削除したコンテンツ
</del>

取り消し線はCSSで非表示にすることもできます。

del {
    text-decoration: none;
}

また、取り消し線を表示することで文書が読みにくくなる場合は、非表示にするという手もあります。

del {
    display: none;
}

２．del要素の取り消し線文字と異なる色にする

本題です。

del要素の取り消し線文字と異なる色にする場合、次のようにdel要素に中にspan要素を記述します。

<del><span>削除したコンテンツ</span></del>

そしてCSSを次のように指定します。

del {
    color: #f00;
}
span {
    color: #000;
}

これで取り消し線を文字と異なる色にできます。

削除したコンテンツ

del要素に指定したcolorプロパティはdel要素内の文字にも反映されるので、del要素の中のspan要素でさらにcolorプロパティを設定することで、取り消し線の色と文字の色を変更することができます。

「CSSを使えばこういうこともできます」という実験なので、HTMLマークアップ上、意味的に問題があるということであればご利用はお控えください。

Googleが推奨する、ブラウザレンダリングに関する4つのベストプラクティスについて紹介します。

この記事は「Optimize browser rendering」を参考に書き起こしたものです。

Optimize browser rendering

元記事は2012年3月28日に更新されたものです。記事には5つの項目がありますが、残りの1つは情報がやや古いようなので割愛しました。

解釈が間違っている部分がありましたらどこかでつぶやいてください。

１．CSSセレクタを効率的に使用する

基本として、CSSのレンダリングは、記述されたセレクタについて、一番右端のセレクタ（キーセレクタ）から開始し、右から左方向に評価します。

で、多くの要素に一致するような非効率的なキーセレクタを避けることで、ページのレンダリングをスピードアップできるようです。

以下の子孫セレクタは非効率な例です。

キーセレクタがユニバーサルセレクタの子孫セレクタ

body * { ... }
.hide-scrollbars * { ... }

キーセレクタが要素セレクタの子孫セレクタ

ul li a { ... }
#footer h3 { ... }
* html #atticPromo ul li a { ... }

非効率な理由は、ブラウザは各要素に対して一致するか、ルート要素に到達するまでDOMツリーをトラバースして評価する必要があるためです。

次の子セレクタも同様の理由で非効率ですが、子孫セレクタよりはましなようです。

キーセレクタがユニバーサルセレクタの子セレクタ

body > * { ... }
.hide-scrollbars > * { ... }

キーセレクタが要素セレクタの子セレクタ

ul > li > a { ... }
#footer > h3 { ... }

また冗長なセレクタも不必要に評価されてしまいます。IDセレクタを利用する場合、要素セレクタを指定する必要はありません。

ul#top_blue_nav { ... }
form#UserLogin { ... }

非リンク要素への擬似セレクタは、IE7/8でレンダリング速度が落ちるようです。

h3:hover { ... }
.foo:hover { ... }
#foo:hover { ... }
div.faa :hover { ... }

１項のまとめです。

• ユニバーサルキーセレクタを避ける
• 子セレクタや子孫セレクタを避ける
• 冗長な修飾は行わない
• クラスセレクタやIDセレクタを使用する

ただし劇的に速度が上がる訳ではないようなので、既存のCSSを修正する場合は費用対効果を考えた方がよさそうです。

その他、本項では「未使用のCSSを削除すればパフォーマンスが改善する」とも書かれています。

２．CSSをHTMLドキュメントの最初の方に配置する

CSSのlink要素はhead要素の中の上部に記述します。

理由は、ブラウザはすべての外部スタイルシートがダウンロードされるまで、Webページをレンダリングブロックするためです。

スタイルシートを最初にダウンロード・解析されることで、ブラウザは徐々にページをレンダリングできます。

なお、CSSのlink要素を並べて記述すればパラレルに取得できます。以下は「Minimize round-trip times」からの引用です。

良い例

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>

レンダリング動作

悪い例

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>

レンダリング動作

また、@importを併用すると、パラレルに取得できるCSSがパラレルに取得できなくなる可能性があるため、「Don't use」と書かれています。

その他、style要素はhead要素に記述しないとレンダリングに影響があるように書かれています（そもそもstyle要素はHTML仕様でhead要素に記述することになっているので、body要素に記述したケースを想定して書かれているのかもしれません）。

２項のまとめです。

• CSSのlink要素はhead要素の最初の方に記述する
• @import文を使用しない
• 複数のCSSのlink要素は並べて記述する
• style要素はhead要素に配置する

３．画像のサイズを指定する

画像を表示するとき、画像のサイズ（幅と高さ）を指定することでレンダリングのパフォーマンスが向上します。

理由は、サイズを指定することで、ブラウザは画像のダウンロード前にレイアウトを算出することができ、ページ表示にかかる時間を短縮できるためです。

指定するのは、img要素のwidth属性とheight属性または、img要素の親ブロックレベル要素のいずれかです。

<img src="..." width="60" height="60" alt="..." />

または

<style>
.image {
  width: 60px;
  height: 60px;
}
</style>
...
<div class="image"><img src="..." alt="..." /></div>

親ブロックレベル要素に指定する場合、直接の親要素ではない要素に指定しないでください。

また、指定する場合は、画像と一致するサイズを指定します。サイズを拡大・縮小するサイズを指定するとパフォーマンスが劣化します。

３項のまとめです。

• 画像と同じサイズを指定する
• サイズは、img要素または直接の親ブロックレベル要素に指定する

４．キャラクタセット（文字セット）を指定する

当たり前すぎる内容なのであまり言及されている記事がありませんが、HTML文書にmeta要素でキャラクタセット（文字セット）を指定することで、HTMLと実行スクリプトの構文解析をすぐに開始することができます。

<meta charset="UTF-8" />

キャラクタセットの指定が必要な理由は、ブラウザが画面上へレンダリングする際に文字エンコード情報を使用するためです。

ほとんどのブラウザでは、キャラクタセットを検索しながら任意のJavaScriptを実行したり、ページを描画する前に、特定のバイト数をバッファリングします（Internet Explorer6/7/8は例外）。

レンダリングに必要なバイト数をバッファリングしたあと、デフォルトと一致しないキャラクタセットがみつかった場合、ページをレンダリングするために、ブラウザは入力を再解析してページを再描画する必要があり、この部分でパフォーマンスへの影響が発生します。

執筆に参加させていただいている書籍「Facebookデザインプロフェッショナルガイド」の予約がAmazonで開始されました。

Facebookデザイン プロフェッショナルガイド

posted with amazlet at 12.06.26

蒲生 トシヒロ 小野寺 翼 藤本 壱 荒木 勇次郎 秋葉 秀樹 秋葉 ちひろ ホシナ カズキ 森 雅秀 和泉 裕臣 石川 雅之
マイナビ

Amazon.co.jp で詳細を見る

本書は、「Facebookページプロフェッショナルガイド」の制作編を抜き出し、パワーアップを図ったものです。また仕様変更が頻繁に行われるFacebookの最新状況にも追従しています。

目次は次のとおりです。私はChapter2-7～9の「ページタブ製作」を担当させていただきました。

Chapter1 Facebookで何ができるのか

1 ソーシャル連係で効果をあげるために

2 OGPの基本と実装方法

3 ソーシャルプラグインの種類と解説

4 エッジランクについて

5 運用(投稿)へのクリエイティブの効果的活用

6 Facebookアプリとは

Chapter2 Facebookページの作成/ソーシャルプラグインの実装

1 Facebookページの作成

2 Facebookのデベロッパー登録/アプリ登録

3 OGP実装─WordPress編

4 OGP実装─Movable Type編

5 ソーシャルプラグインの設定

6 インサイト(Insights)を使ったドメインの効果測定

7 ページタブの制作─基本編

8 ページタブの制作─WordPress編

9 ページタブの制作─Movable Type編

Chapter3 ソーシャルプラグインのデザインカスタマイズ

1 LikeBoxのデザインをカスタマイズする 秋葉 秀樹

2 「いいね! 」の数の表示をデザインする 秋葉 秀樹

3 スマートフォンサイトに対応させるカスタマイズ 秋葉 ちひろ

4 プラグインをスマートフォンに最適化する 石川 雅之

Chapter4 Facebookアプリの使い方、作り方

4-1 Facebookのパーミッションについて

4-2 Facebookアプリ紹介

4-3 Facebookアプリを作る(1) 開発の準備

4-4 Facebookアプリを作る(2) サンプルアプリの制作

Chapter5 Facebookページのデザイン事例

5-1 あんとみのゼロアート

5-2 TOWNTONE(タウントーン)

5-3 Papa Maman House care room(パパママハウス ケアルーム)

5-4 ハイベロシティ Hivelocity(Hivelo Social Apps)

5-5 帝京大学泌尿器科ウィザス

5-6 ブライダル&ジュエリーCARA.|カーラ

5-7 小川屋-弁当仕出しの小川屋-

5-8 鎌倉野菜と宇宙カレー 鎌倉いし川庵

同時に発売される「Facebookマーケティング プロフェッショナルガイド」の予約も開始されました。

Facebookマーケティング プロフェッショナルガイド

posted with amazlet at 12.06.26

蒲生 トシヒロ 原 裕 井出 一誠 坂田 誠 竹村 詠美 伊藤 学 口田 聖子 高木 芳紀 神田 敏晶
マイナビ

Amazon.co.jp で詳細を見る

ということで、Facebookに興味のある方、あるいはすでにFacebookを利用しているけれどもより効果的に利用したいという方はご購入を検討頂ければ幸いです。

同時刊行を記念した2冊の著者陣によるセミナー「Facebook Power Session 2012」も7月7日に行われますので、こちらも是非ご参加ください。

Thunderbirdのメール送信で表示名を削除するアドオン「Auto Address Cleaner」を紹介します。

１．機能

通常、Thunderbirdのメール送信・返信時に、メールアドレスに表示名が自動補完され、そのまま送信されてしまいます。

例えば、新規作成でメールアドレスまたは表示名を入力すると、候補のアドレスと表示名が表示されます。

選択すると、メールアドレスと表示名が適用されます。

表示名を削除してメールアドレスだけに編集しても、

カーソルを他に移動した瞬間に表示名が復活してしまいます。

例えば、仕事でのメールのやりとりで、相手から受信したメールをそのまま返信すると、送信者の表示名には相手のメールソフト側で作成した表示名がそのまま設定されることが多いと思います。

その場合、当然「様」などの敬称がついていないので、そのメールを受信した側からすれば、見た目があまりよろしくないということになります。

そういった場合、「Auto Address Cleaner」を利用すれば送信メールの表示名を取り除いてくれます。

下のスクリーンショットはThunderbirdからGmailに送ったときのアドオン適用前後の表示です。アドオン適用後はTo:から表示名が削除されていることが分かります。

アドオン適用前

アドオン適用前

注：メール送信直前まで表示名は表示された状態となります。これはメール送信先を間違えていないか確認しやすいように、という配慮です。

２．インストール

「ツール」→「アドオン」を選択。

アドオンマネージャのタブの検索フォームに「Auto Address Cleaner」を入力して検索。

検索結果に「Auto Address Cleaner～」が表示されたことを確認。

その右側にある「インストール」をクリック。

「今すぐ再起動する」をクリック。

これでアドオンが適用されます。

ソーシャルボタンを簡単に設置できる「jQuery.socialbuttonプラグイン」を紹介します。

１．機能

このプラグインを利用すれば、スクリーンショットのようなソーシャルボタンを簡単に設置できるようになります（スクリーンショットのサンプルコードは５項に掲載しています）。

2012年6月現在でプラグインが対応しているサービスは以下です。

• Evernote
• facebook
• Google+1（IEは8以降のみ）
• GREE
• mixi
• Pinterest
• Twitter
• はてなブックマーク

以下、設置方法です。

２．プラグインのダウンロード・インストール

プラグイン配布サイトの「その１：jQueryとプラグインをダウンロード」からプラグインをダウンロードします。

jQuery.socialbutton プラグイン

ダウンロードしたプラグインをサーバにアップロードします。

３．プラグインの設定

HTMLマークアップは次のようになります。赤色部分は利用ユーザーで設定する部分です。ボタンを表示する部分の要素（ここではli要素）は内容を空にしておきます。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.socialbutton-x.x.x.js" type="text/javascript"></script>
<script>
$(function() {
    $('.service1_name').socialbutton(サービス名1[, オプション]);
    $('.service2_name').socialbutton(サービス名2[, オプション]);
});
</script>
<ul>
<li class="service_name1"></li>
<li class="service_name2"></li>
</ul>

「サービス名1」「サービス名2」などには、サービスによって次のいずれかの値を設定します。

• Evernote：'evernote'
• facebookいいね！：'facebook_like'
• facebookシェア：'facebook_share'
• Google+1：'google_plusone'
• GREE：'gree_sf'
• mixiイイネ！：'mixi_like'
• mixiチェック：'mixi_check'
• Pinterest：'pinterest'
• Twitter：'twitter'
• はてなブックマーク（新）：'hatena'
• はてなブックマーク（旧）：'hatena_oldstyle'

Twitterの場合は次のようになります。

<script>
$(function() {
    $('.twitter').socialbutton('twitter');
});
</script>

オプションは必要に応じてJSON形式で設定します。例えば、Twitterのオプションでは次のように設定します。

<script>
$(function() {
    $('.twitter').socialbutton('twitter', {
        button: 'horizontal',
    });
);
});
</script>

mixiチェックとmixiイイネ！はオプションは必須です。keyで登録キーを指定してください。

設定可能なオプションの詳細は４項を参照してください。

４．サービス別オプション一覧

サービス別オプションの一覧を、プラグインのソースコードから引用しました。実際のオプションと比較して、必要なものを適宜設定してください。

Evernote

$('.evernote').socialbutton('evernote', {
    button: 'article-clipper',
    url: 'http://user-domain/',
    provider_name: 'user-domain',
    suggest_notebook: 'webclip',
    content_id: 'element-id-to-clip',
    code: 'your-affiliate-code',
    title: 'note-title',
    suggest_tags: 'comma-separated-tags,up-to-three-tags',
    styling: 'full'
});

facebookいいね！

$('.facebook_like').socialbutton('facebook_like', {
    button: 'standard', // synonym 'layout'
    url: 'http://user-domain',
    show_faces: true,
    width: 450,
    height: 80,
    action: 'like',
    locale: 'en_US',
    font: 'arial',
    colorscheme: 'light'
});

facebookシェア

$('.facebook_share').socialbutton('facebook_share', {
    button: 'button_count', // synonym 'type'
    url: 'http://user-domain',
    text: 'Share'
});

GREE

$('.gree_sf').socialbutton('gree_sf', {
    button: 0, // synonym 'type'
    url: 'http://user-domain/',
    width: 0, // auto
    height: 20
});

Google +1

$('.google_plusone').socialbutton('google_plusone', {
    button: 'standard', // synonym 'size'
    url: 'http://user-domain', // synonym 'href'
    lang: 'ja',
    parsetags: 'explicit',
    callback: 'some_callback_function',
    count: true
});

mixiチェック

$('.mixi_check').socialbutton('mixi_check', {
    key: 'mixi-check-key',
    button: 'button-1',
    url: 'http://user-domain/'
});

mixiイイネ

$('.mixi_like').socialbutton('mixi_like', {
    key: 'mixi-check-key',
    url: 'http://user-domain/',
    width: 450,
    height: 80,
    show_faces: true,
    style: 'additional-style-here'
});

Pintarest

$('.pinterest').socialbutton('pintarest', {
    button: 'horizontal', // or 'vertical', 'none'
    url: 'http://user-domain',
    media: 'http://user-domain/image.jpg',
    description: 'This is an image.'
});

Twitter

$('.twitter').socialbutton('twitter', {
    button: 'vertical', // synonym 'count'
    url: 'http://user-domain/',
    text: 'tweet text',
    lang: 'ja',
    via: 'ishiiyoshinori',
    related: 'twitter'
});

はてなブックマーク（新）

$('.hatena').socialbutton('hatena', {
    button: 'standard',
    url: 'http://user-domain/',
    title: 'page-title'
});

はてなブックマーク（旧）

$('.hatena').socialbutton('hatena_oldstyle', {
    button: '/path/to/your-icon.png',
    url: 'http://user-domain/',
    padding: 10,
    height: 15
});

５．サンプル

冒頭の画像のサンプルは次のとおりです。ご自由にお使いください。

<style>
#social {
    display: inline;
    list-style: none;
}
#social li {
    float: left;
    display: block;
    vertical-align: middle;
}
.hatena {
    padding-right: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.socialbutton-1.9.0.min.js"></script>
<script>
$(function() {
    $('.google_plusone').socialbutton('google_plusone');
    $('.tweet').socialbutton('twitter', { button: 'horizontal' });
    $('.evernote').socialbutton('evernote');
    $('.hatena').socialbutton('hatena');
    $('.facebook').socialbutton('facebook_like', { button: 'button_count' });
});
</script>
<ul id="social">
  <li class="hatena"></li>
  <li class="facebook"></li>
  <li class="tweet"></li>
  <li class="google_plusone"></li>
  <li class="evernote"></li>
</ul>

ご存知の方も多いと思いますが、ミニチュア風写真が作れるサービス「TiltshiftMaker」を紹介します。

Tiltshift Maker

このサービスを利用すれば、下のスクリーンショットのように、普通の画像をミニチュア風に仕上げることができます。

１．画像を指定する

ここでは「Futta.NET」にあった次の画像を使ってみます。ベネチア（イタリア）です。

画像を指定するには、トップページにあるフォームを使います。ローカルPCの画像を指定する場合は「Choose a photo to upload:」で画像を選択し、「Upload picture」をクリックします。ネット上の画像であれば「...or use a photo from the web:」にURLを指定して「Use this photo」をクリックします。

画像を指定してフォームを実行すると次のような設定画面になります。左の画像が調節用、右の画像がプレビュー用です。

（クリックで拡大）

以降で説明する各項目をプレビュー画面に反映させるには、「プレビュー」をクリックしてください。

「Focus size」は焦点を合わせる範囲を指定します。範囲を狭くすればぼかす部分が多くなります。

画像右側にあるスライダーで、垂直方向の位置を調節できます。

「Defocus strength」でぼかし具合を調整できます。「weak」はぼかしの度合いが弱く、「strong」は強くなります。

「Defocus gradient」は、焦点が合っている部分とぼかす部分の境界を調整します。「quick」は焦点が合っている部分から離れるとすぐにぼかし、「slow」は徐々にぼかしていきます。

「Compact」「Large」は調整する画面の大きさを変更します。「Large」を選択すると調整用画面のみを大きく表示し、プレビュー画面を表示しません。

「Enhance colors」をチェックすれば、明るさ・鮮やかさを強くします。

「Bokeh style: Aperturer」でぼかしのスタイルを決めます。

「Bokeh Boost: Strength」でぼかしの強弱をつけます。「Bokeh Boost: Coverage」で弱い光も少しぼかしとして浮き立たせるかどうかを決めます。

ファイルを保存するには「Download」をクリック。サイズは640x480固定のようです（後述する有償版に加入すれば制限解除の模様）。

さらに「Click here」をクリック。

このような感じに仕上がりました。

元の画像

トップ画面に戻らなくても、プレビュー画面で別の画像を指定することもできます。

サインアップ（1ドル/月）すれば、ファイルサイズなどの制限が解除されるようです。

高低差の少ない風景画像や、人が小さく写っているものなどが効果があるように思われます。

ということで、色々試してみてください。