AndroidアプリがWebブラウザ上で部品を並べるだけでできあがる
誰でもAndroidアプリがつくれる超簡単な開発ツール「Google App Inventor」の使い方ガイドブックです。これまでAndroid向けアプリの作成には、Javaプログラミングの知識が必要でしたが、Google App Inventorを使えばWebブラウザ上で、ブロックを配置するだけでアプリを作れます。簡単なアプリなら10～30分程度で作りあげることもできます。本書ではGoogle App Inventorの基本的な使い方から、電話をかけるアプリ、カメラ撮影アプリ、Web検索アプリ、地図アプリ、電子さいころ、じゃんけんゲームといった様々なAndroidアプリの作り方を初歩からやさしく解説しています。サンプルデータのダウンロードサービス付き。
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/3138.html
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/3138.html
第1章 Androidアプリを作るには
1-1 Androidアプリって何？
Androidマーケットと野良アプリ
Androidアプリとセキュリティ
提供元不明のアプリを許可する
［memo］Androidアプリは誰でも作れる
1-2 Androidアプリを作るには
Androidアプリ開発の流れ
Android SDKとApp Inventorの違い
［memo］開発者のためのサイト
1-3 App Inventorとは
デザイナとブロックエディタ
Webブラウザで操作する
エミュレータを使った動作テスト
［memo］App Inventorはβ版
1-4 App Inventorを使うには
App Inventorを使えるようにする
第2章 App Inventorを使ってみよう
2-1 この章のポイント
デザイナとブロックエディタ
デザイナ
ブロックエディタ
パッケージを作る
2-2 App Inventorを起動してプロジェクトを作ろう
App Inventorを起動しよう
［memo］プロジェクトはサーバに保存される
2-3 タイトルを設定しよう
デザイナの構造
タイトルを変更しよう
［memo］Screen1は削除できない
2-4 画面に部品を置いてみよう
ボタンを配置しよう
ボタンの大きさを変更しよう
［memo］コンポーネントをクリックしてプロパティを編集する
2-5 移動したり削除したり、名前を変更したりするには
コンポーネントを上下に移動しよう
名前を変更する
部品を削除する
2-6 コンポーネントを左右に並べるには
左右に並べよう
［memo］Arrangementでレイアウトを揃える
2-7 ブロックエディタを起動するには
ブロックエディタを起動する
［memo］起動にはJREが必要
2-8 ブロックエディタの基本操作を理解しよう
ブロックエディタの構造
［Built-In］と［My Blocks］
ブロックの配置
ブロックの種類
ブロックはきちんとはめ込む
マウス操作で変化するブロック
拡大表示する
2-9 操作をやり直したり複写したりするには
操作を間違えたとき
ブロックをコピーする
［memo］似た機能は複写する
2-10 ボタンがクリックされたときにメッセージを表示してみよう
アプリの振る舞い
設定するロジック
ボタンがクリックされたときの処理を記述する
ラベルに文字を設定する
［memo］クリックされたときはClickイベントが発生する
2-11 作ったプログラムをエミュレータで実行してみよう
エミュレータで実行する
エミュレータにアプリを転送する
エミュレータで動作テストする
［memo］エミュレータは起動しっぱなしにする
エミュレータを日本語対応にする
2-12 キャンバスの背景色を変更してみよう
アプリの振る舞い
設定するロジック
キャンバスの背景色を変更する
動作テストする
【応用】好きな色を設定するには
2-13 作ったプログラムをスマートフォンで動作確認してみよう
プログラムをスマートフォンに転送する
［memo］ブロックエディタを終了すると消えてしまう
2-14 パッケージにしてスマートフォンにインストールしてみよう
パッケージにする方法
セキュリティの設定
バーコードで転送する方法
インストールの確認とインストール
パッケージをパソコンにダウンロードする方法
パッケージを直接スマートフォンに転送する方法
［memo］アプリをアンインストールするには
2-15 アプリのアイコンを変更してみよう
アイコンを設定する
2-16 プロジェクトを管理するには
プロジェクトをダウンロードする
プロジェクトを削除するには
プロジェクトをアップロードする
プロジェクトを別名で保存する
［memo］プロジェクトを管理する
Q&A
第3章 電話をかけるアプリを作ろう
3-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
3-2 電話をかけられる画面を作ろう
タイトルを変更しよう
テキストボックスとボタンを配置しよう
電話をかけるコンポーネントを設置する
3-3 電話をかけるロジックを記述しよう
ボタンがクリックされたときに電話をかける
3-4 電話をかけるロジックの動作テストをしてみよう
エミュレータに転送する
電話をかけるロジックを動作テストする
［memo］実機なら本当に電話がかかる
3-5 電話帳を呼び出してみよう
電話帳を開けるようにする
選んだ電話番号をテキストボックスに設定する
3-6 電話帳を呼び出せるかを確認しよう
実機で動作テストする
Q&A
第4章 Webで検索してみよう
4-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
4-2 検索入力画面を作ろう
タイトルを変更しよう
検索ボックスとボタンを設置しよう
［memo］空欄のときはヒントが表示される
4-3 Web検索できるようにしよう（1）
Web検索するための設定
アクティビティ起動できるようにしよう
［memo］パッケージ名やクラス名を間違えたときは
4-4 Web検索できるようにしよう（2）
検索できるようにしよう
4-5 Web検索の動作テストをしてみよう
実機に転送する
動作テストする
［memo］ブラウザで検索結果が開く
4-6 音声検索できるようにしよう
音声検索ボタンを配置する
音声認識のロジックを作る
テキストに変換されたときの処理を記述する
4-7 音声認識の動作テストをしてみよう
実機で動作テストする
Q&A
第5章 カメラで撮影してみよう
5-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
5-2 操作画面を作ろう
タイトルを変更しよう
［memo］めいっぱいに広げるにはスクロールしないようにする
5-3 ボタンがクリックされたときにカメラが起動するようにしよう
カメラの呼び出し機能を付けよう
ボタンがクリックされたときにカメラを呼び出そう
撮影した写真を表示しよう
［memo］撮影が完了するとAfterPictureイベントが発生する
5-4 カメラ機能の動作テストをしてみよう
実機で動作テストする
［memo］カメラ機能は機種によって異なる
5-5 らくがきできるようにしよう
軌跡を描く仕組み
写真の上にらくがきできるようにしよう
実機で動作テストする
［memo］エミュレータ上で動作テストできる
Q&A
第6章 地図を表示してみよう
6-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
6-2 現在の緯度・経度を表示する画面を作ろう
タイトルを変更しよう
GPSセンサーと表示用ラベルを配置する
［memo］LocationSensorで現在地を知る
6-3 緯度・経度を表示してみよう
緯度・経度を取得するボタンを作る
緯度・経度を表示する
［memo］GPS機能の有効化
6-4 緯度・経度を表示するロジックの動作テストをしてみよう
パッケージにして動作テストする
［memo］パッケージ化しないとGPSが使えない
6-5 自動的に緯度・経度が更新されるようにしよう
自動的に緯度・経度が更新されるようにする
6-6 現在地の地図を表示できるようにしよう（1）
アクティビティとは
地図を呼び出すボタンを配置しよう
アクティビティ起動できるようにしよう
6-7 現在地の地図を表示できるようにしよう（2）
文字を連結する「make text」
アクティビティで地図を起動する
パッケージにして動作テストする
［memo］パッケージを2回インストールできない
第7章 電子さいころを作ろう
7-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
7-2 さいころ表示の画面を作ろう
タイトルを変更しよう
［memo］画像を表示するImageコンポーネント
7-3 さいころの画像を登録しよう
画像をアップロードする
［memo］登録した画像を削除するには
7-4 さいころの目を回転させてみよう
Clockを配置する
ランダムに目が出るようにする
［memo］変数には一時的に値を保存できる
7-5 さいころを止めたり動かしたりしてみよう
実行してみよう
動いたり止めたりを制御する
ボタンがクリックされたときに動かしたり止めたりする
動作テストする
［memo］目押しを防ぐ
Q&A
第8章 じゃんけんゲームを作ろう
8-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
8-2 じゃんけんゲームの画面を作ろう
タイトルを変更しよう
自分の手とコンピュータの手を表示する場所を作ろう
じゃんけんの画像枠を配置しよう
［memo］格子状に配置するTableArrangementコンポーネント
8-3 じゃんけん操作のボタンを配置しよう
自分の手を選択するボタンを配置しよう
［memo］それぞれのボタンには、わかりやすい名前を付ける
8-4 勝ち負けを表示するラベルを作ろう
勝ち負けを表示するラベルを作ろう
［memo］文字を表示したいときは、その場所をあらかじめ確保しておく
8-5 じゃんけんの画像を登録しよう
画像をアップロードする
［memo］登録順序は不定
8-6 変数を宣言しよう
変数とは
用意する変数
コンピュータの手を保存する変数を宣言する
自分の手を保存する変数を宣言する
［memo］数値を表現するにはnumberブロックを使う
8-7 数値と画像ファイル名とを対応させるリストを作ろう
リストとは
グー、チョキ、パーの画像リストを定義する
［memo］複数のデータを管理したいときにはリストを使う
8-8 自分の手とコンピュータの手が出るようにしよう（1）
ロジックの算段
プロシージャを定義する
「グー」「チョキ」「パー」のボタンがクリックされたときの処理を書く
8-9 自分の手とコンピュータの手が出るようにしよう（2）
全体の流れ
自分の手を表示する
コンピュータの手を決める
コンピュータの手を表示する
動作テストする
［memo］select list itemでリストからアイテムを取り出す
8-10 勝ち負けを判定しよう（1）
勝ち負け判定のロジック
引き分けを判定する
［memo］日本語を入力するには
8-11 勝ち負けを判定しよう（2）
勝ちかどうかを判定する
8-12 勝ち負けを判定しよう（3）
勝ちと負けを判定する
動作テスト
［memo］条件の指定
Q&A
補足資料
A JREをインストールしよう
B App Inventorをインストールしよう
C スマートフォンをつないでアプリを使えるようにするには
D Googleアカウントを取得するには
E アプリをアンインストールするには
1-1 Androidアプリって何？
Androidマーケットと野良アプリ
Androidアプリとセキュリティ
提供元不明のアプリを許可する
［memo］Androidアプリは誰でも作れる
1-2 Androidアプリを作るには
Androidアプリ開発の流れ
Android SDKとApp Inventorの違い
［memo］開発者のためのサイト
1-3 App Inventorとは
デザイナとブロックエディタ
Webブラウザで操作する
エミュレータを使った動作テスト
［memo］App Inventorはβ版
1-4 App Inventorを使うには
App Inventorを使えるようにする
第2章 App Inventorを使ってみよう
2-1 この章のポイント
デザイナとブロックエディタ
デザイナ
ブロックエディタ
パッケージを作る
2-2 App Inventorを起動してプロジェクトを作ろう
App Inventorを起動しよう
［memo］プロジェクトはサーバに保存される
2-3 タイトルを設定しよう
デザイナの構造
タイトルを変更しよう
［memo］Screen1は削除できない
2-4 画面に部品を置いてみよう
ボタンを配置しよう
ボタンの大きさを変更しよう
［memo］コンポーネントをクリックしてプロパティを編集する
2-5 移動したり削除したり、名前を変更したりするには
コンポーネントを上下に移動しよう
名前を変更する
部品を削除する
2-6 コンポーネントを左右に並べるには
左右に並べよう
［memo］Arrangementでレイアウトを揃える
2-7 ブロックエディタを起動するには
ブロックエディタを起動する
［memo］起動にはJREが必要
2-8 ブロックエディタの基本操作を理解しよう
ブロックエディタの構造
［Built-In］と［My Blocks］
ブロックの配置
ブロックの種類
ブロックはきちんとはめ込む
マウス操作で変化するブロック
拡大表示する
2-9 操作をやり直したり複写したりするには
操作を間違えたとき
ブロックをコピーする
［memo］似た機能は複写する
2-10 ボタンがクリックされたときにメッセージを表示してみよう
アプリの振る舞い
設定するロジック
ボタンがクリックされたときの処理を記述する
ラベルに文字を設定する
［memo］クリックされたときはClickイベントが発生する
2-11 作ったプログラムをエミュレータで実行してみよう
エミュレータで実行する
エミュレータにアプリを転送する
エミュレータで動作テストする
［memo］エミュレータは起動しっぱなしにする
エミュレータを日本語対応にする
2-12 キャンバスの背景色を変更してみよう
アプリの振る舞い
設定するロジック
キャンバスの背景色を変更する
動作テストする
【応用】好きな色を設定するには
2-13 作ったプログラムをスマートフォンで動作確認してみよう
プログラムをスマートフォンに転送する
［memo］ブロックエディタを終了すると消えてしまう
2-14 パッケージにしてスマートフォンにインストールしてみよう
パッケージにする方法
セキュリティの設定
バーコードで転送する方法
インストールの確認とインストール
パッケージをパソコンにダウンロードする方法
パッケージを直接スマートフォンに転送する方法
［memo］アプリをアンインストールするには
2-15 アプリのアイコンを変更してみよう
アイコンを設定する
2-16 プロジェクトを管理するには
プロジェクトをダウンロードする
プロジェクトを削除するには
プロジェクトをアップロードする
プロジェクトを別名で保存する
［memo］プロジェクトを管理する
Q&A
第3章 電話をかけるアプリを作ろう
3-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
3-2 電話をかけられる画面を作ろう
タイトルを変更しよう
テキストボックスとボタンを配置しよう
電話をかけるコンポーネントを設置する
3-3 電話をかけるロジックを記述しよう
ボタンがクリックされたときに電話をかける
3-4 電話をかけるロジックの動作テストをしてみよう
エミュレータに転送する
電話をかけるロジックを動作テストする
［memo］実機なら本当に電話がかかる
3-5 電話帳を呼び出してみよう
電話帳を開けるようにする
選んだ電話番号をテキストボックスに設定する
3-6 電話帳を呼び出せるかを確認しよう
実機で動作テストする
Q&A
第4章 Webで検索してみよう
4-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
4-2 検索入力画面を作ろう
タイトルを変更しよう
検索ボックスとボタンを設置しよう
［memo］空欄のときはヒントが表示される
4-3 Web検索できるようにしよう（1）
Web検索するための設定
アクティビティ起動できるようにしよう
［memo］パッケージ名やクラス名を間違えたときは
4-4 Web検索できるようにしよう（2）
検索できるようにしよう
4-5 Web検索の動作テストをしてみよう
実機に転送する
動作テストする
［memo］ブラウザで検索結果が開く
4-6 音声検索できるようにしよう
音声検索ボタンを配置する
音声認識のロジックを作る
テキストに変換されたときの処理を記述する
4-7 音声認識の動作テストをしてみよう
実機で動作テストする
Q&A
第5章 カメラで撮影してみよう
5-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
5-2 操作画面を作ろう
タイトルを変更しよう
［memo］めいっぱいに広げるにはスクロールしないようにする
5-3 ボタンがクリックされたときにカメラが起動するようにしよう
カメラの呼び出し機能を付けよう
ボタンがクリックされたときにカメラを呼び出そう
撮影した写真を表示しよう
［memo］撮影が完了するとAfterPictureイベントが発生する
5-4 カメラ機能の動作テストをしてみよう
実機で動作テストする
［memo］カメラ機能は機種によって異なる
5-5 らくがきできるようにしよう
軌跡を描く仕組み
写真の上にらくがきできるようにしよう
実機で動作テストする
［memo］エミュレータ上で動作テストできる
Q&A
第6章 地図を表示してみよう
6-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
6-2 現在の緯度・経度を表示する画面を作ろう
タイトルを変更しよう
GPSセンサーと表示用ラベルを配置する
［memo］LocationSensorで現在地を知る
6-3 緯度・経度を表示してみよう
緯度・経度を取得するボタンを作る
緯度・経度を表示する
［memo］GPS機能の有効化
6-4 緯度・経度を表示するロジックの動作テストをしてみよう
パッケージにして動作テストする
［memo］パッケージ化しないとGPSが使えない
6-5 自動的に緯度・経度が更新されるようにしよう
自動的に緯度・経度が更新されるようにする
6-6 現在地の地図を表示できるようにしよう（1）
アクティビティとは
地図を呼び出すボタンを配置しよう
アクティビティ起動できるようにしよう
6-7 現在地の地図を表示できるようにしよう（2）
文字を連結する「make text」
アクティビティで地図を起動する
パッケージにして動作テストする
［memo］パッケージを2回インストールできない
第7章 電子さいころを作ろう
7-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
7-2 さいころ表示の画面を作ろう
タイトルを変更しよう
［memo］画像を表示するImageコンポーネント
7-3 さいころの画像を登録しよう
画像をアップロードする
［memo］登録した画像を削除するには
7-4 さいころの目を回転させてみよう
Clockを配置する
ランダムに目が出るようにする
［memo］変数には一時的に値を保存できる
7-5 さいころを止めたり動かしたりしてみよう
実行してみよう
動いたり止めたりを制御する
ボタンがクリックされたときに動かしたり止めたりする
動作テストする
［memo］目押しを防ぐ
Q&A
第8章 じゃんけんゲームを作ろう
8-1 この章のポイント
この章で作るアプリ
ロジックのポイント
プロジェクトを新規作成する
8-2 じゃんけんゲームの画面を作ろう
タイトルを変更しよう
自分の手とコンピュータの手を表示する場所を作ろう
じゃんけんの画像枠を配置しよう
［memo］格子状に配置するTableArrangementコンポーネント
8-3 じゃんけん操作のボタンを配置しよう
自分の手を選択するボタンを配置しよう
［memo］それぞれのボタンには、わかりやすい名前を付ける
8-4 勝ち負けを表示するラベルを作ろう
勝ち負けを表示するラベルを作ろう
［memo］文字を表示したいときは、その場所をあらかじめ確保しておく
8-5 じゃんけんの画像を登録しよう
画像をアップロードする
［memo］登録順序は不定
8-6 変数を宣言しよう
変数とは
用意する変数
コンピュータの手を保存する変数を宣言する
自分の手を保存する変数を宣言する
［memo］数値を表現するにはnumberブロックを使う
8-7 数値と画像ファイル名とを対応させるリストを作ろう
リストとは
グー、チョキ、パーの画像リストを定義する
［memo］複数のデータを管理したいときにはリストを使う
8-8 自分の手とコンピュータの手が出るようにしよう（1）
ロジックの算段
プロシージャを定義する
「グー」「チョキ」「パー」のボタンがクリックされたときの処理を書く
8-9 自分の手とコンピュータの手が出るようにしよう（2）
全体の流れ
自分の手を表示する
コンピュータの手を決める
コンピュータの手を表示する
動作テストする
［memo］select list itemでリストからアイテムを取り出す
8-10 勝ち負けを判定しよう（1）
勝ち負け判定のロジック
引き分けを判定する
［memo］日本語を入力するには
8-11 勝ち負けを判定しよう（2）
勝ちかどうかを判定する
8-12 勝ち負けを判定しよう（3）
勝ちと負けを判定する
動作テスト
［memo］条件の指定
Q&A
補足資料
A JREをインストールしよう
B App Inventorをインストールしよう
C スマートフォンをつないでアプリを使えるようにするには
D Googleアカウントを取得するには
E アプリをアンインストールするには
