最近のWebシステム開発
最近では、今までの流れに加えて、新たなWebシステムも求められています。どういうものかというと、JavaScriptなどが積極的に使われ、より使いやすく、そして、より即時に情報にアクセスできるようなUIがリッチになったものです。見た目も重要ですが、使い勝手もそれ以上に重要視され、UI/UXに占める割合はかなり大きくなっています。
これらの機能はFlashが今まで担ってきましたが、Flashが使われなくなり、特にスマホではHTML5がそのポジションに取って代わりました。HTMLを記述しているエンジニアには新たなスキルが求められ始めました。そのようなUI/UXを専門に担当するフロントエンドエンジニアというカテゴリも生まれました。
そして、サーバサイドの開発では、スマホアプリなどからの利用もあり、リクエストは必ずしもブラウザからのみという状況ではなくなっています。
つまり、見た目や使い勝手についての実装が、サーバサイドではなくクライアントサイドに移ってきているということです。
そして、サーバサイドでは、ビジネスロジックとしてのAPIや、AIというキーワードもあるように、よりインテリジェンスな機能を実装するスキルが求められ、役割が変わりつつあります。それに従い、機能を実装する担当と、UI/UXを担当するエンジニアが分かれつつあり、プロジェクトの進め方も図3のように変わってきました。
このようなプロジェクトは、先ほど紹介したウォーターフォール型ではなく、アジャイル型と呼ばれています。
アジャイル型では、調査、設計、実装、テストなどを繰り返しながらプロジェクトが進みます。しかし、実際にプロジェクトを進める担当者では、それぞれが共に専門性を高める必要がありつつも、密に連携を取る必要があり、それらの手法がまだ確立しているとは言えない状態で、いろいろなやり方を模索している最中と言えます。
このようなHTML5の機能を使いこなすようなUI/UXを重視したWebシステムでなくても、確実に、HTMLはより柔軟に変更が必要になり、そして、そのHTMLにかかわる関係者も増えたことは確実なはずです。
現場でおきている問題
ここで、最初に提示した以下の問題について考えてみましょう。
- HTMLの文言、デザインの修正がすぐにできない
- サーバサイドの技術がわからないとHTMLが修正できない
HTMLの文言の修正は、HTMLを知らないと決してできないものではありません。変更する前の文言と変更後の文言がわかればできます。
また、デザインの変更も、簡単な色やサイズ、配置くらいならば、CSSとちょっとしたHTMLの変更でできるはずだと、多くの方は思うはずです。しかし、サーバサイドHTMLテンプレートを用いた手法では、ソースが過剰に高度化しているため、修正が困難になっています。
例えば、リスト1はSmartyというPHPのテンプレート言語を使った場合のHTMLです。
<!DOCTYPE html> <html lang="ja"> <head> <title>{#pageTitle#}</title> <!-- (1) --> <script type="text/javascript"> window.alert('foo'); </script> </head> <body> <h1>ご利用ありがとうございます。</h1> <div id="container" class="col"> {if $isPrimeUser} <!-- (2) --> <p>[プライム会員]</p> <p>[一般会員]</p> {/if} <p>このたびは・・・・・</p> </div> </body> </html>
比較的分かりやすそうなものの、(1)ページタイトルを修正したくても、変数化されているために、その変数がどこで定義されているかを調べる必要がでてきます。
また、(2)のifなどの制御文を使えることも特徴です。このため、例えば、$isPrimeUserという変数名を間違えてしまえば、その時点でHTMLへの変換が失敗することになり、最悪、画面が真っ白ということになります。その原因をサーバサイド技術を知らないエンジニアが調べるのは困難でしょう。しかしながら、簡単な文言の修正やデザインであれば、運用可能なレベルと言えます。
続いて、リスト2はJadeというテンプレート言語を使ったHTMLです。
doctype html html(lang="ja") head title= pageTitle script(type='text/javascript'). if (foo) { window.alert('foo'); } body h1 ご利用ありがとうございます。 #container.col if isPrimeUser p [プライム会員] else p [一般会員] p. このたびは・・・・・
こちらも先ほどの内容と同じHTMLを出力するテンプレートですが、HTMLからかなり拡張されているので、すでにHTMLができあがっている場合には、そのHTMLからテンプレートを起こすのはかなり面倒な作業で、そのテンプレート言語を別に覚える必要があると言えるでしょう。
ただし、Smartyは少々古いサーバサイドHTMLテンプレートであり、現在の流れはJadeのように新たなシンタックスを要求したり、または、HTMLの中に例外的にプログラムが記述できるなど、よりプログラムとHTMLテンプレートが密接に繋がる方向へと変わってきています。
このような流れが、簡単な修正であってもある程度のスキルが要求されてしまうことに繋がっているのです。
したがって、HTMLが分かることはもちろん、サーバサイド技術にも多少は理解がないと、ちょっとした修正さえ難しいという現状があるのです。簡単な文言修正や、デザインの変更であっても修正に時間がかかってしまうケースがよくあります。