Zenn
💯

Notion を使った英単語クイズアプリ

2024/06/08に公開
Python
Notion
英語学習
Notion API
クイズ
idea

機能

  • ランダムに表示されるが、間違えた数のカウントが多いものほど選ばれる
  • 解答を自分のタイミングで表示できる
  • 間違えたらカウントを増やせる
  • 自分で止めるまで永遠に続けられる
  • そもそも英単語帳はNotionで管理されているので、結構自由がきく

これを作った理由

  • 元々英語の勉強をしている時に、わからなかった単語やフレーズを記録していたのですが、その日〜数日間の復習に使っているだけで、あんまり記録している良さがないなと感じ、クイズアプリみたいにランダムにクイズにしたいなと思ったからです
  • そのようなWebアプリがないかサッと調べたのですがまだ存在せず、Notionを活用したアプリ作成の練習もかねて自分で作ってみようと思ったからです（もしかしたら既に存在するかも）
  • GitHubを全然使っておらず、ちょっと充実させていきたいと思っているので、そのきっかけとして簡単なものを作りたかったからです
  • Zenn や note でなんか作ったものを報告してみたかったからです

NotionAPIの使い方を調べるところから始めて2時間弱とかでサッと作ったので、すごく愚直な書き方をしていて、スマートではない気はしますが、個人的に使う分には全然十分です。
まだ python プログラムですが、そのうちWebアプリにします。

使い方

python と Notion API を使います。
python のセットアップは割愛します。

  1. こんな感じ（自分の英単語帳です）の Notion DB を作ります。
    プロパティとかは自分のに合わせて作っているので、これを複製するのが早いです（いずれはもうちょっと汎用性高めにしたい）。
    問題をページのタイトルにして、解答・解説をページ内コンテンツにします。
    ちなみにCLIでクイズは進むので、画像は表示しません。
  2. Notion Integrate を作ります。API Key みたいなものです。ここで+のとこをクリックして作ります。これなどを参考にして作ります。今回は "EnglishQuiz" という名前にしました。
  3. 1で作ったDBに、2で作った Notion Integrate を紐づけます。作成したAPIキーで、このページにアクセスできるようにするため、みたいな感じです。DBのページの右上の…をクリックして出てくるリストで、以下のようにして紐づけます。
  4. これをクローンします。今の所.pyファイル１つで、特に特殊なライブラリを使うわけでもないので、NotionAPIQuiz.py の中身をコピペしてもらうのでも使えます。
  5. ファイル中 DB_ID と INTEGRATION_KEY を書き換えてください。
    1. DB_ID は、1で作ったページのURLで言うと、"https://www.notion.so/.../DB_ID?v=..." となります。自分の英単語帳のページ(1のリンクのページ)でいうと、"71c7a7568dae4b888ca8cb7239349d84" です。
    2. INTEGRATION_KEY は、ここから2で作った Integration を選んで、Secrets -> Show -> Copy の順でクリックすればコピーされます。
  6. .py ファイルを実行すればアプリが起動します。

以下は起動した後の操作です。

  1. DBのページを全て読み込みます。自分は現在1000弱ページがあって、15秒弱かかります。プロパティを反映してランダムに取り出す処理を書きたかったので、全て読み込む必要がありました…
  2. 表示する（自分のDBにある）プロパティを選択します。デフォルトでは全部表示します。編集したい場合は何か文字を入れてからエンターを押してください。
  3. プログラムを終了する方法を選択します。エンターを押すと、プログラムを終了するまでクイズを続けるモードになります。そうでない場合は、何か文字を入れてからエンターを押すと手動で止められますが、クイズの後毎回終了するか聞かれてめんどいです。
  4. クイズが始まります

    ちなみにここでURLも表示されているので、何か編集したくなったらNotionで開いて直接編集してください。エディタによるのかもしれないですが、自分が使っているVSCodeではターミナルからでも command+クリックでURL開けます。
  5. エンターを押すと解答が表示されます。
  6. 間違えたら何か文字を打ってからエンターを押します。するとカウントが+1されます。こんな感じで「カウントを1増やしました」と表示され、プログラム終了モードの場合は即座に次のクイズになります。間違えなかったらエンターを押せば次のクイズにいきます。

    ちなみにこれが cannonical のページです。間違えたので、カウントが増えてます（この記事以降間違えてまたカウントが増えてるかもです）。

TODO

  • フィルタリング機能をつける
    例えば、"phrase" のみに絞ってクイズを出す、みたいなことができるようにする
  • Webアプリにする

Discussion