日本のシステムは、ガラパゴスと言って過言ではないほど強い癖を持っているのは、もはや暗黙知というレベルでしょう。
この他国を寄せ付けない固有の文化は、日本のSIがコストメリットの大きい国外のパッケージベンダから身を守れた理由とも言われています。ただ、これがフロントエンドUIになると、日本だからこそ欲しいと思える機能を真面目に作りこめば、それはそれで泥臭い作りこみが求められます。時には、メンテナビリティに問題を作ることも少なくないはずです。
こういう難しさに対して、正面からぶつかり取り組むのが、グレープシティの製品の特徴です。グレープシティはこれまで「Wijmo(ウィジモ)」という製品を持っていましたが、そのバージョン3が1月30日にリリースされました。Wijmo自体は海外の製品ですが、グレープシティの日本法人が仕込む日本向け対応がきめ細やかで、今年夏に発売される「forguncy」と同様、日本の文化への適用に対する意気込みを感じます。
既にメディアではいくつか掲載されているようですが、本記事ではもう少し選定者の視点に寄せて、Wijmoについて評価してみます。
1. Wijmoとは何か？
Wijmoは、Webアプリケーションのフロントエンド側で活用する、UIコンポーネントのライブラリです。
競合製品であるSencha系とは真反対で、jQueryベースのライトな使い勝手を重視することで、効率的なUI開発とクロスブラウザ対策を助けてくれます。jQueryが使えるエンジニアも多いため教育コストは低く、また既に現場でも活用されているOSSなどのjQueryプラグインを継続して活用できる、というメリットが期待できるようです。
同社は2012年に米ComponentOneを買収し、米国トップ5に入るUIコンポーネントのベンダーの実績とノウハウを社内へ取り込んでいます。Wijmoは、グレープシティの一部門となったComponentOneのリソースを活用し、Webアプリという分野でも、同ソリューションが求められる場へ縦展開を狙った製品であると考えられます。こうした背景もあり、同社は現在も製品群に「ComponentOne」というブランドを継続して利用しています。
Wijmoは海外製のUI制作製品ですが、Wijmoの日本版「2013J v3」は、グレープシティ日本法人がその仕様策定に加わることで改善を加えています。そのままで販売するのでなく、いわゆる「日本らしいシステム」作り、先ほどにも述べた「泥臭い部分」を、ケアした状態で提供しているのです。
2. どんなことができるのか？
Wijmoは多くの機能を持ちますが、ここでは3つのケーススタディにフォーカスします。
★ ExcelっぽいUIをWebで実現する方法
日本で愛されるExcelライクなUIですが、これをWeb上で実現するライブラリに、SpreadJSを提供しています。ExcelっぽいUIや、.NETのUIでは定番なスプレットシートの埋め込みを実現できます。
jQueryだと「tablesorter」が有名ですが、それを凌駕する機能性をjQueryベースで実現します。
★ グラフ出力をjQueryのインタフェースで
SVGのアンチエイリアスがかかったグラフ出力を、jQueryのインタフェースで実現します。
ただ、グラフ出力JSライブラリは結構競争が激しく、OSSだとゴマンとあります。こうした中で、ベンダサポートが受けられ、jQueryの延長として活用でき、SVGの美しいビジュアルが提供され、コンスタントに求められるところを満足してくるあたり、やるところはちゃんとやるという印象を受けます。
★ 日本語最適化したフォームを作る方法
殆どの業務系システムだと、フォームの日本語対応は恐らく一番要になるところでしょう。Wijmoは、いかにして日本語を効率的に入力させるか、というところにはかなり力を入れているようです。
よくあるのが、.NETなどの開発で使う画面項目仕様書をそのまま流用してしまうケースでしょう。サーバサイドに問い合わせるまでバリデーションの結果がわからない作りであるため、Web化したことによりユーザビリティが激しく低下してしまった、なんてことがあります。JavaScriptをガッツリ使い対策するにしても、複数のjQueryの組み合わせたことにより、設計書との整合が実装から読み取りにくくなったり、複数のjQueryプラグインがイベントを引っ切り無しに取り合い実動作が見えにくいコードを生まれる、なんてことがしばしばあります。
より具体的に言えば、Web標準的オンリーでいくなら、タグ上での入力の長さ指定や、非常に雲行きが怪しい「CSS3-UI」に含まれているIME制御用CSSが、IE4時代から実装された現実的手段です。それだけでも少し怪しいわけですが、ここへさらにjQueryを加えれば、「jquery.validation」「jQuery Alphanum」「jquery UI」からdatepickerを引っ張り出したりと、プラグインを大量に読み込ませ、定義の位置も表記も揃わない、泥臭いソースコードが生み出されます。
Wijmoは、こうした画面設計書作成で定義したルールを、一つの整合されたライブラリで、画面設計側との整合を持たせた実装に落とし込めるようになります。このページが参考になるでしょう。
ID系だと表意コードも、特に対策を考えずWebアプリでガチガチにやると泥臭い記述が求められることが多々ありますが、こうした部分にもきめ細やかに設定できるのも魅力の一つです。オープンソースだと貧弱な日本語周りの対応も充実しており、日本語に対するカナ入力もオプションひとつで実装できていしまいます。
3. プロジェクト内でどうやって扱うか？
Wijmoの技術的なところをお話した後に、今度はプロジェクトというレベルでどう扱うかについて踏み込みます。
注目すべき点としては、ライセンス体系のライトさが挙げられるでしょう。WijmoはGPL版と製品版の2種類を持ちます。両者、含まれているライブラリなどの内容に違いはなく、どちらであっても同じことができます。
Wijmoは基本的には、オープンソースライセンスに従う範囲では無償です。Wijmoを使いサービスを作った際に、ソースコードを全て改変可能として開示できるのであれば、ライセンス費用は一切発生しません。そうでない場合、例えばイントラネットのようなクローズドな環境下でサービスとして動かす場合、製品版のライセンスを購入する必要が生じます。
グレープシティはWijmoをCDN(Content Delivery Network：コンテンツ配信ネットワーク)で提供しているため、インターネット上のサーバからライブラリを手元の環境へ読み込み、実現したいことができるか確認する、といったことができます。
さて、これらの点を踏まえ実プロジェクトではどうなるか考えてみましょう。
まず、プロジェクトの序盤、製品のポテンシャルを調査したい段階、ここではグレープシティへの事務手続きはおろか、問い合わせは一切不要です。CDN上のライブラリを引っ張ってきてサンプルを作れます。非エンジニアには難しいですが、jQuery慣れしたエンジニアならモックアップ程度はさくっと作れてしまうでしょう。
実際に使う段階になると、ライセンスはVisual Studio的な、基本「人」に紐付くシステムです。契約を結んだ開発者は、どんな開発端末上で活用しても良いし、それをクローズドなWebシステムとして提供しても良いというルールです。このため、フロントエンドとサーバサイドで分業した開発では、フロントエンドの開発要員がライセンス契約を結ぶことになります。
期間ライセンスなので、プロジェクトの開発期間だけ契約し、運用期間は数を絞るなり、改善が求められた際にスポットで契約するなりという方法になると想定できます。ライセンス有効時は、当然ですが、グレープシティが問い合わせを受け付けることができます。
もう少し知りたい？
そもそもですが、画面にそこまで細かい作り込みはいらない。グラフも単なる表でいいし、入力だってサーバで作りこんじゃえばOK、ユーザビリティはそこまで重要じゃないという案件では基本的に「不要」なライブラリです。2014年の今でも、そんなのが当たり前な業務システムは山ほどありますが、10年以上前の付加価値も効率面も変わらないやり方をそのまんま続けるべきか、これはもう企画段階の考えによるところでしょう。
今回紹介したWijmoですが、2月28日に開催される、「Enterprise x HTML5 Web Application Conference 2014」にて紹介されます。
このカンファレンスは中立的な運営なので、偏りを気にせず、他の製品と比較してそのメリット・デメリットを評価できます。他の競合製品と横並びにするには持ってこいなイベントになります。
興味があれば、是非ご参加下さい。
