jQueryを使ってドラッグ&ドロップでオブジェクトの並び順を操作する
CMS操作時、登録したオブジェクトを並び替える際に順序を打ち込むのでも良いのですがドラッ…
YouTubeに掲載している動画の特定再生リストをサイト内に一覧表示したいという要望がありましたので実装した方法をメモ
var apikey = '○○○○'; //google apiキー
var results = [];
// URLを生成する関数
function generate_api_url(listid) {
var url = 'https://www.googleapis.com/youtube/v3/playlistItems';
url += '?part=snippet';
url += '&playlistId=' + listid;
url += '&key=' + apikey;
return url;
}
// データを取得する関数
function get_api_data(listid) {
var getData = $.ajax({
url: generate_api_url(listid),
dataType: 'json'
});
getData.then(
function(data) {
for (var i = 0; i < data.items.length; i++) {
if(data.items[i].snippet.title!='Private video' && data.items[i].snippet.title != 'Deleted video'){
results.push({
"title": data.items[i].snippet.title,
"id": data.items[i].snippet.resourceId.videoId
});
}
}
for (var i=0; i < results.length; i++){
$('.movielist__mv__list').append('<li class=""><div class="movielist__mv__list__image"><a href="'+results[i]['id']+'"><img src="https://img.youtube.com/vi/'+results[i]['id']+'/0.jpg" alt="'+results[i]['title']+'" /></a></div><h3><a href="'+results[i]['id']+'">'+results[i]['title']+'</a></h3></li>');
}
},
function(error) {
console.log(error);
}
);
}
$(function (){
get_api_data('○○○○'); //再生リストID
});
<ul class="movielist__mv__list">
</ul>
google APIキーは「Google Cloud Platform」よりプロジェクトを作成して取得、更にAPIライブラリの中から「YouTube Data API v3」を選択。
他サイトで利用できないよう認証情報ページで使用サイトと使用APIを制限します。
CMS操作時、登録したオブジェクトを並び替える際に順序を打ち込むのでも良いのですがドラッ…
ホームページ内に動画を設置する際にYouTubeを利用する場合は多い。YouTubeの埋…
CTAボタンの実装時にいつでも目につくよう配置しておきたいと希望されることがあります。ボ…