OmniAICreator/Qiita-1.07M huggingface dataset:
yumパッケージの依存関係を調べる

# PackageAに依存しているパッケージを調べる

`repoquery --whatrequires PackageA`  を使う。

mysqlに依存しているパッケージは以下のように見つかる。

```sh
$ repoquery --whatrequires mysql
cacti-0:1.2.27-1.el7.noarch
dpm-name-server-mysql-0:1.13.0-1.el7.x86_64
lfc-server-mysql-0:1.13.0-1.el7.x86_64
mysqltuner-0:1.8.3-1.git.1333ea9.el7.noarch
php-voms-admin-0:0.7.0-1.el7.noarch
yourls-0:1.7.1-1.el7.noarch
```

treeは他のパッケージで使われていないので何も出力されない。なので treeは削除しても他のパッケージを道連れにすることはない事がわかる。

```sh
 $ repoquery --whatrequires tree

```

# PackageAが依存しているパッケージを調べる

PackageAをインストールする際に必要となるパッケージを調べる方法。

`yum deplist PackageA` もしくは `repoquery --requires PackageA`

```sh
 $ yum deplist ruby
package: ruby.x86_64 2.0.0.648-39.el7_9
  dependency: libc.so.6(GLIBC_2.2.5)(64bit)
   provider: glibc.x86_64 2.17-326.el7_9.3
  dependency: libcrypt.so.1()(64bit)
   provider: glibc.x86_64 2.17-326.el7_9.3
...
  dependency: rubygem(bigdecimal) >= 1.2.0
   provider: rubygem-bigdecimal.x86_64 1.2.0-39.el7_9```
```

```sh
$ repoquery --requires ruby
libc.so.6(GLIBC_2.2.5)(64bit)
libcrypt.so.1()(64bit)
libdl.so.2()(64bit)
libm.so.6()(64bit)
libpthread.so.0()(64bit)
librt.so.1()(64bit)
libruby.so.2.0()(64bit)
rtld(GNU_HASH)
ruby(rubygems) >= 2.0.14.1
ruby-libs(x86-64) = 2.0.0.648-39.el7_9
rubygem(bigdecimal) >= 1.2.0
```
kintone(キントーン)とMOT/TELアプリの連携方法

クラウドPBX MOT/TELとkintoneをCTI連携することで、電話業務の効率化が可能です。
こちらにもkintoneとの連携詳細があります。
https://www.mot-net.com/mottel/cti/kintone


■CTIとは？
電話システムとコンピューターを統合した技術またはその技術を使ったシステムのことをCTIと呼びます。CTIを利用することで顧客管理ソフトやCRM・営業支援ツールなどと電話システムが連携して、電話着信時に発信者の顧客情報を自動で表示することが可能です。
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125494/0cd712dc-a80e-14cd-15ad-6cfcebd62816.jpeg)

![91e553a30c69d4eb24e08e4fb81d971f.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125494/dab16707-c518-18d4-9de0-7a39c0065eae.jpeg)


■MOT/TELとkintoneのCTI連携方法
個別にシステムの開発や改修を行うことなく、簡単な設定でMOT/TELとkintoneのCTI連携が可能です。
事前にkintoneのアプリ側で電話番号へのリンクを設定しておく必要があります。
次の2項目を以下に設定してください。
入力値の種類：電話番号
フィールドコード：TEL
kintone側での設定方法はこちらをご覧ください。
https://jp.cybozu.help/k/ja/user/app_settings/form/form_parts/link.html

CTI連携を行う為、MOT/TELで利用するパソコン電話（ソフトフォン）アプリの
MOT/Phone POP-UPアプリへ設定を入力します。

設定1：MOT/Phone POP-UPアプリの設定を開きます。
![307f50fb98fb49bb7901fb95d4888305.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125494/f8ade4b3-3ff7-0815-a24c-406716381770.jpeg)

設定2：一般タブ内の右側にある外部連携先設定の連携先プルダウンから外部URLを選択します。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125494/e833b693-9636-66f3-0bb9-2220e2919a2d.jpeg)

設定3：外部URLの設定項目が表示されます。「ポップアップの代替機能として利用する」にチェックを入れます。
URL欄に「https://ご利用されているkintoneのドメイン/k/search?keyword=%TEL」を入力します。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125494/32717fa9-0d62-4155-fd3f-af803666413d.jpeg)
『?tel=%TEL』の部分が発信者の番号になります。0353301165の番号から着信があったとするとURLは「https://ご利用されているkintoneのドメイン/k/search?keyword=0353301165」となり検索結果画面が表示されます。

クラウドPBX「MOT/TEL(モッテル)」についてはこちら
https://www.mot-net.com/mottel
React Testing Library の getByRole でアンカー要素が取得できないときの解決方法

# はじめに
この記事では、React Testing Library の `getByRole` でアンカー要素（`<a>`）が取得できないときの解決方法について記載します。

https://testing-library.com/docs/queries/byrole

# 開発環境
開発環境は以下の通りです。

- Windows 11
- VSCode
- @testing-library/jest-dom 6.4.2
- @testing-library/react 14.3.0
- @testing-library/user-event 14.5.2
- Vitest 1.6.0
- TypeScript 5.4.2
- React 18.3.1
- Vite 5.2.11
- Node.js 20.13.1
- npm 10.8.1

# プロダクトコード
ボタンをクリックしたら、外部リンクに遷移するコードがあります。

```App.tsx
import { FC } from "react";

export const AnchorAndButton: FC = () => {
  return (
    <a onClick={() => window.location.replace("https://www.google.com")}>
      Click
    </a>
  );
};
```

# テストコードと実行結果
アンカー要素が取得できず、エラーになります。

```App.test.tsx
import { render, screen } from "@testing-library/react";
import { describe, test } from "vitest";
import { App } from "@/src/App";

describe("App component", () => {
  test("should work as expected", () => {
    render(<App />);

    screen.getByRole("link", { name: "Anchor" });
  });
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/ec9690b9-df28-91ba-1bc1-50c03659ae7f.png)

# 原因
`<a>` タグに `href` 属性がないから。

# 解決方法
`<a>` タグに `href` 属性を追加する。

```App.tsx
import { FC } from "react";

export const App: FC = () => {
  return (
    <a href="https://www.google.com">
      Anchor
    </a>
  );
};
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/dc6941e9-90d8-3944-a6bd-d47ad80bbfb9.png)


:::note
[eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) という ESLint のプラグインを利用すると、`href` 属性がない場合、プロダクトコード実装時点でエラーが出て気づくことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/ae20506d-bf42-290f-cb85-3f041de1b3cb.png)
:::

:::note
`<a>` タグを `<button>` タグに変更するという方法でも解決できます。

```App.tsx
import { FC } from "react";

export const App: FC = () => {
  return (
    <button onClick={() => window.location.replace("https://www.google.com")}>
      Button
    </button>
  );
};
```

:::

# 最後に
HTML は適切に書く！アクセシビリティ大切に！
Python標準ライブラリ: os.pathの便利関数まとめ

Pythonの`os.path`モジュールは、パス名の操作に便利な関数を提供します。詳細は[公式ドキュメント](https://docs.python.org/ja/3/library/os.path.html)を参照してください。使い方を忘れては調べるを繰り返しているのでここにまとめます。

## os.path.join()
パスを結合して1つのパスにします。
```python
import os
path = os.path.join('folder', 'subfolder', 'file.txt')
print(path)  # folder/subfolder/file.txt
```

## os.path.exists()
パスが存在するかどうかを確認します。
```python
import os
exists = os.path.exists('path/to/file')
print(exists)  # True または False
```

## os.path.basename()
パスの末尾のファイル名部分を返します。
```python
import os
basename = os.path.basename('/path/to/file.txt')
print(basename)  # file.txt
```

## os.path.dirname()
パスのディレクトリ名を返します。
```python
import os
dirname = os.path.dirname('/path/to/file.txt')
print(dirname)  # /path/to
```

## os.path.abspath()
パスの絶対パスを返します。
```python
import os
abspath = os.path.abspath('file.txt')
print(abspath)  # /current/directory/file.txt
```

## os.path.split()
パスをディレクトリとファイル名に分割します。
```python
import os
dir_name, file_name = os.path.split('/path/to/file.txt')
print(dir_name)  # /path/to
print(file_name)  # file.txt
```

## os.path.splitext()
パスをファイル名と拡張子に分割します。
```python
import os
file_name, file_ext = os.path.splitext('file.txt')
print(file_name)  # file
print(file_ext)  # .txt
```

## os.path.getsize()
ファイルのサイズをバイト単位で返します。
```python
import os
size = os.path.getsize('file.txt')
```print(size)  # ファイルのサイズ（バイト単位）

## os.path.isfile()
パスがファイルかどうかを確認します。
```python
import os
is_file = os.path.isfile('file.txt')
print(is_file)  # True または False
```

## os.path.isdir()
パスがディレクトリかどうかを確認します。
```python
import os
is_dir = os.path.isdir('folder')
print(is_dir)  # True または False
```
CSSだけでiOSのON/OFFスイッチを再現する

## 前置き
_null_

## CSSだけでiOSのON/OFFスイッチを再現する
iOSのON/OFFスイッチをHTMLとCSSだけで再現します。 ~~HTMLも使ってるけどタイトル長くなるから~~

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="GRaQgWB" data-pen-title="iOS Slider Button" data-user="kelp-of-truth" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kelp-of-truth/pen/GRaQgWB">
  iOS Slider Button</a> by kelp of truth (<a href="https://codepen.io/kelp-of-truth">@kelp-of-truth</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```html
<input type="checkbox" class="switch">
```

classはswitchです(わかりやすい)

```css
input[type="checkbox"].switch{
  position: relative;
  appearance: none;
  background-color: #f2f2f2;
  -webkit-appearance: none;
  width: 44px;
  height: 28px;
  border: 2px solid #bababa;
  border-radius: calc(infinity * 1px);
  transition: 250ms ease-out;
  vertical-align: bottom;
  outline: 2px solid transparent;
}
input[type="checkbox"].switch:focus-visible{
  outline-color: #0043fc;
}
input[type="checkbox"].switch::after{
  content:"";
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  box-shadow: 0px 0px 3px #6b6b6b;
  width: 24px;
  height: 24px;
  border-radius: calc(infinity * 1px);
  transition: 200ms ease-out;
}
input[type="checkbox"].switch:active::after{
  background-color: #f2f2f2;
}
input[type="checkbox"].switch:checked{
  background-color: #00db07;
  border-color: #00db07;
}
input[type="checkbox"].switch:checked::after{
  left: 16px;
}
```

### 本体
チェックボックスの見た目をCSSで変更します。<br>
まず`appearance: none;`でブラウザ規定の表示を無効化しておきます。
角を丸くして、横幅、縦幅を調整します。あとは疑似要素のafterを使い、つまみ(?)の部分を再現します。
そして、`:check`をつかいチェックボックスがチェック時に別のCSSを適用するようにします。

### おまけ
チェックボックス本体のpositionはrelativeにしておき、擬似要素のpositionをabsoluteにします(いつもの)。
チェックボックスにチェックが入っていない時はleftを0pxにしておきます。チェックが入った時にleftを16px(calc(100% - {擬似要素の横幅}))にします。transitionを指定しておけばアニメーションされます。
背景色は少し黒い白から黄緑色に代わり、ボーダーも灰色から背景と同じ黄緑色に変わります。
Omnistudio Document Generation



# ヘルプ

+ [Omnistudio Document Generation](https://help.salesforce.com/s/articleView?id=ind.doc_gen_foundation_document_generation_overview_389381.htm&type=5)
+ [Document Generation Overview](https://help.salesforce.com/s/articleView?id=ind.v_contracts_t_document_generation_overview_379872.htm&type=5)
+ [Document Generation Error- "List has no rows for assignment to SObject "](https://help.salesforce.com/s/articleView?id=000396806&type=1)
+ [CLM-Document Generation Error- "List has no rows for assignment to SObject "](https://help.salesforce.com/s/articleView?language=en_US&id=000392016&type=1)



# トレイルヘッド

+ [Deep Dive into OmniStudio Document Generation](https://trailhead.salesforce.com/content/learn/modules/foundation-document-generation)

# エラー

+ [OmmiScript Document Geberation Error:: Execption Occured](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000PfBzQ)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/0112f0a1-1550-6198-0166-5b694d5728b5.png)

:::note
Please check this article. 

OmniStudio Document Generation Troubleshooting Guide 
https://help.salesforce.com/s/articleView?id=ind.doc_gen_OmniStudio_Document_Generation_Troubleshooting_Guide.htm&type=5
:::

+ [List has no rows for assignment to SObject](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007clxcw)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/2029be66-deeb-cae0-20bf-5bebc6330515.png)

+ [ServerSideDocGeneration Apex class could not be loaded](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000PfD6n)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/f4c94f11-0b70-a82f-acba-dc5fc145900c.png)

:::note
I'm not sure if anyone still needs help with this, but here is the solution:

Open Server Side Integration P: ServerSideDocGeneration.

Open the element: generateDocumentService.

Update the Remote Class name from DocumentServiceGateway to omnistudio.DocumentServiceGateway.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/47f3e46b-57e2-cb82-994b-254ee42a96b2.png)
:::
第16回　エンジニアの輪@青山　に参加しました。 「分からない」「知らない」「楽しい！」

# 自己紹介
初めて投稿させていただきます。
私、半導体のテストエンジニアをやっております。

半導体を測定するためのテストプログラム開発などを行っています。

最近自分のコーディング力不足を痛感することが多く、
「そもそもソフトウェアに関する知識不足から来ているのでは？」
の仮説がありまして、情報収集のために参加しました。

(あとはシンプルに同年代のエンジニアと話して、横のつながりを作ってみたかったのです笑)

https://circle-of-engineer.connpass.com/event/318763/?utm_campaign=event_finish&utm_source=notifications&utm_medium=email&utm_content=title_link


# 会場到着！
というわけで、会場がある青山のオフィスに赴きました。
(会場も、会場周辺も、とてもオシャレでキラキラした雰囲気で、私は終始圧倒されていました、、、笑)

あと、周囲の方の話を聞いてみると、生成AIとか、半導体エンジニアにはどうしても聞き馴染みの薄い話をしていたのが印象的笑


会の構成はこんな感じです。
①LT(Lightning Talks)会・・・自由な話題でプレゼンする会。自社でもやってみたい！
②OST(Open Space Technology)・・・参加者自身で複数のテーマを決めて、各テーブルに分かれて語る会
③懇親会
それぞれの合間にフリートークコーナー。


# LT会
4テーマの発表がありました。
特に印象的だったのは、
「ARR成長のために開発者個人で出来ること」

自分の仕事が収益にどの程度貢献できるのか?
自分の単価っていくらだろう?
考えるきっかけになりました。

初めて聞くワードも多くありましたが、
(カンファレンス？ユビキタス言語？AWS？RAG？)
皆様とても分かりやすく解説いただき、楽しく理解することができました！

自分の持っている思いを実現するため、技術を使って解決しようとしている、その前向きな姿勢・行動力に感動！


# OST
参加者からテーマを出す➡投票で9テーマに絞る➡各テーブルに分かれて会話
を２回行いました。

①最近読んだ/オススメの本紹介
興味の方向性の多様性が面白かったです。

私は、
「なぜ働いていると本が読めなくなるのか (三宅香帆)」
「世界一流エンジニアの思考法(牛尾剛)」
を紹介。

最近やろうとしている哲学カフェの話も聞いてもらえて嬉しかったです！


②LT登壇したいけどネタがない・・・

東京にはいろんなLT会があって、その探し方の話など。
話を振ってもらって流れで自分の業務紹介をする流れに。
(ウェハテスト・ファイナルテスト・・・)
「それがもうLTのネタになりそうだね」と言ってもらえて、盛り上がりました笑


# 懇親会
めっっっっっっっちゃ豪華なケータリングをいただきました！
ローストビーフが最高すぎた！！！

![IMG_1584.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815132/91752648-9b0a-f4fc-be21-433b0aaae232.jpeg)


会を通じて、色んな立場の(フリーランス・マネジメント)、
いろんな分野の(C,Java,AI,セキュリティetc...)エンジニアさんと会話しました。

それぞれの苦労や、あるあるネタがあり、
そして何より皆さん情熱を持って前向きに取り組んでおられることが印象的でした！
熱量のある話を聞いて、静かに胸を熱くしたのでした～


最後は他の参加者の方と、趣味の野球の話を楽しみながら帰りました。

# みんなも　行ってみよう！
新しい情報を手に入れたのもありますが、
同じエンジニアの方と楽しく話して、皆様の思いを知れたことが、シンプルに楽しかったです！

週明けから、自分の仕事を頑張るためのモチベーションにもなれたし、自社にもこれを持ち帰りたいなと思いました。

ぜひ、皆様も行ってみてはどうでしょうか？

イベントを運営頂いた皆様、イベント中会話いただいたエンジニアの皆様、
とても楽しく有意義な会を、ありがとうございました！
次回もぜひ、参加させていただきたいです！
mindの研究 その83

# 概要
mindが、謎なので調べてみた。
練習問題やってみた。

# 練習問題
クリップボードにテキストを書き込め。

# サンプルコード

```
出力ファイルは　ファイル。


メインとは
　「test.bat」で　出力ファイルを　新規オープンし
　「echo hello world | clip.exe」で　出力ファイルに　一行書き込み
　出力ファイルを　クローズし
　「test.bat」を　プログラム実行



```

以上。
同じファイル内で同じ名前のものを分割代入したときの解決策


# はじめに

こんにちは、エンジニアのkeitaMaxです。

reactで実装していた時に困ったことがあったので、それの解決策を記事にさせていただきます。

# 困ったこと

以下のように、同じファイル内で同じ名前のもの分割代入した時に、名前が被ってエラーになってしまいました。

```react
const { isLoading, getQuestion, question } = useGetQuestionAPI()
const { isLoading, postUser, user } = usePostUserAPI()
```

# 解決策

分割代入の際に呼び出す側で変数を変更できる機能が、JavaScript(TypeScript)にはあるらしいです。

>分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
(参考URL：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E6%96%B0%E3%81%97%E3%81%84%E5%A4%89%E6%95%B0%E5%90%8D%E3%81%B8%E3%81%AE%E4%BB%A3%E5%85%A5)

下記のようにすると変数名を使用する側で変更することができるので、変数の衝突の問題が解決しました。

```react
const { isLoading, getQuestion, question } = useGetQuestionAPI()
const { isLoading: postUserIsLoading, postUser, user } = usePostUserAPI()
```

# おまけ

おまけとしてimportするときは以下のようにします。

```react
import { usePutUserAPI as usePutUserAPIFirst } from "@/api/usePutUserAPI";
```

# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！
mindの研究 その82

# 概要
mindが、謎なので調べてみた。
例題やってみた。


# windowsディレクトリを取得する

```
windowsディレクトリを取得とは
　パス名は　文字列実体情報
　結果は　変数
　パス名長さで　文字列実体を獲得し　パス名に　入れ
　パス名を　文字列実体を参照し　アドレスを得て
　パス名の　追加余裕をつみ、
　"kernel32"と　"GetWindowsDirectoryA"で　ＡＰＩ呼出し２　結果に　入れ
　エラー？
　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　結果が　０より　大きい
　ならば
　　「Windowsディレクトリ -> 」を　表示し
　　パス名を　文字列実体を参照し
　　Ｍｉｎｄ文字列に変換し　バイト数を得て
　　パス名に　文字列実体カウントを設定し
　　パス名を　文字列実体を参照し　一行表示し
　さもなければ
　　「取得できませんでした」を　一行表示し
　つぎに
　パス名を　文字列実体を解放する。


メインとは
　windowsディレクトリを取得し
　スタック検査しておく。


```

# 実行結果

```

c:\pmind>dir0
Windowsディレクトリ -> C:\WINDOWS

c:\pmind>


```

以上。
LIS（最長増加部分列）問題を解く

$\newcommand{\dp}{\text{dp}}$
鉄則本[1]を読んでてよくわからなくなったので備忘録として残しておきます。時間があったらLISの復元もやろうと思います。

## 問題設定
与えられた正整数列の最長増加部分列(LIS)の長さを求めてください。
ただし正整数列の長さは100000以下、各正整数の値は500000以下とします。
（出典：[競技プログラミングの鉄則 演習問題集 A24 - LIS](https://atcoder.jp/contests/tessoku-book/tasks/tessoku_book_x)）

## LISの長さを求める
### Part1. 愚直な実装
愚直に動的計画法を実装することを考えます。
$a[0],a[1],…,a[n-1]$を与えられた正整数列とし、$\dp[i]$を「$a[i]$を最終要素に持つ増加部分列の最大長さ」となるようにします。
$a[i]$を最終要素に持つような増加部分列は、次の二つの方法でしか作れません。

* 既存の増加部分列であって最終要素が$a[i]$より小さいものに$a[i]$をくっつける。
* $a[i]$のみからなる長さ1の増加部分列を作る。

従って、$\dp[0] = 1, \dp[i] = \max \lbrace \dp[j]+1 ~|~ a[j]<a[i], ~ j<i\rbrace$とすれば良いことが分かります。ただし$\max\varnothing = 1$です。
$\dp$テーブルを完成させた後は、$\max \lbrace \dp[i] \rbrace_{i=0}^{n-1}$を求めればLISの長さが計算できます。
ところがこのアルゴリズムでは計算量が$O(n^2)$となり、制約$n\le100000$の下では遅すぎます。
そこで、各$\dp[i]$の計算を高速化する方法を考えます。

### Part2. 改良するには？
Part1では各$i$に対し、すべての$a[j]<a[i]$を満たす$j<i$について$\dp[j]$を調べ、どの増加部分列にくっつけるのが良いかを考えていました。
しかし、とある配列を考えればこの作業をもっと効率良く行うことができます。その配列を天下り的に導入すると理解が難しくなるので、まずこの問題への素直なアプローチを考えてみます。
最終要素が$a[i]$より小さい増加部分列を良い部分列と呼ぶことにします。$a[i]$をどの良い部分列にくっつけるのが良いでしょうか？勿論、「最長の良い部分列」にくっつけるのが最適です。なので、「番号$0$から番号$i-1$までの範囲で、増加部分列をすべて覚えておく」「そして、その増加部分列の長さと“それが良い部分列になるかどうか”が判断できるような何かを記録しておく」という発想に行き着きます。各増加部分列が良い部分列であるかどうかを判定していき、見つかった良い部分列の中で最長のものを選び出せば、$\dp[i]$が求まるというわけです。
では、番号$0$から番号$i-1$までの範囲の増加部分列をすべて覚えておく必要があるでしょうか？答えはNoです。その増加部分列の中には、“上位互換”“下位互換”が明確に存在しています。
「番号$0$から番号$i-1$までの範囲の増加部分列であって、長さが$x$のもの」を考えます。$x<a[i]$なら、$a[i]$をこれにくっつけで増加部分列が作れます。ここでそのような増加部分列は、最終要素が最小のものしか覚えておかなくて良いはずです。最終要素が小さければ小さいほどくっつけられる要素の幅が広がるからです。
これで何を覚えておくべきかが明確になりました。我々は正整数列を左側から見ていくわけですが、**各$i$時点で「長さが$x$の増加部分列の最終要素として最小のもの」$(x \in \mathbb{N})$** さえ知っていれば良いわけです。
この発想を整理して、LISの長さを求めます。

### Part3. 高速な解法
正整数列を左から見ていき、$\dp[i]$を求めようとしている段階を考えます。$L[x]$を、「（番号$i-1$までの範囲で）長さが$x$であるような増加部分列の最終要素としてあり得る値の最小値」となるように定めます。
$L[x]$は、定義により広義単調増加であるはずです。$a[i]$をくっつけられる増加部分列のうち最長のものの長さは「$L[x]<a[i]$であるような$x$の最大値」に他ならないので、この値は二分探索で見つけることができます。その値に$+1$したものが$\dp[i]$の値になります。
$L$の更新ですが、実は$L[\dp[i]] = a[i]$とすれば十分です。
<details><summary>証明</summary>
$0\le x < \dp[i]$である$x$に対して、$L[x]$は更新されません。実際、$\dp[i]$の取り方より$0\le x < \dp[i]$なら$L[x] < a[i]$が成り立ちます。$L$はその性質上、大きい値へ更新されるといったことは起こらないので、$L[x]$は更新され得ません。一方で、$x > \dp[i]$である$x$に対して、$L[x]$は更新されません。実際、$\dp[i]$の取り方より$L[x-1] \ge a[i]$となるのでそもそも$a[i]$をくっつけて長さ$x$の増加部分列を作ることができません。
そのため、$L[\dp[i]] = \min (a[i], L[\dp[i]])$と更新されるべきですが実はこの$\min$も外せて$L[\dp[i]] = a[i]$とできます。実際、やはり$\dp[i]$の取り方より$L[\dp[i]] \ge a[i]$です。
</details>
以上の解法をC++で実装したものが以下になります。

### ソースコード（C++）
```C++
#include <iostream>
#include <vector>
using namespace std;


int main(){
    
    int n;
    cin >> n;
    vector<int> a(n);
    for (int i=0; i<n; i++){
        cin >> a[i];
    }
    vector<int> dp(n);
    vector<int> L(n);
    int ans = 1;
    for (int i=0; i<n; i++) L[i] = 2e9;
    dp[0] = 1; L[0] = 0; L[1] = a[0];
    for (int i=1; i<n; i++){
        dp[i] = lower_bound(L.begin(),L.end(),a[i]) - L.begin();
        L[dp[i]] = a[i];
        ans = max(dp[i],ans);
    }
    cout << ans << endl;

}
```





## 参考文献
[1]米田優峻（2022）『競技プログラミングの鉄則 アルゴリズム力と思考力を高める77の技術』
Memtest86の使い方

# 1. Memtest86とは？
メモリの機能テスト。具体的には、メモリの全アドレス空間に対してデータを格納し、それらがすべて要求したのと同じように保持されているかどうかを確認するテスト。（ほかにもいろいろやっているのだと思いますが）
# 2. Memtest86でわかること
- メモリが物理的に破損していないこと
- メモリがシステムの要求通りに動作すること
- ソケットなどの不良がないこと
などなど

# 3. Memtest86の使い方
### 3.1. 必要なもの
- USBフラッシュメモリなどのドライブ
容量は最低1GBは必要そう。
- 時間
Memtest86の実行には、8GBあたり約1時間かかる([参考](https://help.corsair.com/hc/ja/articles/4413740029709-%E6%96%B9%E6%B3%95-Memtest-86%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6RAM%E9%9A%9C%E5%AE%B3%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%BE%E3%81%99))。64GBだと8時間。CPUの性能によっては短縮されうる。（実際、手元の環境では64GB RAM/ Core-i9 14900Kで4時間かかりました）
### 3.2. インストール
1. ダウンロード
PassMark Softwareの[MemTest86のインストールページ](https://www.memtest86.com/download.htm)からダウンロード。Free versionとPro（有料）がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636063/d0759da8-664c-f48f-07b1-9636a9d4a9a4.png)
2. ダウンロードしてきたファイルを解凍し、imageUSBを起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636063/d2293bf6-5696-eb34-628d-b42fd539a216.png)

2. USBドライブにイメージを作成
Step1でイメージ作成先のUSBドライブを指定、Step3でUSBに書き込むイメージファイルを指定。なお、この操作を行うとUSBドライブはフォーマット（初期化）されるので、中身のファイルのうち必要なものはバックアップしておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636063/a42d6ccf-bdf5-fe8a-e499-ae1c8181c4b5.png)

### 3.3. 実行
4. MemTest86の起動
コンピュータを再起動し、BIOS設定画面を起動。BIOSから起動ディスクをMemTest86が入っているドライブに指定する。
5. MemTest86の実行
以下のような画面に遷移するので、Configを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636063/c27b7a1f-46c0-4dc0-a6f3-64066b9bcd84.png)
詳しい設定はいろいろできるようだが、実行するだけならSを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636063/639ea10d-5410-c4da-8340-407dcac248db.png)
6. 結果の保存
テストが終了すると、結果を保存するか問われるので基本的には保存する。

# 4. 背景：なぜMemtest86を実行しようと思ったか？
先月自作したPCで、メモリ関連のエラーが頻発したため。このエラーはブラウザやその他アプリケーションについて横断的だったため、メモリの物理的なエラーを疑った。実際にMemtest86を実行したところ、エラーは検出されなかったため、メモリ買い替え（またはマザーボード買い替え…）という最悪のパターンは回避できた。
この結果から、メモリやマザーボードに物理的な問題がある可能性が低いとわかったので他の対策をいろいろ試すことができ、非常に助かった。結果的には、メモリクロック速度を定格(5600MHz)よりも落とし、Nortonをアンインストールすることで、問題は解決した（どっちがクリティカルだったのかはわかりません）。


# 5. 参考
https://www.pc-master.jp/mainte/memtest86.html

https://www.pugetsystems.com/support/guides/using-memtest86-1770/
Javaで「配列の指定範囲の要素から新しい配列を作成する(copyOfRange)」の動作を確認してみた

# 概要

Javaで「配列の指定範囲の要素から新しい配列を作成する(copyOfRange)」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/start/array/index13.html

# 実装

以下のファイルを作成しました。
```JSample13_1.java
import java.util.Arrays;

class JSample13_1{
  public static void main(String[] args){
    int[] src = {12, 24, 18, 35, 21};
    int[] dst = Arrays.copyOfRange(src, 1, 4);

    System.out.println(Arrays.toString(src));
    System.out.println(Arrays.toString(dst));
  }
}
```

以下のコマンドを実行しました。
```
$ javac JSample13_1.java 
$ java JSample13_1 
[12, 24, 18, 35, 21]
[24, 18, 35]
```

# まとめ

何かの役に立てばと。
【Java】ArrayListのメソッドを覚える

ArrayListが通常の配列と比べて何が違うのか、覚えるための自分用メモです。

# ArrayListとは？
ArrayListは、```java.util```パッケージに含まれる```List```インタフェースを継承したクラスライブラリで、コレクションクラスの1つです。

# サンプルプログラム
ArrayListを使うには、まず以下のように```import```文を記述します。
```java:Main.java
import java.util.ArrayList;
```
ArrayListをインスタンス化する際は、<>で格納する型を指定します（```int```などの基本データ型は不可、```Integer```などのラッパークラスは可）。
```java:Main.java
import java.util.ArrayList;

public class Main {
    public static void main(String[] args) {
        ArrayList<String> names = new ArrayList<String>();
    }
}
```
## リストに要素を追加する
格納するリストの末尾に要素を追加する場合は、以下のように```add```で引数（間に要素を入れる場合は値と引数）を渡します。
```java:Main.java
import java.util.ArrayList;

public class Main {
    public static void main(String[] args) {
        ArrayList<String> names = new ArrayList<String>();
        names.add("名前1");
        names.add("名前3");
        names.add(1, "名前2");
        for(String name : names) {
            System.out.println(name);
        }
    }
}
```
**実行結果**
名前1
名前2
名前3
## リストの要素を上書きする
リストに追加した要素を上書きする場合は、以下のように```set```で値と引数を渡します。
```java:Main.java
import java.util.ArrayList;

public class Main {
    public static void main(String[] args) {
        ArrayList<String> names = new ArrayList<String>();
        names.add("名前1");
        names.add("名前2");
        names.add("名前4");
        names.set(2, "名前3");
        for(String name : names) {
            System.out.println(name);
        }
    }
}
```
**実行結果**
名前1
名前2
名前3
firefoxの自動更新無効化（2019/05時点のやつ転載）

ver63くらいから自動更新が切れなくなったのでポリシーで切った  
多分忘れるので書いとく  
更新したいときはこれを消す  

path  
C:\Program Files\Mozilla Firefox\distribution\policies.json

中身: 

    {
        "policies": {
            "DisableAppUpdate": true
        }
    }
@wordpress/envでのDB確認はwp db queryが便利

[WordPress標準制作フロー2024](https://qiita.com/koji-yamauchi/items/6a72ca8c2550f3433ce4)で記載したとおり、弊社のWordPress案件では、`@wordpress/env`を開発環境として用いることが多いです。

`@wordpress/env`でのDBの確認は[Accessing the MySQL Database](https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#accessing-the-mysql-database)に記載されているとおりです。
起動時に標準出力されるポート番号を控え、DBクライアントから接続します。

> MySQL is listening on port {MYSQL_PORT_NUMBER}

```
Host: 127.0.0.1
Username: root
Password: password
Database: wordpress
Port: {MYSQL_PORT_NUMBER}
```

こちらを元にDBeaverなどから接続すればよいのですが、毎回ポート番号が変わってしまうため、DBeaverを起動しなおすごとに、設定を変更する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/a45718e7-7b6b-e701-7b36-2142cd2032bb.png)

これは少し面倒です。

WP-CLIには`wp db query`という便利なコマンドがあります。
これはDBへの接続情報を開発者が意識しなくてもそのままSQLを実行できます。

`@wordpress/env`想定で、ホスト側からDockerインスタンス上でのコマンド実行する場合は`npx wp-env run cli`を先頭につけます。
（※`wp-env`をグローバルインストールしている場合は`npx`を省略）

具体的にはこのようになります。

```
% npx wp-env run cli wp db query 'SHOW TABLES' 
+------------------------------+
| Tables_in_wordpress          |
+------------------------------+
| wp_commentmeta               |
| wp_comments                  |
| wp_links                     |
| wp_options                   |
| wp_postmeta                  |
| wp_posts                     |
| wp_redirection_404           |
| wp_redirection_groups        |
| wp_redirection_items         |
| wp_redirection_logs          |
| wp_term_relationships        |
| wp_term_taxonomy             |
| wp_termmeta                  |
| wp_terms                     |
| wp_usermeta                  |
| wp_users                     |
| wp_yoast_indexable           |
| wp_yoast_indexable_hierarchy |
| wp_yoast_migrations          |
| wp_yoast_primary_term        |
| wp_yoast_seo_links           |
+------------------------------+
✔ Ran `wp db query SHOW TABLES` in 'cli'. (in 1s 114ms)
```

便利ですね。

`@wordpress/env`での環境に限らず、`wp-config.php`を確認して`mysql`コマンドで入って、という手順を省略できるので様々な場所で活躍します。

[WP-CLI](https://developer.wordpress.org/cli/commands/)はそのほかにも、便利な機能が多数ありますのでWordPressを扱うエンジニアはおおよその機能を知っておくと良いでしょう。
[石碑記事] VSCode 拡張の Postman で localhost に送信できないあなたへ

:::note warn
**注意**
この記事で扱う不具合は**2024年6月25日**にリリースされた **v1.1.0** で修正されました。
その点を留意した上で興味がある方はお読み下さい。
:::

## この記事が役立つかもしれない人
* VSCode の拡張機能として提供されている Postman を使用している人
  * `localhost` にアクセスしようとしている人
    * 次のような画面で苦しんでいる人

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038389/bc66b299-b4ed-eaf3-a972-d2e15423c4f7.png)


## 解決策
`localhost:(ポート番号)` と入力しているのを `127.0.0.1:(ポート番号)` に修正する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038389/f4cbe41f-3247-623e-6033-65ae7132f318.png)

2024年6月20日現在、VSCode の拡張機能として提供されている Postman では `localhost` を `127.0.0.1` に正しく解決できない場合があるようです。  

## 余談: `localhost` と `127.0.0.1` の違いについて
### `localhost` とは？
`localhost` とはホスト名（コンピューター名）です。通常、コンピューター自体を指します。  
ネットワーク上の他のコンピューターから見た場合、`localhost` はそのコンピューター自身のループバックインターフェイスを指します。

### `127.0.0.1` とは？
`127.0.0.1` とは送信を折り返して自分自身が受信するループバックインターフェイスを指す IPv4 アドレスです。  
コンピューターが自身に通信を送り返すために使用されます。  
ちなみに IPv6 アドレスではループバックアドレスとして `::1` が定義されています。

### 名前解決について
`localhost` はホスト名なので IP アドレスに解決される必要があります。  
この解決はホストファイル（`/etc/hosts` または `C:\Windows\System32\drivers\etc\hosts` など）や DNS サーバーを介して行われます。  
`127.0.0.1` は直接的な IP アドレスなので名前解決を必要としません。

### じゃあ `127.0.0.1` を使っていた方がいいの？
`localhost` と `127.0.0.1` は一般的に同じ目的で使用されますが、可読性については `localhost` の方が優れているので設定ファイルやスクリプトでの使用は `localhost` の方が推奨されます。  
ただ今回のケースのようなこともあるので `localhost` ≒ `127.0.0.1` と覚えておいて損はないはずです。

## ~~記事を書いたものの近々解決されそう~~

https://github.com/postmanlabs/postman-app-support/issues/12939#issuecomment-2172219267

Postman の開発チームがこの問題を認識しており、将来的なアップデートで修正される予定です。
誰かの役に立つ期間が短い記事になりそうで悲しいね。


## 🎉 修正されました!!! 🎉
2024年6月25日にリリースされた `v1.1.0` で修正されました！
@nagix さんに教えて頂きました。ありがとうございます！

https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

更新が自動でされない場合は「アンインストール」横の **∨** から「別のバージョンをインストール」で `v1.1.0` がインストールできます。

![Postman の拡張機能画面で「アンインストール」横のボタンから「別のバージョンをインストール」を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038389/4962187f-6f94-989a-e951-b8ea1d7e53aa.png)


迅速に不具合が修正されることで無事に有効期間５日と短い記事になりました！めでたい！！！

---

この記事が役に立ったら 🩷 を頂けると嬉しいです！
picoMini by redpwn writeup XtraORdinary

## XtraORdinary (Cryptography)

Check out my new, never-before-seen method of encryption! I totally invented it myself. I added so many for loops that I don't even know what it does. It's extraordinarily secure!

添付ファイル
・output.txt
・encrypt.py

タイトルがXtraORdinaryでXORを強調しているので、XORで復号するのではないか。XORで暗号化されたものは同じ鍵を使ってもう一度XORすると元に戻る。
実際にencrypt.pyを見てみるとxorで暗号化されていた。
```python
for random_str in random_strs:
    for i in range(randint(0, pow(2, 8))):
        for j in range(randint(0, pow(2, 6))):
            for k in range(randint(0, pow(2, 4))):
                for l in range(randint(0, pow(2, 2))):
                    for m in range(randint(0, pow(2, 0))):
                        ctxt = encrypt(ctxt, random_str)
```
xorを繰り返している部分があるが、暗号化と復号を繰り返しているだけなので、見た目より単純である。
暗号化の鍵も以下のようになっているが、everがいくつもあるだけで結果は変わらないので、実質5個だけである。よって、xorの試行回数も2^5=32回である。
```python
random_strs = [
    b'my encryption method',
    b'is absolutely impenetrable',
    b'and you will never',
    b'ever',
    b'ever',
    b'ever',
    b'ever',
    b'ever',
    b'ever',
    b'break it'
]
```
暗号化の手順は、flagをkeyでxorしたものを、random_strsで繰り返しxorしているらしい。keyの正体は不明であるが、flagの最初の文字列が「picoCTF{」であることは確実なので、keyの部分に`picoCTF{`を当てることで、暗号化に使われたkeyの正体を探る。
以下、実行コード。
```python
from Crypto.Util.number import long_to_bytes, bytes_to_long

ctxt=long_to_bytes(0x57657535570c1e1c612b3468106a18492140662d2f5967442a2960684d28017931617b1f3637)
key=b"picoCTF{"
random_strs = [
    b'my encryption method',
    b'is absolutely impenetrable',
    b'and you will never',
    b'ever',
    b'break it'
]

def encrypt(ptxt, key):
    ctxt = b''
    for i in range(len(ptxt)):
        a = ptxt[i]
        b = key[i % len(key)]
        ctxt += bytes([a ^ b])
    return ctxt

for _ in range(2):
  ctxt = encrypt(ctxt, random_strs[0])
  for _ in range(2):
    ctxt = encrypt(ctxt, random_strs[1])
    for _ in range(2):
      ctxt = encrypt(ctxt, random_strs[2])
      for _ in range(2):
        ctxt = encrypt(ctxt, random_strs[3])
        for _ in range(2):
          ctxt = encrypt(ctxt, random_strs[4])
          a = encrypt(ctxt, key)
          print(a)
```

実行すると、意味のある文字列でかつ同じ文字列が繰り返されていそうなのを探すと、`Africa!`という文字列を発見。これがkeyの正体であろう。上記実行コードの`key=b"picoCTF{"`を`key=b"Africa!"`に変更して再度実行すると、フラグが得られた。

`picoCTF{w41t_s0_1_d1dnt_1nv3nt_x0r???}`
アプリアーキテクチャページのメモ

## モバイルアプリのユーザー エクスペリエンス
アプリ開発者は端末のオペレーティングシステムやユーザーの操作にはせいぎょうができないのでアプリコンポーネントは体外に依存すんな

## アーキテクチャに関する共通の原則
記載通りアプリコンポーネントをデータや状態の保存につかえない
アプリがデカくなったらアプリの拡張や堅牢度を高めてテストしやすくすることが大事
Activity と Fragment の実装はデベロッパーが管理するものではないこれらのクラスは、Android OS とアプリの間のコントラクトを体現する単なる結合クラスでユーザーの操作によって簡単に破棄されるからこれらへの依存を最小限にする。
#### 1 つの重要な原則は、UI をデータモデルで操作することです
アプリ アーキテクチャをデータモデル クラスに基づいて構築すると、アプリのテストのしやすさと堅牢性を高めることができます。

信頼できる唯一の情報源これは一か所で操作ができるとデータの保護やバグが見つけやすくなる
アプリデータの信頼できる情報源は、通常はデータベースです。場合によっては、ViewModel や UI が信頼できる情報源になります

単方向データフローここはviewModelからuiへの渡し方の話

## アプリの推奨アーキテクチャ
下の二つが最低限必要
- 画面にアプリデータを表示する UI レイヤ
- アプリのビジネス ロジックを含み、アプリデータを公開するデータレイヤ
https://developer.android.com/topic/architecture/recommendations?hl=ja
これがアーキテクチャの推奨事項のページ

UI レイヤ
composeとviewModel系のこと

データレイヤ
ビジネスロジックでデータの作成、保存、変更　ex) リポジトリ クラス

ドメインレイヤ
UI レイヤとデータレイヤの間に位置するオプションのレイヤです
複雑なビジネス ロジック、または複数の ViewModel で再利用される単純なビジネス ロジックをカプセル化します
このレイヤのクラスを「ユースケース」または「インタラクタ」

特定のクラスの依存関係を収集できます。

依存関係の注入（DI）: 依存関係の注入を利用すると、クラスの依存関係を構築することなく定義できます。ランタイムには、別のクラスがこの依存関係を提供します。
サービス ロケータ: サービス ロケータ パターンでは、クラスが依存関係を作成せずに取得できるレジストリが提供されます。

アーキテクチャのメリット
優れたアーキテクチャをアプリに実装することは、プロジェクト チームとエンジニアリング チームに次のような多くのメリットをもたらします。

アプリ全体の保守性、品質、堅牢性が向上します。
アプリのスケーリングが可能になります。より多くの人々とチームが、コードの競合を最小限に抑えながら、同じコードベースで開発に寄与できます。
オンボーディングに役立ちます。アーキテクチャによってプロジェクトに一貫性がもたらされるため、新しいメンバーが速やかにチームに適応し、短時間でより効率的に作業できるようになります。
テストが簡単になります。優れたアーキテクチャでは、一般的にテストしやすいシンプルな型が推奨されます。
適切に定義されたプロセスを使用して、体系的にバグを調査できます。
hello world(自己紹介)

# はじめに
はじめまして、Ruuと申します。
ずっとQiitaのようなところにブログを書きたかったのですが~~時間がなかなかなくて~~
ようやくこうやって書くことができました。
初めての投稿は自己紹介でもしようかなと思います。
# 自己紹介
- 完全未経験から友達に頼み込み、自社開発の会社に運よく入らせてもらったソフトウェアエンジニア
- 現在2年目
- 使用言語はPHPとTypeScript
- フレームワークはLaravelとVue
- 一応フルスタックだが、サーバーメインなのでフロントの知見が少ない(課題)
# Qiitaを使って
僕は設計についてかなり考えさせられた教育を受けてきたので、
コードを書いているときにかなり設計を意識して書くようにしています。
しかしながら本格的に教えてもらっているのは一人からでそれ以外からはSNSや本でしか学びを得たことがないのでまだまだ知見が少ないし広い視点を持てていないと思っています。

一度考え出したら自分の中での答えが決まるまで追求したくなるので、
その際に調べたことが沢山あるんですが、ちゃんとまとめられていないので
こういうQiitaなどに投稿していきたいなと思いました。

転職をする際や自分のことを知ってもらう際にこういう公開しているものがあれば非常に楽になるというのもあります。

エンジニアは某SNSにある　**#今日の積み上げ** というタグが存在するように

https://note.com/fly_aji/n/nfb5efd436efe

コツコツ技術や知見の積み上げを続けていけば価値は上がっていくものだと思っています。
~~もちろん何も考えずにただ業務をこなすだけの積み上げはダメです~~

それでは今日はここで終わりたいと思います。
つぶやき程度でこれから記事をあげますので流し見程度で見てくれると嬉しいです。

それではおやすみなさい。
Next.jsでMarkDownエディターを作ろうとして失敗した話　その1 [React-Markdown,react-md-editor]

## Next.jsでマークダウンエディタを作りたい

ちょっとした理由でマークダウンのリアルタイムプレビュー機能のついたエディタを作る必要がでました

Nextjsで使えそうなものを調べたとき、**react-md-editor**というものを見つけました

## まさかのエラー

https://zenn.dev/dino3616/articles/b6c09b73ade20e

こちらの方の記事を参考にさせていただきました
この方もおっしゃられてた通り、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3303371/c7f50f8b-50ec-20a2-3725-2f3e0b79bd70.png)

の設定が必要でした

しかし僕の環境で何度試しても

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3303371/45df1fd4-a8ab-4dac-8ef3-50dc19ef2f4f.png)

結局治らず

## 代わりとなるReact-Markdown

https://clouddevs.com/next/markdown-editor/

こちらの記事を参考に導入すると、
あっという間に

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3303371/6c1ba022-30cd-2ea9-368e-c722be983ff5.png)

作成することができました！！
【Python】sepを使ったFITSデータ解析時のバイトオーダーエラーの対処法

## はじめに
天文学や画像処理の分野で広く使用されているPythonパッケージの一つに、[`sep`](https://sep.readthedocs.io/en/v1.0.x/index.html)があります。このモジュールで、FITSデータを処理する際に、バイトオーダーの問題でエラーが発生することがあります。本記事では、この問題の詳細とその解決方法を説明します。

## バイトオーダー（エンディアンネス）について
バイトオーダーは、コンピュータのメモリにデータが格納される順序を指します。主に次の2種類があります。
- ビッグエンディアン: 最上位バイトが最初に来る形式
- リトルエンディアン: 最下位バイトが最初に来る形式

エンディアンの詳細な説明については、[こちら](https://www.torutk.com/projects/swe/wiki/%E3%83%93%E3%83%83%E3%82%B0%E3%82%A8%E3%83%B3%E3%83%87%E3%82%A3%E3%82%A2%E3%83%B3%E3%81%A8%E3%83%AA%E3%83%88%E3%83%AB%E3%82%A8%E3%83%B3%E3%83%87%E3%82%A3%E3%82%A2%E3%83%B3)が参考になります。

ネイティブバイトオーダー（システムがデフォルトで使用するバイトオーダー）とデータのバイトオーダーが一致していない場合、データの解釈が誤り、解析結果に大きな影響を与える可能性があり、この違いに注意する必要があります。



## エラーの詳細
エラーが出た際の筆者の環境は以下のとおりです。

- Python 3.10.12
- sep 1.2.1
- numpy 1.25.1
- astropy 6.0.0

エラー時のコードは以下です。

```python
import sep
import numpy as np
from astropy.io import fits

fits_file = 'example.fits'
hdul = fits.open(fits_file)
image_data = hdul[0].data

bkg_sep = sep.Background(image_data, bw=64, bh=64, fw=3, fh=3)
```
```:エラー内容
ValueError: Input array with dtype '>f4' has non-native byte order. Only native byte order arrays are supported. To change the byte order of the array 'data', do 'data = data.byteswap().newbyteorder()'
# あるいは
ValueError: Input array with dtype '<f4' has non-native byte order. Only native byte order arrays are supported. To change the byte order of the array 'data', do 'data = data.byteswap().newbyteorder()'
```

## 問題の原因

`sep`でのエラーを出している該当箇所[sep/sep.pyx](https://github.com/kbarbary/sep/blob/d6150a61a6c734d720f459a48dd2b8f15d92318f/sep.pyx#L218)を抜き出すと、
```python:
if not dtype.isnative:
    raise ValueError(
        "Input array with dtype '{0}' has non-native byte order. "
        "Only native byte order arrays are supported. "
        "To change the byte order of the array 'data', do "
        "'data = data.byteswap().newbyteorder()'".format(dtype))
```
となります。つまり、このコードから`sep`モジュールはネイティブバイトオーダーを期待しています。FITSファイルを読み込んだ際に、ネイティブのバイトオーダーと異なる場合にこの問題が発生します。


## 解決方法

### 簡易的な方法
このエラーが出た際の解決策は、データのバイトオーダーをネイティブバイトオーダーに合わせることです。エラーログに従い[`byteswap()`](https://numpy.org/doc/stable/reference/generated/numpy.ndarray.byteswap.html)と[`newbyteorder()`](https://numpy.org/doc/stable/reference/generated/numpy.dtype.newbyteorder.html)を使って以下のように書きます。

```python
image_data = image_data.byteswap().newbyteorder()
```

### 汎用的な方法
エラーの有無やネイティブバイトーオーダーに関わらず、実装可能は汎用的な方法を説明します。ネイティブバイトオーダーは[numpy.dtype.isnative](https://numpy.org/doc/stable/reference/generated/numpy.dtype.isnative.html)で確認てきるので、以下のように書きます。

```python
from astropy.io import fits
import numpy as np
import sys

fits_file = 'example.fits'
hdul = fits.open(fits_file)
image_data = hdul[0].data

# バイトオーダーがネイティブバイトオーダーと異なる場合、変換する
if not image_data.dtype.isnative:
    image_data = image_data.byteswap().newbyteorder()
```


## まとめ
FITSデータを`sep`で処理する際には、データのバイトオーダーを確認し、必要に応じて変換することが重要です。また、バイトオーダーの違いについて理解し、適切に対処することで、他のデータ処理や解析でも同様の問題に対応できると思います。本記事がどなたかの役に立てば幸いです。

# 参考
https://github.com/kbarbary/sep/issues/23
【Unity】ARDKのプロジェクトをURPに対応させようとするとカメラの画面が真っ黒になる

# はじめに
ARDKのURP対応時に画面が真っ黒（真っ暗？）になる問題が発生したので、不具合解消方法を記録します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/9ddaa444-20dd-e930-3c5d-0d9900111482.png)

# 解消方法
現在利用しているQuality設定のURPアセットを開き `ARBackGroundRenderFeature` のRenderFeatureを追加するとカメラの映像が表示されるようになりました!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/6bc0c1ce-0981-7939-6564-7d0931b69693.png)
Raspberry PIでSDカードにwpa_supplicant.confを作成する方法はもう使えない　Wifi追加・変更の方法

従来、Raspberry PiでのWifi設定を行う際に、Raspberry Pi OSが入ったSDカードをマウントし、
wpa_supplicant.confという名前のファイルを作成することで
次回の起動時に/etc/wpa_supplicant/wpa_supplicant.confを上書きしてくれることで
Wifi設定を変更できるという仕様がありました。

こんな方法です

https://qiita.com/mascii/items/0d1a280ac58ed8f6f999

しかしながら、RaspberryPi OS Bookwormから、この方法でWifi情報を変更することができなくなりました


## wpa_supplicant.confを上書きしてくれない
SDカードのルートに、wpa_supplicant.confを作成して、ラズパイを再起動しても、/etc/wpa_supplicant/wpa_supplicant.confは上書きされず、ファイルを確認しても
下記のような記載しかありません


```wpa_supplicant.conf
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
```

また、従来はSDカードに作成されたwpa_supplicant.confは、再起動後に上書きが実行されると削除されていましたが、bookwormでは削除されません。

## Wifi情報がwpa_supplicant.confで管理されなくなっている
上記に書いた通り、Wifiの設定がなされていても、/etc/wpa_supplicant/wpa_supplicant.conf2はその情報が書かれていません

bookwormでは、NetworkManagerでネットワーク情報を管理しているようで
/etc/NetworkManager/system-connections
の中にある
preconfigured.nmconnection
というファイルに記載されています

```
[connection]
id=preconfigured
uuid=hogehoge
type=wifi
[wifi]
mode=infrastructure
ssid=your-ssid
hidden=false
[ipv4]
method=auto
[ipv6]
addr-gen-mode=default
method=auto
[proxy]
[wifi-security]
key-mgmt=wpa-psk
psk=your_password
```

ということで、便利だったwpa_supplicant.confを作成する方法が使えなくなりました

## 代替方法は？
初回のWifi設定は、Pi Imagerを使ってSDカードにOSを書き込む際に
Wifi設定を書き込むことができるようになっているので、初回の設定は困らないかと思います

途中でWifiを変えたい、展示会等に持って行く時だけWifiを変えたい、というときは
既に存在する
/etc/NetworkManager/system-connections/preconfigured.nmconnection
を修正して、他のネットワーク情報を書き換えてあげることで、別のネットワークに繋がることが確認できました

また、/etc/NetworkManager/system-connections/
にファイルを追加してあげれば、他のWifiに繋げることも確認しています

例えば

```/etc/NetworkManager/system-connections/ssid2.nmconnection
[connection]
id=preconfigured
uuid=hogehoge2
type=wifi
[wifi]
mode=infrastructure
ssid=another-ssid
hidden=false
[ipv4]
method=auto
[ipv6]
addr-gen-mode=default
method=auto
[proxy]
[wifi-security]
key-mgmt=wpa-psk
psk=another_password
```

というファイルを追加してあげると、
そのWifiしかない場合に、そのWifiに繋がることを確認できました

## しかしながら・・
SDカードにファイルを作るという便利な方法は使えなくなってしまいました。
展示会などで別のネットワークを使いたい時に便利だったのですが、仕方ありません。

画面レスでラズパイを最初からssh接続したいという用途においては、Pi Imagerで十分できると思いますので
あまり需要はないのかもしれませんが


## 備考
wpa_cliを用いたWifi設定方法があるみたいなのですが
私はsave_configでFAILが出てしまって使うことができませんでした。

https://qiita.com/ST_TzF/items/fce9f67c4afa3a8b4f0b
Postgresqlの注意点

prismaを使った時にPostgresqlではまったので、忘れないように備忘録として残しておく。

Postgresqlで自分は下記のエラーにはまった。


```
Error: P1000: Authentication failed against database server at `localhost`, the provided database credentials for `postgres` are not valid.

Please make sure to provide valid database credentials for the database server at `localhost`.
```

このエラーと同時にログを見ると

```
2024-06-16 19:19:01.541 JST [269] LOG:  database system is ready to accept connections
2024-06-16 19:20:36.275 JST [1714] postgres@blog_nextjs_crud FATAL:  password authentication failed for user "postgres"
2024-06-16 19:20:36.275 JST [1714] postgres@blog_nextjs_crud DETAIL:  User "postgres" has no password assigned.
        Connection matched file "/etc/postgresql/16/main/pg_hba.conf" line 125: "host    all             all             127.0.0.1/32            scram-sha-256"
2024-06-16 19:50:58.307 JST [7667] postgres@blog_nextjs_crud FATAL:  password authentication failed for user "postgres"
2024-06-16 19:50:58.307 JST [7667] postgres@blog_nextjs_crud DETAIL:  User "postgres" has no password assigned.
        Connection matched file "/etc/postgresql/16/main/pg_hba.conf" line 125: "host    all             all             127.0.0.1/32            scram-sha-256"
2024-06-16 19:51:22.893 JST [7854] postgres@blog_nextjs_crud FATAL:  password authentication failed for user "postgres"
2024-06-16 19:51:22.893 JST [7854] postgres@blog_nextjs_crud DETAIL:  User "postgres" has no password assigned.
        Connection matched file "/etc/postgresql/16/main/pg_hba.conf" line 125: "host    all             all             127.0.0.1/32            scram-sha-256"
```

またある人からpostgresユーザーがパスワードを再設定をしたらどうかと言われていろいろ調べました。

で結論Postgresqlのパスワードなしでもいけるということが調べて分かり、下記のように設定変更。

```pg_hba.conf
# "local" is for Unix domain socket connections only
local   all             all                                     trust
# IPv4 local connections:
host    all             all             127.0.0.1/32            trust
# IPv6 local connections:
host    all             all             ::1/128                 trust
```

これでpostgresユーザーでパスワードなしでいけるかなって実行したらいけました。
CodeAGIを【途中まで】使ってみた

## 概要
現在Qiita Engineer Festa 2024が開催中です。
私も投稿頻度を増やして頑張ってみようと日夜OUTPUTする内容を考えています。
今回はソプラ株式会社協賛によりキャンペーンテーマが設けられていたため、投稿しようと思います。

テーマは、
設計書からプログラムコードを自動生成するサービス「CodeAGI」を使用してレビュー記事を投稿する
といったものでした。

先に、結論を申し上げます。
記事を投稿するにしては敷居が高く感じました。
アカウント登録として、メールアドレス、会社名、部署名、姓名が必須となっています。
CodeAGI自体は無償ですが、ChatGPTやVertexAIのAPIキーやアカウントキーを設定する必要があり、自己負担が発生する可能性があります。

## CodeAGIとは
キャンペーンページにも記載がありますが、
CodeAGIだけが実現できる６つのこととして下記が記載されていました。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811817/15f06ea1-b057-1826-1f3f-8b4a033fb380.png)
[引用元：CodeAGIで実際にコードを自動生成してレビューを投稿しよう！](https://qiita.com/official-events/579a875535f3fa987106)

これらはCodeAGIだけが実現できるそうです。

本来は有償版生成AIとして提供しているそうですが、完全無償で利用する方法と題しURLが記載されています。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811817/412b6004-0881-b18e-8da9-6bc1de9fb0cd.png)
[引用元：CodeAGIで実際にコードを自動生成してレビューを投稿しよう！](https://qiita.com/official-events/579a875535f3fa987106)

早速アクセスしてみましょう！

## 完全無償で利用する方法
アクセスしますとソプラ株式会社のホームページに遷移しました。
CodeAGIの概要が記載されており、スクロールすると使用条件の記載があります。
ざっくりまとめると、
CodeAGI自体の使用は無償ですが、
認証キーの使用により生成AI各社への支払いが発生するとのこと。
更にスクロールすると2024年6月限定で無料お試しキャンペーンが開催されていました。
毎月抽選が行われ100社限定でGPT-4の無料認証キーが作成したCodeAGIのアカウントに紐づけられるそうです。

まとめますと、
CodeAGI自体は無料。
CodeAGIを使用するための生成AIは自己負担。
ユーザー負担回避のために毎月抽選100社のみGPT-4の認証キーを設定。

キャンペーンページにて完全無償がどこまでの範囲を指しているか明確ではないので、
全て無料で使用することができると誤解してしまいそうですね。

## とりあえずやってみる
Windows版とmac版のインストーラがあります。
使用PCのOSがWindowsのためWindows版をダウンロード。
インストーラを実行すると下記画面が開きます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811817/fd51ea6a-c9e2-d1a3-e868-7cd47ac12d2b.png)
アカウント登録が必要なようです。

アカウント登録ボタンを押すと、利用規約が表示されます。(規約内容は黒塗りしています)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811817/22585cbb-7b62-f267-1c7b-fb292c8b0ebd.png)
利用規約に同意して次へを選択しました。

アカウント登録画面にて、下記を入力します。
メールアドレス
パスワード
会社名
部署名
名前(姓、名)
電話番号※必須ではない
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811817/62bd9785-2ccb-4d56-fcd9-e909e4799d61.png)

登録後に下記画面へ飛びます。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811817/b3a1347f-bad2-ccdd-67d4-c882a149920b.png)
使用する生成AIを選択し、実際に認証キーやアカウントキーなどサービスごとの連携情報を設定しないと背景のメニューには飛べないようになっていました。

現在選択できるのは下記の3サービスのようです。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811817/e70153b8-4724-e979-a06d-970937bebc64.png)
OpenAI ChatGPT
Azure OpenAI
Google VertexAI

## まとめ
中途半端な所でまとめに入ります。
もしかしたら私がなにか見落としている箇所があるのかもしれませんが、
どうにも腑に落ちない点があるためここまでで使用をストップしました。
(まず私はAIサービスを有償利用していない)

もともと生成AIの設定画面を拝見した時に、投稿をやめようかと頭によぎりました。
しかし、投稿を予定している方に少しでも有益な情報が残せればと思い記事として残すことにしました。
CodeAGIをテーマに記事を投稿予定の方へ何かしら手助けできていたら幸いです。
また、記事の内容に関して何か誤解がございましたらお手数ですがご指摘お願いいたします。

ご覧いただきありがとうございます！
C_TS422_2021 SAP Certified Application Associate SAP S/4HANA Production Planning and Manufacturing対策（12/100）

【12日目】
トピック 3：SAPS/4HANAのマスタデータ（1/22）

≪問題12≫
ファントム組立品を使用する理由は何ですか。
（３つ選択）
□品目マスタの数を減らすため
□部品表/配合表（BOM）の構造を簡略化するため
□計画レベルの数を増やすため
□構成品目の割当を容易にするため
□部品表/配合表（BOM）で必要となる変更の数を減らすため

≪解答≫
□品目マスタの数を減らすため
■部品表/配合表（BOM）の構造を簡略化するため
□計画レベルの数を増やすため
■構成品目の割当を容易にするため
■部品表/配合表（BOM）で必要となる変更の数を減らすため

≪解説≫
◆ファントム組立品は、以下の目的で使用されます。
（1）BOMの構造を簡略化するため
ファントム組立品は物理的には存在せず、互いに組み合わせて使用される構成品目グループに対する仮想の組立品とみなすことができます。この役割により、マスタデータの管理が大幅に簡略化されます。品目に変更を加える際は、1つのBOMで変更を行うだけでよく、そのBOMを変更すると、ファントム組立品で使用されるすべてのBOMに影響が及びます。
（2）構成品目の割当を容易にするため
ファントム組立品の構成品目は同じ作業に割り当てられているため、構成品目の割当を簡単に行うことができます。BOMが製造指図で展開されると、ファントム組立品のBOMも展開されます。ファントム組立品の構成品目は、ファントム組立品自体が計画外の有効入出庫予定として指図に転送され、通常の入出庫予定として扱われます。さらに、上位組立品を使用して階層に関連付けられます。
Packer + Ansible で ftp-server: No such file or directory でコケたら

## 事象 

久々に packer + ansible で AWS の AMI を作成しようとしたら次のようなエラーでコケてしまいました。

```
fatal: [default]: UNREACHABLE! => {"changed": false, "msg": "Failed to connect to the host via scp: bash: /usr/lib/sftp-server: No such file or directory\nscp: Connection closed\r\n", "unreachable": true}
```

## 実行環境

Packer を実行したのは `python:3.12.4-slim-bookworm` を base image として Packer を追加したコンテナの中です。

Packer は 1.11.0, Ansible は community package 9.6.1 (ansible-core 2.16.7) です。

## 対処

Packer の [ansible provisioner](https://developer.hashicorp.com/packer/integrations/hashicorp/ansible/latest/components/provisioner/ansible) では `sftp_command` がデフォルトでは `/usr/lib/sftp-server -e` になっているようです。また、接続元の OpenSSH が version 9 以降の場合、scp を実行してもデフォルトでは内部的に sftp が使われるらしいのです。

そこで、この内部的な sftp への切り替えを抑制するために `extra_arguments` にそのためのオプションを指定しろという対策が次の Issue にありました。

https://github.com/hashicorp/packer/issues/11783#issuecomment-1137052770

```hcl
build {
  provisioner "ansible" {
    playbook_file   = "ansible/playbook.yml"
    user            = "ec2-user"
    extra_arguments = ["--scp-extra-args", "'-O'"]
  }
}
```

👆 こんな感じ。

scp の man page では `-O` は次のように書かれています。

> Use the legacy SCP protocol for file transfers instead of the SFTP protocol.  Forcing the use of the SCP protocol may be necessary for servers that do not implement SFTP, for backwards-compatibility for particular filename wildcard patterns and for expanding paths with a ‘~’ prefix for older SFTP servers.

でも、個人的にこれはなんだか気に入らなかったので別の方法を探してみました。
`sftp_command` をサーバー上に存在する path にすれば良いのではないかと `/usr/libexec/openssh/sftp-server -e` にしてみましたが、これだけではダメで、`use_sftp` を `true` とし、scp からの sftp ではなく最初から sftp を使うようにすることで解消されました。

```hcl
build {
  provisioner "ansible" {
    playbook_file = "ansible/playbook.yml"
    user          = "ec2-user"
    use_sftp      = true
    sftp_command  = "/usr/libexec/openssh/sftp-server -e"
  }
}
```

Packer の設定ファイルがいつの間にか json から HCL に変わってたり、plugin 機構が導入されていたり Ansible 2.17 からは yum が使えなくなっていたり、しばらく触らない間にいろいろ変わってました。Amazon Linux 2 では dnf が使えないため yum のサポートが消えてしまった最新の Ansible は使えない。
Webサイト刷新(ヘッダ編)

こんにちは。Webサイトの刷新と銘打ってシリーズで続けていきたいと思っています！
今回はヘッダ編となります。一番簡単に進められそうなところをチョイスしています。(モチベーション上げるために)

現サイトは以下で、当時は頑張って作りましたけど、デザインセンスの欠片が少しだけ感じたい。
https://penta-d-system.com/
![site_before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522989/32e6c0ab-1a35-4000-bd6a-f31fd6ab15ab.png)

# 環境
- nodejs: 16系
- nuxt: 2.15.6
- @nuxtjs/vuetify: 1.11.2


nuxt2系で、vuetifyでコンポーネントを作成しています。
いまはnuxt3系が主流で、3.11.2が最新バージョンとなっています。技術の進歩は凄まじい。


# 現状
![site_header_before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522989/03f6932c-49fd-eb4a-78c0-32ba8e8c292c.png)

ロゴ、新着と全記事で構成されています。
```vue
<v-btn v-for="item in menu" :key="item.to" text :to="item.to" nuxt>
    {{ item.title }}
</v-btn>
```
各リンクはdataで定義しているので、v-forで作成しています。

# やりたいこと
1. ボタンからリンク形式に変更
    - hover時、ページが表示されている時に下線を引いて強調する
1. サイトのイメージカラーを決定
    - 色合いも適当なので決定する

## ボタンからリンク形式に変更

nuxt-linkに変更して、クラスを適用しました。クラスはvuetifyで用意されているものを基本使うようにして、特殊なことをする時は自前のクラスを実装します。

```vue:default.vue
<nuxt-link
  v-for="item in menu"
  :key="item.to"
  :to="item.to"
  nuxt
  class="black--text font-weight-bold text-decoration-none link"
  :class="{ active: isActive(item.to) }"
>
  {{ item.title }}
</nuxt-link>
```
```js
  methods: {
    isActive(to) {
      return this.$route.path === to
    },
  },
```

```css
<style scoped>
.active,
.link:hover {
  color: var(--v-primary-base) !important;
  border-bottom: 2px solid var(--v-primary-base);
}
</style>
```
var(--v-primary-base)は、後述のvuetifyをカスタムすることで使えます。


## サイトのイメージカラーを決定
Adobe Colorでサイトのカラーイメージを決めました
https://color.adobe.com/ja/trends/Ui/ux?page=2

![site_image_color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522989/ab72704b-f2de-1207-167b-85158b67922b.png)

vuetifyのカスタムでprimaryカラーを変更します。

```js:nuxt.config.js
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      dark: false,
      light: {
        primary: '#614BF2',
        accent: '#7F6DF2',
        secondary: '#B6D93B',
        // info: colors.cyan.lighten5,
        // warning: colors.amber.base,
        // error: colors.deepOrange.accent4,
        // success: colors.green.darken2,
        // normalWhite: colors.shades.white,
      },
      // --v-primary-baseなどを使えるようにする設定
      options: {
        customProperties: true,
      },
    },
  },
```
とりあえずsecondaryまで変更しました。

# 完成
![site_header_after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522989/c6063437-4234-e475-9448-b914081643d7.png)

クリック、マウスオーバー時にprimaryカラーが変更され、下線が引かれました 😁