[Work/Class/ES2015で動的Webアプリ]

ES2015で動的Webアプリ

この授業の目的

Processingで行ったWebSocket通信を使って,ウェブブラウザ上で動くJavaScriptの2015年版(ECMAScript2015, 通称ES2015, ES6)とProcessingのJavaScript用ライブラリP5.jsを用いて,動的なWebアプリケーションを作るための基礎を学ぶ.

コンテンツ

  1. ES2015の基本 - 変数とそのスコープ,関数定義,Promiseによるコールバック
  2. ES2015の基本 - クラスの定義とインスタンス化
  3. ES2015の基本 - PromiseとXMLHttpRequestを使ったAjaxとfetch
  4. ES2015準拠でP5.jsのインスタンスモード
  5. P5.jsで日本語文字列を表示する
  6. ES2015でWebSocketの基本 - テキストメッセージの受け渡し
  7. ES2015でWebSocket - Tornadoでマルチクライアント
  8. ES2015でWebSocket - TornadoでSecureWebSocket
  9. ES2015でWebSocket - ビデオチャットのように端末側カメラの画像をWebSocketで送る
  10. HTML5とPHPを用いた画像のアップローダ

授業の下準備

実行環境としてはGoogle Chromeを使うので,最新版を入れておくこと.また描画部分にはP5.js(ProcessingのJavaScript版)を使うので,Processingの描画の復習をしておくこと.

WebSocketサーバ側は,実験用Webサーバ上で実行を行うため,MSYS2やTerminal.appを使ってUnixの基本操作に慣れておくこと.

WebSocketサーバ用のライブラリとしてはPythonのTornadoを使う.TornadoはAnacondaにパッケージがあるが,http用のローカルサーバを立てるのが面倒くさいので,基本的にはこちらで用意したサーバでサーバ側プログラムを動かす.