とりあえず設定から。

autocmd FileType html :setlocal path+=W:/www/test,W:/www/hail2u.net,W:/www/blosxom.info
autocmd FileType html :setlocal includeexpr=substitute(v:fname,'^\\/','','')

W:/www/test等のパスはカンマ区切りで自分の環境に合わせて必要なだけカンマで区切って書く。追加するパスはサイトのトップページのあるディレクトリ(フォルダ)のパス。ややこしく言うならウェブサイトのドキュメント・ルートに対応するローカル(またはリモート)のファイルシステム上のパス。

デフォルトでは以下のように書くとgfで開くことができない。

<script type="text/javascript" src="/scripts/twitter/speech-bubble.js"></script>

ファイルシステム上のルートとドキュメント・ルートが一致しないため/scripts/twitter/speech-bubble.jsの上でgfを押しても「ファイルがありません」と怒られるだけ。:help gfによるとgfは以下のようにしてファイルを探しているようだ。

1. isfnameオプションに従ってカーソルの前後からファイル名を抜き出す
2. pathオプションに従ってファイルを探す
3. 見つからなかったらsuffixesaddオプションに従って接尾語を付けファイルを探す
4. 見つからなかったらincludeexprオプションに従ってファイル名を変更しファイルを探す

ポイントになるのは2と4で、この二つのオプションをうまく設定してやると開くことができるようになる。まずpathにドキュメント・ルートに対応するファイルシステム上のパスを追加してやり、ドキュメント・ルートからの相対パスをなんとなく解釈できそうな感じに準備する。このままではまだスラッシュ始まりに対応できないので、今度はincludeexprで頭のスラッシュを削除してやる。というわけで上記のような設定になる。after/html.vimとかの使い方をいまだにちゃんと覚えていないのでautocmdばっか使ってる……。

Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。

• Pure CSSな吹き出しのサンプル: Speech Bubbles

とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。

<div class="bubble">
  <p class="body">Cras ultricies ultricies justo a blandit.
  Quisque a tristique urna.
  Nam lobortis, metus a posuere ornare, arcu lacus sodales justo, non auctor felis nunc non nisi.
  Vestibulum risus dolor, ornare id lobortis pretium, rhoncus ac augue.</p>
  <div class="tail"></div>
</div>

そして基本になるCSSコードは以下のようなものになる。

.bubble {
  position: relative;
  width: 360px;
}

.bubble .body {
  color: #ffffff;
  background-color: #66aa11;
}

.bubble .tail {
  border-top: 18px solid #66aa11;
  border-right: 24px solid transparent; 
  position: absolute;
  bottom: -18px;
  left: 36px;
  width: 0; 
  height: 0; 
}

まずコンテナである.bubbleのpositionプロパティでrelativeを指定する。これにより尻尾になる子要素.tailをbody要素ではなくコンテナである.bubbleを基準にして絶対配置できるようになる。.bodyでは吹き出しの前景色と背景色を指定する。ここでは前景色を#ffffff、背景色を#66aa11にした。そして.tailへのスタイル指定で尻尾を作成する。

尻尾の形と色はborderプロパティで決める。高さと色はborder-topプロパティで調節でき、尻尾の三角の傾斜はborder-right-sizeプロパティで調節できる。border-right-colorプロパティでtransparentを指定することによって、本来は四角になってしまうところを三角に削ってやるという話なので、border-right-sizeプロパティを増やすと傾斜はゆるくなり、逆に減らすと傾斜がきつくなる。

位置はpositionプロパティでabsoluteを指定した上で、bottomプロパティとleftプロパティで決める。コンテナがrelativeなので、left: 36px;だとコンテナの左端から36px右の位置になる。同じようにbottom: -18px;だとコンテナの下端から18px下の位置になるので、コンテナの左下に飛び出た形できれいに配置することができる。bottomプロパティに指定する負の数値は、尻尾の高さ分、つまりborder-top-sizeプロパティの値、を負の数値にしたもの。合わせてwidthプロパティとheightプロパティに0を指定しておけば尻尾の位置がずれることはないだろう。

これで左下に尻尾を出す吹き出しは作成できる。他の位置に尻尾を出す場合もborder-topプロパティやtopプロパティ・rightプロパティなども適切に利用してやるだけで可能で、HTMLコードを変更する必要はない。例えば中央上に尻尾を出す場合は以下のようなコードになる。

.bubble .tail {
  margin-left: -12px;
  border-right: 12px solid transparent; 
  border-bottom: 18px solid #66aa11;
  border-left: 12px solid transparent; 
  position: absolute;
  top: -18px;
  left: 50%;
  width: 0; 
  height: 0; 
}

上向きに三角を作る場合はborder-bottomプロパティで高さと色を指定する。中央に配置する場合はborder-rightプロパティとborder-leftプロパティを指定することによって二等辺三角形を作成することができるので、それを利用した方がバランスが良いだろう。左右の位置はとりあえず50%で真ん中に寄せて、margin-leftで負の値を指定することによってborder-left-sizeプロパティの値分左に戻してやるのが手っ取り早い。

ここまでが理解できたなら、その他の位置に尻尾を配置する方法はサンプルのソースを参照すれば大体わかると思う。

最後になったが、サンプルページの最後に載っているように:after(:before)擬似要素を利用すれば、空のdiv要素を用意しないでも尻尾を作成することができる。

.bubble .body:after {
  content: "";
  border-top: 18px solid #66aa11;
  border-right: 24px solid transparent; 
  position: absolute;
  bottom: -18px;
  left: 36px;
  width: 0; 
  height: 0; 
}

contentプロパティに空の値を指定するだけで、特に難しいことはない。Firefox 3やSafari 4、Opera 9、Internet Explorer 8なら問題なく動く。

この吹き出し作成テクニックを利用して、ヘッダのTwitterのアイコンにカーソルを合わせると最新のつぶやきが吹き出しでポップアップするようにした。rgba()カワイイ(関係ない)。

Vimのデフォルトのstatuslineは以下のようなもの。

これにファイルの種類や文字コード・改行コードなどあると便利な情報を追加した上で、ファイル名を先頭に持ってきて、残りのパスを%<を利用して省略させるようにすると、

こんな感じになる。このstatuslineのコードは、

set statusline=%{expand('%:p:t')}\ %<\(%{expand('%:p:h')}\)%=\ %m%r%y%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}[%3l,%3c]

というもので、しばらくこれを使っていた。悪くはないが、パスの先頭を省略するような書き方なのでドライブレターが見えなくなってしまいWindowsだとちょっとアレ。これをベースにFuzzyFinderから長いパスの中間を省略する関数をパクって最適化すると、

こうなる。ドライブレターも見えるし、ファイルのあるフォルダ名も大体見えるのでわかりやすい！

set statusline=%{expand('%:p:t')}\ %<\(%{SnipMid(expand('%:p:h'),80-len(expand('%:p:t')),'...')}\)%=\ %m%r%y%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}[%3l,%3c]

function! SnipMid(str, len, mask)
  if a:len >= len(a:str)
    return a:str
  elseif a:len <= len(a:mask)
    return a:mask
  endif

  let len_head = (a:len - len(a:mask)) / 2
  let len_tail = a:len - len(a:mask) - len_head

  return (len_head > 0 ? a:str[: len_head - 1] : '') . a:mask . (len_tail > 0 ? a:str[-len_tail :] : '')
endfunction

SnipMid()はFuzzyFinderからコピペしただけ(autoload/fuf.vimの505行目あたりにある)。切り詰める長さはSnipMid()の第二引数で指定する。ここでは、

80-len(expand("%:p:h"))

と80からファイル名を引いた数で切り詰めているが、ターミナルの横幅やcolumnsにあわせて要調節。set columns=120な環境だとこれくらいが丁度良かった。頑張れば環境に合わせてフレキシブルに切り詰める長さを調節できそうだけど面倒なので……。

titlestringに使っても良い。

set titlestring=%{expand('%:p:t')}%(\ %m%r%w%)\ %<\(%{SnipMid(expand('%:p:h'),80-len(expand('%:p:t')),'...')}\)\ -\ Vim

Vimはどうにかしようと思うと大抵はどうにかできて幸せ……。

HTMLファイルを:makeで文法チェック

tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。

autocmd FileType html :compiler tidy
autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\"

tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。

HTMLファイルのインデントをやり直す

gg=G

ノーマルモードではggでファイルの先頭に移動して=Gでファイル全体をインデントし直すことができる。選択範囲のみをインデントし直す場合は、適当にビジュアルモードで選択した状態で=を押すだけ。1000行とかあるHTMLファイルだと結構時間がかかる。デフォルトではJavaScriptファイルでやると残念な結果に……。

HTMLファイルをブラウザで開く(Windows)

FirefoxやSafari、Chromeは普通にインストールするとApp Pathsに登録されるので、

:! start chrome.exe %
:! start firefox.exe %
:! start IEXPLORE.EXE %
:! start Safari.exe %

でブラウザで開くことができる。! startと間に半角スペースがあることに注意。

OperaのインストーラはApp Pathsに登録しないので、

REGEDIT4

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\opera.exe]
@="C:\\Program Files\\Opera\\opera.exe"
"Path"="C:\\Program Files\\Opera"

といったレジストリファイルをインポートして登録してやると:! start opera.exe %で開くことができるようになる。

選択範囲を文字参照に変換

以下のPerlスクリプトをパスの通った場所に置いておく。

#!/usr/bin/perl

use strict;
use warnings;

use HTML::Entities;

print encode_entities(join('', <STDIN>), '&<>"\'');

その上でコマンドを作成。

command! -range EncodeEntities :'<,'>!perl -S encode-entities.pl

W3CDTFで日付と時刻の挿入

command! InsertDateTime :execute "normal! i".strftime("%Y-%m-%dT%H:%M:%S+09:00")

必要な人は少ないだろうけど。

CSSファイルを:makeで文法チェック

css.vimをダウンロードしてインストールする。

autocmd FileType css :compiler css

同梱のPerlスクリプト(validate_css)はパスの通ったディレクトリにコピーする必要がある。

JavaScriptファイルを:makeで文法チェック

JavaScript Lintをインストールし、javascriptlint.vimとして以下のファイルを$HOME/.vim/compiler (Windowsでは$HOME/vimfiles/compiler)以下に作成する。

if exists("current_compiler")
  finish
endif

let current_compiler = "javascriptlint"

if exists(":CompilerSet") != 2
  command -nargs=* CompilerSet setlocal <args>
endif

let s:cpo_save = &cpo
set cpo-=C

CompilerSet makeprg=jsl\ -nologo\ -nofilelisting\ -nosummary\ -nocontext\ -process\ %

CompilerSet errorformat=%f(%l):\ %m

let &cpo = s:cpo_save
unlet s:cpo_save

そして.vimrcに以下のように書く。

autocmd FileType javascript :compiler javascriptlint

JavaScriptファイルのインデントの改善

デフォルトのインデント・スクリプトはjQueryを利用してJavaScriptを書いているとかなり酷いことになる。

• foo(function () {の次の行のインデント
• foo({の次の行のインデント
• })でのアンインデント

あたりがメジャーなインデントがおかしくなる箇所で、「コード書くよりインデントの修正の方が大変！」というくらい(おおげさ)。

あれやこれやJavaScriptのインデント・スクリプトは見つかるが、Better Javascript Indentationが一番良かった。普通にインストールするだけで特に設定等は必要ない。

インストールすると以下のような典型的なPowered by jQueryのJavaScriptファイルがすんなりインデントされるようになる。気持ち良い！

$(function () {
  var num = 32;

  $("#monthly_archives > li").each(function (i, li) {
    if (i === num) {
      $(li).before($("<li/>").append($("<a/>").attr({
        href: "#archives-by-month"
      }).append("» more").click(function () {
        $(this).hide();
        $("#monthly_archives .folded").show();
      }))).addClass("folded").hide();
    } else if (i > num) {
      $(li).addClass("folded").hide();
    }
  });
});

気付いた範囲では、

var foo = {
  bar:
    function () {

と書いた時に、

• 次の行がインデントされない
• その後}で2段階アンインデントされてしまう

といったラベル絡みでの不具合があった。functionの前で改行しない場合は問題ないと思う(そう書けという意味ではない)。

また、これをインストールするとgg=Gによるインデントのやり直しも改善される(当たり前だけど)。ただし複数行コメント内の行頭の空白が消えてしまうので、

/*!
 * foobar
 * hogehoge
 */

といったYUI Compressor向けなコメントなどは、

/*!
* foobar
* hogehoge
*/

となってしまうので注意が必要。

他にはMarkdownやTextileなどでHTMLに変換するコマンドを作っておいていたりするくらい。あとはひたすらAutoComplPopでOmni補完！

ヘッダ

ロゴ・アイコンとナビをfloat: left;、検索フォームとTwitterとフィードのアイコンをfloat: right;。それぞれにborder-radiusを使って少し丸みをつけて、丸いロゴ・アイコンと並べてもあまり違和感が無いようにした。アクティブなナビはtext-shadowでエンボスっぽくしてみたんだけど、背景色の明るさがアレでうまくへこんでいるように見えない……。

最初、display: table-cell;で検索フォームの横幅をうまいこと可変にして、キレイにびっちり並べてやろうと思ったんだけど、頭がおかしくなりそうだったのでやめた。できないことは無いような気がするんだけどなぁ……。

ブラウザの横幅が狭い場合は検索フォームやTwitterやフィードのアイコンが適当に折り返されて下に落ちるので、大抵の環境で問題なく収まるような気がする。

フッタ

今まではCSS的にフッタの各カラムに一つづつしか並べられなかったのだけど、書き直して複数入れることもできるようにした。で、トップのフッタの内容や量を見直してこんな感じにした。Weblogのフッタは中身がちょっと違い、Weblogの過去ログのリストとかが入る。各カラムのヘッダに馬鹿の一つ覚えのようにtext-shadowを使ったりもしている。

Weblogのフッタでの月ごとアーカイブのリストが長すぎる(無意味に2002年のとかもあるので)ので、最初は折りたたんでおいて後で開くことができるようにした。jQueryだと簡単ですね！！１開けてもあんまり意味無い気もするのでカットしちゃっても良いかもなぁ。

ウェブサービスのアイコン付きリストはJavaScriptでゴニョゴニョして生成するようにした。faviconの取得はgetFaviconを利用させてもらった。なかなか軽いし、https越えもできるみたいで良い感じ。

メモ

border-radiusとtext-shadowのメモ。

border-size: 1px;でborder-radiusを適用

ブラウザによって見た目が結構変わる。過度のところが極度に薄くなったりとか。borderとborder-radiusの組み合わせる場合は2px以上にした方が良い気がする。

border-size * 2 = border-radius

border-sizeの倍のサイズをborder-radiusに指定すると、キレイな角丸枠線になる気がする。

text-shadowの文法

text-shadow: length length length color;
text-shadow: color length length length;

のどっちでも良い。lengthの順序は左右・上下・ぼかしで固定。

text-shadowでのエンボス

Appleが多用するアレ。

/* 暗い文字用 */
text-shadow: 0 1px 0 #ffffff;

/* 明るい文字 */
text-shadow: 0 -1px 0 #000000;

上下にのみ1pxずらすだけ。背景色(画像)によってはあまりエンボスっぽく見えない。太字にこれを適用すると間抜けになること多々……。「text-embossを作ってください！！１」とか言うと本当に作られそうな気がするので止めておく。

Firefox 3.6のRCでもでたらCSS gradientsを使って書き直そうと思う。

ロケーションバーや検索バーでIMEをオフにする

#urlbar input,
#FindToolbar input {
  ime-mode: inactive !important;
}

「g 検索語」などキーワード検索機能を多用する場合、IMEがオンだと悲しいことになるので設定。検索バーでもオフにするかどうかは好みで。

進むボタンを無効な時は隠す

#forward-button[disabled="true"] {
  display: none !important;
}

進むは戻るを使った時にしか有効にならないので、ほとんどの時間は無効。そのためにスペースを割くのはもったいないので無効なときは削除するとすっきり。そもそも戻るに比べて進むは使用頻度が低い(と思う)ので、完全に非表示でも良いかもしれない。

ロケーションバーのドロップダウンの高さを変更する

#PopupAutoCompleteRichResult {
  height: 514px !important;
}

デフォルトでは6件分の高さ(テーマ依存)。僕の環境では上記サイズで12件分表示されている(もちろんシステムのUIフォント設定などさまざまなものに依存するので12件分とは限らない)。各候補の高さが一様ではない(アイコンが表示されたりするとずれるっぽい)ので、丁度○○件分の高さにするとかは難しそう。またデフォルトではリストアップする最大数が12になっているので、about:configからbrowser.urlbar.maxRichResultsを変更するとより多くの候補が表示される(多くしすぎると重くなるので注意)。

残念ながら候補が少ない場合、ドロップダウンに空白ができてしまいものすごいかっこ悪い。これを解決する方法は今のところ見つかっていない……。

ロケーションバーでの絞り込みのハイライトを赤く

#PopupAutoCompleteRichResult span.ac-emphasize-text {
  color: #cc0000 !important;
  font-weight: normal !important;
}

デフォルトでは太字+下線で色は変わらない。見づらいというほどではないのだけど、色を変えたほうが見やすかった。赤文字はちょっと気持ち悪いかもしれないので、テーマに合わせて調節すると良いと思う。

#PopupAutoCompleteRichResult span.ac-emphasize-text {
  color: #000000 !important;
  background-color: #ff8000 !important;
}

というように背景を変更してもなかなか見やすい。

ブックマークツールバーをシンプルに

#bookmarksBarContent > .bookmark-item {
  padding: 3px 12px !important;
}

#bookmarksBarContent > .bookmark-item > .toolbarbutton-icon {
  display: none !important;
}

#bookmarksBarContent > .bookmark-item > .toolbarbutton-menu-dropmarker {
  display: -moz-box !important;
}

#bookmarksBarContent > .bookmark-item > .toolbarbutton-menu-dropmarker > .dropmarker-icon {
  display: -moz-box !important;
}

Safariっぽくアイコンを非表示にして、フォルダにはドロップダウンのマーカーをつける。.bookmark-itemのスタイルで-moz-border-radiusを使ったり、もっと細くなるように調節したりすればもっとSafariに近づけることができる……が、子要素の.bookmark-itemでスタイルを戻さないとならないので非常に面倒なことになるのでオススメしない。素直にMacOSX Themeなどをインストールした方が良い。

Google Chromeもこんな感じで簡単にUIカスタマイズできたら良いなぁ……。

そこらへんのサイトでXPIファイルにMIMEタイプとしてapplication/x-xpinstallを設定すると、アドオンの管理がそのサイトだけで完結し、アップロードした最新のXPIファイルを直ぐにユーザーにインストールしてもらえるようになったりする。そのためアドオン開発者的にはそこそこメリットがあると思う。ただ最近のAMOの急激なパワーアップによって、これらのメリットは薄れつつある。

一方で、ユーザーにそのそこらへんの得体の知れないサイトをアドオンのインストールを許可するサイトとして追加してもらう必要があるというデメリットがある。ユーザーにしてもらう操作自体は難しいものではないのだけど、Twitterでのアレと同じように多くの人はその危険性をほとんど意識せずに許可してしまうだろうと思うので、AMO等のMozilla直系サイト以外を追加させるというのは(ユーザー教育的に)よろしくない気がする。また、一時的に許可するというようなこともできないので、許可サイトへの追加はそのまま放置するかオプション設定から削除しなければならない。ドメイン・ジャックとかの可能性を考えると放置はしたくないので、許可する度に手作業で削除することになり、とても面倒……。

また、XPIファイルにMIMEタイプを設定していない場合、通常はダウンロード・ダイアログが開かれるわけだけど、そもそもそこで「Firefoxで開く」ようにすればアドオンがインストールできる。許可サイトへの追加が単なる確認に過ぎないことを考えると、これで良いのじゃないかと思う。アプリケーションを指定する操作が面倒なことやダウンロード・ダイアログそのものが非常に使いづらいことなど問題点はあるが、許可サイトへの追加というデメリットとの比較ならば許しても良いような手間だと思う。

許可サイトへの追加というリスクをユーザーに押し付けるデメリットをどう捉えるかにかかってくるわけだけど、AMOを利用するという前提ならば、それによって得られるものがあまり無いので指定しない方が多くの場合は無難ということになる。ブランディングのために自サイト内で完結させたいので、AMOを利用したくないとかそういう場合には採用の余地はあるかもしれないが、個人のサイトには関係ない話。

AMOを利用する場合、自身のサイトでのアドオン公開ページではAMOのアドオン公開ページへリンクを張るだけとなる。その時、

• AMOに移動する(外部サイトへ移動する)ことを明記する
• アドオン公開ページのURLからロケールを削除しておく
• レビュー待ちのバージョン等をインストールできるバージョン履歴のページへのリンクも併記する

などに気をつけると使いやすいページになると思う。

ロケールは削除しなくても良いかもしれないが、自分でruとかになっているリンクを踏むと一瞬びっくりすることを考えると、jaなリンクを踏んだ非日本語圏の人はもっとびっくりするだろうと思うので、なるべく削除しておいた方が良いと思う。アドオン公開ページのURLにロケールが含まれない場合はブラウザの優先する言語設定に従ってリダイレクトされるので、意図せずen-USに飛んでしまうとかそういう問題はない。

バージョン履歴のページはアドオン公開ページの下の方にリンクがひっそりとある。普通のユーザーはまず気づかない。古いバージョン以外にもエディタのレビュー待ちのバージョンも表示されるので、リンクを張っておくと便利。

ツールバー・ボタンの画像はテーマから引っ張るように(無理やり)作ったので、ビルトインのサイドバーで履歴やブックマークを開くツールバー・ボタンと同じ画像になると思う。でもなんかアレな感じなので書き直したい。ツールバーの各アイコンを参照できる簡単な仕組みが欲しい。ありそうなので探そう……。

次期メジャーバージョンのFirefoxでは「ホームタブ」というタブ上で履歴やブックマークを閲覧・管理する機能が付くとかいう話なので、それまでのつなぎっぽい感じになっちゃうかなぁ。何か機能をつける気がまったく無くなってしまった。という言い訳。

そういえば、AMOで公開するアドオンを正式リリースにする時に、アドオンの優位性とか動作確認の方法とか色々書かなくちゃならなくなったようで、ちょっとわずらわしかった。単に英語で書くのが面倒だっただけだけど(日本語でも良いのかな？)。登録されるアドオンのクオリティを確保するためなのか迅速なレビューを促進するためなのか、その両方なのか。敷居が高くなるほどではないと思うけど、フラストレーションの原因の一つにはなりそうな気がする。アドオンの新しいバージョンのファイルをアップロードする時に、アドオン・バリデータのテスト結果の表示がアニメーションなのとかもものすごくうっとおしい気がする……。

URLの細工はものすごく簡単なもので、元のURLが、

http://www.megaupload.com/?d=XXXXXXXX

なら、

http://www.megaupload.com/mgr_dl.php?d=XXXXXXXX

と変更するだけ。こう細工するとCAPTCHAの入力と待ち時間をまとめて飛ばしてダウンロードが始まる(ダウンロードのリンクをクリックする必要すらない)。かなり前からあったみたい。

MEGAUPLOADへのリンクを見つけたら書き換えるユーザースクリプトとかでも良いと思う。書くとしたらこんな感じ？

Array.forEach(document.getElementsByTagName("a"), function (a) {
  if (a.href.match(/^http:\/\/www\.megaupload\.com\/\?d=[a-zA-Z0-9]{8}$/)) {
    a.href = a.href.replace(/\/\?d=/, "/mgr_dl.php?d=");
  }
});

1週間くらい前に知って直ぐにユーザースクリプトを作ったのだけど、動いたり動かなかったりしてたり、今週はずっと腹痛だったりしたのでエントリにしてなかった。腹痛であまり食べられなくてずっと空腹だとなかなかすごい世界が見えることを知った。

ActivePerlのインストール後(必要なら再起動後)、コマンド プロンプトでcpanを実行すると、

C:\>cpan

It looks like you don't have a C compiler and make utility installed.  Trying
to install dmake and the MinGW gcc compiler using the Perl Package Manager.
This may take a a few minutes...

というメッセージが白地に赤で表示され、自動的にActiveStateのPPMリポジトリにPPMパッケージとして用意されているdmakeとMinGWのダウンロードとインストールが始まる。少し時間がかかるが特に何かする必要も無いのでじっと待つだけ。完了すると自動的にcpanシェルが開始され、すぐにCPANにあるPerlモジュールのインストールを行うことができる。

インストールされたdmake.exeやgcc.exe等はperl.exeと同じ場所ではなくC:\perl\site\binにある。デフォルトではActivePerlのインストール時にここにもPATHを通すことになるので、既存の開発環境とコンフリクトしてしまうこともある。その場合はPATHからC:\perl\site\binを削除し、cpan.batの3行目に以下を挿入すると良いかもしれない。

set PATH=%PATH%;C:\perl\site\bin

こうした場合はPPMやCPANでインストールしたモジュールに付属しているユーティリティ(Config::Pitのppitとか)にパスが通ってない状態になることは忘れずに。

CPANの使い心地はStrawberry Perl for Windowsと同じ(testでこけるのも同じ)。導入の簡単さもあまり変わらないと思うので好きな方を使えば良いと思う。PPMメインであまり困らないライトなPerlコーダーにはActivePerlでPPM+CPANの方が楽かもしれない。