Blog

2015.07.27 / Event

iroiro_WEB

今年の前半にウェブ関連のことを教える機会をいただいていた「いろいろスクール」というのがありまして。ありがたいことに、秋にも開講させていただくことになりました。7/6から、第二期の受付開始してます。今回も前回と同じく、いろいろデザインでテクニカルディレクターとして多方面の活躍されてる長山さんと、僕、の2名でやります。

で、「いろいろスクールって何なの?」って言うと。サイトの説明を拝借すると

iroiro school は、近年「つくる」だけでは対応が難しくなってきた「ものづくり」の仕事に、 必要な技能や新しい考え方を教えるデザインのスクールです。これからのものづくりに必要な、プラスαの実践的スキルや新しい気づきを得られる講座をラインアップしています。

ということで。株式会社フィールドさんが主催で、いろいろデザインのサノさんがプロデュースという形。全16講座くらいあって、個性的な講座も多くて面白いです。その中では僕らの講座はフツーです。笑 僕自身は他の授業受けてみようかなと思ってます。

前回の講座は広く浅く手を動かしてやってみる方向性だったのですけど、今回はプログラミングを学ぶことにフォーカスして、題材をJavaScriptに絞ってます。かつ、様々なレベル感の方に受講いただけるよう、基礎と実践の2講座各4回にわけています。
基礎では、まずはプログラミングの基礎を学ぶということ。実践では、より上位の概念や知識を身につけるということ。もちろんどちらの講座も、抽象的な概念だけ話して終わるわけではなく、実際にJavaScriptを書きます。

ただ、特定のライブラリやフレームワークの使い方を覚えることに特別に重きを置きません。なんかよくわかんないけどこう書いたらいける、というのではなく、プログラミングにおける基礎的で汎用的な知識、言語に依らずに必要な概念、のようなものを重視しています。
ライブラリやフレームワークはツールやアプリのようなもので、どうしても流行り廃りがあります。でもJavaScriptの根本がわかればライブラリの流行には左右されないし、言語を横断した知識はJavaScript自体がなくなっても他の言語で使えるものだからです。
もちろん、ツールを使いこなせることもそれはそれで必要なので、ただフォーカスするレイヤーとして今回はそこではないということです。とはいえjQueryには触れますし、描画系ライブラリも触れる予定です。そしてまあJavaScriptは多分なくなりません。笑

そして以下が講座予定です。

基礎講座 第1回 8月29日(土)『プログラミングを知ろう(1)』
– プログラミングって?
– JavaScriptって?
– 開発環境設定
– 変数
– コメント
– 条件分岐

基礎講座 第2回 9月12日(土)『プログラミングを知ろう(2)』
– 繰り返し
– 配列
– 連想配列
– 関数

基礎講座 第3回 9月19日(土)『JavaScriptを知ろう(1)』
– オブジェクト
– DOM
– Event

基礎講座 第4回 10月3日(土)『JavaScriptを知ろう(2)』
– jQuery基礎
– jQueryをつかったDOM操作
– jQueryをつかったイベント処理

実践講座 第1回 10月17日(土)『オブジェクト指向を知ろう(1)』
– オブジェクト指向とは
– プロトタイプベースとクラスベース
– JavaScriptのプロトタイプを使った疑似クラスの生成

実践講座 第2回 10月31日(土)『オブジェクト指向を知ろう(2)』
– 実践的なクラスの設計と管理

実践講座 第3回 11月14日(土)『JavaScriptをもっと知ろう(1)』
– 外部との通信
– 非同期処理
– クロスドメイン通信
– Deferredを使った非同期処理

実践講座 第4回 11月21日(土)『JavaScriptをもっと知ろう(2)』
– モーションプログラミング
– 複雑なイベントの管理
– イージング・物理モデル
– 描画とパフォーマンス

レベル感としては、制作会社で働いているデザイナー/コーダーさんでJavaScriptこわい、でもちゃんとやってみたい方に基礎講座、とりあえず書けるけどクラスとか設計ってなにそれみたいな方に実践講座、がちょうどいい内容かなと思って組み立てています。
もちろんJavaScriptを身につけたい、プログラミングになんとなく興味がある、一般の方も歓迎です。基礎講座はプログラミング経験全く無しで問題ないように想定しています。基礎レベルは不要だなという方は実践講座だけ受けていただくことも当然可能です。

ご興味・ご検討いただけたら幸いです。

JavaScriptで学ぶプログラミング基礎講座 | いろいろスクール(iroiroschool)
JavaScriptで学ぶプログラミング実践講座 | いろいろスクール(iroiroschool)

2015.07.22 / Works

takahashi-animation

株式会社闇と一緒に、お化け屋敷で使うシステムを作った。
といっても今回はビビらせる部分のシステムではなくて、今あるお化け屋敷にエクステンションして、来場者にもっと楽しんでもらうためのシステムという感じ。

MBSさんが毎年夏に期間限定で開催しているお化け屋敷で、今年のテーマは「呪い指輪の家」。
ストーリーと演出はお化け屋敷プロデューサーの五味弘文さん。
オバケがデジタルまわりのプランニングで入ってて、一緒にやろうってことになった。
打合せ行って「オバケです」「闇です」って挨拶する時のホラー度数の高さすごい。それだけでもうアイスブレイク完了する威力絶大。

体験の流れとしては、

  1. 最初にニックネーム登録をして、バーコード入りのレシートを受け取る。
  2. そのあとバイタルセンサーを受け取って、お化け屋敷に入る。
  3. 入っている間にバイタルの値が取得される。あと複数アングルでビビってる映像が撮影される。
  4. 出てきて動画を確認・承認すると、バイタルの値を解析して算出されたビビリ値と、撮影された映像を使って、完成版の動画が生成される。
  5. 動画を生成したらアップロードして、ビビり度のグラフを入れたウェブページを生成して、アップロードして、完成。
  6. 最初に貰ったレシートからURLにアクセスすると、自分の動画とビビリ度グラフが見れる。

て感じ。で、その一連の流れを可能な限り自動でやる仕組みを、作った。
とはいえなんでもセンシングしてやればいいかっていうとそうでもなくて、人力にまさるものはない部分もあるので、そこは人力で。
イベント系は、コスト面でも運用面でも、ここのバランス感覚とジャッジが大事かなという印象。

お客さん向け説明だけど、詳しくはこちら。
ビビり度診断について | 梅田お化け屋敷2015×NTT西日本 「呪い指輪の家」

asdf

センサー制作と解析の実装の部分、愛知県立大学とNTTが共同研究として行っているバイタルデータから恐怖を数値化する研究をベースに、NTTさんが開発した今回専用のデバイスでやってる。

お化け屋敷の、今回は変えられない部分があって、変える余地のある部分があって、与えたい印象や演出とか狙いとかあって、全体の正常なユーザー行動フローがあって、リタイヤしたりっていう想定しうる異常系があって、なんかよくわからんエラーが起きたりっていう想定外の異常系があって、そこらへん視野に入れつつシステム全体考えて、あとはNTTさんとの切り分けして、つなぎ込みして、、、打合せとメールを厭わずにいっぱいしてFIXしてく。

一方で僕と、一緒にやったSTARRYWORKSの久保田さん、は得意領域や知識領域が違ったので、互いにフラットに質問したりアドバイスしたりできて、なんかいろいろおしえてもらったし、そこもふまえつつタスク振り分けたり、そういうのが忌憚なくできる人間関係はすごいよかった。チームでがつっとやるの楽しい。コミュニュケーションコストの低減はスピードにつながるし当然クオリティにつながるし、なによりストレスが減るし。そこに無駄なエネルギー使うのほんと勿体無い。意味ない。座組的には、MBS、五味さん、NTT、愛知県立大学、オバケ、闇、と色々いたんだけど、そういう意味では少なくとも観測範囲の全員が気さくで柔軟ていうものすごくありがたい案件だった。

お化け屋敷自体、去年より仕掛けのボリュームも2倍くらいになってるらしいし、今回僕らのシステムも入ったし、他にも新しいチャレンジがいくつかあって、どうしてもリスク避けて去年と同じことしようってなったりしそうなところで、いやこれだけ色々と新しいことをやろう!という意思決定の力のすごみ感じる。

でまあ諸々FIXしたら(しながらだけど)久保田さんとゴリっとプログラミングして、最後は現場入りまくって調整とテストをひたすらイテレート。ここはもう根気が安定性につながると思う。あらゆるタイミングのでユーザー離脱(お化け屋敷ではままある)するユーザーの行動シナリオを思いつく限り書きして検証するときにはお化け屋敷大好きな頓花さんの経験がものすごく活きたし、どの瞬間にアプリが落ちても次復帰して続きから動くようにしたし、監視もしてるし。色々とノウハウ溜まってくのはよいこと。

サーバーサイドは負荷対策してる時間今回はなかったからS3とJSで乗り切る。そのために画像からHTMLまで全部ローカルで自動生成してアップしてる。

オープンしてからもとれた映像みながらカメラかえたり、アングルなおしたり、スタッフとタイミング調整したり、サイトなおしたり、色々と改善していってる。中長期のイベントで改善していくのって面白いな。

問題は、やっぱそういう柔軟性ありきでなんとかなった感じなので、例えばガチガチにスケジューリングして外に振るとか今回は想像がつかない。自分らがCL含むステークホルダーと直接コミュニュケーションとって、仕様策定〜デザイン〜プログラミング〜現地テストまでいつでもやれる力があってできることで。PM的課題は次回に持ち越しと言える。まあそもそもウォータフォールとか無理だと思うけど。

あとは今回は驚かせる演出部分とか、個人ページ部分じゃない本体ウェブサイトとか、全体のアートディレクションとか、デバイスまわりとか、は関わってないから、次はそこにも噛みたいところ。まだまだプラスになれる部分いっぱいあると確信した。

あとなんだろ、テレビ局の美術さん、ものすごいスピードで、しかもでかいのを、今回用の建物とか造作とかあっというまに作っていくので、さすがものすごいなと。こちらからなにか依頼できるならしたいくらい。

鷹の爪もムービー作ってくれてて。さすがのクオリティ。わかりやすくて面白くてテンポいい。
【呪い指輪の家×鷹の爪】大阪会場スペシャルムービー – YouTube

梅田お化け屋敷の本体サイト。(このページはMBSさん制作なのでぼくらは作ってない。)
梅田お化け屋敷2015×NTT西日本「呪い指輪の家」|MBS

お客さん向けの、今回のシステムについての説明ページ。(こっちはぼくら。)
ビビり度診断について | 梅田お化け屋敷2015×NTT西日本 「呪い指輪の家」

KAI-YOUさんも紹介してくれた。ありがとうございます。
大阪のお化け屋敷が超怖い…! 株式会社闇、五味P、NTT西日本がタッグ

関係者のみなさま、ありがとうございました。
ものすごく怖いから絶対行って!と、お化け屋敷大好きな頓花さんも看板の陰から言ってる。9/6までやってるから、みんなぜひ。

IMG_3864

2015.07.14 / Note

IMG_3768-2

以前、株式会社闇のウェブサイトを作った | Blog | ikekou.jpというエントリで紹介した、株式会社 闇の名刺ができた。
デザインしてくれたのはSTARRYWORKSの敏腕若手デザイナーKGくん。

僕自身は別に雇用関係はないけど、TDってことで打ち合わせに結構行くし、あったほうがいいよねってことで、僕の分も作ってもらった。
でもまあ、そこはおいといて。

この名刺なんと、さわると色が変わる。温度に反応する特殊なインクを使ってるんだって。教えてもらった。

面白いインクとか素材とか知ってるのって素敵。渡すどの相手も興味もってくれるし。
ありがとうKGくん!