昔作ったRails製のサービス「Mojicon」をSPA化してサーバー代0円で運用できるようにした

以下で作った「Mojicon」というサービス。

僕とボットしか使わないまま、ほぼ4年間運用していました。

その間ダウンロードされたアイコンは559件、その大半がボットによるもので、それ以外はほぼ僕という過疎っぷり。

※ ちなみに、一番のお気に入りは「ABFlow」というアプリのために作ったアイコンです。

この状況だとさすがにサーバー代がもったないので閉じようかと思ったのですが、僕自身がたまに使っているので、ちょっと困る……。
「自分が使いたいものを作ると、閉じたい時に閉じれない」ということを学びました。

そんな中、ふと「この程度の機能なら、サーバーサイドなしで動くように簡単に作り直せるのでは？（無料で運用できる！）」と思ったので、やってみました。

結果が、これです。
※ Chrome以外ではまともに動かないです。

Mojicon

技術的な話

フレームワークはNext.jsです。
実質1ページしかないのでNextである必要はないのですが、Lintやテスト等の設定がおまかせできて楽なので。

ホスティングはCloudflare Pagesです。
たまに「Failed: an internal error occurred」でデプロイがこけますが、タダ乗りしてるだけなので何の文句もありません。
（リトライすれば一瞬で通るし）

あとは有名所のnpmパッケージ達にお世話になりました。

• bootstrap

• copy-to-clipboard

• file-saver

• jsonschema

• jszip

• react-bootstrap-typeahead

• reactstrap

削除・変更した機能

作り直すにあたって、無駄な機能を削除しました。
とにかく保守の楽さを重視。

• ログイン
  → Firebase面倒 どうせ誰もログインしないので削除

• API
  → 僕すら使っていなかったので削除

• Font検索
  → Google Fontsで検索すればいいので削除

• 文字間隔の調整
  → Canvasにないので削除（CSSにはletter-spacingあるのに！）
  　テキスト数を無制限にしたので、配置を調整すれば同じことはできる

• YAML
  → JSONに変更

• ダウンロード履歴
  → zip内にJSONを同梱することで代替

追加した機能

文字の代わりにアイコンフォントを使いたい、と思うことがたまにあったので、
Material Iconを使えるようにしました。

こんな感じで使えます。
（savingsとcircleを組み合わせて、Corner Radiusを最大にした例）

厳密にはドメイン代がかかってるので0円ではないのですが、
それは月額100円程度で、サーバー代に比べれば全然安価なのでこれでよしとします。