CAS記法によるWebページの作成:Webページ内の参考資料へのID設定と、本文から内部リンクを設定する方法

CAS-UBで次のようなWebのリンクを設定する方法を紹介します。

(1) Webページの末尾に参考資料のリストを作る。
(2) Webページの本文から、参考資料へのページ内リンクを設定する。

出来上がったWebページはこんな感じです。


図1 リンク元


図2 リンク先

HTMLで、このようなページ内部のリンクを作るには、リンク先の要素にid=id値を設定し、リンク元のアンカータグ(aタグ)のhref属性に#id値を設定します。

CAS記法では次のようにします。リンク先の要素にはユーザー独自idのマークアップを使います[1]。CAS-UBでユーザー独自のidを付けるには、二つの方法があります。難しい方法と簡単な方法があります。利用ガイドでは難しい方法のみを詳しく解説しています。(難しい方法には、自動化処理のための用途があるのですが)ここでは単にリンクを設定するだけの簡単な方法をご紹介します。

次のようにすれば良いです。

1.リンク先に:id=id値 という属性名と属性値を設定する
2.リンク元に[[#id値|アンカーテキスト]] というマークアップをする。

上の例では次のようになります。

1.リンク先
CAS記法のマークアップ:
*::nolabel:id=s1 [1] [[http://stackoverflow.com/questions/42618628/how-to-convert-office-file-to-image/43161134|How to convert office file to image]]
HTMLでは右のようになります:
<ul class=”nolabel”><li id=”s1″>[1] <a href=”http://stackoverflow.com/questions/42618628/how-to-convert-office-file-to-image/43161134″ >How to convert office file to image</li>

2.リンク元
CAS記法のマークアップ:
StackOverflow の質問(英語)[[#s1|[1~]]]より引用
HTMLでは右のようになります:
StackOverflow の質問(英語)<a href=”#s1″ >[1]より引用

::nolabelはリンクとは関係なく、CSSで箇条書きのラベルを付けないようにするためのクラス属性の設定です。
:id=s1 が箇条書きの項目(li)のid属性になります。

参考資料
[1] CAS-UBでは見出しや図・表のキャプションには自動的にidを設定します。ユーザーがCAS記法で設定するidについては、自動設定のidと区別するためにユーザー独自idという表現をしています。これは、HTMLでは通常のid属性にあたります。
[2]第9章 CAS記法の属性マークアップリファレンス
[3] ここでCAS-UBで作ったHTMLを埋め込んだWebのページ: Microsoft Office(マイクロソフト オフィス)のファイルを、プログラム開発者が自力でPDFや画像に変換するには、どうしたら良い?

CAS-UBの編集デモ動画 新ファイル : 見出しを付ける

ブログの記事をコピーして、節の記事とする例のデモ動画を追加しました。

【シナリオ】
1.CAS-UBの記事の構成は章-節となっている
2.ブログのタイトルをコピーして節のタイトルに貼り付ける
3.ブログの本文をコピーして節の本文に貼り付ける
4.記事の本文の*を見出しのマークアップ’=’にする
5.CAS-UBは見出しと段落には一行を空ける
6.PDFを生成する

※PDFの生成設定は本文二段組みとなっている。

【デモ動画】
ブログの記事をコピーして、節の記事とする例(mp4動画です)

【デモ動画一覧】(それぞれMP4ファイルを表示します)
(1)新出版物を作り『蕎麦の味と食い方問題』(青空文庫)をコピーする
(2)ルビ、縦中横、リンクをマークアップする
(3)Wordからの外部入力の操作例
(4)PDF生成の基本設定
(5)PDF生成のレイアウト調整
(6)PDFの後書きのページ内配置と見出しの指定変更
(7)『XSL-FOの基礎』サンプルレイアウト改善の例

CAS-UB V4紹介ブログ
1. CAS-UB V4.0の公開予定についてのご案内(予告)
2. CAS-UB V4の編集画面を垣間見る。V3では構成編集と編集画面が別でしたが、統合しました。
3. CAS-UB V4.0 デジタルファーストへ向けて、CAS記法の強化
4. CAS-UB のWebサービスV4.0をリリースしました
5.10月24日 CAS-UB 五周年記念セミナーのスライドと動画をアップしました。
6. CAS-UBの編集デモファイル 見出しを付ける

EPUBで箇条書きのラベルを消すためのCAS記法例(親の要素に属性を付ける方法)

箇条書きには、番号なし箇条書きと番号付き箇条書きがあります。CAS-UBではそれぞれ図1のようにマークアップをします。

20141011a
図1 箇条書き CAS記法

番号なし箇条書きのマークアップは、次のようなHTMLに変換されます。


<ul>
<li>1項目目</li>
<li>2項目目</li>
<li>3項目目</li>
</ul>

CAS-UBで用意している「CSSテーマ」で番号なし箇条書き、番号付き箇条書きのレイアウトを指定しています。そこで、例えば「グリーン2」を選択してプレビューしますと、図2のように表示されます。

20141011b
図2 箇条書きを、(テーマ)「グリーン2」で内容表示(プレビュー)する

さて、この箇条書きのラベルを消したいとき、一番、手っ取り早いのは要素にlist-style:noneというスタイルを指定する方法です。

CAS記法では要素のマークアップの直後に’:’を置くと、その要素に属性が付きます。そこで箇条書きの先頭’*’または’#’に次の図3のようにマークアップしてみましょう。

20141011c
図3 箇条書きの項目にスタイル属性を指定

この内容表示(プレビュー)すると図4のようになり、最初の項目しかラベルが消えていません。

20141011d
図4 箇条書きの項目へのスタイル指定の内容表示

すべてのラベルを消すために、各’*’(li)要素へのスタイル指定を繰り返しても良いのですが面倒です。
通常は上位のulまたはol要素にスタイル指定してラベルを消すと楽ちんです。

このようなときのCAS記法は図5のように要素の直後に’::’をおいて属性を指定します。そうしますと1つ上の階層の要素に属性が付きます。

20141011e
図5 親の要素に属性をつけるマークアップ

このCAS記法の’::’に続く属性はHTMLでは次のように上位のul要素の属性になります。


<ul style="list-style:none">
<li>1項目目</li>
<li>2項目目</li>
<li>3項目目</li>
</ul>

内容表示(プレビュー)しますと、図6のようにすべての箇条項目のラベルが消えています。

20141011f
図6 親の要素に属性をつけて箇条項目のラベルを消す

CAS-UB 6月20日の保守更新 アンカータグ内のインラインマークアップサポート、EPUB内部リンク有効化、PDF詳細レイアウトの変更など強化

CAS-UBは6月20日の保守更新で次の機能強化を行ないました。CAS-UB V2.2用に開発していた機能の一部を先行してクラウド・サービスに追加しました。

1.CAS記法の強化

CAS記法のパーサーを改良し、アンカー要素の内容に次のインライン要素をマークアップしたとき、これを正しく処理できるようにしました。
・strong(強調)
・em(強調)
・注意
・ルビ
・上付
・下付
・注釈
・画像
・インラインの範囲指定[[[…]]](アンカーの文字列に縦中横を指定できるようになりました)。
・インラインの整形済み{{{…}}}
・インライン数式 $$…$$

2.PDFとEPUBの整合性配慮

PDFの表では先頭行のセルに:width=”xxx”の方式で列幅を指定できます。これをこのままEPUBに出力するとEPUBCheckでエラーになります。そこで、その設定値をCSSのstyle属性値に変換するか、別途style.cssで設定するかを選択できるようにしました。(図のサイズ指定については従来より同様の機能を用意しています。)

2.EPUB内部リンクの有効化

EPUB3で図表一覧掲載の図・表のリストから本文の図・表の位置へのリンク、あるいは本文の中でほかの本文中の箇所へのリンクをクリックしたとき、hrefで指定した位置に正しくジャンプするようにしました。これまではiBooks、Adobe Digital Editionsなどではhrefで指定した位置にジャンプせず、ファイルの先頭にジャンプしていました。これはEPUBリーダ側の問題ですが回避策を施して正しくジャンプするようにしました。

3.PDF詳細レイアウトの設定機能強化・変更

PDFレイアウトの詳細設定の仕様の追加と変更を行ないました。この結果PDFレイアウト詳細設定については一部のレイアウトが従来と変更になりますのでご注意ください。

(1) 前書き、目次、後書き、図表一覧、注釈一覧、参考文献、索引などの本文以外の記事タイトルの行取りが2行のものと4行のものが混在していましたので、3行取りに統一しました。
(2) 囲み記事(コラム)のキャプションが囲みの外にありましたが、囲みの中に置くように変更しました。
(3) キャプションのない注記には、既定のキャプションとして「注記」を挿入するように変更しました。
(4) 図表キャプションの位置(上か下)指定を、図と表を個別に指定できるように変更し、初期値を図は下、表は上に設定しました。
(5) 図と図のキャプションの間の空きが詰まり過ぎていたので、0.5em空けるように変更しました。
(6) 見出しが複数行になるとき、2行目以降を見出し番号の位置にインデントするように変更しました。
(7) 章番号、または章・節番号と見出しの間の字間が広すぎたので狭めました。
(8) 章番号、節番号、項番号などをハイフンで繋いだ場合、そのハイフンで改行しないように分割禁止を設定しました。
(8) 図表番号とキャプションの間の字間が広過ぎたので、章節番号とタイトルの空き幅と同じに変更しました。
(9) 表内の行間が空き過ぎていたので、行の高さの初期値を1.5emに変更しました。さらに設定の変更もできるようにしました。
(10)参考文献のレイアウトを番号なし箇条書きから1字突き出した(ハンギング・インデント)の形式に変更しました。

4.障害修正
その他、障害の修正を行ないました。
詳しくは「CAS-UB 最近の修正」を参照してください。