🔥

【個人企画】ミニアプリ複数同時開発チャレンジ【二つの画像生成系アプリ】

2024/07/30に公開

はじめに

前々回の

https://zenn.dev/syab_syab/articles/53a3c8073117ab

と前回の

https://zenn.dev/syab_syab/articles/de54a8cb3463e4

に引き続き
極めてシンプルな機能しか持たない簡単に作れそうなWebアプリを同時開発してしまおうという企画の第三弾です。
今回は入力した文を画像化することができる物を二つ作りました。
以前作ったこのアプリ

https://zenn.dev/syab_syab/articles/7395e4270266db

をもっと簡単にした感じです。

https://www.youtube.com/watch?v=LEDJQIrOEIA

二つの画像生成系アプリ

今回の二つのWebアプリは双子のようなもので、操作方法は

  • 入力フォームに文章を入力
  • プレビューボタンをクリックして画像の元となるプレビューを作成
  • 画像にするをクリックして画像を生成する
  • 生成された画像は直接保存するか画像ダウンロードボタンをクリックして保存する

という感じで全く同じです。

違いは普通の文章か箇条書きに対応しているかどうかだけです。

文章画像化

文章画像化


改行も反映します。

生成される画像はこんな感じ↓↓↓

箇条書き画像化

箇条書き画像化

改行をすると箇条書きになります。

生成される画像はこんな感じ↓↓↓

使用した技術

React.js

styled-components

html2canvas

画像化をするためにhtml2canvasを使用しました。
Event Schedule Image Generatorで使用して使い慣れていたので楽に実装できました。

まとめ

今回はサイトのタイトルが思い浮かばなかったので、何のひねりもなくそのままの名前をつけました。
XなどのSNSで字数制限に引っかかるせいでスマホなどでメモ帳に入力した文をスクショで貼っている投稿を度々見かけることがあったので、
そういう煩雑な作業をもうちょっと簡単に出来そうだなと思いアイディアが浮かんでそれを形にしました。
機能を付け足したりそもそも二つの機能を一つのWebアプリにまとめて箇条書きか否かを選択できる感じにしようとも考えましたが、デザインも機能も似通った双子のようなサイトを一度作ってみたかったので今回の企画で実現させました。

Discussion