revele.jsを使用してマルチユーザープレゼンテーションを作成します

キーポイント

• Reveal.jsは、複数のユーザーがリアルタイムで制御できる印象的なWebベースのプレゼンテーションを作成するための人気のあるHTML5およびCSS3ライブラリです。
• 展開を使用してマルチユーザープレゼンテーションを作成するには、node.js、yeoman、grunt、bowerを使用してExpress.jsサーバーを設定し、Socket.ioを使用してスライド変更イベントを送信して受信する必要があります。
• サーバーサイドコードに基本的な認証を追加すると、不正なユーザーがプレゼンテーションを制御できないようにし、許可されていないユーザーに代替ルートを提供します。
• reveal.jsプレゼンテーションは、WebrTCなどの機能でさらにカスタマイズおよび拡張でき、マルチメディアコンテンツ、クイズ、投票、フォームを埋め込むことでインタラクティブにすることができます。

PowerPoint時代に別れを告げ、現代のWebデモを受け入れてください！ Webテクノロジーの開発とブラウザのパフォーマンスの改善により、HTML5とCSS3に基づくデモライブラリが登場しました。 reveal.jsは、見事なプレゼンテーションを作成する最も人気のあるライブラリの1つです。 HTML5仕様で定義されているWebSocket標準は、ブラウザでの双方向の全二重通信を実装します。多くのJavaScriptライブラリは、WebSocketの使用を簡素化し、Socket.ioは優れた代表者の1つです。この記事では、複数のユーザーが制御し、socket.ioを使用してスライド変更イベントをリアルタイムで送信して受信できる展開プレゼンテーションを作成する方法について説明します（reveal.jsに付属するわずかに複雑なマルチプレクサプラグインを無視します）。

予防策

この記事では、インストールしたことがあり、次のライブラリを使用できると想定しています。

node.js
yeoman
grunt
bower

初期手順最初に、Express.jsサーバーをセットアップします。 Yeomanは、発電機の助けを借りてExpress.jsサーバーのインストールと操作を簡素化します。そのため、最初にNPMを使用してYeoman Express-Generatorをインストールします。

これにより、Express-Generatorはグローバルにインストールされます。それでは、サーバーをセットアップしましょう。

<code class="language-bash">$ npm install –g generator-express</code>

これにより、どのタイプの表現をインストールする必要がありますか。基本またはMVCを選択できます。次に、bower.jsonおよびgruntfile.jsファイルとともに、多数のNPMモジュールをインストールします。

<code class="language-bash">$ yo express</code>

次に、Gruntを使用してExpressサーバーを起動します。

Yeomanは、サーバーの実行に必要な設定を使用して、デフォルトのapp.jsファイルを作成しました。また、コードの変更を追跡してサーバーを自動的にリロードする「監視」ライブラリが付属しているため、これを手動で行う必要はありません。

<code class="language-bash">$ grunt</code>

先に進む前に、Bowerを使用してLevele.jsライブラリをインストールしてセットアップします。 revele.jsのインストールは非常にシンプルで直接的です。端末に次のコマンドを発行するだけです。

これにより、GitHubからrevele.jsライブラリの最新の安定したバージョンを取得し、公開/コンポーネントディレクトリにインストールします。 -saveオプションは、revele.jsを使用してbower.jsonファイルの依存関係部分を自動的に更新します。

プレゼンテーションサーバーを作成するために必要なすべてのものがあります。プレゼンテーションを作成する最初のスライドから始めます。これを行うには、ViewsフォルダーにHTMLファイルを作成します。 （HTMLコードはここでは省略されていますが、これは元のテキストと一致しています）

このHTMLには、revele.jsのCSSおよびJavaScriptファイルが含まれています。 revelied.initialize（）上記のHTMLを美しいプレゼンテーションに変換します。クラスを備えたdiv要素の任意の部分は、スライドとして機能します。 slides

デモを開始する前に、リクエストに従ってこのファイルを提供するようにサーバーをセットアップする必要があります。したがって、次のコードでApp.jsを更新します。 （ここではapp.jsコードが省略されています。これは元のテキストと一致しています）

コードの最初の行は、サーバーから必要な依存関係を必要とし、エクスプレスオブジェクトを作成します。次の行は、パブリックフォルダーを静的ディレクトリとして構成し、サーバーが静的ファイルのリクエストを探します。次に、index.htmlファイルを提供してサーバーを起動するルートを追加します。これで、http：// localhost：3000/urlを使用して、ブラウザでプレゼンテーションを表示できます。しかし、それは私たちが本当に必要としているものではありません。 1人のユーザーがスライドを変更すると、別のユーザーのブラウザに反映されるように、このプレゼンテーションを多重化する必要があります。次に、socket.ioモジュールをインストールしてセットアップして、WebSocketを使用して双方向通信を有効にします。 （Socket.io関連のコードはここで省略されています。これは、セキュリティパーツを含む元のテキストと一致しています）

Githubから完全なソースコードを見つけることができます。

概要 この記事では、複数のユーザーが制御できるSimple Revelie.jsプレゼンテーションを構築する方法を見てきました。ここでは、socket.ioライブラリを使用して、すべての接続されたクライアントをリアルタイムで更新します。また、不正なユーザーがプレゼンテーションを制御できないようにするために、基本的なセキュリティを追加しました。さらに多くの機能を追加し、WeBRTCのようなテクノロジーを使用してより人気を高めることができます。そのため、この記事がほんの始まりに過ぎないことを願っています。

（ここではFAQパーツは省略されています。これは元のテキストと一致しています）

以上がrevele.jsを使用してマルチユーザープレゼンテーションを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。