AngularにD3を組み込んでみよう

Angular TypeScript D3

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

ずっと Angular 単独ネタばかり書いてきましたが、ときには別なライブラリと組み合わせてみたくなることがあります。 でも、使いたいライブラリと Angular の相性が必ずしも良いとは限りません。

今日はそんなシチュエーションに遭遇したときのためのお話です。

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

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

Angular RxJS

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

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

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

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

tercel-tech.hatenablog.com

やりたいこと

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

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

続きを読む

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 の左右のマージンを相殺するクラスだということを理解した上で利用しましょう。

では、また。

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

Angular Karma Jasmine RxJS

はじめに

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

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

認証と認可

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

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

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

続きを読む

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

Angular RxJS

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

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

ナイスな導入

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

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

続きを読む

2018年 買ってよかった本10選

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

今年はほとんどブログ投稿をしないまま1年が終わってしまいそうだということに気付きました。

まぁ全く何もなかったかというとそういうわけでもなく、昇進したり、異動したり、僕を採用した担当者が次々と辞めたりとさまざまな出来事がありました。

閑話休題。 今年も「買ってよかった本10選」のコーナーを開催します。 ノミネートの基準は独断と偏見で、紹介順も適当です。

これまではC#案件が多かったのですが、今年は心機一転、スキルセットをフルチェンジしてWeb系に大きく舵を切っています。

それではいってみましょう。

続きを読む

Copyright (c) 2012 @tercel_s, @iTercel, @pi_cro_s.