ブラウザ上でスライド作ってプレゼンするDeckDeckGoをローカル環境で構築して脱パワポしてみた

# 概要

onlineスライド編集webアプリ[DeckDeckGo](https://deckdeckgo.com/)のスライドをローカル環境でも作れるようにしたい

~~これであの使いにくい某Office系ソフトともおさらばできるのでは…?~~

### DeckDeckGoとは

スライドエディタwebサービス。
いろんな機能があってカッコイイ。例えば…

- ソースコード埋め込み
    - ソースコードを1スライドの中でスクロールできるようだ
    - reveal.jsの場合、スライドからはみ出てしまっていたがこれなら長めのソースコードでも貼り付けられる
- QR code埋め込み
    - QR codeをスライドに埋め込めるような機能もあるようだ
- 画像、動画、gif埋め込み
    - 画像は、著作権freeの[Unsplash](https://unsplash.com/)から取得して埋め込める
    - 動画は、YouTubeから取得して埋め込める
- モーダル
    - モーダルウィンドウをスライドの中に作ることもできるようだ
- その他色々編集
- 編集したスライドをそのままプレゼン
- プレゼン中にリモートコントロールでスライドを操作

みたいなことがブラウザ上ですべてできる

> deckdeckgoを作った人の正確な説明は[こちらのdev.to](https://dev.to/daviddalbusco/introducing-deckdeckgo-the-web-open-source-editor-for-presentations-58lg)、または[こちらのdeckdeckgoスライド](https://beta.deckdeckgo.io/daviddalbusco/introducing-deckdeckgo/?index=7)。
> 今んとこ日本語解説記事は少ないようだ(2019/10/6現在)
> (DuckDuckGoではない、ぜんぜん違う)

オープンソースの[DeckDeckGo](https://github.com/deckgo/deckdeckgo#getting-started)を使えば、ローカル環境でもmarkdownかhtmlでDeckDeckGoスライドを編集・起動できるようだ。
ローカル環境でのHTMLプレゼンなら、[markdownからreveal.jsスライドに変換](https://dev.to/berry_clione/set-up-to-convert-a-markdown-file-to-revealjs-slides-by-pandoc-58n5)する等、いろいろな方法があるが、DeckDeckGoは更に機能が充実してそうだったので今回試しに使ってみることにした。

# npmを使ってローカルPCにdeckdeckgoを構築する

> DeckDeckGoはfreeのopen sourceであり、ローカルPCにも構築でき、markdownかhtmlで編集可能とのこと
> 今回、構築とお試しでの編集をやってみる

### 環境

- OS: Mac OS 10.14.6 Mojave
- shell: zsh oh-my-zsh
- npm: 6.11.3
- node: v12.11.0
- Browser: SRWare Iron Version 69.0.3600.0 (Developer Build) (64-bit)

> npm、nodeは、[revealjsでスライド作るときにインストール済み](https://dev.to/berry_clione/set-up-to-convert-a-markdown-file-to-revealjs-slides-by-pandoc-58n5)なので、詳細手順はここでは割愛。

### インストール+設定

- npm、node.jsがインストールされていることを確認

```sh
$ npm -v
6.11.3
$ node -v
v12.11.0
```

- deckdeckgoをインストールする
    - 途中、"?"で始まる質問がいくつか出てくるが、今回はお試しなのでほぼデフォルトで回答(詳細後述)

```json
$ npm init deckdeckgo
npx: installed 105 in 12.478s

Cool, let's kick start a new DeckDeckGo presentation

? What's your project name (will be use to create a new folder)? deckdeckgo
? What's your presentation name (max. 45 characters, will be use for meta tags and manifest information)? DeckDeckGo
? What's your presentation about (its description)? Create a lightweight presentation using Web Components 🚀
? What's your name (will be use for the author meta information)? user
? What method do you want to use to edit your presentation? Markdown

Your inputs:

{
  "folder": "deckdeckgo",
  "title": "DeckDeckGo",
  "description": "Create a lightweight presentation using Web Components 🚀",
  "author": "user",
  "editing": "Markdown"
}

Coolio, Your presentation is initialized.

? Do you want to use a Google Font for your presentation? Yes
? Search a Google font (min. 3 characters)? Kosugi
? Select the font Kosugi Maru
? Select charsets japanese, cyrillic, latin
? Select styles regular

To develop your slides, edit deckdeckgo/src/index.md

Run npm run start in the newly created folder deckdeckgo to serve your presentation locally at the address http://localhost:3000

Find this presentation in the remote control with the keyword: DeckDeckGo

If you rather like not to use the remote control while developing your deck, run npm run start-no-remote instead of the previous command

Dive deeper with the "Getting Started" guide at https://docs.deckdeckgo.com
```

前半

- ```? What's your project name (will be use to create a new folder)?```
    - プロジェクト名。ここで記入した名前のフォルダが生成される
    - デフォルトでは```deckdeckgo```
- ```? What's your presentation name (max. 45 characters, will be use for meta tags and manifest information)?```
    - スライドタイトル
    - デフォルトでは```DeckDeckGo```
- ```? What's your presentation about (its description)?```
    - スライド副タイトル
    - デフォルトでは```Create a lightweight presentation using Web Components 🚀```
- ```? What's your name (will be use for the author meta information)?```
    - プレゼンターの名前
    - デフォルトでは```David```
- ```? What method do you want to use to edit your presentation?```
    - プレゼンを編集するときの記法
    - ```HTML```か```Markdown```かを選択する
    - 今回は```Markdown```を選択してみる

後半

- ```? Do you want to use a Google Font for your presentation?```
    - Googleフォントを使うかどうか
    - デフォルトは```Yes```
- ```? Search a Google font (min. 3 characters)?```
    - Googleフォントを使う場合は、フォント名を検索(3文字以上入力)
    - [Google Fonts](https://fonts.google.com/)からフォント名を探す
    - 例) ```Kosugi```
- ```? Select the font```
    - 検索結果が表示されるので、選択する
    - 例) ```Kosugi Maru```
- ```? Select charsets```
    - 文字セットを選択
    - 分からなければとりあえず全部選択しておく
    - 例) ```japanese, cyrillic, latin```
- ```? Select styles```
    - スタイルを選択
    - 例) ```regular```

以上で設定すると、以下の内容が表示される

- スライドの編集は```deckdeckgo/src/index.md```にする
- ```deckdeckgo```フォルダ内で```$ npm run start```を実行し、```http://localhost:3000```にアクセスするとスライドが見れる
- リモートコントロールを使用する場合は、```DeckDeckGo```というキーワードで探す
- リモートコントロールを使用したくない場合は、```$ npm run start-no-remote```を実行する
- 詳しくはwebで(https://docs.deckdeckgo.com)

### サーバ起動+確認

```npm run start```コマンドでサーバを起動する

```sh
$ npm run start

> deckdeckgo-starter@1.0.0-rc.2-2 start /Users/user/path/to/deckdeckgo
> concurrently --kill-others "npm run watch" "npm run dev"

[1]
[1] > deckdeckgo-starter@1.0.0-rc.2-2 dev /Users/user/path/to/deckdeckgo
[1] > lite-server
[1]
[0]
[0] > deckdeckgo-starter@1.0.0-rc.2-2 watch /Users/user/path/to/deckdeckgo
[0] > webpack --watch --mode development
[0]
[1] ** browser-sync config **
[1] {
[1]   injectChanges: false,
[1]   files: [ './dist/**/*.{html,htm,css,js,svg}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './dist', middleware: [ [Function], [Function] ] },
[1]   open: false
[1] }
[1] [Browsersync] Access URLs:
[1]  -------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://xx.x.xxx.xxx:3000
[1]  -------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://localhost:3001
[1]  -------------------------------------
[1] [Browsersync] Serving files from: ./dist
[1] [Browsersync] Watching files...
[0]
[0] webpack is watching the files...
[0]
[0] Hash: ********************
[0] Version: webpack 4.39.3
[0] Time: 6590ms
[0] Built at: 10/01/2019 7:36:23 PM

...(略)

[0] Child HtmlWebpackCompiler:
[0]      1 asset
[0]     Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0]     [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 6.52 KiB {HtmlWebpackPlugin_0} [built]
[1] [Browsersync] Reloading Browsers... (buffered 55 events)
```

起動したら、表示されたURLへアクセスすることで、DeckDeckGoのスライドが確認できる

- スライド
    - ローカル: http://localhost:3000
    - 外部から: (出力されたサーバURL)
- UI(管理画面みたいなもの)
    - http://localhost:3001

- スライド画面(1ページ目, 2ページ目)

<img width="1464" alt="Screen Shot 2019-10-05 at 20.52.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133933/24dc8027-9ce7-d707-451a-2d0ea453abf5.png">

<img width="1464" alt="Screen Shot 2019-10-05 at 21.05.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133933/0e563847-a947-a362-6715-ce2330b28cc2.png">



- UI

<img width="1464" alt="Screen Shot 2019-10-05 at 20.52.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133933/57570b49-e9ed-62b5-dc5b-988fb9d5afec.png">


### 編集

- ```deckdeckgo/src/index.md```にアクセスし、スライドを編集してみる
    - もとのファイルは以下のようになっている

```markdown
--- title

# DeckDeckGo

### Create a lightweight presentation using Web Components 🚀

--- title style="--background: var(--ion-color-dark); --color: var(--ion-color-light);"

## Happy editing 😁

Dive deeper with the [Getting Started guide](https://docs.deckdeckgo.com/docs)
```

例えばこれを以下のように変更して上書き保存してみる

```markdown
--- title

# たいとる名！

### ブラウザ上でスライド作ってプレゼンするDeckDeckGoで脱パワポしてみた

吾輩は猫である

--- title style="--background: var(--ion-color-medium); --color: var(--ion-color-danger);"

## Happy editing 😁

Dive deeper with the [Getting Started guide](https://docs.deckdeckgo.com/docs)
```

すると、スライドが自動でリロードして…

<img width="1464" alt="Screen Shot 2019-10-05 at 21.03.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133933/c6d1ee50-3474-b821-ca12-fca1b3cce501.png">

<img width="1464" alt="Screen Shot 2019-10-05 at 21.18.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133933/4f025857-7194-260e-9e99-611c0646935e.png">

無事、反映された

まだまだ使いこなせていないが、作った人の解説([dev.to](https://dev.to/daviddalbusco/introducing-deckdeckgo-the-web-open-source-editor-for-presentations-58lg)、[deckdeckgo](https://beta.deckdeckgo.io/daviddalbusco/introducing-deckdeckgo/)）を見ながら色々試したい