2022年6月 – てまりのユニバーサルデザイン

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>があると、その都度読み上げが止まります。

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