Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@berry-clione

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

More than 1 year has passed since last update.

概要

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?
    • プレゼンを編集するときの記法
    • HTMLMarkdownかを選択する
    • 今回は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.todeckdeckgo)を見ながら色々試したい

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
berry-clione
python / shell script / R / Mac / Ubuntu / data scientist / credit risk analyst / quants / macroeconometrics

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?