App MakerのPopupページでナビゲーションメニューを作成する方法


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちら。

App MakerでPage Fragmentによるヘッダーを各ページに配置する手順
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、App MakerでPage Fragmentによるヘッダーを各ページに配置していきます。

Page Fragmentで作成したヘッダーを各ページに配置する方法をお伝えしました。

ヘッダーを配置したはいいんですが、まだ「メニューボタン」の動作を仕込んでいませんでしたので、その部分を進めていきます。

ということで今回は、App MakerのPopupページでナビゲーションメニューを作成する方法です。

では、行ってみましょう!

スポンサーリンク

前回までのおさらい

このシリーズでは、App Makerで「従業員データ」を一覧表示、追加・編集するアプリケーションを作成しています。

前回は、Page Fragmentページで作成したヘッダーを、一覧表示をするページ「TablePage」と…

App Makerでヘッダーを追加したTablePage

データの追加・編集をするページ「EditPage」に配置したのでした。

App Makerでヘッダーを追加したEditPage

上部の青い部分がヘッダーで、その名も「Header」という名前のPage Fragmentです。

白いハンバーガーアイコンボタンをクリックすると、各ページに遷移するナビゲーションメニューを表示したいのですが、その部分がまだ未実装です。

今回は、その部分を進めていきます。

Popupとナビゲーションメニュー

さて、App Makerで作成できるページには3つの種類があるという話を、以前の記事でも紹介しました。

すなわち

  • Page: いわゆる通常のページ
  • Page Fragment: ページに埋め込める再利用可能なUI
  • Popup: ダイアログやメニューを作る

の3つです。

「Popup」では、モーダルつまりそのダイアログやメニューを閉じないと、他の操作ができないようなUIを作成することができますが、ナビゲーションメニューは「Popup」から作成することができます。

では、実際にその作り方をみていきましょう。

ナビゲーションメニューを作成する

では、実際にナビゲーションメニューを作成してきましょう。

「Popup」もページですので、「PAGES」の「+」アイコンから作成していきます。

App Makerで新たなページを作成する

「Create Page, Page Fragment, or Popup」ではナビゲーションメニューを作成するわけですから「Popup」を選択して「NEXT」です。

App MakerでPopupページを作成する

このダイアログの説明書きにもある通り、Popupページではモーダルまたは非モーダルボックス、ダイアログ、メニュー、通知など様々な表現を実現できます。

A modal or non-modal box in a page, useful for dialogs, menus, notifications, etc.

続く、「Create Popup」でそのうちのどれを作るかを設定します。

ここでは「Navigation menu」を選択して「CREATE」ですね。

App Makerでナビゲーションメニューを作成する

Navigation menum含めて、ここでの選択肢は以下の通りで、バリエーション豊かですね。

  • Empty popup: 空のポップアップ、空白のキャンバスとして使用する
  • Navigation menu: ナビゲーションメニュー
  • Confirmation dialog: 確認ダイアログ
  • Notification dialog :通知ダイアログ
  • Modal loading indicator: モーダルローディングインジケーター
  • Snackbar: スナックバー、画面下部に操作についての1行テキストによる説明を表示

作成したナビゲーションメニュー

これで、新たなページとして「NavigationMenu」が追加されます。

見るとわかるのですが、実は挿入しただけで、いくつかのラベルとそのバインディングが自動で設定されます。

App Makerで作成したナビゲーションメニュー

青い上部のエリアのLabelには、ユーザー名とメールアドレスに以下のようなバインディングが割り当てられてます。

@user.username
@user.email

つまり、現在のユーザーの名前とメールアドレスが反映されるわけですね。

また、メニュー部分のPanelのonClickプロパティには、各ページへ遷移するアクション(Navigate to Page)が、あらかじめ割り当てられています。

…優秀ですね!

ヘッダーのmenuボタンのアクションを設定

これで、ナビゲーションメニュー「NavigationMenu」が完成したので、このナビゲーションメニューをヘッダーメニューボタンクリックで表示するように設定をしていきます。

まず、「Header」の「menu」ボタンを選択し、そのプロパティをProperty Editorに表示します。

クリックしたときのアクションを決めたいので、onClickプロパティでしたね。「Show Popup…」→「NavigationMenu」と選択します。

App Makerでmenuボタンでナビゲーションメニューが表示されるように設定する

これで準備は完了です。

プレビューをして動作確認する

では、プレビューして動作確認をしていきましょう。

「PREVIEW」ボタンをクリックです。

App Makerでプレビューする

プレビュー画面で、ハンバーガーアイコンの「menu」ボタンをクリックします。

App Makerのプレビューでmenuボタンをクリック

すると、今回作成したナビゲーションメニューが表示されます。

ユーザー名やメールアドレスも表示されていますね。

現在「TablePage」にいますので、「EditPage」をクリックしてみましょう。

App Makerのナビゲーションメニューを操作する

すると、以下のように「EditPage」が開きます。

App Makerのナビゲーションメニューで画面を切り替えた

ナビゲーションメニューから「TablePage」への遷移も可能なので確認してみてください。

まとめ

以上、App MakerのPopupページでナビゲーションメニューを作成する方法をお伝えしました。

作成した時点でバインディングや、onClickプロパティによるアクションがすでに設定されているの、秀逸ですよね…!

次回はいよいよこの修正内容を反映して公開していきます。

App Makerでアプリを再公開して修正内容を反映する手順
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、App Makerでアプリを再公開して修正内容を反映する手順をお送りします。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法
  7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
  8. App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
  9. App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
  10. はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法
  11. App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩
  12. App MakerでPage Fragmentによるヘッダーを各ページに配置する手順
  13. App MakerのPopupページでナビゲーションメニューを作成する方法
  14. App Makerでアプリを再公開して修正内容を反映する手順
  15. App Makerでテストアプリを作成したらCloud SQLはいくらの課金が発生するのか?

タイトルとURLをコピーしました