開発者向けコラムの第4回です。
今回はwebアプリ開発ツールのご利用においてよく聞かれるUIに関するお悩みを解決する、
BuddyのUI－スクリーン開発機能についてご紹介します。
■第4回 スピーディで自由度の高いBuddyのUI開発
・画面の細部までカスタマイズ可能
Buddyのスクリーン作成は、他の多くの開発ツールと同様にモジュールと呼ばれる機能パーツを
画面内に設置することで作成します。
ただしこれらのパーツは体裁や見た目が決まっていることが多く、開発者やユーザーは利用する
開発ツールの文化に合わせる必要があり、手軽さと窮屈さがトレードオフになっていました。
Buddyではこの点を考慮し、画面全体から各モジュールに至るまで、CSSをベースに
大きさ・形・色などを細かく設定することができます。
また独自の配置ボックス（横配置、縦配置、自由配置、グリッド）機能により、web特有の
左上詰めレイアウトにも縛られない自由度の高いレイアウトが可能となっています。
・スクリーンテーマ編集でお気に入りのデザインを共有できる
デザインを細かく設定できるといっても、各モジュールに一つ一つ設定するのはとても面倒な作業
になってしまいます。
Buddyではデザインを一括して扱えるスクリーンテーマという機能を用意しています。
ユーザーは自由なクラス名について、そのCSSデザインを自由に設定できます。あとは画面に
配置したモジュールに対してクラス名を指定すれば良いだけです。スクリーンテーマでデザインを
変更すれば、クラス名に対応して自動的に各モジュールに変更が適用されるので、効率がグンと上がります。
またスクリーンテーマでは画面のヘッダー部分などのモジュール以外の要素についても、調整可能です。
Buddyではデフォルトの画面ヘッダが用意されていますが、これを非表示にして画面全体を
自由にデザインするといったこともできます。
作成したスクリーンテーマはファイルとして書き出し、読み込みができるので、お気に入りのテーマを
共有・転用する、コーポレートカラーに合わせたテーマに統一するなども簡単におこなえます。
・ビューにも対応、複雑な構成のDB向けのUIも簡単に作れる
Buddyには登録、閲覧、検索など、データベースの読み書きについての基本的な機能を持った画面を
自動で作れるテンプレートを用意しています。
いくつかの項目内容を設定するだけでスクリーンをが自動作成され、自分でモジュールを配置したり
スクリプトを書く必要はありません。テンプレートで自動生成された画面についても、デザインを調整したり、
スクリプトを編集して機能を調整したり、カスタマイズすることも可能です。
閲覧や検索のテンプレートは前回のコラムで紹介したビューにも対応しています。また登録や閲覧では、
データベースのテーブルに一対多の親子関係があるような場合にも、それを適切に読み書きできる画面
を生成できるテンプレートも用意されています。
・自由な描画表現を可能にするキャンバス機能
よりグラフィカルな表現が必要な場合のために、Buddyではキャンバスモジュールを用意しています。
たとえばグラフやガントチャートを使った入力UI、またはペイントのようなお絵描きアプリなど、
アプリに求める自由な発想をキャンバスモジュールがサポートします。・レスポンシブデザイン
・レスポンシブデザイン
PCやスマホ、タブレット…、様々なデバイスで利用できるのがWebアプリのメリットです。
画面幅に対応してデザインを調整するレスポンシブデザインはモダンなアプリでは必須の機能と言えるでしょう。
Buddyでは、上でご紹介した画面テンプレートで作成した画面は自動的にレスポンシブとなっています。
また自分で画面を作成する場合にもレスポンシブデザインを支援する機能があります。
例えば、画面幅が指定の値よりも狭い時には別の画面を代わりに表示する機能。通常は縦横の表配置で
表示されるグリッドが、画面幅が狭いときは縦一列に表示される機能。複数のグリッドを配置して、
画面幅が狭い時は、それらが指定の順序で縦一列に表示される機能、などがあります。
次回はBuddy初のメジャーアップデート、「バージョン2.0」の内容について、
いち早く紹介させていただきます。
どうぞご期待ください！
－－－－－－－－－－－－－－－－－－－－－－－－－－
★WEBアプリ開発に関するお悩みを募集しています！
作り方がわからない、今お使いの開発ツールに関するお悩みなど、WEBアプリ開発に関わる
貴方のお悩みを聞かせてください。
Buddyならではのアプローチで、解決への糸口をサポートします！
※頂戴したお悩みは本コラムに匿名にて紹介させて頂く場合があります。
