Codetch 0.4.0 beta

• Codetch.com(本家サイト)

日本語版はないものの、文字コードをUTF-8に限定すれば、日本語のWebページを開発できるHTMLエディタだ。図6、図7に示すとおり、Firefoxのタブ内あるいは別ウィンドウで動作させることができる。そして、FireFTPという拡張機能によるFTPツールも別タブで実行することもできる。一瞬、名前の読み方を迷いそうだが、code+etchで「コーデッチ」と読むのが正しいようだ(FAQ参照)。ちなみに、etchは銅版画や電子回路基盤の加工で行われるエッチング(etching)の原形だ。

図6 Firefoxのタブ内で動作しているところ	図7 別ウィンドウで動作しているところ

ダウンロードとインストールは、ダウンロード用のページで最新のバージョンをクリックして行う。インストールされただけでは起動しない。「ツール」→「codetch」のあと、「Tab」をクリックすれば新しいタブで、「Float」をクリックすれば別ウィンドウで起動する。どちらも機能は同じなので、ユーザーの好みで利用していただきたい。

開発の場面では、メニューを選択してソースコードにタグを追加する方法でWebページを作成し、完成したらブラウザでプレビューする、という流れになる。別ウィンドウで動作させたシンプルな例で紹介しよう。

まず、図8のようにHTMLソースコードを編集する。右ペインがエディタになっており、ソースコードの入力ができる。先頭のDOCTYPE宣言は、左に表示されたフォルダの中から該当するものをダブルクリックすると、自動的にエディタ画面に追加される。ここにはユーザー自身でよく入力するフレーズを登録しておくことができる。

図8 HTMLソースコードの編集	図9 プレビュー画面

HTMLタグを追加するときは、たとえばH1タグであれば「Modify」→「Paragraph Format」→「Heading 1」の順にクリックすると、エディタに"<h1></h1>"が追加され、中央にカーソルが移動する。あとはここに見出しを入力すればよい。

HTMLが完成したら、エディタの下にある「Preview」をクリックして画面表示を確かめる。下のペインはエラーコンソールになっており、JavaScriptやCSSに不具合があれば、ここにエラーメッセージが表示される。

HTMLなどに問題がなければ、W3Cの検証サービスで標準に合致しているかを確かめる。このときは「Tools」→「Validate HTML」をクリックすると別タブが開き、図10のように検証結果が表示される。W3Cの標準に合致していれば、緑の背景色でメッセージが表示されるが、エラーがあるとそれが赤になり、その下にエラーの内容が表示される。HTMLを修正したら再度検証を行い、エラーが表示されないようにしておこう。

図10 HTMLの検証

検証を終了したら「File」→「Save」をクリックしてソースコードを保存する。通常のWebブラウザでは、ファイルをアップロードするときしかローカルのファイルを操作できないようになっているが、拡張機能の場合はソースコードの保存もローカルファイルとして実行することができる。

バージョンが0.4.0 betaということもあってか、日本語版がなかったり、筆者の環境ではURLを指定してWebサイトを読み込むことができないなどの問題があったものの、統合開発環境を使うまでもない、というユーザーには十分な機能を持っているのではないかと思う。