miso_soup3 Blog

主に ASP.NET 関連について書いています。

SignalR で Html プレゼン

SignalR で Html プレゼンを行う簡単な Web アプリを作成してみました。
どのようなものであるか、下に動画を用意しました。

今回は実装日記のようなものです。SignalR では特別なことはしていません。

概要

Html でスライドを作成するためのライブラリがあります。
HTMLベースで作成できるプレゼン用スライドのまとめ

このライブラリと SignalR を使って作成しました。
登壇者は、手元のスマホ等(WEB ブラウザ)でスライドの番号をタップし、
観客は、WEB ブラウザにて、次々と切り替わるスライドを見ます。

Html ベースなので、JavaScript による処理を SignalR によって同時に行うことができたり、
ユーザ1人だけで処理を実行することも可能になるかと思います。(今回は実装していません)

サンプルコード

サンプルコードを抜粋したものを Gist にあげました。
コード量は少量です。
miso-soup / SignalR Html プレゼン

使用したライブラリについて

Html スライドを作成するためのライブラリは、Ascensor.js - Kirkas を使用しました。
(↑このデモのページの右下にあるナビゲーションが良い感じです!)

構成

作成したWeb アプリは2ページで構成されます。

  • 登壇者がアクセスする、スライドの切り替えを指定するためのボタンを配置したページ

  • 観客がアクセスする、スライドを表示するページ

実装

登壇者側のページ

Gist コード
登壇者側のページは単純です。
スライドの特定のページを表示させる指示を送信するボタンを配置し、
ボタンが押されたら、SignalR でサーバー側に指示を送信します。

サーバー側

Gist コード
サーバー側の Hub クラスでは、クライアントから送信されてきた登壇者からの指示を
そっくりそのまますべてのクライアントへ送信します。

観客側のページ

Gist コード
観客側のページでは、スライドの内容を Html で記述し、
Ascensor.js ライブラリより表示の切り替えを行います。

SignalR でサーバーから登壇者側の指示が送信された時に、表示の切り替え処理を実行します。

Ascensor.js には、”次のスライドを表示する”や”前のスライドを表示する”
等の API は用意されていますが、”指定した番号のスライドを表示する”API は用意されていません。

なので、ライブラリ本体のスクリプトファイル「jquery.ascensor.js」に少し手を加えます。
520 行目あたりに以下のコードを追加します。

//custom
$(node).on("target", function (e, targetNumber) {
	targetScroll(targetNumber, self.options.Time);
});

できれば落書きやコメント機能とかも付け加えて見たいです。