人気ブログランキング | 話題のタグを見る

CodeMirror のテンプレート

CodeMirror のテンプレートを作ってみた。下のコードがそれだ。この例では Ruby 用のエディタだが、head タグの中の mod のライブラリの部分と body タグの中の conf オブジェクトの mode 属性の値を置き換えたら、CodeMirror-master フォルダの mode フォルダに登録されている様々な言語用のエディタを作ることができる。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="lib/codemirror.css">
        <script src="lib/codemirror.js"></script>
        <script src="mode/ruby/ruby.js"></script>
        <script src="addon/edit/closebrackets.js"></script>
        <style>
            .CodeMirror {
                border: 1px solid #eee;
                width: 100%;
                height: 580px;
            }
        </style>
    </head>
    <body>
        <input type="file" onchange="loadFile(this.files[0])">
        <script>
            var conf = {
            lineNumbers: true,
            mode: "ruby",
            autoCloseBrackets: true
        }
        var editor = CodeMirror(d_ocument.body, conf);
        function loadFile(file) {
            var reader = new FileReader();
            reader.readAsText(file);
            reader.o_nload = function(event) {
                editor.setValue(reader.result);
            }
        }
        </script>
    </body>
</html>

# by tnomura9 | 2016-01-20 21:26 | JavaScript | Comments(0)

CodeMirror のテーマ

CodeMirror の編集パネルの外観をコントロールする CSSファイル は CodeMirror-master フォルダの中の theme フォルダに収めてあるが、その中身は非常に簡単だ。例えば elegant.css の内容は次のようになっている。

.cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom { color: #762; }
.cm-s-elegant span.cm-comment { color: #262; font-style: italic; line-height: 1em; }
.cm-s-elegant span.cm-meta { color: #555; font-style: italic; line-height: 1em; }
.cm-s-elegant span.cm-variable { color: black; }
.cm-s-elegant span.cm-variable-2 { color: #b11; }
.cm-s-elegant span.cm-qualifier { color: #555; }
.cm-s-elegant span.cm-keyword { color: #730; }
.cm-s-elegant span.cm-builtin { color: #30a; }
.cm-s-elegant span.cm-link { color: #762; }
.cm-s-elegant span.cm-error { background-color: #fdd; }

.cm-s-elegant .CodeMirror-activeline-background { background: #e8f2ff; }
.cm-s-elegant .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }

たったこれだけだ。おそらく CodeMirror の編集パネルオブジェクトの部品の CSS クラス名が theme: "elegant" を指定することによって、CodeMirror() 関数で編集パネルオブジェクトを作成する際に、その部品のクラス名を付け替えるのだろう。これなら、他の CSS ファイルを下敷きにして自分用のテーマを作ることも可能だ。

CodeMirror の構成部品は高度にモジュール化されているので、その設定が非常に簡単にカスタマイズできるのではないかという気がしてきた。

CodeMirror の編集パネル自体の外観も CSS でコントロールできるらしい。CodeMirror : User Manual の Customizing Style の項には、外観をコントロールするための CSS セレクタ名が説明してある。そのうち、.CodeMirror クラスは編集パネルの width, heigth, border, positioning が CSS の宣言法でコントロールできる。他のクラスについてはよくわからなかったが、使い込んでいけば分かるのだろう。

少なくとも CodeMirror の編集パネル(エディタ)の外観をかなり細かく CSS でコントロールできることがわかった。

CodeMirror のエディタはテキストエリアに付加するのではなく、単体としての複雑な DOM 要素であることが分かったし、その外観を CSS でコントロールできることが分かったので、とりあえず使ってみるために残った必要な知識は、どうやってその DOM 要素を文字列として取り出し、どうやってその DOM 要素に文字列を送り込むかという問題だ。

それについては、CodeMirror : User Manual の Programming API に書いてある。手っ取り早く言うと、それらの機能は 編集パネルオブジェクトのメソッドとして定義されており、getValue() 関数で取り出しを、setValue 関数で文字列の送り込みをすることができる。

ここまで調べたかなりいい加減な調査で分かったのが、CodeMirror のエディタは CodeMirror 関数で作成される DOM 要素であって、その外観は CSS で、文字列の入出力は string = cm.getValu() や、cm.setValue(str) のようにオブジェクトのメソッドでコントロールできるということだ。エディタの DOM 要素とテキストエリアを関連付けることはできるが、文字列の編集については、テキストエリアの存在は必要ない。

これで、CodeMirror を利用するときのイメージができたので、あとは色々といじってみるだけだ。というわけで、CodeMirror が使えたという興奮状態がやや治まったので、CodeMirror 関連の記事もこれで終了する。仕事の合間に紹介記事を書くというのは、結構大変だからだ。


# by tnomura9 | 2016-01-19 08:21 | JavaScript | Comments(0)

感動的に分かりやすい 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 にどんなテーマがあるかは、次のページに実例を見られるようにしてあるようです。



# by tnomura9 | 2016-01-18 22:24 | JavaScript | Comments(0)

CodeMirror

emmet を使って自分好みのエディタをオンラインエディタで作れるのが面白くなって、オンラインエディタの JavaScript プラグインを探していたら。CodeMirror というのを見つけた。MIT ライセンスのオープンソフトウェアで高機能のエディタが作れる。

CodeMirror

日本語の資料が少なく、苦労したが、なんとか HTML エディタのサンプルができたので紹介する。CodeMirror の zip アーカイブをダウンロードしてきて解凍した後、CodeMirror マスターのフォルダーに次のコードを cmedit.html などのファイル名で作成し、ブラウザで実行すると HTML 用のエディタが現れる。タグのペアチェックもリアルタイムでやってくれる。view ボタンをクリックすると別ウィンドウでソースをレンダリングできる。DOM 関連の JavaScript 関数はアンダースコアで名前を変えているので修正が必要だ。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="mode/xml/xml.js"></script>
<script src="mode/css/css.js"></script>
<script src="mode/javascript/javascript.js"></script>
<script src="mode/htmlmixed/htmlmixed.js"></script>
<script src="addon/edit/closebrackets.js"></script>
<style>
.CodeMirror {
border: 1px solid #eee;
width:100%;
height:580px;
}
</style>
</head>
<body>
CodeMirror HTM editor:
<input type="button" value="View" o_nclick="viewSrc();">
<script>
var myCodeMirror = CodeMirror(d_ocument.body, {
mode: "htmlmixed",
lineNumbers: true,
indentUnit: 4,
autoCloseBrackets: true
});
</script>
<script>
function viewSrc() {
src = myCodeMirror.getValue();
win = w_indow.o_pen("");
win.d_ocument.o_pen();
win.d_ocument.w_rite(src);
win.d_ocument.c_lose();
}
</script>
</body>
</html>

デモ:CodeMirror HTML editor

ほとんどプラグインを読み込んで設定しただけのプログラムだが、結構使える。ポイントは Emacs 風のキーバインデングがされているところだ。ところで、CodeMirror を使う上でなかなかわからなかったことがあるので注記しておく。

一つは、CodeMirror の編集画面を作るのに textarea は必要ないということだ。編集画面は d_ocument.body を引数にして CodeMirror 関数を呼び出すことで、編集画面のオブジェクトを作ることができる。

もう一つは、CodeMirror の編集画面の外観の設定は、.CodeMirror クラスに対する CSS でコントロールするということだ。

3つ目は、編集画面の内容は、編集画面オブジェクトの getValue メソッドでとり出せるということだ。この3つのポイントがわかっていれば、CodeMirror を利用して簡単に自分のオンラインアプリケーションに高機能のエディタを導入できる。

jQuery, emmet, CodeMirror などのプラグインを使い出したら、途端に JavaScript でプログラムを作るのが面白くなってきた。おそらく、JavaScript がオブジェクト指向言語として本格的に使われ出したからだろう。

# by tnomura9 | 2016-01-18 03:42 | JavaScript | Comments(0)

実数と有理数の根本的な違い

0から1までの区間について考えてみる。この区間に2点の実数をとると、その間には必ずその2点とは異なる実数が存在する。どんなに最初の2点の間隔を狭くしても事情は異ならない。実数の場合隣り合う点は存在しない。なぜならどんな2点でもその間に点が存在するからだ。

ところが、実数のこの性質は有理数も持ち合わせている。有理数の場合もどんな2点の間にもその2点とは異なる有理数を見つけることができるからだ。しかし、有理数は自然数と濃度が等しいが、実数はそうではない。一体どこが異なるのだろうか。

0から1までの有理数はぎっしりと詰まっている(稠密)。しかし、有理数の一点は分母と分子というペアの関数としてあらわすことができる。分子と分母が確定すれば、有理数の値は確定する。そうして、分母と分子はそれぞれ自然数である。自然数は1から始まって列挙していくことができるので、分子と分母の値を交互に増やしていけば、すべての有理数は列挙できる(数えつくすことはできないが)。

ところが、実数を無限小数であらわした場合実数の一点とは無限次元のタプルからの関数になる。このため、実数の一点には常に確率的な揺らぎが伴っている。無限次元のタプルを確定することができないからだ。つまり、実数には有理数の意味での一点は存在しないのだ。それは、本質的にある範囲の確率の中にあるとしかいえない。

このように実数は有理数の意味での一点として扱うことができないことが、加算な集合と非加算な集合の濃度が異なる理由だ。

# by tnomura9 | 2016-01-16 16:32 | 考えるということ | Comments(0)