Help us understand the problem. What is going on with this article?

asciidocでスライドを作成する

More than 1 year has passed since last update.

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

参考

http://asciidoctor.org/docs/install-and-use-deckjs-backend/

https://qiita.com/shimoju/items/41035b213ad0ac3a979e

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした