どうも、まさとらん（@0310lan）です！
今回はクラウドデータベースのAirtableを活用して、独自のWebサイトを作成できるサービスをご紹介します。
プログラミングは一切不要で、視覚的に分かりやすいデータを編集するだけで高度なWebサイトを誰でも作成できるので非常に便利です。
企業や個人向けのWebサイトからプロトタイプまで、これから作成しようと検討している人はぜひ参考にしてみてください！
【 Table2Site 】
■「Airtable」の事前準備をしよう！
それでは、最初に事前準備として「Table2Site」のユーザー登録で必要になる「APIキー」をAirtableから取得します。
Airtableはクラウド上に誰でも簡単に扱えるデータベースを構築できるWebアプリケーションです。
まずは「Airtable」にアクセスしてログインを済ませておきましょう。
【 Airtable 】
設定メニューから「Account」を選択します。
「Generate API Key」ボタンをクリック！
すると「APIキー」が発行されるのでコピーしておきましょう。
今度は「Table2Site」にアクセスしてユーザー登録を行います。
その時に、先ほどコピーした「APIキー」も一緒に貼り付けておきましょう。
これで事前準備は完了です！
早速、Airtableのデータベースを使ったWebサイトを作成していきましょう。
■「Table2Site」の基本的な使い方！
「Table2Site」にログインすると自分専用の「ダッシュボード」が表示されます。
しかし、まだ空っぽの状態なのでまずは「create a site」と書かれたリンクをクリックしましょう！
どのようなWebサイトを作成するかを聞かれるので、今回は試しにランディングページを作ってみましょう。
次に、テンプレートの選択画面になるので好きなものを選んで「Copy base」ボタンをクリックします。
すると、テンプレートの情報が格納されたAirtableのデータベースが表示されます。
画面右上にある「Copy base」をクリックします！
自分のAirtableにテンプレートをコピーする画面になるので、「add base」ボタンをクリックします。
これでテンプレートがコピーされました！
今度は、このテンプレートを「Table2Site」で利用するために固有の「ID」を取得します。
次のAPIページから、作成したテンプレートを選択しましょう！
【 Airtable API 】
ブラウザのアドレス欄を見ると、以下のようにIDが表示されているのでコピーしておきます。
「Table2Site」に戻り、コピーしたIDを入力しましょう。
「slug」の入力欄は好きな英数字を設定することで、公開時のURLをカスタマイズできます。
画面下の「Add site」ボタンをクリックすれば完了です！
作成されたWebサイトがダッシュボードに追加されているので、プレビューボタンをクリックしてみましょう。
「https://table2site.com/site/設定したslug」のURLで見事に公開されているのが分かりますね。
あとはこのURLをメールやSNSでシェアするだけで、友人・知人などに閲覧してもらうことができます。
また、ダッシュボードで「Liveモード」をONにすると、コンテンツがキャッシュされるようになるので高速な表示も可能になります。
（※Webサイトをカスタマイズする時はOFFにしておきましょう）
■Webサイトをカスタマイズしてみよう！
今度は、作成したWebサイトをカスタマイズしてみましょう！
「Table2Site」では、Airtableのデータベースを編集するだけで誰でも簡単にWebサイトを編集できるように設計されています。
そこで、ダッシュボードから「Base」の項目に記載されているIDをクリックしましょう！
すると、Airtableのデータベースが表示されます。
このデータベースは、1行ずつのデータがWebサイトの各コンテンツを意味しています。
例えば、一番上の「Hero」タイプを意味する行の「Title列」を選択してみます。
中身の英語テキストを日本語に書き換えてみましょう！
そしてWebサイトを表示すると、テキストが見事に変更されているのが分かりますね！
このようにAirtableのデータベースを編集するだけで、Webサイトもリアルタイムに変更されるのです。
また、データを新規に作成することも可能です。
タイプやカラーリング、タイトルなどを入力します。
そして、オプションにはもっと細かい編集もできるようになっています。
例えば挿入する「アイコンサイズ」や「フォントサイズ」、列の幅やアイコンの配置などを次のような記述で設定が可能です。
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 =サンプルテキスト。サンプルテキスト。サンプルテキスト。
上記のような設定をオプションの項目に記述すれば良いわけです。
Webサイトを表示してみると新しいコンテンツが追加されたことが確認できました！
このようにデータベースへテキストや画像・動画などをどんどん追加していくだけで、簡単にオリジナルの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では、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
