OmniAICreator/Qiita-1.07M huggingface dataset:
swiftのオプショナル型について少し話す

Swiftにはオプショナル型という謎の概念がありなんやねんこれって思ってた。

そして今でも思う。

オプショナルの意味もたいして理解してなかったので、調べたら「選択できる，任意の，随意の」という意味らしく余計意味が分からなくなった。

多くの人は箱に入ってるとかそういった言葉を使うが、もはやパソコンを触ったことがあまりなかった僕は、それさえ意味が分からなかったのでもっと身近な何かに置き換えたかった。

結論として梱包されているというワードが一番しっくりきた

オプショナル　＝　梱包されている

多分成人されている方の多くは、誰かにプレゼントをあげる時お洒落な紙で巻いてもらったりして、中身がわからないように梱包してもらったこととかあるはず。

あのイメージ

オプショナル型は梱包されているので中身が見えない状態

だから中身を見るために梱包されたものをまずはじめに外す

↓梱包されている物を外す
if let 変数名 = 変数名 {
　　梱包を外した中身の物を使った処理
}

guard let 変数名　=　なんちゃらかんちゃら else {return}

↑梱包されているものを外す
 開けたけど何もなければ何も取得しない

かなりざっくりではあるけど、この記事を見つけた初学者の方は少しイメージができたかなと思う。

オプショナルとはまぁそんな感じ
RSpecを実行するとMysql2::Error::TimeoutError: Lock wait timeout exceeded; try restarting transactionとエラーが表示される

# 環境
macOS: Big Sur Ver11.2.2
Rails: 6.0.0
Ruby: 2.6.5

# エラーの内容
RSpecでモデルの単体テストを実行していたら以下のエラーが発生。

```terminal
Failures:

  1) OrderOrderDetail メニュー注文機能 メニュー注文ができるとき すべての情報が正しく入力されていれば注文できる
     Failure/Error: @menu = FactoryBot.create(:menu)
     
     ActiveRecord::LockWaitTimeout:
       Mysql2::Error::TimeoutError: Lock wait timeout exceeded; try restarting transaction
     # ./spec/models/order_order_detail_spec.rb:6:in `block (2 levels) in <top (required)>'
     # ------------------
     # --- Caused by: ---
     # Mysql2::Error::TimeoutError:
     #   Lock wait timeout exceeded; try restarting transaction
     #   ./spec/models/order_order_detail_spec.rb:6:in `block (2 levels) in <top (required)>'
```

# なぜこうなった？
記憶にないが、たぶんテスト実行をbinding.pryでストップさせながらやっているときにCtr+cとかを押してしまったからかと思っている。

# 解決策
①以下のコマンドでMySQLにログイン

```terminal
mysql -u root
```

②以下を実行

```terminal
SHOW ENGINE INNODB STATUS;
```
そして以下の部分に注目。

```terminal
------------
TRANSACTIONS
------------
Trx id counter 79683
Purge done for trx's n:o < 79680 undo n:o < 0 state: running but idle
History list length 858
LIST OF TRANSACTIONS FOR EACH SESSION:
---TRANSACTION 0, not started
MySQL thread id 656, OS thread handle 0x70000b8e1000, query id 47472 localhost root init
SHOW ENGINE INNODB STATUS
---TRANSACTION 79619, not started
MySQL thread id 650, OS thread handle 0x70000b89d000, query id 46995 localhost root
---TRANSACTION 78207, not started
MySQL thread id 1, OS thread handle 0x70000b815000, query id 47466 localhost root
---TRANSACTION 0, not started
MySQL thread id 2, OS thread handle 0x70000b859000, query id 47467 localhost root
---TRANSACTION 79650, ACTIVE 520 sec
2 lock struct(s), heap size 360, 1 row lock(s)
MySQL thread id 651, OS thread handle 0x70000b925000, query id 47378 localhost root
```

一番下の２行を見ると、

```terminal
2 lock struct(s), heap size 360, 1 row lock(s)
MySQL thread id 651, OS thread handle 0x70000b925000, query id 47378 localhost root
```

ここが怪しい。スレッドid651が犯人らしい。こいつをkillします。

③killコマンド実行

```terminal
mysql> kill 651;
Query OK, 0 rows affected (0.00 sec)
```

**以上！無事にテストが動くようになりました！**
ufwで日本以外からのアクセスを遮断する

# ufwで日本以外からのアクセスを遮断する

## 経緯
WEBサーバーに中露からの攻撃がガンガン来るので、遮断する。

下記の様なアクセスが １日に数百件来る。
うるさいので日本のIPアドレスからのみを許可する様にしたい。

```
45.80.68.76 - - [08/Mar/2021:21:29:56 +0900] "POST /_ignition/execute-solution HTTP/1.1" 403 3885 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
45.80.68.76 - - [08/Mar/2021:21:46:01 +0900] "POST /_ignition/execute-solution HTTP/1.1" 403 686 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
```

## さくらのクラウドのパケットフィルタでできるかな？
さくらのクラウドのサーバーなので パケットフィルタでなんとならないか調べてみたが、出来なさそうだ。

## ufwでやってみる
ufwはUbuntuのFirewall。

個人の方で日本のIPアドレスをCIDR形式で公開されている方がいたので参照させてもらいました。
https://qiita.com/Shiro-neko-kamen/items/7e8411c95b0bedf8312f

公開されている日本に割り当てられた IPアドレスだけを許可一覧にいれてやればいいのでは？
などと考えた。

ufwを有効化

```bash
sudo ufw enable
```

デフォルトをdenyにして

```bash
sudo ufw DEFAULT deny
```
デフォルトで接続禁止にして、許可されたアクセスだけ許すようにする。
注意 SSHでログイン出来なくなるので要注意

ログイン元のIPアドレスを許可リストに追加

```bash
sudo ufw allow from 122.249.123.123 to any
```
自分がログインしている端末のグローバルIPアドレスを許可リストに入れる。


日本のIPアドレスを取得して、ufwコマンドを作成するシェルスクリプトを作る。

vi mk_cmd.sh

```bash
#!/bin/bash

wget http://nami.jp/ipv4bycc/cidr.txt.gz
zcat cidr.txt.gz | grep ^JP > cidr.txt

cat cidr.txt | awk {'print "ufw allow from "$2" to any"'} > set_allow_jp.sh

```

こいつを実行
chmod a+x ./mk_cmd.sh
./mk_cmd.sh

set_allow_jp.shファイルが出来上がる
中身はこんな感じ

ufw allow from 80.80.92.0/22 to any
ufw allow from 85.94.160.0/19 to any
ufw allow from 89.150.2.0/23 to any
ufw allow from 89.150.4.0/22 to any
・・・以下略・・・


set_allow_jp.shを実行

chmod a+x ./set_allow_jp.sh
nohup sudo ./set_allow_jp.sh  &

読込に数時間かかりそうなのでバックグラウンドジョブで実行。

以下のコマンドで何件設定されたか確認
sudo ufw status | wc

146311件くらいになれば終了。

１分間で80件くらい追加されるので、全部設定するのに27時間くらいかかりそう。
大丈夫かなぁ。


----
追記：最初の設定方法にミスが有って時間がかかっている可能性が有ったので、時間の記述を一旦削除しました。


----

ufwは普段あまり使っていないが、大丈夫だろうか。
パフォーマンスに難があるような気がする。
MySQL基礎(WHERE, GROUP BY)

#WHERE
```
SELECT * FROM posts WHERE message = 'hello';
SELECT * FROM posts WHERE message != 'hello';
SELECT * FROM posts WHERE likes <> 'hello';
```
1. postsテーブルの中のmessageがhelloのレコードを取得
1. postsテーブルの中のmessageがhello以外のレコードを取得
1. postsテーブルの中のmessageがhello以外のレコードを取得

##AND, BETWEEN
```
SELECT * FROM posts WHERE likes >= 10 AND likes <= 20;
SELECT * FROM posts WHERE likes BETWEEN 10 AND 20;
SELECT * FROM posts WHERE likes NOT BETWEEN 10 AND 20;
```

1. postsテーブルの中のlikesが10以上かつ20以下のレコードを取得
1. postsテーブルの中のlikesが10から20までのレコードを取得
1. postsテーブルの中のlikesが10以上かつ20以下じゃないレコードを取得

##OR, IN
```
SELECT * FROM posts WHERE likes = 4 OR likes = 12;
SELECT * FROM posts WHERE likes IN (4, 12);
SELECT * FROM posts WHERE likes NOT IN(4, 12);
```
1. postsテーブルの中のlikesが4または12のレコードを取得
1. postsテーブルの中のlikesが4または12のレコードを取得
1. postsテーブルの中のlikesが4または12じゃないレコードを取得

##LIKE, BINARY
```
SELECT * FROM posts WHERE message LIKE BINARY't%';
SELECT * FROM posts WHERE message LIKE BINARY'%t';
SELECT * FROM posts WHERE message LIKE BINARY'%t%';
SELECT * FROM posts WHERE message LIKE '__t%';
```
- BINARY指定しないと大文字、小文字の区別せず取得する
- { ％ _ }はエラーになりますので＼を使用(例：\%)

1. postsテーブルの中のmessageがtから始まるものレコードを取得
1. postsテーブルの中のmessageがのtで終わるものレコードを取得
1. postsテーブルの中のmessageがtの文字が入っているものレコードを取得
1. postsテーブルの中のmessageが3文字目がtのレコードを取得

##IS NOT NULL
```
SELECT * FROM posts WHERE likes != 12 OR likes IS NULL; 
SELECT * FROM posts WHERE likes IS NOT NULL; 
```
1. postsテーブルの中のlikesが12以外でNULLを含めるレコードを取得
1. postsテーブルの中のlikesがNULL以外のレコードを取得

#ORDER BY, LIMIT
```
SELECT * FROM posts ORDER BY likes;
SELECT * FROM posts ORDER BY likes DESC;
SELECT * FROM posts ORDER BY likes DESC, message LIMIT 3;
```
1. postsテーブルの中のlikesが少ない順番からレコードを取得
1. postsテーブルの中のlikesが多い順番からレコードを取得
1. postsテーブルの中のlikesが多い順番で数が同じの場合はmessageのアルファベット順で3件のレコードを取得
PHP静的解析でのエラーの抑制

静的解析でのエラーの抑制方法をすぐに忘れてしまうので、まとめておきます。

# PHP_CodeSniffer

- [Ignoring Parts of a File](https://github.com/squizlabs/PHP_CodeSniffer/wiki/Advanced-Usage#ignoring-parts-of-a-file)

## 複数行

```php
// phpcs:disable Squiz.Arrays.ArrayDeclaration.SingleLineNotAllowed
...
...
// phpcs:enable
```

## 1行

```php
// phpcs:ignore Squiz.Arrays.ArrayDeclaration.SingleLineNotAllowed
$foo = [1,2,3];
```

```php
$foo = [1,2,3]; // phpcs:ignore Squiz.Arrays.ArrayDeclaration.SingleLineNotAllowed
```

# PHPMD

- [Suppressing Warnings](https://phpmd.org/documentation/suppress-warnings.html)
- [Current Rulesets](https://phpmd.org/rules/index.html)

```php
/**
 * @SuppressWarnings(PHPMD.UnusedLocalVariable)
 */
```

# PHPStan

- [Ignoring Errors | PHPStan](https://phpstan.org/user-guide/ignoring-errors)

## 1行

```php
// @phpstan-ignore-next-line
echo $foo;
```

```php
echo $foo; // @phpstan-ignore-line
```

# Psalm

- [Docblock suppression](https://psalm.dev/docs/running_psalm/dealing_with_code_issues/#docblock-suppression)

```php
/**
 * @psalm-suppress InvalidReturnType
 */
```

# PHPUnit

静的解析ではありませんが、カバレッジ対象から除外する場合。

- [Ignoring Code Blocks](https://phpunit.readthedocs.io/en/9.5/code-coverage-analysis.html#ignoring-code-blocks)

## ブロック

```php
/**
 * @codeCoverageIgnore
 */
```

## 複数行

```php
// @codeCoverageIgnoreStart
print '*';
// @codeCoverageIgnoreEnd
```

## 1行

```phpregexp
exit; // @codeCoverageIgnore
```

---

[![クリエイティブ・コモンズ・ライセンス](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-sa/4.0/deed.ja)
この記事は[CC BY-SA 4.0（クリエイティブ・コモンズ 表示 4.0 継承 国際 ライセンス）](http://creativecommons.org/licenses/by-sa/4.0/deed.ja)の元で公開します。
MayaのHIK(ヒューマンIK)を使ってリターゲット(違う骨から動きを移す)する方法をためして

Mayaで違うスケルトン構造から、自分で作ったスケルトンに動きを移したい...
って場面は多々あると思います。

今回はそんな場合に使える機能、HIKのリターゲットを試してみたので、備忘録がてらにまとめていこうと思います。

参考動画

[24. アニメーション HumanIKリターゲット](https://area.autodesk.jp/movie/start-at-maya/24.html)
今回はこちらの動画を参考に作業してみました。

この動画で
* キャラクター
* ソース
の概念が理解できました。

で、HIKで扱うには、**キャラクタを定義してあげないといけない、**
ってのもわかった。

キャラクタ定義っていうのは、HIKに
**今からこいつを使うぜ**
ってのを教えてあげる？設定してあげる？
みたいなイメージですかね。

HIKでモデルをどうこうしたい場合は、とにもかくにも、まずは**キャラクタ定義**
そこを念頭においておけば、色々と応用が効くと思います。

てかどうでもいいがこの参考動画の声、めっちゃかわいくない？
って思いながら聞いてました。

##コンテンツブラウザからアセットを持ってきて、動きを適用させる

コンテンツブラウザには、
`ウィンドウ＞一般エディタ＞コンテンツブラウザ`

でアクセスできます。
コンテンツブラウザから、モデルとモーションを読み込みます。

1. `ウィンドウ＞アニメーションエディタ＞HumanIK`でHIKのウィンドウを開く。
2. HIKウィンドウの`キャラクタ`が、読み込んだモデルの名前になってることを確認。
3. `ソース`を読み込んだスケルトンに設定。
4. `キャラクタ`で定義されたモデルに、`ソース`のアニメーションが適用される。

HIKの基本的な考え方はこんな感じです。

`ソース`から`キャラクタ`へ

##モーションキャプチャーの動きじゃなくても使える
参考動画では
> *モーションキャプチャーの動きをキャラクターへ流し込む*

って言ってますが、読み込める動きはそれだけじゃないです。

上記でも触れてますが、HIKの基本は`ソース`から`キャラクタ`へ。

つまりキャラクタ定義さえやっちゃえば、キャプチャーデータじゃなくても動きを移すことが可能です。
まぁもちろん、100％完全再現は無理ですが…

骨の構造がだいたい同じなら、8〜9割の精度で持ってこれます。
残りの１〜２割は細かい修正は手動で直す。
ってワークフローの方が効率的かと思いますね。

##【所感】成果の８割は２割の労力【パレートの法則】

[パレートの法則](https://infinity-agent.co.jp/lab/pareto-law/)ってのがありますし、クオリティの8割を決めるのは、2割の労力です。

違うスケルトン構造へ動きを移す(リターゲット)って場合で考えると、
* 8割の動きはHIKのリターゲット機能
* 残り2割は人力による手直し
って運用したほうが、出戻り少なく、コスパいいと思います。

雑でもいいから、とにかく必要なアセットを揃える。
そこからエンジンに実装するなり、レンダリングかけるなりで、全体を把握する。
微調整は後からやればいい。

ってのが私の考えですね〜。
初学者のJavaScript　位置情報の取得

##geolcationで位置情報を取得する
```javascript
  function success(pos) {
    const lat = pos.coords.latitude;
    const lng = pos.coords.longitude
    const accuracy = pos.coords.accuracy;

    $('#hoge').text(`緯度：${lat} 経度：${lng}`);
    $('#fuga').text(accuracy);
  }

  function fail(error) {
    alert('位置情報の取得に失敗しました。エラーコード：' + error.code);
  }

  navigator.geolocation.getCurrentPosition(success, fail);
```
`navigator.geolocation.getCurrentPosition(success, fail);`の記述で位置情報の取得。また情報の取得に成功した時と失敗した時に分岐させる。
成功したときは経度、緯度と精度をそれぞれ変数に代入し、データを使用できるようにしている。所得したデータをテンプレート文字列でid名hogeに軽度と緯度のデータ、fugaに精度のデータを代入し出力するようにしている。

## さいごに
プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、ご指摘等いただけますと幸いです。

参考図書：確かな力が身につくJavaScript「超」入門　第２版　著者：加納祐東
GitHub への push

# 勉強の記録
GitHub への push 3/8
## 勉強した内容
- git と gitHubに情報を追加すしました。

## 何をベースに勉強してるか
- [N予備校 プログラミング入門](https://www.nnn.ed.nico/courses/668/chapters/9515)

## 内容の詳細
- GitからGitHubにpushって書く以外にないかも。

### わかったことについて
- GitからGitHubに追加してバックアップをしておこう！って内容なのかな。

### むずかしかったよ
- 前回の続き的な感じなのかな

## 次回やる予定のこと
- 次回はGitのプランチ
Emacs を複数の異なる設定で楽に起動する（macOS）

Emacs を複数の設定で起動したい場合があります。

私の場合は、流行りのパッケージを積極的に試していく設定とそうでない設定で分けています。結果、前者は LSP の恩恵をたくさん受ける設定となったのでそれが向いている開発用に、もう一方は Org Mode がメインの用途となっています。それぞれ気分を変えたいのでテーマも別で、後者に至っては use-package も使っていません。

あれこれパッケージを追加したり外したり試行錯誤しているとカオスにもなるので、実験用に起動したい場合もあるかもしれません。そんな時に役立つと思われる方法です。

# 起動方法
まず、新たな設定用の .emacs.d を配置する場所を決めます。今回はホームディレクトリに emacs2 というディレクトリを作成して、ここに .emacs.d を配置します。

起動コマンドは以下です。

```shell
$ HOME=/Users/[ユーザー名]/emacs2/ open -n -a /Applications/Emacs.app
``` 

こうすることで、~/emacs2/.emacs.d/init.el を設定ファイルとして読み込み起動するようになります。また、emacs2 をホームディレクトリとみなすので、このコマンドで起動した Emacs は /Users/[ユーザー名]/emacs2/ を ~/ とみなします。

# わざわざコマンドを実行するのが面倒な場合
起動用シェルスクリプトを実行するショートカットを登録します。

1. Automator.app を起動します。

2. command + N で新規登録画面を表示させます。

3. 「クイックアクション」を選んで「選択」をクリックします。

4. 「シェルスクリプトを実行」をダブルクリックします。

5. 「ワークフローが受け取る項目」を「入力なし」に変更します。

6. シェルスクリプト入力欄に先ほどの起動コマンド `HOME=/Users/[ユーザー名]/emacs2/ open -n -a /Applications/Emacs.app` を入力します。

7. command + S で保存します。保存時に「クイックアクションの名前」を聞かれるので任意の名前を入力して「保存」をクリックします。ここでは emacs2 という名前で保存してみます。

8. 「システム環境設定」から「キーボード」を開きます。

9. 「ショートカット」タブから「サービス」を選択して、先ほど登録した「クイックアクションの名前」を探します。今回であれば emacs2 を探します。
ここで任意のショートカットを登録すれば、今後はそのショートカットで別設定の Emacs が起動します。通常起動したい場合は Dock などから起動すれば ok です。
【GCP】サポートプログラムについて

クラウドエースで紹介されている内容とは名前が変わってしまったみたい。
直接Googleとやり取りしてサポートを受けるよりも、キャリアとか専門のサポート会社が間に入ってサポートしてもらったほうが質がよかったりすることもあるみたい。

https://www.cloud-ace.jp/column/detail06/

https://cloud.google.com/support/
Open WatcomでTEEN

PC-9801がIPリーチャブルになったのでなにか作ってみようと思います。

FreeBSDで使えるようにしたOpen Watcom v2を使います。

当時はTEENのアプリケーションはLSI CかTurbo Cで作られるケースが多かったようです。

TEENは常駐型のプログラムでアプリケーションとはソフトウエア割り込み(INT)でやり取りをします。

![TEENMEM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/03259650-0d28-1f7d-18fa-a901c2a898d2.png)

下のコードは割り込みの番号を探して、TEENが常駐している場合はソフトウエア割り込みを使ってTEENのバージョンを取得しています。

```c:tver.c
#include <dos.h>
#include <stdio.h>
#include <string.h>

void teen_version(int vect)
{
union REGS regs;

        regs.h.ah = 0x01;
        int86(vect, &regs, &regs);
        printf("TEEN Vector %x Version %d.%d", vect, regs.h.al, regs.h.ah);
}

int main()
{
        int vect;
        char far *addr;

        vect = 0x22;
        while ( vect < 0x100){
                addr = (char *far)_dos_getvect(vect);
                addr -= 9L;
                if (_fstrcmp(addr, "%TEENAPI") == 0) {
                        teen_version(vect);
                        return 1;
                }
                ++vect;
        }
        printf("NG");
        return 0;
}
```


ラージモデル(-ml)でビルドする必要がありました。

FreeBSDでコンパイルしてTFTPでPC-9801に転送して確認しました。

```
A>TVER
TEEN Vector 70 Version 0.39
```

TEENではアセンブラで書かれたライブラリが用意してありました。スモールモデル用とラージモデル用があり、

ライブラリはTurbo Cの呼出し手順で作られていて、Open Watcomで使うためには引数のレジスタの変更が必要です。返り値はAX,DXで同じようです。
docker+laravel +nginx+Mysql環境でnpmコマンド使えるように設定する

#前提
https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4


この記事をもとに`docker+laravel +nginx+Mysql`の環境を構築。


## ディレクトリ構造

```
├── README.md (この名前にするとGitHubで見た時にHTMLに変換して表示してくれる)
├── infra (*1)
│   ├── mysql (*1)
│   │   ├── Dockerfile
│   │   └── my.cnf (*1)
│   ├── nginx (*1)
│   │   └── default.conf (*1)
│   └── php (*1)
│       ├── Dockerfile (この名前にするとファイル名の指定を省略できる)
│       └── php.ini (*1)
├── docker-compose.yml (この名前にするとファイル名の指定を省略できる)
└── backend (*1)
    └── Laravelをインストールするディレクトリ

```
## コンテナの構造
###appコンテナ
　このコンテナで、phpやlaravelをインストールしてる
### webコンテナ
　このコンテナで、nginxをインストールしてる
### dbコンテナ
 このコンテナで、MYSQLをインストールしてる


#node npmインストール方法
## php/Dockerfileを編集

```
FROM php:7.4-fpm-buster
SHELL ["/bin/bash", "-oeux", "pipefail", "-c"]

ENV COMPOSER_ALLOW_SUPERUSER=1 \
  COMPOSER_HOME=/composer

COPY --from=composer:1.10 /usr/bin/composer /usr/bin/composer

RUN apt-get update && \
  apt-get -y install git unzip libzip-dev libicu-dev libonig-dev && \
  apt-get clean && \
  rm -rf /var/lib/apt/lists/* && \
  docker-php-ext-install intl pdo_mysql zip bcmath
// 以下を追加{{ここから}}
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs
// {{ここまで}}
COPY ./php.ini /usr/local/etc/php/php.ini

WORKDIR /work
```
## Dockerfileを変更したら以下のコマンドでビルドを行う
```
$docker-composer app build
```
##以下のコマンドでコンテナを起動し、appコンテナ内に入る
```
$ docker-composer up -d
$ docker-composer exec bash app
```

appコンテナ内でnode -vコマンドなどを実行して、Node.jsやyarnがインストールされていることを確認できれば、`npmコマンド`の使用が可能になります！！

#参考記事
[Docker LaravelのコンテナでNode.jsやyarnを導入する](https://zukucode.com/2019/06/docker-laravel-nodejs.html)
ユーザーが本当に求めていた世界一シンプルなFPSカメラ

FPSのゲームと”全く同じ動き”をするカメラです．
いわゆるマウスカメラ？

#前置き　
FPSカメラが欲しくなって記事を探すと，結構な確率でいざスクリプトをコピーしてカメラをぐりぐり回してみても視界がぐにょぐにょして上と下が分からなくなるモノに出くわすので，毎回修正して使用するのに苦労するので備忘録代わりに記事にすることにしました．

#実装のアイデア
1. マウスの移動量をとってきてカメラの回転の移動量とする
2. 軸ごとに回転させる
3. 軸によっては動的にその向きを変える

特に3つ目が出来てないとカメラがぐにょぐにょしがち


#コード
コピってカメラにつけるだけ

```C#:CameraControl.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraControl : MonoBehaviour
{
    //マウス感度
    float sensitivity=1f;

    void Update()
    {
        CameraRotate_Mouse();
    }

    private void CameraRotate_Mouse()
    {
        //マウスの移動量取得
        float x = Input.GetAxis("Mouse X") * sensitivity;
        float y = Input.GetAxis("Mouse Y") * sensitivity;

        //Y軸中心にカメラを回転
        transform.RotateAround(transform.position, Vector3.up, x);
        
        //上を見上げすぎて逆に後ろを向いちゃうのを防止．のつもりだったけど挙動変なので別途付け加えてください．
        /*if (transform.forward.y + y > 0.9f)
           y = 0.9f - transform.forward.y;*/

        //カメラのX軸を中心に回転
        transform.RotateAround(transform.position, transform.right, -y);
    }
}

```
マウス感度とか制限とかはおまけで付けた．
取り除いてもFPSゲームと同じ動きをするカメラってところには変わりないので実際はもっとシンプルにできる．↓

```C#:SimpleCameraControl.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SimpleCameraControl : MonoBehaviour
{

    void Update()
    {
        CameraRotate_Mouse();
    }

    private void CameraRotate_Mouse()
    {
        //マウスの移動量取得
        float x = Input.GetAxis("Mouse X");
        float y = Input.GetAxis("Mouse Y");

        //Y軸中心にカメラを回転
        transform.RotateAround(transform.position, Vector3.up, x);
        //カメラのX軸を中心に回転
        transform.RotateAround(transform.position, transform.right, -y);
    }
}
```
↑どう？めっちゃシンプルじゃね？
これだけでFPSっぽくマウスでカメラを動かせます．

#特に大事なところ
     transform.RotateAround(transform.position, Vector3.up, x);
     transform.RotateAround(transform.position, transform.right, -y);

・RotateAroundを使って回転軸を指定して回転を行う．
・マウスの移動量はx方向(左右の動き)とy方向(上下の動き)で取れる．
例：マウスを右に動かしたときにカメラが右を向くようにしたければ，マウスの移動量xをy軸中心の回転の移動量にする．
・Vector3.rightとtransform.rightで動き方が変化するので注意



#参考になりましたらLGTMよろしくお願いします
よろしくおねがいします
postでjsonを送って、受け取るfilter_inputやparseを使って

phpで情報を取得して、postで送信

データを受け取って、処理に移るまで
### urlに情報を送りたい(postでjsonを)
htmlのinputから情報が送られてくるのを、
$_POSTで取得できるのだが、スーパーグローバル変数はセキュリティ上よくないのでfilter_inputで取得する

複数の情報を送りたい時には、array(配列)で送信する。
`$data = array('login_id' =>$login_id);`

https://www.php.net/manual/ja/function.filter-input-array.php

optionの中に、methodやheaderの情報を入れ込む。
contentの中は、http_build_query($data)

http_build_queryはエンコード(後に元の信号またはデータに戻せるような変換を加えることである)してくれるもので、dataを送信できるようにしている。

`Content-type: application/x-www-form-urlencoded`を指定しなくても動く。
使わない時には、multipart/form-data がデフォルトで通信してしまうらしい。
https://adan.jp.net/blog/programing/1792#Content-type%E3%81%AE%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E5%9B%9E%E9%81%BFhttp_build_query%E3%81%AE%E9%96%A2%E4%BF%82%E6%80%A7

※ただしこの際、自分の環境では、Content-typeを指定しないで送信しようとすると、以下のエラーが出ました。

```
Notice: file_get_contents(): Content-type not specified assuming application/x-www-form-urlencoded
```
file_get_contentsを使用する際にはheader情報を付け加えないと、いけないらしく
headerをきちんとx-www-form-urlencodedにしてやると動きました。
https://qiita.com/suisuina/items/9b7d44118266f97a577d#comments

file_gets_contentの引数に`stream_context_creare()`と`$data`を渡してやる。
後に、`file_get_contents()`を使って、ファイルの内容を全て文字列に読み込む。失敗時はFalseが返される。
https://www.php.net/manual/ja/function.file-get-contents.php

### ストリームコンテキストって何？

ストリームとは、なんでもファイルのように扱えることができるオブジェクトの塊。
データをやりとりするための基盤となる仕組みをストリームと呼ぶとかなんとか。 という自分の認識です。

コンテキスト は、ストリームの挙動を変えたり、 拡張したりすることのできる パラメータ と ラッパ固有の オプション の集合です。

ストリームコンテキストとは、どのようにストリームを扱うのかなどを明記するもの。
ストリームの挙動を変えたり、拡張したりすることのできるオプションの総体である。
つまり、ここでは`stream_context_create($options)`においてoptionを渡しているので
どのようなオプションをつけてデータを送信するのかを決めている(header情報やmethodなど)
また、optionは連想配列でなければならないらしい。。

https://qiita.com/desho/items/14361eb8594faf661210
https://www.weblio.jp/content/%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%A0%E9%96%A2%E6%95%B0

https://www.php.net/manual/ja/function.stream-context-create.php

以下コード
```
$url = 'localhost:5000/login/';
    $login_id = filter_input(INPUT_POST,'login_id');
    $data = array(
        'login_id'=>$login_id
    );
    $options = array(
        'http'=>array(
            'method'=>'POST',
            'header' =>'Content-type: application/x-www-form-urlencoded',
            'content' => http_build_query($data)
        )
    );
    $received_data = file_get_contents($url, false, stream_context_create($options));
```


### 受け取り
```
$input_data = file_get_contents("php://input");
    parse_str($input_data,$data_array);
    $login_id = $data_array['login_id'];
```
postで送信されたjsonを取得する際にはfile_get_contents("php://input")を用いる。
パースする。
パースとは、文法に従って分析する、構造解析するなどの意味。

送信されるデータは、urlクエリパラメータで送られてくるが、より使いやすくするためにparse_strを用いる。使うと、input_dataの内容を`$data_array`に配列の要素として変数に保存され扱いやすくなる。https://www.php.net/manual/ja/function.parse-str.php


以上。
React でカスタムコンポーネントの props に CSS のプロパティを使う

# やりたいこと
カスタムコンポーネントを使う際に、style の要素を props に含めたいケースがありました。
イメージとしては下記の通りです。

```typescript
// Custom Box Component
<MyBox flex={1} flexDirection="row">...</MyBox>
```

例えば Flexbox に関するスタイルの場合、 React Native だと `@types` に `FlexStyle` があるので、そちらを import してあげれば事足りる。 [参考](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/2a49ccfca3a43b85c1dda70cafde18f0060606c1/types/react-native/index.d.ts#L680)

React の場合にうまくやる方法があるか探していたのですが、見つけたので自分への備忘も兼ねて残しておきます。

# 実装方法
`CSSProperties` を用います。
下記が実装サンプルです。

```typescript
import React, { CSSProperties } from "react"

type Props = CSSProperties

export const MyBox = React.forwardRef(
  ({ children, ...props }: Props, ref) => (
    <div
      ref={ref}
      style={{
        display: "flex",
        ...props,
      }}
    >
      {children}
    </div>
  )
```

props から style を除去したい場合、下記のように型を定義してあげることで実現可能です。

```typescript
import { Box as MuiBox } from "@material-ui/core"
import { CSSProperties } from "react"

type Props = Omit<React.ComponentProps<typeof MuiBox>, keyof CSSProperties | 'style'> & CSSProperties
```

## まとめと書簡
TypeScript は便利です。
built-in の組み込み関数を使いこなせば、再定義しなくても型を定義できるのでメンテナンス性が上がると感じます。

まだまだ知らない便利な機能が多いので、公式ドックやいろんな記事に目を通して使えるようにしていきたいところです。

もし皆さんがご存知な便利な機能があれば是非是非シェアお願いします！
初学者のJavaScript　Ajaxによる非同期通信

##非同期通信とは
通常のデータ送受信ではリクエストに対しHTMLがレスポンスとして返されるため、ページ全体を再度読み込むことになるのに対し、JavaScriptによる非同期通信はJavaScriptがWebサーバーとやり取りするため、ページの一部書き換えを行うことができる。

##Ajaxの基本形
```javascript
$.ajax({url: 'hoge.json', dataType: 'json'})
 .done(function(hoge){
  データダウンロード完了時の処理
 })
 .fail(function(hoge){
  データダウンロード失敗時の処理
 });
```
`$.ajax`に続く形はデータ送受信に必要な設定をオブジェクト形式で含めるため、次のような形式で設定を列挙する。
`$.ajax({url: 'データURL', dataType: 'json', そのほかの設定: '設定値', ...})`
今回はURLとdataTypeを設定。

## さいごに
プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、ご指摘等いただけますと幸いです。

参考図書：確かな力が身につくJavaScript「超」入門　第２版　著者：加納祐東
切のいい値（小数）だけを認める検証ルール

[Answersで回答する時に使う情報のまとめに戻る](https://qiita.com/Keiji_otsubo/items/9e6e0e946826133eddc7)

一旦textにして右端を切り出す方法を使うといいようです。

```
AND(
(Number__c - ROUND( Number_1__c , 0)) <> 0 ,
CONTAINS( TEXT(Number_1__c), "."),
RIGHT( TEXT(Number_1__c), 3) <> ".25",
RIGHT( TEXT(Number_1__c), 3) <> ".50",
RIGHT( TEXT(Number_1__c), 3) <> ".75"
)
```
C言語 control reaches end of non-void functionの対応方法

## 警告メッセージの出るプログラム

```c
#include <stdio.h>
#include <stdlib.h>

void msg_and_exit(const char *msg)
{
    printf("error :%s\n", msg);
    exit(1); // ここで強制終了する。
}
int fun(int i)
{
    if (i)
    {
        return 0;
    }
    msg_and_exit("message");
} // この行に関して警告メッセージが出る。
int main()
{
    fun(1);
}
```

このプログラムを`-Wall`のオプションを付けてコンパイルすると

```shell
> gcc -Wall -Wextra a.c
a.c: In function 'fun':
a.c:17:1: warning: control reaches end of non-void function [-Wreturn-type]
```

制御(control)がvoidでない(non-void)関数(function)の最終行(end)に到達する(reach)という警告(warning)メッセージが出る。

C言語でreturn文のない最終行はvoid型の値を返す。



`msg_and_exit("message");`の後にint型の値を返すreturn文を追記して警告メッセージを出さないようにできるが、到達しない文を追記したくない。exit関数で強制終了するので最終行に到達しない。



コメントを記述してコードチェックを無効にできるESlintのような方法を探してみたら、警告メッセージを出さない方法を発見した。

関数に`_Noreturn`指定子を記述することである。

```c
_Noreturn void msg_and_exit(const char *msg)
{
    printf("error :%s\n", msg);
    exit(1);
}
```

`_Noreturn`関数指定子は2011年にC標準のC11に導入されたもので、その関数が呼び出し元に戻らないことをコンパイラに伝えるものである。

## 参考

- https://ja.cppreference.com/w/c/language/_Noreturn _Noreturn 関数指定子

## まとめ

C言語のプログラムのコンパイル時にcontrol reaches end of non-void functionの警告メッセージが出た。

non-void型の値を返すreturn文を追記するのでなく、C11で導入された`_Noreturn`関数指定子を追記する方法で警告メッセージを出さないようにできた。
cloud functionsをデプロイしたらFunction failed on loading user codeといわれてデプロイできない問題

こんにちは。[もぐめっと](https://twitter.com/mogmet)です。
今日はcloud functionsをデプロイしようとしたらこんな事言われたので軽くメモをしておきます。

```
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.
```

## 原因

ターミナルのログ見てもさっぱりわからないのでcloud functions側のログを見たら答えが書いてありました。

```
Detailed stack trace: Error: Cannot find module 'child-process-promise' 
Did you list all required modules in the package.json dependencies? 
```

child-process-promiseがdevDependenciesに入っているのがダメだったみたいですね。
素直にdependenciesに入れ直したら治りました。

```
npm i child-process-promise --save
```

## 教訓

エラーログはちゃんと読もう！
M1　Mac でcocoapodsインストールはできるがpod installできない問題解決

cocoapodsの勉強でハマったエラーなので
アウトプットしておきます。

■ターミナルを「Rosettaを使用して開く」

Finderからターミナルを探し右クリックで「情報を見る」を選択
「Rosettaを使用して開く」にチェックマーク
ターミナル開く


■下記を入力しパスワード入力

```
sudo gem install ffi
```

■そして下記を入力しライブラリをインストールします。

```
pod install
```

これで自分はできました。
OpenCVのsetTermCriteria()の使い方を調べた

##はじめに
OpenCVのsetTermCriteria()の使い方がよくわからなかったので調査しました。その時の備忘です。

##OpenCVのsetTermCriteria()の使い方サンプル
OpenCVのSVMの[チュートリアルページ](https://docs.opencv.org/3.4/d1/d73/tutorial_introduction_to_svm.html)に以下のサンプルが載っています。

```Python
vm = cv.ml.SVM_create()
svm.setType(cv.ml.SVM_C_SVC)
svm.setKernel(cv.ml.SVM_LINEAR)
svm.setTermCriteria((cv.TERM_CRITERIA_MAX_ITER, 100, 1e-6))
```

1番目の引数には、MAX_ITER、EPS、あるいはその両方が指定できるとあります。（[こちら](https://docs.opencv.org/3.4/d9/d5d/classcv_1_1TermCriteria.html#a56fecdc291ccaba8aad27d67ccf72c57
)）
では、上記のサンプルのようにMAX_ITERを指定した場合、３番目の引数に指定している、epsilon値（この例では1e-6）は反映されるのかどうか、というのが今回の疑問です。たぶん反映されないのだろう、と思ったのですが、明確な説明が無くモヤモヤしたので、OpenCVのソースを確認しました。

##OpenCVのソースコード
modules/ml/src/svm.cpp の SVMImpl::checkParams()に以下のコードがありました。

```c++
        if( !(params.termCrit.type & TermCriteria::EPS) )
            params.termCrit.epsilon = DBL_EPSILON;
        params.termCrit.epsilon = std::max(params.termCrit.epsilon, DBL_EPSILON);
        if( !(params.termCrit.type & TermCriteria::COUNT) )
            params.termCrit.maxCount = INT_MAX;
```
一番目の引数にEPSを含まない場合はepsilonには最小値(DBL_EPSILON)、MAX_ITER(=COUNT)を含まない場合はmaxCountには最大値(INT_MAX)が設定されるようです。
つまり、設定した値は無視される（上記サンプルの場合、1e-6は無視されて、epsilonにはDBL_EPSILONが設定される）ようです。

##まとめ
解り難いAPIだなとう印象ですが、調べたことでスッキリしました。
コーディングテストのスタートに立つために必要なこと(Ruby)

私自身最初はコーディングテストのルールがわからず、困ったので今回はRubyでコーディングテスト対策を始めたい方に向けてまずはこれを覚えよう！という事を紹介します。

目安としてはpaizaでDを余裕で解けるレベルです。

初投稿なのでお手柔らかにお願いします！
#標準入力
標準入力とは、問題で与えられる値のことです。
標準入力をaに代入して受け取るには

```
a = gets
```

また受け取る値を文字列にしたり数値の値にするには

```
#文字列
a = gets.to_s

#数値
a = gets.to_i
```

標準入力は主にスペース区切り、改行区切りがあります。
スペース区切りとは 1 2 3 4 など。
改行区切りは
1
2
3
4
などです。

上記の値を受け取る時は、

```
#スペース区切り
a,b,c,d = gets.split(" ")

#改行区切り
a = gets
b = gets
c = gets
d = gets
```
これでaに1、bに2、cに3、dに4が代入されました。

#標準出力
値を出力するには

```
puts
p
print
```
の3つがあります

##それぞれの違い
putsは値を改行して出力します。
printは一行で出力します。
pはオブジェクトの情報も出力します。
paizaのD問題を解く際はあまり気にしなくて良いです。

#四則演算とあまりの計算

```
#足し算
a = a + 1
#引き算
a = a - 1
#掛け算
a = a * 1
#割り算
a = a / 1
#あまりの計算
a = a % 1
```

これを省略することもできます。

```
#足し算
a += 1
#引き算
a -= 1
#掛け算
a *= 1
#割り算
a /= 1
#あまりの計算
a %= 1
```

#条件分岐
条件を定義して、それに合う場合と合わない場合を考えます。

```
if 条件
条件に合った場合の行動
else
条件に合わない場合の行動
end
```

#最後に
これだけの知識があればD問題は簡単に解けると思います。
コーディングテスト対策は早めにした方が良いので、早速解いてみましょう！
MacでLinux Mint 20.1のブータブルUSBを作成する

#はじめに
「王様達のヴァイキング」という漫画が好きで最近また読み返していたのですが、
気付いたら某フリマアプリで中古のThinkPadをポチっていました。（カッコよく見えて。。。）
コロナ禍で家にいることが多いので、Linuxを入れてLinuxの勉強をしてみようと思います。

というわけで、最新のLinux Mint 20.1(Xfce)のブータブルUSBを作成しました。
その手順を自分の備忘録としても残しておこうと思います。
本当は是枝くんみたいにUbuntu入れようと思っていたのですが、ThinkPadにRAMが４GBしか載せられないので、いろいろ調べた結果Linux Mintにしました。
（64bitの恩恵が受けられないのかもしれませんが。）

Linux Mint公式のドキュメント[Linux Mint Installation Guide(English)][link-MintDoc]を参考にして作業しました。
[link-MintDoc]:https://linuxmint-installation-guide.readthedocs.io/en/latest/


#作業環境
##ブータブルUSBを作成するPC
機種: MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
OS: macOS Catalina 10.15.7
プロセッサ: 2.3 GHz デュアルコアIntel Core i5
メモリ: 16 GB 2133 MHz LPDDR3

##Linux Mintをインストール予定のPC
機種: ThinkPad T60
プロセッサ: Intel Core2Duo T7600
メモリ: DDR2-667 PC2-5300S 4GB(2GBx2)
SSD: 120GB

#ブータブルUSB作成
##Linux Mint 20.1 "Ulyssa" - Xfce (64-bit)のダウンロード
以下URLから韓国を選択しました（近いから）。
https://linuxmint.com/edition.php?id=286
うちのWi-Fi(mioひかり)が遅いこともありますが、約１時間ぐらいでダウンロード完了しました。

__Xfceを選択した理由__
公式ドキュメントの「Choose the right edition」の章に
[Xfceはリソース使用量が小さいとの記述][link-DocEdition]があったので、
メモリも４GBしかない今回のPCにはうってつけかと考え、Xfceを選択しました。
[link-DocEdition]:https://linuxmint-installation-guide.readthedocs.io/en/latest/choose.html#:~:text=it%E2%80%99s%20extremely%20stable%20and%20very%20light%20on%20resource%20usage.

##ダウンロードしたISOファイルの検証
まず、以下のコマンドでsha256のハッシュ値を生成します。
ドキュメントには、`sha256sum -b yourfile.iso`のコマンドの記載がありますが、
macでは以下でハッシュ値が生成できました。

```
$ shasum -a 256 linuxmint-20.1-xfce-64bit.iso
4f9cc6fa8a2d6fd7ffdf88478812ff994e36470ecfe50761f7efd56e6d3d7018  linuxmint-20.1-xfce-64bit.iso
```
出力された結果が、[Heanet download mirror][link-mirror]にある、
「sha256sum.txt」のXfceの値と一致することを確認できました。
[link-mirror]:https://ftp.heanet.ie/mirrors/linuxmint.com/stable/

次に、「sha256sum.txt」が信頼できるものかを確認していきます。
ただ、GPGがインストールされてなかったので、HomebrewでGPGをインストールします。

```
$ brew install gpg
```
GPGがインストールできたので、以下のコマンドをたたいてLinux Mintの公開鍵をインポートします。

```
$ gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-key "27DE B156 44C6 B3CF 3BD7  D291 300F 846B A25B AE09"
```

次のコマンドをたたいて、「sha256sum.txt」を確認します。

```
$ gpg --verify sha256sum.txt.gpg sha256sum.txt

gpg: 木  1/ 7 01:10:08 2021 JSTに施された署名
gpg:                RSA鍵27DEB15644C6B3CF3BD7D291300F846BA25BAE09を使用
gpg: "Linux Mint ISO Signing Key <root@linuxmint.com>"からの正しい署名 [不明の]
gpg: *警告*: この鍵は信用できる署名で証明されていません!
gpg:       この署名が所有者のものかどうかの検証手段がありません。
 主鍵フィンガープリント: 27DE B156 44C6 B3CF 3BD7  D291 300F 846B A25B AE09
```
上記のような警告が出ますが、「これは予期される警告です」と公式ドキュメントにNOTEがありますので、このままです。

##ブータブルUSBの作成
[Etcher][link-Etcher]というツールをダウンロード・インストールし、起動します。
[link-Etcher]:https://www.balena.io/etcher/

以下の順でEtcherを実行します。

1. 「Flash from file[^1]」をクリックし、上記でダウンロードしたISOファイルを選択します。
2. 「Select target[^1]」をクリックし、使用するUSBを選択します。
3. 「Flash」をクリックします。
4. フラッシュが完了すると、「セットしたディスクは、このコンピュータで読み取れないディスクでした。」と表示されますので、「取り出す」をクリックし、USBを取り出します。

[^1]: 公式ドキュメントが想定しているEtcherのバージョンが違うのでしょうか。少し文言が違いますので、私のPCにインストールしたバージョン1.5.116ベースで記載しています。

#おわりに
実際に今回作成したブータブルUSBを使用してのLinux Mintのインストールはまた別で投稿しようと思います。
そもそもその時になってインストールできない、とかありそうですがそんなことはないと信じています。

ISOファイルの検証とかは、普段の業務でもやったこともなかったので、よい勉強になりました。
GPGについてはまったく無知でしたので、もう少し勉強します。
（なのでいろいろと日本語おかしかったらすみません。。。）
Testify の suite まとめ

## 環境

```
$ go version
go version go1.15.7 linux/amd64
$ go mod graph
mymodule github.com/davecgh/go-spew@v1.1.1
mymodule github.com/stretchr/testify@v1.7.0
mymodule gopkg.in/yaml.v3@v3.0.0-20210107192922-496545a6307b
```

## suite の作り方

`suite.Suite`を持つ構造体を定義し、任意に次の6つのメソッドを実装します。

* `SetupSuite()`
* `SetupTest()`
* `BeforeTest(suiteName, testName string)`
* `AfterTest(suiteName, testName string)`
* `TearDownTest()`
* `TearDownSuite()`

メソッド名に`Suite`を含むものは一度しか実行されず、その他のメソッドはテストの数だけ実行されます。

## まとめ

次のコードは、`github.com/stretchr/testify`モジュールを事前に入れておくと、単体でコンパイル可能なコードです。

```golang
package main

import (
	"testing"

	"github.com/stretchr/testify/assert"
	"github.com/stretchr/testify/suite"
)

type MySuite struct {
	suite.Suite
}

func (s *MySuite) SetupSuite() {
}

func (s *MySuite) SetupTest() {
}

func (s *MySuite) BeforeTest(_, _ string) {
}

func (s *MySuite) AfterTest(_, _ string) {
}

func (s *MySuite) TearDownTest() {
}

func (s *MySuite) TearDownSuite() {
}

func (s *MySuite) TestOne() {
	assert.Equal(s.T(), 1, 1)
}

func (s *MySuite) TestTwo() {
	assert.Equal(s.T(), 2, 2)
}

func (s *MySuite) TestThree() {
	assert.Equal(s.T(), 3, 3)
}

func TestMySuite(t *testing.T) {
	suite.Run(t, new(MySuite))
}
```
Mixed Content: The page at ～とエラーが出た場合の対応

サーバはApache（CentOS Linux 8.2）。

#### エラーが出たときの状態
・管理画面内の複数のHTMLページで`<button>`タグが突然反応しなくなった
・デベロッパーツールでコンソールを開くと以下のエラーが出ている
・エラーはボタンを叩くたびに数が増えていく状態で、どうやらうまく遷移できない様子
・エラーの生じた管理画面ページは修正でも最近触っていない箇所
・当初、リンク先を`file.php`の形から`./file.php`の相対パスの形にして対処していたが、似たエラーがほかにも見つかっていく 

※ 参照：[HTTPSとHTTPの混合サイトで外部リンクが読み込めない場合の対処](http://blackwhite.sakura.ne.jp/wp/2017/10/06/https%E3%81%A8http%E3%81%AE%E6%B7%B7%E5%90%88%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E5%A4%96%E9%83%A8%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8C%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%81%E3%81%AA%E3%81%84%E5%A0%B4/)

```
example.php:123 Mixed Content: The page at 'https://example.com/ooo/abc/' was loaded over HTTPS, but requested an insecure frame 'http://example.com/abc/abc/abc/'. This request has been blocked; the content must be served over HTTPS.
```

#### 原因
・直近にSEO対策で.htaccessにURL正規化の行を追加していたところで書き方が間違っていた

#### 解決方法
管理画面内のファイルはSEOの対象外なので、URL正規化の条件から外してやるよう下記の一行を追加
`RewriteCond %{REQUEST_URI} !/admin/`

```
<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.example\.com)(:80)? [NC]
RewriteRule ^(.*) http://example.com/$1 [R=301,L]
ここに追加
RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
RewriteRule ^(.*)index.(html|php)$ http://example.com/$1 [R=301,L]
order deny,allow
```
URL正規化をすると、エラーが出てしまう管理画面も駄目仕様だろうけど、いったん上記で無事収まりましたとさ。
Docker上で動いているNuxt.js(SSR)にてwatchQueryを導入しfetchやasyncDataでリロード時にエラーが発生

個人的にハマったのでメモ

下記リンクの「DockerとNuxtのSSRでConnectionRefusedが発生する問題の原因を解説する」が
かなり分かりやすく今回参考にさせて頂きました。

症状
Docker上で動いているNuxt.js(SSR)にてwatchQueryを導入しfetchやasyncDataでリロード時に
エラーが発生しデータが取れない現状が発生

原因
fetchやasyncDataはサーバーサイドで動作するみたいで
Docker上ではホスト~コンテナ間通信ではなく
コンテナ~コンテナ間通信になってしまう様だ。

改善方法

サーバー上での実行時と、クライアント上での実行時でURLを変える設定を追加します。

nuxt.config.ts(.js)

```
axios: {
    baseUrl: Parsed.API_URL,
    browserBaseURL: Parsed.API_URL_BROWSER
  },
```

.env

```
ENV=local
API_URL= http://nginx/api
API_URL_BROWSER=http://localhost/api
BASE_URL=http://localhost:3000
```

docker-compose.yml (これは今回関係ありません 下記の説明の為に記載しているだけです。)

```
nginx:
    container_name: nginx
    build:
      context: ./nginx
      dockerfile: Dockerfile
    volumes:
      - ./back:/$WORKDIR
    ports:
      - 80:80
      - 3000:3000
    tty: true
    restart: always
    networks:
            aplication_net:
                ipv4_address: 172.19.0.4
    depends_on:
      - front

  front:
    container_name: front
    build:
      context: ./front
      dockerfile: Dockerfile
      args:
        WORKDIR: $FRONTWORKDIR
        CONTAINER_PORT: $CONTAINER_PORT
    environment:
      PORT: '3000'
      HOST: '0.0.0.0'
    expose:
      - 3000
    volumes:
      - ./front:/$WORKDIR
    stdin_open: true
    tty: true
    restart: always
    networks:
            aplication_net:
               ipv4_address: 172.19.0.5
    depends_on:
      - back

  back:
    container_name: back
    build:
      context: ./back
      dockerfile: Dockerfile
```

自分がハマった部分
nuxt.js側のfrontからapiサーバー側のbackへリクエストを送る為、
最初、http://back/api と勘違いしていましたが、
自分の環境では、　http://nginx/api となります。
理由としては、back側は http://localhost で動作するようになっており
その場合、 http://localhost でアクセスすると nginx -> back
という流れになる為です。

上記設定前にサーバーサイド時にコンテナ間通信が
動作するか確認するには、アクセス元のDockerのコンテナ(今回の場合だとfront)
に入ってコンテナ内から
curl http://コンテナ名:ポート
で通信できるか確認してください。

あと、fetch、asyncDataをリロード時にも動作させるには必ず
watchQueryを設定してください、動きません。

fetchとasyncDataはサーバーサイド側とクライアントサイド両方で動作し
beforeCreate、created、updatedなどはクライアント(ブラウザ上)でのみしか動作しないので
SSRモードで使用する場合は、出来れば、fetchかasyncDataを主に使用した方が良いのかもしれません。

(参考)
DockerとNuxtのSSRでConnectionRefusedが発生する問題の原因を解説する
https://nakka-k.hatenablog.com/entry/2019/10/10/123753

watchQuery プロパティ
https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/pages-watchquery/

【Nuxt.jsに入門してみた】asyncData()とfetch()について
https://negalog.com/nuxt-js-fetch-data/

Nuxt.jsのasyncDataとfetchの違いについて
https://gerbel.jp/blog/nuxtjs-asyncdata-fetch/
margin ;0 auto; と text-align :center;　の違い

#css
いまいち違いがわからなかったので、メモを残します。


###【text-alignだけ】

```ruby:stylesheet.css
text-align: center;
```

![text-alignだけaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662294/fe96a820-1cfe-90a0-11b3-fc348761559f.png)

h1が微妙に左側に傾いてる
<br>
<br>




###【margin 0 autoもtext-alignも両方】

```ruby:stylesheet.css
margin: 0 auto;
text-align: center;
```

![両aaa方.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662294/a8ac508e-57e1-5fb6-5187-e1d847c2cb1a.png)


文字が中心でさらに枠組み自体が真ん中になっている
<br>
<br>




###【margin 0 autoだけ】

```ruby:stylesheet.css
margin: 0 auto;
```
![marginだけaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662294/cf3b7a28-ca3d-8a10-7244-8f279d32f0cd.png)

文字は左側だが枠は真ん中


###【結論】
margin 0 autoは枠そのものを真ん中に寄せる
text-align centerは文字の位置を枠の中の中心に寄せる
AWS SecretsManager マルチリージョンレプリケーションを試してみました。

# はじめに
開発/テスト/本番環境における、RDB接続情報などの環境依存パラメータをよりセキュアに保管運用できるSecretsManagerですが、マルチリージョンでのレプリケーションに対応したということなので、レプリケーション設定および変更した際の伝搬の様子を確認します。また、同時に複数リージョンへレプリカリージョンできるかも確認したいと思います。

# 参考記事
https://aws.amazon.com/jp/blogs/security/how-to-replicate-secrets-aws-secrets-manager-multiple-regions/

# 登録手順
* 1.保存したいシークレットを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124955/28511d02-f161-d791-e6a6-d71519f8e716.png)

* 2.[シークレットを他のリージョンにレプリケート]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124955/c87d70a3-f578-579d-8935-951ba5600c14.png)
今回は、大阪リージョンと地球の裏側のサンパウロを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124955/e0db30f1-fcca-9b34-fd4b-fb19c93928a2.png)

* 3.登録完了
![secretsmanager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124955/1717396e-c033-8f2f-a51a-f1be95e603ed.png)

# 結果：aws cliでキーの値をUpdateしてみました
動画開始16秒後、左上コンソール画面で変更をプライマリ(東京リージョン)に変更を実行してます。その後、右側上下２つのレプリカ側に伝搬していっているのが確認できます。以上です。

https://twitter.com/i/status/1368945583885488129

動画中に使用しているaws cliコマンド

```
# valueを確認
aws secretsmanager get-secret-value --secret-id <<<ARN>>> --region <<<REGION_CODE>>>--query "{Name:Name,SecureString:SecretString,VersionId:VersionId,CreatedDate:CreatedDate}

# valueを変更
aws secretsmanager update-secret --secret-id <<<ARN>>> --secret-string '{"<<<KEYNAME>>>":"<<<STRING>>>"}'
【Rails】railsconsoleでNameError (uninitialized constant User)になった時の対処法【Ruby】

<h2>症状</h2>

<a href="https://railstutorial.jp/chapters/rails_flavored_ruby?version=6.0#sec-exercises_a_user_object">railsチュートリアル4章</a>にて、railsconsoleでお試しで作ったクラスのインスタンスを作ろうとしても、<b>NameErrorエラー</b>になってしまいました。

```
user = User.new(first_name: "Michael" , last_name: "Hartl" , email: "mhartl@example.com") 
Traceback (most recent call last):
        2: from (irb):15
        1: from (irb):15:in `rescue in irb_binding'
```


<h2>解決法</h2>
requireを打ち込んで解決しました。

Railsコンソールは起動時にRailsの環境を自動的に読み込みますが、今回のexample.userというファイルは対象外のようで、requireで読み込み忘れると、NameErrorになって「そんなファイルはないよ」と怒られるようです。

```
# example_userのコードを読み込む方法
require './example_user' 
```

ちなみに、modelはrailsconsole起動時に環境の一部として自動的に読み込まれるので、requireする必要はないようです。

<h2>参考</h2>
railsチュートリアル4章　演習
https://railstutorial.jp/chapters/rails_flavored_ruby?version=6.0#sec-exercises_a_user_object
Pythonでアルゴリズム(中央値)

# 目的
1つのサイズ$ N $のリストの中央値を求める際の計算量はソートしてから求めることで$ O(NlgN) $。($ O(N) $でも可能。)<br>しかし、リストの長さがクエリごとに変化する場合には毎回ソートして中央値を求めると計算量が非常に大きくなってしまう。($ k $回目で$ O(klgk) $でそれを$ k=1からN $まで行う)<br>この操作を$ k $回目で$ O(lgk) $で済むようによう改善する。
# 方法
・現在の中央値より小さい値をリスト$ left $に、大きい値をリスト$ right $に格納する。この際、$ left $からは最大値、$ right $からは最小値を常に$ O(lgN) $(リストの長さが$ N $のとき)で取り出せるように$ left $はMax優先度付きキュー、$ right $はmin優先度付きキューにする。<br> ・値を挿入する際には、$ left $の最大値と$ right$ の最小値と比較してこれら3要素を大小関係に基づき$ left $と$ right $ の要素数が均等になるよう割り振る(合計が奇数個の場合は$ left $を1つ分多くする)<br> ・中央値は合計が奇数個の場合は$ left $の最大値、偶数個の場合は$ left $の最大値と$ right $の最小値が中央値になる
# 実装
・入力は要素数$ N $と$ N $個の要素を持つ配列$ A $<br> ・出力は$ k $行目に$ k $番目の要素を挿入したあとの中央値

```python
from heapq import heappush, heappop

# 入力
n = int(input())
a = [int(x) for x in input().split()]

# 番兵
left = [float('inf')]
right = [float('inf')]

for i in range(n):
    left_max = -left[0] # leftの最大値
    right_min = right[0] # rightの最小値
    if len(left) == len(right):
        if a[i] > right_min:
            heappush(left, -heappop(right))
            heappush(right, a[i])
        else:
            heappush(left, -a[i])
    else:
        if a[i] < left_max:
            heappush(right, -heappop(left))
            heappush(left, -a[i])
        else:
            heappush(right, a[i])
    if len(left) > len(right):
        print(-left[0])
    else:
        print(-left[0], right[0])
```
Gentoo Linux の emerge --sync を速くする

`emerge --sync` がいつまで経っても終わらない、特に

```
* Verifying /usr/portage/.tmp-unverified-download-quarantine ..
```

に何分もかかる！なんてことはないでしょうか。

## Portage ツリーを Git で同期する
デフォルトでは rsync を使用して Portage ツリーを同期しています。rsync の署名検証は遅いので、これを Git で同期するように変更します。
同期先のリポジトリとして GitHub にある公式のミラー ([gentoo-mirror/gentoo](https://github.com/gentoo-mirror/gentoo)) を使用します。


```ini:/etc/portage/repos.conf/gentoo.conf
[DEFAULT]
main-repo = gentoo

[gentoo]
# 最近の Portage では /var/db/repos/gentoo
location = /usr/portage
sync-type = git
sync-uri = https://github.com/gentoo-mirror/gentoo
sync-depth = 1
sync-git-verify-commit-signature = yes
sync-openpgp-key-path = /usr/share/openpgp-keys/gentoo-release.asc
auto-sync = yes
```

既にダウンロード済みの Portage ツリーを一旦削除します。

```bash
sudo rm -rf /usr/portage/*
# sudo rm -rf /var/db/repos/gentoo/*
```

`emerge --sync` します。最初は時間がかかりますが、次回からはすぐに終わるようになります。

```bash
sudo emerge --sync
```
Service Cloud の効率性 ⇒ セルフサービスサイトおよびポータルの作成

１．カスタマーサイトが顧客に提供するのは次のどれですか?
２．ブランドを設定したカスタマーサイトを簡単に構築する方法は次のどれですか?
３．カスタマーサイトを Service Cloud にシームレスに統合できる理由は次のどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/a3ea4310-68e0-59f1-9397-4d534608770b.png)
S3をWebサーバーにしてコンテンツを公開する②（S3署名付きURL編）

S3をWebサーバーにして静的コンテンツを公開する方法を紹介します。

1. [S3パブリック編](https://qiita.com/morikaz/items/8d196844aed38d0d8d0b)
2. [S3署名付きURL編](https://qiita.com/morikaz/items/0d9d69e21e0863204b8e)　←コレ！
3. [CloudFrontパブリック編](https://qiita.com/morikaz/items/04c053ead497e2a7c86c)
4. [CloudFront署名付きURL編](https://qiita.com/morikaz/items/f3159562caa133916bce)
5. [CloudFront署名付きCookie編](https://qiita.com/morikaz/items/741fc1073dff746f7089)

# 手順

## バケットの作成

まずはバケットを作成しましょう。

マネジメントコンソールでS3のページを開きます。
バケットを作成をクリックします。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/a0698048-1503-f126-7ed0-b5c3f5135d75.png)

バケットの名前を入れて、リージョンを選択します。
バケット名は世界中のS3で一意である必要があります。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/0b2e95c3-c631-4d27-6367-c1314ee01352.png)

署名付きURLで公開する場合は、「バケットのブロックパブリックアクセス設定」はデフォルトのすべてブロックで問題ありません。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-3(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/0bc1268b-62a5-2343-d956-87ee614406b3.png)

これでバケット作成は完了です。

## HTMLの格納

作成したバケットを選択します。
そして、HTMLファイルをドラッグアンドドロップします。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/c8507633-f0b0-c65c-26e1-361416f4d065.png)

設定が色々ありますが、画面最下部のアップロードを実行します。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/393f9aa4-4e81-415d-bb6c-41c37ec87f2c.png)

複数ファイルやフォルダーまるごとアップロードすることも可能です。

## 公開する

署名付きURLのURLはマネジメントコンソールでは作成できず、CLIなどを利用して作成します。
CloudShellを使うと簡単にCLIを実行できます。

![ap-northeast-1.console.aws.amazon.com_cloudshell_home_region=ap-northeast-1(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/a9e48ad4-9092-a8cd-9e5b-65c341e5185b.png)

実行するコマンドは`aws s3 presign`です。

```console
[cloudshell-user@ip-XX-XX-XX-XX ~]$ aws s3 presign s3://website-2721ae93/index.html --expires-in 604800 --region ap-northeast-3
```

`expires`は署名付きURLの有効期限です。（604800を指定すると、一週間有効となります。）
少しだけハマったのですが、CloudShellが東京リージョンで実行されてて、S3のバケットが大阪リージョンの場合、明示的に`--region ap-northeast-3`をつけないと、無効な署名付きURLが生成されます。（生成は成功しますが、アクセスすると`AuthorizationQueryParametersError`というエラーとなります）

発行された署名付きURLは、クエリパラメータに以下の文字が付与されており、コレが適切に設定されている場合のみ、ファイルにアクセスができるという仕組みです。

```
X-Amz-Algorithm=XXXXXXXXXX
X-Amz-Credential=XXXXXXXXXX
X-Amz-Date=XXXXXXXXXX
X-Amz-Expires=XXXXXXXXXX
X-Amz-SignedHeaders=XXXXXXXXXX
X-Amz-Security-Token=XXXXXXXXXX
X-Amz-Signature=XXXXXXXXXX
```
AWS SAA持ちがAzure Fundamentals: AZ-900を合格するまでにやったこと

#この記事について
**2021年3月7日**にAzureの初級者向け資格**「AZ-900: Microsoft Azure Fundamentals」**を受験し無事合格しました。
もともと「AWS 認定ソリューションアーキテクト – アソシエイト試験」は合格済みでしたので、そこからどんな勉強をしたのか備忘として残しておきます。

試験概要については[公式サイト](https://docs.microsoft.com/ja-jp/learn/certifications/exams/az-900)など見て下さい。
この記事ではそのあたりはすっ飛ばしてどんな勉強したかを記載します。

#前提条件
今回、合格を目指した段階での私の知識レベルを記載しておきます。

* AWS 認定ソリューションアーキテクト - アソシエイト持ち
* Azureを少しだけ使ったことはあるが知識はほぼなし。具体的に言うと
 * Azure VMは知ってる（AWSで言うところのEC2）
 * Azure network security group(NSG)は知らない（AWSで言うところのSG）
 * Azure Blob Storageは知らない（AWSで言うところのS3）

#費やした労力
###掛かった費用（試験代は除く）
合計**￥8,400**です。
勉強するにあたって下記オンライン講座（Udemy）を買いました。

 * [AZ-900: Microsoft Azure Fundamentals模擬試験問題集（6回分276問）](https://www.udemy.com/course/az-900-microsoft-azure-fundamentals4176/)￥3,600
 * [作りながら覚えるMicrosoft Azure入門講座（IaaS編）](https://www.udemy.com/course/microsoft-azure-iaas-part/)￥4,800

Udemyで普通に買ったのでこれだけ掛かりましたが、セールとか新規で買うともっと安いと思います。

###掛かった時間（試験時間は除く）
合計**19時間くらい**です。期間としては**ほぼ1週間**。

* 下調べ（4時間くらい）
 * 試験勉強の教材選定
 * 試験申し込み
* 勉強（15時間くらい）
 * 平日 1時間 x 5日 = 5時間
 * 休日 5時間 x 2日 = 10時間

#勉強方法
### [Microsoft Learn の「AZ-900コース」](https://docs.microsoft.com/ja-jp/learn/certifications/exams/az-900)

Microsoft LearnはMSが提供するオンラインの無料教材です。これだけのものを無料で提供してくれるのでありがたい。AZ-900に記載してあるラーニングパスに沿って全部読み進めていきました。（Azure環境（無料環境）でのハンズオンもありますが、ほんの少しです。）

ここで一通り出題範囲のサービスについて学びました。ただ概要レベルで理解して相当斜め読みしました。何故なら機械翻訳されているせいか真剣に読んでもイマイチ消化しにくい文章だったので。

### [Udemy の「AZ-900: Microsoft Azure Fundamentals模擬試験問題集（6回分276問）」](https://www.udemy.com/course/az-900-microsoft-azure-fundamentals4176/)

大人なので詳しくは言いませんがこの問題集を解いておくことで、本番時に対応できる問題がなかなかにあります。ただ問題に流行り廃りがあるはずなので、あくまでも**「2021年3月7日時点」**で、ということは前提に考えておいてください。
解説は正解だけでなく全ての選択肢に対して「なぜその選択肢が正解の解答とはなり得ないのか？」を解説してくれているので分かりやすいです。

20個に1個くらい文脈とか言葉の捉え方おかしくない？答え違くない？みたいなものもありますが、本番に合わせてそんな感じの文章になってると思うのでイライラしない方が良いです。そういう問題でも解説読むと大体そっかぁ…となります。


### [Udemy の「作りながら覚えるMicrosoft Azure入門講座（IaaS編）」](https://www.udemy.com/course/microsoft-azure-iaas-part/)
講義とハンズオン形式で学べます。Azureの無料アカウント作るところから始めてくれるので初心者でもわかりやすいはずです。（私は以前自身で作ったアカウントを使用しましたが。（注釈[^1]）

[^1]: 半年以上前に作成した無料アカウントの期限が切れてたので、今回再利用しようと従量課金サブスクリプションを作ろうとしたら「Azure アカウントの対象外。Azure アカウントを作成できませんでした。」というエラーが出た。サポートリクエストに起票したら土曜日なのに5分くらいで有効化してくれた。なんだったんだろう？

WindowsのVMを立てて、IIS(Webサービス)起動して超基本的なWeb構成を作ったりします。
NSGやインバウンドNATの設定なども実際に手を動かして、試験内容に直結する内容を設定するので参考になりました。（この講義を受けたことで答えられる問題もありました。）
あとAzure Monitorのところも理解するのに役立ちます。
これを見ないとふんわりとしか理解できてないままテストに臨むことになっていたので。

#上記以外で知っておいた方が良かったもの
パッと思いつく範囲ではAzure Chinaはいったい誰が管理して誰が使えるのか？くらいですかね。それ以外は上の勉強方法で概ねカバーできたかと思います。

#得られた結果
ちなみに本試験はゆっくり解いて30分くらいだったので半分くらい時間が余りました。
ボーダー700点のところ835点で合格。ただ点数のレンジが分からない。おそらく1000点満点？
![受験結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551245/073e6bde-543e-fa16-a99a-4f406df05df4.png)

#まとめ
極端なことを言うとUdemyの問題集を解いておけばAWS SAA持ちなら合格できるかと思います。（合格を保証する発言ではありませんのであしからず。）
ただこの資格「だけ」を取る人はそんないないと思うので、後々を考えると試験の勉強とは別に手を動かしておいた方が良いんじゃなかろうかと初級者ながら思います。

あと試験申し込み時に公式問題集をオススメされますが誰か使いごごちを教えて欲しいです。
1万円くらいしたので躊躇してしまいました。