- App InventorまたはThunkableで使用できるさまざまなコンポーネントを確認する
- アプリに役立つコンポーネントを1つ見つけよう
- チュートリアルを研究し、少なくとも1つのコンポーネントをアプリにコーディングする
このレッスンのアクティビティ：
スマートフォン・コンポーネント
アプリに使用するコンポーネント（センサーを含む）を選択し、コーディングしてみましょう。 様々なコンポーネントを利用することで、アプリは様々なことができるようになります！
このレッスンは、アプリで使用できる多くのコンポーネントについて学ぶための手引きです。
プラットフォームはもう決まっているかと思いますが、App InventorとThunkableの両方のコンポーネントをリストアップしておきます。
アプリに計画している機能を実装するために使えるコンポーネントを探しましょう。
種別ごとのコンポーネント一覧
この後に示すコンポーネントは、標準的なユーザーインターフェイス・コンポーネントの先にある、ユーザーがアプリと対話することを可能にするものです。
これは完全なリストではありませんが、現在利用可能なコンポーネントのほとんどをカバーしています。ThunkableとApp Inventorは、常に機能とコンポーネントを追加し続けています。
以下の情報は、こちらの資料にも掲載されています。
写真、オーディオ、ビデオなどの機能を必要とする場合、これらのコンポーネントは非常に役立ちます。
| 特徴 | App Inventor | Thunkable |
|---|---|---|
| 動画撮影が可能です。ソーシャルアプリや動画共有アプリなど、ユーザーに動画を撮影させたい場合に利用できる。 | Camcorder | Camera |
| ユーザーが写真を撮影できるようにします。これは、ユーザーがプロフィール写真を設定したり、写真を撮って共有したりギャラリーに保存したりするアプリに便利です。 | Camera | Camera |
| フォトライブラリから画像を選ぶことができます。ユーザーは、他のアプリで撮影した写真を選ぶことができます。 | ImagePicker | Files (photo library) |
| ユーザーがクリックできる動画をアプリに埋め込むことができます。動画は.wmv、.3gp、または.mp4で、1MBを超えない必要があります。 | VideoPlayer | Video |
| テキストを別の言語に翻訳できます。外部の翻訳サービスに依存するため、アプリがインターネットにアクセスできる必要があります。 | Translator | Speech |
| ユーザーが音やノイズを録音できるようにします。 | SoundRecorder | Sound |
| このオーディオコンポーネントは音を再生します。これは、歌やスピーチ、詩のような "長い "サウンドに最適です。Thunkableには、どのような長さのオーディオにも対応するSoundコンポーネントが1つだけあります。 | Player | Sound |
| Playerコンポーネントとよく似ていますが、通知の「チーン」のような短い音に最適です。 | Sound | Sound |
| ユーザーの発話をテキストに変換します。これは、ハンズフリー機能を必要とするアプリに特に便利です。 | SpeechRecognizer | Speech |
| このコンポーネントは、SpeechRecorderの逆を行います。ユーザーがテキストを入力すると、アプリがそれを読み上げます。 | TextToSpeech | Speech |
| アプリ内でJSONアニメーションを再生させることができます。 | Not available | Animation |
アプリで電話をかけたり、メールを送ったり、テキストを送ったり、ある種の情報を共有したりする必要がある場合は、こうしたソーシャル・コンポーネントが役に立つかもしれません。
| 特徴 | App Inventor | Thunkable |
|---|---|---|
| ユーザーのもつ連絡先を表示し、ユーザーがそのリストから誰かを選択できるようにします。 | ContactPicker | Not available |
| ユーザーの連絡先リストからメールアドレスを入力できます。 | EmailPicker | Not available |
| 連絡先リストから電話番号を選ぶことができます。 | PhoneNumberPicker | Not available |
| ユーザーがクリックできる動画をアプリに埋め込むことができます。動画は.wmv、.3gp、または.mp4で、1MBを超えない必要があります。 | VideoPlayer | Video |
| アプリから電話をかけることができます。 | PhoneCall | Share |
| ユーザーがアプリを通じて他のユーザーの携帯電話にテキストメッセージを送信できるようにします。 | Texting | Share |
| このオーディオコンポーネントは音を再生します。これは、歌やスピーチ、詩のような "長い "サウンドに最適です。Thunkableには、どのような長さのオーディオにも対応するSoundコンポーネントが1つだけあります。 | Player | Sound |
| ユーザーがアプリ内のメッセージ、画像、その他のコンテンツを、メールやメッセージングなど、ユーザーの携帯電話上の他のアプリと共有できるようにします。 | Sharing | Share |
| アプリとX(Twitter)間のコミュニケーションを可能にします。ツイートの検索、メッセージの送受信、フォロワーリストの取得などが可能です。 | Not available | |
| Thunkableでは、アプリに広告を追加することができます。すべてのアプリは、ダウンロードまたは公開する前に、まずThunkableによって承認されなければなりません。 | Not available | Ads |
これらのコンポーネントにより、アプリはウェブ、デバイス、他のアプリなど、アプリの外側にあるものとのやり取りが可能になります。
| 特徴 | App Inventor | Thunkable |
|---|---|---|
| カメラ、Googleマップなどの他のアプリや、ユーザーが作成したアプリを起動できるようにします。 | ActivityStarter | Open link (Control block) |
| アプリにマップを埋め込むことができます。App Inventorには、マップに追加できるマーカーやシェイプなどのコンポーネントがあります。これらの機能はThunkableのコードで追加されます。 | Maps | Maps |
| ユーザーがアプリ内でウェブページを閲覧できるようにします。 | WebViewer | Web Viewer |
| アプリが外部のウェブサイトと情報を送受信できるようにします。 | Web | Web API |
| アプリから電話をかけることができます。 | PhoneCall | Share |
| これらのコンポーネントは、アプリがBluetoothデバイスと接続できるようにします。 | Bluetooth Client, Bluetooth Server, BlueToothLE (extension) | Bluetooth Low Energy |
| このオーディオコンポーネントは音を再生します。これは、歌やスピーチ、詩のような "長い "サウンドに最適です。Thunkableには、どのような長さのオーディオにも対応するSoundコンポーネントが1つだけあります。 | Player | Sound |
| 外部ソース（センサー、ウェブ、データファイル）からデータを収集し、グラフで表示するために使用します。 | Chart, ChartData2D | Not available |
| Arduinoなどのシリアル・デバイスへの接続に使用できます。 | Serial | Not available |
| アプリのユーザがユーザ名とパスワードでサインアップできるようにします。これには、まずFirebaseアカウントを設定する必要があります。 | Not available | Sign-in |
| アプリ内にpdfファイルを埋め込むことができます。 | Not available | PDF Reader |
周囲の環境やユーザーに関する情報を収集する必要がある場合、App InventorとThunkableがアクセスできるセンサーをいくつか紹介します。
| 特徴 | App Inventor | Thunkable |
|---|---|---|
| 携帯電話が揺れているかどうか、縦持ちか逆さ持ちかを判断できます。この機能は、携帯電話の持ち方に応じて画面の向きを変えたり、アプリを揺れに反応させたい場合に非常に便利です。 | AccelerometerSensor | Accelerometer |
| 加速度センサーを使用して、携帯電話を持つユーザーの歩数を測定し、移動距離も推定できます。 | Pedometer | Not available |
| 携帯電話が傾いているかどうかを感知できる。加速度センサーよりも正確で、携帯電話の向きがどれだけ変化したかを測定できます。 | GyroscopeSensor | Gyroscope |
| 磁束密度の測定に使用します。すべての携帯電話がこの機能をサポートしているわけではありません。 | MagneticFieldSensor | Magnetometer |
| アプリが現在時刻を取得したり、タイマーを使用できるようにします。時間指定のアラームを設定したり、タイマーを使用する際に便利です。 | Clock | Timer |
| 携帯電話の位置の緯度と経度を収集します。このセンサーは、ユーザーの近くで興味のあるポイントを検索する必要があるときにいつでも役立ちます。 | LocationSensor | Location Sensor |
| 携帯電話が対象物に近づいているかどうかを知らせます。ユーザーが電話を耳に近づけているかどうかを知るためによく使われます。すべての電話がこの機能をサポートしているわけではありません。 | ProximitySensor | Not availalbe |
| アプリがバーコードを読み取れるようにします。 | BarcodeScanner | Camera |
| 周囲の気圧を測定します。 | Barometer | Not available |
| 周囲の相対湿度を測定します。ほとんどのモバイル機器では一般的ではありません。 | Hygrometer | Not available |
| 光量を測定します。 | LightSensor | Not available |
| アプリが他のNFC（近距離無線通信）搭載デバイスとデータを共有できるようにします。 | NearField | Not available |
| デバイスの物理的な向きに関する情報を、ロール、ピッチ、アジマスの3次元で提供する。 | OrientationSensor | Not available |
| 周囲（外部）の温度を測定します。 | Thermometer | Not available |
これらのコンポーネントを使用して、アプリやデバイス内、クラウド上にデータを保存することができます。
| 特徴 | App Inventor | Thunkable |
|---|---|---|
| アプリ内で情報を更新・保存できるブロック。アプリを閉じると情報は消去されます。 | Variable | App Variable |
| アプリが情報をモバイルデバイス上にローカルに保存・更新し、アプリ内で使用できるようにします。データは、アプリの実行間で保存および取得することができます。Thunkableでは、DataViewerとDataViewerGridは "Create your own Table "オプションを使ってローカルにデータを保存することができます。 | TinyDB | 格納変数 データビューアー リスト データビューアグリッド |
| アプリがクラウドにデータを保存、取得、更新できるようにすることで、アプリの異なるユーザー間でデータを共有できるようになります。ThunkableはFirebaseを使用したクラウド変数を提供します。DataViewerとDataViewerGridは、Airtable、Google Sheets、Webflowにリンクできます。App InventorのSpreadsheetコンポーネントはGoogle Sheetsにリンクしています。 | CloudDB FirebaseDB Spreadsheet | cloud Variable – (Firebase) DataViewer List DataViewerGrid |
分類用の機械学習モデルと生成AIツールをアプリ内で使用します。
| 特徴 | App Inventor | Thunkable |
|---|---|---|
| AIチャットボット、OpenAIのChatGPTとのコミュニケーションを可能にします。 | Chatbot | Open AI Services (text completion) |
| DALL-Eをアプリに組み込んで画像を作成・編集することができます。 | Imagebot | Open AI services (image generation) |
| 独自の機械学習モデル（画像、音声、ポーズ）を作成し、アプリで使用することができます。 | PersonalImageClassifier PersonalAudioClassifier PoseNetExtension TeachableMachine（これらはすべて拡張機能を追加する必要があります。） | Not available |
アプリ内で描画を可能にし、スプライトを追加してアニメーションやゲームを作成します。
| 特徴 | App Inventor | Thunkable |
|---|---|---|
| 画面上にユーザーが描画できる領域を追加します。また、アニメーション可能なスプライトを追加することもできます。 | Canvas | Canvas |
| これらのコンポーネントは、ゲームやアニメーションの中でアニメーションやインタラクションを行うことができる要素です。 | ImageSprite Ball |
Sprite |
App Inventor の Designer ウィンドウでコンポーネントを追加します。コンポーネントを表示するドロワーを開くには、パレットのカテゴリをクリックする必要があります。
アクティビティ：新しいコンポーネントを学ぶ
所要時間：60分
コンポーネントについて学ぶためにコンポーネントを選択する
- アプリで使用すると思われるコンポーネントやセンサーを少なくとも1つ選んでください。
- アプリでコンポーネントを使用するためのドキュメントやチュートリアルを検索します。 ここから始めましょう：
- その新しいコンポーネントを使ってアプリをコーディングしましょう
Tip
ベストプラクティスあなたが選ぶコンポーネントは、あなたのアプリにとって完璧である必要はありません！新しいコンポーネントについて学んでいることこそが重要なのです。うまくいきそうなものを選んで、もしうまくいかなくても大丈夫です。コーディングの世界では、この調査を「スパイク」と呼んでいます。なぜなら、あなたはできるだけ早く深く掘り下げようとしているからです（鉄道のスパイクを地面に打ち込むようなものです）。
生徒を導く質問もしApple Watch用のアプリを作るとしたら、Apple Watchにはどのような部品が搭載されていますか？ 心拍数モニター、ジャイロスコープ（歩数トラッキング用）、Bluetooth）。どのくらいのデータを収集しますか？そのデータを使ってAIモデルをトレーニングできますか？
メンターTipsは、AmeriCorpsから提供されたものです。
プログラマーとして学べる最高のスキルのひとつは、何かに行き詰まったときや使い方を学ぶ必要があるときに、助けとなるリソースを見つける方法です。
このアクティビティは実践練習です！
あなたが作りたいアプリとは必ずしも一致しないかもしれませんが、コンポーネントを使ったコーディングの練習は、自分のアプリを作るときに役立つでしょう。
振り返り
このレッスンは、アプリを構築するために使用できるすべてのコンポーネントのリファレンスです。コンポーネントの使い方を学ぶためにチュートリアルやドキュメントを見つけることは簡単ではありません！
前のスライド
次のスライド
主な用語のおさらい
- ユーザーインターフェースコンポーネント- ボタン、ラベル、テキストボックスなど、ユーザーが操作する標準的なコンポーネント。
- メディア・コンポーネント- メディア・コンポーネントの例としては、写真、オーディオ、ビデオがあります。
- センサー - 携帯電話に搭載され、さまざまな目的でデータを収集するさまざまな種類のデバイス。
- ソーシャル・コンポーネント- ユーザーがアプリを通じて電話をかけたり、メールを送ったり、テキストを送ったり、何かを共有したりできるようにする機能。
- コネクティビティ・コンポーネント - アプリがウェブや他のアプリなど、アプリの外の場所と相互作用できるようにする機能。
- ストレージコンポーネント - アプリ、デバイス、クラウドに情報を保存できるブロックとコンポーネント。
- AIコンポーネント- アプリ内で機械学習モデルや生成AIツールを使用できるようにするコンポーネント。
追加リソース
その他のApp Inventorのチュートリアルサイト：
- appinventor.org
- コーディングバス初心者コース(多くのコンポーネント・チュートリアル)
- GirlsCodeIt Technovationチュートリアル
- 全コンポーネント・リファレンス・リスト(印刷用Googleドキュメント）
