15:29・2023/03/15
カテゴリー
PHP TwitterAPI vue.jsvue.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のレスポンスに返るよ
詳しい解説は参考元のサイトを見てね!!!!!!!!!!!!!!!!!!!!!!!!!!1
おしまい!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!