web audio apiとgithubのcontributionsをマッシュアップしてみた
TRANSCRIPT
![Page 1: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/1.jpg)
Web Audio APIと
GitHub Contributionsを マッシュアップしてみた
@kubosho_
![Page 3: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/3.jpg)
目次• デモ
• デモについて
• ハマったところ
• 作った感想
![Page 4: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/4.jpg)
デモ
![Page 5: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/5.jpg)
ローカル上でデモサービスを動かす
git clone [email protected]:kubosho/contributions-piano-roll.gitcd contributions-piano-rollnpm installbower install./bin/www
![Page 6: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/6.jpg)
デモについて• GitHubのContributionsを元に音を生成し、それを再生するサービス
• GitHubのCotributionsデータをAjaxで読み込み、それを元にドレミファソラシの音階データを作成し、再生する
• Contribution数により、音の強弱が変わる
Contribution数が0の場合は音は出ない
![Page 7: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/7.jpg)
こんな感じの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] ]};
![Page 8: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/8.jpg)
つくろうと思ったきっかけ
![Page 9: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/9.jpg)
つくろうと思ったきっかけ• JSおじさんのために何かサービスを作ろうと思った
• GitHubのContributionsを見ていて、Contributionsの数によって音になにか変化が起これば面白いかもと思った
![Page 10: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/10.jpg)
ハマったところ
![Page 11: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/11.jpg)
ContributionsのAPIがない• GitHub DeveloperのAPI一覧を見てもなさそう
• Contributionsのデータ自体は以下のURLにアクセスすることで取得できる(ただし配列形式)
https://github.com/users/:user/contributions_calendar_data
![Page 12: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/12.jpg)
ContributionsのAPIがない• 急遽node.jsのsuperagentを使って
Contributionsのデータを取ってくるようにした
• 配列形式なので、それをよしなにJSONにして、expressでルーティングしたURLにアクセスすると、JSONのデータが取れるようにした
![Page 13: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/13.jpg)
作った感想
![Page 14: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/14.jpg)
作った感想• node.jsを恥ずかしながら今まで触ったことがなかったので、勉強にはなった
• Contributionsを取得してJSONにしてそのJSONを元に音源を生成して…という実装に手間取り、いろいろ自分が足りてないと感じた
![Page 15: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/15.jpg)
【PR】
![Page 17: Web Audio APIとGitHubのContributionsをマッシュアップしてみた](https://reader031.vdocuments.mx/reader031/viewer/2022020208/55ab99c11a28ab0d7a8b4817/html5/thumbnails/17.jpg)
終わり