vue.jsからYoutube Data APIとTwitter APIを呼び出すよ～

00:24・2022/01/18　公開

00:24・2022/01/18　更新

TwitterAPIはCORSの関係でサーバーサイドからしか呼び出せないよ～～～?

APIで何をするか

ユーザーの入力したキーワード or URLを用いて、youtube/twitter上のユーザーを検索するよ。

用意するもの

  • vue.jsのプロジェクト
    – axiosをnpmインストールしてね
  • MAMP or XAMPP
    – リクエスト用のPHPファイルはここ(htdocs内)に作るよ
    – 今回は[htdocs > APIs > ファイル名.php]としているよ
  • TwitterAPIのトークンとか
  • YoutubeAPIのトークンとか

MAMPのサーバーとNodeJSのサーバーを両方使うよ。

いざ、実装

Youtubeのキーワード検索

ポイント
– axiosでgetリクエストをするよ

// youtube - keyword
        let apikey = `&key=[YOUR_API_KEY]`;
        let q = `&q=${value}`;//inputされたキーワード
        let G_option = `https://www.googleapis.com/youtube/v3/search?part=id,snippet&type=channel&maxResults=3${q}${apikey}`;
        //[参考]https://developers.google.com/youtube/v3/docs/search/list?hl=ja
        let dy = "";
        let pr = new Promise((resolve) => {
          axios.get(G_option).then(function (response) {//axiosでgetリクエスト
            let items = response.data.items;
            let obj = [];
            items.forEach((item) => {//返ってきた配列を回して配列を作る
              obj.push({
                id: item.snippet.channelId,
                name: item.snippet.channelTitle,
                icon: item.snippet.thumbnails.default.url,
                desc: item.snippet.description,
              });
            });
            dy = obj;
            resolve();
          });
        });
        pr.then(() => {//promiseでデータが確実に取得できたらvueのdataに代入する
          this.result.youtube = dy;
        });

Twitterのキーワード検索

ポイント
– axiosでPHPにpostリクエストをするよ
– axiosから受け取ったデータをもとにPHPからTwitterにリクエストを送るよ
– NodeJSとMAMP/XAMPPではホスト名が違うので、ローカル環境だとCORSに引っかかるよ(pathを指定して対策するよ)
– 1.0のAPIの返却データはめちゃんこ長いうえに、data内には表示されないものもあるよ。
欲しいデータのkeyはここで確認しよう→「https://developer.twitter.com/en/docs/twitter-api/v1/data-dictionary/object-model/user」

Vue.js側のコード

        let local_t_token = [Access token];
        let local_t_secret = [Access token secret];

        let params = new URLSearchParams();
        params.append("token", local_t_token);
        params.append("secret", local_t_secret);
        params.append("value", value);//inputされたキーワード
        let path =
          "http://localhost/APIs/twitter.php";//MAMP/XAMPPのパス(windows)
          //"http://localhost:8888/APIs/twitter.php";//(mac)

        const headers = {
          accept: "application/json",
          "Content-Type": "application/x-www-form-urlencoded",
        };
        //[参考]https://techyankee.net/?p=119
        //[参考]https://qiita.com/yusuke_prg/items/f166ab4b0aafd7053fb6

        let dt = "";
        let promise = new Promise((resolve) => {
          axios
            .post(path, params, { headers: headers })//PHPにpostリクエスト
            .then(function (response) {
              dt = response.data;
              resolve();
            })
            .catch((error) => {
              console.log(error);
            });
        });
        promise.then(() => {//データが確実に返ってきたらvueのdataに代入
          this.result.twitter = dt;
        });

PHP側のコード(MAMP or XAMPPのルートディレクトリ(htdocs)に配置)

<?php

header("Access-Control-Allow-Origin: http://localhost:8080");//NodeJSのホスト名
header("Access-Control-Allow-Headers: X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH, HEAD");
header('Content-Type: application/json; charset=utf-8');
if( $_SERVER['REQUEST_METHOD'] === "OPTIONS" ){
  exit;
}
//[参考]https://qiita.com/hamamamama/items/8b3880514121f7c29aad

if ($_SERVER['REQUEST_METHOD'] === 'POST' && empty($_POST)) {
  $_POST = json_decode(file_get_contents('php://input'), true);
  //[参考]https://qiita.com/hidepy/items/42220523cb2b3eb2c451
}

$value = htmlspecialchars($_POST["value"]);//postの中身を代入
$user_token = htmlspecialchars($_POST["token"]);
$user_secret = htmlspecialchars($_POST["secret"]);


//以下長いので省略
/**************************************************

	[GET search/tweets]のお試しプログラム

	認証方式: アクセストークン (OAuth1.0)

	配布: SYNCER
	公式ドキュメント: https://dev.twitter.com/rest/reference/get/search/tweets
	日本語解説ページ: https://syncer.jp/Web/API/Twitter/REST_API/GET/search/tweets/

  //エンドポイントとパラメータの設定
  $request_url = 'https://api.twitter.com/1.1/users/search.json' ;		// エンドポイント
	// パラメータA (オプション)
    $params_a = array(
      "q" => $value,
      "result_type" => "popular",
      "count" => "3",
    ) ;

**************************************************/
//上記サイトのコードをコピペして認証を通しました（SYNCERさんありがとう！）


// JSONをオブジェクトに変換
	$obj = json_decode( $json ) ;

  $result;
  foreach ($obj as $value) {//配列を回して必要な部分だけ取り出す
    $array['id'] = $value -> id;
    $array['name'] = $value -> name;
    $array['screen_name'] = $value -> screen_name;
    $array['followers'] = $value -> followers_count;
    $array['friends'] = $value -> friends_count;
    $array['icon'] = $value -> profile_image_url_https;
    $array['icon_image'] = $value -> default_profile_image;

    $result[] = $array;
  }

var_dump($result);//表示内容がaxiosのレスポンスに返るよ

YoutubeのURL検索

ポイント
– カスタムURLはやっかいだね！PHPでリンク先ページのOGPタグから通常のURLを取ってきてvueに返却するよ！

Vue.js側のコード

          let u_params = new URLSearchParams();
          u_params.append("value", value);//inputされたURL
          let path =
            "http://localhost/APIs/youtube.php";//MAMP/XAMPPのパス(windows)
            //"http://localhost:8888/APIs/youtube.php";//(mac)
          const headers = {
            accept: "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
          };

          let pu = new Promise((resolve) => {
            axios
              .post(path, u_params, { headers: headers })
              .then((response) => {//カスタムURLを元のURLに戻したものが返ってきます
                resolve(response.data.split('"').join(""));//両端の「"」を削除
　　　　　　　　　// [参考]https://zukucode.com/2017/04/javascript-string-remove.html
              });
          });
          pu.then((url) => {
            let split = url.split("/")[4].trim();//channelIdを取り出す
            let apikey = `&key=[YOUR_API_KEY]`;
            let id = `&id=${split}`;
            let G_option = `https://www.googleapis.com/youtube/v3/channels?part=id,snippet&maxResults=3${id}${apikey}`;
            //[参考]https://developers.google.com/youtube/v3/docs/channels/list?hl=ja
            let dy = "";
            let pr = new Promise((resolve) => {
              axios.get(G_option).then(function (response) {
                let items = response.data.items[0];
                let obj = {
                  id: url,
                  name: items.snippet.title,
                  icon: items.snippet.thumbnails.default.url,
                  desc: items.snippet.description,
                };
                dy = obj;
                resolve();
              });
            });
            pr.then(() => {
              this.result.youtube = dy;
            });
          });

PHP側のコード(MAMP or XAMPPのルートディレクトリ(htdocs)に配置)

<?php

header("Access-Control-Allow-Origin: http://localhost:8080");//NodeJSのホスト名
header("Access-Control-Allow-Headers: X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH, HEAD");
header('Content-Type: application/json; charset=utf-8');
if( $_SERVER['REQUEST_METHOD'] === "OPTIONS" ){
  exit;
}
//[参考]https://qiita.com/hamamamama/items/8b3880514121f7c29aad

if ($_SERVER['REQUEST_METHOD'] === 'POST' && empty($_POST)) {
  $_POST = json_decode(file_get_contents('php://input'), true);
  //[参考]https://qiita.com/hidepy/items/42220523cb2b3eb2c451
}

$target_url = htmlspecialchars($_POST["value"]);
$youtube_cannel_res = file_get_contents($target_url);
preg_match_all( "<meta property=\"og:url\" content=\"([^\"]+)\">", $youtube_cannel_res, $ogp );
//[参考]https://blog.z0i.net/2016/11/php-get-ogp.html
//参考元コードだとVSCodeで「"」の囲みがおかしくなっちゃうので「\"」としてエスケープしています


var_dump($ogp[1][0]);

TwitterのURL検索

ポイント
– キーワード検索と違って返ってきたデータにforEachをすると怒られるよ！

Vue.js側のコード

        let local_t_token = [Access token];
        let local_t_secret = [Access token secret];

        let split = value.split("/")[3].trim();//inputされたURLからscreen_nameを取り出すよ

        let params = new URLSearchParams();
        params.append("token", local_t_token);
        params.append("secret", local_t_secret);
        params.append("url", split);
        let path =
          "http://localhost/APIs/twitter.php";//MAMP/XAMPPのパス(windows)
          //"http://localhost:8888/APIs/twitter.php";//(mac)

        const headers = {
          accept: "application/json",
          "Content-Type": "application/x-www-form-urlencoded",
        };
        //[参考]https://techyankee.net/?p=119
        //[参考]https://qiita.com/yusuke_prg/items/f166ab4b0aafd7053fb6

        let dt = "";
        let promise = new Promise((resolve) => {
          axios
            .post(path, params, { headers: headers })//PHPにpostリクエスト
            .then(function (response) {
              dt = response.data;
              resolve();
            })
            .catch((error) => {
              console.log(error);
            });
        });
        promise.then(() => {//データが確実に返ってきたらvueのdataに代入
          this.result.twitter = dt;
        });

PHP側のコード(MAMP or XAMPPのルートディレクトリ(htdocs)に配置)

<?php

header("Access-Control-Allow-Origin: http://localhost:8080");//NodeJSのホスト名
header("Access-Control-Allow-Headers: X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH, HEAD");
header('Content-Type: application/json; charset=utf-8');
if( $_SERVER['REQUEST_METHOD'] === "OPTIONS" ){
  exit;
}
//[参考]https://qiita.com/hamamamama/items/8b3880514121f7c29aad

if ($_SERVER['REQUEST_METHOD'] === 'POST' && empty($_POST)) {
  $_POST = json_decode(file_get_contents('php://input'), true);
  //[参考]https://qiita.com/hidepy/items/42220523cb2b3eb2c451
}

$value = htmlspecialchars($_POST["url"]);//postの中身を代入
$user_token = htmlspecialchars($_POST["token"]);
$user_secret = htmlspecialchars($_POST["secret"]);


//以下長いので省略
/**************************************************

	[GET search/tweets]のお試しプログラム

	認証方式: アクセストークン (OAuth1.0)

	配布: SYNCER
	公式ドキュメント: https://dev.twitter.com/rest/reference/get/search/tweets
	日本語解説ページ: https://syncer.jp/Web/API/Twitter/REST_API/GET/search/tweets/

　//エンドポイントとパラメータの設定
　$request_url = 'https://api.twitter.com/1.1/users/show.json';
	// パラメータA (オプション)
    $params_a = array(
      "screen_name" => $url,
    ) ;

**************************************************/
//上記サイトのコードをコピペして認証を通しました（SYNCERさんありがとう！）

// JSONをオブジェクトに変換
	$obj = json_decode( $json ) ;

//必要なデータだけ取り出す
    $array['id'] = $value -> id;
    $array['name'] = $value -> name;
    $array['screen_name'] = $value -> screen_name;
    $array['followers'] = $value -> followers_count;
    $array['friends'] = $value -> friends_count;
    $array['icon'] = $value -> profile_image_url_https;
    $array['icon_image'] = $value -> default_profile_image;

    $result[] = $array;

var_dump($result);//表示内容がaxiosのレスポンスに返るよ

詳しい解説は参考元のサイトを見てね！！！！！！！！！！！！！！！！！！！！！！！！！！１
おしまい！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！