vim-css3-syntax v0.18.0
13年ぶりに更新が入ったCSSモジュール仕様があった。ちょっとテンション上がったので、そこまでを反映させてvim-css3-syntaxプラグインのv0.18.0をリリースした。 13年ぶりに更新が入ったのは、CSS Generated Contentモジュールで、いわゆる擬似要素関連を扱うCSSモジュール仕様だ。昨今は気軽に::before擬似要素を使うことが多いが、あまり真っ当な使い方は見かけない。仕様からどんなことに使えるのか、また使うことを想定しているのかを斟酌できるはずなので、一読の価値はある。 contentプロパティーが通常の要素でも使えるようになった。例えばキーワードnoneを指定することができる。 .foo { content: none; } こうすると要素の内容が空であるようにレンダリングされる(ようにできる(かもしれない(らしい)))。まだ実装はなさそうだ。またur
Vimで小数を四捨五入して置換
渡されたSVGファイルを見たらpath要素のアンカーポイントの数字が小数点以下6桁くらいから30桁まで混在していて、無駄な感じがあった。SVGOでできるのでそれでやっても良かったが、まずは単純に小数を指定桁(3から5桁)で四捨五入したいだけなので他に何かされてしまう可能性があるツールはちょっと避けたい。ということでVimの置換でどうにかした。 コマンドとしては長いがやっていることは普通なので、後述の説明が理解できればソラで打てるんじゃないかと思う。 :%s@\d\+\.\d\+@\=round(str2float(submatch(0))*1000)/1000@g 例えば、 0.12345 12.34567 0.99999 56.78999 は、 0.123 12.346 1.0 56.79 と置換される。それぞれ切り捨て、切り上げ、切り上げて余分な0を削除、切り上げて余分な0を削除と置換
Vimmers 2
手が空いた時にやってた作業が一段落したので、ペライチというかHTMLとCSSとJavaScriptを普通に書きたくなった。ので、vim-jp.orgにあったVimユーザーの一覧ページのカラフルな奴を作った。カラフル。 オリジナルのVimmersが密度が高かったので、ゆとりを持ってそれぞれをカードっぽくなるようにした。この時点で既にコンセプトを誤解してて駄目な感じだった……。 フォントはLatoを使った。x-heightが高く、ディセンダが小さめで、開きが大きいので、余白の多いカード的なものにはおさまりが良い。ウェイトも豊富なので使いやすいけど、WindowsのChromeだと一部サイズでまだガタつきがあるかも。 カラーは当初Pantoneから幾つか選定してたんだけど、青と橙がFlat UI Colorsとほぼ同じものになってしまったので、こちらをそのまま利用させてもらうことにした。赤緑橙青
wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
マークアップをかなり変えた
思うところがあったのでマークアップを変更していた。「背景画像として表示されるべきではないものを背景画像として表示しているのは良くないのではないか？」みたいな夢を見た後、じゃあ「まず変えてみよう！」みたいな。なんか変だなと思ったらF5すれば直る(はず)。 ロゴをh1でマークアップしてたのをやめ、aまたはmarkとimg要素でマークアップするようにした 代わりにそれぞれのページにふさわしい見出しをちゃんと付けた でもその見出しをdisplay: noneしててひどい main要素さん、こんにちは！ h2で始まっていたコンテンツ部分の見出しレベルを一段階繰り上げた ロゴは見出しなのどうなのみたいなのは深く考えると眠れなくなるので、あんまり考えない方が良い。変えたのはロゴは画像で背景じゃないのでimg要素使うようにしたかったみたいなのがあって、ついでにページの見出しちゃんと書くかと考え、ロゴに見出
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
CSSでフォント・ファミリーのショートカットを作る
最近のブラウザーではlocal()を使ってフォント・ファミリーのショートカット(的なもの)を作ることができる。CSS Fontsモジュール仕様のsrcプロパティーの項にも思いっきり書いてあるんだけど、今まではそんなに必要なかったのであまり使われていない。5ウェイト展開なヒラギノ角ゴのiOS 7へのバンドルと、3ウェイト展開の游ファミリのWindowsへのバンドルにより必要性が少し増えた気がする。 特に游(ゴシック|明朝)はWindows 8.1とOS X 10.9でファミリ名が違う上、少し古いFirefoxでのアレとか、OS Xには細字がないとかもあるので、色々考慮するとfont-familyプロパティーではややこしいフォント指定を行う必要が出てくる。そうやって出来た長いリストのfont-familyは読みづらく、デバッグのしづらさにつながる。local()を使ってフォント名を作り直してや
PubSubHubbub v0.4でのLink HTTPヘッダー
PubSubHubbub Working Draftのv0.4が出た。某氏のブックマーク→MLを流し読んでPublisher側では何か作業する必要はないように読んでしまったけど、どうもatom:linkの代わりにLink HTTPヘッダーを使って購読先を探せるようにするようにということのようだ。JSONや画像を筆頭にあらゆるもののPub/Subもサポートするようにするためみたい。 The HTTP [RFC2616] response from the publisher MUST include at least one Link Header [RFC5988] with rel=hub (a hub link header) as well as exactly one Link Header [RFC5988] with rel=self (the self link header
vim-css3-syntax v0.8
HTML Standardのtemplate要素とmain要素が追加された変更はさっさと取り込んだ方が良さそうなので、追加してv0.8としてリリースした。 少し前にCSS Masking Level 1も追加したんだけど、その中ではHTMLの方で使われることになるmask要素が定義されてたりする。今後こういうのどうなるんだろう。template要素のようにHTML Standard (やHTML5.x)の方にいずれ取り込まれるのかな。よくわかんないのでとりあえず書いたもののコメントアウトしておいた。直接レンダリングされるような要素ではなく、構文強調が必要になるケースはまずない(せいぜいノーマライズやリセット系で使うくらい)ので、HTML Standardに取り込まれるまでこのまま様子見。 他は新しく別モジュールに切り分けられたCSS Shapes Module Level 1をこちらでも別
バドミントン
バドミントンをやった。10何年ぶりにやったような気がする。難しい。打つのはまだしも身長の低い相手へ打ちやすいように返すのが至難な気がする。というか何をどう考えたらああいうコントロールしづらいシャトルみたいなの思いついて、それで遊ぼうなんて考えたんだろう。狭い場所で遊ぶための工夫なのかな。 卓球とかもそうだけど見た目の割りにしんどい……。あと転んで数年ぶりに擦り傷みたいなの作った。ほ、ほら雨があがったすぐ後だったから……年とか運動不足じゃないよ。
git.cmdが削除された
Git for Windowsの1.7.11-preview20120704でgit.cmdが削除され、単純なラッパーとして機能するgit.exeに差し替えられた。バッチファイルで自動コミットとかスクリーンショットをGistに上げるスクリプトとかでgit.cmdにしていたためモロに影響を受けた……。 差し替えられた理由はコマンドラインやバッチファイルで^がエスケープに使われることから来る問題への対処の模様。このバージョンでは他にpreview-20120620でgit helpがうまく開けなくなったことへの修正が入ってたりするので、preview-20120620を使っている人はすぐに更新した方が良さそう。 インストーラーのアイコンが新アイコンに変わってて良い。
平成((角|丸)ゴシック|明朝)のWebフォント
Monotyope ImagingのやっているFonts.comのWebフォントサービスでは平成角ゴシック、平成丸ゴシック、平成明朝の三種がFreeプラン(ページビュー数の制限とバナー表示の義務あり)で使えるようだ。現在のデザインのWebサイトでは見つからないので、旧デザインのWebサイトの方で探す必要がある。 Demo: Heisei((Kaku|Maru)Gothic|Mincho) Test フォーマットはWOFF……と思いきやSafari 5にはTTFが(なんでだろう)。ブラウザーによって分けている模様。フォントはそのままではなくて動的にサブセッティングされる方式なので、転送サイズはそれほどでもない(上記デモではgzipされて17から35KB程)。ただ、この動的なサブセッティングで遅い。またFOUTを回避する方法がちょっとわからなかったので読み込み終わるまで真っ白……。 Heise
Vimカラースキーム: h2u_white
しばらく白背景を使おうと思っている。ターミナルとVimを白背景にするだけだけど。しっくりくるものがなかったので作った。未完成。補完メニューとメッセージ系あたりをもうちょっと何とかしたい。書き忘れてたけどgVim専用。 試した白(系)背景のカラースキームでは以下のものは良かった。けどなんかしっくり来なかった……。 hemisu mac_classic mayansmoke solarized tango tomorrow どれにも良い所と悪い所があるので実際に試すと良いと思う。 追記 pathogenでサクッと入れられるようにディレクトリ切っておいた。Gistでも普通にディレクトリを切れることを学んだ。Web上でリポジトリ作る時もファイル名にスラッシュがあるとディレクトリを切ってくれるらしい。Gistすごいな。 $ git clone git://gist.github.com/187578
Google Code Prettifyのローダースクリプトを書き直した
単にDOMContentLoadedでGoogle Code PrettifyのprettyPrint()を呼んでただけだったのをゴニョゴニョするようにした。将来性とマークアップのしやすさのためにpre要素にprettyprintというクラスを指定しないように方針変更したので、それに合わせてcode[class*=language-]な要素を探してその親がpreだったらprettyprintを追加し、その後でprettyPrint()を走らせるという感じ。一応サポートしている言語もチェックしたりとかもするようにした。Rainbow移行への布石。 同じブラウザーかつ同じバージョンならdocument.querySelectorAll()におけるセレクターとCSSにおけるセレクターは完全にサポート状況が同じとみなして良いのかわからない。頑張ってググりたい。 language-fooをクラスに持
Blosxom: monthviewプラグイン
月毎のビューの時にflavourをサクっと切り替えるmonthviewというBlosxomのプラグインを書いた。list_title_at_monthの汎用版みたいな感じ。 story.monthviewという名前でflavourを作って置いておくと、story.$default_flavourの代わりにそっちを使うというもので、例えばこのサイトのように月毎のビューではリスト表示にするとかできる。head.monthview等がない場合はデフォルトのflavourをそのまま使うのでローコスト。とは言うもののリストにする場合はul要素で括らなくてはならないので、多くの場合はhead.$default_flavourをコピーしてhead.monthviewを別に作らなくてはならない事になる。ただし$monthview::enabledという月毎のビューの時だけ1を返す変数を用意しておいたので、
Vimスクリプト用Google Code Prettifyの言語ハンドラー
重い腰を上げてGoogle Code PrettifyでVimスクリプトのコードを構文強調できるようにする言語ハンドラーを書いた。あんまり頑張らないので、コメントとクオート文字列、Expression evaluationにあるコマンドをキーワードとして強調くらい。 Demo: Test page for lang-vim.js 注意としてはendiとかfuとかコマンドの省略形がハイライトされないこと。あんまり追加する気はない。.vimrc向けにsetやautocmd、map系あたりは追加しても良いかも。 追記 set等の.vimrcでよく使われる設定向けのキーワードの追加と、コメントと引用符絡みでちょっとおかしかったところを直して、GitHubに作った言語ハンドラーのリポジトリに突っ込んだ。だいたいOKな気がする。
Vimのstatuslineを最適化する
FuzzyFinderのbufferモードやmrufileモードの補完メニューでパスの真ん中が省略されているのがわかりやすかったので、statuslineにも導入してよりわかりやすくしようという試み。インストール済みのGreasemonkeyスクリプトをちょっと編集する時など、ものすごく長いパスのファイルを編集する時のみ便利。 Vimのデフォルトのstatuslineは以下のようなもの。 これにファイルの種類や文字コード・改行コードなどあると便利な情報を追加した上で、ファイル名を先頭に持ってきて、残りのパスを%<を利用して省略させるようにすると、 こんな感じになる。このstatuslineのコードは、 set statusline=%{expand('%:p:t')}\ %<\(%{expand('%:p:h')}\)%=\ %m%r%y%w%{'['.(&fenc!=''?&fenc:&
たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net
僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim (やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さがもたらすアプローチの多様性なのではないかと考えるようになりました。というわけでそういう設定の自由さを最初に実感した話をVim Advent Calendar 2011の6日目のエントリーとして書かせてもらいます。 昨今のWebサイトではCMSなどを利用することが多く、共通のHTMLコードはテンプレートとして作成されます。その場合そのテンプレートの利用されるパスが様々な場所や階層になりうるので、例
JPTemplateのラッパーを書いた
Vimのスニペット系のプラグインとしてJPTemplateを愛用しているんですが、テンプレート名を忘れるとどうしようもないという結構致命的な欠点があります。僕はそれほど数多くのスニペットを使うわけではないのであまり気にしてなかったんですけど、template-vimの補完を見て「やっぱあると良いなー」と思ったので、ラッパー関数を書いてみました。 let g:jpTemplateKey = '<C-S-F12>' function! s:JPTemplateWrapper() let templdir_ft = g:jpTemplateDir.'/'.&ft let templdir_general = g:jpTemplateDir.'/general' let cword = matchstr(strpart(getline('.'), -1, col('.')), '[-0-9a-zA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RSS is plumbing.
