🐥

Obsidian-Excalidrawでスライドを作ろう

2025/01/30に公開

Obsidian-Excalidrawでスライドを作ろう

どんなものが出来るの?

スライド全体が大きな1枚の画像になっていて、その一部を拡大してページとして表示しながら移動して行くタイプのスライドを作ることができます。

実際の例は下の動画を見てください。
https://youtu.be/HhRHFhWkmCk?si=7bF1riX0WR0V_d5C&t=193

ちなみに本家のExcalidraw.comの方にも似たようなスライドプレゼンテーション機能がありますがObsidian-Excalidrawでの実装はそれとは異なるものです。

Excalidraw.comのスライドプレゼンテーション機能
https://link.excalidraw.com/p/readonly/LF1Z5T1eAeBQNvlcAFz2

作り方

1. Obsidian内でExcalidrawのファイルを新規作成

  • Ctrl+P(Windows/Linux)または Cmd+P(Mac)でコマンドパレットを開きます。
  • Excalidraw: Create new drawing と入力して選択します。

2. 図形・テキストなどを配置

Excalidrawでは以下のように図形やテキストを配置できます:

  1. 基本的な描画ツール

    • 矩形:R キー
    • 円:O キー
    • 直線:L キー
    • 矢印:A キー
    • テキスト:T キー
    • フリーハンド:P キー
  2. 要素の編集

    • 選択:V キー または 1 キー
    • 移動:選択した要素をドラッグ
    • サイズ変更:角や辺のハンドルをドラッグ
    • 回転:角の回転ハンドルをドラッグ
  3. スタイル設定

    • 塗りつぶし色
    • 線の色と太さ
    • テキストのフォントとサイズ
    • 透明度

もちろん図形・テキストだけでなく動画やPDFなども貼り付けることができます。

3. 矢印で各ページの範囲と移動順を指定

スライドの順序を定義するには、矢印を使用する方法とフレームを使用する方法の2つがあります。ここでは矢印を使用する方法について説明します。

Obsidian-Excalidraw Slide 1

  1. 矢印を使用する方法

    • 矢印ツール(A キー)を選択
    • 矢印のスタイル設定:
      • 線のスタイル:実線
      • エッジ:シャープ
      • 線の太さ:細い
    • 最初のスライドの左上からクリック開始
    • マウスボタンを押さずにドラッグして線を引く
    • クリックで次のポイントを追加
    • 次のスライドの範囲まで線を引く
    • ダブルクリックで矢印の作成を完了
  2. 矢印の編集方法

    • 制御方法:
      • Controlキーを押しながらダブルクリック
      • または右クリックから「線を編集」を選択
    • 編集オプション:
      • 大きな円のポイントをドラッグしてスライドの範囲を調整
      • 中間の点をドラッグして新しいスライドを追加
      • プレゼンテーションパネルの「スライドを編集」ボタンで現在のスライドの範囲を編集
  3. プレゼンテーション時の矢印の表示/非表示

    • プレゼンテーションパネルのトグルボタンで矢印を非表示にできる
    • 非表示時は透明色で背景に配置され、選択不可になる
    • 非表示の矢印があるファイルは、プレゼンテーションボタンをクリックするだけで開始可能

4. スライドプレゼンテーションを実行

Obsidian-Excalidraw Slide 2

プレゼンテーションパネルの再生ボタンをクリックするか、Ctrl+PCmd+P)でコマンドパレットを開き「Excalidraw: Start presentation」を選択することでスライドショーを開始できます。矢印キーで次のスライドに進むことができます。

感想

矢印で各ページの範囲と移動順を指定するというのが独特でなかなか面白いです。実際にやってみると直感的に指定できるので便利でした。

また、全体のイメージを一画面内で俯瞰したり、ページの一部だけを拡大表示したりというような操作がピンチ&ズームで素早くできるのも良いですね。

参考(詳しい使い方など)

Discussion