1. Youtube IFrame API とは
2. 基本的な使い方
3. 動的にスクリプトをロードする
4. 見た目・挙動・イベントを設定する
5. 動画再生のイベントトラッキング
6. 動画の再生の任意のタイミングでアクションを起こす
7. 埋め込みプレイヤーでAPIを利用可能にする
8. まとめ

Youtube IFrame API とは

• iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame API | Google Developers

IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。

Youtube の埋め込み動画プレーヤーは iframe 要素でパブリッシュされますが、 それを動的に生成したり、プレーヤーの再生等を操作したり、イベントを検知して何かアクションを起こしたりする事が出来ます。 動画を軸にしたコンテンツ作りに大活躍しそうですね。

基本的な使い方

プレーヤーの生成は YT.Player というクラスを利用して行います。 引数にはプレイヤーを表示する為のコンテナ要素と、オプションを渡します。

<div id="movie"></div>
<script>
var onYouTubeIframeAPIReady = function(){
    var player = new YT.Player("movie", {
        videoId: "c5kmKO_gGsc",
        width: 1600,
        height: 900
    });
};
</script>

onYouTubeIframeAPIReady という関数は、APIのJavaScriptの準備が完了した段階で自動でコールされます。 そして、APIのJavaScript本体を読み込みましょう。

<script src="//www.youtube.com/iframe_api"></script>

これで #movie 要素内にプレーヤーが生成されます。とても簡単ですね。

ここでは第一引数に要素のid名を渡していますが、HTMLElementその物でも構いません。 なんでしたら、新たに生成した空要素でもよいでしょう。

new YT.Player(document.getElementById("movie"), {...});
new YT.Player(document.createElement("div"), {...});

動的にスクリプトをロードする

onYouTubeIframeAPIReady は、スクリプトのロードが完了された時に一度しか実行されません。 つまり既にスクリプトが読み込まれて初期化された状態で onYouTubeIframeAPIReady を設定したとしても、 その処理は行われずに何も起こらない事になります。

そこで、「既にロードされている場合は即時実行、まだの場合はスクリプトを読み込んでから実行」という処理を関数にまとめてみます。 （jQuery使用）

$.youtubeReady = function(callback){
    var EVENT_READY = "youtubeready";

    if(window.YT && window.YT.Player){
        return callback();
    }
    $(window).on(EVENT_READY, callback);
    window.onYouTubeIframeAPIReady = function(){
        $(this).trigger(EVENT_READY);
        window.onYouTubeIframeAPIReady = void 0;
    };
    $("<script>", {src: "//www.youtube.com/iframe_api"}).appendTo("body");
};

$.youtubeReady には実行したいコールバック関数を渡します。

$.youtubeReady(function(){
    var player = new YT.Player(...});
});

見た目・挙動・イベントを設定する

オプションの playerVars プロパティでプレーヤーの見た目・挙動を、 また同じく events プロパティでイベントハンドラの設定をする事が出来ます。

var player = new YT.Player("movie", {
    videoId: "c5kmKO_gGsc",
    width: 1600,
    height: 900,
    playerVars: {
        autoplay: 1, // 自動再生する・しない
        controls: 0, // コントロールを表示する・しない
        showinfo: 0, // 動画の情報テキストを表示する・しない
        theme: "light" // テーマの選択（dark|light）
    },
    events: {
        onReady: function(e){
            console.log("--APIの準備が整いました--");
        }
        onStateChange: function(e){
            if(e.data === YT.PlayerState.PLAYING){
                console.log("--再生中--");
            }
        }
    }
});

playerVars では非常に細かい設定が可能です。 詳しくは公式のドキュメントでお探しください。

YT.Player で動画を操作する為には、APIの準備を待たなければなりません。 初期化時に動画を操作するためのアクションは onReady 内に書くと良いでしょう。

動画再生のイベントトラッキング

このAPIを調べるきっかけになったテーマなのですが、 例えばユーザーがプレイヤーをクリックしてビデオを再生した時に、Google Analyticsにイベントを一度だけ送信したい場合。

onStateChange イベントを利用する事で実現できますが、 再生中何度もPLAYING（再生中）ステートに切り替わる可能性がありますので、 一度イベントを送信したらその処理を無効化する必要があります。

var playerTrackEvent = function(){
    // 一度だけトラッキングイベントを送信
    if(ga){
        ga("send", "event", "video", "play", "My Video");
        playerTrackEvent = undefined;
    }
};

var player = new YT.Player("movie", {
    ...
    events: {
        onStateChange: function(e){
            if(e.data === YT.PlayerState.PLAYING && playerTrackEvent){
                playerTrackEvent();
            }
        }
    }
});

動画再生の任意のタイミングでアクションを起こす

例えば「再生時間1:00のタイミングで背景を暗転させたい」など、動画の再生の経過時間をトリガーにしてアクションを起こしたい場合は、 イベントを活用したい所ではありますが、events には onProgress のような物は用意されていません。 その為、監視する関数を自前で書く必要があります。

（もっともそのような物を常に発火させていたらコスト的にもよろしくないでしょう）

// 再生時間が1:00を超えたらページ背景を黒くする
var player, timer, playerProgress;

playerProgress = function(){
    clearTimeout(timer);
    if(
        player.getPlayerState() === YT.PlayerState.PLAYING
        && player.getCurrentTime() > 60
    ){
        $("body").css("background-color", "#000");
        return;
    }
    timer = setTimeout(playerProgress, 100);
};

player = new YT.Player("movie", {
    ...
    events: {
        onReady: function(e){
            playerProgress();
        }
    }
});

多用するのはあまり良くなさそうですが、 動画の再生にあわせてページに演出効果を加えたりするなど、ちょっと面白そうですね。

埋め込みプレーヤーでAPIを利用可能にする

Youtube のビデオ再生画面で取得できる「埋め込みコード」による埋込プレーヤーでも、APIが利用可能です。 つまりHTMLに埋め込みコードの iframe を直書きして、それを元にインスタンスを生成して操作する事が出来ます。

下の例では、準備が完了した時点でプレーヤーをフェードインさせてみます。

HTML/CSS

<style>
#movie {
    transition: opacity 1s ease 0s;
    opacity: 0;
}
#movie.show {
    opacity: 1;
}
</style>
<iframe
    width="320"
    height="180"
    id="movie"
    src="https://www.youtube.com/embed/c5kmKO_gGsc?rel=0&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1"
    frameborder="0"
    allowfullscreen
></iframe>

JavaScript

var player = YT.Player("movie", {
    events: {
        onReady: function(e){
            $(e.target).addClass("show");
        }
    }
});

埋め込みプレーヤーのURLに enablejsapi=1 のパラメータを付加しなければならない点に注意しましょう。

まとめ

動画の活用は負荷もそれなりなので使い所は考えなければなりませんが、 訴求力を高めるには中々良い手段なので、上手に活用していきたいですね。

Video

古くは Flash だったり wmv だったりしたWeb上での動画ファイルの再生も、 最近では HTML5 で追加された video 要素のおかげで統一化が図られています。 勿論IE8以下ではサポートしていないので Flash 等で対応してあげる必要がありますが、 その辺の面倒をしっかり見てくれるライブラリも公開されています。

video 要素

まずは video 要素を簡単におさらいします。

<video poster="img/poster.jpg" id="my-video" controls>
    <source src="movies/movie.mp4" type="video/mp4">
    <source src="movies/movie.webm" type="video/webm">
</video>

video 要素は source 要素をぶらさげ、形式ごとに動画ファイルを列挙していきます。 video の src 属性で指定する事もできますが、ブラウザ環境ごとに再生が出来る形式が限定されているので、 複数の形式を連ねて再生可能な形式で再生する方法が広く使われます。 どの環境でどの形式がサポートされているかは下記URLにて詳細がまとめられています。

• HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット – HTML | MDN

ムービーのコントロール

video 要素の元となる HTMLMediaElement には動画の再生をコントロールするメソッドがぶら下がっているので、 それを利用して操作する事ができます。ブラウザによっては他にもメソッドも独自に実装されている事があります。

var video = document.getElementById("#my-video");
...
video.load(); // ビデオのロード
video.play(); // 再生
video.pause(); // 停止

ムービーのシーク

動画の指定した時間へのジャンプは currentTime プロパティの値を変更する事で可能です。 currentTime プロパティは通常の呼び出しでは現在の再生位置を返しますが、 値を指定する事でその再生位置にジャンプする事が出来ます。

video.currentTime; // 12.345 など（再生位置を秒で返す）
video.currentTime = 30; // 30秒の位置に移動する

しかし、currentTime に代入してシークを行おうとした場合にエラーが発生する場合があります。

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

これは動画ファイルの情報がまだ利用可能でない為起こる様です。 他の外部リソース同様にメタ情報のロードを待つ必要がありますね。

video.addEventListener("loadedmetadata", function(e){
    e.target.currentTime = 30;
}, false);

この他にも多くのプロパティが実装されているので、 JavaScript でさらに進んだ処理をしたい時は W3Cのページ を訪れてみましょう。

ビデオプレイヤーライブラリ

限られた環境で動画を再生するだけならば素のまま使えば良いのですが、 やはりどうしてもレガシーな環境に対応しなければならない時があります。 面倒な部分は優秀なライブラリにお願いしてしまいましょう。

Video.js

http://www.videojs.com/

Video.js は Flash をフォールバックに使用しているプレイヤーライブラリです。 スタイルシートとJavaScriptファイルを読み込み、video 属性に専用のクラスを指定して使用します。

<video id="my-video" class="video-js vjs-default-skin"> ... </video>
<script>
var player = videojs("my-video", { /* options */ });
</script>

プレイヤーに好みのスキンを着せる事が出来るのが特徴で、 ブラウザ上でプレビューを確認しながらスキンを編集出来るツールも公開しています。 スタイルの編集は Less で行う事ができます。

• Video.js | Video Player Skin Designer

Video.js の API は、 イベント・メソッドの名前や仕様などが MediaElement API に倣った形になっています。

player.on("loadedmetadata", function(){ ... }); // on メソッドでイベントの設定
player.play(); // 再生

MediaElement.js

http://mediaelementjs.com/

MediaElement.js は、Flash や Silverlight のプレイヤーを使い、 古いブラウザでも HTML5 の MediaElement の API を使用出来るように振る舞ってくれます。 多くのCMS向けのプラグインが公開されており、WordPress はコアにバンドルされているそうです。 動作には jQuery が必要です。

<video id="my-video"> ... </video>
<script>
    var player = new MediaElementPlayer("#my-video", /* options */);
    // あるいは
    var $media = $("#my-video").mediaelementplayer({ /* options */ });
</script>

プレイヤーの初期化は MediaElementPlayer から生成するか、 $.fn.mediaelementplayer を使用して行います。 それぞれ返り値が違うので注意しましょう。

ライブラリ使用上の共通の注意

video 要素に対応していないブラウザで使用する場合は、 html5shiv や Modernizr 等で video 要素へのCSSの適用を有効化しておかなければなりません。 あるいは手作業で対応しておきましょう。

document.createElement("video");
document.createElement("audio");

また、古い環境でエミュレートしてくれるといっても、 コールするタイミングによっては使えなかったり、細かい点で本来の物と挙動が異なってしまったりします。 結局中でIE用の処理を分けざるをえない、といった状況は結構ありますので、がんばりましょう。

参考資料

• video – HTML | MDN
• HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット – HTML | MDN
• HTML5 Video Player | Video.js
• MediaElement.js – HTML5 video player and audio player with Flash and Silverlight shims

ちょっと変わった手法で描いた宇宙船の映像。
なかなか目からウロコだったので思わずご紹介。

Starship by Bernard Gigounon on Vimeo

海を走る船舶の映像を上下対称に編集しているんですね。
それだけなんですが、とてもそれっぽく見えます。
特に夜間の映像は雰囲気もバッチリ。

発想の勝利ですね。

一番はじめに目についたアニメーションがコレです。

アップテンポな音楽に乗せてキュートなテディベアがトコトコ歩いていると思ったら…
あれよあれよと展開していく、実に飽きの来ないアニメーションです。
大変シュール。

横スクロールで牛がどんどん変化していく不思議なアニメーションも。
BGMはずっと聴いてると情緒不安定に陥りそうな雰囲気。

良いセンスしてますね…。
他にも色々ビデオを公開しているので、チェックしておきたいです。

YouTube – ‪cyriak さんのチャンネル‬‎
Cyriak

Digital District

http://www.digital-district.fr/

どことなく荘厳なイメージを受けますね。

死刑については、このようなブログでさらりと語れる程
簡単なお話ではないと思うのでそれはしませんが、
蝋で作られ、「死刑」をモチーフにした人形や道具が
溶け落ちていく様は、美しく、どこか恐ろしく、
こめられたメッセージが深く突き刺さる演出です。

…考えてしまいますね。

※2010/08/07 セッションエンコーディングの項で、キー文字列を入力した例を追記

CodeIgniter from Scratch: Security | Nettuts+

こちらがそのチュートリアルビデオなのですが…
35分と大変長いので、要点だけ下にまとめておきます。
ビデオではスクラッチから書いていて大変わかりやすいので、
時間がある時に見ておくと良いと思います！
英語ですが、コードだけ見ていても参考になります。

1. パラメータに使用される文字を制限する
2. パスワードエンコーディング
3. SQLインジェクション対策
4. クロスサイトスクリプティング対策
5. セッションエンコーディング
6. PHPのエラー表示を消す
7. プライベートメソッドを使う

1. パラメータに使用される文字を制限する

CodeIgniterはURLの一部をメソッドの引数として受け取りますが、
そこで使用可能な文字をconfig.phpで厳しく管理しています。

$config['permitted_uri_chars'] = 'a-z 0-9~%.:_-';

正規表現の書式で指定されているここの値を、より厳格にする事で
クライアント側からの予期せぬインプットを防ぐ事が出来ます。
制作するアプリケーションによって中身を精査すると良いでしょう。

2. パスワードエンコーディング

sha1やmd5等のPHPに既存の関数ではなく、
よりセキュアにエンコーディング出来るencryptライブラリの使用が推奨されています。

$this->load->library("encrypt");
$this->encrypt->encode($mypassword);

encryptライブラリは、キーとなる文字列を第二引数に指定する事で、
可逆エンコードする事も出来ます。

$key = "this is private key string";

$encoded_password = $this->encrypt->encode($mypassword, $key); // エンコード
$decoded_password = $this->encrypt->decode($encoded_password, $key); //デコード

cf) 暗号化クラス : CodeIgniter ユーザガイド 日本語版

3. SQLインジェクション対策

SQLインジェクション攻撃に備えて、
クライアント側からインプットされた値をDBに渡す前に消毒してやります。

$this->load->database();
$query = $this->db->query("SELECT * FROM users WHERE name = {$this->db->escape($name)}");

また、ActiveRecordクラスを使用する事で
最小限のスクリプティングでDBへアクセスする事が出来ます。
この場合、入力された値のエスケープは自動で行わるので、意識する必要がありません。

$this->load->database();
$query = $this->db->select("*")->from("users")->where("name",$name);

cf) Active Record クラス : CodeIgniter ユーザガイド 日本語版

4. クロスサイトスクリプティング対策

いわゆるXSSという奴です。
この攻撃に備えて、値のインプットとアウトプット両方において
フィルタをかけてやる必要があります。

■インプット

インプットは、$_POSTを使わずに入力クラスを用いて値を受け取りましょう。

$this->input->post("comment", true);

第二引数にtrueを渡す事で、XSSフィルタを入力された値に適用できます。
また、config.phpでの設定で、XSSフィルタリングをデフォルトでかける事が出来ます。

// /system/application/config/config.php
$config['global_xss_filtering'] = TRUE;

これで第二引数がなくともXSSフィルタがかかるようになりました。

単独でフィルタが使いたい場合は、xss_cleanメソッドを使いましょう。

$clean_string = $this->input->xss_clean($string);

■アウトプット

アウトプット時は、PHP組み込みのhtmlspecialcharsを用いるか、

htmlspecialchars($string);

または、CodeIgniterのヘルパ関数による出力をする事で
自動的にフィルタリングがかけられます。

$this->load->helper("url");
echo anchor($url);

5. セッションエンコーディング

CodeIgniterのセッションはPHP組み込みのセッションを使用せず、
独自のセッションデータを生成して利用します。

$this->load->library("session");
$this->session->set_userdata("user_id", 2); //セッションデータの入力
$this->session->userdata("user_id"); //セッションデータの取得

上のように、ログイン状態を保持する場合等に頻繁に使われますが、
cookieを覗いて見ると、user_idの値が丸見えになっていて大変危険です。
これを保護する為に、セッションエンコード用のキー文字列を
config.phpで設定してやりましょう。

// /system/application/config/config.php :
$config['encryption_key'] = "";

デフォルトでは空白なので、なんらかの文字列を入れてあげましょう。

$config['encryption_key'] = "QEE3Ka2A9ABYhY4dU2VIQau8";

» セッションクラス : CodeIgniter ユーザガイド 日本語版

6. PHPのエラー表示を消す

デフォルトがE_ALLになっているので0を入れてあげましょう。

// /index.php :
error_reporting(0);

7. プライベートメソッドを使う

コントローラ内のメソッドは基本的に全てアクセス可能ですが、
プライベートな物としてコントローラの中でのみ使いたい、
そんな時はメソッドの頭にアンダースコアをつけてあげると、
外部からのアクセスが出来なくなり、ブラウザでアクセスしても404となります。

class Hoge extends Controller {
    /* 中略 */
    function public_method (){ // アクセス可能
    }
    function _secret_method (){ // アクセス不可（404）
    }
}

アクセスされる事が好ましくないメソッドは、
プライベートメソッドとして宣言しておきましょう。

以上です。
日々注意しつつ、安全なアプリケーション制作をこころがけましょう！
（と、主に自分に言い聞かせる）

LESS – Leaner CSS
LESSというのはCSSをより便利でスマートな記法に拡張する為のRubyプロジェクトですが、
そのJavaScript版が開発されている模様です。

LESSってなぁに

LESS – Leaner CSS
まずはLESSについて軽くメモ。
LESSはCSSに様々な機能を提供する為のプロジェクトです。
変数を扱ったり、関数のような記述をしたり、プロパティ内で計算したり…
さらには、無駄のないように最適化を施してくれます。なんという愛。

Ruby版の詳しい導入方法と記法は別記事を見ていただくとして、これは便利ですね。
重複した記述をしなくて済むようになりますし、
スタイルを一元管理し易くなります。
ネストする記法も直感的で大変分かりやすいです。

JavaScriptで動くLESS

そんなLESSをJavaScriptで動かす為のプロジェクトがこちらです。
lesscss – Project Hosting on Google Code
上記のリンクよりdownloadへ進んでスクリプトを取得しましょう。

簡単な使い方。

まずスタイルシートの拡張子を「.less」としてリンク要素で埋め込みます。

<link rel="stylesheet/less" href="style.less" />

次に、less.jsを読み込みます。（順番が逆ではいけません）

<script type="text/javascript" src="less.js"></script>

これであとはless.jsさんがstyle.lessの中身をLESSルールに則って展開してくれます。

※本稿執筆時のバージョンは1.0.22。IEではエラーが発生。
ChromeはローカルでのテストのみXmlHTTPRequestの都合上動きません。

nettuts+でチュートリアル動画が公開されていましたので、こちらもご参考迄。
Quick Tip: You Need to Check out LESS.js | Nettuts+

こんなふうに活用したい

静的なページスタイルを全てJavaScriptに依存してしまうのは、よろしくない。
現状の使い道としては、ローカルテスト用としてJavaScript版を使用して、
本番化の際にはRubyで書き出してリンクを貼りなおす、といった感じでしょうか

ただ、せっかくJavaScriptで開発してくれているので、
JSLintやZen-Codingのようにエディタのプラグインとして導入して、
編集しながら簡単に展開出来る！という形になれば素晴らしいですね。
Zen-Coding + LESSで開発速度が一気に加速しそうです。

この度、Operaからそのスピードを映像化したビデオが公開されています。
Chromeはポテトと同着だって？Operaならポテトを超える。

見てくださいこの大掛かりな装置を。
これは本気だ…。

ね、はやかったでしょう？（ボブ

ちなみにOperaが高速というのはジョークでもなんでもなく、
ベンチマークでも良い成績を収めています。
cf) Opera 10.5最速をマーク、Chrome 5とSafari開発版 | エンタープライズ | マイコミジャーナル

先日Twitterのフォロアーさんと共同でベンチマークをしていたのですが、
私の環境ではそこでも最速を記録していました。

いろんな意味で、あなどれない存在ですね。

MOMENTOS from Nuno Rocha on Vimeo.

ホームレスの男が路上で寝ていると、
目の前のショーケースにディスプレイが運ばれてきて…

心温まるストーリーです。イイハナシダナー。
私は皆のガッツポーズにヤラれます。

同じ作者さんのをもう一本。

こっちはユーモラスな作品。
おもわずニヤリとしてしまいますね。
この後二人の勝負の行方はどうなったのか妄想しちゃいます。

Television is a drug. on Vimeo

クレイジーなハイテンションぶりに爆笑してしまいました！

見て！ぼくを見て！なに！？メシ！？なにか食うの？？
え？寝るの？いいよ！いいとも！戻ってきたら見てね！OK！？

テレビをあまり見ない生活を送っているのでわかりませんが、
依存してる人はこんな感じ…なわけないか。どうなんでしょう。