OmniAICreator/Qiita-1.07M huggingface dataset:
【HTML・学習ログ3】タグいろいろ

## 区切りタグ

#### (1) navタグ（ナビゲーション）
Webサイトのナビゲーションを作成するタグ。

#### (2) articleタグ（記事）
記事を書く場所を宣言するための記述。

#### (3) sectionタグ（セクション）
（２）内でテーマの違う複数の記事を記述するときの区切り。
```html
<!DOCTYPE html>
<html>
<body>
	<header>
		<h1>ヘッドラインニュース</h1>
		<nav>
			<a href="layout.html">ホーム</a>
			<a href="https://www.google.com">スポーツ</a>
			<a href="https://www.google.com">経済</a>
			<a href="https://www.google.com">天気</a>
		</nav>
	</header>
	<main>
		<article>
			<section>
				<h2>速報</h2>
				<h3>動物園でゾウの赤ちゃん誕生！</h3>
				<p>市内の動物園でゾウの双子の赤ちゃんが産まれました。赤ちゃんの名前を募集中です。</p>
			</section>
			<section>
				<h2>気象情報</h2>
				<h3>全国の天気</h3>
				<p>全国的に晴れますが、山間部で一時的に雪が降るところがあります。</p>
			</section>
		</article>
	</main>
	<footer>
	</footer>
</body>
</html>
```
![スクリーンショット 2023-10-29 134019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/c629af8b-b9ba-f258-6353-f6111ef2f151.png)

## 特殊タグ

#### (4) audioタグ（音声再生）
「controls属性」を記述すると、音声ボタンや音量ボタンなどが表示される。
```html
<!DOCTYPE html>
<html>
<body>
	<audio src="audiotag.mp3" controls></audio>
</body>
</html>
```
![スクリーンショット 2023-10-29 140319.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/ba8a990a-9f09-d492-b929-89077e6aed5f.png)
#### (5) videoタグ（動画再生）
「width属性」で幅、「height属性」で高さを指定する。
```html
<!DOCTYPE html>
<html>
<body>
	<audio src="videotag.mp4" controls width="640"></audio>
</body>
</html>
```
#### (5) detailsタグ（折りたたみ機能）
クリックで表示、非表示を切り替える折りたたみ機能を作るタグ。
「open属性」…初期値が表示。これがなければ初期状態は非表示になる。
「summaryタグ」…詳細という文字を任意で変更できる。
#### (6) iframeタグ（別ページの埋め込み）
```html
<!DOCTYPE html>
<html>
<body>
	<h2>東京タワー</h2>
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747798533325!2d139.74324421566527!3d35.658584838820154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1636041735064!5m2!1sja!2sjp
	" width="500" height="500">
	</iframe>
</body>
</html>
```
![スクリーンショット 2023-10-29 141809.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/97aa3aee-ee67-e3b8-9334-0ae4b18a26aa.png)
UbuntuのVSCodeで日本語入力ができない

UbuntuにインストールしたVSCodeで日本語入力ができなかったので、それを直すまでの備忘録。

# 前提
- ibus-mozcをインストールしている。
- 他アプリケーションでは日本語入力が可能である。

# 原因
-VSCodeをMicrosoftの公式サイトからではなく、UbuntuSoftwareなるアプリストアからインストールしている。
UbuntuSoftwareはUbuntuインストール直後に、おすすめのソフト入れませんか～って聞いてくる。このときにインストールされるのが日本語入力できないVSCode。
# 直し方
1. UbuntuSoftwareを開き、VSCodeをアンインストール。
1. 公式サイトからVSCodeの.debをダウンロードし、sudo apt -y debファイル名。
【個人開発】水瀬いのりさんのライブで聴いたことのない曲を一覧表示するぞ

# 目的

水瀬いのりさんのライブで自分が聴いたことのない曲を一覧で表示する

# 経緯

[水瀬いのりさん](https://www.inoriminase.com/)、ご存知ですか？

声優でアーティストとしても活動していますが、筆者は2017年くらいから応援しています。
ライブも数回行きましたが、本人名義の曲が75曲あり自分の中で課題が生じました。

- 聴いたことある曲は分かるけど、逆にどの曲を聴いたことないのかが分からない

ということは**ライブ名と会場名から歌った曲を検索し、そのあと全曲から検索で取得した曲を引けば良い**のでは？と思ったのが出発点になります。

# 成果物

## URL

[https://inori-track-suntory-y-water.vercel.app](https://inori-track-suntory-y-water.vercel.app/)

# 機能説明

## ライブ選択画面

個人名義のライブか町民集会かを選択する画面

## 会場選択画面

ライブ選択画面から参加した会場を選択する画面

## 結果画面

会場選択画面で選択した会場から歌唱曲を検索し、検索結果からまだ聴いたことがない曲を表示する画面

# 使用技術

フロントエンド: Next.js 13
バックエンド: Node.js
スタイリング: Tailwind CSS
ORM: Prisma
データベース: Vercel Postgres
ホスティング: Vercel

リポジトリ: https://github.com/Suntory-Y-Water/inori-track

https://github.com/Suntory-Y-Water/inori-track

# 実際に使ってみる

初参加が2019年なので、少し前の曲は聴けてない印象ですね、、、

![IMG_5864.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3351724/097b4130-f971-4e15-9e8b-ca7a5b4d8d01.png)


# 今後

## 改善すること

### 町民集会の会場を昼夜公演で分離する

同じにしてしまった影響で、町民集会で歌ったはずなのに結果画面に表示される不具合が出ています…

ひとまずは会場を分離させることでfixできるはず

### Next.js 13への理解

ChatGPTとペアプロしていましたが、彼はNext.js 12までしか知りません
一本Udemyなどで体系的に知識をつけたいと思います…

## 追加したい機能

### 結果共有機能

画面スクショでしか共有する方法がないため、ボタンを押すことでTwitterへの共有 + 結果画面の共有を実施したい

### デザイン

機能というかデザイン全般
オシャレなものを作るよりも動くものを作るに特化しました
最低限アイコンくらいは追加したい

### フォームの再送信

会場選択画面と結果画面が前画面に依存している状態のため、場合によっては画面になんも表示されなくなる

フォームが切れたときはトップページに戻るようにpopupを表示させるか、データを端末内に保持させるようにしたい

### 注意書き

一部のライブは選択対象にしていないため、注意書きとして画面を用意する

# なんでバグあるのにデプロイしてんの？

投稿当日が「Inori Minase LIVE TOUR 2023 SCRAP ART」の神奈川公演2日目(千秋楽)だからです！！

当日にそれっぽく試せたほうがなんか楽しいと思うんですよね？

**？？？「完璧を目指すよりまず終わらせろ」**

とは言いつつ時間があったのにテストもしなかったのは明らか悪いので、遅くても来年2月の町民集会までにはバグは最低限治します…

終わり
ClosedXML複数行コピー対応

ClosedXMLで複数行をコピーする方法について対応したことをまとめたいと思います。

・環境
ClosedXML :バージョン 0.95

# 目次
　[やりたいこと](#やりたいこと)
　[解決方法](#解決方法)
　[まとめ](#まとめ)

#### やりたいこと
やりたいことは複数行を指定した形でのコピーです。
Excelの画像で表すと以下のようなことがしたかったです。
(1-2行を5-6行目にコピペする)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3096978/a55052cb-4daa-5225-6925-d1057b733974.png)

IXLRowクラスのメソッドにCopyToがあるが、セルの結合が外れた状態で
コピーが実施されるため、コピー先での結合処理が必要となる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3096978/165fab9a-b8d5-cb8e-8ef8-7b178bbac5f9.png)

#### 解決方法
コピー元をセルの範囲(range)で区切ることで疑似的な複数行のコピーを実施する。

```cs:C#
//シートの選択　今回はシート名"Sheet1"で検索
IXLWorksheet workSheet = workbook.Worksheets.Where(x => x.Name.Contains("Sheet1")).FirstOrDefault();
//コピー元範囲の選択 今回は[A1:ZZ2]のセル範囲をコピー元とする。
IXLRange fromRange = workSheet.Range("A1:ZZ2");
//コピー先のセルの指定
IXLCell copyToCell = workSheet.Cell("A5");
//コピーの実施
fromRange.CopyTo(copyToCell);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3096978/0f60cc04-f28f-c1fb-b000-289e89698418.png)


 ### 注意点
コピー元の高さがデフォルトから変更されていても、
コピー先には反映されないため、個別で対応する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3096978/7433b202-0ae4-bdcb-c7c1-91e820fbb81c.png)

高さはクラスのプロパティをコピー元からコピー先へ反映させて対応しました。
```cs:C#
//高さの反映
ws.Row("<コピー先行>").Height = ws.Row("<コピー元行>").Height;
```

#### まとめ
複数行のコピーをする対応策として、セルの範囲で対応したので、
完全なExcelの操作を再現する対応ではありません。
ClosedXMLの機能の見落とししているかもしれませんので、
別の対応案等ありましたら修正したいと考えています。
react-router-dom v6で入力した情報を破棄するかどうかの確認ダイアログを表示する方法

# 実現したいこと
ユーザーがフォーム等に値を入力後、
・ページをリロードしようとした時に確認ダイアログを表示する。
![Screenshot 2023-10-29 at 13.34.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/0e66a65d-e39d-8131-a008-c9346e174666.png)
・他のページに遷移しようとした時に確認ダイアログを表示する。
![Screenshot 2023-10-29 at 13.34.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/171c4641-a754-9528-25d0-6044c94ddfac.png)

# 課題
react-router-dom v6ではページ離脱を防ぐために必要なuseBlockerが削除されていて、別途実装が必要。

参考
https://qiita.com/yukiji/items/89d5174f13cdc21a622f#%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A7%E3%81%AE%E9%81%B7%E7%A7%BB%E6%88%BB%E3%82%8B%E9%80%B2%E3%82%80

# 使用したライブラリ
react-router-prompt
https://github.com/sshyam-gupta/react-router-prompt/tree/main

実際は、このライブラリの中で必要な3つのファイルのみをコピーして使いました。
https://github.com/sshyam-gupta/react-router-prompt/blob/main/src/hooks/use-confirm.ts
https://github.com/sshyam-gupta/react-router-prompt/blob/main/src/hooks/use-prompt.ts
https://github.com/sshyam-gupta/react-router-prompt/blob/main/src/index.tsx

理由としては、react-routerの非公式のライブラリで今後も継続的にアップデートされるかが分からなかったのと、上記3つのファイルのみ移植するだけで使えそうだったので、今回はライブラリをそのまま使うのではなく、コードを移植して使いました。

こちらが自作したコードのリポジトリです。
https://github.com/nobu0605/react-router-prompt

もちろん、ライブラリをそのまま使うことも可能です。

# 使い方
ライブラリを使った場合も自作の場合も同じで以下のようにReactRouterPromptを呼び出して、ダイアログなどをラップして使っています。
when propsに変更検知のflagを渡します。

```/components/UnsavedConfirmDialog.tsx
import ReactRouterPrompt from "./ReactRouterPrompt";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";

type Props = {
  when: boolean;
};

export function UnsavedConfirmDialog({ when }: Props) {
  return (
    <ReactRouterPrompt when={when}>
      {({ isActive, onConfirm, onCancel }) =>
        isActive && (
          <Dialog open={isActive}>
            <DialogTitle>Do you really want to leave?</DialogTitle>
            <DialogContent>
              <DialogContentText>
                Your changes will not be saved.
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={onCancel}>cancell</Button>
              <Button onClick={onConfirm} autoFocus>
                ok
              </Button>
            </DialogActions>
          </Dialog>
        )
      }
    </ReactRouterPrompt>
  );
}


```

# 補足
ページをリロードしようとした時に確認ダイアログを表示する場合に、beforeunloadイベントを使うのですが、カスタムメッセージや自作のダイアログは表示できないみたいです。
各ブラウザの既定のダイアログが表示されます。
https://qiita.com/nantekkotai/items/9a6e2c98ed704934ab47
新規サービス？それってどうやって作るの？Publicにして開発するので元気玉をください

# 新規サービス？それってどうやって作るの？
新しいエンジニアの転職探しのためのプラットフォームを立ち上げます。
開発はGitHub上で進めますが、全てを公開モード（Public）でオープンに進行する予定です。
開発はGitHub上で進めますが、反響があれば全てを公開モード（Public）でオープンに進行する予定です。

いいねの数が多いとPublicで開発するモチベーションになります笑
https://twitter.com/IT_Engineer_Pro/status/1718489165569142840

---

## なぜオープンにするのか？
その理由は「**初級・中級者が0から1を生み出す方法を学べるようにしたい**」からです。
初級・中級者の中にはWebサービス作成の初期段階が難しく感じる人が多いようです。
以下の2つの課題を感じています：
1. プログラミングを学びたい人が少なく、学び始めても適切な環境が不足している。
2. プログラミングの基本を理解していても、実際のサービスを作成する際に行動に移せない。

私は、多くの人が自身のサービスを立ち上げることができれば、日本のIT業界がさらに活性化するのではないかと考えています。

---

## [本題] 具体的には何を作るのか
それは「**エンジニアの転職探しの新たなプラットフォーム**」です。


私が感じた既存の転職サービスの課題点
1. 会社をプログラミング言語やフレームワークで検索する機能がない。
2. 各会社がどのような言語、フレームワーク、クラウドサービスを使用しているのかが明確に表示されていない(見にくい)。

エンジニア以外の職種にとっては既存のサービスが使いやすい一方、エンジニアにとっては自分が習得している言語を活かせる企業が少ないと感じました。
そのため、技術スタック（言語やフレームワーク等）から検索できる機能があれば、非常に便利だと考えています。


具体例として、私が開発中のtecklinker.comを参照して説明します（ただし、レスポンシブデザインは未実装のため、スマホでの表示が乱れる可能性があります。以下の添付画像を参照してください）。

---


### プログラミング言語やフレームワークを基にした会社の検索

人気のカテゴリから、言語やフレームワーク、クラウドサービスを選択して検索できる機能を実装します。
￼![スクリーンショット 2023-10-29 11.52.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130166/d89e664e-20bd-0b47-9f10-fa26916bf642.png)



さらに、ユーザーエクスペリエンスを向上させるために、選択した項目に関連するプログラミング言語やフレームワークなどを表示し、検索をスムーズに行えるようにします。
￼![スクリーンショット 2023-10-29 11.58.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130166/0e5c4362-6629-fe01-20c6-91a0c5847698.png)<br>

---

### 各会社がどのような言語、フレームワーク、クラウドサービスを使用しているのか
各会社の詳細ページでは、使用している技術スタックを一覧で表示します。
これには、プログラミング言語、フロントエンド・バックエンドのフレームワークやライブラリ、ミドルウェア、各種クラウドサービス、モニタリング、アナリティクス、その他の技術関連ツールなどが含まれます。
![スクリーンショット 2023-10-29 12.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130166/eb3803f3-2ac1-8726-642b-0bb36fe6451e.png)


そして、会社の情報ページでは、会社の概要、ミッション、ビジョン、働き方、福利厚生、基本情報などを掲載します。また、ページ最下部には応募ボタンを配置します。
￼
![スクリーンショット 2023-10-29 12.32.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130166/d43824f9-6823-4229-3732-022bb8a3ef72.png)
「JavaScript完全に理解した」とか言うんなら、これぐらい知ってるよな？（||, &&演算子）

# 問題
以下コードを実行すると、コンソールには何が出力されるでしょうか？
```javascript:JavaScript
const bool1 = false;
const name = bool1 || "Hello World";
console.log(name);
```

## 答え
```
Hello World
```

## 解説
`||`演算子は、
左側がfalseなら、右側の値を返す。
左側がtrue判定なら、右側の値を返す。
という特性があります。

先程の問題だと、
左側の値である変数`bool1`は`false`なので、
右側の値`Hello World`が変数`name`に代入されているのです。
`const name = bool1 || "Hello World";`


# テスト
変数`output`には何が代入されるでしょうか？
```javascript
const output = "val2" || "こんにちは";
```

## 答え
`val2`が代入される。
（文字列"val2"は`true`判定だから。）



# おまけ
`&&`演算子は、
左側が`true`なら、右側の値を返す。
左側が`false`なら、左側の値を返す。
という特性があります。
LPIC102の内容から業務で使いそうなコマンド

本記事は、勉強したことのアウトプット（メモ）です。
LPIC102を勉強中のため、試験内容から使ったことあるコマンドや使ってみたいコマンドをまとめました。

#### 現状
- Web系エンジニアです。
- 先月LPIC101に合格し、LPIC102を勉強中。

#### 他記事
LPIC101の記事も投稿しています。

https://qiita.com/kahataku/items/2e94dacd26a926b80f14

https://qiita.com/kahataku/items/b12e01dd1f36fd26f315

## 使用参考書、サイト
- [inux教科書 LPICレベル1 Version5.0対応](https://www.amazon.co.jp/Linux%E6%95%99%E7%A7%91%E6%9B%B8-LPIC%E3%83%AC%E3%83%99%E3%83%AB1-Version5-0%E5%AF%BE%E5%BF%9C-%E4%B8%AD%E5%B3%B6-%E8%83%BD%E5%92%8C/dp/4798160490/ref=asc_df_4798160490/?tag=jpgo-22&linkCode=df0&hvadid=295678107984&hvpos=&hvnetw=g&hvrand=10026356874543379694&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009292&hvtargid=pla-649269108462&psc=1&th=1&psc=1)
- [ping-t](https://ping-t.com/)
- [Linux教科書 LPICレベル1 スピードマスター問題集 Version5.0対応](https://www.amazon.co.jp/Linux%E6%95%99%E7%A7%91%E6%9B%B8-LPIC%E3%83%AC%E3%83%99%E3%83%AB1-%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E5%95%8F%E9%A1%8C%E9%9B%86-Version5-0%E5%AF%BE%E5%BF%9C-%E5%B1%B1%E6%9C%AC/dp/4798160857/ref=sr_1_1?adgrpid=56122615434&hvadid=667834322319&hvdev=c&hvlocphy=1009292&hvnetw=g&hvqmt=e&hvrand=9361466665802150923&hvtargid=kwd-334266044763&hydadcr=26605_11772063&jp-ad-ap=0&keywords=lpic+%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC&qid=1694935740&sr=8-1)

## コマンド
#### crontab
定期的にジョブを実行するようにスケジュールするcronを設定する。

| オプション | 説明 |
|:-:|:-:|
| -e  | エディタを使用してcrontabファイルを編集  |
| -l  | crontabファイルの内容を表示  |
| -r  | crontabファイルを削除  |
| -i  | crontabファイル削除時に確認する  |
| -u ユーザ名  | ユーザ指定してcrontabファイルを編集する（rootのみ）  |

```linux:bash
#crontabファイル編集
$ crontab -e

#設定されているcron表示（crontabファイル内容表示）
$ crontab -l

#設定されているすべてのcron削除
$ crontab -r
```

システム開発でよくcronは出てきます。
定期的に実行してほしいバッチ処理を設定することが多いかなと思います。

書式：`分　時　日　月　曜日　コマンド`
`*`の場合、すべての値にマッチします。
複数の値を設定したい場合は、`,`で区切ったり、`-`で指定したりします。

| フィールド | 詳細 |
|:-:|:-:|
| 分  | 0〜59  |
| 時  | 0〜23  |
| 日  | 1〜31  |
| 月  | 1〜12 もしくは　jan〜dec  |
| 曜日  | 0〜7 もしくは　Sun,Monなどの文字列 |
| コマンド  | 実行すべきコマンド（例：シェルスクリプト実行）  |

```linux:bash
#毎日22時に/test/test1 を実行
0 22 * * * /test/test1
```

#### at
1回限りの実行スケジュールを扱う。

| オプション | 説明 |
|:-:|:-:|
| -d ジョブ番号 | 予約中のジョブ番号で指定して削除する  |
| -l  | 予約中のジョブを表示  |
| -f  | 予約するジョブファイルを指定  |
| -v  | ジョブの実行時間も詳細に表示  |

atコマンドでのジョブ設定は下記の通りです。
ジョブ設定後、`ctrl + D`で設定完了します。
```linux:bash
#日時を指定してatコマンド実行
$ at 12:00 tomorrow
at> /test/test1
at>
```

## 参考文献
- https://eng-entrance.com/linux-command-crontab
- https://eng-entrance.com/linux-command-at
OpenAPI DevTools(Chrome拡張機能)でWebサイトのOpenAPI仕様書を確認する

# 1. はじめに
* Webサイトで使用されているOpenaAPIの仕様書を確認したい

# 2. 開発環境
* Chrome
* Windows 11
* OpenAPI DevTools (Chrome ウェブストア)

# 3. OpenAPI DevToolsのインストール
* GitHubの「OpenAPI DevTools」へアクセスする

https://github.com/AndrewWalsh/openapi-devtools

* ```Download the extension in the Chrome Web Store.```をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/900c9b2b-f626-94ba-f1ae-6a3978e63d64.png)

* ```Chromeに追加```をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/e694d7ca-6600-6cc1-3ef1-aff0c490297a.png)

* ```拡張機能を追加```をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/da59e530-b3e9-005a-92bd-43c68180e06b.png)

* Chromeを再起動する

# 4. 使い方
## 4.1. 事前準備
```Control＋Shift＋i```を押下して、デベロッパーツールを開き、OpenAPIタブを選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/aa746887-c607-7897-e0bb-d5f4b4e7504e.png)

## 4.2. レコーディングをする
* ```Start Recordingボタン```をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/255f6c1c-49b4-3db7-3af3-b31b9cc304f6.png)

* リンクをカーソルの上に置くとOpenAPI仕様書を自動で検出する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/a586ea9e-2418-5549-877b-8988eeaf9220.png)


* タブの左側にレコーディングした一覧が表示される（ウィンドウサイズを大きくする）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/ed7f5f13-b4a4-6da8-df44-af120247fcc4.png)

## 4.3. レコーディングを停止する
* 左側のボタン（検出の一時停止）をクリックする
* ちなみに、中央はのボタン（設定）、右側のボタン（全データを削除）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/76c5c332-d546-a377-5e5f-29408667bccd.png)

# 5. 参考文献

https://gigazine.net/news/20231027-openapi-devtools/
Run an Autolaunched Flow from a Custom Button


+ [Challenge to Autolaunched and Scheduled Flows](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000JgUuTSAV)

:::note alert
We can't launch this flow because of a variable error. Send this error message to your admin. The value 2010. 2. 26. is being provided for variable campStartDate but isn't compatible with the variable's data type (Date). Check the places where you implemented the flow ‒ such as through a Lightning page or a custom button ‒ and make sure that all provided values are compatible with the variables' data types.
:::

:::note
A Salesforce Flow is designed to accept a Date in the following format;

```
YYYY-MM-DD
```

https://help.salesforce.com/s/articleView?id=sf.flow_distribute_internal_url_variable.htm&type=5

In your case and mine as the system is trying to pass a value that is not in this format the process is failing to pass the parameter into the flow.

I created this formula that forces the format in the prescribed way;

```
TEXT (YEAR(StartDate)) & "-" & TEXT (MONTH(StartDate)) & "-" & TEXT(DAY(StartDate))
```


However this formula will not work if the date or month value is one digit. The formula could be adjusted to support this but I'm afraid I've run out of time for now.

If you then adjust your custom button with the new formula field instead of the StartDate then this should work as expected.

As I see this as a 'Technical Issue' with a Trailhead Challenge I've raised this as a issue to the Trailhead Help Team via a case and invite you to do the same if you wish.



Salesforce フローは、次の形式の日付を受け入れるように設計されています。

```
YYYY-MM-DD
```

https://help.salesforce.com/s/articleView?id=sf.flow_distribute_internal_url_variable.htm&type=5

あなたの場合と私の場合、システムがこの形式ではない値を渡そうとしているため、プロセスはパラメーターをフローに渡すことができません。

私は、指定された方法でフォーマットを強制するこの数式を作成しました。

```
TEXT (YEAR(StartDate)) & "-" & TEXT (MONTH(StartDate)) & "-" & TEXT(DAY(StartDate))
```

ただし、日付または月の値が 1 桁の場合、この式は機能しません。これをサポートするために式を調整することもできますが、残念ながら今のところは時間がありません。

その後、StartDate の代わりに新しい数式フィールドを使用してカスタム ボタンを調整すると、期待どおりに機能するはずです。
:::


+ [Error:We can’t find a date variable named 'campStartDate'.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007OVXkc)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/29810b5f-20ff-d54a-3f5d-3b11cd0ce7a4.png)
灰色14級がABC326をpythonでやってみた。(A,B問題)

# 0 はじめに
久しぶりです。あおぷと.zipです。
Ratedで参加できていなかったので間があきました。
ちなみにABC322で灰色14級に昇格しました。
記事のアドバイスあったらコメントに書いてください(お願いします。)
ABC326の問題ページは[こちら](https://atcoder.jp/contests/abc326/tasks)。
# 1 A - 2UP3DOWN

https://atcoder.jp/contests/abc326/tasks/abc326_a

## 解説
X - Y が-2より大きく3より小さければYesを出力すればよいです。
## コード
```python:a.py
x,y = map(int, input().split())
if -2 <= x - y <= 3:
  print("Yes")
else:
  print("No")
```
# 2 B - 326-like Numbers

https://atcoder.jp/contests/abc326/tasks/abc326_b

## 解説
nを文字列として受け取り,
1文字目 * 2文字目が3文字目と一致するまでnを1ずつ増やしていきます。

## コード
```python:b.py
n = input()
s = [] 
for i in range(3):
  s.append(int(n[i]))
line = int(n)
while not s[0] * s[1] == s[2]:
  line = str(n+1)
  s.clear()
  for i in range(3):
    s.append(int(n[i]))
  line = int(n)
  print(n)
```
Slackとスプレッドシート連携して通知を実装参考にしたサイトまとめ

<h2>Slackとスプレッドシート連携して通知を実装参考にしたサイトまとめ</h2>
<h3>利用したサイトリスト</h3>
<a href="https://moniblo.com/spreadsheet-edit-notice">スプレッドシートの更新内容を自動でSlackへ通知する方法</a>

<a href="https://www.service.andonuts.jp/posts/spreadsheet-slack">【GASで業務効率化】スプレッドシートの変更をSlackへ通知する方法 </a>

<a href="https://businesschatmaster.com/slack/spreadsheet-change-notification">Slackにスプレッドシートの変更がある度に内容を通知する方法</a>

<a href="https://blog.engineer.adways.net/entry/2022/12/02/190000">いまさらですがGASを使わずスプレッドシートの内容をSlackに通知する方法！</a>

<a href="https://s1r-j.hatenablog.com/entry/2022/06/30/014721">Googleスプレッドシートの内容をSlackに通知する</a>

<a href="https://qiita.com/pchan52/items/574e930a3cc42cf7f8b9#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AE%E8%AA%AC%E6%98%8E">Googleformからのslack通知設定方法</a>

<a href="https://qiita.com/gas-suke/items/5cf7bd4c6c3f15a25838">【0からGASを学ぶ】ところでGASって何？</a>

<a href="https://note.com/okahighther/n/n501b401aeadc">Google Apps Script(GAS)を使ってスプレッドシートのセル1列のみ更新された際、メール通知される環境つくってみた</a>

<!--
<a href="https://w1659408072-wy1251744.slack.com/services/B0625G3PV3P?added=1">Incoming Webhook</a>
-->

<a href="https://coporilife.com/468/#toc2">【GAS】特定のセルが変更されたら、特定のセルに入力があれば処理、参照セルも可能【Google Apps Script】</a>

<a href="https://teratail.com/questions/4r43fpx0pqrc0n">スプレッドシートから、担当者を確認してスラックにメンションされるようにしたい</a>

<a href="https://ohshige.hatenablog.com/entry/2019/06/10/190000">GASを使ってSlackにメンション付きで投稿したい</a>

<a href="https://off.tokyo/blog/mention-gas-slack-api/">GASとSlackのAPIでメッセージ送る時メンションする方法</a>

<a href="https://qiita.com/guolam/items/8d097e40975acb46d908">【業務効率化】GASを使ってスプレットシートとSlack連携して、自動通知機能を作ってみた</a>

<a href="https://taibonn.com/gsuite/gas-trigger/">GASのトリガーには２種類あります</a>

<a href="https://blog.synnex.co.jp/google/gas-data-format/">GASでのDate型データのフォーマット</a>

<a href="https://qiita.com/takanori-azegami-jp/items/91b50b76ce065e1dce94">【GAS】SlackのユーザグループIDをコピペで取得できるやつ</a>

<a href=""></a>

<a href=""></a>

<a href=""></a>
Eclipse ショートカット チートシート

2023年4月IT未経験からエンジニア企業に入社し、Javaの研修を受けました。
以下は研修期間中に自分用にまとめたEclipse(2022-12)のショートカット集です。
# 編集系
| キー | 機能 | メモ |
|:-:|:-:|:-:|
|  Ctrl+C/X | 選択範囲をコピー/切り取り  |   |
|  Ctrl+V |  コピー/切り取りの挿入 |   |
|  Ctrl+A |  全範囲選択 |   |
|  Ctrl+D | 行を削除  | カーソル・選択範囲が含まれる範囲は丸ごと削除  |
|  Ctrl+Z/Y | 操作の取り消し/やり直し  |   |
|  Ctrl+/ |  行のコメントアウト切り替え |   |
|  Ctrl+Shift+C |  選択範囲のコメントアウト切り替え |   |
|  Ctrl+Space |  サジェッション機能 |  外部クラスを使う場合import文も作ってくれる |
|  Alt+↑/↓ |  行を上/下の行と入れ替え | 複数行まとめて可能  |
|  Ctrl+Alt+↑/↓ |  行を上/下にコピー | 複数行まとめて可能  |
| Alt+Shift+Z,Y | 選択範囲をtrycatch文で囲む | Yの代わりに数字キーでdowhile文,if文等でも囲める |
| Alt+Shift+R | クラス名、変数名をリネーム(一括) |  |
| Ctrl+Shift+O | import文一括生成 |不要なimport文は削除される|
| Ctrl+Shift+F | 整形・フォーマット | 文法ミスがあると変に整形されるので注意 |
| Ctrl+, | コンパイルエラー箇所にジャンプ |  |

# ファイル・画面操作系
| キー | 機能 | メモ |
|:-:|:-:|:-:|
| Ctrl+S | 上書き保存 |  |
| Ctrl+W | タブを閉じる |
| F11 | デバッグ |
| Ctrl+F11 | 実行 |
| Ctrl+click | 参照場所を開く | フィールド・メソッドを宣言している場所を見つけられる |
| Ctrl+Shift+R | ソース名を指定してファイルを開く | ワイルドカード検索可(*) |
| Ctrl+H | 高度な検索 | 特定の文字列を含むファイルを見つけられる・ワイルドカード検索可(*) |
| Ctrl++/- | 画面のズームイン/アウト |  |
| Ctrl+M | 画面最大化 |  |

## あとがき
結構数が多くなりましたがすべて頻繁に使用している印象があります。
現場ではVSCodeも用いるのでVSCodeのショートカットもゆくゆくは習得したいです。
1on1で使える 心理学テクニック 主語編【エンジニア心理学】




## あなたの伝えたいことを伝わる！ 1on1で使える心理学テクニック

1on1では「あなたが伝えたいこと」を伝えるためのミーティングです。
今後のキャリアの話や仕事のやり方の話、もしくは昇給昇格の話が出るかもしれません。

そのような場面で大事なことは、**あなたの伝えたい内容を誤解なく伝達するテクニック**です！
自分の魅力ややりたいことを120%伝えられるようなテクニックをまとめました。




## エンジニア心理学?

エンジニア心理学は円滑な人間関係,チームワークを望む「エンジニア向けの学問」です。会話が苦手なエンジニアでも実践できる体型だったコミュニケーション術をまとめました。ケース別に対応方法を網羅した点が特徴です。

https://qiita.com/minegishirei_v2/items/2d5af4fba628390ec988





## ミーティングでは主語に気をつけること！

その人が内向的か外交的か、自責か他責か、技術に興味があるかないかは主語に表れやすいです。

例えば、次の三つの文章は同じ内容ですが、上長からの印象は異なるはずです。

- 私はアジャイルを導入したいです。
- OOさんはアジャイルを導入した方が良いと思います。
- アジャイル開発によるアプローチがベストですよね。

**主語を変えることで受け手の印象は異なります。**
時と場合によって主語を使い分けることで、誤解のない伝達を心がけましょう！

ちなみに、これらの主語は環境によって容易に変化します。
チームの中の立ち位置や目的、雰囲気で一人称が変わる時こそ注意して聞いてみてください。


### 「私」 : 自己中心的な考え方。個人主義。

「私」を使用することは、彼女が自分自身に焦点を当て、自分のニーズを優先していることを示します。

> 私はいい気分です。

> 私は仕事が大好きです。

> 私は給料が大好きです。



### 主語が他人 : 他者が中心の考え方。チームワーク主義。

他の人に注目するということは、彼女が他の人を優先していることを示しています。またはとても思いやりがあるかもしれません。

> サトウさんは素晴らしいです。

> 新しい上司はよいですね。

> 皆さん優しそうです。



### モノが主語 : 成果主義。


オブジェクト語は、オブジェクトへの焦点を示します。何か問題があるのか​​もしれないし、ただのテクノロジーオタクなのかもしれません。

> コンピューターはよいですね。

> 佐藤さんが作ったコンピューターはハイテクですね。

> トイレに行きたいです。

> アジャイルいいですよね〜。
画面遷移せずにファイルをアップロードしハッシュ値を表示する方法

# はじめに
Web上で画面遷移をせずにファイルのハッシュ値を表示する方法を探していたところ、なかなか見つけることができませんでした。試行錯誤を行った結果、表示できるようになったためその方法を記載します。
 
# 完成画面
ここでは以下のtest.txtをSHA256でハッシュしています。
```tex:test.txt
test
```
<img width="700" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586445/3f1e53b3-fbaa-13fd-158a-4d9a0b7f297b.gif>

# プログラム
以下のようなフォルダ構成とし、webtest.pyを実行すると動きます。
root/
　├ templates/
　│　　└index.html
　└ webtest.py
```python:webtest.py
import hashlib
from flask import Flask, request
from flask import render_template

app = Flask(__name__,template_folder='./templates')


@app.route("/")
def index():
  return render_template("index.html")

@app.route("/upload_file", methods=["POST"])
def upload_file():
  file = request.data
  hash = hashlib.sha256(file).hexdigest()
  return hash, 200

if __name__ == "__main__":
  app.run(debug=True)
```
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ファイルハッシュ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <form action="">
        <input type="file" id="f1" name="file1">
        <p id="hash"></p>
    </form>
  
<script type="text/javascript">
    var element_file = document.getElementById('f1')

    element_file.addEventListener("change" , function(e){
        var file_list = element_file.files;
        var file = file_list[0];
        var file_reader = new FileReader();

        file_reader.readAsArrayBuffer(file);
        file_reader.onload = function(e){

            // Uint8Arrayを作成
            var ary_u8 = new Uint8Array(file_reader.result);

            //送信
            $.ajax({
                url: "/upload_file",
                type: "POST",
                data: ary_u8 ,
                contentType: false,
                processData: false,
                success: function(response) {
                    $("#hash").text(response);
                },
            });
        };

    })
</script>
</body>
</html>
```


# 終わりに
pythonやhtmlのプログラミングは初心者であるため、これだけのことを実装するために2日もかかってしまいました。もし、同じような問題を抱えている方は参考にしてみてください。
PowerShellでのfor文サンプル

# コードのサンプル
```PowerShell
# 他の言語のfor(i=1;i<10;i++) に相当
for ($i=1; $i -lt 10; $i++){
	write-host $i
}

# 他の言語for(i=1;i<=10;i++) に相当
for ($i=1; $i -le 10; $i++){
	write-host $i
}
```

実行結果
```
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
```

# なんでこんなものを。
ここに書くほどのことではないのかもしれないのですが、**PowerShellは比較演算子が独特すぎる** ということに最初に気づかず、for文を書くのにも苦しみました。
自分と同じ初学者の方のためになればと思い、自分への備忘も兼ねての投稿となります。
【React 入門】 計算アプリの作成

参考にしたサイトのコードをリファクタリングしたので記録に残します。
https://tech.e3factory.com/programming/2586

```react

//nameをsetStateと合わせる
<ValueInput name="value1" value={this.state.value1} valueChange={this.valueChange} />+
<ValueInput name="value2" value={this.state.value2} valueChange={this.valueChange} />=

```

### valueChangeの共通化
①stateとnameのkeyを合わすことによって、「[name]」で共通化できる
②①で更新した値を元に合計値（answer）を再計算している
※単にsetStateを２回書くと更新前の値で合計が計算されてしまう為注意
```react
 // 値が変更された時、計算を行う
  valueChange(e) {
    var name  = e.target.name;
    var value = e.target.value;
    // ①setStateで変更があった値を更新
    this.setState({
      [name]: value, //入力したValueInputの値を変更する（[_name]value1、value2）
    }, () => {
      // このコールバック関数内で新しい状態にアクセスできる
      // ②setStateで合計を更新
      this.setState({
        answer: parseInt(this.state.value1) + parseInt(this.state.value2)
      });
    });
  }
```

全体コード
```react
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class ValueInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  // 値が変更された時の処理
  handleChange(e) {// element
    this.props.valueChange(e);
  }

  render() {
    return (
      <div>
        <input type="text" name={this.props.name} value={this.props.value} onChange={this.handleChange} />
      </div>
    );
  }
}

class ValueAnswer extends React.Component {
  render() {
    return (
      <span>{this.props.value}</span>
    );
  }
}

//計算回りの処理
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.valueChange = this.valueChange.bind(this);
    this.state = {
      value1: 0, // ValueInputのnameと同じkeyとしている
      value2: 0, // ValueInputのnameと同じkeyとしている
      answer: 0,
    };
  }

  // 値が変更された時、計算を行う
  valueChange(e) {
    var name = e.target.name;
    var value = e.target.value;

    this.setState({
      [name]: value, //入力したValueInputの値を変更する（[_name]value1、value2）
    }, () => {
      // このコールバック関数内で新しい状態にアクセスできる
      this.setState({
        answer: parseInt(this.state.value1) + parseInt(this.state.value2)
      });
    });
  }

  //計算のメソッド
  render() {
    return (
      <div>
        <ValueInput name="value1" value={this.state.value1} valueChange={this.valueChange} />+
        <ValueInput name="value2" value={this.state.value2} valueChange={this.valueChange} />=
        <ValueAnswer value={this.state.answer} />
      </div>
    );
  };
}

ReactDOM.render(<Calculator />, document.getElementById('root'));
```
【自分勝手な、AIの未来予想】ですw


　どうも、カーブミラーです。

　今回は、自分勝手な“AIの未来予想”です。どこまで当たるかはわかりませんが、まぁ、可能性の問題と思います。

:::note info
本記事は、
　ふつうの記述にしています。
　　あしからず。

　いや、いつもの書き方に
　　している時間がなかったのでw
:::

　ChatGPTが、マルチモーダルAIとしての一歩を踏み出しました。

　まだ、画像取り込みまでですが、いずれは映像を取り込めるかと思います。
　少なくとも、外部では議事録の作成ができる仕組みがありますからね。
　GPT-4Movieになるのかな？
　とか言ったら、GPT-5になるでしょ、と有識者から言われてしまいましたw
***
　さて、ChatGPTに関わらず、AIの未来を考えてみましょう。

　まず、現在のAIのほとんどは、ネットの先のクラウドと接続しての利用ですが、どうしても大量の電気を消耗し、冷却のために大量の水を使用する必要があります。
　それを分散できれば、どちらも節約できるはずです。

　そこから導かれる答えは、パーソナルな能力のAIを身に着け、クラウドへの接続はパーソナルAIで処理できない場合のみ、接続する形になるかと思います。
　身に着けるAI、ウエアラブルAI。現在のスマホやスマートウォッチなどが連携して、AIを構成する。
***
　次に、自動車にいきましょう。

　自動車は、すでにAIが組み込まれて、自動化してきています。自動運転もですね。

　自動車もAIが高能力化していくでしょう。おそらく、自動運転AIと頭脳AIというスタイルになり、人間を相手にするのは頭脳AI。
　ただし、ウエアラブルAI経由になるのではないでしょうか。なぜなら、それにより、登録されたウエアラブルAIがキーとなり、盗難抑制ができるようになりますから。
***
　次が、家です。

　スマートホームとなり、登録されたウエアラブルAIとのやり取りだけではなく、家の中の人間を認識して、動作や言葉から、必要な機能を提供します。
　エアコンの制御、お風呂の給湯、戸締まりなどなど。
　まぁ、すでに導入されている部分はありますよね。あとは、AI組み込みくらいかな。
　もちろん、防犯も加わることでしょう。
***
　仕事の場にいきましょうか。

　もちろん、会社にも、専用のAIが用意される可能性はあります。

　仕事でパソコンを使う場合、パソコンにもAIが組み込まれて（Microsoft 365とか）、表計算やワープロ作業、メール記述などの作業工程が削減される。
　もちろん、音声での指示もできるので、わざわざキーボードを使用しなくてもよくなります。これはパソコン自体の性能で賄えるようになります。
　会議も会社のAIが参加するのは当然。なぜなら、会社に導入されてからの履歴から、会議内容が何を求めるものなのかをわかっているから。
　会社のAIの導入年数により、仕事がスムーズに進む。人間の無駄な動きも予測するから、その無駄を組み入れた考えを提供してくるはず。
***
　これ以外にも、工場とか工事現場とかの話もあります。

　工事現場でいけば、秋田県の成瀬ダムで、14台のロボ重機がプログラムに従って動いています。その動作をAIがコントロールしているとか。

　労働者が危険な現場などは、特に無人での作業が必要になるはずです。さまざまなロボットが研究開発されていますので、いずれ災害救助に使われる場面も出てくるでしょう。
***
　AIが一般家庭や工事現場に組み込まれるのは、それほど時間は掛からないことでしょう。

　AGIまでは、いかないとしても。

　そんな世界を、
　　楽しみに待ちますね。

　今回は、ここまで。
【Ruby】クラス、モジュールを使用するメリットや使い方をまとめてみた

## はじめに
Rubyを学習している中でクラスやモジュールの使い方や使用するメリットを整理した内容になります。基本的な使い方を記載していますが、他にも様々な機能があるため、参考情報として見ていただけると幸いです。

## クラスの基本的な使い方とメリット
### インスタンス化
今回例としてUserクラスを定義します。
```ruby
 class User
    def initialize(name)
        @name = name
    end

    def getname
        @name
    end
 end

 user = User.new("tanaka") #これでUserクラスをインスタンス化できる
 p user.getname
# "tanaka" 
```

### 継承
Userクラスを継承することで、Playerクラス内ででUserクラスで定義したインスタンス変数やメソッドを使用することができます。
```ruby
 class Player < User #これでUserクラス継承ができる
 end

 player = Player.new("tanaka")
 p player.getname
# "tanaka" 
```
### オーバーライド
Userクラス(スーパークラス)で定義したメソッドをPlayerクラス(サブクラス)用にメソッドの再定義をすることができます。
```ruby
 class Player < User
     def getname
         p "Playerクラスでオーバーライドしてます"
        @name
    end
 end

 player = Player.new("tanaka")
 p player.getname
# "Playerクラスでオーバーライドしてます"
# "tanaka"
```
### メリット
クラスはオブジェクト単位でメソッドや変数をまとめることができ、
コードの再利用性や、可読性向上を図ることができます。

## モジュールのメリットと使い方
```ruby
 module UserCommon
    def getname
        @name
    end
 end

 class User
    include UserCommon #これでUserCommonモジュールをUserクラスで使用できる
    def initialize(name)
        @name = name
    end
 end

 user = User.new("tanaka")
 p user.getname
# "tanaka" 
```
### メリット
モジュールは特定のクラスで再利用したいメソッドがある場合に一箇所に集めておける仕組みです。
クラスのようにインスタンス化はできないですが、再利用したいメソッドをモジュールに切り分けることで可読性向上を図ることができます。

## まとめ
クラスはインスタンス化して、継承やオーバーライドを使用することで、コードの再利用性や可読性向上させることができる。
モジュールはインスタンス化できないが、メソッドをまとめておけ、コードの可読性向上させることができる。
wslでelixir その87

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題、やってみた。

# 練習問題
Livebookでd3.jsでtable作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/df5df5ff-dcce-31dd-5094-d310918e29e7.png)


# サンプルコード

```
defmodule KinoD3.Table do
	use Kino.JS
	def new(html) do
		Kino.JS.new(__MODULE__, html)
	end
	asset "main.js" do
		"""
		import "https://d3js.org/d3.v5.min.js";
		export function init(ctx, json) {
  		const chartid = document.createElement("div");
	  	chartid.id = "out";
		  ctx.root.appendChild(chartid);
		  var blob = new Blob([json], {
			  type: "application/json"
		  });
		  var url = URL.createObjectURL(blob);
		  d3.json(url).then(function(data) {
			  d3.select('#out').append('div').selectAll().data(data).enter().append('div').text(function(dataRow) {
				  return dataRow['kanji'] + ' ' + dataRow['kana'] + ' ' + dataRow['color'];
			  });
		  }).catch(function(error) {
			  alert("ng")
		  });
    }
		"""
	end

end

KinoD3.Table.new("""
[{
	"kanji": "青",
	"kana": "あお",
	"color": "blue"
}, {
	"kanji": "赤",
	"kana": "あか",
	"color": "red"
}, {
	"kanji": "緑",
	"kana": "みどり",
	"color": "green"
}]
""")
```

以上。
Doctrineで条件に合致するレコードがあるか確認したい

要はRailsの`exists?`みたいなことをしたい。
DBに余計な負荷をかけない。

```ruby
> User.exists?(name: '田中')
SELECT 1 AS one FROM `users` WHERE `users`.`name` = '田中' LIMIT 1
=> true
```

## コード

```php
$entityManager = $this->getDoctrine()->getManager();

$result = $entityManager->getRepository(User::class)
    ->createQueryBuilder('user')
    ->select('1')
    ->andWhere('user.name = :name')
    ->setParameter('name', $name)
    ->getQuery()->setMaxResults(1)->getOneOrNullResult();

return !is_null($result);
```

## 説明

- `select('1')`: `SELECT 1`に対応
- `setMaxResults(1)`: `LIMIT 1`に対応
- `getOneOrNullResult()`: 配列ではなく最初の1件または`NULL`を返す
- `!is_null($result)`: 上記の「最初の1件または`NULL`」を「true または false」に置換
最新nextjs13系でのトラブル

この記事を見て悩んだ事
---

https://reffect.co.jp/react/next-js-13/#%E3%83%93%E3%83%AB%E3%83%89

# トラブル１ 最新のnextのversionだと下記のようなエラーがでて怒られる場合

対策１
"use client";としてpage.jsは基本はserverサイドだから動的にかわるものはuse clientを付けると上手くいく

対策２
→nextのversionは13.4系でないと駄目。。

```console
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

Error occurred prerendering page "/posts". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
```



```json(pakage.json)
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.3.2",
    "@prisma/client": "^5.5.2",
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@types/node": "20.2.5",
    "@types/react": "18.2.7",
    "@types/react-dom": "18.2.4",
    "@types/uuid": "^9.0.1",
    "autoprefixer": "10.4.14",
    "bootstrap": "^5.3.2",
    "encoding": "^0.1.13",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.4",
    "mysql2": "^3.6.2",
    "navigation": "^6.2.0",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.47.0",
    "react-toastify": "^9.1.3",
    "supabase": "^1.106.1",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4",
    "uuid": "^9.0.0",
    "zod": "^3.22.4",
    "zustand": "^4.4.4",
    "next": "13.4.4"
  },
  "devDependencies": {
    "prisma": "^5.5.2"
  }
}
```
# トラブル2 データが更新されない場合


・データをキャッシュから読み込んでいるので、下記のようにキャッシュから取得しないようにする

対策①
```javascript
const response = await fetch("http://localhost:3000/api/posts", {
    cache: "no-store",
  });
```

対策②

スーパーリロードを行う
```
control＋shift＋R
```

その他にも、nextコンフィグでの設定やブラウザのキャッシュをチェック入れるなどもあるので開発に応じて対応する
Copilotでやりやすいこと(ChatGPTと比較して）

　本日初めて「Copilot」に触れていろいろと判明したことが分かったのでここでまとめてみる。

# そもそもCopilotとは？
　Copilotは、マイクロソフト社が2023年9月に発表したChatGPTと同じようなAIである。
 https://adoption.microsoft.com/ja-jp/copilot/

# Copilotの使い方
 下図のように、Edgeの右端のボタンをクリックすると画面が表示される。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/ea934df0-5eac-32f8-e5db-c335056cf23e.png)

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/689f9ed3-77aa-9e74-b9ea-2f1be2c2b5e3.png)
「何でも聞いてください」の部分に文章を入力すれば答えを出してくれる。

# Copilotの優れているところ
 
 　ChatGPTは下図のように使うためにログイン画面が求められる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/fa08bdeb-5951-c5ea-5f71-e4a0ebffa539.png)

　また、一つの質問に対して回答は１つの文章だけで終わり、仮に疑問点があったとしてもまた新たに質問をしなければならない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/74695fe9-e41f-3483-009c-fe4f8b82dcc9.png)

　それに対して、Copilotはログイン不要であること。
 また、下図のように関連した質問の選択肢が表示され、そのどれかを押下すると答えが続くので新しい質問を考える手間が省かれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/003060f0-447d-e8dc-5dbd-952382953021.png)

以上、結構使いやすいのかなと感じた。
【ド文系でもわかる」ABC 326 "326-like-Numbers"

# Atcoder Beginners contest 326 "326-like-Numbers"解説 In　Python
今回は先日のコンテストで出題されたという"326-like-numbers"という問題をPythonで解説していきます。
過去問として解いていくときの参考になれば幸いです。
## 問題
AtcoderのAB問題を解く際にはまず問題を理解することが重要です。
そのため僕なりに省略してみました。
分かりにくかったら下のリンクから問題文を読んでください。

> - 326like numbersと呼ばれる整数がある
> - 326LikeNumberは必ず3桁(裏を返せば326like-numbersは100-999ということになる)
> - 326likeNumberの百の位と十の位をかけた数は一の位になる
> - 例　3*2 = 6 -> 326は326like-number
> - **次の326-like-numberはNが３桁である以上、必ず存在する。**
> - **N以上の整数のうち一番小さい326-like-numberを出力しろ。**

入力方法:
N　

出力:
答え

https://atcoder.jp/contests/abc326/tasks/abc326_b

## アルゴリズム
今回のアルゴリズムを解説していきます。
今回の問題は全探索と言ってすべての可能性を一つずつ試していけば解ける問題です。
下の画像を見てください。
これが326-like-number(以降3ln)です。
![](https://storage.googleapis.com/zenn-user-upload/a73bd2e160c0-20231029.png)

ここで難しいことは考えずに何が正しければ326-like-numberになるのか考えてみると次の画像のような形になります。
![](https://storage.googleapis.com/zenn-user-upload/321ec18cd0bd-20231029.png)

まず上の画像でなにをしているのか説明すると、上の画像はNの各桁をABCという文字に置き換えています。そしてこのABCの内、A*B=Cという式が成り立てば326-like-numbersだといえます。
![](https://storage.googleapis.com/zenn-user-upload/e04fa60056e3-20231029.png)
後のアルゴリズムは簡単で、A*BはCかどうかという質問をNから先の整数に326-like-numberと分かるまで聞いていくだけです。
これをコードに落とし込んでいきます。

## Pythonでの回答例
Pythonで実際にACしたコードです。
コメントもついているので、ぜひ参考程度にお読みください。
```py
# -*- coding: utf-8 -*-
#整数Nを受け取る
N = int(input())
#N→1000まで条件に達するまで繰り返す
for i in range(N,1001):
    if int(str(i)[0]) * int(str(i)[1]) == int(str(i)[2]):
    #数字を文字列に直し、３桁目と２桁目の積が１桁目と等しいかチェック
        print(i)
        exit()
	#Exitを付けてプログラムを終了
    continue
```

# 最後に
今回はABC326のB問題を解説しました。
少しずつほかの問題やC問題などの解説記事を書いていこうと思います。
またスキやコメントも助かります。
最後まで読んでいただきありがとうございました。
良いUIとは何か？ 〜プログラミング初心者の考えるUIデザイン〜

# はじめに
プログラミングを勉強して2か月半ほどです。
プログラミングスクールを卒業し、現在就職活動をしています。

前回の投稿に引き続き、今回はUIについて考えていきます。
良いUIとは何かを自分なりに考えてみました。
初心者が率直に感じた内容を投稿していますので、さらっと読んでいただけると嬉しいです。

`※参考にさせていただいた本 「UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために」 著者：原田秀司`

UIについての説明などは前回の投稿で簡単に説明しています。

https://qiita.com/kenty1116/items/a981b46b3fa0c3fac360

# Let's start!!!
## 良いUIとは何でしょうか？
私が考える良いUIとは、ユーザーがインターフェースを使用する際にストレスを感じないことです。ユーザーがボタンを押すと予想した通りの反応が返ってきて、操作が直感的である状態を指します。
例えば、トップページに戻りたい時に、どこを押せば良いのかがすぐにわかるUIが良いUIだと思います。ユーザーが戸惑うことなく操作できるアプリケーションを開発することが、良いUIデザインにつながります。

## ストレスを感じさせないアプリを作るには
良いUIを実現するためには、人の習慣を理解し、それを反映させる必要があります。日常生活の中で使うものを例に挙げてみましょう。電子レンジを考えてみると、ほとんどの人が「ワット数を設定」→「時間を設定」→「待つ」という手順を理解しています。さらに、ワット数や時間の設定はダイヤル式またはボタン式のいずれかです。このような一般的な習慣に合わせたデザインを採用することが、ユーザーにストレスを感じさせない方法です。逆に、特殊な使い方を要求するデザインはユーザーにとってストレスとなります。
※実際に私が通っていたプログラミングスクールに会った電子レンジは特殊で使い方が分かりづらく、すごくストレスを感じました笑

アプリケーションにも同じ原則が適用されます。トップページに戻る操作を考えてみましょう。ユーザーは通常、ホームボタン（🏠）を使ったり、ヘッダーのロゴをクリックしてトップに戻ることを期待します。ユーザーが馴染みのある操作を提供することで、UIの使いやすさを向上させることができます。

このように、人が習慣的に身につけている動作はあえてデザイン性や見た目を変えい方が、ユーザーにとってストレスのない使いやすいアプリになると言えると思います。

# まとめ
今回、プロムラミング初心者がUIについて考えて語ってみました。
私は『人と違うアプリを作ってみたい』、『オリジナリティが欲しい』とよく思います。
しかし、良いUIを目指す上ではあえて変える必要のないデザインもあるということが分かりました。
今回の投稿でUIについて少し整理ができたと思うので、自分のアプリにも活かしていきたいと思います。

今回も最後まで読んでいただきありがとうございました！！！
Windows11 初期起動（MSアカウント作成なし）

Windows11 をローカルアカウントユーザーとして利用するための設定手順です。

重要なことはインターネットに繋がない状態で設定を行うことです。
インターネット接続すると、MicroSoftアカウントの設定・登録を強制されます。

- スライド1・2枚目：コマンドプロンプトで　`oobe\BypassNRO.cmd` のコマンド実行
- スライド7枚目：インターネットに接続していません　を選択
- スライド8枚目：制限された設定で続行　を選択

上記手順を行うことで、ローカルアカウントとして、端末を使用することができます

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vREVfuZ0UIjCJBb9HRI3F-9KdMH6FCFAsFupO-GwqqiZYOY7mRf57g0tIxuIHRTvzEdycKXl6zEryiE/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="749" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
GitHub の Issue にコメントを書いたら GitHub Actions を利用して Redmine のチケットのコメントを追記

# はじめに

GitHub の Issue にコメントを追記したら Redmine のチケットに説明を記載する方法のメモです。

Redmine のプラグインなどをインストールするのも社内システムだとなかなかハードルが高いので、GitHub 側から Redmine のチケットを操作する方法を検討していました。

GitHub Actions を利用して Issue を作ったときにワークフローを起動させる方法です。

# GitHub Actions の設定
まずは、GitHub Actions の設定 (yml) は以下の通り。
やることは、Redmine の URL と API キーを変更してください。

Issue を作るときに、Issue のタイトルを Redmine のチケット番号にする必要があります。

```
name: "Redmine Add Comment"

on:
  issue_comment:
     types: [created]

jobs:
  sample:
    name: Redmine Ticket Add Comment
    runs-on: ubuntu-latest
    steps:
      - name: Display Issue Title
        run: |
          echo "New Issue Title: ${{ github.event.issue.title }}"
        if: github.event.issue.title

      - name: Display Issue Comment
        run: |
          echo "New Issue Comment: ${{ github.event.comment.body }}"
      
      - run: echo "Hello Redmine"
      - name: add note to redimne issue
        run: curl -X PUT -H "Content-Type:application/json" -H "X-Redmine-API-Key:XXXXXXXXXXXXXXXXXXXXXXXXXXX" -d '{"issue":{"notes":"${{ github.event.issue.html_url }} \r\n ${{ github.event.issue.number }} \r\n ${{ github.event.comment.body }}"}}' https://<redmineURL>/redmine/issues/${{ github.event.issue.title }}.json
```


# GitHub Actions の設定の説明

## ワークフローが起動するタイミング
Issue が作られたときのタイミングで起動させたいので以下の設定にします。
詳細は以下の説明で「アクティビティの種類を使用する」のあたり説明を参考にしてください。



## ワークフローが起動するタイミング
Issue が作られたときのタイミングで起動させたいので以下の設定にします。
詳細は以下の説明で「アクティビティの種類を使用する」のあたり説明を参考にしてください。

https://docs.github.com/ja/actions/using-workflows/workflow-syntax-for-github-actions#on
```
on:
  issue_comment:
     types: [created]
```


## Issue のいろんな内容を取得して表示してみる
以下の例は Issue を作ったときのタイトルとコメントを表示しています。

Issue のイベントタイプの詳細は以下を参考にしてください。
https://docs.github.com/en/rest/overview/issue-event-types?apiVersion=2022-11-28

Issue のコメントが Issue のトリガーではなく「github.event.comment.body」なので注意です。


タイトルの部分に「if: github.event.issue.title」は、タイトルに何か入力されていればというものです。

```
      - name: Display Issue Title
        run: |
          echo "New Issue Title: ${{ github.event.issue.title }}"
        if: github.event.issue.title

      - name: Display Issue Comment
        run: |
          echo "New Issue Comment: ${{ github.event.comment.body }}"
```

## Issue の内容をRedmine のコメントに追加

curl コマンドを利用して Redmine のチケットのコメントを追記します。
Redmine の URL と API キーの部分を修正して下さい。

以下の例ではコメントに Issue の番号や URL も追記させるようにしています。

```
      - name: add note to redimne issue
        run: curl -X PUT -H "Content-Type:application/json" -H "X-Redmine-API-Key:XXXXXXXXXXXXXXXXXXXXXXXXXXX" -d '{"issue":{"notes":"${{ github.event.issue.html_url }} \r\n ${{ github.event.issue.number }} \r\n ${{ github.event.comment.body }}"}}' https://<redmineURL>/issues/${{ github.event.issue.title }}.json
```
Windowsのバッチでプログレスバーもどきの表示をする。

# やりたいこと
Windowsのbatファイルで進捗表示をしてみたいと思いました。
こんな感じの表示をしたいと思っています。
![ProgressBar.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215956/ed82351c-afca-0382-e696-209154707f5e.jpeg)

ざっくりいうと、
1. 文字だけでプログレスバーっぽくする
2. 改行せず、同じ行にとどまる。

がしたくて、同じ行にいかにしてとどまるかというサンプルとなります。
あくまでコンセプトを示しているだけで、そのままプログレスバーとして使えるわけではないかなと思っています。

# コードのサンプル
実行するには下記をANSIエンコード、つまりShiftJISでbatファイルとして下記を保存してください。
```
@echo off

for /f %%a in ('"prompt $E& echo. |cmd /k"') do (set ESC=%%a)

echo 処理を実行しています。

echo __________   0%% %ESC%[1A
timeout 1 >NUL

echo ++________  20%% %ESC%[1A
timeout 1 >NUL

echo ++++______  40%% %ESC%[1A
timeout 1 >NUL

echo ++++++____  60%% %ESC%[1A
timeout 1 >NUL

echo ++++++++__  80%% %ESC%[1A
timeout 1 >NUL

echo ++++++++++  100%% %ESC%[1A
timeout 1 >NUL

echo %ESC%[1A%ESC%[1M処理が完了しました。%ESC%[1B%ESC%[1M%ESC%[1A
pause
```

# 説明
Windowsのコマンドプロンプトの VT100制御文字の機能を使っています。
詳細はMicrosoft社の[コンソールの仮想ターミナルシーケンスのページ](https://learn.microsoft.com/ja-jp/windows/console/console-virtual-terminal-sequences "コンソールの仮想ターミナルシーケンス") をご参照ください。

仮想ターミナルシーケンスの機能を使うとESC文字 (ASCIIコード 0x1Bの制御文字)から始まる文字列でカーソル位置や文字色などを制御することができます。

この際、Windowsバッチでは、ESC文字をどうやって出力するかが問題となります。
今回は prompt命令が$Eという表現でESC文字を出力できることを利用しています。
以下の行で 変数ESCに格納し、その後はこれを %ESC% という表現で使いまわします。
```
for /f %%a in ('"prompt $E& echo. |cmd /k"') do (set ESC=%%a)
```
このほかに次の別解もあります。
```
for /f "usebackq" %%a in (`Powershell -command "$esc=[char]0x1b;Write-Host ${esc}"`) do (set ESC=%%a)
```

各進捗表示は、こんな感じの組み合わせです。
```
echo ++________  20%% %ESC%[1A
timeout 1 >NUL
```

進捗率の数字の%は、変数を示す%と区別するために、%%という表現でエスケープします。
ESC[1A は1行上に移動を意味します。 

:::note info
1行上に移動しますが、echo命令が自動的に改行するので、結果として同じ行にとどまります。今回のポイントはここです。
:::

その後、遅い処理をしていることをイメージして、1秒待機しています。
本来ですと、ここになりかやりたい処理がくるのだと思います。

最後のところで、最初に出した「処理を実行しています」を「処理が完了しました」に上書きしています。
ESC[1Aで カーソルを1行上に移動して、ESC[1M でその行の表示をクリアしています。
そのあと、処理が完了しました。　を表示することで、上書きを実現しています。

最後にESC[1B で次の行、つまり ++++の行に移動し ESC[1M で表示クリア　そして ESC[1A で前の行、つまり 処理が完了しました　の行に戻ります。 
そのあと、ECHOが自動的に改行するので、結果として、++++の行にカーソルはとどまり、ここに pause命令のメッセージが表示されます。
wslでelixir その86

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
Poison、やってみた。

# サンプルコード

```
Poison.encode!(%{"age" => 27, "name" => "Devin Torres"})
|> IO.inspect()

Poison.decode!(~s({"name": "Devin Torres", "age": 27}))
|> IO.inspect()

defmodule Person do
  @derive [Poison.Encoder]
  defstruct [:name, :age]
end

defmodule Main do
  def main do
    john = %Person{name: "Johe Ruith", age: 37}
    IO.puts(john.name)
    IO.puts(john.age)
    Poison.encode!(%Person{name: "Devin Torres", age: 27})
    |> IO.inspect()
    Poison.decode!(~s({"name": "Devin Torres", "age": 27}), as: %Person{})
    |> IO.inspect()
    Poison.decode!(~s({"people": [{"name": "Devin Torres", "age": 27}]}), as: %{"people" => [%Person{}]})
    |> IO.inspect()
  end
end

Main.main

```

# 実行結果


```
Johe Ruith
37
"{\"name\":\"Devin Torres\",\"age\":27}"
%Person{name: "Devin Torres", age: 27}
%{"people" => [%Person{name: "Devin Torres", age: 27}]}
```

以上。
paiza.ioでelixir その258

# 概要
paiza.ioでelixirやってみた。
defstruct、やってみた。


# サンプルコード

```
defmodule User do
  defstruct [:name, :age]
end


#%User{name: "John"}

defmodule Main do
  def main do
    john = %User{name: "John"}
    IO.puts(john.name)
    IO.puts(john.age)
  end
end

Main.main


```

# 実行結果

```
John
```

# 成果物

https://paiza.io/projects/9icHhIDGnciVIDbsH2IQuA


以上
GitHub の Issue を作ったら GitHub Actions を利用して Redmine のチケットのコメントを追記

# はじめに

GitHub の Issue を作ったら Redmine のチケットに説明を記載する方法のメモです。

Redmine のプラグインなどをインストールするのも社内システムだとなかなかハードルが高いので、GitHub 側から Redmine のチケットを操作する方法を検討していました。

GitHub Actions を利用して Issue を作ったときにワークフローを起動させる方法です。

# GitHub Actions の設定
まずは、GitHub Actions の設定 (yml) は以下の通り。
やることは、Redmine の URL と API キーを変更してください。

Issue を作るときに、Issue のタイトルを Redmine のチケット番号にする必要があります。

```
name: "Redmine Add Comment"

on:
  issues:
    types:
      - opened

jobs:
  sample:
    name: Hello Redmine Ticket Add Comment
    runs-on: ubuntu-latest 
    steps:
      - name: Display Issue Title
        run: |
          echo "New Issue Title: ${{ github.event.issue.title }}"
        if: github.event.issue.title

      - name: Display Issue Comment
        run: |
          echo "New Issue Comment: ${{ github.event.issue.body }}"
      
      - name: add note to redimne issue
        run: curl -X PUT -H "Content-Type:application/json" -H "X-Redmine-API-Key:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" -d '{"issue":{"notes":"${{ github.event.issue.body }}"}}' https://<RedmineURL>/issues/${{ github.event.issue.title }}.json
```

# GitHub Actions の設定の説明

## ワークフローが起動するタイミング
Issue が作られたときのタイミングで起動させたいので以下の設定にします。
詳細は以下の説明で「アクティビティの種類を使用する」のあたり説明を参考にしてください。

https://docs.github.com/ja/actions/using-workflows/workflow-syntax-for-github-actions#on

```
on:
  issues:
    types:
      - opened
```

## Issue のいろんな内容を取得して表示してみる
以下の例は Issue を作ったときのタイトルと内容を取得しています。

Issue のイベントタイプの詳細は以下を参考にしてください。
https://docs.github.com/en/rest/overview/issue-event-types?apiVersion=2022-11-28

タイトルの部分に「if: github.event.issue.title」は、タイトルに何か入力されていればというものです。

```
      - name: Display Issue Title
        run: |
          echo "New Issue Title: ${{ github.event.issue.title }}"
        if: github.event.issue.title

      - name: Display Issue Comment
        run: |
          echo "New Issue Comment: ${{ github.event.issue.body }}"
```

## Issue の内容をRedmine のコメントに追加

curl コマンドを利用して Redmine のチケットのコメントを追記します。
Redmine の URL と API キーの部分を修正して下さい。


```
     - name: add note to redimne issue
        run: curl -X PUT -H "Content-Type:application/json" -H "X-Redmine-API-Key:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" -d '{"issue":{"notes":"${{ github.event.issue.body }}"}}' https://<RedmineURL>/issues/${{ github.event.issue.title }}.json
```