私は自分の目標に具体的な指標を割り当てたいと思っています。理想的には、これらが自動的に追跡され、私に責任を負わせる仕組みがあるはずです。 今年の私の目標の 1 つは、より多くの記事を投稿し、自分の仕事のやり方や専門分野で興味深いと思うことについてもっとオープンにすることです。そのためにはどのような指標を付ければよいでしょうか。1 つは間違いなく投稿数です。もう 1 つは、投稿を興味深く思って私をフォローしてくれる人がどれだけいるかです。 これらの指標が時間の経過とともにどのように変化するかを確認するために、履歴値を追跡する小さなダッシュボードを作成することにしました。まずは X/Twitter から始めることにしました。 このチュートリアルで作成したダッシュボードは、こちらで確認できます:  https://horosin.github.io/metrics-dashboard/ 完全なコード: https://github.com/horosin/metrics-dashboard  X が昨年 API へのアクセスを制限したという話を聞いたことがあるかもしれません。実際、制限はありましたが、X は依然として独自の基本的な指標へのアクセスを許可しています (LinkedIn などのプラットフォームとは異なります。Microsoft は恥を知れ。自分のデータにアクセスするにはスクレイピングする必要があります)。 私たちが構築しようとしているもの 作成/構成するソフトウェアがいくつかあります。  X からデータを取得するためのコード。 データをどこかに保存するスクリプト (この場合は、GitHub リポジトリ内の JSON ファイル)。 毎日指定された時間に定期的にコードを実行するようにスケジュールします。 データを表示するためのダッシュボード (chart.js を使用した単純な単一の HTML ファイル)。 ダッシュボードをホストする GitHub Pages。 最も優れている点は、これらすべてを無料で実行できることです (コンピューティングを含む)。 設定 Twitter アプリケーション 開発者セクションで Twitter アプリケーションを設定することは、Twitter API にアクセスするための前提条件です。Twitter API は、フォロワー数などのデータを取得したり、ツイートを投稿したり、プログラムで他の Twitter リソースにアクセスしたりするために不可欠です。ここでは、開始するためのステップバイステップ ガイドを紹介します。   。Twitter  にアクセスし、Twitter アカウントでサインインします。Twitter アカウントをお持ちでない場合は、作成する必要があります。申請/サインアップを完了します。 Twitter Developer サイトに移動します Developer :  にアクセスします。 開発者ダッシュボードに移動する Twitter 開発者ダッシュボード : 「プロジェクトの作成」をクリックします。プロジェクト名、説明、ユースケースを入力するよう求められます。プロジェクトのニーズに応じてこれらを入力してください。 プロジェクトの作成 : プロジェクトを作成したら、このプロジェクト内でアプリを作成するオプションが表示されます。「アプリを作成」をクリックし、アプリ名などの必要な詳細を入力します。 プロジェクト内でアプリを作成する   : アプリが作成されると、API キー、API シークレット キー、アクセス トークン、アクセス トークン シークレットなどのアプリの詳細が記載されたページが表示されます。これらの認証情報は安全に保存してください。Twitter API へのリクエストを認証するために必要になります。 API キーとトークンを取得する プロジェクト さて、コーディングを始めましょう。システムに新しいディレクトリを作成し、そこでコンソールを開きます。   mkdir metrics-dashboard cd metrics-dashboard 必ず Git リポジトリを初期化し、後で GitHub プロジェクトに接続してください。  node.js プロジェクトを初期化し、API で認証するために必要ないくつかのパッケージをインストールします。   npm init npm i dotenv oauth-1.0a crypto 以前に X から取得したすべてのキーを含む ファイルを作成します。これをリポジトリにコミットしないでください。これはスクリプトをローカルでテストするためだけです。 .env   TWITTER_API_KEY='' TWITTER_API_SECRET='' TWITTER_ACCESS_TOKEN='' TWITTER_ACCESS_SECRET='' これを回避するには、  ファイルを作成します。以下のサンプルには、無視したい他のパスが含まれています。 .gitignore   node_modules/ .env .DS_Store dashboard/data/ データの取得 まず、プラットフォームの API からフォロワーの統計情報を取得するために呼び出される Node.js スクリプトを作成します。標準の fetch ライブラリを使用して API 呼び出しを行い、  て X で認証します。データを取得した後、結果をデータベースとして機能する JSON ファイルに書き込みます。 oauth-1.0a これは別のスクリプトによって処理されます。出力にアクセスできるようにするには、GitHub Actions で利用可能な環境ファイルに書き込みます。 ノード20を使用しています。 プロジェクトのルートに というファイルを作成します。 x_fetch_data.js   require('dotenv').config(); const OAuth = require('oauth-1.0a'); const crypto = require('crypto'); const fs = require('fs'); // Initialize OAuth 1.0a const oauth = OAuth({ consumer: { key: process.env.TWITTER_API_KEY, // Read from environment variable secret: process.env.TWITTER_API_SECRET // Read from environment variable }, signature_method: 'HMAC-SHA1', hash_function(base_string, key) { return crypto.createHmac('sha1', key).update(base_string).digest('base64'); } }); const token = { key: process.env.TWITTER_ACCESS_TOKEN, // Read from environment variable secret: process.env.TWITTER_ACCESS_SECRET // Read from environment variable }; const url = 'https://api.twitter.com/2/users/me?user.fields=public_metrics'; const fetchTwitterFollowerCount = async () => { const requestData = { url, method: 'GET', }; // OAuth header const headers = oauth.toHeader(oauth.authorize(requestData, token)); headers['User-Agent'] = 'v2UserLookupJS'; const response = await fetch(url, { method: 'GET', headers }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log(data); // Extract the metrics const metrics = data?.data?.public_metrics; // Write the metrics to the environment file fs.appendFileSync(process.env.GITHUB_OUTPUT, `METRICS=${JSON.stringify(metrics)}\n`); }; fetchTwitterFollowerCount().catch(err => console.error(err)); スクリプトをテストするには、次のコマンドを実行します。   GITHUB_OUTPUT=testoutput node x_fetch_data.js 出力と ファイルに X メトリックが表示されるはずです。 testoutput   metrics={"followers_count":288,"following_count":302,"tweet_count":1381,"listed_count":0,"like_count":591} データの保存 データを保存するには、ファイル に別のスクリプトを作成します。このスクリプトは、環境からの出力を取得して、  に追加します。 x_save_data.js ./data/x.json 必ず最初にこのファイルを作成し、git リポジトリにコミットしてください。その内容は空の配列である必要があります。   [] また、その日にデータがすでに取得されている場合、スクリプトは重複レコードを追加しません。代わりに古いレコードを上書きします。   const fs = require('fs'); // Parse the JSON string from the environment variable const metrics = JSON.parse(process.env.METRICS); const path = './data/x.json'; const now = new Date(); const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`; let data = []; if (fs.existsSync(path)) { data = JSON.parse(fs.readFileSync(path)); } const todayIndex = data.findIndex(entry => entry.date === today); if (todayIndex > -1) { data[todayIndex] = { date: today, ...metrics }; } else { data.push({ date: today, ...metrics }); } fs.writeFileSync(path, JSON.stringify(data, null, 2));  testouput ファイルを編集して JSON を一重引用符で囲み、以下を実行することでスクリプトをテストできます。GitHub Actions 環境では動作が異なり、引用符は必要ないため、必要に応じてファイルを編集してください。   # load output from the previous script set -a; source testoutput; set +a; node x_save_data.js スケジュールされた GitHub アクション それでは、GitHub アクション コードを含むファイルを作成しましょう。これは毎日指定された時間に実行され、メトリックを取得します。その後、メトリックを保存してリポジトリにコミットします。 次のコードを に保存します。 .github/workflows/fetch_x_data.yml   name: Fetch X Data on: schedule: # Runs at 4 AM UTC - cron: '0 4 * * *' workflow_dispatch: # This line enables manual triggering of the action jobs: fetch_data: runs-on: ubuntu-latest permissions: contents: write pull-requests: write steps: - name: Check out the repository uses: actions/checkout@v4 - name: Set up Node.js uses: actions/setup-node@v4 with: node-version: "20" - name: Install dependencies run: npm install - name: Fetch Data from Platform X id: fetch_data run: node x_fetch_data.js env: TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }} TWITTER_API_SECRET: ${{ secrets.TWITTER_API_SECRET }} TWITTER_ACCESS_TOKEN: ${{ secrets.TWITTER_ACCESS_TOKEN }} TWITTER_ACCESS_SECRET: ${{ secrets.TWITTER_ACCESS_SECRET }} - name: Save data run: node x_save_data.js env: METRICS: ${{ steps.fetch_data.outputs.METRICS }} - name: Commit and push if there's changes run: | git config --global user.email "action@github.com" git config --global user.name "GitHub Action" git add data/x.json git commit -m "Update data for Platform X" || exit 0 # exit 0 if no changes git push コードをコミットし、GitHub 上のプロジェクトの「アクション」セクションに移動してそこからトリガーすることで、アクションを手動で実行します。 ダッシュボード さて、データを表示する方法はどうでしょうか? 単純な HTML を扱いたくなかったので、ChatGPT に生成を依頼しました。   フォルダーに ファイルを作成します。データ取得コードを HTML と一緒にホストすることを避けるため、プロジェクトのメイン ディレクトリは使用しません。 dashboard index.html   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Twitter Dashboard</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } .chart-container { width: 80%; max-width: 1000px; } canvas { max-width: 100%; } h1 { text-align: center; margin-top: 20px; } h2 { text-align: center; margin-top: 20px; } </style> </head> <body> <h1>Twitter Dashboard</h1> <h2>Number of Followers</h2> <div class="chart-container"> <canvas id="followersChart"></canvas> </div> <h2>Number of Tweets</h2> <div class="chart-container"> <canvas id="tweetsChart"></canvas> </div> <script> fetch('data/x.json') .then(response => response.json()) .then(data => { const dates = data.map(item => item.date); const followers = data.map(item => item.followers_count); const tweets = data.map(item => item.tweet_count); const minFollowers = Math.min(...followers) - 100; const minTweets = Math.min(...tweets) - 100; const followersCtx = document.getElementById('followersChart').getContext('2d'); const tweetsCtx = document.getElementById('tweetsChart').getContext('2d'); new Chart(followersCtx, { type: 'line', data: { labels: dates, datasets: [{ label: 'Followers', data: followers, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: false, min: minFollowers } } } }); new Chart(tweetsCtx, { type: 'line', data: { labels: dates, datasets: [{ label: 'Tweets', data: tweets, backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: false, min: minTweets } } } }); }); </script> </body> </html> リポジトリにコミットします。  (オプション) ローカルでテストする場合は、データ フォルダーをダッシュボード フォルダーにコピーし、その中に単純なサーバーを起動します。   cp -r data dashboard/ cd dashboard # start server with Python if you have it installed (version 3) # otherwise, use other way eg https://gist.github.com/willurd/5720255 python -m http.server 8000  GitHub Pagesへのダッシュボードのデプロイ ダッシュボードが完成したので、次はそれを Web に公開します。  GitHub で無料アカウントを使用している場合は、ページとリポジトリ全体を公開する必要があります。   ファイルを作成します。 .github/workflows/deploy_dashboard.yml   name: Deploy to GitHub Pages on: schedule: # redeploy after data update - cron: '0 5 * * *' push: branches: - main workflow_dispatch: # This line enables manual triggering of the action permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: false jobs: deploy: permissions: pages: write # to deploy to Pages id-token: write # to verify the deployment originates from an appropriate source environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Pages uses: actions/configure-pages@v4 - name: Copy data to dashboard folder run: cp -r data dashboard/ - name: Update pages artifact uses: actions/upload-pages-artifact@v3 with: path: dashboard/ - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 # or specific "vX.XX" version tag for this action アクションによりページがデプロイされます。URL は、GitHub プロジェクト設定またはワークフロー出力のアクション セクションで確認できます。 繰り返しになりますが、私のものはここにあります:   。 https://horosin.github.io/metrics-dashboard/ まとめ これで完了です。ソーシャル メディア (X) メトリクスを追跡し、データ取得を自動化し、履歴データを保存し、傾向を視覚化する完全な自動化システムです。このセットアップにより、機能を他のプラットフォームやメトリクスに拡張し、すべての分析ニーズに対応する包括的なダッシュボードを作成できます。興味があればお知らせください。 左側にメールアドレスを入力して私のプロフィールを購読し、私の記事を最新の状態に保ちましょう。 より多くのヒントや洞察を得るには、Twitter  で私をフォローし、ブログの を購読することを忘れないでください。 @ horosin ニュースレター  Twitter をお持ちでない場合は、  でフォローすることもできます。 LinkedIn

2022 - HackerNoon Contributor of the Year - Cicd

Join free programming newsletter!

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Software Team Lead

このオーディオは、ストーリーの元の言語で制作されています。

API と GitHub Actions を使用して Twitter/X フォロワーの統計を追跡するダッシュボードを作成する方法

About Author

コメント

ラベル

この記事は

Related Stories

ワークフローを10倍に向上させる方法: 必須アプリ17選

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

ワークフローを10倍に向上させる方法: 必須アプリ17選

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps