差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
lecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/09 09:52] – baba | lecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/16 10:04] – [配信者側(localhost:3000/broadcast)の修正] baba | ||
---|---|---|---|
行 40: | 行 40: | ||
</ | </ | ||
+ | 上記ファイル構成に変更した後,ブラウザからアクセスしてそれぞれ | ||
+ | | ||
+ | | ||
+ | で同じページが開くことを確認しましょう. | ||
+ | ===== 視聴者側(localhost: | ||
+ | では最初に視聴者側のファイル修正から行います.視聴者側に必要な機能はテキストを送信することに加えて,リアクションボタンを追加します.文字色を変えたり音声読み上げとかもありますが,一旦はなるべくシンプルに作成して,プロトタイピングのループを一度回して「動作させること」に集中しましょう. | ||
+ | |||
+ | すでにsimplechatのexampleが手元では動いていおり,このページではテキストボックス,名前ボックスに入力した内容をサーバ側に送信することができます.canvasは必要ないので省きます.またこれら機能の他,リアクションボタンをまずは素のhtml(cssできれいにしていないただのタグ)で作っていきます.ただしbootstrapを利用していきます.bootstrapとはtwitter社が提供しているライブラリで,cssやjavascript等,モダンなウェブサイトを構築するために必要な機能がセットになっています. | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <link href=" | ||
+ | integrity=" | ||
+ | <link rel=" | ||
+ | <meta charset=" | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <span class=" | ||
+ | <input type=" | ||
+ | aria-describedby=" | ||
+ | </ | ||
+ | |||
+ | <hr> | ||
+ | <div class=" | ||
+ | <button type=" | ||
+ | <button type=" | ||
+ | <button type=" | ||
+ | </ | ||
+ | |||
+ | <hr> | ||
+ | |||
+ | <div class=" | ||
+ | <button class=" | ||
+ | <input type=" | ||
+ | aria-describedby=" | ||
+ | </ | ||
+ | |||
+ | <script src="/ | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <file js sketch.js> | ||
+ | var socket; | ||
+ | var chatlog = { | ||
+ | name: '', | ||
+ | message: '' | ||
+ | } | ||
+ | |||
+ | function setup() { | ||
+ | noCanvas(); | ||
+ | |||
+ | select('# | ||
+ | select('# | ||
+ | select('# | ||
+ | |||
+ | select('# | ||
+ | socket = io.connect(window.location.origin); | ||
+ | socket.on(' | ||
+ | } | ||
+ | |||
+ | function sendReaction() { | ||
+ | // This == select('# | ||
+ | console.log(this.html()); | ||
+ | var chatdata = { | ||
+ | name: select('# | ||
+ | message: this.html() | ||
+ | } | ||
+ | socket.emit(' | ||
+ | } | ||
+ | |||
+ | function sendMessage() { | ||
+ | var chatdata = { | ||
+ | name: select('# | ||
+ | message: select('# | ||
+ | } | ||
+ | console.log(chatdata); | ||
+ | socket.emit(' | ||
+ | } | ||
+ | function gotMessage(chatdata) { | ||
+ | console.log(chatdata); | ||
+ | chatlog.name = chatdata.name; | ||
+ | chatlog.message = chatdata.message; | ||
+ | |||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== 配信者側(localhost: | ||
+ | 配信者側では,p5のキャンバスだけを表示し,そこにユーザからのコメントやリアクションを載っけていきます.なお🎉とパンチの音は以下からダウンロードして利用してください. | ||
+ | * 🎉の音:{{ : | ||
+ | * 👊の音:{{ : | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <link rel=" | ||
+ | <meta charset=" | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | <script src="/ | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <file js sketch.js> | ||
+ | var socket; | ||
+ | var chatlog = []; | ||
+ | var sound_cracker; | ||
+ | |||
+ | function preload() { | ||
+ | sound_cracker = loadSound(' | ||
+ | } | ||
+ | |||
+ | function setup() { | ||
+ | createCanvas(displayWidth, | ||
+ | socket = io.connect(window.location.origin); | ||
+ | socket.on(' | ||
+ | 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); | ||
+ | |||
+ | // | ||
+ | |||
+ | for (let i = 0; i < 50; i++) { | ||
+ | fill(0, 0, 0, chatlog[i].alpha); | ||
+ | text(chatlog[i].message, | ||
+ | if (chatlog[i].alpha > 0) { | ||
+ | chatlog[i].alpha = chatlog[i].alpha - 1; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== OBSの準備 ===== | ||
+ | * https:// | ||