App Inventor 2 チュートリアル

すべてのチュートリアルは最新版App Inventor 2のnb200b_jpに対応しています

初心者用

音声関係

話して(その1)

アプリのデモ

スマホが話しをするアプリを作ります

学べるポイント

  • ボタンの使い方
  • テキストブロックの使い方
  • テキスト読み上げ方法

話して(その2)

アプリのデモ

スマホを振ると話す機能としゃべる言葉の入力機能を追加します

学べるポイント

  • 加速度センサーの使い方
  • テキストボックスの使い方

発音学習アプリ

アプリのデモ

ランダムに選んだ英単語を読み上げて、音声認識機能で発音チェックをする学習アプリを作成します。

学べるポイント

  • 音声認識の基礎
  • ランダム処理の活用
  • ユーザーインターフェース設計

ゲーム

お絵かきアプリ

アプリのデモ

スマホの画面に指で好きな絵を描きます

学べるポイント

  • キャンバスコンポーネントの使い方
  • ボタンの使い方

もぐらたたきゲーム

アプリのデモ

アクションゲーム。スマホで遊ぶ簡単なゲームです

学べるポイント

  • キャンバスコンポーネントの使い方
  • 画像スプライトの使い方
  • サウンドコンポーネントの使い方
  • タイマーを使って一定時間毎に決まったことを実行する方法

空飛ぶ円盤撃退ゲーム

アプリのデモ

シューティングゲーム。来襲する円盤をミサイルを撃って撃退します

学べるポイント

  • ロケットの操作
  • 円盤の移動と衝突判定
  • スコアとタイマーの管理

Google Sheets API

画像カタログアプリ(Google Sheets API使用)

アプリのデモ

Google Sheets APIを使ってGoogleスプレッドシートに入力されたデータを表示するアプリです。複数台のスマホからの同時アクセスも可能ですし、Googleスプレッドシートでデータを変更するとアプリに表示されるデータもリアルタイムで反映されます。

学べるポイント

  • スプレッドシートとのデータ連携
  • スピナーを使った項目選択

郵便番号から住所検索アプリ(Google Sheets API使用)

アプリのデモ

Google Sheets APIを活用して、Googleスプレッドシートをデータベースとして使用するアプリです。このアプリは郵便番号から住所を検索します。スプレッドシートコンポーネントには完全一致、部分一致フィルターをかけて読み込むメソッドがあるのですが正常に動かないので、取得した列をリストに入れてリストで検索しています。郵便番号のGoogleスプレッドシートは124,690行ありますが、問題無い速度で動作します。

学べるポイント

  • スプレッドシートとのデータ連携
  • リスト内データの検索方法
  • ユーザーインターフェースの設計

地図

観光名所地図アプリ

アプリのデモ

Google Sheets APIを使ってGoogleスプレッドシートに入力された東京の観光名所を地図上に表示するアプリです。

学べるポイント

  • スプレッドシートとのデータ連携
  • 動的なマーカーの作成
  • 地図コンポーネントを使ったアプリ開発

中級者用

人工知能

人工知能画像分類アプリ

アプリのデモ

人工知能の機械学習モデルを使って画像を精度良く分類するアプリです。分類結果は日本語に翻訳し読み上げます。

学べるポイント

  • 撮影した画像をウェブビューに表示する方法
  • 画像認識の方法
  • 英日翻訳と音声読み上げ

多言語翻訳アプリ

アプリのデモ

翻訳元、翻訳先が多言語に対応した翻訳アプリです。翻訳結果は各言語の発音で読み上げます。日本語化プロジェクトのApp Inventor 2ではメディアの翻訳コンポーネントが動作しないので、Google Apps Scriptを使って多言語対応の翻訳ができるアプリを作りました。

学べるポイント

  • APIとの連携方法
  • 多言語対応の考え方
  • 音声読み上げ機能の実装

ゲーム

ボールころがしゲーム

アプリのデモ

アーケードゲーム。スマホセンサーを使ったゲームです

学べるポイント

  • 画像スプライトの移動方法
  • 方位センサーの使い方
  • サウンドコンポーネントを使った音の出し方
  • 画像スプライトの衝突処理
  • タイマーを使った残り時間計測

ブロックくずしゲーム

アプリのデモ

アーケードゲーム。有名なブロックくずしゲームです。同じコンポーネントがたくさんあるときにリストにコンポーネントを入れて、"すべてのコンポーネント“ブロックを使ってループ処理をする方法を学びます。

学べるポイント

  • パドルとボールの動き
  • ブロックの破壊演出
  • 条件分岐と管理

岩をよけてジャンプしながら走るゲーム

アプリのデモ

スーパーマリオ風の横スクロールアクションゲームです。ジャンプして障害物をよけて点をとります。

学べるポイント

  • 横スクロールの実現
  • キャラクターのジャンプ動作
  • 障害物との衝突判定

Google Sheets API

タスク管理アプリ(Google Sheets API使用)

アプリのデモ

Google Sheets APIを活用して、Googleスプレッドシートをデータベースとして使用するアプリです。データベースアプリに必要な基本的なCRUD機能(作成:Create、読み取り:Read、更新:Update、削除:Delete)を実現しています。

学べるポイント

  • スプレッドシートへの読み書き設定
  • “すべてのコンポーネント“ブロックを使ったループ処理
  • チェックボックスをラジオボタンのように使う方法
  • 通知機能の利用方法

レストラン予約管理アプリチュートリアル(Google Sheets API使用)

アプリのデモ

Google Sheets APIを活用して、Googleスプレッドシートをリレーショナルデータベースとして使用するアプリです。テーブルシートと予約シートの二つのシートを使用していますが、一つのテーブルは複数の予約を持てるので、1 対多のリレーションシップになり、予約シートではテーブルIDが外部キーになっています。

学べるポイント

  • スプレッドシートへの読み書き設定
  • スプレッドシートをリレーショナルデータベースとして使用する
  • 今日の日付の取得
  • 指定値を渡して別のスクリーンを開く

地図

写真と位置を記録する地図アプリ

アプリのデモ

外出先で写真を撮るとそのときの位置情報を同時に取得しそれを保存してあとで地図上で見ることができるアプリです。このアプリでは三つのスクリーンを使っていますが、Screen1だけを使って三つのスクリーンを切り替えて使う、仮想スクリーンテクノロジーを使っています。

学べるポイント

  • 位置センサーの利用
  • データのJSON形式での保存
  • 地図コンポーネントの操作
  • 仮想スクリーンの実装

グルメ検索地図アプリ(ホットペッパー グルメサーチAPI使用)

アプリのデモ

ホットペッパー グルメサーチAPI (Powered by ホットペッパーグルメ Webサービス) を活用して、地図上で表示している場所の近辺にある指定ジャンルのお店を検索し、マーカーで表示するアプリです。

学べるポイント

  • ホットペッパー グルメサーチAPI の利用方法
  • XMLデータの処理
  • 指定住所の地図上表示方法

その他

郵便番号検索アプリ

アプリのデモ

日本の郵便番号を都道府県などから検索するアプリです

学べるポイント

  • SQLiteデータベースの使い方
  • 全国郵便番号データベースのデータベースのインポート方法
  • 目的の郵便番号を表示するフローの構築方法