めっちゃはやくちで語りたいことを投稿できるサービスを作りました

はじめに

誰かにめっちゃはやくちで語りたい話題ってありませんか？
私はあります。
でも語っちゃうと後悔します。
相手にこんな顔😅されちゃいますしね。

なので匿名でめっちゃはやくちでしゃべりたいことを投稿できるサービスを作りました。

🤓めっちゃはやくちでしゃべりたい
https://hayakuchi.vercel.app/

使い方

投稿ボタンから投稿するだけです。

https://twitter.com/cryptooooon/status/1665240179458580487

自分や他の人が投稿したはやくちを共有できます。

https://twitter.com/cryptooooon/status/1665678926792777730

使用技術・サービス

はやくちのアニメーションはreact-type-animationというライブラリを使用しています。

以下のようにコンポーネントを呼び出すだけで使用でき、sequenseで細かくアニメーションを調整できます。

import { TypeAnimation } from 'react-type-animation';

const ExampleComponent = () => {
  return (
    <TypeAnimation
      sequence={[
        'One', // Types 'One'
        1000, // Waits 1s
        'Two', // Deletes 'One' and types 'Two'
        2000, // Waits 2s
        'Two Three', // Types 'Three' without deleting 'Two'
        () => {
          console.log('Sequence completed'); // Place optional callbacks anywhere in the array
        }
      ]}
      wrapper="span"
      cursor={true}
      repeat={Infinity}
      style={{ fontSize: '2em', display: 'inline-block' }}
    />
  );
};

動的OGPはfigmaでデザインを作ってvercel/ogで実装しました。vercel/ogはOGPをJSXを使って生成できるので使い勝手が良かったです。デプロイもvercelに上げるだけなので楽ちん。

api/og

export default async function handler(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url);
    const hasTitle = searchParams.has("title");
    const title = hasTitle ? searchParams.get("title") : "My default title";

    return new ImageResponse(
      (
        <div
          style={{
            position: "relative",
            backgroundImage: //省略
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center",
            backgroundSize: "100% 100%",
            height: "100%",
            width: "100%",
            display: "flex",
            alignItems: "center",
            flexDirection: "column",
          }}
        >
          <div
            style={{
              width: 1024,
              height: 385,
              marginTop: 78,
              padding: 24,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              fontSize: 18,
            }}
          >
            {decodeURIComponent(title || "")}
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e: any) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }

backGroundImageにはfigmaで作ったデザインをsvg形式で吐き出して指定しています。

また認証の無いサービスなのでupstashでレートリミットを設けています。どのように実装しようか悩んでいた矢先、catnoseさんが投稿していた記事が目に留まり採用しました。いつもわかりやすい記事をありがとうございます。

おわりに

ぶっちゃけクソアプリなのですがちゃんと作り切って公開まで行きたかったので頑張りました。こんなシンプルなアプリでも作り切ろうとすると大変だったので触ってもらえると嬉しいです。ひとまず完成したので次のアプリ作るぞ～～～