r3 と stickleback を試してみる - ターゲットの作成とサイトの全生成
デモのチュートリアルを引き続き試してみます。
今日のところは、
- ターゲットの作成
- サイトの全生成
<r3:include />ディレクティブの理解- include先のテンプレートの編集
あたりです。
過去記事
新しい順に並べてます
ターゲットの作成
うまいこと継承関係が設定できたので、いくつかターゲットを作成していきます。
$ r3 target create generic_product/generic_intl/index.html page created (1)
ターゲットを作成するために、UNIXのファイルパスのようなものを使います。しかしながら、これはディレクトリ名ではなく、作りたいターゲットのプロダクトと、intl名を指定するものです。
ここでは、generic_productとgeneric_intlをターゲットとしたindex.htmlを作っています。プロダクトとintlの両方とも、継承されているため、子孫にも適用されます。
現時点では、r3は作成されたターゲットそれぞれに空のテンプレートを生成します。(自動生成の旨が書かれたコメントタグのみが入っています) これは、$R3HOME/templates/generic_product/generic_intl/index.html/index.html.ros に配置され、編集することができます。
全生成する
編集する前に、生成する全てのサイトを生成してみます。先ほど作ったターゲットが、全てのサイトに存在するということを示しましょう。
$ r3 generate -av
generating cars/ca
cars/ca/index.html
generating cars/fr
cars/fr/index.html
generating cars/generic_intl
cars/generic_intl/index.html
generating cars/jp
cars/jp/index.html
generating cars/us
cars/us/index.html
generating cookery/ca
cookery/ca/index.html
generating cookery/fr
cookery/fr/index.html
generating cookery/generic_intl
cookery/generic_intl/index.html
generating cookery/jp
cookery/jp/index.html
generating cookery/us
cookery/us/index.html
generating generic_product/ca
generic_product/ca/index.html
generating generic_product/fr
generic_product/fr/index.html
generating generic_product/generic_intl
generic_product/generic_intl/index.html
generating generic_product/jp
generic_product/jp/index.html
generating generic_product/us
generic_product/us/index.html
generating wine/ca
wine/ca/index.html
generating wine/fr
wine/fr/index.html
generating wine/generic_intl
wine/generic_intl/index.html
generating wine/jp
wine/jp/index.html
generating wine/us
wine/us/index.html-aは、全生成、-vはverboseモードのフラグです。
実際のサイト(3プロダクト × 4intl)に、継承のルートとなっているgeneric_productと、generic_intlが加わり、4プロダクト × 5intlで、20個作成されています。今後のリリースで、これらのdimensionのために、生成が必要ないということを示すフラグを提供するかもしれませんが、今のところは、生成されます。
R3HOMEのhtdcos下に生成されたファイルを適当に開くと、簡単なコメントのみが書かれているでしょう。
$ cat $R3HOME/htdocs/cookery/us/index.html <!-- autogenerated default template: index.html.ros -->
テンプレートの編集
r3の0.9.xの評価版リリースでは、コマンドラインのみですが、GUIは1.0で提供される予定です。現時点では、テンプレートを編集するためには各自の好みのエディタで行う方法しかありません。
先ほど生成したターゲットファイルのテンプレートを開きます。
$ vim $R3HOME/templates/generic_product/generic_intl/index.html/index.html.ros
コメントを削除して、このように編集してください。
<html> <head></head> <body> <table width="100%" border="2"> <tr> <th colspan="2">Container: <r3:trans>Container</r3:trans></th> </tr> <tr> <td colspan="2"><r3:include path="header.ros" /></td> </tr> <tr> <td width="30%"><r3:include path="navigation.ros" /></td> <td width="70%"><r3:include path="content.ros" /></td> </tr> </table> </body> </html>
ここで3つの <r3:include /> ディレクティブが出てきました。この、index.html.ros は "container" 要素となっていて、中にヘッダ、ナビゲーション、コンテントを読み込むようになっています。そこで、これらのテンプレートも作っていきます。
$R3HOME/templates/generic_product/generic_intl/index.html/header.rosを開いて、以下のように編集してください。
<table width="100%" border="2"> <tr> <th colspan=2>Header: <r3:trans>Header</r3:trans></th> <tr> <td><r3:include path="core_branding.ros" /></td> <td><r3:include path="site_branding.ros" /></td> </tr> </table>
(2007/06/03: 上ソースを書き忘れていたので追記しました)
同じように、
$R3HOME/templates/generic_product/generic_intl/index.html/navigation.ros:
Navigation: <r3:trans>Navigation</r3:trans>
$R3HOME/templates/generic_product/generic_intl/index.html/content.ros:
Content
$R3HOME/templates/generic_product/generic_intl/index.html/core_branding.ros:
Core Branding: <r3:trans>Core Branding</r3:trans>
$R3HOME/templates/generic_product/generic_intl/index.html/site_branding.ros:
Site Branding: <r3:trans>Site Branding</r3:trans>
ここまで終わったら、もう一度全生成します。
$ r3 generate -a generating cars/ca generating cars/fr generating cars/generic_intl generating cars/jp generating cars/us generating cookery/ca generating cookery/fr generating cookery/generic_intl generating cookery/jp generating cookery/us generating generic_product/ca generating generic_product/fr generating generic_product/generic_intl generating generic_product/jp generating generic_product/us generating wine/ca generating wine/fr generating wine/generic_intl generating wine/jp generating wine/us
できあがったファイルを開いてみます。
$ cat $R3HOME/htdocs/cookery/us/index.html <html> <head></head> <body> <table width="100%" border="2"> <tr> <th colspan="2">Container: Container</th> </tr> <tr> <td colspan="2"><table width="100%" border="2"> <tr> <th colspan=2>Header: Header</th> <tr> <td>Core Branding: Core Branding </td> <td>Site Branding: Site Branding </td> </tr> </table> </td> </tr> <tr> <td width="30%">Navigation: Navigation </td> <td width="70%">Content </td> </tr> </table> </body> </html>
ブラウザで表示するなら、こう見えるでしょう。(はてなのCSSが効いててるけど、気にせず構造だけ見てください)
| Container: Container | |||||
|---|---|---|---|---|---|
|
|||||
| Navigation: Navigation | Content | ||||
この時点では、ターゲットは全部同じテンプレートを使い、翻訳(translation)もしていないので、全てのターゲットはこれと同じようにみえます。
明日に続きます。
