OmniAICreator/Qiita-1.07M huggingface dataset:
[Swift]リアルタイム音声認識+ファイル出力

## はじめに
リアルタイム音声認識(Speech-To-Text)を用いて、話した内容がテキストファイルとして出力されるアプリです。

1.Speech-To-Textの実装
2.画面構成
下記記事を参考にさせていただきました、ありがとうございます。
また本記事は前提として下記記事を実装した状態で動作します。

https://swift-ios.keicode.com/ios/speechrecognition-live.php

## 完成品
1.録音ボタン（赤いボタン）を押すと録音、音声認識が開始
2.停止するとファイルアプリ内にテキストファイルとして出力
![peter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571351/23039fbb-8191-9a27-e7f5-a600aba39c1c.png)

![peterTXT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571351/14100206-79b5-d2ca-6fc2-15cafb57508b.png)




## 実装1.フォルダへアクセス
音声認識した結果を自身のドキュメント内に保存するために、FileManagerを用います。
画像の「ファイル」というios標準実装のアプリ内に保存されるようにします。ないという方は、ストアでインストールできます。
![fileApp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571351/db2a4fa9-2f8e-c8f4-22a8-4ce24c557b1a.png)



次に、作成するアプリにファイルへアクセスする権限を付与します。info.plistに「Supports opening documents in place」と「Application supports iTunes file sharing」を追加します。
![filemanager_use.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571351/65703b7a-07c6-d7df-620f-19bd908813ac.png)

ここまでできたらファイル作成のコードを記載します。
```swift
/// ファイル名用の変数を用意
let date = NSDate()
let formatter = DateFormatter()
formatter.dateFormat = "yyyyMMddHHmmss"
let dateStr = formatter.string(from: date as Date)

/// DocumentsフォルダURL取得
guard let dirURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first else {
              fatalError("フォルダURL取得エラー")
          }
/// 対象のファイルURL取得
let fileURL = dirURL.appendingPathComponent((dateStr)+".txt")
do {
    try self.textView.text.write(to: fileURL, atomically: false, encoding: .utf8)
    }catch {
        print("Error: \(error)")
    }
```

## 実装2.音声認識した結果をテキストファイルに書込
実装１のコードを「@IBAction func recordButtonTapped」内に入れます。

```swift
@IBAction func recordButtonTapped(_ sender: Any) {
    if isRecording {
      UIView.animate(withDuration: 0.2) {
        self.showStartButton()
          /// ファイル名用の変数を用意
          let date = NSDate()
          let formatter = DateFormatter()
          formatter.dateFormat = "yyyyMMddHHmmss"
          let dateStr = formatter.string(from: date as Date)
          /// DocumentsフォルダURL取得
          guard let dirURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first else {
              fatalError("フォルダURL取得エラー")
          }
          /// 対象のファイルURL取得
          let fileURL = dirURL.appendingPathComponent((dateStr)+".txt")
          do {
              try self.textView.text.write(to: fileURL, atomically: false, encoding: .utf8)
          }catch {
              print("Error: \(error)")
          }
      }
      stopLiveTranscription()
    } else {
      UIView.animate(withDuration: 0.2) {
        self.showStopButton()
      }
      try! startLiveTranscription()
    }
    isRecording = !isRecording
  }
```

以上でリアルタイム音声認識＋ファイル出力が行えます。

## 今後
表題にもありますが議事録などを撮る際に使えそうかなと思い実装しました。話者特定などもSoundAnalysisというものを使うことで実装できそうなのでそちらも追加していき改良していこうかなと思います。
React✖︎tailwind CSSで簡単なダークモード実装方法

# React✖︎tailwind CSSで簡単なダークモード実装方法

1. useStateでダークモードを管理
2. モードの切り替え関数を作る
2. CSS実装

## useStateでダークモードを管理

```react
const [darkMode, setDarkMode] = useState(false);
```

ダークモードはtrueかfalseの真偽値で管理します。

## モードの切り替え関数を作る

```react
function toggleMode(){
    setDarkMode(!darkMode);
}
```

useStateで管理しているので、setDarkModeの中に、darkModeの偽を出すことで切り替えができます。

## CSSで実装する
```react
<div className={`${darkMode ? "bg-sky-400" : ""}`}>
    <button onClick={toggleMode}>ダークモードに切り替え</button>
</div>
```

CSS内に三項演算子で、ダークモードの時のCSSとライトモードの時のCSSを書きます。

これで簡単にダークモードを実装できますね！
Bingのチャットでシェルスクリプトの比較演算子の覚え方・語源を聞いたらめっちゃ分かりやすかったのでその記録を

# はじめに
linuxのシェルスクリプトの勉強をしていてeq, ge, gt, le, lt, ne,をなかなか覚えられなかったです。そこで、Bingのチャットにその語源を聞いたらめっちゃいい回答をしてくれたので共有します。

# Edgeチャットへの質問と回答
**質問**
シェルスクリプトで数字を比較したいです。そのときに、eq, ge, gt, le, lt, ne,を使ったときの意味を教えてください。また、それぞれの名前の由来を教えてください。

**回答**
シェルスクリプトで数字を比較する場合、以下の比較演算子が使用されます¹²³:
- `=`: 等しい
- `-eq`: 等しい
- `-ge`: 以上
- `-gt`: より大きい
- `-le`: 以下
- `-lt`: より小さい
- `-ne`: 等しくない

それぞれの名前の由来は、以下の通りです¹:

- `=`: 等しい
- `eq`: equal to (等しい)
- `ge`: greater than or equal to (以上)
- `gt`: greater than (より大きい)
- `le`: less than or equal to (以下)
- `lt`: less than (より小さい)
- `ne`: not equal to (等しくない)

例えば、`a` と `b` という変数に格納された数値を比較する場合、以下のように使用します¹:

```
if [ $a -eq $b ]
then
    echo "a is equal to b"
fi

if [ $a -ge $b ]
then
    echo "a is greater than or equal to b"
fi

if [ $a -gt $b ]
then
    echo "a is greater than b"
fi

if [ $a -le $b ]
then
    echo "a is less than or equal to b"
fi

if [ $a -lt $b ]
then
    echo "a is less than b"
fi

if [ $a -ne $b ]
then
    echo "a is not equal to b"
fi
```

¹: https://www.pmi-sfbac.org/arithmetic-comparison/
²: https://qiita.com/tomoyk/items/aaa6bf2ddf9b884cb50d
³: https://eng-entrance.com/linux-shellscript-operator

ソース: Bing との会話 2023/10/28
(1) 【Shellスクリプト】演算子「算術演算子」「比較演算子」につい .... https://www.pmi-sfbac.org/arithmetic-comparison/.
(2) もうシェルスクリプトでIFの書き方を迷わないための逆引き .... https://qiita.com/tomoyk/items/aaa6bf2ddf9b884cb50d.
(3) 初心者向け！シェルスクリプト演算子まとめました【Linux】. https://eng-entrance.com/linux-shellscript-operator.
(4) ShellScript bash 比較演算子 数値 文字列の比較 #初心者 - Qiita. https://qiita.com/miriwo/items/fa173cf457fd4ff8009f.
(5) undefined. https://www.pmi-sfbac.org/conditional-branch.

# 心の声
めちゃくちゃ分かりやすい。
語源を知っていると覚えやすいな。
-geということはgreaterとequal。だから「以上」。という風に意味を思い出せる。

# おわりに
最後まで読んでくださりありがとうございました。ChatGPTやBingの桶毛で調べものの効率が上がっています。いつもありがとうございます。
npm installで権限がどうのこうのエラーが出るの面倒なので変更してやった


# はじめに
自分の備忘録のためとアウトプットすることで記憶に残したいなと思ったため投稿するに至りました。
なのでゆるーく温かい目で見ていただければと思います。


## やりたいこと
やりたいこととしては表題の通りです。
mac買いたてで環境構築が必要だったのですがnpm install ~ で毎回管理者エラーが発生していて、sudoとかで無理やりインストールしていました。

けどそれでは根本的解決になっていないなということでさすがに手を打って一応いけたっぽいので投稿として残すことにしました。qiitaデビュー👏

## 結果
```terminal:terminal
sudo chown -R ユーザーとグループのID "/Users/ユーザー名/npm-temp"
npm cache clean --force
```
僕の場合はこのあと`npm install -g sass`でsassがインストールできました。
ユーザーとグループのIDには僕の場合は数字が入っています。（〇〇〇:〇〇という形で）



## プロセス
以下のとおりです。
基本chatGPTに聞いてます。
順を追って説明します。
yourusernameとyourgroupnameは各自のものに適宜変換して読んでください。
まずはじめに
```terminal:terminal
npm install -g sass
```
コマンドを実行したところ、
```terminal:terminal
The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
```
と表示されました。このファイルにアクセスする権限がないですと言われています。
chatGPTに対処法を聞いたところ下記を実行してくださいとのこと。
```terminal:terminal
sudo chown -R $USER:$USER ~/.npm-global
```
↑はnpmにグローバルでインストールするときの権限を$USERにするみたいなのでログインユーザーならだれでもインストールできるようにする記述みたいです。
```terminal:terminal
chown: 〇〇: illegal group name
```
〇〇はグループネームだと思うのですがそんなのないよと言われました。
illegal？って感じはしますが、存在しないよって意味で使ってるのだと思われます。
そこでGPTに聞くとユーザー名を確認したいらしく
```terminal:terminal
echo $USER
```
でユーザー名を確認したのち
```terminal:terminal
sudo chown -R yourusername:yourusername ~/.npm-global
```
を実行してくれとのことでした。
しかし、エラーが出ました。
実のところchatGPT的にはユーザー名とグループ名は同じになっていることが多いらしく`echo $USER`でユーザー名確認して`sudo chown -R yourusername:yourusername ~/.npm-global`を実行したら権限変更できるやろって感じだったようです。
ただ僕の場合はユーザー名とグループ名が違ったようで。

```terminal:terminal
groups
```
を実行してグループ名を確認した後、下記を実行。
```terminal:terminal
sudo chown -R yourusername:yourgroupname ~/.npm-global
```
したのですが、
```terminal:terminal
Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
```
npmのキャッシュディレクトリが適切なアクセス権限を持っていないらしいです。
一時保存先にnpmがアクセスできないというふうに僕は解釈をしています。
最終的にchatGPTから"結果"にあるコマンドを実行し、
```terminal:terminal
sudo chown -R ユーザーとグループのID "/Users/ユーザー名/npm-temp"
npm cache clean --force
```
↓を実行
```terminal:terminal
npm install -g sass
```
で無事にインストールが完了したというわけです。

以上です。
ご覧いただきありがとうございました！
休憩

<!--
2023/10/28
-->
[picoCTF][General Skills][Python Wrangling]

## Writeup
* ３つのファイルをダウンロード。
![screenshot 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/70616e18-7e04-d657-0c9e-aa2d5c700330.png)
<br>

* とりあえずpythonの中身をざっと見て、実行。
引数で暗号化されたファイルを与えて、パスワードを入力。
![screenshot 19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/a64e6f19-871d-85d6-89f3-f8fadcc61266.png)
<br>

* 以上です。
マイコンでI2C Slave

いろいろ作っています。

![IMG_20231028_092304.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/8137b440-1019-9a6e-7faf-bbf4093f4f59.jpeg)

一番下はLPC810のPSGです。

https://qiita.com/toyoshim/items/22a173d267f3c90fe36f

右は下はPIC12F1822の照度計用に作ったADCするモジュールです。PICは開発環境がげき重であまり使いたくありません。ホストからデータ読み込みにくせがあります。

https://qiita.com/yamori813/items/48284ec2e5d88b97cba3

その上はATTiny85の赤外線リモコンモジュールです。開発はPlatformIOでしました。

https://qiita.com/yamori813/items/74c060bdc84950bccfc8

一番上はMSP430のモジュールです。このボードに付いてるスイッチはマイコンを始めた80年代に買ったものです。開発はPlatformIOでしました。

https://qiita.com/yamori813/items/abb705100140be5028e0

左はおそらく騒音計を作ろうとして止めたものにSnifferを焼いてあります。基板は今は売ってないICB-89を切った物です。

https://qiita.com/yamori813/items/4afc8db8bcfbdf4079c7

コネクタはすべてVCC,GND,CLK,DATの並びにしてあります。

FreeBSDではすべて使えますが、mruby on YABMではAVRなど使えないものがあります。
Webサイト画面サイズによるモバイル変更の落とし穴

こんにちは！

今回は先日Webを作成していた時に陥った落とし穴に関してここに残したいと思います。普段私はjQueryを主に用いてWebサイトの動きの部分を実装していたのですが、先日、画面幅によってPC版とモバイル版の画面デザインを変更するときにうまくいかなくなってしまいました。

## 現象

ロードとリサイズの時に画面を対応させたいと思い、下記のようなコードを書いて実際に動きを確認してみました。

````main.js
$(function(){
    $(window).on('load resize', function(){
    // 処理を記載
    }
});
````

ここで処理を記憶のところに画面幅の変化でPC版とモバイル版が変化する処理を書きます。すると、画面幅を縮小してモバイル版に変更した後にリロードすると、PC版で表示されてしまいます。

## 原因と対処法

はっきりとした原因はわかっていませんが、おそらく、loadの処理がfunctionの処理よりも先に起きてしまったことでloadが機能していないのではないかと思います！

主な対処法は2点あるかと思います。

1点目は$(window)~の塊ごとfunctionの前に出すという方法です。

コードで書くとこんな感じ

````main.js
$(window).on('load resize', function(){
    // 処理を記載
});

$(function(){
    // 処理を記載
});

````

ちなみに私はこちらの方法で対応しました。

もう一つの対処法としてはresizeの動きは正常に行われていたので、loadの動きに問題があるだろうと考えてloadだけ外に出すように考えます！

````main.js
$(window).on('load', function(){
    // 処理を記載
});

$(function(){
    $(window).on('resize', function(){
        // 処理を記載
    }
    // 処理を記載
});

````

おそらくこちらの方法でも対応することができると思います！

今回はこの対処法で解決できてなんとか助かりました、、、。

そろそろReactをガンガン使った業務ができるようにちゃんと勉強したいな～と思いつつ、、、、なかなか勉強が進んでないですねー:disappointed_relieved:
JS/TS: オブジェクトのキーの順序を保証する

「オブジェクトのキーの順序を保証したい❗」
そんな人向けの記事。

## 「そもそもオブジェクトのキーって順序は保証されるんじゃないの❓」

されない。

↓のようにキーに数値(の文字列)を指定すると、定義したときの順序とは異なる。

![オブジェクトのキーの順序が保証されないスクショ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214979/d2ab1fc9-c4a4-498e-94ba-d141c5b35790.png)

`Object.keys()` でキーを取得するときも↑のような順序で取得されることになる。

まぁ、キーが数値になるなんてレアケースだと思うんだけど、
レアケースだからこそ、この仕様を忘れてハマることになりそう。
**怖い❗**

## 解決策1: `Map()` を使う

`Map()` は↑のような ~~糞仕様~~ へんてこ仕様がないので、
安全に使える。

![Mapを使えば順序は保証される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214979/67ed51e5-346b-0337-610b-7f95d191aafd.png)

ちなみに、パフォーマンスもいいらしい。
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) によると↓。

> Performs better in scenarios involving frequent additions and removals of key-value pairs.

ただ、オブジェクトではなくなるので、
既にオブジェクトで実装しちゃったコードを
`Map()` で置き換える場合は多少の手間がかかる。

## 解決策2: TypeScriptで配列とオブジェクトに分ける

キーだけは配列で定義しておいて、
オブジェクトのキーは配列で定義したものを使うようにする。

```ts
const order = [`a`, `1`] as const;
type MyObject = { readonly [K in (typeof order)[number]]: any };
const object: MyObject = {
  a: 2,
  1: { unchi: `de soul` },
};
```

順序が必要なときは配列のほうを参照すれば良い。

これ、単純に考えると二重管理になっちゃって良くないと思われるかもしれない。
しかし、TypeScriptなら問題ない。
オブジェクトのキーを型として強制できるので、
片方の定義をミスっても必ずエラーを吐いてくれる。

例えば、↓はオブジェクト側で `1` のキーを指定し忘れた場合。

![VSCodeでオブジェクトのキーが足りない場合のエラー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214979/f7666380-5753-d707-e061-79381ea5a88c.png)

VSCodeならリアルタイムで赤線が引かれる。
(確認してないけど) `tsc` とかでトランスパイルしたときもエラーが出ると思う。

## 解決策3: 割り切る

あんまりな解決策だけど、結構重要かもしれない。
数値(の文字列)をキーにするなんてレアケースだし、
設計によっては「絶対ない❗」って言い切れることのほうが多いと思う。

TSじゃなくてJSで書いてて、かつ `Map()` も使えないって場合も割り切ったほうが早そう。

## 余談

自分は解決策2を採用した。

[Stable Diffusion用にキャラ用のプロンプトをボタンぽちぽちで構築するアプリ](https://tenpamk2-blog.netlify.app/apps/sd-character-prompts-builder/) を作ったときの話。
プロンプトはカテゴリごとにまとめてWeb画面上で上から順に表示したいってのが要求。
カテゴリの順序が勝手に変わるのは困るなと思ったわけ。

当初は↓みたいにただのオブジェクトとして定義してた。

```typescript
const defines = {
    "カテゴリ1" : [
        {prompt: `ナイスなプロンプト`}
        {prompt: `えちちなプロンプト`}
    ],
    "カテゴリ2" : [
        {prompt: `えぐい性癖のプロンプト`}
    ]
    ...
} as const;
```

が、順序が保証されない仕様に気づいて↓のように改善した。

```typescript
export const allCategories = [
  `カテゴリ1`,
  `カテゴリ2`,
  ...
] as const;
export defines: { [K in Category]: {prompt: string} } = {
    "カテゴリ1" : [
        {prompt: `ナイスなプロンプト`}
        {prompt: `えちちなプロンプト`}
    ],
    "カテゴリ2" : [
        {prompt: `えぐい性癖のプロンプト`}
    ]
    ...
}
```

詳細は [コード](https://github.com/tenpaMk2/sd-character-prompts-builder/blob/2ad575702e498070a862396b063dc7f036a0c0e9/src/libs/prompts-store.ts
) みて。

勘のいい人はもう気づいてると思うけど、これは解決策3で全く問題なかったケースだね❗
一端 `Map()` で書き直してまた戻したりしたので、タイパが悪かったね〜。
エンジニアとして勉強し続けるのかどうかというポエム

最近、Cordaから少し離れてます。
この1年だと、Javaでエンタープライズ案件のサーバサイドやったり、Reactで画面をポチポチ作ったり、要件定義で上流に携わったり、AWS DBSに合格したり、MS Azureに触れたり、正直なところ何屋さん何だろうか？と自問する事もあります。
あと、ポケモンSVやったりしてますね。

あ、どーも、のぶこふです。

今回は、ポエムですので、そんなの読みたくないわ、という方は、そっ閉じ推奨です。

## 勉強は大事なのか

大事だと思います。異論は認めません。
ただ、最初って、一歩目が重かったりするじゃないですか。
なので、社内とかで知識ある人に、概要レベルを教えてもらう。
そうすると、なんとなく入りだしはスムーズな気がします。

で、なんで大事なのか？
ありきたりではあるのですが、まぁ、技術は進歩するし、システムも進歩する。
コレだけできれば食いっぱぐれない、みたいなのが無いんですよね。
とは言いつつ、ネットワーク周りは変化がゆるいので、抑えておくと良いと思います。

### 周りを見てみる

他の業界とかにも目を向けて見ましょう。

メニューが刷新されない飲食店。
街のことを知ろうとしないタクシー運転手。
一向に絵が上手くならない（とか、話がワンパターンの）漫画家。

いかがでしょう。イメージつきますかね？

### とは言ってもね

「いやね。大事な事はわかっているよ。ただ、そうは言っても、10年前のシステム保守をやってて新しいこともやらないし、この先も保守してくから、勉強なんていらんのよ」
「新しいことをやろうと、上に説得したけど、難癖つけて首を縦に振らないんだよね」
「今忙しくてなんも出来ない。プライベートくらい、好きにさせてよ」

あると思いますっ!!
懐かしい（？）ネタをぶっこんでみました。

### 秘伝のタレは…

さて、クイズです。
100年間受継いだ秘伝のタレは、100年前と同じものでしょうか？
毎日毎日、仕込んで、煮込んで、かき混ぜて…

言わずもがな、答えはNoですね。

使われてる素材も違えば、取り巻く環境も変化している。例えば、同じ人参を使っているとしても、品種改良やらなんやらで、100年前の人参とは別物のはずです。

では、システムはどうでしょうか？

古き良き言語で書かれ、先代達の血肉の上に成り立つ、神々しいまでのシステム。
時代は令和となり、早5年経ちました。

さてさて、そんなシステムは、日々の仕込みがないので、塩漬けされたままでした。（おしまい）

おっと、進歩してないじゃないか？とツッコミをくださった方、鋭いですね。
どうやら進歩しないシステムもあるようです。

## "job":"Engineer" か

少し話題を変えて、ここで、あなたに問います。

問「あなたは、エンジニアでしょうか？」


ありがとうございます。

大丈夫です。
エンジニアを名乗るのに、免許も、資格も、経験も不要です。
今日から、私も、あなたも、愛すべきジョニーも、誰も皆エンジニアです。

### それ知ってるよ

会話のどこかで、あるキーワードが出てきて、
「あ、それ知ってるよ。あれでしょ、あれ。仕事でちょっと触ったわ」

あるあるあ～るですね。

さて、仕事でやったことは勉強でしょうか。
もしくは、調査したことは勉強でしょうか。
仕事のために学習したことは、勉強でしょうか。

おそらく、多くの方は、Noと答えるのではないでしょうか。
これらは、訓練にあたると思います。トレーニング。
業務中に学ぶのであれば、OJT、On the Job Training ですね。業務外であれば、Off-JT。

## じゃあ、勉強って何さ

何でしょうね。
不確かなものに対する備え、と答えておきます。

先に示した「あ、それ知ってるよ。あれでしょ、あれ。仕事でちょっと触ったわ」
が、下のようになるイメージです。
「あ、それ知ってるよ。あれでしょ、あれ。最近話題だからちょっと触ったわ」

### どうやって勉強するのさ

ここは個人的にメリハリつけています。
* 流し読みで流行りを抑える。
* 集中して取組む

流し読みは、すごい楽です。ネットサーフィンと変わりません。
* X（旧Twitter）で、すごい方をフォローする。
    * 猫と食事の投稿のスキマに流れてくる一言に注視しておく。
* ChromeのDiscoverを活用する
    * ChromeでIT関連の検索したりすると、クローム先生が「ふむ、お主はそういうのが好みなのか」と、色々とオススメを提示してくれるので、片っ端から流し読みするだけ。
* 話題の本をとりあえず流し読みする
    * なんでも良いです。Kindle Unlimitedだと無料でも沢山読めるのでありがたいです。

集中する方は、資格勉強とか。
今までの知識を総動員したり、XXXと言われたら○○○みたいに一問一答で覚えてしまったり。

### つまりは単純に

勉強を勉強と思ったら負けだと思ってます。

勉強であることは変わりないんですけど、「やるぞ！！」ってなってから着手するのは、モチベーションに左右されてしまうので、思わないようにしてます。
スマホいじるついでに、そういう記事を見る。
漫画を読むように、本を読む。

そういえば、弊社の理念に「一日一新」というのがありまして、１つでも新しい事を学ぼう。というやつなんですけど、こんなことしてれば、１つと言わず、10個20個みたいに発見は多いです。

## アウトプットが大事だと聞いた

大事だと思います。
でもその前に、インプット無くしてアウトプット無し、だと思います。

先ずはインプットから始めよ、的なです。

アウトプットするにしても、他の記事とかの横流しのアウトプットではなくて、自身の体験や考えを混じえてアウトプットしたいものです。

## おわりに

長々と書きましたが、常日頃思っているわけでなく、チラッと思ったので書きなぐりました。
例え話も即席です。3分どころか3日くらいで書いたので、汁は蒸発してますね。




今回は以上です。ありがとうございました。
【Linuc102対策】ポートの確認で使用するコマンド

# はじめに
Linucレベル1 102試験対策用です。
ポートを確認するのに使用するコマンドが複数あり、覚えるのが大変だったのでまとめてみました。

# ポートとは
コンピュータが通信に使用するプログラムを識別するために使う番号。代表的なポート番号は以下。

|  ポート番号  |  サービス/プロトコル  |
| ---- | ---- |
|  22  |  SSH  |
|  23 |  Telnet  |
|  25 |  SMTP  |
|  53 |  DNS  |
|  80 |  HTTP  |
|  123 |  NTP  |
|  443 |  HTTPS  |

# ポートを確認するコマンド
### ss
ネットワークのソケットの情報を表示する。
最近のディストリビューションではnetstatコマンドに代わってssコマンドの使用が推奨されている。

|  オプション |  説明  |
| ---- | ---- |
|  -a |  全てのソケット情報を表示  |
|  -n |  アドレスやポートを数値で表示  |
|  -l |  待受けている(リッスン)ポートを表示  |
|  -p |  PIDとプロセス名も表示  |


### netstat
有効なネットワーク接続や開いているソケットの情報を表示する。
オプションの一部はssコマンドと同じ。

|  オプション |  説明  |
| ---- | ---- |
|  -a |  全てのソケット情報を表示  |
|  -n |  アドレスやポートを数値で表示  |
|  -l |  待受けている(リッスン)ポートを表示  |
|  -p |  PIDとプロセス名も表示  |
|  -i |  ネットワークインターフェースの状態を表示  
|  -r |  ルーティーングテーブルも表示  |


### lsof
プロセスが開いているファイルを表示したり開いているポートを確認する。
こちらはローカルホストを対象にポートを確認することができる。

|  オプション |  説明  |
| ---- | ---- |
|  -i |  開いているポートの情報を表示  |
|  -i:ポート番号 |  指定したポート番号が使われている通信を表示  |

### nmap
リモートホストで開いているポートを確認する。
ちなみに攻撃者がネットワーク経由で開いているポートを確認する行為をポートスキャンという。


# おわりに
オプションも種類があるので、全てを暗記するのはだいぶ難しい。
説明と紐づけて理解できるように、実践で使おうと思います。

# 参考
Linucレベル1 小豆本
https://www.linuxmaster.jp/linux_skill/2009/02/linux-4.html#chapter-7
HHKB Studioに変えたらKarabiner使ってる人はデバイスの登録が必要

Karabiner使ってる人は新しいデバイス登録が必要。


![ss 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/b110541a-daf8-64c9-c28e-c72dc97ea5cc.png)


HHKB Studioに替えて、あれ！
日本語切り替えできない！って、焦ったのでメモ。
Debian 12をKVMで動かしてみた

# はじめに
Ubuntu Server 20.04.6 LTSのKVMで、Debian 12を動かしたときのメモです。

# 参考にしたサイト
- https://github.com/EXPRESSCLUSTER/KVM/blob/master/doc/HowToInstallLinuxWithCUI.md
  - 過去に自分が書いたページです。手前味噌ですいませんw

# 環境
## ホストOS
- Ubuntu Server 20.04.6 LTS

## ゲストOS
- Debian 12

# 実行したコマンド
```
virt-install \
--name debian12-11 \
--hvm \
--virt-type kvm \
--ram 16384 \
--vcpus 16 \
--arch x86_64 \
--os-type linux \
--disk /home/user/kvm/debian12-11/debian12-11.qcow2 \
--network bridge=virbr0 \
--graphics none \
--serial pty \
--console pty \
--location /home/user/linux/cd/debian-12.2.0-amd64-DVD-1.iso \
--extra-args "console=ttyS0"
```
- GUIを入れていない環境なので、```--graphics none```を指定しています。

# さいごに
過去に自分が書いたメモを頼りにDeban 12を動かしてみました。いや～メモって大事ですね。
Ubuntu Server 22.04.3 LTSをKVMで動かしてみた

# はじめに
Ubuntu Server 20.04.6 LTSのKVMで、Ubuntu Server 22.04.3 LTSを動かしたときのメモです。

# 参考にしたサイト
- https://askubuntu.com/questions/1116383/couldnt-find-hvm-kernel-for-ubuntu-tree
  - ```Couldn't find hvm kernel for Ubuntu tree.```というキーワードで検索していたら見つかりました。

# 環境
## ホストOS
- Ubuntu Server 20.04.6 LTS

## ゲストOS
- Ubuntu Server 22.04.3 LTS

# 実行したコマンド
```
virt-install \
--name ubuntu22-41 \
--hvm \
--virt-type kvm \
--ram 16384 \
--vcpus 16 \
--arch x86_64 \
--os-type linux \
--disk /home/user/kvm/ubuntu22-41/ubuntu22-41.qcow2 \
--network bridge=virbr0 \
--graphics none \
--serial pty \
--console pty \
--location /home/user/linux/cd/ubuntu-22.04.3-live-server-amd64.iso,kernel=casper/vmlinuz,initrd=casper/initrd \
--extra-args "console=ttyS0"
```
- GUIを入れていない環境なので、```--graphics none```を指定しています。

# さいごに
```Couldn't find hvm kernel for Ubuntu tree.```というエラーが出ていたのですが、```--location```の末尾に```kernel=casper/vmlinuz,initrd=casper/initrd```を指定することで起動できました。

# 余談
実は、過去にCentOS 7.9をホストOSとしてUbuntu Server 22.04を動かそうとして失敗していました。その時は代替手段として、Cloud Image使っていました。

- https://github.com/EXPRESSCLUSTER/KVM/tree/master#linux
  - この時も、```kernel=casper/vmlinuz,initrd=casper/initrd```を試してたはずなんだけどなぁ…

もしくは、20.04のLegacyイメージでインストールして、22.04にアップグレードしていました。

「新しい酒は新しい革袋に盛れ」じゃないけど、ゲストOSとしてUbuntuを動かしたければ、ホストOSもUbuntuにしとけってことですかね…？
Aiven、カフカワイズ（現クロー）を歓迎

<font color="Grey">*[Aiven welcomes Kafkawize, now Klaw](https://aiven.io/blog/aiven-welcomes-kafkawize-now-klaw)の翻訳です。*</font>

2022年9月29日

# Aiven、カフカワイズ（現クロー）を迎える

AivenはApache Kafka®データガバナンスでオープンソースコミットメントの次の段階に入りました。Kafkawize についてOskari Saarenmaaのコメントをお読みください。

オープンソースはAivenの中核です。だからこそ、[今日はKafkawize（現在はKlaw）を正式にオープンソースプログラムオフィスに迎える特別な日なのです](https://kafkawize.io/2022/09/29/kafkawize-is-now-klaw-joins-aiven/)。これは、私たちの最初の買収としてだけでなく、私たちのオープンソースコミットメントに「コミュニティのスチュワード」が加わった瞬間として、重要なマイルストーンとなります。[Klaw](https://klaw-project.io/)を歓迎することに加え、Klawの開発を引き続き指揮するため、ムラリダール・バサニを当社のエンジニアリング・チームに迎えることも嬉しく思います。


##Klawについて


[Klaw](https://aiven.io/blog/introducing-klaw-for-apache-kafka-governance)は、Apache Kafka®のためのオープンソースのデータガバナンスツールで、Apache Kafkaのトピック、ACL、スキーマを管理するためのウェブベースのデータガバナンスツールを提供する。Muraliは、開発者にとってApache Kafkaデータガバナンスをより簡単にするというシンプルな目標を掲げ、2018年にこのオープンソースプロジェクトの構築を開始した。


Klawは、Apache Kafkaサービスユーザーのチームが、管理者の介入なしにApache Kafkaの設定変更をリクエストできる簡単なユーザーインターフェースを提供する。適切なデータガバナンスがあれば、ユーザーは次のことができます：


* より良い意思決定**を行うことができます：適切なガバナンスを導入することで、信頼できるメタデータに基づき、一貫性のある確信に満ちたビジネス上の意思決定を行うことができます。
* コンプライアンスと監査を強化する：ますます複雑化する規制環境の中で、企業は強固なデータガバナンスを確立することがこれまで以上に重要になっています。Apache Kafka環境は、システムや組織を通じて重要なデータを移動させます。Klawによる適切なユーザー管理とポリシーを使用することで、新たな規制を予測しながらコンプライアンス違反のリスクを回避することができます。
**効率の最適化**：Klawは、すべてのApache Kafkaトピックを管理するグラフィカルなUIを提供し、事前に定義されたユーザー権限に従ってアクセスを許可します。開発者は、チームやオーナー間の設定ファイルの管理や同期に何時間も費やす必要がなくなります。


Murali氏は、このツールを誰でも利用できるようにするため、プロジェクトをオープンソース化した。Aivenはこのコミットメントを堅持し、Klawという名前でコミュニティが利用できるようにコードを維持します。Aivenは今後、Klawで協力してくれる貢献者を積極的に探していきます。


## Aiven + Klaw


今日、私たちはApache Kafkaを中心としたデータガバナンスに対する大きな需要を目の当たりにしています。Apache Kafkaは比較的単純なストリーミング・エンジンとして始まりましたが、すぐに勢いを増し、今日ではApache Kafkaは最新のデータ・パイプラインの中心となっています。


適切なガバナンスの欠如は、不適切に管理された場合にデータをリスクにさらす可能性がある。いくつかのソリューションは市場で入手可能だが、残念ながらそのほとんどはオープンソースではない。これは開発者によるアクセスや採用を妨げている。


KlawをAivenに参加させることで、オープンソースプロジェクトとして維持しつつ、長期的な成功に貢献します。プロプライエタリな代替製品とは異なり、KlawはApache Kafkaユーザーに必要なオープンソースツールを提供することも可能です。Klawはオープンソースの技術であるため、私たちはオープンな場でKlawを取り巻くコミュニティを成長させる機会があり、これは私たちの価値観に合致するだけでなく、ビジネス上のメリットもあります。


シリーズCの資金調達発表の一環として、Aivenはオープンソースの推進と向上を公約しました。今日、このニュースを発表し、オープンソースの貢献者からオープンソースコミュニティのスチュワードへと進化することで、約束を果たし続けることができ、とても嬉しく思っています。
デザインパターン　Template Methodパターン

# Template Methodパターン
アルゴリズムの骨組みを定義し、一部のステップをサブクラスに**委譲**する仕組みを提供するデザインパターン。

このパターンは、同じ大枠のアルゴリズムは共有するが、いくつかのステップが具体的なサブクラスで異なる場合に特に有用。

**アルゴリズムの構造**を定義し、具体的なステップの実装をサブクラスに任せる。

オブジェクトライフサイクル管理や、データの処理アルゴリズム、ウィンドウの表示、ドキュメントの保存、データベースへの接続などに利用される。

## Template Methodパターンが利用できるシチュエーション
Step 1、Step 2 という処理から構成される2種類の手順アルゴリズム Process 1、Process 2 があるものとする。

Step1 は共通の処理。

Step 2 はそれぞれ別々の処理を行わせたい。

さらに、Process 2 では Step 2 の実行後に別の処理も実行させたい。

![TemplateMethod.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1069520/53be3b62-bff8-4cf3-ca06-b8581a11e8d7.png)

## 必要な抽象クラス
Step 1 は共通の処理であるため、コードの重複をさせないように抽象クラスで定義する。

さらに、抽象クラスには**フック**と呼ばれるメソッド`hook()`を用意する。

フックは、**何もしない空の関数**もしくは**デフォルト処理を行う関数**であるが、必要な時だけサブクラスにオーバーライドさせ、特定の処理を実行させることができる。（必要でない時は、オーバーライドしなくて良い）

それぞれ独自の処理については、サブクラスに**委譲**する。

```java:Process.java
public abstract class Process {

    // アルゴリズムの骨組みが定義された Template Method
    public void execute() {
        commonStep1();
        originalStep2();
        hook();
    }

    // 共通の処理
    // final でオーバーライドさせないようにもできる
    final void commonStep1() {
        System.out.println("共通の処理 Step1 を実行します。");
    }

    // サブクラスに委譲
    abstract void originalStep2();

    // フック
    void hook() {}
}
```

## 抽象クラスの継承
```java:Process1.java
// Process 1
public class Process1 extends Process
{
    // 独自の処理
    @Override
    void originalStep2() {
        System.out.println("Process 1 の独自処理です。");
    }

    // hook() はオーバーライドしない
}

```

```java:Process2.java
// Process 2
public class Process2 extends Process {

    // 独自の処理
    @Override
    void originalStep2() {
        System.out.println("Process 2 の独自処理です。");
    }

    // hook() に処理を加える
    @Override
    void hook(){
        System.out.println("Process 2 では、ここで何らかの処理を行います。");
    }
}
```

## Template Methodパターンの利用
```java:Main.java
public class Main {
    public static void main(String[] args){
        // Process 1
        Process process1 = new Process1();
        process1.execute();
        // >> 共通の処理 Step1 を実行します。
        // >> Process 1 の独自処理です。

        // Process 2
        Process process2 = new Process2();
        process2.execute();
        // >> 共通の処理 Step1 を実行します。
        // >> Process 2 の独自処理です。
        // >> Process 2 では、ここで何らかの処理を行います。
    }
}
```

# 参考
・<a href="https://amzn.asia/d/8MCJXIB" target="_blank" rel="noopener noreferrer">Head Firstデザインパターン ―頭とからだで覚えるデザインパターンの基本</a>
Web API入門/HTTP入門/curl入門の参考文献

# Abstract
APIを使うことを想定して、リクエスト、POST、HTTP通信について理解するための参考文献を紹介する
# 参考文献
- まずはcurlについて、上から順に勉強するといい
    - [curlその1](https://qiita.com/ryuichi1208/items/e4e1b27ff7d54a66dcd9)
    - [curlその2](https://itc.tokyo/linux/curl/)
    - [curlその3](https://hogetech.info/network/command/curl)
- [Web API入門(@s79ns)](https://qiita.com/s79ns/items/8dd2f06145cbf9464b99)
    - Web APIの理論をコンパクトにまとめたシリーズ.実践的ではない
- [参考文献](https://www.codegrid.net/articles/2018-web-api-1/)
    - axiosを使ってgithub APIとhttp通信する実践記事. 前置きが専門的過ぎてとっつきづらいが、axiosの使い方を知りたいならばよい
- [参考文献](https://zenn.dev/hinoshin/articles/5b6f8a4dfc82ba)
    - Web APIの全体像を1ページでコンパクトに説明している
SSH

<!--
2023/10/27
-->

[picoCTF][General Skills][chrono]

## Writeup
* 問題に従い、sshで接続。
```ssh picoplayer@saturn.picoctf.net -p port_number```
<br>

* ```/etc/crontab```を確認。
![screenshot 17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/73841ec1-50bb-8305-f342-f52374297100.png)
<br>

* 以上です。
たかが0.05Hz、されど0.05Hz :: ディスプレイのチラつき改善 ::

# PCの買い替え
最近、デスクトップPCを買い換えました。前のデスクトップPCのCPUがHaswell Refreshだったので、約10年ぶりの買い替えです。グラフィックボードも少し奮発して、NVIDIAのGeforceの**RTX4060**にしました。そんなにゲームをする訳ではないのですが、GPUによるプログラムにも興味あったためです。(~~たぶん、やらない~~)

先日、届き、ウキウキで接続を完了させ、いざ電源を入れてみると... **ディスプレイにちらつきが...**

そのチラつきも、分かりやすくちらつくのではなく、10秒～20秒に1回起こるようなもので、最初は我慢することも考えました。が、こういうのが一番PC作業していてストレス溜まるんですよね。

ということで、夜11:00くらいから調査開始。

# ディスプレイの接続履歴
使っているディスプレイは、5~6年前位に購入したBenQのWQHDのディスプレイ。下記のような機器と接続されてきており、それらでは一度もチラつきはありませんでした。

- 旧デスクトップPC(AMD GPU) / DisplayPort
- Intel Mac / HDMI
- M1 Mac / HDMI
- Switch / DVI(HDMIを変換して接続)

上記のうち、M1 MacとSwitchは今でも現役で問題なく動いていて、ディスプレイに問題があるとは思えません。

# ディスプレイの仕様
いろいろ調べた結果、このディスプレイのリフレッシュレート、**59.95Hz**であることが分かりました。どうもこの微妙なリフレッシュレートが影響しているようです。

# NVIDIAコントロールパネルの設定
初期設定で60Hzになっており、**0.05Hzの差**があります。
![スクリーンショット 2023-10-28 000712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490777/5d91acf4-c550-3c50-8cc1-2cb1bc75c491.png)

# チラつきの要因推定
どうもちらつき原因は、ディスプレイの最高リフレッシュレートが59.95Hzなのにも関わらず、60Hzで動かしているため、ディスプレイに無理が生じて、チラつきが発生している、と推定しました。

# 解決方法
## リフレッシュレートを落とす
1.上記の場面で「カスタマイズ」を選択します。
2.「カスタム解像度の作成」を選択します。
![スクリーンショット 2023-10-28 001410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490777/51292fb6-ff89-6a61-5e5c-d07c34cf0777.png)
3.リフレッシュレートの項目を「59」に変更して「テスト」を選択します。
(残念ながら、リフレッシュレートを小数点に設定することはできませんでした。)
![スクリーンショット 2023-10-28 001627.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490777/1adb9e03-8e26-5627-c960-8cf5137a500a.png)
4.解像度で先ほど設定したカスタムの設定を選択します。
![スクリーンショット 2023-10-28 001952.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490777/2ad388bd-a3e4-a5b9-b602-e9b7ab6f8001.png)

これでチラつきは、完全に治りました。

# GPUをつかいこなすには...
これで快適なデスクトップWindowsライフ生活が送れるようになりましたが、どうにも府に落ちません。上述した通り、AMD、Intel、Apple M1、Switch(これはNVIDIAチップですが)では、こんな面倒くさいことしなくてもディスプレイのリフレッシュレートにグラフィックボードが追従してくれていたと思われるためです。

まあ、上位のグラフィックボードの性能を引き出したいなら、それ相応のディスプレイを用意しろってことですかね。高速リフレッシュレートディスプレイ興味はあるんですよね...
從台灣國際學校到出國留學

在現今全球化的時代，越來越多的台灣學生夢想踏上國際留學之路。對許多年輕人來說，這是一個追求更高教育水平和多元文化體驗的機會。本文將討論從台灣國際學校出發，到最終[出國留學](https://www.apexcharity.org/news/3/83)的過程，包括SAT考試、美國簽證，以及國際學校在這個過程中的重要角色。

許多台灣的學生夢想著進入世界知名的大學，而SAT考試（Scholastic Assessment Test）是通向這個目標的第一步。SAT是一項美國大學入學考試，評估學生的閱讀、寫作和數學能力。台灣的[國際學校](https://www.apexcharity.org/news/3/82)通常提供相關的SAT準備課程，協助學生熟悉考試形式並提高他們的成績。這些學校的資源和支持對學生們取得優異的SAT成績至關重要，因為這不僅是美國大學錄取的重要標準，也是獲得獎學金的關鍵之一。

在成功通過[SAT](https://www.apexcharity.org/news/3/84)考試後，學生需要處理簽證和申請程序，以實現他們的出國留學夢想。美國是許多台灣學生的首選目的地之一，但申請美國簽證並不總是一帆風順的事情。國際學校通常提供指導和支持，協助學生準備所需的文件，並準備面試。這種專業指導可以大大減輕學生和家長的壓力，確保他們順利獲得簽證，並能夠順利出國留學。

當學生成功獲得簽證後，他們就準備好啟程到國外深造了。國際學校在這個過程中發揮了至關重要的作用，因為它們不僅為學生提供了學術知識，還教授了跨文化技能和生活技能。這些學校的國際環境讓學生能夠更好地適應新的文化和環境，並在學業上取得成功。

總之，從台灣國際學校到出國留學是一個充滿挑戰但也充滿機會的旅程。SAT考試、[美國簽證](https://www.apexcharity.org/news/3/94)和國際學校都是實現這一目標的重要組成部分。這個過程雖然可能困難，但通過堅持不懈的努力和適當的支持，台灣的學生們可以實現他們的國際留學夢想，追求更高的教育和更廣闊的世界視野。
codeDeployで処理がほとんど進まず"The overall deployment failed because too many individual instances failed deployment ~~"が表示される際の対処法

## 目次
1. 概要
1. EBSとは
1. EBS拡張方法

## 概要
以前、codeDeployを通してEC2にデプロイ作業を行った際、処理がほとんど進まずに失敗してしまいました。
その時の画面は以下のようになっています。

![スクリーンショット 2022-11-01 12.49.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/756995/3834f049-a4b2-b4c0-15ed-b5a44e592573.png)

こんなエラーが表示されていました。
> The overall deployment failed because too many individual instances failed deployment, too few healthy instances are available for deployment, or some instances in your deployment group are experiencing problems.

↓翻訳
> デプロイに失敗した個々のインスタンスが大きすぎる、デプロイに使用できる正常なインスタンスが少なすぎる、またはデプロイグループ内の一部のインスタンスで問題が発生しているため、デプロイ全体が失敗しました。

結論、EBSボリュームの容量がいっぱいになっていて、このようなエラーが表示されてしまっておりました。
以下ではAmazon EBSの説明とEBSボリュームの拡張の方法について記述していきます。

## EBSとは
EBSは主にAmazon EC2のストレージとしての用途であり、「アタッチ」と呼ばれる、EC2上の仮想マシンにEBSボリュームを割り当てる設定を行うことで、仮想マシンのストレージ管理を柔軟に行うことができます。

自分はこれを初めて見て「Amazon S3」とは何が違うの？と疑問に感じましたが、そんな方は以下のサイトを見ていただけると違いがわかりやすいかと思います。


https://bcblog.sios.jp/what-is-amazon-ebs/

## EBS拡張方法
以下サイトの手順に従って操作したところCodeDeployが復活しました。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html
PhotoShopについて

2023/10/27 PhotoShopについて

1.基本操作

- メニューバー / オプションバー / ツールパネル
- 画面右 : パネル - ドッグ … パネルを畳んだ状態 
- ワークスペース … メイン画面

- 拡大縮小(Z) … 拡大を選択中に「option」で縮小
	・キーボード「Command + “+-“」でも可能
	・スクラブズーム … ドラッグした方向に拡大、逆方向で縮小
	・ダブルクリック(Command + 1)100%表示

- 手のひらツール(H) … 「Space」でも可能
	・ダブルクリック(Command + 0) … ワークスペースで最大表示

- ブラシツール(B) … 直径、硬さを調整可能

- ヒストリーパネル … 環境設定>パフォーマンス>ヒストリー数で設定
	・「Command + Z」１つ前に戻る「Command + Shift + Z」1つ進む

- 復帰 … ファイルを開いた状態に戻す

- [描画色] / [背景色] … 下地(Xキーで切り替え)

<選択ツール>
- 選択ツール … 範囲指定 - 範囲内の描画が可能 / Shift + 矢印
- 選択解除(Command + D)
- クイック選択ツール(W)
… 「許容値」色の選択範囲「アンチエイリアス」滑らかさ「隣接」
… 「Shift + クリック」選択範囲の追加　「Option + クリック」選択範囲の削除
<クイックマスク>
- 投げなわツール … フリーハンドで選択範囲を作成
- クイックマスク … ブラシでなぞって選択範囲を作成
- ブラシサイズ変更「 」
- 選択範囲を保存 - チャンネル / 「Command + クリック」
<選択とマスク>
- 境界線選択ツール … 自動で背景と対象物を調整
<ペンツール>
- 「option」…折り返し
- 選択後 - パス選択ツールで微調整 - パスパネルに保存
<被写体を選択>
- 選択範囲>選択範囲を選択

2.画像の補正

<カラーバランスの調整>
- イメージ>色調補正>カラーバランス
<自然な彩度>
- チャンネル>選択範囲指定 - イメージ>色調補正>自然な彩度
<レベル補正>
- イメージ>色調補正>レベル補正
… ヒストグラム - 明るさの量のグラフ
<トーンカーブ>
- イメージ>色調補正>トーンカーブ
… スポイトで起点を設定
… S字のカーブがコントラストの基本
<アンシャープマスク> … 自然に画像を引き締める
- フィルター>シャープ>アンシャープマスク
<覆い焼きツール・焼き込みツール>
 … 領域を明るく・暗くする
<モノクロ画像に編集>
- イメージ>色調補正>白黒

<ものさしツールで傾きを調整・切り抜き>
- イメージ>画像の回転>角度の入力

<レイヤー・レイヤーパネルについて>
- 「自動選択 : レイヤー」に設定すると自動でレイヤーの切り替え
- 背景レイヤー / 通常レイヤー
<別ファイルのデータ複製・画像変形>
- 自由変形(Command + T) - 「Shift + ドラッグ」縦横比率ばらす

<コピースタンプ>
- 「option」サンプリング
<画像修復>

<新規調整レイヤー>
- レイヤー>新規調整レイヤー or ツールパネルアイコン

<画像サイズ調整>
- イメージ>画像解像度
- … 解像度 : WEB 72px / 印刷物 300~350px
- イメージ>モード : WEB RGB / 印刷物 CMYK

<コンテンツに応じた塗りつぶし・移動>
- 編集>塗りつぶし>コンテンツに応じる … 自動で背景と馴染ませてくれる
- 修復グループ>コンテンツに応じた移動ツール

3.画像の加工

<アルファチャンネル>
- 範囲選択後 - 選択範囲をチャンネルとして保存(アルファチャンネル作成)
<レイヤーのオブジェクトで選択範囲を作成>
「Command + レイヤーのサムネイルをクリック」

<Vanishing Point> … 面を作成し、合成画像を馴染ませる
- フィルター>Vanishing Point

<描画モード(ブレンドモード)> … レイヤーの重なり方の設定
- ブレンド + 不透明度 + フィルター(ぼかし)

<レイヤーの結合>
- 「optin」キーを押しながら「レイヤー結合」で新規レイヤーとして作成

<フィルター>
- 「スマートフィルター用に変換」

<新規ドキュメントを作成>
- 「アートボード」…サイズを変更できる、WEB制作などで有用

<シェイプ作成>
- 「Command」押している間は移動ツールに変わる
- レイヤーのサムネイルクリックで色の変更

<グループレイヤー>
- 「複製」…. グループレイヤーを「レイヤー新規作成」にドラッグで

<ラスタライズ> … シェイプで描画されているものを、ピクセルデータに変換
- レイヤー>ラスタライズ

<レイヤースタイルの加工>
- レイヤー>レイヤースタイル
- 「Command + J」 レイヤーの複製

<レイヤーマスク>
- レイヤー>レイヤーマスク
- 「optin + クリック」マスクの確認

<クリッピングマスク>
- レイヤー>クリッピングマスクを作成
- 「Command + Option + G」クリッピングマスク作成

<Illustratorからの読み込み>
- 「ベクトルスマートオブジェクト」 … Illustratorデータを反映
- 「ピクセル」… ピクセルでのペースト
- 「パス」… パスデータのペースト
- 「シェイプレイヤー」…シェイプ(パス+塗り)のペースト

4.文字の入力
<定規を使用>
- 環境設定>単位 - 定規
- 表示>定規(Command + R)

<ガイド・グリッドの設定>
- 表示>ガイドをロックを外す
- 新規ガイド … 数値で設定可能
- 表示>表示・非表示(Command + : )
- グリッド(Command + @ )

<横書き文字の入力>
- 「option + 矢印」行間を20ずつ操作
- カーニング … 文字と文字の間

<テキストボックスに文字を入力>
- レイヤー>レイヤースタイル

<テキストレイヤーをラスタライズ>
- 書式>テキストレイヤーをラスタライズ
- レイヤー>ラスタライズ
気軽に楽しむ２．５次元のWeb地図「ちずえもん」を作成してみた。

【ちずえもん】
https://office-shirado.com/chizuemon/
※無料

法務省地図を載せたＷｅｂ地図である「今ここ何番地？」の一部の機能を利用して、気軽に楽しむ２．５次元のＷｅｂ地図を作成しました。

ベースは、MapLibre GL JSを用いています。
データは、国土地理院（空中写真・標高タイル・住所検索ＡＰＩ）、法務省（公図）、国土交通省（建物：ＰＬＡＴＥＡＵ）のオープンデータ・公開データを使用しております。

単に楽しむ地図ではありますが、公図・建物は「ＰＭＴｉｌｅｓ」を使用するなど、今ここ何番地？で培ったスキル・データを活用しています。
※建物（ＰＬＡＴＥＡＵ）はshi-worksさんのデータを参照させてもらっております。


サイトを作成してみて、「行政のオープンデータでここまでできるんだ」というのが正直な感想で、早くて軽い２．５次元地図が手軽に作成できることに驚きました。

技術的なポイントとしては、建物はＬＯＤ１のデータで、平面ポリゴンを高さ情報で伸ばしているだけなので、データが軽いのが特徴です。

そして、傾き（Pitch）は85°まで傾けることができますが、あまり傾けすぎると広範囲のデータをロードするためロード時間や描画時間がかかり、場合によっては動きがカクカクすることがあります。色々試した結果、傾き（Pitch）は70°が私のサイトでは最適かな？と思い、最大傾斜を70°としています。

また、最初のところでは、日本全国の写真から、デバイスの位置情報の所にジャンプ（Flyto）しますが、その時は傾けずに垂直に降下し、数秒後に傾けることで、データのロード時間・描画時間を調整しています。


真ん中には、ドローン画像を入れるなど、遊び心をたくさん入れております。

２次元（２Ｄ：平面）と３次元（３Ｄ：立体）の中間である２．５次元地図で何とも中途半端なところではありますが、
　・２Ｄではできない表現
　・３Ｄよりも軽快な動き
が現時点ではかなりの活用性があるのではないかと思っております。


宜しければ、一度ご覧ください。

【ちずえもん】
https://office-shirado.com/chizuemon/

【Youtube】
https://www.youtube.com/watch?v=RalC8DOZ-8k&t=8s

【今ここ何番地？】
https://office-shirado.com/imakoko/
PowerAutomateでHTMLリンクを張る方法

特殊文字に勝手に変換されるため、文字列を変換して対策。

Create HTML table

このような数式を作るが、このままだとエスケープされる。
`concat('<a href="', item()?['{Link}'], '">Link to item</a>')`
そのためreplaceする
`replace(replace(replace(body('Create_HTML_table'),'&lt;','<'),'&gt;','>'),'&quot;','"')`
`concat('<a href="', item()?['{Link}'], '">', item()?['{FileNameWithExtension}'], '</a>')`

参考：
https://tomriha.com/how-to-add-hyperlink-in-the-create-html-table-power-automate-action/
定時帰る術-Linux sudo管理（sudo、visudoコマンド）

rootでSSHする環境もあるし、非rootでSSHする環境もがある。

非rootユーザーでrootコマンドを実行したい時や、root権限しか見れないファイル（すべてがファイルである）をみる時、尚且つrootパスワードがモレたくない時は、sudoで対応できる。

ユーザー、グループでコマンドの許可/拒否できるのが便利
（更に、ホスト名での制限もできるが、あんまりやらない）

### visudo
**visudoだけかもしれないが、visudoすると、他のセッションやユーザでのvisudoが排他になる**

セッション1でvisudoを実行すると、普通にvi /etc/sudoersと同じ感じでviできる状態になる。
↑visudoのままで、visudoを実行すると、↓が表示され、開けない]
```
[root@mgmt ~]# visudo
visudo: /etc/sudoers がビジー状態です。後で再試行してください
```
が、が、が
 visudoではなく、vi /etc/sudoersでやると普通にいける。
 :wqすると↓エラーがでるが、 :wq!をやれば保存できる。
 visudoは、/etc/sudoersしてくれるし、排他だし、すすめ
 /etc/sudoersを編集する時にvisudoを使うようにしよう
 

### 設定考え方
**許可するユーザ、グループ、コマンドを許可すればいい（ホワイトリスト）**
難しいことを考えなくてもいい
例えば、逆の考えで、ブラックリストの考え方だと、
↓の設定でsnowユーザ以外は、sudoで全コマンドが許可されることとなる。
何が問題だというと、想定外のユーザが許可されてしまう可能がある
（**川口的にはセキュリティ的にはアウトな設定だと思う**
```
!snow ALL=(ALL)       ALL
```
### /etc/sudoers
上から下までマッチする。同じコード（設定）がある場合、下の方が有効になる。
/etc/sudoersの最後行に#includedir /etc/sudoers.dが記載されている
```
[root@mgmt ~]# tail -n 1 /etc/sudoers
#includedir /etc/sudoers.d
[root@mgmt ~]# ll /etc/sudoers.d
合計 0
```
**ここでの「#」はコメントアウトの意味ではない**
**ここでの「#」はコメントアウトの意味ではない**
なので、sudo設定が/etc/sudoers.d配下にもみるよ
**定時帰られない方は多分grep -v #とかで、コメントアウト行を表示させないようにしたことがあるだろう**
**はっきりいいと、確認モレだよ**
**「#=コメントアウト」の場合もあるよ**
**/etc/sudoers.d配下もみようよ**

（グラウト環境では、デフォルトで/etc/sudoersファイルではなく、/etc/sudoers.d配下sudo設定することが多い）
↓がgoogleクラウドの場合
**/etc/sudoersにはユーザID、（visudo的にはチェックが大丈夫だが）グループIDが書いても無駄のため、ユーザ名とグループ名でgrep /etc/sudoersした方がいい**
%がついているので、google-sudoersグループに対して、sudoですべてのコマンドをパスワードなしで実行可能
```
[snow@instance-1 ~]$ id
uid=1000(snow) gid=1001(snow) groups=1001(snow),4(adm),39(video),1000(google-sudoers)
[snow@instance-1 ~]$ sudo egrep "snow|adm|video|google-sudoers" /etc/sudoers
[snow@instance-1 ~]$
[snow@instance-1 ~]$ sudo ls /etc/sudoers.d/
google_sudoers
[snow@instance-1 ~]$ sudo egrep "snow|adm|video|google-sudoers" /etc/sudoers.d/google_sudoers
%google-sudoers ALL=(ALL:ALL) NOPASSWD:ALL
```

### 注意
sudo xxxで実行するとパスワードが聞かれたら、Ctrl＋Cでやめましょう。パスワードを入力してしまうと、ログに出てしまうことがある。
なので、Ctrl＋Cでやめで、とりあえず/etc/sudoersの設定を見てみよう

考えられる原因：
①/etc/sudoersファイルの設定間違い
②/etc/sudoersの設定でセキュリティ的にダメ。
BurpSuite

<!--
2023/10/26
-->

[picoCTF][Web Exploitation][findme]

## Writeup
* 問題のとおり、usernameとpasswordを入力する。
![screenshot 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/40739a4b-16dc-e647-ba5d-9733a7e86920.png)
<br>

* 画面が遷移した。
![screenshot 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/79680de3-268e-ef7a-03ec-ca74bdb44f76.png)
<br>

* BurpSuiteを起動。
Kaliで簡単にプロキシ設定するため、プラグインを利用。
[Add]からプロキシ設定を、ポート番号[8080]で追加。
![screenshot 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/e96f8f47-aa21-0f85-cda4-14ee7c18482d.png)
![screenshot 16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/daf48390-61ec-f8e0-65ae-3fae55012e3d.png)
<br>

* BurpSuiteでもポート番号を指定
```Proxy``` ```Proxy settings``` ```Edit``` ```Binding```
![screenshot 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/28737613-ef0c-c595-0c03-9704a26bcdef.png)
<br>

* Webアクセスを最初からやり直したところ、怪しいパケットがありました。
Titleが「flag」となっているパケットが２つあり、一方のURLのidに怪しい「==」がありました。
![screenshot 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/67ad4cca-45b7-ad8d-60f5-5bd9eea589e8.png)
<br>

* CyberChefを使って、繋げた文字列をbase64でデコードしました。
![screenshot 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/e93a2562-f40e-eeee-0c5d-cccfaa78c2c6.png)
<br>

* 以上です。
----
#### 備考
* BurpSuiteのポート番号は、CyberChefを異なる番号を使用した方が良かった。

## 参考サイト
https://addons.mozilla.org/ja/firefox/addon/foxyproxy-standard/
【Next.js】エラー画面を表示する方法

## ページを作成する

`page.tsx`を以下のように作成します。

```tsx:page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/...')
 
  if (!res.ok) {
    throw new Error('エラーが発生しました。')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}
```

## エラー画面を作成する

`pages.tsx`と同じ階層に`error.tsx`を作成します。

```tsx:error.tsx
'use client'
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>{error.message}</h2>
      <button onClick={() => reset()}>
        Try again
      </button>
    </div>
  )
}
```

上記のように記述すると`page.tsx`の`throw new Error('エラーが発生しました。')`が実行された際に`エラーが発生しました。`というメッセージと再実行するためのボタンが表示されます。


:::note warn
`error.tsx`の`error.message`は本番環境では`An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.`というメッセージになります。
:::

:::note warn
`error.tsx`と同じ階層に`not-found.tsx`が存在しない場合に`page.tsx`で`notFound()`を実行すると`not-found.tsx`が表示されるのではなく、`error.tsx`の`error.message`に`NEXT_NOT_FOUND`が渡されて表示されます。
:::
動画を⚪️秒間隔で静止画として切り取る方法

プログラムはNode.jsで作成する。

◾️前準備
-------------
npm init
npm install fluent-ffmpeg
-------------

◾️index.js
-------------
const ffmpeg = require("fluent-ffmpeg");

// 入力MP4ファイルのパスと出力ディレクトリのパスを指定
const inputFilePath = "input.mp4";
const outputDirectory = "output/";


// 切り出す間隔（秒）
const interval = 0.5;


// 出力ディレクトリが存在しない場合、作成する
const fs = require("fs");
if (!fs.existsSync(outputDirectory)) {
  fs.mkdirSync(outputDirectory);
}


// MP4ファイルを処理し、1秒ごとに画像を切り出す
ffmpeg(inputFilePath)
  .on("filenames", (filenames) => {
    console.log(`JPEG画像を生成中: ${filenames.join(", ")}`);
  })
  .on("end", () => {
    console.log("JPEG画像の生成が完了しました。");
  })
  .on("error", (err) => {
    console.error(`エラー: ${err}`);
  })
  .outputOptions([`-vf fps=1/${interval}`, "-q:v 2"])
  .output(`${outputDirectory}%04d.jpg`)
  .run();
  -------------
macOSで最新バージョンのRubyをインストールする方法

こんにちは
この記事ではM2 Macに最新バージョンのRubyをインストールする方法を説明していきます
## 環境
- M2 Mac
- macOS
- zshシェル
## インストールのステップ
1, Homebrewがインストールされているか確認する
2, rbenvをインストールする
3,Ruby公式サイトにてRubyの最新バージョンを確認する
4,rbenvにてRubyに最新バージョンをインストールする
5, macのRubyからrbenvのRubyに切り替える
## 実際にインストールする
### 1, Homebrewがインストールされているか確認する
Homebrewのバージョンを確認するコマンドを入力する
```
$  brew -v 
```
インストールされていなければ 　=> 　command not found: brew 
インストールされていれば    　=> 　Homebrew ○○○　（以下　○○○　にはバージョンが表示される)

### 2, Homebrewをインストールする
Homebrewをインストールするコマンドを入力する
```
＄ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
パスワード（Macを開く際の）を入力してEnterを押すとインストール開始

Homebrewのバージョンを確認するコマンドを入力して，インストールできているか確認する

#### -WARNINGが表示されてインストールできないときの対処法-
エラー文内の「==> Next steps:」以降に書かれている2つコマンドを順に入力する
(例を記述しますが，実際に出力されたコマンドを入力してください)
```
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"'
```
```
$ eval "$(/opt/homebrew/bin/brew shellenv)"
```
改めて先ほど記述したHomebrewをインストールするコマンドを入力する

Homebrewのバージョンを確認するコマンドを入力して，インストールできているか確認する

### 3, rbenvをインストールする ###

rbenvのバージョンを確認するコマンドを入力して，インストールできているか確認する
```
$ rbenv -v
```
インストールされていなければrbenvをインストールすコマンドを入力する


```
$ brew install rbenv
```
rbenvのバージョンを確認するコマンドを入力して再度インストールできているか確認する

### 4,Ruby公式サイトにてRubyの最新バージョンを確認する ###
### 5,rbenvにてRubyに最新バージョンをインストールする ###

rbenvからインストールできるRubyのバージョンを確認するコマンドを入力
```
$ rbenv install -l
```
公式サイトに表記された最新バージョンをリスト内で確認して，Rubyをインストールするコマンドを入力する
```
$ rbenv install ○　○　○
```
rbenvにインストールされているRubyのバージョンを確認するコマンドを入力する
```
$ rbenv versions
```
(＊がついているのが現在のバージョン)
### 5, macのRubyからrbenvのRubyに切り替える ###
下記のコマンドを順に入力する
```
$ export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
```
```
$ source ~/.zshrc
```
サイド使用中のバージョンを確認する
```
$ rbenv versions
```

## 終わりに
記事を読んで下さり，ありがとうございました
表記されていることに誤りがあった際には報告よろしくお願いします
Juliaの環境構築，インストール

### Julia
普段は使いませんが，MITのオープンコースの演習に，
Julia言語を使う課題があったので，環境作りました．
その時のメモです．

環境 Windows 11 X86_64 WSL2 Ubuntu上にインストールします．
Linuxの方も同じ方法で出来ると思います．

### 手順
公式サイトのDLページに行きます
https://julialang.org/downloads/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763301/9c160d5d-381d-7c8a-eb79-a23f46108749.png)
ダウンロードリンクを取ってきます．

```bash
wget https://julialang-s3.julialang.org/bin/linux/x64/1.9/julia-1.9.3-linux-x86_64.tar.gz
tar -zevf julia-1.9.3-linux-x86_64.tar.gz
sudo mv julia /opt/
sudo ln -s /opt/julia/julia-1.9.3/bin/julia /usr/local/bin/julia
```
wgetでファイルをダウンロードし，tarコマンドで展開．
出てきたディレクトリを/opt以下に配置します．
配置したディレクトリのbin以下のjuliaが実行ファイルなので，
/usr/local/bin/juliaにシンボリックリンクを張ります．
これでコマンドjuliaと打てば，実行できます．

```bash
julia
               _
   _       _ _(_)_     |  Documentation: https://docs.julialang.org
  (_)     | (_) (_)    |
   _ _   _| |_  __ _   |  Type "?" for help, "]?" for Pkg help.
  | | | | | | |/ _` |  |
  | | |_| | | | (_| |  |  Version 1.9.3 (2023-08-24)
 _/ |\__'_|_|_|\__'_|  |  Official https://julialang.org/ release
|__/                   |

```
juliaと打ってアスキーアートが出てきたらOKです．

バージョン名などは各自変わると思うので，その辺は合わせてください．
AlmaLinux9にRVMでRuby3.2.2を入れる


AlmaLinux9にRVMでRuby3.2.2を入れる際につまり、有力な記事が出てこず、かなり時間がかかったので備忘録です。

https://yasdtech.com/blog/1iyv927vu

移行しました！！
ChatGPT-4の対話を更に便利に！メッセージカウンター拡張機能

## 結論、作った。【ChatGPT-4 Message Counter】
githubで公開してるからぜひ使ってください。

- google web store
 
https://chromewebstore.google.com/detail/lfijkccneagembdmjojhdndppiffinke?hl=ja

![rect293.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832106/5b9f8f71-be3f-b917-cbb1-66d218096a1e.png)

- Github public branch

https://github.com/napspans/chatGPT4-message-counter-ext



## chatGPT4には現在(2023/10)3時間で50メッセージまでの制限がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832106/46eb1392-e62a-87ac-1995-f86ed51b421a.png)
使っていてGPT4初期よりはまだましであるが、それでも気にせず使っているとたまに制限に引っ掛かってしまう。
それなのにGPTに聞いてもメッセージ数を答えてくれない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832106/43daa1f4-8eee-9988-fc8f-83f3ec7612cc.png)

## 何かいい方法がないか調べてみる
いろいろ調べてみたけど「いかがでしたか」ブログばかりで的を射ないものが多く、仕方なく知恵袋をのぞいてみた。
```
voi********さん

2023/4/10 15:46

2回答

ChatGPT-4は現在、3時間あたり25メッセージの上限が設けされています。
残りのメッセージ数、今現在の利用メッセージ数を確認するにはどうした
ら良いのでしょうか？
上記の質問をChatGPT-4に投げたのですが「現状は方法がない」、
「Open AIのヘルプで問い合わせてくれ」みたいな返事が返ってきます。

利用している側とすれば、「今、どれくらいメッセージを利用したのか？」
、「あとどれくらい利用できるのか」というのは重要な事です。

Chat数を自分で見てカウントする以外に現状方法はないものなのでしょうか？

ご存じの方いらっしゃいましたら教えて下さい。

よろしくお願いいたします。

プログラミング | Google Chrome・967閲
```
これに対する返信がこれ
```
回答（2件）

新しい順
cha********さん

2023/4/11 11:48

チャットを送るたびに自動でログ取るようにしておいて、
そのログから現在可能なチャット数を計算して表示するといいですよ。
```
笑った。知恵袋に投稿する人が自動でログなんかとれるわけ...
期待した俺が悪かったよ。


## 仕方ないから作るか。
と思ったけど今まで拡張機能なんぞ作ったことはない。とりあえずGPTから返信があったときに発生するリクエストだけ絞り込んで"新任のGPT先生"に聞いてみるとすごすぎた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832106/67168f2a-a647-f904-7048-997ef6634185.png)
最低限の構成で動くものがちゃんと帰ってくる。

こんな感じでほとんど自分ではコードを書かずにGPTから上がってきたコードを実行してみてエラーが出たらエラーを載せて修正してもらって、新しい機能を思いついたら実装してもらうというやり取りで出来上がってしまった。

完成するまでのGPTに投げた質問をマークダウンでまとめてるので興味がある人はbranchと見比べてみてほしい。

https://github.com/napspans/chatGPT4-message-counter-ext/tree/main/GPTtasks

## リリース
リリースに関してはgithubとchrome web storeに公開した。これに際してgithubではいい感じのREADME.mdを日本語版と英語版を作ってもらった。
storeの方では公開申請するのにいろいろ説明文を書かなければならいのだがこれもGPTに丸投げした。とくにプライバシーポリシーなんかは作ったことないので```background.js```と```manifest.json```をGPTに渡してこれに合うプライバシーポリシーをhtmlで書いてとお願いすると"よろこんで"やってくれた。
すごい時代になりましたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832106/7a9efed7-4925-5753-36ef-839b2778b9f9.png)
ということで初めてのchrome拡張機能のストア公開は数日かかるみたいなので、公開されたらまた記事を更新します。
みんなdownloadしてね。

## 追記(10/30) 拡張機能ストア登録申請後3日後
無事googleウェブストアで公開されました！🎉
宜しくお願いします！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832106/c4722986-3b5b-ef9a-1a70-92da0df61ed8.png)

https://chromewebstore.google.com/detail/lfijkccneagembdmjojhdndppiffinke?hl=ja
脱‼︎  (仮)初心者エンジニア!

色々と勉強記事を投稿していますが、実はまだ業界未経験のなんちゃって（仮）エンジニアでしたが、この度無事に新米エンジニアを名乗る事が出来るようになりました。
別に大した事ではないと思いますが、転職成功しましたので記念に投稿致します。

簡単なプロフィール
IT業界未経験
プログラミング経験なし
前職飲食業勤務
年齢２０代後半
最終学歴　高卒

プログラミング勉強の過程
タイピングの練習
HTML CSS Javascript PHPを参考書、動画で独学
プログラミングスクールにてサイト本番環境構築までを学習しました。
学習期間約３年※前職の勤務環境が黒寄りの黒でしたので実際に勉強できる時間があまりなかったのですが無理やり時間を作ってコツコツとしてました。

使用した転職サイト
Green
マイナビ転職
doda

一社に絞らず複数の転職サイトを利用しました。

転職活動前の目標
年収　400万
自社開発企業
動画等の影響を受けて条件は高め。

転職結果
年収　3２0万
業務委託企業

何度も辞めるのを留められていた前職を転職活動の為退職、その後使う機会がなかった有休を使いつつオンラインスクールにて学習、無事卒業し転職活動を開始しました。

求人を探すも未経験OKが少なく、経験者、大卒、専門卒ばかり、
数少ない未経験OK求人に応募するも書類選考留まり、、、、、、、
そもそも未経験OKなのにPHP２年以上とか書かれていてそれって未経験じゃなくね？？と不満を抱きながら４社目の選考も落ちたときに利用サイトからエージェントシステムの案内があり、取り敢えず利用させてもらう事にしました。

他の方と話す機会がなかったので客観的な意見はかなり為になります。
取り敢えず自分の市場価値を見直し、目標を自社開発ではない年収200後半以上の企業に変更。
その条件にて求人を探してもらい３社に応募、３社とも書類選考を通過することができました。
３社中２社が一次面接通過、ただ気になるのが自社開発ではない事、、、、、
その話をエージェントの方にした所、会社から見学のお誘いがありました。

オフィスはかなり綺麗、さらに、週休２日　1日８h勤務　資格補助制度　おまけに希望休も取りやすい( ͡° ͜ʖ ͡°)
驚いている自分に『普通の待遇ですよ』と言われたので前職の話をしたら『よく健康でいられましたね』と引いてるのを見て現代の労働環境からかけ離れていたことを実感しました笑
実際に見学をしてみて、思っていたよりも労働環境がよくサポートも手厚い、自社開発にこだわっていた事を反省です。

後日、一次面接を通過した２社ともに内定を頂いたのですが、見学させてもらった会社に入社することにしました。
ネットでよく目にする記事などが過剰なのか、たまたまいい会社だったのかよく分かりませんが、先入観を持つことはあまり+(プラス)ではないことはわかりました、、、が見学の時に自社を悪く話す事はないと思いますので実際に勤務して真相を確かめてみようと少ーーーーーーーし疑ってますが、念願のエンジニアに転職出来た事が嬉し過ぎてそんな事どうでも良くなって来ました( ´∀｀)

スタートラインに立っただけなのに燃え尽きそうになっていますが、1日でも早く理想のエンジニアになれる様今一度気を引き締めていきたいと思います。
Power BI Tips - 定数線の設定

# 概要
Power BI Desktopの棒グラフで、定数線を設定する方法の備忘録
⇒よくお客様に聞かれるので・・・。

# 手順
①キャンパス上の棒グラフのビジュアルを選択します。

②視覚化ペインの右端のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/3e4112b8-7b87-f326-d2d1-1a1aa05cb582.png)

③定数線のツリーを展開し、行の追加をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/726c2c13-ab31-5c97-8ad8-a3dd83126e3c.png)

④ここでは、上限値という名前の黄色の点線を引いてみます。
 まず、線の名前を設定します。
 右側のペンのアイコンをタッチすると、名前を編集できます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/62e7c4cb-2897-5de7-99fa-8a25cb07e4e3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/2303684a-fe27-d9f3-3f99-0f490ef09a28.png)


⑤線の色などのプロパティを設定します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/b9d9b2b9-68ba-efe0-22a8-2ae21491b5cf.png)

設定はこれだけ。
こんな感じで表示されます（データが何もない・・・）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/d1970483-8944-6b12-2490-e424891fbaea.png)

定数線にデータラベルの追加も可能です。
設定はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/41b2539d-bd03-71ec-0d2b-bd60217d79bb.png)

表示はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/4ec85a0f-4e67-12f2-aae4-04c994febb84.png)