コメントを残すなかなか不安定だけど未来を感じさせると自分の中で話題のサービス、Cloud9で使われているACEエディター(現時点でバージョンは1.1.3)の使いかたを調べてみた。ここでいう使い方とはACEエディターを使ったウェブページを作ること。ACE自体はライブラリとしてほかのサービスから使えるようになっている。ACEはエディターとは言ってもブラウザで動作するため、直接ローカルのファイルを読み書きするものではない。どちらかというとTEXTBOXタグが、プログラム言語を編集するために豪華になった感じだ。ACEを使うだけなら数行のコードだけでできる。エディタを表示するためのPREタグを用意して、そのタグをエディターにするためにライブラリの呼び出しをして、プログラミング言語やテーマの設定をすればいい。GuideにもサンプルコードがあるがHTML全体でも30行ほどに収まる。ACE自体にデータをロード、セーブする機能はないので、JavaScriptからテキストを渡すことになる。EditSessionやDocumentクラスを使うと一つのテキストを複数のエディターで編集できるようになる。EditorはUIを実装しテキストの表示やキー、マウスの入力を行う。EditSessionはカーソルの位置やテキスト選択を管理し、Documentは実際のテキストを保持する。Editor、EditSession、Documentクラスの関係は下の図のように、複数のEditorでEditSessionを共有したり、複数のEditSessionでDocumentを狂できるようになっている。サンプルのコードでは左の2つのEditorはEditSessionを共有し、カーソルや選択が同期される。3つのEditorはすべて同じDocumentを編集するので編集内容は共有される。relativeかabsoluteを設定し、width、heightを明示的に設定する必要がある。.../min/ace.jsはrequireやdefineなどAMDで使われる関数をグローバルに宣言するためDoJoなどrequireやdefineを定義するライブラリと衝突する。.../noconflict/ace.jsを使うと、ace.requireやace.defineを使ってくれるので衝突を回避できる。kiidax元、環境非依存な職業プログラマー。Blenderで遊んでいます。コメントをキャンセルコメントを入力してください。以下に詳細を記入するか、アイコンをクリックしてログインしてください。アカウントを使ってコメントしています。アカウントを使ってコメントしています。アカウントを使ってコメントしています。アカウントを使ってコメントしています。新しいコメントがついたらメールで通知。使用に同意したとみなされます。ポリシー%d人のブロガーが「いいね」をつけました。