私は自分の目標に具体的な指標を割り当てたいと思っています。理想的には、これらが自動的に追跡され、私に責任を負わせる仕組みがあるはずです。

今年の私の目標の 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 リソースにアクセスしたりするために不可欠です。ここでは、開始するためのステップバイステップ ガイドを紹介します。

1. Twitter Developer サイトに移動します。Twitter Developerにアクセスし、Twitter アカウントでサインインします。Twitter アカウントをお持ちでない場合は、作成する必要があります。申請/サインアップを完了します。

   
   

2. 開発者ダッシュボードに移動する: Twitter 開発者ダッシュボードにアクセスします。

   
   

3. プロジェクトの作成: 「プロジェクトの作成」をクリックします。プロジェクト名、説明、ユースケースを入力するよう求められます。プロジェクトのニーズに応じてこれらを入力してください。

   
   

4. プロジェクト内でアプリを作成する: プロジェクトを作成したら、このプロジェクト内でアプリを作成するオプションが表示されます。「アプリを作成」をクリックし、アプリ名などの必要な詳細を入力します。

   
   

5. API キーとトークンを取得する: アプリが作成されると、API キー、API シークレット キー、アクセス トークン、アクセス トークン シークレットなどのアプリの詳細が記載されたページが表示されます。これらの認証情報は安全に保存してください。Twitter 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 呼び出しを行い、 oauth-1.0aて X で認証します。データを取得した後、結果をデータベースとして機能する JSON ファイルに書き込みます。

これは別のスクリプトによって処理されます。出力にアクセスできるようにするには、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

出力とtestoutputファイルに X メトリックが表示されるはずです。

 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 "[email protected]" 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 に生成を依頼しました。

dashboardフォルダーにindex.htmlファイルを作成します。データ取得コードを 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でフォローすることもできます。