第1回 Forguncy 3に触ってみよう連載:Forguncy 3でカンタンWebアプリ開発(5/5 ページ)

» 2017年11月10日 05時00分 公開
前のページへ 1|2|3|4|5       

セル型のコマンドの編集

 作業スペースでボタンが選択されていなければ、これをクリックして選択し、右ペインの[セル型]タブを表示する。

[セル型]タブ [セル型]タブ

 このタブではセル型の種類に応じた設定可能項目が表示される。ボタンの場合は[コマンド]リンク、[テキスト]テキストボックス、ボタンの有効/無効を切り替える[無効]チェックボックス、ボタンの表示/非表示を切り替える[非表示]チェックボックス、[ページの既定のボタンにする]チェックボックスだ。画像では一番上にある[CSSのクラス名]はForguncy 3 Builder Proにはあるが、Basicにはない。ここでCSSのクラス名を指定すると、独自にページのカスタマイズを行う際に、CSSを使ってその見た目を指定できる(これについては「バーコード作成/モバイルデバイス対応もカンタン! さらに高度な機能まで、Forguncy 3の充実機能を見てみよう」を参照されたい)。

 ここで[コマンド]リンクをクリックすると、このボタンがクリックされたときに実行されるコマンドを編集できる。例えば、ページの遷移を行ったり、テーブルに対してクエリを実行したりといったことが可能だ。[テキスト]にはこのボタンのキャプションを入力する。[ページの既定のボタンにする]チェックボックスにチェックを入れると、このボタンが既定のボタンとなり、[Enter]キーを押すだけでこのボタンに設定されたコマンドが実行されるようになる。

 では、設定を行おう。[コマンド]リンクをクリックすると、[コマンド]ダイアログが表示される。

[コマンド]ダイアログ [コマンド]ダイアログ

 [コマンドの選択]ドロップダウンから実行するコマンドを選択し、さらにその実行に必要な情報を付加していくのが、[コマンド]ダイアログで行うことだ。ここでは「ページ2」へ遷移するので、そのように設定を行う。

ページ遷移の設定 ページ遷移の設定

 これには[コマンドの選択]ドロップダウンで[ページ遷移]を選択し、[Forguncy内のページ]から[ページ2]を選択すればよい。最後に[OK]ボタンをクリックすれば、ページ遷移の設定は終了だ。

 [テキスト]テキストボックスには「Hello」と入力しておこう。

 同様にして、「ページ2」でもボタンを作成し、その[コマンドの選択]で[ページ遷移]を選択し、[Forguncy内のページ]から[ページ1]を選択しておこう。[テキスト]テキストボックスには「World」と入力しておく。

「ページ2」の設定 「ページ2」の設定

アプリのデバッグ実行

 これで設定が完了したかというと、実はそうでもない。だが、ここで一度、アプリを実行してみよう。アプリを実行するには[ホーム]タブにある[開始]ボタンをクリックするか、クイックアクセスツールバーにある緑色の三角のボタン(これも[開始]ボタン)をクリックする。複数のWebブラウザがインストールされている場合は、実行するブラウザを指定できる。これにより、開発用サーバでアプリが実行される。

デバッグ実行の開始 デバッグ実行の開始
緑色の三角形をクリックすればデフォルトのWebブラウザで実行が開始される。その下の小さな下向き矢印をクリックすれば、実行するWebブラウザを指定可能だ。

 実行画面を以下に示す。ライセンス認証をしていない場合には「このアプリケーションは評価版のForguncy Builderで作成されています。継続的な利用には、製品版のライセンスが必要です」といったメッセージが表示される(以下はライセンス認証済みなので表示されていない)。

[World]ボタンをクリック
[World]ボタンをクリック
ページ1が表示される
ページ1が表示される

初めてのForguncy 3アプリの実行画面
なぜか「ページ2」が最初に表示されてしまっているが、ボタンをクリックしたときの動作は正しい。


 それから、「ページ2」が最初に表示されてしまっている。が、[World]ボタンをクリックすれば、「ページ1」が表示され、[Hello]ボタンをクリックすれば、「ページ2」が表示されることは確認できる。

 なぜ「ページ2」が最初に表示されたかというと、アプリ起動時に表示するページを設定していないからだ。取りあえず、Webブラウザを終了してForguncy 3 Builderの画面に戻ろう。

 その後、作業スペースで[ページ1]にタブを切り替えて、右ペインから[ページ設定]タブを選択する。下の方に[スタートページに設定する]チェックボックスがあるので、これにチェックを入れればよい。

「ページ1」をスタートページにする 「ページ1」をスタートページにする

 あるいは[ファイル]タブで[オプション]を選択すると表示されるBackstageビューで、[アプリケーション設定]タブを選択して、[スタートページ]から[ページ1]を選んでもよい。

Backstageビューでスタートページを指定する Backstageビューでスタートページを指定する

 この設定を行えば、「ページ1」がアプリ起動時に最初に表示されるようになるはずだ。

発行

 これでこのアプリは一応の完成である。最後に、Forguncy 3 Serverにこれを発行してみよう。Forguncy 3 Serverへアプリを発行するには、Forguncy 3 Builderの[発行]タブにある[サーバー]ボタンをクリックする。すると、以下のような画面が表示される。

[サーバーへ発行]ダイアログ [サーバーへ発行]ダイアログ

 ここでは発行先のForguncy 3 Server、アクセスに必要なユーザー名とパスワード、アプリケーションパスを指定する必要がある。本稿ではユーザーを作成していないので、Administratorとしてアクセスをする。AdministratorのパスワードはForguncy 3のドキュメント「アプリケーションを発行する」以下に記載されているので、そちらを参照されたい。また、Forguncy 3 Serverは開発マシンにインストールしたので、[サーバー]には「localhost」を指定した。[アプリケーションパス]は「HelloWorld」とした。なお、作成したWebアプリの実行に当たっては、ファイアウォールの設定を行う必要があるかもしれない。このときには前述の「アプリケーションを発行する」を参考に設定をしてほしい。

発行先のサーバなどの情報を指定したところ 発行先のサーバなどの情報を指定したところ

 以上の情報を設定したら、[接続の確認]ボタンをクリックしよう。問題なければ[正常に接続しました]とメッセージが表示されるはずだ。接続を確認できたら[OK]ボタンをクリックして、アプリを発行する。

 発行が終わるまでしばらく待つと、自動的にアプリが起動する。これは開発用サーバではなく、Forguncy 3 Serverでホストされている。

 このようにForguncy 3 Serverに発行したアプリへは別のマシンからもWebブラウザを経由してアクセスが可能だ。

 Webアプリを開発し、それを発行するまでの手順は以上のようになる。

 Forguncy 3のドキュメント「アプリケーションを作成してみよう」にもアプリを開発するためのチュートリアルが掲載されているので、Forguncy 3でのWebアプリ開発に興味が湧いた方は、これを参考にもう少し突っ込んだアプリ開発の方法を勉強してみてもよいだろう。


 今回はForguncy 3の概要と、その画面構成、基本的なWebアプリの開発とその発行までをざっくりと見た。次回はテーブルを作成し、そのデータを読み書きするWebアプリを作成しながら、Forguncy 3についてさらに深く見ていくことにしよう。

「連載:Forguncy 3でカンタンWebアプリ開発」のインデックス

連載:Forguncy 3でカンタンWebアプリ開発

前のページへ 1|2|3|4|5       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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