Netlifyの標準機能であるFormsやSplit Testing、Functionsの使い方まとめ

Published: 2020年9月15日 by tomsato

Netlifyとは

NetlifyはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス

GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる

ブログのホスティング方法、無料プランについて独自ドメインの設定方法などについては以下の記事で解説している

Netlifyの使い方入門 無料料金枠や独自ドメイン設定方法について

この記事ではNetlify FormsとSplit Testing、Functionsの使い方についてまとめる

また少し中級者向けになるがNetlify FormsとFunctionsを合わせて使うことでコメント投稿機能を実装することができるので興味があれば見ていただけたらとmm

Netlify Formsを使ってブログサイトにコメント機能を追加する

Netlify Forms

Netlify Formsとは

Netlify FormsはNetlifyに標準機能として用意されているフォーム機能

サーバレスなので別途コメントを保存するためにサーバを用意する必要がなく、サーバサイドのコードが不要で、JavaScriptのソースコードも書かずにフォームと送信を管理することができる

Netlify Forms

HTMLを埋め込むだけでフォームを作成反映可能!!正確にはformタグに「netlify」というアトリビュートを付与した状態でデプロイするとNetlifyが自動で変換してくれる

Forms setup

またコメントされたらメールまたはSlackで通知を受け取ることが可能、またWebhookを介して通知を提供できる

スパムもフィルタリング可能!!

Netlify Formsについて調べると、お問い合わせフォームを作成する際に利用することが多い

Netlify Formsの使い方

以下のフォームを用意する、ここで重要なのがformタグ内に「netlify」を記述する必要がある

<form id="my-form" action="/" name="sampleCommentForm" method="post" netlify>
  <p><label>Name: <input type="text" name="name" /></label></p>
  <p><label>Email(任意): <input type="email" name="email" /></label></p>
  <p><label>Message: <textarea name="content"></textarea></label></p>
  <div><input type="submit" value="Send" /></div>
</form>

Netlify Forms4

この状態でプッシュを行うと「name=”sampleCommentForm”」で送信したため「sampleCommentForm」というフォームができる

Netlify Forms1

クリックすると投稿されている一覧が確認できる

Netlify Forms2

この画面でできることは「CSVダウンロード」「削除」「スパム判定にする」ぐらいで

「Verified submissions」にて表示しているが「Spam submissions」に変更するとスパム判定したリストが表示されるようになる

FormでPOSTされた際に通知を受け取る、Webhookを行う

「Site settings」>「Forms」>「Form notifications」より

  • Webhook
  • メール通知
  • Slack通知

を登録することができる

Netlify Formsで通知を受け取る

フォーム送信後のページについて

デフォルトだとだとフォーム送信完了をすると、成功メッセージを表示するページ(フォームページへ戻るリンクがある)に遷移するようになる

変更するには action 属性に送信完了後に表示するページをパスで指定してあげる 例: action=/pages/success

APIについて

以下のページにまとまっている

Get Started with the Netlify API | Netlify Docs

例えば以下のCurlを叩くと「Verified submissions」一覧を取得することができる

$ curl -H 'Authorization: Bearer your_oauth2_access_token' https://api.netlify.com/api/v1/forms/:form_id/submissions
  • your_oauth2_access_token:「User settings」>「Applications」>「Personal access tokens」で作成できるtoken
  • form_id:フォームの詳細ページに行った時のURLに含まれるハッシュ値

reCAPTCHA 2を追加

以下の用に <div data-netlify-recaptcha="true"></div> 属性を持つDOMを追加するとreCAPTCHA 2を埋め込むことができる

<div data-netlify-recaptcha="true"></div>

Netlify Forms reCAPTCHA2

reCAPTCHA 2は「Send」を押した時に表示されるのではなく、常に表示されるので注意(JavaScriptで制御できるかも?)

ハニーポットを設定する

formに netlify-honeypot="<ハニーポット用フィールド名>" を追加して、 name=<ハニーポット用フィールド名> を持つinputタグを追加すると

このフィールドに値が設定された状態でsubmitされた場合にスパム判定とする、これによって不正なBotなどを弾くことができる

<form id="my-form" action="/" name="sampleCommentForm" method="post" netlify-honeypot="bot-field" netlify>
  <p><label>Name: <input type="text" name="name" /></label></p>
  <p><label>Email(任意): <input type="email" name="email" /></label></p>
  <p><label>Message: <textarea name="content"></textarea></label></p>
  <p><label>Bot Field: <input name="bot-field"/></label></p>
  <div><input type="submit" value="Send" /></div>
</form>

こちらもhiddenではないためフォームは常に見えてしまうため、JavaScriptやCSS等で非表示にして利用する

Split Testing

Split Testingとは

GitHubのブランチをベースにしたA/Bテストを行うための機能のこと

参考 公式ドキュメント:Learn more about Split Testing in the docs

※ 9/15現在BETA版となっている

Split Testingの機能を使うためにはダッシュボードから「Split Testing」タブに遷移する

下記の画像からわかるようにGitHubのブランチが2つ以上ないと使えないことに注意

Netlify split testing画面1

また表示割合を調整することができるのでカナリアリリース的に、新バージョンを段階的にリリースしていくことができる

※ カナリアリリースとはサービスの新機能を全体の5%など一部のユーザーのみに利用できるようにリリースし 新機能に問題がないことを確認しながら10%→25%→50%など段階的に全体に向けて展開していくデプロイ手法のこと

参照ブランチの割り振り方法

利用ユーザーがアクセスする度に同じブランチを参照するように nf_ab というCookieにどのブランチを見ているかを保存している

Netlify split testing画面4

「Value」にブランチ名が書いてあるのかと思いきや数字が書いてあるがきっと数字を元にどのブランチを参照するかを決めているはず

Cookieを見ているため、以下の操作を行うと別のブランチを参照してしまう可能性がある

  • ブラウザや端末(PC,スマホ)を変えてアクセス
  • Chrome等のシークレットブラウザを開き直してアクセス
  • Cookieを削除してアクセス

またCookieの有効期限が1年で設定されているので1年経つと書き換わる可能性がある

注意点

注意点としては複数のA/Bテストを同時に実行することができない

Split Testingの使い方

まずはGitHubでA/Bテスト用のブランチを用意する

今回は「master」ブランチの他に「master-a」「master-b」の2つのブランチを用意する

ブランチを用意することでSplit Testingが設定できるようになる

Netlify split testing画面2

ブランチは2つ以上設定することができ、ブランチ毎に表示の割合を設定することができる

その際に割合の合計値が必ず100%になるように1つのブランチを動かすと他のブランチの数字が勝手に変動してしまうため 数値の右側にあるロックボタンを押すことで数値を固定することができる

「Start test」で反映ができる

Netlify split testing画面3

停止したい場合は「Stop test」を押せばデフォルトのブランチだけ配信する状態になる

ソース側でブランチ名を判定する方法

環境変数 BRANCH でブランチ名を取得することができる

React, Vue.jsを使用して取得する場合

process.env.BRANCH

Google Analyticsに分析情報を送信する

Google Analyticsは、イベントに関連付けることができるディメンションデータをサポートしているため、この機能を使用して分析データを送信することができる

参考:カスタム ディメンションとカスタム指標

NetlifyのSnippet Injection機能を利用するとデプロイ時にJavaScriptスニペットを <head> タグか <body> タグ末尾に挿入することができるため

この機能を使いGoogle Analytics用のスクリプトの設定を行うことができる

参考:Snippet injection

Snippet Injectionはダッシュボードから「Settings」タブの「Build & deploy」→「Post processing」→「Snippet injection」から設定ができる

Netlify Google Analytics設定方法

NetlifyのSnippet Injectionで埋め込むスクリプト内に {{ BRANCH }} を入力しておくとブランチ名に置き換わるため

以下のようなスクリプトを記載することで、設定をすることができる

<!-- install Google Analytics' JS tracker before using this code -->
<!-- https://developers.google.com/analytics/devguides/collection/analyticsjs/ -->
<script>
  ga('send', 'pageview', {
    'Branch':  '{{ BRANCH }}'
  });
</script>

Functions

Functionsとは

FunctionsはNetlifyでAWS Lambdaを使えるようにした機能

AWSのアカウントを用意する必要もなく、またAWS Lambdaの設定をする必要もなく、関数の管理等は全てNetlify内の設定で完結ができる

面倒なサービスディスカバリの管理やAPIゲートウェイの構成などが不要になるとのこと

参考 公式ドキュメント:Learn more about Functions in the docs

現在JavaScript(Node.js)とGoで構築されたサーバレス関数をデプロイすることができる

Netlify Functions画面1

Functionsの使い方

ダッシュボードより「Settings」タブを選択、「Functions」より

Netlify Functions画面2

「Edit settings」をクリックする

Functionsに設定するソースコードを格納するディレクトリを選択する

今回は「./functions」を記載して「Save」にて設定完了する

そして実際にサンプルを用意してみる、公式が用意しているサンプルを利用することとする

Netlify Functions Examples

./functions/hello.js を作成する

$ vim ./functions/hello.js
exports.handler = function(event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
};

そしてこのファイルを実際にGitHubにプッシュを行い、デプロイが終わったことを確認して

https://<自分のサイト>/.netlify/functions/hello にアクセスをすると「Hello, World」が表示される

このように ./functions/hello.js で作成した関数が /.netlify/functions/hello というパスで呼び出すことができるように、配置するファイルパスはURLに使われることになる

上記で記述したサンプルのリンクでは、以下のように色々なサンプルが用意しているのでもう少し拡張したいという人は見てみると吉

  • asyncバージョン
  • GET/POSTパラメータの受け取り方
  • 環境変数の読み込み方
  • APIリクエストを行う方法
  • Slackに投稿する方法

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

NetlifyのFormsやSplit Testing、Functionsについて使い方をまとめる FormsはNetlifyに標準機能として用意されているフォーム機能でコメント保存用にサーバを用意する必要がない Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

カテゴリ一覧

タグ一覧