# 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でカスタマイズ
## Talkie.js の使い方
### 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/)
### サンプルをiframe内表示例
## 使い始めはたったの3ステップ 1. [公開サイト](https://github.com/ahomu/Talkie/releases)から最新版をダウンロード 2. サンプルファイル ( index.html ) をベースに編集 3. どこかのサーバにアップして公開 ### ★まとめてテンプレート化(本紙) ###  PDF化/PNG化ツールも同梱! ###  サーバへのアップ、通信も不要。
## 簡単に資料を作っちゃおう!!

ありがとうございました。

- y-wada