拡張機能で要素をブロックする（スマホ版）
さっそくブラウザをダウンロードしてみましょう。Iceravenを使います。
つぎのURLを検索バーへ入れてEnetrを押します。
https://github.com/fork-maintainers/iceraven-browser/releases
引用：Github、Iceraven
このWebサイト上の画像はハーフトーン画像（C版・籠目網代式）が使われています。Chromium系（Chrome/Brave）では正しく表示されないことがあります。 Mozilla系(Firefox/Iceraven)のブラウザをご利用ください。
Iceravenをインストールする
GitHubというページが立ち上がるので、ページをたどってAssets＜iceraven-2.37.0-browser-arm64-v8a-forkRelease.apkという リンクを見つけてタップします。
端末のストレージへのアクセス許可を求められるので「許可」をタップします。
「ダウンロード」をタップします。
保存したAPKファイルをタップします。サードパーティ製（個人制作のようなアプリ）ですので注意事項が出ますが、「続行」をタップして 進みます。
「インストール」をタップします。
「アプリをインストールしました」が出たら「開く」をタップします。
Iceravenアプリが起動します。「続ける」をタップします。
「規定のブラウザーに設定」をタップします。
「後で」をタップします。
テーマの選択からお好みのモードを選択します。ここでは「システムテーマ」を選びました。 「保存して続ける」をタップして進みます。
ツールバーの配置からお好みのモードを選択します。ここでは「画面下部」を選びました。 「保存して続ける」をタップして進みます。
「確認してブラウジングを開始」をタップします。
Iceravenのホーム画面が出たら準備完了です。
ブラウザの初期設定
はじめに、拡張機能を使うための初期設定をしていきます。つぎのコマンドを検索バーに入れて 「実行」をタップします。
about:config
１番目に、画面右上の検索バーに次のように入力します。※「xpinstall」と入力するだけでも一覧に出ます。
xpinstall.signatures.required
「xpinstall.signatures.required」が表示されるので「true」から「false」に変更します。 右端にある「切り替え」をタップすると変更できます。
もう１つ画面右上の検索バーに次のように入力します。※「dom.ipc.pro」と入力するだけでも一覧に出ます。
dom.ipc.processCount
「dom.ipc.processCount」が表示されるので「2」から「5」に変更します。 右端にある「˄」（＝シェブロン）をタップすると変更できます。
中級編ではカラーハーフトーン画像を表示するためにcanvas要素を使用しています。 新機種であれば大丈夫かもしれませんが、デフォルトの設定だとスマホのブラウザは落ちてしまう可能性があります。 閲覧時に動作がカクつく場合は「dom.ipc.processCount」の数値を上げてください。
２番目に、開発モードを有効にします。ブラウザの右上または右下にある縦三点リーダーをタップします。一覧から「設定」を 選びます。
一番下までスクロールして「Iceraven」についてをタップします。
Iceravenのアイコンを「デバッグメニューが有効になりました」と出るまでタップします。※有効になるまで「有効にするには○回クリックしてください」 が表示されます。
前の画面に戻ると、一覧に「ファイルから拡張機能をインストール」という項目が追加されています。これで準備完了です。アプリを閉じずに 次のステップへ進んでください。
※アプリを一度閉じると開発モードは非表示になりますので、この項目を再び表示するにはもう一度Iceravenの アイコンのタップが必要です。
拡張機能を追加する
では、いよいよ拡張機能を追加していきます。 つぎのリンク（＝test.zip）から拡張機能を取得できます。わかりやすい場所に保存してください。
ブラウザに戻り、縦三点リーダーメニュー＜設定＜詳細設定＜ファイルから拡張機能をインストール、と進みます。 ファイルマネージャーが起動するので、ダウンロードしてきた拡張機能を選択します。
「追加」をタップします。
「OK」をタップします。
縦三点リーダーメニューから「拡張機能」をタップします。一覧に「テスト拡張機能」が追加されていれば成功です。
この拡張機能はもう不要なので、拡張機能をタップして「削除」で消しておきます。
フォントをブロックする
フォントのブロックからいきましょう。 つぎのリンク（＝font.zip）から拡張機能を取得できます。わかりやすい場所に保存してください。
ところで、残念ながら、Iceravenには開発者ツールがついていません。なので、パソコンのように要素がブロックされているかを
確認することができません。そこで、テスト用のページを作りましたので、次のリンクを別タブで開いてみてください。
わくわくフォントを設置してみた
引用：わくわくフォント、miniyama
かわいい丸文字が表示されたと思います。これを覚えておいてください。
ブラウザに戻り、縦三点リーダーメニュー＜設定＜詳細設定＜ファイルから拡張機能をインストール、と進みます。 ファイルマネージャーが起動するので、ダウンロードしてきた拡張機能を選択します。
「追加」をタップします。
「OK」をタップします。
縦三点リーダーメニューから「拡張機能」をタップします。一覧に「フォントの削除」が追加されていれば成功です。
では、もう一度さきほどのリンクを開いてみましょう。
わくわくフォントを設置してみた
つぎのように、あじけな〜いフォントになっていたら成功です。グラフィック作成の ときにはありがたいフォントですが、このフォントセットでも400KB弱あります。
ブラウザよ、情報収集オンリーのときはパソコンやスマホのデフォルトのフォントを使ってくれ！ というわけで作ったブロック拡張機能です。実はブロックするだけなので中身はとてもシンプルな コードが使われています。こちらは以上です。
スタイルシートをブロックする
つづけて、スタイルシートもオフにしてみます。 つぎのリンク（＝css.zip）から拡張機能を取得できます。わかりやすい場所に保存してください。
スタイルシートはWebサイトのレイアウト情報ですので、 ブロックすると見た目が大きく崩れます。しかし、情報収集をメインとしている人にとって 文字以外の装飾が邪魔なときもあります。スタイルシートのブロックはお好みですね。
ブラウザに戻り、縦三点リーダーメニュー＜設定＜詳細設定＜ファイルから拡張機能をインストール、と進みます。 ファイルマネージャーが起動するので、ダウンロードしてきた拡張機能を選択します。
「追加」をタップします。
「OK」をタップします。
縦三点リーダーメニューから「拡張機能」をタップします。一覧に「CSSの削除」が追加されていれば成功です。
では、例題として「一週間で身につくC言語の基本」というページへ拡張機能オフで入ってみます。まずは、「CSSの削除」 をタップして拡張機能を「無効」にしておきます。
つぎのURLを検索バーへ入れて「実行」をタップします。
https://c-lang.sevendays-study.com/index.html
引用：一週間で身につくC言語の基本、 シフトシステム株式会社
URL：https://c-lang.sevendays-study.com/index.html
表示してみるとシンプルなレイアウトが施されています。スマホ版ではハンバーガーメニューがヘッダーに 配置されていますね。これを覚えておいてください。こんどは拡張機能を「有効」にしてみます。
さきほどハンバーガーメニューでまとめられていたメニューリストが展開されています。スタイルシートが 無効になっている証拠です。
※場合によってはスタイルシートがキャッシュされたままになることがあります。その場合は縦三点リーダーメニュー＜ 設定＜閲覧データを削除から「閲覧データを削除」してみてください。
ただ、場合によっては、ページのレイアウトが大きく崩れたり、隠れていたメニューバーの項目でびっしり画面が 覆われる…なんてこともありあます。とはいえ、メインの情報はタイトルがあり、文章が固まっています。だいたいは辿ることが できるでしょう。
スクリプトをブロックする（おまけ）
さいごに、スクリプトのブロックをしてみます。 つぎのリンク（＝script.zip）から拡張機能を取得できます。わかりやすい場所に保存してください。
情報収集メインの場合には、メインの情報部分はhtmlやphpそのものに書かれていることが多く、スクリプトをオフにしても 問題ないことがあります。（＝静的ファイル）しかし、ヘッダーやフッター、メニューバーなどがスクリプトで読み込まれて いる場合、スクリプトをオフにするとページをたどることはできません。（＝動的ファイル）
ログインが必要なページではスクリプトを有効にしてください。
拡張機能を入れる前におさらいです。 ブラウザレベルでスクリプトを停止した場合にはhtml内に書かれたスクリプトも含めてすべて動かなくなります。 対策としてスクリプトを有効にするように文言が表示されるサイトがほとんどです。しかし、拡張機能で ブロックできるのは外部ファイルとして読み込んでいるファイルだけです。
html内に直書きされたスクリプトはブロックしきれないので、LibreWolfやIceravenでは、この文言は表示されません。
なので、ここでもテストページを用意しました。つぎのリンクに入ってみてください。
スクリプトには２通りがある
スクリプトがどちらも有効なため、内容は同じです。これを覚えておいてください。
ブラウザに戻り、縦三点リーダーメニュー＜設定＜詳細設定＜ファイルから拡張機能をインストール、と進みます。 ファイルマネージャーが起動するので、ダウンロードしてきた拡張機能を選択します。
「追加」をタップします。
「OK」をタップします。
縦三点リーダーメニューから「拡張機能」をタップします。一覧に「JSの削除」が追加されていれば成功です。
では、もう一度さきほどのリンクを開いてみましょう。
スクリプトには２通りがある
つぎのように、書いてあることが矛盾していれば成功です。といってもどちらも間違いではありません。 スクリプトファイルはブロックしており、html内のスクリプトは有効になっているからです。 ためしにブラウザレベルでスクリプトをブロックできるKiwi（＝Chromium系）で見てみると スクリプトが完全に停止しているのがわかります。
※場合によってはスクリプトがキャッシュされたままになることがあります。その場合は縦三点リーダーメニュー＜ 設定＜閲覧データを削除から「閲覧データを削除」してみてください。
ただ、スクリプトを有効にしないとページそのものが表示されないWebサイトもあるので、
この方法でデータ通信削減できるのはごく一部です。でも、意外と検索エンジンや
書籍検索ではスクリプトがなくても使えるものが残っています。
※honto電子書籍やYahoo検索エンジンなど
お疲れ様でした！すこしはデータ通信量は軽くなりましたでしょうか？
しかし、上記の方法で削減できるのはごくわずかです。ブラウザのデータ使用量を占めているのはスクリプトについで画像が ほとんどだと思われます。 ここまでは拡張機能とブラウザの機能でカバーできましたが、画像は受信される前に圧縮しなければなりません。 そこで、中級編では無料枠の外部サーバーを使い、画像を圧縮します。そして、拡張機能を使い圧縮した 画像のリンクに差し替えます。
無料枠を使うので永続的に画像を保存することはできませんが、この外部サーバーを使うことで、 PCやスマホの端末に一時保存される期間を操作することができます。これによって、一時保存された画像が 長く使われることでデータ通信を抑えることができるのです。ぜひ、気になる方は中級編へ！