技術ブログこのブログの内容は個人の見解であり、所属する組織の公式見解ではありませんこの広告は、90日以上更新していないブログに表示しています。Webみなさん、日々のお仕事お疲れ様です。僕は、2年ほど前に、所属している会社の主要プロダクトであるのリニューアルに係わりました。その際、Mayaaを採用し、今日までにそれを運用してノウハウが蓄積してきたので、ここに発表しようと思います。私たちはコンシューマ向けのビューを多く扱うので、プログラミング工数を要せずデザイナーがダイレクトにデザインをカスタマイズできる仕組みの実現が急務でした。以前はテンプレートにJSPを採用していたため、デザインを作る(HTMLを書く)デザイナーと、プログラムに打ち込むJSPコーダーが必要という状況でした。ブログサイトなどでは、CSSレベルでのデザインカスタマイズをサポートしていることは多いですが、それでは自由度に限りが出てしまいます。フルHTMLレベルでのテンプレートエンジンが必要でした。結果的に、この状況がどのように変化したのかは下記のエントリにも書きましたので、こちらも合わせて読んでいただけると幸いです。http://d.hatena.ne.jp/s-ishigami/20101109/1289292233今回は技術よりのこと、及び運用していく上で培ったノウハウを紹介したいと思います。前置きが長くなってしまいましたが、自由なテンプレートの実現のため、Mayaaというライブラリを採用しました。http://mayaa.seasar.org/MayaaはSeasar2系の日本発オープンソースライブラリですが、Seasar2に関係なく使用することができます。JSPと同じレイヤーで動作し、JSPのようにServletからforwardして使うことができます。以下のページの図が分かりやすいです。http://mayaa.seasar.org/documentation/about.htmlMayaaを導入する以前のテンプレートエンジンはこんな感じでした。%>同じようなテンプレートをMayaaで書くとこんな感じです。m:id="A_HERE">dummy</span></div>という感じで、普通のHTMLにm:idという属性が付いていますね。編集することができます。Mayaaのすばらしさ「テンプレートファイルをそのままブラウザでプレビューすることが可能です」といっても、簡単なようで簡単なことではありません。/>ローカルではこのようになんの変哲もなく動く感じですが、サーバにデプロイしてみるとうまく動かないかもしれません。テンプレートは"view/hello.html"だけど、URLマッピングは別に管理されていて、"action/hello.do"かもしれません。/>のように書き換えるか必要があります。このようにしてしまったら、今度はローカルで画像が見られなくなったりします。Mayaaにはこの問題を解決するために、PathAdjusterという機構があります。http://mayaa.seasar.org/documentation/path_adjust.html詳しくは上記リンクに任せて割愛しますが、大ざっぱに言うと、一番目の記述を三番目の記述に実行時に書き換えてくれる機構です。これを応用すると、例えば「画像パスにtimestampを付与してmod_expireと組み合わせたクライアントキャッシュ対応」なんてこともできてしまいます。その他にも、Webのフロントとして使う上でかゆいところに手が届く機能が結構付いているので気に入っています。はまったこととはいえ、ここまで順風満帆というわけではありませんでした。こんなころにハマりました。最初が取っ付きにくいよく言われます。これが故に、敬遠する方も多いようです。慣れてみると何も苦はなく、もうJSPには戻れません。ドキュメントが非常によく整備されていますので、とっつきやすさで言えば取っ付き易いほうだと思います。いえ教育コストがかかります(mayaaファイルを覚えなければならない)mayaaファイルという聞きなれない独自のファイルの記述が必要です。これを書くには、幾つかあるmayaaプロセッサーをマスターしていないと心もとないところです。http://mayaa.seasar.org/documentation/processor_reference.htmlそこで、mayaaファイルを書ける技術者の数は限られてしまいます。そのためには、「なるべくテンプレート(HTML)側に制御を委ねる」アプローチが必要かなと思います。(詳しくは後ほど書きます)JavaScriptが気持ち悪いmayaaでは、Javaオブジェクトとテンプレートとの橋渡しにJavaScript(Rhino)を使用します。Javaとそのまま埋め込めるJSPとは異なるので、「Javaのように見えて少し違う」書き方をしなければなりません。Javaだと思って書いていると、うっかり思いもよらないバグを作ってしまってハマります。これに対するアプローチは以下の二つかなあと思っています。出来る限りJavaに委譲する出来る限りJavaScriptに統一する従来ならば、前者の書き方が理想だと思われますが、そのような方法を2年ほどやってきた結果、少々冗長さを感じています。した変更でもサーバの再起動が必要なのも億劫です。(本番環境だと簡単に再起動できませんしね?)今はサーバーサイドJavaScriptも広く利用されています。今後は後者のアプローチも有効ではないかと思っています。上記の件を含め、実際に使っていて培ったノウハウを発表します。m:idに命名規則を使用するmayaaには数多くのプロセッサーが存在しますが、HTML側から見ると、下記の4種類に集約されることがわかりました。変数を出力する属性を書き換える条件を満たす場合のみ表示する(条件を満たさなければ消える)特定の条件のもと繰り返すそれぞれを、"〜_HERE"、"〜_TAG"、"IF_〜"、"LOOP_〜"と命名するように統一しました。このようにすると、こんなこともできてしまいます。http://d.hatena.ne.jp/s-ishigami/20110330/p1デザイナーとプログラマーで使う名前空間を分けるMayaaでは、動的なタグの紐付けにHTMLの"id"属性を使用できますが、"m:id"のように独自の属性を使用することができます。有無を言わずそちらを採用します。http://mayaa.seasar.org/documentation/equals_id_resolver.htmlそれでもどうしても、id属性やclass属性を使用したくなることがあります。これはMayaaに限らず一般論ですが。そこで、「プログラマーは全て大文字を使う」「デザイナーは全て小文字を使う」などの棲み分けをすると良いと思います。xpath指定は使用しないMayaaではidの代わりにxpath指定でタグをコントロールすることができます。http://mayaa.seasar.org/documentation/xpath.htmlが、この方法は緊急時を除いて使用するべきではありません。あとからどうにもならなくなって泣けてきます。デバッグ用関数は値を返すこんな関数を用意してdefault.mayaaから呼び出すようにするとデバッグで便利です。/>プログラムは文言を吐き出さない以下のような書き方は、文言の変更にプログラムの修正が必要となってしまいます。m:id="USER_SE×_HERE">男性</span>※上記コードは、中学生並みの恥ずかしがりではなく、変なサーチキーワードに引っかからないように一部改変しています。「男性」という文言ではなく、画像にしたいかもしれません。英語化するかもしれません。以下の書き方が良いです。m:id="IF_USER_WOMAN">女性</span>id一覧表を自動生成するmayaaファイルはxmlファイルなので、比較的簡単にパースできます。XMLコメントもパースの対象にできるので、それを元にid一覧表を作るのは容易です。JavaDocを自作するイメージです。(ソース載せようとしたらちょっと長いので割愛します。SAXを使うとスムーズに実装できました。http://www.atmarkit.co.jp/fxml/rensai/xmljava04/xmljava02.htmlまた、ドキュメントの出力部分では、以下を参考に、ここでもMayaaを使用しました(笑)http://d.hatena.ne.jp/terazzo/20071116/1195250832PathAdjusterをうまく使う!Webサイトですから、ハイパーリンクを多用します。この時、いちいちリンク一つ一つにm:idを発行していたら大変です。いう時は、PathAdjusterでなんとかしましょう。path)に引き継がず、独自で処理するようにしました。結果的に、リンクは以下のように書くことになっています。-->このように、PathAdjusterをうまく使うことで、発行するidの数を減らすことは非常に強力です!一つのmayaaファイルで複数のテンプレートを使い回す。Mayaaは設定ファイルorg.seasar.mayaa.provider.ServiceProviderorg.seasar.mayaa.source.PageSourceFactoryなどの記述で非常に柔軟にエンジンをカスタマイズできます。前述したとおり、mayaaファイルはできるだけ少なくしたほうが得策です。そこで、一つのページをベースに複数の派生ページがデザインレベルで作れると幸せです。以下のエントリでその試みを成功させました。http://d.hatena.ne.jp/s-ishigami/20091205/1259983924そうこうしていると、「派生したページでちょっとだけm:idを追加したい」なんていう要望も発生してしまいました。これについても、EqualsIDInjectionResolverのカスタマイズで対応することができてしまいました。http://ml.seasar.org/archives/mayaa-user/2010-January/000893.htmlこれは、当時での実現方法ですので今は、https://www.seasar.org/issues/browse/MAYAA-76が実装されたのでさらに簡単にできると思います。m:idの数を減らす例えば、「名前の頭30文字を出力して残りは...にする」「名前の頭60文字を出力して残りは...にする」「名前の頭60文字を出力して残りは...にする」のように、パラメータが存在する制御をしたい時があります。そんなとき、NAME_30_HERENAME_60_HEREのようにいちいちつくっていたらヤボですが、はじめのうちは本当にそんな感じで対応していました。大変だったのが、同じような項目が1番から20番まであるテーブルがあり(現在は100まで拡張された)"FREE_1_HERE"のようなidをいちいち作成していると、どこかで入力ミスがあって「FREE_10_HEREがなくて、FREE_00_HEREになってた!」などということが発生すると厄介ですorz今は以下の方法でパラメータ化を実現しています。defaultValue;}テンプレート側では、以下のように書けばOKです。m:free_no="20">自由項目20番</span>"m:"付きの書き方は、sizeなど他の属性とかぶった時対策です。コメントはこう書け!JSPだとこんな風なコメントが使用できました。--%>開発が切羽詰ってくるとコメントも荒れてきます。うっかり外に出してはまずい言葉を書いてしまうかもしれません。-->などと書いては大問題です。そんな時はこう書きましょう。-->これでブラウザには出力されなくなります(笑)最後にWebデザイナーといえば、女性が多いです。UIに強いプログラマー=モテです。爆速Wordpress立ててみた。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。