-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgetSMDTweets.php
113 lines (105 loc) · 6.08 KB
/
getSMDTweets.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<?php
require('./vendor/autoload.php');
use Abraham\TwitterOAuth\TwitterOAuth;
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable(__DIR__);
$dotenv->load();
// APIの秘密鍵
$CK = $_ENV["CK"]; // twitterコンシューマーキー
$CKS = $_ENV["CKS"]; //twitterコンシューマーシークレット
$AT = $_ENV["AT"]; // twitterアクセストークン
$ATS = $_ENV["ATS"]; // twitterアクセストークンシークレット
$MAPCK = $_ENV["MAPCK"]; // Google Mapコンシューマーキー
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="./index.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/destyle.css"/> <!-- 標準のスタイルをリセット -->
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kosugi+Maru&display=swap" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?key=<?php print $MAPCK ?>&callback=initMap" async defer></script>
<title>AITMELTDOWNピンたて</title>
</head>
<body>
<header><h1 id="title">AITMELTDOWN</h1></header>
<?php
$connection = new TwitterOAuth($CK, $CKS, $AT, $ATS); //TwitterAPI接続のためのインスタンス生成
$result = $connection->get('search/tweets', array("q" => "(#AITMELTDOWN)", "count" => 150))->statuses; //#AITMELTDOWNタグのついたツイートを150件取得
$tweets = json_decode(json_encode($result), true); //tweetを一度jsonにする
$windowTextHTML = ''; //吹き出しに書くHTML用の変数
?>
<div id="map"></div> <!-- このタグの場所でマップが表示される -->
<script>
var latStr = []; //緯度情報を入れる配列
var lngStr = []; //経度情報を入れる配列
var infoWindow = []; //吹き出し情報を入れる配列
var windowText = []; //吹き出しに書くHTMLの情報を入れる配列
</script>
<?php
foreach ($tweets as $value) {
if($value['place'] != null){ //場所情報が書かれていればマップに表示
$windowTextHTML .= '<div style="display: flex;" id=userInfo>';
$windowTextHTML .= '<div id="icon"><a href="https://twitter.com/'.$value["user"]["screen_name"].'"><img src="'.$value["user"]["profile_image_url"].'"></a></div>';
$windowTextHTML .= '<div id="names">';
$windowTextHTML .= '<h2 id="name">'.$value["user"]["name"].'</h2>';
$windowTextHTML .= '<div id="screenName">@'.$value["user"]["screen_name"].'</div>';
$windowTextHTML .= '</div>';
$windowTextHTML .= '</div>';
$windowTextHTML .= '<div id="text">'.$value["text"].'</div><br>'; //ツイート本文を表示
?>
<script>
latStr.push(<?php print $value['place']['bounding_box']['coordinates']['0']['0']['1']?>); //ツイートした緯度を配列に追加
lngStr.push(<?php print $value['place']['bounding_box']['coordinates']['0']['0']['0']?>); //ツイートした経度を配列に追加
</script>
<?php
if(isset($value['entities']['media'])){ //画像が添付されていれば画像も表示
//print_r($value['entities']['media']); //json確認用
foreach($value['entities']['media'] as $media){ //複数画像がある場合もあるのでそれぞれforを回す
$windowTextHTML .= '<img style="width: 200px" src="'.$media["media_url"].'">'; //imgタグで画像を表示
}
}
$windowTextHTML .= '<br><u><a id="link" href="https://twitter.com/'.$value["user"]["screen_name"].'/status/'.$value["id"].'" target="_blank" rel="noopener noreferrer">https://twitter.com/'.$value["user"]["screen_name"].'/status/'.$value["id"].'</a></u>';
}
?>
<script>
windowText.push(<?php print json_encode($windowTextHTML); ?>); //吹き出しに表示するHTMLをまとめて配列に追加
</script>
<?php
$windowTextHTML = ''; //吹き出しの内容をリセットして次のツイートに回す
}
?>
<div id="description">
<p>AITMELTDOWNは#AITMELTDOWNというハッシュタグと位置情報がついたツイートを自動で取得して位置をマップ上に表示するアプリケーションです。</p><br>
<h2 id="sub"> 使い方 </h2>
<ol>
<li><u><a href="https://twitter.com">Twitter</a></u>にて#AITMELTDOWNと位置情報をつけて投稿</li>
<li>このページでピンが立てられていることを確認（ピンをクリックでツイート情報を確認することもできます）</li>
</ol>
<br>
<h2 id="sub">使用API</h2>
<ul>
<li><u><a href="https://developer.twitter.com/en">Twitter Developer Platform</a></u></li>
<li><u><a href="https://developers.google.com/maps?hl=ja">Google Maps Platform</a></u></li>
</ul>
</div>
<footer>
<ul id="footer-nav">
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://github.com/usabilityTeam9/SMDGetTweet"><i class="fab fa-github"></i></a></li>
</ul>
<p><small>© 2022 Usability Team9</small></p>
</footer>
</body>
</html>