emmet-vimの使い方 | Memo on the Webemmet-vimとは emmet-vimとは, HTMLやCSSの構造を簡略化して書き, それを展開することでコードを書けるというプラグインです. うまく使うことができれば, 高速かつ楽にコーディングできるようになると思います. emmet-vimのインストール NeoBundleを使ってのインストールについてです. .vimrcに以下の一文を追加し, 保存します.
Goodbye, Zen Coding. Hello, Emmet! — Smashing Magazine
Zen Coding is a revolutionary plugin that has helped many developers through the years and has now reached a new level: Emmet. The most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer. Emmet, previously known as Zen Coding, is the most productive and time-sav
Big Sky :: zencoding-vim に新しいフィルタを追加した。
以前から、CSVを一気にtableに出来たらいいなーと思ってたので実装してみた。 例えば以下の様なカンマ区切りのデータ行をビジュアル選択して tokuhirom, geek, perl kazuho, geek, jsx hasegawayosuke, xss, javascript <c-y>, をタイプし、以下のクエリを入れる | はフィルタを開始する識別で、/というフィルタに続いて,\s*という分割する為の正規表現パラメータを渡す。フィルタは元々カンマで複数指定が可能なので、\,という風に誤爆しないようにエスケープしてる。 Tag: table>tr*>td|/\,\s* するとこうなる。 <table> <tr> <td>tokuhirom</td> <td>geek</td> <td>perl</td> </tr> <tr> <td>kazuho</td> <td>geek</t
Zen-Coding、0.7のすすめ
Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。 使いこなしてコーディング速度が3倍になっていますか？ SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。 エディタのサポートは、3つの分類に分かれます。 公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E
Big Sky :: 最近の zencoding.vim
最近 zencoding.vim を大きく修正しました。とは言ってもこれまで単体テストを作ってきた事もあって、過去の動作を(なるべく)壊さずに大規模な修正が行えました。 これまでは一つのファイルに html, css, haml の処理が全て記述されていたのでとてもスパゲッティなコードになっていて、もう少し放っておくとカオスな状態になりかけていたので、ファイルを分割しインタフェースを揃える事にしました。 これにより、今後新しいフォーマットに対応する際にも、zencoding/lang にあるファイルの真似をして記述すれば実装出来る様になります。 haml に対応した 「えっ？前から対応してたんじゃないの？」と言われる方もいるかもしれませんが、これはあくまで expand abbreviation の haml フィルタとしてだけサポートしていました。 何が変わったかというと zen cod
Big Sky :: zencoding-vimがビジュアル選択に強くなりました。
例えば Indented line full of <b>tags</b> an <em>text</em> こんなhtmlを <p> Indented line full of <b>tags</b> an <em>text</em> </p> こうしたい場合は V<c-y>,p<cr> とタイプして下さい。もし <p>Indented line full of <b>tags</b> an <em>text</em></p> こうしたい場合は ^v$<c-y>,p<cr> とタイプして下さい。もし <p> Indented line full of <b>tags</b> an <em>text</em></p> こうしたい場合は 0v$<c-y>,p<cr> とタイプして下さい。また複数行のテキストの一部分 そんな事より１よ、ちょいと聞いてくれよ。スレとあんま関係ないけどさ。
Big Sky :: zencoding-vimを少しだけversion0.7対応した
Zen-Codingの仕様はバージョン0.7がリリースされているのだけど、ちょっと腰が重くて対応が出来てません。 ただ、バージョン0.7の中で「これは便利だ」と思った機能があり、追加要望も受けていたので個別に対応した。 Upgraded “Wrap With Abbreviation” action まず「Wrap With Abbreviation」がどういう物かというと、zencoding-vimのサイトの動画(?)を見て貰えれば分かるんですが、ビジュアル選択して「Tag: ul>li>*>img」みたいに入力すると、選択部分が包括されて展開されるという物。 今回これに「$#」というキーワードを使える様にした。 例えば foo.jpg bar.jpg というテキストをビジュアル選択し Tag: ul>li*>a[href="$#"]>img[src="$#"]+{ファイル名は $# で
はてなブログ | 無料ブログを作成しよう
思いは言葉に。 はてなブログは、あなたの思いや考えを残したり、 さまざまな人が綴った多様な価値観に触れたりできる場所です。
Vimmer のための Zen-Coding 入門 - present
はじめに AppEngine アプリを作るようになって、HTML を記述する頻度がかなり上がりました。DreamWeaver みたいな高級アプリは持っていないので、Vim でゴリゴリ。メンドクセ〜。そろそろなんとかしたい。そこで Zen-Coding の出番です。 Zen-Coding とは 簡単に説明すると、 ul>li*3みたいな専用の記法で記述された HTML の構造を <ul> <li></li> <li></li> <li></li> </ul>という風に、普通の HTML タグに変換するシロモノ。多くのエディタや IDE のプラグインとして提供されています。 Vim で Zen-Coding を使う準備 Vim には zencoding.vim というプラグインがあるので、Zen-Coding を導入することができます。 ZenCoding.vim - vim plugins
zen-codingを使ってみた
http://code.google.com/p/zen-coding/ zen-codingを使うとhtml,cssを効率的に書くことができます。 対応エディタも多いのでお使いのエディタが対応しているようであれば使ってみる価値があります。 html:5 例えば上記を入力後、展開キー(エディタによって異なる)を入力すると下記htmlに展開されます。 <!DOCTYPE HTML> <html lang="en"> <head> <title></title> </head> <body> </body> </html> id指定、class指定等も下記のように簡易的に記述することができるのでコーディングスピードが飛躍的に上がります。 下記にいくつか例を書いてみます。 id,classの指定 div#id div.class 要素内に文字を含める場合 li{文字列} 属性の指定 a[href
Zen-Codingの応用でもっと超速に - 原稿ありきの変換について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 前回の記事（マークアップ効率化 - zen-codingでコーディングを倍速に）ではZen-Codingの基本について説明しました。 また、その内容をCSS Nite実行委員会（公式ページ）が主催した、Dreamweaver Town Meeting in TokyoというDreamweaverにフォーカスをあてたイベントで公演させていただきました。 ［撮影：飯田昌之］ その公演では、Zen-Codingを知らない方向けに、Zen-Codingとは何か・どんなことが出来るのかなど、基本に関して実演を行い
デザイナーが使えるZen-coding環境 | バシャログ。
ワールドカップのパブリックビューイングを会社近くの映画館で見てみたいminamiです。 以前tanakaがNetBeanでのZen-codingを紹介していましたが、デザイナー、コーダーがよく使うであろう環境でのZen-coding対応事情を調べてみました！ 秀丸でZen-conding 秀丸でZen-codingができるようになるマクロが配布されています。 秀丸マクロでZen-Coding マクロをダウンロード マクロフォルダのパスを確認。[その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されてるフォルダにダウンロードしたzencoding-for-hidemaru.zipから展開したzencoding.mac と zencoding.iniを移動 [マクロ] - [マクロ登録] で、zencoding.mac を任意の番号に、別々に2つ
高速コーディングが可能なVim+Zen-Codingのメモ - nzm_o。
HTMLやCSSのコーディングを数倍にも高速してくれるZen-CodingのVim版を自作していらっしゃる方がいたのでありがたく使わせていただいている。zen-coding for vim を pure vimscript だけで書いてみた。 よく使いそうなスニペットコマンドをメモ。 実行方法 コマンドを入力後、(挿入モードのまま)「c-y ,」(Ctrl+Yを押してカンマ) ※キーバインドは変更できる ※ちなみにキーバインドを変更したい場合は.vimrcに以下のような行を追加する let g:user_zen_leader_key = '<C-z>' html:xt <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio
Dreamweaver Town Meeting in Tokyoで公演してきました | kzms2 – html,css,javascript
Dreamweaver Town Meeting in Tokyoって？ 2010年5月29日、ベルサール新宿で行われたDreamweaverのパワーユーザー向けのイベントです。 Dreamweaverをこう使うと便利ですよ！とか基本的なところから応用まで色々とお話がありました。 自分はこのイベントの7分間セッションの大喜利に出演してきました。 当日の様子はTogetter – まとめ「Dreamweaver Town Meeting in Tokyo」にまとめてあるようです。 詳細は続きから。 自分のセッションについて 自分は「Dreamweaver x Zen-coding」というセッションを行いました。 7分間に収めるというのが本当に大変でした。。。 有料イベントということでスライドや動画はまだ公開されていません。 概要とか Zen-codingはDreamweaverの拡張機能
【コラム】攻略! ツール・ド・プログラミング (21) Aptana StudioおよびEclipseでZen-Codingを利用する | エンタープライズ | マイコミジャーナル
Aptana StudioでZen-Codingを使う テキストエディタのプラグインとして提供され、HTMLやCSSのコーディング効率を飛躍的に向上させてくれる「Zen-Coding」。単体のテキストエディタでなく、統合開発環境でZen-Codingがサポートされているツールとしては「Aptana Studio(以下、Aptana)」がある。AptabnaはWebアプリケーション開発用のEclipseベースの統合開発環境で、HTMLやJavaScriptの利用を手助けするさまざまな機能を備えている。Aptanaはこのサイトで無料で公開されており、スタンドアロンのアプリケーションとしても、Eclipseのプラグインとしてもインストールできる。 Aptana用のZen-Codingプラグインは、公式サイトのダウンロードページにある「Zen Coding for Aptana」がそれだ。このファ
下記のURLに記載されている手順で、Vim に zencoding.vim をインストールしました。…
下記のURLに記載されている手順で、Vim に zencoding.vim をインストールしました。 http://linuxserver.jp/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF/Vim/Zen-Coding.php インストール直後は正常に動作していたのですが、一度 Vim を再起動すると以下のようなエラーがでるようなりました。 ・ul>*3と入力した後、"Ctrl+y ," を押すと、正常に ul要素が展開されず <Plug>ZenCodingExpandAbbr と記入されてしまう。 ＞ ul>li*3(ここでCtrl+y,)<Plug>ZenCodingExpan
Vimmerなプログラマは迷わずZen-Codingしろ！ - idesaku blog
前々から気になっていた、Zen-Codingを試してみた。これはすばらしい！特にVimmer*1は迷わず使うべき。 プログラマの世界ではコピペは悪！しかし… 「"Hello."と３回表示するプログラムを書け」と言われたら、どう書く？ puts "Hello."と書いて、コピペで３行にするのさ！ puts "Hello." puts "Hello." puts "Hello." そんなわけない。もちろん、ループを使うだろう。 3.times { puts "Hello." } それでは、「HTMLで３項目からなるリストを書け」と言われたら？ <ul> <li></li> <li></li> <li></li> </ul> ……今、liを書いてコピペして増やさなかった？ こういうときも、プログラミングするときみたいに書ければなぁ。 という願望を満たしてくれるのが、Zen-Codingだ。このケ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - zodoz/jquery-ZenCoding: Zen-Coding for jQuery
【CSS】コーディングがさらに速くなる！Zen-Codingで覚えておきたいよく使うCSSスニペットコマンド | バシャログ。
I hate ie...seriously