開発者向けコラムの第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に関する開発機能についてお話しします。

開発者向けコラムの第2回です。
Buddyの採用しているライブラリReact.jsがもたらすWEBアプリ開発における効果と、
Buddyのモジュールにおける活用のメリットについてご紹介します。

■第2回　Buddyで解決できるWEB開発における4つの悩みについて

・WEBアプリ開発における課題

WEBアプリはクライアント（ブラウザ）とサーバーの連携・協調によって動作しますが、
快適なアプリ動作を実現するためにはクライアント側とサーバー側の役割分担が常に問題となります。
通信速度が遅い場合も考慮すると、通信量を抑えることが重要です。

そうした課題から、画面表示内容（HTML）を毎回サーバー側で生成して送るのではなく、
クライアント側で操作・更新する方法、＝いわゆるシングルページアプリケーションが生まれました。
ブラウザに組み込まれたJavascript言語で、DOMというインタフェースを利用してHTMLの要素を
操作することで、画面を更新していくわけです。

しかし、DOM操作は決してスピードは早くありません。
多くの要素がある複雑な画面で全体を置き換えるような操作をすると、快適な操作性とはなりません。
そこで、必要な部分だけを更新するような工夫が必要となりますが、要素間の依存関係を適切に処理
しなければならず、大変複雑でメンテナンス性の悪い（いわゆるスパゲッティ化した）プログラム
になりがちです。

・React.jsとは

React.jsは、Facebookが開発したJavascriptライブラリで、このDOM操作の問題を解決します。
Facebookのほか、TwitterやYahooなどでも利用されています。

React.jsの主な特徴はコンポーネントと仮想DOMにあります。

HTMLでは例えば表を作るには<table>の中に各行の<tr>、その中に各セルの<th>や<td>、のように
階層的に構成します。
React.jsではこの考え方を拡張して、必要な要素を「コンポーネント」としてユーザーが自由に定義して、
コンポーネントを階層的に配置することで画面を組み立てます。表示するデータ内容などの動的な部分は、
コンポーネントに対する属性として与えます。
最上位のコンポーネントの属性としてデータを与え、それが下位のコンポーネントに影響する部分があれば
そのコンポーネントの属性として与える、というようにデータも階層的に上から下へ伝わるようにするのが
基本的なやり方です。
こうすれば、画面の構成は階層的なわかりやすい構造となり、各コンポーネントは属性で与えられた
内容を表示することに専念すれば良く、データは属性で与えれば良いので処理もシンプルで、
メンテナンス性も良くなります。

しかし、この仕組みをそのまま実装すると、データの変更があると画面全体を書き換えることになり、
パフォーマンスの問題が生じます。そこでReact.jsではDOMを直接扱うのではなく仮想DOMという
ワンクッションを置いています。仮想DOMに対して操作をおこなうと、実際に更新が必要な部分だけ
DOMの更新操作が行われます。

・BuddyにおけるReact.js

Buddyでは、アプリ一覧、運用管理、開発の各画面や、Buddyで作成されたアプリの画面も含めて、
全面的にReact.jsを採用しています。

Buddyでアプリを作成する場合、ボタンやテキストボックスなどの「モジュール」を配置して画面を作っていきます。
この各モジュールはReact.jsのコンポーネントになっています。React.jsには特有の様々な記法やプログラミング方法
がありますが、Buddyではその部分はモジュールの中に閉じ込められており、ユーザーは意識する必要はありません。

Buddyを使えば、React.jsそのものについて学ぶことなく、React.jsを利用したWEBアプリを開発できるわけです。

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

次回は、第1回であげた課題「開発の自由度が低い…」に対応した内容として、
「Buddyにおけるリレーショナルデータベース構築」についてご紹介したいと思います。
ご期待ください。

それでは皆様、良いお年を！