今回試したのは公式サイトにあるAppMakerのチュートリアルです
Hello App Maker!
https://developers.google.com/appmaker/tutorials/hello-appmaker/
チュートリアルのゴール
Type your nameのテキストボックスに名前を入力してSAY HELLOボタンを押すと
このようにアラートでメッセージが表示されます
ゴールまでの道
G Suite Developer Hub を開いて「新しいアプリ」を選択します
https://script.google.com/home
このような画面が表示されます
アプリ名をUntitled Appから「Hello App Maker」に変更します
PAGESのNewPage左端の︙ をクリックして「Rename」を選択します
「HelloPage」に変更してOKをクリックします
テキストボックスやボタンなどのパーツは左サイドの「Widgets」の中から選択して掴んで、中央の画面の置きたい場所まで持っていくと配置できます
テキストボックスのPropertyを設定します
- name欄に「YourName」と入力します
- label欄に「Type your name」と入力します
ボタンのPropertyを設定します
- text欄に「Say Hello」と入力します
- onClick欄をクリックしてCustom Actionを選択します
「alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!")」と入力してDONEをクリックします
ボタンのPropertyはこのようになります
動作を確認するために左上にある「PREVIEW」をクリックします
作ったアプリが表示されます
アプリを公開してみる
PREVIEWの左隣にある「PUBLISH」をクリックすると以下のような画面になります
「PUBLISH NEW DEPLOYMENT」をクリックします
Deployment nameを入力します
Application accessを任意で選択します
「PUBLISH」をクリックします
「PREVIEW PERMISSIONS」をクリックします
このような画面が表示されます
Deployment URLのリンクをクリックします
公開したアプリケーションが開きます
参考
App Maker
https://gsuite.google.co.jp/intl/ja/products/app-maker/
App Maker Guides
https://developers.google.com/appmaker/tutorials/
Tutorial 1: Hello App Maker!
https://developers.google.com/appmaker/tutorials/hello-appmaker/