経緯
11月から新しい職場で働き始めて、新しく耳にする言葉がたくさん出てきました。
私の場合はNotionのデータベースに覚えたい言葉を整理しているのですが、普段の会話の中で突然出てきた言葉に対し、「メモ → 意味を調査 → Notionへ登録」という操作は時間がかかるので、効率化したいと思いました。
そこでElectronでシステムトレイに常在するアプリケーションを作ることにしました。
Electronとは
Electronとはデスクトップアプリケーションを作成するためのフレームワークで、JavaScript、HTML、CSSを使用してクロスプラットフォーム（Windows、MacOS、Linux）で動作するアプリケーションを構築できます。
構成イメージ
今回の記事のソースコード
ちなみにアプリ名は「Ogura OpenAI and Notion」略して「Ogura AN」です。
動作環境
MacBook Pro M3
Node.js 22.8.0
事前準備
OpenAIのAPIキーの取得
https://openai.com/index/openai-api/ で登録し、APIキーを発行します。
※ 従量課金なので、念の為Budget Limitは設定しておくのがおすすめです。
Notion関連
データベースの作成
下記のようなテーブルを作成します。
| Word | Meaning | Usage | Status | Tags | CreatedAt | |
|---|---|---|---|---|---|---|
| カラムの意味 | 用語 | 意味 | 使い方 | 習得ステータス(慣れてない/慣れた/習得済み) | タグ | 作成日 |
| カラムタイプ | title | rech_text | rech_text | status | multi_select | date |
インテグレーションシークレットキーの取得
https://www.notion.so/profile/integrations でインテグレーションを作成します。
作成後にシークレットキーが発行されます。
保存先のデータベースのコネクト
データベースのページの設定から、作成したインテグレーションにコネクトします。
保存先のデータベースのIDを取得
データベースのURLをコピーし、以下のXXXの部分の文字列がIDになります。
https://www.notion.so/XXXXXXXXX
アプリケーションの準備
セットアップ
ソースコードをcloneし、下記のコマンドを実行します。
$ sh setup.sh
.envファイルに取得したキーを設定します。
OPENAI_API_KEY={OpenAIのAPIキー}
NOTION_SECRET_KEY={Notionのインテグレーションのシークレットキー}
NOTION_DATABASE_ID={対象のデータベースのID}
使い方
アプリケーションのビルドと起動
ソースコードのrootディレクトリで以下のコマンドを実行します。
$ npm run build && npm run start
Ogura Anが起動し、システムトレイにアイコンが表示されます。
一番左に「餡」と表示されている、茶色のアイコンです。
アプリを使う
「ワード」に調べたい言葉を入れ、回答の精度を上げるためにその言葉が使われている文章などを「文脈」に入れます。
「文脈」は入力しなくてもOKです。
「調べる」を押すと結果のJSONが出力されます。
「登録」を押すと、Notionのデータベースに登録されます。
将来の展望
- 自動起動
- UIのスタイル調整
- OpenAIから取得した結果を調整できるようにする。
- やり直しボタンの実装。
- データベースからデータを取得して、習得度のテストができるようにする。
ご覧になってる方も、もし良い案があればください。餡だけに。
参考資料
最新版で学ぶElectron入門 ウェブ技術でPCアプリを開発しよう
Notion Developers Database properties
Discussion