Quiz モードはこんな感じ(動画)
このアプリを作った背景、Anki との棲み分けについての僕の考えの Tweet
英単語を大量に覚えたい時、初期の詰め込み学習を助けるツール。
具体的には、英単語の画像イメージを見ながら単語を詰め込めるアプリを提供する。
Intensive な詰め込みを加速させることがを意図しており、Anki などの完全な暗記管理アプリの代わりにはならない。むしろ合わせて使うことを想定している。
関連プロジェクト build-kikutan と連携させることで
- 単語学習動画の作成(build-kikutan 側が cram-vocabulary のHTML 表示をパラパラ漫画動画にする)
- cram-vocabulary に音声データを提供(build-kikutan から cram-voabulary に音声を一括生成、インストール)
- あなたは、覚えたい単語リストを持っている。(単語リスト: 英単語、意味がタブ文字で区切られたテキストファイル)
- その単語リストを
bach-image-retrieve.pyに渡して、単語のイメージを画像検索し、スクリーンキャプチャを集める。 - そして
slideshow/index.htmlを開き、単語リストを開くと、画像を見ながら単語学習ができる！
- Mac の Chrome ブラウザで使うことを想定している
- もしかしたら Windows でも動くかも知れないが確認していない。
-
Chrome Browser を自動操縦するためのドライバ Chrome driver をダウンロードして、 PATH の通ったとこ(
/usr/local/binとか)に置く。 Shell からchromedriver -hと打って、help が出たらOK -
python selenium ライブラリ + pillow の install
pip install selenium pillow
簡単なサンプルプロジェクトで自分でやってみよう。
使う単語リストは、sample-words.txt だ。
大まかには以下の２ステップだ。
時間は10分くらい？
- 画像集め
- 画像を見ながら単語学習
sample-words.txt の中身は以下の様になっている。英単語と、意味が タブ(\t)で区切られたテキストファイルだ。
これらの単語のイメージ画像をこれから集めて保存する。
apple りんご
orange オレンジ
sad 悲しい
happy 楽しい
以下のコマンドを実行しよう
$ python bach-image-retrieve.py sample-words.txt5秒ぐらい待とう。以下の様な結果がでるはず。
デフォルトで、Window サイズは 1280x720 でキャプチャし、slideshow/imgs ディレクトリに保存する。
$ python bach-image-retrieve.py sample-words.txt
window size {'width': 1280, 'height': 720}
output dir slideshow/imgs
sample-words.txt : start
[SAVE] 001: slideshow/imgs/apple.png
[SAVE] 002: slideshow/imgs/orange.png
[SAVE] 003: slideshow/imgs/sad.png
[SAVE] 004: slideshow/imgs/happy.png
$画像集めはこれで DONE !!
スライドショー app を開いてみよう
$ open slideshow/index.html
画面には EMPTY! と表示されているはずだ。まだ単語リストを設定していないからだ。
画面を下にスクロールすると、Drop file here という文字が見えてくる。
この領域に単語リストを sample-words.txt をドロップしよう。
で、今度は上にスクロールしてもとに戻ろう。
最初の単語である りんご の画像が背景にでるはずだ。やった！ では、使っていこう！
ちなみに、移行はブラウザを再起動しても、単語リストと現在のカードは復元される。
別のファイルを使いたくなったら、今回のように下にスクロールて、別のファイルをドロップすればいい。
- 基本的にキーボードで操作するアプリだ。
?でヘルプがでる。もう一度押すと消せる。最初はヘルプ出しっぱなしにして、全てのキーを押して動作を理解してみよう。
- 重要なのは、
n(next) だ。基本、学習中はnのみで次に進んでいくのが良い。単語の意味が出てなければでるし、すでに出てれば次の単語に進む。要するにdo what I meanしてくれる。 - 不要な単語は
-で消せる。uで消したものをundoできる。 - スクロールダウンするとアクティブな単語リスト、消した単語リストを見られる。ダウンロードも出来る。
- アクティブな単語リストは、単語上でダブルクリックすると、その単語がカレントになる。特定の単語から始めたければ、このテキストをブラウザの検索機能で検索し、単語をダブルクリックすればいい。
1(toggle-word),2(toggle-definition) のキーで、それぞれのフィールドを隠すか、出すか、調整できる。2で定義を隠せば、簡単な意味あてクイズになる。- フルスクリーンで使用することを想定してつくったので、フルスクリーンで使って〜
このステップもDONE！ あとは自分の好きな単語リストでやってみよう。
bach-image-retrieve.pyを動かすにはseleniumのインストールと、Chrome webdriver のインストールが必須。- キャプチャする時の、Windowサイズと、保存先ディレクトリは変えられる。
-hでヘルプが出る。単語リストファイルは、複数渡せる。
$ python bach-image-retrieve.py -h
Usage: bach-image-retrieve.py [options] word-list
Options:
-h, --help show this help message and exit
-d DIR, --dir=DIR Directory to write captured images.
-w WINDOW, --window=WINDOW
Window size. 1280x720 by default.
-e ENGINE, --engine=ENGINE
Image search engine to use one of ['bing', 'google',
'bing_unsafe', 'google_unsafe']
-
作者は Mac の Google Chrome で動かしています
-
Chrome のブックマークバーに登録しておけば、ワンクリックでいつでも単語学習が開始できる！
-
どんなキーマップがあるの？コマンドは何が利用できるの？設定は？設定の意味は？ → このファイル見て下さい
-
キーマップを変えられる？ → 変えられる。
slideshow/config.jsを編集して下さい。 -
slideshow/config.jsのsearchSystemDictionary:ってなに？- Dictionary.app でも自動で単語検索してくれる機能。つかうには
searchSystemDictionary: trueにする。- slideshow app 使っている時は、
python open-dict.pyで簡易プロキシ立ち上げ(上げっぱなしにしておく)- このプロキシは以下の事をやっている。
- Chrome ブラウザから直接
dict://{word}を開けないので、httpにしている - 検索後 Dictionary.app にフォーカスが取られるが、それを Chrome に戻す。
-
音声再生対応している？ → している。build-kikutan から音声を一括インストールできる。
app_soundstask がそれ。タスク実行後に設定のインストラクションでるのでそれをみて設定すれば良い。 -
例
Config.playAudio = true
Config.playAudioFields = [1, 2] // `sounds/${word}-${fieldNo}.wav` 再生する。 word(fieldNo=1), definition(fieldNo=2)画像検索エンジンは、Google 以外にも、Microsoft の Bing もある。
Safe サーチ(キツイ画像を隠すか否か)の有効無効によっても見つかる画像が異なる。
ここではデフォルトの Google 画像検索に加えて、Bing の画像を表示する技を説明する。
まず、あなたは以下のコマンドで、画像を保存したはずだ。画像は slideshow/imgs に保存される。
$ python bach-image-retrieve.py sample-words.txtGoogle 画像の結果は概ね満足だが、たまにイマイチなものもあり、Bing のも見たいな、と感じる場面も増えてきた。
ちなみに Bing の検索結果は b(safe), B(unsafe) でそれぞれ見られる。
が、毎回のオンデマンドで取得するのではなく、全てかき集めといて一発で表示したい。そうすれば表示の待ち時間も無くなるし。
そういう機能がある。以下のコマンドで Bing の結果を slideshow/imgs_bing に保存してみよう。
$ python bach-image-retrieve.py -e bing -d slideshow/imgs_bing sample-words.txt終わったら config.js に以下の設定を追加して、imgs_bing を画像ディレクトリとして指定しよう。
slideshow/config.js
Config.imageDirectories = ['imgs', 'imgs_bing']
// Config.rotateAllImageOnNext = false // default trueアプリを使用中に、i を押すと、imgs_bing に保存された画像に差し替わる。やってみよう。
ちなみに、imgs_bing を最初に表示したければ、['imgs_bing', 'imgs'] とすれば良い。
また、上のコメントにも書いたが、デフォルトで、 rotateAllImageOnNext が true になっており、今回のように、画像ディレクトリが複数設定された場合、next コマンドの最後の方で、自動的に全部のディレクトリの画像を表示するようになる。
これが、「毎回全部見なくていい。必要なときのみでいい」と思うなら、↑コメントを外してこの機能を無効にすることも出来る。
ちなみに、僕は普段このアプリを Nintendo Switch のコントローラーで操作しており、右手にはコントローラーを持っているので、i は押しにくい。なので、以下のように左手で押せる r に割り当てている。
Keymap = {
r: 'rotate-image'
}- 2019.02.18 現在、ALC-SVL12000 のボキャビルに取り組んでいる。
- 以下が設定ファイル:
config.js。 filter の部分のみ詳細に説明した。
Config = {
searchSystemDictionary: false, // macOS only
playAudio: true,
playAudioFields: [1, 2],
// quizChoiceCount: 4,
quizAutoDeleteCorrectCard: true,
imageDirectories: ['imgs', 'imgs_bing'],
rotateAllImageOnNext: false,
quizChoiceTextFilter: {
definition: content => {
// 以下の２つの事をやっている。
// 1. 半角、または全角カッコの中に半角文字が含まれてたらカッコごとまるっと削除。
// scripture という単語の選択肢で、"【名】（通常 the Scripture で）聖書" と選択肢に出てしまうと
// 答えが分かってしまうのでまるごと消して、選択肢が "【名】聖書" となるようにしている。
// 2. "<br>" または "、" で分割し、最初のフィールドをピックアップ。
// 長いとヒントが豊富になって問題が簡単になってしまうし、読む文字が多いとサクサクこなせないので。
// 例: "【副】反対に、逆に、対照的に、逆に言えば" を "【副】反対に" にして選択肢に出す。
const regex = new RegExp('[（(][^)）]*?\\w+[^)）]*?[)）]', 'g')
return content.replace(regex, '').split(/<br>|、/)[0]
}
}
}
Keymap = {
t: 'toggle-caption-once',
r: 'rotate-image'
}- パソコンは Mac. 操作は殆ど Nintendo Switch の右コントローラー でやっている。
- これ を参考にした。
- 設定は以下の用にしている。右手で持って、親指で quiz の選択肢を選び、右人差し指で next を押している。十字キーは最初設定していたが、誤操作が頻発するのであえて何も設定しsないことにした。
