Twitter API v2.0について – アプリ認証編 –

Monacaチームの小田川です。

Twitter API v2.0は、Twitter API v1.1からのアップデート版になります。現在は、Early Accessという段階で、Twitter API v1.1から完全には移行できませんが、最終的には、現行のv1.1から完全に移行する予定になっています。

今回は、Monaca関連ではありませんが、Twitter API v2.0を使う機会があったので紹介してみたいと思います。

今回の検証環境は、macOS Catalina（10.15.7）になります。

Twitter API v2の利用方法

Twitter API v2.0を利用するには、はじめにTwitter Developersでアカウントを作成し、Developer Portalからアプリ申請を行います。アプリ申請が通ると、作成したアプリの設定画面から

API key
API key secret
Bearer Token

を確認することが出来ます。

Bearer Tokenは、アプリ認証を行う際に使用するトークンになります。このBearer Tokenは、作成時にしか値を確認することが出来ませんが、API keyとAPI key secretを使用することで、Bearer Tokenを取得することが出来ます。今回は、Bearer Tokenを使用してツイートを取得してみたいと思います。

Bearer Tokenを取得する

Bearer Tokenが分からない時のために、Developer Portalで作成したアプリのBearer Tokenを取得してみたいと思います。

Bearer Tokenを取得するには、https://api.twitter.com/oauth2/tokenにPOSTリクエストを送信します。POSTリクエストを送信する際に、クレデンシャル情報として、API keyとAPI key secretを「:」で繋いだ{API key}:{API key secret}をbase64エンコードした文字列が必要になります。

クレデンシャル情報の作成方法

base64エンコードしたクレデンシャル情報は、ターミナルから以下のコマンドを実行することで作成することが出来ます。

echo -n {API key}:{API key secret} | openssl enc -e -base64 | tr -d "\n"

Bearer Tokenを取得する

クレデンシャル情報が取得できれば、ターミナルから以下のコマンドを実行することで、Bearer Tokenを取得することが出来ます。

curl -X POST -H "Authorization:Basic クレデンシャル情報" -H "Content-Type:application/x-www-form-urlencoded;charset=UTF-8" -d "grant_type=client_credentials" "https://api.twitter.com/oauth2/token"

ツイートを取得してみる

Twitter API v2.0からツイートを取得する際のエンドポイントURLは、以下になります。

https://api.twitter.com/2/tweets/:id

このエンドポイントURLとBearer Tokenを組み合わせることで、ツイートを取得することが出来ます。ターミナルから下のコマンドにBearer Tokenを指定して実行すると、以下のようなJSONの情報が返ってきます。

curl -H "Authorization:Bearer {Bearer Token}" "https://api.twitter.com/2/tweets/1312028311011438592"

{
  "data": {
    "id": "1312028311011438592",
    "text": "【モナカプレス更新！】\n#Vue3 の新機能Suspenseで非同期を使った表示処理をスマートに記述しよう\n\n9月18日に正式リリースされた #Vue.js 3.0の新機能のうち「Suspense」を解説しました。使いこなせると、シンプルな実装が可能になります。\nhttps://t.co/RtkKCiIaSV"
  }
}

tweetsのオプションを指定しない場合は、idとtextの情報が返ってきます。下のコマンドのようにtweetsで利用できるオプションを組み合わせることで、より多くの情報を取得することが出来ます。ユーザ認証が必要な情報は、今回のBearer Tokenからはアクセスすることはできません。オプションの詳しい情報について、こちらを参照してください。

curl -H "Authorization:Bearer {Bearer Token}" "https://api.twitter.com/2/tweets/1312028311011438592?expansions=attachments.poll_ids,attachments.media_keys,author_id,entities.mentions.username,geo.place_id,in_reply_to_user_id,referenced_tweets.id,referenced_tweets.id.author_id&media.fields=duration_ms,height,media_key,preview_image_url,type,url,width,public_metrics,non_public_metrics,organic_metrics,promoted_metrics&place.fields=contained_within,country,country_code,full_name,geo,id,name,place_type&poll.fields=duration_minutes,end_datetime,id,options,voting_status&tweet.fields=attachments,author_id,context_annotations,conversation_id,created_at,entities,geo,id,in_reply_to_user_id,lang,public_metrics,possibly_sensitive,referenced_tweets,source,text,withheld&user.fields=created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,public_metrics,url,username,verified,withheld"

ターミナルから上のコマンドを実行すると、以下のようなレスポンスが返ってきます。

{
  "data": {
    "lang": "ja",
    "created_at": "2020-10-02T13:55:00.000Z",
    "entities": {
      "annotations": [
        {
          "start": 90,
          "end": 97,
          "probability": 0.6146,
          "type": "Other",
          "normalized_text": "Suspense"
        }
      ],
      "urls": [
        {
          "start": 132,
          "end": 155,
          "url": "https://t.co/RtkKCiIaSV",
          "expanded_url": "https://press.monaca.io/atsushi/5426",
          "display_url": "press.monaca.io/atsushi/5426",
          "images": [
            {
              "url": "https://pbs.twimg.com/news_img/1312028327746641922/loqb_Xt0?format=jpg&name=orig",
              "width": 600,
              "height": 487
            },
            {
              "url": "https://pbs.twimg.com/news_img/1312028327746641922/loqb_Xt0?format=jpg&name=150x150",
              "width": 150,
              "height": 150
            }
          ],
          "status": 200,
          "title": "Vue3の新機能Suspenseで非同期を使った表示処理をスマートに記述しよう | モナカプレス",
          "description": "Vueの新バージョン3で登場した新機能の一つが、Suspenseです。これは、ネットワークなどの非同期処理実装時において、その処理前やエラーハンドリングを簡単にしてくれる機能になります。使い方をマスターすれば、非同期処理の伴う表示処理が簡潔に書けるようになるでしょう。 これまでの非同期処理の書き方 例えば、非同期処理で取得したデータをもとに、データの一覧表示を行うコンポーネント（DataTable",
          "unwound_url": "https://press.monaca.io/atsushi/5426"
        }
      ],
      "hashtags": [
        {
          "start": 12,
          "end": 17,
          "tag": "Vue3"
        },
        {
          "start": 71,
          "end": 75,
          "tag": "Vue"
        }
      ]
    },
    "text": "【モナカプレス更新！】\n#Vue3 の新機能Suspenseで非同期を使った表示処理をスマートに記述しよう\n\n9月18日に正式リリースされた #Vue.js 3.0の新機能のうち「Suspense」を解説しました。使いこなせると、シンプルな実装が可能になります。\nhttps://t.co/RtkKCiIaSV",
    "conversation_id": "1312028311011438592",
    "context_annotations": [
      {
        "domain": {
          "id": "65",
          "name": "Interests and Hobbies Vertical",
          "description": "Top level interests and hobbies groupings, like Food or Travel"
        },
        "entity": {
          "id": "848920371311001600",
          "name": "Technology",
          "description": "Technology and computing"
        }
      },
      {
        "domain": {
          "id": "66",
          "name": "Interests and Hobbies Category",
          "description": "A grouping of interests and hobbies entities, like Novelty Food or Destinations"
        },
        "entity": {
          "id": "898673391980261376",
          "name": "Web development",
          "description": "Web Development"
        }
      }
    ],
    "public_metrics": {
      "retweet_count": 1,
      "reply_count": 0,
      "like_count": 0,
      "quote_count": 1
    },
    "source": "Twitter Web App",
    "possibly_sensitive": false,
    "id": "1312028311011438592",
    "author_id": "3102714109"
  },
  "includes": {
    "users": [
      {
        "protected": false,
        "verified": false,
        "name": "Monaca日本語公式",
        "url": "https://t.co/40PfuIvZIq",
        "public_metrics": {
          "followers_count": 445,
          "following_count": 4,
          "tweet_count": 610,
          "listed_count": 8
        },
        "profile_image_url": "https://pbs.twimg.com/profile_images/579564461331124224/uPu5QzDh_normal.png",
        "username": "monaca_ja",
        "entities": {
          "url": {
            "urls": [
              {
                "start": 0,
                "end": 23,
                "url": "https://t.co/40PfuIvZIq",
                "expanded_url": "https://ja.monaca.io/",
                "display_url": "ja.monaca.io"
              }
            ]
          }
        },
        "id": "3102714109",
        "created_at": "2015-03-22T06:02:58.000Z",
        "description": "「Monaca」はアシアルが提供するiOS、Android、Windows 8 に対応したクラウド型のモバイルアプリをHTML5を活用しながらワンソースで開発できます。なお、Monacaに関するお問い合わせの対応は本アカウントでは行っていません。所定の場所よりお問い合わせください。"
      }
    ]
  }
}