タグ

zencodingに関するpoppenのブックマーク (13)

  • コーディングスピードはまだ上がる!! <br>Zen-Coding カスタマイズ

    コーディングスピードはまだ上がる!! Zen-Coding カスタマイズ 2011-01-20 コーディング速度が"3倍!10倍!上がる"と言われてる Dreamweaver Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js Aptana [任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js") Notepad++ [Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js HTMLの言語を修正する(ついでにインデントも) 例えばhtml:xsで展開す

    コーディングスピードはまだ上がる!! <br>Zen-Coding カスタマイズ
  • Aptana 以外の Eclipse で Zen-Coding を有効にする方法

    【2011-05-27 追記】 EC studio さんで紹介されているからか、未だに多くアクセスがあるんですが、現在であれば ぼんずーず : eclipse + zen-coding プラグイン3.6Helios動作確認済み「eclipse-zencoding」 で紹介されている方法の方が推奨です。 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ で紹介されていた、Zen-Coding が激しく気になって、常用している Eclipse で使いたいと思ったのですが、どうも Aptana で無いとすんなりとは動いてくれない様子。 調べていくと、Zen-Coding は、Aptana 自体の機能ではなく、Eclipse Monkey なる Eclipse プラグインの機能を用いて実現しているようだったので、普通の Ec

    Aptana 以外の Eclipse で Zen-Coding を有効にする方法
  • 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

    Vimmer のための Zen-Coding 入門 - present
  • Zen Codingでできる、あんなことこんなこと | Zen Coding 1-2 | HTML+CSSコーディングが10倍速くなるZen Coding

    HTMLタグをいちいち手で入力していると、時間もかかりますし、入力間違いやスペルミスなど、間違いの原因にもなります。それはCSSでも同じです。 DreamweaverなどのWebオーサリングツールには、標準でタグや属性の補完機能や「スニペット」といわれる入力支援機能があります。スニペットは、登録されているよく使うコードを呼び出して、コピー&ペーストの要領で入力します。 Zen Codingでは、このスニペットのようによく使うコードを呼び出して入力するものですが、「省略形」(abbreviation)といわれるコードの略語のようなものを入力するだけで、さらにかんたんにコードを入力することができます。 Zen Codingを使えばコーディングはこう変わる!HTMLコーディングでは、「<h1>見出しタイトル</h1>」のようにテキストを開始タグと終了タグで囲み、見出しを指定します。 Zen Co

    Zen Codingでできる、あんなことこんなこと | Zen Coding 1-2 | HTML+CSSコーディングが10倍速くなるZen Coding
  • VIM (GVIM) で Zen-Coding する方法とサンプルいくつか - ginpeiのブログ

    Zen-Codingってご存知ですか? ご存知なければ今すぐググるべき。 google:zen-coding 一言で言うと、ショートカット駆使してHTMLを高速に入力する方法、ツールです。 そのZen-Codingのプラグインを、私が愛用しているGVIMに導入する方法と、その後に素晴らしさがよくわかる例をご紹介します。 まずはダウンロード 配布ページからプラグインのファイルzencoding.vimをダウンロードしてきてください。内容はただのテキストファイルです。 http://www.vim.org/scripts/script.php?script_id=2981 ページの一番下です。 zendocing.vimの設置 ダウンロードしてきたファイルを以下の場所に設置してください。 <gvim.exeのあるディレクトリ>/runtime/plugin GVIMを再起動 既に起動中であれば

    VIM (GVIM) で Zen-Coding する方法とサンプルいくつか - ginpeiのブログ
  • よく訓練されたvim使いになるために « fujimi-blog

    おはようございます。 最近vimを使うようになってきたので、vim関係の設定などを書きます。 .vimrcファイル これはvimの設定ファイルです。 ここに、vimの設定をつらつら書いていきます。emacsでいうところの.emacsみたいなものです。 set number "行数を表示 set encoding=utf-8 "エンコードをUTF8にする set tabstop=2 "タブ幅を2 set shiftwidth=2 "インデント幅を2 set bs=2 "BackSpaceで削除 syntax on "ソースコードなどを色付け imap <C-j> <C-[> "インサートモードで「Ctrl+j」を押すとコマンドモードに移行 set hlsearch "検索した文字列をハイライトする "php-mode autocmd FileType php  :set di

  • vimでZen Coding::zencoding.vim - e2esound.com業務日誌

    e2esound.com業務日誌 東京・群馬を中心にWebサイト製作、Mobilサイト制作、WordPress構築等々を業務にするe2esound.comの業務日誌的なblog。 HTMLを高速で作成できる(ようになれるかもしれない)コーディングスタイル。これがZen-Codingなのです。 Aptana等々のアプリケーションではプラグインが公開され、実際にこのコーディングスタイルが使えるらしいです。では、vimではどうなのか?つまりはいつもの行動パターンをとるわけです。 Big Sky:zen-codingの殆どの機能をzencoding.vimに取り込んだ。 mattnさんありがとうございます!感謝感謝!!早速使ってみます。最新版のzencoding.vimmattnさんのgithubからダウンロード!! リンク先にある通り、インストールは~/ftpplugin/html以下にzen

  • Vimmerなプログラマは迷わずZen-Codingしろ! - idesaku blog

    前々から気になっていた、Zen-Codingを試してみた。これはすばらしい!特にVimmer*1は迷わず使うべき。 プログラマの世界ではコピペは悪!しかし… 「"Hello."と3回表示するプログラムを書け」と言われたら、どう書く? puts "Hello."と書いて、コピペで3行にするのさ! puts "Hello." puts "Hello." puts "Hello." そんなわけない。もちろん、ループを使うだろう。 3.times { puts "Hello." } それでは、「HTMLで3項目からなるリストを書け」と言われたら? <ul> <li></li> <li></li> <li></li> </ul> ……今、liを書いてコピペして増やさなかった? こういうときも、プログラミングするときみたいに書ければなぁ。 という願望を満たしてくれるのが、Zen-Codingだ。このケ

    Vimmerなプログラマは迷わずZen-Codingしろ! - idesaku blog
  • zen-codingでhtml,cssのコーディングスピードが3倍以上になる - chulip.org

    zen-codingはHTML and CSS hi-speed codingと謳っているように飛躍的にhtml,cssのコーディングスピードを上げてくれます。 zen-coding - Project Hosting on Google Code 公式でVimには対応していなかったのだけどvimscriptでmattnさんが作っていました。神 zen-coding for vim を pure vimscript だけで書いてみた。 使用方法 スニペットコマンドを入力したあとにexpandabbr_keyをタイプします。 ※デフォルトだと, スニペットコマンド一覧 HTML http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn CSS http://code.google.com/p/zen-coding/wiki/ZenC

    zen-codingでhtml,cssのコーディングスピードが3倍以上になる - chulip.org
  • Zen-Codingで楽々コーディング! + コツ1つ

    話題のHTMLCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何?使い方は?という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)

  • Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。

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

    Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。
  • Zen-Codingでできるあんなことこんなこと | gaspanik weblog

    先日超速コーディング?としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。 HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします(どちらかと言えば、こっちが当のZen-Codingなんでしょう)。 ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…(はず 笑)。 文書構造がわかってれば、1行書いて一気に展開できるZen-Codingは、前回紹介したような登録された略語を使ってHTMLCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-Text

    Zen-Codingでできるあんなことこんなこと | gaspanik weblog
  • zen codingは超便利!Dreamweaverで使ってみました。 – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-

    先日、ノンプログラマのためのPHP入門という素敵なUSTを見ていたのですが、その中で出てきたzen coding。 前々から知っていたものの、これ使うならエディタごと乗り換えないといけないんだ!とずっと勘違いしていて、なんだかんだでまだDreamweaver使ってるし…サイトの定義とかもしてるからなんだかんだでエディタ乗り換えるの面倒だしなぁ…とかごにょごにょ思っていたのですが… Dreamweaverでも使えるらしいよ!知らなかった!無知って怖い!>< Dreamweaver用はこちらからダウンロードできます。 ダウンロードしたZen Coding.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストール。 これだけでOK。 インストールが終わったら、早速何か入力してみましょう。 すごい!感動! 展開はcontrolキーと,(カンマ)キ

    zen codingは超便利!Dreamweaverで使ってみました。 – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
  • 1