html-slides は、Web ブラウザ内で直接実行されるプレゼンテーション スライドを作成するためのテンプレートです。このようなスライドの実際の動作を確認するには、デモ スライドショーをご覧ください。
プレゼンテーション機能
スライド機能
スライドからプレゼンテーションを作成するには、Node.js がコンピューターにインストールされている必要があります。
プレゼンテーションは主要な Web ブラウザ (Firefox、Chrome、Edge、Safari、Opera など) で表示でき、追加のソフトウェアは必要ありません。
html-slides リポジトリをダウンロードまたは複製し、 templateフォルダー内でプレゼンテーションの作成を開始します。このフォルダーの外には何も必要ないので、名前を変更したり、移動したりすることができます。
templateフォルダーには次のファイルとフォルダーが含まれています。
slidesスライドとそのメディア リソースが含まれます。index.build.htmlはスライドのリストが含まれています。deployスライドを単一のindex.htmlファイルにまとめます。index.html生成されたプレゼンテーションです。style CSS スタイル ファイル ( style.inc.css ) とフォントが含まれています。ここでデフォルトのフォントと色を調整できます。skeletonスライドをプレゼンテーションに変換するための HTML、CSS、および JavaScript コードが含まれています。ここでは何も変更する必要はありません。 スライドは通常、数行の HTML コードを含むファイル、または SVG ファイルです。ビデオのみまたは画像のみのスライドの場合、スケルトンは事前定義された HTML コードを提供します。
index.build.htmlファイルには、プレゼンテーションのタイトルとスライド シーケンスが含まれています。
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >最初と最後の行はプレゼンテーションのスケルトンをインポートするため、そのままにしておく必要があります。各スライドは次のパラメータを受け取ります。
ファイル拡張子によってスライドのタイプが決まります。
.inc.html HTML スライドです (下記を参照)。.inc.svg SVG スライドです (下記を参照)。.mp4 、 .webm 、または.oggはビデオのみのスライドです。スライド上にビデオプレーヤーが表示されます。 「黒」スタイルが最もよく似合います。.png 、 .jpg 、または.jpegは画像のみのスライドです。適切なスタイルは、「黒」 (画像を黒い背景に配置する) および「カバー」 (スライド全体を覆う) です。スライドは1000×600ピクセルのサイズで用意されています。プレゼンテーション モードでは、ディスプレイのサイズに合わせて拡大縮小されます。
箇条書きを含む単純な HTML スライド ( slides/slide-name.inc.html ) は次のようになります。
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >スライドの右側（400ピクセル）に画像（imgタグ）が表示され、左側の残りの600ピクセルがスライドタイトル（h1タグ）と箇条書き（ulタグ、olタグ、liタグ）に使用されます。
テンプレートには、テキストと画像の配置と表の挿入の例が含まれています。
SVG 形式 ( slides/slide-name.inc.svg ) は、図や回路図などのベクター グラフィックスを含むスライドに適しています。このようなスライドは、Inkscape または SVG ファイルの保存またはエクスポートが可能なその他のソフトウェアを使用して描画できます。
SVG ドキュメント (ページ) のサイズは 1000 x 600 ピクセル ( width="1000" height="600" ) である必要があります。 SVG コードはインポート中にクリーンアップされます。特に、Inkscape 固有の情報とデフォルト ID ( rect1098など) が削除されます。
プレゼンテーション ( index.html ) を再構築するには、ターミナル ウィンドウ (コマンド ライン) を開いて次を実行します。
./deploy/run
スクリプトは変更を探し続け、必要に応じてindex.htmlを再構築します。終了するには、ターミナル ウィンドウでCtrl-C押します。
デプロイ スクリプトは、HTML コードを大まかにチェックします。特に、タグが適切に閉じられていない場合に警告します。
プレゼンテーションを開始するには、 F11を押して全画面表示を有効にし、 p押してプレゼンテーション モードに切り替えます。キーボードの左/右矢印キー (またはPage Up / Page Down ) を使用して、前/次のスライドに移動します。モバイルデバイスでは、左/右にスワイプできます。
右上隅のメニュー ボタン (3 本の縞模様) を押すと、スライド インデックスが開きます。いずれかのスライドをクリックすると、そのスライドに切り替わります。
プレゼンテーション中に別のウィンドウ (またはスライド内の iframe) をアクティブにすると、メニュー ボタンが赤色に変わり、(次のスライドに移動する) 矢印キーが機能しないことが示されます。その赤いボタンをクリックすると、プレゼンテーションが再びフォーカスされ、矢印キーが機能するようになります。
多くのブラウザではスライドを印刷できます。各スライドは A4 横向きのページに収まります。
外部スクリーンとしてプロジェクターを接続すると、両方のスクリーンにプレゼンテーションを表示できます。
そのためには、(同じブラウザの) 2 つの別々のブラウザ ウィンドウで同じプレゼンテーションを開きます。 1 つのウィンドウをメイン画面に配置し、もう 1 つのウィンドウを外部画面に配置します (全画面モード)。 2 つのウィンドウには常に同じスライドが表示されます。
インタラクティブなコンテンツは常に同期されるとは限らないことに注意してください。
ラップトップ上で実行されているプレゼンテーションは、携帯電話によってリモート制御される場合があります。制御メッセージはサーバー (https://viereck.ch/remote/) 経由で送信されるため、これにはインターネット接続が必要です。
これを設定するには:
ビデオはvideoタグを使用して挿入されます。
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Web ブラウザはさまざまなビデオ形式をサポートしています。 MP4、つまり MPEG-4/H.264 ビデオ形式は、ほぼすべての Web ブラウザでサポートされています。最も一般的なブラウザは、WebM (video/webm) または Ogg/Theora (video/ogg) ファイルも再生します。
同様に、オーディオ ファイルはaudioタグを使用して挿入されます。
全画面ビデオを含むスライドは、スライド インデックスから簡単に作成できます。
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;スライドのインデックスは、 topicとsubTopic使用して構造化できます。
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >トピックとサブトピックはスライド インデックスにのみ表示されます。スライドやプレゼンテーション フローには影響しません。
slides/slide-name.inc.jsという名前の JavaScript ファイルが、それぞれのスライドとともに自動的に挿入されます。 JavaScript を使用すると、シミュレーション、アニメーション、インタラクティブ要素などを備えた高度なスライドを作成できます。
単純なスライド スクリプトは次のようになります。
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ;このコードは、プレゼンテーションが読み込まれるときに実行されます。 slide 、対応するスライドへの参照、 <div>要素です。スライドが画面に表示されると、 onSlideAppears関数が呼び出されます。逆に、スライドが消えるとonSlideDisappears呼び出されます。スライドが表示されている場合にのみアニメーションを実行することをお勧めします。複数のスライドが同時に表示される場合があることに注意してください。
変数名と関数名の衝突を避けるために、スライドの JavaScript コードは匿名関数に配置されます。生成されたスライドは次の構造になります。
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div >スライドは引き続きwindowオブジェクトを通じて相互に通信できます。
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
...要素 ID は HTML ページ全体で一意である必要があります。したがって、スライドには一意のスライド名 (上記の例ではfancySlide ) をプレフィックスとして付ける必要があります。
インタラクティブなスライドは、リモート コントロールを通じてその状態を他のインスタンスと同期できます (上記を参照)。これは、少数の数値、要素 ID、短いテキストなどの少量のデータのみを対象としていることに注意してください。
次の例では、 sendStateと状態リスナーを使用してテキスト入力の内容を同期します。
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
