【のこるんvol.4】3タップ完了LINEフォトアルバム #LINEDC #GAS #AppSheet #JavaScript

スマホ中の写真　埋もれてない？

過去記事③　：【のこるんvol.3】3タップ完了LINEフォトアルバム
過去記事②　：【のこるんvol.2】3タップ完了LINEフォトアルバム
過去記事①　： 3タップで完了するLINEフォトアルバム

スマホがこの世に誕生し、写真の撮影枚数はそれ以前の1,500倍に、
1スマホの中に少なくとも1,000枚以上の写真があるそうです。

せっかく撮影しても、整理できずにいませんか？。
思い出が埋もれたり、写真と一緒に消えてしまうのは悲しい。
とはいえ新たにアプリを使うのはめんどくさい。

そこで・・・

プログラミングの「プ」の字も知らなかった初心者ですが、
日本一簡単操作のLINEフォトアルバムアプリを自分で作ります💪

写ルだけじゃなく残ルンです!!　その名も「のこるん」ぜひ覚えて下さい♪

LINEで送付した写真が即反映されるようにする

【前回のトライ】
スプレッドシートの情報が、AppSheetを使い、WEBアプリとして表現できました。

ただしこの状態では、 LINEで送った写真が、AppSheetに反映しないことがあります。

【今回のトライ】
GAS部分のコードを書き変え、LINEで画像とコメントを送付すると、すぐに情報が更新され、
WEBアプリとして送った写真とコメントをフォトアルバムとして見れる状態にします。

STEP①写真を格納する位置を定める

まずは前回までの記事を参考に、
スプレッドシートをAppSheetでWEBアプリとして表現している状態にしてください。

Data→「シート1」→ViewColumns

4列目「URL」の「EDITABLE？」にチエックを入れてください→SAVE
右画面+ボタン→適当な画像をアップロードや→コメントも何か入力→
更新→シート1　これで新たな画像が投稿されました →SAVE

ここで一旦スプレッドシートに戻ります。この画像がGoogleDriveのどこに保存されているか確かめます。

先ほど追加された行を探してください。
今回は、シート1_Images/111.URL.102811.pngと書かれています。
これはGoogleDriveの 「シート1_Images」のフォルダの中に「111.URL.102811.png」というファイルが
保存されていることを表しています。GoogleDriveを開いて確かめてみましょう。

ちゃんとありました。

STEP②GASのコードを書き変える

前回の記事から少しコードを書き変えます　　(クリックで表示)


// 応答メッセージURL
const REPLY = "https://api.line.me/v2/bot/message/reply";

// アクセストークン
const ACCESS_TOKEN = "********";

// スプレッドシート情報

const SHEET_ID = '********';
const SHEET = SpreadsheetApp.openById(SHEET_ID).getSheetByName('シート1');

// Google Drive ID
const GOOGLE_DRIVE_ID = "********";

// LINEから送られてきたデータを取得 doPost()
function doPost(e) {

//メッセージ受信
const data = JSON.parse(e.postData.contents).events[0];
//ユーザーID取得
const lineUserId = data.source.userId;
// リプレイトークン取得
const replyToken = data.replyToken;
// 送信されたメッセージの種類を取得
// https://developers.line.biz/ja/docs/messaging-api/message-types/#sticker-messages
const postType = data.message.type;

//沖中追加①
const userMessage = JSON.parse(e.postData.contents).events[0].message.text;
//追加①ここまで

// 写真の時
if ( "image" === postType ) {
imageSave(replyToken, lineUserId, data);

} else {

SHEET.getRange('D' + 2).setValue(userMessage);
}

}

// 送信された画像を保存 imageSave()
function imageSave(replyToken, lineUserId, data) {

// LINEから画像取得 getImg()
const imgData = getImg(data);

// Googleドライブに保存　saveImg()
const imgInfo = saveImg(imgData, lineUserId);

// //「保存完了」とLINEにメッセージを送る
sendMessage(replyToken, imgInfo);

}

// LINEから画像取得　getImg()
function getImg(data) {

const IMG_URL = 'https://api-data.line.me/v2/bot/message/' + data.message.id + '/content';
const HEAD = {
"method":"get",
"headers": {
"Authorization" : "Bearer " + ACCESS_TOKEN
}
}
const imgData = UrlFetchApp.fetch(IMG_URL, HEAD);
return imgData;

}

// Googleドライブに保存　saveImg()
function saveImg(imgBinary, lineUserId){

//GoogleDriveフォルダID
const folder = DriveApp.getFolderById(GOOGLE_DRIVE_ID);
//ランダムな文字列を生成して、画像のファイル名とする
const fileName = Math.random().toString(36).slice(-8);
//Googleドライブのフォルダに画像を生成
const imageFile = folder.createFile(imgBinary.getBlob().setName(fileName));
//「保存しました」としたメッセージを変数に代入
const imgInfo = '画像保存したよ!コメントをどうぞ!';

//画像ファイルURL取得
const imageURL = '画像保存先フォルダ名/ 例ならシート1_Images/' + fileName;

//画像ファイルにリンクでアクセスの権限付与
imageFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);

debugImgLog(imageURL, lineUserId);
return imgInfo;

}

// スプレッドシートに画像を保存 debugImgLog()
function debugImgLog(text, userId) {

if ('' == text) {
return;
}

const date = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy-MM-dd HH:mm:ss')
const userName = getUserDisplayName(userId)
const userImg = getUserDisplayImg(userId)

SHEET.appendRow([userId,userId,text,userName,date,userName]);
// 日付順に並び替え
const numColumn = SHEET.getLastColumn(); // 最後列の列番号を取得
const numRow = SHEET.getLastRow()-1; // 最後行の行番号を取得
const dataRange = SHEET.getRange(2, 1, numRow, numColumn);
dataRange.sort([{column: 5, ascending: false}]);

}

// ユーザーのプロフィール名取得 getUserDisplayName()
function getUserDisplayName(userId) {

const url = 'https://api.line.me/v2/bot/profile/' + userId;
const userProfile = UrlFetchApp.fetch(url,{
'headers': {
'Authorization' : 'Bearer ' + ACCESS_TOKEN,
},
})
return JSON.parse(userProfile).displayName;

}

// ユーザーのプロフィール画像取得 getUserDisplayImg()
function getUserDisplayImg(userId) {

const url = 'https://api.line.me/v2/bot/profile/' + userId;
const userProfile = UrlFetchApp.fetch(url,{
'headers': {
'Authorization' : 'Bearer ' + ACCESS_TOKEN,
},
})
return JSON.parse(userProfile).pictureUrl;

}

// LINEにメッセージ送信 sendMessage()
function sendMessage(replyToken, replyText) {

const postData = {
"replyToken" : replyToken,
"messages" : [
{
"type" : "text",
"text" : replyText
}
]
};

const headers = {
"Content-Type" : "application/json; charset=UTF-8",
"Authorization" : "Bearer " + ACCESS_TOKEN
};

const options = {
"method" : "POST",
"headers" : headers,
"payload" : JSON.stringify(postData)
};

return UrlFetchApp.fetch(REPLY, options);

}