ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。プログラム&ロボット大好きなポンコツが日々の記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

ボウリングのスコアシートを画像で残せるサイトを作りました。

ブラウザ上でボウリングのスコアシートを入力して、画像としてスコアシートをダウンロードできるものを作成しました!

www.pnkts.net

コンセプト

このサイトを作る上で意識したのがこちら

  • 入力は手軽に簡単に
  • ブログなどに貼るためにも、スコアシートの結果は画像出力
  • 簡単に画像として出力できる

というものを実現できるように作成しました

使い方

使い方はかんたん!

f:id:ponkotsu0605:20190824190200p:plain

  • ページ上に表示されるフォームにそれぞれの投球で倒したピンの数を入力します
  • すると即座に下のスコアシート(canvas)に反映されるので、最終的なアウトプットはそこで確認できます
  • 入力が終わったらsaveをクリックする

以上でボウリングのスコアシートの結果を画像としてダウンロードすることができます。

機能・特徴

もちろん以下のような機能・特徴を盛り込んでいます

  • スプリットだった場合はチェックボックスにチェックを入れるだけでスプリットの表示になります。
  • スペアやストライクやガーターの記号は自動で変換されますので、かんたんに入力できます。

アウトプット例

では、上の画像でsaveを押したときにダウンロードできたものを見てみましょう。

f:id:ponkotsu0605:20190824190714p:plain

このように、しっかり必要な情報がわかりやすく表示されていると思います。 もちろんブログの記事に簡単に貼り付けられます。 はてなブログだったら、ダウンロードした画像をドラッグ・アンド・ドロップするだけ!

最後に

これで簡単にボウリングの結果を画像で記録することができるようになりました。これをブログに貼り付けるだけで、ボウリングのスコアを記録する記事が作成できます。 ちなみに今までのハイスコアを貼り付けるとこんな感じ

f:id:ponkotsu0605:20190824191038p:plain

いいですね!ハイスコア更新できるように頑張らなきゃ!