ようこそ Coda デベロッパ ゾーンへ
panic.com/jp に戻る



エディタ機能を習得する

最終更新日: 2009年4月27日 (Coda 1.6.4)

Coda を使用していく上で恐らくメイン機能となるであろうエディタについて解説します。

エディタについて数多く記述できることがありますが、一方でみなさんが Mac 上で日頃使用しているテキストエディタと基本部分はよく似ています。ですので、ここでは Coda エディタの特長的な部分や作業時間を短縮できる使用方法などを特に紹介します。

象徴的なジェスチャ

ぜひ最初にシンボルペインをオンにすることをお勧めします。ファイルブラウザの下にある波括弧のアイコンをクリックするとそれは現れます。

これは現在エディタで開かれている書類内のすべての "シンボル" を表示します。それらは構文モードごとに変化し、クリックするとそれぞれの場所にジャンプします。

シンボルには例えば HTML モードの場合には H1-H6 ヘッダが含まれます。同様に PHP モードの場合ではファンクションやクラスが含まれ、また CSS エレメントなども表示されます。

また、ファイルの中の任意の位置に "ブックマーク" を追加することができます。HTML もしくは CSS ファイルに以下の文字列を埋め込むことで可能となります:

<!-- !Cool stuff happens here -->
(感嘆符は省略しないでください。)

PHP の場合は以下のようになります:

//- mark Cool stuff happens here
("mark" の前後にはスペースが必要です。)

CSS の場合:

/* !bookmark */
(エクスクラメーションマークの後にスペースが必要です。)

移動メニューの "次のシンボル" および "前のシンボル" を使用することでも、すばやくシンボル間を移動することができます。

言語ごとのブックマーク構文ガイドはこちらをご参照ください。

カラーコピー

今度は編集メニューにある "XHTML としてコピー" に注意を向けてください。コードの選択部分を XHTML としてコピーすると、現在の構文モードのカラーリングを保持した状態でクリップボードに保持されます。コードサンプルを Web ページに掲載するときなど、とても便利です。

行番号、不可視文字、変更マーク

表示メニューからこれらの情報の表示/非表示を選択することが可能です。"不可視文字" を表示すると、スペースやタブコード、改行コードなどの通常は表示されない情報が表示されます。"変更マーク" を表示するとコラボレーション編集を行っている場合、それぞれの編集者の変更箇所がカラーリングされます。

ブロック編集

ブロック編集は選択された複数の行の内容を一度に変更できる機能です。ブロック編集モードに入るには、option キーを押しながら編集したい範囲をドラッグします。

ブロック編集モードではある行に入力された内容が、選択範囲内の他の行にも自動的に挿入されます。

ブロック編集モードを終了するには、ESC キーを押すか、選択範囲外に入力します。

スペースとタブコード

書式メニューには、スペースのタブコード化/タブコードをスペース化があります。スペースをタブコード化を選択すると、スペースをすべてタブコードに変換し、タブコードをスペース化を選択すると、タブコードをスペースに変換します。タブコードの幅は環境設定で設定が可能です。

色を操る

書式 > カラーパネルを表示を選択すると、システム標準のカラーパネルが表示されます。カラーパネルから任意のカラーを選択し書類にドラッグすると自動的に HTML/CSS 16進数コードに変換して挿入します。

コードを自動で補完する

Coda にはコードの入力に応じて定型文を自動的に補完する機能が搭載されています。補完される内容は使用している構文モードによって異なります。HTML モードで編集しているならば HTML コードを補完し PHP モードで編集しているならば PHP コードを補完します。

HTML コード補完機能では文脈を認識していることに注意が必要です。<img を入力しスペースをその後に入力した場合、<img> タグに適用される alt や src、width、height などの属性が入力されます。

閉じタグについてはどうでしょうか? 閉じタグが入力されるべき状況ならば、右大括弧キーを押してください。Coda は自動的に閉じタグに変換して入力します。

もしコード補完機能の挙動がお気に召さないなら、それをオフにすることも可能です。また環境設定では細かく挙動を設定することができます。

エース級の検索と置換

私たちは今回、伝統的な検索/置換インタフェースの改良に挑戦しました。

コーディングに集中しているエディタウインドウの上に、検索の度に巨大なダイアログが現れるのはとても愚かに思えました。バナースタイルの検索ダイアログはとてもコンパクトです。しかし、サイズ変更ハンドルをドラッグすることで、いつでも自在にサイズを変更できます。

さらに、検索置換で利用できるとてもクールなワイルドカードについてご紹介します。

ここに非常に巨大な HTML ファイルがあるとします。あなたは画像の幅と高さの値を間違えていたことに気付きました。すべての <img> タグ毎に数値を置き換える必要があります。恐らく、コーヒーブレイクを取りながら正規表現に関する参考書を開こうとするでしょう。

その前に、これを試してください!:

regex

ワイルドカードボタンをクリックして、青いマークを挿入します。これは任意の文字列によって置換されるプレースホルダです。

そして置換フィールドでは、ワイルドカード自体も置換されます。

"すべて" ボタンをクリックすると。。。すべての値が置き換えられました。1日は確実に節約できたでしょう!

さらに、通常は正規表現を知っていなければできないことを簡単にやってのけました。

既にあなたが正規表現に詳しいならば、チェックマークのメニューから正規表現オプションを選択してください。

3人寄れば文殊の知恵

もしあなたがまだ SubEtha エンジンによるパワフルな編集機能を未体験なら、ぜひお試しください。

書類をホストとなって共有するか、共有された書類の編集に加わることができます。

書類を共有するには、現在作業中の書類の下にある共有ボタンをクリックし、共有バナーを表示させます。そして "Bonjour" ボタンをクリックします。こうすることであなたの書類はローカルネットワーク上の他のコンピュータから見えるようになります。他の Coda および SubEthaEdit ユーザに対しこの書類の編集を招待する場合は "招待する" ポップアップメニューを使用します。

共有されている他人の書類の編集に加わるには、ファイルブラウザの下にある共有アイコン(左から3番目のボタン)をクリックします。ローカルネットワーク上の他の Coda または SubEthaEdit ユーザによって共有されている書類がある場合、このウインドウにリストアップされますので、加わりたい書類をダブルクリックします。

ローカルネットワーク外のインターネット経由で共有されている書類の編集に加わるには "接続する..." ボタンをクリックしてホストアドレスを入力します。(codingmonkeys.de でテストサーバが運用されています。お試しください)

ファイル > アクセス権から書類を共有した場合のアクセス権を設定することが可能です。

クリップを使いこなす

エディタの下にある "クリップ" ボタンをクリックすると、クリップウインドウが表示されます。

クリップは開発を行う上でよく使う文字列を保存しておくものです。デフォルトでいろいろなバージョンの HTML DOCTYPES やプレースホルダを含んだベーシックなページ構成、Lorem Ipsum テキストなどが準備されています。

これらを使用するには単にダブルクリックするか、ファイル上にドラッグします。

独自のクリップを作成する際には、以下について知っておいてください:

1. クリップには特定のサイトでのみ使用するか、グローバルで使用するかを選択するオプションがあります。

2. プレースホルダが利用可能です。

プレースホルダを使用すると、クリップが挿入された際に書類上で選択されてた箇所がプレースホルダの位置に自動的に挿入されます。

例えば、<b>(*)</b>((*) はプレースホルダを意味します)というクリップがあった場合、書類上の任意の部分を選択した状態でこれを挿入すると、選択されていた文字を <b> タグで自動的に包みます。

最後に、TABトリガについて説明します。短い単語やフレーズの後に TAB キーを押すと、設定されたクリップが挿入される機能です。例えば lorem と入力後 TAB キーを押すと、Lorem Ipsum が挿入されます。

拡張子と構文モードの関連付け

スタンダードな拡張子(.html や .php など)以外の書類を Coda で開く際、常に HTML モードで開かれてしまうことにイライラすることがあるかも知れません。そのような場合は Coda の環境設定のエディタタブにある "カスタム構文モード" を設定してください。PHP が含まれている .tmpl ファイルを編集するので PHP-HTML モードに関連付ける、というようなことが可能です。