mottox2 blog

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

blognetlify

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

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.