デモアプリのデザインを一新しました。

■新規追加
・在庫管理

■デザイン変更
・全デモアプリ

より見やすく、使いやすくなったデモアプリをぜひ体験してください！

＞デモアプリ

開発者向けコラムの第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ならではのアプローチで、解決への糸口をサポートします！
※頂戴したお悩みは本コラムに匿名にて紹介させて頂く場合があります。

開発者向けコラムの第3回です。
遅ればせながら、本年もどうぞよろしくお願いいたします。

今回は本格的なアプリ開発には欠かせないリレーショナルデータベースの設計機能と、
安全に運用するための機能についてご紹介します。

■第3回　Buddyにおけるリレーショナルデータベースの設計と運用

多くの場合アプリの動作にはデータを保持するためのデータベースが欠かせません。
Buddyでは代表的なリレーショナルデータベースシステムの一つである「PostgreSQL」を使用
しており、アプリを作成すると自動的にそのアプリ用のデータベースがデバッグ用と本番用に
用意されます。

・ビューの活用

　リレーショナルデータベースでは、テーブルにデータを格納します。
テーブルは一件ずつのデータと対応するレコード（行）と、データの各項目となるカラム（列）
からなります。Excelのシートのようなものを思い浮かべればわかりやすいでしょう。

　単純なアプリ、例えばアドレス帳のようなものであれば一つのテーブルでも作ることができます。
しかし、例えば納品管理アプリであれば、納品、納品詳細、商品、社員、取引先、といったテーブル
を組み合わせて作成する必要があるでしょう。納品詳細にはどの商品コードの商品をいくつ納品したか
があり、それを商品テーブルと結びつけて商品名や単価を得て、単価×数量を計算する、
といった処理が必要となります。

　リレーショナルデータベースには、テーブル同士を結合したり、値を計算・加工したりする処理を
データベース側で行ってくれる「ビュー」という仕組みが用意されています。
本格的なアプリを作成する上で欠かせない機能と言えるでしょう。
Buddyにはこのビューを設計するためのGUIを用意しており、より直感的に組み立て、利用すること
ができます。

　また設計したビューを元に、複合的な情報を扱えるアプリのスクリーン（UI）を作成することも
できます。こちらについては次回のコラムでご紹介したいと思います。

・安全なSQL操作

　リレーショナルデータベースはSQLという言語でデータの読み書きなどの操作を行います。
アプリでデータベースを使用する際には、アプリで使用する言語（Buddyの場合はJavascript）と
SQLとの間でデータの受け渡しを適切におこなう必要があります。

　例えばユーザーが入力したデータをデータベースに格納する際には、insertやupdateという
SQLの命令文を組み立ててその中にデータを埋め込むことになりますが、その処理が正しくないと
悪意あるユーザーがデータを壊すような操作ができてしまう（SQLインジェクションという）
セキュリティ上の問題につながります。　

　Buddyではデータベース操作でSQL言語を直接扱うのでなく、用意されたAPIにJavascriptの
オブジェクトでデータ等を与える方法で行い、SQLの組み立ては内部で適切に行われるように
なっています。SQL言語の関数などを含む式を直接指定する場合もありますが、その場合も
式の内容が適切なものかチェックされます。
これにより、SQL言語の詳細を知らなくても安全にデータベース操作ができるようになっています。

・不整合を防ぐトランザクション

　データベースでもっとも重要なのが、データの不整合を起こさないことです。
同時に複数のユーザーが使用し、ブラウザが突然閉じられることも考えられるWebアプリであれば、
操作の競合や中断が起こることを考えておかねばなりません。

　例えば在庫処理のアプリであれば、競合や中断があっても在庫数と出荷数は必ず整合性が
保たれる必要があります。リレーショナルデータベースにはそのために、一連の処理の全体が成功するか、
さもなければ全体がなかったことになるかという、トランザクションという仕組みが用意されています。

　Buddyではクライアント（ブラウザ）側から一つ一つのデータベース処理を行うことはもちろん、
サーバー側でまとめてデータベース処理を行い、その中でトランザクションを利用することも可能です。
これによって、データの不整合を起こさない堅牢なアプリを作成することができます。

いかがだったでしょうか？

次回は、ビューにも対応したテンプレートや、自由なweb表現が可能なスクリーンテーマ編集機能など
UIに関する開発機能についてお話しします。