この記事は 2018年Shinjuku.LT Advent Calendar 2018の9日目の記事です。
Shinjuku.LTは世界で一番LTのハードルが低い勉強会を目的に開催している勉強会です。詳しくはこちら！
はじめに
2日目の記事 ではNetlifyでのWebサイト公開やカスタマイズについて紹介させて頂きました。
Netlifyにはそれ以外にもアドオンとして、AWS Lambdaを提供する**Functionsや認証機能を提供するIdentity**、フォーム処理を提供する Forms などの機能があります。前々から触ってみたかったのですがなかなか機会がなく今回アドベントカレンダーということでようやく触ってみたので、それについてご紹介させて頂きます！
Functions
Netlify FunctionsはNetlifyを使って簡単にAWS Lambdaを使える機能です。
- AWSアカウント無しでLambdaの機能を使えることが出来ます
- Webホスティングの機能と同様にプレビュー機能が使えます
Free planと料金体系
Functionの利用状況の画面です。
- Free Planでは毎月、実行回数125,000回、実行時間100時間まで無料
- Pro Planにすると、毎月$25となりますが2,000,000回、1000時間まで使えるようになるようです
Your plan will upgrade automatically to fit your usage.
ただしFunctionでは使用量が増えるにつれて自動的にプランが変更されるようです。
詳しい料金体系はこちら！
Functionsを試してみる
Netlify Functions Examples というデモサイトにサンプルが案内されているので、こちらを試すのが早そうです。
こちらを進めると、netlify-functions-example というリポジトリが自動で作成されて、Netlify上でデプロイされます。
簡単にソースコードを見てみましょう。ちなみに本家のリポジトリはこちらにあります。
https://github.com/netlify/netlify-functions-example/blob/master/src/lambda/hello.js
exports.handler = function(event, context, callback) {
callback(null, {
statusCode: 200,
body: "Hello, World"
});
};
そのまんまAWS Lambdaでの実行コードですね。
Node.js の AWS Lambda 関数ハンドラ - AWS Lambda
ちなみに、呼び出しは以下のようなURLになります。
https://{site-name}.netlify.com/.netlify/functions/hello
netlify.tomlによる設定
Settings > Functions にあるFunctions directory で関数ファイルのあるディレクトリの指定が出来ます。
この設定はnetlify.tomlという設定ファイルでも可能で、サンプルではfunctionsという項目で設定されていました。
[build]
command = "yarn build"
publish = "dist/client"
functions = "dist/server"
こちらのリンクからデモサイトが確認できます！ Say hello!
環境変数の設定
Settings > Build & deploy > Build environment variables から環境変数の設定も可能で、ビルド時の埋め込みも可能です。
Identity
こちらもまた手軽にNetlifyの認証機能をサイトにつけることが出来るものです。
Identityを試してみる
こちらもまたデモサイトがあるので確認してみましょう。
https://identity.netlify.com/
サンプルコードはこちらです。
https://github.com/netlify/netlify-identity-widget#usage
導入は非常にシンプルでNetlifyから提供されている、Auth widgetを設置することで利用出来ます。
認証ウィジェットの導入
まずはじめに、サイト内に以下を埋め込みます。
<!-- include the widget -->
<script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
設置出来るウィジェットは2種類あります。
1つはLog in/Log outの表示切り替えが行われる、ボタンだけを表示するウィジェット。
<!-- Add a simpler button: Simple button that will open the modal. -->
<div data-netlify-identity-button>Login with Netlify Identity</div>
Log in/Log outの表示が切り替わるボタンと、サインアップ用のボタンがSign up/メールアドレス で切り替わる2つのボタンが自動で設置されるものの2つです。
<!-- Add a menu:
Log in / Sign up - when the user is not logged in
Username / Log out - when the user is logged in
-->
<div data-netlify-identity-menu></div>
認証とユーザ管理
これらのウィジェットを埋め込んで、Netlify上でデプロイすると勝手にNetlify Identityとの連携が行われ、メール認証型でユーザ登録/ログインが可能になります。
Netlify Identity側では以下の様にユーザ管理されます。
イベントのバインド
読み込まれたウィジェットは自動的にWindowオブジェクトに window.netlifyIdentityとしてアタッチされます。各種イベントは以下のようにバインドすることが可能です。
// Bind to events
netlifyIdentity.on('init', user => console.log('init', user));
netlifyIdentity.on('login', user => console.log('login', user));
netlifyIdentity.on('logout', () => console.log('Logged out'));
netlifyIdentity.on('error', err => console.error('Error', err));
netlifyIdentity.on('open', () => console.log('Widget opened'));
netlifyIdentity.on('close', () => console.log('Widget closed'));
ローカル環境での開発
ちなみに、ローカル環境で開発する時は初期表示で以下のようになり、自分のNetlifyのサイトURLを渡すと直接連携ができる仕組みになっています。
Forms
最後にFormsについて簡単に紹介します。
Netlify Formsはフォームを簡単に作ってNetlifyの管理画面上で簡単に確認できるような仕組みです。簡易的なお問い合わせフォームやアンケート機能に活用できそうです。
Netlify Formsの導入
<form>タグにnetlify属性を追加すると、Netlifyのフォーム処理に送信されるという仕組みです。
このような一般的な送信フォームを記述して、Netlify上にデプロイすると自動的にNetlify Formに連携されるようになります。
<form name="contact" method="POST" netlify>
<p>
<label>お名前: <input type="text" name="name" /></label>
</p>
<p>
<label>メールアドレス: <input type="email" name="email" /></label>
</p>
<p>
<label>年齢: <select name="age[]" multiple>
<option value="teens">10代</option>
<option value="twenties">20代</option>
<option value="thirties">30代</option>
</select></label>
</p>
<p>
<label>メッセージ: <textarea name="message"></textarea></label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
例えば、このようなフォーム画面を作成し、ポストします。
すると、Netlify側の管理画面ではこのように確認出来ます。
通知の連携
Netlify Formsは地味ながら実用的な仕組みであり、ドキュメント に色々な機能が紹介されています。気になったところではZapierと連携したフック設定が紹介されいます。
まとめ
はじめてNetlifyを試した時、シンプルな操作性とスムーズなワークフローにとても感動しました。
Netlifyは「JAMstack」というコンセプトを提唱している会社でもあり、これらのサービスはJAMstackなアーキテクチャを実現するためのとても強力なツールになっていくと思いました。
今回は、Shinjuku.LTのサイトで使っている 高機能ホスティングサービスNetlifyとそのアドオン機能について紹介させて頂きました。
Shinjuku.LT Advent Calendar 2018最後までがんばりましょう。よろしくお願いします！