ホーム > Zen Coding for Sakura Editor

Zen Coding for Sakura Editor

  • 2010年7月16日 12:00 AM

Zen Codingをサクラエディタで行えるように一部の機能だけですが移植しましたので公開します。

  • 設定方法
    1. ZenCodingForSakuraEditor.zipをダウンロードし、解凍します。
      ZenCoding for Sakura Editor の 解凍
    2. ZenCoding.jsをサクラエディタのマクロフォルダに設置します。
      (例ではサクラエディタのインストールフォルダ内に”macro”というフォルダを作り、そこへコピーしています。)
      サクラエディタのマクロフォルダにコピー
    3. [設定(O)]->[共通設定(C)...]->タブ[マクロ]を開きます。(Ctrl+6 でも開けます。)
      共通設定を開く
    4. [参照]を押下し、マクロフォルダの設定します。
      [File]のドロップダウンリストからマクロファイル「ZenCodeing.js」の読み込みます。
      [名前]にマクロ名「ZenCoding」を入力し、[設定]を押下します。
      外部マクロに登録(設定前)
    5. 設定が反映されると、マクロ一覧に設定したマクロ「ZenCoding」が表示されます。
      外部マクロに登録(設定後)
    6. タブ[キー割り当て]を開き、[種別(K)]で「外部マクロ」を選択します。
      [機能(F)]に「ZenCoding」が表示されますので選択します。
      他のソフトウェアでは[Ctrl]+[E]が実行キーなのですが、サクラエディタではすでに他の機能が割り当てられていますので[Alt]+[Z]を割り当てます。
      [Alt]のチェックボックスにチェックを入れ、[キー(Y)]から「Alt+Z」を選択し、[割付(B)]を押下します。
      キーの割り当て(割付前)
    7. 設定が反映されると、[機能が割り当てられているキー(G)]に設定したショートカットキー「Alt+Z」が表示されます。
      [OK]を押下して、設定を完了します。
      キーの割り当て(割付後)
  • 使い方
    1. これで使う準備ができましたので、早速動作確認をしてみましょう。
      エディタに”html:4s>div>ul>li*3>a”と入力してみましょう。動作確認(実行前)
    2. 入力が完了したら、先ほど設定した[Alt]+[Z]キーを押下してみてください。
      HTML文が展開されれば成功です。
      動作確認(実行後)
  • 関連

コメント:10

まさ 2011年2月28日

便利なマクロを公開していただきありがとうございます!

質問ですが、CSSでのZenCodingの仕方が分かりません。
「@i」としてから実行しても、「<@i></@i>」のようにHTMLとして実行されます。

CSSのZenCodingを行うにはどこか設定しないといけないのでしょうか?

yobane 2011年3月10日

ご利用いただきありがとうございます。
まず、ZenCodingの仕様して解析はHTMLとCSSに別れており、モードを切り替えればCSSが展開されHTMLは展開されないという動作になっているようです。
このモード切替は基本的にはファイルの拡張子やStyleタグで判断するようですが、現在提供しているサクラエディタのマクロにはサクラエディタがHTMLモードかCSSモードか判断する処理を持っていないためデフォルトとしてHTML解析モードで動作しています。
なので、下記のように1行で記述した場合はモードを動的に切り替えているため、うまく展開されると思うのですが、これもうまくいきませんか?


<style type="text/css">@i</style>

また、上記のとおりHTMLモードで動作してるため、ファイルの拡張子を.cssにしたり、サクラエディタのモードをCSSにしてもご指摘いただいたようにCSSは展開されません。
CSSでの展開を行いたいのであれば、モード切替部分をマクロの修正など何らかの手段で実現すれば可能と思われます。
(つまり、この部分は現バージョンでは未対応です。時間が取れ次第、調べてみます。)
なお、手直しをされて対応された場合、修正を取り込みたいと思いますのでご連絡いただければと思います。

maruta 2011年6月3日

JS単体で実行すると、エラーが出てしまい、
sakuraでマクロ実行しても何も反応しません。。

解決頂くことは可能でしょうか。

他に必要な情報があればご連絡いただけますでしょうか。

sakura愛用しているので、ぜひともこちらのマクロを使いたいです!!

yobane 2011年6月10日

自分の開発環境及びネット機では問題なく動作してるようです。
一応過去のバージョンもダウンロード可能にしましたのでご確認ください。
ほしい情報としてはOS、サクラエディターのバージョンの情報をいただけると助かります。

lhankor_mhy 2011年6月11日

使用させていただきました。これは素晴らしいですね!
 
ところで、CSSのpaddingとぶつかっているようで、が展開されないようです。

しろ 2011年6月17日

重宝しそうです。貴重なマクロありがとうございます!!
ひとつふるいバージョンのサクラエディタで動かなかったので、最新版をインストールしてやり直したらうまくいきました!

ただ、html:4s とうっても

としかならず、文書型宣言などが展開されませんでした。こちらの設定の問題なのでしょうか?

しろ 2011年6月17日

↑自己解決しました。
一度、html ファイルとして保存しないと正常に動作しないんですね。。早とちりしました。
度々のコメントで申し訳ございません。

maru 2011年10月13日

利用させていただきました。ありがとうございます。
ただ、字下げした状態で使おうとすると機能しません。
行頭でしか機能しないのでしょうか。
よろしくお願いします。

Arissa 2011年12月16日

有難く使わせてもらいます!
こちらのzencodingにはwrap機能はありますか?

yobane@WebAdmin 2012年1月11日

回答が遅れて申し訳ありません。
wrap機能は実装できていません。
今後、対応する可能性はありますが、近日中の対応は致しかねます。

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
http://mwlab.net/zen-coding-for-sakuraeditor/trackback
トラックバックの送信元リスト
Zen Coding for Sakura Editor - MoonWing より

ホーム > Zen Coding for Sakura Editor

検索
フィード
翻訳
Japanese flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagEnglish flagGerman flagFrench flagRussian flagVietnamese flagThai flag

ページの上部に戻る