ここでは、情報大の建物等の画像ファイルを取り扱った処理を演習します。 まずは、画像ファイルを保存するディレクトリを、 ~/publich_html/xmlの下に、imageという名前で 作成してください。
画像ファイルは下記のディレクトリにあります。
上記にある画像ファイルのうち、.JPGの拡張子以外の画像ファ イル(.jpgの拡張子の画像のみ)を全て、自分の~/publich_html/xml/image へコピーして下さい。
下記のファイルを テキストエディタ(秀丸やメモ帳など)上で作成し、 builiding3-1.xmlという名前で保存しましょう。 これは、「XML文書の作成」のページで 作成したbuilding1-2.xmlに赤い行を追加したものです。
※注意:下記の赤い行のうち、URLは上記で画像を保存した 自分自身のURLを記述するように。
<?xml version="1.0" encoding="Shift_JIS"?> <?xml-stylesheet type="text/xsl" href="building3-1.xsl" ?> <buildings title="東京情報大の建物一覧"> <building id="1"> <name>本館棟</name> <floor>7</floor> <comment>講義室、演習室、事務局、ゼミ室</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/mainbuilding1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/mainbuilding1_min.jpg</thumnail_url> </image> </building> <building id="2"> <name>体育館棟</name> <floor>2</floor> <comment>アリーナ、トレーニングルーム</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/gym1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/gym1_min.jpg</thumnail_url> </image> </building> <building id="3"> <name>学術フロンティア共同研究推進センター</name> <floor>3</floor> <comment>「社会環境」「自然環境」「環境情報システム開発」の国際共同研究の拠点</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/froniter1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/frontier1_min.jpg</thumnail_url> </image> </building> <building id="4"> <name>総合情報センター棟</name> <floor>3</floor> <comment>電子図書館、メディア・ホール、スタジオ</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/infocenter1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/infocenter1_min.jpg</thumnail_url> </image> </building> <building id="5"> <name>学生会館「ピオーネ」</name> <floor>2</floor> <comment>部活動、サークル、学園祭などの課外活動の拠点</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/student1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/student1_min.jpg</thumnail_url> </image> </building> <building id="6"> <name>食堂棟</name> <floor>1</floor> <comment>八角形の建物</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/restaurant1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/restaurant1_min.jpg</thumnail_url> </image> </building> <building id="7"> <name>野球部グラウンド</name> <floor>1</floor> <comment>野球専用グラウンド</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/ballpark1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/ballpark1_min.jpg</thumnail_url> </image> </building> <building id="8"> <name>グラウンド</name> <floor>1</floor> <comment>多目的グラウンド</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/field1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/field1_min.jpg</thumnail_url> </image> </building> <building id="9"> <name>テニスコート</name> <floor>1</floor> <comment>テニスコート</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/court1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/court1_min.jpg</thumnail_url> </image> </building> <building id="10"> <name>駐車場</name> <floor>1</floor> <comment>学生駐車場</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/parking1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/parking1_min.jpg</thumnail_url> </image> </building> <building id="11"> <name>部室棟I・II</name> <floor>2</floor> <comment>部室、翔風祭実行委員会の準備作業部屋</comment> <image> <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/club1.jpg</url> <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/club1_min.jpg</thumnail_url> </image> </building> </buildings>
そして、XSLTスタイルシートを作成します。building3-1.xslとい うファイル名で保存してください。 この段階では、単に「buildings」の要素の「image/url」のデータ だけを引っ張ってきて表示しているだけです。
このファイルは、上記の演習と同 様に、building1-2.xslを元に、赤い行を追加して作成しました。 このように見えるはずです。
<?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" /> <xsl:template match="/" > <html> <head> <title> <xsl:value-of select="buildings/@title" /> </title> </head> <h1><xsl:value-of select="buildings/@title" /></h1> <table border="1"> <tr> <th>No.</th> <th>名前</th> <th>階数</th> <th>特徴</th> <th>画像</th> </tr> <xsl:apply-templates select="buildings" /> </table> </html> </xsl:template> <xsl:template match="buildings"> <xsl:for-each select="building"> <tr> <td><xsl:value-of select="@id" /></td> <td><xsl:value-of select="name" /></td> <td><xsl:value-of select="floor" /></td> <td><xsl:value-of select="comment" /></td> <td><xsl:value-of select="image/url" /></td> </tr> </xsl:for-each> </xsl:template> </xsl:stylesheet>
ここでは、各建物の画像を表示させるため方法を演習します。画像を表示させる HTML (XHTML) のタグは、
です。 参考: HTMLのタグのページ
このような表示をXSLTで実現するために、
という方法で行ってみます。
それでは、building3-1.xslを元に、下に示された赤い行を追記して、 building3-2.xslというファイルを作ってください。 また、building3-1.xmlをコピーして、スタイルシートの指定先を変更した上で、 builiding3-2.xmlという名前で保存しましょう。 このように見えるはずです。
<?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" /> <xsl:template match="/" > <html> <head> <title> <xsl:value-of select="buildings/@title" /> </title> </head> <h1><xsl:value-of select="buildings/@title" /></h1> <table border="1"> <tr> <th>No.</th> <th>名前</th> <th>階数</th> <th>特徴</th> <th>画像</th> </tr> <xsl:apply-templates select="buildings" /> </table> </html> </xsl:template> <xsl:template match="buildings"> <xsl:for-each select="building"> <tr> <td><xsl:value-of select="@id" /></td> <td><xsl:value-of select="name" /></td> <td><xsl:value-of select="floor" /></td> <td><xsl:value-of select="comment" /></td> <td> <xsl:element name="img"> <xsl:attribute name="src"> <xsl:value-of select="image/thumnail_url" /> </xsl:attribute> <xsl:attribute name="width">100</xsl:attribute> <xsl:attribute name="height">75</xsl:attribute> </xsl:element> </td> </tr> </xsl:for-each> </xsl:template> </xsl:stylesheet>
上記では、imgタグを使用した画像の表示まで演習した。 今度は、imgタグで表示したサムネール画像をクリックすると、原画像が表示さ れるようにリンクを張りたい。 こちらのページのように表示するために、 まず、building3-1.xmlをコピーして、スタイルシートの指定先を変更した上で、 builiding3-3.xmlを作成し、ついで XSLTファイル(building3-3.xsl)を作成せよ。
表示確認は、Webブラウザ上でURLを
のように指定することで行う。