サービスURL

• https://sports-news-maker.netlify.app

何ができるか

• 新聞名
• 見出し
• 試合のスコア(3-10イニングまで)
• 画像
• 縦見出し
• 写真のキャプション

を編集してこのようなオリジナル紙面を作れます。

特徴

入力フォームの隠蔽

パワプロ風画面ジェネレータで作ったコンポーネントを流用しています。
クリックするまで入力フォームが出ない仕様です。

縦書きの見出し

縦書きをCSSでデザインしています。
writing-modeというプロパティだけでは、英文字が横になってしまうので、text-orientationというプロパティで英文字対応を行っています。

style={{
            writingMode:'vertical-rl',
            textOrientation:'upright',
            fontSize:`calc(6vw - ${store.getState().newsTitle.length/2}px )`,
            margin:5,
            width:'1em',
            whiteSpace:'nowrap',
            fontWeight:'bold'
          }}

レスポンシブ

フォントサイズや画像の大きさ、マージンなどを画面の幅によって変わるようCSSで実装しています。

可変イニング数

3～10回までイニング数を変えることができるようになっています。

セピアフィルター

画像に新聞らしくセピアフィルターをかけています。
へぇ、CSSってこんなこともできるんだ!という新しい発見がありますね。

<img 
        style={{
          maxWidth:'85vw',
          objectFit:'cover',
          filter:'sepia(30%)',
         }}
        src={this.state.image_src}/>

振り返り

今回はほぼ一日で作ったので、またフロントで完結しています。
時間があればOGPでシェア機能つけたら面白いかもしれません。
あとは試合スコアのチーム名を長くすると表示が乱れるのは課題です。
幅を固定してフォントサイズを文字長で反比例させればいいですかね。