(改良版)パワプロ風画面ジェネレータを作ってみた

React Puppeteer OGP Node.js Netlify web1week

作ったサービス

https://pawapro-gen.netlify.com/

一旦書いたボード

web1week - パワプロ風画面ジェネレータを作ってみた

時間的に残りの機能間に合わないかと思っていたので、最低限動く機能で出したのですが、結論から言うと間に合いました。

インライン編集機能

当初はフォームとプレビュー機能を分けて作っていたのですが、
ほとんど全てインラインで編集できるように変更しました。

twitterシェア機能

OGPサーバの構築

以前slack流量計を作った際に、web表彰のスクリーンショットを撮っていたので、OGP作成にはそれほど抵抗はありませんでした。

あとはだらさんの作成されてるOGPサーバを参考にさせていただきました。

OGPサーバの構築に使った技術

NodeJS
Express
TypeScript
puppeteer
VPS
docker-compose

ロジック

ジェネレータからDBにデータを登録する
登録されたデータをもとにpuppeteerでスクリーンショットを撮る
DBに画像を格納する
OGPのサーバ問い合わせにはDBに保存してある画像を使用する
- OGPサーバに直接アクセスさせると負荷が集中してサーバが落ちるため

DB登録処理は既存のAPサーバに追加

OGPサーバは別コンテナ

twitter投稿

アプリ起動時componentDidMountのタイミングでUUIDを生成するようにしました。
react-shareというライブラリを使い、
beforeOnClickメソッドでDBへの登録を行っています。
ローディング画面も作りました(同時にバグ生成)。

<TwitterShareButton
            url={'https://pawapro-gen.netlify.com/view/'+store.getState().uuid}
            hashtags={['パワプロ風画面ジェネレータで作ってみた']}
            beforeOnClick={async()=>{
              store.dispatch(switchLoading(true));
              let isSuccess = await postData();
              store.dispatch(switchLoading(false));
              if(!isSuccess){
                alert('データの保存に失敗しました。時間を空けるか、リロードして再度作成してください。')
                return new Error();
              }else{
                return Promise.resolve();
              }

            }}
          >
            保存してシェアする！
          </TwitterShareButton>