Help us understand the problem. What is going on with this article?

Qiita記事の既読/未読を管理するChrome拡張を作ってみた

More than 3 years have passed since last update.

概要

背景

私は気になったQiitaの記事を見つけると、 その場では読まずにとりあえずストックして後で読むという使い方をしています。例えばメールマガジンの先週ストックが多かった投稿ベスト20なんかで気になる記事は読まずにバンバンストックしています。そしてストック一覧を見て記事を読もうとすると、 一見してどれを読んだかすぐにはわからなくて困ってしまいます。Pocketのアーカイブ機能や、feedlyの既読機能のようなものがあればなぁと思っていました。

私が知らないだけで実はそういう機能があるのではと思い、Qiitaのサポートに問い合わせた所、 現状そのような機能は存在しないとのこと。このような機能を所望している人が少しでもいたら、と思いQiitaの記事に既読/未読のラベリングができる非公式Chrome拡張を作成するに至りました。

Chromeウェブストアで無料配布しています。
Jonda -Qiita既読管理-

また、ソースもGitHubのリポジトリを作成しているので何かの役に立てば幸いです。
cabbage63/jonda

紹介ブログ記事
Qiitaの未読・既読を管理するChrome拡張を公開しました|きゃべログ

簡単なデモ

demo.gif

機能

既読/未読を管理、可視化、変更

ストック一覧の記事のリストにボタンを設置することで実装しています。ボタンにより未読/既読の切り替え・確認ができるようになっています。なお、未読/既読のステータスは端末単位で管理しているので、他の端末を使用してもステータスを引き継ぐことはできません。

ストック記事一覧ページに未読/既読ボタンを配置

ユーザのストック一覧の記事リストにボタンを設置するようにしています。設定を変更することにより、自身のストック記事だけでなくすべてのユーザのストックした記事についても既読管理をすることが可能になっています。
stocklist.JPG

検索結果の記事一覧にもボタン設置可能

記事をキーワード検索する際にもボタンを表示することが可能になっています。
これにより検索時に読んだことがない記事を探すことが容易になります。
search.JPG

記事中からも既読/未読の切り替えが可能

ストックしている記事を別の機会に読んだ時に、読んですぐにステータスを変更するために記事中でもステータス変更可能にしています。こちらもボタン一つでステータスが変更できます。Advent Calendarのようにヘッダの色が変わっている時もしっかりデザインが馴染むようになっているのがちょっとしたこだわりポイントです。
article.JPG

使い方

ボタンが表示されるページ

  • ユーザのストックした記事
    • qiita.com/[ユーザ名]/stock
  • 検索結果
    • qiita.com/search?utf=8....
  • 記事のヘッダ
    • qiita.com/[ユーザ名]/items/[記事ID]

設定を変更

Chromeのメニュー>その他のツール>拡張機能でこのアプリを探し、オプションをクリックすることで設定が変更できます。ここではどの記事を管理範囲にするかを設定できます。
初期設定ではすべてのユーザのストックを管理するようになっていますが、自分のストックのみ管理するように変更することも可能です。検索結果のボタン表示/非表示もこちらで設定できます。

Chrome拡張どうやって作るか

Chromeの拡張は基本的にJavascriptをシコシコ書いて作っていきます。やりたいことがある程度はっきりしていれば簡単なものならすぐに公開するまで出来ます。私自身Javascriptの初心者ですが、この拡張機能自体も製作開始から1週間で作ることができました。勉強になりますし、楽しいので結構おすすめです。

せっかく初めてChrome拡張を作成したので、得た知見を元に入門記事でも書こうと思っています。その前にこの拡張機能を構成しているざっくりした技術を紹介しておきます。

  • HTMl
    • オプションページはHTMLで書きます
  • CSS
    • JSからHTML弄るとデザイン崩れが起こるので、それを補正するのに使ったり
    • オプションページのデザインに使ったり
  • Javascript
    • 機能実装は99.9%これ
  • jQuery
    • DOMいじりにとても役立つ
  • ChromePlatform APIs
    • やりたいことはだいたいこれを使えばできる
    • 例えばローカルにデータ保存したいならchrome.storage
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away