ウェブブラウザを使ったVJ活動

https://gyazo.com/f244422dfc0d311b22679d7e0485865f

ウェブブラウザを使った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 株式会社はてな アプリケーションエンジニア

ブラウザで動くおもしろコンテンツを作るのが好き

仕事でもウェブサービスを作ったりしている

最近はブラウザでVJ活動している

ブラウザ以外でVJをやったことはない

みなさん

学生 or 社会人 or その他

HTML書いたことある人

CSS書いたことある人

JavaScript書いたことある人

プログラムを書いたことある人

Mac or Windows or Linux

VJの人

基礎から学びたい or とにかくVJができればいい

VJ

主にクラブイベントなどで

音楽にあわせて映像を出す

事前に作った映像を場に合わせて流したり、インタラクティブだったり

観客を撮影して顔認識して上から顔を被せる

https://youtu.be/nzvLiwUK3R8?t=2962

CINEMA 4Dを使ったVJ Loops

ところで、ウェブブラウザの歴史

ウェブのリッチ化によって凝ったビジュアルを出せるようになってきている

1993年

画像を出せるウェブブラウザの登場

https://gyazo.com/ae93296300bc938b5740129e8ad4e548

2007年

ページ移動なしでコンテンツをつぎたせるようになってくる

https://gyazo.com/294f1b3bd95aee5ba440ff79a03239b6

現代

表現手段が多様化、OSの機能によってAR(拡張現実)が使えたり

https://gyazo.com/056e9bf870ce1e49586f8d24cf5b5335

ブラウザでVJ

さまざまなメディアを簡単に扱える

画像を出せたり、動画を出せたり、3Dモデルを表示できたり

外部リソースとの接続、インターネットからのロード

その場で書き換えて改造できる

普段使っているウェブブラウザで自作のコンテンツを表示できるたのしさ

市販のVJソフトウェアと比べると

ブラウザはVJをするためのソフトウェアではないので、表示部分やコントローラ部分を手作りする必要がある

ツールとコンテンツの境目が曖昧

https://gyazo.com/c755a59b020105b810fdfce596e99268

作例

YouTube動画の上に絵文字を出したり、アニメーションGIFを出したり

https://gyazo.com/aedeb41714f72204fd1f295c5d937a05

https://gyazo.com/e2a13ec9fbb9b0831f0d610742167b2e

https://gyazo.com/a8fb91087147b49699d1927a21a76306

マイクの音量に応じて自動的に映像が切り替わる

会場のWiFiが遅くて苦労した

https://gyazo.com/eb245ed0c94344a2e0d3e707dbfe0bfb

はじめに終わり

ブラウザで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)

これだけの組み合わせ

https://gyazo.com/dd4ca2778b4624e113e8995a684e80e7

https://gyazo.com/46b1f8bdc6d915e7b203add7d350ab4e

Contentは人間が読むもので、好きに書いたら良い

開始タグ、終了タグ、要素はコンピュータが読むもので、間違うと見た目が大きく壊れたりする

世の中のHTMLを見てみよう

世の中のウェブサイトを見てみよう

なんでもいいので１ページ開く

ページのソースを表示→書かれたHTMLがそのまま表示される

HTMLが書かれていることを確認しよう

入れ子になっていることを確認しよう

適当に書き換えて様子を見てみる

表示されている文字列を書き換えてみる

右クリックできないときは、画面上の「表示」→「開発/管理」→「デベロッパーツール」

https://gyazo.com/84c62f8c9c78a22f7a94b0964bf846cf

glitch.com

ブラウザ上でHTMLを書けるウェブサービス

他人の作品をRemix(コピーして書き換える)できる

開発ツールのセットアップなどが不要で簡単なので今回は利用します

glitch.comの利用を始める

アカウントを作っておくと、今日書いた内容をあとから見返せて便利

https://gyazo.com/4836fd9659d53dd17f0dd34ada484e5c

今回作るHTMLについて

製品として通用する品質のHTMLを作るときには、さまざまな注意点がある

今回はワークショップなので、VJで使うところ以外はすべて省略します

やる

VJするときに便利な機能

やらない

さまざまなブラウザで動く(スマホで見れる、Internet Explorerでも動く、など)

検索エンジンに正しく拾ってもらうためのマークアップ

オフラインでも見える

適宜、参考になるリンクやサンプルのリンクを貼っておくので、興味がある人はどうぞ

HTMLを書いてみる

雛形をRemix Your Own

Remix Your Ownボタンを押す

https://gyazo.com/9d36d53b464e9c9ab8db43c2e16d0c61

index.htmlを編集していきます

壊れてもとに戻せなくなるなど、ついてこれなくなったら、1.htmlとか2.htmlとかを開いて内容をindex.htmlに貼り付けると復帰できる

https://gyazo.com/6b499a3cb2ed0de440cd21dc611f4732

Show→Next to The Code

タグを書いてみよう

code:_.html

こんにちは

h1タグで囲んでみる

code:_.html

<h1>こんにちは</h1>

書き換えて数秒待つと右のプレビューがさしかわるはず

h1はparagraph 1

https://gyazo.com/8617b15632da9e4a6f5b82463c69bda1

h1のかわりにいろいろさしかえて様子を見よう

h2

https://gyazo.com/d7b73293dda03025dd0f93ded084fc50

i

https://gyazo.com/384229378ac2c36bb4f7d2c7b51bb368

marquee

https://gyazo.com/91cf02b06edee383449bd0b1c5d37c0b

以下を追加で書いてみましょう

code:_.html

<p>最近寒くなってきましたね。<br>どうぞお体に気をつけてお過ごしください。</p>

pはparagraph(段落)

brはbreak(改行)

画像を貼ってみよう

たとえばこれ

Socialをクリックしてコピー

https://gyazo.com/db33f2da1c7962087cff63edeb6c77fe

code:_.html

imgはimage(画像)

https://gyazo.com/7c65cc64fc71f191213f200268bc42aa

imgを使うとインターネットに置いてある画像を貼り付けられる

著作権について学びましょう

今日のワークショップでは、画像のライセンスが明らかなものや、埋め込みコードを提供しているサイトを参照している

動画を貼ってみよう

YouTubeから埋め込みコードを取得することで、HTMLに動画を埋め込める

たとえばこれ

共有

https://gyazo.com/0dcd3dd266d4349cf4893081407325b5

埋め込む

https://gyazo.com/c18eed02a42b8220b3164f3e92731b1b

iframeをコピー

https://gyazo.com/b2623ec0998ef5c37fbae6e2d5e3e06d

code:_

宇宙的なページが完成

https://gyazo.com/a57dde87a2d0ab218076f2e24da09aa9

imgをmarqueeに入れてみよう

marqueeで囲んでみる

marqueeをみると昔懐かしい気持ちになれると言われている

画像が流れてきたら成功

code:_.html

動く宇宙的なページが完成(3.html)

https://gyazo.com/053a2e583567b57b7f689402f75fbd2a

marqueeの中にimgが入っている→HTMLは入れ子にして使える

https://gyazo.com/2f8cc93fb37031c29f93058f597dfe36

余裕があれば

h1やpをコピーして内容を書き換えてみよう

このページから埋め込みコード(iframe)をコピーして貼ってみよう

https://gyazo.com/58606f5652435c793dcb9be2d0eb475b

もっとGIFを貼ってみよう

https://gyazo.com/81fd4b2d24be391a223844c0b513b62f

youtubeを自動再生してみる

code:_

完成

テキストをちまちま書いていくと画面を作れることがわかった

アニメーションGIFを貼ったり、marqueeを使ったりすることで、お手軽に動く画面を作れる

いろんなサイトが提供している埋め込みコードを使うことで世間のリソースを埋め込める

埋め込みコードや、ブログパーツと呼ばれていることが多い

やってみよう#2 VJとして適した形のHTMLを作ろう

これまでに作ったものは単なるホームページであった

VJコンテンツとして適する形を見越して配置を変更する

配置を変更するには→CSSを使う

VJコンテンツとして見えるように動きを加える

動きをつけるには→JavaScriptを使う

CSS 入門

HTMLに対して、ルールを追加して見た目を変えられる

pタグの色を赤くする

code:_.css

p {

color: red;

}

https://gyazo.com/dc6ebb7bda46e262efab564075994050

pを半透明に

code:_.css

p {

opacity: 0.5;

}

https://gyazo.com/0aacb5ac178574bd663b79096d356417

pを180度回転させる

code:_.css

p {

transform: rotate(180deg);

}

https://gyazo.com/2276b44759ce6ccd52c87e78d3443447

CSSはいつ使われているのか?

いつでも、このページでも

背景が白、フォントの指定、幅の指定、コードを書いたときには背景が灰色になる、など、見た目に関するあらゆる指定がなされている

凝った例

JavaScript入門

JavaScriptはプログラミング言語です

古くは迷惑行為をするためのものという評価だったが、近年は普通に世の中の役に立っている

摘発される事件があって話題になっていた

code:_.js

<script>

for ( ; ; ) {

window.alert("　∧_∧　ババババ\n（ ・ω・)=つ≡つ\n（っ ≡つ=つ\n`/　　)\n(ノΠＵ\n何回閉じても無駄ですよ～ww\nm9（＾Д＾）プギャー！！")

}

</script>

プログラミング言語

コンピュータが解釈して実行するもの

1文字でも間違うとコンピュータが解釈できなくなり、動かなくなる

これは問題なし

これは動かなくなる

このワークショップでは、コピペして数字や文字をちょっと書き換えることから始めます

やっていきましょう

雛形をRemix Your Own

Remix Your Ownボタンを押す

https://gyazo.com/9d36d53b464e9c9ab8db43c2e16d0c61

index.htmlを編集していきます

ついてこれなくなったら、1.htmlとか2.htmlとかを開くと復帰できる

挨拶と画像

この状態でVJ中と言い張るのは苦しい

https://gyazo.com/973bb73f8a1c6f4c773dd7eda56b3d80

idとは、HTML内でのid(名前をつけて区別できる)

code:_.html

<p id="character">

こんにちは

</p>

<style>

width: auto;

height: 100%;

}

font-size: 10vw;

font-weight: bold;

color: blue;

}

</style>

https://gyazo.com/64c6b7f7c88393703852cd3cef49a1cd

color: blueをredとかpinkとか変えてみましょう

画面上の上下に並んでいる要素たちを裏、表に並べ替えたい

classは、種類の指定。idとちがって、同じclassの要素が複数存在して良い

code:_.html

<div class="screen">

</div>

<div class="screen">

<p id="character">

こんにちは

</p>

</div>

幅と高さを100%に広げ、内容は中央揃えにする

code:_.css

.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感はまだ足りない…

せめて動きがあれば…

https://gyazo.com/8b6423d4870f56531b0826ffa58ed269

アニメーションの原理

絵をすばやく切り替えると動いているようにみえる

https://upload.wikimedia.org/wikipedia/commons/7/73/The_Horse_in_Motion.jpg

https://gyazo.com/b980b0a7bfbfdadb60e94ce3c398b513

JavaScriptでアニメーション

定期的にプログラムを動かしてHTMLを書き換えると動いているように見える

CSSでアニメーション

CSS上で動きを記述するとブラウザが動かしてくれる

今日は割愛

背景の画像を0.5秒ごとに切り替えてみる

ここでJavaScriptが登場

さしかえる画像の一覧を作っておいて

500ミリ秒(0.5秒)ごとにi枚目の画像にさしかえる

iは500ミリ秒ごとに1ずつ増える

家でじっくり読んでください(読まなくてもいい)

code:_.html

<script>

(() => {

const images = [

];

const img = document.querySelector("img#bg");

let i = 0;

setInterval(() => {

i++;

}, 500);

})();

</script>

文字もさしかえてみよう

code:_.html

<script>

(() => {

const p = document.querySelector("#character");

let i = 0;

setInterval(() => {

i++;

}, 500);

})();

</script>

https://gyazo.com/80879a757b3073984dd3af79abe2e4ba

暇な人向け

imagesをさしかてみる(5.html)

↓にさしかえると馬が走るはず

code:_.js

const images = [

];

requestAnimationFrameを使って1秒に60回計算してなめらかな動きを作ろう

現在時刻をうまく加工して、CSSに入力すると、なめらかな動きを作れる

code:_.html

<script>

(() => {

const img = document.querySelector("img#bg");

const render = () => {

requestAnimationFrame(render);

const t = new Date().getTime();

};

requestAnimationFrame(render);

})();

</script>

現在時刻をもとに文字列を生成する

// の部分を外すと動きが変わる

code:_.html

<script>

(() => {

const p = document.querySelector("#character");

const render = () => {

requestAnimationFrame(render);

const t = new Date().getTime();

// 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>

https://gyazo.com/9003d8ab35573bb208fa9602861d33c2

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

やってみよう#3 コントローラをくっつけて操作できるようにしよう

これまでに作ったHTMLは0.5秒単位で全自動で動いている

VJだと考えると、曲に合わせて動いたり、曲の展開に合わせて内容をさしかえられるとよりよい

コントローラ

どうやって映像をコントロールするか

MIDIコントローラがあるとつまみがあって便利

https://cdn.korg.com/jp/products/upload/8e62a2423fbee297ee0a8513243a70f9_pc.jpg

ブラウザでVJするときは

画面上にコントローラを表示してしまう

ブラウザであることがわかるとかっこいいという考え

https://gyazo.com/9df43b480b8e5ac82b1c98fe1b9f55b5

ちゃんとやりたい人は

Presentation APIを使うと別画面に出せるらしい(未検証)

すごく暇な人はやってみてください!

https://gyazo.com/3f4ce269bee5cfef15cca054848102b1

input

対話的なユーザーインターフェイスを作るときに使うHTMLのタグ

インターネットで物を買ったり、お問い合わせを送ったりしたことはありませんか、そのときに使うのがinputです

inputには様々な種類がある、checkbox, radio, textarea,など

HTMLにinputを追加しよう

こちらの雛形を使います

https://gyazo.com/9d36d53b464e9c9ab8db43c2e16d0c61

index.htmlを編集していきます

ついてこれなくなったら、1.htmlとか2.htmlとかを開くと復帰できる

code:_.html

<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の中に書く)

code:_.css

padding: 1em;

position: absolute;

left: 0;

top: 0;

opacity: 0.1;

background: black;

}

opacity: 0.5;

}

画面左上に部品がくっつくはず

マウスを持っていくと非透明、マウスを外すと半透明になる

ふたたびJavaScriptを使う

2回のクリック時刻の差を記録して、intervalとして利用する

code:_.html

<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 = [

"おはようございます",

"こんにちは",

"おやすみなさい"

];

const images = [

];

const img = document.querySelector("img#bg");

};

step();

document.querySelector("#tap").addEventListener("click", () => {

if (lastClickAt) {

interval = new Date().getTime() - lastClickAt;

clearTimeout(timer);

step();

}

lastClickAt = new Date().getTime();

});

})();

</script>

TAPをクリックするたびに絵が変わるはず

曲に合わせてTAPを押しておくと音と絵のBPMを揃えられる

チェックボックスにチェックをつけると表示、チェックを外すと非表示、とする

チェックがついていたらdispla:block、そうでなければdisplay: none

code:_.html

console.log(input.checked);

const target = document.getElementById(

input.getAttribute("data-target-id")

);

if (target) {

target.style.display = input.checked ? "block" : "none";

}

}

requestAnimationFrameを使って毎フレーム描画する

116行目あたりに以下のコードを追加

直感的に操作できておすすめ

code:_.html

const render = () => {

requestAnimationFrame(render);

const p = document.querySelector("#character");

const range = document.querySelector('#range');

};

render();

暇な人向け

やってみよう#2 で学んだことを生かして、さきほど書いたHTMLからscriptを持ってきて文字を動かしたりしてみる

screenを増やして新たな表現を追加してみる

完成

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

https://gyazo.com/ca79b7965c5ef0b8ba2bcff9814a865c

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

https://gyazo.com/116dd5ce30e86874f7ce2421e4caa61a

やってみよう編おわり

駆け足でしたが…

今日学んだことをうまく組みわせると高度なものも作れるはず

消化不良のかたは家で資料を見返したりキーワードでググったりしてください

今後の歩き方

困ったときの情報源

ウェブ開発の仕事をしているとこのサイトを毎日見ることになる

ブラウザに表示すると愉快なものを探す

画像、動画、アニメーションGIF、3Dモデルなど、さまざまな題材がある

ブラウザ最新技術を追う

ブラウザ開発者の頑張りによって表現の幅が広がる

Google Chromeを作ってる人たちが年に一度、今年のアップデートを教えてくれる

たとえば、マイクの音量を拾って、音量に応じて動かす

JavaScriptの学習

勉強会に参加する

京都で不定期に開催されている勉強会

東京で今日、明日と開催中

はてな教科書

夏に開催している学生向けインターンで使っている資料

マウスストーカーを作る課題

なんでも質問してください

素材を探してこよう

スマホなどで撮った写真を取り込んで利用する

LGTM(Looks Good To Me、よさそう)なアニメーションGIFを撮影できるiOSアプリ

動画やYouTubeからアニメーションGIFに変換できる

高品質な写真

いらすとや

日本中で使われいる素材集。21点以上使った商用利用は有償になることに注意

GIFMAGAZINEの公式アカウント

きのう教えてもらった

さっきみつけた

BEEPLEさん

VJ用ループ映像を公開されている

クオリティが高く、ただこの動画を流しておけば今日のワークショップは不要となる

埋め込んで利用するさいには出典がわかるようにする

元サイトへのリンクを紹介するなど

作品を共有する・記録を残す

glitch.comで書いたプロジェクトは基本的に公開されている

Shareボタンをつかってツイートなどすると、すぐに見てもらえて便利

動画を撮ってシェアする

Gyazo GIFを使うと数秒の動画を撮って共有できる

記録を残しておく

実験中の記録を撮っておくと、試行錯誤の記録が残っておもしろい

いかがでしたか?

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

ここからは追記

おすすめJavaScript

パフォーマンスタイムで書いたコード。デベロッパツールのConsoleに貼り付けると、ページ内の画像がページの先頭のほうに集まってきて良い状態(まぶしくてよい)になる。

code:_.js

リンク集

日記

水野先生のレポート