angularjsでショートカットキーを実現してくれるAngular Hotkeys

angularjsでショートカットキーを実現してくれるAngular Hotkeys。githubのショートカットキー諸々と"?"を押した時にでるアレ。

環境

• TypeScript 1.4
• AngularJS 1.4.1
• angular-hotkeys 1.4.5

Angular Hotkeys

• AngularHotkeys.js | Keyboard shortcuts for your angular apps

モジュールを読み込んで、該当のスコープでキーを追加します。

angular.module("app", ["cfp.hotkeys"])

allowInは指定の要素でキーを有効にするかどうか。キーは既定ではINPUT要素で無効になっています。業務系でありがちなファンクションキーを指定する時にはallowInでINPUTを指定しました。

class MainController {

    constructor(
        $scope: ng.IScope,
        $http: ng.IHttpService,
        hotkeys: angular.hotkeys.HotkeysProvider) {

        hotkeys.bindTo($scope)
            .add(
            {
                combo: "s",
                allowIn: ["INPUT"],
                description: "API の呼び出し",
                callback: (event: Event) => {
                    $http.get("api の url")
                        .then(
                        (response: ng.IHttpPromiseCallbackArg<{}>) => {
                            alert(response.data);
                        });
                }
            });

    }

}

オプションでショートカットキーのチートシート（"?"を押したときのヘルプ表示）のオンオフも。

angular.module("app", ["cfp.hotkeys"])
    .config(
    ["hotkeysProvider", (hotkeysProvider: angular.hotkeys.HotkeysProvider) => {
        hotkeysProvider.includeCheatSheet = true;
    }])

オマケ

そのままだとせっかくのショートカットキーも隠し機能になっちゃったりするので、ディレクティブで画面表示できるようにして使ってました。

angular.module("app")
    .directive("appDisplayHotkey",
    ["hotkeys", "$timeout", (hotkeys: angular.hotkeys.HotkeysProvider, $timeout: ng.ITimeoutService) => {
        return {
            link: (
                scope: ng.IScope,
                element: ng.IAugmentedJQuery,
                attributes: any,
                controller: any) => {

                var hotkey = hotkeys.get(attributes.appDisplayHotkey);

                if (!hotkey) {
                    return;
                }

                element.text("[" + (<string>(<any>hotkey).format()[0]).toUpperCase() + "]: " + hotkey.description);

                element.on("click",(e: Event) => {
                    // 画面遷移などを動作させるために UI スレッドで実行
                    $timeout(() => {
                        hotkey.callback(e, hotkey);
                    });
                });

            }
        };
    }]);

<ul>
    <li class="btn btn-default" app-display-hotkey="a"></li>
    <li class="btn btn-default" app-display-hotkey="s"></li>
</ul>

ソース

github.com

勉強会で紹介しました

clrh.connpass.com

参考

• AngularHotkeys.js | Keyboard shortcuts for your angular apps

angularjsで通信中に自動的に読み込みバー、くるくるを表示してくれるAngular Loading Bar

angularjsで通信中に自動的に読み込みバー、くるくるを表示してくれるAngular Loading Bar。youtubeで画面上を走る赤いバーのアレ。

環境

• TypeScript 1.4
• AngularJS 1.4.1
• angular-loading-bar 0.8.0

Angular Loading Bar

• Angular Loading Bar

モジュールを読み込むだけで$httpに連動してバーを走らせてくれます。

angular.module("app", ["angular-loading-bar"])

オプションでくるくるのオンオフ、通信が十分に早い時にバーがうるさくならないようにレイテンシーの閾値設定も。

angular.module("app", ["angular-loading-bar"])
    .config(
    ["cfpLoadingBarProvider", (cfpLoadingBarProvider: any) => {
        cfpLoadingBarProvider.includeSpinner = false;
        cfpLoadingBarProvider.latencyThreshold = 0;
    }])

ソース

github.com

勉強会で紹介しました

clrh.connpass.com

参考

• Angular Loading Bar

SIMフリー Windows Phone 「MADOSMA」 2015年6月18日発売

ついに来たね！なんかクラスタみんなが書きつくしてるし、最近の活動的に眺めてるだけだったけど、テンションあがったもんは仕方ない。予約したよ。

マウスコンピュータ SIMフリースマートフォン MADOSMA MADOSMAQ501WH

micro SIM

以前に買ったSIMを使う時が来た（白目katsuyuzu.hatenablog.jp

OCN モバイル ONE【SMS対応】マイクロSIM 月額1,020円(税抜)~

と、思ったら当時やっていなかった通話対応。MNPで番号も変わらないからdocomoから乗り換えようかなー。スマホ側がしっかりしてるからこその脱2台持ち。

OCN モバイル ONE 音声通話+LTEデータ通信SIM 月額1,600円(税抜)~(マイクロ、ナノ、標準)

アプリコンテスト おでコン

端末かったら@od_10zさんのおでコンにも参加。ちょっと浦島。～2015年8月31日だから何とか頑張る。

• Windows Phone非公式アプリコンテスト - おでコン

その他

そして以前の記事の通りfreetelさんの端末も買ってるのよ。ってことはもちろん出たら買うよね！楽しみ！
WPアーチの端末持ち寄り会はいつだろう。サイトみたらハゲ対策サイトになってた。アンテナ張って飛行機取らなきゃ！