最新のニュースが表示できるChrome拡張を作った

クソアプリ2のアドベントカレンダーに空きが出たので投稿します@Yuta_Fujiwaraです。
これが人生で初めてのアドベントカレンダーです！

２０１８年に作ったけど世の中に出ることができなかったクソアプリがあったので、
これを機会にリリースさせてください🙇‍♂️

## 作ったもの

最新のニュースが表示できるChrome拡張です。
クロームをお使いの方は以下のURLからインストールすることができます。

[G-NewsFeeds](https://chrome.google.com/webstore/detail/g-newsfeeds/fnajhfbmpodckfkabohdghdodhoapfpj)
[https://chrome.google.com/webstore/detail/g-newsfeeds/fnajhfbmpodckfkabohdghdodhoapfpj](https://chrome.google.com/webstore/detail/g-newsfeeds/fnajhfbmpodckfkabohdghdodhoapfpj?hl=ja)
![名称未設定-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/147291/f7cc63b8-6796-e14a-f0d0-6e4cdd3fd6bf.jpeg)

### **デモ**
![ezgif-5-ca17650fa981.gif](https://qiita-image-store.s3.amazonaws.com/0/147291/98596785-79fb-50e2-cb5e-9c4cdd3fb4b5.gif)


### 概要

GoogleNewsから最新のニュースを取得するクローム拡張です。

* ①国際
* ②国内
* ③ビジネス
* ④政治
* ⑤エンタメ
* ⑥スポーツ
* ⑦テクノロジー

のテーマから最新のニュースを取得して、クローム拡張の画面内に20個のニュースを表示します。サムネイルが含まれているものは表示されます。デフォルトは『テクノロジー』になっています。

### 作った経緯

今のプロジェクトでは週に1回社内勉強会を開催しています。デザイナー、エンジニアが集まり興味のあることや勉強したことなどを共有しています。その勉強会でChrome拡張のAPIについて話す機会があり、その時のデモで作ったサービスです。

勉強会でのみなさんの反応があまり良くありませんでした。ニュースを見るだけならクローム拡張である必要ないんですよね。普通にWebメディア開けばいいし...。そのため今日までお蔵入りしていました...🙏

それにしてもテレビやニュースメディアを見る習慣って減ってきてますよね...。僕自身Twitterで流れてくるニュースしか見ないのですが、業務的に日頃のニュースやトピックなどを見る必要があったので、簡単にニュースを取得できて、1日のトピックがまとめられている拡張とかあったら需要あるんじゃないかと思い、自分のために自分で作りました。

### 解説

アーキテクチャは以下のようになっています。

![20180607--LT.jpg](https://qiita-image-store.s3.amazonaws.com/0/147291/d1f04e7f-1287-f9d6-4406-b71c028cce1f.jpeg)


アイコンを押したときに、フロントからAPIを呼び出し、そのAPIがgoogleのRSSを取得します。取得したRSSをJSONにパースして再度フロントに返し、JSONのデータを描画するという実装になっています。

### 技術

* フロントエンド
    * jQuery

* サーバーサイド
    * PHP

* Chrome APIs
    * https://developer.chrome.com/apps/api_index

* Google News RSS
    * [① 国内　](https://news.google.com/news/rss/headlines/section/topic/WORLD.ja_jp/%E5%9B%BD%E9%9A%9B?ned=jp&hl=ja&gl=JP)
    * [② 国際](https://news.google.com/news/rss/headlines/section/topic/WORLD.ja_jp/%E5%9B%BD%E9%9A%9B?ned=jp&hl=ja&gl=JP)
    * [③ ビジネス](https://news.google.com/news/rss/headlines/section/topic/BUSINESS.ja_jp/%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9?ned=jp&hl=ja&gl=JP)
    * [④政治](https://news.google.com/news/rss/headlines/section/topic/POLITICS.ja_jp/%E6%94%BF%E6%B2%BB?ned=jp&hl=ja&gl=JP)
    * [⑤エンタメ](https://news.google.com/news/rss/headlines/section/topic/ENTERTAINMENT.ja_jp/%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%A1?ned=jp&hl=ja&gl=JP)
    * [⑥スポーツ](https://news.google.com/news/rss/headlines/section/topic/SPORTS.ja_jp/%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%84?ned=jp&hl=ja&gl=JP)
    * [⑦テクノロジー](https://news.google.com/news/rss/headlines/section/topic/SCITECH.ja_jp/%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC?ned=jp&hl=ja&gl=JP)

※RSSのパラメーターについては定期的に変更されているので、都度確認が必要です。

### Chrome APIs

Chrome APIsについては以下の記事にまとめられていますので今回は触れません。またこのアドベントカレンダーでもChrome拡張がリリースされているので参考にしてみるのもいいかもしれません！


[**Chrome拡張でとっても役立つAPIのまとめ**](https://qiita.com/Yuta_Fujiwara/items/daf41429f95caec82982)

[**壁を殴れるChrome拡張機能を作った**](https://qiita.com/Morix1500/items/a671f90c8517988e3c0d) - @Morix1500

[**TwitterでMarkdownを使えるようにした**](https://qiita.com/dala00/items/1f15c68cd771ea9c401a) - @dala00 

Chrome拡張はクロームのブラウザ全体のイベントを取得できるので、Webよりもできることが多いです。

僕も[**BLOCK CLOCK**](https://tech-portfolio.org/block_clock/)という、ポモドーロの時間術を使い２５分間集中しながらSNSをブロックする Chrome拡張をリリースしました。 このサービスもWebだけでは実現できないことを、Chrome APIsを使って実現させています。

[開発に集中するためのChrome拡張を作りました！](https://qiita.com/Yuta_Fujiwara/items/ce4de683255aeffffb5d)

## ぜひ使ってみてください！

[G-NewsFeeds](https://chrome.google.com/webstore/detail/g-newsfeeds/fnajhfbmpodckfkabohdghdodhoapfpj)

ありがとうございました🙏