Ubuntu WebView を Bubblewrapで TWAアプリ化

カテゴリ

2026/05/09 11時android

ブラウザを使用して動かす、WebView化したデータベースや、ある特定化したサイトを閲覧するためにアプリ化する、これはWindows版Chromeの『ページをアプリとしてインストール』と同じ機能だが、Android版は対応していないので、Bubblewrap で、TWA（Trusted Web Activity）化して Android のネイティブアプリのように動かす apk ファイルを作成する。

TWAはHTTPSが必須で Tailscale Serve と Apache を組み合わせてHTTPS化する。

■Bubblewrap（Googleの公式ツール）のインストール
本来ブラウザ上でしか動かなかったJavaScriptを、サーバーサイド（パソコンやサーバー上）で実行できるようにしたオープンソースのランタイム環境、Node.js 20 LTS をインストール

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
# 確認
node -v && npm -v

Bubblewrapインストール問い合わせが４個あるが全てYes

sudo npm install -g @bubblewrap/cli
# 確認
bubblewrap --version

■passmanagerをアプリ化

メインデータのmanifest.jsonが外部からアクセスできないため、ローカルで直接指定

mkdir -p ~/passmanager-apk
cd ~/passmanager-apk
bubblewrap init --manifest https://ubuntu-sv.xxxxxxxx.ts.net/passmanager/manifest.json

以下の問い合わせがあるので、順次回答

英語の質問	意味	回答
Domain	ドメイン名	ubuntu-sv.xxxxxxxx.ts.net
URL path	URLパス	そのままEnter
Application name	アプリ名	そのままEnter
Short name	短いアプリ名	そのままEnter
Application ID	アプリID	com.vafee.アプリ名
new app version	バージョン	そのままEnter
Display mode	表示モード	standalone
Status bar color	ステータスバーの色	そのままEnter
Splash screen color	スプラッシュスクリーンの色	そのままEnter
Icon URL	アイコンの指定	そのままEnter
Maskable icon URL	マスク可能なアイコン	不要なのでそのままEnter
Monochrome icon URL	モノクロアイコン	不要なのでそのままEnter
Include Play Billing	課金機能	N
Request geolocation	位置情報	N
Key store location	キーストアの場所	そのままEnter
Key name	キーネーム	android そのままEnter
Do you want to create one now?	直に作成するか	そのままEnter
First and Last names	氏名	* *
Organizational Unit	部署名	vafee
Organization	組織名	vafee
Country	国コード	JP
Password for the Key Store	ビルド用パスワード	例)PassMgr2026#

~/passmanager-apk 完成したのでAPKをビルド Accept? (y/N) の問い合わせには Yes

cd ~/passmanager-apk
bubblewrap build

/home/vafee/passmanager-apk/ に、apk ファイルが生成されるが名称が『app-release-signed.apk』となるので、任意に『passmanager.apk』変更し、Android端末にインストール。単独アプリとして使用可能となった。

PassManager TWA - vafeeの気ままな空間
ゴルフ管理アプリ TWA - vafeeの気ままな空間
テニスアプリ TWA - vafeeの気ままな空間

記事一覧