hitode909の日記

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

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

すべてのものは指数的に完成に向かう

明日のワークショップの準備をしていた。10/1に天一食べながら、どういう形がいいのかのう、とか話していたところから2ヶ月弱くらい、どうしたものかと考えたり、紙にマインドマップを書いたりしていたけど、実作業としては先週、今週くらいだけの成果になっていて、今日の19時からの作業で50%くらい進んだ。第一部は1ヶ月前の時点で完成できたのか?というとそんなことはなくて、前後の関係とか、全体としてはどういう仕上がりになっているべきなのか、という大きな決定ができて、その後に細かい決定が始まるので、直前にならないと最終的な成果物は出てこない。
同じようなことがブルックス先生の本に書いてあったと思う。これ読んだのたぶん9年前くらいなのでそろそろ読み返したい。自分の学生のとき偉くて、大半のいま役立ってる本は学生のときに読んでいる。本のチョイスもセンスよく、こんなに真面目な学生はいないと思う。すごい。実際には研究室の先生が買い揃えて研究室に追いてた本がナイスだったので、そこから選ぶとナイスな状態になるということだと思う。人生の目標のひとつに、ナイスな本棚を作って、人々がそこから本をピックしていくと良い状態になっていく、というのがある。いまはひとつ課題があって、めっちゃ酔っ払うと人々に本をあげてしまうことで、そこではいい本を選んであなたにオススメと配ってしまうので、いい本から順になくなっていく。

デザインのためのデザイン

デザインのためのデザイン

  • 作者: フレデリック・P・ブルックス Jr.,松田晃一,小沼千絵
  • 出版社/メーカー: ピアソン桐原
  • 発売日: 2010/12/17
  • メディア: 単行本（ソフトカバー）
  • 購入: 5人 クリック: 147回
  • この商品を含むブログ (24件) を見る

牛のタルタル食べたことないので食べたい

会社の無料の飲み会に行っていた。生に近い肉を見かけると注文してしまう癖があって、鶏肉の炙りなどを食べていたけど、炙り具合と、期待する感じがずれていて、生肉を噛みちぎる感じになっていた。牛トロ丼とか、ユッケとか、タルタルとか、そういうかたちで、もうちょっと小分けになっていると良かったのかもしれない。
前にも日記に書いてたと思うけど、牛のタルタル食べたことないので食べたい。オススメタルタル情報あったらください。ミスタービーンのタルタルを捨てる会が好き。
www.youtube.com

■

妻が寝込んでたので心配していた。本人いわく、熱が83度出たそうである。けど病院に行ったところインフルではなくて、普通の風邪のようだった。調子が悪いと言いつつもウーバーイーツでマクドナルドのポテトやナゲットを食べていて、死ぬ前にはマクドナルドのポテトを食べたいと話していた。死ななかったので今日は仕事に出かけて、今は地下鉄の終電で一緒に帰っている。メリハリがすごい！

紐のついた靴はもう買いたくない

紐のある靴と無い靴と比べると、履いたり脱いだりする時間が100倍くらい違う。ローファーは0.1秒で履けるけど、ハイカットのブーツだと30秒くらいかかる。時間がかかることによって紐のついた靴を履く機会は非常に減ってしまった。今後靴を買うときには紐のついた靴は選択肢から外すようにしておきたい。

これをよく履いている。雨でも履ける。底がゴムでできてて頑丈。そのかわり重い。左右で1.5キロくらいあると思う。

[パラブーツ] REIMS 099412 ランス NOIR size8.5 [並行輸入品]

[パラブーツ] REIMS 099412 ランス NOIR size8.5 [並行輸入品]

■

かけこみでブラックフライデー見てみたら、黒い家電が安い!とか、黒い家具が安い!とかやっていてしょうもなかった。黒い炊飯器とか黒いオーブンとかが並んでいて、見た目も悪い。
セールのたびにものが増えると困るので、消費できるものを買うのがよいかと思って、醤油漬けのいくらとシャンパン6本セットを買っておいた。

あとは妻が靴べらを買っていたけどセール関係なく買っていそう。自立する靴べら(スタンド付きのもの)は、触ってしまって倒れると直すのも面倒なのではないか、最悪の場合、壁から引っ掛けられる運用に変えられるよう、紐を通せるものがよいのでは、という話をしていた。