1
1

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.

【AppSheet】アドベントカレンダー作った

Posted at

できたもの

スクリーンショット 2023-11-02 10.59.22.png

機能

  • カレンダー画像を背景にXY座標でピン立て
  • 空き・予約済み・公開済みのピン色分け
  • 予約のキャンセル
  • 当日朝8時にURL自動公開(0時でよかった何故8時にしたのかわからん)
  • コメント機能

経緯

アドベントカレンダー好きです。
Qiitaのようなジャンルを技術に絞るでもなく、Adventarほど公開されない、個人利用で自由なものが欲しいと思って実装してみた。
GWSユーザーならCoreライセンスが割り当てられているので社内で使うに良さそう。
日付のカレンダービュー表示でもよかったんだけど視覚的に面白そうなのでXYで画像マッピングを採用

構成

ソースはスプレッドシート

毎年使えたらと思って日付に年(YYYY)を持ちたくなかったのでDateはTEXT型 美しくない気もする…
スクリーンショット 2023-11-02 11.01.21.png
[Done]が公開済みかどうかのステータスになっている。

XY型

スクリーンショット 2023-11-02 11.17.31.png
背景画像はGCSに置き、XY型の設定Background image for the XY coordinatesに使用することで画像にピン立てが可能
画像への直リンクが必要なのでDriveに置いた画像は使えない。注意

画面

冒頭のカレンダー表示とあわせて、一覧画面も用意した。
スクリーンショット 2023-11-02 11.00.10.png
スマートフォンだと画像が大きいかもしれないので一覧が優しいかも

ピンのFormat rules

募集中・公開前(予約済み)・公開済([Done]=True)で3色に分けられた。
スクリーンショット 2023-11-02 11.26.44.png
マップピンはサイズが変えられないのが不便 もっと大きくしたい。communityでも要望スレッド立っていた。

コメント機能

せっかくなので何らかのリアクションをつけられたらと思い追加実装。
コメント_Inlineはカードビュー(Large)を使って分離して表示。カードビューは使いやすい
[Date]をTEXT_ICON()でアイコン画像にすることでちょっとかわいいワンポイントに使える。
スクリーンショット 2023-11-02 11.24.26.png
(余談)コメントではなく、いいね機能でワンクリックの簡易リアクションでもよかったかもしれない

自動公開

Automationで当日に[Done]をTrueに更新することでURLが公開されるようにした
スクリーンショット 2023-11-02 11.03.14.png
西暦を持ちたくなくて[Date]が日付型でないのであまりFilter Conditionが綺麗じゃない感想…
Time zoneはTokyoにすること。
スクリーンショット 2023-11-02 11.02.39.png

その他

Onboardingで最初に説明画面を表示するようにした
スクリーンショット 2023-11-02 11.00.47.png

おわり

XYでの画像マッピング楽しい。
汎用的なカレンダーではないけど、スタンプカードとか可能性が見えた気がする。

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?