Ark SiteColumn & Report Arkアーキテクチャ
TOP 開発の現場から 第六回

このページでは、Just Arks(PrezArk)の様々な面に焦点を当てて、開発スタッフ自らがメッセージを発信します。
今回は、Javaプレゼーションソフト「PrezArk」ファイルをテキストエディタや一太郎Arkで編集できるようになる技を紹介します。

   PrezArkファイルの文書構造について 〜 XHTMLへの挑戦 〜   
 
はじめに
ファイル形式としてXHTMLを採用した経緯
文書構造全体の概要
PrezArk固有の要素と属性
最後に
 

はじめに
みなさんはじめまして。毎年恒例の健康診断が近いこともあり、マフィンの食べ過ぎを解消すべく、週に3回ほどジム通いしているPrezArkファイル担当のIです。
今回はPrezArkファイルの文書構造について紹介します。
ファイル形式としてXHTMLを採用した経緯からPrezArk固有の要素、属性まで説明していきます。
文書構造を丸裸にしますので、テキストエディタや一太郎Arkなどを使って遊んでみてください(テキストエディタ等で編集したPrezArkファイルの動作は保証対象外)。

ファイル形式としてXHTMLを採用した経緯
PrezArkは、Arkアーキテクチャを継承するプロジェクトなので、開発当初から独自バイナリ形式という話は一切出ませんでした。
「やっぱりバイナリじゃなくてXMLだよね」というメンバーの総意から、プレゼンテーションに必要な要素を洗い出し、新しく文書型を設計し、ある程度実装が進み、レビューをすることになりました。そこで「なぜ独自のXML形式なのか?既存のボキャブラリを流用すべき」という意見からXHTMLにしてはどうかということになりました。SMILも候補にあがりましたが、アウトラインプロセッサとしての方向性と異なることから見送りました。ちょうどそのころXHTML1.0は勧告(2000年1月)になったばかりでタイミングも良かったのです。
XHTMLにするメリットは、
  • タグセットの設計コストが省略できる
  • 仕様の説明が省略できる(XHTMLと同じというだけで済む)

画面1 Netscape6.1での表示例
独自のXML形式にこだわる理由はありませんでした。既存のXHTMLの語彙で足らない部分だけを拡張するという方針に切り替え、PrezArkファイルはホスト言語をXHTMLとしたXML複合文書として再設計することになりました(ベクトルデータはSVGとしています)。
Technology Preview版(以下TP版)では、再設計したXHTML形式となりましたが、製品ではもう一段階進化しています。それはそのままブラウザで表示できることを考慮して若干の変更を加えたことです。TP版ではそのままブラウザで表示すると、ページが重なるように表示されていましたが、製品ではページが重ならないように属性を設定し、ハイパーリンクでページを送る機能をつけました。

文書構造全体の概要
PrezArkファイルは、ホスト言語をXHTMLとしたXML複合文書として設計しています。
XHTMLに定義されていないPrezArk固有の要素、属性については、XML名前空間を利用し、XHTMLのタグ、属性名と衝突しないように定義します。

文書は、次の3つの部分から構成されます。
  1. XML宣言(リスト1の001行目)
  2. 宣言的ヘッダの部分 (リスト1の004行目〜021行目, head要素として区切られる)
  3. 文書の実際の内容を含む、本体 (リスト1の022行目〜054行目, body要素)
XML宣言は、すべてのXML文書に必須というわけではありませんが、XHTML文書ではXML宣言を使うよう強く奨励されています。文書のキャラクタエンコーディングがデフォルトの UTF-8 か UTF-16 以外のものであるときは、宣言は必須なので、PrezArkでは必ずつけることにします。

ヘッダは、文書のタイトル、作成者、文書共通のスタイル情報([書式−タイトルページの設定]、[書式−スライドページ共通の設定]で設定される)、その他文書の内容以外のデータを格納します。

文書の本体には、文書の内容が含まれます。
PrezArkでは、独自の拡張属性を用い、XHTML文書にページ、枠、ノートの構造を付加しています。

リスト1 :サンプルXHTMLファイル抜粋「sample.html
*sample.htmlはutf-8で記述されていますので、IEなどのブラウザで閲覧時にはエンコードしてご確認ください。
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:pa="http://www.justsystem.co.jp/ark/xmlns/prezark/" pa:version="1.0"
      xml:lang="ja-JP" lang="ja-JP"xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="schema.DC" href="http://dublincore.org/qdcmes/1.0/" />
  <meta content="2001-09-17 14:28" name="DC.Date" />
  <meta content="text/html" name="DC.Format" />
  <meta content="PrezArk(Muffin/1.0)" name="generator" />
  <meta content="タイトル" name="DC.Title" />
  <meta content="isikawa" name="DC.Creator" />
  <title>タイトル</title>
  <pa:permit>
    <pa:item title=" " />
  </pa:permit>
  <style>
    ...
    省略
    ...
  </style>
</head>
<body>
<div class="navi" style="position: absolute;left: 0px;width: 800px;height: 50px;top: 1px;">
<a name="pa:page1"></a>
<div>[previous]&#160;[<a href="#pa:page2">next</a>]&#160;[top]</div>
</div>
<div class="tmPage" pa:type="page" pa:layout="title" style="top: 30px;">
  <div class="tmTitle" style="z-index: 0;" pa:type="area.title">
    <h1>タイトル</h1>
  </div>
  <div class="tmSubTitle" style="z-index: 1;" pa:type="area.subtitle">
    <h2>サブタイトル</h2>
  </div>
  <div class="note" pa:type="note">タイトルページのノート</div>
</div>
<div class="navi" style="position: absolute;left: 0px;width: 800px;height: 50px;top: 650px;">
<a name="pa:page2"></a>
<div>[<a href="#pa:page1">previous</a>]&#160;[next]&#160;[<a href="#pa:page1">top</a>]</div>
</div>
<div class="smPage" pa:type="page" pa:layout="list" style="top: 680px;">
  <div class="smTitle" style="z-index: 0;" pa:type="area.title">
    <h1>たいとる</h1>
  </div>
  <div class="smArea1A" style="z-index: 1;" pa:type="area.list">
    <ul>
      <li>箇条書き1</li>
      <li>箇条書き2</li>
    </ul>
  </div>
  <div class="note" pa:type="note">箇条書きページのノート</div>
</div>
<div class="navi" style="position: absolute;left: 0px;width: 800px;height: 600px; top: 1330px;">
</div>
</body>
</html>

リスト1の文書をPrezArkで読み込み、DOMツリー表示プラグインでツリー表示させたのが下の画面2です。
html要素をルートとし、文書本体のbody要素にページが並んでいます。リスト1ではページごとに存在しているページへのリンク情報がDOMツリーにないのは、読み込みの際、PrezArkにとっては必要のないデータなので、削除しているためです。これは、ファイルへの保存時に復活します。
1ページ目の要素を展開させています。名前空間 http://www.justsystem.co.jp/ark/xmlns/prezark/ に属するpa:type属性でページ、枠、ノートを区別しています。


画面2 DOMツリー表示プラグインでの表示例

PrezArk固有の要素と属性
XHTMLでは表現できないため拡張したPrezArk固有の要素と属性について紹介します。
固有の要素はすべて管理用で、head要素に格納され、レンダリング対象外となっています。

PrezArk固有の要素
permit要素
パーソナライズドビューの管理情報を保持します。パーソナライズドビューの個数だけitem要素を子供として持ちます。
head要素の子供として出現します。

item要素
パーソナライズドビューの項目情報を保持します。title属性で名前、selected属性で選択されているかどうかを表します。
permit要素の子供として出現します。

tmaster要素
[書式−タイトルページの設定]で追加した枠の情報を保持します。
この要素は、タイトルページの設定で枠を追加しない場合は存在しません。
head要素の子供として出現します。

smaster要素
[書式−スライドページ共通の設定]で追加した枠の情報を保持します。
この要素は、スライドページ共通の設定で枠を追加しない場合は存在しません。
head要素の子供として出現します。

PrezArk固有の属性
version属性
PrezArkのバージョン情報を格納します。PrezArkのファイルかどうかの判別にも使用しています。
設定場所は、html要素です。

type属性
ページ、枠、ノートを表します。属性値については以下の表を参照してください。
設定場所は、div要素です。

表1 type属性値の一覧

属性値 意味
page ページを表します。body要素直下に並びます。
note ノートを表します。存在する場合は、ページ最後の子要素となります。
area.title タイトルの枠を表します。ページ先頭の子要素として必ず存在します。 
area.subtitle  サブタイトルの枠を表します。
area.list 箇条書きの枠を表します。
area.image 画像の枠を表します。
area.clipart クリップアートの枠を表します。
area.object オブジェクトの枠を表します。
area.misc 上記の種別に該当しない枠を表します。

permit属性
パーソナライズドビューの表示、非表示の情報を格納します。
設定場所は、箇条書き項目(li要素)、タイトル(h1要素)、画像(img要素)、タイトル/箇条書き/画像以外の枠です。
以下のようなパーソナライズドビューの設定時

<pa:permit>
  <pa:item title="英語" />
  <pa:item title="日本語" selected="selected" />
</pa:permit>

2つのパーソナライズドビューが存在し、以下のような例の場合は日本語のパーソナライズドビューが選択されている場合のみ有効となります。(0:OFF 1:ON を表す)

<li pa:permit="01">この項目は日本語の項目です。</li>

effect属性
[書式−画面切替のエフェクト]、[書式−枠のエフェクト]での設定値を保持します。以下の表は現在のプラグインで実装されているエフェクトの一覧です。エフェクトプラグインは拡張できるようになっているので、仕様が公開されれば、自分好みのエフェクトを作成することも可能になります。
設定場所は、画面切替のエフェクトはページ、枠のエフェクトは枠です。

表2 effect属性値の一覧

属性値 エフェクト名
wipe-right ワイプ(右へ)
wipe-left ワイプ(左へ)
wipe-down ワイプ(下へ)
wipe-up ワイプ(上へ)
wipe-open-horizontal ワイプ(開く(左右))
wipe-close-horizontal ワイプ(閉じる(左右))
wipe-open-vertical ワイプ(開く(上下))
wipe-close-vertical ワイプ(閉じる(上下)
slide-right スライド(右へ)
slide-left スライド(左へ)
slide-down スライド(下へ)
slide-up スライド(上へ)
disolve ディゾルブ
box-in ボックスイン
box-out ボックスアウト
random-stripe-horizontal  ランダムストライプ(縦) 
random-stripe-vertical ランダムストライプ(横)

expand属性
[アウトライン−展開]、[アウトライン−折り畳み]で設定されるアウトラインのページを展開するか折り畳むかの情報を保持します。
設定場所はページです。

表3 expand属性値の一覧

属性値 状態
expand アウトラインは展開されている(初期値) 
collapse  アウトラインは折り畳まれている

layout属性
[挿入−新しいページ]、[書式−スライドのレイアウト]で設定されたスライドのレイアウト情報を保持します。
設定場所はページです。

表4 layout属性値の一覧

属性値 スライドのレイアウト名
title タイトル
list 箇条書き(初期値)
list2 2段組箇条書き
clipart クリップアート
clipart_list  テキストとクリップアート1 
list_clipart テキストとクリップアート2
blank 白紙

category属性
クリップアートの分類名(グループ名)を保持します。
設定場所はクリップアートのimg要素です。

keyword属性
クリップアートのキーワードを保持します。
設定場所はクリップアートのimg要素です。

data属性
クリップアート挿入時のURIを保持します。
設定場所はクリップアートのimg要素です。

rehearsal属性
リハーサル予定(期待)時間を部分クロック値(MM:SS 例 02:33)で保持します。
設定場所はページです。

frame-decoration属性
枠飾りの情報をCSSライクな仕様で保持します。「プロパティ名: 値」という書式で1組のプロパティを形成し、各プロパティ宣言がセミコロンで区切られるスタイルです。
設定場所は枠です。

表5 frame-decoration属性値の一覧

プロパティ名 プロパティ説明 値説明
shape 枠飾りの型 rect 長方形(初期値)
round-rect 角丸長方形
lozenge 菱形
ellipse 楕円
cloud 雲形
balloon 吹き出し
direction 向き(吹き出し) btt 上向き(初期値)
ttb 下向き
ltr 右向き
rtl 左向き
border-style 縁取りの線種 solid 実線(初期値)
none 枠なし
dotted 点線(背景色に重ねられる)
dashed 破線(背景色に重ねられる)
border-width 縁取りの太さ medium 中くらいの太さ(初期値)
thin 細い
thick 太い
border-color 縁取りの色 CSS2で指定されている色と同じ
shadow none 影なし(初期値)
横位置,
縦位置,
影の性質を設定します。書式は、横位置, 縦位置, 色です。“横位置”、“縦位置”では、影の位置を長さで与えます(負の値も許される)。
通常の枠飾りの位置を基準にして、横は右方向を、縦は下方向を正にとります。
たとえば、3px, 2px, black であれば,影は枠飾りの 3 ピクセル右、2 ピクセル下にできます。
-3px -2px, black ならば、3 ピクセル左,2 ピクセル上になります。
“色”は影の色(CSS2で指定されている色と同じ)です。
background-color 背景色 CSS2で指定されている色と同じ

content属性
ページ内容を示す文字列を保持します。
設定場所はページです。

表6 content属性値の一覧

属性値 内容
table_of_contents  目次ページを表します([ツール−目次生成]で目次を生成したとき設定されます)。

さいごに
PrezArkファイルの文書構造についての紹介はいかがでしたか?
これであなたもPrezArkファイルをテキストエディタ等で編集することが可能(?)ですね。テキストエディタ等で編集したPrezArkファイルの動作は保証対象外となりますが、ぜひ遊んでみてください。

今回は PrezArk開発チームのIが担当しました。
またお会いできることを楽しみにしています。



TOP 開発の現場から 第六回