「持つ喜び」の演出
HTML+JSでプレゼン、YAML版も作ってみた

プレゼン資料用のメタ言語ってどうだろう

 メインマシンをMacBookに変えてから、プレゼン資料を作るためにいちいちParallelsからPowerpointを立ち上げるという作業がうっとうしくなって来た今日この頃である。もちろん、Keynoteを使うという方法もあるがファイルの互換性の問題があるし、Google Docsでは見栄えが悪い。

 「誰かがすでに作っているだろうな」と思いつつHTML+CSS+JavaScriptで作ってみたのがこれ(クリックすると次のスライドに進む)。

 手持ちのバージョンのSafari、Opera、Firefox、IEでは動作確認済み。iPhoneでももちろんちゃんと動く。フォントの大きさはダイナミックに計算しているので、全画面でブラウズしてもそれなりに動く。

 まだまだ機能的に不足している部分はたくさんあるが、こんな形で作っておけば、ブログでの公開も簡単だし、見た目はCSSしだいでなんとでもできる。ある程度形が整ってくればオープンソースのツールとして配布しても良い。

 ちなみに、プレゼンデータそのものをHTML/Javascriptから切り離したかったので、簡単な「プレゼン資料記述言語」を作った。上の資料はこんな感じで記述できる。

[
    {
      title: 'iAnime.js: Benefits',
      duration: 1,
      1: 'Small footprint (<6KB compressed)',
      2: 'Lightweight (runs fine on iPhone)',
      3: 'Works well with jQuery.js and prototype.js',
      4: 'Free (MIT license)'
    },
    {
      title: 'iAnime.js: Power',
      1: 'Easy to use (only three methods)',
      2: 'Powerful JSON-based animation language',
      3: 'Extensivle ("effects" and "plug-ins")'
    },
    {
      title: 'iAnime.js: Design principle',
      1: 'KISS (Keep it simple, stupid)',
      2: 'Less is more',
      3: 'Single timer for multiple animations',
      4: 'Optimized for iPhone/iPod touch'
    }
]

 私自身は、こういうアプローチはけっこう好きだが、これが一般受けするかどうかはいまいち不明なので、とりあえずここに公開して意見を集めてみようかと思う。もし評判が良ければ本腰を入れてオープンソースのプロジェクトを立ち上げてもよし、そうでなければ自分専用に地道に拡張して行くだけのこと。

【追記】YAML版も作ったのでそちらもどうぞ。

Comments

masui

私はプレゼンはHTMLしか使っていません。もうちょっとシンプルな「メタ言語」で良いんじゃないでしょうか。YAMLみたいなのとか。

Satoshi Nakajima

確かにそうですね。やるなら徹底的に簡単にすべきですね。本当に誰でも使える様に。

yukichi

https://piro.sakura.ne.jp/xul/applications/takahashi-r/
高橋メソッドなプレゼンツール in XUL
(Firefox上でプレゼンをするツール)

https://www.w3.org/Talks/Tools/Slidy/
HTML slidy
(汎用ウェブプレゼンツール)

https://meyerweb.com/eric/tools/s5/
S5
(同上。どっちかというと、こっちの方が先?)

参考までに。

こじま

言語の記述でプレゼン、というと古くはSliTeXですが、やっぱりMagicPointじゃないでしょうか。

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)