走り続けてください

バリーランニング
毎日運動を続けることは良い習慣です。最近、GitHub を見ていると、私たちが普段使用するさまざまなスポーツアプリのデータをフロントエンドで可視化するプロジェクトを見つけました。それで、私も手を動かして作ってみました。以下では、私がどのように実現したかを共有します。この記事では、Keep の設定操作を主に共有します。

メインプロジェクトをローカルにクローン#

Running Page は @yihong0618 によって設立されたオープンソースプロジェクトで、このプロジェクトを通じて複数の主流ランニングプラットフォームからトレーニングデータを同期し、自動的に地図可視化のランニングページを生成できます。GitHub Pages を使用すると、迅速に自動デプロイを完了できます。

プロジェクトのアドレス：https://github.com/yihong0618/running_page
このリポジトリをフォークして自分のリポジトリにクローンするか、直接クローンして自分の新しいリポジトリにアップロードします。

プロジェクトファイルの設定#

注意：圧縮ファイルには複数の「.」で始まるファイル名が含まれています。macOSシステムでは、ショートカット「Command + shift + .」を使用して隠しファイルを表示する必要があります。

1. ルートディレクトリで「gatsby-config.js」を見つけ、個別のオプションを設定します。#

pathPrefix: '/',   # カスタムドメインを使用する場合、ここを/に変更する必要があります。
siteMetadata: {
  siteTitle: 'Running Page',   # サイトタイトル
  siteUrl: 'https://running.domain.com',   # サイトドメイン
  logo: 'https://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=*********&spec=640',   # 左上のアイコン
  description: 'Just Do It',
  navLinks: [
    {
      name: 'Blog',   # 右上のナビゲーションバー
      url: 'https://blog.domain.com',
    },
  ],
},

2.「.github」>「workflows」>「run_data_sync.yml」ファイルを開き、プラットフォームの種類と情報を変更します。異なるプラットフォームの設定情報は説明ページで確認できます。#

name: Run Data Sync

on:
  workflow_dispatch:
  schedule:
    - cron: "0 0 * * *"

env:
  # 自分の設定に変更してください。
  RUN_TYPE: keep # strava/nike/garmin/garmin_cn/keep/only_gpx/nike_to_strava/strava_to_garmin/strava_to_garmin_cn/garmin_to_strava/garmin_to_strava_cnをサポートします。'pass'を自分のものに変更してください。
  ATHLETE: BarryYangi
  TITLE: バリーランニング
  MIN_GRID_DISTANCE: 4 # ここで最小距離を変更します。
  TITLE_GRID: 4km以上のラン # ここでも
  GITHUB_NAME: BarryYangi
  GITHUB_EMAIL: [email protected]

jobs:
  sync:
    name: Sync
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        
      - name: Set up Python
        uses: actions/setup-python@v1
        with:
          python-version: 3.7

      # pdmから
      - name: Set Variables
        id: set_variables
        run: |
          echo "PY=$(python -c 'import hashlib, sys;print(hashlib.sha256(sys.version.encode()+sys.executable.encode()).hexdigest())')" >> $GITHUB_OUTPUT
          echo "PIP_CACHE=$(pip cache dir)" >> $GITHUB_OUTPUT

      - name: Cache PIP
        uses: actions/cache@v2
        with:
          path: ${{ steps.set_variables.outputs.PIP_CACHE }}
          key: Ubuntu-pip-${{ steps.set_variables.outputs.PY }}
          
      - name: Install dependencies
        run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt
        if: steps.pip-cache.outputs.cache-hit != 'true'

      - name: Run sync Nike script
        if: env.RUN_TYPE == 'nike'
        run: |
          python scripts/nike_sync.py ${{ secrets.NIKE_REFRESH_TOKEN }}

      - name: Run sync Nike to Strava(ランをNikeデータバックアップで実行し、Stravaで表示)
        if: env.RUN_TYPE == 'nike_to_strava'
        run: |
          python scripts/nike_to_strava_sync.py ${{ secrets.NIKE_REFRESH_TOKEN }} ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}

      - name: Run sync Keep script
        if: env.RUN_TYPE == 'keep'
        run: |
          python scripts/keep_sync.py ${{ secrets.KEEP_MOBILE }} ${{ secrets.KEEP_PASSWORD }} --with-gpx

      - name: Run sync Strava script
        if: env.RUN_TYPE == 'strava'
        run: |
          python scripts/strava_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}

      # Garmin用に'tcx'を生成したい場合は、argsに--tcxコマンドを追加できます。
      - name: Run sync Garmin script
        if: env.RUN_TYPE == 'garmin'
        run: |
          python scripts/garmin_sync.py ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }}
        # 'type running'のみを同期したい場合は、args --only-runを追加します。デフォルトのスクリプトはすべてのデータ（ライドとラン）を同期します。
        # python scripts/garmin_sync.py ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }} --only-run

      - name: Run sync Garmin CN script
        if: env.RUN_TYPE == 'garmin_cn'
        run: |
          python scripts/garmin_sync.py ${{ secrets.GARMIN_CN_EMAIL }} ${{ secrets.GARMIN_CN_PASSWORD }} --is-cn

      - name: Run sync Only GPX script
        if: env.RUN_TYPE == 'only_gpx'
        run: |
          python scripts/gpx_sync.py

      - name: Run sync Strava to Garmin(ランをStrava（または他のものをStravaにアップロード）データバックアップでGarminで実行)
        if: env.RUN_TYPE == 'strava_to_garmin'
        run: |
          python scripts/strava_to_garmin_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }} ${{ secrets.STRAVA_EMAIL }} ${{ secrets.STRAVA_PASSWORD }}

      - name: Run sync Strava to Garmin-cn(ランをStrava（または他のものをStravaにアップロード）データバックアップでGarmin-cnで実行)
        if: env.RUN_TYPE == 'strava_to_garmin_cn'
        run: |
          python scripts/strava_to_garmin_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_CN_EMAIL }} ${{ secrets.GARMIN_CN_PASSWORD }} ${{ secrets.STRAVA_EMAIL }} ${{ secrets.STRAVA_PASSWORD }} --is-cn

      - name: Run sync Garmin-cn to Strava(ランをGarminデータバックアップでStravaで実行)
        if: env.RUN_TYPE == 'garmin_to_strava_cn'
        run: |
          python scripts/garmin_to_strava_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_CN_EMAIL }} ${{ secrets.GARMIN_CN_PASSWORD }} --is-cn

      - name: Run sync Garmin to Strava(ランをGarminデータバックアップでStravaで実行)
        if: env.RUN_TYPE == 'garmin_to_strava'
        run: |
          python scripts/garmin_to_strava_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }}

      - name: Run sync Tulipsport script
        if: env.RUN_TYPE == 'tulipsport'
        run: |
          python scripts/tulipsport_sync.py ${{ secrets.TULIPSPORT_TOKEN }} --with-gpx

      - name: Make svg GitHub profile
        if: env.RUN_TYPE != 'pass'
        run: |
          python scripts/gen_svg.py --from-db --title "${{ env.TITLE }}" --type github --athlete "${{ env.ATHLETE }}" --special-distance 10 --special-distance2 20 --special-color yellow --special-color2 red --output assets/github.svg --use-localtime --min-distance 0.5
          python scripts/gen_svg.py --from-db --title "${{ env.TITLE_GRID }}" --type grid --athlete "${{ env.ATHLETE }}" --output assets/grid.svg --special-color yellow --special-color2 red --special-distance 20 --special-distance2 40 --use-localtime --min-distance "${{ env.MIN_GRID_DISTANCE }}"
          python scripts/gen_svg.py --from-db --type circular --use-localtime
          python scripts/gen_svg.py --from-db --year $(date +"%Y")  --language zh_CN --title "$(date +"%Y") Running" --type github --athlete "${{ env.ATHLETE }}" --special-distance 10 --special-distance2 20 --special-color yellow --special-color2 red --output assets/github_$(date +"%Y").svg --use-localtime --min-distance 0.5
          
      - name: Deploy site
        uses: peaceiris/actions-gh-pages@v3
        with:
            github_token: ${{ secrets.MY_GIT_TOKEN }}
            publish_branch: vercel-pages
            publish_dir: .
            force_orphan: true
            # keep_files: true

ここでは、残りの 3 つの workflows 設定 yml を削除することをお勧めします。なぜなら、私たちはそれを必要とせず、後で私たちはサイトを vercel に設定し、私のrun_data_sync.ymlファイルの内容をこのファイルにコピーして上書きします。

3. 自分のプラットフォームに必要なアカウント情報を見つける#

例えば keep：

python scripts/keep_sync.py ${{ secrets.KEEP_MOBILE }} ${{ secrets.KEEP_PASSWORD }} --with-gpx

私たちは keep のモバイルアカウントとパスワードでログインできる必要があります。その後、私たちはそれを使用します。

4.Running Page は Mapbox を使用して地図を表示します。 Mapbox サイトに登録して開発者アカウントを作成する必要があります。#

アカウントにログインした後、「Create a token」を選択してトークンを作成し、関連情報を入力します。送信後、一連のトークン情報が得られます。「src」>「utils」>「const.js」ファイルを編集し、自分のトークンを MAPBOX_TOKEN に置き換えます。

5. ファイルを保存し、自分の git リポジトリに push します。#

Git リポジトリの secrets 設定#

自分のリポジトリに入り、Settings->Secrets and variables->Actions->New repository secret を順にクリックして、以下の 3 つの secrets を新規作成します。
secrets

最初の 2 つは keep のモバイルアカウントとパスワードで、最後の 1 つは GitHub のトークンです。もし持っていない場合は、アイコンをクリック ->Settings->Developer settings->Personal access tokens (classic)->Generate new token をクリックします。
作成時にはすべての権限をチェックして、作成後にコピーしてメモしておきます。このトークンは一度しか表示されませんので、見た後は再度見ることができません。これを前述のリポジトリの secrets に追加すれば大丈夫です。

Vercel の設定#

私たちの Vercel にアクセスし、アカウントがない場合は登録して GitHub をリンクします。リンクが完了したら、先ほど作成したリポジトリをインポートします。
次に、GitHub のリポジトリに戻り、Actions をクリックして、以下の手順でワークフローを手動でトリガーします。
Actions

ワークフローが完了するのを待ち、チェックが付いていれば問題ありません。この時点で、vercel-pages ブランチが追加されていることに気づくでしょう。このブランチは vercel にデプロイするために使用します。vercel のプロジェクト設定ページに移動し、デフォルトのデプロイブランチを vercel-pages に変更します。手順は以下の画像の通りです：

保存が完了したら、vercel-pages ブランチに再度 push する必要があります。これにより、vercel で実際に適用されます。GitHub リポジトリの Actions ページで、先ほど操作したワークフローを再度実行するだけです。

ワークフローが完了するのを待ち、vercel ページに戻ってデプロイが完了するのを待つと、デプロイブランチが vercel-pages に変わっていることがわかります。

vercel のドメインをリンク#

このページを友達と共有したい場合、これだけでは優雅ではありません。もし自分のドメインを持っている場合は、vercel の設定ページのドメインオプションで自分のドメインをリンクできます。

終わり#

このプロジェクトが私たちに単なるプロジェクトデプロイの経験をもたらすだけでなく、良い運動習慣を身につけるきっかけになることを願っています。そして、それを記録し、将来振り返ることができるようにしましょう。
楽しんでください。