このたび、自作のWebサービス（以下、本サービス）をNetlify+Nuxt+Vuetifyという構成で作成し、2019年12月25日にリリースしました。
本サービスを公開するまでに得られた知見は数々ありましたが、本記事ではNetlifyに焦点を当て、Netlifyの利点や欠点、注意点についてお話しします。
なお、本記事で紹介するNetlifyの機能や性能は２０２０年１月時点のものです。
はじめに
突然ですが、みなさんは絵が上手く描けるようになりたいですか？ 私はなりたいです。
絵が上手くなる方法はいくつかありますが、特に有効と言われる練習方法の一つが「３０秒ドローイング」と呼ばれるものです。これは数十秒という短いスパンで人体を模写し続けることで、人体のつくりを頭に叩き込み、結果として人の絵が早く正確に描けるようになるという練習法です。
この３０秒ドローイングができるwebサイトは既にいくつかあるのですが、どれもカスタマイズ性が悪かったり、表示する人体がいまいちだったりと不満がありました。
なので、自分でも満足できる絵の練習サイトを自分で作りました。なお、開発前の時点ではvue.jsはそれなりに使える、NetlifyやVuetifyは名前くらいは聞いたことがある、という状況でした。
サービスの紹介
作成したサービスはこちらです。
posetrainer-人体デッサンによる絵の練習サイト
https://pose-trainer.com/
トップページは分かりやすさを考え、なるべくシンプルにしました。画面にあるStartボタンを押すと30秒ドローイングが始まり、人体の画像が次々と表示されます。より細かい設定をする場合は設定画面を開いて、表示する人体の性別や体格、表示時間を選ぶようにしています。
⇒ 
この人体画像は、Daz3Dという3DソフトのDaz Script機能を使い半自動で生成したのち、Pythonで画像処理して作成したものです。機会があればこれらについても解説したいと思います。
画像の表示はVuetifyのv-carouselを使っています。要は画像のスライドショーです。とはいえ単にスライドショーをするだけではなく、残り時間やグリッドの表示、画像の回転表示といった機能を加えています。これらのtipsについても機会があれば解説します。
おまけの機能として、Three.jsを使い、3Dで人体のパーツを表示する機能も作りました。
本題
さて事前知識のための紹介はこれくらいにして、本サービスをリリースする際に利用した、Netlifyについてお話しします。
Netlifyについての基本知識
Netlifyは「静的サイトのホスティングサービス」というWebサービスで、自作のサイトを作成し公開する際に使用されます。
ここでは、初めにNetlifyを使うメリットを、続いて実際に利用した上で分かったデメリットを紹介します。
Netlifyのメリット
メリット1:手軽に使える
もっとも初歩的な使い方は、Netlifyの管理画面でhtmlファイルをdrag&dropすることです。
末尾にnetlify.comとつくURLが即座に払い出され、htmlファイルをウェブ上にそのまま公開できます。この手軽さはメリットの一つです。
メリット2:様々な機能
Netlifyの利点はそれだけではありません。上記のように手軽に使いたい場合だけでなく、凝ったページを長く運用したい場合にも、痒い所に手が届く様々な機能を有しています。
- GitHubと連携し、pushやmergeをトリガとして、Gitのプロジェクトからhtmlファイルを自動的にビルドして公開できる
- git lfsと連携し、バイナリファイルを管理できる
- form、function、split test、ワンクリックでSSL化といった豊富な付加機能（一部後述します）
メリット3:圧倒的なコスパ
Netlifyには無料プランと有料プランがありますが、無料プランでさえストレージ100GB、転送量は100GB/月が利用可能です。
サイトを公開する手段として、Netlify以外にもGitHub Pagesを使う、GCEで自前のサーバを運用するといった選択肢があるかと思います。
これらの無料枠における利用範囲を以下にまとめましたが、Netlifyは他のサービスと比べ、圧倒的なパフォーマンスを誇ります。
| Netlify(無料枠) | GitHub Pages | Google Compute Engine（無料枠） | |
|---|---|---|---|
| ストレージ | 100GB | 1GB | 30GB |
| 転送量 | 100GB/月 | 100GB/月 | 1GB/月 |
Netlifyのデメリット
日本語の資料が少ない
２０２０年１月現時点で、日本語の記事はQiitaをはじめとする個々の紹介サイトに留まります。そもそも、Netlifyの管理画面も公式ドキュメントも英語版しかありません。
ただ、公式ドキュメントは比較的充実しているため、英語ができればこれはそれほどデメリットにはならないでしょう。
Netlifyのform機能が（そのままでは）使えない
Netlifyのform機能とは、htmlのformに"netlify"属性を付けるだけで、投稿した内容を管理画面から見られたり、投稿時にcaptchaを挟んでスパムを弾いたりよしなにしてくれるという便利な機能です。
投稿フォームのサンプル
<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>感想: <textarea name="message"></textarea></label>
</p>
<p>
<button type="submit">送信</button>
</p>
</form>
しかしここに一つ罠があります。Netlifyのビルド機能を使いNuxtプロジェクトからhtmlファイルを生成、そしてそのままサイトをデプロイする場合、ビルド時にnetlify属性が認識されず、結果的に公式サイトにあるサンプルコードすら動きません。
この問題についての日本語の記事はなく、初見ではまずひっかかるポイントだと思います。
解決方法はstackoverflowのこちらの記事が詳しいです。
全く同じフォームを記述した、ダミーのhtmlファイルを用意しておくことで、ビルド時にnetlify属性を認識してもらうことができます。
Netlifyの画像処理機能が（思ったより）使えない
Netlifyには、Git lfsとの連携機能「Large media」があり、これを有効にすると画像処理が行えるようになります。
これは画像のリンクに対しクエリパラメータを指定することで、あらかじめ縮小した状態で画像を取得したり、画像の重要そうな領域を自動的にクリッピングしてくれるというユニークな機能です。
<!-- 自動リサイズの例 -->
http://XXXX.netlify.com/images/test.jpg?nf_resize=fit&w=300&h=300
<!-- 自動クリッピングの例 -->
http://XXXX.netlify.com/images/test.jpg?nf_resize=smartcrop&w=300&h=300
（公式ドキュメントの紹介ページはこちら）
この機能にも注意点があります。無料プランの場合、利用回数は2500回/月です。つまり１日あたり約８３回。この制限は、本サービスのように不特定多数に大量に画像を見てもらうようなサービスにとっては致命的です。日に数人、下手をしたら一日に一人の利用でも制限に達してしまいます。
今回の場合、画像処理機能の使用は見送り、すでにクリッピング＆リサイズ済みの画像を数パターン用意することで対処しました。逆に、ポートフォリオのように見せる相手がある程度決まっているようなwebページの場合、検討に値すると思います。
git pullが（ヘマすると）使えない！
これは普通の人ならまず引っかからない注意点ですが、自分のようなおっちょこちょいのために紹介します。
NetlifyでGit lfs機能と連携するにはGit lfsとnetlify-cliを導入した上で連携の設定を行いますが、別のPCで開発を続ける場合にも当然、Git lfsやnetlify-cliの導入が必要です。
ここをうっかりして、PC1,PC2でgitのプロジェクトを用意→PC1でGit lfsとnetlify-cliを導入し、Git lfs機能と連携→PC2でGit lfsだけ導入し、netlify-cliの導入や設定を忘れる、というヘマをした結果、PC2のgit pullが永久に終わらないという現象に遭遇しました。
他のPCで作業する場合にも環境は揃えましょう。
Netlifyのfunction機能が（思ったより）使えない
Netlifyには、AWS lambdaをベースにしたfunction機能があります。この機能、自分の知識や設定が不足していたからかもしれませんが、Nuxtベースではうまく使えませんでした。
というのも、一応動作はするのですが、apiとして用意したjsファイルから別のファイルやデータが触れないのです。データを返すにしろ変換するにしろ、１ファイルで完結させなければいけません。それなら、わざわざapiを叩かなくてもよいという結論になりました。
Netlifyの自動ビルドが（うっかりすると）すぐ使えなくなる
GitHubと連携した自動ビルト機能を利用している場合、masterブランチへのpushやmergeをトリガに自動的にビルド処理が走り、サイトを作り直してくれます。
これ自体は便利な機能なのですが、無料枠ではビルド時間が300分/月までという制限があります。この300分、ブランチをmaster一本でがんばりながら、しょっちゅうビルドを繰り返しているとわりとすぐに到達します。複数のサイトを運用する場合は時間が合算されるのでなおさらです。チームで開発している場合は考えにくいですが、今回のように個人でごりごり書き上げるような場合は起こりうるケースでしょう。
対策として、自動ビルド機能を切っても良いですが、やはりあらかじめGitHub flowのようなブランチ分けをしておき、masterブランチは普段は触らないようにするべきです。
おわりに
前述した通り、Netlifyは「気軽に、さっと」、あるいは「金をかけずに最大限のメリットを受けつつ」サイトを公開する場合は有力なサービスだと思います。
その一方で、Netlify独自のサービスに一歩踏み入れると、Netlifyなりのクセのようなものが見えてきて苦戦する場合が出てきます。
次に利用される方は、そうしたまずい所を踏み抜かないよう気を付けつつ、うまくメリットだけを得られるよう注意して使うのが良いかと思います。
本記事は以上です。