はじめに

前々回の

と前回の

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

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

二つの画像生成系アプリ

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

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

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

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

文章画像化

文章画像化

改行も反映します。

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

箇条書き画像化

箇条書き画像化

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

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

使用した技術

React.js

styled-components

html2canvas

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

まとめ

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