どうも、まさとらん（@0310lan）です！
今回はスプレッドシート風のデータベースを手軽に利用できる「Airtable」を活用したWebサイト構築サービスをご紹介します。
「Airtable」のデータを読み込むだけで、完全ノーコードによるWebサイトの開発が可能であり、そのままネット上へ公開できるホスティング機能も搭載されています。
基本的な機能は無料で利用できるので、手軽にWebサイトを作って公開してみたい人はぜひ参考にしてみてください！
■「Pory」の使い方
それでは、「Pory」をどのように使えばいいのか詳しく見ていきましょう！
まずはサイトのトップページ上部にある【Sign up】ボタンをクリックして無料のユーザー登録をしておきます。
ログイン画面が表示されたら、Googleアカウントで登録するかメールアドレスを使って登録するかを選択できます。（今回はメールアドレスで登録します）
ユーザー名やパスワードなどを設定するだけで簡単に登録できます。
以下のような「ダッシュボード」が表示されたら準備完了です！
この画面で自分のプロジェクト（Webサイト）を新規作成したり管理したりすることができます。詳細なオンラインドキュメントも用意されているので、事前にチェックしておくといいでしょう。
■「Airtable」を利用したWebサイトの作り方
それでは「Pory」と「Airtable」を連携して簡単なWebサイトを1つ作ってみましょう。
ダッシュボードの画面から【Create Site】ボタンをクリックしてください。
テンプレートのリストが表示されるので、好きなものを選んで画面下部にある【Next】ボタンをクリックします。
これから作成するWebサイトの名称を入力して【Create Site】ボタンをクリックしましょう。
するとWebサイトの編集エディタが表示されます！
このエディタを利用して自分のイメージするWebページを簡単に作成できるようになっています。
そこで、まずは「Airtable」と連携しましょう！
エディタの左メニューにある【Set up my base】ボタンをクリックしてください。
連携するためのポップアップ画面が表示されるのですが、この時点ではまだ「Airtable」にデータが存在しないので公式に用意されているサンプルデータを使ってみます。
「Airtable」のサンプルデータを利用するためのガイドが表示されます。【Step1】にあるテンプレートボタンをクリックしてください。
すると「Airtable」のダッシュボード画面に遷移するので、サンプルデータを任意のワークスペースに追加します。
ワークスペースにデータが追加されたことを確認しておきましょう。
「Pory」のガイドに戻り、【Step2】にある【Get Base Id】ボタンをクリックしてください。
さきほど「Airtable」に追加されたサンプルデータを選択します。
オンラインドキュメントが表示されるのですが、本文内にIDが表示されているのでコピーしておきましょう。
「Pory」のガイドに戻り、コピーしたIDを貼り付けてください。
最後に【Step3】にある「Airtable」のアカウントリンクをクリックします。
「Airtable」のアカウントページが表示されます。その中にある【Generate API key】と記載されたボタンがあるのでクリックしてください。
自分専用のAPIキーが生成されるのでコピーします。
「Pory」のガイドに戻り、コピーしたAPIキーを貼り付ければ準備完了です！
連携に成功すると、「Airtable」のデータが読み込まれてWebサイトに反映されます。
■「Airtable」のデータを変更してみよう！
ここまでの作業で「Pory」と「Airtable」の連携が完了したわけですが、本当に連携ができているのか確認してみましょう。
編集エディタの左メニューにある【View data】ボタンをクリックしてください。
「Airtable」のデータベースが表示されます。
「Pory」で作成したWebサイトに読み込まれているのがこのデータになります。
試しに任意の商品名を変更してみましょう。好きなタイトルを選択してください。
英語で表記されていたタイトルを日本語に変えてみましょう。
「Pory」の編集エディタに戻り、商品名をチェックしてみるとタイトル名が変更されているのが分かります。
このように「Airtable」のデータとリアルタイムに連携されているので、データを変更すればすぐにエディタ側も反映されるので便利です。
あとは「Airtable」のデータを自分の好きなようにカスタマイズするだけで、Webサイトを手軽に編集できるようになるわけです。もちろんデータの追加・削除も可能で、リンクを埋め込んだり画像を挿入することもできます。
■Webサイトを公開しよう！
「Pory」で作成したWebサイトは簡単にネット上へ公開できるので、合わせてご紹介しておきます。
方法は簡単で、編集エディタ上部にある【View site】ボタンをクリックします。
URLの先頭部分を好きな英数字で設定したら【Create domain】ボタンをクリックしてください。
すると、ネット上に公開されたWebサイトが表示されます。
アドレスバーのURLをコピーしてSNSやメールなどでシェアすれば、友人・知人にWebサイトを閲覧してもらうこともできます。
また、Webサイトに変更を加えた場合は【Publish Changes】ボタンをクリックすればすぐに反映されるので簡単です。
ちなみに、以下の公式YouTubeチャンネルには「Pory」のさらに詳しい使い方が紹介されているので興味のある方はぜひ参考にしてみてください！
【 PoryHQ | YouTube 】
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回は、「Airtable」のデータベースを利用して簡単にWebサイトを構築できるサービスについてご紹介しました。
「Pory」には本文でご紹介した機能以外にも、手軽にフォーム機能を利用できたり高度な検索フィルタを活用したりなど、便利な機能がたくさん搭載されています。
これからWebサイトを作ってみようと考えている人は、ぜひ今回の記事を参考にしながら自分だけのサイト作りに挑戦してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
