Ubuntu Weekly Recipe

第867回「後で読む」サービスのWallabagをUbuntuでセルフホストする

Wallabagとは

現在、Webには様々な情報が次々と流れてきます。ですがこうした情報のひとつひとつを、その場で順番通りに熟読するのは非効率ですし、なにより現実的ではありません。そこで興味のある記事にはマークをつけておき、あとでまとめて読む、というスタイルを取っている方も多いのではないでしょうか。また最近のSNSは、ポストが必ずしも時系列に並ばなくなってきています。⁠朝見かけたポストで紹介されていた面白そうな記事に、二度と辿りつけない」といった経験のある方も多いでしょう。そのため「面白そうなものは、見かけたらその場でクリップする」重要性は、ますます高まっているのではないでしょうか。

WebブラウザのFirefoxを利用している方であれば、MozillaのPocketというサービスをご存知でしょう。これはWebページを「あとで読む」ために保存するサービスです。PocketはFirefoxと統合されており、クリックひとつでそのWebページを保存できます。また保存したページはスマホ、タブレット、PCなど、プラットフォームを問わずに読むことができます。例えば通勤電車の中で、スマホから興味のある記事を保存し、出社後にPCから読むといったことも簡単です。

そんな便利なPocketですが、2025年7月8日をもって終了することとなりました。Pocketユーザーは、急ぎ代替サービスを探さなくてはなりません。

そこでお勧めなのが、オープンソースの「後で読む」サービスであるWallabagです。今回はUbuntu 24.04 LTSのサーバー版の上に、Wallabagを構築する方法を紹介します。

Wallabagのインストール

それではWallabagをインストールしていきましょう。Wallabagはその性質上、様々な場所からアクセスできないと、その旨味を発揮できません。そのためサーバーはVPSやクラウドを利用し、インターネット上に構築することを強く推奨します。またインターネットを通じて通信するのであれば、HTTPS化も必要でしょう。その場合、インターネット上で利用できるドメインも必要となります。ここではクラウド上にUbuntu 24.04 LTSのサーバーを用意し、DNSが設定済みであるという前提で解説します。

WallabagはPHP製のアプリケーションです。PHP 7.4以上と、ライブラリのインストールにcomposerが必要となります。データベースとしてMySQL/PostgreSQL/SQLiteのいずれかを使用するため、データベースサーバーも必要です。またキャッシュとしてRedisを使うこともできます。つまりこの手のアプリにありがちですが、一言で言えばインストールが非常に面倒くさいのです。

こういう時は、そう、コンテナです。Wallabagはコンテナイメージを公開しています。アップデートの手間などを考慮しても、各コンポーネントを個別にインストールするより、Dockerを使う方法を推奨します。まずUbuntuにDockerとdocker-composeをインストールしてください。

$ sudo apt install -U -y docker.io docker-compose-v2

データを永続化するためのディレクトリを作成します。

$ sudo mkdir -p /srv/wallabag/{images,data}

compose.yamlを以下の内容で作成します。サーバーのFQDNは、お使いの環境に合わせて適宜変更してください。またここではデータベースに内蔵のSQLite3を利用し、データベースコンテナは使わない設定としています。

services:
  wallabag:
    image: wallabag/wallabag:2.6.13
    environment:
      - SYMFONY__ENV__DOMAIN_NAME=http://サーバーのFQDN:8080
      - SYMFONY__ENV__FOSUSER_REGISTRATION=true
      - SYMFONY__ENV__FOSUSER_CONFIRMATION=false
    ports:
      - "8080:80"
    volumes:
      - /srv/wallabag/images:/var/www/wallabag/web/assets/images
      - /srv/wallabag/data:/var/www/wallabag/data

コンテナを起動します。

$ sudo docker compose up -d

ブラウザから、サーバーの8080番ポートに接続してみましょう。以下のログイン画面が表示されれば成功です。

図1 Wallabagのログイン画面

SSL証明書の取得とリバースプロキシの設定

このように、コンテナを使えば簡単にWallabagを起動できます。ですがインターネット上でWebアプリを運用するのに、平文で通信するのは好ましくありません。そこでSSL証明書を発行した上で、nginxをリバースプロキシとして、SSL終端を行いましょう。なおコンテナの前段にnginxを利用したこの構成は、第807回でも採用していますので、参考にしてください。

以下のコマンドでnginxとcertbotをインストールします。

$ sudo apt install -U -y nginx certbot python3-certbot-nginx

以下のコマンドで証明書を発行してください。いくつかの質問が表示されますので、適宜入力します。⁠Successfully received certificate.」と表示されたら、証明書の発行は完了しています。

$ sudo certbot --nginx -d サーバーのFQDN

/etc/nginx/sites-available/defaultというファイルを、以下の内容に書き換えてください。server_nameや証明書のパスには、サーバーのFQDNを指定する必要があります。お使いのサーバーのドメイン名にあわせて、適宜変更してください。

server {
        listen 80;
        listen [::]:80;
        server_name サーバーのFQDN;

        location / {
                return 301 https://$host$request_uri;
        }
}

server {
        listen 443 ssl;
        listen [::]:443 ssl ipv6only=on;
        server_name サーバーのFQDN;

        ssl_certificate /etc/letsencrypt/live/サーバーのFQDN/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/サーバーのFQDN/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;

        location / {
                proxy_pass http://localhost:8080;
       }
}

nginxを再起動します。

$ sudo systemctl restart nginx.service

これでHTTPSでの通信が可能になるため、compose.yamlの以下の行を書き換えてください。

(変更前) - SYMFONY__ENV__DOMAIN_NAME=http://サーバーのFQDN:8080

(変更後) - SYMFONY__ENV__DOMAIN_NAME=https://サーバーのFQDN

コンテナも再起動します。

$ sudo docker compose down
$ sudo docker compose up -d

ブラウザから、今度はポートを指定せずに接続してみましょう。HTTPSにリダイレクトされ、以下のログイン画面が表示されれば成功です。

図2 HTTPS化されたWallabagのログイン画面

アカウントの作成とサインアップの禁止

起動直後のWallabagにはアカウントが存在しません。まずはアカウントを作成しましょう。Wallabagのログイン画面で「REGISTER」をクリックしてください。サインアップ画面に遷移しますので、メールアドレス、ユーザー名、パスワードを入力して「REGISTER」をクリックします。

図3 Wallabagへのサインアップ

アカウントの作成が完了したら、以下の画面が表示されますので「GO TO YOUR ACCOUNT」をクリックしてください。Wallabagのダッシュボードに遷移します。

図4 アカウント作成の完了

この状態ではWallabagのアカウントは誰でも作れてしまいます。個人で利用するアプリの場合、最初に自分用のアカウントを作ってしまった後は、サインアップ機能は不要でしょう。というわけで無効にします。compose.yamlを以下のように変更して、コンテナを再起動してください。

(変更前)
- SYMFONY__ENV__FOSUSER_REGISTRATION=true
- SYMFONY__ENV__FOSUSER_CONFIRMATION=false

(変更後)
- SYMFONY__ENV__FOSUSER_REGISTRATION=false

ログイン画面から、⁠REGISTER」のボタンが消えます。この状態ではサインアップ用のURLに直接アクセスしても、ログイン画面に遷移するため、サインアップはできません。

図5 サインアップを禁止した状態のWallabag

Wallabagの使い方

Wallabagの基本的な使い方を解説します。より詳しくはユーザー向けドキュメントを参照してください。

UIの日本語化

Wallabagにログインしたら、右上のアイコンをクリックして「Config」を選択します。これで設定画面に入れます。まずはSettings→Languageを日本語に変更しておくとよいでしょう。⁠SAVE」ボタンをクリックすると、変更が反映されます。

図6 日本語化した状態

ほかにもここでは、Wallabagのアイテムの表示設定、保存した記事をAtomリーダーで読むためのフィード配信、ユーザーのパスワードや二要素認証の設定、自動的なタグづけルールの設定などが可能です。より詳しくは設定に関するドキュメントを参照してください。

記事を保存する/読む

Wallabagのダッシュボードを表示したら、右上の「+」アイコンをクリックしてください。URLの入力エリアが開きますので、保存したい記事のURLを入力してEnterを押します。

図7 保存したい記事のURLを入力する

すると該当URLの記事が、未読として追加されます。

図8 未読に記事が追加された

クリックすることで、記事の本文を読めます。また保存した記事はお気に入りに追加したり、未読/既読を自由に切り替えることも可能です。既読になった記事はアーカイブされ、サイドバーの「未読」から「アーカイブ」へ移動されます。

図9 Wallabag上で保存された記事を読む

ブラウザの拡張機能から記事を保存する

とはいえ、わざわざURLを手で入力して記事を保存するケースはほとんどないでしょう。通常はブラウザで表示した記事を、後で読むためにストックしておくという使い方がメインになるはずです。つまりブラウザ側に、Wallabagへ記事を保存する機能が必要になります。そして今時のアプリとして当然ですが、Chrome/Firefox向けの拡張機能Wallabaggerが提供されています。これを利用しましょう。お使いのブラウザの種類に応じて、以下からインストールしてください。筆者はFirefoxを使用しました。

アプリからWallabagへアクセスするには、まず最初にクライアントを作成する必要があります。Web UIからWallabagにログインしたら、右上のアイコンをクリックして「APIクライアント管理」をクリックしてください。ここで「新しいクライアントを作成」をクリックします。

図10 新しいクライアントを作る

識別しやすいよう、クライアントに任意の名前をつけてください。リダイレクトURIは空欄のままで構いません。⁠新しいクライアントを作成」をクリックします。

図11 新しいクライアントに名前をつける

するとクライアントIDとクライアントシークレットが発行されます。これを控えておいてください。

図12 クライアントIDとクライアントシークレットを保存する

拡張機能の設定画面に入ってください。最初に「Wallabag URL」に自分のサイトのURLを入力して、⁠URLを確認」をクリックします。URLが正しければ、認証情報を入力するテキストボックスが表示されますので、クライアントID、クライアントシークレット、ユーザー名、パスワードを入力した上で「トークンを取得」をクリックしてください。右上の「Wallabag APIトークン」「付与済み」となれば成功です。

図13 拡張機能からWallabagを使用する設定

保存したい記事をブラウザで表示したら、ツールバーにあるWallabagのアイコンをクリックしましょう。ワンクリックで記事を保存できます。

図14 記事の保存時に、タグをつけることも可能。タグはカンマ区切りで複数指定できる
図15 Web UIからも記事が保存されていることを確認できた

スマホアプリからWallabagを使う

冒頭で「通勤電車の中でスマホから興味のある記事を保存し」と述べたように、今時の情報収集はスマホからできないと話になりません。そこでWallabagのスマホアプリを活用しましょう。WallabagではAndroid/iOS向けにスマホアプリをリリースしています。今回はAndroid用で検証しました。

アプリをインストールして起動すると、初回設定画面が表示されます。セルフホストのサーバーを利用するため「Other」を選択してください。するとサーバーのURL、ユーザー名、パスワードを入力する画面が表示されますので、正しい情報を入力してください。なおスマホアプリでは、クライアントIDやシークレットの発行は必要ありません。またWallabagのWeb UIから設定画面に入ると、スマホアプリの設定用のQRコードが表示されています。これを読み込めば、URLとユーザー名の入力を省略できます。

図16 初回は接続するWallabagサーバーを設定する
図17 スマホアプリで保存された記事を表示した例

スマホアプリからも、URLを入力して記事を保存できます。ですが言うまでもなく、これは非常に面倒です。そこで「共有」を使って記事を保存することを推奨します。Webブラウザ(Androidの場合であればChromeでしょう)で保存したい記事に出会ったら、ハンバーガーメニューから「Share」を選択します。そして共有先にWallabagアプリを指定してください。これだけで記事を保存できます。

Pocketからのインポート

最後にPocketからのデータの移行方法を紹介します。最も簡単なのは、Pocket側でCSVをエクスポートし、それをWallabagへインポートすることです。

図18 Pocketにログインした状態。いくつかの記事が保存されている状態でエクスポートを試してみる

WebブラウザでPocketにログインしたら、エクスポート用のURLにアクセスしてください[1]。そして「CSVファイルをエクスポート」と書かれたリンクをクリックします。

図19 ここからデータをエクスポートする

しばらく待つと、エクスポートされたデータのダウンロードリンクの書かれたメールが届きます。メールの指示に従ってダウンロードしてください。ダウンロードしたデータはZIPで圧縮されていますので、展開しておきましょう。⁠part_000000.csv」といった名前のファイルが展開されることを確認してください。

WallabagのWeb UIにログインしたら、右上のメニューから「インポート」を選択します。インポートできるサービスやデータ形式の一覧が表示されますので、⁠Pocket CSV」を探して「コンテンツをインポート」をクリックします。

図20 Pocket CSVをインポートする

「ファイル」をクリックすると、ファイルを開くダイアログが表示されます。先ほど展開したCSVファイルを選択してください。⁠ファイルをアップロード」をクリックすれば、CSVファイルの内容がインポートされます。

図21 インポートするCSVファイルを選択する
図22 Pocketの記事がインポートされた状態

Pocketのサービス終了は目前に迫っています。またデータのエクスポートも10月8日までに行う必要があり、この日以降、すべてのデータは削除されてしまいます。つまりデータの移行には3か月しか猶予がありません。Dockerでお手軽にセルフホストできるWallabagは、有力な移行先となるのではないでしょうか。

なおWallabagでは、Wallabag.itというサービスも運営しています。こちらは有償のサービスとなりますが、自分でサーバーをインストールすることなく、アカウントの作成のみでWallabagを利用できます。ですがこうしたマネージドなサービスは手軽に利用できるものの、サービスの継続性やコントロールを第三者に任せることになります。対して手間はかかるものの、すべてを自分の責任の下にコントロールできることが、オープンソースのメリットのひとつです。オープンソースの導入全般に言えることですが、かけられるコストやリスクを考慮した上で、第三者のサービスに乗るのかセルフホストするのかを判断するとよいでしょう。

おすすめ記事

記事・ニュース一覧