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

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

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

機能ボタンについて

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

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