ALGOBIT

2011/04/15

Interactive CUI in web pages

Filed under: 離散的な気まぐれ — タグ: — Kohyama @ 20:30

いくつかの用途(オレオレスクリプトの実行環境をWEBページ上に配置するとか)で, WEBページ上にシェルっぽい環境が欲しかったので, 対話部分だけ分離して実装しました.

readline, rlwrap, jLine の JavaScript 版みたいなもんです.

プロンプト prompt> に対して入力を編集して Return キーを押すと,
入力文字列を [] で挟んで出力します.

編集中の行内のカーソルの移動に , , Home, End, Ctrl-f, Ctrl-b, Ctrl-a および Ctrl-e が使えます.
入力履歴を , , Ctrl-p および Ctrl-n で移動できます.
Backspace もしくは Ctrl-h でカーソルの前の文字を削除し, カーソルを一文字前に戻します.
Delete もしくは Ctrl-d でカーソル位置の文字を削除します.
Ctrl-k でカーソル位置より後ろを削除します.

同じことをするのにあなたが書くべき JavaScript は 7行.
格納するための HTML ファイル全体で 11行です.

<html><head><title>jsReadLine Demo</title>
<script type="text/javascript" src="ReadLine.js"></script>
<script type="text/javascript">
window.onload = function() {
    var rl = new Algobit.ReadLine(80, 24);
    var b = document.getElementsByTagName('body')[0];
    b.appendChild(rl.textarea);
    rl.print("prompt> ");
    rl.gets = function(s) { rl.print("[" + s + "]\nprompt> "); };
}
</script></head><body></body></html>

ソースとか詳しい説明はこちら: github.com/kohyama/jsReadLine

次回! jsReadLine を使ったオレオレスクリプトの REPL!

Copyright © 2010 Yoshinori Kohyama All Rights Reserved.