Angular Material UIのカラーパレットがどうにもパッとしない。 ということで、カスタムカラーを使用することにした。 カスタムカラーを使用するためにはインストールの段階でカスタムカラーを使用するよ、という宣言が必要だがその方法は前回書いたので、参考にしてほしい。 さて、さっそくカスタムカラーを設定していく。 手順としてさらっていくと、自作のパレットを作成し、それを適用するというそれだけのこと。 なので、まずは自作のパレットを作成する。 src/assets/_palette.scssを作成し、そこにカラーを書いていく。 例えばこんな感じに。 $custom-primary: ( 50: #e8f5ff, 100: #c5e5ff, 200: #9fd4ff, 300: #78c2ff, 400: #5bb5ff, 500: #3ea8ff, 600: #38a0ff, 700: #3097ff, 800: #288dff, 900: #1b7dff, A100: #ffffff, A200: #ffffff, A400: #cce0ff, A700: #b3d1ff, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); 次に、このパレットを読み込む必要があるので、src/styles....

独断と偏見で言わせてもらうと、Angularはそれだけだと使いこなすことができない。 AngularはAngular側が用意してくれているモジュールをインストールして活用することで、簡単にWeb アプリを作成できるようになる。 が、そのモジュールなしで使いこなすことは難しい。 その筆頭がmaterial UIである。 material UIとは？ material UIはこちら。 要はよく使うパーツを用意されたモジュールをインストールするだけで使えるようになるというもの。 大変便利なのだが、決められたパーツなのでカスタマイズが絶妙に面倒くさいというデメリットもある。 とは言え、面倒な処理はやってくれるので、非常に重宝する。 いざ、インストール それでは実際にインストールしてみる。 $ ng add @angular/material 上記コマンドを実行後、インストールが進行し、いくつか質問されるので、下記のように回答する。 ℹ Using package manager: npm ✔ Found compatible package version: @angular/material@12.2.13. ✔ Package information loaded. The package @angular/material@12.2.13 will be installed and executed. Would you like to proceed? Yes ✔ Package successfully installed. ? Choose a prebuilt theme name, or "custom" for a custom theme: Custom ? Set up global Angular Material typography styles?...

Angularを業務で使用することがあり、かつバージョンが12指定とのことだった。 ちなみに現在のAngularのバージョンは13なので、普通にインストールすると13がインストールされる。 そこで12を指定し、インストールする方法を調べてみた。 Angular12をインストールする バージョン指定でインストールする方法は別段他の言語と変わりなく、ただただ末尾に指定バージョンを記載するだけでOK。 $ npm install -g @angular/cli@12.0.0 つまりこんな感じすれば12がインストールされる。 バージョンを確認する きっと問題ないけど、念のためにバージョンを確認する。 $ ng v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 12....

エックスサーバーは非常に便利で50個のサブドメインを作成することができる。 これは私みたいに飽き性でいろいろなものを作っては放置するタイプには非常に重宝する機能である。 エックスサーバーが気になるのであれば下記リンクをどうぞ。 [sc name=“exserver_all_unlimited” ][/sc] さてそしてまた、この機能を使用する機会がきた。 今回はエックスサーバーのサブドメインをGoogle Hostingに適用するというケースを行ったので、備忘録としてここに書いておく。 サブドメインの取得の仕方は省力する。 が、反映になかなか時間がかかるのが、エックスサーバーの玉に瑕。 firebase Consoleに行く Firebase console 作成したドメインを入力する まずはfirebase ConsoleのHostingに移動し、カスタムドメインを追加ボタンをクリックする。 するとドメイン名の入力を求められるので、エックスサーバーで作成したサブドメインを記入する。 ※「angular.nove-web.com を既存のウェブサイトにリダイレクトする」をチェック。 リダイレクト先にはエックスサーバーで作成したサブドメインを記入する。 次へをクリック。 所有権の確認 エックスサーバーのDNSレコード設定に進み、対象ドメインを選択する。 次に「DNSレコード追加」タブに移動する。 記入欄が現れるので、下記のように記入していく。 ホスト名：作成したドメイン 種別：TXTを選択 内容：Firebaseコンソール画面でコピーしたTXTレコードの値 追加が完了したら、firebase Consoleに戻り、所有権を証明ボタンをクリックする。 ここで失敗した。 ドメイン ********.com の所有権を証明できませんでした。設定をお確かめいただき、もう一度お試しください。 とのエラーが表示された。 解決方法がわからずに、途方に暮れていたので、初心に戻りGoogle Workspace 管理者ヘルプに行くと、 最初に試すことに48 時間待機すると書かれていたので、待機することにした。 ちなみに下記サイトでDNSレコードがしっかり適用されているか確認することができる。 Google Admin Toolbox Dig 全然うまくいかずに、色々DNSレコードをいじっていたら、途端に通った。 何をしたか、わからない。 実行（ドメインとの紐づけ） 何をしたかはわかないが、うまくいったようで、セットアップ画面が表示された。 またレコードを追加する必要がある。 下記のように追加すれば問題ない。 ホスト名：作成したドメイン 種別：Firebaseコンソール画面で表示されたレコードタイプ（私の場合はA） 内容：Firebaseコンソール画面でコピーしたTXTレコードの値 追加が完了した後に、終了ボタンをクリックする。 この時点でカスタムドメインの追加はうまくいったが、ステータスが設定が必要ですと表示されている。 最後に 設定を完了するために、最後にもうひとつ。 サブドメインの場合は、すでにあるDNSレコードと干渉する場合がある。 本サイトでは「*.nove-web.com」のようなレコードが既に存在していた。 これは見ての通り、すべてのサブドメインを対象にしているので、削除する必要がある。 ただ、本サイトのように新規で追加する以外にサブドメインを使っている場合は、そのサブドメインのレコードを新規に作成する必要がある。 後は接続が完了するまで待つ、ひたすら待ちましょう。 公開ができればそのサイトにアクセスができる。 今回追加したのは下記サイト。 https://angular.nove-web.com/home コスパ最強のWeb アプリ 今回はfirebase hosting で公開したのはAngularを勉強のために立ち上げたブログサイト。...

Good Bye 紙の本、そして紙の本しか出さない作家さん 読書は専らKindle Paperwhiteで読む。 「ひと昔前は本は紙でしょう、電子書籍？　いやいや風情も雰囲気もない。」 なんて思っていたが、Kindle Paperwhiteを買ったらもう、紙に戻れなくなった。 リンク 結果的に電子書籍を出していない作家は、私の中で読む術を失った。 なにを思って電子書籍版を出さないのかわからないが、出さないことで少なくとも私のような人種からのリーチを失っていると作家には知ってほしいし、読みたいので電子書籍版を出して欲しい。 とは言え、ただただ、電子書籍版を出せばいいというわけでもない。 Kindle Paperwhiteで読みたいのである。 で、やっとタイトルに繋がるのと同時に少し脱線する。 エンジニアのバイブル リーダーブルコード リーダブルコードという本を知っているだろうか。 リンク エンジニアであれば一度は聞いたことがあるかもしれない。 それはそうで、なにせエンジニアのバイブルと言われているくらいである。 美しいコードを見ると感動する。優れたコードは見た瞬間に何をしているかが伝わってくる。そういうコードは使うのが楽しいし、自分のコードもそうあるべきだと思わせてくれる。本書の目的は、君のコードを良くすることだ」 初版は2012年6月23日でもう10年前の発行である。 であるのだが、今でも根強い人気を誇っている。 私もずっと読もうと思っていたが、なんとなく先延ばしにしてきた。 そこで、このゴールデンウイークに重い腰を上げて読んで見ようと思い立った。 kindle版がない……? がしかし、リーダブルコードは電子書籍版が存在するのが、kindle版が存在しないという稀有な例。 そこでリーダブルコードをKindle Paperwhiteで読む方法を調べてみた。 エンジニア味方 オライリーの本をKindle Paperwhiteで読む 公式オンラインショップで検索 まずはオライリー公式ホームページでリーダブルコードを検索する。 O’Reilly Japan - リーダブルコード 公式オンラインショップで購入 次に、Ebook Storeで電子版を購入:価格2,112円をカートに入れ購入手続きに進む。 その後、購入に際してPayPalのアカウントが必要になるので手順に従いアカウント登録をする必要がある。 こういうのが面倒でkindleストアで一元管理しているのに…… 登録購入ができると、オライリーの本棚に購入した本（今回であればリーダブルコード）が表示される。 O’Reilly Japan Ebook Store - 購入済みの商品 インストール＆kindleにインポート 購入した本が表示されていることを確認できたら、ePubをインストールする。 で、調べた情報によると、ePub版はkindleで対応できないとのこと。 kindleで対応しているのはmobiファイルということで、ePubをmobiに変換する必要がある。 今回はオンラインツールを使用し、mobiファイルに変更をした。 できないようであればPDFファイルでも問題ないので、購入した本のPDF版をインストールする。 やっとKindle Paperwhiteの出番である。 まずはパソコンとKindle Paperwhiteを接続する。 接続が完了するとkindleのフォルダが表示されると思うので、D:\documentsにインストールしたmobiファイル or PDFファイルを置く。 その際、mobiファイルは書籍情報が含まれているので、自動でタイトル補完をしてくれるがPDF版の場合は、ファイル名をタイトルにしたほうがわかりやすい。 これでKindle Paperwhiteで読書する準備が完了した。 実読 さて、実読。...