ブログを開設してもうすぐ１か月ほどが経ちます。ご覧いただき、またスターや読者登録をしていただきありがとうございます。
ここ最近は通信制大学での経験をわすれないうちにまとめておこうと集中的にアップしています。
アクセス数自体は、enchant.jsなどJavaScript関連の技術情報への方が多いです。enchant.jsについては授業の中で学生から出てきた質問などを今後Qiitaの方へまとめていこうと思います（Qiita Teamにも興味があるため）。
続きを読むJavaScriptで作ったゲームをアプリ化する
JavaScriptを使って作ったブラウザ上で動くゲームを、簡単にアプリにできます。
今回はゲームづくりからアプリ化まですべて、ブラウザ上だけで行いました。
ゲーム作りはjsdo.itというサイトでプログラミングを、アプリ化はmonacaのサイトを利用しました。
もし画像の加工が必要な場合は、Fotorなどの無料オンライン写真・画像編集サイトも各種あります。
処理速度などをシビアに求める場合はJavaでアプリを開発するのが一番だろうと思いますが、HTML5+JavaScriptでもいろいろなことができますね。
詳しい手順はこちらに載せました
良かったらご覧ください。
来年度の授業準備 - JS開発環境 その２
来年度の授業準備 - JS開発環境 その１のつづきです。
JavaScriptの記述と実行が簡単にできて、授業中に情報共有ができる開発環境を検討中です。今年度の授業環境については過去記事2017年度の授業環境 （HTML5+JavaScript）に書きました。
前回チェックしてみたもの
今回チェックしたもの
CodePen
無料と有料のプランがありますが、無料プランでチェックしました。
シンプルで、日本語化されてはいないが操作も分かりやすい。JavaScirptのメジャーなライブラリーがすぐに使える。
Fork機能があるのも良い。プロジェクト(Pen）のシェアはURLが分かればできる。
有料プランではチーム開発にも対応している。
Lineweave
HTMLファイルのheadタグ内含めた内容が表示されるので、HTML・CSSの基礎を学ぶのにとても使いやすそうです。
CSS用エディタ画面、CSS Explorer、カラーパレット、画像エディタなどがあり便利。
メジャーなJavaScriptライブラリもすぐに使える。
チャットの機能があり、大人数の授業で役立ちそう。Team Up機能というのも気になる。
※2018.2.11、2018.2.12現在、新規ユーザ登録が一時的に出来ないというメッセージ（「New user registration has been temporarily disabled」）が表示されます。登録画面には移動できるが、入力してもアカウントは作成されない様子。後日再チェック。
Plunker
ファイルを複数作成できるのが良い（jsdo.itではできずに困った）。Fork可能。Gitterが使える。シンプルで使いやすい。
個人的な印象として少しコーディングに慣れた学生の方が利用しやすいかもしれない。
感想
授業中に、講師のパソコン画面をプロジェクタでホワイトボードに投影して見せるよりも、オンラインで使えるツールで画面を各学生のモニタに共有して見せる方が、学生にとって見やすく分かりやすいかもしれない。
どれがベストなツールかを考え始めるとキリが無くなりそうなので、ある程度条件を満たす良いツールがあれば、まずは実際に授業で使ってみたいと思う。
その他参考記事
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
2017年度の授業環境 （HTML5+JavaScript）
来年度の授業準備のことについて１つ前の記事に書きましたので、今のHTML５＆JavaScriptを使ったプログラミングの授業の環境についても概略を書いておこうと思います。
HTML5+JavaScriptの実習環境
使用ライブラリ
enchan.js
授業では、enchant.jsライブラリを使用。プログラミングの効率を上げ、プログラミングについての理解に絞った学習を行うためです。
また初歩的なものはもちろん、かなり高度なプログラミングも作れます。１つのクラスの中で学生それぞれのスキルに合った実習を行うのにも役立っています。理解が進んだ学生には、enchant.jsのコードそのものを読むことも勧めています。
Three.js/Node.js/JQuery
今年は特に使用しませんでしたが、enchant.jsと組み合わせたものをサンプルとして見せたり、学生が制作課題に組み込んだことがあります。
どれもJavaScriptがベースで、テストは不可欠ですが組み合わせられるのが良いですね。
プログラムの開発環境
HTML5+JavaScriptでのプログラミングを始めて実習する１年目のクラスと、既に経験のある２年目のクラスでは開発環境を変えています。
１年目用の開発環境
code9leap
２年目用の開発環境
jsdo.it
２つの開発環境の比較記事
enchant.jsや各環境については、Qiitaの投稿（enchant.js開発環境比較）をご覧いただけましたら幸いです。
過去記事
１つ前の記事がこちら。
来年度の授業準備 - JS開発環境 その１
来年の授業環境を検討しています。
授業概況
- 授業目的ーHTML5プログラミングの学習（ゲームを作る）
- 使用言語ーJavaScript/HTML/CSS（実際に触るのはJvaScriptのみ）
- 開発環境ーcode.9leapまたはjsdo.it
授業では、基礎知識やイベントドリブン、オブジェクト指向の基礎などを実習を通して理解することが主な目的です。そのためプログラミング作業は簡略化して、できるだけ数をこなし実感しながらすすめることを大切にしています。現在はenchant.jsライブラリを使用し、90分授業の中で数十行の入力でシンプルなゲームなどを完成させています。
日々進化する世界なので毎年動向のチェックは必要です。一方で、授業の目的に適切であることを最善とし、最先端であるかどうかより優先しています。
基礎を身に付けてプログラミングに対する苦手意識を無くし、より興味を持つことができれば、あとはJavaScriptはもちろんC＃などどんな言語や開発環境でも力を伸ばすことができると思います。
開発環境を選ぶポイント
- JavaScriptの記述と実行が簡単にできる。
テンプレートを作ってもいいが、HTMLやCSSの記述は必要ないものが良い。 - 情報共有しやすい（オンライン開発）
- enchant.jsなどのライブラリが簡単に使用可能
- 学生にとって操作が分かりやすい（授業の効率化）
今回チェックしてみたもの
Cloud9
無料利用枠で使えそうだったが、登録にはクレジットカード情報が必要な点が授業利用にはハードルが高い。Unityとの連携など機能としては大変魅力。
Codeanywhere
コードの保存はDropbox、GitHub、Google Drive、OneDriveなどへ行う模様。GitHubに慣れていれば情報共有もスムーズか。
授業に使うなら上級生や卒業研究向け。またJavaScriptがいきなり書けるものではないので、授業でならテンプレートが必要。
動作環境が選べる(Ubuntu,CentOS）など全機能試していないが強力そうなツール。
JS Bin
HTML、JS、CSS、Consoleなどの画面がシンプルに並んでいるのが良い。
リストにあるライブラリであれば追加は簡単。リストにThree.jsはあったが、enchant.jsなど授業で使用したいライブラリはなかった。
Console画面があるのも良い。
HTMLの授業で使う手もあり。
JSFiddle
シンプル。Coraborate機能が気になる。学生に遠隔で指導する必要があった場合に使いやすいのか？
次回につづく
今回は、各環境の現状チェックに終わりました。他にもライブラリ含めて検討候補があるため、続きはまた次回に書こうと思います。
