0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MIT App Inventorでの生成AIを搭載したアプリをつくってみたぁ(対話型Google検索お助けアプリの開発)

Last updated at Posted at 2025-03-15

はじめに

AIって機能も付いているので,最新の情報を収集することができます.これをMIT App Inventorで扱います.
MIT App InventorでChatBotを利用したアプリを作成したので,メモとしてここにまとめました.

参考にしたサイト
Gemini公式ドキュメントをもとに開発しました.
Grounding with Google Search

アプリ概要

調べたいことをAIに質問します.それについての解答をAIが返します.この返答にはURLも含まれておる,カフェのサイトや数学の解き方のサイトなど質問にたいする適したリンクが含まれます.また,対話型AIなので質問に対して深堀ができます.
例えば,

  1. ユーザー;カフェに行きたい
  2. Gemini:いくつかカフェを提案&どんなカフェ?
  3. ユーザー:落ち着いていてゆっくりできるカフェがいい!
  4. Gemini:適したカフェを提案&リンクの提供
    こんな風に人間と会話しているような感覚で調べものができるようになります!!!

主な技術
Grounding with Google Search
GeminiでGoogle検索を行う
Gemini公式ドキュメント Grounding with Google Search

Build an interactive chat
対話型でGeminiに質問を行う
Gemini公式ドキュメント Build an interactive chat

interactive chatについて

ここでは対話型のGeminiを使用しています.
MIT App InventorからGenimiを使用する方法(interactive chat)

デザイナー画面

スクリーンショット 2025-03-15 003029.png

一つのScreenでVerticalArrangement2つ使用して表示・非表示を場合分けを行っています.

VerticalArrangement_gemini

質問の入力,回答の表示画面.

機能 内容
VerticalScrollArrangement1 Label_text, ListView1, Label_responsText, Label_Historyを含む
Label_text Geminiからの解答
ListView1 Geminiが出力したURLのTitle
Label_responsText Geminiからのresponseを表示(エラー時に利用)
Label_History Button_viewHistoryクリック時に今までの対話の履歴を表示
HorizontalArrangement2 CircularProgress1, Button_viewHistory, Button_Resetを含む
CircularProgress1 Geminiのレスポンス待ち時間に表示するクルクル
Button_viewHistory 対話履歴の表示
Button_Reset リセット
Label1 表示テキスト「・質問」
HorizontalArrangement1 TextBox_question, Button_sendを含む
TextBox_question 質問の入力
Button_send 質問送信ボタン

VerticalArrangement_jumpURL

機能 内容
WebViewer1 ListViewでサイトを選択したらここに表示
Button_戻る VerticalArrangement_jumpURLを閉じて,VerticalArrangement_geminiを表示する

ブロック画面

変数

apukey

ご自身のキーを入れます.
blocks.png

url

GeminiへアクセスするURL

https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=

blocks (2).png

history

対話型でGeminiを使用するためにチャットの履歴を残す際につかう変数
blocks (1).png

text_info

Geminiからのレスポンスを格納する
blocks (3).png

url_info

Geminiが出力したURLを格納する
blocks (4).png

WebTitle_info

Geminiが出力したURLのタイトルを格納する
blocks (5).png

when Screen1. Initialize

スクリーン表示時に,TinyDBに保存しているGeminiとの履歴を取得する.
VerticalArrangement_jumpURLを非表示,VerticalArrangement_geminiを表示する.
blocks (6).png

when Button_viewHistory

Geminiとのチャット履歴を表示する.
blocks (9).png

when Button_send. Click

Geminiに質問を送信する.
blocks (10).png

when Web1. GotText

Geminiからのレスポンスの処理する,
blocks (11).png

when ListView1. AfterPicking

サイトのタイトルをクリックしたら,webviewerでそれを表示する.
blocks (12).png

when Button_戻る. Click

webviewerを閉じる.
blocks (7).png

実行結果

質問中の画面,クルクル
Screenshot_20250315-190914.png

回答
Screenshot_20250315-190926.png

リンクもあります
Screenshot_20250315-191100.png

もう一度質問すると,前回の質問に合わせた回答が返ってきます.
Screenshot_20250315-191001.png

おわりに

ノーコードでここまで作れるの楽しすぎる!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?