2013年10月07日

Meryエディタemmet(Zen-Coding)を更に使いやすくする(文章の挟み込みとか)設定方法とは?

emmet.png

 ども、親父です。
WindowsPCを使う時に、個人的に気に入っているテキストエディタにMeryエディタがあります。
自分で作成したマクロやら、今まではZen-Codingなどを使用して、Htmlを作成する時に大変役に立っていたわけです。
 で、Zen-Codingが進化系としてEmmetという名称に変わりました、簡単に言えばもっと使いやすくなったZen-Codingというべきマクロになります。

mmacro.png

 このEmmetがMeryマクロにも出現しましたので(Kuroさんありがとう)、これをばZen-Codingにの代わり設定しました時に、この方法も付け加えればもっと便利になるがな!といった内容を記載しておこうと思います。

まずはMery用Emmetをダウンロード

makuroraiburaly.png
Meryマクロライブラリへとアクセスします。
 

すると、テキスト操作補助の項目一番上に、作者のKuroさんが作成したEmmetが鎮座しております。
それをクリックすると、このサイトへ飛ばされます

 
macrookiba.png
 
 そこでEmmet.jsをクリックすればソースが確認できますので、それをコピーしてemmet.jsとしてファイルを保存して下さい。(長大ですが、気長にコピーしましょう)
 
kopioesimasyou.png
 

 これでとりあえず、Emmet.jsマクロは手に入ると思います。

 さて、Mery用Emmetを手に入れて、これをそのまま登録しても良いのですが、もっと便利になるように、ここではちょいと細工を施してみることにします。
ついでに、Emmet.jsにショートカットキーも登録しておきます。
私の場合はCtrl + Shift + Zで登録しています。ショートカットは自分が使いやすい設定でどうぞ

 
keytouroku.png
 


タグの挟み込みをEmmetで行えるようにする設定

 私がコピーしたマクロの初めの9行目(人によってコピーしたファイルで行が違ってくると思いますので、7〜10行目にあると思って下さい)ソースを確認してもらうと、var emmet_action = "expand_abbreviation";という文があります。
 
ememet.png


この文のexpand_abbreviationを書き換えてしまうわけです。

 少し下にちょっと面白い一文が目に入ると思います。
//というコメント文章にそれは記載されています(JavaScriptの行コメントは//です)
"wrap_with_abbreviation"   : 省略コードで包括という部分です。
これが文章をタグで挟み込み可能とする一文です。

 
wrap.png


つまり「ああああああああああ」といった文章の両端を、p(段落)タグで挟み込みたいとします。
通常のMery用Emmetであれば、この文章の挟み込みは出来ません。


 そこで、var emmet_action = "expand_abbreviation";のexpand_abbreviationと記載されている部分を、wrap_with_abbreviationに書き換えて、ファイル名をEmmet_wrap.jsとでもして保存します。

 マクロ登録に、先ほど作成したEmmet_wrap.jsを登録して、動作を確認してみます。

 
phasamikomi.png


ポップアップで、「省略コードを入力して下さい」とメッセージが出てきますので、ここではpを入力してみましょう。
図のように文章を挟み込む事ができたなら成功です。

 
hasamikonnda.png
 
 また、図のように文章が複数行に渡っているものでも、すべてタグで挟み込む事が出来ます。
 
kakugyouhasamikomi.png


省略コードを入力して下さいの部分に、Emmetで使われているマクロ使用方法にならって、タグの後にを入力してみて下さい。
全ての文章が、pタグで囲まれているのが確認出来ると思います。

 
kekkadesune.png


 これは箇条書きのliタグ(ddでも同じ)でも同じ事ですので、使い所が多いと思いますよ。
私はこれを、Ctrl + Shift + Wのショートカットキーに登録して、使っています。

 

コメントアウトを行う

 先ほどの文章挟み込みで、var emmet_action 〜から先の、マクロの書き換えは理解出来たと思います。
 今度は、コメント文を作成出来るように、再びvar emmet_action 〜から先の部分を、今度はtoggle_commentとしてみましょう。

 
comment.png
 
では同じように文章を選択してみます。
 
comentowoireru.png
 
マクロを実行すると、下図の通り…
 
comentogahiatta.png


 すると今度は、文章の両端にコメントタグが出現すると思います。
 コメントを入力したい時には、重宝するのではないか?と勝手に思いましたが、どうでしょうか?

ちなみにショートカットキーは、Ctrl  + Kにしています。(ありきたりかな?)

文章宣言の文字コードをenからjaに変更しておく

  細かいことなのですが、Emmetの文章宣言は、enの英字になっています。
 
langmae.png


いったんhtml:5でマクロを動かし、enの部分を書き換えてもいいのですが、最初からJPになっていれば、世話がかかりません。

 
html5sengenn.png


 しかし、文章挟み込みの時と違い、これがやたらと深い行に記載されているんですわ…
Zen-Codingの時と違うのはこの記載の部分でして、Zen-Codingの時は、割りとマクロの最初の方に記載されていましたので、探すのも手間がかからなかったのですが、Emmetの場合は違います。


 私がコピーしたファイルでは12896行目にありました。
検索メニューにlangと入力して、どんどん先を確認したわけですが、あまりにも量が多いので、Meryの編集メニューで「行へ移動」がありますから、これを利用して一気に飛んで下さい。

 
gyouidou.JPG


その方が断然速いですよ〜。

 
idouasaki.JPG


飛んだ先で、lang=enと記載されていると思いますから、これをlang=ja-JPへと変更しておきます。

 
langhenkou.png


またdoctypeの最初の部分が大文字ではないので、13491行あたりに飛んで小文字のdを大文字へ変更しておきます。

 
doctype.png


 まとめとして
いかがでしたでしょうか?Meryでhtmlファイルを作成する時、Emmetを少し変更しておけば、かなり使いやすさに変化が起きたと思います。
 下手なオーサリングツールよりも、テキストエディタでhtmlファイルを編集してしまうタイプの方には、Meryは力強い味方になってくれると思いますよ。

posted by アラフォー親父 at 17:27 | Comment(0) | TrackBack(0) | Meryテキストエディタ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/376852451
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
最近のコメント
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。