photo credit: Official U.S. Navy Imagery Ensign Micah Burge views a monitor in the bridge of USS Antietam (CG 54). via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
ノンプログラマー向けにCloud SQLのはじめかた＆それによるApp Makerアプリの作り方についてシリーズでお伝えしています。
前回の記事はこちら。
Page Fragmentで作成したヘッダーを各ページに配置する方法をお伝えしました。
ヘッダーを配置したはいいんですが、まだ「メニューボタン」の動作を仕込んでいませんでしたので、その部分を進めていきます。
ということで今回は、App MakerのPopupページでナビゲーションメニューを作成する方法です。
では、行ってみましょう！
前回までのおさらい
このシリーズでは、App Makerで「従業員データ」を一覧表示、追加・編集するアプリケーションを作成しています。
前回は、Page Fragmentページで作成したヘッダーを、一覧表示をするページ「TablePage」と…
データの追加・編集をするページ「EditPage」に配置したのでした。
上部の青い部分がヘッダーで、その名も「Header」という名前のPage Fragmentです。
白いハンバーガーアイコンボタンをクリックすると、各ページに遷移するナビゲーションメニューを表示したいのですが、その部分がまだ未実装です。
今回は、その部分を進めていきます。
Popupとナビゲーションメニュー
さて、App Makerで作成できるページには３つの種類があるという話を、以前の記事でも紹介しました。
すなわち
- Page: いわゆる通常のページ
- Page Fragment: ページに埋め込める再利用可能なUI
- Popup: ダイアログやメニューを作る
の３つです。
「Popup」では、モーダルつまりそのダイアログやメニューを閉じないと、他の操作ができないようなUIを作成することができますが、ナビゲーションメニューは「Popup」から作成することができます。
では、実際にその作り方をみていきましょう。
ナビゲーションメニューを作成する
では、実際にナビゲーションメニューを作成してきましょう。
「Popup」もページですので、「PAGES」の「＋」アイコンから作成していきます。
「Create Page, Page Fragment, or Popup」ではナビゲーションメニューを作成するわけですから「Popup」を選択して「NEXT」です。
このダイアログの説明書きにもある通り、Popupページではモーダルまたは非モーダルボックス、ダイアログ、メニュー、通知など様々な表現を実現できます。
A modal or non-modal box in a page, useful for dialogs, menus, notifications, etc.
続く、「Create Popup」でそのうちのどれを作るかを設定します。
ここでは「Navigation menu」を選択して「CREATE」ですね。
Navigation menuｍ含めて、ここでの選択肢は以下の通りで、バリエーション豊かですね。
- Empty popup: 空のポップアップ、空白のキャンバスとして使用する
- Navigation menu: ナビゲーションメニュー
- Confirmation dialog: 確認ダイアログ
- Notification dialog :通知ダイアログ
- Modal loading indicator: モーダルローディングインジケーター
- Snackbar: スナックバー、画面下部に操作についての１行テキストによる説明を表示
作成したナビゲーションメニュー
これで、新たなページとして「NavigationMenu」が追加されます。
見るとわかるのですが、実は挿入しただけで、いくつかのラベルとそのバインディングが自動で設定されます。
青い上部のエリアのLabelには、ユーザー名とメールアドレスに以下のようなバインディングが割り当てられてます。
@user.username
@user.email
つまり、現在のユーザーの名前とメールアドレスが反映されるわけですね。
また、メニュー部分のPanelのonClickプロパティには、各ページへ遷移するアクション（Navigate to Page）が、あらかじめ割り当てられています。
…優秀ですね！
ヘッダーのmenuボタンのアクションを設定
これで、ナビゲーションメニュー「NavigationMenu」が完成したので、このナビゲーションメニューをヘッダーメニューボタンクリックで表示するように設定をしていきます。
まず、「Header」の「menu」ボタンを選択し、そのプロパティをProperty Editorに表示します。
クリックしたときのアクションを決めたいので、onClickプロパティでしたね。「Show Popup…」→「NavigationMenu」と選択します。
これで準備は完了です。
プレビューをして動作確認する
では、プレビューして動作確認をしていきましょう。
「PREVIEW」ボタンをクリックです。
プレビュー画面で、ハンバーガーアイコンの「menu」ボタンをクリックします。
すると、今回作成したナビゲーションメニューが表示されます。
ユーザー名やメールアドレスも表示されていますね。
現在「TablePage」にいますので、「EditPage」をクリックしてみましょう。
すると、以下のように「EditPage」が開きます。
ナビゲーションメニューから「TablePage」への遷移も可能なので確認してみてください。
まとめ
以上、App MakerのPopupページでナビゲーションメニューを作成する方法をお伝えしました。
作成した時点でバインディングや、onClickプロパティによるアクションがすでに設定されているの、秀逸ですよね…！
次回はいよいよこの修正内容を反映して公開していきます。
どうぞお楽しみに！
連載目次：Cloud SQL＆App Makerアプリ開発のはじめかた
App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた＆それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。- はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
- Google Cloud Platform（GCP）に無料トライアル登録をする方法
- G Suite管理コンソールからApp Makerのデータベース設定を行う方法
- ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
- App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
- App MakerではじめてのCloud SQLのモデルを作成する方法
- App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
- App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
- App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
- はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法
- App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩
- App MakerでPage Fragmentによるヘッダーを各ページに配置する手順
- App MakerのPopupページでナビゲーションメニューを作成する方法
- App Makerでアプリを再公開して修正内容を反映する手順
- App Makerでテストアプリを作成したらCloud SQLはいくらの課金が発生するのか？
