XP祭り2017に参加しました
XP祭り2017に初参加しました。
登壇者の方々、エクストリームでした。
2002年から開催されているイベントということで、XPの精神が根付いているんだなぁと感じました。
【基調対談】ワークスタイル改革を実践者する二人が、働き方の本質を語る (青野 慶久さん、倉貫 義人さん)
お二人ともパーカースタイルというラフな感じが印象的でした。
基調講演始まりました!#xpjug pic.twitter.com/JuwkG5um9M
— xpjug (@xpjug) 2017年9月16日
働いている人たちに本当に良いと思ったことをやっていたら、社員が活き活きと働く会社になっていたという話で、青野さんが言っていた社員が出ていくような会社は魅力がないので、会社をやめるということが印象的でした。
副業をしたり、コミュニティに参加したりして、自分の見聞を広げることが今の活動に繋がっているというのも印象的でした。外の世界には活き活きと仕事をしている人たちがいることを知れたことが良い経験になったということで、そういう人たちから学ぶことができると良い方向に向かっていくのだなぁと感じました。
また、IT活用が進んでいく中で、旧来の仕事のスタイルからの変革が起こっているという話も印象的で、例えば、事務をやっていた人がkintoneを使って自分たちの業務が楽になるシステムを作ってしまったという話がありました。
ITの世界だと今までできなかったことがアイデア次第ではできるようになってきているので、今までの仕事の価値がいつの間にかなくなることもあるんだろうなと感じました。
DevOps時代のプロジェクトマネジメントを考えよう (森實 繁樹さん)
プロジェクトマネージャーのあり方は今後変わっていくのだろうと確信する発表内容でした。
今までの決められたことを作るだけのプロジェクトから売れるものを作らないといけないプロジェクトになりつつあるというのがその背景で。
従来のプロジェクトマネージャーはプロダクトをマネージメントすることに注力する必要があるということでした。これは大きな変革だと思いました。求められるスキルも全然違うので。
その分、チームメンバーはお互いにセルフマネージメントが必要になるので、自分のような開発者の立場からするとマネージメントのスキルを身につけていく必要があるなぁと感じました。
全ては Fearless Change から学んだ,開発組織の変革を支えた実践的アプローチ (吉田 慶章さん)
軽快なトークで聞いていて面白いなぁと感じる発表でした。
組織変革には興味があるので、実践的な内容で非常に参考になりました。
「達人を味方に」のパターンは、あまり周りに達人っぽい人がいない環境なので、勇気が入るなと個人的には思いましたが、やれたらすごい効果的なんだろうなとも思いました。機会を作ってやってみたいと思いました。
前セッションの開発者の立場でもマネージメントが必要という中で、参考になる内容でした。
xUTPから学ぶ、記述性の高いユニットテスト (高橋 陽太郎さん)
日本語のメソッド名にしてテストケース名を分かりやすくするというテクニックは使ってましたが、データ初期化メソッドも日本語名にするというのは思いつきませんでした。テストコードの可読性を高めるには色々やり方があるなーと感じました。
JUnit5も出たので、これを機にテストコードを再考してみたいと思いました。
シンプルデザインについて (渋川 よしきさん)
最近、ソフトウェアパターンを学んでいるので、渋川さんのパターンに対する見解は興味深かったです。
パターンはそれ単体というより、組み合わせてランゲージにすることによって、より他者との共通理解を生むものなので、それを意識してパターン化できればと思いました。
フォースはその時の状況に左右されるので、一般化するには弊害があるという意見が斬新でした。そのパターンがどの文脈で使われるかを意識してパターン化できると良いのだなぁと思いました。
濃い質疑応答のススメ ~質問には質問で返してみよう~ (和田 憲明さん)
ワークショップ形式で体験しました。
質問を質問で返すことによって、質問者の気づきを促すことができるというのが本質だと思いました。
命令型のリーダーではなく、サーバントリーダーのような支援型のリーダーに有効なテクニックだなと思いました。
何かを伝える時にその人の納得感が得られる形で伝えられる良い方法だと思いました。
LT祭り&クロージング
LT祭りは面白かったに尽きます。これは現場にいないと分からないと思います。
XP祭りの名物コーナーということで、何か完成された盛り上がりがありました。
本当にエクストリームでした。
初参加枠ということで、XP祭りへの寄贈本をいただきました。
ありがとうございます。
Auth0 + Angularでの認証機能実装
Auth0を利用して、Angularで作成したアプリに認証機能を実装してみました。
Auth0のドキュメントにAngular向けのQuickStartがあるので、そのまま実装すればAuth0を利用できます。
Auth0 Angular 2+ SDK Quickstarts: Login
今回はAuth0で用意されているログイン画面の利用と認証後に扱うことが可能なユーザ情報の表示をやってみました。
ログイン
Auth0 Angular 2+ SDK Quickstarts: Login
つまずくポイントとしては、Auth0のログイン画面から戻ってきた場合にルートコンポーネントのコンストラクタが呼ばれることです。
ngOnInitメソッドは呼ばれないようです。
下記のようにルートコンポーネントで認証後の処理を行なっています。
import { Component } from '@angular/core'; import { AuthService } from './auth/auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(public auth: AuthService) { auth.handleAuthentication(); } }
ユーザ情報の利用
Auth0 Angular 2+ SDK Quickstarts: User Profile
QuickStartのコードの場合、認証後に別コンポーネント上でユーザの情報を表示するという作りになっています。
実用的なパターンとしては、認証済みであれば、ヘッダー部にユーザ情報を表示するというケースがあるかなと思いますので、それを実現するように作り変えてみました。
GitHub - hi1280/auth0-angular-samples
app.component.ts
で認証及びユーザ情報の表示を行なっています。
app.component.ts
import { Component, OnInit } from '@angular/core'; import { AuthService } from './auth/auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ profile: any; constructor(public auth: AuthService) { auth.handleAuthentication(() => { this.initProfile(); }); } ngOnInit() { this.initProfile(); } logout() { this.profile = undefined; this.auth.logout(); } initProfile() { if (this.auth.userProfile) { this.profile = this.auth.userProfile; } else { if (this.auth.isAuthenticated()) { this.auth.getProfile((err: any, profile: any) => { this.profile = profile; }); } } } }
auth.service.ts
import { Injectable } from '@angular/core'; import { AUTH_CONFIG } from './auth0-variables'; import { Router } from '@angular/router'; import 'rxjs/add/operator/filter'; import * as auth0 from 'auth0-js'; @Injectable() export class AuthService { auth0 = new auth0.WebAuth({ clientID: AUTH_CONFIG.clientID, domain: AUTH_CONFIG.domain, responseType: 'token id_token', audience: `https://${AUTH_CONFIG.domain}/userinfo`, redirectUri: AUTH_CONFIG.callbackURL, scope: 'openid profile' }); userProfile: any; constructor(public router: Router) {} public login(): void { this.auth0.authorize(); } public handleAuthentication(cb: any): void { this.auth0.parseHash((err, authResult) => { if (authResult && authResult.accessToken && authResult.idToken) { window.location.hash = ''; this.setSession(authResult); cb(); this.router.navigate(['/home']); } else if (err) { this.router.navigate(['/home']); console.log(err); alert(`Error: ${err.error}. Check the console for further details.`); } }); } public getProfile(cb): void { const accessToken = localStorage.getItem('access_token'); if (!accessToken) { throw new Error('Access token must exist to fetch profile'); } const self = this; this.auth0.client.userInfo(accessToken, (err, profile) => { if (profile) { self.userProfile = profile; } cb(err, profile); }); } private setSession(authResult): void { // Set the time that the access token will expire at const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime()); localStorage.setItem('access_token', authResult.accessToken); localStorage.setItem('id_token', authResult.idToken); localStorage.setItem('expires_at', expiresAt); } public logout(): void { this.userProfile = undefined; // Remove tokens and expiry time from localStorage localStorage.removeItem('access_token'); localStorage.removeItem('id_token'); localStorage.removeItem('expires_at'); // Go back to the home route this.router.navigate(['/']); } public isAuthenticated(): boolean { // Check whether the current time is past the // access token's expiry time const expiresAt = JSON.parse(localStorage.getItem('expires_at')); return new Date().getTime() < expiresAt; } }
handleAuthenticationメソッドにコールバック関数を渡して、認証後にユーザ情報の取得を行なっているのが修正のポイントです。
まとめ
Auth0を利用すれば、Google、FacebookやTwitterといったソーシャルな認証プロバイダーを利用して、ユーザ情報を取得できるため、面倒な認証処理の実装がショートカットできます。
APIの保護などもできるようなので、認証にまつわる面倒ごとを色々省くことができるようです。
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2017/08/04
- メディア: 大型本
- この商品を含むブログを見る
MEAN and Cosmos DBをVisual Studio Team ServicesでAzure App Serviceにデプロイする
サンプルアプリの準備
MEAN構成のサンプルアプリとして以下を使用する
https://github.com/hi1280/angular-cosmosdb
前提条件
Azure CLI 2.0をインストールしている
https://docs.microsoft.com/ja-jp/cli/azure/install-azure-cli
Angular CLIをインストールしている
npm install -g @angular/cli
VSTSのプロジェクトが作られている
https://www.visualstudio.com/en-us/docs/setup-admin/team-services/sign-up-for-visual-studio-team-services
Cosmos DBの作成
以下のコマンドを実行する
# コマンドのオプションは環境に応じて適宜変更する az login az group create -n my-heroes-db-group -l "Japan East" # Cosmos DBをMongoDBのAPIで作成する # Cosmos DBの名前が競合して作成できない場合、-nオプションの値を適宜変更する az cosmosdb create -n my-cosmos-heroes-example -g my-heroes-db-group --kind MongoDB
サンプルアプリとCosmos DBの連携
Cosmos DBの接続文字列を確認する
az cosmosdb list-connection-strings -n my-cosmos-heroes-example -g my-heroes-db-group --query "connectionStrings[0].connectionString"
example-environment.js
を接続文字列の内容に沿って修正する
このパラメータはサンプルアプリからCosmos DB(MongoDB)に接続する際の接続文字列に使われる
example-environment.js
のファイル名をenvironment.js
に変更する
ローカルでアプリを起動する
# Angular CLIのビルド実行 npm run build # Node.jsの実行 npm start
http://localhost:3000
をブラウザで開く
Azure App Serviceの作成
az group create --location "Japan East" --name myResourceGroup # FREEプランで作成 az appservice plan create --name my-app-heroes-plan --resource-group myResourceGroup --sku FREE az webapp create --name my-app-heroes-example --resource-group myResourceGroup --plan my-app-heroes-plan # node.jsのバージョン指定 az webapp config appsettings set -g myResourceGroup -n my-app-heroes-example --settings WEBSITE_NODE_DEFAULT_VERSION=6.11.1
Visual Studio Team Services(VSTS)との連携とデプロイ
プロジェクトをVSTSにPushする
プロジェクトルートで以下のコマンドを実行する
# 既存のgitリポジトリを削除 rm -fR .git # gitのローカルリポジトリに対する操作 git init git add . git commit -m "initial commit" # gitのリモートリポジトリに対する操作 # xxxxxは任意 git remote add origin https://xxxxx.visualstudio.com/_git/my-app-heroes-example git push -u origin --all
VSTS上でプロジェクトのビルド定義をする
ビルドタスクは以下の通りに定義する
Get Sources
This Project
を選択する- 該当のリポジトリとブランチを選択する
npmパッケージをインストール
Add Task
をクリックし、npm
を追加するinstall
コマンドを選択する
Angular CLIのビルド実行
Add Task
をクリックし、npm
を追加するcustom
コマンドを選択するCommand and arguments
をrun build
と入力する
サーバのnpmパッケージをインストール
Add Task
をクリックし、npm
を追加するinstall
コマンドを選択するWorking folder with package.json
をdist
と入力する
成果物を公開する
Add Task
をクリックし、Publish Build Artifacts
を追加するPath to Publish
をdist
と入力するArtifact Name
をdist
と入力するArtifact Type
でServer
を選択する
VSTS上でプロジェクトのリリース定義をする
リリースタスクは以下の通りに定義する
Artifact
- ビルドのArtifactの最新を選択する
Azure App Serviceにデプロイする
Run on agent
の+マークをクリックし、Azure App Service Deploy
を追加する- Azure subscription及びApp Service nameを適宜選択する
Package or folder
を$(System.DefaultWorkingDirectory)/my-app-heroes-example-build/dist
と入力するGenerate Web.config
にチェックをつけるWeb.config parameters
を-Handler iisnode -NodeStartFile index.js -appType node
と入力するPublish using Web Deploy
にチェックをつける
VSTS上からビルド及びリリースを実行した後に、Azure App ServiceのURLを開くとアプリが実行できる