Next.jsでエヴァ風タイトル画像ジェネレーターを作る

某アニメの「序」「破」「Q」を見たら、タイトル風の背景が欲しくなったので、頑張ってバーチャル背景ジェネレーター作ろうかと思う。
作っていく過程をメモしていく。

使用技術

• Next.js
• TypeScript
• Tailwind CSS

なおReactは初めて触る。

プロジェクト作成

npx create-next-app virtual-background-generator

できたー

TypeScript セットアップ

touch tsconfig.json
yarn add --dev typescript @types/react @types/node
yarn dev -- 立ち上げるとtsconfigが設定される

pages/_app.tsx
pages/index.tsx
pages/api/hello.tsx
に変更する

Tailwind CSS のセットアップ

yarn add tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js を変更する

 module.exports = {
- purge: [],
+ purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

globals.cssも変更する

@tailwind base;
@tailwind components;
@tailwind utilities;

Canvasを使ってみる

とりあえず、こんな感じでこれをpngにする感じかな。
いったん、文字はべた書き

使った感想

• 縦書きがしんどい

HTMLとCSSで頑張る

これかも

感想

• 縦＋横にしたときの文字の位置を合わせるのは楽
  　　→　親要素 aline-items: flex-end;と子要素 line-height: nomal;でうまいこと下揃えになった

庵野監督のプロフェッショナル 仕事の流儀見た...
「シン」を見た後にみてよかった。
命をかけて作品を作ってたからこそ、心に響く作品やったんやなー。

入力値をプレビューに反映できるようにする

おお、こんな感じか。
<input value={hoge} />って書くときにintellisenseが効くのがありがたい。

横書き部分もこんな感じか

ちょっといろいろ忙しくなってきたので一旦休止