OmniAICreator/Qiita-1.07M huggingface dataset:
vmware、UbuntuとLinuxの違い、WSL2について

普段業務で使用しているけど、
何となくしか理解できていない用語について整理する。

## VMware
メーカーの名前。
1台のコンピュータ上で複数のOSやソフトウエアを動作させる仮想マシン・ソフトウエアを提供している。

参考文献：
https://pfs.nifcloud.com/vmware/about_vmware.htm
https://academy.gmocloud.com/know/20201222/10815

## VMware Workstation
WindowsまたはLinuxのホストOS上で仮想的なコンピュータを構成し、その中で独立したゲストOS環境を構築することができる。
Windowsデスクトップ上でLinuxを動作させる等が可能になる。


参考文献：

https://e-words.jp/w/VMware_Workstation.html#:~:text=VMware%20Workstation%E3%81%A8%E3%81%AF%E3%80%81%E7%B1%B3,%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%82%82%E3%81%AE%E3%80%82

## LinuxとUbuntuの違い

### Linux
WindowsやmacOSといったOSのひとつ。
オープンソースのOSで、
ソースコードが公開されているので、誰でも自由に利用、変更、配布することができる。

### Ubuntu
Linuxカーネルをベースにして開発されたOS。
Ubuntu以外でLinuxをベースにして開発されたOSにはDebian、CentOS等ある。

WindowsやMacOSは1種類しかなく、
Linuxはいくつも派生したOSがある理由は、
Linuxがオープンソースなソフトウェアで一般公開されているからとのこと。

https://study-z.net/100188248


### カーネル
OSの中核となる部品。

### Linuxディストリビューション
Linuxカーネルをベースにして開発されたオペレーティングシステム（OS）のこと。
Ubuntu等がLinuxディストリビューションにあたる。


## WSL2
Windows上でLinuxを動作させることができる機能のこと。

>Windows Subsystem for Linux 2の略で、Windows 10上でLinuxを動作させるための仕組みであるWSLのバージョン2といった位置付けになります。
>https://www.pc-koubou.jp/magazine/40465#section01
[SwiftUI]見えない透明なButtonを配置する方法


# 概要

**Spacer**を設置した時に、**Spacer**をクリックしたら動作する**Button**を作成したかったのですが、**Spacer**に**Gesture**の設定ができないため見えない透明な**Button**が必要でした。

以下のようなアプリを作成してました。


![ezgif.com-resize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/368d5f32-8206-e57b-337d-0b0be54396fd.gif)


真ん中の何もないところを推したら動作する**Animation**を考えていました。

期待通りの動作を行うために透明なタッチ可能な**View**を実装し、それを**ZStack**で重ねて実装をしました。


# **環境**

Xcode : 14.3

Swift : 5.8

SwiftUIを使用

# 実装方法

## Button を使う

```swift
Button(action: {
	print("Button Clicked")
}) {
 Text("LIGHT")
    .padding()
    .frame(width: 400,height: 400)
    .background(Color.clear) // 透明な背景
    .foregroundColor(Color.clear) // テキストの色
    .cornerRadius(10)
}
```

テキストは、なんでも大丈夫です。

**Frame** で当たり判定を決め、**背景色と、文字の色を透明にします。**

```swift
Button(action: {
	print("Button Clicked")
}) {
  Text("LIGHT")
      .padding()
      .frame(width: 400,height: 400)
      .background(Color.blue) // 透明な背景
      .foregroundColor(Color.clear) // テキストの色
      .cornerRadius(10)
      .opacity(0.5)
}
```

実際に適応する場合には、**Opacity** などを調整してどこら辺が適応されるのか確認することをお勧めします。

今回の場合だと、他に設置するViewもなかったため大きめに設定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/44152523-99e8-211b-27bc-62243df30361.png)

## onTapGesture を使う

```swift
Color.clear.contentShape(Rectangle())
    .frame(width:400,height: 400)
    .onTapGesture {
			print("Button Clicked")
    }
```

**Button**を設置せずに、透明な四角形を配置し、**onTapGesture**でタップ可能にする方法もあります。


先ほどの実装結果と同じです。

# 行けそうだけど行けない方法

## hidden()を使う

いけそうですが、**Button**などが非表示になる同様、タップ可能領域も非表示になり結果として操作できなくなります。

## opacity(0)を使う

上記同様、操作できなくなります。

# まとめ

見えない透明なボタンはあまり需要はないように思われますが、周りに動きやアニメーションをつければとても重要な**View**となると考えています。他にも実装方法あればコメントなどでおしえてください。

いいね、ブックマーク、フォローしていただけると勉強の励みになりますので是非お願いします。😉

- 追伸　--

Twitterで日々の学習風景を投稿してます。

[@Ren_yello](https://twitter.com/Ren_yello)

# 参考にさせていただいたサイト様


[【SwiftUI】見えないボタンを作ってみる – .NET ゆる〜りワーク](https://www.yururiwork.net/archives/1375)

[Tap Action not working when Color is clear SwiftUI](https://stackoverflow.com/questions/56819847/tap-action-not-working-when-color-is-clear-swiftui)
インラインブロック要素について

今回はインラインブロック要素についてです！

## インラインブロック要素とは？

ブロック要素とインライン要素の特徴を合わせ持つものを
**インラインブロック要素**といいます。

インラインブロック要素はインライン要素と同様に横並びにもなるし、ブロック要素のように幅や高さも持てる〇

ブロック要素とインライン要素のおさらいも！

- ブロック要素（＜div＞タグなど）
<table>
    <tbody>
        <tr>
            <td>widoth,height</td>
            <td>〇 指定できる</td>
        </tr>
        <tr>
            <td>margin,padding</td>
            <td>〇 指定できる</td>
        </tr>
        <tr>
            <td>配置</td>
            <td>縦並び</td>
        </tr>
    </tbody>
</table>

- インライン要素（＜a＞タグなど）
<table>
    <tbody>
        <tr>
            <td>widoth,height</td>
            <td>× 指定できない</td>
        </tr>
        <tr>
            <td>margin,padding</td>
            <td>△ 左右のみ指定できる</td>
        </tr>
        <tr>
            <td>配置</td>
            <td>横並び</td>
        </tr>
    </tbody>
</table>


- インラインブロック要素
<table>
    <tbody>
        <tr>
            <td>widoth,height</td>
            <td>〇 指定できる</td>
        </tr>
        <tr>
            <td>margin,padding</td>
            <td>〇 指定できる</td>
        </tr>
        <tr>
            <td>配置</td>
            <td>横並び</td>
        </tr>
    </tbody>
</table>


＜a＞タグは初期状態でインライン要素になっているけど、
**display**プロパティを使うと変更ができる。

displayプロパティは
- block (ブロック要素）
- inline-block (インラインブロック要素）
- inline (インライン要素）を指定することが出来る。!

![スクリーンショット 2023-05-26 213558.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/1ce31719-e0fa-1cd0-fd7f-84035fc60b38.png)

イメージはこんな感じです！
これも使い分けが最初は分からず苦手だったけど　　
どんなレイアウトにしたいのか、なんのタグを使っているのかを　　
意識して使い分けていきたいと思います。


今回はこのへんで！
ありがとうございました。
HDDマウント時にMetadata kept in Windows cache, refused to mount.と出力される

```sh:shell
sudo mount -tntfs-3g /dev/sda1 /mnt/hdd
```
のようにしてマウントすると

```
The disk contains an unclean file system (0, 0).
Metadata kept in Windows cache, refused to mount.
Falling back to read-only mount because the NTFS partition is in an
unsafe state. Please resume and shutdown Windows fully (no hibernation
or fast restarting.)
Could not mount read-write, trying read-only
```
と出てマウントに失敗する。(実際にはマウントできているが書き込みができない。)

ChatGPTには
```
提供されたエラーメッセージから推測すると、/dev/sda1デバイスはNTFSファイルシステムを持っており、Windowsが正常にシャットダウンされていない可能性があります。NTFSパーティションが安全な状態でないため、読み取り専用でマウントされているようです。

エラーメッセージにも記載されていますが、次のいずれかの理由でこのエラーが発生する可能性があります。

Windowsのハイバネーション（休止状態）が有効になっている場合、NTFSパーティションは読み取り専用でマウントされます。Windowsを完全にシャットダウンしてから再試行してください。

Windowsの高速起動（ファストスタートアップ）が有効になっている場合、NTFSパーティションは正しくアンマウントされず、読み取り専用でマウントされる場合があります。同様に、Windowsを完全にシャットダウンしてから再試行してください。

したがって、まずはWindowsを正しくシャットダウンし、ハイバネーションと高速起動の設定が無効になっていることを確認してください。その後、再度マウントを試みると、書き込み可能なモードでNTFSパーティションをマウントできるはずです。
```
との指摘があり、BIOSの高速起動がオフであることを確認し、Windowsもシャットダウンをもう一度してみたが、結果は変わらなかった。

## ntffsfixコマンドの使用

驚くべきことにその修正方法がありましたので紹介させていただきます。
```sh:shell
ntfsfix /dev/sdb1
```
出力
```
Mounting volume... The disk contains an unclean file system (0, 0).
Metadata kept in Windows cache, refused to mount.
FAILED
Attempting to correct errors... 
Processing $MFT and $MFTMirr...
Reading $MFT... OK
Reading $MFTMirr... OK
Comparing $MFTMirr to $MFT... OK
Processing of $MFT and $MFTMirr completed successfully.
Setting required flags on partition... OK
Going to empty the journal ($LogFile)... OK
Checking the alternate boot sector... OK
NTFS volume version is 3.1.
NTFS partition /dev/sda1 was processed successfully.
```
これで治りました。

```
rsync: [receiver] mkstemp "/mnt/hdd/xxx/xxxxxx.xxxx" failed: Read-only file system (30)
```
とでていたのですが、このエラーもなくなり、データ転送ができるようになりました。

お疲れ様でした。
KVMでk8sクラスタを自動で作成する

## master
### k8sdep.sh
```
#!/bin/bash
cd `dirname $0`

rm /home/yamato/kubetoken
virt-clone --original ubuntu2 --name ubuntu-k8s-master-$1 --file /var/lib/libvirt/images/ubuntu-k8s-master-$1.qcow2



virt-edit -d ubuntu-k8s-master-$1 /etc/netplan/00-installer-config.yaml -e "s/172.24.20.30/172.24.20.$1/"
virt-edit -d ubuntu-k8s-master-$1 /etc/hostname -e "s/ubuntu-k8s-master/ubuntu-k8s-master-$1/"

virsh start ubuntu-k8s-master-$1
```


## worker
### k8swordep.sh
```
#!/bin/bash
cd `dirname $0`

virt-clone --original ubuntu3 --name ubuntu-k8s-worker-$1 --file /var/lib/libvirt/images/ubuntu-k8s-worker-$1.qcow2



virt-edit -d ubuntu-k8s-worker-$1 /etc/netplan/00-installer-config.yaml -e "s/172.24.20.31/172.24.20.$1/"
virt-edit -d ubuntu-k8s-worker-$1 /etc/hostname -e "s/ubuntu-k8s-worker/ubuntu-k8s-worker-$1/"


virt-edit -d ubuntu-k8s-worker-$1 /etc/rc.sh -e "s/172.24.20.30/172.24.20.$3/"
TT="--token kgu8yd.3b83hmhjeesqpqz3 --discovery-token-ca-cert-hash sha256:c3262b24e5b222fcc09affb10efd66e59ba821b443f82e4ec28a45e9e86883bc"
virt-edit -d ubuntu-k8s-worker-$1 /etc/rc.sh -e "s/$TT/$4/"

cp -p /var/lib/libvirt/images/k8s.qcow2 /var/lib/libvirt/images/k8s-$1.qcow2


mozi="<disk type='file' device='disk'><driver name='qemu' type='qcow2' cache='none'/><source file='/var/lib/libvirt/images/k8s-$1.qcow2'/><target dev='vdb' bus='virtio'/><address type='pci' domain='0x0000' bus='0x00' slot='0x06' function='0x0'/></disk><disk type='file' device='cdrom'>"
mozi1="<disk type='file' device='cdrom'>"


sed -e "s#$mozi1#$mozi#g" -i /etc/libvirt/qemu/ubuntu-k8s-worker-$1.xml





virsh define /etc/libvirt/qemu/ubuntu-k8s-worker-$1.xml
virsh start ubuntu-k8s-worker-$1
```

### k8swordep.py
```
import os,sys,time

args = sys.argv

ip1 = args[1]
ip = int(ip1)

num1 = args[2]
num = int(num1)

masip = args[3]
token = args[4]

while num > 0:

    com = "/home/yamato/image/k8swordep.sh " +"\""+ str(ip) +"\"" + " "+"\""+ str(num) +"\"" + " "+"\""+ str(masip) +"\"" + " "+"\""+ str(token) +"\""
    print(com)
    os.system(com)
    ip = ip + 1
    num = num - 1
    time.sleep(5)

print("VM作成完了")
```
ABAP言語の基礎のキソ

ABAP（Advanced Business Application Programming）は、SAPシステムの開発とカスタマイズに使用されるプログラミング言語です。

以下に、その基本的な概念と使用例を示します。

ABAPでは、データ型を定義するためにTYPESステートメントを使用します。例えば、以下のコードでは、ty_dataという新しいデータ型を定義しています。
![TYPES.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432463/fc820ef0-a5d4-479b-23d5-3e322649a3be.png)
このデータ型は、gr、cl、nという3つのフィールドを持つ構造体です。それぞれのフィールドは、異なるデータ型（nは数値、cは文字）と長さを持ちます。

次に、この新しいデータ型を使用して、内部テーブルを宣言します。内部テーブルは、ABAPで一時的なデータを格納するためのデータ構造です。
![2TYPES.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432463/cd5995b9-eea1-dc4c-e076-08d09761681d.png)
この内部テーブルは、ty_data型のデータを格納します。

次に、データベースからデータを選択し、この内部テーブルに読み込みます。
![3TYPES.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432463/e394689f-c8d5-ce53-2218-4d1283321aa6.png)
このSELECTステートメントは、Z0124_TBL_002テーブルからデータを選択し、条件に一致する行をt_data内部テーブルに読み込みます。

最後に、この内部テーブルのデータをループ処理して出力します。
![4TYPES.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432463/7a3e315a-5c52-3ece-db50-9f4b965e9ecb.png)
このループは、t_data内部テーブルの各行を処理し、各フィールドの値を出力します。

以上がABAPの基本的な概念と使用例です。他にも内部テーブルの操作、文字列操作など、さまざまな機能が提供されています。

【参考文献】
SAP ABAPプログラミング入門
アレグス株式会社 (著), 久米正道 (著)
【SwiftUI】Twitterのような公式マークを作成する

# はじめに
公式マークを作る機会があったので記録しておきます。

|青|黄|赤|緑|
|-|-|-|-|
|![simulator_screenshot_9584F1E0-24D0-4203-9342-55C2D3180225.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/bdca4da2-20ff-f2c9-21c1-d4188b00c4de.png)|![simulator_screenshot_B7A4408A-A7C0-4594-91D9-A351451986FB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/630c685d-6678-f65f-a29b-7770bbecba65.png)|![simulator_screenshot_AD70DD23-3E08-472C-B432-84EC3B1C7A4F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/c7914b7c-76af-ffb6-eca4-ad43c91b6984.png)|![simulator_screenshot_1EAA55E3-2B90-4407-8A3F-BD57617D8441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a7b19ca8-27b4-50e2-d886-9dc4a90d6897.png)|

# 実装
```swift
import SwiftUI

struct OfficialMark: View {
    private let size: CGFloat
    
    private let checkMarkColor: Color
    
    init(_ size: CGFloat, checkMarkColor: Color = .white) {
        self.size = size
        self.checkMarkColor = checkMarkColor
    }
    
    var body: some View {
        ZStack(alignment: .center) {
            Image(systemName: "seal.fill")
                .resizable()
                .aspectRatio(1.0, contentMode: .fit)
                .frame(width: size, height: size)
                .fontWeight(.black)
            
            Image(systemName: "checkmark")
                .resizable()
                .aspectRatio(1.0, contentMode: .fit)
                .frame(width: size * 0.4, height: size * 0.4)
                .fontWeight(.black)
                .foregroundColor(checkMarkColor)
        }
    }
}
```

:::note warn
**注意**
iOS16以下の場合は
`.fontWeight(.black)`
の代わりに
`.font(.system(size: .infinity, weight: .black))`
が使えます！
:::

# 使い方
```swift
struct ContentView: View {
    var body: some View {
        OfficialMark(100)
    }
}
```
![Simulator Screenshot - iPhone 14 - 2023-05-25 at 15.39.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/efa7440c-4f2b-9f22-d901-c5cf2ae0989a.png)

### サイズを変更する
```swift
struct ContentView: View {
    var body: some View {
        OfficialMark(50)
    }
}
```
![Simulator Screenshot - iPhone 14 - 2023-05-25 at 15.43.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/52ffd775-a1ce-1fc9-c5f9-401580e09a98.png)

### 背景色を変える
```swift
struct ContentView: View {
    var body: some View {
        OfficialMark(100)
            .foregroundColor(.cyan)
    }
}
```
![Simulator Screenshot - iPhone 14 - 2023-05-25 at 15.40.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/413b3e4a-9d48-4e44-141e-453f1b312d71.png)

### チェックマークの色を変える
```swift
struct ContentView: View {
    var body: some View {
        OfficialMark(100, checkMarkColor: .yellow)
    }
}
```
![Simulator Screenshot - iPhone 14 - 2023-05-25 at 15.42.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/3275409a-5cc8-2210-86d2-733976377990.png)

# おわり
結構再現度高いのでは？？
【初心者】Webアプリケーションの三層構造



### 目次

1. アプリケーションアーキテクチャとは
2. Webアプリケーションにおける三層構造とは
3. メリット、デメリット
4. MVCとの違い

## 1. アプリケーションアーキテクチャとは
ソフトウェア開発において、アプリケーションの構造や設計を定義するための枠組み。
わかりやすく言うと「**アプリケーションの基本構造**」のこと。
どのようなアーキテクチャを用いるかは様々な要素を考慮して決定する。


## 2. Webアプリケーションにおける三層構造とは
**プレゼンテーション層**
**ビジネスロジック層**
**インテグレーション層**（データアクセス層）

上記3つの層で構成される。
アプリケーションの各機能を役割ごとに分離することで、開発・保守がしやすくなる。

- **プレゼンテーション層**
ユーザ側に対するデータの入出力を担当。
主にユーザからのリクエストの受付、レスポンスの処理、ロジックの呼び出し等を行う。

- **ビジネスロジック層**
アプリケーションの中核となるビジネスロジックを担当。
ビジネスルールやバリデーション処理を実装、リクエストから受け取ったデータの加工や処理を行う。

- **インテグレーション層**
データベースや外部サービスとのデータの受け渡しを担当。
外部サービスとの連携やデータの整合性処理などを実装、データベースへのアクセスや外部APIとの通信などを行う。


## 3. 三層構造のメリット

- 保守性、拡張性の向上
    各層ごとに役割を明確化することで、変更や修正が発生した場合でも影響範囲を抑えることができる。

- テストの効率向上
    各層毎に分かれていることでテストの作成が行いやすく、またビジネスロジック部分や外部接続先等のテスト実施も容易になる。

- セキュリティの強化
    プレゼンテーション層での入力データの検証やバリデーション、インテグレーション層でのデータベースへのアクセス制御など、セキュリティ対策がしやすくなる。




## 4. MVCとの関係性

そもそもMVCとは、モデル（Model）、ビュー（View）、コントローラ（Controller）
この3つで構成する形を取る、**主にプレゼンテーション層に焦点を当てたアーキテクチャ。**
GUIベースのアプリケーション等で使用されることが多い。

そのため、MVCをWebアプリケーションの三層構造に当てはめた場合
 - コントローラ（Controller）、ビュー（View） → **プレゼンテーション層**
 - モデル（Model） → **ビジネスロジック層、インテグレーション層** 
に該当する形となる。

その他、MVP、MVVMなどもプレゼンテーション層に焦点を当てたアーキテクチャのため
基本的に三層構造と競合するようなものではない。

---

上記で記載したWebアプリケーションの三層構造においての各層の役割は一般的な定義であり、
実際には開発要件や規模に応じて、これらの設計を調整して使用することもある。
（ビジネスロジック層とインテグレーション層の一部の機能が統合されるなど）

また、三層構造をさらに細分化して複数の層にすることもある。
（例: プレゼンテーション層、アプリケーション層、ドメイン層、データアクセス層など）

アプリケーションアーキテクチャと一言に言っても範囲が広く
様々な組み合わせが存在するため、まずは大枠から理解していく方が学習しやすい。
Linuxのコマンドをまとめてみた

# Linuxのコマンドをまとめてみた
## カーソル移動
|コマンド|内容|
|:-------|:---|
|Ctrl + f |一文字次へ移動|
|Ctrl + b |一文字前へ移動|
|Ctrl + a |行の先頭へ移動|
|Ctrl + e |行の最後へ移動|
|Meta + f (esc + f) |一単語次へ移動|
|Meta + b (esc + b) |一単語前へ移動|

## 文字列の編集
|コマンド|内容|
|:-------|:---|
|Ctrl + h |カーソルの左を1文字削除|
|Ctrl + d |カーソル部分を1文字削除|
|Ctrl + w |カーソル位置の単語を削除（カーソルの前部分）|
|Ctrl + u |カーソル位置から行頭まで削除|
|Meta + k |カーソル位置から行末まで削除|
|Meta + y |最後に削除した内容を挿入|


## トラブル時の対応
|コマンド|内容|
|:-------|:---|
|Ctrl + c |実行中のコマンドを強制終了|
|Ctrl + l |画面の消去。文字化けした時のクリアに使える|
|Ctrl + s |画面表示のロック（キーボードから文字の入力を受け付けない）|
|Ctrl + q |画面表示のロック解除|

## 補完・コマンド履歴
|コマンド|内容|
|:-------|:---|
|Tab |コマンドやパスの補完|
|Ctrl + p または ↑キー |一つ前の履歴を見る|
|Ctrl + n または ↓キー |一つ後の履歴を見る|
|Ctrl + r |コマンド履歴のインクリメンタル検索|

### コマンド履歴から検索
Ctrl + r を実行後の操作
|コマンド|内容|
|:-------|:---|
|文字列 |コマンド履歴から検索|
|Ctrl + r |１つ前の検索結果へ移動|
|Enterキー |現在の検索結果を実行|
|Escキー |現在の検索結果を表示したままコマンドラインに戻る|
|Ctrl + g|検索悔過を破棄し、コマンドラインに戻る|
KVMでVMをpythonとshellから操作する

裏ではvirshコマンドをたたくshをpythonから呼び出す構成となっている。これは、後にdiscord.pyと連携するためである。


## 作成
### dep.sh
```
#!/bin/bash
cd `dirname $0`


virt-clone --original ubuntu1 --name ubuntu-$1 --file /var/lib/libvirt/images/ubuntu-$1.qcow2



virt-edit -d ubuntu-$1 /etc/netplan/00-installer-config.yaml -e "s/172.24.20.12/172.24.20.$1/"


virt-edit -d ubuntu-$1 /etc/hostname -e "s/ubuntu1/ubuntu-$1/"
virsh start ubuntu-$1
```

### vm.py
```
import os,sys,time

args = sys.argv

ip1 = args[1]
ip = int(ip1)

num1 = args[2]
num = int(num1)

while num > 0:

    com = "/home/yamato/image/dep.sh " + str(ip)
    os.system(com)
    ip = ip + 1
    num = num - 1
    time.sleep(5)

print("VM作成完了")
```



## 削除
### delvm.sh

```
#!/bin/bash

COU=1
IP=$1
VMNUM=` expr $2 + 1`

while [ "$COU" -lt "$VMNUM" ]
do
virsh destroy ubuntu-$IP
virsh autostart --disable ubuntu-$IP
virsh undefine ubuntu-$IP
virsh vol-delete --pool default ubuntu-$IP.qcow2

virsh destroy  ubuntu-k8s-master-$IP
virsh autostart --disable ubuntu-k8s-master-$IP
virsh undefine ubuntu-k8s-master-$IP
virsh vol-delete --pool default ubuntu-k8s-master-$IP.qcow2

virsh destroy ubuntu-k8s-worker-$IP
virsh autostart --disable ubuntu-k8s-worker-$IP
virsh undefine ubuntu-k8s-worker-$IP
virsh vol-delete --pool default ubuntu-k8s-worker-$IP.qcow2


rm /etc/libvirt/qemu/ubuntu-$IP.qcow2
rm /etc/libvirt/qemu/ubuntu-k8s-worker-$IP.qcow2
rm /etc/libvirt/qemu/ubuntu-k8s-master-$IP.qcow2



let IP++
let COU++
sleep 1
done

echo "VM削除完了"
```
CloudWatchの新機能「InternetMonitor」がGAとなりました

# 概要

去年末にプレビューとなった、インターネットモニターが一般提供開始となりました！
（2023年3月に書いた記事になります）


「Amazon CloudWatch Internet Monitor の一般提供を開始」
https://aws.amazon.com/jp/about-aws/whats-new/2023/02/amazon-cloudwatch-internet-monitor-generally-available/


# CloudWatchのInternetMonitorとは

インターネットの問題がアプリケーションのパフォーマンスと可用性にどのように影響するかを可視化するCloudWatchの新機能です。
ログやメトリクスとして収集する事が可能です。

# どんな場面で使えるか
まんまですが、アプリケーションのパフォーマンスを図る際にメトリクスとして一役買うようなイメージですね。
またアラームとして設定する事で、問題発生時の切り分けにも役に立ちそうです。

# 使ってみる

CloudWatchコンソール画面下部から選択できます。

![](https://storage.googleapis.com/zenn-user-upload/44f00bd60f5c-20230312.png)

----------------------

モニター作成では、命名と対象としたいリソースを選択する必要があります。

![](https://storage.googleapis.com/zenn-user-upload/7b7bfec82fce-20230312.png)

----------------------

モニタリングできるネットワークについては、最大数を大きくする事で
より広い範囲でネットワークに問題がないか確認する事ができます。

![](https://storage.googleapis.com/zenn-user-upload/fb8327c73ad7-20230312.png)

----------------------

EC2インスタンス、ALBが存在するVPCにて実際に作成してみました！

しばらく待って、ダッシュボードを確認してみます。

ダッシュボード内には、遅延異常が発生していないトラフィックを表示する「パフォーマンススコア」や、
到達の可能性に異常が見られないトラフィックを表示する「可用性スコア」、
その他転送バイトや、往復に要する時間を数値化したものもあるようでした。

![](https://storage.googleapis.com/zenn-user-upload/faf8d23b7d05-20230312.png)

![](https://storage.googleapis.com/zenn-user-upload/0b56c7760da5-20230312.png)


----------------------

メトリクスの方でも確認できました！

![](https://storage.googleapis.com/zenn-user-upload/7e86891b9a16-20230312.png)


# 利用料金

使用料金については下記の通りです。
モニタリングの対象範囲を広げる事で料金は高くなっていきます。

1 モニタリング対象リソースあたり 0.01USD/時間
10,000 モニタリング対象都市ネットワークあたり 0.74USD/時間

# 最後に
重要なリソースを監視する際や、アプリケーションの改善に大変役立ちそうです！
間違って作成したマイグレーションファイルの削除方法

はじめに
日々の勉強をアウトプットしていきたいと考えております。自分なりの理解した表現でアウトプットしていくので、初学者のため、誤りもあるかと思います。その際はご指摘頂けると幸いです。


まずはrails db:migrate:statusでマイグレーションの状態を調べる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/876ee7eb-24c2-5dbe-4260-54a727790d47.png)
up → マイグレーションファイル実行済み
down　→ マイグレーションファイル未実行

rails db:rollbackを一度、実行したため、一番下のマイグレーションファイルが間違えて作成してしまったデータベースでdownとなっている。
　そのため、削除方法はdownになっていれば、そのままVSコード上にあるマイグレーションファイルを右クリックして、削除ボタンをクリックすれば良い。

実際にマイグレーションファイルが削除されているかをrails db:migrate:statusを実行して確認する。
Laravel でVue.jsのコンポーネント開発の基本についてまとめてみた*確認問題つき

## はじめに
開発中のプロジェクトにおいて、Vue.jsは非常に重要な役割を果たしています。特にコンポーネント開発では、Vue.jsが頻繁に利用されています。本記事では、LaravelとVue.jsを組み合わせたコンポーネント開発について詳しく解説します。

:::note info
さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！
:::
https://mondai-diy.com/play_question/256/EDG5woyRcF2icDKs7g3Ww3jtUpntlAZyFlURlqAX

## 経緯
私たちの開発チームは、現在進行中のプロジェクトでVue.jsを活用しています。Vue.jsはシンプルで柔軟なコンポーネントベースのフレームワークであり、私たちの開発作業を効率化するのに大いに役立っています。特にLaravelとの組み合わせは、シームレスな開発体験を提供してくれます。


## コンポーネント開発のメリット
Vue.jsのコンポーネント開発には、いくつかのメリットがあります。まず第一に、再利用可能なコンポーネントを作成することができます。これにより、効率的な開発が可能になります。また、コンポーネントごとに独立した状態を持つことができ、コンポーネント間の結合度を低く保つことができます。


## LaravelとVue.jsの統合
LaravelとVue.jsを組み合わせることで、エレガントな開発フローを実現することができます。Laravelでは、Vueコンポーネントをシームレスに統合するためのヘルパー機能が提供されています。このヘルパーを使用すると、Laravelのビューファイル内でVueコンポーネントを直接記述することができます。

LaravelにVue.jsをインストールする方法はこちら

https://qiita.com/takahiro-2020/items/68e1fd180f5a7967ff9d


## コンポーネントの作成と利用
Vue.jsのコンポーネントを作成するためには、まずVueコンポーネントのファイルを保存するディレクトリを決める必要があります。一般的には、`` resources/js/components ``ディレクトリがよく利用されます。ここに、各コンポーネントごとに個別のファイルを作成します。

作成したコンポーネントファイルは、`` resources/js ``ディレクトリ下の`` app.js ``にインポートする必要があります。`` app.js ``は、Laravelのビルドプロセスによってコンパイルされます。`` app.js ``には、以下のようにコンポーネントをインポートする記述を追加します。

```javascript:resources/js/app.js
// Vue コンポーネントのインポート
import ExampleComponent from './components/ExampleComponent.vue';


// Vue インスタンスの作成とマウント
const app = new Vue({
    el: '#app',
    components: {
        ExampleComponent, // インポートしたコンポーネントの登録
    },
});
```

上記の例では、`` ExampleComponent ``という名前で.`` /components/ExampleComponent.vue ``ファイルからコンポーネントをインポートしています。このように、各コンポーネントを適切なパスでインポートし、componentsオブジェクト内で登録することで、LaravelとVue.jsの統合を実現します。



## 作成したコンポーネントをコンパイルする
作成したコンポーネントファイルは、`` public/js ``ディレクトリ下の `` app.js ``にコンパイルされないとコンポーネントを利用することができません。

コンポーネントファイルを保存し、`` resources/js/app.js ``にコンポーネントファイルをインポートした後、ビルドするためには以下のコマンドを実行します。

```shell
npm run watch
```

上記の手順により、Laravelプロジェクト内のVue.jsのコンポーネントがビルドされます。`` npm run watch ``コマンドは、Laravel Mixを使用してビルドを自動的に監視し、変更があるたびに再ビルドします。

これにより、コンポーネントの変更を検知して自動的にビルドされるため、開発効率が向上します。

注意点として、`` npm run watch ``コマンドは開発時に利用されるものであり、本番環境では適切なビルド手順を実行する必要があります。本番環境では、`` npm run production ``などのビルドコマンドを使用することが一般的です。

```shell
npm run production
```

## まとめ
以上が、LaravelとVue.jsを組み合わせたコンポーネント開発におけるコンポーネントファイルの保存ディレクトリとapp.jsへの記述方法です。これにより、Vue.jsのコンポーネントをLaravelプロジェクトで利用する準備が整います。

LaravelとVue.jsを組み合わせたコンポーネント開発は、効率的な開発を実現するための強力な手法です。適切なディレクトリにコンポーネントファイルを保存し、app.jsにコンポーネントをインポートすることで、シームレスな開発フローを実現することができます。ぜひこれらの手法を活用して、より洗練されたVue.jsのコンポーネントを開発してみてください。

## さいごに
:::note info
さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！
:::

https://mondai-diy.com/play_question/256/EDG5woyRcF2icDKs7g3Ww3jtUpntlAZyFlURlqAX
人生で初めて仕事を人に依頼して気づいたこと

# 人生で初めて人に仕事を依頼して学んだこと

## **一回しかやらない作業のためにマニュアル残さない**

- 結構当たり前のことなんだけど、相手が新しい概念を覚えるの大変だよなとか思って親切心を発揮するとやっちゃいがち
- 最初は一緒にやりゃいいし、いきなりマニュアル渡されると冷たい人間だと思われる。最初に丁寧なコミュニケーションをとっておけば、その後相手が気軽に質問してくれる。

## アウトプットベースで細かくタスクを定義する

- 何がどうなったら正しい成果物なのかをこちらで正確に定義する
    - まずは一旦自分で正しい状態のものを作り、チェックポイントを全て洗い出す。
    - スプレッドシートで管理する。（途中でチェックポイントが増えても、既存の成果物に対して増えたチェックポイントのみを確認すればいいことがわかりやすい）
- むしろやり方はお任せしたほうが、こちらが知らなかったやり方を見つけてくれるし、作業感が軽減される。
コミュ力向上チャットボットのプロンプト

私たちがchatGPT先生からコミュニケーションの評価を受けるための新たなプロンプトを作成しました！
ChatGPTはもはや人間と同等、いや、それ以上に自然な会話を行うことができます。それならば、なぜ逆にchatGPTに人間のコミュニケーション能力をトレーニングしてもらわないのかと思ったのです。この新しい試みで、私たちのコミュニケーションスキルがさらに向上することでしょう！

gpt-4推奨

```
## 命令
あなたはユーザーのコミュ力向上を図るチャットボットです。step by step
### 能力
- ペルソナとユーザーとの対話自体を解析し、客観的・定量的・定性的に評価する
- 前記の評価結果をもとにフィードバックを提示する
- シミュレーションを提供し、ユーザーが実際のコミュニケーションシチュエーションで練習する場を提供する
### 内部パラメータ
{点数1}
{点数2}
{点数3}
{親密度}:ペルソナからユーザーへの関心や親密の度合いを言葉で示す。初期値:初対面

## 手順
step1:
{コミュニケーションシチュエーション}、{シナリオ}、{ペルソナ}のプロフィール、{このシチュエーションで重要な3点}を提示する。
step2:
ユーザーから話しかけるのをまつ（ユーザーから会話を開始すること）
step3:
ペルソナとして振る舞って、ユーザーと対話を続ける。ユーザーが「おわり」と言ったら、対話を終了する
step4:
({点数1}~{点数3}を100点満点で採点を含む、{親密度}）ユーザーの発言を分析し、フィードバックを提示する。そして、フィードバックを反映した具体的な会話例を含みながら、アドバイスをする。

## シチュエーション
### {シナリオ}
{状況}
{ユーザーへの情報提供}
{ミッション}
### {ペルソナ}
{名前}
{性別}
{年齢}
{プロフィールの文章}
### このシチュエーションでのコミュニケーションにおいて重要な点
{点数1}
{点数2}
{点数3}
```
```
## シチュエーション
- 婚活における初対面
### シナリオ
### assistantが振る舞うペルソナ
{名前}
{性別}：男
{年齢}
{プロフィールの文章}
### このシチュエーションでのコミュニケーションにおいて重要な点
{点数1}自己紹介: 自分自身を正確に理解し、分かりやすく伝える能力は、初対面で人々に良い第一印象を与えるために不可欠です。これには、自分の興味や趣味、年齢、性別など、自己を表現する情報が含まれます。
{点数2}相手への興味とリスペクト: 人々は自分が尊重され、興味を持たれていると感じると、コミュニケーションが効果的に行われることがより可能になります。これには、相手の話に耳を傾け、適切な質問をすることが含まれます。また、自分の話ばかりすると減点です。
{点数3}自然な会話の流れ: 会話は自然な流れを持つべきです。つまり、話題が唐突に変わったり、不自然なタイミングで質問をしたりするのを避けるべきです。また誤字脱字は減点です。
```

https://chat.openai.com/share/4985fbe0-8d7a-4216-88c2-1155d573587b
RISC-Vのコンパイル・シミュレーション環境構築

# RISC-V命令セットの実行環境
RISC-Vのアセンブリコードを実行するためには以下のツールが必要です。
 * riscv-gnu-toolchain
   RISC-V向けにプログラムをコンパイルするためのGNUツール。
https://github.com/riscv-collab/riscv-gnu-toolchain
ターゲットトリプレット:
https://wiki.osdev.org/Target_Triplet
 * riscv-isa-sim
   spikeというRISC-Vの命令セットシミュレータ。
https://github.com/riscv-software-src/riscv-isa-sim
 * riscv-pk
   spikeでのシミュレーションをサポートするためのプロキシーカーネル。本来OSが担う処理の肩代わりをする。
https://github.com/riscv-software-src/riscv-pk
プロキシーカーネルとは:
https://msyksphinz.hatenablog.com/entry/2018/06/11/040000

# これらをビルドする
これらのツールは手動でビルドするので正直めんどうですし、ビルド時間が長いです(特にtoolchain)

# めんどうなのでDockerに環境を構築しました
これらのツールをDockerに構築しました。
ちなみにアーキテクチャはRV64G、ABIはLP64Dです。

```
docker pull reten/riscv_exe:latest
```

# Dockerfile
一応Dockerfileも。
初めてDockerfileを書いたということもあって結構苦戦しました。
オプションでアーキテクチャとABIを指定しないとうまくいきません。(当たり前ですが)
/opt/riscv/にインストールしてますが、ここはどこでも大丈夫です。
prefixとアーキテクチャやABIは自由に変えてください。

参考：

https://qiita.com/cherry_and_berry/items/8571080cb49f2e6735b8

https://scrapbox.io/htkymtks/RV32G_%E3%81%AE%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%EF%BC%88Docker%E7%B7%A8%EF%BC%89
```
FROM ubuntu:bionic

WORKDIR /app
 
ENV PATH=$PATH:/opt/riscv/bin
ENV PATH=$PATH:/opt/riscv/spike/bin
ENV HOME=/root
ENV USER=root 
ENV TOOL_PATH=/app/riscv-gnu-toolchain/build
ENV SPIKE_PATH=/app/riscv-isa-sim/build
ENV PK_PATH=/app/riscv-pk/build

RUN apt update && \
	apt install -y \
	autoconf \
	automake \
	autotools-dev \
	curl \
	python3 \
	libmpc-dev \
	libmpfr-dev \
	libgmp-dev \
	gawk \
	build-essential \
	bison \
	flex \
	texinfo \
	gperf \
	libtool \
	patchutils \
	bc \
	zlib1g-dev \
	libexpat-dev \
	git \
	device-tree-compiler \
	vim 
	
RUN git clone --recursive https://github.com/riscv/riscv-gnu-toolchain

WORKDIR /app/riscv-gnu-toolchain
	
WORKDIR $TOOL_PATH

RUN	../configure --prefix=/opt/riscv --with-arch=rv64g --with-abi=lp64d && \
	make -j$(nproc)

WORKDIR /app

RUN 	rm -r riscv-gnu-toolchain && \
	git clone https://github.com/riscv/riscv-isa-sim

WORKDIR $SPIKE_PATH

RUN	../configure --prefix=/opt/riscv/spike --with-isa=rv64g && \
	make && \
	make install

WORKDIR /app

RUN 	rm -r riscv-isa-sim && \
	git clone https://github.com/riscv/riscv-pk

WORKDIR $PK_PATH

RUN	../configure --prefix=/opt/riscv/pk --host=riscv64-unknown-elf --with-arch=rv64g --with-abi=lp64d && \
	make && \
	make install

WORKDIR /app

COPY script /app/script

RUN	rm -r riscv-pk && \
	cp script/env.sh /app/.env.sh && echo ". /app/.env.sh" >> ${HOME}/.bashrc
```

## 補足:Dockerfileの書き方
余談ですが、Dockerfileの書き方を書いておきます。(ほぼ自分用)

ubuntuのバージョン
https://hub.docker.com/_/ubuntu/tags

Dockerfileベストプラクティス
https://docs.docker.jp/develop/develop-images/dockerfile_best-practices.html#cmd

Dockerfileはcdコマンド、mkdirコマンドが使えません。
ENVで指定したパスをWORKDIRで指定することで、ディレクトリを移動します。
また構築環境内で通したいパスはDockerfileをビルドする際には指定することができません。(Dockerfile内のENVはあくまでもビルドするときに通すパスです)
上記のDockerfileは、containerを起動するときにディレクトリscriptにあるenv.shを実行することでパスを通します。
詳しくは以下のリポジトリを確認してください。
https://github.com/rei0515reten/pointerbook-sample/tree/main/image
Rails 7で.scssを利用できるようにした

# はじめに
Railsを学習中の初心者です。

プログラミング学習サイト「[Progate](https://prog-8.com/)」で書いているコードをローカルでも書き起こして再現しながら学習していたところ、学習サイトの方では.scssが適用されているのに、ローカルでは適用されない？ということが起こった。
いろいろ調べて適用されるようになったので、備忘録として解決に至った手順をかく。

# 環境
Progate
Ruby　2.4.6
Rails　5.0.3

ローカル
Ruby　3.2.1
Rails　7.0.5




# 手順
まずはググったところ、Saasを使うためにはgemをインストールする必要があるらしい
が、それは昔の話で、Rails 7ではプリインストールされているとのこと。

じゃあなんで使えないの？ということで更に調べてみると、[rails/sass-rails](https://github.com/rails/sass-rails)にインストール方法が書いてあった。

>Installing
>Since Rails 3.1, new Rails projects will be already configured to use Sass. If you areupgrading to Rails 3.1 you will need to add the following to your Gemfile:
>Rails 3.1以降、新しいRailsプロジェクトはすでにSassを使用するように構成されています。Rails 3.1にアップグレードする場合、Gemfileに次の行を追加する必要があります。（Bird訳）

```ruby
gem 'sass-rails'
```

ということなので、Gemfileを見に行ってみると、記述されているところを発見

```ruby:Gemfile
.
.
# Use Sass to process CSS
# gem "sassc-rails"
.
.
```

これを

```ruby:Gemfile
.
.
# Use Sass to process CSS
gem "sassc-rails"
.
.
```

に書き直して保存した。よーしこれで適応されるぞ！と思ったけどできていない...
[rails/sass-rails](https://github.com/rails/sass-rails)をもう一度読んでみると下の方に

```
$ bundle install
$ bundle exec rake test
```

とあったので`bundle install`を実行したところ、
```
Fetching sass-rails 6.0.0
Installing sass-rails 6.0.0
```
とターミナルに表示され、無事にインストールされた様子。



この作業で無事にローカルでも.scssファイルが利用できるようになった。
Pythonで微細構造定数αを求めてみた

# 微細構造定数αとは
> 1916年にドイツの物理学者、アルノルト・ゾンマーフェルトによって提唱された。微細構造定数αは無次元量で、単位はないそうです。αは以下で計算できるそうです。

> α＝μ0e^2c/2h(＝2πe^2/hc)＝7.2973506×10^-3

物理に詳しくないため、以下の値の単位は省略してます。

> 真空の透磁率μ0
```
1.256637×10^-6
```

> 電気素量e
```
1.602176634×10^−19
```

> 光速c
```
2.99792458x10^8
```

> プランク定数h
```
6.62607015×10^−34
```
# 前提条件
* Python3

# 目的
微細構造定数α、α^-1をPythonで計算して求める

# サンプル
```fine-structure-constant.py
# -*- coding: utf-8 -*-

# 真空の透磁率 1.256637×10^-6
m0 = 1.256637e-6

# 電気素量 1.602176634×10^−19
e = 1.602176634e-19

# 光速 2.99792458x10^8
c = 2.99792458e8

# プランク定数 6.62607015×10^−34
h = 6.62607015e-34

# 微細構造定数α
a = m0 * pow(e,2) * c / (2 * h)

print(a)
print(1/a) 
```
## 実行結果
```
0.007297352208543852
137.03600585828715
```

# きっかけ
宇宙を支配する「定数」という本を読んでいて、微細構造定数αをPythonで計算してみようと思った。また、その逆数がおよそ137となり、素数なので驚かされた。

# 参考資料
https://www.amazon.co.jp/%E5%AE%87%E5%AE%99%E3%82%92%E6%94%AF%E9%85%8D%E3%81%99%E3%82%8B%E3%80%8C%E5%AE%9A%E6%95%B0%E3%80%8D-%E4%B8%87%E6%9C%89%E5%BC%95%E5%8A%9B%E5%AE%9A%E6%95%B0%E3%81%8B%E3%82%89%E5%85%89%E9%80%9F%E3%80%81%E3%83%97%E3%83%A9%E3%83%B3%E3%82%AF%E5%AE%9A%E6%95%B0%E3%81%BE%E3%81%A7-%E3%83%96%E3%83%AB%E3%83%BC%E3%83%90%E3%83%83%E3%82%AF%E3%82%B9-%E8%87%BC%E7%94%B0%E5%AD%9D-ebook/dp/B09RWPCYZW?keywords=%E5%AE%87%E5%AE%99%E3%82%92%E6%94%AF%E9%85%8D%E3%81%99%E3%82%8B%E5%AE%9A%E6%95%B0&qid=1686009975&sprefix=%2Caps%2C215&sr=8-1&linkCode=ll1&tag=qiitajinbei23-22&linkId=1494f15305a8af0c40a9c81782e53846&language=ja_JP&ref_=as_li_ss_tl

https://kotobank.jp/word/%E5%BE%AE%E7%B4%B0%E6%A7%8B%E9%80%A0%E5%AE%9A%E6%95%B0-119546

https://ja.wikipedia.org/wiki/%E5%BE%AE%E7%B4%B0%E6%A7%8B%E9%80%A0%E5%AE%9A%E6%95%B0
GoogleMapのMarkerClustererを使う

[前回の続き](https://qiita.com/n739dev/items/a2e1a58a7c6f1c6b2342)で、
ライブラリを最新にアップデートして、MarkerClustererをimportまでした状態からです
ドキュメント通り書けば行ける話なんですが、理解に時間かかったのでメモです


## 作業環境
* Nuxt.js (v2.15.8)
* `@googlemaps/js-api-loader` (v1.15.2) を使用
* `@googlemaps/markerclusterer` (v2.1.3)　を使用

## MarkerClustererを使うぞ
ドキュメント通りだと、こうですが
```js
import { MarkerClusterer } from "@googlemaps/markerclusterer";

const markerCluster = new MarkerClusterer({ map, markers });
```

Nuxtを使っているので、ちょっと工夫します
`data()`内に`this.map`とか`this.markers`を作って実装していると
脳死で書くとこうなる
```js
this.markerCluster = new MarkerClusterer({ this.map, this.markers });
```
これだとエラーが出るので、
:whale: [公式ドキュメント](https://googlemaps.github.io/js-markerclusterer/index.html)を見ます、オプションは下記だそうです
```typescript
{
    algorithm?: Algorithm;
    map?: google.maps.Map;
    markers?: google.maps.Marker[];
    renderer?: Renderer;
    onClusterClick?: onClusterClickHandler;
}
```
こう書けばいける
```js
this.markerCluster = new MarkerClusterer({ 
    map: this.map,
    markers: this.markers
});
```

### 他のオプションを追加する

アルゴリズムを追加する場合はimportに使うアルゴリズムを追記
:whale: [公式ドキュメントのアルゴリズムDEMOはこちら](https://googlemaps.github.io/js-markerclusterer/public/algorithms/)
```js
import { MarkerClusterer, GridAlgorithm } from "@googlemaps/markerclusterer";
```
algorithmのoptionを追記
```js
this.markerCluster = new MarkerClusterer({ 
    map: this.map,
    markers: this.markers,
    algorithm: new GridAlgorithm({ maxDistance: 4000 }),
});
```

Clusterのアイコンをカスタマイズしたい場合は`renderer`を追記します
:whale: [公式ドキュメントのレンダーDEMOはこちら](https://googlemaps.github.io/js-markerclusterer/public/renderers/)
```js
this.markerCluster = new MarkerClusterer({ 
    map: this.map,
    markers: this.markers,
    algorithm: new GridAlgorithm({ maxDistance: 4000 }),
    renderer: {
        render: ({ count, position }) =>
            new google.maps.Marker({
                icon: {
                    // アイコン画像を使う場合はここにその情報を書く
                },
                label: {
                    text: String(count),
                },
                position,
                // 他のマーカーの上になるよう調整
                zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
    },
});
```
`new google.maps.Marker()`は公式リファレンスがあるのでそれぞれのプロパティが使えます
https://developers.google.com/maps/documentation/javascript/reference/marker?hl=ja#MarkerOptions

こんな感じで実装完了です :tada:
`GridAlgorithm`は見えている範囲外は消してくれるっぽい挙動をするので、とりあえず軽そうという意味で選択してますが
ドキュメント曰く、移動する時にチラつくため、回避したい場合は`SuperClusterAlgorithm`を使ってね
と書いているっぽいです（英語ワカラナイので翻訳曰くです）

## まとめ
オプションの書き方が、書いてないので、元ソースを見たりして大変だった
markerclustererplusの時は見えてない範囲外の処理を別途記載しないと行けなかったので
その点はアルゴリズムで基本装備しているっぽいので楽そうだな～（はたして・・・）

よく分からなくて検索すると`new MarkerClusterer( map, markers );`の内容が引っかかるので
これだと違うので、まあまあ実装出来るまで時間かかったよ(;´д｀)ﾄﾎﾎ…


## 次の記事
https://qiita.com/n739dev/items/5a21ab90dfbbe8399168
RubyでAtCoder ABC255(A, B, C)を解いてみた

# はじめに
Webエンジニアを目指して、RubyやRailsをいじってます。
今回は、RubyでAtCoder ABC255のA, B, Cを解きました。備忘録として解き方をまとめていきたいと思います。

# A - You should output ARC, though this is ABC.
https://atcoder.jp/contests/abc255/tasks/abc255_a
```ruby:a-255.rb
r, c = gets.split.map(&:to_i)
a, b = gets.split.map(&:to_i)
d, e = gets.split.map(&:to_i)

if r == 1
  puts c == 1 ? a : b
else
  puts c == 1 ? d : e
end
```

# B - Light It Up
https://atcoder.jp/contests/abc255/tasks/abc255_b
```ruby:b-255.rb
n, k = gets.split.map(&:to_i)
a = gets.split.map(&:to_i)
array = Array.new(n) { gets.split.map(&:to_i) }

ans = 0
array.each_with_index do |(x, y), index|
  next if a.include?(index + 1)
  d = a.map{ |nx| (x - array[nx - 1][0]) ** 2 + (y - array[nx - 1][1]) ** 2 }.min
  ans = [ans, d].max
end
puts Math.sqrt(ans)
```
## 解説
（公式解説を参考にしました）

その人から最も近い人が明かりをもっていれば良いので、答えはその人から最も近い人までの距離の最大値となります。

# C - ±1 Operation 1
https://atcoder.jp/contests/abc255/tasks/abc255_c
```ruby:c-255.rb
def f(a, d, i)
  a + i * d
end

x, a, d, n = gets.split.map(&:to_i)

if d < 0
  a += d * (n - 1)
  d *= -1
end

if x <= a
  puts a - x
  exit
elsif x >= f(a, d, n - 1)
  puts x - f(a, d, n - 1)
  exit
end

result = (0..n - 1).bsearch { |i| f(a, d, i) >= x }
ans = [(f(a, d, result) - x).abs, (f(a, d, result - 1) - x).abs].min
puts ans
```
## 解説
（公式解説を参考にしました）

最初に、`D<0`の場合は与えられた等差数列を反転します。このとき答えは、Xに最も近いSの要素を二分探索して求めた値とXとの差となります。

https://qiita.com/shoya15/items/50fd17e37d7c64f2b166
【Android】アプリ内操作でスマホのホーム画面へ【Kotlin】

# はじめに
最近はアプリ内から端末側の操作をする実装を多く、Intentを使う機会があったのでそれについて色々試しています。
今回は、その中で　今後役に立ちそうだな　と思った昨日の一つを記事にします。

# ボタンを押してスマホのホーム画面へ
```
val button = findViewById<Button>(R.id.button)

button.setOnClickListener {
        startActivity(Intent(ACTION_MAIN).addCategory(CATEGORY_HOME))
}
```
addCategory()の引数を他のものに変えることで　端末の設定画面などにも飛ばせるようです。

# おわりに
今後　端末への権限周り（パーミッション）なんかも　使いこなせるようになっていけると
新規実装などに携わることがあった時に役に立つかなと思っているのでその辺もいい感じに記事にできればいいなと思ってます。



# 参考
https://maku77.github.io/android/fw/task-and-affinity.html

https://mitoroid.com/category/android/android_implicit_intent.phpclass
kintone UI Componentでkintoneライクなアラートを表示する

# はじめに

kintone UI Componentのドキュメントに「Guides」ページがあって、プラグイン画面を作成する手順などがステップ・バイ・ステップで解説されています。

https://kintone-ui-component.netlify.app/docs/ja/guides/format-setting-plugin

その中で、kintoneライクなダイアログを表示させているこの部分。
これだけピックアップして使えるととても便利だと思ったので、
関数を作ってみました。ほぼ自分用メモです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/b275c61c-859e-5842-18f1-8112842aaa82.png)

# 完成イメージ

![CleanShot 2023-05-26 at 19.16.02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/e2b0c3a3-678d-0f0f-402e-5114e40441a3.gif)

# やりかた

Dialogコンポーネントのインスタンスを作成するラッパー関数をまず作成。
イベントハンドラ内に直接書いても動きますが、関数化しておく方が使い回せて絶対便利。

```js
const { Button, Dialog } = Kuc

const createDialog = ({ text, cancelButton = false, onSubmit, onCancel }) => {
  // 本文
  const content = document.createElement('div')
  content.style.textAlign = 'center'
  content.style.padding = '48px 24px'
  content.innerHTML = `<p>${text}</p>`

  // フッター（ボタン配置位置）
  const footer = document.createElement('div')
  footer.style.textAlign = 'center'

  // キャンセルボタン
  if (cancelButton) {
    const dialogCancelButton = new Button({
      text: 'Cancel',
      type: 'normal',
    })
    dialogCancelButton.style.marginRight = '16px'
    dialogCancelButton.addEventListener('click', async () => {
      if (onCancel) {
        await onCancel()
      } else {
        dialog.close()
      }
    })
    footer.appendChild(dialogCancelButton)
  }

  // OKボタン
  const dialogOKButton = new Button({
    text: 'OK',
    type: 'submit',
  })
  dialogOKButton.addEventListener('click', async () => {
    if (onSubmit) {
      await onSubmit()
    } else {
      dialog.close()
    }
  })
  footer.appendChild(dialogOKButton)

  // Dialogインスタンスを作成して返す
  const dialog = new Dialog({
    content,
    footer,
  })
  return dialog
}
```

イベントハンドラから使うときは、こんな感じ。

```js
kintone.events.on('app.record.index.show', () => {
  const button = new Button({ text: 'データ一括登録', type: 'submit' })
  kintone.app.getHeaderMenuSpaceElement()?.appendChild(button)

  // ラッパー関数でDialogインスタンスを作成
  const confirmDialog = createDialog({
    text: 'データを一括登録します。実行してもよろしいですか？',
    cancelButton: true,
    onSubmit: async () => {
      // TODO: 何かしらの登録処理

      // コールバックを書いたときは自身を閉じるのも手動で行う
      confirmDialog.close()

      // 完了ダイアログを表示
      const successDialog = createDialog({ text: 'データ登録が完了しました。' })
      successDialog.open()
    },
  })

  button.addEventListener('click', async () => {
    // ダイアログを表示
    confirmDialog.open()
  })
})
```

# 改めて完成イメージ

大事なことなので2回貼りました

![CleanShot 2023-05-26 at 19.16.02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/e2b0c3a3-678d-0f0f-402e-5114e40441a3.gif)


# おわりに

kintoneでは[SweetAlert](https://sweetalert.js.org/)とかを使うのが定番でしたが、UI Componentを使うと「あたかもkintone標準ダイアログのような見た目」にできるので、ナチュラルさに拘りたい方は、積極的に導入していくと良いと思います！

できれば、UI Componentの標準機能でこれくらいを一発で出してもらえるとうれしいなぁ〜とは思ってます。サイボウズさん、今後に期待してます！！！
【ChatGPT無】嘘吐きを減らそう

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

　ChatGPTに限らず、文章生成AIは、わからないことを“わからない”とは言わず、もっともらしい文章を生成してきます。

　これは「入力者の指示が足りないことに起因している」と私は思います。

　質問に
「**わからない・知らない場合は、そう言ってください**」
と指示を追加すれば、余計な返答は少なくなります。

　あくまで「少なくなります」です。おそらく、完全になくなるわけではないでしょう。場合によっては、無視される可能性もあります。でも、この指示をしないよりも、返答はマシになるはずです。

「正確な情報が欲しいです」は、ダメでした。適当なことを吐き出します（悲）

　ただ、逆に「アイディアを得たい・考えつかない言葉が欲しい」などの場合は、この指示はいらないでしょう。

　適材適所ということで、使い分けてください。
***
追加しました。
[【ChatGPT無】嘘吐きを減らそう（その２）](https://qiita.com/kabumira/items/94567d7411309f63e7a5)

[【ChatGPT無】嘘吐きを減らそう（その３）](https://qiita.com/kabumira/items/c04419e9dd6a72ab70ec)

[【ChatGPT無】嘘吐きを減らそう（その４）](https://qiita.com/kabumira/items/ea9d668d665c69478ce2)


　こちらもよろしく。
Flutter 学習メモ Dart 編

## この記事について

Flutter の開発で利用される言語・`Dart` に関する覚え書きです。
全体的に JavaScript/TypeScript と同じような感覚でコーディングが可能で、比較的覚えやすい言語ではありますが、一部書き方に迷った部分がありました。

### 環境情報

- OS: Mac OS 12.6.5
- Dart: 2.19.0

## コンストラクタ

コンストラクタは、クラスの初期化時に実行される処理です。
Dart には複数の種類のコンストラクタがあり、通常のコンストラクタだけでも様々な書き方ができます。

その他のコンストラクタについては、[公式](https://dart.dev/language/constructors)を参考にしてください。

### 通常のコンストラクタ

引数で初期値を受け取り、インスタンス変数に設定する方法です。Java のコンストラクタと似た書き方となります。

```dart
class Employee {
  String name = '';
  int age = 0;

  Employee(String name, int age) {
    this.name = name;
    this.age = age;
  }
}
```

### 省略形

コンストラクタの処理部分を省略することができます。

```dart
class Employee {
  String name;
  int age;

  Employee(this.name, this.age);
}
```

### 名前付き引数

コンストラクタでも、名前付き引数が使用できます。必須(`required`)かどうかの指定もできます。

```dart
class Employee {
  String name;
  int? age;

  Employee({required this.name, this.age});
}

void main() {
  var employee = Employee(name: 'Taro');
  print(employee.age); // Taro
}
```

### 初期化処理を続けて記載

コンストラクタの直後にコロンを記載し、初期化処理を続けて記載することも可能です。
複数の項目の初期化をする場合は、カンマで区切ります。

```dart
class Employee {
  final String _name;
  final int _age;

  Employee({required name, int age = -1}): _name = name, _age = age;

  // getter
  String get name => _name;
  int get age => _age;
}

void main() {
  var employee = Employee(name: 'Jiro', age: 31);
  print(employee.name); // Jiro
  print(employee.age); // 31
}
```

## 変数宣言

`var`を使うと、代入可能な変数が宣言できます。JavaScript でいう`let`と同様です。

```dart
  var moji = '初期値';
  moji = '変更後';
  print(moji);  // 「変更後」が出力される
```

データ型を指定すると、`var`が不要になります。

```dart
  String moji = '初期値';
  moji = '変更後';
  print(moji);  // 結果は上記の例と同じ
```

`dynamic`で変数宣言すると、データ型を制限しない変数となります。JavaScript でいう`any`に近いです。
あまり多用しない方が良いでしょう。

```dart
  dynamic val = '初期値';
  val = 1000;
  print(val); // 「1000」が出力される
```

## const と final キーワード

`const`キーワードを設定可能な箇所で const を省くと、「パフォーマンス向上のために const を使ってね」と lint が警告をしてきます。

```text
Use 'const' with the constructor to improve performance.
Try adding the 'const' keyword to the constructor invocation.`
```

`const`の指定が推奨される例

```dart
  appBar: AppBar(
    title: const Text('ホーム'),  // 不変な値のため、constが指定可能
  ),
```

`const`の指定ができない例

```dart
  final String title = '${DateTime.now().day}日の登録データ';
  (中略)
  appBar: AppBar(
    title: Text(title),  // 実行するまで値が決まらないため、constは指定不能
  ),
```

Dart では`final`キーワードも使用可能であり、`const`とは以下のような違いがあります。

- `const`: コンパイル時点で値が確定しており、再代入や内包する要素の変更は一切できない（静的な要素にのみ用いる）
- `final`: 再代入を禁じるのみであり、要素の変更は可能

`final`の方が制限が穏やかであり、JavaScript で使用される`const`に近い感覚です。

プログラムの変更によって const が指定できない状態になるとコンパイルエラーが起きるため、const キーワードは外さなければなりません。
そのことに気づかずエラーの原因に悩まされたこともあったため、少し注意が必要です。

## Dart では"できない"書き方

JavaScript と同じ感覚で書こうとすると、Dart ではエラーとなる書き方もあります。

### 分割代入

一括してプロパティを取得することはできないため、1 つずつ取り出さざるを得ないようです。

```dart
const data = {'a': 'val1', 'b': 'val2'};
// final { a } = data; このような書き方は不可
final a = data['a'];
```

### value の省略

キー名と変数名が同じ場合、JavaScript では value 部分を省略することがよくあります。

しかし Dart では、波括弧に変数だけを入れると、 Set 型変数の定義となってしまいます。

```dart
  const title = 'タイトル';
  const value = '表示値';

  const setData = {title, value}; // この定義方法だとSetになる
  const mapData = {'title': title, 'value': value}; // key-value形式にする場合はこのように書く
```
【Paiza問題集】標準出力/実数をフォーマット指定して出力

# Paiza問題集
Pythonで回答

## 標準出力/実数をフォーマット指定して出力

### Step01 1つの実数を出力
```Python:Step01
"""
1つの実数を出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__format_real_number_step1
"""

# 実数を出力する
print(float(input()))
```

### Step02 1つの実数を出力2
```Python:Step02
"""
1つの実数を出力2
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__format_real_number_step2
"""

# 実数を表示する
print(input())
```

### Step03 1つの実数を表示3
```Python:Step03
"""
1つの実数を表示3
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__format_real_number_step3
"""

# 実数を小数点以下3桁で出力
print(f'{float(input()):.3f}')
```

### Step04 1つの実数を表示4
```Python:Step04
"""
1つの実数を表示4
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__format_real_number_step4
"""

# 数字を受け取る
numbers = input().split(' ')
num1 = float(numbers[0])
num2 = int(numbers[1])

# 数字を表示する
print('{:.{}f}'.format(num1, num2))
```

## Final問題 【実数をフォーマット指定して出力】複数の実数を出力 
```Python:Final問題
"""
【実数をフォーマット指定して出力】複数の実数を出力 
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__format_real_number_boss
"""

# 数字を表示する
for i in range(int(input())):
    numbers = input().split(' ')
    num1 = float(numbers[0])
    num2 = int(numbers[1])
    print('{:.{}f}'.format(num1, num2))
```


### 追記
短く書く方法を思いついたので記述します

### Step04別解
```Python:step04別解
# 数字を受け取る
num1, num2 = [x[0](x[1]) for x in zip([float, int], input().split(' '))]

# 数字を表示する
print(f'{num1:.{num2}f}')
```
ポイント
* zip関数を使用する
* 得られたリストとリスト内包表記を組み合わせて、float関数とint関数を適用し、num1とnum2に代入する
* f-stringsを使用し出力形式を整える


### Final問題 別解
```Python
# 数字を表示する
for i in range(int(input())):
    num1, num2 = [x[0](x[1]) for x in zip([float, int], input().split(' '))]
    print(f'{num1:.{num2}f}')
```
rbs subtract を試しに使ってみる


個人的な興味で RBS を一度調べたことがあって，今回もその辺りを後で確認していく流れ

https://speakerdeck.com/pocke/lets-write-rbs

```shell-session
$ rbs subtract
```

ignore するのが欲しかったので，`subract` がポイントなのかも．

## 試してみる

- https://github.com/r7kamura/mem

```shell-session
$ ruby -v
ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [x86_64-linux]
$ gh repo clone https://github.com/r7kamura/mem
$ cd mem
$ git diff
diff --git a/mem.gemspec b/mem.gemspec
index 2d578ae..eb8c9b8 100644
--- a/mem.gemspec
+++ b/mem.gemspec
@@ -18,5 +18,7 @@ Gem::Specification.new do |spec|

   spec.add_development_dependency "bundler"
   spec.add_development_dependency "rake"
-  spec.add_development_dependency "rspec", "2.14.1"
+  spec.add_development_dependency "rspec"
+  spec.add_development_dependency "typeprof"
+  spec.add_development_dependency "steep"
 end
$ bundle install
$ typeprof lib/mem.rb lib/mem/core_ext.rb lib/mem/version.rb spec/mem_spec.rb spec/spec_helper.rb > sig/mem.rbs
$ cat Steepfile
target :lib do
  signature "sig"
  check "lib"
end
$ steep check
# Type checking files:

........................................F......................[Steep 1.4.0] [typecheck:typecheck@1] [background] Unexpected error: #<RBS::RecursiveAncestorError: /usr/local/bundle/gems/rbs-3.1.0/core/object.rbs:108:
0...1075:3: Detected recursive ancestors: ::Object < ::Mem < ::Object>
(snip)
```

Recursive らしい

```ruby:sig/mem.rbs
# TypeProf 0.21.7

# Classes
class Object
  extend Mem::ClassMethods
  include Mem

  private
  def a: (untyped value) -> [untyped, untyped]
       | -> nil
  def b: (untyped value) -> [untyped, untyped]
       | (untyped value) -> [untyped, untyped]
       | -> nil
  def c: -> String
       | -> nil
  def a!: (untyped value) -> [untyped, untyped]
end

module Mem
  VERSION: String
  @memoized_table: Hash[untyped, untyped]

  def self.included: (singleton(Object) base) -> singleton(Object)
  def has_memoized?: (untyped key) -> bool
  def memoize: (untyped key, untyped value) -> untyped
  def memoized: (untyped key) -> nil
  def memoized_table: -> Hash[untyped, untyped]
  def unmemoize: (untyped key) -> nil

  module ClassMethods
    def memoize: (untyped method_name) -> nil
  end
end
```

- `Object include Mem` が怪しい．

```ruby:sig-ignore/hand-written.rbs
class Object
  include Mem
end
```

```shell-session
$ rbs subtract -w sig/mem.rbs sig-ignore/hand-writte.rbs
```

この時点で，`include Mem` が無くなっていることは確認した

```shell-session
$ steep check
# Type checking files:

..............................................................................F.......

lib/mem.rb:32:13: [error] Type `(::Object & ::Mem::ClassMethods)` does not have method `protected_instance_methods`
(snip)
```

結果が変わったので，使えているのはわかった．

## NOTE

最初，hand-written.rbs を 同じディレクトリに入れていてハマっていた．
考えればあたりまえだった．

## 余談

- 全然関係ないけど，Rouge が RBS 対応して欲しい．
    - https://rouge-ruby.github.io/docs/file.Languages.html

## Refs

- https://tech.stmn.co.jp/entry/rubykaigi-2023-report
- https://github.com/ruby/rbs
コピペで始めるDockerアプリ集


この記事はOSSプロジェクトの一環で、コピペでDockerアプリを立ち上げるシェルスクリプトを集めてます。

まだまだ途中のコードなのでご協力いただける方は本Qiitaに編集リクエストを提出するか、以下のリポジトリにプルリクエストの提出をお願いします。

https://github.com/new-awesomedocker/awesomedocker/blob/main/Readme.jp.md





## CDN

### nginx

```sh
git clone https://github.com/new-awesomedocker/awesomedocker.git
cd awesomedocker/nginx
docker-compose up
```

and see http://localhost



## webAPP

### React Native

https://docker.hatenablog.jp/entry/2023/05/18/213054


### flask


```sh
git clone https://github.com/new-awesomedocker/awesomedocker.git
cd awesomedocker/flask/
docker image build -t flask .
docker run -it -p 80:80 -v ./code:/code flask bash
```

`python main.py`


ブラウザから http://localhost/

にアクセスしてみてください。
    

### django

```sh
git clone https://github.com/new-awesomedocker/awesomedocker.git
cd awesomedocker/django/
docker image build -t django .
docker run -it -p 80:80 -v ./code:/code django bash
```

and `python mysite/manage.py runserver 0.0.0.0:80`

access to http://localhost/


## web system

### knowledge


```sh
git clone https://github.com/new-awesomedocker/awesomedocker.git
cd awesomedocker/knowledge
docker-compose up
```

access to http://localhost/:8080


## プログラミング開発環境

### commonlisp

```sh
git clone https://github.com/new-awesomedocker/awesomedocker.git
cd awesomedocker/commonlisp
docker-compose build
docker-compose run --rm lisp_sh sbcl
```

### python

```sh
git clone https://github.com/new-awesomedocker/awesomedocker.git
cd awesomedocker/pythonconsole/
docker image build -t pythonconsole .
docker run -it -v ./code:/code pythonconsole bash
```
VS Code で prettier-plugin-tailwindcss を使う

prettier-plugin-tailwindcssをdev-dependencyとしてインストールします。

```sh
npm install -D prettier prettier-plugin-tailwindcss
```

settings.json にフォーマットの設定を追加します。

```json:.vscode/settings.json
{
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

ルートディレクトリに prettier.config.js を作成します。

```js:prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}
```

HTML を編集し、

```html
<div class="px-4 bg-sky-700">foo</div>
```

を保存すると、

```html
<div class="bg-sky-700 px-4">foo</div>
```

とソートされます。