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

17
いいね
2
コメント

howdy39

2017年01月09日に投稿

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

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

TL;DR

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

現在(2017/1/9)提供している機能

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

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

次に考えている機能
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にしてください。

設定画面を表示

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

行番号を表示

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

Before

After

コピーアイコンを表示

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

Before

After

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

diff形式のコードのコピー

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

コピーされる内容

module.exports = {
 entry: './src/app.js',
  output: {
   path: 'dist',
    filename: 'bundle.js'
  }
};

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

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

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

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

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

Before

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

After

自動で「いいね」される

※ストック時に自動でいいねが付けばContribution数に反映されます。
そちらの方が好ましいのではないかと思っています。

※いいねに関する話は詳細は以下の記事でまとまっています。
「いいね」が使えないのはどう考えてもQiitaが悪い

細かい設定が可能

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

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

Before

After

コメントの非表示

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

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

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

Before

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

After

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

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

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

閲覧履歴の検索

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

次に考えている機能

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

またQiitaタグを監視しています。
これはいいなと思った要望は拾っていきます。

注意点

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

参考

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

あとがき

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

筆者が「Qiitaにこういう機能があったらもっと使いやすいのに」
と思っていた機能をChrome拡張機能として実装しました。
ぜひ[インストール](https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/)してみてください。

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

# TL;DR

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

**現在(2017/1/9)提供している機能**

- 行番号を表示
- コピーアイコンを表示
- 自動いいね/自動ストック
- 人気の投稿から既読記事を非表示
- 特定ユーザーの投稿を非表示
- 新規投稿時のテンプレート
- 閲覧履歴の検索
 
**全ての機能はON/OFFを切り替え可能**

**次に考えている機能**
[textlint](http://efcl.info/2015/09/10/introduce-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
あたりを使っています。

# 提供機能

### 設定画面を表示

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/abfc3bd5-fa24-d773-72d2-158a33fd4da6.png)

## 行番号を表示

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

### Before

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/bf9ba5c0-70cd-d968-a9e6-6843c1b7e202.png)

### :sparkles: After

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/07878051-bf89-32b6-fd89-3501e9087255.png)

## コピーアイコンを表示

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

### Before

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/bf9ba5c0-70cd-d968-a9e6-6843c1b7e202.png)

### :sparkles: After

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/d35498e5-c282-22ca-66b2-e533bd4eb2a1.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/aa60bf0f-9796-feee-b546-750a01186c3f.png)

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/5bed7e20-1cc6-ee8e-5406-68a39f9c952d.png)

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

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

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

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

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

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

### Before

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/9837ddd5-9bdd-5ead-eed0-17b4b220ea03.png)

### :sparkles: After

自動で「いいね」される
![image](https://qiita-image-store.s3.amazonaws.com/0/35595/7ef3c80b-6f7a-cf07-b577-4de7c7b6e8bd.png)

※ストック時に自動でいいねが付けばContribution数に反映されます。
そちらの方が好ましいのではないかと思っています。

※いいねに関する話は詳細は以下の記事でまとまっています。
[「いいね」が使えないのはどう考えてもQiitaが悪い](http://qiita.com/bezeklik/items/e28ab36e1071e761a277#_reference-4df830ac05b5b379844a)

### :information_source: 細かい設定が可能

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/6cf772d9-5c24-3604-a459-0097532fca98.png)

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

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

### Before

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/f08e3584-5402-c199-4f57-519c5a88a7b8.png)

### :sparkles: After

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/937550f9-9cb6-d176-1dbf-ab47bd47705d.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/caa72b12-773e-a38d-5f5f-3e8c9f86a2e3.png)

### デモ

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

![90854ad6-bcf6-4b8c-y54e-51b93e674af4.gif](https://qiita-image-store.s3.amazonaws.com/0/35595/643f6337-ea69-1a58-25aa-cec4fbe3cb1b.gif)

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

[人気の記事ページ](http://qiita.com/popular-items)や[新着ページ](http://qiita.com/)などで記事の一覧から特定ユーザーの投稿を非表示にします。

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

### Before

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/a52babf8-506f-fe3e-53cd-799d74c02e85.png)

### :sparkles: After

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/fd282d74-5d35-7192-a37f-11319c7e05d8.png)

### :information_source: コメントの非表示

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/53b7aa77-3a29-82ce-328c-39631fe15dea.png)

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

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

### Before

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/6a4a6a74-a669-0b21-a5f4-3a9085f09289.png)

### :sparkles: After

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/b1c34f9c-648e-ba8f-c26b-f44e15a488ed.png)

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/75265f3c-1dbc-3082-c4ae-08c51e025825.png)

## 閲覧履歴の検索

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/fcfcf564-c32e-9f57-e824-fbd7d0558f78.png)

# 次に考えている機能

[textlint](http://efcl.info/2015/09/10/introduce-textlint/)を使った文章の校正機能などを考えています。
「記事を書く」という観点で改善点がまだまだあると思います。

また[Qiitaタグ](http://qiita.com/tags/qiita)を監視しています。
これはいいなと思った要望は拾っていきます。

# 注意点

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

# 参考

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

- [Qiitaのフィードから特定ユーザーの投稿を非表示にするユーザースクリプト](http://qiita.com/khsk/items/392ec147c4962caed9ca)
- [Qiitaの「いいね」について思った事](http://qiita.com/kinpira/items/189d4ee1bafd5876e007)
- [Qiita > 要望 > コード左側に行番号を表示](http://qiita.com/7of9/items/e65f2f36c817ab965284)
- [Qiitaのコードの左側に選択不可能な行番号を追加するユーザースクリプト](http://qiita.com/khsk/items/89fc40321f1387829135)
- [Qiitaのコードにコピーボタンを追加するユーザースクリプト](http://qiita.com/khsk/items/27a80755d883521ecd73)

# あとがき

質問や不具合などありましたらQiitaのコメントでも[Twitter](https://twitter.com/howdy39)や[GitHub](https://github.com/howdy39/q-accelerator/issues)でもお気軽にどうぞ:ok_hand:

howdy39

4409Contribution

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

TL;DR

インストール

提供機能

設定画面を表示

行番号を表示

Before

After

コピーアイコンを表示

Before

After

diff形式のコードのコピー

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

Before

After

細かい設定が可能

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

Before

After

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

デモ

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

Before

After

コメントの非表示

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

Before

After

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

閲覧履歴の検索

次に考えている機能

注意点

参考

あとがき

人気の投稿

問題がある投稿を報告する

ご意見