人間を作ったよ！！！ #React

はじめに

クソアプリ Advent Calendar 2023 カレンダー2 の9日目の記事です。

人間

今年は人間（うんちせいぞうき）を作りました

普段ウンチを使いたいときに自分の気に入ったウンチが見つからないことが多かったので手軽に作れるようにしたいと思い、人間を作りました

作ったウンチはSVGとしてDLできるようにしているのでご自由に利用してください。

利用した技術

いつもの

next
emotion

状態管理

jotai

色のピッカー

react-color

SVGモーフィング

react-spring
flubber

作ってる途中でrecoilが保守されないらしいと聞いたのでjotaiに乗り換えてみました
jotaiは結構使いやすいのでオススメです。

こだわった点

SVGモーフィング

モーフィング
ある画像から別の画像へ、連続的に変形させる表現らしいです。
どうしてもうんちをぬるぬる変化させたかったのでモーフィングさせてみました。

モーフィングなし

モーフィングあり

モーフィングある方が可愛いですよね！

type Props = {
  unchi: () => string;
};
function SVGMorphing({ unchi }: Props) {
  const [color] = useAtom(colorAtom);
  const animationProps = useSpring({
    from: { x: 0 },
    to: {
      x: 1,
    },
    config: {
      tension: 150, // テンションを調整
      friction: 10, // 摩擦を調整
    },
    reset: true,
  });

  return (
    <svg viewBox="0.00 0.00 150.00 150.00" id="dl-svg" css={Canvas}>
      <animated.path d={animationProps.x.to(unchi)} fill={color} />
      <MayuSvg></MayuSvg>
      <EyeSvg></EyeSvg>
      <MouseSvg></MouseSvg>
      <ItemSvg></ItemSvg>
    </svg>
  );
}

SVGMorphingの呼び出し側はこんな感じ

  const [widthIndex, setWidthIndex] = useState(0);
  const [heightIndex, setHeightIndex] = useState(0);
  const [interpolators, setInterpolators] = useState({
    unchi: () => unchi[heightIndex][widthIndex],
  });

  return (
    <div>
      <SVGMorphing unchi={interpolators.unchi}></SVGMorphing>
      (中略)
    </div>
  );

妥協したところ

本当はURLにパラメーターを渡して動的OGPを作りたかったのですが
~~パーツの位置や大きさなどを設定するのが難しくて諦めました...~~
と思ったけど時間ができたので実装しました

がvercelの無料枠だとできないみたいです

Error: The Edge Function "api/og" size is 1.07 MB and your plan size limit is 1 MB. Learn More: https://vercel.link/edge-function-size

SVG使いまくってるからこれ以上減らすところがなく...
残念ながら諦めました。石油王だったらProプランにできたのに...

ちなみにNextの機能に乗ったらかなり簡単に動的OGPに対応できるので開発体験は良かったです。

あとがき

「自分なんてうんちせいぞうきだよ～」って自虐する人は是非SVGでDLできるようになってください。