Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@aki-nasu

asciidocでスライドを作成する

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

参考

7
Help us understand the problem. What is going on with this article?
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
7
Help us understand the problem. What is going on with this article?