syncfusion-angular-chart

Syncfusion Angular Chart コンポーネントの実装

Syncfusion Angular Chart コンポーネントを実装するための包括的なガイドです。Chart は、折れ線、棒、面、縦棒、円、金融向け、特殊なシリーズなど、25 種類以上のチャートに対応する高性能でインタラクティブなデータ可視化ライブラリです。レスポンシブなレンダリング、スムーズな操作、大規模なデータセットに最適化されています。

このスキルを使用する場面

次のような場合にこのスキルを使用してください。

• データの可視化： Angular アプリケーションで数値データをチャート、グラフ、プロットとして表示する
• トレンド分析： 折れ線、スプライン、面チャートを使用して、時間の経過に伴うデータの傾向を示す
• 比較： 縦棒、棒、グループ化チャートを使用して、カテゴリーデータを比較する
• 金融データ： ローソク足、OHLC、テクニカル指標を使った株価チャートを実装する
• 統計分析： 分布の分析に箱ひげ図、ヒストグラム、パレート図を使用する
• 多次元データ： 相関分析に散布図やバブルチャートを表示する
• リアルタイム監視： ダッシュボードや監視システム用に、リアルタイムで更新されるチャートを作成する
• インタラクティブな探索： ズーム、パン、十字線、ツールチップ、選択機能を追加する
• AI エージェントとの統合： WebMCP を有効にし、ブラウザのモデルコンテキストと AI エージェントが、登録済みツールを通じて Chart を調査・操作できるようにする
• カスタムの可視化： 複数のシリーズタイプや軸を組み合わせ、複雑なレイアウトを作成する
• アクセシブルなチャート： キーボード操作とスクリーンリーダーに対応した、WCAG 準拠のチャートを実装する

コンポーネントの概要

Syncfusion Angular Chart は、次の機能を備えた、機能豊富なデータ可視化コンポーネントです。

• 25 種類以上のシリーズタイプ： 折れ線、スプライン、ステップ折れ線、面、縦棒、棒、散布図、バブル、円、金融向け（ローソク足、OHLC）、統計向け（箱ひげ図、ヒストグラム、パレート図）、極座標、レーダー、ウォーターフォールなど
• インタラクティブな機能： ズーム（選択、マウスホイール、ピンチ）、パン、ツールチップ、十字線、トラックボール、選択、データ編集
• WebMCP との統合： enableWebMcp と webMcpSettings を通じて、組み込みの Chart 調査・変更ツールを自動登録
• 複数の軸： 数値、日時、対数、カテゴリーなど、異なるデータ型の主軸、補助軸、複数軸に対応
• チャート要素： 凡例、データマーカー、データラベル、注釈、トレンドライン、テクニカル指標、ストリップライン
• データバインディング： ローカル配列、リモートデータ（OData、DataManager）、JSON ソース、動的更新
• カスタマイズ： テーマ、CSS スタイル、カラーパレット、レスポンシブデザイン、アニメーション
• エクスポートと印刷： PDF、SVG、PNG、JPEG、CSV、XLSX 形式へのエクスポート
• アクセシビリティ： WCAG 準拠、キーボード操作、ARIA 属性、国際化、RTL 対応

このスキルの品質基準

このスキルのドキュメントは、正確性と本番環境での利用に適した品質を保証するため、厳格な品質基準に従っています。

✅ API の正確性に関する基準

• プロパティ名： Syncfusion v33+ の正確な API プロパティ名を使用します（例：legend ではなく legendSettings）
• 型安全性： すべてのコード例で、@syncfusion/ej2-angular-charts の TypeScript 型を明示的に使用します
• 検証： すべてのプロパティを公式のSyncfusion API ドキュメントと照合して検証します
• 推測の禁止： プロパティ名を推測せず、必ず最初に公式ドキュメントを確認します

✅ コード品質に関する基準

• TypeScript の厳密モード： すべての例が "strict": true でコンパイルできます
• any 型の不使用： 緩い型指定を使わず、型を 100% 明示します
• テスト済みの例： コード例は実際の Angular プロジェクトでテスト済みです
• インポート文： 必要な型をすべて明示的にインポートします

✅ ドキュメントに関する基準

• 明確なプロパティ名： テンプレートのプロパティ名と TypeScript のプロパティ名を明確に区別します
• 型宣言： 各プロパティの TypeScript 型モデルを記載します
• よくある誤りのセクション： 各機能に「❌ これはしないでください」という例を含めます
• 関連プロパティ： 関連する設定へのリンクと相互参照を記載します

🔍 よくある落とし穴（失敗から学ぶ）

❌ 誤り	✅ 正しい例	理由
[legend]	[legendSettings]	設定オブジェクトには Settings サフィックスを使用する必要があります
型が宣言されていない	public legendSettings: LegendSettingsModel = {...}	型安全性により、IDE の IntelliSense を利用できます
[tooltips]	[tooltip]	複数形ではなく単数形を使用します
グローバルなマーカー設定	系列ごとのマーカー設定	マーカーは系列固有です

参照： 完全なリファレンスはプロパティマッピングガイドをご覧ください
開発者向け： このドキュメントの保守方法については、スキル開発ガイドをご覧ください

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください：

• Angular プロジェクトに Chart コンポーネントをインストールしてセットアップする
• 前提条件とシステム要件を確認する
• @syncfusion/ej2-angular-charts パッケージを追加する
• CSS テーマとインポートを設定する
• 最初の基本的なチャートを作成する
• チャートモジュールの構造を理解する

系列の種類

📄 参照： references/series-types.md

次のような場合に参照してください：

• データに適したチャートの種類を選ぶ
• 折れ線系列（折れ線、ステップ折れ線、スプライン、積み上げ、複数色）を実装する
• 面チャート（面、積み上げ、100％積み上げ、範囲、スプライン範囲）を作成する
• 縦棒チャートと横棒チャート（縦棒、横棒、積み上げ、範囲）を作成する
• 財務データを可視化する（ローソク足、hilo、hilo-open-close）
• 統計チャート（箱ひげ図、ヒストグラム、パレート図、誤差範囲）を使用する
• 特殊なチャート（散布図、バブル、極座標、レーダー、ウォーターフォール、縦方向）を作成する
• 1 つのチャートに複数の系列の種類を組み合わせる

チャート要素

📄 参照： references/chart-elements.md

次のような場合に参照してください：

• 凡例を設定してカスタマイズする（位置、テンプレート、スタイル）
• データマーカーを追加してポイントを強調する（形状、サイズ、表示設定）
• チャート要素にデータラベルを表示する（位置、テンプレート、書式設定）
• カスタム注釈を追加する（指定した座標へのテキスト、図形、画像の配置）
• トレンドラインを含める（線形、指数、多項式、移動平均）
• テクニカル指標を追加する（RSI、MACD、ボリンジャーバンド、EMA、SMA）
• ストリップラインで特定の範囲を強調する
• 系列にグラデーション塗りつぶしを適用する

軸とレイアウト

📄 参照： references/axes-and-layout.md

次のような場合に参照してください：

• 軸の種類を設定する（数値、日時、対数、カテゴリ）
• 主軸と副軸を設定する
• 異なるデータスケール用に複数の軸を追加する
• 軸ラベルを書式設定する（回転、配置、複数レベルのラベル）
• グリッド線と目盛りをカスタマイズする
• 軸の交差と反転軸を実装する
• 複数ペインを持つチャートを作成する
• チャートのタイトル、サブタイトル、サイズを設定する
• チャートの余白とパディングを設定する

インタラクティブ機能

📄 参照： references/interactive-features.md

次のような場合に参照してください：

• ズームを有効にする（選択範囲ズーム、マウスホイールズーム、ピンチズーム、ズームツールバー）
• ズームしたチャートを移動するためのパンを実装する
• ツールチップを追加する（デフォルト、カスタムテンプレート、共有ツールチップ）
• クロスヘアを有効にして値を正確に読み取る
• トラックボールで複数系列のポイントを追跡する
• 選択を実装する（ポイント、系列、クラスター、ドラッグ選択）
• ポイントをドラッグしてデータを編集できるようにする
• 複数のチャートを同期して連動した操作を実現する

WebMCP と AI エージェントの統合

📄 参照： references/webmcp-feature-spec.md

次の作業が必要な場合に、このリファレンスを使用してください。

• enableWebMcp で Chart WebMCP の統合を有効にする。
• webMcpSettings で自動登録を設定する。
• すべての組み込みツールを登録するか、特定のツールを選択する。
• 描画する Chart、選択したツール、許可された変更に必要なインポートとプロバイダーのみを含む、目的に特化したサンプルを生成する。
• 必要な Chart 機能セット全体を含む、制限のない機能紹介用サンプルを生成する。
• ChartModule をインポートし、WebMcpChartService を提供する。
• 37 個の組み込み WebMCP ツールそれぞれに必要な Angular サービスを特定する。
• 検証、確認、キャンセル、カスタムのキャンセル応答のために beforeWebMcpToolExecute を設定する。
• 診断、テスト、または直接実行のために、getWebMcpTools() で実行可能なツールを取得する。
• 有効な入力スキーマと JSON セーフな実行応答を備えたカスタム WebMCP ツールを作成する。
• 手動登録ボタン、registerWebMcpTools() の呼び出し、偽のモデルコンテキスト UI、捏造したツール応答など、サポートされていないパターンを避ける。

データバインディング

📄 参照： references/data-binding.md

次の作業が必要な場合：

• ローカルデータ（オブジェクトの配列、JSON）をバインドする
• リモートデータソース（OData、RESTful API）に接続する
• 高度なデータ操作に DataManager を使用する
• 動的なデータ更新とリアルタイムデータを処理する
• 空のポイントと null 値を処理する
• データフィールドをチャートのプロパティにマッピングする
• 大規模なデータセットのパフォーマンスを最適化する
• 非同期のデータ読み込みを処理する

カスタマイズ

📄 参照： references/customization.md

次の作業が必要な場合：

• 組み込みテーマ（Material、Bootstrap、Fabric、Tailwind など）を適用する
• CSS でチャートの外観をカスタマイズする
• Theme Studio でカスタムテーマを生成する
• 系列のカラーパレットを設定する
• カスタムカラーやパターンで個々の系列をスタイル設定する
• さまざまな画面サイズに対応したレスポンシブデザインを実装する
• チャートの背景、枠線、領域を設定する
• アニメーション効果をカスタマイズする

アクセシビリティ

📄 参照： references/accessibility.md

次の作業が必要な場合：

• WCAG 2.0/2.1 に準拠したチャートを実装する
• キーボード操作（矢印キー、タブ、Enter）を有効にする
• スクリーンリーダー向けに ARIA 属性を設定する
• 適切な色のコントラストとフォーカスインジケーターを確保する
• ハイコントラストテーマに対応する

プロパティマッピングガイド

📄 参照： references/property-mapping-guide.md

⚠️ まずはこちらをご覧ください 次のような場合：

• どのプロパティを使用すべきか分からない
• Settings サフィックスの規則を理解したい
• どのプロパティがチャートレベルか系列レベルかを知りたい
• よくある API の命名ミスを避けたい
• すべてのプロパティの TypeScript 型情報が必要

主なリソース：

• ✅/❌ の比較を含む、完全なプロパティマッピング表
• よくある命名上の落とし穴（legend と legendSettings の違い）
• 型安全な実装パターン
• 新しいプロパティの QA 検証チェックリスト

スキル開発ガイド

📄 参照： references/skill-development-guide.md

スキル開発者およびコントリビューター向け：

• スキルのドキュメントを改善するための 4 つの主要領域
• legendSettings のケーススタディ（問題点と修正方法）
• API の正確性を検証するプロセス
• リリース前のドキュメント向け QA チェックリスト
• 避けるべきよくある落とし穴
• 複数の言語に対応する国際化（i18n）の実装
• 地域ごとの形式に対応するローカライズ（l10n）の有効化
• 対象言語に適した RTL（右から左へ）のサポート追加
• 高度なアクセシビリティ機能の設定

高度な機能

📄 参照： references/advanced-features.md

次の操作が必要な場合：

• チャートイベント（load、loaded、pointClick、seriesRender、axisLabelRender など）を処理する
• チャートをエクスポートする（PDF、SVG、PNG、JPEG、CSV、XLSX）
• 印刷機能を実装する
• ツリーシェイキングのためのモジュール注入について理解する
• さまざまなレンダリング方式（SVG、Canvas）を使用する
• アニメーション設定を構成する
• 空のポイントの表示モードを処理する
• チャート API メソッドにプログラムからアクセスする
• 高度なイベント駆動型のインタラクションを実装する
• WebMCP ツールを通じて、チャートをブラウザーのモデルコンテキストと統合する

よく使われるパターンと例

📄 参照： references/common-patterns.md

次の操作が必要な場合：

• よくあるユースケースの完全な例を確認する
• トレンド分析ダッシュボードを構築する
• テクニカル指標付きの金融株価チャートを作成する
• ライブ更新によるリアルタイムデータ監視を実装する
• 複数軸の比較チャートを構築する
• 分布分析の可視化を作成する
• よくある問題のトラブルシューティング方法を見つける
• パフォーマンス最適化のテクニックを学ぶ
• EJ1 から EJ2 Chart に移行する
• チャート実装のベストプラクティスに従う

クイックスタートの例

基本的な折れ線チャートを作成する最小限の例を示します。

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { CategoryService, LineSeriesService, DateTimeService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';

@Component({
imports: [ ChartModule ],
providers: [ CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
        SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis'
    [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
     public primaryXAxis?: Object;
      public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = [
          { month: 'Jan', sales: 35 },
          { month: 'Feb', sales: 28 },
          { month: 'Mar', sales: 34 },
          { month: 'Apr', sales: 32 },
          { month: 'May', sales: 40 },
          { month: 'Jun', sales: 32 },
          { month: 'Jul', sales: 35 },
          { month: 'Aug', sales: 55 },
          { month: 'Sep', sales: 38 },
          { month: 'Oct', sales: 30 },
          { month: 'Nov', sales: 25 },
          { month: 'Dec', sales: 32 }
      ];
        this.primaryXAxis = {
            interval: 1,
            valueType: 'Category',
        };
        this.primaryYAxis =
        {
            title: 'Sales',
        },
        this.title = 'Monthly Sales Comparison';
    }
}

よく使われるパターン

パターン 1：複数系列の比較チャート

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { CategoryService, BarSeriesService, ColumnSeriesService, LineSeriesService, LegendService, DataLabelService, MultiLevelLabelService, SelectionService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';

@Component({
imports: [ ChartModule ],
providers: [ CategoryService, BarSeriesService, ColumnSeriesService, LineSeriesService,LegendService, DataLabelService, MultiLevelLabelService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='gold'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = [
              { country: "USA", gold: 50, silver: 70, bronze: 45 },
              { country: "China", gold: 40, silver: 60, bronze: 55 },
              { country: "Japan", gold: 70, silver: 60, bronze: 50 },
              { country: "Australia", gold: 60, silver: 56, bronze: 40 },
              { country: "France", gold: 50, silver: 45, bronze: 35 },
              { country: "Germany", gold: 40, silver: 30, bronze: 22 },
              { country: "Italy", gold: 40, silver: 35, bronze: 37 },
              { country: "Sweden", gold: 30, silver: 25, bronze: 27 }
        ];
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries'
        };
        this.primaryYAxis = {
            minimum: 0, maximum: 80,
            interval: 20, title: 'Medals'
        };
        this.title = 'Olympic Medals';
    }
}

パターン 2：ズームとツールチップを備えたインタラクティブなチャート

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService, ZoomService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [ ChartModule ],
providers: [ DateTimeService, ZoomService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public marker?: Object;
    public tooltip?: Object;
    public zoom?: Object;
    ngOnInit(): void {
      this.chartData = [
              { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
              { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
              { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
              { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
              { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
              { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
              { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
              { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ];
      this.primaryXAxis = {
          valueType: 'DateTime',
      };
      this.zoom = {
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true
        };
      this.tooltip = { enable: true };
      this.marker = { visible: true, width: 10, height: 10 };
      this.title = 'Unemployment Rates 1975-2010';
  }
}

パターン 3：金融株価チャート

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { CategoryService, CandleSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';

@Component({
imports: [ ChartModule ],
providers: [CategoryService, CandleSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Candle' xName='x' high='high' low='low' open='open' close='close' name='SHIRPUR-G'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    ngOnInit(): void {
        this.data = [
            { x: 'Jan', open: 120, high: 160, low: 100, close: 140 },
            { x: 'Feb', open: 150, high: 190, low: 130, close: 170 },
            { x: 'Mar', open: 130, high: 170, low: 110, close: 150 },
            { x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
            { x: 'May', open: 150, high: 170, low: 110, close: 130 }
            ];
        this.primaryXAxis = {
            title: 'Date',
            valueType: 'Category',
            };
        this.primaryYAxis = {
            title: 'Price', minimum: 100, maximum: 200, interval: 20,
            };
        this.title = 'Shirpur Gold Refinery Share Price';
    }
}

主な設定オプション

系列の設定

• type：チャートの種類（Line、Column、Bar、Area、Scatter など）
• dataSource：系列のデータ配列
• xName、yName：x 値と y 値のプロパティ名
• name：凡例に表示する系列名
• marker：データポイントのマーカー設定
• fill：系列の色

軸の設定

• valueType：軸の種類（Double、DateTime、Category、Logarithmic）
• title：軸のタイトルテキスト
• minimum、maximum：軸の範囲
• interval：ラベルの間隔
• labelFormat：ラベルの書式文字列
• opposedPosition：軸を反対側に配置する設定

チャートの設定

• title：チャートのタイトル
• width、height：チャートのサイズ
• theme：組み込みテーマ名
• background：チャートの背景色
• legendSettings：凡例の設定
• zoomSettings：ズームの設定
• tooltip：ツールチップの設定

よくあるユースケース

1. ビジネスダッシュボード： KPI、売上の推移、収益の比較を表示します
2. 金融アプリケーション： 株価チャート、ポートフォリオのパフォーマンス、テクニカル分析に使用します
3. 分析プラットフォーム： ユーザー行動、トラフィック分析、コンバージョンファネルを扱います
4. 科学的可視化： 実験データ、統計分布、相関分析を扱います
5. 監視システム： リアルタイムのメトリクス、システムのパフォーマンス、IoT データを扱います
6. レポートツール： レポートの自動生成、データのエクスポート、スケジュールされた可視化に使用します
7. 教育アプリケーション： 数学グラフ、統計教育、データサイエンスのデモに使用します

次のステップ

基本的なチャートを作成したら：

• 可視化するデータに適したさまざまな系列の種類を確認する
• ズームやツールチップなどのインタラクティブ機能を追加して、ユーザー体験を向上させる
• テーマやスタイルで外観をカスタマイズする
• 動的なデータソースに対応するデータバインディングを実装する
• すべてのユーザーが利用できるよう、アクセシビリティ要件への準拠を確認する
• 可視化を共有するためのエクスポートおよび印刷機能を追加する

詳細な実装ガイダンスについては、上記のナビゲーションガイドに記載されている各リファレンスファイルを参照してください。

API リファレンスドキュメント

📄 API ガイド全文： references/api-reference.md

Syncfusion Angular Chart コンポーネントには、200 以上の API ドキュメントファイルが用意されています。内容は次のとおりです。

• コア API： ChartModel（40 以上のプロパティ）、AxisModel（50 以上のプロパティ）、SeriesDirective（60 以上のプロパティ）
• チャート要素： 凡例、マーカー、データラベル、ツールチップ、注釈、トレンドライン、テクニカルインジケーター、ストリップライン
• インタラクティブ機能： ズーム、パン、クロスヘア、選択、ドラッグ設定
• AI 統合： WebMCP の有効化、設定、ツールの登録、ツールの実行、確認、クリーンアップ
• イベント： 40 以上のイベントインターフェイス（ILoadedEventArgs、IPointRenderEventArgs、IZoomingEventArgs など）
• 列挙型： 50 以上の列挙型（ChartSeriesType、ValueType、ChartTheme、SelectionMode、ExportType など）
• ユーティリティ： BorderModel、FontModel、MarginModel、AnimationModel など

すべての API ドキュメントは https://ej2.syncfusion.com/angular/documentation/api/chart/ で確認できます。API の包括的なナビゲーションとドキュメント構成については、references/api-reference.md を参照してください。

各リファレンスガイド（getting-started.md、series-types.md、axes-and-layout.md など）では、本文全体を通じて公式オンライン API ドキュメントにリンクしています。