@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

JavaScript

WebRTCで音声データを取得し音声のボリュームを表示する

ブラウザでマイクから取得した音声のボリュームを画面上で表示する必要があったので調べてみた 今回もNuxt.jsで書いてみる 前提 yarn: v1.22.5 Nuxt.js: v.2.14.6 ソースコード <project-root>/pages/sample.vueを作成 <template> <section class="section"> <div class="columns"> <div class="column"> <meter :value="volume" min="0" max="1" high="0.25"></meter> <span>{{ volume }}</span></div></div></section></template></project-root>

Nuxt.jsでWebカメラで映像を撮影 & 画像の取得をしてみる

案件でブラウザからWebカメラにアクセスし、画像を取得する実装を刷ることになったのでサンプルを作ってみた。 Nuxt.js初めて使ったけど学習コスト低くていいですね。もっと勉強したい。 環境 MacOS: 10.15.6 node.js: v14.12.0 yarn: v1.22.5 Nuxt.js: v.2.…

【JavaScript】IE11では関数の引数に初期値を設定すると「’)’がありません」エラーと出る

今やってる案件(IE11も対応範囲)で、謎のエラーに悩まされてたのが解決出来たのでメモ。 (今もIE11対応が必要なのかというのはあるけれども。。) エラーの現象 一部のページをIEで確認するとDevtoolのコンソールタブに ’)’がありません というメッセージ…

【Chart.js】折れ線グラフ内にある任意のマーカーの色を変更する

Chart.jsで折れ線グラフを作成しているときに、 特定のマーカーの色を変更したく、方法を調べたのでメモしておきます。 しきい値を下回った時に色を変えたい、みたいな際に使えるかな、と。 今回利用するコード 今回使うコードは下記のような感じです。 点数…

Chart.jsでさくっと簡単にグラフを作ってみる

現在の案件で「JSでグラフを表示する」要件が出てきたので、調査がてらChart.js」を試してみました。 ドキュメントを見ながら写経し、実際にブラウザで確認するところまでメモしておきます。 Chart.js 前提 node.js: v6.9.1 npm: 3.10.9 Chart.js: 2.4.0 Bro…

node-easymockを利用してスタブサーバを作ってみる

現在対応している案件で、APIを使ってUIを構築するけど、APIサーバがまだ用意出来ていない... といった状況が有り、簡単なAPIサーバ(スタブ)をローカルで作成してみました。 今回、「node-easymock」を利用してみました。 思ったより簡単に出来ましたが、…

ElectronとVue.js、いっぺんに入門してみた

難の前触れも無く唐突に 「Electron使ってみたい!」 「Vue.js使ってみたい!」 という気分になったので、両方まとめてサンプルアプリ作ってみました そろそろjQuery以外にも何か出来ないとお払い箱になってしまいそうな空気なので... もうなってるかもしれ…

Androidでtouchイベントが効かない件

作業中にハマったのでメモ。 要素をスワイプした距離だけ動かすコードを書いたところ、Androidでは動きませんでした。 でもページを作ったのでとりあえず御覧ください。 デモページ この時のコードが以下のとおりです。 .block { background: #ffff00; -webk…