超初心者向けApp Makerでとっても簡単な初めてのWebアプリケーションを作ってみよう

★気に入ったらシェアをお願いします!


hello

photo credit: Carol (vanhookc) Hello from Another World via photopin (license)

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

さて、Googleが提供するWebアプリケーションを簡単に開発できるプラットフォーム「App Maker」ですが、前回以下の記事でApp Makerとは何か、またその開発イメージについてお伝えしました。

App Makerとは何か、またその超簡単なアプリケーション開発のイメージをお伝えします
Googleが提供するWebアプリケーション開発プラットフォーム「App Maker」。今回は、App Makerとは何か、またその超簡単なアプリケーション開発のイメージについてお話します。

しかし、まあ簡単とはいえ「Webアプリケーション」ですから、1.接続して、2.ボタンを押したら、3.すぐにできる…というわけには、さすがにいきません。

ページの作り方、データベースの作り方、スクリプトの仕込み方、それぞれの手順について、ちゃんと理解する必要がありますし、その上で多少の手順を追う必要があります。

ということで、今回からシリーズで超初心者向けにApp Makerでアプリケーションを作るための初歩の初歩をお伝えしていきます。

まずは、とってもアラートを表示するだけのとっても簡単なアプリ作成を通して、App Makerの操作感はページを作っていく流れをつかんでいただければと思います。

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

App Makerを開始する条件

まず、App Makerですが、本記事執筆時点ではG Suite Business以上でかつG Suite管理者からアーリーアクセスプログラムに申請をする必要があります。

すぐに使いたい!という場合は、G Suite管理者にお願いして、こちらから申請をしてもらいましょう。

ちなみに弊社の場合は申請をしてから3日くらいで通りしました。だいぶ前のこと(2017年6月)だったので、今も同じかどうか…ということで、ご参考程度に。

また、伝えしておきますが、App Makerのメニューや説明は残念ながらすべて英語です。

ですが、安心してください。本記事は日本語です。

日本のアカウントでガンガン使って、日本語対応の優先順位を上げてあげましょう。

テキストボックスの入力とボタンでアラート表示

最初ということで、テキストボックスに名前を入力してボタンを押したら「Hello~!」とアラート表示するアプリケーションを作ります。

実は、これはApp Makerの公式ドキュメントのチュートリアルの一つ目のものです。

ただ、日本語で書いてますし、キャプチャもたっぷり入れているので、日本の方には読みやすくなっていると思いますよっ!

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

新規アプリケーションを作成する

では、早速App Makerに触ってみましょう。

App Makerの入り口となる、以下URLにアクセスします。

Build powerful apps for your business, fast.

すでに作成済みのアプリがあれば左側に並びますが、今回は新規のアプリケーションを作成しますので「CREATE NEW APP」とします。

App Makerで新規のアプリケーションを作る

ちなみに、右側は公式ドキュメントへのリンクです。

テンプレートを選ぶ

続いて「Select a template」つまり、テンプレート選択画面に移ります。

すでにパートナー管理とか、素材ギャラリーとか、Q&Aフォーラムとかのアプリのテンプレートがあるので、それらの中から選ぶこともできますが、今回はまっさらな状態から作りたいので「Blank Application」とします。

App MakerでBlank Applicationを選択する

アプリケーション名を変更する

こちらがアプリを開発する画面です。赤枠の箇所をクリックするとアプリケーション名を変更できるので、わかりやすい名前に変更しましょう。アプリケーション名の入力は日本語でもOKです。

App Makerでアプリケーション名を変更する

ページを作成する

次に、ページを作成していきます。

ウィジェットからパーツをドラッグ&ドロップで選択して、プロパティエディタで設定を加えていく、というような流れです。

ページ名を変更する

まずはページ名を変更しましょう。

Webアプリケーションには最低1枚のページは必須ですので、すでに「NewPage」というページができています。

左側のメニューの「PAGES」の「NewPage」のメニューボタン(縦に点三つのアイコン)をクリックすると、メニューが出ますので「Rename」をクリックです。

App Makerでページ名を変更する

ページ名は「HelloPage」などとして「OK」をクリックします。なお、ページ名は日本語は使えません。アルファベットでお願いします。

App Makerでページ名を入力する

テキストボックスを配置

では、続いてページにウィジェットを配置していきます。

ウィジェットにはフォーム、テーブル、ボタン、テキストボックス…といったパーツが用意されていて、それをドラッグ&ドロップでページに配置することができます。

まずは名前を入力するためのテキストボックスを配置します。

左上のウィジェットアイコンをクリックして、「Widgets」を開き、「Text Box」をページ内にドラッグしてみましょう。

App Makerでテキストボックスを配置する

すると新たなテキストボックスが配置されます。枠の□をつかんでドラッグするとサイズを変更することができます。

テキストボックスの名前とラベルを設定する

さらに、そのテキストボックスが選択された状態では、右側の「Propety Editor」でいろいろな設定をすることができます。

その中から

  • name:YourName
  • label:あなたの名前を入力してください

などと入力をしましょう。

App Makerでテキストボックスのプロパティを設定する

nameはパーツの名前、labelは表示する内容となりますね。

このようにProperty Editorでは各パーツ(オブジェクト)ごとに、名前や表示内容などの設定をすることができます。

ボタンを配置する

続いて、アラートを表示するトリガーとなるボタンを配置します。

Widgetsから「Button」をドラッグして配置をします。補助線が出て先ほどのテキストボックスと配置を合わせることができますので便利。

App Makerでボタンを配置する

ボタンはダブルクリックすることでそのテキストを編集できます。「Say Hello」などとしておきます。

App Makerでボタンのテキストを編集

ボタンにアクションを設定する

次にボタンを押したときのアクションを設定していきます。

ボタンを選択した状態でPropety Editorの「onClick」のメニューアイコンをクリックしてメニューを開きます。

すでにデフォルトで「ページを遷移する」「データソースをリロードする」などのアクションが用意されているのですが、今回は「Custom Action」を選択して、独自のアクションを設定してみましょう。

App MakerでボタンにCustom Actionを設定する

以下のスクリプトをコピーします。

GASでは実行できなかった幻の命令「alert」です。おそらく「Hello 」に続けて、「アプリの、ページたちの、HelloPageの、子孫の、YourNameの、値」と「!」を表示せよ、というような内容です。

このスクリプトを「Custom action」の入力欄にペースト、そして「DONE」をクリックします。

App Makerでボタンにスクリプトを仕込む

作成したアプリケーションをプレビューする

これでアプリは一通り完成しましたのでプレビューして動作を確認してみましょう。

右上の「PREVIEW」です。

App MakerでPREVIEW

アプリへの許可

すると以下のようにユーザー(自分自身ですが…)が「Hello App Maker」アプリをレビューしていいか許可を求められるので、「REVIEW PERMISSONS」をクリックして許可をしてあげます。

App Makerでアプリケーションの許可

次の画面で、アカウントを選択。

App Makerでアプリ許可のアカウントを選択

動作を確認する

作成されたWebアプリケーションのページがこちら。

シンプルですが…まあ最初ですから。

テキストボックスに名前を入力して、「SAY HELLO」ボタンをクリックしてみましょう。

App MakerでSAY HELLOアプリの動作確認

すると、以下のようにアラートが表示されました。夢のアラートです。

App Makerでアラートを表示する

まとめ

以上、初心者向けにApp Makerで簡単なWebアプリケーションの作り方をお伝えしました。

  • 新規アプリケーションの作成
  • ページへテキストボックス、ボタンの配置
  • ボタンにクリックした際のアクションを設定

などといった流れになります。

App Makerの操作の感じやページ作成の雰囲気がつかめていただければうれしいです。

次回は、このアプリに少しカスタマイズを加えて、理解を深めていきたいと思います。

【初心者向けApp Maker】作成したアプリを開いてカスタマイズをしてみよう
初心者向けのApp Makerでアプリを作るチュートリアルをお送りしています。今回は、作成したアプリを開いて、ラベルウィジェットの設置、テキストがnullだった場合の分岐処理の追加などの修正をしていきます。

どうぞお楽しみに!

連載目次:初心者向けApp Makerチュートリアル日本語版キャプチャ付

Googleが提供するWebアプリケーション開発プラットフォーム「App Maker」。ドラッグ&ドロップやクリック操作でページやデータベースを作成できます。この連載は、App Makerの操作感やアプリの作成イメージをつけていただくための、App Maker初心者向けのチュートリアルです。
  1. App Makerとは何か、またその超簡単なアプリケーション開発のイメージをお伝えします
  2. 超初心者向けApp Makerでとっても簡単な初めてのWebアプリケーションを作ってみよう
  3. 【初心者向けApp Maker】作成したアプリを開いてカスタマイズをしてみよう
  4. 【App Maker】アラート表示を例にスクリプトの最初の一歩について解説します
  5. App Makerでウィジェットの文字列を変更するスクリプトを解説します
  6. App Makerでデータベースを作成する「モデル」への最初の一歩
  7. App Makerでアプリに簡単なフォームとテーブルを設置する
  8. App Makerのウィジェットにデフォルトで仕込まれているバインディングとアクションが超ありがたい