ep.8 技術書典と Vivliostyle - 広がる CSS の活躍の場 | UIT INSIDE

2019/04/04 に公開2034 views

このエピソードについて

花谷 (@potato4d) と緑豆はるさめ (@spring_raining) の二人で、技術書典、CSS 組版、Vivliostyle について話しました。

ゲスト紹介

spring_raining

2019/04 新卒
UIT 配属予定
Vivliostyle Organization core team

技術書典

https://techbookfest.org/

4/14(日) に 6 回目が開催される技術同人誌即売会
毎回 1 サークルが数百冊〜数千冊を頒布するなど勢いが伸びている
Web フロントエンド島は特に活気があり、目玉になっている

Web 技術における執筆環境

執筆というと Word や TeX の印象があるが、今は Web 技術で可能
文書記述とレイアウト装飾は分け、 CSS で組版を行っていく
- Draft の CSS の機能を使うことによって、ページ単位にわけられた印刷用のスタイルの装飾も可能
本文記述も Markdown など、エンジニアが慣れ親しんでいる方法で書いていくことが可能
- はるさめさんのケースでは、 Markdown + CSS の構成に、ビルド用の HTML は pug を、ビルドツールは Gulp で運用した実績などがある
- 最近は NPM scripts で十分要件を満たせるので移行しても良い

Vivliostyle

https://vivliostyle.org/ja/

組版でも十分な力を発揮する CSS の仕様の一方、ブラウザの実装が追いついていない場合なども多々ある
Web ブラウザ向けのポリフィルとして、また、より詳細な設定ツールとして Vivliostyle という OSS が存在する
Vivliostyle のポリシーとしては Draft として生きているものを尊重しているスタイル
- 将来的な Web 技術としてあり得る範囲を主にサポート

Real world CSS for Typesetting

現実世界での事例として、技術書典での利用実績はもちろん、開発者が触れる機会が多いドキュメントの記述でも使われている
- 例えば、一部家電製品の取扱説明書では、実際に CSS 組版での印刷実績などが存在する
装飾に凝らないある程度までうまく作られたものを作るには十分
- どうしても専用のデザインツールには敵わないこともある
より詳しく知りたいかたは技術書典 6 の Vivliostyleユーザー会の合同誌を見てみる選択肢も

その他 UIT で話題になったトピック

BGM & SE: 魔王魂

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは

Guest 00:01
こんにちは

Guest 00:02
えーということで、今週もUIT INSIDE。え、今回第8回ですねえ、やっていきたいと思います。

Guest 00:08
このポッドキャストですが、え、LINEitsに所属する開発者たちが、毎週最新のフロントの動向について語るためのコードキャストです。

Guest 00:17
最新のweb標準の動向から開発する枠の変遷、またまたuyやxに関するようなアップデートまで

Guest 00:23
全週までの内容をキャッチアップしていくことを目的としております。

Guest 00:27
ええ、今回はですねえ、UIT所属のジェスラーである。え、私はたとえ一緒にですねえ、今年度新卒のですねえ、新しくUITシに所属する。えとは、めんと2人でお送りしたいと思います。よろしくお願いしますよろしお願いします。

Guest 00:41
ではですねえ、早速ハラスメントさんの方、自己紹介お願いできますでしょうか。

2. キャスト自己紹介 00:42

Guest 00:45
はい、雑誌のハンドルネームですかね。ハンドルネームはめで、アデスプリングレーニングと書いてはと言います。はいで、そうですね、所属は

Guest 00:54
今までは大学院で2年間ま研普通に研究を

Guest 00:58
していて、で、今年の4月1日っていうか、今日4月1日なんですけど、はい、あのえ、新卒としてはい、入社いたしました。

Guest 01:08
えとことでえ、ちょっとえ。今日はですねえは、サムさんが結構え、技術書店とかま、技術書の執筆とかに関わられてるというところがあるんで、その辺の話していきたいと思います。

Guest 01:18
はい、よろしくお願いします。

3. 技術書典について 01:20

Guest 01:21
で、もうちょっとでギルデンシーズなんでしたっけ。

Guest 01:24
そうですね、もうあと2週間ぐらいですね、

Guest 01:27
いつでしたっけね、4月の14ぐらいでした113か4ありそれぐらい。なんかそのそ

Guest 01:33
ていうとこでま結構もう技術書店も今回で6回目だったはずでま。結構もう請求してるかなと思うんですけど、はささん自身で、今まで何度か参加されてたと思うんですけど、今んとこげ技術書店3か歴とかってどんな感じだったりするんですかね。

Guest 01:47
そうですね、何回目だったかな。書店22、22からですね。で、1回えーとい

Guest 01:56
フォフォーが空いてま2、35と参加してました。はい

Guest 02:02
もじゃ、もう結構もう泣いたもんていうか、

Guest 02:04
ああまあまあまあ一応そうですね、はい、

Guest 02:06
ちなみに今回も参加されるんですよ。あ、はいそうなるほど、なるほど、ま、ちょっとちょっとその辺りもえお伺いできればと思います。

Guest 02:13
で、結構技術書店えご存じない方もいらっしゃるので、ちょっと説明えしたいかなと思いますけど、まえ半期に回ま半年に1回やってるんでま、今回で多分3年目だと思うんで

Guest 02:23
ですけど、3年目になるなんでしょう。技術書版込み系みたいな存在で、まあ、その技術書を結構え取り扱ってるまあ、同人イベント一大同人イベントみたいな形になってますと

Guest 02:34
で、そん中でま。結構プロンテンドの島とかって、技術書店の中でもだいぶおっきな勢力になってたりとかしてて、執筆環境っていうのがま。例えば、

Guest 02:42
普通にワードで書く人とかもいれば、まそのテフとか書か使う人もいますし、最近はその

Guest 02:48
レビューっていうま、専用のえ言語があったりするみたいなんですけど、まあ、実はウェブウェブ技術でも執筆できるよみたいな話がえあるっていうのをは、さんからいこう話とか聞いたりとかするんで、ちょっとその辺

Guest 02:59
聞きたいと思います。あ、はい

Guest 03:01
ええそうですはい、お願いします。そうですね、

4. 冊子の制作と CSS組版 03:04

Guest 03:04
僕がそう初めて参加したのは多分有書店じゃなくて、今家だったかな。まあ、その時からそのゆえ住所を書いてたんですけれども、

Guest 03:13
あの、まあ、もともとそのジェースを段から書いてて、まあその

Guest 03:18
まあアティフ正直言って書くの結構しんどいじゃないですか。まあまあそういった感じで、まあ、何をなんかこう。自分のこう強みを生かせるようなしする方法はないかなって感じで探していると、

Guest 03:30
ビブリスタイルを見つける。あ、ビブリオスタイル後で紹介します。けれど、もえ、そのcssを使って、組販をするっていう

Guest 03:37
技術を見つけましてま、そこから、まあ、自分の本は基本的にそのcssとtmlをかい使って、文章を作っていくっていう感じでやっていきました。

Guest 03:47
は、結構エに本文を書いて、css側でまその整えていくというか、組み反していくみたいな感じですかね。そうですね、はい、あの、

Guest 03:54
ちなみにその時って普通にhml気合で書いていくみたいな、そういう感じのマークフローなんですかね。

Guest 03:58
いや、そうではないですね、はい、なるほど、まあそうです最初のま原稿は基本的にマークダンを使っては、はい、書きます。でまダをまあ、大体色んな方法でそのエ変換する

Guest 04:09
いがあるんですけどもそうです。私の場合だと、そのテーマークダウンを今だとそのマークドっていうラがありましてま、それを使って、

Guest 04:19
そのまあその

Guest 04:21
hmlに変換するっていうはいことをやってます。で、まあ、直接そのhmlを書く箇所とかもあるんですけれども、そこも直接そのタグをえ、手で書くんだけなくて、

Guest 04:32
タグというラベルを使って、まあ、トランスにトランスファイルするっていうはいではいい原稿が入ってます。

Guest 04:38
なるほど、なるほど、じゃあ結構ま文章自体はガリガリマークダウンで書いて、まあ楽に書いていってま。最終はま、なんかツールとかえワンなんでしょう。

Guest 04:47
ワンライダーみたいなの書いて、ビルドするって感じですかね。じゃあ、結構フロントエンドのワークフローぽい感じになって、はいって感じですね。その時ってなんかちなみに余談ですけど、

Guest 04:56
今って大体エピスクリプとかでやるかなと思うんですけど、今もそんな感じですかね。

Guest 05:00
あ、そうですね、そこ結構直したいところではあるんですけど、はい、あの、最初

Guest 05:05
はガルプで書いて、まあ、ガルプのこう秘伝のソースコードがちょっとずつつもいつもってって感じで、今もそうですね。ガルプを使って書いてますまあ、はい、基本的にはそのエピクス

Guest 05:16
のまあ、問題内でできるタスク。はいはいはいはい、そこは問題ない。なるほど、なるほど、

Guest 05:22
じゃ結構あれですねェエラーが触れる範囲で作れるって感じですかね。そうですね、なるほど、なるほど、もうそれは実績としてはもうもうコミケの頃からずっと

Guest 05:30
さんですか。はい、そうですね、基本的にはい、僕の方はそれでかいう

Guest 05:33
ほうほうほうな。なるほど、自分もちょっとはめさんの方にえー。供調さしてもらったことがあるんですけど、その時もなんかマークダウンで提出してください。って話があって、出してたのも、まあ、じゃあそれやってもらったって感じですかね。はい、そうなるほど、なるほど、

5. Vivliostyle とは？ 05:47

Guest 05:48
結構もうあれなんですかね。ま、それって今まで実績いくつかあるかなと思うんですけど、そのシエ組みはやっていくにあたって、その

Guest 05:58
ま、じゃあ、もうhmで書いて、css出して、例えばなんでしょう。cromとかって、なんかこう印刷モードに入るとこう、pdfで保存みたいなのがあると思うんですけど、なんかそれで保存してしまうみたいな感じですかね。そのまま

Guest 06:10
そうですね、そこなんですけれども、あの、まあそういう方法もまあで取れるんですけれども、まあ、さっき紹介したそのビブリスタイル

Guest 06:18
っていうのがありましてま、それは、基本的にはそのcssのポリフィルみたいな感じで動きまして、普通のまcssの仕様の中に色々とあのこうエクスペリエンタルな

Guest 06:29
仕様があったりするんですけども、そこの中で、そのえ組みは組みはっていうか、このページの紙面のレイアウトに

Guest 06:36
使えるような仕様とかがあったりするんですね。でま、それをあの、そのブラウザが実装する前に先取りして、そのゆえーと使えるようにするっていうや

Guest 06:46
なってます。じゃ、ほんとにバベルポリフィルとか、そういうののcss1って感じですかね。

Guest 06:50
まあまあまあそんな感

Guest 06:51
な気持ち、気持ち的にはそんな感じですか。なるほど、じゃあ、もう今じゃあすに割とweb標準として、その印刷みたいなんがcssにのなんでしょう。

Guest 07:01
領域としては、制定されてるみたいな感じなんですかね。

Guest 07:03
そうですね、はい、もうレイアウトのそのなんていうんですか。そのページの中のレイアウトは、まあ大体できるって感じですね。あ、あ、はい方で、その

Guest 07:12
例えばそのなんて言うんですか。ノンブルって言って、その

Guest 07:15
あのページ番号を入れるところとか。はい、そのページの端っこの領域のレイアウトとかは、結構そのブラウザでもまだ

Guest 07:23
できないんでま。そういうところをカバーできるっていうのがま主な機能です。

Guest 07:28
なんかあれですかね、ページの端っこって言うと、あのトンボ切るみたいな、そういう感じですか。あ、そうですはい、あな

Guest 07:33
ありますはいはい、

Guest 07:34
結構僕も素人し素人っていうか、まあ、そのプロの方が見ると、まあ確かにちょっとまあまだ不満点とかあったりするんですけども、その同時にして作る分には、僕としてはもう十分。あ、はいはいはい、

Guest 07:47
行くレイアウトができると思ってます。

Guest 07:49
なんか、じゃあ、普段インデザインとかでガチで作ってる人には、まあまだちょっと機能が足りないかな。みたいなのはあるかもしれないけど、って感じですか。そうですね、はい、なるほど、なるほど、じゃあほんとにどうでしょう。

Guest 07:58
さくっとま、エンジニアが作ってしまいたい時とか、それこそ

Guest 08:01
ま技術ドキュメントとかを、なんかpdfで誰かに渡さないといけない時とか、そうか、あるとそう思うんですけど、そういう時だけはまだ使えるって感じですかね。技術

Guest 08:09
ドキュメントはすごい得意な

Guest 08:11
領域感じですかね。

6. Vivliostyle と標準仕様との関係性 08:14

Guest 08:15
いや、えまちょっとえ。ビビリアスタイルについて、もう1個聞きたいんですけど、はいてことは、結構ビビリアスタイルってのは、将来的にはまあ割と標準だけでいけるようになっていく、みたいな存在になるんですかね。

Guest 08:25
まあまあそうですねし、あの希望的にはそうなんですけど、はいはい、おにして、そういうcssの仕様っていうのは、こうぼしゃったりするっていうのがあるんですよ。はい、まあまあまあなんで、まあ

Guest 08:36
でもまあそのなんですかね。ちゃんとその

Guest 08:39
ビブロスタイルのポリシーとしては、その使用として、一応誰かが提示してるものを採用するっていう。はいはいんで、ま。

Guest 08:47
まあ、その分だけまあ、あのなんて将来的に普及するっていう可能性

Guest 08:51
じゃより。このサンプル実装として、どんどん栄えていくことによって、まあ、結果的にはビブリオスタイルがもっと幅広くサポートしていけるというか、はいって感じです。そうですね、

Guest 09:00
ちなみにそのなんかcss。例えば、そのまま今使うとちょっと不都合があるものとかって、どういったところで、その

Guest 09:09
組みはとかやるときに困ったりするんですかね。

Guest 09:12
そうですね、まあ、さっき言ったそのページ外の領域もまあそうですし。そうですね。あと、例えばあの

Guest 09:19
結構その紙面と文章えーのなんて、ウェブ上で違うのって結構何て言うんすかね。そのページで区切りがあるじゃないですか、はい、ウェブって、あの下まで永遠に繋がってるあた、

Guest 09:33
あのページだと、そこでパチパチッと切るところができるんですよね。まあ、はい、それが多分1番そのあの

Guest 09:41
あの違うところかなと思ってまして。まあ、そういうところをカバーするがまあったりしますね。

7. 印刷物におけるCSSの活用事例 09:49

Guest 09:50
ちなみにそんなビブリオスタイル、えまあおびcss組はというか、まあ、印刷用のcssみたいなところがあるかなと思うんですけど、ま、ちょっとその領域において

Guest 10:01
ま。例えば、その

Guest 10:02
同時出版っていうのはま、結構今もう流行ってきている領域かなと思ってて、まえ、自分も詳しくは知らないというか、まあ、自分も同時にしかいた時は、まさかいてはさんに丸投げみたいな感じでやっちゃったんで

Guest 10:13
あれですけども。トイレンジ出版以外のところで、実例として見かけるとこってなんかあったりしますかね。なんかじ

Guest 10:21
自分の知ってる範囲だと、あの、ピクセルグリットさんの出してるあの、有料メディアみたいなやつで、コードクリットはいっていうのがあるんですけど、そこの領収書発行って、ボタンの前に経費のために押してみたら、

Guest 10:33
なんか、hmのページが出てきて、こうcssで組まれてて、そのpdfで保存しようと思ったら、綺麗になるみたいな感じで。

Guest 10:41
なんかそれっぽいなと思ったんですけど、なんか他に

Guest 10:44
業務で使ってるとことか。ま、結構今って、結局重宝重票の出力とか。でも、その頑張って。phpの謎のpdfライフライで、こう請求書発行しました。みたいなんてよくあると思うんですけど、

Guest 10:56
他になんか実例とか知ってたりしますかね。cssのそうですね、

Guest 11:01
多分1番あの広く出回ってるのは、オライリーの本でシーシークレットっていう、あの本があの商業出版であるんですね。はいはいはいで、それは

Guest 11:13
あの、なんかウェブでドキュメントとかあったりするんですけども、その全部ビブリオスタイルでかい作ってるんですね。で、あの英語版もその

Guest 11:22
cssで書かれているっていうものがあってま。それをこう。日本語で翻訳した時に、まあ、有料サイルとそのcss組みはで

Guest 11:31
作ったっていう本があります。でま、それはもう内容も普通にあの興味深いんでぜ。はいはいはい、

Guest 11:37
見てください。なるほど、ああ、面白いですね。ま、天下のオライリーというか、もう技術書の人からしたら、みんな知ってる領域であって、も、

Guest 11:45
ま、やっぱcsのsscssの本だからこそ、cssで本を作ろうというか、っていう感じですかね。

Guest 11:52
じゃ、結構もう商業レベルにも達しているというか、全然そ、あの、まあ同人誌じゃなくても出せる感じだったりするんすね。

Guest 12:00
そうですね、なるほど、あの、

Guest 12:02
そうですねた、他にもあの今度あの僕のあのはいはいはい、自書店に出す。あの、次の本にも書いてあるんですけど、も。はい、あの、結構そのプロの出版社の方が、

Guest 12:14
あの、そのほなんか、こう取り扱い説明書とか。はい、なんかそういうなんていうんですかね。こう技術者が書いて、ま

Guest 12:23
あのある程度見栄え良くしたいけれども、なんか頻繁に変更されるみたいな文章あ、はいはいはい、

Guest 12:29
ありますよ。そういうところで、そのビブリスタイル使う使わないに限らず、そのcssで組むっていうのは、結構僕も知らないですけどもあ

Guest 12:39
ああ。なるほど、なるほど、結構まあでもところではい、家電家電とか。なるほど、そんな

Guest 12:44
あ、あのあれですね。あの、洗濯機とか買ったらついてくる。あれ、はい、確かにあれって技術者めっちゃ触りますもんね、

8. か-22 で Vivliostyle の合同誌出すよ！ 12:54

Guest 12:54
そんなえー。css組みハンとビブリオスタイルですけど、ま、ちょっと今え、トリセツの例とか聞いててま、その次技術書店。えと、ちょっと

Guest 13:03
ちゃんとした日調べますね。

Guest 13:09
ブックベストドットオルグっていうサイトに行くと、技術書店の情報が出てくるんですけど、これ、バリバリアンギュラのサイトって感じですね。

Guest 13:16
で記事書店6えも4月の14日ですねあの、もうあと2週間後ですね、2週間後に

Guest 13:23
日曜日に行われるわけですけど、ま、そこで出すって感じですかね。その今の話とかやった。

Guest 13:28
はい、そういう本が出ます。

Guest 13:30
ちょっとそのそこについて、もう自分も聞きたいんで、教えてもらっても大丈夫。はい、

Guest 13:35
じゃあ、ちょっと宣伝っぽくなってしまいますけど、大丈夫です。はい、

Guest 13:39
えハメ名義で出てる。ビブリオスタイル、ユーザー会というサークルがありまして。これブスがかの22なんですけれども。そこで、そのビブリオスタイルの。僕

Guest 13:50
も書いてるんですけども、そのユーザーとあと開発者が飛行する感じで、合同士をえ出す予定です。で、ま、それも

Guest 14:00
今日話した内容とかも結構入ってたりするんで、まあまあ是非。はい、見てください。はいという宣伝でした。はい、

Guest 14:10
ありがとうございます。はいえーということで、今回はですねテンサイド第8回ですね

9. クロージング 14:13

Guest 14:19
で、8回まちょっとcssの話というよりは、ウェーというよりも、まあcssもやりつつま技術書出版とか、まあ、執筆とか印刷におけるweb技術ま特にcssと

Guest 14:30
まそのえcssってのはま、やっぱり

Guest 14:32
え。まだドラフトみたいな使用もあるっていうところで、ま。もっと強化するために、ビビリオスタイルっていうツールがあるよっていうところをご紹介しました。ま、ちょっと普段はですね、なんか、ガチガチのェイスの話をしたりとか、

Guest 14:42
えま、ちょっと先週はuxの話とかっていうところでやってきたかなと思うんですけど。ま、hmlcss領域もですね。割と可能性があると思うんで、ちょっと

Guest 14:50
え面白い話になったかなと思います。ではですね、今週はですね、そんなところでcss会でしたというところで、え、最後にですねえ、例によって例の56え、今週えや先週ですね先週出ていたえせ、

Guest 15:04
弊社で話題になっていた技術tpixについて少し紹介できればと思います。

Guest 15:09
LINEはティシアではですね、ギッド、ハブイシベースでえ、毎週ですね。フロンペンドについての議論とか、情報交換ってていうのが行われていてま、その中でこういった情報があるよっていうのを、お互いにまあ出して議論するみたいな形になっています。

Guest 15:23
ま、ちょっとえいくつか拾わせてもらうとですね。ま、例えば、ちょっとフロントエンドとは。離れてるかもしれないんですけど。

Guest 15:30
マイクロソフトではですね。先週、パイソン向けの性的型の解析ツールっていうので、パイライトっていうのを出したんですけど、まあ、実は全体のえーソースコードの半分ぐらいがtsまタイプスクリプトがかかってるっていう。なんか、面白いプロジェクト

Guest 15:43
あってま、ちょっと調べてみたら、まvsコードのパイソン、エクステンションも一緒に入っていたりするんで、ま、そこで、タイプスクリプトが使われてるんじゃないか。みたいな話題があったり。まあほですね

Guest 15:53
あれですね、wamでiosがえ進化してて、pwaからooの認証に飛ばした場合も、ちゃんとサファリとかじゃなくて、pdaに帰ってくるようになりました。これがお、ios12.2からの話

Guest 16:05
ええみたいな形でま、色んなええ、話が

Guest 16:08
えあったりしました。とま、ちょっとですね、残りの話題については、シノートの方にえ書いておくので、もし興味あるトピックがあれば、え、是非是非見ていただければと思います。

Guest 16:18
ということで、えとbytサイドえ、第8回はえ、終了させていただければと思います。え、今回は私ポタ4dと

Guest 16:26
一緒にはさんと2人でお送りしました、ありがとうございました、ありがとうございました。