OmniAICreator/Qiita-1.07M huggingface dataset:
Jetpack Composeでコンテンツのサイズに柔軟に対応しつつ正方形を維持するレイアウト

ここでは正方形を維持しつつコンテンツサイズに対して柔軟にレイアウトしたい時の実装の紹介です。

## 実装

以下のような `Modifier#layout` で縦横どちらか大きい方をサイズにするといったカスタムレイアウトで実現します。

```kotlin
Modifier.layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    val width = placeable.width
    val height = placeable.height
    val size = maxOf(width, height)
    layout(size, size) {
        val x = (size - placeable.width) / 2
        val y = (size - placeable.height) / 2
        placeable.placeRelative(x, y)
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/26f50baa-81dd-95a9-babe-1195cb73cd86.png" width="300px" />

上記のコードを適用しているとコンテンツ側にテキストがある場合に、フォントサイズが変更された場合にも正方形を維持したまま拡大してくれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/45ccdfcb-39c0-58a7-99d8-b68af105143e.png" width="300px" />


## 意図した挙動にならない実装パターン

### `Modifier#size`、　`Modifier#sizeIn`

単純な　`Modifier#size`　の場合だとコンテンツ側のサイズが変わると追従できないため、テキストを含んでいてフォントサイズが変更され収まらない場合にテキストが切れてしまいます。
例えばコンテンツがアイコンだけといった、コンテンツ側にテキストのような可変となるようなものが含まれない場合だとこの実装で十分です。

`Modifier#sizeIn` の場合はコンテンツのサイズ変更に強くはできますが、正方形が維持できなくなります。


### `Modifier#aspect`

`Modifier#aspect` は使う上で少しだけ条件があって　KDoc に以下のような説明が書かれています。

>Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: Constraints.maxWidth, Constraints.maxHeight, Constraints.minWidth, Constraints.minHeight if matchHeightConstraintsFirst is false (which is the default), or Constraints.maxHeight, Constraints.maxWidth, Constraints.minHeight, Constraints.minWidth if matchHeightConstraintsFirst is true. The size in the other dimension is determined by the aspect ratio. The combinations will be tried in this order until one non-empty is found to satisfy the constraints. If no valid size is obtained this way, it means that there is no non-empty size satisfying both the constraints and the aspect ratio, so the constraints will not be respected and the content will be sized such that the Constraints.maxWidth or Constraints.maxHeight is matched (depending on matchHeightConstraintsFirst).

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation-layout/src/commonMain/kotlin/androidx/compose/foundation/layout/AspectRatio.kt;l=36-46;drc=a1fb0705ea13a2b282650a0b4bc80a443f4a7e8b

コンテンツが取りうるサイズが確定している縦か横のサイズに対してアスペクトを指定するようになっています。

そのため、例えばサイズを指定せずに `Modifier.aspect(1f)` とすると親の Composable fun を辿って確定するサイズに対して比率を指定するため、親にサイズ指定がないと以下のように画面全体のサイズを取ってしまいます。コンテンツサイズに対する比率の適用にはなりません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/3376b96e-6acb-2c6c-23fa-3cce3533091e.png" width="300px" />

`Modifier.width(n.dp).aspect(1f)` とすると設定した横幅に対して 1:1 の比率を適用しますが、実質 `Modifier.size(n.dp)` と同じなので、コンテンツが可変の場合に切れる問題が出てきます。



コンテンツのサイズが可変で正方形を維持したい、という場合は既存の Modifier の組み合わせでは難しい場合もあり、そういったときはカスタムレイアウトが一番調整しやすいです。
AMIリストア後にホスト名がip-xxx-xxx-xxx-xxになってしまう

AMIから復旧した際、ホスト名が変わってしまう事があります。
これは、cloud-initが良かれと思って変更してくれています。

SAPシステムでは、プロファイル名等にホスト名を使っているため、
ホスト名が変わることで起動が出来なくなります。
インストール時にホスト名を設定すると思いますが、そのタイミングで以下の設定を入れておくことを忘れないようにしましょう。

[/etc/cloud/cloud.cfg]
preserve_hostname: true


https://repost.aws/ja/knowledge-center/linux-static-hostname-suse
disabledを使わずにボタンを無効化する方法　pointer-events:noneとcursor: not-allowedを同時に使う時の注意点

### 前置き
```HTML:HTML
<button type="button" disabled >ボタン</button>
```
#### 一般的にボタンにはdisabledを使う
この記事はこのような人向け
・ボタンに対してdisabledを使えない理由がある
・そもそもボタンではなく、aタグやdivなのでdisabledが使えない


## やりたいこと
・ボタンをdisabledせずに、ユーザーのマウス操作によるイベント発火を防ぎたい
・ボタンが操作を受け付けないことを表現したい

### こう書くとうまくいかない

```HTML:HTML
<button type="button" class="unusable">ボタン</button>
```

```CSS:CSS
.unusable {
    pointer-events: none;
    cursor: not-allowed; /* It doesn't Work */
}
```
#### cursor: not-allowedが機能せず、カーソルはcursor: defaultと同じ形になります

# 解決方法
### cursor: not-allowedは親要素に付与する

```HTML:HTML
<div class="btn-wrapper">
    <button type="button" class="unusable">ボタン</button>
</div>
```

```CSS:CSS
.btn-wrapper {
    cursor: not-allowed; /* It Works! */
}
.btn-wrapper .unusable {
    pointer-events: none;
}
```

### 余談1
次の表はブラウザごとの
disabledを付与することで
マウスクリックによって発火されなくなるイベント一覧です

| ブラウザ      |       発生しなくなるイベント
|:-----------------|------------------:|
| Chrome             |          click, focus/blur |
| Firefox           |click, focus/blur, mouseup/down |
| Safari             |    たくさん。詳細はソース参照 |
| IE11,Edge               |   無し。対策はソース参照 |
| iOS Safari             |    click, focus/blur |
| Android Chrome          |   click, focus/blur |

↓表のソースとIE・Edge対策方法
5年前の記事なので注意。他のソースを自分は見つけられなかった。

https://qiita.com/ksk1015/items/ad94b2a00bd5d5e50bd7

### 余談2
disabledでもpointer-events:noneでも
javascript側でイベントを能動的に起こせる
Javaのサンプルプログラム（電卓）について学習してみた

# 概要
Javaのサンプルプログラム（電卓）について学習してみました。以下のページを参考にしました。

サンプルプログラム(電卓)

https://www.javadrive.jp/start/sample1/

入力された値の読み取り

https://www.javadrive.jp/start/sample1/index1.html

演算子のチェック

https://www.javadrive.jp/start/sample1/index2.html

数字のチェック

https://www.javadrive.jp/start/sample1/index3.html

完成版

https://www.javadrive.jp/start/sample1/index4.html

# まとめ
何かの役に立てばと。
【小ネタ】PowerAutomateで自分のスマホにプッシュ通知するフローを作る

前回ChatGPTがオススメするアプリとしてタスク管理アプリを作りました。

https://qiita.com/ssc-ksakamaki/items/7117bf9922adc3f9d9f4

今回はこのタスク管理アプリの拡張として、タスクの期限の日になったらリマインドとして自分のスマホにプッシュ通知するフローを作りました。

スマホでタスク管理アプリを開くとこんな感じです。
![005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/4c38e36d-cad4-ac95-44e9-00c8ac5ef6c1.jpeg)

## PowerAutomateでフローを作る
PowerAppsのアプリ、SharePointのリストは前回の記事でできているので早速PowerAutomateのフローを作ります。
全体としては以下画像のようになります。
![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/c4031f16-3450-9f44-a6a1-904e8c48272f.jpeg)

## トリガーを設定する
トリガーとはフローが起動する条件のことです。
今回は毎日9時に起動するということにします。
5分毎に起動して時間の10分前になったらプッシュ通知をする、というようにもできますが、
5分毎に起動だと起動回数が多くてうっとうしいので1日1回起動とします。

スケジュールカテゴリーから「繰り返し」トリガーを追加します。
設定は以下画像の通り、間隔を1日にして設定時刻を9時にします。
![006.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/f4da8689-04ff-1fe6-1979-d32c94cf441a.jpeg)

## 今日の日付を取得する
続いて起動した日が何日なのかを取得します。
日時カテゴリーから「現在の時刻」、「タイムゾーンの変換」を追加します。

以下画像の通り、現在の時刻は設定不要です。
タイムゾーンの変換では基準時間に現在の時刻。
日付だけほしいので書式設定文字列は時間が入っていない形式を設定。
変換設定は標準時から日本時間に変換します。
![007.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/0d111c6f-0cad-74d3-0e5c-00ee17f8ee30.jpeg)

## リストの期限から日付を取得する
次はタスク管理アプリのリストから期限を取得してそれを日付に変換します。

SharePointカテゴリから「複数の項目の取得」を追加します。
設定は以下画像の通り、SharePointのサイトアドレスとリスト名を追加します。

次に日時カテゴリから「タイムゾーンの変換」を追加します。
基準時間には「複数の項目の取得」の「期限」を設定します。
書式設定文字列と変換ゾーンは先ほどの「タイムゾーンの変換」と同様に設定します。
基準時間に「複数の項目の取得」の「期限」を設定すると「Apply to each」という枠の中に入りますが、特に問題ありません。
![008.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/4b5d0005-d6f1-c7e1-b57f-94075fea5793.jpeg)

## 今日の日付と期限の日付を比較する
期限の日付が今日かどうかを比較します。
コントロールカテゴリから「条件」を追加します。

特に名前を変えてなければ「タイムゾーンの変換」と「タイムゾーンの変換２」のようになっているので、それぞれの値が等しいかを比較します。

いいえの場合は特に何も処理を追加しません。
はいの場合は担当者が自分かどうかの処理を追加します。
![009.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/ba162bd9-37a1-b754-4406-9eca9308dbbd.jpeg)

## 担当者が自分かを比較する
担当者が自分じゃないのにプッシュ通知されても邪魔なだけなので、担当者が自分かどうかの比較をします。
コントロールカテゴリから「条件」を追加します。

「複数の項目の取得」から名前_DisplayNameと自分の名前が等しいかを比較します。
メールアドレスで比較するなど別の方法もありますが、結局自分専用なので何でも大丈夫です。

いいえの場合は特に何も処理を追加しません。
はいの場合はプッシュ通知の処理を追加します。
![004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/b055d45f-9421-febd-bbcc-7dd4f59c2049.jpeg)

## プッシュ通知の設定をする
期限の日付が今日で担当者が自分の場合（どちらもはいの場合）、プッシュ通知をします。
Notificationsカテゴリから「モバイル通知を受け取る」を追加します。

テキスト内容は何でもいいので、期限とタイトルを表示します。

## 実際にプッシュ通知がくるために必要なこと
ここまででフローは完成していて、フローのテストも成功しているがプッシュ通知が来ない！
と私はなりました。

どうやらスマホ側でPowerAutomateにログインしていないと、プッシュ通知が来ないようです。
PowerAutomateにログインしてテストしてみたらプッシュ通知きました。
![IMG_9180.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2480832/115ce162-2071-4fc4-b271-830bac995f45.jpeg)

## まとめ
プッシュ通知がくることでそこそこ便利になりました。
まだまだスケジュールアプリをダウンロードした方が15倍くらい便利なレベルですが、
既存のアプリでこんな機能が欲しいって部分を自分でアレンジできるのが良いところです。
普段からMicrosoft365を導入しているチームであれば、PowerApps、SharePoint、PowerAutomateを組み合わせることで簡単にアプリが作れるので是非使ってみてください。
Exception: この Google ユーザー アカウントのドキュメント内でこのアドオンによって作成された time-based トリガーの数が多すぎます。　について

# 結論
アドオンを経由した時間ベーストリガー設定は同時に1つしかできない
例えば、`ScriptApp.newTrigger(*トリガー設定したい関数名*).timeBased().at(*任意の数字*).create();`は同時に2つ以上実行できない

# 試してみた
まずはこんなスクリプトを作成
```js
//アドオンが開かれるとまずこの関数が実行される
function onDefaultHomePageOpen() {
  console.log("スクリプトが起動しました")
  let card = CardService.newCardBuilder().setHeader(CardService.newCardHeader().setTitle("テスト"));
  
  //クリックされると「createTrigger("1")」が起動するボタンを作成
  let button1 = CardService.newTextButton().setText("トリガーを設定➀")
  .setOnClickAction(CardService.newAction().setFunctionName("createTrigger").setParameters("1"));
  //クリックされると「createTrigger("2")」が起動するボタンを作成
  let button2 = CardService.newTextButton().setText("トリガーを設定➁")
  .setOnClickAction(CardService.newAction().setFunctionName("createTrigger").setParameters("2"));
  //2つのボタンをカード画面に設置
  card.addSection(CardService.newCardSection().addWidget(button1).addWidget(button2));
  return card.build();
}

function createTrigger(num) {
  if(num == "1"){var funcName = "triggeredFunc1"}else{var funcName = "triggeredFunc2"}
  let time = new Date();
  time.setMinutes(time.getMinutes() +1);
  //引数で指定された関数を、トリガーに登録する（時間指定で1分後に起動するようトリガー設定）
  ScriptApp.newTrigger(funcName).timeBased().at(time).create();
}

//createTriggerがこの関数をトリガー設定する
function triggeredFunc() {
  console.log("トリガー設定した関数が実行されました")
}
```

こんな感じのくそアドオンとしてリリース
![b4110826-5aa5-4b48-bc11-2ed25deff419.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/0f6c49ca-f964-1993-2343-4873bebef2a1.png)
インストールしてみた
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/4bd26be0-51e6-f237-ec20-8e8363ac8858.png)
### このアドオンの仕様
ボタン①を押すと1分後に「triggeredFunc1」が実行されるように、トリガーが設定される
ボタン➁を押すと1分後に「triggeredFunc2」が実行されるように、トリガーが設定される

### 実際にエラーを起こしてみる
#### まずは1つ目のトリガーを設定するボタンを押す
しっかりと実行された
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/409fc73e-d0fc-cd8b-3ea3-333a1dee8f6e.png)
トリガ―もしっかりと設定されている模様
![fbd40c1f-2a64-41b8-bb0e-5ec09be16052.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/11082d4b-62df-0092-c0c7-d6fd537f8e9b.png)

#### 2つ目のトリガ―を設定するボタンを押してみる
ここで掲題のエラーが出た
![48eb9073-2c3f-417a-a7e9-e82cf850a61b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/86775bf8-d6aa-5298-8b90-f01e1a391ef8.png)

### これやってもダメだった
互いのトリガーの起動時間を1時間以上空けてみる→ダメ
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/7544fcd5-4b1d-2127-0040-c10729a893bf.png)
### こうやったらできた
1つ目のトリガーが起動してから、2つ目のトリガーを設定してみる
今回の場合で言えば、createTrigger1が実行する→それによってtriggeredFunc1が1分後にトリガー設定される→triggeredFunc1が実行完了する→createTrigger2を実行する
は問題なかったということ

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/10a0b589-2d81-155b-6d67-27213ed368df.png)
ESP32-S3-WROOM1とSIM7080G（LILYGO®T-SIM7080G-S3）でIOT開発（2.5日目）

```
16:17:17.093 -> AT+CGREG?
16:17:17.093 -> 
16:17:17.093 -> +CGREG: 0,2
```

前回の続き

これ接続できてないそうです。

やったー繋がったーとか浮かれてた、恥ず。

で、ずーっと続いて、

```
16:21:23.717 -> AT+CGREG?
16:21:23.717 -> 
16:21:23.717 -> +CGREG: 0,3
```

これ。師（chatgpt）曰く

:::note warn
AT+CGREG?コマンドは、GPRSのネットワーク登録状態を問い合わせるコマンドです。

応答の+CGREG: 0,3は、登録状態を示しています。ここでの0はネットワーク登録イベントが発生したときのみ結果コードを表示するモードを示し、3はネットワーク登録が試みられたが、ネットワークが拒否した（登録拒否）ことを示します。

そのため、この結果からは、GPRSネットワークへの登録が試みられたが失敗した、もしくはネットワークによって拒否されたという情報が得られます。この原因は様々な可能性があり、例えばSIMカードが有効でない、APN設定が間違っている、モデムがネットワークをサポートしていないなどが考えられます。具体的な原因を特定するには、これらの可能性を一つ一つ確認していく必要があります。
:::



繋がらんやんけ！APN設定は間違ってないはず、、、

https://github.com/vshymanskyy/TinyGSM/issues/592

同じような症状があるとか、ないとか。

SIMカードもiphoneで接続を試したら、生きてたのでSIMが原因ではないはず。

うーん。とりあえずもう少し調べます。


追記）

https://qiita.com/kkkrikurikun/items/5de9682e446ab87b7533

やっぱつながってる？うーんよくわからん。
誕生日を二進数にしてSVGを作る遊び

svg.jsを使った表題の遊びをご紹介します。

# 遊びの結果
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNQmjXx" data-user="jikkensya" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/jikkensya/pen/oNQmjXx">
  Untitled</a> by FrontendKanazawa (<a href="https://codepen.io/jikkensya">@jikkensya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



# アイディア 
1. 誕生日を設定
    ```javascript
    const birthday = 18790314 //1879年3月4日
    ```
2. 誕生日を32ビットのバイナリーにする
    ```javascript
    let binaryBday = birthday.toString(2)
    
    //この時点でのbinaryBdayは32bitではないので調整しています
    let deficit = 32 - binaryBday.length
    if(deficit > 0){
      let zeros = "0".repeat(deficit)
      binaryBday = zeros + binaryBday
    }
    //binarBdayの中身(32bit)
    //00000001000111101011011110101010
    ```
3. 8×4の行列に並べる
   ```javascript
    const rows = 8
    const clms = 4
    
    for(let row=0; row<rows; row++){
        let line = []
        for(let clm=0; clm<clms; clm++){
            let binary = binaryBday.slice(-1)
            binaryBday = binaryBday.slice(0, -1)
            line.push(binary)
        }
        console.log(line)
    }
    ```
4. console.logの結果
    ```console
    [ '0', '1', '0', '1' ]
    [ '0', '1', '0', '1' ]
    [ '1', '1', '1', '0' ]
    [ '1', '1', '0', '1' ]
    [ '0', '1', '1', '1' ]
    [ '1', '0', '0', '0' ]
    [ '1', '0', '0', '0' ]
    [ '0', '0', '0', '0' ]
    ```
結果の1になっているところに図形を描く、といったシンプルなアイディアです。

## ユースケース
- 誕生日を何かにプリントしたいけど個人情報をおおやけにさらすのが気になる時
- 家族の誕生日を組み合わせて柄を作りたい時
- 出会った宇宙人が十進法より二進法に慣れている時
- 十進法が禁止されている惑星で誕生日を尋ねられた時

読んでいただき、ありがとうございました。
コミットメッセージの先頭に文字列を自動で追加

# 概要
現プロジェクトでBacklogを使っており、コミットメッセージ先頭に課題キーを付与するルールとしています。
コミットの度に手動入力するのが面倒なので自動追加する運用にしています。

`.git/hook/commit-msg`を使った方法について説明します。

# 前提
ブランチ名の命名規則は以下。
```
feature/${課題キー}      # 基本
feature/${課題キー}/xxx  # 同課題でブランチを分けたい時①
feature/${課題キー}-xxx  # 同課題でブランチを分けたい時②
feature/${課題キー}_xxx  # 同課題でブランチを分けたい時③
```
コミットメッセージ形式は以下。
```
${課題キー} ${任意のコメント}
```
課題キー形式は以下。
```
ABCD-${数字}
```
# 方法
以下の`commit-msg`ファイルを`${リポジトリ}/.git/hooks`に格納する。
```
#!/bin/bash

# 現在のブランチ名取得
branch_name=$(git rev-parse --abbrev-ref HEAD)

# ブランチ名からチケットキー取得
ticket_key=$(echo "$branch_name" | sed -E 's/^[^/]+\/(ABCD-[0-9]+).*/\1/')

# ブランチ名にチケットキーが存在する時
if [ -n "$ticket_key" ]; then
  # コミットメッセージファイルパス取得
  commit_msg_file=$1

  # コミットメッセージ取得
  commit_msg=$(cat "$commit_msg_file")

  # コミットメッセージにチケットキーが含まれていない時
  if ! echo "$commit_msg" | grep -q "^ABCD-"; then
    # コミットメッセージ先頭にチケットキーを付与
    echo "$ticket_key $commit_msg" > "$commit_msg_file"
  fi
fi
```
`commit-msg`ファイルに実行権限を付与する。
```
$ chmod a+x .git/hooks/commit-msg
```

以上です。

`git commit`、`git commit -m "hoge"`はもちろんのこと、SourceTree等GUIツールからのコミットでも動作します。
`rebase`や`amend`時にキーを多重付与しないよう、「# コミットメッセージにチケットキーが含まれていない時」の判定を入れています。
【SwiftUI】Listのセパレーターを両端まで伸ばす

# はじめに
Listのセパレーターは微妙に左側にスペースがあるんですよね
このスペースを消したいです。
![simulator_screenshot_B16016A9-4155-4875-BD2A-AA13B73A014F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5a298dd2-affd-11f6-8602-a974db709124.png)

しかし、SwiftUIの標準機能ではないので`SwiftUI-Introspect`を使って実装します

https://github.com/siteline/SwiftUI-Introspect

# ライブラリのインストール
全体的な流れはこちらを参考にしてください

https://tech.amefure.com/swift-package-manager

:::note warn
**注意**
`SwiftUIIntrospect`のみチェックをいれます
![スクリーンショット 2023-08-01 16.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/31800ab3-7bad-0ab0-78fc-fb8934daa2a3.png)
:::

# 実装
```swift
import SwiftUI
import SwiftUIIntrospect

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0..<50) { _ in
                Text("サンプルセル")
            }
        }
        .listStyle(.plain)
        .introspect(.list(style: .plain), on: .iOS(.v13, .v14, .v15)) { list in
            list.separatorInset = .zero
        }
        .introspect(.list(style: .plain), on: .iOS(.v16, .v17)) { list in
            var listConfig = UICollectionLayoutListConfiguration(appearance: .plain)
            listConfig.separatorConfiguration.topSeparatorInsets = .zero
            listConfig.separatorConfiguration.bottomSeparatorInsets = .zero
            let layout = UICollectionViewCompositionalLayout.list(using: listConfig)
            list.collectionViewLayout = layout
        }
    }
}
```

# おわり
`SwiftUI-Introspect`めっちゃすき
PowerShellの重要なコマンド（入門）

「#」でコメントを残せる

●ファイルやディレクトリの一覧を表示
$ls[オプション][ディレクトリ・ファイル名]
例：ls/　# ←「/」ルートディレクトリの一覧を表示

●カレントディレクトリ(今いるディレクトリ)を表示
&pwd[オプション]
例：pwd

●ディレクトリを移動
$cd[オプション][ディレクトリ]
例：cd/home/taguchi
例：cd.. #一つ前の階層に移動

●ディレクトリを作成（make directry)
$mkdir[オプション]<作成するディレクトリ>
例：mkdir code　# ←「code」というファイルを作りたい場合

●ファイルの移動や、ファイル名の変更（move）
$mv[オプション]<移動元><移動先>
例：mv file file1  # ←ファイル名を変更（file1というファイルが存在しない場合、ファイル名の変更という動作になる）
例：mv file1 dir/　# ←ファイルを移動（file1をdir/というファイルの下に移動する）

●ファイルの中身を表示
$cat<オプション><ファイル名>
例：cat /etc/hosts

●ファイル・ディレクトリを削除（remove）
$rm[オプション]<削除するファイル名1><削除するファイル名2>..
例：$rm README.md　#ファイルを削除
例：rm -r dir　#ディレクトリを削除

●VS Codeを開く
$code[ディレクトリ名]
例：code.
spring boot3 QueryDSLのJakarta EE対応

弊社のサービスはSpring boot jpaのQueryDSLを利用しています。
spring boot2からspring boot3にバージョンアップした際に、
QueryDSLの参照も変更しなければなりません。

■理由
Java EEはspring boot3での利用はできません。
・Jakarta EEはJava EE（Java Enterprise Edition）の後継として2018年にオラクルからオープンソースコミュニティに移管されたものです。

■pom.xml

		<!--QueryDSLサポート-->
		<dependency>
			<groupId>com.querydsl</groupId>
			<artifactId>querydsl-jpa</artifactId>
			<version>5.0.0</version>
			<classifier>jakarta</classifier>
		</dependency>
		<dependency>
			<groupId>com.querydsl</groupId>
			<artifactId>querydsl-sql</artifactId>
			<version>5.0.0</version>
		</dependency>
		<dependency>
			<groupId>com.querydsl</groupId>
			<artifactId>querydsl-apt</artifactId>
			<version>5.0.0</version>
			<classifier>jakarta</classifier>
		</dependency>
HTML要素の右寄せのやり方（style="text-align: right"）

# やり方
実装したい**ブロックレベル要素**に`style="text-align: right"`を記述する。

### 実装例
~~~
<p style="text-align: right">
  この文字は右寄せされます
</p>
~~~
pタグはブロックレベル要素なので、pタグに直接styleを記述。
~~~
<div style="text-align: right">
    <input type="button"  id="button" style="text-align: right">
</div>
~~~
**inputタグはインライン要素**なのでdivでブロック要素にして、divにstyleを記述。

### 左寄せと中央寄せ
中央ならcenter、左ならleft（デフォルトで左寄せなので使うことはあまりなさそう）で寄せることができる。
~~~
<p style="text-align: left">
  この文字は左寄せされます
</p>
~~~
~~~
<p style="text-align: center">
  この文字は中央寄せされます
</p>
~~~
# 参考リンクなど
適用したい要素がブロックレベル要素なのかインライン要素なのかに注意する必要がある。下記リンクにブロックレベル要素とインライン要素ごとにまとめられている。
https://www.htmq.com/htmlkihon/005.shtml
【PHP】【javascript】三項演算子の入れ子 switch文が不要になる？

# コード
```PHP
<?php
$test = 1;
echo ($test === 2 ? '○' : ($test === 1 ? '◎' : '×') );

echo ($test === 2 ? '○' 
   : ($test === 1 ? '◎' 
   : '×'
));
```

```PHP
<?php
$test = 3;
echo ($test === 2 ? '○' 
   : ($test === 1 ? '◎' 
   : ($test === 3 ? 'a' 
   : 'b'
)));


$test = 77;
echo ($test === 2 ? '○' 
   : ($test === 1 ? '◎' 
   : ($test === 3 ? 'a' 
   : ($test === 4 ? 'c' 
   : 'b'
))));
```


# javascript
```javascript
process.stdin.resume();
process.stdin.setEncoding('utf8');
test = 1;
console.log(test === 2 ? '○' : (test === 1 ? '◎' : '×') );
```

# 結果
```
◎
```

# javascript 入れ子
```javascript
process.stdin.resume();
process.stdin.setEncoding('utf8');
let x = 5;

let a = x < 10 ? 1
      : x < 20 ? 2
      : x < 30 ? 3
      : 4;
      
console.log(a);
```

# 結果
```
1
```
新しく言語を学ぶときはとりあえずストップウォッチを作ろう

# はじめに

プログラミング言語を新しく勉強するとき、Hello world!した後に何しよう？と思ったら、自分はとりあえずストップウォッチを作ることにしています。
理由はいくつかありますが、
- 時間測定はどのプログラミング言語でもほぼ必ず実装することになる
- 時間や小数などの基礎的な型を知るきっかけになる
- 言語を学習するときの難関である「非同期処理」の練習になる
という3点が大きいです。

具体的なストップウォッチ記事は、たとえば C# 言語ならば[「C# ストップウォッチ」でGoogle検索](https://www.google.com/search?q=C%23+%E3%82%B9%E3%83%88%E3%83%83%E3%83%97%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81&rlz=1C1QABZ_jaJP1036&oq=C%23+%E3%82%B9%E3%83%88%E3%83%83%E3%83%97%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81&aqs=chrome..69i57j69i58.2685j0j7&ie=UTF-8)すればすぐに出てきます。
とはいえ、それだとどの記事を読んだらいいのだろう？と迷ってしまうと思いますので、自分が言語を学ぶ際に参考にしたウェブ記事を末尾に載せておきます。

## なぜストップウォッチ？
### 時間測定はどんな言語でもほぼ使う

厳密には業種や言語にも依るとは思いますが、「プログラムの実行時間を調べる」という行動はどんなアプリケーションやサービスを作る上でも必要になります。
ブラウザやアプリを起動するときに、ローディングが長くてイライラした経験が誰しもあると思います。実行時間がかかりすぎると、それだけでアプリの価値を損ねてしまいます。
「アプリなんて動けばいいじゃん！」と考えている方も多いと思いますが（実際私も割とそう思ってますが）、より価値のあるアプリを作るためには、アプリの実行時間を意識して改善すると良いでしょう。
そのためにも、まずはストップウォッチの実装から初めてみると良いと思います。

### 時間や小数などの型を知れる
最近はjavascriptやPythonからプログラミングに初めてとりかかり、別言語における「**型**」（タイプ）の概念をあまりよく知らない、という方も多くなってきたと思います。

ストップウォッチでは、「文字列」「時間」「小数」といった3種類の値を扱うことになります。
ストップウォッチを作っているうちに、文字列に時間を足す、時間を文字列に変換する、等を行う必要がでてくると思います。
世の中には、文字列+時間 が直接できる言語と、時間を文字列に変換してからでないと 文字列+時間 ができない言語があります。

11:30:25 を表す時刻に 1 を足した結果が、
11:30:26 の時刻になったり、"11:30:251" の文字列になったり、エラーになったり……言語によってこの辺の細かい仕様は異なります。この違いをしっかり把握しておきましょう。

前述のjavascriptやPythonでは値の型の違いをあまり気にせずプログラミングできますが、C++やC#、TypeScriptといった言語の場合には型の違いをしっかり理解した上でプログラミングをしなければなりません。
逆にいえばC++やC#に慣れきった人がjavascriptやPythonを学習すると面食らうと思います。私もそうでした。

Hello World!やfor文などの基礎を学んでいるうちは文字列と整数を扱うことがメインになるとは思いますが、時間についてのサンプルにはまだ触れたことがないという方もいるかもしれません。言語によっては小数も整数も同じnumber型として扱う！みたいなものもあるので、こういった言語ごとの型の違いについて把握するのにも良いサンプルになると思います。
また、後述する非同期処理を扱うのに使われる型も学べます。しっかり学習すれば、関数自体を引数として扱う関数や、アロー関数、async/awaitなどの非同期処理用の文法も扱えるようになると思います。


### 非同期処理の練習になる
**非同期処理**とは何か？ざっくり言えば「**別々の仕事を同時に行う**」ことです。ストップウォッチによる時間測定はその最も分かりやすい例です。
ストップウォッチは、「**スタートを押した時間から現在までの時間を測定し、それを画面に表示する**」というのが主な機能のひとつです。

そのへんの店で売ってるリアルなストップウォッチは、例えば短距離走の時間を測ったり、料理するときの茹で時間を測ったりするのに使いますよね？ストップウォッチは、「何か別の仕事をするのにかかる時間を測定する」という仕事が主な用途です。つまり、時間を測定・表示すると同時に別の仕事も同時にこなせるような状況になっている必要があるのです。
これが「非同期処理」の例です。実際の業務プログラミングでは他の機器から通信を待機するのに非同期処理はよく使います。とはいえ、とりあえずオフラインで非同期処理の練習をしたければストップウォッチはよい例になると思います。
（ただ、同期的にストップウォッチを作るコードを紹介しているサイトもあります。同期的なストップウォッチを作ってから、非同期的なストップウォッチを作っても良いと思います）

:::note warn
ちなみに、よくある誤解ですが「非同期処理」と「マルチスレッド」は別々の概念です。
例えばマルチスレッドでない環境のJavaScriptでも、非同期処理は実行できます。
マルチスレッドならば非同期処理をしょっちゅうすることはその通りなのですが、マルチスレッドでないからといって非同期処理を行えないということはないのです。
:::

## ストップウォッチの作り方を紹介しているページの例
### JavaScript
[【JavaScriptの実践】ストップウォッチの作り方 | ワードプレステーマTCD
https://tcd-theme.com/2022/06/javascript-stopwatch.html](https://tcd-theme.com/2022/06/javascript-stopwatch.html)

### C#
[ストップウォッチ アプリをつくる方法 | 鳩でもわかるC#（Ｃ＃）  
https://lets-csharp.com/howto-stop-watch/](https://lets-csharp.com/howto-stop-watch/)


私が新しくプログラミング言語を習得するごとに、ここに記事を追加していきます。
SwiftでTemplate Methodパターン

[Java言語で学ぶデザインパターン入門第3版](https://www.sbcr.jp/product/4815609801/)　の「第3章　Templete Method - 具体的な処理をサブクラスにまかせる」に記載されているソースコードを参考にさせていただき、Swiftで書いてみました。

ざっくりまとめ
- 共通的な処理をスーパークラスに定義し、それぞれのサブクラスで具体的な処理を実装する
- iOSのアプリ開発でいうところの同じようなViewControllerがあるとしたら、BaseViewControllerを定義し、それぞれのViewControllerが継承するみたいな感じ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179037/e44dc969-9425-bc1d-7f05-7508dd62cc85.jpeg" width=300px>

```swift
class AbstractDisplay {
    func open() {
    }
    
    func print() {
    }
    
    func close() {
    }
    
    func display() {
        open()
        for i in 1 ... 5 {
            print()
        }
        close()
    }
}

class CharDisplay: AbstractDisplay {
    private let char: Character
    init(char: Character) {
        self.char = char 
    }
    
    override func open() {
        Swift.print("<<", terminator: "")
    }
    
    override func print() {
        Swift.print(char, terminator: "")
    }
    
    override func close() {
        Swift.print(">>")
    }
}

class StringDisplay: AbstractDisplay {
    private let string: String
    private let width: Int
    
    init(string: String) {
        self.string = string
        self.width = string.count
    }
    
    override func open() {
        printLine()
    }
    
    override func print() {
        Swift.print("|\(string)|")
    }
    
    override func close() {
        printLine()
    }
    
    func printLine() {
        Swift.print("+", terminator: "")
        for i in 1 ... width {
            Swift.print("-", terminator: "")
        }
        Swift.print("+")
    }
}

let d1 = CharDisplay(char: "H")
let d2 = StringDisplay(string: "Hello, world.")

d1.display()
d2.display()

/* 実行結果
<<HHHHH>>
+-------------+
|Hello, world.|
|Hello, world.|
|Hello, world.|
|Hello, world.|
|Hello, world.|
+-------------+
*/
```

# 参考文献
- 結城　浩.『Java言語で学ぶデザインパターン入門第3版』.SBクリエイティブ、2021
【Swift】UIパーツとコントローラーが紐づかない時の対処法

## はじめに
UIパーツとコントローラーの紐付けに少し苦戦したので、メモを残します。

## 現象
いつものように、「controlキー」を押してImageViewをドラッグしてコントローラーと紐付けしようとしたところ、何も起きない、、、
えっどうして？？？

## 原因
結論を言うと、``ViewクラスにViewControllerが設定されていない``からです。

## 解決方法
Viewの中の「File's Owner」のクラスを紐付けたいコントローラー名に設定してください。そうすれば、ViewとContorollerは紐づくはずです！

viewとコントローラーの名前が一緒なのでややこしいですが、以下は、「BottomPopViewCell.xib」と「BottomPopViewCell.swift」というファイルを紐づけています！
![スクリーンショット 2023-08-02 14.42.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3072069/8ebd0f2c-dffe-a6d2-c634-692e8e738a7b.png)
Excelで便利なショートカットキーまとめ


# はじめに

私が業務で使い倒しているExcelのショートカットキーを紹介します。
ショートカットキーを使用することで業務の効率化に繋がります。

## 業務で使い倒しているショートカットキー

### F2
選択しているセルの編集

### F4
直前操作を繰り返す

### F12
名前を付けて保存

### ctrl + D
一つ上のセルの内容を選択しているセルにコピーする

### ctrl + F
検索と置換

### ctrl + S
上書き保存

### ctrl + 1
選択しているセルの書式設定

### ctrl + ;(セミコロン)
今日の日付を入力

### ctrl + :(コロン)
現在の時刻を入力

### ctrl + fn + ←
A1セルに移動

### ctrl + fn + ↓
次のタブに移動

### ctrl + fn + ↑
前のタブに移動

### Fn + ↓
ページダウン

### Fn + ↑
ページアップ

## まとめ
こういったショートカットキーを使用することで楽だなと感じることは多々あります。
この「楽にする」行為が時短に繋がるのだなと思います。
スクロール時に背景画像を固定する方法と注意点

株式会社ココロファン - エンジニアリング事業部所属のhazamaです。
サイト制作・運用業務をメインに行っています。


Webサイトを見ていると画像が背景に固定されていて、スクロールしても背景画像が変わらない。
またはセクションが変わると背景画像が切り替わる、というものがよくあると思います。
これらはCSSで制御できるのですが、背景に画像を固定する際の方法や注意点を今日は書いていこうと思います。

## 実装
`background-attachment`を指定するだけで実は簡単に実装できます。
以下のように背景を設定したい要素に対し、`background`で画像を設置し
`background-attachment`を指定するだけです。
```css
<div class="section"></div>

.section {
  background-image: url(URL);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
　background-attachment: fixed;
}
```

## 注意点
この方法はとても簡単ですが、iOSの古いバージョンでのsafariでは使えない可能性があります。
（今回は「iPhone12 miniのiOS16.6」にて動作確認しています）
古いバージョンでは`background-attachment: fixed;`はブラウザには認識されているものの、
動作していない模様です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256886/fe104443-95c6-71f5-ee32-0e5d76134e93.png)

古いiOSのことも考慮するのであれば、`background-attachment`を使わない実装で
同じ動きになるように調整が必要です。

## background-attachmentを使わずに実装してみる
```css
<div class="section"></div>

.section::before {
  position: fixed;
  background-image: url(../img/img-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
  width: 100%;
  z-index: -1;
  content:'':
}
```
疑似要素を使用し`position`にて背景を固定しています。
注意点としては`z-index`にてマイナス値を指定しないと、背景画像が前面に出てしまい
見せたいコンテンツの上に重なってしまうことがあるので注意です。

実際にやってみるとこんな感じになります。
（gifはwindowsのscreenpressoというツールを使って撮っています）

![scrool-test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256886/52de30f9-275e-1a06-0b4b-06a27ab92358.gif)

## 最後に
`background-attachment`は少しおしゃれに見せるには大変役立つプロパティではありますが、
商用のサイトに使うにはちょっと怖いところがあります。
`background-attachment`に頼らずとも同じ動きにする手段はありますので、実務で使う場合は
使用するかどうかは要相談・テストした方が現時点では良さそうです。

これからも有意義な情報が発信できるよう、できるだけ記事をアップしていきたいと思います。
モダンフロントエンド開発の秘密兵器！AspidaでAPI呼び出しを簡単に、そして型安全に！


こんにちは！今日は、TypeScriptを使用したフロントエンド開発でAPI呼び出しを効率的かつ型安全に行うための素晴らしいライブラリ、Aspida（アスピダ）について紹介します。

## 目次
1. [Aspidaとは何か？](#Aspidaとは何か)
2. [Aspidaのメリット](#Aspidaのメリット)
3. [Aspidaのインストール](#Aspidaのインストール)
4. [APIエンドポイントの定義](#APIエンドポイントの定義)
5. [HTTPクライアントのコードの生成](#HTTPクライアントのコードの生成)
6. [生成されたHTTPクライアントの使用](#生成されたHTTPクライアントの使用)
7. [まとめ](#まとめ)

---

## Aspidaとは何か？

Aspidaは、TypeScriptを使用したHTTPクライアントの生成ライブラリで、主にフロントエンド開発におけるAPIの呼び出しを容易にし、より安全にします。

---

## Aspidaのメリット

Aspidaの主な特徴とその利点を以下に列挙します。

1. **型安全**: AspidaはTypeScriptによって強力にサポートされています。これにより、APIのレスポンスが想定した型と一致することを確認できます。これは、APIから返されるデータの形状を事前に知ることができ、想定外のデータが返された場合にエラーを発見しやすくするために有用です。
2. **自動コード生成**: Aspidaは、APIエンドポイントの定義からHTTPクライアントのコードを自動的に生成します。これにより、API呼び出しのコードを手動で書く手間を省くことができ、同時に一貫性と信頼性も確保できます。
3. **柔軟性と互換性**: Aspidaはaxiosやfetchなどの様々なHTTPクライアントライブラリと互換性があります。これにより、既存のプロジェクトにAspidaを簡単に統合することができます。
4. **開発効率**: レスポンスの型定義やエンドポイントの生成が自動化されるため、開発者はAPIの実装やビジネスロジックに集中することができます。また、APIの変更があった場合でも、Aspidaを使用すれば新しい型定義やエンドポイントの生成を自動的に行うことができます。

---

## Aspidaのインストール

Aspidaをインストールするためには、まずはプロジェクトのセットアップが必要です。Node.jsとnpmがインストールされていることを確認してください。その後、以下のコマンドを実行してAspidaをインストールします。

```
npm install @aspida/node-fetch aspida
```

ここでは、HTTPクライアントライブラリとして`node-fetch`を使用していますが、もし`axios`を使いたい場合は`@aspida/axios`を代わりにインストールしてください。

---

## APIエンドポイントの定義

Aspidaは、APIエンドポイントの定義からHTTPクライアントのコードを自動生成します。以下のようなディレクトリ構造でAPIエンドポイントを定義します。

```
/api
  /users
    index.ts
    /$userId.ts
```

例えば、`index.ts`には以下のようなコードを書きます。

```typescript
// /api/users/index.ts

type Methods = {
  get: {
    resBody: {
      id: number
      name: string
    }[]
  }
  post: {
    reqBody: {
      name: string
    }
    resBody: {
      id: number
    }
  }
}

export default Methods
```

この定義により、`GET /users`と`POST /users`のエンドポイントが定義されます。

---

## HTTPクライアントのコードの生成

定義したAPIエンドポイントからHTTPクライアントのコードを生成します。以下のコマンドを実行してください。

```
npx aspida
```

これにより、`/api`ディレクトリ内の全てのAPIエンドポイント定義からHTTPクライアントのコードが生成されます。

---

## 生成されたHTTPクライアントの使用

生成されたHTTPクライアントを使ってAPIを呼び出すことができます。例えば、以下のようにAPIを呼び出すことができます。

```typescript
import api from '@/api/$api'

const main = async () => {
  const users = await api.users.get()
  console.log(users)

  const newUser = await api.users.post({ body: { name: 'John' } })
  console.log(newUser)
}

main()
```

---

## まとめ

Aspidaを使うことで、API呼び出しを簡単かつ安全に行うことができます。開発効率の向上やバグの削減に寄与すること間違いなし
Git GitHub 入門

# Gitとは
プログラム管理ツールのこと。
プログラム自体には上書き保存などの機能がないため外部ツールを用いて管理を行います。

# 初期設定

## アカウント作成

GitとGitHubを利用するにはアカウントが必要です。

[GitHub](https://github.com/)にアクセスしてアカウントを作成します。

1. `Sign Up`をクリック
![Screenshot from 2023-08-02 13-52-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/a4347952-0d4f-f476-f5e1-0486679564c7.png)

2. メールアドレスを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/e0ee43cc-70eb-472a-e368-1b6aba27a968.png)

3. パスワード入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/77ab5c21-a121-4918-0d43-792ad92f5b8e.png)

4. 名前を入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/ef7b7233-04fb-4df2-c73c-7af950aebc87.png)

5. 認証を行う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/8c771385-b3af-204d-c4da-7d5e46984797.png)

## SSH接続

1. ターミナルを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/d400dfd4-426a-2c27-02c6-701e37d04f5b.png)

2. SSHキーを生成する。

```shell:shell
ssh-keygen
```

すべてEnterでOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/5085d850-179e-ffd4-c064-f5ae21734c6d.png)

+ SSHキーを表示する。

```shell:shell
cat ~/.ssh/id_rsa.pub
```
この出力結果を`Ctrl + Shift + C`で**コピー**してください。

### GitHubでキーを登録


1. `アイコン -> Settings`をクリック
2. `SSH and GPG keys`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/03dfbe31-58b7-3d0a-8188-1ce2a366a421.png)

3. 右上の`NEW SSH Key`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/7dbe3719-3e9b-370b-fe47-7f5c941fce11.png)

`Title`にはわかりやすいキーを入力(Laptopなど)

![Screenshot from 2023-08-02 14-17-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/dbf45ecf-7f31-d873-de20-a3fadef700b6.png)

`Add SSH Key`を押して以下のような出力がでればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/0e5cacb8-65d8-b8c9-d094-3f6c3e240e23.png)

## Gitのセットアップ

1. ターミナルで以下のコマンドを入力。`Email`と`アカウント名`は変えてください。
```shell:shell
git config --global user.email Email
git config --global user.name アカウント名
```

## 接続確認
以下のコマンドを入力して接続を確認してください。
```shell:shell
ssh -T git@github.com
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/7df4cb7f-9066-1bea-537c-af5c07e45b5c.png)
こんな出力が出ればOKです！


# Git操作

+ リモートリポジトリをクローンする。
```:shell
git clone リポジトリのURL
```

+ ディレクトリをgitで管理するようにするコマンド。`.git`ディレクトリが生成されます。

```:shell
git init
```

+ ステージングするコマンド。コミットする対象のファイルを指定します。

```:shell
git add ファイルのパス
```

大抵、以下のコマンドを入力することが多いです。すべてのファイルをステージングします。

```:shell
git add .
```

+ コミットするコマンド。コミットとは、Wordなどの上書き保存にコメントを書くようなイメージ

```sh:shell
git commit -m "メッセージ"
```

+ プッシュするコマンド、GitHub上に紐付けているリモートリポジトリに送信します。

```sh:shell
git push origin プッシュ先
```


## ブランチ

ブランチとは木のようにメインから派生して管理することができます。ブランチを切って開発を行うことでプログラムの管理がしやすくなります。

+ すでにあるブランチに切り替え
```sh:shell
git checkout ブランチ名
```

+ 存在しないブランチに切り替え
```sh:shell
git checkout -b 新規ブランチ名
```

+ GitHub上のリモートリポジトリに今のブランチ名でブランチを作成、pushを行う。

```sh:shell
git push origin HEAD
```
ABC312 - C - Invisible Hand 自己解法

# 問題
https://atcoder.jp/contests/abc312/tasks/abc312_c

# 考察
条件を満たす最小の$X$を求めてくださいという問題です。この問題を解くうえで、「下記の2点を満たしたときは二分探索を実装すると小さい計算量で求めることができる」という考察が重要になってきます。

:::note info
- $X$を決め打った時、条件を満たすかどうかを調べることができる。
- 条件を満たす最小の$X$を求める問題だが、その最小の$X$以上だと確実に条件を満たすことが保証できる。[^1]
:::

では、今回の問題で、上記2点を満たすかどうか見ていきます。

[^1]:あるいはその逆、「条件を満たす最大の$X$を求める問題だが、その最大の$X$以下だと確実に条件を満たすことが保証できる。」でもOKです。

### Xを決め打った時、条件を満たすかどうかを調べることができる。
条件は「りんごを$X$円で売ってもよいと考える売り手の人数が、りんごを$X$円で買ってもよいと考える買い手の人数以上である」ことです。各売り手は、「この価格以上なら売ってもよい」という基準価格を持っています。仮に整数$X$を決め打った時、各売り手の基準価格以上かどうかを調べれば、売ってもよいと考える人数を調べることができます。一方、買い手は「この価格以下なら買ってもよい」という基準価格を持っています。売り手と同様に、整数$X$を決め打った時、各売り手の基準価格以下かどうかを調べれば、買ってもよいと考える人数を調べることができます。それぞれの人数を求めることができるので、あとはそれらを比較すれば条件を満たすかどうか調べることができます。
よって、整数$X$を決め打った時、条件を満たすかどうかを調べることができるといえます。

##### 問題の出力例1の場合
<details><summary>(折りたたんでます)</summary>

-----
case1: $X=100$と決め打ったとする
売り手
|売り手1|売り手2|売り手3|
|-|-|-|
|110|90|120|
|売りたくない|売ってもよい|売りたくない|

買い手
|買い手1|買い手2|買い手3|買い手4|
|-|-|-|-|
|100|80|120|10000|
|買ってもよい|買いたくない|買ってもよい|買ってもよい|

売ってもよい: $1$人
買ってもよい: $3$人
→条件を満たさない。

-----
case2: $X=120$と決め打ったとする
売り手
|売り手1|売り手2|売り手3|
|-|-|-|
|110|90|120|
|売ってもよい|売ってもよい|売ってもよい|

買い手
|買い手1|買い手2|買い手3|買い手4|
|-|-|-|-|
|100|80|120|10000|
|買いたくない|買いたくない|買ってもよい|買ってもよい|

売ってもよい: $3$人
買ってもよい: $2$人
→条件を満たす。

これらのように、今回の問題は$X$の値を決め打つと、条件を満たすかを調べることができる。

-----

</details>

### 条件を満たす最小のXを求める問題だが、その最小のX以上だと確実に条件を満たすことが保証できる。
売り手が売ってもよいという条件は各売り手が持つ基準価格以上に$X$が設定されていることです。つまり、$X$の値がより大きいほど、売り手の人数が増えていくことが分かります。一方で、買い手が買ってもよいという条件は各買い手が持つ基準価格以下に$X$が設定されていることです。つまり、$X$の値がより大きいほど、売り手の人数が減っていくことが分かります。このことから、条件を満たす最小の$X$以上の整数だと、確実に条件を満たすことが保証されます。

##### 問題の出力例1の場合
<details><summary>(折りたたんでます)</summary>

-----
売り手
$X=100$の場合
|売り手1|売り手2|売り手3|
|-|-|-|
|110|90|120|
|売りたくない|売ってもよい|売りたくない|

売ってもよい: $1$人

$X=120$の場合
|売り手1|売り手2|売り手3|
|-|-|-|
|110|90|120|
|売ってもよい|売ってもよい|売ってもよい|

売ってもよい: $3$人
→売り手の人数が増えていく(減ることがない)

-----
買い手
$X=100$の場合
|買い手1|買い手2|買い手3|買い手4|
|-|-|-|-|
|100|80|120|10000|
|買ってもよい|買いたくない|買ってもよい|買ってもよい|

買ってもよい: $2$人

$X=120$の場合
|買い手1|買い手2|買い手3|買い手4|
|-|-|-|-|
|100|80|120|10000|
|買いたくない|買いたくない|買ってもよい|買ってもよい|

買ってもよい: $1$人
→買い手の人数が減っていく(増えることがない)

これらから、条件を満たす最小の$X$以上だと確実に条件を満たすはず

-----

</details>

ということで、二分探索で求めることができることが分かりました。二分探索を使用して答えを求めましょう。もし二分探索で求めた場合、計算量は$O((N+M)log10^9)$程度になるので、十分に間に合いそうです。

### 二分探索
二分探索については下記の記事が参考になります。

https://qiita.com/drken/items/97e37dd6143e33a64c8c#3-%E3%82%81%E3%81%90%E3%82%8B%E5%BC%8F%E4%BA%8C%E5%88%86%E6%8E%A2%E7%B4%A2%E3%81%AE%E3%81%95%E3%82%89%E3%81%AA%E3%82%8B%E5%88%A9%E7%82%B9

実装については慣れが必要かもしれません。参考記事を読みながら、ACできるまでコードを書く練習を何度か繰り返すのがいいかもしれません。

実装の注意ですが、二分探索の初期区間(「ok, ng」や「left, right」など)は、一方は確実に条件を満たす値、もう一方は確実に条件を満たさない値を設定しましょう。そして、今回の問題、$X=10^9$は条件を満たさない可能性があります。つまり初期区間の一端に$10^9$を設定するとWAになるので注意してください。

# 提出コード(コンテスト後)

https://atcoder.jp/contests/abc312/submissions/44093617

ご不明点などがあれば教えていただけると幸いです。

# 参考

https://qiita.com/drken/items/97e37dd6143e33a64c8c#3-%E3%82%81%E3%81%90%E3%82%8B%E5%BC%8F%E4%BA%8C%E5%88%86%E6%8E%A2%E7%B4%A2%E3%81%AE%E3%81%95%E3%82%89%E3%81%AA%E3%82%8B%E5%88%A9%E7%82%B9
初めてAWS DeepRacerに触れてみて

## はじめに

新人研修にて [AWS DeepRacer](https://aws.amazon.com/jp/deepracer/) 研修がありました。
AWS DeepRacer研修では、仮想上でマシンの走行シミュレーションを行い、モデル作成します。
そのモデルを実際のレーシングカーに搭載し、コースを走行するタイムを競う研修でした。
今回、自律走行における強化学習について触れることで、AI技術に対する奥深さを体験することができました。

![photo1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519953/8ba20c52-8629-02f2-26e0-22f8254e88f6.png)


### AWS DeepRacerについて

AWS DeepRacerでは、学習させるコース、学習時間、報酬関数、スピード、ハンドル角度などを設定し強化学習を行わせることでモデルを作成します。
そして作成したモデルをレーシングカーに搭載し、実際のコースを走行します。
本研修では、学習させるコース、学習時間、報酬関数、スピード、ハンドル角度などを私たちで考え、用意されたレーシングカーに搭載し走行させました。

![2023-07-14-22-04-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519953/f27b45d1-becd-7816-7d54-eff95ee997a7.png)


## AWS DeepRacerを学習させた結果と現実

シミュレーションでは、作成するモデルを以下のように設定しました。

- 学習させるコース：[RL Speedway – Counterclockwise](https://docs.aws.amazon.com/deepracer/latest/developerguide/deepracer-track-examples.html#deepracer-track-example-RL-speedway-advanced) 
- 学習時間：40分
- 報酬関数：[follow the center line](https://docs.aws.amazon.com/deepracer/latest/developerguide/deepracer-reward-function-examples.html#deepracer-reward-function-example-0)
- スピード： 0.5 m/s ～ 1.5 m/s
- ハンドル角度： -25° ～ 25°

ここで報酬関数には、センターラインからどれだけ離れているかによって報酬を変える関数を選択しました。
その結果、シミュレーション上では、コースアウトやクラッシュすることなく完走するモデルを作成することができました。

![2023-07-14-22-08-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519953/eff8a374-8b2d-ae27-e8a8-e1ad9decfc79.png)


いざ出陣！

シミュレーションして作成したモデルをレーシングカーに読み込ませ、学習させていたコースであるRL Speedwayを実際に走行させました。
しかし、ノロノロと動き始め、曲がり角ではそのまま直進しコースアウトの連続でした…
この研修では、以下2つの観点を課題として設定し、改善に取り組みました。

1. シミュレーションと実際のレーシングカーとの違いに起因する課題：スピードの値が小さいと、タイヤと地面の摩擦力があるため遅くなってしまう点
2. 強化学習としての課題：学習不足や報酬関数の改善

この2つの課題について、様々なパターンのシミュレーションを行い、モデルを作成しました。

1.については、スピードの最大値を当初の1.5m/sから4.0 m/sにして学習しなおしました。
その結果、ノロノロだったレーシングカーが速くなりました。

2.については、報酬関数で定義している「センターラインからどれだけ離れたかに応じて与える報酬」を、当初よりも細かく設定するというアプローチで解決を試みました。
結果として、やや曲がり方がスムーズになりました。

![photo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519953/6c910640-329f-bccf-0c55-5d6cd8c14b3a.png)


## さいごに

AWS DeepRacer研修を通して、次の3つについて考えることができました。

1. AI技術は最新技術ではあるが、とても地道であること  
    本研修では、良い報酬関数を考えたり、速度やハンドル角度の設定を行ったりしてシミュレーションを行いました。
    その結果、それらの設定を少し変えるだけで、これまでより結果が改善したり、逆に望ましくない結果になることがあったりしました。
    こういった速度やハンドル角度の設定を考えるといった、地道な作業も必要になると感じました。
2. 仮想と現実では結果が異なること  
    シミュレーション上ではコースに沿って走行していたけれども、現実のコースではあまりうまく走行できていませんでした。
    これは、カメラや摩擦などの物理的な要素があり、シミュレーションにおいてそのことについて考慮しなければならないと気づきました。
3.	繊細であること  
    レーシングカーに対しては、コントローラーから「発進」や「停止」の操作ができます。
    この研修では、直前まで問題なく動作していた状況で、レーシングカーが発進しなかったり、発進したとしても走行が止まらなかったりということが発生しました。
    これは研修だから良いかもしれませんが、社会において実際の自動車をAIによって運転するとなったとき、走行に関する安全面をしっかり考慮しなければならないのではないかと学びました。

したがって、シミュレーションを行うことで実際に走行しなくてもモデル作成ができることを学び、AI技術の可能性について知ることができる、とても有意義な体験ができました！
アンケートデータを使った顧客セグメンテーション（クラスタリング）の紹介


今回は、アンケートデータを使って顧客のセグメンテーションができるK-Meansクラスタリングについて簡単に紹介します。

例えば、マーケティングの担当者として、アンケートに回答してくれた人たちに対してキャンペーンのメールを配信したいとしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/b28f742d-99d1-2c92-a086-b7b403ccf009.png)

しかし、ここで疑問があります。
回答者全員に「同じ」キャンペーンのメールを送ってしまっていいのでしょうか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/4a38ac99-ed2b-b490-17fa-7864514f498c.png)

アンケートの回答者は全員同じ性質であるはずはなく、回答者はそれぞれ異なる性質を持った人たちのはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/741d355f-8462-21fe-5e2c-5707bfc4423a.png)

例えば、あるサービスを導入する時に重視するものについて調査を行ったアンケートデータがあったとします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/16eed93d-4716-74d8-4126-90baffe49b3d.png)

回答傾向をもとに、回答者は以下のような3つのグループがあると考えられます。


サービスの使いやすさ、機能、品質を重要視するグループ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/6a87e5cf-2796-9a0e-ebce-e13f2b0f62c0.png)

アフターフォロー、サポート品質、応対速度を重要視するグループ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/5cba1214-76c0-3eb2-5dbd-0283b5912674.png)


価格を重要視するグループ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/2615a688-0cb3-c551-0491-4f9439629759.png)


上記のように、アンケートの回答傾向は何を回答者が重視するかによって異なっています。

そこで、「クラスタリング」を行うことで、回答の傾向をもとに回答者をいくつかのグループに分類することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/048fd7e9-955f-165c-3f2d-367224914687.png)

実際のデータには、下記のようにクラスターの番号が割り当てられることになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/c4aa11a8-f309-835d-d1f4-2ea95ab24908.png)

回答の傾向をもとに分けられたクラスターに、それぞれどういった特徴があるのかをラベルを付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/4a549911-5925-0c4f-6e53-c1dbc6e8ebb2.png)


アンケートデータをクラスタリングすることで、グループ分けした回答者に対して、適したアプローチを取ることができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/6bb99a7e-0f8c-8519-0194-a187f6fb5241.png)


Exploratoryの場合は、アナリティクス・ビューの下で簡単に「K-Means クラスタリング」を実行することができ、様々なチャートによってクラスタリングの傾向を直感的に理解できるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/18717ffc-3894-fd95-4ce8-8b97154ee530.png)

# 実務で使えるスキルを身に着けたい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192148/b4956034-7410-51d1-4d74-1f461ce36df3.png)

今回紹介したようなアンケートデータの分析に役立つ分析手法、さらにアンケートデータに特有なデータ加工の問題の解決方法などをもっと深く学び、さらに現場で使えるレベルのスキルを身に着けたいという方は、アンケートデータの加工と分析に特化したトレーニングを用意しておりますので、ぜひご検討いただければと思います。


https://exploratory.io/survey-data-training-jp/?utm_campaign=5analytics-survey&utm_medium=blog&utm_source=qiita


# 自分のデータで試してみたい！

記事内の全てのチャートは、データの加工、可視化、分析、レポーティングのためのUIツールの[Exploratory](https://exploratory.io/?utm_campaign=5analytics-survey&utm_medium=blog&utm_source=qiita)を利用して作成しています。

ご自身のデータを使って、これらのチャートを作成したり、データの分析をしたい方は、下記のページより無料トライアルが可能ですので、ぜひ、お試しください！

https://exploratory.io/?utm_campaign=5analytics-survey&utm_medium=blog&utm_source=qiita
CESS、東京で開催されたWebX Web3カンファレンスでWeb3開発、普及、教育への取り組みを継続

CESSはアジアを代表するWeb3カンファレンスに参加し、世界中の技術界の巨匠や業界リーダーを招いたサイドイベントを共催
![cumulus.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784576/b0a65c5e-72b6-f56e-13c4-2e5b66b6a26b.jpeg)

**東京、日本、2023年7月27日** Web3専用に構築された革新的な第3世代の分散型クラウドベースのデータストレージプロトコルである[Cumulus Encrypted Storage System](https://cess.cloud/) (CESS)は、東京で開催されたアジアを代表する[WebXカンファレンス](https://webx-asia.com/)に参加しました。7月25日、26日に開催された同イベントは、15,000人以上の参加者、200人以上の講演者、150社以上の出展者、100社以上のメディアパートナーを擁するアジアトップのWeb3イベントとして知られています。

CESSはカンファレンス期間中、厳選されたイベントのスポンサーを務め、CESSチームは世界中から集まったテック系スタートアップの創業者、ビジネス協力者、投資家らと話す機会を得た。リップル社のCTOであるデイビッド・シュワルツ氏、トロンの創設者であるジャスティン・サン氏、グーグル、サークル、Doge財団、Yuga Labs、バイナンスなどのオピニオンリーダー、そして岸田文雄内閣総理大臣、さらには日本の省庁の代表者などが登壇しました。

サミットでは、Web3のトレンド、ブロックチェーンの未来に向けた重要な技術標準の融合、レイヤー3の拡張技術、コンピューティングパワーに関するフォーカスセッションなどが議論された。また、競争の激しいハッカソンやAIが生み出すアートコンテストも開催され、CESSは注目のパートナーおよびスポンサーとして参加した。イベントの最後には、CESSが共催した@INVAITECH主催の招待者限定のアフターパーティーが開催され、CESSマーケティングマネージャーのジョン・フフリーズが講演を行った。会場にはCESSの共同創業者でCOOのジェシー・ダイも出席した。

**共同設立者兼COO**のジェシー・ダイ** は、このカンファレンスを高く評価し、次のように語った： 「WebXの参加者は、高性能なWeb3ベースのプラットフォーム、アプリケーション、そして世界の働き方を変えつつあるプロジェクトの構築者であり、皆、共通のビジョンを持っています： それは、可能な限り最高のデジタルおよびテクノロジーインフラとソリューションを構築することです。CESSは、業界最高のストレージコスト、最適化されたファイルの信頼性、暗号化された安全かつ効率的なストレージ証明、電光石火のアップロードと検索スピードを提供します。これらの機能は、ダイナミックでペースの速いWeb3アプリケーションとデータの世界におけるCESSの価値を証明しています。WebXでは、我々のソリューションについて参加者を教育し、様々な協力者、ビジネスリーダー、ハイレベルな意思決定者とネットワークを構築することができました。

また、 **マーケティングマネージャーのジョン・ハンフリーズ氏** は、このカンファレンスの影響力と重要性、そしてWeb3デジタルの未来におけるCESSの役割について、次のようにコメントしている： 「WebXカンファレンスは、オピニオンリーダー、新興企業創業者、ブランド、スポンサー、その他のデジタルディスラプターが一堂に会し、ネットワーク、学習、教育、そして業界が向かうブロックチェーンベースの未来を共同で構築するための完璧なプラットフォームを提供します。CESSは、競争の激しいグローバル市場において、新しいアプリケーション、システム、プラットフォームが必要とするスケーラビリティ、安定性、信頼性、パフォーマンス、コスト削減、セキュリティを備えたストレージを提供するために一から設計されました。CESSチームはWebXに参加できたことを嬉しく思っており、CESSのエンタープライズグレードの分散型クラウドストレージソリューションを、参加者、プロジェクト、そしてあらゆるレベルの意思決定者に紹介できたことを非常に楽しんでいる。"

CESSのアプローチは、ユーザーデータの完全な所有権と制御権をユーザーに戻し、ユーザーが異なるエンティティにデータアクセスを許可または制限する権限を与える。これは、画期的な技術革新と、データストレージの証明スキーム、データの再複製と回復の証明、フローの証明、可用性とストレージの証明などの計算証明の組み合わせによって可能になる。

これらの革新的なブロックチェーンベースの進歩により、CESSは比類のないレベルのデータセキュリティとコントロールを提供し、その全てが企業レベルでの大量消費に理想的なグローバル規模で実現します。

CESSの詳細については、https://cess.cloud/ 。

**CESS について**

[Cumulus Encrypted Storage System](https://cess.cloud/) (CESS)は、Web3専用に構築された第3世代の分散型クラウドベースのデータストレージプロトコルです。 CESSは、高頻度の動的データの処理に最適化されており、ユーザーのデータ所有権、プライバシー、資産を保護しながら、リアルタイムのデータ共有を可能にします。複数の暗号化されたコピーを提供し、グローバルなノードにスライスして分散させることで、一点障害やデータ漏洩、検索に時間がかかることを排除します。このプラットフォームは完全に分散化されており、堅牢なデータ復旧保証を提供し、データの所有権とトレーサビリティを保証します。安全なデータと資産の共有、保護されたデータ転送、許可、ロイヤリティ、高速なデータ検索もCESSの価値提案の一部です。

CESSは、カスタマイズされたネットワークドライブ、フロントエンドのサポート、分散型ストリーミングやソーシャルメディア、分散型データマーケットプレイス、ユーザー生成コンテンツプラットフォーム、ブロックチェーンデータバックアップハブなど、幅広い豊富なユースケースをサポートし、トランザクションが暗号化によって保護され、データの所有権が正当な所有者に返還される、多様で堅牢なエコシステムの構築を支援します。
Google Colabにcsvを読み込ませる方法

## この記事は何？
Google Colaboratoryにcsvを読み込ませる方法が分からない方向けに書いてます

## ざっくり概要
<ul>
<li> マイドライブにcsvをアップロードするよ！
<li> Google Colabを開いてマイドライブにアクセスするよ！
<li> ディレクトリを確認して読み込んでみるよ！
</ul>


## マイドライブにcsvをアップロード

マイドライブにファイルを作成しアップロード
ローカルフォルダからドラッグ＆ドロップで可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3179561/92b81df2-3aa0-127c-ceab-2aa2a5d3fae4.png)

## Google Colabからマイドライブにアクセス

Google Colabを開き、写真のオレンジ丸部分をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3179561/ab5e71a8-9716-d250-0e4e-cba7faeb0d2c.png)

Google ドライブに接続
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3179561/5366a465-606c-140c-29f8-fa4cb56284a0.png)

ドライブのファイルが出てきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3179561/9364f56c-d7b3-4e83-c000-2d7e936f5aec.png)


## ディレクトリ確認
pwdコマンドで現在のディレクトリ位置を確認
「!pwd」で実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3179561/bf27cf77-0bc5-623c-22ca-cf6185c5b166.png)

ライブラリをインポートし読み込み
content ⇒ drive ⇒ MyDrive ⇒ Kaggle ⇒ Titanic ⇒ train.csvの順
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3179561/9c35bc51-fc53-2246-1e3a-49394c472ff6.png)
8ビット2進数を10進数に変換するゲームの解説

# 8ビット2進数を10進数に変換するゲームの解説

この記事では、Javaで作成された8ビット2進数を10進数に変換するゲームについて解説します。このゲームはランダムに生成される8ビットの2進数を10進数に変換し、ユーザーにその答えを入力してもらい、正解かどうかを判定するシンプルなゲームです。
基本情報技術者を勉強の合間につくりました。

# プログラムの概要

1. ランダムな8ビットの2進数を生成し表示する。
2. 8ビットの2進数を10進数に変換する。
3. ユーザーに10進数を入力してもらう。
4. ユーザーの入力と正解を比較し、結果を表示する。

# ゲームのコードの解説

1. ランダムな8ビットの2進数を生成し表示する
    
    ```java
    int[] binary_bits = new int[8];
    for (int i = 0; i < binary_bits.length; i++) {
      binary_bits[i] = new Random().nextInt(2);
      System.out.print(binary_bits[i]);
    }
    System.out.print("\n");
    ```
    
    - **`int[] binary_bits`** は8つの要素を持つ整数型配列で、8ビットの2進数を表現します。
    - **`Random().nextInt(2)`** は0または1をランダムに生成するため、この行のループにより8ビットのランダムな2進数が生成され、コンソールに表示されます。
2. 8ビットの2進数を10進数に変換す
    
    ```java
    int num = 0;
    int[] Decimal = { 128, 64, 32, 16, 8, 4, 2, 1 };
    for (int i = 0; i < binary_bits.length; i++) {
      num += (binary_bits[i] * Decimal[i]);
    }
    ```
    
    - **`int num`** は10進数の結果を表す変数です。初期値は0です。
    - **`int[] Decimal`** は、2進数の各桁に対応する10進数の値を保持する配列です。このプログラムでは、8ビットの2進数なので、配列には2のべき乗の値が逆順で格納されています（128, 64, 32, ..., 1）。
    - **`for`** ループにより、2進数の各桁と対応する10進数の値を掛け算し、**`num`**に加算していくことで、2進数を10進数に変換します。
3. ユーザーに10進数を入力してもらう
    
    ```java
    csharpCopy code
    System.out.println("上記の8ビット2進数を10進数に変換して入力してください：");
    Scanner scanner = new Scanner(System.in);
    int userGuess = scanner.nextInt();
    ```
    
    - **`System.out.println`** により、ユーザーに対して入力を促すメッセージが表示されます。
    - **`Scanner`** クラスを使用して、ユーザーからの入力を受け取り、**`int userGuess`**に格納します。
4. ユーザーの入力と正解を比較し、結果を表示する
    
    ```java
    if (userGuess == num) {
      System.out.print("正解！");
    } else {
      System.out.print("不正解。正解は " + num);
    }
    ```
    
    - **`if-else`** 文により、ユーザーの入力と正解を比較し、その結果に応じてメッセージを表示します。
    - ユーザーの入力が正解（**`num`** と等しい）であれば、`"正解！"`と表示されます。不正解の場合は、`"不正解。正解は "`の後に正解の10進数が表示されます。

最後に、**`scanner.close()`** により、Scannerオブジェクトを閉じてプログラムを終了します。

このゲームは、ランダムな2進数を10進数に変換する楽しい方法を提供しています。ユーザーは自分の計算力を試すことができるだけでなく、2進数と10進数の相互変換の理解を深めることができます。


※提案を承認し、マークダウンの調整がされました。
　ありがとうございます～
数学に関する備忘録

# モンティ・ホール問題

https://twitter.com/Jin__Sugimoto/status/1658170403662213121?s=20

# 期待値

https://twitter.com/Jin__Sugimoto/status/1673202390126964737?s=20

# 勾配降下とそのバリエーションに関する実践的な内容

https://twitter.com/DeepRecommendJP/status/1677878544599494657?s=20

# 量子情報幾何のメタバース分野への応用

https://twitter.com/DeepRecommendJP/status/1684444938703081473?s=20

# 勾配上昇

https://twitter.com/Jin__Sugimoto/status/1683817536473931778?s=20

# 弦と粒子

https://twitter.com/Jin__Sugimoto/status/1683816537835335681?s=20

# 2次元への関心

https://twitter.com/Jin__Sugimoto/status/1683815601721180161?s=20

# 情報量

https://twitter.com/Jin__Sugimoto/status/1685876443107266562?s=20

# 数学的認知

https://twitter.com/Jin__Sugimoto/status/1683480308560154628?s=20

# ゲーム理論

https://twitter.com/Jin__Sugimoto/status/1644950749590454273?s=20