2014-07-28

BaPA 卒業と僕が学んだ ART&CODE の話

7/26, 27 に渋谷ヒカリエで BaPA 卒業制作展が行われ、4ヶ月に渡るBaPAの成果を発表してきました。
結果はアンケートの集計でユーザー投票2位!!嬉しいです^^
見に来てくださった方々ありがとうございます!!

東京都・渋谷ヒカリエで次世代クリエイター養成学校「BAPA」の卒展を開催中

BaPA卒業制作展で出したプロダクトについてと、BaPAのコンセプトであるプログラミングもデザインも両方できる人材育成、ART&CODEについて79が学んだことを書いてみます。ちょっと長いですが、お付き合い下さい。

BaPAとは


BaPA は BasculeとPARTYがはじめた ART&CODE の学校です。授業は全10回あって、テクニカルディレクションやアートディレクションみたいな座学と、卒業制作を並行して行われました。

閑話休題ですが、サイバーエージェントだと PARTY も Bascule も全然知名度なくて、BaPA に通ってるって言う時は毎回「ぱーてぃーとばすきゅーるっていう有名な web の広告制作会社があって...」みたいなとこから話さないといけなかったです。社内からはなんか79は色々やってるんだなぁくらいにしか見えないんだろうなと思っていました。
実際PARTY知ったのもgggの展示見てからだし、僕も例外ではないのですが。

つくったもの


おとしもの

おまもり型のほっこりナンパツールを作りました。





渋谷をテーマにした作品を作る中で、我々のチームは(グループワーク形式の製作でした)

渋谷はナンパが多い→出会いが多い→「出会いの街、渋谷。」

をコンセプトにして企画を進めていました。
出来たのがこの「おとしもの」で、拾ってくれた人とチャットが出来るようになっています。詳細についてはまた別に書こうと思ってます。

「おとしもの」製作

製作にあたって手に入れたスキルがミシンでの裁縫と、シルクスクリーンでのプリント、レーザーカッターの操作です。BaPAって本当に成長できてすごい(白目)

おまもりとそれを入れる桐箱の製作過程はこんな感じです。

レーザーカッターは木目によって色味が違ったりするので、
木目によって細かく出力を調整しました

シルクスクリーンではなく、今回は版下データを布用インクジェットプリンタで印刷して一緒に印刷したトンボに合わせて裁断しました。

ミシンで裁断したところをロックします。

裏返して穴を空けてヒモを通す穴をあけてるところ。

こういうちゃんとした素材があるものは失敗できないから怖いです。デジタルは甘え。
この過程を乗り越えて、何とかする力(物理)が付いてきました。

途中のボツ案での過程

4ヶ月もあった BaPA ですが、「おとしもの」製作に入ったのは最後の2週間くらいです。
それまでに「出会い」をコンセプトにした企画を数十個は考えていたのですが、どれもゲスい方向に行ってしまい、最後の授業で伊藤直樹さんに「女性の気持ちを全く考えられていない」と男として最低の評価を頂いてしまいました。
実際配布していたビラには展示3週間前にボツにされた企画が掲載されていたりします。

その間も検証を兼ねて、プロトタイプで Arduino や openFrameworks、iOSアプリ開発、BLE(Bluetooth Low Energy)、その他電子工作みたいなスキルが沢山付きました。


ART & CODE について

ART & CODE、デザインとプログラミングをやっていく上で色々感じたことを書いていきます。

企画のデザインについて

ボツ案での過程にもあるいろんな検証は技術力、コーディング力がないと出来ないものが多いです。ただ、それが出来るだけってのはあまり意味が無い。それを企画に上手くつなげるバランス、企画のデザインが大事なんです。

今回のグループワークでは皆が納得する企画がなかなか出ず、出たとしてもゲスすぎたり、先生方にボツにされてしまう企画が多かった。それは企画のデザインが上手く行ってないだけなんです。

「アガる」モックアップ

何かを作ったり考えたらすぐにモックにして見せないとダメ。自分の感覚信じ過ぎて勝手にやりきってしまうと苦労します。何度も失敗したのでこれはガチ。

見られるのは大事。今人生で初めて(コスプレのために)見せるために鍛えてるけど、凄くモチベーションが高い。見せるってのはデザインでもプログラミングでも筋トレでもなんでも大事なんだなと思いますw

あとはディスプレイ内完結のものを作っている方が楽でした。というかその時はコーディングしてるので凄く作業してる感じがあった。
物を作るには素材が必要で、マテリアルがデジタル完結しなくなる途端にプロトタイプの速度が落ちる。面白いかどうかの検証が空論になり易いのでそういう企画をするときはちゃんと時間をとらないといけない。

瞬発力は大事だし、凄くチカラもつく。やりたい!面白そう!と思ったらまず最初の「アガる」ところまで試してみる。
モックで作ったモノがいい感じに仕上がると「アガる」ので次の発想に繋げやすいんです。

チームの目線を合わせる

衝突し合うチームで方向を合わせるには誰もが納得するスーパーアイデアを出すか、実際にモノを作って立証するしかない。文句や討論では解決しないこともあるのだと思いました。
だめだと思う時は、だめだと誰がみても分かるところまでプロトタイプを最速で作るのが一番コンセンサスが取りやすく成功率があがりました。特に、上手くいかなさそうなときはすぐに分かる。

最後の最後も実際に中途半端だと思っていた案を作ってみせて、言っただけでは伝わらなかった懸念点をもう一度洗い出しました。
作る前後で反応が違う。グループワークでは、皆の感覚が短かったり遠すぎたり別の方向をみたりしてて、現物を見ないと話にならないこともある。
(逆に一人でやるのは最高に気持ちいい。オナニーと一緒でぼくのかんがえた最強の○○をやればいい。自分へのネガティブチェックが緩ければよりたのしい。しかしそんなものは大抵クソだったりします。)

今回 BaPA ではメンバーの皆でやりきって凄く良い物が出来た。グループワークの辛さと楽しさを両方経験できて良かったです。(仲もめちゃくちゃ良いです。)

PARTY 清水幹太さんから教わったデザイン

BaPA と通じてデザインの意味が凄く良く分かりました。
後半は決まらない企画について、泣きつくように尊敬していたカンタさんに相談しまくっていたのですが、その時にあったデザインの話です。

カンタさん自身は元デザイナーでデベロッパーになってからデザインできるようになったそうです。
そのデザインっていうのは根拠が必要で、なんでその手段を選んだのかというのが説明できないといけない。

企画を技術面やインターフェース、体験、色んな視点からデザインする。
企画を狙い通りに機能させる、辻褄を調整するのもデザイン。
絵を作ることだけがデザインではなく、企画を成立させる≒デザインするということなんだなぁと解釈しています。

ワガママ言うと「おとしもの」はもっと ART & CODE したかった。企画をデザインするチカラが弱かった。そのチカラは後半やっと出し方が分かった。少しは成長できたんだなぁと思います。

BaPA を終えたその後

BaPA は凄く刺激的で、今の仕事には無い制作・モノづくりの楽しさが沢山あふれていました。
今の仕事に直接活かすには難しいのですが、デザインの考え方、企画の進め方みたいなところはものすごく活きると思います。
あとバスキュール朴さんが最後に言っていた、「出来る人は締め切り前の追い込みが最初から出せる」というのもちゃんと心がけたい。

こういう場に飛び込むのは凄く大変なことだし、やってる間は心の底から「逃げちゃダメだ」って言えたと思うし、そういう時はやはり美女になりたいと思う。週末のBBQを楽しみに生きたい。話がそれました。

「おとしもの」は今後ブラッシュアップして別のところで発表できないか検討中です。
どこか記事とか展示とかで扱ってくれないかなぁ。(チラッチラッ

辛くて楽しい製作の日々が終わってしまいましたが、いろんな人を巻き込んで、今後も仕事以外で色々作っていきたいと思います!
面白いモノ作りたい人一緒にやりましょう^v^!!

2014-07-02

Node.js で仕事をするための研修を実践してみた

ちょっと前から社外の学校で Node.js の授業の先生をやったり、社内でも Node.js 人材の育成で 79school という研修をやっていて、 @oranie 先生からリクエストを頂いたので内容を紹介してみます。

やっていること

1. JavaScript 基礎 (1 - 3 days)

Code School ( https://www.codeschool.com/ ) で自己学習。jsに触れてもらいます。

Check point

Code School がそのままテストになっているので、完了することができればOK。

2. JavaScript 実践 (1 day)

js を使用して簡単な web アプリ作成。デフォルトで TodoMVC の Todo、電卓、カラーピッカー。他には Flappy Bird 、マインスイーパーの様なゲームを個人のやりたいようにやってもらいます。
ここからは jsHint, editorconfig 等の静的解析ツールやコーディングツールを導入して貰います。

Check point

jsHint, editorconfig の使い方が分かり、自分の作ろうとしていたモノのコア部分が完成していればOK。

3. Node.js 基礎 (3 days)

Code School で自己学習。 Node.js に触れてもらいます。fs を使った非同期処理の基礎、websocket の使い方、 redis を使ったデータストアとの連携などを学びます。

Check point

Code School がそのままテストになっているので、完了することができればOK。

4. Node.js 実践 (5 days)

Node.js を使用して簡単な web アプリ作成。掲示板・socket.io を使ったゲーム等、規模が大きくならない程度で個人の好きなモノを作って貰います。
ここでは mocha + expect.js を使ってロジック部分のテストコードを書きます。

Check point 

自分の作ろうとしていたモノのコア部分が実装でき、 mocha + expect.js を使ったテストを書けるようになっていたらOK (余裕があればカバレッジも見る)

5. 社内フレームワーク実践 (5 days)

社内の express の middleware などをモジュール化したようなフレームワークがあって、それを使ったダミープロジェクト(稼働中プロジェクトの fork )の機能を実装する。
フレームワークのコードリーディングを座学として簡単に行い、ダミープロジェクトのテストコードを残した状態で実装を削除したものを教材とする。受講者はテストコードが通るまで実装を進めて貰います。

Check point

テストを100%通すことが出来、GitHub を用いた pull request レビュー時にフレームワークの機能を使った実装ができていればOK。

79school の狙い

仕事でJavaScriptを使う

JavaScript はゆるく書いても動いてしまう言語です。その分、自分のコードを厳しく管理しなければ仕事で使うコードとしては良い品質を保つことが出来ません。
これは 79school の前任者、自分の元上司のジョナサンが言っててそれを引き継いでいます。

そのために jsHint, editorconfig みたいなツール、mocha + expect.js でのテスト、Github を使った Pull request 中心の開発フローを社内の新規プロジェクトで実践しました。
この研修でも同じフローを JavaScript に慣れるのと一緒に少しずつ導入していきます。

好きなモノを作って行く中で jsHint に怒られながら自分の js を見直す機会を持ち、テストコードを書き、実際のチーム開発フローと同じ方法で OJT と同等のことをする。
全てが終わってから配属され、卒業生は同じ開発フローの中に組み込まれることでスムーズなスタートダッシュを切ることが出来ます。

コードを読む

あとはフレームワークのコードを読むことを凄くオススメというか強要してます。
作ってくれたのは弊社No.1エンジニアの御方なので、良いJavaScriptのデパート状態なんです。
フレームワークの使い方がわからなければ、そのモジュールのテストコードを読むことが出来るようになっているので、そのとおりに動かせば使えます。テストコードがあってよかった!→自分もテストコード書いておこうという好循環にもなると尚良い。

おまけ

Code School はフル英語のサービスです。英語のビデオと教材をみて、英語の問題をコードを書いて答える。
これでちょっとでも英語を読むってことに慣れてもらえれば、沢山利用している npm のREADME を頑張って読もうとも思えるし、pull request のコメント英語も書いてみようって気に少しはなってもらえるんじゃないかなと勝手に思ってますw

2014-07-01

Yo API Team とやりとりしながら Yo ボタン作った Yo


Yo 楽しいです。SHICHIKU でやってます。

ハイコンテクストなやりとりが出来ると色々話題の Yo の API があって、
ついカッとなって OHA YO YO (おはよーYO)という Yo ボタンを作りました。

http://ohayoyo.herokuapp.com/

Yo をインストールしている iPhone で、safari から Yo ボタンを押せば
"OHAYOYO" (OHAYOは取られてた) を Yo のリストに登録することが出来ます。

とりあえず設定した朝8時になると OHAYOYO から Yo が届きます。

朝に Yo がくるってことは、多分 Good morning 的な Yo だということが分かりますね。
ハイコンテクストォ〜〜〜〜(∩´∀`)∩

Yo API Team

出来たのは良かったんですが、API以外の実装は1時間立たずに出来てたのに、API キーの発行メールが全然来なかったんです。

カッとなって作っただけに、早く公開したかったので Yo API Team のメールアドレスに凸ってみました。
Yo! Please API Key! みたいなメールを送ったのに、相手からは Yo が一回もなかったのが寂しかったです。
でも送ってから数分で返事が来て、(出社前くらいに送ったから現地時間何時…?)すぐにAPIを試すことが出来ました。

試した後も無限にYoが送られてくるバグがあったので、つたない英語で不具合報告したり、「can you try now?」って来たから今無限に送ってるからログ見てくれ!とか返したり、流行ってるサービスの開発者と面白いやりとりができて面白かったです^v^


つくりかた

Medium にAPI の使い方がまとまってます。

APIキーを作るのはこちらから

こちらのブログが分かりやすかったのでコレ見れば良いです

時間管理は node-cron 使ったりしてます。heroku だと timezone はちゃめちゃなのでtimeZone オプションは凄く助かった。
https://github.com/ncb000gt/node-cron