カテゴリー: カテゴリーなし

WindowsでのPlaywrightのセットアップ

node.js のバージョン管理のために、VOLTAを使用する。
https://docs.volta.sh/guide/getting-started
上記より今回は「volta-2.0.2-windows-x86_64.msi」を取得してインストール

確認
PowerShell>
volta --version
2.0.2

以下のコマンドで最新のLTSバージョンのNode.js をインストール
PowerShell>
コードをコピーする
volta install node

プロジェクトフォルダを作成し移動
PowerShell>
mkdir playwright-codegen-demo
cd playwright-codegen-demo

Playwrightをインストール
PowerShell>
npm init playwright@latest

必要なブラウザバイナリをインストール
PowerShell>
npx playwright install

 

 

import React, { useState } from 'react';
import zxcvbn from 'zxcvbn';

const PasswordStrengthChecker: React.FC = () => {
const [password, setPassword] = useState('');
const [score, setScore] = useState(0);
const [feedback, setFeedback] = useState<{ warning: string, suggestions: string[] }>({ warning: '', suggestions: [] });

const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newPassword = event.target.value;
setPassword(newPassword);

// zxcvbnでパスワードの強度を評価
const result = zxcvbn(newPassword);
setScore(result.score);
setFeedback(result.feedback);
};

const getStrengthLabel = (score: number) => {
switch (score) {
case 0:
return 'Very Weak';
case 1:
return 'Weak';
case 2:
return 'Fair';
case 3:
return 'Good';
case 4:
return 'Strong';
default:
return '';
}
};

return (
<div>
<input
type="password"
value={password}
onChange={handlePasswordChange}
placeholder="Enter your password"
/>
<div>
<strong>Password Strength:</strong> {getStrengthLabel(score)}
</div>
{feedback.warning && <div><strong>Warning:</strong> {feedback.warning}</div>}
{feedback.suggestions.length > 0 && (
<div>
<strong>Suggestions:</strong>
<ul>
{feedback.suggestions.map((suggestion, index) => (
<li key={index}>{suggestion}</li>
))}
</ul>
</div>
)}
</div>
);
};

export default PasswordStrengthChecker;

 

 

systemd で制御されているサービスに対して kill コマンドが実行された場合、その情報は直接のシェルコマンドのログには残りにくいです。しかし、以下の方法で関連の情報を調査することができます。

    systemdのログ: journalctl を使用して、systemdのログを調査できます。

    bash

journalctl -u [サービス名]

このコマンドで、特定のサービスに関するログを見ることができます。

Auditログ: LinuxのAudit機構を使用している場合、システム呼び出しのログが取得できるので、kill コマンドの使用がログに記録される可能性があります。以下のように ausearch コマンドを使用して調査できます。

bash

ausearch -c 'kill' -f [対象となるファイルやプロセス]

セキュリティモニタリングツール: セキュリティに関するモニタリングツールやIDS(Intrusion Detection System)を導入している場合、それらのツールのログやアラートを確認すると情報が得られるかもしれません。

　メンテナンス数に対して、十分な人数かどうか

システムの保守運用における体制とプロセスは相互に影響を与えるものであり、一方が先に決まるとは限りません。具体的な状況や要件、リソースによって、どちらを先に整えるかは変わる場合があります。
体制から先に決まる場合

大規模プロジェクト: 大規模なプロジェクトやシステムでは、最初に体制を整えることが多いです。これは、必要なリソース（人員、スキルセット、費用等）を確保し、その後で具体的な運用プロセスを決定するためです。
既存の枠組み: 既存の運用チームや体制がある場合、その体制に合わせてプロセスが設計されることが多いです。

プロセスから先に決まる場合

小〜中規模プロジェクト: プロジェクトが小さく、または短期間で終わる場合は、先にプロセスを整え、それに必要な体制を後から決めることがあります。
特定のテクノロジーまたは手法の採用: ある特定のテクノロジー（例：Kubernetes）や手法（例：DevOps）を採用する場合、それに適したプロセスを先に決定し、その後で体制を整えることがあります。

並行して決まる場合

アジャイルな開発: アジャイルな方法論を採用している場合、体制とプロセスは継続的に見直され、調整されるため、どちらも並行して決まっていくことが多いです。

最終的には、プロジェクトの目的、規模、期間、利用するテクノロジー、予算など多くの要素が影響を与えるため、一概にどちらが先とは言えません。最適な体制とプロセスを見つけるためには、定期的なレビューと調整が必要です。

トライアルを実施する理由

検証と調整: 設計した体制とプロセスが現実の業務に適用可能かどうかを確認し、必要な調整を行います。
リスク軽減: トライアルを行うことで、全面的な導入前に問題点を特定し、リスクを軽減することが可能です。
ステークホルダーのフィードバック: 関係者からのフィードバックを早い段階で集めることができます。
トレーニングと慣れ: 関係者が新しいプロセスや体制に慣れる機会を提供します。

より良いトライアルにするための方法

明確な目的設定: トライアルで何を達成したいのか明確な目的を設定します。
スコープの制限: トライアルを無駄に広げすぎず、限定されたスコープで実施します。
リアルな環境でのテスト: できるだけ本番に近い環境でトライアルを行うことが重要です。
適切な期間設定: 短すぎず、長すぎない適切な期間を設定します。
メトリクスとKPIの設定: トライアルの成功を測るためのメトリクスとKPI（重要業績評価指標）を設定します。
定期的なレビューと調整: トライアル期間中に定期的に状況を評価し、必要な調整を行います。
ドキュメンテーション: 何がうまくいったのか、何がうまくいかなかったのかをしっかりと文書化し、その結果を次のステップに活かします。

トライアルを計画的に、そして効率的に実施することで、体制とプロセスの最適化をより確実に進めることが可能です。

メンテナンスプロセスのトライアルにおける目標設定は、プロジェクトや組織の状況、ニーズ、期待される成果に基づいて行うべきです。以下は、達成すべき目標を設定する際の一般的なガイドラインです。
SMART原則に基づいた目標設定

具体的（Specific）: 目標は明確であるべきです。何を達成するか、どのように達成するかがはっきりとしている必要があります。
測定可能（Measurable）: 目標達成を評価するための明確なメトリクスやKPI（重要業績評価指標）を設定します。
達成可能（Achievable）: 設定された目標が現実的なものであるかどうか評価します。リソース、時間、予算などの制限を考慮しましょう。
関連性（Relevant）: 目標がプロジェクトや組織の全体戦略に合致しているかどうかを確認します。
時間枠（Time-bound）: 目標達成に必要な期間を設定します。これはトライアルの期間自体であることも、トライアル後に全面実施する際の時間枠であることもあります。

具体的な目標の例

システムダウンタイムを現状から10%減らす
バグ修正のリードタイムを1週間以内にする
ユーザーからのフィードバックを24時間以内に処理する
緊急メンテナンスの発生頻度を半減させる
メンテナンスに関わる作業コストを20%削減する

目標設定のポイント

ステークホルダーとのコミュニケーション: 目標設定の過程でステークホルダー（経営層、開発チーム、顧客など）と密にコミュニケーションを取り、そのフィードバックを反映させることが重要です。
継続的な評価: トライアル期間中に定期的に目標に対する進捗を評価し、必要な調整を行います。

目標設定は、メンテナンスプロセスのトライアルにおいて、その方向性を明確にし、結果を測定可能な形で出すために不可欠です。以上の要点に注意を払いながら、現場の状況に合わせて柔軟に目標を設定してください。

机上（デスクトップ）で検討した手順の有効性を実際の環境で確認するためのトライアルにおいては、以下のような目標値が設定されることが一般的です。
成功基準に関連する目標値

適用可能性: 検討した手順が実際の環境で無問題に適用できるかどうか。
効率性: 手順に要する時間、人的リソース、およびコストが予測通り、または予測より良いかどうか。
安全性: 手順が実施された場合のリスク（セキュリティ、健康、環境など）が受容可能なレベルであるか。
正確性: 手順が期待する結果をどれだけ正確に達成できるか。
信頼性: 手順が一貫して期待通りの結果をもたらすか。

プロセスとコミュニケーションに関する目標値

透明性: 手順が明確で、関係者が容易に理解・実施できるか。
スケーラビリティ: 小規模なトライアルで成功した手法が、より大きな環境や異なる状況で適用可能か。
フィードバック速度: 問題が発生した場合や改善が必要な場合に、それをどれだけ早く察知し、対処できるか。

その他の考慮すべき要素

コンプライアンス: 手順が法的な基準や業界標準に適合しているか。
ユーザー満足度: 手順の適用後、エンドユーザー（またはステークホルダー）がどれだけ満足しているか。

目標値は、それぞれのプロジェクトや組織の独自のニーズに応じて調整する必要があります。また、これらの目標値を数値で測定できる場合（例：処理時間の削減率、エラー発生率など）、その方がトライアルの成果を明確に評価しやすくなります。

node.js とyarnの最新化手順

npmの最新化

$ npm install -g npm

removed 30 packages, changed 116 packages, and audited 238 packages in 2s

18 packages are looking for funding
  run `npm fund` for details
(npmでインストールされた18個のパッケージが、開発に必要な資金を集めるために、支援を求めているの意味。パッケージのメンテナンスや開発コストのため、メンテナーは、資金を集めるために、スポンサーシップや寄付を受け付けている。)
found 0 vulnerabilities
（npmでインストールされたパッケージにはセキュリティ上の脆弱性がないことを示している）

npm notice Run npm install -g npm@9.6.3 to update!
（新しいnpmバージョンにアップグレードするために必要なコマンドを示している。新しいnpmバージョンにアップグレードすることは、より良いパフォーマンス、セキュリティ機能、および新しい機能の利用を可能になるので、通常は既存環境への影響がないなら、新しいバージョンにアップグレードすることが推奨。）

$ npm install -g npm@9.6.3

$ npm -veriosn
npm@9.6.3 /home/k/.nvm/versions/node/v16.13.1/lib/node_modules/npm

$ npm update
依存関係の最新化

$ npm audit
$ npm audit fix
セキュリティアップデートが必要なパッケージを更新

yarnの最新化


$ npm install -g yarn

以降はyarnを使用しているプロジェクトのディレクトリで実行。
$ yarn upgrade
$ yarn audit
$ yarn audit fix

yarnでreact＋muiのフロントエンドを作成

yarn create react-app web --template typescript
webというフォルダを作成し、Reactの初期プロジェクトが作成される。

cd web

yarn add @mui/material @mui/icons-material react-router-dom @emotion/react @emotion/styled
yarn add @mui/lab
yarn add @mui/x-data-grid
yarn add --dev @types/react-router-dom

下記からmuiをDLする。
https://github.com/mui/material-ui

解凍後、以下から必要なテンプレートを取り出し、
material-ui/docs/data/material/getting-started/templates/dashboard/

下記のように配置
src/layouts/Dashboard.tsx
src/components/Header.tsx
src/components/Sidebar.tsx
src/pages/Home.tsx

yarn add @apollo/client
yarn add recharts
yarn add graphql
yarn add react-apollo

---------------自動起動不可 2023/04/01---------------
TerraformのPlanまで

sudo apt-get update
sudo apt-get install unzip
環境変数登録のためシェルチェック
echo $0
git clone https://github.com/tfutils/tfenv.git ~/.tfenv
echo 'export PATH="$HOME/.tfenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(tfenv init -)"' >> ~/.bashrc
exec $SHELL
tfenv install latest
tfenv use latest

---------------成功 2023/04/08---------------

自動フォーマッターの設定

VS Codeの設定ファイル（settings.json）を次の場所から開く。
    Windows: %APPDATA%\Code\User\settings.json
    macOS: $HOME/Library/Application Support/Code/User/settings.json
    Linux: $HOME/.config/Code/User/settings.json

VScodeのデフォルトJSONフォーマッターを明示する方法
  "editor.defaultFormatter": "esbenp.prettier-vscode",

保存時にフォーマットするようにする
  "editor.formatOnSave": true,

Terraformも同様にフォーマットする
  "[terraform]": {
    "editor.formatOnSave": true
  },


json, TypeScript, go まとめて以下の通り
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[terraform]": {
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[go]": {
"editor.defaultFormatter": "golang.go"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"go.toolsManagement.autoUpdate": true,
"workbench.startupEditor": "none",
"javascript.updateImportsOnFileMove.enabled": "always"
}

---------------自動起動不可 2023/04/01---------------
winscpでWSLのubuntuのディレクトリにアクセスする

ubuntuにsshサーバーが起動している必要がある

パスワード認証が許可されているか確認
$ grep 'PasswordAuthentication ' /etc/ssh/sshd_config
noならyesに変更
$ sudo vi /etc/ssh/sshd_config

SSH接続するには、ホストキーが必要なので生成
$ sudo ssh-keygen -A

SSHサービスを起動
$ sudo service ssh start
* Starting OpenBSD Secure Shell server sshd
# ホスト鍵がない場合は以下が表示される
# sshd: no hostkeys available -- exiting.

SFTP、ポート22、127.0.0.1、でwinscpに設定。

ホスト名でアクセスしたい場合は、WSLのubuntuで以下を確認し、上記IPで指定している部分と差し替える。（が、自分の環境では成功せず、なぜかわからなかった。）
$ hostname

---------------成功 2023/04/08---------------

WSL2 Ubuntuでsystemd導入
PS
wsl -l -v
wsl --update

$ sudo apt update
$ sudo apt full-upgrade
$ sudo apt install -y systemd
$ sudo vi /etc/wsl.conf

# 以下を追記
[boot]
systemd=true

PS
wsl --shutdown

効果：これによりUbuntu起動直後からsshも自動で起動し、すぐにWinSCPで疎通可能。

sshが自動で起動しているかどうかは以下で確認可能
$ sudo systemctl status ssh

---------------成功 2023/04/08---------------

WP + sqliteのphp8.x対応
これを導入するだけ
https://github.com/aaemnnosttv/wp-sqlite-db

レンタルサーバー側の変更
https://user.lolipop.jp/?mode=php

 

 

スニペット

リトライ

 

  • 新しいReactプロジェクトをgraphql-clientという名前で生成する
    • $ yarn create-react-app graphql-client --template typescript
  • 作成アプリディレクトリへ移動後
    • $ yarn add @apollo/client graphql
  • GQL 関連のインストール
    • $ yarn add graphql
    • $ yarn add @graphql-codegen/cli
  • gql関連のセットアップ
    • $ yarn graphql-codegen init
? What type of application are you building? Application built with React
? Where is your schema?: (path or url) http://localhost:8080
? Where are your operations and fragments?: src/graphql/schema.graphqls
? Pick plugins: TypeScript (required by other typescript plugins), TypeScript Operations (operations and fragments),
TypeScript React Apollo (typed components and HOCs)
? Where to write the output: src/generated/graphql.tsx
? Do you want to generate an introspection file? Yes
? How to name the config file? codegen.yml
? What script in package.json should run the codegen? generate
  • codegen.ymlが生成されるが、以下のように編集 
    overwrite: true
schema: "src/graphql/*.graphqls"
generates:
src/generated/graphql.tsx:
plugins:
  - "typescript"
  - "typescript-operations"
  - "typescript-react-apollo"
  # - "typescript-graphql-request"
./graphql.schema.json:
plugins:
  - "introspection"
    • codegen.yml で指定したように、src/graphql 内に.graphqls ファイルを設置
    • $ yarn run generate
    • src/generated フォルダ内にコードが自動生成される

7/25

  • $ yarn global add spectaql

7/31

  • $ cd /05pj
  • $ yarn global add gql-generator
  • $ yarn global add graphql-code-generator
  • $ yarn gqlg --schemaFilePath ./src/graphql/*.graphql --destDirPath ./src/graphql

pandas

read_csv

import pandas as pd

df = pd.read_csv('./sample.csv')
print(df)
print(df.columns)

オプション
・,encoding="sjis" #文字コードの指定が可能
・header=2 #2行目より上は無視、2行目がヘッダーに（Noneが指定可能）
・index_col=0 #indexとして使いたい列番号(0~)を指定
・usecols=[1, 3] #特定の列だけ読み込む

read_excel

import pandas as pd

df = pd.read_excel('./sample.xlsx')
print(df)

オプション
・ほぼread_csvと一緒
・sheet_name='sheet2' #シート名（もしくは番号）を指定可能

ローカルDynamoDB

任意場所にyamlファイル作成後

cd C:\dir\to\.yaml
docker-compose up
デフォのyamlの内容なら、ポート8000で立ち上がる。

yarn graphql-codegenでスキーマファースト

■ フロントエンド側

  • yarn add graphql
  • yarn add @graphql-codegen/cli
  • codegen.yamlをreactのプロジェクトルートに準備 
    • 
overwrite: true
schema: "../api/graph/*.graphqls"
generates:
# ./graphql/graphql.tsx:
#   plugins:
#     - "typescript"
#     - "typescript-operations"
#     - "typescript-react-apollo"
# ./graphql.schema.json:
#   plugins:
#     - "introspection"
./src/api/models.ts:
    • typescript
    • typescript-operations
    • typescript-graphql-request
実行時の入力と実行結果
k@DESKTOP-VDG6H3D:~/02pj/web$ yarn graphql-codegen init
yarn run v1.22.17
$ /home/k/02pj/web/node_modules/.bin/graphql-codegen init
(node:1053) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

    Welcome to GraphQL Code Generator!
    Answer few questions and we will setup everything for you.

? What type of application are you building? Application built with React
? Where is your schema?: (path or url) http://localhost:8080
? Where are your operations and fragments?: ./src/*.graphq
? Pick plugins: TypeScript (required by other typescript plugins), TypeScript Operations (operations and fragments), Typ
eScript React Apollo (typed components and HOCs)
? Where to write the output: ./graphql/graphql.tsx
? Do you want to generate an introspection file? Yes
? How to name the config file? codegen.yml
? What script in package.json should run the codegen? generate
Fetching latest versions of selected plugins...

    Config file generated at codegen.yml

      $ npm install

    To install the plugins.

      $ npm run generate

    To run GraphQL Code Generator.

Done in 433.59s.

https://logmi.jp/tech/articles/324574
「GraphQL」を使うときは必ずスキーマ駆動開発を使う

いろいろな“つらみ”が多いので、GraphQLを利用する場合は、必ずスキーマ駆動開発を使っておきましょうという教訓です。openapi.jsonやgraphql.schemaなどのスキーマ定義を、事前にフロントエンドとバックエンドの間で、要するに開発者と利用者の間で合意を取ってからAPIを作りましょうというのがこのSchema Driven Developmentです。

すでに完成後のインターフェイスがわかっているので、だいたいのライブラリを使えばモックサーバーもすぐに立てられます。フロントエンド側の開発がバックエンドのサーバーのデータの出来上がりを待たなくても、データがすでに完成した状態で開発を進められます。

また、開発における手戻りの発生リスクもとても小さいので、教訓は「スキーマ駆動開発はぜひ使っていきましょう」になります。そもそもGraphQLは本当に必要なのかも検討する必要があるかなと思います。GraphQLは仕組み上、かなりしっかりとした設計がないとあまりメリットがないかなと思っています。

React Material-UI

https://mui.com/material-ui/getting-started/installation/

" width="20" height="20">

 

 

 

目標を一つに定めることは、集中力を高め、成果を出しやすくするために重要です。以下のステップを試してみて、目標を定める手助けをすることができます。

  1. 自己評価を行う: 自分の関心や価値観について考え、何が本当に重要で意味のあることなのかを見極めましょう。自分の強みや短所を把握し、それを活かせる目標を考えてみましょう。
  2. 優先順位を設定する: 考えている目標の中で、どれが最も重要で達成したいものかを選びましょう。それぞれの目標について、なぜそれが重要なのか、どのような影響をもたらすのかを考えて比較しましょう。
  3. 具体的かつ実現可能な目標を設定する: 目標を抽象的ではなく、具体的かつ明確に設定することが重要です。また、自分が実際に達成できる範囲内であることも考慮しましょう。目標があまりにも大きすぎたり、現実的ではない場合は、達成感を得づらくなります。
  4. ステップを設定する: 目標を達成するために必要なステップや行動計画を立てましょう。大きな目標を小さなタスクに分割し、進捗状況を確認できるようにします。具体的なスケジュールや期限を設定し、目標を追いかけるための計画を作成しましょう。
  5. 集中する: 目標に向けて取り組む際には、集中力を高めることが重要です。時間管理や優先順位の設定、生産的な環境の整備など、自分が集中しやすい状態を整えることが大切です。

目標を一つに絞ることは、効果的な成果を出すために役立ちます。ただし、複数の興味や目標を持つことは自然なことですので、必ずしも全てを捨てる必要はありません。重要度や優先度に応じて、適切なタイ

 

休みをグダグダに過ごしてしまったことを気にされているようですね。休みを無駄に過ごしてしまったと感じることはありますが、心配する必要はありません。人々は時にはリラックスや休息を必要としますし、自分自身をリセットする時間も必要です。

ただし、もし休みの時間をより充実させる方法を見つけたいのであれば、いくつかのアイデアを提案します。

  1. 目標を設定する：休みの間に達成したいことややりたいことを明確にしましょう。それに向けて計画を立てることで、より充実感を得ることができます。
  2. 趣味や興味を追求する：自分の興味や趣味に没頭する時間を作ってみてください。読書、絵画、音楽、スポーツなど、あなたが楽しいと感じる活動を見つけましょう。
  3. 外出する：自然に触れたり、新しい場所を探索したりすることで気分転換になります。近所の公園を散歩したり、友人と会っておしゃべりしたりすることも良い方法です。
  4. インスピレーションを求める：映画や美術展、音楽コンサートなど、他の人の創造性や才能に触れることで自身のインスピレーションが湧くかもしれません。
  5. 自己ケアをする：リラックスしたり、身体を健康に保ったりするための活動に時間を費やしてみましょう。マッサージ、ヨガ、瞑想、健康的な食事などが含まれます。

重要なのは、過ごした時間に後悔するのではなく、次の休みを有意義に過ごすための学びとして受け入れることです。自分自身を過度に責めず、前向きになるよう心がけましょう。