テンプレ管理ツール r3
 2007/06/24 第25回 PHP勉強会
  http://d.hatena.ne.jp/i_ogi/




           photo: flickr.com/photos/maxpower/13096...
内容
• r3とは
• r3のキーワード、dimensionと継承
• インストール
• デモプロジェクトの作成
 –初期設定 (dimensionの作成と継承設定)
 –ターゲットの作成
 –特殊化 (specialize)
 –翻訳 (tr...
前置き
• まとめてみたら、使えねーという結論
  に達しましたが、とりあえずやります
 –正直、どう使えばいいか分からないツー
  ルです
• PHPで作られてるけど、CLIツールなの
  でPHPの話出てこない!
r3とは
• Yahoo!からオープンソースで公開され
  たテンプレート管理システム
 –「テンプレートエンジン」では無い
 –PHP以外のテンプレやCSS・JS等もOK
• 社内で利用されていたRosettaという
  ツールを元にゼロから...
Rosetta Stone
英語では、ロゼッタ・ス
トーンを隠喩として使う。
解読することや翻訳、難問
などを表す。
出典: フリー百科事典『ウィキペディア (Wikipedia)』




 webアプリケーションの
  国際化に特化している...
r3とは?
• 複数のサイト(products)と、
• 複数の⾔語・地域(intl)
のある、テンプレートを
• 「継承」と
• 「掛け合わせ」で
効率よく管理、⽣成するCLIツール
テンプレートを生成?
• r3形式のテンプレを書いて、任意のテ
  ンプレを作る。
 –テンプレからテンプレを⽣成
• テンプレのプリコンパイラ的な仕組み
• 対象とするターゲット
 –テンプレート (PHP/Smarty etc…)
 –ヘル...
r3のテンプレート例
<html>
<head></head>
<body>
<table width=quot;100%quot; border=quot;2quot;>
<tr>
 <th colspan=quot;2quot;><r3:t...
なぜそんなことするのか?
• Flexibleな国際化のため
 –細かい調整を可能とする
 –先に各⾔語用のテンプレートを⽣成して
  しまうので、gettextより負荷が少ない
• 国際化しないなら、必要ないかも。
  (´・ω・`)ショボーン
r3のキーワード

  dimension
継承 (inheritance)
様々な出力先→dimension
• 様々な出⼒の種類をdimensionと呼ぶ
• r3で使うdimensionは2つ
 –プロダクト (product)
 –国際化 (intl)
• 各dimensionを掛け合わせてサイトが
  ⽣成され...
product と intl の掛け合わせ
                           •cookery/us
                           •cookery/ca
                      ...
掛け合わせると言っても…
• 掛け合わせるって⾔っても、別々に作
  るんじゃ意味がない
• そこで継承!
• 継承を使って、変更が無いところは親
  のモノをそのまま使うことで、⼿間が
  減らせる!
継承 (inheritance)
• クラスの継承と同じ考え
• 各dimension (productとintl)について、
  それぞれ別の継承関係が設定できる
• intlについては、さらにdomainという
  継承関係の細分があり、別...
プロダクトの継承の例
    • ブランディングのため
      の基本ルールが統⼀
    • その中でも遷移上、UI
      が統⼀されているプロ
      ダクトもある
    • 似てるけど少し違う
intlの継承の例
         intl (4ヶ国)
   •us (アメリカ) •ca (カナダ)
   •fr (フランス) •jp (⽇本)

• ⾔語的視点からは、フランス語圏で、
  ca(カナダ)は fr(フランス)を継承
•...
• 実際に作っていく流れを⾒ていきます
• その前にインストール
r3のインストール
導入
• 動作環境
 –PHP5
 –PDOで、MySQL or SQLiteが利用可能
• インストール
 –SourceForgeからr3とsticklebackのアー
  カイブをダウンロード
  • sourceforge.net/pr...
r3 CLI
$ r3
usage:r3 [-c <arg>] [-u] [-x]
the r3 command line interface
    -c    override the default configuration, use ...
ホームディレクトリ設定
• 適当な場所で、r3用のディレクトリを
  作成

  $ mkdir ~/r3

• セットアップコマンドを叩く
  $ r3 setup setuphome ~/r3
  setting up environmen...
DB設定
• デフォルトのSQLite利用なら、そのま
  まコマンド叩くだけで完了
    $ r3 setup installdb
    installing r3 db
    creating r3 db
    connecting...
導入まとめ
• ⽐較的簡単にセットアップできます
デモプロジェクトの作成

 ここからけっこう⻑い
作成するもの
• 3つの独⽴したプロダクト(だけれど、関連
  がある)を4つの⾔語で作成します。
• プロダクト
 – cookery (料理), wine (ワイン), cars (⾞)
• 地域
 – アメリカ (us)
 – フランス語...
product と intl の掛け合わせ
                           •cookery/us
                           •cookery/ca
                      ...
初期設定
• productとintlを必要なだけ作成
 –基底とする仮想的なproduct/intlも作成
   • サイト全体のブランディングに利用

     product             intl
              ...
productの作成
• まず、productを作成します
• 継承関係はこんなの
 –料理と⾞が基底を継承
 –ワインは料理を継承


generic_product-+-cookery--wine
                |
   ...
productの作成
$ r3 dimension product create generic_product
product generic_product created

$ r3 dimension product create co...
intlの作成
• 同じようにintlも作成します
• 継承関係は、domainで分かれる

 translation(翻訳)     page/template
generic_intl       generic
             ...
intlの作成
$ r3 dimension intl create generic_intl
intl generic_intl created

$ r3 dimension intl create us -p generic_intl
i...
translationの継承設定
• この時点ではintlの継承はこう
     translation/page/template
     generic_intl-+-fr
                  |
            ...
translationの継承設定
$ r3 dimension intl parent ca set fr -d translation
parent of intl ca changed to fr in the translation
do...
設定完了
• これで、productとintlの作成と、継承
  関係の設定が完了
• 次にターゲットを作成します
• ターゲットとは、最終的に⽣成される
  ファイルのことです
ターゲットの作成
• target create [location]で作成
  $ r3 target create ¥
  generic_product/generic_intl/index.html
  page created (1)...
ターゲットの編集
• $R3HOME/templates/generic_prod
  uct/generic_intl/index.html/index.h
  tml.ros にターゲットの空テンプレー
  トが作られる
  –これを適宜編...
いっぱい出来る (4×5で20サイト)
$ r3 generate -av
generating cars/ca
    cars/ca/index.html
generating cars/fr
    cars/fr/index.html
...
ターゲットの編集
<html>
<head></head>
<body>
<table width=quot;100%quot; border=quot;2quot;>
<tr>
 <th colspan=quot;2quot;><r3:tra...
テンプレートとターゲット

      template                 target

     index.php.ros             index.php

                     includ...
とりあえずできた
• とりあえずファイルが出来たけど、各
  サイトの内容は同じ
• 継承先で、特殊化(specialize)して内容
  を各product/intlで変えていきます
searchpath
• ターゲットを⽣成するのに参照するパ
  ス
$ r3 template searchpath cookery/us/index.html

0   cookery/us/index.html
1   cookery/u...
特殊化 (specialize)
• cookery/us/index.htmlのcontent.ros
  テンプレートを0レベルで特殊化
  $ r3 template specialize ¥
  cookery/us/index.htm...
特殊化 (specialize)
$ r3 template specialize cookery/us/index.html
content.ros 0
Template specialised from
generic_product/ge...
特殊化 (specialize)
• こんな感じで、適切なレベルで特殊化
  を繰り返していきます
• 端折ってますが、ここが⼀番やること
  多い
• 次、翻訳していきます
翻訳 (translation)
• テンプレ中で、<r3:trans />で囲んだ
  箇所が翻訳するところ
• 翻訳も継承関係があるので、親で翻訳
  すれば⼦孫にも適用されます
• 流れとしては、指定した⾔語について
 –翻訳用ファイルを...
翻訳ファイル
• 翻訳用のファイルは、”XLIFF”という
  OASISで標準化されているローカライ
  ズのXMLファイルフォーマット
• 標準化されているので、GUIツール等
  もあり扱いやすい
 –SunのOLT(open langu...
翻訳ファイルの出力
• エクスポート
$ r3 translation save inherited ¥
generic_product/fr fr.xml
generic_product/fr and inherited
dictionary...
翻訳ファイルの中身
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<xliff version='1.1' …>
    <file original='generic_produ...
翻訳終了
• これで終了
• ここで⽣成したファイルをアプリで使
  うことになります
• なんとなく分かりました?
使う
•ここまでやって再⽣成すれば、各
  product×各intlのサイトがhtdocs下に
  できます
• 使うには
 –アプリ側で、productをマッピング
 –intlは、ブラウザのAccept-Languageで
  も⾒て判断
まとめ
今後の機能追加予定
• Web GUI
 –画⾯を修正するのに、エンジニアが介さ
  なくてもOKというのが重要
• CLI及びGUI用のプラグインAPI
 –例: カスタムのテンプレートタグや、出⼒
  ハンドラ
まとめ
• まず国際化ありき
• かなりニッチなツール
 –必要とする⼈は限られているかと
• 現在はアルファ版。これから?
 –引き続き様⼦⾒
ありがとうございました!
• 詳しいところは、はてダで書いてます
 –http://d.hatena.ne.jp/i_ogi/archive?w
  ord=*[r3]
Upcoming SlideShare
Loading in...5
×

テンプレート管理ツール r3

6,220

Published on

第25回PHP勉強会
http://d.hatena.ne.jp/i_ogi/20070624/1182704117

Published in: Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "テンプレート管理ツール r3"

  1. 1. テンプレ管理ツール r3 2007/06/24 第25回 PHP勉強会 http://d.hatena.ne.jp/i_ogi/ photo: flickr.com/photos/maxpower/130960194/
  2. 2. 内容 • r3とは • r3のキーワード、dimensionと継承 • インストール • デモプロジェクトの作成 –初期設定 (dimensionの作成と継承設定) –ターゲットの作成 –特殊化 (specialize) –翻訳 (translation) • まとめ
  3. 3. 前置き • まとめてみたら、使えねーという結論 に達しましたが、とりあえずやります –正直、どう使えばいいか分からないツー ルです • PHPで作られてるけど、CLIツールなの でPHPの話出てこない!
  4. 4. r3とは • Yahoo!からオープンソースで公開され たテンプレート管理システム –「テンプレートエンジン」では無い –PHP以外のテンプレやCSS・JS等もOK • 社内で利用されていたRosettaという ツールを元にゼロから書き直し • 今のところアルファ版 http://www.appulsus.com/w/?p=18
  5. 5. Rosetta Stone 英語では、ロゼッタ・ス トーンを隠喩として使う。 解読することや翻訳、難問 などを表す。 出典: フリー百科事典『ウィキペディア (Wikipedia)』 webアプリケーションの 国際化に特化している http://flickr.com/photos/jbarton/466497735/
  6. 6. r3とは? • 複数のサイト(products)と、 • 複数の⾔語・地域(intl) のある、テンプレートを • 「継承」と • 「掛け合わせ」で 効率よく管理、⽣成するCLIツール
  7. 7. テンプレートを生成? • r3形式のテンプレを書いて、任意のテ ンプレを作る。 –テンプレからテンプレを⽣成 • テンプレのプリコンパイラ的な仕組み • 対象とするターゲット –テンプレート (PHP/Smarty etc…) –ヘルパー的関数ファイル (PHP) など • ⽇付をフォーマットして出⼒する関数など、 画⾯表⽰に関わる補助的なPHPスクリプト
  8. 8. r3のテンプレート例 <html> <head></head> <body> <table width=quot;100%quot; border=quot;2quot;> <tr> <th colspan=quot;2quot;><r3:trans>Container</r3:trans></th> </tr> <tr> <td colspan=quot;2quot;><r3:include path=quot;header.rosquot; /></td> </tr> <tr> <td width=quot;30%quot;><r3:include path=quot;navigation.rosquot; /></td> <td width=quot;70%quot;><r3:include path=quot;content.rosquot; /></td> </tr> </table> </body> </html>
  9. 9. なぜそんなことするのか? • Flexibleな国際化のため –細かい調整を可能とする –先に各⾔語用のテンプレートを⽣成して しまうので、gettextより負荷が少ない • 国際化しないなら、必要ないかも。 (´・ω・`)ショボーン
  10. 10. r3のキーワード dimension 継承 (inheritance)
  11. 11. 様々な出力先→dimension • 様々な出⼒の種類をdimensionと呼ぶ • r3で使うdimensionは2つ –プロダクト (product) –国際化 (intl) • 各dimensionを掛け合わせてサイトが ⽣成される –productが3個で、intlが4個なら12サイト
  12. 12. product と intl の掛け合わせ •cookery/us •cookery/ca •cookery/fr intl product •cookery/jp × = •wine/us •us •cookery •wine/ca •ca •wine •wine/fr •fr •car •wine/jp •jp •car/us 12 3 4 •car/ca •car/fr •car/jp
  13. 13. 掛け合わせると言っても… • 掛け合わせるって⾔っても、別々に作 るんじゃ意味がない • そこで継承! • 継承を使って、変更が無いところは親 のモノをそのまま使うことで、⼿間が 減らせる!
  14. 14. 継承 (inheritance) • クラスの継承と同じ考え • 各dimension (productとintl)について、 それぞれ別の継承関係が設定できる • intlについては、さらにdomainという 継承関係の細分があり、別に継承可能 –page (ページ) –template (テンプレ) –translation (翻訳)
  15. 15. プロダクトの継承の例 • ブランディングのため の基本ルールが統⼀ • その中でも遷移上、UI が統⼀されているプロ ダクトもある • 似てるけど少し違う
  16. 16. intlの継承の例 intl (4ヶ国) •us (アメリカ) •ca (カナダ) •fr (フランス) •jp (⽇本) • ⾔語的視点からは、フランス語圏で、 ca(カナダ)は fr(フランス)を継承 • 地域的視点からは、北⽶エリアで、 ca(カナダ)は us(アメリカ)を継承
  17. 17. • 実際に作っていく流れを⾒ていきます • その前にインストール
  18. 18. r3のインストール
  19. 19. 導入 • 動作環境 –PHP5 –PDOで、MySQL or SQLiteが利用可能 • インストール –SourceForgeからr3とsticklebackのアー カイブをダウンロード • sourceforge.net/projects/rthree • sourceforge.net/projects/stickleback –PEARでそれぞれインストール
  20. 20. r3 CLI $ r3 usage:r3 [-c <arg>] [-u] [-x] the r3 command line interface -c override the default configuration, use your own -u display utf8 chars with unicode values -x display utf8 chars with hex values usage general help version r3 version setup administrative commands template template control translation dictionary utilities target target tools generate [-a] [-v... generate targets dimension dimension tools (dimension is one of product,intl) inheritance inheritance tools
  21. 21. ホームディレクトリ設定 • 適当な場所で、r3用のディレクトリを 作成 $ mkdir ~/r3 • セットアップコマンドを叩く $ r3 setup setuphome ~/r3 setting up environment • $R3HOMEを環境変数に設定しておく
  22. 22. DB設定 • デフォルトのSQLite利用なら、そのま まコマンド叩くだけで完了 $ r3 setup installdb installing r3 db creating r3 db connecting to r3 db creating r3 tables • MySQLを使うときは、r3conf.xmlで設 定
  23. 23. 導入まとめ • ⽐較的簡単にセットアップできます
  24. 24. デモプロジェクトの作成 ここからけっこう⻑い
  25. 25. 作成するもの • 3つの独⽴したプロダクト(だけれど、関連 がある)を4つの⾔語で作成します。 • プロダクト – cookery (料理), wine (ワイン), cars (⾞) • 地域 – アメリカ (us) – フランス語圏のカナダ (ca) – フランス (fr) – ⽇本 (jp)
  26. 26. product と intl の掛け合わせ •cookery/us •cookery/ca •cookery/fr intl product •cookery/jp × = •wine/us •us •cookery •wine/ca •ca •wine •wine/fr •fr •cars •wine/jp •jp •car/us 12 3 4 •car/ca •car/fr •car/jp
  27. 27. 初期設定 • productとintlを必要なだけ作成 –基底とする仮想的なproduct/intlも作成 • サイト全体のブランディングに利用 product intl •generic_intl •generic_product •us •cookery •ca •wine •fr •car •jp
  28. 28. productの作成 • まず、productを作成します • 継承関係はこんなの –料理と⾞が基底を継承 –ワインは料理を継承 generic_product-+-cookery--wine | +-cars
  29. 29. productの作成 $ r3 dimension product create generic_product product generic_product created $ r3 dimension product create cookery -p generic_product product cookery created with parent generic_product for page, template and translation domains. $ r3 dimension product create wine -p cookery product wine created with parent cookery for page, template and translation domains. $ r3 dimension product create cars -p generic_product product cars created with parent generic_product for page, template and translation domains.
  30. 30. intlの作成 • 同じようにintlも作成します • 継承関係は、domainで分かれる translation(翻訳) page/template generic_intl generic _intl-+-fr fr-+-ca | us +-us--ca jp | +-jp
  31. 31. intlの作成 $ r3 dimension intl create generic_intl intl generic_intl created $ r3 dimension intl create us -p generic_intl intl us created with parent generic_intl for page, template and translation domains. $ r3 dimension intl create ca -p us ... $ r3 dimension intl create fr -p generic_intl $ r3 dimension intl create jp -p generic_intl
  32. 32. translationの継承設定 • この時点ではintlの継承はこう translation/page/template generic_intl-+-fr | +-us--ca | +-jp • translationドメインで、caはfrを継承 するように設定する
  33. 33. translationの継承設定 $ r3 dimension intl parent ca set fr -d translation parent of intl ca changed to fr in the translation domain # 翻訳ドメインに基底っていらないよなってことで # translationドメインで基底の継承関係を削除 $ r3 dimension intl parent fr unset -f -d translation intl fr set with no parent in the translation domain $ r3 dimension intl parent us unset -d translation intl us set with no parent in the translation domain $ r3 dimension intl parent jp unset -d translation intl jp set with no parent in the translation domain
  34. 34. 設定完了 • これで、productとintlの作成と、継承 関係の設定が完了 • 次にターゲットを作成します • ターゲットとは、最終的に⽣成される ファイルのことです
  35. 35. ターゲットの作成 • target create [location]で作成 $ r3 target create ¥ generic_product/generic_intl/index.html page created (1) • locationとは、product名/intl名/ペー ジ名で構成するUNIXパス的なもの • generic_product/generic_intl な の で 、 最上位のlocationとなる –継承している⼦孫にも適用される
  36. 36. ターゲットの編集 • $R3HOME/templates/generic_prod uct/generic_intl/index.html/index.h tml.ros にターゲットの空テンプレー トが作られる –これを適宜編集していく • ⼀回、全⽣成してみる –$R3HOME/htdocs下に作成されます $ r3 generate -a
  37. 37. いっぱい出来る (4×5で20サイト) $ 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
  38. 38. ターゲットの編集 <html> <head></head> <body> <table width=quot;100%quot; border=quot;2quot;> <tr> <th colspan=quot;2quot;><r3:trans>Container</r3:trans></th> </tr> <tr> <td colspan=quot;2quot;><r3:include path=quot;header.rosquot; /></td> </tr> <tr> <td width=quot;30%quot;><r3:include path=quot;navigation.rosquot; /></td> <td width=quot;70%quot;><r3:include path=quot;content.rosquot; /></td> </tr> </table> </body> </html>
  39. 39. テンプレートとターゲット template target index.php.ros index.php include header.ros footer.ros include brand.ros
  40. 40. とりあえずできた • とりあえずファイルが出来たけど、各 サイトの内容は同じ • 継承先で、特殊化(specialize)して内容 を各product/intlで変えていきます
  41. 41. searchpath • ターゲットを⽣成するのに参照するパ ス $ r3 template searchpath cookery/us/index.html 0 cookery/us/index.html 1 cookery/us/generic 2 cookery/generic_intl/index.html 3 cookery/generic_intl/generic 4 generic_product/us/index.html 5 generic_product/us/generic 6 generic_product/generic_intl/index.html index.html.ros 7 generic_product/generic_intl/generic
  42. 42. 特殊化 (specialize) • cookery/us/index.htmlのcontent.ros テンプレートを0レベルで特殊化 $ r3 template specialize ¥ cookery/us/index.html content.ros 0 • これで、cookery/usだけcontent.ros の内容が別になる –$R3HOME/cookery/us/index.html/con tent.rosを適宜編集
  43. 43. 特殊化 (specialize) $ r3 template specialize cookery/us/index.html content.ros 0 Template specialised from generic_product/generic_intl/index.html to cookery/us/index.html 0 cookery/us/index.html content.ros 1 cookery/us/generic 2 cookery/generic_intl/index.html 3 cookery/generic_intl/generic 4 generic_product/us/index.html 5 generic_product/us/generic 6 generic_product/generic_intl/index.html content.ros 7 generic_product/generic_intl/generic
  44. 44. 特殊化 (specialize) • こんな感じで、適切なレベルで特殊化 を繰り返していきます • 端折ってますが、ここが⼀番やること 多い • 次、翻訳していきます
  45. 45. 翻訳 (translation) • テンプレ中で、<r3:trans />で囲んだ 箇所が翻訳するところ • 翻訳も継承関係があるので、親で翻訳 すれば⼦孫にも適用されます • 流れとしては、指定した⾔語について –翻訳用ファイルをエクスポート –翻訳して、そのファイルをインポート をやっていく感じ
  46. 46. 翻訳ファイル • 翻訳用のファイルは、”XLIFF”という OASISで標準化されているローカライ ズのXMLファイルフォーマット • 標準化されているので、GUIツール等 もあり扱いやすい –SunのOLT(open language tools)とか • ⾔語ごとに分けてエクスポートできる ので、翻訳業者さんに投げやすい
  47. 47. 翻訳ファイルの出力 • エクスポート $ r3 translation save inherited ¥ generic_product/fr fr.xml generic_product/fr and inherited dictionary data saved in file 'fr.xml' • マージ $ r3 translation merge fr.xml dictionary data merged from file 'fr.xml'
  48. 48. 翻訳ファイルの中身 <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <xliff version='1.1' …> <file original='generic_product/fr/generic' source-language='en' target-language='fr' datatype='plaintext'> <body> <trans-unit id='1'> <source>Cars Navigation</source> <target>Cars Navigation</target> </trans-unit> <trans-unit id='2'> <source>Cars Site Branding</source> <target>Cars Site Branding</target> </trans-unit> </body> </file> </xliff>
  49. 49. 翻訳終了 • これで終了 • ここで⽣成したファイルをアプリで使 うことになります • なんとなく分かりました?
  50. 50. 使う •ここまでやって再⽣成すれば、各 product×各intlのサイトがhtdocs下に できます • 使うには –アプリ側で、productをマッピング –intlは、ブラウザのAccept-Languageで も⾒て判断
  51. 51. まとめ
  52. 52. 今後の機能追加予定 • Web GUI –画⾯を修正するのに、エンジニアが介さ なくてもOKというのが重要 • CLI及びGUI用のプラグインAPI –例: カスタムのテンプレートタグや、出⼒ ハンドラ
  53. 53. まとめ • まず国際化ありき • かなりニッチなツール –必要とする⼈は限られているかと • 現在はアルファ版。これから? –引き続き様⼦⾒
  54. 54. ありがとうございました! • 詳しいところは、はてダで書いてます –http://d.hatena.ne.jp/i_ogi/archive?w ord=*[r3]

×