$yanutetsu->{blog}

プログラマ三大美徳なPM

Manage It! 現場開発者のための達人式プロジェクトマネジメント 読了

やぬてつです。

「Manage It! 現場開発者のための達人式プロジェクトマネジメント」読み終わりました。 1週間半位かかったかなー

プロジェクトに必要なものをプロジェクトの開始から終了までを通してレクチャーする形の内容でした。 特にはじめと終わりに重点があるように感じました。(それだけはじめと終わりが疎かなのかもしれません) もちろんプロジェクトの運用についても勉強になることばかりでした。

基準を決めることが大切なのかな。

はじめにプロジェクト憲章を設定することや終了の条件を決定することが重要であると書いてありました。 それらの基準を明確にすることで、実際のプロジェクト運営中の舵取りをどうしたら良いか判断がつくようになるということだったと思いました。

実際にPMをやっていてどこに向かったら良いのかわからないってことが多々あるんですが、思い返してみるとそういう時って始まりや終わりの基準が決まっていなかったような気がします。なぁなぁで初めてしまってなぁなぁで終わりにしていたような...

この基準を決めることでモヤっとしていたものが明確になってやっとコントロールができるようになるのでは無いかと思いました。

なんとなくPMが何をしなければならないのかわかってきた気がします。

www.amazon.co.jp

アジャイルサムライ読了

やぬてつです。

アジャイルサムライ読了

アジャイルって一体何なのか理解していなかったけど、これで完全に理解できした。 専門用語が色々出てくるけど、本来必要とされるものはあまり変わらない印象だった。 プロジェクトへのアプローチの違いという感じでしょうか。

自分が実践しているものがアジャイルでよく使われている方法だとは思っていませんでした。 今回この本を読むことで「すでにアジャイルな感じで開発してたんだなー」と自覚しました。

知識を整理することができてとても有意義でした。 まだ読んでないようであれば是非読んでみてください。

「ライト、ついてますか ー問題発見の人間学」読了

やぬてつです。

ライト、ついてますか ー問題発見の人間学 読了しました。 読みかけになっているのを思い出して、最初から読み直しました。

問題を見つけるための物事の見方を教えてくれるような感じでしょうか?読んでいて色々と気づきがありました。 常に本質は何かな?ということを考えてから行動するようにしています。なのでこういう本は結構好きです。 言い回しが少し難しくて私は解釈に時間がかかりました。 頑張ったんだけどなんだか振り回されちゃったなーとかいうことが多々ある人は読んでみると良いかもです。

version up from Angular 7 to 8

やぬてつです。 この記事は Angular 利用している人(自分)をターゲットにしています。

スーパー良いタイミングだったので Angular のバージョンをあげることになりました。機能実装に忙しくてあまりバージョン管理ができていない今日この頃ですが、ジャストタイミングだったのでこの機会にがっつりバージョンをあげてしまいたいと思います!

まずは公式ドキュメントを読んでバージョンアップの流れをつかみます。 https://update.angular.io/

Angular Version は 7.2 から 8.0 を選択

App Complexity は Basic かな?

Other Dependencies で I use Angular Material の欄にチェックを入れます

Package Manager に npm を選択します。

これで Show me how to update! をクリック!

すると手順が表示されますので、これに従ってアップデート作業を行なっていきます。(めっちゃ便利ですね)

公式ドキュメントに従ってコマンドを叩いてみた

(*'-') < ng update @angular/core
                  Package "@angular/cdk" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0-beta.0 <7.0.0" (extended), would install "8.0.0").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
Incompatible peer dependencies found. See above.

なんかワーニングだかエラーだかどてますね... git diff で package.json を確認しても更新されていないようです。(むむっ

なんやかんやで 使ったコマンド

(*'-') < ng update @angular/core --force

                  Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
                  Package "@angular/cdk" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0-beta.0 <7.0.0" (extended), would install "8.0.0").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
    Updating package.json with dependency @angular/compiler-cli @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/language-service @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/animations @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/compiler @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/common @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/forms @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/core @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency zone.js @ "0.9.1" (was "0.8.29")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/router @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/platform-browser @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency rxjs @ "6.5.2" (was "6.3.3")...
UPDATE package.json (1544 bytes)
npm WARN @angular/cdk@6.4.7 requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@6.4.7 requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/core@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/platform-browser@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@6.4.7 requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@6.4.7 requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@7.3.9 requires a peer of @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@7.3.9 requires a peer of typescript@>=2.4.0 < 3.3 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/http@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.3.0 requires a peer of @angular/compiler@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.3.0 requires a peer of @angular/core@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.

added 23 packages from 11 contributors, removed 77 packages, updated 20 packages and audited 42599 packages in 37.471s
found 0 vulnerabilities

            ------ Static Query Migration ------
            With Angular version 8, developers need to
            explicitly specify the timing of ViewChild and
            ContentChild queries. Read more about this here:
            https://v8.angular.io/guide/static-query-migration
            ------------------------------------------------


UPDATE src/app/present-box/present-box.component.ts (11942 bytes)
UPDATE src/app/user-list/user-list.component.ts (874 bytes)
UPDATE src/app/user-info/user-info.component.ts (1856 bytes)

しかも自動で ViewChild のところも直してくれる!(すごっ アップデート手順ドキュメントを読んでいるときはこれを自分で修正しなければいけないのか〜って思ってたんでマジ神です!

え!そんな便利コマンドあるの?って感じでもう一度 update コマンドを実行

(*'-') < ng update --all --force
                  Package "ng-pick-datetime" has an incompatible peer dependency to "@angular/cdk" (requires "^7.0.0", would install "8.0.0").
                  Package "angular-in-memory-web-api" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0 <8.0.0", would install "8.0.0")
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.1")
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.1").
    Updating package.json with dependency jasmine-core @ "3.4.0" (was "2.99.1")...
    Updating package.json with dependency karma-jasmine-html-reporter @ "1.4.2" (was "0.2.2")...
    Updating package.json with dependency karma-jasmine @ "2.0.1" (was "1.1.2")...
    Updating package.json with dependency codelyzer @ "5.0.1" (was "4.3.0")...
    Updating package.json with dependency @types/jasmine @ "3.3.13" (was "2.8.16")...
    Updating package.json with dependency @angular/cdk @ "8.0.0" (was "6.4.7")...
    Updating package.json with dependency tslint @ "5.17.0" (was "5.11.0")...
    Updating package.json with dependency @angular/material @ "8.0.0" (was "6.4.7")...
    Updating package.json with dependency @types/gapi.auth2 @ "0.0.50" (was "0.0.48")...
    Updating package.json with dependency ts-node @ "8.2.0" (was "7.0.1")...
    Updating package.json with dependency angular-in-memory-web-api @ "0.8.0" (was "0.6.1")...
    Updating package.json with dependency core-js @ "3.1.3" (was "2.6.5")...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.800.1" (was "0.13.9")...
    Updating package.json with dependency @angular/cli @ "8.0.1" (was "7.3.9")...
    Updating package.json with dependency @types/node @ "12.0.4" (was "8.9.5")...
    Updating package.json with dependency typescript @ "3.5.1" (was "3.4.5")...
UPDATE package.json (1545 bytes)

> core-js@2.6.9 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"


> core-js@2.6.9 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/karma/node_modules/core-js
> node scripts/postinstall || echo "ignore"


> @angular/cli@8.0.1 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/@angular/cli
> node ./bin/postinstall/script.js


> core-js@3.1.3 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/core-js
> node scripts/postinstall || echo "ignore"

npm WARN @angular/compiler-cli@8.0.0 requires a peer of typescript@>=3.4 <3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/core@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/platform-browser@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular-devkit/build-angular@0.800.1 requires a peer of typescript@>=3.1 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@8.0.1 requires a peer of typescript@>=3.4 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

added 70 packages from 47 contributors, removed 123 packages, updated 130 packages, moved 11 packages and audited 19021 packages in 94.447s
found 0 vulnerabilities

    ** Executing migrations for package '@angular/cli' **
DELETE src/browserslist
CREATE browserslist (388 bytes)
UPDATE tslint.json (2857 bytes)
UPDATE package.json (1514 bytes)
UPDATE src/polyfills.ts (3266 bytes)
UPDATE tsconfig.json (411 bytes)
UPDATE src/tsconfig.app.json (166 bytes)
UPDATE src/tsconfig.spec.json (256 bytes)
npm WARN @angular-devkit/build-angular@0.800.1 requires a peer of typescript@>=3.1 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/compiler-cli@8.0.0 requires a peer of typescript@>=3.4 <3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@8.0.1 requires a peer of typescript@>=3.4 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.

removed 1 package and audited 19019 packages in 11.22s
found 0 vulnerabilities

    ** Executing migrations for package '@angular/material' **
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/add-items-dialog/add-items-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/add-user-dialog/add-user-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/ban-user-dialog/ban-user-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/battle-divert-user-list/battle-divert-user-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/battle-history/battle-history.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/confirm-dialog/confirm-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/currency-info/currency-info.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/currency-purchase-list/currency-purchase-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/gacha-detail-log-dialog/gacha-detail-log-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/gacha-log-list/gacha-log-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/input-number-dialog/input-number-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/present-box/present-box.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/system-configs/system-configs.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-add-samples-dialog/user-add-samples-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-add-samples-menu/user-add-samples-menu.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-detail/user-detail.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-list/user-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-ranking/user-ranking.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-search/user-search.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-server-time/user-server-time.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/app.module.ts

  ✓  Angular Material update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.

  ✓  Angular Material update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.
    ** Executing migrations for package '@angular/cdk' **

  ✓  Angular CDK update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.

  ✓  Angular CDK update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.

これでコマンドとしては完了かな?

Angular Material 関連の import 文も自動で変更してくれた!マジ神!

今回 Lazy Loading は利用していないので、手順にあるアップデート作業はこれで終わりかな?

まとめ

Agnular 7 から 8 へのアップデートはとても親切でともてスムーズでした。めんどくさくならないうちにシュッてやってしまった方が良いかもです。

Google Sign-in ボタンが Angular で時々表示されない

やぬてつです。 この記事は Angular 8 をターゲットにしています。

問題

今まで問題なく動いていると思っていたのだけれど、時々ボタンが表示されない現象が起きた。

調査

stack overflow にこんな記事があった。 https://stackoverflow.com/questions/32625970/google-signin-button-in-angularjs-sometimes-does-not-show-up

これは AngularJS なので Angular に対応させる必要がありそう。

タイミングの問題かな?と思って ngOnInitに書いたり、 ngAfterViewInit に書いたりしたが、結果はあまり変わらなかった。 どこに書いたらいいのだろうか?タイミングの問題じゃない?

特殊な書き方をしているところは window[] を利用しているところなので、ここをいじってみる。

window['onSignIn'] = (user) => ngZone.run(() => this.authService.onSignIn(user).then(() => this.redirect()));

これをこうしてみた。

gapi.signin2.render('signin-button', {
  'scope': 'profile email https://www.googleapis.com/auth/admin.directory.group.readonly',
  'longtitle': true,
  'theme': 'dark',
  'onsuccess': googleUser => this.ngZone.run(() => this.authService.onSignIn(googleUser).then(() => this.redirect())),
});

一緒にボタンのカスタマイズもこのタイミングで行うように変更した。

まとめ

何が原因かはわからないが、これでなんとかなった。

Angular で Did you add it to @NgModule.entryComponent? って言われた

やぬてつです。

この記事はAngularでDialogを作成しようとしている自分自身に向けて書いています。

調べたら以下のリンクで解決しました。

stackoverflow.com

ルーティングに登録されていないコンポーネントは declarations に入れなくちゃいけないんだっけか?

この1年間どんな英語の勉強をしてきたか

やぬてつです。

この記事は英語学習 Advent Calendar 2018 - Adventarの21日目の記事です。

この1年間の英語の勉強の内容を書いていきます。

この1年間はラジオ英会話をメイン教材として学習していました。今までは瞬間英作文をメインとした学習をしていましたが、暗記してしまいがちであることと、もっと文法を武器にしたいと考えて、メインの学習をラジオ英会話にしました。

ラジオ英会話は以下の方法で利用しました。

  • テキストを見ない状態で3回以上リスニングする
  • テキストを15回以上音読する
  • テキストを見ないで15回以上リピーティングする
  • 空き時間があったらリピーティングする

これを4月からずっと続けてきました。

効果はとしてはだいぶ英語に慣れてきたって感じですね。英文の流れがかなり自然に感じるようになってきました。 技術ドキュメントも半分くらいは翻訳にかけないで読んでいるくらいでしょうか。ほんとだいぶ読めるようになってきたなーって感じです。

あとは息抜きに英語の番組を見るようにしていました。ゲームオブスローンズとかシリコンバレーとか、HBOばかりですね。英語字幕が出ると最高なんですが、日本語字幕で見てました。少しでも英語に触れている時間を長くしようとしてました。

やらなければならないことはまだたくさんあるけれど、できることから少しずつ続けることを第一の目標にやってきました。来年も1歩ずつ進めていこうと思います。