* JavaScript コンソール [#lc5fa7cb]

この度，ブラウザ上で JavaScript プログラムを簡易に開発するための環境として「JavaScript コンソール」を開発しましたので，ここに発表致します．

製品画面イメージを以下に示します．((画像は開発中のものであり，製品版とは異なる場合があります．))

#ref(jsconsole.png,center,50%,製品画面イメージ)


** 特徴 [#t2ac7c17]

従来の JavaScript プログラム開発は，
> エディタで編集 → ブラウザにロード → 修正 → …
というサイクルを繰り返すことが必要でした．

本環境では，ターゲットプログラムの出力をテキストエリアへの文字情報に制限することにより，プログラムの編集から実行までを web ブラウザ画面で行うことが可能となりました．

また，従来の統合開発環境でありがちな複雑なメニューを排し，''伝統的な''ユーザインターフェースを採用いたしました．
これにより，操作に惑うこと無くプログラム開発が行えるものと信じております．


** 対応環境 [#wcad72f1]
以下のブラウザで動作することを確認しました．

:forefox 3.0.7|
Debian/Lenny (iceweasel), Windows Xp
:Internet Explorer 7.0|
Windows Xp

** 起動方法 [#e1bfadfd]

以下の２つの方法があります．

*** オンラインで使用 [#mfa20413]

http://jr0bak.homelinux.net/~imai/linux/jsconsole/jsconsole.html にアクセスしてください．

*** オフラインで使用 [#n5703331]

http://jr0bak.homelinux.net/~imai/linux/jsconsole/jsconsole-0.1.tar.gz より tar ball を取得できます．

tar ball を展開した後，jsconsole.html を開いてください．

** 動作モード [#q354d44d]
本製品の動作モードは
- 編集モード
- コマンドラインモード
- 実行モード

の３モードがあります．

各モード間の遷移は下図のようになります．

             − exit コマンド →                      − run コマンド →
 編集モード                      コマンドラインモード                    実行モード
             ← edit コマンド −                      ←プログラム終了−

** 各部の説明 [#m5ae312a]

#ref(jsconsole_desc.png,center,50%,各部説明)

*** 1. ステータス表示行 [#c2c8bb0f]

動作モードを表示する行で，
:edit|編集モード
:command|コマンドラインモード
:run|プログラム実行モード

を表します．

*** 2. 出力テキストエリア [#c8e5a62e]
プログラムの実行結果を出力するエリアです．
編集モードではこのエリアにプログラムを入力します．
その他のモードでも，本エリアへの入力や編集ができることもありますが，開発環境への指示とはなりません．

*** 3. コマンド入力行 [#ie635e81]
コマンドラインモードでは，ここにコマンドを入力することにより，指示を与えます．
編集モードでは，編集モードを終了する「exit」コマンドのみを受け付けます．

なお，コマンドライン入力では，簡易的な補完機能があります．
例えば，本来は
 list()
と入力すべきところに
 list
と入力しても，省略した括弧を補完してコマンドを実行します．

なお，この補完機能はコマンドラインのみで働きます．
従って，プログラム中では括弧を省略することはできません．

** クイックツアー [#kcbc243c]
例題として，「Hello,world」を表示させる，おやくそくのプログラムの作成から実行までを行ってみましょう．

*** 本製品を起動します [#q048fb61]

*** 編集モードに入ります [#m22984ef]
コマンド入力行で
 edit
と入力します．最後に Enter キーを押すのを忘れずに．

*** 出力テキストエリアにプログラムを入力します [#wd868454]

 print ( "Hello,world\n" );
 
 
 
 
 

 　



*** 編集モードを抜けます [#ne738eb6]


 print ( "Hello,world\n" );
 
 
 
 
 

 exit

コマンド入力行に exit と入力しましょう．

*** メモリ上のプログラムの確認 [#mfa6406d]

コマンド入力行で

 list

と入力してください．
出力テキストエリアに

 list
 print ( "Hello,world\n" );
 
 Ready

と，プログラムの内容が表示されましたね．

*** 実行 [#rf76cd34]
コマンド入力行に
 run
と入力しましょう．

出力テキストエリアに

 run
 Hello,world
 
 Ready

と出てきたら成功です．


** 拡張コマンド [#sa29021f]

本製品はブラウザの JavaScript 上で動作しております．
開発するプログラム内において，ブラウザの JavaScript の関数を利用することが可能です．

これに加え，開発環境の操作やリソースへのアクセスのためのコマンドを拡張しています．

拡張コマンドの一覧を下表に示します．

|コマンド名|コマンドライン|プログラム|コマンド説明|h
|run|○|×|ターゲットプログラムの実行|
|list|○|○|ターゲットプログラムの表示|
|edit|○|×|ターゲットプログラムの編集|
|newp|○|×|ターゲットプログラムの消去|
|help|○|○|拡張コマンドのヘルプメッセージの表示|
|print|○|○|出力テキストエリアへの出力|
|cls|○|○|出力テキストエリアの表示内容の消去|
|width|○|○|出力テキストエリアの桁数・行数の変更|
|color|○|○|出力テキストエリアの前景色・背景色の変更|
|prompt|○|○|プロンプトの変更|
|files|○|○|退避領域にあるファイルの一覧|
|load|○|×|退避領域のファイルをプログラム領域に読み込む|
|save|○|○|プログラムを退避領域に書き込む|
|kill|○|○|退避領域のファイルを削除|

*** run [#t7b3b9df]
:概要|プログラムの実行
:つかいかた|run()
:使用可能|コマンドモード
:説明|
メモリ上にあるプログラムを実行します．
起動直後はプログラムが無いので，run コマンドを実行しても何も起こりません．

*** list [#m9fbb5d0]
:概要|プログラムの表示
:つかいかた|list()
:使用可能|コマンドモード，プログラム
:説明|
メモリ上のプログラムを出力テキストエリアに表示します．
このコマンドではプログラムを表示するのみで，表示したプログラムを編集することはできません．
プログラムを編集するには，edit コマンドを使用してください．

*** edit [#q4d5b2dd]
:概要|プログラムの編集
:つかいかた|edit()
:使用可能|コマンドモード
:説明|
このコマンドを実行すると，出力テキストエリアでプログラムの編集を行うことができます．
編集を終了するには，コマンド入力行で exit と入力してください．

*** newp [#f67f5908]
:概要|プログラムの消去
:つかいかた|newp()
:使用可能|コマンドモード
:説明|
メモリ上にあるプログラムを消去します．
new でない理由はわかりますね．

*** help [#keca28dc]
:概要|拡張コマンドの使い方の表示
:つかいかた|help([コマンド名])
:使用可能|コマンドモード，プログラム
:説明|
引数を省略した場合は，拡張コマンドの一覧を表示します．
引数を指定した場合は，指定したコマンドのヘルプメッセージを表示します．

*** print [#v1fb99a7]
:概要|引数の表示
:つかいかた|print(変数 [,変数[,変数...]])
:使用可能|コマンドモード, プログラム
:説明|
引数に指定された変数を画面に出力します．
引数は複数指定することができます．

*** cls [#edd5263b]
:概要|出力テキストエリアのクリア
:つかいかた|cls()
:使用可能|コマンドモード, プログラム
:説明|
出力テキストエリアを消去します．

*** width [#t72aa922]
:概要|画面の桁数・行数の変更
:つかいかた|width(桁数[,行数])
:使用可能|コマンドモード，プログラム
:説明|
画面の桁数と行数を変更します．
行数は省略可能です．
コマンド名から想像される動作と異なるかもしれません．

*** color [#a534a2cf]
:概要|出力テキストエリアの前景色・背景色の変更
:つかいかた|color(前景色[,背景色])
:使用可能|コマンドモード，プログラム
:説明|
出力テキストエリアの前景色と背景色を変更します．
背景色の指定は省略可能です．
色は数値で指定します．
::0|黒
::1|青
::2|赤
::3|紫
::4|緑
::5|空色
::6|黄色
::7|白

8〜15 は，0〜7 の暗い色となります．
このコマンドも，想像される動作とは微妙に異なるかもしれません．

*** prompt [#i6491830]
:概要|プロンプトメッセージの変更
:つかいかた|prompt(Z80) もしくは prompt(6809)
:使用可能|コマンドモード，プログラム
:説明|
プロンプト（初期状態では 'Ready' と出力されているメッセージ）を変更します．
引数に Z80 と指定した場合は 'Ok' と，6809 と指定した場合は 'Ready' となります．

*** files [#b2e52de5]
:概要|退避領域にあるファイルの一覧
:つかいかた|files()
:使用可能|コマンドモード，プログラム
:説明|
退避領域にあるファイルの一覧を表示します．
退避領域については save コマンドを参照のこと．

*** load [#sdeab3ab]
:概要|退避領域のファイルからメモリ上にプログラムを読み込む
:つかいかた|load('ファイル名')
:使用可能|コマンドモード
:説明|
退避領域のファイルからメモリ上にプログラムを読み込みます．
退避領域については save コマンドを参照のこと．

*** save [#f31231e1]
:概要|メモリ上のプログラムを退避領域に退避
:つかいかた|save('ファイル名')
:使用可能|コマンドモード，プログラム
:説明|
メモリ上のプログラムを退避領域に退避します．
退避領域はメモリ上に確保されています．
ホスト PC 上のディスクに保存されるわけではありません．
このため，本環境のページを閉じると，退避領域上のファイルも消えてしまいます．
保存が必要なプログラムは，メモリ上に呼び出し，edit コマンドや list コマンドで表示させ，コピー＆ペーストでテキストエディタ（メモ帳など）に貼り付け，ホスト PC 上に保存してください．

*** kill [#n87e5943]
:概要|退避領域上のファイルを削除
:つかいかた|kill('ファイル名')
:使用可能|コマンドモード，プログラム
:説明|
退避領域上のファイルを削除します．
退避領域については save コマンドを参照のこと．

** サンプルプログラム [#n5f0f448]

プログラムのサンプルとして [[Brainfuck>WikiPedia.ja:Brainfuck]] インタプリタを添付します．

#ref(brainfuck.js)

PC 上のテキストエディタで開き，本環境の編集画面にコピー＆ペーストしてご利用ください．

** 免責事項 [#w5c8c659]
本製品の利用によって生じた障害・損害等について，作者は一切担保しません．
本製品は使用者の責任において使用してください．

** エイプリルフールネタです [#xbc6448e]
念のため書いときますが，本製品はあくまでもエイプリルフールネタです．

上記の説明どおりの動作はすることはするのですが，実際のところ
- ターゲットプログラムが無限ループに入った場合，停止させる手段が無い
- ターゲットプログラム上でエラーが発生した場合，発生箇所がわからない

ので，本格的なプログラム開発には使わん方が身のためです．
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS