こんにちは、@natsuya_ITと申します。
先日、 マッチングアプリのデート体験を共有するSNSアプリ - マッチシェアにスワイプでニュースを閲覧できる機能を追加したので軽く紹介したいと思います 🦜
👇リリース中のアプリはこちら👇
作ったもの
こちらが今回作ったニュース機能です 📗
機能としては非常にシンプルでニュースカードを右へとスワイプすると既読、左へスワイプすると未読のままに、カード押下でニュースページに遷移するといったUXにしています。
実装
クライアント
上記ニュースのスワイプUIはrn-swiper-listというパッケージを参考に、アプリで利用しやすいように少しカスタマイズして自前で実装しています。
主要なpropsとその説明
| props | 説明 |
|---|---|
| data | カードのレンダリングに使用されるデータ オブジェクトの配列 |
| renderCard | カードをレンダリングする関数 |
| cardStyle | 各カードに適用されるスタイル |
| children | コンポーネント内に表示される子コンポーネント |
| onSwipeRight | カードを右にスワイプしたときに呼び出される関数 |
| OverlayLabelRight | 右スワイプのオーバーレイ ラベルとしてレンダリングされるコンポーネント |
使い方は非常に簡単で下記のようにSwiperコンポーネントに必要なpropsを渡してあげるだけです。
import { Swiper, type SwiperCardRefType } from 'rn-swiper-list';
// (中略)
return(
<Swiper
ref={ref}
cardStyle={styles.cardStyle}
data={IMAGES}
renderCard={renderCard}
onSwipeRight={(cardIndex) => {
console.log('右にスワイプしたよ', cardIndex);
}}
OverlayLabelRight={OverlayLabelRight}
// (省略)
/>
)
スワイプ周りの実装
初期表示はニュースを15件取得しており、最後の1件をスワイプした時に、リクエストのpageをインクリメントし追加のニュースを取得するというシンプルなものです。
const setIsLoading = useSetRecoilState(getLoadingAtom('getNewsList'));
const handleGetNews = useCallback(
async (page: number) => {
setIsLoading(true);
const res = await axios.get("https://XXXXXX.XXX", {
params: hoge,
headers: hoge,
});
setCurrentNewsList(res.data.hoge);
setIsLoading(false);
// （以下省略）
},
[setCurrentNewsList, setIsLoading],
);
// 右スワイプ（既読）した時に呼ばれる関数
const handleReadNews = async (newsId: string) => {
// 既読apiを呼ぶ
const res = await handleReadNewsTrigger({
params: hoge,
});
//（中略）
// スワイプしたニュースを取り除く
handleRemoveNews(newsId);
// 追加ロードが必要な場合はpageをインクリメントして新しいニュースを取得する
if (shouldFetchNextNewsList) {
handleGetNews(currentNewsListPageIndex + 1);
setCurrentNewsListPageIndex(currentNewsListPageIndex + 1);
}
}
サーバー
サーバー側ではpythonを使用して、マッチングアプリに関連する記事をPR TIMESからスクレイピングし、DBに取得した情報を増分だけ格納するようにしています 🐰
また、都度最新のニュースを手動で取得することは手間なので、Jenkinsを使用して、1日に1回スクレイピングを行い自動化するようにしました。
💃 終わりに
マッチシェアに導入したニュース機能を紹介してみました。
初めはマッチングアプリのようなスワイプできるUI/UXをどのように実装しようか少し悩みましたが、個人的にはrn-swiper-listは非常に使いやすい印象を受けました。
今回はニュース機能の実装に使用しましたが、公式レポジトリのexampleでも紹介されているように、マッチングアプリを開発するなどする時にReact Nativeを使用するのであれば、導入を検討してみるのもアリだと感じました。
またサーバー側でスクレイピング作業を自動化したことでユーザー数に頼らない、アプリの動的な機能を実装することができました。
今回追加したニュース機能についてやその他質問等あればご質問お待ちしております 🍭
開発メンバーや開発の背景、技術構成等はこちらの記事で紹介しておりますので、興味がある方は見てみてください🕺