LoginSignup
5
6

More than 3 years have passed since last update.

ライトニングトーク用の高橋メソッド式スライドを作る【javascript Markdown】

Last updated at Posted at 2017-06-13

状況

「ライトニングトークのスライド作るの面倒じゃね? 高橋メソッドなら HTML ファイルだけあればできるけど、HTML と CSS をいちいち書くのジャマくさいよ!」を解決します。

準備

例によって github から、「marked.mini.js」をダウンロードしておきます。

さらに、コンテンツを外部ファイルに持つため、「mdTL.js」に javascript のテンプレートリテラルを使って Markdown でコンテンツを書きます。

mdTL.js(例)
var text = `
# title
...
`;

使い方

「LT.html」側に、「レベル2 見出しが来るごとに改ページ(次のスライドに)する」スクリプトが埋められており、デフォルトで「mdTL.js」をインポートするようになっているので、「mdTL.js」に Markdown でコンテンツを書き込むだけです。

ブラウザ画面に表示されているスライドの任意の位置をクリックすると、次のスライドに切り替わります。
前のページには戻れません。
最後のスライドまで行ってもループしません。

注意点

  1. 「レベル2 見出しが来るごとに改ページ(次のスライドに)する」ので、箇条書きを1項目ずつ追加して表示したい場合は、下記「sample.md」のように記述する必要があります。
  2. 「`」を含むインラインコード記法が使えません。var test = `...` という風な記述ができません。ライブラリの制限のようです。Qiita すげえ。
sample.md
## 良いところ
- OSのアップデートが確実

## 良いところ
- OSのアップデートが確実
- 動作がサクサク

## 良いところ
- OSのアップデートが確実
- 動作がサクサク
- 機種が選べる

サンプルコード

LT.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lightning Takahashi - Takahashi method for lightning talk with markdown notation</title>
    <script src="marked.min.js"></script>
    <script src="mdTL.js"></script>
    <style>
        h1 { font-size: 80pt; text-align: center;}
        h2 { font-size: 60pt; text-align: center;}
        li { font-size: 45pt; text-align: left;}
        div { text-align: center; font-size: 40pt; margin-top: 40px;}
        div.page { display: none; width: 90%; position:absolute; left: 5%;}
        html, body { width: 100%; height: 100%;}
    </style>
</head>
<body id="viewer" onclick="next()">
    <!-- mdTL.js の text 変数にテンプレートリテラルで Markdown を記述する -->
</body>
    <script>
        var count=1;
        var renderer=new marked.Renderer();

        renderer.heading=function(a,b){
            ret='</div><div class="page" id="page'+count+'"><h'+b+">"+a+"</h"+b+">";
            count++;
            return ret
        },renderer.html=function(a){
            return'<div id="0">'+a+"</div>"
        };

        document.getElementById("page1").style.display="block";
        var current=1;
        function next(){
            document.getElementById("page"+current).style.display="none";
            current++;
            document.getElementById("page"+current).style.display="block"
        };
    </script>
</html>
mdTL.js
var text = `
Windows 10 Mobile ってどんな?
=========
~あなたの知らない世界~

## あらまし
- 特徴
- 良いところ
- 悪いところ
- こんな人に向いている

## 特徴
- 機種が違っても確実にアップデートが来る

## 特徴
- 機種が違っても確実にアップデートが来る
- Googleサービス対応アプリがない

## 特徴
- 機種が違っても確実にアップデートが来る
- Googleサービス対応アプリがない
- 一部、PCと同じアプリが動く

## 良いところ
- OSのアップデートが確実

## 良いところ
- OSのアップデートが確実
- 動作がサクサク

## 良いところ
- OSのアップデートが確実
- 動作がサクサク
- 機種が選べる

## 悪いところ
- アプリが少ない

## 悪いところ
- アプリが少ない
- 現状機種少なく、決定版がない

## 悪いところ
- アプリが少ない
- 現状機種少なく、決定版がない
- Android、iOSから乗りかえしづらい

## こんな人に向いている
- Microsoft信者

## こんな人に向いている
- Microsoft信者
- 人柱

## こんな人に向いている
- Microsoft信者
- 人柱
- あまのじゃく

# ありがとうございました
`;

アピールポイント

  1. Web サーバがなくても、Markdown コンテンツを別ファイルに分離させることができる
  2. 「mdTL.js」の内容を書き換える or Markdown をテンプレートリテラルで記述した 別の javascript ファイルをインポートすることで、「LT.html」を変更することなくスライドの作成、再生が可能
  3. 高橋メソッドを実践するための HTML 記述から解放される。かつ、複数の HTML ファイルを作成する必要がなくなる
  4. 「README.md」などを流用できる可能性がある

追伸

サンプルのネタが Windows 10 Mobile なのはご愛嬌ということで。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6