従来、プレゼンテーションを作成するには Powerpoint などのアプリを使用する必要があり、さまざまな互換性の問題が発生する可能性がありましたが、無料のオープンソース ツール Deck.js を使用すると、オンラインでもオフラインでも、あらゆるブラウザーで実行できるエレガントなスライドのセットを作成できます。必要なのは、基本的な HTML に関する最小限の知識だけです。わずか数分で最初のデッキを組み立てることができるスターター キットを作成しました。
いつものように、切り札を示しているので、deck.js プレゼンテーションがどのように見えるかを知りたい場合は、以下をご覧ください。数分でまとめたこの簡単なデモ。悪くないですよね？
Deck.js を使用したプレゼンテーションの作成は非常に簡単です。 HTML や CSS の知識が豊富でない場合、最初は気が遠くなるように思えるかもしれませんが、できることはまだたくさんあります。基本的な手順は次のとおりです。
スライドのコンテンツと形式を保持する単純な HTML ドキュメントを作成します。
テーマを選択して、スライドの外観を調整します。
拡張機能をデッキに追加して機能を強化します。
さらにやりたい場合は、HTML と CSS を使用して自分でテーマを作成できます (基本を学びましょう)ここ) および/または JavaScript を使用して独自の拡張機能を作成します (基本を学びます)ここ）。この投稿では、上で概説した手順を使用して基本的なプレゼンテーションを作成する方法を説明します。基本的な HTML だけを知っていて、CSS の知識がない場合でも、理解できるはずです。完了すると、オンラインに投稿して他の人が閲覧できるプレゼンテーションが完成します。あるいは、フラッシュ ドライブに保存しておいて、最新の Web ブラウザを備えたコンピュータで実行することもできます。プレゼンテーションは非常にポータブルになるため、どこからでもプレゼンテーションを行うことができ、特別なソフトウェアを必要としない形式でプレゼンテーションを行うことができます。興味があれば読み続けてください。
必要なもの
このガイドを始める前に、次のことが必要になります。
私たちのDeck.js スターター キットこれには、短いサンプルデッキと、理解するために使用できる空のデッキが含まれています。
デッキを作成および編集するためのプログラミング テキスト エディター。 (何を使えばよいか分からない場合は、お気に入りを試してみてください)窓そしてマック。）
オプション:Aウェブホストデッキをホストします。あるいは、デッキの HTML ファイルをブラウザでローカルに開くこともできます。
ステップ 1: HTML スライドを作成する
デッキの作成には、スライドのコンテンツを考え出して HTML ドキュメントとしてフォーマットする必要があるため、時間の大部分がかかります。始める前に、標準的なスライドがどのようなものかを見てみましょう。
<section class="slide"> <h2>A List of Things I Like</h2> <ol> <li> <h3>Cupcakes</h3> <p>They're tasty, but don't eat too many or you'll get fat!</p> </li> <li> <h3>Technology</h3> <p>It's tasty, but don't eat too much technology...or any technology...because it's not food.</p> </li> <li> <h3>Slankets</h3> <p>They catch all your cupcake and technology crumbs.</p> </li> </ol></section>
画像のみを含むスライドは、次のように単純に見えます。
<section class="slide"> <h2>I Like Din Tai Fung</h2> <img src="
" width="400" height="414" /></section>
基本的に、スライドは「スライド」クラスが割り当てられた単なる HTML セクションです。これらを作成するには、(上記の例に示すように) 標準の HTML コードを記述するだけです。そこから、必要なものをほとんどすべて入れることができます。ビデオの埋め込みやブロック引用も機能します。次のように、関連する CSS スタイルを追加することで、画像の周囲にテキストを折り返すこともできます。
<img src="
" width="292" height="334" style="float: left; padding: 0 16px 8px 0;" />
これらは基本的なスライドです。デモをまとめるそのため、すべての動作を確認できます (ビデオ スライドを含む)。このサンプルは、このガイドの冒頭でダウンロードしたスターター キットにも含まれています。スライドを作成するときは、上記またはそのドキュメントに表示されている HTML の例に従ってください。スライドを作成したら、次のステップに進み、スライドをインタラクティブなプレゼンテーションに変換する方法を学びます。
ステップ 2: スライドを機能的なプレゼンテーションに変える
スライドの作成が完了したら、すぐに実際のプレゼンテーションに変えることができます。まず、すべてを保存する新しいフォルダーを作成します。ダウンロードした Deck.js zip ファイルの内容 (フォルダーではなくファイル) と 2 つのスターター キット HTML ファイルの両方をコピーします。すべてのファイルをフォルダーに入れると、右の画像のようになります。次に、empty_deck.html を開いて、次の行を見つけます。デッキはここから始まります。その下には次のような行がありますデッキはここで終わります。スライドの HTML コードをこれら 2 行の間に貼り付け、ファイルを保存します。 Web ブラウザで empty_deck.html を開くと、機能的なプレゼンテーションが表示され、左右の矢印キーで簡単に移動できます。
ステップ 3: テーマとトランジション スタイルを選択する
これで完全に機能するプレゼンテーションが完成しましたが、プレゼンテーションで使用するテーマやトランジションの種類を変更したい場合があります。これを行うには、ドキュメントの先頭で次のコード行を探す必要があります。
<!— Theme CSS files —> <link rel="stylesheet" href="themes/style/swiss.css"> <link rel="stylesheet" href="themes/transition/fade.css">
1 行目はテーマ ファイルを埋め込み、2 行目はトランジション アニメーションを担当するファイルを埋め込みます。デフォルトでは、Swiss テーマとフェード トランジションを使用します。これを変更したい場合は、すべてのファイルを保存しているフォルダーを見て、テーマ -> スタイルに移動してください。そこにはさまざまなテーマのオプションが表示されます。テーマをこれらのファイルのいずれかに変更したい場合は、swiss.css を希望のファイル名に変更するだけです。トランジション ディレクトリに移動すると、トランジション用の CSS ファイルが多数見つかります。 fade.css を、代わりに使用したいトランジション ファイルに置き換えるだけです。やるべきことはそれだけです。
ステップ 4: デッキに拡張機能を追加する
拡張機能を追加するのは非常に簡単ですが、使用するには少し読む必要があります。これらを追加するには、JavaScript ファイルと CSS ファイルをドキュメントに埋め込むだけです。スターター キットの HTML ファイルには、すでに埋め込まれた拡張機能が含まれています。 CSS ファイルはドキュメントの上部にあります。それらは次のようになります。
<!— Core and extension CSS files —> <link rel="stylesheet" href="core/deck.core.css"> <link rel="stylesheet" href="extensions/goto/deck.goto.css"> <link rel="stylesheet" href="extensions/menu/deck.menu.css"> <link rel="stylesheet" href="extensions/navigation/deck.navigation.css"> <link rel="stylesheet" href="extensions/status/deck.status.css"> <link rel="stylesheet" href="extensions/hash/deck.hash.css">
JavaScript ファイルはドキュメントの下部に埋め込まれており、次のようになります。
<!— Deck Core and extensions —><script src="core/deck.core.js"></script><script src="extensions/hash/deck.hash.js"></script><script src="extensions/menu/deck.menu.js"></script><script src="extensions/goto/deck.goto.js"></script><script src="extensions/status/deck.status.js"></script><script src="extensions/navigation/deck.navigation.js"></script>
別の拡張機能を埋め込みたい場合は、拡張機能の名前が含まれるディレクトリに移動し、上記のように CSS ファイルと JavaScript ファイルを埋め込むだけです。拡張機能を埋め込んだら、機能を得るにはデッキ内で実際に拡張機能を使用する必要があります。
例として、deck.goto 拡張子を見てみましょう。 G キーを押して番号を入力すると、対応するスライドに移動できます。これは、プレゼンテーションをスキップしたい場合に便利です。これを使用したい場合は、(前述したように) JavaScript ファイルと CSS ファイルを埋め込むだけでなく、HTML デッキ内のすべてのスライドの後に次のコードを追加する必要があります。
<!— deck.goto snippet —><form action="." method="get" class="goto-form"> <label for="goto-slide">Go to slide:</label> <input type="text" name="slidenum" id="goto-slide" list="goto-datalist"> <datalist id="goto-datalist"></datalist> <input type="submit" value="Go"></form>
ほとんどの拡張機能は、次のような小さなコード スニペットで有効にすることができます。他の拡張機能の使用方法を学ぶには、Deck.js 拡張機能のドキュメントでそれらがどのように機能するかを読んでください。。 JavaScript に精通している場合は、独自の拡張機能を作成してさらに多くの機能を追加することもできます。
それだけです。 Deck.js は最初は少し怖く思えるかもしれませんが、その構造に慣れてしまえば、すぐにプレゼンテーションをまとめることができるでしょう。必要なのは、構造を構築するための単純な HTML スキルだけです。スターター キットの empty_deck.html ファイルを使用する場合は、最初のデッキを作成するために HTML ファイル全体を書き出す方法を学ぶ必要はありません。コツを掴んだら、プレゼンテーションをいじったりカスタマイズしたりして、ほぼすべての Web ブラウザーで表示できる、印象的でユニークなスライド デッキを作成できます。
