mottox2 blog

Netlify Meetup Tokyo #2で登壇してきました

mottox2
mottox2
2018/10/03

9/26にABEJA社で開催されたNetlify Meetup Tokyo #2で「静的サイトだけじゃないNetlifyの活用法」という内容で登壇しました。

初の20分登壇でかなり緊張していたのですが、会場の温かい空気に励まされました。話しやすい勉強会大好きです。

背景

Netlifyはあまりにも簡単すぎて本来の「静的サイトをホスティングする」という役割に関して話すことが見つからず、ちょっと先の未来に役立つテクニックを紹介することにしました。

次のテクニックについて話してきました。

  • Netlify Functions
  • JSONの配信
  • SlackやGitHubとの連携
  • Build CommandでHack

発表資料

https://speakerdeck.com/mottox2/netlify-extra-mode

紹介した活用法

Functionsを使ってFaaS風に使う

このブログでも何回か取り扱っているNetlify Functionsです。

内部ではAWS Lambdaが動いているのですが、Netlifyを通して使えばAWSのアカウントいらずで使えます。

JSONファイルを配信する

静的サイトをホスティングしているので、当然と言えば当然なのですがJSONファイルを配信するためにも使えます。

JSONを別ドメインに配信するときに気になるAccess-Control-Allow-Originヘッダーなどは_headersファイルを使うことでいじることが出来ます。

Node.jsで収集したデータを配信するAPI

ビルドコマンドを設定出来るので、その中で外部APIを叩いたり、WebsiteのHTMLを見てJSONを保存するコードを書けばAPIとして使えます

Slackのメッセージを配信するAPI

Slackでreactionの追加メッセージをJSONとして配信するAPIの事例を紹介しました。

内部でSlack Event APIとGitHub Rest APIを使うことで実現しています。次のような仕組みで実現できました。

netlify-extra-mode.017.png (127.5 kB)

  1. SlackでReactionがつくとSlack Event APIによってFunctionsに対してPOSTリクエストが飛ぶ
  2. Functionsの処理でメッセージを取得し、GitHubのcreateFile APIを叩く
    • メッセージをファイルに保存する
  3. GitHubのcreateFile APIによって作成されたcommitをフックにNetlifyのビルドを開始
  4. ビルド中に保存されたメッセージをJSONにまとめて公開ディレクトリに保存
  5. NetlifyによりJSONが配信される

同様の事例として日経の米朝首脳会談の速報ページがありました。

esa.io + GatsbyJSなブログ

当ブログの事例を紹介しました。Gatsbyなので普通の静的サイトですが紹介しました(宣伝したかった…)

情報共有ツールesa.ioをCMSとして使って1ヶ月運用してみた

宣伝

netlify-extra-mode.031.png (287.9 kB)

サークルチェックはここからできます。
https://techbookfest.org/event/tbf05/circle/41140002

@mottox2フリーランスWebデベロッパー

都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。Ruby on Railsでの新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。

お問い合わせはこちら