2026年04月12日 12時00分レビュー

無料で見ているページを簡単にブラウザ拡張機能で保存しスマホ・Obsidian・SingleFileと連携できる「Readeck」

Webページを保存して「あとで読む」ためのサービスとしてPocketがありましたが既にサービス終了となり、代替の有料サービスもいつサービス終了が訪れるかわかりません。セルフホストでの運用もできるLinkwardenと同様にオープンソースとして公開されている「Readeck」は、「ページをまるごとアーカイブして残す」ではなく、「あとから読む」ことに特化した機能を提供しており、スマホやObsidian・SingleFileとの連携も可能です。

Home - Readeck
https://readeck.org/en/

readeck/readeck: Readeck is a simple web application that lets you save the precious readable content of web pages you like and want to keep forever. - Codeberg.org
https://codeberg.org/readeck/readeck

◆目次
・Readeckの機能
・Readeckの導入方法
・FirefoxのReadeck拡張機能の導入方法と使い方
・ChromeのReadeck拡張機能の導入方法と使い方
・iPhoneアプリの導入方法と使い方
・ObsidianのReadeckプラグインの導入方法と使い方
・SingleFileのReadeckプラグインの導入方法と使い方

◆Readeckの機能
・クリック操作だけで登録可能
ブラウザ拡張機能を利用してクリック操作だけでページを保存できるため、簡単に保存が可能です。

ページの一部を選択し右クリックメニューから「Save this selection」を実行することで選択部分だけを保存できます。

・読みやすいことに特化した保存形式
ページをそのまま保存するのではなく、本文のみを独自のHTML形式に変換して保存するため、フォーマットが統一され読みやすい見た目になります。

・ページのコメント・ハイライト・注釈が可能
選択した文章にコメントやハイライトを付けることができ、サイドバーには設定した箇所の一覧が表示されリンクとして機能します。

透明なハイライトも設定可能で「注釈」として読みやすさを保ったまま参照の案内や追加の説明などが必要な箇所をマークできます。

「Highlights」ページではハイライトした箇所の一覧が表示され、探していた情報を素早く見つけることができるので便利です。

・スマホとの同期
公式・非公式アプリが提供されており、スマホとの連携もスムーズに行えます。PWA機能を利用してReadeckサイトをアプリ化できます。

・動画は字幕を保存
YouTubeなどの動画サイトを保存する場合、動画の詳細とともに字幕が設定されていれば字幕も合わせて保存されます。ただし、動画は埋め込みとなりReadeckのサーバーには保存されません。

・ラベル機能
ページにラベルを付けることで同じラベルを持つページを一覧で表示できます。

・フィルター型のコレクション
詳細な検索条件を設定し保存するという形式で、都度最新の検索結果がコレクションとして表示されます。

・オフライン読書、Kindle連携
保存した記事をEPUB形式に変換すれば、電子書籍として持ち出すことができ、Kindleなどの電子書籍リーダーでオフラインでも閲覧が可能。

・非ログインでの共有
共有リンクを生成することで非ログインのユーザーでもページを閲覧できます。

リンクを受け取ったユーザーはブラウザでリンクを開くだけです。

・Obsidianとの連携
Obsidianのプラグインを利用すれば、Readeckに保存されたページをObsidianに転送して保存することができ、Readeckのバックアップ先としても利用できます。

・SingleFileとの連携
WebページをHTMLファイルとして丸ごと保存できるブラウザ拡張のSingleFileで保存されたページを自動でReadeckにアップロードできます。

◆Readeckの導入方法
事前に用意が必要なものは以下の通りです。

・サーバー：Readeckをセルフホストするサーバー。
・ドメイン名：SSL証明書を取得するためのドメイン名。
・Docker：Readeckのコンテナを動作させるためのコンテナ実行環境。
・Nginx Proxy Manager：Readeckを公開するためのリバースプロキシ。Let's Encryptを利用してSSL・TLS証明書を取得し、HTTPSで安全にアクセスできるようにする。
・コンテナ共有用ネットワーク：ReadeckとNginx Proxy Managerのコンテナを同じネットワークで動作させるためのネットワーク。

今回はGoogle CloudのVMインスタンス上のUbuntuでDockerとNginx Proxy Managerが利用できる環境に構築します。作業フォルダにて公式サイトのインストール手順を参考にdocker-compose.yamlを作成。

services:
  readeck:
    image: codeberg.org/readeck/readeck:latest
    container_name: readeck
    ports:
      - "8000:8000"
    volumes:
      - ./data:/data
    restart: unless-stopped
    networks:
      - default
      - proxy_shared

networks:
  proxy_shared:
    external: true

コンテナを起動。

docker compose up -d

リーバスプロキシの設定を行うため、ブラウザでNginx Proxy Managerの管理画面にアクセスし「Hosts」から「Proxy Hosts」をクリックし、「Add Proxy Host」をクリック。

「Domain Names」にドメイン名を入力、「Scheme」は「http」を選択、「Forward Hostname/IP」に「readeck」、「Forward Port」に「8000」を入力、「Block Common Exploits」のトグルを「オン」、「Websockets Support」のトグルを「オン」にします。

タブで「SSL」を選択し、「SSL Certificate」は「Request a new Certificate」を選択、「Force SSL」と「HTTP/2 Support」のトグルを「オン」にして「Save」をクリック。

ブラウザでドメイン名にアクセスすると管理者登録フォームが表示されるので、「Username」に任意のユーザー名、「Password」にパスワード、「Email address」にメールアドレスを入力し「Finish installation」をクリック。

登録が完了すると初期画面が表示されます。

◆FirefoxのReadeck拡張機能の導入方法と使い方
公式サイトのブラウザ拡張機能ページにあるFirefox用の「GET THE ADD-ON」アイコンをクリック。

Readeckの拡張機能のインストールページが表示されるので、「Add to Firefox」をクリック。

インストールの確認ダイアログが表示されるので「追加」をクリック。

「拡張機能をツールバーにピン留めする」のチェックボックスにチェックして「完了」をクリック。

サーバーへの接続フォームが表示されるので、「Server Address」にサーバーのドメイン名を入力し、「Connect to Readeck」をクリック。

連携の承認ダイアログが表示されるので「Authorize」をクリック。

設定の確認画面が表示されるので、「close」をクリックして完了です。

使い方は保存したいページで拡張機能のアイコンをクリック、もしくは右クリックをしてコンテキストメニューから「Readeck」を選択し「Save this page」をクリックで保存できます。

◆ChromeのReadeck拡張機能の導入方法と使い方
公式サイトのブラウザ拡張機能ページにあるChrome用の「Chrome Web Store」アイコンをクリック。

Chromeウェブストアのページが表示されるので、「Chromeに追加」をクリック。

ポップアップが表示されるので、「拡張機能を追加」をクリックします。

サーバーへの接続フォームが表示されるので、「Server Address」にサーバーのドメイン名を入力し、「Connect to Readeck」をクリック。

連携の承認ダイアログが表示されるので「Authorize」をクリック。

設定の確認画面が表示されるので、「close」をクリックして完了です。

◆iPhoneアプリの導入方法と使い方
公式サイトのブログにあるReadeck for iOS applicationをタップ。

「”App Store”で開きますか？」とダイアログが表示されるので「開く」をタップ。

Readeckアプリの入手ページが表示されるので「入手」をタップ。

インストールの確認ダイアログが表示されるので「インストール」をタップ。

インストールが完了したら「開く」をタップ。

Readeckサーバーへの接続フォームが表示されるので、「Server Endpoint」にサーバーのドメイン名を入力し、「Continue」をタップ。

プライバシー情報利用の確認画面が表示されるので、「続ける」をタップ。

サインインのフォームが表示されるので、「Username or email address」にユーザー名かメールアドレス、「Password」にパスワードを入力し「Sign in」をタップ。

連携の承認画面が表示されるので「Authorize」をタップ。

リリースノートが表示された場合は「Done」をタップ。

アプリのホーム画面が表示されればインストール完了です。

使い方はブラウザで保存したいページを表示している状態で画面下にある共有アイコンをタップ。

アプリ一覧が表示されるので「readeck」をタップ。

「Search or add new label」に任意でラベルを入力、「取得するページのタイトル」がフォームに入っているので必要に応じて調整したら「Save Bookmark」をタップ。

保存が完了するとアプリのホーム画面に追加されます。

◆Androidアプリの導入方法
サードパーティによる非公式アプリが公開されています。jensomato/ReadeckAppにある「GET IT ON F-Droid」アイコンをタップ。

オープンソース用のアンドロイドアプリストアF-Droidのインストールを行うため「DOWNLOAD F-DROID」をタップ。

警告が表示されるので「ダウンロードを続行」をタップ。

ダウンロードが完了したら「開く」をタップ。

インストールの確認ダイアログが表示されるので「インストール」をタップ。

インストールが完了したら「完了」をタップ。

Readeck Appのページに戻るので最新バージョンのAPKファイルへのリンク「Download APK」をタップ。

警告が表示されるので「ダウンロードを続行」をタップ。

ダウンロードが完了したら「開く」をタップ。

インストールの確認ダイアログが表示されるので「インストール」をタップ。

インストールが完了したら「開く」をタップ。

アプリが起動したら左上のメニューアイコンをタップ。

メニューが表示されるので「Settings」をタップ。

「Account」をタップ。

サーバーへの接続フォームが表示されるので、「Readeck URL」にサーバーのドメイン名を入力し、「Login」をタップ。

ログイン用フォームが表示されるので、「Username or email address」にユーザー名かメールアドレス、「Password」にパスワードを入力し「Sign in」をタップ。

連携の承認画面が表示されるので「Authorize」をタップ。

接続用のフォームが再度表示されるので「戻る」アイコンをタップ。

Settingsメニューが表示されるので「戻る」アイコンをタップ。

アプリのホーム画面に戻ります。

使い方はブラウザで保存したいページを表示している状態で右上にあるメニューアイコンをタップ。

メニューが表示されるので「共有」をタップ。

アプリ一覧が表示されるので「Readeck App」をタップ。

ブックマーク登録フォームが表示されるので「URL」に保存したいページのURLを確認、「Title(Optional)」は何も入れなければ保存時にページのタイトルが自動的に割り当てられます。必要に応じて調整したら「Create」をタップ。

アプリのホーム画面に保存したページが追加されます。

◆ObsidianのReadeckプラグインの導入方法と使い方
Obsidianを起動したら「歯車」アイコンをクリック。

メニューから「コミュニティプラグイン」をクリックし、「インストールされたプラグイン」欄の右端にある「フォルダ」アイコンをクリック。

プラグインの設置フォルダが表示されるので、「新規作成」から「フォルダー」をクリック。

「obsidian-readeck-importer」フォルダを作成。

Readeck Importer PluginのReleasesページにアクセスし、「main.js」をクリック。

先ほど作成した「obsidian-readeck-importer」フォルダにダウンロード、「manifest.json」および「styles.css」も同様にダウンロード。

「インストールされたプラグイン」欄の右端にある「リロード」アイコンをクリックすると、「Readeck Importer」プラグインが表示されます。

プラグインを有効化するため、「Readeck Importer」プラグインの右端にあるトグルを「オン」にしたら、歯車アイコンをクリック。

設定画面が表示されるので「API URL」にサーバーのドメイン名を入力し、「Login」をクリック。

承認を受けるためのリンクとコードが表示されるので、「Open Link」をクリック。

連携の承認画面が表示されるので「Authorize」をクリック。

「Connect a device」と表示されれば連携完了です。

「Set mode」を「Text+Images+Annotations」に設定します。

使用方法はCTRL+Pでコマンドパレットを開き、「Readeck」と入力して「Readeck Importer: Resync all bookmarks」をクリックし実行。

サーバーに保存されているページが全てMarkdown形式でインポートされます。

保存されたページは以下のように表示されます。

◆SingleFileのReadeckプラグインの導入方法と使い方
ブラウザ拡張プラグインSingleFileと連携してSingleFileからReadeckに保存したページをアップロードできます。

今回はFirefoxでの設定方法となります。Firefoxを起動したら「メニュー」アイコンをクリック。