oEmbedとは
今回はoEmbedという仕組みを使ってサムネイルを取得していきます。
oEmbedは動画サイトやSNSのコンテンツ情報を取得する仕組みで、
サムネイルの他、タイトルなどの文字情報も取得できます。
oEmbedは統一規格のため、YouTubeやTwitterなど、oEmbedを使用しているサービスなら同じようにoEmbedで情報を取得できます。
コード
oEmbedの基本は、パラメータ付きのURLにアクセスし、JSONデータを取得するということです。
今回は、フォームに貼り付けられたURLからサムネイルを取得するサンプルを作ります。
次のコードは、HTMLです。
Vue.jsを使っているのは、入力が終わったタイミングで処理を実行したいためです。
処理はAjaxを使っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Screen-shot</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="input_url_wrap">
<input type="text" v-model="input_url" id="input_url">
</div>
<div id="result"></div>
<script>
$(function(){
var result = $('#result');
var input_url = new Vue({
el: '#input_url_wrap',
data: {
input_url: ''
},
watch: {
input_url: function(){
//入力したら実行
$.ajax({
url: 'getImage.php',
type: 'post',
dataType: 'json',
data: {input_url: $('#input_url').val()},
})
.done(function(data) {
console.log("success");
result.append('<img src="download/'+data+'">');
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
}
}
});
});
</script>
</body>
</html>
次のコードはフォームのデータを処理するPHPです。
getImage.phpという名前で保存すれば、上のフォームと繋がります。
<?php
$input_url = htmlspecialchars( $_POST['input_url'] );
$img = '';
//ランダムな保存名
$filename = sha1(uniqid(rand(), true)) . '.jpg';
//保存先ファイルパス
$file_path = './download/';
if( strpos($input_url, 'vimeo.com') !== false ){
//vimeoの動画ID取得
preg_match("/vimeo\.com\/(\w+)/", $input_url, $thumb_id);
//vimeoのサムネイルURL取得
$vimeo_json = "https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/" . $thumb_id[1];
$vimeo_json = file_get_contents($vimeo_json);
$vimeo_json = mb_convert_encoding($vimeo_json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$vimeo_data = json_decode($vimeo_json, true);
$img = $vimeo_data['thumbnail_url'];
}elseif( strpos($input_url, 'dailymotion.com') !== false ){
//dailymotionの動画ID取得
preg_match("/dailymotion\.com\/video\/(\w+)/", $input_url, $thumb_id);
//dailymotionのサムネイルURL取得
$dm_json = "https://api.dailymotion.com/video/" . $thumb_id[1] . "?fields=thumbnail_large_url";
$dm_json = file_get_contents($dm_json);
$dm_data = json_decode($dm_json, true);
$img = $dm_data['thumbnail_large_url'];
}
//URLからコンテンツを取得
$data = file_get_contents($img);
//保存
file_put_contents($file_path . $filename, $data);
echo json_encode($filename);
?>
最後に、downloadという名前で保存用ディレクトリも作っておきましょう。
フォームに動画URLをコピペしてみて、保存された画像が表示されれば成功です。
