2021年2月 – ページ 2 – てまりのユニバーサルデザイン

2021年2月18日2021年2月18日

Fitbitの睡眠データを自動でスプレッドシートに記録

前回、FitbitのAPIで取得した活動データを、GAS（Google Apps Script）を用いてスプレッドシートに自動で書き込みました。今回は睡眠データの記録です。

GASのコード

スプレッドシートの用意までは、前々回の体重データの書き込みと同じです。

スプレッドシートのシート名は「睡眠」としておきます。

FitbitのAPIは、呼び出すデータや返ってくるデータの違いによって、プログラム調整が必要です。

睡眠データを記録するためのGASコードは下記です。

function getSleep(){
  let res = getFitbitAPI(`https://api.fitbit.com/1/user/[user-id]/sleep/date/today.json`);
  if(res.summary){
    let data = res.summary;
    Logger.log(data);
    //日付, 睡眠時間, 目覚めた状態, レム睡眠, 浅い眠り, 深い眠り
    writeSheet([res.sleep[0].dateOfSleep, data.totalMinutesAsleep, data.stages.wake, data.stages.rem, data.stages.light, data.stages.deep], '睡眠');
  }
}

function getFitbitAPI(url) {
  var FITBIT_TOKEN = [token];

  var options = {
    'method': 'get',
    'headers': {
      'Authorization': 'Bearer ' + FITBIT_TOKEN
    }
  };
  
  return JSON.parse(UrlFetchApp.fetch(url, options));
}

function writeSheet(list, name) {
  let ss = SpreadsheetApp.getActive(),
      sheet = ss.getSheetByName(name);
  sheet.appendRow(list);
}

function getSleep(){

let res = getFitbitAPI(`https://api.fitbit.com/1/user/[user-id]/sleep/date/today.json`);

if(res.summary){

let data = res.summary;

Logger.log(data);

//日付, 睡眠時間, 目覚めた状態, レム睡眠, 浅い眠り, 深い眠り

writeSheet([res.sleep[0].dateOfSleep, data.totalMinutesAsleep, data.stages.wake, data.stages.rem, data.stages.light, data.stages.deep], '睡眠');

}

function getFitbitAPI(url) {

var FITBIT_TOKEN = [token];

var options = {

'method': 'get',

'headers': {

'Authorization': 'Bearer ' + FITBIT_TOKEN

}

};

return JSON.parse(UrlFetchApp.fetch(url, options));

}

function writeSheet(list, name) {

let ss = SpreadsheetApp.getActive(),

sheet = ss.getSheetByName(name);

sheet.appendRow(list);

}

GASのトリガー設定で、getSleep()をタイマーで毎日実行することで、自動的に記録されます。

Fitbitアプリで睡眠データを同期した後でなければ、記録ができないので注意が必要です。

記録されたスプレッドシート

日付、睡眠時間、目覚めた状態の時間, レム睡眠の時間、浅い眠りの時間、深い眠りの時間が記録されました。

ただ、睡眠時間を分で見ると分かりにくいです。

データを「時：分」で表示

「時：分」の形式に変換します。

GASから「時：分」形式でスプレッドシートにデータを書き込むように、getSleep()を調整します。

function getSleep(){
  let res = getFitbitAPI(`https://api.fitbit.com/1/user/[user-id]/sleep/date/today.json`);
  if(res.summary){
    let data = res.summary;
    let totalSleep = data.stages.rem + data.stages.light + data.stages.deep;
    Logger.log(data);
    //日付, 睡眠時間, 目覚めた状態, レム睡眠, 浅い眠り, 深い眠り
    writeSheet([res.sleep[0].dateOfSleep, `0:${totalSleep}`, `0:${data.stages.wake}`, `0:${data.stages.rem}`, `0:${data.stages.light}`, `0:${data.stages.deep}`], '睡眠');
  }
}

function getSleep(){

let res = getFitbitAPI(`https://api.fitbit.com/1/user/[user-id]/sleep/date/today.json`);

if(res.summary){

let data = res.summary;

let totalSleep = data.stages.rem + data.stages.light + data.stages.deep;

Logger.log(data);

//日付, 睡眠時間, 目覚めた状態, レム睡眠, 浅い眠り, 深い眠り

writeSheet([res.sleep[0].dateOfSleep, `0:${totalSleep}`, `0:${data.stages.wake}`, `0:${data.stages.rem}`, `0:${data.stages.light}`, `0:${data.stages.deep}`], '睡眠');

}

0:${分}でデータを送るように改修しています。

スプレッドシート側の自動変換が賢く、例えば100分は「0:100」という入力で「1:40」に変換されます。

また、睡眠時間は、レム睡眠＋浅い眠り＋深い眠りの時間が正確なため、修正しています。

睡眠記録は効果的？

今回は検証も兼ね、今年初めて8時間以上寝ました。

8時間寝ると、やはり仕事の作業効率も上がるような気がします。

睡眠データを記録すると、睡眠を客観的に観察できるメリットを感じます。

Fitbitデフォルトの睡眠目標は8時間ですが、毎日継続はちょっと厳しいかもしれません。

7時間くらいをできれば継続して、体調への変化を確認します。

2021年2月17日2021年2月16日

Fitbitの活動データを自動でスプレッドシートに記録

FitbitのAPIで取得したデータを、GAS（Google Apps Script）を用いてスプレッドシートに自動で書き込みます。今回は歩数や消費カロリーなどの活動データの記録です。

GASのコード

スプレッドシートの用意までは、前回の体重データの書き込みと同じです。

スプレッドシートのシート名は「運動」としておきます。

GASのコードは下記を使います。（前回より汎用的にコードを修正しました）

function getActivities(){
  // 昨日のデータ取得
  let date = new Date();
  date.setDate(date.getDate() - 1);
  let yesterday = Utilities.formatDate(date, 'JST', 'yyyy-MM-dd');
  let res = getFitbitAPI(`https://api.fitbit.com/1/user/[user-id]/activities/date/${yesterday}.json`);
  if(res.summary){
    let data = res.summary;
    Logger.log(data);
    //日付, 歩数, 距離, 消費カロリー, アクティブな時間
    writeSheet([yesterday, data.steps, data.distances[0].distance, data.caloriesOut, data.fairlyActiveMinutes + data.veryActiveMinutes], '運動');
  }
}

function getFitbitAPI(url) {
  var FITBIT_TOKEN = [token];

  var options = {
    'method': 'get',
    'headers': {
      'Authorization': 'Bearer ' + FITBIT_TOKEN
    }
  };
  
  return JSON.parse(UrlFetchApp.fetch(url, options));
}

function writeSheet(list, name) {
  let ss = SpreadsheetApp.getActive(),
      sheet = ss.getSheetByName(name);
  sheet.appendRow(list);
}

function getActivities(){

// 昨日のデータ取得

let date = new Date();

date.setDate(date.getDate() - 1);

let yesterday = Utilities.formatDate(date, 'JST', 'yyyy-MM-dd');

let res = getFitbitAPI(`https://api.fitbit.com/1/user/[user-id]/activities/date/${yesterday}.json`);

if(res.summary){

let data = res.summary;

Logger.log(data);

//日付, 歩数, 距離, 消費カロリー, アクティブな時間

writeSheet([yesterday, data.steps, data.distances[0].distance, data.caloriesOut, data.fairlyActiveMinutes + data.veryActiveMinutes], '運動');

}

function getFitbitAPI(url) {

var FITBIT_TOKEN = [token];

var options = {

'method': 'get',

'headers': {

'Authorization': 'Bearer ' + FITBIT_TOKEN

}

};

return JSON.parse(UrlFetchApp.fetch(url, options));

}

function writeSheet(list, name) {

let ss = SpreadsheetApp.getActive(),

sheet = ss.getSheetByName(name);

sheet.appendRow(list);

}

getActivities()をタイマーで実行することで、自動的に記録が始まります。

活動データの記録タイミングは？

1日の活動データの記録が終わるのはデフォルトで深夜0時です。

そのため翌日に記録することになります。

注意しないといけないのは、Fitbitアプリとの同期です。

Fitbitアプリに活動データが同期されていないと、APIから最新データを取得できません。

私の場合は、朝起きてから睡眠時間の確認でFitbitアプリを立ち上げるため、朝一で前日までの活動データが同期されます。

午前中の遅めにGASのタイマーを設定しておけば、正常に活動データを書き込むことができます。

スプレッドシートの記録確認

タイマーでGASが正常に作動していれば、自動でスプレッドシートに書き込まれていきます。

日付、歩数、距離、消費カロリー、アクティブな時間が記録されています。

並べてデータを見ることで、新たな気づきがありました。

11,253歩、歩いた日より、7,016歩で縄跳びを途中やった日の方が、消費カロリーが高いです。

歩数や時間では分からない運動の質も、消費カロリーで把握できるようです。

以上、スプレッドシートに自動で活動データを記録する方法でした。

日々記録することで、運動の習慣化にもつながると思います。

2021年2月16日2021年2月14日

Fitbitのスプレッドシート記録をGASで自動化

FitbitのAPIで取得したデータを、GAS（Google Apps Script）を用いてスプレッドシートに書き込みます。毎日タイマーを使って、記録を自動的に行えます。

FitbitのAPIを利用できるように

まずはFitbitのデータを持ってこれるように、APIを利用可能な状態にします。

「FitbitのAPIを手っ取り早く試してみる方法」が参考になります。

スプレッドシートとGAS

FitbitのAPIを使えるようになったら、新規のスプレッドシートを作ります。

メニューの「ツール」から「スクリプトエディタ」を選択。

GASのエディタが現れたら、下記のコードを記述します。これは体重を取得してスプレッドシートに書き込むサンプルです。

function getFitbitAPI() {
  var FITBIT_TOKEN = [token];

  var options = {
    'method': 'get',
    'headers': {
      'Authorization': 'Bearer ' + FITBIT_TOKEN
    }
  };
  
  var res = UrlFetchApp.fetch('https://api.fitbit.com/1/user/[user-id]/body/log/weight/date/today.json', options);
  res = JSON.parse(res);
  if(res.weight.length){
    let data = res.weight.slice(-1)[0];//最新のデータ
    if(!data.fat){
      data = res.weight.slice(-2)[0];//体脂肪率がなければ1つ前のデータ
    }
    Logger.log(data);
    writeSheet([data.date + " " + data.time, data.weight, data.fat.toFixed(1), data.bmi]);
  }
}

function writeSheet(list) {
  let ss = SpreadsheetApp.getActive(),
      sheet = ss.getActiveSheet();
  sheet.appendRow(list);
}

function getFitbitAPI() {

var FITBIT_TOKEN = [token];

var options = {

'method': 'get',

'headers': {

'Authorization': 'Bearer ' + FITBIT_TOKEN

}

};

var res = UrlFetchApp.fetch('https://api.fitbit.com/1/user/[user-id]/body/log/weight/date/today.json', options);

res = JSON.parse(res);

if(res.weight.length){

let data = res.weight.slice(-1)[0];//最新のデータ

if(!data.fat){

data = res.weight.slice(-2)[0];//体脂肪率がなければ1つ前のデータ

}

Logger.log(data);

writeSheet([data.date + " " + data.time, data.weight, data.fat.toFixed(1), data.bmi]);

}

function writeSheet(list) {

let ss = SpreadsheetApp.getActive(),

sheet = ss.getActiveSheet();

sheet.appendRow(list);

}

[token]と[user-id]は自分のID（英数字の羅列）を入れます。

これを実行して、スプレッドシートに体重データが書き込まれれば成功です。

グラフを作っておくと、より変化が分かりやすくなるでしょう。

1日1回タイマーで記録

体重の場合は、1日1回測れば十分です。記録も1日1回タイマーで行います。

スクリプトエディタの左メニューから「トリガー」を選択。

右下の「トリガー追加」を選び、セレクトボックスを下記のように設定します。

実行する関数を選択・・・getFitbitAPI
イベントのソースを選択・・・時間主導型
時間ベースのトリガーのタイプを選択・・・日付ベースのタイマー
時刻を選択・・・（好きな時間帯）

体重のように時間帯で変わってしまうものは、午後12時～1時をトリガーにして、午前のデータのみ記録するのも良いでしょう。体重推移が正確に分かります。

2021年2月15日2021年2月13日

Fitbit APIでスプレッドシートに体重を記録（Node.js利用）

Withingsの体重計のデータを、FitbitのAPIから取得することができました。今回は、取得した体重データをスプレッドシートに記録します。

デバイスと環境

体重計・・・Withings「Body +」
活動量計・・・Fitbit「Alta HR」

Windows10
Node.js 14.15.4

スプレッドシートをサーバー化

まずは記録用のスプレッドシートを簡易サーバーとして設定ます。

「Google Spreadsheet を簡易 Webサーバーとして動かして、手軽にWebHookを受け取る方法」を参考にしながら、下記のコードを用意しました。

function doPost(e) {
  let ss = SpreadsheetApp.getActive(),
      sheet = ss.getActiveSheet(),
      data = [],
      contents = e.postData.contents.split("&");
  for(let i=0;contents[i];i++) {
    let kv = contents[i].split('=');
    data[i]=kv[1];
  }
  sheet.appendRow(data);
}

function doPost(e) {

let ss = SpreadsheetApp.getActive(),

sheet = ss.getActiveSheet(),

data = [],

contents = e.postData.contents.split("&");

for(let i=0;contents[i];i++) {

let kv = contents[i].split('=');

data[i]=kv[1];

}

sheet.appendRow(data);

}

デプロイ時にWebアプリケーションURLが発行されます。

Node.jsでFitbitのAPIを取得

Fitbitの体重データAPIの取得は、Node.jsを利用しました。

Fitbitのトークンと、先ほどスプレッドシートで発行したWebアプリケーションURLを使って、下記のJavaScriptを用意します。

const axios = require('axios');
const FITBIT_TOKEN = "[Fitbitのトークン]";
const GAS_URL = "[スプレッドシートWebアプリケーションURL]";

const getFitbit = (url) => {
  let config = {
    baseURL: 'https://api.fitbit.com/1',
    url: `/user/[user-id]/${url}`,
    method: 'get',
    headers: {'Authorization': `Bearer ${FITBIT_TOKEN}`}
  };
  axios.request(config).then((res) => {
    let data = res.data.weight.slice(-1)[0];//最新のデータ
    if(!data.fat){
      data = res.data.weight.slice(-2)[0];//体脂肪率がなければ1つ前のデータ
    }
    postData(GAS_URL, `dt=${data.date} ${data.time}&weight=${data.weight}&fat=${data.fat.toFixed(1)}&bmi=${data.bmi}`);
  });
};

const postData = (url, data) => {
  axios.post(url, data)
  .then(function (response) {
    console.log("書き込み完了");
  })
};

getFitbit("body/log/weight/date/today.json");

const axios = require('axios');

const FITBIT_TOKEN = "[Fitbitのトークン]";

const GAS_URL = "[スプレッドシートWebアプリケーションURL]";

const getFitbit = (url) => {

let config = {

baseURL: 'https://api.fitbit.com/1',

url: `/user/[user-id]/${url}`,

method: 'get',

headers: {'Authorization': `Bearer ${FITBIT_TOKEN}`}

};

axios.request(config).then((res) => {

let data = res.data.weight.slice(-1)[0];//最新のデータ

if(!data.fat){

data = res.data.weight.slice(-2)[0];//体脂肪率がなければ1つ前のデータ

}

postData(GAS_URL, `dt=${data.date} ${data.time}&weight=${data.weight}&fat=${data.fat.toFixed(1)}&bmi=${data.bmi}`);

});

};

const postData = (url, data) => {

axios.post(url, data)

.then(function (response) {

console.log("書き込み完了");

})

};

getFitbit("body/log/weight/date/today.json");

これをapp.jsなどの名前で保存して、コマンドプロントで「node app.js」を実行すれば、スプレッドシートに体重・体脂肪などが記入されていきます。

体重データ取得の注意

Fitbitの体重取得APIで、不思議な結果が返ってくることがあります。

なぜか今日23時59分59秒の体重が返ってきます。まだ朝です。

取得しているデータをNode.jsのログで見てみます。

23時59分59秒に、fat（体脂肪率）がないデータが存在します。fatが記録できないのも問題なので、このデータは除外しましょう。前述のコードでは、fatがない時に1つ前のデータを取得するようにしています。

なぜこのデータが存在するのかは分かっていません。

スプレッドシートの確認

問題なく動作していれば、スプレッドシートに今日の体重が追記されます。

今回作ったNode.jsアプリを1日1回、体重を測った後に実行させると、体重推移を確認できます。

日付と体重の列を指定してグラフを作成すれば、データと連動してグラフも更新されていきます。

2021年2月14日2021年2月13日

Withingsで測った体重をFitbit API経由で取得

WithingsのAPIが一時的に使えません。代案として、WithingsとFitbitを同期させ、FitbitのAPIから体重を取得することにしました。

デバイス

体重計・・・Withings「Body +」
活動量計・・・Fitbit「Alta HR」

※クラウドにデータを保存できれば、別のデバイスでも問題ないと思います。

WithingsのデータをFitbitに同期させる

下記URLで設定すれば、WithingsのデータをFitbitに同期させられます。

https://www.fitbit.com/weight/withings

もし、Withings、Fitbitのアカウントがない場合は作る必要があります。

体重データがFitbitのアプリでも確認できるようになったら、同期はうまくいっています。

FitbitのAPIを利用可能にする

Fitbitで体重データを見られるようになったら、FitbitのAPIを使えるように設定します。

「FitbitのAPIを手っ取り早く試してみる方法」で、分かりやすく解説されています。

APIの取得が可能になったら、Fitbit公式ドキュメントの「Body & Weight」で体重を取得する書き方を確認します。

過去30日間の体重データを取得する

コマンドプロント（ターミナル）で下記のコマンドを実行してみます。※[token]、[user-id]、[yyyy-mm-dd]は書き換えてください。

curl -i -H "Authorization: Bearer [token]" https://api.fitbit.com/1/user/[user-id]/body/log/weight/date/[yyyy-mm-dd]/30d.json

1	curl -i -H "Authorization: Bearer [token]" https://api.fitbit.com/1/user/[user-id]/body/log/weight/date/[yyyy-mm-dd]/30d.json

すると最大30日分（存在していれば）の体重データを取得できます。

今朝は測った体重（”weight”:72.8）が、JSONで返ってきました。

Withingsアプリのオリジナルデータと、APIで取得したデータを比べると、正しく取得できていることを確認できます。

体重以外にも、体脂肪やBMI、計測時刻も取得できていました。

動作確認としてはOKです。

次回、スプレッドシートへの記録を行います。

2021年2月13日2021年2月14日

サーバーダウン中？WithingsのAPI

体重管理を始めようと思い、Withingsの「Body+」というネットに接続可能な体重計を使うことにしました。しかし現在、WithingsのAPIが使えない状態のようです。

※追記　2021年2月13日復旧していることを確認しました。

サーバーエラー

WithingsのData APIの使い方を見ると、まずWithings APIに登録が必要とのことです。

しかし、掲載されているリンク先へ移動すると、「Service Unavailable」と表示されてしまいます。

サーバーにエラーが起こっているようで、数分後にもう一度試すよう、促されます。

数分後に試したものの、表示は変わらず、結局翌日確認してもサーバーエラーは改善されていませんでした。

IFTTTでも連携不可

IFTTTを使うと連携できるかも試しましたが、やはりIFTTTとWithingsの接続でエラーがでます。

他、調べてみると、WithingsとFitbitの接続はうまくいくことに気づきました。

こうなったら一度Fitbitに体重データを同期して、FitbitのAPIを利用することにします。

2021年2月12日2021年2月10日

ガスト注文タブレットのUIが優れている

妻が初めて見るガストのタブレット端末で、スムーズに注文をしていました。画面設計を見ると、UIデザインが非常に作り込まれています。これは使いやすいです。

基本的に色を多用しない

ガストに注文用タブレットが導入されていました。画面を見ると、配色がとても落ち着いています。

この配色はマクドナルドのWebやアプリでも見られました。

どうしても飲食店だと、食欲を増進させるような鮮やかな配色を使いたくなるかもしれません。特にガストなら、ロゴカラーの赤を使いたくもなるでしょう。

しかし、ガストのタブレットUIには、ほぼ無彩色が用いられています。

下手な色の組み合わせで可読性を落とすこともなく、文字と背景のコントラスト比が一定なので、読んだり操作したりするのが楽になります。

そして何より、画面全体に無彩色を使うことで、重要な情報を引き立てることができます。

注文がAmazonに見えるのが良い

重要なボタンには色が付いています。注文確定へすすむボタンが、黄色ボタンでショッピングカートのアイコン付き。

もはやAmazonです。

ガストにショッピングカートはないだろ！という現実は重要でなく、アプリやWeb利用者の慣例が重要になります。

注文ならショッピングカート。

認知できるかどうかは、見慣れているかと関係し、利用者が多いAmazonの注文ボタンに近づけるのは、UIデザインのセオリーです。

ユーザーが知っているボタンなら、理解するストレスが少なくて済みます。

待機中に出る広告が良い

UIデザインはシンプルですが、タブレット待機中に表示される広告は、鮮やかでおいしく見えるようにデザインされています。

使うデザインと目にとめるデザインは根本的に違い、ガストのタブレットは、待機中と操作中でデザインを使い分けています。

機械音痴でも完遂できる！

見れば見るほど、ガストのタブレットUIの作り込みに驚かされます。

機械音痴の妻が、タブレットでスムーズに注文を進めていきます。

すき家の注文画面では操作を断念した妻が、初見で注文を完遂しました。

間違いなくガストのタブレットのUIは優れています。

2021年2月11日2021年2月9日

ページングナビゲーションの「前へ」「次へ」は未来・過去どっち？

Web制作でページの下部に、「＜前へ」「次へ＞」といった、ページングナビゲーションを設置することがあります。多くの場合、古いページが「次」となります。

古いのに次？新しいのに前？

日常生活の感覚では、古い情報を「次」と言い、新しい情報を「前」と言うのは違和感があります。

しかし、Webサイトで時系列で並ぶコンテンツは、多くの場合、日付が降順に並んでいます。

代表的なものがブログで、新しい記事から古い記事の順番で並んでいます。「次へ」で進んでいくと、時間がさかのぼっていきます。

Web制作の現場でも意見が分かれていた

ページングナビゲーションについて、参考情報を探ります。

WebNAUT

ブログページの「前へ」「次へ」はどっちが新しい？あいまいワーディングの罠

ページングナビゲーションの文言や配置は、Web制作メンバーにアンケートを取っても、想像以上に意見が分かれることに驚きました。確かにワーディングは重要です。

時間に密接なコンテンツか？

User Experience（Stack Exchange）

Which direction indicates newer/older?

海外でもナビゲーションの新しい、古い問題が議論されています。

慣例では、「次」は「古い」と同等という回答が見られます。

また、そのサイトが時間に密接なコンテンツかどうかが判断基準になるという意見もあります。

時間に密接なコンテンツはなかなか思い当たりませんが、例えば天気サイトでしょうか。

天気サイトにおいて「次」は、1時間後や明日といった未来の意味になることが適切でしょう。

ブログの場合は、ユーザーにとって時間と密接なコンテンツとは言えない場合がほとんどで、慣例として「次」は過去の意味で良いと考えます。

「前のページ」と「次のページ」の方が適切

WebNAUTやUser Experienceの意見を参考にして考えると、ナビゲーションは例外（時間密接サイト）を除き、「前のページ」「次のページ」と記述するのが適切だと思います。

ほぼ無意識レベルの話ですが、「次へ」だけだと、人によっては時系列を意識することがあります。「ページ」を付けることで本をめくるような意識になり、時間が意識から離れます。

時間の意識を切り離すことができれば、「次」が古くても違和感はありません。

ちなみに、大手アメーバブログのナビゲーションが「前ページ」「次ページ」となっています。

日本語表現としては「前ページ」より「前のページ」の方が厳格かもしれませんが、１文字でも少ない方が認識にかかる時間が減ります。

日本語に厳しくないサイトでは「前ページ」「次ページ」で良いでしょう。

記事タイトルを入れた方がもっと適切

実装工数やCMSの有無にもよりますが、もし可能なら「次のページ」「前のページ」ではなく、次のページのタイトルと、前のページのタイトルを、ナビゲーションに入れたほうが良いでしょう。

次も前も、ユーザーにとって何か分からないため、具体的な情報の方が判断できます。

Fitbit Alta HRバンドは消耗品？

歩数や睡眠の記録のため「Fitbit Alta HR」を手に付けっぱなしで生活しています。5か月前買った交換バンドが早速切れました。このバンドは消耗品と考えたほうがよさそうです。

ランニングコスト100円/月

Amazonで500円の「Fitbit Alta HR交換バンド」を再購入しました。写真左は5か月使ったもの。右は同じ商品の新品です。

ベルトの穴の横に亀裂が入り、Fitbitを落としてしまう前に交換します。

500円で5か月もったので、ランニングコストは100円/月となります。

Fitbitは運動や睡眠の記録を有効に使えているので、ランニングコスト100円なら高く感じません。純正品のベルトも切れるし、また同じベルトを再購入しました。

ベルトは消耗品です。

Fitbitの新商品買い替えは保留

Alta HRの後継機（？）に、Inspire HR、Inspire 2があります。ベルトが切れたタイミングで、買い替えも考えましたが保留します。

Alta HRで十分満足しており、今のところ買い替えるほどの魅力的な追加機能がありません。

バッテリーについても、Alta HRはたまに充電するくらいの感覚で、良くもちます。仕様上は7日もつようです。

もうすぐ2年になりますが、バッテリーの劣化も気になりません。

しばらくベルト交換での運用となりそうです。

2021年2月9日2021年2月7日

サーモグラフィーとカメラ映像を重ねる

前回、サーモグラフィー「AMG8833」とWebカメラ「OV5640」モジュールを合体させ、サーマルカメラを作りました。今回は検温に使ったコードを記載します。サーモグラフィーとカメラ映像を重ねています。

先に動作サンプル

カメラに顔を合わせると、体温が表示されます。

距離によって温度が変わるため、近づきすぎると「はなれて！」と警告がでます。

開発環境

ハード

Raspberry Pi 3 model B+
スイッチサイエンス「AMG8833」モジュール
Webカメラ「OV5640」モジュール

ソフト

OS：raspbian 10.7
Python 3.7.3
Node.js 10.21.0
Chromium 86

検温のコード

サーマルカメラで取得した温度をHTMLに読み込むまではこちらを参照。

ブラウザに表示するHTML（CSS、JavaScript）だけが、下記に変わっています。

サーモグラフィーの画像とカメラ映像をmix-blend-mode: screen;で重ねて、分かりやすく表示しています。

<html>
<head>
  <title>サーマルカメラ</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.js"></script>
  <style>
    body {
      background-color: #000;
    }
    body.alert {
      background-color: #900;
    }
    #temp {
      position: absolute;
      top: 300px;
      left: 0;
      right: 0;
      margin: auto;
      font-size: 72px;
      color: #EEE;
      text-align: center;
      line-height: 1;
    }
    #thermalArea {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #thermalArea div {
      position: relative;
      width: 240px;
      height: 240px;
      overflow: hidden;
    }
    #thermalArea img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.8;
    }
    #canvas {
      position: relative;
      transform: scale(30);
      transform-origin: top left;
      z-index: -1;
      mix-blend-mode: screen;
    }
    #camera {
      position: absolute;
      top: 0;
      left: -40px;
      z-index: -2;
    }
  </style>
</head>
<body>
<main>
  <button type="button" id="thermalBtn">検温！</button>
  <div id="thermalArea">
    <div>
      <canvas id="canvas" width="8" height="8"></canvas>
      <video id="camera" width="320px"></video>
      <img src="img/silhouette.png" alt="">
    </div>
  </div>
  <div id="temp"></div>
</main>
<script>
  // サーモグラフィー彩度・明度設定
  const maxH = 250;
  const minH = 0;
  const stepH = 7;
  const maxL = 50;
  const minL = 20;
  const stepL = 7;

  // 体温判定
  const minTemp = 36;
  const alertTemp = 37;

  const socket = io();
  const video = document.getElementById('camera');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const $body = $('body');
  const $thermalBtn = $('#thermalBtn');
  const $temp = $('#temp');
  let temp = 0;
  let calibration = 9;
  let isTemp = false;
  let isNear = false;
  let tempList = [];

  const init = () => {
    setSocket();
    setBtn();
  };

  const setSocket = () => {
    let array,
        result = [];
    socket.on('thermal', (data) => {
      drawCanvas(data);
    });
  };

  const setBtn = () => {
    let timer;
    $thermalBtn.on('click', function(){
      const emitThermal = function(){
        socket.emit('msg', 'thermal');
      };
      isTemp = !isTemp;

      if(isTemp){
        setCamera();
        emitThermal();
        timer = setInterval(emitThermal, 250);
        $thermalBtn.text('計測中…');
      }else{
        stopCamera();
        clearInterval(timer);
        $thermalBtn.text('検温！');
      }
      return false;
    });
  };

  const drawCanvas = (data) => {
    let h,
        l,
        t = 0,
        count = 0;
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data[i].length; j++) {
        // 最大温度記録
        if(data[i][j] > t){
          t = data[i][j];
          // 体温ヒット数をカウント
          if(t + calibration > minTemp){
            count++;
            // 2画素越えると近すぎ
            if(count > 2){
              isNear = true;
            }else{
              isNear = false;
            }
          }
        }
        // 色相を設定
        h = maxH - data[i][j] * stepH;
        if(maxH < h){
          h = maxH;
        }else if(minH > h){
          h = minH;
        }
        // 明度を設定
        l = (data[i][j] - minL) * stepL;
        if(maxL < l){
          l = maxL;
        }
        ctx.fillStyle = 'hsl('+ h +', 100%, '+ l +'%)';
        ctx.fillRect(j, i, 1, 1);
      }
    }
    tempList.push(t);
    if(tempList.length > 10){
      tempList.shift();
    }
    // 体温中央値を取得して判定
    temp = getTemp(tempList);
    if(isNear){
      $temp.text('はなれて！');
    }else if(temp < minTemp){
      //$temp.text('');
      $temp.text(temp.toFixed(1) + '℃');// 低い温度でも表示
    }else{
      // 体温なら温度表示して平熱判定
      $temp.text(temp.toFixed(1) + '℃');
      if(temp < alertTemp){
        $body.removeClass('alert');
      }else{
        $body.addClass('alert');
      }
    }
  };

  const getTemp = (tempList) => {
    // 中央値の温度を返す
    let array = tempList.slice(),
        val;
    array.sort((a, b) => {
      return a - b;
    });
    let half = Math.floor(array.length / 2);
    if (array.length % 2) {
      val =  array[half];
    } else {
      val = (array[half - 1] + array[half]) / 2;
    }
    //キャリブレーション
    val += calibration;
    return val;
  };

  const setCamera = () => {
    // カメラ起動
    const constrains = { video: {width: 320, height: 240}, audio: false };
    navigator.mediaDevices.getUserMedia(constrains)
    .then(function(stream) {
      video.srcObject = stream;
      video.play();
    });
  };

  const stopCamera = () => {
    // カメラ停止
    const tracks = video.srcObject.getTracks();
    tracks.forEach(track => {
      track.stop();
    });
    video.srcObject = null;
  };

  init();
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

<html>

<head>

<title>サーマルカメラ</title>

<style>

body {

background-color: #000;

}

body.alert {

background-color: #900;

}

#temp {

position: absolute;

top: 300px;

left: 0;

right: 0;

margin: auto;

font-size: 72px;

color: #EEE;

text-align: center;

line-height: 1;

}

#thermalArea {

display: flex;

justify-content: center;

align-items: center;

}

#thermalArea div {

position: relative;

width: 240px;

height: 240px;

overflow: hidden;

}

#thermalArea img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0.8;

}

#canvas {

position: relative;

transform: scale(30);

transform-origin: top left;

z-index: -1;

mix-blend-mode: screen;

}

#camera {

position: absolute;

top: 0;

left: -40px;

z-index: -2;

}

</style>

</head>

<body>

<main>

<div>

</div>

</main>

// サーモグラフィー彩度・明度設定

const maxH = 250;

const minH = 0;

const stepH = 7;

const maxL = 50;

const minL = 20;

const stepL = 7;

// 体温判定

const minTemp = 36;

const alertTemp = 37;

const socket = io();

const video = document.getElementById('camera');

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const $body = $('body');

const $thermalBtn = $('#thermalBtn');

const $temp = $('#temp');

let temp = 0;

let calibration = 9;

let isTemp = false;

let isNear = false;

let tempList = [];

const init = () => {

setSocket();

setBtn();

};

const setSocket = () => {

let array,

result = [];

socket.on('thermal', (data) => {

drawCanvas(data);

});

};

const setBtn = () => {

let timer;

$thermalBtn.on('click', function(){

const emitThermal = function(){

socket.emit('msg', 'thermal');

};

isTemp = !isTemp;

if(isTemp){

setCamera();

emitThermal();

timer = setInterval(emitThermal, 250);

$thermalBtn.text('計測中…');

}else{

stopCamera();

clearInterval(timer);

$thermalBtn.text('検温！');

}

return false;

});

};

const drawCanvas = (data) => {

let h,

t = 0,

count = 0;

for (let i = 0; i < data.length; i++) {

for (let j = 0; j < data[i].length; j++) {

// 最大温度記録

if(data[i][j] > t){

t = data[i][j];

// 体温ヒット数をカウント

if(t + calibration > minTemp){

count++;

// 2画素越えると近すぎ

if(count > 2){

isNear = true;

}else{

isNear = false;

}

// 色相を設定

h = maxH - data[i][j] * stepH;

if(maxH < h){

h = maxH;

}else if(minH > h){

h = minH;

}

// 明度を設定

l = (data[i][j] - minL) * stepL;

if(maxL < l){

l = maxL;

}

ctx.fillStyle = 'hsl('+ h +', 100%, '+ l +'%)';

ctx.fillRect(j, i, 1, 1);

}

tempList.push(t);

if(tempList.length > 10){

tempList.shift();

}

// 体温中央値を取得して判定

temp = getTemp(tempList);

if(isNear){

$temp.text('はなれて！');

}else if(temp < minTemp){

//$temp.text('');

$temp.text(temp.toFixed(1) + '℃');// 低い温度でも表示

}else{

// 体温なら温度表示して平熱判定

$temp.text(temp.toFixed(1) + '℃');

if(temp < alertTemp){

$body.removeClass('alert');

}else{

$body.addClass('alert');

}

};

const getTemp = (tempList) => {

// 中央値の温度を返す

let array = tempList.slice(),

val;

array.sort((a, b) => {

return a - b;

});

let half = Math.floor(array.length / 2);

if (array.length % 2) {

val = array[half];

} else {

val = (array[half - 1] + array[half]) / 2;

}

//キャリブレーション

val += calibration;

return val;

};

const setCamera = () => {

// カメラ起動

const constrains = { video: {width: 320, height: 240}, audio: false };

navigator.mediaDevices.getUserMedia(constrains)

.then(function(stream) {

video.srcObject = stream;

video.play();

});

};

const stopCamera = () => {

// カメラ停止

const tracks = video.srcObject.getTracks();

tracks.forEach(track => {

track.stop();

});

video.srcObject = null;

};

init();

</script>

</body>

</html>

検温していると±1℃くらいブレるので、キャリブレーションがまだ必要です。

体温で±1℃は、でかすぎます。

カメラに近づくほど温度の精度が高まるので、至近距離で検温するように調整し直した方がよさそうです。

カメラ映像があればJavaScriptでも顔認識はできるので、距離もある程度推定できます。

もう少し調整しましょう。

GASのコード

記録されたスプレッドシート

データを「時：分」で表示

睡眠記録は効果的？

GASのコード

活動データの記録タイミングは？

スプレッドシートの記録確認

FitbitのAPIを利用できるように

スプレッドシートとGAS

1日1回タイマーで記録

デバイスと環境

スプレッドシートをサーバー化

Node.jsでFitbitのAPIを取得

体重データ取得の注意

スプレッドシートの確認

デバイス

WithingsのデータをFitbitに同期させる

FitbitのAPIを利用可能にする

過去30日間の体重データを取得する

サーバーエラー

IFTTTでも連携不可

基本的に色を多用しない

注文がAmazonに見えるのが良い

待機中に出る広告が良い

機械音痴でも完遂できる！

古いのに次？新しいのに前？

Web制作の現場でも意見が分かれていた

WebNAUT

時間に密接なコンテンツか？

User Experience（Stack Exchange）

「前のページ」と「次のページ」の方が適切

記事タイトルを入れた方がもっと適切

関連情報リンクの方が適切なことも

ランニングコスト100円/月

Fitbitの新商品買い替えは保留

先に動作サンプル

開発環境

ハード

ソフト

検温のコード