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

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

 過去記事③　：[【のこるんvol.3】3タップ完了LINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/ddd6d6bf53d7425a8d49)
 過去記事②　：[【のこるんvol.2】3タップ完了LINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/69715a210e63625fa3ab)
 過去記事①　： [3タップで完了するLINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/1b30f3b8533a61bd2f12) 

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e598460d-1c4c-b14b-8370-9c7063483e2f.png)

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

 そこで・・・

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

 写ルだけじゃなく残ルンです!!　その名も<font color="Red">**「のこるん」**</font>ぜひ覚えて下さい♪
![321.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/34585852-897e-d6dd-bba5-e258f2ff9b41.png)

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

 **【前回のトライ】**
 スプレッドシートの情報が、AppSheetを使い、WEBアプリとして表現できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/25123d3c-4abd-da87-9666-4e8bf45a4d54.png)

 ただしこの状態では、 <font color="Red">**LINEで送った写真が、AppSheetに反映しないことがあります。**</font>


 **【今回のトライ】**
 GAS部分のコードを書き変え、LINEで画像とコメントを送付すると、すぐに情報が更新され、
 WEBアプリとして送った写真とコメントをフォトアルバムとして見れる状態にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/224eb02d-f30f-c70a-4d75-d9306157269c.png)

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

 まずは[前回までの記事](https://qiita.com/okinakamasayoshi/items/ddd6d6bf53d7425a8d49)を参考に、
 スプレッドシートをAppSheetでWEBアプリとして表現している状態にしてください。

 Data→「シート1」→ViewColumns
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c978241c-d687-4288-7951-7aab15daa359.png)
 4列目「URL」の「EDITABLE？」にチエックを入れてください→SAVE
 右画面+ボタン→適当な画像をアップロードや→コメントも何か入力→
 更新→シート1　これで新たな画像が投稿されました →SAVE

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/68702a50-d9b3-a86b-538b-a1c7ebe24420.png)

 ここで一旦スプレッドシートに戻ります。この画像がGoogleDriveのどこに保存されているか確かめます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/1bbea6d2-b4f4-8dbb-388c-fee8fbdda773.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d5dc480d-b6a9-8937-5d9c-134a63d96cd1.png)
 ちゃんとありました。

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

 <details><summary>前回の記事から少しコードを書き変えます　　<font color="Red">**(クリックで表示)**</font></summary><div><br><br>

```js

// 応答メッセージ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);

}

```
</div></details>

 変更点①GoogleDriveのIDを先ほどの画像が保存されているフォルダIDに変更する
 変更点②imageURLを今回設定した保存先フォルダ名に書き変える
 `const imageURL = '画像保存先フォルダ名/ 例ならシート1_Images/' + fileName`

 ①②の操作により、<font color="Red">**LINEから送られてきた画像が指定したフォルダに格納され、**</font>
 <font color="Red">**AppSheetで表示されるようになるはずです!**</font>

## STEP③見やすいデザインに変更する

 最後にデザインを変更していきます UX→アイコン名をつける→Viewtype→Sorbyで新着順か古い順を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/31ab29d1-78c6-0c1f-31fa-1b5234de3740.png)

 Copyで別の表示アイコン作成可能→Image sizeも変更してバリエーションを増やせます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0948e7a9-31e2-db2a-0833-dab64d5c2ddb.png)

 Displayでロゴも変えてみましょう　アプリっぽくなってきたぞ～
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/dd3bbe23-efa3-05d9-7e3e-43e058994bd8.png)

Brandからはカラーやアイコンが変更できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d9329d88-e3a4-2c78-972d-22a6445f8ddc.png)

 「SAVE」を忘れずにクリックし 共有したい人(無料枠では10名まで)を選択 これでついに完成です!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e4192b81-55ed-d866-4237-98996be1d879.png)

 ぜひアプリのAppSheetで見てみてください！簡単にアルバム化ができて感動ですよ～!!
 [ios版](https://apps.apple.com/jp/app/appsheet/id732548900)
 [GooglePlay版](https://play.google.com/store/apps/details?id=x1Trackmaster.x1Trackmaster&hl=ja&gl=US)

## 思い出が消えない未来を目指したい

 埋もれていく写真・思い出を救いたい。そんな思いでLINEの簡単操作だけでアルバムが出来る
 アプリ「のこるん」を開発してきました。

 すこしは写真整理が楽になりましたが、これまで撮った膨大な写真はまだ埋もれていて
 写真整理の悩みは尽きません。今後も少しでも役に立ちそうなアプリ開発に向けて
 活動を続けていきたいと思います!!

 最後に、長文お付き合い頂きましたみなさま、ありがとうございました。
 みなさまもLGTMが、開発の大変な励みになりました!!これからもよろしくお願いします!!

  過去記事③　：[【のこるんvol.3】3タップ完了LINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/ddd6d6bf53d7425a8d49)
 過去記事②　：[【のこるんvol.2】3タップ完了LINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/69715a210e63625fa3ab)
 過去記事①　： [3タップで完了するLINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/1b30f3b8533a61bd2f12) 

![Group 48 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d65a378f-9929-abb4-929d-c7c8edb5c88d.png)
![Group 49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/14efe9c8-2f25-36c1-e1e3-775feb49d94e.png)
![Group 64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/23c04c18-30c5-2923-d0b1-71870df75900.png)
![Group 45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b7b46f64-cc34-cf33-1feb-51884d79af15.png)

 今回の開発をもって、クラウドファンディングにも挑戦しておりました。
 たくさんの支援を頂き、先日サクセスすることが出来ました。
 この場を借りて、お礼申し上げます。最後まで開発できたのは
 Qiita記事を通して、皆さまが応援くださったおかげです。本当にありがとうございました。

 https://camp-fire.jp/projects/view/528736