はじめに
Kindle版の資格試験問題集などをタブレットで解く際、回答が問題のすぐ後に「赤文字」で記載されていると、物理的に指や紙で隠しながら読み進める必要があり、学習のリズムが削がれます。
当初、Androidの「画面フィルターアプリ」の利用も検討しましたが、「他のアプリの上に重ねて表示する」ための広範な権限要求に抵抗があったことや、無料アプリでは広告表示が多いことから断念しました。
本記事では、余計な権限を必要とせず、ブラウザ内だけで完結するセキュアで軽量な「デジタル暗記シート」を実装するブックマークレットを紹介します。特に満員電車での片手操作を劇的に快適にすることを目指した設計になっています。
1. なぜ物理的な「下敷き」や「アプリ」ではなく「ブックマークレット」なのか
タブレット学習において、アナログな赤シートや外部アプリではなく、ブックマークレット（JavaScript）で解決することには決定的なメリットがあります。
- 安全性と透明性: 外部アプリのようにシステム全般への権限を許可する必要がなく、コードの内容が自分で確認できるためセキュアです。広告に悩まされることもありません。
- 操作の継続性: 吊り革を掴んだ片手保持の状態でも、親指一本のタップで「表示/非表示」を瞬時に切り替えられます。
- ページ送りとの共存: 物理下敷きはページをめくるたびに持ち替えが必要ですが、本ツールは「次頁ボタン」を避けて配置するため、目隠しをしたまま学習を継続できます。
- 動的な適応力: 教材によって微妙に異なる「赤色の色調」や「回答の位置」に合わせ、透過率や座標をコード一行で最適化できます。
2. 環境の構築
本手法は、Kindleアプリではなくブラウザ版を使用するのが最大のポイントです。
Kindle Cloud Readerの準備
- Android ChromeでKindle Cloud Readerにアクセスします。
- ブラウザメニュー（右上の︙）からPC版サイトにチェックを入れます。
- 注意: すべての書籍がブラウザ表示に対応しているわけではありません。事前に目的の教材がCloud Readerで開けるか確認してください。
ブックマークレットの登録（PC推奨）
Android Chrome上で直接コードを編集するのは困難なため、PCのChromeで登録し、Googleアカウントの同期機能でAndroid側に反映させる方法を推奨します。
- PCのChromeで適当なページをブックマークし、URL欄に後述の「ミニファイ版コード」を貼り付けます。
- 名前を「回答隠し」など、アドレスバーで打ち込みやすい名前にします。
3. 実行方法（Android Chrome特有の挙動）
Android版Chromeではブックマークバーが表示されませんが、以下の手順で実行可能です。
- Kindle Cloud Readerで書籍を開く。
- アドレスバー（URL入力欄）に、設定したブックマーク名（例：「回答隠し」）を入力する。
- 入力候補として表示されたブックマーク（JavaScriptアイコンのもの）をタップする。
4. ソースコード
解説用（非ミニファイ版）
書籍によって隠したい位置や色は異なります。以下のコメントを参考に、ご自身の教材に合わせてカスタマイズすることをおすすめします。
(function(){
var id = 'k-mask';
var m = document.getElementById(id);
if(m){
m.remove(); // 二度目の実行で削除（ON/OFF切り替え）
} else {
m = document.createElement('div');
m.id = id;
// スタイル設定：ここを各自の書籍に合わせて調整
m.style.position = 'fixed';
m.style.top = '0';
m.style.right = '10%'; // 右端10%を空ける（次頁ボタンを殺さないための重要設計）
m.style.width = '25%'; // 回答エリアを覆う幅
m.style.height = '100%';
m.style.background = '#e62e1d'; // 【重要】回答の赤文字と同系色かつ濃い色を指定
m.style.zIndex = '9999';
m.style.opacity = '0.85'; // 【重要】文字が消えるまで透過率を調整（0.85前後が推奨）
m.style.cursor = 'move';
m.style.touchAction = 'none';
// ドラッグ移動ロジック：ページごとの微細な位置ズレに対応
var x;
m.ontouchstart = function(e){ x = e.touches[0].clientX; };
m.ontouchmove = function(e){
var d = x - e.touches[0].clientX;
var r = parseFloat(this.style.right) + d / window.innerWidth * 100;
this.style.right = r + '%';
x = e.touches[0].clientX;
};
// タップで透明/表示を切り替え（トグル機能）
m.onclick = function(){
this.style.opacity = (this.style.opacity === '0') ? '0.85' : '0';
};
document.body.appendChild(m);
}
})();
登録用（ミニファイ版）
コピーしてブックマークのURL欄に貼り付けてください。
javascript:(function(){var id='k-mask',m=document.getElementById(id);if(m){m.remove()}else{m=document.createElement('div');m.id=id;m.style='position:fixed;top:0;right:10%;width:25%;height:100%;background:#e62e1d;z-index:9999;opacity:0.85;cursor:move;touch-action:none;';var x;m.ontouchstart=function(e){x=e.touches[0].clientX};m.ontouchmove=function(e){var d=x-e.touches[0].clientX;var r=parseFloat(this.style.right)+d/window.innerWidth*100;this.style.right=r+'%';x=e.touches[0].clientX};m.onclick=function(){this.style.opacity=this.style.opacity==='0'?'0.85':'0'};document.body.appendChild(m)}})();
5. こだわりの設計ポイント
ページめくりボタンとの共存 (right: 10%)
Kindle Cloud Readerの画面端にあるナビゲーションボタンを隠さないよう、あえて右側に隙間を作っています。これにより、目隠しを設置したまま次ページへ進むことができます。
ドラッグによる動的微調整
電子書籍はレイアウトの都合上、ページによって回答の位置が数ミリ左右に変動することがあります。ドラッグ機能を実装したことで、片手操作のまま即座にフィルター位置を最適化できるようになりました。
透過率 (opacity: 0.85) の重要性
デジタル暗記シートのコツは、完全に塗りつぶすのではなく、文字色と同系色のフィルターを適切な濃度で重ねることにあります。バックライトの強さに合わせて 0.85 付近で調整すると、文字の輪郭が最も消えやすくなります。
6. 推奨環境と制約
- 検証デバイス: iPlay 50 mini Pro（8インチタブレット）、縦持ち利用。
- 制約事項:
- 横持ちや画面分割（Split View）では、Cloud Reader側のレイアウトが2ページ表示などに変わるため、フィルターの幅や位置が合わなくなる場合があります。基本は縦持ちでの利用を想定しています。
おわりに
物理的な不便をJavaScript一行で解決することで、タブレットは一気に強力な学習専用機へと変わります。余計なアプリを入れず、セキュアに学習環境を構築したい方の参考になれば幸いです。