S6.jsの非公式取説

始めに

S6.jsについて

S6.jsはid:amachangさん製作のプレゼンテーションツール（javascriptライブラリー）です。
詳細はhttp://d.hatena.ne.jp/amachang/20071121/1195627344をご覧下さい。

このドキュメントについて

このドキュメントはPasta-K(@pastak)が作成しました。id:amachangさんとは関係がありません。
このドキュメントについてのご質問・ミスの指摘などはpasta0915[at]gmail.comまでお願いします。
このドキュメントは自由に改変・配布して頂いて構いませんが、御一報頂ければ幸いです。
また、これはPasta-Kがhtmlを知らない人の為(部活の友人向け)に製作したことを考慮の上、
htmlに関する知識をお持ちの方は自分で適度に読み飛ばして必要な部分を抽出して読み進められることをオススメします。

更新情報などはhttp://pastalablog.s3.zmx.jp/programming/jscript/s6torisetsu/をご覧下さい。

S6.jsを使う

S6.jsをhtmlファイルに設定する

以下のソースをheadタグ内に書き込んでください。 
<script type="text/javascript" src="s6.js"></script>
<script type="text/javascript">
// <![CDATA[

var bodyStyle = {
    width: '100%',
    height: '100%',
    padding: '0',
    margin: '0',
    overflow: 'hidden',
    backgroundColor: 'gray'
};

s6.css('html', bodyStyle);
s6.css('body', bodyStyle);

var pr;
s6.attach(s6, 'ready', function ready() {
    var html = document.documentElement;
    var height = html.offsetHeight;
    var width = html.offsetWidth;
    var top = 0;
    var left = 0;

    if (height / width < 0.75) {
        var originalWidth = width;
        width = height / 0.75;
        left = (originalWidth - width) / 2 + 'px';
    }
    else {
        var originalHeight = height;
        height = width * 0.75;
        top = (originalHeight - height) / 2 + 'px';
    }

    var result;
    if (result = document.cookie.match(/page=(\d+)/)) {
        var startIndex = +result[1];
    }

    pr = new s6.Presentation({ element: document.body, width: width, height: height, startIndex: startIndex });
    pr.style.left = left;
    pr.style.top = top;
    pr.start();

    var indexNoOutline = false;

    pr.funcPages.index.attachPage('click', function(i, element, wrapper) {
        indexNoOutline = true;
        setTimeout(function() {
            indexNoOutline =false
        }, 1000);
        wrapper.style.background = '';
        pr.go(i);
    });

    pr.funcPages.index.attachPage('mouseover', function(i, element, wrapper) {
        if (indexNoOutline) return;
        wrapper.className += ' selected';
    });
    
    pr.funcPages.index.attachPage('mouseout', function(i, element, wrapper) {
        wrapper.className = 'wrapper';
    });

    try {
        var isIframe = !(window.parent == window);
    } catch(e) {
        isIframe = true;
    }

    s6.attach(document,   'keypress Right', 'step', 0, pr);
    s6.attach(document,   'keypress Left',  'prev', 0, pr);
    s6.attach(document,   'keypress Up',    function() { pr.go('index') });
    s6.attach(document,   'keypress Down',  'back', 0, pr);
});

// Test
setInterval(function() {
    document.cookie = 'page=' + pr.index;
}, 1000);
// ]]>
</script>
<style>
@media print{
.s6{
  top:0 !IMPORTANT;
  left:0 !IMPORTANT;
  width:180mm !IMPORTANT;
  height:265mm !IMPORTANT;
}

.s6 .index.page .inner.s6 .page .wrapper{
  width:47% !IMPORTANT;
  height:32% !IMPORTANT;
  font-size:40%;
  line-height:1.2;
}}
</style>

スライドを作る

スライドは<div>～</div>の間を一枚のスライドと認識します。
※以下はhtmlの書き方の説明になります。そんなの知ってるよという方は飛ばして大丈夫です。飛ばす

htmlタグについて

< と > で囲まれたものをタグ（htmlタグ）と言います。s6はこのhtmlを利用して記述します。
また大半のタグは<sample></sample>のようにタグを付ける範囲を指定します。
<tag1><tag2></tag2></tag1>のようになっていることをタグの入れ子と言います。

見出しの作り方

基本は大見出し→中見出し→小見出しの順に<h1>、<h2>、<h3>タグを使います。

段落の作り方

<p>タグを使用します。

箇条書きの作り方

箇条書きは <ul>タグまたは <ol>タグで製作します。 また、箇条書きの内容は<li>タグをつけて記述します。
  1. これがolタグです
  2. 箇条書きの説明

表紙スライドを作る

表紙スライドは以下のように書くのが一般的です。
必要に応じてフォントサイズの変更などを行ってください。

<div>
<h1>表題</h1>
<address>作成者名</address>
</div>

あとは通常のhtmlと同じ要領で記述するだけです。

スタイルやエフェクトを追加する

S6はプレゼンテーションツールなので、もちろんエフェクトが用意されています。
一部ちょっとしたコツが必要なところもありますが、実際にやってみるのが一番だと思います

適用する部分を指定する

エフェクトの適用方やスタイル変更の方法を解説する前に両方に共通する適用部分の指定（＝要素の指定）方法を解説します。

下の要領で指定することが可能です。 

'【タグ指定】' : {【なにがしかを必要に応じて記述】}
同じタグが複数存在している場合は タグ名の後に[i](iにそのタグを上から数えた順番-1を記述。例）1つ目･･･[0]、２つ目[1])を付けて記述します。
記述が無い場合は全ての同じタグに適用します。
またタグが入れ子(divタグ除く)している場合は少しコツを要します。
例えば以下のようなソース 
<div>
	<ul>
		<li>ここを指定したい！</li>
	</ul>
の場合は 
'ul/li' : {【なにがしかを必要に応じて記述】}
のように/で区切って指定します。

スタイルを変更する

適用したいスライドの</div>の直前に 
<script>
	s6.page({
	styles : {
		'【タグ指定】' : {【スタイル情報記述】}
	}
});

/script>
を記述します。フォントサイズを指定する場合はfontSizeを使って 
'【タグ指定】' : {fontSize : '【サイズ指定。pt、px、%など】'}
と記述します。

エフェクトを適用する

エフェクトの種類

S6には以下のようなエフェクトが用意されています

エフェクトはページ全体にかかる効果なので、要素を指定することは出来ません。

fadeScale効果

以下のソースを</div>の直前に記述します。 

<script>
s6.page({
	effect: 'fadeScale'
});
</script>

fadeScaleFromUp効果

以下のソースを</div>の直前に記述します。 

<script>
s6.page({
	effect: 'fadeScaleFromUp'
});
</script>

アクション(アニメーション)を付ける

fade in効果

以下のソースを</div>の直前に記述します。 

<script>
s6.page({
actions: [
['要素指定', 'fade in', 表示されるまでの時間(秒)]
]
});
</script>
また複数指定の場合は","で区切ります。また実行順は上から順番です。 fade inを指定する場合はスタイル設定でdisplay:noneを指定しないと、始めから表示されてしまいます。 例 
<script>
s6.page({
styles: {
'p' : {display : 'none'}
},
actions: [
['p[0]', 'fade in', 0.4], //１回目の右ボタンを押した時の処理
['p[1]', 'fade in', 0.4], //２回目の右ボタンを押した時の処理
['p[2]', 'fade in', 0.4]  //３回目の右ボタンを押した時の処理
]
});
</script>

move効果

以下のソースを</div>の直前に記述します。 

<script>
s6.page({
actions: [
['要素指定', 'move', 移動にかける時間(秒), [初期文字位置(x位置), 初期文字位置(y位置)], [移動終了文字位置(x位置), 移動終了文字位置(y位置)]]
});
</script>
例えば 
<script>
s6.page({
actions: [
['p', 'move', 0.4, [0, 45], [-8, 45]]
});
</script>
のように記述します。

その他

まだ自身も使いこなせていないので、これで全部とは言えませんが(ソース見る限りfadeとかもあるっぽい)少しでも助けになれば幸いです。
S6.jsに関する情報提供お待ちしています。pasta0915[at]gmail.comまで。