GitHub ダッシュボードのコミットをリアルタイムで追跡する
Published: 2024-05-30 19:24:39

ソフトウェア開発の領域では、リアルタイムのC3.jsチャートが組織内の活動を監視する効果的な方法を提供します。エンジニアリング・チームにとって、追跡可能なメトリクスの一つは GitHub のコミットです。このブログでは、GitHub の API を利用して GitHub のコミット・データを取得し、リアルタイムでインタラクティブなグラフに表示する方法を説明します。HTML、Javascript、CSSのパワーを活用し、PubNubを使ってGitHubダッシュボードを作成し、コミットデータをストリーミングします。

[リアルタイムの C3.js チャートについては、素晴らしいチュートリアルが](https://pubnub.com/blog/building-realtime-live-updating-animated-graphs-c3-js/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)あります。では、さっそく見ていこう！

リアルタイム GitHub ダッシュボードの作り方
-------------------------

リアルタイム GitHub ダッシュボードを作るには、GitHub リポジトリのような様々なデータソースに接続し、必要な依存関係を処理する必要があります。セキュアなコーディングやデータの暗号化など、必要なサイバーセキュリティ対策を意識しましょう。業界標準のセキュリティ・プロトコルに従うことは必須です。

ステップバイステップのガイドはこちら：

### GitHub ウェブフックを追加する

ウェブフックをセットアップするには、以下の手順に従ってください：

1.  GitHub リポジトリを作成するか、既存の git リポジトリを使用する。
    
2.  ページの右側にある 'Settings' をクリックします。
    
3.  ページの左側にある '[Webhooks](https://www.pubnub.com/learn/glossary/what-is-a-webhook/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)' をクリックします。
    
4.  右上の 'Add Webhook' をクリックします。
    
5.  GitHub がパスワードを要求しますので、入力してください。
    
6.  Payload URL'の下に:**http://pubnub-git-hook.herokuapp.com/github/ORG-NAME/TEAM-NAME** と入力します。ORG-NAME は組織名に、TEAM-NAME はレポを管理しているチームに置き換えてください。
    

![](https://www.pubnub.com/cdn/3prze68gbwl1/3ClKsiJfxkUjxO6wIEgADI/51ef64eb2a41df60ba14db62255e2c70/Screenshot_2024-05-30_at_3.09.23_PM.png "Github Webhook Settings")

### ビジュアル・ダッシュボードを読み込む

[このページにアクセスして](https://pubnub.github.io/git-commits-ui/)ください。PubNubダッシュボード経由で送信されたすべてのコミットのリストが表示されます！GitHub にコミットをプッシュすると、数十ミリ秒以内に GitHub のコミットダッシュボードにメッセージが表示され、グラフがリアルタイムで更新されます。

Github コミットダッシュボードの作り方
----------------------

このダッシュボードは、GitHub、PubNub Data Stream Network、[C3.jsによる](https://c3js.org/)D3チャートビジュアライゼーションをマッシュアップしたものです。コミットがGitHubにプッシュされると、コミットのメタデータは小さなHerokuインスタンスに投稿され、PubNubネットワークに公開されます。[私たちはGitHubのページでダッシュボードのページをホストしています。](https://pubnub.github.io/git-commits-ui/)

HerokuインスタンスはGitHubからコミットデータを受け取ると、**pubnub-gitという**チャンネルでpublicなpublish/subscribeキーを使ってPubNubにそのデータの概要をpublishします。[pubnub-git チャネルは、開発者コンソールで監視することが](https://www.pubnub.com/docs/console/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)できます。

これがメッセージのペイロードの例です：

```js
{ 
  "name":"drnugent",
  "avatar_url":"https://avatars.githubusercontent.com/u/857270?v=3",
  "num_commits":4,
  "team":"team-pubnub",
  "org":"pubnub",
  "time":1430436692806,
  "repo_name":"drnugent/test"
}
```

マジックの後半は、ダッシュボードが**subscribe コールバックを通して**この情報を受け取るときに起こります。ダッシュボードのソースを見ると、このようなコードがあります：

```js
pubnub.subscribe({
  channel: 'pubnub-git',
  message: displayLiveMessage
  
});
```

この subscribe 呼び出しによって、**pubnub-git**チャネルでメッセージを受信するたびに JavaScript の関数**displayLiveMessage()**が呼び出されるようになります。displayLiveMessage() はコミットのプッシュ通知をログの先頭に追加し、C3 の可視化チャートを更新します。

しかし、ダッシュボードが最初にロードされたとき、どのように入力されるのでしょうか？

PubNub Storage & Playback APIをダッシュボードに活用する
------------------------------------------

PubNubは送信された各メッセージの記録を保持し、[Storage & Playback（History）APIを](https://www.pubnub.com/products/pubnub-platform/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)使用してそれらの保存されたメッセージにアクセスする方法を開発者に提供します。ウェブダッシュボードの奥深くに、次のようなコードがあります：

```js
var displayMessages = function(ms) { ms[0].forEach(displayMessage); };
 
pubnub.history({
  channel: 'pubnub-git',
  callback: displayMessages,
  count: 100
});
```

これは、pubnub-git チャンネルで送信された直近の 1,000 通のメッセージを取得するためのリクエストです。つまり、これらのメッセージが送信されたときにウェブダッシュボードがオフラインだったとしても、それを取得し、そのデータを使ってあたかもダッシュボードが常時オンラインであったかのように表示することができるのです。

この機能は、携帯電話ネットワーク上のモバイル・アプリやコネクテッド・カーなど、接続が断続的で不安定なデバイスを扱う場合に特に有効だ。PubNubネットワークのおかげで、私たちの可視化ダッシュボードはアプリケーションの状態を保存するバックエンドを必要としません。

独自のGitHubダッシュボードを構築する
---------------------

Githubダッシュボードのビルドを開始するには、github.comのGit Commit UIリポジトリをフォークし、READMEに従ってセットアップ手順を確認してください。オープンソースコミュニティのコラボレーションの一環として、プルリクエストを歓迎します。

![](https://www.pubnub.com/cdn/3prze68gbwl1/asset-17suaysk1qa1huv/16fe7d9c1c2eb1d0d182c33c37a40f57/687474703a2f2f692e696d6775722e636f6d2f4d524b32304b622e676966.gif?w=700&h=550 "687474703a2f2f692e696d6775722e636f6d2f4d524b32304b622e676966")

リアルタイムダッシュボードの今後の動向と発展
----------------------

リアルタイム・ダッシュボードと関連技術の最後のトレンドと開発に目を向け続けることは非常に重要である。リアルタイムデータ伝送のためのウェブソケット、即時の洞察のための通知の使用、様々なワークフローでのリアルタイムダッシュボードの使用などが含まれます。

PubNubの体験
---------

PubNubは多くのクライアントがリアルタイムアプリケーションで成功を収めるのを支援してきました。例えば、LinkedInのリアルタイム通知システム...

セットアップ
------

PubNubアカウントにサインアップすると、PubNubキーに無料ですぐにアクセスできます。PubNubアカウントで利用可能な最新機能には...

始める
---

私たちの包括的な[PubNubドキュメントは](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)、ユースケースや[SDKに](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)関係なく、すぐに立ち上げて実行することができます。

PubNubは、ユーザーエクスペリエンスを向上させるユーザーフレンドリーなプラットフォームを提供します。私たちのサービスは、シームレスな統合プロセスのために開発者を念頭に置いて設計されています。

私たちはあなたのリアルタイム開発の旅をよりスムーズで効率的にするためにここにいることを忘れないでください。ペイロードのURLを設定して、始めましょう！

公式ドキュメントや権威ある情報源は、情報の妥当性を確認するためにブログ記事全体で参照することができます。

PubNubはどのようにお役に立ちますか？
=====================

この記事は[PubNub.comに](https://www.pubnub.com/blog/tracking-realtime-github-dashboard-commits/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)掲載されたものです。

私たちのプラットフォームは、開発者がWebアプリ、モバイルアプリ、およびIoTデバイスのためのリアルタイムのインタラクティブ性を構築、配信、管理するのに役立ちます。

私たちのプラットフォームの基盤は、業界最大かつ最もスケーラブルなリアルタイムエッジメッセージングネットワークです。世界15か所以上で8億人の月間アクティブユーザーをサポートし、99.999%の信頼性を誇るため、停電や同時実行数の制限、トラフィックの急増による遅延の問題を心配する必要はありません。

PubNubを体験
---------

[ライブツアーを](https://www.pubnub.com/tour/introduction/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)チェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解する

セットアップ
------

[PubNubアカウントに](https://admin.pubnub.com/signup/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)サインアップすると、PubNubキーに無料ですぐにアクセスできます。

始める
---

[PubNubのドキュメントは](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)、ユースケースや[SDKに](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)関係なく、あなたを立ち上げ、実行することができます。