sassy log: 3月 2009

2009年3月28日土曜日

ヘルプ

本日から、あるプロジェクトのヘルプに行くことになりました。
プロジェクトに人を投入すると減速することをブルックス先生がだいぶ昔に証明してくれましたが、
まあそんなことは棚に上げて、こういう機会にプロジェクトのまわし方を勉強していきたいと思います。
ということで、休日出勤がんばるぞ！

2009年3月26日木曜日

YouTube JavaScript Player API で一つの動画を繰り返し再生させてみる

YouTube JavaScript Player API で一つの動画を繰り返し再生させてみました。

swfobject をつかって、swfを埋め込み、playVideo() で再生させます。

onYouTubePlayerReady() はプレーヤーが完全に読み込まれたときに呼び出される特殊な関数です。この関数の中でplayVideo()を呼び出しています。

また、プレーヤーの状態が変化したときは、onStateChangeイベントが発火するので、addEventListenerでイベントハンドラを登録し、動画再生が終わった時点(stateは0)でplayVideo()を読んで、再度再生するようにしています。


<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function func() {
  var params = {allowScriptAccess: "always" };
  var atts = {id: "myytplayer" };
  swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID&enablejsapi=1&playerapiid=ytplayer",
  "ytapiplayer", "425", "356", "8", null, null, params, atts);
}

function onYouTubePlayerReady(playerId) {
  var ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
  ytplayer.playVideo();
}

function onytplayerStateChange(newState) {
  if (newState == 0) {
    var ytplayer = document.getElementById("myytplayer");
    ytplayer.playVideo();
  }
}
</script>
</head>
<body onload="func()">
<div id="ytapiplayer">
 Flash.
</div>
</body>
</html>

YouTube JavaScript Player API の詳細は、YouTube JavaScript Player API リファレンスを参照してください。

2009年3月24日火曜日

Google Data API

Google Data APIを勉強しています。
Google Data APIとは、Googleのサービスをブラウザを使わずに、APIを叩くことによって利用するもので、
簡単にいえば、HTTPのコマンド(GET/POST/PUT/DELETE)でATOM/RSSのやり取りを行います。

youtubeとかPicassaとかでも使えるので、いろいろ面白いことを試したいなと思っています。

2009年3月21日土曜日

即席でスライドショウをつくってみた。

せっかく画像をダウンロードしたので、スライドショウをつくってみた。

まず、ディレクトリにあるファイルすべてを img 要素にするスクリプトをかく。


#!/usr/bin/perl

open OUT, "> display.html"
    or warn "fail";
opendir DH, ".";
print OUT "<html>\n";
print OUT "<head>\n";
print OUT "<script type=\"text/javascript\" src=\"./slideshow.js\"></script>\n";
print OUT "<link rel=\"stylesheet\" href=\"./slideshow.css\" type=\"text/css\"></link>";
print OUT "</head>\n";
print OUT "<body>\n";
foreach $file (readdir DH) {
    if ($file =~ /jpg$/) {
 print OUT "<img src=\"";
 print OUT "$file";
 print OUT "\">\n";
    }
}
print OUT "</body>\n</html>\n";

スライドショウのために、slideshow.css と slidesyou.js を用意。

まず、slideshow.css


body {
  background-color:black;
}

img {
  display : none;
  margin-left : auto;
  margin-right : auto;
}

つぎに、slideshow.js


var img_list;
var i = 0;

function slide() {
  if (i == 0) {
    img_list[img_list.length-1].style.display = "none";
  } else {
    img_list[i-1].style.display = "none";
  }
  img_list[i].style.display = "block";
  if (i == img_list.length-1) { i = 0; } else { i++;}
}

function show(e) {
  img_list = document.getElementsByTagName("img");
  img_list[img_list.length-1].style.display = "block";
  window.setInterval(slide, 10000);
}

window.addEventListener("load", show, false);

まあ、即席で作ったので、だいぶ汚いコードですが・・・。

本当はopacityとか使ってトランジッションとかを派手にしたいんですけど、
今日はここまで。

2009年3月19日木曜日

Webページの画像を保存するPerlスクリプト

Webページにある画像を保存するスクリプトを書いてみました。


#!/usr/bin/perl

use LWP::UserAgent;
use HTML::DOM;
use Digest::MD5 qw(md5_hex);
use Path::Class qw(file);

my $ua = LWP::UserAgent->new;
my $referer = "http://example.com/";
my $url = "http://example.com/";

my $req = new HTTP::Request('GET', $url);
my $res = $ua->request($req);

my $dom_tree = new HTML::DOM;
$dom_tree->write($res->content);
@img = $dom_tree->getElementsByTagName("img");
my $ua2 = LWP::UserAgent->new;
foreach (@img) {
    my $filename = Digest::MD5::md5_hex($_->src);
    my $filepath = file('./temp', $filename);
    unless(-f $filepath->stringify . ".jpg" ) { 
 $ua2->get( $_->src, ":content_file" => $filepath->stringify . ".jpg", "referer" => $referer);
    }
}

LWP::UserAgent は HTTPのリクエストやレスポンスを行うためのモジュールです。
Webページを取得して、それをDOMツリーにして、img要素のsrc属性に記述してある画像ファイルを保存するスクリプトです。

ちょっとはまったのが、はじめに HTML::DOM ではなく、XML::DOM をつかってしまったこと。

もちろん閉じタグがない要素があるので、パースエラーになってしまうのですが、エラーになかなか気づきませんでした。(ちゃんとエラーメッセージ見ろ！って思うけど)

後は、referer を設定しないとアクセスが拒否されるかもしれません。

2009年3月12日木曜日

Perlの勉強

Perlの勉強を始めました。

業務では組み込み系のため、C言語しか使わず、
スクリプト言語はRubyぐらい(しかも、必要最低限しか使わず。。。)
しか使わないので、実はPerlには苦手意識がありました。

でもJavaScriptを勉強しているうちに、
正規表現がいまいち苦手だということがわかり、
「正規表現ならPerlだろ！」という勝手な思い込みから、
勉強を始めることにしました。

で、いざ書いてみると
なかなか癖がある言語だなとおもいました。
サブルーチンの書き方なんかは


sub hello {
    my($a, $b) = @_;
    print $a+$b
}
hello(1,2);

みたいに、ルーチン名の後に(引数...)の形ではなく、
@_ に引数が格納されて、それを利用するのです。
なんだか、C言語の関数になれていると、すごく気持ち悪く感じるなぁ。。。

2009年3月9日月曜日

Yahoo!ウィジェット

Yahoo!ウィジェット - 開発ツール

Yahoo!ウィジェットを試しに作ってみたんですけど、
なかなか面倒くさかったです。

というのも、Yahoo!ウィジェット用のXMLやDOMを覚えなくてはならないからです。

widgetタグやwindowタグやtextタグとかいろいろ覚えなくてはいけないので、
それが面倒。
OperaとかはHTMLのレンダリングエンジンそのものなので、
そのまま HTML+CSS+JavaScript(+SVG)といったWEB標準の知識で
ウィジェットを作れるので、非常に便利だなと思いました。

ただ、Yahoo!ウィジェットで何ができるかはまだわかっていないので、
もう少し調べようかなと思います。

2009年3月1日日曜日

Google、JavaScript APIを手軽に試せる「AJAX API Playground」を公開

Google、JavaScript APIを手軽に試せる「AJAX API Playground」を公開

こういうのがあると気軽にGoogle APIを勉強ができてうれしい。

JSON feed

feedを JSON形式で返す "JSON Feed"なるものがあるらしいです。
http://delicious.com/help/json/

BloggerからJSON形式でfeedを受け取るAPIを叩いてみるサンプルを書いてみました。
仕様とかはどこに書いてあるかどうかわからないので、
Googleのサンプルを見よう見まねで書いてみました。


<html>
<head>
<script type="text/javascript">
var str = "";
function myfunc(json) {
  str += json.feed.title.$t;
  str += "<BR>";
  for (var i = 0; i <json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    str += entry.title.$t;
    str += "<BR>";
  }
}

function result() {
  document.getElementById("ret").innerHTML = str;
}
</script>
<script type="text/javascript" src="http://sassylog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myfunc"></script>
</head>
<body onload="result()">
<div id="ret">test</div>
</body>
</html>

JSON

JSONというのは、まあ一言でいえばデータをJavaScriptのオブジェクトリテラルや配列リテラルで表現したもののことです。
データをJavaScriptのオブジェクトで表現して、JavaScript処理系で eval()すれば、あとはJavaScriptのオブジェクトとして処理できる優れものです。

たとえば、XMLで


<person>
  <name>Sassy</name>
  <age>27</age>
</person>

と書くのを、


{
  name : "Sassy",
  age : " 27",
}

と書くことができます。
JSON形式はテキストなのでeval()をして捜査します。
以下が例です。


function func() {
      var json_txt = '({name : "Sassy", age :  "27"})';
      var json_obj = eval(json_txt);
      document.getElementById("result").innerHTML = json_obj["name"] + ":" + json_obj["age"];
}

XMLHTTPRequestにおいて、Content-Typeが "text/json" だったりしたら、requestText に対してeval()をしてデータを処理するわけです。

昔誰かに「JavaScriptはJSONに対応しているのか？」という問い合わせがあり、
サポートしているも何も、eval()ができるんだからあたりまえじゃないと思ったものです。
こういった新しい情報に対しては常にアンテナを張っておかないといかんなと思う今日頃です。

登録: 投稿 (Atom)

sassy log

2009年3月28日土曜日

ヘルプ

2009年3月26日木曜日

YouTube JavaScript Player API で一つの動画を繰り返し再生させてみる

2009年3月24日火曜日

Google Data API

2009年3月21日土曜日

即席でスライドショウをつくってみた。

2009年3月19日木曜日

Webページの画像を保存するPerlスクリプト

2009年3月12日木曜日

Perlの勉強

2009年3月9日月曜日

Yahoo!ウィジェット

2009年3月1日日曜日

Google、JavaScript APIを手軽に試せる「AJAX API Playground」を公開

JSON feed

JSON

ブログアーカイブ

ラベル

SELF INTRODUCTION

このブログを検索

2009年3月28日土曜日

2009年3月26日木曜日

2009年3月24日火曜日

2009年3月21日土曜日

2009年3月19日木曜日

2009年3月12日木曜日

2009年3月9日月曜日

2009年3月1日日曜日

ブログ アーカイブ

ラベル

SELF INTRODUCTION

このブログを検索

登録

ブログアーカイブ