OmniAICreator/Qiita-1.07M huggingface dataset:
ベストセラー講師(Udemy)によるDjango無料講義のご案内

こんにちは。株式会社CODOR代表取締役の大橋と申します。

現在、Udemyというオンライン教育プラットホームにてDjangoの講義を提供しており、**約7,500人**の受講生がいます（Udemy上で最も売れています）。

また、2020年に秀和システム社より、**「Djangoのツボとコツがゼッタイにわかる本」を出版**致しました。

さらに、**Django Acadmey**というウェブサイトを通じてDjangoの教材を提供しています。

#新しくオンライン教育プラットホームを作りました

時代の流れに従い、講義の内容もどんどん変えていかなければいけないと考えており、そんな中、新しくDjangoを深く学ぶための講義（オンライン教育プラットホーム）を作成しました。

先にお伝えさせて頂きますが、**完全無料**です。
**今後有料にする可能性もあります**が、まずは受講頂いた方の反応を見てみたいということから、無料での公開としています。

![django1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/511622/ba2a8f14-6828-483f-ae60-8c4251766dac.png)



[→無料で受講を開始する方はこちらをクリックして下さい。](https://www.codor.co.jp/course/django-skillup)


講義で学べる内容

・Djangoの本質を理解するためのレクチャー
・AWSと連携させる方法
・herokuにデプロイさせる方法
・flatpageの使い方
・paginationの使い方
・開発環境と本番環境を分ける方法

など、実務で使える知識を身に付けることができます。

[→無料での登録はこちら](https://www.codor.co.jp/course/django-skillup)

#いつまで無料で公開するの？

受講して頂いた方の反応を見ながら有料に切り替える予定ですが、いつ有料に切り替えるかは決まっておりません。

思った以上に反応が良かったら、有料に切り替えようと考えています。

（**一度登録して頂ければ、永久に無料です。**）

##登録することによるメリット

実は、Udemy上で新しい講義を作成した際、既存の受講生の方には無料のクーポンを配っています。

ですので、今回登録して頂いた方には、今後新しい講義ができた際に無料のクーポンを配布させて頂く予定です。
（3月～4月にREST APIの講義を公開する予定です。）

ぜひともこの機会にご登録下さい。

それでは！

[→登録はこちら](https://www.codor.co.jp/course/django-skillup)
Qiita 記事の書き方

##準備
Qiitaのアカウントを作成し、ログインする
##記事を新規作成するとき
右上の「投稿する」ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/ef79881a-31ea-4205-a415-0c185234ec3f.png)
「記事」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/c6061a9a-b722-59a4-9090-bd1ab1d33abe.png)
編集画面に移行する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/91528b15-07b3-ee35-98fd-ae9d7ec18a4d.png)

マークダウン記法で記事を編集する
参考）[Markdown](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)

編集完了後、右下の「▲」を押し、メニューを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/922b35e7-0985-7332-8053-e48206e957c4.png)

|メニュー|内容|
|:---|:---|
|下書き保存　　|　下書き記事に保存される|
|限定共有投稿　|　投稿者とURLを知っている人にのみ公開(編集リクエストは送れない)|
|Qiitaに投稿　|　一般に投稿|

##他人の記事を修正するとき
1.　編集したい記事を開く

2.　下記の画像の赤枠を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/d206abd6-fa4b-67c6-8433-caf9f9249182.png)
3.　「編集リクエストを送る」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/8a786edc-16f0-c378-bedf-48b49114a908.png)
4.　編集画面に移行するので、記事を編集する
5.　記事の編集が完了したら「送信」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/bf063d0e-2f95-0185-2cf7-cef42131003c.png)
6.　その後、記事作成者に編集リクエストが送信され、記事作成者が承認すれば反映される
#編集リクエストを承認する
編集リクエストが送信されると、通知が届く。
通知は以下のマークを押すと見れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/d67ef5de-fa9e-46ca-3d05-b007bc24115e.png)
「編集リクエストを送りました。」という通知を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/fbe29cd1-5542-6dc5-cf50-d3aa6970dfa1.png)
変更されている箇所を確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/d6435bbc-4e6e-360f-111c-0afb134846b5.png)

以下のどれかを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/760601e8-6b0f-e553-0810-329abcfa78c8.png)
VSCodeでC++をすぐに実行したい

#はじめに
VSCodeを使ってて一々terminalを開いてcompile Runという工程が面倒になったのでProgramerらしく単純化させてみた。

#やったこと
VSCodeの拡張機能である"Code Runer"をinstallした(だけ)。

#結果
![スクリーンショット 2021-03-12 8.50.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706236/f1c7780d-5547-aa14-3fce-788863eb325b.png)
Codeの右上に実行ボタンみたいのが追加された。これを押してみると

![スクリーンショット 2021-03-12 8.51.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706236/35f70cc2-6889-8ae8-9b69-bb520ab78e1d.png)
しっかりと実行された。

これはすごい便利。
Push MFAの危険性と回避策

Multi-Factor Authenticationは多くのサイトで実装されている認証機能として普及されてきました。チャレンジの種類もEmailやSMSだけでなく、携帯電話にインストールされたAuthenticatorをタップ(Push MFA)するだけで多要素認証が完了するものもあります。この記事ではPush MFAの危険性と回避策をまとめます。

# 正常なLoginリクエスト
ユーザは予めIdentity ProviderやMFA Providerにアクセスして所有する携帯電話をMFAデバイスとして登録します。1次要素であるID/Passwordの検証に成功すると、Identity ProviderからMFA Providerに対して2次要素であるPush MFAを要求します。要求を受けたMFA Providerはユーザが利用しているBrowserを介さずに、直接携帯電話にインストールされたAuthenticatorにPush MFAのChallengeを送信します。
<img src="https://i.imgur.com/tDswKr6.png" width=70%>

# 犯罪者が介入するLoginリクエスト
犯罪者は予めDarkWebで漏洩したID/Passwordを購入して、購入したID/Passwordでサイトにログインします。MFA Providerから2次要素の検証を求められますがMFA Challengeはユーザの携帯電話にインストールされたAuthenticatorに直接送信され、<font color="DarkOrange">ユーザは特に意に介さずPush</font>します。2次要素の検証に成功したためIdentity ProviderからRelying PartyにTokenが発行され犯罪者はRelying PartyにLoginしてしまいます。
<img src="https://i.imgur.com/zjfysNH.png" width=70%>

# Phish Proof MFAによる正常なLoginリクエスト
ユーザが所有する携帯電話をMFAデバイスとして登録して、更に自分が利用しているBrowserとAuthenticatorをペアリングします。2次要素の要求を受けたMFA Providerはユーザが利用している<font color="DarkOrange">Browserを介して携帯電話にPush MFAのChallengeを送信</font>します。MFAのChallengeには携帯電話にインストールされたAuthenticatorのIDが含まれており、自分のBrowser以外からのMFA Challengeリクエストは遮断され携帯電話にインストールされたAuthenticatorにChallengeが送信されることはありません。
<img src="https://i.imgur.com/JOy1AXx.png" width=70%>

# Phish Proof MFAと犯罪者が介入するLoginリクエスト
犯罪者は、MFA Providerから送信されてくるChallengeに紐付いたAuthenticatorを持っていないため、リクエストは遮断されてIdentity ProviderからRelying PartyにTokenが払い出されることはありません。
<img src="https://i.imgur.com/BkGobCj.png" width=70%>

# おわりに
2020年初頭から発生した新方コロナウィルス感染症の拡大により、社会におけるOnlineサービスの重要性はより一層高まりました。同時に、サイバー犯罪者の数も手口も向上しており、多要素認証があるからアカウントの乗っ取り対策は100%万全とは言えなくなりました。この記事では[FIDO2](https://fidoalliance.org/fido2/)に対応したPhish Proof MFAによる多要素認証の安全性向上を例としてご紹介しております。あくまで安全性向上のためこれも100%安全とは言い切れませんね。多くのユーザ様が日々携帯電話のAuthenticatorに送信されてくるPush MFAのリクエストに"うるさいなぁ"といった感じで無条件にPushしているのではと推測しています。身に覚えのないリクエストは必ずDenyすることをお勧めします。
普段使用しているRepositoryのテンプレート


Repositoryはデータ通信を行うもので、
主にAPIを叩いたり、ローカルのDBにアクセスするときに使用しています。

戻り値がVoidになっておりますが、
データを取得したらここに戻り値にそれをセットします。
あくまで、データをCreate（生成）、Read（読み取り）、Update（更新）、Delete（削除）のが責務にさせることがポイントです。

``` swift
import UIKit
import RxCocoa
import RxSwift

protocol AuthRepositoryInjectable {
    var authRepositoryImpl: AuthRepository { get }
}

extension AuthRepositoryInjectable {
    var authRepositoryImpl: AuthRepository {
        return AuthRepositoryImpl.shared
    }
}

protocol AuthRepository {
    func doSomething() -> Single<Element>
}

class AuthRepositoryImpl: AuthRepository {
    let bag = DisposeBag()
    static var shared = AuthRepositoryImpl()
    private init() {}
    
    func doSomething() -> Single<Void> {
        return Single<Void>.just(())
    }
}


```

テンプレートも作りました！
https://github.com/yosuke1985/Clean-MVVM-Generator/blob/main/Clean%20MVVM/Repository.xctemplate/___FILEBASENAME___Repository.swift
【React】firebaseConfigの中身をgithubに載せない方法

今日はgitbubにfirebaseConfigを載せない方法を紹介していきたいと思います。


#.envファイルをroot直下に作成する
必ずroot直下に作成するようにしてください！ファイル名は`.env`です！

次に`.env`ファイルに載せたくない情報を記載していきます！
具体的には、今回はfirebaseConfigの情報を載せていきます

```.env

REACT_APP_FIREBASE_API_KEY=xxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxx
REACT_APP_FIREBASE_DATABASE_URL=xxxxxxx
REACT_APP_FIREBASE_PROJECT_ID=xxxxxxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxxxxxx
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=xxxxxxx
REACT_APP_FIREBASE_APP_ID=xxxxxxx
```

reactでは先頭に`REACT_APP_`を必ずつける必要があるので、そういうもんだと思ってください！
詳しく知りたい方はhttps://create-react-app.dev/docs/adding-custom-environment-variables/
を参考にしてみてください！

#.envファイルをgitignoreする
`git init`するとgitignoreファイルが作成されてるかと思います！
そこに`.env`と記載するだけです。

#.envで作成した変数をconfig.jsファイルに記述していく
```config.js
const firebaseConfig = firebase.initializeApp({
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
    measurementId: process.env.REACT_APP_APP_MEASUREMENT_ID
  });
```

これでgithubにfirebaseConfigの情報を載せないことができると思います！
Pandas で作ったSeries データにアトリビュートを使ってみる no.2

![見出しを追加 (17).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/ccf3ec12-dc67-6c52-2e87-0a2097dd0d6b.png)

こんにちは、まゆみです。

pandasについての記事、<font color="Red">第2回目</font>になります。

今回の記事では、pandasでSeries に加工したデータに使うattribute (アトリビュート)の概要について書いていこうと思います。

attribute (アトリビュート)やMethod(メソッド) はPythonのクラスを学んだ時に出てきた言葉だと思いますが、改めて定義の方を書いておきますね。

※Pandas のSeries ってなんだ？？っていう人は[こちらの記事](https://qiita.com/Mayumi_Pythonista/items/a252edf67ac6ab517f15)を参考にしてください。

#Attribute(アトリビュート)とMethod(メソッド)の定義
><ul>
><li>attribute</li> 
>オブジェクトそのものを変えたりすることはないが、オブジェクトを違う角度から見たり、オブジェクトの情報や詳細を伝えたりする役目をする

><li>method</li> 
>attribute と違い、オブジェクトに対して計算をしたりオブジェクトそのものを変えたりする

></ul>


では、言葉の定義はこれくらいにして、さっそくattribute がどのような事ができるのか試していきましょう。


#PandasのSeries のattribute の例

繰り返しになりますが、attribute は<font color="Red">オブジェクトそのものの本質を変えることはなく、</font>オブジェクトを違う角度から見た結果を返したり、オブジェクトの詳細の情報を返したりします

##jupyter notebookの便利な機能

![スクリーンショット 2021-03-12 070949.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/0c51d280-5e7c-19f4-1ef6-749c31b87baa.jpeg)


上記のスクショにあるように、s.を入力したあと

<font color="Red">『Tab』キー</font>を押すと

s. につけることのできるmethod やattribute の選択肢がずらっと出てきます。


##values

Series をarray の形で返してくれます。

![スクリーンショット 2021-03-12 071744.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/f38947e0-1b42-7d85-12a3-2d967b3d49c6.jpeg)

<font color="Red">python でデータ分析などをする時、Numpyというライブラリーも使うので</font>データをarray の形に変えるプロセスはよく出現します。

##index

![スクリーンショット 2021-03-12 072648.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/84e26ebc-d2c2-8727-88a4-4aa602415f86.jpeg)


indexの範囲とindex の増え方を返してくれます。

コンピューターでは始まりは『0』から数えるので、

start = 0

(リストのアイテム数) がstop の数字になります

step はindex の数字の増え方のことで、この場合は１づつ増えているので

step = 1

となります

##dtype

python のコードでデータ型を調べる時に

type()を使ったように、

pandasで加工したデータのタイプを調べる時は

dtype というattributeを使います

![スクリーンショット 2021-03-12 074502.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/99008023-9a40-b398-68e6-be38fb4cfcf5.jpeg)

文字列で作ったSeries のタイプは

"O"

と表示されました。

Object (オブジェクト) の意味です

少しややこしいのですが、<font color="Red">pandasでobject というと、python で言うところの　『string (文字列)』を表します。</font>

また、数字で作ったSeriesのタイプは

"int64"

と表示されています

もちろんinteger (インテジャー= 数字)の意味です。

#Pandasライブラリーのドキュメントに目を通してみよう

[こちらから](https://pandas.pydata.org/pandas-docs/stable/reference/series.html)Pandasライブラリーのドキュメントを見ることができます。

英語ですが、すごくまとまっていて見やすいと思います。

今日紹介した以外にたくさんのattribute がありますので、ドキュメントの方にも目を通してみてください。


#まとめ

今回の記事では、Pandas ライブラリーでSeries に加工したデータに対して色んなattribute (アトリビュート)　を試してみました。

記事の中で全てのattribute を紹介する事はできませんが、使い方は全て同じです。

```
(Seriesのデータ).使いたいattribute
```

この記事がお役にたてれば幸いです。

次回の記事では、method() を紹介していきます
JSONから簡単にパースするツールみつけた！

https://app.quicktype.io/


Swift, Kotlin, TypeScriptなど各種言語に対応しています。

![スクリーンショット 2021-03-12 8.04.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44713/2f4de113-f1fc-33e4-e950-b5d742a3caaf.png)



### お手持ちのJSONを用意して、


``` json
{
  "greeting": "Welcome to quicktype!",
  "instructions": [
    "Type or paste JSON here",
    "Or choose a sample above",
    "quicktype will generate code in your",
    "chosen language to parse the sample data"
  ]
}
```

### Swiftへ変換

```swift
import Foundation

// MARK: - Welcome
struct Welcome: Codable {
    let greeting: String
    let instructions: [String]
}

```
MoyaでstatusCodeによってエラーを分岐するAPIErrorのサンプル


以下、テンプレとして出力できます。
https://github.com/yosuke1985/Clean-MVVM-Generator/blob/main/Clean%20MVVM/Error.xctemplate/___FILEBASENAME___Error.swift

MoyaErrorのステータスコードによってエラーを分岐できるようにかきました。

```swift

import Foundation
import Moya

enum APIError: Error {
    case unknown
    case requestError
    case serverError
    case maintenanceError
}

extension APIError: LocalizedError {
    var errorDescription: String? {
        switch self {
        case unknown:
            return "some error"
        }
    }
    
    init(moyaError: MoyaError) {
        if let statusCode = moyaError.response?.statusCode {
            switch statusCode {
            case 400...499:
                self = .requestError
            case 501,502,504...599:
                self = .serverError
            case 503:
                self = .maintenanceError
            default:
                self = .unknown
            }
        } else {
            self = .unknown
        }
    }
}

```
突如止まってしまう docker コンテナ を自動的に再起動する

Docker でデータベースなどを運用していて、 突如 そのコンテナが止まってしまうという経験、ないでしょうか。
理由はメモリ不足などいろいろあると思いますが、 本番環境であれば 自動で再スタートしておかないと面倒です。

そんなときに使えるスクリプトを紹介します。


## Script

まずは次のようなスクリプトを記述して、シェルとしてファイルにしておきまあす。

```bash
#!/bin/bash
flag=0

for chunk in `sudo docker container ps`
do
  if [ $chunk = 'mongodb' ]
  then
    flag=1
  fi
done

if [ $flag -ne 1 ]
then
  echo "start mongodb"
  sudo docker start mongodb
fi
```

これをたとえば `check_docker.sh` というファイルにします。

そして `crontab` に次のように記述します。

```
* * * * * bash check_docker.sh > check_docker.log 2>&1
```

これで毎分チェックが行われます。

### 実行コマンド

シェルスクリプトのコマンドについて詳しく見ていきます。

#### set flag zero

```bash
flag=0
```

再起動を制御するためのフラグです。

#### for

```bash
for chunk in `sudo docker container ps`
```

docker の稼働状況を取得します。
`for` でループを制御しています。 1行ごとのイテレーションではないです。 

#### コンテナの存在チェック

```bash
  if [ $chunk = 'mongodb' ]
  then
    flag=1
  fi
```

コンテナが起動しているかをチェックします。
期待したコンテナ名があれば `flag` を 1 にして、起動していることが後の処理でわかるようにします。

#### 起動していなければ再起動

```bash
if [ $flag -ne 1 ]
then
  echo "start mongodb"
  sudo docker start mongodb
fi
```

`flag` で起動状態がわかるので、 起動していない場合には `sudo docker start` によって 再起動します。
起動のコマンドは、 `sudo` をつけなかったり、シェルスクリプトで起動するようになっていたり、環境に応じて変更する必要があります。
AWS入門（VPC, EC2, RDS）

# VPC (仮想ネットワーク)
![VPC説明用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972403/b909fa60-e826-c2aa-f70f-42406640ca54.png)
**VPCとは、**サブネットなど色んな設定を入れる箱みたいな役割をしてます。
IPv4 CIDR ブロックを指定して場所の確保します。

#サブネット（Subnet）
![サブネット説明用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972403/665a8db3-6602-e548-8c92-3c92b09315e4.png)

**サブネット**とは、VPCの中にさらに箱を作るイメージです。
IPv4 CIDR ブロックで指定して場所の確保します。
**アベイラビリティゾーンとは**、リージョンごとにサーバーが設置されている場所です。
アベイラビリティゾーンはなるべく分散させて構築した方が良いです。
もし、通信障害が起きた時に
同じ場所だけだとサーバーがダウンした時にアクセス出来なくなるため
**プライベート IPでEC2からRDSへsshで接続する際に**
アベイラビリティゾーン同じ場所じゃないと接続できないので注意すること。

#インターネットゲートウェイ（Internet Gateway）
![インターネットゲートウェイ説明用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972403/b9cc62ae-4ab2-9638-c746-50148b521cbb.png)

インターネットへアクセスできる扉みたいな役割をしています。
VPCにアタッチしないと図のように設置できていないので作成後アタッチしてください。

#ルートテーブル（Route Table）
![ルートテーブル説明用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972403/45985746-8425-16b0-c839-f295ee530bb1.png)

**ルートテーブルとは**経路を判断する際に使用されるルート
ルートテーブル作成後はサブネットの関連付けでサブネットを選ぶ。
publicにはルート編集でインターネットゲートウェイへルートを追加する。
privateにはインターネットゲートウェイのルートが無い状態にしておく。

#EC2

**EC2とは**仮想サーバーです。
EC2の中にソフトをインストールすることでWebアプリを公開することができます。
**セキュリティグループとは**アクセスの権限を管理するものです。
EC2にアクセスをインバウンドルールで許可する。
http, ssh, httpsなどの通信方法を開放することで通信できるようになります。

#RDS

**RDSとは**データベースサーバーです。
EC2にRDSを接続させることでデータベースとして使用することができます。
PHP \rと\nの違い

#\r（復帰）と\n（改行）の違い
例１）

```php

echo "これは\rてすとです\n\\rによって一行目の「これは」の上にテストですが重ねられました\n\\rの復帰とは
同じ行の左端に移動する動作であり\n\\nの改行とは同じヘッド位置で、1行下に移動する動作である";

結果
/*てすとです
\rによって一行目の「これは」の上にテストですが重ねられました
\rの復帰とは
同じ行の左端に移動する動作であり
\nの改行とは同じヘッド位置で、1行下に移動する動作である*/
```



例２） \rを使用すると同じ行の左端に\r以降の記述が上に重ねられる。

```php

echo "これはてすとです\r僕は\n上の一行目の結果は「僕ははてすとです」になるはず";

結果
/*僕ははてすとです
上の一行目の結果は「僕ははてすとです」になるはず
*/
```

以上
nodenvを入れてもnodeのバージョンが変わらない時に確認したこと

nodenvを入れてもnodeのバージョンが変わらないという問題が発生したので、確認したことと対応方法をまとめました。

# 起きたこと
``nodenv``では、``14.16.0``になっている

```
% nodenv versions
  system
  14.15.4
* 14.16.0 (set by /Users/okada/src/hoge/.node-version)
```

``node``は、``12.19.0``になっている :thinking: 

```
% node -v
v12.19.0
```

# 確認すること
## 1. pathを確認

zshの場合は以下のコマンドです

```
% cat ~/.zshrc
```

以下のように出力されればOK

```
export PATH="$HOME/.nodenv/bin:$PATH"
eval "$(nodenv init -)"
```


## 2. シェルの再起動

pathが問題なかったら念の為再起動します

```
% exec $SHELL -l
```

## 3. nodeがどこを見ているか確認
以下のコマンドで確認します

```
% which node
```

私の場合は、以下のように出力されました。

```
/Users/okada/.nodebrew/current/bin/node
```

パスが``.nodebrew/``以下を見ています :thinking: 
nodenvを反映させるためには、``.nodenv/``を見ていないといけないですね

# nodebrewをアンインストール
## homebrew経由でインストールした場合

homebrewで、nodebrewをインストールした場合は、以下のコマンドです

```
% brew uninstall nodebrew
```

私は以下のエラーが出てアンインストールできず…

```
Error: No available formula or cask with the name "nodebrew".
```

homebrew経由でなかったのか…？ :thinking: 

## .nodebrew/ディレクトリを移動

``/Users/okada/.nodebrew/`` を別の場所に移動しました

```
cd ~/
open .
```
でFinderを開いて（Macです）ドラッグで移動しました。
（mvコマンドで良いと思いますが私はこちらのほうが慣れているので…）

※ .で始まる不可視ファイルが見えない場合は、「shift」＋「command」を押しながら「. （ピリオド）」で表示できます。

# 確認

nodeの向き先を確認します

```
% which node 
/Users/okada/.nodenv/shims/node
```
``.nodenv/``を向くようになりました :clap: 

nodeのバージョンも確認します

```
% node -v
v14.16.0
```

無事nodeのバージョンが変わりました :clap: 

# 補足

nodenvの導入については、少し時間が経ってしまったので忘れてしまいました。
以下の記事がpathの通し方が丁寧に書かれており、慣れていない身としてはありがたかったです。

nodenvの環境構築 - Qiita:
https://qiita.com/282Haniwa/items/a764cf7ef03939e4cbb1
Gem 

# Gem
railsで使用できる様々な便利な機能。フロントエンドでいうnpmパッケージのようなもの。

## Gemfile
インストールしたいgemはGemfileに記述する。書き方は下記のように`gem gem名 バージョン名`。
バージョン指定しなければ最新版がインストールされる。

```ruby

  gem 'rails', '5.0.1'
```

## gemのインストール方法
コンソールで

```
   bundle install
```
実行。
インタープリタを作る その10

#概要

インタープリタを作ってみた。
zundokoやってみた。


#参考にしたページ

https://github.com/been-jamming/Ben-BASIC

#サンプルコード

```
>>> list
10 let a,0
20 let b,0
30 while b<4
40 if (rand()<0.5)
50   print "zun"
60   let b,b+1
70 else
80   print "doko"
90   let b,0
100 end
110 end
120 print "doko ki yo shi !!"
>>>
```

以上。
【Go言語/golang】値とポインタってどう分ける？ゼロ値のまとめ

変数を宣言した時に、`var`で定義するのか`:=`で定義するのか、`new`で作成すればいいのか迷うことがありました。
そこで、備忘録も兼ねて、どのように定義をした時に、出力がどうなるかを簡単にまとめました。

# 値の定義

```go

package main

import "fmt"

func main() {
	var a int
	var b string
	var c []string
	var d map[int]string
	var e = make([]string, 1)
	var f = make(map[int]string)
	var g interface{}
	h := map[int]string{}

	testprint("a", a)
	testprint("b", b)
	testprint("c", c)
	testprint("d", d)
	testprint("e", e)
	testprint("f", f)
	testprint("g", g)
	testprint("h", h)
}

func testprint(s string, i interface{}) {
	fmt.Printf("%s: %#v\n",s, i)
}
```
```
// 出力結果
a: 0
b: ""
c: []string(nil)
d: map[int]string(nil)
e: []string{""}
f: map[int]string{}
g: <nil>
h: map[int]string{}
```

# ポインタで定義
```go
package main

import "fmt"

func main() {
	var a *int
	var b *string
	var c *[]string
	var d *map[int]string
	var g *interface{}

	testprint("a", a)
	testprint("b", b)
	testprint("c", c)
	testprint("d", d)
	testprint("g", g)
}

func testprint(s string, i interface{}) {
	fmt.Printf("%s: %v\n", s, i)
}
```
```
// 出力結果
a: <nil>
b: <nil>
c: <nil>
d: <nil>
g: <nil>
```

# それぞれにnilを入れてみる
```go
package main

import "fmt"

func main() {
	var a int
	var b string
	var c []string
	var d map[int]string
	var e = make([]string, 1)
	var f = make(map[int]string)
	var g interface{}
	h := map[int]string{}
 	type hoge struct{}
	var i hoge
	var j [3]int


	// a = nil // error: cannot use nil as type int in assignment
	// b = nil // error: cannot use nil as type string in assignment
	c = nil
	d = nil
	f = nil
	g = nil
	h = nil
	// i = nil // error: cannot use nil as type hoge in assignment
	// j = nil // error: cannot use nil as type [3]int in assignment


	testprint("a", a)
	testprint("b", b)
	testprint("c", c)
	testprint("d", d)
	testprint("e", e)
	testprint("f", f)
	testprint("g", g)
	testprint("h", h)
}

func testprint(s string, i interface{}) {
	fmt.Printf("%s: %#v\n",s, i)
}
```
```
// 出力結果
a: 0
b: ""
c: []string(nil)
d: map[int]string(nil)
e: []string{""}
f: map[int]string(nil)
g: <nil>
h: map[int]string(nil)
```
int, string以外はnilが入りました。
プリミティブについては、nilが入らないので、覚えておきましょう。
ソフトウェアエンジニアに必要なスキル

# はじめに
ソフトウェアエンジニアに必要なスキルについて考えてみた。

ここで扱うのは、広義としての「ソフトウェアエンジニア」で、SE、プログラマを含むものとし、SIerではなく主に自社開発エンジニアを対象とします。また、バックグラウンドがソフトウェアではない人を前提とします。

# なぜスキルを意識する必要があるのか
目の前のタスクを何となくこなしているだけだと、数年経って振り返ったとき、自分の<b>スキルの低さ</b>に愕然とすることがある。そして、このレーダーチャートのように<b>替えがきく人材</b>となってしまう。

先をイメージして、必要なスキルを意識的に身につけることが重要である。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067025/e8d1ad29-f726-784c-8dc8-8b1319f5b402.png)

技術の数値化は永遠のテーマだが、例えば、それぞれの項目について「公の場に登壇したり、ネットに記事が投稿できるかどうか、そこでの質疑応答に対応できるのか」と考えると具体的にイメージしやすいかもしれない。

中堅になったときは、まんべんなくそれぞれのスキルが5～8になることを目指し、その先で、自分の得意分野を見出し、そこを10にするようなイメージが良さそう。

## スキル
ここでは各スキルが足りていないとどういったことになるのかに着目して整理する。

### 論理的思考
- 論理的思考ができないと、まともな設計ができない
- 問題がおきても、ロジカルに攻めることができないので、時間がかかる または 解決できない
- 開発においてかなり致命的

### プログラミング
- 一番怖いのは「動く ＝ プログラミングできた」と思い込んでしまうこと
    - 読みにくいコード、拡張性の悪いコード、テストがまともにされていないコードは害悪
    - 会社の開発サイクル効率を悪くしていることに気づかない
- 「他人が作ったコードを部分的に修正 ＝ 自分はプログラミングができる」と満足してしまう
    - 他人のコードを読めるスキルはもちろん必要だが、無理やりコードをつぎ込んでの修正は害悪
    - もちろん、俯瞰的に考え、適切な方法で修正を加える行為には意味がある

### 仕様（要求/外部設計）
- 思いつきでただ箇条書きしたものを仕様書としてしまう
    - システムに応じて検討が必要な考慮項目が足りているのか一部フォーマット化を考えないと、失敗したときのフィードバックができない
- この工程で手を抜くため質の悪いものができてしまう
    - アジャイルという言葉でとりあえずコーディングに走ってしまう
    - それっぽいものができるが、致命的な抜けや無駄な手戻りが発生する

※ 私はウォーターフォール信奉者ではない

### 仕様（内部設計）
- プログラミングの項目と似ているが、機能追加、修正改善が難しい構造を作ってしまう
    - 誰もよりつかないコードになる
    - 会社の開発サイクル効率を悪くする
    - 機能追加や仕様変更に対して工数がかかる と言うだけで、自分のデザインが悪かったという考えに及ばない
- 省略され、ないがしろにされる傾向にある

### ドキュメント
- 読み手をイメージする想像力に欠け、自分本位な資料
- 議事録をとらない（とれない）
    - どのような経緯でものごとが決定されたのか、またどのようなアクションが必要か がまとめられない人との会議は無駄
- 途中まで書きかけた資料でドヤ顔。文字数としては最後の10%が足りないだけかもしれないが、その10%を埋めるために必要な考慮にこそ意味があり、逆にその10%をやり切らなかった資料にスキルとしての価値はない

### プレゼン/レビュー
- ドキュメントと同様に、聞き手の立場をイメージした構成/内容にできない
- 「プレゼンができない」≒「理解していない」

### ドメイン
- ここでいうドメインとは、開発対象やそれに関連する専門分野の知識（対象物、IT系の開発環境、言語、ハードウェア、業界動向）に関すること
- 部分的には、日々仕事をこなす中で自然に身につくところがあり、それだけで満足してしまい深堀りできない
- 仕事の中では得られない、新しい技術などを自ら発掘できない

### コミュニケーション
- 「コミュニケーション」 ≠ 「社交性」
- お客様からの要望聞き取りが正しくできない
    - 単純にお客様の言葉だけを鵜呑みにするのではなく、その背景や理由を聞き取れないため、期待と異なるものを作ってしまう
- 関係者に的確な意図を伝えられないため非効率

### テスト
- 根拠のないランダムテストしかできない
- 毎回おなじようなバグを作る

### タスク管理（自己管理）
- なんとなく遅延しても気にしない
- 相談なしに遅れると「責任感がない」と判断されること に気づかない

### 新規開発
- そもそも、０から作るときに何に気をつけるべきかもわからない
- ０からはじめるやり方がわからない
- 普段アンテナ張っていないため技術のアイデアが出てこない
[rails]PG::ConnectionBad: 〜"/tmp/.s.PGSQL.5432"?」を解決した話

#環境
* macOS Catalina 10.15.7
* PostgreSQL 13.2
* rails 6.0.3

#エラー内容
いつものように`rails server`でサーバーを起動した所以下のエラーが発生
![スクリーンショット 2021-03-12 5.36.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/991598/313e2f06-f453-18dd-fa38-3abd73deffd1.png)


```:エラー内容
PG::ConnectionBad: could not connect to server: No such file or directory
        Is the server running locally and accepting
        connections on Unix domain socket "/tmp/.s.PGSQL.5432"?
```

このエラーは初めて遭遇しました。。。

#解決した方法
はじめに[こちらの記事](https://qiita.com/yoshixj/items/3d742eb08343ea93dcd4)を参考にして以下のコマンドを入力してみました。

```
$ brew services start postgresql
$ brew services stop postgresql
$ brew services restart postgresql
```

しかしエラーは直りませんでした（汗）

次に以下の記事を参考にして対処してみました

https://qiita.com/great084/items/98c83364f246473249c4


まずPostgresSQLのログを確認する

```
postgres -D /usr/local/var/postgres
2021-03-12 05:29:26.438 JST [10060] FATAL:  lock file "postmaster.pid" already exists
2021-03-12 05:29:26.438 JST [10060] HINT:  Is another postmaster (PID 897) running in data directory "/usr/local/var/postgres"?
```
上記のエラーを確認するとどうやら`postmaster.pid`というlock fileが既に存在しており起動できなくなっている模様。
Macが最近勝手にシャットダウンしたのが原因か？

エラーを参考にして`postmaster.pid`を削除する

```
$ rm /usr/local/var/postgres/postmaster.pid
```

PostgreSQLを再起動する

```
brew services restart postgresql
```
以上でエラーが解決できました。
参考になれば幸いです。
Splunk マルチバリューを表にする。

小ネタ
https://community.splunk.com/t5/Splunk-Search/How-to-Split-Row-value-in-single-column-to-multiple-row-value/m-p/543340#M153911
で回答してみた。

https://attack.mitre.org/matrices/enterprise/
の表を作りたいらしい。

#課題

active|formed|homeTown|members_age|members_name|members_powers|members_secretIdentity|secretBase|squadName
 :--|:--|:--|:--|:--|:--|:--|:--|:--|
true|2016|Metro City|29<BR>39<BR>1000000|Molecule Man<BR>Madame Uppercut<BR>Eternal Flame|Radiation resistance<BR>Turning tiny<BR>Radiation blast<BR>Million tonne punch<BR>Damage resistance<BR>Superhuman reflexes<BR>Immortality<BR>Heat Immunity<BR>Inferno<BR>Teleportation<BR>Interdimensional travel|Dan Jukes<BR>Jane Wilson<BR>Unknown|Super tower|Super hero squad

これを

active|formed|homeTown|members_age|members_name|members_powers|members_secretIdentity|secretBase|squadName
 :--|:--|:--|:--|:--|:--|:--|:--|:--|
true|2016|Metro City|29|Molecule Man|Radiation resistance|Dan Jukes|Super tower|Super hero squad
 | | |39|Madame Uppercut|Turning tiny|Jane Wilson| | 
 | | |1000000|Eternal Flame|Radiation blast|Unknown| | 
 | | | | |Million tonne punch| | | 
 | | | | |Damage resistance| | | 
 | | | | |Superhuman reflexes| | | 
 | | | | |Immortality| | | 
 | | | | |Heat Immunity| | | 
 | | | | |Inferno| | | 
 | | | | |Teleportation| | | 
 | | | | |Interdimensional travel| | | 


#spl

```python:multivalue_to_table.spl
index=_internal | head 1 | fields _raw
| eval _raw="{\"squadName\":\"Super hero squad\",\"homeTown\":\"Metro City\",\"formed\":2016,\"secretBase\":\"Super tower\",\"active\":true,\"members\":[{\"name\":\"Molecule Man\",\"age\":29,\"secretIdentity\":\"Dan Jukes\",\"powers\":[\"Radiation resistance\",\"Turning tiny\",\"Radiation blast\"]},{\"name\":\"Madame Uppercut\",\"age\":39,\"secretIdentity\":\"Jane Wilson\",\"powers\":[\"Million tonne punch\",\"Damage resistance\",\"Superhuman reflexes\"]},{\"name\":\"Eternal Flame\",\"age\":1000000,\"secretIdentity\":\"Unknown\",\"powers\":[\"Immortality\",\"Heat Immunity\",\"Inferno\",\"Teleportation\",\"Interdimensional travel\"]}]}"
| spath 
| fields - _*
| rename *{}.* as *_*
| rename *{} as *
| table *
``` this is sample data```
``` from here, the logic ```
| eval tmp="val"
| transpose 0 header_field=tmp
| streamstats window=1 count(val) as count
| eventstats max(count) as count
| appendpipe [ eval column="count", val=count]
| fields - count
| dedup column
| transpose 0 header_field=column
| fields - column
| eval count=mvrange(0,count)
| mvexpand count
| rename count as _count
| foreach * [ eval <<FIELD>> = mvindex(<<FIELD>>,_count)]
| fields - _count
```

#解説

- 最初の`eval`と`transpose`でヘッダー名等を決めた上で縦横変換している
- `streamstats`と`eventstats`で一番多いマルチバリューの数を数えている。
    - もっと簡単にできるかもしれない :sweat:
- `appendpipe`で縦横を元に戻した時に使うマルチバリューの値を格納したフィールドをくっつけている。
- `mvrange`で行分割する数の基準を決め、`mvexpand`
- `rename`からのながれはJSONとかでやっている一括抽出

#まとめ

`appendpipe`から`dedup`のところは、ちょっと新鮮だったと思います。

Splunkはログが好きに加工できるのがいいですね
長く実行されているプロセスを消す

サーバのプロセスで、あるどこかの開発者がつくったんだけどそれが終了せずずっと動き続けているという経験は、誰しも遭遇したことがあるのではないでしょうか。

そんなときに使えるスクリプトです。 これを crontab などで定期的に実行させると、突如現れた終わらないプロセスを終了してくれます。

「[増産された Apache (httpd) の子プロセスを消すスクリプト](https://qiita.com/KenjiOtsuka/items/8da4ed2f06f9d0189fa3)」, 「[プロセスの実行ディレクトリをリストアップする](https://qiita.com/KenjiOtsuka/items/3d0ce6effdcdc59944a8)」に似たスクリプトです。

## コード

AWS EC2 Amazon Linux のサーバ上で動かしました。

```bash
#!/bin/bash
for pid in `ps aux | grep crawler | grep -v grep | tr -s ' ' | cut -d ' ' -f2`
do
  line=`ps --pid ${pid} -eo pid,etimes | grep ${pid}`
  duration=`cut -d' ' -f 2 <<< ${line}`
  if [ -z $duration ]
  then
    continue
  fi

  if [ $duration -ge 345600 ]
  then
    echo $duration
    sudo kill $pid
  fi
done
```

### 内容


#### for

```bash
for pid in `ps aux | grep target_name | grep -v grep | tr -s ' ' | cut -d ' ' -f2`
```

これで プロセスID をイテレートします。
`target_name` のところにフィルタしたい条件文字列を入れて目的のプロセスを見つけ出します。

#### set line

```bash
line=`ps --pid ${pid} -eo pid,etimes | grep ${pid}`
```

pid と etimes を出力し、 該当の pid についての行を取得します。

#### set duration

```bash
duration=`cut -d' ' -f 2 <<< ${line}`
```

`ps` の結果から 実行時間を取得します。
取得できる実行時間の単位は秒です。

#### -z $duration

```bash
  if [ -z $duration ]
  then
    continue
  fi
```

プロセスがなくなっている時もあるので、そのときは次のイテレーションに進みます。

#### $duration -ge 345600

```bash
  if [ $duration -ge 345600 ]
  then
    echo $duration
    sudo kill $pid
  fi
```

345,600秒(4日間)以上動いている処理だったら終了します。
`sudo` から始まるコマンドは、お使いの環境・状況に合わせて変更してください。
scandir での . ..を排除する方法

# phpの`scandir`関数をつかうと、"." ".."が付く

通常Linuxコマンドの `ls -la` と同じようにscandirでは、"." ".."が付く。

これを取り除く方法には以下の方法がある。

## 昔のPHP Docのサンプルコードでトップに来てた記法

https://www.php.net/manual/ja/function.scandir.php#115871

```php
<?php
$files = array_slice(scandir('/path/to/directory/'), 2);
```

```sh
.      <- 上2つが取り除かれる
..     <- 上2つが取り除かれる
files
folder
```

Search Codeで調べてみると意外と残ってる。

https://searchcode.com/?q=array_slice+scandir

この記法の問題点は必ず "." ".." が一番上に来る事が念願に置かれているのだが、以下の文字列が先端にある場合には来ない。

`(` `-`

```
(test)test.txt
-test.txt
.
..
files
folder
```

特に日本の場合は、`(最終決定版)プレゼンテーション資料.pptx`のような名付けをすることもあるので、英数字意外の文字列を使用する事が分かっている場合は別の記法が必要となる。

## 現在の最適解

https://www.php.net/manual/ja/function.scandir.php#107215

```php
<?php
$directory = '/path/to/my/directory';
$scanned_directory = array_diff(scandir($directory), array('..', '.'));
```

https://searchcode.com/?q=array_diff+scandir


PHPのDocのサンプルコードはあくまでもユーザの投稿で、トップの記法でも最適解ではない可能性もあることを念頭に置いておきたい。
メールヘッダーからわかる情報

メールヘッダーからは、SMTPサーバー、通信経路、送信アプリケーション、文字コード等の情報が読み取れるので調べていく。

## メールヘッダーとは

* [Eメールヘッダ情報の確認方法 | 迷惑メール相談センター](https://www.dekyo.or.jp/soudan/contents/ihan/header.html)
* [ヘッダ情報の読み方：BIGLOBEネットコミュニティ相談室](https://support.biglobe.ne.jp/ask/nesco/header.html)


## Google Admin Toolbox　Messageheader

メールヘッダー情報の見た目はわかりにくい形式で出力されるが、Google提供の
[Messageheaderツール](https://toolbox.googleapps.com/apps/messageheader/)
で、わかりやすい形式に変換・解析してくれる。

* [ヘッダー全体からメールの経路を確認する - Gmail ヘルプ](https://support.google.com/mail/answer/29436?hl=ja)

## 各項目の情報


### Content-Type

メールの出力形式、文字コードがわかる。

```
テキスト形式
Content-Type: text/plain; charset="utf-8"
Content-Type: text/plain; charset="ISO-2022-JP"
content-type text/plain charset=us-ascii
HTML形式
Content-Type: text/html; charset=＊＊＊＊
リッチテキスト形式
Content-type: multipart/mixed; boundary="******
```

テキスト形式やHTML形式、添付ファイルや画像を含むリッチテキスト形式などがある。


[ISO-2022-JP](https://ja.wikipedia.org/wiki/ISO-2022-JP)は日本語文字コードの形式、UTF-8が扱えない古いメール(昔の携帯電話等）向けに使われていた。

* [Content-Type【メールヘッダ】とは](https://wa3.i-3-i.info/word11116.html)

### X-Mailer
送信者が使用しているメールソフトやアプリケーション

```

アプリケーション
X-Mailer: Microsoft Outlook 16.0
X-Mailer: CakePHP Email
X-Mailer: Mu-b # 楽天系のサービス
X-Mailer: MailChimp Mailer -　# メール配信サービス



```
アプリ開発実践入門(未完)


Ruby on Rails6超入門で学習しながら、アプリを作っていく。

仮想環境構築
homebrewとrubyとrailsとrbenvとdockerはインストール済み

参考資料
https://www.udemy.com/course/rails-kj/learn/lecture/9073492#overview
「」

Rubyインストール
メモ
rbenv install Rubyのバージョン:Rubyのインストール
rbenv rehash:バージョン切り替え可能にする
rbenv global Rubyのバージョン:Rubyのバージョンの切り替え
ruby -v: バージョンの確認
irb:対話的にRubyを実行できる,exitで抜ける

Dockerで環境構築
#コンテナ#実行環境#開発環境
メモ
docker version:ドッカーのバージョン情報
Dockerfile:実行環境のイメージを作成する、ここの情報をもとにコンテナ仮想環境を作成する
「○○：✖️✖️」の名称→リポジトリ:タグ

```docker-compose run web rails new . --force --database=mysql```
:docker-composeファイルに記述したコンテナで後ろのrails new以降を実行する
```rails new .```:実行時のディレクトリに新しいRailsプロジェクトを作成するコマンド
```--force```:既存のファイルを上書きするオプション
```--database=mysql```:MySQLを使用する設定を入れるオプション

```docker-compose build```:Dockerfileを参考にコンテナをビルドする

build後configディレクトリのdatabase.ymlを編集しMysqlを利用できるようにする。

```docker-compose up -d```:現在のディレクトリ内にあるdocker-compose.ymlに基づいてコンテナを起動するコマンド
```docker-compose ps```:起動したコンテナの状態を確認するコマンド

起動後開発環境用のDBを次のコマンドで作成する
```docker-compose run web bundle exec rake db:create```:bundle exec以降をコンテナ上で実行してくれる。
```bundle exec rake```:rakeコマンドの実行
```bundle exec```の意味は[ここ](https://qiita.com/kadaiho23/items/d7e04b9bfbacf676a3d8#bundle-exec%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84%E3%81%A8%E3%83%9E%E3%82%A4%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)
```rake db:create```:DBをMysqlサーバ上で作成してくれる


```localhost:3000``` を起動して完了！



Visual Studio Codeを使う
#開発ツール
メモ
[ショートカットキー](https://qiita.com/naru0504/items/99495c4482cd158ddca8)
⌘X:行の切り取り (未選択時)
⌘C:行のコピー (未選択時)
⇧⌘K:カーソル行削除
⌘Enter:下に行追加	
⇧⌘Enter:上に行追加
⌘K ⌘C:行コメント記号を追加
⌘K ⌘U:行コメント記号を削除
他にも
https://qiita.com/1coin178/items/1cfa68c41a4e098ea8ae
https://qiita.com/oruponu/items/ae9c720d4522c1606daf
https://skillhub.jp/blogs/234



疑問
homebrewとrbenvとdockerってそもそも何？

rbenv initって何のためにやる？.bash_profileへの記述は
eval "$(rbenv init -)"
ゲストユーザー機能【Vue.js/Firebase】

#概要
・ポートフォリオでゲストユーザー機能を実装したので言葉での説明とコード例を紹介
・使用技術はVue.jsとFirebase
・開発環境はVue-Cli

#考え方
あらかじめゲストユーザーのアカウントを作成しておき、ボタンを押すと自動的にそのゲストユーザーのemailとpasswordを使ってログインされるようにするだけ。

ゲストユーザーのemailは「guest@example.com」、password「guests」としてあらかじめアカウントを作成しておく。
通常ログインとの違いは下記の通り。

■通常ログイン
formにemailとpasswordを入力し、その値を引数として使ってfirebaseのsignInWithEmailAndPasswordでログインする。

■ゲストログイン
ボタンを押すとゲストログインの関数が実行され、signInWithEmailAndPasswordに変数ではなく、直接「guest@example.com」と「guests」を渡す。

#コードは以下の通り
```csharp:login.vue
methods: {
    loginWithGestUser(){
      //formに入力したemailやpasswordではなく、予め登録されているものを直接渡す
      this.$store.dispatch("loginWithGestUser", {email: "guest@example.com", password: "guests"})
    }
　}
```
```csharp:store.js
loginWithGestUser({commit}, payload){
      firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
        .then(
          user => {
             const guestUser = {
                //省略。。。
              }
            }   
            commit("setLoginUser", guestUser)
          })
    }

```
アプリ開発実践入門8 Modelとデータベース CRUD

今日の教科書

#IDでデータを検索
IDを指定して検索しデータを取り出す。

##コントローラにshowアクションを追加

```
def show
  @msg = "Indexed data."
  @data = モデル名.find(params[:id])
end
```

##findメソッド
変数 = モデル名.find(ID):IDを取り出すためのメソッド。引数に入れたIDのデータを取り出す。
返されるデータはモデルクラスのインスタンス。

##showテンプレートを作成

##routes.rbの追記

`get 'コントローラ名/:id', to: 'コントローラ名#show'`

 :idにしてidを値としてパラメータに渡す。

##index.html.erbの修正
showアクションを表示するリンクを用意するために修正。

#データの新規作成
新しいデータの作成。フォームを用意して送信し保存する。

addでフォームを表示、送信してcreateで保存、二つのアクションを使う。

##addテンプレートの作成
`form_tag`とフォームヘルパーを使って、フォームを作成する。

##コントローラの作成

`モデル.create(項目名:値,...)`：引数にデータの値をセットして、実行すればデータがテーブルに保存される。

###リダイレクト

`redirect_to アドレス`：直接アドレスを指定してリダイレクトできる。

##ルーティングの指定
`get 'コントローラ/add'
post 'コントローラ/add' , to: 'コントローラ#create'`

先の`get 'コントローラ名/:id', to: 'コントローラ名#show'`より先に書かないと、
/addにアクセスした際に:idが先に認識され、:id=addと判断される。
変数をルーティングに利用すると、あらゆる変数パターンが:idに行き着く。
なので最後に記述する必要がある、と理解した。参考にした記事↓
https://qiita.com/antena-dmm-daihyou/items/46931ffc56c101fc6a4e
https://qiita.com/gawach/items/4e7460d06f70e3013eea


#モデルをフォームに適用

##addテンプレートの修正
`form_for (モデル, url:{controller: コントローラ, action: アクション})`：引数にモデルのインスタンスを指定して、用意したモデルをフォームにバインドする働きをする。フォームの入力項目にデフォルトでモデルにあるデータが挿入されていたり、送信されたフォーム情報が、そのままモデルとして扱える。

これを利用するとフォーム内に情報が追加されそれがサーバーに送信されて、正しく動作する(らしい)。

##コントローラの修正
`private`：メソッドのアクセスを制約するためのキーワード。クラスの中からしか呼び出せない。

`モデル.create(メソッド)`：メソッドを指定することでメソッドの戻り値が引数に指定されている。
ここには前回、paramsのデータの値を直接使っていた。(params[:@@])
しかし、フォームへルパーを使っている場合だとエラーが起こる。

理由はparamsのパーミッションがないから。
フォームの値をデータベースに保存する際に、正しいかどうか自動でチェックしている。

今回のメソッドは`params.require(:＠＠).permit(:name, :age, :mail)`。
`require`：paramsの中に指定の値があるかどうかチェックしている。:@@があるかどうかチェック。
さらに`permit`：引数に指定されている項目が用意されているかチェックしている。

チェックしたものをcreateに渡して保存。

#データの更新
フォームでデータの送信を行う際に、すでにあるデータに扱う。あるデータを書き換えて保存する。

##indexテンプレートの修正
editを追加

##editテンプレートの作成
HTMLファイルを作って記述。
フォームヘルパーを前回と同様に使っている。

```
form_for(@person,url:{controller:'people', action:'update', id:@person.id}) do |form|
```

idの項目が追加されている。form_forで@personオブジェクトを指定しているので、保存してあるデータが既に入っている。

##アクションの追加

```
def edit
  @msg = "edit data.[id = " + params[:id] + "]"
  @person = Person.find(params[:id])
end

def update
  obj = Person.find(params[:id])
  obj.update(person_params)
  redirect_to '/people'
end
```

editはGETアクセス、updateはPOST送信。

必ずprivateよりも上にかく。
クラス内部でしか使えなくなるので、アクションを外部から呼び出せなくなる。

editメソッドでは、ID番号をもとにデータを検索してフォームに渡している。
updateメソッドではIDで更新するデータを検索しオブジェクトとして取り出す、
オブジェクトの値を更新する、リダイレクトでトップページに戻る、という作業をしている。

update：paramsを引数にして送られた内容を更新して保存する

##ルーティングの追加
ルーティング情報を記述する。

###PATCH送信について
「No route matches [PATCH]」のエラーが起こる。
データ更新のためのフォーム送信はPATCH送信のルーティングが必要。

#データの削除

##deleteアクション
データをモデルのインスタンスで取り出して、destroyメソッドを実効する。
データベースからデータが削除される。

##ルーティングの追記
deleteのルーティングを追記。
Unityのエディタ上でTexture2DArrayアセットを作る

# はじめに
UnityのShaderでは、**Texture2DArray**を使うことができます。
ところが、Unity2020.1までは肝心のTexture2DArrayアセットをエディタ上で作成する方法がなく、Editor拡張を使って、コードを書くほかありませんでした。

しかし、**ついに2020.2にて、エディタでTexture2DArrayアセットを作成する機能がデフォルトで実装されました！**めでたい！
ということで、本記事はその新機能を使う方法の紹介です。

※英語読める方は本家本元を読むのが早いです。2021/03/12現在、日本語のマニュアルはない模様。
https://docs.unity3d.com/2020.2/Documentation/Manual/class-Texture2DArray.html

# 対応バージョン
- Unity2020.2以降

# 方法

## 1. 画像を用意する
![tex_terrain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540876/f60c41be-27e0-55e7-792f-0c99f5580e86.png)

まずは、Photoshop等でこのような均等割り付けの画像を作成します。
ここでは**2048x1024px**で、**横4ｘ縦2**に割り付けた画像を例に挙げます。
この割り付けた画像一つ一つを、Unity側の**import setting**で自動スライスし、Texture2DArrayに変換します。

## 2. Unityに読み込む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540876/421109be-8eee-e185-9e47-d58eaa3b4a5f.png)
Unityに読み込むと、まずはこのような設定で読み込まれるかと思います。（多少違うかも）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540876/9689a500-3d40-c599-36f7-f4c93a3871a1.png)

このうち、上から２番目の**「TextureShape」**を変更します。
Unity2020.2からは、この項目に、**「2DArray」**が増えていると思うので、これを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540876/1cdccf33-f37f-6f81-d3ff-b089e3dc38cf.png)

すると、**Columns**、**Rows**という項目が出てくるので、先ほど作成した画像の、割付の数を入力します。
今回の例では**「横4ｘ縦2」**の画像なので、**Columnsに4、Rowsに2**と入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540876/38926e36-250f-3868-0cae-07f2b2e733ed.png)

以上で設定完了なので、**「Apply」**を押し、生成されたことを確認してください。
シンプル、カンタン！
Navigator 2.0でpushReplacement

Navigator 1.0での`pushReplacement`は、Navigator 2.0では、`Navigator`の`pages`自体を切り替えることで実現できます。

```dart
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Navigator(
      pages: !_shouldReplace
          ? [
              MaterialPage(
                key: ValueKey('FirstPage'),
                child: FirstPage(),
              ),
            ]
          : [
              MaterialPage(
                key: ValueKey('SecondPage'),
                child: SecondPage(),
              ),
            ],
      onPopPage: (route, result) => route.didPop(result),
    ),
  );
}
```
ポートフォリオ作成記録①（機能用件編）


<h2>自己紹介</h2>
現在、30歳のエンジニア転職希望者です！
転職活動に向けてポートフォリオ作成中でしたが、
自分の記録が誰かの役に立てばいいな…と思い書き込む事にします。

<簡単な経歴>
・不動産営業5年→SES1年ちょっと（開発に携われず…）
・2020年12月~基礎から再復習
・2021年3月1日〜：ポートフォリオ作成開始
・2021年5月末退職（ヒント：コロナ渦）

スケジュール感がおかしいと思った方いますか？ お見事です。正解です。

<h2>アプリの概要</h3>

<b>「投資用不動産の営業マンの口コミサイト」</b>です。

投資用不動産業界には詐欺師一歩手前の営業マンがいるので、
被害に合う方が減らせればという思って着手します。
普段生活している中で「こんなのあればいいな」とふと思ったものを
いくつかメモしていたのですが、そのうちの1つがこれでした。


フロントエンドはVue.js、バックエンドにfirabaseを採用する予定です。
<b>「まずポートフォリオを作って面接にいける状態にしよう！」</b>
という事でこの選択です。後からLaravel入れるかもしれません。


<h3>機能用件</h3>

最初に機能をどうするか考えました。
CRUD処理、口コミ機能、採点機能、認証機能は最初に実装し、
転職活動しながら、チャット、フォロー、ランキング、条件検索機能などを追加実装しようと思っています。

機能用件はおそらく皆さんもよく使っているであろうスプレッドシートを利用。
スプレッドシートについては[こちら](https://www.topgate.co.jp/gsuite-spreadsheet)


ちなみに機能用件に関しては下記のような形で作成してみました。
（※優先度は適当です。ごめんなさい許してください。絶対後で修正します）

[登録機能]
![スクリーンショット 2021-03-12 2.43.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693783/ca092d19-38c6-9122-b5c2-5a4ff9f19ed1.png)
[編集機能]
![スクリーンショット 2021-03-12 2.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693783/c0c0ec9a-da2c-0071-7857-3b43b8962f91.png)
[削除機能]
![スクリーンショット 2021-03-12 2.42.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693783/3db0e62a-d39c-fee1-d8ae-11a4bea4c3af.png)
[検索機能]
![スクリーンショット 2021-03-12 2.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693783/203c6010-b25e-97f9-0bcd-cfadfb04453b.png)


いきなりこうなったわけではなく、画面遷移図なんかを作りながら
ちょくちょく追加していたらこんな感じになりました。
今日はここまで！
CloudcompareでPCD形式が使えない時/Cloudcompareのインストール方法 (Ubuntu)

##CloudcompareでPCD形式が使えない時
下の写真のようにCloudcompareに点群データを入れて,```DB Treeリスト内の名前を選択``` > ```Save```で点群を保存できる.
その際にPCDで保存したかったがPCD形式での保存が選べなかった.

![Screenshot from 2021-03-12 02-21-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/337ea885-1053-25d4-a8a6-014e4913640e.png)

また,PCD形式のファイルを読み込もうとすると以下のエラーが発生した.

```
[Load] Can't guess file format: unhandled file extension 'pcd'
```
![Screenshot from 2021-03-12 02-26-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/d02f165c-9c25-750d-ea88-95ec889abc48.png)

##原因
```sudo apt-get install cloudcompare```でインストールしてしまっていたことで,関連のソフトウェアが入っていなかった.

##対策
snapで入れるとちゃんとしたcloudcompareを入れることができるようです.snapはubuntuに標準で入っているパッケージ管理ソフトです.

- まず以前入れたcloudcompareを削除します.

```
sudo apt remove cloudcompare
```

- 次にsnapでちゃんとしたcloudcompareを入れます.

```
sudo snap install cloudcompare

```

##おわりに

以上で,PCDファイルの読み込みやPCD(Point Cloud Library)形式での保存ができるようになりました:)
![Screenshot from 2021-03-12 02-34-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/728a21eb-4293-053b-c12c-33c119feb2bc.png)
![Screenshot from 2021-03-12 02-35-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/2ffc5fec-2f48-0a67-262c-f081677a29b3.png)
Linuxを初めて勉強した。

##シェルスクリプト
シェルスクリプトで作業の自動化ができる。

####シェルとは
カーネルとOSの間にある。
・コマンドの入力の受付
・そのコマンドの実行
・入力したユーザにその結果を返す

####カーネルとは
・さまざまな機能を持つ
・ハードウェアと直接やり取りする。

####OSとは
コンピュータの基本動作を実現する。

###プログラミング
指示を与え順番に実行させる機能
シェルスクリプトでは
ファイルの操作などのコマンドを条件分岐、繰り返しができる。

###プログラムの要素
・順次実行
・条件分岐
・繰り返し
・サブルーチン

###シェルスクリプトの作成
・シェルスクリプトは、テキストファイルである。
・張拡子は.sh
・bash以外にもシェルスクリプトの種類が存在する。
・＃！はシバンという。　/bin/bashで実行するという宣言
・シバンはファイル名を指定するだけでシェルスクリプトを実行できる。

```
$ vi lsdate.sh ファイルを作成
#!/bin/bash　bushのシェルスクリプトを
```
パーミッションを変更してファイルの実行権限をつける。

```
$ ls -l lsdate.sh　長形式で表示
$ chmod u+x lsdate.sh　実行権限を与える。
$ ls -l lsdate.sh　
$ ./lsdate.sh　シェルスクリプトを実行
```
####＃　コメント　＃で始まるのがコメント

####echo 文字列を標準出力に出力

```
echo Message test 文字列を表示する
```
####変数
数値や文字列を代入するもの

変数には２種類ある
シェル変数　シェルないのみで有効
環境変数　実行されたコマンド内でも有効になる

####env 現在の環境変数の一覧を表示

####unset 登録済の環境変数を削除
####クォートの種類
・シングル　文字列
・ダブル　＄の後、変数になる
・バック　コマンド
####引数
####shift 引数の順序をずらす
####エスケープシーケンス　特殊の文字　特別な扱いをうける
￥（バックスラッシュ）を行末につけることで改行をすることをできる。
適切に使い、コマンドの視認性を高める。

￥には他にも用途がある。　タブ、改行、文字の表記

####source ファイルを読み込んでシェル環境を設定
ファイル内容はシェルコマンドと解釈して実行する。

###case 条件分岐
####for while until 繰り返し
####select ユーザに対し数値による入力を促す
###break,continue 繰り返し制御
繰り返しを終了、繰り返しの先頭に戻る役割がある。

###サブルーチン　関数とも呼ばれる
####return 結果を返す
###実際のシェルスクリプト
###bash,sh デバッグ(どこに問題があるかを調べる）
コマンド、変数の中身を見ながらスクリプトを実行する。
##わからないところ
***・環境変数の意味
・引数
・source
・実際のシェルスクリプト***
macOS CatalinaでM5StickCに書き込めない場合の対処法

macOSがCatalinaの場合、ArduinoIDEからM5StickCに書き込めない問題が発生したので、解決法をメモしておきます。
コンパイルは成功するのですが、書き込み時に下記のようなエラーメッセージが表示されました。

```
esptool.py v2.8-dev
Serial port /dev/cu.usbserial-xxxxxxx
Connecting........_____....._____....._____....._____....._____....._____....._____

A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header
```

# M5StickCのファーム更新で解決する
***更新に失敗すると、M5StickCにプログラムを書き込めなくなる可能性があるとのことなので、自己責任でお願いします。***

まず、[こちら](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/Updater_FW20200114_A2_BTV231)からUpdateToolをダウンロードします。
ダウンロード後、UpdateToolに実行権限を付与します。

```sh
chmod +x Updater_FW20200114_A2_BTV231
```

M5StickCとmacを接続し、UpdateToolをダブルクリックして起動します。
ターミナルが開いて、下記のようなメッセージが表示されるので、Enterを押下します。

```
$ /Users/hoge/Desktop/Updater_FW20200114_A2_BTV231 ; exit;

==================== M5 Serial Converter Firmware Updater ====================
    
    FW Version: FW20200114_A2

    This is only for update M5StickC or M5Atom Series USB Controller's Firmware 
, using it for any other purpose may cause damage to your devices.

    When you are using this software, make sure you have a reliable connection 
to your device. Any disruption during the process will cause the device 
not functioning.


                        NO WARRANTIES
To the extent permitted by applicable law, neither wsdot,
nor any person, either expressly or implicitly, warrants any aspect of
this software or program, including any output or results of this software
or program. Unless agreed to in writing. This software and program is
being provided "as is", without any warranty of any type or nature,
either express or implied, including, but not limited to, the implied
warranties of merchantability and fitness for a particular purpose,
and any warranty that this software or program is free from defects.
==========================================================================

Press enter to continue . . .
```

`[プロセスが完了しました]` と表示されれば完了です。
指定タイムゾーンでデータを格納


```java
String dateTime= "2020-12-11T11:12"
LocalDateTime ldt = LocalDateTime.parse(dateTime);

int timeOffset= -9;//日本時間
DateTimeFormatter dtFt = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm z")
                                             .withZone(ZoneOffset.ofHours(timeOffset));
String strToSave = ldt.format(dtFt);
```

PostgresSQLでデーターを保存時にtimestamp型コラムにwith time zoneを付く。
TortiseSVNで日本語化をミスった時の対処

環境:Windows10 64bit

使用しているSVNと違うバージョンの日本語化パッケージを入れた場合、その後に同じバージョンの日本語化パッケージをインストールしただけでは、日本語化できなかった。

##TortiseSVNで日本語化をミスった時の対処

#### 1.不要なファイルの削除
「C:¥Program Files¥TortiseSVN¥Languages」内の.affと.dic以外の拡張子のファイル、ディレクトリを全て削除する。ディレクトリ「ja」も削除

#### 2.同じバージョンのインストーラを実行

Settingを確認して日本語が選択されていることを確認して再起動する。

終わり
ある書籍のJSXが謎な件（<When>）

非常に個人的なメモ。他者には役に立たない。

ある書籍でREACTのサンプルを提示していて、以下のようなコードが記されていた。

```
function App(){
return(
    <Hoge>
       <When flag=true>
           <h>hello world</h>
       </When>
       <When flag=false>
           <h>bye2 world</h>
       </When>
    </Hoge>
   );
}
```

条件付きレンダリングはif分で制御するものだと思っていたので期待してしまったのだが、（https://ja.reactjs.org/docs/conditional-rendering.html ）
ここにあるWhenというJSXはどうやらサポートされてないらしい。自前のコンポーネントでif分制御できるようなものを作れトいう意味なのかな？考え方としては参考になるので、制御文に当たるようなコンポーネントも作ってもいいのかもしれない。
Reactの環境構築

##React の環境構築
とにかくTypescript を使える環境にして学習したい。

###実施したことを箇条書きで

- Nodist インストール（Nodeのパッケージ管理）
- nodeインストール(~~15.11.0~~ 14.16.0) を入れた 
　（どうやら14.16.0がLTSで推奨らしい）


```
nodist + 14.16.0
```
ref) https://qiita.com/satoyan419/items/56e0b5f35912b9374305

- npm を入れる( 14.6.0 に合うバージョンは6.14.11のようだ）

```
nodist npm 6.14.11
```

ref) https://nodejs.org/ja/download/releases/

- npx がなぜかはいっていないのでnpmで入れた（グローバルに入れたけどいいか？）

```
npm install npx -g
```

- create-react-app をインストールする

```
npm install create-react-app -g
```

- typescript でReact のプロジェクト(playground)を作成する

```
npx create-react-app playground --template typescript
```

```
dir playground
2021/03/12  00:55    <DIR>          .
2021/03/12  00:55    <DIR>          ..
1985/10/26  17:15               310 .gitignore
2021/03/12  00:57    <DIR>          node_modules
2021/03/12  00:55           693,178 package-lock.json
2021/03/12  00:55               969 package.json
2021/03/12  00:54    <DIR>          public
1985/10/26  17:15             2,117 README.md
2021/03/12  00:54    <DIR>          src
2021/03/12  00:54               561 tsconfig.json
```
```
dir playground\src
1985/10/26  17:15               564 App.css
1985/10/26  17:15               273 App.test.tsx
1985/10/26  17:15               556 App.tsx
1985/10/26  17:15               366 index.css
1985/10/26  17:15               500 index.tsx
1985/10/26  17:15             2,632 logo.svg
2021/03/12  00:54                41 react-app-env.d.ts
1985/10/26  17:15               425 reportWebVitals.ts
1985/10/26  17:15               241 setupTests.ts
```


どうやらtypescript の環境ができたらしい。
window の環境でやったけWLS2のUbuntu上で再構築しようかなぁ。vimで編集したいし。それともVSCodeでしばらく編集してみようかな。
Ubuntuに対するWSLのバージョン変更

Ubuntu に対するWSLのバージョンを変更してみた。

```
wsl --list --verbose
  NAME      STATE           VERSION
* Ubuntu    Running         1
```

どうやらWSL Version 1 でUbuntu が動いているらしい。
下記のコマンドで変更してみる。

```
wsl --set-version Ubuntu 2
```

しばらく待つと
```
wsl --list --verbose
  NAME      STATE           VERSION
* Ubuntu    Stopped         2
```

めでたく変更できた。
フレッツ光 + Plala + ホームゲートウェイ(PR-S300)でぷららv6エクスプレス

メモです
Plalaは契約プランや契約時期によって設定状態が変わるらしいので、FAQをよく読んだり、Plalaの中の人に相談しながらすすめるのが安全かもしれません。

### やったこと

2019-10-23に『【ぷららからのご案内】次世代通信技術「ぷららv6エクスプレス」の標準提供について』というメールを受信。
チャットで相談すると、ルーターがOCN バーチャルコネクト非対応であることがわかるも、折角なので機能をonにしてもらう。
（↓の画像は2019-10-19に取得してあった。メールを受信する前に設定を有効にしたのかもしれないけど忘れた）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502524/6d8d5aa4-37aa-b05b-e273-96041407f2ee.png)

2021-03-09に『【ぷららからのご案内】次世代通信技術「ぷららv6エクスプレス」によるIPv4 over IPv6接続機能のご提供について』というメールを受信。
内容を読み解くと、ひかり電話対応ルーター（ホームゲートウェイ）が利用条件になっている模様。

マイページの設定を見ると以前には存在しなかった設定項目ができているのでこっちもON。
そして2019に取得した画像と比べると、IPoE対象接続先にIPv4が追加された模様。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502524/624c5c9f-0221-f5b7-80f1-19caf30c705c.png)

### 各種確認

しばらくするとホームゲートウェイ(PR-S300)の接続先設定画面が変わった。
IPv4の設定や操作ができなくなり、IPv6の設定に至っては設定画面のリンクもなくなった。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502524/93f58219-1efa-38a5-ea72-52fd96d4d654.png)

[あなたの IPv6 をテストしましょう。](https://test-ipv6.com/index.html) にアクセスすると下記状態。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502524/ea76fcd7-bf1e-ef73-2b59-9b4add0853bd.png)

[ぷららv6エクスプレス（IPoE）接続環境確認サイト \| ぷらら](https://web1.plala.or.jp/ipoe/ipchecker/) にアクセスすると下記状態。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502524/bf9e59c1-47b7-fd5c-53f4-37c498c6d868.png)


ということで、対応ルータに変えずともホームゲートウェイ(PR-S300)でぷららv6エクスプレスが利用できるっぽい。