エージェント型開発を探求する -

Notebook API

Notebook API を使用すると、Visual Studio Code 拡張機能でファイルをノートブックとして開き、ノートブックのコードセルを実行し、リッチでインタラクティブなさまざまな形式でノートブックの出力をレンダリングできます。Jupyter Notebook や Google Colab といった一般的なノートブックインターフェイスをご存知かもしれませんが、Notebook API を使用することで、Visual Studio Code 内でも同様の体験を実現できます。

ノートブックの構成要素

ノートブックは、一連のセルとその出力で構成されます。ノートブックのセルにはマークダウンセルとコードセルがあり、VS Code のコア内でレンダリングされます。出力形式はさまざまです。プレーンテキスト、JSON、画像、HTML などの一部の出力形式は、VS Code コアによってレンダリングされます。アプリケーション固有のデータやインタラクティブなアプレットなど、その他の形式は拡張機能によってレンダリングされます。

ノートブック内のセルは、NotebookSerializer によってファイルシステムとの読み書きが行われます。これは、ファイルシステムからのデータの読み取りとセルの記述への変換、およびノートブックに対する変更をファイルシステムに永続化する処理を担います。ノートブックのコードセルは NotebookController によって実行できます。これはセルの内容を受け取り、プレーンテキストからフォーマットされたドキュメントやインタラクティブなアプレットまで、さまざまな形式でゼロ個以上の出力を生成します。アプリケーション固有の出力形式やインタラクティブなアプレットの出力は、NotebookRenderer によってレンダリングされます。

視覚的な構造

Overview of 3 components of notebooks: NotebookSerializer, NotebookController, and NotebookRenderer, and how they interact. Described textually above and in following sections.

シリアライザー (Serializer)

NotebookSerializer API リファレンス

NotebookSerializer は、ノートブックのシリアル化されたバイト列を受け取り、それをマークダウンセルとコードセルのリストを含む NotebookData に逆シリアル化する役割を担います。また、その逆の変換、つまり NotebookData を保存用のシリアル化されたバイト列に変換する役割も担います。

サンプル

  • JSON Notebook Serializer: JSON 入力を受け取り、カスタム NotebookRenderer で整形された JSON を出力するシンプルなノートブックのサンプル。
  • Markdown Serializer: マークダウンファイルをノートブックとして開き、編集します。

例

この例では、Jupyter Notebook 形式のファイルを（従来の .ipynb ではなく）.notebook 拡張子で表示するための、シンプルなノートブックプロバイダー拡張機能を作成します。

ノートブックシリアライザーは、package.json の contributes.notebooks セクションで以下のように宣言されます。

{
    ...
    "contributes": {
        ...
        "notebooks": [
            {
                "type": "my-notebook",
                "displayName": "My Notebook",
                "selector": [
                    {
                        "filenamePattern": "*.notebook"
                    }
                ]
            }
        ]
    }
}

その後、ノートブックシリアライザーは拡張機能の起動イベントで登録されます。

import { TextDecoder, TextEncoder } from 'util';
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.workspace.registerNotebookSerializer('my-notebook', new SampleSerializer())
  );
}

interface RawNotebook {
  cells: RawNotebookCell[];
}

interface RawNotebookCell {
  source: string[];
  cell_type: 'code' | 'markdown';
}

class SampleSerializer implements vscode.NotebookSerializer {
  async deserializeNotebook(
    content: Uint8Array,
    _token: vscode.CancellationToken
  ): Promise<vscode.NotebookData> {
    var contents = new TextDecoder().decode(content);

    let raw: RawNotebookCell[];
    try {
      raw = (<RawNotebook>JSON.parse(contents)).cells;
    } catch {
      raw = [];
    }

    const cells = raw.map(
      item =>
        new vscode.NotebookCellData(
          item.cell_type === 'code'
            ? vscode.NotebookCellKind.Code
            : vscode.NotebookCellKind.Markup,
          item.source.join('\n'),
          item.cell_type === 'code' ? 'python' : 'markdown'
        )
    );

    return new vscode.NotebookData(cells);
  }

  async serializeNotebook(
    data: vscode.NotebookData,
    _token: vscode.CancellationToken
  ): Promise<Uint8Array> {
    let contents: RawNotebookCell[] = [];

    for (const cell of data.cells) {
      contents.push({
        cell_type: cell.kind === vscode.NotebookCellKind.Code ? 'code' : 'markdown',
        source: cell.value.split(/\r?\n/g)
      });
    }

    return new TextEncoder().encode(JSON.stringify(contents));
  }
}

それでは、拡張機能を実行し、.notebook 拡張子で保存された Jupyter Notebook 形式のファイルを開いてみてください。

Notebook showing contents of a Jupyter Notebook formatted file

Jupyter 形式のノートブックを開き、そのセルをプレーンテキストおよびレンダリングされたマークダウンの両方として表示し、編集できるようになっているはずです。ただし、出力はディスクに永続化されません。出力を保存するには、NotebookData からセルの出力をシリアル化および逆シリアル化する処理も追加する必要があります。

セルを実行するには、NotebookController を実装する必要があります。

コントローラー (Controller)

NotebookController API リファレンス

NotebookController は、コードセルを受け取り、そのコードを実行して出力を生成（または生成しない）する役割を担います。

コントローラーは、作成時に NotebookController#notebookType プロパティを設定することで、特定のノートブックシリアライザーおよびノートブックタイプと直接関連付けられます。その後、コントローラーがアクティブになったときに拡張機能のサブスクリプションにコントローラーをプッシュすることで、グローバルに登録されます。

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(new Controller());
}

class Controller {
  readonly controllerId = 'my-notebook-controller-id';
  readonly notebookType = 'my-notebook';
  readonly label = 'My Notebook';
  readonly supportedLanguages = ['python'];

  private readonly _controller: vscode.NotebookController;
  private _executionOrder = 0;

  constructor() {
    this._controller = vscode.notebooks.createNotebookController(
      this.controllerId,
      this.notebookType,
      this.label
    );

    this._controller.supportedLanguages = this.supportedLanguages;
    this._controller.supportsExecutionOrder = true;
    this._controller.executeHandler = this._execute.bind(this);
  }

  private _execute(
    cells: vscode.NotebookCell[],
    _notebook: vscode.NotebookDocument,
    _controller: vscode.NotebookController
  ): void {
    for (let cell of cells) {
      this._doExecution(cell);
    }
  }

  private async _doExecution(cell: vscode.NotebookCell): Promise<void> {
    const execution = this._controller.createNotebookCellExecution(cell);
    execution.executionOrder = ++this._executionOrder;
    execution.start(Date.now()); // Keep track of elapsed time to execute cell.

    /* Do some execution here; not implemented */

    execution.replaceOutput([
      new vscode.NotebookCellOutput([
        vscode.NotebookCellOutputItem.text('Dummy output text!')
      ])
    ]);
    execution.end(true, Date.now());
  }
}

NotebookController を提供する拡張機能をシリアライザーとは別に公開する場合は、その package.json の keywords に notebookKernel<ViewTypeUpperCamelCased> のようなエントリを追加してください。たとえば、github-issues ノートブックタイプ用の代替カーネルを公開する場合、notebookKernelGithubIssues というキーワードを拡張機能に追加する必要があります。これにより、Visual Studio Code 内で <ViewTypeUpperCamelCased> タイプのノートブックを開く際に、拡張機能が見つかりやすくなります。

サンプル

  • GitHub Issues Notebook: GitHub Issue のクエリを実行するためのコントローラー
  • REST Book: REST クエリを実行するためのコントローラー。
  • Regexper notebooks: 正規表現を視覚化するためのコントローラー。

出力タイプ

出力は、テキスト出力、エラー出力、リッチ出力の3つの形式のいずれかでなければなりません。カーネルは、1回のセル実行に対して複数の出力を提供することができ、その場合はリストとして表示されます。

テキスト出力、エラー出力、またはリッチ出力の「単純な」バリアント（HTML、Markdown、JSON など）のような単純な形式は VS Code コアによってレンダリングされますが、アプリケーション固有のリッチ出力タイプは NotebookRenderer によってレンダリングされます。拡張機能は、例えばマークダウン出力に LaTeX サポートを追加するなど、必要に応じて「単純な」リッチ出力を自身でレンダリングすることも選択できます。

Diagram of the different output types described above

テキスト出力

テキスト出力は最も単純な出力形式であり、馴染みのある多くの REPL と同様に動作します。これらは text フィールドのみで構成され、セルの出力要素内にプレーンテキストとしてレンダリングされます。

vscode.NotebookCellOutputItem.text('This is the output...');

Cell with simple text output

エラー出力

エラー出力は、ランタイムエラーを一貫性のある理解しやすい方法で表示するのに役立ちます。標準の Error オブジェクトをサポートしています。

try {
  /* Some code */
} catch (error) {
  vscode.NotebookCellOutputItem.error(error);
}

Cell with error output showing error name and message, as well as a stack trace with magenta text

リッチ出力

リッチ出力は、セル出力を表示するための最も高度な形式です。MIMEタイプ別に、出力データのさまざまな表現を提供できます。たとえば、セル出力が GitHub Issue を表す場合、カーネルはその data フィールドに複数のプロパティを持つリッチ出力を生成するかもしれません。

  • Issue のフォーマットされたビューを含む text/html フィールド。
  • 機械可読なビューを含む text/x-json フィールド。
  • NotebookRenderer が Issue の完全にインタラクティブなビューを作成するために使用できる application/github-issue フィールド。

この場合、text/html および text/x-json ビューは VS Code によってネイティブにレンダリングされますが、application/github-issue ビューは、その MIMEタイプに登録された NotebookRenderer がない場合にエラーを表示します。

execution.replaceOutput([new vscode.NotebookCellOutput([
                            vscode.NotebookCellOutputItem.text('<b>Hello</b> World', 'text/html'),
                            vscode.NotebookCellOutputItem.json({ hello: 'world' }),
                            vscode.NotebookCellOutputItem.json({ custom-data-for-custom-renderer: 'data' }, 'application/custom'),
                        ])]);

Cell with rich output showing switching between formatted HTML, a JSON editor, and an error message showing no renderer is available (application/hello-world)

デフォルトでは、VS Code は以下の MIMEタイプをレンダリングできます。

  • application/javascript
  • text/html
  • image/svg+xml
  • text/markdown
  • image/png
  • image/jpeg
  • text/plain

VS Code は、これらの MIMEタイプを組み込みエディター内のコードとしてレンダリングします。

  • text/x-json
  • text/x-javascript
  • text/x-html
  • text/x-rust
  • ... その他、組み込みまたはインストール済みの言語に対応する text/x-LANGUAGE_ID。

このノートブックは、組み込みエディターを使用して Rust コードを表示しています: 組み込みの Monaco エディターで Rust コードを表示しているノートブック

別の MIMEタイプをレンダリングするには、その MIMEタイプに対して NotebookRenderer を登録する必要があります。

ノートブックレンダラー (Notebook Renderer)

ノートブックレンダラーは、特定の MIMEタイプの出力データを受け取り、そのデータのレンダリングされたビューを提供する役割を担います。出力セル間で共有されるレンダラーは、セル間でグローバルな状態を保持できます。レンダリングされたビューの複雑さは、単純な静的 HTML から動的で完全にインタラクティブなアプレットまで多岐にわたります。このセクションでは、GitHub Issue を表す出力をレンダリングするためのさまざまなテクニックを探ります。

Yeoman ジェネレーターからのボイラープレートを使用して、すぐに開始できます。まず、Yeoman と VS Code ジェネレーターを以下のようにインストールします。

npm install -g yo generator-code

次に、yo code を実行し、New Notebook Renderer (TypeScript) を選択します。

このテンプレートを使用しない場合は、拡張機能の package.json の keywords に notebookRenderer を追加し、ユーザーがレンダラーを見つけられるように拡張機能の名前や説明のどこかにその MIMEタイプを記載してください。

シンプルで非インタラクティブなレンダラー

レンダラーは、拡張機能の package.json の contributes.notebookRenderer プロパティに寄与することで、MIMEタイプのセットに対して宣言されます。このレンダラーは、ms-vscode.github-issue-notebook/github-issue 形式の入力を扱います（これはインストールされたコントローラーが提供できるものと仮定します）。

{
  "activationEvents": ["...."],
  "contributes": {
    ...
    "notebookRenderer": [
      {
        "id": "github-issue-renderer",
        "displayName": "GitHub Issue Renderer",
        "entrypoint": "./out/renderer.js",
        "mimeTypes": [
          "ms-vscode.github-issue-notebook/github-issue"
        ]
      }
    ]
  }
}

出力レンダラーは常に VS Code の他の UI から分離された単一の iframe 内でレンダリングされ、VS Code と干渉したり低速化の原因になったりしないようにします。このコントリビューションは、出力がレンダリングされる直前にノートブックの iframe に読み込まれる「エントリポイント」スクリプトを参照します。エントリポイントは単一のファイルである必要があり、自分で作成することも、Webpack、Rollup、Parcel などのバンドラーを使用して作成することもできます。

読み込まれると、エントリポイントスクリプトは VS Code がレンダリングの準備ができたときに UI をレンダリングするために、vscode-notebook-renderer から ActivationFunction をエクスポートする必要があります。たとえば、以下はすべての GitHub Issue データを JSON としてセル出力に配置します。

import type { ActivationFunction } from 'vscode-notebook-renderer';

export const activate: ActivationFunction = context => ({
  renderOutputItem(data, element) {
    element.innerText = JSON.stringify(data.json());
  }
});

完全な API 定義はこちらを参照してください。TypeScript を使用している場合は、@types/vscode-notebook-renderer をインストールし、tsconfig.json の types 配列に vscode-notebook-renderer を追加することで、コード内でこれらの型を利用できるようになります。

よりリッチなコンテンツを作成するには、DOM 要素を手動で作成するか、Preact などのフレームワークを使用して出力要素にレンダリングします。例：

import type { ActivationFunction } from 'vscode-notebook-renderer';
import { h, render } from 'preact';

const Issue: FunctionComponent<{ issue: GithubIssue }> = ({ issue }) => (
  <div key={issue.number}>
    <h2>
      {issue.title}
      (<a href={`https://github.com/${issue.repo}/issues/${issue.number}`}>#{issue.number}</a>)
    </h2>
    <img src={issue.user.avatar_url} style={{ float: 'left', width: 32, borderRadius: '50%', marginRight: 20 }} />
    <i>@{issue.user.login}</i> Opened: <div style="margin-top: 10px">{issue.body}</div>
  </div>
);

const GithubIssues: FunctionComponent<{ issues: GithubIssue[]; }> = ({ issues }) => (
  <div>{issues.map(issue => <Issue key={issue.number} issue={issue} />)}</div>
);

export const activate: ActivationFunction = (context) => ({
    renderOutputItem(data, element) {
        render(<GithubIssues issues={data.json()} />, element);
    }
});

ms-vscode.github-issue-notebook/github-issue データフィールドを持つ出力セルでこのレンダラーを実行すると、以下の静的 HTML ビューが得られます。

Cell output showing rendered HTML view of issue

コンテナーの外側に要素がある場合やその他の非同期プロセスがある場合は、disposeOutputItem を使用してそれらを破棄できます。このイベントは、出力がクリアされたとき、セルが削除されたとき、および既存のセルに対して新しい出力がレンダリングされる前に発生します。例：

const intervals = new Map();

export const activate: ActivationFunction = (context) => ({
    renderOutputItem(data, element) {
        render(<GithubIssues issues={data.json()} />, element);

        intervals.set(data.mime, setInterval(() => {
            if(element.querySelector('h2')) {
                element.querySelector('h2')!.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
            }
        }, 1000));
    },
    disposeOutputItem(id) {
        clearInterval(intervals.get(id));
        intervals.delete(id);
    }
});

ノートブックのすべての出力は、同じ iframe 内の異なる要素でレンダリングされることに注意してください。document.querySelector などの関数を使用する場合は、他の出力と競合しないように、対象とする特定の出力にスコープを限定してください。この例では、その問題を回避するために element.querySelector を使用しています。

インタラクティブなノートブック（コントローラーとの通信）

レンダリングされた出力内のボタンをクリックした後に Issue のコメントを表示する機能を追加したいとします。コントローラーが ms-vscode.github-issue-notebook/github-issue-with-comments MIMEタイプでコメント付きの Issue データを提供できると仮定して、最初にすべてのコメントを取得して実装してみます。

const Issue: FunctionComponent<{ issue: GithubIssueWithComments }> = ({ issue }) => {
  const [showComments, setShowComments] = useState(false);

  return (
    <div key={issue.number}>
      <h2>
        {issue.title}
        (<a href={`https://github.com/${issue.repo}/issues/${issue.number}`}>#{issue.number}</a>)
      </h2>
      <img src={issue.user.avatar_url} style={{ float: 'left', width: 32, borderRadius: '50%', marginRight: 20 }} />
      <i>@{issue.user.login}</i> Opened: <div style="margin-top: 10px">{issue.body}</div>
      <button onClick={() => setShowComments(true)}>Show Comments</button>
      {showComments && issue.comments.map(comment => <div>{comment.text}</div>)}
    </div>
  );
};

これにはいくつかの問題があります。第一に、ボタンをクリックする前であっても、すべての Issue の完全なコメントデータを読み込んでいます。第二に、単にデータを少し表示したいだけなのに、コントローラーがまったく別の MIMEタイプをサポートする必要があります。

代わりに、コントローラーは、VS Code が iframe 内に読み込むプリロードスクリプトを含めることで、レンダラーに追加機能を提供できます。このスクリプトは、コントローラーとの通信に使用できるグローバル関数 postKernelMessage および onDidReceiveKernelMessage にアクセスできます。

Diagram showing how controllers interact with renderers through the NotebookRendererScript

たとえば、コントローラーの rendererScripts を、Extension Host への接続を作成し、レンダラーが使用するグローバル通信スクリプトを公開する新しいファイルを参照するように変更できます。

コントローラー側：

class Controller {
  // ...

  readonly rendererScriptId = 'my-renderer-script';

  constructor() {
    // ...

    this._controller.rendererScripts.push(
      new vscode.NotebookRendererScript(
        vscode.Uri.file(/* path to script */),
        rendererScriptId
      )
    );
  }
}

package.json で、スクリプトをレンダラーの依存関係として指定します。

{
  "activationEvents": ["...."],
  "contributes": {
    ...
    "notebookRenderer": [
      {
        "id": "github-issue-renderer",
        "displayName": "GitHub Issue Renderer",
        "entrypoint": "./out/renderer.js",
        "mimeTypes": [...],
        "dependencies": [
            "my-renderer-script"
        ]
      }
    ]
  }
}

スクリプトファイル内で、コントローラーと通信するための通信関数を宣言できます。

import 'vscode-notebook-renderer/preload';

globalThis.githubIssueCommentProvider = {
  loadComments(issueId: string, callback: (comments: GithubComment[]) => void) {
    postKernelMessage({ command: 'comments', issueId });

    onDidReceiveKernelMessage(event => {
      if (event.data.type === 'comments' && event.data.issueId === issueId) {
        callback(event.data.comments);
      }
    });
  }
};

そして、それをレンダラーで利用できます。他の開発者が githubIssueCommentProvider を実装していない他のノートブックやコントローラーで GitHub Issue の出力を作成する可能性があるため、コントローラーのレンダースクリプトによって公開されたグローバル変数が利用可能かどうかを必ず確認してください。この場合、グローバル変数が利用可能な場合にのみ、コメントを読み込むボタンを表示するようにします。

const canLoadComments = globalThis.githubIssueCommentProvider !== undefined;
const Issue: FunctionComponent<{ issue: GithubIssue }> = ({ issue }) => {
  const [comments, setComments] = useState([]);
  const loadComments = () =>
    globalThis.githubIssueCommentProvider.loadComments(issue.id, setComments);

  return (
    <div key={issue.number}>
      <h2>
        {issue.title}
        (<a href={`https://github.com/${issue.repo}/issues/${issue.number}`}>#{issue.number}</a>)
      </h2>
      <img src={issue.user.avatar_url} style={{ float: 'left', width: 32, borderRadius: '50%', marginRight: 20 }} />
      <i>@{issue.user.login}</i> Opened: <div style="margin-top: 10px">{issue.body}</div>
      {canLoadComments && <button onClick={loadComments}>Load Comments</button>}
      {comments.map(comment => <div>{comment.text}</div>)}
    </div>
  );
};

最後に、コントローラーとの通信をセットアップします。NotebookController.onDidReceiveMessage メソッドは、レンダラーがグローバルな postKernelMessage 関数を使用してメッセージを投稿したときに呼び出されます。このメソッドを実装するには、onDidReceiveMessage にアタッチしてメッセージをリッスンします。

class Controller {
  // ...

  constructor() {
    // ...

    this._controller.onDidReceiveMessage(event => {
      if (event.message.command === 'comments') {
        _getCommentsForIssue(event.message.issueId).then(
          comments =>
            this._controller.postMessage({
              type: 'comments',
              issueId: event.message.issueId,
              comments
            }),
          event.editor
        );
      }
    });
  }
}

インタラクティブなノートブック（Extension Host との通信）

出力項目を別のエディターで開く機能を追加したいとします。これを行うには、レンダラーが Extension Host にメッセージを送信し、その後でエディターを起動できるようにする必要があります。

これは、レンダラーとコントローラーが別々の拡張機能である場合に便利です。

レンダラー拡張機能の package.json で、requiresMessaging の値を optional に指定します。これにより、Extension Host へのアクセス権がある場合とない場合の両方の状況でレンダラーが機能するようになります。

{
  "activationEvents": ["...."],
  "contributes": {
    ...
    "notebookRenderer": [
      {
        "id": "output-editor-renderer",
        "displayName": "Output Editor Renderer",
        "entrypoint": "./out/renderer.js",
        "mimeTypes": [...],
        "requiresMessaging": "optional"
      }
    ]
  }
}

requiresMessaging に指定できる値は以下の通りです。

  • always: メッセージングが必須。レンダラーは、Extension Host で実行可能な拡張機能の一部である場合にのみ使用されます。
  • optional: Extension Host が利用可能な場合はメッセージングを使用するのが望ましいが、レンダラーのインストールと実行に必須ではない。
  • never: レンダラーはメッセージングを必要としない。

後者の2つのオプションが推奨されます。これにより、Extension Host が必ずしも利用可能ではない他のコンテキストへのレンダラー拡張機能の移植性が確保されるためです。

レンダラーのスクリプトファイルは、次のように通信をセットアップできます。

import { ActivationFunction } from 'vscode-notebook-renderer';

export const activate: ActivationFunction = (context) => ({
  renderOutputItem(data, element) {
    // Render the output using the output `data`
    ....
    // The availability of messaging depends on the value in `requiresMessaging`
    if (!context.postMessage){
      return;
    }

    // Upon some user action in the output (such as clicking a button),
    // send a message to the extension host requesting the launch of the editor.
    document.querySelector('#openEditor').addEventListener('click', () => {
      context.postMessage({
        request: 'showEditor',
        data: '<custom data>'
      })
    });
  }
});

そして、Extension Host でそのメッセージを次のように消費できます。

const messageChannel = notebooks.createRendererMessaging('output-editor-renderer');
messageChannel.onDidReceiveMessage(e => {
  if (e.message.request === 'showEditor') {
    // Launch the editor for the output identified by `e.message.data`
  }
});

注意

  • メッセージが配信される前に拡張機能が Extension Host で実行されていることを確認するには、activationEvents に onRenderer:<your renderer id> を追加し、拡張機能の activate 関数で通信をセットアップします。
  • レンダラー拡張機能から Extension Host に送信されるすべてのメッセージが確実に配信される保証はありません。レンダラーからのメッセージが配信される前に、ユーザーがノートブックを閉じる可能性があるためです。

デバッグのサポート

プログラミング言語を実装するコントローラーなど、一部のコントローラーでは、セルの実行をデバッグできるようにすることが望ましい場合があります。デバッグサポートを追加するには、ノートブックカーネルは、Debug Adapter Protocol (DAP) を直接実装するか、既存のノートブックデバッガーへの委譲とプロトコルの変換（'vscode-simple-jupyter-notebook' サンプルで行われている方法）を行うことで、デバッグアダプターを実装できます。よりシンプルなアプローチは、既存の未修正のデバッグ拡張機能を使用し、ノートブックのニーズに合わせて DAP をその場で変換することです（'vscode-nodebook' で行われている方法）。

サンプル

  • vscode-nodebook: VS Code の組み込み JavaScript デバッガーといくつかの単純なプロトコル変換によってデバッグサポートが提供される Node.js ノートブック。
  • vscode-simple-jupyter-notebook: 既存の Xeus デバッガーによってデバッグサポートが提供される Jupyter ノートブック。
4/8/2026
© . This site is unofficial and not affiliated with Microsoft.