差分

このページの2つのバージョン間の差分を表示します。

--- lecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/09 09:49] – 作成 baba
+++ lecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/16 10:10] (現在) – [OBSの準備] baba
@@ 行 25: / 行 25: @@
 └── server.js
 </code>
-となっているかと思います（node.js類のファイルは省いて表示しています）．ここにファイルを追加して，以下の構成にします．
+となっているかと思います（node.js類のファイルは省いて表示しています）．ここにファイルを追加してpublicフォルダ以下を以下の構成にします．なお，broadcast内のファイルはpublicフォルダ内にあるファイルをそのままコピーしています．
 <code>
-├── public
+├── broadcast
 │   ├── index.html
 │   ├── p5.js
@@ 行 33: / 行 33: @@
 │   ├── sketch.js
 │   └── style.css
-└── server.js
+├── index.html
+├── p5.js
+├── p5.sound.min.js
+├── sketch.js
+└── style.css
 </code>
+上記ファイル構成に変更した後，ブラウザからアクセスしてそれぞれ
+ http://localhost:3000
+ http://localhost:3000/broadcast
+で同じページが開くことを確認しましょう．
+===== 視聴者側（localhost:3000）の修正 =====
+では最初に視聴者側のファイル修正から行います．視聴者側に必要な機能はテキストを送信することに加えて，リアクションボタンを追加します．文字色を変えたり音声読み上げとかもありますが，一旦はなるべくシンプルに作成して，プロトタイピングのループを一度回して「動作させること」に集中しましょう．
+すでにsimplechatのexampleが手元では動いていおり，このページではテキストボックス，名前ボックスに入力した内容をサーバ側に送信することができます．canvasは必要ないので省きます．またこれら機能の他，リアクションボタンをまずは素のhtml（cssできれいにしていないただのタグ）で作っていきます．ただしbootstrapを利用していきます．bootstrapとはtwitter社が提供しているライブラリで，cssやjavascript等，モダンなウェブサイトを構築するために必要な機能がセットになっています．
+<WRAP group>
+<WRAP half column>
+<file html index.html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="p5.js"></script>
+  <script src="p5.sound.min.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <meta charset="utf-8">
+</head>
+<body>
+  <div class="container-sm">
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="basic-addon1">お名前</span>
+      <input type="text" id="name" class="form-control" placeholder="匿名" aria-label="Username"
+        aria-describedby="basic-addon1">
+    </div>
+    <hr>
+    <div class="btn-group" role="group" aria-label="Basic outlined example">
+      <button type="button" id="button_reaction01" class="btn btn-outline-primary">👍</button>
+      <button type="button" id="button_reaction02" class="btn btn-outline-primary">🎉</button>
+      <button type="button" id="button_reaction03" class=" btn btn-outline-primary">👊</button>
+    </div>
+    <hr>
+    <div class=" input-group mb-3">
+      <button class="btn btn-outline-secondary" type="button" id="send">Send</button>
+      <input type="text" id="message" class="form-control" placeholder="" aria-label="Example text with button addon"
+        aria-describedby="button-addon1">
+    </div>
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="sketch.js"></script>
+  </div>
+</body>
+</html>
+</file>
+</WRAP>
+<WRAP half column>
+<file js sketch.js>
+var socket;
+var chatlog = {
+  name: '',
+  message: ''
+}
+function setup() {
+  noCanvas();
+  select('#button_reaction01').mouseClicked(sendReaction);
+  select('#button_reaction02').mouseClicked(sendReaction);
+  select('#button_reaction03').mouseClicked(sendReaction);
+  select('#send').mouseClicked(sendMessage);
+  socket = io.connect(window.location.origin);
+  socket.on('gotMessage', gotMessage);
+}
+function sendReaction() {
+  // This == select('#button_reaction01')
+  console.log(this.html());
+  var chatdata = {
+    name: select('#name').value(),
+    message: this.html()
+  }
+  socket.emit('sendMessage', chatdata);
+}
+function sendMessage() {
+  var chatdata = {
+    name: select('#name').value(),
+    message: select('#message').value()
+  }
+  console.log(chatdata);
+  socket.emit('sendMessage', chatdata);
+}
+function gotMessage(chatdata) {
+  console.log(chatdata);
+  chatlog.name = chatdata.name;
+  chatlog.message = chatdata.message;
+}
+</file>
+</WRAP>
+</WRAP>
+===== 配信者側(localhost:3000/broadcast）の修正 =====
+配信者側では，p5のキャンバスだけを表示し，そこにユーザからのコメントやリアクションを載っけていきます．なお🎉とパンチの音は以下からダウンロードして利用してください．
+  * 🎉の音：{{ :lecture:design_with_prototyping:p5.js編:cracker.mp3 |}}
+  * 👊の音：{{ :lecture:design_with_prototyping:p5.js編:punch.mp3 |}}
+<WRAP group>
+<WRAP half column>
+<file html index.html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="p5.js"></script>
+  <script src="p5.sound.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <meta charset="utf-8">
+</head>
+<body>
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="sketch.js"></script>
+</body>
+</html>
+</file>
+</WRAP>
+<WRAP half column>
+<file js sketch.js>
+var socket;
+var chatlog = [];
+var sound_cracker;
+function preload() {
+  sound_cracker = loadSound('./sounds/cracker.mp3');
+}
+function setup() {
+  createCanvas(displayWidth, displayHeight);
+  socket = io.connect(window.location.origin);
+  socket.on('gotMessage', gotMessage);
+  textSize(24);
+  // 初期化
+  for (let i = 0; i < 50; i++) {
+    chatlog[i] = {
+      name: '',
+      message: '',
+      alpha: 0,
+      x: 0,
+      y: 0
+    }
+  }
+}
+function gotMessage(chatdata) {
+  console.log(chatdata);
+  // メッセージを空いてる配列(alpha==0）に代入する
+  for (let i = 0; i < 50; i++) {
+    if (chatlog[i].alpha == 0) {
+      chatlog[i].name = chatdata.name;
+      chatlog[i].message = chatdata.message;
+      chatlog[i].alpha = 255;
+      chatlog[i].x = random(50, width - 50);
+      chatlog[i].y = random(50, height - 50);
+      if (chatlog[i].message == "🎉") {
+        console.log("パン!")
+        sound_cracker.play();
+      }
+      i = 50; // loopは終了
+    }
+  }
+}
+function draw() {
+  background(220);
+  //text(chatlog.name, width / 2, height / 2)
+  for (let i = 0; i < 50; i++) {
+    fill(0, 0, 0, chatlog[i].alpha);
+    text(chatlog[i].message, chatlog[i].x, chatlog[i].y);
+    if (chatlog[i].alpha > 0) {
+      chatlog[i].alpha = chatlog[i].alpha - 1;
+    }
+  }
+}
+</file>
+</WRAP>
+</WRAP>
+===== OBSの準備 =====
+OBSをまだインストールしていない人は，まず最初にOBSをインストールしてください．
+  * https://obsproject.com/ja