青空文庫のルビ（ふりがな）を非表示にするブックマークレットをChrome拡張に

# この記事は
青空文庫のHTML版から、ルビの非表示・表示を切り替えるブックマークレットの記事です。ずっとやりたかったブックマークレットからChrome拡張への作り替えも試しました。

## 背景
ひょんなことから著作権フリーなテキスト文書が必要になりました。読むのが目的ではなくて、テキストOCR系のためです。ということで、青空文庫にお邪魔したわけですが、、

青空文庫の文章はルビが丁寧に振ってあります。文字として処理しようとすると、漢字とフリガナが1つずつ出てきてしまい、具合が悪いです。フリガナじゃまだな。

ということで、**ブラウザの表示から消してしまおう** ということです。


>夏目漱石　吾輩は猫である
>https://www.aozora.gr.jp/cards/000148/files/789_14547.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168315/4f9aef70-a03e-a1ee-748a-2dfedd49d23f.png)


## フリガナの構造を知る

フリガナが漢字の上に表示されている仕組みを知りましょう。漢字の上に乗っかっているフリガナには`ルビ`という名前がついています。英語にすると`ruby`です。[^ruby]
[^ruby]: [wikipedia ruby](https://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%93)

最初の有名な一文のHTMLを覗いてみます。

```html
<ruby>
  <rb>吾輩</rb>
  <rp>（</rp>
  <rt>わがはい</rt>
  <rp>）</rp>
</ruby>
は猫である。名前はまだ無い。<br />
```

全体を`ruby`タグで囲み、`rt`タグに読み方、`rp`タグで両端カッコを囲う[^1]。なるほど。
 [^1]: http://www.htmq.com/html5/ruby.shtml

rubyタグの内側にある、`rpタグ`（ブラウザには表示されない）と`rtタグ`を非表示にすればよさそうです。

ちなみに、青空文庫のHTMLページでjQueryが動くなら、この1行だけで済みます。

```javascript
$('rt').hide();
```

![2020-04-12_00h50_54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168315/39d47b6a-ff09-661a-fe09-7d3dfe3771b3.gif)



# ブックマークレットとして仕上げる
まずは、without jQueryな感じのjavascript単体で動くブックマークレットを作ります。

## コード
今回はこんな感じです。いつもはjQueryに頼るところですが使わずに書きました。

```javascript:toggle_aozora_ruby.js
// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level SIMPLE_OPTIMIZATIONS
// ==/ClosureCompiler==
javascript:(function(){
    console.log('call aozora-toggle.js');

    const change = (element,nowVisible)=>{ 
        if(nowVisible){
            element.style.display='none';
        }else{
            element.style.display='block';
        };
    }
    
    let rtList = document.querySelectorAll('rt');
    if( rtList.length > 0 ){
        let currentStyle = document.defaultView.getComputedStyle(rtList[0],null).display;
        let visible = currentStyle == 'block';
        console.log(currentStyle, visible);
        rtList.forEach(function(a,b,c){change(a,visible);});

    }else{
        console.log('no rb tags');
    }

})();
```

## 簡単に説明
ちょっと手抜きをして、`rt`タグだけを対象にしています。ちゃんとやるなら`rp`タグもやるべき。

- 表示している画面にRTタグがあるか確認
- RTタグが1つ以上あれば、そのうちの1つ目の表示・非表示状態を確認
- 1つ目が表示状態なら、RTタグ全部を非表示に、1つ目が非表示の状態なら全部を表示に切り替える

jQueryを使わずにCSSの表示状態を取るのに苦労しました。
`document.defaultView.getComputedStyle(rbList[0],null).display`

# Chrome拡張へ
さて、未知のChrome拡張へ進みます。といっても、参考にしたサイト[^2] に倣って作ったので、今回はそんなに難しくなかったです。
[^2]: http://degitekunote.com/blog/2016/11/02/chrome-extension/  

<br>


**完成品**
![2020-04-12_01h23_57.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168315/c7b20df4-91cb-a85b-fe2c-6816d98aa050.gif)

## コード
Chromeの拡張にするには、manifest.jsonファイルと、2つのjavascriptファイルが必要です。プログラムのエントリーポイントだけ抑えれば、そんなに難しくない変換だと思います。アイコンを用意するのが面倒ですね。

https://github.com/kanaxx/bookmarklet/tree/master/aozora

### scripts.js(メインのコード)
`scripts.js`ファイルに、ブックマークレットのコードを移植しました。
ツールバーボタンが押されたら動くという仕掛けは、先頭の5行くらいで書くようです。詳しく理解してないですが、いったん動かすレベルであれば、これでよさげ。


```javascript:scripts.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
//console.log(sender);
	if (request == "Action") {
		toggleRuby();
	}
});

function toggleRuby() {
    let rtList = document.querySelectorAll('rt');
    console.log('rt count %s', rtList.length);
    if( rtList.length > 0 ){
        let currentStyle = document.defaultView.getComputedStyle(rtList[0],null).display;
        let visible = currentStyle == 'block';
        console.log(currentStyle, visible);
        rtList.forEach(function(a,b,c){toggle(a,visible);});
    }else{
        console.log('no rb tags');
    }
}

function toggle(element, currentVisible){
    if(currentVisible){
        element.style.display='none';
    }else{
        element.style.display='block';
    }
}
```


### background.js
ツールバーにボタンを置くタイプのExtensionでは、お決まりのコードみたいです。

```javascript:background.js
chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.sendMessage(tab.id, "Action");
});
```

### マニフェストファイル
chrome拡張の仕様を決めるファイルです。

```json:manifest.json
{
	"manifest_version": 2,
	"author": "@kanaxx",
	"homepage_url": "https://qiita.com/kanaxx/items/6d6b0d680185d6af9b05",
	"name": "るびきりかえ",
	"description": "青空文庫のルビ表示を非表示にしたり表示したり！",
	"version": "0.1",
	"icons": {
		"32": "icon32.png",
		"48": "icon48.png",
		"128": "icon128.png"
	},
	"content_scripts": [{
		"matches": ["https://www.aozora.gr.jp/cards/*"],
		"js": ["script.js"]
	}],
	"background": {
        "scripts": ["background.js"],
        "persistent": false
	},
	"browser_action": {
		"default_icon": "icon32.png",
		"default_title": "るびきりかえ"
	},
	"permissions": [
		"tabs",
		"background",
		"http://*/*",
		"https://*/*"
	]
}
```

せっかくツールバーボタンを使っているので、ルビの表示・非表示の状態をボタンで表現するとか、popup.htmlを使って作るとか、まだ改良の余地がありそうですが、いったんここまで

# まとめ
とっても簡単なブックマークレットを、とっても簡単にGoogleChromeの拡張に切り替える手順を作ってみました。こんなに簡単ならもうちょっと活用してみようと思います。本格的にやるにはもうちょっと勉強が必要っぽいですけど。

## 参考にしたページ
http://degitekunote.com/blog/2016/11/02/chrome-extension/
https://qiita.com/guru_taka/items/37a90766f4f845e963e5