Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@basictomonokai

remark.jsで作ったしょぼいスライドをお手軽に公開

0.初めに

私はエンジニアではないただのドシロウトです。

最近、簡単なスライド資料をつくるのにremark.jsを愛用しています。マークダウンなのでとても簡単に作れます。(その程度のスライドしか作ってない…(^_^;))

gnab/remark
https://github.com/gnab/remark

ただremark.jsで作成したスライドを公開してほしいと言われた時にちょっと面倒でした。

どこかにremark.js+MDファイルのHTMLファイルとスライドで使っている画像をアップすればいいのですがそれが面倒。

とりあえず画像はimgurに以下のJSを使ってスライド作成時にアップロードして使うようにしました。

Upload images to imgur via JavaScript
https://github.com/pinceladasdaweb/imgur

残りはremark.js+MDファイルのHTMLファイルになります。これをいちいちアップロードしない方法を考えました。

この考え方がベストではないかもしれませんが…

1.作ったもの

最終的に作ったものの動作サンプルは以下です。スライドは適当に過去つくったものを選びました。全部パラメータで渡しているのでやたら長いです。

スライドの例
https://tokyopwa.bitbucket.io/slidemake/remarkkokai1.html?slideb=ffffff&slidem=000000&slidet=2&slidef=slide20181010.txt&slideg=a3d5c9de3e69d83c2ef299c28fe53d58

要はGistにスライドのMDファイルを保存しておいてスライドの背景色、文字色、画面比率、Gistのファイル名、GistのIDを渡してスライドを表示するツールです。

スライドのMDファイル(Gist)
https://gist.github.com/basictomonokai/a3d5c9de3e69d83c2ef299c28fe53d58

こうすればGistにブラウザーでMDファイルを張り付ければアップロードなしで使えるのでいいかなと思いました。

2.使ったもの

使ったのはGistのAPIのみです。

Get a single gist
https://developer.github.com/v3/gists/#get-a-single-gist

3.コード

このツールのコードは以下となります。HTMLファイル一つのみです。正直コメントに加えて説明すべき事項がありません…(^_^;)

tool.html
<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }

.remark-slide-content { background: #f1c40f; font-size: 24px; color: #000000;}

.remark-slide-content h1 {
    font-size: 4em;
}

.remark-slide-content h2 {
    font-size: 3em;
}

.remark-slide-content h3 {
    font-size: 2em;
}

.remark-slide-content h4 {
    font-size: 1.5em;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.white {
  color: white;
}

.murasaki {
  color: #8e44ad;
}


.zright {
  float: left;
}


    </style>
  </head>
  <body>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>

    <script>

    // URLパラメータ取得
    var arg = new Object;
    var pair=location.search.substring(1).split('&');
    for(var i=0;pair[i];i++) {
        var kv = pair[i].split('=');
        arg[kv[0]]=kv[1];
    };

    var slide;
    // 背景色
    var slideb = '#'+arg.slideb;
    // 文字色
    var slidem = '#'+arg.slidem;
    // 画面比率 2なら16:9 その他 4:3
    var slidet = arg.slidet;
    // Gistのファイル名
    var slidef = arg.slidef;
    // Gist-id
    var slideg = arg.slideg;

    var slidegistkey = slideg;

    var gisturl = "https://api.github.com/gists/"+slidegistkey;

    fetch(gisturl).then(function(response) {
      return response.json();
    }).then(function(json) {
      // gistよりMDファイル取得 
      slide=json.files[slidef].content;

      if (slide == null) {
        alert("スライド情報なし");
      } else {
        if (slide == "") {
          alert("スライド情報が空");
        } else {
          console.log("スライド情報取得");
        };
      };

      // 画面比率設定
      if (slidet == '2') {
        var slideshow = remark.create({
        source: slide,
        ratio: '16:9'
        });
      } else {
        var slideshow = remark.create({
          source: slide
        });
      };

      // スライドのクラス取得
      var contents = document.getElementsByClassName('remark-slide-content');

      for (i=0 ;i < contents.length ;i++) {
        // 背景色と文字色指定
        contents[i].style.backgroundColor = slideb;
        contents[i].style.color = slidem;
      };

    });

    </script>
  </body>
</html>

4.まとめ

先日、ある場所でスライドをプロジェクター表示しようとしてケーブルの仕様が合わず焦った事がありました。

ネットに全て挙げておけば、パソコンを借りてプレゼンもできますし、その後の公開にも使えます。

当たり前すぎてつまらないかもしれませんが気軽に公開できていいかなと思いました。

以 上

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?