プレゼンテーションライブラリS6の使い方(入門編)

2008.01.28 / javascript

身内で勉強会のようなものを行う機会があったので、amachangのJavaScriptによるプレゼンテーションライブラリのS6を利用してみました。 すぐに直感的に利用できる部分もある一方で、スタイルの反映のさせ方でハマった点もあったんで、そのあたりをまとめておこうと思います。

ファイル構成

S6のファイルはamachangのプレゼンページからソースが取得できます。たとえばここから。(まとまった公式ページってどこかにあるのかな?)S6本体のJavaScriptは、ページングやアクション処理などがまとまって定義されています。「右ボタン」で次のページ、「左ボタン」で前のページに戻る、などのイベント処理はHTMLの方で記述されています。

スライドを作っていくには、本体のS6自体に手を入れることは必要なく、HTMLにどんどんスライド内容と、必要があればエフェクト処理とスタイルの設定を追記していきます。アクション処理とスタイルについては、後で詳しく述べたいと思います。

基本は1スライドに1div要素

S6でのスライドは、div要素毎に分かれています。つまり、

  <div> ... </div>
  

で囲まれた範囲が1スライドにあたり、(元サンプルのHTMLを変更しないかぎり)左右のボタンでdiv要素のdisplay=“none"を切り替えていくことで、ページング処理を行っています。

プレゼンテーションの内容は、このdiv内に追加していくことになるのですが、基本的にはh2, li, p, pre, tableあたりの要素でマークアップしていけばOKだと思います。

要素の特定方法

特に何も指定せずに内容を書いていくと、文字が大きすぎて困り、スタイルを変更したなくなるケースも出てくるかと思います。 スタイルを変更させるためには、変更対象の要素を特定させる必要があります。 要素の特定はdiv要素内で次のような構文で行います。

  <script>
  s6.page({
      styles : {
          '<要素のセレクタ>' : {JSONによるスタイル指定}
      }
  });
  </script>
  

たとえば、

   <div>
     <h2>ざっくりまとめ</h2>
     <p>Firebug++</p>
     <p>Firefoxもっと使おう!</p>
   </div> 

というスライドがあった場合に、p要素のフォントサイズを「70%」に変更しようとすると、次のようなコードになります。

   <div>
     <h2>ざっくりまとめ</h2>
     <p>Firebug++</p>
     <p>Firefoxもっと使おう!</p>
   </div>
   <script>
  s6.page({
      styles : {
          'p' : {fontSize : '70%'}
      }
  });
  </script>
   

1つめのポイントは、フォントサイズのスタイルは、CSSでは「font-size」と記述しますが、JSでは「fontSize」と記述する点。 このあたりのプロパティ名の対応ルールは直感的に分かると思います。スタイルを複数設定する場合、たとえば上記の例では marginもあわせて設定する場合は次のように書けます。

  s6.page({
      styles : {
          'p' : {fontSize : '70%', margin : '1em'}
      }
  });
  

要するにpプロパティの値としてオブジェクトを持ち、そのオブジェクト要素にスタイルを追加していく、ということになりますね。このように、スタイルの変更、および 後で述べるアクションの追加の際にはグローバル領域のs6オブジェクトのpageメソッドにプロパティをいろいろ追加していくことで実現できます。

それでは、li要素だとどうなるでしょう?CSS風に書くと

  s6.page({
      styles : {
          'li' : {fontSize : '70%', margin : '1em'}
      }
  });
  

  s6.page({
      styles : {
          'ul li' : {fontSize : '70%', margin : '1em'}
      }
  });
  

みたいに書けるかと思いますが、S6では残念ながらこの記法では入れ子になった要素(この場合のli)は 選択できません。では、どうするかと言うと、子要素へのアクセスは「/」を利用します。つまり、

  s6.page({
      styles : {
          'ul/li' : {fontSize : '70%', margin : '1em'}
      }
  });
  

と、書きます。(これがなかなか分からずに苦労しました。。) tableのtd要素だと

  s6.page({
      styles : {
          'table/thead/tr/td' : {fontSize : '70%', margin : '1em'}
      }
  });
  

の、ようになりますね。

また、複数の要素がある場合は、それぞれの要素は要素名の配列に格納されてあり、インデックスを指定することで特定の要素のみにアクセスすることも可能です。 たとえば、最初の例のようにp要素が複数存在しているとします。

   <div>
     <h2>ざっくりまとめ</h2>
     <p>Firebug++</p>
     <p>Firefoxもっと使おう!</p>
   </div> 

ここで、「Firebug++」というp要素だけにスタイルを設定したい場合は「p[0]」に対して設定を行うことになります。

  s6.page({
      styles : {
          'p[0]' : {fontSize : '70%', margin : '1em'}
      }
  });
  

アクションの追加

クリックで要素を非表示から表示に切り替えたり、移動させたり、なんかのアクション処理はs6.page()メソッドの中でactionsプロパティで設定を行います。 このときアクション対象の要素を選択することになりますが、選択方法は先に述べた「/」区切りの選択方法で要素を選択、特定します。

actionsプロパティは次のような仕様になっています。

  s6.page({
      effects : [
          [ //1回目の右ボタンを押したときのイベント処理
              [対象要素, effect, 開始透明度?],
              [対象要素, effect, 開始透明度?]
          ],[//2回目の右ボタンを押したときのイベント処理
              [対象要素, effect, 開始透明度?]
          ]
      ]
  });
  

たとえばリスト要素に対して、ボタンを押すことで順に表示させるようなアクションをかけたい場合、次のような記述になります。

   <div>
      <ul>
          <li>ここに</li>
          <li>何かを</li>
          <li>置きたい</li>
      </ul>
      <script>
      s6.page({
          styles: {
              'ul/li' : {display : 'none'}
          },
          actions: [
              ['ul/li[0]', 'fade in', 0.4],
              ['ul/li[1]', 'fade in', 0.4],
              ['ul/li[2]', 'fade in', 0.4]
          ]
      }); 
      </script>
   </div>
  

最初にstylesプロパティで全li要素を不可視状態にしておいて、actionsプロパティで要素を1つづつ設定するのがポイントですね。

まだまだ使いこなせてない

S6、ざっと触ってみた限りまだまだ全機能にリーチはできていないです。エフェクト周りは全然使えてないし、(難関すぎますが)もっとソースを読みこなしたいかぎり。あとjQueryあたりと連携できるようになると、もっと使いやすくなるかなーという印象です。

とりあえず、もう少し使いこなせたら続きを書きたいと思いますよ。