LoginSignup
5
3

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 1 year has passed since last update.

@makipen_39

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

Last updated at Posted at 2023-12-14

こちらはゆるWeb勉強会@札幌 Advent Calendar 2023の15日目の記事です。

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

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

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

作成するもの

日記アプリを作成します。

app

要件

とにかくハードルを下げたいです。

  • 入力のハードルが低い
  • 無料で利用できる
  • 簡単に作成できる

使用技術

今回は、Googleスプレッドシートをもとにアプリが作成できるGoogle Cloud の 「AppSheet」を使用します。

※AppSheetの料金プランを見ると無料がなさそうに見えますが、個人利用なら無料で使用できるようです。

作成の流れ

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

アプリ作成の手順

スプレッドシートの作成

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

image.png

AppSheetの作成

初期設定

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

image.png

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

image.png

詳細

image.png

image.png

image.png

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

image.png

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

image.png

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

image.png

アプリのプレビュー

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

image.png

AppSheetの設定

公式の設定項目の説明はこちらをご参照ください。

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

image.png

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

image.png

image.png

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

image.png

ビューの設定

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

カレンダービューの追加

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

見た目の変更

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

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

image.png

image.png

リスト選択を設定

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

アプリの使用

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

アプリが開きます。

以降は、以下の方法でアプリを開くことができます。

  • AppSheetのアプリをインストールし、Googleアカウントでログイン
  • AppSheetのリンクから開く

感想

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

(おまけ)リマインダーの設定

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

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

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

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

image.png

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

image.png

/**
 * 日記アプリのリマインダー
 */
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

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

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

image.png

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

参考資料

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

AphroÉtoileと学ぶパソコン術 vol.1

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

5
3
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
Sign upLogin
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?