GitHubとGitbucketのタブ幅を変更する

# はじめに
職場では、GitBucketを使用している。
GitBucketは[たけぞう](http://d.hatena.ne.jp/takezoe/)さんが開発されているGitHubのクローンアプリでScalaで書かれおり、イントラネット内に構築できる。

タブ幅4で作成しているアプリケーションがあった時に、GitBucketのWebページで見るとタブ幅8で表示されてしまう。そうすると変数の隣に書いてあるコメント文がタブ幅4では揃っているが、タブ幅8で見ると凸凹になってしまう。

ネットで調べると、各ブラウザのタブ幅は8がデフォルトになっているのが原因だと分かった。

## キャプチャソフトの紹介
今回、キャプチャソフトに「Screenpresso(スクリーンプレッソ)」を初めて使いました。ハイライト出来たり矢印やフォントなどが気に入ってます。※無料版を使っています。

* [画面キャプチャーのフリーソフトはScreenpressoが最強な件！](https://it-media2.net/screenpresso/)
* [ブロガー必見！画像のシャドウ・ハイライト加工できる「Screenpresso」がオススメ！](https://www.ayaseaya.xyz/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E5%BF%85%E8%A6%8B%EF%BC%81%E7%94%BB%E5%83%8F%E3%81%AE%E3%82%B7%E3%83%A3%E3%83%89%E3%82%A6%E3%83%BB%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E5%8A%A0%E5%B7%A5/)

# 対応
サイトのデザインを書き換える「ユーザスタイルシート(ユーザーCSS)」という機能が Firefox/GoogleChrome にあり、CSSを設定することで優先して表示を変更できます。

Windows版GoogleChromeでは下記に設定ファイルがあります。

```
C:\Users\(ユーザー名)\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
```

## 拡張機能
ブラウザの拡張機能にはユーザスタイルシートをサイト別に管理できるものがあります。
有名なのは「Stylish」なのですが、2018年7月にWeb閲覧履歴を収集・送信しているとしてポリシー違反となりましたので、今回は代わりに「Stylus」を使用します。
[閲覧履歴の収集が発覚した「Stylish」拡張機能、“Chrome ウェブストア”からも削除](https://forest.watch.impress.co.jp/docs/news/1131353.html)

Microsoft Edgeには同様なものに拡張機能「Tampermonkey」があります。
※TampermonkeyはChrome版もあります。
[EdgeでWEBのデザインを書き換えられるユーザスタイルシートを適用する](https://vogel.at.webry.info/201707/article_4.html)

IEにはユーザスタイルシートの機能はないようです。

## Stylusの設定
### インストール
chrome ウェブストアから「Stylus」をインストールします。
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

[Chrome拡張機能「Stylus」の使用方法（1）　導入 / アイコン機能メニュー / オプション](https://atstudiota.exblog.jp/27122400/)

### 設定
Stylusアイコンを左クリックした際の画面から「管理」ボタンをクリックします。
![Stylus管理.png](https://qiita-image-store.s3.amazonaws.com/0/14053/b58f36f7-1884-a0ee-e5a6-dfa1fffe0747.png)

新スタイル作成ボタンをクリックします。
![Stylus新スタイル作成.png](https://qiita-image-store.s3.amazonaws.com/0/14053/27545a17-6ad2-fa8e-4904-7bc47391a619.png)

スタイルを編集します。
![Stylusタブ4設定.png](https://qiita-image-store.s3.amazonaws.com/0/14053/11867157-db7d-25ae-b835-71c9cb1641d2.png)

今回のスタイル名は「tab-size4」にしました。

コード1をセットします。
参照：[How to change tab size on GitHub? - stackoverflow](https://stackoverflow.com/questions/8833953/how-to-change-tab-size-on-github)

```css
.tab-size {
  -webkit-tab-size: 4 !important;
     -moz-tab-size: 4 !important;
       -o-tab-size: 4 !important;
          tab-size: 4 !important;
}
```

【2018/10/22追記】
職場のGitBucket 3.10で「.tab-size」ではタブ幅が変更になりませんでしたが「pre」でタブ幅が変更されました。職場では下記のように書き換えてます。

```css
pre, .tab-size {
  -webkit-tab-size: 4 !important;
     -moz-tab-size: 4 !important;
       -o-tab-size: 4 !important;
          tab-size: 4 !important;
}
```

保存ボタンをクリックします。

今回の適用先は「すべて」にしましたが、適用先を制限することができます。
![Stylusサイト制限.png](https://qiita-image-store.s3.amazonaws.com/0/14053/41f54064-752d-5aa6-f443-a7c72de5e7b3.png)

### 確認
jquery/src/core.js がタブを使用しているので確認します。
https://github.com/jquery/jquery/blob/master/src/core.js

![Stylus適用有無.png](https://qiita-image-store.s3.amazonaws.com/0/14053/c2b37479-f22c-7bef-abe7-761c6f1e91fc.png)

【適用前】
![Stylus適用前.png](https://qiita-image-store.s3.amazonaws.com/0/14053/605ee525-8022-34b3-c89f-80afd3e11455.png)

【適用後】
![Stylus適用後.png](https://qiita-image-store.s3.amazonaws.com/0/14053/c593fd69-e868-c233-a840-97470b6dec8a.png)

## URLパラメータ
GitHubにはURLパラメータでタブサイズを指定できますので一時的であれば、こちらが簡単です。
TAB幅を2なら「?ts=2」、TAB幅を4なら「?ts=4」をURLの末尾に付けます。
例 https://github.com/jquery/jquery/blob/master/src/core.js?ts=4

![Stylus適用後.png](https://qiita-image-store.s3.amazonaws.com/0/14053/c593fd69-e868-c233-a840-97470b6dec8a.png)

# 最後に
ブラウザのタブ幅がデフォルトが8って何だかなー、多くのエディタはタブ幅4に設定するようにしているのにね。
今の自分のソースコードのほとんどはタブをスペースに変更しているので自分だけなら問題ないが、職場とかは統一はされていない。

ユーザースタイルシートは面白いですね、バックグラウンドの色を変更したり、普段見ているサイトのフォントを好きなフォントに変更することもできます。
ただしアイコンが画像ではなくWebフォントだと豆腐になってしまいます。
[Chromeブラウザのユーザースタイルシートでフォント指定してたのを忘れてWebフォントが表示されずに困った件](http://sutara79.hatenablog.com/entry/2013/08/18/183653)

# 参照
* [Githubのタブが8文字で見にくいのでextensionで解決](https://qiita.com/sue738/items/c68bf768f4aa30e88682)
* [ブラウザのタブ文字幅が8スペースなのが気に入らない](https://qiita.com/aokomoriuta/items/4a3d711ff0e964ab1e20)
* [GitHub の タブ幅 (TAB width) は変更できる](https://nekonenene.hatenablog.com/entry/2015/09/13/100819)