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

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

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

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

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

📌 Piccs の機能

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

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

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

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

アカウント非表示機能

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

📌 他のアプリとの違い

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

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

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

📌 Piccs を作った経緯

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

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

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

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

📌 UI・ロゴなどについて

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

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

フォント・アイコン

• ロゴ - Josefin Sans
• ロゴ以外のメインのフォント - Ubuntu Font
• アイコン - Feather (初採用)

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

Josefin Sans

Ubuntu Font

Feather

ロゴ

ロゴはこんな感じです。

最初は Inkscape で作っていたのですが、以前から気になっていた Affinity 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 しています。

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

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

  # ...
}

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

• フロントエンドの実装
  フロントエンドでのユーザー情報やデータの取得には 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

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

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

✨ Emotion

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

📱 react-window

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

💳 Stripe

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

まとめ

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

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

• サイト - https://piccs.app
• ハッシュタグ - #Piccs
• Twitter - @yarnaimo