OmniAICreator/Qiita-1.07M huggingface dataset:
UxPlayを使ってiPhoneの画面をLinux PCに表示する

# はじめに
iPhoneでのゲームプレイを配信しようと思い、iPhoneの画面をPC上に表示する方法はないか調べてみました。画面の表示さえできればいいのですが、UxPlayというAirPlayサーバーになれるOSSがあるようでしたので、試してみました。

# この記事の動作環境

- OS: Gentoo Linux

# UxPlayとは

https://github.com/antimof/UxPlay

AirPlay2のサーバーになれるLinux向けソフトウェアです。

# UxPlayの利用
## ビルド
私が使っているGentoo Linuxには、UxPlayのパッケージはありませんでした。どこかのOverlayには存在するのかもしれないのですが、今回は自前でビルドしました。

ビルドする方法はUxPlayのREADMEに記載されていますが、Debian/Ubuntu向けの方法(どのパッケージをインストールするか、など)が記載されています。Gentoo Linuxでは同じライブラリが入るようにしてビルド環境を用意しました。

Gitリポジトリのクローン。

```bash
$ git clone https://github.com/FDH2/UxPlay .
```

ここでとりあえずcmakeを実行してみると、不足するライブラリがなにかわかります。

```bash
$ mkdir build
$ cd build
$ cmake ..
```

私の場合、「avahi-compat-libdns_sd」というライブラリのチェックで引っかかりました。これはどうやら、USEフラグに「mdnsresponder-compat」を指定して「net-dns/avahi」を再ビルドすればインストールされるようです。

なので、 /etc/portage/package.use に

```
net-dns/avahi mdnsresponder-compat
```

こんな感じで追記して、「net-dns/avahi」を再ビルドしました。

```bash
$ sudo emerge net-dns/avahi
```

自分の環境では、これ以外には特に不足するライブラリはありませんでした。インストールされているライブラリの状況によりけりだと思うので、他の環境では何か別に入れる必要があるかもしれません。

cmakeの成功後、

```bash
$ make
```

すると、実行ファイル「uxplay」が生成されます。これをシステムにインストールしてもいいのですが、まずはここにある状態で利用してみます。

## 実行

こんな感じで実行します。オプションがいくつかありますが、「-s」でウィンドウサイズ、「-fps」でフレームレートを設定できます。フレームレートはデフォルトで30のようなので、ゲーム配信のようなスムーズな動画が必要な場合、60を指定しておくと良いと思います。

```bash
./uxplay -s 1280x720 -fps 60
```

実行後、iPhoneでコントロールセンターを見ると、画面ミラーリングのところに「UxPlay」が出てくるので、そちらを選択します。

そうすると、ウィンドウが起動し、その中にiPhoneの画面が表示されます。また音声はUxPlayを動かしているPCから鳴るようになります。

![Screenshot_20220103_1249.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224250/bdfd2f9e-1160-48e9-a885-2f1a6a1d26e7.png)
※画像は「プロジェクトセカイ カラフルステージ！ feat.初音ミク」(プロセカ)のゲーム画面です。

あとはOBS Studioなどを利用して、このウィンドウ内の画面を配信することができます。

# ゲームはできるか？
UxPlayを利用してPCに画面を出すと、音声もiPhoneではなくPCから鳴ります。ここでプロセカのような音ゲーの場合、音の遅延が気になるところです。私の環境では、ほとんど違和感なくプレイできました。他のゲームでは試してないので、状況は違うかもしれません。
wslからファイルをcatしたらおかしなことになっていた

# 結論
* エンコード形式の変換(utf-16→utf-8)
* 制御文字の^Mを削除

が必要だった。

# cat
```
myname@PC:~/test3$ cat requirements.txt

��❖❖argon2-cffi==20.1.0
asgiref==3.4.1
bcrypt==3.2.0
cffi==1.14.6
(以下略)
```


※❖のところは、菱形の中に?が入っている文字

# cat -Aで調べてみた
```
myname@PC:~/test3$ cat requirements.txt-A

M-^?M-~a^@r^@g^@o^@n^@2^@-^@c^@f^@f^@i^@=^@=^@2^@0^@.^@1^@.^@0^@^M^@$
^@a^@s^@g^@i^@r^@e^@f^@=^@=^@3^@.^@4^@.^@1^@^M^@$
^@b^@c^@r^@y^@p^@t^@=^@=^@3^@.^@2^@.^@0^@^M^@$
^@c^@f^@f^@i^@=^@=^@1^@.^@1^@4^@.^@6^@^M^@$
(以下略)
```

# ファイル形式を調べる
`file <ファイル名>`

```
myname@PC:~/test3$ file requirements.txt
requirements.txt: Little-endian UTF-16 Unicode text, with CRLF line terminators
```
UTF-16とwith CRLFであることがわかった

# 変換して表示してみる
`iconv -f utf-16 -t utf-8 <ファイル名>`

```
myname@PC:~/test3$ iconv -f utf-16 -t utf-8 requirements.txt
argon2-cffi==20.1.0
asgiref==3.4.1
bcrypt==3.2.0
cffi==1.14.6
(以下略)
```

# 変換して保存
`cp requirements.txt requirements.txt.utf16`
`iconv -f utf-16 -t utf-8 requirements.txt.utf16 > requirements.txt.new`

# ただこれでも罠があった
cat -Aで確認してみると、^Mが残っている。。

```
myname@PC:~/test3$ cat requirements.txt.new -A
argon2-cffi==20.1.0^M$
asgiref==3.4.1^M$
bcrypt==3.2.0^M$
cffi==1.14.6^M$
(以下略)
```

# 山Mを消す方法
結論
`sed -i s/^M//g requirements.txt.new`
で消えたが^Mの入力に苦戦した。

^Mは制御コードなので、普通に^とMを文字として打ち込んでは^Mと認識されなかった。
次のサイトを見た。

https://www.koikikukan.com/archives/2013/10/15-013333.php
>「^M」はキーボードで「^」と「M」を入力するのではなく、「Ctrl-v」と「Ctrl-m」を連続して入力します。

WindowsTerminalで作業していたので「Ctrl-v」は「貼り付け」と認識される。。
普通のwslの方で実施したところ、山Mの入力ができた。

(Linuxだとすべて改行コードLFだと思っていたが、TypeScriptはLinuxでもCRLFらしい。)

# 関連
git config実施時のcore.autocrlfの設定が関係している模様。

https://qiita.com/uggds/items/00a1974ec4f115616580
TestCafeを触ってみる

# 概要

E2EテストフレームワークのTestCafeを簡単に触ってみます。
※ごく簡単な説明しかしてないです。
# TestCafeの特徴

- TestCafeはE2Eテストを行うためのフレームワークです。
- JSでテストコードを書くことができます。
- 導入も簡単で、Seleniumの様なDriverを用意する必要はありません。

# 導入

npmでインストールします。

```shell
$ npm install -g testcafe
```

testcafeコマンドが通ればOKです。

```shell
$ testcafe -v
1.18.1
```

# テストを書く

テスト対象はテスト自動化練習サイトの[HOTEL PLANISPHERE](https://hotel.testplanisphere.dev/ja/index.html)を利用します。
ここでは、宿泊プランの予約画面でプラン名が正しく表示されているかを確認するテストを作ります。

![img_001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547099/36b6a7b4-f418-2ce6-1fd8-8209e35a9657.jpeg "テストの流れ")

「お得な特典付きプラン」の「このプランを予約」ボタンを押して遷移した画面で「お得な特典付きプラン」の表記が存在を確認するテストです。これをTestCafeのテストスクリプトにすると下記のようになります。

```js:test.js
import {Selector} from 'testcafe';

fixture `宿泊プラン`
  .page`https://hotel.testplanisphere.dev/ja/plans.html`;

test('お得な特典付きプランを選択後、遷移先を確認', async t => {
  const selectButton = await Selector('body > div > div:nth-child(2) > div > div > div.card-body > a');
  await t
    .click(selectButton)
    .expect(Selector('#plan-name').innerText).eql('お得な特典付きプラン');
});
```

TestCafeのテストスクリプトは主に`fixture`と`test`によって構成されます。`fixture`1つに対していくつかの`test`が連なるように書きます。

# 実行

`testcafe`コマンドで実行したいテストを指定します。また、TestCafeでは各種ブラウザに対応していて、`testcafe`コマンドの後にブラウザ名を指定すると、そのブラウザでテストが実行されます。

```shell
$ testcafe chrome test.js
```

すると、ブラウザが起動して読み込みを開始します。
![img_002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547099/9c809f9d-dc89-244a-5f5e-349504c961bf.jpeg "TestCafeの実行画面")

テストが実行された後、コンソールに`1 passed`と表示されれば、テスト成功です。

```shell
1 passed (4s)
```

# おわりに

TestCafeではとても簡単にブラウザでの自動テスト環境構築ができました。各種ブラウザ対応というのも嬉しいですね。
ただ、対応言語がJS（TS）しか対応していないので、JSを扱いなれていない人にとっては少しハードルが高いかもしれません。

# 参考
- [TestCafe | Docs](https://testcafe.io/documentation/402635/getting-started)
- [PSYENCE:MEDIA | TestCafe で E2E テストを始めよう #1 - 概要説明 と Hello World](https://tech.recruit-mp.co.jp/front-end/post-20193/)
- [CodeGrid | TestCafe入門  第1回 TestCafeとは](https://www.codegrid.net/articles/2017-testcafe-1/)
k8sでアプリのデプロイ時に使う３個のコントローラーの件

#あらすじ
k8sをさわっていると、いろんな名詞、機能名がでてきて、気を抜くと機能の一部のこといってるのか、概要を表しているのか、もしくは通称で呼んでいて実は同じこといってたりといろいろ混乱する時がある。コントローラーも名前だけ聞くと何かをコントロールしてくれるんだろう、とはわかるけど、何をどうコントロールしてくれるのか、いくつも種類があるのか、どんな感じで使うといいのか、もしくは使えないのか等々わかっていないことが多い。
とりあえず今回は使う頻度の多いアプリデプロイ時に使うコントローラーについてまとめてみようと思います。

#そもそもコントローラとは
k8sの公式サイト(https://kubernetes.io/ja/docs/concepts/architecture/controller/) では
__コントローラー = コントロールループ__
つまり、ずっと動きっぱなしで、常にシステムの状態を監視していて、できる限り理想の状態にいるように調整してくれるものらしい。
(注) 実際の調整を行う時は大抵API Serverへリクエストを投げるとのこと。

#アプリをデプロイするときによく使う３つのコントローラー
・Deployments
・Statefulsets
・Daemonsets
これら以外にもReplicationContollerというのもあり、文字通りReplica Setsをコントロールするものだけど、その後出たDeploymentsの中でReplica Setsの設定もできてしまうので、そちらを使う方が今は主流らしい。


#### ちなみに
DeploymentsコントローラーはReplicaSetsの上層コントローラーで、ReplicaSetsはPodの上層コントローラー。つまりDeploymentsコントローラーだけあればReplicaSetsもPodsの設定も全てできてしまうということ。
#### ちなみに２
ここでとりあげているコントローラーはWorkload Resourcesのメンバーでもあって、上記以外にJobやCronJobも入ります。
参考: https://kubernetes.io/docs/concepts/workloads/controllers/
ちょっとズレるけど全てのresourceをリストアップするコマンド
```$ kubectl api-resources```
#Deployments
- statelessなPodを作成。保存しておきたいデータはmountされたvolumeにいれる。ただし、そのデータは全てのreplica sets間で共有される
- update時はrolling updateといって、先に新規Podが問題なく作られたのを確認した上で古いpodが削除される
- それぞれのpodはhash番号がつけられる
- historyにある以前のstable versionに戻せる<br>
historyを表示　```kubectl rollout history deployment/app```<br>
versionを指定してrollback ```kubectl rollout undo deployment/app --to-revision=2```<br>
参考: https://learnk8s.io/kubernetes-rollbacks

#Statefulsets
- statefulなpodを作成
- replica podは順番に作成され、０から順番に番号がつけられる
- それぞれのPodは自分専用のPersistent Volumeをもつ。(他と共有しない)
- ロールバックができない

#Daemonsets
- 全てのNode上に存在し、例えば監視やログのために使われる
- ロールバックができない
- kube-controller-managerはDaemonsetsの１例
- Taints and Tolerations - NodeがTaintとして設定している内容とPodのもつTolerationの内容が一致したらそのNodeにそのPodをのせることが可能となる(必須ではない)。逆にいうと、あるNodeにのせたくない時はTolerationをそのNodeに合わせないようにする。
参考: https://kubernetes.io/docs/concepts/scheduling-eviction/taint-and-toleration/

#まとめ
コントローラーといっても他にもendpoints controller, namespace controller, and serviceaccounts controller等々(ちなみにこれらはkube-controller-managerの中にデフォルトで入っている)、多数ありそれぞれが担う役割もはっきりしているようなので、今後少しづつまとめながら理解を深めていければと思ってます。
JobとCronJobの違いもどっかでまとめたい。


#参考にさせてもらった資料
Pods, Deployments and Replica Sets: Kubernetes Resources Explained (https://www.cloudsavvyit.com/10107/pods-deployments-and-replica-sets-kubernetes-resources-explained/)
 When to use Deployments vs Daemonsets vs Statefulsets (https://someweb.github.io/devops/deployments-daemonsets-statefulset/)
https://kubernetes.io/docs/concepts/workloads/controllers/replicationcontroller/
2022-01-03 テストベンチからAXI GPIOのS_AXIに書き込みをする


### 動作環境

-  Windows 10 Pro (21H1)
- Vivado 2019.1


### 概要

AXI IICに関してレジスタアクセスで操作をしたい。PS側からレジスタアクセスをしている例はあるが、それをPL側から実施したい。
PL側から実施するためにはAXIの通信を実装することになる。AXIの実装そのものは複雑であるため、簡単にする方法を探していたところ、良い資料を見つけた。

- [シミュレーション用の Master を作成する](https://dora.bk.tsukuba.ac.jp/~takeuchi/?%E9%9B%BB%E6%B0%97%E5%9B%9E%E8%B7%AF%2FHDL%2FVivado%E3%81%A7AXI%E3%83%90%E3%82%B9%E3%82%92%E5%88%A9%E7%94%A8#h72e26ea)
    - 筑波大学 武内修 様

この動作の理解をするために上記の実装をAXI GPIOに対して実施してみた。

### Block Design

記事に従い作成したAXI4_Lite_Master_BFMのIPとAXI GPIOを追加した。

<img width="690" alt="image.png (19.5 kB)" src="https://img.esa.io/uploads/production/attachments/6206/2022/01/03/21741/3706c97f-08ae-4cd4-806f-5279012c5494.png">

Create HDL Wrapperは実施していない。
<img width="449" alt="image.png (17.4 kB)" src="https://img.esa.io/uploads/production/attachments/6206/2022/01/03/21741/ee9e39f4-4912-4b86-a2c7-d8e9b0632be1.png">

Address Editor
<img width="687" alt="image.png (10.9 kB)" src="https://img.esa.io/uploads/production/attachments/6206/2022/01/03/21741/0546b3a7-44e3-446b-b2dc-7705e9d13147.png">


### テストベンチ

記事のテストベンチのうち、以下を変更した。
- デザインの名前がdesign_2ではなくdesign_1である
    - ` design_1 uut (.*);`
- レジスタ0に0x01を書き込む
- レジスタ0に0x00を書き込む


```design_1_test.sv
`timescale 1ns / 1ps

module design_1_test();

  reg aclk = 0;
  reg arstn = 0;

  design_1 uut (.*);

  // detect error
  always @(posedge uut.AXI4_Lite_Master_BFM_0.inst.error)
    $display("AXI4 error @ %t", $time);

  // generate clock
  always #5 aclk <= !aclk;
  
  initial begin
    repeat(10) @(posedge aclk);
    arstn <= 1;
    repeat(10) @(posedge aclk);
    
    uut.AXI4_Lite_Master_BFM_0.inst.write(0, 'h0001);
    repeat(10) @(posedge aclk);
    uut.AXI4_Lite_Master_BFM_0.inst.write(0, 'h0000);
    repeat(10) @(posedge aclk);
    
    repeat(10) @(posedge aclk);
    $stop;
  end
endmodule
```

### Run Simulation

<img width="1468" alt="image.png (20.7 kB)" src="https://img.esa.io/uploads/production/attachments/6206/2022/01/03/21741/c3f1d595-c731-44e2-a085-536215f877f8.png">

0x00と0x01がAXIで書き込まれることを確認できた。


### 留意点: Make Externalしていない

AXI GPIOのGPIOポートをMake Externalしていない。
Make Externalすると、Run Simulation時に以下のエラーになる。

```elaborate.log
...
ERROR: [VRFC 10-2996] 'GPIO_0_tri_i' is not found for implicit .* port connection [C:/coraZ7prj_201016/testing_axi4_lite/testing_axi4_lite.srcs/sim_1/new/design_1_test.sv:8]
ERROR: [XSIM 43-3322] Static elaboration of top level Verilog design unit(s) in library work failed.
```

このため、上記ではGPIOポートをMake Externalしていない。

Note: この問題はいますぐ解決が必要でないため、保留としている。必要になった時に調べる。


### 関連

以下にもサンプルがある。こちらの場合はAR#37425から取得できるaxi_master.vを使っているようだ。

- FPGAプログラミング大全 Xilinx編 第2版 p366
    - 小林優 様
bash周りのデバッグツール

# デバッグ出力
\#!/bin/bash -x

#詳細デバッグ
\#!/bin/bash -vx

#Linter
Linterとしてspellcheckなるものがある
https://www.shellcheck.net/
### 使い方
sudo apt install shellcheck
shellcheck  <スクリプト名>

#番外編1
sedコマンドは--debugオプションでデバッグ表示できる

#番外編2
expectコマンドは-dオプションでデバッグできる
Jupyterlabでvariabeinspectorをインストールできたが、ビルドできない問題の対処

##トラブル
便利な拡張機能variableinspectorをインストールをして、ビルドを試したところエラーの500番が表示され、CUIから'jupyter lab build'をしろと命令された。
しかし、そこでもエラーが出てログを見てみろと言われたがイマイチ分からず...

##対処法
variabeinspectorをバージョン指定せずにインストールすると、バージョン3.0.9をインストールしてしまうので、バージョン3.0.7を指定してインストールしたところうまくいった。

```
jupyter labextension install @lckr/jupyterlab_variableinspector@3.0.7
```

##参考
https://teratail.com/questions/348800
App Store Connectの課金アイテム（非消耗）の通貨の多言語化

# 背景
作成したアプリに対して多言語対応をしていたところ、AppStoreConnectで作成した課金アイテムの通貨のi18nはどうやるのか気になった。
(下記画像の「価格」とか「￥120」のところです)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526994/3b478230-17f0-e474-b677-1c573aa5dd4c.png" width="300" />

# 結論
特に必要なく、課金アイテムを購入する人がApp Storeで設定している地域に応じて、
自動的にその地域の通貨に変換される（と思われる）。

* 端末の言語設定には関係ない模様。
* Sandboxアカウントでテストを行う場合は、各アカウントの「App Storeの国または地域」で地域の変更ができる。
Dockerでdocker: Error response from daemon: OCI runtime create failed:のエラーが出る原因

# 結論
オプションと引数の順番が間違っていることが多い。(引数の後にオプションは書けない)
## 誤

```
docker run -p 8000:8000 mygomi:latest -d
docker: Error response from daemon: OCI runtime create failed: container_linux.go:380: starting container process caused: exec: "-d": executable file not found in $PATH: unknown.
```

## 正

```
docker run -p 8000:8000 -d mygomi:latest
937e4e3a2f488822a6b73281a3592a8835784eba3b8f1dfc316300b997fc6838
```
テスト58

```vb
'SQLを勉強してたらテスト57のやり方をSQLでもできそうということで以下のコードをAccessで作成
'出力結果はテスト57と同じ  ＼＿ヘ(ωﾟ｀*)ｶﾁｬｶﾁｬ

Sub Duplicate_Check()
'---------------------------------------------------
'参照設定
'Microsoft Office 16.0 Access database engine～
'Microsoft ActiveX Data Objects 6.1 Library
'---------------------------------------------------
Dim cn As New ADODB.Connection  'データベース接続用変数
Dim rs As New ADODB.Recordset     'レコードセット用変数
Dim strSQL As String                        'SQL格納用

'DB接続
Set cn = CurrentProject.Connection

'SQL文作成
strSQL = "SELECT * " & _
         "FROM 重複データ AS D " & _
         "WHERE D.価格 = (SELECT MAX(価格) " & _
                         "FROM 重複データ " & _
                         "WHERE 管理コード = D.管理コード);"

'指定のSQLからレコードを取得
rs.Open strSQL, cn, adOpenKeyset, adLockOptimistic

'SQLからのレコード出力
Do Until rs.EOF = True

    Debug.Print rs!No & "," & rs!商品カテゴリコード & "," & rs!商品コード & "," & rs!管理コード & "," & rs!価格
    rs.MoveNext
    
Loop

rs.Close: Set rs = Nothing

cn.Close: Set cn = Nothing


End Sub
etckeeper を Amazon Linux 2 にインストール & 設定する


サーバーの設定ファイル (/etc) の中を git 管理してくれる、etckeeper が便利すぎて仕方ないので、自分が管理しているサーバーは全部入れています。

サーバー admin な人も config ファイルを編集すると、***.conf.20220103 とかコピーファイルを作成している人を見かけますが、etckeeper で git 管理しましょう。

# インストール

## root でログイン

```
sudo su -
```

## epel レポジトリをインストール

```
amazon-linux-extras enable epel
```

## インストール

```
yum install etckeeper
```

あとは、git とほぼ同じです。

## etckeeper を init


```
etckeeper init
```

## 最初のコミットを行う

```
etckeeper commit -m "initial commit"
```

これであとは、1日に1回、自動的に差分をコミットしてくれます。


# 使い方

初期インストールで、1日に1回 daily commit をしてくれるので、基本的に放っておいてOKです。

他の管理者の人が設定を変更しても翌日深夜にコミットしてくれるので、どういう変更をしたのか、その変更前はなんなのかなどがわかります。

yum コマンドにも hook してくれるので、yum コマンド前と後の config の変更も残してくれるので、すごく便利。

基本何もしなくてもサーバーの設定変更履歴を残してくれます！


## 何か git コメントを残しておきたい場合

何か特別な設定変更をして、git の履歴にコメントを残しておきたいのみ、日時自動コミットの前に git commit します。

```
sudo etckeeper commit -m "なんかメッセージ"
```

## tar で etc や .git ディレクトリを保存して DL してみる

僕が一番使っているのがこの手です。

ホームディレクトりに sudo な tar コマンドを打って、`/etc` ディレクトリと `/.*/｀ディレクトリの中を圧縮 & DL し、 SourceTree などの git 閲覧ソフトで確認します。

```
cd
sudo tar -cvzpf etc_$(date +%Y%m%d%H%M%S).tar.gz -C /etc/ ./
# home フォルダにtar ファイルが保存されます。
# 作成した tar をローカルに DL して確認
```


# リモートに push

サーバーにログインするのが面倒な人は **プライベートレポジトリ** にレポジトリを push することも可能です。

サーバーキーなども含まれるため、絶対にプライベートレポジトリにプッシュしましょう。

## root ユーザーの公開鍵を生成

```
sudo su -
ssh-keygen -t rsa -b 4096 -C root@mexample.com
cat cat /root/.ssh/id_rsa.pub
# 公開鍵をコピーして、プライベートレポジトリの SSH 鍵として登録
```

## リモートレポジトリ origin を追加

コンプライアンスの関係で、デフォルトのブランチ名が、`master` から `main` にかわりつつあるので、git のバージョンでどちらになっているかを確認して行いましょう。

プライベートレポジトリ URL は `git@examplecom:/example-git` とします。

```
# origin のリモートレポジトリを追加
git remote add origin main git@examplecom:/example-git
# リモートレポジトリに最初のコミットを追加
git push origin master
```

## etckeeper の config を編集

さきほどは `origin` というリモートレポジトリを追加しました。
違う名前で追加したのなら変えてください。

etckeeper の config の PUSH_REMOTE 設定にリモートの名前を追加することで、etckeeper commit するときに自動的にリモートに push してくれるようになります。

```
vi /etc/etckeeper/etckeeper.conf
```

```
PUSH_REMOTE=""
```

を

```
PUSH_REMOTE="origin"
```

# 失敗しないコツ

## 1. セキュリティに気をつけよう

何度も繰り返しますが、サーバーの設定が入っているので、プライベートレポジトリのみに push しましょう。


## 2. git reset しない

絶対に git reset などはしない。
あくまでも変更履歴を記録するために行います。

間違って git reset しちゃって、SSHD の設定を変更したりしたら大変な目に遭ってしまいます。


## 3. 複数台管理をしない or するんだったらめっちゃ気をつけよう

あまりおすすめしないですが冗長化構成のサーバーの config を記録するのであれば、かなり気をつけましょう。間違えてサーバー署名を書き換えたりするとダメになります。
Tmux 簡単（？）な指定でややこしいLayoutを組むスクリプト

# Tmuxでややこしいレイアウトを組みたい
前回の続きです。
Tmuxで多数のpaneを並べる際、レイアウトを指定できるのですが、基本「一回自分でそのレイアウトを組んで、list-windowsでlayout文字列を拾って使ってくれ」ということになってしまうので、多数の小さいpaneを並べるときはめんどくさい。

ということで、自身の用途に合うスクリプトを作ってみました。

# これでいいんじゃないの？
## tmuxinator
https://github.com/tmuxinator/tmuxinator

レイアウトは上記の方法で拾った文字列を使わないといけないことに変わりはないので、これだけだと足りないです。
（私が知らんだけで、そういう機能が追加されてたり、もともとあったりしたら恥ずかしいですけれど、、）

## xpanes
https://qiita.com/greymd/items/8744d1c4b0b2b3004147

正直、こちらを使わせていただければ大体の用途では耐えられるんだよなぁ、、とは思いつつ、せっかくなので自身の用途の痒いところに手が届くやつを作ってみることにしました。

# つくったもの
https://github.com/nfwprod/panediv-nfw

## やりたかったこと
tmuxで画面を縦に３つに割って、一番左はシェル用に開けとく。
真ん中は、更に１０個に横切りにして、サーバの監視スクリプトを表示しっぱにする。
右は、横切り４つにしてネットワークの疎通監視のスクリプトを。
みたいなレイアウトをホイホイ作りたかったというのがモチベーションです。

以下のコマンドで実施できます。

```
$ panediv '{,[10],[4]}'

```

各ペインで実施するコマンドはあまり美しく入力する方法が思いつかなかったし、「どの位置のPaneに表示するか」を考えながら設定作り込まないと行けないと思うので、そのような場合は -i オプションをつけてtmuxinator形式のymlを吐き出して、そこにコマンド書き足して使う、というようなデザインにしました。

```
$ panediv -i .tmuxinator.yml '{,[10],[4]}'
$ cat .tmuxinator.yml
\# Pane Arrangement
#  0,  1, 11
#  0,  2, 12
#  0,  3, 13
#  0,  4, 14
#  0,  5, 14
#  0,  6, 14
#  0,  7, 14
#  0,  8, 14
#  0,  9, 14
#  0, 10, 14

name: name
root: ~/
windows:
  - panename:
      layout: '42e1,172x90,0,0{56x90,0,0,57x90,57,0[57x8,57,0,57x8,57,9,57x8,57,18,57x8,57,27,57x8,57,36,57x8,57,45,57x8,57,54,57x8,57,63,57x8,57,72,57x9,57,81],57x90,115,0[57x21,115,0,57x22,115,22,57x22,115,45,57x22,115,68]}'
      panes:
        -  #0
        -  #1
        -  #2
        -  #3
        -  #4
        -  #5
        -  #6
        -  #7
        -  #8
        -  #9
        -  #10
        -  #11
        -  #12
        -  #13
        -  #14

```

コメントに各ペインの番号とレイアウトがわかるものをつけてみたので、これ見ながらコマンド打ち込めばまぁそれなりに利用には耐えるかな、と。

コマンドを入れ込んだ書式で実行することもできるようにはしてますが、コマンドが複雑になってくるとエスケープがちゃんと動いているか怪しい作りになってしまっているし、何より入力時に見づらいですので、まぁこんなものかなと。

## 実装
python + plyで書いてます。
tmuxinatorがRubyなわけで、なんだか気持ちが悪い気もしつつですが、自分でtmuxinator相当の機能を実装する根性はありませんので、まぁこんなところかなと。。

# 備考
今回の関連でtmuxについて調べものしてたのですが、多くは2014頃とかの記事ですね。。
だいぶ時代に乗り遅れた感はありますので、流行が別の環境やソフトに移ってないかはちゃんと追いかけないとなと思いつつ。

とりあえずこんなところで。
（カード型）ボードゲームをWEB化してみたシリーズ、いきなりまとめ。

先日、「THE GAME」と言うボードゲームをWEB化してみましたが、それ以外にもいくつかWEB化してみました。

そんなこんなで、いきなり過去に作ったゲームを公開します。

:::note warn
こちらは実在ボードゲームをWEB化していますが、基本的にすでにゲームをお持ち、体験したことがある方向けにUIはシンプルなものになっています。
まずは、実際にゲームを購入、体験いただいてから遊んでいただくとより楽しんでいただけるかと思います。
:::

# THE GAME
こちらは一人から遊べるゲームです。どのカードをどういう順番で出していくか、頭脳を使うゲームとなっております。一番ハマったゲームです。
一人の場合は頭脳ゲーム。複数人の場合はコミュニケーションを取りながら、協力できるゲームです。

## ゲーム導入
https://boku-boardgame.net/the-game

ゲームの遊び方はこちらを御覧ください。


こちらは先日の記事にも掲載しています。

https://qiita.com/yanaitti/items/9260848503809c7a857d

興味がある方は、こちらの記事もお読みください。

## 実際のゲーム
https://yanyan-the-game.herokuapp.com/

---------------------------------------

# 街コロ/街コロプラス
街を作りながら、お金を稼いでいくゲーム。
サイコロの出た目のカードの効果によりお金を稼いで、最後にランドマークをすべて揃えた人の勝ち。
運と、計画的な施設の購入がカギを握る

## ゲーム導入
https://boku-boardgame.net/machikoro

## 実際のゲーム
https://yanyan-machikoro-plus.herokuapp.com/

---------------------------------------

# そっとおやすみ
これは２名から楽しめる、超絶スピーディーなゲームです。
集中力が試され、自分の手持ちを確認しながら、周りの様子も気にしながら、早く上がるのがコツです。

## ゲーム導入
https://saikoro-table.com/2017/04/03/sottooyasumi/

## 実際のゲーム
https://yanyan-sotto-oyasumi.herokuapp.com/

---------------------------------------

# AVALON
こちらはなかなかゲーム化するのが大変だった一品。
２チームに別れて、自分の立場を理解し、いかに柔軟に対応できるかがカギ！！

## ゲーム導入
https://boku-boardgame.net/resistance-avalon

## 実際のゲーム
https://yanyan-avalon.herokuapp.com/

---------------------------------------

# CODE NAME
これも２チームに別れた対戦ゲーム。４人から始められるゲームで、リーダーとメンバーの意思疎通が大事。ジェネレーションギャップやら、生活の違いなどでうまく伝わらないもどかしさなども楽しめます。

## ゲーム導入
https://boku-boardgame.net/codename

## 実際のゲーム
https://yanyan-codename.herokuapp.com/

---------------------------------------

# コヨーテ
このゲームは二人以上で楽しめるゲームです。自分のカードを見ずに、相手のカードのみで状況を把握する。今まで出たカードと残ったカードからの推理など、かなり脳を使います。

## ゲーム導入
https://boku-boardgame.net/coyote

## 実際のゲーム
https://yanyan-coyote.herokuapp.com/

---------------------------------------

# ハゲタカのえじき
これも二人以上で楽しめるゲームです。相手の出すカードを予想しながら、いかに戦略的にカードを出すか、かなりの頭脳ゲームです。

## ゲーム導入
https://boku-boardgame.net/hagetakanoejiki

## 実際のゲーム
https://yanyan-hagetaka.herokuapp.com/

---------------------------------------

# ごきぶりポーカー
これは共闘、裏切り、嘘などが渦巻く、楽しいボードゲームです。
一人の選択で運命が変わる、とても楽しいゲームです。

## ゲーム導入
https://boku-boardgame.net/kakerlakenpoker

## 実際のゲーム
https://yanyan-gokiburi-poker.herokuapp.com/

---------------------------------------

# 犯人は踊る
推理型ゲーム。犯人が周りの人達の手を渡り、様々な能力カードを使って犯人を追い詰めていく！！様々な能力を有効に使って、犯人を捕まえてください。

## ゲーム導入
https://boku-boardgame.net/hanninhaodoru

## 実際のゲーム
https://yanyan-hanninha-odoru.herokuapp.com/

---------------------------------------

# INSIDER
これも推理と、嘘が入り交じる、高度なゲーム。マスターはYES/NOでしか答えられず、またINSIDERはうまく自分の存在を隠しながら回答する必要があり、なかなかのボドゲです。

## ゲーム導入
https://boku-boardgame.net/insider-game

## 実際のゲーム
https://yanyan-insider.herokuapp.com/
【JavaScript】定数で長い文字列(SQL文)を持たせる

## はじめに
筆者はJavaScriptの経験が浅いため、参考程度にご覧いただければと思います。
また、誤記や誤字、アドバイス等ありましたら、コメントお願いします！

## 経緯
Node.jsを使用したAPI作成で「SQL文」を文字列として、const定数に持たせる際、
どのように書けば見やすいのか、候補をまとめてみました。

## １行で書く
短いSQL文なら問題ないが、定数宣言合わせて２行になる場合は、
横スクロールしないと、全体が確認できないので、見づらい

```Javascript
const sqlStr =
  "SELECT param1, param2, param3, param4, param5 FROM test_table WHERE param6 = 'test';";
```

## 加算演算子で文字を連結
JavaScriptを触ったことがない人でも
何となくイメージしやすい形かつ、コードが長くなっても見やすい

```Javascript
const sqlStr =
  "SELECT" +
  " param1," +
  " param2," +
  " param3," +
  " param4," +
  " param5 " +
  "FROM test_table " +
  "WHERE param6 = 'test';";
```

## バックスラッシュ( \\ )で文字を連結
SQL文を持たせる場合、個人的に、これが一番最適
(ただし、下記のように文字の前にインデントが入る場合に限る)

```Javascript
const sqlStr =
  "SELECT\
    param1,\
    param2,\
    param3,\
    param4,\
    param5\
  FROM test_table\
  WHERE param6 = 'test';";
```

SQL文はそれぞれの語句(SELECTやFROMやWHEREなど)の後に必ず空白を挟まなくてはいけないので、空白を入れるのを忘れていた場合、正常に動かない。

:::note alert
下記コードの場合、SQL実行の際に、エラーになる。
param5とFROMに空白が入らない： "...param4, param5FROM test_table..."
:::

```Javascript
const sqlStr =
  "SELECT" +
  " param1," +
  " param2," +
  " param3," +
  " param4," +
  " param5" + // param5の後に空白がない
  "FROM test_table " +
  "WHERE param6 = 'test';";
```

その反面、バックスラッシュ( \\ )でSQL文を表現した場合、インデントの空白も文字列の空白として、判断されるため、空白によるエラーは発生しづらい。

## コメントで頂いた方法（2022/01/03 14:50追記）
### 配列で文字列を連結する
全ての文字列の間に、明示的に空白を入れることができるため、文字列間に必ず空白が入っていないといけない時にはこの方法が一番安心できそう。

```Javascript
const sqlStr = [
  "SELECT",
  " param1,",
  " param2,",
  " param3,",
  " param4,",
  " param5",
  "FROM test_table ",
  "WHERE param6 = 'test';"
].join(" ");
```

### バッククォートで文字列を作る
バッククォート内の文字列は改行を自由に入れることができるため、改行が入っても問題ない（改行で文字列を区切りたい）場合は、バッククォートを使用するのが良さそう。
（SQL文の場合は、改行が入っていても、問題ないため、この方法が◎）

```Javascript
const sqlStr =
  `SELECT
    param1,
    param2,
    param3,
    param4,
    param5
  FROM test_table
  WHERE param6 = 'test';`;
```

## まとめ

- **SQL文を作成する場合：バッククォート内で適宜、改行を入れる**
- 文字列の間に空白を入れたい場合：バックスラッシュ( \\ )を入れる又は配列joinを使用する


## 参考

https://www.oreilly.co.jp/books/9784873119700/
【SAP-C01試験対策】Amazon EMRのBlack Belt を文章でまとめてみた


# はじめに
Amazon EMRを勉強するためにBlack Belt Online Seminerを視聴したので内容をまとめます。

https://www.youtube.com/watch?v=G9KWJtCX2ws

https://docs.aws.amazon.com/ja_jp/emr/latest/ManagementGuide/emr-master-core-task-nodes.html

# 背景
本記事はAWSソリューションアーキテクトプロフェッショナルに合格するために、[Udemyの模擬試験](https://www.udemy.com/course/aws-53225)を解いて分からなかった部分を勉強してまとめるものです。

試験対策用のため、分からない知識を補足したり試験で問われなさそうなところを省略したりしながらまとめています。
なるべくわかりやすい記載を心がけますが、最終目的は自己学習用であるということをご容赦ください。

# Amazon EMR
- クラウドを利用したマネージドなHadoopとApark
- 最新のエコシステムに対応。
- 必要なオープンソースのサービスをEMRにインストールして使用する。
- S3に保存されたデータを分析する。

## 構成図

### ネットワーク
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951272/4939109c-2394-7bea-1639-47e03b91db1a.png)

- プライベートサブネットに配置する場合はS3にはエンドポイントから、外部へはNATゲートウェイを利用する。
- パブリックサブネットの場合はinternet gatesayを利用してアクセスする。


### EMRノード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951272/70238fa0-c2a2-eb2c-ec34-2e835bb9aec7.png)
- マスターノード：クラスターを管理し分散アプリケーションのマスターコンポーネントを実行する
- コアノード：Hadoop Distributed File System (HDFS)の一部としてデータストレージを調整する
- タスクノード：データに対して並列計算タスクを実行するためのパワーを追加するオプション機能。HDFSでデータを保存しない。スポットインスタンスが使われる。

### 他のAWSサービスとの統合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951272/b6ded4e6-018c-b579-fcf8-85d7c43d1c6b.png)

- IAMロールによりKinesis、DynamoDB、Redshift等との読み書きの通信が可能。
- LambdaからEMRクラスタを起動することも可能。


# 用語集
- HDFS：Apache Hadoop向けの分散ファイルシステム。EBSが使用される。
- EMRFS：HDFSと同様にデータを保存するが、S3が使用される。
- Hadoop：分散処理のフレームワーク。大規模処理に使う。
- Spark：分散処理のフレームワーク。メモリでの高速処理に使う。
- Apache Hive：Hadoop上のDWH構築環境。
- S3DistCp:大量のデータをコピーするときに使用するツール。
Sourcetree で毎回パスワードを聞かれるのを回避する Mac

QNAP に Gitea 入れて、MacBook Pro で色々テストしているときに Sorcetree で毎回パスワードを聞かれるのを止められなくてめんどくさかったのを止めるまでのメモ。

https://qiita.com/YKInoMT/items/b9b9c5d8616fd098d60a

# 現象

Sourcetree で push するときに毎回パスワードを聞かれる。

![パスワードを聞かれる](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84947/9b4595fb-2cc9-1815-9193-0578ab243dcf.png)

# 回避策

回避策としては2種類。

キャッシュを使う方法とキーチェーンを使う方法。

キャッシュは設定した時間内なら、再度パスワードを入力する必要がなくなるけど、基本的に都度パスワードを聞かれるので macOS を使っているならキーチェーンで対応するのがセオリーかなと。


# 設定方法

```bash
$ git config --global credential.helper <設定値>
```

設定値に `osxkeychain` もしくは `cache` を指定する。

## キーチェーンを使う

```bash
$ git config --global credential.helper osxkeychain
```

![キーチェーン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84947/4a4e9777-e826-f4f7-55a2-b6c0943b31d3.png)

設定して最初に push しようとしたタイミングでキーチェーンへのアクセスを聞かれるので、「常に許可」を選択すれば OK。

以降は、キーチェーンに保存された情報を使うので聞かれなくなる。


## キャッシュを使う

```bash
$ git config --global credential.helper cache
```

設定後、push の際にパスワードの入力を求められるが、一定時間はパスワードの入力を回避可能。

キャッシュの保持時間はデフォルトで 900秒らしく、保持時間を伸ばす場合には下記のような感じで伸ばす。

```bash
$ git config --global credential.helper 'cache --timeout=3600'
```

が、未確認なのでよく分からん。


## 設定の確認

```bash
$ git config --global credential.helper
```

例えば、`cache` を設定している場合には。

```bash
$ git config --global credential.helper
cache
```

のような感じで設定値が戻ってくる。


## 設定の解除

```bash
$ git config --global --unset credential.helper
```

これで設定が消える。



# 注意点

なぜか設定の一覧を見ると、何も設定していなくても`osxkeychain`　が設定されているように見える。

```bash
$ git config --list
credential.helper=osxkeychain
・
・
・
```

実際、`--global` とか `--local` をつけずに `credential.helper` の設定値を見ると、 `osxkeychain` が返ってくる。



```bash
$ git config credential.helper
osxkeychain
```

が、 `--global` とか `--local` とか `--system` をつけても `osxkeychain` は返ってこない。

どこで設定されてるのか分からないけど、結果としてこの設定を入れていても実際には毎回パスワードを聞かれるので、 `--global` とかで設定しておく。
「form-with」なぜ自動的にcreateアクションが呼ばれるのか

form-withはruby on railsで使える、コードをよりシンプルに書くためのヘルパーメソッドです。
その中のひとつ、form-withのmodelオプションについて勉強していて浮かんだ疑問が、
「指定していないのに、なぜ自動的にcreateアクションが呼ばれるのか。。」
この疑問を解決するために、今回はform-withのmodelオプションの使い方と仕組みについて備忘録としてまとめます。

#form-withには２種類の書き方がある
　まずは前提として、form-withの基本的な２種類の使い方についてまとめます。
1つ目はmodelオプションを使った以下のような書き方です。

```
 <%= form_with model: モデルのインスタンス do |form| %>
  フォーム内容
 <% end %>
```
2つめはurlオプションでパスを指定する方法です

```
 <%= form_with url:　root_path do |form|%>
  フォーム内容
 <%= end%>
```

　さてここで１つ疑問が浮かぶのが、「form_withのmodelオプションではどうやってパスの指定をするの？？」という事です。urlオプションではパスの指定をしていますが、modelオプションではパスの指定をしません。結論は、「モデルのインスタンスの中身でパスが決まる」という事です。具体的には、
①インスタンスに値が入っていない場合は、createアクションが呼ばれ、
②インスタンスに値が入っている場合は、updateアクションが呼ばれます。
順番に見ていきます。
　
#modelオプション→インスタンスに中身がない場合はcreateアクションが呼ばれる
　インスタンスに中身が入っていない場合とは、以下のようにコントローラーのnewアクションで呼び出された時です。

```Rails:hoges_controller
  def new 
    @hoge = Hoge.new
  end
```
この@hogeには何も値が入っていません。
そしてviewのnew.htmlではform_withのmodelオプションで、@hogeに値が入っていないことから、createアクションをパスに指定します。

#modelオプション→インスタンスに中身がある場合はupdateアクションが呼ばれる
 　さて次にインスタンスに中身が入っている場合とは、以下のようにコントローラーのeditアクションで呼び出された時です。
 
```Rails:hoges_controller
 def edit
  @hoge = Hoge.find(params[:id])
 end
```
 この@hogeには値が入っています。
そしてviewのedit.htmlではform_withのmodelオプションで、@hogeに値が入っていることから、updateアクションをパスに指定します。

#まとめ
　以上form_withのmodelオプションについて、「なぜ指定していないのにcreateアクションが呼ばれるのか」という疑問についてまとめました。結論としては、
①インスタンスに値が入っていない場合は、createアクションが呼ばれ
②インスタンスに値が入っている場合は、updateアクションが呼ばれる
ということです。

今回の記事が少しでも誰かのお役に立てたら幸いです。
sshのセキュリティ設定

幾度となく出ているネタの清書。

# 発端

サーバは立てた後にコンソールで作業することは珍しく、特に仮想サーバだとそもそもコンソールがありません（Web上にあるけど）。
大体ネットワーク越しに作業します。
その際、よく使うのはsshですが、LAN内ならいざしれず、外部に公開するサーバまでそのままの状態で使っているのはやはり不安。

ということで、ここでは以下3つのことをしていきます。

1. ROOTログインを不可にする。
1. SSHのポートを22番以外にする。
1. 証明書によりログインさせる。

なお、PC・サーバ共にUbuntu 20.04を使用しています。

# 作業

1と2はsshd_configの設定を変更するので、予め開いておきましょう。

```bash
$ sudo vi /etc/ssh/sshd_config
```

## 1. ROOTログインを不可にする。

`PermitRootLogin`の項目を探してコメントアウトを解除、値を`no`にします。

```text
PermitRootLogin no
```

## 2. SSHのポートを22番以外にする。

使っていないポート番号にします。
ここでは5022番ポートを使います。

```text
#Port 22
Port 5022
```

なおこれをした後はsshで接続する際にポートの指定をしなければいけません。
ポートの指定は-pで行います。

```bash
$ ssh -p 5022 user@yourserver
```

## 3. 証明書によりログインさせる。

接続元のPCで公開鍵と秘密鍵を作り、サーバ上に公開鍵を登録、PC上には秘密鍵を置いておきます。
接続時は自らの持つ秘密鍵で電子署名を作成、サーバでは送られた電子署名を検証し、正当であると判断されると接続を許可されます。
Githubではこの方法でリポジトリをクローンするPCを認証していますよね。

### 鍵の作成

まずは手元のPCで鍵のペアを作ります。

```bash
$ ssh-keygen -t rsa
```

パスフレーズなどを求められますが、特に設定しないならそのままEnterで構いません。
作り終わると.ssh/のディレクトリ以下に`id_rsa`と`id_rsa.pub`の2つができていると思います。
`id_rsa`が秘密鍵で大切に保管するもの、`id_rsa.pub`が公開鍵でサーバに登録するものです。

なお鍵を任意の名前にしたい場合は以下のコマンド。ここでは説明簡略化のためid_rsaで説明します。

```bash
$ ssh-keygen -t rsa -f keyname
```

### 鍵の転送

id_rsa.pubを転送し、登録していきます。

```bash
$ ssh-copy-id -i .ssh/id_rsa.pub user@yourserver -p 5022
/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: ".ssh/id_rsa.pub"
/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
user@yourserver's password:

Number of key(s) added: 1

Now try logging into the machine, with:   "ssh -p '5022' 'user@yourserver'"
and check to make sure that only the key(s) you wanted were added.
```

※sshのポートをすでに変えている場合、-pのオプションを忘れると鍵転送ができません。鍵自体をsshで送ります。

### 接続確認

鍵による認証をしてみます。

```bash
$ ssh -p 5022 -i .ssh/id_rsa user@yourserver
```

パスワードを入力する必要もなく認証できましたでしょうか？

### パスワード認証の無効化

ここまでくればすでにパスワード認証を残しておく必要もないので、サーバ側でパスワード認証を無効化しましょう。
sshd_configで`PasswordAuthentication`を見つけ、値をnoにします。

```text
PasswordAuthentication no
```

## sshd再起動

サーバ側のsshdを再起動します。

```bash
sudo systemctl restart sshd
```

## 接続確認

新しいターミナルを立ち上げて接続確認をします。

```bash
$ ssh -p 5022 user@yourserver
user@yourserver: Permission denied (publickey).
```

パスワード認証でssh接続しようとしたら怒られました。

```bash
$ ssh -p 5022 -i .ssh/id_rsa user@yourserver
```

鍵認証であれば問題なく接続できます。

# 備考

最近は鍵作成にED25519という方式を使うのが広まっているのだそう。
将来的にrsaで鍵を作るのは非推奨になるのだとか。

参考にリンクを貼っておきます。
その場合は以下のようにRSAの代わりにED25519を指定します。

```bash
$ ssh-keygen -t ed25519
```

# 参考

[ssh公開鍵認証設定まとめ](https://qiita.com/ir-yk/items/af8550fea92b5c5f7fca)
[SSH認証に最強の「Ed25519鍵」を使おう](https://linuxfan.info/ssh-ed25519)
[Ssh-copy-id for copying SSH keys to servers](https://www.ssh.com/academy/ssh/copy-id#copy-the-key-to-a-server)
[ssh-rsa，非推奨のお知らせ](https://orumin.blogspot.com/2020/05/ssh-rsa.html)
【Project Euler】Problem 5: 最小公倍数

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 ５．最小公倍数

原文 [Problem 5: Smallest multiple](https://projecteuler.net/problem=5)

**問題の要約：１から20までの数の最小公倍数を求めよ**

比較的簡単な問題ですが、よく調べると2022年1月3日現在Google ColabのPythonのVersionは3.7.12で、mathモジュールに**lcm()**は無いようです。

```Python
! python -V
# Python 3.7.12
```
従ってmath.gcd()を使って作ります。

```Python
import math
def lcm(x, y):
    return (x * y) // math.gcd(x, y)

print(lcm(6, 4))
# 12
```
この**lcm()**を**reduce**に食わせると簡潔に書くことが出来ます。

```Python
from functools import reduce

print(f"Answer : {reduce(lcm, list(range(1,21)))}")
```
[Next.js+Typescript] Swiperで作成したカルーセルのCSSを変更する

Webで実装したことを記事にしました。
Swiperのインストールから簡単なカルーセルを作成するところまでは、
[別記事](https://qiita.com/Hiiisan/items/9561cabb7d125a431df7)にまとめてあります。

この記事では、カルーセルのCSSを変更する方法を書きます。

## カルーセルのCSSを変更する

別記事で作成したカルーセルに、機能追加とページネーションのCSSを変更します。

```typescript
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react' //カルーセルに必要なタグをインポート
import SwiperCore, { Pagination, Autoplay, EffectFade } from 'swiper' //欲しい機能をインポート
import s from './TestCarousel.module.css' //同じディレクトリにCSSを用意

SwiperCore.use([Pagination, Autoplay, EffectFade])

const images = [
  '/test_image.jpg',
  '/test_image2.jpg',
  '/test_image.jpg',
  '/test_image2.jpg',
]

const TestCarousel = () => {
  return (
    <Swiper
      slidesPerView={1}
      pagination={{
        clickable: true,
        bulletClass: `swiper-pagination-bullet ${s.custom_bullet}`, //非アクティブなアイコンのクラスを指定
        bulletActiveClass: `swiper-pagination-bullet-active ${s.custom_bullet_active}`, //アクティブなアイコンのクラスを指定
      }}
      autoplay={{ delay: 1000, disableOnInteraction: true }}
      speed={500}
      effect="fade"
      fadeEffect={{ crossFade: true }}
      loop={true}
    >
      {images.map((src: string, index: number) => {
        return (
          <SwiperSlide key={`${index}`}>
            <Image
              src={src}
              layout="responsive"
              width={640}
              height={400}
              alt="test_image"
            />
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}
export default TestCarousel

```

```scss
// TestCarousel.module.css
.custom_bullet {
  background: white;
  opacity: 0.5;
} 

.custom_bullet_active {
  background: white;
  opacity: 1;
} 
```

![test_carousel.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435645/0b52eb44-63f6-6cf5-b566-ffaa9a905aaf.gif)

自動スライド送りと切り替え時にフェードがかかる様にしました。

ページネーションのアイコン（bullet）のクラスに、デフォルトで付くクラス名と独自のクラス名をつけることで`TestCarousel.module.css`のCSSで上書きすることができます。

これで、ページネーションのアイコンの色を変更することができました。

## 最後に

Swiperは情報が多いのと簡単に独自のカルーセルが作成できるので、とても有用です。
参考にしたサイトは、下に貼ってあります.
間違っているところやよりよい方法をご存知の方がいれば、ご指摘いただけると助かります。

## 参考にしたサイト
https://www.npmjs.com/package/swiper

https://www.webdesignleaves.com/pr/plugins/swiper_js.html
JOYCONハッキング

　正月に任天堂switchのリングフィットアドベンチャーを購入した。アーケードゲームのコントロールを、リングジョイコンで出来ないのか？そんな疑問から、色々調べ始めた。
#結論
　結構、いろんなことが出来るっぽい
#ソースコード
以下の事例を参照にすれば、なんだって出来そうである。

https://github.com/Looking-Glass/JoyconLib

#やりたいこと
先ずはJoystickの代わりにして、昔のアーケードゲームを全身運動でやってみたい。

https://www.retrogames.cc/

#動画
とりあえず、こういうおバカなトライは、海外のオタク君を参考にしたい

https://www.youtube.com/watch?v=diw21NNxifk

#他の例
考えてみたら、やはりSwitchのキーとなっているのは、本体ではなくて、コントローラーなんだろうなと、つくづく思った。

https://note.com/thedesignium/n/n950f9d79ba8f
sタグ と delタグの違い

# 文法的な違い

`
`
パルパブル・コンテントにも属する
コンテントモデルはフレージング・コンテント

`<del>`
トランスペアレント
属性で cite, datetime などの更新情報を付与できる


# どう使い分ける？

`
`
トランスペアレントじゃない ≒ 独自のアピールをする
→取り消した理由をアピールする

`<del>`
特別なアピールはせず単純に変更履歴を表現する

# サンプルソース

`
`

```
<p>アイスティーとレモネード！</p>

１本 500円

<strong>なんと今だけ 400円！</strong>
```

`<del>`

```
<p>アイスティーとレモネード！</p>
<del datetime="2017-08-15">１本 500円！</del>
<ins>１本 540円(税込)！</ins>
```
MRBのありか

C言語のプログラムは以下のようにメモリを利用します。

![CMEM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/df30084d-143a-533b-5dd7-d0b28f5f654b.png)

mrubyコンパイルしたMRBをテキストにしてincludeして実行させる場合には「初期化された変数」に入ります。

またプログラムコードでMRBをopenしてreadする場合は。用意された配列に読み込むのであれば「0クリアされた変数」でmallocされたメモリの場合は「ヒープ」になります。

これはOSありの場合の一般的な構造です。

u-bootなどからプログラムが起動する場合は以下のような構造になります。

![BOOT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/47989baf-e569-42be-3460-a7da4dbed682.png)

まずモジュールのBOOTが起動します。Firmwareにはkernelとrootファイルシステムが含まれ、kernelをRAMに貼り付けて実行を移します。RAMの中のプログラムの構造はだいたい上と同じです。昔はFlash(パラレル)の中のプログラムを直接実行するような方法もありましたが、FlashやRAMや実行バイナリが大きくなりあまりおこなわれなくなりました。

mruby on YABMの場合Firmwareは以下のような構造になります。

![MRUBY.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/4b7989a7-8760-abd1-59ed-7b1f6962d8dc.png)

mruby VMは圧縮されていてBOOTが展開してRAMに貼り付けるタイプと、圧縮無しでそのままRAMに貼り付けるタイプがあります。

MRBは今のところ圧縮はしてありません。最初に実装した蟹さんがSPI Flashだったので、mallocしたところに貼り付けるように実装されています。

蟹さん以外のmruby on YABMはCFI(パラレル)FlashなのでFlashの中のMRBを直接参照する事も可能です。ただmruby on YABMのターゲットはリソースが大きい(RAM 8M,Flash 2Mが最低ライン)のでmallocしたメモリに貼り付けなおしています。

mruby VMは1MByte以下で収まってますし、MRBも100行くらいのスクリプトだと1KByte以下です。

CFI Flash使ってても極端に小さい場合MRBを圧縮する方法も考えられます。その場合もRAMに貼り付けなおしになります。
【Figma】コンポーネントをsvgファイルとして保存する方法

###summary
Figmaの拡張機能[SVG Export](https://ww w.figma.com/community/plugin/814345141907543603/SVG-Export)を利用する

###detail
Figmaでは標準でコンポーネントのエクスポート機能がない。
（エクスポート機能自体はあるが、Figmaファイルとしてすべてがまとめてエクスポートされてしまう。）

（拡張機能をインストール後）対象のコンポーネントを右クリック
→プラグイン
→SVG Export

複数コンポーネントを選択していると、それぞれまとめてダウンロードできる。

###supplement
FlutterでそのままSVGファイルを利用しようとするとエラーになってしまうので
flutter_svgパッケージを利用すること。
参考：[【Flutter】Unable to load asset エラーの対処方法](https://qiita.com/Gekiteniusu_Yogi/items/6e5545de70231ee73ff0)
imgタグのsizesとsrcsetの関係

# imgタグの解釈
imgタグの表示は以下のフローで考えると覚えやすいです。

1. ブラウザが img タグを読み込む
2. `src属性`を探す
    1. src がない → **Bad end !**
3. `srcset属性`を探す
    1. srcset がない → **Normal end**（src の画像を使う）
    2. srcset がある → 記述子を確認
        1. srcset が`ピクセル密度記述子`（x2など）の場合
            1. デバイス情報に基づき画像を決定 → **Good end ①**
        2. srcset が`幅記述子`（400wなど）の場合 → sizes 属性を探す
            1. sizes がない → **Bad end !（srcset の幅記述子には sizes が必要）**
            2. sizes がある → 画像表示幅を算出し srcset から画像を決定 → **Good end ②**


※幅記述子は単に画像の幅をブラウザへ伝えるだけで表示に関しては何も指定していない点に注目。 

# サンプルコード
Good end ①

```
<img
    src="earth_m.jpg"
    srcset="earth_m.jpg, earth_l.jpg 2x"
    alt="">
```
※srcset例 ピクセル密度記述子：2x、幅記述子：400w
※ピクセル密度記述子は省略可能(1xになる)（カンマを含むURL注意）
※ピクセル密度記述子(2x)と幅記述子(400w)は混在不可
※幅記述子をつける場合は省略不可

Good end ②

```
<!-- 30em以下：1カラム、50em：2カラム、それ以上：3カラムになる -->
<img
    sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 60px)"
    srcset="s.jpg 400w, m.jpg 800w, l.jpg 1600w"
    src="s.jpg" alt="">
```
※vw は view port に対する割合(％)
※sizes を指定したら必ずsrcset＋幅記述子をつける
（sizesで指定した幅に合う画像を選択するため）
※sizes の最後の条件無し指定はdefault値

おまけ

```
<!-- view port の100％幅で表示 -->
<img sizes="100vw" src="s.jpg" srcset="s.jpg 450w, m.jpg 900w" alt="">
```

```
<!-- サイズ毎に異なる画像を表示する場合はpictureを使う -->
<picture>
    <source media="(min-width:768px)" srcset="earth.jpg, universe.jpg 2x">
    <source media="(min-width:320px)" srcset="city.jpg">
    <img src="city.jpg" alt="">
</picture>
```
※picture 内の source のルール
    ・media または type が必須
    ・srcset が必須
    ・source の後に img が必要
※video/audio 内の source の場合
    ・source要素に src が必須
    （video/audio要素自体の src は指定できなくなる）
Flutterでの開発体験をよくする小技 〜シェルスクリプトを書こう〜

Flutterでの開発体験をよくする小技を紹介します。

Flutterで開発していてターミナルで打ち込むコマンドがルーチン化してはいませんか？

今回はルーチン化しているコマンドをシェルスクリプトを使って一纏めに実行する方法について紹介します。

Mac端末での紹介となりますこと、ご了承ください。

##課題##

GitHubへのコミット前に、ターミナルで複数コマンドを打ち込む場合があると思います。

CI手法で、コードのフォーマットのチェックを行なっている場合や、
プルリクエストを行う前にできるだけコードを綺麗にしたい場合です。

具体例として、自分がGitHubへのコミット前に行なっている作業を紹介します。
実行するコマンドは以下の３つです。

```zsh
# importのパスを相対パス(もしくは絶対パス)に揃える、import_path_converterの導入が必要
flutter pub run import_path_converter:main

# importのソートを実行する、import_sorterの導入が必要
flutter pub run import_sorter:main

# コード全体のフォーマット
flutter format -l 80 --fix lib
```

これをコミット前に毎回ターミナルに打ち込んで実行していたのですが、
3回もコマンドを打つのって手間ですよね。

シェルスクリプトを使って、一括で実行できるようにしたいと思います。

##解決方法##
シェルスクリプトとは、複数のコマンドをまとめて実行するためのプログラムのことです。

作成、実行の手順は以下の通りです。

以下を記載したファイルを、ファイル名.shとしてフォルダルート(コマンドをターミナルで実行するディレクトリ)に置きます。


```zsh:ファイル名.sh
#!/usr/bin/zsh

#　実行したいコマンドを記載

exit 0
```

``#!/usr/bin/zsh``はコメントではなくお決まりの定型文ですので、削除しないようにしてください。
上の私の例だと、以下のようになります。

```zsh:commit.sh
#!/usr/bin/zsh

flutter pub run import_path_converter:main

flutter pub run import_sorter:main

flutter format -l 80 --fix lib

exit 0
```

あとは、``zsh ファイル名.sh``とターミナルに打ち込んで実行するだけです。

めちゃくちゃ簡単ですよね。
これで、複数コマンドを打ち込んでいた作業が、一回で済むようになりました。

##まとめ##

Flutterでの開発体験をよくする小技として、
ルーチン化しているコマンドをシェルスクリプトを使って一纏めに実行する方法について紹介しました。

自分はGit関係をSorcetreeを使っているため行いませんでしたが、
Git関連のコマンドをシェルスクリプトに組み込んで楽をするのも良いかもしれません。

自分専用にカスタマイズして実行してみてください。

本記事でFlutterの開発体験が良くなれば幸いです。

##参考##

https://pub.dev/packages/import_path_converter

https://pub.dev/packages/import_sorter

https://shellscript.sunone.me/tutorial.html

https://qiita.com/ntkgcj/items/29413979ea2d6b7b38a3
PowerVC での pigz のovaイメージ・エクスポートの時間効果


PowerVC 2.0.2 の機能に pigz level 9 でのファイルの圧縮機能があります。
イメージ・エクスポートを実行してovaファイルを作成する際に機能しています。
設定は、cinder の構成ファイルの"use_fast_compression" True または False で設定されます。

[What's new in version 2.0.2](https://www.ibm.com/docs/en/powervc/2.0.2?topic=powervc-whats-new-in-version-202)

>Backup images OVA tars are created uses pigz for smaller size and fast compression

>The OVA tar for the image is created using "“pigz level 9”" (best) compression for the backup files which ensures a smaller file size and faster compression. By default pigz compression is enabled. If the cinder config option use_fast_compression is set to "“False”", the regular gzip compression is used.


当記事では "use_fast_compression" True と False の違いを確認しました。

----

##### "use_fast_compression" = true の場合の確認

デフォルトでは "use_fast_compression" は True です。

結果：　pigzが有効化されている場合に、AIX 20GB のイメージを ova 化した際は、約 8GB に圧縮され、イメージ・エクスポートは実行から完了まで15分かかりました。

---
確認ログ：

・GUI 上でのイメージの確認
![スクリーンショット 2022-01-03 9.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/b1fb1f60-10f0-b378-96ab-4497617d29ca.png)


ファイルは、バックアップノードの /var/opt/ibm/powervc/image-ovas/ に配置されています。

```
# ls -l /var/opt/ibm/powervc/image-ovas/
total 8062792
-rw-r--r-- 1 cinder cinder 8256296297 Jan  3 09:23 testova1_2.ova
```

9:08 頃からイメージ・エクスポートを始めて、9:23 にovaファイルが作成されました。ova 化に約15分くらいかかった様子です。

-----

##### "use_fast_compression" の変更

PowerVC 本体 とバックアップ・ノード(使用している場合) にそれぞれ cinder 構成ファイルがあるので、修正してサービスを再起動します。



PowerVC 本体のサーバーでは、/etc/cinder/cinder-192_XXX_XX_XX.conf と/etc/cinder/cinder.conf で "use_fast_compression" オプションが使用されています。

```
# cd /etc/cinder/
# grep use_fast_compression  *
cinder-192_XXX_XX_XX.conf:use_fast_compression = True
cinder.conf:use_fast_compression = True
```

PowerVC 本体での cinder.conf ファイルの変更

```
# vi <対象ファイル>

# grep use_fast_compression  *
cinder-192_168_20_36.conf:use_fast_compression = False
cinder.conf:use_fast_compression = False
```

----

バックアップ・ノードでの cinder.conf ファイルの変更

バックアップノードでは、/etc/cinder/cinder.conf で "use_fast_compression" オプションが使用されています。


```
# cd /etc/cinder/
# grep use_fast_compression *
cinder.conf:use_fast_compression = True
```

バックアップノードでの変更

```
# grep use_fast_compression *
cinder.conf:use_fast_compression = False
```


----
PowerVC サーバーでサービス・リスタートを実行します。

```
# powervc-services restart
```

---
##### "use_fast_compression" = False の場合の確認

結果：　pigzが無効の場合、AIX 20GB のイメージを ova 化した際は、約 8GB に圧縮され、イメージ・エクスポートは実行から完了まで30分かかりました。

---
確認ログ：

![スクリーンショット 2022-01-03 10.40.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/d5e2fa7e-9a63-01af-6843-361d12be2112.png)


同じイメージをエクスポートして ova ファイル (testova_false_3.ova) を作成します。

```
# ls -l /var/opt/ibm/powervc/image-ovas/
total 16125036
-rw-r--r-- 1 cinder cinder 8256296297 Jan  3 09:23 testova1_2.ova
-rw-r--r-- 1 cinder cinder 8255734807 Jan  3 10:33 testova_false_3.ova
```

ファイルサイズはあまり違いがありません。

所要時間は、10:04 イメージ・エクスポート開始、10:28頃 ova 作成開始、10:33 ova ファイル作成完了しています。約 30 分かかりました。
pigz オプションを有効化している場合の所要時間は15分程度でしたので、2倍の時間がかかっています。



---
結果：

pigz が有効化されていることでで、イメージ・エクスポートの時間が半分に短縮されていることを確認しました。


以上です。
HTML5の資格を取った時のメモ ③その他範囲、試験対策

2017年に受験した時の記録です。

HTML5の資格を取った時のメモ
1. [HTML](https://qiita.com/krsm/items/99dc39ae95412bc7b0b2)
2. [CSS](https://qiita.com/krsm/items/dad429f65b4a64c54195)
3. [その他範囲、試験対策](https://qiita.com/krsm/items/f98a791de22a0cbfce75) ←この記事
4. [サンプルコード、問題](https://qiita.com/krsm/items/d997a994b3155c8da110)

***

難しい方の本はHTML/CSS以外の項目を一通り読了。
今日は優しい方の本のその他項目を読み、いよいよ試験問題対策を始める。
その前に本の誤りを確認
優しい本の正誤表は無い（サポートサイトはまだ開設されていない。されたらこちらに掲載されはず
[HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版](https://book.mynavi.jp/ec/products/detail/id=75672)

気になったこと
・colgroup 要素の開始タグが省略可能の記述がない？
・ver.1の正誤表にPDFがリンクされている項目は修正済みっぽい
[HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 サポートページ](https://book.mynavi.jp/supportsite/detail/9784839953560.html)

大体2時間でその他項目読了。
一通り解いた後、2時間でHTML20問 答え合わせ＆復習。
油断してたけど結構大変だわこれ。要素同士の関連とか仕様とか確認するのに手間取る。
あれ、一日で4時間しか勉強してない・・

翌日
昨日のHTML練習問題の答え合わせから再開。
HTML以外の練習問題も挑戦
練習問題の正答数
HTML：15/38
CSS：8/24
レスポンシブWEB：5/11
API：2/8 
規格と記述：8/12

もう一周時間をかけた方が良さそうなので受験日をリスケ。
夏休みにだらだらと勉強し続けることになってしまった。落ちた場合は夏休み中に再受験するつもりだったけどルールで5日以内は再受験できないので一発合格しかない。

#### 3-2-2 高解像度画面向け対応

- (**min-resolution:** 2 **dppx**) とは？
→ dppx＝1pxを何ドット平方で描画するかの単位。メディアクエリの仕様。
ただし古いブラウザでは対応していないので-webkit-min-device-pixel-ratioと併用すると良いらしい。
[ピクセルとdpi、ppi、dppxと解像度の話](http://scene-live.com/page.php?page=94)

- img 要素や source 要素の **srcset 属性によるメディアの条件**（密度記述子および幅記述子）はあくまで**解像度別に画像リソースを読み分ける**ためのもの。
- 読み込んだ画像を**どの大きさで表示するかはsizes属性**で改めてメディアクエリを使って指定する。
- width / height には**ピクセル数(整数)**しか指定できない

#### 4-3-5 Service workers
Service worker は実行環境。

#### 4-4-1 XMLHttpRequest
Level2ではクロスドメイン間通信が行える。

#### 5-2-1 XHTML
マイクロデータとRDFa
RDFはXMLでも利用が可能


## 演習問題（HTML）
- HTML要素は省略可能、ただしファイルの先頭ないし末尾にコメントが来る場合は省略不可
- colgroup要素も省略可能（本に記述無し）
- **コメントに -- は含められない**
- head 要素の title 属性は HTML5 では必須ではない
- セクショニングルートの詳細
    - **fieldset** フォーム関連の要素をグループ化する
    - **details** ディスクロージャーウィジェット（上下に開閉するやつ）summary と一緒に使う
    - body セクショニングルートだけどセクションではない
- **media属性**を使うことができる要素は a, area, link, style, source の5種
- **source要素**を使うことができる要素は picture, video, audio の3種
HTML5の資格を取った時のメモ ②CSS

2017年に受験した時の記録です。

HTML5の資格を取った時のメモ
1. [HTML](https://qiita.com/krsm/items/99dc39ae95412bc7b0b2)
2. [CSS](https://qiita.com/krsm/items/dad429f65b4a64c54195) ←この記事
3. [その他範囲、試験対策](https://qiita.com/krsm/items/f98a791de22a0cbfce75)
4. [サンプルコード、問題](https://qiita.com/krsm/items/d997a994b3155c8da110)

***

1日目
kindleでもう少し難しい教科書を買って通勤中に20ページぐらい読む
[HTML教科書 HTML5レベル1](https://www.amazon.co.jp/dp/B00NBHLZO4/)
優しい方の本目標：2-5まで→読了。

2日目
CSSの残りが多かったので朝のうちに30分で2-6テキスト、2-7フォントに目を通す。
通勤中はkindleで難しい方の本。HTMLパートを20ページぐらいと夜食事しながら技術要素のパートを少し読む。
技術要素は大体知ってるので気楽。配点は少ないけど手堅く狙っておきたい。
逆にHTMLやCSSの暗記は辛い。覚えても試験が終われば多分忘れるので基礎理解を重視して進める。
22:40から自宅で優しい本のCSS続き。23:40読了。

## chapter2 CSS（CSS3）
style要素とstyle属性（グローバル属性）
フォントサイズの単位 em（エム）←大文字のMに由来（Mがサイズ一杯の大きさだから）
参考：[emとは](https://akumakario.hatenadiary.org/entry/20080130/1201712487)

#### 2-2-1 セレクタの種類（覚えろ！）
シンプルセレクタ
・タイプセレクタ（`要素名`）
・ユニバーサルセレクタ（`*`）
＋
・`.` クラスセレクタ
・`#` IDセレクタ
・`[`属性セレクタ`]`
・`:` 疑似クラス
・`::` 疑似要素（`::after`とか）

※詳細度が高い順（※桁は繰り上がらない）

x100
・`#` IDセレクタ
x10
・`.` クラスセレクタ
・`[`属性セレクタ`]`
・`:` 疑似クラス
x1
・タイプセレクタ（`要素名`）
・`::` 疑似要素（`::after`とか）

#### 2-2-6 属性セレクタ

・[属性名]
・[属性名="値"]：値全体が一致
・[属性名~="値"]：値のどれかと一致
・[属性名|="値"]：値のハイフンの前が一致（"en"でen-USと一致）
・[属性名^="値"]：値の前方一致
・[属性名$="値"]：値の後方一致
・[属性名*="値"]：値の一部が一致

#### 2-2-10 結合子

・SelA SelB：Aの内部のB
・SelA > SelB：Aの子のB。孫なら「SelA > * > SelB」
・SelA + SelB：Aのすぐ下の弟のB
・SelA ~ SelB：Aより下の弟全員のB

### 2-4 色
→諦める

```
　　　　　　　　　,r '"￣"'''丶,
　　　　　　　 ./.ﾞﾞﾞﾞﾞ 　　.lﾞ~ﾞﾞﾞﾞ ヽ＼
　　　　　　. i´ ri⌒.'li､　.'⌒ヽ　 'i::`i,
　　　　　　.|　′　.ﾞ゜　　.ﾞﾞﾞ″ .:::l::::::!
　　　　　　|,　　　,r'!ヾ･ ヽ,　 .::::.|:::::::i　　あいつはもう消した！
　　　　　　.i,　　./,r──ヽ, :::::::i::::,r'
　　　　　　ﾞヽ､　 .ヾ!ﾞﾞﾞﾞﾞﾞ'''ヽ、_ノ
　　　　　　　　｀'''ﾞi　._____ l /ヽ
　　　　／＼ へ　 ﾞヽ ＿__ノ’_／
　　　　へ､　　 |￣＼ー フ￣ |＼ー
　 ／ ／￣＼　| 　＞|￣|Σ　|　 |
　 ,　┤　　　 |/|＿／￣＼＿| ＼|
　|　　＼＿／　 ヽ
　|　　　＿_(￣　 |
　|　　　＿_） ～ノ
　人　　＿_）　ノ
```
opacity（不透明度）0.0で透明、1.0で不透明

### 2-5 背景
background-imageでレイヤ生成
backgroundで全部盛り（ただし指定なし＝reset）


#### 2-8-9 displayプロパティ
意味わかんない。
clip：刈り込む、切り抜く、一部を見せる

#### 2-9-8 フレキシブルボックスレイアウト
flex「これがフレキシブルボックスレイアウトです」メンタリストか
displayプロパティ周りは後で理解する。

※短時間で詰め込んだので疲れていたようです。