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

2021年3月11日2021年3月10日

クッキーの型を子供が自作

次男（小2）がホワイトデー用にクッキーの型を作っています。Tinkercadを使うと、低学年でも３Dモデリングが可能です。次男がどんなものを作るか見守ります。

鉛筆型クッキー？

３Dモデリングオンラインソフト「Tinkercad」を使い、次男が何かの型を作っています。

鉛筆のクッキー型のようです。

クッキーの型にするには、ちょっと細すぎるかな？

どうなるか気になりますが、そのまま３Dプリントします。

鉛筆と他いろいろ焼き上がる

次男は兄と一緒に型抜きして、クッキーを焼いていました。

焼き上がったクッキーを、私のいるテーブルに持ってきてくれます。

・・・人？

長男が作った悪魔のクッキーに気を取られてしまいました。

次男が今回型抜きした鉛筆クッキーは、写真左に写っています。

デコレーションをうまくすれば、鉛筆に見えるでしょう。

クッキーにデコレーション

次男はアイシングクリームで鉛筆クッキーをデコレーションします。

色鉛筆にするのかなと思いきや、もはや関係なしのデコレーション。

クリームいっぱいで良いと思います。

今回は練習ということだったので、本番の手作りクッキーがどんなものになるか、楽しみにしています。

2021年3月10日2021年3月9日

家庭用３Dプリンターで精密ドライバーは無理

Y字の精密ドライバーが欲しくなり、３Dプリンターで作ってみました。しかし、家庭用３Dプリンターでは無理がありました。

珍しいY字のネジ

使っていたトラックボールが反応しなくなり、分解して中身を確認しようと思いました。

しかし、トラックボールを裏返してみると、ネジがY字。

手持ちのドライバーで外せません。

ないなら３Dプリント

Y字ドライバーがなかったので、３Dプリンターで作ってみます。

プリント時間を短縮するため、ネジ巻きみたいな形にしました。

強度がある炭素フィラメントでプリントします。

精密なプリントは難しい

３Dプリントした精密ドライバーを使ってみましたが・・・無理でした。

精密さが足りない、そして細そすぎて強度が足りないようです。

まったくネジを外せません。

残念ながら、家庭用３Dプリンターで精密ドライバーを作るのは無理があるようです。

Y字ドライバーは、ネットショッピングかホームセンターで手に入れましょう。

2021年3月9日2021年3月8日

パワーポイント低画質配信ではメイリオ32ptが安全

オンライン講演会などでパワーポイント画面をライブ配信をするとき、環境によっては低画質になることも考えられます。どんな環境でも読めるように配慮するなら、32pt以上のメイリオがよいでしょう。

最低画質144pでの見え方

YouTubeの最低画質144pでの見え方です。通信環境が非常に悪い状況で起こります。

比較するフォントは、Webデフォルトで多く使われる「メイリオ」。パワーポイントデフォルトの「游ゴシック」。そして字体が違う「游明朝」です。

フォントサイズは24pt。iPhoneの多く※で16px相当で表示され、Webとしては十分読めるサイズの文字です。※iPhone6～8、SE(2)、12 mini

しかし、画質が落ちると大きく可読性が損なわれます。

フォントによる見え方の違いが分かりやすいように、同じ文章で比較しましょう。

「吾輩は猫である。名前はまだない。」で比較します。

どのフォントでも読むことが難しくなり、特に漢字が潰れてしまいます。

低画質240pでの見え方

さきほどより少し画質が上がった240pでの表示です。

上から4番目のメイリオ太字がはっきり見えます。

「吾」や「猫」のような漢字では、潰れがない一番上のメイリオ（標準）が見やすく感じます。

最低画質も考慮すると32pt必要

感覚的ですが、最低画質144pでも32ptの文字であれば、ぎりぎり読めます。

1番上のメイリオか、4番目のメイリオ太字、もしくは5番目の游ゴシック太字が比較的読みやすいです。

3番目、6番目の游明朝は、文字の線の太さが一定でない分、読みにくくなります。

意外にも2番目の游ゴシック（標準）も、線がうすくぼやける感じで、見えにくくなりました。

迷ったらメイリオにしましょう。

なお、低画質配信になるのはユーザー側の通信問題だけでなく、配信側の設備に起因しする場合もあります。

配信トラブルも考慮して、読みやすいフォントを選択したほうが安全でしょう。

2021年3月8日2021年3月8日

パワーポイント配信の最小フォントサイズは24pt

最近ではオンライン講演やオンライン会議が増えてきました。パワーポイントを配信するのであれば、スマホで見られるケースも考え、24pt以上のフォントサイズを確保しましょう。

アクセシビリティとしては24pt

スマホのディスプレイがばらばらで一概には言えませんが、比較的多い375px※幅のスマホを横向きに見ていると仮定しましょう。
※CSSピクセルを基準に使っています。

Webアクセシビリティでは16px以上のフォントサイズ確保が目安になります。

375pxのスマホなら、パワーポイントのフォントサイズは24pt以上必要です。

パワーポイントのデフォルトは18ptとなっており、これはPCやスクリーン、印刷を想定しています。

スマホで見られることを想定した場合、大きめにフォントサイズを変更する必要があります。

小さいスマホにも対応するなら28pt

iPhoneSE（初代）以前は、320px幅の機種がありました。

ここまでサポートするなら、28ptのフォントサイズを採用したほうが良いでしょう。

これより小さい320px幅未満のスマホについては、気にしなくて大丈夫です。

例えば私が持っているAtomというスマホは240px幅です。超小型端末を持っているユーザーは、もはやアクセシビリティを犠牲にする覚悟ができています。

好き好んで文字の読みにくい端末を選んでいるので、おかまいなく。

通常は24pt以上でパワポの文字を設定すれば問題ないです。

2021年3月7日2021年3月6日

Webで読みやすいフォントは16px

Webサイトの文章を、読みやすいフォントサイズにしたい場合、16pxにするのがおすすめです。PCでもスマホでも、本文は16pxで問題ありません。

WCAGで最小フォントサイズの記載なし

Webのアクセシビリティガイドライン（WCAG）では、最小フォントサイズについて記載はありません。

海外のアクセシビリティ情報サイトになりますが、最小フォントサイズは通常16pxという記載は見かけます。

Chrome、Edgeなどのブラウザの標準フォントも16pxのため、このサイズが読みやすさの標準と考えて、問題ないでしょう。

Yahooニュースを参考に

海外で議論されるアクセシビリティだけではなく、日本人ユーザーの感覚も確かめます。

文章を読むサイトとして日本最大級のYahooニュースを見てみましょう。

PC版は本文が16px。

スマホ版も16px。

慣れという観点を含めて考えても、16pxが読みやすいと考えて良いでしょう。

読みやすいフォントサイズは16px

アクセシビリティの議論、ブラウザのデフォルト、ユーザーの多いサイト。これらを総合的に見て、PCでもスマホでもフォントサイズは16pxが読みやすいです。

2021年3月6日2021年3月5日

BERTScoreの速度はPCスペックで大きく変わる

ノートPCで大量の自然言語処理を試みると、数日かかることがあります。根本的に改善するにはPCを新しくすることが有効です。私の場合は処理時間が40%短縮されました。

この記事について

ノートPCで自然言語処理をするような初心者向けの記事です。本格的な処理をする方には参考にならないと思います。ご注意ください。

PCスペック比較

同価格帯のノートPC、3年前のモデルと現行モデルで、BERTの処理速度を比較してみました。

旧PC　HP Spectre x360 13（2017モデル）

CPU：Core i7-8550U
グラフィック：Intel UHD Graphics 620

新PC　HP Spectre x360 14（2020モデル）

CPU：Core i7 1165G7
グラフィック：Intel Iris Xe

処理時間40%短縮

4つの短い文章を使い、BERTScoreのテストを行います。

結果、旧PCは処理時間が22.8秒。新PCは13..4秒。処理時間が40%短縮されています。

CPUとGPU、どちらの影響が大きいのか分かりませんが、PC性能の向上はすさまじいものです。

Web制作者が自然言語処理をするなら

近頃、Web制作者の担当範囲は、広がる一方です。

Web制作でそこまでPCスペックは必要なかったのですが・・・自然言語処理を行おうとすると、やはりPCスペックが必要です。

重い処理をするなら、PCを早めに買い替えたほうが良いかもしれません。

2021年3月5日2021年3月3日

BERTScoreを英語で試す

自然言語の評価基準「BERTScore」を英語でも試して見ます。Google開発のBERTなので、もちろん英文の自然言語処理の方が得意です。

英文用にコード変更

英文の自然言語処理をする場合、前回のPythonコードの5行目、言語指定を「lang=”en”」に変更するだけです。

むしろ英文がデフォルトで、日本語に対応していたことが、ありがたいことです。

英文で類似度の計算

前回テストで使った日本語の文章を、英文に翻訳します。

I am a cat
I am a cat in the future world
I'm a cat-shaped robot
I'm a boy in yellow with glasses

I am a cat

I am a cat in the future world

I'm a cat-shaped robot

I'm a boy in yellow with glasses

この4つで類似度計算します。

I am a cat
   0.9421 : I am a cat in the future world
   0.9174 : I'm a cat-shaped robot
   0.8756 : I'm a boy in yellow with glass
I am a cat in the future world
   0.9421 : I am a cat
   0.9114 : I'm a cat-shaped robot
   0.8794 : I'm a boy in yellow with glass
I'm a cat-shaped robot
   0.9174 : I am a cat
   0.9114 : I am a cat in the future world
   0.8834 : I'm a boy in yellow with glass
I'm a boy in yellow with glass
   0.8834 : I'm a cat-shaped robot
   0.8794 : I am a cat in the future world
   0.8756 : I am a cat

I am a cat

0.9421 : I am a cat in the future world

0.9174 : I'm a cat-shaped robot

0.8756 : I'm a boy in yellow with glass

I am a cat in the future world

0.9421 : I am a cat

0.9114 : I'm a cat-shaped robot

0.8794 : I'm a boy in yellow with glass

I'm a cat-shaped robot

0.9174 : I am a cat

0.9114 : I am a cat in the future world

0.8834 : I'm a boy in yellow with glass

I'm a boy in yellow with glass

0.8834 : I'm a cat-shaped robot

0.8794 : I am a cat in the future world

0.8756 : I am a cat

結果は、日本語で計算した時と順位が変わりません。

ただし、スコアと処理時間はだいぶ変わります。

スコアが高く、処理時間が増加

スコアを見ると、日本語では見られない0.9以上が出力されるようになりました。

ただし、処理時間は22.8秒→33.4秒に増加。

自然言語処理に使う学習データは英語の方が多いため、処理に時間がかかるのでしょうか？

大量の英文を処理する場合、日本語より時間がかかることに注意する必要があるかもしれません。（納品期限とかあれば）

2021年3月4日2021年3月3日

（軽量化）BERTScoreで文章を類似度順に並べる

以前、自然言語の評価基準「BERTScore」を使って、類似度の高い文章をスコア順に並べました。しかし、あまりにも計算が遅かったので軽量化します。

この記事について

自然言語処理をとりあえず試してみたい人がターゲットです。自然言語処理で登場する、難しい計算や図について、私はよく分かりません。

分からなくても何とか出来ることを、実感できればと思います。

事前準備

環境の用意や、参考サイトは以前の記事をご確認ください。

テストする文章も前回と同じです。

吾輩は猫である
未来の世界の猫である
猫型のロボットである
眼鏡をかけた黄色い服の少年

吾輩は猫である

未来の世界の猫である

猫型のロボットである

眼鏡をかけた黄色い服の少年

この4つの文章を他3つの文章と比べ、類似度のスコアを出しましょう。

前回のコードは単純な総当たりでの類似度計算で、500件くらいの文章を処理すると3日かかりました。

コードに無駄が多かったので改修します。

文章Aと文章B、文章Bと文章Aの組み合わせ計算は同じなので、再計算しないようにしています。

軽量化したPythonコード

from bert_score import score


def calc_bert_score(cands, refs):
    Precision, Recall, F1 = score(cands, refs, lang="ja", verbose=True)
    # スコア　Precision　Recall　F1
    return F1.numpy().tolist()


if __name__ == "__main__":
    with open("test.txt") as f:
        list = [line.strip() for line in f]
        F1List = list.copy()

    result = []
    len = len(list)
    max = len - 1
    for index, item in enumerate(list):
        # 総当たり用配列（全部同じ値 × 行数）
        cands = []
        for j, item in enumerate(list):
            if j == max:
                break
            cands.append(list[index])

        print(str(len - max) + ' / ' + str(len))
        # 総当たり数（max）を1ずつ減らす
        max -= 1
        if max == -1:
            break
        del F1List[0]
        F1 = calc_bert_score(cands, F1List)
        data = []
        line = 0

        for item in result:
            data.append([item[index][0], line])
            line += 1
        for item in F1:
            if line == index:
                # 同じ文章はスコア0に
                data.append([0, line])
                line += 1
            data.append([round(item, 4), line])
            line += 1
        result.append(data)
    # 最終組み合わせ
    data = []
    for i, item in enumerate(result):
        data.append([item[index][0], i])
    data.append([0, i + 1])
    result.append(data)

    for i, item in enumerate(result):
        n = 0
        print(list[i][:20])
        # スコアソート
        item.sort(reverse=True)
        for score in item:
            print("   " + str(score[0]) + " : " + list[score[1]][:20])
            n += 1
            if n == 3:
                break

from bert_score import score

def calc_bert_score(cands, refs):

Precision, Recall, F1 = score(cands, refs, lang="ja", verbose=True)

# スコア　Precision　Recall　F1

return F1.numpy().tolist()

if __name__ == "__main__":

with open("test.txt") as f:

list = [line.strip() for line in f]

F1List = list.copy()

result = []

len = len(list)

max = len - 1

for index, item in enumerate(list):

# 総当たり用配列（全部同じ値 × 行数）

cands = []

for j, item in enumerate(list):

if j == max:

break

cands.append(list[index])

print(str(len - max) + ' / ' + str(len))

# 総当たり数（max）を1ずつ減らす

max -= 1

if max == -1:

break

del F1List[0]

F1 = calc_bert_score(cands, F1List)

data = []

line = 0

for item in result:

data.append([item[index][0], line])

line += 1

for item in F1:

if line == index:

# 同じ文章はスコア0に

data.append([0, line])

line += 1

data.append([round(item, 4), line])

line += 1

result.append(data)

# 最終組み合わせ

data = []

for i, item in enumerate(result):

data.append([item[index][0], i])

data.append([0, i + 1])

result.append(data)

for i, item in enumerate(result):

n = 0

print(list[i][:20])

# スコアソート

item.sort(reverse=True)

for score in item:

print(" " + str(score[0]) + " : " + list[score[1]][:20])

n += 1

if n == 3:

break

出力結果

吾輩は猫である
   0.7528 : 未来の世界の猫である
   0.6964 : 猫型のロボットである
   0.6372 : 眼鏡をかけた黄色い服の少年
未来の世界の猫である
   0.7528 : 吾輩は猫である
   0.7367 : 猫型のロボットである
   0.6647 : 眼鏡をかけた黄色い服の少年
猫型のロボットである
   0.7367 : 未来の世界の猫である
   0.6964 : 吾輩は猫である
   0.682 : 眼鏡をかけた黄色い服の少年
眼鏡をかけた黄色い服の少年
   0.682 : 猫型のロボットである
   0.6647 : 未来の世界の猫である
   0.6372 : 吾輩は猫である

吾輩は猫である

0.7528 : 未来の世界の猫である

0.6964 : 猫型のロボットである

0.6372 : 眼鏡をかけた黄色い服の少年

未来の世界の猫である

0.7528 : 吾輩は猫である

0.7367 : 猫型のロボットである

0.6647 : 眼鏡をかけた黄色い服の少年

猫型のロボットである

0.7367 : 未来の世界の猫である

0.6964 : 吾輩は猫である

0.682 : 眼鏡をかけた黄色い服の少年

眼鏡をかけた黄色い服の少年

0.682 : 猫型のロボットである

0.6647 : 未来の世界の猫である

0.6372 : 吾輩は猫である

0.7528というような数字が類似度のスコアです。

高いほど似ている文章となります。スコアとしては「吾輩は猫である」と、「未来の世界の猫である」が最も類似していることになります。

計算速度アップ

前回28.5秒だった計算が、22.8秒になりました。

4件だと微妙な速度アップですが、大量の計算だと1日差がでることもあるでしょう。

2021年3月3日2021年3月2日

Pythonでインクリメント演算子「++」が使えない

Pythonでインクリメント演算子「++」が使えません。累算代入「+=」を使います。JavaScriptから来た人には、つまづくところかもしれません。

インクリメント演算子

Pythonで変数「n」に1追加したく、「n++」と書いてみました。するとエラーがでます。

運よく隣にPythonエンジニアがいたので、何でエラーなのか尋ねました。

「Pythonでインクリメント演算子は使えません。」と教えてくれます。

・・・初歩的なことかもしれませんが、「++」をインクリメント演算子というのですね。

累算代入を使ってください

Pythonではインクリメント演算子の代わりに、累計代入「n += 1」と書くようです。

私が「インクリメント演算子」という言葉を知っていれば簡単に検索して解決できましたが・・・「++」を何と検索すればよいか迷ってエンジニアさんに聞いてしまいました。

忘れないように、備忘録として残します。

2021年3月2日2021年2月28日

開閉パネルに適度なアニメーション

前回、アクセシビリティを確保した開閉パネルを作りました。瞬時に開閉するパネルも良いですが、場合によってはアニメーションを付けたほうが使いやすいこともあります。

開閉パネルサンプル

今回はアクセシビリティを確保しつつ、アニメーションしながら開閉するパネルを作りました。

最も簡単と思われるjQueryを利用しています。

アニメーション開閉パネルのコード

サンプルページのコードを抜粋します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>開閉パネルのアクセシビリティ（アニメーション付き）</title>
    <style>
      /* 矢印アイコン以外 省略しています */
      .js-disclosure dt button .arrow {
        position: absolute;
        top: 50%;
        right: 0.7em;
        width: 0.5rem;
        border: 1px solid #666;
        border-width: 0 2px 2px 0;
        height: 0.5rem;
        transform: translateY(-60%) rotate(45deg);
        pointer-events: none;
      }

      .js-disclosure dt button[aria-expanded="true"] .arrow {
        transform: translateY(-30%) rotate(-135deg);
      }

    </style>
  </head>
  <body>
    <dl class="js-disclosure">
      <dt>
        <button aria-expanded="false" aria-controls="panel0">開閉ボタン<span class="arrow"></span></button>
      </dt>
      <dd>
        <p id="panel0">開いたときの本文<br>開いたときの本文<br>開いたときの本文</p>
      </dd>
    </dl>

    <script>
      $('.js-disclosure [aria-expanded]').on('click', function() {
        let expanded = $(this).attr('aria-expanded') === 'true',
            controls = $(this).attr('aria-controls');
        $(this).attr('aria-expanded', !expanded);
        $('#' + controls).slideToggle(200);
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>開閉パネルのアクセシビリティ（アニメーション付き）</title>

<style>

/* 矢印アイコン以外省略しています */

.js-disclosure dt button .arrow {

position: absolute;

top: 50%;

right: 0.7em;

width: 0.5rem;

border: 1px solid #666;

border-width: 0 2px 2px 0;

height: 0.5rem;

transform: translateY(-60%) rotate(45deg);

pointer-events: none;

}

.js-disclosure dt button[aria-expanded="true"] .arrow {

transform: translateY(-30%) rotate(-135deg);

}

</style>

</head>

<body>

<dt>

<button aria-expanded="false" aria-controls="panel0">開閉ボタン<span class="arrow"></span></button>

</dt>

<dd>

<p id="panel0">開いたときの本文<br>開いたときの本文<br>開いたときの本文</p>

</dd>

</dl>

$('.js-disclosure [aria-expanded]').on('click', function() {

let expanded = $(this).attr('aria-expanded') === 'true',

controls = $(this).attr('aria-controls');

$(this).attr('aria-expanded', !expanded);

$('#' + controls).slideToggle(200);

});

</script>

</body>

</html>

slideToggle(200) メソッドを使い、0.2秒かけて開閉させます。

アニメーションは必要？

変化を伝えるとき、アニメーションが有効になる場合があります。

開閉パネルのように、ボタンを押して画面の一部が瞬時に変化する場合、どう変わったか理解する時間が必要になります。

変化時間　＜　変化理解時間

開閉パネルが変化したことを理解する時間が、変化アニメーションの時間より長い場合は、アニメーションを実装したほうが良いでしょう。

ユーザー傾向で判断が変わります。

リテラシーが低めのユーザーを想定するなら、アニメーションがあったほうが良いですし、同じユーザーが短期間に何度も使うような開閉パネルであれば、アニメーションがない方がストレスを減らせます。

例えば業務システムの開閉パネルであれば、担当者が何度も操作することが想定されるので、アニメーションなしの方がストレスなく使えます。

ブログ投稿やCMSで使われるWordPressの投稿画面も、開閉パネルはアニメーションがありません。

アニメーションする場合の速度は？

サンプルで作った開閉パネルのサイズであれば、200ms（0.2秒）で良いと思います。

jQueryのslideToggle()はデフォルトが400ms（0.4秒）で少し遅く感じます。

速度の目安として、Googleマテリアルデザインガイドラインの速度に関する記述を参考にします。

変化が中くらいのアニメーションの場合、開くのが250ms、閉じるのが200msとあります。

開閉でスピードを変えるのも大変なので、200msで設定すればよいでしょう。

もし、開閉パネルが大きいのであれば、200ms～400msの間で程よく速度を調整してください。

鉛筆型クッキー？

鉛筆と他いろいろ焼き上がる

クッキーにデコレーション

珍しいY字のネジ

ないなら３Dプリント

精密なプリントは難しい

最低画質144pでの見え方

低画質240pでの見え方

最低画質も考慮すると32pt必要

アクセシビリティとしては24pt

小さいスマホにも対応するなら28pt

WCAGで最小フォントサイズの記載なし

Yahooニュースを参考に

読みやすいフォントサイズは16px

この記事について

PCスペック比較

旧PC HP Spectre x360 13（2017モデル）

新PC HP Spectre x360 14（2020モデル）

処理時間40%短縮

Web制作者が自然言語処理をするなら

英文用にコード変更

英文で類似度の計算

スコアが高く、処理時間が増加

この記事について

事前準備

軽量化したPythonコード

出力結果

計算速度アップ

インクリメント演算子

累算代入を使ってください

開閉パネルサンプル

アニメーション開閉パネルのコード

アニメーションは必要？

アニメーションする場合の速度は？

旧PC　HP Spectre x360 13（2017モデル）

新PC　HP Spectre x360 14（2020モデル）