クリエイティブ リサーチ 2019/05/20 日本工学院八王子専門学校 M.Katsube

本日の予定

午前 ECMAScript 文法 オンライン対戦ゲーム (1) 仕様 タイトル画面

午後 Git応用 ブランチとマージ オンライン対戦ゲーム (2) データ設計 API

ECMAScript

文法と使い方 Wikiの「ECMAScript」のページの内容に沿って実施します。 https://github.com/katsube/neec2019A/wiki/ECMAScript

オンライン対戦

大まかな仕様 1 これからしばらくの間、復習と新しい内容の実践を兼ね「オンラインクイズゲーム」を作成します。 タイトル 画面 マッチング 対戦画面 結果画面

大まかな仕様 2 APIサーバ マッチング 画面 参加します。ユーザー名はxxxです。 あなたのユーザーIDはxxxです 人数揃いましたか？ True or False

大まかな仕様 3 APIサーバ 対戦 画面 準備OKです 次の情報を送ります ・対戦ID ・参加者の一覧 ・問題 問題の回答はｘです OK 全員の回答は出揃った？ True or False

大まかな仕様 4 結果 画面 APIサーバ 先ほどの結果を教えて 次の情報を送ります ・参加者の一覧 ・参加者の回答と正否

Git応用

「セーブ」 「バックアップ」は こまめに取る！ Gitを意識した開発1 イメージ的には commit = セーブ (スナップショット) push = バックアップ (&シェア) 「セーブ」 「バックアップ」は こまめに取る！

Gitを意識した開発2 例「タイトル画面を作る」 要件 ファイル名は title.html 以下の要素を表示 機能 演出 タイトル画像 「スタート」ボタン 「続きから」ボタン 機能 「スタート」ボタンを押下すると名前入力画面へ遷移 「続きから」ボタンを押下するとロード画面へ遷移 演出 BGM “title.ogg” をループ再生。フェードイン。

Gitを意識した開発3 例「タイトル画面を作る」 リポジトリ (GitHub) 作業ディレクトリ 空のtitle.html作った git add title.html git commit –am ‘タイトル画像追加’ commitした内容を送信する git push

Gitを意識した開発4 例「タイトル画面を作る」 リポジトリ (GitHub) 作業ディレクトリ 必要なアセット 用意した git add title.png start.png continue.png git add title.ogg git commit –am ‘アセット準備’ title.htmlから アセット呼び出した pushはまとめて行うことが可能 git add title.html git commit –am ‘title.htmlからアセット呼び出し’ git push

Gitを意識した開発5 例「タイトル画面を作る」 作業ディレクトリ Aさん 作業ディレクトリ Bさん リポジトリ (GitHub) タイトル画面作った git commit Aさん git push タイトル画面欲しい pullで作業ディレクトリを最新の状態にできる git pull Bさん

MySQL Gitを意識した開発6 DBの状態を共有するには？ SQLがテキスト情報であることに着目する CREATE TABLE foo( id integer , name varchar(32) , primary key (id) ); INSERT INTO foo(id, name) VALUES (1, ‘Apple’) , (2, ‘Banana’) , (3, ‘Orange’); SQLがテキスト情報であることに着目する

Gitを意識した開発7 テキストファイルならGitで様々な操作が可能 ※画像はGitHub上で差分を表示した画面

Gitを意識した開発8 復習 ファイルに記録されたSQLを実行 $ cat foo.sql CREATE DATABASE BARDB; USE BARDB; CREATE TABLE foo( id integer , name varchar(32) , primary key (id) ); $ mysql –u root –p < foo.sql ※詳細は12月4日の授業内容を参照

Gitを意識した開発9 復習 CSVをインポート $ cat foo.csv 1,Apple 2,Banana 3,Orange $ mysqlimport –u root –p --local BARDB foo.csv ※mysqlimportは実際には改行せず一行で打つ ※詳細は12月4日の授業内容を参照

衝突! Gitを意識した開発10 更新がぶつかる？ 作業ディレクトリ Aさん 作業ディレクトリ Bさん リポジトリ (GitHub) title.html 更新した git commit Aさん git push title.html 更新した 衝突! git commit Bさん git push

Gitを意識した開発11 なぜ衝突したの？ 1 v1.0 v1.0 v1.0 作業ディレクトリ Aさん 作業ディレクトリ Bさん リポジトリ (GitHub) v1.0 git clone v1.0 Aさん git clone v1.0 Bさん

Gitを意識した開発12 なぜ衝突したの？ 2 v1.0 v2.0 v2.0 v2.0 新しいバージョン じゃない！ 作業ディレクトリ Aさん 作業ディレクトリ Bさん リポジトリ (GitHub) title.html 更新した v1.0 v2.0 git commit v2.0 Aさん git push title.html 更新した 新しいバージョン じゃない！ v2.0 git commit Bさん git push

Gitを意識した開発13 更新が衝突しないためには？ 作業ディレクトリ Aさん 作業ディレクトリ Bさん リポジトリ (GitHub) git commit 最新版を取得した後に編集 git push Aさん git pull 編集 Bさん git commit git push

Gitを意識した開発13 更新が衝突しないためには？ v1.0 v1.0 v1.0 v2.0 v2.0 v2.0 v3.0 v3.0 作業ディレクトリ Aさん 作業ディレクトリ Bさん リポジトリ (GitHub) v1.0 v1.0 v1.0 git commit v2.0 v2.0 git push Aさん git pull v2.0 編集 Bさん v3.0 git commit v3.0 git push