OmniAICreator/Qiita-1.07M huggingface dataset:
AWSのTrusted Advisorなどの運用サービスはGoogleだと何？を調査した

# はじめに
AWS だとTrusted Advisor、Guard Duty、Security Hubなど、運用するにあたって、有効化しようという話題が挙がるが、GCだとこれをやろう、みたいなのが、見つけられなかったので、AWSでいうそれらに当たるものが何かを確認した。

# 概要
簡単な比較表を作成してみました。

| GoogleCloudでのサービス | 機能 | 見方 | できること | 必要なこと | AWSで該当すること |
| --- | --- | --- | --- | --- | --- |
| Recommender | - | [各種推奨事項の確認](https://cloud.google.com/recommender/docs/recommendation-hub/identify-configuration-problems?hl=ja)<br>[コマンド](https://cloud.google.com/sdk/gcloud/reference/recommender/recommendations/list) | [レコメンダーリスト](https://cloud.google.com/recommender/docs/recommenders) | ・デフォルトで表示されるところもある<br>・Recommender API を有効化しないとでないところもある | ほぼTrustedAdvisorですが、若干項目数に差分があるかな、という印象 |
| Security Command Center | [Security Health Analytics](https://cloud.google.com/security-command-center/docs/how-to-use-security-health-analytics?hl=ja) | 左記に記載あり | [定められた内容に従っているかを検出できる(バケットのロギングが無効なものを検出したり、監査ロギングが無効なものを検出したり、、)](https://cloud.google.com/security-command-center/docs/how-to-remediate-security-health-analytics-findings?hl=ja#sql_log_min_error_statement_severity) | ・Security Health Analyticsを有効化する必要がある<br>　→[スタンダード](https://cloud.google.com/security-command-center/docs/concepts-security-command-center-overview?hl=ja#standard-tier)とプレミアムがありプレミアムだと有償<br>　→スタンダードだと影響度が高のものしかでない | [SecurityHubのセキュリティ標準](https://docs.aws.amazon.com/ja_jp/securityhub/latest/userguide/standards-available.html) |
|  | [脅威](https://cloud.google.com/security-command-center/docs/concepts-security-sources?hl=ja#threats) | 左記リンクに記載あり | サービスアカウントの不正利用、データの引き出し、Cloud SQLの不審なアクティビティなどのセキュリティ検査機能 | 組織レベルで各機能を有効化する必要がある(プロジェクトレベルだと機能しなものがあるため)<br>　→異常検出、Container Threat Detection、Event Threat Detection、Forseti Security、Virtual Macine Threat Detection<br>　→プレミアでないと使えないものが多い | GuarDuty |
| [WebSecurityScanner](https://cloud.google.com/security-command-center/docs/concepts-web-security-scanner-overview?hl=ja) | - | [カスタムスキャンの設定](https://cloud.google.com/security-command-center/docs/how-to-web-security-scanner-custom-scans?hl=ja) | 脆弱性のチェック(CVS値とかがでるではなくXSSのリスクがあるとかそういう観点のものでWebアプリケーション観点でのチェックになる) | 対象機能を有効化する必要がある<br>スタンダードだと自分で手動で掛ける必要があるが、プレミアにすると自動で週に1回自動実行されるマネージドスキャンが可能である | ちょっと思いつかない |

## 確認しての所感

### Recommender
AWSは機能を把握していない人にもわかりやすいように、Trusted Advisorには網羅的な項目が当該機能に集約されており、Recommenderのようにコンポーネントが偏ったりしていないように見えました。
ただ、当たり前ですがGoogle Cloudに対する機能は Trusted Advisor では提供されていないので、BigQueryを皮切りにGoogle Cloudを使う人にとっては、有効であり、BigQueryの料金プランで迷っている場合なども実績ベースで推奨事項が出てくるので、環境によっては削減がかなり見込めるのではと思いました。
個人的には利用が増えてきていると思われるCloud Runの推奨事項や、Cloud SQLだけでなく、Spannerなどの他のDB系のマネージドサービスに対する推奨事項はもっと増えてもいいのではないか？と思う。

### Security Command Center
Google WorkspaceのSSO認証を検知できたりとGoogleならではの部分も行き届いており、その点まで検査対象なのは良い。
DB である Cloud SQL に対する不審なアクティビティ検知ができ、その点まで検査対象なのも良い。
具体的な検査対象の差異までは洗い出せていないが、プレミアムディアにすることである程度網羅されていると感じた。

# 所感
Recommender は機能の網羅する項目が偏っていたり、SCCのプレミアムティアでないと使えなかったりするサービスがあるが、これらは Google のサービスを保護するうえでは重要な役割を持っており、案件の要件によっては、これらの運用のセキュリティ的な機能がないと Google Cloud を扱えないこともあると思うので、その点からも重要なサービスであると感じました。
こういった運用サービスがあることが広まり、 Google 上でのサービスの優先順位としても上がり、より拡張していってもらいたいサービスだと感じました。
どこにもまとまってなかったGASの話（Googleフォームとスプレッドシート連携）

* GoogleフォームからGoogleスプレッドシートにデータを送ってあれこれ処理をする話
* Googleフォームを編集するともう一度イベントが発火する

# 何がつまりやすいのか
* Googleフォーム内にある回答データと、スプレッドシートに書き出したデータは同期しない
* 回答の編集でスプレッドシートに送られてくるデータは、変更があった部分のみ（新規と編集で同じコードを使うにはひと工夫必要）
* 回答済みの情報を編集するには、編集URLを行追加しておくとよい（回答番号などでは編集URLは作成できない）
* GoogleフォームのIDは、発火イベントの引数からは受け取れない
* Googleフォーム連携で発火する処理は、Apps Scriptエディタ上ではデバッグできないので、Logをいっぱい仕込んでおくしかない

# 書き始め
* 以下のformAction(e)を、トリガー「スプレッドシートから - フォーム送信時」に入れます。（ここでは詳しく説明しません）
* 下書きはchatGPTに書いてもらっているのでコーディングルールが一貫していません、悪しからず。
* 新規か編集かを、新規の処理時に更新した列を見て判定しています。
```
function formAction(e) {
  // 送信元のフォームのURL。
  // 編集用のIDを取ってくるのが面倒なので、Googleフォーム編集時のURLを持ってきた
  const formURL = "https://docs.google.com/forms/d/xxx/";
  // 編集URLの列名
  const colEditURL = "編集URL"

  /* 受け取りデータの解析 */
  var sheet = e.range.getSheet();  // フォームの結果シートを取得

  // フォームの属性名（フォームの質問のタイトル）を取得
  var form = FormApp.openByUrl(formURL);
  var formResponse = form.getResponses();
  // フォームから全ての質問アイテムを取得
  var items = form.getItems();
  // 質問アイテムのタイトル（属性名）を取得して配列に格納
  var attributeNames = items.map(function(item) {
    return item.getTitle();
  });

  //新規・編集を判定
  var numRows = e.range.rowEnd;
  var modeEdit = false;
  // 既存のヘッダー行を取得
  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  if(sheet.getRange(e.range.rowEnd, headers.indexOf(colEditURL)).getValue()) {
    // 対象行に編集URLが入っている場合、編集モードとみなす
    modeEdit = true;
  }

  // 編集の場合、e.valuesは編集したデータ以外、空っぽなので、
  // 対象行から、送られてきたデータを読み取っておく
  // フォームの属性名と値を関連付けるオブジェクトを作成
  var formData = {};
  for (var i = 0; i < attributeNames.length; i++) {
    var attributeName = attributeNames[i];
    var attributeValue = sheet.getRange(e.range.rowEnd, headers.indexOf(attributeName)+1).getValue()
    formData[attributeName] = attributeValue;
  }
  Logger.log("入力情報を解析しました。；" + JSON.stringify(formData));

  //ここからメイン処理…
}
```

# 編集URLを取得
```
  //編集URLのセット
  if(!modeEdit){
    var editUrl = formResponse[Number(formResponse.length - 1)].getEditResponseUrl();
    sheet.getRange(numRows, headers.indexOf(colEditURL)).setValue(editUrl);
  }

```
ここで、もし新規の処理のときに、GASで処理して書き換えた項目があれば、URLの引数に入れておくのを忘れないこと。
例：
```
var editUrl = formResponse[Number(formResponse.length - 1)].getEditResponseUrl() + "&entry.599468221=" + eventId;`
```
引数にしたいフォーム項目の`entry.599468221`を確認するには、Googleフォーム側、右上の三点リーダーメニュー>「事前入力したURLを取得」から、適当に入力をして、URLを取得することで調べられる。
コンピュータの中身ってどうなってるの？？

ハードウェアの部分で学んだこと。

※間違いが含まれている可能性があります。

## コンピュータのカタチ
まず、コンピュータはざっくりいうと以下のような構造になっているようです。矢印の意味は後ほど
![Untitled (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3341961/bfcaca3d-f9f1-593a-52dd-a6c1b22a3d45.jpeg)
ここに存在している入力装置・出力装置・記憶装置・演算装置・制御装置は**コンピュータの5大要素**と呼ばれています。全てほとんど文字通りの役割を持ちます。また、その内の**演算装置・制御装置をCPU、またの名をプロセッサ**と言います。ざっくりいうとコンピュータの頭脳みたいな部分です。CPUとかプロセッサってよく聞きますよね。これです。

さて、この装置達はどのように動くのでしょうか？
上の画像の実線矢印がデータの流れ、破線矢印が制御の流れ(あれしろこれしろと指示を送る感じ)を表します。まず**①入力装置(キーボードとか)によって外部からデータやプログラムを取り込み、記憶装置に記憶**します。そして、**②制御装置が記憶装置からプログラムを取り出して演算装置に処理の指示を飛ばします**。そうして行われた**③処理の結果を記憶装置に保存し、出力装置で外部に出力(今私たちが見ている画面などに表示する)します**。プログラムというと難しく感じるかもしれませんが、要はあれしろこれしろという命令が送られてくる訳で、場合によってそれに必要なデータもひっついて送られてくるよーっていう感じです。それらがトリガーとなって装置達は動いていきます
docker compose upで起動したコンテナにアクセスする方法

## 初めに
初めてdocker-composeを使用してコンテナの作成を行なった際、以前まで使っていた
```
docker exec -it ~~~
```
上記のコマンドを使用してもコンテナにアクセスできなくて戸惑ってしまったため、同じような人の時間を無駄にしないためにも記事にしようと思いました。

## 解決方法
解決策はdocker-compose用のコマンドを使用するだけです。
```
docker compose exec -it ~~~
```
dockerの後に`compose`と入力する必要があるのでした…
まだまだ知識不足なので精進していきたいです！！
【Next.js】AppフォルダでのRoute Group

## 初めに
Next.jsを使用してアプリケーションを作成している際、複数ページまとめてレイアウトを変更したくなったため方法を調べていたらRoute Groupsなるものが見つけられたので、備忘録も兼ねて記事にしようと思いました。
## レイアウトの設定方法
Next.jsでは、ページのレイアウトを設定するファイルとして`layout.tsx`を使用します。
```
app
 ├ home/
 ├ articles/
 ├ settings/
 │     └ profile/
 ├ page.tsx
 └ layout.tsx
```
上記のようなフォルダ構成を想定すると、appディレクトリにlayout.tsxを作成してレイアウトを設定するとappフォルダ以下のファイルには全てlayout.tsxのレイアウトが適用されます。

ですが、appフォルダ以下のファイルには全て`app/layout.tsx`が適用されてしまうため、ファイルごとのレイアウトの変更はできなくなってしまいます。
```
app
 ├ home/
 ├ articles/
 ├ settings/
 │     ├ profile/　
 │     └ layout.tsx
 ├ page.tsx
 └ layout.tsx
```
もし、上記のようにsettingsフォルダの直下に新しく`layout.tsx`を作成したとしても、`app/layout.tsx`と`app/settings/layout.tsx`の両方のレイアウトが適用されてしまい、画面がおかしなことになってしまいます。

それを解決する方法がRoute Groupになります。

## Route Groupの設定方法
Route Groupの設定方法は括弧で囲まれたフォルダを作成するだけです。
具体例）
```
app
 ├ home/
 ├ articles/
 ├ (settings)/
 │     └ settings/
 │          ├ profile/　
 │          └ layout.tsx
 ├ page.tsx
 └ layout.tsx
```
そして、上記のように括弧で囲まれたフォルダ直下に`layout.tsx`を配置してレイアウト設定を行うことによって、(settings)フォルダ以下のファイル全てに`app/(settings)/layout.tsx`のみが適用されるようになります。

これで、任意のフォルダのみに適用されるレイアウトを作成することができます。
[Hotwire] 電話番号を自動フォーマット

# はじめに

電話番号のように文字数が多いものがあっているかは確認しにくいです。なので、3桁、4桁区切りでハイフン(-)を入れます。自らハイフンを入れてもいいですが、自動でハイフンが入る方がいいです。電話番号があっているかだけに注意を向けられるからです。

そこで、HotwireのStimulusを使って、電話番号が自動フォーマットされるようにしました。

![Sep-14-2023 08-12-01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472392/3e673ec1-d2a4-87b2-28c6-e1d44ada1c44.gif)



## 環境

- Rails 7.0.7
- Ruby 3.2.2

# 実装

電話番号を入力する`<input>`要素に入力があるたびに、フォーマットが自動で実行されるようにします。

自動フォーマットのためのstimulus controllerを作成します。
```js:app/javascript/controllers/phone_number_controller.js
import { Controller } from '@hotwired/stimulus'
import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber'

// Connects to data-controller="phone-number"
export default class extends Controller {
  format() {
    if (this.element.value.length > 1) {
      const phoneNumberUtil = PhoneNumberUtil.getInstance();
      const region = 'JP';
      const number = phoneNumberUtil.parseAndKeepRawInput(this.element.value, region);
      this.element.value = phoneNumberUtil.format(number, PhoneNumberFormat.NATIONAL);
    }
  }
}
```

google-libphonenumber は、電話番号のパース、フォーマットなどができるpackageです。このpackageを使って、電話番号をフォーマットしています。

https://www.npmjs.com/package/google-libphonenumber

`format`メソッドが実行されれば、`data-controller="phone-number"`属性を持ったHTML要素の`value`が日本国内の電話番号の形式にフォーマットされます。

以下のように`<input>`要素に`data-controller="phone-number"`属性、`data-action="phone-number#format"`属性を持たせれば、入力のたびに自動でフォーマットされます。`format`メソッドは`input`イベントが発生するたびに実行されています。これは`<input>`要素に`data-action`属性を持たせていて、`<input>`要素のデフォルトイベントが`input`だからです。メソッドを実行するイベントを`input->phone-number#format`のように明示的に指定することもできます。詳しくは、[リファレンス](https://stimulus.hotwired.dev/reference/actions)を参照ください。


```haml:app/views/users/_form.html.haml
= simple_form_for user do |f|
  = f.input :name
  = f.input :annual_income
  = f.input :phone_number, input_html: { 'data-controller': 'phone-number', 'data-action': 'phone-number#format' }
  = f.submit class: 'btn btn-primary'
```

# まとめ

HotwireのStimulusを使って、電話番号が自動フォーマットされるようにしました。

![Sep-14-2023 08-12-01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472392/3e673ec1-d2a4-87b2-28c6-e1d44ada1c44.gif)

同じようなことを愚直にやろうとしたら、以下のようなことをすると思います。
1. HTML要素のidをもとにHTML要素を取得する
2. 取得した要素に対してEventListenerを作る
3. EventLinstenerで指定したイベント発生時の処理を作る

そのため、HTMLを見ただけでは、どのイベントで何が実行されるのかはJavaScriptファイルをみないとわかりません。

一方、Stimulusでは`data-action`で、どのイベントでどのメソッドを実行するのかHTML上で指定できます。そのため、HTMLを見ただけでも、どのイベントでどのようなメソッドが実行されるのか分かり易いです。

ただ、その分かり易さを高めるためには、stimulus controllerの名前や、メソッド名を直感的なものにする必要があります。どんな時でも結局、命名の難しさに直面するのが面白いところです。
Unity as a Library（UaaL）でSwiftUIを使う際のビュー位置ズレ問題の解決法


# Unity as a Library（UaaL）でSwiftUIを使う際のビュー位置ズレ問題の解決法

## はじめに

Unity as a Library（UaaL）とSwiftUIの統合は多くの可能性を開きますが、この組み合わせはいくつかの困難ももたらします。この記事では、特にビューの位置がずれるという問題とその解決法に焦点を当てます。

## 我々がどのような状況でどのような問題にあったのか

UnityをiOSアプリケーションに組み込む際、SwiftUIを用いたレイアウトとの統合が必要でした。しかし、SwiftUIの画面にUnityのビューを埋め込むと、そのビューが画面の上部に徐々にずれていく問題に直面しました。

### 使用した技術

- Unity as a Library（UaaL）
- SwiftUI
- UIKit

## その際のコード

問題が発生したのは、SwiftUIとUnity as a Library（UaaL）を組み合わせたプロジェクトでした。具体的には、SwiftUIの`UIViewControllerRepresentable`プロトコルを使って、Unityのビューを表示しています。

### SwiftUIのWrapper

まず、SwiftUIでUnityのビューをラップするための`UnityHostingController`を作成しました。

```swift
struct UnityHostingController: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        return ViewController()
    }
}
```

### AppDelegateでのUnity初期化

次に、`AppDelegate`でUnityを初期化しています。

```swift
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        Unity.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
        return true
    }
}
```

### UIKitのViewController

そして、Unityのビューを含む`ViewController`を以下のように作成しました。

```swift
class ViewController: UIViewController {
    private let unityView = Unity.shared.view
    
    override func loadView() {
        super.loadView()
        view.addSubview(unityView)
        NSLayoutConstraint.activate([
            unityView.topAnchor.constraint(equalTo: view.topAnchor),
            unityView.leftAnchor.constraint(equalTo: view.leftAnchor),
            unityView.rightAnchor.constraint(equalTo: view.rightAnchor),
            unityView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])
    }
}
```

この設定で、Unityのビューが何らかの理由で徐々に上にずれていく問題が発生しました。

## 解決方法

問題の根本的な原因は、`translatesAutoresizingMaskIntoConstraints` プロパティがデフォルトで `true` に設定されていたことでした。このプロパティを `false` に設定することで、ビューの位置が正しくなりました。

### 解決のコード

```swift
class ViewController: UIViewController {
    private let unityView = Unity.shared.view
    
    override func loadView() {
        super.loadView()
        unityView.translatesAutoresizingMaskIntoConstraints = false
        // ...
    }
}
```

## 解決方法の解説(正確ではない可能性があります)

`translatesAutoresizingMaskIntoConstraints`は、ビューのAuto Layout制約がどのように適用されるかを制御します。このプロパティが `true` の場合、ビューのframeが直接設定されると、それがAuto Layout制約として解釈され、期待しないレイアウトになる可能性があります。

## まとめ

Unity as a Library（UaaL）とSwiftUIを統合する際にビューの位置がずれる問題は、`translatesAutoresizingMaskIntoConstraints` プロパティの設定に注意することで解決可能です。この記事が、同じような問題に直面している開発者の助けになれば幸いです。
【個人開発】名鉄名古屋駅の乗車位置が検索できるwebアプリケーションを開発した話

# 1.アプリケーションの概要  
本アプリケーションは名鉄名古屋駅（名古屋鉄道）の乗車位置表示をユーザーが入力した駅名に応じて表示し、適切な乗車位置表示を案内するものです。  
[乗車位置チェッカーof名鉄名古屋駅](https://af6abf4d.meitetsu-nagoya.pages.dev/)  

名鉄名古屋駅を初めて利用するまたはそれに相当する方を対象ユーザーとしています。  
![IMG_7008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/c7214a56-fd8f-32ad-5d99-c198f748e8b4.jpeg)

# 2.開発した背景
 名鉄名古屋駅は上下線合わせて２本の線路から多数の方面へ走る列車が発着します。そのため行き先に応じて乗車位置表示が色分けされています。
適切な乗車位置で列車の到着を待てば予定の列車に乗車することができますが、探す方法は駅の電光掲示板を確認するか駅員に問い合わせる方法に限られていました。
そこでスマートフォンからスムーズに乗車位置表示情報をユーザーに提供できる本アプリケーションを開発いたしました。
![IMG_3138.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/c1544143-3693-2207-e914-b908147ce5b6.jpeg)
（色分けされた並び位置）
![IMG_3137.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/33fdd92b-f974-abfc-cc9b-aafad1486650.jpeg)
（行き先ごとに色分けされた表示）

# 3.機能詳細
 降りる駅を入力すると駅名の候補が表示されます。名鉄名古屋駅を初めて利用する方を対象ユーザーとしているので、表示される駅名一覧にはふりがなを設けました。駅名の選択操作をすると、行き先に応じた乗車位置のサインが表示として返されます。このサインは実際のものと極力同じデザインとなるように工夫しました。
![IMG_7810.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/fa48c10c-0fea-a706-d840-a4c359e2d249.jpeg)
（駅名候補）


![IMG_6935.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/d64b2bd3-0196-3936-165e-c812492a70d7.jpeg)
（表示結果）


# 4.使用技術
　フロントエンドでは、ReactとTypeScriptを採用し、バックエンドにはRuby on Railsを使用しました。このアプリケーションの主要なターゲットは、電車の発車を待つ短い時間の間にサービスを利用するユーザーです。このような短時間での使用を想定して、ユーザーに最も快適な操作性を提供したかったため、SPA（シングルページアプリケーション）形式での開発が最適だと考えました。その結果、SPA開発に適しているReactをフロントエンドの技術として選択しました。DBはPostgresQLを、インフラはherokuを採用しています。

さらに、将来的にネイティブアプリケーションの開発を行う際の拡張性も考慮しました。バックエンドの開発時間を最小限に抑えつつ、APIの拡張が容易に行えるよう、RailsのAPIモードを使用しました。これにより、将来的にネイティブアプリケーションを追加する場合でも、バックエンドの変更や追加作業を簡単に行うことができます。

↓検索機能の実装方法についてまとめました。

https://qiita.com/takeo-t/items/6f58bf0444f2043e95b7

ER図
![my_station_ER.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/bc1be4af-9b00-3ea0-632f-1ca6fd6283c6.jpeg)


# 5.特徴的な実装
　見慣れた乗り換えアプリ感を出して直感的に操作してもらえるようなUIにこだわりました。本アプリケーションは降りる駅を入力すると結果を表示するというシンプルな機能ですが、よくある乗り換えアプリのように発駅と着駅を入力欄を設けて擬似的に経路検索をしているような体験ができるように工夫しました。もちろん、発駅の入力欄はダミーでplaceholderに”名鉄名古屋駅”と記述し発駅は名鉄名古屋駅であることを示しています。

# 6.フィードバックや反応
　「経路案内のアプリはよく見るけど、乗車位置のアプリはなかなか見かけない」「電車に乗るのが不慣れだからありがたい」など温かいお言葉をかけて頂きました。本当にありがとうございます。
一方で電車の両数に応じて並び位置が変わるので、両数対応してほしいというご意見も頂きました。課題も多いですが対応できるように精進して参ります。


# 7.学びや今後の課題
　開発を通じてモダンフロントエンド技術に触れることができたのが自分にとっての大きな財産です。
今後もキャッチアップを行い、前述の両数対応や検索結果を保存する機能の実装に努めて参ります。
また、鉄道業界は2020年に発生したCOVID‑19の影響で全国の鉄道利用者が減少し電車本数の削減や廃線に追い込まれる路線もありとても苦しい状況が続いています。そのような状況下においてITの力で鉄道の便利さや素晴らしさを広めて利用者の増加に少しでも貢献したい所存です。
最後までお読みになって下さり誠にありがとうございました。
また、本アプリケーションの開発に際して、さまざまなアドバイスを提供してくれた現在エンジニアをされている高校時代の友人にはとても感謝しています。

# 8.参考リンク
https://github.com/takeo-t/meitetsu_nagoya
AndroidのJUnitテストは超ムズい（6）

# AndroidのInstrumentTestがmockkのバージョンによっては動かない。

```kotlin:build.gradle.kts
・・・
dependencies {
・・・
    androidTestImplementation("io.mockk:mockk-android:x.xx.x") 
    androidTestImplementation("io.mockk:mockk-agent:x.xx.x") 
```
mockk-android
mockk-agent
のバージョンですが、今のところ
* 1.13.3 → OK
* 1.13.4 → NG
* 1.13.5 → NG
* 1.13.6 → NG
* 1.13.7 → NG

となります。
```
java.lang.IncompatibleClassChangeError: Superclass kotlinx.coroutines.flow.StateFlow of kotlinx.coroutines.flow.StateFlow_1_Proxy is an interface (declaration of 'kotlinx.coroutines.flow.StateFlow_1_Proxy' appears in /data/user/0/jp.co.xxxxxx.xxxxxxxx/app_dxmaker_cache/Generated_-767958641.jar)
at java.lang.VMClassLoader.findLoadedClass(Native Method)
at java.lang.ClassLoader.findLoadedClass(ClassLoader.java:738)
at java.lang.ClassLoader.loadClass(ClassLoader.java:363)
at java.lang.ClassLoader.loadClass(ClassLoader.java:312)
at com.android.dx.stock.ProxyBuilder.loadClass(ProxyBuilder.java:358)
at com.android.dx.stock.ProxyBuilder.buildProxyClass(ProxyBuilder.java:340)
at io.mockk.proxy.android.transformation.AndroidSubclassInstrumentation.subclass(AndroidSubclassInstrumentation.kt:37)
at io.mockk.proxy.common.ProxyMaker.subclass(ProxyMaker.kt:144)
at io.mockk.proxy.common.ProxyMaker.proxy(ProxyMaker.kt:53)
at io.mockk.impl.instantiation.JvmMockFactory.newProxy(JvmMockFactory.kt:34)
at io.mockk.impl.instantiation.AbstractMockFactory.newProxy$default(AbstractMockFactory.kt:24)
at io.mockk.impl.instantiation.AbstractMockFactory.temporaryMock(AbstractMockFactory.kt:127)
at io.mockk.impl.recording.states.RecordingState$call$temporaryMock$1.invoke(RecordingState.kt:69)
at io.mockk.impl.instantiation.JvmAnyValueGenerator$anyValue$2.invoke(JvmAnyValueGenerator.kt:35)
at io.mockk.impl.instantiation.AnyValueGenerator.anyValue(AnyValueGenerator.kt:34)
at io.mockk.impl.instantiation.JvmAnyValueGenerator.anyValue(JvmAnyValueGenerator.kt:31)
at io.mockk.impl.recording.states.RecordingState.call(RecordingState.kt:75)
at io.mockk.impl.recording.CommonCallRecorder.call(CommonCallRecorder.kt:53)
at io.mockk.impl.stub.MockKStub.handleInvocation(MockKStub.kt:269)
at io.mockk.impl.instantiation.JvmMockFactoryHelper$mockHandler$1.invocation(JvmMockFactoryHelper.kt:24)
at io.mockk.proxy.android.advice.Advice.handle$lambda$0(Advice.kt:78)
at io.mockk.proxy.android.advice.Advice.$r8$lambda$y8tfHRaw6Qz3pR6YeNDVMHk1z1U(Unknown Source:0)
at io.mockk.proxy.android.advice.Advice$$ExternalSyntheticLambda0.call(Unknown Source:10)
```
stackTraceの内容からいかにも、mockkが怪しそう・・・・

localTestはこんなことはありません。最新版の1.13.7でちゃんとテストが動きます

mockkの公式GitHubに情報がありました。
[Mockk 1.13.4 incompatible with newest Espresso 3.5.1](https://github.com/mockk/mockk/issues/1049)
Espresso 3.5.1との組み合わせがダメぽいです。

# 解決
mockKの方で対応したようです。
io.mockk:mockk-android:1.13.8
io.mockk:mockk-agent:1.13.8
で動くようになりました。
Gmail の添付ファイルを Google Drive に保存する

# やりたいこと

タイトルの通り。
毎月Gmail に届くPDF（給与明細） が、GoogleDrive で見れたら良いのに……と思っていたところ、Microsoft Power Automate を使用すると、めちゃくちゃ簡単に設定できるらしい。
というわけで、その設定方法をまとめました。

# 設定方法（超簡単！4ステップ！）

1. 以下のサイトにMicrosoft アカウントでログイン（登録）します。
   https://make.powerautomate.com/

1. Microsoft 用意した、以下のテンプレートを開きます。
[テンプレート：Gmail の添付ファイルを Google Drive に保存する](https://make.powerautomate.com/environments/53d51220-d381-ef2c-b01d-0929736662b0/galleries/public/templates/14cac1c200814387986d11343b292258)

1. テンプレートが開いたら、Google アカウントでサインインします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979767/ef79c00e-9fea-177b-874c-c6d5808e737b.png)

1. 何度か表示される「サインイン」や「許可」をすべて選択し、チェックマークが付いたら
「フローの作成」をクリックします。**これで終わり！**

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979767/e98566fd-c798-4fb1-0b2f-225ce80c4b9a.png)

# カスタマイズ

そのまま使うなら終わりなんですが、デフォルトでは、
受信トレイに届いたすべての添付ファイルを
GoogleDriveに保存する設定になっているので、必要に応じて条件を設定しましょう。

左メニューの「マイフロー」クリックすると
作成したフロー（自動化の設定）が表示されるので、クリックします。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979767/3072ddb3-002d-ad06-6b94-de15e5dbe3bd.png)

左上の「編集」をクリック
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979767/30ce832a-2d65-a179-dc4f-755f2c82460b.png)

すると、作成したフローの図が表示されます。
各要素をクリックすることでメニューが開き、カスタマイズが可能。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979767/10306b52-1a34-0ff3-d880-b2abd4f6cfbc.png)

「💰給与明細」というラベルがついたメールの添付ファイルのみ
Google Drive の「給与明細」フォルダに保存する設定ができました。
先にGmail側でラベルを作成しておきましょう。
「詳細オプションを表示する」で細かい条件を指定することも可能です。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979767/b0bfac86-bd1f-7a05-bcf8-e74507ea8c5c.png)

# 最後に
Microsoft Power Automate は、正直使ったことがなく
Microsoftのよくわからないサービス……だと思っていたのですが
とても簡単に使うことができました。超便利。
~~正直この内容ならGASでさっと実装できそう~~

---
自身の名前のドメインを取得し、AWSのS3で、自身の各種SNSへのリンクページを公開しています。
こんな感じで、エンジニアの卵として定期的に情報発信していければ、と思っておりますので
よろしければX（旧Twiter）のフォローをお願いします。

https://naokichigyoza.com/
[C#] FlagsとHasFlagの仕様の確認

# やりたいこと

- 変数flagが、複数のフラグのどれか一つでも持っていればTrueにしたい

## 検証
```C#
[Flags]
enum F {
	A = 1 << 0,
	B = 1 << 1,
	C = 1 << 2,
};
F flag = F.A;
Console.WriteLine($"{flag.HasFlag(F.A)}"); // True
Console.WriteLine($"{flag.HasFlag(F.B)}"); // False
Console.WriteLine($"{flag.HasFlag(F.A|F.B)}"); // False ←　こう書ければ楽だった

flag = F.A|F.B;
Console.WriteLine($"{flag.HasFlag(F.A|F.B)}"); // True

flag = F.A|F.B|F.C;
Console.WriteLine($"{flag.HasFlag(F.A|F.B)}"); // True

```

## 結論
- 普通にビット演算
```C#
Console.WriteLine($"{(flag & (F.A|F.B))>0}");
```
【学習】Linuxコマンド　Day7

# おさらい
前回まで学習したことはこちらです。

- 環境構築 
　→https://qiita.com/imagatasaki/items/4c510cacc6f17556c3b9
- コマンドラインの操作方
- 基本的なコマンド① 
　→https://qiita.com/imagatasaki/items/37a7c12bce015d6bdc4a

- 基本的なコマンド②(ファイル操作)
　→https://qiita.com/imagatasaki/items/7abc96b0afea475077a2
　→https://qiita.com/imagatasaki/items/6ccf0e1cd44ebe1d3e9b
- パーミッション
- スーパーユーザー
　→https://qiita.com/imagatasaki/items/39e081d9c10c1448e0c7
- Vim
  →https://qiita.com/imagatasaki/items/f4302837756102d0d430


# 今日学ぶこと

- 標準入出力
- リダイレクト
- パイプライン

# 標準入出力
標準入出力とは、標準入力、標準出力、標準エラー出力の3つ
コマンドは標準入力からデータを受け取り、標準出力に結果を出力する。
エラー発生時は標準エラー出力に出力する。
入出力が何であるか、というところはコマンド自体は把握していない。
よって利用者が指定する必要がある。

# リダイレクト
リダイレクトは標準出力を切り替えることを指す。
主にコマンドの出力先を端末からファイルに変更することが多い。

## 標準出力をファイルに変更する

```
$ pwd > test.txt
$ cat test.txt
/home/imagata
```

「>」を使用することにより右側に書いたファイルに標準出力をつなぐことができる。
本来pwdコマンドのみであれば、/home/imagataがすぐに端末に表示されるが、
この場合はtest.txtに出力されている。
出力先のファイル名がもし存在しない場合は新たに作成される。
この「>」は既存のファイルに対し上書きを行うが、「>>」を使用する場合は末尾に追加される。

```
$ pwd >> test.txt
$ cat test.txt
/home/imagata
/home/imagata
```

###　標準エラー出力のリダイレクト
「2>」という記号を用いることで標準エラー出力のリダイレクトが可能となる。
まずは通常通り(?)エラーを発生させてみる。

```
$ cat test2.txt
cat: test2.txt No such file or directory
```
test2.txtというファイル、ディレクトリは存在しない、というメッセージが表示されている。
もしこれをerror.txtというファイルにリダイレクトさせる場合は

```
$ cat test2.txt 2> error.txt
$ cat error.txt
cat: test2.txt No such file or directory
```

こちらについても「2>>」という記号を用いることで末尾に追加が可能。
今回例は省略。

# /dev/null

リダイレクトとセットで使用すると便利なファイルに/dev/nullがある。
特殊なファイルで以下の特徴を持つ

- 入力に指定するとデータを返さない
- 出力に指定すると書き込まれたデータを破棄する

エラーにだけ注目したい場合、エラーを無視したい場合に使用されがち、ということなので、もう少し具体的にいうと
"エラーに注意したいが、他のメッセージが出てきてしまうと情報が多くて確認しづらい時"等に使えると思う。

```
$ cat test.txt > /dev/null
$ cat /dev/null
```

上記を実行しても何も表示されないことが確認できた。

# パイプライン
パイプラインとはコマンドの標準出力に別のコマンドの標準出力をつなぐ機能のこと。パイプとも呼ばれる。
「|」を使って複数のコマンドを繋ぐ。
これを用いることで比較的複雑な操作を行う場合でも一行のコマンドラインで処理を書くことができる。
CLIの強みともいえる。
例:lsコマンドの標準出力をcatコマンドの標準出力につないで行番号付きで表示する。
```
$ ls / |v cat -n
     1 bin
     2 boot
     3 dev
     4 etc
     5 home
     6 lib
     7 lib64
     8 medeia
     9 mnt
    10 opt
    11 proc
    12 root
    13 run
    14 sbin
    15 srv
    16 sys
    17 tmp
    18 usr
    19 var
```
本来lsコマンドのみでは行番号は得られないが表示されていることが確認できた。

# おつかれまでした
本日の学習のなかで/dev/nullやパイプラインがいかに作業を行う上で効率化につながるかはよく理解ができました。
しかし、咄嗟に使えるようになるためにはまだまだ実践的な学習が必要です。
Linuxで遊ぶ中で「このコマンドとこのコマンドをつなげられるのでは？」という閃きが発生し次第試してゆくことで上達すると考えます。それにCLIの強みを知ることができたのも今日の大きな収穫です。
プログラミングで文字列や記号の羅列に慣れているとはいえ、肌感が良いかといえばそうではない。
ただ、なぜそのように行うべきか、が今回の学習したことそのものより重要だと感じました。
杉浦光夫16page問題2)

$$ f(x) = \lim_{n \to \infty} \left [ \lim_{m \to \infty} \left \\{ {\rm cos} \left ( n!\pi x \right )  \right \\} ^{2m}\right ] $$

i) $x$が無理数の時、かつ$n$が有限の時
$n!$は有限の自然数で、$n!x$は無理数。よって、$ \left \\{ {\rm cos} \left ( n!\pi x \right )  \right \\} ^2 < 1$。
よって、$\lim_{m \to \infty} \left \\{ {\rm cos} \left ( n!\pi x \right )  \right \\} ^{2m} = 0$。

ii)  $x$が無理数の時、かつ$n$が無限($n \to \infty $)の時
$n!$が有限の自然数ならば、$\left ( n +1 \right )!$ も有限の自然数。よって、$\left ( n+1 \right )!x$は無理数。よって、$ \left [ {\rm cos} \left \\{ \left ( n + 1 \right )!\pi x \right \\}  \right ] ^2 < 1$。よって、$\lim_{m \to \infty} \left [ {\rm cos} \left \\{ \left ( n+1 \right ) !\pi x \right \\}  \right ] ^{2m} = 0$。よって、全ての自然数$n$に対して、$\lim_{m \to \infty} \left \\{ {\rm cos} \left ( n!\pi x \right )  \right \\} ^{2m} = 0$。よって、$f \left ( x \right ) = 0$
スッキリわかるサーブレット&JSP

# 学習振り返り
現在１０章のdokoTubuを製作中

# ３章まとめ
１章、２章ではサーブレット、JSPにあまり触れないので３章から開始
まずはeclipseでServletの作成

```java
package servlet;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


@WebServlet("/Login")
public class Login extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
		    throws ServletException, IOException {
```
このソース自体は特に覚える必要なし（勝手に作られるので）
ただ do Getにするのか
```java
protected void doGet(HttpServletRequest request, HttpServletResponse response)
		    throws ServletException, IOException {
```
doPostにするのかの理解は必要
```java
protected void doPost(HttpServletRequest request, HttpServletResponse response)
		    throws ServletException, IOException {
```

## GetETリクエストとPOSTリクエストの使い分け
Geリクエスト
→リクエストパラメーターが、情報を取得するために場合（例：検索など）
Postリクエスト
→リクエストパラエーターが、情報の登録に利用される場合（例：ユーザー登録やフォームボタンの送信ボタンなどで使われる）
Postリクエスト何かを登録、更新する際に使用するイメージ
Model-Viewerを使っているとLooks like there's something wrong with this object ARCore errorが発生してモデルが表示されない

# はじめに
ローカルホスト環境でデバッグしていると本エラーが発生し、ARで3Dモデルの表示に失敗したので原因を調べてみました。

# 原因
AndroidでModelViewerを利用する際には証明書付きの環境でホストする必要があるようです。
例えば、 証明書を設定せずに`localhost`　や `192.168.*.*`、 `http://...` みたいなアドレスを使用している場合は表示されないようです。

※なお、再現環境アニメーション付きglbですので他の条件だとエラーが発生しない可能性があります。

https://github.com/google/model-viewer/issues/573
VSCodeで誤訳を見つけたのでGitHub issueを作成した話

## きっかけ

VSCode を触っている時に、翻訳ミスを見つけました。
![01-vscode-settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945225/8359586b-2dc5-7b48-ddfc-4454fb0a5e6b.png)
「コピーするする」となっていますが、「コピーする」が正しい日本語訳ですね。
修正しようと思い立ちました。

## GitHub issue 作成までの流れ

### 1. 報告・修正先を見つける

まずは報告・修正先を見つける必要があります。

私は最初、日本語の文章がおかしいので拡張機能「[Japanese Language Pack for VS Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)」あたりを見れば良いかな？と推測しました。
![02-JapaneseLanguagePackforVSCode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945225/3e2fb22c-0c8f-ea7e-db18-08e077d6a127.png)
画面右側の「Project Details」の下に GitHub のリンクがあります。このリンクをクリックし、[リンク先の GitHub のプロジェクト](https://github.com/microsoft/vscode-loc)を確認します。
![03-github-file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945225/d2b9f075-a0e9-7184-f810-85611bdce587.png)
`i18n/vscode-language-pack-ja/translations/extensions/vscode.markdown-language-features.i18n.json`のファイル内に当該の文章があることを確認できました。
このファイルを修正すれば良さそうです。

### 2. CONTRIBUTING を確認

次に、コントリビュートする方法や注意点を確認します。

GitHub プロジェクトによっては`CONTRIBUTING.md`ファイルにコントリビュートに関する詳細情報が記載されています。
今回のプロジェクトには`CONTRIBUTING.md`は存在しませんでしたが、`README.md`にコントリビュートに関する情報が記載されていましたので、そこを確認しました。
`README.md`には以下の文章が記載されていました。

> If you want to give feedback or report an issue with a translation, please create a new GitHub issue. Please check if a topic about your issue already exists! Translation strings are managed on the Microsoft Localization Platform, and changes to strings can only be made there. Consequently, pull requests fixing translations won't be accepted.

DeepL で翻訳すると以下の通りです。

> フィードバックや翻訳に関する問題を報告したい場合は、新しい GitHub issue を作成してください。あなたの問題についてのトピックがすでに存在するかどうかを確認してください！翻訳文字列は Microsoft Localization Platform で管理されており、文字列の変更はそこでしか行えません。そのため、翻訳を修正するプルリクエストは受け付けられません。

つまり、翻訳文を修正するプルリクエストの発行は許可されていません。翻訳文に関する問題を記載した issue の作成のみが許可されています。

### 3. 既存の issue を確認

次に、同じ内容の issue が存在するか確認します。
https://github.com/microsoft/vscode-loc/issues
![04-github-existing-issues.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945225/df455260-f469-c3f9-4046-8905ba5f2b9a.png)
本題から逸れますが、様々な言語の翻訳文に関する issue が立てられています。日本語訳に関する issue もいくつかありました。

既存の issue を確認したところ、当該の文章に関してはまだ報告されていないことが分かりました。

### 4. issue を新規作成

既存の issue の内容を参考に、新規 issue を作成しました。
https://github.com/microsoft/vscode-loc/issues/1472
![05-github-create-issue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945225/be34fe58-653c-21e3-7e1a-cfaeb9d25dec.png)
issue を作成してから 1 日もしないうちに返答がありました。

> Thank you for your feedback. We are currently reviewing it

この返答をされた方は、既存の翻訳に関する issue にも同じ返答をしていました。おそらくこの返答からしばらくした後に翻訳文が修正されることになるでしょう。

### 後日

![06-github-fixed-issue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945225/7fa8be91-ad40-39cf-997d-a6f9ec6998bc.png)

修正されたと連絡受けました！
次のリリースで有効になるようです。
Sequelizeのupsertではフックが思った挙動にならない件

sequelize-typescriptを使っていて、自動で更新者IDを設定する仕組みをSequelizeのフックを使って実現しようとしたんですが、upsertだけ上手くいかなかったのでメモを残しておきます。

# やろうとしたこと

createやupdate、upsert等の更新系のメソッド呼び出しでリクエスト中のユーザー情報を渡して、フック内でカラムを自動設定したい

```sample.ts
const user: User = { id: 1 };
this.model.upsert(data, { user });
```

なお、以下のように型宣言してあげるとupsertの第2引数に好きな型を渡せるようになります。
この第2引数の値はフック側で受け取れるようになるので、必要に応じて拡張します。

```sequelize.d.ts
declare module 'sequelize' {
  export interface UpsertOptions {
    user?: User;
  }
}
```

# 現象

createやupdate、bulkCreateはbefore～フックで変更した内容がDBにちゃんと反映されるのにupsertだけDBに反映されない

### 調査

beforeUpsertの中で値を更新しても実際のカラムは更新されないみたいで、かなり昔からある問題みたいです。。。
（2018年に作成されたIssueが2023年9月時点でいまだにOpenのままです）
参考：https://github.com/sequelize/sequelize/issues/8829


```sample.model.ts
@BeforeUpsert
onBeforeUpsert(values: any, options: UpsertOptions) {
  // ここで値を更新しても実際のカラムには反映されない
  values.createUserId = options.user.id;
}
```

# 補足：beforeUpsertに渡されるオブジェクトはモデルクラスではなくupsert呼び出し時の更新オブジェクトらしい

beforeCreateやbeforeUpdate、beforeBulkCreate等のフックでは更新対象のモデルクラスがvaluesに渡されるんですが、upsertはなぜか更新用オブジェクトがそのまま渡されるそうです。。。

以下でコメントされてました
https://github.com/sequelize/sequelize/issues/8829#issuecomment-355338534

```sample.ts
const data = { key: value };
this.model.upsert(data);
```

```sample.model.ts
@BeforeUpsert
onBeforeUpsert(values: any, options: UpsertOptions) {
  // ここで渡されるvaluesは上記upsertの第一引数に渡したオブジェクトが参照渡しされる
  // valuesを編集するとsample.ts型のdataの値が変わります
}
```

# 回避策①：updateに分ける

更新対象データから追加用と更新用にデータを分けて、bulkCreateとupdateそれぞれでクエリを実行する

```sample.ts
const arryForAdd = [];
const arryForUpd = [];
for (const d of data) {
  if (d.id) {
    // idがあるデータを更新対象と判断する
    arryForUpd.push(d);
  } else {
    arryForAdd.push(d);
  }
}

return this.sequelize.transaction(async (transaction) => {
  if (arryForAdd.length) {
    await this.model.bulkCreate(arryForAdd, { transaction });
  }
  if (arryForAdd.length) {
    await this.model.update(arryForAdd, { transaction });
  }
}
```

# 回避策②：bulkCreateを使う

bulkCreateのupdateOnDuplicateオプションを使うことでupsertと同じような挙動を実現できます。
beforeBulkCreateはちゃんとデータ更新されます。
ただ、更新対象のカラムを文字列で指定しないといけないので、メンテナンス性は微妙。。。（カラムの追加や名称変更時に見逃しやすい）

```sample.ts
this.model.bulkCreate(data, {
  updateOnDuplicate: [
    'createUserId',
    ・・・
  ]
});
```

参考：https://sequelize.org/api/v6/class/src/model.js~model#static-method-bulkCreate
【Java・学習ログ⑧】インスタンスとクラス機構

教本に沿ってやってみたシリーズ、『第９章』です。
≪使用教材≫スッキリわかるJava入門　第3版　スッキリわかるシリーズ

## インスタンスとクラス機構

* ヒープ
プログラムを実行する際にJVMが準備する大量のメモリ領域のこと。インスタンスの情報を格納するためのもの。必要とする容量に従って大きくなる。

```java
public class Main {
    public static void main(String[] args) {
        Hero h; //Hero型の変数hをメモリ内に用意
        h = new Hero(); //1、Heroインスタンスを生成
                        //2、インスタンスが生成されたメモリの先頭番地がhに代入される(参照)
        h.hp = 100; //hに格納されているhpに100を代入(アドレス解決)
```

* インスタンスの独立性
同じクラスから生まれた異なるインスタンス(例…h1,h2)が互いに影響しあわないこと。

* has-aの関係
あるクラスが別のクラスをフィールドとして利用している関係。
```java
public class Sword { //武器クラス
    String name;
    int damege;
}

public class Hero { //武器を所持した勇者のクラス
    String name;
    int hp;
    Sword sword;
    public void attack(){…}
}

public class Main {
    public static void main(String[] args){
        Sword s= new Sword();
        s.name = "勇者の剣"
        s.damege = 30;
        Hero h = new Hero();
        h.name = "ヤマト";
        h.hp = 100;
        h.sword = s; //武器クラスに生成済みの武器インスタンスを代入;
        System.out.println("現在の武器は"+ h.sword.name); //勇者の剣の名前が表示される
}    
```

* コンストラクタ
newされた直後に自動的に実行されるメソッド。
Heroクラスに定義されたコンストラクタにより、mainメソッド側での初期値代入が不要になる。下記のようにメソッド名がクラス名と等しく、メソッド宣言にvoidを含む戻り値の型が記述されていないメソッドが、コンストラクタと認識される。
```java
public Hero(String name){ //引数で文字列を受け取る（newするときに渡す）
    this.hp = 100; //newした際に初期値として100が代入される
    this.name = name; //引数の値でnameを初期化 
}
```
* デフォルトコンストラクタ
Javaでは、「すべてのクラスは最低でも１つ以上のコンストラクタ定義をもっていなければならない」というルールが存在するが、１つもコンストラクタが定義されていない場合に限って「引数なし、処理内容なし」のコンストラクタが自動的に追加される。これをデフォルトコンストラクタという。
例えば複数コンストラクタがある場合、同一の内容を繰り返し呼び出すには、**this**を使用する。 

```java
public Hero(String name){ //コンストラクタ① 
    this.hp = 100; 
    this.name = name;
}
public Hero(){ // コンストラクタ②(①を呼び出している)
    this("ダミー");
}
```



次回、継承について。
AWS Gamedayに参加してきたのでメモメモ

どうもこんにちは。

今回は9/7（木）開催された **AWS Gameday** についてメモしていきたいと思います。

# 概要

AWS Gamedayについて[公式ページ](https://aws.amazon.com/jp/gameday/)があるため、そちらを参照させていただきながら説明します。

ただし、詳細を公開することは禁じられているので、かなりぼかして記載します。

（ところどころ解釈しやすいように和訳をいじっています。）

## AWS Gamedayについて

AWS GameDayは、参加者がチームとなって実際の技術的な問題を解決するために、AWSのソリューションを使用してゲームに挑戦する学習イベントです。一般的なワークショップとは異なり、参加者は自由に原因を探して、最適解を追い求めることができるイベントとなっています。

> 公式ページ参照
> AWS GameDay is a gamified learning event that challenges participants to use AWS solutions to solve real-world technical problems in a team-based setting. Unlike traditional workshops, GameDays are open-ended and non-prescriptive to give participants the freedom to explore and think outside the box. 

## 私が参加した時の例

前述したようにかなりぼかしてどんな感じのシナリオだったか説明します。

1. 私たちは仮想会社に所属していて、その会社のビジネスのためにシステムの構築から運用までを行う。
1. 構築・運用したシステムを使用して、顧客のニーズに応えられればポイント加算
1. ニーズに応えられなければポイントは減算
1. 構築や運用のための説明書をとにかく読むべし
1. 役割分担をきっちりとして効率よく進めましょう

紹介できる内容はこんなところでしょうか。。。

# 感想

## 参加してよかったこと

### 普段の業務で触らないサービスを体験することができる

まずはこれが一番ですね。ハンズオンでも同様のことが言えますが、AWSのイベントでは普段触らないサービスを触れることが一番のメリットに感じます。

### 用意していただいた環境でさまざまなトラブルに直面・対応することができる

Gameday参加の一番の強みはこれだと思います。

自分は普段はElasticBeanstalkしか触らないので、使い慣れていないサービスでトラブルが起きたらパニックになりますが、環境自体は用意していただいているのでめちゃくちゃにいじってもその日限りなので問題なし！というメリットがあります。

### 同じチームの人の特徴がわかる

自分は会社で参加したので、チームの人は会社の先輩でしたが、先輩が何に強くて何に弱いのかというのが会話をしている中でよくわかります。

普段の業務以外で、お互いをよく知れるという点では良い機会になります。

### できなかったら悔しい、できたら嬉しい

やっぱりゲームなので、できなかったら悔しいですし、できたら嬉しいです。やっぱり大人になってもゲームが好きという気持ちは子供の時のままですね。。。(笑)

# まとめ

初めてGamedayに参加しましたが、まとめるとこんなイベントです。

「 **仮想会社のビジネスのためにシステムを構築・運用・障害対応してポイントを稼ぐゲーム** 」

- 難しかった
- 楽しかった
- また挑戦したい

の3つの感想がぴったりのイベントだったなと思います。

また先輩たちと参加できたら嬉しいなぁという気持ちを持って今回のメモは終わりです！
PMP資格受験理由、及び受験手順

こんにちは、ちゅらデータ SE きたっぴです。

先日、PMIが認定しているプロジェクトマネジメントに関する国際資格であるPMP(プロジェクトマネジメント・プロフェッショナル)の受験を行いました。
自身の振り返りの記録として、ここに記しておきたいと思います。

# PMP資格受験理由
私は昨年9月にちゅらデータ株式会社へ転職を行いました。
転職後、様々な方々とプロジェクト管理の方法に関してお話しする機会があったのですが会話の内容が半分程度しか理解できず、「これはまずいな」と感じることがありました。
転職前の会社では我流ではありましたが少人数でのプロジェクトのマネジメントを行っておりました。ただ、我流であったためPMBOK等体系的にプロジェクト管理を纏めた知識はほとんど把握できていませんでした。しかし、これを把握することで、これまでの知識の不足を補うことができると考え、PMBOKの勉強を始めることにしました。
勉強を行うなら目標を高く持つべきと考えたためPMP資格取得を目標として学習することにしました。

# PMP受験手順
様々なブログで受験条件を纏めている方がいらっしゃいますが、ここでは実際に私が受験登録を行ったまでの一部始終を記載させて頂ければと思います。

### 受験のための必須条件(1)
35時間の公式プロジェクトマネジメント研修の受講。
本研修はオンラインまたはオフラインで行うことが可能です。「PMP 研修」でググると多くのプログラムを発見できるのでお好きな研修を受けてみるといいと思います。ただ、お金は結構かかります。オンラインであれば5万程度、オフラインであれば20万程度がボリュームゾーンだったと感じます。
この時点で私はPMBOKについての書籍をかなり読んでいたため、復習レベルの学習に10万単位のお金はかけられないと判断したため、オンラインでの研修を受けました。
ただ、PMBOKについてこの時点で概要自体が分かっていない場合はオンライン講習を受けるべきかなと考えます。理由は、講師が講習をしてくれるため不明点をすぐに解説してくれる（らしい）ためです。
実際にオンライン講習を受講したわけではないので、すごく効果的であったという説明は出来ないです。興味がある方は、オンライン講習比較サイトも山ほど御座いますのでそちらで比較されると宜しいかなと思います。

### 受験のための必須条件(2)
1. 大学院卒業またはそれに相当する資格保有者。直近8年間に2年以上のプロジェクトマネジメント経験があること。
2. 大学卒業またはそれに相当する資格保有者。直近8年間に3年以上のプロジェクトマネジメント経験があること。
3. 高校卒業またはそれに相当する資格保有者。直近8年間に5年以上のプロジェクトマネジメント経験があること。

私の場合は、2に該当しておりました。幸いにも前職でちょうど3年程度のマネジメント経験が御座いましたのでクリアすることが出来ました。
※以下で詳しく記しますが、ここでのマネジメント経験を詳細に英語で記載を行う必要が御座います。

### 受験申込方法
ここが、皆さん引っかかるところなのではないでしょうか。
以下で、受験申込方法について詳しく解説できればと思います。
1 https://www.pmi.org/ へアクセスし、アカウントの作成を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070340/e00295ae-3580-55ab-914d-51d877de18b5.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070340/570a27b0-7ab7-eb4e-c5c0-862636fcb7d3.png)

2 https://www.pmi.org/certifications/project-management-pmp にてPMP試験申込申請を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070340/6f1332a7-51b3-6798-71d0-57b333836ba6.png)

2.1 受験のための必須条件(1)の情報を記入。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070340/63dab699-9504-6fc2-6d9a-19959e9b2a36.png)

2.2 受験のための必須条件(2)の情報を<b>英語</b>で記入。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070340/753e38cd-4305-3344-674e-db9f9f5504a8.png)

2.3 記入事項全記入後に申請要求。
ここはスクショを取っていませんでした。申し訳ないです。

3 申請後、5日間待つ。
申請後、PMIの担当者が内容の確認を行うため5日間程度のインターバルが必要となります。
ここで申請OKとなれば365日の試験期間を貰えます。この間に受験費用の支払いを行い、試験場所/試験日の予約を行いましょう。
申請NGとなった場合は、再提出を求められると思いますのでNG部分修正後、再申請をお願いします。

### 受験申込での注意点
1 受験のための必須条件(2)は、1プロジェクトにつき最低100単語での説明が必要となります。英語が苦手な方は、受験のための必須条件(1)でプロジェクト経験の英語への翻訳をオプションとしているプロジェクトマネジメント研修を受講という手段もございます。苦手な個所はお金で解決する。いいことだと思います。

2 適切な内容を申請しても、OKとならない場合があるようです。完全ランダムで数%の申請に対して監査を行っています。監査対象に選ばれた場合は、自身の学歴証明、受験のための必須条件(1)にて受講したプロジェクトマネジメント情報、これまでの自身のプロジェクトマネジメント経験を証明するための同僚のサインの提出が必要となるようです。

本記事ではPMP資格受験理由、及び受験手順について説明を行わせていただきました。
次回はどのような勉強方法を行ったのかについて説明できればと思います。
Golangのデータフレームライブラリでデータの結合処理

Golangのデータフレームライブラリ [QFrame](https://github.com/tobgu/qframe)を扱っています。

高速でメソッドチェーンができるのが気に入っているのですが、込み入ったことをしようとすると複雑なコードを書かなければならなくなり、割と大変でした。

この記事では２つのデータフレームの結合を行いたい場合のなんとかやってみたコードを書きました。

サンプルデータのtestpidとteststockを左結合したいです。
要するに、teststockに品名と型式の情報をtestpidから持ってきたいのです。

```go
package main

import (
	"fmt"

	"github.com/tobgu/qframe"
)

var (
	testpid = qframe.New(map[string]interface{}{
		"品番": []string{"AAA-100", "AAA-200", "AAA-300", "BBB-100", "BBB-210"},
		"品名": []string{"製品1", "製品2", "製品3", "製品4", "製品5"},
		"型式": []string{"型式A", "型式B", "型式C", "型式D", "型式E"},
	})
	teststock = qframe.New(map[string]interface{}{
		"品番":   []string{"AAA-100", "AAA-200", "BBB-210"},
		"在庫数":  []float64{1, 2, 3},
		"在庫単価": []float64{100, 1000, 10000},
	})
)

type (
	// Parts : 品番マスタに登録されている
	// 品名と型式情報を品番で管理する
	Parts struct{ Name, Type string }
	// PartsMap : 一意な品番をキーにした品名と型式のマップ
	// PartsMap[品番] で品名と型式が返される。
	PartsMap map[string]Parts
)

// convertToNonPointerSlice : []*string -> []string
func convertToNonPointerSlice(ptrSlice []*string) []string {
	nonPtrSlice := make([]string, len(ptrSlice))
	for i, ptr := range ptrSlice {
		nonPtrSlice[i] = *ptr
	}
	return nonPtrSlice
}

func main() {
	// 品番をキーにしたのマップを作る
	pmap := make(PartsMap, testpid.Len())
	pids := testpid.MustStringView("品番")
	names := testpid.MustStringView("品名")
	types := testpid.MustStringView("型式")
	for i := 0; i < pids.Len(); i++ {
		// ItemAtが返すのはポインタであることに注意
		pid := pids.ItemAt(i)
		pmap[*pid] = Parts{*names.ItemAt(i), *types.ItemAt(i)}
	}

	// 品番に紐づいた品名、型式を追加
	ss := teststock.MustStringView("品番").Slice()
	// stockPidsの型が[]*stringであることに注意
	// Slice()はポインタのスライスを返す。
	stockPids := convertToNonPointerSlice(ss)
	// QFrameを作るためのmapを作成
	newData := map[string]interface{}{"品番": stockPids}

	// 品番をキーにしたマップから品名と型式を引く
	stockNames := make([]string, len(stockPids))
	stockTypes := make([]string, len(stockPids))
	// 品名と型式を在庫品番と同じ長さの配列に入れる
	for i, pid := range stockPids {
		stockNames[i] = pmap[pid].Name
		stockTypes[i] = pmap[pid].Type
	}
	// newDataへ品名, 型式のスライスを追加
	newData["品名"] = stockNames
	newData["型式"] = stockTypes
	// newDataへ在庫情報を追加
	for _, name := range []string{"在庫数", "在庫単価"} {
		f := teststock.MustFloatView(name)
		newData[name] = f.Slice()
	}
	qf := qframe.New(newData)
	fmt.Println(qf)
	/*
		品名(s) 品番(s) 在庫単価(f) 在庫数(f) 型式(s)
		--------- --------- --------------- ------------ ---------
		製品1   AAA-100             100            1   型式A
		製品2   AAA-200            1000            2   型式B
		製品5   BBB-210           10000            3   型式E

		Dims = 5 x 3
	*/
}
```

コードの流れは、
1. 品番をキーにしたマップを作ります。
1. 在庫データの品番だけを抜きます。
1. 在庫データの品番に基づいた品名と型式を「品番をキーにしたマップ」から引きます。
1. 在庫データの品番列と、品名、型式をmapにします。
1. mapに在庫の数量と単価の列を加えます。
1. mapからQFrameを作成します。

ただの左結合なのにmapを作ったり、しかもそのマップは一般化できなかったりと、扱いづらさを感じるのでした。

フォローになりますが、QFrameの簡単な操作自体は列ごとに型がきちんと決まっていて、軽量で扱いやすいことは間違いないです。

しかしながら、グループ化や結合といった処理は複雑になりがちなので、pandasを使いたい、と思いました。
Vite環境でのenvファイルの読み込み方

 ## エラー内容

開発環境はViteを使用しています。トップページにアクセスした時にcsrfトークンを付与するために環境変数を参照しようとしたら以下のエラーが検出されました。

```
Uncaught ReferenceError: process is not defined
```
この時にコード内に記述していた記述は下記になります。

`${process.env.REACT_APP_API_URL}/csrf`　

## 原因調査

直感的ではあるのですが、Viteが関係してるのではないかと感じました。そして、調査したところ公式ページにも解説されてました。下記が参考ページになります。
https://ja.vitejs.dev/guide/env-and-mode.html

## 解決方法
解決法は以下になります。

`${import.meta.env.VITE_REACT_APP_API_URL}/csrf`　

と記述する必要がありました。envファイル内に記述されている環境変数の先頭に`VITE_`と付ける必要がある。また、`import.meta`の後に今まで通りの記述をする必要がありました。

また、TypeScrptを用いている場合は、vite-env.d.tsファイルを下記のように追記する必要があります。
```vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_REACT_APP_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
```
以上の変更により、Vite環境で環境変数を使用することができました

## 参考記事
https://ja.vitejs.dev/guide/env-and-mode.html
【高先さんの電子工作】第17回：スライドスイッチを使って電子回路の安定性について考察する

https://youtu.be/zlhBux7eQZo

スライドスイッチを使って基盤上のLEDを操作しています。

```python:main.py
from machine import Pin
from utime import sleep

led = Pin('LED', Pin.OUT)
button = Pin(16, Pin.IN)

while True:
    if button.value() == 1:
        led.off()
    elif button.value() == 0:
        led.on()
    sleep(0.1)

```
Dataverseのビジネスルール、ビジネスロジック、業務プロセスフロー、ワークフローの違いの備忘録

Dataverseには、ビジネスルール、ビジネスロジック、業務プロセスフロー、ワークフローという4つの重要な概念があります。これらは、アプリケーションを作成する際にデータや動作を制御するためのツールや方法として使用されます。各種違いを簡単にわかりやすく記載します。説明部分はChatGPTに補助してもらいました。

## 1. ビジネスルール (Business Rules)

ビジネスルールを想像してみてください。これは、学校の校則のようなものです。例えば、「ランニングシューズは赤色でなければならない」という校則があるとします。この校則は、生徒がどのようなシューズを履いて学校に来るかを決めるルールですね。

Dataverseのビジネスルールも同じようなものです。アプリケーション内でデータを入力する際のルールを設定することができます。例えば、「顧客の電話番号は10桁でなければならない」というルールを設定することができます。これにより、誤ったデータの入力を防ぐことができます。

## 2. ビジネスロジック (Business Logic)

ビジネスロジックは、アプリケーションがどのように動作するかを決定する命令の集まりです。これを、お料理のレシピに例えてみましょう。レシピには、材料とその調理方法が書かれていますよね。このレシピに従って、料理を作ることができます。

同様に、ビジネスロジックはアプリケーションの「レシピ」のようなものです。例えば、商品の価格と数量から、合計金額を計算するロジックを設定することができます。

## 3. 業務プロセスフロー (Business Process Flow)

業務プロセスフローは、あるタスクを完了するためのステップや手順を示すものです。これを、宝探しの地図に例えてみましょう。地図には、宝を見つけるためのヒントや手順が書かれています。

業務プロセスフローも同じように、ある目的を達成するための手順を示しています。例えば、商品を購入する際の手順や、新しい顧客を登録する際の手順などを設定することができます。

## 4. ワークフロー (Workflow)

ワークフローは、特定の条件が満たされたときに自動的に実行されるアクションの集まりです。これを、自動ドアに例えてみましょう。あなたが自動ドアの前に近づくと、ドアが自動的に開きますよね。

同様に、ワークフローも特定の条件が満たされたときに、自動的にアクションを実行します。例えば、新しい顧客が登録されたときに、自動的にウェルカムメールを送るようなワークフローを設定することができます。

ここまで読んでくださりありがとうございます！
【解決】Gmailに転送したメールが550-5.7.26等ではじかれてしまう問題

DNSと転送元のサーバーでSPF、DKIM、DMARC等を整備しましたが、状況は変わらず途方に暮れていましたが

:::note info
転送をやめてGmail側からPOP3でメールをとりにいく
:::
事で解決しましたので、ご報告いたします。

Gmailの
設定 > アカウントとインポート > 他のアカウントのメールを確認
にてPOP3の設定が行えます。
IBM Cloud: Classic InfrastrutcureのCitrix VM Tools（Xentools）を9.3.1にアップグレードしてみた

# 1. はじめに

Citrix VM Tools（Xentools） 9.1.5を利用していたら、古いので更新するような通知が来たため、2023年9月14日付で一番新しい9.3.1にアップグレードしてみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/61bf85c5-ca07-0c2e-4400-c08db47bba5f.png)

Citrix VM Tools（Xentools） 9.3.1の詳細情報は以下のとおり。

- https://support.citrix.com/article/CTX235403/updates-to-citrix-vm-tools-for-windows-for-xenserver-and-citrix-hypervisor
- Management Agent 9.2.1.35
- xenbus 9.1.5.54
- xeniface 9.1.5.42
- xennet 9.1.3.34
- xenvbd 9.1.4.37
- xenvif 9.1.8.58

# 2. 更新方法

基本は以下の手順に従えば良い。

https://www.ibm.com/blogs/solutions/jp-ja/citrix-vm-tools%ef%bc%88xentools%ef%bc%89update-2-5/

`http://downloads.service.softlayer.com/citrix/xen/`より、citrix-vm-tools-9.3.1.zip をダウンロードする。このファイル内に`managementagentx64.msi`が含まれている。（このURLはClassic Infrastructure内部のprivate networkからしか接続できない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/1fcc66c6-13ae-0f07-1957-b3e855cc9a8d.png)

# 3. 更新後の情報

- Programs and Features ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/3efdf6d0-3f2b-aaa9-2b52-da1c2d519ce9.png)
- Device Managers 
    - Network Adapter: 
        - xennet 9.1.3.34 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/5dfbef98-9c57-8df7-316a-64fa44f61c0d.png)
    - Storage Controller: 
        - xenvbd 9.1.4.37 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/2ce75d26-3e24-7939-3bfe-c3dc5089f3e0.png)
    - Xen Server Interface: 
        - xeniface 9.1.5.42 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/c286da8a-ee01-391e-f3e1-9f246c33c0ab.png)
    - Xen Server PV Bus(0002): 
        - xenbus 9.1.5.54 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/3675e28d-dd46-3079-92f8-15e15e77fa4a.png)
    - Xen Server PV Bus(C000): 
        - xenbus 9.1.5.54 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/91d67e34-a48b-82a6-92fd-f3e51480ab30.png)
    - Xen Server PV Network Class
        - xenvif 9.1.8.58 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/99fbef01-f751-6d26-c649-63499a9668cc.png)



ちなみに、[この記事](https://dev.classmethod.jp/articles/about-system-drivers-on-windows-ec2/)によると、Windows Server 2016以降だと以下コマンドが便利である。

```powershell:個別のドライバーのバージョン取得コマンド
# Windows Server 2016 以降
Get-CimInstance -ClassName Win32_SystemDriver |
    Where-Object { $_.Name -in ('xenbus', 'xeniface', 'xennet', 'xenvbd', 'xenvif') } |
    Select-Object Name, Caption, @{Name = 'Version'; Expression = { (Get-Item $_.PathName).VersionInfo.FileVersionRaw.ToString() } }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/c1c221cd-d8ec-e055-1dd3-4e5377715a30.png)
情報セキュリティと暗号技術

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/1669f478-27ea-f463-7613-91261e8a2fc4.png)
１：情報セキュリティ活動を行う組織
　情報セキュリティに関する活動を行っている代表的な組織をまとめます。

①JPCERT/CC(JPCERTコーディネーションセンタ)
　インターネット上にで発生するセキュリティインシデントについて、日本国内での報告受付や対応の支援、手口の分析、再発予防策の検討・助言などを、技術的な立場から行う組織です。

②J-CSIP（サイバー情報共有イニシアティブ）
　セキュリティ情報の共有と早期対応を行うためにIPA（情報処理推進機構）が中心となって確立したセキュリティ情報共有体制です。

③J-CRAT（サイバーレスキュー隊）
　標的型サイバー攻撃の被害拡大を防止するためにIPA（情報処理推進機構）が発足させた組織です。企業などから標的サイバー攻撃に関する相談を受け、被害拡大を防ぎ、攻撃を拡大させないための支援を行います。

④NISC（内閣サイバーセキュリティセンタ）
　サイバーセキュリティ基本法に基づき、内閣官房に設置されている情報セキュリティ政策に関する総合的な調整を担う組織です。

⑤JVN（Japan Vulnerability Notes）
　日本で利用されているソフトウェアなどの脆弱性とその対策に関する情報を提供しているポータルサイトです。JPCRET/CCとIPAが共同で運営しています。

⑥CRYPTREC
　暗号技術の安全性、実装性、利用実績の評価、兼乙を行う組織です。
「電子政府における調達のために参照すべき暗号リスト」を公表し、現時点で利用が推奨される暗号規格やハッシュ関数などを示しています。

⑦CSIRT
　企業や政府機関内で、情報セキュリティインシデントに関する報告を受け取って調査し、対応活動を行う組織です。多くは、企業内に「セキュリティ問題対策チーム」といった位置付けで設置されたものをCSIRTと呼んでいます。

２：暗号技術
　暗号とは、情報の内容を第三者には読み取れないように変換することです。シーザー暗号と呼ばれるものもあるほどで、古代ローマのシーザーの時代にはすでに使われていました。
　暗号分野では、変換する前の誰が見ても内容が読み取れる情報を平文と言います。変換後の第三者には内容が読み取れない情報を暗号文と言います。平文から暗号文を作ることを暗号化と言います。暗号化には、鍵（パスワード）を使います。逆に、暗号文を平文に戻すことを復号と言います。復合にも鍵（パスワード）を使います。
　暗号化と復合に同じ鍵を用いる暗号方式を共通鍵暗号方式と言います。暗号化と復合に異なる鍵を用いる暗号方式を公開鍵暗号方式と言います。

３：鍵の危殆化
　暗号は「鍵が命」です。鍵は第三者の手に入ってしまうと、情報の内容は、第三者に曝け出されてしまいます。鍵が第三者の手に渡ってしまい、鍵としての役割を果たせないくなった状態を鍵が危殆化と言います。鍵の危殆化は、
・うっかりミスで第三者に鍵に鍵を教えてしまった。
・第三者が鍵を盗み取った
などの他にも、

・当てずっぽうで、偶然当てた（推測）
・コンピュータですべて試して調べ出した（総当たり）
などでも起こります。したがって、鍵は、

・第三者に盗まれないよう厳重に管理する
・第三者に簡単に推測されないようにする
・全て試せないほどに種類がたくさんある（鍵の桁数が長い）ものにする
必要があります。
react

import React, { useState } from 'react';

interface ArrayCounterProps {
  initialArray: any[]; // ここで配列の型を指定してください
}

const ArrayCounter: React.FC<ArrayCounterProps> = ({ initialArray }) => {
  const [array, setArray] = useState<any[]>(initialArray);
  const [count, setCount] = useState<number>(initialArray.length);
  const [currentIndex, setCurrentIndex] = useState<number>(0);

  const handlePrevClick = () => {
    setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
  };

  const handleNextClick = () => {
    setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, count - 1));
  };

  const currentElement = array[currentIndex];

  return (
    <div>
      <p>要素数: {count}</p>
      <button onClick={handlePrevClick}>前へ</button>
      <span>{currentElement}</span>
      <button onClick={handleNextClick}>次へ</button>
    </div>
  );
};

export default ArrayCounter;