生成AIでDIY ウェブアプリマップ

GIGAスクールで学校に入ったChromebook（タブレット）を、読み書きに困難のある子どもの「学びの道具」にするために、ブラウザだけで動く無料のウェブアプリを4つ作りました。この記事では、4つのアプリの全体像と、それぞれの使い方を紹介します。

4つのアプリはすべて、無料・インストール不要・アカウント登録不要です。学校の管理されたChromebookでも、ブラウザでURLを開くだけで使えます。

4つのアプリの全体像（アプリマップ）

「だれが・何のために使うか」で整理すると、次のようになります。横軸が「読み」と「書き」、縦軸が「子どもが使う」と「教員・支援者が使う」です。

「読む」を支える2つ — スキャンした教材が、読み上げできるようになる

読む支援の2つは、ステップ1→ステップ2の流れで一緒に使います。先生や支援者が教材を作り、子どもがそれを読む、という役割分担です。

ステップ1：ピタッとレンズ（OCR・教材づくり）

https://pitatto-lens.netlify.app

スキャンしたPDFや写真から、検索・読み上げができる「透明テキスト付きPDF」を作るアプリです。

  • 文字認識がすべてブラウザの中で完結します。教材や子どもの情報が外部のサーバーに送られないので、学校でも安心して使えます。
  • 縦書きに対応しています（国立国会図書館の技術を利用）。横書き・英語ももちろん読み取れます。
  • 認識結果はその場で直せます。間違っていそうな場所には警告マークが付くので、確認する場所がわかります。
ピタッとレンズの画面。縦書きの本を行ごとに検出し、右側で認識結果を編集できる
縦書きの本（芥川龍之介『蜘蛛の糸』）を行ごとに検出し（左）、認識結果はその場で編集できる（右）

活用アイデア：漢字の読み問題や英語の発音・アクセント問題のように「読み上げたら答えになってしまう」部分は、認識結果の編集でその文字を消しておくと、そこだけ読み上げないPDFが作れます。テストや課題への配慮に使えます。

ステップ2：とんとんリーダー（読み上げ）

https://tonton-reader.netlify.app

ピタッとレンズで作ったPDFを開き、読みたい行をタップすると、そこから読み上げるアプリです。

  • 「今どこを読んでいるか」が行の色でわかります。画面の下には読み上げ中の文が表示され、読んでいる言葉がハイライトされます。
  • 縦書きの読み順（右から左）に対応しています。
  • 難しい設定はありません。子どもの操作は「開く・タップ」だけです。
とんとんリーダーの画面。読んでいる行に色が付き、下の字幕では読んでいる言葉がハイライトされる
ピタッとレンズで作った『蜘蛛の糸』のPDFを読み上げ中。読んでいる行に色が付き、下の字幕も読んでいる言葉が光る

「書く」を支える2つ — ローマ字入力の前に、書ける

ローマ字を学ぶのは3年生。1・2年生や、読み書きに困難がありローマ字入力が難しい子も、「書きたいことがある」ことに変わりはありません。iPadなら50音配列のキーボードが選べますが、Chromebookにはその選択肢がなかったので、ブラウザで動くものを作りました。

ひらがなキーボードの画面。50音の並びのままタップして入力できる
ひらがなキーボード（50音の並びのままタップして入力）

ひらがなキーボード

https://hiragana-keyboard.netlify.app

  • 50音の並びのまま、画面をタップして入力します。濁点や小さい字の入れ方はiPadと同じ操作なので、子どもが混乱しません。
  • 書いた文章は自動保存されます。タブを閉じてしまっても作文が消えません。
  • 読み上げボタンで、自分の書いた文を耳で確かめられます。音声入力は、🎤をもう一度押すまで聞き続けるので、言葉がすぐに出てこなくても大丈夫です。
  • 書いた文章はコピーして、Googleドキュメントなどに貼り付けて使います。

ひらがなキッズキーボード

https://hiragana-kids-keyboard.netlify.app

漢字がまだ読めない子のための、ひらがな中心のキーボードです。

  • 音声入力をしても漢字にならず、ぜんぶひらがなで入ります。「読めない字が出てきて困る」ことがありません。
  • あとから言葉を選ぶと候補が出て、漢字やカタカナに変えていくことができます。学年に合わせて、少しずつ漢字を増やせます。

便利な開き方（2つのキーボード共通）

  • アプリとしてインストール（PWA対応）：Chromeのアドレスバー右端のインストールアイコンから追加すると、シェルフ（画面下のバー）のアイコンから1タップで起動できます。インストールしなくても、ブラウザでそのまま使えます。
  • 小さな窓で開く：hiragana-keyboard.netlify.app/open.html のボタンを押すと、画面下に最適な大きさの小さな窓でキーボードが開き、ドキュメントなどの横に置いて画面キーボードのように使えます（キッズ版はこちら）。

4つのアプリに共通する特長

  • 無料で使えます。
  • インストール不要（管理されたGIGA端末のブラウザでそのまま動きます）。
  • アカウント登録は不要です。
  • 入力内容・教材を外部に送らない設計です（ピタッとレンズは文字認識もブラウザ内で行い、キーボードの文章は端末内に保存されます。アクセス解析は回数のみ・Cookieなし）。

クレジット

ピタッとレンズは、橋本雄太氏（国立歴史民俗博物館、国立国会図書館 非常勤調査員）の NDLOCR-Lite Web（CC BY 4.0）を改変したものです。OCRエンジンには、国立国会図書館（NDL Lab）が開発した NDLOCR-Lite のモデルを使用しています。
とんとんリーダーは、NaturalReader にインスパイアされ、日本語の縦書きに対応するために作りました。