Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Da3a49345e96851b38d3a7ce33b6bd95?s=47 Kentaro Matsushita
April 25, 2020
Programming
1
420

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

Kanazawa.js Remote #02 2020.04.25
https://kanazawajs.connpass.com/event/171954/

Da3a49345e96851b38d3a7ce33b6bd95?s=128

Kentaro Matsushita

April 25, 2020
Tweet

More Decks by Kentaro Matsushita

See All by Kentaro Matsushita
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
0
200
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
1
88
Webサイトパフォーマンスを継続的に計測したい！！！ / I want to continuously measure my website performance!!!
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
2
210
Actions ToolkitではじめるGitHub Action開発 / Getting started creating a GitHub Action with Actions Toolkit
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
2
1.1k
OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node.js module for generating Open Graph image
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
1
5.9k
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
0
440
AWSの既存サービスを活用して、
障害検知・復旧を迅速化するカラクリ / JAWS-UG Kanazawa x OpsJAWS
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
2
2.8k
DMM.comの認証基盤を支えるエラー通知の仕組み / AWS Dev Day Tokyo 2018 Lightning Talk
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
2
12k
Firebaseで
ポートフォリオサイトを作ってみた / Make a portfolio site with Firebase
Da3a49345e96851b38d3a7ce33b6bd95?s=48 kentarom
0
340

Other Decks in Programming

See All in Programming
SRE bridge the gap: Feature development to Core API / 機能開発チームとコアAPIチームの架け橋としてのSRE
5520f7e791c2f63da603f6b089b07c6f?s=48 kenzan100
1
250
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
4b7124f2f5989173c8ce3b0934817a32?s=48 clockmaker
2
1.6k
Swift Concurrencyによる安全で快適な非同期処理
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
330
Groovy Roadmap
4578d99b560b2a470e05288ef6766ac2?s=48 paulk
7
13k
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
E505897a79eede1a676f92740261e8f8?s=48 kubode
0
130
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-grapecity
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
130
mrubyを1300円のボードで動かそう
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
0
190
競プロへの誘 -いざな-
Efbc292fd2e2c4caa0ede1d1532804a9?s=48 u76ner
0
380
実録mruby組み込み体験
5b3338b3676d4f7091a575e584f3a4f4?s=48 coe401_
0
110
Better Reliability through Observability (and Experimentation)
8c73ec710b03be8909e71ad500866934?s=48 ksatirli
PRO
1
290
テスト設計技法をなぜ＆どのように使うのか体験しよう！
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
460
CIでAndroidUIテストの様子を録画してみた
46b3bc302e3a40f8df60cfb60d59c313?s=48 mkeeda
0
180

Featured

See All Featured
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
212
11k
A designer walks into a library…
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
21
14k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
45
2.7k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k
A Philosophy of Restraint
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
192
14k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.6k
Building Better People: How to give real-time feedback that sticks.
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
343
17k

Transcript

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

    Twitter: @_kentaro_m 1

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

    2

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

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

  5. アクティビティの可視化に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

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

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

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

  9. ⾃分の読書状況を可視化してみる Gistのファイル先頭5⾏がプロフィールに表⽰できる 9

  10. ⾃分の読書状況を可視化してみる Google Booksから情報を取得する マイライブラリで読んだ本や積読本、読んでる本を管理できる Google BooksのAPIで上記の情報を取得できる Gist APIを更新して、読書状況を反映する GitHub Actionsをスケジュール実⾏すると、1⽇1回⾃動で更新

    GitHub Actionsとして提供すると、誰もがフォークして同じような ことができる 私が作った読書状況を可視化するGitHub Action kentaro-m/book-box 10

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