2015年2月18日水曜日

AngularJSのコードをminify対応にするためのベストプラクティス

AngularJSはDependency Injectionをするので書き方によってはminifyした時にコードが破損してしまう場合がある。

例えばこのようなコードは破損する。

var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope, $location, $interval, $timeout) {
}

ベストプラクティスはこれ。(だと思う)

var app = angular.module('app', []);
app.controller('AppCtrl', ['$scope', '$location', '$interval', '$timeout',  function ($scope, $location, $interval, $timeout) {
}

面倒でもfunctionの引数の定義の通りをfunctionの前に記述する。

このことはAngularJS公式チュートリアルの「A Note on Minification」に書いてあった。

AngularJS: Tutorial: 5 - XHRs & Dependency Injection

こちらにも同じ議論がある。

javascript - Angularjs minify best practice - Stack Overflow

2015年2月17日火曜日

キーボードの記号フォント「Keyboard-JP」(n-yujiさん作)をWEBサイトで使う方法

先日、このような記事を見た。

keyboard-font·キーボードを表現した記号フォント MOONGIFT

元々はn-yujiさんの作品だ。

n-yuji/keyboard-font

ボタンアイコンのツールチップなどでのキーボードショートの説明に使うのにちょうどいいなと思ってWEBサイトで使ってみようとしたが、正常に表示できるようになるまでに意外と苦労したのでログを残しておこうと思う。

まずはデモ(Keyboard-JP Web Example)。こんな感じの表示になる。


苦労した最大のポイントは「リガチャー」の変換がうまくできなかったこと。

「リガチャー」というのは「合字」のことで、例えば上の例だと「POWER」とテキストで指定した場合に電源マークに変換されるようなことを言う。

最終的なフォント指定のCSSはこれ。ポイントは「font-feature-settings」と「text-rendering」プロパティー。


HTMLはこんな感じ。HTML内では左の列と右の列で同じ文字列を入れているが、ブラウザでの表示は異なることがポイント。


その他にどのような文字を使えるかは、n-yujiさんのオリジナルパッケージ内のPDFを見るとわかる。

ほとんどの文字はリガチャーによって変換されるが、一部の文字、例えばMacのコマンドキーマークは右に「U+2318」と記述されている。HTMLでこれを指定するには「⌘」と指定する。

最後に、IEで表示するためにはWOFFファイルが必要だ。OTFファイルを下記のソフトでWOFFに変換する。

WOFFコンバータ - 武蔵ソフト

上のフォント指定のCSS(Keyboard-JP-Regular.css)にはすでにWOFFファイルの記述もしてあるのでIEでも動作を確認できる。

プロジェクト全体はここでダウンロードできる。

junkoro/Keyboard-JP_WebExample