OmniAICreator/Qiita-1.07M huggingface dataset:
WoTとCHIRIMENについて

この記事は、 [大阪工業大学 Advent Calendar 2021](https://adventar.org/calendars/6716)の6日目の記事です。
（大阪工業大学 Advent Calendarは）初投稿です。
せっかくなので私が研究している分野であるWoTと使用しているCHIRIMENについて書いてみようと思います。

## WoTとは？
今回WoTについて2つのことを覚えていってください。
##### １つ目が「"World of Tanks"の略ではない」ということです。
WoTとは、Web of Thingsの略で「モノのWeb」という意味です。IoTはInternet of Thingsの略で「モノのインターネット」という意味なのでその派生形だと思ってください。

※WoTについて詳しく知りたい人は"WoT"で検索するのではなく"Web of Things"で検索してください。そうしないとトップに"World of Tanks"の攻略記事しか出てこないので…

##### 2つ目が「WoTとは一体何なのか？」ということです。

IoTでは、様々なモノ同士がインターネットを介して接続されますが、モノ自体がIPアドレスを持っていたり、モノがIPアドレスのある機器に接続されることで機能しています。

一方、WoTでは、異なるベンダーで開発され、互換性の無いIoT機器（＝モノ）に対し、既に広く普及している既存のWeb技術（HTMLやJavascript、JSONなど）により橋渡しをすることでIoTのサービスやアプリケーションの提供を行うことを目指しています。
簡単にいえば、スマートスピーカーを使用してIoT家電などを操作するときに対応機種以外で操作できないのは不便だよねという問題をWeb技術で解決しようということです。
![WoTとは.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1797679/6aa3ec69-965e-6fec-ef3a-fcc018f800ec.png)

また、WoTはWebの標準化団体「W3C」によって提唱され、標準化に向けた議論が行われており、世界的に浸透しているWebの標準技術を利用するため、ベンチャー企業なども多種多様なサービスを創出できることがメリットであるといわれています。

## CHIRIMENとは
##### CHIRIMENとは、JavaScriptでGPIOやI2Cの制御が可能なプロトタイピング環境です。
CHIRIMENは、Raspberry Piやmicro:bitなどで使用可能で、それぞれのピンにGPIOやI2Cの電子パーツを接続することでそれらの直接制御が可能です。
また、CHIRIMENには、Webブラウザを使用するWebブラウザ版とNode.jsを使用するNode.js版の2つの方法があり、主な違いは以下の通りです。

- Webブラウザ版
  - Raspberry PiにCHIRIMENのOSイメージをインストールすることで使用可能。
  - WebブラウザのJavaScriptからGPIOやI2Cの制御が可能。
  - センサーで測定した値はWebブラウザに出力される。
  - IoT初心者のプログラミング学習に向いている。
  
- Node.js版
  - Raspberry PiにNode.js環境を構築することで使用可能。
  - Webブラウザを使用せずにJavaScriptからGPIOやI2Cの制御が可能。
  - センサーの動的な処理が可能。
  - IoTやWoTシステムの設計に向いている。

この記事を読んでCHIRIMENについて興味を持った人は"[CHIRIMEN OPEN HARDWARE](https://chirimen.org/)"を参照してみてください。また、私が書いているNode.js版のCHIRIMENの利用方法についての記事が[ここ](https://qiita.com/okojon/items/58726940ef51d1c4a74c)から読めるのでよければ読んでみてください。
wordpressをHelmでインストールするときにError: INSTLLATION FAILEDが出る

#環境
・Ubuntu 20.04.2 LTS
・microk8s
・Helm v3.7.1
#症状
私のmicrok8sの環境下においてHelmをインストールし、wordpressをHelmでデプロイしようとすると以下のエラー文が発生してしまった。このエラーが発生するとwordpressをインストールすることができなかった

```powershell
Error: INSTALLATION FAILED: Kubernetes cluster unreachable: Get "http://localhost:8080/version?timeout=32s": dial tcp 127.0.0.1:8080: connect: connection refused
```

#対処
このエラー文が何を示しているのかは不明である。これを解決するコマンドが以下に示す通りである

```powershell
kubectl config view --raw >~/.kube/config
```

するとwordpressをインストールすることができた。

#参考文献
[Error: Kubernetes cluster unreachable with helm 3.0](https://github.com/k3s-io/k3s/issues/1126)
Vue.jsにあとからTypeScriptを導入する

Vue.jsはフォルダを作るときにtypescriptを導入するか聞いてくるが、後から導入したくなったときの方法をかく。

```javascript
vue add @vue/typescript
```

このコマンドを打つだけ。


何やらいろいろ聞いてくる。



```javascript
// classスタイルで定義するかどうか
? Use class-style component syntax? 
//Babelを使うか
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 
//既存のjsファイルをtsファイルにしていいか
? Convert all .js files to .ts?  
//jsファイルをコンパイルに含めるか
? Allow .js files to be compiled?
// 宣言ファイルの型チェックをスキップするかどうか
? Skip type checking of all declaration files (recommended for apps)? 
```


勝手にtsファイルにしてくれた。
![rapture_20211206112424.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782673/481fdb76-a122-35f4-cbe4-caead082140b.png)

参考
https://lunchbox.qnv.pw/2021/03/17/vuejs-typescript/
yarn serveでエラーが出るようになってしまった・・・　①


yarn serveでエラー


```
* @/submodule/date.js in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/pages/NewInformation.vue?vue&type=script&lang=js

To install it, you can run: npm install --save @/submodule/date.js

```

そのまま素直にコマンド打ちます・・・

```
npm install --save @/submodule/date.js

```

```
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm WARN old lockfile vue-loader-v16: No matching version found for vue-loader-v16@16.8.3.
npm WARN old lockfile     at module.exports (/Users/私のユーザー名/.nodebrew/node/v14.17.0/lib/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/私のユーザー名/.nodebrew/node/v14.17.0/lib/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/s-ota/.nodebrew/node/v14.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:741:9)
npm WARN old lockfile  Could not fetch metadata for vue-loader-v16@16.8.3 vue-loader-v16: No matching version found for vue-loader-v16@16.8.3.
npm WARN old lockfile     at module.exports (/Users/私のユーザー名/.nodebrew/node/v14.17.0/lib/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/私のユーザー名/.nodebrew/node/v14.17.0/lib/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/私ののユーザー名/.nodebrew/node/v14.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:741:9) {
npm WARN old lockfile   code: 'ETARGET',
npm WARN old lockfile   type: 'version',
npm WARN old lockfile   wanted: '16.8.3',
npm WARN old lockfile   versions: [
npm WARN old lockfile     '16.0.0-beta.5',
npm WARN old lockfile     '16.0.0-beta.5.1',
npm WARN old lockfile     '16.0.0-beta.5.2',
npm WARN old lockfile     '16.0.0-beta.5.3',
npm WARN old lockfile     '16.0.0-beta.5.4'
npm WARN old lockfile   ],
npm WARN old lockfile   distTags: { latest: '16.0.0-beta.5.4' },
npm WARN old lockfile   defaultTag: 'latest'
npm WARN old lockfile }
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/パス（中略）/@/submodule/date.js/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/パス(中略)/@/submodule/date.js/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/パス（中略）/.npm/_logs/2021-12-06T01_11_49_225Z-debug-0.log
```

package.jsonにsubmoduleいないよ？みたいなエラーのようです。




src¥submodule¥にdate.jsがないことが原因でした。

gitからソースコードをコピーして配置し、yarn serveできるようになりました。とほほ・・・
M5Stack用超音波測距ユニットのひみつ



夏ごろに買ってどうもうまく動かなかった超音波ユニット

https://www.switch-science.com/catalog/6738/

をどうにかしました。

# 結果

なんとか使えそう

![スクリーンショット 2021-12-06 11.00.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16626/9e910128-5266-4dc7-025c-164fa355448f.png)


# (1) はずれ値を取り除いて、平均する



```a.c
#include <M5StickC.h>

void setup() {
  M5.begin();
  M5.Lcd.setRotation(3);
  Wire.begin(32, 33);
}

int readEUS()
{
  uint32_t data;
  Wire.beginTransmission(0x57);
  Wire.write(0x01);
  Wire.endTransmission();
  delay(120);
  Wire.requestFrom(0x57,3);
  data  = Wire.read();data <<= 8;
  data |= Wire.read();data <<= 8;
  data |= Wire.read();
  return data / 1000;
}

int cmp_asc(const void *cmp1, const void *cmp2)
{
  int a = *((int*)cmp1);
  int b = *((int*)cmp2);
  return a - b;
}

#define HISTORY_SIZE 9
int history[HISTORY_SIZE];
int history_index = 0;
void loop() {
  int raw = readEUS();
  if(raw  <  20){ raw =   20; }
  if(1500 < raw){ raw = 1500; }

  history[history_index % HISTORY_SIZE] = raw;
  history_index++;

  int tmp[HISTORY_SIZE];
  for(int i=0; i<HISTORY_SIZE; i++){
    tmp[i] = history[i];
  }
  qsort(tmp, HISTORY_SIZE, sizeof(tmp[0]), cmp_asc);

  int sum = 0;
  int n = 0;
  for(int i=HISTORY_SIZE/3; i<2*HISTORY_SIZE/3; i++){
    sum += tmp[i];
    n++;
  }
  int avg = sum / n;

  for(int i=HISTORY_SIZE/3; i<2*HISTORY_SIZE/3; i++){
    printf("%d,", tmp[i]);
  }
  printf("%d\n", avg);

  M5.Lcd.fillScreen(TFT_BLACK);
  M5.Lcd.setCursor(3,3);
  M5.Lcd.printf("%dmm", avg);
}

```

# (2) ケースから取り出す

![IMG_3513.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16626/209bf0bd-4f58-c0bb-3db1-3324ffff8005.jpeg)


ケースの丸い輪っかが悪さしている？？
Bitbucket PipelineをGithub Actionsと比較しながら使ってみた

# Bitbucket PipelineとGithub Actionsの違い

仕事でBitbucketを使う機会がありましたのでPipeline使ってみました。
普段Github Actionsばかり使っているので、Bitbucket Pipelineと違うところを比較してみます。

## CI用のファイル

| Github | Bitbucket|
| --- | --- |
| .github/workflowsの*.yml |bitbucket-pipelines.yml |

Githubの方は作業の種類ごとに細かくファイルを分けれますが、bitbucketは一つのみ？

## 複数の処理

|| Github | Bitbucket|
|---| --- | --- |
|YAMLアンカー| 使えない |使える |
|matrix|使える|使えない|
Bitbucketは[YAMLアンカー](https://support.atlassian.com/bitbucket-cloud/docs/yaml-anchors/) を使って複数の処理を一つの記述にまとめて、必要に応じて処理を上書きできる。
対してGithubは[matrix](https://docs.github.com/ja/actions/learn-github-actions/workflow-syntax-for-github-actions#jobsjob_idstrategymatrix)を使うと、たとえばバージョン違いの検証などが簡単に行える。

CIで考えるとGithubの方がシンプル。Bitbucketはどんな内容でも対応できるので汎用性が高い。

## 他のサービスとの連携

| Github | Bitbucket|
| --- | --- |
| Workflowを利用する。 |　[Pipe](https://bitbucket.org/product/features/pipelines/integrations?_ga=2.203658256.1695454527.1569454632-928298313.1569454632)があると楽に利用できる　|

BitbicketはPipeを利用して連携することができる。GithubではWorkflowを利用して連携することができる。
設定などはBitbucketの方が簡単。

## 並列実行

| Github | Bitbucket|
| --- | --- |
| 設定不要　も使える | [parallel](https://support.atlassian.com/ja/bitbucket-cloud/docs/set-up-or-run-parallel-steps/)で指定する |

Githubは前述のyamlファイルの全てが並列に動きます。Bitbucket　Pipelineはparallel指定したもののみ。


## ほぼ同じところ

|項目| Github | Bitbucket|
|---| --- | --- |
|docker利用| 使える | 使える |
|リポジトリ環境変数| 使える | 使える |
|トリガー|[イベント](https://docs.github.com/ja/actions/learn-github-actions/events-that-trigger-workflows)|[パイプライントリガー](https://support.atlassian.com/ja/bitbucket-cloud/docs/pipeline-triggers/)|
|キャッシュ|利用できる|利用できる|
|ジョブ間の情報の共有|[Job outputs](https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#jobsjob_idoutputs)|[アーティファクトを共有する](https://support.atlassian.com/ja/bitbucket-cloud/docs/use-artifacts-in-steps/)|

## Bitbucketの特徴

yamlファイルの編集画面が色々と工夫されている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65643/573d507d-1242-3976-63d4-084711d5405a.png)

右側でテンプレートやPipeを選択してコピペすればすぐに使えるファイルができる。
でも、１ファイルで運用なのでかなりゴチャゴチャしてしまうので、stepは細かく分けたほうが良さそうです。

実行画面がBitbucketは結構作り込まれています。
Bitbucketは実行画面でdockerタブがあります。
![bitbucket実行画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65643/5d8b27ad-31a1-856b-6191-f1ab8eaaacee.jpeg)


あと、deploymentを指定すると、そもそも管理する画面が変わるので、CI/CDをまとめて行った時とかはみやすいと思います。

![bitbucketdeploy.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65643/8d816d3f-a411-d789-5fca-fd3536068609.jpeg)
bitbucketdeploy.jpg

デプロイごとの環境変数などを細かく指定することができます。  
![deployments.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65643/b950dd10-34d6-d0d5-cc0c-a5c02981da3b.jpeg)

ただ、GithubAcitonsだとWorkflowごとに処理を変えてCDさせれるので、管理という意味ではファイルで管理できるGithubActionsの方が好みです。

## 総評

Pipeで行える範囲で利用したり、WebUIで管理するのであればBitbucketは便利だと思います。Slack通知とかはあっという間に作成できます。

複数人で作業する場合などで、全部git上のファイルで管理するのであれば、GithubActionsの方が管理しやすいと感じました。

どちらも一長一短なので、今後の展開も見ていきたいと思います。
CDataSync最新の導入事例に見る利用パターン

#はじめに

こんにちは。日商エレクトロニクスのDX事業部門の技術統括をしています成塚と申します。2017年からCDataのパートナーとして製品を販売しております。パートナーを始めた2017年は一部のギークな方々への販売がメインだったCData製品ですが、最近は大手企業様への導入も多くなり、官公庁様への導入も始まっております。今年はかなり売れました。
特に売れ筋のCDataSyncですが、どんなパターンで利用されているのかをご紹介させて頂きます。


#CDataSyncとは

CDataSyncは、クラウドサービスやDBなどのをデータソースとしてデータを取得して、ファイル形式やDBへデータを渡すソフトウェアです。AWSやAzureなどのインスタンス、またはオンプレミスのサーバにソフトウェアをインストールして利用します。


#導入パターン
##事例1：クラウドサービスのデータをBIツールで可視化する
###＜お客様の問題点・要望＞
 (1)SaaSのデータは数百件毎しかデータを閲覧することができない。
 (2)BIツールでSaaSのデータを直接参照しに行くとレスポンスが遅い。
 (3)複数のSaaSのデータを組み合わせてBIツールで可視化したい。
 (4)SaaSのデータをETLを用いて取得・加工したいが、価格が高い。

###＜導入パターン＞
BIツールへのデータ連携をしたいお客様からのお問い合わせが最も多かったです。「Excelでの集計に限界を感じてきた」、「BIツールの普及が加速化してきた」、「利用しているSaaSの数が増えてきた」・・・。理由はいろいろあると思いますが、BIツール用のDBにデータを溜める目的でCDataSyncを用いるケースが増えてきました。弊社もその波に乗って、2020年にBIツールのYellowfinとOEM契約を締結して、CDataSyncとYellowfinを組み合わせたソリューションの販売を始めました。
SaaSにもダッシュボード機能、簡易な集計機能、検索・フィルタリング機能がついているものが増えてきています。しかし、数百万件を超えるような大量データになってくると、それらを使って運用することに限界を感じるお客様が多いのだと思います。さらに複数のSaaSからデータを取りたいとなった時にはインテグレーションが必要になってきます。ETLを使う、メインのクラウドサービスに集める(Salesforceなど)といった解決策と比較して、CDataSyncを選択するケースが何個もありました。AWSのRedshiftやSnowflakeなどDWHの利用者が増えてくるにあたり、今後も増え続けていくのだろうと思います。

##事例2：海外拠点のデータを集約する
###＜お客様の問題点・要望＞
 (1)複数の海外拠点のオンプレデータを、クラウドのDWHに溜めていきたい。
 (2)海外会計パッケージのDBを、日本から直接参照することができない。
 (3)海外の会計データをCSVで受け取る運用にした場合、（改ざん等）ガバナンスの観点で問題がある。

###＜導入パターン＞
こちらは、製造業のお客様からよくお声がけ頂きました。オンプレのデータを外から触れないので、CDataSyncをエージェントの役割で使うパターンです。オンプレ内にCDataSyncのサーバを立てて、CDataSyncが定期的に会計パッケージのデータを取得し、HTTPSプロトコルをはじめとした様々なプロトコルで指定されたDBやDWHにデータを渡します。あるお客様の中国拠点は、通信の設定からもお手伝いさせて頂きました。中国のメジャーな会計パッケージ「金蝶」のインタフェースは、CDataさんがいつものようにサクサクと作ってくれました。中国以外の対応も増えてきており、導入を進めています。


#まとめ
マイクロサービスを利用して部分最適を求める際には、それを横串して管理をするバックヤードの効率化が必要となります。2021年2月のITR社のレポートによると、データ・マネジメント市場のCAGR（2019～2024年度）は15.1%とのこと。今以上に多くのお客様がDWHやデータレイクを使っていくことになると思います。マイクロサービスのデータを集めて整合性を確認するにあたり、CDataSyncのような様々なSaaSやDBからデータを取得できるツールとBIツールの組み合わせは、今後どのような企業でも必要になってくるはずです。
ATTiny85でFPGA FMチューナをコントロール

[FPGA FMチューナ](http://fpga.world.coocan.jp/FM/)の選局ようにATTiny85で赤外線リモコンの信号を受信する小さなモジュールを作っています。シリアルの仕様は[こちら](https://hirokun.jp/av/fpga-tuner_fc.html)。

SONYのアナログテレビなどのリモコンを再利用できるように作られています。

たまにリモコンが見つからないとか、電池切れとかあるので、スイッチでも選局を変更できるようにすることを思いつきました。ちょうど良いプッシュスイッチが部品箱にありました。

![写真（2021-12-06 11.05）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/1f64829a-845b-2ae8-42eb-11197ecee6a6.jpeg)

INT0を赤外線受光器につないで割り込みとタイマーで信号を解析してuartで信号を送出しているようですが、今自分で見てもどうやってうごいているのかわかりません。 ^ ^;

uartのコードがクロックに依存していて、クロックのために5Vで駆動してシリアル信号は抵抗の分圧で3.3Vにしています。

省電力とノイズ削減の効果があるかと考え、sleepするようになっていて、INT0で復帰するように作られています。

とりあえず既存コードはできるだけいじらず、スイッチを付ける方法を考えます。

ATTinyでsleepの復帰は外部割り込みで、外部割り込みはINT0とPin Change Interrupt(PCI)が使えます。INT0とPCIの違いはINT0は信号のH,Lなどの細かい設定ができるのに対してPCIはすべての変化を拾ってしまうとろろです。sleepして復帰にINT0かPCIかのどちらかを使った方法を書いているページはありましたが、両方待つ方法を書いたページは見当たりませんでした。

sleep後のmainではGIFRは空になっています。ハンドラ処理が実行されるとクリアされるようです。

いろいろ試行錯誤して、PCIのハンドラを追加する方法にしたのですが、PCI_vectではなくて、PCINT0_vectでした。おそらく以前もはまりました。

このハンドラでスイッチからの復帰を確認して信号を送るようにしました。

https://github.com/yamori813/fpgafmctl

sleepのデバッグはテスターで電圧を測っておこないました。pull upを追加したので、幾分増えていますが、稼働時8mAでsleep時は0.8mAくらいになっています。

当初は実機で確認していたのですが、効率が悪いのでMacにつないだFTDIのチップでシリアル信号を受けて確認にしました。

開発環境はMBA Originalの雪豹です。

たまに赤外線のノイズを拾って誤動作することがありますが、気が向いたら直そうと思います。
FindNextの使い方

https://valmore.work/vba-find-next/

    ' FindNextで検索を継続
    Set rng = searchRng.FindNext(rng)

と　　　　　　　　　　　　　　　　　↑↑↑を指定しないと続けて検索してくれないYO

結構忘れるので注意っ
docker で使うコマンド一覧

#docker でよく使用するコマンドをまとめました。
## docker hub からimageを取ってくる

```terminal
docker pull <image>:<tag>
docker pull ubuntu:18.04
```

## 既存のimageを改変して変更を反映
```terminal
改変した後、
docker container ls
いま実行しているconteainer idを控えるておく。
docker commit -m "added xxx" -a "Tanaka Hanako" <container id> <username>/<image name>:<tag>
```
Selenium/Playwrightで要素が取得できなかった時はJavaScriptを実行するとうまくいく時がある

## 事象

PythonでSelenium/Playwrightを使って、AWS Cognitoの認証ページへのログインを自動化しようとする際、
画面上の要素（入力フォーム）を取得しようとするとエラーが出て要素を取得できませんでした。

怒られ方は

> element not interactable

とか

> timeout

とかであまり参考にならなかった覚えがあります（後日追記予定）

## 解決

それぞれのフレームワークで下記のようにページ内でJavaScriptを実行することで取得ができました。

```selenium.py
driver.execute_script("document.querySelectorAll('#signInFormUsername').value ='test'")
```

```playwight.py
page.evaluate("document.querySelectorAll('#signInFormUsername').value = 'test'")
```

## 考察

上のコードで動いた理由は著者は正確には把握できていません。

一番それっぽい理由は、[Seleniumを使ってテスト自動化。[第4回 応用編. Seleniumでテストシナリオを作成する際に注意するポイント]](https://callcenter-trend.com/2020/01/19/selenium-04-create-test-scenario-with-selenium-and-java/)に指摘のある、
「このような場合は要素上にHoverして一度Clickしたあとに入力するような流れをシミュレートする必要があり、JavaScriptだとその操作を(何故か)すっ飛ばせる」というものです。

本当にその処理を行えば入力が可能になるのか、何故Webdriver APIやDevtools Protocolでは直接入力できないのにJavaScriptなら直接入力可能なのか、というところの考察までは面倒だったのですっ飛ばしました。完。
(後者に関してはdriverが現在いる場所を保持しているか保持していないかが作用している予感はします)

## 参考記事

- [Seleniumを使ってテスト自動化。[第4回 応用編. Seleniumでテストシナリオを作成する際に注意するポイント]](https://callcenter-trend.com/2020/01/19/selenium-04-create-test-scenario-with-selenium-and-java/)
- [Unable to access modal-dialogue in cypress](https://stackoverflow.com/questions/69065349/unable-to-access-modal-dialogue-in-cypress)
- [AWS Cognito Log in Client](https://forum.robotframework.org/t/aws-cognito-log-in-client/1519)
- [How to login to website with some sort of AWS security using selenium webdriver](https://pretagteam.com/question/how-to-login-to-website-with-some-sort-of-aws-security-using-selenium-webdriver)
Go Linter - Staticcheckを使ってみる


この記事は[Wanoグループ Advent Calendar 2021 5日目](https://qiita.com/advent-calendar/2021/wano-group)の記事になります

Goには様々なlinterが存在しています。
元々Go公式のlinterはGolintですが、色々否定的な意見は少なく、今年ついにアーカイブされました。

代わりに使用するlinterとして GoやGoogleがサポートするStaticcheckが使ってみようかなと思います。

### 公式page （前身はGoSimple）

https://github.com/dominikh/go-tools


### Install

go 1.17なら、以下のcmdで実行 (過去versionの場合、go installじゃなくgo get使うかも)

```
$ go install honnef.co/go/tools/cmd/staticcheck@latest
```

### 実行

早速使ってみる

```
$ staticcheck ./...

...(略)
xxxxxxxx.go:108:7: receiver name should be a reflection of its identity; don't use generic names such as "this" or "self" (ST1006)
xxxxxx:21:10: should use fmt.Errorf(...) instead of errors.New(fmt.Sprintf(...)) (S1028)
xxxxxx:21:21: the argument is already a string, there's no need to use fmt.Sprintf (S1025)
...(略)

```

後ろ付いてるの番号はCheck番号、説明一覧はここで

https://staticcheck.io/docs/checks/

staticcheck.confを追加すれば、特定の番号だけ検知も可能です

```staticcheck.conf
checks = ["all", "-ST1000", "-ST1003", "-ST1016", "-ST1020", "-ST1021", "-ST1022", "-ST1023"]
```

他の細かい設定したいなら

https://staticcheck.io/docs/configuration
STSでStarterProjectを作成しようとしたら「unsupported class file major version 61」でこけた

## 「unsupported class file major version 61」ってなに？
Java17非対応だよ！と怒られている。
classファイルのversion61は、Java17を示す。

## 対策方法
（プロジェクトのビルドツールがGradleなら）Gradleのバージョンを上げる必要がある。
STSの preference >> Gradle を開くと、初期状態では「Gradle Wrapper」にチェックが付いているはず。

Gradle Wrapper is 何？ を知りたければぐぐると色々出て来るので読みましょう。
とりあえず今すぐ動かしたいなら、「Specific Gradle version」にチェックを入れて、GradleのバージョンをJava17サポート済みのものに変更すればOK。

## 著者プロフィール

faable01です。かつては創作仲間と小説を書いたり、製菓業界で楽しくやっていたはずが、紆余曲折を経て、サーバーレス技術を触るのが好きなITエンジニアになっていました。AWSのIaC兼サーバレス爆速開発ツール **「SST」** が好きです。個人ブログでもたまに記事を書いています。

https://signote.link

それから、業務日報SaaS **「RevisNote」** を運営しています。リッチテキストでの日報と、短文SNS感のある分報を書けるのが特徴で、組織に所属する人数での従量課金制です。アカウント開設後すぐ使えて、無料プランもあるから、気軽にお試しください。

https://revisnote.com?1710501811980
一流のエンジニアになるために一度は読んでおきたい、Google開発者用のコードレビューガイドをすごく簡単に要約してみた。

## はじめに

皆さんは普段どのようにコードレビューを行っていますか？
中々正解があるものではないので、いまいち作業にピンと来ていない方もいるかもしれません。

そんな方々におすすめしたいのが、[Code Review Developer Guide](https://google.github.io/eng-practices/review/)です。
Googleが、同社内のすべてのソフトウェア開発プロジェクトで実践しているプラクティスを開設する「Google Engineering Practices Documentation」の中で公開されているコードレビューガイドになります。

日本語ドキュメントもありますが、少々読みづらい部分もあるので僕なりの解釈で皆さんに内容をご紹介します。

## [コードレビューの目的](https://google.github.io/eng-practices/review/reviewer/standard.html)

コード全体の質が向上していることを確認すること

## [コードレビューで開発を止めてはいけない](https://google.github.io/eng-practices/review/reviewer/standard.html)
完璧なコードではなく、より良いコードで継続的に開発を行うことを意識します。


- 大事になのは「完璧」ではなく「より良い」コード
- 「より良いコード」によって継続的な改善をすることが重要
- レビュアーはPullRequestが完璧でなくても、コード全体の健全性を確実に向上させる状態になれば、承認しよう。


## [コードレビューのチェックポイント](https://google.github.io/eng-practices/review/reviewer/looking-for.html)

コードレビューでは以下の項目についてコードの質が担保されることが期待されます。

- 【**設計**】そのコードは設計が良く、システムに適しているか？
- 【**機能**】コードは作者が意図した通りに動作しているか？そのコードの動作はユーザーにとって良いものか？
- 【**複雑さ**】コードはもっとシンプルにできないか？他の開発者が将来このコードに出会ったとき、簡単に理解して使用することができるか？
- 【**テスト**】そのコードには正しく設計された自動テストがあるか？
- 【**命名**】開発者は、変数、クラス、メソッドなどに明確な名前を選んだか？
- 【**コメント**】コメントは明確で有用であるか？
- 【**スタイル**】コードは当社のスタイルガイドに沿っているか？
- 【**ドキュメント**】開発者は関連するドキュメントも更新したか？


## [重要度の高いところから順に見る](https://google.github.io/eng-practices/review/reviewer/navigate.html)

変更の一番重要な点を理解し、効率的なレビューをするためには全体像から変更を確認します。

1. プルリクエストのタイトル・説明を見る
2. 変更コードで一番重要なファイルを確認する
3. それ以外の残りの部分を確認する


## [依頼が来たらすぐレビューする](https://google.github.io/eng-practices/review/reviewer/speed.html)


コードレビューはなるべく早く行いましょう。
コードレビューが遅くなると以下のデメリットがあるからです。

### コードレビューが遅くなった時のデメリット

- チーム全体の速度が低下する
- 開発者がコードレビューのプロセスに抵抗し始める
- コードの健全性に影響を与える可能性がある


## [レビュイーに配慮し、理解しやすいコメントをする](https://google.github.io/eng-practices/review/reviewer/comments.html)

レビュアーとレビュイーの関係性を良好に保つため、コードの可読性を上げるためのコメントの書き方です。


- やさしさを持つこと
- 根拠を説明すること
- 明確な指示を出すことと、問題点を指摘して開発者に判断を委ねることのバランスをとる
- コードの複雑さを説明するのではなく、コードを単純化したり、コードコメントを追加するように開発者に働きかける


## [コードの変更は小さくすること](https://google.github.io/eng-practices/review/developer/small-cls.html)(レビュイー)

変更を小さくすることで、正確なレビューを迅速に行い、その後の変更にも強くなります。


### 変更を小さくすることによるメリット

- より早くレビューを行える
- より細部までレビューできる
- バグが発生しにくい
- リジェクトされても無駄な作業が少ない
- マージしやすい
- レビューの妨げにならない
- ロールバックが簡単

## 参考
https://google.github.io/eng-practices/review/reviewer/
https://github.com/google/eng-practices


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1658704/99588134-fda6-8a69-b5d8-849af2958710.png)
https://i-ssue.com/

エンジニアの副業やフリーランス、スキルアップについての情報発信してるのでフォローしていただけると励みになります！
[@twinsdevelopper](https://twitter.com/twinsdevelopper)
Movable Type のテーマ構築時に確認したいこと

この記事は この記事は、[ビットスター Advent Calendar 2021](https://qiita.com/advent-calendar/2021/bitstar-inc) の 7日目 になります。

仕事で Movable Type のテーマを構築するとき、毎回似たようなところで困っては
ググってるんですが、どうもこのCMSに関する記事が少ないように感じるので、
今回は2つほどメモっておきます。

## 記事を全件取得したい
:::note info
Movable Type は、テーマのカスタマイズに使用するテンプレートタグ(MTタグ)に 
『モディファイア』 を組み合わせることで、MTタグの出力結果を加工・修正出来ます。
:::

「TOPページ」や「お知らせ一覧」ページでよく使う、記事を取得する ``<mt:Entries>`` ですが、モディファイアを何も設定しなかった場合は、管理画面の値を参照してその値分の記事を取得します。
（「設定」→「全般」→「表示に関する初期設定」→「表示数」の値で、デフォルトが10）
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2091917/689eeca2-75e8-4b63-3e4a-c0da0a2130a3.png)
私みたいに「モディファイア設定してないから全記事取得できるっしょ」って思っていると、
更新した記事が全て反映されず困ります。
よって、記事を全件取得する場合はなにかしらモディファイアの指定が必要になります。

パッと思いつく方法では、取得する記事数を指定する ``lastn`` モディファイアを使って、
``登録されている記事数 ＜ latsnモディファイアの値``
としてあげれば実質全記事取得なので

```
<mt:Entries lastn="99999">
    コンテンツ記載
</mt:Entries>
```

みたいな設定をしてたんですが、あんまりカッコよくないのと、
遠い未来に99999記事以上更新された場合に全記事取得出来なくなります。

ちゃんとマニュアル読んだり、色々試してみた結果、**lastn に指定する値を「0」にする** ことで
カッコよく（？）解決できます。

```
<mt:Entries lastn="0">
    コンテンツ記載
</mt:Entries>
```

他にも、管理画面内、「設定」→「全般」→「表示に関する初期設定」→「表示数」の値を0にする という方法もあったのですが、この値は ``<$mt:EntriesCount$>`` 等、他のタグも参照する値なので、変更するのは要注意かなと思ってます。

## 更新した記事がTOPページに反映されない
個人的に結構な回数引っかかってるやつです。

↓みたいな構成でサイトを制作した際に、「お知らせ」で更新した記事を「TOPページ」側に表示したい場合、記事を更新しただけでは「TOPページ」には表示されません。

```
サイトA(親サイト、TOPページの役割で子サイトの記事を並べて表示したい)
    お知らせ(子サイト)
    スタッフブログ(子サイト)
    商品一覧(子サイト)
```

:::note info
Movable Type は管理画面で構成したコンテンツを静的ファイルに書き出してサーバに設置する 『再構築』 という手順があります。
:::

基本的に再構築は1サイトごとで、「お知らせ」で記事を更新すると「TOPページ」側には再構築が発生しないため、
``「子サイトで記事の更新」 → 「TOPページの再構築」``
という手順を踏む必要があります。
この手順を毎度忘れてしまうため、何度もTOPページのスーパーリロードを繰り返しては
「記事反映されんな・・・」と困ってます。

意識して各サイト再構築していけばいいのですが、この悲しい時間を無くすことが出来る
機能がMovable Type 7から **「再構築トリガー」** という名前で導入されました。
（Movable Type 6以前にも MultiBlogプラグイン としてあったけど、ついに）

再構築トリガーについては公式のマニュアルにも[記載があります](https://www.movabletype.jp/documentation/mt7/admin-guide/manage-site/settings/rebuild-trigger/)が、
設定画面を開けば指示に従ってポチポチ選択するだけで、かんたんに設定できます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2091917/1131ff0d-9549-fff6-ab16-73a6301a042c.png)
このあたり、なんとなくIFTTTを思い出しました。

記事の公開、または削除のタイミングで再構築が走るように設定ができるので、
この 再構築トリガー を設定しておくと大きなサイトを構築する際に運用がかなり楽になります。
HEIC画像をjsで.pngや.jpegに変換する

# HEIC画像とは
iOSのスマホで撮影した写真の形式で、高画質でありがながら、サイズが軽いという特徴があります。
元々は「JPEG」形式だったのですが、iOS11以降より変わったようです。
拡張子はそのまま「.HIEC」もしくは「.HEIF」です。

# 抱えている課題
ブラウザではこのHEIC画像を表示することが出来ないという課題があります。
開発中のスマホアプリの中で、.heicのままURLをDBなどに保存し、そのURLをブラウザで表示したいとなった時に、問題が発生するという状態です。
ただ拡張子を変えても、上手く表示できません。 

※ちなみに、この「.HEIC」形式の画像はiOSのアプリ内で利用する分には問題ありません。  

### 課題を体験
以下URLにアクセスすると、ブラウザで表示されるのではなく、ローカルにダウンロードされてしまうと思います。 
https://alexcorvi.github.io/heic2any/demo/1.heic 
これを通常の画像と同じようにブラウザに表示したいのに、出来ないという問題に直面した方のための記事になります。

# 解決策  
「Heic2any」を利用する。コード内で利用したい時にはこちらのライブラリを使用してみてください。  
[Heic2any](https://alexcorvi.github.io/heic2any/)  

```JavaScript
fetch("https://alexcorvi.github.io/heic2any/demo/1.heic")//上記に記載した、ダウンロードされてしまうURL。
    .then((res) => res.blob())
    .then((blob) => heic2any({ 
            blob,
            toType: "image/jpeg",//ここでpngを指定することもできます。 
        }))
    .then((conversionResult) => {
        var url = URL.createObjectURL(conversionResult);//変換後のURL。このURLを利用するとでブラウザでも表示できるようになる。
    })
    .catch((e) => {
        // see error handling section
    });
```

上記ライブラリはGIFへの変換も可能なようです。 
必要であれば、利用してみてください。
Git　Commitizenをグローバルで設定する

グローバルで設定する方法がややこしかったのでメモ

以下でOK。

```sh
npm install commitizen -g
npm install -g cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
```

ドキュメントにはinitのコマンドが書かれているけれど、自分の環境ではうまく動かなかったので、直接`.czrc`に書き込んでいます。
僕も Ruby で 競プロでのデバッグを標準エラー出力で行っているという話 やってみた

# はじめに
@amaguri0408 さんの記事 [競プロでのデバッグを標準エラー出力で行っているという話](https://qiita.com/amaguri0408/items/61d65c3bea3a5815d704) が素敵でしたので、やってみました。
# Ruby(WA)
```ruby
N, X = gets.split.map(&:to_i)
A = gets.split.map(&:to_i)
known = [false] * N

x = X
while known[x].!
  known[x] = true
  x = A[x]
end
ans = 0
known.each do |i|
  ans += 1 if i
end
puts ans
```
```
4 2
3 1 1 2
2
```
うむ、3 が正答なので`WA`ですね。
# p
```ruby
N, X = gets.split.map(&:to_i)
A = gets.split.map{ _1.to_i - 1 }
known = [false] * N

x = X - 1
while known[x].!
  known[x] = true
  x = A[x]
  p [x, known]
end
ans = 0
known.each do |i|
  ans += 1 if i
end
puts ans
```
```
4 2
3 1 1 2
[0, [false, true, false, false]]
[2, [true, true, false, false]] 
[0, [true, true, true, false]]  
3
```
`Ruby`でデバッグするときは`p`を使います。
# warn
```ruby
N, X = gets.split.map(&:to_i)
A = gets.split.map{ _1.to_i - 1 }
known = [false] * N

x = X - 1
while known[x].!
  known[x] = true
  x = A[x]
  warn "#{x} #{known}"
end
ans = 0
known.each do |i|
  ans += 1 if i
end
puts ans
```
![20211206a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538241/e3584868-a168-a927-63af-c3a3213fb766.png)
おぉ、標準エラー出力にキターーーーーー
# まとめ
+ @amaguri0408 さん、ありがとう
+ AtCoderに詳しくなった
Docker network memo

List all the docker networks:

```
~> docker network ls                                                                                                       NETWORK ID     NAME                                     DRIVER    SCOPE
6632005b7b01   bridge                                   bridge    local
446a6bafd4ce   host                                     host      local
efde81885e68   keycloak_default                         bridge    local
3c1e0372f203   mysql-compose_default                    bridge    local
```

Add a service into one of the networks.

```
services:
  keycloak:
      image: quay.io/keycloak/keycloak:latest
      environment:
        DB_VENDOR: MYSQL
        DB_ADDR: 172.19.0.2
        DB_DATABASE: keycloak
        DB_USER: root
        DB_PASSWORD: password
        KEYCLOAK_USER: admin
        KEYCLOAK_PASSWORD: Pa55w0rd
        # Uncomment the line below if you want to specify JDBC parameters. The parameter below is just an example, and it shouldn't be used in production without knowledge. It is highly recommended that you read the MySQL JDBC driver documentation in order to use it.
        #JDBC_PARAMS: "connectTimeout=30000"
      ports:
        - 8090:8080
      networks:
        - mysqlnetwork

networks:
  mysqlnetwork:
    name: mysql-compose_default
```


Check service's ip in docker network:

```
docker network inspect mysql-compose_default
```

Reset docker network:

```
docker network prune
docker-compose down
docker-compose up
```
SSMS（18.10）をインストールしてみた

画面キャプチャを残します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564542/28c299d7-9fe1-413c-c4c6-008b058b3614.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564542/b039bd96-a656-039d-e735-fd90eb42dd8b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564542/b6bb3b2f-d3a6-f6b0-acba-d508b1bf86db.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564542/7740b4eb-24c3-b567-8b6c-ea6cbf619578.png)

以上
SalesforceのAPIについてまとめ

# はじめに
社会人1年目のyappiです。
Salesforceの問題集を解いた中で、調査した内容をまとめます。
今回、使用させていただいた問題集はこちらです。
[Salesforceの一番星(アンダーソンさん)
【試験問題】Salesforce認定　上級デベロッパー資格取得へ](https://keneloper.com/certified-advanced-developer-exam-collection1/)

# 調査内容
今回はSOAP API・Bulk API・REST API・メタデータAPIの4つについてまとめていきます。
それぞれのAPIの特徴・使用場面などがわからず...。って感じだったので。

## SOAP API
### 特徴(開発者ガイド引用)
>SOAP API を使用して、取引先、リード、カスタムオブジェクトなどのレコードを作成、取得、更新、または削除します。さらに、SOAP API では 20 種類を超えるコールを使用して、パスワードの管理や検索の実行などの多くの機能を実行できます。SOAP API は、Web サービスをサポートしている言語で使用できます。

### まとめ
・データの伝達には主にHTTPを用いることで、Webサービスの提供や利用に適している。
・レコードの操作や定義された大容量のメタデータ取得、ユーザパスワードの変更といった機能も豊富。

## Bulk API
### 特徴(開発者ガイド引用)
>REST ベースの Bulk API 2.0 では、Salesforce 組織の大きなデータセットを非同期でアップロード、照会、または削除するオプションがプログラムされています。2,000 件以上のレコードを含むデータを操作する場合は、Bulk API 2.0 の使用が適しています。この API により、Bulk フレームワークを利用して非同期ワークフローの準備、実行、管理を正常に行えます。2,000 レコード以下のジョブでは、REST (Composite など) または SOAP による「一括」の同期呼び出しを行うことをお勧めします。

### 要点まとめ
・組織への初回データ読み込みなど大量のレコード処理に適したAPI。
・複数のバッチ処理でも多数のレコードを非同期でクエリ、queryAll、更新・導入または削除することが可能。

## REST API
### 特徴(開発者ガイド引用)
>REST API によって、Salesforce のデータにプログラムを使用してアクセスできます。REST API は柔軟性と拡張性に優れているため、Salesforce をアプリケーションに統合したり、大規模で複雑な操作を行ったりするときには最善の選択肢となります。

### 要点まとめ
・軽量なデータを操作することに適したAPIあらゆる種類のSalesforce機能をRESTリソースとHTTPメソッドを介して公開する。
・レコードの作成や、読み取り、更新、削除、検索またはクエリ、オブジェクトメタデータの取得、組織の制限に関する情報のアクセスなどが可能。
・実装が簡単かつ通信量が軽量な点がメリットで、ブラウザ・モバイルアプリに強い。

## メタデータAPI
### 特徴(開発者ガイド引用)
>メタデータ (XML ファイル) を Salesforce 組織とローカルファイルシステム間で移動するには、deploy() コールと retrieve() コールを使用します。ファイルシステムに XML ファイルを取得すると、ソースコード制御システムでの変更管理、コードまたは設定・定義のコピーと貼り付け、コンポーネントへの変更の diff 出力、およびその他多数のファイルベース開発操作の実行を行えるようになります。

### 要点まとめ
・開発プロセス中にSalesforceの組織間でメタデータで移動できる。
・カスタムオブジェクト定義やページレイアウトなどのカスタマイズ情報をリリース、取得、作成、更新、削除する。

## 参考文献
・[Bulk API開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.api_asynch.meta/api_asynch/asynch_api_intro.htm)
・[SOAP API開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.api.meta/api/sforce_api_quickstart_intro.htm)
・[メタデータ API開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.api_meta.meta/api_meta/file_based.htm)
・[REST API開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.api_rest.meta/api_rest/intro_rest.htm)
・[どのAPIを使用するか？](https://help.salesforce.com/s/articleView?id=sf.integrate_what_is_api.htm&type=5)

## さいごに
今回まとめた要点は、あくまでもSalesforce初学者のまとめですので、至らない部分があるかと思います。また、開発者ガイドを参考にまとめているため、内容が薄い部分もあるかと思いますが、今後もAPIについて調査したことがあれば、にくづけしていきたいと思います。
Cyber Santa is Coming to Town　Writeup

#　Cyber Santa is Coming to Town
時間ができたので一部だけですが解いてみました!!
## Common Mistake

2つの$n,e,ct$の組み合わせが渡されますが、ここで$n$の値が一致していることに気が付きます。
よって同じ素数を用いて暗合していることが確認でき

```math
\begin{align}
\ &\left\{
\begin{array}{l}
ct[0]=m^{e[0]} \ mod \ n\\
ct[1]=m^{e[1]} \ mod \ n
\end{array}
\right. \\
\end{align}
```
となり

```math
\frac{ct[0]^a}{ct[1]^b}=\frac{m^{a*e[0]}}{m^{b*e[1]}} \ mod \ n\\
```

$a*e[0]-b*e[1] \equiv 1 $となるものを探せば$a*e[0]-b*e[1] \equiv \  mod \ \varphi(n) $であることもわかります。よって探してみると$a=-2,b=3745$より$m$が求まりflagは
```HTB{c0mm0n_m0d_4774ck_15_4n07h3r_cl4ss1c} ```となる

## XMAS Spirit

プログラムを見る限りpdfファイルをバイト列で読み込んで$a*dt[0]+b=ct[0]$という形で暗号化されています。
ここでLLLできそうな予感もしますが、一旦読込先がpdfファイルなことを考慮すると$dt[0]-dt[4]$は$37, 80, 68, 70$であることがわかります。
これを用いると

```math
\begin{align}
\ &\left\{
\begin{array}{l}
a*dt[0]+b=ct[0] \ mod \ 256\\
a*dt[1]+b=ct[1] \ mod \ 256
\end{array}
\right. \\

\Leftrightarrow &\left\{
\begin{array}{l}
a*(dt[0]-dt[1])=ct[0]-ct[1] \ mod \ 256 \\
b*(dt[1]-dt[0])=ct[0]*dt[1]-ct[1]*dt[0] \ mod \ 256
\end{array}
\right.\\

\Leftrightarrow &\left\{
\begin{array}{l}
a=(ct[0]-ct[1])*(dt[0]-dt[1])^{-1} \ mod \ 256 \\
b=(ct[0]*dt[1]-ct[1]*dt[0])*(dt[1]-dt[0])^{-1} \ mod \ 256
\end{array}
\right.\\
\end{align}
```
これを求めて$a=169,b=160$になります。

よって、$dt[i]=(ct[i]-b)*a^{-1}$を求めればflagが出ます。
``` HTB{4ff1n3_c1ph3r_15_51mpl3_m47h5} ```



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1810405/c56bd2ef-fb96-d84e-8cc0-289e6301c24d.png)
マスクをつけた顔を検出する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/3be5aa73-a748-1068-594f-b32622092804.png" width=200><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/677a919f-b119-8335-43e7-8b318f1a1860.png" width=200><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/542ec262-6c19-cc7a-66a3-c940d017a4a2.png" width=200>
これまでVisionでは顔の検出はできても、マスクをつけた顔は検知できなかった。

【従来はマスクの顔は検出されない】
<img src="https://user-images.githubusercontent.com/23278992/144768808-85e822fa-4c0f-4423-ada3-74b8602c824e.gif" width=200> <img src="https://user-images.githubusercontent.com/23278992/144768851-4d552bf9-e327-46b1-a4cc-807bce3c5019.gif" width=200>

僕はそれを逆手にとって、マスク未着用検知をしたりしました（Visionが反応するということはマスクをつけていない）。
<img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F235259%2Fb8854bbb-2538-c550-dce5-a10604034f93.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=8fc62de9b7f6b07802b51327259db870" width=200>

https://qiita.com/john-rocky/items/44bd53abbb1cc1a87f85

**2021年のiOS15バージョンから、マスクをつけた顔も検出できるようになった。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/bcf1a632-c548-7960-6780-c37005bbba75.png" width=200>

顔を検出する最小構成は以下。

```swift
let faceDetectionRequest = VNDetectFaceRectanglesRequest()
let handler = VNImageRequestHandler(cvPixelBuffer: pixelBuffer, orientation: .leftMirrored, options: [:])

do {
   try handler.perform([faceDetectionRequest])
   guard let faceObservations = faceDetectionRequest.results as? [VNFaceObservation] else { return }
} catch {
   print("Vision error: \(error.localizedDescription)")
}
```

マスクをつけた顔が検出できるのは、VNDetectFaceRectanglesRequestRevision3から。

```swift
let faceDetectionRequest = VNDetectFaceRectanglesRequest()
if #available(iOS 15.0, *) {
    faceDetectionRequest.revision = VNDetectFaceRectanglesRequestRevision3
} else {
    // Fallback on earlier versions
}
```

【マスクをつけた顔を検出】
<img src="https://user-images.githubusercontent.com/23278992/144771624-e9b7131d-f715-49c2-bf0f-a425e890001a.gif" width=200>
Azure Databricksにてfiles in a Databricks repo機能により既存Reposにファイルを作成できない事象への対応方法

## エラー要因
Databricks Reposにて、ノートブックだけでなくファイルもアップロードできるようになったのですが、既存Reposにてファイルを作成の手順を実施してもファイルが実際に作成されませんでした。

[Databricks Repos Is Now Generally Available - New ‘Files’ Feature in Public Preview - Databricks ブログ](https://databricks.com/jp/blog/2021/10/07/databricks-repos-is-now-generally-available.html)

実際にどのような動作をしたかを紹介します。
既存のReposにて、右クリック -> `Create` -> `File`を設定選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/baa93e04-a666-0cbd-9e9d-4d01d3484caf.png)

ファイル名を入力後、`Create File`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/4e3021dc-b3bf-7f0f-b11e-397a964c24fa.png)

ファイルが作成されませんでた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/4a2c4737-8826-2c68-a82d-b606e52abbd2.png)

## 原因と対策
ReposごとにファイルのPULLに対する承認が必要なようです。

右クリック -> `Git`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/fbce6ddc-302f-2cf2-55b6-b32ab8956fb9.png)

メッセージボックスにて、`Agree and Pull`を選択

> Pull required
Your admin has enabled the ‘Files in Repos’ feature for this Workspace. Before your changes can be committed and pushed you will need to do a pull operation. This will pull your non-notebook files from your remote Git repository to Databricks repo.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/ae65e5e3-a73d-0583-06cb-69fc9276f6cb.png)

ファイルを作成する手順を実施して、ファイルが作成されたことを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/f2509cb9-c07c-9ce3-0e0d-afd6ef2db1f0.png)


## 注意事項
特になし
CSにおける遠距離間での連携

#はじめに
早いもので12月も二週目に突入しました。
カスタマーサポート（以下「CS」という）に従事されている皆さまは今年の年末年始はどう過ごせるかなと想像するような時期かもしれませんが、今年も気持ちよく新年を迎えられるといいですね。
投稿が初めてとなるので簡単に自己紹介させていただきますと、私はCSに関わって早10年、グリーで4年目となりました。現在はゲームタイトルのCS（二次対応チーム）を担当しております。
　
CS対応においては、二次対応が東京、一次対応が地方という複数拠点でのCS対応が多いかと思います。そのような体制の中で、物理的距離により密な連携ができないといったような課題に対して、いかにしてアプローチしていけばよいのか、弊社での事例も交えながらご紹介させていただきます。

よろしくお願いいたします！☆彡

#CS複数拠点体制における連携の課題
まず、弊社の例でいうと以下のような業務区分でCS体制を運営しております。

| 拠点 | ロケーション | 主な対応内容 |
|:-----------|------------|:------------|
| 一次対応拠点①  | 国内地方      | お客さまへのメール返信対応 、Twitter対応      |
| 一次対応拠点②       | 国内地方       | お客さまへの電話対応        |
| 一次対応拠点③         | 海外         | 海外のお客さまへのメール返信対応          |
| 二次対応拠点      | 本社東京       |   一次対応のフォロー（二次受け）<br>開発側との連携  |


このように国内だけでも複数の対応拠点があり、さらに海外の拠点とも常時連携が必要になるため、主に以下のような課題がありました。

・それぞれの拠点内の管理に任せきりになる（連携が不足する）
・お客さまニーズの変化への対応不足
・ナレッジの最新化の維持

**では上記の課題に対して、前提となる背景は何になるでしょうか。**
・物理的距離による連携のしづらさ（MTG不足）
・即時連携の難しさ


先に挙げた3つの課題に対しては、それぞれの課題解決へのアプローチがありますが、今回は前提としての**拠点間の情報連携**にスポットをあてて、説明したいと思います。
（３つの課題の直接的な課題解決については別の機会があればご紹介したいと思います）



#情報連携に対するアプローチ
拠点間に物理的距離がある場合、直接的なコミュニケーション機会が少なかったり、オンライン上での限られた機会での連携が必要となります。
そのため今回は``内容・体制・方法``の3つの視点でのアプローチを考えてみます。


**①連携内容**
**レポートに数値報告や内訳の説明はいらない**

自分自身も経験のあることですが、レポーティングにおいて、見れば分かる件数や内訳の報告に、貴重なMTGの時間を費やしているのは非効率です。
数値の算出（可視化）や内訳の記載はさっさと自動化して、連携MTGにおいては各自で確認いただく程度にすべきです。
例えば弊社ではGoogleデータポータルを利用し、数値の自動更新ならびに内訳も含めた表やグラフの作成も全て自動化しています。
　
では代わりに何を報告するのか。以下をポイントと考えています。
・変化の有無（ある場合は箇所）
・変化のあった理由（仮説）、または無い理由
・変化に対してどう動いたか（何をしたか、何をしようと思っているか）

上記を連携することで
``どんな変化があったか、それはなぜか、それに対してどう対応するべきか（対応しないべきか）``
がすり合わせできるため、拠点間の認識齟齬や情報の劣化を防ぐことができます。




**②連携体制**
**レイヤーごとの連携体制の構築**

連携体制（スキーム）を構築する際に、いかに効率的に連携できるかということを考えるケースが多いと思います。
担当ごとに分けたり、役割で分けたり、逆にMTGをまとめたり、slackなどでALLチャンネルを作ったりと、色々な方法があると思いますが、私が考える効率のよい体制とは
レイヤーごとの連携体制です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348480/6bd4df9e-5183-ce77-b246-8f15ed6bd0a5.png)




理由としては、それぞれの役割によって連携すべき情報（ほしい情報）が異なるからです。
もちろん拠点内での縦の連携も重要だと思いますが、物理的に距離のある拠点間の連携という観点だと
必要な情報をより素早く連携するには、レイヤー毎に情報連携できるスキームや体制を構築しておくことが重要です。





**③連携方法**
**定期連携方法と即時連携方法は用途や目的を明確にする**

いわゆる定例開催のMTGと障害発生時や新情報の更新など即時連携が必要な連携の方法は
``別々の方法を確保しておく``
ことが重要です。

例えば
・定例MTG　⇒オンライン会議
・即時連携　⇒slack（メンション先も決めておく）
など、それぞれの連携において、何をどんなときに誰と連携するかを明確にしておくことです。
情報の滞留を防ぐとともに、slackで色んな情報が飛び交って重要な情報を見逃してしまうというような事態も防ぐことができます。


#さいごに#
今回は要点のみの説明となりましたが、弊社の場合、上記の観点からMTGをはじめとした連携内容の見直しを行った結果、チーム全体で月に約80H程度の工数削減にも成功しました。
コロナ禍で長距離の移動や直接的なコミュニケーションが制限される中、これまでの連携内容や方法を改めて見直す良い機会としてみるのはいかがでしょうか。
postgreSQL インデックスを使わないとどうなる？

#やりたいこと
インデックスを使わないと、どういったことが発生するのかを実験をします。
DBを触ったことがない人向けに作りたいと思いました

#前提
・postgreSQL1000万件のデータをinsertしたテーブルを使います
・データベースはAWS RDS PostgreSQLを使います。
　(インスタンスタイプはt3.micro)

以前の記事
　postgreSQLで1000万件データをいれてみる
　https://qiita.com/Tarou2000/items/40bffbb4fbb5c466740b

#実験する内容
(1).以下のように1000万件から1つのデータを取得

```sql:SQL
select * from test
where id = 'ffff73bc-f31b-433d-b57d-54b88a814c5b'
```

(2) (1)を100回selectしてみます。

#結論
(1)について
　SQLの完了に時間がかかる。
　約6秒かかりました。

(2)について
　連続でSQLを実行すると、データベースのCPU使用率が30%になる。

#(1) select 1回の処理時間
・実行時間はこちら (約6秒)
　Excution Time: 6336.652ms
・Seq Scanなので、全件のデータを取得してます。
　並列処理しているようです
　
![スクリーンショット 2021-12-05 17.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681795/b22dc300-ddbc-06e9-3d08-884df2652005.png)

#(2)のselectを100回実行したときのCPU
100回順番に実行。プログラムを実行開始して終わるまでに10分ほどかかりました・・
CPU負荷が増えています。
![スクリーンショット 2021-12-05 18.03.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681795/f7f7e7e7-302e-0713-fb4c-53c89ea1e17e.png)

#他に考えられる問題
max_connectionも問題になります。
6秒かかるということは、連続非同期でSQLを実行すると、プールが処理が終わってないため、connectionが増えていきます。
AWS RDS t3.microのmax_connectionsは83。
83以上になると、エラーになり処理できなくなります。


#結果
というわけでインデックスを使いましょう。

#次
次はインデックスを使った場合とパーティーションテーブルを使ったときもやりたいと思います。
【プランナーを】ステージ制作ツールを作った話【救いたい】

![megamoji (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1591476/6d50bf6b-53fe-56d6-9f57-5773fe97b5dd.png)![megamoji (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1591476/cd2f3cce-b30e-2c30-b579-ced08a97001c.png)![megamoji (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1591476/c04acfd6-47dc-edf1-428b-76e8ccabce4d.png)
今回は、私がチームで開発した際に作った【ステージ開発ツール】についてお話します。

まず最初に、皆さんが疑問に思いそうなことを書いていきます。
#Q.なんでツールを作ったのか？
A.ゲーム作りを効率よく進めるためです。
　この時制作したゲームがステージ制のゲームだったため、簡単にステージを作りたいよねぇ～
ということで作りました。

#Q.制作期間は？
A.覚えてない！

---
というわけで書いていきたいと思います！

#目次
1.ツールってそもそも何？
2.どんな技術使うの？
3.苦労したこと
4.最後に
の4本でおとどけしま～す

#1.ツールってそもそも何？
ゲームのステージとかをつくのを楽にしてくれるもの
これがあることで、ステージを作るのが**めっちゃ**早くなる

ここで、一度ツールを作るメリットをまとめてみましょう！

**ツールを使うメリット！**
　・ステージを作る作業が鬼のように早くなり、時間が作れるよ
　・ステージを死ぬほど作ると、ステージの精度が上がるよ
　・ゲームが面白くなりやすいよ！多分！

**デメリット!?**
　・ツールを作るのに時間がちょっとかかる

メリットとデメリットを並べてみると、ツールを作ったほうがメリットが多くて
めちゃくちゃ良いことがわかるね。わかるよね！

ツールを使うとよいゲームジャンルには
・パズル
・シュミレーション
　　　　等のステージを大量に生産するゲームがあげられます

#2.どんな技術を使うの？
ツール上で制作したステージを保存するために**JSON**や、**XML**を使うといいよ
Unity側では、入力したデータを受け取るためのクラスを用意してあげよう
↓JSON
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1591476/c054b2ba-0b9e-f679-a050-3cd0a5796bb4.png)

↓XML
![XML.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1591476/15c48b17-8c42-204e-8d7c-dea0fd30ec04.png)

上記の形式でデータを作ったら***StreamingAssets***や、サーバー上に保存しようね！
StreamingAssetsを使うとビルドした後にも、ステージのデータとかをいじれるから便利だね!!!!!!

↓StreamingAssetsにデータを保存した時のファイル構成
![スクリーンショット 2021-12-06 085534.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1591476/0526d712-0c96-7557-3bdd-eac3a5f5b9b1.png)

UnityでJSONのデータをやり取りするためには、[Serializable]を使用する必要があるよ💛
気になった人はめちゃくちゃググろう💛

#3.苦労したこと!

Unityに反映させるときに、意見のすり合わせガバガバだと、***大変***なことになりますよ！(*一敗*)
ツールを担当する時には、ことあるごとに言ってすり合わせを**しようね**
そうすると、***超地上最強究極***ツールが作れるよ
あと、XMLとJSONどちらが適しているのかも話し合いしまくろうね
そうしないと、思ってたより使いにくいとかあるからね！まじで！

#4.その他
ツールを作ると、作業が安定して進めやすくなるので積極的に作っていこう!
頑張ろう！
そして！
皆もツールを作って頭をなやませよう！

![destoryIjo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1591476/1642ff3f-8dc0-6c1b-613b-a885e6fa9088.gif)
ASCとDESCを覚えるのが苦手な人へ。私はこれで覚えました。

この記事は [Ateam Lifestyle Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-lifestyle) 12日目の記事です。

## はじめに

SQLやスプレッドシートのクエリ関数などでデータを並び替える時、`ASC`と`DESC`ってどっちが、昇順で、どっちが降順だっけ。という経験はありませんか？

そんな方（だけに）必見で、イメージで連想できるような覚え方をプレゼントします:santa_tone1:。

## ↑ ASC

![15200908102748.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/d707045f-71db-d9cb-8b50-e7a22d0de62c.jpeg)

明日（ASC）へ行く感じが、低いところから始まって、高いところへ行くイメージで、覚えやすいですね。

## ↓ DESC

![3F3DFA74-64AA-4A8A-953E-994DF9CEBB19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/c7fd50cb-988a-2bd1-b7d2-b69a073daef8.png)

机（デスク）に向かう感じが、椅子に座るイメージです。高いところから、低いところへ行くイメージで、覚えやすいですね。

## まとめ

| :arrow_up:　ASC（昇順） | :arrow_down:　DESC（降順） | 
| --- | --- | 
| ![15200908102748.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/d707045f-71db-d9cb-8b50-e7a22d0de62c.jpeg) | ![3F3DFA74-64AA-4A8A-953E-994DF9CEBB19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/c7fd50cb-988a-2bd1-b7d2-b69a073daef8.png) | 

## おわり

是非参考にしてみてください。

これで覚えられた！という方が一人でも増えれば幸いです！:relaxed:

## アウトプット100本ノック実施中

https://qiita.com/ryosuketter/items/713474dbd009870e4103

ほぼ半年間、2日に1本のペースでアウトプット継続中（そろそろ目標達成！）

お時間がある時にでもどうぞ :tea:
Deno標準ライブラリでServer-Sent Events

この記事はDeno Advent Calendar 2021とは全く関係ない記事です。

Denoの標準ライブラリを使って、Server-Sent Eventsを送信するサーバーを書いていきたいと思います。

## Server-Sent Eventsとは？

[Server-Sent Events](https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)（SSE）とは、サーバーからクライアントへイベントを受け渡しできる接続方法のことです。WebSocketと似ていますが、WeSocketが双方向通信なのに対し、SSEはデータがサーバーからクライアントへの1方向しか送信できないという違いがあります。

## Deno標準ライブラリのサーバーでServer-Sent Eventsを送信する

SSEを送信するには`ReadableStream`を使用します。

```ts:SSEの送信
import { serve } from "https://deno.land/std@0.117.0/http/mod.ts";

const encoder = new TextEncoder();

console.log("http://localhost:8000");
serve(() => { // デフォルトではポート8000番を使用
  let timeoutId: number | undefined;
  const stream = new ReadableStream({
    start(controller) {
      timeoutId = setInterval(() => {
        // utf8でエンコード
        const data = encoder.encode(`data: ${new Date()}\n\n`);
        // 送信
        controller.enqueue(data);
      }, 1000); // 1秒おきに送信
    },
    cancel() {
      // 接続切断時のクリーンアップ
      clearInterval(timeoutId);
    },
  });
  return new Response(stream, {
    headers: { "Content-Type": "text/event-stream; charset=utf-8" },
  });
});
```

上記のコードを実行して、ブラウザからアクセスすると、1秒おきにデータが送信されているのが確認できると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/91d1aaad-80a4-49e6-6e15-32f69dda3137.png)


:::note warn
SSEで送信するメッセージは一定のプロトコルに従う必要があります。

1. メッセージ「フィールド名、コロン、テキストデータ」の形式で送らなければならない
2. フィールド名は`event`、`data`、`id`、`retry`のいずれか
3. メッセージ同士は2つの改行文字で区切られる

このプロトコルに従っていないと、ブラウザでデータを受け取ることができません。
詳しくはMDNや仕様書を参照してください。
https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events/Using_server-sent_events#examples
:::

## DenoでServer-Sent Eventsを受信する

SSEの受信には、[EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) APIを使います。しかし、このAPIはまだDenoには実装されていません。
※[#12350](https://github.com/denoland/deno/pull/12350)によると、現在実装中のようです。

~~そのため、SSEの受信には、fetch APIを使用してReadableStreamを取得する必要があります。~~
そのため、SSEの受信には[polyfill](https://deno.land/x/eventsource@v0.0.2)をimportする必要があります。

```ts:SSEの受信
import { EventSource } from "https://deno.land/x/eventsource@v0.0.2/mod.ts"

const source = new EventSource("http://localhost:8000/");
source.addEventListener("message", event=>console.log(event.data));
```

<details><summary>fetch APIを使用してReadableStreamを取得する方法もあります。</summary><div>

```ts:SSEの受信
const decoder = new TextDecoder();
const response = await fetch("http://localhost:8000/");
if (!response.body) {
  throw new Error("response.body is null.");
}
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) {
    break;
  }
  console.log(decoder.decode(value));
}
```

</div></details>

## （おまけ）ブラウザでServer-Sent Eventsを受信する

```js
const source = new EventSource("http://localhost:8000/");
source.addEventListener("message", event=>console.log(event.data));
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/1b4ef28a-86f1-e138-7590-387425644d68.png)
▲こんな感じです。

## まとめ

Server-Sent Eventsの送信にはReadableStreamを使います。
Server-Sent Eventsの受信にはEventSourceを使います。
機械学習で画像を作りたかった。～1.画像を集める～

とあるテレビ番組で、「絵画をAIで作る」というのをやっていたことを、
最近思い出し、近いことをやってみることにした。

なお、当方はエンジニアでもプログラマでもない

環境
OS　Windows10
開発環境　eclipse
使用言語　Python

今回参考にした記事はこちら
[GANでピカチュウを描いてみる - Qiita](https://qiita.com/hideki/items/4de4928236ca15152c18#%E7%94%BB%E5%83%8F%E3%81%AE%E5%88%87%E3%82%8A%E5%87%BA%E3%81%97:embed:cite)

<span style="font-size: 150%">工程は
・ピカチュウの画像を集める
・あるサイズに加工する
・画像を作る</span>

だそう。

<span style="font-size: 200%">○画像を集める</span>


chromdriver　のパスを確認する画面で引っかかりを覚えたがすすめることにした。

google-images-download　を使って画像を収集、100以上なら　chromdriver　を使用すると書いてあったので、
試しに収集したい画像を100以下(chromdriverを使わない)で下記コードを書いて実行

```python
googleimagesdownload --keywords "犬,doc,inu" -l 100
```

フォルダは作成されるも、肝心の画像が出てこない
理由を調べてみたら分かった。

<span style="color: #d32f2f">これ、コマンドプロンプトから実行してる！！</span>

そうWindowsの左下に「cmd」と入力すると、候補として出てくる黒いアイコンのあれである。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877489/c2e33a60-b4ce-1df8-e23e-84b5cd7e6e04.png)

開発環境から実行する方法を調べたら、以下のサイトが見つかった。

[https://githubja.com/hardikvasa/google-images-download:embed:cite]

「使用法 – 他のpythonファイルから」を参考に書いてみるが反映されない。

<span style="font-size: 150%">なぜなんだ！</span>

更に検索。すると・・・

[https://qiita.com/taedookim/items/63759e79426514c8a729:embed:cite]

こちらのサイトで、gitというものを使ってパッチを入手してね。
ということが分かった。

サイトの内容に従ってみると・・・、Eclipseで実行できないことが分かった。

仕方ないのでコマンドプロンプトから実行

![バラの画像たくさん.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877489/1816ffb6-e953-1967-57ce-fe25cba84d15.png)

なお、サンプルコードのまま実行したので、画像が<span style="color: #d32f2f">ばら</span>だらけになった。

新しい画像を入手するよりも、ほんとにできるか試したかったので、機械学習でバラの画像を作ることになった。