タグ別アーカイブ: 簡易マークアップ

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

投稿日時: 投稿者:
返信

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

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

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


図１ リンク元


図２ リンク先

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

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

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

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

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

１．リンク先
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>

２．リンク元
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や画像に変換するには、どうしたら良い？

ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。

投稿日時: 投稿者:
返信

2017年になってから久しぶりにWebページを自分で編集・更新をし始めています。XHTML形式のWebページをoXygenというXMLエディタ[1]で編集しているのですが、このところ毎日Webページ制作の生産性の低さに辟易しています。

少し遡っての個人的な経験ですが、私は2000年頃からドキュメントの多くをXML（XHTML）で作成するようになり、Webページなども簡単なHTMLタグの組み合わせで作成していました。それらのWebページはXHTMLタグでマークアップして簡単なCSSでレイアウトを施したものです。今から見ますと原始的なものですが、この頃のマークアップ編集はAntenna House XMLエディタという自社開発のXMLエディタを使っていました。この間、Antenna House XMLエディタは、開発があまり進まず、時代の流れに遅れてしまい、結局、販売も断念してしまいました。

その間、HTMLのタグを直接編集するのはどうも生産性が低いのでなんとかうまい解決策がないものかと考えていました。そうした経験からWiki記法のような簡易マークアップを使ってHTMLを書くことで、HTML制作の生産性を高めることができるだろう、と考えました。それが、2010年にCAS-UBの開発を開始した一つの理由です。CAS-UBはWiki記法を拡張したCAS記法をつかってHTML文書を記述します[2]。これは檜山正幸さんという天才的なアーキテクトに設計していただいたものです。自分で言うのもなんですが、いつも良く出来ていると感じます。CAS記法をなかなか普及させられないのは、偏に私のマーケティング力が足りないからだと反省します。

もう一つの理由は、出版の世界は一品生産のため、DITAマニュアルの制作システムのように大きな投資が必要なシステムを作るのは難しいので、PDFとEPUBを作る仕組をWebサービスとして提供するのが向いているのではないかと考えたことです。CAS-UBは出版物を作る仕組としてうまく機能するようになっています。まだまだ改善が必要ですが。

そうしたことで、2011年頃から、業務上の文書はOffice、簡単なWebページはブログ、出版物にするときはCAS-UB、といった使い分をしていました。そんなことで、個人的には問題も感じなくなり、もうワンソースマルチユースには課題はないだろうなどと考え始めていたのです。そして、ワンソースマルチユースの大きな課題であるソースドキュメント編集の問題について、やや忘れかけていました。

で、久しぶりにWebページ（HTML）をXMLエディタ（oXygen）で編集し始めて、HTML直接編集の生産性がさらに低下しているのに辟易しています。ずっと、HTMLの生産性が低い理由は、コンテンツ（原稿）とタグ（マークアップ）の二つを同時に考えるためと思っていました。しかし、今回、久しぶりにWebページを編集してみて、レイアウトのための余計なクラス属性や余計な階層構造が、さらに生産性を下げる原因になっている、と痛感しています。

ちなみに、今『CSS設計の教科書』（谷　拓樹著、インプレス発行、2016年2月第1版第4刷）を読んでいます。この本を見ますとCSSのセレクタには要素ではなく、クラス属性を指定する方を推奨しています。要素のセマンティクスにはあまり依存しないで、div要素に多数のクラスを設定し、CSSではクラスのセレクタを使って部品化し組み合わせる方法などがあります（pp.45-52 OOCSS）。こうなってきますと、今度はコンテンツの編集の際に、レイアウトのためのクラスの設定を適切に行わなければならなくなります。結局、HTMLの編集において、テキストや画像コンテンツ、セマンティクスとしてのHTMLタグ、さらにCSSレイアウトのためのクラス属性の設定、という三つを同時に考慮しなければなりません。これはちょっと？　です。

見栄えの良いWebページを作るために、CSSが複雑になりメンテナンスしにくいのでクラス属性を組み合わせ、今度は内容を書くのが大変になる！　って本末転倒しているように感じます。どうしたら良いんでしょうかね。

また、最近、2回ほど学術情報XML推進協議会のセミナーに参加して、皆さんの意見も伺い、久しぶりにコンテンツ制作の問題がまだ課題なんだな、と痛感している次第です。ということで、HTMLのオーサリングについて、改めて整理し直そうと考えているところです。

[1] oXygen
[2] CAS記法リファレンス
[3] 次回 HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。

■シリーズ
(1) ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は？
(4) HTMLを簡単に作る方法：h1要素の話(1)

10月24日　CAS-UB 五周年記念セミナーのスライドと動画をアップしました。

投稿日時: 投稿者:
返信

昨日は市ヶ谷にてCAS-UB 五周年記念セミナーを開催致しました。
CAS-UBのWebサービスは、10月20日にV4.0となりました。

今回の機能改善で、編集操作がかなり使い易くなりました。

またPDFレイアウト指定についても、実際にプリントオンデマンドの本を書いて出版したりしながら、問題点を洗い出して改善しています。

セミナーのスライドと、デモに使いました動画をこちらに用意しましたので、ぜひご覧下さい。

１．セミナーのスライド(PDFをダウンロード)

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

関連ブログ
1. CAS-UB V4.0の公開予定についてのご案内（予告）
2. CAS-UB V4の編集画面を垣間見る。V3では構成編集と編集画面が別でしたが、統合しました。
3. CAS-UB V4.0 デジタルファーストへ向けて、CAS記法の強化
4. CAS-UB のWebサービスV4.0をリリースしました
5. CAS-UBの編集デモファイル　見出しを付ける

CAS-UB V4.0 デジタルファーストへ向けて、CAS記法の強化

投稿日時: 投稿者:
返信

CAS-UB V4.0の機能強化ポイント・その2は、CAS記法の強化です。具体的な強化ポイントは「CAS-UB V4.0の公開予定についてのご案内」をご覧下さい[1]。ここではなぜCAS記法が必要かをざっとお話します。

１．出力媒体に合わせた制作作業が一般的
原稿から紙の本（PDF）、EPUB、Webページを作るためには、それぞれの成果物に併せて原稿をレイアウトする必要があります。通常のやり方は、原稿ができたら①PDFを作るときはInDesignなどのDTPで組版処理を行い、②またEPUBを作るときは、素材からそれなりのツールで制作作業を行い、③Webページを作るときは、また素材からWebページ用の編集ツールで制作する、という風に出力媒体に合わせて制作作業を行います。

さらに多くの場合は、紙の出版物を作るためにInDesignで制作したPDFを使って校正をすすめて完成させ、そのデータからEPUBやWebなどの成果物を作ることが多いでしょう。最近はブログを含むWebページやからスタートするケースが増えているかもしれません。いずれにしても表示する媒体が先立っています。

２．CAS-UBでは出力媒体に合わせた制作作業は最小
CAS-UBの特徴は成果物毎の制作は行わずに編集ができたら、それぞれのボタンをクリックするだけで、紙用の成果物、EPUB、Webページを作ります。

原稿をコンテンツとして仕上げ、そこから様々な媒体に一気に展開します。これこそが本来のデジタルファーストと考えます。

３．汎用的なコンテンツを作るためのCAS記法
デジタルファーストを実現するためには、原稿の編集において、様々な出力に使える汎用的なコンテンツを準備することが必要です。CAS-UBのUBはUniversal Bookという意味で、汎用的な書籍内容のことです。

構造はマークアップという方式で付与します。マークアップの標準はXMLですが、編集時にXMLを直接マークアップするのは専門的な知識が必要です。そこで、XMLに関する専門的な知識がなくても、相応のマークアップができるようにしたのがCAS記法です。CAS-UBではCAS記法を覚えなくても本を作れますが、しかし、覚えていただくとより表現力がアップします。

来週のセミナーでは、このあたりについても、もう少し具体的に、また、分かりやすくお話したいと考えています。

[1] CAS-UB V4.0の公開予定についてのご案内（予告）

10月24日（月）バージョンアップ内容についてご案内するセミナーを予定しています。お申し込みはこちらからどうぞ：
http://www.cas-ub.com/user/seminar.html

■PDF関連情報
流通によるプリントオンデマンドでの出版が現実のものとなった今、その活用の課題を考える。（2017年1月時点）

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

投稿日時: 投稿者:
返信

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

20141011a
図1　箇条書き　CAS記法

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


<ul>
<li>１項目目</li>
<li>２項目目</li>
<li>３項目目</li>
</ul>

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

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

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

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

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

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

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

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

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

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

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


<ul style="list-style:none">
<li>１項目目</li>
<li>２項目目</li>
<li>３項目目</li>
</ul>

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

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