S部

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

前回は"投稿"モデルの作成・項目や項目の型を設定しただけで、アプリケーションが生成されることを確認しました。

www.cycle-g.info

ここまでは、まだ詳細な設定をしていないので、今回はさらにいくつかの設定を加えてみます。

メニューの色・文字を変える

モデルを新たに作成した時点で、自動的にメニューにボタンが用意されてました。このボタンの色あいが割とキツめだったので、程良く淡い色あいにします。

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

いらない要素を消す

画面の遷移や機能をシンプルにするために、使わないボタンは消すことにします。

登録画面には、検索・一覧画面からしか遷移できないようにします。初期状態では、詳細表示画面からも遷移できるようにボタンが配置されているので、これを消します。また、コピー登録ボタンと削除ボタンも使わないので消してしまいます。

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

たくさん項目がある画面ならともかく、どうせメッセージしか入力しないので、新規登録画面にある"全クリア"ボタンも消してしまいます。

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

更新画面にも"全クリア"ボタンがあるので、同様に消してしまいます。

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

初期状態では検索画面と一覧画面が分かれていますが、ここでは同じ1つの画面に表示させます。

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

自動で値が入力されるようにする

投稿者

投稿者の項目には、もちろんログインユーザーが設定されてほしいので、次の通り設定します。

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

また、新規登録画面では投稿者を表示する必要がないので非表示にします。また、更新画面で変更できないように、読み取り専用にします。

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

投稿日時

投稿日時は、投稿した日時を自動で設定します。ここでは、投稿を更新したときにも投稿日時が更新されるものとします。

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

入力できる文字数を制限する

コメントに入力できるのは200文字まで ということにします。

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

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

検索・一覧画面

項目の並び順を変える

一覧画面には、左から * 投稿日時 * 投稿者 * メッセージ の順に表示させるようにします。

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

列の表示幅を指定する

このままでは、メッセージの長さによって一覧画面の列の幅が変わってしまい、みためがあまりよくないので、左から10%, 15%, 15%, 60%で表示させます。設定したい項目を選択して"一括設定"ボタンを押すと、複数の項目を一括で設定できます。

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

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

表示順を指定する

新しい投稿が上に表示されるよう、投稿日時でソートされるようにします。

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

投稿したら、[詳細表示画面]ではなく[一覧画面]に遷移する

初期状態では、登録画面でデータを保存すると、そのデータの詳細表示画面に遷移します。ここでは、この画面遷移は冗長なので、登録後はすぐに検索・一覧画面に遷移させます。

画面実行されるタイミングを指定してスクリプトを記述できるので、ここでは登録画面で登録が実行されたら、一覧画面にリダイレクトするスクリプトを記述します。

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

ログイン画面の背景を変える

シンプルな背景に変更します。所定のフォルダに、所定のファイル名で背景に表示する画像を配置することで、ビルド時にログイン画面の背景として利用されます。

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

ビルドして動作を確認する

ログイン画面を表示すると、背景が置き換えた画像に変わりました。

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

メニュー画面のボタンが、指定した色に変わっています。

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

検索画面と一覧画面が同時に表示されています。また、一覧の項目の順序・幅も指定されたものになっています。元々表示されていたボタンは消えて、"登録画面へ"ボタンだけが表示されています。

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

メッセージだけが表示されている、シンプルな登録画面になりました。

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

保存ボタンを押すと、詳細画面を経由せずに、検索・一覧画面に遷移しました。

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

詳細画面では、登録画面には表示されていなかった投稿者投稿日時に、自動で値が設定されていることを確認できます。

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

次回

以上、簡単な操作で、いろいろな設定ができることを確認できたかと思います。このほかにも様々な設定ができるので、より詳しい内容はWagbyチュートリアルを試してみたり、オンラインマニュアルを確認してください。

基本的な設定についての解説は以上で終了として、次回からは少し変わった使い方をご紹介したいと思います。