_onichannn

【Angular.js】Node用のNicetimeライブラリをAngular用、かつ日本語化してみた。

Nicetimeは時間を渡すと○秒前とか○分前とかに変換してくれるライブラリ。
しかしネット上に転がっているもので日本語のものが無いので、日本語化&Angularのサービス化を

ベースにしたのは下記ライブラリ。というか秒カウントを追加した以外、英語の部分しか変更してない件。

https://github.com/robinduckett/nicetime

coreServices.service('niceTime', function() {
    return function(duration, to) {
        var nicetime = function(duration, to) {
            if (to == null) {
                  return niceify(duration);
              } else if (duration != null && to != null) {
                  var from = duration;
                  var to = to;
                  return niceify(to - from);
              } else if (duration == null && to != null) {
                  var from = new Date().getTime() / 1000;
                  var to = to;
                  return niceify(to - from);
              }
        }
        var niceify = function(duration) {
            var past = false;
            if (duration < 0) {
              past = true;
              duration = Math.abs(duration);
            }
            duration = new Number(duration).toFixed(2);
            
            var durstr = '';
            
            var second = 1,
                minute = second * 60,
                hour = minute * 60,
                day = hour * 24;
            if (duration < minute) {
                durstr = Math.ceil(duration) + '秒';
            } else if (duration < minute * 2) {
                durstr = '1分';
            } else if (duration < hour) {
                durstr = Math.floor(duration / minute) + '分';
            } else if (duration < hour * 2) {
                durstr = '1時間';
            } else if (duration < day) {
                durstr = Math.floor(duration / hour) + '時間';
            } else if (duration < day * 2) {
                durstr = '1日';
            } else if (duration < day * 365) {
                durstr = Math.floor(duration / day) + '日';
            } else {
                durstr = '1年以上';
            }
            
            if (past == true) durstr += '前';
            return durstr;
        }
        return nicetime(duration, to);
    }
});

使い方は下記の通り。
指定した時間からの経過時間を知りたい場合。

// 第1引数にnull、第2引数にターゲット時間の秒数を渡せばOK。
niceTime(null, createdAt.getTime()/1000);

その他の使い方は参考元ライブラリと同様なので、上記の公式リポジトリを参照されたし。

 

【Javascript】でPHPのhtmlspecialchars()を実装する。

stackさんにていいやつを発見。

http://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript

function escapeHtml(text) {
  var map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

h()とかで定義しておくと便利。

 

【Angular.js】aタグのhrefに変数でリンクを埋め込む際、勝手に「:unsafe」がついてしまう場合。

例えば「chrome-extension:」のような独自のプロトコルを埋め込もうとすると、Angularさんは未知のプロトコルとして、自動的に害のないセーフティーな文字列に置換してくれる。
しかしこういった外部アプリケーションをコールするような文字列を意図的に埋め込みたい場合、この機能はとても邪魔になる。

これを回避する方法は下記の通り。
「$compileProvider」を用いてhref属性に含められるプロトコルのホワイトリストを再定義してやればOK。

// 例えばchrome-extensionプロトコルを埋め込みたい場合は下記の通り。
app.config(['$compileProvider', function($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
}]);

これでリンク属性に独自のプロトコルを埋め込むことが出来るようになる。

 

【Angular.js】Facebookのソーシャルパーツを出力してくれるAngularFacebook。

かなりお手軽にいいねボタンなどを出力することが可能。

リポジトリは下記。

https://github.com/boynux/AngularFacebook

例えば、いいねボタン、シェアボタンを出力したい場合は下記のように記述すればOK。

ライブラリを注入した後に、ビュー側でこうする。

<facebook app-id="InsertApplicationIdHnere"></facebook>
<facebook-like share="true" layout="button"></facebook-like>

めっちゃ簡単。

 

【Angular.js】Twitterのツイートボタンを表示してくれるディレクティブ。

Gistでこんなものを発見。

directives.directive('twitter', [
    function() {
        return {
            link: function(scope, element, attr) {
                setTimeout(function() {
                        twttr.widgets.createShareButton(
                            attr.url,
                            element[0],
                            function(el) {}, {
                                count: 'none',
                                text: attr.text
                            }
                        );
                });
            }
        }
    }
]);

下記のようにして使う。

<!-- まずtwitterのウィジェットを読み込む -->
<script src="http://platform.twitter.com/widgets.js"></script>
<!-- そしたらこう -->
<a twitter data-text="{{textHere}}" data-url="{{shareLinkHere}}"></a>

 

【Angular.js/holder.js】ng-viewなどで読み込んだテンプレート内のダミー画像を正常にレンダリングさせる。

holder.jsはお手軽にダミー画像を配置できるのでワイヤー作成時など本当に重宝している。
しかしそのまんまAngularJSと組み合わせただけだと、holder.jsのスクリプトが正常に作動してくれないことが判明。

下記のようなディレクティブを定義してやることで正常にレンダリングすることができた。

app.directive('holderFix', function () {
    return {
        link: function (scope, element, attrs) {
            Holder.run({ images: element[0], nocss: true });
        }
    };
});

これを下記のようにして使えばOK。

<img data-src="holder.js/300x200" holder-fix>

 

【Facebook】のいいねボタンを配置した際に、他のソーシャルボタンと表示位置(高さ)がズレてしまう問題。

ぐぐたすとか、twitterと並べるとFacebookだけどうしても下にずれてしまう。

そんな時は下記のCSSで表示位置を強制してやると幸せになれる。

.fb_iframe_widget > span {
    vertical-align: baseline !important;
}

 

【HTML/CSS】フリーフォントをWebフォント化する方法。

Webサービスを作っていていい加減メイリオにも飽きてきたので調べてみた。

http://www.hirok-k.com/blog/751.html

ら、ここに著作権の問題から作成方法まで全部まとまってた。
結構簡単にできるんだね。これは便利。