Case study · iPhone app

Kanji Otter

JLPTの漢字(N5〜N1)を、長く楽しく続けられるように作ったiPhoneアプリです。
An iPhone app to learn JLPT kanji (N5 to N1), designed to keep learners going for the long run.

App Store サイト / Website

1. 全体の構成 Architecture

学習データはまずiPhoneの中に保存され、オフラインでも使えます。アカウントとクラウド保存はAzure、課金はApple、広告と分析はGoogleが担当します。
Progress lives on the iPhone first, so the app works offline. Azure handles accounts and cloud save, Apple handles payments, Google handles ads and analytics.

Kanji Otter architecture: iPhone app connected to Azure Functions, Cosmos DB, Microsoft Entra External ID, StoreKit 2, AdMob and Firebase iPhone app Swift · UIKit + SwiftUI 学習データ / Progress UserDefaults (offline first) 端末の鍵 / Device secret Keychain 写真から漢字 / Kanji OCR Apple Vision (ja-JP) ホーム画面 / Widget WidgetKit 6言語 / Localization EN · FR · ES · VI · ID · TH Microsoft Azure Azure Functions API Node 22 · TypeScript · 8 REST routes Azure Cosmos DB 1 document per account Microsoft Entra External ID player accounts · email + password Apple StoreKit 2 subscription · lifetime purchase Google AdMob rewarded ads (free plan) Firebase Analytics usage statistics HTTPS · save / restore sign-in → token (JWT) purchases ads events verify JWT

2. アカウントとクラウド保存 Accounts & cloud save

登録しなくてもすぐに使えて、あとからメールでアカウントを作れる「匿名ファースト」の設計です。
"Anonymous first": no sign-up needed to start, an email account can be added later.

  1. 初回起動 First launch アプリが匿名アカウントとランダムな秘密鍵(256ビット)を作り、Keychainに保存。 The app creates an anonymous account and a random 256-bit secret, stored in the Keychain.
  2. 自動保存 Auto save 許可リストにあるデータだけを送信。サーバーは秘密鍵のハッシュ(SHA-256)しか持ちません。 Only whitelisted progress keys are sent. The server only keeps a SHA-256 hash of the secret.
  3. アカウント連携 Link an account Entra External IDでメール+パスワードを登録。APIがトークン(JWT)の署名を検証します。 Email + password through Entra External ID. The API verifies the JWT signature, issuer and audience.
  4. 機種変更 New phone ログインすると進捗が戻ります。万一のために、時間をおいたバックアップも残します。 Sign in and progress comes back. A time-delayed backup copy protects against mistakes.

3. 学習の流れ Learning loop

「覚える → 試す → 忘れる前に復習する」を、ゲームの冒険にのせて続けられるようにしました。
"Learn → test → review before you forget", wrapped in an adventure so learners keep coming back.

Learning loop: study, challenge and spaced repetition reviews, then 278 varied missions to complete to travel up the river, with bosses, Japan travel spots, and new visuals and animations to unlock ① 学ぶ / Study kanji cards · dictionary photo → kanji (OCR) ② 試す / Challenge quizzes · rhythm game JLPT exam mode ③ 復習 / Review spaced repetition (SRS) 1 · 3 · 7 · 10 · 30 · 90 days 川の冒険 / The river: 278 steps ステップごとに違うミッションを達成して、川を上っていく Each step is a different mission to complete to travel up the river ボス戦 · 日本の観光地 · 新しいビジュアルとアニメーションを解放 Bosses · Japan travel spots · unlock new visuals and animations

4. 収益化 Monetization

無料でも学び続けられることを大切にしました。制限があるのは一部のモードだけです。
Learning must stay possible for free: only some modes have a limit.

無料 Free 5時間ごとに回復する回数制限。広告を見ると延長できます。ボス・SRS・川・辞書は無制限。 A quota that refills every 5 hours, extendable with rewarded ads. Bosses, SRS, the river and the dictionary are unlimited.
サブスク / 買い切り Subscription / Lifetime StoreKit 2で更新や他の端末での購入も追跡。以前の買い切り購入者はそのまま認識されます。 StoreKit 2 follows renewals and purchases from other devices. Earlier one-time buyers are recognized automatically.

5. 設計で考えたこと Design decisions

チュートリアル Tutorial

最初のゲームは案内つき。画面を少しずつ照らし、今さわるべきボタンだけを見せます。辞書などの説明は、その機能を初めて使うときに表示。毎日のまとめやストリークの通知は、チュートリアルが終わるまで待ちます。
The first game is guided: the screen is revealed step by step, highlighting only the button to tap next. Feature tips (like the dictionary) appear the first time you use them. Daily recaps and streak alerts wait until the tutorial is over, so new players are never overwhelmed.

ゲーミフィケーション Gamification

いろいろな練習で飽きないようにしています:選択クイズ、落ちてくる音符、なわとび、リズムゲーム、ボス戦、JLPT模試。
Many exercise types keep it fresh: multiple-choice quizzes, falling notes, jump rope, a rhythm game, boss battles and a JLPT mock exam.

ごほうびは4つの時間軸で設計しました。Rewards are designed on four time scales:

  1. すぐ Instant 正解ごとにカワウソが登場して反応。連続正解でコンボ、たまにレアなカワウソも。 Every right answer brings an otter that reacts; streaks of answers build a combo, and a rare otter shows up now and then.
  2. 今日 Today 一日のまとめと王冠、毎日のストリーク、そして川のミッション(ポイント、連続日数、カワウソの数など)。 A daily recap with crowns, a day streak to keep alive, and river missions (points, streak days, otters on screen…).
  3. 数週間 Weeks 278ステップの川を進み、ボスを倒して、日本の観光地を集める。 Travel along a 278-step river, beat bosses and unlock Japanese travel spots.
  4. 数か月 Months JLPTのレベルを上げ、模試に合格し、90日後の復習まで覚え続ける。 Climb the JLPT levels, pass the mock exam, and still remember kanji at the 90-day review.

6. 学んだこと What I learned

一番難しかったのは、ユーザーが実際にどう操作するかを理解することです。何を読み、何を読み飛ばすか。小さなつまずきで迷ったり、やめてしまったりする場面をひとつずつ減らしています。
The hardest part was understanding how people really use the app: what they read, what they skip, and the small blockers that make them feel lost or quit. I keep removing them one by one.