以下の内容はhttps://motemen.hatenablog.com/entry/2024/02/simple-score-cardより取得しました。


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

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




以上の内容はhttps://motemen.hatenablog.com/entry/2024/02/simple-score-cardより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14