ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック");
}

@font-face {
  font-family: "MS PGothic";
  src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック");
}

日本語で書く必要があるので、userContent.cssの先頭に@charset "UTF-8";と書かれていることとuserContent.cssの文字コードがUTF-8であることは確認しておく。それぞれのsrcプロパティの最後にlocal("ＭＳ Ｐゴシック")も書いてあるのは一応念のため。これであらゆるウェブページでＭＳ Ｐゴシックがメイリオで表示されるようになる。

srcで指定するフォントは複数のフォントを混ぜ合わせることもできる。例えば、

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("Calibri"), local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック");
}

とするとＭＳ Ｐゴシックが英字部分はCalibriで日本語部分はメイリオで表示されるようになる(ちょっと正確ではないけど)。

ＭＳ ゴシックには良い代替フォントはあまりないが、やるならUmePlusやUmePlus CLとかが良いと思う。

@font-face {
  font-family: "ＭＳ ゴシック";
  src: local("UmePlus Gothic"), local("ＭＳ ゴシック");
}

@font-face {
  font-family: "MS Gothic";
  src: local("UmePlus Gothic"), local("ＭＳ ゴシック");
}

また、Windows 7(やメイリオのアップデータをインストールしたWindows Vista)では、

@font-face {
  font-family: "MS UI Gothic";
  src: local("Meiryo UI"), local("MS UI Gothic");
}

こんな風に書いておくとMS UI GothicがMeiryo UIに置換される。ClearType大好きっ子にオススメ。

ローカル・フォントの置換の欠点は置換するフォントをまったく利用することができなくなることとそれらのフォントを前提にデザインされたウェブページでデザインやレイアウト崩れてしまうかもしれないこと。特にＭＳ Ｐゴシックをメイリオに置換する場合は、フォントの横幅がかなり広くなってしまうのでよくレイアウトが崩れることになると思う。

デメリットは少なからずあるが、解像度の向上した現在ではClearType(やアンチエイリアス)の効いた大きめのフォントでウェブページを閲覧する方が快適と感じる人が多いと思うので、設定して損はないと思う。

ユーザー・スタイルシート

ヘッダの色などを排除するのがメイン。userContent.cssに以下のCSSを追加する。

/* livedoor Reader
----------------------------- */
@-moz-document domain("reader.livedoor.com") {
  * {
    font-family: "Lucida Grande", "Trebuchet MS", sans-serif !important;
  }

  pre, code, kbd, samp, var {
    font-family: "Monaco", "Andale Mono", monospace !important;
  } 

  .body img {
    max-width: 100% !important;
  }

  .channel {
    background-color: #ffffff !important;
  }

  .channel a {
    color: #000000 !important;
  }

  .title {
    font-size: 30px !important;
  }

  .channel_toolbar {
    padding-bottom: 1em !important;
    border-bottom: 1px solid #000000 !important;
    background-color: #ffffff !important;
  }

  .item {
    border-bottom: 1px solid #000000 !important;
  }

  .even {
    background-color: #ffffff !important;
  }

  .hilight {
    background-color: #ffffff !important;
  }

  .item_title {
    font-size: 18px !important;
  }

  .adsWrapper {
    margin: 0 !important;
  }
}

ldR側の設定で「本文の文字サイズ」を15pxにしておくとバランスが良い。display: none;とかはしていないので他のなんかと衝突して困るとかは無いと思う。広告消しとかは自分でどうぞ。あとフォント指定も好きに変えると良いと思う。

ユーザー・スクリプト

ldR: Auto fullscreen

livedoor Readerを自動的にフルスクリーンにする

ldR: Show first feed

livedoor Readerにアクセスした時に最初のフィードを自動的に開く

ldR: Go prev/next feed with wheel

livedoor Readerでホイール・スクロールし切ると自動的に前後のフィードに移動する

一つ目のユーザー・スクリプトで自動的にフルスクリーン、つまり記事表示部分のみにする。他の二つは操作系のものなので、自分好みにカスタマイズしている人は入れる必要は無い。このままだと設定とかにアクセスできないが、ldRにはショートカットキーがあるので、必要な時はzでサイドバー、Shift+zでトップのナビゲーションを表示できる。

以上でFirefoxではいける。PrismとGreasemonkey for Prismを組み合わせればアプリケーション化も可能。だがスタンドアローン版のPrismの場合は起動に時間がかかり実用的ではなく、Firefoxの拡張版のPrismの場合はブラウザを起動済みなら起動速度に問題はなくなるが、それならタブで開けば良い話。

そこでGoogle Chromeに頑張ってもらう。2009-11-20現在の最新安定版のChromeではユーザー・スクリプトをサポートしているので、Chrome向けにカスタマイズしたユーザー・スクリプトをインストールし、以下のようなショートカットを作成すればさくっと起動するSimpldRの出来上がり。ユーザー・スクリプトのインストールは続・先取り！ Google Chrome Extensions：第2回　User ScriptsとContent Scriptsの「導入」が一番わかりやすい。

今のChromeでは残念ながらユーザー・スタイルシートはサポートされていない感じ(僕が知らないだけかも)なので、ユーザー・スクリプト内で強引にスタイルを設定してやっている(あって良かったGM_addStyle())。スクリーンショットはChrome 3でのものだがChrome 4 betaでも動作する。

アプリケーションのショートカットの作成は、とりあえず普通にChromeでldRを開いてページ メニューからアプリケーションのショートカットを作成を実行し、デスクトップ等に作られたショートカットのプロパティを開き、スクリーンショットのように

...\chrome.exe" --enable-user-scripts --app=http://reader.livedoor.com/reader/

と--enable-user-scriptsを追加してやれば良い。Chromiumとかの話はよく知らないけど似たような感じでできるらしい。

Chromeのユーザー・スクリプトは書き方わかりづらい……。古い情報と新しい情報が混ざってるので混乱する。

単にgVimでコミット・メッセージを書くファイルを開くだけなら以下のように書けば良い(gvimはパスの通ったところにあるとする)。

git config --global core.editor gvim

これを元に既に起動しているgVimの新しいタブで開こうと以下のようなオプションを指定してもうまくいかない。

git config --global core.editor "gvim --remote-tab-silent"

コミット・メッセージを書くファイルをタブで開くこと自体は行えるが、その編集を待ってくれない(すぐにAborting commit due to empty message.と怒られる)ので意味が無い。

git config --global core.editor "gvim --remote-tab-wait-silent"

これが正解。

なんかどっかに書いたような気がしてきた……。Twitterかなぁ……。

#!/usr/bin/perl

# Author:   Kyo Nagashima , http://hail2u.net/
#           xaicron, http://blog.livedoor.jp/xaicron/
# License:  MIT license (http://opensource.org/licenses/mit-license.php)
# Modified: 2009-11-17T23:09:27+09:00

use strict;
use warnings;

# CSS2.1
my @property_order = qw(
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-bottom
border-right
border-left
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
display
position
top
right
bottom
left
float
clear
z-index
direction
unicode-bidi
width
min-width
max-width
height
min-height
max-height
line-height
vertical-align
overflow
clip
visibility
content
quotes
counter-reset
counter-increment
list-style
list-style-type
list-style-image
list-style-position
page-break-before
page-break-after
page-break-inside
orphans
widows
color
background
background-color
background-image
background-repeat
background-attachment
background-position
font
font-family
font-style
font-variant
font-weight
font-size
text-indent
text-align
text-decoration
text-shadow
letter-spacing
word-spacing
text-transform
white-space
caption-side
table-layout
border-collapse
border-spacing
empty-cells
cursor
outline
outline-width
outline-style
outline-color
volume
speak
pause-before
pause-after
pause
cue-before
cue-after
cue
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-numeral
speak-header
);

# CSS3 and vendor extension for CSS3 
push @property_order, qw(
background-clip
-moz-background-clip
-webkit-background-clip
background-origin
-moz-background-origin
-webkit-background-origin
background-size
-moz-background-size
-webkit-background-size
-o-background-size
border-radius
-moz-border-radius
-webkit-border-radius
border-top-right-radius
-moz-border-radius-topright
-moz-border-top-right-radius
border-bottom-right-radius
-moz-border-radius-bottomright
-moz-border-bottom-right-radius
border-bottom-left-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius
border-top-left-radius
-moz-border-radius-topleft
-moz-border-top-left-radius
border-image
-moz-border-image
-webkit-border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
box-break
box-shadow
-moz-box-shadow
-webkit-box-shadow
appearance
-moz-appearance
-webkit-appearance
icon
box-sizing
-moz-box-sizing
-webkit-box-sizing
outline-offset
resize
nav-index
overflow-x
-ms-overflow-x
overflow-y
-ms-overflow-y
overflow-style
-webkit-marquee
marquee-style
-webkit-marquee-style
marquee-loop
marquee-direction
-webkit-marquee-direction
marquee-speed
-webkit-marquee-speed
rotation
rotation-point
opacity
font-stretch
font-size-adjust
src
unicode-range
string-set
border-length
hyphens
hyphenate-resource
hyphenate-before
hyphenate-after
hyphenate-lines
hyphenate-character
text-replace
image-resolution
float-offset
marks
bookmark-level
bookmark-label
bookmark-target
target
target-name
target-new
target-position
text-height
line-stacking
line-stacking-strategy
line-stacking-ruby
line-stacking-shift
dominate-baseline
alignment-baseline
alignment-adjust
baseline-shift
inline-box-align
drop-initial-value
drop-initial-size
drop-initial-after-align
drop-initial-after-adjust
drop-initial-before-align
drop-initial-before-adjust
columns
-webkit-columns
column-width
-moz-column-width
-webkit-column-width
column-count
-moz-column-count
-webkit-column-count
column-gap
-moz-column-gap
-webkit-column-gap
column-rule
-moz-column-rule
-webkit-column-rule
column-rule-color
-moz-column-rule-color
-webkit-column-rule-color
column-rule-style
-moz-column-rule-style
-webkit-column-rule-style
column-rule-width
-moz-column-rule-width
-webkit-column-rule-width
column-span
column-fill
size
page
image-orientation
fit
fit-position
presentation-level
ruby-position
ruby-align
ruby-overhang
ruby-span
grid-columns
grid-rows
voice-volume
voice-balance
rest
rest-before
rest-after
mark
mark-before
mark-after
voice-rate
voice-pitch
voice-pitch-range
voice-stress
voice-duration
phonemes
white-space-collapse
word-break
-ms-word-break
text-wrap
word-wrap
-ms-word-wrap
text-align-last
-ms-text-align-last
text-justify
-ms-text-justify
punctuation-trim
text-emphasis
text-shadow
text-outline
text-indent
hanging-punctuation
box-orient
-moz-box-orient
-webkit-box-orient
box-direction
-moz-box-direction
-webkit-box-direction
box-original-group
-moz-box-ordinal-group
-webkit-box-ordinal-group
box-align
-moz-box-align
-webkit-box-align
box-flex
-moz-box-flex
-webkit-box-flex
box-flex-group
-moz-box-flexgroup
-webkit-box-flex-group
box-pack
-moz-box-pack
-webkit-box-pack
box-lines
-webkit-box-lines
transform
-moz-transform
-webkit-transform
transform-origin
-moz-transform-origin
-webkit-transform-origin
transform-style
-webkit-transform-style
perspective
-webkit-perspective
perspective-origin
-webkit-perspective-origin
backface-visibility
-webkit-backface-visibility
transition
-webkit-transition
transition-property
-webkit-transition-property
transition-duration
-webkit-transition-duration
transition-timing-function
-webkit-transition-timing-function
transition-delay
-webkit-transition-delay
animation
-webkit-animation
animation-name
-webkit-animation-name
animation-duration
-webkit-animation-duration
animation-timing-function
-webkit-animation-timing-function
animation-iteration-count
-webkit-animation-iteration-count
animation-direction
-webkit-animation-direction
animation-play-state
-webkit-animation-play-state
animation-delay
-webkit-animation-delay
);

# Vendor extension
push @property_order, qw(
-moz-background-inline-policy
-moz-binding
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-border-end
-moz-border-end-color
-moz-border-end-style
-moz-border-end-width
-moz-border-start
-moz-border-start-color
-moz-border-start-style
-moz-border-start-width
-moz-float-edge
-moz-force-broken-image-icon
-moz-image-region
-moz-margin-end
-moz-margin-start
-webkit-margin-start
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-padding-end
-moz-padding-start
-webkit-padding-start
-moz-stack-sizing
-moz-user-focus
-moz-user-input
-moz-user-modify
-webkit-user-modify
-moz-user-select
-webkit-user-select
-moz-window-shadow
-webkit-background-composite
-webkit-border-horizontal-spacing
-webkit-border-vertical-spacing
-webkit-box-reflect
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-dashboard-region
-webkit-line-break
-webkit-margin-bottom-collapse
-webkit-margin-collapse
-webkit-margin-top-collapse
-webkit-marquee-increment
-webkit-marquee-repetition
-webkit-mask
-webkit-mask-attachment
-webkit-mask-box-image
-webkit-mask-clip
-webkit-mask-composite
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat
-webkit-mask-size
-webkit-nbsp-mode
-webkit-rtl-ordering
-webkit-tap-highlight-color
-webkit-text-fill-color
-webkit-text-security
-webkit-text-size-adjust
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-touch-callout
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-webkit-user-drag
-o-table-baseline
-ms-background-position-x
-ms-background-position-y
-ms-filter
-ms-ime-mode
-ms-layout-flow
-ms-layout-grid
-ms-layout-grid-char
-ms-layout-grid-line
-ms-layout-grid-mode
-ms-layout-grid-type
-ms-text-autospace
-ms-text-kashida-space
-ms-text-overflow
-ms-text-underline-position
-ms-writing-mode
-ms-interpolation-mode
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-zoom
);

# Other CSS extensions (without vendor prefix)
push @property_order, qw(
image-rendering
ime-mode
pointer-events
text-rendering
);

# Create hash: key => property, value => index
# See also: http://blog.livedoor.jp/xaicron/archives/50913074.html
my %property = do {
  my $i = 0;
  map { $_ => $i++ } @property_order;
};

my $css = join "", ;
$css =~ s/{(.*?)}/"{".sort_properties($1)."}"/imgse;

print $css;

sub sort_properties {
  # Remove leading line-breaks
  (my $rules = shift) =~ s/^\n+//;

  # Orcish Maneuver
  # my %temp;
  # my @sorted_rules = sort {
  #   ($temp{$a} ||= check_order($a)) <=> ($temp{$b} ||= check_order($b))
  # } split "\n", $rules;

  # Schwartzian Transform
  # See also: http://gist.github.com/236860
  my @sorted_rules
    = map  { $_->[0] }
      sort { $a->[1] <=> $b->[1] }
      map  { [ $_, check_order($_) ] }
      split "\n", $rules;

  return "\n" . join("\n", @sorted_rules) . "\n";
}

sub check_order {
  my $line = shift;
  my $order = 10000;

  if ($line =~ /^\s*(.+?)\s*:/) {
    if (defined $property{$1}) {
      $order = $property{$1};
    }
  # } else {
  #   warn "Unknown property: $1";
  }

  return $order;
}

安定のCSS2.1のプロパティが優先的に上になる。それに続いてCSS3の草案にあるプロパティがCSS Modulesの順に並ぶ。各ブラウザの独自拡張でCSS3の草案にそれに対応するものがある場合(border-radiusと-moz-border-radiusや-webkit-border-radiusなど)はその対応するものに続けて並べるようにした。それらに続いてプリフィックスのある各ブラウザの独自拡張プロパティ。一番下に来るのはプリフィックスの無い独自拡張プロパティでime-mode等がこれに当る。

まとめると「CSS2.1 > CSS3 > 独自拡張 > プリフィックスの無い独自拡張」という順序で並ぶことになり、具体的には以下のように並ぶ。

div#header ul#navigation li a {
  /* CSS2.1 */
  margin-left: 6px;
  padding: 0 6px;
  display: block;
  width: auto;
  height: 24px;
  line-height: 24px;
  color: #c9c6c0;
  background-image: url("../images/bg-navigation.png");
  background-repeat: repeat-x;
  /* CSS3 */
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  /* Vendor extension */
  -moz-margin-start: 6px;
  /* Vendor extension (without prefix) */
  ime-mode: auto;
}

スクリプトではそれぞれを分けて順にpushしているので新規追加や修正はそれほど大変でもない(と思う)。

CSSのプロパティについては以下を参考にした。

• Web標準
  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  • CSS Modulesから辿ることのできる各モジュールごとのページ
• Firefox (Mozilla)
  • Mozilla CSS 拡張仕様 - MDC (廃止マークが付いているものは除外)
• Safari (WebKit)
  • /trunk/WebCore/css/CSSPropertyNames.in – WebKit
  • Mac Dev Center: Safari CSS Reference: Supported CSS Properties
• Opera (Presto)
  • Opera: CSS Properties support in Opera Presto 2.3
• Internet Explorer (Trident)
  • CSS Attributes: Index

「プロパティの位置がおかしい！」とか「プロパティに抜けがある！」とか「プロパティがかぶっている！」とかは報告してくれるとありがたい。

Vimでこのスクリプトを利用する場合は、パスの通ったところにsortcss.plという名前で保存し、セレクタ全体もしくはファイル全体を選択して、

!sortcss.pl

とすれば良い。セレクタ全体を選択(正確には中括弧の間を中括弧を含めて選択)するにはビジュアル・モードでのa}を使えば良いので、以下のようなキーバインドとコマンドを用意しておくと便利。

nmap gso va}:SortCSS<CR>
vmap gso a}:SortCSS<CR>

" Sort CSS properties
" :SortCSS
command! -range=% SortCSS :<line1>,<line2>!perl -S sortcss.pl

これでgsoでソートできる他、:SortCSSでもソートできる(-range=%なので選択していない場合はファイル全体を処理する)。CSSファイル以外ではアクティブにする必要が無いので、$MYVIMRCではなく$HOME/.vim/ftplugin/css.vim (Windowsなら$HOME\vimfiles\ftplugin\css.vim)とかに書いた方が良いかも。

プロパティの羅列部分だけを切り出せばCSS用の辞書に早変わり！

追記@2009-11-16T15:31:03+09:00

xaicronさんに添削してもらった。なるほどなーということでコピペして更新。

追記@2009-11-16T18:28:19+09:00

重複していたspeak-headerの削除(kitsさんのはてブコメントより)とempty-cellsとcursorの位置が逆だったのを修正した。

追記@2009-11-17T23:15:06+09:00

xaicronさんからdefined抜けの修正(marginで場合によってはおかしくなることがあった)とシュワルツ変換を噛ませて高速化したものをフィードバックしてもらったので、手元で加えていた未知のプロパティを最後に回す修正とマージして変数名をちょっと変え更新。warnでの未知のプロパティの警告はあったほうが良いのだけど、Vimと一部のシェルの組み合わせでは標準エラー出力もリダイレクトするように(デフォルトでは)なっているのでコメントアウトしておいた。

Download: rgb()/rgba()に対応したCSS color preview

インストールは$HOME/.vim/after/ftplugin(Windowsでは$HOME/vimfiles/after/ftplugin)にcss.vimとしてコピーするだけ。インストールしてCSSファイルを開くと、

というように背景色でインライン・プレビューされる。プレビューの通りrgba()の透明度は反映されない。matchlist()で書こうとしたのだけどよくわからなかったのでeval()で書いた……。

元のスクリプトでset ut=100とかなっていたところがちょっと気になったので削除して、autocmd InsertLeaveで更新するようにした。改行の時とか;を入力した時にも更新できるともっと良いような気もするけど書き方わからない……。ついでにautocmdもグルーピングして*.cssに対してのみ行うようにした。rgb()対応以外の変更点はこれだけ。カーソル行の強調表示が有効な時に場合によっては文字が見づらくなる不具合も直したかったのだけど、うまい方法を思いつかなかった。

最近、

set guifont=DejaVu_Sans_Mono:h12:w6

でgVimを使っているのだけどなかなか良い。上のプレビュー画像もこれ。デフォルトでは幅広すぎてちょっとかっこ悪い感じだけどw6にするとスマート。

とりあえず設定から。

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ばっか使ってる……。

追記@2009-11-10T12:48:31+09:00

上位ディレクトリの参照はセミコロンを使えばできるということを教えてもらった。なのでpathオプションの設定は、

autocmd FileType html :setlocal path+=;/

というシンプルなものでもいける。こっちの方が誤爆も無さそうだし良さそう。

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を使って書き直そうと思う。