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

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

ロボットアーム操作画面のUI改善（レベル1）

障害者利用想定のIoTロボットアームを開発しています。スマホで遠隔操作可能なロボットアームです。しかし、スマホの操作画面が使いにくかったので、段階的に改修していきます。

てまりを渡すロボットアーム

Obnizを使ったロボットアームです。てまりを手渡ししてくれました。

スマホからインターネットを経由して、ロボットアームを操作。zoomと併用して、遠隔地で操作することもできます。

操作画面の改修

前回とりあえず作った操作画面は、４つのスライダーがあり、どこをどう操作すればよいか、直感的ではありません。

UI改善のため、スライダーを２つ減らしました。

入力項目は少ないほど、迷わず使えます。

手首関節の操作を減らす

どんな作業をするかにもよりますが、てまりを掴む作業であれば、ロボットアームの手首関節は、ほぼ使いません。

おそらく手首関節は、傾けてはいけないものを持つとき、常に水平を保つ役割で使います。

アームを上げたとき、手首を直角にして水平を保ち・・・

アームを下げたときは手首を水平にします。写真だと調整できておらず、水平を保っていません。

水の入ったコップを掴むような作業の時は、しっかり調整してください。

アームの上下運動と、手首の上下運動を連動させることで、入力操作は一つ減りました。

掴むのはボタンでいい

掴む動作はスライダーからボタンに変更しました。

繊細な作業を行わない場合、掴む⇔離すを交互に切り替えるボタンにしたほうが簡単です。

改修したコード

操作画面とObniz制御のコードです。

<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.4.0/obniz.js" crossorigin="anonymous"></script>
  <style media="screen">
    table {
      max-width: 600px;
    }
    th {
      width: 20vw;
      padding: 3vh 3vw;
      text-align: center;
    }
    td {
      width: 75vw;
      padding: 3vh 3vw;
    }
    [type="range"] {
      width: 100%;
    }
    button {
      width: 70%;
      padding: 3vh 3vw;
      font-size: 2rem;
    }
  </style>
</head>
<body>

<div id="obniz-debug"></div>
<main>
  <table>
    <tr>
      <th>旋回</th>
      <td><input type="range" id="servo1" value="90" max="180" min="0"></td>
    </tr>
    <tr>
      <th>上下</th>
      <td><input type="range" id="servo2" value="90" max="180" min="90"></td>
    </tr>
    <tr>
      <th></th>
      <td><button id="servo4">掴む</button></td>
    </tr>
  </table>
</main>

<script>
var obniz = new Obniz("obniz_ID"),
    isGrab;

obniz.onconnect = async function () {
  var servo1 = obniz.wired("ServoMotor", {gnd:0,vcc:1,signal:2}),
      servo2 = obniz.wired("ServoMotor", {gnd:3,vcc:4,signal:5}),
      servo3 = obniz.wired("ServoMotor", {gnd:6,vcc:7,signal:8}),
      servo4 = obniz.wired("ServoMotor", {gnd:9,vcc:10,signal:11});

  $("#servo1").change(function() {
    servo1.angle($(this).val());
  });

  $("#servo2").change(function() {
    servo2.angle($(this).val());
    servo3.angle($(this).val() - 120);
  });

  $("#servo4").on('click', function() {
    if(isGrab){
      servo4.angle(30);
    }else{
      servo4.angle(90);
    }
    isGrab = !isGrab;
  });

  var reset = function(){
    isGrab = false;
    servo1.angle(90);
    servo2.angle(90);
    servo3.angle(0);
    servo4.angle(0);
  };
  reset();
}

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

<html>

<head>

table {

max-width: 600px;

}

th {

width: 20vw;

padding: 3vh 3vw;

text-align: center;

}

td {

width: 75vw;

padding: 3vh 3vw;

}

[type="range"] {

width: 100%;

}

button {

width: 70%;

padding: 3vh 3vw;

font-size: 2rem;

}

</style>

</head>

<body>

<main>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</main>

var obniz = new Obniz("obniz_ID"),

isGrab;

obniz.onconnect = async function () {

var servo1 = obniz.wired("ServoMotor", {gnd:0,vcc:1,signal:2}),

servo2 = obniz.wired("ServoMotor", {gnd:3,vcc:4,signal:5}),

servo3 = obniz.wired("ServoMotor", {gnd:6,vcc:7,signal:8}),

servo4 = obniz.wired("ServoMotor", {gnd:9,vcc:10,signal:11});

$("#servo1").change(function() {

servo1.angle($(this).val());

});

$("#servo2").change(function() {

servo2.angle($(this).val());

servo3.angle($(this).val() - 120);

});

$("#servo4").on('click', function() {

if(isGrab){

servo4.angle(30);

}else{

servo4.angle(90);

}

isGrab = !isGrab;

});

var reset = function(){

isGrab = false;

servo1.angle(90);

servo2.angle(90);

servo3.angle(0);

servo4.angle(0);

};

reset();

}

</script>

</body>

</html>

※サーボモーターをどの角度で組み立てたかにより、angleに入れる数字は変わります。

今回のUI改善は、実は最低限使える程度にしか、良くなっていません。

次回、さらにUIを改善して、スライダーもボタンもなくします。

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

IoTロボットアームをスマホで操作する

組み立てたIoTロボットアーム（ネット経由で動くアーム）をスマホで操作できるようにします。操作画面のUIを変えないと、まだ使い勝手が悪いです。

てまりを掴むロボットアーム

操作している様子です。てまりを掴んでみましょう。

アームの旋回、アームの上下、手首の上下、掴む離す、計4か所のサーボモーターをスマホで制御しています。

操作画面のUI（仮）

スマホの操作画面です。ブラウザで動きます。

４つのスライダーで、ロボットアームのサーボモーターを操作します。

ただ、このUIはどう考えても直感的ではないので、後で作りなおします。

ロボットアームの配線

ロボットアームにはObnizを利用しています。

サーボモーターとObnizボードの配線は、下記となります。

servo1（旋回）・・・gnd:0,vcc:1,signal:2
servo2（上下）・・・gnd:3,vcc:4,signal:5
servo3（手首）・・・gnd:6,vcc:7,signal:8
servo4（掴み）・・・gnd:9,vcc:10,signal:11

アーム動作と操作画面のコード

<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.4.0/obniz.js" crossorigin="anonymous"></script>
  <style media="screen">
    table {
      max-width: 600px;
    }
    th {
      width: 20vw;
      padding: 3vh 3vw;
      text-align: center;
    }
    td {
      width: 75vw;
      padding: 3vh 3vw;
    }
    [type="range"] {
      width: 100%;
    }
  </style>
</head>
<body>

<div id="obniz-debug"></div>
<main>
  <table>
    <tr>
      <th>旋回</th>
      <td><input type="range" id="servo1" value="90" max="180" min="0"></td>
    </tr>
    <tr>
      <th>上下</th>
      <td><input type="range" id="servo2" value="90" max="180" min="0"></td>
    </tr>
    <tr>
      <th>手首</th>
      <td><input type="range" id="servo3" value="0" max="180" min="0"></td>
    </tr>
    <tr>
      <th>掴み</th>
      <td><input type="range" id="servo4" value="0" max="180" min="0"></td>
    </tr>
  </table>
</main>

<script>
var obniz = new Obniz("obniz_ID");

obniz.onconnect = async function () {
  var servo1 = obniz.wired("ServoMotor", {gnd:0,vcc:1,signal:2}),
      servo2 = obniz.wired("ServoMotor", {gnd:3,vcc:4,signal:5}),
      servo3 = obniz.wired("ServoMotor", {gnd:6,vcc:7,signal:8}),
      servo4 = obniz.wired("ServoMotor", {gnd:9,vcc:10,signal:11});

  $("#servo1").change(function() {
    servo1.angle($(this).val());
  });

  $("#servo2").change(function() {
    servo2.angle($(this).val());
  });

  $("#servo3").change(function() {
    servo3.angle($(this).val());
  });

  $("#servo4").change(function() {
    servo4.angle($(this).val());
  });
}

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

<html>

<head>

table {

max-width: 600px;

}

th {

width: 20vw;

padding: 3vh 3vw;

text-align: center;

}

td {

width: 75vw;

padding: 3vh 3vw;

}

[type="range"] {

width: 100%;

}

</style>

</head>

<body>

<main>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</main>

var obniz = new Obniz("obniz_ID");

obniz.onconnect = async function () {

var servo1 = obniz.wired("ServoMotor", {gnd:0,vcc:1,signal:2}),

servo2 = obniz.wired("ServoMotor", {gnd:3,vcc:4,signal:5}),

servo3 = obniz.wired("ServoMotor", {gnd:6,vcc:7,signal:8}),

servo4 = obniz.wired("ServoMotor", {gnd:9,vcc:10,signal:11});

$("#servo1").change(function() {

servo1.angle($(this).val());

});

$("#servo2").change(function() {

servo2.angle($(this).val());

});

$("#servo3").change(function() {

servo3.angle($(this).val());

});

$("#servo4").change(function() {

servo4.angle($(this).val());

});

}

</script>

</body>

</html>

zoomと併用で遠隔操作可能

てまりを掴むIoTロボットアームができました。

zoomなどと併用して、離れた場所からアームを動かすこともできます。

次回、操作画面UIを改修します。

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

IoTロボットアームの組み立て

障害者利用想定で、インターネット経由で動かせるロボットアームを作っています。組み立ては長男（小４）にお願いしました。制御するマイコンボードを変えて、インターネットで動くIoTロボットアームとします。

SunFounder ロボットアームキット

あまり評価のよくない「SunFounder ロボットアームキット」という商品をAmazonで購入。

コメントを見ると、Arduinoのセットアップが難しそうですが、私は使わないので大丈夫です。

IoTが簡単に実現できる「obnizボード」に取り換えます。

組み立ては長男の得意分野

ロボットアームを組み立てます。

私は組み立てが苦手です。説明書をよく読まず、パーツを破損してしまいます。

こういった組み立ては、長男が得意なのでお願いしました。

やはり、パーツの歪みがあって組み立てにくいそうです。

それでも手際よく、組み立ててくれます。

インターネットで操作できるボードに

組み立て完了。

付属のArduinoは重りがわりに搭載しています。

Arduinoは使ってなく、インターネットで簡単にアームが操作できるよう、Obnizボードに配線をつなぎ替えました。

引き続き、操作画面設計とプログラミングを行います。

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

4K360度VRでも見えている解像度は低い

高解像度・高品質のディスプレイを持つiPhone12 Pro。このスペックを生かして、VRを体験したくなりました。現実と見間違うような高い没入感を期待しましたが・・・まだ配信側のコンテンツや設備が整っていませんでした。

Super Retina XDR ディスプレイを生かしたい

iPhone12 は「Super Retina XDR ディスプレイ」という、壮大な名前が付いたディスプレイを搭載しています。

このディスプレイの映像表現力を生かしたい。そこで、思いついたのはVR。

VRゴーグルを使って、現実と見間違うほどの没入感を体験したいと思います。

ダイソーで買ったVRゴーグル

ダイソーの500円VRゴーグルを使います。

ここにはお金をかけませんが、きっと大丈夫でしょう。

iPhone12 Proの6.1インチサイズは、ケース付でもダイソーのVRゴーグルに格納できました。

映像解像度が低い？

YouTubeアプリで、てきとうな4KVRを体感してみました。

第一印象、解像度が低い・・・。

4Kの360度映像を閲覧しても、見える部分は1Kもないかもしれません。

360度見えない部分の映像も含め、合計で4Kなので、解像度が低く見えるのも当たり前です。

期待値が高かった分、少し残念。これは現状、仕方ないですね。

今後5G普及で、超高解像度VRが気軽に体験できることを期待します。

2020年11月9日

ガソリンスタンドのユニバーサルデザイン

ガソリンスタンドで軽自動車に軽油を入れる間違いは起こります。そのため、軽油のノズルだけ違う場所にして、「軽自動車への給油は行わないでください」と注意書きがあると、とても親切です。

軽油はディーゼル車専用燃料です

家の車の不調で、代車の軽自動車を借りています。

妻にとっては初めての軽自動車で、危うく軽自動車に軽油を入れそうになりました。

たしかに、紛らわしいですね。

間違って軽自動車に軽油を入れるとエンジンが停止して走らなくなります。

ここのガソリンスタンド分かりやすい！

あるガソリンスタンドに寄ったとき、妻が「分かりやすい！」と絶賛しました。

そこのガソリンスタンドは、軽油ノズルが離れた場所にあり、「＜注意＞軽油はディーゼル車専用燃料です　軽自動車への給油は行わないでください」と書かれていました。

たしかに言われてみれば、普段使うガソリンスタンドは、軽油ノズルも他のノズルも等間隔で置かれていた気がします。

間違いやすい軽油を離して注意を促すのは、軽自動車に乗り慣れない人にやさしい気遣いです。

ユニバーサルデザインだと感じました。

2020年11月8日

防犯カメラの命綱３Dプリント

防犯カメラ「Litmor Battery Cam 2」をベランダから吊るしています。転落の心配があるのでもう一本、転落防止のひもを付けられるようにします。

ひもでぶら下げられる防犯カメラ

Amazonで購入できる「Litmor Battery Cam 2」。

丸い防犯カメラで、ひもで吊るすことができます。

念のため、ひもが切れても大丈夫なように、もう一本命綱をつけることにしました。

カメラネジのストラップ

「Litmor Battery Cam 2」には、カメラ用の1/4ネジを差し込むこともできます。

1/4ネジ付きストラップを購入しても良いですが、今回は手元に1/4ネジと100円ショップのネックストラップがあるので、これらを使います。

ネジとストラップのジョイント

1/4ネジとストラップを接続するジョイントをモデリングします。

断面はこんな感じです。

フィラメントはTPUで3Dプリントします。

3Dプリントしたジョイントにネジをはめます。一度はめるとネジのかさが引っ掛かって、もう指では外れません。

ジョイントに100円ショップで購入したストラップを付けます。

カメラの充電を考えると、脱着が簡単なタイプが良いと思います。

命綱を防犯カメラに装着

防犯カメラの1/4ネジに、作ったジョイントを差し込みます。

しっかりカメラをぶら下げられます。

ひもで吊るした防犯カメラに、命綱が装着されました。

これで転落の心配が、大きく減りました。

2020年11月7日2021年6月8日

メインコンテンツにスキップ　アクセシビリティ

Webサイトをキーボード操作するユーザーのために、ページの先頭には「メインコンテンツにスキップ」のリンクを設けたほうが良いでしょう。

ブロックスキップを理解する

Webコンテンツアクセシビリティガイドライン（WCAG2.1）の達成基準 2.4.1に、「ブロックスキップを理解する」という項目があります。

ページ先頭にメイン記事へスキップするリンクがないと、利用者にとって深刻な肉体的苦痛を引き起こすことがある・・・というようなことが書いてあります。

どういうことか？

報道機関のホームページが実例に挙げられています。実際に海外の報道機関のホームページを見てみましょう。

公共放送のブロックスキップ

イギリス「BBC」

世界的に有名なイギリスの公共放送「BBC」のホームページで、キーボード操作をしてみます。

早速「Skip to content」というスキップするリンクが出現しました。

さすが世界のBBC。

アメリカ「PBS」

続いてアメリカの公共放送「PBS」。こちらもキーボード操作で「Skip to Main Content」の文字が出現。

アクセシビリティが作り込まれています。

スウェーデン「SVT」

福祉大国のイメージが強い北欧スウェーデン。公共放送「SVT」を見てみます。

文字は読めませんが、やはりスキップするリンクが仕込まれていました。

いくつか報道機関のサイトを回ってみると、アクセシビリティを大事している機関が多いことが分かります。

インフラサイトのブロックスキップ

続いて誰もが生活に欠かせなくなっているインフラサイトのブロックスキップを見てみます。

Google

Google先生。キーボード操作で「メインコンテンツにスキップ」が表示されます。

Amazon

Amazon。こちらもキーボード操作で「メインコンテンツにスキップ」が表示されます。

インフラサイトは見えないアクセシビリティ機能も、しっかり作り込んでいます。

ブロックスキップの実装方法

実装コードの一例です。

<body>
  <header>
    <div id="skipNav"><a href="#main">メインコンテンツにスキップ</a></div>
    <h1>ブロックスキップテスト</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <h2>メインコンテンツ</h2>
    <p>本文・・・</p>
  </main>
</body>

<body>

<div id="skipNav"><a href="#main">メインコンテンツにスキップ</a></div>

<h1>ブロックスキップテスト</h1>

<nav>

<ul>

</ul>

</nav>

</header>

<h2>メインコンテンツ</h2>

</main>

</body>

ヘッダーに「メインコンテンツにスキップ」のページ内リンクを設置します。

普段は見えない状態にして、キーボードのフォーカスが当たった時だけ出現するようにCSSで指定します。

#skipNav a {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

#skipNav a:focus,
#skipNav a:active {
  display: block;
  width: 15em;
  height: auto;
  top: 5px;
  left: 5px;
  clip: auto;
  z-index: 1000;
  font-size: 1.8rem;
  padding: 5px;
  background-color: #FFF;
  border: #CCC solid 1px;
  text-align: center;
}

#skipNav a {

position: absolute;

width: 1px;

height: 1px;

clip: rect(1px, 1px, 1px, 1px);

}

#skipNav a:focus,

#skipNav a:active {

display: block;

width: 15em;

height: auto;

top: 5px;

left: 5px;

clip: auto;

z-index: 1000;

font-size: 1.8rem;

padding: 5px;

background-color: #FFF;

border: #CCC solid 1px;

text-align: center;

}

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

参考まで。

2020年11月6日2020年11月6日

aタグの中にaタグ　アクセシビリティ観点で

HTMLのコーディングで、aタグの中にaタグを書くことはできません。どうしてもaタグの中にリンクを書く場合、spanタグで書き、onClickとonKeydownとtabindexを指定します。

検証に使ったテストページはこちら

aタグの中にaタグは書けない

aタグはHTML5の仕様上、aタグなどの対話型コンテンツを内包できません。

例えば図１のカードのようなUIで、カード自体がリンクになっているのに、さらにリンクを内包させる場合、問題になります。

実際にaタグの中に、aを書いてみましょう。

<a href="https://example.com/">
  <h3>タイトル</h3>
  <p>概要文・・・<a href="https://example.net/">リンク</a></p>
</a>

</a>

結果は図２のように、表示崩れを起こします。

aタグの中にonClick

aタグの中にaタグが使えないなら、spanタグに変えてしまい、その上でJavaScriptのonClickイベントを指定してみます。

<a href="https://example.com/">
  <h3>タイトル</h3>
  <p>概要文・・・<span class="link" onclick='location.href="https://example.net/"; return false;'>リンク</span></p>
</a>

</a>

HTMLの構造的には問題ないため、図３のように望む形で表示されます。

しかし、この組み方だとアクセシビリティで問題があります。

キーボード操作でaタグの中のリンクにフォーカスを当てることができません。

キーボードしか操作できないユーザーが、リンク先にアクセスできなくなってしまいます。

aタグの中にonClickとonKeydownとtabindex

アクセシビリティ確保のため、onKeydownとtabindexを記述します。

コード量が増えてしまいました。

<a href="https://example.com/">
  <h3>タイトル</h3>
  <p>概要文・・・<span class="link" id="js-link" tabindex="0">リンク</span>
    <script>
      var linkElement = document.getElementById("js-link"),
          linkUrl = "https://example.net/";
      linkElement.onclick = function(){
        location.href = linkUrl;
        return false;
      };
      linkElement.onkeydown = function(e){
        if (e.keyCode === 13) {
          location.href = linkUrl;
        }
      };
    </script>
  </p>
</a>