今回試したのは公式サイトにある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」をクリックします
作ったアプリが表示されます
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Ea4iL2FwqhdO_BA0S6aXX58RON0_iQ9PKaiFbDUhGFYldP3LDLAYi-Cdgb-9iF9fHyWQHqDdywyj1Pjt69nkT_eMpP8R-GVS-P5DGMsvzRZX4XnUvAF9m-tv7ikTeiARRoqdOnLdxPg/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-11-10+5.47.56.png)
アプリを公開してみる
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/