WebCenter Sites案件に携わって

 これまでに複数のWebCenter Sites案件に携わり、感じたことをお話したいと思います。

 WebCenter Sites(以下 WCS)は、Webサイトのコンテント管理だけを行う単純なCMS(Content Management System)のみならず、エンドユーザーのWeb体験全体を管理できるWeb Experience Management(WEM)としての機能を有する高機能な製品です。
今回は、弊社のこれまでの導入実績として多かった、Webサイトを構築する開発案件についてお話します。(WEMのお話は、また別の機会に。)

 その導入の目的はサイトを閲覧するユーザに対して快適で見やすい環境を提供することと、その運用を行うクライアント様に対して、快適に運用できる環境を提供することです。
どちらか一方でも十分に実現できないということは絶対に避けなければなりません。

 WCSは、さまざまなニーズに応える高いポテンシャルがありますが、それを使いこなすための多くの準備が必要になります。
その作業はクライアント様と、我々開発ベンダーとの緻密な共同作業になります。

 まずは、従来行っていた製品や商品の管理方法、サイトへの出力方法を理解した上で、WCSを導入することで、何が変わるか?何が便利になるか?を十分整理し、説明します。
WCSの案件が他のサイト構築案件に比べ、要件定義に多くの時間を費やすのは、このように従来の業務を整理し、新しい業務体系を提案するところから始まるからです。
時にはクライアント様の職場にお邪魔して実際に1日でどのような業務が発生しているのか、その流れがどのようになっているのか見学させていただくこともありました。

 開発手法としては、従来型のウォーターフォールモデルを基本にしますが、特に製品や商品の登録、管理、出力部分に関しては、プロトタイプを先行して作成し、クライアント様に成果物を確認していただきながら部分的に反復して進めるアジャイル開発風の手法を使うことが効果的だということがわかってきました。
早めに入力のUIや、出力パフォーマンスなどを確認していただき、問題点があれば解決します。
それに合わせて、要件達成のゴールイメージ、スコープを明確にしておくことも重要になります。

development_process

 製品や商品を扱うページの表示ロジックは複雑になりがちです。
多くのデータがリレーションを行い表示されるため、表示速度など出力パフォーマンスは重要な課題となります。
WCSには高性能なキャッシュの仕組みがありますが、基本的な表示ロジックが高速でないと、キャッシュの生成に膨大な時間がかかる結果になり、ユーザビリティの低下に繋がります。
複雑なロジックを伴う部分に関しては、とりあえず作ってみた的な開発の進め方は多くの手戻りが発生するため、 運用方法と、その運用頻度と、閲覧する側のユーザビリティのバランスを考え、適切なパフォーマンスが得られるように設計段階から十分に考慮する必要があります。
パフォーマンス向上のための施策は、このようにそのサイトやコンテンツの運用方法、閲覧側の要求に則したものを実現しなくてはいけません。

 通常の案件に比べ、大規模な構築になるので時間もかかり苦労も多いですが、構築したサイトが様々なところで事例紹介されていたり、クライアント様から「掲載している製品や商品に関する問合せが増えた」「運用が楽になった」「良いサイトが出来上がった」とお言葉をいただいたりすることが、我々開発ベンダーの次への原動力になっています。

 余談ですが、WCSは旧製品名をFatWire Content Serverといいます。
WCS案件に携わる度に何故かFatになっていく自分をなんとかすることが目下の最重要課題です。


無駄な改行を省こう

今回はWCS開発初級編としまして、TemplateやCSElementを使用して出力されるHTMLの無駄な改行を省くノウハウを、会話形式でゆる目にお届けしたいと思います。
突然コラムの雰囲気が変わってしまいますが…、戸惑わないで頂けると幸いです。

◆登場人物紹介◆
mega02
メガネ先輩
ベテランSE。数々のWCS案件を経験してきたツワモノ。

risu02
リス田
新米プログラマー。WCSについて学び始めてまだ3日目。
risu06 先輩!アセットの属性値を取得して、表示を行うTemplateが出来ました!

mega02 どれどれ…。うん、いい感じだね。
Templateのコードも見せてもらえるかな?
risu01 はい!

<assetset:setasset name="asFlexData" type="Music_P" id='<%=ics.GetVar("assetID")%>' />
<assetset:getattributevalues name="asFlexData" attribute="artistname" listvarname="listFlexData" typename="Music_A" />
<ics:listget listname="listFlexData" fieldname="value" output="icsArtistname" />
<assetset:getattributevalues name="asFlexData" attribute="mediatitle" listvarname="listFlexData" typename="Music_A" />
<ics:listget listname="listFlexData" fieldname="value" output="icsTitle" />
<assetset:getattributevalues name="asFlexData" attribute="releasedate" listvarname="listFlexData" typename="Music_A" />
<ics:listget listname="listFlexData" fieldname="value" output="icsReleasedate" />

アーティスト名:<%=ics.GetVar("icsArtistname")%><br />
タイトル:<%=ics.GetVar("icsTitle")%><br />
発売日:<%=ics.GetVar("icsReleasedate")%><br />

mega02 ふむ。ちゃんとassetset:getattributevaluesタグも使いこなせてるね。
risu03 楽勝っすよ!もっとレベルの高い課題を出してくださいよー。
mega01 ほう…。
じゃあ次の課題を出す前に、ちょっと表示されたページのソースを見てみようか。
risu02 ソース?Templateじゃなくて?あ、Webページの方ですか?
mega01 うん、右クリックで「ソースの表示」を選んで…

risu04 えっ…!?うわぁぁぁぁ!改行だらけえぇぇ!!な、なんで?
mega03 ひゃっひゃっひゃっひゃっひゃ!
risu04 って、なんでこんなに改行だらけになっちゃうんですか?てかその笑い方ムカつきます!
mega01 いやぁ、WCS開発を始めたばかりの人がはまりがちなポイントに、
見事にはまってくれたからね。
risu05 ガーン。はめられた…んですか僕。
mega01 という訳で、何でこんなに改行だらけのコードになったかだが、さっきのTemplateのコードをもう一度よく見てごらん。

<assetset:setasset name="asFlexData" type="Music_P" id='<%=ics.GetVar("assetID")%>' />
<assetset:getattributevalues name="asFlexData" attribute="artistname" listvarname="listFlexData" typename="Music_A" />
<ics:listget listname="listFlexData" fieldname="value" output="icsArtistname" />
<assetset:getattributevalues name="asFlexData" attribute="mediatitle" listvarname="listFlexData" typename="Music_A" />
<ics:listget listname="listFlexData" fieldname="value" output="icsTitle" />
<assetset:getattributevalues name="asFlexData" attribute="releasedate" listvarname="listFlexData" typename="Music_A" />
<ics:listget listname="listFlexData" fieldname="value" output="icsReleasedate" />

アーティスト名:<%=ics.GetVar("icsArtistname")%><br />
タイトル:<%=ics.GetVar("icsTitle")%><br />
発売日:<%=ics.GetVar("icsReleasedate")%><br />

risu05 えーと……。
……。
risu07 あ…、も、もしかして「assetset…」タグ部分の改行も、改行として見なされた?
mega01 そう!その通り。
このコードだと■印をつけたところの改行が、そのままソース中の改行と見なされたんだね。

<assetset:setasset name="asFlexData" type="Music_P" id='<%=ics.GetVar("assetID")%>' />■
<assetset:getattributevalues name="asFlexData" attribute="artistname" listvarname="listFlexData" typename="Music_A" />■
<ics:listget listname="listFlexData" fieldname="value" output="icsArtistname" />■
<assetset:getattributevalues name="asFlexData" attribute="mediatitle" listvarname="listFlexData" typename="Music_A" />■
<ics:listget listname="listFlexData" fieldname="value" output="icsTitle" />■
<assetset:getattributevalues name="asFlexData" attribute="releasedate" listvarname="listFlexData" typename="Music_A" />■
<ics:listget listname="listFlexData" fieldname="value" output="icsReleasedate" />■
■
アーティスト名:<%=ics.GetVar("icsArtistname")%><br />
タイトル:<%=ics.GetVar("icsTitle")%><br />
発売日:<%=ics.GetVar("icsReleasedate")%><br />

risu05 oh…。
risu07 え、でもこうやってタグを記述する以上、改行が出来てしまいますよね…?
これからどんどん複雑なタグやループ処理を書く事になると、もっともっと改行が…。
ど、どうすれば…。
mega01 そこはちゃんと改行が入らない様な書き方があるんだよ。
ノウハウ…って程でも無いけど、まぁ、ちょっとしたTipsみたいなもんかな?
risu01 ほうほう。で、どんな書き方なんですか?
mega01 んーと(カタカタカタ…)、こんな感じだね。

<assetset:setasset name="asFlexData" type="Music_P" id='<%=ics.GetVar("assetID")%>' /><%
%><assetset:getattributevalues name="asFlexData" attribute="artistname" listvarname="listFlexData" typename="Music_A" /><%
%><ics:listget listname="listFlexData" fieldname="value" output="icsArtistname" /><%
%><assetset:getattributevalues name="asFlexData" attribute="mediatitle" listvarname="listFlexData" typename="Music_A" /><%
%><ics:listget listname="listFlexData" fieldname="value" output="icsTitle" /><%
%><assetset:getattributevalues name="asFlexData" attribute="releasedate" listvarname="listFlexData" typename="Music_A" /><%
%><ics:listget listname="listFlexData" fieldname="value" output="icsReleasedate" /><%

%>アーティスト名:<%=ics.GetVar("icsArtistname")%><br />
タイトル:<%=ics.GetVar("icsTitle")%><br />
発売日:<%=ics.GetVar("icsReleasedate")%><br />

risu07 ???な、なんか「%」がいっぱい…。
mega01 そうだね、ソースコードの可読性は少し落ちちゃうね。
まぁ、そのうち慣れると思うよ。
で、この書き方だけど行の末尾に「<%」、あと行の先頭に「%>」を追加したんだ。
こうすると、<% ~ %>間がJSPブロックとしてみなされるから、その間の改行はHTMLソース上には出力されないんだ。
risu01 へぇ…!こういう書き方があるんですね。
mega01 ブラウザ上での見た目は勿論大事だけれど、HTMLソースの見た目も美しくね。
risu01 はい!
早速さっきのTemplateを修正して、無駄な改行のないHTMLが出力されるようにしますね!!

risu05 (10分後)…あ、あの。
mega02 ん?出来たかな?
risu05 ええと、それが…。ちゃんと<% ~ %>でくくったんですけど、どうしても1ヵ所無駄な改行が残っちゃいまして…。
HTMLの一番先頭なんです。

mega03 ひゃっひゃっひゃっひゃっひゃ!!
risu04 ってまたそんな笑い方する!ガーン!!
mega03 いや、君がまたはまりがちなポイントにはまってくれたからねぇ。
risu05 また、ですか…。(ガクッ)
mega01 HTMLの先頭に改行が入っちゃう場合は、jspコードの一番末尾を見てごらん。
「</cs:ftcs>」の後に改行が入ってないかい?
risu04 ああっ!
mega01 やっぱり。

mega01 ここに改行が入っていると、HTMLの一番頭にその改行が表示されちゃうんだよ。
注意してね。
risu05 はい…。
◇ ◇ ◇
risu05 WCSって、Templateの書き方だけでも沢山ノウハウがあるんですねぇ。
全部覚えられるかなぁ…。
mega02 そこは案件をこなしていく内に自然と蓄積されていくよー(遠い目)。
risu02 ふーん。そんなもんですかねぇ。
mega01 ところで、HTMLコード内に無駄な改行が入らないようなソースの書き方については、ちゃんとDeveloper’s Guideに書いてあるんだな~。
risu01 えっ!そ、そうなんですか?
mega01 Developer’s Guide、全部目を通した??
risu05 い、いや、さすがにまだ全部は…。
mega01 ほら、この最後の方の、「Appendix C」のとこ。
risu05 え、英語…。(ビクビクビク)
mega01 Developer’s Guideは一通り読んどいた方がいいよ。
基本的な事が一通り書いてあるからね!
ちなみに…日本語版もある。
risu06 ガタッ!!ほ、ほんとですか…!!!
mega04 お前…。
WCSの勉強もいいけど、英語の勉強もやろうな。
risu05 …はい。

以上、WCS開発初級編、「無駄な改行を省こう」でした!
次回(は果たしてあるのか?)をお楽しみに!