< http://anond.hatelabo.jp/20141... | ハイクからあふれたspa... >

2014-11-03

■連休なので、はてなNGフィルターを作ったらクソ快適になった話

Chromeの拡張機能としてリリースしましたよ！

はてなNG - Chrome ウェブストア
https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AAng/mbgdnfmdelffjdhkdggilmphfdihnmcj

機能

[対象サイト]

はてな（http://www.hatena.ne.jp/）

はてなブックマーク内ページ（http://b.hatena.ne.jp/）

結果

はてなの閲覧がめちゃくちゃ快適になりました！

目障りなサイトやアカウントは見なくて済むし、ブコメページのノイジーなコメントも連打スターもなくなってスッキリ！

更にワンクリックで気楽にNGフィルターオンとオフの切り替えが出来るようにした事で、NGありなしの状態が一目瞭然で比較できて、はてなのエントリーの傾向、ブックマーカーの傾向もよく分かるという新しい発見も！追)そして自分がどんなに偏ってるかの発見も！

動機

ホットエントリーに上がってくる、まとめ系、はてな村系、虚構系なんかは個人的にどうにも苦手で、それについて以前増田で書いたら多くのご批判、ご意見を頂きました。

■はてなの代替サービスを教えてちょ

http://anond.hatelabo.jp/20140929012633

人気コメントが「無いなら自分で作れば」って感じで、成る程、ほんじゃまぁやってみるかと。一度Chromeの拡張機能を作ってもみたかったので。

で、NGリストを登録してはてなの公式ページをフィルタリングする方向で作ろうと決めました。あと、どうにも気になっていたのがkiya氏系のスター連打。この対策も機能に盛り込もうと。構想が固まって、勉強がてらある程度の試作を作ってみました。したらなかなか良い出来なんじゃないかと、手前味噌だけど自分だけで使ってるのは勿体無い、面白いから皆さん使ってみて下さいよーって事で、この連休でChromeウェブストア公開用に一気に作り込みました。

技術

ざっくりと。

Chrome拡張機能はHTMLとJavaScriptで制作できます。

それらをマニフェストファイル（manifest.json）というJSON形式の設定ファイルで、タイトル、説明、権限やアイコンなどと共に紐付けして設定します。

これらが入ったフォルダをChromeの拡張機能ページから読み込ませれば動作します。

Googleに$5払ってデベロッパー登録し、バナー等必要データを用意すればChromeウェブストアで一般公開もできます。


拡張機能のスクリプトが動作する環境は大きく分けて4つで、マニフェストファイルで設定できます。

  1. background：常にChromeの裏で動くスクリプトを設定します。
    今回はユーザーがタブを切り替えた時にそのタブページがNGサイトかどうか判定しそれによりアイコンの表示を変えるスプリクト等を設定しました。
  2. browser_action：アドレスバーの右側の拡張アイコンをクリックした時に表示されるポップアップ画面とスクリプトを設定します。
    普段HTMLページをコーディングするのと同じ感覚です。今回はBootflatベースで制作しました。
  3. content_scripts：特定ページに対するスクリプトを設定します。
    今回は「http://www.hatena.ne.jp/」と「http://b.hatena.ne.jp/*」に対してスタイル、DOM操作をするスクリプトを設定しました。
  4. options_page：オプションページを設定します。
    今回は使用していません。

このマニフェストにはバージョンがあって、現在使用できるのは2.0のみになっています。Chrome拡張機能の製作方法はググれば先人達の情報が沢山出てきますが、このバージョンが古い情報もありますので注意しないとハマってしまいます。

参考にしたサイトは様々ですが、検索で出てきた日本語サイトでざっくりと把握させていただき最終的には公式サイトが一番確実でした。

http://dev.screw-axis.com/doc/chrome_extensions/（マニフェストのバージョンは1.0が対象のようです）

http://qiita.com/sqrtxx/items/19fd2114430e9e1fb57f

http://blog.fenrir-inc.com/jp/2012/09/jquery-chrome-extension.html

https://developer.chrome.com/extensions

https://developer.chrome.com/extensions/api_index


制作環境は Haxe + Sublime Text です。

まとめ

Chrome拡張機能開発は思ったよりは簡単でした。JavaScriptが出来る人は一度試してみると楽しいかもしれません。と、同時にインストールする拡張機能によってブラウザが重たくなる理由もわかりました。ブラクラになる程重い処理を裏でぶん回す事も簡単に出来てしまうので、なるほどなーと。

そんな感じで開発したのですが、機能ははてな様の現在のページデザインに依存しております。ですので、はてなのサイトデザインが改変した際には動作しなくなったりレイアウト崩れしてしまう場合があります。ご了承くださいませ。その他バグなどご報告下さいましたら出来るだけ対応いたしますのでご感想など聞かせていただければ嬉しいです。

Permalink | 記事への反応(9) | 17:03

記事への反応 -
  • はてなの代替サービスを教えてちょ

    技術系のコニュニティと文化系の情報とちょいリベラルな思想 今までは当然のようにはてなが情報源になっていたけど 最近は斉藤界隈とか、はてな村奇譚とかいわゆるはてな村とかが全...

    • 連休なので、はてなNGフィルターを作ったらクソ快適になった話

      Chromeの拡張機能としてリリースしましたよ！ はてなNG - Chrome ウェブストアhttps://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AAng/mbgdnfmdelffjdhkdggilmphfdihnmcj 動機 ホットエントリーに上がっ...

      • http://anond.hatelabo.jp/20141103170332

        Firefoxアドオンも、だれかつくってください　(-人-) 連休なので、はてなNGフィルターを作ったらクソ快適になった話 http://anond.hatelabo.jp/20141103170332

      • http://anond.hatelabo.jp/20141103170332

        便利な拡張機能ありがとう。 ざっくりと2chまとめ系のサイトのURLを集めてみた。 まとめ系を見たくない人はこれをNGリストに入れておけばいいんじゃないかな。 こんなにたくさんあ...

        • http://anond.hatelabo.jp/20141104001859

          ありがたやありがたや こういうURLを誰かが配信して適当にぶち込めるRSSみたいな機能があったら楽だなー

        • http://anond.hatelabo.jp/20141104001859

          最近のホットエントリとかに入ってきたウチ、 何万PVだとかブログ論的な事を語ってるのとか、 100％アフィのためのさいととかなのに「テクノロジー」とかに上がってきてうざいサイト...

          • http://anond.hatelabo.jp/20141104032921

            今日流れてきたスパム、ブログ論、ポエム、クズアフィ、等を追加 http://joshi-daisei.hatenablog.com http://suzukidesu23.hateblo.jp http://info-precious.jp http://mememememiti.hatenablog.com http://juverk.hatenablog.com http:...

      • http://anond.hatelabo.jp/20141215235949

        ホットエントリーに入ったときに読むことはあってもブクマをつけたくないブログだった あとで読まなくていいなと思ったし、復活してもつけることはない 例の女性の騒動以降は、この...

      • はてなNGフィルターのご紹介

        http://anond.hatelabo.jp/20141103170332 快適、快適。 daisuke-tsuchiya.hatenablog.com www.pojihiguma.com reon5653desu.hatenablog.com tensaychang.hateblo.jp honeysuckle.hatenablog.jp blog.imalive7799.com west81.hatenablog.com www.fair-...

      • http://anond.hatelabo.jp/20141103170332

        ここのはてなNGフィルターって増田じゃ使えないの？ スパムNGしたいんだけど

      • あるエントリがブコメ非表示にしててぱっと見判定できなさそうだったけど

        http://b.hatena.ne.jp/entry/www.yokobentaro.com/entry/2016/06/03/083023 タグが互助会全開で判定できた。こんなとこでタグが役に立つとは思わなかった 荒らし系増田に聞きたいんだけどタグ荒らしってど...

      • 連休なので、はてなNGフィルターを作ったらクソ快適になった話

        http://anond.hatelabo.jp/20141103170332 Chromeの拡張機能としてリリースしましたよ！ はてなNG - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AAng/mbgdnfmdelffjdhkdggilmphfdihnmcj [...

      • 連休なので、はてなNGフィルターを作ったらクソ快適になった話

        http://anond.hatelabo.jp/20141103170332 Chromeの拡張機能としてリリースしましたよ！ はてなNG - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AAng/mbgdnfmdelffjdhkdggilmphfdihnmcj [...

      • はてなNGの代替品作った

        anond:20180323232608 はてなフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/nogcpadcgpkonifnaagfghkaiiojdcap 機能 サムネイルを除去しま...

        • anond:20180609124213

          アイコン勝手にやっつけました。不要なら無視してください https://drive.google.com/open?id=1dme9Pc6xqyGOhoZLvs2vLeEVnNQO9RNn

        • anond:20180609124213

          有能

        • https://anond.hatelabo.jp/20180609124213

          ありがたく使わせてもらう が、謹製NGリストは結構なんだがオプトアウトくらいは出来るようにしとけやボケ

          • anond:20180610110245

            そのうち誰かがソースの編集方法書いたエントリ上げてくれるよ

        • anond:20180609124213

          非表示タイトルに「石橋貴明」と入れていますが、 石橋貴明は「めげない」低予算でもバラエティー魂（日刊スポーツ） - Yahoo!ニュース https://headlines.yahoo.co.jp/hl?a=20180610-00234371-nksports-ent...

        • はてなNGの代替品1.0.1を公開した

          https://anond.hatelabo.jp/20180609124213 はてなフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/nogcpadcgpkonifnaagfghkaiiojdcap 更新履歴 1.0.1 ...

        • はてなNGの代替品1.0.1を公開した

          https://anond.hatelabo.jp/20180609124213 はてなフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/nogcpadcgpkonifnaagfghkaiiojdcap 更新履歴 1.0.1 ...

          • anond:20180626014530

            ホッテントリ入りしていた追悼記事を はてなNGの代替品 に追加したらとても捗った。

        • YoutubeNG(フィルタ)も作った

          anond:20180609124213 Youtubeフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/youtube%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/dfbfdjepofdfhdddfdggabjjndhiggji?hl=ja&amp;gl=JP 機能 「非表示チャンネル」をチ...

          • anond:20180614193138

            便利に使わせて貰ってるけど、検索結果にフィルタ対称チャネルの動画が表示されるようになってしまったよ。 アップデートしてくれたら、投げ銭（今は投げ銭する場所無いけど）する...

        • はてなNGの代替品1.0.2を公開した

          https://anond.hatelabo.jp/20180609124213 はてなフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/nogcpadcgpkonifnaagfghkaiiojdcap 更新履歴 1.0.2 ...

        • anond:20180628211550

          そこですげー矛盾を感じるのが、キライなのになぜブクマするのか？って話なんだよな お前らその辺の詐欺師嫌いならホットエントリーしないようにスルーしとけよ、と 結局、叩きやす...

        • はてなNGの代替品 for Firefox も作った

          anond:20180609124213 はてなフィルタ - Firefox 向けアドオン https://addons.mozilla.org/ja/firefox/addon/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/ 機能 Chrome版1.0.2相当(というか全く同じ) "URL(...

          • anond:20180702130545

            UbuntuのFirefox 60.0.2でインストールできない 無理やりダウンロードしたら使えたけど

            • anond:20180705092936

              バージョン1.0.0.1で対応しました。 linux/androidでも「Firefoxへ追加」できるようになってます。たぶん。 バージョン上げずに対応OSを変更する方法はないようです。

        • はてなフィルタかHateb Tweakを使おう

          anond:20180709220739 はてなフィルタ はてなフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/nogcpadcgpkonifnaagfghkaiiojdcap はてなフィル...

        • はてなNGの代替品 for Firefox の Android 対応

          anond:20180609124213 はてなフィルタ - Firefox 向けアドオン https://addons.mozilla.org/ja/firefox/addon/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/ 機能 (AndroidかつFirefox限定ですが)スマホでもはてブ...

        • はてなNGの代替品 Chrome1.0.3/Firefox1.0.1 を公開した

          https://anond.hatelabo.jp/20180609124213 はてなフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/nogcpadcgpkonifnaagfghkaiiojdcap はてなフィル...

        • YoutubeNG(フィルタ) for Firefox も作った

          anond:20180609124213 Youtubeフィルタ - Firefox 向けアドオン https://addons.mozilla.org/ja/firefox/addon/youtube%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/ Youtubeフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/...

        • anond:20191017120039

          再投稿はなんとやら はてなNGが使えなくなったのってもう1年以上前のことじゃない。作者ももう反応してくれないので代替アドオンを作った方がいた。https://anond.hatelabo.jp/20180609124213 増...

        • てすと

          anond:20180609124213 Twitterフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/twitter%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/eoglgmgmfacolbkbjpkhdloieffcmnan Twitterフィルタ – 🦊 Firefox (ja) https://addons.mozil...

        • はてなNGの代替品 Chrome1.0.4/Firefox1.0.2 を公開した

          https://anond.hatelabo.jp/20180609124213 はてなフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/nogcpadcgpkonifnaagfghkaiiojdcap はてなフィル...

          • anond:20200424052213

            API叩けばスターは引っ張ってこれるのですが、1ブコメにつき1回叩く必要があり、 entries.json は、本物の実装でも一度に20個分のブコメのスターを取得してる。 本物と同じ頻度だったら...

        • ブログランキング・新着記事フィルタ(拡張機能)作った

          anond:20180609124213 ブログフィルタ - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%83%96%E3%83%AD%E3%82%B0%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/ljnpbbominfcpmeibilmpombbijelmfn?hl=ja ブログフィルタ – 🦊 ...

    • http://anond.hatelabo.jp/20140929012633

      正直に言えば現状のはてブは見る価値ないからRSSで購読先を探す方が効率的。 というかコメントはどこのサービスも馬鹿が大半。まぁ短時間で前提が歪んでないか精査するのは難しいか...

    • http://anond.hatelabo.jp/20140929012633

      はてなの代替になるかどうかはあれだけど、情報源ということであればTwitterでノイズの少ないタイムラインを作ってみては。Twitterならうざいと思えばリムーブできるし、アプリによって...

      • http://anond.hatelabo.jp/20140929072511

        一覧性が低いからなぁ 以外と2chは良いかもしれない もちろん石のほうが多いけど一周してまともなレスもちらほら見えてきてるし

    • http://anond.hatelabo.jp/20140929012633

      代替が見つかるまでにまずやることははてなをやめること。 今日もはてブのくだらなさには心底頭に来た。本当に終わってる。バカが移りそうだし精神衛生上も良くないから見ないこと...

    • http://anond.hatelabo.jp/20140929012633

      お気に入り機能挙げてる人が多いけど、NewsPickと比べると弱いよね 向こうはちゃんとした専門家もキュレーションに参加してるから はてブは気持ち悪いネット界隈の盛り上がりに興味が...

    • http://anond.hatelabo.jp/20140929012633

      記事探すなら2ちゃんねるやRedditがおすすめ。 お気に入り機能がある！と勧めてる人がいるけど、ゴミ記事ばっか集めてくるブクマカばかりだよねー

    • http://anond.hatelabo.jp/20140929012633

      NewsPicks も低レベルな糞コメントの嵐だし、もっとまともなサービス欲しいよね。新しく作るしかないんだろうか。

    • 読みたいもののある空間を手にするためにやれることをやってみている

      はてなの代替サービスを教えてちょ はてなの代替サービスってある？ っていう意見、私もちょっと目指すものは違うのですけど「私の読みたいものがいっぱいあるはてな」になった...

    • 連休なので、はてなNGフィルターを作ったらクソ快適になった話

      Chromeの拡張機能としてリリースしましたよ！ 機能 登録したNGアドレスのエントリーをブロックします。 登録したNGワードを含むエントリーをブロックします。 登録したNGアカウント...

    • はてなの代替

      散々言われてるけどはてブが厳しくなりすぎたので代替を探そうと思って検索したら一番上に出てきた増田見て笑っちゃった https://anond.hatelabo.jp/20140929012633 はてな村やら互助会やらより...

    • anond:20140929012633

      そうすると、お前がそこに行くということの意味を、新参が来てうざいという自分の発言と照らし合わせろ。 まずは、増田で英気を補充して、はてなの問題に向き合え

記事への反応（ブックマークコメント）

人気エントリ

注目エントリ

ログイン ユーザー登録
ようこそ ゲスト さん