チュートリアル,ユーティリティ

郵便番号を検索するアプリを作ります

標準のApp Inventor 2日本語版にSQLiteエクステンション、Zipエクステンション、Fileエクステンションを追加して使用しています。また、簡単なSQL言語を使用しています。なお、Android 11以降ではREAD_EXTERNAL_STORAGEの権限が拒否される場合があるため、エラーが出る可能性があります。

ソースコードを見ながらこのチュートリアルを読んだ方がわかりやすいと思います。ページの最後にあるダウンロードセクションからソースコードをダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[コンピュータからプロジェクト(.aia)をインポートします]を選択し、ソースコードを選択してインポートしてください。  

アプリの構造(流れ)

SQLite自体はAndroidに標準装備です。

データベースファイルの準備

  • 全国郵便番号データベース(約12万件)を事前にSQLite形式で作成し、このファイルをZIP圧縮してアセットに含めます。App Inventorのアセットの制限(5MB)を超えないように圧縮しています。
  • 圧縮ファイルがアセットにない場合、指定サーバーからデータベースZIPファイルをダウンロードして使用する機能もあります。

ZIPファイルの解凍とデータベースのインポート

  • ZIPファイルを解凍し、SQLiteにインポートします。その後、都道府県リストを取得してスピナーで表示します。

都道府県から町域までの選択フロー

  • 都道府県が選択されると、その都道府県内の市町村リストをスピナーに表示。
  • 市町村が選択されると、指定市町村内の町域リストを表示。
  • 最終的に町域が選択されると、郵便番号が表示されます。

    郵便番号データベースファイルの作成(App Inventorは使いません)

    郵便番号データの取得

    データの加工

    • ダウンロードしたデータからローマ字列を削除し、通し番号の列を追加します。
    • Shift JISからUTF-8に文字コードを変換して、CSVファイルとして保存します。

    SQLiteデータベースの作成

    • SQLiteのGUIツール(例: DB Browser for SQLite)でデータベースを作成し、データをインポートします。
    • テーブル構造は以下の通りです。

    CREATE TABLE "japanzip" (
    	"id"	INTEGER NOT NULL UNIQUE,
    	"zip"	TEXT,
    	"prefs"	TEXT,
    	"city"	INTEGER,
    	"street"	TEXT,
    	PRIMARY KEY("id" AUTOINCREMENT)
    );

    • 作成したデータベースをjapanzip.sqliteとして保存し、ZIP圧縮してjapanzip.zipとします。

    プロジェクトを作成

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

    エクテンションの追加

    • AppInventor extension for SQLiteからDownload AIXをクリックしてローカルパソコンにダウンロードし、org.bennedum.SQLite.aixをエクステンションパレットからエクステンションインポートをクリックしてインポートします
    • https://puravidaapps.com/zip.php からTaifunZip extension (aix file)をダウンロードし、com.puravidaapps.TaifunZip.aixをエクステンションパレットからエクステンションインポートをクリックしてインポートします。
    • https://puravidaapps.com/file.php からTaifunFile extension (aix file)をダウンロードし、com.puravidaapps.TaifunFile.aixをエクステンションパレットからエクステンションインポートをクリックしてインポートします。

    デザイン編集

    垂直配置レイアウトの設定

    • 垂直配置レイアウトをビューアーにドラッグアンドドロップし、水平に整列するは"中央揃え"、横幅は"親要素に合わせる"に設定します。
    • 以下のコンポーネントを順に追加します。それぞれのコンポーネントの名前はカッコ内のもの。

      • ラベル(タイトル):背景色="#4285f4ff"、フォントサイズ=32、テキスト="郵便番号検索"、テキストカラー="白"。
      • ラベル(空白):テキスト=空白。
      • スピナー(選択ドロップダウン):目に見えるはチェックを外します。
      • ラベル(初期化ラベル):フォントサイズ=10、テキスト="郵便番号データベースを初期化します。よろしければ下の初期化ボタンをクリックしてください。"、目に見えるはチェックを外します。
      • ボタン(初期化ボタン):テキスト="初期化"、目に見えるはチェックを外します。
      • ラベル(住所ラベル):テキスト="初期化中"、目に見えるはチェックを外します。
      • テキストボックス(郵便番号):目に見えるはチェックを外します。
      • ボタン(リセット):背景色="#4285f4ff"、テキスト="リセット"、テキストカラー="白"、太字フォントをチェック

    非可視コンポーネントなど

    • 接続 パレットから ウェブ を、ストレージ パレットから ファイル を追加。
    • japanzip.zip ファイルをアセットにアップロードします。

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

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    チュートリアル,ユーティリティ

    お絵かきアプリを作りましょう

    このチュートリアルでは、画面上で指を使って自由に絵を描ける お絵かきアプリ を作成します。クリアボタンで画面を消去し、何度でも描き直すことができます。

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

    デザイン編集

    キャンバスの追加

    ドローイングとアニメーションパレットから、 キャンバスコンポーネントをScreen1にドラッグアンドドロップします。

    キャンバスの高さと横幅を"親要素に合わせる"に変更します

    キャンバス1のプロパティの高さと横幅を"親要素に合わせる"に変更します。これにより、画面全体に描画スペースが広がり、どのサイズの画面でも対応できるようになります。

    画面クリアボタンを追加

    ユーザーインターフェースパレットから、ボタンをキャンバスの下にドラッグアンドドロップし、テキストを"クリア"に設定します。

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

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

    キャンバス.ドラッグイベントの追加

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    チュートリアル,ユーティリティ

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

    ここではスマホを振るとしゃべる機能としゃべる言葉を入力する機能を追加します。

    App Inventorを起動してログインし、TalkToMeプロジェクトを開いてください。App Inventorは前回開いたプロジェクトを自動的に開くので、もうTalkToMeプロジェクトが開いてあるかもしれません。

    デザイン編集

    加速度センサーを追加

    センサーパレットから、 加速度センサーコンポーネントをドラッグしビューアーに配置します。ドロップすると、ビューアー下部の非可視コンポーネントとマークされた領域に表示されます 。

    ブロック編集

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

    加速度センサーの揺れたらイベントをプログラム

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    チュートリアル,ユーティリティ

    話しをするアプリを作りましょう

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

    デザイン編集

    ボタンを追加

    ボタンのテキストを変更

    ボタン1のプロパティのテキストにある “ボタン1のテキスト”を消し、"話して!"と入力します。

    テキスト読み上げコンポーネントの追加

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内