Jarminal - terminal of JavaScript on browser

JavaScriptの為のターミナルツール「Jarminal」の紹介

Author
37to

Enter:進む　Shift+Enter:戻る

Agenda

  1. Jarminalとは？
  2. 特徴
  3. 使い方とか
  4. まとめ

1.Jarminalとは？

開発動機

jQueryベースのプレゼンツール（この資料が動いているツール）を作っていた時に、Greasemonkeyのminibufferみたいな事が出来るツールが欲しかった。

要件としては、任意の関数をCUIから呼び出せるだけでいいので、ライブラリを探してみる

Jash: JavaScript Shell

NitobiBug - Browser based debugger

JavaScript Terminal

JavaScript Shell 1.4

Interactive JavaScript Shell

色々あるけど、しっくりくるものがないので、自作を考えてみたのが開発のきっかけ。

2.特徴

目指す所

ターミナルとしての基本機能

3.使い方とか

準備

  1. スクリプトを読み込ませる（まだブックマークレットは作ってないので）
  2. 画面上でダブルクリック
  3. 出て来たターミナルにコマンドを入力するだけ

手軽にJavaScriptのコードが実行出来る


(function test(){
    alert('Kanasan.JS');
})()

オブジェクトの中身も見れる

cd jQuery ls

jQueryのプロパティ一覧が見れる

カレントスコープの概念

デフォルトで「window」と表示されている部分が現在のスコープ

ls

lsで現在のスコープのオブジェクト一覧が見れる

cd document

cdでスコープを移動出来る

getElementsById('screen')

スコープを移動すると、現在のオブジェクトは省略して実行出来る

内部ではwithを使っている。withもたまには思い出してあげて下さい。

コマンドは自由に拡張出来る


jarminal.command.list.mycommand = {
    desc : 'my command',

    /**
     * 引数には入力された
     * コマンドの情報が
     * オブジェクトとして入ってくる
     */
    func : function(input){ /* code */  }
};

API部分の仕様が固まっていませんが、上記のような形で拡張可能

UIは自由に定義出来るので、既存アプリケーションに組み込み可能

デフォルトではjQuery UIを利用して、ウィンドウのようなUI
UI部分のコードは分離しているので、使用するライブラリやUIは独自に定義可能
script.auculo.usとかdojoとか
ウィンドウじゃなくても、通常のhtmlに埋め込むとか

ブラウザに依存しない

ブラウザに依存しないので、汎用的なデバッグツールとしても使える

console.log()みたいな機能もあるので、IEとかFirefoxでも同じようにログ表示出来る

4.まとめ

今後とか

ご清聴ありがとうございました！