Setup
データのつなぎ方
News・まとめ・MAP・広告はスプレッドシート、カレンダーは Googleカレンダー、note は RSS。すべて1本の Google Apps Script 経由で読み込みます。
この設定はブラウザにだけ保存されます(保存できない環境でも、この画面を開いている間は有効です)。
本番では、index.html と同じフォルダに置いた config.js に書き込むのがいちばん簡単です。5行だけの小さなファイルなので、大きなHTMLを探し回る必要がありません。
うまく反映されないとき
1. アクセスできるユーザーが「全員」になっていますか
いちばん多い原因です。ここが「自分のみ」だと、Googleがログイン画面を返してしまい、サイト側は何も受け取れません。デプロイをやり直すか、デプロイを管理 → 鉛筆マークから直せます。
2. URLは /exec で終わっていますか
テスト用の /dev で終わるURLは、本人がログインしているときしか動きません。必ず /exec のほうを使ってください。
3. シート名は News / Links / Spots / Ads のままですか
Apps Script はこの名前でシートを探します。日本語に変えると見つけられません。1行目の見出しの文字も変えないでください。
4. いちばん左の列が空の行は、まるごと無視されます
News・Links なら date、Spots なら category、Ads なら sponsor。ここが空だとその行は読み込まれません。
5. コードを直したら、再デプロイが必要です
デプロイを管理 → 鉛筆マーク → バージョン「新バージョン」→ デプロイ。シートの中身を変えただけなら再デプロイは要りません。
6. SHEET_ID は空のままで大丈夫です
スプレッドシートの 拡張機能 → Apps Script から開いていれば、そのスプレッドシートが自動で使われます。URLをそのまま貼ってもIDだけ取り出すようになっているので、Illegal spreadsheet id というエラーは出なくなりました。
1行の記事が、3か所に出せます
News シートの1行は、そのまま「新着」に並びます。ここに hero を TRUE にすればトップの大きな特集に、
map を TRUE にすれば MAP のピンに、event を TRUE にすればカレンダーの予定にもなります。
たとえば新しいカフェの紹介記事なら map を、イベント告知なら event を。両方入れても構いません。
トップの特集は、どう決まるか
News シートの hero 列に TRUE を入れた行が、上から順にトップの特集になります(最大3件)。TRUE がひとつもなければ新しい順に3件が自動で選ばれます。
見出しは hero_title があればそれを、なければ title から自動で組み立てます(「——」「:」「、」などの区切りで主見出しと副見出しに分けます)。
画像は image 列。空のときは記事ごとに色の違う「文字だけの表紙」が自動で作られます。
Sheet 1 — News
| 列 | 内容 |
| date | 2026-08-25 の形式。新しい順に並べ替えて表示します。 |
| tag | 更新 / お知らせ / イベント / メディア のいずれか。 |
| title | 一覧に出る見出し。特集の自動見出しもここから作られます。 |
| url | リンク先。空欄なら本文をポップアップ表示します。 |
| body | url が空のときに表示する本文。 |
| hero / hero_title / hero_sub | トップ特集への昇格と、その見出し。空でOK。 |
| image | 写真URL。特集(1600×900px前後)と新着カードの両方に使われます。 |
| pin | TRUE で一覧の先頭に固定。省略可。 |
| ↓ ここから下は、必要なときだけ入れる欄です |
| map | TRUE を入れると、この記事がMAPのピンにもなります。下の spot_ 系と lat / lng をあわせて入れてください。 |
| spot_name | MAPに出す名前。空なら title をそのまま使います。 |
| spot_category | 施設 / 見どころ / 食べる など。空なら「記事から」になります。 |
| spot_address | 住所。「Googleマップで開く」のリンク生成に使われます。 |
| spot_hours | 営業時間・開館時間。 |
| lat / lng | 緯度・経度。ピンの位置。Googleマップで右クリック →「この場所について」で取得。 |
| event | TRUE を入れると、この記事がカレンダーの予定にもなります。 |
| event_date | 予定の日付(yyyy-mm-dd)。空のときは date の日に入ります。 |
| event_time | 「13:00-15:00」など。カレンダーの詳細に出ます。 |
| event_place | 開催場所。 |
| event_title | カレンダーでの表示名。空なら title を使います。 |
記事から作られたピン・予定には、もとの記事へのリンクが付きます。
お店の紹介記事を書いたらそのままMAPに載り、イベントの告知を書いたらそのままカレンダーに載る、という使い方を想定しています。
MAPやカレンダーだけに載せたいもの(記事にしないもの)は、これまでどおり Spots シート・Googleカレンダーに直接書いてください。
Sheet 2 — Links(山古志まとめ)
| 列 | 内容 |
| category | 公式・行政 / デジタル村民 / 観光 / イベント / 暮らし・移住 / 買う・支える / 読みもの など。増やすと絞り込みも自動で増えます。 |
| title / url / description | サイト名、リンク先、1〜2行の紹介文。 |
| image | バナー画像のURL(16:10、1200×750px前後)。空欄なら自動の表紙。 |
| order | 並び順の数値。省略可。 |
note の記事はここに書かなくて構いません。Apps Script の NOTE_USERS に並べたアカウントの RSS を読み、「note・読みもの」として自動で追加されます。
Sheet 3 — Spots(MAP)
| 列 | 内容 |
| category | 施設 / 見どころ / 直売所 / 宿 / 食べる / 温泉 など。絞り込みボタンになります。 |
| name | お店・施設の名前。 |
| description | 1〜2行の紹介。 |
| hours | 営業時間・開館時間。「開催日のみ」なども可。 |
| address | 住所。Googleマップのリンク生成にも使います。 |
| lat / lng | 緯度・経度。簡易マップのピン位置になります。Googleマップで右クリック →「この場所について」で取得できます。 |
| url | 公式サイトなど。省略可。 |
| image | 写真URL。空欄なら自動の表紙。 |
Sheet 4 — Ads(広告)
| 列 | 内容 |
| slot | hero でトップ特集枠(いちばん上の大きな枠)、feed で新着枠。空欄なら feed 扱いです。 |
| sponsor | 広告主の名前。カードのカテゴリ欄、特集枠では見出しの上に出ます。 |
| title | 見出し。記事カードと同じ見え方になります。 |
| subtitle | 特集枠(hero)でだけ使う補足の一文。省略可。 |
| url | リンク先。 |
| image | 写真URL。hero は 1600×900px(16:9)、feed は 1200×900px(4:3)推奨。空欄なら自動の表紙。 |
| position | feed 枠で、「新着」の何番目に差し込むか(数値)。空なら末尾。hero では使いません。 |
| active | TRUE の行だけ表示します。掲載終了は FALSE に。 |
広告カードは記事と同じ形で並びますが、必ず PR の表示が入ります(新着枠はサムネイル左上、特集枠は見出しの上)。広告であることを隠す設定は用意していません。
掲載条件や注意事項は「広告掲載」タブにまとめてあります。
カレンダー
Googleカレンダーをひとつ用意し、そのカレンダーIDを Apps Script の CAL_ID に入れます。予定のタイトル・場所・説明がそのまま表示されます。
当月の前後1か月ぶんを読み込むので、翌月の予定も先に入れておけます。
MAPを本物のGoogleマップにする
やり方は2つあります。おすすめは A。スプレッドシートに書いた緯度・経度がそのままピンになるので、二重管理になりません。
A. APIキーの取り方
1. console.cloud.google.com でプロジェクトを作る
2. 「APIとサービス」→ ライブラリ → Maps JavaScript API を有効にする
3. 認証情報 → 認証情報を作成 → APIキー
4. 作ったキーを編集し、「アプリケーションの制限」をウェブサイトにして、公開するドメイン(例 https://example.com/*)を登録する
5. 「APIの制限」で Maps JavaScript API だけに絞る
キーはHTMLに書くので誰でも見られます。ドメイン制限は必ずかけてください。請求先アカウントの登録は必要ですが、この規模なら無料枠に収まります。
手元で試すときの注意:file:// では動きません
HTMLファイルをダブルクリックして開いた file:///… の状態では、Googleがドメインを判定できず、必ず拒否されます。制限欄に file:///… を登録しても効きません。
手元で確認するときは、簡易サーバーを立ててから開いてください。macOSならターミナルで
cd ~/Downloads && python3 -m http.server 8000
と打って、ブラウザで http://localhost:8000/ファイル名.html を開きます。
そのうえで、キーの「ウェブサイトの制限」に http://localhost:8000/* を追加してください。公開後は本番ドメイン(https://example.com/*)も追加します。
B. マイマップの埋め込み(キーなしで手軽)
1. google.com/mymaps で地図を作り、ピンを置く
2. 共有 → 「一般的なアクセス」をリンクを知っている全員に
3. 右上の … → 「自分のサイトに埋め込む」→ 出てきた iframe の src="…" の中身をコピー
キーは要りませんが、ピンはマイマップ側で作るので、スプレッドシートとは別管理になります。カードの一覧とピンが連動しない点にご注意ください。
どちらも設定しないとき
緯度・経度から描いた簡易マップが表示されます。カードの「Googleマップで開く」は住所と名前からの検索リンクなので、どの方式でも同じように動きます。
Apps Script
Apps Script に貼り付けて「デプロイ → 新しいデプロイ → ウェブアプリ / アクセスできるユーザー: 全員」で公開し、出てきた /exec のURLを上の欄に入れてください。