見出し画像

【GAS】Google Apps Script 活用事例  ついに、念願のEvernote連携が出来るLINE BOTを作ったど〜!!

GASを学ぶ際、ゴールの一つとして思い描いていたのは、Evernoteと絡めて何か作りたいって事でした。それが今回やっと作れたので、記事に残しておきたいと思います。

ネタバレをしてしまうと、API連携とか大したものではなくて、LINE OCRで読み取った内容をEvernoteの転送用アドレスに送信するというもの。すごくシンプルです。スプレッドシートにも記載するのも悪く無いけど、個人的にはEvernoteの方が嬉しい仕様でした。

OCRとは、画像からテキストを抽出する、まぁ、凄まじいテクノロジーですよ!!

上記のエントリーを久しぶりに読んだら、端折り過ぎて、LINE DEVELOPERS側の記述が全然無い。これは、ちょっと初心者には厳しいかもしれないという事で、今回は、丁寧に解説をしたいと思います。1ヶ月間、無料にて公開し、それ以降、有料エリアの設定をしたいと思います。

LINE BOTのトーク画面で、カメラを起動して、文字認識、または、OCRに合わせる

画像4

暗い部屋で、写真を撮ったので、画質が悪いですが.....指を左右に動かして、文字認識に合わせます。名刺を撮影して、Evernoteに送るなんて事も出来てしまいます。

画像5

画像6

んー100%の精度とは言えませんが、これだけでも随分、楽になります。
書評記事と書く時に、目次ページとかOCR化すると、ブログ執筆が捗りそうな気がするな。

スクリーンショット 2020-04-11 22.40.40

実は、iPhoneのスクリーンショットなどもOCRでテキスト変換出来ます。

画像2

スクリーンショット 2020-04-11 21.49.30

作成手順は以下の通りです。

1.  LINE DEVELOPERSに登録する
2. プロバイダや、アプリ名などを決める
3. アクセストークンを発行する
4. Google Driveからスクリプトエディタを開く
5. 公開 > ウェブアプリケーションとして導入を選択
6. https://script.google.com/macros/......から始まるURLをコピー
7. LINE DEVELOPERSに戻り、Webhook URLを登録

1.  LINE DEVELOPERSに登録する

スクリーンショット 2020-04-11 22.52.26

今回は、Messaging APIを使います。

2. プロバイダや、アプリ名などを決める

プロバイダとは、ネット接続とは関係なく、コンテンツの提供者みたいな感じです。

スクリーンショット 2020-04-11 22.55.04

今回、初めてLINEアプリを作る場合は、作成をクリックしてください。ここでつまずく要素は、おそらくないと思うので、大丈夫だと思います。自分の名前とかで良いと思います。

完成したら、プロバイダーをクリックして、新規チャンネルを作成します

スクリーンショット 2020-04-11 23.02.04

スクリーンショット 2020-04-11 23.06.33

Messaging APIを選んでください。メールアドレス、目的、業種等が入力フォームの必須項目になっています。

スクリーンショット 2020-04-11 23.13.52

チャンネルアイコンなどは、後でLINE Official Account Managerで変更し直すことが出来ます。

あくまで、Webhook URLやアクセストークンなどの技術的な設定をするのが、LINE DEVELOPERSで、他の応答設定などは、LINE Official Account Managerで行います。最初は、「アレ?どっちがどっちだっけ」みたいに混乱します。

3. アクセストークンを発行する

Messaging APIの設定をします。

スクリーンショット 2020-04-12 10.37.33

一番下までスクロールします。

スクリーンショット 2020-04-12 10.41.00

チャンネルアクセストークンという項目があるので、右のボタンをクリックします。(※上記は、作成済みのチャンネルを使って説明しているため、再発行になっていますが、初期状態では、発行されていません。)

4. Google Driveからスクリプトエディタを開く

普段であれば、Google Spreadsheetを開いて、ツール、スクリプトエディタのように進み、そこに出てくるエディタにソースコードを書いているかと思うのですが、今回は、Spreadsheetを使わず、Evernoteに転送します。そのため、standalone scriptで、書いていきます。

スクリーンショット_2020-04-12_10_48_14

開いたら、ソースコードを貼り付けます。

全体のソースコードはこんな感じです!!

function doPost(e) {
 const ACCESS_TOKEN = '***********************';
 // WebHookで受信した応答用Token
 const replyToken  = JSON.parse(e.postData.contents).events[0].replyToken;
 
 // ユーザーのメッセージを取得
 const userMessage = JSON.parse(e.postData.contents).events[0].message.text;
 const url = 'https://api.line.me/v2/bot/message/reply';
 
 
 // [ノートの件名] ![リマインダーの日時(任意)] @[ノートブック名] #[タグ]
 const date  = new Date();
 const today = Utilities.formatDate(date, 'JST', 'yyyy/MM/dd');
 
 const sliceText   = userMessage.slice(0,12);
 const noteTitle   = today + ' ' + sliceText + '@002_LINE_OCR';
 const mailAddress = '*************@m.evernote.com';
 const message1    = 'Evernoteに、転送されました。'; 

 GmailApp.sendEmail(mailAddress, noteTitle, userMessage); //recipient, subject, body
 
 /*LINEに転送完了というメッセージを送る*/
 UrlFetchApp.fetch(url, {
   'headers': {
     'Content-Type': 'application/json; charset=UTF-8',
     'Authorization': 'Bearer ' + ACCESS_TOKEN,
   },
   'method': 'post',
   'payload': JSON.stringify({
     'replyToken': replyToken,
     'messages': [{
       'type': 'text',
       'text': message1,
     }],
   }),
 });
 return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
const ACCESS_TOKEN = '***********************';

上記の '***********' アスタリスクの中を先ほど設定したチャンネルアクセストークンを貼り付けます。

次にEvernoteの転送先アドレスの確認します。Macの場合は、Evernoteのアプリを開いた状態で、ヘルプ→アカウント設定の順にクリックします。

スクリーンショット 2020-04-12 10.59.18

スクリーンショット 2020-04-12 11.01.28

const date  = new Date();
const today = Utilities.formatDate(date, 'JST', 'yyyy/MM/dd');
 
const sliceText   = userMessage.slice(0,12);
const noteTitle   = today + ' ' + sliceText + '@002_LINE_OCR';
const mailAddress = '*************@m.evernote.com';

先ほど、調べたメールアドレスを、*************@m.evernote.com と差し替えます。

今回、保存先のノートを@002_LINE_OCRとしていますが、ここは、任意のノートを指定してください。指定しなくてもデフォルトのノートに転送してくれます。

タイトルは、日付と、読み取り内容の12文字が表示されます。

スクリーンショット 2020-04-12 11.07.44

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

スクリーンショット_2020-04-12_11_10_56

6. https://script.google.com/macros/......から始まるURLをコピー

スクリーンショット_2020-04-12_11_12_20

スクリーンショット_2020-04-12_11_14_10

7. Current web app URLをコピーして、LINE DEVELOPERSに貼り付けします。

スクリーンショット 2020-04-12 11.17.59

編集を押して、貼り付けてください。

次にデフォルトの応答設定を止めます。デフォルトの応答設定とは、ユーザーが送ったテキストチャットに、自動で反応する機能です。デフォルトでは、「申し訳ございません。こちらのチャットからは回答出来ません」みたいな内容が登録されているので、止めます。

スクリーンショット 2020-04-12 11.21.32

あとは、遊ぶだけ

スクリーンショット 2020-04-12 11.26.40

BOTのQRコードがあるので、遊んでみましょう!!

こんな記事も書いています。

お仕事募集しています。

僕は、Google Apps Scriptを書くのが、大好きです。せっかくなら好きな事をして生計を立てられたらなぁと考えています。coconaraで、Google Apps Scriptを教えるコースを出品しています。よかったら、覗いてみてください。


この記事が気に入ったらサポートをしてみませんか?