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