#korg im1

[partymedia]

Transcontinental Meditation by oldlibmike http://ift.tt/1hdAKTI

[partymedia]

Anasazi by oldlibmike http://ift.tt/1KuhDNX

[m0t0k1]

意外と簡単 reveal.jsでプレゼンテーションを作ろう - その３

前回までのあらすじ

前回はreveal.jsをダウンロードしてきて、index.htmlのsectionタグ内にマークダウンを書くことができるんだ、というところまでいきました。

今回はもう少し踏み込んでいきたいと思います。

ちょとだけカスタマイズに挑戦

sectionタグにマークダウンで書くことができるように、「data-markdown」というのを追記しましたよね。このほかに追記することで、sectionのどこで次のスライドとするかというのが指定できます。

例えば、「--」ときたら横へ、「---」ときたら縦へ、とかです。 このためには「data-markdown」に続いて「data-separator」と追記します。

<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">

「-vertical」とついてるほうが縦ですね。

ここで、少し補足をしますとsectionタグ内の要素については全面的にテキスト周囲の空白文字（ブランク、タブなど）が除去されるようになっています。よって、インデント（字下げ）して「---」を書いても大丈夫です。

また、注意すべきなのですが、改行を表す「\n」です。わたしは知らずにハマってしまったのですが、Macだと普通には入力できません。ググってみると、Google日本語入力を導入してOptionキーを押しながら「¥」を押すと入力できるようです。

¥nで書いてしまうと上記のような区切り設定はまったく動作しません。ご注意ください。

エスケープ「esc」キーを押すと全景になります。こんな感じになりましたでしょうか？

遊んでみよう

表を入れてみます。

マークダウンで表を入れるには、「|」で縦の罫線を、「--」で横の罫線を引いて表っぽくするといいです。以下の感じで書いてみましょう。

|ランク|果物|評価| |----|:----|:----:| |1|みかん|うまい| |2|りんご|うまい| |3|なし|なしなーっ|

このほか、引用をする場合は「>」で書きます。 改行がなくなってしまうのは空白除去のせいでしょうね…

> 言葉に気をつけなさい。いつか考えになるから。 > 考えに気をつけなさい。いつか行動になるから。 > 行動に気をつけなさい。いつか習慣になるから。 > 習慣に気をつけなさい。いつか運命になるから。

次は動画も埋めてみましょう。 これを埋めるのは、次の感じです。

[](https://www.youtube.com/watch?v=bFT9AkzRPQo)

いや、iPadでKORGのM1がアプリとして動作する時代だなんて…と動画に見入ってしまいました（おい）。

なお。今回の埋め込みにマークダウンどう書くんだっけーとなったので以下のページを利用させていただきました。

YouTubeのサムネイルをMarkdownで埋め込むための文字列変換というページ

要するには入れ子になってて、内側の「[]()」がサムネイル画像、外側が動画へのリンクということですね。

さらに遊んでみる

では、さらにツイートを埋め込めるかやってみましょうか。

適当にわたしのツイートを探して、埋めてみますか。 えいっとやってみたら、ダメでした。

sectionタグがマークダウン形式になっているところへの埋め込みはダメみたいです。 ということで、html形式のsectionタグを用意すれば混ぜてスライドにできるみたいです。

ということで、３回にわたってreveal.jsを見てきました。次回はpdfエクスポートしてどこでも持っていけるようにしてみたいと思います。

[audiobus]

KORG iM1 is compatible with Audiobus!

KORG iM1

By KORG INC.

iM1

Download KORG iM1 on the App Store