最近、会社の合宿でLTをする機会がありました。

以前、Rabbitを使ってLTした時はとても便利だったため、今回もRabbitを使うことにしました。
Macにrabbitをインストールし、プレゼンテーマを自作してみた - メモ的な思考的な

ただ、上記の自分の記事を参考にスライドを作ろうとしたところ、いくつか悩んだところがあったため、メモを残します。

環境

macOS Sequoia 15.1.1
Ruby 3.3.6
Rabbit 3.0.3
スライドはmarkdownで作成
- 今回記載する事例はmarkdown以外には適用されないかもしれません (未調査)

インストールまわり

Rabbitを起動するRuby環境にRakeが無いと、インストールでエラーになる

冒頭の記事通りに rbenv で環境を作ったところエラーになったので、対応しました。

　
再現手順です。

まず rbenv で環境を作って bundle init します。

% rbenv local 3.3.6 

% ruby -v                                       
ruby 3.3.6 (2024-11-05 revision 75015d4c1f) [x86_64-darwin24]

% bundle init

　
続いて、生成されたGemfileを編集し、 rabbit をインストールします。

# frozen_string_literal: true

source "https://rubygems.org"

gem "rabbit"

Gemfileの準備ができたので、 bundle install でインストールしたところ、途中でエラーになりました。

% bundle install                                
...
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
...
in `find_spec_for_exe': can't find gem rake
(>= 0.a) with executable rake (Gem::GemNotFoundException)

　
次にこのエラーに対応します。

エラーメッセージにある通り、Gemfileへ rake を追加します。

# frozen_string_literal: true

source "https://rubygems.org"

gem "rake"  # 追加
gem "rabbit"

　
再度 bundle install すると、問題なくインストールできました。

% bundle install
...
Installing rabbit 3.0.3
Bundle complete! 2 Gemfile dependencies, 38 gems now installed.
Bundled gems are installed into `./vendor/bundle`

rabbit-theme new コマンドにて、新しいテーマも作成できました。

% bundle exec rabbit-theme new --id sample_theme

[情報]
ディレクトリを作成中: sample_theme
[情報]
ディレクトリを作成中: sample_theme/data
[情報]
ファイルを作成中:     sample_theme/.gitignore
[情報]
ファイルを作成中:     sample_theme/config.yaml
[情報]
ファイルを作成中:     sample_theme/README.rd
[情報]
ファイルを作成中:     sample_theme/Rakefile
[情報]
ファイルを作成中:     sample_theme/property.rb
[情報]
ファイルを作成中:     sample_theme/theme.rb
[情報]
ディレクトリを作成中: /Users/you/.rabbit
[情報]
ファイルを作成中:     /Users/you/.rabbit/author.yaml

タイマーまわり

タイマーの画像を差し替える

差し替え先の画像ファイル置き場について

rabbit-theme new した時にできる data ディレクトリになります。

タイマーの差し替え先の画像ファイルを置くことで、テーマファイルから参照できます。

差し替え先の画像を参照する方法について

テーマファイル theme.rb にて、以下のインスタンス変数に画像ファイル名を指定します。

@image_slide_number_image
- 現在のスライド番号の画像
@image_timer_image
- タイマーの画像

例えば、以下の設定の場合

現在位置のアイコンは黄色りんご
- ファイル名は fruit_apple_yellow.png
予定進捗のアイコンは毒りんご
- ファイル名は apple_doku_ringo.png

が表示されます。

ちなみに、設定する値は data ディレクトリを含むパスではなく、画像ファイル名です。

# 各画像ファイルの指定
@image_slide_number_image = "fruit_apple_yellow.png"
@image_timer_image = "apple_doku_ringo.png"

# テーマはデフォルト
include_theme("default")

　
あとはスライドの1枚目に

# スライド1枚目

allotted-time
: 5m

theme
: theme

のように

allotted-time にて制限時間を設定
theme にてテーマファイル名を指定

としてRabbitを起動します。

　
すると、2枚目以降のスライドでタイマーが差し替えた画像で表示されます。

ちなみに、黄色りんご・毒りんごの画像はいらすとやさんからお借りしました。ありがとうございました。

pdfをRabbitで表示するときは、タイマー画像は変更できないかも

以下のようなコマンドを実行することで、pdfにウサギとカメのタイマーを表示できます。
PDFでうさぎと亀を使いたいときは？ | Rabbit - FAQ

bundle exec rabbit --allotted-time 5m example.pdf

　
このとき、ウサギとカメを別のアイコンへと差し替えようと考えましたが、方法が見当たりませんでした。

スライドで表示する画像まわり

スライドに画像を挿入する

data ディレクトリに画像を入れ、markdownでその画像のパスを指定します。

また、以下の点にも注意します。

タイマーの画像と異なり、markdownでの指定は画像のパスが必要になる
theme.rb で add_image_path を使わなくても、画像ファイルは読み込める

例えば、以下のように書くと、スライドへりんごの画像を表示できます。

![](data/fruit_apple_yellow.png)

　
スライドには、元々の幅・高さで画像が表示されます。

スライドに幅・高さを指定した画像を挿入する

markdownにて幅・高さを指定します。

例えば、以下の例では幅200・高さ50を指定しています。

![](data/fruit_apple_yellow.png){:height='50' :width='200'}

　
スライドでの表示です。りんごの幅などが調整されました。

スライドの表示サイズまわり

スライドをフルスクリーンで表示する

Rabbitのデフォルトでは、スライドはフルスクリーンモードでは表示されません。

そこで、起動時に --full-screen オプションを指定することで、フルスクリーン表示となります。
Rabbit - rabbitコマンドの使い方

スライドのウィンドウサイズを変更する

フルスクリーンなどでスライドを表示した時に横に黒帯が出てしまうことがあります。

この場合、ウィンドウサイズを調整することで黒帯を消すことができます。

例えば、16:9で表示すれば直る場合には、起動時に --size 1600,900 のように size オプションを指定します。
Rabbit - rabbitコマンドの使い方

スライドのpdf化まわり

Carioのバージョンによっては、スライドをpdf化する時にエラーとなる

Rabbitでは --print オプションと --output-filename オプションを組み合わせることで、markdownなどで作ったスライドをpdf化できます。
Macにrabbitをインストールし、プレゼンテーマを自作してみた - メモ的な思考的な

　
しかし、上記記事通りにpdf化しようとしても、エラーになってしまいました。

対応方法を調べたところ、Rabbitにissueがありました。
rake pdf で out of memory · Issue #166 · rabbit-shocker/rabbit

issueのコメントには

cairo 1.18.4がリリースされるまでのworkaroundは次のとおりです。
brew uninstall --ignore-dependencies cairo
brew install --HEAD cairo

とありました。

そこで、workaroundを実施したところ、動作するようになりました。

pdf化した時のスライドのサイズについて

--size オプションでウィンドウのサイズを変更している場合でも、pdf化した時のサイズは変更前のものになります。

例えば、以下は幅1600・高さ900サイズでプレゼンした時の表示です。

　
これをpdf化すると、幅と高さが変わり、文字の折り返し位置が変更となっています。

　
発表後に資料をpdf化する場合は、ウィンドウのサイズはデフォルト (幅800、高さ600) としたほうが良いのかもしれません。

markdownで画像の幅・高さを変更していても、pdf化時には元の幅・高さが適用されることもある

スライドによって再現したりしてなかったりするので、いったんはメモ程度の内容です。

例えば、markdownに

![](data/fruit_apple_yellow.png){:height='50' :width='100'}

と指定していたとしても、pdf化するとその画像は元の大きさになってしまうこともありました。

　
ただ、今回のサンプルスライドでは発生しなかったので、何か条件があるのかもしれません。