OmniAICreator/Qiita-1.07M huggingface dataset:
今更Amazon Linux 2018.03でGoogle Cloud CLIを使う

## EC2セットアップ
2023年4月現在、公式の `Amazon Linux 2018.03` はサポート期限切れのため、ありません。
マシンイメージ選択時に「amzn-ami-hvm-2018.03」で検索して、AWS Marketplace AMIかコミュニティAMIの中から選びましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90217/ef9e8886-3682-80d7-af0d-1ee0b81430c9.png)


## Python 3.6 のセットアップ

Amazon Linux 2018.03のPythonは 2.7.18 が入っています。
Google Cloud CLIの利用には3.5〜3.9が必要です。
元から入っているPython2系を抜くことなく、Python3.6をインストールします。


https://cloud.google.com/sdk/gcloud/reference/topic/startup

```
export CLOUDSDK_PYTHON=python3
sudo yum -y install python36-devel python36-libs python36-setuptools
python3 -V
sudo python3 -m ensurepip --upgrade
python3 -V
```

上記URLに従って、 Python 3.6 をインストールします。

## Google Cloud CLIのセットアップ

https://cloud.google.com/sdk/docs/install?hl=ja#linux

```
curl -O https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-cli-426.0.0-linux-x86_64.tar.gz
tar -xf google-cloud-cli-426.0.0-linux-x86_64.tar.gz
./google-cloud-sdk/install.sh

ここでログインし直し

./google-cloud-sdk/bin/gcloud init
```

## 接続テスト

Google Cloud Platform の方で、プロジェクトを作っておきます。

```
gcloud network-management connectivity-tests create my-test --source-instance=projects/my-project/zones/us-west-1/instances/my-instance --destination-ip-address=10.142.0.2 --destination-network=projects/my-project/global/networks/peering-network --project aaaaaa-bbbbbb-000000
gcloud network-management connectivity-tests list --project aaaaaa-bbbbbb-000000

NAME     PROTOCOL SRC_PROJECT SRC_IP SRC_VM DST_PROJECT  DST_IP DST_VM DST_PORT UPDATED LABELS
my-test                              pr(略)              10(略)                  202（略)
```

## 確認

Google Cloudのアクティビティで確認できれば完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90217/4e9a2d8c-535a-1a36-3c4b-3c5a7c989659.png)
【SwiftUI】「もっと見る」機能を作成する

# はじめに
長い文章を省略表示できる機能を作成する機会があったので記録しておきます。

# 動画
![Simulator Screen Recording - iPhone 14 Pro - 2023-04-17 at 22.06.36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/09b9143f-eb58-b0ed-0852-9c36d29d98f4.gif)

# 実装
```swift
import SwiftUI

struct ReadMoreText: View {
    private let text: String
    private let lineLimit: Int
    @State private var isExpanded = false

    init(_ text: String, lineLimit: Int = 3) {
        self.text = text
        self.lineLimit = lineLimit
    }

    var body: some View {
        VStack(spacing: 3) {
            Text(text)
                .lineLimit(isExpanded ? nil : lineLimit)
                .frame(maxWidth: .infinity, alignment: .leading)
            Button {
                withAnimation { isExpanded.toggle() }
            } label: {
                Text(isExpanded ? "一部を表示" : "もっと見る")
                    .fontWeight(.regular)
            }
            .frame(maxWidth: .infinity, alignment: .trailing)
        }
    }
}
```

# 使い方
```swift:ContentView
import SwiftUI

struct ContentView: View {
    let text = """
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    長い文章です長い文章です長い文章です長い文章です
    """
    var body: some View {
        ReadMoreText(text)
    }
}
```

# おわり
最近、Twitterも140字以上投稿できるようになってShowMoreをよく見ます
DDD初心者でも仲良くなりたい ~集約編~

## 集約とは
・リポジトリに入出力する単位
・エヴァンス本の中でも、エンティティや値オブジェクトなどと同列の位置付け

## 前提
- オブジェクト指向プログラミングでは複数のオブジェクトがまとめられ、一つの意味を持ったオブジェクトが構築される。

- こうしたオブジェクトのグループには維持されるべき不変条件が存在する。不変条件は常に維持されることが求められるが、オブジェクトのデータを変更しようとする操作を無制限に受け入れてしまうと難しくなる。そのためオブジェクトの操作には秩序が必要。

- 集約は不変条件を維持する単位として切り出され、オブジェクトの操作に秩序をもたらす
- 集約には境界とルートが存在する

>・境界：集約に何が含まれるのかを定義するための境界。
>・ルート：集約に含まれる特定のオブジェクト。外部からの集約に存在するオブジェクトを外部に曝け出さないことで、集約内の普遍条件を維持できるようにしている。

## ルール
- 集約の外部から境界の内部のオブジェクトを操作してはいけない
- 集約を操作するための直接のインターフェースとなるオブジェクトは集約ルート（AR：Aggregate Root）と呼ばれるオブジェクトに限定される
BufferedReaderでテキストをまとめて読み込む(readLineメソッド)【Java】

「BufferedReaderクラスでファイルを1行ずつ読み込む方法」
Javaにはファイルを読み込むための「BufferedReaderクラス」があります。

### BufferedReaderとは
BufferedReaderクラスとは、テキストファイルを読み込むためのクラス。
BufferedReaderクラスでは、テキストファイルを1行ずつ読み込むreadlineメソッドが用意されている。
テキストファイルを読み込むクラスにはFileReaderクラスもあるが、こっちはテキストを1文字ずつ読み込むため効率が悪い場合がある。
そのため、テキストファイルの読み込みはBufferedReaderクラスを使うようにするのがよい！

### BufferedReaderの使い方
readLineメソッドは指定したテキストファイルを1行ずつ読み込み、String型の戻り値として返す。
ファイルの終わりに到達した場合は「null」を返す。
そのため、ファイルの終わりまで読み込む場合には、while文でnullが返されるまでループさせる。

### コード例
```Main.java
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
 
public class Main {
 
    public static void main(String[] args) {
        try {
            // ファイルのパスを指定する
            File file = new File("c:SampleTest.txt");
         
            // ファイルが存在しない場合に例外が発生するので確認する
            if (!file.exists()) {
                System.out.print("ファイルが存在しません");
                return;
            }
         
            // BufferedReaderクラスのreadLineメソッドを使って1行ずつ読み込み表示する
            FileReader fileReader = new FileReader(file);
            BufferedReader bufferedReader = new BufferedReader(fileReader);
            String data;
            while ((data = bufferedReader.readLine()) != null) {
                System.out.println(data);
            }
         
            // 最後にファイルを閉じてリソースを開放する
            bufferedReader.close();
         
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
```
```
//実行結果
SAMURAI
ENGINEER
```

### 文字コードを変換して読み込む方法
BufferedReaderクラスで読み込む前に処理を加えることで、別の文字コードに変換することが可能。
先ほどのサンプルコードでは、FileReaderクラスのオブジェクトを指定してBufferedReaderクラスで読み込みを行った。
別の文字コードに変換して読み込む場合は、「InputStreamReader」及び「FileInputStream」クラスを拡張したオブジェクトを指定してBufferedReaderクラスで読み込む。


#### 参考サイト
https://www.sejuku.net/blog/49981
情弱な自分がマウス操作をちょっとだけ便利にさせてみた

# この記事は何?
**CrxMouse Chrome™ Gestures**というchromeの拡張機能を紹介

# CrxMouse Chrome™ Gesturesとは?
マウスだけでドラッグ操作で一気に上や下にスクロールさせたり、気になるテキストをグーグル検索できたりする便利な機能

# 使い方
### ①[インストール画面](http://)へ移動
### ②Add to Chromeをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/94539e43-1680-5a07-c16c-42eba8b0da96.png)

### ③Agreeをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/974e343c-6188-73ff-06ee-4c475ac6c3f9.png)

### ④どんな機能かゲーム感覚で試してみる
- 左下のネズミの画面をクリックすると、どんな感じで使うか教えてくれます。
- これで使い方はほぼ理解できちゃいます!!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/f6482657-85cc-3597-777e-9aa2f3f3cbff.png)


### ⑤マウスジェスチャーを設定する
- マウスジェスチャーとは?
    - **マウスの右クリック**を押しっぱなしにする事
- 設定方法
    - 初期設定を全部消す
        - いきなり全部は使いこなせない、慣れたら色々試してみる
    - 赤枠のDeleteで全部消す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/66ae937e-3411-d22e-19b5-20340a1ef883.png)

- 新しく設定する
    - newgesture（赤い枠）をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/7d301b95-bd2a-9c1f-22a5-b53fed284364.png)
    - 右マウスを押したまま**下**に動かす → **「一番下までスクロール」** を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/28004ea3-e2ce-98e6-b5b1-eaa5c514ea03.png)
    - これで設定完了
    - 同じようにnewgestureをクリック→右マウスを押したまま**上**に動かす → **「一番上までスクロール」** を選択。

- 以下のような設定になっていると思います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/6851ec26-3a47-36ba-09fe-a7c3857519a7.png)

### ⑥設定完了!試しにスクロール出来るかやってみましょう!
1. [yahooのトップ](https://www.yahoo.co.jp/)へ移動
1. yahooへ移動したら右クリックを押しながら上や下にドラッグ
1. 紫色の線が出てくる
1. 右クリックを離す
1. 一気にスクロールされる
1. 感動!!


### 最後に
- **スーパードラッグ（左クリックを押しっぱなしにする事）** でテキストをグーグル検索することも出来ます!
    - 赤い矢印の部分で設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/faf54103-d38e-0af5-601b-01858fbb5623.png)
phpでLaravel開発をAuth認証と共に開始する (2023/04/17)

# はじめに

Laravelを始めるときのインストールを忘れそうなので備忘録。
試験的に作成するときや、テストのためにパスワードやセキュリティについては最小限にしているため、そのままの使用は推奨しない

# Versions

```bash
$ php -v
PHP 8.1.2-1ubuntu2.11 (cli)...

$ composer -V
Composer 2.2.6 2022-02-04 17:00:38

$ n -V
v9.1.0

$ node -v
v19.9.0

$ npm -v
9.6.3

$ mysql -V
mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubunut))
```

# Bash

```bash
  # Install required apt
$ sudo apt-get update
$ sudo apt install -y php php-curl php-mysql php-bcmath php-mbstring php-xml php-zip
$ sudo apt install -y composer mysql-server npm vim
$ sudo npm install -g n
    # n ls-remote
    # sudo n 16.20.0	
$ sudo n latest
$ exit
    # RESTRT TERMINAL

  # Install mysql
$ sudo service mysql start
$ sudo service mysql status
$ sudo mysql_secure_installation
  :y # YES
  :0 # LOW=0
  :a # PASSWORD
  :a # CONFIRM
  ^C # Force Exit
$ sudo mysql -u root -p
Enter password: # none
  mysql> set global validate_password.length=4;
  mysql> set global validate_password.policy=LOW;
  mysql> alter user 'root'@'localhost' identified by '0000';
  mysql> create user 'user'@'localhost' identified by '0000';
  mysql> grant all privileges on *.* to 'user'@'localhost';
  mysql> flush privileges;
  mysql> create database laravel;
  mysql> exit
$ sudo service mysql restart

  # Create Laravel Project
$ cd ~
$ composer create-project --prefer-dist laravel/laravel SampleProject
$ cd SampleProject

  # Database Connection Settings in Laravel
$ vim .env
    # DB_HOST=localhost
    # DB_USERNAME=user
    # DB_PASSWORD=0000
    # :wq <- Save & Exit

  # Add Auth authentication function
$ composer require laravel/ui
$ php artisan ui vue --auth
$ npm install
$ npm run dev
    # Move to new window while keeping run

  # Migrate database and run Laravel
$ php artisan migrate
$ php artisan serve
```

# Reference

https://qiita.com/keisukeYamagishi/items/d897e5c52fe9fd8d9273

https://qiita.com/k_suke_ja/items/99bed717b42fcff8bef7

https://qiita.com/bz0/items/44b9280fd17566b8c49e
[AWS Q&A 365][SecretManager]AWSのよくある問題の毎日5選 #32

# 1. AWS Secrets Managerを使用した秘密情報の監視方法には、どのようなものがありますか？
回答：AWS Secrets Managerには、AWS CloudTrailによるログ記録、Amazon EventBridgeによるイベントの一致、Amazon CloudWatchによる監視、監査によるコンプライアンス検証など、複数の監視オプションが用意されています。

# 2. 削除予定のシークレットを監視するために、CloudTrailを使用することはできますか？
回答：はい、CloudTrailはCloudWatchログへのファイル配信をログに記録するように構成でき、CloudWatchアラームを作成して、削除予定のシークレットを監視することができます。

# 3. CloudWatchアラームを使用して、Secrets Managerメトリックスを監視する方法は何ですか？
回答：CloudWatchアラームを作成してSecrets Managerメトリックスを監視し、特定の閾値や条件に基づいてアラートをトリガーすることができます。

# 4. 監査によるコンプライアンス検証の目的は何ですか？
回答：監査によるコンプライアンス検証により、組織は秘密情報が規制要件や内部方針に適合していることを確認できます。

# 5. 複数のAWSアカウントやリージョンで秘密情報を監視することは可能ですか？
回答：はい、AWS Secrets Managerは、複数のAWSアカウントやリージョンからシークレットを集約することができ、スケールで秘密情報を監視および管理することができます。
[AWS Q&A 365][SecretManager]Daily Five Common Questions #32

# 1. What are some ways to monitor secrets using AWS Secrets Manager? 
Answer: AWS Secrets Manager offers several options for monitoring secrets, including logging with AWS CloudTrail, matching events with Amazon EventBridge, monitoring with Amazon CloudWatch, and compliance validation through auditing. 

# 2. Can CloudTrail be used to monitor secrets scheduled for deletion? 
Answer: Yes, CloudTrail can be configured to log file delivery to CloudWatch logs, and a CloudWatch alarm can be created to monitor secrets scheduled for deletion. 

# 3. How can CloudWatch alarms be used to monitor Secrets Manager metrics? 
Answer: CloudWatch alarms can be created to monitor Secrets Manager metrics, and alerts can be triggered based on specific thresholds or conditions. 

# 4. What is the purpose of compliance validation through auditing? 
Answer: Compliance validation through auditing allows organizations to ensure that their secrets meet regulatory requirements and internal policies. 

# 5. Is it possible to monitor secrets across multiple AWS accounts and regions? 
Answer: Yes, AWS Secrets Manager allows for aggregation of secrets from multiple AWS accounts and regions, making it easier to monitor and manage secrets at scale.
Leetcode 1431. Kids With the Greatest Number of Candies

https://leetcode.com/problems/kids-with-the-greatest-number-of-candies/description/
# アプローチ
- Brute force

# コード
```java
class Solution {
    public List<Boolean> kidsWithCandies(int[] candies, int extraCandies) {
        int max = Integer.MIN_VALUE;
        for (int c : candies) {
            max = Math.max(max, c);
        }

        ArrayList<Boolean> arrayList = new ArrayList<>();
        for (int c : candies) {
            if (c + extraCandies < max) {
                arrayList.add(false);
                continue;
            }
            arrayList.add(true);
        }
        return arrayList;
    }
}
```
プロンプトを改善するプロンプトを試してみる

# はじめに
discord>Learn Prompting>share-your-promptsより
Prompt to help with prompting;)
の手法がよかったのでメモっとく

# プロンプト原文

```
I want you to act as a prompt engineer. Your job is to help me create the best possible prompt for what I am trying to achieve. The prompt will be used by you, ChatGPT. 

To begin, you will ask me what I need a prompt for. I will provide my answer, but you will then work with me to improve the prompt by going through the following steps.

You will generate two sections:

a) Revised Prompt: (Provide your rewritten prompt. It should be clear, concise, and easily understood by you)

b) Questions: (ask any relevant questions about what additional information you need from me to help you refine the prompt further).

Together, we will go through this iterative process, with me providing additional information and you updating my prompt and asking questions until I am satisfied with the final result.
```

# プロンプト和訳
試すときは和訳版を使いたいのでdeepLの力で和訳

```
あなたには、プロンプトエンジニアとして活動してほしいのです。あなたの仕事は、私が達成しようとしていることに最適なプロンプトを作るのを手伝うことです。プロンプトは、ChatGPTのあなたが使うことになります。

まず、あなたは私に「何のためにプロンプトが必要なのか」を尋ねます。私はその答えを伝えますが、あなたは私と一緒に次のステップを踏んでプロンプトを改良してください。

あなたは、2つのセクションを作成します：

a) 改訂版プロンプト：（書き直したプロンプトを提出します。明確かつ簡潔で、あなたが理解しやすいものである必要があります。）

b) 質問：（プロンプトをさらに洗練させるために必要な追加情報について、関連する質問をする）。

私が追加情報を提供し、あなたが私のプロンプトを更新し、私が最終結果に満足するまで質問をする、この繰り返しプロセスを一緒に行います。
```

# やってみた
試しに「岡山県から大阪府への引っ越しプランを提案してください。」ってお題でどんだけ改善されるか検証。
結果はコチラ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/19eafcd9-712f-26a8-49dd-4f1085d8903d.png)

回答するたびにプロンプトが徐々に具体的になっていくようだ。
まだまだ続けられそうだけど、このあたりで生成プロンプトの仕上がりを試してみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/cbab8376-5766-cc12-9785-33bc843d279a.png)

# 生成したプロンプトで回答させてみた
このあたりで実際にChatGPTに生成したプロンプトでの回答結果を見てみよう。
結果がこちら。まぁまぁいい感じの仕上がり。
要件定義の精度を上げるときに使えるかもしれない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5f59d267-e498-e274-fa96-a70c1a3c8876.png)
オートフィルタのフィルタ表示を確実に消す

## コード
　この二段構えでオートフィルタの絞り込みと表示を消し去ります。
```vb
    'オートフィルタ絞り込みの解除
        If ActiveSheet.Filtermode = True Then
             ActiveSheet.ShowAllData
        End If
```
```vb
      'オートフィルタ表示の解除(Ａ１がオートフィルタ行の左上)
        If Not (ActiveSheet.AutoFilter Is Nothing) Then
            ActiveSheet.Range("A1").AutoFilter
        End If
```

## オートフィルタが表示されているかの判定
　そんなの、ActiveSheet.FilterModeで判定でしょ！と思っていたのですが
```vb
Sub autofilter()
    MsgBox ActiveSheet.FilterMode
End Sub
```
あれ？Trueにならない？
![2023-04-17 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622636/f15064fc-99c3-e368-4e93-62a9464680c4.png)
　オートフィルタが表示されているか否かの判定は、ActiveSheet.filtermode = Trueでは不正確です。
　ActiveSheet.filtermodeはオートフィルタで絞り込まれているときはTrueを返しますが、フィルタが表示されていないときはもちろん、**フィルタが表示されているが絞り込まれていないときもFalse**になります。


　結論から述べると、オートフィルタ表示の有無はActiveSheet.AutoFilterがNothingか否かで判定できます。
- ActiveSheet.Autofilter Is Nothing = True オートフィルタ表示なし
- ActiveSheet.Autofilter Is Nothing = False オートフィルタ表示あり
```vb
Sub autofilter()
    MsgBox (ActiveSheet.autofilter Is Nothing)
End Sub
```
![2023-04-17 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622636/69f4c506-bedc-5fe7-c79d-b20b10870ff5.png)

　そして、ActiveSheet.Range("A1").AutoFilterのような形でフィルタ表示の有無を切り替えます（Ａ１がオートフィルタが表示される行の一番左上のとき）

　オートフィルタの解除には、絞りこみを解除するShowAllDataとオートフィルタ表示を解除（解除時は設定）するAutoFilterがあります。

　なんとなくActiveSheet.Filtermodeでオートフィルタの有無を判定して
```vb:オートフィルタ解除できない
    '解除できません！
        If ActiveSheet.Filtermode = True Then
             ActiveSheet.ShowAllData
             ActiveSheet.Range("A1").AutoFilter
        End If
```
で全解除できそうな気がしますが、フィルタの絞り込みがかかっていないときは解除されません。
- 絞りこみを解除するActiveSheet.ShowAllData
　→絞り込み判定をするActiveSheet.Filtermodeで判定
- オートフィルタ表示を解除（解除時は設定）するActiveSheet.Range("A1").AutoFilter
　→ActiveSheet.autofilter Is Nothing
で判定をするのが相性がいいです。

なので
```vb
    'オートフィルタ絞り込みの解除
        If ActiveSheet.Filtermode = True Then
             ActiveSheet.ShowAllData
        End If
```
```vb
      'オートフィルタ表示の解除(Ａ１がオートフィルタ行の左上)
        If Not (ActiveSheet.AutoFilter Is Nothing) Then
            ActiveSheet.Range("A1").AutoFilter
        End If
```
とすると**オートフィルタの絞り込みも表示もきれいに消せる**ということになります。
【小ネタ】playwright-core ＋ Codegen の結果を年月日・時間がついたファイル名で書き出す（Windowsの コマンドプロンプト・PowerShell）

つい先日、以下の記事を書いた際に Mac でやっていた内容を、Windows にも対応させるためにやった内容のちょっとしたメモです。

●playwright-core で Codegen（PC にインストール済みのブラウザを利用 ＋ 結果を年月日などがついたファイル名で書き出す等） - Qiita
　https://qiita.com/youtoy/items/9558b19cd3ddc90217ea

## Mac でやっていた内容
[前に書いた記事](https://qiita.com/youtoy/items/9558b19cd3ddc90217ea)では、ローカルインストールした「playwright-core」で「Codegen」を使う話を書いていました（それと、PC にインストール済みのブラウザを利用する話を含めてました）。

その記事の中で、以下のように Codegen で生成された結果を、年月日・時間がついたファイル名で書き出すコマンドの話を含めていました。
※以下のコマンドは playwright-core のローカルインストールを行ったフォルダで実行するのと、PC には Chrome がインストール済みという前提

```bash:Macの場合
npx playwright-core codegen --channel chrome 【URL】 -o ./codegen/code`date +%Y%m%d%H%M%S`.js
```

## 今回の内容
今回、これと同じことを Windows でやろうとした時、年月日・時間がついたファイル名を出力させる部分で修正が必要になりました。この記事は、その対応に関するちょっとしたメモ書きです。

### 実際のコマンド
最初に、Windows のコマンドプロンプト・PowerShell のそれぞれで、上記と同様のことを実現するための処理の例を書きます。

以下は、コマンドプロンプト用のものと、PowerShell用のものを、それぞれ書いています。

```dosbatch:コマンドプロンプトの場合
set time2=%time: =0%
set str=%date:~0,4%%date:~5,2%%date:~8,2%%time2:~0,2%%time2:~3,2%%time2:~6,2%
npx playwright-core codegen --channel chrome 【URL】 -o ./codegen/code%str%.js
```

```powershell:PowerShellの場合
$str = Get-Date -Format yyyyMMddHHmmss
npx playwright-core codegen --channel chrome 【URL】 -o ./codegen/code$str.js
```

それぞれについて、以下で少しだけ補足します。

### コマンドに関する補足
上記のコマンドプロンプト用のものと PowerShell用のものは、それぞれ複数行で 1セットになっています。

基本的な流れでは、年月日と時間を示す文字列を作成し、それを出力ファイルのファイル名に含めるというものです。そして、コマンドプロンプトと PowerShell とで年月日・時間を出力するコマンドが違っているという感じです。

2つの違いとして 1点、コマンドプロンプトのほうだけ `set time2=%time: =0%` という行があり、それはさらに補足を書いておきます。こちらは、[今回の参照記事の 1つ](https://atmarkit.itmedia.co.jp/ait/articles/0405/01/news002.html)で触れられていた内容に関する対応です。　

具体的には、以下のように 2桁目が 0 で埋められるのではなく空白になって意図しない出力になるので、それを避けるための処理になります。
![tiemの空白の対応1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ce644e5c-8565-289c-bb14-b9c6b360bbd7.png)
![tiemの空白の対応2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0b5a98c0-e481-5384-3627-586788863360.png)

#### 変数利用を減らしたバージョン
ちなみに、上記の 2通りの処理は、 `str` という変数を使わないで以下のように書くこともできます（見づらいですが...）。

```dosbatch:コマンドプロンプトの場合
set time2=%time: =0%
npx playwright-core codegen --channel chrome 【URL】 -o ./codegen/code%date:~0,4%%date:~5,2%%date:~8,2%%time2:~0,2%%time2:~3,2%%time2:~6,2%.js
```

```powershell:PowerShellの場合
npx playwright-core codegen --channel chrome 【URL】 -o ./codegen/code$(Get-Date -Format yyyyMMddHHmmss).js
```

## 参考
以下、今回の Windows対応をした際に、参考にしたページです。

- コマンドプロンプト関連
   - [Windowsのバッチファイル中で日付をファイル名に使用する：Tech TIPS（1/2 ページ） - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/0405/01/news002.html)
- PowerShell関連 
   - [【Powershell】現在の日付と時刻をファイル名に指定する方法 | Tipstour - チップスツアー](https://tipstour.net/command/9075)
   - [PowerShell で日付を取得する | Windows 実践ガイド](https://win2012r2.com/2021/08/15/powershell-%E3%81%A7%E6%97%A5%E4%BB%98%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/)
【数学苦手な人へ】座標、方向ベクトルから角度を計算する方法

Atan(x/y)的なやつや,ベクトルを引数に取れるAtan2がよく検索に引っかかりますが、プログラムでは条件分岐ができるのでこんな風に素朴に書いちゃってもいいと思います。
スマートではないですが左右反転させたいとか角度を測る基準が違うときには頭がこんがらがりにくくなると思います。

```cs
    float Vec2Radian(Vector2 vector)
    {
        if (vector.y == 0) //x軸上
        {
            if (vector.x > 0)
            {
                return Acos(vector.x)
            }
            else
            {
                return Acos(vector.x)
            }
        }   
        if (vector.y >= 0) //第1,2象限
        {
            return Acos(vector.x)
        }
        else //第3，4象限
        {
            return -Acos(vector.x)
        }
    }
```
MongodbのAuthenticationError

# 背景

mongooseを使うためにURIにdb名を入れないといけなかった。

これまではmongooseを使っていなかったのでnew MongoClient(dbのURI).db(db名)でOKだった。

dbのURI＝mongodb://user:pass@localhost:27017

db名＝bookshelf

みたいな感じ、、

mongooseをつかったらdbのURIにdb名を指定しないといけない。


dbのURI＝mongodb://user:pass@localhost:27017/bookshelf

としたら

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2082391/fdfc3b8c-c063-aeb6-c3ea-ab7f57fac0bd.png)


認証エラーとなりdbにコネクトできない。。

# 解決

dbのURI＝mongodb://user:pass@localhost:27017/bookshelf

上記のURIだとbookshelf DBに認証をしに行ってるので認証エラーが起きてる。

私は認証DBはadminなのでadminで認証を行ってbookshelfに接続を行うようにしないといけない。。

調べると、authSourceをオプションでつけるとOKっぽい。

公式にこんなことが書かれてました。

> 
> 
> 
> Specify the database name associated with the user's credentials.
> If authSource is unspecified, authSource defaults to the defaultauthdb specified in the connection string. If defaultauthdb is unspecified, then authSource defaults to admin.
> 

> 
> 
> 
> ユーザーの資格情報に関連するデータベース名を指定します。
> authSource が指定されていない場合、authSource のデフォルトは接続文字列で指定された defaultauthdb になります。defaultauthdbが指定されていない場合、authSourceのデフォルトはadminになります。
> 

[https://www.mongodb.com/docs/manual/reference/connection-string/](https://www.mongodb.com/docs/manual/reference/connection-string/)

defaultauthdbとは下記の太字部分。

mongodb://user:pass@localhost:27017/**bookshelf**

なのでbookshelfに認証しようとしてたんだなと分かりました。

最終的には

dbのURI＝mongodb://user:pass@localhost:27017/bookshelf?authSource=admin

これでdbに認証付きで接続できました。
一点から内側から複数の円が広がるアニメーション

## HTML

```html
<div class="h_field">

  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>

  <script type="text/javascript">
    var item_num = document.getElementsByClassName("h_node").length;
    var deg = 360.0/item_num;
    var red = (deg*Math.PI/180.0);
    var circle_r = 350;
    var center_x = 425;
    var center_y = 425;
  
    window.onload = function(){
      var nodes = document.getElementsByClassName('h_node');
      for(i=0;i<item_num;i++){
        var x = Math.cos(red * i - Math.PI/2) * circle_r+center_x;
        var y = Math.sin(red * i - Math.PI/2) * circle_r+center_y;
        nodes[i].style.left = x+"px";
        nodes[i].style.top = y+"px";
      }
    }
  </script>
  
  <div class="h_node_0"></div>
```

## CSS
```css
HTML CSSResult Skip Results Iframe
EDIT ON
.h_field{
  background-color: #fff;
  position: relative;
  width: 1000px;
  height: 1000px;
  left: 50%;
  transform: translateX(-50%);
}

.h_field > .h_node_0{
  color: #fff;
  background-color:#0ff;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
  line-height: 200px;
  text-align: center;
  border-radius: 50%;
}

.h_field > .h_node{
  color: #fff;
  background-color:#00f;
  width: 150px;
  height: 150px;
  position: absolute;
  left: 425px;
  top: 425px;
  line-height: 150px;
  text-align: center;
  border-radius: 50%;
  transition: left 1s, top 1s;
}
```

## 動作
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYgZWYb" data-user="rk1004" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/rk1004/pen/LYgZWYb">
  expanding circle</a> by Reiji Kobayashi (<a href="https://codepen.io/rk1004">@rk1004</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
[Rails・Docker・EC2] docker-compose buildするとno space left on deviceエラーが出てしまう。

備忘録兼ての記事です。同じエラーに詰まっている方いたら参考にしてもらえればと思います。

## どういう状況で起きたか
ローカルで色々いじってて、一度本番環境でも動かそうと思い、プッシュ→EC2でpullしてから起きたエラーです。gemfileを書き換えたりしたのでまずは```docker-compose build```をしました。
# エラー内容
```
$ git pull origin main

$ docker-compose up --build

 => ERROR [movie-review_rails internal] load build context 

failed to solve: write /var/lib/docker/overlay2/jnpzgi9l9yabr840us49zue21/diff/vendor/bundle/ruby/3.1.0/gems/sassc-2.4.0/ext/libsass/src/parser.cpp: no space left on device
```

# 原因
EBSボリュームがいっぱいになっている。

# 解決法
一旦イメージなどを全部削除してしまえば、容量が復活すると思いますので
下記を実行して、docker関連のimageを全削除し、```docker-compose up```でイメージの再作成すれば```no space left on device```エラーは解消されます。
```
$ docker-compose down
$ docker image prune -a
$ docker volume prune
$ docker system prune
$ docker-compose up --build
//途中、本当に消すか```yes or no[y/n]```で聞かれる場合はyを入力してEnterします。
```


ちなみに```docker-compose up --build```などで毎回buildし直すとイメージが大量に作成されてしまい、すぐに容量がいっぱいになってしまいますので、buildするのはイメージの再作成したい時だけにするとこのエラーはあまり発生しなくなります。

自分の場合はおそらく大量の画像ファイルをDocker イメージの中に含めてしまっていたため、イメージサイズが増えすぎてしまい、buildするたびに容量が足りなくなっていたのだと思います。

docker imageのファイルサイズが大きい場合はEC2に割り当てている、EBSのボリューム量を増やすか、または画像ファイルはs3に保存する形にしないといけないですね。

# それでも解決しない場合
容量がギリギリ足りていれば下記をやるだけで良いのですが、Docker image + volumeのサイズがEBSサイズよりも大きなものになっていたら、下記を何度やっても容量がなくなってしまいます
```
$ docker-compose down
$ docker image prune -a
$ docker volume prune
$ docker system prune
$ docker-compose up --build
```
これでbuildし直しても容量エラーが出るのでしたら、EBSボリュームの容量アップが必要になります。

ボリュームを増やすには下記をやればOKですが、利用料金が増えるので増やしすぎは注意ですね。
https://itsakura.com/aws-ec2-ebs-volume
流行りに乗ってChatGPTアプリを作ったところ0ダウンロードだった件

# 開発に至った経緯
巷ではChatGPTが話題になっていて、ただAPIをたたくだけのアプリが100万ダウンロードもされているという噂をTwitterで観測し、この機を逃すわけにはいかないと自分もChatGPTのアプリを開発しました。その名も[SimpleChatGPT](https://play.google.com/store/apps/details?id=com.SixteenBitCompany.SimpleChatGPT)。

# 利用したツール
AndroidでもiOSでもビルドできることを条件にUnityは確定。探してみるとおかもちさんという方が[LINE風のUI](https://okamochi-storage.com/2021/07/03/%E3%80%90unity%E3%80%91line%E9%A2%A8%E3%81%AEui%E3%82%92%E4%BD%9C%E3%82%8B/)を既にUnityで開発済みでした。このページと[ねぎぽよしさん](https://note.com/negipoyoc/n/n88189e590ac3)のプログラムを参考にLINE風のUIで自分の質問にChatGPTが答えるというソフトをUnityで作成しました。
# デモ
![4512.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467169/35d6941c-9761-d67c-3798-94cae561ae12.jpeg)
こんな感じで右画面が自分の質問、左画面がChatGPTの受け答えです。シンプルで使いやすさはあると思います。

# 結果
当然といえば当然なのですが、誰も自分の作ったアプリなど知る由もなく、ダウンロード数は0、悲しいですね、![スクリーンショット 2023-04-17 20.40.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467169/88d28a07-12a7-cfee-5a12-1c6940e84d29.png)

# 敗因と次回に向けた対策
いくつか敗因は考えられます。
・1つ目は個人開発で全然宣伝できないこと、Twitterもやっていますがフォロワー数50人じゃ全然ダメです。次までにもっとTwitterを伸ばしたい。
・2つ目はGooglePlayのデモ画面と説明が全然魅力的じゃないこと、これに関してはillustratorとか勉強して綺麗な画像を作るように頑張ります。
・3つ目は開発が遅すぎたことが挙げられると思います。ChatGPTのAPIは既に公開から1ヶ月以上経過しており、一番ダウンロードされているアプリでは既に100万ダウンロードを超えており、その他のアプリも数10万ダウンロードされていました。初めはAndroidStudioからKotlinで開発しようと思い、のんびりやっているうちに既に他のアプリに周回遅れにされ、後発のアプリたちに埋もれてしまったことは否めません。

これらを踏まえて次からはUnityで高速で開発することと、illustratorで綺麗なデモ画面を作ることを重点的に頑張りたいです。いつか自分の作ったアプリがいっぱいダウンロードされることを夢見て。

# その後
ログを見るとインストール件数0件から79件になってました！
もっとたくさんダウンロードされるアプリを作りたいですね。

本記事が14,000Viewsを超えてました！ご愛読ありがとうございます！
作ってるゲームやアプリのこと中心に書いてます。時々研究や情報系大学生向けの記事も書こうと思ってます！よかったらフォローして今後の記事も見てください！
自作ネット掲示板をスマホアプリ化してみた

# やったこと
[自作掲示板のスマホアプリ版](https://play.google.com/store/apps/details?id=com.SixteenBit.ColorfulWall&pli=1)をGooglePlayで公開しました！まだダウンロードされてないので発展途上ですが是非使ってみてください！手間をかけず自分のホームページをアプリ化したい人は参考になると思います！




# これまでの内容
[Webアプリ版](http://colorful-wall.com/board/boards)の掲示板をDjangoで作ってConohaサーバーを公開したのですが月1回くらいしか書き込みがありませんでした、、、これではあまりにも悲しすぎます。。開発経緯は私の別の記事にて。

# Unity利用に至った経緯
どうやったら書き込みが増えるのかを考えた結果、やはりホーム画面に常駐するスマホアプリの方が利用者を固定化する上で有利ではないかと考え、スマホアプリ化をすることに。掲示板の方はDjangoでWebアプリとして実装されており、アプリでわざわざ全く同じ画面構成をする気が起きず、WebViewを利用することにしました。1からJavaやkotlinを勉強するのも、iOS化に対応するために、Swiftを覚えるのも、一人では実現できないほどの時間がかかります。しかし、***UnityならAndroid版もiOS版も一度に作れてしまう***ので、ゲームではないですが、Unityしかないなという結論に至りました。

# 利用したツール
[Greeの人が作ったUnity用WebViewツール](https://github.com/gree/unity-webview)が一番有名そうだったのでこれを使わせていただくことにしました。[[Unity]WebViewを実装する方法](https://nobushiueshi.com/unitywebviewを実装する方法/)と組み合わせるとURLの部分を自分のサイトに書き換えるだけで完成し、公開に至りました。

# 今後
メッセージ投稿のフォームは動くのですがファイル投稿のフォームはなぜかWebViewからだと動かないので原因を究明して修正したいと思います。あと、Unityの利点を活かしてiOS版もビルドして公開したいです。その気になればSwitch版やPS4版も簡単に作れるかもしれないですね、さすがUnity。
ChatGPTで実行し、より要望に近い動作をするプロンプト一覧

ChatGPTで実行し、より要望に近い動作をするプロンプト一覧

# プロンプト一覧に関するコードブック形式の記事

この記事では、以下の4つのプロンプトについて取り上げます。

1. Google Colaboratoryで実行可能なコードを作成する
2. メモを整えてブログ記事にする
3. WEBアプリケーションのコードレビューや提案をする
4. プロンプトを整理する

## 1. Google Colaboratoryで実行可能なコードを作成する

このプロンプトでは、Pythonを使用して、Google Colaboratory上で実行可能な{テーマ}に関連する{コードアクション}を行います。必要に応じて、{ライブラリ}を使用します。{コードアクション}は、複数行のコードの提案、提出された複数行のコードのレビュー、またはその両方を含むことができます。

### カスタマイズ用変数

- {テーマ}: あなたが取り組む具体的なテーマや関連する情報
- {コードアクション}: 複数行のコードの提案、レビュー、またはその両方
- {ライブラリ}: 使用するPythonライブラリの詳細

## 2. メモを整え、ブログ記事として投稿できるようにする

このプロンプトでは、{メモ内容}を、Markdown形式で整え、読み手の興味を引くタイトル、章、項目を生成してブログ記事に変換し、誤字脱字や内容を修正します。文章は{文章スタイル}で統一し、文章ごとに改行して読みやすくします。

### カスタマイズ用変数

- メモ内容: 例) あなたの{トピック}に関する知識の箇条書きメモ、{状況}中に遭遇した問題、原因、対策を記録したメモ
- 文章スタイル: 例) 「である。した」調

## 3. WEBアプリケーションのコードレビューや提案をする

このプロンプトでは、あなたが実現したい{目標}に関して、{技術}を使用してWEBアプリケーションを開発中です。{目標}を達成するためのアドバイス、ベストプラクティス、および提案を提供し、{コード}のレビューも行ってください。{追加情報}。

### カスタマイズ用変数

- {目標}: 実現したい目標を表す変数です。
- {技術}: 使用している技術やツールに関する情報を表す変数です。
- {コード}: レビューが必要なコードやコードスニペットを表す変数です。
- {追加情報}: 目標達成に関連する追加情報や要件を表す変数です。

## 4. プロンプトを整理する

このプロンプトでは、あなたが作成した{プロンプト一覧}を、きれいにし、コピーしやすいように、Markdown記法のコードブロックで示します。

### カスタマイズ用変数

- {プロンプト一覧}: 作成したプロンプトの一覧を表す文字列

以上で、プロンプト一覧に関するコードブック形式の記事が完成しました。この形式に沿って、それぞれのプロンプトに対応したアプローチや変数をカスタマイズして使用できます。さらなる変更や提案が必要であれば、お気軽にお知らせください。
【Git】`git push`が「rejected」された場合＆「Please move or remove them before you merge」と言われてしまった場合の対応方法

# 概要
* 久しぶりに触るEC2サーバーで、ローカルブランチと最新のリモートブランチで差異がありました。サーバー内でいじっていたものがあったのでコミット後、プッシュしたら色々なエラーと出会ってしまったので、その解決手順を残します。
 
## 前提
* サーバー（AWS EC2インスタンス）
    * OS：Ubuntu 18.04.3 LTS
    * Web Server：Apache/2.4.29

# エラー内容
* 特定のファイルのみコミットしたかったので、`git add`でファイルを選択してステージングエリアに追加した後に`git commit`。
* そして`git push`すると以下のエラーが表示されました。

```terminal
To https://github.com/xxxxxxxx/xxxxxxxxxxx.git
 ! [rejected]        develop -> develop (non-fast-forward)
error: failed to push some refs to 'https://github.com/xxxxxxxx/xxxxxxxxxxx.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```

* `push`しようとしたブランチ（`develop`）がリモートリポジトリにすでに存在しているものの、リモートブランチの状態がローカルブランチの状態と異なるため、リジェクトされた、という内容です。プッシュに失敗しています。
* 4つ目のヒントで、リモートリポジトリにプッシュする前にリモートの変更をローカルにマージする必要があることを示唆しています。ということで、マージするところから始めていきます。
* 結論、以下の２つが問題点と対応方法でした。
    * リモートブランチの状態とローカルブランチの状態が異なっていた→ローカルにマージが必要
    * 現在の作業ツリーに存在する未追跡ファイルがあった→`stash`で一時避難が必要

# 実施手順
①リモートとローカルのブランチの状態を同じにする
②未追跡ファイルを一時的に保存する
③リモートからローカルへマージ後、プッシュする

## リモートとローカルのブランチの状態を同じにする
* 以下コマンドでリモートブランチの変更を取得します。

```terminal
$ git fetch
```

* ローカルブランチをリモートブランチの最新の状態に更新します。

```terminal
$ git merge origin/develop

error: The following untracked working tree files would be overwritten by merge:
	README.md
	xxxx/xxxx/xxxxx.sql
Please move or remove them before you merge.
Aborting
```

* このエラーメッセージは、マージしようとしているブランチに、現在の作業ツリーに存在する未追跡ファイルが含まれているため、マージが中止されたことを示しています。削除するか、stashするかで解決できます。
    * この未追跡ファイルは、今回コミットしたくない部分になります。

## 未追跡ファイルを一時的に保存する
* 未追跡ファイルを一時的に保存するために、作業ツリーから削除します。
    * `git stash`コマンドについてはこちらでまとめていますのでご参考までに：[【Git】作業中の変更を一時的に保存し、後で復元することができるgit stashコマンドについて](https://qiita.com/Ryo-0131/items/506bcdc48c08f3ad3575)

```terminal
$ git stash push --include-untracked
```

* ちなみに、保存する必要がない場合は、以下コマンドで削除できます。
    * dオプションはトラッキングしていない新しいフォルダもしくは新しいファイルを指定するオプション

```terminal
$ git clean -f -d
```

## リモートからローカルへマージ後、プッシュする
* マージできるようになったので、プルします。
    * 競合が発生する可能性があるので、その場合は手動で確認したり変更したりした方が良いかもしれません

```terminal
$ git pull
```

* これでプッシュできる状態になったのでプッシュします。
    * 最新情報が一致するため通常のプッシュが行えます

```terminal
$ git push origin develop　
```

* 必要に応じて、保存したstashを復元したい場合は`git stash apply`コマンドを使います。
LocalStorageとCookieをざっくり理解

# 個人学習用
参考
[誰も教えてくれないブラウザのローカルストレージ【JavaScript localStorage】](https://www.youtube.com/watch?v=Fupq6L4Vy2k)
[Cookieとセッションってなに？ゼロからわかりやすく解説](https://www.youtube.com/watch?v=t8Xxp_dk214)

## LocalStorage
ざっくり言うとデータをブラウザで一時的に保存してくれるもの。
```js
const inputForm = document.querySelector("#inputForm");
const saveBtn = document.querySelector("#saveBtn");

saveBtn.addEventListener("click", () => {
    const inputData = inputForm.value;
    //keyとvalueが対になる(簡単に言うとオブジェクトみたいなもん)
    localStorage.setItem("keyName", inputData(値));
});
```
※Storage.setItem()→キーの名称と値を渡すと、ストレージにキーを追加し、またはキーが既に存在する場合はキーに対する値を更新する。

### LocalStorageどこにあるん
検証ツールのコンソールだのがある欄の右にある、>>を押す。そしてアプリケーションを押す。その中のストレージ→ローカルストレージ

### LocalStorage追加以外の機能
例えば取得
```js
const inputForm = document.querySelector("#inputForm");
const saveBtn = document.querySelector("#saveBtn");
const backBtn = document.querySelector("#backBtn");

saveBtn.addEventListener("click", () => {
    const inputData = inputForm.value;
    //keyとvalueが対になる(簡単に言うとオブジェクトみたいなもん)
    localStorage.setItem("keyName", inputData(値));
});

backBtn.addEventListener("click", () => {
    const saveData = localStorage.getItem("key");
    inputForm.value = saveData;
});
/保存したものをkey指定で取ってこれて使える/
```
例えば削除
```js
const inputForm = document.querySelector("#inputForm");
const saveBtn = document.querySelector("#saveBtn");
const backBtn = document.querySelector("#backBtn");
const deleteBtn = document.querySelector("#deleteBtn");

saveBtn.addEventListener("click", () => {
    const inputData = inputForm.value;
    //keyとvalueが対になる(簡単に言うとオブジェクトみたいなもん)
    localStorage.setItem("keyName", inputData(値));
});

backBtn.addEventListener("click", () => {
    const saveData = localStorage.getItem("key");
    inputForm.value = saveData;
});

deleteBtn.addEventListener("click", () => {
    localStorage.removeItem("key");
});
/key指定で削除できる/

deleteBtn.addEventListener("click", () => {
    localStorage.clear();
});
/これで全消し/
```
### LocalStorageの特徴
1. ブラウザを閉じても残る(ちなsessionStorageていうの使うと時間制限をかけられる)
2. 保存するデータはキーと一緒に管理する
3. 削除は手動でもできる(ユーザーが消せる)

**閲覧履歴とかの、わざわざデータベースに保存するほどでもないようなものを、簡易的に保存できるよねってもの**

## Cookie
前提用語
**ステートレス**→状態を持たない。HTTPはこれ

CookieだのSessionだのは状態を保つようにするよってやつ。ログインの時とかはステートレスだと無理。

### セッション管理
**セッション**とは一連の処理の始まりから終わり前を表す概念(例えばログインからログアウトまで)

例：Youtube
1. 自分「ログインするで」
2. Youtube「識別番号覚えといて」
→これをCookieに保存
**Cookie**とは、ブラウザにテキスト情報を保存する仕組み
3. 自分「識別番号~です。ホーム画面のHTMLください」
4. Youtube「OK」

### セキュリティで気を付けておくべきこと
**なりすまし**
・識別番号が推測できないこと
→普通はランダムで設定する
・識別番号が漏洩しないこと
SelefraのGPT機能の紹介: インサイトマルチクラウドとSaaS by GPT

![banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3286109/739cc2a9-e71c-e412-bb5e-48de79acbc4c.png)
我々は、Selefra GPT Feature(beta)を紹介します、これはエキサイティングな機能です。 OpenAIの大規模言語モデルGPT-3.5/GPT-4とSelefraでサポートされています。

以前は、インフラのデータを一元的に収集・分析するのは非常に煩雑だったので、この問題を解決するためにSelefraを構築しました。しかし、インフラを洞察するには、セキュリティやコンプライアンス、コストなど、まだまだ専門的な知識が必要な分野です。最近、ジェネレーティブAIが登場するまでは、GPT4モデルがすでに基本的なノウハウを持っていることが分かっていました。
![gpt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3286109/3a5b3025-10c2-7ab1-d0ee-4ab349710fe1.png)
Selefra GPTでは、セキュリティ、コスト分析、アーキテクチャなどの分野の専門家でなくても、データから最も基本的なリスクのインサイトを得ることができます。OpenAIとSelefraを組み合わせることで、インフラのアーキテクチャデータを人工知能技術で解析し、ビジネスの安定性やセキュリティに関する質の高いインサイトを提供します。

## サンプルユースケースの探索

以下の例では、Selefra GPTによるセキュリティ、コスト、アーキテクチャの分析方法を紹介します。

### AWS S3の深刻な脆弱性の検出

```
selefra gpt "Please help me analyze the vulnerabilities in AWS S3?"selefra gpt "Help me query AWS EC2 volumes that are not attached to an instance"
```

### AWS EC2のコストに無駄がないかチェックする

```
selefra gpt "Help me query AWS EC2 volumes that are not attached to an instance"
```

### GCPにアーキテクチャ設計上の欠陥がないかを確認する。

```
selefra gpt "Help me search for GCP users who do not have MFA activated"
```

## 始めるには

Selefraの[Get Started](https://selefra.io/docs/get-started/)の方法については、詳細なドキュメントをお読みください。

クイックスタートは、このデモを実行してください：

1.**Selefra** をインストールします。

```
brew install selefra/tap/selefra
```

2.**初期化プロジェクト**について

```
mkdir selefra-demo && cd selefra-demo && selefra init
```

3.解析用GPTコマンドを実行する

```
selefra gpt "your prompt"
```

## Selefra GPTを今すぐ試す

この記事を読んでセレフラに興味を持たれた方は、ぜひ私たちに星を与えてください： [https://github.com/selefra/selefra](https://github.com/selefra/selefra) ✨ 。

Slackのコミュニティに参加し、コミュニティと会話する： [https://selefra.io/community/join](https://selefra.io/community/join)

**その他のSelefraリンク:**

- オフィシャルサイト [https://selefra.io](https://selefra.io/)
- ブログで紹介します： [https://selefra.io/blog](https://selefra.io/blog)
- スラック：[https://selefra.io/community/join](https://selefra.io/community/join)
- Twitterで紹介されています： [https://twitter.com/SelefraCorp](https://twitter.com/SelefraCorp)
- Redditです： [https://reddit.com/r/Selefra](https://reddit.com/r/Selefra)

皆様がSelefraを使ってどのようなシナリオを構築されるのか、Selefraと共に成長していけることを大変楽しみにしています！

English Blog: https://www.selefra.io/blog/introducing-selefras-gpt-feature-insight-multi-cloud-and-saas-by-gpt
HTTP cookie に関するメモ

いつも忘れてしまうので、自分のメモを兼ねた TIPS。

# Cookie の種類
## セッション Cookie
* 一時的な cookie
* cookie に有効期限が記録されていない
* 特定のセッションで使用することが目的なので、メモリ上に保存され、ブラウザを閉じるなどで消えてしまう
## 永続（Persistence）Cookie
* 持続的な（≒ある程度長期間使用することを意図した）Cookie
* cookie に有効期限が記録されている
* ある程度の期間使用することを意図しているので、ローカルディスクに保存され、ブラウザを閉じても消えることは無い
## 見分け方
上述の通り、有効期限の有無が基本的な見分け方になる。
```bash
[root@localhost ~]# curl -c /tmp/cookie.txt http://example.com    
[root@localhost ~]# cat /tmp/cookie.txt
# Netscape HTTP Cookie File
# https://curl.haxx.se/docs/http-cookies.html
# This file was generated by libcurl! Edit at your own risk.

/*
 * 左から
 * host        subdomains   path   isSecure  expiry       name   value
 * /
example.com    FALSE        /      FALSE     1681724724   XXXXX  xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxxx 
```

5 カラム（`expiry`）に `UNIX TIME` でタイムスタンプがついていれば永続 cookie、`0` になっていればセッション cookie と判断することができる。
```bash
[root@localhost ~]# date -d @1681724724 +"%Y/%m/%d %T"
2023/04/17 18:45:24
```

## value について
`value` 部分の値は基本的に Web サーバ側依存なので「このような書式」という固定の読み方は無く、どのような目的で cookie を使用しているかによって変わる。
例えば LB の cookie であれば、バックエンドサーバを固定する目的でバックエンドの IP などの固有情報を埋め込む場合もある。

ただし、この値が暗号化されておりで、単にこのファイルのみでは中身を把握することができないパターンもあるので、内容を調べたい場合は製品やサイト別に確認が必要。
UbuntuSofwareがひらけない(ソフトウェアがない)

# はじめに

UbuntuのOSを入れた際に毎回同じ検索をしていたのでまとめていきます

# 問題

Ubuntuをインストールして「Ubuntu Software」をクリックしても読み込みは始まりますがなぜか画面が表示されませんでした

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/d69445a1-5e26-cd7b-c87e-159a92f80536.png)

# 解決方法

以下を実行することで「ソフトウェア」が追加されます

```bash
$ sudo apt install ubuntu-software
```

「ソフトウェア」を起動して同じ要領で利用ができます

# おわりに

インターン生が来たときにこういう記事があると設定を任せられるのでいいなとおもいました

# 参考

https://yutarine.blogspot.com/2020/08/ubuntu20.04-snap-store-ubutnu-store.html
WSL2でDNSの設定を変える方法

１．WSLにログイン
２．wsl.confを開く
```
sudo vi /etc/wsl.conf
````

以下を追記
```
[network]
generateResolvConf = false
````

３．WSLをシャットダウン
```
wsl --shutdown
```

４．WSLにログイン
５．resolv.confを書き換える
```
sudo rm /etc/resolv.conf
sudo sh -c "echo 'nameserver 8.8.8.8' > /etc/resolv.conf"
```

６．WSLをシャットダウン
```
wsl --shutdown
```

７．WSLにログインし、手順5で実施した内容になっているか確認する
```
cat /etc/resolv.conf
```
クロスアカウントのAmazon S3バケット間でデータをコピーする方法

# 概要
クロスアカウント環境のAmazon S3バケット間でデータをコピーする方法。

# 結論
①コピー元バケットのバケットポリシーを設定
②AWS CLIまたはAWS CloudShellでコピーコマンドを実行

# 構成図
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/9ad6892f-7b59-e889-55d4-f6c00c38249d.jpeg" alt="構成図" title="構成図">

# 内容

### ①コピー元バケットのバケットポリシーを設定
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::コピー先AWSアカウントID:root"
            },
            "Action": [
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::コピー元バケット",
                "arn:aws:s3:::コピー元バケット/*"
            ]
        }
    ]
}
```
コピー先AWSアカウントIDに対してS3のGetObjectとListBucketを許可。

### ②AWS CLI、AWS CloudShellでコピーコマンドを実行
```
aws s3 cp --recursive s3://コピー元バケット s3://コピー先バケット
```
「aws s3 cp」はコピーを実施するためのコマンド。
「--recursive」は再帰的にコピーするためのオプション。
コマンドの詳細は<a href="https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-services-s3-commands.html#using-s3-commands-managing-objects-copy" target="_blank">コマンドリファレンス</a>を参照。

# 注意点
AWS Security Hubにて指摘が上がる可能性があるため、バケットポリシーのPrincipalにはAWSアカウントID全体ではなく、対象を絞った方が良いと思います。
またはコピー完了後にバケットポリシーを削除することをおすすめします。

# 宣伝
### メイドカフェマップ for Android
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/0d7b86ef-9142-6ae7-6543-fe4349706bf9.png" alt="メイドカフェマップアイコン" title="メイドカフェマップアイコン" width="250">

元メイドさんと一緒に作った～[メイドカフェマップ for Android](https://play.google.com/store/apps/details?id=com.tsukasa_labz.android.maidcafemap&hl=ja)を公開しています。
インストールして頂いて評価やコメントを頂けると喜びます:relaxed:
メイドカフェマップ アプリ内からツイートできる機能がありますので、そちらをして頂くとさらに喜びます:heart_eyes:
アプリを開き「その他」タブ→「このアプリについて」→「ツイートして支援」ボタンより:pray:

### Kindlist
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/f6df6002-dbfc-f67f-75d8-3dd835c38bd1.png" alt="Kindlistアイコン" title="Kindlistアイコン" width="250">

Kindle for PCのXMLファイルを解析して、Excel形式に変換する機能を提供します。
書籍一覧が記載されたExcelファイルを、Kindle書籍管理にご活用下さい。
<a href="https://www.vector.co.jp/soft/winnt/util/se523241.html" target="_blank">Vector</a>よりダウンロードが可能です。

もう少し細かい内容はQiitaの<a href="https://qiita.com/tsukasa_labz/items/08d6217723941fd139b3" target="_blank">Kindle蔵書一覧を出力するツール作成時の工夫</a>に記載しております。

### WiKifuKiller(Wi寄付キラー)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/d65f52c2-0493-42b5-693b-9f42bd033214.png" alt="WiKifuKillerアイコン" title="WiKifuKillerアイコン" width="250">

Wikipediaのページを開いたときに表示される、寄付依頼を非表示にするブラウザ用アドオンです。
インストールするだけで難しい設定は必要ありません。
もう少し細かい内容はQiitaの<a href="https://qiita.com/tsukasa_labz/items/a3166d481426e2297848" target="_blank">Wikipediaの寄付依頼をブロックするアドオンの作り方</a>に記載しております。

各ブラウザのアドオン配布ページよりインストール可能です。
* Firefox版：https://addons.mozilla.org/ja/firefox/addon/wikifukiller/
* Chrome版：https://chrome.google.com/webstore/detail/wikifukiller/bkdigjebalbifmdhlklififbdibhmlmo?hl=ja
* Edge版：https://microsoftedge.microsoft.com/addons/detail/wikifukiller/gjkedgecldjilmcbilahaicpfphndkem?hl=ja-JP
ChatGPT にママ友の悩みを相談してみた

# 娘のお友達、親同士の交流
毎週友人ママさんパパさんと遊んでいる。
娘同士一緒の習い事をしている、その一家と、交互に家で遊ぶのがこの２年ほどの習慣になっている。
コロナ禍で遊び場所ももままならないし、
雨だ雪だという天候影響も考えると「家遊び」が最適解だったのだ。
コロナ禍以前であったら、いわゆる「公園デビュー」という仕組みがあり、
その仕組が非常に有用、有効であったんだなということはつくづく感じる。
コロナ禍で公園が封じられた時に、非常に困った結果、家遊びに落ち着いた。


# 生きていくには難問が多すぎる
その友人家族、マンション購入を検討されていたのだが、ついに見つけて購入、引っ越した。
それが１年前。
徐々に慣れ、近所にも知人ができ、
お隣に娘と同い年の女の子がいることが分かってお友達付き合いが始まった。
よくある、順当なことである。

しかし、お隣さんと気が合うか、価値観が合うか。これはガチャである。

マンション購入という、人生のとんでもないビックイベント、選択肢のその先に、
「運」としか言いようの無い要素が待っていることを思うと、
いやほんと、人生って難しすぎませんか？


# ママ友の相談
当然皆さんは興味を持つかと思うものの、
この記事の目的・趣旨は、相談内容・回答を公開することではなく、
「ChatGPT 使ってみたぞ」というだけのブログである。
…とはいっても、ここのママ友相談内容を割愛してしまうと幾ら何でもつまらなさすぎるので、
要点だけを共有する。

+ 子供も二人目が生まれ、兼ねてからマンション購入で探しまくってた
+ ついについについに、数年越しの検討の結果、マンション購入に至った
+ 居住1年ほどして、隣の家族が、子供の年齢、性別、家族構成全一致することを知る
+ お友達になれるに違いない！ お友達付き合いが始まる
+ 付き合い2ヶ月ほど。諸事情でお隣さんに子供を預け、自分らは出かけなくてはならなかった。
+ お隣子供と自分の子供が仲良く遊んで、1－2時間後帰ってきた
+ 我が子と「よかったね～」と話してたら、夜、お隣さんからLINE がきた


以下、物凄く意訳、私が手を加えたLINE の文面（イメージ）。

>こんばんわ～
>今日はXXちゃんと遊べて良かったんだけれど～
>私がこんなこと言っちゃうのは、もしかしたら余計なお世話なのかも知れないけれど…
>けれども、これからのこと、小学校に入ってからのこともあるかもしれないから
>ほんと余計なお世話おばさんで申し訳ないんだけれど
>XXちゃんは、なにがしたいのかな？
>遊んでいる時に、うちのお父さんとかをポカポカしたりして。
>そういうの、小学生になって、気にする親子さんとかもいるし、
>問題になる前に注意とかした方がいいんじゃないかしらー。
>私から言っちゃっていいのかな～？






# ChatGPT 登録（LINE）
Open AI には登録していたものの、今回LINE を使ってみた。
非IT のママさんなので、もしそのママさんが直接相談する場合LINE なら自力でやれそうだ、と思ったからである。
LINE の「AIチャットくん」は、ChatGPT のAPI を使用して作成されていて、
LINE で愚痴ると答えをくれる、という、なかなか楽しいものである。
残念ながら、日次会話数は3回。やり取り3回で終わりっぽい。リセットは何時だろう？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2997321/043d3bea-24dc-77af-6996-ea25682a401a.png)




# 自社用のChatGPT 作るのが流れらしい
部長がちょっと言ってたけれど、社内QA 用のChatGPT 作るらしいです。情シスの質問とか。
ChatGPT の無料版は、社内では今、利用不可です。
使えるものを用意しているらしい、です。

世の中的にも、無料ChatGPT を使いまくるというよりは各社で立ち上げているようで、
ベネッセは「Benesse GPT」[→ニュース記事](https://www.itmedia.co.jp/news/articles/2304/14/news180.html)
Panasonic は「PX-GPT」という名前で社内展開しているそうです。[→ ニュース記事](https://prtimes.jp/main/html/rd/p/000005114.000003442.html)

わが社でも活用されるようになったら…
…ママ友の悩みを質問してみよう。

おわり
MattermostにWebページのテーブルをそのまま転記させるスクリプト

Webページにくる通知を読んでくれない人に向けて強制的に情報発信するためのものとしてChatGPTに考えてもらいました。
イメージはRedmineのチケット一覧です。


## 質問

アクセス先のページにあるテーブルを、Mattermostの書式に変換するスクリプトを作ってほしいです。
・テーブルは"listing tickets"というclassで以下の構成をしている
　ticketNO,概要,ステータス,分類,優先度,発行者,回答期限,完了期限
・ticketNOは数字が入り、Mattermostに投稿する際には以下のようにURLを生成し、リンクを張ってほしい
　https://localhost/ticketNO
・beautifulsoupを使って解析する
・ライブラリのインストールに関する説明は省略し、スクリプトのみを表示すること


## 回答

以下は、指定された条件に基づいてWebページからテーブルを抽出し、Mattermostの書式に変換するPythonスクリプトです。このスクリプトは、beautifulsoup4ライブラリを使用しています。

```python
import requests
from bs4 import BeautifulSoup

def extract_table(url):
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')
    table = soup.find('table', {'class': 'listing tickets'})

    if table:
        headers = []
        rows = table.find_all('tr')
        for header in rows[0].find_all('th'):
            headers.append(header.text)

        data = []
        for row in rows[1:]:
            cells = row.find_all('td')
            rowData = {}
            for i, cell in enumerate(cells):
                rowData[headers[i]] = cell.text
            data.append(rowData)

        return data
    else:
        return None

def to_mattermost_format(data):
    formatted_data = []
    for row in data:
        ticketNO = row['ticketNO']
        url = f"https://localhost/{ticketNO}"
        formatted_row = f"[{ticketNO}]({url}) | {row['概要']} | {row['ステータス']} | {row['分類']} | {row['優先度']} | {row['発行G']} | {row['回答期限']} | {row['完了期限']}"
        formatted_data.append(formatted_row)

    return "```\n" + " | ".join(['ticketNO', '概要', 'ステータス', '分類', '優先度', '発行者', '回答期限', '完了期限']) + "\n" + "\n".join(formatted_data) + "\n```"

url = "https://example.com/path/to/table"  # ここに対象のURLを入力してください
table_data = extract_table(url)
if table_data:
    mattermost_formatted_data = to_mattermost_format(table_data)
    print(mattermost_formatted_data)
else:
    print("テーブルが見つかりませんでした")

```
VHDファイルからのVM復元手順


# 概要
Azure の VM では、VM で利用している OS ディスクやデータ ディスクの VHD ファイルをエクスポートすることが可能です。
検証環境を作成するために別のサブスクリプション配下に複製 VM を作成したいときや既存の VM のリージョンを変更したいときには、エクスポートした VHD ファイルをストレージ アカウントにコピーし、新たに複製 VM を作成することで実現できます。

本記事では、VHD ファイルから複製 VM を新規に作成する手順について紹介します。

また、本記事は以下のサイトを参考にしております。
https://jpaztech.github.io/blog/vm/create-vm-using-vhd/

# 1.VHDファイルからOSディスクを作成する。
**1.1 Azure Portal より [ディスク] を開き、左上の[+作成] をクリックします。**
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142984/02268dc2-643f-af9f-580e-2aae3b25dc71.png)


**1.2 以下のとおり、適宜設定を行い、[確認および作成] - [作成] をクリックします。**
			
+ リソースグループ : VHDファイルが存在するストレージ アカウントと同様の “リソースグループ” を選択します。											
	
+ ソースの種類 : "ストレージ blob"を選択します。						
						
+ ソース blob : "参照"をクリックして、任意の VHD ファイルを選択します。
												
    　※VHDファイルは .vhdの拡張子がついたファイルを指定してください。	
											
+ OS の種類　：OS ディスクを作成する場合は、複製元 VM と同様のものを選択します。データディスクを作成する場合は [None]を選択します。	
							　				
    　※OSがWindows の場合には [Windows] を、Linuxの場合、[Linux] を選択してください。	
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142984/e5b68013-c700-28c6-868e-c97db22d9c43.png)
											


**1.3 マネージドディスクが作成されたことを確認します。**
![画像11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142984/31900326-60c8-48c1-b2ab-acd46f7f73d8.png)



# 2. VHD ファイルから作成したOSディスクで VM を作成する。

**2.1 Azure Portal より[ディスク] を開き、手順 [1] で作成したディスクを選択します。。**
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142984/02268dc2-643f-af9f-580e-2aae3b25dc71.png)

**2.2 ディスクのページ上部の [+ VMの作成] を選択します。**
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142984/6c6cc164-4129-805f-0f5c-b441f44174c5.png)


**2. 3 適宜設定を行い、[確認および作成] - [作成] をクリックします。**
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142984/55d7400c-1b5c-4a1a-eace-56bffa236a6a.png)

以上が手順になります。