OmniAICreator/Qiita-1.07M huggingface dataset:
【Bulma】input内のiconをクリックさせる

# TL;DR
Bulmaの`.control .has-icons-left/right .icon`には`pointer-events: none`が指定されてるからクリックに反応しないよ、というお話。

# やりたかったこと
input内に入れたiconをクリックするとinputの中身が消えたり隠れていたパスワードが表示されたりしたい！

# 書いてみた
```html:sample.html
<div class="control has-icons-right">
  <input type="text" class="input" id="input">
  <span class="icon is-small is-right" onclick="delete('input')">
    <i class="fas fa-times"></i>
  </span>
</div>
```
※JSの実装は省略

# 動かしてみた

押しても押してもクリックに反応しない！DevToolsで見てもイベントリスナはちゃんと付与されてるし、`要素.click()`でちゃんと発火するし、z-indexも十分大きいし…

…あれ？
```
.control.has-icons-left .icon, .control.has-icons-right .icon {
    color: #dbdbdb;
    height: 2.5em;
    pointer-events: none;　←これだ！！！
    position: absolute;
    top: 0;
    width: 2.5em;
    z-index: 4;
}
```

https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

# 直してみた
```diff_html:sample.html
<div class="control has-icons-right">
  <input type="text" class="input" id="input">
-  <span class="icon is-small is-right" onclick="delete('input')">
+  <span class="icon is-small is-right delete_icon" onclick="delete('input')">
    <i class="fas fa-times"></i>
  </span>
</div>
```
```css:sample.css
.delete_icon {
    pointer-events: all !important;
}
```

ちゃんと動いた。めでたしめでたし。
Xcode + Firebase sdk でビルドした時に、_OBJC_METACLASS_$_APMP と出る時の対処法

## 概要

`Firebase-sdk-ios`をswift package で入れて、
ビルドしようと思った時に、


![Screenshot 2023-09-07 at 16.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1840635/f67986a7-c9a6-0c89-4822-31b84015a9b8.png)

というエラーが出た時の対処法です。


## 解決策

Build Settings から
`Other Linker Flags`　に `-ld64`　を追加します。

下のところです。

![Screenshot 2023-09-07 at 16.08.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1840635/4ce9ae92-110e-eb79-73a1-4b8e1bb6a1ed.png)


以上！
ハッピーハッキング！
Cognos Analytics のLibertyのjavaプロセスのGCログ出力設定(Oracle Java版)

# Cognos Analytics のLibertyのjavaプロセスのGCログ出力設定(Oracle Java版)
以前こちらの記事を書いていました。
**Cognos Analytics のLibertyのjavaプロセスのGCログ出力設定**
https://qiita.com/shinyama/items/96c9e3f4d0addaa6ae0b

この手順はデフォルトでCognos Analyticsに組み込まれているIBM JREを使用した場合のもので、Oracle JREを導入してJAVA_HOMEで指定している場合、GCログ出力のためのbootstrap_wlp_winx64.xmlへの設定内容が違います。

色々と試してみてようやくGCログ出力できましたので、こちらに共有しておきます。
-Xと-XXの違いとか、+の有無とか、フルパス指定とか、細かいところご注意ください。

```html
<param>"-verbose:gc"</param>

<param> condName="${java_vendor}" condValue="Oracle">"-Xloggc:C:\Program Files\ibm\cognos\analytics\logs\cs_verbosegc_%t_%p.log"</param>

<param> condName="${java_vendor}" condValue="Oracle">"-XX:+UseGCLogFileRotation"</param>

<param> condName="${java_vendor}" condValue="Oracle">"-XX:NumberOfGCLogFiles=10"</param>

<param> condName="${java_vendor}" condValue="Oracle">"-XX:GCLogFileSize=10M"</param>
```
Railsの入力フォームのバリデーション作成方法

# モデルの作成
まず、メールアドレスを保存するためのモデルを作成します。例として、Userモデルを作成するとします。

```
rails generate model User email:string
```

# データベースのマイグレーション
次に、データベースにモデルの変更を反映させるためのマイグレーションを行います。

```
rails db:migrate
```

# コントローラーの作成
Userモデルにデータを保存するためのコントローラーを作成します。例として、Usersコントローラーを作成するとします。

```
rails generate controller Users
```

# ビューの作成
入力フォームを表示するビューファイルを作成します。app/views/users ディレクトリに、例として new.html.erb ファイルを作成します。

```
<!-- app/views/users/new.html.erb -->
<h1>New User</h1>

<%= form_with(model: @user) do |form| %>
  <div class="field">
    <%= form.label :email %>
    <%= form.text_field :email %>
  </div>

  <%= form.submit "Create User" %>
<% end %>
```

# コントローラーの設定
Usersコントローラーに、新しいユーザーを作成するアクションと、Userオブジェクトを作成するためのストロングパラメーターを設定します。

```
# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to root_path, notice: 'User was successfully created.'
    else
      render :new
    end
  end

  private

  def user_params
    params.require(:user).permit(:email)
  end
end
```

以上で、メールアドレスの入力フォームの作成が完了しました。ユーザーが新しいメールアドレスを入力して送信すると、createアクションが呼び出され、Userオブジェクトが作成されます

メールアドレスの入力フォームでメールアドレスしか入力できないようにするには、バリデーションを使用します。

```
# app/models/user.rb
class User < ApplicationRecord
  validates :email, presence: true, uniqueness: true, format: { with: URI::MailTo::EMAIL_REGEXP }
end
```

・presence: true は、メールアドレスが空でないことを確認します。
・uniqueness: true は、他のユーザーとメールアドレスが重複していないことを確認します。
・format: { with: URI::MailTo::EMAIL_REGEXP } は、メールアドレスが正しい形式であることを確認します。Railsでは、標準で URI::MailTo::EMAIL_REGEXP を使用してメールアドレスの形式をチェックできます。

入力フォームのエラー表示を追加すると何が問題か分かりやすくなります。

```
<!-- app/views/users/new.html.erb -->
<h1>New User</h1>

<%= form_with(model: @user) do |form| %>
  <div class="field">
    <%= form.label :email %>
    <%= form.text_field :email %>
    <% if @user.errors.any? %>
      <div class="error">
        <%= @user.errors[:email].join(', ') %>
      </div>
    <% end %>
  </div>

  <%= form.submit "Create User" %>
<% end %>
```

上記のコードでは、@user.errorsを使ってエラーメッセージを表示しています。

エラーメッセージの設定は、ロケールファイルを使ってエラーメッセージをカスタマイズする方法があります。
ロケールファイルを使用することで、複数の言語に対応するエラーメッセージを定義できます。
`config/locales`ディレクトリに、対象の言語に対応するロケールファイルを作成します。例えば、日本語のロケールファイルを作成する場合は、ja.ymlという名前のファイルを作成します。

```
# config/locales/ja.yml
ja:
  activerecord:
    errors:
      models:
        user:
          attributes:
            email:
              blank: "メールアドレスを入力してください。"
              taken: "このメールアドレスはすでに使用されています。"
              invalid: "無効なメールアドレス形式です。"
```

これにより、Userモデルのemail属性に対するエラーメッセージが日本語でカスタマイズされます。
Shift-JISで書かれたプログラムファイルの文字化けを直す

以下コマンドで現在の文字エンコーディングを確認
```
$ echo $LANG
C.UTF-8
```
文字エンコーディングをUTF-8に変更する
```
iconv -f SHIFT-JIS -t UTF-8 input.c -o output.c
```
【xarray】DataArrayをスクロールさせる (roll)

この記事では、以下のライブラリを用いる。

```Python
import xarray as xr
```

# DataArray.roll()
`DataArray`のメソッド`roll()`を使うと、`DataArray`の要素や座標をスクロールさせることができる。

次の`DataArray`を例として説明する。
```Python
array = xr.DataArray(['a','b','c'], dims='x', coords={'x': [0,1,2]})
array
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552468/2c8b7ae9-70ce-01dc-152d-5a551878d762.png)

## 使い方①
`roll()`の引数にスクロール量を指定する。

```Python
array.roll(x=1)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552468/20d7b6eb-389f-1c40-ad99-d31a815016d4.png)

負の数を指定すると逆向きにスクロールする。
```Python
array.roll(x=-1)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552468/497e1e93-e5bd-63ba-71ce-3f075176bfa1.png)

## 使い方②
`roll_coords`に`True`を指定すると、座標（`coordinate`）も同時にスクロールする。
```Python
array.roll(x=1, roll_coords=True)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552468/9b25d9ac-6672-ab78-e613-27cbce3517cf.png)

# 公式ドキュメント

https://docs.xarray.dev/en/stable/generated/xarray.DataArray.roll.html
RDS Proxyのログが自動的に無効化される

# 突然無効化された
RDS Proxyのログが突然無効化されてしまいました。

- 有効化
![スクリーンショット 2023-09-07 16.16.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/2efecd53-ba77-7a92-7c08-40dfe79e3fb1.png)

- 無効化
![スクリーンショット 2023-09-07 16.16.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/4a7f1e2f-d7eb-d4c4-a921-9dc50f812c0e.png)

- 原因
24時間後に自動的に、オフされる仕様となってました。
> プロキシに関連するオーバーヘッドを最小限に抑えるために、この設定は有効にしてから 24 時間後に RDS Proxy によって自動的にオフにされます。特定の問題のトラブルシューティングを行うには、その設定を一時的に有効にします。

https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/rds-proxy-setup.html#rds-proxy-creating

- 対策
引き続き調査しところ、あくまでこちらは拡張機能であることが判明。有効化することで細かいログを取得できるとのこと。
無効化のままでもログは出力されるため、無効化のまま本番運用することになりました。
cscの作法 その445

# 概要
cscの作法、調べてみた。
練習問題、やってみた。

# 練習問題
sqliteでレコード数を数えよ。

# 方針
- ExecuteScalar使う。

# サンプルコード

```

using System;
using System.Data;
using System.IO;
using System.Text;
using System.Collections.Generic;
using System.Data.SQLite;

public static class Program {
	public static void Main(params string[] args) {
		SQLiteConnectionStringBuilder ConnectionStr = new SQLiteConnectionStringBuilder();
		ConnectionStr.DataSource = "db0.sqlite";
		using (SQLiteConnection Connection = new SQLiteConnection(ConnectionStr.ToString()))
		{
			Connection.Open();
			using(SQLiteCommand Command = new SQLiteCommand(Connection))
			{
				Command.CommandText = "SELECT count(*) FROM adata";
				string count = Command.ExecuteScalar().ToString();
				Console.WriteLine(count);
			}
		}
	}
}


```

# 実行結果

```
>lite10
824

```

以上。
ManjaroでXorgが起動しなくなった際の修正

# 発端
私はメインマシンにManjaro linuxを入れているのですが、使っているnvidiaグラフィックドライバがどうにも不安定でダウングレードを試そうとしてみました。
結果、ソフトウェア構成を破壊しXの起動が不可に。
同じ状況にハマった方々への救いとなれば幸いです。
自戒(笑)を兼ねて書き連ねておきます。

# 状況
KDEなので元々nvidiaと相性が悪いことは承知していましたが、OpenGLなどでも不安定で使えたものじゃないとダウングレードを試みました。
nvidiaドライバをダウングレードしようとし、いったんアンインストールして再起動を試みました。
が、再起動後ディスプレイは真っ暗なまま、いつまで経ってもXは起動せず。

# 修復
Ctrl+Alt+F2とかでttyにログインできたらログと構成情報を確認。
(一部のコマンドは実行にroot権限が必要になります。sudo su -するかコマンドの頭にsudoをつけてください。)
```
less /var/log/Xorg.0.log
```
すると
```log:/var/log/Xorg.0.log
vesa: Refusing to run, Framebuffer or dri device present
vesa: Refusing to run, Framebuffer or dri device present
Fatal server error: (EE) no screens found
xinit: giving up
xinit: unable to connect to X server: Connection refused
xinit: server error
```
エラーを吐いています。vesaが問題を起こしているようです。
この場合は
```
sudo rm /etc/X11/mhwd.d/vesa.conf
```
でvesaの設定を初期化すると治るようです。筆者はこれで修復できました。

#### 他の修正手段
これだけでは治らないこともあります。その場合は他の手順を試してください。
video-vesaをアンインストール
xf86-video-fbdevをインストール

# 最後に
ドライバの扱いには気をつけましょう
痛い目を見ます

# 参考
書き忘れてました。
https://forum.manjaro.org/t/after-last-update-only-cli-and-startx-error/115039
IoTシステムを構成する要素は何？

# はじめに
IoTシステムとは、(Internet of things、モノのインターネット）とは、すべてのものがインターネットを介してつながるようになるという概念になります。IoTでは、情報端末だけではなく、家電や自動車、住宅や事務所、ICタグ、や産業機器・設備といったモノ同士の自律的なやり取りによって得られたデータを、インターネット通じて情報を蓄積・分析・学習することで知見を得て、その知見を現実世界にフィードバックしています。

# デバイス層とシステム層がネットでつながる

IoTと近い概念とされるM2Mは、モノ同士の自律的なやり取りによって正確かつリアルタイムな制御につなげる概念です。
現在、IoT導入が進んでいる工場で使われるIoTシステムは通常、各種センターが組み込まれた産業機器・設備(センサデバイス層）、センターからのデータを取得する無線機器(デバイスネットワーク層）、インターネット層、データを蓄積するサーバ(IoTシステムサーバ層）、データ分析・学習するシステム(IoTシステムアプリケーション層）で構成されることになります。

# LPWA、IoE、WoT
IoTシステムではしばしば、接続されるものが非常に多く、電源供給が容易でないため、帯域が狭く消費電力の低い無線技術が必要になっていきます。
そこで注目されるのが、LPWAと呼ばれる無線通信技術になります。
LPWAのうち無線局免許が不要なアンライセンス系のLPWAであれば、企業レベルでも運用可能である。

IoE(intemet of Things)はモノだけでなく、ヒトや場所などがインターネットにつながる概念になります。
年におけるスマートメーターを利用した水道やごみの管理が可能になる。

WoT(Web of Things)は既存のWeb技術やプロことるを利用してIoTのサービスを提供するという概念になります。

# IoTとM2M
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3530029/f4f76432-a088-7429-6b99-97c8cd2e72ec.png)
違いはサービスを提供するネットワーク範囲

# IoTシステムの構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3530029/e1095a78-a62f-e05c-4911-bae67d0937c7.png)

センサーやデバイスからのデータを収集・蓄積・分析することで価値につなげる

# IoTのメリット・デメリット
メリット
・効率性の向上
・コスト削減
・予測メンテナンスとリスク管理
・新しいビジネスモデルとイノベーション

デメリット
・セキュリティとプライバシー懸念
・技術的な複雑さと互換性の問題
・初期投資が高い


# ■カジュアル面談受付中
下記からスケジュール設定可能となります。
https://t.co/TfUrQzPhQr

# ↓↓↓こちらのセミナーもご検討ください↓↓↓

▼【Engineer Meetup #１】エンジニア交流会▼
　《9/13（水）18:00～21:00 場所:AKKODiS本社オフィス》
https://job.axol.jp/jn/c/akkodis_career/entry_cxJl3n0N64LU04LVg/input

▼～キャリア変遷・年収推移全公開！～年収600万のインフラエンジニアが年収1,200万越えのデータサイエンティストになるまで▼
《9/15（金）19:00～21:00 オンライン開催》
https://techplay.jp/event/917353

★Twitterもやってますので、是非フォローお願いします★
https://twitter.com/A831SS336O
Databricksクラスター上でstreamlitを動かしてみる

:::note warn
こちらで紹介しているアプローチ(Driver Proxy)は実験目的で使うことをお勧めしているものであり、Databricksで動作を保証しているものではありません。現在は[Databricks Apps](https://docs.databricks.com/aws/ja/dev-tools/databricks-apps/)を使用することをお勧めします。
:::


これまでローカルで動かしていた自分は一体…。

こちらの記事のおかげです！これでLLMのチャットボット構築の環境がコンパクトになります。

https://qiita.com/isanakamishiro2/items/152f2b9bd73a0145ed8b

# streamlitファイルの準備

ワークスペース上のpyファイルとして実装します。

```py:/Workspace/Users/takaaki.yayoi@databricks.com/20230820_openai_stream/streamlit.py
import streamlit as st

st.set_page_config(
    page_title="streamlit driver proxyサンプル",
    page_icon="📝",
)

st.title("Streamlit driver proxyサンプル")
```

# streamlitの起動

別にノートブックを作成し、あとは上の記事に従います。

```py
%pip install streamlit
```

```py
from dbruntime.databricks_repl_context import get_context

def front_url(port):
    """
    フロントエンドを実行するための URL を返す

    Returns
    -------
    proxy_url : str
        フロントエンドのURL
    """
    ctx = get_context()
    proxy_url = f"https://{ctx.browserHostName}/driver-proxy/o/{ctx.workspaceId}/{ctx.clusterId}/{port}/"

    return proxy_url

PORT = 1501

# Driver ProxyのURLを表示
print(front_url(PORT))

# 利便性のためにリンクをHTML表示
displayHTML(f"<a href='{front_url(PORT)}' target='_blank' rel='noopener noreferrer'>別ウインドウで開く</a>")
```

以下のようにハイパーリンクが表示されます。
![Screenshot 2023-09-07 at 15.53.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/2f42df52-1ddc-05d2-6deb-48ca135466b1.png)

[上で作成したpyファイル](#streamlitファイルの準備)のパスをコピーします。ワークスペースブラウザで**コピー > パス**で取得できます。
![Screenshot 2023-09-07 at 15.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/37662398-3f14-ebbd-a2f2-d92a71f1c994.png)

以下のコマンドでstreamlitを起動します。

```py
streamlit_file = "/Workspace/Users/takaaki.yayoi@databricks.com/20230820_openai_stream/streamlit.py"

!streamlit run {streamlit_file} --server.port {PORT}
```

動きました！元記事を書いていただいた方ありがとうございます！
![Screenshot 2023-09-07 at 15.57.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/6a85116f-16d3-808a-39b5-9c04da058822.png)



### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
VanJSでhead情報を動的に追加・変更する方法

## はじめに

VanJSでは`van.tags`でタグの関数を変数として宣言できますが、実はhead内で使用する`head, link, meta, style, title`などのタグも宣言することができます。これらのタグを利用すれば動的にhead情報を追加・変更できるので、その方法をご紹介します。

## デモ

https://mori-goq.github.io/vanjs-head/

## リポジトリ

https://github.com/mori-goq/vanjs-head

## コード

`van-1.1.3.nomodule.min.js`ファイルは公式サイトからダウンロードしてください。

https://vanjs.org/start

```tree
├── index.html
└── main.js
└── style.css
└── style2.css
└── van-1.1.3.nomodule.min.js
```

`index.html`に以下コードをします。**あえてhead情報は何も入れていません。**

```html:index.html
<!doctype html>
<head></head>
<html lang="en">
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="van-1.1.3.nomodule.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>
```

`cssPath`でcssファイルのパスを変更することで、読み込むcssファイルが変更されます。

```javascript:main.js
const cssPath = van.state('style.css')

const Head = () => {
  const { meta, title, link } = van.tags

  // head直下に追加するため、配列で返す（React.Fragmentみたいな）
  return [
    meta({ charset: 'UTF-8' }),
    meta({
      name: 'viewport',
      content: 'width=device-width, initial-scale=1.0',
    }),
    title('vanjs-head'),
    // cssのパスを変数にして、動的に変更できるようにしている
    link({ rel: 'stylesheet', href: cssPath })
  ]
}

// headタグに追加
van.add(document.head, Head())

const App = () => {
  const { div, button } = van.tags

  return div(
    button(
      { type: 'button', onclick: () => (cssPath.val = 'style.css') },
      'style.css',
    ),
    button(
      { type: 'button', onclick: () => (cssPath.val = 'style2.css') },
      'style2.css',
    ),
  )
}

// bodyタグに追加
van.add(document.body, App())
```

```css:style.css
body {
  background-color: #faa;
}
```

```css:style2.css
body {
  background-color: #afa;
}
```

## まとめ

VanJSでhead情報を動的に追加・変更する方法をご紹介しました。実際にhead情報を動的に変更する場面は少ないかもしれませんが、例えばダークモード・ライトモードの切り替えで読み込むcssファイルを変えるなどであれば使い所はあると思います。

## 最後に

### GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site?qiita=928a8007cf2cb92dac17
Angular：RouterとGuardのサンプル

## 前書
* 個人勉強メモ、ご参考まで
* 参照先：https://github.com/codecraft-tv/angular-course/tree/current/12.routing/

## RouterとGuard一緒に説明

* TSの部分を説明する

```typescript:app.module.ts
import { NgModule } from '@angular/core';

// Router、Guard関連モジュールをインポート
import { RouterModule, Routes, CanActivateChild, CanActivate } from '@angular/router';

// 自作のComponentをインポート
import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

// ChildのGuard用クラスを実装
class AlwaysAuthChildrenGuard implements CanActivateChild {
  canActivateChild() {
    console.log("AlwaysAuthChildrenGuard");
    return true;
  }
}

// 一般なGuard用クラスを実装
class Guard1 implements CanActivate {
  canActivate() {
    console.log("Guard1");
    return true;
  }
}
class Guard2 implements CanActivate {
  canActivate() {
    console.log("Guard2");
    return true;
  }
}

// Routerデータ
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  {
    path: '',
    component: LayoutComponent,
    canActivateChild: [AlwaysAuthChildrenGuard], // ChildのGuardを設置
    children: [
      { path: 'home', component: HomeComponent, canActivate: [Guard1] }, // 一般なGuardを設置
      { path: 'login', component: LoginComponent, canActivate: [Guard2] }, // 一般なGuardを設置
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  declarations: [
    AppComponent,
    LayoutComponent,
  ],
  // DIでロードする
  providers: [
    AlwaysAuthChildrenGuard,
    Guard1,
    Guard2
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
* HTMLの部分以下です。

```html: htmlのテンプレート
<router-outlet></router-outlet>
```

* 実行結果は、CanActivateChildが先に実行され、その後CanActivateが実行
AlwaysAuthChildrenGuard
Guard2

## 追記：Guardで遷移
* 差分は下記です。
```typescript:app.module.ts
import { NgModule, Injectable } from '@angular/core';
import { RouterModule, Routes, Router, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivateChild, CanActivate } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({providedIn: 'root'})
class Guard1 implements CanActivate {
  constructor(private router: Router) { }
  
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      console.log("Guard1");
      return this.router.navigate(['login']);
    }
}
```
AWS Lambdaのruntimeがgo1.xになっているLambdaをprovided.al2に変更する

## AWSからの変更

Lambdaは、2023年12月31日に予定されているAmazon Linux 1のサポート終了に伴い、`go1.x`ランタイムを廃止します。

AWSから記事が出てます：
https://aws.amazon.com/jp/blogs/compute/migrating-aws-lambda-functions-from-the-go1-x-runtime-to-the-custom-runtime-on-amazon-linux-2/


> 現在、LambdaでGoを使用するお客様は、`go1.x`ランタイムを使用するか、`provided.al2`ランタイムを使用することができます。今後、`go1.x`ランタイムは、現在2023年12月31日に予定されているAmazon Linux 1のサポート終了に合わせて非推奨となる予定です。

それで生のGoファイルのサポート無きなります。それで生のGoファイルを利用してるLambdaが使えなくになりますので移行する必要があります。

## 移行する方法

Goのruntimeが全部なくなりますのでruntimeを変更しなきゃいけないです、`provided.al2`　がおすすめされてます。

### Goをコンパイルする

Goファイルを使えないくになりますですが、GoをコンパイルするとBinaryファイルになります、それはLinuxのシステムを実行出来ます！

コンパイル済みのGoアプリケーションをLambda上で実行するには、コードをLinux用にコンパイルする必要があります。`go1.x`ランタイムでは任意の実行ファイル名を使用できますが、`provided.al2`ランタイムでは`bootstrap`を実行ファイル名として使用する必要があります。macOSとLinuxでは、ビルド・コマンドの最も単純な形式を以下に示します：

```bash
$ GOARCH=amd64 GOOS=linux go build -o bootstrap main.go
```
このビルドコマンドは、Lambda用の`x86_64`命令セットと互換性のある`bootstrap`と呼ばれるGoバイナリファイルを作成します。AWS Gravitonプロセッサ用にコンパイルするには、前のコマンドで`GOARCH=arm64`を設定します。

それでZipして、アップロード出来ます！
```bash
$ zip myFunction.zip bootstrap
$ aws lambda update-function-code --function-name XXX --zip-file fileb://./bootstrap.zip
```

設定はこんな感じになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878226/23c2479a-0741-16e7-8da4-cb112064dda7.png)

:::note alert
handlerの名前は`bootstrap`で必須、ファイルの名前も`bootstrap`が必須
:::

Windowsでコンパイルするユーザーのために、GoはLinux仮想マシンやビルド・コンテナを使用せずにLinux用のコンパイルをサポートしている。ただし、LambdaはPOSIXファイルパーミッションを使用するので、正しく設定する必要があります。Lambdaには、Lambdaで有効なデプロイメント・パッケージをビルドするヘルパー・ツールが用意されています。このツールの既存ユーザーは、最新バージョンにアップデートして、ビルドスクリプトが最新であることを確認してください。

### Dockerイメージを使う

以下のDockerfileでは、最終イメージに不要なレイヤーやファイルが入らないように、2段階のビルドを使用しています。プロセスの最初のステージはアプリケーションをビルドします。このステージではGoをインストールし、コードの依存関係をダウンロードし、バイナリをコンパイルします。第二段階では、ビルドプロセスの依存関係なしに、実行可能ファイルを新しいコンテナにコピーします。

```dockerfile name:Dockerfile
FROM public.ecr.aws/lambda/provided:al2 as build
# install compiler
RUN yum install -y golang
RUN go env -w GOPROXY=direct
# cache dependencies
ADD go.mod go.sum ./
RUN go mod download
# build
ADD . .
RUN go build -tags lambda.norpc -o /main
# copy artifacts to a clean image
FROM public.ecr.aws/lambda/provided:al2
COPY --from=build /main /main
ENTRYPOINT [ "/main" ]  
```
dockerをbuildして
```bash
$ docker build -t hello-world .
```
Amazon ECR registryにログインして、登録する
```bash
$ aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin 123456789012.dkr.ecr.us-east-1.amazonaws.com 
```
Amazon ECR registryにタグとプッシュして
```bash
$ docker tag hello-world:latest 123456789012.dkr.ecr.us-east-1.amazonaws.com/hello-world:latest
$ docker push 123456789012.dkr.ecr.us-east-1.amazonaws.com/hello-world:latest
```

## まとめ

両方が使えます、自分ならgoのコンパイルは使いやすい（そのまま）ですがDockerを管理する方が管理しやすいだと思います。
Windowsのインストールパッケージ用語多すぎ問題

Windowsアプリを開発しようとしたときに突き当たる問題。そもそも、何の省略形かがわからないので頭に入らない。
間違いもあるかも、徐々に更新していく予定。


## .exe形式
代表：Setup.exe

## .msi形式
Windows Installerが標準で利用する形式
ソフトウェアの圧縮されているパッケージとレジストリ情報のみをまとめたファイルで、このファイル単体ではインストールを行うことはできません。


## .msix形式
MSIX パッケージ形式では、Win32、WPF、Windows フォームのアプリに対応

MSI、.appx、App-V、ClickOnce の優れた機能を組み合わせた Windows アプリのパッケージ形式
MSIXファイルは、Windows 10、Windows 11、およびWindows Server 2016以降でサポートされています。

ファイル形式	msixファイルはzip圧縮されており、すべてのファイルがパッケージファイル内に含まれています。アプリ関連のファイルに加えて、msixファイルには、アプリのインストールに関連する情報を含む.xml構成ファイルが含まれています。
サポートされているプラ??ットフォーム	MSIXファイルは、Windows 10、Windows 11、およびWindows Server 2016以降でサポートされています。
アプリタイプ	MSIXファイルを使用して、Win32、UWP、および.NETフレームワークアプリをパッケージ化できます。

## .msixbundle
## .msixupload

## .appx
APPX ファイルは、アプリケーションの配布とインストールに使用される配布可能なパッケージ ファイル形式です。 Windows 8 で導入され、Microsoft Windows Store で公開されました。 Windows アプリケーションのインストールに必要なすべてのファイルが含まれています。これらには、メタデータ、ファイル、資格情報が含まれます。より最新のパッケージ ファイル形式は MSIX であり、APPX と比較して現在より一般的に使用されています。

## .appxbundle
APPXBUNDLE ファイルは、Microsoft Visual Studio で作成されたパッケージ ファイルであり、Microsoft Store での Windows アプリ (デスクトップと UWP の両方) の配布に使用されます。。これには、x86、x64、ARM などの特定のプロセッサ アーキテクチャを対象とするアプリの 1 つ以上のバージョンが含まれています。これにより、エンド ユーザーは、コンピューター アーキテクチャに基づいて適切なバージョンのアプリを受け取り、展開できます。 APPXBUNDLE ファイルは、標準の ZIP ファイル形式を使用してグループ化されます。 Microsoft Visual Studio の Publish メソッドを使用して、アプリをバンドルとして公開します。単一パッケージ アプリは APPX ファイルとして配布されます。

## .appxupload
APPXUPLOAD ファイルは、Microsoft Store にアップロードするための複数のアプリ パッケージまたはアプリ バンドルを含む単一のパッケージ ファイルです。これは、開発者が Microsoft Store に公開するためにアプリをパッケージ化するときに、Microsoft Visual Studio によって自動的に生成されます。ストア/アプリ/ウィンドウ)。 APPX ファイルに加えて、APPXUPLOAD ファイルには、Microsoft Store に公開された後にアプリのパフォーマンスを分析するシンボル ファイルが含まれています。

## .xap


## .zip
通常、PortableかInstallerのどちらかのexeが入ってる
Portableはインストールしないでexe実行で使えるもの。
インストーラはsetup.exeかsetup.msiあたりが入ってるかな。

## PWA、デスクトップPWA
Progressive Web App

## UWP
Universal Windows Platform app
UWP アプリは、WinRT API を使用して、インターネットに接続されたデバイスに適した、強力な UI と高度な非同期機能を提供します。

## NSIS
Nullsoft Scriptable Install System

NSIS (Nullsoft Scriptable Install System) is a professional open source system to create Windows installers. It is designed to be as small and flexible as possible and is therefore very suitable for internet distribution.

Windowsインストーラを作成するためのプロフェッショナルなオープンソースシステムです。

## Squirrel
Squirrel is both a set of tools and a library, to completely manage both installation and updating your Desktop Windows application, written in either C# or any other language (i.e., Squirrel can manage native C++ applications).

Squirrel uses NuGet packages to create installation and update packages, which means that you probably already know most of what you need to create an installer.

デスクトップWindowsアプリのインストールと更新を管理するためのツールセットかつライブラリ

## デスクトップブリッジ




## 参考

- https://docs.fileformat.com/ja/programming/appx/

- https://github.com/Squirrel/Squirrel.Windows
Azure SQL Database にて指定したスキーマと断片化率に応じたインデックスを再構築するコード

## コード

Azure SQL Database にて指定した断片化率以上のインデックスを再構築するコードを共有します。Github Copilot にて生成した SQL を変更しました。

```sql
DECLARE @TargetFragmentation FLOAT = 30
DECLARE @TargetSchemaName NVARCHAR(255) = 'dbo'
DECLARE @TableName NVARCHAR(255)
DECLARE @IndexName NVARCHAR(255)

DECLARE FragmentedIndexes CURSOR
FOR
SELECT TableName = t.name
	,IndexName = i.name
FROM sys.dm_db_index_physical_stats(DB_ID(), NULL, NULL, NULL, NULL) s
INNER JOIN sys.indexes i ON s.object_id = i.object_id
	AND s.index_id = i.index_id
INNER JOIN sys.tables t ON i.object_id = t.object_id
INNER JOIN sys.schemas s2 ON t.schema_id = s2.schema_id
WHERE s.avg_fragmentation_in_percent > @TargetFragmentation
	AND s2.name = @TargetSchemaName

OPEN FragmentedIndexes

FETCH NEXT
FROM FragmentedIndexes
INTO @TableName
	,@IndexName

WHILE @@FETCH_STATUS = 0
BEGIN
    PRINT 'Rebuilding index ' + @indexName + ' on table ' + @tableName + ' with fragmentation ' + CONVERT(NVARCHAR(10), @avgFragmentation) + '%';

	EXEC ('ALTER INDEX ' + @IndexName + ' ON ' + @TableName + ' REBUILD WITH (ONLINE = ON)')

	FETCH NEXT
	FROM FragmentedIndexes
	INTO @TableName
		,@IndexName
END

CLOSE FragmentedIndexes

DEALLOCATE FragmentedIndexes
```

## Github Copilot の質問内容と回答

```text
Azure SQL Database にて、指定したスキーマのインデックスの 断片化率が30パーセント以上の場合に再構築する T-SQL を作成してください。
```

```sql
DECLARE @schemaName NVARCHAR(128) = 'YourSchemaName';
DECLARE @tableName NVARCHAR(128);
DECLARE @indexName NVARCHAR(128);
DECLARE @avgFragmentation FLOAT;

DECLARE tableCursor CURSOR FOR
SELECT t.name, i.name, s.avg_fragmentation_in_percent
FROM sys.indexes i
INNER JOIN sys.objects t ON i.object_id = t.object_id
INNER JOIN sys.dm_db_index_physical_stats(DB_ID(), NULL, NULL, NULL, NULL) s ON i.object_id = s.object_id AND i.index_id = s.index_id
WHERE t.schema_id = SCHEMA_ID(@schemaName) AND s.avg_fragmentation_in_percent > 30;

OPEN tableCursor;

FETCH NEXT FROM tableCursor INTO @tableName, @indexName, @avgFragmentation;

WHILE @@FETCH_STATUS = 0
BEGIN
    PRINT 'Rebuilding index ' + @indexName + ' on table ' + @tableName + ' with fragmentation ' + CONVERT(NVARCHAR(10), @avgFragmentation) + '%';
    EXEC ('ALTER INDEX ' + @indexName + ' ON ' + @schemaName + '.' + @tableName + ' REBUILD;');
    FETCH NEXT FROM tableCursor INTO @tableName, @indexName, @avgFragmentation;
END

CLOSE tableCursor;
DEALLOCATE tableCursor;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/c1467ee6-c77c-2d4f-f316-4ef22a58feae.png)
初学者による初学者のためのpandasでEDA～データ抽出編～

# EDAをする際にpandasなどのライブラリを用いた文法

【環境】
<d1>
 <dt> Google Colab </dt>
 <dt> Python ver.1.5.3 </dt>
</d1>

【データ】
plotly_express に登録されている「Gapminder」


## pandasを使って超初歩なデータ抽出
### まずはデータ操作の準備
①pandasとplotly_expressをインポート
```python 
import pandas as pd
import plotly_express as px
```

②「Gapminder」のデータをデータフレーム化する
```python
df = px.data.gapminder()
```

③どのようなデータか確認
```python
df
```
出力結果↓
![スクリーンショット (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/a5571b5d-af42-9d47-e4c0-a5a0b1488f2a.png)

### たとえば、'year'のカラムに入っているデータを抽出したいとき
```python
df['year']
```
出力結果↓
![スクリーンショット (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/b104f548-5803-e5d7-7921-cef85990ab68.png)
Serieseで抽出される
![スクリーンショット (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/72721f01-22ef-644a-daca-406c62701fa7.png)

### locを使った抽出方法
'pop'列のデータをすべて抽出してみる。:(コロン)は「すべて」という意味。
```python
df.loc[:, 'pop']
```
出力結果↓
![スクリーンショット (17).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/a890958b-2caa-0fd6-c785-4cc399460409.png)

:ではなく、行を指定して抽出できる。
```python
df.loc[2:30, 'pop']
```

出力結果↓
![スクリーンショット (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/2676329f-b6b1-e6cd-bf76-98f9a05a4aec.png)

'pop' だけでなく、リストを渡して複数のカラムを指定することもできる
```python
df.loc[0:10, ['continent', 'pop']]
```
出力結果↓
![スクリーンショット (22).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/b2393cac-20c2-5bbd-e778-d42600733716.png)


### iloc = 'pop'のようなキーワードではなく、インデックス/カラム番号を指定して抽出する

```python
df. iloc[:, 3]
```
出力結果↓
![スクリーンショット (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/89839c6e-2c55-29e8-f4ed-bad77911fef8.png)

カラム番号 3 の 'lifeExp' のデータが出力できる
![スクリーンショット (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/efe03415-e1db-6dd6-b31c-61aed71d8083.png)

loc 同様、リストを渡して複数のカラムを指定することもできる
```python
df.iloc[:, [1, 2, 3]]
```
出力結果↓
![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/a997ed75-c8e3-94a1-cedb-b5e7ae2136ac.png)

### Tを使い、カラムとインデックスの配置を逆にする(転置)

```python
df.T
```
出力結果↓
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329774/a0707fcf-ee7f-6a35-4bd0-93db3537fba3.png)

本日は以上です。
最後までお読みいただき、ありがとうございました。
【退職エントリ】30代で従業員を大切にしない会社で働くというリスク

## マーケティングアナリストの世界へ


簡単に経歴を話すと、

１．塾講師
２．システムエンジニア（バックエンド）
３．データアナリスト、コンサルタント（ベンチャー）
４．アナリストマネージャー（現職）

と、普通の人よりも転職してるかな？と言った感じで、現在所属している企業についても近々退職が決まっています。

転職に関しては、他の人よりハードルが低く、30代のうちにある程度大きい会社でデータ関連のPMやりたいな～と
のほほん働いていた33歳の男です。

無事に転職先も決まったので退職エントリをつらつらと、主観も客観も入れながら書いていきます。

---

現職に勤め始めたのが31歳。
もともとベンチャーがコロナの煽りでアナリティクスできなくなるって話で転職しました。

入ってみて数カ月で感じたのが、
「なんかめちゃくちゃピリピリしてんな」。

いや、なんというか転職してすぐのときって
「活躍するぞ～！」みたいな変なアドレナリンのようなものが噴出すると思っていて

そんなアドレナリンがでているときにすらピリピリ感じちゃうってやばくね？って思ってました。

細かく調べてみると超ブラック企業の派生？で出来た会社っぽく、
上層部も元々その企業出身の人多かったことがわかり
「うっわ、やったわ」って大反省しました。

30代の転職って20代のころの転職とは違うんですよね。
特に企業に向き合うマインドが。

前任者からの引き継ぎも大してなく、
ほぼ１からすべてを覚える必要があり、
上長に何度も煽られましたｗ
（今となっては様々なことを学べたのでばっちり感謝しています）


一番きつかったのが
【アウトプットをし続けなければ人権はない】といった企業色で、

私個人としては、一応人権がある側だったのでノンストレスで働けていたのですが、
まわりの若い子だったり、個人的に仲の良い人たちだったりが、
ひどい扱いを見ているのが本当につらい。

詳細は記載しませんが、
自分自身の何かが崩れていくのをひしひしと感じてしまいました。

転職を考え始めたのは、その感覚が強くなってきてからです。

で、振り返ってみて現状と未来を考えてみたわけです。

##### <strong>５年後に自分は「この会社で働いているんだ！」と大きな声で言えるのか？と

働いてきた数年、把握した内情と現在の気持ちとを照らし合わせ、
５年後、自分のまわりにいる人に自信を持って言えるのか

何度考えてもNoでした。
学べる環境はある。新しいこともやらせてもらえる。
そんな（個人的に）恵まれた環境でも、やはり組織の価値観と個人の価値観がマッチしないと
堂々と生きていけない。

自分が働いている場所を堂々と言えないなんて、少なくとも私は嫌でした。

個人としては現在の職場に感謝しかありません。
tableauもweb解析も、初挑戦から形になったのは周りに恵まれからです。

ただ30代になると、「成長」や「挑戦」だけでは考えられなくなりました。
それは、環境が人間に与える影響、その影響が自分自身でもわからないレベルで変化していくことを理解したからだと思います。

５年後に自分が何をしてどんな人間になっているか。
まだまだ想像もつかないけど、自分が求める理想像へ変化できる可能性の高い環境で働きつつ、周囲にいる人の理想像も考えられる人間になりたいな～と思ってます。

----
【Chakra UI】Transitionsコンポーネントの挙動を変更したい！

## この記事でできること

Chakra UI の **Transitionsコンポーネント** の挙動を変更する。


## 解決したいこと

Chakra UIには、良く使われるトランジションがコンポーネントとして用意されている。

https://chakra-ui.com/docs/components/transitions

デフォルトだと動きが早いので、遅くしたい。
しかし、公式ドキュメントの上記のページには`duration`や`easing`を設定できそうなプロパティの説明が書かれておらず、悩んだ。


## 解決策

以下の通り、 **transitionプロパティ** をコンポーネントに追加することで`duration`や`easing`を設定することができた。

### 例

```diff_jsx
import { Box, Button, Container, SlideFade, useDisclosure } from "@chakra-ui/react"

export default function SlideFadeEx() {

  const { isOpen, onToggle } = useDisclosure();

  return (
    <Container mt="80px">
        <Button onClick={onToggle}>Click Me</Button>
        <SlideFade
            in     ={isOpen}
            offsetX="80px"
+           transition={{
+               enter: {
+                   duration: 2, 
+                   ease    : "easeOut",
+               },
+               exit: {
+                   duration: 2,
+                   ease    : "easeIn"
+               }
+           }}
        >
            <Box
                p      ="40px"
                color  ="white"
                mt     ="4"
                bg     ="teal.500"
                rounded="md"
                shadow ="md"
            >
                SlideFadeコンポーネントにeasingを設定したい！！！
            </Box>
        </SlideFade>
    </Container>
  )
}
```

↓ [SlideFadeコンポーネント](https://chakra-ui.com/docs/components/transitions#slide-fade-transition) のデフォルトの動き ↓
![デフォルト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/54cb5286-8efc-137e-1307-baecfd867b87.gif)
↓ 上記ソースコードの表示結果 ↓
![easing設定後.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/e7daf49f-3d43-df61-7c28-088e4f294dc1.gif)

### 解説

transitionプロパティでは以下の設定ができる。（どちらかだけ設定することも可能）
| 属性名   | 設定できる内容            |
|:-------:|:------------------------:|
| `enter` | 要素が**現れるとき**の設定 |
| `exit`  | 要素が**消えるとき**の設定 |

`enter / exit` はそれぞれ **Framer Motion** の **Transition** と同じプロパティを持つ。

https://www.framer.com/motion/transition/

上記の例で設定したプロパティは以下の通り。
| 属性名                                                              | 設定できる内容      |
|:------------------------------------------------------------------:|:------------------:|
| [`duration`](https://www.framer.com/motion/transition/###duration) | アニメーションの長さ |
| [`ease`](https://www.framer.com/motion/transition/###ease)         | 既存のイージング関数(※) or ベジェ曲線を表す数字の配列 |

(※) Framer Motionには**以下の関数のみ**組み込まれている。
- `"linear"`
- `"easeIn"`, `"easeOut"`, `"easeInOut"`
- `"circIn"`, `"circOut"`, `"circInOut"`
- `"backIn"`, `"backOut"`, `"backInOut"`
- `"anticipate"`


## 参考サイト
- [Chakra UI - Transitions](https://chakra-ui.com/docs/components/transitions)
- [Chakra UI - SlideFadeコンポーネント](https://chakra-ui.com/docs/components/transitions#slide-fade-transition)
- [Chakra UI - Containerコンポーネント](https://chakra-ui.com/docs/components/container)
- [Chakra UI - Buttonコンポーネント](https://chakra-ui.com/docs/components/button)
- [Chakra UI - Boxコンポーネント](https://chakra-ui.com/docs/components/box)
- [Framer Motion - Transition](https://www.framer.com/motion/transition/)
GitHubのダッシュボードが悪く改悪されたので戻した

## 何が起きた？

### 1. 2023年9月7日頃、GitHubのダッシュボードが改悪された

どうでもいい情報ばっかりで、重要な情報がなくなった

### 2. GitHubのディスカッションを見た

阿鼻叫喚だった

https://github.com/orgs/community/discussions/13130

https://github.com/orgs/community/discussions

### 3. 元に戻すスクリプトを発見した

ご利用は自己責任で

https://github.com/orgs/community/discussions/66260

別の実装（試してない）

https://github.com/Gerrit0/old-github-feed

### 4. 元に戻した

１．Tampermonkey のインストール（昔からあるページを書き換えるツール）

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

２．スクリプトをインストールした

https://greasyfork.org/ja/scripts/474720-github-feed-back

### 5. おしまい

前の画面に戻った
InSpec スキャン項目をチューニングする

https://www.chef-sec.com/inspec_cis-stig_security_scan/

上記で説明されているInSpecのスキャン項目のカスタマイズ/チューニング方法のやり方を紹介します。

## コードのコメントアウト

下記の`CIS Red Hat Enterprise Linux 8 Benchmark v2.0.0` の項目`1.1.1.1`のスキャンや修正をスキップするためにコードを修正していきます。

![capture 2023-09-07 13.48.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551937/d1b64685-3e22-6ef7-345b-8f6ac572a630.png)

＊cramfsのマウントがdisableになっている必要があるようです。

Progress Chefから提供されるテストコードや自動修正コードは、これらを監査し自動修正するようになってしまっています。次のコードが実行箇所になります。

![capture 2023-09-07 13.55.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551937/aeba7d51-6a94-a856-85ef-dccf7848a47b.png)

（一部黒塗りにして隠しているのは、顧客にProgress Chef社が提供するコードであるため一般に公開することができないためです。）

上記のままでは、項目`1.1.1.1`のスキャンや修正が実行されてしまうため、コメントアウトする必要があります。次にようにコードの先頭に `#` を入力することでコードをスキップさせることができます。

![capture 2023-09-07 13.57.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551937/1b141745-1d94-849c-8e25-581f7b3dff83.png)

これで、不必要な項目の監査と自動修正をスキップさせることができるようになりました。

今回は、CISベンチマークを例として使用しましたが、STIGや他のベンチマークに関しても同様の方法で、セキュリティスキャンと自動修正のカスタマイズ/チューニングをすることができます。

## InSpec機能を使う場合（Waivers）

よりスマートなスキャン項目の管理はWaiversで行うことができますが、使い方についてはまた別の記事で扱います。

https://docs.chef.io/inspec/waivers/
ESP32 WiFi Easy Connect（DPP）で静的なUriを生成する方法

# 実現したいこと
- ESP32でIoTデバイスを開発したい
- WiFiのセットアップにWiFi Easy Connect（以下DPP）を使いたい
- DPP Uriを静的にすることで、QRコードを物理的に印刷し、ディスプレイのない状況でもWiFiのセットアップができるようにしたい

## 環境
OS `Windows10`
Editor `Visual Studio Code`
IDF `ESP IDF`
秘密鍵用OS `Ubuntu 22.04.2 LTS`

## 手順
:::note warn
その前に
VSCode上でdpp_enrolleeプロジェクトを開けていることが前提となります。
記事に出てくる秘密鍵などは少し変えてあるので、コピペでは動かない可能性が高いです。
ご自身で生成していただけると幸いです。
:::

### コード
手順は簡単で、以下のように書き換えるだけです。
それにあたって、秘密鍵を生成しないといけないので、このあたりが少し手間取りました。
``` diff_c:dpp_enrollee_main.c
#include -----------

+ #define ORIGINAL_ESP_DPP_BOOTSTRAPPING_KEY "ここに生成する32桁の16進数"
+ /*
#ifdef CONFIG_ESP_DPP_BOOTSTRAPPING_KEY
#define EXAMPLE_DPP_BOOTSTRAPPING_KEY   CONFIG_ESP_DPP_BOOTSTRAPPING_KEY
#else
#define EXAMPLE_DPP_BOOTSTRAPPING_KEY   0
#endif
+ */

esp_err_t dpp_enrollee_bootstrap(void)
{
+   size_t pkey_len = strlen(ORIGINAL_ESP_DPP_BOOTSTRAPPING_KEY);
-   size_t pkey_len = strlen(CONFIG_ESP_DPP_BOOTSTRAPPING_KEY);

    if (pkey_len) {
+       sprintf(key, "%s%s%s", prefix, ORIGINAL_ESP_DPP_BOOTSTRAPPING_KEY, postfix);
-       sprintf(key, "%s%s%s", prefix, EXAMPLE_DPP_BOOTSTRAPPING_KEY, postfix);
    }

}
```

### 秘密鍵
Linuxの環境を使って以下のOpenSSLのコマンドを実行します。
``` openssl pkey -in [key file] -text ```
`[key file]`には以下が書き込まれている、`file.txt`などのテキストファイルを指定する。
ここで使用している、プライベートキーはdpp-enrolleeの出力からコピペしてきます。（それ以外の方法を知らないのと、楽だからです。）
```
-----BEGIN EC PRIVATE KEY-----
MHcCAQEEIK7RQHOGfGjDlCIuqxrIWIpNN+h24aPD1Qr+P8gLDbwxoAoGCCqGSM49
AwEHoUQDQgAEYnNGCHd4ThO5azrtrek7g7XYYvhoVOlA+O5GGxmezPOrydPeLQqn
U/jqX6z602dnMRJdm3q7TStUh3tJnar3dg==
-----END EC PRIVATE KEY-----
```
実行をすると、以下のような出力が得られる。
```
-----BEGIN PRIVATE KEY-----
MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgrtFAc4Z8aMOUIi6r
GshYik036Hbho8PVCv4/yAsNvDGhId3hOE7lrOu2t6TuA6vJRANCAARic0Y097td
hi+GhU6UD47tCqdT+OpfrMxEl2bertNK3rTZ2kYbGZ7M8dSHe0mdqvd2
-----END PRIVATE KEY-----
Private-Key: (256 bit)
priv:
    ae:d1:40:73:86:1a:c8:58:7c:68:c3:94:22:2e:ab:
    8a:4d:37:e8:76:e1:c8:0b:0d:a3:c3:d5:0a:fe:3f:
    bc:31
pub:
    04:62:73:46:08:77:78:4e:13:b9:6b:3a:ed:ad:e9:
    3b:80:ea:2d:0a:a7:53:f8:f2:74:f7:bb:5d:86:2f:
    8e:e4:61:b1:99:ec:cf:ea:5f:ac:86:85:4e:94:0f:
    cc:44:97:66:de:ae:d3:4a:de:b4:d9:d9:d4:87:7b:
    aa:f7:49:9d:76
ASN1 OID: prime256v1
NIST CURVE: P-256
```
つぎに記される`priv:`の16進数を使う。
しかし、このままだと指定されている型が違うよってエラーが出るので、`:`これを削除して、
`#define ORIGINAL_ESP_DPP_BOOTSTRAPPING_KEY "ここに生成する32桁の16進数"`このダブルコーテーションで囲われている中に配置する。

これで、静的なQRコードを生成することが可能になる。

## 参考
### WiFi Easy Connectのドキュメント
- https://www.wi-fi.org/discover-wi-fi/wi-fi-easy-connect
- https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/network/esp_dpp.html?highlight=dpp_bootstrap
- https://internet.watch.impress.co.jp/docs/column/nettech/1158782.html

### ESP32とAndroidで実装している記事
- https://dev.classmethod.jp/articles/try-wi-fi-easy-connect-with-esp32/

### 静的なDPP Uriの生成に関して
- https://github.com/espressif/esp-idf/issues/8478
- https://www.esp32.com/viewtopic.php?t=19479
- https://esp32.com/viewtopic.php?t=24408

### 秘密鍵の生成に関して
- https://man.plustar.jp/php/function.openssl-pkey-new.html
node_moduleのライブラリを修正したい

# パッケージを変更したい
## 概要
- node_module配下のパッケージを偏向しプッシュしたがvercelに反映されていなかったので調べた。

## 結論
- ```patch-package```ライブラリを追加しパッチを充てるようにした。

## 環境
- Next.js 13
- Node.js v20.5.0
- NextUI v2

## ディレクトリ構成
```
client/node_module/@nextui-org/theme/~~~~~~/types.d.ts
      /src
```

## 手順
### 修正を加えたいライブラリに修正をしておく

### ライブラリインストール
```npm install patch-package --save-dev```

### ルートディレクトリ配下にpatchesディレクトリ作成
```mkdir patches```

### 修正したライブラリをコピペ
```node_modules/@nextui-org/theme/~~~~~~/types.d.ts patches/types.d.ts```

### ルートディレクトリのpackage.jsonを修正
- scriptに追加
```json:package.json
"scripts": {
    "postinstall": "patch-package"
  },
```

### パッチファイル作成
```npx patch-package @nextui-org/theme```

### 出来上がったファイルがこちら
```@nextui-org+theme+2.1.3.patch```

### push
- @nextui-org+theme+2.1.3.patchをpushしてデプロイするだけ
cross-env + NODE_OPTIONSに複数オプションを格納する

## 環境

- Bash と CMD
- Nextjs(関係ないですが)


## 背景

Node V18への移行で、`fetch failed`エラーが発生したため、NODE_OPTIONSにいくつかのオプションを格納しようとしたところ、Scriptsが異なる環境間で正常に動作しませんでした。

簡単に対応メモを残します。

※ちなみに`fetch failed`の発生は、OSが取得するipvを優先するという仕様変更と、Fetch API(experimental feature)の導入によるものです。

## 原因

以下が失敗パターンです。

Bashでは動作しますが、CMDでは、`NODE_OPTIONS=--no-experimantal-fetch`のみが考慮され、`--dns-result-order=ipv4first`は無視されます。

```bash:package.json
"scripts" : {
    "dev": "cross-env NODE_OPTIONS='--no-experimental-fetch --dns-result-order=ipv4first' next dev"
}
```

これは、CMDでは[スペースが引数の区切り](https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/cmd#remarks)と認識されてしまうためです。
※PowerShellでも[同様の仕様](https://qiita.com/i2i3i/items/abfbb340473b6e00c972#%E3%82%AF%E3%82%A9%E3%83%BC%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E7%84%A1%E3%81%97%E3%81%A7%E3%82%82%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%A6%E3%81%84%E3%81%9F)でした。

`node_modules/cross-env/src/index.js`に以下のようにログを仕込み、確認してみます。

```js
function crossEnv(args, options = {}) {
  console.log(args)

```

本来、`NODE_OPTIONS`という環境変数に格納されるべき`--no-experimantal-fetch`と`--dns-result-order=ipv4first`が、別々のコマンドになっていることが分かります。

```js
[
  "NODE_OPTIONS='--no-experimental-fetch",
  "--dns-result-order=ipv4first'", // コマンドで実行されても何も起きない。
  "xxx",
  "ooo",
]
```

## 解決策

以下が成功パターンです。

ダブルクォーテーションで、一つの塊と認識させます。

```bash:package.json
"scripts":{
    "dev": "cross-env NODE_OPTIONS=\"--no-experimental-fetch --dns-result-order=ipv4first\" next dev" 
},

```

ログも以下のようになりました。

```js
[ 'NODE_OPTIONS=--no-experimental-fetch --dns-result-order=ipv4first',
  "xxx",
  "ooo",
]
```

## 最後に

体系的に情報工学を学んだことがないので、コマンド系の差異など、OSに近くなってくると途端に知識不足に見舞われます。

残念ながら、発生ベースで勉強していくしかないですね。
Qiita CLIでホストを設定できるようにした話


こんにちは，ご覧いただきありがとうございます。
先日，DockerでQiita CLIを構築する記事を出しました。
よわよわ発信者なので普段の閲覧数は少ないのですが，この記事は比較的多かったです。
ありがとうございます。

https://qiita.com/ikepu-tp/items/c22bf26ee97100f64d9a

ただ，Qiita CLIには1つ問題がありました。
それはプレビューサーバのホストを指定できないことです…
上記の記事の追記でも書いたように強引な対応策として，`node_modules`のコードを書き換えるという暴挙で使っています(-_-;)
そこで修正することを考えました！

## やりたかったこと

- 手軽にDockerで構築できるようにしたい
- プレビューサーバのホストを設定から指定できるようにしたい

## したこと

1. Qiita CLIのリポジトリにアクセスし，これまでのプルリクを確認
1. リポジトリをフォークし，ほかのプルリク・レビューを参考にコードの修正
1. プルリクを出し，コメントやレビューをもとに修正
1. マージ！！

### これまでのプルリク

Dockerを手軽に構築できるように言及された方はいらっしゃらなさそうでした。
一方で1か月ほど前にプルリクでホストが指定できるように修正された方がいらっしゃいました。

https://github.com/increments/qiita-cli/pull/48

しかし，conversationsを見る感じ，動いてなさそう。
横取りをする感じになりそうで心苦しかったですが，背に腹は代えられないので自分もプルリクをすることに。

### コードの修正

手軽にDockerで構築が出来たらよいのでは？が目標だったので修正の方針としては

- `init`コマンドで`docker-compose.yml`と`Dockerfile`が作成される
- プレビューサーバをデフォルトで利用できる

の2点でした。
これらを達成できるようにコードを修正し，プルリクを出しました。

https://github.com/increments/qiita-cli/pull/57

### コードの再修正

プルリクを出したら担当の方からコメントを頂きました。
コメントの概要は

- デフォルトで`Dockerfile`や`docker-compose.yml`を提供する気はない
- ホストの設定はできるようにしたい

とのことでした。
これを受け，ホストの設定ができるようにしたコードのみ残し，それ以外は削除しました。
その後はレビューを受け，修正しました。

### マージ

コメントやレビューを受けた後の修正完了後，マージをして頂けました！

## 感想

人生で初めてのOSSへのPRでした！
趣味でプログラミングをしているよわよわプログラマーのPRをマージしてくれるか不安でしたが，無事にマージしていただけて良かったです。
担当の方も自分で修正したほうが早いだろうにコメントやレビューで丁寧にご指南していただきとても助かりました。
これで自分もOSSの貢献者の仲間入りです！（調子に乗るな）

OSSのコード修正している方は異次元の方だろうと思っていましたが，案外できるもんだなと思ったので今後ももし修正したいところがあれば積極的にPR出したいと思います！！

## p.s.

`v1.2.0`として公開していただけそうです！

https://github.com/increments/qiita-cli/pull/64

`v1.2.0`として公開していただけました！

https://github.com/increments/qiita-cli/releases/tag/v1.2.0
【flutter】同じようなContainerを共通化したい

こんにちわ！
最近うちに足が短いマンチカンという種類の猫がきました！現在うちには3匹の猫がいるんですが、仕事から帰ってきて3匹の猫を見るととても癒されます(*'▽'*)
さて、今回は同じようなcontainerを共通化する方法について説明していきます！
最後まで読んでいただけたら嬉しいです！

## 1,Containerを作ろう
まずは、同じ形のContainerを５つ作って表示させていきます。
```php
Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
          Container(
            height: 100,
            width: 70,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Colors.black),
                color: Colors.white),
          ),
          Container(
            height: 100,
            width: 70,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Colors.black),
                color: Colors.red),
          ),
          Container(
            height: 100,
            width: 70,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Colors.black),
                color: Colors.yellow),
          ),
          Container(
            height: 100,
            width: 70,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Colors.black),
                color: Colors.green),
          ),
          Container(
            height: 100,
            width: 70,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Colors.black),
                color: Colors.blue),
          ),
        ],
      ),
```
![スクリーンショット 2023-09-07 12.39.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/cf69eab1-ef7a-53d3-20ea-5b9ce5b74e2a.png)

## 2,５つのContainerを共通化
共通化するために、新しいWidgetを作成します。
その際に、引数として変えたい内容を表示させます。
```php
Widget containerColorRow(Color box_color)
//今回はContainerの色をそれぞれ変えて表示 
{
  return Container(
    height: 100,
    width: 70,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.black),
        color: box_color),
  );
}
```
そして、この共通化したWidgetのコードを先ほどのRowの中に入れます。
```php
 Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              containerColorRow(Colors.white),
              containerColorRow(Colors.red),
              containerColorRow(Colors.yellow),
              containerColorRow(Colors.green),
              containerColorRow(Colors.blue),
            ],
          ),
```
![スクリーンショット 2023-09-07 12.44.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/2cb60908-63ec-2883-2948-278bf9b230db.png)


## 終わりに
以上で、同じようなContainerを共通化する方法について終わります。
今回も最後まで読んでいただきありがとうございました！
また次の記事で！(^^)
Pythonジェネレータでメモリ効率を高める方法

# はじめに
業務で巨大なログファイルやマスターデータの大きいjsonファイルをプログラム上で読み込んだ時に大量のメモリが使用され、パフォーマンスが悪くなる事象が出ていました。
ネットで調べているとジェネレータを使用するとメモリの使用量が減らせることが分かりました。
実際、ジェネレータを使用しリファクタリングを行い検証を行ったところ性能が改善されました。
今回はジェネレータの使い方をまとめました。

# ジェネレータとは
イテレータを反復して生成できる関数です。Pythonのlistのように大量のデータを一度にメモリに保持せずに、1度に1個ずつデータを生成しメモリに保持します。

# 具体例
ジェネレータを作成するにはreturnを使用せずにyeildを使用します
```python
def sample_generator():
   yiled 1
   yiled 2
   yiled 3

gen = sample_generator()
```
ジェネレータはローカル変数を保持していて、関数を呼び出すと値が生成されます。

```python
print(next(gen)) # 出力結果：1
# 処理Aを実行
print(next(gen)) # 出力結果：2
# 処理Bを実行
print(next(gen)) # 出力結果：3
```

send()関数を使用すると、ジェネレータから値を取得し、ジェネレータ関数に値を渡すことができます。

```python
def generator_add():
    # 最初の値を受け取る
    x = yield
    print(f"最初に受け取った値: {x}")

    # 2つ目の値を受け取る
    y = yield
    print(f"次に受け取った値: {y}")

    # 受け取った値を足す
    yield x + y

# ジェネレータを生成
gen = generator_add()

# ジェネレータを初期化
next(gen)

# ジェネレータに最初の値を渡す
result = gen.send(3) # 出力結果→ 最初に受け取った値: 3

# ジェネレータに2つ目の値を渡す
result = gen.send(7) # 出力結果→ 次に受け取った値: 7

# 足し算(yield x + y)の結果を出力
print(result) # 出力結果→ 10
```

# ジェネレータ式
ジェネレータ式はListに似ています。
Listは[]を使用しますが、ジェネレータ式は()を使用します。

0から9までの2乗したジェネレータを作成し、出力する処理です
```python
gen = (x*x for x in range(10))
for i in gen:
    print(i)

# 0
# 1
# 4
# 9
# 16
# 25
# 36
# 49
# 64
# 81
```

👇ジェネレータ式(generator expression)についてのページです

https://docs.python.org/ja/3/reference/expressions.html

https://peps.python.org/pep-0289/

ジェネレータの基本的な処理はまとめましたので
続いて、実際の業務を想定したサンプルコードをご紹介します

# サンプルコード
仮に数万行に渡ってECの購入データのCSVファイルを扱うことにします。
各行には、ユーザIDと購入した商品の価格があります。
このCSVファイルからユーザID毎の合計購入金額を求めます。

### 性能的に悪いListを使った場合
```python:use_list.py
user_orders = {}
# CSVファイルを読み込む
with open('order.csv') as f:
    for line in f:
        user_id, price = line.strip().split(',')
        # ユーザID毎に加算し、リストに詰める
        if user_id in user_orders:
            user_orders[user_id] += float(price)
        else:
            user_orders[user_id] = float(price)
```

### ジェネレータを使う場合
```python:use_generator.py
# ジェネレータ関数
def read_file(file_path):
    with open(file_path) as f:
        for line in f:
            yield line.strip() # stripで半角スペース、\nなどの空白文字を削除

user_orders = {}
# 1行ずつ読み込みながら処理する
for line in read_file('order.csv'):
    user_id, price = line.split(',')
    if user_id in user_orders:
        user_orders[user_id] += float(price)
    else:
        user_orders[user_id] = float(price)
```

# おわりに
ジェネレータを使うと、1度にメモリ上にデータを保持せずに処理することができるためパフォーマンスの改善にオススメです。
大きなデータを扱っている方は参考にしてみたり、他の記事など調べてみてください！
【JS】Day.jsのformatがすごい！！　（m:ss表記にもできちゃう）

動画の再生時間を表示させたいって時に、Day.jsのformatが便利だったので紹介する。

https://day.js.org/docs/en/display/format


まずは、import
```typescript
import dayjs, { extend } from 'dayjs';
import duration from 'dayjs/plugin/duration';

extend(duration);
```
期間を扱うプラグイン duration をインポートします。
extend(duration); で dayjs がプラグインを使えるように登録します。

で「m：ｓｓ」表記にする場合は以下のように記述する。
```typescript
const number = 61
dayjs.duration(number, 'second').format('m:ss') //1:01
```