ProtoPediaのバッジ表示をVercelのServerless Functionsで実現している話

Serverless Frontend Meetup #4 「FaaS」で発表した内容

Transcript

1. ProtoPediaのユーザー情報を Vercel Serverless Functionで バッジ化して表示してみた は じ め に protopedia Shields.io vercel つ く っ た も の
2. 自己紹介 やまっく ▪職業　：　ハードウェアエンジニア 　　　　　　自動運転関連のハードウェア設計開発してます ▪趣味　：　電子工作、プログラミング 　　　　　　ラズパイやArdui noなどでなんか作ったり、 　　　　　　ちょっとしたアプリ作って公開したりしてます https://github.com/yamaccu https://twitter.com/YY87750722 は じ め に protopedia Shields.io vercel つ く っ た も の
3. つくったもの コレ は じ め に protopedia Shields.io vercel つ く っ た も の
4. は じ め に protopedia Shields.io vercel つ く っ た も の 「protopedia」について 自分で作った作品を登録したり、他の人の作品を見たりすることができる webサイトです。 Qiitaが技術情報を登録するサービスなのに対して、ProtoPedi aは成果 物を登録するイメージです。
5. は じ め に protopedia Shields.io vercel つ く っ た も の 「Shields.io」について 様々な情報をバッジ形状にしてSVGで表示できるようにしてくれるサービスです。 GitHubのReadmeなどによく使われています。
6. は じ め に protopedia Shields.io vercel つ く っ た も の 「vercel serverless functi on」について Vercelというホスティングサービスの、サーバーレス機能です。（そのまま・・ サーバーレス機能とは、サーバーの確保や面倒な設定などなしに、web APIが作成 できる機能です。 Node.js、GO、Python、Rubyに対応しています。
7. は じ め に protopedia Shields.io vercel つ く っ た も の 「vercel serverless functi on」について 使い方 Gi thubアカウントを作成（Gi tlabでもOK） Githubアカウントを使ってSi gn Up Githubにプログラムをアップ Vercelにデプロイ
8. は じ め に protopedia Shields.io vercel つ く っ た も の 「vercel serverless functi on」について Hello World !!
9. は じ め に protopedia Shields.io vercel つ く っ た も の 「つくったもの」について システム構成 実装：Node.js API通信：axios
10. は じ め に protopedia Shields.io vercel つ く っ た も の 「つくったもの」について プログラム
11. は じ め に protopedia Shields.io vercel つ く っ た も の 「つくったもの」について クエリパラメータの設定 クエリパラメータ
12. は じ め に protopedia Shields.io vercel つ く っ た も の 「つくったもの」について ・axiosライブラリを使ってProtoPedi a APIのデータを取得 ・アクセストークンは悪用されると危ないので、Vercel側の環境変数に登録
13. は じ め に protopedia Shields.io vercel つ く っ た も の 「つくったもの」について ・取得したデータを処理して、Post数、Vi ew数、Good数を抽出
14. は じ め に protopedia Shields.io vercel つ く っ た も の 「つくったもの」について axiosでshieldsioへ リクエスト SVGデータをリターン
15. つくったもの コレ は じ め に protopedia Shields.io vercel つ く っ た も の
16. は じ め に protopedia Shields.io vercel つ く っ た も の 「つくったもの」について APIへのアクセスを補助するページを作成
17. Thank you! ご清聴ありがとうございました!