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

リアルタイムの C3.js チャートについては、素晴らしいチュートリアルがあります。では、さっそく見ていこう！

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

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

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

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

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

1. GitHub リポジトリを作成するか、既存の git リポジトリを使用する。

2. ページの右側にある 'Settings' をクリックします。

3. ページの左側にある 'Webhooks' をクリックします。

4. 右上の 'Add Webhook' をクリックします。

5. GitHub がパスワードを要求しますので、入力してください。

6. Payload URL'の下に:http://pubnub-git-hook.herokuapp.com/github/ORG-NAME/TEAM-NAME と入力します。ORG-NAME は組織名に、TEAM-NAME はレポを管理しているチームに置き換えてください。

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

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

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

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

HerokuインスタンスはGitHubからコミットデータを受け取ると、pubnub-gitというチャンネルでpublicなpublish/subscribeキーを使ってPubNubにそのデータの概要をpublishします。pubnub-git チャネルは、開発者コンソールで監視することができます。

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

{ 
  "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 コールバックを通してこの情報を受け取るときに起こります。ダッシュボードのソースを見ると、このようなコードがあります：

pubnub.subscribe({
  channel: 'pubnub-git',
  message: displayLiveMessage

});

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

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

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

PubNubは送信された各メッセージの記録を保持し、Storage & Playback（History）APIを使用してそれらの保存されたメッセージにアクセスする方法を開発者に提供します。ウェブダッシュボードの奥深くに、次のようなコードがあります：

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に従ってセットアップ手順を確認してください。オープンソースコミュニティのコラボレーションの一環として、プルリクエストを歓迎します。

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

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

PubNubの体験

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

セットアップ

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

始める

私たちの包括的なPubNubドキュメントは、ユースケースやSDKに関係なく、すぐに立ち上げて実行することができます。

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

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

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

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

この記事はPubNub.comに掲載されたものです。

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

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

PubNubを体験

ライブツアーをチェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解する

セットアップ

PubNubアカウントにサインアップすると、PubNubキーに無料ですぐにアクセスできます。

始める

PubNubのドキュメントは、ユースケースやSDKに関係なく、あなたを立ち上げ、実行することができます。