wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
utm_xxxを削除してURLの分散をちょっとだけ防ぐ
utm_xxxを利用したユーザー追跡はまぁ便利ではあるのだけど、どうしてもURLの正規化に悪影響がある。設置したツイートボタンやブックマークボタンはこちら側で正規のURLを仕込んでどうにかすればいいのだけど、ブラウザーの拡張やブックマークレットにはどうしようもない。かといってリダイレクトでは訪問者にも管理者にもコストが高いので、replaceState()を使ってURLだけ書きかえるという話。 正規化する関数を発火させるタイミングの制御には色々アプローチがあると思うけど、素で書くといろいろ面倒そうなのでGoogle Analyticsのコードに混ぜることにした。 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXX-X']); _gaq.push(['_trackPageview']); _gaq.push(function
ブレークポイント
このWebサイトのスタイルではブレークポイントがレイアウト向けに3つ、フォント・サイズ向けに4つ設定されている。なんと7段変速！ なんでそうなってるのかとかそういう話を書きたくなったので書く。 レイアウト向け 主にデザインが格納できるのか、バランスはどうかみたいな理由でブレークポイントを設定している。Mobile Firstで書いているのはパフォーマンス的な問題なので、本当はもっと理由駆動でMedia Queriesを書きたい。em単位を使っているためユーザーのズームやフォント設定などは考慮される。だいたい標準は16pxであることは既知だけどそれに依存しないのでマイナーな標準を採用しているブラウザーとか大きめのフォント・サイズを愛用している人のブラウザーとかでもおかしくならない(可能性が高い)。 小さめのスクリーン On small screen グローバルなヘッダーとフッターがセンタリン
git logを見やすく
git log --graph --onelineをメインに使っていたんだけど、現在時刻に対する相対的な時刻とかコミッターの名前とか表示したくなったので色々いじってた。%C(white bold blue)とかでターミナルの色を参照して文字色と背景色を指定することができるということを理解するまでが長かった……。 上記スクリーンショットのようなgit logは以下のようなコマンドで実現できる。 $ git log --graph --pretty='format:%C(yellow)%h%Cblue%d%Creset %s %C(black bold)%an, %ar%Creset' %dで参照名(ブランチやタグ、リモートブランチ)を、%anでコミッターの名前を、%arでコミットの相対的な日付を表示するようにして、%Cで色を変えている。%Credと%Cblue、%Cgreen以外を使う場合は
ページめくりの矢印
定期的に発症する画像使いたくなくなる病のため、ページめくりの矢印を画像じゃなくしたいなといろいろ考えているんですけど、なかなか良い物ができません。ユニコードのArrowやDingbatsなどにはいわゆる矢印的なもの(→みたいなもの)はいくつもあるので、そういうのが良いのならそれで良いと思うんですけど、自分のイメージではあんまり矢印々々してないのが良いかなというのがあるので、それらはちょっと使いづらかったです。いろいろ作った中ではborderとtransformプロパティを使ったものがそこそこまともに見えるような気がしました。 Demo: Paging Arrow 最初のスクリーンショットはこのデモを各ブラウザで表示したもので、左からChrome 15・Safari 5.1.1・Firefox 7.0.1・Opera 11.52・Internet Explorer 9.0.3です。各ブラウザ
Hashbang(#!)なURLの恐怖
諸方面からお叱りの言葉しかいただけない#!なURLは様々な問題をはらんでいますが、来るべき未来(もうすぐですよ！)におけるメンテナンス性という問題についてAdactioで取り上げられていました。#!の表面的な凶悪さに思考停止していて、こういった本質的な問題についてはまったく考えていなかった気がします。 その問題というのは、#!なURLからHistory APIなどを利用してクリーンなURLに乗り換えよう(戻そう)としても、古い#!なURLを有効なままにするためにはサーバー側の何か(単純なリダイレクトやmod_rewriteなど)ではどうしようもないので、クライアント側での(JavaScriptを利用した)リダイレクトを提供する機能を提供し続けなければならないというメンテナンス性の悪さです。 この#!なURLのメンテナンス性の悪さという問題は、URLの#以降はクライアント側の扱いなので、クラ
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
ウェブサービスのアイコンを書いた
このサイトの右上にあるTwitterアイコンみたいなゆるいグラデ背景なアイコンをいくつか書いた。ここで使う予定だけどまだどう使うかぼんやりとしか考えてない。はてブのアイコンだけ書いてみたら楽しくなったので勢いで書いてしまった。画像にCC-BYとかだとかなり面倒だと思うので、パブリックドメインにしておいた。テカテカしたアイコンが好きではない人にオススメ！ Download: webservice-icons.zip 全て24x24のPNGファイルで、角丸の部分はアルファチャンネル付き。どちらかというと明るい背景向きな気がする。16x16のアイコンは結構難しいのに、24x24になると途端に難易度下がるような。 追記 Last.fmのアイコンだけ書き直して差し替えた。ちょっとベベル気味になってしまっていたのを、公式サイトのロゴと同じような感じにしただけ。
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 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でファイ
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
jQueryプラグイン: Highlight Search Terms
前回のエントリで取り上げたスクリプトをjQueryプラグイン化した。だけ。GitHubにリポジトリを作って公開しておいた。基本的にはこれでもう良いやとか思ってるんだけど、URLパターンはもうちょっと何とかならないかなとかは思ってる。あとマルチカラーなハイライトを実現できるようにはしたいかも。実装はhighlight-1とかクラス名を順に振っていくだけとか簡単そうなものになると思う(そこまで考えてるなら実装しろ)。 使い方は多くのjQueryプラグインと同じで、 $("body").highlightSearchTerms(); と検索語のハイライトを行いたい要素からつなげて使う。プラグイン側でインライン・スタイルを付加したりはしないので、デフォルトのem.highlightに対してスタイル指定をあらかじめしておく必要がある。 highlightSearchTerms()にはオプションとして
hail2u.net - Weblog - 圧縮フォルダを使わないようにするとエクスプローラがキビキビ動く
Windows XPの圧縮フォルダというほとんどの人が使っていないと思われる機能(私見)を解除したら、エクスプローラがキビキビ動くようになった気がする。というようなことを某所で言ったら、試した人が「すげぇかるくなった kyo++」とかインクリメントしてくれたので、エントリにしておこうとか。 圧縮フォルダ機能の解除の方法は、コマンド プロンプトで、 regsvr32 /u zipfldr.dll regsvr32 /u cabview.dll と、入力してやるだけ。多分再起動は必要ない。 これにより特にエクスプローラのツリー表示なんかが高速化する気がする。エクスプローラ以外ではファイラーっぽいので特に高速化する感じで、僕の環境ではACDSeeのツリー表示がとんでもなく高速化した。 また、デフォルトの検索機能が圧縮フォルダ内を探さなくなるため高速化し、いつまでたっても終わらないということは少な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
