【クリニック院長先生へのIT講座】Chrome拡張機能なんて自分で作れるの？【診療中にTODOを一瞬に】

teyede1972

2025年12月14日 23:49

先日は

先日は自分で拡張機能をつくれるという体験をしました

今回のゴール

今回は診察中にTODOやTASKを簡単に追加できる拡張機能を作って見たいと思います
勿論様々な有名TODOアプリの拡張機能が有ると思いますが自分でコントロールできるというのは大きいですね

【今回のゴール】
Chromeの右上のアイコンをポチッと押すと、
TODOの入力エリアがでてきて　ENTERを押したらGOOGLE TASKSの自分の好みのLISTに保存される

早速手を動かしてみましょう

1️⃣パソコンのどこでもいいので、新しいフォルダを作ります。
今回は＜CHROME拡張TODO＞というフォルダを作りました

2️⃣Claudeに以下のようにお願いしました

Chromeの右上のアイコンをポチッと押すと、 TODOの入力エリアがでてきて　ENTERを押したらGOOGLE TASKSの自分の好みのLISTに保存される　そんあCHROMEの拡張機能の作り方を中学生でもわかるように

3️⃣指示に従ってやっていきます

4️⃣ファイルを作りました！（詳細は前記事をお読みください）

30分くらいで終わりました

基本はCLAUDEに聞きまくって出来ました

私の場合にはGoogleCloudについては複数経験しているので早かったですが、おそらく初めての先生はそこで時間がかかると思いますが　絶対に出来ます！

AIにまとめてもらいました

Chromeの右上ポチッでTODOが保存される拡張機能を作った話

作ったもの

Chromeブラウザの右上にアイコンが出て、クリックすると入力欄が表示されます。そこにTODOを書いてEnterキーを押すだけで、自動的にGoogle Tasksに保存される、というシンプルな仕組みです。

わざわざGoogle Tasksのページを開かなくていいので、思いついた瞬間にサッとメモできます。

なぜ作ったのか

仕事中、「あ、これやらなきゃ」と思っても、Google Tasksを開くのが面倒で忘れてしまうことがありました。

「ブラウザでワンクリックで入力できたらいいのに」と思って作りました。

作るのに使ったもの

Chrome拡張機能

ブラウザに機能を追加するプログラムです。YouTubeの広告ブロッカーとか、翻訳ツールとか、みんな使っているアレです。

今回は「入力欄を出して、Enterを押したら保存する」というシンプルな機能を作りました。

Google Tasks API

APIというのは「プログラムから他のサービスを使うための窓口」です。

例えば、レストランで注文するとき、厨房に直接行かずに店員さんに頼みますよね。APIはその「店員さん」みたいなものです。

Google Tasksにも「プログラムから保存してください」とお願いできるAPIがあります。これを使えば、自分のアプリからGoogle Tasksを操作できます。

Google Cloud Platform（ここが一番のポイント！）

実は、Googleのサービスをプログラムから使うには「許可証」が必要です。この許可証をもらうのがGoogle Cloud Platformです。

なぜ許可証が必要？

もし誰でも自由にGoogle Tasksにアクセスできたら、他人のTODOを勝手に見たり消したりできてしまいます。だから「このアプリは安全ですよ」という証明が必要なんです。

やったこと（簡単バージョン）
プロジェクトを作る
「これからアプリ作ります」とGoogleに宣言する場所を作ります。
「何をするアプリか」を登録
アプリの名前
誰が作ったか
何ができるか（今回は「Google Tasksに保存する」だけ）

身分証明書をもらう
「クライアントID」という長い英数字をもらいます。これがアプリの身分証です。

Google Tasks APIをONにする
Googleには色んなAPI（Gmail、カレンダー、マップなど）がありますが、今回使うのは「Tasks API」だけ。それをONにします。

全体の流れを、スーパーの買い物で例えると
・**あなた（拡張機能）**がスーパー（Google Tasks）で買い物したい
・でも直接は入れない。
・まず**会員証（クライアントID）**を見せる
・店員さん（Google）が「この会員証は本物だね」と確認
・**入場券（トークン）**がもらえる
・やっと店内に入って、買い物（TODOの保存）ができる

この仕組みがあるから、安全に使えるわけです。

作ってみて分かったこと

簡単
・Chrome拡張機能そのものは、HTMLとJavaScriptで作れる
・入力欄とボタンくらいなら、1時間もあれば作れる

大変なこと
これは苦労すると思います
・Google Cloudの設定が複雑
・「プロジェクト作って、OAuth設定して、API有効にして...」と手順が多い
・特に初めてだと「何をしているのか」が分かりにくい

でも、一度やれば次からは簡単です。料理のレシピと同じで、2回目からはサクサク進みます。

実際

作業中に「あ、これ忘れそう」と思った瞬間、右上のアイコンをポチッ。3秒でメモ完了。

Google Tasksのページを開く必要がないので、作業の流れが途切れません。

応用できそうなこと

この仕組みが分かれば、色んなことができます：
・Gmail API → メールを自動送信
・Calendar API → 予定を自動登録
・Sheets API → スプレッドシートに自動記録

「あのアプリとこのアプリを繋げたい」と思ったとき、APIを使えば実現できます。

まとめ
・Chrome拡張機能は思ったより簡単に作れる
・Googleのサービスをプログラムから使うには「Google Cloud」での設定が必要
・でも一度覚えれば、色んなサービスと連携できて便利
・「こんな機能欲しいな」と思ったら、自分で作れる時代

プログラミング初心者でも、やってみる価値はあります。自分専用のツールを作れるのは、本当に楽しいですよ。