はじめに
こんにちは。
GMO NIKKOのKONCEです。
今回はJS製エディタのAceについて調べる機会があったのでブログの題材にしてみます。
使用するケースはかなり限られてくると思いますがよければご覧ください
背景
ネイティブアドの取り扱い
僕の担当しているプロダクトGMOSSPではネイティブアドを取り扱っています。
ネイティブアドはデマンド側のサービスに対して広告素材を要求してGMOSSPでデザインを当てていきます。そのため、管理画面からデザインを登録更新できるフォームを用意しています。
運用面の課題
基本的には担当者がHTML/CSS/JavaScript のタグを登録/編集して運用しています。その中で通常のテキストエリアを使用してきましたが、
- タグの不備
- 全角の混入
- 画面上での操作性
など課題がありました。不備などはバックエンドのバリデーションでケアできればベストだと思いますが、操作性の向上にはつながりません。
その中で出た対応がテキストエリアのエディタ化でした。
Ace について
Ace は JavaScript で書かれた埋め込み可能なコードエディタで
- 豊富なSyntax Highlight
- オートインデント
- コード内での検索と置換
- 構文チェック
など操作性、ミスの減少の面で課題解決できます。
Aceの使用方法
divやpreタグに対して
- ace.js のロード
- ace.edit() のセット
- テーマやオプション、モードの設定
でAceを使用することができます。
ext-language_tools では自動補完の設定を有効にするため使用しています。
See the Pen ace_sample by kasai kosuke (@kasaikousuke) on CodePen.
テキストエリアへの反映
Aceのエディタ内の現在のコードを ace.edit().getSession().getValue() で取ることができますので
- フォームとテキストエリアを用意
- テキストエリアからAceエディタの div を作成
- テキストエリアを非表示
- submit でテキストエリアの value をAceエディタの内容にする
ことで既存のフォーム内のテキストエリアにもAceエディタを実装することができます。
See the Pen Untitled by kasai kosuke (@kasaikousuke) on CodePen.
エディタでの変更を検知する
HTML/CSSのエディタとして使用するのであればプレビューに反映させるのもありかもしれません。
Aceエディタでの変更はそれぞれの行の ace_line クラスに対して行われるようです。
よって MutationObserver でace_line クラスに対して変更が加えられたことを監視することでプレビューを反映させることができます。
他にも getCursorPosition() で現在のカーソル位置を取れたりするのでフォームとしての運用も可能かと思います。
See the Pen ace_smple_ads by kasai kosuke (@kasaikousuke) on CodePen.
おわりに
今回は Ace.js とその利用方法について調べてみることができました。
どこかで役立てば幸いです。
