App Makerでアプリを再公開して修正内容を反映する手順


deployment

photo credit: U.S. Pacific Fleet 191003-N-HD110-1055 via photopin (license)

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

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

前回の記事はこちら。

App MakerのPopupページでナビゲーションメニューを作成する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、App MakerのPopupページでナビゲーションメニューを作成していきます。

Popupページを使ってヘッダーにナビゲーションメニューを作成する方法をお伝えしました。

さて、前回修正をしましたので、その修正を反映すべく、再度公開をしていきます。

ということで、App Makerでアプリを再公開して修正内容を反映する手順をお送りします。

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

スポンサーリンク

前回までのおさらい

このシリーズでは従業員データを扱う「従業員データベース」というアプリを作成しています。

メインのページは

  • データ一覧を閲覧する「TablePage」
  • データを追加・編集する「EditPage」

の2つから構成されています。

これらのページの共通のヘッダーとしてPage Fragmentを用いて「Header」を作成しました。

それが以下の図に表す部分です。

App MakerでPage Fragmentを使用して配置したヘッダー

さらに、そのハンバーガーアイコンは「menu」ボタンになっていて、クリックすると以下のようなナビゲーションメニューが開きます。

App MakerでPopupを使用して配置したナビゲーションメニュー

このナビゲーションメニューはPopupを使用して作成したもので、ログインしているアカウント名の表示と、各ページへのリンクを機能として持っています。

前回、このヘッダーとナビゲーションメニューの動作をプレビューで確認しましたが、本番に適用するには再度「公開」をする必要がありますので、その作業を進めていきます。

アプリを公開して修正を反映する

では、再度のアプリ公開作業を進めていきましょう。

右上の「PUBLISH」をクリックします。

すると、初回の公開時とは異なりメニューが表示されます。

ここでは「Publish to deployment Test」を選択します。

App Makerでアプリを再公開する

「Test」というのは初回に公開したときに定めた「Deployment name」ですね。

すると、「Are you sure?」というダイアログで以下のように「deploymentを最新バージョンに置き換えますか?」と尋ねられますので、「YES」としちゃいましょう。

Do you want to replace the deployment with the latest version?

App Makerのアプリのdeploymentを置き換えてよいか回答する

ちなみに、公開が完了したときにアプリを開きたい場合は「Open app when complete」にチェックを入れてくださいね。

公開したアプリを開く

ではアプリを開いて確認していきましょう。

アプリの公開URLは以前公開したときのものと同じですが、歯車アイコン「App settings」→「DEPLOYMENTS」→「Test」からアプリを開くこともできます。

App Makerで公開したアプリを開く

以下のようにアプリを開くことができました。

App Makerでアプリを開いた

従業員データベースアプリの動作

では、従業員データベースアプリの動作を確認していきましょう。

まず、公開したアプリはデータが空です。

公開アプリのデータベースは、プレビューで投入したときのデータベースとは別のものになりますので、データの投入は公開後に行う必要があります。

ですから、ヘッダーの「menu」ボタンから、「EditPage」にアクセスをしていきます。

App Makerでヘッダーのmenuボタンをクリックする

ナビゲーションメニューが開きますので「EditPage」をクリックします。

App Makerでナビゲーションメニューのパネルをクリックする

EditPageに遷移しますので、「CREATE」からフォームにデータを入力していきます。

App Makerでフォームにデータを入力する

再びナビゲーションメニューを開いて、今度は「TablePage」を選択して戻ってみると…以下のようにテーブルで先ほど入力したデータを確認できます。

App Makerで入力したデータをテーブルで確認する

うまく動いていますね。

まとめ

以上、App Makerでアプリを再公開して修正内容を反映する手順をお送りしました。

さて、ここまで作成してきた「従業員データアプリ」ですが、実はメニューとドラッグ&ドロップとプロパティ設定だけで、できちゃいました。

もちろん、より複雑なことや高度なことが、紹介していない機能やスクリプトを組むことで実現できます。

App Maker恐るべし…!

さて、次回ですがCloud SQLに結局どれくらいお金がかかるのか…について紹介します。

App Makerでテストアプリを作成したらCloud SQLはいくらの課金が発生するのか?
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、テストでCloud SQLを使用した場合、いくらの課金が発生するかをお伝えします。

どうぞお楽しみに!

連載目次: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をコピーしました