Oracle中心にIT全般の技術情報を気が向くままに書いています。他にLinux、仮想化技術(VMWare)やトラブルに役立つ情報などがあります。

スポンサーサイトサクラエディタを使用して高速にブログ記事を書く


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログ記事の記載については、「Windows Live Writer」などをはじめとしたブログ用のツールがありますが、WYSIWYGを使用しない私にとっては、入力スピードの面で不満がありました。

この度、今後のブログ記事作成を楽にするために検討を行ってみました。

ツールは「サクラエディタ」を使用することとします。
テキストエディタの中では「EmEditor」が巨大ファイルが扱えるなど個人的には好きですが、サクラエディタは会社のパソコンに入っているので選択しました。

結論としては、ものすごい記載が楽になりました

実施した対策は下記の両方です。
  1. マクロによる<br />入力の省力化
  2. EmmetによるHTML/CSSタグ入力の省力化




1.マクロによる<br />入力の省力化
HTMLで<br />は改行を意味するため、頻繁に入力が必要ですが、都度、文字を入力することは面倒です。
この課題はサクラエディタのマクロ機能を利用して解決したいと思います。

(1)サクラエディタ用マクロフォルダの作成
サクラエディタのマクロファイルを格納するフォルダを作成します。
今回は、「E:\81_サクサクIT\macro」というフォルダを作成しました。

(2)マクロフォルダの設定
サクラエディタを起動し、「設定」メニュー⇒「共通設定」とクリックします。


「マクロ」タブの「マクロ一覧」に作成したマクロフォルダ「E:\81_サクサクIT\macro」を指定し、「OK」ボタンをクリックします


(3)行末に<br />を入力し、Enterキーを押下するマクロの作成
行末に<br />を入力するマクロを作りたいと思いますが、入力後、エディタ上で改行を行いたい場合とそうではない場合があります。よって、2パターンのマクロを作りたいと思います。

サクラエディタを起動し、「ツール」メニュー⇒「キーマクロの記録開始」とクリックします。


次のようにキーを入力します。
[End]キー押下 ⇒ "<br />"文字列入力 ⇒ [Enter]キー押下


「ツール」メニュー>「キーマクロの記録終了」とクリックします。


「E:\81_サクサクIT\macro」フォルダに「RecKey.mac」ファイルが作成されています。
これは、先程キー押下した内容が記録されているものです。


ファイル名を「br.mac」に変更しておきます。


(4)行末に<br />を入力し、改行せずに下の行に移動し、カーソルを先頭に戻すマクロの作成
サクラエディタを起動し、「ツール」メニュー⇒「キーマクロの記録開始」とクリックします。


次のようにキーを入力します。
[End]キー押下 ⇒ "<br />"文字列入力 ⇒ [↓]キー押下 ⇒ [Home]キー押下


「ツール」メニュー>「キーマクロの記録終了」とクリックします。


「E:\81_サクサクIT\macro」フォルダに「RecKey.mac」ファイルが作成されています。


ファイル名を「br2.mac」に変更しておきます。


(5)マクロのショートカットキー登録
「設定」メニュー⇒「共通設定」とクリックします。


「マクロ」タブのリストで番号「0」の行を選択し、名前に「br」、Fileに「br.mac」と入力し、「マクロを実行するたびにファイルを読み込みなおす」をチェックし、「設定」ボタンをクリックします。
※チェックボックスはチェックしなくても良いのですが、設定しない場合には、変更時にサクラエディタの再起動が必要となり面倒なので、私はチェックするようにしています。


番号「1」の行を選択し、名前に「br2」、Fileに「br2.mac」と入力し、「マクロを実行するたびにファイルを読み込みなおす」をチェックし、「設定」ボタンをクリックします。


作成したマクロが登録されましたので「キー割り当て」タブをクリックします。


「キー割り当て」タブで、種別に「外部マクロ」を選択し、機能に「br」を選択し、キー「Shift+Enter」を選択し、「割付」をクリックします。


機能に「br2」を選択し、キー「Shift+Ctrl+Enter」を選択し、「割付」をクリックします。


キー割り当てが完了したので「OK」ボタンをクリックします。


(6)マクロ動作確認
テキストの1行目で「Shift+Enter」キーを押すと、「行末に<br />を入力しEnterキーが押下」されています。


テキストの1行目で「Shift+Ctrl+Enter」キーを押すと、「行末に<br />を入力し、改行せずに次の行の行頭にカーソルが移動」されています。




2.EmmetによるHTML/CSSタグ入力の省力化
「Emmet」は以前は「Zen Coding」と呼ばれていました。
サクラエディタで現在提供されているものも「Zen Coding」として提供されています。
HTMLやCSSなどを少ないキーで入力することができる優れものです。
「Zen Coding」は、2008年にVadim Makeevが開発を進めたとのことです。(wikiより


(1)サクラエディタ用ZEN-CODING用ツールの入手
Zen Coding for Sakura Editorのダウンロードページにて、「Download」ボタンをクリックし、「Zen.Coding-SakuraEditor.v0.1.1.zip」ファイルをダウンロードします。


ダウンロードしたzipファイルを解凍し、サクラエディタマクロ用フォルダ「E:\81_サクサクIT\macro」に「ZenCoding.js」ファイルをコピーします。また、ファイルをコピーし、バックアップ(ZenCoding_bk.js)も取得しておきます。


(2)ZEN-CODINGマクロ登録
「設定」メニュー>「共通設定」とクリックします。


「マクロ」タブのリストで番号「2」の行を選択し、名前に「zencoding」、Fileに「ZenCoding.js」と入力し、「マクロを実行するたびに読み込みなおす」をチェックし、「設定」ボタンをクリックします。


作成したマクロが登録されましたので「キー割り当て」タブをクリックします。


「キー割り当て」タブで、種別に「外部マクロ」を選択し、機能に「zencoding」を選択し、キー「Ctrl+,」を選択し、「割付」をクリックします。


キー割り当てが完了したので「OK」ボタンをクリックします。



(3)ZEN-CODINGの動作確認
それでは「Zen Coding」の効果を実感してみたいと思います。
下記はほんの一例です。
詳しくは色々なサイトで取り上げられているので検索してみてください。

例)DIVのclass指定
divの次の"."がclass指定となります。
div.clsTest
↓↓↓ 「Ctrl+,」キー押下
<div class="clsTest"></div>

例)DIVのid指定
divの次の"#"がid指定となります。
div#idTest
↓↓↓ 「Ctrl+,」キー押下
<div id="idTest"></div>

例)子要素指定
>を指定することで子の要素を指定できます。
table>tr>td
↓↓↓ 「Ctrl+,」キー押下
<table> <tr> <td></td> </tr> </table>

例)複数回指定
*nのnに数字を指定することで複数回繰り返すことができます。
table>tr>td*3
↓↓↓ 「Ctrl+,」キー押下
<table> <tr> <td></td> <td></td> <td></td> </tr> </table>

例)HTML構文指定
html:4t,html:4s,html:xt,html:xs,html:xxs,html:5などが指定できます。
html:5
↓↓↓ 「Ctrl+,」キー押下
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

例)文字のエスケープ指定
例えば<br />などを入力しても改行と解釈され表示することができません。
そのため、<文字などはタグと見なされないように変換する必要があります。
|eを追加するだけです。これは非常に便利です。
br|e
↓↓↓ 「Ctrl+,」キー押下
&lt;br /&gt;

(4)ZEN-CODINGのカスタマイズ
ZEN-CODING標準でも省力化は図れるのですが、特に良く入力する文字などは、自分用の設定を追加した方が効率的です。

「ZenCoding.js」ファイルを開きます。
'html'の'snippets'の箇所に下記構文で追加します。※最後の","を忘れないようにしてください。
'入力文字' : '変換文字',


上記のように、Google Adsenseの広告文字列なども登録しておくと便利です。

上記の'変換文字'の部分には特殊な変数も指定できます。
  1. '|' : 文字列変換後にカーソルを移動する位置を指定
  2. '+' : ''で囲まれた文字列を結合する
  3. '${newline}' : 改行文字を挿入する
  4. '${indentation}' : タブ文字を挿入する
  5. '${child}' : 子要素を挿入する

「Zen Coding」でも<br />文字の入力省力化は図れるのですが、改行文字は何度も入力するものなので、極力文字入力の負荷を減らすために、個別にマクロで指定しました。

本記事についても、本省略化対応後に書きましたが、簡単に活用できました。




以上です。




トラックバックURL

この記事にトラックバックする(FC2ブログユーザー)



前ページへ:netshで固定IP設定
次ページへ:Android4/iOSからWindows8.1にリモートデスクトップ接続する

ページのトップへ

必ずお読みください

本ブログ記事をご利用になって生じたいかなる損害についても当方は一切責任を負いません。
ご利用は自己責任でお願いします。(^―^)

広 告





ブログランキング/その他


ビジネスブログ100選

ブログランキング・にほんブログ村へ
blogramで人気ブログを分析




最新トラックバック


RSSリンクの表示

QRコード

QR

アクセスカウンター

ユニーク:
トータル:


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。