2020-04-23に投稿

自分だけのオリジナル紙面を作れる「スポーツ新聞メーカー」をリリースしました。

サービスURL

何ができるか

  • 新聞名
  • 見出し
  • 試合のスコア(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でシェア機能つけたら面白いかもしれません。
あとは試合スコアのチーム名を長くすると表示が乱れるのは課題です。
幅を固定してフォントサイズを文字長で反比例させればいいですかね。

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

ckoshien

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

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

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

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

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

関連記事

コメント