はじめに

Evernoteを暗記ノートに変換するアプリ、『E-memorize』を作りました。

▼操作イメージ

現在、Herokuにデプロイして公開しています。

作った人

・エンジニア2年目
・Rails学習中

どんなアプリ？

『赤シートで隠して暗記するタイプの紙の単語帳』をデジタルで作れるようなイメージです。
Evernote上で作成したノートの共有用URLをアプリ内に入力すると、蛍光ペン部分の文字列が隠れた状態で表示されます。
それぞれの蛍光ペン部分をクリックすると、隠れていた文字列が表示されます。
また、画面上部のボタンから蛍光ペンの色ごとに表示/非表示の一括切り替えができます。

実際に変換した暗記ノートのサンプルはこちらです。
※変換前のノートはこちら

なぜ作ったの？

・自分が資格の勉強する時に使いたかったから
・Railsの学習がしたかったから
・「コロナ禍でリモート授業が増えてるから、学生のテスト対策プリントとかもデジタルで気軽に共有できたら便利かな……」と考えたため

こだわりポイント

1. 作った暗記ノートを気軽に共有できる

E-memorizeで変換した後のノートについては、Evernoteの共有用ノートと同様に、「URLを知っている人なら誰でも見られる」仕様になっています。
従って、

資格試験対策用の暗記ノートをSNSで大勢の人に共有してみる
学校のテスト対策用のノートをLINEで友達に共有する

といった使い方が可能です。

※注意

暗記ノートのURLをWebサイト上やTwitterの公開アカウント等に載せると、Googleなどの検索結果に載る可能性があります。ノートを不特定多数の人に見られたくない場合はURLの取り扱いに注意です。
現在、非公開ノートの変換には対応していません（「気軽に暗記ノートを共有できるアプリにしたい」という意図があるため）。

2. 色ごとに表示/非表示を一括変更できる

例えば英語の単語帳を作った場合、『英単語は赤色』『日本語訳は緑色』というように色分けして蛍光マーカーを塗っておくと、

赤を非表示にして　日本語→英語　の暗記
緑を非表示にして　英語→日本語　の暗記

という2種類の学習ができます。

3. スマホから見やすい

デザインはBootstrapを使ってレスポンシブにしていますので、電車の中や寝る前などに気軽にスマホから暗記学習ができます。
ただし、ノート内に大きな表や図を挿入していると、スマホで見たときに横に長くなってしまうので注意です。

使ったもの

・Rails 5.2.4.4
・Evernote API
・Bootstrap
・Heroku(無料プラン)
・GAS(15分ごとにバッチを叩き、スリープしないようにした)

仕組み

ノート内容はEvernote API用のgem(evernote_oauth)を使って取得しています。
下記コード内のget_noteメソッドのところです。

app/models/note.rb

class Note
  attr_reader :title, :content

  def initialize(guid, note_key)
    raise RuntimeError unless validate_param(guid) && validate_param(note_key)

    result = get_note(guid, note_key)
    @title = result.title
    @content = result.content
  end

  private

  def validate_param(value)
    value.presence && /^[a-zA-Z0-9!-\/:-@\[-`{-~]+$/.match?(value)
  end

  def get_note(guid, note_key)
    client = EvernoteOAuth::Client.new(token: EverSettings::AUTH_TOKEN, consumer_key:EverSettings::OAUTH_CONSUMER_KEY, consumer_secret:EverSettings::OAUTH_CONSUMER_SECRET, sandbox: EverSettings::SANDBOX)
    note_store = client.note_store
    auth_result = note_store.authenticateToSharedNote(guid, note_key, "")
    shared_note_store_url = auth_result.noteStoreUrl

    noteStoreTransport = Thrift::HTTPClientTransport.new(shared_note_store_url)
    noteStoreProtocol = Thrift::BinaryProtocol.new(noteStoreTransport)
    noteStore = Evernote::EDAM::NoteStore::NoteStore::Client.new(noteStoreProtocol)

    noteStore.getNote(auth_result.authenticationToken, guid, true, true, true, true)
  end
end

また、蛍光ペン部分の文字列の表示/非表示処理はJQueryとCSSで実装しました。

頑張ったところ

Evernote APIの文献が少なく、使い方を理解するのが大変でした……。
というか正直今もよく分かってないです。色々試しまくってたら成功した系なので、よく見たら間違ってるかもしれないです。

今後の課題

余裕があればダークモードデザインを実装したい

参考文献

【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】
Getting Started with the Evernote API - Evernote Developers
その他、Evernote APIに関するたくさんのウェブサイト

Evernoteを暗記ノートに変換するアプリ作ってみた【Rails×Evernote API】