項目を選択するとその暗記シートを生成するアプリ(自分用)
暗記シートは覚えたい単語を隠し、その単語の説明を表示することにより、使用者に、その説明から単語を出力させる紙面のことである。
ある「概念名」とその「説明」をどちらも暗記するとき、「概念名」から「説明」を思い出すことと、「説明」から「概念名」を思い出すことはどちらも重要であるが、それらを訓練するには少なくとも二つの紙面が必要である。例えば「硝酸銀(I):AgNO3」という文で「硝酸銀(I)」という名前と「AgNO3」という組成式を覚えたい場合、「X:AgNO3」「硝酸銀(I):X」(隠す部分をXと表している)というように、二つの紙面を用意しなくてはならない。
また、暗記シートを作るうえで、複数の単語が密接に関係していたとき、どう単語を隠せばいいのかという問題がある。例えば「xはyに勝ち、yはzに勝ち、zはxに勝つ」という暗記シートでは、xがグー、yがチョキ、zがパーであることを導き出すのは不可能である。なぜならグーの存在はチョキ、パーが存在しないと成立しないからである。この場合は少なくとも2つの紙面を用意し、「xはチョキに勝ち、パーに負ける」「yはグーに負け、zに勝つ。またzはグーに勝つ」と記述することでこの問題を解決できる。一般に、ある単語を他の隠す単語でしか説明できない場合は必ず紙面が複数になる。
このように、暗記シートでは、覚えるものとものの関係性を重視しなければならない。その関係性は厳密にいえばグラフ構造であるが、ユーザに扱いやすく、コンピュータにも扱いやすい木構造であるとする。(省略しているが、各ノードは概念名と説明のメンバを持つ。)
このアプリは、ユーザーがデータを木構造として入力してもらい、その木構造をlayerに区切り、layerごとに暗記シートを生成する。
Latex, 画像も表示可能。
(下の画像から次のような暗記シートを生成する:「X: 分子の説明」「X: 分子という単語を使った高分子化合物の説明」「X: 高分子化合物という単語を使ったタンパク質の説明, Y: 高分子化合物という単語を使ったプラスチックの説明」「X: タンパク質という単語を使ったアミノ酸の説明」)
全体像は次のとおり。
UI画面は以下のようになっている。
このアプリは印刷して紙面化またはPDF化することを前提としている。
※v-htmlタグを使用し、ユーザーがhtmlを入力できるようになっているため、自由度は高いがSQLインジェクションに貧弱であるという特徴を持っている。あくまでlocalhost内で使用することを前提としている。
Node.js
Vue.js(Vue2)
MongoDB
vue-mathjax
Element UI
Axios
Vue Router
mongoose