S部

(第2回 / 全3回)超高速開発ツール”Wagby”でサンプルアプリを開発してみる:基本設定編

前回は超高速開発ツール"Wagby"でサンプルアプリを開発するための準備をしました。

www.cycle-g.info

今回は、実際に簡単なアプリケーションを作る手順を確認してみようと思います。

なおこの記事は、超高速開発ツールについて情報収集している人が、Wagbyでどのくらい簡単に・早くアプリケーションを作れるのかを、ざっくりと把握することを目的に読まれることを想定しています。Wagbyについてしっかりと学習したい方はWagby公式サイトのチュートリアルをご覧いただいたほうが良いと思います。

wagby.com

作るもの

家庭用のメッセージボードを作ってみたいと思います。まずはシンプルに、

  • メッセージを投稿する。
  • 投稿されたメッセージを確認する。

の2つの機能を実装したいと思います。

モデルを作る

Wagbyで扱うデータの単位である モデル を作ります。ここでは、掲示板に掲載する 投稿 をモデルとします。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192733.png

model1 というモデルが作成されました。これをいろいろ設定して掲示板を作っていきます。まずは、モデル名を 投稿、モデルIDを Post に変更します。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192724.png

項目を定義する

次に、このモデルの持つ項目を、以下の表のように設定します。

# 項目名 項目ID
1 id id 数値
2 投稿者 posted_by 他モデルの項目参照
3 投稿日時 posted_at 日付・時刻

モデル新規作成時にあらかじめ用意されていた pkey という項目は、最初から主キーとして設定されています。今回はこのpkeyを、項目名だけ id に変えて利用します。

投稿者は、自動的に投稿した人のIDが保存される項目とします。ログインユーザーの情報(IDや氏名など)は、Wagbyであらかじめ用意されているモデルに情報が格納されているので、他モデルの項目参照を選択します。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192744.png

項目の型を指定するリストボックスの隣にあるボタンを押すと、型の詳細を指定できる画面が表示されます。ここで、下の図のように設定します。この設定によって、

  • 投稿モデルの・・・
  • 投稿者という項目は・・・
  • システム標準で用意されているアカウント(juser)というモデルの・・・
  • 名前という項目を参照して・・・
  • 入力するときには検索画面を使う。

という意味の設定になります。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192742.png

投稿日も同様に、型の詳細を指定します。投稿した時刻を表示したいので、日付と時刻を選択します。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192751.png

これらの項目で検索したり、一覧画面に表示させるために、チェックをつけます。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192814.png

ビルドする

この時点ではまだ、モデルとその項目・項目の型しか設定していませんが、この状態でも既にアプリケーションを生成できます。画面上部のメニュー"ビルド“を選択したら、”フルビルド“を選択して、”ビルド実行“ボタンを押すと、ビルドが開始されます。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192659.png

初回(フルビルド)は、やや時間が掛かります。私の環境では約3分でビルドが完了しました。

自動生成されたアプリケーションを確認する

アプリケーション起動ボタンを押して、ビルドされたアプリケーションを起動します。ブラウザを起動して、次のURLにアクセスすると、ログイン画面が表示されます。

http://localhost:8921/wagby/

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192820.png

この荘厳なログイン画面の画像は、あとで変えることにしましょう。

ログイン(id:admin/Pass:admin)するといくつかのタブがあります。業務アプリケーションのパッケージなんかでよく見かける管理機能が、あらかじめ用意されています。

投稿モデルを作ったときには特に何も指定しませんでしたが、サービスタブの中に、投稿検索というボタンが自動的に作られていますので、これをクリックします。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192734.png

投稿の検索画面が表示されますが、もちろん最初は何も投稿されていません。登録画面へボタンを押すと新規登録画面に遷移するので、メッセージを投稿してみます。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192743.png

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192718.png

投稿者欄には何も値が設定されていませんが、本当はログインユーザーが表示されてほしいので、後で設定することにします。保存ボタンを押したらこの投稿が保存されて、詳細表示画面に遷移します。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319201158.png

投稿者投稿日時には何も値が入っていません。ここにも自動で値が入るように、あとで設定することにしましょう。

一覧画面へボタンをクリックすると、一覧表示画面に遷移します。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192749.png

投稿後、詳細画面に一度遷移してから一覧画面に遷移するのはやや冗長な感じがするので、ここも後で変更することにします。 どんどん投稿を追加してみます。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/cycle8b/20170319/20170319192824.png

この一覧画面の表示内容も、あとで変えることにしましょう。 この時点では、ほかにも更新・削除や、コピーして登録する機能がすでに用意されています。

まとめ

今回、モデルとその項目の名前・型を指定しただけですが、登録・更新・検索・一覧の画面が作成されました。また、すでに登録されているデータをコピーして登録する機能や削除する機能も、自動で生成されています。この程度のアプリケーションなら、ほんの数分で非常に簡単に用意できてしまいます。

とはいえ、このままではやや使い勝手が悪いので、次回は値の自動設定・入力値のチェック・画面遷移など、最低限備えておきたい機能を組み込んでみようと思います。