1read 100read
2012年4月WebProg221: コンテンツとデザインの分離 (771) TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
携帯電話以外からのアクセス禁止にしたい (101)
【Python】TurboGearsスレ Part 1【Framework】 (172)
無駄なことをして遊ぼう (104)
依頼されたツールを誰かが作るスレ (253)
Apache〜嗜みとして〜 Part3 (966)
インストールマニアックス4 azure祭り (147)

コンテンツとデザインの分離


1 ：01/05/27 〜 最終レス ：11/12/05
ASPでもPHPでもPerlでもJavaでも形こそ違えど結局は可変部を吐き出すための
<%〜%>やらprint文の嵐になってしまう。
「HTMLはHTML、プログラムはプログラムと完全に分離する方法はないものか。」
を話し合うスレッドです。

2 ：
外部htmlファイル読み込みで片付くものと思われ。

3 ：
<%〜〜%>でいいじゃん

4 ：
テンプレートをつくって、置換するのはどうよ。
<html>
<head>
<title>%%%%TITLE%%%%</title>
</head>
こんな感じのやつで。あとで%%%%TITLE%%%%を変数と置換。
>>2がいうとおり、このテンプレートを外部から読むか、内部に入れるかは自由。

5 ：
XML と　XSL で分ければ？

6 ：
おいらは内部派だからprintの嵐大好きだよ

7 ：
PerlのHTML::Templateは？
あれ好きなんだけど。

8 ：
PerlのText::Templateでやってた...
HTML::Templateの方が便利かな?
試してみよっと

9 ：
なるほど、PerlにはHTML::Templateなるものがあるんですね。
これは便利そうです。
#でも、最近はPerl使ってないんだよねぇ。
Javaあたりだとどんな方法があるでしょうか?
JSP + Beanでゴニョゴニョ。なんてまどろっこしい方法なんて誰も使いませんよね(^^;
自分はXMLCに注目しているのですが、HTMLの操作をすべてDOMで行わなければ
ならなかったりで、今ひとつ食指が動きません。

10 ：
あ。PHPだとこんなのあるらしいですよ。
PHP4テンプレートクラスライブラリ
ttp://zato.nu/tmpl/
これもタグ置換型ですね。

11 ：
HTML::Templateって、それ自体がなんか言語っぽくなってて、
なんか新しい言語を覚えなきゃいけない風でやなんだけど、実際どう？
友人が使ってるのをちょっと見ただけだからよくわからんが。

12 ：
JSP でコードと HTML がごちゃごちゃしてきたら拡張タグライブラリ
を作る。
<oresama:valueOf name="foo" />
みたいなの。JSP だと結構うまいこと分離できるよ。多少の知識は
いるけどね。

13 ：
>>11
テンプレートのタグ？それともメソッドの使い方？
どっちにしてもそれほど難しくないよ。

14 ：
HTML::Template
http://search.cpan.org/doc/SAMTREGAR/HTML-Template-2.2/Template.pm

15 ：
PerlのHTML::Templateは、コメントタグ形式でも表記できるのが
面白いと思った。
<td>名前</td><td><TMPL_VAR NAME=name></td>は
<td>名前</td><td><!-- TMPL_VAR NAME=name --></td>でもオッケー

16 ：
class HTMLClass {
　var $htmldata ;
　function HTMLClass( $htmlfile ) {
　　$htmldata = file( $htmlfile ) ;
　　$this->htmldata = "" ;
　　for( $ii=0; $ii<count( $htmldata ); $ii++ ) {
　　　$this->htmldata .= $htmldata[$ii] ;
　　}
　}
　function output( &$data ) {
　　$str = $this->htmldata ;
　　reset( $data ) ;
　　while( list( $key, $val ) = each( $data ) ) {
　　　$str = ereg_replace( "@" . $key . "@", $val, $str ) ;
　　}
　　echo $str ;
　}
}
サンプルクラス。
$tmp = new HTMLClass( "a.html" ) ;
$repdat["data"] = "hogehoge" ;
$tmp->output( $repdat ) ;
@data@ を hogehoge に置換。もっと短く出来ると思うけど
適当にこんな感じなのはいかがでしょう？

17 ：
Dreamweaverのテンプレートは？
編集可能領域だけをPerlから変更するようにして使っているよ。

18 ：
>>17
それもいいね。
ファイルを1行ずつ読んで、Dreamweaverのコメントにマッチしたら
置換する、というやり方でしょ？
俺はPerLのHTML::TemplateでつかうHTMLファイルを
.tmplにして、それをDreamweaverで編集してた。
モジュールのインストールがいらないから、そっちの方が良いかも。
ただ、疑問なのは、例えばテンプレート内にあるフォームの中に
データを埋め込むとき。
<input type="text" name="sample" value="ここに埋め込む">
こんな時は、ソース編集でvalueにDreamweaver形式のコメントを
打つの？

19 ：
>>17
お、俺もそれでやってる。
あと、>>18みたいなケースのときはコメントを置換するようにしてる。
<!-- hoge -->
を$hogeに置換すんの。
自分でライブラリ作ったから同じスクリプトを
テンプレートかえるだけで使いまわせていいよ。

20 ：
テンプレートのコメントは利用せず、編集領域内に
{$hogehoge;}と入れて、これを置換している。
あまりCGIが得意じゃないんで、恥ずかしいけど
↓こんな感じ。(藁
$postdata{ "hoge" } = $line[ 1 ];
$postdata{ "hoge2" } = $line[ 2 ];
print insertTemplate( './main2.htm', %postdata );
sub insertTemplate
{
local( $filename, %form ) = @_;
local( @lines, $line );
open( FILE, "< $filename" );
@lines = <FILE>;
close( FILE );
$line = join( '', @lines );
$line =~ s/\{\$(.*?)\}/$form{ $1 }/gs;
$line;
}

21 ：
とりあえず、これ読んどけ
http://jakarta.apache.org/velocity/ymtd/ymtd.html

22 ：
Perl信者はこうじゃなくちゃ！
sub template_expand{
    my($filename) = @_;
    my($text, $trans);
    local $/;
    local *IN;
    local *echo = sub { $trans .= join "", @_; };
    open IN, "< $filename" or return;
    $text = <IN>;
    $text =~ s{<\?perl\s+(.*?)\s*\?>}{ eval($1);$trans }egsm;
    close IN;
    return $text;
}

23 ：
本命はCocoonでしょ、やっぱり。

24 ：


25 ：
FastTemplate使え。Perl用とPHP用がある。

26 ：
sage失敗ごめんなさい。↓PHP版の配布サイト
http://www.thewebmasters.net/php/

27 ：
XSLTでマルチクライアントなんてほんとにできるんですか？

28 ：
このスレッド名、妙な感じがするのは私だけかな〜。
デザインとロジックの分離じゃなくて？

29 ：
>このスレッド名、妙な感じがする
ホントだ（ｗ

30 ：
>>4の
<html>
<head>
<title>%%%%TITLE%%%%</title>
</head>
の形のだと、HTMLしかわかんない俺とかでもデザインのカスタマイズがしやすい。

31 ：
「プロフェッショナルPHPプログラミング」にうまい使い方が載っていたのでFastTemplate使ってみた。
php4だと配布サイトに載っているパッチをあてないと上手く動かなかったけど。
テンプレートを入れ子にできるので部品化・使い回しできるのがイイ。

32 ：
>>31
Smartyもいいですよ。
>>10であげたテンプレートクラスが霞んでしまうほどの出来です。
(作者さん失礼…)
http://www.phpinsider.com/php/code/Smarty/

33 ：
http://www.linkclub.or.jp/~sawamur/perl/Perltag.html
http://www.linkclub.or.jp/~sawamur/perl/Perltag.pm
この「Perltag」はhtmlファイルにサブルーチンや
変数を直接書くことができます。
「Perltag.pm」。これこそがデザインとロジックの完璧な分離だと
思いますが皆さんはどう思いますか？
※ちなみに作者ではないです。

34 ：
> htmlファイルにサブルーチンやhtmlファイルにサブルーチンや
分離？逆じゃない？

35 ：
eperlの方がマシ。
eperl使うならPHPとかJSPで略。

36 ：
>>35
むしろeRubyの方が(以下略

37 ：
>>32
Smarty って仕様でかすぎない？ ってあんまり見てないんだけど。
最初、自分で作ろうと思って、いろいろ他のを見たけど
よくよく考えたら、PHP でこれをすると、HTML 内に処理を書けるって
いう言語自体の優位性が無くなってしまうね。

38 ：
>>37
Smartyではドキュメントにも書いてある通り、絶対にHTML内には
<?PHPタグは書かないことを前提に設計されてますので、Smartyの
設計者たちにとってはHTML内に処理を書くことのメリットよりも
デメリットの方が大きいと考えたのでしょう。
Smartyでは、HTMLテンプレートの解釈にかかるオーバーヘッドを
減らす為に、HTMLテンプレートをPHPにコンパイル(?)してから実行
しているのですが、面白い仕様ですね。(EnhydraのXMLCと同じ)

39 ：
でもこのSmarty、なぜか日本語の情報が見事なまでに皆無です。
だーれも使ってないのかな。
それとも、テンプレートという考え方にはそれほど需要がない?

40 ：
>>39
職場は Servlet のプロジェクト一色でフレームワークや EJB の
ことはみんなスキルがあるが、PHP や Perl のテンプレートの
ことを話したら、最初、JSP + タグライブラリと同じだという意見も
あったが、基本的にテンプレートはWYSWYG で編集できることを
目的としている点で方向性が違うということを言ったら
目から鱗という人間が多かった。
Java でも Jakarta のサブプロジェクトでテンプレートが
あるにはあるみたいだけど、あまり聞かないね。
需要はあると思うけどなぁ。

41 ：
>>37
Enhydra使えばまったく問題ナシ

42 ：
>>41
Enhydraの目玉であるXMLCですが、DOMってすごく煩雑なんですよね。
思想は理解できるのですが、現実とのギャップが埋め切れて無いような
気がします。DODSも然り。
あと、Javaサーブレットの場合は静的コンテンツの扱いが煮え切らない
部分がありますね。(これは自分が慣れてないせいかも)

43 ：
あげておこう。

44 ：
<% 〜 %> にASPを書くんじゃなくて
%> 〜 <% にHTMLを書くと思ったほうが
ソースが綺麗になるよ☆

45 ：
>>41
@ITの記事に、「デザインとプログラムの分離を果たした開発の例」みたいな
のがあって、実際にそのサイト見てみたら
「凝ったデザイン+ほぼプログラムレス」
「しょぼいデザイン+プログラムたくさん」
っていう感じで、ほんとに分離できてるのか謎だった。

46 ：
ページ中のコードの量にもよると思うが。
っていうか分離してないじゃん。

47 ：
46>>44ね。

48 ：
うん。分離は諦めた（藁
DWの吐くASPのコードはえぐい。
特にDB操作関連、逝ってよし。

49 ：
デザインとプログラムの完全分離、実現したよ。
CGIをCで書いて、ちょっとしたテクで出来た。
うちはデザインハウスだから、ASPとか嫌われるんだよね。
デザイナーが全部創りたがるから（ｗ

50 ：
>>49
素人さんいらっしゃーい

51 ：
>>49
どんなテク？

52 ：
知りてぇっ。

53 ：
デザイナーにC言語を覚えさせた、って言うのはどうだろう。
・・・・実際は>>4だと思うが。

54 ：
XSQL ＆ アクションハンドラ 　+ XSL
javaばんざい！
でもXSLって、結構ややこしーよね。


55 ：
>>54
っちゅーか激しく汚いよね ＞ XSL
なんでマークアップ言語をプログラミング言語にしたがるかなって感じ。

56 ：
http://www2.will-ltd.co.jp/product/dowp/dowp.htm
こんなもん売るなよ... ダサい上に高すぎ。
どんな会社かと思ったらSPAM送信ツール売ってる会社だったのね。
# ってかこっちも高すぎ（大笑い）

57 ：
>>55
＞なんでマークアップ言語をプログラミング言語にしたがるかなって感じ。
これは意味わかんねーけど、XML加工ってパフォーマンス最悪だよな。
どうやったって遅くなる。
これってハードと回線の発展まつしか解決策はねーのか？


58 ：
>>57
ゼロからparsesするタイプだと結構そうなりますね。EnhydraとかはDOMツリーをキャッシングして使いまわしてパフォーマンス上の問題を回避しようとしてる。
何度もparseするコストを下げるために、DOMを永続化したりとparse結果を使いまわすことで大分回避できそうな気がする。
なんか昔のRDBMSを見てるみたいだ。確実にガンガン改善されてゆくんだろうけど、XMLを使うってことは富豪プログラミングの極みなのかも。
> これは意味わかんねーけど、
うん、ちょっと判りにくい言い回しかも。単に激しく読みにくいと感じているだけです。慣れていないだけなのかなぁ。

59 ：
つーか、Struts使えば？

60 ：
>>56
UltraDeveloperの方が数段上の機能を持ってるぞ。
ちゃんと研究してんのかな。(W

61 ：
漏れはとりあえずWebObjects使ってる。
Perl->MS-ASP->Servlet&JSP->WebLogic->WebObjectsという流れ(笑)
DB連携は楽チンつーか、極楽つーか、今まで漏れがやってきたことは、いったいなんだったんだろう？

62 ：
linuxjapanに出てたけど、
このwalrusっていうの使ったことある人いる？
http://www.brain-tokyo.jp/~research/koutetu/walrus/index.html
なんかけっこうよさげなんだが、このデモがちょっとイタイ。
http://210.155.146.159/walrus/demo/

63 ：
>>62
なかなかｲｲんじゃねぇの？
っていうか、デモはシンプルなほうがいいと思うが。
派手なデモとか、そゆのがいいなら．ＮＥＴとかヤレよ（ワラ

64 ：
>>62
この発想、ｲｲ（・∀・）ね。
ドリームウィーバーみたいなソフトでHTML使う人にとっても
こっちのほうが、HTML::Templateみたいな独自タグよりも使いやすいかなあ？

65 ：
俺も機能はいいと思ってるけど、
デモでゴルゴとか言ってるとちょっとひいちゃうんだよな。

66 ：
HTML::Template は... another htmllint とかだとアウトになるし、
ブラウザでプレビューしてもまともなのにならなかったりするのが欠点。
例) <a href="<tmpl_var var="url">">url</a>
>>62 みたいに、id="..." を使うってのはあたりかも。
でも if とかどうやって実装したらいいんじゃろ。
ロジックの分離って意味では、if は邪道なのかな。
ロジックとデザインの分離っていっても、
デザイン部がプログラムであってもいいわけだよね...?

67 ：
xml吐けばいいじゃん

68 ：
>>67
XSLT かけるデザイナーがいるならね。

69 ：
>66
vanguard_compatibility_mode - 1に設定すると、モジュールは通常の書き方に加えて、%NAME%のような<TMPL_VARS>を見ることを予定します。

70 ：
>>69
%NAME% でも HTML lint は怒るような。
親切なHTMLエディタだったら入力時に % を %25 に変換しちゃうだろうし。
<a href="%URL%">hogehoge</a> -> <a href="%25URL%25">hogehoge</a>

71 ：
>>70
むむ。
filterで[%TMPL_VAR NAME='NAME'%]みたいなのにしてるんだけど、
これも変換されちゃう...?

72 ：
手書きでやるぶんにはなんだっていいけど、
URL には生の % は入れちゃダメっていわれてる以上、lintにかけたら怒られるし、
ユーザが % いれたら %25 にするのはエディタの仕事だよね。
実際そういうことするエディタがあるのかどうかはしらんけど。
&tmpl_hogehoge; とかかってに定義しちゃうとか考えたけど、これも変換されちゃうし...
<a href="$url$">hogehoge</a> とかだと大丈夫?

73 ：
>>68
でも、HTMLの流れからいくと正論でない？
今は違っても視野に入れるべきでは

74 ：
>>73
うーん..
プログラム->XML->XSLT->HTML(+CSS)
ってのが将来像だよね？

75 ：
Velocityってどう？
http://jakarta.apache.org/velocity/
http://www.ingrid.org/jajakarta/velocity/velocity-1.2-rc2/docs-ja/index.html

76 ：
>>75
いいも悪いも、Model2になってしまうと
決まったBeanから値を引っ張るだけなので、
VelocityだろうがFreemakerだろうが好みでしかないと。
サブレット系で使うにしたら、Turbineと一緒に考えんと
単品ではたいした事できひんよ。
TurbineでIntakeService使えばStrutsみたいな
ちょっとエレガントなフォームのハンドリングはできるけど。
基本的には引っ張り出すモデルで使用するので
「ちょっとした分岐」にSTLのタグ使いたくない場合にいいかと。
うちのクライアントは#ifとかで分岐を書いた方が
わかりやすい、ということでVelocityで作りました。
ただ、基本的にはロジックとプレゼンを分離しないものなので、
複雑なものを制御しようとするとすっごい見づらい。
Ankiaみたいな使い方はアリやと思いますけど。

77 ：
ｽﾏｿ
Anakiaね↑

78 ：
ロジックとデザインを完全に分離するとしたら、
if とか loop ってのは除外すべきなのかな。
ここに表がはいって、ここにはタイトルが入って...
みたいなのがデザイン？
それとも表を構築するのもデザイン側？

79 ：
>>78
表にどんな内容を動的に組み込むか。。というのがコンテンツ
表のレイアウトそのものがデザイン。ってのはどうよ?

80 ：
>>74
> プログラム->XML->XSLT->HTML(+CSS)
>
> ってのが将来像だよね？
その場合、デザイナーの仕事って何なの？
これからはデザイナーはXSLT勉強しろってこと？

81 ：
>>80
そこは、マーベラスなデザインプログラムを誰か作ってくれることを希望するしか。
今現在だって、他はどうかしらんけど
少なくとも HTML::Template で凝ったことしようとすると、
HTML エディタじゃ破綻しちゃう。
XSLT ってデザインの範疇?

82 ：
っていうことは現状では、
XSLTはプログラマが書くしかないと。
デザイナーが書いたHTMLをバラして
コードのあちこちに埋め込んでいくような方法しかないと。
そんならxml吐くよりHTML直接吐いた方がマシ。

83 ：
「XSLTはデザイン用の言語としても使える」という感じ？

84 ：
実際にXSLT（とXPath）を理解できるデザイナーなら
簡単なSQLとかスキーママッピングぐらい分かりそうなもんだよな。
実際細かいとこ（空白処理とか）も考えるとデザイナーが１から
XSLT書くってことはなかなかなさそうに思う。
で、部分的なXSLTモジュールが増えて管理しきれず破綻すると。
これ最強。
ユニークなソースを複数のマークアップに変換することこそ
XLSTの意義なわけで。
それでいてそこらへんのプログラマが「よーしパパ独自モデル
作っちゃうぞー」なんて言って作ったＸＭＬに普遍性があるわけなく。
まぁ、俺みたいな底辺のWEB屋は
フツーのテンプレートで十分ってこった。

85 ：
XSLTもJSPとかと同じ運命にあるんじゃない?
どんどん構文増やしてプログラマブルになっていく。結局まったく新しい文法覚えなきゃなら
ん分だけJSPなどの方がましという結末。俺はループで表を埋めることだけサポートした単
純な文字列置換テンプレート使ってるけど。

86 ：
XSLT/XSLエディタが出てくるんじゃないの？
動的なデータ変形によるレイアウト変更とかをデザインと見なし、それが
重要かどうかはデザイナの主観だけど（というかそういうツールでは無理。）
そのままxmlをCocoonにStreamに通すとXalanを使った場合と比べて表現の
自由が失われるわけで、要は、その表現が目に見える部分がデザインなのか
データなのか、それともデータをパラメータとしてレイアウト可変があるのか
を判断することが重要。テンプレートを文字置換を行うのは見ていてあまり
カッコよくないから、せめて静的なPageを作成できるWYSWYG-XSLエディタを
作ってCocoon+Servlet+XSLで十分では無いのか。
と言ってみる。

87 ：
>>86
よく意味がわからんのだけど、XSLエディタを作れっていいたいわけですな。

88 ：
http://www.mediafusion.co.jp/seihin/kanren/xweaver/xweaver.html
\27kだって。
たかいね。

89 ：
コンテンツとデザインとロジックの分離、って方向に修正しよう。
なんか MVC モデルを地で行ってるな...

90 ：
.NETでできるらしいね。どうでもいいけど。

91 ：
>>66
テンプレートに埋め込んだ状態で正しいHTMLになるんだから
吐き出し結果さえ通れば良いんじゃないの

92 ：
>>91
それだと、正しいHTMLであることを前提にしたツールが使えない。
きっちりした HTML エディタとか、検証ツールとか。

93 ：
WO使え

94 ：
うむ、完全なデザインとロジックの分離ができるのって、WOだけだな。
あとは流行りの寄せ集め。
ただし、WOはいくら良くてもマイナーだ。ﾄﾎﾎ

95 ：
ttp://www.w3.org/Amaya/
ってどうよ？

96 ：
>>94
WO、なんで Mac でしか動かないんジャー。

97 ：
>>96
WebObjectsの稼働環境は下記の通り。
【開発環境】
　Windows2000、Mac OS X
【運用環境】
　Java2 SDK 1.3.x and JDBC2.0ドライバがあれば、一応なんでもOK

98 ：
>>94
Cocoon2ならXML+XSLT+XSPと分離できているがどうよ？

99 ：
>>98
WOと平行してXMLベースの開発もやってんだけど、まず開発効率の点で比較にならん。
Cocoon2も、技術的には面白いとは思うので、オモチャとしていじってはみたい。

100read 1read
1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
■最強の系サイト作ろうぜ！■ (170)
XOOPS 8 (774)
姫君スクリプト (267)
【緊急】腕に覚えのあるプログラマー来てくれ！！ (143)
ドメインモデル VS トランザクションスクリプト (166)
PostWikiスレ 当ての無い旅路へ (215)
--log9.info------------------
【Divina】ディビーナ 晒しスレ in ロキ鯖 Part11 (282)
【ニコニコ】歌い手歌唱力　議論隔離スレpart68 (566)
【PS3】Call of DutyBlack Ops晒しスレ16【COD:BO】 (605)
【糞侍】映画ブログ・ブロガーウォッチ2【鬼女】 (661)
The Tower of AION シエル鯖晒しスレ part169 (457)
【GREE】おみせやさん【晒し】 (789)
【吟玉】翡翠・十六夜・高橋part9【個人情報搾取】 (816)
【押忍！】osu!晒しスレ Part4【戦え！応援団】 (176)
【ｴﾋﾟ奪取】アラド戦記晒しスレ233【挟られすぎた】 (272)
TalesWeaver ザン鯖晒しスレPart47 (832)
【妄想劇場】イチゴちゃんの世界4【IN土手】 (461)
【CF】クロスファイア晒しスレpart59【CROSSFIRE】 (189)
【FEZ】ﾌｧﾝﾀｼﾞｰｱｰｽｾﾞﾛ I鯖ホルデイン晒しスレ11 (615)
【雪が溶けて】米田淳一でし65【春一番】 (165)
pixiv内の企画をヲチするスレ52 (738)
【アラリオ】蒼天　晒しスレ53 (535)
--log55.com------------------
thx＞サンクスのパン 2＜thx
パンを作るときマーガリンを入れるな
おい！パン買ってこいよ
＜うまいスコーンはどこにいる＞
【パン】足立区のベーカリー事情【パン】
セブンイレブンのサンドイッチについて語り合う
灼眼のｼｬﾅ メロンパンスレ
☆ヴィドフランスってマズいよね★ その4