OmniAICreator/Qiita-1.07M huggingface dataset:
Ansibleの暗号化

###Ansible Vault
Ansible Vaultとは、パスワードを用いてYAMLファイルを暗号化する仕組み。このコマンドを利用して暗号化したファイルを作成すると、ファイルの内容を読み取ることができなくなる。<br>処理を実行する際は、設定したVaultパスワードを渡すだけでプレイブックの実行が可能。<br>また、変数ファイル、インベントリの暗号化も可能。

###形式
```
ansible-vault [オプション] ファイル名
```

###オプション
暗号化ファイルを作成する<br>

```
create
```
<br>
暗号化ファイルを標準のテキストファイルに復号する

```
decrypt
```
<br>
標準のテキストファイルを暗号化する

```
encrypt
```
<br>
暗号化ファイルの編集を行う

```
edit
```
<br>
暗号化ファイルに設定しているVaultパスワードを変更する

```
rekey
```
<br>
暗号化ファイルの中身を復号して出力する

```
view
```
<br>
###ベストプラクティス
####ログの標準出力の回避
プレイブックに詳細オプション（-v）を付けて実行すると、暗号化したファイルを利用しても、標準出力に内容が表示されてしまう。<br>暗号化した変数を利用する場合は、「no_log」ディレクティブを利用して、標準出力に内容が表示されないようにする必要がある。

```
- name: Secret task
  shell: echo {{ secret_value }}
  no_log: true
```
####変数の暗号化
Ansible Vaultを利用して暗号化すると、ファイルの中身が読めないため、暗号化した変数名まで分からなくなる。
暗号化する変数が定義されたファイルと、暗号化されないファイルを分けて管理するのがベスト。

####Vaultの高速化
デフォルトではPyCryptoが利用されているため、多くのファイルを暗号化、復号すると時間がかかる。
cryptographyを利用すると暗号化、復号する処理の高速化が可能。
インストールの方法によっては、すでに入っている可能性あり。

###参考
IT技術者のための現場ノウハウ　Ansible実践ガイド／北山晋吾　著
UserDefaultsを使ってアプリ起動画面を動的に切り替える

## はじめに
アプリインストール後 初めてアプリを開いた場合はサインアップ画面に遷移し、
2回目以降はログイン画面に遷移するような実装をつくりました。

調べた中でUserDefaultsを使うのが一番簡単そうだったので紹介します。

## UserDefaultsとは
アプリ起動時にキーと値のペアを自動的に保存してくれる便利な機能。
（アプリを削除するとUserDefaults内のデータも全て消えるため、重要なデータをUserDefaultsのみに持たせるべきではない。
Token等のセキュアな情報はKeychainAccessを使う。）

### キーに値を設定する方法
```
UserDefaults.standard.set(保存したい値, forKey: キー)
```
### 値を取得する方法
```
UserDefaults.standard.bool(forKey: キー）
```
キーに対応する値が無い場合は、falseが返る。
他にもstringやarrayなど様々パターンがあるが、今回は起動したことがあるか否かの２パターンのためboolを使う。

## 実装
※前提
ログイン画面のStoryboard名は「Login.Storyboard」、Storyboard IDは「LoginViewController」
サインアップ画面のStoryboard名は「SignUp.Storyboard」、Storyboard IDは「SignUpViewController」と設定しております。

### 方針
【初めて起動したときの流れ】
①UserDefaults.standard.bool(forKey: "起動履歴あり") でfalseが返る（値が存在していないから）
②サインアップ画面に遷移させる
③UserDefaults.standard.set(true, forKey: "起動履歴あり")で次回以降はtrueを返すように設定する

【２回目以降に起動したときの流れ】
①UserDefaults.standard.bool(forKey: "起動履歴あり") 判定でtrueが返る
②ログイン画面に遷移させる

### コード
```swift:SceneDelegate.swift
class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

        guard let _ = (scene as? UIWindowScene) else { return }

        // ここから起動チェック
        if UserDefaults.standard.bool(forKey: "起動履歴あり") {
            // 初期画面をログイン画面にする
            self.window?.rootViewController = createNavigationController(storyboardName: "Login", storyboardId: "LoginViewController")
        } else {
            // 初期画面をサインアップ画面にする
            self.window?.rootViewController = createNavigationController(storyboardName: "SignUp", storyboardId: "SignUpViewController")
            UserDefaults.standard.set(true, forKey: "起動履歴あり")  // 一度起動したので値をtrueに設定する
        }

        self.window?.makeKeyAndVisible()
    }

    // 画面遷移のメソッド
    func createNavigationController(storyboardName: String, storyboardId: String) -> UINavigationController {
        
        let storyboard = UIStoryboard(name: storyboardName, bundle: nil)
        let viewController = storyboard.instantiateViewController(withIdentifier: storyboardId)
        
        let navigationController = UINavigationController()
        navigationController.viewControllers = [viewController]
        
        return navigationController
    }
}

```

## 最後に
UserDefaultsは準備不要でいきなり使えるからかなり手軽で便利でした。
もっとスマートに書く方法があったら教えて下さい。

## 参考URL
https://qiita.com/uhooi/items/429cac9b798b9c0937ae#%E8%BF%BD%E5%8A%A0%E6%9B%B4%E6%96%B0
ありがとうございました！
[TypeError: Converting circular structure to JSON] JSON.stringify()の時にエラーが出る


# コード
```js
const params = {
  user_id: firebase.auth().currentUser.uid,
  id_token: firebase.auth().currentUser.getIdToken(false), // await が必要
}

const body = JSON.stringify(params) // エラー発生
```

## エラー
```
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'C'
    |     property 'c' -> object with constructor 'C'
    |     property 'b' -> object with constructor 'zc'
    --- property 'a' closes the circle
    at JSON.stringify (<anonymous>)
    at _callee4$ (common.js?4edf:57)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)
    at eval (asyncToGenerator.js?1da1:32)
    at new Promise (<anonymous>)
    at Object.eval (asyncToGenerator.js?1da1:21)
```

# 原因
`await`の付け忘れ。

# 解決コード
```js
const params = {
  user_id: firebase.auth().currentUser.uid,
  id_token: await firebase.auth().currentUser.getIdToken(false), // awaitをつけた
}

const body = JSON.stringify(params)
```
【Java】String型に変換するvalueOfメソッドとtoStringメソッドについて

#プログラミング勉強日記
2020年11月29日
前に[toString()メソッドの使い方](https://qiita.com/mzmz__02/items/6480a2ba316e4cfbea0f)について扱ったが、今回valueO()メソッドでもString型に変換することができることを知った。それを踏まえてJavaでString型に変換するために使われる2種類のメソッドの違いとそれぞれの使い方についてまとめる。

#valueOfメソッドとは
　引数に指定した様々な型の形をString型の文字列として返すことができる。

```java:基本的な書き方
String.valueOf(変換する値);
```

##valueOfメソッドのサンプルコード
　short型、int型、long型、float型、double型をそれぞれvalueOfメソッドを使用してString型に変換する。

```java
public class Main {
    public static void main(String[] args) throws Exception {
 
       // short型からString型に変換する
        short sh = 100;
        String strsh = String.valueOf(sh);
        System.out.println("short型からString型 : " + strsh);
        
        // int型からString型に変換する
        int num = 100;
        String strnum = String.valueOf(num);
        System.out.println("int型からString型 : " + strnum);
        
        // long型からString型に変換する
        long lon = 100;
        String strlon = String.valueOf(lon);
        System.out.println("long型からString型 : " + strlon);
 
        // float型からString型に変換する
        float fl = 100;
        String strfl = String.valueOf(fl);
        System.out.println("float型からString型 : " + strfl);
        
        // double型からString型に変換する
        double db = 100;
        String strdb = String.valueOf(db);
        System.out.println("double型からString型 : " + strdb);
    }
}
```

```:実行結果
short型からString型 : 100
int型からString型 : 100
long型からString型 : 100
float型からString型 : 100.0
double型からString型 : 100.0
```

#toStringメソッドとは
　数値型などをString型に変換するために使う。引数にString型の文字列に変換したい引数を指定し、戻り値はString型の文字列を返す。

##toStringメソッドのサンプルコード

```java:
public class Main {
  pubic static void main(String[] args) {
    int num1 = 1234;
    int num2 = 5678;
    System.out.println(num1 + num2);

    // 数値を文字列に変換する
    String str1 = Integer.toString(num1);
    String str2 = Integer.toString(num2);
    System.out.println(str1 + str2);
  }
}
```

```:実行結果
6912
12345678
```

#valueOfメソッドとtoStringメソッドの違い
　基本的にはメソッドの目的は同じであるが、変換する対象の値が<b>nullの場合の動作が異なる</b>。
　Integer型の値にnullを設定してString型に変換する場合、valueOfメソッドの場合はString型のnullを返すが、toStringメソッドの場合はnull参照時の例外が発生する。なので、<b>toStringメソッドを使用する場合は変換する値がnullでどうか確かめる</b>必要がある。


#参考文献
[【Java入門】数値を文字列へ変換する方法(valueOf/toString)](https://www.sejuku.net/blog/19727)
[【Java】toString()メソッドの使い方](https://qiita.com/mzmz__02/items/6480a2ba316e4cfbea0f)
C++ クラス基礎 継承 メンバ初期化リスト ポインタ

## サンプル
C++のクラス基礎として
・継承：親クラスと子クラス 
・メンバ初期化リスト 
・ポインタ
・コンストラクタ
・デストラクタ
を実行される流れとともに確認できます。
基礎としてはこんなところでしょうか。

```C++:Cplusplus_class.cpp
#include <iostream>

class Food 
{
public:
    Food()//コンストラクタ
    {
        std::cout << "Food コンストラクタ" << std::endl;
    }
    ~Food()//デストラクタ
    {
        std::cout << "Food デストラクタ" << std::endl;
    }
};

class Rice : public Food
{
public:
    //メンバ初期化リスト　コンストラクタ
    Rice() : Hakumai(0), Genmai(0), Rokkoku()
    {
        std::cout << "Rice コンストラクタ" << std::endl;
    }
    ~Rice()//デストラクタ
    {
        std::cout << "Rice デストラクタ" << std::endl;
    }
    void ShowHakumaiValue() {
        std::cout << "Riceの中のHakumai = " << Hakumai << std::endl;
    }
private:
    //メンバ変数
    int Hakumai;// = 0;
    int Genmai;// = 0;
    bool Rokkoku;
};

int main()
{
    std::cout << "スタート" << std::endl;
    //ポインタ
    Rice *rice;
    rice = new Rice();
    rice->ShowHakumaiValue();
    delete rice;
    std::cout << "エンド" << std::endl;
    return 0;
}
```

出力結果

```
スタート
Food コンストラクタ
Rice コンストラクタ
Riceの中のHakumai = 0
Rice デストラクタ
Food デストラクタ
エンド
```
gnome の閉じるボタンとかの位置を変更

# 環境
- Ubuntu 20.04.1 LTS
- GNOME Shell 3.36.4

# gnome のボタン
こいつらのことです
![Screenshot from 2020-11-29 19-11-15_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305403/216ca53b-b23e-1664-19cf-bf789d817a72.png)

# 現在の設定を確認

```
$ gsettings get org.gnome.desktop.wm.preferences button-layout
':minimize,maximize,close'
```

# 設定を変更
Mac みたいに左側に出す

```
$ gsettings set org.gnome.desktop.wm.preferences button-layout 'close,minimize,maximize:'
```

![Screenshot from 2020-11-29 19-29-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305403/baf593b4-91eb-27d7-1aec-aa45458b9f25.png)

# もとに戻す

```
$ gsettings reset org.gnome.desktop.wm.preferences button-layout
```

# おわり
おわりです
【NeosVR】波紋【基礎練習】

はじめに
---
この記事は「[NeosVR Advent Calendar 2020](https://adventar.org/calendars/5277)」の3日目です！
昨日は、@rhenium_vrcさんの[【NeosVR】お気に入りComponentを紹介する](https://qiita.com/rhenium_vrc/items/aa271c844acf291ae711)でしたω

---
僕(https://twitter.com/TewiEwi_no96) がNeosVRで人にモノづくり教える時に説明する内容を記します。
NeosVRが好きになるキッカケになってもらえると嬉しいです。
必要知識
---
・デブチップの使い方(https://neosvrjp.memo.wiki/d/DevToolTip)
波紋を作ってみよう！
---
先ずはデブチップを装備してコンテキストメニューを開き『新規作成』をトリガー。
ブラウザが出現しますので、空オブジェクトをトリガーします。

選択されているオブジェクトの黄色い☆ボタンを押すと
子オブジェクトが追加されますので、以下のような階層構造にしてください。

object
┗Visual
　┗render
　　┣Mesh
　　┗Material
　　　┣Texture
　　　┗Panner
![20201129183135_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556177/cf18e449-45c9-f9a3-4ed7-c0776712122c.jpeg)
<B>下記のオブジェクトにAttach Componentをトリガーしてコンポーネントを追加していきます。</b>
<b>・Mesh</b>
Assets -> Procedual Meshes -> CircleMesh　(メッシュを決めます)

<b>・Material</b>
Assets -> Materials -> UnlitMaterial　(マテリアルを決めます)
設定値変更
Texture: null → GridTexture(後出)
TintColor:
 R:1 → 0.2
 B:1 → 3
BlendMode:Opaque → Alpha
PolarUVmapping: ☐ → ☑　(波紋っぽいUVスクロール)

<b>・render</b>
Renderering -> MeshRenderer　(レンダリングします)
設定値変更
Mesh: null → CircleMesh
Materials(list):add
0:null → UnlitMaterial

<b>・Texture</b>
Assets -> Procedual Textures -> GridTexture (テクスチャを作ります)
設定値変更
Size: X：0 → 56 Y：0 → 56
Format:Unknown → ARGB32
BackgroundColor:A:1 → 0
Grids(list):
 Spacing : x:32 → 128 y:32 → 64
 Offset : 16 → 64 y:16 → 4
 LineColor : R: 1 → 0 G:1 → 0 B:1 → 0

<b>・Panner</b>
Transform -> Drivers -> Panner2D
設定値変更
_target: null → UnlitMaterial->TextureOffset
_speed: y: 0 → -0.5

<b>・object</b>
Transform -> Interaction -> Grabbable　(つかめるようにします)
設定値変更
Scalable: ☐ → ☑　(サイズを変更できるようにします)
![20201129190953_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556177/58e11474-fadf-bb7b-a763-f6f672af67bd.jpeg)
動画も撮りましたので参考にどうぞ～
---
https://www.youtube.com/watch?v=Ah7xgnIczXo&feature=youtu.be

FUNBOXで支援してもらえると記事を書く励みになります。
---
https://frick.fanbox.cc
最後に
---
・明日は、@さんの「」です
WSL2のUbuntu20.04 でroot以外のユーザーでnpmコマンドが使えない

#環境
- Windows 10 Pro
- WSL2
- Ubuntu20.04

#状況
アプリケーション一覧からUbuntu20.04を起動し

```bash
sudo apt install npm
```
でnpmをインストールした後,

```bash
npm --version
```
実行すると,

```bash
-bash: /mnt/c/Program Files/nodejs/npm: /bin/sh^M: bad interpreter: No such file or directory
```

```bash
sudo su
```

してからrootユーザーで実行すると普通にバージョン情報が出力される.
あと, PowerShell経由で`wsl`コマンドで実行すると発生しない.

#改行コードをCRLFからLFへ変更

色々調べてると改行コードが悪さしてそうだったので, 
CRLFからLFに変える

無精してVSCodeで変更
![screen_npm_CRLF_to_LF.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677894/e11c4da8-7727-7566-7266-5577528574c7.jpeg)
CRLFを選択して, 
![screen_npm_CRLF_to_LF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677894/56ecbeca-93b6-368c-c132-ec98da1b6cd5.png)
LFを選択.

一旦, `exit`して再起動.

```bash
$ npm -v
6.14.4
```

#参考
- https://stackoverflow.com/questions/62947245/why-executing-npm-version-in-wsl2-as-specific-user-resulting-bad-interpreter
- https://qiita.com/ayasumi_primary/items/0225d5c89ff1f2e7e217![screen_npm_CRLF_to_LF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677894/b6764305-f44f-58e1-b128-09ee97263d55.png)
Raspberry Pi 3B+でタッチスクリーン

#概要
Amazonで購入したタッチ機能付きTFT液晶を設定したので覚え書き

#実施環境
本体：Raspberry Pi 3B+
OS：Raspberry Pi OS buster 2020-8-20
タッチスクリーン：Quimat 3.5インチタッチスクリーンQC35C
https://www.amazon.co.jp/gp/product/B075K56C12/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1

#参考サイト
https://www.souichi.club/raspberrypi/touch-screen/#%E8%A8%AD%E5%AE%9A
Amazon購入リンク先のレビュー欄

#Raspberry Pi OSのインストール
省略
aptのパッケージ更新まで実施

#ドライバのインストールと設定
###ドライバの取得
取得後にディレクトリのアクセス権を変更

```terminal
git clone https://github.com/goodtft/LCD-show.git
～省略～
sudo chmod -R 755 LCD-show
```

###ドライバのインストール
これを実行すると自動的に再起動する

```terminal
cd LCD-show/
sudo ./MPI3508_480_320-show
～省略～
```

###タッチ機能の有効化
タッチパネル機能はHDMIポートが付いている方向が下のようなので、
途中で画面を180°回転させる

```terminal
sudo nano /boot/config.txt
```

テキストエディタが起動するので下記の内容を追記
※念のため、```dtparam=spi=on```がonになっているかを確認する

```
display_rotate=2
dtoverlay=ads7846,penirq=25,speed=10000,penirq_pull=2,xohms=150,swapxy=1
```

###Raspberry Piを再起動

```terminal
sudo reboot
```
Gitコマンドにエイリアス(alias)を付けて入力を楽にしよう

ターミナル上などでGitコマンドを入力するのは大変ですよね。
そんな時は<font color=blue>エイリアス(alias)</font color>を使って楽をしましょう〜。


#### ちなみにエイリアスとは
alias (コマンド) - UNIXなどにおいてコマンドを別名で登録したもの。別名を登録するコマンド名(Wikipediaより)

### 設定方法

<font color=red>それでは設定方法を解説します。</font color>

```zsh:ターミナル

$ git config --global alias.<ここに省略名> <ここに元のコマンド名>

例：$ git config --global alias.co checkout
```

上記のように設定します。

ちなみに
**--global**を付けることによってユーザーの設定に反映します。（通常はこれで良いかと思います）
**--system**にするとPC全体の設定になります。
上記を付けない場合は**(git config alias.〜)**そのリポジトリのみの設定となります。

<font color=blue>**優先順位は 【リポジトリ > ユーザー > PC】 になります**</font color>

#### もう一つの設定方法

<font color=red>もう一つの設定方法も解説します。</font color>

先程のコマンドは結論としてgit configに設定しているので直接git config画面から設定するという方法です。
<font color=red>以下が設定方法です。</font color>

```zsh:ターミナル
$ git config --global --edit
$ git config --system --edit
$ git config --edit (localの設定)
```
上記を入力することでgit configの設定画面が表示されますのでそこで入力します。
入力したいところで任意のキーを押すもしくは「i」を押すとinsertモードになって入力モードになります。
下の方にスクロールしていくとこんな箇所があります。
<a href="https://gyazo.com/71cb3c30e5bfc425255383d359bfc3e7"><img src="https://i.gyazo.com/71cb3c30e5bfc425255383d359bfc3e7.png" alt="Image from Gyazo" width="214"/></a>
ここで直接エイリアスの設定を変更したり削除したり出来ます。

## おわりに
いかがでしたでしょうか。
皆さんもGitコマンドにエイリアスを使ってGitの操作をどんどん楽にして行きましょう〜(^o^)

# 参考にさせて頂きましたサイト
-  [gitで便利なエイリアス達
](https://qiita.com/peccul/items/90dd469e2f72babbc106)
- [【git】aliasの設定方法](https://qiita.com/chihiro/items/04813c707cc665de67c5)
app制作　vol.1初期設定

# はじめに
今回、会社の同期と一緒にアプリの開発をすることになったので、その作業記録として記事を書くことにした。
自分の担当はフロント
Reactを使って作成していく予定

# auto deployの設定
作成したアプリは、メンバーが立ててくれたAWSサーバで公開する予定、コードの管理はGitを使う。
ローカルマシンで作成したコードをGitにpushし、本番サーバにdeployするという流れ。
Gitにpushした変更を本番サーバに自動でdeployするための設定についてここで書く。
GitHub上での設定項目は、メンバがやってくれたので[こちら（後日追加）]()を参考に。
Jenkinsを用いているので、本番サーバのjenkinsにログインして、設定をいじっていく。

コードがpush/mergeされると、GitHubから本番サーバのJenkinsに通知がとび、設定されている処理が実行される。
まずは、Gitから最新のコードをpullする処理を記述する。
設定ページの’ビルド’の項目を編集する
<details><summary>ビルド手順の追加　から　シェルの実行を選択し、</summary>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918675/d7270fb3-820c-b01f-ead2-a46ff165c1f0.png)</details>
<details><summary>gitのリポジトリがあるユーザへのログイン、git pullの実行を行うコマンドを記述する
</summary>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918675/2b71cd27-303e-5cc0-b777-416b8753d5d9.png)</details>
```-t -t``` オプションはdeploy実行時に、```Pseudo-terminal will not be allocated because stdin is not a terminal.```エラーが発生する場合があるため、その対策としてつけている

# 雛形の作成
まずはdeployの確認として、 reactAppの雛形を作成し、それをpushしてみる
```npx create-react-app ${プロジェクト名}```を実行し、プロジェクトフォルダと雛形を作成する
ローカルで関連ライブラリのインストール、実行の確認をしたら、gitにpushする

# deployの確認
pushをした後、本番サーバのJenkinsにログインし、ビルドが実行できているか確認する。
このとき自分が遭遇したエラーは、前述のビルド時のSSHログイン時に標準出力がないというエラーと、SSH先がknown_hostsに登録されておらず発生した、```Host key verification failed.```エラーの２つ。
後者のエラーは本番サーバにSSHクライアントでログインした後、jenkinsにユーザスイッチし、コンソール上で一度SSHを実行して、接続先を登録すれば解決する。

# 後書き
今回は、auto deployの設定を中心にまとめた、実際は、ビルドのたびにライブラリのインストールの確認など、追加しなければならない処理はあるが、追々追加していく予定。

# 参考文献
- https://sil.hatenablog.com/entry/jenkins-github-auto-deploy
【個人アプリ作成】情報管理アプリ制作1日目

Toshiです！自分の経過を残すために、個人アプリの制作の記録を残していこうと思います！！

正直、覚えたことを落とし込むのでは習慣を守るのがかなり厳しい、、、、
と言うわけで自分のキャッチアップや技術配信と、自分の個人アプリやPF作成などの成長日記の二本軸で書いていこうと思います！！


#そもそも何を作ろうとしているか

私は某プログラミングスクールでruby on railsやJSを学びました（まだ通学中ですが、、）。3ヶ月で一通りの作成要件は完了し、個人アプリ作成に移りました。
今作っているのは、引継ぎや情報管理の場面をメインとした少しBtoB向けの情報統制アプリを作っています。

簡潔に言うと情報管理して、検索とかですぐ見つけられる、「小さなGoogle＋Trello」的なイメージです！


#今日やったこと

前提として1日目とか言いましたが、アプリの要件定義やペルソナを、画面デザイン、部分的にはDB設計などを行い、この日を迎えています。これらも踏まえた反省とやったことを今回は記載しようと思います。

今日やれたこととしては
>・アプリケーション作成
 ・devise ジェムのインストール
 ・ログイン画面、新規登録画面のView作成
 ・ログイン、新規登録機能の作成
 ・ログイン後のマイページの表示
 ・未ログインユーザーのリダイレクト

です！とりあえず、目標とするログイン実装と画面の実装はできました。


#やっていて思ったこと

ざっとですが、deviseのテンプレート画面をデザインし直してこんな感じのログイン画面を作りました。
![スクリーンショット 2020-11-29 19.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759485/c81c5a4d-4346-c167-ec5e-6ae4527c87f5.png)

はっきり言うとほぼ流用です。参考にしたのは@Tamitchaoさんの下記の記事です。
https://qiita.com/Tamitchao/items/8e78d87659794f2b07ee


Googleでデザインを参考にできそうなものは見つけられましたが、作るとなると今の自分では作成の一歩が全くわからないと言う感じでした。。。まだまだHTML/CSSは技術不足なんだと痛感しました。


次にアプリ制作に入った時。ユーザー作成をやろう！！と意気込んだものの、DB設計や画面デザイン、アプリケーションの要件定義が曖昧で序盤の序盤で手が止まってしまいました。
ただ、よかったことはdeviseの扱いがいくら分かっていても、大もとのデザインや設計、要件定義が甘いと何もできないことを知れたことです。自分の計画性を改めて見直しできたことと、今後の実装ついての正しいフローを知ることができました。


#まとめ

まとめるとこんな感じです。

>①個人アプリ制作のViewファイル作成はHTML/CSSは学んだだけではダメ。実践を積み重ねてこそ身に付くこと。欲を言えば数回、自分でViewファイルやHTML/CSSを自由に作ってみること。（これは機会を見てトライ）
 ②アプリ機能制作やView作成は、特に初心者の場合はしっかり要件定義やDB設計、アソシエーション、デザインを固めてから。

初日で勉強になること、初めて知ることがたくさんで楽しいです！！引き続き、書いていければと思います！！
焼き芋屋の場所をシェアするスマホサイト（半アプリ）を作った。



#焼き芋が食べたい！移動販売の！

私の小さいころは、
よくトラックの焼き芋屋さんを見かけました。
焼きたては、とても美味しかった！
**焼きたてだから**、美味しかったと思います。
でも、
最近は見かけなくなりました。

#スマホで探せるか？
探してみました。
・焼き芋専門店は見つかるけど、遠い・・・
　　（最近増えた？）
・移動販売の弁当屋さんターゲットのはあるけど、焼き芋はない
　　（見つけられないだけ？）
　
#じゃあ作ろう、でも・・・・
Ｃ系の仕事が中心だったのでＷｅｂ系の技術はほとんど、
Wordpressをつかって、ＨＰを作るのは出来るが、
それ以外は致命的にやってこなかった。
・**html直書きが普通でしょ？**
・**cssってなに？**
・**javascriptは訪問カウンタ？**
ほんと、
前世紀で止まっている（笑）

#どんなのにしようか？
**じゃらんやホットペッパーみたいな、「お店が掲載する」みたいなのはめんどくさい。**
ー＞店主でもファンでもいいので地図上に「場所を投稿」してもらうサイトにしよう。
**移動販売しているのを探せるようなのがいい**
->投稿情報に掲載期限を設けよう（当日のみがいい）
**専門店も探せないと**
->こっちは投稿情報に掲載期限ナシに
**コンビニやスーパーあるよ**
->専門店とは種類をわけて置こう

だいたい、骨子は固まった。


#ついでに、パート１「グーグルマップを使う」
ホームページで地図は普通に見るのだが、
使ったことはなかった。
しかも**「グリグリ動く地図」**だから、
javascriptで、、、勉強しなおしだ。



#ついでに、パート２「ＰＷＡってやつ、なんか便利そう」
スマホアプリを作りたいと思ったのだが、
さすがに色々と知識が足りなさ過ぎ、、、
で、見つけたのが、
**PWA**
**「ホームページを作るノリで**
**　モバイルアプリっぽく出来る**
**　android,ios両対応」**

おお、これは俺にとってすごく助かる


#で、、、できた。やっと、できた　∈( ´_______` )∋
詳細は省くが、苦節１０ヶ月かかった。
去年の焼き芋シーズン終わりから初めていたのだが、
既に今年のシーズンが始まってしまった。。。

他にも色々やっていたのも悪いのだが、
系統だって説明してくれるHPがうまく見つけられず
バージョンの違うＡＰＩの説明ＨＰに惑わされ、四苦八苦しました。



#で、サイトは
こちらです。
**[焼き芋屋さんの場所をみんなでシェア]**
https://app.yakiimoshop.com/?ads=32



![screanshot_samsung-galaxynote5-white-portrait.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276480/dcd294c3-f4c5-ad78-4e54-62dcd3985072.png)
こんな感じに、なりました。
先にコンビニ（ローソン100)の情報は載っけたので、寂しい画面ではないように出来ました。
焼き芋専門店も見つけては載せていってます。
今のところ、ツイッターで見つけた情報とかを追加追加してます。

#現状、というかサイトの出来は、、、
技術的には、とても拙いものです
**恥さらしじゃないか**みたいなサイトです(ﾜﾗ

でも、とりあえずやりきりました。
それだけで、今のところ満足　<(｀^´)> エッヘン
ちょっとずつ、改善予定。


#焼き芋屋さんの情報、求む
**ぜんぜん足りてません。**
**すっかすか**な地域がたくさんあります。
見つけたら、投稿して欲しいです。
（店主からの投稿、せつに望みます）


正直
サイトが出来上がってから、
ネットで焼き芋屋さんがどこにいるか調べましたが（今も調べ続けてます）
**焼き芋屋さん、すくなっ**
と思ってます。
専門店が出来たと、聞いたりするのですが、
他のスイーツに比べれば、圧倒的に少ない気が・・・・
（一つの町に１つ、あるかどうか？）




結局、
私の住所の近くには、なかなか見つからず、
美味しい焼き芋、今年はまだ、食べれていない。。。
（すみません、技術情報、特にないです）
容器と水量 (小学生算数5テスト投稿)

# 容器と水量 (小学生算数テスト投稿)
TeXマクロ部分
$\def\fraction(#1/#2){\frac{#1}{#2}}$ $\def\bunsu(#1/#2){\frac{\,#1\,}{\,#2\,}}$ $\def\DIS{\displaystyle}$ $\def\unisq{\mathrm{cm^2}}$ $\def\unicube{\mathrm{cm^3}}$

## ★2

たて 15cm，横 20cm，高さ 12cmの直方体の形をした容器に，10cm の深さまで水が入っています。この容器に石を完全に沈めたところ，水が150$\DIS \unicube$こぼれました。これについて，次の問いに答えなさい。

(1)　この石の体積は何$\DIS \unicube$ ですか。


![](https://i.imgur.com/ekJK4gh.png)

(2)　この後，沈めた石を取り出しました。このとき，容器に入っている水の深さは何cmになりますか。ただし，石を取り出すときに水はこぼれなかったものとします。

![](https://i.imgur.com/4BwzZvZ.png)
組込みソフト屋のシゴト HWテストプログラム Tweetまとめ

「組込みソフト屋のシゴト HWテストプログラム」と題してしてTwitterに４連投したのだけど、葬り去るのはもったいないので、まとめておく

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E7%B5%84%E8%BE%BC%E3%81%BF%E3%82%BD%E3%83%95%E3%83%88%E5%B1%8B%E3%81%AE%E3%82%B7%E3%82%B4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#組込みソフト屋のシゴト</a> HWテストプログラム1<br>試作基板が上がってくるとまずハード屋さんが電源まわりのチェックを行い、次いでマイコン(MPU)が搭載デバイスに正しくアクセスできるかプログラムを使ってチェックする。通常OSなしで、メモリとデバイスにアクセスするためのドライバからなる。（続く）</p>&mdash; SONODA Takehiko (@OzoraKobo) <a href="https://twitter.com/OzoraKobo/status/1304460342240583680?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E7%B5%84%E8%BE%BC%E3%81%BF%E3%82%BD%E3%83%95%E3%83%88%E5%B1%8B%E3%81%AE%E3%82%B7%E3%82%B4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#組込みソフト屋のシゴト</a> HWテストプログラム2<br>テストプログラムはシリアル通信（通常はUART）でパソコンとつなぎ、コマンドで操作できるようにしてある。僕らはシェルと読んでいたが、モニタとも呼ばれる。メモリのリード/ライト、GPIOの設定・入出力、その他のインタフェースをチェックする。(続く）</p>&mdash; SONODA Takehiko (@OzoraKobo) <a href="https://twitter.com/OzoraKobo/status/1304744554193547265?ref_src=twsrc%5Etfw">September 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">組込みソフト屋のシゴト HWテストプログラム3<br>テストが期待される結果にならなかったときは回路のミスが考えられテスターやオシロを使って確認します。プローブを当てる場所やどいういう波形が出るかなど回路やデータシートを読むこと必要です。バスやSDRAM設定の調整でもオシロを使います。（続く）</p>&mdash; SONODA Takehiko (@OzoraKobo) <a href="https://twitter.com/OzoraKobo/status/1305866694586445824?ref_src=twsrc%5Etfw">September 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E7%B5%84%E8%BE%BC%E3%81%BF%E3%82%BD%E3%83%95%E3%83%88%E5%B1%8B%E3%81%AE%E3%82%B7%E3%82%B4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#組込みソフト屋のシゴト</a> HWテストプログラム4<br>テストプログラムは基板ができる前に作り始めますから、新規の時は同じMPUの評価ボードを使って開発します。本来のソフトも始めは評価ボードで開発することもあります。マイコン基板が評価ボードの構成に合わせてあるとソフト屋は助かります。（終）</p>&mdash; SONODA Takehiko (@OzoraKobo) <a href="https://twitter.com/OzoraKobo/status/1306551122761453568?ref_src=twsrc%5Etfw">September 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Jupyter Notebook を日本語で書き出す


この記事は jupyter notebook を 日本語を含む pdf に書き出す方法についてのものです．

## 環境

| | version |
| --- | --- |
| OS | macOS Big Sur 11.0.1 (Catalina でも動作確認済) |
| jupyter notebook | 6.1.4 |
| jupyter nbconvert | 6.0.7 |
| jupyter nbextensions | 6.1.4 |
| texlive | 2020 (2017 でも動作確認済) |
| pandoc | 2.11 |

## nbconvert をインストールする

conda や pip を使って nbconvert をインストールする．
詳しくは[公式ページ](https://nbconvert.readthedocs.io/en/latest/install.html)を参照．

## テンプレートを作る

デフォルトでは，notebook を pdf に書き出す際に日本語が埋め込まれない．
これは，`.ipynb` -> `.tex` -> `.pdf` の順に変換を行っているためである．
そのため， latex に変換する際に日本語用のテンプレートを用意する必要がある．

以下のような jinja2 のテンプレートファイル (`.tex.j2` 多分拡張子はなんでも良い) を作る．名前はなんでもよいが，以下では`ja_template.tex.j2` とする．

```python:ja_template.tex.j2(texlive2020)
((*- extends 'index.tex.j2' -*))

%===============================================================================
% Latex Article
%===============================================================================

((* block docclass *))
\documentclass[xelatex, ja=standard, 11pt]{bxjsarticle}
((* endblock docclass *))

```

```python:ja_template.tex.j2(texlive2017)
((*- extends 'index.tex.j2' -*))

%===============================================================================
% Latex Article
%===============================================================================

((* block docclass *))
\documentclass[xelatex, 11pt]{bxjsarticle}

\usepackage{zxjatype}
\setjamainfont{ipaexm.ttf}
\setjasansfont{ipaexg.ttf}
\setjamonofont{ipaexg.ttf}
((* endblock docclass *))

```

texlive 2017 の場合は, ja=standard だと `font-not-found` のエラーがでた．この場合上記のように対処するとうまくいく．詳しくは[texwiki](https://texwiki.texjp.org/?xeCJK#ebafbaae)を参照．

※ 本当は docclass の block の中にフォントの設定を書くのはよろしくないと思いますが，うまく行ってしまったのでちゃんとしたやり方を調べていません...
テンプレートについて詳しく知りたい方は[公式ページ](https://nbconvert.readthedocs.io/en/latest/customizing.html)を参照してください．

ファイルの保存場所カレントディレクトリや `~/.jupyter/` などどこでもよい．

## ためしてみる

コマンドラインで以下を実行してうまくいくか確かめる． `--no-input` はコードを隠すオプションのためお好みで．

```
jupyter nbconvert --to pdf --no-input --template-file path/to/ja_template.tex.j2 hoge.ipynb
```

## ワンクリックで pdf 化できるようにする

まず nbextensions を入れる．詳しくは[公式ページ](https://jupyter-contrib-nbextensions.readthedocs.io/en/latest/install.html)を参照．

jupyter を開き，Nbextensions の設定画面を開く．
Printview を有効にし，nbconvert options に以下を入力する．

```
--to pdf --no-input --template-file path/to/ja_template.tex.j2
```

![スクリーンショット 2020-11-29 18.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/778510/7089b9f6-b636-fae2-2349-ed0847803a08.png)

あとは pdf 化したい notebook を開いた状態で，プリントマークをクリックしたら OK.
【RSpec】ユーザーの新規登録について結合テストを行う時に意識すること

　最近、RSpecを使ってオリジナルアプリのテストを実装しているのですが、新規登録で詰まったところがあるので、メモしておきたいと思います（といっても非常に単純なことなのですが😅）。

# 詰まったこと

　まず、ユーザーモデルのバリデーションは以下の通りです。

```ruby:app/models/user.rb
devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

# ニックネームのバリデーション
validates :nickname, presence: true, length: { maximum: 30 }

# メールのバリデーション
EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i.freeze
validates :email, format: { with: EMAIL_REGEX }

# パスワードのバリデーション
PASSWORD_REGEX = /\A(?=.*?[a-z])(?=.*?\d)[a-z\d]+\z/i.freeze
validates_format_of :password, with: PASSWORD_REGEX, message: 'は英字と数字の両方を含めて6文字以上のものを設定してください', on: :create
```

　今回詰まった結合テストは以下の通りです。

```ruby:spec/system/users_spec.rb
require 'rails_helper'

RSpec.describe "Users", type: :system do

  let!(:user) { FactoryBot.create(:user) }
  scenario "新規登録を行う" do
    # トップページを開く
    visit root_path
    find('div[class="menu-wrapper"]').click
    # メニューボタンをクリックすると、新規登録ボタンがある。
    expect(page).to have_content('新規登録')
    find('a[class="login"]').click
    # 新規登録画面へ移動する。
    visit new_user_registration_path
    # ニックネームを入力
    fill_in 'nickname', with: user.nickname
    # メールアドレスを入力
    fill_in 'メールアドレス', with: user.email
    # パスワードを入力
    fill_in 'パスワード', with: user.password
    # 確認用パスワードを入力
    fill_in 'パスワード(再入力)', with: user.password_confirmation
    # 会員登録ボタンをクリックすると、ユーザーモデルのカウントが1上がる
    expect{
      find('input[name="commit"]').click
    }.to change{ User.count }.by(1)
  end
end
```

　FactoryBotに設定したテストデータはこちらです。

```ruby:spec/factories/users.rb
FactoryBot.define do
  factory :user, aliases: [:follow] do
    nickname { Faker::Lorem.characters(number: 30) }
    email { Faker::Internet.free_email }
    password = 'a12345'
    password { password }
    password_confirmation { password }
  end
end
```

この状態で「bundle exec rspec」を実行すると……

```none:ターミナル
1) Users 新規登録を行う
     Failure/Error:
       expect{
         find('input[name="commit"]').click
       }.to change{ User.count }.by(1)
     
       expected `User.count` to have changed by 1, but was changed by 0

　[Screenshot]: /Users/○○/……/failures_r_spec_example_groups_users_新規登録を行う_○○.png
（中略）
```

　ユーザーの新規登録を正常に行うことができませんでした。screenshotを確認したところ、どうやらemailに設定している
「他のユーザーが既に登録しているメールアドレスを登録することはできない（重複できない）」
というバリデーションに引っかかった模様。

　そこで、rails_helpers.rbの記述を見直したり、FactoryBotのemailカラムに使っているFakerというGemについて調べたりしていたのですが、次の方法で解決しました。

```ruby:spec/system/users_spec.rb
require 'rails_helper'

RSpec.describe "Users", type: :system do

　# createではなく、buildを使用
  let!(:user) { FactoryBot.build(:user) }

  scenario "新規登録を行う" do
    （中略）
  end
end
```

　上記のように、createメソッドではなくbuildメソッドを使用することでテストが成功しました。

　createメソッドを使うと、FactoryBotで生成したnickname、email、password、password_confirmationがデータベースに保存されます。つまり、既に登録されているemailを再び、
「fill_in 'メールアドレス', with: user.email」
で入力して登録しようとしていたわけですね。
　そのため、「メールアドレスは重複して保存することはできません！」というバリデーションに引っかかったのでした。

　というわけで、非常に単純なことでしたが😅

　設定しているバリデーションを確認しながら、「createメソッドとbuildメソッドのどちらを使うべきか」を判断しなければならないことを学びました。最近はcreateメソッドばかりを使っていたので、視野を広く持たなければいけないなと感じました。

　以上です。もし何か誤りなどありましたらご指摘いただけますと幸いです。
　ここまで読んでいただきありがとうございました。
Rspecのシステムテストでクッキーに関するテストしてみた

#はじめに
皆さん始めまして！
駆け出しエンジニアのプージニアことpoo3です！
今回初投稿となるので多めに見ていただけると幸いです。

###対象となる読者様
・Rspecのシステムテストでクッキーに関してテストを行いたい方

###参考記事
@rokさんの記事
https://qiita.com/rok/items/09f5cab47338d0fa9188

##結論：gem 'show_me_the_cookies'を導入しよう
まずはGemfileに 'show_me_the_cookies'を追加

```ruby:Gemfile.rb
gem 'show_me_the_cookies'
```

次にみんな大好き 'bundle install' 💩💩

```
bundle install
```
rails_helperの中でインストールした'show_me_the_cookies'を使えるようにincludeする
(システムテストの中で使う事を想定しております)

```ruby:rails_helper.rb
config.include ShowMeTheCookies, :type => :system
```
上記完了したらシステムテストの中でクッキー弄り放題です👍

メソッドなどは下記ご参考ください

https://github.com/nruth/show_me_the_cookies

##実際に書いてみたテストコード
Rspec初心者なのでツッコミどころ満載かもしれませんが笑
今回は分かりやすいようにあえてリファクタリングはしてない状態で載せます！

```ruby:user_login_spec.rb
  feature "remember_me機能" do
    before do
      #ユーザを作成する
      @test_user = FactoryBot.create(:user)
    end

    scenario "チェクボックスON" do
      #ログインする
      visit login_path
      expect(page).to have_content 'Log in'
      fill_in 'session_email', with: @test_user.email
      fill_in 'session_password', with: @test_user.password
      check 'session_remember_me'
      expect(page).to have_checked_field('session_remember_me')
      click_button 'ログイン'
      #永続クッキー作成されているか確認
      show_me_the_cookies
      expect(get_me_the_cookie('remember_token')).to_not eq nil
      #クッキーがきちんと仕事をするか確認
      expire_cookies
      visit root_path
      expect(page).to have_content 'ログアウト'
    end

    scenario "チェックボックスOFF" do
      #ログインする
      visit login_path
      expect(page).to have_content 'Log in'
      fill_in 'session_email', with: @test_user.email
      fill_in 'session_password', with: @test_user.password
      expect(page).to have_unchecked_field('session_remember_me')
      click_button 'ログイン'
      #永続クッキー作成されていない事を確認
      show_me_the_cookies
      expect(get_me_the_cookie('remember_token')).to eq nil
    end
  end

```

###上記コードで使用している'show_me_the_cookies'のメソッド紹介
<dl>
  <dt>show_me_the_cookies</dt>
  <dd>現在のクッキー情報を出力する<br>クッキーの中身の情報を確認したい時に便利！</dd>
  <dt>expire_cookies</dt>
  <dd>期限切れのクッキーとセッションを全て破棄する！！
  <br>実質一度ブラウザを閉じた状態にすることができる✌️</dd>
  <dt>get_me_the_cookie(cookie_name)</dt>
  <dd>特定のクッキー情報をハッシュで取得</dd>
</dl>

#終わりに
少し短いですが以上になります！
これからも週１回程度何かしらの記事を書けたらと思います😁
ここまで読んでくれた方ありがとうございました！
今日の積み上げ python 学習記録#3

#本日の学習　9:00～12:00 15:00～18：30
昨日に引き続きprogate 有料版　python編をしています。
午前中に最後まで行ったのでもう一周しています。progateを何周もするのは良くないと聞きますが　関数、クラス、継承　などVBAでやらなかったところは、理解が怪しいので2周と言わず3周するかも。
時間がなければ飛ばしたほうが良いのだろうが昨日youtubeでシリコンバレーのエンジニアさんが基礎だけでも３か月はかかるみたいなこと言ってたので安心してじっくり取り掛かりたいと思う。ただ寝てても書けるような事はしないつもりです。
短期的な目標としてはスクレイピングをして作りたいツールがあるのだけど、先日買ったudemyのスクレイピングの講座でHTML、CSSがわからない人はprogateで勉強しろみたいな事書いてたので遠回りになりますがタイミングみてさくっと勉強してみようと思います。
やること多すぎますが楽しんでやってるので良しとしましょう！！
[PHP]composerダウンロードの流れとLaravelインストール

##composerダウンロードの流れとLaravelインストール

#MacOS
https://getcomposer.org/download/
上記にアクセスし、ページ下の方のManual Downloadから最新バージョンのリンクをクリックしダウンロードする
![989089038158fb8d7206e1467abbdd32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/1b4f0266-3fbf-6a7a-3da0-c25ee565d233.png)
(ここでいうと<font color="blue">2.0.7</font>という部分)
#コンソールでもできる(多分)
```java:ターミナル
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
```
私はコンソールでしました
#バージョンの設定
```java:ターミナル
chmod a+x /usr/local/bin/composer
```
#composerのバージョンチェック
```java:ターミナル
composer -V
```
正しくインストールできていればインストールした日付やversionが表示される
#Laravelインストール
```java:ターミナル
composer global require Laravel/installer
```
こちらは多少時間がかかる場合もございます
#環境変数の設定
```java:ターミナル
echo "export PATH=~/.composer/vendor/bin:$PATH" >> ~/.bash_profile
source ~/.bash_profile
```
これでLaravelコマンドが認識されるようになりました。ターミナル終了後もLaravelコマンドが使えるようになります
#以上！
ワンタイムトークンの連番を求めて

みなさん突然ですが、連番は好きですか？
車のナンバープレートや切符の端の番号など本来はランダムであるはずの番号が連番になっているとちょっとだけ幸せになることが多いと思います。

多くの人が他要素認証(MFA)のために使っている6桁の数字も多くの場合はランダムです。
私は今まで6桁のうち4桁が揃ったところまでは見たことがありますが、それ以上は見たことがありません。
毎日のようにMFAトークンを入力しているのに4桁がやっとということは、もしかしたら一生MFAトークンの連番を見ることができずに死んでしまうかもしれません。
それでは死んでも死にきれないので、なんとかして連番をMFAアプリに表示させたいと思います。

# MFAトークンの仕様
多くのMFAで使用されている、30秒毎に6桁の数字が変わるMFAトークンはTOTPというアルゴリズムによって生成されています。
TOTPはRFC6238によって策定されているワンタイムパスワード生成のためのアルゴリズムです。
より詳しい説明や実装例は以下の記事を参考にすると良いでしょう。

https://dev.classmethod.jp/articles/totp-implementation-pure-python/

# 強引に計算してみる
上で紹介したブログ記事にあるようにTOTPの計算にはSHA1関数が使われています。
この関数は暗号学的ハッシュ関数であり、逆関数を求めることが非常に困難であることが分かっているので、総当たり的に計算してみます。
TOTPの計算のための便利なライブラリがRubyにはあるので、それを利用します。
https://github.com/mdp/rotp

```bash
gem install rotp base32
```

```rb
require 'time'
require 'base32'
require 'rotp'

target_time = Time.parse("目的の日時")
target_number = "777777"

random = Random.new
secret = nil

loop do
  bytes = random.bytes(10)
  secret = Base32.encode(bytes)
  totp = ROTP::TOTP.new(secret)
  break if totp.at(target_time) == target_number
end

p secret
```

やっていることはとてもシンプルで、目的の日時のワンタイムパスが目的の値になるまでひたすら乱数を生成しているだけです。
お使いのPCの性能にもよりますが、数十秒〜数分で好きなタイミングで好きな数字を表示させるためのシークレットが求まります。

あとはここで求まったシークレットを以下のページなどのTOTP用のQRコード生成ツールに入力すればOKです。
https://rootprojects.org/authenticator/

そのあとは指定した時刻にMFAアプリの画面を開けばOKです。

![IMG_3796.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74551/3642d34d-90cd-c3a2-0998-bdb39a1ecde4.png)

これでちょっとだけ幸せな気分になることができました。

幸せのおすそ分けとして、明日の00:00:00に777777になるQRコードを貼り付けておきます。
日付が変わる瞬間にちょっとだけの幸せが訪れますように。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74551/4bb0cf1b-5197-4557-b44d-c792cd53dbc2.png)
Dockerfileイメージ作成時にプライベートリポジトリをGitHubからcloneする方法

# 手順概要
GitHubのOAuthトークンを利用してcloneする。
https://docs.github.com/ja/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token

# 設定の流れ
1. アカウントの`Setteings`を開く
![スクリーンショット 2020-11-29 17.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103954/b7f35ae6-3e31-664b-2ea4-1ce002fb895a.png)

2. 右のインベントリの`Developer settings`を開く
![スクリーンショット 2020-11-29 18.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103954/3048bbfe-d6a3-2ef3-a095-32b2b466835a.png)

3. 右のインベントリから`Personal access tokens`を選び`Generate new token`を押す
![スクリーンショット 2020-11-29 18.07.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103954/16325203-bc69-2478-e128-d75c97acac52.png)

4. 適当なNote入力して`repo`項目にチェックをして、最下部の`Generate token`を押す
![スクリーンショット 2020-11-29 18.09.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103954/4550f0d1-cba8-35cd-fd48-e75733a4c6ed.png)

5. 成功するとtokenが作成される
![スクリーンショット 2020-11-29 18.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103954/a11e6169-6c87-cace-d728-32bec5b97943.png)

### 注意
・トークンの表示は一度のみなので必ずコピーすること(一応、同じ手順で再生成ができる)
・過去1年間使用されていないトークンを自動的に削除される

# cloneする
`https://[token]:x-oauth-basic@[githubのリポジトリURL]`でアクセスできる。

```
例）token = aaa, リポジトリURL = github.com/demo/repo.git
git clone https://aaa:x-oauth-basic@github.com/demo/repo.git![スクリーンショット 2020-11-29 18.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103954/78f45c36-6595-0954-d97f-cc362221d3a7.png)
複数種類の例外をtry-catchした時の挙動

#はじめに
PHPの公式ドキュメントを見ていて，複数の例外クラスにまたがるtry-catchの処理を1つのcatchブロックで行う方法が触れられていたので，それについて行った簡単な実験を紹介します。
環境：XAMMP, PHP7.4.5
#問題の公式ドキュメント
![qiita20201129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893208/f0a19f2d-e3d0-8038-bca0-89d983620861.png)
![qiita20201129_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893208/7bcceeb6-f1a2-32ec-544d-55aa03d9d895.png)


引用元：[例外についてのPHP公式ドキュメント](https://www.php.net/manual/ja/language.exceptions.php "Qiita")
#思ったこと
tryブロックの中で複数のクラスから例外がthrowされたらどうなる？
#実験

```php:test.php
<?php try {
    throw new PDOException("PDOの例外だよ");
    throw new Exception("普通の例外だよ");
} catch (PDOException | Exception $e) {
    echo $e->getMessage();
}

```
#実行結果
![qiita20201129_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893208/efafb048-2d9a-54ae-e31f-f825df27e313.png)
**注：Chromeでのスクリーンショットです。
1つ目のthrowで処理がcatchに飛び，2つ目(Exceptionクラス)はthrowされませんでした。**

#まとめ
そもそも複数クラス例外が同時に発生すること自体が致命的なのでそうならないようにしておくというのが大前提ではあるものの，tryブロックで複数の例外が発生している場合，1つ目のthrowによって飛ばされた2つ目のthrowを見逃す可能性は無きにしも非ず。まだまだ駆け出し＆初投稿ですがぽつぽつと続けていければと思います。
RaspberryPi4 x NEON

# RaspberryPi4 x NEON
ARMで実行できるSIMDをラズパイで動かしてみる


## モチベーション
APPLE M1 が ARM ベースらしいと聞いて、
ARM では x86 の AVX が使えないから差異化できると思っていた.
しかし、 ARM でも NEON と呼ばれる SIMD 命令があるようなので
調べてみることにした

## 使用機材
Raspberry Pi4 8gb モデル
Clang Version 7.0


## 準備

```test1.cpp

  1 #include <iostream>
  2 #include <arm_neon.h>
  3 
  4 using namespace std;
  5 
  6 int main () {
  7 
  8   cout << "hoge" << endl;
  9                                                                                                                                                                                         
 10   return 0;
 11 } 

```

```
$ clang++ -o test1 test1.cpp -mfpu=neon
In file included from test1.cpp:2:
/usr/include/clang/7.0.1/include/arm_neon.h:28:2: error: "NEON support not enabled"
#error "NEON support not enabled"
 ^
1 error generated.
```
ARM NEON 命令が有効化されていないようだ

```
$ clang++ -o test1 test1.cpp -mfpu=neon -march=armv7-a
```
これだとエラーはでない
効果は不明

後で気づいたが、Clang のターゲットが ARMv6 となっていた

```
$ clang -v
clang version 7.0.1-8+rpi3+deb10u2 (tags/RELEASE_701/final)
Target: armv6k-unknown-linux-gnueabihf
```
NEON は ARMv7 からサポートされる
（ARMv6 でも SIMD はある）

##第１次完成したコード

``` test1.cpp
  1 #include <iostream>
  2 #include <arm_neon.h>
  3 
  4 using namespace std;
  5 
  6 int main () {
  7 
  8   cout << "hoge" << endl;
  9 
 10   int array1[2] = {31, 22};
 11   int array2[2] = {11, 20};
 12   int arrayAns[2];
 13 
 14   int32x2_t v1, v2, vans;
 15   v1 = vld1_s32(array1);
 16   v2 = vld1_s32(array2);
 17   vans = vqadd_s32(v1, v2);
 18 
 19   vst1_s32(arrayAns, vans);
 20 
 21   cout << arrayAns[0] << ", " << arrayAns[1] << endl;                                                                                                                                   
 22 
 23   return 0;
 24 }
```
### 2行目
\#include \<arm_neon.h>
neon 用インクルード

### 14行目
int32x2_t
neon 用型

他にも 64bit 用として 
uint8x8_tとか
float32x2_tとかある（っぽい）

128bit 用として
uint8x16_tとか
int32x4_tとか
float32x4_tとかある（っぽい）

### 15,16行目
NEON 用 load 記述
SIMD用レジスタにロードしてるっぽい

### 17行目
NEON 用 加算命令
s32 なので signed int 32bit 用

### 19行目
NEON 用　Store 命令
NEON 用 レジスタから値の回収を行う


## 実行結果
```
$ clang++ -o test1 test1.cpp -mfpu=neon -march=armv7-a -O3
$ ./test1
hoge
42, 42
```

期待通りの結果は得られた
reactでonClick実行時に引数を渡す


## 呼び出すとき
- bindを使う
- `onClick={this.handleClickDelete.bind(this, "渡したい値")}`

```react
<button onClick={this.handleClickDelete.bind(this, pod.SubDomainName)}>Delete</button>
```

## onClickを受け取る側の関数
- `handleClickDelete(SubDomainName)`の形で受け取る
- `console.log(SubDomainName)`のように使う

```react
    handleClickDelete(SubDomainName) {
        console.log(SubDomainName)
        const json = {"Name":SubDomainName};
        const convert_json = JSON.stringify(json);
        const obj = JSON.parse(convert_json);
        console.log(obj)
```
Vuexを使ってStoreに保存した値を使用する


```vuejs:src/pages/PageFood.vue

<template>
　<div class="container">
　　<div class="row">
　　　<ul v-for="food in foods" :key="food.id">
　　　　<li>Name:{{ food.name }}</li>
　　　　<li>Description: {{ food.description }}</li>
　　　</ul>
　　<div>
　<div>
</template>

<sctipt>
　import { mapGetters } from 'vuex' //vuexからmapGettersというものをインポートする

　export default {
　　data() {
　　　return {}
　　},
　　computed: {
　　　...mapGetters('foods',['foods']) 
　　}
　}
</script>
```

```javascript:store/store-foods.js
import Vue from 'vue'

const state = {
  foods: [
    {
      name: 'ハンバーガー',
      description: 'アメリカ合衆国を代表する国民食とされる。マクドナルドがフランチャイズを成功させ、ファストフードの代名詞となっている。付け合わせはフライドポテトが定番となっている。',
     
    },
    {
      name: 'ピザ',
      description: '日本で初めて紹介されたピザは一般的ではなかったが、1980年代後半より始まったバブル景気の最中（さなか）に起きたイタリア料理ブームに伴い、次第にイタリア風のものも広く知られるようになっていった。',
     
    },
    {
      name: 'そら豆',
      description: '塩ゆでするか、さやごと焼いて、中のマメをそのまま食べる。',
    },
  ]
}

const getters = {
  foods(state) {
    return state.foods //stateのfoodsを返す
  }
}

export default {
  namespaced: true,
  getters
}

```

```javascript:store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import foods from './store-foods' 

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
     foods
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}
Alpha rare fraction curve の解釈＆描き方

#はじめに
前回のphyloseqオブジェクトの記事で解析後のサンプルのrarefy（希釈）について少し、触れました。rarefyを行うことで、サンプルごとのリード数のばらつきを揃えることができます。しかし、その希釈によって、各サンプルの種（OTU）の数に影響が出てしまうような場合、最小リード数が小さすぎるなどの理由により、適切な希釈が出来ていないとみなされます。なのでrarefyに使用した最小リード数が本当に適切な値であるか、見極める必要があります。

#alpha rare fraction curve とは
alpha rare fraction curveは縦軸をOTUのカウント数、横軸をリード数としてグラフを描いたものです。下に例を載せていますが、希釈のために用いたリード数が小さすぎた場合には、希釈の影響によって、カウントできるOTUの数が減ってしまいます。一方、一定値以上（下図の場合20000程度）のリード数を読み込むことで、OTUを減らすことなくサンプルの希釈が出来ていることを確認することが出来ます（下図のサンプルの最小リード数は40000程度でした）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437659/357f87f8-384b-8a85-9d97-0ffc042dac1f.png)


#さっそく描いてみよう（R）
微生物系の論文ではalpha rare fraction curveの図を補足として載せているものが多いです。今回はPhyloseqを使って2通りの書き方を試してみました。phyloseqにはrarefyする前のOTUテーブルを使っています。

##使ったパッケージ

```{r}
library(phyloseq)
library(ggplot2)
library(vegan)
library(dplyr)
```

##方法１
計算を要しないのですぐにグラフが書けるが、サンプル名が消し方がわからない。

```{r}
physeq %>%
  otu_table() %>%
  t() %>%
  vegan::rarecurve(step = 1000)#希釈に用いるリード数を1000ずつ変えてプロット
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437659/0a9bf034-5cef-8c8f-7b7e-c75370236e80.png)


##方法２
ggrareで計算してくれる方法。グラフはきれいだが計算に時間がかかる。

```{r}
theme_set(theme_bw())
p <- ggrare(physeq, step = 1000)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437659/3f526377-8ab5-e93f-7fb5-efcae4650c85.png)

#参考URL
①　https://southgreenplatform.github.io/trainings/linux/metabarcodingPractice/
②　https://raw.githubusercontent.com/mahendra-mariadassou/phyloseq-extended/master/load-extra-functions.R
【初心者向け】全文検索についてまとめてみる

Elastic Search について勉強しようと思ったのですが、そもそも検索処理についての知識が全然ないことに気がつきました。
そこで、今回は全文検索についてまとめてみました。

# 全文検索とは

> 全文検索（ぜんぶんけんさく、英: Full text search）とは、コンピュータにおいて、複数の文書（ファイル）から特定の文字列を検索すること。「ファイル名検索」や「単一ファイル内の文字列検索」と異なり、「複数文書にまたがって、文書に含まれる全文を対象とした検索」という意味で使用される。

[全文検索 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%85%A8%E6%96%87%E6%A4%9C%E7%B4%A2)

簡単にいうと、たくさんのファイルの中から「文章内に特定の文字列を含む」という条件を持つファイルを見つけるといったところでしょうか。
ファイル名が条件での検索でもなければ、一つのファイルに対しての検索でもないということです。
文章だけではイメージが付きづらいので、実際に Visual Studio Code の検索機能を使いながら見ていきます。

![スクリーンショット 2020-11-29 16.56.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637012/e9e2714b-a790-0968-227d-d90863006a6e.png)
三つのHTMLファイルを用意しました。
それぞれの内容は下記の通りです。

```sample-1.html
<h1>今日の夕食はカレーライスです。</h1>
```
```sample-2.html
<h1>今日の夕食はラーメンです。</h1>
```
```sample-3.html
<h1>今日の昼食はカレーライスです。</h1>
```
まずは「カレーライス」という文字列を含むファイルを**全文検索**してみます。
ちなみに全文検索は、アクティビティバーの虫眼鏡アイコンもしくは ⌘ ＋ shift ＋ F で開けます。 
![スクリーンショット 2020-11-29 17.15.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637012/68f7298d-be0a-002d-408b-73b04e600451.png)
「カレーライス」を文章内に含む、`sample-1.html`と`sample-3.html`がヒットしました。
続いて「夕食」という文字列を含むファイルを**全文検索**してみます。
![スクリーンショット 2020-11-29 17.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637012/8666fbf0-b903-e4dd-8a15-c251c44bfef0.png)
「カレーライス」を文章内に含む、`sample-1.html`と`sample-2.html`がヒットしました。
では最後に「昼食」という文字列を含むファイルを**全文検索**してみます。
![スクリーンショット 2020-11-29 17.23.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637012/9464c1e0-4970-1784-2bde-56f4e34c2705.png)
「昼食」を文章内に含む、`sample-3.html`のみがヒットしました。

# まとめ

- **複数ファイル**が検索対象
- ファイル名ではなく、ファイルの内容が検索対象

調べている途中で気がつきましたが、全文検索技術は今まで当たり前に使っていた技術でした。
きっと他にも名も知らずに使っている技術はたくさんあるはず。
機会があれば全文検索の方式である逐次検索方式、索引型検索方式についてまとめてみたいと思います。

# 参考

[検索ログと検索エンジン | Think IT（シンクイット）](https://thinkit.co.jp/article/712/1?page=0,2)
[全文検索 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%85%A8%E6%96%87%E6%A4%9C%E7%B4%A2)
python xlwing関数　指定した標準偏差と中央値で、任意の行・列数のデータを作成する mshmura


python の関数

```myproject.py
import xlwings as xw
import numpy as np

@xw.func
@xw.ret(expand = "table")
def randstd(mean, std, rows, columns):
    return np.random.normal(mean, std, (int(rows), int(columns)))
```

excel設定

１．上部の　「UDF　MODULEs:」 のところに上記のpythonファイル名(myproject)を入れる。
(※myprojectはexcelファイルと同じフォルダに入っていると仮定)

適当なセルに、任意の中央値、標準偏差、テーブルの行数、列数を書き込む。

![xlwing関数設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/691044c1-682a-4a8d-992b-1ea5fd4d5c4e.png)

下記のように関数を入れる。

![qita2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/051e308a-ff4b-9256-0d3d-1301e01ead77.png)

結果

![qita結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/7c1f781d-00e8-9913-b7b3-e90a41953d67.png)


以上。
ラズパイ4で人感センサーを使ってみる（HiLetgo HC-SR501）

## 概要
* ラズパイに人感センサーを取り付けて動作することを確認します。

## 事前準備
* ラズパイのセットアップが完了していること。
    * [参考](https://qiita.com/muneki/items/69065573afb4bc9a2595)
* 人感センサー
    * [HiLetgo® 3個セット HC-SR501](https://www.amazon.co.jp/gp/product/B010RYGEGM/)
    * 安いので３個セットを購入しましたが、１個で十分です。
* ジャンパーワイヤー
    * [ブレッドボードジャンパーワイヤー](https://www.amazon.co.jp/gp/product/B06Y48V9DL)
    * 持っているものがあれば購入は必要ありませんが、安くて「オス-オス」、「メス-メス」、「オス-メス」が各４０本ずつあるのでなければ購入しちゃいましょう。（コスパ良）
* GPIO配置図
    * 下記を参考に接続していきます。 
![GPIO-Pinout-Diagram-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894039/4e846165-e0f0-34dd-66b9-17a94074b28d.png)

* 引用元: https://www.raspberrypi.org/documentation/usage/gpio/

## 手順
* まずはセンサーを見ていきましょう
    ![bottom.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894039/fe436798-dbe7-c728-f62c-4249d0b51a26.jpeg)
    * オレンジ色のピン？ネジ？がありますが、今回は写真の向きで両方を左側にプラスドライバーを使って回転させます。（ゆびでも行ける）
        * 左側が検知する距離の調整（3m～7m）
        * 右側が検知した状態の保持時間（3秒～5分）
* ラズパイにセンサーを接続します。
    * 赤枠で囲ったpinは左から「5V」、「OUT」、「GND」となっています。
    ![pin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894039/270161df-cb74-8fcd-faf8-416ba60c84e4.png)
    * 下記のようにそれぞれ接続します。（GPIO配置図を参考にしてください。）
        * センサーの「5V」はラズパイの5V Power（pin4）
        * センサーの「OUT」はラズパイの**GPIO 18**（pin12）
        * センサーの「GND」はラズパイのGround（pin9）
* 接続するとこのようになると思います。
    * 今回はブレッドボードは利用せずに直結してます。
    ![connect.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894039/ee6e63fe-014e-abd6-0d03-12e8adcf5237.jpeg)

* ラズパイにテスト用スクリプトを準備します。

```sample.py
import time
import RPi.GPIO as GPIO
GPIO_PIN = 18

GPIO.setmode(GPIO.BCM)
GPIO.setup(GPIO_PIN,GPIO.IN)

while True:
    if(GPIO.input(GPIO_PIN) == GPIO.HIGH):
        print("検知！！")
        break
    print("-")
    time.sleep(1)

GPIO.cleanup()
```

* 実行して手をかざしてみると「検知！！」と表示されました。
    * 手をかざさなければ１秒毎に「-」と表示されます。

```
$ python3 sample.py
-
-
-
検知！！
```