zine_brewer 1.0.0 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +243 -1
- data/lib/zine_brewer/kramdown/parser/sekd.rb +35 -1
- data/lib/zine_brewer/main.rb +0 -2
- data/lib/zine_brewer/templates/fig_p.rb +1 -1
- data/lib/zine_brewer/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2142217e4515907dcab2b950fc41cb21ba8a886ec04daa5d4ac4cdc6acc6bfbb
|
4
|
+
data.tar.gz: 1333a38a15cc0b2189ff63b891c8a28a40282705a212283f4e5fa6990d6ac5e6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b4d750d74c7b68d461c9ca1c42fa74d35abe4c51ff9101cd78d1a2efd8a79a188a25542253ddbef1f2fb2e2c46bcad736d81ce36a0f22347f16e24fb44427fa2
|
7
|
+
data.tar.gz: 7882f6378598a4714d51f26d7cd3ec0710b79ecf06eb63c7b7793df275693fafc25956ec5e7014e9cfaa8924a329e3a53755fc132abcc76996a7f9a05b9c19f3
|
data/README.md
CHANGED
@@ -20,7 +20,249 @@ Or install it yourself as:
|
|
20
20
|
|
21
21
|
## Usage
|
22
22
|
|
23
|
-
$ zine_brewer
|
23
|
+
$ zine_brewer [kramdown_document_filename]
|
24
|
+
|
25
|
+
* The header part is converted and written out as "proof/header.txt".
|
26
|
+
* The body part is converted and written out as "proof/body.txt".
|
27
|
+
|
28
|
+
## Enhanced Notation in ZineBrewer
|
29
|
+
|
30
|
+
ここでは、Kramdown(拡張Markdown)に加えて記述可能にした、ZineBrewer向けの記法を説明します。Kramdownの記法は、こちら([クイックリファレンス](https://kramdown.gettalong.org/quickref.html)/[詳細文法](https://kramdown.gettalong.org/syntax.html))をご覧ください。
|
31
|
+
|
32
|
+
ZineBrewerで扱う原稿は「ヘッダー」と「本文」に分かれます。以下ではそれぞれ説明します。
|
33
|
+
|
34
|
+
なお、ZineBrewerは変換したヘッダー、本文をそれぞれheader.txt、body.txtとして、proofフォルダに格納します。
|
35
|
+
|
36
|
+
### ヘッダー
|
37
|
+
|
38
|
+
ヘッダーは6つの項目からなります。各項目は空行を挟んで記述してください。以下の方法で記述を省略することもできます。
|
39
|
+
|
40
|
+
* `---`と書く
|
41
|
+
* 以下省略。例えば、コーナー名とタイトルだけ書いておき、以下は何も書かない(`---`も書かない)ということができます。ただし、以下省略でも、**最後の`■記事ID■:0000`だけは書くようにします。**
|
42
|
+
|
43
|
+
ヘッダーの記述項目:
|
44
|
+
```
|
45
|
+
[コーナー名]
|
46
|
+
|
47
|
+
[タイトル]
|
48
|
+
|
49
|
+
[リード]
|
50
|
+
|
51
|
+
[リード横に表示する画像のファイル名]
|
52
|
+
|
53
|
+
[著者名]
|
54
|
+
|
55
|
+
[追加CSS]
|
56
|
+
|
57
|
+
[■記事ID■:0000]
|
58
|
+
```
|
59
|
+
|
60
|
+
ヘッダー記述例。コーナー名を`---`で省略、追加CSSは以下省略しています。
|
61
|
+
```
|
62
|
+
---
|
63
|
+
|
64
|
+
原稿はZineBrewerで書こう! スタイルも適用できるよ
|
65
|
+
|
66
|
+
もともと、Markdown原稿にCSSスタイルを書き込んでおく方法はないかと思い、
|
67
|
+
見つけたのがKramdownです。文字単位・段落単位でidやclass、各種属性を記述
|
68
|
+
しておくことができました。ただし、Kramdownが出力するHTMLは、翔泳社の
|
69
|
+
記事配信システムが受け付けるHTMLフォーマットとは少し異なる部分があります。
|
70
|
+
そこで、Kramdownを拡張し、翔泳社の記事配信システムが受け付けるHTMLを出力
|
71
|
+
するようにしたツールが、ZineBrewerです。
|
72
|
+
|
73
|
+
1234_title.png
|
74
|
+
|
75
|
+
市古 明典
|
76
|
+
|
77
|
+
■記事ID■:1234
|
78
|
+
|
79
|
+
<%-- page -->
|
80
|
+
|
81
|
+
(以下、本文)
|
82
|
+
```
|
83
|
+
|
84
|
+
ヘッダーと本文の境界には、本文ページの起こしを指示する`<%-- page -->`を記述します。
|
85
|
+
|
86
|
+
**【注意】ヘッダーの最後に記述する`■記事ID■:0000`は、原則として記述必須です。**例外として、原稿を入れているフォルダの名前を記事ID(「1234」など)にしている場合には省略できます。
|
87
|
+
|
88
|
+
上記例をZineBrewerで変換した場合、ヘッダーは次のように出力されます(proof/header.txt)。
|
89
|
+
|
90
|
+
```
|
91
|
+
[タイトル]
|
92
|
+
原稿はZineBrewerで書こう! スタイルも適用できるよ
|
93
|
+
|
94
|
+
[リード]
|
95
|
+
<p> もともと、Markdown原稿にCSSスタイルを書き込んでおく方法はないかと思い、
|
96
|
+
見つけたのがKramdownです。文字単位・段落単位でidやclass、各種属性を記述
|
97
|
+
しておくことができました。ただし、Kramdownが出力するHTMLは、翔泳社の
|
98
|
+
記事配信システムが受け付けるHTMLフォーマットとは少し異なる部分があります。
|
99
|
+
そこで、Kramdownを拡張し、翔泳社の記事配信システムが受け付けるHTMLを出力
|
100
|
+
するようにしたツールが、ZineBrewerです。</p>
|
101
|
+
|
102
|
+
[タイトル画像]
|
103
|
+
1234_title.png
|
104
|
+
|
105
|
+
[著者クレジット]
|
106
|
+
市古 明典
|
107
|
+
```
|
108
|
+
|
109
|
+
### 本文
|
110
|
+
|
111
|
+
#### ■図の書き方
|
112
|
+
|
113
|
+
図は「拡大なし」「拡大あり」「拡大あり(lightbox)」「ハイパーリンク」「プロフィール」の5種類を記述できます。いずれも`<<Fig-●>>`(●にはアルファベット**大文字**1字が入る)から書き出します。
|
114
|
+
|
115
|
+
また、**記述の後には必ず空行を入れてください**(空行が指示の終わりを表します)。
|
116
|
+
|
117
|
+
(1) 拡大なし――src以外は省略可能。**widthとheightはどちらかを指定**しておけば、それに合わせて拡大/縮小表示します(他の種類も同様):
|
118
|
+
```
|
119
|
+
<<Fig_N>>
|
120
|
+
src: [画像ファイル名] ※例 1234_fig.png
|
121
|
+
widrh: [画像を表示するときの幅を指定] ※例 400px
|
122
|
+
height: [画像を表示するときの高さを指定] ※例 300px
|
123
|
+
cap: [キャプション] ※例 2020年調査のグラフ
|
124
|
+
```
|
125
|
+
|
126
|
+
(2) 拡大あり――src以外は省略可能。大きな画像をアップしておき、widthやheightを使って小さく表示させます。なお、キャプションに自動的に[画像クリックで拡大表示]と表示されます。:
|
127
|
+
```
|
128
|
+
<<Fig_A>>
|
129
|
+
src: [画像ファイル名] ※例 1234_fig.png
|
130
|
+
widrh: [画像を表示するときの幅を指定] ※例 400px
|
131
|
+
height: [画像を表示するときの高さを指定] ※例 300px
|
132
|
+
cap: [キャプション] ※例 2020年調査のグラフ
|
133
|
+
```
|
134
|
+
|
135
|
+
(3) 拡大あり(lightbox)――src以外は省略可能。ズーム表示を使いたいときに使用します。やはり、大きな画像をアップしておき、widthやheightを使って小さく表示させます:
|
136
|
+
```
|
137
|
+
<<Fig_Z>>
|
138
|
+
src: [画像ファイル名] ※例 1234_fig.png
|
139
|
+
widrh: [画像を表示するときの幅を指定] ※例 400px
|
140
|
+
height: [画像を表示するときの高さを指定] ※例 300px
|
141
|
+
cap: [キャプション] ※例 2020年調査のグラフ
|
142
|
+
```
|
143
|
+
|
144
|
+
(4) ハイパーリンク――srcとhref以外は省略可能。画像をクリックしたときに、hrefで指定したWebページへジャンプさせます:
|
145
|
+
```
|
146
|
+
<<Fig_H>>
|
147
|
+
src: [画像ファイル名] ※例 1234_book01.png
|
148
|
+
href: [リンク先のURL] ※例 https://www.amazon.co.jp/dp/4798142417
|
149
|
+
widrh: [画像を表示するときの幅を指定] ※例 200px
|
150
|
+
height: [画像を表示するときの高さを指定] ※例 150px
|
151
|
+
cap: [キャプション] ※例 書籍『スターティングGo言語』
|
152
|
+
```
|
153
|
+
|
154
|
+
(5) プロフィール――人物の写真にプロフィールを付けたいときに使う記述方法です。名前とふりがなは、変換後「名前(ふりがな)氏」という表示になります。また、画像の幅を600pxにすると、プロフィールと幅がそろいます。プロフィールの肩書きやプロフィールの行頭に、半角空白でインデントを入れることが必須です。
|
155
|
+
```
|
156
|
+
<<Fig_P>>
|
157
|
+
src: [画像ファイル名] ※例 1234_ichigo.jpg
|
158
|
+
widrh: [画像を表示するときの幅を指定] ※例 600px
|
159
|
+
height: [画像を表示するときの高さを指定] ※例 400px
|
160
|
+
name: [名前] ※例 市古 明典
|
161
|
+
huri: [ふりがな] ※例 いちご あきのり
|
162
|
+
cap: |
|
163
|
+
肩書き
|
164
|
+
プロフィール
|
165
|
+
```
|
166
|
+
|
167
|
+
#### テクニック
|
168
|
+
|
169
|
+
(1) `cap:`(キャプション)は、次のように書くと途中改行を入れられます。各行の先頭には半角空白によるインデントを必ず行います。
|
170
|
+
|
171
|
+
```
|
172
|
+
cap: |
|
173
|
+
1行目
|
174
|
+
2行目
|
175
|
+
```
|
176
|
+
|
177
|
+
(2) 次のように`imgs:`を使うと、複数の画像を並べて表示できます。特に、`width:`(と画像間のすきま)の合計が670px以内の場合、PC画面では横に並べて表示されます。
|
178
|
+
|
179
|
+
```
|
180
|
+
<<Fig_H>>
|
181
|
+
imgs:
|
182
|
+
- src: 1234_book01.png
|
183
|
+
href: https://www.amazon.co.jp/dp/4798154350
|
184
|
+
width: 200px
|
185
|
+
- src: 1234_book02.png
|
186
|
+
href: https://www.amazon.co.jp/dp/4798154369
|
187
|
+
width: 200px
|
188
|
+
- src: 1234_book03.png
|
189
|
+
href: https://www.amazon.co.jp/dp/4798161888
|
190
|
+
width: 200px
|
191
|
+
cap: 『紛争事例に学ぶ、ITユーザの心得』3部作
|
192
|
+
```
|
193
|
+
|
194
|
+
(3) `src:`に記述するファイル名の先頭にある「1234_」という記事IDを表す部分は省略できます。代わりに、ヘッダに記述した`■記事ID■:`で記述した番号が入ります。`■記事ID■:`がない場合にも、原稿のフォルダ名が記事IDになっていればその番号が入ります。
|
195
|
+
|
196
|
+
```
|
197
|
+
(ヘッダ)
|
198
|
+
……
|
199
|
+
|
200
|
+
■記事ID■:1234
|
201
|
+
|
202
|
+
<%-- page -->
|
203
|
+
|
204
|
+
(本文)
|
205
|
+
……
|
206
|
+
|
207
|
+
<<Fig_N>>
|
208
|
+
src: fig.png <--- 1234_fig.png と書いたのと同じになる
|
209
|
+
```
|
210
|
+
|
211
|
+
#### ■コラムの書き方
|
212
|
+
|
213
|
+
コラム(囲み)は、`===column`と`==/column`で挟むことで記述できます。
|
214
|
+
|
215
|
+
```
|
216
|
+
(本文)
|
217
|
+
|
218
|
+
===column
|
219
|
+
#### 見出しも入れられます
|
220
|
+
|
221
|
+
コラム本文……
|
222
|
+
==/column
|
223
|
+
```
|
224
|
+
|
225
|
+
`===column`に対してスタイルを指示できます。例えば、次のように書くと囲み罫線なしで角丸、地色をベージュにした囲みにできます(スタイルの記述方法は後述)。
|
226
|
+
|
227
|
+
```
|
228
|
+
(本文)
|
229
|
+
|
230
|
+
{:%border:none; %border-radius:8px; %background-color:#ffffe6;}
|
231
|
+
===column
|
232
|
+
#### コラム見出し
|
233
|
+
|
234
|
+
コラム本文……。
|
235
|
+
==/column
|
236
|
+
```
|
237
|
+
|
238
|
+
#### ■divブロックの書き方
|
239
|
+
|
240
|
+
ある範囲に対してスタイルを当てたいときなどには、divブロックをつくって、それに対してスタイルを指示します。divブロックは`===div`と`==/div`で挟むことでつくれます。
|
241
|
+
|
242
|
+
例えば、本文のある範囲の地にグレーを敷きたい場合、次のように書きます。
|
243
|
+
|
244
|
+
```
|
245
|
+
(本文)
|
246
|
+
|
247
|
+
{%background-color:#e6e6e6; %padding:1em;}
|
248
|
+
===div
|
249
|
+
本文テキスト。もちろん図なども入れられます。
|
250
|
+
|
251
|
+
<<Fig_N>>
|
252
|
+
src: 1234_fig.png
|
253
|
+
width: 450px
|
254
|
+
|
255
|
+
==/div
|
256
|
+
```
|
257
|
+
|
258
|
+
#### ■画像回り込みの書き方
|
259
|
+
|
260
|
+
divブロックの応用として、本文テキストの画像回り込み指定があります。スタイル指定と合わせて、次に用に記述します。
|
261
|
+
|
262
|
+
```
|
263
|
+
```
|
264
|
+
|
265
|
+
#### ■スタイルの書き方
|
24
266
|
|
25
267
|
## License
|
26
268
|
|
@@ -28,7 +28,7 @@ module Kramdown
|
|
28
28
|
end
|
29
29
|
end
|
30
30
|
|
31
|
-
@block_parsers.insert(5, :column, :definition_table, :page)
|
31
|
+
@block_parsers.insert(5, :column, :definition_table, :wraparound,:div, :page)
|
32
32
|
@span_parsers.insert(5, :span)
|
33
33
|
|
34
34
|
@page = 0
|
@@ -67,6 +67,40 @@ module Kramdown
|
|
67
67
|
sql tcl tex vb vhdl wiki xhtml xml xq xsl yaml yml
|
68
68
|
!.map{|i| [i, i]}.flatten])
|
69
69
|
|
70
|
+
def parse_div
|
71
|
+
if @src.check(self.class::DIV_MATCH)
|
72
|
+
start_line_number = @src.current_line_number
|
73
|
+
@src.pos += @src.matched_size
|
74
|
+
el = Element.new(:div, nil, nil, :location => start_line_number)
|
75
|
+
parse_blocks(el, @src[1])
|
76
|
+
update_attr_with_ial(el.attr, @block_ial) unless @block_ial.nil?
|
77
|
+
@tree.children << el
|
78
|
+
true
|
79
|
+
else
|
80
|
+
false
|
81
|
+
end
|
82
|
+
end
|
83
|
+
|
84
|
+
DIV_MATCH = /^={3,}\s*?div\s*?\n(.*?)^={2,}\/div\s*?\n/mi
|
85
|
+
define_parser(:div, /^={3,}div/i, nil, 'parse_div')
|
86
|
+
|
87
|
+
def parse_wraparound
|
88
|
+
if @src.check(self.class::WRAPAROUND_MATCH)
|
89
|
+
start_line_number = @src.current_line_number
|
90
|
+
@src.pos += @src.matched_size
|
91
|
+
el = Element.new(:div, nil, {'class' => 'imgLRBlock cf'}, :location => start_line_number)
|
92
|
+
parse_blocks(el, @src[1])
|
93
|
+
update_attr_with_ial(el.attr, @block_ial) unless @block_ial.nil?
|
94
|
+
@tree.children << el
|
95
|
+
true
|
96
|
+
else
|
97
|
+
false
|
98
|
+
end
|
99
|
+
end
|
100
|
+
|
101
|
+
WRAPAROUND_MATCH = /^={3,}\s*?wraparound\s*?\n(.*?)^={2,}\/wraparound\s*?\n/mi
|
102
|
+
define_parser(:wraparound, /^={3,}wrap/i, nil, 'parse_wraparound')
|
103
|
+
|
70
104
|
def parse_column
|
71
105
|
if @src.check(self.class::COLUMN_MATCH)
|
72
106
|
start_line_number = @src.current_line_number
|
data/lib/zine_brewer/main.rb
CHANGED
@@ -20,7 +20,7 @@ class Fig_P < Mustache
|
|
20
20
|
{{#imgs_list}}
|
21
21
|
<img src="{{fig_src}}" alt="{{name}}氏" {{& img_style}} />
|
22
22
|
{{/imgs_list}}
|
23
|
-
<div style="text-align:left; padding:
|
23
|
+
<div style="text-align:left; padding:0px 35px;">
|
24
24
|
<figcaption><strong>{{name}}({{huri}})氏</strong></figcaption>
|
25
25
|
<figcaption markdown="span">{{caption}}</figcaption>
|
26
26
|
</div>
|
data/lib/zine_brewer/version.rb
CHANGED