ノーコードで作るゆるい日記アプリ

こちらは[ゆるWeb勉強会@札幌 Advent Calendar 2023](https://adventar.org/calendars/8767)の15日目の記事です。

皆さんは日記を書いていますか？
私は過去に「5年日記」なる紙の日記を購入しましたが、過ぎ去った4年分がスッカスカです！あと1年あります(笑)

実は、PC作業ばかりで字を書かなくなったこともあり、字が下手です。
ミミズのような文字になるので、イマイチ書いていてテンションが上がらず、日記は3日坊主になります。

アプリなら字の汚さを気にしなくて良いので、この機会に作成することにしました。


## 作成するもの
日記アプリを作成します。

<img width="300" alt="app" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/071ab418-0660-8be7-c443-141a927b3035.png">


## 要件
とにかくハードルを下げたいです。
* 入力のハードルが低い
* 無料で利用できる
* 簡単に作成できる

## 使用技術
今回は、Googleスプレッドシートをもとにアプリが作成できるGoogle Cloud の 「[AppSheet](https://cloud.google.com/appsheet?hl=ja)」を使用します。

※AppSheetの料金プランを見ると無料がなさそうに見えますが、[個人利用なら無料](https://support.google.com/appsheet/answer/10105400?hl=en#free-plan)で使用できるようです。

## 作成の流れ
1. スプレッドシートを作成する
1. 拡張機能から、AppSheetを作成する
1. スマートフォンでAppSheetのアプリを表示する

## アプリ作成の手順
### スプレッドシートの作成
日記の記録場所となるスプレッドシートを作成します。
1行目にアプリ作成に使用するラベルを入力します。(A1が空白だとエラーになるようですので、A1から記入します)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/e4ba5bb2-3ed3-150d-36e4-8724c4bbf434.png)

### AppSheetの作成
#### 初期設定
スプレッドシートのメニュー[拡張機能]→[ApSheet]→[アプリを作成]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/e0f00e23-8326-b973-d950-5e1a42bc2516.png)

認証の設定などを行います。Googleアカウントを選択します。
基本的に次へを選択していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/eab8d7b2-9c26-ccce-79f1-05ab67ff089d.png)

<details><summary>詳細</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/cd5d9086-cba1-edf3-d40a-9eb31f2fd5d7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/f490d4e2-f249-29b9-9c46-90e2449afa58.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/e112c372-03bf-d86f-9406-450700453ecd.png)

Tell us about...の部分に回答し、[Submit]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/83b9920f-3421-2503-5dcb-f8fc7e0dcb05.png)
</details>



[Your ◯◯◯ app is ready!]の画面で[Customize with AppSheet]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/fc701598-9b81-e322-b0b4-901ad1759576.png)

AppSheetの画面が表示されます。
左の[Data]をクリックし、設定をしていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/b7427a68-187e-bbe5-f1cb-021e11fa2ff8.png)

#### アプリのプレビュー
画面の右にある◀(または▶)をクリックすると、プレビュー画面が開閉します。
こちらで表示や動作の確認が出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/8764973e-41ae-c196-59dd-9626813f4da9.png)


#### AppSheetの設定
公式の設定項目の説明は[こちら](https://support.google.com/appsheet/answer/10106509?sjid=12046716387255761919-AP)をご参照ください。

* KEYの設定
データを識別するためのKEYを設定します。
今回は年月日と時間にチェックを入れ、上部の[Save]ボタンをクリックして保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/1563bd4b-ba55-2a57-9940-49d541d95dbc.png)

KEYは1つのみ指定可能のようです。
AppSheet側で_ComputedKey項目を自動で作成してくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/1cee6563-3bd8-827a-cafb-e8a248fbea85.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/cc53d940-c9c2-1409-25cf-aa4c6e732291.png)

* 表示の設定
UIDは管理用のため、非表示にします。SHOW?のチェックを外します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/39a4c1c0-e89b-7d96-6dd1-d099aff189e5.png)

#### ビューの設定
アプリで表示する際の画面を編集します。
左のメニューから[Views]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/ea0c047e-0d99-2a9e-a34b-ee9aafe2fb30.png)

View nameをアプリのメニューとして表示したい名前に変更します。
アプリでは下のタブに表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/bcb1d649-b460-da20-da8f-666a16de15b3.png)

* Sort by
　表示順を指定します。日時の降順(新しい日付→古い日付)にします。
* Group by
　項目のグルーピングを指定します。年月日ごとにまとめるようにします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/1f21f0df-fd16-e7ad-0cfd-e8ca69edc33f.png)

リストに表示する項目を指定します。
Primary headerがタイトル、Secondary headerがタイトル下に表示される項目です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/ace7c683-c726-958f-08a1-91b286719aca.png)

プレビューを見てみます。大分出来てきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/5311661b-cde1-cc2b-3a01-e6e510391849.png)


#### カレンダービューの追加
リスト表示するビューを設定したため、次にカレンダー表示するビューを追加します。Views画面で[Add View]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/20d362ae-1406-3bc0-ed87-fa710a7ac524.png)

補完され、Add calendar view with 年月日...が表示されていれば、そちらをクリックします。
表示されない場合は[Create a new view]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/89847b84-52e9-0570-1db8-edae38e2bf23.png)

View name(アプリのタブに表示される名前)は「カレンダー」にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/5cb04b0b-4eaa-3550-4c66-01dce58d6178.png)

日記と表示する日付を紐づけます。
Start date、End dateを「年月日」、Descriptionを「出来事」にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/98e36dec-4af2-fc0b-40d1-dff0e0f00da3.png)

プレビューで内容を確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/34dff341-cc0f-6b0d-288c-1cd847b14aa6.png)


#### 見た目の変更
左メニューの[Settings]で設定を変更できます。

今回は[Theme & Brand]メニューで色とアプリのロゴを指定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/4eb5d330-a81e-76f2-6128-ea92627cbb62.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/1290a0b8-3a7a-6bf0-2c45-34d2505f00af.png)


#### リスト選択を設定
感情欄はテキストではなく、用意したリストから入れるように変更します。

スプレッドシートに「リスト」シートを追加します。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/a5985be3-d6e8-7c82-1199-fd556321492b.png">

AppSheetの左メニューで[Data]を選択し、Data画面で[+(Add new Data)]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/051a42e2-9d46-a3f1-0bc9-ce2b3c1cc2c0.png)

Add data画面で[Google Sheets]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/a42d3eb3-f800-f0a1-4236-e354d4516b1f.png)

対象のファイル名と、シート名を指定します。[Add This Table]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/476e67df-ec7c-6d64-8967-db7d1410fad5.png)

追加されるとTOPページに遷移するため、Dataアイコンをクリックします。
シート1の感情行の一番左にあるアイコンをクリックし、編集画面を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/f99445be-23b6-f439-47d2-14a71ffe3049.png)

Typeを[Ref]、Source Tableを[リスト(追加したリストシートのData)]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/9a64a69b-fd0e-442d-11d9-fa2dc166f2ef.png)

プレビューでリストをクリックすると、選択リストが表示されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/34736fc2-bd97-545e-7a2c-5c07508ecb20.png)




### アプリの使用
アプリ作成後、認証に使用したGmailアカウントにメールが届いています。
[Install アプリ名]のボタンをクリックします。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/9b0e93ae-4d29-1fca-3e4d-8fd547001931.png">


アプリが開きます。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/e727ecee-0e04-ad52-12a3-983fe59b7121.png">


以降は、以下の方法でアプリを開くことができます。
* AppSheetのアプリをインストールし、Googleアカウントでログイン
* AppSheetのリンクから開く


## 感想
30分もかからずアプリができてしまいました。
アプリでは、表示、新規作成、編集、削除、検索ができます。
一から作成する場合は、それなりに時間がかかる機能です。良い世の中になりました。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/c269c41c-c31f-4277-af02-d146f6a5ed79.png">


## (おまけ)リマインダーの設定
3日坊主防止のため、リマインダーを設定します。

Automation機能の定期実行を使用する予定でしたが、デプロイが必須で有償(2023年12月現在)となるため、今回はApps Scriptを使用します。

(ここでは少しコードを追加します)

スプレッドシートのメニューから[拡張機能]-[Apps Script]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/58aeb00c-40e6-05a7-1cdc-a2ecb9503961.png)

以下のコードを貼り付けます。貼付け後、[保存]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/8f161b58-f833-d23f-94b2-4d5abefeaaf3.png)


```js
/**
 * 日記アプリのリマインダー
 */
function checkAndSendNotification() {
  // スプレッドシートのIDを指定
  var spreadsheetId = "Your sheet ID";
  // シートの名前を指定
  var sheetName = "シート1";
  // 送信先のメールアドレスを指定
  var sendAddress = 'Your email address';
  // App SheetのURL
  var appLink = 'Your App Sheet URL';
  // 検索する列名
  var targetCol = '年月日';

  // 現在の日付を取得
  var currentDate = new Date();

  // スプレッドシートを開く
  var spreadsheet = SpreadsheetApp.openById(spreadsheetId);

  // シートを取得
  var sheet = spreadsheet.getSheetByName(sheetName);

  // 年月日の列を検索
  var headerRow = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  var colNum = findColumnNumber(headerRow, targetCol);

  // シートの年月日列のデータを取得
  // Sheetオブジェクト.getRange(行番号, 列番号, 行数, 列数)
  var dateColumnData = sheet.getRange(2, colNum, sheet.getLastRow() - 1, 1).getValues();

  // 当日の日付の文字列を取得（年月日のフォーマットに合わせて調整が必要）
  var formattedCurrentDate = Utilities.formatDate(currentDate, "JST", "yyyy/MM/dd");

  // 当日の日付が含まれたレコードがあるか判定
  var hasRecordForToday = dateColumnData.some(function (row) {
    if (row[0]) {
      var targetDate = Utilities.formatDate(row[0], "JST", "yyyy/MM/dd");
      return targetDate === formattedCurrentDate;
    }
  });

  // 当日の日付のレコードがない場合
  if (!hasRecordForToday) {
    // 通知メッセージを作成
    var notificationMessage = `日記を書きませんか？\n${appLink}`;

    // メッセージを送信（例: メール送信）
    MailApp.sendEmail({
      to: sendAddress,
      subject: `${formattedCurrentDate}の日記が未記入です`,
      body: notificationMessage,
    });
  }
}

/**
 * 指定した文字を含む列番号を返す
 */
function findColumnNumber(header, searchStr) {
  var columnIndex = header.indexOf(searchStr) + 1;
  return columnIndex;
}


```

トリガーを追加します。
左メニューの[トリガー]を選択し、[トリガーを追加]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/dc0cdc0e-8c3b-d0d3-ca4a-d2845ef950e9.png)

設定し、[保存]ボタンをクリックします。

| 項目 | 値 |
|:--|:-|
|  実行する関数を選択 | checkAndSendNotification<br>(先程作成した関数名)  |
| 実行するデプロイを選択  | Head(デフォルト)  |
| イベントのソースを選択  |  時間主導型 |
|  時間ベースのトリガーのタイプを選択 | 日付ベースのタイマー  |
| 時刻を選択  | 午後8時～9時  |
|  エラー通知設定 | 毎日通知を受け取る  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/330e7ecf-322b-e799-0234-9f137e9013cc.png)

リマインドのメールが届くようになりました。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/d7c85d4c-a190-746b-786a-73654865d823.png">


## 参考資料
AppSheetの設定については、こちらの書籍を元に作成しました。

[AphroÉtoileと学ぶパソコン術 vol.1](https://techbookfest.org/product/9fMctL09St6LReiRCyvmWJ?productVariantID=c36MHh4gYtkiVyq1AvxMRZ)

AppSheet以外にもNotionやAdobe Expressの内容もありお得です。
私は校閲で参加させていただいています^^