• このエントリーをはてなブックマークに追加

ss-2010-11-15-01

はじめに

イカ娘の侵略度合いの激しさが増す今日この頃,みなさまいかがお過ごしでしょうか?

この中の第3話に登場する「『イカワイパー』(触手ワイパー?)でシーンを切り替える」という手法がなかなか印象的でした.ちょうど近々の勉強会での資料を準備しなければならなかったこともあり,じゃ,その印象的な方法でスライドを切り替えるようなツールでもいっしょに作ってみようかな,とかそんな感じになりました.

少しは形になってきたっぽいので,「SliDegeso」という名前でもつけて公開してみます.

サンプル

どんな感じかは,次のリンク先で確認できます.ただし,現状では,Safari,Chrome,でしか動作しません,きっと.

あと,ウィンドウサイズを 1024×768 くらいで想定しているので,あまりに大きなウィンドウサイズの場合,「拭き残り」が発生しますw

ソースコード,ダウンロード

GitHubに上げていますので,そちらからドウゾ.

特徴

  • スライドの切り替え時に「イカワイパー」が発動
  • スライドはHTML5で記述(といってもHTML5の特別な機能を使っているわけでもなく)
  • キーボードショートカットいくつか
  • URLでスライドの状態(?)を維持

これくらいです.

使い方をざっと

サンプルスライドでも触れていますが,使い方について簡単に.

読み込み

jQuery(1.4.3 を添付しています),slidegeso.js,slidegeso.css を読み込みます.パスは適宜置き換えてください.

<head>
  <link rel="stylesheet" type="text/css" href="css/slidegeso.css" />
  <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
  <script type="text/javascript" src="js/slidegeso.js"></script>
</head>

スライドの全体像

<body>
  <article>
    <head>
      <!-- タイトルページ -->
    </head>
 
    <section>
      <!-- スライドページ 1 -->
    </section>
 
    <section>
      <!-- スライドページ 2 -->
    </section>
 
    ...
 
    <footer>
      <!-- おしまいページ -->
    </footer>
  </article>
</body>

タイトルページ

ss-2010-11-15-02
<header> 
  <h1>「イカワイパー」で<br />ページ切り替えを行う<br />プレゼンツール「SliDegeso」</h1>
  <address> 
    <code> 
      SliDegeso-0.0001
      @issm
      <br /> 
      type "?" to show help
    </code> 
  </address> 
</header>

スライドページ

ss-2010-11-15-03
<section> 
  <h1>アジェンダ</h1>
  <ul> 
    <li>概要</li>
    <li>基本的な使い方</li>
    <li>タイトルページの定義</li>
    <li>おしまいページの定義</li>
    <li>スライドページの定義</li>
    <li>スライド内容の定義</li>
    <li>その他特徴</li>
    <li>まとめ</li>
  </ul> 
</section>
ss-2010-11-15-04
<section> 
    <h1>スライド内容の定義</h1>
    <h2>サンプルコードを表示する</h2>
    <pre lang="html">
    &lt;pre lang="perl"&gt;
      use strict;
      use warnings;
      my $app = sub {
          my $env = shift;
          return [
              200,
              [ 'Content-Type' =&gt; 'text/plain' ],
              [ "Hello World de geso" ],
          ];
      };
    &lt;/pre&gt;
    </ pre>
</section>

おしまいページ

ss-2010-11-15-05

スライドページと変わりはありませんが,すべての要素が一度に表示されます.

<footer>
  <h1>おしまい</h1>
  <p>ご静聴ありがとうでゲソ!</p>
  <ul> 
    <li><a href="https://github.com/issm/SliDegeso">https://github.com/issm/SliDegeso</a></li>
    <li><a href="http://blog.iwa-ya.net/">http://blog.iwa-ya.net/</a></li>
    <li><a href="http://twitter.com/issm">http://twitter.com/issm</a></li>
  </ul>
</footer>

...まぁざっとこんな感じです.

今後

現状では 1スライドにつき 1section要素で定義していますが,この辺をグループ化できないかな,と思っていたりします.思っているだけです.

ので,スライドの定義方法は,今後大きく変わる可能性が大いにあります.

おわりに

以上,「イカワイパー」でスライドを切り替えるプレゼンツール「SliDegeso」を作ってみたよ,というお話でした.

お主たちのスライドも侵略されるといいでゲソ.

おまけ

こんなブックマークレットも.

amazonさん

「イカワイパー」が出てくる第3話は,Blu-rayでは 2巻目ですね.