--- title: remark.jsで作ったしょぼいスライドをお手軽に公開 tags: ドシロウト JavaScript remark.js gist imgur author: basictomonokai slide: false --- ## 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ファイル一つのみです。正直コメントに加えて説明すべき事項がありません…(^_^;) ```HTML:tool.html Title ``` ## 4.まとめ 先日、ある場所でスライドをプロジェクター表示しようとしてケーブルの仕様が合わず焦った事がありました。 ネットに全て挙げておけば、パソコンを借りてプレゼンもできますし、その後の公開にも使えます。 当たり前すぎてつまらないかもしれませんが気軽に公開できていいかなと思いました。 以 上