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

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

内容 • r3とは • r3のキーワード、dimensionと継承 • インストール • デモプロジェクトの作成 –初期設定 (dimensionの作成と継承設定) –ターゲットの作成 –特殊化 (specialize) –翻訳 (translation) • まとめ

前置き • まとめてみたら、使えねーという結論に達しましたが、とりあえずやります –正直、どう使えばいいか分からないツールです • PHPで作られてるけど、CLIツールなのでPHPの話出てこない！

r3とは • Yahoo!からオープンソースで公開されたテンプレート管理システム –「テンプレートエンジン」では無い –PHP以外のテンプレやCSS・JS等もOK • 社内で利用されていたRosettaというツールを元にゼロから書き直し • 今のところアルファ版 http://www.appulsus.com/w/?p=18

Rosetta Stone 英語では、ロゼッタ・ストーンを隠喩として使う。解読することや翻訳、難問などを表す。出典: フリー百科事典『ウィキペディア (Wikipedia)』 webアプリケーションの国際化に特化している http://flickr.com/photos/jbarton/466497735/

r3とは？ • 複数のサイト(products)と、 • 複数の⾔語・地域(intl) のある、テンプレートを • 「継承」と • 「掛け合わせ」で効率よく管理、⽣成するCLIツール

テンプレートを生成？ • r3形式のテンプレを書いて、任意のテンプレを作る。 –テンプレからテンプレを⽣成 • テンプレのプリコンパイラ的な仕組み • 対象とするターゲット –テンプレート (PHP/Smarty etc…) –ヘルパー的関数ファイル (PHP) など • ⽇付をフォーマットして出⼒する関数など、画⾯表⽰に関わる補助的なPHPスクリプト

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>

なぜそんなことするのか? • Flexibleな国際化のため –細かい調整を可能とする –先に各⾔語用のテンプレートを⽣成してしまうので、gettextより負荷が少ない • 国際化しないなら、必要ないかも。 (´・ω・`)ｼｮﾎﾞｰﾝ

r3のキーワード dimension 継承 (inheritance)

様々な出力先→dimension • 様々な出⼒の種類をdimensionと呼ぶ • r3で使うdimensionは2つ –プロダクト (product) –国際化 (intl) • 各dimensionを掛け合わせてサイトが⽣成される –productが3個で、intlが4個なら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

掛け合わせると言っても… • 掛け合わせるって⾔っても、別々に作るんじゃ意味がない • そこで継承！ • 継承を使って、変更が無いところは親のモノをそのまま使うことで、⼿間が減らせる！

継承 (inheritance) • クラスの継承と同じ考え • 各dimension (productとintl)について、それぞれ別の継承関係が設定できる • intlについては、さらにdomainという継承関係の細分があり、別に継承可能 –page (ページ) –template (テンプレ) –translation (翻訳)

プロダクトの継承の例 • ブランディングのための基本ルールが統⼀ • その中でも遷移上、UI が統⼀されているプロダクトもある • 似てるけど少し違う

intlの継承の例 intl (4ヶ国) •us (アメリカ) •ca (カナダ) •fr (フランス) •jp (⽇本) • ⾔語的視点からは、フランス語圏で、 ca(カナダ)は fr(フランス)を継承 • 地域的視点からは、北⽶エリアで、 ca(カナダ)は us(アメリカ)を継承

• 実際に作っていく流れを⾒ていきます • その前にインストール

r3のインストール

導入 • 動作環境 –PHP5 –PDOで、MySQL or SQLiteが利用可能 • インストール –SourceForgeからr3とsticklebackのアーカイブをダウンロード • sourceforge.net/projects/rthree • sourceforge.net/projects/stickleback –PEARでそれぞれインストール

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

ホームディレクトリ設定 • 適当な場所で、r3用のディレクトリを作成 $ mkdir ~/r3 • セットアップコマンドを叩く $ r3 setup setuphome ~/r3 setting up environment • $R3HOMEを環境変数に設定しておく

DB設定 • デフォルトのSQLite利用なら、そのままコマンド叩くだけで完了 $ r3 setup installdb installing r3 db creating r3 db connecting to r3 db creating r3 tables • MySQLを使うときは、r3conf.xmlで設定

導入まとめ • ⽐較的簡単にセットアップできます

デモプロジェクトの作成ここからけっこう⻑い

作成するもの • 3つの独⽴したプロダクト(だけれど、関連がある)を4つの⾔語で作成します。 • プロダクト – cookery (料理), wine (ワイン), cars (⾞) • 地域 – アメリカ (us) – フランス語圏のカナダ (ca) – フランス (fr) – ⽇本 (jp)

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

初期設定 • productとintlを必要なだけ作成 –基底とする仮想的なproduct/intlも作成 • サイト全体のブランディングに利用 product intl •generic_intl •generic_product •us •cookery •ca •wine •fr •car •jp

productの作成 • まず、productを作成します • 継承関係はこんなの –料理と⾞が基底を継承 –ワインは料理を継承 generic_product-+-cookery--wine | +-cars

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.

intlの作成 • 同じようにintlも作成します • 継承関係は、domainで分かれる translation(翻訳) page/template generic_intl generic _intl-+-fr fr-+-ca | us +-us--ca jp | +-jp

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

translationの継承設定 • この時点ではintlの継承はこう translation/page/template generic_intl-+-fr | +-us--ca | +-jp • translationドメインで、caはfrを継承するように設定する

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

設定完了 • これで、productとintlの作成と、継承関係の設定が完了 • 次にターゲットを作成します • ターゲットとは、最終的に⽣成されるファイルのことです

ターゲットの作成 • target create [location]で作成 $ r3 target create ¥ generic_product/generic_intl/index.html page created (1) • locationとは、product名/intl名/ページ名で構成するUNIXパス的なもの • generic_product/generic_intl なので、最上位のlocationとなる –継承している⼦孫にも適用される

ターゲットの編集 • $R3HOME/templates/generic_prod uct/generic_intl/index.html/index.h tml.ros にターゲットの空テンプレートが作られる –これを適宜編集していく • ⼀回、全⽣成してみる –$R3HOME/htdocs下に作成されます $ r3 generate -a

いっぱい出来る (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

ターゲットの編集 <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>

テンプレートとターゲット template target index.php.ros index.php include header.ros footer.ros include brand.ros

とりあえずできた • とりあえずファイルが出来たけど、各サイトの内容は同じ • 継承先で、特殊化(specialize)して内容を各product/intlで変えていきます

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

特殊化 (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を適宜編集

特殊化 (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

特殊化 (specialize) • こんな感じで、適切なレベルで特殊化を繰り返していきます • 端折ってますが、ここが⼀番やること多い • 次、翻訳していきます

翻訳 (translation) • テンプレ中で、<r3:trans />で囲んだ箇所が翻訳するところ • 翻訳も継承関係があるので、親で翻訳すれば⼦孫にも適用されます • 流れとしては、指定した⾔語について –翻訳用ファイルをエクスポート –翻訳して、そのファイルをインポートをやっていく感じ

翻訳ファイル • 翻訳用のファイルは、”XLIFF”という OASISで標準化されているローカライズのXMLファイルフォーマット • 標準化されているので、GUIツール等もあり扱いやすい –SunのOLT(open language tools)とか • ⾔語ごとに分けてエクスポートできるので、翻訳業者さんに投げやすい

翻訳ファイルの出力 • エクスポート $ 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'

翻訳ファイルの中身 <?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>

翻訳終了 • これで終了 • ここで⽣成したファイルをアプリで使うことになります • なんとなく分かりました？

使う •ここまでやって再⽣成すれば、各 product×各intlのサイトがhtdocs下にできます • 使うには –アプリ側で、productをマッピング –intlは、ブラウザのAccept-Languageでも⾒て判断

まとめ

今後の機能追加予定 • Web GUI –画⾯を修正するのに、エンジニアが介さなくてもOKというのが重要 • CLI及びGUI用のプラグインAPI –例: カスタムのテンプレートタグや、出⼒ハンドラ

まとめ • まず国際化ありき • かなりニッチなツール –必要とする⼈は限られているかと • 現在はアルファ版。これから？ –引き続き様⼦⾒

ありがとうございました！ • 詳しいところは、はてダで書いてます –http://d.hatena.ne.jp/i_ogi/archive?w ord=*[r3]

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

by Ippei Ogiwara on Jun 24, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 20

Statistics

テンプレート管理ツール r3 — Presentation Transcript

http://s.deeeki.com	19
http://www.slideshare.net	1