1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

知らん人と画像を共有したい その2

Last updated at Posted at 2021-01-16

知り合いじゃない人写真を共有したい

必要になったので作ってみました
会話のサンプルはこちら
URLを表示すると,この画像を表示するためのQRコードが表示されます
会話のサンプル

今回使ったもの

-Google App Script (メイン)
-Google Charts API (QRコード)
-line bot (できたQRコードのリンクの送信)

Google Charts API (QRコード)

var outputUrl = "https://chart.apis.google.com/chart?cht=qr&chs=130x130&chl=" + imageUrl;

実際作ってみたいけど今は無理なのでAPIに頼ります
サイズと送りたい内容をURLに指定するだけで,QRコードを表してくれます
めっちゃ楽
いつなくなるかはわからないらしいです
↓公式

Google Charts Infographics QRcode

linebotについて

基本的にオウム返しのbotです
詳しく知りたければ,"linebot GAS オウム返し"とかで調べればいくらでも出てきます
userIDを取得して,テキストを送るより,リプレイトークン取得してそこに投げたほうが,制限に係る可能性がなくなることを最近知りました
json知るとやれることが増えます

全容

実際に使う時はラインのアクセストークンとフォルダーのIDを自分のものにして入れてください
わからなかったら適当にググれば出てきます

流れとしては
送信された画像をGoogleDriveに保存して,だれでも見れるようにした後,共有用のURLをGoogleChartsAPIに投げ込んで返信します

function doPost(e) {
  //eがundefinedの場合動作を終了する
  if (typeof e === "undefined"){return}
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
   if(event.type == "message") { onMessage(event,follow(event)); }
  });
}
//LINE Messaging APIのチャネルアクセストークン
var LINE_ACCESS_TOKEN = "自分のラインアクセストークン";
//画像を保存するフォルダーID
var GOOGLE_DRIVE_FOLDER_ID = "保存先のフォルダーID";

function onMessage(event){
  //受信したメッセージ情報を変数に格納する
  var reply_token = event.replyToken; //reply token
  var messageType = event.message.type; //メッセージタイプ

  switch (messageType) {
    case "text":
      // テキストの場合の処理
      break
    case "image":
        //変数LINE_END_POINTとreply_tokenを関数getImageに渡し、getImageを起動する
        getImage(event.message.id , reply_token);
  }
}
//Blob形式で画像を取得する
function getImage(messageId , reply_token){
  //ファイル名に使う現在日時をMomentライブラリーを使って取得
  var formattedDate = Moment.moment().format("YYYYMMDD_HHmmss"); //現在日時を取得
  var url = "https://api-data.line.me/v2/bot/message/" + messageId + "/content";
  var headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + LINE_ACCESS_TOKEN
  };
  var options = {
    "method" : "get",
    "headers" : headers,
  };
  var res = UrlFetchApp.fetch(url, options);
  //Blob形式で画像を取得し、ファイル名を設定する
  //ファイル名: LINE画像_YYYYMMDD_HHmmss.png
  var imageBlob = res.getBlob().getAs("image/png").setName("LINE画像_" + formattedDate + ".png");
  //変数imageBlobとreply_tokenを関数saveImageに渡し、saveImageを起動する
  saveImage(imageBlob, reply_token);
}
//画像をGoogle Driveのフォルダーに保存する
function saveImage(imageBlob, reply_token ){
  var fileID = DriveApp.getFolderById(GOOGLE_DRIVE_FOLDER_ID)
              .createFile(imageBlob).getId();
  var imageFile = DriveApp.getFileById(fileID);
    imageFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
  var imageUrl = imageFile.getDownloadUrl();
  var message = "https://chart.apis.google.com/chart?cht=qr&chs=130x130&chl=" + imageUrl;
  //変数reply_tokenとmessageを関数sendMessageに渡し、sendMessageを起動する
  sendMessage(reply_token,  message)
}
//ユーザーにメッセージを送信する
function sendMessage(reply_token , text){
  var line_endpoint = 'https://api.line.me/v2/bot/message/reply';
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN,
    },
    'method': 'POST',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': [{'type': 'text','text': text,}],
    }),
  });
}

まとめ

前,画像の取得がうまくいかず,formに逃げましたがうまくいきました.
なんならリプレイトークンある分楽になった気がする

実装する場合は,もっといろいろ考えることがありました..
グループに入れたいので,初めの画像のように'画像共有'のメッセージがあったら,その次の送られた画像に対してこの処理を行うとか

リンクたち

GoogleAppScript-Drive-File-setSharing

Google Charts Infographics QRcode

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?