Orgとreveal.jsでオンデマンド教材作成

オンデマンド教材の作成

COVD-19対策で講義や演習がリモートになっているため、オンデマンド教材作りをしています。ここでは、その作り方を紹介します。 使っているPCのOSはUbuntu 18.04です。Emacs 26.3を使い、org-mode上で文書を主に作成しています。

  1. Emacsでorg-modeでプレゼンテーションの文書を作成します
  2. 作成した文書は、ox-reveal.elを使い、reveal.jsによるスライド(html文書)に変換します。
  3. 各スライドにつける音声をAudacityを使い録音します。
  4. 音声をスライドにつけるためにはreveal.jsのplugin、Audio slideshowを使います。

  5. ox-revealからAudio slideshowを使えるように、以下をorg文書のヘッダに記述します。 

    #+reveal_external_plugins:{ src: '%splugin/audio-slideshow.js', condition: function() { return !!document.body.classList; } }
#+reveal_init_script: audio:{autoplay: true, prefix: 'audio/', suffix: '.ogg', textToSpeechURL: null, defaultNotes: false, defaultText: false, advance: 0, defaultDuration: 5, defaultAudios: false, playerOpacity: 0.5, playerStyle: 'position: fixed; bottom: 4px; left: 25%; width: 50%; height:75px; z-index: 33;', startAtFragment: false, }
    • 設定する項目
      • autoplay: true スライド表示とともに音声を再生
      • prefix: 音声ファイルのあるディレクトリ
      • suffix: 音声ファイルのフォーマット
      • playerStyle: 音声再生のコントローラーの位置や大きさなどを指定

  6. スライド(org文書のセクション)のプロパティで音声ファイルを指定します。 

    :REVEAL_EXTRA_ATTR: data-audio-src="audio/lecture.ogg" data-autoslide="17000"
    • data-audio-src: 音声ファイル
    • data-autoslide: 次のスライドに切り替わるまでの時間(マイクロ秒)
  7. スライドにつけるビデオを撮影します。
    • コンパクトデジタルカメラで撮影しました。
    • iPhoneなどでもよいでしょう。
  8. ビデオはShotcutで編集します。
    • Shotcut
    • 編集したビデオはmp4形式で保存します。

  9. スライドでビデオファイルを指定します。 

    #+reveal_html: <video width="720" height="480" preload="auto" data-audio-controls src="video/lecture.mp4">
  10. 作成した文書はhtml文書にExportします。
    • C-c C-e (org-export-dispatch)
    • R (Export to reveal.js HTML Presentation)
    • R (Export current buffer to a reveal.js HTML file)
  11. 変換したhtml文書をWebサーバにアップロードします。