LIVE DATA

スプレッドシート連携（ライブデータ）

Google スプレッドシートを Dropli のページに接続すると、ページの JS から fetch("__data/名前") で最新の値を取得できます。 シートを更新するだけでページの数字が変わり、再アップロードは不要です。

シート連携で作ったダッシュボードの例。KPI タイルと月次売上の折れ線グラフが表示され、ホバーで月別の値がツールチップ表示されている — 連携で作れるページの例（月次売上ダッシュボード）。データはすべてスプレッドシートから取得しています。

しくみ

ページの HTML は静的なまま。数字だけを表示のたびに Dropli のサーバー（Worker）がシートから取得して JSON で返します。ブラウザから Google に直接アクセスしないため、 CORS の設定や API キーは一切不要です。

アクセス制御はページ本体と完全に同じです。全公開ページのデータは誰でも、限定公開（許可メール／グループ）ページのデータは許可された閲覧者だけが取得できます。

設定手順（4 ステップ）

シートを共有する

Google スプレッドシートの「共有」→ 一般的なアクセスを 「リンクを知っている全員（閲覧者）」に変更します。

Pro プランなら、シートを非公開のまま連携できます。管理画面に表示される専用メールアドレスを、 シートのオーナー（または編集権限者）が閲覧者として追加するだけです。

fetch するコードを書いた HTML をアップロードする

ページの JS から相対パス __data/名前 を fetch します（後述のコード例参照）。 HTML を Dropli にアップロードして公開してください。

管理画面でシートを登録する

「公開中のページ」→ ページカードの「ライブデータ（スプレッドシート連携）」を開き、シートの URL と名前（例: sales）を入力して追加します。

シートを更新する

以上で完了です。シートの値を変えると、設定した更新間隔（既定 60 秒）以内にページの数字も変わります。

Dropli 管理画面のライブデータパネル。登録済みデータソースの一覧と、シート URL・名前・gid・範囲・更新間隔の入力フォーム、公開リンク／非公開シートの選択がある — ステップ 3 の登録画面。登録済みのデータソースはここから編集・削除できます。

入力項目の意味

シートの URL	ブラウザのアドレスバーの URL をそのまま貼り付けます（ID だけでも可）。
名前	取得 URL になります（`__data/名前`）。小文字英数字・ハイフン・アンダースコア、64 文字まで。1 ページに複数登録できます。
gid（任意）	読み取るタブの ID。シートのタブを開いたときの URL 末尾 `#gid=12345` の数字です。省略すると先頭のタブになります。
範囲（任意）	`A1:D10` のような A1 形式。省略するとタブ全体（値のある範囲）です。
更新間隔（秒）	Dropli がシートへ取得しに行く間隔。10〜3600 秒（既定 60）。
読み取り方式	「公開リンクのシート」（Free から）／「非公開シート」（Pro。専用メールを閲覧者に追加）。

データの受け取り方（リファレンス）

エンドポイントは GET （ページのURL）__data/（名前） です。ページ内からは相対パスで fetch するのがおすすめです（全公開・限定公開どちらの URL でも動きます）。

たとえば次のシートを名前 sales で登録した場合:

	A	B	C	D
1	月	商品A	商品B	商品C
2	2026/10	190	205	120
3	2026/11	130	255	235
4	2026/12	255	180	165

↓ fetch("__data/sales") のレスポンス

{
  "dataset": "sales",
  "fetchedAt": 1751440000000,  // 取得時刻（エポックms）
  "values": [
    ["月", "商品A", "商品B", "商品C"],  // 1行目: ヘッダ
    ["2026/10", 190, 205, 120],
    ["2026/11", 130, 255, 235],
    ["2026/12", 255, 180, 165]
  ]
}

values の形式

行列	シートの見た目どおりの二次元配列です。1 行目にヘッダ行がある場合はそのまま先頭に入ります。
数値	数値セルは JSON の数値（`190`）で返ります。文字列にはなりません。
数式	`=SUM(...)` などの式は計算結果の値で返ります。式そのものは返りません。エラーのセル（`#DIV/0!` 等）はその文字列になります。
空セル	`null` になります。
日付	セルの表示形式が「日付」の場合は `"Date(2026,11,1)"` という文字列で返ります（月は 0 始まり。この例は 2026 年 12 月 1 日）。文字列として入力した `2026/12` はそのまま返ります。

範囲を指定した場合

範囲に B2:C4 を指定すると、その範囲だけが切り出されて返ります（範囲にヘッダ行を含めなければ、values は数値だけになります）:

{ "dataset": "sales", "fetchedAt": 1751440000000,
  "values": [ [190, 205], [130, 255], [255, 180] ] }

コード例: 値を表に流し込む

<!-- HTML 側 -->
<table id="sales"></table>

<script>
const res  = await fetch("__data/sales");   // 相対パスで OK・キー不要
const data = await res.json();

const [header, ...rows] = data.values;
document.getElementById("sales").innerHTML =
  `<tr>${header.map(h => `<th>${h}</th>`).join("")}</tr>` +
  rows.map(r => `<tr>${r.map(c => `<td>${c ?? ""}</td>`).join("")}</tr>`).join("");
</script>

グラフにしたい場合: 冒頭のダッシュボードのように、values をそのまま Chart.js（jsdelivr / unpkg の CDN が利用可能）や自前の SVG に渡せます。

更新間隔とキャッシュ

「更新間隔」は Dropli がシートへ取得しに行く間隔です（10〜3600 秒）。取得した値は閲覧者全員で共有されるため、閲覧者が何人いてもシートへのアクセスは増えません。安心して公開できます。

反映の目安	シート更新から最大「更新間隔」秒後（既定 60 秒）。
一時障害時	シートに一時的にアクセスできない場合、直近の取得値を代わりに返します（レスポンスヘッダ `x-dropli-stale: 1` が付きます）。

エラーレスポンス

`404`	その名前のデータソースが登録されていない（またはページが存在しない）。
`502`	`{"error":"data_unavailable"}` — シートが読み取れない状態です。共有設定が「リンクを知っている全員」になっているか、シートが削除されていないか、範囲指定が正しいかを確認してください。
`302 / 403 / 410`	ページ本体と同じアクセス制御の結果です（未ログイン／閲覧権限なし／公開期限切れ）。

プランと制限

	Free	Pro
データソース数 / ページ	3 個	10 個
公開リンクのシート	◯	◯
非公開シート（専用メール共有）	—	◯

1 回のレスポンスの上限は 2MB です（大きなシートは範囲指定で絞ってください）。
__ で始まるフォルダ名は予約されているため、アップロードには使えません。

セキュリティについて: 限定公開ページのデータは、ページと同じ認可を毎回通ってから返されます。シートの読み取りに使う鍵をあなたが入力・管理する必要はありません。