×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。




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に変換しています。主な機能は以下のとおりです。

主な機能


*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 の基本仕様は以下の通りです。

基本仕様

HTML Slidy Maker のセットアップ


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

2.任意の記事 *1 <<HTMLSlidyMaker>> と記述して下さい *2

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


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

HTML Slidy Makerの使い方

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

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

3.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 のライセンスに従って下さい。