Personal tools
You are here: Home Documents チュートリアル ZopeでWebページを作る DTMLタグでWebページを作る

DTMLタグでWebページを作る

Document Actions
DTMLタグを使って画像を表示します。

shimizukawa

このチュートリアルでは、管理画面(ZMI)上でHTMLを書いて画像を配置します。まずはZMIの使い方を覚え、静的なWebサイトの構築を学びます。最終的なゴールは、簡単なDTMLを利用したWebサイトの構築の学習です。
Page 4 of 6.

今編集している index_html は、 DTML Document という種類のオブジェクトです。このオブジェクトにはHTMLを書くことが出来ますが、同様に DTMLタグ を記述することが出来ます。細かい説明は後回しにして、とりあえず使ってみましょう。

DTMLで画像を埋め込む

さきほど<img>タグを書いた部分を以下のDTMLタグで置き換えます:

<dtml-var neko>

置き換えたら保存して、表示してみましょう。さきほどの<img>タグを記述していた時と同じように表示されると思います。これは、 <dtml-var neko> という文字列を使っているブラウザが理解してくれたわけではなく、ZopeがHTMLに変換してから出力しています。表示しているページのソースコードを見てみましょう。ブラウザの表示メニュー等からHTMLソースを表示することが出来ると思います。

出力されたHTMLソースの、<dtml-var neko>を書いたあたりは以下のようになっていると思います:

<img src="http://localhost:8080/neko" alt="" title="猫" height="320" width="320" />

<dtml-var neko> と書いただけですが、かなり詳しくHTMLに変換してくれています。この変換は、<dtml-var neko>と書いた部分でnekoオブジェクトにHTML出力の依頼が行われ、nekoオブジェクト(Imageオブジェクト)が自分自身をどのようにHTMLに出力したいかを知っているので、titleやサイズ情報が出力されています。

DTMLで色々な情報を表示する

DTMLは、同一フォルダにある他のオブジェクトの情報以外にも色々な情報を表示することが出来ます。その一例としてタイトルをDTMLで表示してみます。DTMLタグで <dtml-var title> とすることでそのページのタイトルを表示することが出来るようになります。以下のようにindex_htmlを書き換えてみてください:

<html>
  <head>
    <title><dtml-var title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <h1><dtml-var title></h1>

    <dtml-var neko>

  </body>
</html>

書き換えた箇所は<title>タグと<h1>タグの所です。このページを表示すると、<dtml-var title>と書いた部分が置き換わって、さきほどまでと同様に トップページ という文字列が表示されます。先ほどからHTMLを編集しているエディットボックスの上に Title というエディットボックスがありますが、ここに設定された値が <dtml-var title> に置き換わって表示されています。

dtml-varはtitle以外にも、色々な情報を表示することが出来ます。以下はその一例です。

id:オブジェクトのidです。例: index_html
title:オブジェクトのtitleプロパティーです。例: トップページ
title_or_id:オブジェクトのtitleかidです。titleが優先されますが、titleが空欄の場合にはidが表示されます。
absolute_url:オブジェクトのZope上の絶対URLです。例: http://localhost:8080/index_html
bobobase_modification_time:
 オブジェクトの最終編集時刻です。例: 2006/02/18 21:36:12.640 GMT+9

さっそくindex_htmlに書き込んで実験してみましょう:

<html>
  <head>
    <title><dtml-var title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <h1><dtml-var title></h1>

    <ul>
      <li><dtml-var id></li>
      <li><dtml-var title></li>
      <li><dtml-var title_or_id></li>
      <li><dtml-var absolute_url></li>
      <li><dtml-var bobobase_modification_time></li>
    </ul>

    <dtml-var neko>

  </body>
</html>
dtmlvar-sample1.jpg/image_preview

上記ようにdtml-varで表示できる値は、大きく分けて以下の4種類に分類されます。

  1. idやtitleなど、オブジェクトが持っているプロパティー
  2. absolute_urlやbobobase_modification_timeのような、オブジェクトの状態によって変化する情報(実際にはオブジェクトが持っているabsolute_url等の関数を呼び出しています)
  3. nekoオブジェクトのような、他のオブジェクトの情報
  4. 上位のフォルダなどが持っている、上記1~3の情報

4番目の項目は、 獲得(acquisition) と呼ばれるZopeの機能です。dtml-varで指定した値が自分自身に無い場合、自動的に自分が属している親フォルダに値を問い合わせます。例えば、 <dtml-var management_page_charset> と書くことで、 utf-8 という文字列が取得され、表示されます。

Note

実は3番目の項目も、獲得によって取得されています。nekoというプロパティーや関数がオブジェクト自身に無い場合、親フォルダに問い合わせが行われます。親フォルダは、親フォルダに属しているプロパティー、関数、子オブジェクトから neko を探しだして問い合わせ元に返します。親フォルダにもなかった場合は、さらに親フォルダへと問い合わせが行われます。

これでdtml-varの1つめの記述方法について大体理解できたと思います。次は、dtml-varを利用してページを分割し、再利用する方法について見ていきましょう。

by しみずかわ last modified 2006-02-18 23:22

Powered by Plone, the Open Source Content Management System