Big Sky

先日、「はてなFizzBuzzグループ」に入って、さっそくvimのFizzBuzzを書いたのですが...

2010-03-04 - mattnの日記 - fizzbuzzグループ

for v in range(1,100)|ec v%15?v%3?v%5?v :"Buzz":"Fizz":"FizzBuzz"|endfo

http://fizzbuzz.g.hatena.ne.jp/mattn/20100304

数日後にid:tyruさんにgolfで抜かされた！

Vim script - id:tyruが毎日FizzBuzzを一生懸命書く日記 - fizzbuzzグループ

for i in range(1,100)|ec[[i,"Buzz"],["Fizz","FizzBuzz"]][i%3<1][i%5<1]|endfo

http://fizzbuzz.g.hatena.ne.jp/tyru/20100310

これはくやしい！


ということで、もっかいFizzBuzzにチャレンジ。
ただこのgolf度はちょっとやそっとじゃ抜けないだろうし、そのままやっても面白くないのでFizzBuzzやめてBrainfuckやってみた。
コードはこんな感じ。

続きを読む...

全国１億８千万人のzen-codingファンの皆様、如何お過ごしでしょうか。
先日の記事でzen-codingをpure vimscriptに移植した「zencoding.vim」をご紹介させて頂きました。
あの時は略語の展開(Expand Abbreviation)しか機能がなく物足りなかったかもしれません。まぁ殆どの移植品はExpand Abbreviationしか無いのですが。

zen-codingには他どんな機能があるかというと、実はまだ便利な機能があったりします。 オフィシャルのサイトによると

• Expand Abbreviation
• Wrap with Abbreviation
• Balance Tag Inward/Outward
• Go to Next/Previous Edit Point
• Update Image Size
• Merge Lines
• Remove Tag
• Split/Join Tag
• Toggle Comment

とあります。日本とだと以下のサイトが分かりやすいです。

Zen-Codingのショートカットをまとめてみました - EC studio デザインブログ

前回の記事ではZen-Codingの導入方法について解説しました。今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。

http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html

以前までのzencoding.vimが対応していたのは一番上のExpand Abbreviationだけです。
ここ数日、zencoding.vimのコードを弄りまくって、残りのあと少しで100移植出来る所まで来ました。

以下チュートリアル的なものを書いておきます。

Expand Abbreviation

まずは略語展開。もう皆さん知ってると思いますが

div>p#foo$*3>a{こんにちわ}

と書いて<c-z>,(コントロールとzを押してカンマ)をタイプすると

<div>
    <p id="foo1">
        <a href="">こんにちわ</a>
    </p>
    <p id="foo2">
        <a href="">こんにちわ</a>
    </p>
    <p id="foo3">
        <a href="">こんにちわ</a>
    </p>
</div>

と展開してくれる機能です。括弧によるグルーピングもサポートしています。

Wrap with Abbreviation

ラップを作成する略語展開です。

おはよう
こんにちわ
こんばんわ

とあるテキストをビジュアル選択して<c-z>,をタイプすると「Tag:」とタグを聞かれます。ここにラップするタグを記述します。

Tag: bq

とすると

<blockquote>
おはよう
こんにちわ
こんばんわ
</blockquote>

といった感じにラップしてくれます。また

Tag: ul>li*>a>span

とすると

<ul>
    <li>
        <a href=""><span>おはよう</span></a>
    </li>
    <li>
        <a href=""><span>こんにちわ</span></a>
    </li>
    <li>
        <a href=""><span>こんばんわ</span></a>
    </li>
</ul>

こんな感じになります。便利す。

Balance Tag Inward/Outward

タグの外側、内側を選択します。

<ul>
    <li>
        <a href=""><span>おはよう</span></a>
    </li>
    <li>
    _   <a href=""><span>こんにちわ</span></a>
    </li>
    <li>
        <a href=""><span>こんばんわ</span></a>
    </li>
</ul>

上記"_"の位置にカーソルがある状態で<c-z>dをタイプすると

<ul>
    <li>
        <a href=""><span>おはよう</span></a>
    </li>
    <li>
        <a href=""><span>こんにちわ</span></a>
    </li>
    <li>
        <a href=""><span>こんばんわ</span></a>
    </li>
</ul>

こんな感じに選択してくれます。もちろん<li>の前で実行すると<ul>全体が選択されます。なお、タグの内側で実行するとタグ自身が選択されます。
これとは逆にタグを含まないで中身のみを選択する場合には<c-z>Dをタイプします。

Go to Next/Previous Edit Point

編集位置へカーソルを移動します。<c-z>nで空の属性値や中身が空のタグ内側へジャンプします。逆向きは<c-z>Nです。

Update Image Size

IMGタグの画像サイズを更新します。

<img src="http://mattn.kaoriya.net/images/logo.png"/>

この様なIMGタグの上で<c-z>iをタイプするとwidth/heigth属性を埋めてくれます。ローカルのファイルだと絶対パスもしくは編集中のファイルからの相対パスが扱え、URLも対応しています。

<img src="http://mattn.kaoriya.net/images/logo.png" width="96" height="96" />

こんな感じです。ちなみにvimが不得意とする

<img id="foo" src="logo.png"/> <img src="github-logo.png" class="bar" />
<img src="http://mattn.kaoriya.net/images/logo.png"/>

この様な１行複数個のIMGタグでも正しく動作します。
この画像ファイルを扱う部分だけperl拡張を使いました。モジュールとしてはImage::Infoが入っていれば動くはずです。ちなみにこの機能さえ使わなければ、別にperl拡張が入っていなくても良いです。

Merge Lines

これはvimだけの機能で出来るので実装していません。ビジュアル選択してJですね。

Remove Tag

以下の様なHTMLで「cursor is here」の部分にカーソルがあった場合

<div class="foo">
    <a>cursor is here</a>
</div>

<c-z>kをタイプすると

<div class="foo">
    
</div>

となり、さらに<c-z>kをタイプすると

となる機能です。

Split/Join Tag

先ほどと同様のカーソル位置で

<div class="foo">
    <a>cursor is here</a>
</div>

<c-z>jをタイプすると

<div class="foo"/>

となります。なお、このdivタグの上で再度タイプすると今度は

<div class="foo">
</div>

と分割されます。

Toggle Comment

タグの上で<c-z>/をタイプするとそのタグ全体をコメントアウトしてくれます。

<blockquote>
    <a href="">aaa</a>  
</blockquote>

このHTMLのaの上でタイプすると

<blockquote>
    <!-- <a href="">aaa</a> -->  
</blockquote>

となり、aの前あたりでタイプすると

<!-- <blockquote>
    <a href="">aaa</a>  
</blockquote> -->

となります。

おまけ１

URLの上で<c-z>aをタイプするとHTMLを取得してきてアンカータグを作ってくれます。

http://www.google.com/

これが

<a href="http://www.google.com/">Google</a>

こうなります。

おまけ2

おまけ1とさほど変わりませんが... URLの上で<c-z>Aをタイプすると本文抽出して引用文を作ってくれます。

http://www.google.com/

これが

<blockquote class="quote">
    <a href="http://www.google.com/">Google</a><br />
    <p>広告掲載 - ビジネス ソリューション - Google について - Google.com in English&copy;2010 - プライバシー ...</p>
    <cite>http://www.google.com/</cite>
</blockquote>

こうなります。ほぼ俺様用！

100% zen-coding 互換まであと少しです。

mattn's zencoding-vim at master - GitHub

zen-coding for vim: http://code.google.com/p/zen-coding/

http://github.com/mattn/zencoding-vim

私も結構長くvimを使ってきましたが、実はsnippet系やsorround系のプラグインは殆ど使っていません。理由は入力の規則が多様すぎて覚えられないのと、それくらい手で入力出来るんじゃないか...と思っていたのが理由でもあります。
sorround.vimなんかは何度か常用をチャレンジしてみましたが、結局諦めました。
先日、zen-codingを見つけ、「へー便利そうだなぁ」と思ったと同時にこのくらいならvimscript(pure vimscript)だけで書けるな...と思ったので書いてみました。
と言ってもEmacsへの移植なんかと同様に「Expand Abbreviation」だけです。
正直言うとzen-codingのプロジェクトページにvimがラインナップされていなかったのがキッカケだったりもしますが...。ただ、後から知ったのですがsnipMateという物でzen-codingらしき事が出来るらしく、またsparkupというプラグイン(python拡張使用)でzen-codingと同等の事が出来るらしいのです。
しまった...とも思ったのですが残念ながらそれを知ったのが完成間近だったので、思いっきり後出しジャンケンになってしまいました。
でももったいなかったので紹介しておきます。

zen-codingとはHTML/CSSを入力するのに便利な機能で、どんな物かはこの辺を見てもらえると分かるかと思います。
以下、vim版の動作として紹介します。
キーバインドはzen-codingの移植先エディタによって異なります。

例えば、「よーしパパ、今日はHTML5書くぞ！」って時には

html:5_

"_"はカーソル位置(挿入モード)です。
までタイプして<c-z>,とタイプすると

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    _
</body>
</html>

こんな感じに展開されてママもご機嫌です。これだけだと単なるsnippet機能でしかありませんが、例えば「じゃぁ今度はid属性が"foo"のDIVにclass属性が連番でbar1,bar2,bar3ってなる様なアンカー作るぞ！」って時には

div#foo > a.bar$*3

とタイプして、おもむろに<c-z>,をタイプします。すると

<div id="foo">
    <a href="" class="bar1">_</a>
    <a href="" class="bar2"></a>
    <a href="" class="bar3"></a>
</div>

と展開されママもニコニコ、もう夫婦円満間違いなしです。
zen-codingとしてはほぼ完成してます。ただ上記で言った様にsparkupを見つけて悔しかったのでsparkupが採用している拡張記法もサポートしてみました。
たとえば

a[href=index.html]{Home}

こんなのが

<a href="index.html">Home</a>

この様に展開されたり

#header > ul > li < p{Footer}

こんなのが

<div id="header">
    <ul>
        <li>_</li>
    </ul>
    <p>Footer</p>
</div>

こんな風に展開されたりします。一応、現状sparkupと同様にzen-codingの上位互換でありながら、sparkupの拡張記法も使える様にしました。
更に変数 g:user_zen_settings を設定する事で自前の snippet や展開式を書く事が出来ます。
例えばperlであれば

let g:user_zen_settings = {
\  'perl' : {
\    'indentation' : '  ',
\    'aliases' : {
\      'req' : "require '|'"
\    },
\    'snippets' : {
\      'use' : "use strict\nuse warnings\n\n",
\      'w' : "warn \"|\";",
\    }
\  }
\}

こんな風にしておき
(perl専用のindentationの位置はperlの下です。)

w<c-z>,

と挿入モードでタイプすると

warn "_";

と展開されてメシウマウマです。


使っているvimでpython拡張が動かなかったり、夫婦仲がピンチって方、お一つどうでしょうか。

mattn's zencoding-vim at master - GitHub

zen-coding for vim: http://code.google.com/p/zen-coding/

http://github.com/mattn/zencoding-vim

これまでvimスクリプトをインストールするには、vim onlineでダウンロードして、書いてあるインストール手順に従って、時にはそのまま、時にはzipを解凍して.vim(windowsならvimfiles)に自前でコピーするのが一般的でした。おそらく自動化されている方もいるかもしれませんが、特有のスクリプト専用の更新ツールくらいかと思います。
Perlを知っている方ならばCPAN、rubyを知っている方ならばgemにあたる物がvimには無かったんです。
配布物が統一されていない為、無理だろうな...とも思ってました。
が、そこに登場したのがVimana(Vim script manager)です。

Vimana(3)             User Contributed Perl Documentation            Vimana(3)



NAME
       Vimana - Vim script manager.

DESCRIPTION
       Vimana is an easy to use system for searching , installing, and
       downloading vim script.

       Vimana provides a command-line interface such like "aptitude" programe
       on Debian linux, for you to search , download , install , upgrade
       scripts from <http://www.vim.org> (vimonline site).

       Vimana can install a vim script package to your vim runtime path
       automatically by inspecting the content of archive file or vim script.
       for example , if an archive file contains 'syntax','plugin','indent'
       directory , then these files should be installed to _______ directory.
       if it's a vim color scheme , then it should be put into ______________
       and prompt for setting the installed colorscheme as default.

       We plan to provide port files via git repository, vimrc customization
       and internationalization in future.

       ( In some modern Indian languages, vimXna or vimXn means "aircraft". )

       NOTE: Vimana only provides search,info,install commmands currently.

       * Getting started from Vimana::Manual.

c9s's Vimana at master - GitHub

Vimana is an easy to use system for searching , installing, and downloading vim script. Vimana provides a command-line interface such like aptitude programe on Debian linux, for you to search , download , install , upgrade scripts from http://www.vim.org (vimonline site).

http://github.com/c9s/Vimana

Vimanaはc9s(Cornelius)さんが作っているPerlスクリプトで、vimスクリプトの検索、情報表示、インストール、ダウンロード、削除が行えるツールです。vimスクリプトは拡張子がvimというだけで、一見そのスクリプトが単なるpluginなのか、はたまたsyntaxなのか、ftpluginなのか分かりません。さらに~/.vim以下の構造になっていればそのまま上書き出来るのですが、中にはvimスクリプトのみ配布されている物もあります。Vimanaはそれをパースして適当なフォルダにインストールしてくれます。
インストールは以下の様に行います。

# git clone git://github.com/c9s/Vimana
# cd Vimana
# perl Makefile.PL
# make
# make test
# make install

ご覧頂ければ分かる様にPerlで出来ています。これでvimanaコマンドがインストールされます。詳しい使い方は

# perldoc Vimana::Manual

を参照して下さい。簡単な使い方は以下の通りです。

# vimana update

まずインデックスを更新します。そして「gist」というキーワードで検索してみます。

# vimana search gist
regview.vim          - Interactively browse register contents
filetyperegisters    - Localize register contents based on filetype
stackreg             - Vz-like stackable registers
regredir.vim         - Vim plugin to redirect command output into a register
regreplop.vim        - operator to replace motion/visual with a register
registryedit         - Edit the win32 registry through vim.
clipbrd              - Clipboard and other register content editor.
fakeclip             - pseudo clipboard register for non-GUI version of Vim
destructive-paste    - Pastes the register, replacing text
tregisters           - List, edit, and run/execute registers/clipboards
operator-replace     - Operator to replace text with register content
gist.vim             - vimscript for gist
replacewithregister  - Replace text with the contents of a register.

サマリ一覧されて便利ですね。次に手前味噌ですが「gist.vim」をインストールしてみましょう。

# vimana install gist.vim
Plugin will be installed to vim runtime path: /home/mattn/.vim
Canonical name: gist.vim
Downloading from: http://www.vim.org/scripts/download_script.php?src_id=12283
Saving file to /tmp/vimana-imqqdp/gist.vim
Inspecting file content for script type.
Script type found: plugin.
Installing..
Copying /tmp/vimana-imqqdp/gist.vim to /home/mattn/.vim/plugin
Installation Done.

簡単すぎます。
ちなみにpluginフォルダ構成になっているスクリプトでも問題なくインストール出来ます。必要なくなったら

# vimana remove gist.vim

とすればアンインストールもやってくれます。
すばらしい... c9s++
こういうのが欲しかったんだと思いました。

実は今日、c9sさんからVimanaのcommit権を貰いました。もちろんWindowsにポーティングさせて頂きました。
メインブランチにはまだ入っていませんが、windowsブランチに入っています。興味のある方はぜひインストールしてみてください。

なおc9sさんは台湾の方です(英語は話せますが)。もしVimanaについて要望などあれば私が日本語窓口させて頂きます。