フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

トップ > Javascript > 知ってました？Netlifyにはこんな機能もあるんだよ！

知ってました？Netlifyにはこんな機能もあるんだよ！

Javascript フロントエンド

この記事はJAMstack Advent Calendar 2018の１日目の記事です！

JAMstack関連の記事をみんながワイワイ好き放題に書いていく感じですね！ってことで私もJAMStackの提唱者であるMatt Biilmannさんが創業・運営しているNetlifyについて書いていこうと思います。

JAMstackは「クライアントサイドJavaScript、再利用可能なAPI、予めビルドされたマークアップの３つで構成されたWeb開発アーキテクチャ」のことですね。

Netlifyってどんなサービス

そんなJAMstackを実現する際にビルドされた静的サイトのホスティングが非常に簡単にできるサービス。それがNetlifyです。

netlify.com

NetlifyではGitHubなどで管理しているリポジトリから自動的にデプロイを行える他に、フォームやCI機能など静的サイトを運用する上で便利な機能が豊富に揃っています。

どんな機能があるの？

2018年11月時点でNetlifyには次の機能が備わっています。

  • 静的サイトホスティング
  • ビルド機能
  • 独自ドメイン設定
  • CMS機能
  • フォーム設置
  • Functions
  • A/Bテスト
  • Prerendering
  • チーム機能

Netlifyはものすごいスピードで新しい機能を開発しているので、今後もサイト運用する上で便利な機能が加わっていくことでしょう。

この中でも「Netlifyはホスティングだけじゃ無い！」って機能について触れていきます。

CMS機能

www.netlifycms.org

NetlifyCMSは文字どおり、Netlifyを用いてCMS（Content Management System）を構築するためのライブラリ群です。

管理画面からコンテンツを入稿するだけブログやニュースサイトのようなサイトも手軽に構築することができるんです！！！

もちろん、使うサービスはNetlifyだけで、別のレンタルサーバーを借りたり、面倒なセットアップ作業を行う必要もありません。

NetlifyCMSにはデータベースはありませんが、代わりにGitHubレポジトリ上に命名規則をつけてコミットされたファイルを使って、記事データの管理をしていきます。

そのため、Netlifyはレポジトリに新しいコミットがあったタイミングでビルドを行い、静的サイトを生成することで、同様の機能を実現しているわけです。これもJAMstackなサイト構成になるので、サーバーの負荷などもかからずラクラク運用が可能です。

フォーム機能

コーポレートサイトや商品・サービスの紹介LPなど「サイトのほとんどは静的コンテンツなんだけど、どうしても問い合わせフォームだけは必要！」という理由でサーバーサイドのある環境を必要としている人は多いと思います。

しかしNetlifyを使えばこの問題も解決可能です。サーバーサイドのコードを一切書くことなく、Netlifyがフォームのサーバー側の機能を代替してくれるため、静的サイトなのにフォーム機能を実現することができるのです。すごいぞNetlify。

Netlify Functions

このFunctions機能は、簡単にいうとAWS Lambda FunctionsをラップしてNetlify上でもパスを切って使えるようにした機能です。しかしAWSのようなごちゃついた管理画面を使わず・しかもクレジットカードも登録せずにすぐに使い始めることが出来ます。

静的サイト上では隠蔽したい内容など、functionsを補助的に使えるだけで、静的サイトで出来なかったことが多々できるようになると思います。

A/Bテスト

ブログやECサイトを運用していると、バナーの置き換えや応募ボタンの位置を置き換えて、ユーザーの流入がどれくらい変わるのかを測定するようなA/Bテストを実施することがあるかもしれません。

Netlifyが提供しているSplit Testingという機能を用いることで、GitHubのブランチをベースにしたA/Bテストを導入することができます。超簡単。

ブランチごとにテストしたいコンテンツを変えておき、計測はGAでオプションの内容を変えて別途計測する形で集計します。

Prerendering

SEO対策というよりも、TwitterやFacebookでのOGPの表示を切り替えたいな〜って時ありますよね。

静的サイトで動作しているシングルページアプリケーションでは、meta情報の更新をJavaScript上でのみしか行えないため、１つのサイトで１つのOGタグしか表示することができません。

Netlifyではこの課題を解決してくれる、Prerenderingという機能を提供しています。これを有効にすることで、JavaScriptで設定したmetaタグ、Open Graphの設定も、TwitterやFacebookなどのSNSで表示されるようになります。

これはJavaScriptで描画した内容をNetlifyがキャッシュしておいてくれて、初回描画時にそのキャッシュを返してくれるためmetaなどの切り替えにも対応しています。すごい。（中身はprerender.io）

まとめ

Netlify意外と色々便利な機能があるな〜ってことが伝わりましたでしょうか。

宣伝になりますが、この辺りの具体的な利用方法などをまとめた本を書いてますので、もしこの記事で興味がわきましたらぜひご一読していただいてNetlifyを使いこなしてみてください！

nabettu.booth.pm