クレジットカード・銀行口座の番号を暗号化してローカルに安全管理するアプリ
- 🌐 Google Play Store: https://play.google.com/store/apps/details?id=xyz.enoki.wallet
- 📱 最新版 Android APK: ダウンロード
Wallet Wallet は、クレジットカードや銀行口座の情報を AES 暗号化 してデバイスのローカルストレージに保存する管理アプリです。
サーバーへのデータ送信は行わず、すべての情報はユーザーの端末内で完結します。
- クレジットカード情報の登録・管理(カード番号、有効期限、CVC など)
- 銀行口座情報の登録・管理(銀行コード・支店コード・口座番号など)
- カード情報の QR コード表示
- 暗号化ファイルによる端末間データ転送(エクスポート / インポート)
- JSON 形式でのデータエクスポート / インポート
- バイオメトリクス認証(Android)
- ダークテーマ対応
- Android アプリ対応(Capacitor)
| カテゴリ | 使用技術 |
|---|---|
| フロントエンド | Vue 3 + Vuetify 3 |
| 言語 | TypeScript, Pug, SCSS |
| ビルドツール | Vite |
| 状態管理 | Pinia + pinia-plugin-persistedstate |
| ルーティング | Vue Router (unplugin-vue-router) |
| 暗号化 | secure-ls (AES) |
| モバイルアプリ | Capacitor (Android) |
| バックエンド | PHP + MySQL(アカウント機能・プッシュ通知などオプション機能用) |
- Node.js(推奨: v22 以上)
- yarn
yarn installローカルストレージの暗号化に使用するパスワードを設定します。
リポジトリルートに .env ファイルを作成してください。
localStorageKey=ローカルストレージを暗号化するパスワードyarn dev開発サーバーは http://localhost:8990 で起動します。
yarn buildyarn lintwallet-wallet/
├── src/
│ ├── pages/ # ページコンポーネント(unplugin-vue-router で自動ルーティング)
│ ├── components/ # 共通コンポーネント
│ ├── js/ # ユーティリティ関数(暗号化・Ajax など)
│ ├── stores/ # Pinia ストア(カード・設定データの永続化)
│ ├── mixins/ # Vue ミックスイン
│ ├── styles/ # グローバル SCSS ファイル
│ ├── plugins/ # Vuetify などのプラグイン設定
│ └── router/ # Vue Router 設定
├── php/ # バックエンド PHP(アカウント機能・プッシュ通知用)
├── android/ # Capacitor Android プロジェクト
├── public/ # 静的ファイル
├── capacitor.config.ts # Capacitor 設定
├── vite.config.mts # Vite 設定
└── database.sql # MySQL テーブル定義
| パス | 説明 |
|---|---|
/ |
カード・銀行口座一覧(トップ) |
/create |
クレジットカード新規登録 |
/createBank |
銀行口座新規登録 |
/edit/:id |
クレジットカード編集 |
/editBank/:id |
銀行口座編集 |
/qrcode |
QR コード表示 |
/data-export |
データエクスポート |
/data-import |
データインポート |
/settings |
設定トップ |
/settings/display |
外観設定(テーマ・言語) |
/settings/profile |
プロフィール設定 |
/friendlist |
友達リスト |
/user/:userId |
ユーザープロフィール表示 |
/login |
ログイン |
/registar |
アカウント登録 |
/about |
このアプリについて |
/terms |
利用規約 |
/tutorial |
チュートリアル |
暗号化ファイル + パスワードで他の端末にデータを転送できます。
-
エクスポート(転送元の端末)
- 設定 → データエクスポート
- 8 文字以上のパスワードを設定
- パスワード確認を入力
- 「ファイルを保存」ボタンをクリック
- ファイルを共有、またはクリップボードにコピー
-
インポート(転送先の端末)
- 設定 → データインポート
- ファイルを選択、またはクリップボードから貼り付け
- エクスポート時に設定したパスワードを入力
- 「データをインポート」ボタンをクリック
- インポート完了後、データが上書きされます
- データは AES 暗号化されてファイルに保存されます
- パスワードを知っている人のみがデータを復号できます
- パスワードは 8 文字以上必須です
- データの整合性と形式を厳密に検証します
- インポートすると既存のカードと銀行口座データが上書きされます
- パスワードを忘れるとデータを復号できません
- ファイルは安全な方法で転送してください(メール、メッセージアプリなど)
アカウント機能・プッシュ通知・友達リストなどのサーバーサイド機能を使用する場合は PHP サーバーが必要です。
クレジットカード情報の管理のみを使用する場合は不要です。
- PHP と Composer をインストール
composer installを実行(リポジトリルートで)- リポジトリルート直下に
env.phpを作成し、以下を記述
<?php
define('DIRECTORY_NAME', '/プロジェクトルートのディレクトリ名');
define('VUE_APP_WebPush_PublicKey', 'パブリックキー');
define('VUE_APP_WebPush_PrivateKey', 'プライベートキー');
define('WebPush_URL', 'プッシュ通知を使うドメイン');
define('WebPush_icon', 'プッシュ通知アイコンのURL');
define('Default_user_icon', 'アイコン未設定アカウント用の初期アイコンURL');
define('MySQL_Host', 'MySQLサーバー');
define('MySQL_DBName', 'DB名');
define('MySQL_User', 'DB操作ユーザー名');
define('MySQL_Password', 'DBパスワード');
define('SMTP_Name', '自動メール送信時の差出名');
define('SMTP_Username', 'SMTPユーザー名');
define('SMTP_Mailaddress', '送信に使うメールアドレス');
define('SMTP_Password', 'SMTPパスワード');
define('SMTP_Server', 'SMTPサーバー');
define('SMTP_Port', 587);database.sqlを MySQL にインポート/makeApiForAdmin.phpにアクセスして API トークンを発行し、.envに記述
VUE_APP_API_ID=default
VUE_APP_API_TOKEN=発行されたアクセストークン
VUE_APP_API_ACCESSKEY=発行されたアクセスキー
VUE_APP_API_HOST=APIサーバーのホストyarn build
npx cap sync android
# Android Studio で android/ フォルダを開いてビルドCopyright (c) 2019-present エノキ電気