【GAS】本の表紙を撮影するだけのお手軽読書ログ

# はじめに

本の表紙を撮影して、表紙の文字を読書ログとしてスプレッドシートに書き出すというものをつくっていきます。

つかうものはGASとIFTTTのみ。こちらの面でもお手軽。GASの追加とIFTTTの会員登録が済んでいれば30分程度でつくれます。

# 完成イメージ

|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/dc0e6bf0-9f02-d86f-57e5-69e0e599f338.png" width="500px">
|:-:|


# 1.事前準備

### スプレッドシートの作成

IFTTT（Googleドライブの更新時）用と、読書ログ用の計二つ作成します。

IFTTT用は、マイドライブ > IFTTT > Google Drive に、『imgLog』スプレッドシートを作成します。

|![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/1f9ac4da-3e55-086a-694c-7f542dd836e6.png)
|:-:|

読書ログ用は、マイドライブ直下に『読書ログ』スプレッドシートを作成します。

|![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/78bd2b95-86fa-b653-11de-fc710a36dd16.png)
|:-:|

### 表紙写真アップロード用のフォルダ作成

今回はマイドライブの下に『img』フォルダを作成し、こちらに表紙の写真をアップロードしていくことにします。

|![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/dada596a-1022-3d08-4823-9692dced8fd5.png)
|:-:|



以上で事前準備が完了です。

# 2.IFTTTの設定

[IFTTT](https://ifttt.com/)にアクセスし、ログインを（まだの場合は会員登録も）します。

できたら、『もしGoogleドライブが更新されたら、Googleスプレッドシートに情報を書き出す』というアプレットを作成していきます。

アカウントアイコンをクリック > ①Create

|![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/c72ae751-bd63-3c97-9de3-a8c81f250e69.png)
|:-:|

②This

|![5 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/af2a3400-37d1-23bc-24a1-f97c6fa460b0.png)
|:-:|

③Google Drive

|![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/92670ea5-96d5-9a53-5bc0-f4b9c0e481a2.png)
|:-:|

④New file in your folder

|![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/05552add-35cd-d9cf-93c2-d08759cfc2ad.png)
|:-:|

⑤Drive folder path：img（写真アップロードフォルダ名）
入力後、⑥Create trigger

|![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/c449bd88-3742-8c4b-af5b-527896fe65a0.png)
|:-:|

⑦That

|![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/4b936288-24d4-094c-3273-29524ea5f9bf.png)
|:-:|

⑧Google Sheets

|![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/d55c70f1-45fa-357d-5062-9ec105bd4607.png)
|:-:|

⑨Add row to spreadsheet

|![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/276a433c-b6ca-fa4c-a302-274a11c90199.png)
|:-:|

⑩Spreadsheet name：imgLog
⑪Formatted row：初期値
⑫Drive folder path：IFTTT/Google Drive
入力後、⑬Create action

|![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/7594aa82-66de-1fae-c32e-499eb8f4a299.png)
|:-:|

⑭必要に応じて分かりやすい名前に変更
⑮Finish

|![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/44fac149-b98f-ce0c-85fa-a356ff5064ba.png)
|:-:|

以上でIFTTTの設定が完了です。

# 3.GASの設定

IFTTT更新用の『imgLog』スプレッドシートに設定していきます。

### APIの追加

Googleドライブの操作にはAPIの追加が必要になるので、設定しましょう。

①リソース > ②Googleの拡張サービス

|![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/56d64950-85cf-ec56-cb23-65829a1c3523.png)
|:-:|

Drive API ③ON > ④OK > リソース > Googleの拡張サービス > ⑤適用されるあらゆるサービスとAPI

|![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/286395a3-9661-bf05-2fad-aec33a8348cb.png)
|:-:|

⑥メニューアイコン > ⑦APIとサービス > ⑧ライブラリ

|![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/ed02c7c3-3fea-1f96-928d-fe7028740aef.png)
|:-:|

⑨Google Drive API

|![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/c974c404-0709-df39-f448-7e6b5bc88cde.png)
|:-:|

⑩有効にする

|![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/effa6c42-6d80-753d-efb7-0b10864c7236.png)
|:-:|

以上でAPIの追加は完了です。

### コードの記述

１）IFTTTで更新したスプレッドシートを読み込んで　⇒　２）該当写真を元にGoogleドキュメントを作成して　⇒　３）Googleドキュメントのテキストを取得して　⇒　４）読書ログ用スプレッドシートに書き込む
という流れになります。

```js:コード.gs
function myFunction() {
  // １）IFTTTで更新したスプレッドシートの読み込み
  var data = getLatestData();
  // ２）写真を元にGoogleドキュメントを作成
  var imageBlob = UrlFetchApp.fetch(data[2]).getBlob();
  var resource = {
     title: data[1]
    ,mimeType: imageBlob.getContentType()
    ,parents: [{'id': '***************'}] // 画像が格納されているフォルダのフォルダID
  };
  var options = {
    ocr: true
  };
  var docs = Drive.Files.insert(resource, imageBlob, options);
  // ３）Googleドキュメントのテキストを取得
  var docId = docs.getId();
  var doc = DocumentApp.openById(docId);
  var coverText = doc.getBody().getText().replace(/\r?\n/g," ");
  // ４）読書ログ用スプレッドシートに書き込み
  var ssId = '***************'; // 読書ログスプレッドシートID
  var ss = SpreadsheetApp.openById(ssId).getSheetByName('シート1');
  var LastRow = ss.getDataRange().getLastRow();
  arrData = [[data[0] ,coverText ,data[2]]]; // 日付 ,タイトル ,URL
  ss.getRange(LastRow+1,1,1,arrData[0].length).setValues(arrData);
}

/**
* 最新アップロード情報取得
* @param none
* @return {object[]} [日付,タイトル,URL,ディレクトリ]
*/
function getLatestData() {
  var ssId = '*****************'; // IFTTT更新スプレッドシートID
  var ss = SpreadsheetApp.openById(ssId);
  var rng = ss.getSheetByName('シート1').getDataRange();
  rng.sort([{column:1,ascending:false}]); // 日付降順
  var values = ss.getRange('A1:D1').getValues();
  return values[0];
}

```

以上でコーディングが完了です。

### トリガーの設定

IFTTT用スプレッドシート（『imgLog』）が更新されたら先ほどの処理を流したいので、このままトリガーの設定を行っていきます。

①編集 > ②現在のプロジェクトのトリガー

|![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/a5b8bffb-3419-171e-409d-f7636a80e36a.png)
|:-:|

③トリガーを追加

|![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/7de5a168-97b1-244d-7ebf-afca082b16cc.png)
|:-:|

④実行する関数：myFunction
⑤イベントのソースを選択：スプレッドシート
⑤イベントの種類を選択：変更時
設定後、⑦保存

|![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/9cdf51b9-cf2a-43d7-8072-141fd8e45f4f.png)
|:-:|

以上でトリガーの設定が完了です。

# 4.動作確認

|![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/89a687ff-0676-b77b-ca7d-3696b27b7f7b.png)
|:-:|

<font color="LightGray">今更読んでいるのですが超面白いですね</font>

▼▼▼

|![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/605ddfa1-141d-b057-5b4c-8b26b5fdc7c8.png)
|:-:|

|![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/d653ded6-2f89-48c1-ae49-21320ddc4e75.png)
|:-:|

|![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394580/d0a09152-bebd-7c44-6294-7b89c5781962.png)
|:-:|

# 所感

スプレッドシートに出力できれば、あとは煮るなり焼くなりこっちのものです。

画像をGoogleドキュメントで開くだけでOCRができると知り、つくってみました。本当にお手軽。Keepでもできるらしいので普通に使いたい。ぱっと思いついたのが読書ログだったのですが、名刺管理など他にも使い道はありそうですね。

ちなみに手書きと表はまだ難しいらしいです。（参考：[意外と知られていない「Googleドライブ」OCR機能で文字起こし検証→かなり使えそうでしたのでご紹介 - ウェブ企画ラボ](https://webkikaku.co.jp/blog/webservices/googledrive-ocr/)）


# 参考サイト

[GASでdriveの特定ディレクトリにファイルを吐き出す方法 - Qiita](https://qiita.com/nazomikan/items/4fcf3bbd1b73162575f0)

[GAS｜指定したフォルダ内に新しいスプレッドシートを作成する｜insert｜Files｜Drive｜Google Apps Script｜開発裏話｜マンガポスト日本版｜note](https://note.mu/mangapostjapan/n/n8e736fae0cb8)

ありがとうございました。