PoryでAirtableベースのWebページを作ってみる（１）
Poryというサービスが存在します。Airtableというクラウド型のWebデータベースサービスのデータを元にWebページを構築してくれるというものです。まだベータ版のようですが、可能性を感じさせるものだったので試してみました。
テンプレートを見てみる
何をどうすればいいのかわからないので、まずはテンプレートを見てみます。一番最初にあるPory Jobsというテンプレートを使ってみることにしました。
Pory Jobsテンプレートを解析してみる
テンプレートがどのような構造で出来ているか調べてみます。
一番上の画像の部分はよくわからないのでとりあえず後回しにします。
その次、Type（就業体系）とSearch By Location（勤務地）でフィルタ出来るようになっていますが、これはAirtableのFilter1と2の列に該当していることがわかります。
そのほかは大体みればわかりまして、以下のような感じです。
Webページの表記 ー Airtableのデータ
職種 ー Title列
会社名 － Subtitle列
職種,勤務地 － Filter1と2の列
Applyボタン － Call to Action URL列
ロゴ － Image列
詳細 － Description列
Description列がちょっと曲者でして、AirtableにHTMLとして書き込まれています。
実際にPoryでWebページを作ってみる
Poryにログインして［Create Site］から、Pory Jobsのテンプレートを選び［Next］をクリック。適当に名前をつけてサイトを作ります。
最初はまだAirtableのデータベースと紐づけられていないので［Set up my base］をクリック。
まだ手持ちのデータベースがないので［Copy template base］をクリック。
［Copy Template］をクリックすると別ウィンドウでAirtableが開くのでデータをWorkspaceにコピーします。
続いて［Get Base Id］をクリックして、所望のBaseのIDを取得します。
ウィンドウが新たに開いて英文がドサッと出てきて困惑しますが、appで始まるやつがBase Idです。
ちなみに、この画面はAirtableのBaseの画面の右上にあるHELPの<>API documentationをクリックしても出てきます。もし入力したBase Idが違うとか言われた場合はここをチェックします。
API Keyを入力します。これはAirtableのAccountページから発行できます。
とりあえず完成
ここまで設定したらとりあえず完成です。［View site］ボタンをクリックすると、テンプレートと同じページができているはずです。
Airtableにレコードを追加してみる
このままだと本当にコピーしたBaseで動いているのか不安なので、適当にBaseにレコードを追加してみます。
追加してみると無事Poryの方に反映されました！
ひとまず今日はここまで。
ページ上部にあるボタンやフィルタの動作などよくわからないところもあるので、順次研究してみます。
この記事が気に入ったらサポートをしてみませんか？