TwitterAPIを使用したユーザー検索機能

# 1.TwitterAPIを使用したTwitterアカウントの検索機能をLaravelと Vue.jsで実装したい
開発中のプロダクトでTwitterアカウントの検索機能を実装する必要があったので、
その方法を備忘録的に残しておきます。
完成形はこんな感じで、キーワードを入力するとそれに紐づくTwitterアカウントが検索結果に表示されるというものです。
<img width="200" alt="スクリーンショット 2020-05-21 13.29.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510320/5cca78b9-3a94-62fe-e82d-83d5f0ba26bb.png">
# 2.TwitterAPI申請方法について
TwitterAPIを使用するには、TwitterDeveloperへの申請が必要です。
申請方法はこの辺りの記事を参考にすると良いと思います！
画像付きで詳しく説明してくれています。

[2020年度版 Twitter API利用申請の例文からAPIキーの取得まで詳しく解説](https://www.itti.jp/web-direction/how-to-apply-for-twitter-api/)
[Laravel5.7でTwitterOAuthを使ってタイムライン取得（申請から説明）](https://qiita.com/namizatop/items/439c0604ca15c1ef00cd)

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

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

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

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

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

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

```
composer require abraham/twitteroauth
```

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

```
Package manifest generated successfully.
```

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

```PHP:.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】環境変数の使い方](http://tektektech.com/laravel-environment-variable/)の記事を参考に。

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

```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のドキュメント](https://developer.twitter.com/en/docs/accounts-and-users/follow-search-get-users/api-reference/get-users-search)を確認すると
アカウント検索の際には`GET users/search`を使用することがわかります。
情報を取得する際の必須パラメーター`q`に検索クエリを入れます。
その他のパラメータは下記通りです！

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


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

```php: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まで設定した場合】**

```php: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を使ってタイムライン取得（申請から説明）](https://qiita.com/namizatop/items/439c0604ca15c1ef00cd)
是非こちらの記事を参考に設定してみてください＾＾

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

オリジナルサイズの画像を取得したい場合、画像のURLを変更することでそれが可能になります〜
[TwitterAPIドキュメント](https://developer.twitter.com/en/docs/accounts-and-users/user-profile-images-and-banners)にも記載がありますが、画像のURLから`_normal`を除いてあげればオッケーです。
では、Controllerの記述に追記していましょう〜

```php: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](https://developer.twitter.com/en/docs/tweets/data-dictionary/overview/user-object)
[Twitter 開発者 ドキュメント日本語訳](http://westplain.sakuraweb.com/translate/twitter/Documentation/REST-APIs/Public-API/GET-users-search.cgi)

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

# 開発環境
PHP 7.2
Laravel 6.0
Vue 2.5.17
# 参考リンク
[Laravel5.7でTwitterOAuthを使ってタイムライン取得（申請から説明）](https://qiita.com/namizatop/items/439c0604ca15c1ef00cd)
[2020年度版 Twitter API利用申請の例文からAPIキーの取得まで詳しく解説](https://www.itti.jp/web-direction/how-to-apply-for-twitter-api/)
[【Laravel】環境変数の使い方](http://tektektech.com/laravel-environment-variable/)
[Tweet objects](https://developer.twitter.com/en/docs/tweets/data-dictionary/overview/user-object)
[Twitter 開発者 ドキュメント日本語訳](http://westplain.sakuraweb.com/translate/twitter/Documentation/REST-APIs/Public-API/GET-users-search.cgi)
[TwitterDeveloperのドキュメント](https://developer.twitter.com/en/docs/accounts-and-users/follow-search-get-users/api-reference/get-users-search)
[TwitterAPIドキュメント](https://developer.twitter.com/en/docs/accounts-and-users/user-profile-images-and-banners)