XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.

Slides:



Advertisements
Similar presentations
Word で XML マニュアルを編集 し、 XML を自動組版する 1. XML の自動組版概要 2. Word での原稿入力 アンテナハウス株式会社 2004/09/03.
Advertisements

XML ゼミ 独習 XML ~ 第 6 章 XHTML~ 6.1 XHTML の概要 6.2 XHTML の構造 谷津 哲平.
Powerpoint 機能の使い方. 1.簡単な図の作成 例として植物個体の図を作成 (1)輪郭を大まかに描く まず、「オートシェイプ」 → 「線」 → 「曲 線」を選び、輪郭を適当に描く.
WEB デザイン基礎実 験 担当:清水,田代 副手:浦辺,石井 ( 1 日目) NC-2 情報通信基礎実験.
コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀. はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例.
視覚表現--CSSでwebページを自由にデザイン
Webサービスに関する基本用語 Masatoshi Ohishi / NAOJ & Sokendai
第9回 2007年6月22日 応用Java (Java/XML).
第11回JavaScriptゼミ セクション8-2 発表者 直江 宗紀.
バリデータ J2EE II 第11回 / 2006年1月19日.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
【2.12】文字装飾機能内部設計書
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (2日目) 担当:清水,田代 副手:浦辺,石井.
第12回(1月13日) 文書処理 久野禎子.
名古屋大学大学院人間情報学研究科 物質生命情報学専攻 情報処理論講座 原 崇
背景 我々の研究室で開発しているJavaプログラム解析フレ ームワークでは,解析情報はメモリ上に保持される 問題点
HTMLの記述と WWWにおける情報公開 遠藤
Webフォントって何? Webページ中のテキスト表示に使うフォントを指定した場所からダウンロードして適用させるもの
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔.
HTML版パスファインダーの作成 CSSの利用 hp. infoseek. co. jp/cje10
早稲田大学大学院理工学研究科 情報科学専攻修士2年 後藤滋樹研究室 坂本義裕
ホームページの作り方.
Microsoft Office 2010 クイックガイド ~ファイルの互換性編~
XMLゼミ 2.3 XMLのプロローグ 2.4 XMLのタグ 高橋 辰裕.
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
ASP.NET開発標準化を考えてみよう! わんくま同盟 東京勉強会# /03/15 mxb & 片桐継.
ASP.NET開発標準化を考えてみよう! わんくま同盟 東京勉強会# /03/15 mxb & 片桐継.
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
XMLについて 蔡柏東.
第9回JavaScriptゼミ セクション6-2 発表者 直江 宗紀.
第1回 JavaScriptゼミ ・ scriptエレメント ・ 記述における諸注意 ・ 古いブラウザへの対応方法
見た目を定義する技術 CSS(スタイルシート).
Webを利用した授業支援システムの開発 北海道工業大学 電気電子工学科 H 渋谷 俊彦.
FM-Tokyo Oct 30, 2004 やっと見えた! FileMaker Server Avancedの全貌
XSLT XML文書はそのままでは読み易い形で表示されない。 XML文書を別のXML文書に変換して、情報抽出や表示をする枠組みがXSLT。
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (1日目) 担当:清水,田代 副手:浦辺,石井.
スタイルシート C306 情報発信の基礎【第6回】.
SGMLについて 2年8組  原口 文晃.
XSL-FO + MathML MathML表示、PDF生成、SVG生成
パスファインダーの作成 slis. tsukuba. ac. jp/~fuyuki/cje2/CJE161018
※現在辻はAmazonの「この本を買った人はこの本も買っています」
第3章 第2節 ネットワークを活用した 情報の収集・発信(3) 5 表現方法の工夫
空間情報サーバ (株)パスコ.
9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例
「XMLテンプレート」の利用 ~ 入力、編集、閲覧
1.オブジェクトの色変更 2.テキストの入れ替え [図ツール]の[色]でオブジェクトの色を変更できます。
XMLゼミ 5.4 XSLT (P118~P134)          兒玉 光太郎.
Microsoft Office 2010 クイックガイド ~Word編~
暗黙的に型付けされる構造体の Java言語への導入
独習XML 第2章 XML文書の構成要素 2.1 XMLの文字と文字列 2.2 コメント
情報スキル活用 第7週 制作技術-1 情報の記述と画面のデザイン.
T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
XMLゼミ 1.3 XML文書の表示 1.4 XMLの役割 1.5 XMLとプログラミング M2 正木 裕一.
独習XML ~第3章 文書と構造~ 3.3 スキーマ 3.3 XML Schema
エンタープライズアプリケーション II 第9回 / 2006年7月23日
第1章 実世界のモデル化と形式化 3.地物インスタンスの表現
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
XML Schema (1) ソフトウェア特論 第3回 /
~let's take fun when you can do it~
応用Java(Java/XML) 第7回 2006年6月16日 植田龍男.
XMLゼミ 3.5 DTD M2 正木 裕一.
3-1.文書と構造 3-2.整形式文書と検証済み文書 兒玉 光太郎
ここに 表題や引用文が入る 背景への図の使用とキャプションへのテクスチャの適用 (中級)
HP作成 そろそろまとめ編 担当:TAの人.
Microsoft Office クイックガイド ~基本編~
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
Microsoft Office 2010 クイックガイド ~ファイルの互換性編~
情報スキル活用 第6週 制作技術-1 情報の記述と画面のデザイン.
Presentation transcript:

XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕

XML文書とスタイルの適用 XML文書をInternet ExplorerのようなWebブラウザでそのまま表示すると、XML文書のツ リー構造が表示される そこで 一般ユーザーに見せる形式としてあまり適切ではない スタイルを指定するドキュメントを作って、それをXML文書に適用する XML文書の書式を整えて表示することができる 現在、一般的によく使われているスタイル指定の方法として次のような方法がある  ・ XML文書にXSLTを適用して表示する方法  ・ XML文書でCSS(Cascading Style Sheet)を使って表示する方法

XML文書の操作 XSLの仕様は、XSL-Formatting ObjectとXSL-Transformation(XSLT)とで構成されている   ・ Formatting Object     情報の書式を整えるためのオブジェクトの仕様   ・ XSLT     XML文書の情報を変換するための仕様 XSLTを利用してXML文書を操作できる   ・ 情報の取り出し、並び替え、変換など

CSS ・ CSSとは、CSSスタイル規則を列挙したもので作成方法は以下のとおりである CSSスタイル規則の書式 「スタイルを適用するオブジェクト」 { ( 「プロパティ名」 : 「プロパティ値」 ; ) + } タグ名 CSSスタイルシートの例 <!– adrsstyle.css --> Name { font-size:18pt; color:green; } TEL, FAX { font-size:12pt; color:red; } 注 CSSの記述の方法はXML文書の形式ではない    つまり、タグを使わず、ツリー構造にはしない

CSSファイルをロードする処理命令の形式   フォント、色と背景色、テキスト、ボックス、表示形式などを指定することができる。 主なCSSの属性は教科書P112の表5.1を参照 注 拡張子をCSSにする ・ CSSを利用するには、   まず、CSSファイルを別のファイルとして作成し、   次に、XML文書の中でxml-stylesheet処理命令を使う   という2つの作業を行う 注 属性をtype=”text/css”にする CSSファイルをロードする処理命令の形式 <?xml-stylesheet type=“text/css” href=“スタイルシートファイル名”?>

CSSファイル(adrsstyle.css)を使うXML文書の例 <?xml version=“1.0” encoding=“UTF-16” ?> <!– cssdoc.xml --> <?xml-stylesheet type=“text/css” href=“adrsstyle.css”?> <Address> <Member> <Name>二戸 丹子</Name> <TEL>2525-0110</TEL> <FAX>2525-0111</FAX> </Member> <Name>低音 出留蔵</Name> <TEL>0301-0110</TEL> <FAX>0301-0111</FAX> </Address>

主な書式設定オブジェクトは教科書P115の表5.2を参照 XSL XSL(Formatting Object)を利用して、XML文書を表示する際のマージン、色、文字サイズなどを定義できる XSLの中でも特にXSLのフォーマット名前空間に定義されている書式設定オブジェクト(フォーマット指定タグ)という要素が頻繁に使われる 注 以前のXSL (XML Stylesheet Language)は、現在では    XSL Formatting Objects(XSL-FO)と同じ意味で使われている 主な書式設定オブジェクトは教科書P115の表5.2を参照

XSL XSL書式設定の典型的なスケルトン <?xml version=’1.0’ ?> <xsl:stylesheet xmlns:xml=“http://www.w3.org/1999/XSL//Transform” xmlns:fo=“http://www.w3.org/1999/XSL/Format “ version=‘1.0’> (スタイルシート定義) </xsl:stylesheet> 注 慣習としてfoが使われる XSL書式を適用する典型的なパターン <xsl:template match=“ [パターン] ”> <fo:[書式設定オブジェクト] [パラメータ]> <xsl:apply-template /> <!—処理命令--> </fo: [書式設定オブジェクト] > </xsl:template>

課題 CSSスタイルシートでフォントのサイズを20ポイント、フォントの色を青、背景色を黄色に指定したCSSファイルを利用したXML文書を作成せよ