[Vue.js]contenteditable属性を使って100マス計算アプリをつくる

きっかけは忘れたけどcontenteditable属性というものを知った。
contenteditable="true"を付与した要素を編集可能にする属性で、Dropbox Paperやcacooなど、主にオンラインエディタ的なサービスでよく使われている。

「contenteditableを使った何かをつくる」という目標を掲げて、Vue.js使って1時間弱で100マス計算アプリをつくってみた！v-modelが使えなかったり、テストに手間取ったりで時間かかっちゃったけどなんとか完成した！ pic.twitter.com/Q4wkmsCRjO

— ダーシノ (@bc_rikko) 2017年12月9日

「contenteditable属性を使った何かをつくる」という目標を掲げて、100マス計算アプリを作ったので、それをサンプルにcontenteditableについて書こうと思う。

「遊び心を実現する技術」と「リリースする度胸」

「さくらインターネット Advent Calendar 2017」の11日目の記事です。

---

SIerからフロントエンドエンジニアにジョブチェンジして早2年。
主な仕事内容は、さくらのクラウドのネタ機能開発と自社サービスのエゴサをすること。

前職とはうってかわって、楽しみながら仕事をしている！

ということで、当記事ではいままでにリリースしてきたネタ機能の紹介と、リリースまでこぎつけた「遊び心を実現する技術」について書こうと思う。

※若干ポエミーですが許してください。

Quagga.jsを使ってブラウザ上からJavaScriptでバーコードを読み取る

Mac Book Proのインカメラを使ってバーコード（QRコードではない）を読み取れないか考えていたところ、Quagga.jsというライブラリを見つけた。

このライブラリは、画像ファイルだけでなくカメラを使ってリアルタイムでバーコードを読み取ることもできる。

今回はQuagga.jsを使って画像ファイルからバーコードを読み取れるようにする。
※ MBPのカメラだと認識率が悪いのでどうにかしたい。

Web Audio APIとVue.jsで複数音源をミックスしコードを鳴らす

初期のシンセサイザーは、単音しか発音できなかった。いわゆる管楽器みたいなポジション。なのでコード（和音）を鳴らしたい場合は複数台のシンセサイザーが必要だった。

ということで、今回はコードを鳴らすために複数のオシレーターを使い、それらの音源をミックスして鳴らそうと思う。


OscillatorNodeやGainNodeの詳しい説明は、以下の記事を参照してほしい。

Web Audio APIとVue.jsでADSRエンベロープ（VCA）をコントロールする

前回までにキーボードをつくったり、オシレータをつくったり、オシロスコープをつくったりした。
今回は音の三要素の最後の1つ、音量をコントロールする。
エンベロープジェネレータを用い、ADSR（Attack/Decay/Sustain/Release）をコントロールするとともに、エンベロープをグラフ表示する。

ADSRとは？

Attack/Decay/Sustain/Releaseの頭文字をとったもので、音量をコントロールする機能。

• Attack（立ち上がり）
• 発音（打鍵）されてから最大音量になるまでの時間
• Decay（減衰）
• 最大音量になってからSustainのレベルになるまでの時間
• Sustain（保持）
• Decay後の音量。発音中はずっとSustainレベルが保持される
• Release（余韻）
• 離鍵されてから音量が0になるまでの時間

この4つのパラメータを弄ることで「ドンッ!!」とか「ほわぁ〜ん」とかいう音を作ることができる。