OmniAICreator/Qiita-1.07M huggingface dataset:
HP Elite Dragonfly G2にChrome OS Flexを入れてみた

##発表されました

Googleさんから「[Chrome OS Flex](https://chromeenterprise.google/os/chromeosflex/)」が発表されました。
これまで、無料のChrome OS(っぽいもの)といえばCloudReadyでしたが、2020年にこちらをGoogleさんが買収してからどうやら拡張していらっしゃったらしいです。
CloudReadyとChrome OS Flexの大きな違いはブラウザ。Chromiumから公式Chromeがのっかったことになります。
パーソナルユースする分にはどちらにしてもあまり変わらない感じしてましたが、企業ユーザなんかが使うとなると大きな違いを発揮するのかもしれないすね。

##OS好き
ということで、実はOS好きの僕。
うずうずと新しいOS試してみたい欲求にかられました。
10年くらい前まではMeeGoがあったりSplashtop OSがあったりReactOSがあったり(今でもあんのかな?)面白かったんですよねえ。

でも、ここ10年、自宅ではmacしか使ってこない状況。
しかもなにかテストをしたいと思っても仮想環境で全部できちゃう世界になっているので、リッチなマシンに直接OSを書き込むこともない・・・

そんな状況のなか、ここ最近、macのBluetoothの不具合に嫌気を覚えていたところ、縁あってHP Dragonfly G2相棒に迎え、久しぶりの本格的Windowsにより、ああやっぱOSはいろんなの触った方がおもしろいなあと実感していたところです。

そして今回の発表。

ふつふつと、「**Chrome OS Flex書き込みたい!!**」という欲求にかられますw

と、いいうことで、余ったSSDを取り出し、マイバディDragonflyちゃんにChrome OS Flex書き込んでみましたw
ちなみにChrome OS Flexは動作検証されている端末一覧ってのがあるんですが、その中には当然入ってません。
また、僕は保証対象外よろしくSSDを一度換装してチャレンジしてますので、外付けUSBのなにかでやる場合とは動作が異なる場合があります。というか、保証対象外になるからやめといた方がいいよ()

ということで、どんな感じでやっていったかを振り返っていきます。

##やってみた
まずやったことといえば、WEBサイトにアクセスですw
Chrome OS Flexのサイトにアクセスすると「トライ!」みたいなこと書いてあったので、個人情報をgoogle様に上納したわけですが、正直このプロセスはいらないかもw
![スライド1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104684/69cfb3ae-8036-2684-bed9-abea95695183.jpeg)
入力してもヘルプサイトに飛ばされ、そこからうまいことやれと言われるだけなので、最初からChrome OSのリカバリユーティリティを入れた方がいいです。

Chrome OS リカバリユーティリティはChromeブラウザにプラグインでインストールするんですね。ストアで簡単にインストールできるのでインストール。さらっと起動しましょう。
![スライド2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104684/0f2f6b8d-4f12-8656-d0ab-5e54e3d77384.jpeg)

##Macでやる場合は癖がある?
リカバリユーティリティが立ち上がったら、あとは簡単。
8GB以上のUSBメモリをさして、Chrome OS Flexのリカバリメディア作成を選択したOKを押せば完了
![スライド3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104684/44c81b02-a41d-d709-0a62-e809dbdc2c4a.jpeg)

とっても簡単。
![スライド4.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104684/3763f448-fcfb-ab0e-de4e-ce69212e9a09.jpeg)

順調に進め、今すぐ作成!を押して鼻歌混じりで待っていたのですが、なぜだか一向に進まない。だがしかし僕は知っています。
こういう場合、大体Windowsでやるとうまく行く。
今回ドナーとなるべく、SSDを外していたDragonflyにもう一度Windowsの入ったSSDを入れ、Chromeを立ち上げー・・・うんサラッと完了w
ちなみにヘルプサイトにはSanDiskのメモリだとうまく動かないこともあるかもって書いてましたが、僕のUSBメモリは大丈夫でした。

##Hello World
再度DragonflyちゃんにテストSSDを差し直し、USBメモリからChrome OS Flexをインストール。インストール時間は6分程度。すぐ完了。

![スライド5.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104684/e7db7d9a-7c38-01bf-02d7-ecdf6148ba9c.jpeg)

バディがChrome OS Flexになった!!!!
もともと、性能の良いDragonflyちゃんなのでChrome OS Flexも爆速。なまら早いしキビキビ動く。こりゃテストってことではなく、そのまま実践投入してもよいかもなあと、ちらり考えがよぎったのですが現時点では

- タッチディスプレイ OK
- WiFi OK
- プリンタ OK
- 指紋認証 NG
- 5G(LTE)通信 NG

ってことで、Dragonflyのいいところを全て消してしまっているので断念。
もしかしたら、ワンチャン正式版になったらドライバーなんかの準備がされる可能性はなきにしもあらずかもしれませんけど
一番致命的だったのは再起動やシャットダウンが正常にできないというところでしたw

やっぱうちのDragonflyちゃんはそのままWindows11でいってもらお!
でも、ChromeOS いいですね。ちゃんとしたChromebook手に入れたい。
【Elasticsearch】ES 8.0.0でcerebroを使用

Elasticsearch 8.0.0から初回起動時に自動でセキュリティ関係の設定が入るようになり、cerebroを繋ぐのにひと手間必要だったのでメモ。

# 環境
- Windows10
- PowerShell 5.1.19041.1320
- Elasticsearch 8.0.0
- cerebro 0.9.4

# Elasticsearch 初回起動
```
PS C:\elasticsearch-8.0.0\bin> .\elasticsearch.bat
```

初回起動時のコンソールに以下のようなセキュリティ関係のメッセージが表示されるので、内容を控えておく。

```
------------------------------------------------------------------------------------------------------------------------
-> Elasticsearch security features have been automatically configured!
-> Authentication is enabled and cluster connections are encrypted.

->  Password for the elastic user (reset with `bin/elasticsearch-reset-password -u elastic`):
  xxxxxxxxxxxxxxxxxxxx

->  HTTP CA certificate SHA-256 fingerprint:
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

->  Configure Kibana to use this cluster:
* Run Kibana and click the configuration link in the terminal when Kibana starts.
* Copy the following enrollment token and paste it into Kibana in your browser (valid for the next 30 minutes):
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

->  Configure other nodes to join this cluster:
* On this node:
  - Create an enrollment token with `bin/elasticsearch-create-enrollment-token -s node`.
  - Uncomment the transport.host setting at the end of config/elasticsearch.yml.
  - Restart Elasticsearch.
* On other nodes:
  - Start Elasticsearch with `bin/elasticsearch --enrollment-token <token>`, using the enrollment token that you generated.
------------------------------------------------------------------------------------------------------------------------
```

# cerebroのapplication.confを修正
以下を追記。

```
play.ws.ssl {
  trustManager = {
    stores = [
      { type = "PEM", path = "[Elasticsearchのインストールフォルダ]\\config\\certs\\http_ca.crt" }
    ]
  }
}
```
Elasticearchとcerebroのサーバが別々の場合、`http_ca.crt`をcerebroのサーバ内へコピーしてきたうえでそこへのパスを各必要がありそう。未確認。

# cerebro起動、ログイン
`https`でElasticsearchへアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553128/9d0ac32b-9cd1-8fe7-c6ed-e6d0f1b2a893.png)

ユーザとパスワードを聞かれるので以下を入力。
- `elastic`
- `Elasticsearch初回起動時に表示された「Password for the elastic user」の下のパスワード`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553128/429b773d-d53e-1173-bce7-e1e7f9acc7cd.png)

ログインできた。
以上。
ssh接続できないときの確認事項

##SSH接続できなくてはまったので備忘録   

エラー文

```
Permission denied (publickey,gssapi-keyex,gssapi-with-mic)
```

### 結論パスワード認証が無効になっていただけでした。
* /etc/ssh/sshd_confの`PasswordAuthentication no`を`PasswordAuthentication yes`に修正

* エラー文を検索して公開鍵やらなんやら調べてましたが、結局上記の対応で解決しました。こうゆう些細なエラーではまったちゃうのなんとかしたい。。。
いざ原因がわかると拍子抜けですが、なかなか解決しない。。
【Flutter】Android実機でワイヤレスデバッグする方法

# TL;DR

- Adnroid端末で [設定] > [システム] > [開発者向けオプション] > [デバッグ] > [ワイヤレス デバッグ] をON
    - ペア設定コードによるデバイスのペア設定
       - 「Wi-Fiペア設定コード」・「IPアドレスとポート」を確認
- 以下のコマンドに確認した内容を入力
```bash
$ adb pair HOST[:PORT] [PAIRING CODE]
Successfully paired to HOST:PORT [guid=xxxxxxxxxxxxxxxxxx]
```

# 実行環境
```bash
$ adb --version
Android Debug Bridge version 1.0.41
Version 32.0.0-8006631
Installed as /$HOME/Library/Android/sdk/platform-tools/adb

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.0, on macOS 12.1 21C52 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.64.2)
[✓] Connected device (2 available)

$ flutter devices
2 connected devices:

Pixel 6 Pro • xxxxxxxxxxxxxxxxxx • android-arm64  • Android 12 (API 31)
Chrome • chrome • web-javascript • Google Chrome 98.0.4758.102
```

# そもそもワイヤレスデバッグとは

~~一部Macデバイスのように外部接続端子が2ポートしかなく~~ 既にポートが埋まってるような場合でも、無線で実機のデバッグが可能となる魅力的な機能です
> Android 11以降では、Android Debug Bridge（adb）を使用してワークステーションからアプリをワイヤレスでデプロイ、デバッグできます。たとえば、USB経由でデバイスを物理的に接続することなく、デバッグ可能なアプリを複数のリモートデバイスにデプロイできるため、ドライバのインストールなど、USB接続に関する一般的な問題に対処する必要がなくなります。

[公式より引用](https://developer.android.com/studio/command-line/adb?hl=ja#connect-to-a-device-over-wi-fi-android-11+)

# 準備
## adbのインストール
公式サイト・Android Studioのいずれかを経由してインストール可能です

https://developer.android.com/studio/releases/platform-tools?hl=ja

Android Studioからインストールする場合は、以下の画像を参考
- Preferences | 外観 & 振る舞い | システム設定 | Android SDK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107176/66ff496c-8815-06fb-e056-d227b7f6e14e.png)

## Android側の設定
OSのバージョンや端末ごとで操作が様々なので、各々自身の端末に合った操作を以下のサイトから確認してください

### Android 11以降の場合
https://developer.android.com/studio/command-line/adb?hl=ja#connect-to-a-device-over-wi-fi-android-11+

### Android 10以前の場合
https://developer.android.com/studio/command-line/adb?hl=ja#wireless

# 接続までの流れ
`Google Pixel(Android 12)` でワイヤレスデバッグするまでの例（他端末でも基本的な操作は同じ想定）

### ① [設定] > [システム] > [開発者向けオプション]　> [ワイヤレス デバッグ]　

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107176/2ad6b673-8afd-56c8-a037-cc3041c12f19.png" width="60%">

### ② ペア設定コードによるデバイスのペア設定を押下
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107176/c4fc45c8-c9f8-686d-2a32-5656ba851684.png" width="60%">

### ③ adbコマンドを実行
```bash
$ adb pair HOST[:PORT] [PAIRING CODE]
Successfully paired to HOST:PORT [guid=xxxxxxxxxxxxxxxxxx]
```

### ④ 接続成功の通知を受信
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107176/7533639f-f3d5-ce2b-85a8-fa5cf3d3faef.png" width="60%">

ここまでの設定を行うと、次回からはペア設定コードを入力せずにAndroid端末でワイヤレスデバッグをONにするだけで自動的に接続されます

# おまけ
## ADB Interface for VSCode

VSCodeを使っている場合、こちらのプラグインを使うことで先程までの操作をエディタからいい感じにできそう

https://marketplace.visualstudio.com/items?itemName=vinicioslc.adb-interface-vscode
Windows PC マシン設定

こんにちは。
Windows PC マシンを設定しました。各種記事を参考にしました。

* 自動ログイン設定（参考：「[Windowsにて自動ログインさせる方法](https://qiita.com/SkyLaptor/items/2af58d09d0e0c1321acd)」）
* ping応答設定（参考：「[windows10のping](https://qiita.com/tangotarou2/items/2d5bc4244ede0a0c908f)」）
* winget導入（参考：「[winget がバージョン 1.0 へ到達](https://qiita.com/kkdd/items/66a23b9c0090fda3e819)」）
* UltraVNCサーバ導入（参考：同上）

Linux (WSL) 関係：

* WSL1導入（参考：「[Linux 環境構築手順（WSL環境上）](https://qiita.com/kkdd/items/db9c252c10ae88944fb6)」）
* Ubuntu-22.04導入（参考：同上）
* sshdサービス自動起動設定（参考：「[Windows10のWSL上にあるServiceを簡単に自動起動させる](https://qiita.com/nashi2603/items/d0645305b137017b91b0)」）
「マイクロサービスパターン」を読む会 第７回

- Java読書会の自分メモ
- せっかく勉強したのにつぎつぎと忘れておくので、印象に残ったところでも記録していく

http://www.javareading.com/bof/


## 8.3.3 GraphQL を使った API ゲートウェイの実装

- API GatewayをGraph QLで実現する話
- クライアント側でqueryの内容を変えられるので、graph qlのエンドポイントを一つ作るだけで様々な用途に対応できる
- rest apiだと、多少はパラメータ化できるものの、普通はいくつものapiをつくることになる
- GraphQL スキーマ

```
type Query {
  orders(consumerId : Int): [Order]
  order(orderId : Int): Order
  consumer(consumerId : Int): Consumer
}


type Order {
  orderId: ID,
  consumerId : Int,
  consumer: Consumer
  restaurant: Restaurant
  deliveryInfo : DeliveryInfo
  ...
}
```

- エンドポイントのところでtype Queryで定義されたクエリーを投げられる
- エンドポイントがリクエストを受けたあとは、バックエンドのマイクロサービス群に、必要なクエリーを発行して、情報をあつめてレスポンスを返す
- この例では、Order、Consumer、Restaurant、DeliveryInfoはそれぞれ別のマイクロサービスが担当している
- node.jsのApollo GraphQLというExpress上で動かせるフレームワークでの実装例が書いてある

## 9.1.2 マイクロサービスをテストすることの難しさ

- マイクロサービスに分けても、マクロサービス間の依存関係をテストでどう解決するか？
- コンシューマ駆動契約テストパターン
- 呼び出し側のテスト用のスタブと、呼ばれ側のドライバコードを両方生成するうまいやり方。
- まず呼び出し側が期待する「契約（Contract）」を宣言する
- 以下の例は呼ばれた側が、requestに対して、どのようなresponseを返すかを、呼ぶ側の視点で宣言する
- ここから2つのコードが生成される
    - スタブ：呼び出し側のテストに使える
    - ドライバ：呼ばれ側を実際に呼び出すのに使える

```
Contract.make {
  request {
    method ’GET’
    url ’/orders/1223232’
  }
  response {
    status 200
    headers {
    header(’Content-Type’: ’application/json;charset=UTF-8’)
    }
    body("{ ... }")
  }
}
```
- 以下の順番でプロセスを回す
    - 契約を宣言する（上記）
    - 呼ばれ側が、ドライバコードを生成・実行し、契約を処理できることを保証する
    - 呼び出し側が、スタブコードを使って自身のテストコードを記述する

- 個人的感想
    - 想定される呼び出し例を最初に宣言することで、呼び出し側・呼ばれ側双方のテストにつかうのはうまいやり方
    - 現実的には複数回の呼び出しがあった場合、呼び出し間の依存関係があって、固定値をリターンするだけではテストにならない
    - そのあたりを解決しつつ効率的にテストを書いていけるかが課題と思われる。
STM32L010のシリアルでHello Worldと出力 (RawSerial)(Keil)(STM32)


x Mbed2


目的
シリアルのテスト


資料


Serial - シリアル通信


https://os.mbed.com/users/okini3939/notebook/Serial_jp/


![o_con236.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/fbf5d141-d25e-b0d9-c10d-a36c81e56574.jpeg)


![o_con248.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/b417e7d2-0ec0-a393-8d3c-5320122d238e.jpeg)



```c++


#include "mbed.h"

RawSerial pc(PA_2, PA_3); //010

int main() {

    char *ss1; //文字のポインター
    int ii; //ループカウンター

    //無限ループ
    while(1) {

        ss1="Hello World !\r\n";
        ii=0; //ループカウンター
        while(ss1[ii]!=0){

            //一文字出力
            pc.putc(ss1[ii]);ii++;

        } //while

        //1秒の待ち
        wait_ms(1000);

    } //while
} //main




```
google colabでngrokを使ってAPI化したときにWelcome to ngrok!とか出るときの対処法

google colabでngrokを使ってAPI化したときにWelcome to ngrok!とか出たとき解決した方法を書いときます。
google colabでngrokを使ってAPI化することについて、詳しくは下の記事を読んでください
https://qiita.com/k_0214/items/dcf14c74779eb9839577


![スクリーンショット 2022-02-19 19.50.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795753/16649b43-4db3-1a42-7ba7-774ae93dfc98.png)


urlにアクセスした時にこんな感じの画面が出たときです。


#解決した方法

１：Sign up for an ngrok accountとか書かれてるとこをクリックします。

２：サインアップしてから、Your Authtokenとか書いてあるところに行ってCommand Lineとか書かれてるとこのコードをgoogle colaboratory で実行します。

```:こんな感じで
!ngrok authtoken -----your token------
```

ngrokのところはngrokのファイルのpathにしてください。
MyDriveの下にあった場合は`/content/drive/MyDrive/ngrok`とかにしてください。
STM32L010とKeil Studioでどうやったか覚えていないがLチカ


x Mbed2です。


目的
Mbedが終了予定の為


いろいろ
何の問題もなくコンパイル出来た。


![o_con248.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/1cdaaad1-cd23-f44f-80fb-fb84e5734222.jpeg)



資料


STM32L010でナイトライダー (Keil)(STM32L010F4P6)


https://qiita.com/caa45040/items/b6298b6aff66a9670804



![o_con235.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/5a2f426c-cc3d-d060-e600-2bd6d45d8542.jpeg)



Keil Studio Cloudを使ってみた



https://qiita.com/toyowata/items/2bc05c860dd547204a41



```c++


#include "mbed.h"

DigitalOut myled(PA_4);

int main() {
  while(1) {
    myled = 1;
    wait(0.2);
    myled = 0;
    wait(0.2);
  }
}


```
CDKってなに？AWSの公式動画見たからまとめた。

## ・CDKってなに？
CDKについては、ざっくりコードでインフラ構築できる、くらいに認識していたが、業務で触れることになったので一通り勉強したので備忘録としてまとめます。
AWSの公式がyoutubeに講演の動画をあげてくれてたのでそれをみてのまとめになります。
指摘などは大歓迎です。

https://youtu.be/1i7kWqpqtoY

## ・CDKとは
自分の慣れ親しんだコード(TypescriptやJava,Pythonなど)でインフラコードを記載できます。
今までは、jsonやyamlなどでインフラエンジニアが主に触るという認識でしたが、CDKによってフロントエンジニアやサーバーサイドエンジニアにも距離の近いものになった。

## ・CDK発祥の経緯
CDKもJSONのインフラコードも目的は一緒でシステムの環境を構築すること。
その手段としては、以下のものがある。
### コンソール:
　手動で簡単というメリットはありますが、デメリットとして繰り返し使えない、手動なのでミスが起きやすい、時間がかかる。

### cloudFormation:
jsonやyamlで環境を構築する。
今までのものとは、概念として少し違うのは、環境の状況を設定するということ。
例えばCloudFromationを利用して環境を構築した際に、こちらが想定している環境の状況があるが、
現状の環境との差分をAWS側で判断してくれて、差分を実行してくれる。

### Doms:
コードで作成できるのが今までのものとは違うところ。コードならではのロジック(if文やfor文など)が利用できる。
ただし、こちらの場合には抽象化という概念は備わっていない。

上記の踏まえて誕生したのがCDK。
CDKはコードかつ抽象化の概念が備わっている。

## ・CDKってなにしてくれるの？
コードからCloudFormationのテンプレートを作成してくれます。
で、そのままデプロイまでしてくれるという。

## ・CDKの良さ
* コードでインフラコードを書ける
* コードで書く際には、AWS側で用意されたライブラリがあるので取り組みやすい
* オープンソースなのでユーザー自身で発展させられる
* CloudFormationとの互換性もあり、コードから既存のCloudFormationの読み込みも可能

といった具合に、インフラコードをコードで書けるのに加えて、AWS側の容易してくれてるライブラリによってさらに導入のハードルは低くなっている。
CloudFormationとの互換性もあるので、今までの資産も無駄になることはない。

## ・どうやって始めるの
この部分は動画を実際に見た方がよいかと思います。
※タイトルが英語ですが、内容は日本語なので安心を。
1. 11:05 how to use AWS CDK(全体説明)
2. 11:30 環境の準備(詳細は13:10くらいから)
3. 17:00 Typescriptのdemo
4. 23:30 pythonのdemo
※他にもjava,C#でも紹介されています。
※個人的メモ：CDK内ではAWS CLIを利用しているため認証情報の設定が必要

## ・CDKのコアコンセプトについて
CDKに触れていると,App,Stack,Construct,Enviroment,Context,SSMが出てくるが、それらの要素がどのように関係しているのか。

### APP：
CDKのコードの中での最上位の要素。複数のStackとの依存関係を定義している。
###Stack：
デプロイ可能な最小単位。複数のConstructとの依存関係を定義している。
###Construct：
Stack内の1リソース。(S3,CloudWatchなど)
既存のConstructを継承して、独自のConstructを作成することもできる。

### Enviroment：
デプロイ先のアカウントとリージョンの組み合わせ。図では、appと紐づいている。

### Context：
各種パラメータをkey-value型で定義する仕組み。
CDKコードで既存リソースを取得可能。コンソールで作成したリソースに対して追加設定などもできる。

### SSM parameterStore / Secret Manager：
cdk synth時またはデプロイ時に値を取得する。
コードで特定の値を管理する場合にはcdk.jsonで管理できるが、複数人で管理したりする場合などには、ストアされた情報を共有で使うことができる。
いつあたいを持ってくるかについては、synthを実行した時や実際にデプロイするときなどは、設定できる。
___SecretManagerに関しては、基本的にセキュアなものを取り扱うが、記載場所を間違えると漏えいにつながるので要注意。___

## ・cdkのバージョンについて
1週間に1度くらいマイナーバージョンアップしているとのこと。
さすがに毎週アップデートは現実的ではないと思うので、チームでcdkのバージョン運用については話す方がよいと思います。

## ・ちょっと重要そうなメモ
トラブルがあった際には大体GitHubのIssuesに記載されてるのでそこを見てみるとよいとのこと。
https://github.com/aws/aws-cdk/issues

## ・CDK DIveDeepについて
CDK自体の開発(自分でパッケージ作成したりする人?)向けのお話らしいので私は見ていません。興味のある方は52:30くらいからどうぞ！
Bot 作成はじめの一歩を体験してみる！

無料で試せる、Automation Anywhereを触ってみました！
試すきっかけになれば幸いです😁
インストール方法が分からない方は、こちらの記事を参考にしてご準備いただければと思います！

https://qiita.com/inaho3517/items/63d7f11bdda456510da4#automation-anywhere
# まずは基本操作から
以下のブログの内容を、とりあえず触ってみることとした。

https://licensecounter.jp/engineer-voice/blog/articles/20200203_AutomationAnywhere-A2019-BuildTheFirstBot.html

# 勉強方法について
ブラウザのサイズを調整して、技術ブログを見ながら操作できるよう配置してみた。
ブログに説明されている、操作できるボタンなどは一通り触ってみることとした。
また、今後用語なども意識して使用していきたいと思うので、その点も注意しながら読んでみることとした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/cca17b34-fa8a-f67e-2c9a-67514002d4ca.png)

# １．Bot管理画面を開く
進化の早いソフトウェアの技術ブログの宿命だが、バージョンが違うのでブログの通りに操作というわけにはいかなかった。

こういう場合は独自に読み換えて試用していくしかない。

初学者の方はあきらめたくなってしまうかもしれないが、今後はこんな進化の早いソフトばかりだと思うので、ここは慣れていくしかないと思う。
といっても、そんなに大幅に変わっているわけではないので、この部分は簡単に読み換えは簡単だった。

まずは画面構成と操作。とりあえずボタンの上にマウスポインターを置いてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/f9bdd5e2-2208-fafb-94fe-548ee47be446.png)
吹き出しでアイコンの意味が出てくるので分かりやすい。
日本語に対応しているので操作もしやすそうだ。

ブロク上では、よく操作する内容に絞って記載がされている。ありがたい。

# ２．Bot編集画面を開く
早速Botの新規作成から解説されている。
当然ながら、編集画面も前のバージョンと多少違っていたが、Bot作成者に優しいレイアウトになっている。

シンプルで見やすいのは本当にありがたい。

RPAツールで編集画面の呼び名が異なるので、ここは確認が必要。
ワークベンチ、アクションパネル、ビュー……今のところなじみがないが、慣れていきたい。

# ３．Botを作成する
新規作成で編集画面を開いてからの操作を実施。
アクションの**配置方法は２種類**ある……か。

方法１：画面左のアクションパネルからアクションをビューの上にドラッグ&ドロップで配置
方法２：ビュー上のメニューにある記録ボタンを押下してから操作することで自動配置させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/34b85980-f9ba-4d94-207d-eb50a96ec613.png)

どのRPAもだいたいこの２種類で作成ができる。
同じ方法で作成できるのはうれしい。

方法１は[インストール時](https://licensecounter.jp/engineer-voice/blog/articles/20191118_AutomationAnywhere-FreeTrial-A2019.html#section4)に実施していたのね💦
今回の記事は方法２について詳しく説明が入っている様子。
レコーディングの操作はかなり独特のようで詳しく操作が記載されている。

実行してみると、現在はレコーディングの方式が２種類に分かれているようだ。
ここは慌てず、画面下の[▶ Learn about……]の内容を読んでみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/3bd3d3bc-6c15-6d71-18fb-a96baf0c0c56.png)
英語での記載ではあるが、なんとか読解できた。
普通にブラウザをレコーディングしたいなら、UniversalでOKなのか。
試しに新しいブラウザを開いてYahooのページを開くBotを作成して実行ボタンを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/6495fe58-c822-7b5b-6888-182ed3b721f5.png)

無事にレコーディングは出来たようだ😄✨

# 本日の学び
１．バージョン違いによる読み換えスキルは必須。
２．別ツールとの用語の違いに注意！
３．レコーディングは２種類ある。今のところUniversalでOK。
Spring Data JPAでJPQLを書かずにJOINさせる

## 概要
Spring Data JPAで`findAll()`、`findById(id)`実行時にJOINさせるようにし、N+1問題が起きないようにする。
JPQLは使わないで実現する。

## Service
以下のようにそれぞれを呼び出す。以下の例ではpagingを実装しているが、していない場合でも同じ。

```java:UserService
@Service
@RequiredArgsConstructor
public class UserService {

    private final UserRepository UserRepository;

    public Page<UserModel> findAll() {
        // paging
        Pageable limit = PageRequest.of(0, 10);
        return UserRepository.findAll(limit);
    }

    public Optional<UserModel> findById(Long id) {
        return UserRepository.findById(id);
    }
}
```

## UserModel
`findById()`をjoinさせるためには、 `@Fetch(FetchMode.JOIN)`アノテーションを付与すればOK。
`findAll()`は、`@NamedEntityGraph`を使う。nameには任意の名前を定義する。

```java:UserModel
@Entity
@Getter
@Table(name = "users")
@NamedEntityGraph(
        name = "group_with_all_associations",
        includeAllAttributes = true
)
public class UserModel {

    @Id
    private Long id;
    @Column(name = "user_name")
    private String userName;
    @Column(name = "group_id")
    private Long groupId;

    @ManyToOne
    @JoinColumn(name = "group_id", referencedColumnName = "id")
    @Fetch(FetchMode.JOIN)
    private GroupModel groupModel;

}
```

## GroupModel
こちらは特筆すべきことはなし。

```java:GroupModel
@Entity
@Getter
@Table(name = "groups")
public class GroupModel {

    @Id
    private Long id;
    @Column(name = "group_name")
    private String groupName;
}
```

## UserRepository
UserModelの`@NamedEntityGraph`のnameの値を、以下のように`@EntityGraph`のvalueに定義する。
これで`findAll()`もjoinされる。

```java:UserRepository
public interface UserRepository extends JpaRepository<UserModel, Long> {

    @EntityGraph(value = "group_with_all_associations", type = EntityGraph.EntityGraphType.FETCH)
    public Page<UserModel> findAll(Pageable limit);
}
```

## 発行されるSQLを確認
実行して、発行されるSQLを確認する。

### SQLのログを出力
SQLのログが出力されるようにする。

```yaml:application.yml
logging:
  level:
    org:
      hibernate:
        SQL: DEBUG
        type:
          descriptor:
            sql:
              BasicBinder: TRACE
```


### findAll()

```sql
select
    usermo0_.id as id1_1_0_,
    usermo0_.group_id as group_i49_1_0_,
    groupmodel1_.id as id1_0_1_,
    groupmodel1_.group_name as group_n17_0_1_
from
    users usermo0_
    left outer join
        groups groupmodel1_
    on  usermo0_.group_id = groupmodel1_.id
limit ?
```

### findById()

```sql
select
    usermo0_.id as id1_1_0_,
    usermo0_.group_id as group_i49_1_0_,
    groupmodel1_.id as id1_0_1_,
    groupmodel1_.group_name as group_n17_0_1_
from
    users usermo0_
    left outer join
        groups groupmodel1_
    on  usermo0_.group_id = groupmodel1_.id
where
    usermo0_.id = ?
```


## 参考
- [Spring JPA/Hibernate Repository findAll is doing N+1 requests instead of a JOIN by default in Kotlin
 ](https://stackoverflow.com/questions/65706276/spring-jpa-hibernate-repository-findall-is-doing-n1-requests-instead-of-a-join)
Dataverse SDKでWeb Resourceのresxファイルを取得

メモです。ほんとはオブジェクトのNullチェックとかしないといけないと思います。

        static void Main(string[] args)
        {
            var connectionString = @"AuthType = Office365; Url = xxx;Username=xxx;Password=xxx;

            using (var svc = new CrmServiceClient(connectionString))
            {
                var query = new QueryExpression("webresource");

                query.Criteria.AddCondition("name", ConditionOperator.Equal, "xxx_/strings/Resource1.1041.resx");

                query.ColumnSet = new ColumnSet(true);

                var result = svc.RetrieveMultiple(query).Entities[0];

                byte[] binary = Convert.FromBase64String(result.Attributes["content"].ToString());
                string resourceContent = UnicodeEncoding.UTF8.GetString(binary);

                var xmlDocument = new XmlDocument();
                xmlDocument.LoadXml(resourceContent);

                var label2 = xmlDocument.SelectNodes(@"/root/data[@name='Label2']/value")[0].InnerText;

                Console.WriteLine(label2);
            }
        }
Material-UIのPaletteをカスタマイズした時の型定義について - TypeScript


React/TypeScriptで、MUIのPaletteをカスタマイズする方法を調べてみました。
そこで型定義をする必要があったので、その方法を共有したいと思います。

##Material-UIのversion
- `@mui/material@5.3.0`

## まずPaletteにキーワードを追加してカスタマイズ
MUIのThemeでは、palette内で`primary: blue`などと設定することがありますが、デフォルトの項目以外を設定したいときがあります。
自分はborder-colorで使うmainカラーを設定したかったので、borderキーワードを追加しました。

```js:theme.js
const theme = createTheme({
  palette: {
    primary: {
      main: '#4ea6cc',
    },
    secondary: {
      main: '#e6ee9c',
    },
// ここで設定
    border: {
      main: '#e0e0e0',
    },
  },
});
```

しかし、このままだと「'border' は型 'PaletteOptions' に存在しません。」とエラーになります。
<img width="500" alt="スクリーンショット 2022-02-19 18.17.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507070/3a2dd565-b752-7aa5-a790-1c8f42a3099f.png">
## Paletteの型定義を拡張する

この場合、**Paletteの型定義されている`interface PaletteOptions`を拡張する必要があります。**

Paletteでは`createPalette.d.ts`という型定義ファイルで`PaletteOptions`というinterfaceが宣言されています。

```js:createPalette.d.ts
...

export interface Palette {
  common: CommonColors;
  mode: PaletteMode;
  contrastThreshold: number;
  tonalOffset: PaletteTonalOffset;
  primary: PaletteColor;
  secondary: PaletteColor;
  error: PaletteColor;
  warning: PaletteColor;
  info: PaletteColor;
  success: PaletteColor;
  grey: Color;
  text: TypeText;
  divider: TypeDivider;
  action: TypeAction;
  background: TypeBackground;
  getContrastText: (background: string) => string;
  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
}

...

export interface PaletteOptions {
  primary?: PaletteColorOptions;
  secondary?: PaletteColorOptions;
  error?: PaletteColorOptions;
  warning?: PaletteColorOptions;
  info?: PaletteColorOptions;
  success?: PaletteColorOptions;
  mode?: PaletteMode;
  tonalOffset?: PaletteTonalOffset;
  contrastThreshold?: number;
  common?: Partial<CommonColors>;
  grey?: ColorPartial;
  text?: Partial<TypeText>;
  divider?: string;
  action?: Partial<TypeAction>;
  background?: Partial<TypeBackground>;
  getContrastText?: (background: string) => string;
}
...

```

この型定義ファイル内のinterfaceを拡張したい場合、`declare module`を使います。（`Palette`と`PaletteOptions`の両方を拡張します）

```js:theme.ts
declare module '@mui/material/styles' {
  interface Palette {
    border: {
      main: string;
    };
  }
  interface PaletteOptions {
    border?: {
      main?: string;
    };
  }
}

const theme = createTheme({
  palette: {
    primary: {
      main: '#4ea6cc',
    },
    secondary: {
      main: '#e6ee9c',
    },
    border: {
      main: '#e0e0e0',
    },
  },
});
```

`declare module`でinterfaceを拡張することで、Themeの型を定義することができました。

##参考にさせていただいたURL
- [[Typescript]Material UIテーマのパレットで任意のキーワードを追加する](https://zenn.dev/tttela/articles/c197e2567f31130dd8e1)
- [MUI公式](https://mui.com/customization/theming/#custom-variables)
GitLabのタブを開きすぎて見分けづらいのでfaviconを変える拡張機能を作った

どうも、皆さんは GitLab 使っていますか？

筆者はプライベートでもそうですが、会社でも GitLab を使っているため基本的にブラウザのタブには GitLab のタヌキが氾濫しています。流石にこれでは見辛い……ということで、 GitLab の favicon をプロジェクトのロゴに変更するブラウザ拡張を作ってみました。

5年ほど前から GitLab の Issue には上がっているようですが実装はされていないようなので、ブラウザ拡張という形で作ってみた、というのが背景です[^1]。

[^1]: https://gitlab.com/gitlab-org/gitlab/-/issues/15764

**更新 2024-02-05**

v2.0.0 で名前を Tanuki Utilities に変更しました。  
v2.1.0 で Copy reference ボタンを常時表示する機能を追加しました。

詳しくは [Tanuki Utilitiesの紹介（旧 gitlab-project-favicon） - Sogo.dev](https://sogo.dev/posts/2024/04/introducing-tanuki-utilities) をご覧ください。

**更新 2022-10-15**

デフォルトですべてのサイトで適用されるように変更しました。既存ユーザーの動作に影響を与えることはないので、引き続きご利用いただければと思います。

## 概要

指定された GitLab サイト (gitlab.com or セルフホスト GitLab) で favicon をプロジェクトのロゴに変更します

* ソースコード

https://github.com/SogoKato/gitlab-project-favicon

* Firefox

https://addons.mozilla.org/firefox/addon/gitlab-project-favicon/

* Chrome

https://chrome.google.com/webstore/detail/gitlab-project-favicon/bakcfpilmcemknpdfdakmfnfikedmodh

## つかいかた

上記のリンクからお使いのブラウザに拡張機能をインストールすれば OK です！

適用したいサイトを限定したい場合は、下記の手順を実施することで拡張機能を有効にするサイトを絞ることができます。

1. Firefox の場合は [about:addons](about:addons) に、 Chrome の場合は [chrome://extensions](chrome://extensions) にアクセスして、拡張機能の設定ページを開きます
1. GitLab サイトのホスト名を指定します。例えば gitlab.com や gitlab.example.com のようなホスト名をカンマ区切り・改行区切りで指定します
   ![Firefox](https://github.com/SogoKato/gitlab-project-favicon/raw/main/images/screenshot_firefox_settings.png)
   ![Chrome](https://github.com/SogoKato/gitlab-project-favicon/raw/main/images/screenshot_chrome_settings.png)
1. 設定を終えた後 Gitlab のページを開くと favicon が変わっていることが確認できるはずです
   ![Firefox](https://github.com/SogoKato/gitlab-project-favicon/raw/main/images/screenshot_firefox_overview.png)

## 作ってみた感想

* 会社の Slack に作ってみたと投稿したら割と反響があって地味にみんな困ってたんだと発見
* プロジェクトのロゴになって見分けやすくはなったが、逆に GitLab のタブかどうかが分かりにくくなってしまったかも
  * 動的に画像を作成して favicon を変えてみたい
* ブラウザ拡張機能を作るのは簡単
  * ブラウザ間で基本的な仕様は同じ
  * Chrome が v3 のマニフェストしか受け付けなくなってしまったので、 Firefox 版とマニフェストを変える必要性があった
  * メソッド名やインターフェースに少し違いがあるので、そこは if 文で分岐して差異を吸収した[^2]

[^2]: https://github.com/SogoKato/gitlab-project-favicon/blob/main/src/gitlab_project_icon.js#L24

## 最後に

少し宣伝。筆者のチームが開発に携わる[ニフクラ DevOps with Gitlab](https://pfs.nifcloud.com/service/devops.htm) を使えば簡単にセルフホスト GitLab 環境が手に入ります👍

それでは良い GitLab ライフを〜
Kotlin コンストラクタ(プライマリとセカンダリ)

# はじめに
<!-- 発端や概要を記載 -->
Androidのネイティブ開発をKotlinで担当することになり、備忘録も兼ねて投稿します。
Kotlinの動作確認は下記で行うのが楽です。
https://developer.android.com/training/kotlinplayground?hl=ja


# 目次
<!-- タイトルとアンカー名を編集 -->
1. [コンストラクタ](#Chapter1)
1. [プライマリコンストラクタ](#Chapter2)
1. [セカンダリコンストラクタ](#Chapter3)
1. [参考](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# コンストラクタ
インスタンス生成時に自動で呼び出されるメソッド的なもの。
Kotlinには２種類のコンストラクタがある。
・プライマリコンストラクタ
・セカンダリコンストラクタ

<a id="#Chapter2"></a>
# プライマリコンストラクタ
クラスに１つしか持てない。
クラスのヘッダの一部でクラス名(型パラメータはつけること可能)の後に続けて書く。

```
class クラス名 constructor(引数名: データ型) {}
```
プライマリコンストラクタがアノテーションや可視性修飾子を持ってない場合は、constructorのキーワードは省略可能。

```
class クラス名(引数名: データ型) {}
```

プライマリコンストラクタは、コードを含めることはできない。
初期化を書きたい場合はinit キーワードを付けて、ブロック内に書く。

```
class クラス名(引数名: データ型) {
    init {
        logger.info("プライマリコンストラクタの初期化です。${引数名}も使えます")
    }

}
```

クラス本体の中で宣言されたプロパティの初期化処理でも使える

```
class クラス名(引数名: String) {
    val プロパティ名 = 引数名.toUpperCase()
}

fun main() {
    val test = クラス名("a")
    println(test.プロパティ名)
}
```

Aが出力される。

プロパティの宣言と初期化をプライマリーコンストラクタから行なう簡潔な構文がある。

```
class クラス名1(
    val プロパティ名1: データ型,
    val プロパティ名2: データ型
    ) {

}

//{}も処理がなければ省略できる
class クラス名2(val プロパティ名1: データ型, val プロパティ名2: データ型)

//デフォルト値も設定できる
class クラス名3(var プロパティ名: String =  "test")

fun main() {
    //デフォルト値を指定したもの
    val test1  = クラス名3()
    val test2 = クラス名3("てすと")
    println(test1.プロパティ名)
    println(test2.プロパティ名)
}

/*
    出力は下記
    test
    てすと

    デフォルト値を設定した場合、インスタンス時の引数(プロパティ)は省略できる
*/

```

プロパティはプライマリーコンストラクタの中で可変値(var)、固定値(val)で宣言できる。



<a id="#Chapter3"></a>
# セカンダリコンストラクタ
クラス本文内にconstructorを書けばセカンダリコンストラクタを宣言できる。
セカンダリコンストラクタは複数持つことができる。

プライマリコンストラクタがない場合

```
class クラス名 {
    constructor(引数名:  データ型)
}

```

複数書いた場合

```
class クラス名 {
    constructor(str:  String) {
        println("文字列の引数のコンストラクタだよ")
    }
    constructor(int:  Int) {
        println("数値の引数のコンストラクタだよ")
    }
}

fun main() {
    val test1 = クラス名("a")
    val test2 = クラス名(1)
}

```


引数のデータ型の違いなど、複数かける。

プライマリコンストラクタとセカンダリコンストラクタがある場合
セカンダリコンストラクタは直接か他のセカンダリコンストラクタを介して
プライマリコンストラクタへ委譲する必用がある
同じクラスならthisが使える

```
class クラス名(str:String, int: Int) {
    constructor(str:  String) : this(str, 1) {
        println("セカンダリコンストラクタ通ったよ")
        println("引数strは${str}です")
    }
}

fun main() {
    val test1 = クラス名("a")
    val test2 = クラス名("b", 1)
}
```

実行結果は下記

セカンダリコンストラクタ通ったよ
引数strはaです






# 終わりに

<a id="#reference"></a>
# 参考
- [クラスと継承](https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/classes.html)
- [クラスの実装 〜 コンストラクタ](https://kotlin.keicode.com/lang/classes-constructor.php)
CSSの小技集(トリミング、疑似要素、疑似クラス)


覚えてたら便利かもっていうCSS！

## 画像をトリミングする

この背景画像を
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/4c5e004d-d6dd-c69d-19fc-72b582c1df78.png)

こんな感じでアスペクト比を保ったまま横幅いっぱいに拡大したい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/15c54bc2-3988-f247-1dad-5d5373a62613.png)

`object-fit`と`object-position`を使用。

``` javascript:html
<div className={styles.mainContainer}>
  <img className={styles.mainBg} src={main_bg} alt="メイン背景" />
</div>
```

``` javascript:css
.mainContainer {
  .mainBg {
    width: 100%;
    object-fit: none;
    object-position: 50% 0%; // 左右　上下
  }
}
```

`object-position`の値で背景画像位置を調整する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/1abd6691-69a8-09fd-7561-e57e6f1e5e6e.png)

## 擬似要素を使う
特定の部分にのみ、CSSを当てることができる。

``` javascript:html
<>
    <p className={styles.first}>
      一段落目の説明
      <p>あいうえお</p>
      <p>かきくけこ</p>
      <p>さしすせそ</p>
    </p>
    <p className={styles.second}>
      二段落目の説明
      <p>abcde</p>
      <p>fghij</p>
    </p>
</>
```

``` javascript:css
.first::first-letter {
  // 要素の一文字目にスタイルを適用
  color: red;
}

.second::first-line {
  // 要素の一行目にスタイルを適用
  color: blue;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/8288f896-b8b2-a6a0-6b9a-c9f98554c06d.png)

参考
[擬似要素](https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements)

## 擬似クラスを使う
特定の状態を指定し、CSSを当てることができる。

ボタンの`background-color: #fff;`のみ設定。
「押せそう」感がない、、、
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/54bdb292-db88-396c-9902-491e2ccd9093.gif)

```  javascript:html
<button className={styles.testButton}>test</button>
```

``` javascript:css
.testButton {
  background-color: #fff;
  cursor: pointer;
}
.testButton:hover {
  // カーソルが当たった時にスタイルを適用
  background-color: gray;
}
```
ついでに`cursor: pointer;`も追加してさらに「押せそう」感を出しました。

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/30ab25bb-8960-8b42-2d6d-30be064da0b3.gif)

参考
[擬似クラス](https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes)
MotionLayoutの例を試してみる(キーフレームの位置)


前回はImageFilterViewをやりました。
[ImageFilterView](https://qiita.com/yuta317/items/a1fe49c5b705d442d484)

今回はキーフレームの位置を試していこうと思います。

# 公式リファレンス
https://developer.android.com/training/constraint-layout/motionlayout/examples?hl=ja

https://developer.android.com/training/constraint-layout/motionlayout/ref?hl=ja

# KeyFrameSet

今回は縦横同時に移動してみようと思います。

リンク先に公式サンプルがあります。
[キーフレームの位置](https://developer.android.com/training/constraint-layout/motionlayout/examples?hl=ja#keyframe-position)

```
<KeyFrameSet>
    <KeyPosition
         motion:keyPositionType="pathRelative"
         motion:percentY="-0.25"
         motion:framePosition="50"
         motion:motionTarget="@id/button"/>
    </KeyFrameSet>
```

縦横同時に移動するためにはKeyFrameSetを利用します。


# keyPositionType

percentX 値と percentY 値の設定方法を指定できるみたいです。
parentRelativeとdeltaRelativeとpathRelativeが設定できます。

parentRelativeを設定するとpercentXとpercentYは親ビューを基準に指定されます。

deltaRelativeを設定するとpercentXとpercentYはビューが移動する距離を基準に指定します。

pathRelativeを設定するとX軸は、パス内でターゲットビューが移動する方向で、0が開始位置、1が最終位置です。Y軸はX軸に垂直で、正の値はパスの左側、負の値は右側になります。

今回はpathRelativeを使用しています。


# framePosition
モーション シーケンスの中で、ビューが<KeyPosition>で指定された地点に到達するタイミングを指定する 1～99 の整数
今回は５０を設定しているので真ん中の位置です。

# motionTarget
こちらはどのViewを対象にするのかを指定します。


以上です。
アニメーションが綺麗に動くと気持ちいいですね！
テスト61

```vb

Sub regex()

'正規表現練習
Dim reg As Object
Set reg = CreateObject("VBScript.RegExp")

'正規表現の指定
With reg
'    文字列の中で「第」の後に0個以上の数値、その後に「回」を含む文字列を抽出...〆(･ω･ )ﾒﾓﾒﾓ
    .Pattern = "第\d{0,}回"   'パターンを指定
    .IgnoreCase = True       '大文字と小文字を区別する(False)、しない(True)
    .Global = True           '文字列全体を検索する(True)、しない(False)
End With

Dim str As String
Dim i As Long
Dim sh As Worksheet
Dim Last_Row As Long
Dim matches As Variant
Dim match As Variant

Set sh = ThisWorkbook.Sheets("正規表現練習")
Application.ScreenUpdating = False

With sh

    Last_Row = .Cells(Rows.Count, 1).End(xlUp).Row
    
    For i = 2 To Last_Row
    
        Set matches = reg.Execute(.Cells(i, 6))

        For Each match In matches
            
            .Cells(i, 7).Value = match

        Next match
        
    Next i

End With

Application.ScreenUpdating = True
Set reg = Nothing
Set sh = Nothing

End Sub
Automation Anywhere チャレンジ！

# 気持ちを新たに
Automation Anywhere を勉強しなくては……と思いつつ、全然できていないのでとりあえず手を動かくことにした。

とはいえ、適当な課題も見つからずどうしようかと悩んでいた（というか言い訳をしていた）ところ……

2022年2月18日(金)に **[AA de Knight 第13回](https://aaj.connpass.com/event/233397/)** のイベントにて技術ブログが紹介された。

https://licensecounter.jp/engineer-voice/blog/articles/20200811_AutomationAnywhere-Map-BotCreationPart.html

こちらのサイトを元に、写経のごとく手を動かしてみることとした。
**とにかく手を動かす**ということを行動目標として、
達成されたら「ちゃんと出来たじゃん」とはげましつつ、なんとかやり切ってみたいと思う。

# 進捗管理について
今回は無料で試用できる「Automation 360」を使用して、練習をしてみることにした。（インストール手順は[**こちら**](https://licensecounter.jp/engineer-voice/blog/articles/20191118_AutomationAnywhere-FreeTrial-A2019.html)）
技術ブログの記事は以下の通り。これを１つずつ試してみることにした。
作業した内容をブログ記事にして、こちらの目次にリンクを貼ることにする。
これで進捗を管理していこうと思う。（気が向いたらキレイな表にまとめようかな。）

## 【BASIC】Bot作成
[◆Bot作成はじめの一歩](https://qiita.com/inaho3517/items/88a7bf98219883bdd521)

## 【BASIC】Bot作成の基礎知識
[◆パッケージとは？](https://qiita.com/inaho3517/items/3e08ea5c8fe8117e903e)
[◆変数](https://qiita.com/inaho3517/items/ec2561481cb2387ea2e5)

## 【ADVANCED】データを扱うBotを作る
◆データソースを使う（Excel 編）
◆データソースを使う（CSV 編）

## 【ADVANCED】Bot作成
◆初めてのBot作成 vol.1 Automation Anywhere Community Editionに登録してみよう！
◆初めてのBot作成 vol.2 Control Roomの構成を見てみよう！
◆初めてのBot作成 vol.3 最初のBotを作ってみよう！
◆初めてのBot作成 vol.4 レコーダーの種類を見てみよう！
◆初めてのBot作成 vol.5 記録メニューを使ってみよう！

## 【ADVANCED】実運用に向けて
◆マウス操作の自動化
◆プルダウンリスト操作を自動化してみた！
◆カレンダー入力の操作を自動化してみた！
◆ドラッグ＆ドロップ操作を自動化してみた！
◆劇的改善！Webサイトのキャプチャを安定高速化
◆メール送信
◆Error Handlingの紹介
◆トリガー機能の変更点の整理（A2019.19 版）

## 【MASTER】Botの品質
◆デバッグ方法
◆テスト技法とテストから考えるBotの構成
◆【トラブルシューティング】最初にやること

## 【MASTER】作成した Bot の管理
◆Bot の公開＜チームで Bot を共有するには＞
◆Bot のエクスポート／インポート＜Control Room 間で Bot を移動するには＞

## 【REFERENCE】パッケージリファレンス
◆CSV/TXT
◆Browser
◆Task Bot
◆Dictionary
◆ファイルに記録
◆レコーダー
◆Excelの基本操作 vol.1（開く／閉じる／1つのセルを取得／複数のセルを取得）
◆Excelの基本操作 vol.2（セルを設定／ブックを保存／検索／置換）
◆Excelの基本操作 vol.3（列名を取得／行番号を取得／セル アドレスを取得）
◆Excelの基本操作 vol.4（セルを削除／セルに移動／セッション変数を設定／シートに切り替え）
◆アクション パッケージ リファレンス（A～E）
◆アクション パッケージ リファレンス（F～N）
◆アクション パッケージ リファレンス（O～Z）

# 今後の勉強メモ
Automation Anywhere University に取り掛かれていないので実施せねば💦

https://automationanywhere.litmos.com/home/dashboard

AA de Knight も学び直したい💦特にコンテスト部分！めっちゃ勉強になる！！！

https://www.youtube.com/results?search_query=%23AutomationAnywhere+%23AAdeKnight

IQぼっちさんのブログ発見！これはチャレンジしてみたい✨👀

https://qiita.com/IQ_Bocchi/items/8d28f12256037b5f9058
【Svelte】親コンポーネントから子コンポーネントの変数や関数を利用する【初心者】

### あらすじ

- 親コンポーネントから子コンポーネントのstateを参照したいとき
- 親コンポーネントから子コンポーネントのメソッドを実行したいとき

このようなとき、どういう書き方をすればいいのかすこし悩んだので
おそらく最適解と思われる方法をメモしておきます。

（もっといい方法あるよ！という人は教えてください）

### おそらく最適解

**特定の変数や関数を利用したい場合**
・`bind:変数名や関数名`で目的の変数や関数を取得する。

```html:親コンポーネント.svelte
<!-- HTML -->
<Child bind:someFunction={someFunction}/>

<!-- JavaScript -->
<script>
  import Child from 'Child.svelte';
  let someFunction;
  someFunction();
</script>
```

```html:子コンポーネント.svelte
<!-- JavaScript -->
<script>
  export function someFunction(){
    // 実行させたい処理
  }
</script>
```

**すべての変数や関数を利用したい場合**
・`bind:this`で子コンポーネントを取得 → 変数や関数を参照して利用する。

```html:親コンポーネント.svelte
<!-- HTML -->
<Child bind:this={child}/>

<!-- JavaScript -->
<script>
  import Child from 'Child.svelte';
  let child;
  child.someFunction();
</script>
```

```html:子コンポーネント.svelte
<!-- JavaScript -->
<script>
  export function someFunction(){
    // 実行させたい処理
  }
</script>
```

### 解説
コンポーネントに対して`bind:this`を利用すると、
コンポーネントの情報が取得できるので、
そこから子コンポーネント内の変数や関数にアクセスが可能ということでした。

また、特定の変数や関数だけを取得したい場合は、
`bind:○○○`で取得できるということでした。

これまで`bind:this`は、DOM要素を取得して利用する使い方しかしてなかったので、
この解決法に辿り着くのに数時間悩みましたが
実は[公式ドキュメント](https://svelte.jp/docs#template-syntax-element-directives-bind-property)でも解説されていました。見逃してました😉
IPアドレスほど【知っているけど詳しく知らない】ものはそうそうない

# 一問一答式で理解する「IoT」

【Q1】IPアドレスって何？　
【A1】cman.jpで検索すれば自分の番号がわかりますよ！

【Q2】いや、そういうことじゃなくて...
【A2】冗談ですよ(笑)
IPアドレスとは、スマホやPCなど、ネットワーク上の機器に割り当てられるインターネット上の**住所**のような存在です。インターネットでページを閲覧したり、メールの送受信を行うには、データの送信元や送信先を識別しなくてはいけないのですが、この識別に使われる番号がIPアドレスです。ネットワーク上でデータを送受信する際、通信相手を指定するために使われています。

【Q3】IPアドレスって何種類かあったりする？
【Q3】ありますよ。2つほどご紹介しようと思います。
1つ目は**グローバルIPアドレス**です。その名のとおり、**全世界で通用するアドレス**です。世界中のどこからデータ送受信しても送り間違えがないように、世界にただひとつの、インターネットに接続する際に割り振られるIPアドレスです。

グローバルIPアドレスは特定の国や地域に属さない**ICANN**という組織によって世界的に管理されており、ICANNから日本の管理組織である**JPNIC**に割り振られ、そこからインターネット・サービス・プロバイダ（以下ISP）を経由して利用ユーザーへと割り振られています。

そのため、利用ユーザーが**ISP**と契約すると、ISPに割り当てられたIPアドレスのなかからPCやルーターが接続した際に通信が重複しないよう割り振られるため、同じグローバルIPアドレスが存在することはありません。そのIPアドレスは、XXX.XXX.XXX.XXXのように0〜255の数字4組で表記されるのですが、数字の組み合わせは有限であるため、後述のような**枯渇問題**が起きています。

2つ目は**プライベートIPアドレス**です。**自宅や会社**など特定のネットワークの範囲内で用いられるIPアドレスのことで、**ローカルIPアドレス**とも呼ばれます。グローバルIPアドレスとは違い、そのネットワーク内で識別できれば良いので、ほかのネットワークでは同じ番号が使われている可能性があります。

ちなみに、このプライベートIPアドレスとグローバルIPアドレスはそれぞれ番号の割り当て範囲が決まっているので、詳しい人が番号を見ればどちらのIPアドレスか判別することができます。

【Q4】ISPって何？
【Q4】プロバイダは供給、提供などという意味がありますよね？ISPは、インターネット接続というサービスを提供している事業者」のことを指しているのです。

【Q5】2つもIPアドレスだけど、どっち使ってるの？
【Q5】実は私たちは日常的に両方使っているのですよ！ たとえば、家族で共用のWi-Fiを使用するケース。この場合、グローバルIPアドレスが割り振られるのはWi-Fiルーターで、そこに接続するスマホやPC、家庭用ゲーム機などにはプライベートIPアドレスが設定されます。これにより各機器はルーターを介してインターネットに接続できるというわけです。![](https://tspace-prod.s3.amazonaws.com/articles/de9855bd516610f50d58c1597ff497b7.jpg)
図1　2つのIPアドレスの関係性
　

【Q5】IPアドレスの割り振りは？
【Q5】IPアドレスの割り振り方は、動的タイプと固定タイプの2種類があります。通常ISPから割り当てられるのは動的タイプで、固定タイプはオプションになっていることが多いです。それぞれ**動的（可変）IPアドレス**、**固定（不変）IPアドレス**などと呼ぶのが一般的です。
インターネットに接続するたびに、ISPから新たなIPアドレスが**自動的に割り振られる**のが動的（可変）IPアドレスで、私たちが普段スマホやPCなどを利用するときに割り当てられるのがこちらのタイプとなります。一定時間が経過したり、ネットを切断するたびに番号が変更されます。家庭用Wi-Fiはもちろん、公衆Wi-Fiなどでもこちらのタイプが採用されています。

動的タイプの場合、IPアドレスはISPから自動的に割り振られるため、特別な接続設定などは不要です。また、番号が変動するので、ユーザーが特定されるリスクも低いですね(0ではないんですよねぇ...)。

一方、常に同じIPアドレスで接続するケースに対応したものが固定（不変）IPアドレスです。会社内のシステムなど特定の許可した人（機器）しか通信できないよう設定する場合は、接続のたびにIPアドレスが変わってしまっては、どこからのアクセスか特定できませんよね。接続が許可された人であることを特定するために固定IPアドレスが必要になるんです。

固定IPアドレスでインターネットに接続する際はユーザーが手動で接続設定する必要がありますが、リモートワークで自宅から会社にアクセスする場合や遠隔監視を行うネットワークカメラなど、固定IPアドレスを必要とするケースも少なくないです。![](https://tspace-prod.s3.amazonaws.com/articles/5d1bc5cb50a5a830fef4eca98e707373.jpg)
                              図2　動的IPアドレスと固定IPアドレス

【Q5】前のほうで枯渇問題が何とか言ってたけど...
【Q5】ごめんなさい、普通に忘れてました(笑)　
従来のIPアドレスは、0〜255の数字4組の番号を割り振る「IPv4」というプロトコル（通信規約）を採用しており、約43億通りのIPアドレスを管理することが可能でした。しかし、スマホやIoTが爆発的に普及しインターネット需要が拡大した現在、使用できるIPアドレスの数が追いつかなくなってきたんです。そこで新たに取り決めたプロトコルが「IPv6」。4桁の英数字8組で表記するIPv6では43億✕43億✕43億✕43億までIPアドレスを管理できるため、事実上無制限化したに等しいです。

# まとめ
これぐらいの知識があれば、【IPアドレスについて詳しく知らない】なんてことはありません。あやふやだったものが一つの、自分の中の**枠**に収まるのはとても気持ちがいいですね。IPアドレスが私達の便利な生活を支えていることがよくわかります。IPアドレスに枯渇問題があったなんて今まで知りませんでした...
**気になったことは調べてみる**ことの大切さが実感できました。
                    
# 調べたリンク先一覧
[IPアドレスの詳しい説明](https://time-space.kddi.com/ict-keywords/20200930/2984)
[ここで自分のIPアドレスがわかります](https://www.cman.jp/network/support/go_access.cgi)
[ISPについて](https://www.ntt.com/business/services/network/internet-connect/ocn-business/bocn/knowledge/archive_15.html)
nginxのルートディレクトリ

#はじめに
nginxのルートディレクトリについて備忘録です。

##ルートディレクトリの設定ファイル
```
$cat nginx.conf
    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html; ←ここで設定されている
```

##ここを変更してみる。
```
$sudo mkdir /home/test
$sudo sed -i -e 's@/usr/share/nginx/html@/home/test@g' nginx.conf
    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /home/test;  ←変更された
```

##nginxを再起動する
```
$sudo systemctl restart nginx
```
##nginxの状態を確認
```
$sudo systemctl status nginx
● nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
   Active: active (running) since Sat 2022-02-19 08:43:04 UTC; 33s ago
  Process: 32428 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 32424 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 32421 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 32431 (nginx)
   CGroup: /system.slice/nginx.service
           tq32431 nginx: master process /usr/sbin/nginx
           mq32432 nginx: worker process
```

##ブラウザのアドレスバーにEC2のパブリックIPアドレスを入力
###EC2のパブリックIPを確認
```
ec2-metadata | grep public-ip
public-ipv4: 3.8x.1xx.2xx
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321513/997cfcab-612d-47bd-8621-e0b3e33d151a.png)

##nginxの変更後のルートディレクトリにindex.htmlを配置する
```
sudo vi /home/test/index.html
<head>
</head>
<body>
<h1>nginx test</h1>
</body>
```

##ブラウザのアドレスバーにEC2のパブリックIPアドレスを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321513/ee1aafeb-6c03-f620-23d3-f2ba78e0ba2d.png)

#おわりに
今回は、nginxのルートディレクトリを変更して、適当なindex.htmlを表示させてみました。
では、また。
Firebaseのオフライン機能の記述場所によりマルチウィンドウ切り替え時にアプリが落ちてハマった件

加速度センサーのデータを長時間記録するアプリを作っており、データ保存先はrealtime databaseです。掲題の通りなのですが、realtime databaseを利用すると、一旦スマホのwifi接続がきれても、アプリがオフラインでデータを保存してくれていて、次にwifiが繋がった時にサーバーに送信してくれるという、1行書くだけでお任せの超ありがたい機能です。

https://firebase.google.com/docs/database/android/offline-capabilities?hl=ja

そこでそいつを実装するために例えばアクティビティの「recording.java」あたりにFireBase非同期処理のお願いとして

		FirebaseDatabase.getInstance().setPersistenceEnabled(true);

などと記述するのですが、こいつのせいでマルチウィンドウ切り替え次にアプリが落ちることが判明。

■対応：計測前にセンサーをペアリングするための設定画面の段階で非同期処理を設定したら、解決でした。非同期処理も作動してました。というメモです。
クラウドプラクティショナーに合格するまでの話と感想

# クラウドプラクティショナーに合格するまでの話と感想
先日、クラウドプラクティショナーに合格したので、それまでの道のりを残したいと思います。
まず、AWSを初めて触ったのは、2021年10月です。
参加したインターンシップでAWSが使われていたので、それをきっかけに触り始めました。
AWSを触っていると、どんどん興味が出てきたので、とりあえずAWS全体について知るために、クラウドプラクティショナーを取ろうと決めました。

## 利用した教材
利用した教材は、2つです。
- [この問題だけで合格可能！AWS 認定クラウドプラクティショナー 模擬試験問題集](https://www.udemy.com/course/aws-4260/)
- [AWS認定資格試験テキスト AWS認定 クラウドプラクティショナー](https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%BC-%E5%B1%B1%E4%B8%8B-%E5%85%89%E6%B4%8B/dp/4797397403/ref=sr_1_1?crid=1OEH1TUSOK2XW&keywords=%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%BC&qid=1645258773&sprefix=%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%2Caps%2C175&sr=8-1)

## 勉強した期間
合格するまでに勉強した期間は、2週間ほどです。
*勉強を始めるまでに、インターンシップでは4~5ヶ月ほどAWSに触れています。*
実際に行ったことは、上記にある本を1周とUdemyの問題集を3~5周ほどです。
本は30%ほど理解した状態で、問題集は全部の問題で90%以上の正答率を出せていました。

## 結果
結果は、1000点中761点でした。
700点が合格ラインなので、結構危なかったです(笑)
実際の問題を言うことは、試験の規約に引っかかるので言えないですが、
感想としては**問題集の問題を解けるからと言って合格できるわけではない**です。
その理由は、実際の試験では、**Udemyの問題集通りの問題が3割**、**Udemyの問題集に似ている問題が4割**、**Udemyの問題集にない問題が3割**ぐらいの割合で出題されているからです。←**個人の感想です。**

## おすすめの勉強法
おすすめの勉強は、**資格を取る目的**や**狙う点数**によって異なります。
僕のように、「AWS全体について知るため」「とりあえず資格を取りたい」であれば、僕のような勉強法で十分です。
しかし、高得点を狙う場合は、問題集中心ではなく、本中心に勉強することをおすすめします。
その理由は、上記にあるように、問題集にない問題が出題されることがあるからです。
そのため、高得点を取りたい場合は、本に書かれていることを端から端まで理解しておくとよいでしょう。

## おすすめの試験中の進め方について
試験中は、どんどん問題を回答することに集中してください。
わからない問題は、フラグを立てておき、どんどん進めて、後で見直すようにしてください。
その理由は、後々出題される問題文や選択肢を見て、思い出したり、推測できたりするからです。
また、クラウドプラクティショナーの試験であれば、試験時間はかなり余裕があり、見直す時間は絶対にあります。
そのため、わからない問題があっても焦らずに、どんどん飛ばして回答することを意識してください。

### 何か追加のコメントや意見があれば、教えてください！
8:インデントの除去, NULL, 配列

<font color="pink"><h2>インデントの除去</h2></font>

前回（その7）のヒアドキュメントでは、終了文字列のインデント位置によって、先頭部分の空白が除去される。

下の例だと「$msg」の真下にある空白部分は全て除去される。

```
$msg = <<<EOD
    {$str}は、サーバーサイドで動作する簡易スクリプト。
　　　まずはじっくり基礎固めしよう。<br>
    “Let’s start, everyone!!”
    EOD;
```

よって、終了文字列よりもインデントが少ない行は不可。

```

$msg = <<<EOD
    {$str}は、サーバーサイドで動作する簡易スクリプト。
　　　まずはじっくり基礎固めしよう。<br>
“Let’s start, everyone!!”
    EOD;
```

上の例では（不正なインデント階層（少なくとも2個のインデントが必要））のようなエラーとなる。


<font color="green"><h1>ヌル（null）</h1></font>

ヌル型は、ある変数が値を持たないことを表し、<font color="red">唯一のリテラルとしてnullを持つ。</font>

次の条件で変数はヌルであるとみなされる。

①変数に値が代入されていない場合

②変数に明示的にnullが代入された場合

③unset関数で変数の内容が破棄された場合

具体例

```
<?php
$n1; //値が代入されていないのでnull
$n2 = null; //明示的にnullを代入
```

<font color="green"><h1>配列</h1></font>

ここまで扱った変数は、全て一つの変数（入れ物）に対して１つの値を持つものばかりだった。

<font color="blue">このような値のことをスカラー型と言う</font>

しかしデータの種類によっては複数の値をまとめて扱いたいケースもよくある。

例えば次に表すのは「面白かった映画」を管理する例。

```
$title1 = ‘セルラー’;
$title2 = ‘スーサイドスクワット’;
$title3 = ‘ライフ’;
$title4 = ‘インターステラー’;
$title5 = ‘ドントプリーズ’;
```

\$title1、\$title2…………と通し番号が付いているので、一見、データをまとめて管理しているよう。

しかしPHPからすれば\$title1と\$title2はどんなに似ていても何の関係もない独立した変数である。

例えば登録されている映画の本数を知りたいと思ってもすぐにカウントすることはできないし、全ての映画タイトルを列挙したいとしても変数をここに並べるしか術はない。

そこで登場するのが<font color="red">配列</font>である。

スカラー型の変数が値を一つしか扱えないのに対し、配列には複数の値を収める事ができる。

<font color="blue">配列は仕切りのある入れ物だと考えても良い。</font>

仕切りで区切られたスペース（要素という）のそれぞれには、番号が振られ、互いを識別できる。

配列は<font color="red">スカラー型</font>に対して、<font color="blue">複合型</font>と呼ばれる場合もある。

配列を利用する事で、互いに関連する値の集合を１つの名前で管理できるので、まとめて処理をする際にもコードが書きやすくなる。

<font color="pink"><h2>配列の基本</h2></font>

配列を使った具体例

```
<?php
$data = [‘山田’, ’田中’, ’及川’, ’子安’, ’河野’,’竹田’];

print $data[4];
//結果: 河野
```

配列を作成するための一般的な構文は次のとおり。

配列の生成

```
$配列名 = [値1, 値2, ………];
```

配列はカンマ区切りの値をブラケット（［~］）でかかった形で表現する。

空の配列を生成するならば単に［］とする。

配列最後のカンマは付けてもつけなくても良い。

```

$data = [‘山田’, ’田中’, ’及川’, ’子安’, ’河野’,’竹田’,];
```

ただし、配列を1行で表す場合には冗長なだけなので、最後のカンマは省略するのが一般的。

一方、配列を複数行で表す場合には（値が長い場合には、要素単位で改行した方がコードが見やすくなる）最後のカンマを付与した方が良い。

それによって後から要素を追加した場合でも、カンマの漏れを防げるから。

配列$dataに対して、5つの要素（’山田’, ’田中’, ’及川’, ’子安’, ’河野’,’竹田’）をセットしている。

それぞれの要素には<font color="red">先頭から順に</font><font color="blue">0, 1, 2, …………</font><font color="red">と言う番号が振られている。</font>

<font color="green">9でもう少し詳しく</font>
AWS Cognito の JSON Web キーセット を取得

次のページを参考にしました。
[JSON web トークンの検証](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html)

```bash
REGION="ap-northeast-1"
USER_POOL_ID="ap-northeast-1_123abcdef"

ISSUER=https://cognito-idp.${REGION}.amazonaws.com/${USER_POOL_ID}
JWKS_URL=${ISSUER}/.well-known/jwks.json

wget ${JWKS_URL}
```

実行すると、
jwks.json　がダウンロードされます。
Power Automate Desktop > メモ





# メモ



[【PAD\|Power Automate Desktop】ベーシック認証を行ってWEBページからデータを取得する【RPA】 \| EXCELVBAとGASとゲーム](https://so.sha-box.com/2021/03/post-71/)


### ベーシック認証

```
URL:example.com
ユーザーI: user
パスワード: password
```

の場合は、URLに以下を設定する

```
http://user:password@example.com/
```



[演習 \- 今月の最終日を見つけるために JavaScript を使用する \- Learn \| Microsoft Docs](https://docs.microsoft.com/ja-jp/learn/modules/pad-scripting/4-exercise-javascript)


### 正規表現


以下のような記載から令和等を抜きたい場合

```
2021[令和3]年12月1日（水）0:00
```

正規表現式

```
^(.*)\[令和.*\](.*)
```

以下でグループを取得できる

```
$1$2
```

結果

```
2021年12月1日（水）0:00
```

[テキスト \| Microsoft Docs \- Power Automate \| Microsoft Docs](https://docs.microsoft.com/ja-jp/power-automate/desktop-flows/actions-reference/text#replace)


[正規表現での置換 \| Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/standard/base-types/substitutions-in-regular-expressions)



[変数の操作と % 表記 \- Power Automate \| Microsoft Docs](https://docs.microsoft.com/ja-jp/power-automate/desktop-flows/variable-manipulation)


robin言語
https://github.com/robin-language/robin