2019-10-21に投稿

ドラフト風画像作成サービス「ドラフトなう!」を作りました

EHAEyHXU0AA3c5Q.png

ドラフト風画像作成サービス「ドラフトなう!」

「ドラフトなう」とは

ド ラ フ ト 会 議 が 終 わ っ て し ま い ま し た が、
フォームに必要な項目を埋めるとドラフト会議風の画面が作れます。
本家リポビタンDのサイトは12球団からしか選べないのでオリジナル球団から選べるといいなと思って作りました。

今回はキャンバスを使って画像化までは時間がなくて実装できなかったので、
現状スクリーンショットを撮って楽しんでいただければ幸いです。

製作に関して

使った技術

  • ReactJS
  • CreateReactApp

製作期間

  • 2019/10/16(ドラフト会議前日)
    • 仮リリース
  • 2019/10/17(ドラフト会議終了後)
    • レスポンシブ対応

苦労した点

  • 仮リリースの段階では背景に作った画像を使っていたが、レスポンシブで意図した通りに拡大縮小できなかったため、スタイルで全て書き直した。
  • レスポンシブの実装をメディアクエリを使って行なったが、境界部分でUI崩れがなかなか解消できずに苦労した。
  • ブランドロゴはなかなかうまくできたと思ったが、これもレスポンシブ対応が厳しく、最終的に画像化した。

教訓

季節系のイベントサービスを作る時は事前にきちんと計画を立てましょう。
前日の朝にこれ作りたいなと思って案の定間に合いませんでした。

レスポンシブ対応がドラフト会議終了後の実装になってしまったため、
モバイルユーザがUI崩れでサイトを離れてしまった可能性がありました。

今回間に合わなかった機能

  • OGP芸
    • バックエンドサーバを用意していないので、技術的に難しいかも。
  • 画像化(Canvas描画)
  • SNSシェア機能
ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

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

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

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

コメント