100 Pixel Art
10 かける 10の100ピクセルと、９色の絵文字のみで描けるドット絵エディターです。
100 Pixel Artyou can make pixel art only 100 pixel.
クソアプリアドベントカレンダー2021に向けて制作しました。
Calendar for クソアプリ | Advent Calendar 2021 - Qiitaクソアプリアドベントカレンダー 7回目の開催です。随分と歴史が長くなってきました。 今年も役に立たない、世の中に貢献しないアプリとかサービスを出しあって遊ぼうぜ！ 年末のお祭りに乗っかってラフに開発を楽しみましょう！ 下記レギュレーションをよくお読みの上ご参加ください。 ・クソアプリアドベントカレンダー2021のために新規で何らかの作品や機能を作成してください。 ...
どんなサービスか
絵文字の ⬜ 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ の９色の四角のみを使ってドット絵が描けるサービスになります。
10かける10で100ドットのみ9色限定で、9^100パターンのみ作れるエディターになっております。
キャンバスサイズが100ドットのみで、使える色も9色しかないというポイントがクソアプリ的制限です！
サービスの特徴
このサービスの特徴として「Finish」ボタンを押すと、編集が完了すると絵文字なのでそのままテキストとしてコピーできます。
つまり完成したらそのままTwitterでテキストとしてつぶやくことができるんです！
画像としてどこかに保存しなくていいし、そのままシェアできて便利ですね〜。。。
（あれ、、、思ったより全然クソアプリじゃないかも、、、）
技術的な話
-
React（ルーティングとかないけどNext.jsを使うだけ使っています）
-
Cloudflare Pages Cloudflare Pagesめちゃめちゃ便利なのでみんな使うと良いと思います！Netlifyがアジアリージョンなくなって悲しんでいた方におすすめです。
-
Cloudflare Pages — Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. Developer-focused with effortless Git integration. Advanced collaboration built-in with unlimited seats. Unmatched performance on Cloudflare's edge network. Dynamic functionality through integration with Cloudflare Workers. Install Cloudflare Pages Where do you want to install Cloudflare Pages?
苦労したポイント
表示はCanvasを使わずにDomでやっています。
ドットをクリックして絵文字が切り替わるのはonClickで設定するだけなのですが、ドラッグしてもちゃんと絵文字が反映されるようにするのがちょっと工夫が必要でした。
PCの場合：マウスでの動作について
- キャンバス上でクリックダウンされたらフラグをON
- マウスがクリックアップされたらフラグをOFF
- キャンバスからマウスカーソルが外に出たらOFF
- キャンバス上でフラグがONの状態でドラッグされていたら文字を変える という形で実装できました。
スマホの場合：タッチでの動作について
基本のタップはPCと同じ形にしておりますが、タッチしながらの移動（タッチムーブ）は同じ実装では動きません。
タッチムーブではイベントがタッチし始めのdomから発火してしまうので、
- タッチムーブで別な要素への移動を検知
- 移動後の座標を確認
- キャンバス全体からの相対座標で10*10の中のどこにいるかをチェック
- その座標の位置の文字を変える というちょっとした計算を追加して実装しました。
（・・・素のJSで作ってしまったのでライブラリ探してもよかったな！笑）
Androidでは四角のカラー絵文字が無い
これは困ったのでNoto Color Emojiを入れました。
※ Apache 2.0ライセンス です。
100 Pixel Artyou can make pixel art only 100 pixel.