OmniAICreator/Qiita-1.07M huggingface dataset:
【Flutter】ヘッダーとフッターのファイルを分ける

最近Flutterにドハマリしている私です。
アプリによくあるheaderとfooterを作成していきます。
コードをわかりやすくするために、とりあえず最もシンプル（だと思われる）方法で実装しました。headerにアイコンをつけるのは...まぁ簡単なので大丈夫でしょう。
完成イメージはこんな感じ


<img width="50%" alt="シュミレーター" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/9b9b5940-583a-96cc-2ef8-69c07986b7ed.png">

# lib/main.dart

`main.dart`で`header.dart`と`footer.dart`を読み込みます。
ほかはシンプルな`main.dart`ファイルです。

```main.dart
import 'package:flutter/material.dart';
import 'header.dart';
import 'footer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: Header(),
        body: Container(),
        bottomNavigationBar: Footer(),
      ),
    );
  }
}

```

# lib/header.dart

```header.dart
import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('ホーム'),
    );
  }
}

```

# lib/footer.dart

`const`は古い表現（＝なくても良い）というのをどこかで聞いたので、下記にある参考のページのコードから`const`を消しました。普通に動いています。

なんで`header`は`StatelessWidget`（状態を持たないウィジェット）だったのに、`footer`はなんで`StatefulWidget`（状態を持つウィジェット）なのかなーと思っていたんですけど、`footer`は押されたかという状態を持っているからですね。（説明が難しい）
Twitterならその画面にいるときは、青くなります。おそらくそういうことでしょう。

```footer.dart
import 'package:flutter/material.dart';

class Footer extends StatefulWidget {
  Footer();

  @override
  _Footer createState() => _Footer();
}

class _Footer extends State {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('home'),
        ),
      ],
    );
  }
}
```

# 参考

[Flutter でモバイルアプリを作ってみる 入門編① 〜ヘッダーとフッター〜](https://www.apps-gcp.com/introduction-of-flutter-about-header-and-footer/)
日曜数学会20210124コメントQ&A

# 日曜数学会コメントQ&A

- 実行にどれぐらいかかる？
    - 混雑度合いによりますが、5qubitだと、数十分待つこともあります。空いていれば30秒のときもあります。
 
- 普通の方法に比べてどのくらい早くなるのか気になる
    - 実時間だと全く早いとは思えていません。クラウド利用なのでレスポンスが非常に遅いこともありますが、そもそも演算が遅いのです。例えば本日時点の5qubit量子コンピューターのスペックは以下のとおりです。2量子ビットにまたがる操作で最も基本的なもの(CNOT)を演算するのにかかる時間が Gate time のところにある 471 (ns) ≒ 20MHz です。
対して、古典コンピューター、例えば古典FPGAだと100MHz~1GHz程度のCLKで100並列演算も普通（しかもエラーなし）ですので、かなりの差があります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878664/ee30e777-a9bf-196e-da6a-1128e53c82f7.png)

ちなみに上記のT1/T2というのが　緩和時間　というもので、この秒数が量子が（重ね合わせや励起を維持したまま）生きていられる寿命に相当します。

- むしろ大規模の方が期待アリ？
    - これは諸説あると思いますが、Kumaとしては「(今のまま量子ビット数を増やすだけだと)　No」　と思っています。
量子ビット数を増やす、ゲートを深くする等をすると、解ける問題の規模は上がりますが雑音も増えます。
雑な見積もりですと、規模が$N$倍になればアルゴリズム成功率$p$は$p^{N}$で落ちていきます。
成功率が90%あったとしても、$N=100$ではわずか0.003%となります。
また、規模が大きくなると、物理的に距離が離れた量子ビット間の2量子ビット演算の実現が難しくなります。
このような性質から、現状の雑音あり量子コンピューターで社会問題を解くことについては、私は絶望的だと感じています。
実際、IBMも量子**誤り訂正**の確かな実現が次のマイルストーンだろうとしています。

- 計算量は少ないけど、スペックが低いから遅い？ / 技術の革新が待たれるって感じ？
    - 計算量自体にも課題があります。量子加速が保証されているアルゴリズム（量子位相推定含む）は、登場するゲート演算が効率的に行える（例えば規模$N$の多項式程度の数の基本ゲートに分解できる）ことが前提となっている場合が多いです。これはいつも満たされるわけではないですし、多項式程度といってもかなりの数のゲートを含みますので、現状の実機性能ではどうにもならない場合が多いです。
量子位相推定も、基本ゲートに分解すると100近いゲートを必要としますが、現状の実機ではせいぜい30程度が（まともな計算結果の出る）限界というところです。理論的な部分は私も勉強中です。(Solvay-kitaevの定理をちゃんと理解しないといけないですね）

- 将来性がない？
    - そうかもしれないし、そうではないかもしれません。誤り訂正（これも非常に課題が多いですが）が実現されれば、規模を増やしても計算が壊れないようになります。そうすると、大規模な問題が扱えますので、（当面は演算が遅いとしても、それを上回る）量子加速による高速性が実感できるかもしれません。近年、1量子ビットを誤り訂正で守る(Beacon-Shor符号)という実験の成功が報告されました。完全に誤りを消すことは出来ませんでしたが、誤り訂正によりエラー率が改善していることが確認されました。


- ノイズ多くなるだけ……か / 大規模化も困難な道なんだ / 何か革新がないと厳しいのか
    - 量子誤り訂正やQRAMなど、まだまだ多くの技術革新が無いと使い物にはならないと思っています。しかし、今の量子コンピューター自体が技術革新で生み出されたものです。これからも技術革新は起こると思います。
同一サーバのターミナル作業内容をリアルタイムで共有する（標準のscriptコマンドで共有）

#概要
同一サーバでアクセスして作業しているときに、ターミナルの操作をリアルタイムで共有。サーバの標準のコマンド（シェル）で行う。
共有元側でscriptコマンドで共有先のpts/x(標準入出力となっている端末デバイス)を指定することで実現。
サーバ構築のペアプログラミングするイメージです。


# 実施イメージ

![scriptコマンド共有 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183821/3e357c4b-9753-ef53-f4a8-1d94d1cd873a.jpeg)

後輩が入力した白画面（ターミナル）は先輩の画面上にリアルタイムで表示（共有される）
先輩が入力した黒画面（ターミナル）は後輩の画面上にリアルタイムで表示（共有される）

#前提条件
## 条件
 - 同一サーバで接続
 - 同一ユーザでログイン（異なるユーザの場合は終わり参照）

## 環境
 - Red Hat Enterprise Linux （RHEL）8.3
 - (おそらく、他のlinuxのディストリビューション(ubuntsu,centOS)でも可)
 - 画面共有ツールが使えない。（zoom、teamsとか）
 - 音声のみのコミュニケーション（電話・オンライン会議等）が取れる
 
## （新人の）スキル
　- sshでサーバに接続できる
　
# 背景
リモートワークが増える中で、新人がサーバを触るときに、横から見たり、教えることが難しくなってきました。画面共有ツールやIDE、サーバ側のツールを導入すればよいのですが、環境制約で導入ができない。標準のコマンドだけで、新人のターミナル上で作業をリアルタイムでの確認や指導する方法を検討しました。
（お互い出勤してても、横で作業するのも周りの目があるので、長時間できない）


# 使用コマンド
- ttyコマンド 使用している標準入出力となっている端末デバイスの確認
- scriptコマンド　端末セッションの忠実な記録する。（ログ。ターミナルの入力と出力の両方が記録される）

scriptで使用するオプション

| オプション | 内容 |
|:-:|:-:|
| -f  | ターミナルの入力があり次第、フラッシュ（書き込み）される|
| -q  | 開始や終了のメッセージを標準出力に書き出さない|


# 手順
## 事前準備
０. sshのクライアントソフト側でログを記録するように設定しておく[^1]。
１. 先輩・後輩がそれぞれターミナルを2つ開く（自分の作業用と、相手の画面用）
２. ターミナルの色を黒と白に設定する

画面の色を変えているのは、作業ミスを防止や指示を容易にするためです。先輩の画面は左、後輩の画面を右などに決めるよりも、色のほうがコミュニケーションしやすいです。黒い方みて、白い方に、XXってかいてあるよね？など。また、作業中に他の資料を見たり、作業する画面の位置など好みがあるのため位置だとズレてしまうことがある。

[^1]: サーバ側に記録を残してもよいがオペミス等でサーバにアクセスできなくなった場合はログが見れなくなってしまうので、sshのクライアント側でもログを取得する


## 後輩の画面を先輩に共有する
３. 先輩側の白画面でで使用しているpts/x(標準入出力となっている端末デバイス)を確認して後輩に伝える。

```bash:先輩側で実施。白い画面のptsを調べる
$ tty
/dev/pts/0
````

４. 後輩の白い画面でscripコマンドを打つ（先輩の白い画面のptsを指定する。ここでは/dev/pts/0）

 
```bash:後輩側で実施。白い画面でscriptコマンドで先輩の白い画面のptsを指定する
$ script -fq /dev/pts/0
````

５. 後輩側で適用にコマンドを打って、先輩の白い画面でリアルタイムで表示されるかを確認する

## 先輩の画面を後輩に共有する
６. 後輩側の黒い画面で使用しているpts/x(標準入出力となっている端末デバイス)を確認して先輩に伝える。

```bash:後輩側で実施。黒い画面のptsを調べる
$ tty
/dev/pts/2
````

７. 先輩の黒い画面でscripコマンドを打つ（後輩の黒い画面のptsを指定する。ここでは/dev/pts/2）


```bash:先輩側で実施。黒い画面でscriptコマンドで後輩の黒い画面のptsを指定する
$ script -fq /dev/pts/0
````

８. 先輩側でコマンドを打って、先輩の黒い画面でリアルタイムで表示されるかを確認する

##終了するとき
９．先輩も後輩も一度scriptコマンドを終了する(exit)必要があります。そのため、サーバからログアウトしたければ、２回exitを入力

```bash:先輩・後輩で実施。相手に共有している方（先輩は黒い画面、後輩は白い画面）
$ exit
````

#終わりに
少し制約がある場合でのターミナルの作業内容をリアルタイムで共有する方法でした。
Linuxサーバを体系的にどう教えるべきなのでしょうか。。。
とりあえず、徐々にスキルを習得することを祈ってます。

ログインしているユーザが異なる場合は、
1. scriptの結果をファイルに出力
2. ファイルに読み込み権限を与える
3. tail -fで表示する

それぞれの手間が増えます。また、こちらのほうが記録もサーバ上に残ります。ただし、サーバにアクセスできなくなったときにログを見れなくなりますので、sshクライアント側でのログ取得もおすすめします。

#参考リンク
[ttyとかptsとかについて確認してみる](https://qiita.com/toshihirock/items/22de12f99b5c40365369)
[scriptコマンド](https://linuxjm.osdn.jp/html/util-linux/man1/script.1.html)
[まずはここから！Linuxサーバでカジュアルに作業ログを取得する方法](https://qiita.com/keigodasu/items/3eebbc079274ad8dd2c2)
画像から情報（Exif,GPSなど）を削除する

iPhoneで撮影した写真をQiitaにアップする際に、念のためExif,GPSなどの情報を削除しておきます。

## 情報削除を行うコード

PythonでPillowを使用して、画像を貼り付けて保存する。

```python:reimage.py
from PIL import Image
import argparse


def conv(image_path: str, new_name: str):
    print(f"convert: {image_path} -> {new_name}")
    new_im = None
    with Image.open(image_path) as im:
        new_im = Image.new("RGBA", im.size, (255, 255, 255, 0))
        new_im.paste(im)
    new_im.save(new_name, "png")


parser = argparse.ArgumentParser()
parser.add_argument("-i", "--input")
parser.add_argument("-o", "--output")
args = parser.parse_args()

output = args.input
if args.output:
    output = args.output
conv(args.input, output)

```

### 実行コマンド

```zsh
python3 reimage.py -i 画像パス (-o 新しい画像パス、無ければ元画像に上書き)
```
基礎学習

未経験からWeb系エンジニアの転職を目指しています。
これまで、Progateを中心にHTML、CSS、JavaScript等の学習、
書籍を用いてRubyの学習、Ruby on Rails チュートリアルを用いてRailsの学習を行ってきました。

今週頭から某プログラミングスクールを受講しましたが、自分の学習スタイルとは合わないと感じ、
3日で退会しました(返金保証あり)。

スクール退会後、雑食系エンジニアサロンに入会しました。
サロンで提供してくださっているロードマップにしたがって、基礎学習(復習なので1週間ほど)、
ポートフォリオの作成、転職活動を行っていきます。

まずは、良質なポートフォリオ作成に向けて、
残りの1月中、1週間程度で基礎学習(復習)を行っていきます。

学習事項は、
・コンピュータサイエンス基礎
・Linux
・HTML/CSS
・JavaScript
・Ruby
・RDBとSQL
・GitとGithub
・Ruby on Rails
です。

このうち
・コンピュータサイエンス基礎
・Ruby on Rails
はそれぞれ、
書籍、Ruby on Railsチュートリアルで学習し、
改めて学習し直す必要は無いと思うので、
残りを学習していきます。
AWS CloudFormationを使ってS3で静的WEBサイトをホストするメモ

###前提
AWS CLIのプロファイル作成済み
https://qiita.com/pino2/items/c0ede5c2b23f7f898a99

###S3で静的WEBサイトをホストするCloudFormaitonテンプレート作成

ここにあったのでコピペ
https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/quickref-s3.html

###スタック作成

https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-cfn-cli-deploy.html

~~~
> aws cloudformation deploy --template /path_to_template/my-template.json --stack-name my-new-stack
~~~


[スタック名]-s3bucket-~
の名前でパブリックアクセス可能なバケットができた。

###WEBサイト表示

S3バケットにindex.htmlをアップロード

~~~
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Hello" />
    <title>Hello</title>
  </head>
  <body>
    Hello!!
  </body>
</html>

~~~


管理コンソール>バケット>プロパティ>「静的ウェブサイトホスティング」に記載のURLをクリックしたらアップロードしたhtmlが表示された。
Python3エンジニア認定データ分析試験を受けようと考えている人達へ

# Python3エンジニア認定データ分析試験を受けました
合格したので、試験を受けるためにやってきたことを書いておきます。
今後この資格を受けようと考えている人達のためになれば幸いです。

## 結論から
1. 転職などでは役にはたたないと思う（ある転職サイトの資格欄が選択式だったのですが、この資格はありませんでした。）
2. Python初心者, データ分析のライブラリについて勉強したことがない方は行う価値あり。（環境構築、ライブラリの使い方が一通り分かるため）

## なぜ受講したのか
主に以下3点です。
1. 環境構築や機械学習に興味があった。
2. 業務でPythonを使用しており、ライブラリの勉強がしたかった。
3. 2020年春から基本情報などを受けようとしたが、コロナで中止された為、CBT方式の資格を考えた


## 試験範囲
Python3エンジニア認定データ分析試験は下記内容で問題が出題されます。ｌ

| 章  | 節  |                          | 問題数 | 問題割合 | 
| --- | --- | ------------------------ | ------ | -------- | 
| 1   |     | データエンジニアの役割   | 2      | 5.00%    | 
| 2   |     | Pythonと環境             |        |          | 
|     | 1   | 実行環境構築             | 1      | 2.50%    | 
|     | 2   | Pythonの基礎             | 3      | 7.50%    | 
|     | 3   | Jupyter Notebook         | 1      | 2.50%    | 
| 3   |     | 数学の基礎               |        |          | 
|     | 1   | 数式を読むための基礎知識 | 1      | 2.50%    | 
|     | 2   | 線形代数                 | 2      | 5.00%    | 
|     | 3   | 基礎解析                 | 1      | 2.50%    | 
|     | 4   | 確率と統計               | 2      | 5.00%    | 
| 4   |     | ライブラリによる分析実践 |        |          | 
|     | 1   | NumPy                    | 6      | 15.00%   | 
|     | 2   | pandas                   | 7      | 17.50%   | 
|     | 3   | Matplotlib               | 6      | 15.00%   | 
|     | 4   | scikit-learn             | 8      | 20.00%   | 
| 5   |     | 応用: データ収集と加工   | 0      | 0%       | 

## 勉強内容
使用した教材は[Pythonによるあたらしいデータ分析の教科書](https://www.amazon.co.jp/dp/4798158348/)のみ（画像はAmazonのものを使用しています）
2週間かけて、試験範囲のところを読みました。Codeが分からないところはJupyter NoteBookで実行して、理解しました。
その後、[PRIME STUDY](https://study.prime-strategy.co.jp/)で模擬試験を受講。
私の感想だと、この教材のみ勉強すれば合格できると考えています。
![使用教材.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050517/312ce7cf-cbb0-6c39-3bc8-706ca017be19.jpeg)

以上です！！

## この資格を受けてよかった点
1. 環境構築など、今まで疎かにしていたところが明確に理解できた。
2. 今まで使用していたライブラリでも、使っていない機能を知れた
3. 機械学習の導入として、最適かなと感じました。ただこれだけだと


## 反省点
模擬試験で安心していたのですが、過去問ではないため、出題内容が少し違いました。
そのため結構ギリギリで合格した形でした。

私が元々知識が薄かった環境構築とJupyter Notebookが正解率が一番低かったです。
どれか得意な分野を作るのではなく、きちんと全体的に勉強した方がよいかなと（当たりまえか・・・）。

## 今後について
今後は統計の勉強と基本情報と応用情報の勉強をしていきたいと考えてます。
それが終わったらコンペに出たいですね！
また何かあったら、記事にしていく予定なので、宜しくお願いします。
AWS CLIを初めて使う。ローカルから疎通確認。

##AWS CLI
インストール
https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html

###IAMロール作成
ルートユーザ使用はおすすめしないみたいなので、IAMロール作成。
既存のポリシーを直接アタッチでAdministratorAccessをチェック
（本当はAdminでなく権限絞った方が良いらしい）
認証情報のCSVをダウンロードしておく。


###AWS CLIのプロファイル作成

適当なプロファイル名をつけてプロファイル作成。

~~~

$ aws configure --profile PROFILE1
AWS Access Key ID[None]: アクセスキーID
AWS Secret Access Key[None]: シークレットアクセスキー
Default region name[None]: ap-northeast-1
Default output format[None]: json
~~~

確認

~~~
aws sts get-caller-identity --profile PROFILE1
~~~

毎回指定しなくてすむようにprofileを環境変数に設定しておく(以下Macの場合)

~~~
vi ~/.bash_profile
~~~
.bash_profileに追記

~~~
export AWS_PROFILE=PROFILE1
~~~

疎通確認

~~~
$ aws ec2 describe-vpcs
~~~

結果が表示されればOK
VSCode Windows で等幅フォントを設定する。

# はじめに
VSCodeを使うにあたって、まずフォント的なストレスがものすごく大きかった。まぁさくっと変えなさいよという話なのだが、VS-Codeのフォント指定の仕方が「フォント名を手打ち」なので、ふわっとしていて効いているのかわからなかったり（ちゃんとした方法が実はあったりしたらご指摘いただけると幸い）。デフォルトのフォントは見辛いし。
いろいろ検索したところ、ピンポイントに「まぁこれ設定しておけば読みにくいってことはないよ」っというサイトに当たらなかったので初投稿のテストがてら上げてみる。

デフォルトが等幅じゃないのってなんでなんだろう。

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [フォントの選定](#Chapter1)
1. [設定方法](#Chapter2)

# フォントの選定
使用目的がコーディングと日報のメモくらい。等幅は必須。シングルコートがかすみ目で見えない（老眼ではない）
標準環境限定で2018Updateパッチが当たっているのであれば『Biz UDフォント』が見やすい。

まぁこの辺は好みでよろしいかと。

<a id="#Chapter2"></a>
# 設定方法
1.画面左下の歯車メニューから「設定」を選択する。
<a id="#Chapter1"></a>![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209348/9d1b3e3f-70c1-8f4f-946f-1aa069c40d90.png)

2.左ペインから「テキストエディタ」＞「フォント」を選択する。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209348/6af9cd44-9361-297b-d22e-8914abf1e752.png)

3.「Font Family」に`'BIZ UDゴシック'`を設定する。

以上ですー。
Rails カラムを追加する

##実装したいこと
作成済のテーブルに新しくカラムを追加する。


##①ターミナルに「rails g migration クラス名 カラム名:データ型」を入力する。

```:ターミナル
rails g migration クラス名 カラム名:データ型
```
・クラス名は、カラムに関係している任意のクラス名を指定します。
今回は、「add_user_id_to_posts」とする。
・カラム名 = 「user_id」とする。
・データ型 = 「integer」とする。


####「db/migrate」の配下にマイグレーションファイルが生成される。

```:db/migrate/20210123234640_add_user_id_to_posts.rb
class AddUserIdToPosts < ActiveRecord::Migration[5.0]
  def change
    add_column :posts, :user_id, :integer
  end
end
```
だが、マイグレーションファイルを生成しただけでは、DBに反映できていない！
##②ターミナルに「rails db:migrate」と入力し、DBに反映する。

```:ターミナル
rails db:migrate
```
####user_idカラムがpostsテーブルに追加される


また、テーブルに必ず存在するカラム情報の場合は、バリデーションを指定する。

```:app/models/post.rb
class Post < ApplicationRecord
  validates :user_id, {presence: true}
end
```


以上、カラムの追加方法でした。

[参考文献]
・https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a
【SwiftUI】opacityの謎

##はじめに


SwiftUIではViewに対して.opacity(Double)で不透明度を指定することができます。
引数Doubleの値が0で透明、1で不透過、0.5では50%の透過度ということになります。

公式ドキュメント
https://developer.apple.com/documentation/swiftui/view/opacity(_:)

ただ、**透明の時は、タップした時に動作させるonTapGestureが反応しなくなる**ことを発見しました。
その存在が消されてしまうのでしょうか？

##検証

スライダーでサンプルを作成し実験してみました。
ボタンを押す男性をタップすると、上の表示がON/OFF切り替わるサンプルです。
このサンプルは次のような動きを示しました。

- opacityが0以外の時はON/OFFが切り替わる
- **opacityが0の時はON/OFFが切り替わらない**

<img width="250" alt="ezgif.com-video-to-gif.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406612/339d1ceb-db42-6459-025f-2199e30da559.gif">

以下、ソースコード

```swift:ContentView.swift
struct ContentView: View {
  @State private var opacity: Double = 1.0
  @State private var isOn: Bool = false
  
  var body: some View {
    VStack {
      Spacer()
      
      Text(isOn ? "ON" : "OFF")
        .font(.title)
        .fontWeight(.semibold)
        .frame(width: 200, height: 100)
        .background(isOn ? Color.red : Color.green)
        .foregroundColor(isOn ? .white : .black)
      
      Spacer()
      
      Image("tapButtonImage")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .opacity(opacity)
        .frame(width: 200)
        .onTapGesture {
          isOn.toggle()
        }

      Slider(value: $opacity)
      Text("opacity: \(opacity)")
      
      Spacer()
    }
    .padding()
  }
}
```

opacityが0の時は、画像の存在そのものが消されている？とも考えましたが、画像が存在しなくなったら、スペースが詰められ、以下のような配置になるはずです。
なので枠として存在することになっています。


<img width="200" alt="スクリーンショット 2021-01-24 14.09.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406612/c4828ea3-9a9c-77b1-3d64-280b77662ebb.png">　　　<img width="200" alt="スクリーンショット 2021-01-24 14.33.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406612/144eb29c-306b-d59b-52b3-7ef6e9b1da90.png">

##タップ判定させたい場合
ちなみに、透明でもタップ判定できないかと調べていたところ、contentShapeを使うと反応することが分かりました。
以下、contentShapeを追加したコードです。

```swift:ContentView.swift
Image("tapButtonImage")
  .resizable()
  .aspectRatio(contentMode: .fit)
  .opacity(opacity)
  .frame(width: 200)
  // contentShape追加
  .contentShape(Rectangle())
  .onTapGesture {
    isOn.toggle()
  }
```

<img width="250" alt="ezgif.com-video-to-gif-3.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406612/a0b7db3b-4fdd-6911-2789-2f5836aa3534.gif">

こちらを参考にしました。
https://stackoverflow.com/questions/57258371/swiftui-increase-tap-drag-area-for-user-interaction

透明でもタップ判定させたい場合、contentShapeを使えば、願う動作を実装できます。

##おわりに
透明部分をタップして動作させたい！と思いopacityを0にしてコードを書いたのがこの現象に気づくきっかけでした。
引数を0.00001など限りなく0に近づければ、人間には透明に見えるが、機械からは透明ではないと判定されるので、問題ないっちゃ問題ないのですが。。
ですが、contentShapeという解決策も見つかったので、もし同じような現象で苦しんでいる方の参考になれば幸いです。

最後まで読んでくださりありがとうございました。
git add *コマンドでは.gitignoreで指定したファイルを無視できないため、不整合でステージングエリアへ追加できない

Laravel5.5でECサイトを作成している時にgit add できなくて苦戦したことを記録で残します。
git version 1.8.3.1です。

##１、起きたこと
gitのmyprojectディレクトリでgit add *　のコマンドを打ったときに以下のエラーが出ました。



【エラー文】
```The following paths are ignored by one of your .gitignore files:
vendor
Use -f if you really want to add them.
fatal: no files added
```

これは要するに、.gitignoreファイルでvendorを無視しているからステージングエリアに追加できませんよ
と書いてあります。また、-fオプションを使うと追加できますよとアドバイスもありました。
そして、ステージングエリアには何もファイルが追加されていません。

[.gitignoreファイルについてよく知らない人はこちらへ](https://techacademy.jp/magazine/10179)

**-fオプションを使うとvendorもステージングエリアに追加されてしまうため今回は使用しません。**


##２、解決方法

```git add .```　コマンドを実行して解決しました。

どうやら、```git add * ```は全てのファイルを関係なくステージングエリアに追加しようとして.gitignoreでの指定したファイルとの不整合で追加できてなかったと思わます。
```git add .```コマンドでは問題なく.gitignoreで指定したファイルを無視してステージングエリアに追加する事ができた。

今後は```git add .``` コマンドを使用していこうと思っています。
【VS Code】トークン '&&' は、このバージョンでは有効なステートメント区切りではありません。

## 現象  
Photgrametry VS Codeで以下コマンドを入力したら

```
set PYTHONPATH=%CD% && python meshroom/ui
```
エラーが出た。

```
トークン '&&' は、このバージョンでは有効なステートメント区切りではありません。
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
```

## 解決策  
「&&」 → 「;」に変えましょう。


```
set PYTHONPATH=%CD% ; python meshroom/ui 
```


これで解決です。以上。
viの概要と使い方について

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ viの概要と主要なコマンドについて

## 概要

#### vi

Cent OSやAmazon Linuxに標準装備されているテキストエディタです。
サーバー上で設定ファイル等を編集したい場合はエディタが必要で、その際にviがよく使われています。

他にもviを発展させた<font color="red">vim</font>や、<font color="red">emacs</font>というエディタもあります。
しかし、長期間に渡り動作し続けるWebサーバに不必要なソフトウェアをインストールすることは、サーバーを不安定にさせる原因になり得るため、可能な限り導入は避けるべきとされています。

#### 2つの入力モード

viエディタには<font color="red">通常モード</font>と<font color="red">インサートモード</font>があります。

##### 通常モード

viエディタを起動した直後は、以下のような画面で通常モードになっています。
通常モードでは、viエディタにコマンドを入力することで、ファイルを保存したり、viエディタを終了します。

```

~
~
~
~                                            VIM - Vi IMproved                                             
~                                                                                                          
~                                             version 8.2.850                                              
~                                        by Bram Moolenaar et al.                                          
~                               Vim is open source and freely distributable                                
~                                                                                                          
~                                      Become a registered Vim user!                                       
~                             type  :help register<Enter>   for information                                
~                                                                                                          
~                             type  :q<Enter>               to exit                                        
~                             type  :help<Enter>  or  <F1>  for on-line help                               
~                             type  :help version8<Enter>   for version info                               
~                                                                                    
```

##### インサートモード

通常モードでは文字を入力できないので、文字を入力したい場合は、通常モードの状態で`i`キーを押下してインサートモードにする必要があります。インサートモードになると、下の画面のように表示されます。

```
-- INSERT --
```

通常モードとインサートモードの流れを図にしてまとめます。

![スクリーンショット 2021-01-24 14.02.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/48127a7c-aa91-ba69-9c4a-6d6b409f05c6.png)





## 基本コマンド

viエディタで使うコマンドは100以上の数があり、日常的に使わない限り覚えるのは~~面倒だし~~難しいです。
基本的に、エディタ内では矢印キー、コピー&ペーストも可能な点であることを踏まえ、まずはこれだけを抑えておけば困らないだろうというコマンドをまとめました。

#### viエディタの起動

| コマンド | 説明 |
|:-----:|:---:|
| vi    | viエディタの起動 |
| vi ファイル名 | viエディタでファイルを開く |

#### モードの切り替え

| コマンド | 説明 |
|:-----:|:---:|
| i | インサートモードで入力する |
| Esc | 通常モードに移行する |

#### 保存・終了

| コマンド | 説明 |
|:-----:|:---:|
| :w | 保存する |
| :q! | 保存せずに終了する |
| ZZ | 変更があれば保存して終了する（変更がなければ終了するのみ）|

## 便利なコマンド

#### カーソル移動

| コマンド | 説明 |
|:-----:|:---:|
| Enter | 次の行の先頭へ移動する |
| w・e・b | カーソルを単語単位で移動する（次の先頭・次の末尾・前の先頭） |
| W・E・B | カーソルをスペース区切り単位で移動する（次の先頭・次の末尾・前の先頭） |

#### 削除・コピー・ペースト

| コマンド | 説明 |
|:-----:|:---:|
| dd | 1行削除 |
| D  | 行末まで削除|
| yy（Yでも同様） | 1行コピー |
| p | ペースト |

#### 取り消し・検索

| コマンド | 説明 |
|:-----:|:---:|
| u | 操作履歴を1つ前に戻す（undo） |
| control + r | 操作履歴を1つ前にすすめる（redo） |
| / キーワード | キーワードの検索 |
良書 「GPUを支える技術　超並列ハードウェアの快進撃[技術基礎]」を紹介する

#目的

「GPUを支える技術　超並列ハードウェアの快進撃[技術基礎]」
（2017年7月13日　初版第1刷発行, 発行所　株式会社技術評論社）

この書籍は、かなりいい書籍だと思う。
しかし、Amazonとかの説明（以下に引用）はあまり詳しくないので、


>GPUの基本構造と技術動向に焦点を当てた解説書。3Dグラフィックス、ゲーム、モバイル、VR/AR、科学技術計算、そして人工知能に至るまで、幅広い分野でGPU/並列計算の重要度は高まる一方です。その背景にあるハードウェアおよび計算処理への要求とは、どのようなものでしょうか。本書ではGPUの今を主軸に、ハードウェアおよびソフトウェアの観点の基本事項、超並列処理の根幹部、重要技術の動向まで徹底解説。先端の実製品例、各分野での具体的な導入事例なども豊富に盛り込み、現場で活かせる技術知識を凝縮してお届けします。

少し、内容を、紹介する。

注意　↓　:tada:
まもなく、増補改訂が出るらしいので、入手するならばそちらがお薦めになるのでしょうか。
[増補改訂]GPUを支える技術 ――超並列ハードウェアの快進撃[技術基礎] (WEB+DB PRESS plus) (日本語) 単行本（ソフトカバー） – 2021/2/27

また、以前、以下のような記事を書いたのだが、ちょっと、これでは、書籍の内容はわからないので、その反省で、この記事を書いている。

[良書 「GPUを支える技術　超並列ハードウェアの快進撃[技術基礎]」を読む](https://qiita.com/enoughspacefor/items/31e9461b6a07b484b643)

#内容紹介

書籍の最初の「本書の構成」に書かれていることを要約する。

##第1章　[入門]プロセッサとGPU
グラフィックスの歴史、3Dグラフィックスの考え方、CPUとGPUの違いなど、グラフィックスの基礎知識を解説。
##第2章　GPUと計算処理の変遷
グラフィックス処理ハードウェアの歴史から、GPUの科学技術計算への利用について説明。
##第3章　[基礎知識]GPUと計算処理
3Dグラフィックスとはどのような処理をするのか、そのための表示パイプラインを説明。GPUによる科学技術計算とはどのような用途に使われるのかを解説。
##第4章　[詳説]GPUの超並列処理
GPUの構造がどのようになっているのかを詳しく解説。なぜGPUが高い演算性能を持っているのかしっかり理解できる説明。また、科学技術計算でのエラー検出や訂正の方法も説明。
##第5章　GPUプログラミングの基本
超並列のGPUプログラムを記述するプログラミングの基本事項について説明。
##第6章　GPUの周辺技術
GPUが高い性能を発揮するための、GPUのデバイスメモリやデータ転送技術の説明。
##第7章　GPU活用の最前線
3DグラフィックスによるVRやAR、また、自動運転のAIなど、GPUの適用範囲の広がりに関する展望。
##第8章　プロセッサとGPUの技術動向
CPUやGPUが今後どのように発展していくかについて。




#まとめ
特にありません。
（正直）自分の前の記事が記事の目的がわからなすぎたので、今回、あえて、シンプルに紹介記事を書いた。

※この本をお持ちでない方は、それを中古か何かで買って読んで、今度出る改訂版のを新たに買うと、差分が見えて楽しい可能性あり。
谷藤賢一『いきなりはじめるPHPワクワク・ドキドキの入門教室』でPHPを勉強するのをやめた話

チャプター3まで終え、チャプター4『データベース』に進もうとしたら、mampの設定で挫折した。

以前<a herf="https://royal-fummy.com/blog/php-startup-with-mamp/">【PHP】超優良入門書『いきなりはじめるPHP』をMAMPで完走するために知っておくべき５つのこと【Mac】</a>

に「xamppではなくmampでも勉強できる」と記載したが、調べてみるとmampはmacbook向けのデータベースで<font-weight: bold;>windowsには向かない</font>と判明した。

<a herf="https://royal-fummy.com/blog/mamp-mysql-charset/#MySQL-2">【PHP初心者向け】MAMPでMySQLの文字コードを設定する方法（文字化け対策）【Mac】</a>を参考に文字化け対策を行おうにも、コマンドプロンプトでエラーが出て進めない。対策方法はあるらしいが、初学者の私にはどうすればいいか見当もつかない。

というわけで、この本でphpの学習を続けるのは断念した。
PDFにページ番号を追加したいだけなんだ

### 背景

手元にPDFファイルがある。ページ番号がない。（※）

単純にページ番号を打ちたいだけなんだけど、手軽なツールがない……！

手頃なコマンドラインツールを発見したので記す。

（※）スクショを10枚ぐらい集めて、プリント > PDFで保存　にしたとか。

#### こんなかんじにできる！

![210124_課題整理 5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/faea995b-665e-5a84-faa5-f1a75ff71972.gif)



### pdftools

[GitHubのraffaem/pdftools][01]からダウンロード

```bash
$ git clone https://github.com/raffaem/pdftools.git
```

ダウンロードしたフォルダに入る。まだ番号のついていないPDFをフォルダに入れる。そして

```bash
$ python3.9 pdftools.py -if input.pdf -o output.pdf --text \$page/\$pages br 0.93 0.95 --overwrite
```

ページ番号を大きくしたい場合には

```bash
$ python3.9 pdftools.py -if input.pdf -o output.pdf --text "\huge \$page/\$pages" br 0.93 0.95 --overwrite
```

いやあ、めっちゃハッピー😆


### 補足

#### ハマったところ

- `--text \$page/\$pages`もしくは`--text "\huge \$page/\$pages"`と書く。`bash`の場合は`$`をエスケープしなければならない（らしい）。

- `--text`の引数の2つ目は`br`（bottom right）など。`tl`/`tr`/`bl`/`br`のいずれか。[GitHubのraffaem/pdftools][01]の`README.md`には反映されてなくて、ソースコード追って拾った。

#### やらなくて済んだこと

- `.py`ファイルの実行権限付与（`$ chmod +x pdftools.py`）。どっちにしろ`python`を指定しないといけない。

- `venv`の利用。`latex`関係のコマンドはひと通り入っていたので。インストールが必要なものによっては、`venv`をつかったかもしれない。

#### ホントはできるとうれしいこと

- フォントの変更

#### そのた情報

- 無料のオンラインツールはいくつかあって、セキュリティを心配しないなら使うとよい
- Acrobatふくめ、有料の商用ツールはいろいろある
- 安価なツールがあまりない（なんでPDFツールはこんなに高いんだろう？）
- コマンドラインツールは、本当はもっとあるのかもしれない


### リソース

[01. raffaem/pdftools][01]
[02. How to add page numbers to Postscript/PDF - Stack Overflow][02]
[01]: https://github.com/raffaem/pdftools
[02]: https://stackoverflow.com/questions/1603301/how-to-add-page-numbers-to-postscript-pdf


### 環境

- python 3.6
- macOS BigSur 11.1
- MacBook Pro (13-inch, 2020, Four Thunderbolt 3 Ports)
VPCのコンポーネント

# はじめに
AWSのVPCについて学んだことを備忘録を兼ねてまとめて行こうと思う。
今回も細かいとこよりイメージ優先で書いて行来ます。

## ルートテーブル
- サブネット間の通信を制御するもの
- サブネットから出る通信をどこに向けるかを決めるもの
- イメージは下記のような感じになる

| 送信先 | ターゲット |
|:-:|:-:|
| 10.0.0.0/21  | local  |
| 0.0.0.0/0  |  インターネット |

※適用されるルールについては、より明確に記述したものから優先される。上の例だと、localの方がルールとしては強い

## インターネットゲートウェイ
- パブリックサブネットがインターネットに接続するために必要なコンポーネント
- これをサブネットにアタッチすることで、VPCがインターネットに接続することができる
- インターネットゲートウェイはアタッチされたサブネットのルートテーブルを参照する
- とあるサブネットをインターネットにつなげたい場合下記のようなイメージとなる

| 送信先 | ターゲット |
|:-:|:-:|
| 10.0.0.0/21  | local  |
| 0.0.0.0/0  | internet gateway |


## NAT ゲートウェイ
- プライベートサブネットをネットに接続させるコンポーネント
- 基本的にアウトバウンド(外への通信)のみで、インバウンド(外からの通信)は許可されていない
- とあるプライベートサブネットをネットにつなげたい場合下記のようなイメージとなる

| 送信先 | ターゲット |
|:-:|:-:|
| 10.0.0.0/21  | local  |
| 0.0.0.0/0  |NAT gateway |

## ENI
- AWSのインスタンスにアタッチすることで、IPアドレスを扱える?ようになるイメージかな?
- 例えばEC2はlocalリソースへの通信用のプライベートIPアドレスと外部通信用のパブリックIPアドレスを保持している
- パブリックIPアドレスはインスタンスが停止したり、再起動したりすると変更してしまう
- パブリックIPアドレスを固定したい場合はElasticIPアドレスをENIにアタッチする

## セキュリティーグループ
- インスタンスごとに設定するファイアーウォール
- アウトバウンドのみ設定が必要(ステートフル型)

## Network ACL
- サブネットごとに設定するファイアーウォール
- 新規作成したものはデフォルトで全ての通信が拒否となっているため、注意(デフォルトは全ての通信が許可されている)
- インバウンド、アウトバウンドどちらも設定が必要(ステートレス型)
- 役割としては、補助的なセキュリティ強化につかう

##まとめ
結構複雑なので、遠ざけがちでしたが、わかってくるとおもしろいですね~
Chromebookでweb開発をしてみる( 1 )

#はじめに
Chromebookはwebブラウザーのchromeをベースに開発されたOSですが、
使い方次第でいろいろなことができると思います。
今回はweb開発に目を向けてプログラムをしていきたいと思います。
#開発環境
chromebook 3100 2-in-1
[Google cloud](https://console.cloud.google.com/)
[firebase](https://firebase.google.com/?hl=ja)
※Googleアカウントが必要です
#プロジェクト作成
まず、[firebase](https://firebase.google.com/?hl=ja)にアクセスして右上の「コンソールへ移動」を押します。
すると「プロジェクトを追加」が出ると思うのでそれを押してください。
macOS Big Surでタイムスタンプを入力するサービスをAutomatorで作成する方法

1.動機
この記事はメモやメールなどの文章入力時にその時の日時（例：20210124Sun_1802）を入力する機能について記述します。
議事録や自分の日記などの日時を入力する際に、アプリのタイムスタンプの機能を使うことなく、自分で設定したキーボードのショートカットで日時を入力する機能をAutomatorのクイックアクション（Catalinaまではサービス）で行うことを記述しています。

最近（2021年1月）M1搭載のMacbook Airに更新したのですが、OS搭載のAutomatorの "サービス" が "クイックアクション" に変更されていることに今更ながら気づきました。
今までLionからmacを使っていて、以下の先人の方の記事にあるAutomatorを使ったタイムスタンプをサービスで登録してフル活用していたのですが、Big SurではAutomatorの構造が変わってしまいAutomatorによるタイムスタンプ入力が一筋縄ではいかなかったので、備忘録としてこの記事を投稿します。

http://nipponia.blog44.fc2.com/blog-entry-227.html


2.設定方法

2.1 Automatorを開く
まずはAutomatorを開きます。開くと既存のファイルが聞かれますので、「キャンセル」を選択します。

![スクリーンショット 2021-01-24 14.17.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531038/7c9f8dda-7cc3-530a-23cd-88029e317e14.png)

![スクリーンショット 2021-01-24 14.17.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531038/4aa5dd4e-54f2-2801-2609-b14edf485eaa.png)


2.2 クイックアクションを選択
Big SurからAutomatorの「サービス」が「クイックアクション」に変わったようです。
クイックアクションを選択します。

![スクリーンショット 2021-01-24 14.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531038/37b831a9-05fe-8464-7f2d-bdd04e00f567.png)



2.3 必要な情報の入力
以下の画面の通り設定を入力します。
ちなみに、日付形式は先人の方のブログにあるリンク先で適当にカスタマイズすることができます。

![Automator_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531038/c3bbe31c-4b89-b703-812c-067ab148e021.png)

ちなみに、私は "20210124Sun_1802"という形式をずっと使っているので、以下のスクリプトを入れてあります。

```
export LC_ALL=en;
date +%Y%m%d%a_%H%M;
export LC_ALL=;
```



スクリプト内の **%Y%m%d%a_%H%M** の部分を以下のサイトにある情報でカスタマイズ可能です。

日付の形式
http://linuxjm.osdn.jp/html/LDP_man-pages/man3/strftime.3.html

入力と選択が終わりましたら、ファイル-保存でわかりやすい名前（例; **Timestamp**)スクリプトを保存します。

2.4 キーボードショートカットの登録
システム環境設定のキーボードのショートカットのサービスに先ほど付けた名前のサービスがリストにありますので、ショートカットのところをクリックして使いやすいショートカットを登録します。
その際、他で使われているショートカットをアサインするとうまく動かないので、注意が必要です。

![スクリーンショット 2021-01-24 14.28.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531038/6e23fca9-e576-c0a4-73ee-38188f7ec67d.png)

上記の図の例では "Option" + "Command" + "/" をアサインしています。

macOSや適当なテキスト入力でアサインしたショートカットの動作確認をして、無事動作が確認できたら完了です。


**参考サイト**


日付をショートカットキーで入力するアプリを五分でつくる方法（Mac+Automator+シェルスクリプト）
http://nipponia.blog44.fc2.com/blog-entry-227.html

Linux Programmer's Manual (3)
http://linuxjm.osdn.jp/html/LDP_man-pages/man3/strftime.3.html

[Automator & AppleScript] Automator で右クリックメニューや Finder のプレビューに表示されるクイックアクションを作成する
https://www.d-wood.com/blog/2020/07/16_11839.html
bubbleのページ間で値をキャッチボールする方法

[NoCodeWalker](https://nocodewalker.com/)というオンラインサロンに所属しています[よしお](https://twitter.com/timonsy)と申します。

サロン内で質問があり、日本語Web上に無さそうな[bubble.io](https://bubble.io/)の情報発信を目的としてつらつらを記しております。

###今回は、「ページ遷移の際に前のページのデータを遷移後のページに渡す方法を書いていきます。
bubble内では’set state'といいますが要は「変数」で
'set state'はページ遷移すると基本消えます。

今回はクイズのアプリを作る際に、問題回答をすると別ページに遷移し
解説をしたいが問題番号が続いていかないといったお悩みに解答したので
その方法を共有します。

##解説


問題出題ページの解答ボタンをクリックすると解説ページに遷移
**（問題出題ページをindex,問題解説ページをanswer_pageとしています）**

![スクリーンショット 2021-01-24 10.06.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276430/c5334643-52d0-811d-97dd-faa01b63ca18.png)
↓
![スクリーンショット 2021-01-24 10.03.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276430/b831feda-dd2d-6ee9-c4ce-589af18366ef.png)



- 解説ページ「第ｎ問」の問題番号を出題ページの「第ｎ問」と同じ番号で表示させる
- 解説ページの「次の問題へ」ボタンをクリックすると問題ページへ遷移し問題番号が増える(１→２など）

についての解説

#解説ページ「第ｎ問」の問題番号を<br>出題ページの「第ｎ問」と同じ番号で表示させる

問題出題ページの「第ｎ問」のTextの設定を下のように設定します。
![スクリーンショット 2021-01-24 10.22.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276430/b0b1ae4d-e371-8820-f42f-13fa2738b297.png)
ポイントは、「第ｎ問」の番号をCustom statesで設定することです。
ここでは、「quiz number」として設定してあげています。

次に解答ボタンをクリックた際の処理を設定します。
Workflowのタブに移動して
![スクリーンショット 2021-01-24 10.30.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276430/0ffad9fa-318c-7723-9177-7495f23aac7e.png)
Go to page answer_pageのstepを設定してあげるとともに
Send more paramaetersのチェックボックスにチェックを入れます。

チェックを入れると、Keyとvalueをいれるinput boxが表示されるので
ここではkeyを「no」、valueを「Text A's quiz number」とします。


###処理をまとめると、「解答ボタン」をクリックすると「解答ページ」に遷移し、<br>遷移先の解答ページに「Text A」の中の「quiz number」を、<br>「no」という「Key」にして送ってあげています。



次に、遷移した先のページに送ったデータを表示してあげます

answer_page(問題解説ページ）のDesignページの設定は下記のようにします。
（ほとんどindexと同じです/Setしたstate名は意図的に変えてるわけではないです。。。）
![スクリーンショット 2021-01-24 14.11.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276430/5a441ed8-0b26-6476-9206-785a7a97b5cc.png)

重要なのはWorflowのほうです。

![スクリーンショット 2021-01-24 14.16.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276430/8abc13cf-cabb-2659-2f50-465c66d10b41.png)

###処理としては、このページが表示された際に<BR>「Text A」の「QuizNumber」というStateに、前のページから送られた<BR>「no」という「Key」の中の数字を入れてあげます。


これで問題ページの「第ｎ問」の数字が解答ページの「第ｎ問の解説」に反映されます。


長くなりそうなので続きはこちら
https://qiita.com/yoshio_y/private/34eed184e5211edcb564
GAN概要解説

#GAN(Generative Adversarial Network)アルゴリズム備忘録

##GANに使用する深層学習器の解説
__②Discriminator (識別器)__
MLPなど通常の深層学習の識別器です。
画像の識別にはCNNなどが使用されることが多いです。

__②Generator (生成器)__
ランダムな入力データに対して、目的の特徴量(猫の画像を出力させたいなら猫の画像)を出力するように学習する生成器です。
GANにより、Generatorの重みを更新することで、目的の特徴量を持つデータを出力することができるようになります。
一度目の出力では、入力データとGeneratorのニューロンの重みはランダムなのでランダムな値が出力されます。

##GANの学習アルゴリズム
①：Discriminatorの学習
「訓練データ」(例：猫の画像)と「Generatorの出力データ」を識別するDiscriminatorを学習させます。

■入力データ：訓練データ(例：猫の画像)とGeneratorの出力データ
■MLP(通常の深層学習識別器、画像データを扱うならばCNNを使用することが多い)
■出力データ：訓練データならば「1」、Generatorの出力データならば「0」

②：Generatorの学習
■入力データ：ランダムな値
■Generator(重みを更新する)
■Discriminator(重みを更新しない)
■出力データ：「Generatorによって生成されたデータ」がDiscriminatorによって、「訓練データ」もしくは「Generatorによって生成されたデータ」に識別された結果
■教師データ：すべて訓練データのラベル(今回の場合は「1」)と設定する

③：①②を繰り返し行います。
　②により、Generatorの出力する特徴量の精度が向上します。その結果、Discriminatorの訓練データとGeneratorの出力データの識別精度が向上します。

##GANの実装
ランダムな値をGANの入力データとするとDiscriminatorの訓練データの特徴量を持つ値が出力されます。
■入力データ：ランダムな値
■GAN
■出力データ：Discriminatorの訓練データの特徴量を持つ値(例：猫の画像)

##結果
Generatorは、訓練データと同じ特徴量を持つデータを出力する生成器となります。
例：訓練データが猫の画像ならば、Generatorによって生成されるデータは猫の画像となります。)

#参考文献
[1]岡谷貴之，深層学習，2015 講談社サイエンティフィク， 講談社．

[2]GOODFELLOW ， Ian ， et al ． Generative adversarial nets ． In: Advances in neural
information processing systems． 2014． 2672-2680．
【Vue.js】v-modelの記法について

###v-modelを用いることにより双方向データバインディングを作成する。

![5bda13e2dd9134a7657fb3b93539df02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/91861c1d-db39-66b4-fc46-610d20a7264d.gif)

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="message">
  <h1>{{message}}</h1>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'こんにちは'
    }
  })
</script>
```

v-modelで指定した属性の値が変更したら、一致するdataの値も同期される。

データの流れ
![IMG_B5085E2BF392-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/89a172ef-c1bd-f086-548d-c24ad74cf14c.jpeg)
バッチファイルでの配列

# はじめに
Windowsのコマンドプロンプトで用いるバッチファイルを書くことがそこまでなかったのですが、たまたま調べていたところ配列の扱い（疑似的）が可能ということでメモ。
殴り書きみたいなものなので、その程度と思っていただけると◎。
# 大前提
エコーの無効化と遅延環境変数の有効化を利用しています。

```bat
@echo off
setlocal enabledelayedexpansion
```

# ファイルから読込して代入
同じディレクトリにある`list.txt`のn行目を`arr[n]`に代入したいとき。

```bat
set n=1
for /f %%s in (list.txt) do (
  set arr[!n!]=%%s
  set /a n=n+1
)
```

# Foreachを使いたいとき
Foreachが何なのかみたいな説明はここでは省略しますが、とにかくForeachを使いたいとき。

```bat
rem Foreach Loop
set i=1
:FOREACH_FILEPATH
set it=!filepath[%i%]!
if defined it (
  set FullPath=%PathFrom%%it%
  set /a i+=1
  goto :FOREACH_FILEPATH
)
```

# 合わせ技の例
ファイルからlistを読み込んで、そこのファイル名からごにょごにょしたいみたいな例。

```bat
@echo off
setlocal enabledelayedexpansion

set PathFrom=C:\Users\test\Desktop\

rem filepath[n] <- list[n]
set n=1
for /f %%s in (list.txt) do (
  set filepath[!n!]=%%s
  set /a n=n+1
)

rem Foreach Loop
set i=1
:FOREACH_FILEPATH
set it=!filepath[%i%]!
if defined it (
  set FullPath=%PathFrom%%it%
  set /a i+=1
  goto :FOREACH_FILEPATH
)
```

# 参考
[バッチファイルで配列を使う](https://jj-blues.com/cms/wantto-usearray/)
[バッチファイルで配列とforeachを使う方法](https://qiita.com/rai_suta/items/5ebdffc56e7e7768528b)
PowerApps ポータルにバーコードリーダー機能追加を検討してみて

#経緯
今回のいただいた要望は以下でした。

+ 会員申込登録業務をデジタル化したい。
+ バーコード読み取りをしたい。
+ 100～200箇所で使用したい。
+ 費用はなるべく抑えたい。

PowerAppsキャンパスアプリには、バーコードスキャナーの機能があり、キャンパスアプリで実装すればことは足りるのですが、ボトルネックとなるのは使用したい数で、仮に100箇所100人で使用するとなるとそれだけで、PowerAppsのライセンス費用が100必要になり、とても費用を抑えるという要望を満たせない。ということで、ポータルに、バーコード読み取り機能を実装できないのかと検討をしました。

#最初に確認したこと
バーコード読み取り機能をポータルでに実装するには、Javascriptで実装するしかないと思い、Javascript,バーコードで調べてみたところ、バーコード読み取りでは以下の3つが有名そうでした。

+ WebCodeCamJS
+ JOB
+ QuaggaJS

## WebCodeCamJS、JOB　について
　どちらも、JSファイルとして外部ファイルの参照が必要でした。
　@tricogimmickさんが、[Power Apps Portal 開発メモ](https://qiita.com/tricogimmick/items/ce7842faea8082d13f0d)に書かれているように、JSファイルは、ポータル管理から外部ファイルとして登録しても、認識してくれません。JSファイルをポータルで使用するためには、外部ファイルとして参照する必要があります。
　私は、すぐに使える外部サーバがなかったので、AzureWEBAppsを一つ作りそれ上に、JSファイルを置いて、参照して使ったり、GIT上のファイルを参照させていただいたりして、検証してみました。

その時に参考にさせていただいたサイト
https://blog.ecbeing.tech/entry/2020/06/30/114023
https://qiita.com/mm_sys/items/6e5e927ef75ab82fa8d3
https://qiita.com/k-murayama/items/048fc557c112537a6b83

結果、上記ライブラリは複数ファイルから成り立っていて、workerの参照の個所でエラーとなってしまいました。私のスキルでは、上手くライブラリを配置したりして、使いこなすことが出来ず断念。

## QuaggaJSについて
　こちらは、外部ファイルとして、一つだけのファイルで使用できたため、私でも使用することが可能でした。
ちなみに、外部参照のソースはこちら

```
<script type="text/javascript" src="https://serratus.github.io/quaggaJS/examples/js/quagga.min.js"></script>
```

参考にさせていただいたサイト
https://kuroeveryday.blogspot.com/2017/12/barcode-scaner-with-quaggajs.html
https://ameblo.jp/white-rabbit-0925/entry-12579659224.html
https://watchcontents.com/quaggajs-barcode-reader/
https://mam-mam.net/javascript/js_quagga.html

QuaagaJSのリファレンスに関しては、こちらのサイトが非常にわかりやすく助かりました。
https://tech-memo.yonayona.biz/posts/quagga

これらのサイトを参考に、お試しでポータルのホームに、バーコード読み取り機能を実装。

###苦労した箇所
**小さなバーコードが読み取りできない。**
自分のiphoneを使用してテスト。最初320×240の大きさで読み取りテストを実施。
PCの画面上に表示する大きな画像では、正常に読み取りができました。
その後、手元にあるチョコレート等の裏についている小さなバーコードで読み取りをすると、なぜか正常認識をしません。
→　そこで、locatorの項目を変更することで対応できないか検証。

```
locator:{
        //カメラを離す x-small small medium large x-large近づける
        patchSize: "medium",
        halfSample: false  //trueだと縦横半分にリサイズした画像で解析
    }
```

結果）phoneのカメラを小さなバーコードに近づけても結局オートフォーカスができずぼけてしまい、離すと小さくて認識できず、locatorを変更してみても読み取り精度は上がりませんでした。

試行錯誤ののち、読み込む画像の解像度が変わっていないからではないかと思い、
constraints　にて、大きさを変更。320×480に変更。

```
 constraints:{
            width:320,height:480
      }
```

結果）小さなバーコードを読み込むんで認識することが出来ました。

#終わりに
+ 単純なことですが、中々気づくことが出来ませんでした。
+ キャンパスアプリみたいに、ポータルにもインテリジェンス機能を部品として組み込んで簡単に実装できるようにしてくれると嬉しいなと思いました。バーコード読み取り機能もそうですが、ポータルでかゆいところに手が届くようになると、ありがたいです。

最後まで、お読みくださってありがとうございます。
誤植や、不適切な記述等ありましたら、ご指摘いただけますとありがたいです。
HTMLElement.styleではデフォルトのCSS記述情報は取れないので別の方法でとる

ちょっとだけハマったので備忘録も兼ねて。
html要素をjsで取得し、キーボードを叩くと対象のheightが10pxずつ増えるとします。

```html
<!--html-->
<div class="box">
</div>

<style>
//css
.box{
    height: 100px;
    width: 100px;
    background-color:blue;
}
</style>

```


```javascript
//javascript
let box = document.getElementsByClassName("box").item(0);
let body = document.getElementsByTagName('body').item(0);

//body内でキーボードが押されるとboxの高さが増える
body.addEventListener('keydown',function(){
   let boxheight = box.style.height;//現在の高さ
   box.style.height = boxheight + 10 + 'px';
});

```

こうすると、反応はしますがなんと高さが10pxになってしまいます。
デフォルトでは100pxなので、 +10つまり110pxになるべきでは？ということで
console.log("現在の高さ" + boxheight);
してみると、何も出ず。高さの情報が取れてません。

調べてみると、
####htmlelement.styleでは、デフォルトでcssに記述されている情報は取得できないようです。
（※なお、box.style.height = boxheight + 10 + 'px';でjsで操作した後は、）
htmlelement.style（つまりbox.style.height）でも高さ（10px）が取得できます。
jsで一度取得した後は操作できるようですね。


###対応方法
この場合、要素の高さは、
・対象.offsetHeight
・getComputedStyle(対象).style
などでとるとうまくいきます。
【初心者でもわかる】条件をつけて、:not()で〇〇以外にだけCSSを当てる方法

# どうも7noteです。特定の要素以外にCSSを当てる書き方を解説

条件付きでCSSを当てられたら便利だと思いませんか？
そんな便利な方法(書き方)があります。

## `:not()`で特定の要素以外にだけCSSを当てる

```index.html
<p>pタグ</p>
<p>pタグ</p>
<p>pタグ</p>
<p>pタグ</p>
```

```style.css
/* 3番目の要素以外を赤文字にする */
p:not(:nth-child(3)) {
color: #f00;
}
```
![ptag.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/e634b70c-883c-9d22-2f4b-194ac0af6d0e.png)


このように**カッコ()の中に特定のセレクタを指定する**ことで、その要素を**CSSの適応範囲から除外することができます。**

:から始まるような疑似セレクタだけでなく、特定のクラス名がついていないものにだけ指定することもできます。

```index.html
<p>pタグ</p>
<p class="check">pタグ</p>
<p>pタグ</p>
<p class="check">pタグ</p>
```

```style.css
/* クラス.check以外を赤文字にする */
p:not(.check) {
color: #f00;
}
```

![class.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/bddfa39d-2411-003b-ad75-aa952460d342.png)


## `:not([class])`で全くクラスがついていない要素にだけ効かせることも可能

複数の種類のクラスがあるが、一切クラスのついていないものにだけCSSを効かせる書き方があります。

```index.html
<p class="point">pタグ</p>
<p>pタグ</p>
<p class="crnt">pタグ</p>
<p>pタグ</p>
```

```style.css
/* クラスがついていないものを赤文字にする */
p:not([class]) {
color: #f00;
}
```

![class2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7057dd52-a3bf-5098-a184-88f001c68401.png)

##まとめ

頻繁に使うことはないですが、知ってるのと知らないのとでは作業スピードも対応幅も変わってくるtipsです。
ぜひ使ってみてほしいです！

参考：https://gotohayato.com/content/451/

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
webpackをさっと学ぶ

#はじめに
なんとなくどんなものか分かってたけどよくわかんないからエラー出た時に調べてなんとかしてたwebpackをちゃんと学ぼうと下の動画を購入して勉強しました。

[webpack最速入門 ~実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ~](https://www.udemy.com/course/practical-webpack/)

#webpackとは
フロントエンド用のモジュールバンドラーです。
モジュールはJSファイルとかCSSファイル、バンドラーはまとめるものって意味なので、要はJSファイルとかCSSファイルとか複数ファイルに跨ってるものを一つのファイルにしちゃうっていうやつです。
#webpackのメリット
一つのファイルにまとめる時に、無駄な改行とかスペースを削除したりしてファイルサイズを圧縮してくれるのでファイルの読み込み時間が少なくて済みます。

また、JSファイルがたくさんあると、読み込み順を意識してHTMLに記述する必要があるのですが一つのファイルにしてその辺の名前解決を勝手にやってくれるので、分割したファイルで普通に実装していって最終的に良い感じにまとめたファイルを作ってくれるっていうのがwebpackの良いところですね。

#使い方
[webpackのドキュメント](https://webpack.js.org/guides/getting-started/)通りに進めていきます。
ただし、インストールやファイルの作成部分は割愛して、[webpackの設定](https://webpack.js.org/guides/getting-started/#using-a-configuration)から説明していきます。

まずはwebpackの設定ファイルを作成します。

```js:webpack.config.js
const path = require('path'); // pathを色々いじれるモジュール

module.exports = {
  entry: './src/index.js', // エントリーポイント（最初に読み込むjsファイル。ここにimportとか記述されていて、それを順次読み込む）
  output: {
    filename: 'main.js', // 出力ファイル名
    path: path.resolve(__dirname, 'dist'), // 出力先パス
  },
};
```
これでビルドすればバンドルされたjsファイルが出力先パスに作成されます。

`./src/index.js`は次のようなファイルになります。

```js
import _ from 'lodash';

 function component() {
   const element = document.createElement('div');
 
  // Lodash, currently included via a script, is required for this line to work
  // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
   return element;
 }
 
 document.body.appendChild(component());
```
ここでは`lodash`という外部モジュールと自分で定義しているjsをまとめている訳です。

### CSSもバンドル
次にCSSもまとめてしまいます。

jsファイル内でcssを扱うために`css-loader`、`style-loader`をインストールします。
その後、先ほど作成した`webpack.config.js`を以下のように編集します。

```js:webpack.config.js
const path = require('path');
 
 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
  module: {
    rules: [
      {
        test: /\.css$/i, // 処理対象ファイルを正規表現で指定する。
        use: ['style-loader', 'css-loader'], // 使用するローダー（さっきインストールしたもの）
      },
    ],
  },
 };
```

先ほどのjsコンポーネントにcssを追加します。

```js
 import _ from 'lodash';
import './style.css'; // 追加
 
 function component() {
   const element = document.createElement('div');
 
   // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello'); // 追加
 
   return element;
 }
 
 document.body.appendChild(component());
```

このような感じで同様に画像や、jsonファイルなどをバンドルできます。

### Babelを導入
Babelも追加できます。（[webpackのドキュメント](https://webpack.js.org/loaders/babel-loader/)）

```js
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        }
      }
    }
  ]
}
```
optionsの部分は外部ファイル（`babel.config.js`）に記述することもできます。




#まとめ
因みにこちらの動画で一番最初に学んだのはwebpackのイントーネーションでした。
ウェ→ブ→パック→と読んでいたんですが、動画中ではウェ↑ブ↓パック→って読まれていました。
でも調べると普通にウェ→ブ→パック→と読まれてる人もいるのでどっちでも良いと思いました笑

流れさえわかれば細かい設定は各種ローダーのドキュメントを見るなりすればできるようになるかなって感じです。
(備忘録）シンプルなCのソースコードをGCCでコンパイルして逆アセンブルする

シンプルなCのソースコードをコンパイルして逆アセンブルしていきます。


```addintandint.c
extern int addintandint(int i ,int j)
{
        return i + j;
}

extern int hoge()
{
        return addintandint(3,2);
}
```

最適化をかけてコンパイルします

```
$ gcc -c -Og addintandint.c
```

逆アセンブル。Intel記法で行います

```
$ objdump -M intel -d addintandint.o >dump.txt
```

逆アセンブルできました。

```
addintandint.o:     ファイル形式 elf64-x86-64


セクション .text の逆アセンブル:

0000000000000000 <addintandint>:
   0:	f3 0f 1e fa          	endbr64 
   4:	8d 04 37             	lea    eax,[rdi+rsi*1]
   7:	c3                   	ret    

0000000000000008 <hoge>:
   8:	f3 0f 1e fa          	endbr64 
   c:	be 02 00 00 00       	mov    esi,0x2
  11:	bf 03 00 00 00       	mov    edi,0x3
  16:	e8 00 00 00 00       	call   1b <hoge+0x13>
  1b:	c3                   	ret 
```

ちなみに以下のように最適化をかけないでコンパイルすると

```
$ gcc -c  addintandint.c
```

以下のようにちょっとややこしくなります

```
addintandint.o:     ファイル形式 elf64-x86-64


セクション .text の逆アセンブル:

0000000000000000 <addintandint>:
   0:	f3 0f 1e fa          	endbr64 
   4:	55                   	push   rbp
   5:	48 89 e5             	mov    rbp,rsp
   8:	89 7d fc             	mov    DWORD PTR [rbp-0x4],edi
   b:	89 75 f8             	mov    DWORD PTR [rbp-0x8],esi
   e:	8b 55 fc             	mov    edx,DWORD PTR [rbp-0x4]
  11:	8b 45 f8             	mov    eax,DWORD PTR [rbp-0x8]
  14:	01 d0                	add    eax,edx
  16:	5d                   	pop    rbp
  17:	c3                   	ret    

0000000000000018 <hoge>:
  18:	f3 0f 1e fa          	endbr64 
  1c:	55                   	push   rbp
  1d:	48 89 e5             	mov    rbp,rsp
  20:	be 02 00 00 00       	mov    esi,0x2
  25:	bf 03 00 00 00       	mov    edi,0x3
  2a:	e8 00 00 00 00       	call   2f <hoge+0x17>
  2f:	5d                   	pop    rbp
  30:	c3                   	ret
```

謝辞：以下のサイトなどで教えていただいたyumetodoさん、Peter Cordesさんありがとうございました

https://stackoverflow.com/questions/65858879/question-of-structure-of-reverse-assembled-simple-code
~/.ssh/config を使わずに複数の踏み台を経由して SSH 接続する

# 1. 概要
踏み台経由で SSH 接続する必要がある場合、~/.ssh/config に ProxyCommand を書くことがあると思います。
事情があって ~/.ssh/config を編集出来ない場合に ~/.ssh/config を使わずに ssh コマンドのオプションで直接 ProxyCommand を指定する方法を記載します。

# 2. 踏み台が1台のパターン
|ホスト  |秘密鍵  |ユーザー  |hostname or ip |
|---|---|---|---|
|踏み台  |~/.ssh/humidai.key  |humidai_user  |humidai.xxxxx.jp  |
|SSH接続したいサーバー  |~/.ssh/dest.key  |dest_user  |192.168.0.1 |

```
$ ssh -o ProxyCommand="ssh -i ~/.ssh/humidai.key -W %h:%p humidai_user@humidai.xxxxx.jp" -i ~/.ssh/dest.key dest_user@192.168.0.1
```

# 3. 踏み台が2台のパターン
|ホスト  |秘密鍵  |ユーザー  |hostname or ip |
|---|---|---|---|
|踏み台の踏み台  |~/.ssh/humidai_2.key  |humidai_2_user  |humidai_2.xxxxx.jp  |
|踏み台  |~/.ssh/humidai.key  |humidai_user  |humidai.xxxxx.jp  |
|SSH接続したいサーバー  |~/.ssh/dest.key  |dest_user  |192.168.0.1 |

```
$ ssh -o ProxyCommand='ssh -o ProxyCommand="ssh -i ~/.ssh/humidai_2.key -W humidai.xxxxx.jp:22 humidai_2.xxxxx.jp" -i ~/.ssh/humidai.key -W %h:%p humidai.xxxxx.jp' -i ~/.ssh/dest.key dest_user@192.168.0.1
```
無料で読める統計学・機械学習周辺のチュートリアル論文や講義ノート10本

#はじめに
千葉大学/Nospareの[米倉](https://sites.google.com/site/shoutoyonekura/)です．今回は，統計学・機械学習周辺で，僕が良いと思ったチュートリアル/サーベイ論文と講義ノートを簡単なコメント付きで紹介したいと思います．チュートリアル論文やサーベイ論文は，そのトピックの解説や教育面にフォーカスしていて，何か勉強したり，網羅的に把握するときに非常に便利だと個人的に思います．また公開されている講義ノートの中には非常に勉強になるものが多くあります．内容は僕が興味があるトピックに偏っています．またすべて無料で読めます．（教科書等の海賊版みたいなのは載せていません）

#10本の紹介
+ [Nickl "STATISTICAL THEORY"](http://www.statslab.cam.ac.uk/~nickl/Site/__files/stat2013.pdf)  
Nicklの統計学の講義ノートです．いわゆるM推定量の漸近的性質に加え，バーンスタイン・フォンミーゼズ定理等も証明付きで解説されており，上級レベルの数理統計学を学ぶのに重宝すると思います．
+ [Doucet and Johansen "A Tutorial on Particle Filtering and Smoothing:
Fifteen years later"](https://www.stats.ox.ac.uk/~doucet/doucet_johansen_tutorialPF2011.pdf)
逐次モンテカルロ法を特に状態空間モデルへ応用した時のチュートリアル論文です．数学のレベルは抑え，簡単に様々な方法や基礎的な結果が紹介されています．逐次モンテカルロ法を学びたいと思った人は，この論文から始めることをお勧めします．

+ [Naesseth et al. "Elements of Sequential Monte Carlo"](https://arxiv.org/pdf/2007.11936.pdf)
こちらも逐次モンテカルロ法についてのチュートリアル論文ですが，状態空間モデルではなく一般のモデルに対する応用や機械学習的トピックへの応用がメインです．特にML系の文脈での逐次モンテカルロ法をおさえるのにいいと思います．

+ [Roberts and Rosenthal "General state space Markov chains and MCMC algorithms"](https://projecteuclid.org/euclid.ps/1099928648)
マルコフ連鎖とMCMCの理論について解説されているチュートリアル・サーベイ論文です．特にカップリングと言う手法を用いた，MCMCのエルゴード性について詳しく書かれています．MCMCの理論に興味がある人におすすめです．

+ [Bou-Rabee and Sanz-Serna "Geometric integrators and the
Hamiltonian Monte Carlo method"](https://arxiv.org/abs/1711.05337)
ハミルトニアン・モンテカルロについてのサーベイ論文です．サーベイ論文ですが，各種の証明や基礎的な命題等も網羅されているので，ハミルトニアン・モンテカルロの勉強に非常に良いと思います．

+ [Slivkins "Introduction to Multi-Armed Bandits"](https://arxiv.org/abs/1904.07272)
多腕バンディット問題のチュートリアル論文です．様々な多腕バンディットの代表的アルゴリズムとその性質が証明付きで解説されていて，また疑似コードも一応掲載されいているので非常に勉強になりました．

+ [Eberle "Markov processes"](https://uni-bonn.sciebo.de/s/kzTUFff5FrWGAay)
マルコフ連鎖とマルコフ過程の講義ノートです．兎に色々と証明付きで数学的に厳密に解説されていて良いです．またMCMCのエルゴード性などへの応用も解説されています．

+ [van Handel "Hidden Markov Models"](https://web.math.princeton.edu/~rvan/orf557/hmm080728.pdf)
隠れマルコフモデル（状態空間モデル）の講義ノートです．隠れマルコフ自体の安定性の解説や，逐次モンテカルロ法の性質についての証明等が結構丁寧に書かれています．

+ [Creel "Econometrics notes "](https://github.com/mcreel/Econometrics)
計量経済学のノートです．基礎的なことに加えて，計算機を多用する分野が作者の専門もあって解説されていてます．特徴はJuliaを用いたサンプルコードが非常にたくさん紹介されている点です．

+ [Back "Learning Theory from First Principles"](https://www.di.ens.fr/~fbach/learning_theory_class/)
統計的機械学習（学習理論）の講義ノートと講義サイトです．モデル選択やノンパラ統計等に加えて，ニューラルネット等の主に数理的解析が解説されていて勉強になります．

#一緒にお仕事をしましょう！
今回の内容に関連する共同研究・各種お問い合わせにつきましては，お気軽に米倉までご連絡ください．また，株式会社Nospareでは統計学の様々な分野を専門とする研究者が所属しております．統計アドバイザリーやビジネスデータの分析につきましては[株式会社Nospare](https://bit.ly/38WtGZH) までお問い合わせください．
<a href="https://bit.ly/38WtGZH">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1023506/d5c625c0-d6f4-680b-d702-3c40f11d6c39.jpeg" alt="株式会社Nospare" width=400>
</a>