LANG SELRCT

コードを書く場所についてはこちら

2018年11月10日土曜日

AppMakerのHello App Maker!チュートリアルをやってみる


今回試したのは公式サイトにある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/