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

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

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

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

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

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

The platform to build next‒gen apps - Airtable

Airtable is a low‒code platform to build…
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でサンプルサイト構築

Home - made with softr.io

edelmira657.softr.io

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

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

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

恐るべし。

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

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

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

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

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

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