[ECMAScript][s6]: amachang + reStructuredText + Django
amachang + reStructuredText +
プレゼンツール何使う？
PowerPoint?
そんなもん入ってないよ。
Keynote?
ごめん、それも入ってない。
OpenOffice?
かなり魅力的だけど、どうかな。
プラグインなしで動かなきゃダルいよね？
やっぱウェッヴとか Python がいいよな。
激しく同意。え、まじでぇ。
Why Python?
スーパーにカンタン、 だから。
インデント
ソースが読みやすい。
カッコとか少なめ。
とにかく簡単。
(うそ)
うーん。。。
JavaScriptだけだとつらい時もあるよね。
(処理の記述が、だよ)
Server サイドも知ってると、ハッピーになれるかも。
…というわけで
宣伝
Django(ジャンゴ)勉強会やります
2007/8/25(SAT)
＠サイボウズ・ラボ
Django勉強会の申し込みは
2007/8/13(MON)
朝6時受付開始の先着20名くらい
朝6時
寝坊したらアウト
寝ないで申し込むってのも手だよね
さて。
amachang + reStructuredText + Django
おまけのsourceレビュー
その前に軽く説明
reStructuredText 構造化テキスト
記号文字でテキストを装飾することにより意味を与える。 wiki記法みたいなやつ
Djangoの機能でHTML出力できる。 vimスクリプト書いたりしなくていい
reStructuredText サンプル
Django勉強会 --------------- 詳しくはこちら。 - `Django勉強会 Disc4 開催告知 <http://www.djangoproject.jp/weblog/2007/08/09/django_etude_disc_four/>`_ - `Django勉強会 Disk4 詳細 <http://www.djangoproject.jp/etude/4/>`_
もっと見たい方はこちら。 このプレゼンのソース
ポイント
- reSTを s6 でプレゼンできるようにDOMを操作して下ごしらえ
- エフェクトを使えるように reSTコメント(HTMLコメント)を<script>で埋め込み直す
Firefoxじゃないと動かないみたいだ ><
diff
s6.js
168a169,182
> s6.options = {
> doc: document,
> thema: 'normal',
> ratio: 0.75, // プレゼンテーションの縦横比
> width: undefined, // 横幅、省略されなかった場合 height から求められる
> height: undefined, // 縦幅、指定されても width が指定された場合は無視される。両方指定されなかった場合は width が 400 となる
> fontSize: 0.1, // height にこの値を掛けた値がベースのフォントサイズとなる
> startIndex: 0,
> noIndexPage: false, // このオプションが true の場合、 index ページは作られません
> additionalClassName: undefined, // 追加されるクラス名です。
> basePresentation: undefined, // ここにプレゼンが設定されている場合は、そのプレゼンから ratio, width, height, fontSize を継承
> element: undefined // このオプションに要素が設定された場合は要素を生成しません
> };
>
1123c1137
< thema: s6.themas.normal,
---
> thema: s6.themas[s6.options.thema],
1662,1674c1676
< options = s6.opts(options, {
< doc: document,
< thema: 'normal',
< ratio: 0.75, // プレゼンテーションの縦横比
< width: undefined, // 横幅、省略されなかった場合 height から求められる
< height: undefined, // 縦幅、指定されても width が指定された場合は無視される。両方指定されなかった場合は width が 400 となる
< fontSize: 0.1, // height にこの値を掛けた値がベースのフォントサイズとなる
< startIndex: 0,
< noIndexPage: false, // このオプションが true の場合、 index ページは作られません
< additionalClassName: undefined, // 追加されるクラス名です。
< basePresentation: undefined, // ここにプレゼンが設定されている場合は、そのプレゼンから ratio, width, height, fontSize を継承
< element: undefined // このオプションに要素が設定された場合は要素を生成しません
< });
---
> options = s6.opts(options, s6.options);
2108c2110
< s6.page = function(json) {
---
> s6.page = function(json, elm) {
2131c2133
< else {
---
> else if (!elm) {
base.html
16,22c16,52
< s6.css('html', {
< width: '100%',
< height: '100%',
< padding: '0',
< margin: '0',
< overflow: 'hidden',
< backgroundColor: 'gray'
---
> $(function () {
> s6.page._json = "{}";
>
> s6.page.set = function(json, elem) {
> //s6.page._json = s6.opts(json, s6.page._json);
> s6.page._json = json;
> s6.page(s6.page._json, elem);
> };
>
> s6.page.tmp = function(json, elem) {
> s6.page(s6.opts(json, s6.page._json));
> s6.page(s6.page._json, elem);
> };
>
> var elms = $(document.body).children("div").children();
> elms.each(function () {
> var comment = $(this).html().match("<!--((.|\r?\n)*)-->");
> var script = undefined;
> if (comment) {
> script = comment[1];
> } else {
> //script = "s6.page.set(" + s6.page._json + ");";
> script = "s6.page.set(s6.page._json);";
> };
> $(this).append('<script type="text/javascript">' + script + '<\/script>');
> /*
> var params = ["dummy", "set", {}];
> if (comment) {
> params = comment[1].match("s6\.page\.([a-z]+)\.({(.|\r?\n)*})");
> };
> s6.page[params[1]](s6.opts(params[2], s6.page._json), this);
> */
> });
>
> var src = $(document.body).children("div");
> $(document.body).append($(src).html());
> $(src).empty();
26,31c56,61
< width: '100%',
< height: '100%',
< padding: '0',
< margin: '0',
< overflow: 'hidden',
< backgroundColor: 'gray'
---
> width: '100%',
> height: '100%',
> padding: '0',
> margin: '0',
> overflow: 'hidden',
> backgroundColor: 'black'
33a64,85
> s6.options = s6.opts({
> thema: 'custom',
> //ratio: 3/4, // プレゼンテーションの縦横比
> ratio: 9/16, // プレゼンテーションの縦横比
> fontSize: 0.085 // height にこの値を掛けた値がベースのフォントサイズとなる
> }, s6.options);
>
> s6.themas.custom = {
> styles: {
> background: {
> backgroundColor: 'gray'
> },
> presentation: {
> backgroundColor: 'black',
> color: 'white'
> },
> page: {
> backgroundColor: '#21426F',
> backgroundImage: 'url(/static/s6/background.gif)'
> }
> }
> };
37c89
< var html = document.documentElement;
---
> var html = document.documentElement;
39,103c91,163
< 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];
< }
< presentation = new s6.Presentation({ element: document.body, width: width, height: height, startIndex: startIndex });
< presentation.style.left = left;
< presentation.style.top = top;
< presentation.start();
<
< var indexNoOutline = false;
< presentation.funcPages.index.attach('click', function(i, element, wrapper) {
< indexNoOutline = true;
< setTimeout(function() {
< indexNoOutline =false
< }, 1000);
< wrapper.style.background = '';
< presentation.go(i);
< });
<
< presentation.funcPages.index.attach('mouseover', function(i, element, wrapper) {
< if (indexNoOutline) return;
< wrapper.style.background = 'gray';
< });
<
< presentation.funcPages.index.attach('mouseout', function(i, element, wrapper) {
< wrapper.style.background = '';
< });
<
< s6.attach(document, 'keypress', function(e) {
< switch(e.keyCode) {
< case 63235:
< case 39:
< presentation.step();
< break;
< case 63234:
< case 37:
< presentation.prev();
< break;
< case 63232:
< case 38:
< presentation.go('index');
< break;
< case 63233:
< case 40:
< presentation.back();
< break;
< }
< document.cookie = 'page=' + presentation.index;
< });
---
> var height = html.offsetHeight;
> var width = html.offsetWidth;
> var top = 0;
> var left = 0;
> var ratio = s6.options.ratio;
>
> if (height / width < ratio) {
> var originalWidth = width;
> width = height / ratio;
> left = (originalWidth - width) / 2 + 'px';
> }
> else {
> var originalHeight = height;
> height = width * ratio;
> top = (originalHeight - height) / 2 + 'px';
> }
>
> var result;
> if (result = document.cookie.match(/page=(\d+)/)) {
> var startIndex = +result[1];
> }
> presentation = new s6.Presentation({ element: document.body, width: width, height: height, startIndex: startIndex });
> presentation.style.left = left;
> presentation.style.top = top;
> presentation.start();
>
> var indexNoOutline = false;
> presentation.funcPages.index.attach('click', function(i, element, wrapper) {
> indexNoOutline = true;
> setTimeout(function() {
> indexNoOutline =false
> }, 1000);
> wrapper.style.background = '';
> presentation.go(i);
> });
>
> presentation.funcPages.index.attach('mouseover', function(i, element, wrapper) {
> if (indexNoOutline) return;
> wrapper.style.background = 'gray';
> });
>
> presentation.funcPages.index.attach('mouseout', function(i, element, wrapper) {
> wrapper.style.background = '';
> });
>
> s6.attach(document, 'keypress', function(e) {
> var code = e.keyCode != 0 ? e.keyCode : e.charCode;
> //alert(code);
> switch(code) {
> case 63235:
> case 39: //[>]
> case 106: //j
> case 32: //[space]
> case 13: //[return]
> presentation.step();
> break;
> case 63234:
> case 37: //[<]
> case 107: //k
> presentation.prev();
> break;
> case 63232:
> case 38: //[^]
> case 27: //[esc]
> presentation.go('index');
> break;
> case 63233:
> case 40: //v
> presentation.back();
> break;
> }
> document.cookie = 'page=' + presentation.index;
> });
今日はこの辺で。。
ご清聴ありがとうございました。
