詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

Fork me on GitHub

シンプルに運用できるかっこいいスコアカード!

人間は数字が増えていくことに純粋な喜びを感じるところがあるようですが、この性質を利用して子供にやる気を出させることはできないかと、バーチャルなスコアカード(ポイントカード)を作ってみた。イメージはDuolingo的なゲーミフィケーション。

実際に動いている例がこちら。

https://simple-score-card.pages.dev/card/1fDirH0H8LFJs9IneHnU0oDUbsnCcH-dkeY1_N5z18FQ

かっこいいね

ミッションをこなすことでモテメンポイントが増えていくわけですね。やっていこう!

しくみについて。動いているも何もこれはただのペライチのHTMLで、実はなんのインタラクションもない。普通に作ると裏に管理画面でもあればよさそうだけどそこをグッとこらえて、Googleスプレッドシートを元データということにしている。

URLでピンとくると思うけど、前述のカードの元データは以下のシートになっている。

https://docs.google.com/spreadsheets/d/1fDirH0H8LFJs9IneHnU0oDUbsnCcH-dkeY1_N5z18FQ/edit

このシートがURL共有の公開になっていて、アプリケーションからはこのデータをダウンロードして描画するのみ。ポイントを増やしたりメッセージを変えたりしたければシートを編集すればよい。簡単ですね。

スプレッドシートを公開状態で作りさえすれば、あなたも今日から使えます。どうぞご利用ください。

それ以外の使い方はトップページに書いてるのでどうぞ。

よりかっこいいテーマや見せ方など思いついたら教えて下さい。

GitHub - motemen/simple-score-card

はてなで一緒に働きませんか?