2013年12月24日火曜日

[替え歌シリーズ] バグが散々苦労する

※ファンの方すいません

テスト前夜にきっとこんな事も起こってるはず。


昔 となりのおしゃれな プログラマは
結合テストの前日 私に云った
今夜 8時になれば サンタが家にやって来る
ちがうよ それは帰宅したいだけのおはなし
そういう私に ウィンクして
でもね テストになれば あなたもわかる そのうちに
バグが散々苦労する 本当に散々苦労する
余計な仕様追い越して
バグが散々苦労する 難度高い散々苦労する
仕様の外から来た
あれから いくつ冬がめぐり来たでしょう
今も彼女を 思い出すけど
ある日遠い街へと バグがつれて行ったきり
そうよ 明日になれば
私も きっと直せるはず
バグが散々苦労する 本当に散々苦労する
仕様変更をかかえて
バグが散々苦労する ありそうに散々苦労する
顧客から来る
バグが散々苦労する 本当に散々苦労する
予算追い越して
バグが散々苦労する 難度高い散々苦労する
私の家帰れない
バグが散々苦労する 本当に散々苦労する
仕様変更をかかえて
バグが散々苦労する ありそうに散々苦労する
仕様の外から来た
バグが散々苦労する

[替え歌シリーズ] クリティカルなバグの頃には

※ファンの人すいません。

年末進行で焦って修正して確認せずコミットしたあなたへ・・。



Subversionに
コミットする頃には
君と僕のマージで
バグが 出ているだろう
バージョンログが
流れる頃には
誰がバグを出したか
今はわからなくても

このバグを
少し 直せば
届いていたのに
1秒前
何か 足りない
コードのすれ違い

お互いを管理してなさすぎて
コードがよそ見できないのさ

プロジェクトマネージャが
出社する頃まで
マージ前に戻って
もっと ローカルでいよう
プロジェクトマネージャが
出社する頃まで
何が 大切なのか
一人 考えたい

誰かが
コード修正するのは
助かるけれど
バグを
無理矢理に
直せないから

近すぎて見えない修正は
マージが発生すればわかるらしい

クリティカルなバグが
発生する頃には
君と僕の答えも
きっと 出ているだろう
起動しないプログラムが
発生する頃には
何が原因なのか
今は見えなくても

年末進行が
流れる頃には
どういう君と僕に
チケットは降るのだろうか?
顧客検証が
行われる頃には
どういう君と僕に
チケットは降るのだろうか?

[替え歌シリーズ] クリスマスイブの夜にみんなから取り残された人へ

※ファンの方すいません・・・。

クリスマスイブ。
楽しく飲んでいてふと周りを見たら誰もいない。
そんなあなたへ。



金は夜更け過ぎに
ゼロへと変わるだろう
記憶ない、ほらない
きっと誰も来ない
ひとりだけの三次会
さてぇは、うぉぉ、おいてかれた

懐深く 秘めた小遣い
叶えられそうもない
必ず今夜なら
みんなで飲める気がした
タクシー、ウォーォたぶん、乗れない

まだ消え残る 酒への想い
夜へと飲み続く
街角には泥酔者
汚物のきらめき
際限ない、うぉーお、酒がない

金は夜更け過ぎに
ゼロへと変わるだろう
記憶ない、うほほほほ、ほらない
きっと諭吉はいない
ひとにぎりの100円玉
そりゃない、うぉーでも、ほかない
牧瀬里穂かわいいわ・・。

2013年10月6日日曜日

Youtubeのビデオを見出しのタイトルから自動的に拾って埋め込んでくれるJS

Youtubeの動画をブログなどで埋め込む時に1つとかなら動画の共有のコードをコピーしてくれば楽なのですが、html5jの勉強会のように数があると色々面倒なので、自動で埋め込むJSを作りました。
原理は単に"H4"タグに書かれたタイトルを元にYoutubeに検索に行ってヒットしたら埋め込むというものです。

例:
-----------------------------------------

Webアプリのマネタイズのこれまで

menue株式会社 成田守さんの講演でした。

プリペイド電子マネー『ウェブマネー』決済について

ウェブマネーの担当者さんの講演でした。
-----------------------------------------

という形でタイトルを書いただけで埋まってくれます。
とりあえず、Blogger的にはH4になる「準見出し」にすると勝手に取ってくるという形にしています。Hx系はいろんなところで使われるのでかぶってないものをチョイスしたいところですが、なかなか良いのが選べないというのがこの手のブログツールの悲しいところ。
とりあえず、つらつら書いて見出し設定したら勝手に埋まるというらくちんさを目指しました。
ただ、問題なのはブログ書いてる時にコピペなどすると変な文字列とかこっそり入ったりするので、そこは綺麗になるようにしてねとしか言えないのが悲しいです。
Bloggerはこの辺のコードを埋めても動くから便利ですが、onloadのタイミングの空気が読めない時があるので、あえての1秒後に実行にしてあります。

ソースコードは
<script type="text/javascript">
    var APIKEY=※https://cloud.google.com/consoleから取得したもの※;
    var CHANNELID="UCGiSzzfTs7s3dHy3xWkSQ0g"; // 絞り込むためのチャンネルID
    var TARGETTAG="h4"; // 対象となるタグ名
    var tTags;
    var isYTLoad=false;
    setTimeout(function(){
        tTags=document.getElementsByTagName(TARGETTAG);
        viewYoutube();
    },1000);
    function onJSClientLoad() {
        gapi.client.setApiKey(APIKEY);
        gapi.client.load('youtube', 'v3', function(){
            isYTLoad=true;
            viewYoutube();
        });
    }
    function addVideo(insDom){
        var tTitle=insDom.textContent?insDom.textContent:insDom.innerText;
        var request=gapi.client.request({
            path:"/youtube/v3/search",
            params:{
                maxResults:1,
                q:tTitle,
                channelId:CHANNELID,
                type:"video",
                order:"date",
                "part":"id"
            }
        });
        request.execute(function(resp) {
            if(!resp.error && resp.items[0]){
                var insEl = document.createElement("div");
                insEl.innerHTML = '<iframe width="560" height="315" src="//www.youtube.com/embed/'+resp.items[0].id.videoId+'" frameborder="0" allowfullscreen></iframe>';
                insDom.parentNode.insertBefore(insEl, insDom.nextSibling);
            }
        });
    }
    function viewYoutube(){
        if(isYTLoad && tTags && tTags.length>0){
            for( var i=0; i<tTags.length; i++ ) {
                if(tTags.item(i))
                    addVideo(tTags.item(i));
            }
            tTags=null;
        }
    }
</script>
<script src="https://apis.google.com/js/client.js?onload=onJSClientLoad"></script> 
です。
YoutubeのAPIのOnloadなどなど見計らっちゃってるので一部面倒なコードになってますが、直接読むようにするなどすればもうちょっとすっきりするかな。
運用方法として、上記コードをブログに埋め込むか基本動画が埋まってるというのであればブログパーツにするかという所でしょうか?
ここのブログは常に動画が埋まるものでもないので、ブログのソースにして貼付けるというめんどくさい形にしています。。。orz



2013年6月19日水曜日

UTCamera風 jQueryプラグイン作った

UTCamera風な画像をブラウザでできるプラグイン作った。
※WebRTCの機能が対応してて、有効設定されてるブラウザのみで動作します。ご注意ください。
※PC版のChromeなら動きます。

以下にソースを公開してあります。

https://github.com/wakasamasao/bcam/

使い方は以下のソースを参照ください。
https://github.com/wakasamasao/bcam/blob/master/bcam.html

流れとしては
  1. WebRTCの機能を用いてブラウザがWebCamにアクセスを試みる
    -> ブラウザから使用許可を求められるので許可が必要です
  2. 200ms毎(ブラウザの処理によって遅延することが多い)にカメラ画像を取得
  3. 10回撮影したら画像を合成しGIFアニメに変換
  4. base64にエンコードした文字列が返ってくる
という形です。
設定で撮影秒間や回数、ループするしない、フィルムロールのようにコマ撮り写真にするなどいろいろ変更できます。

とりあえず、こんなのが作成できます。
GIFアニメのはループリバースがかかってるため、自然に繰り返してるように見えます。



なお読み込み時のJSですが、GIFアニメ化するかしないかで必要とするプラグイン変わるのですが、
<script src="js/gifencoder/b64.js"></script>
<script src="js/gifencoder/LZWEncoder.js"></script>
<script src="js/gifencoder/NeuQuant.js"></script>
<script src="js/gifencoder/GIFEncoder.js"></script>
に関してはGIFアニメ化するのに必要なライブラリです。読み込まなかったらGIFアニメにはできず、フィルムロールタイプしか生成できません。

パラメータは以下のような感じで設定すると色々変わります。

width:200, // 生成される画像の横幅
height:200, // 生成される画像の縦幅
times:10, // 繰り返し回数
timing:200, // 取得タイミング(ms)
type:"animation", // 出力タイプ animation:GIFアニメ , pict:Film roll風
playtiming:100, // GIFアニメの場合の再生スピード
format:"png", // typeでpict指定の場合の出力フォーマット png | jpeg
layout:"horizontal", // 現在使ってないが設定
reverse:true, // アニメーション終了後に逆再生して繰り返しに違和感無いにするかどうか
videoObj:null, // ここにvideo tagのオブジェクトを指定するとそこにカメラ画像を表示
insertvideo:false, // 実行してるdomにキャプチャ用のvideoを表示するかどうか
oncomplete:null,  // 終了後のイベント
onend:null, // キャプチャ終了後のイベント
onstart:null, // キャプチャ開始のイベント
onerror:null, // エラー時のイベント
onwarning:null, // 警告時のイベント

万華鏡タイプのエフェクトとか色々やろうとは思ってるんですが頓挫中。
他にフィルムロール状態が縦並びとか正方形とか色々並べ替えたり・・いやなんでもない。
そもそもこれを使ったサービスを先に作れ・・と・・・・・・。ゴフゥ(吐血
あ、アイディアはあるんですよ?つ、作ってたら凝りだして・・いや・・ね・・(汗


2013年6月11日火曜日

html5のVideoタグでLive配信をするApple

Appleの基調講演の配信ページがsafari限定になっていて、何をやってるのか見てみた。

埋め込みタグは
<video id="movie" class=" video" src="http://p.events-delivery.apple.com.edgesuite.net/13oygadvoyibawefpiuawefpiuawdf6/sl_mvp.m3u8" x-webkit-airplay="allow" autohref="true" width="848" height="480" autoplay="autoplay" jsonurl="/apple-events/scripts/ac_media_jsons/june_2013_event.json" expectingmoviejson="true" spec="" style="width: 848px; height: 480px; "></video>
となっています。
おおお!Videoタグ!
たしか前回はObjectタグでQT呼び出しだったはず。
コントローラーは<div>で自作されていた。ShadowDOMな感じではない状態で。

srcには .m3u8 という拡張子のファイルを呼び出しています。
このm3u8はプレイリスト用のよくあるフォーマットです。
http://ja.wikipedia.org/wiki/M3U 
src指定されてるものは最初の画面関連の動画プレイリストのようです。
あと気になるところとして jsonurl という謎のアトリビュートが設定されています。
このjsonファイルも見てみると、これもm3u8のプレイリストを呼び出しています。
で、m3u8のファイル辿ってみると約9秒毎の .ts ファイルを連続再生させています。
中の .ts ファイルは srcで指定されてるのは開始タイミングで行われていたものが定義されています。jsonurlで指定されてるものは、常時更新されているようです。

この配信方法はhttpのライブ配信では王道のアルゴリズムではあるが、将来Videoタグでライブ配信するときに使われるスタンダードになっていくのだろうか?
W3CなどでLive配信についてはどう議論されてるか追えていないのでよくわかってはいませんが・・後で調べてみます。
DRMかけてセッションがないとDLできない、帯域をデバイスやネットワークなどで常時変更しまくったり、共有しようとしても細切れまくってるから共有するのがめんどくさくなるなどは実現できそうな気はする。
あと、プレイリストの生成をどうなるかがわからないけど、WebRTCな感じでP2Pな方法で動画ファイル送りまくるという方法がうまく使えるかな?

ただ、どうも不安定なようで、再生中に突然src属性で指定されていた最初の動画が流れてしまったり、動画の切替で1フレーム程度白いものが入って変にフラッシュするような挙動になったり、取得できなかった動画をスキップしまくったりしていました。

追記:
HTTP Live Streaming ですねと教えてもらいました。
http://en.wikipedia.org/wiki/HTTP_Live_Streaming
この方法にはiOS時代になって(Flashがないので・・)一気に普及した方法です。
YoutubeLiveもiOS対応になるのがこのあたりで時間かかった感じだったと思います。
videoタグにもとうとうHTTP Live Streamingがやってきたかというのが胸熱。

2013年5月14日火曜日

日の丸ブラウザはIEコンポーネントという方向に・・


※このエントリは書いてる途中で変な方向に進んでるとわかっていながら書き進めたものになります。

企業内でIE6は使われ続けてもいい。ただアクセスを外に出さないでほしい。
http://bathtimefish.hatenablog.com/entry/2013/05/14/165411

というエントリーをふんふん。確かに出てかなければどうでもいいや。と読んでいたんだが、ある事実に気づいてしまった。
元ネタの記事は


双日システムズ、Windows XPから7/8への移行向けにIE6互換ブラウザを開発
http://news.mynavi.jp/news/2013/05/10/168/index.html

からであり、このニュースを超ポジティブに捉えてみよう。
ニュース記事からの抜粋のため内容は確実ではないが

Internet Explorer互換ブラウザを新規開発
自社開発ブラウザであるためユーザ環境やアプリケーションに合わせた改修も行うことができる
なんと!!新規開発ということはこれは双日システムズさんが

日の丸独自ブラウザを作った
※ただしIE6互換の

ということに他ならないということか!
これは一大事ですよ。

では、プレスリリースちゃんと見みてみよう。

双日システムズ、アプリケーション仮想化の専門組織を立ち上げ、Windows®XP からの移行支援サービスに本格参入
~独自のIE 互換ブラウザでWindows®7/8 へのアプリケーション移行をフルサポート~
https://security.sojitz-sys.com/virtualization/news/pdf/20130510.pdf
双日システムズでは、通常IE コンポーネントブラウザと呼ばれるIE 互換ブラウザを新規開発
 ぬぬ。


IEコンポーネントブラウザ - Wikipedia
http://ja.wikipedia.org/wiki/IE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6
IEコンポーネントに含まれるHTMLレンダリングエンジンの機能を使えるため、新たなHTMLレンダリングエンジンを開発するのに比べると容易にウェブブラウザの開発を行うことができる。
ぬぬ。

これをWebkitのブラウザ達と"文字列上"で比べてみよう。

[ IEコンポーネント ]を[ 利用 ]した[ 双日システムズのブラウザ ]
[ Webkit ]を[ 搭載 ]した[ NetFront Browser NX ]

これはぱっと見一緒ではないか。
やはり日の丸独自ブラウザができたと祝杯をあげるべきという事だな。

うん。
うん。


うん・・・・・・・・・・・・・・・・・。

違う・・。
これは世界に戦いにいけるものではない・・・。