らいふうっどの閑話休題

興味のあることをゆる~く書いていく

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

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 変更したい画像パス

設定後のログイン画面 f:id:ic_lifewood:20220103014536j:plain

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

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

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月
05 - 08月
  • 親父他界
    • 天寿を全うしました。
    • サポートは悔いなく出来たと思っています。
    • 引っ越し直後だったので、数カ月は色々落ち着かなかった。
  • 技術書典11 に出展しました。 techbookfest.org
  • 体調自体も悪かったので、あまり記憶が無い。
09 - 12月
2021総括
  • 体調をアチコチ崩して多方面に迷惑をかけたことが大きな反省点。
  • ng-japan on Air を欠かさずチェックしていた。
  • OSSに多少なりともコントリビュート出来た。
  • はてなブログに定期的にテック記事のまとめを作成していました。
    • アウトプットというより情報のリサーチ止まり的な内容がほとんどだった。
    • 但し、情報のアンテナを張っているという意味では良かった。
2022 年の抱負
健康
  • 70kg を目標に01/05 から減量をスタートする。

  • ジム通い / 運動の習慣化する。
    • バイク運転の体力回復する。
  • 食生活の改善する。
    • 家系ラーメンはチートデイのみにする。
  • 体調不良撲滅が目標。
インプット/アウトプット
  • 積み読本があるので、1冊/2周間を目標に消化する。
    • UX/UI のジャンル。
    • プログラミング(実装) のジャンル。
  • Angular の理解を深める為に以下のことを実施する。
  • CHIRIMEN Open Hardware コミュニティへのコントリビュート
  • ブログ
    • 自分の経験を記事にする。
  • Web 技術の体系的なおさらいを資格取得という形で実現する。
バイク

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

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

f:id:ic_lifewood:20210111125029p:plain

qiita.com

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

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

このブログで使う技術

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

Angular

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

CHIRIMEN

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

Docker

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

Raspberry Pi

事前準備

ハードウェア

  • パソコン
  • 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
cd ../..
➜  vi Dockerfile
➜  vi .dockerignore
cd ..
➜  vi docker-compose.yaml

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

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

node-web-gpio をAngularに実装

ディレクトリ構造

➜  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チカをする回路図

f:id:ic_lifewood:20210111184055p:plain

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

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

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

現在の状況

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

angular-iot のリポジトリ

github.com

今後の展望

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

参考資料