【ノーコードアプリ】Softr使ってみた!(Airtable連携 編)

前回の続き、Airtableも使用して実際に商品などを並べてみようと思います。

Softrは、Bubbleのようにデーターベースを持ち合わせていません。
そこでSoftrとAirtableを連携しての使い方を以下に説明したいと思います。
慣れてしまえば、商品サイトは半日で作れます。
まずは、お試しあれ!

まずは、Airtableを登録しましょう。

画面右上の「sign up for free」を押す。
赤枠内の「メアド」や「ソーシャルログイン(Gmail)」にてログインします。
左の様な「My First Workspace」画面が表示されます。
「Softr」のウィンドウ画面に戻ってください。
「+ボタン」を押してください。
右から出てきましたメニュー内の「DYNAMIC」内の
「List」内の「List with vertical cards and des..」を選択。

左の様な画面になります。

ブロックを選択(クリック)すると右からメニュー「Connect to Airtable」が出てきます。
黄色いボタン「Setup Airtable」を押します。
「Connect your Airtable API key」という画面に切り替わります。
青い文字「Airtable Account page」を押します。
Airtableに移動します。
左の様な画面になります。
薄紫色の・・・部分がAPIkeyになります。
クリックすると表示されるのでコピーしましょう。
Softrに移動します。
「Airtable API Key」に先ほどコピーしたAPI keyを入れ、下部の「Connect to Airtable」を押します。
これで、SoftrとAirtableが接続されました。

Airtableに戻ります。
上部の「Templates」を押します。

今回は、「Everyday Life」内の「Pet Medical History」を押します。
「Pet Medical History Template」という詳細ページが表示されます。
青いボタン「Use template」を押します。
左の様な画面になりますので、「Add base」を押してください。

「Pet Medical History」というテーブルが表示されます。
Airtableの「My First Workspace」画面に
「Pet Medical History」が表示されていることを確認しましょう。


Softrに戻ります。
先ほどのブロックをクリックすると右からメニューが出てきます。
ブロックに対して、Airtableの情報を連携させます。
「Airtable Base」の項目にて「Pet Medical History」を選択。
「Airtable Table」の項目にて「Pets」を選択。
「Default View」の項目にて「Main View」を選択。
「Sort by」の項目にて「Animal // A – Z」を選択。
「Items per page」の項目にて「Main View」を選択。
「INLINE FILTERS」にてFilterSettingsを設定してみてください。
これで、情報の絞り込み表示も可能となります。

Airtableの内容を変更して操作する場合は、一度「Duplicate base」にて複製し
内容変更を行ってください。
その際には、Soft側でAirtableの再選択をお願いします。

次回は、Softr x Airtable x Slackで受付システムを作ってみたいと思います。

プレスマンでは、ノーコード(nocode)・ローコード思考によるDXを進めています。
ECサイト・POC・社内DX・リスキルに至るまで、お問い合わせください。
必ず良い答えをご用意できます!
ご相談は以下よりお願い致します。

pm-manabu

pm-manabu

自分の興味があるノーコード・ローコードの情報を発信していけたらと思います。