タグ: education

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

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