LoginSignup
8

More than 5 years have passed since last update.

asciidocでスライドを作成する

Last updated at Posted at 2017-10-10

asciidocでスライドを作成する

目的

  • プレゼン資料にパワポを使いたくない(細部にこだわりたくなって時間が掛かる..!)
  • 繰り返し修正して使用するプレゼン資料はバージョン管理したいのでテキスト形式にしたい

前置き

asciidoc形式で作成したテキストファイルを、自端末上のasciidoctorでスライド風HTMLに変換するまでを
簡単に記載します。

  • Windows 10

インストールするもの

  • Ruby
  • asciidoctor
  • tilt
  • haml
  • deckjs

環境構築手順

Rubyをインストール

image.png

asciidoctor,tilt,hamlのインストール

  • インストール

gem install asciidoctor tilt haml

  • インストール確認

gem list --local

image.png

ご参考:以降の手順でダウンロードする資材を下記に揃えました。cloneすることで手順が省略できます。
https://github.com/Autumn-Eggplant/text-home/tree/master/asciidoc/asciidoc-slide

deck.jsのセットアップ

asciidoctor-deck.js

  • ダウンロード

git clone https://github.com/asciidoctor/asciidoctor-deck.js

or
https://github.com/asciidoctor/asciidoctor-deck.js からダウンロード

  • 適当なフォルダを作成(画像ではD:\dev\work\adoc)して解凍

image.png

  • 解凍したら-masterいらないから消す

image.png

deck.jsのダウンロード

  • ダウンロード

deck.js-latest

  • 解凍してコピー

image.png

  • フォルダ名から-latestを消す

image.png

もう少しつづきますが、現時点でスライド出力が可能です。

いずれ追記します。

実行

asciidoctor -T asciidoctor-deck.js/templates/haml sample.adoc

sample.adoc
= Title of Presentation 
Presenter Name
:backend: deckjs
:deckjs_transition: fade
:navigation:

== Title of Slide One 

This is the first slide after the title slide.

[canvas-image=images/example.jpg] 
== Slide Two's Title will not be displayed 

[.canvas-caption, position=center-up] 
This text is displayed on top of the example.jpg image.
  • 実行結果

image.png

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8