見出し画像

アイロンビーズ作家のアイロンビーズ作家によるアイロンビーズ作家のためのツールを作りました

kurokky

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

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

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

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

※サーバーサイドで処理を一切していないですしGAなども使っていないので使用者のデータがどこかに流れるみたいなことはありません。
※ツールを使用中に、データが壊れたなど責任は負いかねます。
※このツールで作ったものはモラルを守ってください。
※ショートカットキーについてはツール右上の「？」を参照にしてください。

https://bu-kurokky.github.io/IBE/

きっかけ

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

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

息子「凛ちゃん(お友だち)の誕生日にハートをあげたいの」
モヒカン「(マセてんなぁ…)じゃぁ、折り紙で作ろうか？」
息子「違う、ちゃんとカッコいいのいいの！」
モヒカン「ハートのカッコいいのって何？」
息子「(自分の)好きな緑(色)とか青(色)があるのを作りたい」
モヒカン「(男3兄弟で育った俺にハートという文化はないから)一度ママに相談してみようか」
息子「ママーハート作りたいー」
妻「じゃぁ、(以前にママ友からもらった)アイロンビーズで作ってみれば？」
息子「(何か分からないが)うん、それにする！」

「赤モヒカンパパの夏休みの宿題」序章より

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

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

と、思ったところ数日後

息子「パパ、ハートのやつでおおとろやまの作りたい…」
モヒカン「お、おぅ」(流石に「どすこいすしずもう」のデータはなさそうだからドット打ちしないといけないかも…)

「赤モヒカンパパの夏休みの宿題」予感より

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

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

うーん、スマホで他の人の作品の拡大しながら作るのちょっと面倒だ(後述)
↓
スマホ用のアプリはありそうだけど、Macで作業したいよなぁ…
↓
でもMac用って結局は有料だったりドット打ちのはありそうだけど…
↓
悩んでるぐらいならアイロンビーズに特化したのをサクっと作ってみよう

「赤モヒカンパパの夏休みの宿題」なければ作ればいいより

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

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

1. スマホで「作りたいキャラクター アイロンビーズ」で検索
2. PDFや画像で図案があればそれを使用、なければ画像検索
3. その画像を拡大
4.「ここは横に○個、縦に○個」とか呟きながらトレースしていく

「赤モヒカンパパの夏休みの宿題」目も首も死ぬより

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

尚、効率的なやり方は

図案を原寸大でカラーで印刷
上記の紙を透明プレートの下に
あとはそれに従い並べていく

「赤モヒカンパパの夏休みの宿題」プレートが透明な理由を考えよより

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

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

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

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

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

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

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

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

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

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

- データを保存して後から編集したい
- データを作り終わった後、上下左右の余ってる部分を削除したい

「赤モヒカンパパの夏休みの宿題」このツール誰が作ってんだ？より

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

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

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

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

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

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

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

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

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

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

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

赤モヒカン覚悟を決める

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

- 前述したフラグ1の回収
- フラグ2も回収
- Undo/Redoがほしい
- 拡大、縮小
- 左右反転(ビーズのドットがつぶれすぎない面を表にしたいため図案を左右反転させる)
- 色の一括置換
- 背景色の追加
- トレース用の参考画像を背面に差し込む
- 上記の位置、拡大縮小
- 上下左右を一度に切り抜き
- クリップボード(コピー、カット、ペースト)対応
- ショートカットキー対応
- ダークモード対応
- 多言語化
- ハート型、星形など四角以外のテンプレート対応
- 4x4で作ったのを8x8とか倍や縮小できる機能

「赤モヒカンパパの夏休みの宿題」タスクオーバーより

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

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

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

- 上下左右を一度に切り抜き
- クリップボード(コピー、カット、ペースト)対応
- 多言語化
- ハート型、星形など四角以外のテンプレート対応
- 4x4で作ったのを8x8とか倍や縮小できる機能

「赤モヒカンパパの夏休みの宿題」俺はドット絵ツールを作っているんじゃないより

尚、ドット絵エディタを作るつもりはないので「画像の回転」とかは入れません。
一瞬だけ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の方に記述する予定です。

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

サポートしていただいたら娘・息子に何かプレゼントしようと思います！ 多分、ミルクorトミカになると思います。 面倒な方は、LINEスタンプを購入していただいても大丈夫です。 https://store.line.me/stickershop/author/261022/ja