てまりのユニバーサルデザイン – ページ 53 – ユニバーサル社会で役立つデザインや技術の研究

2020年12月14日2020年12月14日

μPRISMのセンサー値をブラウザ表示

1円より縦横が小さいμPRISM（マイクロプリズム）。７つのセンサーを搭載した超小型IoTモジュールです。obnizと組み合わせて、ブラウザでセンサーの値を表示してみます。

ブラウザでセンサー値を確認

センサーの穴を回して、値の変化を見ます。

センサーの方向を変えてみると、地磁気が大きく変化し、窓の方向を向いたときは照度が高くなっています。

数値が多すぎると分かりにくいため、センサー値は四捨五入して表示してます。

※コードは最後に記述。

計測間隔はアプリで簡単に変更可能

μPRISMの専用アプリの設定を開くと、計測間隔を0.1秒から360秒の間で変更できます。

加速度、地磁気、照度、UVあたりは、計測間隔を短くして使うことがあると思います。

逆に温度、湿度、気圧は、計測間隔を長くして電池持ちを優先したほうが良いかもしれません。

マイコン・センサー構成

μPRISMのセンサー値を、BLEでobnizボードが受信します。

obnizボードもμPRISMも、電源につなぐ以外のことはしません。

受信内容サンプル

ブラウザに表示させたデータの1例です。

加速度	x:-1.05 y:-0.14 z:0.01
地磁気	x:48.9 y:-77.3 z:104.0
温度	21.2℃
湿度	34.0%
照度	3085.6lx
気圧	100756Pa
UV	0.0
日時	20/12/13 12:21:37

分かる範囲ですが、正常に取得できているようです。

μPRISMブラウザ表示コード

obnizパーツライブラリに参考コードがあります。

これを元に、ブラウザ表示用のHTMLを作りました。

obniz.jsは、3.5.0以上でなければエラーが出るのでご注意ください。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.11.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="obniz-debug"></div>
<main>
  <h1>マイクロプリズム</h1>
  <p id="connect">接続中・・・</p>
  <table>
    <tr>
      <th>加速度</th>
      <td id="accel"></td>
    </tr>
    <tr>
      <th>地磁気</th>
      <td id="geo"></td>
    </tr>
    <tr>
      <th>温度</th>
      <td id="temp"></td>
    </tr>
    <tr>
      <th>湿度</th>
      <td id="humid"></td>
    </tr>
    <tr>
      <th>照度</th>
      <td id="light"></td>
    </tr>
    <tr>
      <th>気圧</th>
      <td id="pressure"></td>
    </tr>
    <tr>
      <th>UV</th>
      <td id="uvi"></td>
    </tr>
    <tr>
      <th>日時</th>
      <td id="date"></td>
    </tr>
  </table>
</main>
<script>
var obniz = new Obniz("obniz-ID"),
    $connect = $("#connect");

obniz.onconnect = async () => {
  await obniz.ble.initWait();
  const U_PRISM = Obniz.getPartsClass("uPRISM");
  obniz.ble.scan.onfind = async (peripheral) => {
    if (U_PRISM.isDevice(peripheral)) {
      $connect.text("マイクロプリズム発見！");
      const device = new U_PRISM(peripheral);
      device.ondisconnect = (reason) => {
        console.log(reason)
      }
      await device.connectWait();
      $connect.text("接続完了！");
      device.onNotify = (r) => {
        $("#accel").text("x:" + r.acceleration.x.toFixed(2) + " y:" + r.acceleration.y.toFixed(2) + " z:" + r.acceleration.z.toFixed(2));
        $("#geo").text("x:" + r.geomagnetic.x.toFixed(1) + " y:" + r.geomagnetic.y.toFixed(1) + " z:" + r.geomagnetic.z.toFixed(1));
        $("#temp").text(r.temperature.toFixed(1) + "℃");
        $("#humid").text(r.humidity.toFixed(1) + "%");
        $("#light").text(r.ambient_light.toFixed(1) + "lx");
        $("#pressure").text(r.pressure + "Pa");
        $("#uvi").text(r.uvi.toFixed(1));
        $("#date").text(`${r.time.year}/${r.time.month}/${r.time.day} ${r.time.hour}:${r.time.minute}:${r.time.second}`);
      };
      device.startNotifyWait();
    }
  };
  await obniz.ble.scan.startWait();
}

</script>
</body>
</html>

<html>

<head>

</head>

<body>

<main>

<h1>マイクロプリズム</h1>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</main>

var obniz = new Obniz("obniz-ID"),

$connect = $("#connect");

obniz.onconnect = async () => {

await obniz.ble.initWait();

const U_PRISM = Obniz.getPartsClass("uPRISM");

obniz.ble.scan.onfind = async (peripheral) => {

if (U_PRISM.isDevice(peripheral)) {

$connect.text("マイクロプリズム発見！");

const device = new U_PRISM(peripheral);

device.ondisconnect = (reason) => {

console.log(reason)

}

await device.connectWait();

$connect.text("接続完了！");

device.onNotify = (r) => {

$("#accel").text("x:" + r.acceleration.x.toFixed(2) + " y:" + r.acceleration.y.toFixed(2) + " z:" + r.acceleration.z.toFixed(2));

$("#geo").text("x:" + r.geomagnetic.x.toFixed(1) + " y:" + r.geomagnetic.y.toFixed(1) + " z:" + r.geomagnetic.z.toFixed(1));

$("#temp").text(r.temperature.toFixed(1) + "℃");

$("#humid").text(r.humidity.toFixed(1) + "%");

$("#light").text(r.ambient_light.toFixed(1) + "lx");

$("#pressure").text(r.pressure + "Pa");

$("#uvi").text(r.uvi.toFixed(1));

$("#date").text(`${r.time.year}/${r.time.month}/${r.time.day} ${r.time.hour}:${r.time.minute}:${r.time.second}`);

};

device.startNotifyWait();

}

};

await obniz.ble.scan.startWait();

}

</script>

</body>

</html>

obnizがまさかのμPRISM対応

obnizボードとμPRISMを両方持っている人は少ないと思います。

obnizのパーツライブラリにμPRISMが掲載されたときは、テンションが上がりました。

ウェアラブルの試作で、小ささと省電力が必要で、さらにWebの技術を中心に開発したいときには、この組み合わせが良い選択肢だと思います。

2020年12月13日2020年12月12日

μPRISM（マイクロプリズム）超小型センサー

μPRISMという超小型のIoTモジュールセンサーがあります。小型のプロトタイプ制作で良い選択肢になりそうです。

多機能・超小型センサー

加速度、地磁気、温度、湿度、照度、UV、気圧。７つのセンサーが搭載されており、Bluetooth通信ができ、ボタン電池で動きます。

３つのタイプがあり、玄人向けの基板タイプ。
電源につなぐだけで動く外部電源タイプ。
電池ケース一体型の電池タイプ。

私が持っているのは外部電源タイプです。

電池をつなげば簡単に動作する手軽さと、より小型なものに組み込める汎用性があります。さらに「IPX4」の生活防水。

サイズは、幅：8.0mm、高さ：11.4mm、奥行： 6.6mm。

ケーブルに断線防止カバーがあり、折り曲がらないため、高さは最大20mm程度見たほうが良いかもしれません。

専用のμPRISMアプリ

センサーの値は、専用のアプリをダウンロードすれば、簡単に取得できます。

数値の羅列で分かりにくい時は、グラフにして可視化できます。

専用アプリ以外でも使えそうなので、次回ブラウザで表示を試して見ます。

2020年12月12日

壊れたベッドの修理

2段ベッドが壊れて危険。けがをする前に修理します。ホームセンターの補強金具とネジで、十分修理可能です。

柵が落ちてきそう

2段ベッドの柵が、落ちてきそうです。

ネジがゆるいという問題ではなく、接合部の木ダボの半数が折れている状態でした。

男の子4人が、このベッドで遊んでいます。

柵に乗ったり、ぶら下がったり、負荷がかかりすぎたのでしょう。

補強金具で修理

I字×４、L字×４の補強金具、木ネジをホームセンターで購入。

合計で1,000円くらいです。

I字金具で横から補強します。

ボロボロのベッドなので、見た目は気にしません。

柵の両端の裏は、L字で補強。

L字金具は裏表を確認して購入が必要です。

皿ネジが収まるくぼみがどちら側にあるかで、裏表を判断します。

私は間違えたので、ネジが少し浮きました・・・。

子供が落ちない

補強金具で柵が修理され、頑丈になりました。

これで、柵も子供も、落ちてくることはないでしょう。

電動ドライバーがあれば、そこまで大変な作業ではないため、ベッドが壊れてきたら、早めに補強がお勧めです。

2020年12月11日2020年12月11日

WebIOPiでブラウザからラズパイのLチカ

一世代前のRaspberry Pi 3で、いまさらLチカです。ブラウザからGPIOを操作できる「WebIOPi」というフレームワークがあります。開発が止まっていて、使うかどうかは検討が必要かもしれません。

WebIOPiのサポートはラズパイ３まで？

WebIOPiのページを見ると、ラズパイ２と３しか対応していないようです。

2015年から開発が止まっています。（2020年12月現在）

ラズパイ３しか持っていない私には特に問題ないですが、このフレームワークありきの知識は、今後使えなくなる懸念があります。

ブラウザのボタンでLEDがチカチカ

とりあえずダウンロードして試して見ます。

サンプルで簡単に、Lチカができました。

ブラウザでHTMLやJavaScriptを使えると、Webのフロントエンジニアやデザイナーは、開発難易度を下げられます。

簡単な試作には、良いと思います。

2020年12月10日2020年12月10日

ラズパイ３ IP固定でWi-Fi接続可能

Raspberry Pi 3を放置して3年。Wi-Fiにうまく接続できずに挫折し、長い間封印していました。そして最近、再挑戦してようやくWi-Fiに接続できるようになりました。

Wi-Fiがつながらない！？

なぜか私のラズパイは、Wi-Fiにつながりません。

OSを何度も再インストールしたり、いくつか設定ファイルを書き換えたりしたのですが、Wi-Fiにつなぐことができず、一度諦めました。

しかし最近、ラズパイを使いたい気持ちが強くなり、再チャレンジすることにしました。

3年前より、知識は増えています。

固定IPでWi-Fi接続可能

Wi-Fiがつながらない原因は、IPのバッティングが怪しかったので、固定IPを割り当てることにしました。

IPの固定は、hiramine.com様の情報を参考にしています。

やはりIPが原因だったようで、以後問題なくWi-Fi接続が可能になりました。

IP固定ついでにリモートデスクトップ

ラズパイに必要な周辺機器・・・ディスプレイ、キーボード、マウスをつなぐのは、ひと手間かかります。

せっかくIPを固定したので、リモートデスクトップを導入しましょう。

IPが固定されていれば、簡単にVNCViewerでラズパイに接続して操作できました。

ラズパイにディスプレイ、キーボード、マウスの接続が不要です。

しかも慣れたPC環境で作業できるため、作業効率が高いです。

久しぶりのラズパイ。まずはLチカから復習です。

2020年12月9日

ケースとフィンガーホルダーでもQi充電可

iPhoneにケースとフィンガーホルダーを装着しても、Qi充電ができました。組み合わせにもよりますが、意外と隙間があっても充電できるようです。

フィンガーホルダーを付けたい

6.1インチサイズのiPhone（12 Pro）を使うようになり1か月以上たちました。

片手持ちの私には、この大きさはストレスになっていました。

指が届かない・・・。

そこで、フィンガーホルダーをケースの後ろに取り付け、浅く持つことで、指の届く範囲を広げることにしました。

フィンガーホルダーは３つセットで660円。Amazonで購入。

iPhoneの端につけました。

Qi充電もできる

ひとつ不安がありました。Qi充電できるのか？

ケースとフィンガーホルダーの厚みで、Qi充電機とiPhoneに隙間ができます。

試して見ると、問題なく充電できました。

少し充電位置がシビアになった気がしますが許容範囲です。

なお、使っているQi充電機はこちらです。

スマホケースの厚みと、Qi充電機の有効距離が影響するのでご注意ください。

2020年12月8日

プールにコワーキングスペース

子供通うプール教室のロビーに、コワーキングスペースがあります。待ち時間に仕事ができて非常に助かります。

送り迎えで週末が終わる

子供４人、プールに通っています。

クラス分けされており、子供たちの泳ぐ時間帯が違うため、車で送り迎えを何往復もしていました。

プールにコワーキングスペース

子供たちの通うプール教室がリニューアルして、コワーキングスペースができました。

AC電源も、USB電源も完備。長時間ノートPCで仕事ができます。

一度車で帰らず、プールが終わるまで仕事をして待っていられます。

すばらしい環境です！

いや、休日の隙間時間にさえ仕事ができる環境が用意されていることに、若干の違和感もありますが・・・。

2020年12月7日

白文字・黒背景に見るやさしさ

Windowsのコマンドプロントの黒い画面。よく見ると真っ黒ではなく、黒に近いグレー。文字の色も真っ白ではなく、白に近いグレーです。コントラスト比を抑えており、目にやさしいです。

コマンドプロントの配色

Windowsのコマンドプロンプトの文字色、背景色のカラーコードを見てみます。

文字色・・・#CCCCCC
背景色・・・#0C0C0C

真っ白（#FFFFFF）と真っ黒（#000000）は使われていません。

コントラスト比が高すぎると、目の疲労が高まるため、明度差を少し小さくしています。

無機質に見えたコマンドプロンプトでしたが、よく見ると配色にやさしさを感じます。

Photoshopの配色

グラフィックソフトPhotoshopのUI配色にもやさしさを感じます。

文字色・・・#F0F0F0
背景色・・・#535353

背景がかなりグレーです。

グラフィックソフトの場合、注視するのはカンバスで、UIが邪魔しないようにコントラスト比を下げています。

また、グラフィックを制作、加工するうえで、明度対比を避けなければなりません。

明度対比は、黒い背景に囲まれた色は明るく、白い背景に囲まれた色は黒く感じる現象です。

仮に、PhotoshopのUIが真っ黒、真っ白だったら・・・

カンバスの明度の印象が変わってしまいます。

そのため、明度対比の小さい、グレーをPhotoshopのUIに用いているのだと考えられます。

ソフトの配色を気にして見てみると、デザイナーの配色の意図に気づけるかもしれません。

2020年12月6日

リスト全体にリンク設定でユーザビリティ向上

Webサイトでリンクのリストをコーディングする際、文字だけではなく、リスト（liタグ）全体にリンクを設定したほうが、操作しやすくなります。

リスト全体がクリック可能

amazonのリストメニューが参考になります。

リストメニューのリンクが、文字だけでなく、メニューの幅いっぱいまでクリックできるようになっています。

文字だけがリンクだと、クリックできる範囲が小さくて、カーソルを合わせるために、少しだけ集中力を消耗します。

細かいところですが、操作ストレスが溜まると、離脱につながります。

aタグにdisplay:block

実装にあたり、必要なCSSは1行。

a {display: block;}

1	a {display: block;}

実際は、aタグすべてがdisplay:blockにならないよう、任意のクラスをあわせて設定します。（.linkList a のように）

導入コストが引くく、コストパフォーマンスの高いユーザビリティ改善のため、忘れずに導入できればと思います。

2020年12月5日2020年12月6日

チェックボックスにlabelを使わず押しやすく

チェックボックスを押しやすくするには、まずlabelタグを使ってクリック（タップ）範囲を広げることが基本です。しかしシステム都合でHTMLを編集できない場合、CSSだけで無理やりクリック範囲を広げる方法もあります。

通常はlabelタグ

HTMLのチェックボックスは、選択肢の文字を並べて使うことが多いと思います。

通常は文字もクリックできるように、labelタグで下記のように包括します。

<label><input type="checkbox">チェックボックス</label>

1	<label><input type="checkbox">チェックボックス</label>

labelタグが使えない場合は

しかし、ごくまれに、システム側でHTMLを書き出していて、CSSしか変更できない状況があります。

チェックボックスがあるのに、ラベルが設定されていない。

そんな時は、CSSだけで文字をクリックできるようにします。

[type=”checkbox”]::after

CSSの::afterを使い、チェックボックスの後に透明の疑似要素を作れば、当たり判定を広げることができます。

サンプルページをアップしました。

書き出されているHTML次第で、CSSの当て方が変わります。

そのため一例となりますが、参考コードを掲載します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>チェックボックスの当たり判定を大きく</title>
    <style>
      ul {
        list-style: none;
      }
      .checkboxList li {
        position: relative;
        width: 10em;
      }
      .checkboxList [type="checkbox"]::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2em;
        cursor: pointer;
      }
      /* 当たり判定確認用 */
      .checkboxList li:last-child [type="checkbox"]::after {
        background-color: rgba(255, 0, 0, 0.5);
      }

    </style>
  </head>
  <body>
    <ul class="checkboxList">
      <li><input type="checkbox" name="b" value="1">チェックボックス</li>
      <li><input type="checkbox" name="b" value="2">チェックボックス</li>
      <li><input type="checkbox" name="b" value="3">チェックボックス</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>チェックボックスの当たり判定を大きく</title>

<style>

ul {

list-style: none;

}

.checkboxList li {

position: relative;

width: 10em;

}

.checkboxList [type="checkbox"]::after {

content: "";

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 2em;

cursor: pointer;

}

/* 当たり判定確認用 */

.checkboxList li:last-child [type="checkbox"]::after {

background-color: rgba(255, 0, 0, 0.5);

}

</style>

</head>

<body>

<li><input type="checkbox" name="b" value="1">チェックボックス</li>

<li><input type="checkbox" name="b" value="2">チェックボックス</li>

<li><input type="checkbox" name="b" value="3">チェックボックス</li>

</ul>

</body>

</html>

苦肉の策です。

labelを設定してもえるよう、促しましょう。