PROJECT 02 / BOOKMARK & CREDENTIAL MANAGER

ブックマークと認証情報を、
ひとつの場所で安全に管理する。

ブックマークもパスワードも、気づけばあちこちに散らばっていませんか?
neuKuraはその2つを1か所にまとめて、しかも「あのページ、なんだっけ?」でも 検索で見つけられるようにしたアプリです。 パソコンでもスマホでも同じデータを使えるようにしています。

STATUS
Documentation
PERIOD
2026年6月〜(継続開発中)
ROLE
個人開発(設計・実装・運用すべて担当)
ブックマーク検索・一覧画面
ログイン情報の編集画面
シークレット一覧画面

ブックマーク検索画面/認証情報の編集画面/シークレット一覧画面(Alpine.jsによるピッカーUI)

01 / BACKGROUND

課題設定

ブラウザのブックマーク、メモアプリのリンク集、パスワード管理アプリ… 便利なものはたくさんあるのに、結局バラバラに使っていて、 「あれどこに保存したっけ」を毎回やっていました。 ブックマークもたまってくると、タイトルだけでは中身を思い出せず、 キーワード検索をかけても言い回しが違うだけでヒットしないこともよくありました。

さらに、Wi-Fiのパスワードやライセンスキー、暗証番号のような 「URLを持たない情報」は、ブックマーク管理サービスでは扱いにくく、 結局メモアプリに書き殴って迷子になりがちでした。 これらを全部1つのアプリにまとめて、パソコンでもスマホ(iPhone)でも 安全にサッと取り出せるようにしよう、というのが出発点です。

02 / ARCHITECTURE

設計・アーキテクチャ

バックエンド
Laravelで構築。「画面の裏側の処理」と「実際にDBを読み書きする処理」を 役割ごとに分けて書く設計(Service + Repositoryパターン)を採用し、 あとから修正・テストしやすいようにしています。
データの持ち方
ブックマーク本体(bookmarks)を中心に、 URLがある認証情報はそのブックマークに紐づけて(credentials)、 Wi-Fiパスワードのように「URLを持たない情報」は別テーブル(secrets)で 管理しています。用途で保存場所を分けることで、あとの検索や表示処理を単純にしています。
意味で探せる検索
ブックマークの内容をAIで数値の並びに変換(ベクトル化)して保存し、 「言葉の意味の近さ」で検索できるようにしています。 タイトルの言い回しが違っていても、内容が近ければヒットします。
アクセス権限
Laravel Sanctumというトークン認証の仕組みを使い、 Chrome拡張からは「読み取りだけ」「書き込みも可」のように 権限を細かく分けたトークンを発行しています。
PC・スマホ対応
PCのChromeでは拡張機能がログインフォームを見つけて自動入力し、 iPhoneではショートカット機能を使ってSafari上で同じことができるようにしています。
03 / TECHNICAL HIGHLIGHTS

技術的な工夫

01

ローカルLLMを使用

サイトの概要生成やRAG検索のためのベクトル化を 自宅PCでLLM(gemma4-e4b、multilingual-e5-large) を動かして行うようにしました。

02

安全なパスワードをその場で自動生成

ブラウザの標準機能だけで安全な乱数パスワードを作れるようにし、 生成してそのまま保存するところまでを1つの画面で完結させています。

03

1Passwordからまるごとお引っ越し

現在使用中のパスワード管理ソフトからエクスポートしたデータを、コマンド1つで取り込めるようにしました。 URLがあるものとないものを自動で見分けて、それぞれ正しい場所に振り分けます。

04

サイトのアイコン取得で画面を待たせない

ブックマークを登録した瞬間に画面を止めないよう、 サイトのアイコン取得は裏側で後追い処理にして、 表示にあとから差し込む形にしています。

04 / PROBLEMS & SOLUTIONS

つまずいた点と解決

Chrome拡張からアクセスすると、なぜか認証が通らない

認証の仕組みを組み込む設定が1か所抜けていたのが原因でした。 設定を見直して解決。

認証情報のテーブルを2つに分けたら、急にエラーが出るように

テーブル同士のつながり方の定義が中途半端に残っていたのが原因。 1つずつ洗い出して直しました。

iPhoneショートカットからのレスポンスが遅い

ショートカットのJavaScript実行機能自体がボトルネックになっている ことを確認。将来的にネイティブアプリ化を検討中。

件数が増えたら、最初のレトロ風デザインが逆に見づらくなった

情報量が増えても読みやすいデザインに全面リニューアル。 今のすりガラス風のシンプルな見た目に作り直しました。

05 / STACK

使用技術

Laravel PHP MySQL Laravel Sanctum Alpine.js Web Crypto API Chrome Extension (MV3) iOS Shortcuts gemma4-e4b multilingual-e5-large RAG / 意味検索
NEXT PROJECT
家計簿アプリ用 API
詳細を見る