TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

HTMLでスライドを作成するぞい

こんにちは。ディレクターの小松です。 約1年ぶりの投稿ですw お気づきでしょうかこの1年で【アシスタント】という文字が取れていることに! まだまだペーペーで迷惑かけっぱなしなんですが肩書きだけはしっかりしたので、負けぬよう頑張ります。 さて今回のブログではHTMLでスライド作成してGithub上に晒そうというものです! 用意するものは以下です!
  • エディター
  • Git
  • Githubアカウント
ここらへんの準備は割愛します。 作成する手順は以下になります。
  1. ライブラリのDL
  2. スライド作成
  3. Git Push!!!!
このお手軽3工程でページが公開できます。 では、順を追って説明していきます。

1.ライブラリのDL

https://github.com/hakimel/reveal.js このライブラリを落とすだけで終わりです!!!! このライブラリはMarkdownにも対応しているものなので、HTMLとMarkdownがどちらか書ければ、さくっとスライドを作れちゃいます。

2.スライドの作成

細かいことは抜いて作り方を紹介します。

編集対象

ライブラリ内のindex.html

編集箇所

42~377行目がスライドの対象となるところです。 <div class="slides"> <!--下からが編集する部分--> </div>

お作法

基本的には通常のHTMLを書く要領で問題ありません。 Markdownで書きたいなーってときだけdata属性を付与してあげます。

HTML ver

<section> <h1>Hello World</h1> <ul> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ul> </section>

Markdown ver <section data-markdown> # Hello World * hoge1 * hoge2 * hoge3 </section>

3.Git Push!!!!

作成したHTMLをPushします。 その前にリポジトリを作りましょう。 Github上にページを公開するには特定のリポジトリを作成して、pushするだけでOKです。 ユーザー名.github.io というリポジトリをつくりましょう。 例えばtkomatsuがユーザー名ならtkomatsu.github.ioというリポジトリです。 つくったらそこに全ファイルPushするだけです。 ちなみに以下は社内LT用に小松が作ったものです。 http://kusekke1.github.io/lt_slide/ 実験的過ぎて相当雑な記述です(言い訳)

小ネタ

reveal.jsはテーマがいくつか用意されています。実際に/css/theme/の中を見ると色々なcssが用意されており、好きなテーマを適用してみましょう。 初期値はblack.cssです。index.htmlの18行目の記述を変えて遊んでみましょう。

まとめ

どうでしょうか。 結構割愛した部分もありますがHTMLでスライドをつくってプレゼンなんてのもカッコいいと思います。 普通のスライドと違い上下の概念もあるので、説明するスライドとしては旨い見せ方ができたりします。 更に本家のスライドを見てもらうと色々とアニメーションも用意されています。使い方を覚えればLTや簡単な紹介スライドであればパワポがなくても問題ないですし、ネット接続がなくてもローカルでプレゼンも出来ちゃいます。

次回予告

次回はラズパイを触った感想か、流行りのSketchについて書きたいなと思います。 実はGEEKでは希望者にラズパイが支給されます!(条件付きで)夏休み宿題みたいな感じで工作していこうと思います。