この授業の目的
Processingで行ったWebSocket通信を使って,ウェブブラウザ上で動くJavaScriptの2015年版(ECMAScript2015, 通称ES2015, ES6)とProcessingのJavaScript用ライブラリP5.jsを用いて,動的なWebアプリケーションを作るための基礎を学ぶ.
コンテンツ
- ES2015の基本 - 変数とそのスコープ,関数定義,Promiseによるコールバック
- ES2015の基本 - クラスの定義とインスタンス化
- ES2015の基本 - PromiseとXMLHttpRequestを使ったAjaxとfetch
- ES2015準拠でP5.jsのインスタンスモード
- P5.jsで日本語文字列を表示する
- ES2015でWebSocketの基本 - テキストメッセージの受け渡し
- ES2015でWebSocket - Tornadoでマルチクライアント
- ES2015でWebSocket - TornadoでSecureWebSocket
- ES2015でWebSocket - ビデオチャットのように端末側カメラの画像をWebSocketで送る
- HTML5とPHPを用いた画像のアップローダ
授業の下準備
実行環境としてはGoogle Chromeを使うので,最新版を入れておくこと.また描画部分にはP5.js(ProcessingのJavaScript版)を使うので,Processingの描画の復習をしておくこと.
WebSocketサーバ側は,実験用Webサーバ上で実行を行うため,MSYS2やTerminal.appを使ってUnixの基本操作に慣れておくこと.
WebSocketサーバ用のライブラリとしてはPythonのTornadoを使う.TornadoはAnacondaにパッケージがあるが,http用のローカルサーバを立てるのが面倒くさいので,基本的にはこちらで用意したサーバでサーバ側プログラムを動かす.