KatsuYuzuのブログ

.NET の開発をメインとした日記です。

Microsoft Azureで描く未来！ in 札幌 CLR/H & Windows女子部 #clrh96 を開催しました。

Community

Microsoft Azureで描く未来！ in 札幌 CLR/H & Windows女子部を開催しました。

Microsoft Azureで描く未来！ in 札幌 CLR/H & Windows女子部

  • AzureでMinecraftサーバー JAZUG札幌 松田さん
  • AzureでIoT CLR/H 吾郷さん
  • スペシャルセッション ジニアス平井の世界
  • ハイパーおやつタイム
  • 私がAWSから学んだこと JAWSUG札幌 佐藤さん
  • スペシャルセッション デプロイ王子
  • LT

togetter.com
去年も来ていただいたWindows女子部の方々と今年も前夜祭～勉強会～富良野ツアーを行いました。僕は今年も富良野ツアーに参加出来ず；－；
今回はクラウドがテーマでしたのでJAWSUG札幌の佐藤さんをお誘いしてお話してもらいました。佐藤さんとは会社の先輩に連れてってもらった飲み会で知り合ってから、OSCや技術系のカンファレンスでご挨拶してもらうなどしていた不思議な縁で、いつかコミュニティでご一緒できたらなーと思っていたので今回叶いました＼(^o^)／
結果的に4?コミュニティの発表があって、これは個人的に嬉しかったです。
内容は今回女子部の活動記録にかなり細かく書いてくださっていました。

angularjsで画面表示時に実行前の式が表示されないようにするng-cloak

TypeScript AngularJS ASP.NET

angularjsで画面表示時に実行前の式が表示されないようにするng-cloak。何も対策せずに実行すると画面表示時に一瞬だけ{{hoge.piyo}}と見えたりします。それの対策。

環境

  • TypeScript 1.4
  • AngularJS 1.4.1

ng-cloak

HTMLで隠したい領域にng-cloakという属性を付けて、CSSの属性セレクターで非表示にするだけです。

<div ng-cloak>
    {{hoge.piyo}}
</div>

[ng-cloak] {
  display: none !important;
}

ng-cloak属性はangularjsのコンパイル時に削除されます。つまり、CSSで非表示にしていた属性が削除され、表示されるようになるということです。

document.titleをangularjsで制御する

似たような事象でdocument.titleで{{hoge.title}}とすると一瞬だけブラウザのタイトルに式が見えてしまいます。これはng-bindを使うことで解決します。

<!--
    angularjs の初期化前に expression が表示されないように初期値と ng-bind の両対応
-->
<title ng-bind="hoge.title">CLR/H ～Cafe～</title>

ソース

github.com

勉強会で紹介しました

clrh.connpass.com

参考

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

TypeScript AngularJS ASP.NET

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

環境

  • TypeScript 1.4
  • AngularJS 1.4.1
  • angular-hotkeys 1.4.5

Angular Hotkeys

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

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>

f:id:KatsuYuzu:20150623012125p:plain

ソース

github.com

勉強会で紹介しました

clrh.connpass.com

参考