$30 off During Our Annual Pro Sale. View Details »

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

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/

Kentaro Matsushita

April 25, 2020
Tweet

More Decks by Kentaro Matsushita

Other Decks in Programming

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