点字翻訳アプリのサンプルを作ってみました

岩手県立大学とか、岩手の人たち Advent Calendar 2021 3日目の記事です。 今日はシニアプログラミングもくもく会でJavaScriptを使った簡単なアプリ作成を行った話をしようと思います。

シニアプログラミングもくもく会

シニアプログラミングもくもく会は、シニア(高齢者)の方のプログラミング学習を支援するコミュニティーで月イチの頻度でもくもく会が開催されています。もくもく会では、プログラミング言語に応じて複数の部屋(現在はZoomを使っており、ブレイクアウトルームに分かれてもくもく会する感じになっています)が用意されています。

シニアの方だけでなく、一般の方も参加可能であるため、私も少し前から参加させてもらっていて、Glideというノンプログラミングツールのもくもく部屋を開催していました。

ただ、参加者の方が作ってみたいアプリをヒアリングしてみると、Glideのユースケースにマッチするものとそうでないものがあり、まずはいくつかの小さなアプリを題材としたプログラミングが良いのではないかと思うようになってきました。 (個人的にはちょっとした面倒ごとを解消するようなアプリだとプログラミング学習のモチベーションが上がるような気がしています)

というワケで、前々回くらいからJavaScript部屋を開催させてもらっており、今回はそこで作成した簡単なアプリの紹介をしてみます。

点字翻訳アプリ

少し前の話ですが、日本盲導犬協会の方が以下のようなツイートをしていました。どうやら11月1日は日本点字制定記念日のようです。

このツイートに点字の一覧表が添付されており、「これを使用すれば点字を読み解けるのでは…！」と閃いたワケです。機能的にも比較的小さなプログラムで実現できそうであり、さっそくJavaScript部屋でのアプリの題材にしてみました。

アプリの構成

JavaScript自体はWebブラウザさえあれば試すことができますが、実際に作成したプログラムの共有はもう一工夫必要です。JavaScript部屋ではcodepen.ioでプログラムを共有することにしました。

今回作成した点字翻訳アプリは以下のURLで試すことができます。

See the Pen 点字翻訳アプリ by furandon_pig (@furandon_pig) on CodePen.

サンプルということもあり、ア～オまでの点字のみの翻訳となっていますが、基本的な機能は実装済みです。 点字の入力をどうするか、という点がネックでしたが、点字の入力欄に見立てた2列3行の入力欄をクリックすることで点字の凹凸(「‐」と「●」)がトグルするようなユーザインタフェースにしてみました。

点字が入力される度にデータとして持っている点字リストと比較し、一致する文字があればそれを表示する、という動作にしてみました。

HTMLとJavaScriptを合わせても60行ちょっとなので、だいぶコンパクトなプログラムになっています。 (あとは点字のデータを一通りそろえれば十分に実用的なアプリになります)

できるだけシンプルな構成にする

この点字翻訳アプリですが、 document.getElementById() によるDOM操作等、あえて古めかしい書き方をしている部分もあります。最新のJavaScriptの機能やフレームワークも良いのですが、プログラミンを学び始める際には逆に憶えることが増えてしまう場合もあります。

そのため、「こうすればこのような動作になる」という具体的な動作イメージを掴んでもらいやすくするため、ちょっと古めかしい書き方であってもアプリの振る舞いについて流れが追いやすいようなサンプルにしています。

まとめ

簡単ではありますが、シニアプログラミングもくもく会で作成した点字翻訳アプリとJavaScript部屋の紹介をしてみました。

codepen.ioは初めて使ってみたのですがなかなか便利です。特に小さなアプリの作成とプログラムの共有がJavaScript部屋でのユースケースにうまくマッチしています。 他にも小さなアプリの題材を見つけてプログラムのサンプルを増やして行きたいところです。