アプリケーション

CotEditorインストール

まずはCotEditor プロジェクト日本語トップページ - SourceForge.JPでダウンロードします。

preparation_img

ダウンロードしたらディスクイメージをダブルクリックして展開させます。

preparation_img

ディスクイメージを展開させたらアプリケーションフォルダーにドラッグすればインストールは完了です。

Mac OSがMountainLionの場合

MountainLionになってから以前よりセキュリティーが厳しくなり、デフォルトでは未確認の開発元からダウンロードされたアプリは開けません。

preparation_img

システム環境設定のセキュリティーとプライバシーを下図のように変更してCotEdeitorを許可しましょう。

preparation_img

一度許可すれば、それ以後は許可する必要がありませんので、許可をしたら念のために元の設定に戻しておきましょう。

視認性をあげるために書類のカラーリングを設定しよう。

CotEditorは様々な種類に対応しており、書類の視認性をあげるシンタックスも各種設定できます。

preparation_img

環境設定からもっと詳細にカスタマイズする事も可能です。

CotEditorを更に使いやすくしよう

スクリプトでHTMLのショートカットの設定

CotEditorは初見で分らない便利な機能があります。僕的にCotEditorを使いだした理由のひとつが、この機能です。CotEditorは会社でつかっているDreamweaverに比べて起動も動作も軽いので、この機能がある為に、自分のホームページやブログの原稿等もCotEditorで書いています。具体的にはHTMLのタグをショートカットに登録出来るのです。

ショートカットの設定方法

ショートカットの設定の方法ですが、ファイルをリネームし設定します。

  • メニューバーのスクリプトからスクリプトフォルダを開く
  • SampleScript > AppleScript > Extras > XHTML &gt ;の順でフォルダを開く
  • 任意のファイルをリネームしてショートカットにする。

と言った感じの手順です。リネームには法則があります。
CotEditordeではスクリプトファイルに「.」+下記のルール+任意のキーでファイル名をリネームする事によりショートカットを割り当てる事が出来ます。ファイル名に使えないキーは割り当てられません

表記 キー
^ Ctrl(コントロール)
$ Shift(シフト)
~ Option(オプション)
@ Command(コマンド)

たとえばCommand+Option+Shift+Pでショートカットキーを設定する場合

自分でショートカットを増やす場合

デフォルトではよく使うdivタグがありませんので追加してみます。Pタグのスクリプトファイルを開くと下記のようになっています。CotEditorで開きます。

このコードの

のpタグをdivに変更して別名で保存すればOKです。

ファイルの名の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のコーディングは

のように文字列をタグで囲みコーディングします。Zen-Cordingを使えば

すると

のように<div></div>と閉じタグまで自動で入力できます。便利ですよね〜
ですが、HTMLのマークアップを覚えるまでは、使わないほうが良いと思います。ショートカット登録とかコマンドとか覚える事が増えますからね!一通りコーディングを覚えた時に更に便利にこの機能を!って時に使っていただきたいです。

主な機能Wrap with Abbreviation

Wrap with Abbreviationはハイライトされた箇所を囲むようにタグを入力してくれるすごくナイスな機能なのですが、何故か僕のCotEditorではこの機能が動作しません。エラーが返ってきます。現在原因究明中です。ドリでは普通に使えるのですが、原稿を書いたりするときは軽いCotEditorでやりたいので、地味に痛いっす。

Sponsored Links