OmniAICreator/Qiita-1.07M huggingface dataset:
100日後くらいに個人開発するぞ！day045

## 今日は総合問題を解いてみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/beea3a45-205a-d32c-9bda-79e0771f72a3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/53f05493-88f2-9be4-7541-7599ba1bdd16.png)

## 今日の備忘録

### ハッシュが値の配列でeachを使う場合
* ハッシュが値の配列でeachを使うと指定した変数にハッシュ要素が順番に代入される
    * 例：usersをuserに代入してnameキーのみ出力したい場合
        * `users=[`
        * `[name:"Yamada",age:21]`
        * `[name:"Tanaka",age:24]`
        * `]`
        * `users.each do |user|`
        * `puts user[:name]`



### nilを利用したif文
* ifの条件文で指定した値がない場合はnilになるため、else側の処理が実行される
    * 例：userの年齢情報がない場合に「〜さんの年齢は秘密です」と出力したい場合
        * `user=[name:"Yamada"]`
        * `if user[:age]`
        * ` puts "#[user[:name]さんは#[user[:age]]歳です"`
        * `else`
        * `puts "#[user[:name]さんの年齢は秘密です"`
Seleniumで利用するDriverの自動更新方法（Python）


社内ツールでseleniumを使って色々やろうとしたのだが、Chromeが頻繁に更新されるので、手動更新がめんどくさくなった。
自動更新の仕方を調べ、実際にコーディングし、意図する結果になっているので、整理しておく。

**※多少雑だが個人的備忘なのでご了承ください。**

そしてそのツールは現状日の目を見ていないが、法改正をキャッチするために日次でチェックするツール(スクレイピング)にでもしようかと思ったり。
**また、筆者はpythonはゴミレベルなので間違いとかあれば指摘歓迎です。**

なおJavaの記事は以下で記載しているので参考まで。（私はJavaで飯を食っているエンジニア）

https://qiita.com/soepy/items/6c6fb877737b43c2ffcd


# 環境情報

- python3
- Windows 10
- VsCode

※なお対象のdriverはchromedriver

# 実装

- まずseleniumがない場合はinstall

```sh
> pip install selenium
```

- 適当なフォルダにpythonのファイルを用意。
- import文を以下のように定義

```python
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

```
- 環境に存在しているchromedriverを自動更新する

```python

driver = webdriver.Chrome(ChromeDriverManager().install())

```

googleにログインする場合はprofileを指定する必要があるらしいので以下のように書きかえます。

```python

# プロファイル指定
profilefolder = '--user-data-dir=' +'%HOMEPATH%\AppData\\Local\\Google\\Chrome\\User Data\\Profile 1'
options = webdriver.ChromeOptions()
options.add_argument(profilefolder)

 # chromedrivarをインストール
driver = webdriver.Chrome(
    ChromeDriverManager().install(),
# オプション指定
    options = options
    )

```
これで勝手に更新してくれる。

場所は、**%HOMEPATH%\.cache\selenium\chromedriver\win32**以下にversionごとにフォルダができて、chromedriver.exeが存在しているはず。

seleniumuで自動テストなどを書いている場合は、実行の都度更新されていないとバージョン差異によって失敗するので、更新ロジックに続けでそのまま処理を書いる。
※そんなことしなくても大丈夫なはず。

- driverを利用してseleniumで起動、実行（完成形）

```python

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager


# プロファイル指定
profilefolder = '--user-data-dir=' +'%HOMEPATH%\AppData\\Local\\Google\\Chrome\\User Data\\Profile 1'
options = webdriver.ChromeOptions()
options.add_argument(profilefolder)

# chromedrivarをインストール
driver = webdriver.Chrome(
    ChromeDriverManager().install(),
# オプション指定
    options = options
    )

# フルパスを指定
driver.get("https://www.google.com")

# DOM要素を取得
img = driver.find_element_by_class_name("lnXdpd")


```

一応こんな感じで実行できることは確認できている。
、、、動的型付けマジわからん。なれない。
Firebaseとの連携でちょいハマりした原因はReact18での「クライアントレンダリングAPIの更新」が原因だった。

ReactとFirebaseとの連携を勉強していて**Realtime Databaseにデータが送れない**と作業が止まっていました。
原因は、Firebase周りの設定が原因だと思っていましたが、**React18に対応した記述に対応できていなかった**ことでした。


## 実際のコード

```diff_javascript: 対応前
import React, { useState } from 'react';
- import ReactDOM from 'react-dom';
+ import { createRoot } from 'react-dom/client';

// 省略

const App = () => {
  // 省略
};

- ReactDOM.render(<App />, document.getElementById('app'));
+ const container = document.getElementById('app');
+ const root = createRoot(container);
+ root.render(<App />);

```

## 結論
コンソールにエラーが出ていたのに動いているから大丈夫…と思っていたのが良くなかった。
**バージョンによるエラー関連を潰してからFirebaseの設定を見直す**のが最適な方法でした。

詳しい情報は公式ページに書いてあるのでエラーでお困りの方は一読することをオススメします。

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

以上です。
誰かのお役に立てることを祈っております。
Redis requires a monkey patched socket library to work with geventと表示される

```app.py
from gevent import monkey
monkey.patch_all()
```

をapp.py (`flask run`などで使用しているファイル) の先頭に追加して解決。

https://github.com/miguelgrinberg/Flask-SocketIO/issues/1084

https://www.gevent.org/api/gevent.monkey.html

> Make the standard library cooperative.
> 
> The primary purpose of this module is to carefully patch, in place, portions of the standard library with gevent-friendly functions that behave in the same way as the original (at least as closely as possible).
>
> The primary interface to this is the patch_all() function, which performs all the available patches. It accepts arguments to limit the patching to certain modules, but most programs should use the default values as they receive the most wide-spread testing, and some monkey patches have dependencies on others.
>
> Patching should be done as early as possible in the lifecycle of the program. For example, the main module (the one that tests against `__main__` or is otherwise the first imported) should begin with this code, ideally before any other imports:
ダブルクリックで WSL シェルスクリプト起動



## Windows の WSL で自作のシェルスクリプトを手軽に起動させる方法
まずシェルスクリプトを作ります。次にバッチファイルを作って、そのショートカットをデスクトップに貼ります。あとはそのショートカットをダブルクリックするだけです。とても簡単ですね。

**サンプル１**
test.sh（シェルスクリプト）
```bash
#!/bin/bash
echo 'success!'
sleep 3
```


test.bat（バッチファイル）
```batch
wsl ./test.sh
```

上記の二つのファイルを作ったら、エクスプローラーを開いて、例えば、C ドライブの `C:\Users\ユーザ名` や`ドキュメント`などに置きます。あとはバッチファイルのショートカットをデスクトップに貼って、ダブルクリックすればオッケーです。

このやり方で仕上げた自作のスクリプトを note に公開しています。よかったら覗いてみてください。
[ダブルクリックで＜作成日と通し番号＞自動入力のテンプレート](https://note.com/akauma16/n/nc10ddb2bb03c)

ただこの方法だと、test.bat と test.sh を Linux 側のホームディレクトリに置いた場合、うまく動きません。バッチファイルを実行すると、`UNC パスはサポートされません。Windows ディレクトリを既定で使用します。`と表示されます。
`wsl ./test.sh`では、パスが正しく認識されていないようです。
なので`wsl /home/<ユーザ名>/test.sh`のようにフルパスにします。これでオッケーです。

わかりやすいようにもう一つサンプルを挙げておきます。

**サンプル２**
work/       
├── test.sh
└── test.bat

test.sh
```bash
#!/bin/bash
echo 'success!' > /home/<ユーザ名>/work/result.txt
```

test.bat
```batch
wsl /home/<ユーザ名>/work/test.sh
```

work ディレクトリの置き場所は、既定のディストリビューションのホームディレクトリです。
バッチファイルを実行して work ディレクトリの中に 新たに result.txt が作られ、success! と書き込まれていたら成功です。
Windows の C ドライブに置くよりも、こちらのほうが確かにパフォーマンス的にはいいかもしれません。

あと、検索すると、`pushd %~dp0` を使う方法もあるようです。
https://grum.hatenablog.com/entry/2015/06/03/072310

**サンプル３**
test.sh
```bash
#!/bin/bash
echo 'success!' > ./work/result.txt
```
test.bat
```batch
pushd %~dp0
wsl ./work/test.sh
```

こちらはディストリビューションのカレントディレクトリがホームディレクトリになっているようです。

以上です。お疲れさまでした。
Next.jsのAPI Routesのメモ

# Next.js API Routes
公式のドキュメントを自分用にまとめています。
__フロントのプロジェクトから外部のAPIサービスにアクセスすることが可能になった。__

## その1 エンドポイントは`pages/api`以下のファイルとなる
例えば、 article.jsファイルを作成して、titleがhogeという`json`形式でステータスコードが200のレスポンスを返すfunctionを作成する。
今回はexport　defaultをおこなっている。named　exportも可能。
```pages/api/article.js
export default function getArticles(res, req) {
  res.status(200).json({ title :'hoge'})
}
```

- req: http.IncomingMessageの代わり
→ more: https://nextjs.org/docs/api-routes/api-middlewares
- res: http.ServerResponseの代わり
→ more: https://nextjs.org/docs/api-routes/response-helpers

##

## 公式
https://nextjs.org/docs/api-routes/introduction
Windowsコマンド メモ、リンク

## help
|項目|説明|備考|
|----|----|----|
|ヘルプ確認|help コマンド名||

## cd
|項目|説明|備考|
|----|----|----|
|カレントディレクトリ確認|cd||

## dir
|項目|説明|備考|
|----|----|----|
|ファイル検索|dir ファイル名||
|再帰検索|dir /s|サブディレクトリのs|

## type
|項目|説明|備考|
|----|----|----|
|ファイル閲覧|type ファイル名||
|空のファイル作成|type NUL > null.txt||

## ren
|項目|説明|備考|
|----|----|----|
|リネーム|ren ファイル名 リネーム名|ワイルドカード可|

https://windows.command-ref.com/cmd-ren.html
# 【JavaScript 関数ドリル】中級編のintersection関数の実装アウトプット

## intersection関数の課題内容

\_.intersection関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#intersection

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。
https://js-drills.com/blog/intersection/

## 課題に取り組む前の状態

- 解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

- 解答例はevery関数を使用して簡潔に書かれており、every関数を新たに知ることができてよかった。



## intersection関数の実装コード（答えを見る前）

```javascript
function intersection(...arrays) {
  const copiedArray = [...arrays];
  const newArray = [];
  let value = [];
  let flag = true;

  for (let i = 0; i < copiedArray[0].length; i++) {
    value = copiedArray[0][i];
    console.log(`****value = ${value}`);
    for (let j = 1; j < copiedArray.length; j++) {
      console.log(`copiedArray = ${copiedArray[j]}`);
      if (copiedArray[j].includes(value)) {
        console.log(`yes! ${value}`);
        flag = true;
      } else {
        console.log(`NOOOO! ${value}`);
        flag = false;
        break;
      }
    }
    if (flag) {
      newArray.push(value);
    }
    flag = true;
  }
  return newArray;
}

let result = intersection([2, 1], [2, 3]);
console.log(result);
// => [2]
result = intersection([2, 1], [2, 3], [2, 4]);
console.log(result);
// => [2]
result = intersection([2, 1], [1, 2, 3], [2, 4]);
console.log(result);
// => [2]
```

##　intersection関数の実装コード（答えを見た後）

```javascript
function intersection(...arrays) {
    const newArray = [];
    const headArray = arrays.shift();

    for (let i = 0; i < headArray.length; i++){
        const value = headArray[i];
        if (arrays.every((array) => array.includes(value))) {
            newArray.push(value);
        }
    }

    return newArray;
}
```
Azure : Azure AD 認証で Azure Virtual Machine (Linux) にログインする

Azure Active Directory 認証と連携させたつもりの Virtual Machine (Ubuntu 20.04 LTS) にログインしようとしたところ、エラーが発生しました。

```powershell
PS C:¥> az ssh vm --hostname test-vm.japaneast.cloudapp.azure.com
OpenSSH_for_Windows_8.1p1, LibreSSL 3.0.2
azuread-user@test.onmicrosoft.com@test-vm.japaneast.cloudapp.azure.com: Permission denied (publickey).
```

VM 作成時に指定したユーザーと秘密鍵ファイルを使用したログインは可能です。

```powershell
PS C:¥> ssh -l azureuser test-vm.japaneast.cloudapp.azure.com -i identity.file
```

## VM 作成手順

以下２パターンを実施し、いずれも VM のログインに失敗しました。

- Azure portal から VM を作成する際に、「Azure Active Directory でログインする」を ON にする。
- Terraform から VM を作成する際に、拡張機能 `AADSSHLoginForLinux` を追加する。

VM は東日本リージョンに作成しています。

## 解決方法

`AADSSHLoginForLinux`を追加したのちに、`AADLoginForLinux`を追加することで解決しました。

Terraform から VM を作成することで確認しています。

Azure portal から作成した VM については試していませんが、同様の処置が必要かと思います。

## Terraform

Terraform で拡張機能を追加した際のコードを掲載します。

```tf
resource "azurerm_virtual_machine_extension" "aadsshlogin" {
  name                       = "AADSSHLoginForLinux"
  virtual_machine_id         = azurerm_virtual_machine.example.id
  publisher                  = "Microsoft.Azure.ActiveDirectory"
  type                       = "AADSSHLoginForLinux"
  type_handler_version       = "1.0"
  auto_upgrade_minor_version = true
}

resource "azurerm_virtual_machine_extension" "aadlogin" {
  name                       = "AADLoginForLinux"
  virtual_machine_id         = azurerm_virtual_machine.example.id
  publisher                  = "Microsoft.Azure.ActiveDirectory.LinuxSSH"
  type                       = "AADLoginForLinux"
  type_handler_version       = "1.0"
  auto_upgrade_minor_version = true

  # ポイント！
  depends_on = [
    azurerm_virtual_machine_extension.aadsshlogin
  ]
}
```

「ポイント！」部分について、`depends_on`を指定して`AADSSHLoginForLinux`の後に`AADLoginForLinux`が追加されるようにしないと、`terraform apply` で以下のエラーが発生しました。

```powershell
Error: Code="VMExtensionHandlerNonTransientError" Message="The handler for VM extension type 'Microsoft.Azure.ActiveDirectory.AADSSHLoginForLinux' has reported terminal failure for VM extension 'AADSSHLoginForLinux' with error message: '[ExtensionOperationError] Non-zero exit code:23, ...
```

## 気になること

2022年1,2月頃に VM を作成した際は、`AADLoginForLinux`が無くてもログインできました。
本現象が発生した、2022年6月時点でも、すでに作成済みの VM には`AADLoginForLinux`の追加なしにログインできました。
また、2022年6月時点の公式ページ（後述の参考サイト）には、`AADLoginForLinux`の追加が必要とは記載されていませんでした。

この現象が突如発生するようになった要因が不明です。

## 参考サイト

[OpenSSH 証明書ベースの認証を使用した Azure Active Directory で Azure の Linux 仮想マシンにログインする](https://docs.microsoft.com/ja-jp/azure/active-directory/devices/howto-vm-sign-in-azure-ad-linux)
Redmine DB を覗く

およそ、Redmine内のデータをあれこれ見たいときに参照したもの。

[Overview - Redmine](https://www.redmine.org/)
http://guide.redmine.jp/

## 構造
[[Redmine] データベースのチケット周辺をER図にしました | A1 Style](https://a1-style.net/topics-redmine-database-arround-issues-table-entity-relationship-diagram/)
[Redmine データベースの テーブル構造を紐解いてみる - Google スライド](https://docs.google.com/presentation/d/e/2PACX-1vSGC3DEnLZqAEs4zRmkCsrEz4m3Uj0qo0fiMHi2JexyVYUdV6wjoUftoIhhVTc1C-r_6lJDDOBuafvu/pub?start=false&loop=false&delayms=3000&slide=id.p)

## チケット一括操作
[Redmine チケットと注記データをデータベースに直接インポートする | MSeeeeN | 大阪発 IT メディア by MSEN](https://mseeeen.msen.jp/redmine-import-ticket-data-to-database-directly/)
[Excelからチケットを作成・更新できる「Redmineチケット★一括★」 | Redmine.JP Blog](https://blog.redmine.jp/articles/redmine-ticket-ikkatsu/)
| テーブル名 | 説明 |
|-:|:-|
| issues |チケット|
| journals | チケットの変更記録, 注記  |
| journal_details | 変更記録の詳細 |
| attachments | 添付ファイルの情報 |


[Redmine - Qiita](https://qiita.com/tags/redmine)

以上です～
2022/6/14主にITとかセキュリティの記事

会議室用ウェブカメラに脆弱性、詳細も公開 - 米政府は悪用脆弱性リストに追加
https://www.security-next.com/137269

セキュリティリリース「PHP 8.0.20」が公開 - 複数脆弱性を解消
https://www.security-next.com/137261

電子書籍ストアに不正ログイン - 外部でPWなど入手か
https://www.security-next.com/137257

LINEギフトで「ほしいものリスト」を友だち以外に誤配信
https://www.security-next.com/137255

「Emotet」感染でアカウント奪われ、大量のメール送信 - 埼大
https://www.security-next.com/136773

ロシア系ハッカー集団の手口はどうなっているのか？　まるで“会社員”のように動く(6/12)
https://www.okinawatimes.co.jp/articles/-/973208

民間事業者による個人情報の漏えいや紛失 昨年度は約5800件(6/10)
https://www3.nhk.or.jp/news/html/20220610/k10013665481000.html

Emotetの機能追加について(6/11)
https://el.jibun.atmarkit.co.jp/hfukkoshi/2022/06/emotet.html

Windows 11アップグレード、サポート外の古いPCにうっかり提供される。アップグレードすると面倒なことに…(6/10)
https://getnavi.jp/digital/751191/

Magentoを標的にしていたマルウェアがWordPressでも脅威に(6/12)
https://news.mynavi.jp/techplus/article/20220612-2364818/?gpt=newspicks&utm_source=newspicks&utm_medium=rss

デジカメ部品の供給網を最適化、富士フイルムがブロックチェーン活用(6/12)
https://newswitch.jp/p/32495

ドーナツ屋のアプリ、位置情報の過剰トラッキングで当局から指導(6/10)
https://gunosy.com/articles/a5oIb

サステナビリティ重要単語：CSRD(6/10)
https://www.alterna.co.jp/49431/

テストってどうやればいいの？(6/9)
https://qiita.com/cwan/items/6bc1c4876ced33ba1f9d

リリース間近のWindows 11 バージョン22H2 - 阿久津良和のWindows Weekly Report(6/12)
https://news.infoseek.co.jp/article/mynavi_2429187/?tpgnr=it

Microsoft Edgeの最新版が公開　深刻度「重要」の脆弱性に対処(6/11)
https://www.itmedia.co.jp/enterprise/articles/2206/11/news036.html

米政府、「中国政府のハッカー」が利用するツールや脆弱性を警告(6/12)
https://forbesjapan.com/articles/detail/48084/1/1/1?s=ns

Google Chromeに重要な脆弱性、アップデートを(6/11)
https://news.infoseek.co.jp/article/mynavi_2429019/?tpgnr=it

Azureの利用コストを最適化するためのベストプラクティス(6/10)
https://ascii.jp/elem/000/004/092/4092168/?rss

ランサム被害の徳島・半田病院、報告書とベンダーの言い分から見える根深い問題(6/13)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/06927/

システム障害を恐れてサイバー攻撃で撃沈、愚かすぎるIT部門の言い訳とは(6/13)
https://xtech.nikkei.com/atcl/nxt/column/18/00148/060800229/

個人情報保護委員会、デジタル時代の役割とは？一新した理念を丹野委員長に聞く(6/13)
https://xtech.nikkei.com/atcl/nxt/column/18/00677/052000113/
Power Query workout - Table.Distinct

よくわからんよね、`equationCriteria`パラメータ

https://docs.microsoft.com/en-us/powerquery-m/table-distinct
```text:Power&#x20;Query
Table.Distinct(table as table, optional equationCriteria as any) as table
```

```text:Power&#x20;Query
Table.Distinct(SourceTable)
```
```text:Power&#x20;Query
Table.Distinct(SourceTable, Comparer.Ordinal)
```
```text:Power&#x20;Query
Table.Distinct(SourceTable, Comparer.OrdinalIgnoreCase)
```
```text:Power&#x20;Query
Table.Distinct(SourceTable, Comparer.FromCulture(Culture.Current))
```
```text:Power&#x20;Query
Table.Distinct(SourceTable, {"Column1", "Column2"})
```
```text:Power&#x20;Query
Table.Distinct(SourceTable, {"Column1", Comparer.Ordinal})
```
```text:Power&#x20;Query
Table.Distinct(
    SourceTable,
    {
        {"Column1", Comparer.Ordinal},
        {"Column2", Comparer.OrdinalIgnoreCase}
    }
)
```
```text:Power&#x20;Query
Table.Distinct(
    SourceTable,
    {
        {"Column1", Comparer.Ordinal},
        {"Column2", Comparer.OrdinalIgnoreCase},
        {"Column3", Comparer.FromCulture(Culture.Current)}
    }
)
```
```text:Power&#x20;Query
Table.Distinct(SourceTable, {each _, Comparer.Ordinal})
```
```text:Power&#x20;Query
Table.Distinct(SourceTable, {each [Column1], Comparer.Ordinal})
```
```text:Power&#x20;Query
Table.Distinct(
    SourceTable,
    {
        {each [Column1], Comparer.Ordinal},
        {each [Column2], Comparer.OrdinalIgnoreCase},
        {each [Column3], Comparer.FromCulture(Culture.Current)}
    }
)
```
```text:Power&#x20;Query
Table.Distinct(
    SourceTable,
    {each [[Column1],[Column2]], Comparer.Ordinal}
)
```
```text:Power&#x20;Query
Table.Distinct(
    SourceTable,
    {
        {each [[Column1],[Column2]], Comparer.Ordinal},
        {each [[Column3],[Column4]], Comparer.OrdinalIgnoreCase}
    }
)
```
# 思ったこと🙄
みんなで共有すればいずれ伝搬する。

https://qiita.com/tanuki_phoenix/items/215a2cd331b34533242d


# その他
https://powerbi.connpass.com/

- [Power BI 勉強会 - connpass](https://powerbi.connpass.com/)
- [Power BI Desktop を使い始めるには](http://qiita.com/PowerBIxyz/items/6c4735cb5b5712e70981)
- [Excel で Power Query を使い始めるには](http://qiita.com/PowerBIxyz/items/52e563037b855a099ca9)
ctf4b 2022 CoughingFox Write up

# SECCON ctf4b 2022
## 22 CoughingFox Write up
クソ雑魚ナメクジエンジニアによる CoughingFox の解法を...

## 問題
```python
from random import shuffle

flag = b"ctf4b{XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX}"

cipher = []

for i in range(len(flag)):
    f = flag[i]
    c = (f + i)**2 + i
    cipher.append(c)

shuffle(cipher)
print("cipher =", cipher)
```

```txt
cipher = [ 12147, 20481, 7073, 10408, 26615, 19066, 19363, 10852, 11705, 17445, 3028, 10640, 10623, 13243, 5789, 17436, 12348, 10818, 15891, 2818, 13690, 11671, 6410, 16649, 15905, 22240, 7096, 9801, 6090, 9624, 16660, 18531, 22533, 24381, 14909, 17705, 16389, 21346, 19626, 29977, 23452, 14895, 17452, 17733, 22235, 24687, 15649, 21941, 11472]

```

なるほど、
1. Byteとしてflagを読み込む
2. `i`番目の文字`f`を
`(f + i)**2 + i`しているらしい。
3. 最後にシャッフルして順番をめちゃくちゃにするらしい

## 回答
与えられた数列を`(f + i)**2 + i`の逆の手順で行えばいい。
具体的には
`(c-i)**0.5 -i`すると、`f`がでてくる。

平方根とってぴったりと整数で出てくるバイトはほぼクロだから、該当するバイトを復号し、複合に使用した`i`の順でソートすればよい
```python
import math

cipher = [
    12147, 20481, 7073, 10408, 26615, 19066, 19363, 10852, 11705, 17445, 3028, 10640, 10623, 13243, 5789, 17436, 12348, 10818, 15891, 2818, 13690, 11671, 6410, 16649, 15905, 22240, 7096, 9801, 6090, 9624, 16660, 18531, 22533, 24381, 14909, 17705, 16389, 21346, 19626, 29977, 23452, 14895, 17452, 17733, 22235, 24687, 15649, 21941, 11472
]

flag = []

s = []
dic = dict()

for j in range(len(cipher)):
    for i in range(len(cipher)):
        f = (cipher[j] - i )** 0.5 - i
        if f == math.floor(f):
            ch = int(f).to_bytes(2, 'big').decode()
            flag.append(ch)
            dic[i] = ch

for i in range(len(dic)):
    print(dic[i], end="")
```
復号に使用した`i`で並び替えることにまったく気が付かなくてかなり時間をとられてしまったので反省。
【TypeScript】クラス

## クラスの型定義
```ts
class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  profile(): string {
    return `name: ${this.name}, age: ${this.age}`
  }
}
let tanaka = new Person("Tanaka", 32)
console.log(tanaka.profile())

```
【React】react-material-uiでリンクにdownload属性を付与する

## 概要
HTMLのアンカーリンクには、[HTML5入門-download属性](http://html5.cyberlab.info/elements/text/a-download.html)のページにある通り、指定したパスをクリックするとダウンロードが行われるよう設定できます。
react-material-uiでは[Link](https://mui.com/material-ui/react-link/)のコンポーネントが用意されていますが、このLinkでクリック時にダウンロードが行われるにはどうするかメモ書きします。

## 対応
HTMLと同様にdownload属性が付与できますので、Linkコンポーネントにdownload属性を設定します。

## 実装サンプル

```react
import { Link, Typography } from '@mui/material'

export const Sample = () => {
  return (
    <Link href="https://sample.com/test.csv" download>
      <Typography fontSize="14px">サンプルCSVダウンロード</Typography>
    </Link>
  )
}
```
lxml.etree で XML の基本的なことをもう少し触ってみる

# 目的
[Windows 10 + Excel2016_x86 VBA で XML の基本的なことを少し触ってみる](https://qiita.com/tabizou/items/10eb832352a6b31888c7)
で使用したXMLファイルをPythonで基本的な操作をもう少し試してみる。

## Pythonのサンプルコード
基本的な機能をもう少し試してみる。

```python
# Windows Add env PYTHONIOENCODING = UTF-8 & restart vscode
# coding:utf-8

from lxml import etree
import urllib.request

# urlencode
urladr = urllib.parse.urlencode({'addr':'池尻4-35-25'})
url = "http://geocode.csis.u-tokyo.ac.jp/cgi-bin/simple_geocode.cgi?charset=UTF8&" + urladr

with urllib.request.urlopen(url) as response:
    xml = response.read()
    url = response.geturl()
    info = response.info()

# urldecode
print(urllib.parse.unquote(url))
# http://geocode.csis.u-tokyo.ac.jp/cgi-bin/simple_geocode.cgi?charset=UTF8&addr=池尻4-35-25

print(info)
# Date: Mon, 13 Jun 2022 15:33:19 GMT
# Server: Apache/2.4.41 (Ubuntu)
# Access-Control-Allow-Origin: *
# Vary: Accept-Encoding
# Connection: close
# Transfer-Encoding: chunked
# Content-Type: application/xml; charset=utf-8

root = etree.XML(xml)

children = list(root)
for elem in children:
    print(elem.tag, elem.text)
    for items in elem:
        print(items.tag, items.text)

# query 池尻4-35-25
# geodetic wgs1984
# iConf 4
# converted 池尻4-35-
# candidate 

# address 東京都/世田谷区/池尻/四丁目/３５番
# longitude 139.673965
# latitude 35.654259
# iLvl 7
# candidate 

# address 兵庫県/伊丹市/池尻/四丁目/３５番地
# longitude 135.381805
# latitude 34.784988
# iLvl 7

```
# 参考にしたのは以下のサイト
[Excel の WEBSERVICE 関数でジオコーディング](https://qiita.com/frogcat/items/585c7de901c31cf30760)
[xml.etree.ElementTree --- ElementTree XML API](https://docs.python.org/ja/3/library/xml.etree.elementtree.html)
[文字列を URL エンコード／デコードする (quote, unquote)](https://maku77.github.io/python/web/url-encode.html)
[Windows 10 + Excel2016_x86 VBA で XML の基本的なことを少し触ってみる](https://qiita.com/tabizou/items/10eb832352a6b31888c7)
[xml.etree.ElementTree で XML の基本的なことを少し触ってみる](https://qiita.com/tabizou/items/54ec8c6a538f3d3b12af)
[lxml.etree で XML の基本的なことを少し触ってみる](https://qiita.com/tabizou/items/665bf77b760b4c336ae6)
【ゲーム制作】「先生！2DSTGで弾を好きな方向に飛ばすにはどうすればいいんですか？」

弾幕シューティングなどは一体どうやって弾を動かしているのか？
大半の人が「こんなのどこで使うんだ」と高校の時に挫折した三角関数を使用する。
そう、誰もが嫌がる「Sin」「Cos」だ。動く点P並に嫌がられてるはずだ。
ついにこいつらが日の目を浴びる時が来たのだ。

例として、真下に飛ばす弾の移動方法を載せておく。

```C#:90度（多分真下、違っていたら真上）の方向に弾を飛ばす
using System;

double angle = 90.0; // 角度を90°にする
double speed = 3.0; // 弾の速度（好きな数字を入れる）
double x = 0.0; // 弾のX座標
double y = 0.0; // 弾のY座標

// 弾を移動させる
x += speed * Math.Cos(angle * (Math.PI / 180));
y += speed * Math.Sin(angle * (Math.PI / 180));

// x, yを使って弾を表示する

```

難しいことは考えなくてよい。この通りに書けばそちらに飛んでいく。
三角関数の中身を考えるのは、弾を飛ばして喜んだ後でいい。

角度を変えるとそちらの方向に飛んでいくので、0～360の好きな数字を入れてみて欲しい。
x,yの初期値をキャラの座標とかにするとキャラから飛んでいるように見える。

次に全人類憧れの360°方位弾を作ってみる。
これはforを使って弾を360個同時に飛ばす。

```C#:360°の方向に弾を飛ばす
// 弾の座標を入れる変数を360個分作る
double[] x = new double[360];
double[] y = new double[360];

for(int i=0;i<360;i++) {
    // 弾を移動させる(ループカウンタiを角度にする)
    x[i] += speed * Math.Cos((double)i * (Math.PI / 180));
    y[i] += speed * Math.Sin((double)i * (Math.PI / 180));

    // x[i], y[i]を使って弾を表示する
}

```

良い弾幕を。
Addressables Group.BundleModeのユースケース


Addressablesのパッキング(アーカイブ)に関するメモです。

# 動作確認環境
- Unity 2022.1.2f1
- macOS 12.4
- Addressables 1.12.0

# 概要
AddressablesのGroup設定は、
Assets/AddressableAssetsData/AssetGroupsに
Scriptableアセットとして列挙されます。

本稿では、このGroup設定の中でパッキング方法に直接影響のある
**Bundle Mode** に絞ってユースケースを記載します。

![Screen Shot 2022-06-13 at 23.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/7d668f57-b997-ccdf-da5e-02d66ef6a3ad.png)

# 素材

キャラクターモデルのアセットを扱うと想定して、
それぞれのフォルダにfbxファイルが１つ入っている構成を検証しました。

又、検証用のグループとして Assets/AddressableAssetsData/AssetGroups/SampleModel.asset
を作成しました。

![Screen Shot 2022-06-13 at 23.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/1b553eed-9809-0ade-6805-4c4d7b6d4b36.png)

# ユースケース

### グループに所属するアセットを、１つのファイルにパッキングする

Bundle Mode に **【Pack Together】** を設定します。

SampleModelグループに対象となるアセットを登録します。
![Screen Shot 2022-06-14 at 0.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/22bf44e0-c1ec-07bb-4918-56e94dbe6c25.png)

対象のアセット群が１つのファイルにパッキングされました。
※作成されるバンドルファイル名は、Labelの影響は受けません
![Screen Shot 2022-06-13 at 23.45.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/5c461915-e6b0-57cd-4ed4-de64887d445e.png)


### グループに所属するアセットを、全てパッキングせず独立したファイルにする

Bundle Mode に **【Pack Separately】** を設定します。

SampleModelグループに対象となるアセットを登録します。
![Screen Shot 2022-06-14 at 0.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/22bf44e0-c1ec-07bb-4918-56e94dbe6c25.png)

対象のアセット群が、それぞれ独立したバンドルファイルとして作成されました。
※作成されるバンドルファイル名は、Labelの影響は受けません
![Screen Shot 2022-06-13 at 23.47.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/d238aff5-aa12-0d64-5402-9aefc16c8141.png)

### グループに所属するアセットを、同じラベルを持つアセット単位でパッキングする

Bundle Mode に **【Pack Together By Label】** を設定します。

パッキングする定義の数だけグループを作成するのは管理が著しく大変になるので、
ラベルを使ってパッキングの単位を設定します。

SampleModelグループに対象となるアセットを登録します。
#### まずはラベル名を付けないでやってみます。
![Screen Shot 2022-06-14 at 0.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/22bf44e0-c1ec-07bb-4918-56e94dbe6c25.png)

全てが空文字ラベル？として、１つのファイルにパッキングされました。
![Screen Shot 2022-06-13 at 23.50.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/115b13eb-274f-5028-8fde-d7e92de34890.png)

#### 次にchXXXの単位でラベルを付けてみます。
![Screen Shot 2022-06-14 at 0.13.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/591986b5-90cf-1840-9017-5188fa612f04.png)

ラベル名の単位でパッキングされたファイルが作成されました。
![Screen Shot 2022-06-14 at 0.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/5123047d-e0ae-4484-71dd-98148c988f70.png)

#### ちなみにラベル名に / を入れると
![Screen Shot 2022-06-14 at 0.20.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/898427c7-9c3d-5d93-5d27-dd34fcad530a.png)

作成されるバンドルファイルのフォルダ階層が作成されます
![Screen Shot 2022-06-14 at 0.20.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29099/853f48ac-1794-5915-e7f3-a5d01c96ecf0.png)

# DownLoadの振る舞いについて
適切な単位でパッキングができると、
ダウンロードする際のGETリクエストの数が抑制できたりしますが、
１度ダウンロード後、一緒に内包されるファイルが１つでも更新があると、
他のパッキングされるファイルも全てダウンロードの対象となってしまうので
最適なパッキングの単位については常に頭を悩ませさせられます。
【PHP基礎③】入力フォームを使おう

［問題］　　(参照：http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocksBasic.html)
整数値を入力させ、その入力値を表示するプログラムを作成しなさい。

# コード
```php
$a = intval(fgets(STDIN));
echo $a;
```

↓　入力フォームに「70」と入力

# 結果
```
70
```



☆＄a = intval(fgets(STDIN));　→変数＄aに、入力された整数値を代入する、という意味。
　変数には数値を1つ代入できる。

☆intval()　→文字列(string)を整数(int)にする。

☆fgets　→第一引数に指定したファイルポインタから1行取得し、その文字列を返す（※もっとわかりやすい説明がほしい…）

☆STDIN(=standard input　標準入力)　→ターミナルで入力した文字を標準入力としてPHPに渡す（※こちらももっとわかりやすい説明がほしい…）
PHP 問題集　メモ

★問題
あなたは、以下のようなキーボードのシミュレーションをするプログラムを作成したいと考えました。

・キーは a, b, ..., z と shift, capslock のみ
・a, b, ..., z キーと shiftキーを同時に押すと、対応する大文字が出力される
・capslockキーを押すと、再びcapslockキーが押されるまで大文字が出力される

キーボードで押されたキーが入力として与えられるので、

パソコンの画面に表示される文字列を出力してください。

★入力される値
入力は以下のフォーマットで与えられます

n
c_1
c_2
...
c_n

・入力される文字列数n
・c_1, c_2, ..., c_n は押下されたキー
・入力はn + 1行となり、末尾に改行を一つ含みます。

★期待する出力
押したキーによって表示される文字列を1行で表し、
最後に改行して出力してください。

★条件
すべてのテストケースにおいて、以下の条件をみたします。

1 ≤ n ≤ 10
c_1, c_2, ..., c_n は、以下のいずれかの文字列です。
・x
・shift x
・capslock
ただし、xは小文字アルファベット1文字（a, b, ..., z）を表します。

ただし、必ず何らかの文字列が表示されるものとし、
また、capslockキーが有効なときshiftキーは押されないものとします。

★回答
~~~php
   $n = trim(fgets(STDIN));
   $s = "shift";
   $cp = "capslock";
   $cl = false;
   $count = 0;
   for ($i = 0; $i < $n; $i++) {
        $c = trim(fgets(STDIN));
        if($c === $cp && $count === 0){
            $cl = true;
            $count = 1;    
        }elseif($c === $cp && $count === 1){
            $cl = false;
            $count = 0;   
        }
        
        if(strpos($c, $s) !== false){
            $c = explode(" ", $c);
            $c = strtoupper($c[1]);
            echo $c;
        }elseif($c !== $cp && $cl == true) {
            $c = strtoupper($c);
            echo $c;
        }elseif($c !== $cp && $cl == false) {
            echo $c;
        }
　　}
~~~
【一発ネタ】Qiitaのトップページにいる人とアルコアンドピースの平子さんがどれだけ似ているか判別してみた【OpenCV】

# 怒られたら消します

消します！！！！！！！！

# Qiitaのトップページにいる人

左から2番め

![Qiitaのトップページにいる人](https://cdn.qiita.com/assets/public/home/banner-qiita-conference-2022_desktop-eb45a7146e2dbb984a62ce975449c010.png)

# アルコアンドピースの平子さん

![target.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/8817e90e-6f2e-db7c-dfbc-30acfdcc85b8.jpeg)

# いろんな角度の平子さんとその他参考のおじさん

![スクリーンショット 2022-06-13 23.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/7ed2afef-1491-329c-a8a8-94cbe934fdec.png)

# ソースコード

[OpenCVのAKAZEで顔写真の類似度判定をやってみた](https://www.pc-koubou.jp/magazine/43855)

# 結果

スコアは小さい方が強いです

## 1位

トップページにいる人
スコア122.45

![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/22995d3a-f9b4-159a-c4ad-21c98f239250.jpeg)

## 2位

平子さん
スコア124.10

![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/7331dfd0-9d5a-66b2-6d91-68a8c190fffc.jpeg)

## 3位

佐久間さん
スコア125.19

![5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/e2f3f4ec-821c-f7e1-8997-1ec493453c34.jpeg)

## 4位

酒井さん
スコア129.89

![6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/fe3b85eb-c6d2-23bf-365f-c66c683574e0.jpeg)

## 5位

平子さん
スコア130.37

![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/f76d0512-837f-c9f4-d89d-43d374d909ff.jpeg)

## 6位

平子さん
スコア132.15

![4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/05023153-ff49-5717-c289-eea4603a07c8.jpeg)

# 結論

Qiitaのトップページにいる人は平子さんよりも平子さんに似ていました。

高校卒業後、福島を離れて活躍するテレビプロデューサーの佐久間宣行、アルコ＆ピースの平子祐希。

大人になったふたりが、福島を改めて見つめたら…。

福島には何もない？ いや、もしかしたら何でもあるのかもしれない…？

愛ある“地元いじり”をしながら故郷のいわき市を旅して、福島が誇る日本を代表するヒトやモノに出会い全国に広まるようにプロデュースする街ぶらバラエティ第2弾の制作が決定！

今回もロケ10時間で4本撮り、いわき市内の総移動距離120kmという過酷なスケジュール！

次から次へと登場するぶっ飛んだ人の悩み事から超真面目な相談事まで、2人が見事なまでに斬新なアイデアをプロデュース！

地元じゃなきゃ見ることのできない佐久間Pと平子さんの素顔は必見！

「サクマ＆ピース シーズン2」は、民放公式テレビポータル「[TVer(ティーバー)](https://tver.jp/lp/f0085936)」で無料配信中！
※各話、放送終了直後よりTVerで配信
※配信期間はテレビ放送後から1か月間です。

以上。

なんだこれ
🔰【自分用】環境構築の基礎知識

# はじめに
今回は私自身も何となくで知ったかぶりしている知識を丁寧にアウトプット

# ソフトウェアの操作
### シェル
ターミナルとOSを繋ぐ窓口役。混合しがち。
ターミナルから入力されたコマンドを読み取って、OSに対して指示を渡し、結果をターミナルに返して表示や実行などの動作をさせる。つまり、ターミナルとシェルは別物。
代表的なシェルとして`zch（%）`や`bash（$）`が挙げられる。
ちなみに%と$をプロンプトという。これはターミナルの入力直前に設置してある。
`echo $SHELL`で現在のシェルが確認できる。

### PATH
環境変数と呼ばれるOS用の変数のこと。PATHには、複数の絶対パスの情報が保存されている。
コマンドが入力されると、シェルはPATHに記述されたパスのディレクトリ内のファイルを検索する。

####　パスを通すとは？
PATHにアプリケーションのありかを示して、すべてのディレクトリからコマンドを使用可能にすること。
例
```
# rbenvのパスを通す
% echo 'eval "$(rbenv init -)"' >> ~/.zshrc

# MySQLのパスを通す
% echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.zshrc
```
echoコマンドは>>に続けてファイル名を指定すると、文字を追加できる。

# コマンドとアプリケーションの関係
### コマンドラインツール
コマンドで操作するアプリケーションのまとまり。
導入することで、OSが初めからコマンドで操作できるアプリケーション以外のアプリケーションをPCにインストールできる。
mac専用のコマンドラインツールは`Command Line Tools`
これがあることで、Linuxコマンド以外のコマンドで結果を返したり、動作を行ったりできる。

# 依存関係
ファイルやライブラリが正常に動作するために、別のファイルやライブラリによる処理と結果が必要になる状態を`依存`と呼び、依存している関係のことを`依存関係`と呼びます。
例:Aライブラリが動作するためにはB・C・Dのライブラリが必要。
例:AライブラリのバージョンをあげすぎてB・C・Dが正常に作動しなくなる。
などなど。
後者のような場合は解決するツールが用意されているのがほとんど。

# パッケージ管理ツール
### パッケージ管理
まず、パッケージとはプログラムや処理をひとまとめにしたもののこと。ライブラリとも言うが、複数のライブラリをまとめていることもある。パッケージ管理とはパッケージやパッケージが持つライブラリなどの依存関係を考慮してインストールやバージョンアップを行う管理。
パッケージをインストールするときにまだインストールされていない必要なパッケージがあれば、合わせてインストールする。

### Homebrew
macOSのパッケージ管理ツール。
~~最初はここから始まったが、全く意味がわからなかったな〜懐かしい。4ヶ月前。~~

# バージョン管理ツール
### バージョン管理
変更したバージョンを記録あるいは外部から保存して、過去のバージョンや最新のバージョンに切り替えることなどをバージョン管理と呼ぶ。
これを利用することで、パッケージの依存関係の問題を解消したり、変更して問題が発生したプロジェクトを過去の安定したバージョンに切り替える、などの対応ができる。

# おわりに
言語化したことでぼんやりしていた知識が明確になった。基礎部分だけど、分からないままでは気持ち悪かったです。

気づいたら、0時回ってる。。。（泣）
Nginxで-tすると合っているはずのdirectiveで"unknown directive"と出る。

### 何が起きたか
Nginxでreverse proxyサーバの構築をしている時に、`nginx -t` や `systemctl restart nginx` すると合っているハズの
```
prox_pass https://mydomainhogehoge
```
という場所で
```
[emerg] unknown directive "proxy_pass https://～
```
が出てうまく進めなかった事象がありました。

### 何が原因だったか
`nginx -t` や `systemctl restart nginx` がターミナルに出力するエラーでは何も問題ないように見えたのですが、`journalctl -xe`すると、以下のように`<C2><A0>`という文字列が入っており、これが原因でした。
```
 nginx: [emerg] unknown directive "proxy_pass<C2><A0>https://～
```

### `<C2><A0>`とは
これはノーブレークスぺースと呼ばれるものらしく、wikipediaには以下のような説明があった。
>スペースの箇所での自動的な改行を防ぐ特殊なスペースである。
>[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%8E%E3%83%BC%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9)

### なぜこの文字が入ったか？
このNginxの設定ファイルVivaldiのメモに書いたもので、それをビジュアルモードで表示した際にURL部が自動的に解釈されてmarkdownの書式に置き換わるということがありました。
張り付けた際にそれは消したつもりだったのですが、その時に通常のスペースと入れ替わっていたものと考えられます。
未経験からエンジニアを目指したい！

<h2>自己紹介</h2>
●高専卒業、社会に揉まれて１０年目

●プログラミング経験はほぼほぼありません！
　遥か昔の学校の講義でC++を扱った程度。

●プログラミングを勉強しようと、22年6月3日にMacbookを購入
　ProgateでHTML、CSS、Javascriptを一通り進めて、
　今はUdemyでじゃけえさんの「React入門」動画で学び中。
　（電車とバスに揺られながら見ております、丁寧な説明で分かりやすい:clap:）

<h2>なぜプログラミングを学ぶのか</h2>
●プログラミングのスキルアップを図り、今後のロードマップを描きやすいと思った
　自分の努力次第で副業や、ゆくゆくはフリーランスにも転身できたり？

●リモート勤務に憧れた
　痛勤が無くなればその分時間を有意義に使えますよね。

●仕事をしながら世界（大袈裟？）で通用するスキルを身につけられる
　プログラミングはありとあらゆるモノやサービスに使われていますよね。
　もし勤めている会社がなくなってしまっても、身につけたスキルを武器に
　他の会社や、はたまたフリーランスでやっていけるのではないか。　
　そう考えるとプログラミングに対して、ふつふつとモチベーションが沸いてくる！

<h3>なぜフロントよりの言語から学び始めたか</h3>
自分が書いたコードがすぐに反映されて面白いと感じたため！

今はJavascriptのフレームワークであるReactを学んでいます。


<h4>今後について</h4>
最近は仕事が忙しく、夜勉強中に寝落ちすることが多々ありますが・・・。

まずはJavascript、Reactをしっかり学んで、アウトプットして身につける。
アウトプットとして、最近ハマっている筋トレに関する何かを作る。
今年30歳という節目を迎えるので、IT・Web業界に転職して、スキルアップしていく！

以上、頑張っていくぞ〜〜:airplane:
Nuxt.jsを初期導入しDocker化する

# 概要
Nuxt.jsにてプロジェクトを立ち上げる際の、手順について書きます。立ち上げたものはDocker化し、docker-composeで運用します。

## レンダリング形式
今回はSSGを想定して作成

# 構成
- TypeScript
- html
- css

## バージョン
* node v16.15.1
* yarn v1.22.19
* nuxt v2.15.8
* Composition API v1.6.3
* Vue v2.6.14
* vuetify v2.6.1
* axios v5.13.6 

## create app
- Nuxt.jsのアプリをコマンドを実行して作成
- create appコマンドはローカルにて実行するため、yarn、nodeは最新のバージョンを入れておく。

```bash
$ yarn create nuxt-app <プロジェクト名>

yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-nuxt-app@4.0.0" with binaries:
      - create-nuxt-app

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in <プロジェクト名>
? Project name: <プロジェクト名>
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? <git hubユーザー名>
? Version control system: Git
```


## Docker化する
- nodeのバージョンは先ほどローカルで適用したバージョンと合わせたDocker imageを選択
- ENV HOST 0.0.0.0を指定しないとホストから接続できなかった

```Dockerfile:docker/nuxt/Dockerfile
FROM node:16.15.1-stretch-slim
RUN apt-get update
RUN mkdir -p /app
WORKDIR /app
COPY /package.json /app/package.json
COPY /yarn.lock /app/yarn.lock
ENV HOST 0.0.0.0
EXPOSE 5000
RUN yarn install
```

```docker-compose.yml
version: '3'
services:
  nuxt:
    container_name: <プロジェクト名>
    build:
      context: .
      dockerfile: ./docker/nuxt/Dockerfile
    ports:
      - 5000:3000 # コンテナ内部の3000を外部から5000でアクセスする
    volumes:
      - .:/app ホストOSとコンテナ内でソースコードを共有する
      - node_modules_volume:/app/node_modules
    entrypoint:
      - yarn
      - run
      - dev
volumes:
  node_modules_volume:

```

## Composition API導入

```bash
$ docker-compose exec nuxt yarn add @nuxtjs/composition-api
```

## cross-env の導入 

```bash
$ docker-compose exec nuxt yarn add cross-env
```


## 環境構築

```bash
$ cd <プロジェクト名>
# コンテナ起動
#   - 初回起動時は --build を付ける
#   - バックグラウンド起動したい場合は -d を付ける
$ docker-compose up --build
```

localhost:5000にアクセスするとページ表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367608/d49a90aa-4e5e-fe85-19cc-5d4892925dd8.png)


## コマンドリファレンス

```bash
# モジュールの導入
$ docker-compose exec nuxt yarn add {module_name}

# 構文修正
$ docker-compose exec nuxt yarn run lint --fix
```

## 参考
- https://nuxtjs.org/ja/docs/get-started/installation/
- https://github.com/nuxt/create-nuxt-app/blob/master/README.md
SnowconeのJobステータスがImportingから遷移しなかった件

## 経緯
Snowfamilyの一つであるSnowconeを使用してS3バケットでデータの移行を行った。
5日経ってもJobのステータスが「Importing」だったためサポートに問い合わせをした。
結果として初歩的なミスだったものの、問い合わせをしなければ事象が発見できない(コンソール画面では確認できない)ため、メモとして残しておく。

## 何がよくなかったか。
・Snowcone Jobの作成時に、IAMロールはデフォルトを使用。
・格納先のS3バケットは暗号化されている。

<font color="Red">***つまりは、SnowconeがS3バケットへデータを書き出す際に使用するKMSへの権限が不足していた。***</font>

## やったこと
・SnowconeにアタッチされているIAMロールへ暗号化に使用している鍵への権限を追加
・サポートへ連絡しJobの再実行を依頼

## まとめ
Snowconeはまだ日本語の記事が少なく手探り状態だったこともあるが、よく確認せずにデフォルトのIAMロールを使用したことが原因。(~~ポップアップも出るのにガン無視していた~~)
S3バケットが暗号化されているなら、IAMロールは自分で作成しKMSへの権限をつけてあげる必要あり。
後から変更できるものの、Importingで止まっているJobを再実行してもらうにはサポートへの問い合わせが必須となる。設定時によく確認をしましょう…
Codility Lesson4 MaxCounters

Lesson4のMaxCountersは具体例から見た方が理解しやすいと思うので具体例を見ていきましょう。

今回登場するのは次のような要素からなるリストA
A[0] = 3
A[1] = 4
A[2] = 4
A[3] = 6
A[4] = 1 
A[5] = 4
A[6] = 4
変数N (今回はN=5とする)
そして長さNのカウンターリストです。
(0,0,0,0,0,0)

まず、配列Aに関して0番目から6番目まで順に要素を確認していきます。
A[0] = 3はN(=5)以下なので3個目のカウンターを+1する。
(0,0,1,0,0)
A[1] = 4はN(=5)以下なので4個目のカウンターを+1する。
(0,0,1,1,0)
A[2] = 4はN(=5)以下なので4個目のカウンターを+1する。
(0,0,1,2,0)
A[3] = 6はN(=5)より大きいので全カウンターを最大カウンターである2にする。
(2,2,2,2,2)
A[4] = 1はN(=5)以下なので1個目のカウンターを+1する。
(3,2,2,2,2)
A[5] = 4はN(=5)以下なので4個目のカウンターを+1する。
(3,2,2,3,2)
A[6] = 4はN(=5)以下なので4個目のカウンターを+1する。
(3,2,2,4,2)

最終的にこのカウンターリストを返すようなプログラムを書くことが目標です。

アルゴリズムは以下の通りです。 
1 配列Aの各要素に対して与えられたNとの比較を行いカウンターリストを更新していく。
2 1の操作をAの全要素に対して行う。その際、最大カウンターの値はその都度更新していく。


コードは以下の通りです。

    def solution(N,A):
        len_A = len(A)
        counter_list = [0]*N   #カウンターリストの用意　最終的にこれをreturnする
        i = 0
        list_max = 0    #最大カウンターを保持する変数

        while i < len_A:
            if A[i] <= N:
                counter_list[A[i]-1] +=1
                if counter_list[A[i]-1] > list_max:
                    list_max = counter_list[A[i]-1] #最大カウンターの更新
            else:
                counter_list = [list_max]*N #A[i]=N+1の時は全要素がlist_maxであるリストに更新する
            i +=1
        return counter_list




さて結果は。。。。？

![スクリーンショット 2022-07-03 22.58.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1667538/18eda5d3-4f5a-fb97-14ee-798e4e592420.png)

あれ88%です。。。　計算量がO(N+M)で、どうやら計算時間をもう少し短縮しろと怒られているんですがこれ以上短縮する方法があるのでしょうか。。？わかる方いたら教えてください。
WebhookとAPIのちがい　～Kintone編～

# WebhookとAPIのちがい　

今回はWebhookとAPIの違いをやってくよ。

:::note info
～おしながき～
1. 前置き
2. WebhookとAPIのちがい
2. 使ってみる（Kintone）

:::


## 前置き

とある日の出来事。

同僚「ISEYAくん、WebhookとAPIのちがいってなんなん？」
ISEYA「うーん、、コードを書かないか、書くかのちがいとちゃいますかね:baby:」

そう、実際**私は雑魚**のためあまり腑に落ちていないので曖昧な表現で回答してしまいました。
しっかりと理解を深めるため、調べてみたが、
コードを書くか書かないかの違いは正解のようで不正解なようだ。

今日はそれを紹介していく。

## WebhookとAPIのちがい

##### 結論　自動か手動かのちがい

です。
じゃあ具体的に自動と手動ってどういう意味？について深堀していきます。

まず、APIの一例をシーケンス図にしてみました。
するとこんな感じ。

```plantuml
クライアント->サーバー : リクエスト
クライアント<-サーバー : レスポンス
```

このようにクライアント側からHTTPリクエストを送信し、
サーバー側がレスポンスとしてクライアント側に返してくれます。

これはつまり野球に例えると、自分がボールを持っている状態で、
相手に投げた後ボールを投げ返してくれるみたいな感じ。
いわゆるキャッチボールをしている状態ですね。
当然ながら自分が相手にボールを投げないと相手は返してくれません。

対してWebhookはというとこのようなイメージ。

```plantuml

クライアント<-サーバー : レスポンス
```

こちら側がボール（リクエスト）を投げることなくボール（レスポンス）が返ってきます。
ただし、レスポンスを受けるためには予めトリガーを設定しておく必要があります。

何かしらのイベントが起きたタイミングでレスポンスを返してもらうような感じです。
クライアント側でなにもすることがなくてもレスポンスをもらえるなんて便利ですよね。

このように**自動**なのか**手動**なのかを説明してきました。
最後にサイボウズ社[kintone](https://kintone.cybozu.co.jp/)を使った例を紹介して終わります。

## 使ってみる（Kintone）

Kintoneでは各アプリにWebhookを設定することができる。

![スクリーンショット 2022-07-03 230029.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575665/d14b8fa2-5c6c-346c-b41a-82e7ba3050a1.png)

Webhook用のURLを指定するだけでKintoneアプリのデータを送信できる。
トリガー（イベント）も様々。

対してAPIを使ってKintoneアプリのデータを受信するためには、
リクエストを投げることが前提となる。

[KintoneAPI仕様書](https://developer.cybozu.io/hc/ja/categories/200147600-)に則る必要がある。
Kintoneから外部にデータを流そうとすると、
各リファレンスに沿った形でコードを書いていくことが必要。

例としてAWS LambdaにAPIを使ってデータを投げているコードを紹介します。
これはKintone内で記述しているものなので、この場では不適切かもしれませんがご了承ください:nerd:

```javascript
(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
  
    const url = '××××';
    const method = 'POST';
    const headers = {'Content-Type': 'application/json'};
    const data = {"value":event.records};
    
    kintone.proxy(url, method, headers, data)
    .then((args) => {
      console.log(event.records);
    }, (error) => {
      // error
      console.log(error); 
    });
  });
})();

```

こんな感じでコードを書く必要があります。
こうみるとやっぱりWebhookは最強だなと思います。

今回はこんな感じでオーしまい。では！
git initをしたらReinitialized existing Git repositoryがターミナルに出力された。

git initをしたらReinitialized existing Git repositoryがターミナルに出力されたのでエラーかなと思ったら違うようだ。

Google翻訳で英語を翻訳すると「既存のGitリポジトリを再初期化」ということらしい。
つまりエラーではなくもう一回初期化してるだけみたいだ。
git cloneでリモートリポジトリからとってきたものを初期化しようとしたらこのような事態になったので消したいローカルリポジトリはおとなしくディレクトリごと削除することにした。
簡単ログイン・ゲストログイン機能の実装でのエラーを解決：【No route matches [GET] "/users/guest_sign_in"】



# 環境
- Mac（12.2.1）
  -  MacBook Pro (13-inch, 2020)
  -  2 GHz クアッドコアIntel Core i5
  -  16 GB 3733 MHz LPDDR4X
- ruby (2.7.5)
- rails (7.0.1)

# はじめに
https://qiita.com/take18k_tech/items/35f9b5883f5be4c6e104#%E3%81%9D%E3%81%AE2-%E3%82%B2%E3%82%B9%E3%83%88%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E6%A9%9F%E8%83%BD%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95

こちらの記事を参考にゲストログイン機能を実装した時に出たエラーを解決した


# 解決したい内容

ゲストログインをすると下記のエラーになる
Routing Error
No route matches [GET] "/users/guest_sign_in"

```config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
    get '/users', to: redirect("/users/sign_up")
    post 'users/guest_sign_in', to: 'users/sessions#guest_sign_in'
  end
```




# 改善策

get 'users/guest_sign_in', to: 'users/sessions#guest_sign_in'を追加

```config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
    get '/users', to: redirect("/users/sign_up")
    post 'users/guest_sign_in', to: 'users/sessions#guest_sign_in'
# 追加
    get 'users/guest_sign_in', to: 'users/sessions#guest_sign_in'
  end
```
LPIC101 合格記

## はじめに

表題の通り、LPIC101に合格しました。
勉強方法に何をどこまですべきなのか、悩んだのでどなたかの参考になれば。3日前から本気出したので直前で心配になっている方の力にもなれるかと思います。


## 試験結果

660/800（500点以上で合格）


## 私の前提
社内SE歴3年目の20代半ば
Linuxはたまに触る程度
USBブートも使ってるのでBIOS周りも軽く

## 受験理由
仕事で新たにシェルスクリプトを教えてもらったものの、Linuxそのものをよく理解してないことに気づいたため。

## 学習時間
2021.06 27分
2021.07 1時間26分
2021.08 5時間52分
2021.09 6時間36分
2021.10 0分
2021.11 6時間1分
2021.12 39時間52分

合計:60時間14分

## 使用教材

#### [あずき本](https://www.amazon.co.jp/Linux%E6%95%99%E7%A7%91%E6%9B%B8-LPIC%E3%83%AC%E3%83%99%E3%83%AB1-Version5-0%E5%AF%BE%E5%BF%9C-%E4%B8%AD%E5%B3%B6-%E8%83%BD%E5%92%8C/dp/4798160490/ref=sr_1_3?adgrpid=117660583820&hvadid=493293506797&hvdev=c&hvqmt=e&hvtargid=kwd-1154964693309&hydadcr=26603_10279491&jp-ad-ap=0&keywords=linux+%E3%81%82%E3%81%9A%E3%81%8D%E6%9C%AC&qid=1656856939&sr=8-3)
読むと眠くなるため、コマンドを調べたりする辞書代わりとして、使用。
模擬試験を試験3日前にした時の結果は29点/60点

#### [Ping-T](https://ping-t.com/)
LPIC101が無料で使える優れもの
全ての問題をコンボにし、模擬試験を3回80%以上取った段階で問題を覚えてしまっていることに気づきやめた。
最終到達レベルは23/40
正答率90%を超えたことはなかった。

#### [白本](https://www.amazon.co.jp/Linux%E6%95%99%E7%A7%91%E6%9B%B8-LPIC%E3%83%AC%E3%83%99%E3%83%AB1-%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E5%95%8F%E9%A1%8C%E9%9B%86-Version4-0%E5%AF%BE%E5%BF%9C-%E6%9C%89%E9%99%90%E4%BC%9A%E7%A4%BE%E3%83%8A%E3%83%AC%E3%83%83%E3%82%B8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/dp/4798141895)
問題の傾向が本番に限りなく近いという噂を聞き試験2日前に購入。模擬試験からやったところ、39点/60点
1-7章立てを試験前までに1-4、7章の問題を解いた。大体見直しも含めて各章1時間くらい。

## まとめ
Ping-Tは全体をコンボにしたら、模擬試験をやらず白本仕上げで良かったかもしれない。
あずき本はなくてもいいと言う声もあるが、基礎を理解して振り返るという意味ではあった方がいいと思った。網羅的で、索引がしっかりしており探しやすい。
101の反省点を活かして、102はより短い勉強時間で合格したため別途記事にしたい。
【React】useEffectやuseState使用時に「Rendered more hooks than during the previous render」のエラーが発生

## 概要
表題のエラーについて、Reactをやったことある人であれば、一度は見かけたことがある内容かもしれません。私はいまだに、このReactのエラー仕様をド忘れしてハマることがあるので、今回は備忘でメモ書きします。

## どういう時に発生するのか
[こちら](https://teratail.com/questions/242244)のteratailの記事にある通り、「useXxx関数を条件やループに入れたり、手前でreturnしてしまったりするとこういうエラー」となります。NGパターンの詳細については、[Rendered more hooks than during the previous render (React)](https://bobbyhadz.com/blog/react-rendered-more-hooks-than-during-previous-render)の記事でも解説されています。

例えば以下のようなソースでは、useEffectの手前で条件式でreturnしてしまってるので、エラーになります。

```react
import { useContext, useEffect } from "react";
import { useQuery } from "react-query";
import { SampleContext } from "../context/SampleProvider";
import { getSearchMaster } from "../service/api/SearchService";

export default function SampleComponent() {
  const { master, setMaster } = useContext(SampleContext);
  const { data, isError, isLoading } = useQuery("master", getSearchMaster);

  if (isLoading) {
    return (<>Loading・・・</>);
  }

  if (isError) {
    return (<>Error</>);
  }

  useEffect(() => {
    if (data) {
      setMaster(data);
    }
  }, [data]);

  return (<>成功</>);
}
```

## 対応
トップレベルにて、条件付きでuseXxxを呼び出したり、useXxxが呼ばれる前にreturnしないよう、修正すれば大丈夫です。
上記のサンプルソースについて、以下のように修正すればエラーは解消されます。

```react
import { useContext, useEffect } from "react";
import { useQuery } from "react-query";
import { SampleContext } from "../context/SampleProvider";
import { getSearchMaster } from "../service/api/SearchService";

export default function SampleComponent() {
  const { master, setMaster } = useContext(SampleContext);
  const { data, isError, isLoading } = useQuery("master", getSearchMaster);

  useEffect(() => {
    if (data) {
      setMaster(data);
    }
  }, [data]);

  if (isLoading) {
    return (<>Loading・・・</>);
  }

  if (isError) {
    return (<>Error</>);
  }

  return (<>成功</>);
}
```
工場系データサイエンティストになって1年たった話

みなさん、こんにちは
Otteyです。

今回は工場系データサイエンティストになって、今月で1年経つので、
実際に仕事をして思ったことを大きく3つ書いてみました。

## 今回の記事の目的

1年データサイエンティストとして働いて思うことをシェアすることで、
これからデータサイエンティスト・データ分析に関わる仕事をしたい人の参考になればと！

## 改めて私の経歴紹介

- 新卒で1年半、中小の部品メーカーで生産技術開発
- 半導体商社のFAE(フィールドアプリケーションエンジニアまたは技術営業職)

上記を経て、去年の夏からデータ分析受託系企業（顧客は製造業）に転職し、
工場系データサイエンティストとして勤務


## 1年仕事をして感じたこと

**1. データをもらっても最初から分析できるデータとは限らない**
「データ分析をしてください、データはありますので。。。」と依頼されて、
最初からデータ分析できるケースがほぼありませんでした。。。
例えば以下のケースがありました。

    ● 分析に必要なデータが複数に分かれていて、全部結合しなければ分析できない
    ● もらった電子データに必要なデータが無く、ヒアリングすると別で紙に書かれたデータが一番分析に必要なデータだった。（紙のデータを実際電子化しました。。。）
    ● もらったデータが文字化けなどでそのまま分析できない

そのため、分析前にデータの把握や結合、クレンジングのような泥臭い作業が必要ですが、
これが意外と重要で時間がかかります。。。

**2. 顧客とのコミュニケーションが本当に大事**
依頼を受ける際、「顧客からの期待」と「できること」をいかにすり合わせるかが
本当に重要であると痛感します。。。
やはり、顧客がやりたいことを聞いて100%やれることがなかなかないので、
「できること」をしっかり説明し、納得してもらう必要があります。
意外と営業要素が大きく、少しびっくりしました。。。
（前職で営業っぽい仕事していたことが生かされてました！）

**3. 必ずしもPythonやSQLができていないとデータ分析ができないわけではない**
実際に現場で分析をしているとPythonやSQLを意外とそこまで使用する場面がありません。
（案件によっては必須ですが。。。）        
探索的データ分析の場合はJMPのような分析ツールを使ってますし、データ処理は意外とエクセルで済むことが多いです。
（10万行くらいまでのデータ処理だと、エクセルの方が優秀だと個人的には思います。）
しかし、ややこしい処理や機械学習をする際は、どうしてもRやPythonを使う場面があります。
そのため、用途によって、どのツールが使えるか見極められることがデータ分析をする上では必要であると感じています。

## まとめ　データ分析は面白い！　　　　
今回１年データサイエンスの仕事をして思ったことを３つ挙げてみました。
去年転職し、転職前に予想していたところと違うところもあり、やはり現場に行ってみなきゃわからないことが多いです！！
（何事もそうだとは思いますが）

様々な顧客が抱える課題に触れ、データ分析を通じて課題の解決に繋げるのは、謎解きに違い部分があり、非常に楽しく仕事ができていると感じています！
これからは製造業だけでなく、もっと広くいろんな分野に関わって仕事ができるよう精進します！！！！
Rstudioでrayshaderを表示するまでにやったこと


# 開発環境
OSX 11.6.5 (Big Sur)
R 4.2.0
RStudio 2022.02.3+492

# 結論
- [ ]  ターミナルで``brew install gdal``
- [ ] 　Rstudioのコンソールで次のコマンドを実行する。
- [ ] 　``install.packages("terra")``
- [ ] 　``install.packages("rgdal")``


# 経緯
https://github.com/tylermorganwall/rayshader
チュートリアルを参考にrayshaderをインストールする。
しかし、エラーが出て、マップが表示されない。

# やったこと
```r:
install.packages("terra")
install.packages("rgdal")
```
ここでエラーが出る。
エラーは主に２箇所あって、
```
configure: error: gdal-config not found or not executable.
ERROR: configuration failed for package ‘terra’
* removing ‘/Users/masa/Library/R/x86_64/4.2/library/terra’
Warning in install.packages :
   パッケージ ‘terra’ のインストールは、ゼロでない終了値をもちました 
```
と、
```
configure: error: gdal-config not found or not executable.
ERROR: configuration failed for package ‘rgdal’
* removing ‘/Users/masa/Library/R/x86_64/4.2/library/rgdal’
Warning in install.packages :
   パッケージ ‘rgdal’ のインストールは、ゼロでない終了値をもちました 
```

それぞれがインストールできていない。

https://stackoverflow.com/questions/12141422/error-gdal-config-not-found-while-installing-r-dependent-packages-whereas-gdal

を参考にすると、gdalを先にインストールする必要があるとのこと。
```
brew install gdal
```
でインストール。
その後、再度それぞれをインストール。
エラーは出力されない。

Rstudioを再起動し、rayshaderのチュートリアルを再度実行。

![RStudio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867981/e9d47449-c8b3-7c07-b1ac-b1b48aa6468c.png)

うまく表示された。

# 追記
それにしてもTerminalのエラーが日本語ではなく、英語で出力できるようにしたい。