[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の詳しい説明は、以下の記事を参照してほしい。