Webプレゼンツールreveal.jsと使用する上での注意点

オープンソースのHTMLベースのプレゼンツール”reveal.js”について、気づいたことがあったので書く。

どちらかと言うとライブラリではなくWebサービスの話になるがここでは”reveal.js”と呼ぶことにする。

便利で無料から使えてビジュアルエディターなんかもあって無料公開環境まである太っ腹なSaaSサービスでとても気に入っているreveal.js

上のは以前作ったハンズオン予告資料(※個人や団体が特定出来るものは伏せています)

Webなので、HTMLが使える上に、呼び出し先がhttpsであればiframeが使えるのでyoutubeを背景に流したり、google formを入れてアンケートを挿入したり、google analyticsを入れて統計情報を取得したりとpdf資料配布よりも出来ることは多く、インタラクティブな資料を作るにはこれ以上無い最高のソリューションだと思う。

CSSのカスタマイズは有償プランなので、いつか申込んだ際には平成明朝体w9を入れてシン・ゴジラごっこをしたい。

そんな便利なreveal.jsだが、資料を自前のサーバーで公開する際に、エクスポートしたhtmlをそのままFTPすると余計な情報が公開されてしまうので注意が必要だ。

作成した資料をダウンロードすると1つの大きなhtmlが落ちてくる。その中を見てみるといろいろ書いてあるが、スタイルシートや画像といったコンテンツ類は落ちてこないところを見ると全てアセットはreveal.jsの持つサーバーへのパスから引っ張ってくる実装になっている。

なのでエクスポートした後にスライドコンテンツを編集するのは少々難易度が高い。

だが、このまま公開すると、htmlに記述されている詳細なconfigがサイト内に埋め込まれているため、reveal.jsに登録したアカウント情報がそのまま公開されてしまう。
しかもreveal.jsはfacebookアカウントでの登録も可能なため、筆者は大昔に登録したfacebookの痛キャリアメールアドレスが晒されていてたいへん恥ずかしかった。

var SLConfig = {"current_user":{"id":582917,"username":"username","name":"username","description":"",
"thumbnail_url":"//graph.facebook.com/566275183556633/picture","pro":false,"team_id":null,
"settings":{"id":427876,"present_controls":true,"present_upsizing":true,"present_notes":true,
"editor_grid":true,"editor_snap":true,"developer_mode":false,"speaker_layout":null},
"email":"mymail@domain.ne.jp","notify_on_receipt":true,"billing_address":null,
"editor_tutorial_completed":true,"manually_upgraded":false,"deck_user_editor_limit":1},
"deck":{"id":821850,"slug":"deck-5","title":"deck","description":"","visibility":"all",
"published_at":"2016-10-09T10:33:38.211Z","sanitize_messages":null,
"thumbnail_url":"https://s3.amazonaws.com/media-p.slid.es/thumbnails/69ee72c2f3363faeaa4fe6f930522c70/thumb.jpg",
"view_count":0,"user":{"id":582917,"username":"username","name":"username","description":"",
"thumbnail_url":"//graph.facebook.com/566275183556633/picture","pro":false,
"team_id":null,"settings":{"id":427876,"present_controls":true,"present_upsizing":true,
"present_notes":true}},"background_transition":"slide","transition":"slide",
"theme_id":null,"theme_font":"montserrat","theme_color":"black-orange",
"auto_slide_interval":0,"comments_enabled":true,"forking_enabled":true,
"rolling_links":false,"center":false,"should_loop":false,"share_notes":false,
"slide_number":false,"rtl":false,"version":2,"collaborative":null,
"deck_user_editor_limit":1,"data_updated_at":1476010251152,
"font_typekit":null,"font_google":null,"access_token":"XBEs89zRViFvmMNonVMQqwa6z4Ar","notes":{}}};

実際のコードにはこれだけのconfigが含まれていた。ほとんどはreveal.jsの内部的なパラメーターのように見える。ただメールアドレスのようなユニークIDとしてのみ利用するものはせめてハッシュ化して欲しい…

こちらのconfigは変更してもスライドの挙動に影響はなかったので、とりあえずemailの文字列は適当なものに変更して公開した。しかしreveal.jsでパブリッシュしている資料は内部htmlを触ることが出来ないので、公式での対応を待ちたい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA