Pocket

最近世間を賑わせている「俺の嫁が可愛い」と「うちの旦那が素敵」を知ってますか??

コンチさんが作ったサイトで、旦那デスノートに対抗して、嫁のかわいいところや旦那の素敵なところを投稿するために作られたサイトです。ネットではもちろん、テレビやラジオ、雑誌でも取り上げられています。

面白いなと思って見てたんですが、ほぼ同時期に作られた2つのサイトでどれぐらい投稿数があるか比較してグラフ化すれば、世の中の旦那と嫁のどちらの愛が強いかが分かるのではと思って作ってみました。

一応注意事項として。

  • コンチさん本人から許可もらってます
  • あくまで思いつきで作ったネタサイトです
  • WP REST APIという技術を使ってて、そのうちAPIは止める予定らしいので、その時はもう見れなくなります(やりようはあるけど、そういう話は置いといて)

気になる投稿数の比較

さっそくその作ったサイトです。

嫁と旦那、どちらの愛が強いか

どれぐらいの数字でしたか??作った時は「旦那すてき!」というほうが少し多かったです。奥さんからの愛の方が強いのかもですね。

「いやいや、そんなことない!」という旦那さんは、負けじともっと投稿してみてはいかがでしょうか??

ぼくもコンチさんと同じく嫁がいないので書き込むことはできません

冒頭でも書いたようにそのうち見れなくなる(というか正確には数字が取れなくなる)サイトなので、キャプチャを貼っておきます。

嫁と旦那のどっちの愛が強いかをグラフ化したサイトのキャプチャ

つかった技術とか

使用技術は、React + WP REST API + D3という感じです。サイトのホスティングはNetlifyを使ってます。

React

Reactの環境構築はめんどうだったので、Create React Appを使ってます。

以下のコマンドでインストールして

npm install -g create-react-app

以下のコマンドでプロジェクト作成できます。

create-react-app my-app

環境構築がめんどくさかったりするんで、非常に便利です。

WP REST API

記事数はWP REST APIで取得してます。

WP REST APIを使うと、記事のタイトルや内容、カテゴリなどいろいろとって来たり、投稿したりできますが、「header[‘x-wp-total’]」な感じで記事の総数も取得できます。

react-d3-components

グラフにはreact-d3-componentsを使いました。

折れ線グラフや棒グラフ、円グラフなどいろいろなグラフが用意されています。取得した数字を当てはめれば簡単にグラフ化してくれました。

Netlify

ホスティングはNetlifyを使ってます。GitHubなどと連携できますが、静的ファイルをドラッグアンドドロップするだけでも、簡単にサイトを公開できます!神!

さいごに

こんな感じで思いつきで作ってみました。

俺嫁サイトを作ったコンチさんの後日談記事にも書かれてるように、思いついたらすぐに作ってみるというのが大事だなと思います。

公開6日で100万PVを叩き出したWebサイト「俺の嫁が可愛い」を公開してみて

WP REST APIとReact Nativeとか使えば、俺嫁アプリも作れちゃいそうです。

今後の「俺の嫁が可愛い」と「うちの旦那が素敵」の動向も楽しみですね!

Pocket