公開日：
こんにちは！システム開発グループの かっつん です。
今回、WEBブラウザ上で英単語を調べたときに、調べた内容をkintone に蓄積する Chrome 拡張 を作ってみました。
自分の学習用に作ったものですが、同じ悩みをお持ちの方には刺さるはず
――ということで記事にまとめてみました。
作ろうと思ったきっかけ
英語のドキュメントを読んでいると、知らない単語にしょっちゅう遭遇します。
既存のChrome拡張機能（DeepLなど）で意味を見るのは簡単です。でも、「調べたら終わり」 → また忘れる を延々繰り返してしまうのが悩みでした。
意味をメモしておければ後で復習するのに使えそう…
そうだ！kintoneに調べた内容を放り込めば良いのでは？
この思いつきを形にするため、ChatGPT に相談しながら（いわゆる“バイブコーディング”方式） とりあえず動くものを作ってみようと考えました。
仕組みのざっくり概要
| 手順 | やっていること |
|---|---|
| ① 単語 or 熟語を選択→右クリック | メニューに追加した「翻訳 → kintone」をクリック |
| ② ChatGPT で意訳を取得 | 選択語を含む 1 文を丸ごと送り「意味だけ一言で返して」と依頼 |
| ③ ポップアップ表示 | 選択語すぐ上に黄色い吹き出しを表示。クリックするまで残る |
| ④ kintone に自動保存 | 単語・意味・文・元ページURLをレコード追加 |
技術スタック
Chrome 拡張 (Manifest V3) + OpenAI API + kintone REST API
UIもロジックもシンプルですが、右クリック一発で「調べる→残す」まで完了 するのが最大のポイントです。
デモ動画（約 50 秒）
使ってみた感想
- レスポンスが速い
GPT-4o を使っていますが、単語＋文脈なら体感 1 秒掛からずにレスポンスが返ってくるため、記事を読むリズムを崩さずにストレスなく使えるレベルでした。 - 文脈で覚えやすい
単語だけでなく 「出会った文」 をまるごと保存できるため、見返すと場面が思い出せて学習効率が上がりそうです。 - ログが自動で貯まる安心感
ログが残ることで、複数回調べている単語を抽出したりするのに役立ちそうです。
応用アイデア ― “選択→AI→kintone”
今回使ったロジック「ブラウザで語彙を選択 -> AIに質問 -> 回答をブラウザ上に表示 -> 検索結果をkintoneに保存」を使えば、色々と応用が効きそうです。
例えば、技術用語やその解説を蓄積するのに使えそうだと思いました。
知見の少ない分野の場合、特に英語での短縮語に結構苦戦しています。そんなときに同じようなロジックで文脈から短縮語の意味を調べることができそうです。
また、英単語にしろ、技術用語にしろ、kintoneに情報をためていくことで、あとで復習用のテスト出題アプリなんかも作れそうだな、と妄想中です。笑
Chrome拡張がサクッと自作できた──バイブコーディング
バイブコーディングって？
「こんな動きをさせたい」と自然語で AI に伝え、出てきたコードを自分で試して調整する開発スタイルのことです。
- 設計アイデアやUIの好み → 自分が決める
- コードの骨格や修正例 → AIに提案してもらう
- 動作確認・微調整 → 自分で手を動かす
短時間で動くプロトタイプまで到達 できました。すごい時代ですね！
自分用の簡易ツールだからこそ、気軽に挑戦できたのも大きいです。
なお、バイブコーディングにチャレンジしたことの気付きを記載しておきます。
- バイブコーディングを試して痛感したのは、最初に“必要最小限の機能”だけを AI に伝えることが何より大切ということです。
- 盛り込みたいアイデアを全部並べると、ChatGPT は律義に膨大なコード例を返してきます。
- 結果として動作確認が追いつかず、どこで壊れているのか分かりにくい。
- まずは「右クリックで選択した単語を表示する」だけ、といった 最小スコープ を提示すると、生成されるコードも短く読みやすい。
- 動いたら「OpenAI APIを使って翻訳」「吹き出し位置を調整」「kintone連携を追加」のように一機能ずつ要求を重ねる。
- すると AI からの回答も差分中心になり、修正箇所を頭の中で追いやすくなります。
“段階的に要件を足していく” ことが、バイブコーディングを成功させるコツだと感じました。
まとめ
「調べて終わり」から 「調べて資産化」 へ。
右クリック一発で翻訳＆kintoneへ保存というアイデアを形にすることができました。
チャレンジしてみて、「Chrome拡張の自作は難しそう」という心理的障壁を取り除けたのが良かったです。
ChatGPTが作ったコードについて、「なぜ」を深めることで知識をさらに身に着けていきたいと思います。
興味のある方は、ぜひAIと一緒に試してみてください。
最後までお読みいただき、ありがとうございました！
キミノマホロ for kintone
アールスリーでは業務改善・システム開発を行うサービスを「キミノマホロ for kintone」として提供しています。
また、システム開発グループではkintoneに関するお悩み相談をお受けする「kintone駆け込み相談室」を随時開催しています。kintoneのシステム開発でお悩みの方がいらっしゃいましたらぜひお申し込みください！
アールスリーのシステム開発グループメンバーが、kintoneに関するお悩み相談を無料で何でもお受けします！
毎日開催中！お好きな曜日でお申込みいただけます！
（オンライン or 大阪オフィス来社のいずれか選択可能）
投稿者プロフィール
-
システム開発グループ所属。
滋賀県の琵琶湖近くに生息しています。
kintone CERTIFIED
┗ カイゼンマネジメントエキスパート
┗ システムデザインエキスパート
