web audio apiとgithubのcontributionsをマッシュアップしてみた
TRANSCRIPT
Web Audio APIと
GitHub Contributionsを マッシュアップしてみた
@kubosho_
目次• デモ
• デモについて
• ハマったところ
• 作った感想
デモ
ローカル上でデモサービスを動かす
git clone [email protected]: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
終わり