極秘で運営している「SHINDAN.in」というものがあります。 名前診断を作成するサイトです。そしてよく考えたら極秘ではなかったです。 ただ名前診断で結果を出すだけじゃ、なんだかありきたりでインパクトがないような気がするので、今日は診断結果にYouTubeのURLを入れると埋め込みプレイヤーに変換するようにJavaScriptで実装したいと思います。 1.難しい話じゃない ぱっと見難しいような気がしますが、そんなことはありません。 要するに… こんなURLを検知して、 こんな風に埋め込みプレイヤーのコードに変換するだけなのです。 <iframe src=”http://www.youtube.com/embed/6CKZgIYJa3o” frameborder=”0″ allowfullscreen></iframe> 2.注意点 YouTubeのリンクは主に2種類あります。 このようにGET値がついた通常のURLと、 YouTubeが提供している短縮URLです。 このどちらにも対応したコードを書きましょう。 3.いざ実装 えいやっ //HTMLデコードする関数var decodeHTML = function(str) {        var decoded = $(“<div/>”).html(str).text();        return decoded;}; //PHPで言うpreg_match_allをやってくれる関数var preg_match_all = function(regex, haystack) {        var globalMatch = haystack.match(regex);        var matchArray = new Array();        for(var i in globalMatch) {                try {                        var nonGlobalRegex = new RegExp(regex);                        var nonGlobalMatch = globalMatch[i].match(nonGlobalRegex);                        matchArray.push(nonGlobalMatch[0]);                } catch(e){}        }        return matchArray;}; //URLからGET値のKeyを指定したら取って来てくれるvar getParameterByName = function(name, url) {        var query_string = url.split(“?”);        if(query_string.length >= 2) {                var params = query_string[1].split(“&”);                var i = 0;                while(i < params.length) {                        var param_item = params[i].split(“=”);                        if(param_item[0] == name) return param_item[1];                        i++;                }                        }        return “”;}; //YouTubeの埋め込みvar youTubeEmbed = function(text) {        var URLs = preg_match_all(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, text);        for(var i = 0; i < URLs.length; i++) {                var url = URLs[i];                if(url.match(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\/)?(.+)/g)) { //YouTubeのリンクかどうか判定                        var youTubeId = getParameterByName(‘v’, decodeHTML(url));                        if(youTubeId == ”) youTubeId = url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\/)?(.+)/g, ‘$1’);                        youTubeId = (youTubeId.split(‘#’))[0]; //時間指定を消す。（残したい場合はこの処理いらないよっ）                        text = text.replace(url, ‘<iframe src=”http://www.youtube.com/embed/’+youTubeId+’” frameborder=”0″ allowfullscreen></iframe>’);                }        }        return text;}; こんな感じ。 関数名やコメントアウトを見れば意味は分かると思います。 （正規表現についてはじーっと見てればそのうち分かる気がする今日このごろ。） ちゃんと動くかどうか試してみます。 var text = ‘https://www.youtube.com/watch?v=6CKZgIYJa3oというリンクとhttp://youtu.be/6CKZgIYJa3oというリンクです。’;console.log(youTubeEmbed(text)); 結果は <iframe src=”http://www.youtube.com/embed/6CKZgIYJa3o” frameborder=”0″ allowfullscreen></iframe>というリンクと<iframe src=”http://www.youtube.com/embed/6CKZgIYJa3o” frameborder=”0″ allowfullscreen></iframe>というリンクです。 どちらのURLでもちゃんと変換できました。 ばっちぐーです。 4.サイトに乗せる CSSでプレイヤーのサイズを統一したいので<iframe>を<div>要素で囲みました。 そして猫のYouTubed動画を100個集めました。 そんでもって「今日の猫動画」なるものを作成しました。 ⇒ […]