やさしいアドベントカレンダー Advent Calendar 2025

Obsidianで自作プラグイン作成シリーズ第3弾（Wide Moder）

Posted at 2025-12-03

はじめに

こんにちは、小さな町工場でデータサイエンティストをしているココアです。

みなさんは、社内でobsidianを利用されておりますか？
私は、業務内の情報をすべてobsidianに入れており、コード管理やタスク管理、チームへの進捗報告などすべてobsidianで完結しています。

しかし、obsidianで進捗報告をする際に、一つ困ったポイントが、、
会議室等ででかいモニターに映しても、ノートの幅が一定でかつ、画像もせまい幅で表示されてしまい、結局画像だけはエクスプローラーで表示するといった、効率化とは対極のムーブをしてました。
（※ 少し調べたところ、obsidianのデフォルトの設定で変えられるようです）

といったように、Obsidianでノートを作成していると、画面共有の際に、サイドバーやUIが邪魔になることがあります。また、通常の執筆時も、画面幅いっぱいにノートを表示したい場面があります。

実は、Obsidianには「読みやすい行の長さ」という設定があり、これをオフにすることで全画面表示が可能ですが、毎回設定画面を開いて切り替えるのは面倒です。

エディタの読みやすい行の長さがデフォルトでONだと、、、

発表時に、サイドバーを閉じても、画像が大きく表示されない...
うーん、まいったまいった

発表時にOFFにすると、画像が大きく表示される！ばんざーい！

ただし、普段はこの読みやすい行の長さはONでいたい。なぜなら読みやすいから！
サイドバーにカレンダーや小さなタスク、CPとリバーシの対戦を配置している方も多いのではないでしょうか？

この問題を解決するため、ショートカットキーやリボンアイコンで簡単に全画面表示を切り替えられるObsidianプラグイン「Full Width Mode」を開発しました。本記事では、プラグインの機能と技術的な実装について解説します。

プラグインの機能

3つの表示モード

このプラグインは、Obsidianの表示を3つのモードで切り替えられます。

1. 標準モード（📏）

Obsidianのデフォルト状態です。

「読みやすい行の長さ」が有効
中央に適度な幅でノートを表示
長文の読み書きに最適

2. 全画面モード（📐）

ノートを画面幅いっぱいに表示します。

「読みやすい行の長さ」を無効化
サイドバー間の領域全体を使用
表やコードブロックなど横幅の広いコンテンツに最適
サイドバーは手動で開閉可能

3. 発表者モード（🎤）

プレゼンテーションに特化したモードです。

左右のサイドバーを自動的に閉じる
「読みやすい行の長さ」を無効化
ノートが画面幅いっぱいに表示
プレゼンテーションや画面共有に最適
モード解除時にサイドバーの状態を自動復元

操作方法

方法1: リボンアイコン

画面左端のリボンに2つのアイコンが追加されます。

📐 最大化アイコン：全画面モードの切り替え
🎤 プレゼンテーションアイコン：発表者モードの切り替え

ワンクリックで切り替えられます。

方法2: コマンドパレット

Ctrl/Cmd + Pでコマンドパレットを開き、以下のコマンドを実行できます。

Toggle Full Width Mode：全画面モードのトグル
Toggle Presenter Mode：発表者モードのトグル

方法3: ショートカットキー（推奨）

Obsidianの設定画面（「ホットキー」セクション）で、以下のコマンドに好きなキーを割り当てられます。

全画面モード

Toggle Full Width Mode：トグル切り替え
Enable Full Width Mode：全画面モードを有効化
Disable Full Width Mode：標準モードに戻す

発表者モード

Toggle Presenter Mode：トグル切り替え（推奨）
Enable Presenter Mode：発表者モードを有効化
Disable Presenter Mode：発表者モードを無効化

ステータスバー表示

画面右下のステータスバーに現在のモードが表示されます。

📏 標準：読みやすい行の長さが有効
📐 全画面：ノートが画面幅いっぱいに表示
🎤 発表者：サイドバーを閉じて全画面表示

これにより、現在のモードを一目で確認できます。

使用例

シーン1: プレゼンテーション

Obsidianで作成したスライドやノートをプレゼンテーションする場合：

発表者モードを有効化（🎤アイコンまたはショートカット）
サイドバーが自動的に閉じ、ノートが全画面表示される
プレゼンテーション終了後、発表者モードを無効化
サイドバーが元の状態に自動復元される

シーン2: 画面共有

オンラインミーティングで画面共有する場合：

発表者モードで余計なUIを非表示
ノートの内容に集中してもらえる
終了後は通常モードに戻す

シーン3: 表やコードの編集

横幅の広い表やコードブロックを編集する場合：

全画面モードに切り替え
画面幅いっぱいに表示されて作業しやすい
編集が終わったら標準モードに戻す

技術的な実装

開発環境

言語：TypeScript
ビルドツール：esbuild
ターゲット環境：Obsidian Plugin API

プロジェクト構成

fullwidth-mode/
├── main.ts              # メインロジック
├── manifest.json        # プラグインメタデータ
├── styles.css           # スタイルシート（予備）
├── package.json         # npm設定
├── tsconfig.json        # TypeScript設定
└── esbuild.config.mjs   # ビルド設定

データ構造の設計

プラグインの設定は、以下のインターフェースで管理しています。

interface FullWidthModeSettings {
  lastState: boolean;              // 最後の全画面モードの状態
  presenterMode: boolean;          // 発表者モードの状態
  savedLeftSidebarState: boolean;  // 左サイドバーの元の状態
  savedRightSidebarState: boolean; // 右サイドバーの元の状態
}

const DEFAULT_SETTINGS: FullWidthModeSettings = {
  lastState: false,
  presenterMode: false,
  savedLeftSidebarState: false,
  savedRightSidebarState: false
}

設計のポイント：

lastState：プラグインの前回の状態を保存（将来の拡張用）
presenterMode：発表者モードが有効かどうか
savedLeftSidebarState/savedRightSidebarState：サイドバーの元の状態を保存し、発表者モード解除時に復元

Obsidian設定APIへのアクセス

Obsidianの「読みやすい行の長さ」設定は、Vault APIを通じて制御できます。

getReadableLineLength(): boolean {
  // @ts-ignore - Obsidian APIの型定義にない可能性があるため
  return this.app.vault.getConfig('readableLineLength') ?? true;
}

setReadableLineLength(value: boolean) {
  // @ts-ignore - Obsidian APIの型定義にない可能性があるため
  this.app.vault.setConfig('readableLineLength', value);

  // 設定を保存
  this.settings.lastState = !value; // 全画面モード = readableLineLength false
  this.saveSettings();

  // 通知を表示
  const mode = value ? '読みやすい行の長さ' : '全画面モード';
  new Notice(`${mode}を有効にしました`);

  // ステータスバーを更新
  this.updateStatusBar();
}

ポイント：

readableLineLength: true：標準モード（読みやすい行の長さ有効）
readableLineLength: false：全画面モード（画面幅いっぱい）
TypeScriptの型チェックを回避するため@ts-ignoreを使用

全画面モードの実装

全画面モードのトグル切り替えは、シンプルに実装しています。

toggleReadableLineLength() {
  const currentValue = this.getReadableLineLength();
  const newValue = !currentValue;
  this.setReadableLineLength(newValue);
}

現在の状態を取得し、反転させて設定するだけです。

発表者モードの実装

発表者モードは、サイドバーの制御と全画面モードを組み合わせています。

発表者モードの有効化

enablePresenterMode() {
  // 現在のサイドバーの状態を保存
  this.settings.savedLeftSidebarState = this.app.workspace.leftSplit.collapsed;
  this.settings.savedRightSidebarState = this.app.workspace.rightSplit.collapsed;

  // 左右のサイドバーを閉じる
  this.app.workspace.leftSplit.collapse();
  this.app.workspace.rightSplit.collapse();

  // 読みやすい行の長さを無効化（全画面モード）
  // @ts-ignore
  this.app.vault.setConfig('readableLineLength', false);

  // 発表者モードを有効化
  this.settings.presenterMode = true;
  this.saveSettings();

  new Notice('発表者モードを有効にしました');
  this.updateStatusBar();
}

実装のポイント：

現在のサイドバーの状態を保存
左右のサイドバーを閉じる
全画面モードを有効化
発表者モードのフラグを立てる

発表者モードの無効化

disablePresenterMode() {
  // サイドバーを元の状態に復元
  if (!this.settings.savedLeftSidebarState) {
    this.app.workspace.leftSplit.expand();
  }
  if (!this.settings.savedRightSidebarState) {
    this.app.workspace.rightSplit.expand();
  }

  // 読みやすい行の長さを有効化（標準モード）
  // @ts-ignore
  this.app.vault.setConfig('readableLineLength', true);

  // 発表者モードを無効化
  this.settings.presenterMode = false;
  this.saveSettings();

  new Notice('発表者モードを無効にしました');
  this.updateStatusBar();
}

実装のポイント：

保存していたサイドバーの状態を確認
閉じていたサイドバーのみを開く
標準モードに戻す
発表者モードのフラグをクリア

このロジックにより、ユーザーの作業環境を尊重しながら発表者モードを提供できます。

トグル切り替えの実装

発表者モードのトグル切り替えは、現在の状態を判定して適切なメソッドを呼び出します。

togglePresenterMode() {
  if (this.settings.presenterMode) {
    this.disablePresenterMode();
  } else {
    this.enablePresenterMode();
  }
}

ステータスバーの実装

ステータスバーは、プラグイン読み込み時に作成し、状態変更時に更新します。

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

  // ステータスバーアイテムを追加
  this.statusBarItem = this.addStatusBarItem();
  this.updateStatusBar();

  // ... その他の初期化処理
}

updateStatusBar() {
  if (this.settings.presenterMode) {
    this.statusBarItem.setText('🎤 発表者');
  } else {
    const isFullWidth = !this.getReadableLineLength();
    this.statusBarItem.setText(isFullWidth ? '📐 全画面' : '📏 標準');
  }
}

表示のロジック：

発表者モードが有効な場合：🎤 発表者
それ以外で全画面モードの場合：📐 全画面
それ以外（標準モード）の場合：📏 標準

リボンアイコンの追加

左端のリボンに2つのアイコンを追加しています。

// リボンアイコンを追加（全画面モード）
const ribbonIconEl = this.addRibbonIcon(
  'maximize-2', 
  'Toggle Full Width Mode (読みやすい行の長さ)', 
  (evt: MouseEvent) => {
    this.toggleReadableLineLength();
  }
);
ribbonIconEl.addClass('fullwidth-mode-ribbon-class');

// リボンアイコンを追加（発表者モード）
const presenterRibbonIconEl = this.addRibbonIcon(
  'presentation', 
  'Toggle Presenter Mode (発表者モード)', 
  (evt: MouseEvent) => {
    this.togglePresenterMode();
  }
);
presenterRibbonIconEl.addClass('presenter-mode-ribbon-class');

使用アイコン：

maximize-2：最大化を表すアイコン（全画面モード）
presentation：プレゼンテーションを表すアイコン（発表者モード）

これらはObsidianに組み込まれているLucideアイコンです。

コマンドの登録

複数のコマンドを登録し、柔軟な操作方法を提供しています。

// 全画面モードのコマンド
this.addCommand({
  id: 'toggle-readable-line-length',
  name: 'Toggle Full Width Mode (読みやすい行の長さ)',
  callback: () => {
    this.toggleReadableLineLength();
  }
});

this.addCommand({
  id: 'enable-fullwidth-mode',
  name: 'Enable Full Width Mode (全画面モード)',
  callback: () => {
    this.setReadableLineLength(false);
  }
});

this.addCommand({
  id: 'disable-fullwidth-mode',
  name: 'Disable Full Width Mode (読みやすい行の長さ)',
  callback: () => {
    this.setReadableLineLength(true);
  }
});

// 発表者モードのコマンド
this.addCommand({
  id: 'toggle-presenter-mode',
  name: 'Toggle Presenter Mode (発表者モード)',
  callback: () => {
    this.togglePresenterMode();
  }
});

this.addCommand({
  id: 'enable-presenter-mode',
  name: 'Enable Presenter Mode (発表者モード有効化)',
  callback: () => {
    this.enablePresenterMode();
  }
});

this.addCommand({
  id: 'disable-presenter-mode',
  name: 'Disable Presenter Mode (発表者モード無効化)',
  callback: () => {
    this.disablePresenterMode();
  }
});

コマンドの種類：

トグルコマンド：現在の状態に応じて切り替え
有効化コマンド：明示的に有効化
無効化コマンド：明示的に無効化

これにより、ユーザーは用途に応じて最適なコマンドを選択できます。

設定画面の実装

設定画面では、現在の状態を確認し、トグルスイッチで直接切り替えられます。

display(): void {
  const {containerEl} = this;
  containerEl.empty();

  containerEl.createEl('h2', {text: 'Full Width Mode Settings'});

  // 全画面モードの設定
  new Setting(containerEl)
    .setName('現在の状態')
    .setDesc('「読みやすい行の長さ」の現在の設定')
    .addToggle(toggle => toggle
      .setValue(this.plugin.getReadableLineLength())
      .onChange(async (value) => {
        this.plugin.setReadableLineLength(value);
        this.display(); // UIを更新
      })
      .setTooltip('オン = 読みやすい行の長さ、オフ = 全画面モード')
    );

  // 発表者モードの設定
  new Setting(containerEl)
    .setName('発表者モードの状態')
    .setDesc('現在の発表者モードの状態')
    .addToggle(toggle => toggle
      .setValue(this.plugin.settings.presenterMode)
      .onChange(async (value) => {
        if (value) {
          this.plugin.enablePresenterMode();
        } else {
          this.plugin.disablePresenterMode();
        }
        this.display(); // UIを更新
      })
      .setTooltip('オン = 発表者モード、オフ = 通常モード')
    );

  // ショートカットキーの設定方法を説明
  // ...
}

プラグインのアンロード時の処理

プラグインをアンロードする際は、ユーザーの設定を維持します。

onunload() {
  // プラグインアンロード時には何もしない（ユーザーの設定を保持）
}

これにより、プラグインを無効化しても、Obsidianの設定はそのまま維持されます。

実装の工夫点

1. ユーザー体験の優先

発表者モードでは、サイドバーの元の状態を保存し、モード解除時に復元します。これにより、ユーザーの作業環境を尊重しつつ、プレゼンテーション中はシンプルな表示を提供できます。

2. 多様な操作方法

リボンアイコン、コマンドパレット、ショートカットキーの3つの操作方法を提供し、ユーザーの好みに応じて選択できるようにしています。

3. 視覚的なフィードバック

ステータスバーで現在のモードを常に表示し、通知メッセージで状態変更を確認できるようにしています。

4. 安全な型チェック回避

ObsidianのAPIで型定義されていない機能を使用する際は、@ts-ignoreを適切に使用し、TypeScriptの型チェックを回避しています。

// @ts-ignore - Obsidian APIの型定義にない可能性があるため
this.app.vault.setConfig('readableLineLength', value);

5. 柔軟なコマンド設計

トグル、有効化、無効化の3種類のコマンドを提供し、ユーザーが自分のワークフローに合わせて選択できるようにしています。

インストール方法

手動インストール

GitHubリポジトリのリリースからmain.js、manifest.json、styles.cssをダウンロード

Vaultのプラグインフォルダにwidemoderフォルダを作成

ダウンロードしたファイルを配置

Obsidianを再起動してプラグインを有効化

コミュニティプラグインから（いつか対応します...）

今しばらくお待ちくださいませ (+_+)

ショートカットキーの設定例

推奨設定

Ctrl/Cmd + Shift + F：全画面モードのトグル
Shift + F5：発表者モードのトグル（発表者モードの切り替え）

設定手順

Obsidianの設定を開く（⚙️アイコン）
「ホットキー」セクションを選択
検索欄で「Full Width Mode」または「Presenter Mode」を検索
各コマンドの右側の「+」ボタンをクリック
割り当てたいキーを押す

まとめ

「Full Width Mode」プラグインを使用することで、以下のメリットが得られます。

快適なプレゼンテーション：発表者モードでUIを自動的に非表示
効率的な作業：全画面モードで横幅の広いコンテンツを快適に編集
柔軟な操作：ショートカット、アイコン、コマンドパレットの3つの方法
視覚的な確認：ステータスバーで現在のモードを一目で把握
環境の保持：発表者モード解除時にサイドバーの状態を自動復元

特に、Obsidianでプレゼンテーションを行うユーザーや、表やコードブロックを多用するユーザーにとって、このプラグインは作業効率を大きく向上させるツールとなるはずです。

また、技術的には以下の点で学びがありました。

Obsidianの内部設定APIへのアクセス方法
Workspace APIを使用したサイドバーの制御
複数の操作方法を提供するUX設計
TypeScriptでの型安全性と実用性のバランス

GitHubでオープンソースとして公開予定ですので、バグ報告や機能要望をお待ちしています。

リンク

GitHubリポジトリ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Obsidianで自作プラグイン作成シリーズ 第3弾（Wide Moder）