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

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

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

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

    • 連休なので、はてな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 ...

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

    • 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アカウント...

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

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん