はじめに
LINEやX(旧Twitter)などのSNSで遊びや催し事、行事などの予定を周知・共有する際に、
スマホやパソコンで文字で打ち込むのが面倒だったり字数制限があったりして少し不便な思いをしたことが幾度かありました。
そんな折、画像化して貼りつければ字数制限が無いし文字を打ち込む手間を省けると閃いて、このアプリを作りました。
こちらからどうぞ→Event Schedule Image Generator
使い方
- まず、イベント名・場所・日付・時間の必須項目を入力し(備考は任意)
プレビューを見るのボタンをクリック(タッチ)して画像の元となるプレビューを表示させます。
- その下にある画像にするのボタンを押すと画像が生成されます。
※画像の部分はプレビューと区別がつくように影を付けてあります。生成される画像はこんな感じです(png形式で出力されます)。
- 画像を保存するには
画像にカーソルを合わせて右クリックで出てくるコンテキストメニュー等の従来の方法で保存するか
画像ダウンロードのボタンを押して保存してください。
- また、背景色・見出しの色・文字色を変更することができます。
使用した技術
React.js
PWAとして使うことができます。
html2canvas
スクショを撮って画像化できるNode.jsのライブラリです。
まとめ
以前作ったアプリを別の技術でリメイクする行為は、何となくゲームソフトの別のハードへの移植みたいな感じでやれて楽しかったです。
どれもスマホでアプリのように使えたら便利だろうなと思っていたので、PWA化が楽に出来るReact.jsを使いました。
次回はReact.jsで一番最初に作ったWebアプリを紹介します。
