Titanium Desktopでアプリ開発

Titanium Desktopを使った業務アプリの開発で、設計方針を決める話の第４話です。設計方針の話としては、今回が最後となります。

今回は、HTMLとCSSを取り上げます。昔に比べるとCSSも機能が増え、実現できる範囲が広がりました。それでもなお、自由なレイアウトが簡単に作れるわけではありません。私個人としては、HTMLとCSSの組み合わせは、未だに不良品だと思っています。レイアウトを作ることに関して、根本的に設計が悪すぎるからです。

最近は大きな画面のモニタが増えました。画面を有効に使うためには、3段組とか4段組だけでなく、もっと自由な画面分割でレイアウトしたくなります。ところが、HTMLとCSSの組み合わせでは、非常に苦労します。もちろん皆さんも、ご存じのことでしょう。

HTMLからデザイン要素を取り除くため、できる限りCSSでデザインするという流れがあります。この考え方自体は非常に共感できるのですが、現実は辛いことばかり。納得のいかないことばかり。

代表的な例を１つ取り上げましょう。CSSで２段組や３段組を実現するとき、大きな違和感を感じます。２段組では、CSSのfloat指定でブロックを左右に分けます。３段組になると、２段組を二重に組合わせて実現するという情けなさです。HTML側は、divタグで何重にも囲む醜さが目立ちます。HTML側を汚さずにレイアウトを決めるはずのCSSなのに、多重divタグでHTML側を汚してしまってます。また、変な技を使わないと段組を作れないのは、根本的な問題です。すべてCSSの仕様の悪いのが原因でしょう。

もっと理想的な形は、レイアウトを自由に作れる機能をCSS側に用意することです。まるでtableタグで画面を区切るような形で、レイアウトを設計する機能をです。もちろんHTML側を汚さないのが大原則ですから、レイアウト用のタグは用意しません。すべてCSS側で指定する形にすべきです。書籍の２段組や３段組では、複数の段に１つの本文が流れます。HTML側にある連続したpタグが、CSS側で用意した複数段へと、文章が続くように挿入されていく機能も必要でしょう。このような発想でのCSSレイアウト機能だと思います。

実際には使えない話を語っているだけでは、ソフトウェアが完成しません。現実にどうするか、どの機能を使って実現するかを選択しなければなりません。過去にHTMLやCSSを使ってきた経験から、次のように決めました。全体の大まかなレイアウトに限り、複数段の実現では関しては、CSSを使わずに、tableタグを使います。

tableタグによるレイアウトは、HTMLやCSSの機能が貧弱だったときに多用された、古典的なレイアウト実現方法でした。それだけに、ほとんどのブラウザで安定した動きをします。期待を裏切られることは、めったにありません。逆にCSSは、細かな部分でブラウザがサポートしていないとか、困った状況が発生しやすい欠点があります。

実は、もっとも決め手となったのは、ウィンドウを画面いっぱいに広げたときの動きです。業務アプリの場合、そのウィンドウだけを画面いっぱいに広げて使うことが多くあります。そのとき大事なのが、コンテンツが中央に寄るかどうかです。HTMLでは左に寄ることが多く、非常に格好が悪く見えます。当然、アプリの信頼性も低そうに見えます。中央に寄せるのを実現する方法として、CSSを使うと、多くのブラウザで実現するのが難しいのです。tableタグなら、全体の大きさをCSSのwideで指定し、tableタグにalign="center"と指定するだけです。

tableタグでレイアウトといっても、細かな部分にまで使うわけではありません。画面のヘッダー部分、コンテンツの中身となる中央部分、中央分の下部の操作系、一番下の操作系となるフッター部分とい具合に、画面全体を４つに区切り、それぞれtableタグで囲むだけです。操作系は、tableタグ内を左右に分割します。コンテンツ部分は、必要に応じて多段組や上下複数段に分割します。こうした全体のレイアウトにだけ、tableタグを使うというわけです。

レイアウト用のtableタグ以外は、できるだけCSS側で属性を指定し、HTML側に細かな設定を持たないように作ります。CSSの設定も、ヘッダー用、フッター用、コンテンツの中身用、コンテンツ内の操作系用と、完全に４つに分けます。同じ設定なら一箇所で変更可能にとは作らず、使用場所ごとに設定を別にする作りとします。こうするとヘッダーだけ変えたいときに、変更の影響がヘッダー以内には及ばないと予測できます。そうではなく、同じ設定値だから一箇所にと設定値を無理矢理に１つにまとめると、影響の及ぶ範囲が把握しにくくなり、変更の際、困った状況に陥りやすいのです。

さて、ここまでの４回で、Titanium Desktopを使った業務アプリの設計指針がまとまりました。この方針に沿って、あとは実際の設計に進むだけです。といっても、HTMLによる画面の種類で区分けされる構造なので、必要な画面をHTMLで用意して、相互に接続するという形にしかなりませんが。

実際、アプリ自体は一旦完成して、依頼主が試用し始めました。その後、試しにiPad版をTitanium mobileで移植し始めたら、構造が違うので大枠を変えてしまったものの、意外に素早く移植できてしまいました。こちらも依頼主が試用し始めてます。当然ながら、機能はほとんど同じです。もともとiPad版で動かしたいという要望だっただけに、やはりiPad版を気に入ってしまいました。とりあえずiPad版を本番で使い始める準備中で、デスクトップ版は予備として残すという形だそうです。

デスクトップ版もタブレット版も、Titanium Studioで作れるのは非常に便利です。JavaScriptで統一できるのも素晴らしいです。ここではTitanium Desktopとして話を始めてしまったので、当分はデスクトップ版アプリ作りの話を続けたいと思います。