この記事は

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

背景

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

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

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

夏目漱石　吾輩は猫である
https://www.aozora.gr.jp/cards/000148/files/789_14547.html

フリガナの構造を知る

フリガナが漢字の上に表示されている仕組みを知りましょう。漢字の上に乗っかっているフリガナにはルビという名前がついています。英語にするとrubyです。¹

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

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

全体をrubyタグで囲み、rtタグに読み方、rpタグで両端カッコを囲う²。なるほど。

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

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

$('rt').hide();

ブックマークレットとして仕上げる

まずは、without jQueryな感じのjavascript単体で動くブックマークレットを作ります。

コード

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

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拡張へ進みます。といっても、参考にしたサイト³ に倣って作ったので、今回はそんなに難しくなかったです。

完成品

コード

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

scripts.js(メインのコード)

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

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では、お決まりのコードみたいです。

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.sendMessage(tab.id, "Action");
});

マニフェストファイル

chrome拡張の仕様を決めるファイルです。

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