（Angular v.4.3.6を利用） 参考 データを取得する レスポンスデータの詳細を見る retry データを送信する Headersを追加 URL Parametersを追加 進捗を確認 応用 Interceptorを利用してヘッダーを追加 Interceptorを利用してログを表示 Interceptorを利用し…

# リモートのブランチを表示 git branch --remote # リモートに存在しない（削除された）ブランチを削除 git fetch --prune

（Angular v.4.3.6を利用） 準備 翻訳対象(HTMLのタグ)にi18n属性を設定 要素を追加しない方法 属性値を翻訳 複数形、代替テキスト ファイル（XLIFF）の書き出し XLIFFファイルについて Serve Build Report missing translations 参考 Angular CLI環境でアプ…

読んだドキュメント NgUpgrade in Depth – nrwl Victor Savkinによる記事。3部構成で仕組みとベストプラクティスについて説明。 こっちを読んでから公式ドキュメントに目を通した方がわかりやすいかも Angular - Upgrading from AngularJS 公式ドキュメント …

ライブラリやレスポンスデータの関係で対応が難しい場合や、他環境にあったファイルを一旦そのまま利用したい場合などに。 https://palantir.github.io/tslint/usage/rule-flags/ // ファイル全体に以下設定を反映 /* tslint:disable:no-null-keyword */ // …

これは何か 基本 レシピ legendを外したい (c-1) 高さを変更したい (c-1) crosshair(照準線)を表示 (c-1) タイトルを非表示にする (c-2) Axisを非表示にする (c-2) どのAxisタイプを利用すべきか Axisに日付を利用したい Axisのタイプにdatetimeを設定 (c-3,…

こんな感じでコンテンツを左右(上下)に配置する時に便利。 以下のような問題（仕様）があるので、Flexboxを入れ子にした場合かつ、上下揃えをした場合は注意が必要。 css - Chrome / Safari not filling 100% height of flex parent - Stack Overflow キャプ…

ブロック要素内のaタグを、要素いっぱいに広げる text-indent: -999px; などでテキストを非表示にする必要がある シンプルにaタグでブロック要素を包む ブロック要素内のテキストがリンクテキストと同じスタイルにならないように調整する（必要ならば） a { …

ブラウザが限られている(Safari, Chrome) そのうち使えなくなるかもしれない heightで制限しているので、対象ブラウザ以外でもレイアウトが崩れることはない、はず .note { font-size: 16px; line-height: 1.25; width: 100px; border: 1px solid #000; over…

こういうやつを作りました。 Node.js用のSlack SDKを利用したら簡単にできました。 GitHub - slackapi/node-slack-sdk: Slack Developer Kit for Node.js 以下、Webhook URL発行前提の話です。 const IncomingWebhook = require('@slack/client').IncomingWe…

例えば#ff0000をrgb(255,0,0)に変換したい場合。 カラーコード（文字列）を2文字ずつに分ける 16進法を10進法に変換する import compose from 'lodash/fp/compose'; import map from 'lodash/fp/map'; function hexToRgb(hex: string): string { return comp…

undefinedを使うべきかnullを使うべきか。コンテキストで使い分けるべきか。 Coding guidelines · Microsoft/TypeScript Wiki · GitHub contributors向けのガイド。undefinedを使えとのこと。 Rule: no-null-keyword TSLintにルールもある。

Event - Web APIs | MDN MouseEvent - Web APIs | MDN KeyboardEvent - Web APIs | MDN HTMLElement - Web APIs | MDN EventTarget <- Node <- Element <- HTMLElement /** * ボタンのdisabled属性を変更 */ public onMouseEvent($event: MouseEvent) { cons…

前回のスタイルガイドに続き、ドキュメント読んで気になる箇所を抜粋。 NgModules Angular modularity The root AppModule Bootstrapping in main.ts Declare directives and components Service providers Import supporting modules Application-scoped pr…

Angular公式のStyle Guideから気になった箇所を抜粋したものです。 Style GuideとNgModulesについての公式ドキュメントを読んだら、実際のアプリを作るときの大枠がある程度整理できました。 ドキュメントはそれなりに長いですが、命名規則など、Angular CLI…

これは何か 前提知識 調べたことメモ Angular CLI Autoprefixer 環境変数 IE9, IE10, IE11対応 ビルド SCSS VS Codeエクステンション よかったチュートリアル これは何か 新機能開発をAngular4で作り始めました。その時に調べたことのメモです。 Angular CLI…

css - Resize to fit image in div, and center horizontally and vertically - Stack Overflow transformとposition: absoluteを利用します。 前の記事のアスペクト比を保つcssを利用するとこんな感じです。 object-fitというプロパティを利用すればもっと…

「padding-topに%を設定すると、包括しているブロックの幅を基準にする」という仕様を利用します。 padding-top - CSS | MDN 以下のコードは、アスペクト比を4:3にする場合。 .a43 { border: 1px solid #000; width: 160px; position: relative; } .a43:befo…

Angular4始めました。 Angularでエラーをインターセプトする場合はこんな感じ。 import { ErrorHandler, Injectable} from '@angular/core'; import { environment } from '../environments/environment'; @Injectable() export class GlobalErrorHandler im…

複数のプロジェクトやライブラリをみる場合に便利。 画像の例は、自分の仕事とAngularとBootstrap4を開いている場合。 // Place your settings in this file to overwrite default and user settings. { "workbench.colorCustomizations": { "titleBar.activ…

class Foo {} class Bar extends Foo {} const foo = new Foo(); const bar = new Bar(); console.log(typeof foo); // -> 'object' console.log(foo.constructor === Foo); // -> true console.log(foo instanceof Foo); // -> true console.log(foo instan…

word-break - CSS | MDN overflow-wrap - CSS | MDN

命名、フォルダ構造、Viewと機能（性質）をごっちゃにしないのは大切ですよ、という反省。 フォルダ構造 ├── components │ ├── baz │ │ ├── abstract │ │ ├── a │ │ └── b │ ├── bazes-container │ ├── main │ │ └── bg │ ├── qux │ │ ├── abstract │ │ ├── …

1年ほど前にまとめたものです。 環境準備 起動 Herokuで動かす HUBOT_HEROKU_KEEPALIVE_URL Google Analyticsの情報を取得 Google Developersの設定 1. APIを有効にする 2. サービス アカウント キーを作成する 認証 補足: Scopeについて Analyticsの設定 1.…

重なり順の制御をしているときに、スタック文脈というものを理解していなかったことに気づきました。 以下の記事がわかりやすかったです。MDNにはいつもお世話になります。ありがたい。 CSS の z-index の理解 - CSS | MDN z-index なしのスタック : デフォ…

（1年前に途中までまとめたもの。こっちに転載。） AngularJS: Notifying about changes from services to controllers - codelord.net を参考にStoreっぽいものを実装しようとした時のメモ // component class FooController { constructor( private $scope…

マルチバイト文字かどうか確認 /** * UTF-8における、1Byte以外の文字かどうか * -> 0-127 (ASCII 文字セット) 以外 */ function hasMultibyte(str) { return /[^\u0000-\u007f]/.test(str); } hasMultibyte('a'); // -> false hasMultibyte('>'); // -> fal…

0. 動機 BigQueryの実行結果を整形・表示・チャート化しやすい環境をつくる ほぼ自分用 1. Nodeからクエリを実行 GitHub - GoogleCloudPlatform/google-cloud-node: Google Cloud Client Library for Node.js 準備 npm install --save @google-cloud/bigquer…

webpack2利用時。 custom-typings.d.ts declare module '*.json' { const value: any; export default value; } foo.ts import * as data from './data.json'; // ... Support shorthand ambient module declarations and wildcard chars in module names · …

便利。（最近まで知らなかった） IEは11以上なら大丈夫。 console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) // → ￥123,457 console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).for…