OmniAICreator/Qiita-1.07M huggingface dataset:
FlutterでTextの文字の下が見切れる(Web)

# はじめに
Textをいれた際にiOS/Androidは問題なく表示されますが、Web版だとなぜか字の下が見切れてしまいました。
以下のような感じ
![スクリーンショット 2021-07-01 16.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/2dd99013-68ed-d2ab-3ebc-19cf745a347f.png)

バグ？とは思いますが、一応、修正の仕方を備忘録として....

# 更新履歴
2021.7.1 初回投稿

# 環境
- macOS Big Sur(11.4)
- Flutter (Channel stable, 2.0.6, on macOS 11.4 20F71 darwin-x64, locale
    ja-JP)
- Android toolchain - develop for Android devices (Android SDK version 30.0.3)
- Xcode - develop for iOS and macOS
- Chrome - develop for the web
- Android Studio (version 4.1)
- VS Code (version 1.57.1)

# 参考にしたサイト
- https://teratail.com/questions/290112

# やりたいこと

- Text入力した文字を見切れないようにしたい

# やりかた

1. Textにプロパティheightを設定する。1.0〜2.0ぐらいがいいかと...

```dart
Text(
      '土曜・日曜土曜はバーのみ20時〜23時半まで営業しています。新型コロナウィルス感染拡大により、',
      style: TextStyle(
        fontSize: 16,
        height: 1.2,
      ),
    )   

```

これで直りました。
![スクリーンショット 2021-07-01 16.42.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/5bacd1af-ec0f-cf2c-b152-92c6211488f2.png)


以上
MAMPにLaravelの環境設定


##ターミナルからフォルダーの設定
```
・下記のコマンドを入力し、htdocsを開く
$ cd /Applications/MAMP/htdocs
```

##htdocsにcompoerをインストールする
```
・インストールする
htdocs $ curl -sS https://getcomposer.org/installer | php          

・移動を行う
htdocs $ sudo mv composer.phar /usr/local/bin/composer  

・バージョンの確認
htdocs $ composer -v 
```  

##Laravelをダウンロードする
```
・フォルダー名とLarabvelを作成する
htdocs $ copmoser create-project laravel/laravel --prefer-dist 作成したいフォルダー名

htdocs $ cd 作成したフォルダー名 
   
フォルダー名 $ ls 

・下記で権限の変更を行なって終了です！
フォルダー名 $ chomd -R 777 storage   
フォルダー名 $ chmod -R 777 bootstrap/cache    
```   

##MAMPでDocumentのrootを設定する！
```
Applications ▹ MAMP ▹ htdocs ▹ blog ▹ public
```

**上記の設定を行ったら、下記のLaravelで開ける！！**
![laravel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1061627/c55edcd2-5444-53a8-2920-35fd474eb961.png)
一定時間になった時パソコンでニュースを起動する(メモ)

##自動起動をしようと思った経緯
朝の起床方法で、ニュースを見て覚まそうと思った。
でも、一定時間になったら自動起動するテレビをわざわざ買いたくないからパソコンで代用しようと思ったのが経緯。
(使用パソコンはDell)

##手順

1.パソコンの電源を入れ、Dellのロゴが表示されてるときにF2を数回おしてBIOSを起動する。

2.BIOS内のPower Managementの横にある+を押し、Auto On Timeの項目を起動したい時間に編集する。

3.Exitで出た後、ホーム画面に戻りレジストリエディタを開く。

4.そこで、
HKEY_LOCAL_MACHINE
→ SOFTWARE
→ Microsoft
→ Windows NT
→ CurrentVersion
→ PasswordLess
→ Device
まで行き、DevicePasswordLessBuildVersionの項目を0に編集する。

5.「ファイル名を指定して実行」を開き、netplwizと打ち込み実行する。

6.画面内に「ユーザーがこのコンピューターを使うには、ユーザー名とパスワードの入力が必要」という項目があるので、それのチェックを外し、OKを押す。

7.パスワードを求められるので、打ち込む。

8.「ファイル名を指定して実行」を再度開き、shell:startupと打ち込み実行する。

9.開きたいニュースを配信しているサイトのショートカットをフォルダに格納する。

以上で完成。

##参考サイト
[Windows10 自動ログイン（起動時のパスワード入力を省略）する方法](https://pc-karuma.net/windows10-disable-password-login/#index_id9)
[パソコンを時間指定と曜日指定で自動起動させる。](https://emjnet-pc.net/archives/2019/)
【キャッチアップ】AWS-fargate

### 入門的な動画
https://www.youtube.com/watch?v=2_FxLp9xgmo&t=0s

https://www.youtube.com/watch?v=Bq-DT30hesA

### オフィシャルの動画
https://www.youtube.com/watch?v=rwwOoFBq2AU

https://www.youtube.com/watch?v=tmMLLjQrrRA
【キャッチアップ】AWS-lambda

### API gatewayを使用して、RESTAPIを公開する
API gatewayでAPIを公開する方法はいくつかあるが、プロキシ統合と非プロキシ統合があって、違いはよくわからないが、プロキシ統合のほうが、作成は簡単なようだ。

https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/getting-started-with-lambda-integration.html


### 【参考】入門的な動画
https://www.youtube.com/watch?v=8l0yX9M7Yaw

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

https://www.youtube.com/watch?v=b9VUxLcvfao&list=TLPQMDEwNzIwMjE_ufR8qOP9Ig&index=3
### 【参考】lambdaのかなり詳しい動画
https://www.youtube.com/watch?v=96ku2x1NCaE

https://www.youtube.com/watch?v=rMG18Fr896U&t=701s

https://www.youtube.com/watch?v=AOx5iNmxOC8
Lighthouse対応でimageタグ利用時の注意点

## 前提
レスポンシブ対応してるサイト

最近サイトのLighthouse対応で、画像周りにいくつかの注意点があり、そちらをまとめてみました。

## altがない
```erb
<%= image_tag "sample.png", alt: 'sample image' %>
```

## Defer offscreen images
ファーストビューではない画像はloading lazyをつけて、スクロールして表示したら、画像をロードする

```erb
<%= image_tag "sample.png", alt: 'sample image', loading: 'lazy' %>
```

## Image elements do not have explicit width and height
画像のwidthとheightは設定して、画像がロードされるまで領域を取る

```erb
<%= image_tag "sample.png", alt: 'sample image', loading: 'lazy', width: 100, height: 100 %>
```

## Properly size images
実際の画像サイズは表示してる枠の画像サイズより4KB以上大きい場合は警告される

例えば、表示幅30pxの枠で300x200の画像を表示するとエラーになる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75651/87dfb014-123e-4051-f0ca-81dc8780c5ef.jpeg" width="30">

この場合は表示してる枠と合わせて、幅30pxの画像を用意した方が良い

## Retina対応
解像度が高いデバイス増えており、2xの画像を用意して、srcsetかpicture tagで対応

```erb
<%= image_tag "sample.png", alt: 'sample image', loading: 'lazy', width: 100, height: 100, srcset: 'sample.png 1x, sample@2x.png 2x' %>
```

最近3xのスマホも出てきて、今後3xの画像も対応した方が良いかもしれないです

## PCとスマホで表示する画像のアスペクト比が違う場合
pictureタグはアスペクト比が違う場合は、CLSの問題あり、現状は使えないようです。

画像名  | 幅 | 高さ
-- | -- | --
sample_pc.png | 1200 | 300
sample_sp.png | 300 | 300


この場合はpictureにすると、PCの表示がおかしくなる可能性がある

```erb
<picture>
  <%= tag :source, { media: '(min-width: 769px)', srcset: image_url('sample_pc.png') } %>
  <%= image_tag 'sample_sp.png', width: 300, height: 300 %>
</picture>
```

あまり良い方法が見つからなくて、CSSのmedia queryで切替する

```erb
<%= image_tag 'sample_pc.png', class: 'pc-image', width: 1200, height: 300 %>
<%= image_tag 'sample_sp.png', class: 'sp-image', width: 300, height: 300 %>
```
AWSの勉強してるときよく見る単語集その④

##　はじめに
　[その③](https://qiita.com/pankata79/items/1d099c2f6108764c38c5)の続きです
　今回もざっくりとした説明です。

　それではよろしくお願いします！(｡･ω･)ﾉﾞ
##　トランザクション
　汎用的な考え方。データの分割不可能な処理の単位を指す言葉
一連のデータベースを操作する際に不整合がおきないようにする

　トランザクションは一回の処理で複数のテーブルに変更が入った場合に、「テーブル1には変更が上手くいったがテーブル2には上手くいかなかった」そういう事態を防ぐ時にトランザクションという単位で行う。全部上手くいったときにコミット（完成）、一個でも出来なかったらロールバック（巻き戻し）
データの整合性を保つために行う処理をトランザクション処理という。

トランザクションは独立性があり別のトランザクションには影響を与えない

MySQL トランザクション入門
https://qiita.com/komattio/items/838ea5df68eb076e8099

##　ロールバック
　ロールバックとは**システム障害やデータの損失、破損・トランザクション処理が上手く以下なった場合などが起きた際に以前の正常に稼働していた状態に戻して復旧を試み事**
　ある時点の正常な状態のデータやプログラム、設定などを複製してまとめて保管しておき、障害などが発生した時にこれをシステムに書き戻してその時点の状態に戻す。特にデータベースシステムのトランザクション処理でよく用いられる概念で、障害発生時に処理途上でコミットされていないトランザクションの処理をすべて取り消し、最初の時点に戻すことを意味する。

##　トラフィック
　**通信回線やネットワーク上で送受信される信号やデータのことやその量や密度のこと**をトラフィックということが多い。 
　例えば、インターネットから通信回線を通じて企業内システムにアクセスするにあたり、インターネットからの流量が多く、経路上の通信回線の帯域利用量が増えることを「トラフィックが増大した」などと表現します。
　Webサーバーお分野におけるトラフィックとして、外部からの接続欲求数やアクセス数、サイト内のWebページを移動する閲覧者の流れを指すことがあります。
　
##　リストア
　リストアとは**バックアップされたファイルやデータを使って、元の状態に戻すこと**。誤って削除したデータを復元したり、不調になったシステムを至上な状態に戻すための操作であり、他のシステムにデータを移行する目的でしようすることもある。

##　モジュール
　モジュールとは**機械やシステムの一部を構成するひとまとまりの機能を持った部品で、システム中核部や他の備品へのインターフェースの仕様が明確に定義され、容易に追加や交換ができるようなもののこと**を指す
　
##　デプロイ
　デプロイとは**開発したソフトウェアを実際の運用環境に配置・展開しシステムを利用可能な状態にすること**である
　
##　キュレーション
　情報を選んで集めて整理すること。あうりは収集した情報を特定のテーマに沿って編集し、そこに新たな意味や価値を付与する作業をいみする

##　オーソライザー
　英単語の意味としては「正当と認めること」「公認すること」という意味になる。
　AWSではLambdaオーソライザーという機能があり**Lambda関数を使用してAPIへのアクセスを制御するAPI Gatewayの機能**です
　
　Lambda オーソライザーは、OAuth や SAML などのベアラートークン認可戦略を使用する、または発信者 ID を判断するためにリクエストパラメータを使用するカスタム認証スキームを実装する場合に便利です。

　クライアントが API のメソッドの 1 つにリクエストを送信すると、API Gateway は Lambda オーソライザーを呼び出します。これは発信者 ID を入力として受け取り、IAM ポリシーを出力として返します。

　Lambda オーソライザーには 2 種類あります。

　　・トークンベース の Lambda オーソライザー (TOKEN オーソライザーとも呼ばれる) は、JSON ウェブトークン (JWT) や OAuth トークンなどのベアラートークンで発信者 ID を受け取ります。

　　・リクエストパラメータベースの Lambda オーソライザー (REQUEST オーソライザーとも呼ばれる) は、ヘッダー、クエリ文字列パラメータ、stageVariables、および $context 変数の組み合わせで、発信者 ID を受け取ります。

　WebSocket API では、リクエストパラメータベースのオーソライザーのみがサポートされています。　
詳しくは[API Gateway Lambdaオーソライザーを使用する](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/apigateway-use-lambda-authorizer.html)

##　ベストエフォート
　ベストエフォートとは**「最大限の努力」と訳すことができ、回線業者が提示した最大限通信速度を上限とし、最大限に努力した速度でインターネットに接続すること**を意味します。
　
　ITの分野では通信サービスやコンピュータのホスティングサービスなどでよく用いられる考え方で、平常時に通常想定される使い方をしているときは事前に品質として謳った機能や性能を発揮するが、提供者側の明白な瑕疵に拠らない何らかのトラブルや異状（外部要因による回線の突発的な混雑など）により品質が大幅に下がったり、一時的に利用不能、サービス停止に陥ることがある。

##　サブスクライブ
　サブスクライブとは**利用期間への対価を支払い、サービスを利用すること**。ITの分野では会員制のサービスへの加入や、定額制のコンテンツ配信サービス、定期的に利用券を更新するソフトウェアの販売方式などを指すことが多い。

##　スキーム
　スキームとは**体系的な計画を立てる、計画を伴う枠組みを作る、体系的な構成を練る、基本的な仕組み、基本構想などの意味を持つ英単語**

　単純な工程表や組織図のようなものではなく、関係する人や組織、モノ、システムなどの機能や役割、権利や権限、相互の関連性などを挙げ、また、これらの要素間のお金や情報、指示や手続きのなどの流れを体系立てて記述したものを意味する。複雑な場合は図で表すことも多い。

##　エンベロープ
　エンベロープとは**信号処理などにおける包絡線、プロトコルやデータ形式で制御情報を医術する領域を記述する領域などの意味**で用いられる。
　
##　クレデンシャル
　クレデンシャルとは**ネットワークセキュリティの世界で使用された場合には、IDやパスワードをはじめとする、ユーザー等の認証に用いられる情報の総称**を意味します。
　「クレデンシャル情報」という場合があり、多くのシステムはユーザーIDとパスワードを「クレデンシャル」として使用しています。

##　おわりに
　まだまだ分からない単語がたくさんありますが、その都度調べていきたいと思います。
　(｡･ω･)ﾉﾞバイバイ
LambdaでAmazonのIPを取得してSGアウトバウンドに投入する

#前提
+ AmazonのIP ⇒ [AWS IP アドレスの範囲](https://docs.aws.amazon.com/ja_jp/general/latest/gr/aws-ip-ranges.html)のip-ranges.json
+ 取得したIPはすべてTCP443で投入する
+ Lambda Python3.6で実行


#IPの取得とSGの書き換え
```
  url = 'https://ip-ranges.amazonaws.com/ip-ranges.json'
  req = urllib.request.Request(url)
  with urllib.request.urlopen(req) as res:
    ipranges = json.load(res)
  prefixes = ipranges['prefixes']
  ips = []
  for ip in prefixes:
        if ip["region"] == "取得したいリージョン" and ip["service"] == "取得したいサービス名":
            ips.append(ip["ip_prefix"])
  for add_ip in ips:
        DESC = '自由記載'
        security_group = ec2.SecurityGroup(変更したいSGのID)
        security_group.authorize_egress(
            DryRun=False,
            IpPermissions=[
                {
                    'IpProtocol': 'tcp',
                    'FromPort': 443,
                    'ToPort': 443,
                    'IpRanges': [
                      {
                      'CidrIp': add_ip,
                        'Description': DESC
                      },
                    ]
                }
            ]
        )
```

#その他
+ 上記に加え、既存IPの削除処理と下記IPアドレス範囲の変更通知を組み合わせればIP変更毎に自動的にSG書き換えも可能
[AWS IP アドレスの範囲 - AWS 全般のリファレンス](https://docs.aws.amazon.com/ja_jp/general/latest/gr/aws-ip-ranges.html#subscribe-notifications)

+ 一度に結構な数のIPを投入するので、場合によってはセキュリティグループルール数の上限緩和が必要

以上
UiPath：カスタムアクティビティを作ってみよう！

UiPath：カスタムアクティビティを作ってみよう！

## 皆もすなるQiitaといふものを、儂もしてみむとてするなり。

と言う訳で、こん＊＊は！はなっち！です。

★★★この記事はUiPathブログ発信チャレンジ2021サマー、7/1の記事です。★★★

前回の宣言から、かなり時間が経ってしまいました。そうそう、拙作アクティビティの使い方を語ろうとしていたんでしたよね。

と思っていたのですが、本業がなんとなく宙ぶらりんになってしまって、メリハリがない状態のまま、自宅での終活に突入してしまって。。。

とまぁ、言い訳はもう「いいわ(け)」


「カスタムアクティビティ」を振り返ってみようと思います（唐突に）。

先日行われたUiPath Developer Conference 2021の中に、我らがMVP仲間の末武陽一さんが「UiPath Activity Creator で高度なカスタムアクティビティを作ってみよう」と言うセッションを担当しました！
その内容はとても濃いものでした。確かに高度なアクティビティは作れる！無論.NET言語系の知識は必要ですし、VISUAL STUDIOもインストールされていないといけません。

自分のパソコン、スキルメニューの中に、VISUAL STUDIOはないので、「低度なアクティビティを作る」で勘弁してください(^^♪

アクティビティは、以下の分類になりますね。
１）UiPath社正規提供アクティビティ
２）UiPathベンダー正規提供アクティビティ
３）有志アクティビティ

１）は、言わずもがな、UiPath社が作成し、品質保証し、サポートするアクティビティですね。
２）は、名だたるベンダーさんが製品としてアクティビティを作成し、品質保証し、サポートするアクティビティですね。
３）は、自分も含め、これは便利だよね！皆さん使ってみてください！って感じで、品質は自己責任、サポートも自己責任のアクティビティですね。

２）は、UiPath MarketPlaceに登録されていて、UiPath社の品質チェックを経て公開されているものです。
３）は、自社だけ向けに作成したものもありましょうが、それだけでは勿体ないので、UiPath MarketPlaceに登録申請して、公開してもらえたりもします。

MarketPlaceでの公開には、ソースコードを含め、PUBLISHしたファイル、使用手引書を提出し、UiPath社の品質チェックを受けて、審査と言う道程があります。
それだけ、UiPath社としても、Citizen developerの活性化を目指しているんでしょうね。私もCitizen developerの一員でもあります。

品質チェックはどこまでやられているかどうかは分かりませんが、キッチリとされていて、これはスニペットの方がいいですね！とか、オリジナルアクティビティに、固定的な値を埋め込んだだけのアクティビティってのはダメです。
ですので、そうそう変なアクティビティがMarketPlaceにて公開される事はないと考えます。ですので、安心してお使いください。

さて、カスタムアクティビティを作るうえで重要なのはなんだと思いますか？

私の考えるのは、以下の事です。
・便利そうである事。更に機能明快であれば尚可！
・安定して動く事。更に高速で処理してくれれば尚可！
・エラーに際して、どこまで親切にカヴァーするか
・わかりやすい使用手引書があるか

これを完璧に出来ていればいいんですけどね。


##おわりに
いかがでした？

▼カスタムアクティビティは、プロジェクト内で作成、利用するのはもちろん楽しい事です。
▼カスタムアクティビティを、UiPath MatketPlaceに公開されるようになったら、様々な人の業務改善に役立つかと思うと、身の引き締まる思いでもあります。
▼臆することはありません。是非カスタムアクティビティを作成してみましょう！

是非UiPathでのロボ開発の一助になればと思っています。

ありがとうございました！
【tcpdump】tcpdumpでpcapのパケット数を数える

既存のPCAPファイル内のパケット数を数えるコマンドって意外と見当たらない気がします．
あっても，キャプチャ中であったり，プロトコルごとであったり．
一般的なのは`capinfos`を使ったものでしょうか．

``` sh
$ capinfos -c test1.pcap
File name:           Fri302.pcap
Number of packets:   40

$ capinfos -c test2.pcap
File name:           test2.pcap
Number of packets:   155 k
```

しかし，この方法だとパケット数が大きい時に詳細な数が表示されません．
また，`editcap`をインストールする必要があります．
大した手間ではありませんが，隔離環境とかだと少し面倒かも．


## `tcpdump`を使った方法

``` sh
$ tcpdump -r test1.pcap | wc -l
reading from file test1.pcap, link-type EN10MB (Ethernet)
40
$ tcpdump -r test2.pcap | wc -l
reading from file test2.pcap, link-type EN10MB (Ethernet)
155895
```

こんな感じです．
パケット数が大きい時でも詳細な数を表示してくれます．
ただ，こちらの方が時間はかかると思うので，必要に応じて使い分けていただければと思います．

## ちなみに
`wc`コマンドはいろんな場面で役立ちます．
例えば，ディレクトリ内のファイル数を調べたいとき．

``` sh
$ ls ./*
aaa bbb ccc
$ls ./* | wc -l
3
```

何か数を数えたくなったら思い出してみてください．
Docker image の作り方 (Flask)

こちらのページにあるのと同様のことを行いました。
Flask を Docker で動かします。
[ labs/beginner/chapters/webapps.md ](https://github.com/docker/labs/blob/master/beginner/chapters/webapps.md)
2.2 Docker Images

## 次のファイルを作成

```text
$ tree
.
├── app.py
├── Dockerfile
├── requirements.txt
└── templates
    └── index.html
```

```py:app.py
from flask import Flask, render_template
import random

app = Flask(__name__)

# list of cat images
images = [
	"fmervo000001gsle.jpg",
	"rn2ola000000lk6e.jpg",
	"rn2ola000001gogf.jpg",
	"6fujishigai_s_s.jpg",
	"rn2ola000000lk6r.jpg",
	"5fujikawarakuza_s_s.jpg"
	]

url_base = "https://www.city.fuji.shizuoka.jp/page/gazou/fmervo000001dsro-img/"



@app.route('/')
def index():
	url = url_base + random.choice(images) 
	return render_template('index.html', url=url)

if __name__ == "__main__":
	app.run(host="0.0.0.0")
```

```text:Dockerfile
# our base image
FROM alpine:3.13

# Install python and pip
RUN apk add --update py3-pip

# install Python modules needed by the Python app
COPY requirements.txt /usr/src/app/
RUN pip install --no-cache-dir -r /usr/src/app/requirements.txt

# copy files required for the app to run
COPY app.py /usr/src/app/
COPY templates/index.html /usr/src/app/templates/

# tell the port number the container should expose
EXPOSE 5000

# run the application
CMD ["python3", "/usr/src/app/app.py"]
```

```text:requirements.txt
Flask==2.2.2
```

```html:templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>富士山</title>
</head>
<body>
<div class="container">
<p>富士山 航空写真</p>
<blockquote>
<img src="{{url}}" />
</blockquote>
<p>Courtesy: <a href="https://www.city.fuji.shizuoka.jp/page/gazou/fmervo000001dsro.html">富士市</a></p>
</div>
Jul/2/2021 AM 11:29<br />
</body>
</html>

```

## Flask として問題のないことを確認

```text
$ python app.py 
 * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://192.168.1.5:5000/ (Press CTRL+C to quit)
```

ブラウザーで
http://localhost:5000/
にアクセス

![flask_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/969117dc-9029-50b6-f64e-3f73fbedbcd3.png)



## Docker image の作成

```bash
docker build -t uchida/myfirstapp .
```

```text
$ docker images
REPOSITORY          TAG       IMAGE ID       CREATED          SIZE
uchida/myfirstapp   latest    71f862cd6bd4   34 seconds ago   75MB
alpine              3.13      6dbb9cc54074   2 months ago     5.61MB
```

## 起動

```bash
docker run -p 8888:5000 --name myfirstapp uchida/myfirstapp
```

再起動

```bash
docker run -p 8888:5000 uchida/myfirstapp
```

ブラウザーで
http://localhost:8888/
にアクセス
![docker_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/dcf77fdc-4ed7-349f-9d64-f1082ea0fab4.png)

## 確認したバージョン

```text
$ docker --version
Docker version 20.10.21, build 20.10.21-0ubuntu3
```
.git と package.json が同一ディレクトリにいないプロジェクトで husky をつかう

Git リポジトリ配下に `frontend/` とかってディレクトリがいて、その中に `package.json` がいるような場合、husky を動かすのにハマったのでメモ。少し工夫が必要でした。

例えば、こんな構成。
`.git/` と `package.json` が別のディレクトリにいます。

```bash
root/
|--.git/ <- ここと
|--backend/
|  └──...
└──frontend/
   |--...
   |--package.json <- ここ
   └──...
```

順を追って、動くところまでもっていきましょう。

まずは、husky を追加。husky は v4 系と v5~6 系で設定方法が違うようなので注意！
今回は v5 系で動かします。

```bash
$ cd frontend
$ npm i -D husky@^5
```

v4 までの (?) husky は、npm install でセットアップをよしなにしようとしてくれる反面、新メンバーなどが入った際の環境構築時にうまく動かないことが多いイメージ。

続いて、以下を実行。

```bash
$ npx husky init
```

すると、こんなメッセージが出力されます。

```bash
husky - updated package.json
.git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)
```

「.git can't be found」
`package.json` と同じディレクトリに `.git/` が存在しないためです。
ですが、ここまでは問題ないので作業を続けましょう。

`package.json` を開くと、以下のような script が追加されてます。

```json:packaje.json
{
  ...
  "scripts": {
    "prepare": "husky install"
  },
  ...
}
```

npm install 時に husky install が実行されるようになります。
しかし、このままだと毎回エラーが出てしまうので、以下のように修正します。

```json:packaje.json
{
  ...
  "scripts": {
    "prepare": "cd .. && husky install frontend/.husky"
  },
  ...
}
```

"ルートディレクトリから、必要ファイルは frontend/.husky に吐き出して" husky install を実行させます。

修正したら、改めて npm install します

```bash
$ npm i
```

husky install が成功し、`.husky/` が生成されるので、`pre-commit` ファイルを作成します。

```bash
$ npx husky add .husky/pre-commit "echo \"Hello husky world :D\""
```

ここまでできれば、husky が動いてくれるはずなので、試しに空コミットをしてみます。

```bash
$ git co --allow-empty -m "Empty commit for installation for husky"
Hello husky world :D
[master xxxxxxx] Empty commit for installation for husky
```

動きました。一件落着。

おしまい。
[Rails]ActiveHash変更されないデータをDBに保存せず取り扱う

# はじめに
プログラミング初心者が、学習の過程で学んだことを整理してまとめたものです。

# ActiveHashとは
基本的に変更されないデータを、モデルファイル内に直接記述することで、データベースに保存せずに、データを取り扱えることができるGemのことです。例えば、都道府県やカテゴリーやジャンルなどを指します。

#使用の仕方

1.ActiveHashを用いたいモデルファイルを作成します。
　app/modelsデレクトリの直下にファイルを作成します。　  　〇〇.rb


2.そのモデルファイルで、クラス定義とActiveHash::Baseクラスの継承をします。
```　class モデル名　　< ActiveHash::Base
```
この記載をすることでAvtiveRecordのようなメソッドが使用できるようになります。

3.モデルファイル内にデータの記述します。
　　　　データは配列にハッシュで格納します。　　　
```　self.data = [
  　　　  { id: 1, name: '--' },
   　　　 { id: 2, name: '月曜日'},
  　　　  { id: 3, name: '火曜日'},
  　　　  { id: 4, name: '水曜日'}
  　　　  { id: 5, name: '木曜日'},
 　　　   { id: 6, name: '金曜日'},
　　　    { id: 7, name: '土曜日'},
　　　    { id: 8, name: '日曜日'},
　　　 { id: 9, name: '未定'}
 　　　 ]
 　　　 end
　```　　　
4.このモデルファイルを読込みたい、テーブルにカラムの追加をする。
　　　　テーブルの中で、作成したモデル(ActiveHash)の外部キーとして管理することで、テーブル内のデーターに対してActiveHashのデータが紐付きます。

5.作成したモデルのアソシエーションを設定する。
　　　ActiveHasを用いて、belongs_toを設定するには、読込みたいモデルファイル内で、下記の記述をします。
```extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to :作成したモデル名（Active Hashのほう）
```
6.作成したモデルファイル内でもアソシエーションを設定する。（複数のデータに対して）
　　データ配列の下に記述します。
```include ActiveHash::Associations
has_many :読み込みたい方のモデル名（複数形）
```
7.バリデーションを設定設定します。
ActiveHashではid:1の記載はデフォルトの'--'になっているため、こちらは使用されないようにします。
```validates :テーブルのカラム名, numericality: { other_than: 1 }
```
*カラム名の1は保存できないと記述です。

8.ビューファイルで呼び出します。
form_withの中にcollection_selectを用いて記述します。これによってプルダウン形式で表示することが出来ます。
　```　　<%= form_with model: @インスタンス変数, local: true do |f| %>
　<%= f.text_field :title, class:"title", placeholder:"タイトル" %>
　<%= f.collection_select(:〇〇_id, 〇〇.all, :id, :name, {}, {class:"select"}) %>
```
*（）の中は、(保存されるカラム名,オブジェクトの配列,カラムに保存される項目,選択肢に表示されるカラム名,オプション,HTMLオプション）の順で記述する。


以上でActiveHashを用いる方法です。
基本的なndarrayの作成方法

# はじめに
numpyについて勉強したので、そのアウトプットとして投稿します。
# 目次
- 1次元配列
- 2次元配列
- その他の関数
- 参考記事

# 1次元配列
ここでは1次元配列の作成方法をまとめます。
## np.array()

```python
np.array([-3, 5, 3.5])

a = [i for i in range(10)]
np.array(a)

np.array((1, 2, 3))
```
```
[-3. 5. 3.5]
[0 1 2 3 4 5 6 7 8 9]
[1 2 3]
```
## np.arange(), np.linspace()

```python
np.arange(10)

np.arange(1, 11, 2)

np.linspace(1, 11, 2)

np.linspace(0, 10, 11)
```
```
[0 1 2 3 4 5 6 7 8 9]
[1 3 5 7 9]
[1. 11.]
[0. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.]
```


# 2次元配列
ここでは2次元配列の作成方法をまとめます。
## np.array()

```python
np.array([[-1, 2, 5.5], [-2, 3, 4]])

a = [1, 2, 3]
np.array([a, (4, 5, 6)])
```
```
[[-1. 2. 5.5]
 [-2. 3. 4.]]

[[1 2 3]
 [4 5 6]]
```
要素数が合わないとndarrayを作成できないので注意しましょう。

## np.arange(), np.linspace()
`np.reshape()`を使用

```python
a = np.arange(10)
# [0 1 2 3 4 5 6 7 8 9]
np.reshape(a, (2, 5))

b = np.linspace(0, 10, 6)
# [0. 2. 4. 6. 8. 10.]
np.reshape(b, (3, 2))
```
```
[[0 1 2 3 4]
 [5 6 7 8 9]]

[[0. 2.]
 [4. 6.]
 [8. 10.]]
```

`reshapeメソッド`を使用

```python
a = np.arange(0, 12, 2)
# [0 2 4 6 8 10]
a.reshape((2, 3))

b = np.linspace(1, 100, 12)
# [1. 10. 19. 28. 37. 46. 55. 64. 73. 82. 91. 100.]
b.reshape(3, 4)
```
```
[[0 2 4]
 [6 8 10]]

[[1. 10. 19. 28.]
 [37. 46. 55. 64.]
 [73. 82. 91. 100.]]
```

また`reshape()`は指定する配列の片側を`-1`とすると、自動的に次元数を合わせてくれます。

```python
a = np.array([1, 2, 3, 4, 5, 6])
np.reshape(a, (2, -1))

b = np.linspace(-20, 50, 9)
# [-20. -11.25 -2.5  6.25  15.  23.75  32.5  41.25  50. ]
b.reshape((-1, 3))
```
```
[[1 2 3]
 [4 5 6]]

[[-20. -11.25 -2.5]
 [6.25 15.  23.75]
 [32.5 41.25 50. ]]
```

# その他の関数
`np.zeros()`、`np.ones()`、`np.full()`を使用した配列の作成方法
## np.zeros()

```python
np.zeros(3)
np.zeros((3, 4))
```
```
[0. 0. 0.]

[[0. 0. 0. 0.]
 [0. 0. 0. 0.]
 [0. 0. 0. 0.]]
```


##np.ones()

```python
np.ones(3)
np.ones((2, 5))
```
```
[1. 1. 1.]

[[1. 1. 1. 1. 1.]
 [1. 1. 1. 1. 1.]]
```


##np.full()

```python
np.full(3, 15)
np.full((3, 2), 12.5)
```
```
[15 15 15]

[[12.5 12.5]
 [12.5 12.5]
 [12.5 12.5]]
```

# 参考記事
numpyについては次の記事を参考にしました。

- [NumPy 配列の基礎](https://www.kamishima.net/mlmpyja/nbayes1/ndarray.html)

また、記事作成は次の記事を参考にしました。

- [Qiitaで良い記事を書く技術](https://qiita.com/t12u/items/8c28484100dfd3a6351b)
- [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
【デザイナー向け】GitpodとSvelte+Windiでブログレイアウトを再現してみよう〜②実践編〜（社内勉強会資料）

#Gitpodでサクッとカンタン♪ Svelte＋Windiを試してみよう:relaxed:

こちらは社内勉強会資料です。
前回はこちら　👉  [Gitpodでサクッとカンタン♪ Svelte＋Windiを試してみよう①基礎編](https://qiita.com/naomunaomu/items/1124b09e7b927c0dde16)

## ゴール
ブログレイアウトをWindiで再現してみよう！

こちらのブログレイアウトをサンプルに、Windiで再現していきます。

[Windiのブログテンプレート](https://windicss.org/posts/story.html)を参考に、レスポンシブレイアウトをWindiで再現していきましょう。

![layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/495cf1be-9368-ae76-77ce-202352d7b83d.png)

レイアウト構造を分解すると、おおまかにこのような構成にこうなります。

![layout1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/aa843b2d-e79e-f185-ee7b-4fc313fce100.png)


モバイルファーストでコーディングするため、まずはSPレイアウトをコーデイングし、その後メディアクエリでPCレイアウトのスタイルを上書きしていきましょう。

## 使用テンプレート
こちらのtemplateをし、自分のリポジトリにコピーし、Gitpodで編集しましょう。

https://github.com/miinm030/sveltekit-typescript-windicss-vite
変更するファイルは`src/routes/shop.svelte`です。
こちら編集して進めてください。

同ディレクトリにある`index.svelte`に、今回の完成形のソースコードを置いてあるので、
不安になったら、[こちらのファイル](https://github.com/miinm030/sveltekit-typescript-windicss-vite/blob/main/src/routes/index.svelte
)を参考にしながら進めてみてくださいね:v:


## 実践！やってみよう！
### ①レスポンシブのハンバーガーメニューを実装してみよう
SPではハンバーガーメニュー、PCでは横並びのメニューにしてみましょう。

#### レスポンシブの書き方
今回はMobile Firstで実装してください。
https://windicss.org/utilities/variants.html#raw-media-queries

例えば、「画面サイズが640pxより大きい場合」の実装では、Media Queryで下記のように書きますよね。

```sass
@media (min-width: 640px) {
// 画面サイズが640px以下の場合
 background: white;
}

@media (min-width: 1024px) {
// 画面サイズが1024px以下の場合
 background: red;
}
```
これをWindiに当てはめると、こうなります。

```html
<div class="sm：bg-white　lg:bg-red">
...
</div>
```

セミコロンで変化させたいプロパティを繋いでいきます。簡単ですね:relaxed:
書き方はこちらを参考にしてみてください。

https://windicss.org/features/responsive-design.html

#### ハンバーガーメニュー
あらかじめコンポーネントを用意していあるので、各自スタイルを当てて調整してみてください。

#### hoverスタイル
hoverでスタイルを当てる場合、レスポンシブ同様、ダブルコロンでhover時のスタイルを記載します。

```html
<div class="hover:bg-red sm:hover:bg-green-300">
```
Media Queryと併用する場合は、`sm:`と`hover:`をセミコロンで繋ぎます。
詳しくはこちらへ。

https://windicss.org/utilities/variants.html

### ②カードを増やして、カラムの数を変えてみよう
SPでは２カラム、PCでは4カラムで実装してみましょう。
横並びのレイアウトは、FlexBoxかGridレイアウトを利用します。

#### Flexbox
https://windicss.org/utilities/flexbox.html

#### Grid
https://windicss.org/utilities/grid.html

### ③自由にブログレイアウトを改修してみよう
アニメーションを追加してみたり、コンポーネントを追加し、ダークモードの実装など、色々チャレンジしてみてください！

#### サムネイルの上に文字を載せる

https://windicss.org/utilities/filters.html

#### ダークモードを実装する

ダークモードの切り替えボタンをヘッダーに設置してあるので、
下記のURLを参考に、ダークモード時のスタイルを設定してみてください！

https://windicss.org/features/dark-mode.html

#### アニメーションを実装する
https://windicss.org/utilities/transitions.html

## utility-firstのCSSフレームワークを使った感想について

参加者で感じた感想、メリット・デメリットなど、何でも話してみましょう！

## まとめ

いかがでしたか？
utility-firstのため、はじめはとっつきづらいかもしれませんが、使ってみると便利さが伝わるのではないでしょうか。
「1からコーディングするのは苦手だな・・」という方も、Windiならとっつきやすいと思いますので、
ぜひぜひ今後も使ってみてください:relaxed:

これを機に、色々なCSSやフレームワークを経験し、自分にあうものを見つけていただければ嬉しいです:kissing_closed_eyes:
dataframeをmergeする

```Python
#!/usr/bin/env python3

import pandas as pd

df1 = pd.read_excel('Book1.xlsx', sheet_name=0)
print(df1)

df2 = pd.read_excel('Book2.xlsx', sheet_name=0)
print(df2)

#
# keyをYMD列にして、外部結合する
#
df_new = pd.merge(df1, df2, on="YMD", how='outer')
print(df_new)

#
# 列名を明示的に変える
#
df_new = df_new.rename(columns={'count_x': 'count1', 'count_y': 'count2'})
print(df_new)

#
# 欠損値を全てゼロに置換する
#
df_new = df_new.fillna(0)
print(df_new)
```
```
ykishi@dezembro merge-test % ./merge_test.py 
          YMD  count
0  2021-04-10      4
1  2021-04-11      2
2  2021-04-12      1
3  2021-04-13     10
4  2021-04-14      6
5  2021-04-15      2
6  2021-04-16      2
7  2021-04-17      6
8  2021-04-18      9
9  2021-04-19      8
10 2021-04-20     13
11 2021-04-21     30
12 2021-04-22     24
          YMD  count
0  2021-04-15     55
1  2021-04-16      2
2  2021-04-17      1
3  2021-04-18     10
4  2021-04-19      6
5  2021-04-20      3
6  2021-04-21     55
7  2021-04-22      6
8  2021-04-23      4
9  2021-04-24    555
10 2021-04-25     13
11 2021-04-26      3
12 2021-04-27     10
13 2021-04-28      9
          YMD  count_x  count_y
0  2021-04-10      4.0      NaN
1  2021-04-11      2.0      NaN
2  2021-04-12      1.0      NaN
3  2021-04-13     10.0      NaN
4  2021-04-14      6.0      NaN
5  2021-04-15      2.0     55.0
6  2021-04-16      2.0      2.0
7  2021-04-17      6.0      1.0
8  2021-04-18      9.0     10.0
9  2021-04-19      8.0      6.0
10 2021-04-20     13.0      3.0
11 2021-04-21     30.0     55.0
12 2021-04-22     24.0      6.0
13 2021-04-23      NaN      4.0
14 2021-04-24      NaN    555.0
15 2021-04-25      NaN     13.0
16 2021-04-26      NaN      3.0
17 2021-04-27      NaN     10.0
18 2021-04-28      NaN      9.0
          YMD  count1  count2
0  2021-04-10     4.0     NaN
1  2021-04-11     2.0     NaN
2  2021-04-12     1.0     NaN
3  2021-04-13    10.0     NaN
4  2021-04-14     6.0     NaN
5  2021-04-15     2.0    55.0
6  2021-04-16     2.0     2.0
7  2021-04-17     6.0     1.0
8  2021-04-18     9.0    10.0
9  2021-04-19     8.0     6.0
10 2021-04-20    13.0     3.0
11 2021-04-21    30.0    55.0
12 2021-04-22    24.0     6.0
13 2021-04-23     NaN     4.0
14 2021-04-24     NaN   555.0
15 2021-04-25     NaN    13.0
16 2021-04-26     NaN     3.0
17 2021-04-27     NaN    10.0
18 2021-04-28     NaN     9.0
          YMD  count1  count2
0  2021-04-10     4.0     0.0
1  2021-04-11     2.0     0.0
2  2021-04-12     1.0     0.0
3  2021-04-13    10.0     0.0
4  2021-04-14     6.0     0.0
5  2021-04-15     2.0    55.0
6  2021-04-16     2.0     2.0
7  2021-04-17     6.0     1.0
8  2021-04-18     9.0    10.0
9  2021-04-19     8.0     6.0
10 2021-04-20    13.0     3.0
11 2021-04-21    30.0    55.0
12 2021-04-22    24.0     6.0
13 2021-04-23     0.0     4.0
14 2021-04-24     0.0   555.0
15 2021-04-25     0.0    13.0
16 2021-04-26     0.0     3.0
17 2021-04-27     0.0    10.0
18 2021-04-28     0.0     9.0
ykishi@dezembro merge-test % 
```
Drone CLI 使い方

めったにやらないのにメモらないから忘れる。今回こそメモる。

> Ref
> https://readme.drone.io/quickstart/cli/

## install

```
brew install drone-cli
```


## local 実行

簡単. `.drone.yml` があれば引数不要

```
cd repos/project
drone exec
```

# secret

.drone.yml で from_secret しておく。
空でもいいのでenvが欲しい場合、commandsでexportするのがワタシ的には楽な最近(ES_PWのところ）

```py:.drone.yml
---
kind: pipeline
type: docker
name: default

steps:
    - name: Unit Tests
      image: python:3.9
      environment:
        DB_URI:
          from_secret: DB_URI
      commands:
        - pip install -r requirements.txt
        - export ES_PW=
        - make test
```

drone exec にわたす secret を作っておく

```py:.drone.secret
DB_URI=mysql+pymysql://...
```

#### secretを指定して実行

```
drone exec --secret-file=.drone.secret
```

この option は ↓ に書いてあったけど、気づかないって・・

> https://readme.drone.io/cli/drone-exec/

## step指定
UnitTestsという名前のstepを実施。
```
$ drone exec --include "UnitTests"
```
* depends on してる場合、その前のstepも実行される。



## あるあるerror

### その１
```
$ drone exec
Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
```

docker 起動しましょう



### その２
```
$ drone exec
何も出ない
```

1. docker pullに時間かかってます。imageでかくない？
2. ymlがなんかおかしいみたいです。echoするだけの .drone.yml にして試してみましょう。

```yml
kind: pipeline
type: docker
name: default
   
steps:
- name: test
  image: alpine
  commands:
  - echo hello
  - echo world
```
> https://readme.drone.io/quickstart/cli/


### その３

```rb
[clone:1] fatal: destination path '.' already exists and is not an empty directory.
clone : exit code 128
```

cloneが走ろうとしている。.drone.ymlの中をシンプルにして、cloneしてるstepを除外しよう。depends onも全部消そう。


### その４
```rb
$ drone exec
proto: duplicate proto type registered: PluginSpec
proto: duplicate proto type registered: PluginPrivilege
No stage specified, assuming 'default'
Stage '' not found in build file : resource not found
```

pipelineの名前を指定するか、 `default` にしましょう

```yml
---
kind: pipeline
type: docker
name: default     <---
```

### その5 : Rancher Desktop

docker daemonに繋がらない

```rb
$ sudo drone exec
2024/02/06 10:34:14 Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
```

Rancher Desktop > preferences > application > Administrative Access の check をつけたら動きました
2021年7月1日にてAzureマーケットプレースのLinuxイメージについて

2021年7月1日にて現在のAzureマーケットプレースの最新の主要なディストリビューションイメージSKUとカーネルバージョンのリストです。

ディストロ | イメージのSKU | カーネルバージョン
--- | --- | ---
CentOS 7.9 g2 | OpenLogic:CentOS:7_9-gen2:7.9.2021020401 | 3.10.0-1160.15.2.el7
CentOS 8.3 g2 | OpenLogic:CentOS:8_3-gen2:8.3.2021020401 | 4.18.0-240.10.1.el8_3
Debian 10 g2 | Debian:debian-10:10-gen2:0.20210621.680 | 4.19.0-17-cloud-amd64
Debian 11 g2 | Debian:debian-11-daily:11-gen2:0.20210630.689 | 5.10.0-7-cloud-amd64
Oracle Linux 7.9 g2 | Oracle:Oracle-Linux:79-gen2:7.9.15 | 5.4.17-2102.202.5.el7uek
Oracle Linux 8.1 g2 | Oracle:Oracle-Linux:81-gen2:8.1.11 | 4.18.0-147.8.1.el8_1
RHEL 7.8 g2 | RedHat:RHEL:79-gen2:7.9.2021051702 | 3.10.0-1160.el7
RHEL 8.4 g2 | RedHat:RHEL:84-gen2:8.4.2021053102 | 4.18.0-305.el8
SLES 12 SP5 g2 | SUSE:sles-12-sp5:gen2:2021.06.09 | 4.12.14-16.59-azure
SLES 15 SP3 g2 | SUSE:sles-15-sp3:gen2:2021.06.23 | 5.3.18-38.3-azure
Ubuntu 18.04 g2 | Canonical:UbuntuServer:18_04-lts-gen2:18.04.202106220 | 5.4.0-1051-azure
Ubuntu 20.04 g2 | Canonical:0001-com-ubuntu-server-focal:20_04-lts-gen2:20.04.202106230 | 5.8.0-1036-azure
Franka ネットにあるアプリケーション実装

### 参照

まあまあ
https://www.programmersought.com/article/98845902274/
いまいち
https://petercorke.com/robotics/franka-emika-control-interface-libfranka/
うーん
https://fzi-robot-interface-proposal.readthedocs.io/en/latest/industry/Franka.html

pythonプログラミング
https://pypi.org/project/frankx/
https://usermanual.wiki/Document/PandaProgrammingGuide.1809781175.pdf
https://projects.saifsidhik.page/panda_robot/
https://forum.coppeliarobotics.com/viewtopic.php?t=8288
ScriptAutoRunnerで本番環境サイトに警告メッセージを出す

# やりたいこと
本番環境ドメイン（product.hoge.com）にアクセスしているときだけ、画面の上の方に警告メッセージを出したい。

# やったこと
① 拡張機能「[ScriptAutoRunner](https://chrome.google.com/webstore/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm)」をインストール。

② 設定画面で以下のスクリプトを設定 (コード中の改行は適宜削除して下さい)

```js
function insertWarning() {
	const parts = location.hostname.split(".");
	const subdomain = parts.shift();
	if (subdomain === 'product') {
		warningMessage = document.createElement('div');
		warningMessage.setAttribute('class', 'warningMessage')
		warningMessage.setAttribute('style','background-color: rgba(230, 20, 20, 0.8);
											 color: white;
											 position: fixed;
											 padding: 4px;
											 z-index: 999999;
											 top: 0px; width: 100%;
											 font-size: larger;
											 text-align: center;
											 letter-spacing: 3px;')
		warningMessage.innerHTML = '本番環境';
		document.body.appendChild(warningMessage);
	} else {;
	};
};
insertWarning();
```

③ `Target hostname` に product.hoge.com を設定。
④ プラグボタンをクリックして有効化。

# 設定例
![sample-screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190760/025131b4-a523-7835-8e2a-270102c06786.png)
HTML LSとHTML5の違いについてまとめ

# はじめに

恥ずかしながら、いつのまにかHTML5が廃止扱いになっていたことにここ最近まで気が付かずにいました。
半年も前の話なのに気が付かなかった人は私くらいしかいないかと思いますが、もし私以外に気が付かなかった人がいた場合のために簡単にですがまとめておきたいと思います。

# HTML5と後継である(厳密には後継ではない) HTML Living Standardの違い

HTML5とHTML Living Standard (以下HTML LS) の関係性について話すと非常に長くなるので、今回はこの二つの違いに関してのみ触れます。
関係性に関しては、既にいくつか記事が存在しているのでそちらを参考にしてください。

## 更新頻度に関して

機能的な話ではなくて申し訳ないのですが、ここが一番の違いであるため真っ先に触れます。
W3Cの策定しているHTML5(以下HTML5)とは異なり、WHATWGの策定するHTML LSは頻繁な更新が行われています。
頻繁な更新と聞いて既存機能の削除を心配する人もいるかと思いますが、ユーザーに害を与える場合を除いて基本的に行わない方針であるため、そのあたりは気にしなくてよいかと思います。

HTML5のころは、更新頻度が年単位であったため更新に対してアンテナを張る必要性があまりありませんでしたが、HTML LSはW3Cが策定するHTML5とは異なり更新が頻繁にあるため、最新のものに積極的に追従していきたいと考えている場合は頻繁に更新をチェックする必要があります。

## 削除された内容

削除されたタグ、属性に関しては以下の通りです。
なお、以下のリストから漏れがある可能性も十分にあるので、マイナーな機能を利用している場合は一応調べた方がよいかもしれません。

- タグ
   - `<rb>`
   - `<rtc>`
- 属性
    - `<a>`
        - rev
    - `<area>`
        - hreflang
        - type
    - `<iframe>`
        - allowpaymentrequest
    - `<img>`
        - longdesc
    - `<link>`
        - rev
    - `<object>`
        - typemustmatch
    - `<script>	`
        - charset
    - `<style>`
        - type
    - `<table>`
        - border

## 追加された内容

### `<hgroup>`

HTML5では削除されましたがHTML LSには存在している要素です。
文章セクション内の見出しのグループ付けを行います。

### `<slot>`

shadow dom内にある値に対しshadow domの外側から要素を埋め込む際に使用される要素です。

### `<a>`

#### ping属性

リンク先であるhrefに書かれた先とは違う場所にリクエストを送信できます。

### `<area>`

#### ping属性

同上です。

### `<form>`

#### ref属性

特に具体的には述べられていません。
一応、原文では以下のように記載されています。

> The rel attribute on form elements controls what kinds of links the elements create. The attribute's value must be a unordered set of unique space-separated tokens. 

翻訳サービスの力を借りると以下のように翻訳できます。

> form要素のrel属性は、要素が作成するリンクの種類を制御します。属性の値は、スペースで区切られたユニークなトークンの順不同のセットでなければなりません。

フロント力というかHTML力がないのでこの辺は何を指しているのかわからないです。

### `<img>`

#### deocode属性

対象画像の画像デコーディングヒントです。文面を読む限り私たちがデーコードするためのヒントではなく、ブラウザがデコードする(画像を描画する)ための指定かと思われます。
該当内容は以下の通りです。

キーワード | 状態 | 説明
------|----|---
sync | Sync | 同期してデコード
async | Async | 非同期にデコード
auto | Auto | 指定なし

デフォルトは auto です。

#### loading属性

画像の読み込みタイミング操作に使用します。

キーワード | 状態 | 説明
------|----|---
lazy  | Lazy  | 条件を満たすまで取得を遅延する。
eager  | Eager  | 直ちに取得する 

デフォルトは eager です。

### `<link>`

#### as属性

rel属性でプレリロードを指定されている際、そのコンテンツのタイプを指定するための属性です。

#### color属性

rel属性で"mask-icon"が指定されている際に、サイトのアイコンの色をカスタマイズするために使用。

#### disabled属性

rel="stylesheet" の場合に、そのスタイルシートを読み込むか否かを決定します。trueの際に読み込みません。
trueが指定されているとき、JS等でfalseに変更されたタイミングで読み込みを実行します。

#### imagesizes属性

relでプレリロードが指定され、かつas="image"が指定されている際に指定する必要があります。
サイズなので負の値は許容されません。

#### imagesrcset属性

relでプレリロードが指定され、かつas="image"の際に使用するsourceset属性です。

#### integrity属性

読み込むリソースの改竄検証のための属性です。リソースのハッシュをbase64変換した値が入ります。

### `<script>`

#### integrity属性

スクリプトの整合性検証のための属性です。

#### nomodule

ES2015モジュールに対応するブラウザで、このスクリプトを実行するか否かを示します。
つまり、古いブラウザーのための機能です。

#### referrerpolicy属性

スクリプトの読み込み時、もしくはスクリプトのリソース読み込み時に送信するリファラを示します。
デフォルトはno-referrer-when-downgradeです。

### `<video>`

#### playsinline属性

動画を要素の再生領域内で再生するか否かを指定する属性です。



## おわりに

以上です。おそらく抜け等もある気がしますし、結局は随時更新されるので詳しく知りたい方は公式のドキュメントを確認するべきかと思います。
個人的には、セキュリティ周りとか、今どきあると嬉しい機能とかが追加されている印象を受けるので、今までの更新に年単位掛かっていた昔のHTML5よりかはよさげな感じがします。今後の発展が楽しみです。
Windowsのnet timeコマンドで時刻同期する方法

#Windowsのnet timeコマンドで時刻同期する方法

時刻同期させたいクライアントPCをPC01
時刻同期サーバーをPC00とします。

```batchfile:PC01_timeset.bat
@echo off
:PC00へ時刻同期
set SERVER=PC00
set USER=user01
set PASS=password

net use \\%SERVER% /user:%USER% %PASS%
net use \\%SERVER% /delete"
net time \\%SERVER% /set /y 

exit 0
```

#エラーが出てバッチファイルが実行出来ない場合

システム エラー xxxx が発生しました。
アクセスが拒否されました。

と表示され、バッチファイルが実行出来ない場合があります。

その場合、バッチファイルを選択して右クリックで表示されるコンテキストメニューから「管理者権限で実行」で実行することが出来ます。


#外部から実行したい場合

手動での実行ではなく、別アプリから実行した場合などは、予めバッチファイルのショートカットを作成します。
ショートカットを選択し、右クリックで表示されるコンテキストメニューから「プロパティ」⇒「ショートカット」タブの「詳細設定」ボタンをクリックします。
詳細プロパティのダイアログが開いたら「管理者として実行」にチェックを入れて「OK」ボタン⇒ショートカットのプロパティも「OK」ボタンで閉じます。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1667007/8faa7d94-5770-e1c3-0638-79145414c16d.png)

このショートカットから起動するようにすると、エラーなく実行することが出来るようになります。
Rubocop

Rubocopを使う機会があったので、備忘録。

### rubocopを導入する
```ruby:Gemfile
group :development do
  gem 'rubocop', require: false
  gem 'rubocop-performance'
  gem 'rubocop-rails'
end
```
に追記をして

```:ターミナル
bundile install
```
.rubocop.ymlを設定
１か２のどちらかで。

1. ```touch .rubocop.yml```でファイルを作成し、https://github.com/rails/rails/blob/main/.rubocop.yml 
からファイルをコピーする。
2. ```rubocop --auto-gen-config```を実行する。

自動修正

```
bundle exec rubocop --auto-correct
```

### rubocop_airbnbを設定する。
```ruby:Gemfile
group :development do
    gem 'rubocop-airbnb'
```
``touch .rubocop_airbnb.yml ``で.rubocop_airbnb.yml を作成し、

```yml:.rubocop_airbnb.yml 
require:
  - rubocop-airbnb
```
```yml:.rubocop.yml
inherit_from:
  - .rubocop_airbnb.yml
```
で``bundle install``

```:ターミナル
rubocop --require rubocop-airbnb
```
で実行だけど。

競合した！！

```:ターミナル
Bundler could not find compatible versions for gem "rubocop":
potepanec_1  |   In snapshot (Gemfile.lock):
potepanec_1  |     rubocop (= 1.13.0)
potepanec_1  | 
potepanec_1  |   In Gemfile:
potepanec_1  |     rubocop-airbnb was resolved to 1.0.0, which depends on
potepanec_1  |       rubocop (= 0.52.1)
potepanec_1  | 
potepanec_1  |     rubocop-packaging was resolved to 0.5.1, which depends on
potepanec_1  |       rubocop (< 2.0, >= 0.89)
```

rubocop-packageingとrubocop-airbnbで使うrubocopのバージョンが違うらしい。

今回はrubocop-airbnbを使いたいから、競合しないようにコメントアウトしました。

```ruby:Gemfile
group :development do
   gem 'rubocop', require: false
#  gem 'rubocop-performance'
#  gem 'rubocop-rails'
end
```

### .rubocop.ymlファイルに設定する
rubocopの設定を行う。

```yml:.rubocop.yml
inherit_from:
  - .rubocop_airbnb.yml

#以下にはrubocopで検証したくないフォルダを指定する
AllCops:
  Exclude:
    - 'db/**/*'
    - 'bin/*'
    - 'config/**/*'
    - 'lib/**/*'
    - 'vendor/**/*'

# 文字制限の解除
Metrics/LineLength:
  Enabled: false
```

### rubocop-airbnbを実行
実行コマンド

```:ターミナル
bundle exec rubocop --require rubocop-airbnb

bundle exec rubocop --require rubocop-airbnb -a #自動修正
```



## 参考資料
### rubocop
[Rubocopをインストールして、Rails本家の設定を使う方法](https://k-koh.hatenablog.com/entry/2019/11/18/231410)
[Railsの品質を上げるRuboCopとは？インストールや使い方を紹介！](https://kitsune.blog/rails-rubocop)
[Rubocopを使ってRailsコードをチェックしてみる](https://sakanasoft.net/rubocop/)
[Rubocopチートシート](https://qiita.com/tanish-kr/items/abb881c098b3df3f9871)
[rubocop-airbnb](https://github.com/airbnb/ruby/tree/master/rubocop-airbnb)
[rubocop−airbnbを使うにあたって](https://qiita.com/harukikaneko/items/3a1b27cfd3ccb896b18c)
作業ログ｜Tポイントカードをつくって、ポイントは貯めたいが情報提供は停止したいという願いは叶えられるのだろうか？

## はじめに（この記事の背景）

ついにTポイントカードをつくった。

- Tポイントは貯めたい
- 情報提供を中止したい
- Yahoo! Japan IDは作りたくない

ということができるのか？　エンジニア魂を発揮して実験した。

個人情報を売ってささやかなポイントを大企業から恵んでもらう人生を選ぶのか？
ポイントだけもらう小狡い人生を選べるのか？

## 背景の補足

[個人情報提供の停止 手続きガイド](https://tsite.jp/r/ccc/customer/optout.html)から、[Tカード番号での提供先への個人情報提供の停止](https://tsite.jp/accounts/optout2/index.pl)に遷移すれば、停止手続きはできる。

![SS 2021-07-01 13.19.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/321d0b45-efda-c33f-0637-f81b86f78939.png)


ところが、

>※TポイントやTSUTAYAレンタルなどサービスのご提供に必須の情報提供の停止をご希望される場合は、そのサービスも使えなくなりますが、お手続きについてはTカードサポートセンターまでお申し出ください。

>※個人情報提供の再開は届出書をお送りいただくかTサイト[Tポイント/Tカード]にログインし、お手続きいただく必要があります。

という脅し文句😳があるんだなあ。

信じられるかどうかは別として、
[Tポイントカードでの個人情報の第三者提供とは｜弁護士が解説](https://best-legal.jp/t-point-card-personal-information-third-party-provided-12684)
（更新日2021-06-29）によると

>「個人情報の第三者提供を停止すると、これまで使えていたサービスが急に使えなくなったりしない？」と心配な方も多いかと思いますが、停止手続きを行ってもポイントサービスやＴＳＵＴＡＹＡでのレンタルは今までどおり利用することができます。  
>クレジットカードを兼ねている場合なども含めて、Ｔポイントカードに元から搭載されている機能自体は引き続き使用することができますので、どうぞご安心ください。

と書いてはある。

何が信じられるのかわからない……こういうときこそ、エンジニア魂を発揮して、単体テスト〜結合テストだ！🙄

## 実験の手順

1. ひとつ外してみる
2. 全部外してみる
3. 「今後も停止」を指示してみる

### 1.ひとつ外してみる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/b4b8a0d2-c13f-e977-f05b-549488c971b8.png" width=60%>

とひとつだけチェックはずして、「設定を保存」ボタンを押すと

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/69d3cc4b-9c33-1d78-2ada-899d2e5c9bce.png" width=60%>

なるほど、[web「Tカード番号での提供先への個人情報提供の停止」](https://tsite.jp/accounts/optout2/index.pl)では、
`提供→停止`の操作はできるけど、`停止→提供`はできない仕様なわけね。
謎仕様だけど、そうなんだから仕方ない。

### 2.全部外してみる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/f9863251-654c-4362-efb9-dc53392192d4.png" width=80%>

「すべてのチェックをはずす」ボタンを押して、「設定を保存」ボタンを押すと

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/4fa56b5a-0449-e63c-2ea5-e7793f2b21a8.png" width=80%>

全部停止済みになった。

なお、「今後〜停止する」はチェックを外さない。

ON/OFFの意味合いがよくわからないけど、結果はこうなっている（チェックを外す→今後もすべて停止）。わざとわかりにくくしているのか、エンジニアの腕がいまいちなのか不明だけど、そういう仕様なんだから仕方ない。

これで、

- いまのところ、情報提供は停止された
- 今後追加される情報提供先については、また停止作業をしなければならない
- 情報提供の復活には
    - Yahoo!JapanIDをつくってTサイトで手続き
    - または、届出書を郵便で提出
- Tポイントがつくかはまだわからない
    - ポイントの確認方法はまだわからない（そこからか😳）

### 3.「今後も停止」を指示してみる

しばらく様子を見てから（Tポイントがついていることを確認してから）やってみようとおもいます。
ログイン状態のユーザー・ログアウトユーザーに違うリンク先を見せる条件分岐

#はじめに

↓ログイン状態のユーザーにはこの画面が見れるようにします
![スクリーンショット 2021-06-30 11.53.18（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/04b27e71-445e-7399-7ab5-d214b4d7657b.png)

↓ログアウト状態のユーザーにはこの画面が見れるようにします

![スクリーンショット 2021-06-30 11.53.27（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/27f9defd-bfc5-2415-2fd6-d1d04bcb2ecf.png)

こうする理由としてはログアウトユーザーでも投稿ができてしまう事やログアウト状態のユーザーには新規登録かログインをして欲しいからです。
(ログインしてない状態でも、「投稿」ボタンの遷移先であるURLを直接入力すると、新規投稿ページにアクセスできてしまうのでそこはコントローラーアクションで設定します)

# user_signed_in?メソッド

Gemのdeviseを導入しているため、使用できるメソッドです。

ログインしているかどうかの判定を行います。

ユーザーがログインしていればtrueを、ログアウト状態であればfalseを返します。

```.rb
# ログイン状態のユーザー
user_signed_in?
#=> true

# ログアウト状態のユーザー
user_signed_in?
#=> false
```

このメソッドを**条件分岐（if）**と組み合わせると最初の画像と同じようになります。

```.html.erb
<% if user_signed_in? %>
　 # ログイン状態時の処理
 <% else %>
 # ログアウト状態時の処理
<% end %>
```

```
 <% if user_signed_in? %>
    <li><%= link_to current_user.nickname, edit_user_registration_path, class: "" %></li>
    <li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "" %></li> 
    <%= link_to(new_review_path, class: '') do %>
       <span class='post-btn-text'>投稿</span>
       <i class="far fa-paper-plane"></i>
    <% end %>
   <% else %>
    <li><%= link_to 'ログイン', new_user_session_path, class: "" %></li>
    <li><%= link_to '新規登録', new_user_registration_path, class: "" %></li>
<% end %>
```
WindowsにUbuntu18.04をインストール（デュアルブート）

Windows環境にUbuntuをインストールしデュアルブートできるようにする、といった記事は多いので、大まかな手順は割愛します。
参考にしたサイトに載せているリンク踏んでいただけると解決すると思います。
これは、「やり方」とかではなくあくまで記録みたいなものです。

#0. バックアップを取る

もしもうWindows使わないよって人がいればまあいいかもですが、どこかの操作をミスるとデータが吹っ飛ぶ可能性もあるので、バックアップはとっておいた方が良いです。


#1. パーティション操作
これをWindows上でするのかインストール中にするのか意見が分かれるところですが、私はWindows上でやっておきました。というか参考にした記事がそうしていたので則ったみたいな感じです。
Windowsマーク横の検索欄に「ハードディスク　パーティションの作成とフォーマット」と入れて開き、右クリック→ボリュームの縮小、と進んでいきます。Ubuntuを動かすのに十分なスペースだけフリースペースを作ったら終了です。


#2. Windows上での操作
これをやっておかないとなんかUbuntuでインターネットに繋がらなくなるなど不具合が起きる可能性があるので（実際起きました）、やっておきましょう。
Windowsマークもしくは右下通知バーから歯車アイコンで設定を開きます。
システム→電源とスリープ→電源の追加設定と進み、電源ボタンの動作を選択する→高速スタートアップを有効にするのチェックを外します。
詳細はここに書いてあります。

https://qiita.com/waewae96/items/7572934039871b799d63

#3. live USBの作成
Rufusを使ってlive USBを作成しました。詳細は参考にしたサイトに載っているので省きます。

#4. USBをブートしてインストールする
F2とかF12とか（機種によって違う）を起動時に連打するとUEFIが開き、「Install Ubuntu」が選択できるようになるので、選択します。
するとインストール手順が出てくるのでそれに則ってインストールします。

## ここで躓いた

途中でInstallation typeという画面が出るのですが、通常であれば「Windowsが入ってるみたいだけど、それとは別としてUbuntuをインストールする？」みたいな表示が出てきます。
しかし、私は「他のOSはないみたいなんだけど、このままインストールしちゃってよい？」と出てきてしまいました...
（正確には「this computer currently has no detected operating systems.」と出てきた）
で、？？？となったのですが

##解決策：Something elseを選択すればオッケー

この場合、「Somthing else（もしくはそれに準じた日本語）」を選択し、先程Windowsで作成したfree spaceにRoot、Home、Swap、EFI system partitionの4つを割り当てればOKです。
後に載せるサイトにはEFIについての記述はないのですが、1MBくらいを割り当ててあげれば大丈夫なようです。

で、あとはそのままインストールしてしまえばオッケー！お疲れ様でした！

#参考にしたサイト

https://itsfoss.com/install-ubuntu-1404-dual-boot-mode-windows-8-81-uefi/

ほぼここの受け売りなので、あまり詳細は書いていませんが、このサイトに則ってやればインストールできると思います！

EFIについてはこっち↓

https://askubuntu.com/questions/1144552/dual-boot-no-efi-system-partition-was-found
FizzBuzz問題〜初心者バージョン

#1. 課題
FizzBuzz問題
1～30までの数字に対し、
数字が3の倍数のとき: Fizz
数字が5の倍数のとき: Buzz
数字が15の倍数のとき: FizzBuzz
上記以外の場合: 数字
と表示

```app.js
for(let i = 1; i < 31; i++) {
    if (i % 15 == 0) { //数字が15の倍数のとき
        console.log(`FizzBuzz`); //FizzBuzz表示
    } else if (i % 3 == 5) { //数字が5の倍数のとき
        console.log(`Buzz`); //Buzz表示
    } else if (i % 3 == 0) { 数字が3の倍数のとき
        console.log(`Fizz`); //Fizz表示
    } else {
        console.log(i); //数字をそのまま表示
    }
}
```

#2.結果
```terminal
tomoko@MB FizzBuzz % node app.js
1
2
Fizz
4
5
Fizz
7
8
Fizz
10
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
20
Fizz
22
23
Fizz
25
26
Fizz
28
29
FizzBuzz
```


#３.もっとスマートな書き方をたくさん見つけた
（後日）
Python 3 エンジニア認定データ分析試験、Python 3 エンジニア認定基礎試験、統計検定2級同時合格！

2021年6月19日、Python 3 エンジニア認定データ分析試験およびPython 3 エンジニア認定基礎試験、統計検定2級に合格しました。1日で3つの試験を合格しました。センター試験のような緊張感でした。2ヶ月で3つ同時に合格した勉強方法を振り返ります。
基礎試験 https://www.pythonic-exam.com/exam/basic
データ分析試験　https://www.pythonic-exam.com/exam/analyist
今なら受験の宣言で書籍がもらえます。https://www.pythonic-exam.com/archives/news/555camp

自分のスペック
・国立大学理系修士卒
・博士課程は金銭的に2年で退学
・エンジニア職ではなく、プログラミングもほぼ初めて

1.準備
2021年4月より職業柄キカガクのメディカルAI学会公認資格にまずチャレンジしました。毎日4時間ほど手を動かし、pythonを打ち込みました。
https://cbt-medical-ai.kikagaku.co.jp/　
5月中旬には資格認定してもらえました。
脱ブラックボックスコースと、メディカルAI基礎コースがありますが、脱ブラックボックスコースだけで十分です。この過程で、基本的な数学の知識、なんとなくpythonの書き方、google cholaboratoryの使い方を少しずつ覚えられるので、これをやりながら必要に応じてYouTubeなどの解説動画を適当に探して読みました。

2.Pythonエンジニア認定基礎試験
こちらは基本的な構文の勉強が必要になるので、YouTubeで勉強しました。いまにゅさんのチャンネルです。
https://www.youtube.com/channel/UC0xRMqPOyRNPTaL6BxhbCnQ
模擬試験はDIVE INTO EXAMを何度もといて、問題とその答えの理由を納得行くまで覚えました。ネット上に解説しているページはたくさんありました。
https://exam.diveintocode.jp/exam
もともとの参考図書のPythonチュートリアルはネット上に落ちているので買う必要はないです。
https://docs.python.org/ja/3/tutorial/
これよりも、YouTubeの解説の動画を写経し、DIVE INTO EXAMの内容を暗記するほうが大切です。模試はプール問題からランダムに出題なので、見たことある、ってなってきますが、ちゃんと理論を理解していけば良いと思います。10周くらいしましたし、試験直前も何度も解いていました。
試験自体は60分ですが、20分くらいでとき終わりました。なめてかかったので落ちそうでしたが無事に受かりました。
![1624166264797.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697199/35bbb968-30cb-fc20-25a9-4ab469d35643.jpeg)


2.Python 3 エンジニア認定データ分析試験
こちらはちゃんと参考書を写経しました。Pythonによるあたらしいデータ分析の教科書
https://www.amazon.co.jp/dp/4798158348/


普段仕事で使うのはnumpyとscikit learnなので、PandasやMatplotlibにはなれていませんでした。写経をひととおりしました。
こちらはDIVE INTO EXAMよりも、まずPRIME STUDYの第1回模擬試験の解説をちゃんと理解することが大切です。動画を3周しました。https://study.prime-strategy.co.jp/coverage/py3an1-01/
そして、余力があったらDIVE INTO EXAMをやりました。
こちらも本番は60分ですが、30分ほどで終わりました。
出ない範囲は勉強せず、とにかく4つのモジュールの使い方をちゃんと暗記することが近道です。数学的なことは高校の範囲内なのでかんたんだと思いました。
![1624166266613.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697199/52c58fa6-696a-2c14-f3b8-fb224f2d2844.jpeg)



3.統計検定2級
これが最も腰を据えてちゃんと勉強したものです。高校の数学のごとく、ちゃんと勉強する必要があります。
まず統計Webをちゃんと理解するところから始まります。紙と鉛筆をもってきちんと計算していきます。電卓も使って電卓を普段使っていない方は操作になれたほうが良いと思います。
https://bellcurve.jp/statistics/course/

次に、問題集直近2年分を購入し、まず1年分解いてみると、あー普通の数学の問題なんだなー、とわかります。
何が苦手かを把握して、再度統計Webを読みます。

そして、問題集を2周しました。もちろん、高校の時のようにわからなかった問題にチェックを付けて、その問題は何度も見直せるようにしました。
また、暗記でとく部分は、チートシートがネット上に落ちているのでそれを用いました。

結局これが最も時間がかかり、1日3時間、3週間位勉強しています。100時間弱は必要と思います。
本番のCBTは、紙の試験のように誘導はなく、1問1答形式なので、急がなくてはなりません。紙の試験と違って時間がたりませんので、計算量が多そうなものは飛ばしたほうがいいです。紙の問題のつもりでCBTの望むと痛い目にあいます。
私はギリギリ合格できました。時間配分がしんどかったです。
また、A4のコピー紙とボールペンが渡されますが、圧倒的に紙が足りないです。A4のコピー用紙持っていって正解でした。


以上、3つの試験を同じ日に受けて3つとも合格した、という体験記でした。
キカガクの脱ブラックボックスコースをまずやってから、この3つの試験を受ける、というのはもしかしたら逆だったかもしれません。先にこの3つの試験の勉強をした上で、脱ブラックボックスコースのほうが本当はいいのかもしれません。![img_20210701_131349.182.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697199/f0f1f8a0-b482-792c-74e6-d31cf3b93367.jpeg)