2022.01.16 覚書 / 2022.01.16 memo's

2022.01.16 覚書 / 2022.01.16 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

blog.angular.io

blog.devgenius.io

betterprogramming.pub

javascript.plainenglish.io

sergeygultyayev.medium.com

medium.com

medium.com

Cypress

netbasal.com

Design

coliss.com

React

eh-career.com

Redux

medium.com

medium.com

2022.01.08 覚書 / 2022.01.08 memo's

2022.01.08 覚書 / 2022.01.08 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

gist.github.com

Design

blog.btrax.com

zenn.dev

Develop

soudai.hatenablog.com

qiita.com

note.com

Jest

qiita.com

TypeScript

zenn.dev

medium.com

2022.01.04 覚書 / 2022.01.04 memo's

2022.01.04 覚書 / 2022.01.04 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

blog.devgenius.io

dev.to

dev.to

javascript.plainenglish.io

medium.com

Design

note.com

qiita.com

Develop

zenn.dev

www.patterns.dev

www.mizdra.net

qiita.com

JavaScript

betterprogramming.pub

RxJS

dev.to

TypeScript

betterprogramming.pub

Ubuntu のログイン画面の背景を変える手順のメモ

Ubuntu 20.04, 21.04 & 21.10 の場合

今まで、手動で設定ファイルを編集してログイン画面を変更しましたが下記ツールを使って簡単にできます

PRATAP-KUMAR/ubuntu-gdm-set-background

ubuntu-gdm-set-background をダウンロードします

$ wget -qO - https://github.com/PRATAP-KUMAR/ubuntu-gdm-set-background/archive/main.tar.gz | tar zx --strip-components=1 ubuntu-gdm-set-background-main/ubuntu-gdm-set-background

壁紙変更のコマンドを実行します。

$ sudo ./ubuntu-gdm-set-background --image 変更したい画像パス

設定後のログイン画面

PRATAP-KUMAR/ubuntu-gdm-set-background リポジトリ

github.com

Arch Linux の場合

Arch Linux 場合でも設定ファイルを編集してログイン画面を変更しましたが下記ツールを使って簡単にできます

arch-gdm-set-background

arch-gdm-set-background をダウンロードします

$ wget -qO - https://github.com/PRATAP-KUMAR/arch-gdm-set-background/archive/main.tar.gz | tar zx --strip-components=1 arch-gdm-set-background-main/arch-gdm-set-background

壁紙変更のコマンドを実行します。

$ sudo ./arch-gdm-set-background --image 変更したい画像パス

PRATAP-KUMAR/arch-gdm-set-background リポジトリ

github.com

コマンドを２つ実行するだけで、変更できるので簡単になりました。

husky, lint-staged, prettier, ESLint 導入メモ

husky マニュアルセットアップ

husky は、モダンなネイティブGitフックが簡単に作成補助するツールです。

husky のインストール

husky のインストール

$ npm install husky --save-dev

Git hooks の有効化

$ npx husky install

Git hooks の有効化後に package.json を編集

$ npm set-script prepare "husky install"

package.json 実装例

{
  "scripts": {
    "prepare": "husky install"
  }
}

hook の作成

下記コマンドで、hookを作成します。

$ npx husky add .husky/pre-commit "npm test"
$ git add .husky/pre-commit

.husky/pre-commit の実装例

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

試験的なコミットの作成

$ git commit -m "Keep calm and commit"

コミットコマンドを実行した時、 npm test が失敗し、コミットが中断するハズです。

husky のアンインストール

$ npm uninstall husky && git config --unset core.hooksPath

husky ドキュメント

typicode.github.io

lint-staged セットアップ

lint-staged は Git の Staged されたファイルに特定なコマンドを実行する為のツールです。

lint-staged のインストール

lint-staged のインストール

$ npm install lint-staged --save-dev

lint-staged のセットアップ

$ npx mrm@2 lint-staged

package.json 実装例

  "scripts": {
    "precommit": "lint-staged"
  },

lint-staged ドキュメント

github.com

prettier セットアップ

prettier は、コードを指定された形式にフォーマットするツールです。

prettier のインストール

prettier のインストール

$ npm install --save-dev --save-exact prettier

package.json 実装例

  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write --single-quote",
    ]
  },

prettier ドキュメント

prettier.io

ESLint セットアップ

ESLint は、コードの一貫性を高め、バグを回避することを目的として、ECMAScript / JavaScriptコードで見つかったパターンを識別してレポートするためのツールです。

ESLint のインストール

ESLint のインストール

$ npm install eslint --save-dev

ESLint のセットアップ

$ npx eslint --init

package.json 実装例

  "scripts": {
    "lint": "eslint index.ts",
  },

ESLint ドキュメント

eslint.org

husky, lint-staged, prettier, ESLint セットアップ

husky, lint-staged, prettier, ESLint を組み合わせたセットアップ

pre-commit でのセットアップ

.husky/pre-commit の実装例

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint
npm run precommit

package.json でのセットアップ

• メリット
  • package.json で、完結する事です。
• デメリット
  • 各種設定がコメントが残せない事です。

  "scripts": {
    "build": "tsc",
    "lint": "eslint index.ts",
    "prepare": "husky install && rm -rf dist && npm run build",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write --single-quote",
      "git add"
    ]
  },

yaml ファイル でのセットアップ

• メリット
  • 各種設定がコメントが実装出来る事です。
• デメリット
  • ESLint, lint-staged の yaml を 実装する事です。

package.json 実装例

  "scripts": {
    "build": "tsc index.ts --target es2021",
    "lint": "eslint index.ts",
    "prepare": "husky install && rm -rf dist && npm run build",
    "precommit": "lint-staged"
  }

.eslintrc.yml 実装例

env:
  # 環境定義  
parser: 
  # パーサー定義
parserOptions:
  # パースオプション  
plugins:
  # プラグイン定義  
ignorePatterns:
  # 除外対象
extends:
  # 拡張機能定義  
rules: {
    # ESLint ルール設定
  }

.lintstagedrc.yml 実装例

"*.ts":
  # typescript
  # prettier で、ダブルクオートからシングルクオートへ
  - prettier --write --single-quote
"*.{md,yml}":
  # markdown, yaml
  - prettier --write

個人的には、各種設定についてコメントが実装出来る yaml 方式の方が良いと考えています。

サンプルコード

github.com

2021 年振り返り（ポエム的） & 2022 年の抱負

2021 年振り返り

去年は明確な目標を立てていなかったので、前半はポエム的な内容です。

01 - 04月

• 技術書典10 に出展しました。 techbookfest.org
• ガレージのある物件に引越しをしました。
  • すぱちゃん！引越の手伝い有難う！助かりました！
• バイクを購入した。

  Scrambler Ducati https://t.co/4qLFWfCaQA

  — akihiko.KIgure (@ic_lifewood) 2021年1月24日

05 - 08月

• 親父他界
  • 天寿を全うしました。
  • サポートは悔いなく出来たと思っています。
  • 引っ越し直後だったので、数カ月は色々落ち着かなかった。
• 技術書典11 に出展しました。 techbookfest.org
• 体調自体も悪かったので、あまり記憶が無い。

09 - 12月

• ガジェ獣 Advent Calendar 2021 に投稿しました。
• Angular アドベントカレンダー に投稿しました。
  • 初の投稿遅刻＆結論まとまらずだったので、来年に活かす。
• CHIRIMEN Open Hardware にPRを何件か出しマージされました。 github.com

2021総括

• 体調をアチコチ崩して多方面に迷惑をかけたことが大きな反省点。
• ng-japan on Air を欠かさずチェックしていた。
• OSSに多少なりともコントリビュート出来た。
• はてなブログに定期的にテック記事のまとめを作成していました。
  • アウトプットというより情報のリサーチ止まり的な内容がほとんどだった。
  • 但し、情報のアンテナを張っているという意味では良かった。

2022 年の抱負

健康

• 70kg を目標に01/05 から減量をスタートする。

5.6kgリバウンドしている！（号泣#リバウンド pic.twitter.com/NaOZETpKBj

— akihiko.KIgure (@ic_lifewood) 2022年1月2日

• ジム通い ／ 運動の習慣化する。
  • バイク運転の体力回復する。
• 食生活の改善する。
  • 家系ラーメンはチートデイのみにする。
• 体調不良撲滅が目標。

インプット／アウトプット

• 積み読本があるので、１冊／2周間を目標に消化する。
  • UX/UI のジャンル。
  • プログラミング（実装） のジャンル。
• Angular の理解を深める為に以下のことを実施する。
  • Angular Tutorial 再度実施する。
  • Angular After Tutorial 再度実施する。
  • Angular アドベントカレンダー のリベンジする。
  • Angular を使ったプロダクト製作
• CHIRIMEN Open Hardware コミュニティへのコントリビュート
  • ポリフィルの TS化
  • node-web-gpio ドキュメント整備する。
  • node-web-i2c ドキュメント整備する。
  • 新刊を出す
• ブログ
  • 自分の経験を記事にする。
• Web 技術の体系的なおさらいを資格取得という形で実現する。
  • html5exam.jp
  • aws.amazon.com

バイク

• 年間無事故無違反
• ライディングリハビリをする。
  • 首都高で困らない程度の運転をする。
  • コーナリングの楽しさを思い出す。

抱負を書き過ぎた感がありますが、実現出来るよう行動します。

Angular とCHIRIMEN とDocker とRaspberry Pi で、L チカする話しようとしてハマっている話（現在進行系）

qiita.com

これは Angular Advent Calendar 2021 の16日目の記事です。
現在の時刻は2021年12月19日です。16日投稿予定が、盛大に遅刻しました。
人生初のアドベントカレンダー遅刻です。

結論から言います。
残念ながら目指したモノに現時点では辿り着けていません。
皆様の話のネタになれば幸いです。

このブログで使う技術

以下の技術を使います。
理由は、Angular と CHIRIMEN のコミュニティを手伝っていて、混ぜたら面白いものが出来るのでは無いか？というのが発想の原点です。

Angular

• Angular（アンギュラー）は、Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークである。

CHIRIMEN

• CHIRIMEN とは、Web ブラウザや Node.js の JavaScript からハードウェア制御が可能なプロトタイピング環境です。

Docker

• Docker（ドッカー）は、コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのオープンプラットフォームである。

Raspberry Pi

• Raspberry Pi（ラズベリー パイ）は、ARMプロセッサを搭載したシングルボードコンピュータ。イギリスのラズベリーパイ財団によって開発されている。

事前準備

ハードウェア

• パソコン
• Raspberry Pi
• ブレッドボード
• ジャンパーピン
• LED
• 抵抗

環境構築

Docker と Nginx

➜  mkdir angular-iot 
➜  cd angular-iot 
➜  mkdir iot-app
➜  cd iot-app
➜  mkdir docker
➜  cd  dcoker
➜  mkdir nginx
➜  cd nginx
➜  vi nginx.conf

• nginx.conf の内容
  • angular-iot/nginx.conf at main · gurezo/angular-iot · GitHub

➜  cd ../..
➜  vi Dockerfile

• Dockerfile の内容
  • angular-iot/Dockerfile at main · gurezo/angular-iot · GitHub

➜  vi .dockerignore

• angular-iot/.dockerignore at main · gurezo/angular-iot · GitHub

➜  cd ..
➜  vi docker-compose.yaml

• angular-iot/docker-compose.yaml at main · gurezo/angular-iot · GitHub

Angular と node-web-gpio

フォルダとAngular プロジェクトを作成します。

➜  cd  iot-app 
➜  ng new front --prefix=ngiot

CHIRIMEN コミュニティの node-web-gpio の追加

• npm install

➜  cd  iot-app/front
➜  npm install https://github.com/gurezo/node-web-gpio.git\#build/esnext --save

• 今回は、Angular 用にカスタマイズする為、フォークした node-web-gpio を使います
• フォークしたコードを使う理由は後ほど説明します。
  • angular-iot/package.json at main · gurezo/angular-iot · GitHub
• angular.json に node-web-gpio を追加
  • angular-iot/angular.json at main · gurezo/angular-iot · GitHub
• tsconfig.json に node-web-gpio の型定義を追加
  • https://github.com/gurezo/angular-iot/blob/main/iot-app/front/tsconfig.json#L28

CHIRIMEN コミュニティの node-web-gpio のフォークしたものを使う理由

• node-web-gpio の tsconfig.json の定義が "module": "commonjs", となっている為です。
  • https://github.com/chirimen-oh/node-web-gpio/blob/master/tsconfig.json#L5
• "module": "commonjs", で、使おうとすると以下のエラーに遭遇します。
  • Uncaught ReferenceError: require is not defined #9
  • Warning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted #14
• 上記理由の為、node-web-gpio のフォークして "module": "esnext", でビルドしたライブラリをします。

node-web-gpio をAngularに実装

• https://github.com/gurezo/angular-iot/tree/main/iot-app/front/src/app

  

  画面イメージ

ディレクトリ構造

➜  angular-iot git:(main) tree
.
|-- README.md
|-- docker-build.sh // ビルド用シェル
|-- docker-compose.yaml
|-- docker-down.sh // 停止用シェル 
|-- docker-prune.sh // イメージ削除用シェル
|-- docker-re-build.sh // 再ビルド用シェル
|-- enviroment
|   |-- docker-compose-setup.sh // docker-compose インストールシェル
|   |-- docker-setup.sh // docker インストールシェル
|   |-- node-setup.sh // node インストールシェル
|   `-- vscode-setup.sh // vscode  インストールシェル
|-- iot-app
|   |-- Dockerfile
|   |-- docker
|   |   `-- nginx
|   |       `-- nginx.conf
|   `-- front
|       |-- README.md
|       |-- angular.json
|       |-- e2e
|       |   |-- protractor.conf.js
|       |   |-- src
|       |   |   |-- app.e2e-spec.ts
|       |   |   `-- app.po.ts
|       |   `-- tsconfig.json
|       |-- karma.conf.js
|       |-- package-lock.json
|       |-- package.json
|       |-- src
|       |   |-- app
|       |   |   |-- app.component.html
|       |   |   |-- app.component.scss
|       |   |   |-- app.component.spec.ts
|       |   |   |-- app.component.ts
|       |   |   `-- app.module.ts
|       |   |-- assets
|       |   |   `-- img
|       |   |       `-- schematic.png
|       |   |-- environments
|       |   |   |-- environment.prod.ts
|       |   |   `-- environment.ts
|       |   |-- favicon.ico
|       |   |-- index.html
|       |   |-- main.ts
|       |   |-- polyfills.ts
|       |   |-- styles.scss
|       |   `-- test.ts
|       |-- tsconfig.app.json
|       |-- tsconfig.json
|       |-- tsconfig.spec.json
|       `-- tslint.json
`-- package-lock.json

16 directories, 55 files
➜  angular-iot git:(main)

Lチカをする回路図

Angular x CHIRIMEN x Docker x Raspberry Pi 完成イメージ

• ※現時点では、画面上からLEDを光らせられません

Angular x CHIRIMEN x Docker x Raspberry Pi 完成イメージ

現在の状況

• 残念ながら、node-web-gpio を正しくロードできない関係で Angular の画面から Raspberry Pi への信号の入出力が出来ていません。
• Uncaught SyntaxError: import declarations may only appear at top level of a module #15
• ○：Docker 起動
• ○：Docker 上の Angular アプリへのアクセス
• ✗：Angular アプリ から Rapspberry Pi への入出力制御

Uncaught SyntaxError: import declarations may only appear at top level of a module #15

angular-iot のリポジトリ

github.com

今後の展望

• 上記問題をクリアすれば、SPAとIoTでの新たな世界が創れると思います。
• 年末年始はコレを解決したいと思います。

参考資料

• [Docker] Docker + Nginx + Angular の開発環境を構築する
• How To Serve Angular Application With NGINX and Docker
• Docker Compose file versions and upgrading