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

リロード（再読み込み）対応ストップウォッチ（Lap機能追加等）　改善版

#リロード対応のストップウォッチ　改善版

##イメージ

##環境
WSL
RubyonRails 6(bootstrap4やjQueryが機能するように設定済み)
※bootstrap4はレイアウトで使っているだけなので使えない環境でも機能面ではあまり問題はない

##主な改善点
1.localStorageに保存する変数の削減
2.計測時間の計算方法の変更（前のストップウォッチのバグ改善とLap機能追加のため）
3.Lap機能の導入
4.ストップウォッチの状態に

cgiで時間のかかる処理をjavascriptのfetch非同期で受ける。〜プログレスバーの実装の準備〜

# 目的
– 時間のかかるサーバの処理の状態をWebブラウザでプログレスバーとして表示したいです。
– fetchで非同期で受けられそうなので、この記事では時間のかかるcgi処理を模擬してそれをjavascriptで受けられるかの実験です。

# 環境
– macOS Mojave
– apache version

“`
$ httpd -v
Server version: Apache/2.4.46 (Unix)
Server built: Aug 7 2020 12:58:18
“`

– web browser : Firfox (macOS)

# 参考
参考にさせていただきました資料です。いつも先人たちの知恵に感謝です。ありがとうございます。

– [まだXMLHttpRequestを使ってるの？　fetchのすすめ](https://qiita.com/uhyo/items/91649e260165b35fecd7)←（ほぼこの使い方です）
– [JavaScript、Node.js で文字列とバイト列の相互変換](https://qiita.com/masa

ISRでグラフを表示する

# はじめに

Webフロントエンド技術の勉強をしていて、ISR(Incremental Static Regeneration)というのがあるのを知りまして、これをIoTに応用したらどうなるかな、と考えてみたところ、**「センサーデータを表示するグラフやダッシュボードをISRで作ったら高速でかつ(ある程度は)最新情報を反映したページが作れるのでは」**というアイデアを思いつきましたので、形にしてみました。

結果はこんな感じでかなり応答時間が改善されます。

# ISRとは

ISR(Incremental Static Regeneration)というのは、

– 段階的に(Incremental)
– 静的なサイトを(Static)
– 再生成する(Regeneration)

というもののようです。

その前にSSG(Static Sit

Google Calenadr APIをnode.jsで使ってみる

#google calendar APIからスケジュール取得
普段からgoogle calendarをよく利用しています。
google calendarにプライベートと仕事のスケジュールを全て管理しておき、お客様はスケジュールの空いている所にピンポイントで予約を入れられるので、スケジュール調整が自動化出来てとても便利です。

そこで、node.jsでgoogle calendar情報を取得させるコードを見つけたので実装してみる事にしました。
node.jsでgoogle calendarを扱う前に、Google APIsで認証キーの発行が必要です。

#Google APIsでAPIキー発行
公式ドキュメントのEnable the Google Calendar APIボタンをクリックしてキーを発行します。


#Google API でプロ

kintone×地図連携プラグインの作成（APIKey不要/OpenStreetMapを利用）

#目次
*1. プラグインのダウンロード
2. なぜkintone×地図連携？
3. 機能紹介
4. 作成ポイント
5. 最後に*

##1.プラグインのダウンロード
こんにちは:sunny:
手軽に設定利用できるkintoneの地図連携プラグインを作成したので記事でご紹介させてください。
[プラグインのダウンロードはこちら（Google Driveが開きます）](https://drive.google.com/file/d/1dDD-0KWz3dQ8Qn7K336OooSQGaFfRBT0/view?usp=sharing)
※本プラグインはGoogle Chrome / Microsoft Edgeで動作確認をしています。
　Internet Explorerでは後述の問題により、住所を座標変換する機能が使用できません。

##2.なぜkintone×地図連携？
[kintone](https://kintone.cybozu.co.jp/)と言えば顧客情報や訪問記録の蓄積など、自社に合わせて柔軟なデータベース（アプリ）を作ることができます。
せっかく住所情報があるなら、**地図

センサーの値をリアルタイムで表示するJSのグラフライブラリはchart.jsで決まり！！

– スマホでジャイロセンサーの値を取得する`DeviceOrientationEvent`を使ってみた。
– [デバイスの方向の検出 \- Web API \| MDN](https://developer.mozilla.org/ja/docs/Web/API/Detecting_device_orientation)
– [DeviceOrientationEvent \- Web APIs \| MDN](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)
– せっかくなので取得した値をリアルタイムにグラフに描画してみた。
– せっかくなのでライブラリを比較してみた。

## 概要
– chart.js最強！！！！
– センサーの取得間隔を差し引けば5msほどで描画しており、他の追随を許しません。
– **速度**は300個(100 × 3)のデータを折れ線グラフで描画するのに掛かる時間です。自分の環境だけの雑な測定なので参考程度に。
– **総評**は「センサー

JavaScript　Ajax通信（JavaScriptとjQuery）

#:white_check_mark:目標
>**JavaScript と jQueryを使ってAjax通信を行う。**

“`html:index.html