私が所属しているSARAHでは、お店の一品一品に口コミを投稿できるサービス「SARAH」を展開しています。
ローンチから8年が経過し、ついに投稿数100万件が目前に迫ってきました！
ことのはじまり
マーケティングチームから「100万投稿のキャンペーンページを作りたい。なんかこう、パタパタ動く感じのカウンターを作ってください。ページに埋め込むのでシンプルなやつで。」と要望があり、久しぶりにHTML+JavaScriptでモノづくりに挑戦しました。
おしゃれなFlipカウンター
さすがにゼロベースから開発する無理なので、きっと何方かがイケてるライブラリを作成されているだろうと早速検索。いくつかの候補から、Rik Schenninkさんが作成されたflipを採用しました。
RikさんのTwitterアカウント
ざっくり構想
限られた機能のページなので、あまり大げさに作る必要もないかなと思ったのですが、折角なのでFirebase HostingとGithub Actionsの連携して、デプロイの自動化やプレビューサイトの作成にも対応してみました。
実際のファイル構成
.
├── .firebaserc
├── .github
│ └── workflows
│ ├── firebase-hosting-merge.yml
│ └── firebase-hosting-pull-request.yml
├── .gitignore
├── README.md
├── firebase.json
└── public
├── 404.html
├── flip
│ ├── flip.min.css
│ └── flip.min.js
└── index.html
index.html
5秒に1回、投稿数取得を取得するAPIをfetchで呼び出し、flipカウンターの値を更新しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="./flip/flip.min.css" />
<title>100万投稿記念カウンター | SARAH</title>
</head>
<body>
<style>
.container {
text-align: center;
}
.tick {
width: 100%;
padding-bottom: 0.1em;
font-size: 6rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
</style>
<div class="container">
<h1>SARAH 100万投稿記念カウンター</h1>
<div
class="tick"
id="tick"
data-value="000000"
data-did-init="handleTickInit"
>
<span data-repeat="true">
<span data-view="flip"></span>
</span>
</div>
</div>
<script>
/*カウンタが初期化されたときに呼び出すコールバック関数*/
function handleTickInit(tick) {
var timer = Tick.helper.interval(function () {
getCount().then((cnt) => {
tick.value = cnt;
});
}, 5000);
}
/*投稿数取得関数*/
async function getCount() {
const config = {
headers: {
Accept: "application/json",
},
};
const data = await (
await fetch("**API Endpoint**", config)
).json();
return data["reviews_count"];
}
</script>
<script src="./flip/flip.min.js"></script>
</body>
</html>
できたもの
感想
長いことWebフロントの開発から遠ざかっていたこともあり、恥ずかしながら初めてJavaScriptでfetchやasyncを使いました。XMLHttpRequestをこねくり回していた時代からすると、かなりの進歩が感じられます。
公式にIEが葬られた今、モダンJavaScriptの真価を再確認した今日このごろでした。
SARAHでは一皿に特化したごはん情報の投稿・配信・収集・解析するサービスをtoC,toBと多角的に展開しています。アプリ / Web / SaaS / データサイエンス を最新の環境と技術で広く運用します。 技術スタック詳細はこちら→ stackshare.io/companies/sarah-inc
Discussion