glide
PWA

【Glideスゴイ】スプレッドシート1カラムのみで掲示板PWAアプリつくってみた

Glideを知ってますか?

GoogleスプレッドシートからPWAアプリを爆速で作れるサービスです。

Glideリンク https://app.heyglide.com

そこで、どれだけ簡単なのかを啓蒙すべく一番簡単な作成方法を紹介します。


作ったアプリ: 掲示板アプリ

https://board.glideapp.io/

app_boad.jpg

スレッド形式のシンプルな掲示板です。

+でスレッドを自由に追加する事ができます。

コメント時にemail入力を求められますが、テストアプリとして作ったので、適当で大丈夫です。


作り方


1. Googleスプレッドシート

threadカラムを一つ作って、スレを適当にいれて置きます。

用意するデータはこれだけです。

sheet.jpg


2. 「+ New App」でアプリ新規作成

ボタンを押すとアプリにスレッド一覧画面ができてます。

ここではLayoutはListを選択してAdd itemをONにします。

boad.jpg

Glideについてをクリックすると詳細ページ作成ができます。

ここでは「+」でCommentsを追加します。これだけです。

add_comment.jpg


3. 「Settings」

アイコンとURL、説明、公開設定を決めます。

b_setting.jpg


4. 「Open app」を押すと公開

公開用ページが表示されます。

このページのURLを教えたり、Twitterでシェアします。

QRコードをスマホで読み取る事でもアプリが起動できます。

keijiban.jpg


5. アプリ完成!

 

これでアプリは完成です。

拍子抜けするくらい簡単ですね。

アプリの基本構造は「一覧リスト」→「詳細ページ」の構造です。

一覧リストは、リスト表示のほか、タイル形式、ギャラリー形式などを選択できます。

詳細ページの設置できるアイテムは、button、 e-mail、 リンク、マークダウン、ノート、電話番号、セパレーター、シンプルバリュー、スイッチボタン、コメント、オーディオプレーヤー、イメージマップ、 summary、 ビデオリンクということで豊富です。

今回は掲示板ということでシンプルを目指しましたが、

アイテムが豊富なので、アイデア次第で良さげなツール系アプリを作れそうですね。

以上、Glideスゴイよという話でした。

自分はGlideでラーメンマップを作ったりしました。

その時やった事などをブログにまとめたのでこちらも参考にしてみてください。

https://cloudlance-motio.work/post/glide-good/