HTMLプレゼンテーションフレームワーク

ハキム・エル・ハッタブ氏とコントリビューターによって作成

スポンサー：

こんにちは

reveal.jsを使用すると、HTMLを使って美しくインタラクティブなスライドデッキを作成できます。このプレゼンテーションでは、その機能の例を紹介します。

垂直スライド

スライドは互いにネストできます。

すべてのスライドを移動するには、スペースキーを使用してください。


Down arrow

地下1階

ネストされたスライドは、上位レベルの水平スライドの下に詳細を追加するのに役立ちます。

地下2階

これで終わりです。上に戻りましょう。


Up arrow

スライド

コーダーではありませんか？問題ありません。https://slides.comで、これらのスライドを作成するためのフル機能のビジュアルエディターがあります。お試しください。

美しいコード


                import React, { useState } from 'react';

                function Example() {
                  const [count, setCount] = useState(0);

                  return (
                    ...
                  );
                }

highlight.jsによるコード構文の強調表示。

さらに美しいアニメーション


                import React, { useState } from 'react';

                function Example() {
                  const [count, setCount] = useState(0);

                  return (
                    <div>
                      <p>You clicked {count} times</p>
                      <button onClick={() => setCount(count + 1)}>
                        Click me
                      </button>
                    </div>
                  );
                }

                function SecondExample() {
                  const [count, setCount] = useState(0);

                  return (
                    <div>
                      <p>You clicked {count} times</p>
                      <button onClick={() => setCount(count + 1)}>
                        Click me
                      </button>
                    </div>
                  );
                }

視点

スライドの概要を表示するには、ESCキーを押してください。

altキー（Linuxではctrlキー）を押しながら任意の要素をクリックすると、zoom.jsを使用して要素を拡大できます。もう一度クリックすると、元のサイズに戻ります。

（注：Linuxではctrl + クリックを使用してください。）

自動アニメーション

Auto-Animateを使用して、スライド間で一致する要素を自動的にアニメーション化します。

自動アニメーション

自動アニメーション

タッチ最適化

プレゼンテーションは、スマートフォンやタブレットなどのタッチデバイスでも見栄えが良く、スライドを簡単にスワイプできます。

テキストの自動サイズ調整には、r-fit-textクラスを追加します。

テキスト自動調整

フラグメント

次の矢印を押してください…

…ステップ実行…

... a フラグメント化された スライド。

フラグメントスタイル

grow、shrink、fade-outなど、さまざまな種類のフラグメントがあります。

拡大

縮小

フェードアウト

右からフェードイン、上、下、左からフェードイン

フェードインしてからフェードアウト

フェードインしてから半フェードアウト

ハイライト 赤 青 緑

トランジションスタイル

None、Fade、Slide、Convex、Concave、Zoomなど、さまざまなトランジションを選択できます。
なし - フェード - スライド - 凸状 - 凹状 - ズーム

スライド背景

スライドにdata-background="#dddddd"を設定して、背景色を変更します。すべてのCSSカラー形式がサポートされています。

Down arrow

画像背景

<section data-background="image.png">

タイル状背景

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

動画背景

<section data-background-video="video.mp4,video.webm">

…とGIF！

背景トランジション

backgroundTransitionオプションで、さまざまな背景トランジションを使用できます。これは「ズーム」と呼ばれます。

Reveal.configure({ backgroundTransition: 'zoom' })

背景トランジション

スライドごとに背景トランジションを上書きできます。

<section data-background-transition="zoom">

iframe背景

reveal.jsはWeb上で動作するため、他のWebコンテンツを簡単に埋め込むことができます。背景のページとやり取りしてみてください。

素晴らしいリスト

  • ここでは順序がありません
  • ここでもありません
  • ここでもありません
  • ここでもありません

素晴らしい順序付きリスト

  1. 1は…より小さいです
  2. 2は…より小さいです
  3. 3！

表形式の表

項目値数量
リンゴ$17
レモネード$218
パン$32

巧みな引用

これらは2つの形式で提供されます。インライン：標準の良い点は、選択できるものがたくさんあることです。およびブロック

「何年も前から、何百万ものサルが何百万ものタイプライターでランダムにタイプすると、シェークスピアの全作品が再現されるという理論がありました。インターネットはこの理論が間違っていることを証明しました。」

銀河系間の相互接続

スライド間を内部的にリンクできます。こちら。

スピーカービュー

スピーカービューがあります。タイマー、次のスライドのプレビュー、スピーカーノートが含まれています。

試すには、Sキーを押してください。

PDFへのエクスポート

プレゼンテーションはPDFにエクスポートできます。例はこちらです。

グローバルステート

スライドにdata-state="something"を設定すると、スライドが開いているときに「something」がドキュメント要素にクラスとして追加されます。これにより、ページの背景の切り替えなど、より広範囲のスタイル変更を適用できます。

ステートイベント

さらに、data-state名にバインドすることで、スライドごとにカスタムイベントをトリガーできます。


Reveal.on( 'customevent', function() {
  console.log( '"customevent" has fired' );
} );

少し休憩

キーボードのBキーまたはピリオドキーを押して、プレゼンテーションを一時停止します。ステージ上で邪魔なスライドを画面から外したい場合に便利です。

その他多数

おわり

- オンラインエディターを試す
- ソースコードとドキュメント

Web上で素晴らしいプレゼンテーションを作成する

reveal.jsはオープンソースのHTMLプレゼンテーションフレームワークです。Webブラウザを使用するすべての人が、無料でフル機能で美しいプレゼンテーションを簡単に作成できるツールです。

reveal.jsで作成されたプレゼンテーションは、オープンなWebテクノロジーに基づいています。つまり、Webでできることは何でもプレゼンテーションでできます。CSSでスタイルを変更したり、<iframe>を使用して外部Webページを含めたり、独自のJavaScript APIを使用してカスタム動作を追加したりできます。

このフレームワークには、ネストされたスライド、Markdownサポート、Auto-Animate、PDFエクスポート、スピーカーノート、LaTeXサポート、構文強調表示されたコードなど、幅広い機能が含まれています。

始める準備はできましたか？

設定にはわずか1分かかります。インストール手順で、最初のプレゼンテーションの作成方法を学びましょう！

オンラインエディター

HTMLやMarkdownを記述することなくreveal.jsの利点を活用したい場合は、https://slides.comを試してください。これは、同じ作成者によるreveal.jsのフル機能のビジュアルエディターおよびプラットフォームです。

reveal.jsのサポート

このプロジェクトは@hakimelによって開始され、コミュニティからの多くの貢献によって維持されています。プロジェクトをサポートする最善の方法は、Hakimが構築しているreveal.jsプレゼンテーションプラットフォームであるSlides.comの有料会員になることです。