これは何か
omiLinkは、ブックマークをAndroidのホーム画面みたいに並べられるPWAです。
普通のブックマーク機能ってリストかフォルダ階層なんですが、omiLinkはグリッド上にドラッグ&リサイズして配置できます。よく見るサイトを大きく、たまに見るサイトを小さく、みたいなレイアウトが自分で作れます。スマホのホーム画面にアプリを並べる感覚で、URLやメモを整理できます。
作った動機
ブラウザのブックマークって、数が増えると整理が辛くなるんです。フォルダで分類しても階層が深くなるし、リストだと全体が見えない。
スマホのホーム画面って、よく使うアプリを大きく置いたり、グループごとにまとめたりして、自分なりの配置を作りますよね。あの感覚でブックマークも管理できたら便利なのに、と思って作りました。
あとPWAにしているので、インストールすればブラウザとは独立したアプリとして使えます。スマホでもPCでも同じように使えます。
特徴
ウィジェット感覚の操作
各ブックマークをドラッグで移動、リサイズで大きさを変更できます。サイズに応じて表示も変わります——1×1ならアイコンのみ、大きくすればタイトルやOGP画像が表示される、みたいな。
メモも置ける
URLだけでなく、テキストメモも同じグリッドに配置できます。「あとで読む」記事のURLと、その時の思いつきのメモを並べて置けるのが便利です。
OGP画像の自動取得
URLを登録すると、自動的にOGP画像とファビコンを取得して表示します。グリッドを開いた時に何のサイトか視覚的にわかりやすいです。
PWAでインストール可能
ブラウザで開くだけで使えますが、インストールすればアプリとして独立して起動できます。オフラインでも直近のデータは見られます。
スタック
| 要素 | 選択 |
|---|---|
| フロントエンド | Vue 3 + TypeScript |
| バンドラ | Vite + vite-plugin-pwa |
| ドラッグ&リサイズ | interact.js |
| バックエンド | PocketBase（SQLiteベース） |
| インフラ | GCE無料枠 + Cloudflare Tunnel |
| CI/CD | GitHub Actions → 自動デプロイ |
今の状態
日常使いしています。ブックマークの整理が圧倒的にやりやすくなって、自分でも驚いています。細かい改善はちょこちょこやっていて、最近はグリッドの並び替え機能などを追加しました。