1. TOP
  2. BLOG
  3. EVENT
  4. つくってみた!第1弾(前半戦)- beeplay.js, skyway, D3.js, LeapMotion – // 第11回社内勉強会 #sa_study

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

2016.07.01


どうもこんちには、まっちーです!
いつも勉強会のブログは真面目に、
いたって真面目に書いているつもりなのですが、
どうやら周囲の評価は違うようで困惑しております。
あれおかしいな。

うーん、気にせず本題!

カタチを変えた勉強会「つくってみた」

IMG_2245

今回からはこれまでと毛並みの違う勉強会です。
これまでは登壇者のプレゼン形式だったのですが、
今回と、そして次回は「つくってみた」形式の勉強会をしてみることにしました。

主催の深澤氏のお言葉をそのままお借りしますと

  • 社内勉強会を2回に分けて、みんなでそれぞれ何か作ってみて発表しあいっこしましょう。
  • 1回目が、途中経過発表。こんなものを作ってます、こんな技術つかいますとか。
  • 2回目が、完成品発表。ドヤっていきましょう。
  • どちらもスライドは必須です。
  • 技術ルール的なものは、「JavaScriptをつかってブラウザでみれるもの」
  • が、私は海よりも広大な心の持ち主なので、基本はなんでもOKのつもりです。なんかデバイスやセンサつかってもなんでもいいし。見れる物さえあればよいです。
  • みなさんがんばってください。(まるなげ)

といった企画でございます。

気になる技術からスタートしても、作りたい企画からスタートしてもOK。
ぶっちゃけなんでもありの、みんなで楽しくなんか作ろうぜ!!っていう企画です。
エンジニアたるもの、アウトプットしてなんぼでしょ。

あと、なにやら優秀発表者には深澤氏から豪華賞品の授与があるらしいです。

豪華賞品の仕入れ場所はドンキホーテです。

ウワーーーテンションアガル———



はい、ではそれぞれの途中経過発表。

先鋒:川上奈津美氏

だれでもJAZZアドリブ弾けるくん(仮)

先方は川上氏。
元音大生エンジニアのバックボーンを持つ彼女は、
JavaScriptライブラリの
jQuery.beeplay.jsを使用した、
ブラウザ上で弾けるピアノのプロトタイプを制作してきてくれました。

【参考】
beeplay·JavaScript×ビープ音で音楽を奏でよう MOONGIFT

BGMに合わせてPCのキーボードを操作することで、
それっぽくイイカンジに弾ける感じになるそうです!

hikerukun

発表者の中で唯一画面が作りこまれていました!実装はえぇ…
jQuery.beeplay.jsはピコピコ音が可愛いですね。
ファミコンしたくなるぅ。

次回までにどこまでブラッシュアップされるのか楽しみお待ちしております!

次鋒 :カツミダブルツインマーク2セカンド氏

JavaScriptを使ってブラウザでみれるものを作る(前半戦)

なぜその名前にしたのか。
なぜプレゼン時に誰も、本人すらも触れなかったのか。
ツッコんだほうがよかったのか。
そっとしておいた方がよかったのか。
いまだに答えは見つかっておりません。
眠れぬ夜が続いております。

カツミ氏は Riot.jsSkyWayを利用したリアルタイムに同期するToDo Webアプリ を作ってきてくれました。

本人曰く

フロントあんまやったことないから、とりあえずそれっぽいの試してみようという考え

ということだそうです。

ゆるいですねいいですね。
今回の企画、そういうの求めてました。

実際に作ったToDoアプリが こちら
マルチウインドウで動かすと確かにリアルタイムで同期されます。

【参考】
Riot.js
フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary

SkyWay
ビデオチャット&テキストチャット作成チュートリアル!WebRTCを簡単&柔軟に使える「SkyWay」を使ってみよう | HTML5Experts.jp

初期段階では Reduxの導入を考えていたそうなのでうが、調査段階で採用をやめたらしいのです。
理由は「簡単そうじゃなかった」とのこと。

ゆるいですねいいですね。
今回の企画、そういうの求めてました。

今回は技術調査フェーズということで、
これらの技術を使ってどう形にしてくるのか楽しみにデスネー

中堅:遠藤勝也氏

D3.jsを使った情報の可視化

D3.js

まずはこちらのサンプルをご覧あれ。

D3.jsカッコよくないですか?
カッコイイいいですよね!?
カッコイイとは素晴らしいことです!
なぜならカッコイイから!
異論は受け付けません。

これなんかブラウザ上でヌルヌル動くきもちぃぃぃぃ!!

はい、D3.jsは可視化ライブラリです。

【参考】
可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン

スライドの中もありますが、何の情報を可視化するのか

  • Twitter
  • Webスクレイピング
  • 地域や団体が公開している情報
  • 生体情報

個人的には生体情報が気になるところ!
こちらもどうまとめてくるのか楽しみデスネー

大将:深澤ひかり

LEAP MOTIONでつくってみる(前半)

今回の言い出しっぺ。

LEAP MOTION

LEAP MOTIONとは。
百聞は一見に如かず。こちらの動画をご覧あれ。
これを使ってみたいんだそうですよ。

プレゼンではLEAP MOTION APP STORE のアプリをいくつか実演してくれました。
花びらを摘むサンプルアプリ(花占いの要領)では、うまく掴めなかった結果、途中で根こそぎ引き抜いていました。
ブチッ!!
見事な草むしりでした。
さすがですね。

深澤氏は、LEAP MOTIONのJavaScript SDKを使用して、
「スプラトゥーンのローラーでバーンバーン!!ってしたらブラウザ上でビシャービシャー!!」
ってなるのを作りたいんだそうです。
※本人の言葉を一字一句正確に文字に起こしたらこうなりました。

スプラトゥーンというTVゲームにお掃除のコロコロの形状をした武器がありまして、それで敵を叩くと一撃で倒せるんですね。
それを再現したいそうです。

【参考(?)】

次回は是非みんなでバーン!!ビシャーー!!と遊びましょう

まとめ

川上氏は最終的なアウトプットの企画から、ほかの方は遊んでみたい技術から入った形になりました。
果たして豪華賞品を手にするのは誰なのか!?
後半に続く(キートン山田)。

余談

IMG_2247

予定ではワタクシもこのプレゼンに参加する予定だったのですが、
業務の兼ね合いでパスさせていただきました。。
後半戦から参加できるように頑張りますmm
まっちー反省。
申し訳程度にイカちゃん泳がせておきます。