翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# ウェブアプリケーションクライアントの実装
<a name="scorekeep-client"></a>

**注記**  
X-Ray SDK/デーモンメンテナンス通知 – 2026 年 2 月 25 日、 AWS X-Ray SDKsデーモンはメンテナンスモードに移行します。 AWS では、X-Ray SDK とデーモンのリリースがセキュリティの問題にのみ対処するように制限されます。サポートタイムラインの詳細については、「[X-Ray SDK とデーモンのサポートタイムライン](xray-sdk-daemon-timeline.md)」を参照してください。OpenTelemetry に移行することをお勧めします。OpenTelemetry への移行の詳細については、「[X-Ray による計装から OpenTelemetry による計装への移行](https://docs.aws.amazon.com/xray/latest/devguide/xray-sdk-migration.html)」を参照してください。

[https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito) ブランチで､Scorekeep は Amazon Cognito を使用して､ユーザーがアカウントを作成し、それを使用してサインインして Amazon Cognito ユーザープールからユーザー情報を取得することができるようにします。ユーザーがサインインすると、Scorekeep は Amazon Cognito ID プールを使用して、 で使用する一時的な AWS 認証情報を取得します AWS SDK for JavaScript。

ID プールは、サインインしたユーザーがトレースデータを AWS X-Rayに書き込むことができるように設定されています。ウェブアプリケーションは、これらの認証情報を使用して、ログインしたユーザーの ID、ブラウザパス、および Scorekeep API への呼び出しのクライアントビューを記録します。

ほとんどの作業は `xray` というサービスクラスで行われます。このサービスクラスは、必要な識別子の生成、進行中のセグメントの作成、セグメントのファイナライズ、セグメントドキュメントの X-Ray API への送信手段を提供します。

**Example [https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/xray.js](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/xray.js) – セグメントの記録とアップロード**  

```
...
  service.beginSegment = function() {
    var segment = {};
    var traceId = '1-' + service.getHexTime() + '-' + service.getHexId(24);

    var id = service.getHexId(16);
    var startTime = service.getEpochTime();

    segment.trace_id = traceId;
    segment.id = id;
    segment.start_time = startTime;
    segment.name = 'Scorekeep-client';
    segment.in_progress = true;
    segment.user =  sessionStorage['userid'];
    segment.http = {
      request: {
        url: window.location.href
      }
    };

    var documents = [];
    documents[0] = JSON.stringify(segment);
    service.putDocuments(documents);
    return segment;
  }

  service.endSegment = function(segment) {
    var endTime = service.getEpochTime();
    segment.end_time = endTime;
    segment.in_progress = false;
    var documents = [];
    documents[0] = JSON.stringify(segment);
    service.putDocuments(documents);
  }

  service.putDocuments = function(documents) {
    var xray = new AWS.XRay();
    var params = {
      TraceSegmentDocuments: documents
    };
    xray.putTraceSegments(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
      } else {
        console.log(data);
      }
    })
  }
```

これらのメソッドは、ウェブアプリケーションが Scorekeep API を呼び出すために使用するリソースサービスのヘッダーおよび `transformResponse` 関数で呼び出されます。API が生成するセグメントと同じトレースにクライアントセグメントを含めるには、ウェブアプリケーションは､X-Ray SDK が読み取り可能な[トレースへッダー](xray-concepts.md#xray-concepts-tracingheader) (`X-Amzn-Trace-Id`) にトレース ID とセグメント ID を含める必要があります｡ 実装された Java アプリケーションがこのヘッダーでリクエストを受け取ると、X-Ray SDK for Java は同じトレース ID を使用し、ウェブアプリケーションクライアントからのセグメントをセグメントの親にします。

**Example [https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/services.js](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/services.js) – 角度リソースコールとトレースヘッダーの書き込みセグメントの記録**  

```
var module = angular.module('scorekeep');
module.factory('SessionService', function($resource, api, XRay) {
  return $resource(api + 'session/:id', { id: '@_id' }, {
    segment: {},
    get: {
      method: 'GET',
      headers: {
        'X-Amzn-Trace-Id': function(config) {
          segment = XRay.beginSegment();
          return XRay.getTraceHeader(segment);
        }
      },
      transformResponse: function(data) {
        XRay.endSegment(segment);
        return angular.fromJson(data);
      },
    },
...
```

表示されるトレースマップには、ウェブアプリケーションクライアントのノードが含まれます。

![\[\]](http://docs.aws.amazon.com/ja_jp/xray/latest/devguide/images/scorekeep-servicemap-client.png)


ウェブアプリケーションからのセグメントを含むトレースには、ユーザーがブラウザに表示する URL (`/#/` で始まるパス) が表示されます。クライアント実装機能がなければ、ウェブアプリケーションが呼び出す API リソース (`/api/` で始まるパス) の URL のみを取得します。

![\[\]](http://docs.aws.amazon.com/ja_jp/xray/latest/devguide/images/scorekeep-traces-client.png)