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

15119 ワード
QRcode linebot 画像 gas gas テキストリンク

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

必要になったので作ってみました
会話のサンプルはこちら
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