見出し画像

【GAS】イベントスケジュール表示WEBアプリ

はじめに

GAS(Google Apps Script)だけでWEBアプリの様なモノを作ったので
その内容について書きます。

実際に動いているのはこちら▼

概要

●必要なモノ:Googleアカウント
●設置場所:Googleドライブ
●データベース:Googleスプレッドシート
●コード:GAS

●サーバ:必要なし
●ドメイン:必要なし
●維持費:必要なし

いわゆるサーバレスな感じで、表示部分とシステム部分両方ともGASで組んでいます。
PC・スマホ両方対応のレスポンシブです。

何ができるの?

●イベントの登録・表示、編集・削除

機能は至ってシンプルです。

【機能詳細】イベントの一覧表示

PC版

画像1

スマホ版

画像2

イベントの一覧のほか、Twitterのタイムラインが埋め込めます。
スマホ版は固定フッターにお役立ちリンクが入っています。

【機能詳細】イベントの詳細表示

PC版

画像3

スマホ版

画像4

固有のURLを持っており、

・イベントの紹介画像
・イベントタイトル
・イベント日時
・主催者名
・イベント詳細(文章)

・SNSシェアボタン 
・アクセス(Google マップ)

が表示されます。
主催者名の部分は後述の登録フォームでTwitterアカウントを入力している場合、プロフィールにリンクが貼られる様になっています。

固有のURLを持っているので、SNSなどでイベント単体のページのシェアも可能です。

【機能詳細】イベントの登録

画像5

イベントの登録はフォームで行います(スプレッドシートに直書きもできます)

①イベント名
②イベント日程
③開始時刻
④終了時刻  
⑤主催(名前・ハンドルネームなど)
⑥Twitter (@usami_0x0_sakiとかのID)
⑦メールアドレス
⑧説明(イベントの詳細)
⑨画像(イベントの紹介画像)

を入力します。(必須のものは必ず入れてください)

【機能詳細】イベントの編集・削除

画像7

変更したいイベントを選択して、変更したい部分だけ入力します。
空欄部分は変更されません。

削除する場合はイベント名を選択します。

データベース

スクリーンショット 2020-08-26 13.39.48

入力した内容はこんな感じでスプレットシートに保存されます。
ここから情報を読み取ってWEB上に表示しています。
なのでこちらを直接変更しても表示に反映されます。

導入したい方へ

有償にはなりますが、
うさみ(usami0x0saki@gmail.com)までご連絡ください。




サポートいただけると嬉しいです!