税理士目指す人のブログ

筋トレや読書のことをはじめとして、プログラミングその他日常生活における様々なことについて書いていきます。

Output Blog

主に筋トレ・プログラミングについて書きます

トップ > React > React Native入門⑤ News APIを使ってニュースページを作る【2020】

React Native入門⑤ News APIを使ってニュースページを作る【2020】

React プログラミング

スポンサーリンク

React Native入門⑤ ニュースページを作る【2020】

React Nativeについて知りたいですか？
前回では、React Navigationを紹介しました。
今回からは、ニュースアプリを作っていきます。
そこで本記事では、

  • News APIを使ったニュースページ制作
  • React NativeでAPIを使う

といったことを紹介します。
React Nativeを学びたい方必見です。是非ご覧ください。

今回使うコンポーネント

ActivityIndicator

おなじみのローディングアイコンを表示するコンポーネントです。
大きさや色などが指定可能です。


News APIの使い方

まずNews APIの使い方を紹介します。
News APIは世界中のニュースを持ってこれるAPIです。
Javascript, python , C#, Rubyなどで使うことができます。
基本的にJSONファイルが返ってくるのでそれをうまいこと扱えばニュースが表示できます。

News APIに登録(無料)

News APIは登録してAPI Keyを入手することが必要です。(無料)
News API - A JSON API for live news and blog articles
こちらから登録してください。

登録が完了すると、自動でログインされます。
その後、
Get started - Documentation - News API
こちらのマニュアルページに飛びます。
マニュアルページでは、ログインしている限り、apiKeyの部分に対して自分のAPIKeyを自動で挿入してくれます。

News APIの返り値

{
"status": "ok",
"totalResults": 38,
-"articles": [
-{
-"source": {
"id": "the-washington-post",
"name": "The Washington Post"
},
"author": "Teo Armus",
"title": "Trump threatens to permanently cut WHO funding, leave body if changes aren’t made within 30 days - The Washington Post",
"description": "Trump said the WHO had floundered in its early responses to the coronavirus outbreak as he continued to attack the global health agency and its chief, Tedros Adhanom Ghebreyesus, for being too soft on China.",
"url": "https://www.washingtonpost.com/nation/2020/05/19/who-funding-trump/",
"urlToImage": "https://www.washingtonpost.com/wp-apps/imrs.php?src=https://d1i4t8bqe7zgj6.cloudfront.net/05-19-2020/t_ca4abee0d76e4b5799d05799ccee9242_name_1___1920x1080___30p_00_00_12_13_Still014.jpg&w=1440",
"publishedAt": "2020-05-19T10:29:01Z",
"content": "Trump temporarily suspended U.S. payments in April for 60 days, an unpopular move that critics said was aimed at distracting from his own administrations response to the pandemic. His ultimatum Monday, which came as WHO member countries conferred about the pa… [+3550 chars]"
},
...
}]}

こんな感じの返り値です。
なのでaricles以下を配列か何かに入れてやって、mapで回してあげればいい感じになります。

News APIの検索方法

News APIは国とカテゴリー、ソースでの条件検索、または自由単語で検索が可能です。
また、すべてのニュースを持ってくるか、ヘッドラインを持ってくるかの選択ができます。
詳しくは、
Get started - Documentation - News API
こちらを参照してください。

本記事では、日本のニュース、ヘッドラインという条件でニュースを抽出します。

React Native部分

import * as React from 'react';
import { FlatList, View, ScrollView,Text,ActivityIndicator } from 'react-native';
import { ListItem,Avatar,Icon } from 'react-native-elements';



function NewsList() {

  const [data,setData] = React.useState([])
  const [load,isLoaded] = React.useState(false)

  function getNews() {
    var url = "https://newsapi.org/v2/top-headlines?"+'country=jp&'+'apiKey=(各自のAPIKey)';
    fetch(url).then((response) => response.json())
    .then((result) => {
      setData(result.articles)
      isLoaded(true)
    })
  }

  React.useEffect(() => {
    getNews();
  },[])

  const keyExtractor = (item,index) => index.toString();
  const renderItem = ({item}) => (
    <ListItem
      title={item.title}
      subtitle={() => 
        (<Text>{(item.publishedAt).substr(0,10)}</Text>)
      }
      leftAvatar={() => 
        {
          if(item.urlToImage !== null){
          return(<Avatar size="large" source={{uri:item.urlToImage}}/>) 
          } else {
            return(<Avatar size="large" overlayContainerStyle={{backgroundColor:"#555"}}rounded icon={{name:'file-o',color:"#ffe",type:"font-awesome"}}/>)
          }
        }
      }
      bottomDivider
      chevron/>
  )

  if(!load) {
    return (
      <View style={{flex:1,justifyContent:"center"}}>
      <ActivityIndicator size="large" color="#0000ff" />
      </View>
    )
  }

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <View style={{width:"100%"}}>
        <FlatList
          keyExtractor={keyExtractor}
          data={data}
          renderItem={renderItem}
          />
      </View>
    </View>
  );
}

export default NewsList;

解説するところは特にない気がします。笑

今回のstateは、記事データを入れるものと、ロードが終わったか否かを表すものの2つあります。
もし、ロードが終わっていない状態であれば、条件分岐により ActivityIndicator が表示されます。

useEffectでは、第2引数に空の配列を渡すことで、1回だけgetNews()を実行します。
第2引数を渡さないと、stateが更新され続けるため、useEffectが無限ループするので注意してください。

ListItemのLeftAvatorでは、ニュースのイメージ画像がない場合があるので、その場合にアイコンを表示するようにしています。

ニュースを表示するだけなら結構簡単ですね。
色々なニュースサイトからニュースを持ってきて、バックエンドでアルゴリズムに従って分類などを行えば、smartnewsなどに近くなると思います。


実際の表示画面

React Native入門⑤ News APIを使ってニュースページを作る【2020】

次回からの予定

予定としては、

  • ニュース記事をタップで、Webviewへ移行する
  • Twitterのように、下に引っ張って更新できるようにする
  • カテゴリーを選択できるようにする
  • 「後で読む」機能を追加する
  • ログイン機能を追加する

という感じでやっていこうかなと思います。

まとめ

News APiを使ったニュースページの作り方をまとめました。
次回からもっと本格的なものにしていきます。ぜひご覧くださいね。

スポンサーリンク