Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

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/


Latest post

Googleドキュメントに見出しを追加したい

今回の例では、ドキュメントの末尾に「見出しD」 を追加します。 見出しA, B, C, Dのスタイルは、見出し3 ( HEADING3 ) に設定しています。  下記Code.gsの  GOOGLE_DOCUMENT_URL を設定して  addHeadingToEnd()  を...