[個人開発] 声優・アニメ・アーティストなどの情報を逃さずチェックできるWebアプリ「Piccs」を作りました

お久しぶりです。
1 年ぐらい前に **Vanilla Clipper** という Web ページ保存ツールを作ったりしてたやまいも ([@yarnaimo](https://twitter.com/yarnaimo)) です 🙌


**アニメ・ゲームの作品名や声優の名前**など興味のあるキーワードを登録しておくと、Twitter 上から**公式っぽいアカウントのツイートのみを機械学習で自動的に収集**して表示してくれる Web アプリ「**Piccs**」をリリースしました！！🎉🎉🎉

> **[Piccs](https://piccs.app)**
> https://piccs.app

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83774/274535e7-9c5e-a602-fb53-e30dccc98ead.png)
> ![Desktop - 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83774/2cc728ec-1722-e512-eb97-b948b3ffa03a.png)

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">アニメ・ゲーム・声優・作曲家(?)など興味のあるキーワードを登録すると、公式っぽいツイートのみ機械学習で自動収集してくれるWebアプリ <a href="https://twitter.com/hashtag/Piccs?src=hash&amp;ref_src=twsrc%5Etfw">#Piccs</a> をリリースしました！🎉🎉<br><br>1ヶ月無料 &amp; 以降¥240/月・広告なしで、キーワードを自由に指定して最新情報をチェックできます！<br><br>👉<a href="https://t.co/jCSvgrDzKQ">https://t.co/jCSvgrDzKQ</a> <a href="https://t.co/PiJ0IeVLpk">pic.twitter.com/PiJ0IeVLpk</a></p>&mdash; やまいも🎉情報収集アプリPiccsリリース (@yarnaimo) <a href="https://twitter.com/yarnaimo/status/1245350305635557377?ref_src=twsrc%5Etfw">April 1, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitter の検索をベースにしているので**キーワードは自由に指定**でき、最新情報をジャンルなどで複数のタブに分けてチェックできます。

料金は 1 ヶ月間無料、以降 **¥240/月** で、**広告なし**、キーワード数は無制限です！

**PWA** に対応しているのでホーム画面に追加すると通常のアプリと同じように使えます 🏠

要望や感想などはハッシュタグ「**#Piccs**」をつけてツイートしてください！！

---

## 📌 Piccs の機能

Piccs は**マルチタブデザイン**になっていて、タブごとに複数のキーワードを設定できます。

サーバー側では、登録したキーワードで **1 時間に 1 回ツイート検索**を行い、事前に構築した機械学習モデルでそのツイートが公式アカウントだと判定されればデータベースに保存します。

### 公式ではないアカウントの報告機能

タイムラインに表示されたツイートの中に**公式ではないアカウント**が混ざっている場合は、ツイート右上のメニューから**報告**することができ、報告したアカウントは**ユーザー単位で非表示**になります。報告されたデータは今後の精度向上のために活用されます。

### アカウント非表示機能

公式アカウントだけどこのアカウントは表示したくない、という場合は報告せずにアカウントを非表示にすることができます。

## 📌 他のアプリとの違い

Piccs は一般的なニュースアプリとは異なり Twitter 上から情報収集するので、ニュース記事にならないような細かい情報もチェックすることができます。

また、Twitter 上の情報収集といえば最近 Twitter アプリで「**トピック**」をフォローできるようになりましたが、トピック機能はフォローできる対象が限られていたり、**一般ユーザーのツイート**などもよく表示されるので、一旦フォローしたけどフォローを外したという人も多いようです。

Piccs では**キーワードを自由に設定**でき、**一般ユーザーのツイートもできるだけ入らない**ようになっているので**公式情報をピンポイントで集める**ことができます。

## 📌 Piccs を作った経緯

オタク活動において情報収集は極めて重要ですが、忙しかったり、~~DD~~推しが多かったり、斜め上から情報が飛んできたりすると見逃してしまうことも多いと思います。

私自身は、以前から上田麗奈さんという声優さんの活動を追うために、「上田麗奈」で検索して引っかかったツイートを**機械学習で公式アカウントかどうか自動的に判定しリツイートする機能**などを備えた非公式の Twitter アカウント ([@Unoffishama](https://twitter.com/Unoffishama)) を作り、情報収集に役立てています。

この自動リツイート機能は Jupyter Notebook すら知らなかった 1 年半ほど前に **TensorFlow.js** を使って作った**ロジスティック回帰**モデルで、今となっては実装がツッコミどころ満載なのですが、そのわりには意外と精度が高く TensorFlow すごい…という感じでした (?)。

その後、声優以外の音楽関係のキーワードなども自由に指定して情報収集できるアプリがあれば便利ではないかと思い、非公式アカウントで 1 年半の間に蓄積されたデータを活用して作ったのが Piccs です。

## 📌 UI・ロゴなどについて

デザインは Figma などのデザインツールを使わずに直接コードを書いていきました。全体的に**マテリアルデザイン**がベースで **RMWC** というライブラリも一部で使っています。

今回は事前にテスターの方にも協力していただき UI の改善点を 10 ヶ所以上見つけられました 🙏🙏

### フォント・アイコン

- ロゴ - **[Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans)**
- ロゴ以外のメインのフォント - **[Ubuntu Font](https://fonts.google.com/specimen/Ubuntu)**
- アイコン - **[Feather](https://feathericons.com)** (初採用)

配色や全体のマテリアルデザインとも雰囲気が合っていて統一感が出せた気がします。

**Josefin Sans**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83774/8ffee788-671c-7539-9875-326c826cb341.png)

**Ubuntu Font**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83774/88fd0771-33ee-e707-242f-14a83c63c2bd.png)

**Feather**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83774/73790e03-654c-7083-f3ac-215dac37c115.png)

### ロゴ

ロゴはこんな感じです。

![favicon-196.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83774/0d3d93a1-2dc7-a9ea-6994-6a91dc45c130.png)

最初は Inkscape で作っていたのですが、以前から気になっていた **[Affinity Designer](https://affinity.serif.com/ja-jp/designer/)** というソフトが半額の ¥3,060 になっていた (4/1 時点で継続中) ので購入して使ってみました。
アートボードやオブジェクトの複合 (非破壊結合) など便利な機能が揃っていておすすめです 👍

## 📌 使用したサービス・技術

Piccs は機械学習モデルの構築のみ **Python** を使用し、それ以外はすべて **TypeScript** で実装しています。

### 🔥 Firebase

ここ最近で作った Web サービスは 4 回ぐらい連続で Firebase を使っています。Firebase 最高 👏

-   **Authentication**
    Twitter ログインには Firebase Authentication を使っています。

-   **Cloud Functions**
    ツイートの取得などには Cloud Functions を使っています。
    取得間隔は 1 時間ごとですが、すべてのユーザーが毎時 0 分だと負荷がかかりそうなので、**タブを作成するときに 0 ～ 11 のランダムなシャード番号**を振り、**シャード番号 n** のタブは**毎時 5n 分** にツイートを取得するようにしています。(2 時～ 5 時台は休止)

-   **Firestore**
    取得したツイートなどは Firestore に保存しています。
    Blaze プランだと Firestore は**書き込み・読み込みを行うドキュメント数に応じた従量制**の料金になっていて、1 ツイート 1 ドキュメントの設計だと破産しそうなので **1 ドキュメントに 50 ツイート**入れるようにしました。Firestore は配列がネストしているとそのまま保存できないようなので `JSON.stringify` しています。

    あとセキュリティルールのユーザーコレクション直下にこんな関数を作っておくと便利だと思います。

```firestore.rules
match /appUsers/{uid} {
  function isCurrentUser() {
    return request.auth.uid == uid;
  }

  # ...
}
```

-   **Hosting**
    ホスティングは Firebase Hosting を使いました。ドメインは Google Domains で取得した **.app** ドメインです。

-   フロントエンドの実装
    フロントエンドでのユーザー情報やデータの取得には **[react-firebase-hooks](https://github.com/CSFrequency/react-firebase-hooks)** を使っています。

### 📊 TensorFlow / Keras

ツイートが公式かどうかの判定に使っているモデルは **TensorFlow (Keras)** で実装した **MLP (多層パーセプトロン)** です。**リツイート数やアカウントのフォロワー数**などを入力として与えると**公式っぽさが 0 ～ 1 の値で得られる**ようになっていて、閾値は 0.6 に設定してあります。

Keras のモデルは `tfjs.converters.save_keras_model(model, './path')` のようにすると **TensorFlow.js** で使える形でエクスポートしてくれるので、VSCode 上の Jupyter で学習させたモデルをエクスポートし、**Cloud Functions (Node.js)** でツイートを判定するようにしています。

### ⚡ [Next.js](https://nextjs.org)

Next.js も 4 連続ぐらいで使ってます。

今回は SSR ではなく **Static HTML Export** しています。Next.js を使うとルーティングとか PWA 対応などが簡単なので、SSR しない場合でも Next.js を使うのはアリだと思います。

### ✨ [Emotion](https://emotion.sh)

CSS-in-JS ライブラリ。他に styled-components などもありますが、スタイルを**Object**で記述できたり `<div css={{ color: 'red' }}>` のようにタグに直接書けたりと便利なのでこちらを使っています。

### 📱 [react-window](https://react-window.now.sh)

Piccs は 1 つのタイムラインに最大 **150** 程度のツイートを表示しますが、それらをすべて同時にレンダリングすると重すぎて実用できないレベルになってしまうので、react-window を使って画面外のツイートをレンダリングしないようにしています。**`DynamicSizeList`** が使いたかったので α 版を使いました。

### 💳 [Stripe](https://stripe.com)

決済処理には Stripe を使っています。

## まとめ

Piccs は一般的なニュースアプリとは異なり、情報ソースをあえて Twitter に絞ったことで細かな情報をキャッチでき、フォロワー数などのパラメータを活用して表示する情報を最適化することができました。

もし興味を持っていただけたらぜひインストールして使ってみてください！！

- サイト - https://piccs.app
- ハッシュタグ - [#Piccs](https://twitter.com/search?q=%23Piccs+lang:ja)
- Twitter - [@yarnaimo](https://twitter.com/yarnaimo)