hitode909-vj-workshop
ウェブブラウザを使ったVJ活動
Gyazo

ウェブブラウザを使ったVJ活動
2019/11/30 Audiovisual Workshop with TOPLAP Japan at 甲南女子大学 hitode909

はじめに、の前に
いまのうちにGoogle Chromeをダウンロード、インストールしておいてください
ワークショップ教材はGoogle Chromeで動作確認している

はじめに
はじめに(15分)
今日のワークショップでやること
VJについて、ブラウザについて
やってみよう(30分x3で1.5時間)
HTMLを書こう
VJとして適した形のHTMLを作ろう
コントローラをくっつけて操作できるようにしよう
おわりに(15分)
今後の進め方
参考になる情報について

自己紹介
hitode909 株式会社はてな アプリケーションエンジニア
はてなブログ(ブログサービス)やGigaViewer(マンガビューワ)などの開発
ブラウザで動くおもしろコンテンツを作るのが好き
仕事でもウェブサービスを作ったりしている
最近はブラウザでVJ活動している
ブラウザ以外でVJをやったことはない

みなさん
学生 or 社会人 or その他
HTML書いたことある人
CSS書いたことある人
JavaScript書いたことある人
プログラムを書いたことある人
Mac or Windows or Linux
VJの人
基礎から学びたい or とにかくVJができればいい

VJ
主にクラブイベントなどで
音楽にあわせて映像を出す
事前に作った映像を場に合わせて流したり、インタラクティブだったり
観客を撮影して顔認識して上から顔を被せる
CINEMA 4Dを使ったVJ Loops

ところで、ウェブブラウザの歴史
ウェブのリッチ化によって凝ったビジュアルを出せるようになってきている
1993年
画像を出せるウェブブラウザの登場
> Gyazo
2007年
ページ移動なしでコンテンツをつぎたせるようになってくる
> Gyazo
現代
表現手段が多様化、OSの機能によってAR(拡張現実)が使えたり
> Gyazo

ブラウザでVJ
さまざまなメディアを簡単に扱える
画像を出せたり、動画を出せたり、3Dモデルを表示できたり
外部リソースとの接続、インターネットからのロード
その場で書き換えて改造できる
普段使っているウェブブラウザで自作のコンテンツを表示できるたのしさ
市販のVJソフトウェアと比べると
ブラウザはVJをするためのソフトウェアではないので、表示部分やコントローラ部分を手作りする必要がある
ツールとコンテンツの境目が曖昧
> Gyazo


作例
YouTube動画の上に絵文字を出したり、アニメーションGIFを出したり
Gyazo
Gyazo
Gyazo
マイクの音量に応じて自動的に映像が切り替わる
会場のWiFiが遅くて苦労した
Gyazo

はじめに終わり
ブラウザでVJするイメージがつかめましたか?

本編
今日やること
まずはHTMLを読み書きできるようになる
エッセンスを抜き出して、どうやって作っているかを紹介
サンプルを手元で動かしたり書き換えたり

やってみよう
1.5時間で3セクション
1. HTMLを書こう
2. VJとして適した形のHTMLを作ろう
3. コントローラをくっつけて操作できるようにしよう

やってみよう#1 HTMLを書こう
まずは動かない形でHTMLを作ってみよう
HTMLについて知り、デベロッパツールを使って覗いてみる
glitch.comについて
素朴なHTMLを書いてみよう

HTMLの基本
HTML = Hyper Text Markup Language
HTMLはなにからできているか
要素(Element)
開始タグ(Opening tag)
終了タグ(Closing tag)
コンテンツ(Content)
コンテンツは要素のときも、文字列のこともある
属性(Attribute)
これだけの組み合わせ

> Gyazo
> Gyazo
Contentは人間が読むもので、好きに書いたら良い
開始タグ、終了タグ、要素はコンピュータが読むもので、間違うと見た目が大きく壊れたりする
世の中のHTMLを見てみよう

世の中のウェブサイトを見てみよう
なんでもいいので１ページ開く
ページのソースを表示→書かれたHTMLがそのまま表示される
HTMLが書かれていることを確認しよう
Gyazo Gyazo
検証→ブラウザが解釈した構造をデベロッパツールで表示される
入れ子になっていることを確認しよう
適当に書き換えて様子を見てみる
表示されている文字列を書き換えてみる
Gyazo Gyazo
右クリックできないときは、画面上の「表示」→「開発/管理」→「デベロッパーツール」
Gyazo


glitch.com
ブラウザ上でHTMLを書けるウェブサービス
他人の作品をRemix(コピーして書き換える)できる
開発ツールのセットアップなどが不要で簡単なので今回は利用します
glitch.comを使わずオフラインでHTMLを書きたい人はVSCode+LiveServerを使うと簡単

glitch.comの利用を始める
アカウントを作っておくと、今日書いた内容をあとから見返せて便利
Gyazo

今回作るHTMLについて
製品として通用する品質のHTMLを作るときには、さまざまな注意点がある
今回はワークショップなので、VJで使うところ以外はすべて省略します
やる
VJするときに便利な機能
やらない
さまざまなブラウザで動く(スマホで見れる、Internet Explorerでも動く、など)
検索エンジンに正しく拾ってもらうためのマークアップ
オフラインでも見える
適宜、参考になるリンクやサンプルのリンクを貼っておくので、興味がある人はどうぞ

HTMLを書いてみる
雛形をRemix Your Own
Remix Your Ownボタンを押す
Gyazo
index.htmlを編集していきます
壊れてもとに戻せなくなるなど、ついてこれなくなったら、1.htmlとか2.htmlとかを開いて内容をindex.htmlに貼り付けると復帰できる
(補足)イチから新しいプロジェクトを作りたいときは: glitch.comでプロジェクトを作る
Gyazo
Show→Next to The Code

タグを書いてみよう
こんにちは
h1タグで囲んでみる
<h1>こんにちは</h1>

書き換えて数秒待つと右のプレビューがさしかわるはず
h1はparagraph 1
Gyazo
h1のかわりにいろいろさしかえて様子を見よう
h2
Gyazo
i
Gyazo
marquee
Gyazo

文字をたしてみよう(2.html)
以下を追加で書いてみましょう
<p>最近寒くなってきましたね。<br>どうぞお体に気をつけてお過ごしください。</p>
pはparagraph(段落)
brはbreak(改行)
ファイルがごちゃごちゃになってきたらFormat This Fileを押してみよう

画像を貼ってみよう
GiphyのNASA公式アカウントのアニメーションGIF置き場から選んで貼ってみる
たとえばこれ
Mediaをクリック Gyazo
Socialをクリックしてコピー
Gyazo
末尾が .gif であることを確認
<img src="(ここにコピーしたURL)"> を書き足す
<img src="https://media.giphy.com/media/JPxPiV7UrswSE1XyFu/giphy.gif">

imgはimage(画像)
Gyazo
imgを使うとインターネットに置いてある画像を貼り付けられる
著作権について学びましょう
今日のワークショップでは、画像のライセンスが明らかなものや、埋め込みコードを提供しているサイトを参照している

動画を貼ってみよう
YouTubeから埋め込みコードを取得することで、HTMLに動画を埋め込める
たとえばこれ
共有
Gyazo
埋め込む
Gyazo
iframeをコピー
Gyazo
_
<iframe width="560" height="315" src="https://www.youtube.com/embed/21X5lGlDOfg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

宇宙的なページが完成
Gyazo




imgをmarqueeに入れてみよう
marqueeで囲んでみる
marqueeをみると昔懐かしい気持ちになれると言われている
画像が流れてきたら成功
<marquee><img src="https://media.giphy.com/media/JPxPiV7UrswSE1XyFu/giphy.gif"></marquee>

動く宇宙的なページが完成(3.html)
Gyazo
marqueeの中にimgが入っている→HTMLは入れ子にして使える
> Gyazo


余裕があれば
h1やpをコピーして内容を書き換えてみよう
このページから埋め込みコード(iframe)をコピーして貼ってみよう
Gyazo
もっとGIFを貼ってみよう
<img src="..."> のsrc部分に画像URL
Gyazo
youtubeを自動再生してみる
srcの末尾に ?autoplay=1&mute=1 を追加
autoplay=1 : 自動再生する
mute=1 :無音状態で再生する
_
<iframe width="560" height="315" src="https://www.youtube.com/embed/21X5lGlDOfg?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

完成
テキストをちまちま書いていくと画面を作れることがわかった
アニメーションGIFを貼ったり、marqueeを使ったりすることで、お手軽に動く画面を作れる
いろんなサイトが提供している埋め込みコードを使うことで世間のリソースを埋め込める
埋め込みコードや、ブログパーツと呼ばれていることが多い

やってみよう#2 VJとして適した形のHTMLを作ろう
これまでに作ったものは単なるホームページであった
VJコンテンツとして適する形を見越して配置を変更する
配置を変更するには→CSSを使う
VJコンテンツとして見えるように動きを加える
動きをつけるには→JavaScriptを使う

CSS 入門
HTMLに対して、ルールを追加して見た目を変えられる
pタグの色を赤くする
p {
color: red;
}
> Gyazo

pを半透明に
p {
opacity: 0.5;
}
> Gyazo

pを180度回転させる
p {
transform: rotate(180deg);
}
> Gyazo
CSSはいつ使われているのか?
いつでも、このページでも
背景が白、フォントの指定、幅の指定、コードを書いたときには背景が灰色になる、など、見た目に関するあらゆる指定がなされている

凝った例

JavaScript入門
JavaScriptはプログラミング言語です
古くは迷惑行為をするためのものという評価だったが、近年は普通に世の中の役に立っている
摘発される事件があって話題になっていた
<script>
for ( ; ; ) {
window.alert("　∧_∧　ババババ\n（ ・ω・)=つ≡つ\n（っ ≡つ=つ\n`/　　)\n(ノΠＵ\n何回閉じても無駄ですよ～ww\nm9（＾Д＾）プギャー！！")
}
</script>
プログラミング言語
コンピュータが解釈して実行するもの
1文字でも間違うとコンピュータが解釈できなくなり、動かなくなる
これは問題なし
window.alert('おはよう'); → window.alert('おやすみ');
これは動かなくなる
window.alert('おはよう'); → windows.alert('おやすみ');
window.alert('おはよう'); → window.alert('おやすみ);
このワークショップでは、コピペして数字や文字をちょっと書き換えることから始めます

やっていきましょう
雛形をRemix Your Own
Remix Your Ownボタンを押す
Gyazo
index.htmlを編集していきます
ついてこれなくなったら、1.htmlとか2.htmlとかを開くと復帰できる

最初の状態1.html
挨拶と画像
Tシャツ画像は TEE PARTY / 関根優子肉市場 から
この状態でVJ中と言い張るのは苦しい
> Gyazo

CSSを書いてみよう2.html
imgに id="bg"
pに id="character"
<style> を書く
# は idであり、 #character なら id="character" の要素へのルールの指定
idとは、HTML内でのid(名前をつけて区別できる)
<img id="bg" src="https://teeparty.jp/upload/save_image/9628.jpg" />
<p id="character">
こんにちは
</p>
<style>
#bg {
width: auto;
height: 100%;
}
#character {
font-size: 10vw;
font-weight: bold;
color: blue;
}
</style>
> Gyazo
color: blueをredとかpinkとか変えてみましょう
色の指定は 色を参照

レイヤを作ろう3.html
画面上の上下に並んでいる要素たちを裏、表に並べ替えたい
<div class="screen">...</div> で囲む
classは、種類の指定。idとちがって、同じclassの要素が複数存在して良い
<div class="screen">
<img id="bg" src="https://teeparty.jp/upload/save_image/9628.jpg" />
</div>
<div class="screen">
<p id="character">
こんにちは
</p>
</div>

style 内に .screen { の指定を追加
. はclassに対するルール指定
幅と高さを100%に広げ、内容は中央揃えにする
.screen {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

HTML上の並びと画面上の並びについて
未指定な場合、上が奥、手前が下
z-indexを使うとCSSを使って重なり順を制御できる
上下に重なって良い状態になってきた
VJ感はまだ足りない…
せめて動きがあれば…
> Gyazo

アニメーションの原理
絵をすばやく切り替えると動いているようにみえる
>
> Gyazo
JavaScriptでアニメーション
定期的にプログラムを動かしてHTMLを書き換えると動いているように見える
CSSでアニメーション
CSS上で動きを記述するとブラウザが動かしてくれる
今日は割愛

アニメーションを作ってみよう 4.html
背景の画像を0.5秒ごとに切り替えてみる
ここでJavaScriptが登場
さしかえる画像の一覧を作っておいて
img#bg を探してきて
500ミリ秒(0.5秒)ごとにi枚目の画像にさしかえる
iは500ミリ秒ごとに1ずつ増える
家でじっくり読んでください(読まなくてもいい)
<script>
(() => {
const images = [
"https://teeparty.jp/upload/save_image/4416.jpg",
"https://teeparty.jp/upload/save_image/10485.jpg",
"https://teeparty.jp/upload/save_image/9635.jpg",
"https://teeparty.jp/upload/save_image/9596.jpg"
];
const img = document.querySelector("img#bg");
let i = 0;
setInterval(() => {
i++;
img.src = images[i % images.length];
}, 500);
})();
</script>

文字もさしかえてみよう
<script>
(() => {
const messages = ["おはようございます", "こんにちは", "おやすみなさい"];
const p = document.querySelector("#character");
let i = 0;
setInterval(() => {
i++;
p.textContent = messages[i % messages.length];
}, 500);
})();
</script>
Gyazo

暇な人向け
["おはようございます"] の部分に好きな文字を入れてみる
imagesをさしかてみる(5.html)
↓にさしかえると馬が走るはず
}, 500); の部分を変えて、どうなるか見てみよう(ここの500の部分をintervalと呼びます)
const images = [
"http://files.sushi.money/running-horse/horse-0.jpg",
"http://files.sushi.money/running-horse/horse-1.jpg",
"http://files.sushi.money/running-horse/horse-2.jpg",
"http://files.sushi.money/running-horse/horse-3.jpg",
"http://files.sushi.money/running-horse/horse-4.jpg",
"http://files.sushi.money/running-horse/horse-5.jpg",
"http://files.sushi.money/running-horse/horse-6.jpg",
"http://files.sushi.money/running-horse/horse-7.jpg",
"http://files.sushi.money/running-horse/horse-8.jpg",
"http://files.sushi.money/running-horse/horse-9.jpg",
"http://files.sushi.money/running-horse/horse-10.jpg"
];

本当に暇な人向け6.html
requestAnimationFrameを使って1秒に60回計算してなめらかな動きを作ろう
new Date().getTime() を使うと、現在時刻(1970年からの経過時間のミリ秒)を取得できる
現在時刻をうまく加工して、CSSに入力すると、なめらかな動きを作れる
<script>
(() => {
const img = document.querySelector("img#bg");
const render = () => {
requestAnimationFrame(render);
const t = new Date().getTime();
img.style.filter = `blur(${(t % 500)/50}px)`;
};
requestAnimationFrame(render);
})();
</script>

現在時刻をもとに文字列を生成する
// の部分を外すと動きが変わる
<script>
(() => {
const p = document.querySelector("#character");
const render = () => {
requestAnimationFrame(render);
const t = new Date().getTime();
p.style.fontSize = `${(t % 1000) / 10 }vh`;
// p.style.color = `hsl(${Math.floor((t / 10) % 360)}, 100%, 50%)`;
// p.style.transform = `rotate(${t/10}deg)`;
// p.textContent = String.fromCodePoint("あ".codePointAt(0) + Math.floor((t / 100) % 9));
p.textContent = String.fromCodePoint('😀'.codePointAt(0) + Math.floor(t/100%5));
};
requestAnimationFrame(render);
})();
</script>
> Gyazo

なにか選んで新たな動きを作ってみよう

やってみよう#3 コントローラをくっつけて操作できるようにしよう
これまでに作ったHTMLは0.5秒単位で全自動で動いている
VJだと考えると、曲に合わせて動いたり、曲の展開に合わせて内容をさしかえられるとよりよい

コントローラ
どうやって映像をコントロールするか
MIDIコントローラがあるとつまみがあって便利
>
ブラウザでVJするときは
画面上にコントローラを表示してしまう
ブラウザであることがわかるとかっこいいという考え
> Gyazo
ちゃんとやりたい人は
Presentation APIを使うと別画面に出せるらしい(未検証)
すごく暇な人はやってみてください!
> Gyazo

input
対話的なユーザーインターフェイスを作るときに使うHTMLのタグ
インターネットで物を買ったり、お問い合わせを送ったりしたことはありませんか、そのときに使うのがinputです
inputには様々な種類がある、checkbox, radio, textarea,など

HTMLにinputを追加しよう
こちらの雛形を使います
Gyazo
index.htmlを編集していきます
ついてこれなくなったら、1.htmlとか2.htmlとかを開くと復帰できる

コントローラを追加する2.html
コントローラのHTMLを <style> の上に貼り付ける
<div id="controller">
<div>
<button id="tap">TAP</button>
</div>
<div>
<input
type="checkbox"
class="display-screen"
data-target-id="screen1"
checked
/>
<input
type="checkbox"
class="display-screen"
data-target-id="screen2"
checked
/>
</div>
<div>
<input type="range" id="range" min="0" max="100" value="5">
</div>
</div>

コントローラ用のCSSを追加(styleの中に書く)
#controller {
padding: 1em;
position: absolute;
left: 0;
top: 0;
opacity: 0.1;
background: black;
}
#controller:hover {
opacity: 0.5;
}

画面左上に部品がくっつくはず
マウスを持っていくと非透明、マウスを外すと半透明になる

タップに合わせて動かそう3.html
ふたたびJavaScriptを使う
document.querySelector("#tap").addEventListener("click", () => { が重要で、クリックするたびにプログラムを実行できる
2回のクリック時刻の差を記録して、intervalとして利用する
<script>
(() => {
let interval = 500;
let lastClickAt;
let timer;
let i = 0;
const step = () => {
timer = setTimeout(step, interval);
i++;
const p = document.querySelector("#character");
const messages = [
"おはようございます",
"こんにちは",
"おやすみなさい"
];
p.textContent = messages[i % messages.length];
const images = [
"https://teeparty.jp/upload/save_image/4416.jpg",
"https://teeparty.jp/upload/save_image/10485.jpg",
"https://teeparty.jp/upload/save_image/9635.jpg",
"https://teeparty.jp/upload/save_image/9596.jpg"
];
const img = document.querySelector("img#bg");
img.src = images[i % images.length];
};
step();
document.querySelector("#tap").addEventListener("click", () => {
if (lastClickAt) {
interval = new Date().getTime() - lastClickAt;
clearTimeout(timer);
step();
}
lastClickAt = new Date().getTime();
});
})();
</script>

TAPをクリックするたびに絵が変わるはず
曲に合わせてTAPを押しておくと音と絵のBPMを揃えられる

screenの表示、非表示をきりかえよう4.html
チェックボックスにチェックをつけると表示、チェックを外すと非表示、とする
93行目、 img.src = images[i % images.length]; の次の行に以下を追加
チェックがついていたらdispla:block、そうでなければdisplay: none
input.checked によって、チェックボックスがチェックされてるかどうかをJavaScriptから取得する
const inputs = document.querySelectorAll('input[type="checkbox"]');
for (const input of [...inputs]) {
console.log(input.checked);
const target = document.getElementById(
input.getAttribute("data-target-id")
);
if (target) {
target.style.display = input.checked ? "block" : "none";
}
}

スライダーにあわせて文字サイズを変えよう 5.html
requestAnimationFrameを使って毎フレーム描画する
116行目あたりに以下のコードを追加
range.value によってスライダーの値(0〜100)を取得
input type="range" を使ってスライダーを出せる
直感的に操作できておすすめ
const render = () => {
requestAnimationFrame(render);
const p = document.querySelector("#character");
const range = document.querySelector('#range');
p.style.fontSize = `${range.value}vh`;
};
render();

暇な人向け
やってみよう#2 で学んだことを生かして、さきほど書いたHTMLからscriptを持ってきて文字を動かしたりしてみる
screenを増やして新たな表現を追加してみる

完成
Show→New Windowで、新たなタブで表示できる
Gyazo

フルスクリーンで表示して鑑賞する
Gyazo

やってみよう編おわり
駆け足でしたが…
今日学んだことをうまく組みわせると高度なものも作れるはず
消化不良のかたは家で資料を見返したりキーワードでググったりしてください

今後の歩き方
困ったときの情報源
ウェブ開発の仕事をしているとこのサイトを毎日見ることになる
ブラウザに表示すると愉快なものを探す
画像、動画、アニメーションGIF、3Dモデルなど、さまざまな題材がある
ブラウザ最新技術を追う
ブラウザ開発者の頑張りによって表現の幅が広がる
Google Chromeを作ってる人たちが年に一度、今年のアップデートを教えてくれる
たとえば、マイクの音量を拾って、音量に応じて動かす
JavaScriptの学習
勉強会に参加する
京都で不定期に開催されている勉強会
東京で今日、明日と開催中
はてな教科書
夏に開催している学生向けインターンで使っている資料
マウスストーカーを作る課題
なんでも質問してください

素材を探してこよう
スマホなどで撮った写真を取り込んで利用する
glitch.comへの画像のアップロード をすると手元の画像をアップロードして利用できる
LGTM(Looks Good To Me、よさそう)なアニメーションGIFを撮影できるiOSアプリ
動画やYouTubeからアニメーションGIFに変換できる
高品質な写真
いらすとや
日本中で使われいる素材集。21点以上使った商用利用は有償になることに注意
GIFMAGAZINEの公式アカウント
きのう教えてもらった
さっきみつけた
BEEPLEさん
VJ用ループ映像を公開されている
クオリティが高く、ただこの動画を流しておけば今日のワークショップは不要となる
埋め込んで利用するさいには出典がわかるようにする
元サイトへのリンクを紹介するなど

作品を共有する・記録を残す
glitch.comで書いたプロジェクトは基本的に公開されている
Shareボタンをつかってツイートなどすると、すぐに見てもらえて便利
良い作品ができたら、twitterの #toplapjp のハッシュタグなどで宣伝してください
動画を撮ってシェアする
Gyazo GIFを使うと数秒の動画を撮って共有できる
記録を残しておく
実験中の記録を撮っておくと、試行錯誤の記録が残っておもしろい

いかがでしたか?
ブラウザで動く愉快なコンテンツ作りの一歩を踏み出しましょう

おすすめJavaScript
let imgs = [...document.querySelectorAll('img')];setInterval(() => {document.body.prepend(imgs[Math.floor(Math.random()*imgs.length)]);})

Most related
  • Sort by