スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

動画投稿の仕組みを少し

今回は、なるべくJavascriptのみで完結したかったのでYQLを使ってます。

http://www.yahooapis.com/yql/
ヤフーの提供してるAPIです。

理由は単純に、エロぺん動画を「見る」だけの人が多いだろうから、サイト側に負荷をかけるほどの機能なのか悩んでいるからです。そのため、YQL側が落ちてると全然使いものにならないというダメ仕様です。

この機能自体、需要がありそうなら変更します。やっぱり、並べてみたりWiiUで見たりするのに、エロぺん動画にある動画だけじゃなく、他サイトで見つけた自分の好きな動画のほうがいいし!

ただ、まだエラー処理とかしっかり作っていないため、既にエロぺん動画に含まれている動画があった場合、追加されません。

続きを読む»

もっと見るボタンの実装2

前回のソース解説です。

といっても、それほど新しいことはないので、新しく登場した関数の解説を。

$("#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ページ分表示したらボタンを押せないよう、非表示にします。

ソースは続きから。

続きを読む»

bootstrapのJavascriptを使ってみる

前回のview.phpを、bootstrapで少しかっこよくしましょう。

といっても、「お気に入りに追加」ボタンの見た目を変える程度です。通信中は押せないようにして、さらにボタンのテキストも変更します。

では、ソースから。

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

<?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>

ざっくりと説明します。

続きを読む»

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。