VivlioStyleとRehype／Remarkではじめる、CSS組版による同人誌制作

4.3K Views

May 20, 24

#vivliostyle #スライド

スライド概要

2024/05/20（月） 19:00かに開催された技術同人誌を紹介LT会の資料になります。

kght6123

@kght6123

スライド一覧

オタクなフロントエンドえんじにあです。

またはPlayer版

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

ダウンロード

関連スライド

StoryBook駆動で新規システムの開発を試してみた

storybook フロントエンド vue.js nuxt.js web

kght6123 38K

20231224_Next.jsのApp RouterによるWeb開発について

フロントエンド next.js react.js

kght6123 2.7K

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.7M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.4M

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]

ue5 unreal engine ue-rendering

エピックゲームズジャパン 1.2M

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

あうぜん 1.2M

各ページのテキスト

表紙紹介初心者から始める、効率的かつ魅力的なカスタム制作のすべて！！！ VivlioStyleとRehype/Remarkではじめる CSS組版による同人誌制作！！げぐはつ書房著 Handlebarsによるカスタムタグの制作 Rehype / Remarkプラグインの制作プロジェクト構成の実践例を紹介 VivlioStyleとCSS組版の基本的な解説

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作なぜこのテーマなのか？同人誌制作をする際、ツール選び（Re:View、Vivlio Styleなど）やレイアウトやデザインに困ったり迷った経験がある人がいらっしゃると思います。従来の方法では、カスタマイズに手間や時間がかかることがあります。（実際に、私もそうでした） Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

あじぇんだ 1. はじめに 2. この本で解決できること 3. 本の内容を紹介 4. 実例紹介 5. まとめあじぇんだ VivlioStyleとRehype/Remarkではじめる CSS組版による同人誌制作！！げぐはつ書房著 Handlebarsによるカスタムタグの制作 Rehype / Remarkプラグインの制作プロジェクト構成の実践例を紹介

10.

11.

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作課題感 • Rubyの環境構築が手間 • LaTeXの学習コストが高い • 特殊な設定をしないと好きなフォントが使えない • VS Codeでのプレビューやコード補完ができない（Atomエディターの開発は終了） Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

12.

13.

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作課題感の改善！ • Node.jsのみで動作する • LaTeXより低い学習コストでカスタマイズができる（HTMLと特殊なCSS） • OSのフォントがCSSでそのまま使える • VS Codeでコード補完やLinterの利用ができる Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

14.

15.

16.

17.

18.

19.

20.

[beta]

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作
Markdown+HTML
Handlebars.js<span class="footnote">注釈を書く</span>はJavaScriptで動くテンプレートエンジンです。
Markdown+Handlbar
Handlebars.js{{footnote '注釈を書く'}}はJavaScriptで動くテンプレートエンジンです。
Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

21.

22.

23.

[beta]

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作
Markdown+HTML
<span id="appendix-sample" class="appendix">
&nbsp;Appendixタグの利用例&nbsp;
</span>
Markdown+Handlbar
{{appendix filePath 'appendix-sample' 'Appendixタグの利用例'}}
→ Handlebarのカスタムタグ内で保存
Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

24.

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作最後にAppendixページを生成！ Appendix @media print .......................................................................................................................................................................... 25 @page .......................................................................................................................................................................................... 21 appendix ....................................................................................................................................................................................... 45 Appendix Sample ....................................................................................................................................................................... 86 Appendix with Hiddenタグの利用例 ..................................................................................................................................... 46 appendix-hidden ........................................................................................................................................................................ 45 Appendix タグの利用例 ............................................................................................................................................................. 46 AST（抽象構文木） ................................................................................................................................................................... 50 break-bf-page .............................................................................................................................................................................. 34 chapref ........................................................................................................................................................................................... 37 chat ................................................................................................................................................................................................. 41 chat-header .................................................................................................................................................................................. 41 chat-left .......................................................................................................................................................................................... 41 chat-right ....................................................................................................................................................................................... 41 Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

25.

26.

Markdown+HTML <ul class="chat"> <li class="chat-left"> <div class="chat-faceicon"> <img src="../images/chat-left-icon.png" /> <span class="chat-faceicon-name">キャラ名L</span> </div> <div class="chat-contents"> <div class="balloon-indigo-200"> <div class="trianle-left"></div> <div class="balloon-contents"> (Leftメッセージ) </div> </div> </div> </li> </ul> Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

27.

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作 Markdown+Handlbar {{chat (chat-left ' (Leftメッセージ) ' 'キャラ名L' 'balloon-indigo-200' 'chat-left-icon.png') }} Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

28.

29.

30.

31.

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作テーブルにキャプションを追加するプラグイン  | 自動 | 左揃え | 右揃え | 中央揃え | | - | :- | -: | :-: | | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

32.

[beta]

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作
マーメイドの図にキャプションを追加するプラグイン
<!-- title: フローチャートのサンプル -->
```mermaid
flowchart LR
A[Start] --> B{Decision?}
B -->|Yes| C[Process 1]
B -->|No| D[Process 2]
```
Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

33.

34.

35.

36.

37.

まとめ公開したテンプレートリポジトリは、これからの執筆活動に伴って徐々に更新していく予定です。まだまだ、アルファ版的な位置です。よろしければ使っていただいてIssueやDiscussionなどでご感想をお聞かせいただけると幸いです。 https://github.com/kght6123/techbook-template/ Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

38.

VivlioStyleとRehype/Remarkではじめる、CSS組版による同人誌制作技術書典だけでもVivliostyle関連の本はたくさんあり、また、最近では商業誌でもVivliostyleが監修した本が発刊されていますが、カスタムによった少し趣向の違う本になっているかと思います。本書の内容がみなさまのお役に立つものか、心配ではありますがよろしければお手にとっていただけると幸いです！ Copyright (C) 2023 Toranoana Inc. All Rights Reserved.

39.

40.