LINE投稿写真の保存期限切れ防止！Googleドライブ自動保存ボットの作り方(Messaging API)

2022年7月9日

LINEでの友達やグループトークで写真が投稿された際、保存するのを忘れてしまうと期限切れとなってしまい、写真を取得できなくなることはありませんか？

そんな写真の期限切れを防止する、LINEのトークに投稿された画像を自動でGoogleドライブに保存するLINEボットの作り方を解説します。

※LINE Messaging APIを使い、無料のGoogleアカウントで作成可能なLINEボットツールです。

(追記)LINE Developer Communityの公式Youtubeにて作成方法を解説する動画を掲載されています。

LINEに投稿された写真の保存忘れ

メッセージングアプリであるLINEは、1対1のやり取りに加えて、グループ間でのやり取りなどでよく活用されています。

日本においてはLINEはもはやインフラともいえるコミュニケーションツールで、2人に1人は必ず利用しているほどです。

特に複数人でグループを作成するグループ投稿は便利で、旅行やイベントで撮影した写真をグループトークで共有したりできます。

ただ、LINEに投稿された写真を保存し忘れてしまうことが度々起きてしまいます。

LINEに投稿された写真には有効期限が設定されており、有効期限が切れると閲覧できなくなります。

それまでに投稿画像を保存しておけば、あとからも見ることができますが、つい保存するのを忘れてしまいます。

その結果、見たかった写真が保存期限切れになり、再度撮影した人に送ってもらうよう依頼が必要になります。

ただ、再度画像を送ってもらうように依頼するのは面倒であり、相手にも「ちゃんと保存して」と思われるため、言えずに写真が手元になくなることも多いです。

保存期限切れによる画像閲覧不可を０に

しかし、せっかく友人がLINEで送ってくれた写真などの画像が保存できないのはもったいないです。

だからこそ、画像が保存期限切れになって閲覧できなくなることを防止できればとても便利です。

LINEトークに投稿された画像が自動で保存できる仕組みがあれば、期限切れを気にすることもありません。

LINE投稿画像をGoogleドライブに自動保存するボット

実はそうしたLINE投稿画像を自動で保存する仕組みは、LINEボットを作成することで解決可能です。

LINE Messaging APIを使ったLINEボットでは、投稿画像を自動で保存する仕組みを実装できます。

Google Apps Script(GAS)を使い、LINEトークに投稿された写真などの画像をGoogleドライブに自動保存します。

さらに、LINE投稿画像の自動保存ボットは、ボットとのトーク画面だけでなく、グループチャットやグループトークにも追加可能です。

保存したい画像が投稿されるLINEトークに画像自動保存ボットを追加しておけば、勝手にクラウドストレージのGoogleドライブに保存されます。

LINE Messaging APIとGASで完全無料で自動保存

個人トークやグループトークに投稿された写真をGoogleドライブに保存するLINEボットを作るには、LINE Messaging APIとGoogle Apps Script(GAS)を使用します。

LINE Messaging APIを利用すると、LINEボットを簡単に作成することができます。

GASでWebアプリケーションを作成し、LINE Messaging APIのWebhookを連携すると、ユーザーが投稿した情報を取得できます。

ユーザー投稿した情報の中から、画像が含まれていれば、その画像をGoogleドライブに保存する処理をGASで実装することで、LINEトークに投稿された写真を自動で保存可能です。

この投稿画像自動保存LINEボット最大の特徴は、完全無料であることです。

GASはそもそも費用がかからない無料サービスとなっているのに加え、LINE Messaging APIも無料枠の利用範囲内なので、費用がかかりません。

画像保存先のGoogleドライブは無料アカウントの場合、15GBまで保存可能です。

LINEに投稿される画像が約250KBと仮定すると、6万枚の写真までGoogleドライブに蓄積できるようになっています。

LINE Messaging APIの利用手順

投稿画像をGoogleドライブに自動保存するLINEボットを作るには、LINE Messaging APIを利用登録する必要があります。

そこで、画像自動保存BOTのためのLINE Messaging APIの利用手順を説明します。

LINE Messaging APIの利用登録方法については以下の記事で解説しています。

LINE Messaging APIの利用登録方法～LINEアカウント開発に必要なAPIキー発行申請

LINEビジネスアカウントの登録から、ディベロッパー・チャネル登録まで解説しています。

上記に加えて追加設定が必要なポイントとして、「グループトーク・複数人トークへの参加を許可する」の有効化です。

「グループトーク・複数人トークへの参加を許可する」を有効にすると、グループトークや複数人トークに投稿された画像も自動保存できるようにできます。

右側にある「編集」リンクをクリックすると、LINE公式アカウントのページが表示されます。

「機能の利用＞トークへの参加」の設定項目で「グループ・複数人トークへの参加を許可する」にチェックします。

以上で設定は完了なので、LINE Messaging APIの画面で「チャネルアクセストークン」を発行し、控えておきましょう。

※チャネルアクセストークンは機密情報なので、漏洩しないようしっかり保管します。

GASによる投稿画像を自動保存するLINEボット作成方法

LINE Messaging APIの登録と準備ができたところで、Google Apps Script(GAS)を使ってLINEトークに投稿された画像・写真をGoogleドライブに自動保存するLINEボットの作り方を解説します。

今回の内容はLINEに関する技術コミュニティである「LINE Developer Community」にてハンズオン動画として公開予定です。

そのハンズオン動画で使ったGASスクリプトが設定済みのスプレッドシートを用意しています。

LINEの写真をGoogleドライブに自動保存ボットツール(スプレッドシート)

このスプレッドシートでは以下の10StepでLINEトーク投稿画像をGoogleドライブに保存するボットがカンタンに作ることができます。

※GASのコードもスプレッドシートに付属しているので、コードを書く必要がありません。

１．スプレッドシートのメニュー「ファイル」から「コピーを作成」でファイルコピーします。

２．ファイル名はそのままでもよいですし、わかりやすい任意の名称をつけて「コピーを作成」としてください。

３．B1セルに入力にLINE Messaging APIで取得したアクセストークン、B2セルにLINE投稿画像を保存するGoogleドライブのフォルダ名を入力します。

４．メニューバー「拡張機能＞Apps Script」でGoogle Apps Script(GAS)のエディタを開きます。

５．「makeDirectory」が表示されている状態で、「▷実行」をクリックします

※初回承認が求められるので、GAS初回承認手順解説記事を参考に権限許可してください。

実行ログに実行完了が表示されると、スプレッドシートに入力したフォルダ名がGoogleドライブに作成され、そこにLINE投稿が画像が保存されるように設定されます。

６．LINE Messaging APIのWebhookでGASスクリプトを実行できるように「デプロイ」ボタンから「新しいデプロイ」を選択します。

７．新しいデプロイで、種類を「ウェブアプリ」とし、任意の説明文と実行ユーザーは「自分」、アクセスできるユーザーは「全員」として「デプロイ」ボタンをクリックします。

８．デプロイを実行すると、ウェブアプリのURLが表示されるので、URL部分の「コピー」をクリックし、URLを控えておきます。

９．LINE Developersのページに戻り、LINE Messaging APIのWebhookのURLとしてコピーしたGASのURLを貼り付け、「Webhookの利用」を有効にします。

１０．LINEボットとしてメッセージが投稿されたときはWebhookが実行されるように、LINE Official Account Managerの管理画面で応答モードはBot、応答メッセージはオフにします。

以上の手順を実行すれば、LINEトークに投稿された画像をGoogleドライブに自動保存するLINEボットは作成完了です。

LINE Messaging APIの画面にあるQRコードからお友達追加して、実行してみます。

実行後に表示されるGoogleドライブのURLをクリックすると、画像が表示され、Googleドライブに保存されていることが確認できます。

Googleドライブのフォルダからアクセスしても、スプレッドシートに記入したフォルダに画像が格納されています。

グループトークや複数人トークにも追加可能

今回作成したLINEトークに投稿された画像を自動保存するLINEボットは、グループトークや複数人トークにも追加可能です。

前述したようにLINEのグループトークや複数人トークではイベントや友だちの写真の共有にも使われます。

グループトークに追加しておけば、そこで投稿された画像が自動でGoogleドライブに保存されるので、スマホを手動操作して保存する必要がなくなります。

ただ、グループトークでたくさんの写真が投稿されたとき、前述のようにボットが画像URL返信が増えるデメリットがあります。

その場合には、スプレッドシートのB3セルにある保存時の応答をON→OFFに切り替えれば、非表示にできます。

LINE投稿画像の自動保存ボットのGASコード

今回、LINEトークに投稿された画像をGoogleドライブに自動保存するボットのGoogle Apps Script(GAS)のコードを掲載します。

//スプレッドシートのB1セルに配置したLINEボットのアクセストークンを取得
const ACCESS_TOKEN = SpreadsheetApp.getActiveSheet().getRange(1, 2).getValue();
//Googleドライブに作ったフォルダのURL(ここにOCRした画像を保存)
const FOLDER_ID = ScriptProperties.getProperty('FOLDER_ID');
//LINE返信用エンドポイント
const REPLY_URL = 'https://api.line.me/v2/bot/message/reply';

//LINEに投稿された写真を自動保存するためのGoogleドライブのフォルダを作成
function makeDirectory() {
  //スプレッドシートのB2セルからフォルダ名を取得
  const folderName = SpreadsheetApp.getActiveSheet().getRange(2, 2).getValue();
  //Googleドライブにフォルダを作成し、フォルダIDを取得
  const folderId = DriveApp.createFolder(folderName).getId();
  //GoogleドライブのフォルダIDをスクリプトプロパティに保存
  ScriptProperties.setProperty('FOLDER_ID', folderId);
}

//LINEにメッセージを送信する関数
function sendMsg(url, payload) {
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify(payload),
  });
}

//LINEのトーク画面にユーザーが投稿した画像を取得し、返却する関数
function getImage(id) {
  //画像取得用エンドポイント
  const url = 'https://api-data.line.me/v2/bot/message/' + id + '/content';
  const data = UrlFetchApp.fetch(url, {
    'headers': {
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'get'
  });
  //ファイル名を被らせないように、今日のDateのミリ秒をファイル名につけて保存
  const img = data.getBlob().setName(Number(new Date()) + '.jpg');
  return img;
}
//LINEトークに投稿された画像をGoogleドライブに保存する関数
function saveImage(blob) {
  try {
    const folder = DriveApp.getFolderById(FOLDER_ID);
    const file = folder.createFile(blob);
    return file.getId();
  } catch (e) {
    return false;
  }
}

//スクリプトが紐付いたスプレッドシートに投稿したユーザーIDとタイムスタンプを記録
function recodeUser(userId, timestamp, id) {
  //シートが1つしかない想定でアクティブなシートを読み込み、最終行を取得
  const mySheet = SpreadsheetApp.getActiveSheet();
  const lastRow = mySheet.getLastRow();
  //スプレッドシートに写真保存が実行された履歴を保存
  mySheet.getRange(1 + lastRow, 1).setValue(userId);
  mySheet.getRange(1 + lastRow, 2).setValue(Utilities.formatDate(new Date(timestamp), 'JST', 'yyyy-MM-dd HH:mm'));
  mySheet.getRange(1 + lastRow, 3).setValue(id);
  mySheet.getRange(1 + lastRow, 4).setValue('https://drive.google.com/file/d/' + id);
  return 0;
}

function doPost(e) {
  //アクティブなスプレッドシートを読み込み、メッセージフラブを読み取り
  const mySheet = SpreadsheetApp.getActiveSheet();
  const mesFlag = mySheet.getRange(3, 2).getValue();
  //LINEWebhookで受信したイベントの数だけ処理を実行
  for (let event of JSON.parse(e.postData.contents).events) {
    //Webhookのメッセージタイプが画像の場合のみ処理を実行
    if (event.message.type == 'image') {
      try {
        let img = getImage(event.message.id);
        let id = saveImage(img);
        recodeUser(event.source.userId, event.timestamp, id, event);
        if (mesFlag === 'ON') {
          sendMsg(REPLY_URL, {
            'replyToken': event.replyToken,
            'messages': [{
              'type': 'text',
              'text': '画像保存しました。\nhttps://drive.google.com/file/d/' + id + '\n',
            }]
          });
        }
      } catch (e) {
        Console.log(e);
      }
      //Webhookのメッセージタイプがテキストで「写真保存先」が含まれていると、保存先を通知
    } else if (event.message.type == 'text') {
      if (event.message.text.indexOf('画像保存先') > -1) {
        sendMsg(REPLY_URL, {
          'replyToken': event.replyToken,
          'messages': [{
            'type': 'text',
            'text': '写真保存先↓\nhttps://drive.google.com/drive/folders/' + FOLDER_ID,
          }]
        });
      }
    }
  }

  return ContentService.createTextOutput(JSON.stringify({ 'content': 'post ok' })).setMimeType(ContentService.MimeType.JSON);
}

コードの内容についてはコメントを記入して解説しています。

コードを改良することで、より便利な画像保存LINEボットに改良してみてください。

他のユーザーにも権限付与する応用も

改良案としては、「保存した画像を自分以外にユーザーも閲覧できるよう権限付与する」というのが考えられます。

LINEトークに投稿された画像をGoogleドライブに保存する関数であるsaveImage関数を工夫することで実装可能です。

//LINEトークに投稿された画像をGoogleドライブに保存する関数
function saveImage(blob) {
  try {
    const viewUserList = ['aaaa@test.com','bbbb@dog.com,'ccccc@cat.com'];
    const folder = DriveApp.getFolderById(FOLDER_ID);
    const file = folder.createFile(blob);
    file.addViewers(viewUserList);
    return file.getId();
  } catch (e) {
    return false;
  }
}

画像を閲覧できるユーザーを配列で定義しておき、addViewersメソッドで配列を引数に指定すれば、自動保存された画像を自分以外のユーザーも閲覧できます。

配列で定義している部分をスプレッドシートから取得できるようにすれば、スプレッドシートに設定したユーザーに権限付与するといったツール改良も可能です。

LINE Developer Communityの公式動画でも公開

LINE Developer Community(LINEDC)で、今回紹介したLINEに投稿された写真をGoogleドライブに自動保存するプログラムの解説動画をYoutubeにアップいただいています。

LINE API Expertである仲条さんにモデレートいただき、動画が作成方法を解説しています。

やはり動画による解説の方が手順を理解しやすいので、ぜひ併せて御覧ください。

まとめ・終わりに

今回、LINEトークに投稿された画像をGoogleドライブに自動保存するボットをGoogle Apps Script(GAS)とLINE Messaging APIで作成する方法を紹介しました。

LINEトークに投稿された画像は一定期間表示できるものの、有効期限が切れると表示・保存ができなくなります。

投稿された画像の保存忘れを防ぐため、Googleドライブに自動保存してくれるLINEボットがあると便利です。

このボットはGASとLINE Messaging API、Googleドライブいずれも無料で使うことができます。

さらに、LINEボットとの投稿以外にも、グループトークや複数人トークにボットを追加することも可能です。

友だちやグループでLINEを使って画像を共有・シェアしている方で、つい保存を忘れてしまいがちな人はぜひ、この投稿画像自動保存LINEボットを活用してみてください。

API外部連携,GoogleAppsScript,ツール開発Googleドライブ,LINE Messaging API,写真自動保存

Posted by yamamoto