OmniAICreator/Qiita-1.07M huggingface dataset:
単体テスト用のテストメソッドを召喚する

最近 xUnit を使って単体テストをよく書きます。テストエクスプローラーでの視認性のためにもテストメソッドの名前は一定のルールで書いておきたいです。でも、面倒。

**大丈夫。コードスニペットを使えばね。**

# テストメソッドの命名則
僕の中での命名則はこちら。ChatGPT 先生に相談しながら決めました。
```cs
[Fact]
public void FunctionName_Result_WhenConditions()
{
}
```
例えば、みんな大好き `string.IsNullOrEmpty()` をテストしようとすると、こんな感じ。
```cs
[Fact]
public void IsNullOrEmpty_ReturnsTrue_WhenInputIsEmpty()
{
    ...
}
```
そこそこわかりやすいと思うのですが、いかんせんいくつも書こうと思うとタイプ量が多いし、ルールを守るために鋼の意思が必要。僕はどちらかというと豆腐の意思なので、どこかで面倒くさくなって適当になってきそう。
そこでコードスニペットの登場です。

# コードスニペットを追加する
## 環境
- Microsoft Visual Studio Community 2022 (64 ビット) 
    - Version 17.6.2
## 手順
### 1. スニペットファイルを作成する
1. スニペットファイル置き場へ
    1. 僕の環境だと以下にありました。（今回は C# のスニペットを追加します）
`%USERPROFILE%\ドキュメント\Visual Studio 2022\Code Snippets\Visual C#\My Code Snippets`
1. 新規ファイルを作成 `XunitTestFunction.snippet`
1. ファイルをダブルクリックで開く（VisualStudio で開くと思います）
### 2. スニペットファイルを実装する
1. もうこれをドン
```xml
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>xUnit test function</Title>
      <Author>HigeDaruma</Author>
      <Description>Creates xUnit test faunction.</Description>
      <Shortcut>fact</Shortcut>
    </Header>
    <Snippet>
      <Code Language="CSharp">
        <![CDATA[[Fact]
        public void $FunctionName$_$Result$_When$Conditions$()
        {
            // Arrange
            $end$
            // Act

            // Assert
            
        }]]>
      </Code>
      <Declarations>
        <Literal>
          <ID>FunctionName</ID>
          <ToolTip>Input the function name for test.</ToolTip>
          <Default>FunctionName</Default>
        </Literal>
        <Literal>
          <ID>Result</ID>
          <ToolTip>Input the expected result of test.</ToolTip>
          <Default>ReturnsOk</Default>
        </Literal>
        <Literal>
          <ID>Conditions</ID>
          <ToolTip>Input the conditions for test.</ToolTip>
          <Default>InputIsOk</Default>
        </Literal>
      </Declarations>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>
```
#### 超ざっくり説明
##### `<Header>` 
- `<Title>` `<Author>` `<Description>` 
    - コードスニペットマネージャーに表示される情報
- `<Shortcut>`
    - はスニペットを召喚するときのキーワード
##### `<Code Language="CSharp">`
- C# 向けのコードスニペット
- `<!CDATA[{ここに召喚するコードを書きます}]]>`
    - `$`で囲まれた文字は置換用のキーワード
    - `$end` は入力完了後に Enter したときに移動する位置
##### `<Declarations>`
- 置換の設定・説明
- `<ID>`
    - 先ほど `Code` に書いたキーワード
- `<ToolTip>`
    - 置換箇所を実装中に表示されるツールチップ（マウスカーソルを当てる必要あり）
- `<Default>`
    - 召喚してすぐの時に表示される文字列

### 3. 召喚！
1. fact とタイプして Tab 2回！
1. 置換箇所を入力して Tab で移動
1. 最後に Enter
![レコーディング-2023-06-10-203353.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107938/bce71c9a-7fba-1674-8a26-77cab3e77a05.gif)

# 参考

https://learn.microsoft.com/ja-jp/visualstudio/ide/walkthrough-creating-a-code-snippet?view=vs-2022
git add  ができない。。


# はじめに
ファイルを編集したのでいつも通り作業中のtestディレクトリで `git add -A` したところ
```
$ git add -A

error: 'sample1' does not have a commit checked out
fatal: adding files failed
```
（sample1はgtihubのリポジトリ名）
git addできないのでcommitもpushもできない:sob:

# 原因と解決

`.git`　が同階層にある、または別階層に（複数）あるのが原因！！

```
test/
  ┣ .git
  ┗ sample1/
       ┗.git
```

自分の場合作業ディレクトリ内に意図せずリモートリポジトリと同名のディレクトリ(sample1)が作成されており、その中に.gitがエラーの原因でした。

.gitと共にsampleディレクトリを削除し、作業ディレクトリ内に.gitが一つだけ存在するようにすることで無事エラー解消

# まとめ

上記のエラーが出た際は、作業ディレクトリ内のどこかに`.git`が複数存在してる可能性が高いです。
[チートシート]Dockerコマンド

## Dockerコマンドチートシート
Dockerはコンテナ仮想化プラットフォームとして広く使われています。
コンテナを効果的に操作するためには、いくつかの基本的なDockerコマンドを理解しておくことが重要です。
この記事では、よく使用されるDockerコマンドをまとめました。ぜひ参考にしてください。

### イメージ操作
イメージのダウンロード
```
docker pull <イメージ名>
```
ローカルイメージの一覧表示
```
docker images
```
イメージの削除
```
docker rmi <イメージ名>
```

### コンテナ操作
コンテナの作成と実行
```
docker run <イメージ名>
```
実行中のコンテナの一覧表示
```
docker ps
```
コンテナの停止
```
docker stop <コンテナ名>
```
停止中のコンテナの開始
```
docker start <コンテナ名>
```
コンテナの再起動
```
docker restart <コンテナ名>
```
コンテナの削除
```
docker rm <コンテナ名>
```

### コンテナへの接続と切断
コンテナへのコマンド実行
```
docker exec -it <コンテナ名> <コマンド>
```
コンテナへの接続
```
docker attach <コンテナ名>
```
コンテナからの切断
```
Ctrl + P, Ctrl + Q
```

### ネットワーク操作
ネットワークの一覧表示
```
docker network ls
```
新しいネットワークの作成
```
docker network create <ネットワーク名>
```
コンテナのネットワーク接続
```
docker network connect <ネットワーク名> <コンテナ名>
```

### ボリューム操作
ボリュームの一覧表示
```
docker volume ls
```
新しいボリュームの作成
```
docker volume create <ボリューム名>
```
ボリュームの削除
```
docker volume rm <ボリューム名>
```

## Docker Composeコマンドチートシート

### サービス操作
サービスの起動
```
docker-compose up
```
サービスの停止とリソース削除
```
docker-compose down
```
サービスの状態表示
```
docker-compose ps
```
サービス内でのコマンド実行
```
docker-compose exec <サービス名> <コマンド>
```
サービスのログ表示
```
docker-compose logs <サービス名>
```
サービスイメージのビルド
```
docker-compose build
```
サービスの再起動
```
docker-compose restart <サービス名>
```
サービスの停止
```
docker-compose stop <サービス名>
```

以上がDockerとDocker Composeのコマンドチートシートです。
[Go]型定義に関してメモ

# 型定義ってどう使うんだ
普段はJavaとC#、後はjavascriptやTypeScriptでVue.js/Nuxt.js使ってる人です。
Go言語の勉強始めたんですが、型定義の使い道がぱっと見分からなくて調べたのでメモ兼アウトプットする習慣をつけようと思ったので書いてみます。


# 使い方
下記のような形でtestがstring型と定義できる。
```golang:書き方
type test string
```

ぱっと見これ何に使うんだかマジで分からなかったのだが、Java風に例えるならenumを用いた定数を作るような形で使うらしい。

例えば一定の値しか入らないようなフィールドを作りたい場合なんかに使う
今回は例として会員ランクがあり、ブロンズ、シルバー、ゴールド、プラチナの4つしか定義されないようなフィールドがあるとする。

そういう場合は下記のような形にすればよい。
```golang:書き方
type Rank string

const {
    bronze Rank = "bronze"
    silver Rank = "silver"
    gold Rank = "gold"
    platinum Rank = "platinum"
}

var userRank Rank
```

こうするとuserRank変数にはconstで定義した4つの定数しか入らないことになる。
入る値が決まり切っているものに関しては活用していくようにしたい。

# 終わりに
初めてのアウトプットだが、正直Javaやってる人じゃないとわからない書き方をしてしまったので今後はわかりやすく書けるように意識してみます。

にしてもGo言語はセミコロンが要らないらしいので、基本的に今までセミコロン記述するように書いてたので違和感がすごいですね。
今後も少しずつ勉強していきます。
kotlinの公式Docコーディング規約のまとめ

# kotlin公式Ducument
kotlinの[公式ドキュメント](https://kotlinlang.org/docs/coding-conventions.html#annotations)の中で特に重要だと思った点をまとめる。

#### ソースファイル名
- 単一のクラスまたはインタフェースが含まれるファイル：クラス名と同じ名前に `.kt` をつける。
- 複数のクラスまたはインタフェースが含まれるファイル：ファイルに含まれる内容を説明するように命名する。

#### クラスのレイアウト
- クラスの内容は次の順番で記述する。
&emsp;1 プロパティ宣言と初期化ブロック
&emsp;2 セカンダリコンストラクタ
&emsp;3 メソッド宣言
&emsp;4 コンパニオンオブジェクト

- メソッドは名前順に並べるのではなく、関連するものをまとめて、上から読んだときに何が起こっているか、ロジックを辿っていける様に書く。

- ネストされたクラスをそのクラス内で使う場合は、使われている箇所の近くの記述する。クラス外部で利用される場合は、***コンパニオンオブジェクトの後*** に記述する。

- クラスの名前は通常、そのクラスが何であるかを説明する名詞または名詞句。

- 宣言名の一部として頭字語を使用する場合、2文字(3文字くらいまでいける？)で構成される場合は ***大文字*** にする(`IOStream`)。長い場合、最初の文字のみ大文字にする。

#### インタフェースの実装レイアウト

インタフェースを実装する場合は、インタフェースに記述されている順番にメンバを保つ、必要に応じて追加で実装されるプライベートメソッドを記述する。

#### オーバーロードレイアウト
オーバーロードはまとめて記述する。

#### アノテーション
- 引数の無いアノテーションは水平方向に並べて配置し、引数の無い単一のアノテーションは、対応する宣言と同じ行に配置する。引数のあるアノテーションはすべて別の行で宣言する。

#### 制御ステートメント
- `else`, `catch`, `finally`等は、前述する{~}の最後の波括弧と同じ行に記述する。

- `when`で複数の分岐が存在する場合は、一つ一つのcaseの間に空白行で区切ることを検討する。また、分岐処理が一行で済む場合等は、波括弧をつけずに同じ行に記述する。

#### ラムダパラメータ
-　短く、ネストがない場合には、規則的に利用することのできる`it`を利用し、ネストがある場合は、常にパラメータを明示的に宣言する。
業務のToDoリストを作成することで感じたメリット・デメリット

## 概要

エンジニアとして働く様になってから、ToDoリストを作成した事により、以下の事象があった。

* 一日の最初に何をすればいいかが明確になり、効率よく業務を進められるようになった。
* 毎日業後に、ToDo通り業務を進められたか振り返ることで、業務内容のアウトプットとなり、翌日以降で同じミスをする機会が減った。
* 自身で考えて行動する意識が高まった。

その為、ToDoを作成することに対するメリットをこの資料を通して、みなさんに共有したいと思います。

## ToDoとは

**「ToDo」** とは、 **「いつかやる必要があること」** を指す。

そしてToDoリストとは、 このToDoをリスト化したもの。

## ToDoリストを作るメリットとデメリット

### メリット1　やり忘れがなくなる



ToDoリストを作ることでやるべきことを分かりやすく管理できるため、やり忘れがなくなる。

ToDoリストを作る時には、とにかく抜け漏れが無いように頭の中にあるタスクを全て書き出し、書き出した分だけ頭のメモリーが空くので色々と考える余裕もできる。

### メリット2　頭で考えて決断する回数が減らせる

ToDoリストを明確に作ると、業務内での、**決断の回数** を減らすことができる。
→決断の回数が多いと、あれもやらなきゃ、これもやらなきゃと頭がこんがらがり、やる気も生産性も落ちる傾向にある。

**「次に何をするべきかを考えること」** に頭を使うと、**「次にやるべきこと」** そのものに使えるエネルギーが少なくなってしまう。

ToDoリストは 「次にやるべきこと」 を明確にしてくれるので、**やる気の面でも生産性の面でもメリットが大きい。**

### メリット3　頭がスッキリする・集中できる

ToDoリストを作ると**マルチタスクを避ける** ことができ、目の前の業務に集中できる。

マルチタスクとは同時に複数の作業を行う事であり、完璧に双方をこなす事は簡単な事では無い。
不必要な焦りや、心配を生みやすくなり、業務効率が落ちる事で、期限に遅れたり、生産性はもちろん落ちる。

### デメリット

* ×入力するのが面倒
 →1日の初め（業務の始まる前まで）に作成する必要があるので、十分な作成時間を用意する必要がある。

* ×そもそも、必死に管理するほどタスクがない
 →今後、増えていく可能性を考えるとさほどデメリットではない。

* ×全部を管理しようと思うと手間がかかりすぎる
 →1日単位で今日やることをリスト作成し、`Slack`にメモ書き程度で書ける範囲で問題ない

## ToDo作成に反映していったこと、作成手順



### 手順1 ToDoを全て書き出す
まずはToDoを全て書き出す。 （作成方法はSlackの個人チャットにメモ書き）
最初のうちは、ただやることをリスト化するだけだった。

```
・〇〇プランニング
・〇〇実装完了
・〇〇テストケースレビュー
```

### **手順2 優先順位を決める**

やることをただリスト化するだけだと、結局どれから手をつけていいか判断出来ないため、緊急度や重要度の高いタスクを後回しにしてしまう。

そのため、緊急度、重要度の二つを考慮して優先順位を決めていくことにした。
```
優先順位：
　　1. 〇〇ITテスト実施
　　2. (テストが終われば)Android〇〇画面の改修
　　3. 一次レビュー対応
```


また、どれからやってもいいという場合にも、決断の回数を減らすためにここで順番を決めておく。
 →修正範囲の広いものから順に対応する等

```
Task： 〇〇実装の修正
　優先順位：
　　1 hogeAPI
　　2 hugaAPI
　　3 hogeバッチ
　　4 hogeテスト
```

### 手順3 期限を設ける、時間で管理する

目標となる期限があると、先延ばしを防ぎやすくなるため、期限を設けるようした。
→ただし無理な目標にせず、無理のない範囲で設定する。（※例：午前中までにPR作成完了する）

また、一概にToDoリストといっても、タスクごとに終わらせるのにかかる時間は異なる。
1日の自身の動きを決めておくことで、タスク・目標設定を円滑に進められると判断し、午前・午後に分けることにした。

```
優先順位：
　　1 〇〇タスク修正
　　2 A画面の改修
　　3 B画面の改修

■午前
・〇〇タスク修正修正完了・PR作成　
・A画面の改修の実装完了・PR作成
■午後
・〇〇タスク修正　レビューバック対応
・A画面の改修レビューバック対応
・B画面の改修実装開始　
■業後
・Kotlin研修１時間
```
### 手順4 完了したToDoに線を引く

完了したToDoは、業後の時間に、ToDoリストから線を引く。達成感は多少ある。

優先順位：
　　~~1. 〇〇タスク修正~~
　　~~2. A画面の改修~~
　　3. B画面の改修


## まとめ

結果、上記手順でToDo作成し、1日の最後に現場の日報で振り返る事で、自分は業務内容のアウトプットを行っていました。

自分が何をすべきか明確にする事で、これまでよくあったタスクの抜け漏れがなくなったと思います。

差込のタスクが入ってくる時は、都度ToDoリストに反映させていたので、いずれも期限内にタスクを完遂させる事が出来たと思います。

今後も、ToDoリストを上手く活用できれば、1日でできる仕事が増えたり、自分の趣味に使う時間が増えることに繋がると思っています。

Todoリストは割とフリーフォーマットなので、作るだけだと結局管理しづらいと思うのですが
実践してみて振り返りをし、フォーマットを改善していくと良いと思います。


※Slackを使うのであれば、ポスト機能を活用するのも良いと思います！
https://inglow.jp/techblog/slack-share-file/
RailsのJavascriptの記載場所

## 導入
viewファイルにJSを以下のように記載することはあまりコードとしてよろしくないので、適切な箇所に記載するようにします。
~~~ form.html.erb
|
|
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const todayButton = document.getElementById("today-button");
    const visitDayField = document.getElementById("content_visit_day");

    todayButton.addEventListener("click", () => {
      const today = new Date().toISOString().split("T")[0];
      visitDayField.value = today;
    });
  });
</script>
~~~
## 手順
JSのファイルを作成したのは、app/javascriptフォルダ内にしました。
このファイルに記述した内容は、どのViewでも使うことができます。
~~~app/javascrip/script.js
document.addEventListener("DOMContentLoaded", () => {
  const todayButton = document.getElementById("today-button");
  const visitDayField = document.getElementById("content_visit_day");

  todayButton.addEventListener("click", (event) => {
    event.preventDefault();
    const today = new Date().toISOString().split("T")[0];
    visitDayField.value = today;
  });
});
~~~
※ここの記述は、フォームに「本日ボタン」を作るためのものです。

次にapp/javascript/packs/application.jsに上記で作成したファイルをimportしました。
~~~app/javascrip/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import "script.js"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
~~~

以上で、viewファイルにJSが動作すると思います。
Markdown記法？　初心者

# Markdown記法を少しだけ勉強したのをまとめてみた
自分の勉強用として初めて投稿します。

## `見出し`
✴︎見出し１
✴︎見出し２
✴︎見出し３
✴︎見出し４
✴︎見出し５
✴︎番号なしリスト
✴︎強調、強い強調
✴︎打ち消し線
✴︎水平線
✴︎リンク
✴︎色
✴︎チェックボックス

# 見出し１

```
# 見出し１
```

## 見出し２

```
## 見出し２
```

### 見出し３

```
### 見出し３
```

#### 見出し４

```
#### 見出し４
```

##### 見出し５

```
##### 見出し５
```

## 番号なしリスト

- 　text

```
- text
* text
```

## 強調、強い強調

*text*
**text**

```
*text*
**text**

```

## 打ち消し線

~~text~~

```
~~text~~
```

## 水平線

----

```
---
```

## リンク

[text](url)

```
[text](url)
```

## 色

<font color="blue">テキスト</font>
<font color="red">テキスト</font>

```
<font color="blue">テキスト</font>
<font color="red">テキスト</font>

```

## チェックボックス

- [ ] text
- [x] text

```
- [ ] text
- [x] text
```
docker on WSL2 で postgres お遊び環境構築

## 対象

- 自分用備忘録
- とりあえず docker で postgresql 動かしたい人

## 環境

- OS: windows11 の WSL2 ubuntu
- editor: VSCode

## 本編

### wsl, docker 編

wsl2 で docker 環境構築については以下の記事を参考にしました。

- [Windows11 で Docker Desktop を使わずに Docker](https://eng-blog.iij.ad.jp/archives/17746)
- [【プロキシ対応】Docker Desktop for Windows を使わず、WSL2 / Ubuntu に apt で Docker を入れる](https://sabakunotabito.hatenablog.com/entry/2021/10/03/024348)

Docker Desktop は個人だと無料ですが、仕事だと有料なので汎用性あるかもしれないこの方法で作成。

VSCode の Remote Development を入れると、VSCode の端末から WSL2 の Ubuntu を触れるので便利。

### postgresql 編

postgresql 用のディレクトリを作成します。

ディレクトリ構成は以下です。

```txt
└── postgresdata
    ├── compose.yml
    └── init
    │   └── init.sql
    └── data
    │   └── ...
    └── work
        └── persondata.sql
```

compose.yml にて作成したディレクトリをバインドしています。
ディレクトリの役割としては

- init: 最初に実行される init.sql 置き場
- data: postgresql のデータ場所
- work: 作業ファイル置き場

となります。

compose.yml の内容は以下。

```yaml
version: "3.8"

services:
  db:
    image: postgres:14
    container_name: postgres
    environment:
      - POSTGRES_DB=test
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=xxxx
    ports:
      - "5432:5432"
    volumes:
      - ./init:/docker-entrypoint-initdb.d
      - ./data:/var/lib/postgresql/data
      - ./work:/work
    working_dir: /work
```

environment の`POSTGRES_DB`でデータベースを指定できます。

`working_dir`を指定して psql 実行時のファイルパス指定を端折りやすくしました。

用意した sql ファイルは以下。

- init.sql

```sql
CREATE TABLE person (name varchar(50), birthday date);
```

- persondata.sql

```sql
INSERT INTO
    person (name, birthday)
VALUES
    ('渋沢栄一', '1840-03-16'),
    ('徳川慶喜', '1837-10-28'),
    ('西郷隆盛', '1828-01-23'),
    ('坂本龍馬', '1836-01-03');
```

上記ファイル準備後は、`docker compose up -d`でコンテナを起動、`docker compose exec db psql -U user test`で psql を起動できます。

`docker compose exec db /bin/bash`で入ってから、`psql -U user test`でも OK.

簡単にコマンドチェック

- テーブル一覧、構造の確認

```cmd

test=# \dt
        List of relations
 Schema |  Name  | Type  | Owner
--------+--------+-------+-------
 public | person | table | user
(1 row)

test=# \d person;
                       Table "public.person"
  Column  |         Type          | Collation | Nullable | Default
----------+-----------------------+-----------+----------+---------
 name     | character varying(50) |           |          |
 birthday | date                  |           |          |
```

- データ投入、確認

```cmd
test=# \i personaldata.sql
INSERT 0 4

test=# select * from person;
   name   |  birthday
----------+------------
 渋沢栄一 | 1840-03-16
 徳川慶喜 | 1837-10-28
 西郷隆盛 | 1828-01-23
 坂本龍馬 | 1836-01-03
(4 rows)
```

## おわりに

SQL を打ちたいだけなら SQL Fiddle などのサービスでもいいかも。

postgresql の復習環境としては〇.
BEMとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/f0c2785a-8a07-903f-03a0-a1908da03c89.png)
１：BEMとは
　Block、Element、Modiferの略語です。webサイトのコンポーネント化のためのフロントエンド設計方法の一つです。

２：BEMを構成する3つの要素
　BEMは、Block、Element、Modifierという3つの概念だけ理解してしまえば、あとはclass名の命名ルールに則って記述していきます。

　Blockとは
　Webページは、ヘッダー、ナビゲーション、商品説明、フッターなどといった、パーツの集まりで構成されています。BEMでは、これらのパーツをBlockと呼びます。

　Elementとは
　Blockの構成要素で、そのElementが属するBlock内でのみ意味します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/c5f9cf0b-c164-f60b-aee9-a28ce89f9118.png)
　Modifier（モディファイア）とは
　見た目や動きが少しだけ違うものを作りたい場合には、新規にそれらを作るのではなく、Modifierを使うことができます。

　例えば、同じリストで、行頭記号が2種類以上存在する場合や、同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、見栄えを変える場合などです。

３：class名の命名ルール
　クラス名の中に__というように、アンダースコアを二重に使っており、この__や、_、-は、単語と単語を区切るために使用していて、BEMではこれをセパレーターと呼んでいます。BEMでは、誰が見てもわかるように、Block、Element、Modifierそれぞれの区切りに、一貫したセパレーターを使うことが重要とされます。

４：セパレーターの種類
①BlockとElementとの区切り。
②Block（あるいはElement）とModifierとの区切りと、Modifierのkeyとvalueの区切り。
③BlockやElement名を、2つ以上の単語で表す場合の単語と単語との区切り。
　大切なのは、クラス名を見たときに、セパレーターの種類によって、それがBlockとElementの区切りなのか、Modifierの区切りなのか、それともただの単語の区切りなのかが、はっきり判別できるようにすることです。

５：BEMのメリット
①HTMLとCSSは、いつでもデザインの変化に対応できる。
②プログラマーとフロントエンドエンジニアは、お互いのコードに貢献し合える。
③共通言語でやりとりできるため、コミュニケーションが図りやすい。
Vis Networkを使って「コラッツの問題」を視覚化してみた

# 概要

## コラッツの問題（コラッツ予想）とは

「コラッツの問題」は、数論の未解決問題のひとつです。
任意の正の整数 `n` に対して、以下で定められる操作を繰り返し行う場合に「どんな初期値から始めても、有限回の操作のうちに必ず 1 に到達する」という主張が、コラッツの予想です。

実際にブラウザ画面で視覚的に表現してみたいと思いアプリを作成しました。

**コラッツの問題の操作ルール**
- `n`が偶数の場合、`n`を2で割る
- `n`が奇数の場合、`n`に3をかけて1を足す

**例）初期値が6だった場合**
`6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1`

## Vis Networkとは

- GitHub: https://github.com/visjs/vis-network

「Vis Network」とは、vis.jsという可視化ライブラリに含まれるグラフ可視化ライブラリです。
見た目が面白くなりそうなので採用させていただきました。

# 作成した物

今回は作成したアプリの使い方的な紹介となります。
コードの中身については、今回は割愛します。興味のある方は、GitHubをご覧ください。

- GitHub：https://github.com/ishi720/collatz_visualization
- WEBページ：https://suisui.fun/collatz_visualization/

### ■ 1つずつ計算する機能

数値をダブルクリックすると、前後の数値を計算して表示します。

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473097/20b6750d-be19-b87e-daf3-a63426e51a6d.gif)

### ■ 一括で計算する機能

指定した整数から1になるまで一括で計算できます。


![Animation2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473097/230b3394-1887-83f0-2fa9-65f0a5fe1d5f.gif)

### ■ グループで色分けする機能

Mod(ある数で割った余り)などのグループで色分けできます。

![Animation3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473097/a8ff2aab-96b4-1133-5d2b-86420e25c3fb.gif)

# まとめ

今回は機能面を重視した説明内容となりました。

コード内容やクリックや操作が楽しくなるようにUI/UXを工夫した点や、
数学的な観点で「コラッツの問題」を分析した気づきなど、
必要があればそちらの記事も書きたいと思います。

また、見ていただいた通り不完全部分が多いため今後も更新予定です。
機能について、アイディアやご意見があればぜひお願いします。
Forkして直接開発していただいても問題ありません。

ここまで読んで頂きありがとうございました。

**GitHubのリポジトリ** → https://github.com/ishi720/collatz_visualization
Shopify CLIの利用のための備忘録

# Shopify CLIの利用のための備忘録。

ダウンロードした後からのShopify CLIでの開発の流れを備忘録として残します。
今回は既存のテーマをベースに開発する流れになります。

1. テーマコードを自身のSHOPFYページからダウンロードする。
ローカルで作業するためにテーマコードのコピーをダウンロードする必要があります。
以下のコマンドを実行して、ストア内の全てのテーマのリストを取得します。
ターミナル
` shopify theme pull --store {store-name}`
このコード実行したら、ブラウザが開いて、ログインが求められます。

2. ダウンロードしてきたコードを編集。

3. 変更内容をプレビューする
テーマに変更を加えた後、ブラウザでテーマと対話するためにshopify theme devを実行します。Shopify CLIは、接続しているストアに開発テーマとしてテーマをアップロードします。
このコマンドは、CSSとセクションへのローカル変更をホットリロードするURLを返し、ストアのデータを使用してリアルタイムで変更をプレビューできるようにします。※このプレビューはGoogle Chromeでのみ利用可能です。
・以下のコマンドを使用して、接続を実行します。
ターミナル
`shopify theme dev`
実行後に* Syncing themeが表示されたら、処理がうまくいっています。
※ファイルの権限に気をつけて

4. 変更をストアにアップロードする。
ストアと変更を共有するため、テーマの変更をストアにアップロードする。
`shopify theme push`
VSCode で Problems loading reference 'vscode://schemas/settings/configurationDefaults' が出た時の解決法

# はじめに
VSCode で以下のエラーが出た時の解決方法のメモです。

```
Problems loading reference 'vscode://schemas/settings/configurationDefaults': 
Unable to load schema from 'vscode://schemas/settings/configurationDefaults': 
cannot open vscode://schemas/settings/configurationDefaults. 
Detail: Unable to resolve text model content for resource vscode://schemas/settings/configurationDefaults.
```

# 解決方法
VS Code の ```settings.json``` に以下の設定を追加したら解決できました。

```settings.json
{
    "json.schemaDownload.enable": true,
}
``` 

# 参考
- [Unable to load schema from vscode://schemas/settings/folder](https://bobbyhadz.com/blog/unable-to-load-schema-from-vscode-cannot-open)
LaravelのStorageでディレクトリのパスを表示する方法

## 概要
Laravel9でStorageを使用し`ディレクトリ`のパスを表示する。

## 通常パターン
```php
Storage::path('');
```
```
/var/www/laravel/storage/app/
```

## ディスクを設定している場合

```php
Storage::disk('s3')->path('');
```

```
/var/www/laravel/storage/app/s3
```
#### 注意

```php
//これはダメ
Storage::disk('s3')->path();

//必ずシングルクォーテーションを二つ記述する
Storage::disk('s3')->path('');
```

### 最後に

https://readouble.com/laravel/9.x/ja/filesystem.html
JavaScriptの非同期処理について

# 非同期処理とは、同期処理との違いとは
非同期処理とは、処理の終了を待たずに次の処理を行う処理のことを指します。　

プログラミング言語の通常の処理では、記述されたコードが上から順番に実行されます。この時の処理の方法を同期処理と言いますが、非同期処理では、非同期で実行された処理が完了する前に他の処理も実行することができます。イメージとしては、処理の完了を待たずに同時に別の処理を行うことができるといった感じになります。　

有名なサービスですと、Google Mapがそれに当たります。　
ユーザーが詳しく調べたい地域をクローズアップし、システムの裏側ではその区画の店舗情報などを非同期で取得して画面上に表示する一方で、処理が完了する前でもユーザーは検索窓で検索をしたり、別の地域にクローズアップしたりすることができます。　
　
## シングルスレッドについて
単一のスレッドのことをシングルスレッドと言います。　
よくJavaScriptはシングルスレッドと言われますが、これはJavaScriptのプログラムが単一のスレッドで実行されること、誤解を恐れずにいうと同時に複数の処理を実行することができないことを指します。

ここで非同期処理を使うと、同時に複数の処理を実行することができるのではないかとの疑問が出てくるかと思いますが、非同期処理は、処理自体を外部環境に依頼しその実行結果を受け取ったJavaScriptが再びシングルスレッドで処理を再開するということを行っているため、JavaScript自体が同時に複数処理を行っているわけではないと言う理解が大切です。　

以下では、非同期処理が行われた際に、どのようにJavaScript内で処理を管理しているのかを確認します。　

## コールスタック・タスクキュー・イベントループについて
コールスタックとは、実行する処理を入れる箱のような物になります。　
JavaScriptではプログラムを実行順に上から順に記述していきますが、実際にこれらを実行するにはコールスタックに入れる必要があります。　
つまり、コールスタックに関数や何らかの処理が入れられて初めてそれが実行されることになります。　
このコールスタックには、通常一つの処理しか入れられないため、JavaScriptはシングルスレッド・同時に複数の処理ができないとなります。　

では非同期処理を行うとどうなるのか。非同期処理を行うと、その処理結果（あくまで処理画終わった後の結果になります）はタスクキューに保存されます。　

タスクキューとは、JavaScriptが非同期処理を外部環境に依頼し、その結果が返ってくる箱のようなものになります。　
したがって非同期処理を複数実行した場合、その結果が次々にタスクキューとして溜まっていきます。　
　
ここでタスクキューとして蓄積されたタスクは、JavaScript内でいつ実行されるのかという疑問が出てくるかと思います。　
その答えは、コールスタックが空になった時にタスクキューがあればそれが処理されます。　

次にイベントループとは、コールスタックの状態監視（現在実行中か、それとも空なのか）やタスクキューの状態監視（タスクがあるのかないのか）を行い、タスクキューがあればコールスタックに追加するなどの、非同期処理を行うための一連の仕組みを指します。

非同期処理が実行される流れは以下の通りでした。　
- 通常のスクリプト内で非同期処理が呼び出される（スクリプト内の処理は、コールスタックにて処理される）
- 非同期処理が外部環境にて実行される
- 非同期処理の実行結果がタスクキューに追加される
- コールスタックが空になった時点でタスクキューがコールスタックに移動され、非同期処理の結果を使ってJavaScript側の処理が行われる。

これら一連の処理が、イベントループという仕組みにより実現します。

## 非同期処理の種類について　
JavaScriptでは大きく分けて次の３つの非同期処理が存在します。

- コールバック関数
- promise
- Async/Await

## 非同期処理の実装方法　

### コールバック関数 

JavaScriptでは、コールバック関数内で非同期処理を行う関数がいくつか用意されています。　
一般的なものとして以下があります。　
- setTimeout：一定時間経過後に指定したコールバック関数を実行します。 
- setInterval：指定した時間間隔ごとに、コールバック関数を実行します。
- fetch：ネットワークリクエストを非同期で行い、レスポンスを取得します。

```.js
//setTimeoutの構文
setTimeout(callback, delay);

//setIntervalの構文
setInterval(callback, delay);

//fetchの構文
fetch(url)
  .then(response => response.json())
  .then(data => {
    // レスポンスデータを処理するコールバック関数
  })
  .catch(error => {
    // エラーハンドリング用のコールバック関数
  });

```

### promise 
2015年に標準化（ES2015）された機能です。
Promiseとは、非同期処理を表すオブジェクトになります。

使用方法は、以下のように行います。　
- 非同期処理を行うインスタンスを作成（引数に`resolve`と`reject`を指定）
- 実際に行いたい非同期処理を記述
- 非同期処理に成功した場合は`resolve`を呼び出す
- 失敗した場合は`reject`を呼び出す

```.js
// Promise を返す
  return new Promise(function(resolve, reject) {
      const a = 3;
      if ( a > 1 ) {
    //   成功したとき
        resolve(a);
      } else {
    //   失敗したとき
        reject(a);
      }
  }).then((a) =>{
    console.log("1より大きい");
}).catch((a) => {
    console.log("1より小さい");
})
```

### Async/Await
後日追加予定


参考記事
>https://qiita.com/sho_U/items/f07a4f3e7760a9729f10
ohtaka上でのIntelコンパイラ（+IntelMPI）を使ったコンパイルの問題

# はじめに
東京大学物性研究所スーパーコンピューターセンターのスーパーコンピュータ（システムB）のコンパイラが2023年4月のメンテナンスから新しくなり,oneAPIしか使えなくなりました。それに伴い様々な問題が発生していましたが、情報を頂きましたのでここに記録します。


これまでIntelMPIを使用するとプログラムがクラッシュする問題が発生していて、OpenMPIの使用が推奨されていましたが、以下のようにするとこれまでの問題を避けることができそうです。

# モジュール

使用したモジュールは以下です。

- openapi_compiler/2023.0.0
- oneapi_mkl/2023.0.0
- oneapi_mpi/2023.0.0  

以下を実行するか、``.bashrc``に記述
```
module load oneapi_compiler/2023.0.0 oneapi_mkl/2023.0.0 oneapi_mpi/2023.0.0  
```
以下を実行してモジュールがロードされていることを確認
```
module list
```
```
 1) oneapi_compiler/2023.0.0   2) oneapi_mkl/2023.0.0   3) oneapi_mpi/2023.0.0  

```
これで使用するプログラムをコンパイルします。

# ジョブスクリプト
プログラムが問題無くコンパイルできたならば次はジョブスクリプトを用意します。
コンパイル時に使用した上記のモジュールのロード文に加え、以下をジョブスクリプトに記述します（bashを使用する場合）
```
export FI_PROVIDER=psm3
```
私が使用しているプログラム[STATE](https://state-doc.readthedocs.io/)の場合、Intelコンパイラ+OpenMPIの組み合わせで以前と比べて数倍の計算時間がかかってしまっていましたが、今回教えていただいた変数の設定で以前と同程度の計算速度になりました。これで研究を進めることができそうです。今後Quantum-ESPRESSOでも試す予定です。

MKLライブラリ+OpenMPに関すると思われるエラーが出てクラッシュする場合、以下の変数を設定すると良いかもしれません。
```
export MKL_NUM_THREADS=1
```
現在テスト中ですが、うまくいく可能性が高いと感じています

物性研スパコン管理者のみなさまと、問合せをしてくれた研究室の学生に感謝です！

:::note warn
かなり改善されたものの完全には問題が解決していないようで、計算の途中でsegmentation faultで止まることがまだあります。
:::

:::note
現在では[FAQ](https://mdcl.issp.u-tokyo.ac.jp/scc/faq)のohtakaのセクションにも上記の方法が記載されています。
:::
GitpodでGitのEmail情報を自動でマスクする

## はじめに
NTTテクノクロス株式会社の渡邉洋平です。

Gitpodを使ってGitHubのプロジェクトを使うとき、以下の様にEmailアドレスを隠す操作をしている人、いますか。

```bash
git config --global user.email hogehoge@example.com
```

わたしはAWS CDKのコントリビュートなどでGitpodを数十回以上利用していますが、毎回変えていました……10か月ほど……手動で……

この無駄な操作を何とかしようと一念発起したら20分ほどで解決したので共有します。

## Bad

https://gitpod.io/user/account にて設定できそうですが、少なくとも私の環境ではうまく行かず、GitHubに登録したメールアドレスが設定されたままでした。
![](https://storage.googleapis.com/zenn-user-upload/e34ae2e4c036-20230527.jpg)

## Good
設定値を色々見ていると、https://gitpod.io/user/preferences にDotfilesを設定する欄があります。Gitpod的には、ここで設定するのが良さそうです。
![](https://storage.googleapis.com/zenn-user-upload/d757d75af7ee-20230527.jpg)

### Dotfiles？

Dotfiles自体は.bashrc、.vimrcのような、ドットから始まるコンフィグ類など管理するリポジトリを指しているようです。正直、私は詳しくないのですが、セットアップスクリプトなども指す文化という理解です。

※参考：

https://dev.classmethod.jp/articles/joined-mac-dotfiles-customize/


Gitpodでは環境設定用にこのDotfiles、つまりセットアップ用の資材を設定するオプションがあります。

https://www.gitpod.io/docs/configure/user-settings/dotfiles

リポジトリのURLを設定し、以下の条件に沿ったスクリプトを実行することもできます。

- install.sh
- install
- bootstrap.sh
- bootstrap
- script/bootstrap
- setup.sh
- setup
- script/setup

120秒の実行制限こそありますが、今回の目的は果たせそうですので、こちらを使っていきましょう。

## Dotfileの準備

Gitpod公式で用意されたリポジトリをforkすれば基本形はできます。
https://github.com/gitpod-samples/demo-dotfiles-with-gitpod

このリポジトリの`setup.sh`を読むと、`scripts/`配下のシェルスクリプトが実行対象であることがわかります。

```bash: setup.sh
#!/bin/bash

TMPDIR=$(mktemp -d)

CURRENT=$PWD

cd $TMPDIR

for script in ~/.dotfiles/scripts/*; do
  bash "$script"
done

cd $CURRENT

rm -rf $TMPDIR
```

なのでこのように、GitHubの公開用Emailアドレスでマスクする処理を書いていきます。

```bash:/scripts/mask_email.sh
#!/bin/bash

GIT_AUTHOR_EMAIL=xxxxxxxx@users.noreply.github.com 

echo "$GIT_AUTHOR_EMAIL"

git config user.email $GIT_AUTHOR_EMAIL
git config --global user.email $GIT_AUTHOR_EMAIL
```

## 実行

Dotfiles設定の後にGitpodを起動すると、無事にマスク用のメールアドレスが確認できました。

![qiita_dotfile1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528454/bf5af750-36a3-ae53-66cf-a7003a793f9f.jpeg)

### debug

設定したDotfilesが上手く動かない場合、以下の情報などからデバッグを始められます。

```bash
# Gitpod環境にダウンロードされたDotfiles
ls -a /home/gitpod/.dotfiles
.  ..  .git  LICENSE  README.md  scripts  setup.sh

# Dotfilesの実行ログ
$ cat /home/gitpod/.dotfiles.log
# installation script candidate /home/gitpod/.dotfiles/install.sh is not available
# installation script candidate /home/gitpod/.dotfiles/install is not available
# installation script candidate /home/gitpod/.dotfiles/bootstrap.sh is not available
# installation script candidate /home/gitpod/.dotfiles/bootstrap is not available
# installation script candidate /home/gitpod/.dotfiles/script/bootstrap is not available
# executing installation script candidate /home/gitpod/.dotfiles/setup.sh
xxxxxxxx@users.noreply.github.com
fatal: not in a git directory
```

その他、公式の記述も必読です。
https://www.gitpod.io/docs/configure/user-settings/dotfiles

## まとめ

という訳で、Gitpodのセットアップをしたい時はDotfilesが役に立つことがわかりました。

余談ですが、GitHub Codespacesでも同様の仕組みでセッティングできそうです。

https://docs.github.com/ja/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account

本例以外にも[git-secrets](https://github.com/awslabs/git-secrets)など、Gitpod生活に役立ちそうなものはDotfilesで導入しましょう。
CSSの疑似クラスhasを使ってHTMLでテーブル行に背景色をひく

HTMLでテーブル組むとき「チェックボックスにチェックしたら、行全体に背景色を引きたい」というときがあります。昔はJavaScriptとの組み合わせでしたが、CSSの疑似クラスである has で実現できます。

HTML
```HTML
<table>
 <tbody>
   <tr>
     <td> <input type="checkbox" id="checkbox1"> </td>
     <td> <label for="checkbox1">チェックボックスのアイテム</label> </td>
   </tr>
 </tbody>
</table>
</html>
```

CSS
```CSS
table tbody:has(input[type=checkbox]:checked) tr td {
  background-color: blue;
}
```

チェックボックスが td の下にあるので、CSSセレクタを次のように書きたくなりますが、
```
table tbody tr td:has(input[type=checkbox]:checked) 
```
「テーブルの行に対して色をひきたい」ので、tbody:has のようにします。
<label for="..."> を設定しておけば、ラベルを押しても、チェックボックスを押しても効果が発動します。
MLflow 2.4のデータセットトラッキングを試してみる

データのトラッキングは、これまでにも一部サポートはされていましたが、ファイルパスとバージョンの記録に限られていました。

https://qiita.com/taka_yayoi/items/e6b4791cb21b57e05059

[mlflow\.log\_input\(\)](https://mlflow.org/docs/latest/python_api/mlflow.html#mlflow.log_input)によって、より直感的な形で機械学習に使用したデータをトラッキングできるようになります。これは嬉しい。

https://qiita.com/taka_yayoi/items/cd944fde2a9cae8cd6c6#%E6%AD%A3%E7%A2%BA%E3%81%AA%E6%AF%94%E8%BC%83%E3%82%92%E7%A2%BA%E5%AE%9F%E3%81%AB%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E8%A9%95%E4%BE%A1%E3%83%87%E3%83%BC%E3%82%BF%E3%82%BB%E3%83%83%E3%83%88%E3%82%92%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0

今回は機械学習は行わず、あくまでデータセットのトラッキングのみを試します。

```
%pip install mlflow==2.4
```
```
dbutils.library.restartPython()
```

```py
import mlflow

# Deltaからデータセットをロード
dataset = mlflow.data.load_delta(table_name="takaakiyayoi_catalog.covid.covid_cases")

with mlflow.start_run():
    # MLflowランにデータセットを記録
    mlflow.log_input(dataset, context="training")
    # <モデルトレーニングのコード>
```
ロギングはされますが、GUIには表示されません。間も無くのアップデートで表示されるようになるでしょう。

今回は、プログラムからアクセスします。

```py
# データセット情報を含むランの取得
run = mlflow.get_run(mlflow.last_active_run().info.run_id)
dataset_info = run.inputs.dataset_inputs[0].dataset

print(f"Dataset name: {dataset_info.name}")
print(f"Dataset digest: {dataset_info.digest}")
print(f"Dataset profile: {dataset_info.profile}")
print(f"Dataset schema: {dataset_info.schema}")
```

データセット情報が記録されています。`Dataset name`には`@v0`とバージョン番号も表示されています。
```
Dataset name: takaakiyayoi_catalog.covid.covid_cases@v0
Dataset digest: 617ade4c
Dataset profile: {"approx_count": 23171}
Dataset schema: {"mlflow_colspec": [{"type": "string", "name": "Prefecture"}, {"type": "long", "name": "Cases"}, {"type": "datetime", "name": "date_timestamp"}, {"type": "integer", "name": "pref_no"}, {"type": "string", "name": "Area"}]}
```

これを使用して、データセットにアクセスすることもできます。
```py
# ソースDeltaテーブルのデータセットのロード
dataset_source = mlflow.data.get_source(dataset_info)

source_df = dataset_source.load()
display(source_df)
```
![Screenshot 2023-06-10 at 17.04.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/a0a673b6-1b90-ed8b-76dc-bfe4c6b8554f.png)


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

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


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
Youtube Liveのチャットをリアルタイムで解析するアプリを作ってみた

# 概要
Youtube Liveのコメント欄を、リアルタイムで取得して、MeCabの形態素解析にかけて分かち書きをしたのちにNlPlotを使用して各種プロットを実施するwebアプリケーションです。いろいろとインタラクティブに作りたかった結果、Dashで書いているためWebアプリケーションになっているもののローカルで動かして使うことを想定しています。
NlPlotの詳細に関しては以下のリンクをご参照ください。
作成した方のブログ:https://www.takapy.work/entry/2020/05/17/192947
ソースコード:https://github.com/takapy0210/nlplot

## 画面概要
実際の画面は以下のように分かれています。![画面概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355929/a5a088ae-78b2-5313-d603-7c825934b4f6.png)
大きく分けると、左側がコメントをロードして解析する際の各種設定値を入力する箇所箇所になっており、右側がプロットを実際に表示するエリアになっています。

## 処理概要
内部の処理の概要としては、以下のような形となっています。![無題のプレゼンテーション (2).pptx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355929/769ec818-0693-f804-a4cf-63e62c7b09db.png)
1. management.pyを実行 
2. Youtube API keyを環境変数に登録
3. ウェブブラウザを開きhttp://127.0.0.1:8000にアクセスする
4. viewを呼び出し
5. 実行ボタンが押されることによって、設定が環境変数に登録されget_commentのループが発火
6. create_plotを設定秒数ごとに呼び出し、プロットを更新  
といった順番で動いていきます。取得したコメントの受け渡しはtxtファイルで実施しています

# 動作画面
今回作成したアプリケーションには、以下の3つのタブがあり4つのプロットをリアルタイムで更新しながら表示していきます。

## 単語出現頻度
このプロットに関してはNlPlotを使用していません。除外対象の品詞の単語および、除外対象の単語を外したうえで現在までのコメントの中で出現数の多かった単語をプロットしています。デフォルトでは割合となっていますが、出現数に変更することができ、表示単語数に関してもデフォルトは30ですが変更することができます。![無題のプレゼンテーション (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355929/513a8075-6eb8-07f6-e4b3-51194918a21a.png)

## 共起ネットワーク
共起ネットワークおよびサンバーストチャートを表示しています。このプロットに関しては、簡単に言うと単語のつながりをネットワークで表したものです。また、出現頻度の多い単語になってくると丸が大きくなってくるようになっています。また、下側にサンバーストチャートが表示されており、これは共起ネットワークにおいて同じコミュニティーに属している単語を表示したプロットになっています。
![無題のプレゼンテーション (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355929/367e8f6e-30d2-e6db-c589-94c2aaf7af06.png)
![無題のプレゼンテーション (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355929/42e9c528-5ea4-e321-f3f7-41ecbfd10374.png)

## ワードクラウド
ワードクラウドは、単語の出現頻度に応じて単語のサイズを調整して雲のように表示したものです。出現頻度が大きい単語ほど大きく表示されています。
![無題のプレゼンテーション (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355929/cf77f694-8952-deee-3abd-b55b807adaec.png)

# 使用方法に関して
詳しい使用方法は、以下のリンク先のGithubのREADMEに記載してあるのでそちらをご確認ください。
https://github.com/N-OKAMOTO1031/comment_analysis

## 改修内容、確認済みバグ内容
### 2023/07/07
  * 変更点
      * 設定値をyamlで保存する方式から環境変数として保存する方式に変更
### 2023/06/23
* 変更点
    * 共起ネットワークおよびサンバースプロットのサイズを変更
* notice  
    * get_commentの呼び出し方法の変更に関しては、変更の必要な箇所が多く大規模に改修しないといけないため変更を見送り

### 2023/06/18
* 変更点
    * コメントの受け渡しをcsvからtxtに変更
* 確認済みのバグ
    * defaultのmecabで実行した場合、形態素解析後のリストに品詞が混ざることを確認  
    NEologdを導入すれば問題なく動くため未対応
    * 一定の条件下で、get_commentが実行されないことを確認  
    再現性がないのと、次回更新時にget_commentの呼び出し方法を変更するため様子見


## 今後の改修予定
現状では以下の改修を考えています。ただ、個人で作っているためいつになるかはわかりません。もし使っていただける方がいましたら、バグ報告もしくは改修要望をGitのissueやQiita等に挙げていただければ優先的に対応します。

* ~~コメントの受け渡しをcsvからtxtに変更~~
* ~~グラフの設定値のロードをyamlファイルから直接取得する形に変更~~（環境変数にしました）
* ~~各グラフのサイズ調整~~
* コメントの取得数の推移グラフを追加（ついでに秒間のコメント数を表示）
AndroidStudioでGoogleMapsAPI を触れるようにしたので自分用メモ

# 初めに
自分がAndroidでGoogleMapAPIを触れるようにした手順のメモです。  
一応windowsならほかの環境でも大丈夫なはず。

# 事前準備
AndroidStudioをインストールして、適当なプロジェクトを作成しておく。  

# 手順

### google APIのアクセスキーを取得する

1. [Google Cloud Platform Console](https://console.cloud.google.com/ "Google Cloud Platform Console") にアクセス
2. 初回アクセス時(おそらく)は国と同意が求められるので、同意して続行
3. 検索からGoogle Map Platformにアクセス
4. 左のメニューからAPIを選択
5. 無料トライアルを開始する鵜
4. "Maps SDK for Android" をクリック
5. 『有効にする』ボタンをクリックすると、『APIを有効にしています』というメッセージが出るのでしばらく待機
6. 有効になったら『認証情報』をクリック
7. 『認証情報を作成』をクリックし、展開されるサブメニューから『APIキー』をクリック
8. API キーが発行されるので、コピー

### AndroidStudioに設定する

1. valuesにapi_keys.xmlを作成
2. \<string name="google_maps_key" translatable="false" templateMergeStrategy="preserve">{APIキー}\</string> を追加
3. マニュフェストに \<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_maps_key" />
    を追加
4. gradleに implementation 'com.google.android.gms:play-services-maps:18.1.0' を追加

### SHA1証明書のフィンガープリントを取得する

1. JDKをインストールしていない場合は、[インストール](https://www.oracle.com/java/technologies/downloads/ "JavaDownloads")を行う 
2. c:\Program Files\Java\{jdk}\binまで移動する
3. keytool.exe -list -v -keystore "c:\Users\(ユーザー名)\.android\debug.keystore" を実行
4. パスワードの入力が求められるので入力(初期はandroid)
5. 表示されたSHA1証明書のフィンガープリントをコピー

### API キーを保護する

1. Google Cloud Platform Console でAPIキーを保護することを進められる
2. Select restriction typeにAndroidアプリを指定
3. パッケージ名を設定


#### 参考記事(手順の部分はほぼ)
https://qiita.com/outerlet/items/0d74061fa5d625a33dfb
Gradleで作ったライブラリをGitHub Packagesに公開する

案外このことを簡潔に解説する記事がなかったので、分からない人用に書いておく。
なおこの記事は「なんかこうしたら動いた」であって、ベストプラクティスを説明するものではない。誰か教えてください。
# 対象読者
- groupId って何？artifactId って何？というくらいの人(私もよく分からない)
- すでにプロジェクトをビルドできるところまでは行っている

# したいこと
- Gradleで作ったライブラリを jar 形式で他の(Maven|Gradle)プロジェクトから簡単に読み込めるように公開したい
- ライブラリを使う時、バージョンだけ指定して、ダウンロードはビルドツールにやらせたい

## 例: Mavenならこう指定して使えるようにしたい
```xml:pom.xml
<dependency>
  <groupId>com.skpub</groupId>
  <artifactId>calendertaskscheduler</artifactId>
  <version>1.0.0</version>
</dependency>
```
対象読者のところで書いた通り、groupId って何？artifactId って何？という人は、ここで示されていることである程度それらの役割が分かると思う。要するに、パッケージとして unique になるための情報であって、かつ使う側にとって必要になる情報ということだ。(本質は知らないがそういう側面があることは確かである。)

# 作業開始

## 1. personal access token (classic)) を発行する
これは GitHub Packages の利用に必要な作業だ。
https://github.com/settings/tokens
↑ここから画面右上の Generate new Token (クリックすると選択肢が出るが、classic の方を選ぶ)をクリックし、以下の画像のように権限設定をする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702242/6d3bd07a-6251-27fa-cbd9-6e7e0cba9376.png)
(無駄に多めに権限を追加している可能性がある。信頼できない人は適宜調べてほしい。)
その後トークンを発行する。すると、それらしい文字列が出てくる。
この文字列を、ユーザの環境変数"GITHUB_TOKEN"に追加する。環境変数に追加する方法は OS により異なるので、適当な方法で追加してほしい。このとき、"GITHUB_USER"として、GitHub のユーザ名も環境変数に追加しておく。

## 2. publish できるように設定する
```groovy:build.gradle
plugins {
    id 'maven-publish'
}

publishing {
    repositories {
        maven {
            name = 'GitHubPackages'
            url = uri('https://maven.pkg.github.com/[ユーザ名]/[リポジトリ名]')
            credentials {
                username = System.getenv('GITHUB_USERNAME')
                password = System.getenv('GITHUB_TOKEN')
            }
        }
    }
    publications {
        gpr(MavenPublication) {
            artifactId = '[指定したいartifactId(ただし全て小文字のこと)]'
            from(components.java)
        }
    }
}

```

このように設定に追記する。追記すると言っても、コピペすればいいというのではない。
まず、[云々]という部分は、云々の部分を貴方の環境に合わせた文字列に置き換えた上で[]を削除してほしいという意味である。
また、pluginsという要素はすでに存在して、その中にはすでに id 'java-library' などがあるはずだ。
こういうとき、その部分は
```groovy
plugins {
    id 'java-library'
    id 'maven-publish'
}
```
とでもしておけばよい。他も同じことである。
なお、ここで groupId は？ version は？と気になるはずだ。私も気になる。ただ私の build.gradle の場合はトップレベルに group, version という変数で設定されていた。どうやら勝手にこの部分から読んでくれるらしい。これらがなかった場合はトップレベルに追加するのが良いか、それとも publishing>publications>gpr(MavenPublication) 内に追加すればよいのか知らないが、とりあえず私の環境ではトップレベルに
```groovy
group 'com.skpub'
version '1.0.0'
```
と設定されていた。ここが「ベストプラクティスではないので誰か教えてください。」の点である。教えてください。

この状態で、
```shell
~$ gradle publish
```
すれば、公開されてくれるはずだ。
当該リポジトリの画像で示した部分から、公開したものが見られるはずだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702242/70406a42-5cc9-f1a2-1313-8843c9961ce7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702242/fe8d11a0-f535-d259-0d5a-94ab22b23b3e.png)


以上。

### 参考文献
https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-gradle-registry
TypeScriptの型定義時に使用する「？」

# 疑問
TypeScriptで型定義時に「？」を付ける場合とつけない場合があるが、違いは何か。

```interface.ts
    export interface Post {
      id: number
      title?: string
    }
```

# 答え
省略可能（必須でない）プロパティのときにつける。
?のついた引数は**オプション引数 (optional parameter)** と呼ばれる。
オプション引数は、型とundefinedのユニオン型となる。
上記の例だと、titleは、string | undefined型になる。

# おまけ
下記の書き方だと、titleはstring | undefined型となるが、省略ができないので注意。

```interface.ts
    export interface Post {
      id: number
      title: string | undefined
    }
```

# 参考
https://nakagaw.hateblo.jp/entry/2018/07/11/104200
https://yukimasablog.com/typescript-optional
https://typescriptbook.jp/reference/functions/optional-parameters
【Rails】byebugの使用例

### 備忘録

```boards_controller.rb

def create
    byebug
    @board = current_user.boards.build(board_params)
    if @board.save
      redirect_to boards_path, success: t('defaults.message.created', item: Board.model_name.human)
    else
      flash.now['danger'] = t('defaults.message.not_created', item: Board.model_name.human)
      render :new
    end
  end
```

![スクリーンショット 2023-06-10 16.37.38（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/59693bb0-b08a-a88b-ede3-49cee7b76a98.png)

```
   11:     @board = Board.new
   12:   end
   13: 
   14:   def create
   15:     byebug
=> 16:     @board = current_user.boards.build(board_params)
   17:     if @board.save
   18:       redirect_to boards_path, success: t('defaults.message.created', item: Board.model_name.human)
   19:     else
   20:       flash.now['danger'] = t('defaults.message.not_created', item: Board.model_name.human)
(byebug) board_params
<ActionController::Parameters {"title"=>"aaaaa", "body"=>"bbbbb", "board_image_cache"=>""} permitted: true>
```

**デバッグ勉強中**
nvmでnodeの管理

## はじめに
nodeのバージョンを調整するのに同じことを毎回調べて行うので整理した。

## 前提
nvmで管理する例、Mac使用。

## 使用イメージ
各々ディレクトリ毎にnodeのバージョンを設定する。
nvmrcのファイルがない場合、デフォルトのバージョン

・ディレクトリにnvmrcのファイルがない場合
```bash
apple@appurunoMacBook-Pro htdocs % node -v
v18.16.0
```

・ディレクトリにnvmrcのファイルがある場合
```
apple@appurunoMacBook-Pro htdocs % cd nodeTest 
Found '/Applications/MAMP/htdocs/nodeTest/.nvmrc' with version <14.15.1>
Now using node v14.15.1 (npm v6.14.8)
apple@appurunoMacBook-Pro nodeTest % node -v
v14.15.1
apple@appurunoMacBook-Pro nodeTest % 
```

## 準備
1.設定ファイルに下記を設定する
```zsh
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc
```
2.デフォルトのバージョンを設定する
```
nvm alias default 18.16.0
```

3.デフォルトのNode.jsのバージョンを確認
```
nvm alias default
```

## nodeのバージョン設定
nodeのバージョンをdefaultが適用される。

ディレクトリで変更したい場合以下の手順を行う。
.nvmrcファイルを使用
1.プロジェクトのルートディレクトリに移動
```bash
cd /path/to/your/project
```

2 .nvmrcファイルを作成し、使用したいNode.jsのバージョンを記述
```
touch .nvmrc
```
```bash
echo "14.15.1" > .nvmrc
```
(以下はすぐに反映されない場合)
```bash
nvm use
```

### 設定ファイルがどれかわからなくなった場合
ターミナルで以下のコマンドを実行
```
echo $SHELL
```
/bin/zsh ならば、デフォルトのシェルは zsh、出力が /bin/bash ならば、デフォルトのシェルは bash。
zshの主要な設定ファイルは.zshrc、bashの主要な設定ファイルは.bashrc。

## メモ
・インストール可能な Node.js のバージョンの一覧
```
nvm ls-remote
```

・Node.jsのバージョンを確認
```
node -v
```

・npmのバージョンを確認
```
npm -v
```
・ Node.jsのバージョン設定
1.Node.jsのバージョンのインストール
```bash
nvm install <version>
```

Node.js 14.15.1をインストールする場合
```bash
nvm install 14.15.1
```

2.Node.jsのバージョンの切り替え
```bash
nvm use 14.15.1
```


## 参考記事

https://maku77.github.io/nodejs/env/nvm.html

https://nodejs.keicode.com/nodejs/how-to-use-nvm.php

https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a
cscの作法 その356

# 概要
cscの作法、調べてみた。
オーバーレイフォームを見つけたので、やってみた。

# 参考にしたページ。

https://qiita.com/kumaS-kumachan/items/ebbc7e9abefc610fb327

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/658421fd-e2c2-7937-b40d-0a7a8532c910.png)


# サンプルコード

```


using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace App
{
	public partial class Form1: Form {
		Button button1;
		public Form1() {
			Text = "overlay";
			ClientSize = new Size(300, 200);
			FormBorderStyle = FormBorderStyle.None;
			ShowInTaskbar = false;
			TransparencyKey = BackColor;
			Opacity = 0.7;
			StartPosition = FormStartPosition.Manual;
			Location = new Point(0, 0);
			TopMost = true;
			button1 = new Button();
			button1.Location = new Point(20, 20);
			button1.Text = "make";
			button1.Click += new EventHandler(button1_Click);
			Controls.AddRange(new Control[] {
				button1
			});
		}
		protected override CreateParams CreateParams {
			get {
				CreateParams cp = base.CreateParams;
				cp.ExStyle |= 0x00000020;
				return cp;
			}
		}
		private void button1_Click(object sender, EventArgs e) {
			MessageBox.Show("ok");
		}
		[STAThread]
		public static void Main() {
			Application.Run(new Form1());
		}
	}

}




```

以上。
図で説明するのは難しい

## はじめに

先日こんなやり取りがありました。

わたし「何かを説明する時に**図を描くと通じやすくていい**という話をみんなにしてるけど誰も図を描いてくれないんだよね。お客さんと話をする時にもパパパっと描けるとものすごく話しやすいし。」

若手「描く余裕がないんじゃないですか？」

なるほど。

## Twitter の絵師さんにイラスト依頼の話

「パパパっと描けるんでしょ？」と安い単価でイラスト依頼を出して炎上したケースがありました。
ものすごい時間の練習と工夫と努力の結果、挫折せずに続けられた人だけがパパパっと描けるようになっているのに、それに対してリスペクトがなかったり報酬が伴っていないというのは酷いという話でした。

![パパパ.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/4c23c08d-b3dc-ac15-4085-0afe3521386f.png)

そうです。いきなりパパパっとは描けませんし、パパパっと描けるようになるにはものすごく時間がかかるのです。

ただ、そうは言っても、描かないことにはいつまで経ってもパパパっと描けるようにならないのです。

## 成果が見えづらい修行と口頭・文章の限界

図を描き慣れていない方が図で説明しようとした場合、口頭で説明するより伝わりづらいことがあるかもしれません。
また、作画するために口頭で説明するより時間がかかってしまうかもしれません。
ただ、修行をしていくとそれは少しずつ改善されて口頭だけでは説明できないことを説明できるようになるかもしれません。

図に示すとこのような感じかと思います。
![修行と伝わる度.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/37d6384e-eb3c-3234-321c-3da8a5b7290a.png)

上記の文章と図は同じ内容ですが、**図の方が直感的に理解できる情報の量が多い**のではないでしょうか。

冒頭で「余裕がない」という話にあった通り **「必要な速さで説明するためには口頭や文章でしかできない。」** と感じているかもしれません。それは、日常生活で「口頭や文章」で伝える機会に対して「図」で伝える機会が圧倒的に少なく充分な修行が行えていないことに起因していると思います。

ただ、口頭や文章では伝えきれないことを伝える必要もでてきます。その時に「図で説明するスキル」が欲しいと思っても、すぐに身につくスキルではないところが難しいところですね。

## おわりに

口頭や文章で伝わるものは図にする必要はありません。
また、資料が寂しいからと意味のない賑やかしの図を載せる必要もありません。
そういうことは、コスパやタイパが悪いのでやめた方がいいです。

きちんと明確に伝えたいことを、より伝わりやすく伝える図を描くべきですが、その様な図を適材適所に配置できるようになるには相当な量の修行が必要なので、意識して図を描く機会は作るとよいと思っています。

シンプルに図を描くのは楽しいのでぜひ取り組んでみてください。[^1][^2]

![Qiitaと図.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/6ec31c17-18fb-25b5-0aa7-2c49200ac9f1.png)

## おまけ１（新卒エンジニア向け手紙）

https://qiita.com/kaku3/items/2c8d4d783be7ce4fc9ea

https://qiita.com/kaku3/items/0bf1703cb8d6f84afbc5

## おまけ２（新卒エンジニア向け記事）

https://qiita.com/kaku3/items/fb949aa1a53f1f71c796

https://qiita.com/kaku3/items/aa2f81cf1e3974b8ad3a

https://qiita.com/kaku3/items/937354cc180c8bee823b

https://qiita.com/kaku3/items/b1c94328f273c750286b

## おまけ３（...は難しいシリーズ）

https://qiita.com/kaku3/items/f8411523cce000de750e

https://qiita.com/kaku3/items/5b11d2e1aace73c36340

## おまけ４（営業A短編シリーズ）

https://qiita.com/kaku3/items/03aae7b9e3c70c55f513

https://qiita.com/kaku3/items/3378ea55b1240d7360a1

## おまけ５（エンジニアのためのお仕事問題集）

2030年にIT人材が最大79万人不足するとのことで、学習用の資料をgitで**無料**公開してます(不定期更新)。
よろしければどうぞ。

[エンジニアのためのお仕事問題集](https://github.com/kaku3/workbooks)

[^1]: いいねがほしいと書くといやらしいので、さりげなく図でほのめかしてみました。ほしいです。
[^2]: 今回作成した図はすべて VS Code の [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) を用いて作成しました。
TypeScriptにて、ログ出力クラスを作ってみる

## モジュールインストール
```
npm i @aws-lambda-powertools/logger
```

## ロガーインスタンス生成。これが無いと始まらない
```typescript:anime-suko.ts
// ロガー設定
const logger = new Logger({ serviceName: "何かしらサービス名" })
```

## 常にログに出力させたいものを指定(Attributeを出力ログに含める)
```typescript:anime-suko.ts
// ログ出力に出力したいものを連想配列で指定して追加
export const addOutputLogValue = async (addValue: Record<string, string>) => {
  logger.addPersistentLogAttributes(addValue)
}
```

## 通常ログ
※ここから注意だが、logger.infoにはnullやundefinedが入るとエラーになる。いい感じに処理してくれないので、自分でなんとかするしかない。
```typescript:anime-suko.ts
export const outputLog = async (value: string) => {
  // 値が入っているときのみログ出力(nullやundefinedは指定不可能)
  if (!value) {
    logger.info('ログ出力に指定されたデータが入っていません')
    return
  }
  logger.info(value)
}
```

## エラーログ
```typescript:anime-suko.ts
export const outputErrorLog = async (value: string) => {
  // 値が入っているときのみログ出力(nullやundefinedは指定不可能)
  if (!value) {
    logger.info('ログ出力に指定されたデータが入っていません')
    return
  }
  logger.error(value)
}

```

## デバッグログ
```typescript:anime-suko.ts
export const outputDebugLog = async (value: string) => {
  // 値が入っているときのみログ出力(nullやundefinedは指定不可能)
  if (!value) {
    logger.info('ログ出力に指定されたデータが入っていません')
    return
  }
  logger.debug(value)
}
```
kaleidoパッケージをインストールしているのにkaleidoをインストールしてくれと言われた

plotlyで作成したグラフをPDF出力とhtml出力させようとしたらハマった話の第三弾です。
第二弾で完結予定だったのですが、久しぶりに動かしてみたらValueErrorが出てしまったので備忘メモとして残したいと思います。

関連する過去の記事は以下です。
* 第一弾の[fig.write_imageを実行するとValueErrorが発生してハマった話](https://qiita.com/yuuun/items/1e35318c067e7e6b3465)
* 第二弾の[plotlyを実行したらAttributeErrorが発生してハマった話](https://qiita.com/yuuun/items/0157138c249e8162bdbb)

## 環境
使用した環境
・Google Colaboratory
使用言語
・Python==3.10.12
使用パッケージ
・Plotly==5.3.1
・kaleido==0.2.

## やりたかったこと
Plotlyで作成したグラフをpdf形式で静的なグラフを画像生成することと、動的なグラフをhtml形式で出力したい！


## エラー内容
```python:ValueErrorが発生したコード
fig.to_image(format="png", engine="kaleido")
```
```出力されたエラー
ValueError: 
Image export using the "kaleido" engine requires the kaleido package,
which can be installed using pip:
    $ pip install -U kaleido
```
kaleidoを既にインストールしているのにインストールするように言われてしまいました。。。

## やってみたこと
①pip install -U kaleidoを実行
→変化なし

②書き方を変えてみた
```python:変えてみたコード
import plotly.io as pio
import kaleido

pio.write_image(fig, "sample.png", engine="kaleido")
```
→変化なし

## 解決方法
そもそもkaleidoを指定する必要が無く、シンプルにfig.write_image、fig.write_htmlで大丈夫でした。

```python:サンプルコード
fig.write_image("sample.pdf")
fig.write_html('sample.html')
```
Dockerでrailsコマンドが打てない

# 1.困っていたこと
Dockerコンテナに入った後に、railsコマンドが使用できず困っていました。

**ターミナルでDockerコンテナに入る**
~~~
$ docker-compose exec コンテナ名 bash
~~~
**railsコマンドを打つ**
~~~
root@------/------# rails routes 
~~~
**すると**
~~~
root@------/------# rails routes 
bash: rails: command not found
~~~
そのようなコマンドはないとの表示。

# 2.解決

Dockerコンテナ内からrailsコマンドを打つときは、`bundle exec`をつけること。
~~~
root@------/------# bundle exec rails routes 
~~~
これで無事にrails コマンドが通りました。

# 3.コンテナ外からコマンドを打つ場合
~~~
docker-compose exec コンテナ名 bundle exec rails
~~~
【Python】QRコード生成

pythonでQRコードを作成するプログラムを製造しました。
記録として投稿します。

以下が製造したプログラムの画像です。
![2023-06-10 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759758/9891706c-4693-8562-9821-ddb3a989b097.png)

## 機能説明

URLを入力する。
QRコードの名前を入力する。
QRコード生成ボタンをクリックするとQRnameで入力した文字でQRコードが画像で生成される。

## プログラムコード

```python
import qrcode
import tkinter

def btn_click():
    S = txt_1.get()
    qr_name = txt_2.get()
    img = qrcode.make(S)
    img.save(f'{qr_name}.png')

# 画面作成
tki = tkinter.Tk()
tki.geometry('460x190')
tki.title('QRコード作成')
tki.configure(bg='SpringGreen2')

lbl_1 = tkinter.Label(text='URL')
lbl_1.place(x=70, y=50)

lbl_1 = tkinter.Label(text='QRname')
lbl_1.place(x=70, y=100)

txt_1 = tkinter.Entry(width=30)
txt_1.place(x=130, y=50)

txt_2 = tkinter.Entry(width=30)
txt_2.place(x=130, y=100)

# ボタン
btn = tkinter.Button(tki, text='QRコード生成', command=btn_click)
btn.place(x=180, y=150)
tki.mainloop() # アプリを起動
```

実際に作成したQRコードは以下になります。
![キータマイページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759758/f672702c-a838-b96b-deba-8a0e893088f8.png)

是非参考にしてください！！