2014-12-31

俺の2014年を褒めてあげたい

去年の終わりに「俺の2013年はやっぱり運が悪い」という1年の振り返り記事を書きました。なかなかに自虐的な内容で辛い日々を綴った感じになっていたのですが、去年あんなに酷かった自分は今年何やってたの?ってことで今年も振り返ってみました。駄文ですが、お付き合いください。

1月:“交際中→独身”

良い滑り出しですねw 結構こんなこと言うのは女子的には良くないのかなと思いつつ、表に出すことで気持ちが凄く軽くなった感じがしました。実際色んな視界が一気に開けて良い状態になった気がします。
この頃の仕事はプロテウスっていう社内フレームワークの新規開発のサポートなんかを名村さんとやらせて頂いていて、物凄く勉強できることが多かった。それをやっている途中から、オトギアの新規開発に入る事になった。
Scrum Gathering Tokyoとかに会社のお金で行かせてもらって、社内へのJIRA導入のお手伝いができたりしてとても勉強することが多かったし、Node勉強会を開いてなんちゃってインスタレーションを作ったり、Node.jsでのアウトプットもやり始めた時期。

年末にやらせてもらったトップリードさんの四度目の正直(←このサイトも素人なのに無理やり作らせてもらった)っていう単独ライブのロゴ・フライヤー制作の本番があって、最後スタッフロールにちゃんと名前載せてもらえて、それ見た瞬間に鳥肌が立った。。良かった。。
今でも仲良しのスペイン人新卒のアントニオとは普段からすごく仲良く過ごしていて、この頃からアニソンのクラブイベントに行くようになっていた。

2月:WBSデビューwwww

去年から買って楽しんでいたBitcoin。数百万のBitcoinを預けていたMt.Goxが破産しそうになって、ジョナサンと一緒にMt.Goxに突撃しにいったらWBS(テレ東)とロイター通信に取材されたw


仕事では1月の色んな活動が良かったのか部署で表彰などしていただいた。普段あまりそういうところで褒められないので嬉しかった。
生活では1月の流れで強制的に引越しをした。新しい家は安定の代々木。代々木は良い街だ。。

プライベートワークではクスールでのNode.jsの先生が始まった。Node.jsを教えるという経験は仕事でもすごく役に立って、生徒さんの疑問に答えるために、Node.jsがどうやって動いているのかというところから理解するように自然と勉強できてすごく良かった。
この時期から発表されていたBaPAの課題をつくり始める。FITCで見たBaPA0回目の講義を観て胸が熱くなった。

あと三島木の誕生日を何故か一緒にHe is gay Tで祝ってもらった。


3月:BaPA合格


作ったアホみたいな課題を評価してもらって、東大合格くらいの倍率をくぐり抜けてBaPAに合格した!!!受かった瞬間は本当に嬉しくて、急いで面倒見てもらっていた相良さんに電話して、嬉しすぎて泣いた。後に相良さんのブログに書かれていたことだけど、こういう結果で恩返しできて本当に良かった。
授業も早速始まって、PARTY, Basculeの有名クリエイターさん達が先生として当たり前にそこにいた。感動した。

仕事は順調にオトギア開発が忙しくなって来た時期だし、継続してクスールの先生もやってた。
28歳誕生日を自分で秋吉予約して祝ったりもしたw いつものメンバーに加えてゲストでFuzzの對馬さんや、名村さんとかまで来て頂いたりして思いの外豪華になってすごく嬉しかったけど、女の子の参加者が1人もいなくて人望の厚さを痛感した。

あとはジョナサンが会社を辞めてしまった。Bitcoin関係の仕事をやるって言っていた。うちの会社は良い会社だけど、Bitcoinは今頑張らないとダメって言っていたのが印象的でした。送別のために闇デザイナー力を発揮して、オリジナルビットコインちゃんT作ったら喜んでもらえて嬉しかった。


4月:79school開校

ジョナサンが居なくなってしまって、ジョナサンがやっていた社内Node.js研修を引き継ぐことになった。同時期にクスールのNode.js講座が終わり、そこで培ったものも79schoolでも活かせてとても良かった。ここまで色々あって、昇格させてもらった。
今でも79schoolはやっているし、卒業生が数えられないくらい多くなった。社内でNode.jsやって活躍してるエンジニアを何人も面倒見させてもらえてすごく嬉しいです。
月末には新規開発やってたオトギアがついにリリース!!!おとぎ話×スチームパンクで可愛くてハイクオリティなイラスト・世界観のゲームをリリースできてとても嬉しかった。

BaPAでは憧れのQantaさんとdotFesぶりの対面。対面というか、一方的に憧れていただけなので、こういう形で再会出来て本当に嬉しかった。ただ、仕事しながら課題を考えたり作ったりする時間を確保するのが糞大変だった。この頃から美女になりたいと思うようになる。


闇デザイナーの訓練も徐々に進めていって、会社の堀江さんからWebUIデザインについて教えてもらったり、LINEスタンプのマーケットが開いたのでオープン直後に申請してみたりした。(著作の所在が不明とかでリジェクト食らったけど、モナーみたいな猫みたいなスタンプはあってクソだと思っている)


5月:オトギア卒業

リリースしたばかりだったけど、オトギアを卒業してプロテウスを使ってもっと幅広く新規ゲーム立ち上げをサポートする仕事をすることになった。多い時で同時に7プロジェクトくらい一気に携わったので目が回る感じ。79schoolの卒業生も活躍していてとても嬉しかった。オトギア卒業したとき、リリースパーティで名村さんにしれっと褒められたのが嬉しかった。


相変わらずBaPAは進捗が悪く、企画が難航しまくっていた。作っては消え、作っては消え・・・っていうのを繰り返し、日々美女になりたい欲が高まっていた。
あとは家族で下呂温泉に行ったりした。ばあちゃんの80歳くらいのお祝い?よくわからないけど泣くほど喜んでくれて嬉しかった!
同期のもちこの結婚を祝ったりもしたな。今実家にいて、同級生がみんな結婚してたり子供いたりして周りから置いて行かれる感じがすごい。

6月:プライベートでの交流が増えていく

アニクラTMAという超絶アホなアニクライベントがあったので遊びに行ったら、すごく変な人が沢山いた。かわいい女装男子やアニソンDJ女将さんはこの時ちゃんと会って話して、今でもアニクラ行くときとかには一緒に遊びに行ったり、アニソンDJやらせてもらったり、ご飯を食べに行かせてもらったりしている良い関係の人たちだ。

仕事では新卒がどんどん配属されてくる時期で、Node.jsやるっていう新卒を全員面倒みた。若いし優秀な子が多かったのでとても教え甲斐があったし、今も活躍してくれてるのがすごく嬉しい。

BaPAも引き続き辛い。授業はとっても勉強になる話が沢山あって、周りも良いモノを作っている中この段階でもまだ企画が固まっていなかった。。


7月:BaPA卒業

佳境だった。最後の授業でPARTY伊藤直樹さんから半分諦められる感じで企画がボツにされる。
残り3週間くらいで企画を何本も考えて、バードマンさんに技術的な相談しに行かせてもらったり、FacebookのMessengerでニューヨークに居るQantaさんに頼りまくらせて頂いた。。Qantaさんは俺なんかでも本当に丁寧に対応してくださって、物凄く勉強になったり楽しく脱線したりメル友になるくらい仲良くなれて本当に嬉しかった。
最後の最後はホームセンターいったりオカダヤで布買ったり、自分で工房借りてミシンつかったりレーザープリンター動かしたりプログラム書いたりして卒業制作展開始30分前に実装完了するくらいのギリギリさで何とか展示できた。展示物は来場者アンケート2位になったり、後に会った人からすごく好きな作品と言ってもらえたりして達成感が半端無かったです。学びがすごく多かった


あとQantaさんをみてやろうと思っていた「技術検証を兼ねてネタ実装する」っていうのを大事にしたくて、YOが流行ったタイミングで何か作りたいと思って忙しいのに朝8時にYOを飛ばしてくる「OHA-YO」を作ったりもした。

プライベートでは船上アニクライベント、パイクラにて初コスプレもした。Free!の怜ちゃんをやったのだけど、メイクも何もしてなくて本当にレイヤーさんたちに失礼だったと思う。。

8月:Amebaリスタートからのスクールファンファーレ

Amebaがすごい勢いで変わっていった。正直社内の組織変更とかは慣れてきていて、仕事も普段通りやれば特に問題ないな〜くらいにしか思ってなかったけど、この時は違ったので久しぶりにびっくりした。ガッツリ人が異動してしまった(辞めたわけではない)ので、しわ寄せが来る形で新規ゲームのスクールファンファーレ(事前登録実施中!)に入ることになった。


BaPAが終わって本当に抜け殻だった。展示で声張りすぎて声が出なくなってたwBaPAのチーム打ち上げとかしてチルってた時期。展示物は後にメディア芸術祭に審査出したけど盛大にスベったらしいw

 

9月:東証一部上場社員になる

自分が何かしたわけじゃないし、仕事する上で全然大した変更は全くないwおめでとうございます!という感じ。
この時期の仕事は普通に順調だったし、関わった新規開発のゲームもサーバサイドに関して特に目立った炎上もなくいい感じでした。
この頃?ちょっとあやふやだけどアントニオがトレーニーとして仕事まで一緒にすることになったw仕事もプライベートも超仲良しなので本当に楽しい。新しい彼氏ができた気分♡

それと、ジョナサンのBitcoin関連の会社でエンジニアとして未来をつくるお手伝いをしに行ったりしてすごく胸が熱くなった。自分の書いたソースコードで未来が書き換えられていく感じが本当に厨二っぽいw


夏休みをとってパンケーキ童貞と生うに牛巻き童貞を捨てたり、UltraJapanでウェイウェイしたり、遊びも充実していた。


10月:アニソンDJデビュー

会社の堀江さんに誘ってもらって、ハロウィンイベントでアニソンDJやらせてもらった。初DJだったし身内イベントだったけど最高にアガってたし、盛り上げすぎてミラーボールが落ちてしまったらしいww
会社でのハロウィンも楽しく東京グールの月山さんコスプレしてやれたし、ageHaでのハロウィンイベントも行けてとにかくパーティを楽しむっていう謎の感情が芽生え始めたのもこの辺り。今年ずっと一緒に遊びに行ってるアントニオのせいだったりもする。

プライベートの制作ではGiants Girlという巨人応援女子サイト(いわゆる片目惚れのヨコ展開)のロゴデザインとかをやった。(もう閉じたのかな…)

他にはツイッターのフォローしてる人でしばらく発言してない人をガシガシリムーブできるTwitter断捨離ツールのTwitterFriendsCleanerを自分用に作ったりした。


11月:自分の書いた本が出版される


Web制作者のためのGitHubの教科書」という本を共著で執筆しました。4ヶ月前くらい?からお声をかけてもらって、Web制作者向けというところでデザイナーさんでもわかるような内容になるよう、闇デザイナーとしてアサインいただけたので今までやってたデザイン業務が全然無駄にならなくてよかったと思いました。。Kindle版もあるのでぜひ買ってください!
なんだかわからない内容でも本を書くことで、両親が喜んで買って丁寧にラップで包んで保管してくれたり(読んでない)、泣くほど喜んだおばあちゃんが数年ぶりに本を買う(絶対読まない)みたいなことが起こって親孝行した感じが出てすごく嬉しかったデス。

闇デザイナーとしては、お話を頂いて秋葉原の広告ジャック案件をもらいました。何を言っているのかわからないと思いますが、ヲタク×デザインやりたい人ということでアサインしていただけて、作ったポスターが秋葉原アニメイトや全国のアニメイトで華を添えていたらしいです。うれしい。


仕事上ではスクールファンファーレ以外にもやっぱり仕事が多かったのでいろいろなところで横軸な仕事を任されながらやるようになってました。ネイティブゲーム開発のフロー策定みたいなやつ。
しかし、突然のオトギアクローズ決定。本当に悔しい。あんなにコンテンツ力高いゲーム久しぶりにAmebaで見た。ゲーム内容が悪かったなら、ぜひリメイクして復活させてほしい。


12月:重めの仕事が降ってくる

ミリオンチェインっていう今もAppStoreやGooglePlayでダウンロードして遊べるゲームの大きめなお仕事をもらいました。今まで通りの横軸な仕事もやりながら、ひとつの重いプロジェクトを任されたり、新しい仕組みを体験するという意味ですごく成長できるチャンス!圧倒的成長!な状態です。久々に美女になりたい。

堀江さんと大阪旅行に行ったり、同期と箱根旅行に行ったりして旅行が多かった月でもある。どちらも気兼ねなく楽しめるメンバーなのでとても楽しかった。楽しすぎた。
広告制作系の人たちの伝統ある「ケミカル鍋」という有名な忘年会に初めてBaPA卒業生として呼んでもらえた。BaPA2期についての裏話とかも聞けたし、素敵な人達と出会えたり有名なクリエイターさん達とお話できたり、今年お世話になった方々と沢山挨拶できて本当によかった。また来年も是非参加したい。

他にはインキュベイトファンドがやってるフェロープログラムに応募したりした。今は面接が終わって結果待ち。通れば色んな研究テーマに向けて新しいモノを創る環境に無理やり自分を置くことができる。受かるといいな。圧倒的成長!

12月はDJ案件も3つくらいあって、DJ活動がすごく楽しくなってきた。もっとやりたいと思える良いイベントに沢山出させてもらえて、アニクラ気になってて来たことない人はぜひDJ79を見に来てやっていただきたいと思います…!

来年1/24には青山のeverでJoynというイベントでアニソンDJやらえてもらえるので是非来てくださいw(下記のfacebookイベントかtwiplaで参加表明後、当日79の名前を言えばディスカウントあります!)

Facebook : https://www.facebook.com/events/1395923177367925/?ref_dashboard_filter=upcoming
Twipla : http://twipla.jp/events/124922

ふりかえり

しゃちくとしての79

韻を踏んでいるだけです。特にしゃちくでは無いですねw
社会人としての79は今年大躍進だったのではないでしょうか。本当に去年は半年くらい社内ニートとして過ごし、うだつのあがらない毎日を過ごす時間が多かったことを考えると、1月から新規開発、表彰、79school、昇格、リリース、新規ゲーム複数立ち上げ、新規開発、横軸仕事、緊急案件の火消し?wなどなど、休む暇が全くない。いやー仕事した!!

にんげんとしての79

この一年で「変な人」力がすごく上がった気がする。とにかく色々なんでもやった。フライヤーデザイン、Bitcoin消えてWBS出演、BaPA合格、アニクラ通い、コスプレデビュー、クスールでNode.js講師、LINEスタンプ作り、商業ポスター制作、Bitcoin関連会社で実装手伝い、ロゴ製作、糞アプリ制作、書籍出版、DJデビューなどなど。振り返ると本当に何やってるのかわからない人にしかならない。
それでもアニクラとか通ってると女将DJとかいるし女装ゾンビメイドとかいるしアニオタスペイン人とかいるし、隣にいるだけで凡人感溢れだす状況が本当に辛い。まだまだ凡人だなぁという謎の悔しさがあって、もっと変な人になりたいなという迷走をしている状態です。

クリエイターとしての79

色んなお話を頂いて、色んな案件に触れさせてもらえた一年でした。去年はそのきっかけを相良さんにもらえて、BaPAを皮切りに色んなモノを最大化できた一年でした。まだまだ経験は浅いのですが、これからも色んなモノを創っていって楽しい世界づくりに貢献できたらなと思っています。
BaPAが終わった時に起きた虚無感を埋めるためには、ものづくりが必要。来年もいろいろつくっていきたい!!やりたいことがあればお声がけさせていただきます!また、何かあれば色んな案件お待ちしています!!!

まとめ

本当に楽しく、充実した一年でした。去年が嘘のようです。ギャップがすごすぎる。まだまだなのはわかってるんだけど、俺、頑張ったなぁ…。。という気持ちです。去年のクソさを知ってる方は是非褒めてやってください。。
今年に入ってからは何故かすごく活動的で、やりたいことはなんでもやった気がします。DJとかはその最たるもので、なんでこんなにちゃんとやってるのか意味がわからないw本当に面白いw

ここまでは書いてなかったのですが、筋トレも継続して続けて筋肉がかなり定着してきました。しかし風邪を引いて咳のしすぎで肋骨を年二回も疲労骨折するという虚弱体質が発覚したので来年は29歳になるし、健康にも気をつけたいと思います。。

仕事に関してはいろいろ考えないといけない時期だと思っています。上記のような色々楽しく変なことして生きてきている中、仕事では自分が何を目指していくのか、どういう信念で働くべきなのか、やりたいことをちゃんと見据えて行かないとダメだなと思ってます。
いろいろやってたくせに、何がやりたいかっていう長期的な意志がこんなになかったのかと自分が情けなくなる。そんなお年頃。

ごあいさつ

今年は去年に引き続き、様々な方にお世話になりました。特に今年はBaPAから広がった広告制作業界の方々や、プライベートを楽しくしてくれたアニクラ界隈の皆さんとのご縁がものすごい勢いで広がっていきました。
この一年は本当に怒涛の勢いで過ぎ去っていって、楽しく、刺激的で、過去の人生でも一番良い年だったかもしれません。

同世代の友人たちがどんどん結婚し、子供が増えていく辛く苦しい状況のなか、今年一年こんなにも楽しく過ごさせていただけたのは79に関わって頂いた皆様のおかげでございます。

そんな御縁に感謝しつつ、来年もこの縁を大事にしながらさらなる成長と新たな出会いに期待しながら日々精進していきたいと思います。って変なこと言うくらい良い出会いが多かったですv(^q^)v

長文お付き合い頂き誠にありがとうございます。
今年も一年ありがとうございました。来年も宜しくお願いいたします。

2014-10-08

Web制作者のためのGitHubの教科書という本を書きました


インプレス様からWeb製作者のための GitHub の教科書という本を書かせて頂きました。

79一人ではなく、共著にドワンゴの塩谷さん( @kwappa )、サイバーエージェントの平木さん( @Layzie ) と原さん( @herablog )の4人で共著で参加しています。

関係者の皆様には大変ご迷惑をおかけしましたが、最終的に出版が決まって良かったです。とても貴重な経験になりました。本当にありがとうございます!!

どんな本?

「私デザイナーだけど、バージョン管理なにそれおいしいの?」
「GitHub使ったらそんなに良い事あるの?」
「Gitとか大げさ。ファイル名に日付つければよくね?」

みたいな方にはぴったりの本だと思います!!
構成を考えるときにも、よくある Git 操作にとどまらず読者に GitHub の営業をかけるくらいの推し具合で創られています。

Web 製作者向けに書いているのですが、いざ GitHub を使うとなった時に、いきなり案件に使うわけにも行かないと思うので「自社サイトのスマホ対応」の様な実際に手が付けられそうなお題でわかりやすく対話形式で描いてあります。

「GitHub って良く聞くけど、そんなに良いの?」という疑問を持っている方に是非読んで頂いて、GitHub の良さを知ってもらえればなぁと思います!!
(※研修などでも使っていただけると思います!!)

どこ書いたの?

主に本書内で取り扱うサイトのデザイン制作周りで参加させて頂いています。
闇デザイナーとしての参加だったので(?)、実際にWeb制作会社様にヒアリングさせて頂き、ちゃんと現場の方でも問題ない制作フローを考えられるように意識して書いてあります!!

振り返り

初めての"著書"になったわけなのですが、色々と至らないことが多くて悔しいです。。
共著の方々はもの凄い人達ばかりなのでとても恐縮します(ヽ´ω`)
自分の担当部分に関しても、まだわかりづらいかもしれないと心残りなところもあります。。

最後の最後まで間に合ったり間に合わなかったりしながら書いたので、ご購入いただいたのに分からない所などありましたら、私信で連絡いただければ全力でお答えします!(主にデザイン周り)

凄く良い経験を頂けて本当に良かったです!もう校了したので、あとは出版を待つのみ!
楽しみ!!!!!!!!!!!

Twitter断捨離アップデートしました


Twitter のフォローしてる人で最近 Twitter 使ってない人をどんどん消していくツールです。

新たにソート機能とアイコン表示を追加しました。
ソートは古い順と新しい順に対応しています。


どうやって作ってるか

せっかくなので書いておきますね。
  • Node.js (express, ejs)
    • サーバサイドはNode.jsです。時間かけてないのでウンコードです。チャラいWebサーバくらいならソッコーで書けて本当に良い。
  • Redis (datastore)
    • APIの結果を数分だけキャッシュしています。無料分しか使えないので詰め込むデータも削って入れてます。
  • TwitterAPI
    • 言わずもがな。ログイン処理とかには passport.js 使った。
  • JavaScript (jQuery, moment.js) (frontend)
    • フロントは全然凝ってません。
    • 時間ソートするときに世界標準時だったのを moment.js で簡単にformat出来ました。バックエンドでも使ってます。
  • Heroku (RedisToGo)
    • 全部無料プランだけで事足りてます。
    • 無料利用時間超えたこと無いんだけど超えるとどうなるの?

要望は GitHub の issue までどうぞ^^



おまけ

moment.js で TwitterAPI の世界標準時を format するには

var m = moment(time, "ddd MMM D HH:mm:ss ZZ YYYY");

(^ω^)こうじゃ

2014-10-07

Twitterの最近発言してない友達を表示するツールを作ったょ



Twitterのフォロー出来る限界ってデフォルトだと2001みたいなんですが、長いこと使ってたらその上限に行ってしまったんですね。
最近はTwitterを交換するような友達が増えてきたところで、いちいちフォローを外す必要があったので最近つぶやいてない人(一ヶ月くらい)の一覧がみれるツールを作ってみました。

要望などありましたらTwitterでどうぞ^v^つ@79yuuki

2014-09-03

ソシャゲ提供者が意識したい艦これのキャラゲーとしての狙い

普段はソーシャルゲームを作っていたりするのでCEDECに行ってきました!
中でも勉強になった艦これのキャラゲーとしての戦略です。


金剛ちゃんかわいい。
講演の全体的な内容は以下の記事で詳しく説明されています。

【CEDEC 2014】「艦これ」、プロデューサー田中氏がこれまでの軌跡を振り返る
[CEDEC 2014]「艦これ」のこれまでと現在の姿が数字によって明らかに! プロデューサーらが教える「艦これ」の秘密
『艦これ』の過去の軌跡と未来への布石/【艦これ】に関するエトセトラ【CEDEC 2014】
【CEDEC 2014】毎日50万人が遊ぶ『艦これ』、「艦娘」の秘密や「売れ筋アイテム」が明らかに!
[CEDEC 2014]「艦これ」のこれまでと現在の姿が数字によって明らかに! プロデューサーらが教える「艦これ」の秘密

その中でもコミケに艦これのスペースが出来るくらいの規模で愛される要素になった、"空間"について注目してみました。

ユーザーに愛されるための空間作り

艦これは実在する戦艦などを擬人化したキャラクターで遊ぶシミュレーション風カードゲームです。
キャラクター自体を艦娘(かんむす)と呼び、彼女たち一人一人の設定が実際の船を意識しながらしっかりと練られています。

もちろんその練り込みはすごく深いのですが、その艦娘と関係する艦娘(姉妹艦みたいな)の"空間"、関係性を強く描いておくんだそうです。
大事なのはその空間からユーザーが想像し、価値を勝手に生み出してくれる。提督さんが色々妄想できるように、隙を作っておく。
というお話でした。

艦これの同人やpixiv内イラスト、コスプレの数はもの凄い数で増えてきました。
夏コミも多かったけど、今年のゲームショウではすごい数の艦娘コスが集まってくるでしょう。

ユーザーに想像させる隙を作ることで、薄い本がたくさん出ます。
丹精込めて産みだしたキャラクター達が乱暴されます!エロ同人みたいに!

どうやって空間を作っているのか

艦これだと、あらゆるセリフの中で他の艦娘について話していたりするので、その存在を意識せざるを得ないようになっています。
あとは任務とかで金剛型を組んで出撃、とか。

艦これはほとんど静的なゲームなんですが、あらゆるところで艦娘がうるさいくらいに喋って賑やかにし、ゲームに動きを作っているそうです。
艦これやってるとわかるんですが、滅茶苦茶よく喋る。
そのセリフどこでも妹の話が出てきたり、他の艦娘の話が出てきたりする。
一緒の艦隊組めばなんかあるのかな?と思いきや特に何も無いんだけど(任務では関係ある)
関係性がちゃんと個人のセリフだけで描かれてる。

それが"空間を作る"って言ってる所なんですね。

その他面白いなと思ったところ

探索導線

どういうこと?何?と思わせて、自分で調べて、自らの経験にさせるのがのめり込む要因になると。
さっき言った金剛型で出撃、とか結構投げっぱなしで金剛型ってどれだ・・・みたいになります。
実際は図鑑読んだりすればよかったり、絵師さんが同じだったりとかそういうところで分かるようになってる。凄い。

KPIを追わない

ゲームが面白いか考えるときには邪魔な指標になる。
某改善案対決ミーティングでよく出る数字を上げるための指標ってのは小さいし、プレイヤーとしてどうも「アガらない」気がする。

楽しいゲームづくりがしたい。


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


2014-04-27

Cassandra を使ったデータ削除の実装でコレをやるとマズイ

最近はお仕事で Cassandra をメインのデータストアにしたサービスを開発しています。
KVSなデータストアでの開発にもだいぶ慣れてきたところなんですが、落とし穴があったのでメモφ(`д´)

データ削除時に tombstone (墓石) を建てる


Cassandra はレコードの削除を行うときに、tombstone という削除フラグ的なものを立てて論理削除ぽいことをしているらしい。
なので tombstone だけでは物理的にレコードは消えておらず、Java の GC とか minor compaction をされるまで残り続けるみたいです。

検索するときの邪魔になる

Cassandra はデータ検索時に tombstone があるとそれをスキップして走査するという動きになっているらしい。
なので、大量の tombstone があると検索効率が落ちていきます。
データ削除を大量のレコードに対してやるとこうなっちゃうんですね。
cassandra/system.logとかには

Read 0 live and xxxx tombstoned cells

とか表示されているはず。

回避策1

データ走査対象にならないように、適切にレコードに対して key を割り振りましょう。
単純に1種類の ID とかで走査してしまうような検索を避けるために、もう1種類グループ分けできるような ID を振り分けると検索対象から外れて tombstone を踏むことが減ります。

回避策2

gc_grace_seconds の時間を短くして GC される間隔を短くする。
デフォルトだと10日くらいなので、それを短くするとか。これはパフォーマンスと相談して時間を決めるのが良いかと。
CQLで

> UPDATE COLUMN FAMILY [CF名] with GC_GRACE = [時間];

とか書けばいいらしい。

まとめ

一時的にデータを作って、一気に消すような実装が入ってるときに気にしたい tips でした。
tombstone 、墓石と名付けるセンスが面白いですね( ・`v・´)

2014-04-04

アンプ要らず!macの音質を劇的に良くする方法メモ

以前ロケットニュースで紹介されていた "音作りのプロが教えるブッ飛ぶほど最高な iTunesイコライザ設定「Eargasm Explosion」がコレだ!!" を試してみて、確かに劇的に音が良くなったので凄く感動しました。

しかし音楽を聴くのはいつもiTunesというわけではなくて、よく聴いてるのは SoundCloud のremixされたオシャレなクラブミュージックだったりします。アニソン多めですが、最近はラブリーサマーちゃんがお気に入りです。

https://soundcloud.com/yuuki-shichiku
https://soundcloud.com/yuuki-shichiku/likes

ここで問題なのはブラウザの音だとEargasm Explosionが使えない><ということでした。
でもググったら方法があったのでメモ。


ライフハッカーさんありがとう

しっかりまとまってました。
http://www.lifehacker.jp/2013/04/130417equalizer_pc_mac.html

Soundflower というソフトと、 Apple提供の AU Lab というソフトを使えば良いらしい。

macの設定で、出力先を Soundflower に渡して、その出力を AU Lab でイコライズするって仕組みみたいです。

Graphic Equalizer の設定を開いて、10バンドにしたらロケットニュースさんに記載されてる Eargasm Explosion を再現するだけ!

http://rocketnews24.com/2014/03/19/424320/

設定してハマったところと注意

設定した後はGraphic Equalizerの上にあるUntitledから保存するメニューを選んで、Eargasm Explosionの設定をドキュメントファイルとしてどこかに保存しましょう!
保存したファイルを開けばまたこの設定が反映されます。
消しちゃうとまた最初から設定しなおしです。

あとはmac側の設定を変えて、Soundflower に出力を向けっぱなしだとAU Labを立ち上げない限り音が出なくなったりするので注意。


滅茶苦茶良い音でSoundCloudが聴けて幸せです( ˘ω˘ )♪

2014-04-02

Node.js を JavaScript から勉強するときに使ったものまとめ

昨日で社会人5年目になった79です^q^
最近仕事ではNode.jsでサーバサイドなプログラミングばかりしているのですが、人に教える機会が凄く多くなってきました。

他の言語やっている人が、1から(人によってはJavaScriptから) Node.jsをやってみたい!という人がちょくちょく僕を訪ねてくれます。

個人的にどういう勉強をして今に至るのかをずらずらっと書いてみます。


JavaScript からやってみた

自信がないから本読もうという段階

去年末のブログに書きましたが、JavaScript自体始めたのが最近です。
途方にくれて買ってきた1冊の本が始まりなわけですが、とりあえず触るにはちょうど良かった本がこちら



ブラウザですぐ動いて楽しい本です。ただちょっと物足りないので、ちゃんとJavaScriptを勉強したくなってこれを買い足しました。



仕事で使い始めてもっと知りたくなる段階

JavaScript Good Parts


jsは凄く書きやすい言語です。良くも悪くもすぐ動きます。
しかし、ある程度ルールをキメた上でコーディングしていかないと、思わぬ挙動をしたりします。そういうのを防ぐための本。

プロになるためのJavaScript入門


jQueryとか使えるけど、JavaScriptでもうちょっとオシャレに実装したい、とか、流行りのクライアントサイドMVなんとか使いたいとか、そういう時に便利。
ちょうど仕事でBackbone.js使い始めてたので、Backbone.jsの話が多めに書いてあったから買った本。


webサイトで入門するなら

時間かけてられなくて、触りだけ知りたいときはwebでやったほうが良い。

code academy
簡単だけどオススメ。

code school
英語だし有料(一部無料)だけど、本買うより良い。実際にコードを打ち込んで正解しないと次に進めない。
他のプログラミングの勉強もできる。(もちろんNode.jsも)
コード見るだけなら意外とできちゃうし、終わった後英語出来た気になれるw

JavaScriptなら、「JavaScript road trip part 1-3」をやれば良い。

日本語じゃないとダメだって人はドットインストールでもいいのだけど、見るだけになっちゃうので、ちゃんと自分で書いて動かすっていうのと、
自分で1からちゃんと作ってみるのとセットじゃないと書けた気になったままで評価しづらい。


いざ Node.js !

正直本はあまり読んでいない。

簡単に触れるwebでの情報が結構色々あるので、Node.jsはそれだけで充分だった。
ので1冊本を読みきったことはないんです。
でも会社に置いてある良さそうだねってなった本は以下。

Node.js入門




web での学習が一番良かった

The Node Beginner Book
JavaScriptができていれば、Node.jsの勉強はそんなに怖くなくなっているはず。
Node.jsの学習に一番良いとされているドキュメントがあります。


Node.jsの特性を知れるし、expressみたいなフレームワークに頼らずに仕組みを知れるので凄く重宝するはず。

code school - realtime web with node.js
これは本当に良い授業だった。Node.jsの基礎からexpressの利用、socket.ioを使ったサンプル、RedisみたいなKVSへのデータ保存まで網羅されてる。

code schoolの良い所はビデオを見た後にその内容をテスト形式で穴埋め復習出来る所。写経よりも習熟度が高くなるので、本当にオススメです。


Github projects
blogに書いたところでどうにもならないけど、社内のソースコードを読むのが一番勉強になった。社内ではGHEを使っていて、僕が勉強してる時期はいろんなNode.jsのフレームワークが喧嘩していた。その時期はそれぞれのFWを比較しながら読んだり出来て、凄く環境に恵まれてるなぁと実感。
(※社内向けに書くと、Pなんとかとか, beezとか, 某ネイティブゲームで使ってるやつとか(気になる人は聞いてね))

身近にそういうのが無ければ、 node.js sample とかで github 検索したリポジトリを漁るのが良いでしょう!ソーシャルコーディングすばらしい^v^

とは言っても何も知らないと難しいと思うので、今パッと思いついたのでvisionmedia氏がやっぱり至高なのでリンク置いておきますね。
これ見ると気づくと思うんですが、Node.jsでよく使われてるモジュールは大体この人が関わっています。ありがたやありがたや。。

詳細だと express の examplesとかを見れば色々あります。

参考までに

社内で主流なのは express をラップしたようなフレームワークばかり。
厳格なMVCフレームワークは死んでいて、OOPなのも1つだけ?
超ざっくり言うと、1つのオブジェクトに色々機能をぶち込んだものを引き回したりする書き方が多い。
モジュールにキレイにまとめていたり、必要な機能だけDIしたり、フレームワークによって様々。

開発するときに初期から使っておくと良いツール達

Node.jsライブラリ
  • mocha: 下のexpect.jsと一緒に使う。テスト書いてTDD/BDDするのが世界標準だよと怒られています。javascriptは自律が必要な言語です。是非テストを書きましょう!
  • expect.js: 一番具合が良い。
  • lodash: underscoreより今はコッチのほうが使われてる。
  • jade: ejsのが個人的には好き。handlebarsでも良い気もする。
  • async.js: parallelな処理はasync使うのが良いと思う。長い非同期処理書くときにも良い。
  • yeoman: Node.jsで開発してたらyeomanがデフォルトで使えるので、使えるようになっておきましょう。
  • supervisor: 好み。
コーディング
  • jsHint: javascript good parts とか見ると参考になる
  • editorconfig: js関係ないけどお気に入り。node.jsのインデントはスペース2が調度良いと思う。
  • Git: 言わずもがな。使えるようになると Github 巡りが楽しくなる。
  • github-flow: git-flowは死んだ!と思う。なんかグチャグチャしてたりルールを決めるのが大変。偉い人曰く、pull requestが無かった時代の管理手法なんじゃないかとのこと。確かにそんな気がする。
その他
  • vagrant: DBとかはlocalに立ててもいいけど、vagrantに入れてすぐぶっ壊せる環境にあったほうが良いので推奨。v1.5から使えるshare機能で、boxの共有が出来るようになったから、具合の良いboxみつけてそれ使うだけでもイイ。
  • ansible: chefじゃなくてansible。覚えておくと便利。vagrant内にsshでインストール作業がサクサク出来る。
  • CIツール類: jenkinsくらいは使えればおk。jobの中身知らずにビルド回すとかはご法度です。


さいごに

社内外向けに最近のNode.js講座周りのTipsをまとめてみました。
僕が運が良かったのは、これらと合わせて素晴らしいレビュワーが居たということでしょう。
書いたコードを誰かに見せて、問題がないかチームなり上司なりと確認しあうのが大事です。

あとは真似する事が一番の近道です。スーパーエンジニア様達が弊社にはいっぱいいます。身近に居なくても、世界中のコードがgithubで見れたりするので、今はすごく勉強がし易い環境が整っているはずです。良いとされているコードをたくさん真似してみましょう。

2014-03-30

heroku で Node.js 事始め

ニーズがあったのでNode.jsで作ったアプリをherokuにデプロイして公開する方法をブログにまとめておきます。
個人でサクッとモックサーバ作るには一番最適だと思う。



1. herokuアカウントを作る


https://www.heroku.com

で Sign up


2. heroku toolbeltをいれる


https://toolbelt.heroku.com/

3. コマンドライン上でherokuにログインする


# heroku login


4. Node.jsのプロジェクトを用意する


expressでもなんでも良い。
package.jsonをちゃんと用意する。
app.jsだけとかの場合(あんまりないと思うけど) npm initとかしてきちんとしたpackage.jsonを用意する。
npm installする必要があるmoduleがある場合、正しくpackage.jsonのdependenciesを記述する。


5. Procfile を用意する


herokuにデプロイして、実際にnodeをheroku上に実行するのに必要なファイルです。
# node app.js みたいな感じで起動したい場合は、Procfileに下記のような記述をします。
web: node app.js


6. Gitでコミットする


gitがない場合はインストールしてから、

git init
git add .
git commit -m "init"

これで自身のPC上にコミットされた状態になります


7. heroku 上に自分のアプリケーションを作成する


herokuにアプリを置く場所を用意します。

# heroku create <app-name>

<app-name>のところには自分の好きな名前を入れられます。(入れないと適当な名前で作られる)


8. heroku にアプリをデプロイ


6.でコミットされた状態のものがherokuにあげられます。

# git push heroku master

7.を実行したときに一緒に作られた、heroku上にあるgitのmasterブランチにpushしています。


9. heroku 上でサーバを起動する(的な意味)


詳細は知りたければ調べてください。dynoとかで調べれば出ます。
利用するサーバの台数・・・みたいなものです!

# heroku ps:scale web=1


10. アクセスしてみましょう!


http://<app-name>.herokuapp.com

に行けば見れるはず!





こんな感じになります

以前 heroku にうpするために上げたプロジェクトをそのままgithubで公開してます。Procfileとかもあるよ。
https://github.com/79yuuki/nodeStudy




その後のTips


新たに更新

変更したら git に変更を add -> commit して
git push heroku master
すれば新しくデプロイが完了します!

ログがみたい時

heroku logsでサーバ上のログを見ることもできます。Node.jsのエラーが起こった時はこれを使って見てみましょう。


websocket対応

デフォルトのままだと heroku は websocket に対応していません。(2014/03/30現在)
heroku create した後、 Labs の機能で websocket を有効にする必要があります。

# heroku labs:enable websockets


久々に heroku 使うかーってなった時

heroku update で heroku toolbelt を更新しましょう


データベース使いたいお

heroku の add-on を使えば行けます!無料利用でもクレジットカード登録が必要なので注意。

heroku のサイトに行って、Dashboard から作ったアプリの詳細を開いてGet Add-onsをクリックして使いたいものを選びます。

heroku 上で動くDBはちょっと名前が違ったりしますがそれっぽい名前のを選べば基本OKなはず。


注意事項


基本無料なんですが、いろいろ制限もあります。下記記事が参考になります。
http://blog.mah-lab.com/2013/05/16/heroku-commons-16/
勝手にdynoが寝たり、無料時間750時間制限ってのがあります。
https://devcenter.heroku.com/articles/usage-and-billing
※あくまでモックサーバとして最適としか言ってませんのであしからずw

いつかちゃんと heroku でサーバ運用してみたいなぁ。




この記事はクスールのNode.js講座向けに書かれております!
2回目以降もあるかもしれませんので要チェキ (・ω<) -☆
http://cshool.jp/course/node-js

2014-03-02

BaPAに合格しました

BaPAとは?



BasculeとPARTYという広告界隈では有名な2社が合同で立ち上げた、BaPAというクリエイターのための学校ができました。
Both Art and Programming Academyというコンセプトで、デザインもプログラミングもどっちもやっちゃう人を育てる学校です。

紹介記事はこんな感じ。

デザインとプログラミングスキルを併せもった次世代クリエイターのための学校「BAPA」開校!(WIRED)
バスキュール×PARTYが開く学校『BAPA』の狙い。デザインとプログラミングの境界線は無くなるか。│CAREER HACK
ART&CODEの学校・BAPA(バパ)に入ると何を学べるのか、何者になれるのか : ライフハッカー[日本版]
日本を代表するクリエイティブカンパニーが、次世代クリエイティブスクール「BAPA(バパ)」を開校!【@otozureproject】
なぜ、クリエイティブ界はエンジニアを熱烈歓迎するのか?アートとプログラミングの学校『Bapa』仕掛人に聞く - エンジニアtype

これの入試課題「卵を描いて、その卵を動かしてください。」に挑戦し、見事合格することができたので、提出した入試課題についてブログを書いてみました。


「僕に卵をぶつけてください・・・!」

卵を描いてどうするかというブレストの段階で、彼女に振られて人間として終わっていた僕は、こんな自分にみんなから卵をぶつけて罵って欲しいなと思いました(ぇ

そしてできたのがこれです↓



上の僕が立っているシュールなページをPCで開き、下の卵を描けるキャンバスを用意したページをiPhoneなどのスマホで開きます。

iPhone側で円を指でなぞって描くことで、線が交差するときれいな卵が描けるようになっています。
卵を描いたら、その卵をiPhoneを振ることで投げ飛ばす事ができます!

飛んだ卵はどうなるかというと、開いていたPC画面の方に飛んでくるんです。
そしてその卵が僕に当たると・・・。

おもむろに服を脱ぎ始め・・・

土下座してひれ伏している僕に生卵を当てることができます。
爽快!!!!

気持ち悪いですね。

どうやって作っているか


ざっくり

PC・iPhone側両方共に描画をすべてhtml5のcanvasを使って行っています。
サーバサイドではNode.jsを使っていて、websocketによって投げた卵の情報が iPhone -> PC のように渡るように作っています。


卵を描く


卵を描く処理はもっと最適化できるとは思うのですが、数学を使って根性でフルスクラッチしています。

まず、よくあるcanvasお絵かきを実装したあと、円を描いた最後に「線が交差する」判定をさせています。
2つの線分が交差している時、その2線分の4端を使ってほげほげ〜なときに交差してるよ!みたいな処理が書いてあります。

交差したあとは、手で描いた円を卵型に整形する処理です。
ぶっちゃけると今回は描いた大きさをとって、その大きさに合わせて卵を再描画してるだけなんです。
ただ、卵形曲線とかいう公式をみつけて、それをプログラムに落としこむのが結構かかった。。という苦労話までにとどめておきます。。

リファクタされてない(w) ソースはGithubにも公開してるので興味があれば見てみてくださいw

卵を投げる


卵を描き終わると、投卵待機状態になります。
iPhoneのsafariから、端末の傾き等の加速度を取得することができるのでそれを利用します。

誤操作で卵が飛んでいってしまうと面白くありません。
ちゃんとiPhoneを投げたような動作が行われた時に飛ぶように、投げた動作の座標をキャプチャして、これくらいの数値の時に飛んだら気持ち良い、という値を出しています。

その時の卵を飛ばしたデータはsocket.ioを通じてheroku上のNode.jsサーバに飛ばします。
飛んできたデータはそのままPC側のページに渡されて、卵を僕に当てるまでの処理が走っています。微妙に投げた時の力加減が放物線に影響されていたりします。

PC側の卵が飛んでく処理は卵画像をパラパラさせながら、放物線を描いて奥に飛んでく風に描画してます。
卵が僕に当たった時は尊敬するfkeiパイセンが作った CyberAgent/boombox.js を使わせて頂いて、更にsoundのプロから頂いた卵の「ペシャッ」音のmp3ファイルを再生しています。

あとは基本的なcanvasの処理ですかねっ!


学んだこと


人に見せる

人に何回も見せてブラッシュアップするのが大事だなぁと実感しました。
なんとなく動いた時に、必ず誰かに見せる。
今回はtwitterやfacebookに公開して見てもらったり、ソッチ界隈の方々との飲み会などでiPhoneとAndroid2台持ってすぐデモができるようにして意見をもらったりしていました。

実際に見てもらった時に、
「操作方法がわからん」→「チュートリアルつけるわ!」
「卵描けないんだけど(処理が反応悪い)」→「クリティカルなバグだから改善する!」
「仕組みは面白いけどもうちょっと足りない」→「脱ごう!」
「土下座まで長くて見てて辛い」→「コマ数をカット!」
みたいなのをバシバシやって、とりあえず作ったものを短期間でものすごいスピードでブラッシュアップできました。

技術オナニー禁止

あとは技術力でオナニーしても全然おもしろくない。
これ使って作った → (゚Д゚)ハァ? ってなりやすい。

その先に何が出来るかの方を見たほうが良い。
崇高なコンセプトを作って壮大な作品が出来てポカーンとされるより、見て「なにこれww」ってなる面白いもののほうがわかりやすいし良い。(※崇高なコンセプトが必要な時もあると思う)


意気込み

BaPAの仕上げはチームで卒業制作した作品を、ヒカリエで展示するそうです。
そこで明確な順位がついたりするので、やるからにはトップを!狙って行きたいと思います^v^

僕は普段の仕事ではガッツリとサーバサイドの実装ばかりなのですが、BaPAを通じてしっかりとしたART & CODEな人間に生まれ変わりたいと思います。

クリエイター79の今後にご期待ください^^ω!!!

2014-01-05

Node.jsでなんちゃってインスタレーション勉強会

Node.jsを教えつつ、heroku上にデプロイしてsocket.io使ったインスタレーションをつくるまでを教える機会があったのでそのソースコードとページを公開してみました。

ソースコードと
https://github.com/79yuuki/nodeStudy

実際動いてる場所
http://nodestudy.herokuapp.com/

※スマホから見ないと使えないページが有ります

中途半端ですが、Node.jsの導入として
  • 静的ページの用意
  • formを使ったPOSTの処理でユーザーの入力を受け付ける
  • herokuに作ったアプリを載せて公開
  • socket.ioの使い方
  • socket.ioを使った簡単なインスタレーション
をやってみました。
それぞれの説明などは今後書いていくとして、8時間かけてNode.jsのhelloworldから作品制作までひと通り説明しました。
実装しながらなので無駄に時間をとってしまって申し訳なかったのですが、2回目以降(リクエストあれば)はもっと早く出来るはずw

2月から副講師でお手伝いさせてもらうクスールさんのNode.js講座の前に復習がてら色々触れて個人的にもやらせてもらってよかったです。
まだまだ募集中だと思うので、興味ある方はぜひともー^q^