CotEditorインストール
まずはCotEditor プロジェクト日本語トップページ - SourceForge.JPでダウンロードします。
ダウンロードしたらディスクイメージをダブルクリックして展開させます。
ディスクイメージを展開させたらアプリケーションフォルダーにドラッグすればインストールは完了です。
Mac OSがMountainLionの場合
MountainLionになってから以前よりセキュリティーが厳しくなり、デフォルトでは未確認の開発元からダウンロードされたアプリは開けません。
システム環境設定のセキュリティーとプライバシーを下図のように変更してCotEdeitorを許可しましょう。
一度許可すれば、それ以後は許可する必要がありませんので、許可をしたら念のために元の設定に戻しておきましょう。
視認性をあげるために書類のカラーリングを設定しよう。
CotEditorは様々な種類に対応しており、書類の視認性をあげるシンタックスも各種設定できます。
環境設定からもっと詳細にカスタマイズする事も可能です。
CotEditorを更に使いやすくしよう
スクリプトでHTMLのショートカットの設定
CotEditorは初見で分らない便利な機能があります。僕的にCotEditorを使いだした理由のひとつが、この機能です。CotEditorは会社でつかっているDreamweaverに比べて起動も動作も軽いので、この機能がある為に、自分のホームページやブログの原稿等もCotEditorで書いています。具体的にはHTMLのタグをショートカットに登録出来るのです。
ショートカットの設定方法
ショートカットの設定の方法ですが、ファイルをリネームし設定します。
- メニューバーのスクリプトからスクリプトフォルダを開く
- SampleScript > AppleScript > Extras > XHTML > ;の順でフォルダを開く
- 任意のファイルをリネームしてショートカットにする。
と言った感じの手順です。リネームには法則があります。
CotEditordeではスクリプトファイルに「.」+下記のルール+任意のキーでファイル名をリネームする事によりショートカットを割り当てる事が出来ます。ファイル名に使えないキーは割り当てられません
| 表記 | キー |
|---|---|
| ^ | Ctrl（コントロール） |
| $ | Shift（シフト） |
| ~ | Option（オプション） |
| @ | Command（コマンド） |
たとえばCommand+Option+Shift+Pでショートカットキーを設定する場合
|
1 2 |
00)<p>.applescriptを 00)<p><strong>.$~@p</strong>.applescriptにリネーム |
自分でショートカットを増やす場合
デフォルトではよく使うdivタグがありませんので追加してみます。Pタグのスクリプトファイルを開くと下記のようになっています。CotEditorで開きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
(* written by nakamuxu. 2005.03.14 *) -- property beginStr : "<p>" property endStr : "</p>" property preMargin : 0 -- -- tell application "CotEditor" if exists front document then set {loc, len} to range of selection of front document if (len = 0) then set newStr to beginStr & endStr if (preMargin = 0) then set numOfMove to count of character of beginStr else set numOfMove to preMargin end if else if (len > 0) then set curStr to contents of selection of front document set newStr to beginStr & curStr & endStr if (preMargin = 0) then set numOfMove to count of character of newStr else set numOfMove to preMargin end if else return end if set contents of selection of front document to newStr set range of selection of front document to {loc + numOfMove, 0} end if end tell |
このコードの
|
1 2 3 4 5 |
-- property beginStr : "<p>" property endStr : "</p>" property preMargin : 0 -- |
のpタグをdivに変更して別名で保存すればOKです。
|
1 2 3 4 5 |
-- property beginStr : "<div>" property endStr : "</div>" property preMargin : 0 -- |
ファイルの名の00)はメニューにはメニューでの並び順です。僕はショートカットを含め
02)<div>.$~@d.applescriptで保存しています。
他にもある便利な機能
アウトラインメニュー
ツールバーにアウトラインメニューがあります。アウトラインメニューはこのHTMLのように長いドキュメントの場合に項目を探すのが便利です。選択すると該当箇所に移動しハイライトされます。見出し構造が間違えていないかのチェックにも便利です。
ワードの段落を維持出来るのも地味便利なところです。ですのでデザイン制作時にも一旦CotEditorにテキストを移してからFireworksに貼付けたりもしています。
Zen-CordingでCotEditorの機能を拡張
Zen-Cordingってなに？
Zen-Cordingは荒っぽく言ってしまえばコーディングの入力補完ツールです。 Zen-Cordingのコマンドを入力して煩わしい入力作業を簡略化する事が出来ます。 デザインビューとかがあるわけではありません。 個人的にはコーディングを一通り覚えたよ〜って人が使ったほうが効率は上がると思います。 マークアップもままならないままZen-Cordingのコマンドを覚えるのは負担にもなると思います。
ですが、このような便利拡張機能があると知っていただければ、更に上を目指そうと思う時に助力になるはずですので、簡単にご紹介させていただきます。 CotEditorのZenCording機能拡張のインストールは、別途Appscriptをターミナルをつかってインストールする必要があります。インストールについて詳しくは踊るサボテン工房さんのサイトで解説されています。
Zen-Cordingでコーディング
主な機能Expand Abbreviationc
HTMLのコーディングは
|
1 |
<div>HTMLのコーディング</div> |
のように文字列をタグで囲みコーディングします。Zen-Cordingを使えば
|
1 |
div//ここでExpand Abbreviationスクリプト実行（ショートカット可能） |
すると
|
1 |
<div></div> |
のように<div></div>と閉じタグまで自動で入力できます。便利ですよね〜
ですが、HTMLのマークアップを覚えるまでは、使わないほうが良いと思います。ショートカット登録とかコマンドとか覚える事が増えますからね！一通りコーディングを覚えた時に更に便利にこの機能を！って時に使っていただきたいです。
主な機能Wrap with Abbreviation
Wrap with Abbreviationはハイライトされた箇所を囲むようにタグを入力してくれるすごくナイスな機能なのですが、何故か僕のCotEditorではこの機能が動作しません。エラーが返ってきます。現在原因究明中です。ドリでは普通に使えるのですが、原稿を書いたりするときは軽いCotEditorでやりたいので、地味に痛いっす。
