スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
動画投稿の仕組みを少し
今回は、なるべくJavascriptのみで完結したかったのでYQLを使ってます。
http://www.yahooapis.com/yql/
ヤフーの提供してるAPIです。
理由は単純に、エロぺん動画を「見る」だけの人が多いだろうから、サイト側に負荷をかけるほどの機能なのか悩んでいるからです。そのため、YQL側が落ちてると全然使いものにならないというダメ仕様です。
この機能自体、需要がありそうなら変更します。やっぱり、並べてみたりWiiUで見たりするのに、エロぺん動画にある動画だけじゃなく、他サイトで見つけた自分の好きな動画のほうがいいし！
ただ、まだエラー処理とかしっかり作っていないため、既にエロぺん動画に含まれている動画があった場合、追加されません。
http://www.yahooapis.com/yql/
ヤフーの提供してるAPIです。
理由は単純に、エロぺん動画を「見る」だけの人が多いだろうから、サイト側に負荷をかけるほどの機能なのか悩んでいるからです。そのため、YQL側が落ちてると全然使いものにならないというダメ仕様です。
この機能自体、需要がありそうなら変更します。やっぱり、並べてみたりWiiUで見たりするのに、エロぺん動画にある動画だけじゃなく、他サイトで見つけた自分の好きな動画のほうがいいし！
ただ、まだエラー処理とかしっかり作っていないため、既にエロぺん動画に含まれている動画があった場合、追加されません。
もっと見るボタンの実装２
前回のソース解説です。
といっても、それほど新しいことはないので、新しく登場した関数の解説を。
$("#list").append(data);
append(HTML文字列) という感じで、指定DOMにHTMLを追加します。後ろに追加されます。
<div id="list">aaa</div>
というHTMLがあったとして、
$("#list").append("<b>bbb</b>");
を実行すると、
<div id="list">aaa<b>bbb</b></div>
になります。
HTMLを書き換えるのは、他にいくつかありますので、簡単にまとめます。
といっても、それほど新しいことはないので、新しく登場した関数の解説を。
$("#list").append(data);
append(HTML文字列) という感じで、指定DOMにHTMLを追加します。後ろに追加されます。
<div id="list">aaa</div>
というHTMLがあったとして、
$("#list").append("<b>bbb</b>");
を実行すると、
<div id="list">aaa<b>bbb</b></div>
になります。
HTMLを書き換えるのは、他にいくつかありますので、簡単にまとめます。
画面遷移しないもっと見るボタンの実装
list.phpにもっと見るボタンを追加してみましょう。
list.phpをちょっと修正し、もっと見るを押した際にデータを取得するgetlist.phpを新規作成します。
仕組みは前回とほとんど同じで、ボタンを押した際にAjaxを使い裏でPHPを呼び出し、xvideosの次のページを取得、手に入れたHTMLからサムネイルと動画URLを抜き出してlist.phpと同じような形でHTMLを返します。javascriptで返ってきたHTMLを下に追加していきます。
xvideosの仕様的に新着は10ページだけなので、それに合わせて10ページ分表示したらボタンを押せないよう、非表示にします。
ソースは続きから。
list.phpをちょっと修正し、もっと見るを押した際にデータを取得するgetlist.phpを新規作成します。
仕組みは前回とほとんど同じで、ボタンを押した際にAjaxを使い裏でPHPを呼び出し、xvideosの次のページを取得、手に入れたHTMLからサムネイルと動画URLを抜き出してlist.phpと同じような形でHTMLを返します。javascriptで返ってきたHTMLを下に追加していきます。
xvideosの仕様的に新着は10ページだけなので、それに合わせて10ページ分表示したらボタンを押せないよう、非表示にします。
ソースは続きから。
bootstrapのJavascriptを使ってみる
前回のview.phpを、bootstrapで少しかっこよくしましょう。
といっても、「お気に入りに追加」ボタンの見た目を変える程度です。通信中は押せないようにして、さらにボタンのテキストも変更します。
では、ソースから。
view.php
ちょこちょこと変わってますね。
といっても、「お気に入りに追加」ボタンの見た目を変える程度です。通信中は押せないようにして、さらにボタンのテキストも変更します。
では、ソースから。
view.php
<?php
$body = "<iframe src='http://flashservice.xvideos.com/embedframe/" . $_GET['video'] . "'";
$body .= " frameborder=0 width='600' height='480' scrolling=no></iframe>";
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<title>動画内容</title>
</head>
<body>
<?php
echo $body;
?>
<br/>
<input type="button" id="addDB" value="お気に入りに追加" class="btn btn-primary" data-loading-text="登録中..." data-comp-text="登録完了"/>
<div id="res">結果がここに表示されます。</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#addDB").click(function () {
$(this).button('loading');
$.ajax({
url: 'db_add.php',
type: 'GET',
data: {
vurl:"<?= $_GET['video'] ?>",
thum:"<?= $_GET['thum'] ?>"
},
dataType: 'html'
})
.done(function(data) {
$("#res").html(data);
$("#addDB").button('comp');
})
.fail(function(data) {
$("#res").html(data.responseText);
$("#addDB").button('reset');
});
return false;
});
});
</script>
</body>
</html>
ちょこちょこと変わってますね。
jQueryのajaxを使ってみる
さっそく、試しに使ってみようと思います。
view.phpのお気に入りに追加ボタンがわかりやすいので、ajaxにして画面遷移無しにしてみましょう。さっそくソースから。
view.php
ざっくりと説明します。
view.phpのお気に入りに追加ボタンがわかりやすいので、ajaxにして画面遷移無しにしてみましょう。さっそくソースから。
view.php
<?php
$body = "<iframe src='http://flashservice.xvideos.com/embedframe/" . $_GET['video'] . "'";
$body .= " frameborder=0 width='600' height='480' scrolling=no></iframe>";
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>動画内容</title>
</head>
<body>
<?php
echo $body;
?>
<br/>
<input type="button" id="addDB" value="お気に入りに追加" />
<div id="res">結果がここに表示されます。</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#addDB").click(function () {
$.ajax({
url: 'db_add.php',
type: 'GET',
data: {
vurl:"<?= $_GET['video'] ?>",
thum:"<?= $_GET['thum'] ?>"
},
dataType: 'html'
})
.done(function(data) {
$("#res").html(data);
});
return false;
});
});
</script>
</body>
</html>
ざっくりと説明します。
