Angular CLIでビルドされたファイルの容量を把握する

把握 --stats-jsonオプションを有効にしてstats.jsonを出力 ng build --prod --stats-json https://github.com/angular/angular-cli/wiki/build webpack-bundle-analyzerを利用 https://github.com/th0r/webpack-bundle-analyzer –build-optimizer 容量の把…

RxJSの各種オペレーターなどをimportする場合

全部をimportしない // 禁止 import 'rxjs/Rx'; ライブラリ全体が読み込まれてしまいます。 TSLintでエラーが出るようにしておくと安全です。 Rule: import-blacklist "import-blacklist": [ true, "rxjs", "rxjs/Rx", ] import用のファイルを用意する rxjs-…

Angular CLIでメインアプリとは別にページ(html)を用意する

stories asset configuration · angular/angular-cli Wiki · GitHub assetsに、対象のhtmlかそれを含むディレクトリを設定する。 "assets": [ "assets", "favicon.ico", "static/test.html" ] これでhttp://localhost:4200/static/test.htmlが利用できる。 …

AngularのDatePipeのlocaleを変更したい場合(タイムゾーンを変更したい場合、も)

起動時にlocaleを設定 LOCALE_IDを設定 DatePipe error when using `navigator.language` as LOCALE_ID with aot · Issue #6618 · angular/angular-cli · GitHub @NgModule({ imports: [ BrowserModule, ], declarations: [ AppComponent ], providers: [ { …

カレンダー生成

生成の流れ 対象月の日数を調べる カレンダー上で、1日の前に何日(何マス)あるか カレンダー上で、最終日の後ろに何日(何マス)あるか カレンダーに表示される日数を調べる 前月、翌月も含んだ数 日数分の配列を生成 chunkする 最終的に[Array(7), Array(…

AngularのPipe

これは何か Angular (4+)を始めたのでドキュメントを読んでいます。今回はPipeについて。 内容は以下ドキュメントからの抜粋のようなものです。 https://angular.io/guide/pipes 公式ガイド 概要 PipeはHtmlテンプレート内でデータを意図した形式に変換する…

AngularのHttpClient

参考 Angular - HttpClient 準備 動作確認を簡単にするために。 https://github.com/typicode/json-server { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ] } json-server --watch db.json データを取得する import { HttpClient…

削除したリモートブランチがローカルで表示される場合

git

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

Angularでi18n

Angular CLI環境でアプリケーションのi18n対応をしました。 準備 翻訳対象(HTMLのタグ)にi18n属性を設定 <h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1> i18n=<meaning>|<description>@@<id> 値は必須ではない メンテナンスを考慮した場合、IDは入力しておいた方がいい(未入力の場合、メッセージがかわるとIDも変わって</id></description></meaning>…

(WIP) NgUpgradeのドキュメント読む

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

TSlintで、特定ファイルや特定行のみ設定を変更したい

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

Highchartsメモ

これは何か 毎回設定方法を忘れるので、逆引き的なメモを残しておきます。 基本 まずは CHART CONCEPTS を確認 Understanding Highcharts | Highcharts など レシピ (実際に動くサンプルは一番下にあります) legendを外したい (c-1) const config = { lege…

FlexboxとAuto marginを組み合わせる

css

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

ブロック要素にリンク(a tag)をつける

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

複数行をTruncate

css

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

ユーザーからのフィードバックをSlackで受け取る

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

カラーコードの変換 (Hex -> RGB)

例えば#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…

null vs undefined

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

MouseEvent, KeyboardEventを利用してHTMLElementを操作

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のドキュメント読む

前回のスタイルガイドに続き、ドキュメント読んで気になる箇所を抜粋。 NgModules NgModuleのコンセプトをチュートリアル形式で説明したもの Angular modularity @NgModuleのmetadata components, directives, pipesの宣言 必要ならば、宣言したものをpublic…

Angular4スタイルガイド読む

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

Angular4さわる

これは何か 新機能開発をAngular4で作り始めました。その時に調べたことのメモです。 Angular CLI使っています。 前提知識 Angular - linkTutorial: Tour of Heroes 調べたことメモ Angular CLI 本家 README GitHub - angular/angular-cli: CLI tool for Ang…

画像を内接リサイズにする

css

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

アスペクト比を保つ

css

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

ウィンドウや他の要素の高さに合わせて、スクロールコンテナの高さを調整

以下画像の、緑の高さをコントロールしたい。 一番左のFlexboxを利用する方法が簡単でよさそう。 並びをカラムに変更 height: 100% と flex-grow: 1 をうまく利用 (以下のコードはjsfiddleとほぼ同じ。) <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <base href="/"> <title></title> </base></meta></meta></head></html>

AngularでBugsnagを利用

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

VS Codeでタイトルバーの色変更

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

TypeScript、型の判定

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, overflow-wrap, word-wrap

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

これをこうした (Viewのリファクタ)

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

Hubotを使ってGoogle AnalyticsのデータをSlackに流す

1年ほど前にまとめたものです。 初botつくりです。 slackhq/hubot-slack · GitHub 環境準備 (公式ページ通りですが) hubot, coffee-script, yo, generator-hubotをグローバル環境にインストールします。 npm install -g hubot coffee-script yo generator-…

z-indexとスタック文脈

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

(WIP) Pub-Sub

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

マルチバイト文字, fromCharCode, charCodeAt, Unicode

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

(WIP) Cloud Node.js Clientを利用してBigQueryのクエリ結果を取得

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

TypeScriptでJSONファイルをimportする

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…

ng-tableさわる

http://ng-table.com/ 準備 webpack×TypeScriptの場合 webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader' }, { test: /\.html$/, use: [ { loader: 'ngtemplate-loader', options: { requireAngular:…

three.jsさわる

The Making of "The Aviator": Animating a Basic 3D Scene with Three.js | Codrops ここのチュートリアルが分かり易い&サンプルがかわいい。

クライアント側でCSV生成してダウンロードさせる

追記: Safariも10.1からdownload属性が利用できるにようになりました。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Browser_compatibility CSVの生成 const arr = [ ['ご利用年月日', 'ご利用"箇所', 'ご,利,用,額'], ['2017/01/29', '',…

Swiftの勉強(SpriteKit)

GitHub - fullstackio/FlappySwift: swift implementation of flappy bird. More at fullstackedu.com がよかった。ありがたいサンプル。 参考Urls オフィシャルドキュメント SpriteKit | Apple Developer Documentation About SpriteKit SpriteKitまとめ(ゲ…

Angular UI-Router v1さわる

環境は angular-ui-router 1.0.0-rc.1。 v0.3からMigrateした 新機能(uiCanExit, lazyLoadなど)も試したみた ドキュメント読んだ About About - UI-Router Core部分の実装をui-router-coreに分けた AngularJS (1.x), Angular (2.0+), Reactもいける UI-Rou…

webpackさわる

環境は webpack 2.2.1。 コード分割 アプリケーション用のjs (app.js)と、ライブラリをまとめたjs (vendor.js)を分割させたい場合。 webpack.optimize.CommonsChunkPluginを使えばおk オフィシャルドキュメント Code Splitting - Libraries [chunkhash]と[ha…

シェルスクリプトを利用して、tsファイルの先頭にimport文を差し込む

tsファイル内に文字列angularが存在する場合、ファイルの先頭にimport * as angular from 'angular;を追加。 # 改行コード LF=$'\\\x0A' # 結果を配列に files=(`find ./client/{app,components} -type f -name "*.ts" -print0 | xargs -0 grep "angular" -l…

GithubのLabel設定 Export, Import

Getting Started | GitHub Developer Guide Create an OAuth token 2段階認証をしている場合。 curl -i -u ${your_username} -H "X-GitHub-OTP: ${your_2fa_OTP_code}" -d '{"scopes": ["repo"], "note": "labels"}' https://api.github.com/authorizations …

テーブルとデータ

これは何か データテーブルを表示する場合、どのようなデータの型が利用しやすいか、について整理してみました。 参考にしたのは以下2つのライブラリ UI Grid DataTables | Table plug-in for jQuery DataTables examples - Ajax sourced data 例 以下のよう…

angular-translate読み直し

半年前にまとめたもの。こっちに転載。 これは何か 実際に仕事でi18n対応した時に調べたことのメモと設定例 https://angular-translate.github.io/docs/#/guide を読んで、必要そうな情報を逆引きっぽくまとめたもの 設定例 /*@ngInject*/ export function t…

タイピングの練習

最近はじめた。仕事の前のウォーミングアップにちょうどよかったりする。 Typing.lk - Learn and practice touch typing

webpack2にした

Migrating from v1 to v2 今の開発環境ではwebpackに任せているタスクが少ないため、かなり簡単に移行できた。 grunt-webpackを利用してるのでこれもv2に変更。 GitHub - webpack-contrib/grunt-webpack: integrate webpack into grunt build process webpac…

ユニットテスト(Karma)もTypeScriptで: karma-webpack編

以前の記事 ユニットテスト(Karma)もTypeScriptで - ryotah’s blog これだと、モジュールのimportができないねえ。 というわけでkarma-webpackを試そうと思います。 GitHub - webpack-contrib/karma-webpack: Use webpack with karma. テスト環境は Karma Ch…