Home > Archives > 2012-01 Archive

2012-01 Archive

【第5回】iframe同士の連携と新たな問題点、あとタイトル改名【javascriptだけで作るニコ風動画サイト】

前回はiframeを2つ用意してました。動画プレーヤー用と@anywhere用。
@anywhere用のiframeをjQuery UIで自由にドラッグできたらいいなーと思っていたんですが、iframe上だとイベントがうまくいかないようだったので?諦めました。

そして今回は動画プレーヤーifrmaeの中に@anywhereのiframeを入れています。
そして@anywhere用の中に動画プレーヤーの再生・停止ボタンなどのコントロールパネルを設置しました。
この二つのiframeは別ページなのですが、同一ドメインなのでiframe越しでもjavascriptでアクセスできるというわけです。

新たな問題点とは、youtubeのサイトから動画プレーヤーiframeに値(動画URL)を渡す時に、ハッシュクエリー(location.hash)を使っているんですが、これをするとURLが長すぎてうまく動作しないような気がします。現状IEで作動しないのはこれのせいだと思います。
あとhashの値がブラウザによって変わるみたいですね。URIencode関係で。
次回はこのあたりをちょっと変えようと思います。

で、どう変えるかと言うとwindow.postMessageを試してみようと思います。
postMessageは新しい仕様なので躊躇していたんですが、IE8からいけるみたいですね。ならなんとかいけそう。
次回の課題はpostMessageを使って、IE・FireFox・Chromeで動作確認する事です。

ブックマークレットのソース

javascript:(function (){

var s=document.createElement("script");
s.charset="UTF-8";
s.src="http://hk-factory.sakura.ne.jp/testApi/minmiru/05/set_youtube.js";
document.body.appendChild(s);

})()

youtubeで動画を見ながら起動してください。FireFoxのみ。

第5回のブックマークレット

chromeでyoutubeを見たときjavascript:console.log(window);が空になる問題

youtubeの動画URLを抽出するブックマークレットを作っているときになりました・・・。
これでいったい何時間費やしただろう・・・疲れた・・・。

【現象】

  1. google chrome でyoutubeの動画ページを開く(http://www.youtube.com/watch?v=**********)
  2. 動画抽出系のブックマークレットを起動する(何種類か試したけど全部だめ)
  3. なぜか正常に動作しない

【ここから試行錯誤】

まずはブックマークレット事態がおかしいと思いいろいろ調べる、というか製作者のサイトではchromeの動作確認が取れてることを確認。
ブックマークレットの中身のjavascriptを調べる。
どうやらwindowオブジェクトにアクセスしても中身が空っぽの模様。

 

謎1:

youtubeを開いてchromeのデベロッパーツールでconsole.dir(window);だと正常に取得できる。
けど、javascript:console.dir(window);にしてみるとwindowが空になる。

<html>
<head>
</head>
<body>
</body>
</html>

(もう直ったから試せないけど、構造はこんな感じだったと思う)

謎2:

というか謎1の時、デベロッパーツールを起動してブックマークレットを起動すると、デベロッパーツールが一度終了する・・・。
空の構造に書き換わってるからかな?でもブラウザ上では画面遷移はなし・・・。

謎3:

動画ページじゃなくyoutubeのトップページ(http://www.youtube.com/)でもダメだった。
自分のブログやyahooのトップページだと、正常にwindowが取れた・・・。

【解決方法】

chromeをアンインストールして再インストールすると問題が直ったという情報を発見。
アンインストール後に再インストールするも「chrome.exeを探しています・・・」というダイアログが表示される。
いろいろ調べるも、Cドライブにインストールされていない模様。
ファイル・フォルダ検索で「chrome」を探すも出てこない。(余計なのは出た)

ここらでヤケクソand諦めムード

もう一度アンインストール→再起動→CCleanerというソフトでレジストリ他いろいろお掃除→再起動→https://support.google.com/chrome/bin/answer.py?hl=ja&answer=126299から代替オフライン版のインストーラーを取ってきて実行。

できたあああああああああああああああああああああああああ

 

レジストリの掃除が効いたのか代替オフライン版が効いたのかよく分かりません。

【第4回】youtubeプレーヤーをhtml5用に変えてtwitter表示【HTML5で作る動画コミュニティサイト】

前回は

youtubeを見る

ブックマークレット押す

動画URLを保持して動画コミュニティサイトに移動

だと、すごい面倒というのが課題だった。

そこで以前から考えていたflashプレーヤー上でコメントを流せないかな~をもう一度考え直してみた。
これができれば次のメリットがある

  1. youtubeやその他動画サイト上がすぐにコミュニティサイトになる
  2. 1の理由から自分のサイトを持つ必要がなくなるので、管理その他もろもろが楽。
  3. ブクマで動画URLを抽出すれば、有効期限(トークン)有の生動画URLが取得できる。サーバーサイドスクリプティングでスクレイピング&ログイン処理とかいらない。
  4. ブクマを利用するのでユーザーが普段から使い慣れている動画サイト上でコミュニティが取れるようになる。すぐにコミュニティが取れる。

とりあえず思いついたのでこの四つ。
1,2,3は製作者(私)にとってのメリット。ブクマを置いたり使い方とかでレンタルサーバーと独自ドメインをとるつもりだけど、サーバー側をそんなに気にしなくて済む。
あと金銭的に。
規模が大きくなるとサイト内でアクセスを分散させたり、SQLチューニングとかキャッシュ使えるところは使ったりとか面倒。
あと金銭的に。
クライアント側だけの処理に専念できるっていいね。
あと金銭的に。

4はやっぱ使い慣れた動画サイトっていうのがいいね。youtubeやニコニコのほかにひまわりとかの動画寄生サイトとかいろいろあるけど、公開されている動画の内容にもよるけど使い慣れたところってやっぱいいよね。それだけで再アクセスしちゃう。

 

じゃ次はデメリットとか問題点。

  1. そもそもflashプレーヤー上にコメント流せる?コメント再生位置と動画再生位置の同期が取れる?
  2. youtubeもニコニコもそれ自体がコミュニティサイトなのに、さらにコメントできるようにするの?

ずっと考えていて答えが出なかったのが1の問題。
flashの上にdivを重ねてwmodeとかcssのpositionとか駆使して考えてみたけど、それをするとflashのパフォーマンスが落ちるみたい。
最近調べなおしたらflashのバージョンがあがって改善されたとかどうとか。
同期の問題もどうするかなーと唸ってた。
ただ、1の問題はHTML5に触れて光が見えてきた。
そして2の問題は、コメントにtwitterを利用する事で逆によい方向への広がりを見せそうな気がする。

 

と、ここ数日あーでもないこーでもないとうんうん唸って、次のようなものができた。

youtubeを見る

ブックマークレットを押す

flashプレーヤーがhtml5のvideoに書き換わる

twitterでコメントを入力できる

javascript:(function (){

var s=document.createElement("script");
s.charset="UTF-8";
s.src="http://hk-factory.sakura.ne.jp/testApi/minmiru/04/set_youtube.js";
document.body.appendChild(s);

})()

上のjavascriptをブックマークに登録して、youtubeで動画を見ながらクリックで切り替わります。
ページ一番下あたりにtwitterの投稿フォームがあると思います。
とりあえずこんな感じ。ここまでサーバーサイドスクリプティングはなし。
スクリプトの内容としては・・・
ブクマでjsを読み込み

jqueryでflashプレーヤーをhtml5のiframeに書き換え

@anywhereを搭載したiframeを貼り付け

 

なんだこの長ったらしいタイトルは・・・タイトルは空白でここまで文章書いてから考えました。

【第3回】youtubeのURLをブクマで取得→videoに設定【HTML5で作る動画コミュニティサイト】

前回のエントリーをあとで見直すと動画がみれない事に気がついた。

youtubeをみてソースを表示して動画URLを直張りしていたけど、一定時間が経つと見れなくなるらしい。
そこで次のように考えた。

  1. http://www.youtube.com/watch?v=00000のようなURLから動画URLを抜き出すPHP作る
  2. そのPHPと動画プレーヤーのHTMLをajaxを使って画面遷移なしにやりとり
  3. ヨカッタドウガミレタヨー

ローカルでやるとうまくいった。けどネットにあげるとできなかった。
なんかローカル環境で取得したyoutubeの動画URLと、ネット環境で取得したyoutubeの動画URLが違う。
youtubeのセキュリティだとは思うけど、ググっても具体的な仕組みが分からなかった。
サブアドレスにプロバイダーっぽい文字があったから、IPで動的にURLを生成しているのかな?(KDDIがあった)
リファラーやユーザーエージェントは偽装できるけど、IPアドレスは難しいとか聞いたことがあったようなないような・・・。

 

いろいろかんがえたけど、自分のサイトで不特定多数の人にyoutubeの動画を見れるようにするには、その人がyoutubeにアクセスするしか方法がないと結論。
外部プレーヤーやapiを使うのはなしの話で。
そういや動画寄生サイトもyoutubeは外部プレーヤーを使っていたな~とここでふと思い出す。

 

んでもって、調べているうちにブックマークレットで見ているyoutubeの動画URLを抜き出す、というのを発見したのを思い出す。

  1. youtubeを見る
  2. ブクマでURLを取得して自分のサイトに移動する
  3. getクエリの文字列から動画URLを取得してvideoタグに設定

これなら大丈夫そう。ちょっとめんどいけど。

できたのが次のjavascript

javascript:(
function(){
var ids=[
'watch-headline',
'playnav-panel-info',
'ud',
'vt',
'watch-actions',
'watch-info',
'watch-panel',
'masthead'
],
no_flv=true,
f={},
e,f,g,i,j,s,t,
ti='video',
x,map,
r='';
for(i in ids)
if(e=document.getElementById(ids[i]) )
break;
if(!e)
return;
try{
if(yt&&yt.getConfig)
map=yt.getConfig('PLAYER_CONFIG').args.url_encoded_fmt_stream_map;
}
catch(t){}
if(!map){
x=document.getElementsByTagName('body')[0].innerHTML;
if(x.match(/&(amp;|)url_encoded_fmt_stream_map=([^&">]+)/)){
map=decodeURIComponent(RegExp.$2);
}
else if(x.match(/[\'\"]PLAYER_CONFIG[\'\"]\s*:\s*({.*})/)){
map=eval('('+RegExp.$1+')').args.url_encoded_fmt_stream_map;
}
}
if(!map)
return;
map=map.split(',');

for(i in map){
x=map[i].split('&');
f={};
for(j in x){
g=x[j].split('=');
f[g[0]]=g[1];
}
if(f['type']&&f['type'].match(/video\/([a-zA-Z0-9_\-]+)/))
t=RegExp.$1;
if(no_flv&&t=='x-flv')
continue;
r += '&u=' + f['url'];
}
r = 'http://www.hk-factory.net/wp-content/uploads/2012/01/sample_03_018.html?' + r.substr(1);
window.open(r, null);
})()

この手間をメリットに変えれればいいけどな~と
まだぼや~っとしたものしか見えないけど。

先は長いな~

 

上のブックマークレットは次のURLを参考にしました
うえぽんSW局

Home > Archives > 2012-01 Archive

twitter
リンク

Return to page top