CapacitorとAndroid端末でつくるAndroidアプリ

AndroidタブレットのTermuxで、Capacitor製Androidアプリをビルドして実機にインストールするまでの手順です。PCもAndroid Studioも使いません。
今回の成果物は「Hello, world」を表示するだけのデバッグ版APKです。

Transcript

1. とAndroid端末でつくる Androidアプリ Capacitor 2026-10-10 Okayama. なんか もくもく会 発表資料 1
2. 自己紹介 ひだお（hidao80） 好きなこと: 情報整理：Markdown-vault × AI 自作ツール開発：PWA / UserScript / ブラウザ拡張 等 活動: 技術記事投稿：Qiita / Zenn / dev.to OSS個人開発：VS Code / Chrome拡張 / PWA モットー: 最適・最小・理性的 / 三方利益 HN: 2
3. TL;DR 端末だけで、Androidアプリを作って、その端末に入れた Android だけで完結（PCもAndroid Studioも不要） 2. CapacitorでWebアプリをAPKに包む 3. 最大のハマりどころは aapt2 がx86_64用 → Termux版に差し替えて回避 4. 成果物は「Hello, world」を出すデバッグ版APK 1. Termux 3
4. きっかけ：ふと思ったこと はLinuxカーネルで動く 2. TermuxでNode.jsも動くのは知っていた 3. Capacitorを知った 1. Android 「Android端末だけでAPKが作れるのでは？」 → 試したら、実際にインストールできるAPKができた 今日は「できた事実」と手順の共有 4
5. 仮説 自分の端末で、自分の道具を作る ビルドも実行も同じ端末の中で完結する 手元のWebアプリ（PWAなど）をそのままアプリ化できる 人間は「何を作るか」だけを考える 5
6. Capacitor とは チームが開発するオープンソースのネイティブランタイム HTML / CSS / JavaScriptのWebアプリをWebView上のネイティブアプリとして包む Ionic www/（Webアセット） ↓ npx cap sync android/（Androidプロジェクト） ↓ ./gradlew assembleDebug app-debug.apk 6
7. Capacitor で押さえる3点 の成果物（ www/ ）をAndroidプロジェクトへ同期してAPKにする Androidプロジェクトはソース管理の対象 （Cordovaのように毎回生成されない） CLIはグローバルでなくプロジェクトごとにnpmで導入 Web 対応環境: API 24（Android 7）以降／Chrome 60相当のWebView 7
8. 全体像：手順は3ステップ をインストール 2. 開発環境を作る（Node.js・JDK・SDK・aapt2） 3. Capacitorを導入してAndroidプロジェクトを作る 1. Termux → そのあとは cap sync → assembleDebug → インストール 8
9. 1. Termux のインストール 版のAPK（ arm64-v8a ）を入れる 起動後、パッケージを最新化し、ストレージを許可 GitHub Releases pkg update && pkg upgrade -y termux-setup-storage → ~/storage/downloads が「ダウンロード」フォルダーを指す 9
10. 2-1. パッケージのインストール pkg install -y nodejs openjdk-21 aapt2 git curl unzip パッケージ バージョン nodejs v26.4.0 openjdk-21 21.0.12 aapt2 16.0.0.4-2 10
11. 2-2. Android SDK をZIPで入れる なしで、Googleの配布ZIPを直接展開 Android Studio （API 36） build-tools_r36_linux.zip （Build-Tools 36.0.0） platform-36_r02.zip unzip -q platform-36_r02.zip -d ~/android-sdk/platforms unzip -q build-tools_r36_linux.zip -d ~/android-sdk/build-tools mv ~/android-sdk/build-tools/android-16 \ ~/android-sdk/build-tools/36.0.0 android-16 は 36.0.0 へ改名しないとGradleが認識しない 11
12. 2-3. 最大のハマりどころ：aapt2 が取得する aapt2 はx86_64用 ARM64のTermuxでは実行できない Gradle → pkg で入れたTermux版に差し替える echo 'android.aapt2FromMavenOverride=/data/data/com.termux/files/usr/bin/aapt2' \ >> ~/.gradle/gradle.properties 12
13. 3. Capacitor の導入 mkdir ~/apk-test && cd ~/apk-test npm init -y npm i @capacitor/core @capacitor/android npm i -D @capacitor/cli mkdir www # index.htmlを置く npx cap init apk-test com.example.app --web-dir www npx cap add android つとも 8.5.3 が入った 3 capacitor.config.json と android/ が生成される 13
14. 3. ビルド前に2つ設定が要る ① SDKの場所を教える echo "sdk.dir=$HOME/android-sdk" > android/local.properties ② Build-Toolsを固定する（AGP 8.13.0は35.0.0を要求する） android/build.gradle 末尾に buildToolsVersion = "36.0.0" を追記 ※ ANDROID_HOME では失敗した（原因は未解明） 14
15. 4. 作るアプリ：Hello, world www/index.html に、画面中央へ <h1>Hello, world</h1> を出すだけ npx cap sync android # www/ をAndroidへ同期 cd android && ./gradlew assembleDebug 初回はGradleと依存のダウンロードで時間がかかる 成果物は約4MB（4,117,590バイト） android/app/build/outputs/apk/debug/app-debug.apk 15
16. 実機にインストール cp ~/apk-test/android/app/build/outputs/apk/debug/app-debug.apk \ ~/storage/downloads/ ファイルアプリで ダウンロード/app-debug.apk を開く 2. 初回は提供元不明アプリの許可が必要 3. 起動して 「Hello, world」が出れば成功 1. 16
17. つまずきやすい3点 1. aapt2 : android.aapt2FromMavenOverride でTermux版へ の場所: android/local.properties の sdk.dir 3. Build-Tools: android/build.gradle で入れた版に固定 2. SDK 17
18. まとめ にNode.js・JDK 21・Termux版aapt2・Android SDKを入れれば、PCなしでビル ドできる ハマりどころはaapt2・sdk.dir・Build-Toolsの3点 改修は cap sync → assembleDebug → インストールで回せる 以前作ったPWAも同じ手順でアプリ化できた Termux 自分の端末で、自分の道具を作る 18
19. ご清聴ありがとうございました 19