クラウド時代に備えた,業務システムのUI構築のポイント

この記事を読むのに必要な時間:およそ 3 分

GWT/Ext GWT

Google Web Toolkitはその名の通りGoogleが提供する,JavaのGUIプログラミングのスタイルで開発したソースコードから,各ブラウザに最適化されたJavaScriptを生成する技術です。

GWT 2.0からはXMLでUIを定義することが可能になり,UIバインド,データバインドといった技術と組み合わせることにより,非常に高い生産性が実現できます。

GWT単体でも十分に有用な技術なのですが,用意されているUI部品が低レベルなものしかないというのが弱点として挙げられます。そのようなGWTの弱点を補うためにGWTベースの拡張ライブラリであるExt GWTも併せて使用することにしました。

Ext GWTはJavaScriptのライブラリとして有名なExtJSの開発元が提供しているGWTを拡張するUIライブラリで,高レベルなUI部品を多数備えています。興味のある方はExt GWTのデモページをご覧ください。

リスト1 レイアウトのXML

<g:DockLayoutPanel unit='EM'>
  <g:north size='5'>
    <g:Label>Top</g:Label>
  </g:north>
  <g:center>
    <g:Label>Body</g:Label>
  </g:center>
  <g:west size='10'>
    <g:HTML>
      <ul>
        <li>Sidebar</li>
        <li>Sidebar</li>
        <li>Sidebar</li>
      </ul>
    </g:HTML>
  </g:west>
</g:DockLayoutPanel>

開発秘話

こうして採用するUI技術を決め開発を開始しました。

GWT,Ext-GWTともクロスブラウザ対応となっているので,それほど苦戦することは予想していなかったのですが,やはりブラウザによる挙動の違いに悩まされることになります。

当初はExt GWTのサポートするブラウザ表1をベースに考えれば良いと考えていたのですが,ある程度開発が進んで一通りのブラウザで確認をしたところさまざまな問題が発生しました。

表1Ext GWT サポートブラウザ

ブラウザバージョン
Internet Explorer6+
FireFox1.5+
Chrome4+
Safari3+
Opera9+

とくに苦労したのがInternet Explorer(以降IE⁠⁠,の対応です。初めからIE6はサポート対象外とし7以降をサポートとする予定でいましたが,開発を進める中,定期的にIE7で動作確認するとレイアウトが致命的に壊れているという現象に悩まされます。当初は原因を調べて対処していたのですが,そもそもIE7はJavaScriptの処理が非常に遅く,推奨できる環境ではなかったので,思い切ってIE7もサポート対象外とすることにしました。

BtoCのサイトでは,このようにサポートブラウザを切り捨てる決断は難しいですが,業務システムであればサポートブラウザを切り捨てることで,開発やクロスブラウザ対応のコストを削減できるので思い切って切り捨てることも重要になってくると思います。

MA-EYESのポータル画面:操作性向上のためユーザごとのカスタマイズが可能に。UIのリニューアルにより,iGoogleのガジェットやMA-EYESのガジェットを自由にレイアウトできるようになった

MA-EYESのポータル画面:操作性向上のためユーザごとのカスタマイズが可能に。UIのリニューアルにより,iGoogleのガジェットやMA-EYESのガジェットを自由にレイアウトできるようになった

まとめ

UI技術は移り変わりが早く,選択を間違えると製品の寿命まで左右してしまう難しいテーマで,常に頭の片隅にありつつも結論は出さずにきました。しかし,HTML5の標準化の流れもあり,ようやく自信を持って今回のリニューアルに踏み切ることができました。今後はより高い操作性の実現,またスマートフォンをはじめとするさまざまなデバイスへの対応を行っていく予定です。

既存のノウハウや,技術者のスキル,業務/製品の特性など,検討する立場や人によってベストな選択肢も変わってくることと思いますが,本稿が少しでも参考になれば幸いです。

著者プロフィール

横井朗(YOKOI Akira)

株式会社ビーブレイクシステムズ

バックナンバー

クリエイティブ

  • クラウド時代に備えた,業務システムのUI構築のポイント