極小俳句マシン

完成 2024.07.30 公開（2024.07.30 更新） © CC BY 4+ visibility208

完成 © CC BY 4+

2024.07.30 公開（2024.07.30 更新） visibility208

ニッポンジンハ、ナンデモチイサクスルノガ好キデース！　ハイクモチイサイポエムデース！　ソコデm5matrixヲツカッテ、トテモチイサイ「ハイクマシン」ヲツクッテミマシタ！　ムズカシイノデカタカナダケ！

link https://github.com/tannakaken/m5_matrix_haiku

sell arduino, GAS, フォント, 俳句, 貧弱UI, DSL

動画

開発素材: デバイス

M5 Atom Matrix

API

Google Apps Script

クラウド

Google Spreadsheet

システム構成

システムの構成図は図を参照。

以下にUIのフローを詳述する。

まずgoogle spreadsheetに保存された俳句の総数をgoogle app scriptのWeb APIから取得する。
装置はまず「俳句選択モード」になる（作った文章は575とは限らないが、仮に俳句と呼称している）。最初は0番目を選択している状態で始まる。
「通常の押し方」で次の俳句を選択する。
「長押し」でその俳句を確認できる。俳句はgoogle spreadsheetに保存されており、google app scriptのWeb APIから取得して表示される。
「二回連続押し」でその俳句を削除できる。google app scriptのWeb APIを通して番号によって削除がリクエストされ、google spreadsheetから当該の俳句が削除され、俳句の総数が減らされる。
俳句の総数を越えて「通常の押し方」をされると、「+」が表示される。俳句の総数が0の場合は最初から「+」が表示される。
「+」でさらに「通常の押し方」をすると、最初に戻る。
「+」で「長押し」をすると、俳句の登録モードになり、俳句が空文字列で初期化される。まず「５０音の行選択モード」になり、ア行が選択される。
「５０音の行選択モード」で「通常の押し方」をすると、次の行に移る。つまり「ア→カ→サ→……」と表示が変わっていく。
「５０音の行選択モード」で「長押し」すると、その行において「５０音の段選択モード」に入る。もしその行が一つの文字かコマンドしか含まない場合、その文字が俳句の末尾に付け加えられ、ア行が再び選択されるか、そのコマンドが実行される。
「５０音の段選択モード」で「通常の押し方」すると、次の段に移る。つまり「カ→キ→ク→……」と表示が変わっていく。
「５０音の段選択モード」で段の終わりで「通常の押し方」をすると、左向きの矢印「←」が表示される。その状態で、「長押し」すると、「５０音の行選択モード」に戻り、先ほどの行が選択されている状態になる。
「５０音の段選択モード」で左向きの矢印「←」が表示されている状態で「通常の押し方」をすると、行の先頭に移る。 15.「５０音の段選択モード」で行の文字が表示されている状態で「長押し」すると、その文字が俳句の末尾に追加され、「５０音の行選択モード」になり、ア行が選択されている状態になる。
、「５０音の行選択モード」や「５０音の段選択モード」で「二回連続押し」すると、現在構築中の俳句が確認できる。
「５０音の行選択モード」で「ッ」
が選択されている状態でさらに「通常の押し方」をすると、左向きの矢印「←」が表示される。その状態で、「長押し」すると、末尾の文字が（もし存在すれば）削除され、「５０音の行選択モード」でア行が選択されている状態になる。
「５０音の行選択モード」で左向きの矢印「←」が表示されている状態でさらに「通常の押し方」をすると、チェックマーク「☑」が表示される。その状態で、「長押し」すると、google app scriptのWeb APIを通して、google spreadsheetに俳句がリストの末尾に登録され、俳句の総数が1増える。その後、「俳句選択モード」になり、0番目の俳句を選択している状態になる。
「５０音の行選択モード」でチェックマーク「☑」が表示されている状態でさらに「通常の押し方」をすると、バツ印「×」が表示される。その状態で、「長押し」すると、「俳句選択モード」になり、0番目の俳句を選択している状態になる。

ストーリー: HTML5以降WebブラウザのUIはとても便利になり、デスクトップアプリと遜色がほぼなくなりました。

また、ReactやFlutter以降、スマートフォンアプリやデスクトップアプリをブラウザアプリと同じメンタルモデルで構築できるようになりました。

宣言的UIの発達も、UI構築コードの複雑さの低減に役に立っています。

しかし、そこに留まっていていいのでしょうか。

幹線道路が整備されたということは、様々な場所へと足を伸ばせるようになったということです。それは幹線道路だけを通っても生活できることも確かに意味しているでしょうが、見方を変えれば、今まで自分の力では行けなかったような未踏の場所へと足を向ける可能性が出てきたとも考えられるのです。

そこで、敢えて「貧弱UI」について考えてみるのが楽しいのではないでしょうか。プログラマにとって一番身近なのはCLIでしょう。CLIのアプリについて、考え直してみるといいかもしれません。そしてM5Stackシリーズは貧弱UIの宝庫です（誉めてます）。限られたリソースで、どのように「できる限り」便利なUIを作るか、楽しい課題と捉えられると思います。

そんな考えは実は全部後付けなのですが、M5 Atom Matrixを使って、日本語を入力するデバイスを作ってみました。ボタンは事実上一個しかありません。表示は5x5のRGBのLEDです（今回は白しか使ってませんが）。 5x5でカタカナといくつかの記号を表示します。 5x5でのカタカナの表示はいくつかのフォントを参考にしましたが、5x5に納めるために、いくつかの文字は微調整をしたり、自分で作ったりしました。

ボタンは「通常の押し方」と「長押し」と「二回連続押し」の三種類です。三種類しかないと、それぞれの押し方の効果に一貫性を持たせるのに難しさを感じました。

また、貧弱なUIでも、「操作はしたけどフィードバックは一切ない」ということはないように注意しました。「httpにアクセスしてレスポンス待ち」の状態には専用の表示を用意し、「裏側で状態は変わったけど表示は変更がない」場合は点滅させることで、操作が正しくされていることをユーザにフィードバックします。

データを保存するためにサーバーが必要だったので、サクっと作るためにgoogle app scriptを使いました。

「ArduinoのStringのマルチバイト文字の扱いがよくわからないので、即席のDSLを使って代用した」「google app scriptでtext/plainを返そうとするとリダイレクトが発生し、Arduinoのライブラリでリダイレクトに対処するのが面倒だったので、text/htmlを返し、ほしい情報が出現する文字数を数えて切り出した」など、プロトタイピング特有の乱暴なプログラミングができて、とても楽しめました。

これから人類が宇宙に進出するとなると、極限状況に船出するデバイスは大量のリソースを持てない可能性があります。また、デバイス間やデバイスと地球間の通信は、非常に貧弱になると予測されます。そのようなとき、かつてのコンピュータリソースが貧弱だった時代のノウハウやプロトコルが再び注目される日がくるかもしれません。そんなとき、貧弱UIの経験が活きる可能性もあるでしょう。