CarrdにJavaScriptを埋め込んでリッチにする例
【Carrdの紹介/割引リンクありマス】SolitudeParticleSというプチアプリのAPIエンドポイントから値を取得してCarrdに表示する方法
※本記事は「個人サイト制作、初心者向け」な内容だと思います。
CarrdでPro Standard以上のプランに課金すると、CSSやJavaScriptの利用ができるようになります。
JavaScriptそのものやここで記載するコードについての説明は省きますが、今回サンプルとして作るモノとしてはこのような感じのものです（👇動画）。
動画で映っているのはCarrdの編集画面です。
ここでサイトを作成中なのですが、そのサイトに、
「外部のアプリのボタンを押すとその結果がCarrdで作ったサイト側で表示される」
というデモです。
※数秒タイムラグが発生しています。
動画では、
「Solitude ParticleS（https://solpars.work/）（下図）」というプチアプリで発行しているエンドポイントAPIを参照
「現在ここで作業中の人数」を取得
Carrdに表示（絵文字で）
ということを実践しています。
ということで、やり方とスクリプトを以下に書きます。
Carrdでembedエレメントを追加する
※CarrdでJavaScriptの埋め込み（embedエレメントの利用）をするには「Pro Standard（年19ドル）」の課金が必要です。
まぁ、日本円で年額3,000円ってところでしょうか（本記事執筆時の為替状況より）
また、こちらのリンクから課金をすると紹介した人（私）・された人（あなた）ともに割引があるそうです。よろしければ。
①Embedエレメントを、任意の場所に追加
②追加したEmbedエレメントをクリックすると、パネルがひらきます。
“Type”：Codeを選択
③“Code”の入力ボックスに、以下のスクリプトを貼り付けます。
④貼り付けるスクリプト
<div id="solpars-widget" style="text-align: center; font-size: 1.2rem; color: #e2e8f0;"></div>
<script>
async function updateSolpars() {
try {
const res = await fetch('https://solpars.work/api/sessions/counts');
const data = await res.json();
const total = Object.values(data.counts)
.reduce((sum, item) => sum + item.count, 0);
const el = document.getElementById('solpars-widget');
if (total === 0) {
el.textContent = '☕ みんなお休み中...';
} else {
const emojis = '✨'.repeat(total);
el.innerHTML = emojis + '<br><span style="font-size: 0.85rem;">' + total + '人が作業中！</span>';
}
} catch (e) {
console.error('SolParS widget error:', e);
}
}
updateSolpars();
setInterval(updateSolpars, 10000);
</script>⑤Embedエレメントの最下部にある「Defer <Script>tags」のチェックを外します。
この後は先の動画のように保存して、公開済みのサイトでチェックしたり、テンプレートならView Demoで確認すると、アプリの方の動きが反映されるのが分かると思います。
※アプリ側とCarrdで埋め込んだスクリプトの間で「タイムラグ」があります。そのため操作結果が反映されるまで、数秒かかることがあります（仕様です）
まとめ
こんな感じで、Carrdの課金をすると
無料で公開されているWebAPIを参照して表示
Cloudflareなどサーバで自作APIを作って個人サイトで表示
Privateな自分専用ポータルを作ったり
とかできることが広がると思います。
あと、上述のサンプルスクリプトは、Carrdではなくてもご自身のサイトに埋め込むことができると思います。
絵文字や表示するテキスト、setInterval等もご自由に改変してください。
最後のぼやき
やっとSolParSのエンドポイントAPIの利用例を書けた・・・！！(;´Д｀)
（ずっと書きたいと思っていたけど、フロントエンドの説明を初心者向けにどう書いたら・・・と唸っていた。。）