picotube で遊んでます

社内で LT する権利を貰えたので、picotube をツマミにお話した時の資料です。
(発表時間が5分なので、中身少な目)

よく出来たサービスは覗いていて楽しいです。

picotube って何？

今、どんな感じなの？

  • 招待制のベータ版なので、人がそんな多くない感じ。
    • 僕の音楽の趣味が特殊な上に、帰宅した後の深夜しかログインしてないからかも
  • FireFox で見ているとそのうち固まるし、たまに再生が止まるけど、そんなに問題なく使えてる感じ。

さて、本題。

このサービス自体面白いですけど、我々はエンジニアなのでその観点でも楽しめるかが重要です。

 AWS, EC2, S3, Google App Engine,
 Channel API, YouTube API, GDataAPI,
 Facebook Graph API, Chat API,
 Python, pytest, WebTest, MinMock,
 pyquery, jQuery, backbone.js
 underscore.js, node.js, CoffeeScript,
 vows, closure tools, compass, Sass,
 CSS3, XMPP, Github, Jenkins ...

やべぇ。そそられる単語があり過ぎ。。。

まずは FireBugs で

とりあえず、FireBugs で通信の内訳を見ますよね？


telnet 80

で、telnet 80 で HTTP 見ますよね？

% telnet picotube.tv 80
Trying 216.239.32.21...
Connected to picotube.tv.
Escape character is '^]'.
GET / HTTP/1.0

HTTP/1.0 302 Moved Temporarily
Location: http://feedburner.google.com/fb/a/home
Content-Type: text/html; charset=UTF-8
Date: Thu, 23 Feb 2012 17:54:15 GMT
Expires: Thu, 23 Feb 2012 17:54:15 GMT
Cache-Control: private, max-age=0
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Server: GSE
  • わざと間違ってみると、フロントエンドが見えたりします。
% telnet picotube.tv 80
Trying 216.239.34.21...
Connected to picotube.tv.
Escape character is '^]'.
GET / HTTP/9.0

HTTP/1.0 400 Bad Request
Content-Type: text/html; charset=UTF-8
Content-Length: 925
Date: Thu, 23 Feb 2012 17:53:25 GMT
Server: GFE/2.0

バックエンドがサチったりすると 503 とか 504 でリバースプロキシのサービスが見えますが、あえて間違える事で普段でも覗ける小技。

S3

画像を見てみる。


% dig s3.picotube.tv

; <<>> DiG 9.6-ESV-R4 <<>> s3.picotube.tv
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 39751
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 6, ADDITIONAL: 6

;; QUESTION SECTION:
;s3.picotube.tv.                        IN      A

;; ANSWER SECTION:
s3.picotube.tv.         110     IN      CNAME   picotube-us-west.s3-us-west-1.amazonaws.com.

なるほど。amazon の CDN ですね。

# むむ。 US West リージョン。Tokyo 使わないかな。

% traceroute s3.picotube.tv
traceroute to s3.picotube.tv (204.246.160.137), 30 hops max, 40 byte packets
 1  ＜自宅ネットなので略＞
 2  ＜自宅近くなので略＞
 3  KANAGAWA10-NTTeast1.flets.2iij.net (203.180.58.2)  27.554 ms  27.550 ms  27.546 ms
 4  tky008lip21.IIJ.Net (210.148.39.69)  28.928 ms  28.925 ms  28.921 ms
 5  tky008bb10.IIJ.Net (58.138.105.9)  30.281 ms  30.277 ms  30.828 ms
 6  tky001bf01.IIJ.Net (58.138.80.53)  30.262 ms tky001bf00.IIJ.Net (58.138.80.49)  8.776 ms  14.790 ms
 7  sjc002bf02.IIJ.net (206.132.169.109)  129.395 ms sjc002bf00.IIJ.net (216.98.96.186)  124.170 ms sjc002bf00.IIJ.net (216.98.96.182)  123.000 ms
 8  sjc002bb01.IIJ.net (206.132.169.250)  119.771 ms sjc002bb01.IIJ.net (206.132.169.242)  124.154 ms sjc002bb01.IIJ.net (206.132.169.250)  134.167 ms
 9  plt001bb00.IIJ.net (216.98.96.152)  125.710 ms  122.281 ms  117.377 ms
10  plt001bb01.IIJ.net (216.98.96.177)  119.108 ms  128.796 ms  138.065 ms
11  paix01-sfo4.amazon.com (198.32.176.36)  130.413 ms  130.410 ms  152.838 ms
12  205.251.229.8 (205.251.229.8)  114.134 ms  125.399 ms  123.051 ms
13  205.251.229.106 (205.251.229.106)  120.795 ms  117.124 ms  117.578 ms
14  72.21.222.233 (72.21.222.233)  114.788 ms  110.022 ms  119.944 ms
15  * * *
16  * * *
17  * * *
18  * * *
19  * * *
20  * * *
21  * * *
22  * * *
23  * * *
24  * * *
25  * * *
26  * * *
27  * * *
28  * * *
29  * * *
30  * * *
    • ちょっと遠いかな。

backbone.js

API とか

Flash とか

とりあえず、swfdump しますよね？

% wget http://s3.picotube.tv/images/swf/yplayer.swf
% swfdump --full yplayer.swf
>||
        00004) + 0:1 debugfile "/Users/＜名前＞/Documents/remote/dev-avator/flashAndDatas11252011;classes;GlobalVars.as"
        00005) + 0:1 debugline 30
    • なるほど。Mac で開発してると。
  • 更に、自作ツールで dump
~/svn/IO_SWF% php sample/swfdump.php -h  -f ~/picotube/yplayer.swf
＜略＞
Code: 77(MetaData)  Length: 1284
             0  1  2  3  4  5  6  7   8  9  a  b  c  d  e  f  0123456789abcdef
0x00000010                                    7f 13 04 05 00
0x00000020  00 3c 72 64 66 3a 52 44  46 20 78 6d 6c 6e 73 3a   <rdf:RDF xmlns:
0x00000030  72 64 66 3d 22 68 74 74  70 3a 2f 2f 77 77 77 2e  rdf="http://www.
0x00000040  77 33 2e 6f 72 67 2f 31  39 39 39 2f 30 32 2f 32  w3.org/1999/02/2
0x00000050  32 2d 72 64 66 2d 73 79  6e 74 61 78 2d 6e 73 23  2-rdf-syntax-ns#
0x00000060  22 3e 20 3c 72 64 66 3a  44 65 73 63 72 69 70 74  "> <rdf:Descript
0x00000070  69 6f 6e 20 72 64 66 3a  61 62 6f 75 74 3d 22 22  ion rdf:about=""
0x00000080  20 78 6d 6c 6e 73 3a 78  6d 70 3d 22 68 74 74 70   xmlns:xmp="http
0x00000090  3a 2f 2f 6e 73 2e 61 64  6f 62 65 2e 63 6f 6d 2f  ://ns.adobe.com/
0x000000a0  78 61 70 2f 31 2e 30 2f  22 3e 20 3c 78 6d 70 3a  xap/1.0/"> <xmp:
0x000000b0  43 72 65 61 74 6f 72 54  6f 6f 6c 3e 41 64 6f 62  CreatorTool>Adob
0x000000c0  65 20 46 6c 61 73 68 20  50 72 6f 66 65 73 73 69  e Flash Professi
0x000000d0  6f 6e 61 6c 20 43 53 35  3c 2f 78 6d 70 3a 43 72  onal CS5</xmp:C
    • CS5 使ってるんですね。
sealed protectedNS([protected]org.libspark.ui:SWFWheel) class <q>[public]org.libspark.ui::SWFWheel extends <q>[public]::Object{
    • ほぅ。SWFWheel なんてあるんだ。(Macで)マウスホイールの値を取得する SWFObject 拡張みたい。
     constructor * <q>[public]com.greensock.easing::Strong=com.greensock.easing:Strong/Strong()(0 params, 0 optional)

キリがないので、中を覗くのはここまで。

色んな技術が詰まったサービスで、とっても勉強になります。

ある日、不具合を呟いたら

昨晩、picotube で新規プレイリストを作ろうとして誤操作したみたいで、
3時間以上かけて作成した既存のプレイリストが消えちゃいました。
致命的な操作は何かガードをかけるか Undo 機能を付けると良いと思うよ。
僕は挫けたので、もう picotube を使う事ないけど。

社長さんからメールが来た。しかも丁寧だ。。。
＜メール文言はさすがに略＞

同じ名前のプレイリストが複数あると、IE9 で表示に問題があったみたいです。

すぐ治して頂けました。＼(^o^)／

ついでにブックマークレット

でも、プレイリストが手元に保存できるといいなと思い、ブックマークレットを作成。

javascript:
l='';
t=$(".main_search_thumbnail");
for(i=0;n=t[i],i<t.length;i++)
    if(p=$(n).attr('data-preview'))
        l+=p+' '+$(n).attr('data-title')+"\n";
alert(l);

これで一安心。

要望