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

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

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

More than 3 years have 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!

27
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
kasecato
Coder. A user of Java.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
27
Help us understand the problem. What is going on with this article?