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拡張機能HTMLJavaScript制作できます

それらをマニフェストファイル(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が出来る人は一度試してみると楽しいかもしれません。と、同時にインストールする拡張機能によってブラウザが重たくなる理由もわかりました。ブラクラになる程重い処理を裏でぶん回す事も簡単に出来てしまうので、なるほどなーと。

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

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

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

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

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

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

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

          • 今日流れてきたスパム、ブログ論、ポエム、クズアフィ、等を追加 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/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-...

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

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

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

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

      • 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 機能 サムネイルを除去しま...

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

        • 有能

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

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

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

        • 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 ...

        • 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の代替品 に追加したらとても捗った。

        • 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&gl=JP 機能 「非表示チャンネル」をチ...

        • 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: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(...

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

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

        • 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 はてなフィル...

        • 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限定ですが)スマホでもはてブ...

        • 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: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/...

        • 再投稿はなんとやら はてな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...

        • 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 はてなフィル...

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

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

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

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

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

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

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

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

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

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

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

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

記事への反応(ブックマークコメント)

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