Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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.まとめ

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

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

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

以 上

basictomonokai
プログラミングにハマってしまったただのおじーさんです。Qiitaにはふさわしくない内容かもしれませんが お気楽プログラミングの記事を投稿して行きたいと思います。 ※BASIC!は残念ながらプレイストア非公開となった為2019年7月をもってBASIC!関連の活動を終了しました
http://basic.amsstudio.jp
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした