タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは、製造業でソフト開発エンジニアをやっているとみー(@tommyecguitar)です。 会社で納品物の説明ドキュメントを作ることがあり、その時にMarkdownでの組版をやってみたので、どう運用したか、困ったところ、いい点、悪い点をまとめてみようと思います。 Vivliostyleで組版したブログはたくさんあるので、見た目がどんな感じにできるかなどはそちらを見ていただくか、Vivliostyleのサイトをご覧ください。 Wordじゃだめなのか。 製造業で何かしら長大なドキュメントを作るとなったら、大抵はWordを複数人数で編集するという運用をしているところが多いと思います。 しかし、Wordにはいろいろと悪いところがあります。 チーム内で共同編集すると、編集したところが消えたり、フォントやデザインがなぜか統一されなかったりする。 セクションごとに担当を分けても、マージが手作業にな
CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門
CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は『CSSによる本作り』の解説書を紹介します。 原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。 表紙に「未知の表現力！」とあるように、CSSでこんなこともできるのかと驚きの連続でした。 本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。 マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。
上達のコツはやはり反復練習！ということで、第4回では、InDesignで作られた書籍のPDF（なければプリントアウト）をもとに、紙面デザインをそっくりに再現する方法について解説します。何度か作成していくうちに、Vivliostyleの可能性やクセがつかめてくるはずです。 CSS組版を覚える早道は……？ 筆者は2023年に『Web技術で「本」が作れるCSS組版 Vivliostyle入門』を執筆しましたが、これを読んだだけで自在に本を組めるようになるかといえば、残念ながらそう簡単なものではないというのが正直なところです。 では、どうやってCSS組版を勉強すればいいのでしょうか？ ひるがえって、自分がたどった道のりを思い出してみると、CSS組版とVivliostyleを使い始めたのは、書籍の原稿整理の一環として、書籍デザイン通りの字数・行数をCSS組版で再現したのが始まりでした。何度もそれを繰
これは Visual Studio Code Advent Calendar 2021 の19日目の記事です。 技術記事や、技術書を書くことが多数あります。技術書典11では、以下を執筆していました。 今も技術書典12に向けて、執筆を続けています。ここで使っているツールセットを紹介したいと思います。 CSS組版 Vivliostyle で Markdown をPDFにする HTML&CSSで組版ができる Vivliostyle を使っています。 Vivliostyle は CLI ツールが提供されており、これを使うことで、執筆環境を簡単に整えたり、1コマンドでPDFをビルドできたりします。 執筆環境を整えるには、Create Bookを使います。 以下のコマンドでビルドするための環境が整います。 このコマンドでできた環境では、npmに付属するタスクランナーでビルドコマンドが組まれています。そ
Vivliostyle（ビブリオスタイル）はCSS組版を実現するオープンソースのライブラリ／アプリケーション群です。これから始まるこの連載は、そんなVivliostyleの魅力や可能性にさまざまな方向から迫ってみようという試み。まず第1回としてCSS組版とはなにか、そしてVivliostyleでどんなことが、どのようにしてできるのかをご紹介します。 CSS組版ってなに？ そもそも組版とはなんでしょう。一言でいえば文字・図版・写真などをページ上に配置することです。この記事では、とりわけCSSやHTMLといったWeb技術をつかうCSS組版を取り上げます。その最大の特徴はページ区切り（pagination）。ブラウザーではコンテンツをスクロールして読み進みますが、CSS組版ではページをめくることで読み進みます。結果として、CSS組版は印刷用データ（PDF）を作成する方法でもあります。現在CS
2020年末、技術同人誌をはじめて書くならVivliostyleで決まり！ （ってそろそろ言いたい……） 技術書典に代表されるように、技術同人誌[1]が盛り上がりをみせています[2]。 私は以前に「技術同人誌をMarkdownで書く」とは、実際どういうことか？という記事を書いたことがあります。書いた時期は2018年末でした。当時は「初心者が原稿をMarkdownで書いてPDFとしてビルドし、比較的安全に印刷所へ入稿する方法」が確立されていなかったと記憶しています。 その時期から状況は変わり、初心者に勧められそうな「技術同人誌をMarkdownで書く」ためのツールが登場しました。それがVivliostyleのCreate Bookです。 Create Bookによって、次の同人誌の制作・入稿ワークフローが比較的手軽に実現できるようになりました。 プロジェクトの作成 Markdownによる本文
小形克宏 @ogwata CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 vivliostyle.connpass.com/event/189940/ 開会しました！ 質問などあれば、#vivliostyle をつけて呟いてください。適宜こちらで拾って、16:40からのQ&Aセッションでぶつけます。 2020-10-24 13:06:44
CSSにまだ詳しくなかったり、ページデザインよりも本文の執筆に注力したい人のために、Vivliostyleでは簡単にデザインを適用できる「Vivliostyle Theme」が用意されています。第3回では、Vivliostyle Themeの使い方や、Vivliostyle Themeを実現するためのCSSの機能、自分でVivliostyle Themeを作って公開する方法について紹介します。 Vivliostyle Themeについて Vivliostyle Themeは、Vivliostyleワークフロー上で簡単にページデザインを適用するための仕組みです。CSS組版を実現するVivliostyleは、ページデザインをCSSで実現できることが最大のメリットですが、逆説的に言うとCSSを知らないとデザインの変更ができないとも言えます。CSS自体は広く普及しており、CSSを学ぶ環境も十分に整
本記事ではVivliostyle用のMarkdownとして開発されている、VFM（Vivliostyle Flavored Markdown）について解説します。 MarkdownとGFM、VFMの関係 構造化された文書を記述するためのマークアップ言語としてHTML/XMLがあります。これらは優れた表現力を持つ反面、記法として手動で書くには煩雑です。この課題を解決するための簡潔なマークアップ言語として、Markdownが登場しました。 以下はHTMLとMarkdownで同じ文書を記述した比較例です。 HTML <h1>Title</h1> <p>The quick brown fox jumps over the lazy dog.</p> Markdown # Title The quick brown fox jumps over the lazy dog. MarkdownはHTM
Vivliostyle で本を作ろう
「Vivliostyle で本を作ろう」はユーザ会編集による同人誌。Vivliostyleを使うノウハウや、開発に参加するための情報がギッシリ詰まってます。毎回の技術書典にあわせて刊行していますが、同時に Web 上でバックナンバーも公開することにしました。これを読んで、Vivliostyle で本を作ろう！ A 入門・使用レポート……組版に関する tips を含む B 業務での活用事例……周辺ツールとの連携や、特殊な要求にこたえるための工夫など C 開発について……今後の予定や現状の課題など D Vivliostyle について……開発以外の総合的な話題 Vivliostyle で本を作ろう Vol.6（2022年9月11日） Vivliostyle.js v2.16.0 と v2.17.0 で機能が追加された、新しい CSS プロパティ対応の件を中心に、より実践的な CSS の活用方法
GigaViewer for AppsにVivliostyle.jsが採用されました 小形 克宏 (理事、業務執行役員) 株式会社はてなは今年3月29日、自社のマンガビューワ「GigaViewer for Apps」が、「少年ジャンプ＋」（株式会社集英社）のアプリ版に採用されたことを発表しました。 はてなのアプリ専用マンガビューワを集英社が採用。2,700万ダウンロードを超える「少年ジャンプ＋」に提供開始（2024-03-29） これにともない「GigaViewer for Apps」に組み込まれた小説用ビューワのレイアウトエンジンとして、Vivliostyle.jsが採用されたことをお知らせします。 もしかしたら、「なぜマンガアプリにVivliostyleが？」と不思議に思われる方もいるかもしれません。じつは集英社はマンガ作品のノベライズにも力を入れており、「少年ジャンプ＋」もたくさんの
こんにちは。株式会社Typebase の代表でエンジニアの寺嶋（@y_temp4）です。 2022 年 9 月 10 日から開催されている 技術書典13 で Next.js, Prisma, GraphQL Code Generator で作るフルスタックWebアプリケーション という本を公開しました。 その際に、執筆環境として Vivliostyle を採用したため、この記事では初めて Vivliostyle を使ってみた感想や、ハマりポイントについて解説していきます。 Vivliostyle とは？ Vivliostyle は Web の技術を駆使して組版システムを作るためのオープンソース・プロジェクトです。執筆環境は npm で構築でき、スタイリングは CSS で行えます。 参考：Create Book で同人誌を作ろう！ | Vivliostyle 原稿はマークダウンで作成していき
Vivliostyle Docs
CSS組版 with Vivliostyleでゼロから版面設計をやってみよう HOME CSS組版 CSS組版 with Vivliostyleでゼロから版面設計をやってみよう 社内で時々「仮組み用のCSSの書き方を教えて」といわれるんですが、なかなか時間が取れず後回しにしていました。少し時間が作れたので、今回はCSSファイルを作るところからスタートして、基本の版面ができあがるあたりまでチュートリアルやってみようと思います。 Vivliostyleには便利なCLIもありますし、当社も普段は自前のAtomプラグインを使っていますが、今回はあえて便利なものは使わず、最低限の構成でやってみます（多少不便でもシンプル構成なほうが要素技術が見えるだろうという趣旨です）。最低限の構成とは、HTMLファイル、CSSファイル、Vivliostyle Viewer、Webサーバーの4つです。Webサーバーは
先週末、こちらのオンラインイベントに参加してきました。 vivliostyle.connpass.com 当日の配信はこちらです（勝手に貼り付けても良かったのか？）。connpassのイベントページから資料を見に行くと、各セッションごとに切り分けられた動画もあります。 CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 聴講の動機 全体を通しての感想 各セッションについて Vivliostyle CLIで広がるCSS組版のエコシステム スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト Vivliostyle Pub の現状と課題 Vivliostyleで厚めの薄い本をCSSで組んだ話 Rapid publishing for public health books against COVID-19 商業出版『そろ
アカベコ @akabekobeko 指摘されているようにプログラマー的にはリファレンスや仕様をあたるものだが、CSS 組版として文書を作りたいだけのユーザーにとっては確かにとっつきにくいかも #vivliostyle
いなにわうどん @kyoto_inaniwa 明日のVivliostyleのイベントで拙作の組版処理システムについて発表する機会を頂戴しました。組版に興味がある方々、もしよろしければどうぞ、、 twitter.com/ogwata/status/… 小形克宏 @ogwata 【急報】CSS組版 Vivliostyle ユーザーと開発者の集い 2021春 vivliostyle.connpass.com/event/208401/ #vivliostyle 未踏IT人材発掘・育成事業で「強力なグラフィック機能を備えた日本語組版処理システムの開発 」が採択された、注目のエンジニア和田 優斗さんの登壇が決定！ ipa.go.jp/jinzai/mitou/2… いなにわうどん @kyoto_inaniwa 2年前くらいに技術書典行った際、Vivliostyleで本を作ろう！を買ってお〜世の中には
この記事は4つの記事で構成されています。（注意：中編が膨れ上がってしまったので、2つに分割しています） 前編：Vivliostyleで今度こそはじめる「Markdownで技術同人誌」 Vivliostyle、Create Book、Vivliostyle Flavored Markdown（VFM）の概要を紹介 中編その1：Vivliostyle：とにかくCreate Bookのサンプルをビルドしてみる インストール Create Bookのサンプルをビルドしてみる 中編その2：VFMの紹介 VFMを「GFMの記法」「GFMを拡張する記法」に分けて紹介 後編：技術同人誌をつくって入稿用PDFをビルドする ← いまここ 同人印刷所の入稿要件を満たしてみる 技術同人誌をつくる流れ 本稿では「Markdown原稿をもとにした技術同人誌の制作」を想定します。Create Book（Vivliost
Webページのレイアウトに用いられるCSSの技術で文書レイアウトができる、オープンソースの組版ソフトウェア「Vivliostyle」をテーマに、5人のユーザー・開発者が合同誌を作りました！ Vivliostyleの今を知り、あなたもVivliostyleで本を作ろう！ ● Vivliostyle Theme のつくりかた (やましー) ● Markdown を拡張する MDX はドキュメント作成の新たな可能性？ (spring-raining) ● VFM 入門 2021 夏 (アカベコ) ● Vivliostyle Foundation 2020 年度の活動まとめ (小形克宏) ● CSS 組版の基本仕様 CSS Paged Media 入門のススメ (村上真雄) ---- 本書は全篇HTML/CSS形式で無料公開！ ぜひ実物の本と見比べてVivliostyleでのレイアウトの参考にして
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
納品ドキュメントの作成にMarkdown+Vivliostyleを採用した話 - Qiita
Vivliostyleで市販書籍とそっくりに組んでみよう | gihyo.jp
74thの技術同人誌執筆環境（Markdown+Vivliostyle+VS Code）
Vivliostyleでなにができるの？ | gihyo.jp
Vivliostyleで今度こそはじめる「Markdownで技術同人誌」（前編）
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋
CSSフレームワークVivliostyle Themeで簡単にページデザインを編集する | gihyo.jp
Vivliostyleに特化したMarkdown - VFMの使い方 | gihyo.jp
GigaViewer for AppsにVivliostyle.jsが採用されました
技術書典13の執筆環境にVivliostyleを採用しました
CSS組版 with Vivliostyleでゼロから版面設計をやってみよう
Vivliostyle ユーザーと開発者の集い 2020秋に参加しました - DTPab
CSS組版 Vivliostyle ユーザーと開発者の集い 2021秋
CSS組版 Vivliostyle ユーザーと開発者の集い 2021春
Vivliostyle: 技術同人誌をつくって入稿用PDFをビルドする（後編）
Vivliostyleで本を作ろう vol. 5：Vivliostyleユーザー会
www.kao.co.jp
qiita.com/course_k
www.nichepcgamer.com
togetter.com
www.nichepcgamer.com
www.gizmodo.jp