<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0" xml:lang="ja">
  <channel>
    <title>hail2u.net - Weblog</title>
    <link>http://hail2u.net/blog/</link>
    <description>移り気な管理人が、気になっていることをアトランダムにいろいろ書き連ねてみるblogです。</description>
    <language>ja</language>
    <copyright>Copyright (c) 2002-2009, Kyo Nagashima</copyright>
    <managingEditor>kyo@hail2u.net (Kyo Nagashima)</managingEditor>
    <webMaster>kyo@hail2u.net (Kyo Nagashima)</webMaster>
    <lastBuildDate>Wed, 06 Jan 2010 14:09:18 +0900</lastBuildDate>
    <generator>blosxom v2.0</generator>
    
    <creativeCommons:license>http://creativecommons.org/licenses/by-nc/2.1/jp/</creativeCommons:license>
    <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/hail2u/blog" /><feedburner:info uri="hail2u/blog" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
      <title>未整理のブックマークをブックマークツールバーに表示</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/VWDq11SrcBY/display-unsorted-bookmarks-in-bookmark-toolbar.html</link>
      <description>最近はブックマークを適切なフォルダに整理することを放棄して、どんどん未整理のブックマークに放り込み、ロケーションバーから絞込みしやすいように適当に半角英数でタグ付けするだけな感じで生活している。これで大抵の場合は問題ないが、Fx3.5では未整理のブックマークには履歴とブックマークの管理のウィンドウからしかアクセスできない(よね？)ので、一覧したい時などにかなり不便。ブックマークツールバーにでも表示させられれば良いのになぁとちょっと調べてみたら結構簡単に出来たのでメモ。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Software</category>
      <guid isPermaLink="false">http://hail2u.net/blog/software/display-unsorted-bookmarks-in-bookmark-toolbar.html</guid>
      <pubDate>Wed, 06 Jan 2010 14:09:17 +0900</pubDate>
      <content:encoded><![CDATA[
<p>最近はブックマークを適切なフォルダに整理することを放棄して、どんどん未整理のブックマークに放り込み、ロケーションバーから絞込みしやすいように適当に半角英数でタグ付けするだけな感じで生活している。これで大抵の場合は問題ないが、Fx3.5では未整理のブックマークには履歴とブックマークの管理のウィンドウからしかアクセスできない(よね？)ので、一覧したい時などにかなり不便。ブックマークツールバーにでも表示させられれば良いのになぁとちょっと調べてみたら結構簡単に出来たのでメモ。</p>

<p>未整理のブックマークはFirefox内では以下のようなで参照されているので、これをブックマークすれば良い。</p>

<pre>
place:folder=UNFILED_BOOKMARKS
</pre>

<p>具体的には下記スクリーンショットのようにしてブックマークを作成するだけ。いきなりブックマークツールバー上に作成すると、フォルダにならずクリックしても「place というプロトコルは……」と怒られるので、適当な場所に一旦作成してから改めてブックマークツールバーにドロップすると良いと思う。また、あとで名前を変更しようとしても出来ないので、名前を変えたい場合は作り直す必要があることには注意が必要。</p>

<p><img src="http://hail2u.net/blog/images/bookmark-unsorted-bookmarks.png" alt="未整理のブックマークを任意の場所に作成する方法" width="367" height="262"></p>

<p>普段はどうせロケーションバーからアクセスするのでそんな便利でもない。ただ、未整理のブックマークにメニューのブックマークからアクセス出来ないのを改善できるという点ではポイント高い。</p>

<p>FirefoxはドラスティックなUIの変更を行う前にもっとやるべき事がきっとある。例えば上記ブックマークの追加ダイアログで「追加」がデフォルトボタンになのにデフォルトボタンに見えないこととか。Fx3.6でメニューバーが隠せるようになったのにメニューのいくつかの項目をツールバーボタンにすることを怠ったこととか。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/software/display-unsorted-bookmarks-in-bookmark-toolbar.html</feedburner:origLink></item>
    <item>
      <title>2009年に買ったマンガ</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/ezzoUfurL1o/comic-2009.html</link>
      <description>備忘録一割アサマシ九割。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Media</category>
      <guid isPermaLink="false">http://hail2u.net/blog/media/comic-2009.html</guid>
      <pubDate>Tue, 29 Dec 2009 21:37:46 +0900</pubDate>
      <content:encoded><![CDATA[
<p>備忘録一割アサマシ九割。</p>

<h2><a href="http://www.amazon.co.jp/%E8%AA%B0%E3%82%82%E5%AF%9D%E3%81%A6%E3%81%AF%E3%81%AA%E3%82%89%E3%81%AC-11-%E3%83%A2%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%AF%E3%82%A4%E3%83%89%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E3%82%B5%E3%83%A9-%E3%82%A4%E3%83%8D%E3%82%B9/dp/4063376702%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4063376702">誰も寝てはならぬ (11)</a></h2>

<p class="image"><a href="http://www.amazon.co.jp/%E8%AA%B0%E3%82%82%E5%AF%9D%E3%81%A6%E3%81%AF%E3%81%AA%E3%82%89%E3%81%AC-11-%E3%83%A2%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%AF%E3%82%A4%E3%83%89%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E3%82%B5%E3%83%A9-%E3%82%A4%E3%83%8D%E3%82%B9/dp/4063376702%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4063376702"><img alt="誰も寝てはならぬ 11 (モーニングワイドコミックス)" src="http://ecx.images-amazon.com/images/I/517jbYmt-uL._SL160_.jpg" height="160" width="113"></a></p>

<p>豆ゴハンからずっと読んでるので。マキオちゃんにシンパシーを感じて困る。バスマニアではないけど。というか大清水と美奈子がどうにかなったのかどうか気になったままはや10年。</p>

<h2><a href="http://www.amazon.co.jp/%E9%BB%84%E9%87%91%E3%81%AE%E3%83%A9%E3%83%95-27-%E3%83%93%E3%83%83%E3%82%B0%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E3%81%AA%E3%81%8B%E3%81%84%E3%81%BE-%E5%BC%B7/dp/4091826245%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4091826245">黄金のラフ (27)</a></h2>

<p class="image"><a href="http://www.amazon.co.jp/%E9%BB%84%E9%87%91%E3%81%AE%E3%83%A9%E3%83%95-27-%E3%83%93%E3%83%83%E3%82%B0%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E3%81%AA%E3%81%8B%E3%81%84%E3%81%BE-%E5%BC%B7/dp/4091826245%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4091826245"><img alt="黄金のラフ 27 (ビッグコミックス)" src="http://ecx.images-amazon.com/images/I/51cMQiB5yOL._SL160_.jpg" height="160" width="113"></a></p>

<p>予選落ちしたりマンデー落ちしたり最終日までいくことの方が珍しいゴルフマンガ。ゴルフは好きでも何でもないけどなぜか愛読。坂田信弘って書いてないゴルフマンガは面白いな。</p>

<h2><a href="http://www.amazon.co.jp/%E3%83%B4%E3%82%A1%E3%83%A0%E3%83%94%E3%83%BC%E3%83%AB-3-%E3%82%A2%E3%83%95%E3%82%BF%E3%83%8C%E3%83%BC%E3%83%B3KC-%E6%A8%B9-%E3%81%AA%E3%81%A4%E3%81%BF/dp/4063145611%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4063145611">ヴァムピール (3)</a></h2>

<p class="image"><a href="http://www.amazon.co.jp/%E3%83%B4%E3%82%A1%E3%83%A0%E3%83%94%E3%83%BC%E3%83%AB-3-%E3%82%A2%E3%83%95%E3%82%BF%E3%83%8C%E3%83%BC%E3%83%B3KC-%E6%A8%B9-%E3%81%AA%E3%81%A4%E3%81%BF/dp/4063145611%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4063145611"><img alt="ヴァムピール 3 (アフタヌーンKC)" src="http://ecx.images-amazon.com/images/I/515MqmQX1HL._SL160_.jpg" height="160" width="113"></a></p>

<p>樹スキーなので。獣王星スキー。OZスキー。八雲立つとかはあんまり……。デーモンのアレもあんまり……。この巻のモノ作りの話は身に覚えのある人はけっこう痛い話。痛い痛い。</p>

<h2><a href="http://www.amazon.co.jp/%E3%83%AF%E3%83%B3%E3%83%80%E3%83%95%E3%83%AB%E3%83%87%E3%82%A4%E3%82%BA-4-%E3%81%BE%E3%82%93%E3%81%8C%E3%82%BF%E3%82%A4%E3%83%A0KR%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E8%8D%92%E4%BA%95-%E3%83%81%E3%82%A7%E3%83%AA%E3%83%BC/dp/4832278738%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4832278738">ワンダフルデイズ (4)</a></h2>

<p class="image"><a href="http://www.amazon.co.jp/%E3%83%AF%E3%83%B3%E3%83%80%E3%83%95%E3%83%AB%E3%83%87%E3%82%A4%E3%82%BA-4-%E3%81%BE%E3%82%93%E3%81%8C%E3%82%BF%E3%82%A4%E3%83%A0KR%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E8%8D%92%E4%BA%95-%E3%83%81%E3%82%A7%E3%83%AA%E3%83%BC/dp/4832278738%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4832278738"><img alt="ワンダフルデイズ (4) (まんがタイムKRコミックス)" src="http://ecx.images-amazon.com/images/I/51d1Fr78MXL._SL160_.jpg" height="160" width="113"></a></p>

<p>人間あまり出てこないマンガ。きらら系では異色な感じなので、そういうのを期待するとアレ。この巻のテコ入れで失敗した気がするのは多分気のせいだと思……いたい。</p>

<h2><a href="http://www.amazon.co.jp/%E9%BE%8D%E3%81%AE%E8%8A%B1%E3%82%8F%E3%81%9A%E3%82%89%E3%81%84-7-%E8%8A%B1%E3%81%A8%E3%82%86%E3%82%81COMICS-%E8%8D%89%E5%B7%9D-%E7%82%BA/dp/4592183398%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4592183398">龍の花わずらい (7)</a></h2>

<p class="image"><a href="http://www.amazon.co.jp/%E9%BE%8D%E3%81%AE%E8%8A%B1%E3%82%8F%E3%81%9A%E3%82%89%E3%81%84-7-%E8%8A%B1%E3%81%A8%E3%82%86%E3%82%81COMICS-%E8%8D%89%E5%B7%9D-%E7%82%BA/dp/4592183398%3FSubscriptionId%3D08PWFCAAQ5TZJT30SKG2%26tag%3Dhail2unet-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4592183398"><img alt="龍の花わずらい 7 (花とゆめCOMICS)" src="http://ecx.images-amazon.com/images/I/610DIXfoYcL._SL160_.jpg" height="160" width="101"></a></p>

<p>十二秘色のパレットの方を先に読んで、こっちも読むようになった。終わり方がもうちょっとどうにかなったんじゃないかとかそういうのはあるけど、すっぱりと終わったのでまぁいいや。まとめて読むと</p>

<hr>

<p>ジャンルが被らないように5つセレクトしてみた。黄金のラフではひからび王が好きすぎて夢に出てきたことがある。優勝インタビューのコメントがかっこよかったなぁ。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/media/comic-2009.html</feedburner:origLink></item>
    <item>
      <title>Path::Class(::File)のslurp()でバイナリ・ファイルががが</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/PxXgoVvWKtc/perl-load-binary-file-with-path-class.html</link>
      <description>添付ファイル付きのメールを作成・送信するオレオレスクリプトを作ってて、ファイル名とかの扱いが簡単そうだったのでPath::Classを使ってみた。添付ファイルの読み込みもPath::Class(::File)のslurp()でやろうとしたのだけど、バイナリ・ファイルを添付する時にbinmodeして読み込む方法がわからなくちょっと困った。そしてどうやるのが正解なのかまだわからない……。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Coding</category>
      <guid isPermaLink="false">http://hail2u.net/blog/coding/perl-load-binary-file-with-path-class.html</guid>
      <pubDate>Tue, 22 Dec 2009 13:28:23 +0900</pubDate>
      <content:encoded><![CDATA[
<p>添付ファイル付きのメールを作成・送信するオレオレスクリプトを作ってて、ファイル名とかの扱いが簡単そうだったので<a href="http://search.cpan.org/dist/Path-Class/lib/Path/Class.pm">Path::Class</a>を使ってみた。添付ファイルの読み込みもPath::Class(::File)の<code>slurp()</code>でやろうとしたのだけど、バイナリ・ファイルを添付する時に<code>binmode</code>して読み込む方法がわからなくちょっと困った。そしてどうやるのが正解なのかまだわからない……。</p>

<p>Path::Class(::File)の<code>slurp()</code>を含む<code>open()</code>関連のメソッドは<a href="http://search.cpan.org/dist/IO/lib/IO/File.pm">IO::File</a>を使っているようなので、こういう風に書けばとりあえず目的は達成できるらしい。</p>

<pre class="prettyprint lang-pl">
use Path::Class;

my $file = file(&quot;foo.png&quot;);
my $fh = $file-&gt;openr();
$fh-&gt;binmode();
local $/;
my $content = &lt;$fh&gt;;
</pre>

<p><code>slurp()</code>のコード読んで一行追加しただけ。</p>

<pre class="prettyprint lang-pl">
use Path::Class;

my $file = file(&quot;foo.png&quot;);
my $content = $file-&gt;slurp(binmode =&gt; 1);
</pre>

<p>とか書きたい。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/coding/perl-load-binary-file-with-path-class.html</feedburner:origLink></item>
    <item>
      <title>CSSグラデーションのちょっとしたテクニック #2</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/zWkwMDCBV8M/css-gradients-technique-2.html</link>
      <description>前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Web Design</category>
      <guid isPermaLink="false">http://hail2u.net/blog/webdesign/css-gradients-technique-2.html</guid>
      <pubDate>Sun, 20 Dec 2009 12:36:21 +0900</pubDate>
      <content:encoded><![CDATA[
<p><a href="http://hail2u.net/blog/webdesign/css-gradients-technique-1.html">前回のエントリ</a>のような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方は<a href="http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/">css gradients in Firefox 3.6</a>とかで。#3はない。</p>

<p>以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。</p>

<h2>Vista風のテカってるボタン</h2>

<p class="image"><a href="http://hail2u.net/pub/test/133.html"><img src="http://hail2u.net/blog/images/vista-style-glossy-button.png" alt="テカテカボタン" width="217" height="36"></a></p>

<p>ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実は<code>double</code>な<code>border</code>が重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分に<code>rgb(138, 138, 138)</code>から<code>rgb(102, 102, 102)</code>、下半分に<code>rgb(36, 36, 36)</code>から<code>rgb(0, 0, 0)</code>と、二つに分けてグラデーションをかけているだけ。</p>

<pre class="prettyprint lang-css">
background-color: rgb(102, 102, 102);
background-image: -moz-linear-gradient(
  top,
  rgb(138, 138, 138)    0,
  rgb(102, 102, 102)  50%,
  rgb( 36,  36,  36)  50%,
  rgb(  0,   0,   0) 100%
);
background-image: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(  0, rgb(138, 138, 138)),
  color-stop(0.5, rgb(102, 102, 102)),
  color-stop(0.5, rgb( 36,  36,  36)),
  color-stop(1.0, rgb(  0,   0,   0))
);
</pre>

<p>テカりをうまく出すのは結構大変だけど、腐るほどあるPhotoshop向けのチュートリアルとかが大いに参考になるので読みあさると良い。</p>

<p class="image"><a href="http://hail2u.net/pub/test/133.html"><img src="http://hail2u.net/blog/images/vista-style-glossy-button-hover.png" alt="テカピカボタン" width="217" height="36"></a></p>

<p>Firefoxでは<code>-moz-radial-gradient</code>を使って<code>:hover</code>の時に枠の上下がちょっと光るエフェクトも付けてみた。かなりコードはややこしい。上下の光をまとめて作るのはできないことはなさそうだけど面倒なことは間違いないので、それぞれ別々に指定する。以下のコードで下の光が作れる。</p>

<pre class="prettyprint lang-css">
background-image: -moz-radial-gradient(
  /* 開始位置を中央下に =&gt; 半楕円のグラデーションになる */
  center bottom,
  /* デフォルト値と同じなので未指定でも良い */
  ellipse farthest-side,
  /* rgba()を使って光っぽく */
  rgba(255, 255, 255, 0.8)    0,
  rgba(255, 255, 255,   0) 100%
);
/* 繰り返しはしない */
background-repeat: no-repeat;
/* 位置をボックスの下端中央に */
background-position: center bottom;
/* サイズを横80%・縦2pxに */
-moz-background-size: 80% 2px;
</pre>

<p>普通に(楕)円状のグラデーションを置いただけでは光っぽくならないので、開始位置をずらしてやることによって半(楕)円状にしてやり光が拡散している感じを出す。上の光もほぼコードは一緒だが、幅を100%にして光を強めてある。SafariやChromeでは楕円のグラデーションを作るのが大変そうだったので諦めた。</p>

<p><code>double</code>な<code>border</code>の隙間を意図した色で塗るためには<code>background-color</code>が必須。それでもSafariやChromeでは<code>border</code>が<code>double</code>の時の隙間が変に塗られるのでちょっと汚い(Firefoxもちょっと変だけど、サンプルでは<code>-moz-border-*-colors</code>で制御した)。変というか挙動をはっきりと理解していないのでうまく塗れないだけかも。</p>

<h3><code>-moz-border-*-colors</code></h3>

<p><code>-moz-border-*-colors</code>は複数の色をボーダーに使用するためのMozillaの独自拡張プロパティ。SafariやChromeには同等のプロパティはない。以下のように空白区切り(カンマ区切りではないので注意)で複数の色を指定する。</p>

<pre class="prettyprint lang-css">
-moz-border-top-colors: none rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255) transparent;
</pre>

<p><code>none</code>の場合は<code>border-color</code>で塗られ、<code>transparent</code>の場合は<code>background-color</code>で塗られる……はずだが挙動不審なので使う場合はきっちり色を指定した方が良さそう。</p>

<h2><code>pre</code>要素で行ごとに色を変える</h2>

<p class="image"><a href="http://hail2u.net/pub/test/134.html"><img src="http://hail2u.net/blog/images/coloring-every-other-line-of-pre.png" alt="行ごとに色が違うpre" width="378" height="288"></a></p>

<p>シンタックス・ハイライトするJavaScriptライブラリに良くあるデザインだが、これもCSSグラデーションでいける。CSSグラデーションは複数の色で単純に塗り分けるというようなことも可能だということは覚えておくと良い。</p>

<pre class="prettyprint lang-css">
background-image: -moz-linear-gradient(
  top,
  rgb(255, 255, 255)    0,
  rgb(255, 255, 255) 18px,
  rgb(243, 246, 252) 18px,
  rgb(243, 246, 252) 36px
);
-moz-background-size: 1px 36px;
</pre>

<p>上端から18pxまでは<code>rgb(255, 255, 255)</code>で塗り、18pxから36pxまでは<code>rgb(243, 246, 252)</code>で塗るように指定する。あとはこれが並ぶはず……と思いきや並ばず、<code>pre</code>要素の下端まで<code>rgb(243, 246, 252)</code>で塗られてしまう。Firefoxで<code>background-repeat</code>を有効にするためには<code>background-size</code>で明示的に背景画像のサイズをしてやる必要がある。本来は<code>-moz-repeating-linear-gradient</code>を使うべきなのかもしれないがSafariやChromeには無いので、同じようなアプローチで記述できる<code>background-repeat</code>と<code>-moz-background-size</code>で書いた方が混乱しない。</p>

<pre class="prettyprint lang-css">
background-image: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(  0, rgb(255, 255, 255)),
  color-stop(0.5, rgb(255, 255, 255)),
  color-stop(0.5, rgb(243, 246, 252)),
  color-stop(1.0, rgb(243, 246, 252))
);
-webkit-background-size: 1px 36px;
</pre>

<p>一方SafariやChromeではピクセル単位でグラデーションを制御することはできないので一見無理そうだが、こちらも<code>background-size</code>を明示的にしてやれば計算でピクセル単位で制御できるようになる。#1の最後でちょっと触れてたが、このアプローチで問題なく上手くいく。整数にならない場合の丸め方が一定ではないので、確実に整数値になるように計算できるサイズと割合に調節した方が良い。</p>

<p>ここではわかりやすく<code>px</code>でゴリゴリ指定したが、それぞれの単位は<code>em</code>でも良いのでフォントサイズに合わせて柔軟に変化するようにも書くことができる。今時のブラウザなら<code>px</code>で良さそうではあるけど、<code>em</code>とかを使った方がメンテナンス性が高い。</p>

<h2>テーブルクロスっぽいチェックの背景</h2>

<p class="image"><a href="http://hail2u.net/pub/test/135.html"><img src="http://hail2u.net/blog/images/check-background.png" alt="赤いチェック模様" width="480" height="240"></a></p>

<p>もはやCSSを読んでも何をやっているのか解らない……。書いた自分ですらもう一度書けといわれても難しい感じ。こんなこともできるよということで。</p>

<pre class="prettyprint lang-css">
background-color: rgb(180, 30, 30);
background-image:
  -moz-linear-gradient(
    top,
    rgba(  0,   0,   0, 0.2)  0px,
    rgba(  0,   0,   0, 0.2)  4px,
    rgba(255, 255, 255, 0.5)  4px,
    rgba(255, 255, 255, 0.5)  8px,
    transparent               8px,
    transparent              28px,
    rgba(255, 255, 255, 0.5) 28px,
    rgba(255, 255, 255, 0.5) 32px
  ),
  -moz-linear-gradient(
    left,
    rgba(  0,   0,   0, 0.2)  0px,
    rgba(  0,   0,   0, 0.2)  4px,
    rgba(255, 255, 255, 0.5)  4px,
    rgba(255, 255, 255, 0.5)  8px,
    transparent               8px,
    transparent              28px,
    rgba(255, 255, 255, 0.5) 28px,
    rgba(255, 255, 255, 0.5) 32px
  )
;
</pre>

<p>複数の背景画像を使って格子を形成する。一つ目が横方向の縞で、二つ目が縦方向の縞。普通に四角を並べる感じで作れそうな気がするが(多分)無理で、<code>rgba()</code>をうまく使って濃淡をつけるしか方法を思いつかなかった。ベースとなる部分は<code>transparent</code>で塗っておいて、<code>background-color</code>でそのベースの色を指定。WebKit向けのコードも似たような感じで、読みづらい以外は特に変わったところも無いため割愛。斜めのチェック模様とかもFireとSafariやChromeと挙動を合わせるための計算が面倒なだけで、それほど難しくはないと思う。</p>

<p>本当はもっとタータンチェックっぽくドットを組み合わせたものにしようと思ってたけど面倒すぎる(無理かも)ので簡単に作った。<code>-moz-diamond-gradient</code>とかがあればタータンチェックも簡単に出来そう。</p>

<hr>

<p><code>linear</code>なグラデーションを書く場合は<code>-webkit-gradient</code>の方がPhotoshopとかのグラデーション製作フローをそのままコードにした感じでまだ読みやすい。Firefoxの開始位置と方向の角度でグラデーションの向きを決めるってあんまり直感的ではない気がする。デフォルトでそんな操作させるペイント・ソフトとか触ったことないし。</p>

<p>一方、<code>radial</code>なグラデーションの場合は<code>-webkit-gradient</code>はもはや人間には読めない。その分<code>-moz-radial-gradient</code>よりも複雑(怪奇)なことができるけど。<code>-moz-radial-gradient</code>では単純な(楕)円状グラデーションしか作れない反面、お馴染みのワードで指定できる開始位置と単純な二つの形状・直感的な呼称の終了位置の3つを指定して作成するのでイメージしやすく、ペイント・ソフトの挙動と似ていて馴染みやすい。</p>

<p>Mozillaの……というかCSS3の文法の方がまだマシな感じではあるので、WebKitが合わせてくれると良いな。<code>-webkit-gradient</code>はそのまま残せば良いわけだし。</p>

<p>それぞれエントリにすれば良かった……。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/webdesign/css-gradients-technique-2.html</feedburner:origLink></item>
    <item>
      <title>Vimのcommandで-complete=custom(list)を使う</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/CiND335Ljzc/use-complete-custom-customlist-in-vim-command.html</link>
      <description>Vimのコマンドでの引数の補完にカスタム関数を使うというのを撫でてみた。customなら補完候補を改行で連結した文字列を、customlistなら補完候補のlistを返してやる関数を作れば良いだけで、思っていたよりも簡単そう。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Software</category>
      <guid isPermaLink="false">http://hail2u.net/blog/software/use-complete-custom-customlist-in-vim-command.html</guid>
      <pubDate>Sat, 19 Dec 2009 07:58:48 +0900</pubDate>
      <content:encoded><![CDATA[
<p>Vimのコマンドでの引数の補完にカスタム関数を使うというのを撫でてみた。<code>custom</code>なら補完候補を改行で連結した文字列を、<code>customlist</code>なら補完候補の<code>list</code>を返してやる関数を作れば良いだけで、思っていたよりも簡単そう。</p>

<p>補完のために適当なファイル(行ごとに補完したい単語が並べたいわゆる辞書ファイル)を用意してやるというありがちなケースでは、<code>readfile()</code>で<code>list</code>が返ってくるので特に簡単だった。例えば各行にメールアドレスが並んでいる<code>$HOME/addressbook.txt</code>というファイルがあるとすると、以下のようなカスタム補完関数で絞り込みつつ補完できるようになる。</p>

<pre>
function! ListMailAddress(A, L, P)
  let addresses = readfile(expand(&#39;$HOME/addressbook.txt&#39;))
  let matches = []

  for address in addresses
    if address =~? &#39;^&#39; . strpart(a:A, 1)
      call add(matches, shellescape(address))
    endif
  endfor

  return matches
endfunction

command! -nargs=1 -complete=customlist,ListMailAddress Mail :execute &#39;! start mailto:&#39; . &lt;args&gt;
</pre>

<p>第一引数で入力済みの文字列を拾えるので、それで適当に絞り込みをかけるだけ。簡単！<code>shellescape()</code>してるのはメールアドレスの<code>@</code>でアレなことになるからなので、そういうのが無いのならもっと簡単に書ける。第二引数はコマンドラインで入力されたすべての文字列、第三引数がカーソル位置だが、両者の使い道は思いつかなかった……。第二引数は複数のコマンドで補完関数を共有する時とかに使うのかなぁ。</p>

<p>デフォルトのコマンドラインの補完モード(<code>wildmode</code>)は、コマンド・プロンプトの補完と似た感じのシンプルなもの(<code>statusline</code>に表示される候補を次々と選択していくもの)でちょっと使いづらい感じだったが、色々試して、</p>

<pre>
set wildmode=longest,list
</pre>

<p>というbashな感じに落ち着いた。<code>list</code>を入れとくと<code>fun &lt;SNR&gt;</code>の後に<kbd>&lt;Tab&gt;</kbd>でスクリプト番号付きの関数が一覧出来たりとか(どうでも良い)。<code>wildmode</code>の設定はちょっと解りづらかった……。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/software/use-complete-custom-customlist-in-vim-command.html</feedburner:origLink></item>
    <item>
      <title>FeedBurnerからTwitterへ</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/W5-m1_lcHWs/from-feedburner-to-twitter.html</link>
      <description>最近になって「エントリ書いた」つぶやきをTwitterに投げるようになった。Twitterfeedとかを使うのは何かに負けた気がすると思ったので、エントリをPublishするPerlスクリプト内でTwitterに投げていたが、FeedBurnerでできるようになったらしいのでそれに乗り換えてみた。設定してActivateボタンを押したら502エラーとか出たけど設定は正常に行われたらしい。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Internet</category>
      <guid isPermaLink="false">http://hail2u.net/blog/internet/from-feedburner-to-twitter.html</guid>
      <pubDate>Tue, 15 Dec 2009 18:21:00 +0900</pubDate>
      <content:encoded><![CDATA[
<p>最近になって「エントリ書いた」つぶやきをTwitterに投げるようになった。<a href="http://twitterfeed.com/">Twitterfeed</a>とかを使うのは何かに負けた気がすると思ったので、エントリをPublishするPerlスクリプト内でTwitterに投げていたが、<a href="http://adsenseforfeeds.blogspot.com/2009/12/socializing-your-feed-with-twitter.html">FeedBurnerでできるようになったらしい</a>のでそれに乗り換えてみた。設定してActivateボタンを押したら502エラーとか出たけど設定は正常に行われたらしい。</p>

<p>と、導入出来たかどうか確認のためにエントリを書く。</p>

<p>設定画面はまだ日本語化されていない。TwitterのアカウントはFeedBurnerのアカウントに対しては複数設定可能だが、フィードに対しては一つだけなので、フィードが更新されたらTwitterの複数アカウントでつぶやくとかは無理そう。Hash tagsは<code>category</code>要素をハッシュ・タグとして付加してくれる。RSS 1.0で<code>taxo:topics</code>とかを使ったカテゴリ(タグ)の表現とかでもOKだった。</p>

<p>Twitterの140文字制限のためのURL短縮には<a href="http://googleblog.blogspot.com/2009/12/making-urls-shorter-for-google-toolbar.html">これもまた新しく登場</a>した<a href="http://goo.gl/">goo.gl URL短縮</a>が使われる(<code>fb/</code>が必ず挿入される)。短縮される元のURLはFeedBurnerの生成したURLになので、クリック監視とかを設定していても大丈夫。</p>

<p>設定画面の最後には、</p>

<blockquote>
<p>This feature utilizes a Google service to create short versions of your feed links, e.g. http://goo.gl/xyzxyz. Please note that Google may choose to publicly display aggregate and non-personally identifiable statistics about shortened links, such as the number of end user clicks.</p>
</blockquote>

<p>と書いてあって、短縮されたURLのトラフィックの統計を誰でも閲覧できるようにするかもしれないよとのことなので、将来的にgoo.glはbit.lyのような感じになりそう。注意書きを薄い色で書くなとちょっとだけ思った。</p>

<p>それ(どうせすぐに)Googleで出来る(ようになる)よ！</p>

<hr>

<p>この機能は任意のフィードをTwitterで購読できるという意味でもあるので、<a href="http://b.hatena.ne.jp/bookmarklist?url=http%3A%2F%2Fhail2u.net%2F">はてなブックマークのブックマークされたよフィード</a>とかをFeedBurner経由にしてやって、Socialize設定でTwitterのサブアカウントに投げるようにすると、ブックマークされたらTwitterで知ることが出来て便利かも。<a href="http://feeds.feedburner.com/hail2u/bookmarked">Pipesとかを使ってガリゴリいじってやらないと</a>読みづらそうだし、最大8つまでしか投げてくれないので有名サイトとかだとガンガン取りこぼしそうだけど。</p>

<p>先ほど間違えてメインのアカウントに被ブクマを流してしまったことについては大変遺憾に思っております。</p>

<h2>追記@2009-12-15T21:46:14+09:00</h2>

<p>導入はちゃんとできた模様。以下、気づいた点をメモ。</p>

<ul>
<li>FeedBurnerへpingを送信した後、1分もしないでつぶやかれる</li>
<li>短縮されたURLは<code>http://goo.gl/fb/</code>で始まり、FeedBurnerでのものとひと目でわかる</li>
<li>短縮URLは直ぐに機能するがFeedBurnerのクリック追跡用URLが少し遅れて機能するようになるようで、つぶやかれた直後は404 Not Foundになった(かなり問題ある)</li>
<li>短縮URLはFeedBurnerのクリック追跡用URLに<code>utm_source=feedburner&amp;utm_medium=twitter</code>という隠しパラメータが設定されている(そのうちFeedBurnerのフィード集計に載るのかも)</li>
<li>Post contentをTitle and Bodyにした場合、<code>content:encoded</code>や<code>atom:content</code> (なければ<code>description</code>や<code>atom:summary</code>)をプレーンテキスト化したものの先頭が切り出されて使われる</li>
<li>ハッシュタグは小文字化される</li>
</ul>

<p>反映の速さと導入の簡単さとコストの低さは魅力的だが、短い間だけどつぶやきに含まれるURLが機能しないことがあるのがちょっと致命的。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/internet/from-feedburner-to-twitter.html</feedburner:origLink></item>
    <item>
      <title>gVimでメニューを読み込まない</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/i93HpURhztM/dont-load-menu-in-gvim.html</link>
      <description>delmenu.vimとかで消してやるものだと勝手に思い込んでいたのだけど、ちゃんとヘルプを読むとsyntax onやfiletype onより前にset guioptions+=Mしてやれば読み込まなくなるということを今さら知った……。0.1秒起動が速くなりました！</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Software</category>
      <guid isPermaLink="false">http://hail2u.net/blog/software/dont-load-menu-in-gvim.html</guid>
      <pubDate>Mon, 14 Dec 2009 21:38:13 +0900</pubDate>
      <content:encoded><![CDATA[
<p>delmenu.vimとかで消してやるものだと勝手に思い込んでいたのだけど、<a href="http://vimdoc.sourceforge.net/htmldoc/options.html#%27go-M%27">ちゃんとヘルプを読むと</a><code>syntax on</code>や<code>filetype on</code>より前に<code>set guioptions+=M</code>してやれば読み込まなくなるということを今さら知った……。0.1秒起動が速くなりました！</p>

<p>普通に<code>.vimrc</code>の先頭に以下のように書いておくだけで良い。</p>

<pre>
set guioptions&amp; guioptions+=M
</pre>

<p>ただこのままではNetrwプラグインなどを起動した時にメニューが出てきてしまったり、ツールバーがある部分が空白になってしまったりするので、<code>.gvimrc</code>でメニューとツールバーを非表示にする必要がある。</p>

<pre>
set guioptions-=m guioptions-=T
</pre>

<p>スッキリポン！</p>

<hr>

<p>メニューを読み込まないのではなく、単にメニューの対訳ファイルの読み込みを抑止したい(つまりメニューをデフォルトの英語のままにしたい)だけの場合は<code>langmenu</code>で設定する。</p>

<pre>
set langmenu=none
</pre>

<p><code>en_us</code>とかにすれば良さそうだが、賢いmenu.vimが<code>en_gb.latin1.vim</code>とかを頑張って探しだして読み込んでしまうのでダメぽい。環境変数<code>LANG</code>を<code>en_us</code>等に設定した場合も同じくダメ。このオプションも<code>syntax on</code>より前に設定する必要があるので、<code>.vimrc</code>の先頭付近に書く必要がある。</p>

<p>メニューに合わせてメッセージも英語にする場合は<code>language</code>での設定になる。</p>

<pre>
set language en
</pre>

<p>まとめて設定したい……。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/software/dont-load-menu-in-gvim.html</feedburner:origLink></item>
    <item>
      <title>Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/-yuMPJ-kX7A/perl-compile-javascript-code-with-google-closure-compiler-service.html</link>
      <description>最近になってGoogleのClosure Compiler Serviceを良く使うようになった。今まで使っていたYUI Compressorと比較すると、複数のJavaScriptファイルをまとめて圧縮出来ることと圧縮にとどまらない最適化を行うことも出来ることがメリットで、CSSの圧縮には対応していないことがデメリット。ウェブのUIで圧縮するのは面倒になってきたので、REST APIを利用してウェブのUIと同じようにコメントで設定を記述してコンパイルするPerlスクリプトを書いてみた。タイトル長い！</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Coding</category>
      <guid isPermaLink="false">http://hail2u.net/blog/coding/perl-compile-javascript-code-with-google-closure-compiler-service.html</guid>
      <pubDate>Sun, 13 Dec 2009 14:08:17 +0900</pubDate>
      <content:encoded><![CDATA[
<p>最近になってGoogleの<a href="http://closure-compiler.appspot.com/home">Closure Compiler Service</a>を良く使うようになった。今まで使っていた<a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a>と比較すると、複数のJavaScriptファイルをまとめて圧縮出来ることと圧縮にとどまらない最適化を行うことも出来ることがメリットで、CSSの圧縮には対応していないことがデメリット。ウェブのUIで圧縮するのは面倒になってきたので、<a href="http://code.google.com/intl/ja/closure/compiler/docs/gettingstarted_api.html">REST API</a>を利用してウェブのUIと同じようにコメントで設定を記述してコンパイルするPerlスクリプトを書いてみた。タイトル長い！</p>

<pre class="prettyprint lang-pl">
#!/usr/bin/perl

# gccs.pl - Compile your JavaScript code with Google Closure Compiler Service
# Usage:    gccs.pl &lt; &lt;original file&gt; &gt; &lt;compiled file&gt;
# Author:   Kyo Nagashima &lt;kyo@hail2u.net&gt;, http://hail2u.net/
# License:  MIT license (http://opensource.org/licenses/mit-license.php)
# Modified: 2009-12-12T00:57:02+09:00

use strict;
use warnings;

use JSON;
use LWP::UserAgent;

my @params = (
  &quot;output_info&quot;,   &quot;compiled_code&quot;,
  &quot;output_format&quot;, &quot;json&quot;,
);

&amp;main;
exit;

sub main {
  my @code = &lt;STDIN&gt;;
  push @params, &quot;js_code&quot;, join(&quot;&quot;, @code);
  my $idx = 0;
  my $found_metadata = 0;

  while (my $line = $code[$idx++]) {
    if ($line =~ /^\/\/ ==ClosureCompiler==/) {
      $found_metadata = 1;
      last;
    }
  }

  if ($found_metadata) {
    while (my $line = $code[$idx++]) {
      if ($line =~ /^\/\/ ==\/ClosureCompiler==/) {
        last;
      } elsif ($line =~ /^\/\/ @(\S+)\s*(.*)$/) {
        push @params, $1, $2;
      }
    }
  }

  &amp;compile(@params);
}

sub compile {
  my $ua = LWP::UserAgent-&gt;new;
  my $res = $ua-&gt;post(&quot;http://closure-compiler.appspot.com/compile&quot;, \@_);

  if ($res-&gt;is_success) {
    my $c = from_json($res-&gt;decoded_content);

    if (defined $c-&gt;{&quot;serverErrors&quot;}) {
      foreach (@{$c-&gt;{&quot;serverErrors&quot;}}) {
        warn &quot;Error(&quot; . $_-&gt;{&quot;code&quot;} . &quot;): &quot; . $_-&gt;{&quot;error&quot;};
      }

      die &quot;Failed to compile&quot;;
    } else {
      print $c-&gt;{&quot;compiledCode&quot;};
    }
  } else {
    die $res-&gt;status_line;
  }
}
</pre>

<p>使い方は、</p>

<pre>
$ gccs.pl &lt; original.js &gt; compiled.js
</pre>

<p>コンパイルするfoobar.jsにはコンパイル設定を書くこともできる(設定を書かなくても圧縮される)。設定は以下のようにコメントとして記述(ウェブUIと同じ)。</p>

<pre class="prettyprint lang-js">
// ==ClosureCompiler==
// @code_url          http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// ==/ClosureCompiler==
 
$(function () {
  var who = &quot;Google Closure Compiler Service&quot;;
  alert(&quot;Hello &quot; + who + &quot;!&quot;);
});
</pre>

<p>細かい設定は<a href="http://code.google.com/intl/ja/closure/compiler/docs/api-ref.html">APIリファレンス</a>を参照。<code>code_url</code>はいくつでも指定できる。<code>compilation_level</code>はデフォルトで<code>SIMPLE_OPTIMIZATIONS</code>に設定されているので省略可能。パラメータは丸投げなのでリファレンスに載っていない適当なパラメータなども設定できてしまうが、実害はないと思う。結果がJSONで返ってくるとみなしてパースしているので、<code>output_format</code>は指定しない方が良い。また警告やエラーの出力にはまったく対応していないので<code>output_info</code>や<code>warning_level</code>を指定しても無意味。</p>

<p>foobar.jsには設定だけ書いても構わない。その場合は<code>code_url</code>が必須になる。</p>

<pre class="prettyprint lang-js">
// ==ClosureCompiler==
// @code_url          http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js
// @code_url          http://hail2u.net/scripts/prettify/lang-css.js
// @code_url          http://hail2u.net/scripts/prettify/loader.js
// ==/ClosureCompiler==
</pre>

<p>以上のように書いただけでもちゃんとコンパイルされる。</p>

<hr>

<p>Vimから簡単に使えるように<code>$MYVIMRC</code>には以下のように書いた。</p>

<pre>
&quot; Compile JavaScript file with Google Closure Compiler Service
&quot; :GCCS [&lt;path&gt;]
command! -nargs=? -complete=file GCCS :call s:CompileScript(&#39;&lt;args&gt;&#39;)

function! s:CompileScript(file)
  if a:file == &#39;&#39;
    silent normal ggVG
    &#39;&lt;,&#39;&gt;!perl -S gccs.pl
    silent normal V
  else
    execute &#39;!perl -S gccs.pl &lt; &#39; . expand(&#39;%&#39;) . &#39; &gt; &#39; . a:file
  endif
endfunction
</pre>

<p>コマンド<code>GCCS</code>にファイルのパスが渡されたらそのファイルに出力、そうでない場合は全選択して差し替えるというもの。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/coding/perl-compile-javascript-code-with-google-closure-compiler-service.html</feedburner:origLink></item>
    <item>
      <title>google-code-prettifyを導入した</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/iovuO4oyyGQ/install-google-code-prettify.html</link>
      <description>どっかのサイトがシンタックス・ハイライトを導入していたので真似した。ローカルでやろうかと思ったけどフィードに&lt;span class="kwd"&gt;function&lt;/span&gt;とかがたくさん入るのが嫌だったので、JavaScriptでハイライトしてくれるgoogle-code-prettifyにした。正式名称はJavascript code prettifierらしい。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Web Design</category>
      <guid isPermaLink="false">http://hail2u.net/blog/webdesign/install-google-code-prettify.html</guid>
      <pubDate>Fri, 11 Dec 2009 14:29:44 +0900</pubDate>
      <content:encoded><![CDATA[
<p>どっかのサイトがシンタックス・ハイライトを導入していたので真似した。ローカルでやろうかと思ったけどフィードに<code>&lt;span class=&quot;kwd&quot;&gt;function&lt;/span&gt;</code>とかがたくさん入るのが嫌だったので、JavaScriptでハイライトしてくれる<a href="http://code.google.com/p/google-code-prettify/">google-code-prettify</a>にした。正式名称はJavascript code prettifierらしい。</p>

<p>google-code-prettifyにしたのは、必要な機能がシンタックス・ハイライト<em>だけ</em>でできればフォーマットの自動判定があれば良いかなーくらいだったので。自動判定に頑張って貰おうとして、</p>

<pre class="prettyprint lang-js">
$(function () {
  $(&quot;pre&quot;).addClass(&quot;prettyprint&quot;);
  prettyPrint();
});
</pre>

<p>とか書いて全ての<code>pre</code>要素を自動的にハイライトさせてみたんだけど、非対応なものとかでアレなことになってしまったので、結局半手作業でハイライトさせたい<code>pre</code>要素のクラス名に<code>prettyprint</code>を振ってやった……。</p>

<p>CSSのシンタックス・ハイライトはコアに含まれていないので、利用したい場合は以下のように書く必要があった。</p>

<pre class="prettyprint lang-html">
&lt;script type=&quot;text/javascript&quot; src=&quot;prettify.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;lang-css.js&quot;&gt;&lt;/script&gt;
</pre>

<p>順序が重要でlang-css.jsはprettify.jsより後ろに書かなくてはならない。当たり前といえば当たり前なんだけどうっかり逆の順序で書いてしまってはまった……。<a href="http://closure-compiler.appspot.com/home">Closure Compiler Service</a>を使えば複数のJavaScriptファイルをまとめたりもできるので、まとめてしまうとそういう間違も起こさず良いかもしれない。流行りのHTTPリクエストの節約にもなる(この場合は一つだけどね！)。実際にこのサイトで使用しているprettify.min.jsはClosure Compiler Serviceでコンパイルしたもの。</p>

<pre class="prettyprint lang-js">
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name prettify.min.js
// @code_url http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js
// @code_url http://hail2u.net/scripts/prettify/lang-css.js
// ==/ClosureCompiler==

$(function () {
  prettyPrint();
});
</pre>

<p>Closure Compiler Serviceのフォームには上記のように入力してコンパイルした。<a href="http://hail2u.net/scripts/prettify/lang-css.js">lang-css.js</a>は<code>rgba()</code>や<code>hsla?()</code>をサポートさせたりプロパティ名のハイライト色を変更したかったので、このサイトにカスタマイズしたものを置いてそれを読み込ませている。ついでにjQueryを使って<code>prettyPrint()</code>が自動的に呼ばれるようにして、<code>&lt;body onload=&quot;prettyPrint()&quot;&gt;</code>とか書かなくて済むようにもした。</p>

<p>CSSテーマはir_blackを適当にカスタマイズしたもので<a href="http://hail2u.net/styles/widget.css">widget.css</a>に書いてある。一応<a href="http://hail2u.net/scripts/prettify/ir_black.css">ir_black.css</a>や<a href="http://hail2u.net/scripts/prettify/h2u_black.css">h2u_black.css</a>とかも書いたけど使ってない……。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/webdesign/install-google-code-prettify.html</feedburner:origLink></item>
    <item>
      <title>はてなブックマークのブックマークレットをlightbox化</title>
      <link>http://feedproxy.google.com/~r/hail2u/blog/~3/80KD7u4YuAE/lightboxed-hatena-bookmarke-bookmarklet.html</link>
      <description>はてなブックマークのデフォルトのブックマークレットはiframeでオーバーレイ表示されるが、サイズ的にも位置的にも見づらい気がするので、ユーザースタイルシートをいくつか書いてみた。最初はオーバーレイ表示ではない旧バージョンのブックマークレットを使い、そのページのスタイルシートを書き換えてみたのだけど、見やすいことは見やすいがイマイチな感じだった。そこでもっと単純にオーバーレイ表示のサイズと位置を変更するだけのものを書いたりしてみたが、これもイマイチ。最終的にlightboxっぽく表示してやれば良いんじゃないかと思い、試してみたらなかなか良さそうな感じだった。</description>
      <author>kyo@hail2u.net (Kyo Nagashima)</author>
      <category domain="http://hail2u.net/blog">Coding</category>
      <guid isPermaLink="false">http://hail2u.net/blog/coding/lightboxed-hatena-bookmarke-bookmarklet.html</guid>
      <pubDate>Thu, 10 Dec 2009 10:00:19 +0900</pubDate>
      <content:encoded><![CDATA[
<p><a href="http://b.hatena.ne.jp/register">はてなブックマークのデフォルトのブックマークレット</a>は<code>iframe</code>でオーバーレイ表示されるが、サイズ的にも位置的にも見づらい気がするので、ユーザースタイルシートをいくつか書いてみた。最初はオーバーレイ表示ではない旧バージョンのブックマークレットを使い、<a href="http://gist.github.com/249179">そのページのスタイルシートを書き換えてみた</a>のだけど、見やすいことは見やすいがイマイチな感じだった。そこでもっと単純にオーバーレイ表示のサイズと位置を変更するだけのものを書いたりしてみたが、これもイマイチ。最終的にlightboxっぽく表示してやれば良いんじゃないかと思い、試してみたらなかなか良さそうな感じだった。</p>

<p class="image"><a href="http://hail2u.net/blog/images/lightboxed-hatena-bookmark-bookmarklet-l.png"><img src="http://hail2u.net/blog/images/lightboxed-hatena-bookmark-bookmarklet-s.png" alt="Lightbox化したはてなブックマークのブックマークレットのプレビュー" width="640" height="480"></a></p>

<p>投稿フォームはブラウザ・ウィンドウのど真ん中に表示される。調節するのが面倒だったのでサイズの変更はしていない。ユーザースタイルシートのコードは以下の通り。</p>

<pre class="prettyprint lang-css">
.hatena-bookmark-bookmarklet-container {
  padding: 0 !important;
  display: table !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
}

.hatena-bookmark-bookmarklet-container div {
  padding: 0 !important;
  background-image: none !important;
  text-align: center !important;
}

.hatena-bookmark-bookmarklet-header {
  display: none !important;
}

.hatena-bookmark-bookmarklet-header + div {
  display: table-cell !important;
  vertical-align: middle !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
}

.hatena-bookmark-bookmarklet-container iframe {
  padding: 0 !important;
  background-image: none !important;
}
</pre>

<p>あらゆるサイトに表示される可能性があるので、<code>@-moz-document domain()</code>等は使わ(え)ない。このユーザースタイルシートで元々の投稿フォームのヘッダにある閉じるボタン(やシェードボタン)が機能しなくなってしまうので、投稿フォームを閉じるにはリロードする必要がある(ヘッダは残してやっても意味が無いようなので削除した)。これだと非常に操作性が悪いので、投稿フォーム以外の半透明な部分をクリックするとフォームが消え、再度ブックマークレットを実行すると再表示されるブックマークレットは書いてみた。表示・非表示のトグル以外はデフォルトのものと同じ。非表示にするだけなのでフォームに入力した内容とかは維持される。</p>

<p>Bookmarklet: <a href="javascript:(function(){function%20c(n){return%20document.getElementsByClassName(n)}if(typeof%20c('hatena-bookmark-bookmarklet-container')[0]!='undefined'){c('hatena-bookmark-bookmarklet-container')[0].style.visibility='visible'}else{var%20d=(new%20Date);var%20s=document.createElement('script');s.charset='UTF-8';s.src='http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js?'+d.getFullYear()+d.getMonth()+d.getDate();(document.getElementsByTagName('head')[0]||document.body).appendChild(s);var%20t=setInterval(function(){if(typeof%20c('hatena-bookmark-bookmarklet-container')[0]!='undefined'){clearInterval(t);c('hatena-bookmark-bookmarklet-container')[0].onclick=function(){this.style.visibility='hidden'};}},100);}})()">ブックマークする</a></p>

<p>あんまり試してないのでちゃんと動くかわからない……。単純にタイマーで投稿フォームが作成されたかどうか監視して、作成されたら投稿フォームをトグルするコードを仕込むというだけのもの(なのにやたら長い)。もちろん上記ユーザースタイルシートと共に使わないと意味はない。</p>

<p>拡張使え！拡張使え！拡張使え！Chromeで！！１<a href="http://hatena.g.hatena.ne.jp/hatenabookmark/20091209/1260314705">はてなブックマークのGoogle Chrome拡張はベータテスト中です</a>。</p>

<h2>追記@2009-12-10T13:03:41+09:00</h2>

<p>Chromeにはユーザースタイルシート的なものがないので、<a href="http://gist.github.com/253101">スタイルを追加する簡単なユーザースクリプトを書いてみた</a>。現在の最新ベータ版(4.0.249.30)ではrawをクリックすると拡張としてインストールされる。試してみた限りでは<a href="http://www.flickr.com/photos/hail2u/4172849297/">うまく動いている模様</a>。</p>]]></content:encoded>
    <feedburner:origLink>http://hail2u.net/blog/coding/lightboxed-hatena-bookmarke-bookmarklet.html</feedburner:origLink></item>
  </channel>
</rss>
