MadoRemixのスライドサンプル

MadoRemix (markdown Editor with simple presentation Slide @ ChromeApp) に同梱しているスライドサンプルのPDF出力です。
こんな感じのスライドが Markdown + html で書けます。

Chrome OS Chrome App
Chromebook Chromebox
開発 自作 コーディング Javascript
マークダウン エディタ Markdown Editor reveal.js

Transcript

1. MadoRemix
   ［ Mado with REVEAL.JS ］
   思いつきと勢いで
   手抜きプレゼンツールができた ｗ
   まだまだ課題は山積みだが… (;^^A あせあせ
   Presented by Daru
   本日は
   よろしく
   です！
   

   View Slide

2. は
   Beautiful interface な
   markdown Editor です
   Mado
   ChromeApp
   ですよ！
   

   View Slide

3. は
   htmlで書ける
   プレゼン Slide tool です
   REVEAL.JS
   Markdownの
   サポートも
   あるよ！
   

   View Slide

4. そんな二人が思いつきで創聖合体してしまった ！！
   ときには
   勢いが大事！
   

   View Slide

5. MadoRemix
   爆 誕 ！！
   ヒーローさんの
   正体を尋ねるのは
   禁則事項です♡
   

   View Slide

6. 本題にもどって…
   Markdown でプレゼン
   Presented by Daru
   基本的な表現を
   例示します
   記述の仕方は
   Editor側を見てね
   

   View Slide

7. MadoRemix ではフォントサイズ h1 ~ h6 をご用意しました
   h1
   h2
   h3
   h4
   h5
   h6
   

   View Slide

8. MadoRemix では REVEAL.JS の基本設定を以下のようにしてます
   空白行間に---と記入すると水平方向のスライド区切り
   空白行間に>>>と記入すると縦方向のスライド区切り
   文章の配置は中央配置(縦横)
   こんな感じで書いていきます
   次のページ
   →
   

   View Slide

9. 見出し
   1. 数字付きのリスト
   2. 番号はどうでもいい
   次はサブページ
   下に遷移できます
   ↓
   

   View Slide

10. 見出し サブページ 1
    前ページから垂直に下に遷移する
    垂直遷移には補助的な説明を
    普通のリスト
    簡潔にね
    

    View Slide

11. 見出し サブページ 2
    どんどん書いていく
    1. 番号付きリスト
    1. 二階層め・番号付きリスト1
    2. 二階層め・番号付きリスト2
    2. 番号付きリスト2
    1. 二階層め・番号付きリスト1
    1. 三階層め・番号付きリスト1
    2. 三階層め・番号付きリスト2
    1. 四階層め・番号付きリスト1
    2. 二階層め・番号付きリスト2
    3. 番号付きリスト3
    

    View Slide

12. 引用（Blockquote）です
    見出し & 強調
    1. 数字リスト
    2. 数字リスト
    引用（Blockquote）の中にはMarkdown要素を入れられます
    引用のネストです
    引用のネストのネストです
    間に一行空けないとネストのままです
    

    View Slide

13. Table(表)
    Left align Right align Center align
    This This This
    column column column
    will will will
    be be be
    left right center
    aligned aligned aligned
    

    View Slide

14. htmlタグによる補助
    ※使いすぎるとBugにハマることも…(^_^;)
    これは sample です。
    ↑空行を入れたい。htmlタグ
    (sampleはタグの間に全角space)
    Colorテスト
    htmlタグを直接記述することで色を変えます。
    使いすぎに
    注意です…
    ハマりますよｗ
    

    View Slide

15. ぷちコード表示 @ js
    setSyntax:function(){
    chrome.storage.local.get( gfm ,$.proxy(function(mado){
    if(mado.gfm!==undefined){
    marked.setOptions({
    //Githubっぽいmd形式にするか否か
    gfm:mado.gfm,
    highlight:function(code,lang){
    returnhljs.highlightAuto(code,lang).value;
    }
    });
    }else{
    chrome.storage.local.set({ gfm :true});
    }
    this.update();
    },this));
    },
    

    View Slide

16. ぷちコード表示 @ html
    (はみ出し分はホイールスクロールもできるよ！)
    
    
    
    
    
    MadoRemixSlide
    
    
    
    
    
    Theme:
    
    MadoRemix
    Rounded
    Setoru
    black
    white
    league
    

    View Slide

17. ぷちコード表示 @ css
    (highlightは設定で幾つか選べるよ！)
    /*MadoRemixcustomizebyDaru*/
    
    @font-face{
    font-family: Myrica ;
    src:url( /fonts/Myrica.woff2 )format( woff2 );
    }
    
    .hljs{
    display:block;
    overflow-x:auto;
    padding:0.5em;
    background:#ededef;
    }
    
    #html-conversion{
    /*Typography*/
    font-size:1em;
    line-height:1.35em;
    user-select:text;
    SLIDEの設定は"T"
    ShortCutのHelpは"？"
    ご活用ください
    

    View Slide

18. web image contents
    ようやくCSP回避… (^^ゞ
    ↓Markdownの書式
    
    ChromeApp固有のCSPは
    ちょっと苦労しました
    

    View Slide

19. local image contents…
    CSPがきつい… (T^T)
    ダウンロードフォルダ
    SD Card
    牛歩な開発なのでしばしお待ちを… m(＿＿)m
    おしおきだべ〜
    

    View Slide

20. 小技
    REVEAL.JSの背景色Transitionデモ
    Background Transitions
    ↓Markdownの書式 (htmlコメント形式で記述する)
    Di erent background transitions are available
    via the backgroundTransition option.
    This one's called "zoom".
    
    

    View Slide

21. 小技
    REVEAL.JSの背景機能デモ
    Image Backgrounds
    (web image contents)
    とりあえずCSP回避できた ヽ(｀▽´)/
    ↓Markdownの書式 (htmlコメント形式で記述する)
    
    ちなみに、
    Gyazoって
    便利なサービス
    ですよね！
    

    View Slide

22. 小技
    REVEAL.JSの背景機能デモ
    Tiled Backgrounds
    (web image contents)
    とりあえずCSP回避できた ヽ(｀▽´)/
    ↓Markdownの書式 (htmlコメント形式で記述する)
    
    

    View Slide

23. 小技
    htmlタグによる2Column表現
    Column 1 Content
    Mado
    Chrome App
    Javascript
    Column 2 Content
    REVEAL.JS
    Web Flamework
    Javascript
    Markdown で
    プレゼンは
    どこいったのｗ
    

    View Slide

24. 小技
    htmlタグによるFont指定 表示テスト 1
    NotoSansMonoCJKJP フォントを指定してます
    NotoSansCJKJPフォントを指定してます
    Noto Serif CJK JP フォントを指定してます
    'Myrica' フォントを指定してます
    'MyricaP' フォントを指定してます
    'Rounded Mplus 1c' フォントを指定してます
    'SetoFontSP' フォントを指定してます
    "Chrome OS" は、OSへの
    Font追加ができないから
    アプリに同梱してます
    (ダイエットが大変！)
    

    View Slide

25. 小技
    htmlタグによるFont指定 表示テスト 2
    'monospace' Font assignment.
    'sans-serif' Font assignment.
    'serif' Font assignment.
    'Jaldi' Font assignment.
    'Arvo' Font assignment.
    

    View Slide

26. 小技
    htmlタグによるFont指定 表示テスト 3
    'Lato' Font assignment.
    'Montserrat' Font assignment.
    'News Cycle' Font assignment.
    'Quicksand' Font assignment.
    'Open Sans' Font assignment.
    'Ubuntu' Font assignment.
    'League Gothic' Font assignment.
    英語Fontは
    文字が少ないから
    あまり太らないの
    (うらやましいですよね！)
    

    View Slide

27. KT Xを組込んでみた
    円周率をπ とする半径r の球の体積V は
    V =
    KaTeXは文法に厳しいっぽいがコンパクトで組込み易い
    場合により"\"(esc-char)で暫定回避をお願い… (^^;)
    A E
    3
    4πr3
    基本は$で数式を囲むとインライン数式モードとなり、⽂章中に数式を表⽰できる
    ディスプレイ数式モードで表⽰したいときは$$で囲む
    

    View Slide

28. KT X表示テスト
    f(x) = x
    ⼒=
    質量×
    加速度
    A =
    A E
    2
    f(x) = x + 2x + 1
    2
    = (x + 1)2
    ⎝
    ⎜
    ⎜
    ⎛ a 11
    a 21
    ⋮
    a m1
    a 12
    a 22
    ⋮
    a m2
    …
    …
    ⋱
    …
    a 1n
    a 2n
    ⋮
    a mn
    ⎠
    ⎟
    ⎟
    ⎞
    まだ細々とした
    課題が…
    (;^^A あせあせ
    

    View Slide

29. 皆様、 MadoRemix をよろしくです (^^)
    おまけが
    ありますよ
    

    View Slide

30. おまけ
    ビデオバックグラウンド
    YouTubeの直埋込みはダメみたい…？？ .webm .mp4 はOK
    Video Backgrounds
    
    しばし
    ご歓談を
    

    View Slide

31. View Slide

32. View Slide

33. View Slide