LoginSignup
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@berry-clione(Darkside Haguremetal)

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

Last updated at Posted at 2019-10-06

概要

onlineスライド編集webアプリDeckDeckGoのスライドをローカル環境でも作れるようにしたい

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

DeckDeckGoとは

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

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

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

deckdeckgoを作った人の正確な説明はこちらのdev.to、またはこちらのdeckdeckgoスライド。
今んとこ日本語解説記事は少ないようだ(2019/10/6現在)
(DuckDuckGoではない、ぜんぜん違う)

オープンソースのDeckDeckGoを使えば、ローカル環境でもmarkdownかhtmlでDeckDeckGoスライドを編集・起動できるようだ。
ローカル環境でのHTMLプレゼンなら、markdownからreveal.jsスライドに変換する等、いろいろな方法があるが、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でスライド作るときにインストール済みなので、詳細手順はここでは割愛。

インストール+設定

  • npm、node.jsがインストールされていることを確認
$ npm -v
6.11.3
$ node -v
v12.11.0
  • deckdeckgoをインストールする
    • 途中、"?"で始まる質問がいくつか出てくるが、今回はお試しなのでほぼデフォルトで回答(詳細後述)
$ 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からフォント名を探す
    • 例) 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コマンドでサーバを起動する

$ 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のスライドが確認できる

Screen Shot 2019-10-05 at 20.52.23.png Screen Shot 2019-10-05 at 21.05.44.png
  • UI
Screen Shot 2019-10-05 at 20.52.40.png

編集

  • deckdeckgo/src/index.mdにアクセスし、スライドを編集してみる
    • もとのファイルは以下のようになっている
--- 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)

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

--- 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)

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

Screen Shot 2019-10-05 at 21.03.48.png Screen Shot 2019-10-05 at 21.18.18.png

無事、反映された

まだまだ使いこなせていないが、作った人の解説(dev.to、deckdeckgo）を見ながら色々試したい

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?