2020-03-14に更新

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

作ったサービス

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>

苦労したこと

画像のキャッシュ

ヘッダでキャッシュコントロールしたことがなかったので若干はまりました。

OGPのトリミング問題

twitterやFacebookでOGPの上下左右がトリミングされる問題があり、
Jimpなどで余白の拡張をしようと思ったのですが、時間がなかったこともあり、
React側でマージンをとってスクリーンショットを撮る際に余白ができるように修正しました。

できなかったこと

チーム・選手画像のアップロード

OGPの生成で手一杯だったので、base64化してDBに格納するところまで考えられませんでした。後々追加する予定。

ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発5年目。普段はアプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

関連記事

コメント