About @k_kato
const addTimeline2016 = (profile) => {
profile.timeline.push({
name: "@k_kato",
year: 2016,
lang: "Scala",
job: "Web",
do: "『C# モダン Web 開発』執筆中 (進捗 0.2%)",
try: "Microsoft MVP (落選 2016 年 7 月)"
});
}
Qiita スライド モード が素晴らしい
- スライド デザインから解放される！
マウス職人芸
- コンテンツ作成に集中できる！
デザインとビジネスロジックが密結合
- Web ブラウザだけでどこでもプレゼンできる！
Write once, run anywhere
Qiita スライド モード が素晴らしい
- スライドでシンタックス ハイライトが使える
(fun () -> printfn("F# は人生"))()
- Qiita なので SEO に強い（かも）
- 検索エンジンにインデックスされないスライドは誰も見てくれない（かも） 😭
Qiita スライド モードも素晴らしいがあえて reveal.js ではじめる高速スライド作成入門
reveal.js とは？
reveal.js は 2011 年にスウェーデンの Hakim El Hattab が開発した HTML プレゼンテーションのフレームワーク
- HTML，CSS，Javascript でスライドが書ける!
- Markdown でも書ける! (Paul Irish の改造版!)
reveal.js の機能
- シンタックス ハイライト (highlight.js を使用)
- フォント，背景色，サイズ
- スライド方向，スライド エフェクト
- PDF 出力
- 数式 (MathJax)
- 全機能はこちら
reveal.js スライド開発環境
- reveal.js: スライド作成フレームワーク
- highlight.js: シンタックス ハイライト
- live-server: 開発用 Web サーバー
- GitHub Page: 公開用 Web サーバー
- VS Code: 開発エディター (※お好みで)
reveal.js インストール
- reveal.js をダウンロードする
-
reveal.js-3.6.0.zipを解凍する - Node.js をインストールする
📝 コラム: Node.js は高速なのか?
PayPal の Jeff Harrell (2013) は，Node.js は Java Spring より秒間 2 倍のリクエストを処理できたと書きました。そして .NET Core は Node.js の 8 倍高速 ですが，導入事例が聞こえてこないのです 😭
reveal.js スライド作成ビッグ ピクチャ
-
index.htmlを編集する -
package.jsonを編集する- live-server を追加する
- Markdown でスライドを記述する
- GitHub Page でスライドを公開する
[1/4] index.html を編集する
-
Markdown スライドに変更する
- reveal.js は HTML でスライドを作成するようにデフォルト設定されている
- Markdown でスライドが作成できるように設定を変更する
- reveal.js の設定 index.html と スライド データ index.md を分ける (単一責任原則 (SRP: Single Responsibility Principle) を実践)
index.html
<div class="reveal">
<div class="slides">
<section data-markdown="index.md"
data-separator="^\n\n\n"
data-separator-vertical="^\n\n"
data-separator-notes="^Note:"
data-charset="utf-8">
</section>
</div>
</div>
[1/4] index.html を編集する
-
シンタックス ハイライトを変更する
- highlight.js から好みのスタイルをダウンロードして CSS を差し変える
index.html
<link rel="stylesheet" href="lib/css/zenburn.css">
- 僕は Ethan Schoonover の
solarized-dark.css派 (見やすいし，ほぼすべてのエディター & IDE に展開されている)
[2/4] package.json を編集する
-
live-server を追加する
- live-server は 2012 年にフィンランドの Tapio Vierros が開発した，軽量の Web サーバー
- 1 度起動するだけで，ファイルの変更を Watch & 検知して Web ブラウザでプレビュー中のスライドを自動リロードしてくれる (JS を埋め込んで Web Socket 通信でリロードしている)
- 作成中のスライドを高速にプレビューできる
package.json
{
"name": "yourPresentationTitle",
"devDependencies": {
"live-server": "^1.0.0"
},
"scripts": {
"build": "./node_modules/.bin/live-server"
}
}
[2/4] package.json を編集する
- live-server を起動する
Terminal
$ npm run build
- index.html が Web ブラウザで表示される
- index.md を編集&保存で自動リロードされる
[3/4] Markdown を編集する
index.md
## Hello reveal.js
* 改行 3 個で横スライド
* 改行 2 個で縦スライド
```fsharp
(fun () -> printfn("F# は人生"))()
```
[4/4] GitHub Page でスライドを公開する
- GitHub で username.github.io という名前でリポジトリーを作成する (username は取得した GitHub アカウント名)
-
username.github.io を
git cloneする - スライド一式を
git commit，git pushする - https://username.github.io を ブラウザで開く
[4/4] reveal.js x GitHub Page の例
- Markdown スライド例
- HTML スライド例
まとめ
- Qiita スライド モードは素晴らしい
- reveal.js を使ってスライド作成環境が構築できた
- live-server を使ってスライドの確認環境が構築できた
- GitHub Page でスライドが公開できた
- 高速スライド作成ができた (?)