Koda – てまりのユニバーサルデザイン

2024年3月31日

localStorageでウインドウ間のデータ送受信

以前、WebSocket（Socket.io）やAjaxのポーリングを使い、別の出力画面を操作するWebアプリを作っていました。しかし、条件次第では、ローカルストレージを使うのが一番簡単そうです。

WebSocketの遅延に困った

ブラウザの送信画面から、他のブラウザの受信画面にデータを送る方法で、WebSocketがあります。チャットでよく使われる技術です。

ただ、たまに遅延がひどくて困ります。結局、安定して運用できる、ポーリングを採用することがありました。サーバーに一定間隔でデータを取りに行く、昔ながらの方法です。

ブラウザのウインドウ間で完結

作るWebアプリによっては、WebSocketもポーリングも必要ないことがあります。

送信画面と受信画面を同じPCで立ち上げ、ディスプレイを２つ繋ぎ、それぞれを表示する場合です。

この場合は、データを送受信するためのサーバーは必要ありません。ブラウザのウインドウ間で、データをやり取りできればOKです。

localStorageを使う

使う技術は、localStorageです。

localStorageの変更を感知して、イベントを発火させることで、ブラウザの別ウインドウ間で、データを送受信できます。

サンプルとして、ブラウザからタイマーを送信（保存）して、ほかのウインドウで表示するものを作りました。

PCに負荷をかけまくると遅延しますが、ほぼリアルタイムで反応します。

送信側のHTML・JavaScript

1秒ごとに、localStorageにタイマーの数字を保存しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Send localStorage</title>
</head>
<body>
<p>送信</p>
<p id="timer"></p>
<script>
const $timer = document.getElementById('timer');
let n = 0

setInterval(()=>{
  n++;
  localStorage.setItem('timer', n);
  $timer.innerText = n;
}, 1000);
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Send localStorage</title>

</head>

<body>

const $timer = document.getElementById('timer');

let n = 0

setInterval(()=>{

n++;

localStorage.setItem('timer', n);

$timer.innerText = n;

}, 1000);

</script>

</body>

</html>

受信側のHTML・JavaScript

localStorageの変更を感知した時、タイマーの数字を表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Receive localStorage</title>
</head>
<body>
<p>受信</p>
<p id="timer"></p>
<script>
const $timer = document.getElementById('timer');

window.addEventListener('storage', (e)=>{
  if(e.key === 'timer') {
    $timer.innerText = e.newValue;
  }
});
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Receive localStorage</title>

</head>

<body>

const $timer = document.getElementById('timer');

window.addEventListener('storage', (e)=>{

if(e.key === 'timer') {

$timer.innerText = e.newValue;

}

});

</script>

</body>

</html>

localStorageは手軽

今回のような技術を使う場面は限られていると思います。

例えば、タイマーアプリで操作画面をノートパソコンに表示して、接続したディスプレーにタイマーを映し、会場に見せるような場合でしょうか。

使用する機会は少ないですが、手軽に作れるので、ちょっとしたイベントで利用するのは良いかもしれません。

2023年7月22日

ブラスチューブでボッチャボールの中身を抜く

硬いレク用ボッチャボールを柔らかくしたいとき、飲用のプラスチックストローより、金属の筒（ブラスチューブ）を挿した方が、効率よく中身を抜けました。※レク用ボール向けの記事なので、公認球ではご注意ください。

ブラスチューブを斜めにカット

Amazonで買ったブラスチューブ、外径4mm、4.5mmを使います。壁厚は0.2 mmです。

ボールに差し込めるよう、金属用のこぎり（100均）で斜めに切断します。

2～3段階で挿す

まず、つまようじ、もしあれば太めのキリで、ボールのつなぎ目を広げます。

4mmのブラスチューブを挿し込み、中身のペレットが出てくるのなら、これでOKです。

出てこないのなら、4.5mmに切り替えます。

私の持っているボールは、4.5mmでも詰まることがあるのですが、詰まった場合は、4.5mmに4mmのブラスチューブを挿し込んで、詰まりを解消します。

中身のペレットはいろいろ

安いレクボールは、どんな中身が出てくるか分かりません。

同じボールセットの中でも、白っぽいペレットが出てくるもの。黒のペレットだけが出てくるもの。

時には鋭利で、内側から皮を突き破りそうなペレットも出てきます。

ブラスチューブは効率的

潰れてしまうプラスチックのストローより、ブラスチューブは効率的にペレットを抜けます。

反面、ブラスチューブは硬いので、ボールを傷つけるリスクが上がります。

レク用のボールだと、多少傷つけても問題ないので、容赦なくブラスチューブを挿し込めました。

よく考えるとレクでも高いような気がしますが、公認球が高すぎて、感覚がマヒしているのかもしれません。

2023年7月21日

安いボッチャボールセットを使いやすく

楽天で17,800円のボッチャボールセットを買いました。これでも比較的安い方です。ただ、ボールが硬すぎて、コントロールが難しいのが問題。ボールの中身を抜き、柔らかくします。

硬いボールはアプローチが難しい

ジャックボールにアプローチする（近づける）場合、硬いボールを使うと難しくなります。

硬いボールは転がる時間が長く、距離の調節が難しいです。さらに安いボールはきれいな球形ではないので、真っ直ぐ転がりません。

初心者がレクで使う場合は安いボールを使いたいですが、安くて硬いボールは思い通りにコントロールできず、ボッチャの楽しみを損ねる心配があります。

中身を抜いて柔らかく

たいていのボッチャボールは、皮のつなぎ目にストローを挿して、中身を抜くことができます。

柔らかくすれば転がる距離、どこかに行ってしまう距離が短くなり、コントロールしやすくなります。

ボールの中にはプラスチックのペレットが入っていて、硬めのストローを挿しこむと、少しずつペレットが出てきます。

ペレットを抜いて263g以上あれば規定の重さです。しかしレクで使うなら、この数字にこだわらず、まだ硬い場合はもっと抜いて良いと思います。250g程度にしないと柔らかくならないボールもあります。

ペレットを抜くと柔らかくなりましたが、2球抜いただけで私は心が折れました。飲用のストローだと空洞が潰れて、ペレットが通りにくいです。金属製のストロー（パイプ）を使おうと思います。

はじめから柔らかめのボールを買う方が良い

ボールを柔らかくするのには時間がかかりますし、ストローを無理やり差し込むことで、ボールの耐久力が下がる恐れもあります。

こんなことなら最安のボールより、低価格帯で柔らかめのボールを買った方がお得だと思います。

ストライカスポーツのはじめてのボッチャセットが、柔らかくて使いやすく、ボッチャボールセットの中では低価格帯です。

私が購入しようとしたとき、ちょうど在庫切れで買えず、最安のボールセットに手を出してしまいましたが、ボールの柔らかさ調整に時間がかかり、後悔しています。

2022年6月14日2022年6月13日

WebSocketの遅延を防げず結局ポーリング

WebSocket（Socket.io）を使い、遠隔でブラウザに文字を出力するアプリを作っています。しかし、まれに5秒程度遅延することがあります。私の使用用途では許容できなかったので、結局ポーリングに切り替えました。

一定間隔で通信するポーリング

古くからあるポーリング。サーバーの情報を一定間隔で取得します。

操作画面から入力した命令を、サーバーでJSONに記録し、そのJSONを出力画面のブラウザがAjaxで0.1秒おきに取得しています。

近年PCのスペックが上がり、0.1秒間隔のポーリングでも耐えられそうです。

離れた場所のブラウザに、0.1秒以下の遅延で文字が表示されると、感覚的にはほぼリアルタイムです。

負荷は問題ないか、引き続き確認し、問題があれば0.2秒、0.3秒・・・と間隔を広げていこうと思います。

WebSocketの遅延に悩んだら、あきらめてポーリングに切り替える判断も必要かもしれません。

2022年6月13日2022年6月11日

Node.js + Socket.ioの基本パターン

Node.jsでSocket.ioをたまに使うのですが、書き方を忘れます。何度も思い出す時間がもったいないので、最低限よく使うパターンを記録に残します。

Node.jsサーバーのコード

Expressを利用して、Webサーバーを立てています。

Socket.ioでHTMLから受信したメッセージをログに表示します。

その直後「返信」とHTMLに送り返します。

const TCP_PORT = 3000,
      DIRECTORY = 'app',
      express = require('express'),
      app = express(),
      http = require('http').Server(app),
      io = require('socket.io')(http);

const init = () => {
  app.use(express.static(DIRECTORY));
  http.listen(TCP_PORT, () => {
    console.log('サーバーを起動');
  });
  setIo();
},

//ソケットIO設定
setIo = () => {
  io.on('connection', (socket) => {
    socket.on('btn', (val) => {
      console.log(val);
      io.sockets.emit('text', '返信');
    });
  });
};

init();

const TCP_PORT = 3000,

DIRECTORY = 'app',

express = require('express'),

app = express(),

http = require('http').Server(app),

io = require('socket.io')(http);

const init = () => {

app.use(express.static(DIRECTORY));

http.listen(TCP_PORT, () => {

console.log('サーバーを起動');

});

setIo();

//ソケットIO設定

setIo = () => {

io.on('connection', (socket) => {

socket.on('btn', (val) => {

console.log(val);

io.sockets.emit('text', '返信');

});

};

init();

HTMLのコード

ボタンを押すと「送信」というメッセージがNode.jsサーバーに送られます。

送信が成功し、返信を受け取った場合、「返信」とブラウザのコンソールログに表示されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>socket.io送受信</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>
</head>
<body>
<header>
  <h1>socket.io送受信</h1>
  <button type="button" id="btn">ボタン</button>
</header>
<main>

</main>
<script>
  const socket = io();

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

  const setSocket = () => {
    socket.on('text', (val) => {
      console.log(val); //'返信'と表示
    });
  };

  const setBtn = () => {
    $('#btn').on('click', function(){
      socket.emit('btn', '送信');
    });
  };
  init();
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>socket.io送受信</title>

</head>

<body>

<h1>socket.io送受信</h1>

</header>

<main>

</main>

const socket = io();

const init = () => {

setSocket();

setBtn();

const setSocket = () => {

socket.on('text', (val) => {

console.log(val); //'返信'と表示

});

};

const setBtn = () => {

$('#btn').on('click', function(){

socket.emit('btn', '送信');

});

};

init();

</script>

</body>

</html>

以上。

基本パターンは、この記載を見て思い出すことにします。

2022年6月12日2022年6月11日

リーダー表示から学ぶ読みやすい文章

iPhoneのSafariなど、Webサイトを読みやすくするリーダー表示機能が搭載されています。このリーダー表示のスタイルを見ると、読みやすい文章デザインを学ぶことができます。

リーダー表示とは？

リーダー表示は、背景や文字の装飾を消し、広告も消え、電子書籍のようなシンプルなデザインで表示するモードです。

iPhoneのSafariだとアドレスバーの横にある「あぁ」ボタンから「リーダー表示」を選択できます。

リーダー表示で読みやすくなる

例えば上記のように、背景色があり、強調文字が赤くなっている文章があったとします。

これをリーダー表示すると・・・

背景が白になり、赤い強調文字は黒くなります。

フォントも明朝からゴシックに切り替わりました。

リーダー表示のオプションで、背景色やフォントは切り替えられますが、デフォルトは上記のような表示になります。

集中して読ませたい文章デザイン

リーダー表示を見ると、集中して読ませたい場合の文章デザインを学べます。

#FFFFFF白の背景色に、#1E1E1E黒の文字色。#000000の真っ黒はコントラストが強すぎて読みにくくなるので避けています。

背景や文章の色（彩度）がなくなりますが、これもユーザーの集中力を削ることを避けるためでしょう。

強調したい文字があっても色を使わず、太文字にとどめます。

フォントはゴシックの方が読みやすく、ヒラギノ角ゴシックなどをfont-familyに設定しましょう。

読み物系サイトで活用

読ませたい文章のデザインなので、楽天商品ページのようなインパクトで訴求するページには適さない場合もあります。

リーダー表示は、ニュース記事やブログなど、読み物系で参考にできるデザインかと思います。

2022年6月11日

強調・装飾が多い文章はVoiceOverで読み上げにくい

iPhoneの視覚障害者向けスクリーンリーダーで、「VoiceOver」という機能があります。Webサイトを読み上げるとき、強調や装飾の多い文章は、読み上げにくいので注意が必要です。

読み上げでつっかえる

実際にVoiceOver（iOS15.5）で読み上げたときの動画です。

強調や、装飾をしている文字の前後で読み上げが止まります。

文字の強調すること自体は問題ありませんが、多用すると読み上げにくくなります。

これは晴眼者にも無関係ではなく、強調や装飾が多い文章は疲れて読みにくくなります。

強調するなら本当に重要な個所に絞った方がよいでしょう。

読み上げサンプルのコード

今回読み上げたコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>読み上げテスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  strong {
    color: #C00;
  }
</style>
</head>
<body>
<h1>読み上げテスト</h1>
<p>iPhoneのスクリーンリーダーである、VoiceOverを利用して読み上げをおこないます。これは視覚障害者向けに開発された機能です。</p>
<p>iPhoneの<strong>スクリーンリーダー</strong>である、<strong>VoiceOver</strong>を利用して読み上げをおこないます。これは<strong>視覚障害者向け</strong>に開発された機能です。</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>読み上げテスト</title>

<style>

strong {

color: #C00;

}

</style>

</head>

<body>

<h1>読み上げテスト</h1>

<p>iPhoneのスクリーンリーダーである、VoiceOverを利用して読み上げをおこないます。これは視覚障害者向けに開発された機能です。</p>

<p>iPhoneの<strong>スクリーンリーダー</strong>である、<strong>VoiceOver</strong>を利用して読み上げをおこないます。これは<strong>視覚障害者向け</strong>に開発された機能です。</p>

</body>

</html>

タグ単位でVoiceOverは区切るので、<strong>や<span>があると、その都度読み上げが止まります。

メンテナンス性も悪いですし、文章中にたくさんタグを埋め込むことは控えた方が良さそうです。

2022年5月19日

子供の怪我！逆に生存確率が上がるのでは？

昨日指を若木骨折した三男。ケガをした時の責任問題に敏感な日本ですが、ケガで得られる学びも多くあります。ケガをすることで逆に生存率が上がるのでは？と考えます。

次男もケガ

今日は次男（小4）がケガして帰ってきました。（写真の傷は、ぼかしています）

「自転車でこけた！写真撮って！」

傷が勲章だと思っています。次男は私の前に膝を出します。

砂利に突っ込んだようで、傷口が汚れています。

本人も気づいて「洗ってくる！」と、立ち去りました。

次男はケガが多いので、慣れてます。

血に慣れていると、大きなケガで出血が多くても冷静に処置できそうです。

長男は淡々とケガ

長男はクリエイターで、刃物でのケガが多いです。

加えて空手の打撃を受ける鍛錬をしているので、練習後は体にあざができています。

空手の後、「見て！やばいことになってる！」と、内出血している体を私に見せてくれます。

勲章だと思っているのでしょう。

暴走三男と四男のケガ

暴走しやすい三男（小2）、四男（年長）はケガが多いです。短い人生で骨折経験があります。

四男は以前、自転車で暴走して、派手にコケ、肩を骨折しました。

骨折が完治してからは、比較的安全に運転するようになったと思います。

少し前、考えられない転び方をしている大人を見かけました。それを見ると、体重が軽い子供のうちに転び慣れていた方が、安全だと感じました。

ケガを誇る！

基本的に子供たちはケガを誇ります。なぜか自己肯定感が上がるようです。

たぶん、狩猟時代から受け継いでいる人間の本能です。

ケガで心が折れていたら挑戦できず、狩猟時代であれば餓死してしまうでしょう。（人間の脳は狩猟時代からほとんど進化していないと言われます。）

だからケガから学び、工夫して狩猟ができるよう、挑戦する意欲が湧きます。

現代、狩猟は必要ありませんが、挑戦しないと厳しい時代になってきています。

ケガを理由に子供たちの挑戦意欲を抑制すると、後々苦労するかもしれません。

ケガが多い方が生き残れる？

ケガのデメリットも考えてみます。

強いて言えば、仕事を休んで病院に連れていく機会が増えるのは、親にとってデメリットです。

あと、子供の事故死の確率が増えるかな・・・とも考えましたが、統計見ると、子供の不慮の事故死の確率より、成人したときの自殺確率の方が深刻すぎました。

厚生労働省の年齢階級別死亡数を見ると、子供（５～９歳）で不慮の事故での死亡が0.138%。成人（20～24歳）の自殺率が1.474%。

これを見ると、ケガを恐れないメンタルを育んだ子供の方が、将来生存確率が高いように思えます。

子供の命を守るために、親がケガをしないように子供に注意することはあると思います。しかし、度を超すと、逆に将来的に死亡率が上がるのかもしれません・・・。

2022年5月18日

若木骨折という子供特有のケガ

三男が指を痛めて帰ってきました。少し腫れているように見え、突き指かと思いました。様子を見るか迷いましたが、整形外科に連れていきます。診察結果は「若木骨折」でした。

逆立ちで倒れた

三男は、なんとなく逆立ちに挑戦して、右の小指に負荷がかかる状態で倒れたそうです。

逆立ちに挑戦する精神は素晴らしい。

右の小指を見ると、少し腫れているように見えました。ただ、指は曲げられるので、骨折はしてないと思います。

突き指程度だとして、病院に連れていくレベルか・・・。

整形外科に行く

昔、四男が自転車で暴走し、転んで骨折したことがあります。その時も、骨折しているとは思わなかったので、素人がケガを安易に判断しない方がよいと考えました。

三男を整形外科に連れていきます。

若木骨折

レントゲンを撮り確認すると、医師から「若木骨折」と告げられました。

聞いたことがない骨折です。

指の骨にひびが入り、さらに骨が曲がっているとのこと。

柔らかい子供の骨特有の骨折ようです。

突き指と親が判断せず、分からなかったら病院に連れて行くのが良さそうです。

2022年5月16日

子供の大きな数への好奇心

リビングの出窓で、何か不気味な札を見つけました。丸の模様がぎっしり書かれています。子供が描いたものだと思いますが、何か病んでいるのでしょうか？よく見ると紙幣のようです。

大金の紙幣

丸模様の左上を見ると、「1」が書かれています。

ということは、100000000000000000000000000・・・円札を作ったのでしょう。

真ん中にライオン（花？）が透かしですね。

絵を見ると三男（小2）が作ったようです。

大きな数が大好き

少し前、三男が呪文のように大きな数の単位を唱えていました。

「億、兆、京、垓、穣、溝、澗、正、載、極、恒河沙（ごうかしゃ）、阿僧祇（あそうぎ）、那由他（なゆた）、不可思議（ふかしぎ）、無量大数（むりょうたいすう）」

よく覚えていますね。私も子供のころは大きな数が好きでしたが、「垓」までしか知りませんでした。

今はインターネットがあるので、知りたければ知れます。子供の好奇心には良い時代です。

実用的には兆まで？

コンピューターの計算で京まで使うかもしれませんが・・・社会、経済で実用的には兆までしか使った記憶がありません。

おそらく子供たちも、垓以降を覚えたところで使うことはないと思います。しかし、大きな数のロマンがあります。たぶん。

感覚的にしか言えませんが、大きい数を覚えることは、無駄そうで無駄ではないと考えています。