【速報】Forguncy Proに触ってみた連載:「○○してみた」日記

2015年2月にリリースされた直後のForguncy Proを使用して、外部データベース接続とカスタムJavaScriptがどんなものかを試してみた。

» 2015年02月18日 15時23分 公開
[かわさきしんじInsider.NET編集部]
連載:「○○してみた」日記
Insider.NET

 

「連載:「○○してみた」日記」のインデックス

連載目次

 本サイトでも以前に取り上げたForguncyの上位バージョンとなる「Forguncy Pro」が2015年2月16日にグレープシティ株式会社からリリースされた(同時に、Forguncy Update 1もリリースされている)。 本稿では、リリースされたばかりのForguncy Proを実際に使ってみて、追加された新機能などについて簡単なリポートをお届けする。詳しい記事は、後日、あらためてお届けする予定だ。

Forguncy Proの追加機能

 Forguncy Proに追加された機能は、主に次の二つだ。

  • 外部データベースへの接続
  • カスタムJavaScriptの利用

 加えて、ワークフロー機能を持ったWebアプリの開発もサポートされている。これについてはForguncy Update 1でも使えるようだ。速報となる本稿では、この二つの機能を簡単に紹介することにしよう。

外部データベースへの接続

 Forguncy Proで接続がサポートされるのはSQL ServerとOracle Databaseの二つだ。ただし、後者については読み取り専用のアクセスとなり(Forguncy Proリリース時点)、また、事前にOracle Database Clientをインストールしておく必要がある。

 ここでは例として、Forguncy ProからSQL Server 2012 Expressへ接続をしてみる。まずは、空の[空のテンプレート]を使用して、アプリを新規に作成する。次に、リボンの[データ]タブにある[リンクテーブルの作成]ボタンをクリックする。

リボンの[データ]タブにある[リンクテーブルの作成]ボタンをクリックする リボンの[データ]タブにある[リンクテーブルの作成]ボタンをクリックする
隣にある[外部データベースの接続変更]ボタンは、開発時に使用したテストデータベースから、アプリの運用時に使用するデータベースへの切り替えを行うために使用する。リンクテーブルを初めて作成するときには[データソースの変更]ダイアログが表示されるので、ここで[Microsoft SQL Server]か[Oracleデータベース]のいずれかを選択する。

 [リンクテーブルの作成]ボタンをクリックし、[接続設定]ダイアログで接続先のサーバーとデータベースを指定して[OK]ボタンをクリックすると、データベースへの接続が行われ、[テーブルの選択]ダイアログが表示される。このダイアログでテーブルを選択して[OK]ボタンをクリックすると、Forguncy Proの[ナビゲーションウィンドウ]にある[テーブル]タブにテーブルが作成される。

テーブルの選択
テーブルの選択 テーブルの選択
利用するテーブルを選択して[OK]ボタンをクリックすると、そのテーブルがForguncy Pro内にリンクテーブルとして作成される。ここではありがちなOrdersとOrder Detailsの二つのテーブルを選択した。

 上記画面の[Order Details]テーブルを見ると、[OrderID]列によって[Orders]テーブルとの関連付けがすでにできていることが分かる。便利だ(ただし、後からリンクテーブルを追加した場合には、テーブル間の関連付けは手動で行う必要がある)。

 以下は、この二つのテーブルを使ってマスター/詳細画面を作成してみたところだ。

マスター/詳細画面
マスター/詳細画面 マスター/詳細画面
上: アプリの設計画面。
下: そのデバッグ実行画面。

 ナビゲーションウィンドウを見ると、何気にテーブルが増えている。表示項目が「〜ID」ばっかりになることに気が付いたので、慌ててテーブルを追加したことがうかがえる。といっても、鼻歌混じりに[リンクテーブルの作成]ボタンをクリックして、テーブルを追加したら、テーブルの関連付けをマウスで設定するだけなので、その操作感はかなりお手軽だ。

 このように、外部データベース接続機能を使うと、とても簡単に既存の社内データベースに接続して、そこに格納されているデータを利用したWebアプリを開発できるだろう。

カスタムJavaScript

 カスタムJavaScriptは、Forguncy Proが提供する標準機能では行えない処理を実現したり、独自処理を追加したりするのに使える。このためにForguncy Proでは以下の二つのAPIが提供されている。

  • JavaScript API: Forguncy Proのページ/リストビュー/セルの三つのオブジェクトを操作するのに使用する
  • Web API: Forguncyの内部データベースに対するCRUD操作を行うのに使用する

 例えば、以下のようなWebアプリがあったときに、[名前]と[電話番号]の二つのテキストボックスの両者にデータが入力されていないときには、[追加]ボタンを無効化したいものとする。

電話帳アプリ 電話帳アプリ

 この場合には、例えば以下のようなJavaScriptコードを記述して、これをこのページと関連付ける。

var p = Forguncy.Page;
var name = p.getCell("name");
var phoneNumber = p.getCell("phoneNumber");
var addButton = p.getCell("addButton");

p.ready(function() {
  function checkNameAndPhoneNum()
  {
    if (!name.getValue() || !phoneNumber.getValue())
    {
      addButton.disable();
    } else {
      addButton.enable();
    }
  }

  name.bind("valuechanged", function() {
    checkNameAndPhoneNum();
  });

  phoneNumber.bind("valuechanged", function() {
    checkNameAndPhoneNum();
  });

});

名前と電話番号が入っていないと[追加]ボタンをクリックできないようにする

 細かな説明は省略するが、JavaScriptでページ上のセルを扱うには、適切な名前をセルに付けて、それをJavaScriptコードからはgetCell関数やgetListView関数を使って取得する。また、ページ全体はForguncy.Pageオブジェクトとして参照できる。

 ここでは、[名前]テキストボックス(name変数で参照)と[電話番号]テキストボックス(phoneNumber変数で参照)の値が空文字列であれば、[追加]ボタン(addButton変数で参照)をdisable関数で無効化し、そうでなければenable関数で有効化しているだけだ。

 このコードに「addressBook.js」などと名前を付けて保存する。次に、右ペインの[ページ設定]タブにある[カスタムJavaScript]欄でフォルダーの形をしたアイコンをクリックして、このファイルを選択する。

JavaScriptコードをページに関連付けた JavaScriptコードをページに関連付けた

 その後、このアプリを実行すると、JavaScriptがうまく働いてくれるようになる。

[電話番号]テキストボックスに入力されていないので[追加]ボタンが無効化されている [電話番号]テキストボックスに入力されていないので[追加]ボタンが無効化されている

 このように、JavaScriptを使うことで、ちょっと気の利いた動作を実現できるようになる。なお、「Web APIとか、なんであるの? 必要なの?」などと当初は思ったのだが、思うにこれはForguncyのデータ連結機能を使わずに(つまり、ボタンがクリックされたときのコマンドの編集をGUIで行うのではなく)、JavaScriptでForguncyの内部テーブルを直接利用できるようにするためだ。JavaScriptで処理を一本化できると気持ちがよいし、見通しもよくなるという人には、Web APIが提供されているのはうれしいことだといえる。これについては、別途、記事で詳しく触れたい。


 この他にも、冒頭で述べたワークフローなど、興味深い機能がForguncy Pro(とForguncy Update 1)では提供されている。これらについては「なるはや」で記事を公開できるようにするつもりだ。

「連載:「○○してみた」日記」のインデックス

連載:「○○してみた」日記

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。