OmniAICreator/Qiita-1.07M huggingface dataset:
IntelliJ の Tool Window にファイルの更新日時を表示する


以前誰かに Tool Window のファイル名横に、ファイルの更新日時が表示されていることを指摘され、プラグインか何か？？って聞かれたけど答えられず・・・。
ずっとモヤモヤしてたけど、ようやく犯人を見つけたので書き残しておきます。

# 結論
IntelliJ のメニューバーから
「View」>「Appearance」>「Details in Tree View」にチェックを入れる

# おわりに
プラグインでもなんでもなくて、IntelliJ の表示設定でした<(_ _*)>
IntelliJ を使いこなせていない感が丸出しですが(;^ω^)

Chi va piano va sano e va lontano.
これは最近お気に入りの言葉です。
ゆっくり歩むものは、着実に遠くまで行ける。
この記事も小さな１歩だと信じることにします。
AIがエンジニアの仕事を奪う！？についての違和感を深堀する

## はじめに

生成AIによってITエンジニアの仕事がなくなる？コードを書かなくてもよくなる？という話をSNSで多く見かけるようになりました。
[GitHub Copilot Workspaceのプレビュー](https://github.blog/jp/2024-04-30-github-copilot-workspace/)の発表もあり、この流れはさらに加速するのではないかと思っています。

しかし、**AIがエンジニアの仕事を奪う、というテーマに説明できない違和感を覚える**のです。ITエンジニアの身からすると確かに自分の仕事がなくなるのは困るのですが、そういったことではなく、**何かを見落としているようなそんな不安が付きまとう**のです。

今回の記事では、この違和感について自分なりに考察した結果を共有したいと思います。


## ポイント1：入力に自然言語を用いることが本当に最適なのか？

そもそも自然言語とは私たち人対人のコミュニケーションで利用されるツールです。常に新しい言葉が生まれたり、時代とともに言葉の使い方も変化していきます。私たち人が使いやすいように進化していくのが自然言語です。

次にプログラミング言語は、対PCで用いられる言語で、対PC用に最適化されています。もともとアセンブリ言語というより機械語に近いプログラミング言語がありましたが、人間にとっては理解が難しく開発難易度が高かったため、高級言語（高水準言語）という形で現在のプログラミング言語が発展してきました。

ここで一つ疑問が生まれます。**自然言語とプログラミング言語はそもそも利用目的が異なるため、自然言語でシステムを作成することが本当に最適解なのか**、と。

![Snag_197dc52b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/370362b1-56f5-2089-8fa9-9fbb9f0010a4.png)

図で表現すると以下のような形になると思います。

![Snag_198d70f2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/be6c566f-c13b-024c-a23e-7e9b69bd6617.png)

**低水準言語から高水準言語への移行が成功した理由としては、低水準言語を知らなくてもシステムが作成できるレベルまで進化したから**、だと考えています。

つまり、**AIによるシステム作成が成功するためには、下図のようにプログラミング言語を知らなくてもシステムの作成ができる状態まで行く必要がある**、と考えています。

![Snag_19918755.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/72f46373-6397-e879-922f-3425271da4ec.png)

私たちITエンジニアはこれまでの経験でデバッグが非常に難易度が高い作業であることを心に刻まれていると思います。顧客の環境では発生しているが、自分の環境では不具合を再現できない、など単純なエラーメッセージを解決するだけがデバッグではありません。**問題解決のためには、ネットワーク、OS、アプリケーションのバージョンなどあらゆるレイヤーの内容を疑い、ひとつづつ検証して可能性をつぶしていく作業が必要であり、これが本当にAIでできるのか？**、というのが疑念の根幹にあるのではないでしょうか。

つまり、**すべてをAIに任せることができないのであれば、結局のところプログラミング言語の知識は必要であり、AIが仕事を奪うまでいかず、一部の作業の効率化にとどまるのではないか？** という感想を皆さん抱いているのではないでしょうか。

## ポイント2：かゆいところに手が届かない

WYSIWYG (What You See Is What You Get)という単語を聞いたことがある人も多いと思います。これは簡単に言うと、例えばMicrosoft Wordなどで選択した部分の文字サイズを変える、文字色を変えることができる、ということです。
この考え自体は当たり前になっているのであえて意識する人はいないと思いますが、自然言語で指示を出すということがWYSIWYGの考え方に反しているように感じます。つまり、**GUIからCUI(CLI)に回帰しているのではないか？と感じる**のです。例えば自然言語でシステムを作成したとして、この部分の文字サイズをもう少し大きくしてほしいと感じた場合どう指示を出しますか？「ユーザー一覧画面の○○コンポーネント内のXXの説明個所の文章を2pt大きくしてください」と指示しますか？
もし、この指示で該当箇所が修正されなかった場合、結局コードを自分で修正する未来が容易に想像できます。

自然言語で指示を出してシステムを作成するユースケースにおいて、**ある程度の大枠の指示は自然言語が向いているかもしれませんが、詳細な修正は自然言語は向いていない**、と感じます。
この根本的な原因としては**現状のAIには思考が抜け落ちている**から、と感じます。

例えば、ある入力(○○の部分の文字サイズを大きくしてほしい)があったときに、私たち人間はいろいろなことを考えます。

![Snag_19b30d9c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/58dc2cff-9bb8-430a-f785-af7e44e4aec1.png)

しかし、AIは原則入力のこと以上はしません。例えば、文字サイズを大きくしてほしいという入力があれば、文字サイズを大きくすることしかしません。つまり、**現状のAIは言われたことしかしないポンコツ社員(しかも入力が限定されているので、図示しながらここをこう変えてください、といった指示も出せない)** という位置づけではないでしょうか。(少し論理が飛躍しているので異論は認めます)

LLMはあくまでテキスト生成モデルであるため、思考能力はありません。(ただし、Agent機能などに代表されるように、AIによる思考・判断を自動化しようという動きはあります)
**初回のシステム作成においてはある程度AIによる自動化が進んだとしても、そのシステムの保守までAIがしてくれないのであれば、他人が作ったよくわからないシステムを人間が保守する、という地獄のような未来が待っています**。


## 最後に

機械学習が流行ったときも透明性、説明できるAIが求められました。今回の生成AIも結局のことろ中身はブラックボックス(過去に黒魔術と揶揄されたことも)となっており、結局一部の作業しか任せることができないという着地に落ち着きそうな気がしています。
MictrosoftがCopilot(副操縦士)というネーミングで展開しているのはなかなかうまいなと思いました。現状のAIはどこまで行っても人を置き換えることはできないが、人をサポートする役割である、ということでしょう。
オーバーライド

## はじめに

継承についてまとめる・二回目

### オーバーライドとは

スーパークラスで定義された機能を他のクラスで再定義すること。

#### 参考コード

```php:Person.php
class Person
{
    public $firstName;
    public $lastName;

    public function __construct($firstName, $lastName)
    {
        $this->firstName = $firstName;
        $this->lastName = $lastName;
    }

    public function show()
    {
        print "<p>私の名前は{$this->lastName}{$this->firstName}です。</p>";
    }
}
```

```php:BusinessPerson.php
require_once 'Person.php';

class BusinessPerson extends Person
{
    public function work(): void
    {
        print "<p>{$this->lastName}{$this->firstName}は働いています。</p>";
    }
}
```

```php:EliteBusinessPerson.php
require_once 'BusinessPerson.php';

class EliteBusinessPerson extends BusinessPerson
{
    public function work(): void
    {
        print "<p>{$this->lastName}{$this->firstName}はバリバリ働いています。</p>";
    }
}
```

```php:override1.php
require_once 'EliteBusinessPerson.php';

$bp = new EliteBusinessPerson('佐藤', '次郎');
$bp->work(); // 佐藤次郎はバリバリ働いています
$bp->show(); // 私の名前は佐藤次郎です
```

`Person` → `BusinessPerson` → `EliteBusinessPerson`
の順で継承している

`work`メソッドを`EliteBusinessPerson`クラスで上書きしている。
`show`メソッドは上書きしていないので`Person`クラスで定義された`show`メソッドが実行されている

### parentキーワード

スーパークラスを呼び出す。

#### 参考コード１

スーパークラスの機能を流用しつつ、サブクラス側で独自の機能を追加している

```php:HetareBusinessPerson.php
require_once 'BusinessPerson.php';

class HetareBusinessPerson extends BusinessPerson
{
    public function work(): void
    {
        parent::work();
        print "ただしボチボチと"; // 独自の処理
    }
}
```

```php:override2.php
require_once 'EliteBusinessPerson.php';

$bp = new EliteBusinessPerson('鈴木', '太郎');
$bp->work(); // 鈴木太郎はバリバリ働いています。ただしボチボチと
```

#### 参考コード２

スーパークラスのコンストラクターを流用しながらサブクラスのコンストラクターを定義している

```php:Foreigner.php
requier_once 'Person.php'

class Foreigner
{
    public string $middleName;

    public function __construct($firstName, $middleName, $lastName)
    {
        parent::__construct($firstName, $lastName);
        $this->middleName = $middleName;
    }

    public function show()
    {
        print "<p>私の名前は{$this->lastName}{$this->middleName}{$this->firstName}です。</p>";
    }
}
```

```php:override3.php
require_once 'Foreigner.php';

$bp = new Foreigner('鈴木', 'ヨーダ','太郎');
$bp->show(); // 私の名前は鈴木ヨーダ太郎です
```
[SQL]１月の時だけ、前年と当年を取得したい

## やりたいこと
WITH句を利用して１月の時だけ、前年と当年を取得したい。

## SQL
``` sql
-- Db2 SQL
WITH DATES(RES1,RES2) AS (
 VALUES
 ('CURRENT_DATE', CURRENT DATE),
 ('ONE_MONTHS_AGO', CURRENT DATE - 1 MONTH)
)
SELECT DISTINCT YEAR(RES2) FROM DATES
```
## 実行結果
例）2024年1月に実行したら

DATESテーブル
| RES2 |
|:-:|
| 2023  |
| 2024  |

例）2024年2月に実行したら

DATESテーブル
| RES2 |
|:-:|
| 2024  |

## 使用例
・取得した年をIN句で別テーブルの抽出条件にする。
Traceroute(MTR)の活用方法

# Tracerouteって？

ざっくりというと、通信相手までの経路を調査するときに使用するコマンド、
どこでルーティングされているかという事を調査する事ができる。
なので、L2レベルで通信している機器はここでは表示されません。ブリッジとかは分からないが、ルータ、スイッチ（L3層）なら分かります。
Unix(Linux,mac)で使用可能です。

コマンドにすると、こんな感じ。

```
traceroute 【IPアドレスまたはドメイン名】 
```

オプションは色々あります。
- -4
    - IPv4を使う。
- -6
    - IPv6を使う
- -i
    - インターフェースを指定する。
- -n
    - アドレス表記にする。
などなど。。だが、基本的には
```
traceroute 8.8.8.8
```
という形で指定する事がほとんどだと思う。

実行結果として、以下のように表示される。
```
[jst-dito@sv0066 ~]$ traceroute 8.8.8.8
traceroute to 8.8.8.8 (8.8.8.8), 30 hops max, 60 byte packets
 1  _gateway (192.168.162.1)  1.114 ms  1.049 ms  2.287 ms
 2  ドメイン名（サンプルのIP）  7.309 ms  7.288 ms  7.233 ms
 3  ドメイン名2（サンプルのIP2） 10.667 ms   10.600 ms
 4  ドメイン名3（サンプルのIP3） 7.801 ms   7.791 ms
 5  ドメイン名4 (サンプルのIP4) 7.733 ms   7.713 ms
 以下略...
 
 数字  dns.google (8.8.8.8)  7.039 ms  7.081 ms  7.056 ms
```
左側の数字の所に、どのルータを経由しているかが記載されており、そのIPが横に（で記載されている。）
複数の組み合わせのIPを持つ場合は、同じ列に表示される。

# 実際の運用での使用ケース
特定の機器から通信でエラーが出た際の、障害箇所の特定として使用する。
ゲートウェイを出てからエラーがあるのか、出る前にエラーがあるのかの有無だけでも、
自社設備の問題か否かを区別する事ができる。

# MTRコマンド

MTRは、mytracerouteの略である。
これは、`tracerouteとpingを組み合わせて、ネットワークパスの健全性を測定するものです。`

tracerouteにはpingのロス率や各速度などを記載できていないが、mtrは合わせて一覧として見る事ができる。

https://www.cloudflare.com/ja-jp/learning/network-layer/what-is-mtr/

実行結果は、以下のような形になる。
これは、そのまま実行すると、pingのように常時実行し続けるものになる。基本構文は以下。
```
mtr 8.8.8.8
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/985b378a-85e2-1553-26d0-2f3b92094afd.png)

また、以下の記事にあるが、障害が発生したときは、パケットロスの部分のパーセンテージが上昇する。そこを確認する事でどの経路に問題があるかを確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/99b362bb-e7b3-ca19-0fc7-3832369a833a.png)

https://www.cloudflare.com/ja-jp/learning/network-layer/what-is-mtr/

## レポート表示
mtrの結果をテキスト形式でログとして見ておきたいケースがある、そういった場合は、以下のようにレポートモードで実行する事で記録に残せる。
```
mtr -r -c 【実行回数】【IPアドレス】 > 【テキスト名】
```

コマンドにすると以下の通り。
```
 mtr -r -c 5 8.8.8.8 > mtrreport
```

# MTRをZabbixで確認する。

Zabbixのテンプレートで、mtrを実装することが可能。
ホスト名のインターフェースの欄に、mtrの宛先のIPアドレスを入れると、
Zabbixサーバから目的のIPまでをtracerouteしてくれる。

https://github.com/xenadmin/zabbix-templates/blob/master/zabbix-net-mtr/README.md

これの良い所は、通常のmtrだとどのタイミングでpingが切れたかの時間を測る事ができないが、
Zabbixの場合はグラフでも表示されるため、障害があったときに後から確認ができる事である。
aruduino 久々に使ってはまったこと対策


# Ticker.h not found や WebServer.h not found

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100425/0fe3cd54-41f2-fd6d-f9b3-90f889272bbd.png)

のように、M5Stick-Cのように正しく設定されていないかも。

# exec: "python": executable file not found in $PATH ボードM5Stick-Cに対するコンパイル時にエラーが発生しました。

```
sudo ln -s /opt/homebrew/bin/python3 /usr/local/bin/python
```

```~/Library/Arduino15/packages/m5stack/hardware/esp32/2.0.0/platform.txt
tools.esptool_py.network_cmd=python3 "{runtime.platform.path}/tools/espota.py"
tools.esptool_py.network_cmd.windows="{runtime.platform.path}/tools/espota.exe"

tools.gen_esp32part.cmd=python3 "{runtime.platform.path}/tools/gen_esp32part.py"
```
のように、python -> python3に変更も奥の手としては覚えておきましょう・・・
[Db2]個人的によく使うコマンド

間が空くと忘れてしまうのでメモ。

以下、[]内は適宜変更。

## ＞Db2 SQL

``` sql
--oracleでいうdual表
SELECT * FROM SYSIBM.SYSDUMMY1
```

``` sql
--テーブル定義コピー
CREATE TABLE [TABLE_NAME_BK] LIKE [TABLE_NAME] COMPRESS YES IN [TABLE_SPACE]
```

``` sql
--データコピー
INSERT INTO [TABLE_NAME_BK] SELECT * FROM [TABLE_NAME] WITH UR
```

``` sql
--TRUNCATE文
TRUNCATE TABLE [TABLE_NAME] IMMEDIATE
```

``` sql
--テーブル、ビュー一覧
SELECT TABNAME FROM SYSCAT.TABLES
WHERE TYPE IN('T','V') AND TABSCHEMA =[SCHEMA_NAME] 
ORDER BY TABSCHEMA, TABNAME
```

## ＞Db2 コマンド

``` sh
--接続
db2 "CONNECT TO [DB_NAME] USER [USER_ID] USING [PASSWORD]"
```

``` sh
--sql実行
db2 -x "SELECT CURRENT DATE FROM SYSIBM.SYSDUMMY1"
-x ヘッダー（列名）なし出力
```

``` sh
--sqlファイル実行
db2 -tvf /home/work/insert_test.sql
-t セミコロンでSQL終了
-v 実行結果表示
-f ファイル実行
```

``` sh
--再編成
db2 "REORG TABLE [TABLE_NAME]"
```

``` sh
--統計情報更新
db2 "RUNSTATS ON TABLE [TABLE_NAME] WITH DISTRIBUTION AND DETAILED INDEXES ALL"
```

``` sh
--切断
db2 "CONNECT RESET"
※データベース切断だけ

db2 "TERMINATE"
※データベース切断とdb2プロセスも終了
```

``` sh
--db2リアルタイムモニター
db2top -d [DB_NAME]
```
【初心者向け】Azure OpenAI Serviceを使ってみた

![小見出しを追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3783554/e95dd94a-9e46-444f-78da-31f952fe9658.png)
Azure OpenAI Serviceの記事ってなかなか探してもないですよね。本日の記事は、Azure OpenAI Serviceを利用してPythonでチャットボットを作成する方法についての解説記事です。この記事は、初心者向けに、ステップバイステップで手順を追いやすく、また具体的なコード例も提供します。

## ステップ1: Azure OpenAIリソースの作成

最初の一歩として、Azureポータルにアクセスしましょう。ログイン後、「リソースの作成」ボタンをクリックし、カテゴリ「AI + Machine Learning」から「OpenAI Service」を選択してください。画面の指示に従って設定を行い、「レビュー + 作成」ボタンでリソースを作成します。これで、AzureでOpenAIを使う準備が完了です！

## ステップ2: APIキーの取得

リソース作成後は、「キーとエンドポイント」セクションに進み、表示されたAPIキーをコピーします。このキーが、今後APIにアクセスする際の重要な鍵となります。

## ステップ3: Pythonコードの準備

次に、以下のPythonコードを用意しましょう。このコードは、AzureのAPIキーを使ってOpenAIのGPT-3.5-turboモデルに質問を投げ、回答を得るためのものです。

```python
import openai

# Azure OpenAIのAPIキーとエンドポイントを設定
openai.api_key = "your_azure_openai_api_key"
endpoint = "your_azure_openai_endpoint"

# GPT-3.5-turboモデルを使用して質問に回答
response = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[
        {"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": "自己紹介してください。"}
    ],
    temperature=0,
    api_base=endpoint  # Azure OpenAIのエンドポイントを指定
)

print(response["choices"][0]["message"]["content"])
```

このコードスニペットでは、実際のAPIキーとエンドポイントを設定することを忘れないでください。

## ステップ4: ライブラリのインストール

最後に、必要なライブラリをインストールしましょう。

```bash
pip install --quiet openai
```

これで全ての準備が整いました！Pythonを使用して、Azure OpenAI Serviceを通じて自分だけのチャットボットを作成することができます。

この記事がAzure OpenAI Serviceを使ったチャットボット作成の第一歩になれば幸いです。
GitLab17へのアップデート準備


GitLabのバージョン17が5/16にリリース予定となっています

https://about.gitlab.com/upcoming-releases/

それに向けて情報収集や準備をしようと思います。

# 重要な変更

https://docs.gitlab.com/ee/update/versions/gitlab_17_changes.html


### ランナーの登録方法の変更

古いランナーの登録方法が完全に排除されるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/5e747f0a-8826-81c3-8d11-d986edf20938.png)

DeepLに翻訳してもらいました

> GitLab 16.0では、ランナーの登録にランナー認証トークンを使用する新しいランナー作成ワークフローを導入しました。登録トークンを使うレガシーワークフローはGitLab 17.0ではデフォルトで無効になり、GitLab 18.0では削除される予定です。登録トークンがまだ使われている場合、GitLab 17.0にアップグレードするとランナー登録に失敗します。

「ランナー登録に失敗する」って書いてあるけど、登録済みのランナーは使えるのかな？🤔


### Postgresのバージョン

Linuxパッケージを利用している場合はPostgres14である必要があるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/6f3d8a2e-1e5d-4288-b44a-9bcbd2555a57.png)



# 事前準備：16系の最新にアップデート

毎回段階的なアップデートを求められるので、事前に16系の最新に上げておきます。
試しに一気に16系最新までアップデートしようとしたら以下のようなメッセージが出ました

```
gitlab         | It seems you are upgrading from 16.3.7 to 16.11.1.
gitlab         | It is required to upgrade to the latest 16.7.x version first before proceeding.
gitlab         | Please follow the upgrade documentation at https://docs.gitlab.com/ee/update/#upgrade-paths
```

メッセージに書いてあるとおりに段階的にアップデートしていきます。

最終的に、以下の順でアップデートしました

16.0
　↓
16.3.7
　↓
16.7.7
　↓
16.11.1
BERTの使い方を練習する

## はじめに

最近、AIや自然言語処理について勉強をしている。LLMについての理解を深めるため、まずはBERTの使い方を学ぼうと思い、以下の記事を参考に動かしてみる。

https://qiita.com/takubb/items/fd972f0ac3dba909c293

## 環境

言語はPython。使用ツールはGoogle Colaboratory。

## Google ColabのGPU環境を設定

Google ColabのGPU環境が必要だそうなので、このサイトを参考に設定しました。

https://sci-by-py.com/hpc/google-colab/

GPUは12時間まで無料で連続使用できるそうです。

**ランタイム**のタブから**ランタイムのタイプを変更**をクリックしてT4 GPUを選びます。

## コードを試してみる

まずは記事のコードを一通りコピペして試してみると……エラーが出ますね。

To authenticate with the Hugging Face Hub, create a token in your settings tab (https://huggingface.co/settings/tokens), set it as secret in your Google Colab and restart your session.

どうやらHugging Faceでトークンを作る必要があるみたいです。

私はまだHugging Faceに登録していなかったので、こちらの記事を参考に登録して、トークンを取得しました。

https://zenn.dev/protoout/articles/73-hugging-face-setup

## Google Colabのシークレットにトークンを追加

エラーの文章を読むと

The secret `HF_TOKEN` does not exist in your Colab secrets.

と書いてありました。

調べてみたらGoogle Colabのシークレット機能を使えばいいみたいなので

https://qiita.com/suzuki_sh/items/4817e3423f2989bbb9ed

この記事を参考に Colab secretsにHF_TOKENを追加してみます。

左メニューの鍵アイコンをクリックし、 `HF_TOKEN` という名前で Hugging Face のアクセストークンをシークレットに登録し、「ノートブックからのアクセス」を ON にします。

## リポジトリURLの修正

これで進めると、またエラーが出ました。

Repository Not Found
とのことなので調べると、どうやら元のコードで使っていたリポジトリのURLが変わっているようですね。

参考にした記事が4年前のものなので、当時とは色々と状況が変わっているのでしょう。

リポジトリのURLにtohoku-nlp/を追加して

```python
tokenizer = BertJapaneseTokenizer.from_pretrained('tohoku-nlp/bert-base-japanese-whole-word-masking')
```

にして試すと、進みました。

## fugashiとIPAdicのインストール

またエラーが出たので調べていくと……

fugashiとIPAdicをインストールする必要があるようなので

```python
!pip install fugashi
!pip install ipadic
```

を実行してからもう一回進めます。

## コードの修正

次はAttributeError: 'str' object has no attribute 'backward’

のエラーが出ました。

Teratailに同様の質問があったので確認してコードを修正。

https://teratail.com/questions/375965

それから、numpyのインポートしてなくてエラーが出たので

そこも修正して進めると……

動きました！！

|  | logit_0 | logit_1 | pred_label | true_label |
| --- | --- | --- | --- | --- |
| 0 | 4.465312 | -5.010775 | 0 | 0 |
| 1 | -4.279079 | 5.095233 | 1 | 1 |
| 2 | -4.622071 | 5.218770 | 1 | 1 |
| 3 | -4.371633 | 5.159783 | 1 | 1 |
| 4 | -4.620034 | 5.224734 | 1 | 1 |

予測と正解が合ってますね。
どうやらうまく動かせたようです。

## おわりに

初めてBERTを使ってみましたが、参考記事と状況が変わっているところもあって苦労しました。
今後も学習を頑張っていきたいです。
ゼロから作るディープラーニング②自然言語処理

ゼロから作るディープラーニングシリーズを借りてきて読んでいるのですが、例えばシリーズ2巻目の自然言語処理だとhttps://github.com/oreilly-japan/deep-learning-from-scratch-2
にアクセスすると書籍に載っているコード集をダウンロードできます。

コードを実行しようとすると、コード集にある
~~~
import sys
sys.path.append('..')
~~~
という部分が原因でコードを実行できない状況になりました。('')内の..はchatGPTに聞いたら親ディレクトリを参照するためのものだそうですが、なぜかうまくいかないんですね。それでpathを次の画像のようにしてやることでうまく実行できました。![スクリーンショット (40).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3722873/e4ce1c89-093d-2ab1-11e7-c3b0d32e9add.png)
画面に収まりきらないですが、
~~~
C:\\Users\\Owner\\Desktop\\deep\\deep-learning-from-scratch-2-master\\deep-learning-from-scratch-2-master
~~~
とデスクトップにdeepというフォルダを作り、その中にgithubからダウンロードしたzipファイルを展開したものを入れて、VScodeで開いて実行しました。それでこのようなpathになっています。第７章あたりでこのやり方で実行できなかったファイルが１つありましたけど、それ以外はおおむねうまく動いたのでよかったです。
![スクリーンショット (48).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3722873/588e22bb-2772-2e65-1fe5-6dca5e3e841b.png)
sys.path.append('..')がこのままだと次のようにエラーになった例を画像で紹介します。![スクリーンショット (46).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3722873/5bd522ce-500c-2be1-34fa-e91b8e6efe72.png)
画面下の出力でNo module named 'dataset'と表示されています。
Qiita記事をストックする時にカテゴリーを絞り込み検索できるクローム拡張機能を作りました🔍

![chrome-extension-qiita-stock-incremental-search.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1455073/6f2b129e-4679-57c5-5a8c-07355c14a92f.png)

# はじめに
プログラミング学習中の[@kat_log](https://twitter.com/kat__log "Twitter")と申します。

Qiita記事をストックする時に、カテゴリーが多くなると対象のカテゴリーを探すのが大変になってきますよね…！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1455073/f0e7ca91-7316-26c4-bb0f-0e017319cdef.png)

そこで、ストック時にカテゴリーを**絞り込み検索**できる拡張機能を作成したため共有です！

# インストール
https://chromewebstore.google.com/detail/qiita-%E3%82%B9%E3%83%88%E3%83%83%E3%82%AF-%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%A1%E3%83%B3%E3%82%BF%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%81/kgkghjdpjkjedpalgimneellgbobadnl

# 使い方
インストールすると、Qiita記事のストックのポップアップ内に、絞り込みフォームが表示されます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1455073/0daf22b2-2c69-526f-01bb-5c6e63d94735.png)

後は検索するだけです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1455073/48099bea-9a31-8ae5-eeb0-c53d77c5facf.png)

# アップデート情報
:::note info
・ページが完全に読み込まれる前でも絞り込みフォームが表示されるようになりました！
・絞り込みフォームが表示されると自動でフォームをアクティブ状態とするようになりました！
:::

# ソースコード
https://github.com/kat-log/chrome-extension-qiita-stock-incremental-search

## AIすごいです
クローム拡張機能の作り方からコーディングなど、CopilotやClaudeなどのAIにかなり助けられました…！
自力だけでは到底できなかったと思うのでAI本当すごいです…！

# 公式実装について
Qiitaのディスカッションに、インクリメンタルサーチのスレッドもありまして、公式実装されるかもですが、それまでの繋ぎとして使ってみていただけたらと思います😂

https://github.com/increments/qiita-discussions/discussions/435

# おわりに
お読みいただきありがとうございました！
どなたかのためになれば嬉しいです。
Qiita記事のストックライフを快適にしましょう～🙌

# 参考

https://qiita.com/RyBB/items/32b2a7b879f21b3edefc

https://qiita.com/ren_ichinose/items/15b5a156ae43ea2b3425
[Cloud Storage API(V2)] Javaでバケットの保持ポリシーをロックする

Cloud Storage API V2(Java)を使用して、
Cloud Storageのバケットの保持ポリシーをロックする方法
についてご紹介します。

**バケット保持ポリシーとロック**
保持ポリシーとは、バケット内にオブジェクトがアップロードされた後、
そのオブジェクトが削除・変更されないように期間を設定することができる機能です。

保持ポリシーを「ロック」することにより、すべてのユーザーが
設定した保持ポリシーの保持期間を短縮/削除できないようにします。

「ロック」した状態の保持ポリシーを削除したい場合は、
バケット自体を削除するしかありません。
ただし、バケット内にオブジェクトが存在する場合、
保持ポリシーを満たした期間外にならなければ削除することもできません。

:::note info
APIを利用する環境の準備から始める場合や、コードを実行する際は、
[⧉[Cloud Storage API(V2)] JavaでCloud Storageを使う](https://qiita.com/doran/items/2a5f7ef8070fd5b8c94d)
を参照ください。
:::

|No|||目次|
|---|---|---|---|
|1|||[保持ポリシーをロック](#1-保持ポリシーをロック)|
||1||[スコープ](#11-スコープ)|
||2||[実行](#12-実行)|
||3||[レスポンスの内容](#13-レスポンスの内容)|

## 1. 保持ポリシーをロック
指定したバケットの保持ポリシーをロックします。

### 1.1. スコープ
このAPIを実行するには、以下のいずれかのスコープを指定してください。
```
StorageScopes.CLOUD_PLATFORM
StorageScopes.DEVSTORAGE_FULL_CONTROL
```
[⧉[Cloud Storage API(V2)] JavaでCloud Storageを使う(2.2 Storageインスタンスを取得)](https://qiita.com/doran/items/2a5f7ef8070fd5b8c94d#22-storageインスタンスを取得)
でスコープを指定してください。

### 1.2. 実行
バケットIDとメタ世代番号(metageneration)は必須です。
メタ世代番号は、[⧉BucketのgetMetageneration()](https://qiita.com/doran/items/356962d5c905ab88f7b4#bucket)で取得できます。

```java
public static void main(String[] args) throws Exception{
    Storage storage = getStorage();
    Storage.Buckets buckets = storage.buckets();
    
    Storage.Buckets.LockRetentionPolicy lock = buckets.lockRetentionPolicy("バケットID",メタ世代番号);
    
    Bucket res = lock.execute();
    System.out.println(res);
}
```
#### 1.2.1. HTTPリクエスト
POST:　https:\//storage.googleapis.com/storage/v1/b/{バケットID}/lockRetentionPolicy
が実行されます。

#### 1.2.2. クエリパラメータ
クエリパラメータはありません。

#### 1.2.3. リクエストボディ
リクエストボディはありません。

### 1.3. レスポンスの内容
#### Bucket
[⧉[Cloud Storage API(V2)] Javaでバケットを取得する(Bucket)](https://qiita.com/doran/items/356962d5c905ab88f7b4#bucket)と同じです。
<br>
<br>
おしまい。。
ウェルカム メールのまとめ


+ [カスタマー コミュニティ ログイン ユーザーの標準プロファイルを複製し、カスタム プロファイルを作成しました。そのため、ウェルカム メールはカスタム コミュニティ プロファイルを持つユーザーには送信されませんが、標準の顧客コミュニティ ログインユーザー メールを持つユーザーに送信されます。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007XEzapSAD)
スクラム開発ってなんだっけ？　スクラム入門

## はじめに
現代のソフトウェア開発では、変化のスピードと市場の要求に迅速に対応するため、アジャイル開発が主流となっています。その中でも「スクラム開発」は、柔軟性と生産性を高める強力なフレームワークとして広く採用されています。この記事では、スクラム開発の基本から、なぜそれが現代の開発環境に適しているのかを解説します。

## スクラム開発の基本
スクラム開発はアジャイル開発の一手法で、プロジェクトを短いサイクル（スプリント）に分けて進めます。各スプリントは通常1〜4週間で、その期間中にチームは製品の実用的な機能を完成させます。これにより、頻繁に製品を市場に投入し、リアルタイムでユーザーフィードバックを取り入れることが可能になります。

### スクラムのキーコンポーネント
- **プロダクトバックログ**: 製品の要求事項が優先順位付けされたリスト。
- **スプリントプランニング**: スプリントの目標とスプリントバックログを決定する計画会議。
- **デイリースクラム**: 日々の進捗を確認し、問題を共有する短いスタンドアップミーティング。
- **スプリントレビュー**: スプリントの成果をレビューし、フィードバックを集める会議。
- **スプリントレトロスペクティブ**: スプリントを振り返り、次回の改善点を議論する会議。

## スクラムの3本柱: 透明性、検査、適応
スクラム開発の成功は、透明性、検査、適応の3つの柱に依存しています。透明性によりチーム全体が現状を正確に把握し、検査を通じて進捗状況を評価し、必要に応じてプロセスや製品を適応させます。この繰り返しによって、プロジェクトは常に最適な方向に進むことができます。

## スクラムの価値: 確約、集中、公開、尊敬、勇気
- 確約： チームメンバーは共有の目標とスプリントの目的に対して全力を尽くすことを約束します。これは、プロジェクトの成功に対する個々の責任とチームとしての責任を意味します。
- 集中：チームは与えられたタスクと目標に集中することが求められます。これにより、スプリントの目標達成に向けて効率的に作業を進めることができます。
- 公開：チーム内外での作業や課題についてオープンであることが求められます。これにより、進捗、リスク、問題点を共有し、改善の機会を最大限に活用することが可能になります。
- 尊敬：各チームメンバーは他のすべての人を尊重し、彼らが尊重されることを期待しています。これは、個々の違いを認め、チーム内の調和を保つために不可欠です。
- 勇気：チームメンバーは、正しいことをするための勇気を持ち合わせています。これには、困難な問題に取り組む勇気や、製品の品質を損なうことなく機能を実装する勇気が含まれます。

## スクラムと他のアジャイルメソッドとの比較
スクラムはその構造性において、カンバンやエクストリームプログラミング（XP）と区別されます。カンバンは作業の流れを可視化し、制約を明確にすることに注力し、XPは技術的優れたプラクティスを強調し、コードの品質向上に焦点を当てています。これらの違いを理解することで、プロジェクトのニーズに最適なアプローチを選択することができます。

## よく使用する用語
1. **スクラム**
    - アジャイル開発の一種で、短期間の反復的な作業サイクル（スプリント）を通じて製品を開発するフレームワークです。
2. **スプリント**
    - スクラムでの基本的な作業単位で、通常1〜4週間の固定期間で行われる作業サイクルです。
3. **プロダクトバックログ**
    - 製品の開発に必要な機能、要件、改善、修正が優先順位付けされたリストとして整理されています。
4. **スプリントバックログ**
    - 特定のスプリントで取り組むタスクやユーザーストーリーがリストアップされ、チームがスプリント目標を達成するために取り組むべき項目が明確にされます。
5. **デイリースクラム（デイリースタンドアップ）**
    - スプリント期間中毎日行われる短い会議で、チームメンバーが何をしたか、何をする予定か、何か障害はあるかを共有します。
6. **スクラムマスター**
    - スクラムチームをサポートし、プロセスを促進する役割。障害の除去やスクラムの実践の改善を担当します。
7. **プロダクトオーナー**
    - プロダクトバックログを管理し、製品のビジョンと要件をチームに伝える責任者です。ステークホルダーとチーム間の橋渡しも行います。
8. **バーンダウンチャート**
    - スプリントの進捗を可視化するグラフで、残された作業量を時間経過とともに示します。
9. **スプリントレビュー**
    - スプリントの終わりに行われる会議で、開発された製品の機能をデモンストレーションし、ステークホルダーからのフィードバックを受け取ります。
10. **スプリントレトロスペクティブ**
    - スプリントの終わりにチームが集まり、何がうまく行ったか、何が改善されるべきかを振り返る会議です

## まとめ
スクラム開発は、変化が激しい市場環境や複雑なプロジェクト要求に柔軟に対応するための効果的な方法です。このフレームワークを採用することで、チームはより迅速に製品を市場に提供し、継続的な改善を実現することが可能です。皆さんのプロジェクトにスクラムがどのように役立つか、是非検討してみてください。
optunaでlgb.Datasetが使えないエラーの対処法

# 概要

optunaでlightGBMを使う際に、

```jsx
----> 3 lgb.Dataset

AttributeError: module 'optuna_integration.lightgbm' has no attribute 'Dataset'
```

```jsx
      2 from optuna.integration import lightgbm as lgb
----> 3 lgb.Dataset

/usr/local/lib/python3.10/dist-packages/optuna/integration/lightgbm.py in __getattr__(self, name)
     29 
     30     def __getattr__(self, name: str) -> Any:
---> 31         return lgb.__dict__[name]
     32 
     33 

KeyError: 'Dataset'
```

こういったエラーへの対処法。

# 結論

- lightGBMをインストールする
    
    `pip install lightGBM`
    

# 原因

optunaの内部でlightgbm.Datasetを使っているが依存関係で指定されていない。

lightgbmがimportできてなかったら、lgb.Datasetにもimportされず、使えない。

https://github.com/optuna/optuna-integration/blob/main/optuna_integration/lightgbm.py

```python
with try_import() as _imports:
    import lightgbm as lgb

# Attach lightgbm API.
if _imports.is_successful():
    # To pass tests/lightgbm_tuner_tests/test_optimize.py.
    from lightgbm import Dataset
    from optuna_integration._lightgbm_tuner import LightGBMTuner
    from optuna_integration._lightgbm_tuner import LightGBMTunerCV

```

Google ColabではlightGBMが元からインストールされており、この問題にぶつかることはなかった。基本的にOptunaでlightGBmを使う際は、lightGBMが入っている環境だと思うが、初めてのリモート環境などでは注意が必要。

# パッケージ管理はどうなってる

ここから下はエラーとは関係なく、知識として。

optunaは、tomlファイルでパッケージ管理を行っている。(requirements.txtより細かい設定ができるもの。)

https://github.com/optuna/optuna-integration/blob/main/pyproject.toml

`[project.optional-dependencies]`のtestの部分に書いてあるパッケージも一緒にインストールする際は、

`!pip install optuna-integration[test]` みたいにインストールできる

今回は、標準でlightGBMの依存関係がなかった。おそらく、optuna自体は他のモデルにも使えるために、lightgbmが必須ではないっぽい。でも、使うときにいい感じのエラーは出せないものかな。。。

パッケージ管理にはいろんな方法がある。以下はその例、まとめ。

https://speakerdeck.com/vaaaaanquish/pythonnopatukeziguan-li-nozhong-ji-zhe-nobi-wochao-eru-stapy-number-98?slide=9

https://qiita.com/ieiringoo/items/4bef4fc9975803b08671
仮想ディスプレイソフトIddSampleDriverが便利

## はじめに

私は今回初めてQiitaを使用して記事を書いているので、おかしな点があるかもしれないが、大目に見てほしい。また、間違ったところがあればコメントで伝えてほしい。

## この記事について

[Chrome リモート デスクトップ](https://remotedesktop.google.com)を使用して別のPCやスマホから自宅にあるノートPCを操作しようとしたのだが、画面を閉じていたため画面の更新がされていない（？）状態になってしまった。[このページ](https://lil.la/archives/3983 "カバーを閉じた状態のWindowsノートPCにChromeリモートデスクトップで接続すると画面が更新されない時の対処法 | 技術屋さんの日記帳")によるとダミーのHDMIプラグを使用することで解決できるようだが、それぐらいソフトウェアで解決できそうだと思い調べたところ、[IddSampleDriver](https://github.com/ge9/IddSampleDriver)というものを見つけ、使用したところ思った通りに機能したため、紹介しようと思った。

## [IddSampleDriver](https://github.com/ge9/IddSampleDriver)とは

仮想のディスプレイを使用するためのソフトで、[IddSampleDriver](https://github.com/roshkins/IddSampleDriver)をもとに仮想ディスプレイの個数や解像度を簡単に変更できるようにしたものらしい。今回は変更が加えられたほうを使用する。

## インストール

README.mdを読んだところ、インストール方法が2つあるらしいが、今回は、推奨されている[Scoop](https://scoop.sh)を使用した方法でインストールする。

### Scoopのインストール

[ここ](https://github.com/ScoopInstaller/Install/tree/f212421eb2fa5f937cd1bcfa3495910283cee81c?tab=readme-ov-file#typical-installation)で紹介されている方法でインストールするした。なお、この記事で使用しているコマンドはすべて管理者権限のあるPowerShell 7.4.2で実行した。PowerShellについては解説している方がたくさんいるため、説明を省略する。

```powershell:PowerShellプロンプト
irm get.scoop.sh | iex
scoop help
```

一行目でscoopをインストールし、2行目でインストールができているか確認した。ヘルプが正しく表示されたらインストールできているはず。

### [IddSampleDriver](https://github.com/ge9/IddSampleDriver)のインストール

あとはREADME.mdに書かれているコマンドをそのまま実行した。

```powershell:PowerShellプロンプト
scoop bucket add extras
scoop bucket add nonportable
scoop install iddsampledriver-ge9-np -g
```

最後のコマンドを実行するとすぐに、ディスプレイに接続したときのwinodwsのアニメーション（一時的に画面が小さくなるやつ）が表示され、仮想ディスプレイが使えるようになった。

## 設定変更

私のノートパソコンでカバーを閉じると、閉じている間は仮想ディスプレイがメインのディスプレイになる。そのため、初期設定の小さな仮想ディスプレイだと、開いたときにウィンドウのサイズが小さくなってしまう問題があったため、仮想ディスプレイのサイズをノートパソコンのディスプレイと同じにすることで解決した。

インストールすると`C:\IddSampleDriver`に`option.txt`が追加される。このテキストファイルの内容を変更することで、仮想ディスプレイの個数や解像度を変更できる。一行目には接続する仮想ディスプレイの数を入力し、2行目以降に、横の長さ,縦の長さ,フレームレートを入力するようなので、私は以下のようにした。

```text:option.txt
1
1920, 1200, 60
```

保存した後にPCを再起動すると設定が反映された。

## 最後に

私の環境だと問題なく使用できた。同じリモートデスクトップの問題で困っている人は試してみてもいいと思う。なお、私はこのソフトについて詳しくはないため、この方法を試す場合は必ず自己責任で行ってほしい。

## 参考させていただいたページ

- https://turgenev.cloudfree.jp/wiki/Windows%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E4%BB%AE%E6%83%B3%E7%9A%84%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4
- https://github.com/ge9/IddSampleDriver
- https://github.com/ScoopInstaller/Install
- https://lil.la/archives/3983
【初心者向け】PythonとStreamlitで始める、簡単ウェブアプリ開発！

皆さんこんにちは！GWはいかがお過ごしでしょうか？
本日は、PythonとStreamlitで始める、簡単ウェブアプリ開発をしていきます！
### まずは、Streamlitを使えるようにしましょう！

```python
import streamlit as st
```

これで、Streamlitライブラリをプログラムで使えるようになりました！🎉 Streamlitって何？って思ったあなた、これはPythonで書かれたインタラクティブなウェブアプリをサクサク作れる魔法のようなライブラリなんですよ。

### 音声録音機能、パソコンに入れてみませんか？

```python
from audio_recorder_streamlit import audio_recorder
```

ここで、「audio_recorder_streamlit」ライブラリから`audio_recorder`関数を呼び出しています。これで、ブラウザ上で簡単に音声を録音できるようになるんです！

### 録音ボタンをポチッと表示！

```python
audio_bytes = audio_recorder()
```

この一行で、ウェブページに録音ボタンが現れます。使ってみてくださいね！録音すると、その音声データがバイト形式で`audio_bytes`変数に保存されます。

### 録音したもの、保存しちゃいましょう！

```python
if st.button("Save Recording"):
    with open("recorded_audio.wav", "wb") as f:
        f.write(audio_bytes)
    st.success("Recording saved!")
```

ここでは、「Save Recording」というボタンが登場！これをクリックすると、録音データが`recorded_audio.wav`というファイルに保存されます。保存が成功すると、「Recording saved!」と表示されますよ。



このコードを使うと、誰でもブラウザ上で音声を録音し、保存することができます。特にStreamlitの魅力は、ウェブアプリとしてのインターフェースをとても簡単に作れることにありますね。

さあ、あなたもこのコードを試してみて、自分のアプリを作ってみませんか？楽しいですよ！

また、PythonやStreamlitについてさらに学びたい方は、[こちらのリソース](https://www.streamlit.io/)をチェックしてみてください。

■宣伝■
　note,X,Instagramでも情報発信してます！
　note: https://note.com/kii_genai
　X：https://twitter.com/KII437465127175
　Instagram：https://www.instagram.com/kiigenai/
Amazon RDS for MySQL の踏み台サーバーセットアップ備忘録

プライベートなAmazon RDS for MySQL の踏み台サーバーセットアップ手順のメモ

### 踏み台サーバーセットアップ手順
* AWSコンソールの Amazon RDS ページにて対象のDBインスタンスを選択
* 右上のアクションメニュー　`Set up EC2 connection` をクリック
* 既存のインスタンスを使用するか、もしくは　`Create EC2 instance` にて新規作成
* 作成済みの場合は踏み台サーバー(EC2 instance)を指定してセットアップ完了。未作成の場合は以下作成手順

#### 踏み台サーバーの新規作成
* Network Setting セクションにてパラメーターを指定
    * VPC : vpc-xxxx  (MySQLの)
    * Subnet : subnet-xxxx (サブネットのzoneは対象DBのavailability zoneであることが望ましい)
    * Key pair : 自分のKey pairがなければ作成。RSAでOK。プライベートキーはローカルに保管した上で作成した Key pairを指定
    * その他の設定はデフォルトのままで　`Launch instance`にて起動


### 踏み台サーバーSSH経由で MySQL接続
* 前提として作成手順のkey pair設定にて自身のPublic keyが登録されていること
```
echo "<AUTHORIZED KEY WHOLE LINE>" >> ~/.ssh/authorized_keys
```
* 登録済みの場合は `~/.ssh/authorized_keys`に追加されている
* 自身のローカルには踏み台サーバーのSSH設定を追加。前述の登録済みのpublic keyに対応するprivate key(pem) を設定

`~/.ssh/config`

```
Host mybastion
  HostName XX.XXX.XXX.XX
  User ec2-user
  IdentityFile ~/.ssh/chikashi-ec2-test.pem
```

* 正常に設定されている場合は SSH接続が成功

```
$ ssh mybastion
```

```
$ mysql -h mydb-test.xxx.ap-northeast-1.rds.amazonaws.com -P 3306 -u admin -p
```

* 認証が成功するとSQL実行可能

```
MySQL [(none)]> select count(*) from mydb.Foo
    -> ;
+----------+
| count(*) |
+----------+
|       33 |
+----------+
```
【個人開発】Hono + Cloudflare WorkersでSVG生成APIを作る

# 序

ここ最近社内向けのプレゼン資料を作る機会が多くて、処理フローや構成図を書くときに、ちょっとしたファイルアイコンが作れるといいなと思ってました。

先月以下のLTイベントを視聴して、[Hono](https://hono.dev/)や[Cloudflare Workers](https://www.cloudflare.com/ja-jp/developer-platform/workers/)面白そうだなと思ったので、このスタックで作ってみました。

https://findy.connpass.com/event/314170/

- このスタックが今回のユースケースのための技術選定としてベターかどうかはまた別のお話

## 作った物

### Live Editor
https://kedama-t.github.io/file-icon-generator/

:::note warn
生成したSVGファイルについては自由に使っていただいて構いませんが、Workersの使用回数が嵩むと困るので、一度作ったら保存して使ってもらえると嬉しいです。
- ~~環境設計がまずいのでは~~
:::

### リポジトリ
https://github.com/kedama-t/file-icon-generator

## 作れる物
こんな感じのファイルアイコンがSVGで作れます。
![sample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524683/5de3851e-5376-63d3-613d-5410b860a96b.png)
![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524683/b95781e7-6d67-cd48-8140-65e7a4618f12.png)
![sample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524683/4ae944f7-874e-8755-8af1-cc94c8ddc8d6.png)

### ポイント
ぶっちゃけゴリゴリSVGをコーディングしただけで、大したプログラミング的ポイントはないです。
でもSVGでお絵描き、思ったより楽しいです。

エンドポイントは１つしかなくて、クエリ文字列で装飾していくようにしています。
- あとあとオプション追加したときに既存のURLが壊れにくいようにしたかった

```jsx
app.get("/api", async (c) => {
  const {
    text = "File",
    color = "2563eb",
    font = "Menlo,Consolas",
    badge = "none",
    type = "text",
  } = c.req.query();
  c.status(200);
  c.header("Content-Type", "image/svg+xml");
  const body = (
    <SvgBase>
      {getFileImage(type as FileType)}
      <FileTypeBadge text={text} badgeColor={`#${color}`} font={font} />
      {getBadge(badge.toLowerCase() as BadgeType)}
    </SvgBase>
  ).toString();

  return c.body(body);
});
```
`Content-Type`を`image/svg+xml`にして、`body`には`JSX.Element`を`toString()`した物を突っ込んだらいけました。

## 今後
必要に応じてファイルタイプの追加とかをしようかなと思ってます。
エラーハンドリングとか、Live Editorをもうちょっとちゃんとアプリ化して、一度作ったものは静的にホストされるようにするような改修も追々。
- Live EditorはReactをCDNからインポートして構築したものに[new.css](https://newcss.net/)を当てて、html一枚でそれっぽく動くようにしました
    - 突貫工事もいいとこなので、マジでなんとかしたい

## 終わりに
HonoとCloudFlareを使った開発体験はすごく良かったし、もっといろんなことをやってみたいと思えるスタックでした。
`pnpm create hono`から`npm run deploy`までのフローで詰まるところが一切なく、完全に実装に集中できました。
`wrangler`を使ったローカルでの動作確認もサクサクです。

現在、[Remix](https://remix.run/)を使って何か作りたいなぁと画策しており、CloudFlareはデプロイ先の良い選択肢になりそうです。

## その他
情報処理技術者試験の非公式バッジを作る、類似のAPIを以前作りましたので、ついでに載せておきます。

https://github.com/kedama-t/Unofficial-IPA-Exam-Badges

https://qiita.com/kedama-t/items/ec11053603895ae727a0
PHP array_rand()は配列の値ではなく配列のキーを返すので注意

## 概要

PHPの組み込み関数である`array_rand()`の仕様を勘違いして一瞬詰まったので簡単にまとめておく。

## array_rand()は引数の配列のキーをランダムで返す

言葉で説明するより見ていただいたほうが早い気がするのでまずはコードを掲載する。
「あ、い、う」をそれぞれランダムに返してほしくて下記のようなコードを書いた

```php
<?php

$array = [
    'あ',
    'い',
    'う',
];

echo array_rand($array);
```

これを実行しても「0~2」のintが得られるだけで「あ、い、う」をランダムで返してくれない。

これは`array_rand()`の仕様に「引数の配列の**インデックス**をランダムに返す」ためである。

なので「あ、い、う」をそれぞれランダムに得たいなら下記のように記載する必要がある。

```php
<?php

$array = [
    'あ',
    'い',
    'う',
];

$randIndex = array_rand($array);

echo $array[$randIndex];
```
プロジェクトマネジメント

# プロジェクトマネジメント
### プロジェクトとは？
決められた期間内に目的を達成すること。タスクを細かく設定して進捗を図りプロジェクトを成功に導く。プロジェクト期間中にタスクの進捗が遅れるリスクも考慮しながら進める。
### Fisibility Study
プロジェクトを始める前に、実際にそのプロジェクトが実現可能か、コストはどれくらいかかるのか事前調査を行う。
### PMBOK（Project Management Body of Knowledge)
##５Porcess &　１０Knowledge
### ５Process 
立ち上げ→計画→実行→監視→コントロール→クロージング
PDCAサイクルを回してプロジェクトを常に管理実行、アクションを行って改善をしていく。
### 10Knowledge
総合管理：ｐの全体を管理
スコープ管理：作業範囲を決めて管理すること。
スケジュール管理：細かくスケジュールを管理すること
コスト管理：予算ないに収める管理
品質管理：品質を担保すること
資源管理：必要なリソース、人材を集めそれらを管理
コミュニケーション管理：チーム、ステークホルダーとコミュニケーションを図る。
リスク管理：P期間内で発生するリスクを管理する（ネガティブリスクも許容して管理する）
調達管理：調達やそれに発生する契約を管理する。
ステークホルダー：利害関係者全員を管理すること。プロジェクトの意思決定や成果に大きな影響を受ける対象を指します。

## コスト管理
ファンクションポイント法：機能の数と難易度でプロジェクトを分割して、各項目ごとにポイントをつける事。
例）
Aシステム
簡単：５ポイント
簡単：５ポイント
普通：１０ポイント
むずい：１５ポイント
合計は３５ポイントになる。そのポイントをもとに金額を算出する。

## 開発工程
人月＝１人が１ヶ月こなす作業
人時＝１時間あたりの作業
人日＝１日あたりの作業
例）
４人月の作業をする場合
１人の時：４ヶ月かかる。２人の時：２ヶ月かかる。

## スケジュール管理
スケジュールを管理する方法：ガントチャート、アローダイアグラム
アローダイアグラム
①プロジェクト全体の作業日数
②クリティカルパス
③最早結合：最も早く作業ができる日
④最遅結合：プロジェクトが計画通りに終了するための、最も遅く作業を開始できる日数のこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779552/2715ffc3-6e40-70c7-7f9a-56a1344b0688.png)

## ITサービスマネジメント
日々のサービスと中途的サービスがある

### 日々のサービス
日々の企業、お客さんからのお問い合わせ、（コールセンターのようなイメージ）
###  中長期
①サービレベルの管理
・どれくらいのサービスを保つか
Service level agreement
・会社がサービス内容を合意する。
②可用性管理
③キャパシティ管理
ネットワークシステムの容量、性能を管理
    →容量・性能が足りないとサービスレベルが保てない、反対にあまるとコストがかかりすぎる。
Jetson AGX Orinの起動がおかしくなった時の経験

## 概要
- Jetson AGX Orin での起動がおかしくなった件での復旧作業の記録です。
- fstabに記載していたmicroSDカード(ext4) が壊れたことが原因だった。
- シリアルコンソールでログインできる状況にしてfstabを修正することで復旧した。

## 発端もしくはトラブルの発覚
- git が[GIT fatal: failed to read object](https://stackoverflow.com/questions/44248256/git-fatal-failed-to-read-object)といい出した。
- Jetson AGX Orinをreboot した。
- shutdown したのち、boot 開始画面がディスプレイに表示された。
- いつものようにその画面は消えて黒い画面になる。
- ファンが元気よく回りだす。
- １分以上待っていても、ファンが元気よく回り続けていて、止まる様子がない。
- LinuxPCから、そのOrinにむけてping を実施するが、
- `ping: orinのマシン名: 名前またはサービスが不明です` の表示が出る。
- wifiは起動していないようだ。

## 調査
- [Jetson AGX ORIN won’t boot](https://forums.developer.nvidia.com/t/jetson-agx-orin-wont-boot/265055)

シリアルコンソールを接続して、立ち上がる状況を確認する方法はある。
[NVIDIA Jetson Orin - Serial Console](https://developer.ridgerun.com/wiki/index.php/NVIDIA_Jetson_Orin/In_Board/Getting_in_Board/Serial_Console)
#### microUSB port を使う場合
- microUSB -USB のケーブルを用意する
- [AGX orin のmicroUSB の接続ポート](https://developer.ridgerun.com/wiki/images/thumb/c/c6/Orin-usb-typeB-.jpg/800px-Orin-usb-typeB-.jpg)にケーブルを接続する。
- USBケーブルのTypeA側はUbuntuPC側に接続する。
- UbuntuPC側でminicomをインストールする。
```
sudo apt install minicom
```

それを使ってシリアルコンソールと通信をおこなう。
問題を生じてるJetson AGX Orinの電源が入っている状況で実施します。
```
 minicom -D /dev/ttyACM0 -8 -b 115200
```


#### USB type C port を使う場合
上記の資料に記載があるので読んでください。

### シリアルコンソールに感謝！
上記のシリアルコンソールでの通信が成立している状況で、
'#' のプロンプトが表示されるのを待ちます。
表示されない場合には、最悪、電源を入れ直します。
（電源を強制的に抜くのはほんとはしたくない。）
電源を入れた後に、たくさんの表示が流れたあとで、'#' のプロンプトが表示されるようになります。

```
root@orin:~#                                                            
root@orin:~# df -h                                                      
Filesystem      Size  Used Avail Use% Mounted on                                
/dev/mmcblk0p1   57G   34G   21G  63% /                                         
none             31G     0   31G   0% /dev                                      
tmpfs            31G     0   31G   0% /dev/shm                                  
tmpfs           6.2G   19M  6.2G   1% /run                                      
tmpfs           5.0M  4.0K  5.0M   1% /run/lock                                 
tmpfs            31G     0   31G   0% /sys/fs/cgroup                            
root@orin:~#                                                            

```

## 仮復旧
- minicom　で入ったシリアルコンソールは、その後rootでの作業を受け付けてくれる。
- cd /etc
- nano fstab
で問題のあるmicroSDカードのディスクをmount 対象から除外する。
該当行の冒頭に# を入力する。編集終了。
- shutdown -r now を実行する。

## fstab修正後の起動
- 問題のMicroSDカードを抜いておく。
- 通常の起動が開始し、ディスプレイが接続してあれば、X-window でのlogin画面が起動し、通常のloginができた。
## microSDで保存していたデータ
- githubで管理しているデータのlocal repogitory
- dockerが利用するcacheデータ
- このように、ローカルディスクから失われてもなんとかなるデータだけにしておいたのは幸いだった。

## 新規microSD カードの入れ直し
- （とりあえず記載を省略）
並列Lispでたらいまわしをした話（５）

# 竹内関数　考察
前の記事で並列Lispでたらいまわしをしたことをご紹介しました。予想していたことですが、３つの引数を並列で計算しても実行時間が3分の1になることはありません。第2引数の処理量が多いのです。


次の結果をご覧ください。(tarai 12 6 0) を単純に3分割したとしてもそれほど効率は上がらないのです。


![bandicam 2024-05-03 09-25-59-570.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33927/adf3a235-a966-db05-f9a3-73c23a6b83ca.jpeg)





なにかもっと並列を活かす方法はないだろうか？考えてみました。現在のCPUはマルチコア数が増加しつつあり、ゲーム用パソコンでは20コアのCPUを採用しているものもあります。もっとこのコア数を活かせないだろうか？使っていない待機中のプロセスを活かす方法について考えてみました。


# マルチコアをフル活用
前述のように空いているコアに計算を並列分割すればいいのですが、どうやってそれを行うのか？です。Easy-ISLispではUnixのforkとPipeを利用して子Lispを起動し、親Lispとはパイプを利用して通信をしています。親子は通信ができるのですが、子である兄弟同士は直接に通信ができません。

![マルチプロセス１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33927/815dc20e-b274-f849-7442-706078b34654.png)



# プロトコル
さて、どうしたものか？メモリ共有とかソケットを使ったら兄弟が通信できるかな？などと考えていました。ふっと気がつきました、「親を経由して他の子に通信したならば！」　ChatGPTに相談したらそれは良さそうな方法とのこと。


![マルチプロセス２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33927/8c47ffb5-34f4-9cf4-7a7d-f4224b9b9a01.png)




プロトコルを決めておいて子Lispがさらに計算を分割して親Lisp経由で空いている子Lispに並列計算をさせます。英語で仕事を引き継がせることを「hand over]と言うそうです。(mp-hand fun arg1 ... arg2)という並列構文を用意してやったらどうだろう？と構想を練っているところです。これなら従来のpipeを使ったプロセス間通信で実行することができます。楽しくなってきました。



# 実装
Easy-ISLispはOSSです。BSD2ライセンスで無償提供しています。お楽しみください。

https://github.com/sasagawa888/eisl
iptablesの設定を再起動しても保持する

iptablesの設定は再起動すると初期化されてしまいます．どうすれば再起動しても以前の設定が保持（再反映）できるでしょうか？

### iptableの設定の保持

まず，iptablesに設定を読み込みます．
```
sudo iptables-restore < rules
```
iptablesの設定を自動的にソフトをインストールします．
```
sudo apt install iptables-persistent
```
インストールの途中で，現在の設定を保存するかどうか聞いてくるのでyesと答えましょう．ここで保存したiptableの設定が，再起動したとき使用されます．
以上で終わりです．

## iptableの設定を変える場合

iptablesの設定を変える場合は，新たなルールをiptableに読み込みます．
```
sudo iptables-restore < rules
```
このまま再起動すると，以前のiptables-persistentに保存した設定が再現されてしまいます．次のコマンドを入力し，新たな設定を保存します．
```
sudo /sbin/netfilter-persistent save
```
これで，再起動時に新たな設定が反映されます．
WSL2のUbuntuにperfをインストールする

# 問題

WSL2のUbuntuにはperfがインストールされておらず、実行すると以下のような警告が表示されます。

```
$ perf
WARNING: perf not found for kernel 5.15.133.1-microsoft

  You may need to install the following packages for this specific kernel:
    linux-tools-5.15.133.1-microsoft-standard-WSL2
    linux-cloud-tools-5.15.133.1-microsoft-standard-WSL2

  You may also want to install one of the following packages to keep up to date:
    linux-tools-standard-WSL2
    linux-cloud-tools-standard-WSL2
```

もっとも、この警告のとおりにパッケージをインストールしようとすると、以下のようなエラーになり、インストールできません。

```
$ sudo apt-get install linux-tools-standard-WSL2 linux-cloud-tools-standard-WSL2
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています
状態情報を読み取っています... 完了
E: パッケージ linux-tools-standard-WSL2 が見つかりません
E: パッケージ linux-cloud-tools-standard-WSL2 が見つかりません
```

# 解決策

https://github.com/microsoft/WSL2-Linux-Kernel

WSL2のUbuntuにperfコマンドをインストールしたい場合、上記のレポジトリから自前でビルドする必要があります。

```bash
# 依存ライブラリのインストール
sudo apt install build-essential flex bison dwarves libssl-dev libelf-dev

# レポジトリのクローン
git clone https://github.com/microsoft/WSL2-Linux-Kernel --depth 1

# 対象ディレクトリへ移動
cd WSL2-Linux-Kernel/tools/perf

# ビルド実行
make -j8

# perfコマンドをコピー
sudo cp perf /usr/local/bin
```

# 環境情報

```
C:\>wsl --version
WSL バージョン: 2.0.14.0
カーネル バージョン: 5.15.133.1-1
WSLg バージョン: 1.0.59
MSRDC バージョン: 1.2.4677
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22631.3296
```

```
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.6 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.6 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal
```
TeXでFile `calc.sty' not found.エラーになるときの対処法

# 環境
Windows 11
TeXLive 2024

# 症状
LuaLaTeXを使ってmathtoolsを含むtexファイルをコンパイルしようとしたらこのエラーになった．

# 対処法
toolsパッケージをインストールする。
そして`C:\texlive\2024\texmf-dist\source\latex`フォルダの中にtoolsフォルダができて、中にファイルもあれば成功。
たまにうまくいかないときもあったが、そのときはリポジトリをJapanのうちの他のに変えてインストールしなおすとうまくいった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092391/7cd51d59-6c32-9c8b-4193-2a18b3755b73.png)
Azure Functions (Node Typescript) のtsconfigにpathsのエイリアス設定を行ったメモ

## 概要
Azure FunctionsのTypescriptでもエイリアス使いたい。
結論から言うと、[tsc-alias](https://www.npmjs.com/package/tsc-alias)を追加で導入する必要があった。

## ソースコード

```diff:tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
    "strict": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    } 
  }
}
```

## エラー
tscしただけでは、下記のようなエラーが発生する。パスの解決に失敗している。

```
Error: Worker was unable to load entry point "dist/src/functions/credentials.js": Cannot find module '@/lib/azure-storage.js'
```

## 対応
[stack over flow](https://stackoverflow.com/questions/76872587/node-js-typescript-azure-function-cannot-import-with-absolute-path-minimal-re)で似たようなことをしている人がいた。

[tsc-alias](https://www.npmjs.com/package/tsc-alias)を使う方法の模様。同様なことを実現するのに、[tsconfig-paths](https://www.npmjs.com/package/tsconfig-paths)もあるようだが、tsc-aliasのほうがシンプルそうなのでこちらを試す。

## 修正

```diff:api/package.json
{
  "scripts": {
-    "build": "tsc",
+    "build": "tsc && tsc-alias",
    // 略
  },
  "devDependencies": {
    "@redocly/cli": "^1.12.0",
    "@types/node": "^20.x",
    "rimraf": "^5.0.5",
+    "tsc-alias": "^1.8.8",
    "typescript": "^5.4.5"
  },
  "main": "dist/src/functions/*.js"
}

```

## 結果
実行したところ、エラーなく実行されることを確認できた。

## 参考
[stack over flow - node-js-typescript-azure-function-cannot-import-with-absolute-path-minimal-re](https://stackoverflow.com/questions/76872587/node-js-typescript-azure-function-cannot-import-with-absolute-path-minimal-re)
[stack over flow - how-can-i-use-a-custom-path-for-azure-function-app-functions](https://stackoverflow.com/questions/75943227/how-can-i-use-a-custom-path-for-azure-function-app-functions)
[Nxモノレポ上でAzure Functionsをビルド・デプロイできるようにするメモ](https://zenn.dev/naas/scraps/60f944146eacd9)
[issues - "@azure/functions-core" can't be resolved by bundlers](https://github.com/Azure/azure-functions-nodejs-library/issues/201)
GWにスキルアップのモチベーションを維持するコツ

## モチベーションを維持するコツ

モチベーションを維持することは、確かに難しいですよね。しかし、いくつかのコツを実践することで、より長く高いモチベーションを保ちやすくなります。

**1. 自分が納得できる目標を持つ**

まず大切なのは、自分が納得できる目標を持つことです。「お金を稼ぎたい」「有名になりたい」といった短期的な目標も良いですが、できればそれらに加えて、自分が本当に成し遂げたいこと、社会に貢献したいことを目標にしましょう。目標が明確であればあるほど、困難な状況でも努力を続けることができます。

**2. 小さな成功体験を積み重ねる**

大きな目標を達成するには、長い時間がかかります。そのため、モチベーションを維持するためには、小さな成功体験を積み重ねることが重要です。目標達成までの道のりをいくつかの小さなステップに分け、それぞれのステップをクリアしていくことで、達成感を得ることができます。

**3. 自分に合った環境を作る**

モチベーションを維持するためには、自分が働きやすい環境を作ることも大切です。周囲の人間関係が良好であれば、仕事も楽しくなります。また、集中できる環境を作ることも重要です。

**4. オンとオフの切り替えをしっかりと行う**

仕事ばかりでは、モチベーションを維持することはできません。オンとオフの切り替えをしっかりと行い、休息を取ることも大切です。趣味を楽しんだり、旅行に出かけたりすることで、リフレッシュすることができます。

**5. 自分を責めない**

誰でも、モチベーションが低下してしまうことはあります。そのような時は、自分を責めるのではなく、どうすればモチベーションを高められるかを考えることが大切です。

**モチベーションは、一時的なものではありません。** 

**しかし、努力することで、誰でも高いモチベーションを維持することができます。** 上記のコツを参考に、自分に合った方法を見つけてみてください。

**あなたなら、きっと目標を達成することができます。**
【React】scriptタグを埋め込んで動かしたい！！

# はじめに
先日、4月頭にリリースしたサービスの広告審査が通りました。「よっしゃ、実装するぞ！」と意気込んだものの、対象画面内に`script`タグを埋め込む必要があり、どうやら単純に実装しても動かないようでした。
自分なりに色々調べて、`ChatGPT`や`Bard`に聞いたりしてうまいこと動いたのでメモとして残します。あまり必要としないかもしれませんが、同じく悩んでいる方の力になればと思います。

# ちょっと宣伝
審査が通ったサービスというのがこちらです。

https://wikimiru.com/

wikimiru（ウィキミル）という、時間経過でランダムに流れるWikipediaの情報を眺めることができるサービスです。

**本当にただそれだけです。**

通勤時間などに使ってもらえると嬉しいです（個人的には歯磨きをしながらよく見ています）！

# 実装
本題に入ります。
私の場合、以下のような構成にする必要がありました。

```html
<div id="test">
  <script src="url" async></script>
  /* 実際はconsoleではありません。 */
  <script>console.log("動いた！")</script>
</div>
```

実現するためには以下のようにする必要がありました。

```React
function Banner() {
  useEffect(() => {
    const div = document.getElementById("test");

    const script1 = document.createElement("script");
    script1.src = "url";
    script1.async = true;
    div.appendChild(script1);

    const script2 = document.createElement("script");
    script2.textContent = 'console.log("動いた！")';
    div.appendChild(script2);

    return () => {
      div.removeChild(script1);
      div.removeChild(script2);
    };
  }, []);

  return <div id="test" className="banner"></div>;
}
export default Banner;
```

`createElement`や`createRoot`で設定するような記事をちらほらと見かけて、Reactだしそっちを使うか！と思って実装しても動きませんでした。何故かはわかりません。

また、`console.log("test")`を`textContent`に設定しています。試していないですが、調べた限りでは`innerHTML`では動かないようです。

# おわりに
生の？HTMLであればサクッと終わったと思うのですが、思ったより時間がかかりました。Reactを使うことで色々便利になっていますが、（今時滅多にないかもですが）今回のようなケースで扱いにくさを感じました。

どなたかの参考になりましたら幸いです。
GitHub Actionsの使い方


## GitHub Actionとは？

**GitHub Actions** はGitHubで **CI/CD** を実現できるツールです。

CI/CDツールとは、ソフトウェア開発を効率化するものになります。

GitHub Actionsは制限はありますが、無料で利用でき、機能性は他のCI/CDツールに引けを取らないツールとなっています。

## GitHub Actionsは？ワークフローの自動化を実現する機能になります

**GitHub Actions** とは、あらかじめ定義した処理と条件の組合せを自動化する機能です。

リポジトリに対するプッシュなどの処理をトリガーとして、専用のWorkflowに定義しておいた処理を自動で実行することができます。


## GitHub Actionsの基本的な使用方法

クローンしたローカルリポジトリ内に **.github/workflows** というフォルダを作成

フォルダ内でさらに　**◯◯◯.yml** というファイルを作成します。

この◯◯◯.ymlがGitHub Actionsのworkflowになります。

![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544972/81396648-faed-cb5c-b237-7e4a568b1731.png)


次に、設定ファイルのymlファイルを以下のように記述します。

```yml
name: command
on: [push]
jobs:
  command:
    name: Use Linux commands
    runs-on: ubuntu-latest
    steps:
      - name: message
        run: echo "Hello World!"

```

上記ファイルは
**name:** にワークフロー名を記載します。
**on: [push]** プッシュが実行されたときに動きます。
**runs-on: ubuntu-latest** 最新バージョンのubuntuを準備します。
**run: echo “Hello World”**   “Hello World”というコマンドを実行します。

これで、GitHub Actionsのworkflowファイルが作成でき。
ファイル作成後、ファイルを追加、コミット、プッシュの作業を行います。

```git

git add .
git commit -m"[メッセージ追加]"
git push

```

上記プッシュが実行された時点で、workflowが実行されます。

GitHubのActionsタブをクリックして、ファイルが実行された事がわかります。

![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544972/3dec5f95-de55-2972-8b78-16f030cebb66.png)

![222.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544972/86164397-a4ae-941e-d48f-97193725e4f7.png)

![333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544972/fb40e639-0479-6e58-6a56-aad00f8f9814.png)
viteで開発環境でのみconsole.logを表示したい

# 背景

ユーザのconsoleには表示させたくないが、開発中には表示させることでバグ修正時の時間短縮（原因特定等）に繋がることもあると思います。

そこで今回はviteのプロジェクトでそれを実現する方法を紹介します。

:::note
[doc](https://ja.vitejs.dev/)
viteのinstallでしたり、viteのconfigファイルの設定は割愛させて頂きます🙏
:::

# modeによってconsole.logを表示するか決める関数
```displayDevConsoleLog.ts
const displayDevConsoleLog = (msg: string) => {
    const needDevConsoleLog = import.meta.env.MODE === "development";
    if (needDevConsoleLog) {
      console.log(msg);
    }
}
```
:::note
viteはデフォルトで、
開発サーバー（dev コマンド）はdevelopmentモード
buildコマンドはproductionモードで動作します
[doc](https://ja.vitejs.dev/guide/env-and-mode#:~:text=%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%A7%E3%80%81%E9%96%8B%E7%99%BA%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%EF%BC%88dev%20%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%EF%BC%89%E3%81%AF%20development%20%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A7%E5%8B%95%E4%BD%9C%E3%81%97%E3%80%81build%20%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AF%20production%20%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A7%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%BE%E3%81%99%E3%80%82)

`import.meta.env.MODE`でdevelopmentかproductionを取得できます
:::

# 懸念点
全員に表示されます。
↓
多用すると作業の支障になります。

使い時を考える必要がありそうです。

# 最後に
- 簡単に導入できました
- viteは[dotenv](https://github.com/motdotla/dotenv)を利用していることを知りました
- 引き続き開発体験を上げる為にできることを調査していきます！💪