JavaScriptで絵文字を全て削除する

こんにちは。あっきぃです。 iOS9が出ましたね。なんか色々絵文字が増えました。 そこで今回は多分ほとんどの絵文字を削除できるJavaScriptのコードを伝授します。 と言ってもこちらのサイトで知っただけなのですが。 web-emoji/deprecated at master · eirikhm/web-emoji var text = ‘😀絵😁文😂字😃だ😄よ😅!😆’;var ranges = [        ‘\ud83c[\udf00-\udfff]’,        ‘\ud83d[\udc00-\ude4f]’,        ‘\ud83d[\ude80-\udeff]’,        ‘\ud7c9[\ude00-\udeff]’,        ‘[\u2600-\u27BF]’];var ex = new RegExp(ranges.join(‘|’), ‘g’);text = text.replace(ex, ”); //ここで削除 alert(text); //絵文字だよ! 便利♪

View More

iPhoneで時々Tweetボタンが表示されない時

こんにちは。 最近近くのコンビニは「取り出すのにお金が掛かる自分の冷蔵庫」と考えるようにしました。 さて、冷蔵庫と言えばTweetボタンですが、最近なんだかiPhoneで表示されない時がしばしば。 原因は謎ですが、最新コードと差分があったので書き直します。 ⇒ Twitter Buttons Generator いままで(JS部分) !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=” //platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”); 新しいの(JS部分) !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’: //platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’); なんかtestとか気になる関数が追加されてます。 こちらに変更したところばっちぐーで表示されるようになりました。めでたし。 要するに あれ?なんかおかしいなと思ったら本家のサイトからコードを取得し直すと良いカモ。ということです。 ⇒ Twitter Buttons Generator ではでは。

View More

setTimeoutの削除【JavaScript】

ボタンを押したら3秒後にアラートを出すなんてブロックを用意します。 ボタン1 コードはこんな感じ。jQuery使ってます。 $(‘#btn’).click(function(){        setTimeout(function(){                alert(‘あっきぃだよ!’);        }, 1000 * 3);}); setTimeoutで3秒後にアラートだぜ。いい感じだぜ。と思いきや、これだとボタンを連打すると、その数だけアラートが出てしまいます。 それは良くないことが起こりそうなので、clearTimeoutで連打を阻止しましょう。 var timer;$(‘#btn’).click(function(){        clearTimeout(timer);        timer = setTimeout(function(){                alert(‘あっきぃだよ!’);        }, 1000 * 3);}); ボタン2 これで最後にボタンを押してから3秒後にアラートになります。 もしも、最初にボタンを押してから3秒後にアラートにしたい場合は、こんな感じに。 var timer;$(‘#btn’).click(function(){        if(!timer) {                timer = setTimeout(function(){                        alert(‘あっきぃだよ!’);                        timer = null;                }, 1000 * 3);        }}); ボタン3 timerになんか入っているかどうかで判定します。 ばっちぐー

View More

YouTubeのURLをJavaScriptで自動で埋め込みプレイヤーにする

極秘で運営している「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個集めました。 そんでもって「今日の猫動画」なるものを作成しました。 ⇒ […]

View More

iOS8 スクロールするとリサイズイベントが呼ばれるので

こんにちは、あっきぃです。 最近少し暖かくなってきた気がします。 そして北の国からのストーリーがよく分からないです。 さて、iOS8でスクロールすると何故かリサイズイベントが呼ばれてしまいます。 Safariのヘッダーが引っ込んだり、出て来たりした時に呼ばれる仕様になったようです。 作業していたアプリは、リサイズ時にCanavasでゴリゴリ図を描く処理を走らせていたので少し厄介。 そんな訳でこうしました。 var windowWidth = $(window).width();$(window).resize(function(){        var ww = $(window).width();        if(windowWidth != ww) {                 //リサイズ時に実行する処理                 windowWidth = ww;        }}); 横幅が変わった場合に呼ぶようにしました。 これで安心。

View More

iTunes、App StoreへのリンクがSafariで開けないとき

iTunes(App Store)へのリンクを一括管理したいからリダイレクトさせてるんだけどiPhoneのSafariからだと開けないなんてことがあります。aタグにtarget=”_blank”を設定してるとダメみたい。 じゃぁ外せばいいじゃん と思われるかもですけど、「はずすとサイトから離脱しちゃうじゃまいか」とか「呪われているので外せません」的な理由があってはずせなかったり。 例としてかみあぷのWebサイト(http://www.appps.jp/)のリンクを見てみましょう。 マンガボックスのところのボタンとアイコンの2つにiTunesへリダイレクトするリンクがついているのですが、アイコンの方にはtarget=”_blank”が入っています。ですのでSafariでアイコンの方をタップすると、 ガショウィーン、サッ、ピタッと真っ白なページで止まってしまいます。これはくまったくまった。売り上げにも影響しそうですね。 さてこれを半ば強引に解決する方法をさきほど発見しました。独自にリダイレクトしている方用とbitlyなどの短縮URLを使ってる方用のがあります。 自分でリダイレクトしている場合の解決方法 PHPだったら、 header(“Location: https://itunes.apple.com/jp/hoge/id00000?mt=8&uo;=4&at;=XXXXX”); みたいなことをやってると思うのでそのあとにJavaScript function sleep(time) {        var t1 = new Date().getTime();        var t2 = new Date().getTime();        while(t2 < t1 + time) {                t2 = new Date().getTime();        }        return;}sleep(500); を出力します。PHPだとこんな感じ header(“Location: https://itunes.apple.com/jp/hoge/id00000?mt=8&uo;=4&at;=XXXXX”);echo ‘<script>function sleep(time) {var t1 = new Date().getTime();var t2 = new Date().getTime();while (t2 < t1 + time) {t2 = new Date().getTime();}return;}sleep(500);</script>’; OSを判定してiOSだけのときに出すと良いですね。 何をしているかというと0.5秒スレッドを停止させています。sleepって奴です。新しくページを開いたあとにスレッドを少し停止させるとちゃんとiTunes、App Storeへ遷移するのです。 なぜかって? 知らないよーん。 さて次 短縮URLサービス使っているのでサーバーサイドいじれない場合の解決方法 最初にあげたかみあぷの例ですね。aタグの中にonclickでこんなJavaScriptをしかけましょう。 <a href=”http://bit.ly/hoge” target=”_blank” onclick=”setTimeout(function(){ sleep(500); }, 100)”>App Storeへ!</a> sleepは先ほど用意したものです。リンクをタップした後、setTimeoutで0.1秒遅らせてから0.5秒スリープさせます。こうするとちゃんと遷移します。 なぜかって? 知らないよーん。 さぁこれでかみあぷもほんの少し売り上げが上がるはず。お礼にあっきぃの作ったiPhoneアプリを取り上げてくださいな〜。 […]

View More