← ジャーナル
記事 01

Chrome拡張機能

読んでいるページをその場で保存する ClippingMini Chrome拡張機能

拡張機能のインストールから、現在のページの保存、右クリックメニュー、最近使った項目の開き方までを紹介します。

ネットで気になる記事を見つけたら、とりあえず保存しておく。簡単なことに思えますが、別のサービスを開き、フォルダーを選び、タイトルを入力しているうちに、読んでいた流れが途切れてしまうことがあります。

ClippingMiniのChrome拡張機能なら、その作業を今見ているタブの中で済ませられます。アイコンを開くとページのタイトルとURLが入っているので、フォルダーを選んで保存するだけです。必要であれば、短いメモも一緒に残せます。

リンクをひとつ保存するために、読んでいる手を止める必要はありません。

ここでは、現在の拡張機能に沿って、ログインからポップアップでの保存、右クリック保存、最近使った項目の開き方までを順番に見ていきます。

1. インストールしてログインする

ChromeウェブストアからClippingMiniをインストール

インストールが終わったら、ブラウザーのツールバーにあるClippingMiniアイコンを開きます。すでにWeb版を使っている場合は、同じアカウントでログインしてください。Web版で作ったフォルダーもそのまま表示されます。

ログイン方法は2つあります。

  • Googleアカウントで続ける
  • メールアドレスとパスワードでログインする
chrome-extension://clippingmini
ClippingMiniログインが必要です

Web版と同じアカウントでログインしてください。

Googleで続ける
または
メールアドレス[email protected]
パスワード••••••••••
ログイン

拡張機能専用のアカウントを作るわけではありません。ログイン時に取得したFirebaseの認証トークンでClippingMini APIを呼び出すため、Web版と拡張機能で同じフォルダーと保存済み項目を共有します。

2. 今見ているページを保存する

ログイン後にアイコンを開くと、現在のタブから取得した情報が自動で入力されます。

  1. フォルダーから保存先を選びます。
  2. ページタイトルURLを確認します。
  3. 必要ならメモを入力します。
  4. ClippingMiniに保存を押します。
ClippingMini保存できます
フォルダーResearch
ページタイトル使いやすいChrome拡張機能の設計
URLhttps://example.com/chrome-extension-design
メモ(任意)設計ミーティングの前に読み返す
ClippingMiniに保存
保存しました:使いやすいChrome拡張機能の設計
01

タイトルとURLは自動入力

現在のタブからOpen Graphのタイトル、説明、画像、ファビコンを取得します。URLを書き換えた場合は、元のページの情報を保存データに含めません。

フォルダー一覧はWeb版と同じです。最後に選んだフォルダーを覚えているので、同じプロジェクトの資料を続けて保存するときに毎回選び直す必要はありません。通信が遅いときは、前回取得した一覧を先に表示してから最新の内容に更新します。

保存できるのはhttp://またはhttps://で始まる通常のWebページです。chrome://settingsのようなブラウザー内部のページは保存できません。

3. 右クリックでもっとすばやく保存する

タイトルの編集やメモが必要なければ、ポップアップを開く必要もありません。ページ上で右クリックし、ClippingMiniにページを追加を選びます。

ARTICLE

Building a calmer reading workflow

Designing tools that stay out of the way.

戻る再読み込み名前を付けて保存...印刷... ClippingMiniにページを追加 検証
ClippingMiniに保存しましたBuilding a calmer reading workflow

右クリックで保存すると、最後に使ったフォルダーに入ります。開いているタブからタイトルとメタデータを取得し、完了後はChromeの通知で結果を知らせます。ログインの期限切れや保存上限などのエラーが起きた場合、通知は画面に残ります。通知を押すと、確認すべき内容を別のウィンドウで確認できます。

ひとつ注意点があります。リンク上で右クリックしても、リンク先ではなくアドレスバーに表示されている現在のページが保存されます。リンク先を保存したい場合は、先にそのページを開くか、ポップアップのURL欄にアドレスを貼り付けてください。

4. 最近使ったページをもう一度開く

ポップアップ下部の最近には、直近の項目が最大20件表示されます。Web版のツールバーと同じ一覧です。

ClippingMini保存できます
最近
W Extension DesignD Design Systems V Vue PatternsA AI Agents
02

最近の資料へすぐ戻る

項目を選ぶと現在のタブでページが開き、選んだ項目は一覧の先頭へ移動します。

クリックするたびに新しいタブを増やすのではなく、現在のタブをそのまま使います。最近の一覧を更新できなかった場合も、キャッシュが残っていれば以前の項目を表示します。

普段の流れ

1ページを見つける残しておきたい記事を読む
2保存方法を選ぶポップアップまたは右クリック
3フォルダーへ保存タイトルとメタデータも一緒に
4もう一度使うWeb版または最近の項目から

フォルダーやタイトルを確認し、メモも残したいときはポップアップを使います。今のページをすぐ保存したいときは右クリックが便利です。どちらを使っても、同じアカウントとフォルダーに保存されます。

おわりに

目指したのは、Web版の機能を小さなポップアップにすべて詰め込むことではありません。ページを残したいと思った瞬間に必要なものだけを見せ、保存までの手順を減らすことでした。

タイトルとURLの自動入力、最後に使ったフォルダーの記憶、通信が遅いときのキャッシュ表示。どれも小さな工夫ですが、毎日使う道具では使い心地を大きく左右します。

次回はもう少し内部に入り、現在のタブからOpen Graph情報を取得する流れと、Firebase認証をClippingMini APIにつなぐ方法をコードと一緒に紹介します。

最後までお読みいただき、ありがとうございます。ほかの記事を読む →