近年、さまざまなメディアで”超高速開発ツール“についての特集が組まれていることが多いようです。ローコード開発とか、ノンコーディング開発とか、高速開発に近しい概念・言葉もあるようです。
やはり”DX”や”攻めのIT”のような分野への投資にシフトするための原資を作るために、『SoR型のシステムは安価に人手を掛けずに、だけど事業の開始や変化のスピードに対応したい』・・・みたいなニーズが大きくなっているのでしょうか。
こうした記事では”超高速開発ツール”というカテゴリについての概要の解説や、ツールを利用したときの生産性の高さ、導入事例の紹介などの記事が多いようですが、実際にツールを使ってWebアプリケーションを開発してみる・・・というような記事は、私が調べたところ、かなり少ないように思います。
こういった記事は、導入を検討しているシステム部員の方にとって、実際のところ自分たちがどう操作して、どんな場面で使えるのか？どのくらい高速なのか？がわかりづらいです。
『60%工数を圧縮できる』だとか『開発期間を1/3にする』みたいな話は、数字は具体的ですが、どんな前提で何を測定したのか、正直眉唾モノですし、そもそも提案してきたベンダーの話を鵜呑みにするわけにはいきません。
とはいえ、自分で試用版をダウンロードして一から試すのはかなり大変です。公式サイトにあるマニュアルの分量はかなり多くて、読むだけで相当な時間がかかります。
というわけで今回は、超高速開発ツールの”Wagby“を使って、ごくごくシンプルなサンプルアプリケーションを作ってみる手順をご紹介したいと思います。
なおこの記事は、超高速開発ツールについて情報収集している人が、Wagbyでどのくらい簡単に・早くアプリケーションを作れるのか？を、ざっくりと把握することを目的に読まれることを想定しています。Wagbyについてしっかりと学習したい方はWagby公式サイトのチュートリアルをご覧いただいたほうが良いですよ。
Wagbyってどんなツール？
Wagby (ワグビィ) は Web ベースのエンタープライズアプリケーションをノンプログラミングで超高速に開発するツールです。設計情報から業務ルール、画面、データベーススキーマなど、すべてを自動生成します。
詳細設計から単体テストまでの工数を大幅に削減することに加え、実際に動作するシステムを使ってレビューすることで、要件の修正もすぐに反映できるようになります。（https://wagby.com/index.html より抜粋）
超高速開発ツールと言っても、その守備範囲は製品によって様々です。Wagbyはその中でも、特にWebアプリケーションの詳細設計から単体テストの領域を『超高速開発』することを得意とするツールとして、開発元のジャスミンソフト社では定義しているようです。
準備
インストールガイドを確認しながら、開発環境を準備します。
開発用のPC
今回、次のようなPCを使いました。
- OS: Windows10 Home 64bit
- CPU: Core i5-3317U(1.70GHz)
- メモリ: 8GB
- SSD: 40GB + HDD 300GB
推奨スペックは満たしているようです。SSDの容量は心許ないですが、ビルドの速さが段違いなので、WagbyはSSDにインストールします。
Javaのインストール
JDK
JDKをダウンロードしてインストーラを起動。[次へ]ボタンをポチポチ押してインストールします。このときインストールしたバージョンは[1.8.0.121]でした。
環境変数
環境変数を設定します。（[JAVA_HOME]&[Path]）
コンソールから、javaとjavacにパスが通っているか確認します。間違ってjreをインストールしてると、「javacがないよ」的なメッセージが表示されると思いますよ。
Wagbyのインストール
インストール
トライアルキットが無料でダウンロードできます。有効期間は1年で、設定できる項目数に制限がありますが、いくつかの制約がありますが、少し試してみる分には十分でしょう。
インストーラ形式とZIPファイル形式のものがダウンロードできるようです。今回はZIPファイル形式のものを使います。2017-03-10時点の最新版のバージョンは[7.10.2]でした。
ダウンロードしたら、ZIPファイルを任意のフォルダに展開します。（今回は、SSDのドライブに展開しました。）
WagbyDesignerの動作確認
展開した[wagbydesigner\bin\startup.bat]を実行すると、コンソールが起動します。しばらく待ってからブラウザを起動して、以下のURLにアクセスすると、wagby designerのログイン画面が表示されます。
以上、割と簡単に開発環境の準備ができました。非エンジニアの方が扱うときには、JAVAのパスのあたりで躓きがちかもしれませんね。
基本設定
仕様を決める
https://railstutorial.jp/の真似・・・という訳じゃないですが、まずは、シンプルな家庭用のメッセージボードを作ってみたいと思います。 こんな感じの機能を作ってみます。
- メッセージを投稿する。
- 投稿されたメッセージを確認する。
「モデル」を作る
Wagbyで扱うデータの単位である モデル を作ります。モデルって何かっていうと、とりあえずは、エンティティと同義だと思ってもらえれば十分です。今回は、掲示板に掲載する 投稿 モデルを、最初に作ります。
「新規モデル」を選択すると、、、
model1 というモデルが作成されました。コレをいろいろ設定して、掲示板を作っていきます。まずは、モデル名を 投稿、モデルIDを Post に変更します。
項目を定義する
次に、このモデルの持つ項目を定義します。こんな感じ。
| # | 項目名 | 項目ID | 型 |
|---|---|---|---|
| 1 | id | id | 数値 |
| 2 | 投稿者 | posted_by | 他モデルの項目参照 |
| 3 | 投稿日時 | posted_at | 日付・時刻 |
モデル新規作成時にあらかじめ用意されていた pkey という項目は、最初から主キーとして設定されています。今回はこのpkeyという項目名を id に変えて利用します。
投稿者は、投稿した人のIDが 自動的に保存される項目とします。ログインユーザーの情報(IDや氏名など)は、Wagbyであらかじめ用意されているモデルに情報が格納されているので、データの型は「他モデルの項目参照」を選択します。
項目の「型」を指定するリストボックスの隣にあるボタンを押すと、型の詳細を指定できる画面が表示されます。ここでは、下の図のように設定します。この設定によって、
- 投稿モデルの・・・
- 投稿者という項目は・・・
- システム標準で用意されているアカウント(juser)というモデルの・・・
- 名前という項目を参照して・・・
- 入力するときには検索画面を使う。
という意味の設定になります。
投稿日も同様に、型の詳細を指定します。投稿した時刻を表示したいので、日付と時刻を選択します。
これらの項目で検索したり、一覧画面に表示させるために、チェックをつけます。
ビルドする
この時点ではまだ、モデルとその項目・項目の型しか設定していませんが、この状態でも既にアプリケーションを生成できます。画面上部のメニュー”ビルド“を選択したら、”フルビルド“を選択して、”ビルド実行“ボタンを押すと、ビルドが開始されます。
初回(フルビルド)は、やや時間が掛かります。私の環境では約3分でビルドが完了しました。
自動生成されたアプリケーションを確認する
アプリケーション起動ボタンを押して、ビルドされたアプリケーションを起動します。ブラウザを起動して、次のURLにアクセスすると、ログイン画面が表示されます。
http://localhost:8921/wagby/
この荘厳なログイン画面の画像は、あとで変えることにしましょう。
ログイン(id:admin/Pass:admin)するといくつかのタブがあります。業務アプリケーションのパッケージなんかでよく見かける管理機能が、あらかじめ用意されています。
投稿モデルを作ったときには特に何も指定しませんでしたが、サービスタブの中に、投稿検索というボタンが自動的に作られていますので、これをクリックします。
投稿の検索画面が表示されますが、もちろん最初は何も投稿されていません。登録画面へボタンを押すと新規登録画面に遷移するので、メッセージを投稿してみます。
投稿者欄には何も値が設定されていませんが、本当はログインユーザーが表示されてほしいので、後で設定することにします。保存ボタンを押したらこの投稿が保存されて、詳細表示画面に遷移します。
投稿者と投稿日時には何も値が入っていません。ここにも自動で値が入るように、あとで設定することにしましょう。
一覧画面へボタンをクリックすると、一覧表示画面に遷移します。
投稿後、詳細画面に一度遷移してから一覧画面に遷移するのはやや冗長な感じがするので、ここも後で変更することにします。どんどん投稿を追加してみます。
この一覧画面の表示内容も、あとで変えることにしましょう。この時点では、ほかにも更新・削除や、コピーして登録する機能がすでに用意されています。
ここまででは、まだモデルとその項目の名前・型を指定しただけですが、登録・更新・検索・一覧の画面が作成されました。また、すでに登録されているデータを元にしてコピー＆登録する機能や削除する機能も自動で生成されています。この程度のアプリケーションなら、ほんの数分で非常に簡単に用意できてしまいます。
とはいえ、このままでは、さすがに使い勝手が悪いので、値の自動設定・入力値のチェック・画面遷移など、最低限備えておきたい機能を組み込んでみようと思います。
詳細設定
メニューの色・文字を変える
モデルを新たに作成した時点で、自動的にメニューにボタンが用意されてました。このボタンの色あいが割とキツめだったので、程良く淡い色あいにします。
いらない要素を消す
画面の遷移や機能をシンプルにするために、使わないボタンは消すことにします。
登録画面には、検索・一覧画面からしか遷移できないようにします。初期状態では、詳細表示画面からも遷移できるようにボタンが配置されているので、これを消します。また、コピー登録ボタンと削除ボタンも使わないので消してしまいます。
たくさん項目がある画面ならともかく、どうせメッセージしか入力しないので、新規登録画面にある”全クリア”ボタンも消してしまいます。
更新画面にも”全クリア”ボタンがあるので、同様に消してしまいます。
初期状態では検索画面と一覧画面が分かれていますが、ここでは同じ１つの画面に表示させます。
自動で値が入力されるようにする
投稿者
投稿者の項目には、もちろんログインユーザーが設定されてほしいので、次の通り設定します。
また、新規登録画面では投稿者を表示する必要がないので非表示にします。また、更新画面で変更できないように、読み取り専用にします。
投稿日時
投稿日時は、投稿した日時を自動で設定します。ここでは、投稿を更新したときにも投稿日時が更新されるものとします。
入力できる文字数を制限する
コメントに入力できるのは200文字まで ということにします。
検索・一覧画面
項目の並び順を変える
一覧画面には、左から
- 投稿日時
- 投稿者
- メッセージ
の順に表示させるようにします。
列の表示幅を指定する
このままでは、メッセージの長さによって一覧画面の列の幅が変わってしまい、みためがあまりよくないので、左から10%, 15%, 15%, 60%で表示させます。設定したい項目を選択して”一括設定”ボタンを押すと、複数の項目を一括で設定できます。
表示順を指定する
新しい投稿が上に表示されるよう、投稿日時でソートされるようにします。
投稿したら、[詳細表示画面]ではなく[一覧画面]に遷移する
初期状態では、登録画面でデータを保存すると、そのデータの詳細表示画面に遷移します。ここでは、この画面遷移は冗長なので、登録後はすぐに検索・一覧画面に遷移させます。
画面と実行されるタイミングを指定してスクリプトを記述できるので、ここでは登録画面で登録が実行されたら、一覧画面にリダイレクトするスクリプトを記述します。
ログイン画面の背景を変える
シンプルな背景に変更します。所定のフォルダに、所定のファイル名で背景に表示する画像を配置することで、ビルド時にログイン画面の背景として利用されます。
ビルドして動作を確認する
ログイン画面を表示すると、背景が置き換えた画像に変わりました。
メニュー画面のボタンが、指定した色に変わっています。
検索画面と一覧画面が同時に表示されています。また、一覧の項目の順序・幅も指定されたものになっています。元々表示されていたボタンは消えて、”登録画面へ”ボタンだけが表示されています。
メッセージだけが表示されている、シンプルな登録画面になりました。
保存ボタンを押すと、詳細画面を経由せずに、検索・一覧画面に遷移しました。
詳細画面では、登録画面には表示されていなかった投稿者と投稿日時に、自動で値が設定されていることを確認できます。
次回
以上、簡単な操作で、いろいろな設定ができることを確認できたかと思います。このほかにも様々な設定ができるので、より詳しい内容はWagbyチュートリアルを試してみたり、オンラインマニュアルを確認してください。
基本的な設定についての解説は以上で終了として、次回からは少し変わった使い方をご紹介したいと思います。
コメント