hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > VJ > ブラウザでVJをやるワークショップをやった

ブラウザでVJをやるワークショップをやった

VJ

2時間で、HTMLを入門し、CSSでレイヤを作り、JavaScriptを書いて動きをつけて、コントローラをくっつけてVJとして活躍する、というワークショップをやってきた。
午前中にORCAのワークショップもあり、人々が音を出せるようになり、午後には絵も出せるようになることで、それらをくっつけるとオーディオとビジュアルのパフォーマンスができるという夢のようなワークショップ。

夏頃からやっていて、Kyoto.何かという勉強会でもLTしたりしていた。こっちはコード書ける人向けにすばやく紹介するという内容。
blog.sushi.money

ワークショップの組み立て

takawoさんからワークショップお願いできませんかって声かけていただいて、やりますとすぐに返事したのだけど、ブラウザ上で動くツールを使ってやるんじゃなくて、ツールから作ることになる、とか、普通のウェブ開発の授業をやると2時間ではなにもできない、とか難しい点もあった。また、参加者のレベル感が読めなくて、学生メインだけど誰でも参加できるという形なので、HTML書いたことない人や、プログラミング言語を触ったことない人もいれば、ウェブの仕事をしてる人も来ると思われる。
いろいろ考えて以下のような構成にした

  • 開発環境のセットアップで躓かないために、glitch.com を使う
  • 雛形のHTML、各ステップの途中段階のHTML、完成したHTMLをすべて用意しておして、ごちゃごちゃになったら雛形から復帰できるようにする(三分クッキングスタイル)
  • 作業パートはHTML, CSS+JavaScript、コントローラをくっつける、という30分x3の構成にする
    • 最初はパート6まで用意していたけど15分ごとにテーマが変わるのは忙しすぎると思い30分x3くらいにした
  • 最低限の課題をこなすだけでもいい感じになるし、暇な人向けの応用的な課題も用意しておく
  • ブラウザでやるとなにがおもしろいのか、とか、ブラウザがどうなってきているか、という話とか、今後もっと勉強したい人向けとか、大急ぎだけど軸の通った話にする
  • パフォーマンスタイムもあるので、タイミングの数字を書き換えたり、文字や画像のさしかえなど、簡単にできて効果の大きいことを案内して、一人ずつ違う結果のビジュアルができるように誘導する

資料

とか考えて、できたのがこの資料。世の中のサイトがHTMLでできていることを確認して、HTMLにこんにちはって書いてあるだけの状態から始まって、最終的にはタップに合わせて動くコンテンツができる。
scrapbox.io
資料は手元のパソコンで見てもらうつもりだったけど、資料はスマホで見てコードはPCで書くというスタイルの人がいて、そこは想定していなかったので困った。20行くらいのコードをコピペしてもらうつもりだったので、手打ちすると絶対失敗する。

準備してるときは、こんな早送りの講義でついてこれるのかとか、最終的に全員のビジュアルはおなじになるんじゃないか、とか恐れていた。けど、やってみるとみなさん意外とついてこれて、こういうことをやりたいんだけどできますか、という質問をもらって一緒にコードを書いたりした。じゃあやってみましょう、と言って机の周りをウロウロしたときに、イルカの絵が出てたり、文字がやたらでかくなったりしてるのを見たときには感動した。



パフォーマンス

パフォーマンスも、雛形が絵と文字の組み合わせくらいだったので、それを踏襲していたり、marqueeを一押ししていたのでみなさんmarqueeを使われたりして、スタイルは教材がもとになっていつつも、TouchDesignerと組み合わせたり、YouTubeを再生して、音の出るVJが始まったり、クオリティの高い発表があってよかった。

これは以前作ったVJツールで文字をどんどん出している様子。

音と映像の一体感があった。このmarqueeは一生見てられる。


妻がかっこいい音を出していてよかった。

ページ内の画像をページの先頭に詰めていくコードを書いて、いろんなページを使ってチカチカする画面を作った。


今後

かなりうまくいって、いまスッキリしてかなり良い気持ちになっているけど、課題としては、教材のレールから外れてやりたいことがあるときに、JavaScriptやCSSの知識が必要になってきて、どこから手を出せばいいかわからないという点がある。そこは数ヶ月くらい勉強したらすんなり書けるようになる、という流れだと思う。なんでも質問してもらったら答えますというスタンスではあるけど、今後学習してやっていくとなると難易度高いかもしれない。質問を受けるたびにQ&Aスタイルで資料に追記していってサンプルを充実させる、みたいなアプローチも考えられる。

f:id:hitode909:20191201104312j:plain
f:id:hitode909:20191201104304j:plain
f:id:hitode909:20191201104324j:plain
f:id:hitode909:20191201104337j:plain
f:id:hitode909:20191201104354j:plain

自分の知ってることや調べたことを人に教えるのは好きで、会社ではインターン生とすばやくものを作ったり、アルバイトたちにおすすめの本を紹介したり、たのしくやっていたけど、こういう形で他の大学の学生のみなさまに対してアプローチできるのもおもしろい。またやりたい。

あわせて読みたい

水野先生のまとめもあわせてご覧ください、当日の様子の動画が多数集まっています。
paper.dropbox.com