# HTMLでスライドを作れる Talkie.js の活用
2018.01.25 - y-wada
## Talkie.js とは?
- HTML/Markdown で書けるスライドツール
- [配布元repository](https://github.com/ahomu/Talkie)
- 本紙はこのツールを使いやすくテンプレ&解説
- #IEではなくchromeで見てください。
## 以下のようにテキストで記載
```html
## 機能
- HTML/Markdownで記載可能
- コードのハイライトOK
- フルスクリーン対応 (press `F`)
- ポインターモード (press `B`)
- キャンバスモード (press `V`)
- 進行度インジゲータ
- JavaScriptやCSSでカスタマイズ
```
## 機能
- HTML/Markdownで記載可能
- コードのハイライトOK
- フルスクリーン対応 (press `F`)
- ポインターモード (press `B`)
- キャンバスモード (press `V`)
- 進行度インジゲータ
- JavaScriptやCSSでカスタマイズ
### 1ページ = 1section で記載
```html
```
### 基本の書き方 in HTML
```html
```
### 基本の書き方 in Markdown
```html
## これは箇条書きです
- りんご
- みかん
- ぶどう
```
### 背景画像とフィルタの設定方法
```html
```
`backface-filter="blur(0) brightness(.9)"`
↑この設定値の場合の表示例です。
`backface-filter="blur(5px) brightness(.7)"`
↑この設定値の場合の表示例です。
### ポインターモード
プレゼン中に `b` を押すと切り替わります
### キャンバスモード
プレゼン中に `v` を押すと切り替わります
### フルスクリーンモード
プレゼン中に `f` を押すと切り替わります
## その他
- コードハイライト対応
- タッチデバイス対応
- キーボード操作対応(カスタム可)
- 4:3 または 16:9 の自動スケーリング
- developer tools(F12) でプレゼンターメモ
-----
これが私が書いた発表者用のメモですよ!
仕切ってからメモを書くだけです。
開発者ツール内に表示されます。
このページのソースはこんな感じです。
```html
## その他
- コードハイライト対応
- タッチデバイス対応
- キーボード操作対応(カスタム可)
- 4:3 または 16:9 の自動スケーリング
- developer tools でプレゼンターメモ
```
ここまで、メモ追加:
## 発展:JSでキーバインド(1/2)
以下のJS記載によって、次へキーを追加
```javascript
var talkie = Talkie({wide:false});
talkie.key('space').subscribe(talkie.next$);
talkie.key('s').subscribe(talkie.next$);
talkie.key('n').subscribe(talkie.next$);
talkie.key('a').subscribe(talkie.prev$);
talkie.key('p').subscribe(talkie.prev$);
```
## 発展:JSでキーバインド(2/2)
```javascript
window.next = function() {
talkie.next$.next();
};
window.prev = function() {
talkie.prev$.next();
};
window.jump = function(num) {
talkie.jump$.next(num);
};
```
## 発展:裏ワザ
- 編集可能ページを作っておくことも出来る。
- ここのメモを編集してみてください。
- contenteditable 属性を設定しておくだけ。
- ここのメッセージを編集することもOK
- プレゼン中に追記するような
```
## 図を入れる場合
### 図を入れる場合
## 作例リンク
- [本テンプレを元にアプリの紹介資料へ](./index_Sample_SyunkanSokudoku.html)
- [http://s.aho.mu/161203-wcan_winter/](http://s.aho.mu/161203-wcan_winter/) (作者様/主な参考元)
- [http://s.aho.mu/160809-a11y_informal_study/](http://s.aho.mu/160809-a11y_informal_study/)
- [https://t32k.me/slides/2016/microinteractions/](https://t32k.me/slides/2016/microinteractions/)
- [http://hiloki.github.io/s/150221-frontrend_conference/](http://hiloki.github.io/s/150221-frontrend_conference/)
## 使い始めはたったの3ステップ
1. [公開サイト](https://github.com/ahomu/Talkie/releases)から最新版をダウンロード
2. サンプルファイル ( index.html ) をベースに編集
3. どこかのサーバにアップして公開
### ★まとめてテンプレート化(本紙)
### PDF化/PNG化ツールも同梱!
### サーバへのアップ、通信も不要。