Apple Silicon Macで簡易Webフロントエンド開発環境を構築したメモ（2020年11月時点）
第一世代のApple Silicon "M1"チップを搭載したMacが発売されましたね。
今の時点でどのくらい使えるものなのか気になり、気づけばMacBookProを購入していました。。。
M1 MacBook Pro 届いた🎉 pic.twitter.com/xsWziC3dtg
— hoshino (@_shn_hsn_) 2020年11月20日
Apple Silicon Mac上で軽くWeb開発ができるような環境を構築してみたので、
メモとして残しておきます。
（* 2020年11月22日時点の情報です。）
tl;dr
- 現状Dockerは動かないのでローカルに環境を建てないといけない
- Rosetta 2が優秀すぎて基本的には何不自由なく動作するっぽい
- VSCodeもnodeも近々ARM64ネイティブで動くようになりそう
nodejs
nodeは現時点ではRosetta2上で動かすしかないよう。 ↓のIssueでApple Silicon対応が検討されています。 github.com
v15.2.1をとりあえずインストール。 nodeもnpmもあまりにも普通に動いて拍子抜け・・・。
Visual Studio Code
VSCodeはInsider buildで既にARM64対応したものが公開されています。
code.visualstudio.com
Apple アーキテクチャの上で動いている・・・。
１時間程度動かした感じでは特にクラッシュすることなく使えました。
create-react-appしてみる
とりあえずローカルでreactをセットアップして動かしてみます。
npx create-react-app react-test
問題なし・・・。Rosetta2上だからって特に遅いということもないかな？
angularもためしてみる
こちらも当然動く・・・。
Dockerが動かなかったりと、本格的な開発に使うのはまだ怖いですが、
手元でちょっとした動作確認をする程度なら十分そうです。
すでに色々なメディアやYouTuberの方がレビューされているように、 M1チップのパフォーマンスは素晴らしいものになっているので、 本格的な開発機にできる日が楽しみです！
Angular 9のSPAにmsal-angularを使ってAzure Active Directory認証を実装する
備忘。adalを使った解説はよく見るけどMSALを使うサンプルはまだあんまりないのかな？
Azure ADにAppを登録する
AppにPlatformの設定を追加する
AppのAuthentication pageでPlatformを追加します。
これでAD側の設定は終了。Angular側に認証処理を実装していきます。
Angular AppにMSALを使って認証処理を実装する
何はともあれまずnpm install。
npm install @azure/msal-angular msal
msal-angularとmsalをinstallしたらapp.module.tsに設定を記述します。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { environment } from 'src/environments/environment'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { MsalModule, MsalInterceptor, MsalService } from '@azure/msal-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, MsalModule.forRoot({ auth: { // 先ほどコピーしたClient Id clientId: environment.clientId, // 先ほどコピーしたtenant Id（tenant 単位で認証する場合） authority: 'https://login.microsoftonline.com/' + environment.tenantId, validateAuthority: true, // 認証後のリダイレクトするURI（localhost） redirectUri: environment.uiAddress, navigateToLoginRequestUrl: true, }, cache: { cacheLocation: 'localStorage', }, }) ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule { }
次にapp.component.tsにAD認証処理を実装します。
import { Component, OnInit } from '@angular/core'; import { BroadcastService, MsalService } from '@azure/msal-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'AdAuthTest'; loggedIn = false; constructor( private broadcastService: BroadcastService, private authService: MsalService ) { } ngOnInit() { this.checkoutAccount(); if (!this.loggedIn) { // login処理 this.authService.loginRedirect(); } this.broadcastService.subscribe('msal:loginSuccess', () => { this.checkoutAccount(); }); this.authService.handleRedirectCallback((authError, response) => { if (authError) { console.error('Redirect Error: ', authError.errorMessage); return; } console.log('Account:', this.authService.getAccount()); }); } checkoutAccount() { this.loggedIn = !!this.authService.getAccount(); } }
これで最低限のAzure AD認証ができるはずです。ng serveして動かしてみます。
無事AD認証してログインすることができました！
console.logしておいたAccount情報も確認することができます。
実運用するうえでは考えなくてはいけないことが色々ありますが、
シングルテナントでAAD認証をするだけならば簡単に実装できそうです。
いつだって大変なのは認可の方ですが……。
Microsoft公式のangular9-sample-appも参考になると思います。
github.com
ぼくがかんがえた最高の在宅勤務環境を構築する
発端
COVID-19による困難な社会情勢の中、non-essential 社会人（？）におかれましては在宅勤務の重要度はもはや推奨ではなく必須レベルになってきていると感じます。
私の所属している企業では3月初旬から基本在宅勤務となっており、
私は当初1Kの賃貸マンションでデスクもない中リモートワークしていましたが、
かなり早い段階で腰が悲鳴を上げ始めたのでこれを機に引越し＆デスク環境構築を行うことにしました。
ぼくがかんがえた最高のデスク
- 十分に広いテーブルトップ
- デスクの広さはワーキングメモリの大きさです
- 視界に入るケーブルの本数は最小限にする
- デスクはメモリなので（？）
- 十分に広いディスプレイ
- デスクトップの広さはワーキングメモリの大きさです
- それなりのチェア
- 今回の動機が腰の痛みなので。。。
構築した
構築しました。
テーブルトップはIKEAのHILVERです。
www.ikea.com
横140cm*奥行き65cmととても広いので、キーボードの横にA4ノートなんかを開いても余裕があります。
ディスプレイはかなり迷いました。。
絶対に外せない要件はUSB-C給電ができること。ケーブルは最小限にしたいので、映像出力とLaptopの充電は一本でできてほしいです。
候補にはLGのウルトラワイドディスプレイ、湾曲ディスプレイがありましたが、最終的にDELLのU2720QMを購入しました。
これは4K解像度で映像出力が可能で、当然USB-C給電可能、USBハブ搭載な上実売6万円以下と文句なしです。
LGにほぼおなじスペック・価格の「LG 27UK850-W」がありますが、DELL U2720QMのいいところとしては
- 付属のスタンドが良い（変に曲線を描いていないので場所を取らない）
- ACアダプタ内臓なので電源ケーブルが邪魔にならない
ことでしょうか。とにかくスペースを広く使いたいのでこちらを購入しました。
ちなみにDELL直販では「U2720Q」、Amazonでは「U2720QM」が販売されていますが、スペック上の違いは特になく、その差は付属のケーブルがDisplayPortケーブルかHDMIケーブルかだけのようです。
キーボードはKeychron K2（赤軸）、マウスは古代のMagic Trackpadです。
ケーブルで接続したくないため当然どちらもBluetooth接続のものを使用します。
Keychron K2は、これ一台でWindowsにも対応しており、簡単に接続を切り替えられるので環境を行き来しながら作業する際に便利です。
椅子はIKEAのJÄRVFJÄLLET。背もたれがメッシュで蒸れない、座面の奥行を変えられる、ヘッドレストがついているという点でこちらを購入。
IKEAのオフィスチェアといえばMARKUSかと思いますが、完全に見た目の好みでこちらを購入。
今のところ快適に使えています。
今後やること
- 足元の配線を隠す
- デスクランプを導入する
所感
やはり広いデスクと快適な椅子は良い・・・！
しばらくこのセットアップで在宅勤務やっていこうと思います。
2020年1月に消費したエンタメ作品メモ
感じたことの備忘として。
映像
SEX EDUCATION Season 2 [Netflix]
Season 1と比べてLGBTQの話題が増えた？
コメディタッチでティーン向けだと感じる部分も多いけど、性の視点からDiversity&Inclusionを考えられて相変わらずいいドラマ。The Circle [Netflix]
SNSを模した近代的人狼ゲーム。
男性として生きていると感情が抑圧されるからと女性を語って参加したり、 ナードはマッチョなハンサムガイを、太っている女性はスリムな女性を演じたりする。
吊るされた時の感情の吐露やファイナリストたちが初めて顔を合わせたときの会話に胸を打たれる。
Shubham you so sweet😭映像研には手を出すな！ 1-4話
才能ある若者が情熱だけで走り出すのいいよね……いい…….。
このアニメ自体も映像表現がここしばらくのアニメにはない感じで、挑戦している感じが良い。
手を動かしている二人の才能や夢中力が目を引くけど、 金森さんのマネジメント力もすごいよね……。
4話では職人のこだわりと納期をズラせないマネージャーの対立まで描写されてて本当にこれ高校生か？という気持ちになる。。。Next in Fashion [Netflix]
Fab5のタン氏が審査員をしているファッションデザインコンテスト番組。
ファッションショーって前衛的な服ばかりで消費者視点よくわからん……。
けどこの番組はちゃんとデザイナーの意図や審査のポイントを解説してくれていて良かった。
漫画「ランウェイで笑って」を読んでいるから、これ漫画で見たやつだ！なポイントがたくさんあって良かった。The Morning Show [Apple TV+] 1-5話
面白い！全部見てから感想書きたい。
マンガ
- 映像研には手を出すな！ 1巻
アニメをみて即4巻までまとめ買いしてしまった。。。
アニメの映像表現もすごいが、マンガもコマ割り・吹き出しで新しい表現を試みていて面白い。
以下は継続購入。五等分の花嫁……。終わるのか……。
- ランウェイで笑って 14巻
- 五等分の花嫁 13巻
- かぐや様は告らせたい～天才たちの恋愛頭脳戦～ 17巻
- ダイヤのA act2 20巻
【MCP】70-483 Programming in C#に合格しました
Microsoftが提供している認定資格試験「70-483 Programming in C#」に合格しました。
70-483でググっても日本語では2-3年前の受験記しかヒットせず、受験勉強どうしたらいいの。。という気持ちになったので2020年1月時点の情報をまとめておきます。
筆者のC#歴
- 3年くらい
- ASP.NET MVCで古臭いWebアプリを作ったり、.net coreでAPI書いてAzure Web Appsに乗っけたり、Azure functions書いたり
- 最近はtypescriptメインでC#は1年ほどのブランクがある
勉強期間
- 約10日。正月から勉強を開始して2020/01/12に受験
- 費やした時間は20−30時間くらい
- 内訳は平日1.5時間、休日3−5時間ほど
やったこと
Measure Upという、色々な資格の模擬試験を提供しているサービスを主に使用しました。
試験の出題範囲を網羅的にカバーしていて、200問ほど問題が用意されていました。
この問題集を一通りやって、間違えた問題や理解が怪しい問題を解き直すことを繰り返していました。
解き終えた後のレポートで復習するべき単元を可視化できるので、反復学習向きで非常に良かったです。
実際の試験と同様の形式で出題してくれるので雰囲気を掴む意味でも◎
公式解説本であるExam Ref 70-483もKindle版を買って読んではみましたが、
文章量がめちゃくちゃ多いので全部は読んでいません。。。
Measure Upの問題で理解が怪しかった部分を辞書的に参照する形で利用しました。
どちらも日本語ローカライズされていませんが、日本語のいい教材が見つからなかったので上記で対策しました。
試験の過去問集みたいなものが日本語でも売っていますが、サンプルを解いた感じ明らかに答えが違っていたり解説が雑だったりしたので購入を控えました。。
所感
結果としては800点ほどで合格しました。
対策開始前は初級の資格だし楽勝でしょ〜〜とおもっていましたが、
アセンブリやGCの挙動についての細かい仕様が聞かれたりして、意外と対策に時間をかけることになりました。
普段からC#を使っている人でも問題集やMS Docsを一通り眺めて、
普段使っていないAPIや仕様については対策していった方がいいなと感じました。
初心に帰って言語仕様を読み解くいい機会になりましたし、出題範囲も広く網羅的に勉強できるので、
総合的にいい資格だなと思いました。
次は最近MSが猛プッシュしているAZ系の認定を受けようかな。
Android Studioで作成したFlutterプロジェクトがGradleまわりのErrorを吐いたので解決する
Android StudioでFlutterプロジェクトを作成すると、Buildは成功しますが、Code InspectでErrorやWarningがたくさんでます。
その中でも、Gradleに関するErrorを解決する際にハマったので書き残しておきます。
Error 内容
これは既知の問題のようで、Flutter のリポジトリでissueが立てられています。
github.com
プロジェクトに適切なAndroid SDKが紐付けできていないようです。
issueのスレッド内でWorkaroundが投稿されていたのでその通りに設定します。
プロジェクトにAndroid SDKを紐づける
ここまで設定すると、GradleExceptionが解決できない以外のErrorがFixされます。
GradleException()を置き換える
GradleException()はAndroid API 29ではサポートされていないので、FileNotFoundException()に置き換えます。
↓ /android/app/build.gradle
def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
// GradleExceptionをFileNotFoundExceptionに置き換え
throw new FileNotFoundException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}
これでGradleに関するErrorは解決します！
書いてみるとなんてことないけど、これを解決するのにすごく時間をかけてしまった…。
自分がAndroid開発をしたことないからハマっただけで、
普段からやっている人にとってはなんてことないErrorなんだろうか…🤔
ブログをはじめます
はじめまして！
2020年から Blog をはじめます。
読んだ本の感想や、コーディングの tips / memo、学習した内容などを記録していこうとおもっています。
よろしくお願いします。
