2020.03.16

WebカメラとJavaScriptだけで高精度なまばたき検知を実現できた話

## 概要 ドライバーモニタリングシステムの展示などで睡眠検知のシステムをよく見かけます。 興味があったので自前で実装してみました。 以下のデモサイトでは睡眠検知と書きましたが、やっているのは ...More

2020.03.06

Pythonで最低限のObserverパターンを実装する

## Observerパターンとは Observerパターンとは、監視対象が変化した時に監視者に通知するデザインパターンのことである。 - stateの変化を監視して通知できる - イベントの発 ...More

2020.03.05

Vue.js / JavaScriptでスロットル(throttle)処理を実装する

## スロットルとは何か、なぜ必要なのか スロットル処理とは、絶えず流れてくるデータを一定間隔で間引く処理のこと。 60fpsのVideo Streamで毎フレーム顔認証を行うとすると、1秒間に6 ...More

2020.03.05

JavaScriptで文字列を含むかどうか判定する時のベストプラクティス

文字列の中に特定の文字列が含まれているかどうか確認したい時、indexOfを使う人が多い。 ```js const str = 'あいうえお' if ( str.indexOf('あいう') != ...More

2020.03.04

JavaScriptのfor...in文を使うときに気をつけること【Possible iteration over unexpected (custom / inherited) members】

## for...in文 JavaScriptでは、for...inを使うとオブジェクトのプロパティ(キー)でループできる。 ```js const expressions = {happy: 1, ...More

2020.02.21

スマホはwebRTC周りが微妙

## つらい こういうアスペクト比を指定したgetUserMediaが絶妙に狂うのでつらい。 PCはおおむね大丈夫。 ```js const constraints = { aspe ...More

2020.03.13

webでいろんなリップを試せるアプリを作ったので知見をメモ

## 概要 作ったものはこちら(https://touchlip.koatech.info/) 対面カメラやアップロードした画像に対し、色々なリップを合わせることができます。 こういったソリュー ...More

2020.02.17

Canvas APIを使ってWebでグラフィックを描画したり加工したりする

## canvas APIとは htmlのcanvas要素のこと。 ```html <canvas id="canvas"></canvas> ``` canvasの上にはJavaScriptで ...More

2020.02.12

Vue.jsでIntervalをリアクティブに変化させるパターン

## 概要 setIntervalで何かをリアルタイムに描画している時、リアクティブにintervalを調整する技。 例として以下。 1. bpmを調節できるメトロノーム setInte ...More

2020.01.24

FlaskでGET、POST、Websocketを行うサンプル

## 実際に動かしてみる pythonの環境構築はPipenvまたはdockerが現時点でベストだと思っています。 今回はpipenvでやります。 pipenv入れる ```bash pip ...More

2020.01.22

文章からパワハラを判定するサイトを作った

## サイト概要 暇だったのでパワハラ判定機を作った。 機能はシンプルで、文章をぶちこんだらそれがパワハラなのかそうでないのか分類してくれる。 あとSNSでシェアできる。 [出来上がったものはこち ...More

2020.01.17

[Vue warn]: Duplicate keys detected

## [Vue warn]: Duplicate keys detected `[Vue warn]: Duplicate keys detected: '0'. This may cause an ...More

2020.01.15

PythonのTypedDictが便利なのでメモ

次にPythonのバージョンあげた時忘れないように ## TypedDict便利 python3.8で追加 ```python from typing import List, TypedDic ...More

2020.01.10

Vue.js(Nuxt.js)からwebsocketを扱う方法

## 準備 ```bash npm install websocket ``` ## 実装 vueファイルに以下記述 ```js import { w3cwebsocket } from ' ...More

2019.12.12

【JavaScript】mapの中で非同期関数を呼ぶ

## 結論 ```javascript await Promise.all( array.map((i) => { return await api.call(i) }) ); `` ...More

2019.12.10

Typescriptでジェネリックを活用する

## TypeScriptのジェネリックとは ジェネリックとは、型を抽象化する機構を指す。 Typescriptでは、型引数を使用して、どんな型でも受け取れる関数やクラスを実現することができる。 ...More

2019.12.10

requirements.txtでPythonパッケージ管理

## Pythonパッケージのバージョン管理 pipでパッケージを管理している場合、requirements.txtを作成し、必要なパッケージを環境に一括インストールすることができる。 requi ...More

2019.12.10

Ruby on Railsにおけるデータ削除

ActiveRecordで用意されているデータ削除のメソッドの種類、destroyとdestroy!の違いなどをメモ。 ## レコード削除の種類 - destroy - delete - de ...More

2019.12.10

CSSのFlex BoxとGrid Layoutの違い

## FlexBoxとは > **CSS フレックスボックスレイアウト**CSS Flexible Box Layoutは [CSS](https://developer.mozilla.org/j ...More

2019.12.10

Vuexの使い方まとめ

## vuex vueアプリのステートパターンライブラリ Vueインスタンスにstoreと書くと、全ての子コンポーネントにstoreが注入される。 ```js Vue.use(vuex); cons ...More