今回のテーマ
- D3; Data-Driven Document とは
- 題材サンプル
Angular + TypeScript で書き直す
- 開発環境（ライブラリのバージョン）
- 実装例
Angular ならではのポイント
- DOM 操作対象の HTML 要素にランダム ID を与える
- svg の width, height は属性attributeバインディングを使う
- selectAll() できちんと型引数type argumentsを明示しないと merge() で怒られる
- svg 配下の要素に CSS を適用する場合は、スタイルのカプセル化を切る
まとめ

2019-06-17

AngularのGuardの中で、遷移元のパス (URL) を取得したい

Angular RxJS

こんばんは。たーせるです。

ついに@ngrxもバージョン8 になりましたね。

#ngrx のバージョンが上がり、いくつか破壊的な変更が発生している。むしろなぜ今まで、あの冗長なActionの書き方が許されていたのか。 pic.twitter.com/hS9MKkvRaX
— たーせる (@tercel_s) 2019年6月15日

正直、@ngrxはSingleS PageP ApplicationsAにおける状態管理ライブラリとしては永ながらくvuexの後こう塵じんを拝してきた感がありました。しかし上記のツイートからも判る通り、今回はなかなかどうして本質的なコーディングに集中できるようAPIが洗練されたなぁと思いました。

閑話休題。 今日の記事は、こちらの続きになります。

tercel-tech.hatenablog.com

やりたいこと

Guardの中で、遷移元のパス (URL) に応じて認可の可否を制御したい。そのために遷移元のパスが何だったのかを調べたい！

もう少しだけ具体的に申しますと、直リンクを禁止したい（必ず特定のページを経由してアクセスさせたい）ような場合に使えるテクニックをご紹介したいと思います。

2019-06-07

Bootstrap4 の .container を部分的に無効化する

おはようございます。たーせるです。

ついに Angular のバージョンが 8 になりましたね。おめでとうございます。おめでとうございます。

さて、最近はよく Bootstrap で遊んでおります。非常にベタな CSS フレームワークですが、それなりに見栄えのするページを手っ取り早く作れるので大好きです。

youtu.be

Bootstrap の .container を部分的に無効化する

Bootstrap を用いたレイアウトには 2 つの流儀があります。

1 つはページ全体を .container で包んだ「固定幅レイアウト」、もう 1 つは .container-fluid で包んだ「流動レイアウト」です（→公式ドキュメント）。

ぼくは前者を好んで使いますが、時々「ページの途中にある一部のコンポーネントだけはどうしても .container の枠を無視したい」というケースに遭遇することがあります。

基本は固定幅レイアウトでいいんだけど、ここだけは .container に押さえつけられず、横幅いっぱいにしたい……という。

例:

<div class="container">
  (略)
  <div>
    <!-- ★ここだけ、.container を無効化したい★ -->
  </div>
  (略)
</div>

ソリューション:

そんなときは .container のマージンを打ち消してしまいましょう。

ここでは、.container-cancellation というクラスを以下のように定義しました。

styles.css

.container-cancellation {
  margin-left : 0;
  margin-right: 0;
}

@media screen and (min-width: 576px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 540px));
    margin-right: calc(-0.5 * (100vw - 540px));
  }
}

@media screen and (min-width: 768px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 720px));
    margin-right: calc(-0.5 * (100vw - 720px));
  }
}

@media screen and (min-width: 992px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 960px));
    margin-right: calc(-0.5 * (100vw - 960px));
  }
}

@media screen and (min-width: 1200px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 1140px));
    margin-right: calc(-0.5 * (100vw - 1140px));
  }
}

Bootstrap のブレークポイントごとに、.container を相殺するため、左右に負のマージンを設定しています。

これを適用した <div> タグは、常に横幅いっぱいに表示されます。

<div class="container">
  (略)
  <div class="container-cancellation">
    <!-- ★ここだけ、.container を無効化したい★ -->
  </div>
  (略)
</div>

注意点:

この .container-cancellation は、必ず .container が直接内包する <div> に適用してください。

.container の外側で単独利用すると、ウィンドウを突き破ってしまいます。

また、.row や .col-2 などの中に書くのも NG です。あくまで、.container の左右のマージンを相殺するクラスだということを理解した上で利用しましょう。

では、また。

2019-05-22

Angularで認可制御（同時上映: Jasmineによるユニットテスト）

Angular Karma Jasmine RxJS

はじめに

この記事は、Qrunchに投稿した記事¹⁾²⁾を、はてなブログ向けに再編集したものです。

アプリケーションのコンテンツをユーザに開示するかどうかを制御する仕組みの実装方法と、そのテストに関する手法を取り上げます。

認証と認可

よく混同される概念ですが、認証とは「その人が誰なのかを確認すること」、（狭義の）認可とは「リソースに対してアクセス権を与えること」です。

たとえばログイン処理のように、ユーザIDとパスワードを入力させて、『この人は鈴木一郎さんに違いない！』という判定を下すのが認証。

『この人は管理職ロールを持っているから、××機能に対するアクセスを許可しよう』とか、『キャンペーン期間中だけ特設ページへのアクセスを許可しよう』という仕掛けが認可です。

2019-05-20

僕が適当に考えたAngularの連打防止制御

Angular RxJS

超お久しぶりです。たーせるです。

どういうわけか疲労極まっており、いろいろ端折っております。それでもなんとか書き留めておきたいので、ここに残しておくことにします。

ナイスな導入

今日は、Angular で Submit ボタンを連打されないようにするにはどうすればよいか考えてみたいと思います。

やりたかったことは、Angularで多重送信を食い止める仕組みを作ること。

① HttpInterceptorの入り口で、パラメータの HttpRequestをハッシュ化し、非同期通信が解決するまでどこかに保持しておく。

② 既に同じハッシュ値がいたら、多重送信とみなして通信をキャンセルする。
— たーせる (@tercel_s) 2019年5月20日

……というのが、基本的な思想になります。