チュートリアル 1: Hello App Maker!

ボタン ウィジェット App Maker の基本スキル

access_time 10~15 分

作成するアプリの概要

簡単な Hello World アプリを作成します。このアプリは名前を入力として受け取り、ボタンをクリックするとカスタマイズされた Hello メッセージを表示します。

ラボの内容

このチュートリアルでは、次の方法について説明します。

  • アプリを作成して名前を変更します。
  • ウィジェット パレットとページエディタを使用して、テキスト ボックスやボタンなどの UI 要素を追加します。
  • プロパティ エディタを使ってウィジェットのプロパティを設定します。
  • JavaScript のコードを追加し、マウスでのボタンクリックに呼応して動作するようにします。JavaScript アラート ボックスを使用する方法と、プロパティでの割り当てを使用する方法があります。
  • アプリをプレビューしてテストします。

アプリを作成する

  1. 雇用主や学校から提供される G Suite アカウントにログインします。
  2. App Maker を開きます。
  3. 空のアプリを作成します。
    • App Maker に開始時のダイアログが表示されたら、[Create New App] をクリックします。
    • それ以外の場合は、[Menu] menu chevron_right [New] chevron_right [Blank Application] をクリックします。
  4. アプリの名前を変更します。デフォルト名の「Untitled App」を削除して「Hello App Maker」と入力します。

ページの名前を変更する

App Maker のページは、従来の Web ページと同様のアプリ内ページになります。ページは、フォーム、テーブル、ボタン、グラフなどの UI 要素の親コンテナとして機能します。

新規にアプリを作成する場合には、必ず「NewPage」という名前の空のページが用意されます。今回のアプリでは、必要なページは 1 ページだけです。

ページ名の変更:

  1. NewPage の左側のサイドバーで、[More] more_vert をクリックしてから、[Rename] をクリックします。
  2. HelloPage」と入力して [OK] をクリックします。

ウィジェットを追加してプロパティを設定する

ウィジェットは、アプリに組み込む UI のパーツです。たとえば、ラベルをつける、データを受け取って表示する、ページ ナビゲーションを設定するなどの用途に利用できます。

このステップでは、ウィジェット を使用して HelloPage に 2 つのウィジェットを追加します。ウィジェットを追加する際に、プロパティ エディタ([Editor] edit が選択されていると表示されます)でプロパティを設定します。

次のようなページを作ります。

Hello App Maker

  1. ユーザーが入力するためのテキスト ボックスを追加します。
    1. ウィジェット をクリックし、テキスト ボックス テキスト ボックス ウィジェット をキャンバスの左上隅付近(ページエディタの中央の領域)にドラッグします。プロパティ エディタでは、実際の配置位置が [Layout] の下に表示されます。
    2. 右側のテキスト ボックス ハンドルを右にドラッグして、テキスト ボックスの幅を広げます。
    3. プロパティ エディタで、[name] プロパティを「YourName」に変更します。
    4. アプリのユーザーへの指示内容として、[label] プロパティに「Type your name」と入力します。
  2. ユーザーがクリックするボタンを追加します。
    1. ウィジェット からボタン ボタン ウィジェット を新しく作成したテキスト ボックスの右側にドラッグします。
    2. ボタンとテキスト ボックスの縦方向の位置を下端で揃えます。ウィジェットをドラッグすると、揃っていることがわかるように青い線が表示されます。
    3. ボタンをダブルクリックして、テキストを「Say Hello」に変更します。
  3. ユーザーがボタンをクリックしたときに起こるアクションを定義します。
    1. [Say Hello] ボタンをクリックします。
    2. プロパティ エディタ chevron_right の [Button] セクションで、[onClick] プロパティをクリックして [Custom Action] を選択します。
    3. JavaScript を使用してアクションを定義します。ここでは、ユーザーがボタンをクリックした際の内容を指定します。次のスクリプトをコピーして [Client Script] ダイアログに貼りつけます。
      alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!");
      JavaScript のアラート ボックスが、YourName テキスト ボックスの value プロパティを参照します。
    4. [Done] をクリックして変更を保存し、ダイアログを閉じます。

これでアプリが完成し、テストの準備が整いました。

アプリのプレビューとテストを行う

アプリをプレビューする準備が整いました。プレビューでアクセスできるのは自身だけですが、アプリのすべての機能が確認できます。

  1. 右上隅にある [Preview] をクリックします。アプリが新しいブラウザタブに表示されます。
  2. [Allow] をクリックして、アプリに情報の使用を許可します。

    初めてアプリをプレビューするときや、後でアプリの機能を変更したときは、アプリに特定の情報の使用を許可するように求められます。

    アプリの上部(画面上部)には、[Page] メニューがあり、アプリのページ間を移動できます。デフォルトでは、公開済みアプリに [Page] メニューはありません。

    アプリの下には、ランタイム メッセージの表示や、リンクをクリックしてサーバーログを表示させるコンソールがあります。

  3. [Type your name] テキスト ボックスに、自分の名前を入力して [Say Hello] をクリックします。

  4. アラート ボックスが表示されたら、[OK] をクリックして閉じます。

これで、App Maker アプリが作成されました。

出力にプロパティを設定する(省略可)

このステップでは、JavaScript のアラート ボックスを使用する代わりに、出力をアプリの UI に配置することで、アプリの変更を行います。出力に [Label] ウィジェットを使用し、JavaScript でプロパティを設定することで入力を参照します。

  1. Hello App Maker の出力にラベルを追加します。
    1. ウィジェット から、ラベル ボタン ウィジェット をテキスト ボックスの下にドラッグします。ラベルとテキスト ボックスの水平方向の位置を左端で揃えます。
    2. プロパティ エディタで、[name] プロパティを「Output」に変更します。
    3. [text] プロパティから、[Label] を削除します。
  2. [Say Hello] ボタンの [onClick] アクションを修正して、ユーザーの入力を受付け、ラベルを介して出力します。
    1. [Say Hello] をクリックします。
    2. [onClick] プロパティをクリックして [Custom Action] を選択します。[Client Script] ダイアログ ボックスが表示されたら、現在のアクションを削除し、次のいずれかのコード スニペットに置き換えます。
      • 最もシンプルなスクリプト - 単一の JavaScript ステートメントを使用して、入力ウィジェットの value プロパティを出力ウィジェットの text プロパティに割り当てます。
            widget.root.descendants.Output.text = "Hello, " +
            widget.root.descendants.YourName.value + "!";
      • やや複雑なスクリプト(null ケースを処理) - 変数で入力ウィジェットと出力ウィジェットを参照し、出力ウィジェットの text プロパティを割り当てる前に null ケースをテストします。
            // Define variables for the input and output widgets
            var nameWidget = app.pages.HelloPage.descendants.YourName;
            var outputWidget = app.pages.HelloPage.descendants.Output;
            // If a name is supplied, say hello to it.
            // Otherwise, just say 'Hello!'
            if (nameWidget.value) {
            outputWidget.text = 'Hello, ' + nameWidget.value + '!';
            } else {
            outputWidget.text = 'Hello!';
            } 
      • [Done] をクリックして変更を保存し、ダイアログを閉じます。
  3. 修正したアプリをプレビューしてテストします。
    1. App Maker の右上隅にある [Preview] をクリックします。
    2. テキスト ボックスに自分の名前を入力して、[Say Hello] をクリックします。ラベル ウィジェットに Hello メッセージが表示されます。
  4. Hello App Maker アプリが実行されているタブを閉じます。App Maker を開いているタブはそのままにします。

次のステップ

  1. チュートリアル 2 を見る - 簡単な従業員データベース アプリを作成し、データモデル、フォーム、テーブルについて学びます。
  2. サンプルアプリを確認する - Hello App Maker! サンプルはここで作業した内容をコピーします。ただし、一点だけ違いがあり、キャンパスに他のウィジェットが配置される前にカードが配置されます。このカードにより UI のスタイルが設定できます。