英語の語彙力をどうにかするために無料でツールを作った

TL;DR

  • 語彙を入力するとWeblioで訳を表示して、かつ入力履歴を保存するシステムを作った
  • 入力: ショートカット(iOS), Automator(Mac)
  • 履歴保存先: スプレッドシート
  • とにかく動画を見て

背景

会社の人の半分ぐらいが外国人で、日常会話も体感半分ぐらい英語という環境にいる。 自分の英語力が低すぎていて、文法通りに話すことはもう諦めていて、図を書きながら単語を連ねて無理やりコミュニケーションをとっている。 同僚との会話や、ミーティング、Slackで頻繁に意味のわからない語彙が出てきて困っていた。 昔はSlackに登録していたけど、手順が多くめんどくさかったのでこのツールことにした。

f:id:haranicle:20200201154212j:plain
Slackを使っていた時期。手動で意味を調べていた。

使ってみた感想

入力までのステップの少なさは正義だと思った。とにかくこれだけで使おうと思える。 また、どんどん履歴が溜まっていくと経験値が溜まっていく様子が視覚化されるのでやる気がでてとてもよい。 特に、iPhoneで英語の記事を読むとドシドシ新しい語彙を登録できるので、たのしい。 登録した語彙は、できるだけ会社での会話で使ってみるようにしている。3回使うと完全に覚えられる気がしている。

システム構成

f:id:haranicle:20200201004048j:plain

  • GAS + スプレッドシート なのでホスティングコストが無料 (ただしレスポンスが遅い)
  • クライアント側はできるだけ早く実装できて配布できるようにする方針で技術選定
  • iOSのショートカットは共有用のURLを発行して配布できる
  • macOSは、はじめAlfred Workflowで実装しようとしていたけど、Power Packに課金している人しか使えないので、OS標準でインストールされているAutomatorを選択

導入方法

スプレッドシートの設定

作成

スプレッドシートを作成する。ファイル名は何でもOK。 一行目のA〜Eに図のように記入しておく。

f:id:haranicle:20200130023829p:plain

スプレッドシートIDの取得

スプレッドシートのURLは以下のようになっているが

https://docs.google.com/spreadsheets/d/1XXXXXXXXXXXXX-XXXXXXXXXX_XXXXXXXXXXXXXX_XXX/edit#gid=0

1XXX... の部分がスプレッドシートIDなのでどこかにメモしておく。

GASの設定

スクリプトエディタを表示

作成したスプレッドシートの画面で以下の手順で操作し スクリプト エディタ の画面を表示する。

ツール > スクリプト エディタ

ソースコード入力

スクリプトエディタが表示されたら、コードを入力する。 <1から始まるスプレッドシートのIDをここに入力> の部分を先程メモしたスプレッドシートIDに変更する。

f:id:haranicle:20200130023913p:plain

デプロイ

ソースコードが記入できたら、以下の手順でデプロイする。

公開 > ウェブアプリケーションとして導入...

f:id:haranicle:20200130023943p:plain

Deploy as web appの画面が表示されるので、Project version、Execute the app as、Who has access to the appを以下のように入力して Deploy ボタンを押す。

f:id:haranicle:20200201004541p:plain

許可を確認をクリック。

f:id:haranicle:20200130024056p:plain

詳細をクリック。

f:id:haranicle:20200130024111p:plain

(安全ではないページ)に移動をクリック。

f:id:haranicle:20200130024143p:plain

許可ボタンを押す。

f:id:haranicle:20200130200709p:plain

デプロイできました。 表示されるGASのURLは後で使うのでどこかにメモしておく。

このURLが知られると誰でもスクリプトを実行できるようになってしまうので誰にも教えないように

f:id:haranicle:20200130200757p:plain

GASの設定はこれでおしまい。

ショートカット(iOS)の設定

ショートカットアプリのインストール

iPhoneにシートカットアプリをインストールする。

ショートカット

ショートカット

  • Apple
  • 仕事効率化
  • 無料
apps.apple.com

Vocabショートカットを追加

iPhoneで以下のリンクを開く。

www.icloud.com

デフォルトでは共有ショートカットが無効になっているので、以下のようなエラーになる。

f:id:haranicle:20200130202358p:plain

設定アプリ > ショートカット > 「信頼されていないショートカットを許可」をオン の順にタップする。

support.apple.com

再度、以下のリンクをタップする。

www.icloud.com

信頼されていないショートカットを追加 をタップする。

f:id:haranicle:20200130202826p:plain

ホーム画面にVocabを追加したい場合は、マイショートカット > Vocabの...ボタン > 右上の...ボタン > ホーム画面に追加 の順にタップします。

f:id:haranicle:20200130203549j:plain

ショートカットの設定はこれでおしまい。

Automator(macOS)の設定

ダウンロード

こちらからダウンロードする。

drive.google.com

zipファイルを解凍すると、Vocab.workflow が出てくる。 まだ開かないこと

GASのURLの編集とインストール

Vocab.workflow を右クリックし、Automatorで開く。

f:id:haranicle:20200201145110p:plain

Automatorの画面が開くので、ここにGASのURLを入力 のところに先程メモしたGASのURLを入力する。

f:id:haranicle:20200201145304p:plain

Automatorを閉じて、Vocab.workflowをダブルクリックして開き、インストールする。

f:id:haranicle:20200201145453p:plain

コンテキストメニューへの追加

システム設定 > キーボード > ショートカットタブ > サービス > 「Vocab」にチェックを入れる の順に操作する。

これで、コンテキストメニューに表示されるようになります。

Chromeで以下のURLを開き、任意の単語を選択肢右クリックしてみる。

https://basset.ai/en

サービスでチェックチェックが付いているアイテムが多いと、以下のように サービス 配下のメニューに入ってしまうので、サービスのチェックが入っているアイテムを少なくするのがオススメ。

f:id:haranicle:20200201150101p:plain

また、既知の問題として複数のアプリケーションで動作しません(SlackやFireFoxなど)。 改善方法をご存じの方がいれば教えて下さい。

Automatorの設定はこれでおしまい。

改善点

  • いい感じのタイミングで復習するようにPush通知を送ってほしい
  • Automatorの既知の問題を修正したい
  • Macからも直接入力で単語の登録ができるようにしたい
  • iPhoneウィジェットに登録した単語を表示したい

気が向いたら & 需要がありそうならいつかやりたい

宣伝

所属しているで2月8日に虎ノ門ヒルズであるStartup Aquariumというキャリアイベントに参加します。 まだ参加申し込みできるみたいなので、ご興味がある方はぜひポチってみてください。 登壇とかはしませんが、僕も行きますので興味ある方は話しかけてあげてください。

coralcap.co