Obsidianのプラグインを作成しようとしています。設定タブに3つのテキストエリアを作成するコードを作成してください。

Obsidianのプラグインを作成する際のコードの例を示します。ここでは、設定タブに3つのテキストエリアを追加する方法を示しています。

import { App, PluginSettingTab, Setting } from 'obsidian';

interface MyPluginSettings {
  textArea1: string;
  textArea2: string;
  textArea3: string;
}

const DEFAULT_SETTINGS: MyPluginSettings = {
  textArea1: '',
  textArea2: '',
  textArea3: ''
}

export default class MyPlugin extends Plugin {
  settings: MyPluginSettings;

  async onload() {
    await this.loadSettings();

    this.addSettingTab(new MySettingTab(this.app, this));
  }

  async loadSettings() {
    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
  }

  async saveSettings() {
    await this.saveData(this.settings);
  }
}

class MySettingTab extends PluginSettingTab {
  plugin: MyPlugin;

  constructor(app: App, plugin: MyPlugin) {
    super(app, plugin);
    this.plugin = plugin;
  }

  display(): void {
    let {containerEl} = this;

    containerEl.empty();

    new Setting(containerEl)
      .setName('Text Area 1')
      .setDesc('Description for Text Area 1')
      .addTextArea(text => {
        this.plugin.settings.textArea1 = text;
        this.plugin.saveSettings();
      });

    new Setting(containerEl)
      .setName('Text Area 2')
      .setDesc('Description for Text Area 2')
      .addTextArea(text => {
        this.plugin.settings.textArea2 = text;
        this.plugin.saveSettings();
      });

    new Setting(containerEl)
      .setName('Text Area 3')
      .setDesc('Description for Text Area 3')
      .addTextArea(text => {
        this.plugin.settings.textArea3 = text;
        this.plugin.saveSettings();
      });
  }
}

上記のコードでは、MyPluginクラスがプラグインの本体となります。onloadメソッドで設定を読み込み、addSettingTabメソッドで設定タブを追加しています。

MySettingTabクラスが設定タブのUIを構築する役割を担っています。displayメソッド内で、Settingクラスを使って3つのテキストエリアを作成しています。各テキストエリアの値は、プラグインの設定オブジェクト(this.plugin.settings)に保存され、入力があるたびにsaveSettingsメソッドが呼び出されて設定が保存されます。

テキストエリアのラベルと説明は、setNameとsetDescメソッドで設定できます。必要に応じて、スタイルの調整やバリデーションの追加などの変更を加えることができます。