f@ctor

JavaScript関連のことを調べてみた2020年01月10日

JavaScript関連のことを調べてみた2020年01月10日
目次

Webカメラにおける顔認識を最小限のコードで実現させる

# はじめに
顔認識のプラットフォームは、すでにAWS、Azure、GCPなどでサービスとして展開されていますが、フロント（Javascript）でもやりたいと思い調査したので、共有します。今回はあくまでもコアとなるコードをわかりやすくするためにできる限り無駄なコードを書かずに実現していますので、他の機能も使ってみたい場合は以下のサイトを確認してみてください。

[face-api.js](https://github.com/justadudewhohacks/face-api.js)

# 手順

まず、公式のリポジトリをクローンします。

“`
git clone https://github.com/justadudewhohacks/face-api.js.git
“`
以下のファイルをコピーします。

– dist/face-api.min.js → js/
– weights/tiny_face_detector_model-shard1 → models/
– weights/ttiny_face_detector_model-weights_manifest.js

元記事を表示

外出先でWebサイトをデバッグする

# はじめに
PCやUSBケーブルなどを使わずに、外出先でモバイルブラウザ向けの開発コンソールである“`Eruda“`を任意のWebサイトで呼び出します。このErudaを使うことでChrome Dev ToolsのようにDOMやリソースなどを表示することができます。
Erudaを使ったデバッグ方法については割愛しますが、
“`ブックマークレット“`と“`iOSのショートカット“`を使ってモバイルブラウザ上でErudaを簡単に呼び出すことができます。

# ブックマークレット

最も簡単なのが、以下のGistにあるブックマークレットをブックマークに登録し、iPhoneやAndroidなどのモバイルブラウザから呼び出す方法です。一応、PCのブラウザからも呼び出せますが、素直にChrome Dev Tools を使った方が良いです。
[Eruda Bookmarklet – GitHub Gist](https://gist.github.com/suderman/aa2338c5b1f11691c64aacae65b6ce4f)

任意のサイトを開いて、この登録したブックマー

元記事を表示

[Electron] IPC には新しい ipcRenderer.invoke() メソッドを使ったほうが便利 (v7+)

# TL;DR;

Electron v7 から、`ipcRenderer.invoke()`、`ipcMain.handle()` が新たに追加されました。これは、従来まで利用されてきた `ipcRenderer.send()` や `ipcRenderer.sendSync()` の上位互換のようなものです。今後は積極的にこちらを使ったほうがよさそう。

# 従来の Renderer <-> Main プロセス間通信 (IPC)

## 同期: `ipcRenderer.sendSync()`

文字通り、同期 (Sync) 的にプロセス間通信を行います。
この際に重要なのは、sendSync によって Main プロセスが呼ばれるとその間は Renderer プロセス上の処理は完全にブロックされます。Main プロセスからの応答があるまでは、renderer プロセス側の操作画面はいわゆるフリーズしたような状態になります。描画処理も止まるので、ローディング画面のような CSS アニメーションも容赦なく固まります。

ドキュメントにも下記のように、どうしても使わざるを得ない状況下に

元記事を表示

JQueryを使わずjsとcssを使って背景画像のスライドショー 作成

JSの勉強を兼ねて、JQueryを使わずにJSとCSSで背景画像のスライドショーを作成しました。
※まだまだ勉強中なのでミス等あればコメントで教えていただければありがたいです。

####結果
まずは結果を表示します。こんな感じに仕上がりました。

See the Pen leafletのテスト

“`leafletdemo4_marker.html



Leaflet Demo4


```

### ポイント
何も考えずに`props`に値を渡すと、以下のようになると思います。

```vuejs