「簡易アイコンエディタ」を作りました【Bubble製】

「簡易アイコンエディタ」を作りました【Bubble製】

簡易アイコンエディタについて

SNSサービスなどで仮のアイコンを用意したい時のため使える(かもしれない)、チープなアイコンエディタを作りました。

プログラミングしないでアプリが作れちゃうと話題のノーコード開発ツール「Bubble」で作りました。
当然ながら画像ダウンロードも可能です。

Windows、Mac対応。スマホは保存がうまくいかなかったりするようです。

文字、背景色、アイコンの簡素な組み合わせしかできませんが、それでもこんなものが作れます。

以下からさわれますので、よかったら試してみてください。

動作サンプル

↓は実際にさわれます。実際の画面を埋め込んでいます。

大きな画面で触りたい方は https://iconeditor.bubbleapps.io/でどうぞ。

制作裏話(Bubble利用者向け)

Bubble開発の実質一作目なこともあり、見ての通りあまり複雑なことはしていません。

1)色選択および起動時にランダムで色をセットする部分は、Random Color Generatorで生成した色を、Air Color Pickerにセットする形で実装。

2)文字数の反映・カウントにはInstant Textプラグインを使いました。

3)画像の書き出しにはElement To PNGを使っています。
軽くしか試してませんが、Element To Imageでもほぼ同じ動きをしました。

4)アイコンの選択はIconifyプラグインと標準のSearchBoxで実現しました。
DBにデータをセットしてRepeating Groupを使って一覧表示するのが正統派と思いましたが、それだけのためにデータをセットするのが面倒だったので、Iconifyのサイト内のJSONを整形してSearchBoxのStaticパラメータとしてセットしました。

負荷も軽く、悪く無い形にまとまったと思います。

全て想定通りにできたら良かったのですが、Element To PNG(Image)で画像書き出しするとIconifyの色情報が飛んで黒になってしまう問題が発生。
回避策がわからなかったのでアイコンは黒限定といたしました。

Bubble開発、いろいろ試していきたいです。