０．初めに
私はエンジニアではないただのドシロウトです。
最近、簡単なスライド資料をつくるのに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ファイルになります。これをいちいちアップロードしない方法を考えました。
この考え方がベストではないかもしれませんが…
１．作ったもの
最終的に作ったものの動作サンプルは以下です。スライドは適当に過去つくったものを選びました。全部パラメータで渡しているのでやたら長いです。
要はGistにスライドのMDファイルを保存しておいてスライドの背景色、文字色、画面比率、Gistのファイル名、GistのIDを渡してスライドを表示するツールです。
スライドのMDファイル（Gist）
https://gist.github.com/basictomonokai/a3d5c9de3e69d83c2ef299c28fe53d58
こうすればGistにブラウザーでMDファイルを張り付ければアップロードなしで使えるのでいいかなと思いました。
２．使ったもの
使ったのはGistのAPIのみです。
Get a single gist
https://developer.github.com/v3/gists/#get-a-single-gist
３．コード
このツールのコードは以下となります。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．まとめ
先日、ある場所でスライドをプロジェクター表示しようとしてケーブルの仕様が合わず焦った事がありました。
ネットに全て挙げておけば、パソコンを借りてプレゼンもできますし、その後の公開にも使えます。
当たり前すぎてつまらないかもしれませんが気軽に公開できていいかなと思いました。
以 上