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

jQuery 連続でイベント発生したときに、イベント発生が落ち着いてから実行する

#概要
テキストボックスや、スライダーなどで、“`.on(‘input’)“` などとinputイベントをとると、入力中、ドラッグ中に大量にイベント発火します。軽い処理であればリアルタイムに処理できて便利ですが、重い処理が多重発生するのは避けたい、ただ、操作時にすぐに実行したい、というときのスクリプトです。

#CodePen

TensorFlow.jsのfacemeshで顔向き推定を試してみた その２

これはTensorFlow.jsの[facemesh](https://github.com/tensorflow/tfjs-models/tree/master/facemesh)の3D座標から顔向き推定を実装した内容。

[前回](https://qiita.com/otmb/items/d6fd55cf0a10b88ed07f)はOpenCVのSolvePnPとRodriguesで回転行列(rotation matrix)を求めました。
今回はアプローチを変えてfacemeshの3D座標から直接回転行列を求めます。

[元ネタはこちら](https://github.com/1adrianb/face-alignment/issues/120)、[コード](https://gist.github.com/zalo/71fbd5dbfe23cb46406d211b84be9f7e)

## コード解説

行列演算はTensorFlow.jsを利用しました。
TensorFlow.jsでは演算子をサポートしていないのでとても見辛いです。
[TensorFlow.js API](ht

【JavaScript】イベント全部ログ

取り急ぎ
HTMLの各要素の各イベント実行時に開発者ツールのコンソールにログを出力します。
ログが大量に出るのでご注意ください。
ページ解析用

“`js:javascript

var logger = function(s){
return function(){console.log(s);};
}

document.querySelectorAll(“*”).forEach(function(el){
var evs = getEventListeners(el);
for (var k in evs) {
el.addEventListener(k, logger(el.tagName+”\t”+k.toString()));
}
})

“`

C#でFormにBingマップを表示する

# はじめに
Windows Formsに触れたことがある人なら、きっと誰もがマップをFormに埋め込みたいと思うでしょう。
しかしWindows Formsには、残念ながらマップを表示するコントロールはありません。
しかし、CefSharpとBing Maps APIを組み合わせればそのような機能を実現できます。
今回はそのやり方を紹介します。

# HTMLファイルを作る
仕組みとしては、Bing Mapsを埋め込んだHTMLファイルをCefSharpで表示する形となります。
本当はGoogle Maps APIを使いたかったのですが、クレジットカード情報を登録する必要があるみたいで面倒だったので、今回はあきらめました。

Bing Maps APIを使うにはMicrosoftのアカウントが必要です。持っていない方は登録しましょう。
持っている方は[Bing Maps APIのページ](https://www.bingmapsportal.com/)にアクセスし、「Sign in」ボタンを押してサインインします。
サインインできたら、上のメニューの「My account」から「My

たぶん10分で試せる。Azure Static Web AppにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで

AzureにStatic Web AppsというJAMstack向けなサービスが登場した模様で、プレビュー段階だけど試せたのでメモ残しておきます。

**無料らしい**（大事）

> 参考: [Azure App Service に Static Web Apps が登場！](https://k-miyake.github.io/blog/appservice-static-webapps/)

NetlifyやVercel同様に静的ホスティングだけじゃなく、Functionsも利用できるのが良いですね。

ドキュメントに[GitHub Actionsと連携して〜](https://docs.microsoft.com/ja-jp/azure/static-web-apps/github-actions-workflow)みたいなことが書いててなんでだろう的なこと思ったけどそういえば買収されてましたね（忘れがち）

## 作るもの: 静的サイト & API

AzureのStatic Web ApssにVue.jsで作った簡単なアプリをデプロイします。(いつまで置いてるか分からないの

【Javascript】 Timestamp を yyyy/MM/dd HH:mm:ss 形式で 時刻に変換する

## コード

“`javascript:timestampToTime.js
// 引数 timestamp の単位はミリ秒であるとする
const timestampToTime = (timestamp) => {
const date = new Date(timestamp * 1000);
const yyyy = `${date.getFullYear()}`;
// .slice(-2)で文字列中の末尾の2文字を取得する
// `0${date.getHoge()}`.slice(-2) と書くことで０埋めをする
const MM = `0${date.getMonth() + 1}`.slice(-2); // getMonth()の返り値は0が基点
const dd = `0${date.getDay()}`.slice(-2);
const HH = `0${date.getHours()}`.slice(-2);
const mm = `0${date.getMinutes()}`.slice(-2);
const ss =

ホントにあなたにはWordpressが必要ですか？ – GitLab PagesでかんたんWebサイト公開 –

# TL;DR
運営しているサービス、fRatの[ランディングページ](https://frat.work)をGitLab Pagesを使用して公開していますので、その方法のご紹介です。
GitLab Pagesを使えば、自動更新付き無料SSLが使えるし、無料でWebサイトを公開できます。
ポートフォリオとしてのゴリゴリのHTML/JavaScriptを使って、自由度の高いWebページを配置することもできます。


# はじめに
組織や自己のブランディング、ポートフォリオ公開のために、Webサイトを公開している方は多いのではないでしょうか？
もしくは、この状況下でWebサイトを公開して、オンラインでの活動を開始しようとしている方もいらっしゃると思います。
そんなとき、自分でサーバを用意してWordpressなどを使ってサイト公開をするのも一つの手ですが、無料で、かつ自由度の高いWebサイトを公開する手段も

Google Chartで地図を表示してみた！

# はじめに
Google Charts を利用すると様々なグラフを簡単に描画することができます。

例えば・・・・・・

– Histogram(ヒストグラム)
– Geo Chart(地図グラフ)
– Line Chart(折れ線グラフ)
– Candlestick Chart(箱ひげ図)

などがあります。

> 参照
> [公式ホームページ](https://developers.google.com/chart)

今回はその中でも、GeoChartsと呼ばれる地図の描画方法について紹介します。

# 記述方法
全コードは以下の通りです。

“`html:geoCharts.html