金子邦彦研究室プログラミングJavaScript による Web プログラミングMIT App Inventor を使ってみる

MIT App Inventor を使ってみる

前準備

MIT App Inventor を使ってみる

  1. Web ページを開く

    https://appinventor.mit.edu/

    [image]
  2. Use MIT App Inventor」をクリック

    [image]
  3. 新しい画面で「New」をクリック。これは,プロジェクトの新規作成のため。

    [image]
  4. プロジェクト名 を設定し,「OK」をクリック.

    [image]
  5. デザイナの画面が開く

    [image]
  6. 試しに,ボタン(Botton)とラベル(Label)を,ドラッグ&ドロップする.

    [image]
  7. 今度は,「Open New Blocks Editor」をクリック

    [image]
  8. ブロック・エディタの画面が開く.「My Blocks」をクリックすると,先ほどデザイナで配置したブロックの一覧が表示される。 ここでは「Button1」をクリック

    [image]
  9. 試しに,「Button1.Click」を,ドラッグ&ドロップする.

    [image]
  10. 次に「Label1」をクリック

    [image]
  11. 試しに,「Label1.FontSize」を,ドラッグ&ドロップする.先ほどのブロックと噛み合わせる。

    [image]
  12. Built-In」をクリックし,「Math」をクリックする.

    [image]
  13. 試しに,「number」を,ドラッグ&ドロップする.先ほどのブロックと噛み合わせる。

    [image]
  14. 実行してみたい。まず「New emulator」をクリック.

    [image]
  15. OK」をクリック.

    [image]
  16. 鍵アイコンをドラッグし,ロックを解除する。

    [image]
  17. 画面が変わる

    [image]
  18. 「Connected to Device」で、「emulator ...」を選ぶ。これはエミューレータで実行させたいので。

    [image]
  19. 起動すると画面が変わる

    [image]
  20. 「Test for Button1」のボタンをクリックすると、文字の大きさが大きくなる。

    [image]