最近 Fitbit をつけて散歩してるので CircleCI + Pixela で見えるようにしてみた

自動化LT会　～自動化・効率化大好きな人集まれ！～
https://shiftevolve.connpass.com/event/237166/

のLTのスライドです

Transcript

1. 1
   ࠷ۙ Fitbit Λ͚ͭͯࢄาͯ͠ΔͷͰ
   CircleCI + Pixela Ͱݟ͑ΔΑ͏ʹͯ͠Έͨ
   2022-03-16 ࣗಈԽLTձɹʙࣗಈԽɾޮ཰Խେ޷͖ͳਓू·Εʂʙ
   ௣༿ ޫߦ (Twitter: @bufferings)
   
   
   Senior Full Stack Engineer, CircleCI
   
   
   

   View Slide

2. า͘ͱࣗಈͰ૲͕͸͑Δʔʂ
   2
   https://pixe.la/v1/users/bufferings/graphs/steps.html
   
   
   ΞΫηε೔ 2022-03-14
   

   View Slide

3. 3
   ௣༿ ޫߦ (Twitter: @bufferings)
   
   
   Senior Full Stack Engineer, CircleCI (2021೥10݄ʙ)
   ࣗݾ঺հ
   https://bufferings.hatenablog.com/entry/2022/02/27/150342
   

   View Slide

4. 4
   Free ϓϥϯͰ΋े෼ͳϏϧυ࣌ؒͰࣗಈԽՄೳ
   Free ϓϥϯͰ΋
   

   े෼ͳϏϧυ࣌ؒͰࣗಈԽՄೳ
   
   
   ɾຖ݄6,000෼૬౰ͷΫϨδο
   

   ɹτΛ෇༩ɺ࠷దͳϦιʔε
   

   ɹΫϥε (CPU/RAM) Λબ୒Մೳ
   
   
   ɾϢʔβʔ਺͸ແ੍ݶ͔ͩΒ
   

   ɹνʔϜ։ൃʹ΋ద༻Մೳ
   
   
   ɾύϫϑϧͳϦιʔεΫϥεɺ
   

   ɹDocker ίϯςφ΍VM(Linux,
   

   ɹWindows, Mac)Λར༻Մೳ
   ಉ࣌ؒ͡࿮Ͱ΋ CircleCI ͳΒ
   

   ར༻Մೳͳػೳ͕͜Μͳʹ΋
   
   
   ɾεϐʔυͱύϑΥʔϚϯε͕
   

   ɹ޲্ɺDocker ίϯςφΛ࠷దԽ
   
   
   ɾϏϧυ͕ΑΓߴ଎Խɺ
   

   ɹಉ࣌ʹ30ฒྻ࣮ߦ·ͰՄೳ
   
   
   ɾϓϥΠϕʔτ Orb Ͱ CI/CD ΋
   

   ɹίϥϘϨʔγϣϯɺઃఆͷ
   

   ɹ෦඼Խɺ૊৫಺Ͱͷ࠶ར༻Մೳ
   

   ɾϏϧυ࣌ؒ͸໿̎ഒɺࣗಈԽ
   

   ɹͷ݁ՌΛΑΓૣ͘ಘΒΕ·͢
   ϑΟʔυόοΫϧʔϓΛճ͠
   

   ιϑτ΢ΣΞΛૉૣ͘ಧ͚Δ
   
   
   ɾϏϧυ࣌ؒΛ୹ॖՄೳͳͷ͸
   

   ɹδϣϒΛฒྻ࣮ߦͰ͖Δ͔Β
   
   
   ɾΠϯςϦδΣϯτʹςετ
   

   ɹ෼্ׂͨ͠Ͱฒྻ࣮ߦՄೳ
   

   ɹ(ϑΝΠϧ਺ɺϑΝΠϧαΠζɺ
   

   ɹ ϩά͔Βͷ࣮ߦ࣮࣌ؒ੷Ͱ෼ׂ)
   
   
   ɾΠϯαΠτػೳͰࣦഊ͕ͪ͠
   

   ɹͳςετ΍݁Ռ͕ෆ҆ఆͳςε
   

   ɹτͳͲΛநग़Մೳ
   Ϣʔβʔొ࿥: https://circleci.com/ja/signup/ ྉۚϓϥϯ: https://circleci.com/ja/pricing/ αϙʔτ: https://support.circleci.com/hc/ja
   

   View Slide

5. 5
   ͦ͏ͩɺؾ෼స׵ʹίʔυΛॻ͜͏ʂ
   Fitbit Pixela
   

   View Slide

6. 6
   "ౙٳΈͷࣗ༝ݚڀ (3) ʙ Զ͸Ұ೔Ͳͷ͘Β͍૸ͬͯ (า͍ͯ) ͍Δͷ͔Λ Fitbit Web
   API ͱ pixela Λ࢖ͬͯՄࢹԽ͢Δݕূ CircleCI Λఴ͑ͯ ʙ"
   https://inokara.hateblo.jp/entry/2020/01/03/132348ɹ
   
   
   ΞΫηε೔ 2022-03-14
   Α͏΁͍͞Μͷϒϩά
   

   View Slide

7. 7
   (1) Fitbit (2) Pixela
   (3) CircleCI
   ͦ͏ͩɺؾ෼స׵ʹίʔυΛॻ͜͏ʂ
   

   View Slide

8. 8
   Fitbit
   า਺Λऔಘ͢Δ
   

   View Slide

9. 9
   ❯ FITBIT_ACCESS_TOKEN="ΞΫηετʔΫϯ"
   
   
   ❯ curl -sX GET "https://api.fitbit.com/1/user/-/activities/steps/date/today/7d.json" \
   
   
   -H "accept: application/json" \
   
   
   -H "authorization: Bearer $FITBIT_ACCESS_TOKEN" \
   
   
   | jq
   
   
   {
   
   
   "activities-steps": [
   
   
   {
   
   
   "dateTime": "2022-02-21",
   
   
   "value": "7204"
   
   
   },
   
   
   ...
   Fitbit API Ͱ௚ۙ7೔ؒͷา਺Λऔಘ
   (1) Fitbit → (3) CircleCI → (2) Pixela
   Get Activity Time Series by Date
   
   
   https://dev.fitbit.com/build/reference/web-api/activity-timeseries/get-activity-timeseries-by-date/
   

   View Slide

10. 10
    Fitbit API ͷΞΫηετʔΫϯΛऔಘ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    1. https://dev.fitbit.com/apps/new ͔ΒΞϓϦέʔγϣϯΛొ࿥ (*1)
    
    
    2. OAuth 2.0 ͷ Authorization Code Flow ͰίʔυΛऔಘ (*2)
    
    
    3. औಘͨ͠ίʔυΛ࢖༻ͯ͠τʔΫϯΛऔಘ
    
    
    ● (*1) ࣗ෼༻ͷμϛʔΞϓϦͳͷͰ URL ͸શ෦ localhost ͰOK
    
    
    ● (*2) OAuth 2.0 tutorial page ͕ศར
    

    View Slide

11. 11
    ❯ FITBIT_BASIC_TOKEN="Authorization: Basic ͷͱ͜ΖͷτʔΫϯ"
    
    
    ❯ FITBIT_REFRESH_TOKEN="ϦϑϨογϡτʔΫϯ"
    
    
    ❯ curl -sX POST "https://api.fitbit.com/oauth2/token" \
    
    
    -H "accept: application/json" \
    
    
    -H "authorization: Basic $FITBIT_BASIC_TOKEN" \
    
    
    -d "grant_type=refresh_token&refresh_token=$FITBIT_REFRESH_TOKEN" \
    
    
    | jq
    
    
    {
    
    
    "access_token": "৽͍͠ΞΫηετʔΫϯ",
    
    
    ...
    
    
    "refresh_token": "৽͍͠ϦϑϨογϡτʔΫϯ",
    
    
    ...
    
    
    Fitbit API ͰτʔΫϯΛϦϑϨογϡ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    Refresh Token https://dev.fitbit.com/build/reference/web-api/authorization/refresh-token/
    

    View Slide

12. 12
    Fitbit API ͷ·ͱΊ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    1. ϦϑϨογϡτʔΫϯΛ࢖ͬͯ৽͍͠ΞΫηετʔΫϯͱϦϑϨογϡτʔΫϯΛ
    औಘ
    
    
    2. ৽͍͠ΞΫηετʔΫϯΛ࢖ͬͯา਺Λऔಘ
    
    
    3. ৽͍͠ϦϑϨογϡτʔΫϯ͸࣍ճͷͨΊʹอଘ͓ͯ͘͠
    

    View Slide

13. 13
    Pixela
    า਺Λॻ͖ࠐΉ
    

    View Slide

14. 14
    ❯ PIXELA_TOKEN="Pixela ʹొ࿥ͨ͠τʔΫϯ"
    
    
    ❯ curl -sX POST "https://pixe.la/v1/users/bufferings/graphs" \
    
    
    -H "X-USER-TOKEN:$PIXELA_TOKEN" \
    
    
    -d '{"id":"demo-lt","name":"demo-lt","unit":"steps","type":"int",
    
    
    "color":"ichou","timezone":"Asia/Tokyo"}'
    
    
    {"message":"Success.","isSuccess":true}
    Pixela API ͰάϥϑΛ࡞੒
    (1) Fitbit → (3) CircleCI → (2) Pixela
    POST - /v1/users//graphs https://docs.pixe.la/entry/post-graph
    

    View Slide

15. 15
    ❯ curl -sX PUT "https://pixe.la/v1/users/bufferings/graphs/demo-lt/20220310" \
    
    
    -H "X-USER-TOKEN:$PIXELA_TOKEN" \
    
    
    -d '{"quantity": "5000"}'
    
    
    {"message":"Success.","isSuccess":true}
    Pixela API ͰσʔλΛొ࿥
    (1) Fitbit → (3) CircleCI → (2) Pixela
    POST - /v1/users//graphs https://docs.pixe.la/entry/post-graph
    

    View Slide

16. 16
    Script
    ίʔυʹ͢Δ
    

    View Slide

17. 17
    TypeScript Ͱॻ͍͓͍ͯͨɿ
    
    
    https://github.com/bufferings/fitbit-to-pixela/blob/main/src/main.ts
    ίʔυʹ͢Δ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    

    View Slide

18. 18
    CircleCI
    ࣗಈԽ͢Δ
    

    View Slide

19. Node.js ͷ Orb (https://circleci.com/developer/ja/orbs/orb/circleci/node) Λ࢖͏ͱศ
    རɻ͜Ε͚ͩͰ `npm run main` ͯ͘͠ΕΔɻΩϟογϡ΋໘౗Έͯ͘ΕΔɻ
    19
    config.yml Λ༻ҙ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    

    View Slide

20. ͋ͱ͸ Project Settings > Environment Variables ͔Β؀ڥม਺Λઃఆͯ͋͛͠Ε͹ಈ͘
    
    
    • Fitbit ༻
    ◦ FITBIT_BASIC_TOKEN
    ◦ FITBIT_REFRESH_TOKEN
    • Pixela ༻
    ◦ PIXELA_GRAPH_URL
    ◦ PIXELA_TOKEN
    • CircleCI ༻
    ◦ MY_CIRCLE_API_TOKEN
    ◦ MY_CIRCLE_PROJECT_SLUG
    20
    ϓϩδΣΫτʹ؀ڥม਺Λઃఆ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    

    View Slide

21. User Settings > Personal API Tokens ͔ΒτʔΫϯΛੜ੒
    21
    ৽͍͠ϦϑϨογϡτʔΫϯΛอଘ͢Δ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    

    View Slide

22. 22
    ❯ MY_CIRCLE_PROJECT_SLUG="ϓϩδΣΫτͷύεɻྫ: github/bufferings/fitbit-to-pixela"
    
    
    ❯ MY_CIRCLE_API_TOKEN="ੜ੒ͨ͠τʔΫϯ"
    
    
    ❯ curl -sX POST "https://circleci.com/api/v2/project/${MY_CIRCLE_PROJECT_SLUG}/envvar" \
    
    
    -H "circle-token: $MY_CIRCLE_API_TOKEN" \
    
    
    -H "content-type: application/json" \
    
    
    -d '{"name":"FITBIT_REFRESH_TOKEN","value":"xxxx12345"}' \
    
    
    {
    
    
    "name" : "FITBIT_REFRESH_TOKEN",
    
    
    "value" : "xxxx2345"
    
    
    }
    ৽͍͠ϦϑϨογϡτʔΫϯΛอଘ͢Δ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    Create an environment variable https://circleci.com/docs/api/v2/#operation/createEnvVar
    ͜Μͳײ͡Ͱߋ৽Ͱ͖ΔͷͰɺεΫϦϓτʹॻ͍͓͍ͯͨ
    

    View Slide

23. Project Settings > Triggers Ͱఆظ࣮ߦ͞ΕΔΑ͏ʹઃఆ
    23
    ఆظతʹ࣮ߦ͞ΕΔΑ͏ʹ͢Δ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    

    View Slide

24. 24
    ఆظతʹ࣮ߦ͞ΕΔΑ͏ʹ͢Δ
    (1) Fitbit → (3) CircleCI → (2) Pixela
    ಈ͍ͨʔʂ
    

    View Slide

25. 25
    (1) Fitbit (2) Pixela
    (3) CircleCI
    

    View Slide

26. า͘ͱࣗಈͰ૲͕͸͑Δʔʂ
    26
    https://pixe.la/v1/users/bufferings/graphs/steps.html
    
    
    ΞΫηε೔ 2022-03-14
    

    View Slide

27. 27
    ݱࡏCircleCI JAPACΦϑΟεͰ͸ੵۃతʹԼهͷϙδγϣϯΛ࠾༻͓ͯ͠Γ·͢ʂ
    ● Staff Infrastructure Enginee
    r
    
    ● DevOps Customer Enginee
    r
    
    ● Senior Solutions Enginee
    r
    
    ● Sales Development Representativ
    e
    
    ● Enterprise Account Executiv
    e
    
    ● Commercial Account Executive, APA
    C
    
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʔʂ
    CircleCIͷ࠾༻৘ใ
    

    View Slide