Live Dwango Readerのサービス終了のお知らせヘッダーを除去するChrome拡張を作ってみた

しがひ

2017.09.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ベルリンオフィスのバックオフィスの社員と目標設定面談をしたところ、JavaScriptを覚えたいということで、ウェブサイト以外に何かいい題材はないかと考えてみました。AWSのLambdaでも動くNode.jsはとっかかりには重すぎるので、Google Apps ScriptやChrome拡張がいいだろうと、私（非エンジニア）自身のおさらいもかねてサイト書き換え系Chrome拡張を一通り作ってみました。

LDRへの後ろ髪と世代交代

先日、サービスインから10年以上の長きにわたって運用されていたLive Dwango Reader (LDR)が8月末をもって停止することが決まりました。動作の軽快さやショートカットのわかりやすさから私的には代替できるサービスは一つとしてないと今でも思っています。そんなユーザーの想いが通じているのか、9月も月末にかかってきているのにまだ変わることなくサイトは動作しています。

しかしこのお知らせヘッダー ↓ が画面を小さくしてしまって邪魔臭いので取ってしまおうというわけです。

header

英語、ドイツ語話者の当該20代女性社員にこれを実際にやらせるわけではないのですが、念のためフィードリーダーやRSSは知っているか確認したところ、RSSはかろうじて聞いたことはあるというレベルでした。リリースにもある通り、「この数年で利用者も大幅に減少しており、サービスとしての役割を終えたと考え、終了という判断に至りました。」という事実に偽りはないようです。

上に書いた「ユーザー」というのは「おっさん」と言い換えて差し支えありません。

先日、はあちゅうさんがこうつぶやいていましたが、おっしゃる通りです。

インスタが誹謗中傷の比較的少ない場所に育ったのは、水をさすおっさんが少なかったからって数日前にインタビューで答えたんだけどツイッターで新しいサービスへのリアクションを見ていると、私の仮説あたってるんじゃないかって思いますねー。「おじさんがよくわからないもの」は育つ。

— はあちゅう (@ha_chu) 2017年9月12日

我々世代には新しい技術やサービスやメディアにカネを出さないくせに過剰に口を出す習わしがあります。早く屍を乗り越えて世界の中核を担ってほしいものです。

JavaScriptでのHTML要素同定

相変わらず枕が長いですが、オブジェクト、メソッドといったJavaScriptの基本のきで、HTMLの要素を同定して操作する方法をみてみましょう。

オブジェクト指向を説明し出すと先出のおっさんが水を得た魚のように水をさしにきますが、簡単にいうとドット(.)で区切られた部品を決めたり、見つけたり、操作したりすることです。それの設計図にあたるクラスというものがありますが、JavaScriptでは半年は覚えなくていいです。

[gist id="e6a45fcb7d9aa088518cd9284900b91e"]

Chromeのメニューから、表示 --> 開発/管理 --> JavaScriptコンソールを出して上記のコードを入力すると動作が確認できます。これでJavaScriptのオブジェクトはだいたい理解できるのではないでしょうか。

ではライブドアリーダーのページのHTMLをのぞいてみましょう。

[gist id="31ebe5a5ea1a8695ecc426fc38221bd3"]

<head>が終了して<body>開始直後にお知らせヘッダーがあることがわかります。<div>タグは要素のIDが設定されている場合とベタ書きされている場合がありますが、ここでは後者です。

この部分を特定するには、メソッド document.getElementsByTagName() を使用して<div>タグの配列を取得して、インデックス 0 を指定します。コンソールで変数を定義してみましょう。

div-element

変数 ldrHeaderは全ての<div>タグ要素を配列にしたものですが、目的の部分は一番最初に登場する<div>なのでインデックス 0 を指定することで同定できました。

この<div>タグがもつスタイルと中身のテキストがページの上方を占拠しているので、JavaScriptでそこを上書きします。

removed

はい。消えました。説明付きのコードは下記の通りです。

[gist id="bb145f7fc63dcf9986c239241d9c51bc"]

Chrome拡張で使用する

サイト書き換え系Chrome拡張は驚くほど簡単に作成できます。任意のフォルダに manifest.json と contentscript.js のふたつを格納して下記の拡張機能の設定から読み込ませるだけです。

extention

右上端のボタンからその他のツール --> 拡張機能を開き、デベロッパーモードをチェックすると、「パッケージ化されていない拡張機能を読み込む」というボタンが出現するので、それを押してフォルダを選択します。LDRのページを開くともうお知らせヘッダーは消えています。

こちらのGithubにそのフォルダを公開していますので、黄緑のボタンからzipでダウンロードすれば同じように使えます。contentscript.js は上記のjavascriptと同じもの、manifest.json は拡張の内容の記述と拡張が機能するURLをLDRのもの (http://reader.livedwango.com/reader/) に限定しているだけです。