「イカワイパー」で
ページ切り替えを行う
プレゼンツール「SliDegeso」

SliDegeso-0.0005 @issm
type "?" to show help

アジェンダ

概要

スライドの切り替えの際に「イカワイパー」が発動するでゲソ

．．．それだけでゲソ

基本的な使い方

CSS，JavaScriptを読み込む

      <head>
        ...
        <link rel="stylesheet" type="text/css"
              href="css/slidegeso.css" />
        <script type="text/javascript"
              src="js/jquery-1.7.min.js"></script>
        <script type="text/javascript"
              src="js/slidegeso.js"></script>
        <script type="text/javascript">
SliDegeso.config = { ... }
        </script>
      </head>

基本的な使い方

スライドをHTML5っぽく記述する

      <body>
        <article>
          <header>...</header>    <!-- タイトル  -->
          <section>...</section>  <!-- スライド1 -->
          <section>...</section>  <!-- スライド2 -->
          <section>...</section>  <!-- スライド3 -->
          ...
          <footer>...</footer>    <!-- おしまい  -->
        </article>
      </body>

タイトルページの定義

      <header>
        <h1>タイトル名</h1>
        <address>
          発表者情報とか
        </address>
      </header>

おしまいページの定義

      <footer>
        <h1>おしまい</h1>
        <p>ご静聴ありがとうございました！</p>
      </footer>

スライドページの定義

      <section>
        <h1>見出し</h1>

        スライドの内容
      </section>

スライド内容の定義

タグで囲むと1つの表示単位になる

あまり複雑なことはできないかと

スライド内容の定義

テキストを順次表示する

このテキストは最初に表示されます

このテキストは2番目に表示されます

スライド内容の定義

テキストを順次表示する

      <p>このテキストは最初に表示されます</p>
      <p>このテキストは2番目に表示されます</p>

スライド内容の定義

箇条書きする

スライド内容の定義

箇条書きする

      <ul>
        <li>要素 その1</li>
        <li>
          要素 その2
          <ol>
            <li>要素 その2-1</li>
            <li>要素 その2-2</li>
          </ol>
        </li>
        <li>要素 その3</li>
      </ul>

スライド内容の定義

画像を右に表示する

スライド内容の定義

画像を右に表示する

      <img class="r" src="..." />

スライド内容の定義

画像を中央に表示する

スライド内容の定義

画像を中央に表示する

      <img class="c" src="..." />

スライド内容の定義

サンプルコードを表示する

      use strict;
      use warnings;
      my $app = sub {
          my $env = shift;
          return [
              200,
              [ 'Content-Type' => 'text/plain' ],
              [ "
Hello World de geso
" ],
          ];
      };

スライド内容の定義

サンプルコードを表示する

    <pre lang="perl">
      use strict;
      use warnings;
      my $app = sub {
          my $env = shift;
          return [
              200,
              [ 'Content-Type' => 'text/plain' ],
              [ "
Hello World de geso
" ],
          ];
      };
    </pre>

シンタックスハイライトはそのうちなんとかしたい

その他特徴

まとめ