もじらでぷれぜん
もぷ

yuuji@yatex.org


もじらを最大画面化するか
表示領域を横対縦=4:3にしてみると
たぶん見やすいレイアウトで進めます

こんなあなたへ

マークアップ言語命!

マークアップでぷれぜん

ほんとうに満足?

だからmgpなんか、いいよね。

マークアップぷれぜん
ツールの憂鬱

もしもの時が不安

それはいやーん…

なんか安全で楽ちんで文書の汎用性が高い方法はないもんかね?

HTMLでぷれぜん

HTML4+CSSで快適原稿作成

そんなぷれぜん文書作成ツールが

じらでれぜん〜
mop(もぷ)

ぷぷぷ、もぷだってさ

jか↓をおすとどんどん進みます

kか↑を連打すると戻ります。

太郎のセリフ↑

↓花子のセリフ

ぶらうざでぷれぜんってやってる人多少いるよね? 何が違うの

アニメーション効果が付いてるみたいよ。

それもそんなに珍しくないよね? なにが嬉しいわけ?

ああ、普通にCSSのクラス名で効果が指示できるから 楽ってことよ。

なにゃそれ、CSSのくらすめい、さっぱりワカラーン

え、そんなんも知らないわけ?

HTML文書で、特定のタグで括った一部だけを特定のスタイルに する書き方よ

そりゃずいぶんと乱暴な説明やね

文書の構造的な側面を失わせず、 指定領域に論理的に決められたスタイルを適用する。

知っとるんかい!

すまぬ。

まあいまどきの方法やね

じゃあ実際に見てみましょ

l(える)を押すと次のページだ。vi好きには たまりませんなあ。

hで元に戻れたりするわよ。でも→で次のページ見てね。

操作方法 1/3

ページ移動

操作方法 2/3

アニメーション効果

(隠してあるのをいつ出すか)

操作方法 3/3

会話風画面

Q and A画面

Q and A て、なに?

心配ごと

ここもやぱりjを押してってくだされ

どうしてもじらなのですか?

楽じゃん

でもこれJavaScriptですよね?

はい

JavaScriptだとCUIなブラウザで見えないんじゃ?

w3mで見ても平気よ。ソース見る毛?

まじっすか。

ぜしぜし!

ほれ

<blockquote>
 <p area="a">どうしてもじらなのですか?</p>
 <p area="b">楽じゃん</p>
 <p area="a">JavaScriptだと
 他のブラウザで見えないんじゃ?</p>
 <p area="b">w3mでも平気よ。
  ソース見るヶ?</p>
</blockquote>

※blockquoteは引用を意味する普通のHTMLの要素です。 p要素に変なのが付いていますがこれに注目してください。

p についてる area="a" ってなにゃ?

上の質問エリアが「a」、答を書いてるこのエリアが「b」、 どちらにセリフを載せるか、という意味なり。

ぜんぶ p で<p area="a"> 〜 </p> として括らんといかんの?

p以外のどの要素でも構わんす。area="a"area="b" どちらかを付ければOK。

※ちなみにここはarea="c" です。

んなもんつけてw3mで平気?

HTMLでは知らない要素や属性は無視されるので 普通のblockquote段落として処理されてちゃんと読めま。w3mで見てみれ。

おお、普通の会話段落に読める。やるやん。

mopが偉いわけじゃないんだけど....

でもこの質問エリア、狭いやん。こんな風にはみ出たら、



プレゼンなんだから長文書くなっつーの ボケ!

時にはちっと長く書きたくなるんじゃ タコ!

したらCSS定義書き換えて質問エリア広げりゃええんじゃ サル!

あそか。
んでも、わしにできるかな?

ここまでの話に着いてきたあなたは十分に知識豊富ですから。

てへへ…で、どうやんの?

ま、次のページ行きましょう。

※l(える)か→で次のページへ

HTMLソースの書き方

正しいHTMLで

タグの対応のとれた正しいHTMLで。重要!

大まかな手順

  1. テンプレートとなるHTMLファイルをコピー
  2. 発表に合わせて中味を適当に書き換える
  3. ソースを MoP 本体プログラム mop.rb にかける
  4. slide-XX.html が吐き出される。
  5. もじらで見て発表練習してからいざ本番!

ページ割は?

H1要素がページ区切り

一部隠すときは?

効果に応じたCSSのクラスを指定

クラス名効果
emerge突然現れる
opaqueうっすらと現れる
rcutin右からぴょーん
<span class="emerge">突然現れる</span>
<span class="opaque">うっすらと現れる</span>
<div class="rcutin">
右からぴょーん
</div>

会話風ページ

class=dialogのdiv内に、エリア a, b をクラスで作る

<div class="dialog">
 <div class="a"></div>
 <div class="b"></div>
 ★
</div>

★にblockquoteを作り、area="a"(or "b")を指定。

 <blockquote>
  <p area="a">あ</p>
  <p area="b">い</p>
  <p area="a">う</p>
 </blockquote>

Q&A風ページ

基本は会話風と同じ

LaTeXとの連系

magで拡大率を指定可能。

HTML屋の支援

HTML屋(yahtml)で

(setq yahtml-lint-program "mop.rb")

しておくと、C-c t j で、自動的にmopがけできます。

らくちんよ。

最後に


ちみもMoPで、

ちゃらちゃらしてない良いプレゼンを!





ではまた