OmniAICreator/Qiita-1.07M huggingface dataset:
AWS CloudShellのスペック、docker compose、IAMについてなど

## メリット

* dockerが動作している。docker-composeは入っていない。
* AWS CloudShellは、IAMユーザーごとに個別の環境が提供される。
* 1つのAWSアカウントで複数のIAMユーザーを作成できる。
* IAMユーザーの作成や利用自体には追加料金はかからない
* メモリは 4GB もある！
* Disk容量は `~/`が 1GB、docker用が10GB (/home/と共用)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/3e045b0c-7ab9-4931-aea3-f0e481eb97b7.png)


## セッション自動終了

無操作20〜30分でセッション自動終了 (バックグラウンドプロセスは操作とみなされない)
最大12時間でセッション自動終了
120日間未使用でホームディレクトリ（/home/cloudshell-user）自動削除


```sh
# バックグラウンドプロセスの例
while true; do echo "keep alive"; sleep 300; done
```


## docker-composeを利用するには

```sh
# ダウンロード
curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" \
  -o ~/docker-compose

chmod +x ~/docker-compose

~/docker-compose version
```


* 意外とCloudShellで事足りるかも。

## Google Cloud Shell

Google Cloud Shellは 5GBの永続化ディスク、dockerも動作。
セッションが1時間操作されないと自動的に終了し、VMは破棄されます（ホームディレクトリの内容は保持）。
Material 3 Expressive実装例 : Progress indicator

Material 3 Expressive の実装例の紹介シリーズです。
今回は Progress indicator を紹介します。
(`androidx.compose.material3:material3:1.4.0-alpha15` 時点での内容になります。)

## Material 3 Expressive での変更点
- Wavy のスタイルが追加されてこれまでのは Flat として 2 種類から選択可能に

https://m3.material.io/components/progress-indicators/overview

## 実装

Wavy なスタイルは `CircularWavyProgressIndicator` / `LinearWavyProgressIndicator` を、Flat なスタイルはこれまでの `CircularProgressIndicator` / `LinearProgressIndicator` を使用します。

```kotlin
// Circular
CircularProgressIndicator()
CircularWavyProgressIndicator()

// Linear
LinearProgressIndicator()
LinearWavyProgressIndicator()
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/70e4cbb1-0be9-4cda-8a29-05d81e5354e5.gif" width="300px" />

Wavy なスタイルで Track の太さを変更する場合は以下のようにカスタム `Stroke` を実装します。

```kotlin
val thickStrokeWidth = with(LocalDensity.current) { 8.dp.toPx() }
val thickStroke = remember(thickStrokeWidth) {
    Stroke(width = thickStrokeWidth, cap = StrokeCap.Round)
}

// Circular
CircularWavyProgressIndicator(
    stroke = thickStroke,
    trackStroke = thickStroke,
)

// Linear
LinearWavyProgressIndicator(
    stroke = thickStroke,
    trackStroke = thickStroke,
)
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/a534446d-fd8d-4302-9ede-31e0ec98b154.gif" width="300px" />
Material 3 Expressive実装例 : Navigation bar

Material 3 Expressive の実装例の紹介シリーズです。
今回は Navigation bar を紹介します。
(`androidx.compose.material3:material3:1.4.0-alpha15` 時点での内容になります。)

## Material 3 Expressive での変更点
- Material 3 の Navigation bar よりも高さが短く変更
- Medium の Window size で使用可能な Horizontal なアイテム表示の追加
- 選択中のアイテムのラベルの色が On surface variant から Secondary に変更

https://m3.material.io/components/navigation-bar/overview

## 実装

### `ShortNavigationBar`

これまでの `NavigationBar` 相当の `ShortNavigationBar` が用意されています。
こちらを使うことで Material 3 Expressive で変更された高さが短い Navigation bar が適用されます。

```kotlin
ShortNavigationBar {
    items.forEachIndexed { index, item ->
        ShortNavigationBarItem(
            icon = {
                Icon(
                    painter = painterResource(item.icon),
                    contentDescription = null
                )
            },
            label = { Text(item.label) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/4ede69ab-c75e-4203-8ad3-521f92c13be9.png" width="300px" />

### Horizontal navigation items

`ShortNavigationBar` の Arrangement を中央に変更しつつ、`ShortNavigationBarItem` の `iconPosition` を `NavigationItemIconPosition.Start` に変更することで Horizontal な表示にすることができます。

```kotlin
ShortNavigationBar(
    arrangement = ShortNavigationBarArrangement.Centered
) {
    items.forEachIndexed { index, item ->
        ShortNavigationBarItem(
            iconPosition = NavigationItemIconPosition.Start,
            icon = {
                Icon(
                    painter = painterResource(
                        if (selectedItem == index) selectedIcons[index] else unselectedIcons[index]
                    ),
                    contentDescription = null
                )
            },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/d318e159-7c38-4a70-a53d-e53dff636d1b.png" width="400px" />
Material 3 Expressive実装例 : Loading indicator

Material 3 Expressive の実装例の紹介シリーズです。
今回は新たに追加されたコンポーネントである Loading indicator を紹介します。
(`androidx.compose.material3:material3:1.4.0-alpha15` 時点での内容になります。)

## Loading indicator とは

Indeterminate な Circular progress indicator の代わりに使うことが推奨されるコンポーネントで、5　秒以内に読み込みが完了する処理の進行中であることを表すコンポーネントです。
Pull to refresh のインジケータとしても使用可能です。


https://m3.material.io/components/loading-indicator/overview

## 実装

### contained と uncontained

Loading indicator には contained と uncontained の 2 パターンがあり、どちらも標準で実装が用意されています。


```kotlin
// contained
ContainedLoadingIndicator()

// uncontained
LoadingIndicator()
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/6581b0bb-6de1-438a-bc2d-d9c9691a05f6.gif" width="300px" />


### Pull to refresh との組み合わせ

Pull to refresh で使う Loading indicator の `PullToRefreshDefaults#LoadingIndicator` が標準で用意されています。

```kotlin 
val state = rememberPullToRefreshState()
PullToRefreshBox(
    state = state,
    isRefreshing = isRefreshing,
    onRefresh = onRefresh,
    indicator = {
        PullToRefreshDefaults.LoadingIndicator(
            state = state,
            isRefreshing = isRefreshing,
            modifier = Modifier.align(Alignment.TopCenter),
        )
    }
) { ... }
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/0d8a0509-467f-4394-8539-dc27df9b2ec6.gif" width="300px" />

ガイドラインのようにスケールして表示させたい場合はカスタマイズすることで近づけることができます。

```kotlin
val state = rememberPullToRefreshState()
val scaleFraction = {
    if (isRefreshing) {
        1f
    } else {
        LinearOutSlowInEasing.transform(state.distanceFraction).coerceIn(0f, 1f)
    }
}
Box(
    Modifier
        .pullToRefresh(
            state = state,
            isRefreshing = isRefreshing,
            onRefresh = onRefresh
        )
) {
    ...
    Box(
        Modifier
            .align(Alignment.TopCenter)
            .graphicsLayer {
                scaleX = scaleFraction()
                scaleY = scaleFraction()
            }
    ) {
        PullToRefreshDefaults.LoadingIndicator(
            state = state,
            isRefreshing = isRefreshing
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/e3d80258-2d33-4dce-bb7b-cd9935d7a8c5.gif" width="300px" />
【Nuxt, Vue】NuxtLinkで同じセクションに遷移できない、リロードしてもセクションに遷移しない【VueRouter, vue-router】

## 現象
`NuxtLink`の`:to`を使用して画面内のナビゲーションを作成したが、一度項目を選択した後、画面をスクロールして別のセクションまで移動、その後もう一度同じ項目を選択すると、遷移が起きずスクロールした位置のままになってしまう。

## 期待値
再度選択した場合も、セクションに遷移したい。

## 原因
これはNuxtLink(Vue Router)の仕様らしい。
同じセクションをクリックしても遷移前とURLが変わらないため、遷移がスキップされてしまう。

## 解消方法
`$router.push()`を使用する & `nuxt.config.js`を編集することで解決できる。

が、今回`nuxt.config.js`に手を加えたくなかったので、遷移ではないが、画面内スクロールを起こすことで解決してみました。

```vue
<template>
    <NuxtLink
        :key="link.to"
        :to="link.to"
        @click.native="handleClick($event, link.to)"
    >
        {{ link.label }}
    </NuxtLink>
</template>
<script lang="ts">
methods: {
    handleClick(event: MouseEvent, to: string) {
      // すでに同じハッシュが指定されている場合はスクロールする
      const hash = to.startsWith('#') ? to : to.split('#')[1] && `#${to.split('#')[1]}`
      if (hash && window.location.hash === hash) {
        event.preventDefault()
        const el = document.querySelector(hash)
        if (el) {
          el.scrollIntoView({ behavior: 'smooth' })
        }
      }
      // それ以外はNuxtLinkのデフォルト動作
    },
}
</script>
```

これで、同じセクションがクリックされた場合はスクロールで指定されたセクションを表示してくれるようになります。

## 解決方法2
前述した`$router.push()`を使用する & `nuxt.config.js`を編集する方法の場合
これはNuxt2限定のようです。Nuxt3の場合は`app/router.options.ts`とのこと

```vue
<template>
<!-- NuxtLinkは同じ -->
</template>
<script lang="ts">
methods: {
    handleClick(event: MouseEvent, to: string) {
        const current = this.$route.fullPath
        const target = to.startsWith('#') ? `${this.$route.path}${to}` : to

        if (current === target || (to.startsWith('#') && window.location.hash === to)) {
            event.preventDefault()
            // 強制的に遷移させる
            this.$router.push(target)
        }
        // それ以外はNuxtLinkのデフォルト動作
    },
},
</script>
```

```js
// nuxt.config.js
export default {
  // 他の設定は省略
  router: {
    scrollBehavior(to, from, savedPosition) {
      if (to.hash) {
        return new Promise((resolve) => {
          // DOMが描画されるまで待つ
          setTimeout(() => {
            const el = document.querySelector(to.hash)
            if (el) {
              el.scrollIntoView({ behavior: 'smooth' })
              resolve({ selector: to.hash })
            } else {
              resolve({ x: 0, y: 0 })
            }
          }, 300)
        })
      }
      if (savedPosition) {
        return savedPosition
      }
      return { x: 0, y: 0 }
    }
  }
}
```

この設定を加えると、リロードしても指定されたセクションまでスクロールしてくれます。
なので、`$router.push()`で再度同じURLに遷移すると、指定されたセクションを表示してくれるというわけですね。

## おわりに
vue-routerさんは便利だけど、デフォルトでよしなにやってくれないこともあるので要注意ですね。
Material 3 Expressive実装例 : FAB

Material 3 Expressive の実装例の紹介シリーズです。
今回は FAB (Floating action button)を紹介します。
(`androidx.compose.material3:material3:1.4.0-alpha15` 時点での内容になります。)

## Material 3 Expressive での変更点

- 新たに Medium のサイズが追加
- Small のサイズは非推奨
- Surface なスタイルが非推奨
  
https://m3.material.io/components/floating-action-button/overview

## 実装

### Baseline、Medium、Large のサイズ

```kotlin
// Baseline
FloatingActionButton(
    onClick = { },
) {
    Icon(
        painterResource(R.drawable.ic_edit),
        contentDescription = "Edit"
    )
}

// Medium
MediumFloatingActionButton(
    onClick = { },
) {
    Icon(
        painterResource(R.drawable.ic_edit),
        contentDescription = "Edit"
    )
}

// Large
LargeFloatingActionButton(
    onClick = { },
) {
    Icon(
        painterResource(R.drawable.ic_edit),
        contentDescription = "Edit"
    )
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/1c745ab3-118b-45f2-8777-4bb4335f9f35.png" width="300px" />


### Color の変更

FAB の色は `containerColor` に任意の色を設定することで変更できます。
ガイドラインでは Primary、Seconday、Tertiary、Primary container、Secondary container、Tertiary container のトークンの適用が標準となっています。

```kotlin
FloatingActionButton(
    onClick = { },
    containerColor = MaterialTheme.colorScheme.secondaryContainer
) {
    Icon(
        painterResource(R.drawable.ic_edit),
        contentDescription = "Edit"
    )
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/679aa012-e3e7-4083-860d-cadb3aab67ad.png" width="300px" />


### スクロールとの連動

標準で用意されている `Modifier#animateFloatingActionButton` を使うことで、スクロールに連動して外側に向かって非表示になるアニメーションを適用することができます。

```kotlin
val listState = rememberLazyListState()
val fabVisible by remember { derivedStateOf { listState.firstVisibleItemIndex == 0 } }
Scaffold(
    floatingActionButton = {
        FloatingActionButton(
            modifier = Modifier.animateFloatingActionButton(
                visible = fabVisible,
                alignment = Alignment.BottomEnd
            ),
            onClick = { },
        ) {
            Icon(
                painterResource(R.drawable.ic_edit),
                contentDescription = "Edit",
                modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize)
            )
        }
    },
    floatingActionButtonPosition = FabPosition.End,
) {
    LazyColumn(
        state = listState,
        contentPadding = it
    ) { ... }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/1e47f176-4860-4ec6-883e-4a33bab8f122.gif" width="300px" />
Material 3 Expressive実装例 : FAB menu

Material 3 Expressive の実装例の紹介シリーズです。
今回は新たに追加されたコンポーネントである FAB menu (Floating action bar menu)を紹介します。
(`androidx.compose.material3:material3:1.4.0-alpha15` 時点での内容になります。)

## FAB menu とは

FAB から開き、画面上に 2～6 個の関連アクションを表示するコンポーネントです。
この menu は Extended FAB からは開かれない点に注意です。

https://m3.material.io/components/fab-menu/overview


## 実装

`FloatingActionButtonMenu` が標準で用意されています。
ここで使われる FAB は `ToggleFloatingActionButton` を使う形になります。
Menu 部分は `FloatingActionButtonMenuItem` を使います。


```kotlin
Scaffold(
    floatingActionButton = {
        var fabMenuExpanded by rememberSaveable { mutableStateOf(false) }

        BackHandler(fabMenuExpanded) { fabMenuExpanded = false }

        FloatingActionButtonMenu(
            expanded = fabMenuExpanded,
            button = {
                ToggleFloatingActionButton(
                    modifier = Modifier
                        .semantics {
                            traversalIndex = -1f
                            stateDescription = if (fabMenuExpanded) "Expanded" else "Collapsed"
                            contentDescription = "Toggle menu"
                        },
                    checked = fabMenuExpanded,
                    onCheckedChange = { fabMenuExpanded = !fabMenuExpanded }
                ) {
                    val icon by remember {
                        derivedStateOf {
                            if (checkedProgress > 0.5f) R.drawable.ic_close else R.drawable.ic_add
                        }
                    }
                    Icon(
                        painter = painterResource(icon),
                        contentDescription = null,
                        modifier = Modifier.animateIcon({ checkedProgress })
                    )
                }
            }
        ) {
            items.forEachIndexed { index, (icon, label) ->
                FloatingActionButtonMenuItem(
                    modifier = Modifier.semantics {
                        isTraversalGroup = true
                        if (index == items.size - 1) {
                            customActions =
                                listOf(
                                    CustomAccessibilityAction(
                                        label = "Close menu",
                                        action = {
                                            fabMenuExpanded = false
                                            true
                                        }
                                    )
                                )
                        }
                    },
                    onClick = { fabMenuExpanded = false },
                    icon = { Icon(painterResource(icon), contentDescription = null) },
                    text = { Text(text = label) },
                )
            }
        }
    }
) { ... }
```
Material 3 Expressive実装例 : Extended FAB

Material 3 Expressive の実装例の紹介シリーズです。
今回は Extended FAB (Floating action button)を紹介します。
(`androidx.compose.material3:material3:1.4.0-alpha15` 時点での内容になります。)

## Material 3 Expressive での変更点

- 新たに Small、Medium、Large のサイズが登場
  - これまでの Extended FAB は非推奨になり同サイズである Small が置き換え先
- Surface なスタイルが非推奨
- ラベルのテキストサイズが大きくなるように調整
  - 非推奨な Extended FAB と同サイズの Small の場合 Label large から Title medium に変更されている
  
https://m3.material.io/components/extended-fab/overview

## 実装



これまでの `ExtendedFloatingActionButton` ではなく、それぞれのサイズ名が入った関数を使用します。

```kotlin
// Small
SmallExtendedFloatingActionButton(
    onClick = {},
    text = {
        Text("Edit")
    },
    icon = {
        Icon(
            painterResource(R.drawable.ic_edit),
            contentDescription = null,
        )
    }
)

// Medium
MediumExtendedFloatingActionButton(
    onClick = {},
    text = {
        Text("Edit")
    },
    icon = {
        Icon(
            painterResource(R.drawable.ic_edit),
            contentDescription = null,
            modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize),
        )
    }
)

// Large
LargeExtendedFloatingActionButton(
    onClick = {},
    text = {
        Text("Edit")
    },
    icon = {
        Icon(
            painterResource(R.drawable.ic_edit),
            contentDescription = null,
            modifier = Modifier.size(FloatingActionButtonDefaults.LargeIconSize),
        )
    }
)
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/1de202ae-13c4-49b2-9200-54fc587e7b57.png" width="300px" />
Material 3 Expressive実装例 : MaterialExpressiveTheme

Material 3 Expressive の実装例の紹介シリーズです。
今回は `MaterialExpressiveTheme` を紹介します。
(`androidx.compose.material3:material3:1.4.0-alpha15` 時点での内容になります。)

## `MaterialExpressiveTheme` とは

Material 3 Expressive を使う上で Expressive らしさを出すために必要になるのがこの `MaterialExpressiveTheme` です。

https://m3.material.io/styles/motion/overview/how-it-works

https://m3.material.io/blog/m3-expressive-motion-theming


## これまでの `MaterialTheme` との違い

`MaterialTheme` から `MaterialExpressiveTheme` に置き換えることで異なる点はデフォルトの `MothionScheme` が変更される点と、`MothionScheme` のカスタマイズが可能な点です。
また、`MaterialExpressiveTheme` の[デフォルトの `ColorScheme`](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt;l=1151) も異なるのですが、ほとんどのプロジェクトでは `ColorScheme` をカスタマイズすることになるのでここでは割愛します。
`1.4.0-alpha15` 時点では `Typography` も Expressive 版に置き換える TODO コメントがあるのですが、こちらは変更され次第追記します。

`MaterialTheme` では `MotionScheme#standard` が、`MaterialExpressiveTheme` では `MotionScheme#expressive` がデフォルトで適用されます。

|MotionScheme|説明|例|
|:--|:--|:--:|
|standard| これまでも適用されていた Linear なアニメーション| ![ezgif-2436d067bb3abe.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/8cf00732-a096-49d4-8610-aaa1910de799.gif) |
|expressive| Expressive らしい Spring なアニメーション|![ezgif-226363cfbef245.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/c8a62f91-a4e2-4be7-b910-63c4816a9878.gif) |


## 実装

`MaterialTheme` を使っていた部分を `MaterialExpressiveTheme` に置き換えるだけになります。

```Kotlin
// Before
@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        DarkColorScheme
    } else {
        LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

// After
@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        DarkColorScheme
    } else {
        LightColorScheme
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        content = content
    )
}
```

`MotionScheme` は独自でカスタマイズしたものを設定することも、`MotionScheme#standard` を適用することも可能です。
()

```kotlin
MaterialExpressiveTheme(
    motionScheme = MotionScheme.standard(),
    content = content
)
```


また、`MaterialExpressiveTheme` はこれまでの `MaterialTheme` と共存可能で、部分的に特定スコープ内で `MaterialExpressiveTheme` を適用することも可能です。

```kotlin
@Composable
fun Screen() {
    ...
    MaterialExpressiveTheme(
        colorScheme = MaterialTheme.colorScheme,
    ) {
        var isChecked by remember { mutableStateOf(false) }
        Switch(
            checked = isChecked,
            onCheckedChange = { isChecked = it }
        )
    }
}
```
【snowpark/snowflake】snowparkのファイル取り込みについて

　Snowflake上では、ファイルに取り込みたいものがあった場合はステージに配置して読み込実を行う。ローカルでsnowparkなどを使用する場合は、下記のようにsessionを使用してモジュールを読み込んだり、パッケージを読み込んだりすることができる。備忘のメモとして残しておきます。


- session.add_import()：ローカルの .py ファイルをUDFで使えるようにする
- session.add_packages()：必要なAnacondaパッケージをUDFで使えるようにする
- session.add_requirements()：requirements.txt で依存パッケージを一括追加する


| メソッド                            | 用途                              | サンプル用途例                    |
| ------------------------------- | ------------------------------- | -------------------------- |
| `session.add_import(...)`       | 依存する独自モジュールやリソースファイルの登録         | 外部 `.py` を別モジュールとして import |
| `session.add_packages(...)`     | Anaconda由来のパッケージを一括追加           | pandas, numpy などのUDF内で使用   |
| `session.add_requirements(...)` | requirements.txt を指定してパッケージ一括指定 | 細かいバージョン管理; コードの再現性向上      |

add_xxxというメソッドを見かけたら、snowparkで使用するsessionへ追加するんだなって覚えておきましょう。
cloudflaredやngrokでトンネルを張る

* 簡易的なゼロトラストアクセス制御。
* ngrok の有料化や機能制限をきっかけにcloudflared が後発のるいじｓ

## Cloudflared

* Cloudflareグローバルネットワークのエッジサーバーにトンネルを張り、Cloudflare Zero Trustと組み合わせて認証やアクセス制御も可能

### AWS CloudShell上でhttpdを起動して外部からアクセスするには

* cloudflared を用いる

```sh
sudo dnf install -y httpd
sudo httpd -k start
curl http://localhost
```

`<html><body><h1>It works!</h1></body></html>` とレスポンスがあれば動作している。

```sh
curl -LO "https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64"
chmod +x cloudflared-linux-amd64
./cloudflared-linux-amd64 tunnel --url http://localhost:80
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/0e55eeed-a5f8-4ddd-b09b-2690ad06a3f9.png)

WEBブラウザで上記に記載されるURLにアクセスすると表示できる。起動のたびにURLは変わります。



### ダウンロード

* [cloudflared-linux-amd64](https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64)
* [cloudflared-windows-amd64.exe](https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-windows-amd64.exe)
* [cloudflared-darwin-amd64.tgz](https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-darwin-amd64.tgz)

### RDPの場合

```sh
cloudflared.exe access rdp --url "rdp://localhost:9876"
```

* `localhost:9876` にリモートデスクトップ接続


### Dockerで動かすには

```sh
docker run -d --network=host cloudflare/cloudflared:latest tunnel \
 --no-autoupdate run --token <YOUR_TUNNEL_TOKEN>
```

* docker-composeで連携するには

```yml
version: '3.8'
services:

  http_server:
    image: httpd:latest
    container_name: cloudflared-http-server-container
    ports:
      - "8080:80"

  cloudflared:
    image: cloudflare/cloudflared:latest
    container_name: cloudflared-container
    depends_on:
      - http_server
    command: tunnel --no-autoupdate run --url http://http_server --token <YOUR_TUNNEL_TOKEN>
```

* http://localhost:8080

### ファイアウォール設定について

逆に勝手にトンネルを作られないようにするにはここをふさぐとよいのだが・・・

* https://developers.cloudflare.com/cloudflare-one/connections/connect-devices/warp/deployment/firewall/
* https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/configure-tunnels/tunnel-with-firewall/


## ngrok で同様のことをする

* https://dashboard.ngrok.com/signup

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/dfa9d6b9-e66d-4d5e-b6c1-1aee061d04e9.png)

サインアップを進めるとメール確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/c3301010-7c2d-4b0e-8540-6a7229ac25a7.png)

ダウンロードして実行方法が紹介されている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/2b910113-c329-4363-8422-6747ad8c270e.png)

### 直接ダウンロードする場合 (Linux)

```sh
curl -O "https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip"

unzip ngrok-stable-linux-amd64.zip
```

```sh
ngrok config add-authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

ngrok http http://localhost:8080
```
async await を使ったfetch

# try catch 仕組み

```js:
  async ~ + try (fetch始めるよ！)
  データ送信するよ、メソッド ＋ お決まり文定義
  if HTTP通信できなかったら
  HTTP通信失敗したよ、と表示
  HTTP通信できたら、HTTP通信できたよと表示
　data送信できたら
  　　させたい処理を書く
 データ送信できなかったら <catch>
 データ送れなかったよ、と表示


 ルール : 処理ができたらawaitを必ずかき、
         失敗したらawaitは書かない


//テーブルにdata追加 code化すると
fetch始めるよ！
async function createData(data) {
    try {

        ↓
  データ送信するよ、メソッド ＋ お決まり文定義
      const response = await fetch('https://jsonplaceholder.typicode.com/users', { // ダミーAPI
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
             ↓
             
    //if HTTP通信できなかったら
      if (!response.ok) {

    //HTTP通信失敗したよ、と表示
        throw new Error(`HTTP error! status: ${response.status}`);
              ↓
      }
      HTTP通信できたら、HTTP通信できたよと表示
      const result = await response.json();
      console.log('APIから新規データが追加されました:', result);
      
                ↓
  //data送信できたら、データ保存・データ更新
  ・データ削除 /  入力formを空に
      studentData.push({ ...data, id: nextId++ }); // IDを更新
      saveDataToLocalStorage();
      renderTable();
      clearFormInputs();
            ↓
    } catch (error) {
      console.error('データ追加に失敗しました:', error);
      alert('データ追加に失敗しました。');
    }
  }
```

# ばつボタン　仕組み

```js:
 ばつボタンはspan

parseInt ：数字を整数にしてdata返却
例 066 → 66に
```
Jotai は React と特に関係ないライブラリなので L チカもできる

タイトルは嘘です。React と関係あります。

しかしながら、React 依存部分と関係ないところは `jotai/vanilla` として分離されているので、React がなくても使えます。
この特徴は、React 以外の Vue などの他のフロントエンドで使えるだけでなく、ユニットテストやサーバーサイドでも活躍します。

## ラズパイで L チカするコード

下のようなコードを書きました（一部抜粋）。
https://github.com/mitayuki3/jotai-led-blinker-example

```js
import { atom, createStore } from "jotai/vanilla";

let led;
let blinkInterval = null;

const lampAtom = atom(false);
const toggleAtom = atom(null, (get, set) => {
  const prev = get(lampAtom);
  set(lampAtom, !prev);
});
const store = createStore();

// lampAtom の値を監視して LED 出力に反映する
store.sub(lampAtom, () => {
  const value = store.get(lampAtom);
  if (value) {
    led.on();
    console.log("LED: turn ON");
  } else {
    led.off();
    console.log("LED: turn OFF");
  }
});

async function blinkLED() {
  blinkInterval = setInterval(() => {
    store.set(toggleAtom);
  }, 500);
}
```

動き

1. `setInterval` で `store.set` する
2. `lampAtom` の値が変わる
3. `lampAtom` をサブスクライブするコールバックが呼ばれる
4. コールバックで LED を ON/OFF する

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188794/f2985fb2-7b4f-45c9-b410-e931d2546723.gif)
*光りました！*
同じ誕生日を持つ人がいない確率の計算

```Python
# Program Name: birthday_probability.py
# Creation Date: 20250611
# Overview: Calculate the probability that at least two people share the same birthday in a group
# Usage: Run the script to compute the probability for a given group size

# ライブラリのインストール / Install necessary libraries
!pip install sympy --quiet

# 数値は一元管理 / Define constants
n_people = 40   # 電車内の人数（人）/ Number of people on the train
days_in_year = 365  # 1年の日数（閏年でない）/ Days in a year

# 同じ誕生日を持つ人がいない確率の計算 / Calculate probability that all birthdays are unique
import math

# 一意な誕生日の確率 / Probability of all unique birthdays
def unique_birthday_probability(n, days):
    if n > days:
        return 0.0
    prob_unique = 1.0
    for i in range(n):
        prob_unique *= (days - i) / days
    return prob_unique

# 少なくとも1組が同じ誕生日になる確率 / At least one shared birthday
prob_shared = 1 - unique_birthday_probability(n_people, days_in_year)

# 結果の表示 / Display result
print(f"同じ誕生日の人が少なくとも1組いる確率（{n_people}人中）: {prob_shared:.4%}")

```

同じ誕生日の人が少なくとも1組いる確率（40人中）: 89.1232%
Amazon Q Developer CLI でClaude 4 Sonnetをデフォルトモデルに設定する方法

みなさん、Amazon Q Developer CLI を使っていますか？


Amazon Q Developer CLI では、2025年6月5日のリリースによって Claude 4 Sonnet を選択することができるようになりました。無料版でも呼び出し回数制限やガバナンス系など一部の機能で制限がありますが、Claude 4 Sonnet を試すことができます。


https://aws.amazon.com/about-aws/whats-new/2025/06/amazon-q-developer-cli-claude-sonnet-4/

```
q chat --model claude-4-sonnet
```

このように利用したいモデルを指定します。しかしこの記事執筆時点では、デフォルトのモデルは変わらず Claude 3.7 Sonnet のままになっています。

```
> /model

? Select a model for this chat session ›
  claude-4-sonnet
❯ claude-3.7-sonnet (active)
  claude-3.5-sonnet
```

このため、新たなチャットを開くたびに、モデルの指定コマンドを実行している方もいるのではないでしょうか？

実はそのデフォルト設定は変更することができます。

```
q settings chat.defaultModel claude-4-sonnet
```

q chat を再起動してみましょう

```
> 

> q chat
    ⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
 ⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
 ⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
 ⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
 ⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
 ⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧

╭─────────────────────────────── Did you know? ────────────────────────────────╮
│                                                                              │
│         Use /model to select the model to use for this conversation          │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

/help all commands  •  ctrl + j new lines  •  ctrl + s fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🤖 You are chatting with claude-4-sonnet
```

モデル設定が claude-4-sonnet になっていることが確認できました。

```
🤖 You are chatting with claude-4-sonnet
```


良き Claude 4 Sonnet 無双ライフを！
snippet: awsコマンド

* https://ap-northeast-1.console.aws.amazon.com/cloudshell

## Glue

```sh
# データベース一覧
aws glue get-databases

# ジョブ一覧
aws glue list-jobs

# クローラー一覧
aws glue list-crawlers

# トリガー一覧
aws glue list-triggers

# ワークフロー一覧
aws glue list-workflows
```


## VPC

```sh
# VPC一覧
aws ec2 describe-vpcs
```

```sh
# セキュリティグループ一覧
aws ec2 describe-security-groups
```

```sh
# Lambda関数一覧
aws lambda list-functions
```

## EC2

```sh
# EC2インスタンス一覧
aws ec2 describe-instances
```


```sh
# S3バケット一覧
aws s3 ls
```

```sh
# S3にファイルをコピー
aws s3 cp ec2_instances.json s3://your-bucket-name/
```

## IAM

```sh
# IAMユーザー一覧
aws iam list-users
```

```sh
# 今のアカウントに与えられているポリシー一覧
aws iam list-policies | grep PolicyName

# 属性情報の絞り込み
aws iam list-policies --query "Policies[*].PolicyName"

# テーブル表示
aws iam list-policies --output table
```

## QuickSight

```sh
# ダッシュボード一覧
aws quicksight list-dashboards --aws-account-id アカウントID --query 'DashboardSummaryList[].{Name: Name, DashboardId: DashboardId}' --output table

# 分析（Analysis）一覧
aws quicksight list-analyses --aws-account-id アカウントID --query 'AnalysisSummaryList[].{Name: Name, AnalysisId: AnalysisId}' --output table

# データセット一覧
aws quicksight list-data-sets --aws-account-id アカウントID --query 'DataSetSummaries[].{Name: Name, DataSetId: DataSetId}' --output table

# データソース一覧
aws quicksight list-data-sources --aws-account-id アカウントID --query 'DataSources[].{Name: Name, DataSourceId: DataSourceId}' --output table

# ユーザー一覧
aws quicksight list-users --aws-account-id アカウントID --namespace default

# グループ一覧
aws quicksight list-groups --aws-account-id アカウントID --namespace default

# アセット数のカウント例
# ダッシュボードや分析の数だけ知りたい場合はlength(@)でカウント
aws quicksight list-dashboards --aws-account-id アカウントID --query 'DashboardSummaryList | length(@)'
aws quicksight list-analyses --aws-account-id アカウントID --query 'AnalysisSummaryList | length(@)'
aws quicksight list-data-sets --aws-account-id アカウントID --query 'DataSetSummaries | length(@)'
aws quicksight list-data-sources --aws-account-id アカウントID --query 'DataSources | length(@)'
```


## 別のクラウドサービスで同様のコマンド

```sh
# gcloud
gcloud compute instances list

# Azure
az vm list

# Oracle Cloud
oci compute instance list
```
SwiftUIの@Stateと@StateObjectをそれぞれ簡単に解説してみました！

SwiftUIでは、アプリの状態（データ）を管理するために、さまざまなプロパティラッパーが用意されています。
その中で今回は＠State と **@StateObject**をそれぞれ説明していきます。


@Stateとは？
---
@Stateは、Viewの中で簡単な状態を保持するための仕組みです。主にBoolやInt、Stringなどのシンプルなデータ型に使います。

例：ボタンを押したらカウントアップする
--
```swift
struct CounterView: View {
    @State var count = 0

    var body: some View {
        VStack {
            Text("カウント: \(count)")
            Button("増加") {
                count += 1
            }
        }
    }
}
```
@Stateを付けることで、countが更新されるたびにViewが自動で再描画されます。


@StateObjectとは？
--
@StateObjectは、ObservableObject（クラス）を初期化して使うときに使います。データのライフサイクルをしっかり管理できるのが特徴です。

```swift
class TimerModel: ObservableObject {
    @Published var count = 0
    var timer: Timer?

    init() {
        timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
            self.count += 1
        }
    }
}

struct TimerView: View {
    @StateObject var timerModel = TimerModel()

    var body: some View {
        Text("時間: \(timerModel.count)秒")
    }
}
```

@ObservedObjectとの違いも簡単に説明します
---
@StateObject → Viewの中で新しくデータを作るときに使う

@ObservedObject → 外から渡されたデータを使うときに使う

まとめ
---

| 状態管理の種類           | 状態の用途                     | 使う場所           |
| ----------------- | ------------------------- | -------------- |
| `@State`          | IntやBoolなどの簡単なデータ         | View内で完結       |
| `@StateObject`    | ObservableObjectを自分で作って管理 | View内でインスタンス生成 |
| `@ObservedObject` | 外から渡ってきたObservableObject  | 子Viewなどで使う     |
- @State → シンプルな状態

- @StateObject → 複雑なクラスの状態（自分で作る）

- @ObservedObject → 外からもらうクラスの状態


SwiftUIでは、状態管理がアプリの設計に大きく関わってくるとおいます！ぜひ参考にしてみください！🤌
Rubyの中の人：デバッガーの仕掛けを追う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3978583/68605260-2bf8-4933-a71e-808d9ccc1258.png)


## はじめに

こんにちは。JetBrainsの公式代理店NATTOSYSTEMの私です。 

JetBrains RubyMine チームのブログ記事[Inside Ruby Debuggers ― TracePoint, Instruction Sequence, and CRuby API](https://blog.jetbrains.com/ruby/2025/06/inside-ruby-debuggers/)（2025-06-11公開）は、Rubyデバッガが内部で使っている３つの基盤技術を解説しています。
>Ruby 開発者の皆さん
>
>デバッグはソフトウェア開発の重要な部分ですが、多くの開発者はデバッガーの実際の仕組みを理解せずに使用しています。RubyMineチームは長年にわたりRuby用のデバッグツールの開発に取り組んでおり、その過程で得た知見の一部を共有したいと思います。

記事は [EuRuKo 2024](https://euruko.org/) と [RubyKaigi 2025](https://rubykaigi.org/2025) の講演「Demystifying Debuggers」をもとに構成されている。

---

## １．TracePoint ― 実行中コードへのフック

| 特徴 | 説明 |
|------|------|
| 目的 | メソッド呼び出し・行実行・例外など特定イベント発生時にコールバックを実行する。 |
| 導入 | Ruby 2.0（2013年） |
| 強み | Thread/Fiber と相性が良い。Ractorは限定的。 |
| 例 | `TracePoint.new(:call){` |

### 最小デバッガ例

TracePoint のコールバック内で gets と eval を使えば、数行で入力→評価→表示という対話式デバッガが完成。ブレークポイント停止・変数操作の仕組みを体験できる。  


---

## ２．Instruction Sequence (ISeq) ― Rubyバイトコードの姿

| 特徴 | 説明 |
|------|------|
| 役割 | Rubyソースを VM が実行するバイトコードへコンパイルした結果を保持。Ruby の「アセンブリ」。 |
| 取得 | `RubyVM::InstructionSequence.of(method_obj)` |
| 可視化 | `iseq.disasm` で人が読める形式に。行イベント(Li)、呼び出し(Ca)、戻り(Re)などのマーカー付き。 |

### デバッガとの関係

Bytecode 上にマーカーを追加・変更することで、行ステップや高度なブレークポイント（if 文の途中など）を実現する。TracePoint はこれらのマーカーが発火した瞬間にフックする。  

---

## ３．CRuby CレベルAPI ― さらに深い制御

| 主なAPI | 用途 |
|---------|------|
| `rb_tracepoint_new` | C拡張側で柔軟に TracePoint を生成・制御。スマートステップの実装に必須。 |
| `rb_debug_inspector_open` | VM状態を変えずにフレーム情報を取得。コールスタックを前後に移動できる。 |
| `rb_iseqw_to_iseq`, `rb_iseq_original_iseq` | Ruby値⇔C構造体の iseq 変換。 |

### メリット

フレームナビゲーションや「次に入るべきコードを判断するスマートステップ」など高度機能が実装可能。

### デメリット

- CRuby 専用のため JRuby/TruffleRuby では動作しない。  
- 非公開 API のため Ruby バージョン依存が大きくメンテナンス負荷が高い。  


---

## まとめ

TracePoint で “いつ止まるか” を決め、Instruction Sequence で “どこで止まるか” を細かく指定し、必要に応じて CRuby API が “より賢く止まる” 機能を補完する。

### ３つの技術は層構造：

Rubyレベル の TracePoint  
→ VMバイトコード層 の ISeq  
→ Cレベル の内部API。

仕組みを理解すると、pry-byebug や RubyMine など既存デバッガが提供する「ブレークポイント」「ステップ実行」「フレーム移動」の裏側が見えてくる。

最小デバッガを自作してみると、デバッガ原理の学習・実践に大いに役立つ。

**Happy debugging!**

## フィードバックをお待ちしています

Jetbrains製品に関するご質問・ご感想をぜひお寄せください。

- 公式X - [Nattosystem](https://x.com/nattosystem)  

---

> 📝 この記事は一部AIによって要約・編集されたものです。
Kong Gatewayの監視にRequest Termination Pluginを使う

Kong Gatewayが正常にリクエストを転送してくれるかどうかを監視するのにData Planeのポート8000を叩くのは1つ有効だが、返って来るのは以下のようなメッセージであり、ステータスコードは404となっている。
```json
{
  "message":"no Service found with those values",
  "request_id":"752dcf0ff2f39b0b61777c7e1586862a"
}
```
もうちょっと気の利いたメッセージやステータスコードを返すようにしたい時は[Request Termination Plugin](https://docs.konghq.com/hub/kong-inc/request-termination/)が活用できる。
今回はこれを触ってみる。

## Request Termination Plugin

Request Termination Pluginは任意のステータスコード、メッセージを返してリクエストを強制終了するようなもので、以下の用途での利用を想定している。
- サービスメンテナンス時に一時的に転送を停止する
- 過負荷によりサービスに影響が出た場合などに一時的に転送を停止する
- Consumerと組み合わせて、特定のユーザ（Anonymous含む）のリクエストの転送を却下する
- リクエストのデバッグ（後述の設定項目の`echo`参照）

何かしらサービスに転送したくないようなユースケースではとりあえず利用を検討するとよさそう。
なお、2つほど注意点がある。
- 社内プロキシ利用などでForward Proxy Pluginを使っている場合、このプラグインは無視されてしまうため、その場合は[Dynamic Plugin Ordering](https://docs.jp.konghq.com/gateway/latest/kong-enterprise/plugin-ordering/)を使って優先順位を変更すると良い。
- ステータスライン(ステータスコードの後ろの「Not Found」など）は変更出来ない。

### 設定項目

設定項目は以下となる。

| 設定項目         | 意味                                                                          |
| ------------ | --------------------------------------------------------------------------- |
| echo         | リクエストの内容に詳細情報をつけて応答する。Kong内のWorkspace、RouteなどのIDなども応答内容に含むため、デバッグ用途に有効。     |
| message      | 応答する際に返すメッセージ。`{"message":"<指定値>"}`で返答する。`content_type`か`body`を指定する場合は利用不可。 |
| status_code  | 応答する際に返すステータスコード。100から599まで指定可能                                             |
| body         | 応答する際に返すメッセージのBody。`message`を指定する場合は利用不可。rawレベルでメッセージを設定したい時などに利用。          |
| content_type | 応答する際に返すメッセージのContent Type。`message`を指定する場合は利用不可。rawレベルでメッセージを設定したい時などに利用。  |
| trigger      | 指定すると、指定されたヘッダ(Key:ValueにおけるKey)が指定された時だけ動作するようになる。echoと組み合わせてデバッグ用途に有効。    |

`status_code`のみ必須パラメータとなる。

## 設定＆動作確認

通常のKong Gatewayの設定と違って、転送先がなくても動くプラグインなので、RouteとPluginの設定さえすれば動く。
最初に以下でRouteを作成する。
- Name: `HealthCheck`
- Paths: `/`

次にRequest Termination Pluginを以下の設定で作成する。
- Status Code: `200`
- Message: `Health Check: OK!`

以上で設定は終わりとなる。非常に簡単に設定できた。
実際にアクセスしてみる。
```bash
curl localhost:8000
```
結果は以下となった。
```sh
HTTP/1.1 200 OK
Date: Wed, 11 Jun 2025 08:10:06 GMT
Content-Type: application/json; charset=utf-8
Connection: keep-alive
Content-Length: 31
X-Kong-Response-Latency: 1
Server: kong/3.10.0.1-enterprise-edition
X-Kong-Request-Id: c020b42d2780326f4e34de75cbebd94a

{"message":"Health Check: OK!"}
```

プラグインがない時は404が返ってくるが、本プラグインを適用することで200が返ってきた。
Data Planeの前段にロードバランサをおいてヘルスチェックする際はこの200が返るかをチェックすればサービス監視が出来、フェイルオーバーなどに活用できると思う。
共用機に入ったOFFICEで注意すること②

設定から何度か電源ボタンを押下して、USERの切り替えをするとまたアカウントのサインインが求められた。

まずアプリが捨てアカウントで落としてきたにも関わらず
![スクリーンショット 2025-06-11 170807.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/efec8c9b-a539-47b7-92f3-c92581e3620d.png)
Office365であったこと

つまり落としてきたアプリがダメだった。

もう一度
https://setup.office.com/?ms.officeurl=setup
に入って

![スクリーンショット 2025-06-11 153901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/234cee29-c47b-4f30-87d6-28f2ed10c1f3.png)

ダウンロード画面を確認して再度ダウンロード開始。

![スクリーンショット 2025-06-11 154003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/7948f05f-6ae0-4db6-a228-109f0cefc96d.png)

![スクリーンショット 2025-06-11 160055.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/f53d4b63-11f4-4c95-be66-707266d8727b.png)

![スクリーンショット 2025-06-11 164315.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/21982eaf-5ebf-48d8-aa9a-f2066ab09312.png)

今度はちゃんとOffice Home and Bisiness 2021が落ちてきた。

これでOK！
SORACOMユーザーコンソールでSIM IDを確認する

SORACOMの[SORACOM Air](https://soracom.jp/services/air/)のSIM、[SORACOM Arc](https://soracom.jp/services/arc/)の仮想SIMには[SIM ID](https://users.soracom.io/ja-jp/resources/glossary/#sim-id)が割り当てられています。
このSIM IDを[SORACOMユーザーコンソール](https://console.soracom.io/)から確認する手順を紹介します。

1. SORACOMユーザーコンソールログイン後、画面左上の「メニュー」をクリックし、「SIM 管理」を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/5e04ab5b-2e9c-40f6-a263-1c7239c9cd9f.png)
1. SIM管理画面右上の歯車アイコンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/7bab3d62-5f1d-4895-ab09-5ff05e74136f.png)
1. テーブル設定画面のSIM IDをONにして画面を閉じます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/0228e072-a339-4cb8-8588-2eb51815b5ad.png)
1. SIM管理画面でSIM ID表示列が追加され、SIM IDが確認できるようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/b98a6047-b4f9-4815-95b0-843c842e1d35.png)

以上です。
データベースの引越しを Ora2Pg でスマートにやろう

掲題のタイトルで社内勉強会を開催した際の資料を SpeakerDeck で公開しました！
データ検証のあたりは Qiita や企業のテックブログなどであまり取り上げられていない部分かと思いますので、参考になれば幸いです (私の探し方が悪いだけかも…)

<script async class="speakerdeck-embed" data-id="4c0f3706812a445a91ea7ae4fe80b76f" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
セット型フィールドの値を入力する必要があります(SPSS Modeler データ加工逆引き12-13)

# セット型フィールドの値を入力する必要があります(フィールド作成)

![スクリーンショット 2025-05-30 8.28.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/9b10b6b5-a712-47a1-b979-efe817c110be.png)

## 1.想定される利用目的

・[フィールド作成]ノードで数値をカテゴリに分類した際、エラーが発生する

*誤って空白のグループを作成した場合に生じるエラーのハンドリング

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/blob/main/grouping_ng.str

## 3.サンプルストリームの説明

![スクリーンショット 2025-05-30 8.28.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/ee5b202a-e563-4177-9ccb-728e6bb93ab9.png)

a.入力するデータは以下のとおりです。年齢を年代にグループ化します。

![スクリーンショット 2025-05-30 8.31.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/cdb10837-b9dd-4ae5-a915-b0b18f1622aa.png)

#### エラーの現象を確認する

b.[フィールド作成]ノードを編集します。60代の下に２行の空白行が存在しています。

![スクリーンショット 2025-05-30 8.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/3e2f56db-54c7-4c91-88eb-66a18af0956a.png)

[テーブル]を実行します。エラーが以下のように表示されます。

![スクリーンショット 2025-05-30 8.37.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/773a6e94-3094-40fb-b08d-4a0dfa1acaf7.png)

![スクリーンショット 2025-05-30 8.32.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/1845d43c-96a4-47ce-acb6-d4a9b33be31e.png)

#### 空白の行を削除してエラーを回避する

c.[フィールド作成]ノードを編集します。60代の下にあった行を❌ボタンで消去しています。

![スクリーンショット 2025-05-30 8.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/ed2e50a0-0573-4c49-8075-d26bf89996e1.png)

[テーブル]を実行します。

![スクリーンショット 2025-05-30 8.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/5321f5c1-3ef2-418e-865c-3bdd8dd8b40b.png)


#### 注意点

[フィールド作成]ノードの設定をしていく際に[値の設定条件]にまず[年齢 >= 20 and 年齢 < 30]を定義し、複製しながら30代、40代を作ることになります。この時複製する個数を誤って式を消去することで不要な空白が発生し当該エラーにつながります。

## 4.参考情報

#### 年齢から年代のフィールドを作成する

https://qiita.com/416nishimaki/items/96a29b4d802d28a52d71

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
Nuxtのデフォルトレイアウトが反映されない場合の対処

### 事象
複数のvueファイルにおいて、同一のヘッダーやフッターを持つ場合には、
それぞれのvueファイルのなかに書くのは非効率的です。
デフォルトレイアウトを使えば、layouts/default.vueファイルに実装を集約することができます。
ただ、今回default.vueファイルの内容が反映されない、という問題が起きたので解決策を記載します。

### 解決策
layouts/default.vueファイルは間違いなく存在するし、なぜだろうと少しはまった。
原因としては、app.vueの記述ミス。

```誤ったapp.vue
<template>
  <NuxtPage />
</template>
```

```正しいapp.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

たったこれだけのことなんだけど、デフォルトレイアウトを使う前はindex.vue等が正常に表示されていたので、なかなか気づけなかった。
AmazonQ CLIでゲームを作ってみました。

こんにちは。白"雪姫"です。
AmazonQで色々できるようになってきて，便利だなぁと思ってたら[Tシャツキャンペーン](https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/)なるものが開催されています

せっかくなので作成して登録しましょうと意気込んでみます。

作ったのはタイピングゲーム。

- ゲームオーバーは無
- 点数は増減する
- 高スコアを目指す
- 制限時間は60秒

という感じです。

AmazonQCLIは，Mac版を利用しました。
インストール方法は[こちら](https://docs.aws.amazon.com/ja_jp/amazonq/latest/qdeveloper-ug/command-line-installing.html)を参照してそのままのものを利用しています。

これを作り始めた頃，丁度AmazonQが4.0Sonnetが使えるようになったということでだいぶお手軽ですが利用させていただくことにしました。

```bash
≻ q

    ⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
 ⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
 ⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
 ⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
 ⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
 ⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧

╭─────────────────────────────── Did you know? ────────────────────────────────╮
│                                                                              │
│      Set a default model by running q settings chat.defaultModel MODEL.      │
│                          Run /model to learn more.                           │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

/help all commands  •  ctrl + j new lines  •  ctrl + s fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🤖 You are chatting with claude-3.7-sonnet

> /model

✔ Select a model for this chat session · claude-4-sonnet

 Using claude-4-sonnet
 ```

 設定だったりデバッグだったりのログも[Github](https://github.com/HimekoYuri/AmazonQ_Typing_Games)の方に公開しましたので笑いながら見て欲しいです。
 
 賢いのは展開用のCloudformation，実行シェルを作ってくれたことですね今回。

実際の実行画面は添付の通り
![Screenshot 2025-06-11 at 16.03.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553392/7ef0fde6-47ba-4ba1-9aef-3e419fb1948c.png)

サイトの公開もしておきますし，ローカルでも動く様になっています。試してみてもらえると嬉しかったりします。
[Linux] リモートデスクトップ_VDI, VNC, RDP, SPICE, XDMCP

# 一覧
| プロトコル/方式名 | 由来                                                     | 概要                                              |
| --------- | ------------------------------------------------------ | ----------------------------------------------- |
| **VDI**   | Virtual Desktop Infrastructure             | 仮想マシン上にユーザーごとのデスクトップ環境を構築し、ネットワーク経由で利用する方式      |
| **VNC**   | Virtual Network Computing                              | リモートデスクトッププロトコル<br><br> - VNCは仮想マシンのゲストOSにインストール              |
| **RDP**   | Remote Desktop Protocol（Microsoft）                     | リモートデスクトッププロトコル<br><br>- Windowsに標準搭載                |
| **SPICE** | Simple Protocol for Independent Computing Environments | リモートデスクトッププロトコル<br><br> - VNCは仮想マシンのホストOSにインストール<br>- 仮想マシン用<br>- 高速・高機能              |
| **XDMCP** | X Display Manager Control Protocol                     | XクライアントからXサーバにリモート接続するためのプロトコル |

# Ping-t
- [4691_VNC](https://mondai.ping-t.com/question_subjects/32/question_sessions/33603258/progressing_questions/514610092)
- [4903_XDMCP](https://mondai.ping-t.com/question_subjects/32/question_sessions/33693535/progressing_questions/515931300?result=true)
- [5103_RDP](https://mondai.ping-t.com/question_subjects/32/question_sessions/33693535/progressing_questions/515931297?result=true)
- [5104_SPICE](https://mondai.ping-t.com/question_subjects/32/question_sessions/33603258/progressing_questions/514610089)
- [5145_全般](https://mondai.ping-t.com/question_subjects/32/question_sessions/33603258/progressing_questions/514610088)
- [36775_SPICE](https://mondai.ping-t.com/question_subjects/32/question_sessions/33693535/progressing_questions/515931303?result=true)
Javaにおける回分判定について

# Javaで回分判定を書いてみる。

初心者ながら回文判定を書いてみた。

~~~
import java.util.*;

public class Main {
    	public static void main(String... args) {
    	Scanner sc = new Scanner(System.in);
    	String input= sc.next();
 	StringBuilder reversedInput = new StringBuilder(input).reverse();
sc.close();
 	
if (input.equals(reversedInput.toString())) {
            System.out.println("YES");
        } else {
            System.out.println("NO");
     }
　　}
}
~~~

自分がつまったのは、StringBuilderを使うところで、どうやってやればええねんとなりました。

~~~
reverse();
~~~
をつけるのを忘れずに。