1 / 1
MMS ワークショップ

LINEに送った画像を
Google Driveへ自動保存する

Codex/Claude Codeとclaspで、作ってから直し続けられるGASを育てる

完成形:レシートや写真を、保存用LINEへ送るだけでDriveに残る

↓ スクロール、または ↓キーで次へ
今日できること

「保存し忘れ」を、
送るだけの流れへ

LINEへ送る

レシートや写真を、保存用の公式アカウントへ送る。

自動で保存

GASが画像を受け取り、指定Driveフォルダへ保存する。

後から直せる

AIとclaspで、機能追加・修正まで続けられる。

↓ 次へ
全体像

4つの役割を分けると、
仕組みが見通せる

LINE

画像の入口

保存用の公式アカウントへ画像を送る。

GAS

自動保存の本体

LINEから画像を取り出し、Driveへ保存する。

Drive

画像の保存先

レシート用など、目的ごとのフォルダに残す。

clasp

コードの橋

パソコン上のコードとGASをつなぐ。

AIはLINEの代わりに返事をする役ではありません。仕組みを作り、直し、反映する開発パートナーです。
↓ 次へ
役割分担

人が設定することと、
AIに任せること

人が行う

アカウントと鍵の管理

LINE公式アカウント作成、Googleへのログイン、権限許可、アクセストークン入力、実際の画像送信。

AIに任せる

コードと変更の管理

必要なファイル作成、コード編集、差分確認、構文確認、claspでの反映、エラーの原因整理。

アクセストークンとWebhook用の鍵は、AIチャットやコードへ貼りません。チャンネルシークレットは、今回の最小構成では入力しません。

↓ 次へ
準備

最初に開く場所

LINE Official Account Managerで、保存専用の公式アカウントを作る。
LINE Developers ConsoleでMessaging APIを有効にする。
Google Driveで、画像の保存先フォルダを作る。
Apps Script APIの設定をオンにする。claspからGASを扱うための許可です。

リンクはすべて公式ページです。Googleは、今回のGASを管理するアカウントでログインします。

↓ 次へ
LINE公式アカウント

ここは手順書を見ながら、
焦らず登録する

この4本は以前のLINE教材の登録ガイドを、この教材用にコピーして同梱しています。元の教材を探し直す必要はありません。
↓ 次へ
大事な言葉

今回入力する値を、
先に分けておく

アクセストークン

LINEから画像を取り出す鍵

GASのスクリプトプロパティへ保存。チャット・Git・コードへ貼らない。

DriveフォルダID

保存先を指定するID

Driveフォルダを開いたURLの /folders/ の後ろの文字列。

Webhook用の鍵

URLに付ける合言葉

長いランダム文字列。GASのスクリプトプロパティへ保存し、Webhook URLの末尾へだけ付ける。

チャンネルシークレットは今回使いません。本来はLINEから届いた署名を検証するための値ですが、このGAS直結の最小版にはその検証処理を入れていません。したがって、スクリプトプロパティにも入力しません。署名検証を加える回は、別の発展編で扱います。

LINE公式:Webhook署名の検証

↓ 次へ
作業フォルダ

コードを触る時は、
小さな専用フォルダを1つ作る

Codex

相談だけならフォルダなしでよい

設計相談や手順確認は、フォルダを選ばず始めてもよい。claspでコードを作る段階では、専用フォルダを作業場所に指定する。

Claude Code

作業場所は必ずフォルダ

Claude Codeの会話は、起動したフォルダに結びつく。空の専用フォルダを作り、そのフォルダで起動する。

Finderの「書類」など、自分で場所が分かる所に line-image-drive フォルダを作る。
Codexでは、そのフォルダを作業対象に追加してから実装を依頼する。
Claude Codeでは、そのフォルダをターミナルで開いてから Claude Code を起動する。

OpenAI公式:Codexのローカル環境 / Claude Code公式:作業ディレクトリ

↓ 次へ
claspとは

ブラウザのGASを、
パソコン上で育てる道具

clasp(クラスプ)は、Google公式のApps Script用コマンドラインツールです。

clasp pull

GAS → パソコン

今あるGASのコードを手元へ取り込む。

clasp push

パソコン → GAS

AIが直したコードを、GASへ反映する。

clasp deploy

公開版を作る

LINEから呼ばれる公開バージョンを作る。

Google公式:claspの使い方

↓ 次へ
なぜCodex/Claude Code?

作った後の「ここを変えたい」に、
コードごと応えられる

会話だけ

コードを受け取り、手で貼る

1回の相談には便利。でも、複数ファイルや前回との差分は自分で管理しやすい。

開発AI+clasp

読んで、直して、反映する

既存ファイルを確認し、必要な箇所だけ直し、構文を確認してGASへ反映できる。

便利なのは「コードを書かせること」だけではありません。失敗の原因を一緒に読み、次の変更へつなげられることが本当の価値です。
↓ 次へ
AIへの依頼①

作業フォルダを決めてから、
安全にローカル管理へ移す

この作業フォルダで、既存のGASプロジェクトをclaspでローカル管理したいです。

条件:
- まず現在の作業フォルダのパスを表示し、このフォルダ以外を変更しない
- 作業フォルダが未作成なら、作る場所と名前(line-image-drive)を確認してから作成する
- 既存のApps Scriptプロジェクトをclasp cloneで取り込む
- .clasp.json、アクセストークン、Webhook用の鍵はGitに入れない
- コード変更前に、現在のファイル構成と変更予定を短く説明する
- 変更後は構文確認を行い、clasp pushでGASへ反映する
- ブラウザでしかできないログイン・権限許可・鍵の入力は、私が行うので画面操作を短い手順で案内する

まず、必要な前提確認と作業手順を出してください。
↓ 次へ
AIへの依頼②

LINE画像→Drive保存の
最小版を作る

LINE公式アカウントに届いた画像だけを、Google Driveの指定フォルダへ保存するGASを作ってください。

要件:
- doPostでLINEのWebhookを受ける
- 画像メッセージだけを処理し、テキストは保存しない
- LINE Content APIで画像本体を取得する
- DriveフォルダID、LINE_CHANNEL_ACCESS_TOKENはスクリプトプロパティから読む
- 保存名は日時が分かる形にする
- 秘密情報をコードやGitに書かない
- 変更前に実装方針を説明し、変更後に構文確認とclasp pushを行う
- 実際に画像を1枚送って、Driveへ保存されたことを成功条件にする

既存コードがあれば、全消しせず差分で直してください。
↓ 次へ
GASの設定

鍵は「スクリプトプロパティ」へ

GAS左下のプロジェクトの設定を開く。
スクリプトプロパティへ、DRIVE_FOLDER_ID と LINE_CHANNEL_ACCESS_TOKEN を追加する。
WEBHOOK_KEY も同じ場所へ入れる。コード・チャット・Gitには書かない。
チャンネルシークレットは追加しない。今回のコードでは使わない。

Google公式:Properties Service

↓ 次へ
反映と公開

まず「コードを反映できた」を
自分で確かめる

AIがローカルのコードを変更し、差分を確認する。
clasp push を実行し、成功表示を確認する。これでローカルの変更がGASへ反映される。
GASのエディタを再読み込みして、変更したコードが表示されることを確認する。
pushだけでは、すでに公開したWebhook URLの中身は更新されません。次の「版を作る→公開を更新」まで行って、LINEに届くコードが切り替わります。
↓ 次へ
初回の公開

AI+claspで行う場合も、
手作業の場合も流れは同じ

AI+clasp:clasp push → clasp version → clasp deploy の順に実行。出力に出た WebアプリURL(/execで終わるURL) を記録する。
手作業:GAS右上の「デプロイ」→「新しいデプロイ」→種類「ウェブアプリ」を選ぶ。
「アクセスできるユーザー」は、LINEから呼べる公開設定を選ぶ。デプロイ後、ウェブアプリURLをコピーする。
URLをブラウザで開き、起動中を示す応答が出れば公開URLの取得まで完了。
このGASをLINEのWebhookとして初回公開したいです。

次を順番に進めてください。
・まず、現在の作業フォルダと変更予定を短く確認する
・clasp pushを実行し、成功したかを出力で確認する
・clasp versionで公開版を作る
・clasp deployでウェブアプリとして公開し、/execで終わるWebアプリURLを私に示す
・URLを開いて、起動中を示す応答が出るか確認する
・私がスクリプトプロパティ入力とLINE Developers ConsoleへのWebhook URL貼り付けを行うので、値そのものは求めず画面操作だけ案内する
・アクセストークン、Webhook用の鍵、チャンネルシークレットはコード・Git・会話へ書かない

各コマンドを実行する前に一言説明し、失敗したら止まって原因と次の確認を示してください。

Google公式:claspでの公開 / Google公式:ウェブアプリの公開

↓ 次へ
更新時の公開

URLを変えずに、
中身だけ新しくする

コードを直したら clasp push でGASへ反映する。
clasp version で新しい公開版を作る。
clasp redeploy で、今使っているデプロイを新しい版へ差し替える。
Webhook URLは入れ直さない。初回に記録した同じ /exec URL を使い続ける。
AIには「初回か更新かを先に確認して。更新なら既存のデプロイを差し替え、Webhook URLを変えないで」と依頼すると安全です。
↓ 次へ
Webhook設定

URLの末尾に鍵を付けて、
LINEの画像をGASへ届ける

LINE Developers ConsoleのMessaging APIタブを開く。
WebアプリURLの末尾へ ?key=WEBHOOK_KEY を付ける。WEBHOOK_KEY はスクリプトプロパティへ入れた値を使う。
完成形は https://script.google.com/.../exec?key=(Webhook用の鍵) 。実際の鍵は、教材や画面共有では表示しない。
この完成形をWebhook URL欄へ貼り、Webhookの利用をオンにする。

LINE公式:Messaging APIでボットを作る

↓ 次へ
検証で302が出た時

今回の教材では、
そのまま実機テストへ進む

LINEの「検証」を押して 302 Found が表示されても、今回の実機では画像を送るとDrive保存に成功しました。この表示だけでは中断しません。
Webhook URLが /exec?key=... の形になっているか確認する。
Webhookの利用がオンか確認する。
公式アカウントへ画像を1枚送る。
Driveに画像が保存されたら、このワークショップでは成功と判定する。

設定やLINE側の仕様が異なる場合もあるため、302を一般に「必ず問題なし」とは言いません。今回の実機結果にもとづく、授業中の切り分けです。

↓ 次へ
実機での確認

成功条件は画面の表示だけでなく、
Driveに画像があること

画像

保存される

レシートや写真を送る。日時入りのファイルがDriveにできる。

テキスト

保存しない

文字だけ送っても、Driveに余計なファイルが増えない。

2枚目

同じように保存

別の画像も重複せず、別ファイルとして残る。

今回の実機では、LINEの「検証」画面で302表示があっても、画像を送るとDrive保存は成功しました。表示だけで結論を急がず、必ず実際の送信→保存まで確認します。
↓ 次へ
AIへの依頼③

「できた」を、
次の便利へ育てる

LINE画像をGoogle Driveへ保存するGASを改善したいです。

変更したいこと:
変更したいことを一文で書く。例:保存先を月ごとのフォルダに分けたい

守ってほしいこと:
- いま動いている画像保存を壊さない
- 秘密情報はコードへ書かない
- 先に、どのファイルをどう変えるか説明する
- 変更後に差分を示し、構文確認をする
- clasp pushでGASへ反映する前に、影響と確認方法を説明する
- 最後に、画像送信→Drive保存で動作確認する

実装を始める前に、不明点と作業計画を出してください。
↓ 次へ
こんな変更ができる

同じ仕組みを、
自分の仕事に合わせる

整理

月ごとのフォルダへ

保存日から「2026-08」のようなフォルダを自動作成する。

名前

ファイル名を分かりやすく

日時・用途など、必要な範囲で名前へ足す。

通知

保存できたことを返す

必要になった時だけ、LINEへの返信やエラー通知を加える。

経費の確定や会計ソフトへの登録は自動化せず、人が内容を確認してから行います。

↓ 次へ
困った時の依頼

エラー画面を見たら、
先に「何が起きたか」を整理する

LINE画像→Google Drive保存の仕組みでエラーが出ました。

以下を確認して、原因候補を優先順で整理してください。
- LINE Developers ConsoleのWebhook設定
- GASの実行ログ
- スクリプトプロパティ名(値は表示しない)
- claspで反映したコードとの差分
- Driveに画像が保存されたかという実機結果

秘密情報は求めず、まず読み取りだけで診断してください。
修正案は「原因」「変える場所」「確認方法」をセットで出してください。
↓ 次へ
まとめ

送るだけの自動化を、
自分で直せる資産にする

参考・出典

Google Apps Script:clasp

Google Apps Script:Web Apps

Google Apps Script:Properties Service

LINE Developers:Messaging APIでボットを作る

LINE Developers:Webhook署名の検証(発展編)