Web Audio APIと

GitHub Contributionsを マッシュアップしてみた

@kubosho_

自己紹介• Twitter: kubosho_

• 「謎社」こと株式会社グラニ所属

• http://blog.o2p.jp/

• へのへのもへじの人

目次• デモ

• デモについて

• ハマったところ

• 作った感想

デモ

ローカル上でデモサービスを動かす

git clone git@github.com:kubosho/contributions-piano-roll.gitcd contributions-piano-rollnpm installbower install./bin/www

デモについて• GitHubのContributionsを元に音を生成し、それを再生するサービス

• GitHubのCotributionsデータをAjaxで読み込み、それを元にドレミファソラシの音階データを作成し、再生する

• Contribution数により、音の強弱が変わる

Contribution数が0の場合は音は出ない

こんな感じのJSONを返してます{ "0": [ ["2013/05/28",0], ["2013/05/29",0], ["2013/05/30",0], ["2013/05/31",0], ["2013/06/01",0], ["2013/06/02",0], ["2013/06/03",0] ], "1": [ ["2013/06/04",0], ["2013/06/05",0], ["2013/06/06",2], ["2013/06/07",3], ["2013/06/08",0], ["2013/06/09",3], ["2013/06/10",28] ], "2": [ ["2014/05/27",18], ["2014/05/28",22] ]};

つくろうと思ったきっかけ

つくろうと思ったきっかけ• JSおじさんのために何かサービスを作ろうと思った

• GitHubのContributionsを見ていて、Contributionsの数によって音になにか変化が起これば面白いかもと思った

ハマったところ

ContributionsのAPIがない• GitHub DeveloperのAPI一覧を見てもなさそう

• Contributionsのデータ自体は以下のURLにアクセスすることで取得できる(ただし配列形式)

https://github.com/users/:user/contributions_calendar_data

ContributionsのAPIがない• 急遽node.jsのsuperagentを使って

Contributionsのデータを取ってくるようにした

• 配列形式なので、それをよしなにJSONにして、expressでルーティングしたURLにアクセスすると、JSONのデータが取れるようにした

作った感想

作った感想• node.jsを恥ずかしながら今まで触ったことがなかったので、勉強にはなった

• Contributionsを取得してJSONにしてそのJSONを元に音源を生成して…という実装に手間取り、いろいろ自分が足りてないと感じた

【PR】

http://gamebiz.jp/offer/21

終わり