vim でスペースを   に変換するためのスクリプト

前回、

• クリボウのプログラミングひとりごと: vim で HTML タグを文字実体参照に変換するためのプラグイン「str2htmlentity.vim」

なんてのを書いたのだけれど、ブログに HTML コードを載せるときにもう一つ面倒なのがインデント（<pre> を使わず <div> にしているせいなんだけども）。スペース（空白）を &nbsp; に変換してくれるプラグインがないかな～？と探してみたものの見つけられなかったので、自分で書いてみた。

vmap <silent> sn :s/\%V /\&nbsp;/g<cr>:noh<cr>

.vimrc とか .gvimrc とかに追加しとくと、文字列選択して sn したときに、選択されている空白がすべて &nbsp; に変換される。インデントづけには、C-v 矩形選択からの sn がけっこう便利。

もっと便利なスクリプトがあるかもだけれど、これでまず用は足りたのでとりあえず公開しておくことにした。

vim で HTML タグを文字実体参照に変換するためのプラグイン「str2htmlentity.vim」

ブログの投稿（HTML）を gvim で編集しているときに面倒くさいのが、HTML ソースの文字実体参照への置換。< を &lt; に、> を &gt; に、とかそういうの。

で、見つけたのがこちら。

• vim で HTML文字実体参照の変換を行うスクリプト : Serendip - Webデザイン・プログラミング

v で文字列を選択して sx と入れると選択された部分の <、>、"、& をそれぞれ、&lt;、&gt;、&quot;、&amp; に変換してくれる。逆に、文字列選択して sr すると、それら文字実体参照から文字へと変換可能。

こういう、普段していることがちょっと楽になるというのがいいなあと。

JavaScript で、クリック時に文字列が選択されるテキストボックス

トラックバックの URL とか、コピーしてほしい情報があるときには、input 要素や textarea 要素をよくこんな風にしますよね。




従来の書き方

これってずっと

<input type="text" value="選択したい文字列" onfocus="this.select();" />

って書くとばかり思っていたんですが、どうやら違うみたいです。

というのは、上記のコードだと Google Chrome で文字列が選択されないから。Google Chrome の人は、次のテキストボックスで試してみてください。




Google Chrome に対応した書き方

それでは、最初に載せたテキストボックス（インプット要素）のように Google Chrome でも選択可能にするにはどうすればいいのかというと…。

<script type="text/javascript"><!--
  function selectTextboxContent(textbox) {
    setTimeout(function() {textbox.select();}, 0);
  }
//--></script>

と関数を定義しておいて

<input type="text" value="選択したい文字列" onfocus="selectTextboxContent(this);" />

っていう感じで使うといいみたいです。ぜひお試しください。
参考：

• html - problem with Chrome form handling: input onfocus="this.select()" - Stack Overflow

jQuery の場合

ちなみに、jQuery で振る舞いを指定したい場合には、次のサイトが参考になるかと思います。

• forked from: forked from: 入力欄を選択状態にさせる - jsdo.it - Share JavaScript, HTML5 and CSS

というか…（追記 2012-01-08）

最後に紹介した jsdo.it のデモを見る限り、

<input type="text" value="選択したい文字列" onclick="this.select();" />

だけでいい気がしてきました。簡単だし。

Vim に zen-coding 入れた

今年も何か新しいことを…、と一念発起して始めてみた Vim。ようやく独特の入力方法にも慣れてきて、とりあえず、HTML の編集で利用しているところ。

ブログの更新時は、ブログの HTML の雛形に実際に記事のコードを書き入れて、見栄えを確認しては編集、確認しては編集…ということをしているのだけれど、それを全部 Vim でできるようになったということ。

まあ、それはいいとして、HTML の補完用に autocomplpop.vim で <c-n> したり、surround.vim で ysst したり、とにかくいろいろプラグインを使ってみたけれど、最終的に zen-coding.vim に落ち着いた。

zen-coding の HTML のタグを CSS ライクなセレクタを使って入力できる機能がすばらしすぎるから。


（Zen Coding v0.5 from Sergey Chikuyonok on Vimeo）

それが Vim に移植されて登場した zen-code.vim。どんなことができるのかについては、移植者のページで。

• Big Sky :: zen-codingの殆どの機能をzencoding.vimに取り込んだ。

ダウンロードはこちらから。

• mattn/zencoding-vim - GitHub

最初、<c-z>, で動かない！と焦ったけれど、<c-y>, （コントロール押しながらy、コンマ）押したらちゃんと動いた。開発途中でコマンド変えたみたい。