SETUP GUIDE
セットアップ手順
スプレッドシートを作るところから、コードの貼り付け、地域の設定、ウェブアプリのデプロイ、スマホ・タブレットでの表示までを順番に説明します。所要時間は15分ほどです。作業はPCで行ってください。
FIRST
つまずきやすい3点（最初に読む）
/dev は動作確認用のURLです。スマホやタブレットには、デプロイ後に表示される /exec のURLを使ってください。
1. スプレッドシートを作る
新しいスプレッドシートを作ります
Googleドライブで新しいスプレッドシートを作り、分かりやすい名前を付けます（例：ネコ記録）。記録はこのスプレッドシートの「log」シートに貯まります。シートは最初の記録のときに自動で作られます。
Apps Scriptを開きます
メニューの［拡張機能］→［Apps Script］を開きます。プロジェクト名は「ネコ記録」など分かりやすい名前にします。
2. 6ファイルを貼り付ける
マニフェストを表示します
左側の歯車アイコン［プロジェクトの設定］で「『appsscript.json』マニフェスト ファイルをエディタで表示する」にチェックを入れ、左側の［エディタ］に戻ります。
Code.gs を貼り付けます
最初からある コード.gs の中身をすべて削除し、Code.gs のコードを貼り付けます。表示名は「コード.gs」のままで動作します。
appsscript.json を置き換えます
中身をすべて削除し、マニフェストのコードを貼り付けます。このファイルで、権限を「このスプレッドシートだけ」「カレンダーは読み取りのみ」に限定し、タイムゾーンを日本時間にしています。
HTMLファイルを4つ追加します
左側の「＋」から［HTML］を選び、次の4つを作って、それぞれ中身を削除してから貼り付けます。
| ファイル名 | 画面 | 貼り付けるコード |
|---|---|---|
index | ネコボタン（スマホ用） | index.html |
dash | ダッシュボード（タブレット用） | dash.html |
view | 一覧（PC用） | view.html |
settings | 設定（PC用） | settings.html |
すべて保存します
6ファイルとも保存します（Macは⌘+S、Windowsは Ctrl+S）。
3. 自分用に設定する
Code.gs の冒頭にある CONFIG を書き換えて保存します。天気と予定を使わない（スマホだけで使う）場合は、初期値のままでも動きます。
| 項目 | 内容 | 初期値 |
|---|---|---|
APP_NAME | 画面のタイトル（例：'ミケ記録'） | ネコ記録 |
PLACE | 天気に表示する地名（表示用） | 東京都千代田区 |
LAT / LON | 天気を取得する地点の緯度・経度 | 35.6812 / 139.7671 |
WEATHER_LINK | 天気をタップしたときに開くページ（空欄なら開かない） | https://tenki.jp/ |
CALENDAR_IDS | 表示するカレンダーのID。空ならすべての表示中カレンダー | 空（すべて） |
- 緯度・経度は、PCのGoogleマップで場所を右クリックすると一番上に出る数字です。数値は引用符で囲まずに書きます。
WEATHER_LINKは、tenki.jpなどでお住まいの地域のページを開き、そのURLを貼るのがおすすめです。- カレンダーを絞りたいときは、Googleカレンダーの［設定］→ 対象カレンダー →［カレンダーの統合］にある「カレンダーID」を、
['xxxx@group.calendar.google.com']のように入れます。
4. ウェブアプリとしてデプロイする
［デプロイ］→［新しいデプロイ］を開きます
「種類の選択」の歯車から「ウェブアプリ」を選びます。
実行者とアクセス範囲を設定します
| 項目 | 設定 |
|---|---|
| 次のユーザーとして実行 | 自分 |
| アクセスできるユーザー | 自分のみ |
「全員」を選ぶと、URLを知っている人が記録を付けたり予定を見たりできる状態になります。必ず「自分のみ」にしてください。
権限を確認して許可します
［アクセスを承認］→ 自分のアカウントを選びます。「このアプリはGoogleで確認されていません」と表示されたら、［詳細］→［（プロジェクト名）（安全ではないページ）に移動］を選び、内容を確認して［許可］します。
/exec のURLをコピーします
表示された「ウェブアプリ」のURL（末尾が /exec）を控えます。
5. 端末で開く
控えたURLの末尾に、画面ごとの指定を付けて開きます。各端末で、導入に使ったのと同じGoogleアカウントにログインしてください。「自分のみ」に設定しているため、ログインしていないと表示されません。
| 端末 | 画面 | 開くURL |
|---|---|---|
| スマホ | ネコボタン | …/exec |
| タブレット | ダッシュボード | …/exec?page=dash |
| PC | 一覧 | …/exec?page=view |
| PC | 設定 | …/exec?page=settings |
置きっぱなしにするコツ
- 充電しながら、画面が消えないようにします。iPhone・iPadは［設定］→［画面表示と明るさ］→［自動ロック］を「なし」、Androidは開発者向けオプションの［スリープモードにしない］（充電中は画面をオンのまま）をオンにします。
- 画面の回転はロックしておくと、触ったはずみで向きが変わりません。
- 明るさは低めにしておくと、画面の焼き付きや電池の劣化を抑えられます。
6. 使い方
- 記録する：ボタンを押すと、その時刻で記録されます。続けて出る詳細パネルは、選んでも選ばなくても構いません。10秒で自動で閉じ、触るたびに延長されます。
- 間違えたとき：右上の［取り消し］で、直前の1件を消せます。
- ボタンを変える：設定ページで名前・アイコン・色・詳細の選択肢・並び順を変えて［保存］します。端末には5分以内に反映されます（すぐ反映したいときはページを再読み込み）。詳細の選択肢は1行が1グループで、「カリカリ、ウェット」のように区切って書きます。
- ボタン名を変えたとき：過去の記録とは別の項目として集計されます。
- 記録を見る：一覧ページで、期間（今日／7日／30日）や項目を絞り込めます。元データはスプレッドシートの「log」シートにあり、そのまま編集や書き出しもできます。
7. 困ったとき
| 症状 | 確認すること |
|---|---|
| ページが真っ白、または読み込みエラー | PCのブラウザで複数のGoogleアカウントにログインしていると失敗することがあります。シークレットウィンドウで、導入したアカウントだけにログインして試してください。 |
| 「ファイルが見つかりません」 | HTMLファイルの名前（index / dash / view / settings）を確認してください。 |
| 天気が出ない | CONFIG の緯度・経度を確認してください。天気は30分ごとに取得し直します。 |
| 予定が出ない | デプロイ時にカレンダーの権限を許可したか、CALENDAR_IDS が正しいかを確認してください。 |
| 一覧に記録が出ない | スマホ・タブレットが、今のデプロイの /exec URLを開いているかを確認してください。別のプロジェクトのURLだと、別のスプレッドシートに記録されます。 |
| コードを直したのに画面が変わらない | 次の「コードを更新するとき」の手順で、新しいバージョンとして再デプロイしてください。 |
8. コードを更新するとき
ファイルを新しい版へ差し替えます
CONFIG の設定値を控えてからファイルを貼り替え、設定値を書き戻して保存します。設定画面で作ったボタンは別に保存されているので、貼り替えても消えません。
新しいバージョンとして再デプロイします
［デプロイ］→［デプロイを管理］で既存のウェブアプリを編集し、バージョンで「新バージョン」を選んでデプロイします。コードを保存しただけでは、/exec のURLに反映されません。URLは変わりません。
動作確認だけしたいときは、［デプロイ］→［デプロイをテスト］で出る /dev のURLを使うと、保存した最新のコードがすぐ反映されます。
HELP
困ったときは、AIに聞いてみましょう
このアプリのコードはすべて公開しています。設置でつまずいたら、生成AI（ChatGPT・Claude・Geminiなど）に聞くのが近道です。
- うまくいかない画面の内容やエラーの文言を、そのまま貼り付けて「Google Apps Scriptの設置で困っている」と伝えると、手順に沿った対処を教えてくれます。
- コード全文はコードページからコピーできます。該当する部分を一緒に貼ると、より正確な回答が得られます。