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/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide