k1LoW/deck の紹介とチュートリアル

44.5K Views

August 16, 25

スライド概要

profile-image
スライド一覧

Fellow at Henry, Inc. Tech SaaSのPdM、スタートアップ取締役CTOや外資スタートアップのIC等を経て現任。好きな言語はGoとPerlと中国語で雑なOSSを200以上量産している。3 times ISUCON winner. 著書「みんなのGo言語」共著他。Podcast: https://oss4.fun/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.6M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.3M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1.1M
slide-thumbnail

最新の6.0で学ぶ！初めてのひとのためのSpring Security
java spring security
user-img tada 1M
slide-thumbnail

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]
ue5 unreal engine ue-rendering
user-img エピック ゲームズ ジャパン 1M
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 1M
各ページのテキスト
1.

k1LoW/deck deck の紹介とチュートリアル / @songmu

2.

k1LoW/deck とは ● ● ● https://github.com/k1LoW/deck MarkdownからGoogleスライドを作成するツール (k1LoW++) 紹介記事 ○ ○ ○ 私的MarkdownとGoogle Slidesでスライドを作成する方法（またはdeckの紹介) Copy/Cut/Paste/Hatena k1LoW/deck: MarkdownでGoogleスライドを作る | lacolaco’s marginalia deckがv1になった - Copy/Cut/Paste/Hatena

3.

特徴 ● ● 継続的なスライド作成 コンテンツとデザインの分離

4.

継続的なスライド作成 ● ● 毎回新たに再生成するアプローチではない Googleスライド側を直接いじった以下のような調整も極力維持される ○ ○ ● 画像などの位置の調整 スライド内に手動で追加したシェイプ 一度スライド化してからスライド側で最終調整だと、その後の継続的な更新が億 劫になるが、それが解決される ○ ○ 発表版と公開版を分けるなどもやりやすい Google Slideの版管理も活用できる

5.

コンテンツとデザインの分離 ● ● コンテンツはMarkdown デザインはGoogleスライドのテーマを使って制御 ○ CSS的な機能をGoogleスライドのテーマに持たせるということ 基本的には"Markdown"と"Googleスライドのテーマ"を編集することで大体のことが 事足りる。 生成されたGoogleスライド自体の直接調整もできるが、あまり必要が無い。画像位 置の調整などをするくらい。

6.

(余談) Googleスライドの「テーマ」 ● Googleスライドには「テンプレート」という機能もある ○ ○ ● これはテーマとは異なる 用語の混同に注意 テーマ: 事前に設定された色、フォント、背景、レイアウトのグループ。 ○ ○ 背景: スライドのコンテンツの背後にある画像や色。 レイアウト: スライド上のテキストと画像の配置。 参考: Google スライドでテンプレートを使用したり、テーマ、背景、レイアウトを 変更したりする

7.

Markdownであることのメリット ● プレーンテキストである ○ ○ ● 文字のスタイルなどもMarkdownで調整できる ○ ○ ● レビューや差分確認が容易 好きなエディタで編集可能 マウス不要 アドホックなスタイル調整にならずデザインの一貫性も保たれる 最近だとAI支援も受けやすい ○ ○ Copilotなどがいい感じに補完候補を出してくれる AI Agentに作らせても

8.

Googleスライドであることのメリット ● プレゼンツールとしてのGoogleスライドを使える ○ ● 資料の共有もやりやすい ○ ○ ● スピーカーノートやタイマーなどのスピーカーパネル URLで共有可能 ■ 資料の事前提出が必要な場合にも助かる PDF出力も可能 既存のテーマ資産の活用

9.

基本的な使い方

10.
11.

環境のセットアップ ここが少し面倒だが、一度セットアップしてしまえば、あとは簡単。 1. 2. 3. 4. 5. Google Cloud で開発者プロジェクトを作成 (または再利用) APIとサービスでGoogle Slides APIとGoogle Drive APIを有効に 認証情報 ページ上部の + 認証情報を作成をクリック OAuthクライアントIDタイプの認証情報を作成 タイプとして デスクトップアプリ を選択 a. アプリを公開する必要は無いため Google Auth Paltform / Audience から自分のメールアドレス をテストユーザーに追加 6. 認証情報ファイルをダウンロード a. ~/.local/share/deck/credentials.jsonに配置

12.

(余談) API Limit ● プロジェクトを共有する場合、人数が多くなる場合はプロジェクトを分けた方が 良いかも ○ ● deck はその仕組み上、結構APIを叩く作りになっている ○ ● 会社などで利用する場合 極力バッチリクエストにはしている 参照: 使用制限 | Google Slides reqs / min 読み取り 書き込み プロジェクト全体 3000 600 ユーザー辺り 600 60

13.

スライド作成 ● % deck new deck.md ○ ○ deck.md ファイルが無ければ新規作成 FrontmatterにpresentationIDが挿入される https://docs.google.com/presentation/d/xxxxxXXXXxxxxxXXXXx xxxxxxxxx/ がGoogleスライドのURLになる。

14.

スライド作成 既存スライドからのテーマ流用 既存のスライドのテーマを流用したいときに、元のスライドのIDを指定する。 deck はテーマが重要なのでこのオプションは大切。テーマ自体はURLを持た ないのでプレゼンテーションIDを指定して、そのテーマを流用する。 (設定ファイルに設定可能にしても良いかも)

15.

スライド適用 Markdownの内容をGoogleスライドに適用する

16.

ファイル変更検知とリアルタイム反映 Markdownファイルの変更を検知し、適用を自動でおこなう。基本的にスライ ドMarkdownを編集しながらこれを実行しておく運用になる。

17.

コードブロックの画像変換 ● ● 外部コマンドと連携してコードブロックを画像変換してスライド内に配置 --code-block-to-image-command(-c) オプションでコマンド指定 ○ ● Frontmatterや設定ファイルへの codeBlockImageCommand: 設定も可能 Songmuは laminate , 内部で主に silicon を使っている ○ ○ https://github.com/Songmu/laminate https://github.com/Aloxaf/silicon

18.

基本的な利用フロー ● ● ● deck new deck.md でMarkdownファイル作成 deck apply -c laminate --watch deck.md を実行しながら Markdownファイルを編集 たまに、Googleスライドを確認して位置調整など ○ deck open deck.md で対象Googleスライドを開ける

19.

設定ファイル ● ● ~/.config/deck/config.yml に設定ファイルを置ける profile対応 ○ ○ ○ ~/.config/deck/config-{profile}.yml に個別の設定ファイルを置ける profileは--profile {profile} オプションで各コマンドに指定 仕事用と個人用で分けたい時など

20.

コンテンツ配置ルール

21.

コンテンツ配置ルール ルールを意識せずとも、直感的に配置されるようになっているし、そうしたい。 ● Markdownのhr 要素 --- がスライド区切り ○ ○ ● ● スライド内の一番レベルの高い見出しがスライドのタイトルになります スライド内の一番高いレベルの見出しの次の見出しがスライドのサブタイトルに なります ○ ● 行頭から3つ以上連続するハイフンをスライド区切りとして扱う それ以外の hr 要素は、ページ内のコンテンツ区切りとなる 複数設定可 それ以外のコンテンツは本文として扱われます ○ ○ 本文の途中にサブタイトル要素が出現した場合、本文が複数に区切られます 本文の途中に hr 要素が現れた場合、それが本文区切りとして扱わる それぞれ対応するスライド内のプレースホルダーに流し込まれます。

22.

Markdownの例 次のスライドにレンダリング例

23.

ここがタイトル ここがサブタイトル これ以降が本文 ● ● ● ● Markdown.pl CommonMark GitHub Flavored Markdown Vivliostyle Flavored Markdown

24.
[beta] 
サポートしている記法
CommonMarkの基本的な記法に加えてGFMのテーブル記法もサポート
●
●
●
●
●
●
●
●
●

Bold ( **bold** ), Italic ( *italic* __italic__ )
List ( - * ), Ordered list ( 1. 1) )
Link ( [Link](https://example.com) )
Angle bracket autolinks ( <https://example.com> )
Code (code)
Image (![Image](path/to/image.png) )
Block quote ( > block quote )
Table (GitHub Flavored Markdown tables)
RAW inline HTML (e.g., <mark>, <small>, <kbd>, <cite>, <q>, <span>,
<u>, <s>, <sub>, <sup>, <var>, <samp>, <data>, <dfn>, <time>, <abbr>)
25.

画像対応 ● Markdown内の画像をスライド内に配置してくれる ○ ○ ● 場所やサイズは自分で調整 ○ ● ![alt](path/to/image.png) の形式 リモートファイルもローカルファイルも両対応 apply され直しても位置は維持される 画像プレースホルダーをレイアウトに設定しておけば場所の制御も可能 ○ コードブロック画像の配置も同様

26.

コードブロック ● 外部コマンドと連携して画像化したコードブロックを配置

27.

スピーカーノート HTMLコメットブロックがスピーカーノートとしてスライドに挿入される。ス ピーカーノート使えるのは嬉しい人も多いのでは。

28.

テーマ・レイアウト・スタイル テーマとレイアウトによるスタイル制御

29.

テーマ内のレイアウト名によるデザイン制御 ● ● 「表示 -> テーマ作成ツール」or「スライド -> テーマを編集」 テーマは複数の「レイアウト」を持てる ○ レイアウトの名前を指定してスライドのデザインを制御する

30.

レイアウト名一覧の表示 ● プレゼンテーション内のテーマのレイアウト名一覧を表示する ○ ○ レイアウトの追加や名前の変更は利用者側で自由おこなう 以下はあくまで一例

31.

ページ設定機能 各スライドのHTMLコメントブロック内に記述したJSONがページ設定として 扱われる。現状以下の設定がサポートされている。 ● ● ● ● layout: レイアウトの指定 freeze: スライドをfixしてもう変更しない ignore: スライドの生成を行わない skip: スライドをskipページとして生成する

32.

インラインスタイル "style" という特別な名前のレイアウトがスタイルシート的な役割を果たし、インラ イン要素の表示スタイルを定義できる。 ● ● code, bold, italic, link, blockquote その他、cite や kbd といったインラインHTML要素の装飾も定義可能

33.

インラインスタイルの例 このページが次のページのようになる

34.

Inline Style ● ● strikethrough unarticulated annotation C8H10N4O2, also known as "caffeine." E=mc2.

35.

defaults設定 ページ設定を個別に指定するのではなく、デフォルト設定をまとめて指定できる 以下のようなDSLをFrontmatter内に記述する。これはタイトルのヘッディングレベ ルに応じたレイアウト指定を実現する設定。

36.

サンプル集 Markdownとスライドの対応

37.

例: タイトルとサブタイトルと本文

38.

タイトル サブタイトル

39.

例: H2タイトルとH3サブタイトルと本文

40.

H2タイトル H3サブタイトル 本文

41.

例: タイトルと本文中のヘディング タイトルのヘッディングと2レベル以上離れていると本文中にレンダリングさ れる。

42.

タイトル 本文中のヘッディング 本文

43.

例: 複数サブタイトル 順番に関わらず、一番高いレベルの 見出し(この場合h2)がタイトルとし て扱われる。ちなみに、タイトルと サブタイトルの順番は前後しても問 題ない。それぞれ違うプレースホル ダーに配置されるため。 なので対象レイアウトの表示に則し た順番で記述すると分かりやすい。

44.

サブタイトル1 (左肩部分) タイトル サブタイトル2 本文

45.

例: 複数のサブタイトルと本文区切り

46.

タイトル サブタイトル サブタイトル2 本文2 本文1

47.

例: 複数Bodyプレースホルダー ページ区切りにならないhr要素を配置することで本文を分割できる

48.

タイトル 本文1 本文2

49.

注意事項 ● 特別なブロック ○ ● blockquoteやtableは、本文中から抜き出され、独立したオブジェクトとしてスライド 上に配置される ■ 前後のテキストは１つの本文として統合される ■ オブジェクトの位置は適宜調整して下さい サブタイトルや本文が複数ある場合 ○ ○ レイアウト内に対応するプレースホルダーが足りない場合、そのテキストはレンダリング されません 少し非直感的で警告もされないので不親切だとは思っている ■ 警告を出すか、表示を調整するか検討中

50.

Tips

51.
[beta] 
会社紹介等のテンプレスライドの表示

以下のような方法がある
●

その為のレイアウトをテーマに定義する
○

●

<! -- {"layout": "about-company"} --> のように指定する

一枚画像にしてしまってスライド全面で表示する
○

![会社紹介](path/to/about-company.png) だけ配置したスライドを作るなど
52.

改行の扱い ● Markdown本文中に改行があってもスライド上では改行されない ○ ● 明示的に改行を挿入したい場合 ○ ○ ● 標準的なMarkdownの "Soft line break" 仕様に準拠 "Hard line break" 記法 (行末のスペース2つ) を使う < br> タグを直に記述する Frontmatterか設定ファイルへの breaks: true 設定 ○ ○ これにより、Markdown本文中の改行がスライド上でも改行されるようになる GitHubサイト上のMarkdownの挙動と同様になるのでそっちの方が嬉しい人も多いかも ■ ちなみにGithub Flavored Markdown SpecではSoft line breakは改行表示されな いことになっている… ● 「改行するオプションを設けても良い」という記述もある

53.

QRコード生成 deck のコードブロックの画像化は、任意の画像生成器としても機能するの で、 qrencode コマンドなどと組み合わせてQRコードを生成できる。 コマンドの分岐設定は https://github.com/Songmu/laminate が便利。

54.

フォルダ指定 ● Googleドライブの特定のフォルダ内にスライドを作成できる ○ ● --folder-id で指定 ○ ○ ● ● フォルダIDをURLから取得 ■ https://drive.google.com/u/{N}/drive/folders/XXXXX の XXXXX 部分 deck new --folder-id XXXXX deck.md deck apply --folder-id XXXXX deck.md ■ apply時は画像などの一時ファイル作成フォルダとして使われる 設定ファイルで指定可能可能 サービスアカウント利用時は必須 ○ 新規のサービスアカウントは個別のGoogle Drive容量を持たないため

55.

サービスアカウント対応 ● 個人のGoogleアカウントではなく、サービスアカウントも利用可能 ○ ● Google Workspaceの共有ドライブ利用と、--folder-id 指定が必須 ○ ○ ● GitHub Actions上で動かしたい時など ■ ニーズは少ないと思うが 新規のサービスアカウントは個別のGoogle Drive容量を持たないため ■ 古いサービスアカウントは容量が割り当てられていることもある 共有フォルダではダメ ■ 共有フォルダへの新規ファイル書き込みはアカウントの容量を使う為 詳しくは Service Account Setup for deckを参照のこと

56.

支援のお願い OSSへの様々な支援や貢献方法

57.

deck はOSSです ● ● 自由に利用できます 可能ならば何らかの形で支援・貢献して下さると嬉しいです ○ ○ ○ 支援や貢献にもいろいろな形があります 簡単なものから、できる範囲で構いません それが、ソフトウェア自体の継続性にもつながります

58.

様々な支援や貢献の形 ● ● ● PR活動 コードへの貢献 スポンサー

59.

PR活動 ● ● ● ● リポジトリ にstarを付ける SNS上で「使ってるよー」と発信する Blog等で紹介する 実際に deck を使ってプレゼンをする これだけでも立派な貢献なのでめっちゃ嬉しいです。

60.

コードへの貢献 https://github.com/k1LoW/deck への貢献も大歓迎です。 ● ● ● ● ● バグ報告 バグ修正 機能追加 パフォーマンス向上 ドキュメント

61.

バグ報告Tips deck 実行時にエラーで不正終了した場合、エラーファイル .local/share/deck/error.json が生成されるので、issueにこちらも添付して もらえると助かります。

62.

スポンサー オリジナル作者の k1LoW さんと Songmu の二人でメンテナンスしています。 GitHub Sponsorsを開けてあるので、是非少額のワンショットでも良いので支援を検 討して下さい。 ● ● https://github.com/sponsors/k1LoW https://github.com/sponsors/Songmu (ちなみに、deck のインテグレーションテストをGitHub Actionsで実行するための Google WorkspaceやGoogle CloudのリソースにSongmu個人の有料契約を使ってい るため、ほんのちょっとだけお金がかかっています)

63.

是非 deck をご利用下さい！

64.

おまけ このスライドの元のMarkdownは以下から参照できます。 https://gist.github.com/Songmu/52e7ec5f926670eec190bee7d72bc6c0