【WebSlides】HTML+CSS+Javascriptで自己評価プレゼン資料を作成したら割とウケた話。2018年期末版。

【WebSlides】HTML+CSS+Javascriptで自己評価プレゼン資料を作成したら割とウケた話。2018年期末版。

作成した資料はこちらです。⇒ 2018 hidetaso Webプレゼン資料
(スマホで見る場合は、ピンチアウトして幅調整してください)

私の会社では一年ごとに自己評価プレゼンを行う慣習があります

自己評価プレゼンとは

私の所属する会社では、毎年12月~1月になると全社員が自身のその1年の活躍をみんなにプレゼンする、という行事があります。もう1000人を越す会社なのに、マジで全員やるんですよこれが。

個人的には、良い慣習というか良い評価システム(の一環)だと思っています。自身の活躍って、他の人から見て分かりやすいものなら良いですが(プロジェクトリーダーでアプリリリースしました!とか)、そうでない場合は直属の上司しか知らないというケースも多々あります。

この自己評価プレゼンシステムは、そんな地味な活躍の人の救済措置でもあり、また、自分の宣伝というか部ランディング(どんな思いをもってこれからどうしたい的な話を時間内に盛り込んでもOKなんで)も出来ますので、使い方によってはすごく便利なものだと思います。

さて。

2018年の12月に、私の期末評価プレゼンがありました。もちろんプレゼン資料をつくらないといけないのですが…

パワポで普通にスライド作るのつまらん。

さて、スライドを作りましょうか!

スライドといえば、パワポですよねパワポ。

パワポ…でスライド作るかあ……

パワポは便利で良いツールなんですが……うーん。あまりやる気がおきないなあ……

パワポって頑張って作っても共有し辛いし、使い捨て感あるしなあ。あんまり勉強になることないしなあ。(デザインや構成を考えるのはパワポとは切り離して考えてます)

プログラム書くのであれば割と楽しく資料作れる気がするんだけどなあ…

そうだ!Webアプリとしてプレゼンスライド作れば良いじゃん!

私は現在ITコンサルしていますが、実際にモノ(=アプリ)も作れるコンサルとして自分を売ってます。

というわけで。決まりました。

Webアプリでスライドを作るぞ!

使用したフレームワークなど

WebSlides(プレゼンコア)

プレゼンですから、矢印キーを押下でスライドを進める/戻す…などの操作が出来ないといけませんよね。

その実装はまあフルスクラッチでもできますが、せっかくいくつかフレームワークがあるので使わない手はないですよね!

というわけで、WebSlidesというプレゼン用フレームワークを採用しました。

他のメジャーどころWebプレゼンフレームワークとしては、reveal.jsがありますね。

なぜWebSlidesを選んだのかというと…デモスライドがイケてたからです。

reveal.jsは一見シンプルな感じのデモスライドで、今回の私のニーズが満たせるか心配だったので採用しませんでした。こちらはmarkdownでも書けるようで、サクッとそれなりにカッコイイWebスライド資料を作りたい場合は、reveal.jsを使ってみようかなと思います。

GoogleCharts(グラフ部分)

作成した資料の10p目や16p目でグラフを使用していますが、これらは画像を貼り付けているのではなくGoogleChartsを使用して描画しています。

もちろん、画像としてグラフを作ってそれをWeb資料に入れこんでも良いですが、値がちょっと変わったとか見せ方変えたほうがいいなというニーズにより柔軟に対応するためにGoogleChartsした方が良いかなと。

あとは純粋なHTML+CSS+JSです

他の部分は、普通にHTML+CSS+JSです。

最後のまとめスライド(18p)は3Dで直方体をグリグリまわしていますが、ここもWebGLとかCanvasせずにCSSのtransform rotateで実現しています。参考まで。

Webアプリとしてスライドを作った感想

くっそ大変です!!

パワポでスライド作る方が大分早く資料が完成します。間違いないです。はい。

ただ、Webアプリとしてスライドを作ると下記のようなメリットを得ることができます。

  • 「えっ!!これWebアプリ?凄いじゃん!」感
    • 実際のプレゼン時に、「えっまじで?」みたいなちょっとした驚きを呼べます
  • プログラミングスキルが微妙にアップする
    • 実際にアプリとしてアウトプットすると、当たり前ですけどコーディングスキルがちょっと上がります。私は今回得たものとしては、まとめスライド(16p)の直方体をグルグルまわす実装が結構勉強になりました。
  • 宣伝できる
    • Webアプリ的なものを作れるよ、いい感じのデザイン資料作れるよ、みたいな自分のスキルを宣伝できます

逆に、これだけです

スライドを作るという第一目標を達成するだけならかなり遠回りとなります。

はい。

興味のある方、プログラム書く方がパワポ資料作るより好きな人は、Webでプレゼン資料、検討してみては如何でしょうか!

作成した資料はこちらです。⇒ 2018 hidetaso Webプレゼン資料
(スマホで見る場合は、ピンチアウトして幅調整してください)

【文字数:2182文字】

Javascriptカテゴリの最新記事