GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist

GitHub Gistを使って、アクティビティ
を可視化しよう
Kanazawa.js Remote #02 2020.04.25
GitHub: kentaro-m / Twitter: @_kentaro_m
1

View Slide

⾃⼰紹介
Kentaro Matsushita
⾦沢市内のゲーム会社で働
くフロントエンドエンジニ
ア
最近はTerraformを書いて
るか、チーム開発が円滑に
回るように⾊々やっていま
す
2

View Slide

⾃宅で過ごすことが多くなりましたね
私は2⽉20⽇からリモートワークをはじめました
最低限の買い物と運動以外は外に出ない⽣活
最近は⾃宅の作業環境のアップデートにはまってます
4Kディスプレイ/モニターアーム/空気清浄機など購⼊
インドアできることを考えるようになった
ゲーム/筋トレ/読書/Netflixなど
⾃分の習慣やアクティビティに⽬が向くように
トラッキングや可視化したい
3

View Slide

アクティビティを可視化したい欲
特に⽬的はないが、アクティビティを⾒える化したい欲に駆られる
何分運動したか
何冊本を読んだか
よく聴いているアーティストはなにか
よく書いているプログラミング⾔語はなにか
プログラミングの⽣産性の⾼い時間は朝か夜か
可視化して、⽬につくところにおいておきたい
4

View Slide

アクティビティの可視化にGitHub Gist
が使える
GitHub GistはGitHubプロフィールにピン留めできる
テキストや画像 (PNGやJPEG、GIF) などを表⽰できる
GitHubブログのGistのピン留め活⽤例
Pins to win: students, show off your stuff to win a GitHub
Education backpack - The GitHub Blog
⾃⼰紹介やレジュメなどアピールできる
アクティビティも載せられる
5

View Slide

APIで動的にGistを更新する
matchai/awesome-pinned-gists
GitHubプロフィールにGistをピン留めするActionを⼀覧化
様々なアクティビティをGitHubプロフィールに可視化できる
Spotifyで今週よく聴いたアーティストベスト5を表⽰
⾃分のTwitterアカウントの最新のツイートを表⽰
WakaTimeで今週のプログラミングした時間を可視化
APIを使⽤し、動的にGistを更新しているところがポイント
6

View Slide

GitHub Gistでアクティビティを可視化
する
必要なもの
GitHub Gist
GitHub Actions
APIを叩いて、Gistを更新するコード
7

View Slide

⾃分の読書状況を可視化してみる
読んだ本や積読本、読んでる本をGitHubのプロフィールに表⽰す
る
8

View Slide

Gistのファイル先頭5⾏がプロフィールに表⽰できる
9

View Slide

Google Booksから情報を取得する
マイライブラリで読んだ本や積読本、読んでる本を管理できる
Google BooksのAPIで上記の情報を取得できる
Gist APIを更新して、読書状況を反映する
GitHub Actionsをスケジュール実⾏すると、1⽇1回⾃動で更新
GitHub Actionsとして提供すると、誰もがフォークして同じような
ことができる
私が作った読書状況を可視化するGitHub Action
kentaro-m/book-box 10

View Slide

みなさんもGistでアクティビティの可
視化に是⾮試してみてください！
APIがあれば、様々な情報が可視化できると思います！
11

View Slide

GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist

GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist

Kentaro Matsushita

More Decks by Kentaro Matsushita

Other Decks in Programming

Featured

Transcript