SoftrとAirtableというノーコードツールを使ってサンプルサイトを作ってみようと思います。
アカウント登録などについては、省略します。
目次
Airtableでの準備
ログインして右上のアイコンを押下する
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136738/4ed6bc24f150983f28dc459674a86ac2/4ed6bc24f150983f28dc459674a86ac2.png?_i=AA 360w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_67,c_scale/f_auto,q_auto/v1613136738/4ed6bc24f150983f28dc459674a86ac2/4ed6bc24f150983f28dc459674a86ac2.png?_i=AA 300w)
表示されたページの中断のAPIの箇所で、Generate API KEYを実行する
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136733/02d6e8267447cc50753fdf40ae7e22f9/02d6e8267447cc50753fdf40ae7e22f9.png?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_77,c_scale/f_auto,q_auto/v1613136733/02d6e8267447cc50753fdf40ae7e22f9/02d6e8267447cc50753fdf40ae7e22f9.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_198,c_scale/f_auto,q_auto/v1613136733/02d6e8267447cc50753fdf40ae7e22f9/02d6e8267447cc50753fdf40ae7e22f9.png?_i=AA 768w)
API Keyを控えておく
Softrでの準備
アプリケーションの追加をする
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136748/1991fdc03a02670f1e98c7368dbef4f1/1991fdc03a02670f1e98c7368dbef4f1.png?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_180,c_scale/f_auto,q_auto/v1613136748/1991fdc03a02670f1e98c7368dbef4f1/1991fdc03a02670f1e98c7368dbef4f1.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_460,c_scale/f_auto,q_auto/v1613136748/1991fdc03a02670f1e98c7368dbef4f1/1991fdc03a02670f1e98c7368dbef4f1.png?_i=AA 768w)
作成したいテンプレートを選択する
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136743/c7a6b65325523d16aafcda4509aa7bca/c7a6b65325523d16aafcda4509aa7bca.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_170,c_scale/f_auto,q_auto/v1613136743/c7a6b65325523d16aafcda4509aa7bca/c7a6b65325523d16aafcda4509aa7bca.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_434,c_scale/f_auto,q_auto/v1613136743/c7a6b65325523d16aafcda4509aa7bca/c7a6b65325523d16aafcda4509aa7bca.jpg?_i=AA 768w)
Airtableで取得したAPI Keyを設定しNextボタンを押下
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136729/580bf96be696e9fd99dec4afb3aef279/580bf96be696e9fd99dec4afb3aef279.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_137,c_scale/f_auto,q_auto/v1613136729/580bf96be696e9fd99dec4afb3aef279/580bf96be696e9fd99dec4afb3aef279.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_352,c_scale/f_auto,q_auto/v1613136729/580bf96be696e9fd99dec4afb3aef279/580bf96be696e9fd99dec4afb3aef279.jpg?_i=AA 768w)
次へ進む
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136725/9439f2a20ec85bac2c5c37d2dbf48b3a/9439f2a20ec85bac2c5c37d2dbf48b3a.png?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_139,c_scale/f_auto,q_auto/v1613136725/9439f2a20ec85bac2c5c37d2dbf48b3a/9439f2a20ec85bac2c5c37d2dbf48b3a.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_356,c_scale/f_auto,q_auto/v1613136725/9439f2a20ec85bac2c5c37d2dbf48b3a/9439f2a20ec85bac2c5c37d2dbf48b3a.png?_i=AA 768w)
SoftrのテンプレートをAirtableにコピーする
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136720/b6a0ae877a922a3bbb1af7954cbb8fbc/b6a0ae877a922a3bbb1af7954cbb8fbc.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_137,c_scale/f_auto,q_auto/v1613136720/b6a0ae877a922a3bbb1af7954cbb8fbc/b6a0ae877a922a3bbb1af7954cbb8fbc.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_349,c_scale/f_auto,q_auto/v1613136720/b6a0ae877a922a3bbb1af7954cbb8fbc/b6a0ae877a922a3bbb1af7954cbb8fbc.jpg?_i=AA 768w)
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136716/7635bdf2d0038b702199e275c2f05f01/7635bdf2d0038b702199e275c2f05f01.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_112,c_scale/f_auto,q_auto/v1613136716/7635bdf2d0038b702199e275c2f05f01/7635bdf2d0038b702199e275c2f05f01.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_286,c_scale/f_auto,q_auto/v1613136716/7635bdf2d0038b702199e275c2f05f01/7635bdf2d0038b702199e275c2f05f01.jpg?_i=AA 768w)
自分のAirtableのワークスペース内に、E-commerce Templateが追加
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/w_233,h_300,c_scale/f_auto,q_auto/v1613136661/9244b9f64f8401af89cec08f3e3c45df/9244b9f64f8401af89cec08f3e3c45df.jpg?_i=AA 233w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136661/9244b9f64f8401af89cec08f3e3c45df/9244b9f64f8401af89cec08f3e3c45df.jpg?_i=AA 252w)
Base urlをSoftrに設定するため、URL取得を行う
E-commerce Templateを開き、右上のHELPを押下する
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136669/c8d6ec044e8a17aebf93742a98dee514/c8d6ec044e8a17aebf93742a98dee514.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_47,c_scale/f_auto,q_auto/v1613136669/c8d6ec044e8a17aebf93742a98dee514/c8d6ec044e8a17aebf93742a98dee514.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_121,c_scale/f_auto,q_auto/v1613136669/c8d6ec044e8a17aebf93742a98dee514/c8d6ec044e8a17aebf93742a98dee514.jpg?_i=AA 768w)
API Documentationを選択する
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/w_170,h_300,c_scale/f_auto,q_auto/v1613136674/564574d83662012f92d45d79c53828ec/564574d83662012f92d45d79c53828ec.jpg?_i=AA 170w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136674/564574d83662012f92d45d79c53828ec/564574d83662012f92d45d79c53828ec.jpg?_i=AA 468w)
URLをコピーする
左ナビのCLOTHING TABLE => List recordsを押下して、右枠のcurlの所に記載されている
?より前のURLをコピーする
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136678/acdbee8609b057bd2991da167f2ee1b1/acdbee8609b057bd2991da167f2ee1b1.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_62,c_scale/f_auto,q_auto/v1613136678/acdbee8609b057bd2991da167f2ee1b1/acdbee8609b057bd2991da167f2ee1b1.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_159,c_scale/f_auto,q_auto/v1613136678/acdbee8609b057bd2991da167f2ee1b1/acdbee8609b057bd2991da167f2ee1b1.jpg?_i=AA 768w)
Softrにペーストする
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_53,c_scale/f_auto,q_auto/v1613136683/776db2b44157f9acefa0f0e39c0ae8c8/776db2b44157f9acefa0f0e39c0ae8c8.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_136,c_scale/f_auto,q_auto/v1613136683/776db2b44157f9acefa0f0e39c0ae8c8/776db2b44157f9acefa0f0e39c0ae8c8.jpg?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136683/776db2b44157f9acefa0f0e39c0ae8c8/776db2b44157f9acefa0f0e39c0ae8c8.jpg?_i=AA 1000w)
アプリケーションがダッシュボードにできる
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_296,c_scale/f_auto,q_auto/v1613136687/b22798eef1f4504c842a5c3d5359a3cf/b22798eef1f4504c842a5c3d5359a3cf.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136687/b22798eef1f4504c842a5c3d5359a3cf/b22798eef1f4504c842a5c3d5359a3cf.jpg?_i=AA 604w)
完成
あとは、Airtable側でデータをいじったりして、Softr側で表示項目を追加したりレイアウト変更すれば完成。
![Softr + Airtableでサンプルサイト構築](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613136692/e11ad5b39afb09389589580aad14d344/e11ad5b39afb09389589580aad14d344.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_125,c_scale/f_auto,q_auto/v1613136692/e11ad5b39afb09389589580aad14d344/e11ad5b39afb09389589580aad14d344.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_319,c_scale/f_auto,q_auto/v1613136692/e11ad5b39afb09389589580aad14d344/e11ad5b39afb09389589580aad14d344.jpg?_i=AA 768w)
本当に簡単にサイトができてしまいます。
これはサンプルをそのまま適用しただけなので、実際に利用する際は色々と変更が必要になりますが
それでも自分で一からサイトを作るよりは、はるかに簡単にできてしまいます。
恐るべし。
以下が、Softr + Airtableで作成したサイトになります。
ユーザ登録無しですが、画像の投稿まで可能です。
無料版の場合、robots.txtで、全てのrobotからのアクセスが禁止されるので公開してもアクセスはありません。
ダイレクトアクセスのみになります。
30分ぐらいでこちらのサイト作成したのでびっくりです。
ぜひ触ってみてください。