画像から読み取り

画像から読み取り
~ Build native Android app in Google AI Studio ~
~ Chat with Gemma4 ~

Google I/O Extended 2026 in Kyoto
LT発表資料

Transcript

1. Google I/O Extended 2026 in Kyoto LT大会 画像から読み取り ~ Build native Android app in Google AI Studio ~ ~ Chat with Gemma4 ~ 2026-06-27 13:00-17:00 Noriko Takiguchi GDG Kyoto: Co-Organizer Programmer
2. 試してみたこと ～ 画像から読み取り Google AI Studio A. Build an Android app (Gemini3.5 Flashモデル) 画像から「テキスト」を読み取るアプリ作成 ＆ デバイスでのUSB デバッグまで B. Playground Gemma 4 26B MoE モデルでの Chat 実行 Ollama ローカル環境 C. PC環境 (Apple M1 16GB RAM) Gemma 4 E2B モデルでの Chat 実行 　【感想】 　Build an Android app 　　1つのAndroid app 入門への道 　画像読み取り 　・人間による確認必要 　・文字読み取り精度 　　対象画像・使用モデルによる違い 　・要約読み取りとしての活用も
3. Build an Android app : プロンプト入力 画像の中の文字を読み取ってテキストに変換するアプリを作成してください。 画像はカメラで撮影するか、ライブラリから選択できるようにしてください。 また、読み取ったテキストを編集したり、コピーして他のアプリに共有できる機能も追加してください。 https://aistudio.google.com/apps Build + New app Gemini3.5 Flash Build an文字抽出精度 Android app 選択 適用 アイデアの入力 A
4. Build an Android app : 実装状況 [Gemini 3.5 Flash Ran for 502s] 文字読み取り (Image Text Reader) アプリケーションの実装が完了しました。 本アプリケーションは、カメラで撮影した写真やフォトライブラリから選択した画像に含まれるテキストを、最新の Gemini 3.5 Flash 認識エンジンを用いて瞬時にテキスト形式（ OCR）へ翻訳・抽出します。抽出されたテキスト は、ユーザーがその場で手動で任意の文字修正を行えるエディット領域を備え、ネイティブコピーや他のアプリへ のインプレイスな共有フローを完全に実現しています。 🎨 主な機能とデザインのポイント ・モダンで高コントラストなスレートテーマ (Slate Aesthetic) ・マルチメディア選択フロー 　・カメラで撮影 　・ライブラリ選択 ・インタラクティブなテキストエディター付き編集カード ・バックグラウンド処理と直感的なロード演出 ⚠ セキュリティに関する重要な警告 　APKファイルを公開したり、権限のない人物に共有したりしないように 🚀 テストと検証について A
5. Build an Android app : Preview A エミュレータ確認 ・レイアウト ・画面遷移 ・アプリアイコン
6. Build an Android app : Code Export 機能の利用 ・本格的な開発へ向けて ・不具合のデバッグへ向けて ・機能追加へ向けて A プラットフォームの制限 ・クライアントサイドのみ ・単一アクティビティ アーキテクチャ ・Jetpack Compose のみ ・スマートフォンとタブレットのフォームファクタのみ アイデアをすぐに確認できる利点
7. Preview : install to your device install to your device A デバイスへの install 機能 ＜事前処理が必要＞ 1. Android デバイスで有効設定に ・デベロッパー向けオプション ・USB デバッグ　 2. デバイスをパソコンに USB接続 ＜ボタンクリック＞ [ install viaUSB ]
8. Install app to your Android device A
9. Android アプリ使用例 ～ 文字読み取り OCR NOTEBOOK Swing' notebook Write in the new idea before forgetting it. TITLE A 7mm・Semi B5・30sheets カメラで撮影した画像から ライブラリ選択した画像から A 富島天主堂跡 フランス副領事レックの請願にもとづき、富島に、明治 二年（一八六九）に 完成したカトリック礼拝堂。本格的な赤レンガ造りのゴ シック様の建物で 大阪府庁・江之子島庁舎 などとともに、当時を代表す る洋風建築であった。 不要な文字
10. Android アプリ使用例 ～ 文字読み取り OCR ライブラリ選択した画像から 下記赤枠内： 左側の石碑の側面の文字内容とは全く異なる 読み取りが不確かな場合に、 それらしき誤った情報が出力されている 堺商工会議所 発祥之地 山本梅史生家の跡 明治二年十一月十一日生 大正十三年五月二十二日歿 本名 秀太郎 俳号 梅史・虚舟・一言 一世の奇才 浪華の生んだ名編集者 A
11. Gemma4 26B MoE 使用例 ～ 文字読み取り 対象画像を事前 upload https://aistudio.google.com/ Playground での Chat実行 Gemma 4 26B MoE 左側の石碑の側面の文字は読めませんか？ → 文字の読み取り →　 画像に写っている 2本の石碑の文字は、以下のように読み取れます。 左側の石碑 : 山本梅史生家の跡 （やまもと ばいし せいかのあと） 右側の石碑 : 坪高工会会議所 発祥之地 （つぼたか こうかい かいぎしょ はっしょうのち） 左側の石碑の側面（右側の石碑に面している側）には、右側の石碑と同じ内容 が刻まれています。 文字を読み取ると、以下の通りです。 坪高工会会議所 発祥之地 （つぼたか こうかい かいぎしょ はっしょうのち） おそらく、どちらの角度から見ても内容がわかるように、両方の石碑に同じ記念 文が刻まれているものと思われます。 誤った判断で全く読めていない 堺商 さかいしょう B
12. 画像内のテキストを、大きく分けて「右側の解説プレート」と「左側の浮世絵部分」に分けて書き起こし ます。 　 1. 右側の銀色のプレート（解説文） 木津川橋 木津川橋は慶応 4年 川口と江之子島を結ぶ新大橋として架けられた 当時 川口には大阪 開港・開港 に備えて 運輸所 （税関）が設置され 続いて居留地が設けられて新しい町並みが出現しつつあった また江之子島には 明治7年に大阪府 庁が建設されるなど行政の中心地であった 木津川橋は 明治9年には橋脚の一部鉄製となり 橋面は歩道と車道が分離された初めての橋となった が 明治18年の洪水で流出した 明治21年には輸入鉄材を使用した 橋長75.3m 幅員10.4mの鉄橋となった その後大正 2年には市電の開通により橋長 72.7m 幅員21.8m の3径間の立派なアーチ橋になった 現在の橋は昭和 41年に高潮対策事業の一つとして架け替えられた橋で橋長 75.55m 幅員21.60mの 鋼桁橋である 平成10年 大阪市 　 2. 左側の浮世絵部分 浮世絵の下部にある説明文： 『浪花百景之内 川口の新大橋 長谷川貞信画 神戸市立博物館蔵』 浮世絵内の文字（一部）： 川口の新大橋 （※浮世絵内の縦書きの筆文字は、書体や絵の一部としての性質が強いため、判読可能な範囲に留 めています。） Gemma4 26B MoE 使用例 ～ 文字読み取り 対象画像を事前 upload https://aistudio.google.com/ Playground での Chat実行 Gemma 4 26B MoE 画像中のテキストをよみだしてください。 →　 開市 運上所 経間 B
13. Gemma4 26B MoE 使用例 ～ 要約読み取り この画像をせつめいしてください →　 この画像は、大阪市にある **「木津川橋（きづがわばし）」の歴史を伝える記念碑（モニュメント） **を写したものです。 大きく分けて、左側の「絵画部分」と右側の「解説文部分」の 2つの要素で構成されています。 1. 左側：浮世絵のレプリカ 黒い石の台座には、江戸時代の浮世絵が埋め込まれています。 - 作品名 : 『浪花百景之内 川口の新大橋』 - 絵師: 長谷川貞信（はせがわ ただのぶ） - 内容:江戸時代の川口付近の活気ある様子が描かれています。人々が歩いたり、荷物を運んだり、馬に乗ったりしている様子が見て取 れ、当時の橋周辺の賑わいを視覚的に伝えています。 2. 右側：歴史の解説文 銀色のプレートには、木津川橋の変遷が詳細に記されています。主な内容は以下の通りです。 - 始まり : 慶応4年（1868年）に、川口と江之子島を結ぶ新しい大きな橋として架けられました。 - 発展: 大阪の開港に伴い、周辺に税関が設置されたり、行政の中心地（大阪府庁など）が整備されたりと、街が発展した歴史が書かれ ています。 - 橋の進化 : - 明治時代に鉄を用いたり、歩道と車道を分離した日本初の試みがあったこと。 - 明治18年の洪水で流失したこと。 - 明治21年に輸入鉄材を使った鉄橋になり、大正時代には路面電車が通るアーチ橋になったこと。 - 現在の橋 : 現在の橋は、昭和 41年（1966年）に高潮対策事業の一環として架け替えられた鋼桁橋（こうけたばし）であること。 - 設置: 平成10年（1998年）に大阪市によって設置されました。 まとめ この記念碑は、単なる橋の標識ではなく、 **「江戸時代から現代に至るまで、木津川橋がいかに大阪の発展とともに歩んできたか」 **を、 美しい絵画と詳細な記録によって後世に伝えるためのものです。 B
14. はい、画像に記載されている文字を読み取ります。 ### 文字起こし **ポンプ場 Pump Facility** 下水道を流れてきた 下水は、水環境保全 を センターに到達するころ 。 10mほど地下深く を流れています。放流 先の両方に自然流下で 流すことができる高さ までポンプでくみ上げます。 Gemma4 E2B 使用例 ～ 文字読み取り 対象画像を事前 upload Ollama ローカル環境 gemma4:e2b ※小さなモデルをPC にinstall 文字読みとり →　 ### 【読み方（ふりがな）】 **ポンプじょう Pump Facility** したすいどう をながれてきた げすいは、すいかんきょうほぜん を センターにとうたつするころ 。 じゅうメートルほどちかふかく をながれています。ほうりゅう さきのりょうほう にしぜんりゅうかで ながすことができるたかさ までポンプでくみあげます。 げすいどうかん 下水道管 河川 かせん には には 不要な文字 C
15. Gemma4 E2B 使用例 ～ 要約読み取り この画像を説明して下さい →　 この画像は、 **「ポンプ場（ Pump Facility）」**の仕組みと機能を図解した標識です。これは、主に都市や施設の排水処理システムにおい て、下水などの水を適切に管理し、自然な流れで河川へ放流するためのシステムを示しています。 以下に、図とテキストから読み取れる詳細を説明します。 ### 1. タイトル * **ポンプ場 (Pump Facility)**：このシステム全体がポンプによって駆動される施設であることを示しています。 ### 2. 図（システム）が示す内容 図は、水がどこから来て、どのように移動し、どこへ流れるかという流れを示しています。 * **水源の取り込み :** 下水道（または排水された水）がシステムに流入します。 * **汲み上げと移動 :** ポンプが水を汲み上げ、配管を通して次の工程へと運ばれます。 * **放流:** 汲み上げられた水は、最終的に河川へ自然な流れ（自然流下）で放出されるように調整されています。 ### 3. 説明文が示す機能（システムが担う役割） 図の下にあるテキストは、このシステムの目的と動作原理を説明しています。 * **水の管理 :** 下水道から流れてきた水が、「水頭保安性」（水位の安全性の確保）を保つように管理されます。 * **ポンプの役割 :** ポンプは、水を適切な高さまで引き上げ（くみ上げ）、自然に河川へ流れ落ちることができる十分な高さを確保する役 割を果たします。 ### まとめ この標識は、 **排水された水を集め、安全性を保ちながら、必要な水位まで汲み上げることで、その水を河川に自然に放流するためのイ ンフラ（ポンプ設備）の機能 **を視覚的に説明しています。 C
16. • Build Android Apps in Google AI Studio ◦ https://ai.google.dev/gemini-api/docs/aistudio-android?hl=ja • Build native Android apps in Google AI Studio ◦ Android Developers Blog : 19 May 2026 • Gemma 4 model overview ◦ https://ai.google.dev/gemini-api/docs/ai-studio-quickstart • Run Gemma with Ollama ◦ https://ai.google.dev/gemma/docs/integrations/ollama 参 考 リ ン ク