Softr + Airtableでサンプルサイト構築

Softr + Airtableでサンプルサイト構築

2021年1月9日
ノーコード
Pocket

SoftrとAirtableというノーコードツールを使ってサンプルサイトを作ってみようと思います。

アカウント登録などについては、省略します。

Softr + Airtableでサンプルサイト構築
Softr turns your Airtable data into a beautiful and powerful website, web app or…
www.softr.io
Softr + Airtableでサンプルサイト構築
Airtable is a low-code platform for building collaborative apps. Customize your …
airtable.com

Airtableでの準備

ログインして右上のアイコンを押下する

Softr + Airtableでサンプルサイト構築
hhyひょひょうひょひ

表示されたページの中断のAPIの箇所で、Generate API KEYを実行する

Softr + Airtableでサンプルサイト構築

API Keyを控えておく

Softrでの準備

アプリケーションの追加をする

Softr + Airtableでサンプルサイト構築

作成したいテンプレートを選択する

Softr + Airtableでサンプルサイト構築

Airtableで取得したAPI Keyを設定しNextボタンを押下

Softr + Airtableでサンプルサイト構築

次へ進む

Softr + Airtableでサンプルサイト構築

SoftrのテンプレートをAirtableにコピーする

Softr + Airtableでサンプルサイト構築
Softr + Airtableでサンプルサイト構築

自分のAirtableのワークスペース内に、E-commerce Templateが追加

Softr + Airtableでサンプルサイト構築

Base urlをSoftrに設定するため、URL取得を行う

E-commerce Templateを開き、右上のHELPを押下する

Softr + Airtableでサンプルサイト構築

API Documentationを選択する

Softr + Airtableでサンプルサイト構築

URLをコピーする

左ナビのCLOTHING TABLE => List recordsを押下して、右枠のcurlの所に記載されている

?より前のURLをコピーする

Softr + Airtableでサンプルサイト構築

Softrにペーストする

Softr + Airtableでサンプルサイト構築

アプリケーションがダッシュボードにできる

Softr + Airtableでサンプルサイト構築

完成

あとは、Airtable側でデータをいじったりして、Softr側で表示項目を追加したりレイアウト変更すれば完成。

Softr + Airtableでサンプルサイト構築

本当に簡単にサイトができてしまいます。

これはサンプルをそのまま適用しただけなので、実際に利用する際は色々と変更が必要になりますが

それでも自分で一からサイトを作るよりは、はるかに簡単にできてしまいます。

恐るべし。

以下が、Softr + Airtableで作成したサイトになります。

ユーザ登録無しですが、画像の投稿まで可能です。

Softr + Airtableでサンプルサイト構築
My Diet | My Dietは、ダイエッターやトレーニーの為の日々の何気ない風景は、自撮り、おすすめ商品、食事等の写真をアップする為のサイトです。
mydiet.softr.io

無料版の場合、robots.txtで、全てのrobotからのアクセスが禁止されるので公開してもアクセスはありません。

ダイレクトアクセスのみになります。

30分ぐらいでこちらのサイト作成したのでびっくりです。

ぜひ触ってみてください。