学習用なでしこパッド v1.0

「学習用なでしこパッド」を作ったので公開。

• ChromeBook, iPad, Windows機など，ブラウザ上で「なでしこ」を実行できる。
• 授業で使いやすいように，画面の上部は「プログラムエディタ」と「実行結果（またはエラー表示等）」で構成。
• 「プログラムエディタ」は，ace.jsを利用。
• 起動時には，あえてサンプルプログラムを表示している。そのまま「実行」すると，クジラがしゃべる！ので，学習の導入の興味喚起に。
• 生徒がエラーに気付きやすいよう，エラーメッセージとともに，エラー音を出す。
• 実行結果は，緑色のエリア（<div>タグ）に出力される。そのエリアの下に<canvas>タグを配置しているので，描画命令やグラフ自動作成命令も利用可能。

機能ボタンについて

• エディタの下に「機能ボタン」を配置。
• 画面下部の「お手本」を選んで「お手本読込」を押すと，サンプルプログラムを読み込む。授業の最初に読み込ませると，入力時間を短縮できる。
• 一時保存用として，ローカルストレージを利用して「LSに一時保存」「LSから読込」「LSをクリア」ボタンを設置。
  （この方法の場合，作成したプログラムは，その時使ったコンピュータ上のそのブラウザでしか読み込めない。）
• ファイル形式で保存されている場合（拡張子は.txtにする）は，「ファイル読込」からファイルを選択する。
• ファイル形式で保存したい場合は，ファイル名を入力し（拡張子は.txtが付加される）て「ファイル保存」ボタンを押す。プログラムがテキスト形式のファイルとして，ダウンロードフォルダ内へダウンロードされる。
  （この方法の場合，作成したプログラムはテキストファイルになるので，個人のフォルダへ移動させたり，Google Classroom等で提出させたりできる）

とりあえず作ってみたという感じなので，授業で使いながら，アップデートしていきたいと思います。