Dreamweaverのmy_zen_settingにJavaScriptのsnippetsを入れる

ブログリニューアル記念、Kameです。

以前にもZencoding + Dreamweaverのことを書きました(参考)が、またもややりたいことができずにモヤモヤしたのでやってみました。

やりたかったこと

Zencodingはたくさんの機能がありますが、スニペットも簡単に登録できてすぐに使えるのでよく使っています。

それで先日、Araiさんから良いJavaScriptの記述を紹介してもらったのですぐに使えるようにmy_zen_settingsに登録だ、と思ったわけです。

しかしながら、元々ZencodingはHTMLとCSSが主に対象になってるので、JavaScriptのスニペットなんて認識してくれないんですね。
登録したはずの記述して「Ctrl + ,」押して文字が <> で囲まれたときはかなりモヤモヤしました。

なんとかZencodingでJavaScriptのスニペットを使いまわしたい!そう思いました。

「Dreamweaverのスニペットを使えばいいじゃない。」 ← 無視します。

とりあえずmy_zen_settings

スニペットを登録する場合はmy_zen_settings.jsを編集します。
以前にも書いたかもしれませんが、

C:\Users\【ユーザ名】\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\Commands\ZenCoding

このあたりにあると思います。

JavaScriptのスニペットを登録すると、CSSなどに習うと以下のようになりますね。

      ・
      ・
      ・
	'css': {
		'snippets': {
			"hogehoge": "hugahuga"
		}
	},
	'js': {
		'snippets': {
			"登録": "したいやつ"
		}
	}

これで上で言うと「登録」って打ってお決まりの「Ctrl + ,」と入力すると「したいやつ」というのが出てきます。
とりあえずmy_zen_settingsはこれでOK!

パースモードにJSを!

以前の記事でも出てきましたが、Zencodingは拡張子なんかをみたりして今編集しているファイルがどのタイプの言語などを判断しているみたいです。
デフォルトですとJavaScriptファイルは「html(初期値)」として扱われているようです。なので普通にやると <> で囲われてしまうんですね。

JavaScriptは「js」モードとして扱いなさいよという具合の記述を加えてやります。

zen_editor.js

scssファイルをcssモードでパースさせたとき同様「zen_editor.js」を触ります。

だいたい258行目にある「getSyntax」という関数の中に以下を記述します。

if(edit_path.match(/\.js$/)){ // ファイルの拡張子が「.js」だったら
	parse_mode = 'js'; // parse_mode変数を「js」に!!!
};

これでスニペットがちゃんと動作してくれました!!

当然他にも色々できそう

今回JavaScriptを追加しただけですが、これの要領で他のプログラムなんかでも色々できそうですね。

一点気をつけていただきたいのはあくまでこの方法はDreamweaverでの事なので、他のエディタをお使いの方はそのZencodingのコアで同じようなことやっている部分をいじってあげてください。