Macにプレゼンツールのrabbitをインストールし、プレゼンテーマを自作した時のメモを残します。
公式サイト：Rabbit - はじめに
目次
環境
- Mac OS X 10.11.6
- Ruby 2.4.0p0
- rbenvを使ってインストール
- rbenv 1.1.0
- rabbit 2.2.0
- bundlerを使ってインストール
- bundler 1.14.4
rabbitの動作環境を構築
rbenvのインストール
以下を参考に、システムのRubyではなくrbenvのRubyを使う環境を構築します。
$ brew install rbenv ruby-build ... 🍺 /usr/local/Cellar/ruby-build/20170201: 334 files, 178.8K, built in 13 seconds ... 🍺 /usr/local/Cellar/rbenv/1.1.0: 36 files, 63.2K
rbenvの設定をします。
# rbenv initを実行 $ rbenv init # Load rbenv automatically by appending # the following to ~/.bash_profile: eval "$(rbenv init -)" # 上記メッセージに従って、.bash_profileを編集する $ vi ~/.bash_profile export PATH="$HOME/.rbenv/bin:$PATH" eval "$(rbenv init -)" # .bash_profileを再読込 $ source .bash_profile
rbenvを使ったRubyのインストール
一番新しい2.4.0をインストールします。
# インストール可能なバージョンの確認 $ rbenv install -l ... 2.4.0 ... # Rubyのインストール（時間かかる） $ rbenv install 2.4.0 ... Installed ruby-2.4.0 to ~/.rbenv/versions/2.4.0 # バージョン確認 $ rbenv versions system * 2.4.0 (set by ~/.rbenv/version) # rehashする $ rbenv rehash # バージョンを指定 $ rbenv global 2.4.0 $ ruby --version ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin15] # 念のためどこにインストールされているかを確認 $ rbenv which irb ~/.rbenv/versions/2.4.0/bin/irb
Bundlerを使ってrabbitをインストール
rabbitはGemfileでインストールしたいため、以下を参考にBundlerまわりをインストールします。
Bundlerの使い方 - Qiita
Bundlerのインストール
no-documentオプションを付け、ドキュメントを除いてインストールします。
gemrcの–no-riと–no-rdoc、deprecatedなoptionなのでみなおしたほうがいいかもですよ - Qiita
# Bundlerのインストール $ gem install bundler --no-document ... Successfully installed bundler-1.14.4 1 gem installed
Gemfileの作成とrabbitのインストール
rabbit入れたいディレクトリへと移動して、Gemfileを作成します。
# ディレクトリを作って移動 $ mkdir rabbit_theme_sample $ cd rabbit_theme_sample/ # Gemfileのひな形を作る $ bundle init Writing new Gemfile to /path/to/rabbit_theme_sample/Gemfile
作成されたGemfileにrabbitをインストールするように記載します。
Gemfile
# frozen_string_literal: true source "https://rubygems.org" gem "rabbit"
準備ができたため、bundlerを使ってインストールします。
--path vendor/bundleでインストール先を指定します。
# インストール(時間がかかる) $ bundle install --path vendor/bundle Fetching gem metadata from https://rubygems.org/........ Fetching version metadata from https://rubygems.org/. Resolving dependencies... Installing pkg-config 1.1.7 Installing coderay 1.1.1 Installing multipart-post 2.0.0 Installing locale 2.1.2 Installing text 1.3.1 Installing hikidoc 0.1.0 Installing kramdown 1.13.2 Installing mini_portile2 2.1.0 Installing rdtool 0.6.38 Installing rttool 1.0.3.0 Using bundler 1.14.4 Installing glib2 3.1.1 with native extensions Installing cairo 1.15.5 with native extensions Installing faraday 0.11.0 Installing gettext 3.2.2 Installing nokogiri 1.7.0.1 with native extensions Installing atk 3.1.1 with native extensions Installing gobject-introspection 3.1.1 with native extensions Installing pango 3.1.1 with native extensions Installing gio2 3.1.1 with native extensions Installing gdk_pixbuf2 3.1.1 Installing gtk2 3.1.1 with native extensions Installing poppler 3.1.1 with native extensions Installing rsvg2 3.1.1 with native extensions Installing rabbit 2.2.0 Bundle complete! 1 Gemfile dependency, 25 gems now installed. Bundled gems are installed into ./vendor/bundle.
rabbit-themeコマンドによるひな形を作成
rabbitには、既存のテーマがいくつかあります。
- https://github.com/rabbit-shocker/rabbit/tree/master/sample/rabbit/theme
- https://github.com/rabbit-shocker/rabbit/tree/master/lib/rabbit/theme
ただ、今回は以下を参考にして、defaultテーマを拡張する形で作成します。
既存のテーマのソースコードを読むと、defaultテーマのincludeに対し、
- include前に、インスタンス変数へ値をセット
- include後に、オブジェクトに対して、
prop_set()を実行
などを行えば、defaultテーマを拡張できそうでした。
まずは、rabbit-themeコマンドを使って、テーマのひな形を作成します。
コマンドではidの指定が必要なので、今回はsample-themeとします。
# rabbit-themeコマンドで生成
$ 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
[情報]
ディレクトリを作成中: ~/.rabbit
[情報]
ファイルを作成中: ~/.rabbit/author.yaml
# ディレクトリへと移動
$ cd sample_theme/
# テーマファイルの中身を確認
## defaultテーマのincludeだけがされている
$ cat theme.rb
include_theme("default")
確認用スライドを準備
スライドがないとテーマを確認しづらいため、markdown形式のスライドを用意しました。
slide.md
# スライドタイトル subtitle : サブタイトル date : 2017/2/28 author : 著者 allotted-time : 10s # リスト * リスト1段目 * リスト2段目 * リスト3段目 # 画像サイズはそのまま表示 {:height='80' :width='80'} # 画像サイズは調整して表示 {:relative_height='80' :relative_width='80'}
この時点のスライドを表示してみます。
$ bundle exec rabbit slide.md -t theme
スライドタイトル
スライド
タイマー(カメ)について
スライドに
allotted-time : 10s
と、allotted-timeを設定しているため、、タイマー(カメ)が出ています。
テーマの編集
スライド全体のフォントを変更
デフォルト値は、base.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/base/base.rb
今回は、以前も使用したことのあるやさしさゴシックボールドへ変更します。
フリーフォントやさしさゴシックボールドのダウンロード | フォントな
フォントは公式サイトに従ってインストールします。
Mac OS Xのフォントのインストール | フォントな
スライドで使うには、find_font_family()にフォント名を渡し、インスタンス変数font_familyへセットすれば良さそうでした。
ただ、やさしさゴシックボールドの英字表記のフォント名が分かりませんでした。
そこで、以下を参考に調べたところ、07YasashisaGothicBoldということが分かりました。
Mac ハンドブック：Font Book - Apple サポート
そのため、
@font_family = find_font_family("07YasashisaGothicBold") include_theme("default")
と実装します。
テーマの変更を確認するため、起動中のスライド上でrキーを押します。
Rabbit - rabbit-themeコマンドの使い方
フォントが変わりました。
スライドタイトルを変更
rabbitでは、スライドタイトルとそれ以降のスライドでは別設定になっているため、まずはスライドタイトルを変更します。
書体を変更
デフォルト値は、default-title-text.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-title-text/default-title-text.rb
今回は、日付(Date)の書体をイタリック体から通常へと変更します。
... include_theme("default") match(TitleSlide, Date) do |dates| dates.prop_set("style", "normal") end
Dateの書体が変わりました。
表示を右詰めに変更
デフォルト値は、default-title-slide.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-title-slide/default-title-slide.rb
今回は、著者(Author)を中央揃えから右詰めへと変更します。
なお、horizontal_centering = falseにしてからでないと、alignの値が反映されないことに注意します。
... include_theme("default") match(TitleSlide, Author) do |authors| authors.horizontal_centering = false authors.align = :right authors.margin_top = @space * 15 end
著者の表示が右詰めになりました。
フォントサイズを変更
デフォルト値は、default-title-text.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-title-text/default-title-text.rb
今回は
@title_slide_title_font_size = screen_size(1 * Pango::SCALE) @title_slide_subtitle_font_size = screen_size(2 * Pango::SCALE) @title_slide_author_font_size = screen_size(3 * Pango::SCALE) @title_slide_date_font_size = screen_size(4 * Pango::SCALE) include_theme("default")
としたところ、フォントサイズが変更されました。
スライドの設定
フォントサイズを変更
スライドタイトル以外のスライドのフォントサイズを変更します。
設定やデフォルト値は、
- フォントサイズのデフォルト値 (
base.rbテーマ) - どのフォントサイズを使うかの指定 (
default-text.rbテーマ)
にあります。
今回は
# 共通で使われるフォントサイズなので、主に使われるところをコメント # ヘッドライン @large_font_size = screen_size(1 * Pango::SCALE) # スライド内で一般的に使われるサイズ(リストの1段目とか) @normal_font_size = screen_size(2 * Pango::SCALE) # リストの2段目 @small_font_size = screen_size(3 * Pango::SCALE) # リストの3段目 @x_small_font_size = screen_size(4 * Pango::SCALE) # 旗の大きさ @xx_small_font_size = screen_size(5 * Pango::SCALE) include_theme("default")
としたところ、通常スライドのフォントサイズが変更されました。
ヘッドラインを変更
デフォルト値から、
- 色
- 太さ
- センタリング
を変更します。
デフォルト値は、
- ヘッドライン色と太さ(
default-text.rbテーマ) - センタリング(
base.rbテーマ)
にあります。
今回は
# 色 @default_headline_line_color = "#0066FF" # 太さ @default_headline_line_width = 10 include_theme("default") # ヘッドラインのセンタリング match(Slide, HeadLine) do |headlines| headlines.each do |headline| # trueはセンタリング、falseは左詰め headline.horizontal_centering = true end end
としたところ、ヘッドラインの設定が反映されました。
箇条書きリストのビュレットを変更
ビュレットのデフォルト値から、
- 形
- 色
を変更します。
デフォルト値はdefault-item-mark.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-item-mark/default-item-mark.rb
今回は
# 形 @default_item1_mark_type = "rectangle" # 四角 @default_item2_mark_type = "circle" # 円 @default_item3_mark_type = "dash" # 直線 # 色 # 16進数表記のほか、以下のような色名も使える # http://noz.day-break.net/webcolor/colorname.html @default_item1_mark_color = "#FF0000" # red @default_item2_mark_color = "#009900" # green @default_item3_mark_color = "green" include_theme("default")
としたところ、箇条書きリストでビュレットが変更されました。
画像を表示
画像を表示するには、
を行います。
今回は
theme.rb
# theme.rbと同じ階層にあるimagesディレクトリを画像ディレクトリとする add_image_path("images") ... include_theme("default")
slide.md
# そのまま表示 {:height='80' :width='80'} # いい感じに調整 {:relative_height='80' :relative_width='80'}
としたところ、以下のように表示されました。
そのまま表示する場合
いい感じに調整して表示する場合
なお、
# 2つの画像は表示できるか？ {:height='80' :width='80'} {:height='80' :width='80'}
のように、一つのスライドに複数の画像を指定した場合、以下のログが出て、スライドが表示されません。
[警告]
ひとつの段落中で複数の「![alt]{image}」を使うことはできません。
複数の画像を1ページの中に入れるのは無理そうです。
その他
その他いろいろ機能があるようですが、とりあえずはこのへんにします。
Rabbit - テーマの作り方
スライドをpdfへ変換
以下を参考に、作成したスライド(slide.md)をpdf(slide.pdf)へ変換します。
Debianでプレゼンテーションツールrabbitを使用する – ぺけみさお
$ bundle exec rabbit slide.md -t theme -p -o slide.pdf
ソースコード
GitHubに上げました。
GitHub - thinkAmi-sandbox/rabbit_theme-sample
- slide.md
- theme.rb
- slide.pdf
などが含まれます。
