paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

VC投資先スタートアップ企業特集

AirtableのデータをノーコードでWebサイトに変換できる「Pory」を使ってみた!

f:id:paiza:20201202120007j:plain
どうも、まさとらん(@0310lan)です!

今回はスプレッドシート風のデータベースを手軽に利用できる「Airtable」を活用したWebサイト構築サービスをご紹介します。

「Airtable」のデータを読み込むだけで、完全ノーコードによるWebサイトの開発が可能であり、そのままネット上へ公開できるホスティング機能も搭載されています。

基本的な機能は無料で利用できるので、手軽にWebサイトを作って公開してみたい人はぜひ参考にしてみてください!

Pory

f:id:paiza:20201202120115j:plain

「Pory」は「Airtable」と連携するサービスなので、あらかじめ以下のリンクから「Airtable」にログインしておきましょう。

<参考リンク>

■「Pory」の使い方

それでは、「Pory」をどのように使えばいいのか詳しく見ていきましょう!

まずはサイトのトップページ上部にある【Sign up】ボタンをクリックして無料のユーザー登録をしておきます。

f:id:paiza:20201202120609j:plain


ログイン画面が表示されたら、Googleアカウントで登録するかメールアドレスを使って登録するかを選択できます。(今回はメールアドレスで登録します)

f:id:paiza:20201202120631j:plain


ユーザー名やパスワードなどを設定するだけで簡単に登録できます。

f:id:paiza:20201202120650j:plain


以下のような「ダッシュボード」が表示されたら準備完了です!

f:id:paiza:20201202120702j:plain

この画面で自分のプロジェクト(Webサイト)を新規作成したり管理したりすることができます。詳細なオンラインドキュメントも用意されているので、事前にチェックしておくといいでしょう。

■「Airtable」を利用したWebサイトの作り方

それでは「Pory」と「Airtable」を連携して簡単なWebサイトを1つ作ってみましょう。

ダッシュボードの画面から【Create Site】ボタンをクリックしてください。

f:id:paiza:20201202120726j:plain


テンプレートのリストが表示されるので、好きなものを選んで画面下部にある【Next】ボタンをクリックします。

f:id:paiza:20201202120739j:plain


これから作成するWebサイトの名称を入力して【Create Site】ボタンをクリックしましょう。

f:id:paiza:20201202120751j:plain


するとWebサイトの編集エディタが表示されます!

f:id:paiza:20201202120805j:plain

このエディタを利用して自分のイメージするWebページを簡単に作成できるようになっています。


そこで、まずは「Airtable」と連携しましょう!

エディタの左メニューにある【Set up my base】ボタンをクリックしてください。

f:id:paiza:20201202120819j:plain


連携するためのポップアップ画面が表示されるのですが、この時点ではまだ「Airtable」にデータが存在しないので公式に用意されているサンプルデータを使ってみます。

f:id:paiza:20201202120829j:plain


「Airtable」のサンプルデータを利用するためのガイドが表示されます。【Step1】にあるテンプレートボタンをクリックしてください。

f:id:paiza:20201202120842j:plain


すると「Airtable」のダッシュボード画面に遷移するので、サンプルデータを任意のワークスペースに追加します。

f:id:paiza:20201202120854j:plain


ワークスペースにデータが追加されたことを確認しておきましょう。

f:id:paiza:20201202120908j:plain


「Pory」のガイドに戻り、【Step2】にある【Get Base Id】ボタンをクリックしてください。

f:id:paiza:20201202120920j:plain


さきほど「Airtable」に追加されたサンプルデータを選択します。

f:id:paiza:20201202120932j:plain


オンラインドキュメントが表示されるのですが、本文内にIDが表示されているのでコピーしておきましょう。

f:id:paiza:20201202120945j:plain


「Pory」のガイドに戻り、コピーしたIDを貼り付けてください。

f:id:paiza:20201202120959j:plain


最後に【Step3】にある「Airtable」のアカウントリンクをクリックします。

f:id:paiza:20201202121017j:plain


「Airtable」のアカウントページが表示されます。その中にある【Generate API key】と記載されたボタンがあるのでクリックしてください。

f:id:paiza:20201202121027j:plain


自分専用のAPIキーが生成されるのでコピーします。

f:id:paiza:20201202121039j:plain


「Pory」のガイドに戻り、コピーしたAPIキーを貼り付ければ準備完了です!

f:id:paiza:20201202121053j:plain


連携に成功すると、「Airtable」のデータが読み込まれてWebサイトに反映されます。

f:id:paiza:20201202121104j:plain

■「Airtable」のデータを変更してみよう!

ここまでの作業で「Pory」と「Airtable」の連携が完了したわけですが、本当に連携ができているのか確認してみましょう。

編集エディタの左メニューにある【View data】ボタンをクリックしてください。

f:id:paiza:20201202121122j:plain


「Airtable」のデータベースが表示されます。

f:id:paiza:20201202121148j:plain

「Pory」で作成したWebサイトに読み込まれているのがこのデータになります。


試しに任意の商品名を変更してみましょう。好きなタイトルを選択してください。

f:id:paiza:20201202121200j:plain


英語で表記されていたタイトルを日本語に変えてみましょう。

f:id:paiza:20201202121218j:plain


「Pory」の編集エディタに戻り、商品名をチェックしてみるとタイトル名が変更されているのが分かります。

f:id:paiza:20201202121234j:plain

このように「Airtable」のデータとリアルタイムに連携されているので、データを変更すればすぐにエディタ側も反映されるので便利です。

あとは「Airtable」のデータを自分の好きなようにカスタマイズするだけで、Webサイトを手軽に編集できるようになるわけです。もちろんデータの追加・削除も可能で、リンクを埋め込んだり画像を挿入することもできます。

■Webサイトを公開しよう!

「Pory」で作成したWebサイトは簡単にネット上へ公開できるので、合わせてご紹介しておきます。

方法は簡単で、編集エディタ上部にある【View site】ボタンをクリックします。

f:id:paiza:20201202121253j:plain


URLの先頭部分を好きな英数字で設定したら【Create domain】ボタンをクリックしてください。

f:id:paiza:20201202121306j:plain


すると、ネット上に公開されたWebサイトが表示されます。

f:id:paiza:20201202121317j:plain

アドレスバーのURLをコピーしてSNSやメールなどでシェアすれば、友人・知人にWebサイトを閲覧してもらうこともできます。

また、Webサイトに変更を加えた場合は【Publish Changes】ボタンをクリックすればすぐに反映されるので簡単です。


ちなみに、以下の公式YouTubeチャンネルには「Pory」のさらに詳しい使い方が紹介されているので興味のある方はぜひ参考にしてみてください!

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回は、「Airtable」のデータベースを利用して簡単にWebサイトを構築できるサービスについてご紹介しました。

「Pory」には本文でご紹介した機能以外にも、手軽にフォーム機能を利用できたり高度な検索フィルタを活用したりなど、便利な機能がたくさん搭載されています。

これからWebサイトを作ってみようと考えている人は、ぜひ今回の記事を参考にしながら自分だけのサイト作りに挑戦してみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.