YouTubeAPIでcuePlaylistを使って連続再生する

2014-05-15
このエントリーをはてなブックマークに追加

YouTubeAPIが面白くて遊んでてて書いたコード。再生リストが作れます。iframe版なのでiPhoneでも連続再生可能。

<!DOCTYPE html>
<html>
 <body>
 <div id="player"></div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 var player;
 function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
 height: '360',
 width: '640',
 events: {
 'onReady': onPlayerReady,
 'onStateChange': onPlayerStateChange
 }
 });
 }

 function onPlayerReady(event) {
 player.cuePlaylist([
 '-PLgUlRVLZE',
 '1slFc9G7I74',
 '1w7OgIMMRc4',
 '1XHcPYorSJw',
 '31VwqZtDdIc',
 '5hDZbroaQDc',
 '686A5yPMWrs'
 ]);
 }

 function onPlayerStateChange(event) {
 console.log(event);
 }

 </script>
 </body>
</html>

簡単簡単。プレイヤーアプリでも書こうかな。

Node.jsを使ってWebSocketで定期的にサーバーからブラウザにプッシュする

2013-09-29
このエントリーをはてなブックマークに追加

チャットアプリとかでよくある「誰かの発言をトリガーとする」方法ではなくて、トリガーとするのはサーバー側のインターバルタイマーです。例えばお知らせとかを一斉配信するときに使う感じでしょうか。

サーバーサイドとクライアントサイド、両方書くので長くなりそう。

WebSocketにwsというモジュールを使います。以下のコマンドでインストールします。あ、Node.jsはインストールされてる前提です。

npm install ws

で、サーバ側のコードが以下

More…

GoogleMapAPIで住所からマーカーをプロットする方法

2010-10-31
このエントリーをはてなブックマークに追加
以前のGoogleMapはマーカーをプロットするに座標を指定しないといけなかったのですが、その座標を調べるのに困った記憶があります。会社のプロジェクトではランドマーク情報を買ったこともあります。
が、もはやそんなことはしなくていいのです。これはおどろきです。GoogleMapAPIで住所やランドマークから座標を調べてプロットすることが可能になりました。恐るべしGoogle。
2010.10.31 21:21
GoogleMapにマーカーをプロットするサンプルページ追加しました。確かにコードだけだと不親切ですよね。
サンプルページは自分で好きな場所にマーカーをプロットできるようにしてあります。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(“jquery”, “1.3.2”);</script>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false&language=ja” charset=”UTF-8″></script>
<script type=”text/javascript”>
$(document).ready(function()
{
var map_block = document.getElementById(‘canvas’);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ ‘address’: “東急本店”}, function(results, status)
{
var map_options = {
zoom: 17,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(map_block, map_options);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
});
});
});
</script>
</head>
<body>
<div id=”canvas” style=”width: 640px; height: 480px;”></div>
</body>
</html>

サンプルでは東急本店の座標を調べてそこを中心とした地図を表示、マーカーも打ってます。この例だと座標の取得にコケたら地図は表示されません。

まぁ、そこは地図の描画とマーカーのプロットを別の処理に分けてやればいいだけの話です。

地域情報サイトとか、作りやすくなりますよね。

こういうAPIを無料公開しちゃうあたり、Googleの恐ろしさを痛感します。日本の企業なら、確実に有料にするでしょう。

「リアルの情報までもネット上で整理するんだ」っていうGoogleの想いが伝わってきます。