paiza開発日誌

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

AirtableのデータベースだけでWebサイトを作成・公開できるサービス「Table2Site」を使ってみた!

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

今回はクラウドデータベースのAirtableを活用して、独自のWebサイトを作成できるサービスをご紹介します。

プログラミングは一切不要で、視覚的に分かりやすいデータを編集するだけで高度なWebサイトを誰でも作成できるので非常に便利です。

企業や個人向けのWebサイトからプロトタイプまで、これから作成しようと検討している人はぜひ参考にしてみてください!

Table2Site

f:id:paiza:20190227105806j:plain

■「Airtable」の事前準備をしよう!

それでは、最初に事前準備として「Table2Site」のユーザー登録で必要になる「APIキー」をAirtableから取得します。

Airtableはクラウド上に誰でも簡単に扱えるデータベースを構築できるWebアプリケーションです。

まずは「Airtable」にアクセスしてログインを済ませておきましょう。

Airtable

f:id:paiza:20190227105941j:plain


設定メニューから「Account」を選択します。

f:id:paiza:20190227105957j:plain


「Generate API Key」ボタンをクリック!

f:id:paiza:20190227110013j:plain


すると「APIキー」が発行されるのでコピーしておきましょう。

f:id:paiza:20190227110024j:plain


今度は「Table2Site」にアクセスしてユーザー登録を行います。

その時に、先ほどコピーした「APIキー」も一緒に貼り付けておきましょう。

f:id:paiza:20190227110040j:plain

これで事前準備は完了です!

早速、Airtableのデータベースを使ったWebサイトを作成していきましょう。

■「Table2Site」の基本的な使い方!

「Table2Site」にログインすると自分専用の「ダッシュボード」が表示されます。

しかし、まだ空っぽの状態なのでまずは「create a site」と書かれたリンクをクリックしましょう!

f:id:paiza:20190227110103j:plain


どのようなWebサイトを作成するかを聞かれるので、今回は試しにランディングページを作ってみましょう。

f:id:paiza:20190227110115j:plain


次に、テンプレートの選択画面になるので好きなものを選んで「Copy base」ボタンをクリックします。

f:id:paiza:20190227110127j:plain


すると、テンプレートの情報が格納されたAirtableのデータベースが表示されます。

f:id:paiza:20190227110153j:plain


画面右上にある「Copy base」をクリックします!

f:id:paiza:20190227110205j:plain


自分のAirtableにテンプレートをコピーする画面になるので、「add base」ボタンをクリックします。

f:id:paiza:20190227110222j:plain


これでテンプレートがコピーされました!

f:id:paiza:20190227110234j:plain

今度は、このテンプレートを「Table2Site」で利用するために固有の「ID」を取得します。

次のAPIページから、作成したテンプレートを選択しましょう!

Airtable API


ブラウザのアドレス欄を見ると、以下のようにIDが表示されているのでコピーしておきます。

f:id:paiza:20190227110529j:plain


「Table2Site」に戻り、コピーしたIDを入力しましょう。

f:id:paiza:20190227110542j:plain

「slug」の入力欄は好きな英数字を設定することで、公開時のURLをカスタマイズできます。

画面下の「Add site」ボタンをクリックすれば完了です!


作成されたWebサイトがダッシュボードに追加されているので、プレビューボタンをクリックしてみましょう。

f:id:paiza:20190227110558j:plain


https://table2site.com/site/設定したslug」のURLで見事に公開されているのが分かりますね。

f:id:paiza:20190227110612j:plain

あとはこのURLをメールやSNSでシェアするだけで、友人・知人などに閲覧してもらうことができます。

また、ダッシュボードで「Liveモード」をONにすると、コンテンツがキャッシュされるようになるので高速な表示も可能になります。

(※Webサイトをカスタマイズする時はOFFにしておきましょう)

■Webサイトをカスタマイズしてみよう!

今度は、作成したWebサイトをカスタマイズしてみましょう!

「Table2Site」では、Airtableのデータベースを編集するだけで誰でも簡単にWebサイトを編集できるように設計されています。

そこで、ダッシュボードから「Base」の項目に記載されているIDをクリックしましょう!

f:id:paiza:20190227110640j:plain


すると、Airtableのデータベースが表示されます。

f:id:paiza:20190227110651j:plain

このデータベースは、1行ずつのデータがWebサイトの各コンテンツを意味しています。


例えば、一番上の「Hero」タイプを意味する行の「Title列」を選択してみます。

f:id:paiza:20190227110704j:plain


中身の英語テキストを日本語に書き換えてみましょう!

f:id:paiza:20190227110715j:plain


そしてWebサイトを表示すると、テキストが見事に変更されているのが分かりますね!

f:id:paiza:20190227110728j:plain

このようにAirtableのデータベースを編集するだけで、Webサイトもリアルタイムに変更されるのです。


また、データを新規に作成することも可能です。

f:id:paiza:20190227110741j:plain

タイプやカラーリング、タイトルなどを入力します。


そして、オプションにはもっと細かい編集もできるようになっています。

例えば挿入する「アイコンサイズ」や「フォントサイズ」、列の幅やアイコンの配置などを次のような記述で設定が可能です。

icon size = 350px
font size = 20px
items per row = 2
theme = icon on top


また、挿入するアイコンはURLで指定したり、個別にタイトルやテキストを設定することも可能です。

feature 1 icon = アイコンのURL(パス)
feature 1 title = コンテンツのタイトルテキスト
feature 1 text = コンテンツのテキスト


実際に入力すると以下のような感じになります。

feature 1 icon = https://pitchcom.carrd.co/assets/images/image04.png
feature 1 title = サンプルタイトル
feature 1 text =サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

feature 2 icon = https://d33wubrfki0l68.cloudfront.net/f4c1bc4fe260124a487327e818604f88c66f4fb5/8a05e/images/features/collab.png
feature 2 title = サンプルタイトル
feature 2 text =サンプルテキスト。サンプルテキスト。サンプルテキスト。


上記のような設定をオプションの項目に記述すれば良いわけです。

f:id:paiza:20190227110924j:plain


Webサイトを表示してみると新しいコンテンツが追加されたことが確認できました!

f:id:paiza:20190227110935j:plain

このようにデータベースへテキストや画像・動画などをどんどん追加していくだけで、簡単にオリジナルのWebサイトを作成できるのが最大の魅力と言えるでしょう。

また、コンテンツ以外にも「headタグ」内に記述する「meta情報」「favicon」「titleタグ」なども同様に編集することが可能なので便利ですよ。

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


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

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

■まとめ

今回は、Airtableのデータベースを編集するだけでWebサイトを作成できるサービスをご紹介しました!

テンプレートを編集するだけでも高機能なWebサイトが作成できますが、慣れてきたらゼロからデータベースを編集して完全オリジナルなWebサイトも作れるようになるでしょう。

これからWebサイトを作成しようと検討している人は、ぜひ参考にしてみてください!


<参考>





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

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud