GatsbyJS + Airtable + NetlifyでJAMstackな雑記サイトはじめました

Advertisement

JAMstack な静的サイトジェネレーター(Static Site Generator)を試してみたかったので、雑記を書くためのサイトを作ってみました。(JAMstackってなによ? という方はこちら)

その名も「R note」。このブログ「Rriver」のノートという意味です。

いまのところ、主にGatsbyJSを使ったサイト制作についてメモを書き残しています。あと、このブログでは書かないような小ネタとか、その瞬間思ったことを、勢いにまかせてちょこちょこメモっていこうと思います。

今回使ったJAMstackの構成

静的サイトジェネレーターもいろいろあるし、Headless CMSやデプロイ用のプラットフォームもたくさんあるみたいなんですが、今回採用したのは以下の3つです。

この3つを組み合わせてゼロから構築しています。Gatsbyにはすぐに使えるテンプレート的なもの(Starter)があって、それを使えばブログ的なサイトはすぐに作れます。でも今回は勉強のために、あえてゼロから構築しています。おかげで、かなり勉強になってます。

GatsbyJS

GatsbyはReactベースの静的サイトジェネレーターで、Reactで作ったテンプレートを静的なHTMLに書き出してくれるツールです。Reactの勉強にももってこいです。似たツールにJekyll Hexo Hugo Nuxt などがあります。他にもまだまだたくさん あます。

Gatsbyを選んだ理由は、以下の4つが大きかったです。

  • ReactベースなのでReactの勉強にもなる
  • データソースを選ばない(Markdownファイル、WordPress、Contentfulなど、ファイルでもAPIでも、柔軟にデータを引っ張ってくる仕組みが整っています)
  • Gatsby自体の開発がアクティブ(最近バージョン2が出ましたし、出資も受けた とか)
  • ドキュメントとチュートリアルが充実していて、しかもわかりやすい。チュートリアルは一通りやれば仕組みや作り方が理解できます。

Airtable

コンテンツはAirtableというサービスを使って管理しています。Airtableに入力したコンテンツがGatsbyを経由して静的HTMLに書き出されます。Airtableは「チームでオンラインで便利にデータを管理しよう!」というサービスで、APIが用意されていてGatsbyで容易にデータにアクセスできるようになっています。

似たようなサービスにはFirebase Contentful GraphCMS などがあります。FirebaseはAirtableとNetlifyを合わせたようなサービスですかね?Googleがやってるサービスで、なんか強そう(何が?)ですね。Kayacさんが「徹底比較!Firebase vs Netlify (2018年版) – KAYAC engineers’ blog 」という比較記事を出してます。今後、Firebaseあたりを突っついてみたいと思います。強そうなんで。

Airtableを選んだ理由は2つありました。

1. UIがわかりやすい

Contentfulも試したのですが、Airtableの方がUIが一般向けでフレンドリーでした。Airtable使いやすいです。Contentfulは、もっと技術者寄りな感じです。雑記サイトなので、サクッと書いてサクッと公開したいので、シンプルでわかりやすいのを重視しました。

2. マルチプラットフォームでアプリが用意されている

Mac、iOS、Android、Windows向けにアプリが用意されていて便利です。ウェブアプリもしっかりしてるんですが、モバイルだと若干使いづらかったり、アプリの方がサクサク動いたり優勢な面もあるのでありがたいです。いつでもどこでも手軽に雑記をつけたいので、ここは意外と大きい要因になりました。

あと、今後誰かのためにGatsbyサイトを作ることを考えて、コンテンツ管理の快適さも意識してみました。他の誰かに使ってもらう場合には特に大切です。Airtableではデータのインポートも簡単にできました。

Netlify

Netlifyのサーバ上でコマンドを走らせてサイトを構築(build)してデプロイ(deploy)、ホスト(serve)するというのを自動化してくれるサービスです。基本的にはGithubなどと連携して、リポジトリに変更をプッシュするとサイトをデプロイしてくれます。

「静的サイトのホスティングサービス」と説明されていることが多いですが、それだとちょっと説明が足りないような?Netlifyのウェブサイトには「プラットフォーム」と書いてあるんですけど、それも漠然としていてなんだかわからないですしね。説明の難しいサービスですw

似たサービスはHeroku あたりですかね?ビルドとデプロイだけならDeployHQ とかBuddy というサービスも見かけました。あと、Firebaseもありますね。Netflixは違いますw

さいごに

ということで、GatsbyJS + Airtable + NetlifyでJAMstackでモダンな雑記サイトを作ったことのご紹介でした。この辺のツールやサービスについては、それぞれについてもう少し掘り下げて整理して、このブログでも書いていければと思っています。

サーバがなくてもツールやサービスを柔軟に組み合わせて、データを引っ張ってきてウェブサイトを作れるって、すごい便利な時代ですね。JAMstackは、すごく柔軟で自由な感じが気に入りました。条件や状況に合わせてツールやサービスを選んで、より最適なソリューションが構築できそうです。

昔はデータベースにはODBC経由でしか接続できなかったんですけどね(たぶんウソw)

最後にもう一度、雑記サイトの宣伝。「R note」の方もよろしくお願いします。

では、Let’s enjoy JAMstacking!

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です