HTML Slidy Maker

TiddlyWiki Macro

開発：ぽっと
URL： http://www.potto.client.jp/htmlslidymaker/

　 JavaScript をONにし，矢印キー（←　→）やマウスのクリックでスライドを送って読んで下さい。最下部の"contents"をクリックするとページのリストが表示され，ページを選ぶことができます。

※生成される"HTML Slidy"は W3C のライセンスに従って下さい。

HTML Slidy Makerとは

　HTML Slidy Makerは TiddlyWiki ^*1 の記事をHTML Slidy ^*2 として生成するマクロです。 TiddlyWiki の指定記事を、プレゼンテーションとして公開することが可能です。本プレゼンテーションはHTML Slidy Makerを用いてHTML Slidyに変換しています。主な機能は以下のとおりです。

主な機能

TiddlyWiki の記事をHTML Slidyに変換する
出力結果はテキストエディタで編集が可能
日本語の利用が可能
TiddlyWiki 書式の利用が可能

^*1 " TiddlyWiki "はひとつのHTMLファイルで、 JavaScript で実装されたWikiです。ローカル環境で簡単に利用できるなどの特徴を持っています。
公式サイト： TiddlyWiki - a reusable non-linear personal web notebook
^*2 　HTML Slydyは W3C 製のHTMLプレゼンテーションツールです。
公式サイト： W3C Slide show Tools

HTML Slidy Makerの仕様

　HTML Slidy Maker の基本仕様は以下の通りです。

基本仕様

TiddlyWiki の記事を"HTML Slidy"形式に変換する
" HTMLSlidyMakerList "に出力順にタイトルを記述する
HTMLコードは TiddlyWiki が変換し、そのHTMLコードを利用する
"tags"に"HTML Slidy"のclassを指定する。"tags"にclassを指定しない場合は"slide" classが割り当てられる
リストに記述されていているが無いタイトルはスキップされる。（生成しない）

HTML Slidy Maker のセットアップ

１.HTML Slidy Makerのコードを記事に貼り付けて、tagsに"systemConfig"を設定します。

２.任意の記事 ^*1 に


<<HTMLSlidyMaker>>

と記述して下さい ^*2

３." HTMLSlidyMaker_head "と、" HTMLSlidyMaker_footer "ならびに” HTMLSlidyMakerList ”,” HTMLSlidyMakerConfig ”が自動で作成されます。 ^*3

^*1 " SideBarOptions "に設置すると使いやすいかもしれません。
^*2 必ず１箇所として下さい。なお複数設置すると動作しない可能性があります。
^*3 ご自分で必要な内容を修正して下さい。

HTML Slidy Makerの使い方

　
１." HTMLSlidyMakerList " に記事のタイトルを出力順に記述します。 ^*１

２.基本スライドにはtagsに"slide"をつけて下さい。表紙には"slide cover"をつけて下さい。 ^*2

３.HTML Slidy Maker - Macroの"GO"ボタンを押して下さい。" HTMLSlidyMaker .html"ファイルが作成されます。

^*1 タイトルが WikiName でない場合は

[[

と

]]

で囲んで下さい。（日本語のタイトルは必ず

[[

と

]]

で囲んで下さい）
^*2 "HTML Slidy"で使用するclassは TiddlyWiki のtagsで指定します。tagsを指定しない場合は"slide" classが自動で割り当てられます。

資料 "HTML Slidy" のclass

　"HTML Slidy" のclassの指定は"HTML Slidy Maker"では、tagsを用いて指定します。classの簡単な内容は以下のとおりです。なお詳しくは以下の W3C のサイトをご覧下さい。

class	内容
cover	表紙
slide	スライド

公式サイト： W3C Slide show Tools

資料 HTML Slidy をローカルで利用

　生成された"HTML Slidy" をネットのつながっていないローカルで利用する場合は、 W3C から"slidy.js"と"slidy.css”をダウンロードし、" HTMLSlidyMaker_head "の設定をローカルに変更することで可能です。" HTMLSlidyMaker_head "は以下の通りになります。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>[[HTMLSlidyMakerConfig::title]]</title> 
  <meta name="copyright" content="[[HTMLSlidyMakerConfig::Copyright]]" /> 
  <meta name="font-size-adjustment" content="-1" />
  <script src="slidy.js" type="text/javascript"></script> 
  <link rel="stylesheet" type="text/css" media="screen, projection, print" 
  href="slidy.css" />  
  <style type="text/css"> 
    <!-- your custom style rules --> 
  </style> 
</head>
<body>

公式サイト： W3C Slide show Tools

資料 HTML Slidy Makerの動作概略

　"HTML Slidy Maker"の基本的な動作概略を以下に示します。

動作概略

" HTMLSlidyMaker_head "のHTMLコードを生成

　　↓

" HTMLSlidyMakerList "に記述してある記事を TiddlyWiki の書式に従ってHTMLコードに変換する。変換の際には記事のHTMLを<div>で囲みtagsで指定されたclassを割り当てる。

　　↓

” HTMLSlidyMaker_footer ”に記述されているHTMLコード生成する。

最後に

　"HTML Slidy Maker"はWeb上で簡単にプレゼンができる"HTML Slidy"を TiddlyWiki で生成するマクロです。 TiddlyWiki の機能を利用しているため， TiddlyWiki の生成するHTMLがそのまま反映されます。生成される”HTML Slidy"については W3C のライセンスに従って下さい。

生成される”HTML Slidy"については W3C のライセンスに従って下さい。
まだテスト段階です。不具合などもあるかと思いますがすこしづつ利用しながら修正を行います。気長に待っていて下さい。
このマクロを使用して生じた損害については当方では責任を負いかねますのでご了承下さい。