0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Sato_Suzu

SNS Manual Clipper開発記録：Chrome拡張でSNS投稿を検索可能なHTMLアーカイブ化する

0
Last updated at Posted at 2026-08-05

はじめに

SNS上には、後から見返したい情報が日々流れています。

しかし、標準のブックマーク機能では保存した投稿が増えるほど管理が難しくなります。

  • 保存した投稿を探しづらい
  • 投稿削除やサービス仕様変更の影響を受ける
  • 保存したデータを別環境へ移行しづらい
  • 蓄積した情報を再利用しにくい

そこで、表示中のSNS投稿を取得し、保存・検索・エクスポートできるChrome拡張機能 SNS Manual Clipper を開発しました。

Chrome Web Storeで公開しています。

この記事では、SNS Manual Clipperの開発で実装した以下の内容について紹介します。

  • SNS投稿データの取得
  • IndexedDBによるローカル保存
  • JSON Import / Export
  • CSV Exportによるデータ活用
  • 検索機能付きHTMLアーカイブ生成
  • Chrome拡張機能の構成

SNS Manual Clipperとは

SNS Manual Clipperは、SNS上でユーザーが保存したいと思った投稿を手動でクリップし、管理するChrome拡張機能です。

単純なURL保存ではなく、投稿を後から確認・検索・活用できるように必要な情報をまとめて保存します。

保存対象:

  • 投稿本文
  • 投稿者情報
  • 投稿URL
  • リンクカード
  • 画像
  • スクリーンショット
  • 保存日時
  • 投稿日時

保存したデータは、用途に応じて以下の形式へ出力できます。

形式 用途
JSON バックアップ・復元・移行
HTML Archive 閲覧・検索
CSV 一覧化・分析・加工

全体構成

処理の流れは以下になります。

投稿データの保存

保存先にはIndexedDBを利用しています。

理由は、SNS投稿だけではなく、

  • 画像
  • スクリーンショット
  • リンクカード情報

など比較的大きなデータを扱うためです。

保存構造:

SNSManualClipperDB

├── posts
│
├── folders
│
└── settings

投稿データ例:

{
  "platform": "X",
  "author": {
    "name": "ユーザー名",
    "handle": "@example"
  },
  "content": "投稿本文",
  "url": "https://example.com",
  "createdAt": "2026-08-05",
  "savedAt": "2026-08-05T10:00:00",
  "screenshot": "data:image/png;base64,..."
}

投稿情報と表示情報をまとめて保持することで、後から別形式へ変換できます。

JSON Import / Export

保存したデータを拡張機能内部だけに閉じ込めないため、JSON形式で入出力できるようにしました。

Export

IndexedDB内の投稿データをJSONファイルとして出力します。

用途:

  • バックアップ
  • PC移行
  • データ保管

Import

ExportしたJSONを読み込み、IndexedDBへ復元します。

これにより、別環境でも保存データを利用できます。

CSV Exportによるデータ活用

SNS Manual Clipperでは、JSONやHTMLアーカイブだけではなく、CSV形式でのエクスポートにも対応しています。

JSONはデータ復元向け、HTMLアーカイブは閲覧向けですが、CSVは外部ツールで加工・分析するための形式として利用できます。

用途例:

  • Excelで一覧管理
  • スプレッドシートで整理
  • 投稿内容の分析
  • カテゴリ別集計
  • 独自ツールへの取り込み

出力例:

platform,author,content,url,savedAt
X,user1,"投稿本文",https://example.com,2026-08-05

保存したSNS投稿を、特定の拡張機能内だけで利用するのではなく、ユーザー自身が自由に加工できるデータとして扱えるようにしています。

検索可能なHTMLアーカイブ

SNS Manual Clipperの特徴的な機能の一つがHTMLアーカイブです。

単純なデータ出力ではなく、生成されたHTMLファイル単体で閲覧・検索できます。

構成:

archive.html

├ 投稿データ
├ 画像データ
├ JavaScript
└ 検索機能

HTML内部に必要なデータと処理を含めることで、以下を実現しています。

  • ブラウザだけで閲覧可能
  • オフライン利用可能
  • 専用アプリ不要
  • エクスポート後も検索可能

HTML内検索の実装

HTMLアーカイブにはJavaScriptによる検索機能を組み込んでいます。

検索対象:

  • 投稿本文
  • 投稿者名
  • ユーザー名
  • URL
  • 保存メタデータ

実装例:

function searchPosts(keyword) {

  return posts.filter(post => {

    const text =
      JSON.stringify(post)
        .toLowerCase();

    return text.includes(
      keyword.toLowerCase()
    );

  });

}

HTML生成後も、外部サービスやサーバーを利用せず、ファイル単体で投稿を検索できます。

Base64による画像埋め込み

HTMLアーカイブを単体で動作させるため、画像データはBase64形式へ変換して埋め込んでいます。

通常の場合:

archive.html
image.png
image2.jpg

のように複数ファイルが必要になります。

しかし、画像をData URL形式へ変換することで、

archive.html

だけで閲覧可能になります。

変換例:

<img src="data:image/png;base64,xxxxx">

メリット:

  • ファイル管理が簡単
  • オフライン閲覧可能
  • バックアップしやすい
  • 別環境へ移動しやすい

一方で、画像を大量に含む場合はHTMLファイルサイズが大きくなるため、データ量に応じた最適化が必要になります。

3種類のExport形式

SNS Manual Clipperでは、用途に応じて3種類の出力形式を用意しています。

                 保存データ

                    │

        ┌───────────┼───────────┐

        ▼           ▼           ▼

     JSON        HTML        CSV

  復元・移行   閲覧・検索   分析・加工

JSON

データそのものを保持する形式。

用途:

  • バックアップ
  • インポート
  • PC移行

HTML Archive

人間が読むための形式。

用途:

  • 保存内容の確認
  • オフライン閲覧
  • キーワード検索

CSV

外部ツールで扱うための形式。

用途:

  • 表計算ソフトで管理
  • データ分析
  • 独自加工

保存したデータを目的に応じて使い分けられるようにしています。

Chrome拡張機能の構成

SNS Manual ClipperはManifest V3を利用しています。

全体構成:

Content Script

Content Scriptでは、現在表示しているSNSページから投稿情報を取得します。

主な処理:

  • 投稿本文取得
  • 投稿者情報取得
  • URL取得
  • 画像情報取得
  • リンクカード取得

SNSごとにDOM構造が異なるため、Extractorとして分離しています。

Extractor

├── X Extractor
│
├── Instagram Extractor
│
└── Other SNS Extractor

SNS側の変更が発生した場合でも、取得部分だけ修正できる構成を目指しています。

Background Service Worker

Backgroundでは、Content Scriptと拡張機能内部の処理を仲介します。

担当:

  • メッセージ通信
  • データ保存処理
  • Export処理
  • 権限が必要な処理

ページ側の処理とデータ管理を分離することで、保守性を高めています。

Side Panel

Side Panelでは保存した投稿を管理します。

主な機能:

  • 投稿一覧表示
  • 検索
  • フォルダ管理
  • JSON Import
  • JSON Export
  • CSV Export
  • HTML Archive生成

保存した後のデータ活用を行うためのUIになります。

SNS DOM解析で苦労した点

SNS投稿取得では、単純なHTML解析だけでは対応できない問題がありました。

問題になったもの:

  • 動的に生成されるDOM
  • 絵文字
  • 認証バッジ
  • リンクカード
  • SNSごとの構造差

見た目では一つの情報でも、DOM上では複数の要素に分かれている場合があります。

そのため、

「画面上でユーザーが見ている情報を、どのようにデータ化するか」

という点が大きな課題になりました。

まとめ

SNS Manual Clipperでは、SNS投稿を単純に保存するだけではなく、保存後の利用まで考えた設計にしています。

実装した主な機能:

  • SNS投稿の構造化保存
  • IndexedDBによるローカル管理
  • JSON Import / Export
  • CSV Export
  • 検索可能なHTMLアーカイブ
  • オフライン閲覧対応

出力形式ごとに役割を分け、

  • JSONは「データを守る」
  • HTMLは「人が読む」
  • CSVは「データを活用する」

という設計にしました。

Chrome拡張機能は小さなツールに見えても、取得したデータをどう保存し、どう再利用できる形にするかまで考えることで、単なる便利ツールから長く使えるシステムへ発展させることができます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?