璃奈ちゃんボード～廉価版～の作り方（３）

今日は「虹ヶ咲学園スクールアイドル同好会 5th Live!」のDAY1，そして#毎月10日は天使天才天王寺の日ということで，ながらく更新できてなかった「璃奈ちゃんボード～廉価版～の作り方」の記事を頑張って更新します！

今回は現地にいけないので，#璃奈ちゃんボード学会のオンライン活動として...

本当は今回の5th前に記事を完成させたかったのですが，これからファンミもありますし，今回のライブで璃奈ちゃんボード作成に興味を持った方があれば，参考にしていただければ幸いです．

なお，必要な材料や道具は「璃奈ちゃんボード～廉価版～の作り方（１）」を，LEDパネルに璃奈ちゃんボードの表情を表示させる」処理は，「璃奈ちゃんボード～廉価版～の作り方（２）」をご覧ください．

璃奈ちゃんボードの作成手順～基本編～

璃奈ちゃんボードの基本的な作成手順は，大きく分けて以下のステップで行います．

マイコン（ESP32）のはんだ付け
Arudinoの開発環境IDEのインストール
LEDパネルの制御プログラムの設定
WiFi経由でボードを制御する機能の設定
璃奈ちゃんボードコントローラーの動作確認
ボードの外枠の作成
ボードの表情の追加（オプション）

前回の記事では，璃奈ちゃんボードのLED表示部分が動作する，STEP３まで解説しましたので，今回はSTEP4から解説を続けます．
なお，必要な材料や道具はこちの記事をご覧ください．

STEP.4WiFi経由でボードを制御する機能の設定

この作業では，璃奈ちゃんボードをWiFi経由でスマホ，PCなどから制御できるようにします．
仕組みとしては，

マイコン（FSP32）をWiFiに接続し「同じWiFiに接続している機器からのみアクセス可能なサーバー」を実行し，
同じWiFiに接続したスマホ，タブレット，PC等から「璃奈ちゃんボードコントローラー（Webページとして実装）」を通して制御する

というプログラムを用意しています．

利用するWiFiに制限はありませんが，外出先での使用を想定して，以下では「スマホのテザリング機能」iphoneでは「インターネット共有」）を利用する場合で説明します．（別のWiFiを使用する場合も手順は同じなので，必要な方は，適宜，読み替えてください）

1)WiFi設定の確認
WiFi接続に使用する「スマホのテザリング（iphoneでは「インターネット共有」）」の設定を確認し，
・SSID（iPhoneでは「ネットワーク名」）
・パスワード
をメモしておく．

2)コントローラー対応の璃奈ちゃんボード用プログラム
こちらで公開している璃奈ちゃんボード用プログラム（Arudinoスケッチ）をダウンロードする．

3)プログラムのWiFi設定の変更

2)でダウンロードしたプログラムをArduinoIDEで開き，4-5行目あたりの「//WiFi設定」の部分にある
const char* ssid = "XXXXX";
const char* password = "YYYYY";
の，XXXXX，YYYYYの部分を，それぞれを，
・XXXXX→1)で調べたSSID
・YYYYY→1）で調べたWiFiのパスワード
に書き換える．

4)ArduinoIDEの「シリアルモニタ」の設定
プログラムの動作確認をするために，PCにESP32(璃奈ちゃんボード用のマイコン)をUSBケーブルで接続し，
「ツール＞シリアルポート」で該当するシリアルポートを選択した上で，
「ツール＞シリアルモニタ」を実行する．

すると，下記のようなウィンドウが表示される（下図で表示されている内容は，後で表示されるメッセージなので，現時点では無視してください）ので，
①通信速度の欄で「115200bps」を選択する．

図１．ArduinoIDEの「シリアルモニタ」の表示例

5)プログラムのマイコンへの書き込み，動作確認
3)でWiFi設定を変更した璃奈ちゃんボード用プログラムを，
・4)の手順で「シリアルモニタを開いた状態」，かつ
・1)で用意した「スマホのテザリングをON」にした状態
で，ArudinoIDEの「スケッチ＞マイコンボードに書き込む」を実行（→ボタンでも同じ）して，マイコンにプログラムを書き込む．
※書き込み方法の詳細は，こちらの記事の「STEP3：LEDパネルの制御プログラムの設定」を参照してください．

プログラムの書き込みが完了すると，シリアルモニタに図1のような内容が表示されます．
・②には設定したSSIDが表示され，
・最終的に③のように「WiFi connected.」と表示されたら，
接続成功です．
このとき，表示されている「IP address」（例：192.168.43.188）は，後ほど必要となりますので，メモしておいてください．
（このIP addressは，マイコンやWiFi設定ごとに異なります．）

「WiFi connected.」が表示されず，「setLED x」（xは数字）が次々と表示される
場合は，WiFi接続に失敗です．
マイコン（ESP32）についている「RESET」というボタンを押すと，もう一度，接続が開始されるので，もう一度試してください．
何度か，RESETを押してもうまく行かないときは，下記の「マイコンのWiFi接続がうまく行かないときは」の方法を試してください．

なお，この接続の処理を行っている間，璃奈ちゃんボードのLEDパネル上には，下記の動画のような「電波マーク」が表示され，
・接続が成功した場合
　→璃奈ちゃんのドット絵が表示された状態でボードの表示が止まる
・接続が失敗した場合
　→璃奈ちゃんボードの表示が一定時間で順番に変る
となります．

コージ@koji_kk9
ここしばらく作業していた、璃奈ちゃんボードのソフトウェアのバージョンアップ❗️ がようやくひと段落…… ・起動時のWiFiコネクト状況の表示・コントローラーの汎用化・コントローラー経由での新規パターン送信を実装📶 そろそろボ… https://t.co/ySOO8nxWCR
2022年02月19日 23:37

マイコンのWiFi接続がうまく行かないときは

下記の５）の手順でWiFi接続がうまく行かないときは，
・スマホのテザリング設定を「セキュリティ無し（パスワード無し）」で接続できる
ようにした上で，3）のプログラム設定を下記のように修正して試してください．

「const char* password = "YYYYY";」の行頭に「//」を追加してコメントアウトする
125行目あたりにある
　WiFi.begin(ssid, password);
　//WiFi.begin(ssid);
の部分の「//」を
　// WiFi.begin(ssid, password);
　WiFi.begin(ssid);
のように変更する
これらを変更したうえで，4),5)の手順をやり直す．

STEP.5璃奈ちゃんボードコントローラーの動作確認

WiFi経由でボードを制御する機能の設定が無事に完了したら，いよいよ，璃奈ちゃんボードコントローラーでの制御を行います．
ここでは「公開用に準備した璃奈ちゃんボードコントローラー」のWebページを使って制御します．

SETP4のマイコンへのWiFi接続が成功したら「テザリングに使用ているスマホ」（または，同じテザリングに接続しているPCやタブレット）のWebブラウザで

璃奈ちゃんボード☆コントローラー（設定用画面）http://koji99.html.xdomain.jp/

のページを開いてください．
（※使用する端末や開き方によっては上記のURLが，http://...からhttps://...に勝手に書き換えらる場合があるようです．その場合は，http://...に書き換えてください）

すると図2のような起動画面が表示されるので，
「璃奈ちゃんボード（EPS32）のアドレス(http://...)」の欄を
「5)で調べたIPアドレス」に変更して「OK」
を押してください．

図２．璃奈ちゃんボードコントローラー「起動画面」

すると，図3のような「璃奈ちゃんボード☆コントローラー（メイン画面）」が表示されます．（このページを「ブックマーク」に追加しておくと，次回以降はブックマークから　直接開くことができます．）

図３．璃奈ちゃんボードコントローラー「メイン画面」

この画面上で，璃奈ちゃんボードの表示を制御できます．
以下，それぞれの設定の使い方です．

「モード」設定

オート(all)：すべてのパターンの表示を順番に繰り返す
オート(璃奈ちゃん)：璃奈ちゃんのドット絵＋表情のパターンのみを繰り返す
※起動時の設定では，「オート(all)」と動作の差はありませんが，後述の「追加パターン」は，「オート(璃奈ちゃん)」ではスキップされます．
手動：表情は選択したものが表示される，自動的には変わらない．

「表情」設定

クリック（タップ）で選択した表情が表示される．
オート利用時は，選択した表情を表示した後，そのまま順番に切り替わる

「色」の変更

ボードの表情を表示する際の「色」が選択したものに変る
ドット絵の色は変りません

「明るさ」設定

LEDの明るさを変更する
屋外では明るめに設定しないと，表情が見えにくいので，周りの明るさに応じて適宜，変更してください．

「追加パターン」設定

ボードに表示するでパターンをP1～P4の４パターン追加することができる．
P1～P4のボタンを押すと，それぞれの表情が追加・表示される．
ここで追加したパターンは「オート(all)」でも表示される．
表示するパターンのデータは「256文字の文字列」で表現されています．
→最初は，サンプルとしてQU4RTSの4人のドット絵のデータが入っています．
オリジナルのデータの作成方法は下記の「STEP6．璃奈ちゃんボード用のデータ作成方法」を参照してください．

STEP.6ボードの表情の追加（オプション）

璃奈ちゃんボードの表情の追加や変更をしたいときは，表示用のデータを作成することで行えます．

データ作成は，こちらのGoogleスプレッドシートを開いた後「ファイル」→「コピーを作成」で自分用のデータ入力シートを作成して行ってください．

具体的には，「マスター」というシートをコピーして，表情のパターンのところを適宜，書き換えてください（図４）．
マス目の欄に「0～9，A～O」もしくは「R」のいずれか（アルファベットは大文字）を入力すると，そのマス目の色が1-5行目の色見本に沿って変りますので，それを用いてパターンを描きます．
パターンを描き終わったら「プログラム用データ→」と書かれた部分に表示される256文字の文字列をコピーして，上記で説明した「璃奈ちゃんボード☆コントローラー」の「追加パターン」のデータ入力欄に貼り付けて利用できます．

図４．璃奈ちゃんボード「データ編集用」シート

STEP4,5で導入したプログラムに上記の方法で作成したデータを追加することで，あらかじめボードに表示するデータとして登録することも可能ですが，その方法は後日，記事にしたいと思います．
（記事を書くのが必になるかわからないので，Twitterで，お問い合わせいただければ個別にお伝えすることも可です）

STEP.7ボードの外枠の作成

ここまでは，璃奈ちゃんボードのメイン部分であ「LEDパネル」の作成方法を解説してきましたが，最後にボードの外枠を作成する方法を解説します．

璃奈ちゃんボードを作成されている方には，3Dプリンタを利用している方が多いように思われますが，ここでは，いわゆる「段ボール工作」での作成方法を紹介します．

１）材料
利用している素材は，100均で購入した「A4サイズのカードケース（固いタイプ）」と「シール用紙（こちらは普通の紙でも代用可能）」，あとは段ボールです．
あと，ボードの色にあわせた「マスキングテープ」があると諸々の調整に便利です．

図５．100均で購入した材料の例

２）作り方
ボードの外枠は「こちらにあるデータ」（PDFは印刷用，元データはPPTX）をプリンタで印刷して作ります．
どの図を使うかや，色の変更は好みに応じて行ってください．

最低限，用意するのは下記のパーツです（図６）．

①段ボールに印刷した紙を貼って，切り抜いたもの（１～３，４枚）
カードケース（2枚の透明シートで挟む形になているのを）を2枚それぞれに分離したもの
- ②そのうち，1枚には，ボードを印刷した紙を貼る
- ③もう1枚は，そのまま利用する

図６．段ボールとクリアケースで作成した基本パーツ

基本的な構成としては，

LEDパネルの上に，①のカードケースにボードの枠を印刷した紙を貼ったもの（最終的には枠にあわせて外側をカットする）を図７のように重ねる

と，LEDの基盤部分が隠れて「ボードの表示面」ができます．

図７．ボードの表示面

ただ，このままでは，LEDの丸い形が目立って表情が少しぼやけて見えるので，

LEDパネル
③カードケースの透明のシートそのまま
①段ボールで作ったボードの枠（1-3枚）
②クリアケースにボードの枠を印刷した紙を貼ったもの
①段ボールで作ったボードの枠（装飾用）

のように間を空けて重ねることで，LEDの光が適度にぼやけて，表情が自然になります（図８）．
この差は，LEDドット絵を表示した際に特に顕著に出ます

図８．間にはさむ段ボールなし（左）とあり（右）の光り方の比較

この際，「３で挟む段ボール枚数」は，実際の光り方の具合を見ながら適宜，調整してください．
重ねる枚数が決まったら，重ねた状態で両面テープや糊，などで見た目がキレイになるように固定すればボード部分は完成です！
たとえば，段ボールの側面をマスキングテープで隠すと見た目がよくなります．

横の耳当て部分についても，段ボールを重ねるなどして，適宜，作成して下さい．
細かなところは，作りながら調整となりますが，マスキングテープを使うと段ボールの断面などを上手く隠すことができて便利です．

おわりに

大変時間がかかってしまいましたが，これで「璃奈ちゃんボード～廉価版～の作り方」の記事はひと段落です．

細かなところを含めると，まだまだ書きたい内容はあるのですが，それはまたの機会とさせていただきます．

このような記事をまとめようと思ったきっかけは，自分自身が「璃奈ちゃんボード」の作成がとっても楽しかったことに加えて，「自分も作ってみたい！」と言われる方とのツナガリがあってのことです．

実際に，作り方をお伝えして，璃奈ちゃんボードを作成された方が何人かおられ，まさに「璃奈ちゃんボードを通したツナガリ」が広がったことが，本当にうれしかったので，そのツナガリをもっと大きな「輪」にしたいと思って，この記事をまとめました．

今回紹介した作成方法は，比較的，低予算で，特別な機器がなくとも行えることが特徴です．

もし，関心をお持ちの方があれば，ぜひ，「ご自身のオリジナルの璃奈ちゃんボード」の作成の参考にしていただけますと幸いです．

ライブ会場に行くと，それぞれ工夫を凝らして作成された璃奈ちゃんボードをお持ちの方がたくさんおられます．
自分も，さらなる改良を加えたバージョンの作成を続けつつ，璃奈ちゃんボードの作成者の皆さまとの交流も深めたいと思っていますので，よろしくお願いいたします．

璃奈ちゃんボードの完成例（QU4RTZファンミ1st時作成）

璃奈ちゃんボードの完成例（虹が先4thライブ時作成※）

※虹が先4thライブ時作成版は，今回の解説記事の方法に加えて，ドットをクリアに表示するための部品（3Dプリンタで作成）を利用しています．