1.TwitterAPIを使用したTwitterアカウントの検索機能をLaravelと Vue.jsで実装したい

開発中のプロダクトでTwitterアカウントの検索機能を実装する必要があったので、
その方法を備忘録的に残しておきます。
完成形はこんな感じで、キーワードを入力するとそれに紐づくTwitterアカウントが検索結果に表示されるというものです。

2.TwitterAPI申請方法について

TwitterAPIを使用するには、TwitterDeveloperへの申請が必要です。
申請方法はこの辺りの記事を参考にすると良いと思います！
画像付きで詳しく説明してくれています。

2020年度版 Twitter API利用申請の例文からAPIキーの取得まで詳しく解説
 Laravel5.7でTwitterOAuthを使ってタイムライン取得（申請から説明）

3.Laravelのプロジェクトの変更

TwitterDeveloperへの申請が完了し、API_KeyとTokenが取得できたら、
Laravelのプロジェクトに下記、変更を加えています。

① Composerを使ってabraham/twitteroauthをインストール
② .envファイルにAPI_KeyとTokenなどの情報をいれる
③ configディレクトリにファイルを作成し、.envファイルに書いた定数を呼び出す処理を記述

最低限ここまで設定をすれば、Controllerに諸々記述をすることで
TwitterAPIから情報を取得することができます。

Laravel5.7でTwitterOAuthを使ってタイムライン取得（申請から説明）
こちらの記事では①〜③の方法、さらにServiceProviderとFacadesを使ってControllerでの記述を簡単にする方法までを丁寧に説明してくれていますので、こちらの記事を参考にしてください！
（参考にさせていただきました！ありがとうございます＾＾）
何度もTwitterAPIから情報を取得する場合、設定しておくととても便利です。

今回は①〜③までの手順を書かせていただきます！

①Composerを使ってabraham/twitteroauthをインストール

ターミナルでLaravelプロジェクトがインストールされているディレクトリに移動します。
そこで下記コマンドを打ってください。

composer require abraham/twitteroauth

ターミナルに下記メッセージが表示されたら、成功です！

Package manifest generated successfully.

###②.envファイルにAPI_KeyとTokenなどの情報をいれる
続いて、.envファイルに取得したAPI_KeyとTokenなどを追記します。

.env

TWITTER_CLIENT_ID = TwitterAPIkey
TWITTER_CLIENT_SECRET = TwitterAPI SecretKey
TWITTER_ACCESS_TOKEN = AccessToken
TWITTER_ACCESS_TOKEN_SECRET = AccessTokenSecret
TWITTER_CLIENT_CALLBACK = コールバックしたいURL

###③configディレクトリにファイルを作成し、.envファイルに書いた定数を呼び出す処理を記述
.envファイルに記述したAPI keyなどの情報をconfigファイルを介して呼びだすように設定します。
.envファイルに定義した変数をそのまま呼び出すのはダメみたいです。
その辺は【Laravel】環境変数の使い方の記事を参考に。

まず、configディレクトリにtwitter.phpというファイルを作成します。
そして、twitter.phpに下記のコードをコピペしてください。

config/twitter.php

<?php

return [
    'twitter-api' => env('TWITTER_CLIENT_ID',''),
    'twitter-api-secret' => env('TWITTER_CLIENT_SECRET',''),
    'twitter-token' => env('TWITTER_ACCESS_TOKEN',''),
    'twitter-token-secret' => env('TWITTER_ACCESS_TOKEN_SECRET',''),
    'call_back_url' => env('TWITTER_CLIENT_CALLBACK',''),
];

ここまでで、一旦①〜③の設定は完了です！
続いてTwitterAPIから情報を取得していきましょう。

4.アカウント情報を取得する

それでは、ControllerにTwitterAPIから情報を取得するための記述を記入していきます。
TwitterDeveloperのドキュメントを確認すると
アカウント検索の際にはGET users/searchを使用することがわかります。
情報を取得する際の必須パラメーターqに検索クエリを入れます。
その他のパラメータは下記通りです！

名前	必須	説明
q	必須	検索キーワード
page	オプション	取得する結果のページを指定します。
count	オプション	ページごとに取得するユーザー結果の数。（最大値は20）
include_entities	オプション	entitiesの取得を省略

【①〜③のみを設定した場合】

TwitterController.php

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Abraham\TwitterOAuth\TwitterOAuth;

class TwitterController extends Controller
{
    //　Twitterのアカウント検索
    public function index(Request $request)
    {
        //　Vueファイルで入力された検索されたキーワードの定義
        $q = $request->keyword;
        
        // API keyなどを定義
        $consumer_key = config('twitter.twitter-api'); 
        $consumer_secret = config('twitter.twitter-api-secret'); 
        $access_token = config('twitter.twitter-token'); 
        $access_token_secret = config('twitter.twitter-token-secret'); 

        $connection = new TwitterOAuth($consumer_key, $consumer_secret, $access_token, $access_token_secret); 
        $twitterRequest = $connection->get('users/search', array( "q" => $q, "count" => 20)); 

        return response()->json(['result'=>$twitterRequest], 200);
    }

※今回は、Vueファイルにデータを返すのでJSON形式で　return response()->json(['result'=>$twitterRequest], 200);という記述になってます。

【ServiceProviderとFacadesまで設定した場合】

TwitterController.php

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Abraham\TwitterOAuth\TwitterOAuth;

class TwitterController extends Controller
{
    //　Twitterのアカウント検索
    public function index(Request $request)
    {
        //　検索されたキーワードの定義
        $q = $request->keyword;

        //　TwitterAPIからユーザー情報を取得
        $twitterRequest = \Twitter::get('users/search', array("q" => $q, "count" => 20));
        return response()->json(['result'=>$twitterRequest], 200);
    }

サービスプロバイダとファサードまで設定しておくと、リクエストを投げるときに簡潔に書くことができます！
Laravel5.7でTwitterOAuthを使ってタイムライン取得（申請から説明）
是非こちらの記事を参考に設定してみてください＾＾

5.TwitterAPIから取得した情報について

ここまででデータを取得できたのですが、少し問題があります。
GET users/searchは、アカウント名やアカウント画像、認証アカウントなのか・・・
など様々な情報を取得できます。
ただ、アカウント画像に関してはデフォルトでは48x48ピクセルのものになります。
少し小さめですね・・・

オリジナルサイズの画像を取得したい場合、画像のURLを変更することでそれが可能になります〜
TwitterAPIドキュメントにも記載がありますが、画像のURLから_normalを除いてあげればオッケーです。
では、Controllerの記述に追記していましょう〜

TwitterController.php


//　一部省略してます〜 （TwitterAPIからユーザー情報を取得の記述から〜）
        //　TwitterAPIからユーザー情報を取得
        $twitterRequest = \Twitter::get('users/search', array("q" => $q, "count" => 20)
        // TwitterAPIからのレスポンス プロフィール画像のURLから _normalの文字列を省く)
        foreach($twitterRequest as $res){
            $image = $res->profile_image_url_https;
            $fullImg = str_replace('_normal', '', $image);
            $res->full_img = $fullImg;
            $twitterRes[] = $res;
        }

その他レスポンスボディについては下記記事が参考になります〜
Tweet objects
Twitter 開発者ドキュメント日本語訳

これで表示に必要な情報は取得できたかと思います〜！
長くなったので、Vue.jsを使用したインクリメントリサーチの方法などはまた改めて書こうと思います。
読んでくれた方ありがとうございました＾＾

開発環境

PHP 7.2
Laravel 6.0
Vue 2.5.17

参考リンク

Laravel5.7でTwitterOAuthを使ってタイムライン取得（申請から説明）
2020年度版 Twitter API利用申請の例文からAPIキーの取得まで詳しく解説
 【Laravel】環境変数の使い方
 Tweet objects
Twitter 開発者ドキュメント日本語訳
 TwitterDeveloperのドキュメント
 TwitterAPIドキュメント