OmniAICreator/Qiita-1.07M huggingface dataset:
TypeScriptでsvgファイルのインポート時の型エラーを解消する

# はじめに

## TypeScriptでSVGファイルをimportした時に型エラーが出てしまう
以下のようにsvgファイルをインポートしようとしたところ、```cannot find module 'asset/star.svg'```と型エラーが出てしまっています
![スクリーンショット 2022-06-21 9.15.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364026/1756ecfd-4b60-ee7a-2fb8-68c3669cb6f4.png)
TypeScript公式にも同様の記述がありますが、SVGファイルの型を作成することで。TypeScriptファイル以外も正常に処理するようにコンパイラーへ伝えます。

https://webpack.js.org/guides/typescript/#importing-other-assets

# どうやるか

## TS以外の型を定義する、```custom.d.ts```ファイルを作成
以下のように```custom.d.ts```ファイルを作成し、そこでsvgの拡張子の型を定義します。
```ts:custom.d.ts
declare module '*.svg' {
  const content: any;
  export default content;
}
```

## ```tsconfig.json```で作成した型ファイルを読み込む
tsconfig.jsonで作成した型ファイルを読み込みます。
```json:tsconfig.json
{
  "include": ["./src/**/*", "src/custom.d.ts"]
}
```

# おわりに

以上で、問題なくsvgファイルの型をコンパイラーが認識し、型エラーが解消していると思います。
今回は、TypeScriptで外部アセットにデータをインポートする時に発生する型エラーの解消について記載しました。
100日後くらいに個人開発するぞ！day049

## 今日は戻り値を勉強してみた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/5d5a4428-a8cb-43b6-3776-185b7e4cdc74.png)


## 今日の学び

### 戻り値
* 呼び出し元で受け取る処理結果を戻り値（もどりち）と呼び、このことを「メソッドが戻り値を返す」と言う
* メソッドの中でreturnを使うと、呼び出し元で値を受け取れるようになる
* 「return 値」と書くことで、メソッドはその値を戻り値として返せる
    * 例
        * `def メソッド名`
        * ` return 値`
        * `end`
* 戻り値がある場合はメソッドの呼び出し部分がそのまま戻り値に置き換わる
    * 例：変数sumにa+bの合計値を代入したい場合
        * `def add(a,b)`
        * ` return a+b`
        * `end`
        * `sum = add(1,3)`
        * `puts sum`



### 戻り値で条件式を使う場合
* if文で使うような条件式をreturnすると、その条件式の結果として得られる真偽値（trueまたはfalse）を返すことができる
    * 真偽値を返すメソッドは、メソッド名の末尾に「?」をつける慣習がある
        * 例：numberが正か確かめたい場合
            * `def puls?(number)`
            * ` return number > 0`
            * `end`
            * `puts plus?(3)`→「true」


### returnの性質
* returnはメソッドの処理を終了させる性質も持っているため、returnの後にあるメソッドの処理は実行されない
    * 例
        * `def add(a,b)`
        * ` return a+b`
        * `puts "足し算しました"`→実行されない
        * `end`

### 複数のreturn
* メソッドでは、条件分岐を組み合わせることで複数のreturnを用いることができる
        * 例：numberが正か確かめたい場合
            * `def perfect(number)`
            * ` if score = 100`→戻り値80だとfalse
            * ` 　return "100点満点です"`→実行されない
            * `　　end`
            * ` return "がんばりましょう"`→実行される
            * `end`
            * `puts perfect(80)'→「がんばりましょう」
PostgreSQL pgAdmin4 の画面表示が崩れた時の対応

PostgreSQLのpgAdmin4を使っていて、画面が崩れた！
↓
初心者の私、対処法が分からない
↓
ネット上で　PostgreSQLの画面表示で検索しても情報なし
↓
しばらくして気づく！
pgAdmin４の画面表示　で調べてみる
↓
答えあった！
↓
![pgAdmin4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520641/e47d8d5b-91a0-f249-f242-5b5b8b89bbcf.png)
↓
画像のように
File　→　Reset Layout　で修正。
↓
調べるのに4日ほど掛かってしまいました。。。
分かってしまえば簡単な事なのですが、
あきらめないことが大切ですね。
Web Developer Roadmap（2022年版）を読んだ話


知人からの紹介で、Web開発エンジニアが学ぶべきことを整理したロードマップなるものが存在することを知った。
[Web Developer Roadmap](https://roadmap.sh/)

Web開発に携わる方々には常識なのだろうか……
ただ、自分や弊社のようにそもそも自分のいる位置がどこなのか明確にせず漫然と目の前の仕事をこなすだけのエンジニアにはいい劇薬で、もし同じような立場の方がいればロードマップという存在を共有するだけでも意味があるかと思う。

## ロードマップの活用
これ、単にロードマップなだけではなく、「この知識を習得したければこれを見なさい」という読み物や動画のリンクを付属させてくれているのが本当にありがたい。とっかかりとして参照して、方向性がわかったら深堀りしていく形で活用する。
Qiita記事を電子書籍化する

この記事は[Qiita アドベントカレンダー Linux](https://qiita.com/advent-calendar/2022/linux) 5日目の記事です。ShellScriptのカレンダーが今年は無かったので、空いてそうなこちらに投稿させていただきました。

# MarkdownからEPUBへ変換

やることはタイトル通り。Qiitaの記事をEPUB形式に変換してKindleで読むためのShellScriptです。
あくまで自分用に使用してください。
エラーになるマークダウンは適宜`sed -e`でエラー箇所を潰していきます。

```bash
curl -fsSL "https://qiita.com/KTakahiro1729/items/3f18811267bf4f8075d5.md" |
    sed -e 's/html\#/html\\#/g' -e 's/\(^#\+\)/\1 /' |
    pandoc -s -f markdown -t epub3 -o NimTutorialPartI日本語訳後編.epub --toc --toc-depth=3  
```

知っていましたか？[Qiita記事のURLの末尾に.mdをつける](https://qiita.com/u1and0/items/dcdd33bde9472aa5b905.md)と、マークダウン形式でブラウザ上に表示できること、そしてそのURLにcurlなどでアクセスするとマークダウン形式でダウンロードできること。マークダウンを取得できたら、それを[pandoc](https://pandoc-doc-ja.readthedocs.io/ja/latest/users-guide.html)に渡してEPUBだのなんだの好きな形式に変換できるのです。


簡潔ですが、以上。
長いQiita記事をKindleで読むためのtipsでした。


# HTMLからEPUBへ変換

2022/12/16の追記です。
htmlからepubにするほうが、markdownからepubに変換するよりも優れていることがわかったので、html->epub変換のスクリプトを追記します。

```bash
curl -fsSL "https://qiita.com/KTakahiro1729/items/3f18811267bf4f8075d5" |
    pandoc -s -f html -t epub3 -o NimTutorialPartI日本語訳後編.epub --toc --toc-depth=3  
```

入力がよりシンプルになりました。
出力も異なります。
下の比較画像をご覧ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113494/aacbd693-1924-88a7-0fde-d76d0d6ca158.png)


左がmarkdownから変換、右がhtmlから変換した同じURLのepubファイルです。
左のmarkdownから変換した場合の表示はシンタックスハイライトが聞いて見やすいのですが、章がいくつか飛ばされていました。

また、サイズもmarkdownから変換した場合、22.0kB, htmlから変換した場合38.0kBと、あきらかにhtmlから変換したほうが情報量が多かったです。

このURLではpng等の画像ファイルは使われていませんでしたが、~~画像ファイルが使われているページではmarkdown化した時点で画像がURLにってしまうので、画像を出力できません。~~
画像ファイルはMarkdownから変換した場合でも表示できます。


さらに、Qiitaのように、.mdをつけるだけで簡単にmarkdown化できるページのほうが少ないので、htmlをそのままepubにするほうが汎用性に優れています。

`sed`でエラーを潰す必要もありません。

まとめると、HTMLからの変換はMarkdownからの変換に比べて下記のような特徴があります。
* シンタックスハイライトがない
* 情報量が多い
* ~~画像がきちんと表示される~~
* 入力(コマンド)がシンプル
* 変換時にエラーが発生しにくい
* Qiita以外のページも変換できて汎用性がある

プログラミング言語の本を読むのにシンタックスハイライトがないことは痛いですが、その他のメリットと天秤にかけるとHTMLから変換するほうが良さそうです。

2022/12/17追記
画像が表示されて、試してみて章立てが飛ばされないことを確認できたら、Markdown形式から変換のほうがシンタックスハイライトが効いて見栄えがいいです。
Qiita以外のサイトでもhtml -> markdown -> epubのように変換できたら、シンタックスハイライトが効いて変換できるかなぁ。
AWSのDesign for falureを学んだ話 -  PSIオンライン自宅受験は2022年6月も政府発行のLatin氏名身分証が必要

## 結論から

「**PSIオンライン自宅受験は2022年6月も政府発行のLatin氏名身分証が必要**」

PSI自宅オンライン受験で以下IDを同時に見せたが、やはり受験できないから、気をつけよう！ :sweat: という話

- 臓器提供意思表示カードとしてアルファベットでサイン済みの**日本の運転免許証** (← サインは身分証としては無効と判断された。そりゃそうか... )
- 2021年に **失効したパスポート**、日本語・アルファベットで書かれている (← 無効)
- アルファベットで氏名の書かれた **クレジットカード**、日本語で氏名がサインされている（← 政府発行ではないので無効）

試験監督とのやり取りを1時間ほどしたが、受験できず...
サポートチャットにその旨を伝えたところ、即日！、無料でリスケジュール対応してもらったという顛末です。リスケジュールでのテストセンター受験では、「日本の運転免許証 + クレジットカード」で受けられます。

## 経緯

[AWS Certification 試験のスケジュールを立てる](https://aws.amazon.com/jp/certification/certification-prep/testing/?nc2=sb_ce_se)

> **オンラインでの試験監督は、試験配給プロバイダーであるピアソン VUE、もしくは、PSI のどちらかを通じ、すべての AWS 認定試験でご利用いただけます。** 中国本土からの受験者については、PSI 経由のみで、オンラインの試験監督をご利用いただけます。試験監督者と対話するには、オンラインでガイドを受けながらの予約手続きを完了しておく必要があることにご注意ください。Pearson VUE および PSI の両社とも、英語によるオンラインでの試験監督を提供しています。英語に加えて、Pearson VUE は日本語のオンライン試験監督をサポートし、PSI は北京語のオンライン試験監督をサポートしています。

自宅オンライン受験には2業者ある。

- PSI
- ピアソンVUE

[一度ピアソンVUEで受験した](https://qiita.com/e99h2121/items/bec62a16c1264baf6a5e) ので、英語という不便はあっても「ものの試し」。つまり私の判断によりなのだが PSI での申し込みをした。ところが。上述の通り試験監督は、「Apology, but (申し訳ないが)」

- Written Latin
- Government Issued ID 

が必要だと繰り返す。

> I think you can see my name written in 漢字 and Latin in my driver license card. And you can see Latin is equal with my name in credit card. Cannot be enough? 

試験監督曰く I need gov issued な ID、Written in Latin が必要とのこと。Passport はあるかと言われるので Passport を念の為見せる。が期限が切れている。判断できなそう... マイナンバーカードも運転免許証も無力である

> I have Driver's license with my signature. I have credit card written in Latin character. I have old passport. Any person who can judge? 

的なことを述べてみたが、ブロークン英語が余計困ったひとねと思わせてしまったことだろう。無念...

## 学び

このご時世に有効なパスポートをバッチリ所持しているニッポン人がどれだけいるのか、予約段階でもっと強調して書いておいてくれないのかい。このままでは金返せ案件になりそうにも聞こえるが、ここで終わらないのがやはりAWSである。

"Design for failure" なリカバリ即対応をサポートチャットがしてくれた。この早いこと！

[Design for Failure｜サイバー/デジタルリスクNavi [用語集]](https://www.newton-consulting.co.jp/itilnavi/glossary/design_for_failure.html)

> Design for Failure は、障害が発生することを前提にシステム設計を行うという考え方で、「いかに障害を発生させないか」ではなく、「障害が発生したときにいかに対応するか」に重きを置いています。

失敗は誰にでも起こる。大事なのはそれが起こったときにいかに迅速にそれをリカバリするかだということ。サポートチャットはすぐに代替のテストセンターのリスケジュールの予約を１回限り無料で行ってくれました！感謝！


## 結果

[高田馬場テストセンター総合案内 | テストセンター秋葉原昭和通り口（有限会社ファーストステップ）](https://www.first-step.jp/takadanobaba_entrance/) で戦わずして負けた結果から再受験、合格しました。


## 参考資料

[AWS認定資格クラウドプラクティショナーをＰＳＩオンライン受験した話　～身分証明でつまずきました～ - Qiita](https://qiita.com/zakuzakuzaki/items/e0dc27f1fd4bba3532a5) ... 2020年10月25日
[AWS認定試験をオンラインで受ける際はテストプロバイダ選択に注意 - Qiita](https://qiita.com/macaroni10y/items/7f5d6758b5e1804d2a58) ... 2022年01月29日

https://twitter.com/ichitwimi/status/1439779208654323716?s=20

一方で以下のようなケースもあるみたいだったから、イチカバチカしてしまった。
[AWS認定試験をオンラインで受けてみた - サーバーワークスエンジニアブログ](https://blog.serverworks.co.jp/aws-certification-online)

[【怒りを昇華】AWS・ピアソンVUEなどの問合せ先リンク集＆オンライン試験当日にトラブった話 - Qiita](https://qiita.com/TakuyaSuzuki/items/a6bd9efd8a61d3f1bdbc) ... これは稀なケースかもしれないが ... 心中察し  
追記: [AWS資格自宅受験がなかなか落とし穴が多かったので発信したいです。 - Qiita](https://qiita.com/reon_tani/items/7f0b26297b1c17f4b48c)


もしかしたら、もしかしたら試験監督によるのかもしれないのですが、ガチャはいやです、試験と関係ないところで時間を費やすのは良くないですねという学び。この後ちゃんと合格記を書きます！以上です～
【TypeScript】環境構築

## Node.jsのインストール
https://nodejs.org/ja/

上記のページからNode.jsをインストールする。

新規ディレクトリを作成して以下コマンドを実行する。

```:ターミナル
$ npm init -y
```

## TypeScriptのインストール
以下のコマンドを実行してtypescriptをインストールする

```:ターミナル
$ npm install --save-dev typescript 
```

## ts-nodeのインストール
以下のコマンドを実行してts-nodeをインストールする
```:ターミナル
$ npm install --save-dev ts-node
```
以降以下のコマンドを実行することでコンパイルと実行をすることができる。

```:ターミナル
$ npx ts-node ファイルパス
```

## ts-node-devのインストール
以下のコマンドを実行してts-nodeをインストールする。
```:ターミナル
$ npm install --save-dev ts-node-dev
```


以降以下のコマンドを実行することでファイルを編集して保存するたびに`.ts`ファイルのコンパイルと実行ができるようになる。
```:ターミナル
npx ts-node-dev --respawn ファイルパス
```
2022/6/21主にITとかセキュリティの記事

「Gitlab」に「SSRF」の脆弱性 - 2月のアップデートで修正済み
https://www.security-next.com/137459

QNAP、NASのファームウェア更新を呼びかけ - あらたなランサム攻撃を調査中
https://www.security-next.com/137442

セキュ研究者や実務者向けイベント「JSAC2023」が開催決定 - 講演やWSを募集(2023年1月開催)
https://www.security-next.com/137445

「ICTサイバーセキュリティ総合対策2022」の策定に向け意見募集 - 総務省
https://www.security-next.com/137428

FRONTEO米子会社、複数サーバがランサム被害 - メールシステム脆弱性を悪用か
https://www.security-next.com/137432

ランサム攻撃でサーバ内のデータが暗号化 - 帰国子女向け教育サービス
https://www.security-next.com/137398

Emotetマルウェア、Microsoft Officeのマクロのセキュリティ強化に対し戦術進化(6/19)
https://gunosy.com/articles/e5cTR

改正個人情報保護法が4月1日施行、漏洩発生時に企業は「5日」で本人通知できるのか(5/18)
https://active.nikkeibp.co.jp/atcl/act/19/00370/042100001/

早稲田大学、研究支援・財務システムを「Microsoft Azure」へ移行(6/17)
https://japan.zdnet.com/article/35189086/

クラウドに関する記事のまとめ(2022.6.12～2022.6.18)
https://blogs.itmedia.co.jp/business20/2022/06/20226122022618.html?ref=rss

個人情報を確実に守るために、Googleの検索結果から「削除」してもらう方法(6/19)
https://wired.jp/article/remove-personal-info-from-google-search-results/

IEは卒業しても終わらない～IEで表示することがリスクとなる時代～(6/16)
https://qiita.com/KageShiron/items/de0f937492cf025ca9aa

100万インストールのWordPressプラグイン「Ninja Forms」にCVSSv3スコア9.8の脆弱性(6/18)
https://www.itmedia.co.jp/enterprise/articles/2206/17/news164.html

暗証番号いま聞かれても　スマホ本人確認「eKYC」に壁(6/19)
https://www.nikkei.com/article/DGXZQOUB0827W0Y2A600C2000000/

機密情報載せる政府クラウドの利用方針が判明、カギは国産ベンダーの「育成」(6/20)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/06938/

「盛った」営業トークはリスク　マカフィー敗訴の教訓(6/20)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/092400133/061500080/

Google I/Oに見る　クラウド・AI、次の一手(6/20)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600014/061400119/

会計ソフト利用者の3割がクラウド型　行政手続きのデジタル化が後押し(6/20)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600010/060900116/

スマートホームの大問題「GoogleとAmazonの溝」を解消、NXP幹部が意欲(6/20)
https://xtech.nikkei.com/atcl/nxt/column/18/00134/061600315/
Laravel リレーションhasManyに対して、さらにwithを使って、親-子-孫のリレーションを簡単に作る

受注情報のOrderテーブルから一覧表示し、
一覧の中にあるサブループに、受注明細があるケースで、商品IDが受注明細に含まれているとします。
商品IDは、商品マスターテーブルに登録されている商品IDとします。

受注情報-受注詳細情報-商品マスタとつなげたい時に、ModelのhasManyやhasOneにwithでつなげることができる。

    /**　Order Model内
     * 受注明細とリレーションし、受注明細は商品マスタとリレーションしたデータを取得する。
     */
    public function orderItems()
    {
        return $this->hasMany('App\Models\OrderItem','orderID','id')->with('item')->withTrashed();
    }

================================================

    /** 　OrderItem Model内
     * Items と関連付け
     */
    public function item()
    {
        return $this->hasOne('App\Models\Items','id','itemID')->withTrashed();
    }

これはとても素晴らしいです。withTrashed()を付けておき、
ソフトデリートの商品マスタからも、取得することができるようにしておく。
これを早く知りたかったですね。
JavaメインからRuby学習で困惑した点(unless)

# はじめに
もともと、工業高校でC言語から始め、
社会人にてJavaで活動していたSEが転職を期に
Rubyを学んだ時の混乱について一部書きます。(条件分岐について => タイトル通りです)

## お馴染みの条件分岐(if else)
Rubyを学ぶまで、if(もし)、else(でなければ)
の2つで条件分岐は丸く収まると思っていました。

## unlessが登場
基本的には、言葉の文法通りに想像するなら
「もし～なら、でなければ」と基本的にはなると思います。

ところが「でなければ」から始まる構文が
Rubyでは存在しました。
これが「unless」です。

極端な例：偶数かそうでない場合の判別
(どの言語でも分かりやすいようにevenメソッドは使用しません + 括弧も付けます)
```ruby:example_if_else.rb
# if、elseのパターン
if (num % 2 == 0)
  puts "偶数"
else
  puts "奇数"
end
```

```ruby:example_unless.rb
# unlessのパターン
unless (num % 2 == 0)
  puts "奇数"
else
  puts "偶数"
end
```

通常、頭の中では「2で割り切れれば偶数」
「そうでなければ奇数」と自然に考えていると思います。

それが逆転するわけですから混乱します。

更に「||(または)」が混ざった場合は可読性が最低になります。
(詳しくは省きますが「ド・モルガンの法則」を利用してリファクタリングしましょう)

上記のパターンを見慣れた形にしたい、
と考え、無意識のうちにこう記述してしまうかもしれません。

```ruby:example_unless_bad.rb
# unlessの二重否定パターン
unless !(num % 2 == 0)
  puts "偶数"
else
  puts "奇数"
end
```

これは「二重否定」と言われるもので
unlessでは避けるべきものです。

「～ではなく、ーではない」と
言葉にすると非常に違和感があると思います。

## unlessで避けるべきもの(代表)
 - 二重否定
 - 「||」を混合すること
 
## では何に使えるのか(一例)
「後置unless」という構文が存在します。
Rubyの場合には「present?(存在するか)」というメソッドがあります。
上記のメソッドは存在すると「True」、しないと「False」を返します。

例：存在しない場合にreturnしたい
```ruby:example_if_present.rb
# 存在を否定(存在しない)
if !(mariori12.present?)
  return
```

```ruby:example_unless_present.rb
# 存在しない
unless mariori12.present?
  return
```

どうでしょうか、こう見ると
後者の方がより直感的で分かりやすくないでしょうか。

このような場合に分かり易く
するために使うのだと思っています。(言い聞かせ)

# さいごに
他にも、避けるべき例、活用できる様々な例があるとは思いますが、
この記事では代表例(恐らく)の記述のみで終わります。

もし、筆者と同じように混乱しそうな方に
役立てていただければ幸いです。
サービスアカウントでspreadsheet-apiへアクセスする(java)

# 概要

ネット上ではいろんなサンプルコードがあったが、javaバージョンは少なかったので、個人メモ用で、
gcpのサービスアカウントを使って、spreadsheetのデータを取得する方法について、記載する。

### step1: gcp上でサービスアカウントを作成し、サービスのキーを作成する


![スクリーンショット 2022-06-21 0.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184340/c83b3043-a1ba-ba6b-131f-e95f04806a7f.png)

- キーを記載しているjsonファイルをダウンロードする
- 単純に、spreadsheetのデータを取る場合、ロールなど付与しなくても良い。[詳細の理由](https://stackoverflow.com/questions/55527829/what-is-the-role-which-allows-to-use-gcp-apis-such-as-drive-sheets-etc)

### step2: 実装


```java
// scoreを定義する
final List<String> scopes = List.of("https://docs.google.com/feeds", "https://spreadsheets.google.com/feeds");
final GsonFactory factory = new GsonFactory();
final String applicationName = "{任意}";
// スプレッドシートのID
finak String spreadId = "id";
// step1 作成したキーを記載しているファイルをロードする
final InputStream in = new FileInputStream("{key_file_path.json}");
// adapterを作成する
final HttpCredentialsAdapter adapter = new HttpCredentialsAdapter(GoogleCredentials.fromStream(in).createScoped(scopes));
final NetHttpTransport httpTransport = GoogleNetHttpTransport.newTrustedTransport();
final Sheets sheetClient = new Sheets.Builder(httpTransport, , adapter)
                .setApplicationName(applicationName)
                .build();

//シートのリストを取得する
final List<Sheet> sheets = sheetClient.spreadsheets().get(spreadId).execute().getSheets();

//1個目のシート名を取得する
final String sheetName = sheets.get(0).getProperties().getTitle();

//↑によって、1個目のシートのデータを取得する
final List<List<Object>> csvRecords = sheets.spreadsheets().values().get(spreadId, sheetName).execute().getValues();
```

スプレッドシートのIDを確認する方法: (https://developers.google.com/sheets/api/guides/concepts)


## step 3

アクセスしたいシートを開き、step1で作成したサービスアカウントのメールアドレスに共有する

[参考](https://www.lifewire.com/sharing-options-for-google-spreadsheets-3124090)

### 感想

> I think this is confusing and poorly explained in Google's documentation but IAM and OAuth scopes are mostly (now) complementary technologies. 
I consider IAM to refine or provide more granular, account|credential-specific scopes

↑と同じ感じで、gcpは認証周りのドキュメントは分かりにくいなと思いました。

以上
Docker Compose データベースのバックアップとリストア方法

## 構成例

```yml:docker-compose.yml
version: "3.9"
volumes:
  db-store:
services:
  db:
    image: mysql/mysql-server:8.0
    volumes:
      - type: volume
        source: db-store
        target: /var/lib/mysql
        volume:
          nocopy: true
    environment:
      - MYSQL_DATABASE=${DB_DATABASE:-laravel}
      - MYSQL_USER=${DB_USERNAME:-phper}
      - MYSQL_PASSWORD=${DB_PASSWORD:-secret}
      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD:-secret}
```

こんな感じのMySQLのデータベースコンテナを用意しました。
こちらのバックアップとリストアの手順をご紹介します。

## ログイン確認

```shell-session
$ docker compose exec db bash -c 'mysql -u $MYSQL_USER -p$MYSQL_PASSWORD $MYSQL_DATABASE'
```

コンテナ内の環境変数を使いたいので `bash -c` でコンテナ内で実行して欲しいコマンドを渡してます。
MySQLへログインできればOKです。

## バックアップ

```shell-session
$ docker compose exec db bash -c 'mysqldump --no-tablespaces -u $MYSQL_USER -p$MYSQL_PASSWORD $MYSQL_DATABASE > /tmp/dump.sql'
$ docker compose cp db:/tmp/dump.sql /tmp/dump.sql
```

シンプルに mysqldump コマンドを実行して dump ファイルを出力してます。
`docker compose cp` コマンドでコンテナ内のファイルをローカルへコピーします。

## リストア

```shell-session
$ docker compose cp /tmp/dump.sql db:/tmp/dump.sql
$ docker compose exec db bash -c 'mysql -u $MYSQL_USER -p$MYSQL_PASSWORD $MYSQL_DATABASE < /tmp/dump.sql'

# 不要であればローカルのdumpファイルを削除
$ rm /tmp/dump.sql
```

`docker compose cp` コマンドはローカルからコンテナ内へコピーもできます。
コピーしたdumpファイルを `mysql` コマンドでインポートします。

## 補足

### mysqldump --no-tablespaces オプション

`--no-tablespaces` オプションを付けないと下記のエラーが発生します。

```shell-session
mysqldump: Error: 'Access denied; you need (at least one of) the PROCESS privilege(s) for this operation' when trying to dump tablespaces
```

https://www.koikikukan.com/archives/2021/02/17-235555.php
「達人が教える Webパフォーマンスチューニング ~ISUCONから学ぶ高速化の実践」レビュー

# はじめに

この記事は、技術評論社出版の「達人が教える Webパフォーマンスチューニング ~ISUCONから学ぶ高速化の実践」のレビューです。
著者の一人の方から献本を頂きまして、レビューを掲載しています。 それ以外の報酬などはありませんので、思ったことを書いています。

https://www.youtube.com/watch?v=iKM0BhasP94&feature=youtu.be


## 本書のターゲット

パフォーマンスチューニングは私が考えるに大きく2つの視点があると思います。
一つ目はマクロな視点でのチューニング、もう一つがミクロな視点でのチューニングです。

本書が扱っているようなWebサービス (Webアプリケーション) は一つのソフトウェア (いわゆるアプリケーション本体) だけでは動作せず、データベース (多くはRDBMS) やその他のミドルウェアの組み合わせによって動いています。
組み合わせで動いているシステムを高速化するには、マクロな視点で観測しチューニングする必要があります。競技で言うとISUCONが該当します。

一方で、計算をいかに早く行うことが重要なソフトウェアではそのソフトウェアやアルゴリズムに注目してミクロな視点でのパフォーマンスチューニングが必要です。こちらは競技で言うと競技プログラミング (競プロ) が該当します。

ISUCONでは、ミクロな視点にとらわれてアプリケーション本体にのみ関係するアルゴリズムをチューニングしても、ボトルネックは別にあって高速化されないと言うことはザラにあります。

本書はWebアプリケーションのチューニングを想像している読者にはピッタリだと思います。
さまざまな箇所で起こりうるボトルネックを見つけるためのノウハウが詰まってます。

Webアプリケーションのチューニングに視線を向けていますので、アルゴリズムなどのCPU律速なチューニングを求めている場合には思ったことと違うと言うこともあるでしょう。

## 1章 「チューニングの基礎知識」

最初に、Webサービスとは・高速なWebサービスとは、というところからしっかりと言及されています。
チューニングするためにはまずはモニタリング (計測) することが大事であることもここで説明されます。

## 2章 「モニタリング」

モニタリングが大事であるため、2章でモニタリングのポイントについて書かれています。
具体的な方法については次章で解説されますので、この章ではモニタリングツールのひとつであるPrometheusを例に仕組みが解説されたりなど、必要な基礎が書かれています。

## 3章 「基本的な負荷試験」 / 4章 「シナリオを持った負荷試験」

さらに3章・4章でもモニタリングのための試験の方法について解説しています。
3章では単一のページに対する負荷のかけ方や、負荷をかけた時のモニタリングの方法について解説されています。

実際のシステムでは、ユーザーの挙動として一連の流れ (シナリオという) に従って負荷がかけられます。
それを再現してシナリオに沿った負荷試験をする方法が4章で解説されています。

つまり、チューニングの本ではありながら、ここまで１００ページ近くが概要と計測のために使われているわけですね。
それぐらいチューニングには計測が重要であるということです。


## 5章 「データベースのチューニング」

ここからようやく実際のチューニングに入ります。
この章ではデータベースの種類について最初に解説し、特徴を紹介した上で、RDBMSのチューニングについて詳しく見ていきます。

データベースを使っている人には必ず理解しておいて欲しい内容になっています。

## 6章 「リバースプロキシの利用」

Webサービスにおいては切っても切り離せないのがウェブサーバによるリバースプロキシです。

リバースプロキシの役割はただリクエストをアプリケーションに横流しするだけではありません。
コンテンツによっては圧縮することで高速化することができたり、TLSのチューニングをしたりすることができます。

この章ではnginxを例に挙げて、リバースプロキシの構造とチューニングポイントについて解説されています。


## 7章 「キャッシュの活用」

ISUCONをやっていると必ず実感すると思いますが、RDBMSってすごく時間かかるんです。
RDBMSに問い合わせしなくてもいいならしないに越したことはありません。

そこで使う手段がキャッシュです。
変化の少ないデータや、アクセス頻度の高いデータをRDBMSから持ってきて、オンメモリのKVSなどに入れておくことで、高速に取得することができます。

ただし、何でもかんでもキャッシュすれば良いというわけではないので、この章ではキャッシュの使い所や注意点について解説されています。

## 8章 「抑えておきたい高速化手法」

この章ではWebサービスにおけるそれ以外のチューニングについていくつか紹介されています。
Webサービスではいろいろなミドルウェアを経由する、あるいは経由させられるため工夫の仕方がたくさんあります。
そういった部分について触れられています。

## 9章 「OSの基礎知識とチューニング」

ここまでチューニングを進めると、最終的にはOSが担っている機能のチューニングをしたくなります。
この章ではLinuxがどのように動いているかを解説し、その上でモニタリングやチューニングについて解説されています。

Linux自体のチューニングをしない場合でも、Linuxの仕組み (ひいては色々なOSの仕組み) についての知識はいろんな分野で重要ですので、理解しておきたいところです。

## 付録

ここまで本書を読み進めると、実際にチューニングしてみたくなると思います。

著者の一人である @catatsuy さんが、社内ISUCONを開催したときの問題「private-isu」を公開しています。
この問題を使うと実際にチューニングをしたり、チューニングの結果どれぐらい速くなるのかを体験することができます。

付録のAでは、初期状態で650点だったprivate-isuが、16ヶ所のチューニングをすることで500倍のスコアになるまでの方法を例として紹介されています。
これまでの章で解説されてきたノウハウが実際にはどのように適用されているのか知ることができるようになっています。

また、付録のBでは、こういった問題を作る上で、計測をするためのソフトウェアであるベンチマーカーの実装についても触れられています。
パフォーマンスチューニングをする上では直接は関係ないですが、並列でたくさんのリクエストを投げて計測するためのノウハウがどのようになっているのかはとても楽しいものです。


## まとめ

色々な経験によって身につける知識が、この本にはたくさん詰まっていてとても参考になると思います。
ウェブアプリケーションの開発者、アプリケーションをサーバにデプロイするインフラエンジニア、データベースを使う開発者には仮にISUCONに興味がなかったとしても読んでほしいなと思う本でした。

コラムには「実装する言語によって高速になるのか」など、ソフトウェアエンジニアにとって大切な感覚が書かれていたり、全体を通してチューニングにとどまらない考え方が詰め込まれているのも好きなポイントです。
minitestでエラー`block (2 levels) in <class:UsersIndexTest>'

# はじめに
minitestでテストを書いていると、
下記の部分でfailになった。
```言語名:ターミナル
FAIL["test_index_as_admin_including_pagination_and_delete_links", #<Minitest::Reporters::Suite:0x00007fb558cdba80 @name="UsersIndexTest">, 2.8298179999983404]
 test_index_as_admin_including_pagination_and_delete_links#UsersIndexTest (2.83s)
Expected at least 1 element matching "a[href="/users/14035331"]", found 0..
        Expected 0 to be >= 1.
        test/integration/users_index_test.rb:19:in `block (2 levels) in <class:UsersIndexTest>'
        test/integration/users_index_test.rb:18:in `each'
        test/integration/users_index_test.rb:18:in `block in <class:UsersIndexTest>'
```
aタグのリンクが見つからないみたい。
だがどこを直せば良いか一見わからなかった。
ちなみにテストはこんな感じ。
```言語名:test/integration/users_index_test.rb
# ログインしてユーザーの一覧が'ユーザーが多い順に'表示されるかテストする
test "index as admin including pagination and delete links" do
    log_in_as(@admin)
    get users_path
    assert_template 'users/index'
    assert_select 'nav.pagination', count: 2
    # ここがおかしかった。理由は後述。
　　　　　　　　users = User.includes(:followers).sort {|a,b| b.followers.size <=> a.followers.size}
    first_page_of_users = Kaminari.paginate_array(users).page(1)
    first_page_of_users.each do |user|
      assert_select 'a[href=?]', user_path(user), text: user.name
      assert         user.activated
      unless user == @admin
        assert_select 'a[href=?]', user_path(user), text: 'delete'
      end
    end
    assert_difference 'User.count', -1 do
      delete user_path(@non_admin)
    end
  end
```
'ユーザーが多い順に'表示というのがポイントで、users変数に入れるコードを途中で変えていたところがおかしかった。理由は後述する。

と言うわけで、いろんなとこをコメントアウトしながら切り分けをおこなった。

# 原因
「activatedがtrueになっている集合をデフォルトのid番号順」にusersに入れていたのを、
「followerが多い順」にソートした集合を入れるように変更していた。
```言語名:app/controllers/users_controllers.rb
# users = User.where(activated: true)　を下記に変えていた
  users = User.includes(:followers).sort {|a,b| b.followers.size <=> a.followers.size}
```
その際に、activatedについての記述を消してしまっていた。それによって一覧に表示されない人についてのデータも引っ張ってきてしまっていた。
従って、データだけははあるけど一覧表示されてないよ、aタグがないよ！
と言われてしまったわけだ。
# 結論
activatedがtrueの集合からソートを行うことで問題を解決できる。
```言語名:app/controllers/users_controllers.rb
users = User.where(activated: true).includes(:followers).sort {|a,b| b.followers.size <=> a.followers.size}
```
```言語名:test/integration/users_index_test.rb
# ログインしてユーザーの一覧が'ユーザーが多い順に'表示されるかテストする
test "index as admin including pagination and delete links" do
    log_in_as(@admin)
    get users_path
    assert_template 'users/index'
    assert_select 'nav.pagination', count: 2
    # ここのusers変数の式を書き換えた。
　　　　　　　　users = User.where(activated: true).includes(:followers).sort {|a,b| b.followers.size <=> a.followers.size}
    first_page_of_users = Kaminari.paginate_array(users).page(1)
    first_page_of_users.each do |user|
      assert_select 'a[href=?]', user_path(user), text: user.name
      assert         user.activated
      unless user == @admin
        assert_select 'a[href=?]', user_path(user), text: 'delete'
      end
    end
    assert_difference 'User.count', -1 do
      delete user_path(@non_admin)
    end
  end
```
# おわりに
そろそろminitestからRspecに切り替えるか。。。
Docker が起動出来ない メモ。

## 注意
最後に記載のURL を見ながら作業してください！
注意事項など一切書いてないので、メモ程度に見てください！！

## エラー内容
```
An unexpected error occurred

Some WSL system related access rights are not set correctly.
This sometimes happens after waking the computer or not being connected to your domain/active directory. 
Please try to reboot the computer.
If not sufficient, WSL may need to be reinstalled fully.
As a last resort, try to uninstall/reinstall Docker Desktop.
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387311/61d2d9dd-bde0-d2db-ad34-3facda63d627.png)

- docker-desktop を起動したが、stoppingが表示され起動出来てない
- 何度もタスクマネージャーから、終了をし再起動かけてもダメ
- docker-desktop を起動してしばらくすると、このエラーが発生する

## システム内容
- windows10
- WSL2
- Docker-desktop
- hyper-V 有効済

## やったこと
- タスクマネージャーから、終了
- docker-desktop のデバッガーマークから表示されたものすべて削除
- いろんなコマンド類(漁ったサイトの中に書かれてます
- `wsl --install -d Ubuntu` でインストールしてみた
- `~/.wslconfig` を削除した

## 恐らく改善方法
```
C:User> rm ~/.wslconfig
```

コレをやったあと動いたので、コレが正解かと思います。

## 漁ったサイト
- https://prograshi.com/platform/docker/term-wsl-is-not-recognize/
- https://docs.microsoft.com/ja-jp/windows/wsl/install
- https://www.reddit.com/r/docker/comments/ud1mu1/docker_for_windows_failing_to_start_wsl_system/

## まとめ
最後の英語サイトのお陰でなんとかなった。。
wsl関連の設定やら色々、理解してないので自己責任でお願いします。
【Excel関数】複数シートの情報を1シートにまとめたい（INDIRECT関数）

# 前提
Excel。
複数シートの情報を1シートにまとめたい。

◆詳細◆
①3つの商品について、下記のような実績シートがある。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/13ca46fb-81f7-3f50-5787-5ce6b76515ac.png)
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/226663ad-5c5d-f0fd-da1e-8ffe06588619.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/c552ed51-6c98-28bc-ba36-29ab11246e50.png)

②　①の情報を「まとめ」シートにまとめたい。
完成図↓
![かんせい.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/098d7b4d-9b56-7d89-7558-051782ae514b.png)

# 1.まとめシートのひな形を作る
（色は記事書くための便宜上、付けた）
![まとめ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/37b0f464-8743-b08f-84d1-3e8d8dc4b50f.png)
（↓関数）
`=INDIRECT("商品"&$A2&"!C8")`,`=INDIRECT("商品"&$A2&"!D8")`という具合。詳細↓
![まとめ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/604bf3bd-3492-d38a-cf16-9b281d874845.png)

# 2.　1.を必要なところへコピペ
下方向へざざーっとひっぱる↓
![まとめ4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/4eea0de1-3e63-73cb-205d-3e83a1e04b7e.png)
こうなる↓
![まとめ5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/b9950096-45c0-ac77-ead4-1f84261f111f.png)

完成！


# 未解決事項1
↓ここ↓`=INDIRECT("商品"&$A2&"!C8")`の「C」の部分、
![Ｃ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/f45e48b7-c9b9-ff2c-7517-666b07fcbad8.png)

B列は「C」→C列「D」→D列「E」→・・・
というようにアルファベットを行を右に移動するたびに降順に表示したいけれど、
自動で降順アルファベットを割り振る方法がわからず。
今回はすべて手入力した。
![Ｃ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/8ac290a3-e7dd-ff00-6bff-f148738710bf.png)


↓こちらの記事の方法が使えないかと試してみたけれど、解決できず。


https://sugoikaizen.com/excel_list/function-02/

↓
メモ：この記事見ながら試した関数
![AD.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/ad082454-6570-8491-e409-023885c9afbe.png)
アルファベット単体であれば↑このように表示できたけれど、
関数`=INDIRECT("商品"&$A2&"!C8")`に
この長い関数`=SUBSTITUTE(ADDRESS(1,COLUMN()-2,2),"$1","")`を差し入れると
うまく稼働せず、失敗。

https://sugoikaizen.com/excel_list/dictionary_address/

https://sugoikaizen.com/excel_list/dictionary_column/

# 未解決事項2
↓ここ↓`=INDIRECT("商品"&$A2&"!G8")`の「8」の部分、
![2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/2a9097b4-fd50-707e-fc52-85e81901a306.png)

行2は「8」→行3「9」→行4「10」→行5は「8」→行6「9」→行7「10」→行8は「8」・・・
というように数字について、行を下に移動するたびに「8→9→10→8→…」と繰り返したいのだけれど、
絶対参照との組み合わせもうまくいかず自動で数字を振り分ける方法がわからず。
今回は手入力した。
![2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498057/4b394a2f-7cc3-4313-5a2b-b832fe2a8b1c.png)
[React/Rails] WebSocket connection to 'ws://localhost:3000/ws' failed が発生してレスポンスが受け取れない

## 動作環境
MacOS M1 BigSur 11.6
Docker "20.10.8"
node "14.17.5"
yarn "1.22.5"
react-scripts "5.0.1"
axios "^0.27.2"
Rails "6.1.6" APIモード

## 結論
Reactのルートディレクトリ直下に.envファイルを作成し、下記の記述をする
```/.env
WDS_SOCKET_PORT=0
```

## エラー内容
React/TypeScriptで作成したアプリケーションからRailsのAPIへリクエストを送信したところ下記エラーが発生した。
![スクリーンショット 2022-06-20 22.41.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685944/4c8c1ab2-2ef2-3cf2-533c-a931cb35fcd3.png)

```
WebSocket connection to 'ws://localhost:3000/ws' failed
```

## コード
(とりあえず動かしたかったので型定義は最低限しかしてません)
```src/App.tsx
import React, { useState, useEffect } from 'react';

const api = axiosBase.create ({
  baseURL: 'http://localhost:3000/dailies',
  responseType: "json",
})

const Request = async() =>{
  return await api.get('/')
}

const App: React.FC = () =>  {
  const [res, setRes] = useState([])

  useEffect(() => {
    Request().then((res: any) => {
      setRes(res.data)
    })
  },[])
  console.log(res)
  
  return(
    省略
  )
```

下記のようにブラウザからリクエストを送るとちゃんとレスポンスが返ってくる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685944/4ec2ff95-dd68-0973-e558-7098e767544f.png)

## 試したけどダメだったこと
### Railsのcorsの設定が正しくできているか確認する
```/config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:8000' # ここをReactを立ち上げているサーバーのPortに設定

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
```
=> 結果変わらず


## 参考リンク
https://github.com/facebook/create-react-app/issues/11779#issuecomment-1039783376


上記Githubのissueを隅から隅まで探した結果、無事解決しました。
Websocketがなんだかよくわかっていないので、引き続き勉強します。
ちなみにreact-scriptsのバージョン5.0以降に発生するらしい。
ポリヤの問題解決技法

今回は、昔読んだ問題解決に関する本についてお話したいと思います！問題解決は誰にとっても重要なスキルですが、開発者やエンジニアにとっては特に重要なスキルです。

![画像説明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh9zdo2lxqpm3kv9a0ex.jpg)

1945年にジョージ・ポリアは「How To Solve It」という本を出版し、100万部以上売れたそうです。私はレジュメを作成し、彼の本からいくつかのコンテンツを再利用するつもりです、したがって、私はここですべてを要約しようと思います 

ポリアは問題解決のための**4つの基本原則**を明らかにしました。

 
## 第一の原則：問題を理解する

まず、自分自身に問うべき簡単なことは、「質問・問題の意味を理解しているか」ということです。

- 問題を説明するときに使われる言葉をすべて理解しているか？
- 何を見つけるか、何を示すかを問われていますか？
- 問題を自分の言葉で言い直すことができますか？
- 問題を理解するのに役立つような絵や図が思いつきますか？
- 問題を理解するのに役立つ絵や図が思いつきますか？
- 解決策を見出すのに十分な情報がありますか?

## ポリアの第二原理 計画を練る

孫子の言葉です。難しいことは簡単なうちに計画し、大きいことは小さいうちに実行しなさい」。

計画を立てることは、問題を解決するための第一歩です。成功する計画を立てるには、多くのアプローチがあります。

* 推測と確認 
* パターンを捜す
* 整然としたリストを作る 
* 映像を描いて下さい
* 可能性を除去しなさい 
* Solve より簡単な問題
* Use の対称 
* Use a model
* Consider の特別な場合 
* 後方に働く
* 直接の推論を使用する 
* Use a formula
* Solve 方程式 
* 独創的である

私のお気に入りは パターンを見つけようとする、逆戻りする、より簡単な問題を解決する、これは大きな問題をより小さな問題に単純に分割することを意味します。

![画像説明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hxgunbm3ukmrx5auiat.jpg)



## ポリアの第三原則 計画を実行する

計画したことを一歩一歩実行しましょう。その過程では忍耐が大切ですが、うまくいかないことや計画の他の部分を邪魔することに時間を浪費しないようにしましょう。


## ポリアの第4原則 振り返る

前のステップに戻ることは、最後のステップです。
時間をかけてやり直すことは、理解を深めるためのシンプルな方法です。何がうまくいき、何がうまくいかなかったかをまとめるといいでしょう。


#### 1. 問題を理解する

- まず最初に 問題を理解する必要があります。
- 未知なるものは何か？データは何か？条件は何か？
- その条件を満たすことは可能か？その条件は未知数を決定するのに十分か？
を決定するのに十分ですか？それとも不十分か？あるいは冗長か？あるいは矛盾しているか？
- 図を描く。適切な表記法を導入する。
- 条件の様々な部分を切り離す。それらを書き出すことができるか？


#### 2. 計画の考案

- データと未知との関連を見つける。
  補助的な問題を考慮する必要がある。
- 以前にも見たことがあるか？または、同じ問題を見たことがありませんか？

- 未知数に注目! 身近な問題を考えてみよう 
  同じか似たような未知の問題を考えてみてください。
- あなたの問題に関連する問題で，以前解いたことのあるものがあります。それ 
  (StackOverflowやGithub)を使うことができますか？

- その問題を言い直せますか？
- 提案された問題が解決できない場合、まず関連する問題を解決してみましょう。
  関連する問題を解決してみてください。

- もっと身近な問題を想像できないか？
- 未知数かデータか、必要ならその両方を変更できないか？
  新しい未知数と新しいデータを互いに近づけることができますか？
  変更できましたか？

- すべてのデータを使用しましたか? 全条件を使用しましたか？
  問題に関わるすべての本質的な概念を考慮しましたか？

#### 3. 計画の実行

- 第三に 計画を実行する。
- 解決策を実行し、各ステップを確認します。そのステップが正しいことを明確に見ることができますか？それが正しいことを証明できますか？

![画像説明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djm8cc0yb45dtp3yhytv.jpeg) 

#### 4. 振り返り

- 得られた解答を調べます。
- 結果を確認できますか？引数を確認できるか？
- 別解を導けるか？一目でわかるか？
- その結果、あるいはその方法を他の問題に使えるか？

私は、「解き方」を読むことを本当にお勧めします。数学的手法の新しい側面。

この本は、berkeleyがPolyaの作品のレジュメを無料で公開してくれたので、それに触発されたものです。
https://math.berkeley.edu/~gmelvin/polya.pdf 

## Conclusion

**あなたのフィズバズ問題をPolyaの助けを借りて解決するときが来ました**。

ご意見・ご感想はTwitterでお気軽にどうぞ。
VSCodeを使っているフロントエンドエンジニアがWebStormについて調べてみた


# 本記事について

何の迷いもなく、フロントエンドエンジニアとしてVSCodeを2年間使っていたのですが、
たまたまWebStormについて調べる機会があったので、まとめてみました！
VSCodeにはなさそうな便利機能をざっくりご紹介できればといった感じです。

# そもそもIDEとは

統合開発環境(：Integrated Development Environment)のこと

## IDEの特徴
- 起動遅め
- メモリ大量に使いがち
- プラグインなしでも色んな事出来ちゃう

## 具体的には

- IntelliJ IDEA
- WebStorm
- Eclipse
- Android Studio
- Visual Studio
- PyCharm

などなど
# 対して、テキストエディタとは

## テキストエディタの特徴
- 起動はやい
- 動作も軽い
- 標準で出来ることが少ない(裏を返せば、自分好みにカスタマイズできる)

## 具体的には

- Visual Studio Code
- Atom
- Vim
- Emacs

などなど。

# 本題) WebStormについて

>WebStormは、JavaScript およびその関連テクノロジでコーディングするための統合開発環境です。
IntelliJ IDEA や他の JetBrains IDE と同様に、WebStorm は開発体験をより楽しくし、日常業務を自動化し、複雑なタスクを簡単に処理できるようにします。

とのこと。
参考) [WebStorm](https://www.jetbrains.com/ja-jp/webstorm/)

## 概要
開発は、JetBrains
費用は、法人で年間14,900円(1年目。2年目は20%オフ、3年目は40%オフ)

参考) [購入 WebStorm](https://www.jetbrains.com/ja-jp/webstorm/buy/#commercial)


VSCodeと違って、無料ではないです。
が、30日間は無料で使うことが出来るようなので、試してみました。

## VSCodeと比較したときの便利機能3選

### ①変数・関数の使用箇所を検索

VSCodeだと、`Ctrl + f`で文字列検索ができると思いますが、
WebStormでは、コード解析機能があるので、同じ文字列でも別物として扱ってくれた上で、使用箇所を表示してくれます。

### ②TODO管理が出来る

```javascript
// TODO : ~~~~~
```

と書くことで、IDE内のTODOパネルで管理できるようになります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646508/cd4e54d0-2655-d90d-098d-4d83ae06e54f.png)

VSCodeでも、やらなきゃいけないことをコメントで書いたりしていたのですが、
何かを書いた記憶だけはあるけど、どこに書いたかがパッと思い出せず、直近で更新したファイルを探しまくる無駄な時間を生み出していたりしていました。。

この機能があると、ファイル単位で管理できるだけじゃなくて、プロジェクト単位でTODOを管理できるので、めちゃくちゃ便利そうです。

### ③データベース管理機能

データベースの照会、作成、管理ができます。
個人的に一番刺さった機能です。
(VSCodeでもプラグインインストールで、類似の機能は実現できそうですが…)

具体的には
- MySQL
- PostgreSQL
- Microsoft SQL Server
- SQLite
- MariaDB
- Oracle
- Apache Cassandra

などのサポートがあります。

#### まずは、データソースへ接続

今回はMySQLへ接続してみようと思います。

https://pleiades.io/help/webstorm/mysql.html

1. 表示 > ツールウィンドウ > データベース
2. データソースおよびドライバーダイアログのデータソースタブで、追加アイコン（＋）をクリックし、MySQL を選択
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646508/d40c011d-9ab6-8d8a-26cc-8ac31616a94a.png)

3. 接続したいDBの接続情報を入力
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646508/2542e670-aa60-e870-2b92-4f605726e54e.png)

4. 下部にある「接続のテスト」をクリックして、「成功」が出たらOK

#### 早速、クエリコンソールを使ってみた

クエリコンソールとは、

>SQL ステートメントを作成および実行できる SQL ファイルです。スクラッチファイルとは異なり、コンソールはデータソースにアタッチされます。ターミナルを使用するのと同じ方法でクエリコンソールを使用できます。コードを入力して実行するだけです。

クエリコンソールを使って、SELECTやINSERT等なんでも書いて実行することができますが、勿論
- テーブルやカラムの補完が効く
- フォーマットしてくれる

だけでなく、

- テーブルにカーソルを当てると、カラムの情報が表示されて、テーブルプレビューもできる
    - テーブルプレビューでは、テーブルに入っている最初の10行を表示できる
- SELECT文で抽出したデータを、WebStorm上でcsvやtsv形式でローカルエクスポートできる

など大分便利な機能がついておりました。
わざわざmysqlコマンドを使う必要もなく、WebStormでデータソースに接続するだけで、色々出来ちゃうのは便利ではないですか？？


## ざっくりの感想・まとめ

- WebStormは、VSCodeと比べると起動がめちゃめちゃ遅い。
    - が、一度開いちゃえば気にならない感じ。
- DB関連の機能がめっちゃ便利そう
- そして、THE日本人の私からすると、ドキュメントが日本語であるのは超絶ありがたい。
    - [WebStormの使い方](https://pleiades.io/help/webstorm/meet-webstorm.html)

といった感じです。
今後も使っていきたいなぁという気持ちになったものの、お金がかかってしまうのですよね…。
VSCodeに不満があるわけでもないので、このままVSCodeを使い続けることにはなりそうです…笑


何か気になる点などある方は是非コメントなどお願いいたします！
docker 共有フォルダをどこに置くか (macOS編）

dockerコマンドで-vで、ファイルをホストOSとDockerで共有する場合、
ホストOSのどこにフォルダを置くのかで迷うことがある。

# dockerと同じ場所
## ホストOSで見えない場所
例えば、docker側で/var/tmp/ieeeに置く場合、ホストOS側も/var/tmp/ieeeにする。
課題としては、macOSだと、/varとか、/tmpは、フォルダ一覧で出ない。

## ホストOSで見える場所
例えば、/User/idnameをdocker側も同じにする。
課題としては、/の下に直接作るのは、docker側の定型的なフォルダでない。

課題は、macOSがubuntuと違うのが課題かも。


# dockerと違う場所
## 意味が同じ
docker側の/home/useridとホストOS側の同じ役割のフォルダ。
macOSであれば /User/useridのような

## 末尾の方が同じ
ホストOSの /User/userid/workspace/math
docker側が /tmp/workspace/math
のような末尾の２つが同じ名前にしておく。
# まとめに代えて

いろいろ迷ってやっていて、どこにどのデータを置いたかさっぱりわからなくなってしまったかも。

# 参考資料

箱庭もくもく会 #9

https://qiita.com/kaizen_nagoya/items/958d84fcd221894dbfe4


今日のdocker 作業

https://qiita.com/kaizen_nagoya/items/e4bb38dfb669acbecfde

docker 共有フォルダをどこに置くか (macOS編）

https://qiita.com/kaizen_nagoya/items/93c1fe6b112d1e7477e4

あなたもdocker, 私もdocker。docker(130)

https://qiita.com/kaizen_nagoya/items/8f2746f10f30b575d0a8
PowerAutomate: HTML を XML変換して値取得してみたが、素直に正規表現で取得したほうが良かった・・

# 背景
Mail だけでなく、HTML コンテンツはそれなりにある。
Automate で処理するときは専ら正規表現を使ってたが・・XML 解析したらもっと簡単に出来るんじゃない？とふと思い立って試してみた

# 結果
- XML に変換して処理したけど・・途中で正規表現も使うことになったし、もっと良い方法見つけないと使えない
    - HTML だと Tag 閉じてなくてもなんとかなるけど、XML だとエラー扱い⇒正規表現で修正
    - xpath で取得すると base64 encoded 状態なので、decode も必要
    - 取得結果が Tag 付き⇒正規表現でタグ削除

# 動作例
取得対象例：Message center からの通知内容のタイトル部分のみの取得がしたい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/5dbd283f-624f-538d-4a55-83e60e77a7ff.png)

実フローと取得例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/53172e3a-d9a8-84e9-33a8-309481f69e50.png)



# 概要

1. XML 変換前の前処理
1. XML 変換して、XPATH で対象取得
1. 取得結果の後処理

::: note info
[正規表現の置換](https://qiita.com/baku2san/items/3ee1cdcad96b45b49377) 例

:::

## XML 変換前の前処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/e7417489-c89c-3263-4235-0c1134f1e901.png)


1. 終了タグが無いと困るので、正規表現で修正<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/b14dc7a8-0790-702f-557e-c7455e8c906c.png)
1. \&nbsp; があると xml 変換時にエラーが出たので削除

## XML 変換して、XPATH で対象取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/077d1642-f55a-4ed5-ff02-79b4697705b6.png)

1. [xml](https://docs.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference#xml) 関数を使って、XML 認識させる
1. 認識出来たら [xpath](https://docs.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference#xpath) 関数で、xpath 指定で欲しいものを取得

今回の例はこんな感じ。font-size が Unique だったんで。
> xpath(outputs('Compose_convert_to_XML'), '//td[contains(@style, "font-size:28px")]')

## 取得結果の後処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/4e816b5e-cd9e-1146-6e4c-577d0d0bdd71.png)

1. xpath の結果を [vbase64ToString](https://docs.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference#base64ToString) 関数で decode して取得。decode 前は以下<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/7a470c45-1c6f-a649-7e17-37fda440af3b.png)
1. 取得結果には開始・終了タグが付いているので、削除して終わり<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/e63032a9-eb2d-9d04-9f4c-9f344307069a.png)



Decode 例
> base64ToString(outputs('Compose_retreive_data_by_xpath')[0]['$content'])

# あとがき
ん－・・正規表現一発で対象取得したほうが簡単で速い、ということが分かった・・悲しい事実 🤣

# keyword
how to retreive value from HTML in Power Automate by converting to XML
【高専ベンチャー社x友人 高専ハッカソン in Kisarazu】c言語しか触ったことがない人が優勝した話

# はじめに
はじめまして！　先日行われた、高専ベンチャー社＆私の友人が主催したハッカソン　Aチームのhirakazuと申します！！
Qiitaを書くのが今回が初めてなので拙い文章、わかりにくい表現等あると思いますが、最後まで見ていただけると喜びます。:)

# 制作したもの
~開発者会議にて~
　**開発テーマ「高専生活をハックするサービス」**
Dev A「何作ろっか?」
Dec B「過去問って先輩からもらうやん？でも先輩とのつながりがある人だけがもらえるから見れない人も出てくると思うし、共有サイト的なもの作ったらよくね？」
Dev　C「よし、つくろう！」

というかんじです（笑）
ほかにも、様々な年度の過去問が閲覧でき、問題の傾向などが理解しやすくなったりと、メリットばっかり！！

そして、完成したものが **「過去問共有サイト　-Past to Future-」**　が出来上がりました！

https://github.com/tos-up/PtF


# 開発
### -初日-
さて、なにやればいいんだ…　←己の無力さを感じる私
Nuxt,firebaseってなんぞや…　←更に己の無力さを感じる私
こんな感じでマジで全くわからない状態からスタートしました。内心、「これほんとうに完成するのか？」と思っていましたね。
そんな私にテックリードのチームメイトAが丁寧にわかりやすく、ほんとの基礎から教えてくれました^_^
しかもわっかりやすい！！発言をそのまま教科書にしたいレベルでした。

チームメイトAのおかげでnuxtのHow toがわかり、ちょっと安心して初日を終えられました。

### -二日目-
この日は、諸事情により私が学校に行けず、開発をほとんどチームメイトのお二人にまかせる感じでした。
家に帰ってGithubから二人が頑張って書いたコードをPullして実行してみると、なんかすごいのができてましたね。
あせりを感じつつもドキュメントを読んだりと、自学をしてました。（たぶん）

### -三日目-
三日目はチームメイトAによる、グリッドシステム講座をひらいてもらいました！！！あいかわらず、わかりやすい説明ですんなり理解できましたね。授業料をはらってもいい内容でしたがお金がないのであげません。←は？

### -四日目-
四日目にして私がようやく一人だち？というか、コンポーネントを作るという作業をしました。まず作成に取り掛かったのが、pdfファイルのアップロードシステムです。チームメイトAに教わりながら、なんとなく感覚を掴んでいきちゃんと動作するコンポーネントを作成できました! :)
チームメイトBも未経験開発者でありながらも、コンポーネントの作成頑張ってました！　彼は私と違って容量がいいので、すぐに身に付けてコードをかいていたので「すげぇ〜」ってなりましたね。

### -五日目-
五日目はナビゲーションバーとpdfファイルの表示をするコンポーネントの作成に取り掛かりました。
ナビゲーションバーはかんたんだったとこから、自分で調べて動くコードを作成できました。　ここあたりで、プログラムが動いたことによる、 **プログラミングの楽しさ** というか、開発の楽しさがわかってきました！
pdfを表示するコンポーネントが想像以上に難しく、難航してましたね…
あとこの日でオフラインで集まれるのが最後の開発日でした。

### -発表前日-
さぁ、成果発表会がせまってきました！肝心の作品ですが、まだ **６、７割** といったところでしたね。
焦りを感じつつ、前日から取り掛かっていたpdfの表示するコンポーネントを引き続き制作しました。なかなかpdfが表示されないことに私とアドバイスをしてくれたAは頭を悩ましていました…むずかしいね。。。
いろいろと調べてコードを書き換えていると、ようやく動くコードができた！めっちゃ嬉しかったです！！！

# -成果発表会-
私達Aチームは一番最後の発表という順番でした。順番がくるまで、他のチームのプレゼンを聞いていると、めちゃくちゃいい作品ばかりでした…！　　これやばいんじゃないかな…？と思いつつ私達の順番が回ってきました。
私自身、こういうプレゼンは初めてでとても緊張しましたね。ところどころ言葉に詰まりつつも、なんとかいいたいことを言い切れました！！！　hirakazu偉い！！
作品に関しては「目のつけどころがいい」などよいコメントを頂きました！ありがたい。

# 結果発表
なんと優勝！　めちゃくちゃ嬉しかったです…！
これもチームメイトのおかげだね。ありがとう!　:)

# 今回で学んだこと
とにかく　**知識**が必要だなと感じましたね。
プログラミングの知識、プレゼンの知識、マネージメントの知識などあるとないとでは全然違うなと感じました。
ハッカソンが終了しても継続して開発したり、新たな知識を身に着けていこうと思います。

# 最後に
ここまで読んで頂いた方、ありがとうございました。
今回の経験は本当に素晴らしい経験だったと思います。しかもめちゃくちゃ嬉しかったし楽しかったです。
また機会があればこのような企画にお邪魔させていただこうかなと思います。

審査員、主催者の皆様、そして参加者の方々、本当に **ありがとうございました！**

↓チームメイトの記事です。

https://qiita.com/tos-up/items/0ab8599287e02210009d

https://qiita.com/Haruto_h13/items/a322f61da512796e488e
【PHP基礎⑪】ループ処理-1.for文とwhile文

［問題］　　(参照：http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocksBasic.html)
Hello Ruki!を10回繰り返して表示するプログラムを作成しなさい。


１．for文の場合
# コード
```php
for($a = 1; $a <= 10; $a++){
    echo "Hello Ruki! \n";
}
```


# 結果
```
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
Hello Ruki! 
```



２．while文の場合
# コード
```php
$a = 0;
while($a < 10){
    echo 'Hello Ruki!',PHP_EOL;
    $a++;
}
```


# 結果
```
Hello Ruki!
Hello Ruki!
Hello Ruki!
Hello Ruki!
Hello Ruki!
Hello Ruki!
Hello Ruki!
Hello Ruki!
Hello Ruki!
Hello Ruki!
```



☆ループ処理～for文とwhile文～

＜for文＞
for(①カウンタの初期値;　②ループ処理の条件式;　③増減式){
   実行する処理;
}

①：はじめの値
②：どのような条件のところまで処理を行うか
③：処理1回毎に、値をいくつ増やしたり減らしたりするか

<while文＞
初期値；
while(条件式){
    実行する処理；
　　増減式；
｝


☆改行
～,PHP_EOL;

" \n";  　←　'　'はダメ。"　"を用いる！
random.choice() vs secrets.choice() 速度比較

# random.choice() vs secrets.choice() 速度比較

疑似乱数生成器である random.choice() と
暗号論的擬似乱数生成器 secrets.choice() の速度比較してみました。

セキュアな乱数生成するのに secrets.choice() 使いたいけど、100倍くらい遅かったらやだなぁというのがモチベーションです。

## こんなソース
```python
import random
import secrets
import time
import statistics

random_times = []
secrets_times = []
for i in range(100):
    random_start_time = time.time()
    random_result = random.choice(["a","b","c","d"])
    random_times.append(time.time() - random_start_time)

    secrets_start_time = time.time()
    secrets_result = secrets.choice(["a","b","c","d"])
    secrets_times.append(time.time() - secrets_start_time)

print("random mean={}sec, std={}sec.".format(statistics.mean(random_times),statistics.stdev(random_times)))
print("secrets mean={}sec, std={}sec.".format(statistics.mean(secrets_times),statistics.stdev(secrets_times)))
```

## macOS 実行結果
macOS Monterey / MacBookPro(13-inch,M1,2020)
```
random mean=1.6307830810546875e-06sec, std=2.936044302471756e-06sec.
secrets mean=4.281997680664063e-06sec, std=4.396602733953974e-06sec.
```
平均値で約2.6倍遅く、標準偏差で1.5倍ばらつきがある

## ラズパイ 実行結果
Raspbian GNU/Linux 10 (buster)
Linux raspberrypi 5.10.63-v7l+
```
random mean=5.178451538085937e-06sec, std=1.6347191595371236e-06sec.
secrets mean=1.6834735870361328e-05sec, std=8.922730321211521e-06sec.
```
平均値で約3.25倍遅く、標準偏差で5.46倍ばらつきがある

## GPUマシン 実行結果(自作)
Ubuntu 20.04.2 LTS (GPUマシン)
AMD Ryzen 7 2700 / NVIDIA GeForce 3090 RTX / 2080 RTX
```
random mean=1.1086463928222657e-06sec, std=6.468622126618904e-07sec.
secrets mean=5.218982696533203e-06sec, std=2.60643995534898e-06sec.
```
平均値で約4.74倍遅く、標準偏差で4.02倍ばらつきがある

## まとめ
思ったより遅くなかったので、今後は secrets.choice() 使います
Githubとは?

# Githubについて

端的に言うとGithubは、Gitの仕組みを利用して、インターネット上でのスムーズな共同作業を可能にしたサービスのことで、バージョン管理をすることができる。



#### では、バージョン管理とは何か?

変化するファイルの状態のことを「バージョン」という。つまり、ファイルの変更をバージョンとして記録して、記録した地点へいつでも戻れる仕組みを作っているのが、Gitである。

バージョン管理ができることによって、開発者が複数人いても、ファイルの最新状態や変更履歴をわかりやすく保てるのがメリット。

# Gitの大まかな仕組み

上記で述べた通り、Githubはバージョンを管理しているが、変更の差分を記録するのではなく、スナップショットを保存する仕組みをとっている。

スナップショットとは、ある時点でのソースコードや、ファイル、ディレクトリ、データベースファイルなどの状態を抜き出したもののこと。これによって、ファイルなどの差分を計算しなくて済むため、複数人での開発のスピードをあげることができる。

# Githubの概要図


![Github仕組み.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790379/f3f4af43-7441-9790-caa1-049000d85847.jpeg)

#### ワークツリー
Git管理下で作業しているディレクトリのこと。

#### ステージングエリア
コミット(スナップショットを記録すること)する変更を準備する場所。

#### ローカルリポジトリ
リポジトリは、コミットを貯めていく場所のこと。ローカルリポジトリは、手元で使っているパソコン内に作成する自分専用のリポジトリ。

#### リモートリポジトリ
ネットワーク上に存在するリポジトリのこと(Github)。

# 一旦ステージングエリアに追加する理由

ファイルやディレクトリなどの変更をすることによって、Gitに変更を加えたいものと加えたくないものを分けるために、ステージングエリアが設けられている。

# 参考
Git： もう怖くないGit！チーム開発で必要なGitを完全マスター (Udemy)
【rails】プルタブ式の生年月日フォームを簡単に追加するDay6

今日もお疲れ様です。今日はhtmlのパーツの配置とdeviseでユーザー登録機能を導入していました。今回は下写真のようにプルタブ式の”生年月日”を追加で実装するrailのヘルパーメソッド「f.date_select」について、簡易的にまとめます。
![スクリーンショット 2022-06-20 22.35.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707093/e83161b2-b88a-7888-1366-9f42715b08a7.png)



# 生年月日をテーブルに登録できるようにする
顧客に入力してもらった生年月日をデータベースに登録する場合はお読みください。やり方は結論から言って、マイグレートファイルにカラムを追記し、生年月日データを受けと取れるようにする必要があります。記述方法は以下
```ruby:〇〇〇〇〇〇〇〇_create_テーブル名.rb
t.date :birthday
```
注意点ですが、記述する前に「rails db:migrate:status」でマイグレートファイルがdownしていることを確認してから記述してください。

# htmlへの記述の仕方
全体像が以下のようになります。
```ruby:sample.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :birthday, "生年月日" %><br>
    <%= f.date_select :birthday, {start_year: 1950, end_year: 2016,
    include_blank: true, use_two_digit_numbers: true},
    {class: "input-tab birthday-select"}%>
  </div>
<%end%>
```
今回のテーマの生年月日プルタブのところを抽出すると以下のようになります。
```ruby:here
<%= f.date_select :birthday, {start_year: 1950, end_year: 2016,
    include_blank: true, use_two_digit_numbers: true},
    {class: "input-tab birthday-select"}%>
```
「:birthday」がカラムの名前。「start_year: 1950, end_year: 2016」がプルタブの範囲の指定（この記述だと1950年1月1日から2016年12月31日までのいづれかを選択できる）。「include_blank: true」はプルタブがあるページを訪れた時の、プルタブのデフォルトでの入力を空欄にするためのもの。「use_two_digit_numbers: true」が1桁の月や日付をテーブルに登録する場合には、頭に０をつけて2桁にしてくれるもの（例：2000年2月1日⇨2000-02-01、1951年4日12日⇨1951-04-12）。

その他追加できる機能として、日付だけのプルタブや、逆に年だけを選択するプルタブなども作れます。気になる方は是非下の参考サイトに立ち寄ってみてください。

# 参考サイト
https://railsdoc.com/page/date_select

↑見方がわかると便利なサイト

https://qiita.com/Nosuke0808/items/357adc0a254f5252d5b9

https://qiita.com/t_oginogin/items/519fb52e1708e26a8b73

https://railsdoc.com/form

https://qiita.com/TheOkachanPG/items/671ebb9771d370500ae5
生体認証でビジネスはどう変わる？

# はじめに
IT×ビジネスという視点で週1本記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)

# 生体認証とは
`生体認証とは、生体情報を使用して個人を認証するための仕組み`です。
生体認証で利用される認証情報には、「顔」「指紋」「静脈」「声紋」「虹彩(瞳)」「掌紋(手のひら全体のの模様)」など様々なものがあり、利用シーンに合わせて適切な認証技術が選定されます。

# 生体認証でビジネスがどう変わる？


### ■生体認証でキャッシュレス決済
現在の日本では、PayPayや楽天PayなどのQRコード決済が主流となってきており、非常に便利になったと感じますが、 __スマホさえいらない決済方法__ があるのをご存知でしょうか？
決済時または入店時に専用の認証用機械で個人を特定することで、あらかじめ個人と紐づけておいたクレジットカードから自動で支払うことができるのです。

### ■生体認証で監視社会の実現
例えば中国では、__天網(てんもう)__ と呼ばれるAIを用いた顔認証技術があります。街中に設置された無数のカメラで瞬時に人(個人)や車を把握しデータとして収集しています。ではそのデータは何に使用されているのでしょうか？例えば以下のような用途があります。
- 交通違反者の特定
→交通違反やマナー違反をした人物を瞬時に特定することができます。
- 犯人の特定・逮捕
- 信用スコアへの反映
→中国に限った話ではありませんが、世界中で __信用スコア__ と呼ばれる個人の信用度を数値化したシステムが普及され始めています。無数のカメラで特定された個人が行った行為が良いモノであれば信用スコアは上がり、規律を乱すモノであれば信用スコアは下がります。この信用スコアが高ければ金利が優遇されたり、融資が通りやすかったり、様々な無料のサービスを受けたりすることができます。


# 終わりに
中国の天網という技術から、 __ディストピア__ という言葉をイメージした方も多いと思います。ディストピアとはユートピア(理想郷)の反対の意味で、徹底的な監視により作り出された平和な社会を意味します。生体認証は個人を特定するための素晴らしい技術ですが、あまりにも厳しすぎる監視は反発を生む可能性があります。これからの世界はどういう方向へ進んでいくのでしょうか？

最後までお付き合いくださりありがとうございました。
PHP Goutte\Client でPOST JSON(application/json)するには


Goutte\Clientでスクレイピングというより自動化をしていたんですが、
FormではなくonclickでAJAX的にPOSTしている画面があって
Goutteは基本

```php
        $cli = new Client();
        $top = $cli->request('GET', "https://admin.abcd.efg/aaa");
        $loginForm = $top->filter('form')->form();
        $loginForm['text'] = 'hello';
        $cli->submit($loginForm);
```
てな感じでFormありきじゃないといけないっぽいので、
"formじゃないinput"に別途入れる方法ないかな？って探しまくって
途方に暮れていたら
いっそうのことPOSTを投げればいいんじゃないか！とひらめき
ブラウザのDevToolでネットワークを覗き、cURLで取得してみたら
POSTでJSONを送ってる感じだった。

とはいえ、POSTでJSON送りつけるやり方わからず相変わらず途方に暮れていたら
https://qiita.com/kouma1990/items/8ec2acbc8a9307bc206a
の記事を発見！これすごい！！

ということで目的のPOSTでJSONを送るというやりたいことは実現できました。
ありがとうございます。感謝感謝


```php

        $postdata["name"]="aaa";
        $postdata["text"]="hello";

        $options = JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_PRETTY_PRINT;

        $issue =  $cli->request('POST', "https://admin.abcd.efg/aaa", 
            array(), array(), array('HTTP_CONTENT_TYPE' => 'application/json'), json_encode($postdata, $options)
        );

        $res = $cli->getResponse();
        echo $res->getStatusCode()."\n";
```