感動的に分かりやすい CodeMirror

CodeMirror の英文マニュアルを四苦八苦しながら読んでいるが、CodeMirror でオンラインエディタを作るのは、信じられないくらい簡単だった。

まず、CodeMirror の zip ファイルは既にダウンロードされていて解凍して CodeMirror-master フォルダーができているものとする。そのフォルダの中に myFirstCM.html というファイルを作成して、次のような CodeMirror の骨格を作成する。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My First CodeMirror</title>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
</head>
<body>
<script>
var myCodeMirror = CodeMirror(d_ocument.body);
</script>
</body>
</html>

やっていることは、大したことではない。CodeMirror-master フォルダの中の lib フォルダの中にある、lib/codemirror.js ファイルと lib/codemirror.css を head タグの中でロードして、body タグの中で、CodeMirror 関数に body 要素を引数として渡して、myCodeMirror という CodeMirror のオブジェクトを作っているだけだ。

この myFirstCM.html をブラウザで読むと真っ白な画面が表示されるだけだ。しかし、真っ白な画面の左上の隅をクリックすると、カレットが表示され、キーボードから入力すると文字列が入力されるのがわかる。カーソル移動やキーボード・ショートカットもできて基本的なエディタの性質は既に備わっている。

CodeMirror の魅力的な入力パネルを表示するのは、これに設定を加えていくだけだ。この設定をどうするかというと、CodeMirror 関数の第2引数に設定用のオブジェクトを渡すだけだ。設定がオブジェクトで行われるのを強調するために conf というオブジェクトを body タグの中の script タグの中に作成する。まずは linNumbers 属性を true にすることで、行番号を表示させてみる。コードは次のようになる。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My First CodeMirror</title>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
</head>
<body>
<script>
var conf = {lineNumbers: true}
var myCodeMirror = CodeMirror(d_ocument.body, conf);
</script>
</body>
</html>
これをブラウザで表示してみると、編集パネルに行番号が表示されるのがわかる。随分エディタらしくなってきた。しかし、これでは単なるエディタでしかない。これに JavaScript のコードのハイライトをする機能を付け加えてみる。このためのライブラリは CodeMirror-master フォルダの mode フォルダ内にあるのでこれを head タグの中でロードする。また、conf オブジェクトの mode 属性に "jabascript" を割り当てる。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My First CodeMirror</title>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
</head>
<body>
<script>
var conf = {lineNumbers: true, mode: "javascript"}
var myCodeMirror = CodeMirror(d_ocument.body, conf);
</script>
</body>
</html>

これをブラウザで実行して、JavaScript のプログラムを入力してみると関数名の色が青になったり、カッコのインデントが自動で行われるのがわかる。もうちょっと欲を出して、編集パネルのテーマを変えてみることにする。テーマの CSS ファイルは CodeMirror-master フォルダの theme フォルダの中にある。この中で abcdef.css というテーマを使ってみよう。link タグで abcdef.css をロードし、conf オブジェクトの theme 属性の値を abcdef にする。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My First CodeMirror</title>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="theme/abcdef.css">
</head>
<body>
<script>
var conf = {lineNumbers: true, mode: "javascript", theme: "abcdef"}
var myCodeMirror = CodeMirror(d_ocument.body, conf);
</script>
</body>
</html>

これをブラウザで実行すると、かなり強烈なテーマに変わってしまう。

このように、CodeMirror では

1. 基本になる lib/codemirror.js と lib/codemirror.css という二つのライブラリをロードする。
2. CodeMirror 関数で CodeMirror オブジェクトを作る。
3. 機能拡張を行うときは、該当するライブラリをロードし、CodeMirror 関数の第2引数として渡す設定オブジェクトの属性値を設定する。

という操作を繰り返せば良いことがわかる。この手順をつかんでしまったたら。mode フォルダの100種類以上の言語対応のライブラリを利用して、PHP や Ruby 専用のエディタも簡単に作ることができる。だんだん、CodeMirror を使いたくて、使いたくてたまらなくなる。

追記

上のコードは d_ocument などの部分をもとに戻せば CodeMirror HTML editor で試すことができます。いちいちファイルを作るのが面倒な人はコピペしてやってみてください。

また、CodeMirror にどんなテーマがあるかは、次のページに実例を見られるようにしてあるようです。



[PR]
by tnomura9 | 2016-01-18 22:24 | JavaScript | Comments(0)
<< CodeMirror のテーマ CodeMirror >>