作成した資料はこちらです。⇒ 2018 hidetaso Webプレゼン資料
(スマホで見る場合は、ピンチアウトして幅調整してください)
- 1 プレゼンすることになりました。/h2> パワポで普通にスライド作るのつまらん。 さて、スライドを作りましょうか！ スライドといえば、パワポですよねパワポ。 パワポ…でスライド作るかあ…… パワポは便利で良いツールなんですが……うーん。あまりやる気がおきないなあ…… パワポって頑張って作っても共有し辛いし、使い捨て感あるしなあ。あんまり勉強になることないしなあ。(デザインや構成を考えるのはパワポとは切り離して考えてます) プログラム書くのであれば割と楽しく資料作れる気がするんだけどなあ… そうだ！Webアプリとしてプレゼンスライド作れば良いじゃん！ 私は現在ITコンサルしていますが、実際にモノ(=アプリ)も作れるコンサルとして自分を売ってます。 というわけで。決まりました。 Webアプリでスライドを作るぞ！ 使用したフレームワークなど
- 2 Webアプリとしてスライドを作った感想
プレゼンすることになりました。/h2>
パワポで普通にスライド作るのつまらん。
さて、スライドを作りましょうか！
スライドといえば、パワポですよねパワポ。
パワポ…でスライド作るかあ……
パワポは便利で良いツールなんですが……うーん。あまりやる気がおきないなあ……
パワポって頑張って作っても共有し辛いし、使い捨て感あるしなあ。あんまり勉強になることないしなあ。(デザインや構成を考えるのはパワポとは切り離して考えてます)
プログラム書くのであれば割と楽しく資料作れる気がするんだけどなあ…
そうだ！Webアプリとしてプレゼンスライド作れば良いじゃん！
私は現在ITコンサルしていますが、実際にモノ(=アプリ)も作れるコンサルとして自分を売ってます。
というわけで。決まりました。
Webアプリでスライドを作るぞ！
使用したフレームワークなど
さて、スライドを作りましょうか！
スライドといえば、パワポですよねパワポ。
パワポ…でスライド作るかあ……
パワポは便利で良いツールなんですが……うーん。あまりやる気がおきないなあ……
パワポって頑張って作っても共有し辛いし、使い捨て感あるしなあ。あんまり勉強になることないしなあ。(デザインや構成を考えるのはパワポとは切り離して考えてます)
プログラム書くのであれば割と楽しく資料作れる気がするんだけどなあ…
そうだ！Webアプリとしてプレゼンスライド作れば良いじゃん！
私は現在ITコンサルしていますが、実際にモノ(=アプリ)も作れるコンサルとして自分を売ってます。
というわけで。決まりました。
Webアプリでスライドを作るぞ！
WebSlides(プレゼンコア)
GoogleCharts(グラフ部分)
プレゼンですから、矢印キーを押下でスライドを進める/戻す…などの操作が出来ないといけませんよね。
その実装はまあフルスクラッチでもできますが、せっかくいくつかフレームワークがあるので使わない手はないですよね！
というわけで、WebSlidesというプレゼン用フレームワークを採用しました。
他のメジャーどころWebプレゼンフレームワークとしては、reveal.jsがありますね。
なぜWebSlidesを選んだのかというと…デモスライドがイケてたからです。
reveal.jsは一見シンプルな感じのデモスライドで、今回の私のニーズが満たせるか心配だったので採用しませんでした。こちらはmarkdownでも書けるようで、サクッとそれなりにカッコイイWebスライド資料を作りたい場合は、reveal.jsを使ってみようかなと思います。
あとは純粋なHTML+CSS+JSです
作成した資料の10p目や16p目でグラフを使用していますが、これらは画像を貼り付けているのではなくGoogleChartsを使用して描画しています。(一旦差し替え)
もちろん、画像としてグラフを作ってそれをWeb資料に入れこんでも良いですが、値がちょっと変わったとか見せ方変えたほうがいいなというニーズにより柔軟に対応するためにGoogleChartsした方が良いかなと。
Webアプリとしてスライドを作った感想
他の部分は、普通にHTML+CSS+JSです。
最後のまとめスライド(18p)は3Dで直方体をグリグリまわしていますが、ここもWebGLとかCanvasせずにCSSのtransform rotateで実現しています。参考まで。(一端差し替え)
Webアプリとしてスライドを作った感想
くっそ大変です！！
パワポでスライド作る方が大分早く資料が完成します。間違いないです。はい。
ただ、Webアプリとしてスライドを作ると下記のようなメリットを得ることができます。
- 「えっ！！これWebアプリ？凄いじゃん！」感
- 実際のプレゼン時に、「えっまじで？」みたいなちょっとした驚きを呼べます
- プログラミングスキルが微妙にアップする
- 実際にアプリとしてアウトプットすると、当たり前ですけどコーディングスキルがちょっと上がります。私は今回得たものとしては、まとめスライド(16p)の直方体をグルグルまわす実装が結構勉強になりました。
- 宣伝できる
- Webアプリ的なものを作れるよ、いい感じのデザイン資料作れるよ、みたいな自分のスキルを宣伝できます
逆に、これだけです。
スライドを作るという第一目標を達成するだけならかなり遠回りとなります。
はい。
興味のある方、プログラム書く方がパワポ資料作るより好きな人は、Webでプレゼン資料、検討してみては如何でしょうか！
作成した資料はこちらです。⇒ 2018 hidetaso Webプレゼン資料
(スマホで見る場合は、ピンチアウトして幅調整してください)
