Chrome 20からviewportを制限または拡張できるOverride device metricsというオプションがデベロッパーツールについていたことを今さら知った。キモはどっちかって言うと自分の使っているマシンよりも高解像度な環境をFit windowオプションでなんとなくざっと確認できるとかそっちなのかも。2048x1536とかまぁアレでコレでソレですよね。20からなので2012-05-17現在の安定版にはまだない。
縦横サイズを入力する横に付いている⇄ボタンはデバイスの回転……というか縦横入れ替えのボタン。
もうひとつchrome://inspect/とか言うのが結構前からあったのも知った……。昔は右クリックからとかで簡単にできてたデベロッパーツールのインスペクトとかそういうのが簡単にアクセスできる。ああいうの覗くとちょっとだけFirefoxのDOM Inspectorを思い出して懐かしい。
Seamless iframeが気になってるけどぜんぜん調べてない。
自動補完に頼らないように頑張る度に挫折して、AutoComplPopに出戻っている(5回目)。AutoComplPopはデフォルトでSCSSには対応していないので、ここだけ頑張って補完を手動で起動してたけど、重い腰を上げてg:acp_behaviorに追加した。これでまた自動補完に頼る日々が続く。
let g:acp_behaviorKeywordCommand = "\<C-n>"
let g:acp_behavior = {
\ 'scss': [
\ {
\ 'command' : g:acp_behaviorKeywordCommand,
\ 'meets' : 'acp#meetsForKeyword',
\ 'repeat' : 0,
\ },
\ {
\ 'command' : "\<C-x>\<C-f>",
\ 'meets' : 'acp#meetsForFile',
\ 'repeat' : 1,
\ },
\ {
\ 'command' : "\<C-x>\<C-o>",
\ 'meets' : 'acp#meetsForCssOmni',
\ 'repeat' : 0,
\ },
\ ],
\ }
LESSやTASSにもまったく同じコードで対応できる。キーワードはあんまり対応する必要なさそうなので外しても良いと思う。ファイル名補完は@importで使いまくるので必須。
少し前にVimのハイライトグループに新しくCursorLineNrが追加された。名前の通りカーソル行の行番号のハイライトを行うためのグループ。あーそういえばなかったよなとか思った。デフォルトでは結構強烈(凶悪)なカラー指定がされているので、普通にCursorLineと合わせると良いと思う。パッチレベル479以降で使える。
CursorLineNrのguifgでNONEを指定してもLineNrのguifgと揃わない(Normalのguifgになる)ので、揃えたい場合は同じ色を別々に指定してやる必要がありそう。バグな気がするけど微妙なところ。目立つ色を前景色にとかbold表示とかひと通り試してみた感じでは、背景を変える程度に抑えておかないと邪魔そうだった。
h2u_*も更新しておいた。
コマンドプロンプトの既定値を白背景にしたらCkwでうまく文字が表示できなくなってしまった。Ckwの設定でもなんとかなる気配はあるんだけど、コマンドプロンプトの既定の16色の白と黒、灰色を上記スクリーンショットのように入れ替えてやってもちゃんと表示できるようになった。というメモ。
msys向けのMinTTY使うかーと思ったらmsysGitからターミナルに見えなくてページャー経由にならない問題はまだ解決されていなかった……。そろそろmingw-getでgit入れたいですよね！
しばらく白背景を使おうと思っている。ターミナルとVimを白背景にするだけだけど。しっくりくるものがなかったので作った。未完成。補完メニューとメッセージ系あたりをもうちょっと何とかしたい。書き忘れてたけどgVim専用。
試した白(系)背景のカラースキームでは以下のものは良かった。けどなんかしっくり来なかった……。
どれにも良い所と悪い所があるので実際に試すと良いと思う。
pathogenでサクッと入れられるようにディレクトリ切っておいた。Gistでも普通にディレクトリを切れることを学んだ。Web上でリポジトリ作る時もファイル名にスラッシュがあるとディレクトリを切ってくれるらしい。Gistすごいな。
$ git clone git://gist.github.com/187578.git
で、h2u_darkとかと一緒にインストールできる。VundleとかNeoBundleとかは使ってないので知らない。
いろんな言語でのスクリーンショットを撮った。サンプルコードはsolarizedのリポジトリにあるutils/test/以下を利用。
半ば冗談で作り始めたけど結構良い気もする。
Vimでシェルコマンドを実行して結果をバッファーに吐き出すClamというプラグインを使い始めた。"=レジスターを使う奴だとエスケープがめんどいこともあるのでプラグイン作ろうかなーと思って忘れてたけど見つかったのでこっち使う。
出力ウィンドウで<LocaLeader>rすると再実行されたり、<LocaLeader>pで出力ウィンドウの内容をまるごと別のコマンドに渡せたりする。それ以外は本当に実行して結果を吐くだけ。だけ。
手元のはオプションでウィンドウ開く場所を設定できるようにした。ただ勝手にオプション増やすのPull Requestしづらいのでちょっと寝かせておく。
Clamは@mattn_jpがTwitterに流してたusevimというVimのプラグイン等を紹介するWebサイトで見つけた。DailyJSやってる人がやってるみたい。
2012/03/22にFlexible Box LayoutとGrid Layoutの新しいWorking Draftが出たので、それに合わせてvim-css3-syntaxを更新した。というかGrid LayoutとGrid Positioningを混同してて、Layoutの方は追加してなかったので追加した。
Flexboxはまた結構な感じで変わっている。Flexbox専用の方向決定プロパティーであるflex-directionが追加されてたりとかは後方互換性がある変更なんでまだ良いんだけど、flex()関数が消えてflexプロパティーを使ってサイズを決定するアルゴリズムを定義するように大きな変更が加わってしまった。同じプロパティーや関数の変更ではないのでUAの実装では互換性を保つのは面倒じゃなさそうだけど……だけど！
Grid Layoutについては仕様読んだことなかったのでこれから読む。
合わせて読んではいけない: Flexbox、おもしろいですよ？
もう翻訳が役立たずに……。
Data URIネタを続ける。昨日書いたData URI変換スクリプトをコマンドラインとかエクスプローラーから送るでクリップボードにコピーして使うだけだとVimで面倒くさい。Vimでは<cfile>でカーソル下のファイル名を拾えるので、それを利用してファイルのパスからData URIに変換するようなスクリプトを書いて使うことにした。
" Convert a file under a cursor to Data URI
function! s:ConvertCFileToDataURI()
let cfile = expand('<cfile>')
call setreg('d', substitute(getline('.'), cfile, system('convert-to-data-uri.pl ' . cfile), ''))
normal! V"dp
endfunction
nnoremap <Leader>datauri :call <SID>ConvertCFileToDataURI()<Return>
system()で変換スクリプトを呼んでやって、その実行結果でファイル名を置換し、行をその置換結果で差し替えるという単純な仕組み。マッピングは良いの思いつかなくて長いので、好きなのに変えるか普通にコマンド作ると良いと思う。
command! DataURI :call <SID>ConvertCFileToDataURI()
CSSのurl()関数でまずは普通にファイルのパスで参照しておいて、表示を確認する。
.test {
background-image: url("../images/foo.svg");
}
大丈夫そうだったらファイルのパスにカーソルを持っていき<Leader>datauriで変換という感じで使う(使っている)。
.test {
background-image: url("data:image/svg+xml;base64,PD94bWwKdmVyc2lv...");
}
もちろんSassとかでも同じ。
レジスター汚すのがあんまよくない(と思う)けど、外部プログラムと連携しようとしたりする時はそういうもんだと諦めてる。なんかこういうののベストプラクティス的なものがあるのか調べたい気は少しだけあるんだけど、んーまーあんまりVimスクリプト覚えたくない……。
まっとうな手段というか正攻法だとInkscapeを使うわけだけど、公式Wikiのどっか(忘れた……)にも書いてあるようにWindowsだと一部フォントがリストに出てこない(少し前のバージョンで直ったバグの話ではない)。例えばWebdingsであるとか多くのDingbatフォントがコレに該当する。そういうフォントのグリフを使いたい場合はFontForgeでグリフをSVGとしてエクスポートするのが一番簡単だと思う。
これでグリフがSVGのパスになって保存されるのであとはInkscapeで調節するなり、エディタでガシガシいじるなりすれば良い。
Inkscapeで使えるフォントの場合は普通に入力してオブジェクトをパスへ(Object to Path)するだけ。サイズのこととかもあるのでDingbat系はFontForgeでエクスポートしてからInkscapeでインポートした方が良いかも。
Illustrator Elementsが欲しすぎる(前も言った)。
CSS Values and Units ModuleがLast Callになったので、合わせてvim-css3-syntaxを更新した。結構変わってた。vmがvminに変わってたのは知らなかったな。WebKitがvwあたりを実装したニュースは流し読みしてたのでちょっと不安になったけど、ちゃんとvminでの実装だった。ていうかそうじゃなかったらLast Callにならないか。
内部的な変更や新しいファイルの追加とかはないので普通に上書き更新やgit pullするだけ。
消えた単位はvmとfr、grで、grはcss3-grid.vimに移動させておいた。他にmin()とmax()という関数も消えている。あれば便利そうだけど、まあなくて良さそうではある。
追加されたのはvminの他はdpiとdpcm、dppxという解像度関連の単位。例にも書いてあるように主にMedia Queriesで使うんじゃないかと思う。時代を感じる。cycle()は単に僕が入れ忘れてただけ。