Qiitaをより便利にするChrome拡張機能をつくりました

  • 395
    いいね
  • 7
    コメント

筆者が「Qiitaにこういう機能があったらもっと使いやすいのに」
と思っていた機能をChrome拡張機能として実装しました。
ぜひインストールしてみてください。

Q Acceleratorと名付けました。
Qiitaでの活動を加速させるもの、といった感じです。
※Accelerator(アクセラレーター)は「加速装置」「加速器」などの意味があります。

2017/03/03 時点ユーザー数

910ユーザーの方が使われています。

image

TL;DR

インストールはChrome ウェブストアから
https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/

現在(2017/2/24)提供している機能

  • 行番号を表示
  • 記事の更新時間を表示
  • コピーアイコンを表示
  • 自動いいね/自動ストック
  • 人気の投稿から既読記事を非表示
  • 特定ユーザーの投稿を非表示
  • 新規投稿時のテンプレート
  • 閲覧履歴の検索

全ての機能はON/OFFを切り替え可能

Qiitaへのログインは任意です
「会社でQiitaのログインなんて許可されてない」って方でも利用可能です。

次に考えている機能
textlintを使った文章の校正機能

インストール

インストールはChrome ウェブストアから行います。
https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/

OSSです。
https://github.com/howdy39/q-accelerator
Babel, Webpack, Karma, Mocha, Chai, Sinon.JS, Vue.JS, Material Design Lite
あたりを使っています。

提供機能

全ての機能は「デフォルトで全てON」にしてありますが、全てON/OFFの切り替えが可能です。
この機能は要らないというのがあればOFFにしてください。

設定画面を表示

ブラウザ右上のアクションから設定画面を表示できます。

image

行番号を表示

コードの左部分に行番号を追加します。

Before

image

:sparkles: After

image

記事の更新時間を表示

記事上部の更新日(投稿日)に時間を付与します。

Before

image

:sparkles: After

image

コピーアイコンを表示

コードの上部にコピーアイコンを追加します。
クリックすればクリップボードにコードをコピーできます。

Before

image

:sparkles: After

image

コピーアイコンをクリックする

image

:information_source: diff形式のコードのコピー

以下のようなdiff形式のコードをコピーした際は差分を解釈します。

image

コピーされる内容
module.exports = {
 entry: './src/app.js',
  output: {
   path: 'dist',
    filename: 'bundle.js'
  }
};

行頭がマイナスの場合は、コピーから外します
行頭がプラスの場合は、プラスを除いてコピーします

※スペースで揃えていた場合は、インデントがずれてしまうのが難点ではあります。

自動いいね/自動ストック

「いいね」や「ストック」を押した際の挙動をカスタマイズします。

以下は「ストック」をした場合の例です。

Before

「ストック」だけしかされない

image

:sparkles: After

自動で「いいね」される
image

:information_source: 細かい設定が可能

この機能は人によって好みが別れると思います。
以下のように全パターンの自動設定が可能です。

image

人気の投稿から既読記事を非表示

Qiitaには人気の投稿ページというホットな記事を表示する一覧画面があります。
この画面から既に読んだ記事を自動で消していき、見やすくしていくのがこの機能です。

筆者はこのページが大好きでリロードしてよく見ています。
しかし人気記事は上位を独占し居座ります。
そのため新しくあがってきた記事が見つけにくくなる、それを解決します。

Before

image

:sparkles: After

image

:information_source: 人気の投稿ページに「既読にする」ボタンを表示

もう一つ機能があります、それが「既読にする」ボタンを表示する機能です。
実際に記事を開かなくてもこのボタンを押すことで非表示にすることが可能になります。

image

デモ

これらの機能を利用することで人気の記事をサクサク見ていけます。
※記事はCtrlなどを押して別タブで開いています。

90854ad6-bcf6-4b8c-y54e-51b93e674af4.gif

特定ユーザーの投稿を非表示

人気の記事ページ新着ページなどで記事の一覧から特定ユーザーの投稿を非表示にします。

※モザイクにしていますが、キャプチャーを取るために適当に設定しただけですのであしからず。

Before

image

:sparkles: After

image

:information_source: コメントの非表示

コメントの非表示もされます。

image

新規投稿時のテンプレート

新規で記事を作成する際に、自動で入力済みにする機能です。

Before

何も入力されていません。

image

:sparkles: After

テンプレートの内容で入力済みになります。

image

:information_source: テンプレートの内容を変更する

もちろんテンプレートは自身で変更可能です。

image

閲覧履歴の検索

拡張機能をインストールしてから閲覧した記事の履歴を表示します。
検索機能があるので最近見た記事を探す場合にも利用できます。

image

次に考えている機能

textlintを使った文章の校正機能などを考えています。
「記事を書く」という観点で改善点がまだまだあると思います。

またQiitaタグを監視しています、これいいなと思った要望を実装するかもしれません。

注意点

この拡張機能はQiitaの画面の造りに大きく依存しています。
突然動かなくなったらQiitaのDOMの構造が変わった可能性が高いです。
なるべく早く対応しますが、使えない間はすみません:bow:

参考

本拡張機能は以下の記事で書かれていたコードやアイデアを参考にさせてもらいました。

あとがき

質問や不具合などありましたらQiitaのコメントでもTwitterGitHubでもお気軽にどうぞ:ok_hand: