この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
ベルリンオフィスのバックオフィスの社員と目標設定面談をしたところ、JavaScriptを覚えたいということで、ウェブサイト以外に何かいい題材はないかと考えてみました。AWSのLambdaでも動くNode.jsはとっかかりには重すぎるので、Google Apps ScriptやChrome拡張がいいだろうと、私（非エンジニア）自身のおさらいもかねてサイト書き換え系Chrome拡張を一通り作ってみました。
LDRへの後ろ髪と世代交代
先日、サービスインから10年以上の長きにわたって運用されていたLive Dwango Reader (LDR)が8月末をもって停止することが決まりました。動作の軽快さやショートカットのわかりやすさから私的には代替できるサービスは一つとしてないと今でも思っています。そんなユーザーの想いが通じているのか、9月も月末にかかってきているのにまだ変わることなくサイトは動作しています。
しかしこのお知らせヘッダー ↓ が画面を小さくしてしまって邪魔臭いので取ってしまおうというわけです。
英語、ドイツ語話者の当該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 を指定します。コンソールで変数を定義してみましょう。
変数 ldrHeaderは全ての<div>タグ要素を配列にしたものですが、目的の部分は一番最初に登場する<div>なのでインデックス 0 を指定することで同定できました。
この<div>タグがもつスタイルと中身のテキストがページの上方を占拠しているので、JavaScriptでそこを上書きします。
はい。消えました。説明付きのコードは下記の通りです。
[gist id="bb145f7fc63dcf9986c239241d9c51bc"]
Chrome拡張で使用する
サイト書き換え系Chrome拡張は驚くほど簡単に作成できます。任意のフォルダに manifest.json と contentscript.js のふたつを格納して下記の拡張機能の設定から読み込ませるだけです。
右上端のボタンから その他のツール --> 拡張機能 を開き、デベロッパーモードをチェックすると、「パッケージ化されていない拡張機能を読み込む」というボタンが出現するので、それを押してフォルダを選択します。LDRのページを開くともうお知らせヘッダーは消えています。
こちらのGithubにそのフォルダを公開していますので、黄緑のボタンからzipでダウンロードすれば同じように使えます。contentscript.js は上記のjavascriptと同じもの、manifest.json は拡張の内容の記述と拡張が機能するURLをLDRのもの (http://reader.livedwango.com/reader/) に限定しているだけです。
AWSで動き続けたLDR
LDRはライブドア事件の最中に入社した優れたフロントエンドエンジニアの手によって生み出され、パフォーマンスチューニング以外はそれほど当時と変わらぬUIと機能で10年以上提供されてきました。
2014年、LINEがこれを終了すると告知した時、ドワンゴがシステムごと引き取ってAWS上に再構築したのは業界では有名な話です。
私はこのAWSサミットの発表はこれから10年経ってもベストプレゼンテーションであり続けると思っています。
おそらくは古くからメンテナンスされて複雑さを増しているであろうコードを引き取るにあたって、こういった形でAWSを活用しようと思い、実際に超短期間で稼働までこぎつけ、今まで大きなトラブルもなく運用できたエンジニアに感服するばかりです。
186
