javascriptで書かれたプレゼンテーション表示用ライブラリ S6 の使用メモと、Chrome2/Safari4対応
javascriptで書かれたプレゼンテーション表示用ライブラリ S6 の使い方でちょっとはまったのでそのメモと、Chrome2, Safari4への対応方法です。
取得方法
公式のレポジトリはないようで、ブログのこの記事が公開元になっているようです。
ここにS6を使ったプレゼンテーションがアップされているので、そのHTMLのソースから読み込まれているs6.jsファイルをDLすればいいのですが、このプレゼン、それぞれ別のs6.jsを参照しています。
- amachang.art-code.org/src/s6.js
- amachang.art-code.org/shibuyajs24/s6.js
- amachang.art-code.org/ejohn/dist/s6.js
比較した感じだと、この並びどおりに更新されているので、最新の
http://amachang.art-code.org/ejohn/dist/s6.js
を使うのがいいと思います。
使い方
基本的な使い方はこのページがわかりやすいです。
古いほうのs6を使いながらこのページ見るとはまります。いや、はまりました
古いバージョンは、styleで要素を要素名で指定するのではなく、配列で指定していた。
s6.page({ styles: [ {}, { fontSize: '0.8em' } ] })
これが新しいバージョンではこうなる。
s6.page({ styles: { 'p': { fontSize: '0.8em' } } })
使うバージョンを間違えなければ関係ないんだけど。
Chrome, Safariに対応させる
Google Chrome 2、Safari 4だと矢印キーの操作が効かなかったので、修正しました。
一行変えるだけ。
if (s6.uai.ie && type == 'keypress') {
if ((s6.uai.ie || s6.uai.applewebkit) && type == 'keypress') {
変更内容としては、ブラウザによってデフォルト動作のキャンセル(preventDefault)できるタイミングが、KeypressかKeydownで違ってくるらしいのでIE、WebkitではArrowキーの場合onKeyPressイベントが発生しないので、Chrome2, Safari4まとめてwebkitの場合に、IEと同様Keydownでフックするようにした。
ただ、S6のもとのプレゼンにはSafari3に対応、と書いてあるのでもしかしたらSafari3だと逆に動かなくなっちゃってるかも。もしくはMac版だと違うとか。その場合はuaiでバージョンやOS毎に分けないといけないね。
MacのSafari3で動作したという報告を頂きました。
一応動作確認してるのは以下。
