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

高速スライド作成のベスト プラクティス reveal.js

More than 1 year has passed since last update.

高速スライド作成のベスト プラクティス reveal.js

by kasecato
1 / 21

About @k_kato

const addTimeline2016 = (profile) => {
    profile.timeline.push({
        name: "@k_kato",
        year: 2016,
        lang: "Scala",
        job: "Web",
        do: "『C# モダン Web 開発』執筆中 (進捗 0.2%)",
        try: "Microsoft MVP (落選 2016 年 7 月)"
    });
}

Qiita スライド モード が素晴らしい

  • スライド デザインから解放される!
    • マウス職人芸
  • コンテンツ作成に集中できる!
    • デザインとビジネスロジックが密結合
  • Web ブラウザだけでどこでもプレゼンできる!
    • Write once, run anywhere

Qiita スライド モード が素晴らしい

  • スライドでシンタックス ハイライトが使える
(fun () -> printfn("F# は人生"))()
  • Qiita なので SEO に強い(かも)
    • 検索エンジンにインデックスされないスライドは誰も見てくれない(かも) 😭

Qiita スライド モードも素晴らしいがあえて reveal.js ではじめる高速スライド作成入門


reveal.js とは?

reveal.js は 2011 年にスウェーデンの Hakim El Hattab が開発した HTML プレゼンテーションのフレームワーク


reveal.js の機能


reveal.js スライド開発環境

  1. reveal.js: スライド作成フレームワーク
  2. highlight.js: シンタックス ハイライト
  3. live-server: 開発用 Web サーバー
  4. GitHub Page: 公開用 Web サーバー
  5. VS Code: 開発エディター (※お好みで)

reveal.js インストール

  1. reveal.js をダウンロードする
  2. reveal.js-3.6.0.zip を解凍する
  3. Node.js をインストールする
📝 コラム: Node.js は高速なのか?

PayPal の Jeff Harrell (2013) は,Node.js は Java Spring より秒間 2 倍のリクエストを処理できたと書きました。そして .NET Core は Node.js の 8 倍高速 ですが,導入事例が聞こえてこないのです 😭


reveal.js スライド作成ビッグ ピクチャ

  1. index.html を編集する
  2. package.json を編集する
  3. Markdown でスライドを記述する
  4. GitHub Page でスライドを公開する

[1/4] index.html を編集する


index.html
<div class="reveal">
    <div class="slides">
        <section data-markdown="index.md"  
                data-separator="^\n\n\n"  
                data-separator-vertical="^\n\n"  
                data-separator-notes="^Note:"  
                data-charset="utf-8">
        </section>
    </div>
</div>

[1/4] index.html を編集する

index.html
<link rel="stylesheet" href="lib/css/zenburn.css">

[2/4] package.json を編集する


package.json
{
  "name": "yourPresentationTitle",
  "devDependencies": {
      "live-server": "^1.0.0"
  },
  "scripts": {
      "build": "./node_modules/.bin/live-server"
  }
}

[2/4] package.json を編集する

  • live-server を起動する
Terminal
$ npm run build
  • index.html が Web ブラウザで表示される
  • index.md を編集&保存で自動リロードされる

[3/4] Markdown を編集する

index.md
## Hello reveal.js

 * 改行 3 個で横スライド
 * 改行 2 個で縦スライド

```fsharp
(fun () -> printfn("F# は人生"))()
``` 


[4/4] GitHub Page でスライドを公開する

  • GitHub で username.github.io という名前でリポジトリーを作成する (username は取得した GitHub アカウント名)
  • username.github.io を git clone する
  • スライド一式を git commitgit push する
  • https://username.github.io を ブラウザで開く

[4/4] reveal.js x GitHub Page の例


まとめ

  • Qiita スライド モードは素晴らしい
  • reveal.js を使ってスライド作成環境が構築できた
  • live-server を使ってスライドの確認環境が構築できた
  • GitHub Page でスライドが公開できた
  • 高速スライド作成ができた (?)

Happy Hacking Presentation!

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
ユーザーは見つかりませんでした