つくってみた!第1弾(後半戦)- beeplay.js, cannon.js, D3.js, LeapMotion – // 第12回社内勉強会 #sa_study

obake

 

こんにちわ。エンジニアのひかるです。

だいたい1ヶ月遅れですが、7/7の七夕の日に行われた第12回社内勉強会を振り返ってまいります。
なお、この振り返りを書くのは2回目です(テキスト消えてた。。)

 

つくってみた第1弾〜完結編〜

 

IMG_4083

勉強会は乾杯のビールからはじまるって教わってきた

 

さてさて。
前回から引き続き、“つくってみた”第1弾の後半・・・お披露目会なのです!
どうでもいいけど、このシリーズ、もう少しマシな呼び方ないのかしら・・・

一体何の企画なんだ?という方は、前回のブログへいってらっしゃいませ〜!
◆第11回社内勉強会(つくってみた前半戦)を開催しました! #sa_study
http://www.s-arcana.co.jp/blog/2016/07/01/3226

 

さくっと一人ずつ振り返っていきます。
私が個人的に気に入った作品には、豪華商品(自腹)をプレゼントでーす!
だれも期待してないし楽しみにしていなかった気がします。

 

発表

 

1. なっちゃん

つくってみた 後編 from Natsumi Kawakami

 

◆だれでもアドリブ弾けるくん
デモ:https://natsumican63.github.io/adlib-hikeru-kun
ソースコード:https://github.com/natsumican63/adlib-hikeru-kun

 

IMG_2295

写真だと色が・・・

 

前回の時点で「もうこれ完成してるんじゃないの?」ってクオリティだったなっちゃんですが、
キー変更が可能になったり、見た目も少し変わりました!
PLAYボタンを押すとBGMが流れるので、BGMにあわせて演奏してみてください〜!
JS勉強中ななっちゃんは勉強会終わったあともリファクタリングしたりとすっごく頑張ってくれました!

 

2. かつみさん

 

デモ:https://y-katsumi.github.io/cannonjs_study/
ソースコード:https://github.com/y-katsumi/cannonjs_study

 

IMG_2296

いろんな種類の眼鏡をもっている

 

前回お話されていたRiot.jsやreduxは記憶から抹消されてしまったようです。そういう時もあるでしょう。
cannon.jsthree.jsをつかってFPSゲームっぽいものを作ってくれました!
さらにskywayをつかってリアルタイム対戦(?)が可能!skywayの記憶は残っててよかったです!
そしてそして大事なところ・・・プレイヤーのモデルが・・・あああ・・・

 

◆はじめての Blender!【圧縮版】- dots girls Advent Calendar 2015 #dotsgirls
http://www.s-arcana.co.jp/blog/2015/12/21/2938

一人の場合は、ぜひ複数タブやブラウザでアクセスしてあそんでみてくださいね。

 

3. えんどうくん

D3.jsを使った情報可視化をしてみた from KatsuyaENDOH

 

デモ:http://bl.ocks.org/endoh0509/54604990c0b3d6353ddca2ecdc22e6aa
ソースコード:https://gist.github.com/endoh0509/54604990c0b3d6353ddca2ecdc22e6aa

 

nurunuru

ファインディング・ドリーの関連ツイート

 

3番手は学生さんのえんどうくん!けど、私となっちゃんと同い年仲間です。
D3.jsをつかってツイートの情報をかっこよーーく可視化してくれました!
今回可視化したデータは「ファインディング・ドリー」の関連ツイートだそうです。
ぬるぬる動くのがきもちよいです。ぬるぬる感、ぜひお試しあれ!
スライドにある”流れ”をみていると、可視化するためのデータを用意するのが大変そう。。

 

4. ひかる

Leap Motionでつくってみた(後編)#sa_study from Hikari Fukasawa

 

デモ:http://hico00.github.io/leap_obake/ (Leap Motionが必要)
ソースコード:https://github.com/hico00/hico00.github.io/tree/master/leap_obake

おもちゃ置き場に積まれたままだった Leap Motion をひっぱりだしてきました!
Leap Motion がないとただおばけが浮いているだけです。
蚊を叩くのとおなじで、おばけをぱーんと両手で叩くと成仏してくれるものをつくりました。
スライドにあるボツその2は、ぱーんと叩くのではなく、なむなむ〜と手をすりあわせてる動作でした。
うん。とにかく、開発中の姿が!滑稽

 

5. まっちー


IMG_2301

今日は腰が痛くないみたい

 

URL:http://www.s-arcana.co.jp/blog/2016/07/06/3231

前回はいろいろあって発表スキップでしたが、今回は時間が少ない中ブログ記事を書いてくれました!
ブログでは、元は営業さんだった彼がどのようにJSをお勉強したのか。
そして、お勉強方法のひとつとして、Chrome拡張機能の開発をおすすめとのこと。
サンプルとして、Google Keep検索ショートカットと、アルカナHPの画像を勝手に素敵画像に変更してしまうものを作ってくれました。
GoogleのスプレッドシートとかにGoogle Apps Scriptで書くのもおもしろいですよね〜。

 

だいじな豪華商品は誰の手に

そんなこんなでみんな意外と真面目に作ってくれてとっても感動しました。
言い出しっぺの私がサンプルいじっただけでゴメンなさいと心から謝罪。

さてさて!まず今回の豪華商品の中身は・・・駄菓子セットでした!わー!
うまい棒30本セットx3、柿ピーボトル、あとなにか・・・量だけは盛りだくさん!
(本当は手持ち花火とかプレゼントしたかった)

 

そんな豪華(?)賞品を見事手にしたのは、、、、

 

2番手のかつみさんでした〜〜!!

あんなおばけちゃん見せられたら、もう、ハート鷲掴みですよ。わかってるぅ〜!
はじめてのBlernderで、二日ぐらいかけて作った子なので、絶叫でした。
おばけじゃなかったら、なっちゃんが作った弾けるくんがすきだったので、なっちゃんでしたよ!

こんな感じで、私基準の豪華商品のコーナーでした。

写真は撮り忘れました・・・

 

まとめ

 

IMG_2300

本当は混ざりたかった方

 

社内勉強会初の試みでしたが、いかがでしたか?
参加してくれた方はJSが苦手な方も多かったみたいで、勉強のきっかけになってたら嬉しいです。
普段の仕事だけじゃわからない、個人のアイデアも見れておもしろいですよね。
たのしく取り組めたとおもうので、また次回も企画していこーとおもいますよー!

 

ではでは!また次回〜!