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

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

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


## 2017/03/03 時点ユーザー数
**910ユーザー**の方が使われています。

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/faf9cf48-0b97-f158-9b6b-6c2a1b54b9fc.png)



# TL;DR

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

**現在(2018/4/29)提供している機能**

- 行番号を表示
- 記事の更新時間を表示
- コピーアイコンを表示
- 自動いいね/自動ストック
- ヘッダー固定機能
- 新規投稿時のテンプレート
- 閲覧履歴の検索
 
**全ての機能はON/OFFを切り替え可能**

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


# <i class="fa fa-download"></i> インストール

インストールは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
あたりを使っています。

# <i class="fa fa-cubes"></i> 提供機能

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

### <i class="fa fa-wrench"></i> 設定画面を表示

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/f90d918d-7349-b580-1550-a55863a408d6.png)




## <i class="fa fa-cube"></i> 行番号を表示

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

### 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)



## <i class="fa fa-cube"></i> 記事の更新時間を表示

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

### Before

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/586a2b11-8fa3-f116-4b5a-23908bfb6f79.png)


### :sparkles: After

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/d12e9630-f0db-c7f7-2410-348d9877f463.png)



## <i class="fa fa-cube"></i> コピーアイコンを表示

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

### 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'
  }
};
```

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

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

## <i class="fa fa-cube"></i> 自動いいね/自動ストック

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

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

### 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)

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

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

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


## ヘッダーを固定

ヘッダーを固定します。

### Before

スクロールするとヘッダーが消えてしまう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/a3dbb4b2-982e-d9eb-3620-ea3c75250997.png)

### :sparkles: After

スクロールしてもヘッダーが表示される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/ab74a442-8098-51b0-fc86-b2adbd9d29cd.png)


## <i class="fa fa-cube"></i> 新規投稿時のテンプレート

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

### 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)


## <i class="fa fa-cube"></i> 閲覧履歴の検索

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

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

# <i class="fa fa-warning"></i> 注意点

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

# <i class="fa fa-book"></i> 参考

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

- [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)


# <i class="fa fa-sticky-note-o"></i> あとがき

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