オープンソースでセルフホスト可能な複数人で使えるブックマークマネージャー「Linkwarden」を使ってみた

「Linkwarden」は複数人でブックマークを共有でき、さらにブックマークした時のページを画像形式で保存してくれるアーカイブ機能もついているオープンソースのブックマークマネージャーです。どんな感じで利用できるのかを実際に使って確かめてみました。

Linkwarden
https://linkwarden.app/

Linkwardenのセットアップ方法は手動で環境構築するものとDockerを利用するものがありますが、今回はDockerを利用するため、下記のリンクから自分の環境に合った方法でDockerをインストールします。

Install Docker Engine | Docker Documentation
https://docs.docker.com/engine/install/

今回はDebianを利用するため、下記のコマンドを入力しました。

sudo apt-get update
sudo apt-get install ca-certificates curl gnupg

sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

また、Gitがインストールされていない場合は下記のコマンドでGitについてもインストールしておきます。

sudo apt install git

環境が準備できたら下記のコードでLinkwardenのリポジトリをクローンします。

git clone https://github.com/linkwarden/linkwarden.git
cd linkwarden

そして下記のコードで環境変数の設定用のファイルを作成し、開きます。

touch .env
vi .env

「.env」ファイルには下記の内容を記述して保存すればOK。[シークレット]の部分と[PostgreSQLのパスワード]の部分には適当に作成したパスワードに置き換えてください。なお、ローカル環境ではなくサーバー上でホスティングする場合には「NEXTAUTH_URL」の部分をサーバーのURLに変更する必要があります。

NEXTAUTH_SECRET=[シークレット]
POSTGRES_PASSWORD=[PostgreSQLのパスワード]
NEXTAUTH_URL=http://localhost:3000

準備が整ったので、下記のコマンドでLinkwardenを起動します。

docker compose up

初回起動時にはしばらく時間がかかります。下記の表示が出れば起動完了です。

表示されているアドレスにアクセスするとログイン画面になるので、「Sign Up」をクリック。

表示名とユーザーネーム、パスワードを決めて「Sign Up」をクリックします。

ログイン画面に戻るので、先ほど作成したアカウントのユーザーネームとパスワードを入力して「Login」をクリック。

ダッシュボードが表示されました。さっそく右上の「New Link」をクリックしてリンクを追加してみます。

入力必須の項目はURLのみ。ということで、URLだけ入力して「Add」をクリック。

ところが、ずっと「Creating...」という表示が出たまま動かなくなってしまいました。

サーバーを見るとエラーが発生している模様。

原因はわかりませんが、今度は「Name」と「Description」を入力して「Add」をクリックしてみます。

自動で「Unnamed Collection」というコレクションが作成されました。ダッシュボードの表示もリンクの数・コレクションの数両方が増加しています。

「All Links」をクリックすると保存されている全てのリンクが表示されます。先ほど保存した「GIGAZINEトップページ」をクリック。

URLのほか、Descriptionに記入した内容が表示されました。また、保存時点のサイトのキャプチャーがPNG画像とPDF形式でアーカイブされています。「Screenshot」の矢印マークをクリックしてみます。

下図のような画像で保存されています。レンダリングの際に使用されるフォントがサイトのCSSで指定されているフォントとは異なるようで、やや違和感がありますが内容の確認には問題ありません。

「Edit Link」のタブではURL以外の部分を自由に書き換えることが可能です。

リンクの右上の「…」マークから「Pin to Dashboard」をクリックすると、リンクをダッシュボードにピン止めすることが可能です。

ピン留めすると下図のように表示され、いつでもアクセスしやすい状態になります。

「All Collections」タブではコレクションの管理が可能です。「New Collection」をクリック。

名前、コレクションのアイコンの色、詳細を入力して「Add」をクリックします。

コレクションが作成されました。「Manage Team」をクリック。

Linkwardenは複数人での使用を前提に設計されており、「Share & Collaborate」タブで「誰がこのコレクションを閲覧できるのか」という設定を行うことが可能です。初期状態ではこのコレクションに保存されたリンクを閲覧できるのはコレクションの作成者のみとなっており、アカウントを追加するか、コレクションを公開することで他の人が閲覧できるようになります。

「Delete Collection」タブではコレクションを削除することができます。コレクションを削除するとそのコレクション内に保存されていたリンク全てのデータが失われるとのこと。

コレクションにリンクを追加するには、リンクを保存する際の「Collection」設定でどのコレクションに保存するかを選択すればOK。

なお、タグ設定の方はコレクションとは異なり、その場で自由に作成することができます。

コレクションとタグを設定した状態で、URLを追加して「Add」をクリックしました。

すると自動でタイトルを取得して「Description」欄に記入してくれます。

左の「Tags」欄にはリンクに設定したタグが自動で並びます。クリックするとそのタグが設定されたリンクをまとめて表示することが可能。

画面上部にある検索窓からは保存したリンクを検索することが可能です。右上のフィルターアイコンから検索対象を「名前」「URL」「Description」「タグ」のどれにするかを複数選択できます。

フィルターの隣のアイコンをクリックすると検索結果を何で並び替えるかを変更できるようになっていました。

また、右上の名前をクリックして「Settings」をクリックするとアカウントの設定を行うことができます。

「Profile Settings」では表示名やユーザーネームを変更することが可能。

「Privacy Settings」ではアカウントをプライベートにする設定が存在しています。プライベートに設定したアカウントは他人に表示されない模様。

「Password」タブではパスワードの変更が可能となっていました。