会員サイト

このチュートリアルでは、学習に使えるフラッシュカードアプリを作成します。カードは小型DBに保存されます。学習モードだけでなく、データベースアプリの基本機能であるCRUD機能（作成：Create、読み取り：Read、更新：Update、削除：Delete）もあります。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは三つのスクリーンを使っていますが、スクリーン毎に同じグローバル変数を設定したり小型DBなどの同じコンポーネントを使うのは煩雑なので、Screen1だけを使って三つのスクリーンを切り替えて使う、仮想スクリーンテクノロジーを使っています。仮想スクリーンではScreen1に複数の垂直配置コンポーネントを配置してブロック編集内で「目に見える」をON/OFFしてスクリーンを切り替えます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"FlashCard“と名前を付けます。

デザイン編集

Screen1のタイトルを"フラッシュカードアプリ“にします。

仮想スクリーンを作成

レイアウト パレットから 垂直配置コンポーネント を3個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順にメインスクリーン、一覧スクリーン、編集スクリーンという名前にしてください。それぞれの垂直配置コンポーネントが仮想スクリーンになります。それぞれの垂直配置コンポーネント(スクリーン)にコンポーネントを追加するときは他のスクリーンの目に見えるのチェックを外して作業してください。スクリーン切り替えにはこれらのプロシージャを使います。

“メインスクリーン“

• ユーザーインターフェース パレットから ラベル を1個追加し、名前をラベルカードに、高さは"親要素に合わせる"、横幅は"親要素に合わせる"、テキストは空白にします。
• レイアウト パレットから  水平配置コンポーネント を ラベルカードの下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置1になります。
• 水平配置1 の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前はボタンはじめ、ボタン切り替え、ボタン次、テキストは"始めから"、"表裏切り替え"、"次のカード"にします。
• レイアウト パレットから  水平配置コンポーネント を 水平配置1 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置2になります。
• 水平配置2 の中にユーザーインターフェース パレットから ボタン を2個追加し、左から順に名前はボタン追加、ボタン一覧、テキストは"カード追加"、"カード一覧"にします。

“一覧スクリーン“

• ユーザーインターフェース パレットから リストビュー を追加し、高さと横幅は"親要素に合わせる"に、リストビューレイアウトを"本文"にします。名前はリストビュー1になります。
• レイアウト パレットから  水平配置コンポーネント を リストビュー1 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置3になります。
• 水平配置3 の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前はボタンバック、ボタン編集、ボタン削除に、テキストは"戻る"、"編集"、"削除"にします。

“編集スクリーン“

• ユーザーインターフェース パレットから ラベル、テキストボックス、ラベル、テキストボックス をこの順番で追加し、名前をそれぞれラベル質問、テキストボックス質問、ラベル回答、テキストボックス回答 に、テキストは"質問入力"、""、"回答入力"、""にします。テキストボックス質問、テキストボックス回答の横幅は"親要素に合わせる"にし、マルチラインはチェックしてください。
• レイアウト パレットから  水平配置コンポーネント を テキストボックス回答 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置4になります。
• 水平配置4 の中にユーザーインターフェース パレットから ボタン を2個追加し、左から順に名前はボタンキャンセル、ボタン保存 に、テキストは"キャンセル"、"保存"にします。

非可視コンポーネントの追加

ストレージパレットから小型DBを、ユーザーインターフェース パレットから通知機能を追加します。

ここまでで下図のようになります。

ブロック編集機能を使用したプログラミング

買い物の追加、削除のできる買い物リストアプリを作ります

このチュートリアルでは、リストとリストビューを使って買い物リストアプリを作ります。アプリを再起動した後でもリストが消えないようにリストを小型DBに保存します。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"ShoppingList"と名前を付けます。

デザイン編集

Screen1のタイトルを"買い物リスト"にします。

ユーザーインターフェース パレットからラベル(ラベル1)、リストビュー(リストビュー1)、テキストボックス(テキストボックス1)、ボタン(ボタン1)を１個ずつビューアーに追加しプロパティーを次のように設定します。()内はコンポーネントの名前です。

• ラベル1: 太字フォント=チェック、テキスト="リスト"、フォントサイズ=20
• リストビュー1: 背景の色=グレー、
• テキストボックス1: 横幅=親要素に合わせる、ヒント="買い物を入力"
• ボタン1: テキスト="追加"

非可視コンポーネントとしてユーザーインターフェース パレットから通知機能コンポーネント(通知機能1)を1つ、ストレージ パレットから小型DBコンポーネント(小型DB1)を1つ追加します。

ブロック編集機能を使用したプログラミング

外出先で写真を撮った際に位置情報を取得し、それを地図上に表示・保存するアプリを作成します

このチュートリアルでは、外出先で写真を撮るとそのときの位置情報を位置センサーで同時に取得しそれを保存してあとで地図上で見ることができるアプリを作成します。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは三つのスクリーンを使っていますが、スクリーン毎に同じグローバル変数を設定したり小型DBやウェブコンポーネントなどの同じコンポーネントを使うのは煩雑なので、Screen1だけを使って三つのスクリーンを切り替えて使う、仮想スクリーンテクノロジーを使っています。仮想スクリーンではScreen1に複数の垂直配置コンポーネントを配置してブロック編集内で「目に見える」をON/OFFしてスクリーンを切り替えます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"PhotosOnMap“と名前を付けます。

デザイン編集

Screen1のタイトルを"写真地図"にします。

仮想スクリーンを作成

レイアウト パレットから 垂直配置コンポーネント を3個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に地図スクリーン、リストスクリーン、写真スクリーンという名前にしてください。それぞれの垂直配置コンポーネントが仮想スクリーンになります。それぞれの垂直配置コンポーネント(スクリーン)にコンポーネントを追加するときは他のスクリーンの目に見えるのチェックを外して作業してください。スクリーン切り替えにはこれらのプロシージャを使います。

“地図スクリーン“

• 地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。
• レイアウト パレットから  水平配置コンポーネント を 地図 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。
• 水平配置コンポーネント の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前とテキストを"リセット"、"写真撮影"、"一覧"にします。

“リストスクリーン“

• ユーザーインターフェース パレットから リストビュー を追加し、高さと横幅は"親要素に合わせる"に、リストビューレイアウトを"メインテキスト、詳細テキスト(横)"にします。
• レイアウト パレットから  水平配置コンポーネント を リストビュー の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。
• 水平配置コンポーネント の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前を"リストリターン"、"削除"、"詳細"に、テキストを"リターン"、"削除"、"詳細"にします。

“写真スクリーン“

• レイアウト パレットから  垂直配置コンポーネント を追加し、水平に整列するを"中央揃え"、高さと横幅は"親要素に合わせる"にします。
• 垂直配置コンポーネント の中にユーザーインターフェース パレットから画像、ラベルを2個、ボタンを１個追加します。画像は高さと横幅は"親要素に合わせる"、回転角度は"90.0″に、ラベルの名前は日時とコメントにし、テキストは空白に、ボタンは名前を"写真リターン"、テキストを"リターン"にします。

非可視コンポーネントの追加

ユーザーインターフェース パレットから通知機能を２個、メディアパレットからカメラ、センサーパレットからタイマーと位置センサー、ストレージパレットから小型DBとファイル、接続パレットからウェブを追加します。

ここまでで下図のようになります。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

データ構造

このアプリでは小型DBにデータのリストを格納しています。データはJSONでその構造はChatGPT-o1が設計したもので以下の通りです。

photosList = [
  {
    "imagePath": "file:///storage/emulated/0/DCIM/Camera/IMG_20250101_123456.jpg",
    "latitude": 35.xxxxx,
    "longitude": 139.yyyyy,
    "timestamp":  "2025-01-01 12:34:56",
    "comment":       "初日の出"
  },
  ...
]

JSONを直接作る機能はApp Inventorにはありませんが、ウェブコンポーネントにディクショナリをJSONにエンコード(Jsonオブジェクトのエンコードメソッド)・デコード(Jsonテキストデコードメソッド)する機能があるのでこれを使います。