我ながらバグがなければかなりイケてるツールな気がします。（バグありまくりなんですけど…）

今回はこのIRON BEADS EDITOR(略してIBE）の制作秘話？を備忘録としてnoteに記載します。

いつものように成果物ですが、こちらにあります。

恒例のことですが、免責事項とご注意を

きっかけ

結論から言うと「息子からwebにないデータの作成を求められたから」という感じですが、お暇な方は以下が時系列です。（読み飛ばしてもらってOKです。）

8月に入ってすぐのこと夏休み中の4歳の息子との会話です。

よかった…今回はパパの担当じゃなくなった…

数日の間、ハート以外にも色々なサイトのデータを参考にしながら順調に仮面ライダーやウルトラマン、ポケモンなどの作品を作っていく息子・娘 。(もちろんパパも手伝ってます)

と、思ったところ数日後

で、私がドット打ちしてたのって約15年以上前でwindowsでEDGEというのを使ってました。 Photoshopでもやっていたこともあるんですが、レタッチツールはドット打ちに向かないんですよね。

で、こんな思考になります。

とは言え、最初は普通に作っていた…

ありがたいことに、先人がSNSなどで色々な作品を公開してくれているので、それを参考にできます。
(アイロンビーズをほぼ新品の状態で譲ってくれたママ友の息子さんが10歳を超えているので流行したのはかなり前のことなのでしょう)
今までの作り方は

こっち側が勝手にやってることなんですが、これが老眼の始まりつつありストレートネック持ちのおっさんには滅茶苦茶しんどいのです。
特に最後の「ここは横に○個、縦に○個」と数える部分です。

尚、効率的なやり方は

確かに効率的ですが、毎度毎度原寸大でのカラー印刷は(経済的にも)しんどいのです。
不満があるなら自分で作ればいいということでPCに向かいます。

ツールも作りながらデータも作る

去年の夏も息子きっかけでお絵描きツールを作りましたが、間違えはいけないのは今回は「図案を作ることが優先でツールを作るのは次点」です。

これを間違うと手段と目的が違ってきますが、自分の頭の試算では自分のみで使うプロトタイプなら1時間ぐらいで開発できそうだったのでやってみたら、最低限のは40分ぐらいでできました。

おかげさまで、息子が望んでいたデータも作れたのですが…問題が…

ダイソーのテンプレートが32x32ではなく30x30！！！

プロトタイプに機能をどんどん追加したくなる…

32x32で作っていた複数のデータを30x30に修正していきます。

この時はpngにエクスポートする機能しかつけていないので元のデータを見ながら「この作業ほぼさっきと同じことやってるわ…人生の無駄な時間の1つだな…くっそくっそ…」という感情が湧いてきます。

自分で作っておいて何ですが、以下の機能を追加したくなりました。

いや、本当なら塗りつぶし機能とか入れたいんですけどね…(フラグ1)
そうなると直線モードとか入れたくなるし…(フラグ2)

でもドット打ちって「マウスをポチポチ打ってるのが楽しい」って感情があるんですよね。

(発想の)神が降りてくる

データの修正作業を続けているときにふと思いました。

「アイロンビーズって左右対称のもの多いよな…塗りつぶし機能より、左右対称のを1回で打てる機能を入れればいいんじゃね？」

はい、ということで、10分ぐらいで実装しました。
完全に脳汁ドバドバのクリエーターズハイの状態です。

使う人と作る人のレイテンシーが0の状態かつ、そこまで難しくない実装なので嫌いなJSにも耐えれます。

神がいなくなり、裸の王様状態に…

まぁ、過去の経験でもありますが、クリエーターズハイなんて他人には全く理解できない状態なんです。
まして、32x32のデータを作った時に「同じ様なパパやママがいるかも？」と思ってX(Twitter)で図案を載せちゃったんですよね。

で、30x30のデータをTwitterに上げ直すダサさです。

本当、他の人というか絵本作家のアンマサコ先生も見てる状態で図案を上げてしまったので裸の王様みたいな状態でした。

赤モヒカン覚悟を決める

で、ここまで作ったら自分専用じゃなく「機能をある程度追加して公開しよう」と思いました。
ということで自分のツールのダメ出し+あった方がよい機能の洗い出します。

おお、くっそ多いぞ！
このツールの開発自体に3時間費やしてるのに(データ作ったりもしてるけど)めっちゃタスクあるじゃん。

経験上これを全部突っ込んだらUIが崩壊するのも見えています。(よく日本独自のアプリにあるガラパゴス状態)

ここから本当にアイロンビーズに必要な機能を考えると、クリップボードとかいらないかも…ということで以下の機能は削ります。

尚、ドット絵エディタを作るつもりはないので「画像の回転」とかは入れません。
一瞬だけwasmのmagic-wasmとか入れてgifとかで吐き出せる様にする案などがよぎりましたが、そういう開発者の技術的なエゴはいらない時間です。

Total 3.5日でできた

作り始めてから、東京を離れて実家に2週間半以上帰郷していた&gitにソースを上げていなかったので開発に間が空きましたが、開発時間は3.5日ほどで作れました。(バグありますが)

そのうち0.5日がUIの調整、ダークモード対応、ショートカット、多言語化などのUX対応という感じで、クオリティをアップするのに力を使いました。
ということで、できたのが最初にあるものです。

先月、勢いあまってCSS+HTMLだけで仮面ライダー1号の変身ベルトのタイフーンを作ったんですが、会社メンバーに対して「ネタにしても実践的じゃないなものを作って発表してしまった…」という後ろめたさがあったので、今回のでちょっと懺悔できたかなと。（勝手に私が思ってるだけですけど）

最後に…

IBEの開発でこだわったのは、作り手ならではのUXです。(UIじゃなくてね)

今回ショートカットキーを全て左手のみでできるようにしています。 これは、データを作ってる際、基本的に右手はずっとマウスから手を離したくないからです。

特に、ミラーモード(左右対称モード)のショートカットキーは「B」にしているのですが、キーボードの1-4に指を当てた時に親指の位置が「B」辺りに来るので、「B」にしました。

もちろん、本当のUXのことを考えるのであれば左手でマウスを持つ人の事を考えてショートカットキーを編集できたりした方がいいのでしょうが、飽き性な私では実装に対する時間を捻出できませんでした。
(尚、私は左利きです)

また、個人的に一番こだわったのは、隠しコマンドのとして通称vimモードというものです。
これは直線モードで「起点がある状態で12個上に線を引きたいな」というのをキーボードで「12uu」と押すと上に線が書ける。
左に7個なら「7ll」と入力すればOKという感じです。

また、12行目から13行目に1つ行を追加したい時に、12行目の12というところをクリックして「aa」と押すと追加「dd」と押すと削除されます。

この機能はご想像の通り今回の開発でSCSSもnode、yarn、TSもVSCなども使わず、vimとブラウザのみで開発したために思いついた機能です。

（尚、最終的にcssが冗長になったのでSCSS化はしましたが、この程度のツール+3日程度の開発ならvimでも十分でした。）

IBEを作るのにIDEを使わないという意地もあったのかもしれません。

今後の予定としてはバグ潰しはもちろん、新規作成が一番上にあるのがダサいのでElectronなどでちゃんとしたアプリ化を考えていたりします。 (いつになることやら)

まぁ、この辺りの技術的な気づきなどに関してはいつもようにQiitaの方に記述する予定です。

では、みなさんもよいアイロンビーズライフをお送りください。