OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsでテーブルを動的に行追加する


#完成品

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">vue.jsで動的にテーブルの行追加<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a><a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://t.co/TD95uWoVqn">pic.twitter.com/TD95uWoVqn</a></p>&mdash; sawa (@sawakoshi_yy) <a href="https://twitter.com/sawakoshi_yy/status/1319632237613047808?ref_src=twsrc%5Etfw">October 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#完成品のWebアプリ
https://naughty-franklin-898e0a.netlify.app/
郵便番号7桁入力したら住所検索します。
検索ボタンクリックするたびに行追加して検索します。

#参考にしたもの
[【Vue.js】データ配列を使ってテーブルを動的に生成してみる。]
(https://www.doraxdora.com/blog/2020/02/15/post-11138/)
[Vue.jsを100時間勉強して分かったこと]
(https://qiita.com/kskinaba/items/3e8887d45b11f9132012)
[HeartRails Geo API]
(https://geoapi.heartrails.com/api.html#postal)

#コード（記事の下の方に完成品のCodePen置いてます）
・HTML

```html:
　<div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <input class="form-control" v-model:value="text" placeholder="郵便番号を入力…"><br>
      郵便番号：{{ text }}<button v-on:click="addTask" class="btn btn-primary">検索</button>
    </div>
  </div>
  
  <table class="table table-striped">
    <thead>
      <tr>
        <th>都道府県</th>
        <th>市区町村</th>
        <th>町域</th>
        <th>緯度</th>
        <th>経度</th>
      </tr>
    </thead>
    <tbody>
        <tr v-for="address in addressList"> 
          <td>{{ address[0] }}</td>
          <td>{{ address[1] }}</td>
          <td>{{ address[2] }}</td>
          <td>{{ address[3] }}</td>
          <td>{{ address[4] }}</td>
        </tr>
    </tbody>
</table>
```

・Javascript

```javascript:
const app = new Vue({
    el: '#app', // Vueが管理する一番外側のDOM要素
    data: {
      // Vue内部で使いたい変数は全てこの中に定義する
      text: '',
      prefecture: '',
      addressList:[],
    },
    methods: {
      addTask: async function() {
        //郵便番号から住所情報取得
        try {
          const address = await axios.get('https://geoapi.heartrails.com/api/json?method=searchByPostal&postal=' + this.text);
          this.addressList.unshift([address.data['response']['location'][0].prefecture,address.data['response']['location'][0].city,address.data['response']['location'][0].town,address.data['response']['location'][0].x,address.data['response']['location'][0].y]);
        } catch (e){
          console.log('住所情報の取得に失敗：', this.todoList);
          console.error(e);
        }
      }
      ,
      clearAll: function() {
        console.log('検索履歴が削除されました。');
        this.addressList = [];
      }
    },
});
```

#作成中のメモ

・axios.getの中のURL、node.jsはhttpでいけたけど、Vue.jsはhttpsじゃないとダメ（なぜ）

・CodePenの履歴（メモ書くのめんどくさいからCodePen分けて履歴にすればええやん。のスタイル。）
テーブル使ってないやつ
https://codepen.io/sawakoshi_yy/pen/MWeboLm

テーブル使ってるけど1行の中に追加されてるやつ
https://codepen.io/sawakoshi_yy/pen/eYzgpNN

完成品
https://codepen.io/sawakoshi_yy/pen/qBNROwY

・await使うなら、functionの前にasyncつける
[Swift] Stringの文字数がある数に一致するかどうかを知りたい時に…

# はじめに

　ある文字列が空かどうか調べたい時、「`string.count == 0`ではなく`string.isEmpty`を使いましょう」ということは聞いたことがあるかと思います。
　理由としては、`String`における`var count: Int`は $O(n)$ だけど`var isEmpty: Bool`は $O(1)$ だからということになります[^String.isEmpty]。

[^String.isEmpty]: 参考: [isEmpty の方が count==0 よりも良い理由](https://qiita.com/ko-watanabe/items/1f1838466981adf9f12f)

　では、ある文字列の`count`が任意の数と等しいかどうかを調べるにはどうしたらいいでしょうか。

```Swift
extension String {
  func countIsEqual(to expectedCount: Int) -> Bool {
    // ここを考える
  }
}
```


# 実装例

## 単純、では△

いちばん簡単なのは次のようなものでしょう。

```Swift
extension String {
  func countIsEqual(to expectedCount: Int) -> Bool {
    return self.count == expectedCount
  }
}

let string = "Qiita"
print(string.countIsEqual(to: 1)) // -> false
print(string.countIsEqual(to: 5)) // -> true
print(string.countIsEqual(to: 10)) // -> false
```

　でも、ちょっと待ってください。文字列が空かどうか調べるときに`isEmpty`を使うのは`count`が$O(n)$だからでした。この`countIsEqual`は内部で`count`を呼んでいます。`self`が高々数文字なら許容範囲でしょうが、`self`が1000万文字とかになり得るのであれば無視できません。
　`count`を呼ばない方法を考えてみましょう。


## 前から数えていく

`count`を使わないとなると、地道に自分で数えるしかありません。でも自分で数えていけば`expectedCount`を超えた時に数えることを打ち切ることができます。
というわけで、こうなりました：

```Swift
extension String {
  func countIsEqual(to expectedCount: Int) -> Bool {
    guard expectedCount >= 0 else { return false }

    var countNow = 0
    for _ in self {
      countNow += 1
      if countNow > expectedCount {
        return false
      }
    }
    return countNow == expectedCount
  }
}

let string = "Qiita"
print(string.countIsEqual(to: 1)) // -> false
print(string.countIsEqual(to: 5)) // -> true
print(string.countIsEqual(to: 10)) // -> false
```

ね、簡単でしょ？

　ちなみに、これも$O(n)$ではあるのですが、この場合の $n$ は「`count`と`expectedCount`の小さい方」ということになります。基本的に`count`と`expectedCount`がそんなに変わらないのであれば最初の単純な実装のほうでいいかもしれません。しかし、たとえば、外部からの入力などで(意図的か否かは別として)大きな文字列が入ってくる可能性があり、且つ`expectedCount`が小さい値をとることが期待される場合は、こちらの実装の方が有用でしょう。
Vuetifyのtext-fieldにgoogleなどでキャッシュされている情報が入らないように

Nuxtを使って開発を進めているが、ちょっと躓いたことがあったので備忘録として。

ログイン画面やらプロフィール画面を作っていて、
入力できるコンポーネントとして、Vuetifyの"v-text-filed"をよく使用するのだが、
なぜか、googleで保存しているパスワードやらメールアドレスやらが入ってしまう。

困ったと思ってググったら

```typescript:Nuxt.js
<v-text-filed
 autocomplete = "false">
</v-text-filed>
```
とやるのは上手くいかない。

```typescript:Nuxt.js
<v-text-filed
 autocomplete = "new-password">
</v-text-filed>
```
これだとばっちり！


>参考：https://github.com/vuetifyjs/vuetify/issues/2792
warファイルとimporedClasses

eclipceの基本機能にあるインポートとエクスポート

拡張子は「war」ファイルで作られます。

warをエクスポートする際にコンパイルされるのか、エクスポートしたwarファイルをインポートすると「.java」のファイルは「.class」に変更される。

コンパイルの再に不要な物は消されるのか、コメントが無くなったり、コードが変わったり（効率化？）する。


そんでもって保存先も変わります。

![2020-10-23_224541.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/818309/531b30c8-f3c8-4f6a-fcf9-6a57be0bb58b.png)

「.java」は「Javaリソース/src」に保存するのかと思いますが

warファイルをエクスポートしてインポートすると「.java」は「.class」にコンパイルされて
「javaリソース/ライブラリー/Web Appライブラリー/importedClasses」に移動します。


元PHPエンジニアとしては良く分からん特徴的な動きなのでちょっと躓きました。

これから更にJavaの世界に足を踏み入れていくのですが…難しいっすね。
Laravel:リダイレクトの記載

【概要】
----------------------------------------
<b>1.どのように記載するか</b>

<b>2.開発環境</b>




1.どのように記載するか
----------------------------------------

```php
redirect()->route( ルート名 , 配列 )
redirect()->action( アクション名 , 配列 )
redirect()->view( ビュー名 , 配列 )
redirect()->download( ファイルパス名 )
redirect()->file( ファイルパス名 )
```
・ルート名は、Laravelでよく使う"web.phpに記載してあるルート情報になります。
・アクション名は、"XXXXController@index","XXXXController@show"などになります。
・ビュー名は、直接"XXXX.index"などが入ります。
・ファイルパス名は、イメージファイル名やファイルパスをテキストで記載します。


<br>

2.開発環境
----------------------------------------
PHP 7.4.10
Laravel 8.9
<br>
ローカルサーバー起動できない！時の対処法

Ruby on Railsでpictweetのアプリケーション作成中。
ローカルサーバーを再起動しようと思ったが "cotroll + c"を入力しても反応なし。
ターミナルを強制終了し、再度立ち上げてから "rails s"を入力。

すると、エラー発生。
”Address already in use - bind(2) for "127.0.0.1" port 3000 (Errno::EADDRINUSE)”
とのことで、なにやら3000番のポートが使用中だそうだ（よくわかってない）。

「ターミナルを再起動した時にローカルサーバーが立ち上がらない」
という状況である。

サーバーを終了しないままターミナルを閉じた時に生じる現象らしい。

色々調べた結果、

1、lsofコマンドでポートで実行中のファイルを確認する
2、そのファイルをkillコマンドで削除する

という手順で解決した。

#1、lsofコマンドでポートで実行中のファイルを確認する

```
$ lsof -i :3000
```

今回は3000番ポートなので、最後の数字を3000で入力。
結果が↓

```
COMMAND  PID      USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
ruby    8376 SHIGEDEEN   13u  IPv4 0xa2239c9f9d219327      0t0  TCP localhost:hbci (LISTEN)
ruby    8376 SHIGEDEEN   14u  IPv6 0xa2239c9f85859677      0t0  TCP localhost:hbci (LISTEN)
ruby    8376 SHIGEDEEN   25u  IPv6 0xa2239c9f92497157      0t0  TCP localhost:hbci->localhost:58898 (CLOSE_WAIT)
ruby    8376 SHIGEDEEN   27u  IPv6 0xa2239c9f7cc60a37      0t0  TCP localhost:hbci->localhost:58871 (CLOSE_WAIT)
ruby    8376 SHIGEDEEN   28u  IPv6 0xa2239c9f6f09fb37      0t0  TCP localhost:hbci->localhost:58879 (CLOSE_WAIT)
ruby    8376 SHIGEDEEN   29u  IPv6 0xa2239c9f9040b777      0t0  TCP localhost:hbci->localhost:58885 (CLOSE_WAIT)
```
ここで、PID接続しているものを消せばよいらしい。

#2、実行中ファイルをkillコマンドで削除する
というわけで 8376 を killコマンドで消します。

```
kill -QUIT 8376
```

または、

```
kill -QUIT <PID>
```
これで、サーバーを再起動することができるようになりました。

#参考文献
今回参考にさせていただいた記事はこちら👇
(ローカルサーバを停止せずにターミナルを閉じてしまいました。:http://song-of-life.hatenablog.com/entry/2017/02/02/204010）
(げ！ローカルサーバーを切らずにターミナルを消しちゃった！:https://qiita.com/nagao_norihiro/items/aba40bd4e0eac9f9a92d）

ちなみに、lsofコマンドは他にも有用な使い道があるようだ。
(lsofコマンド入門:https://qiita.com/hypermkt/items/905139168b0bc5c28ef2）
AngularのChunkエラーを解説する

# はじめに
Angularのアプリを開発されている方は一度は以下のエラーに直面したことがあるのではないでしょうか。
![スクリーンショット 2020-10-23 20.23.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/ded4f66e-d67a-83ae-25f1-d6f52e59f690.png)
青い四角で囲まれているところを見ると、 `ChunkLoadError: Loading chunk 14 failed.` と表示されています。

このエラーメッセージがいわゆる **Chunkエラー** です。
もし今までにこのエラーメッセージを見たことがあり、対応に困っているなどあれば参考になるかもしれません。

## Chunkエラーとは何か、なぜ起きるのか
[Angularの公式ドキュメント](https://angular.jp/guide/service-worker-devops)にわかりやすい説明があったので引いてきました。

>このファイルの整合性は、遅延読み込みモジュールの場合に特に重要です。JSバンドルは多くの遅延チャンクを参照しますが、遅延チャンクのファイル名は、アプリケーションの特定のビルドに固有のものです。実行中のバージョンXのアプリケーションは遅延チャンクを読み込もうとしますが、サーバーではバージョンX+1にすでに更新されている場合、遅延読み込み操作は失敗します。

上記の内容をざっくり図にしてみました。
図内では、バージョンAのアプリでサーバーのバージョンBの遅延チャンクを読み込もうとしてエラーになる図です。
基本的にChunkエラーはアプリの再起動やブラウザのリロードで解消することが可能です。

![LazyLoad_Chunkerror.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/7c047ba9-c03a-d153-3130-5c75b725430c.png)

## 対処法
Chunkエラーの概要がわかったところで、じゃあどうすれば良いのかを考えてみます。
上で挙げてますが、アプリの再起動(リロード)をすれば解決します。

[こちら](https://medium.com/@kamrankhatti/angular-lazy-routes-loading-chunk-failed-42b16c22a377)のサイトを参考にすると、リロードのアプローチをかけるためにグローバルにHookできるハンドラを用意しています。

```Typescript
  handleError(error: any): void {
   const chunkFailedMessage = /Loading chunk [\d]+ failed/;

    if (chunkFailedMessage.test(err.message)) {
      window.location.reload();
    }
  }
```

試した感じだと、chunkFailedMessageは一律コピペでよく、その後の対応はアプリケーション次第になるかと思います。(上記の例だとブラウザのリロードをかけているようですね。)

## 終わりに
以上がざっくりとしたChunkエラーの説明と対処法になります。
初めはこのエラーは何が起こっているんだと戸惑いますが、どういう経緯で発生しているかが理解できると対応も検討しやすいですね。

ではまた。

## 参考
[Angular公式ドキュメント](https://angular.jp/guide/service-worker-devops)
[Angular Lazy Routes & loading chunk failed](https://medium.com/@kamrankhatti/angular-lazy-routes-loading-chunk-failed-42b16c22a377)
decltypeとtemplate関数ポインタと関数オーバーロードを使っていたらMSVCがバグってた

## はじめに
小ネタです。

## サンプルコード

```cpp
#include <iostream>
#include <typeinfo>

template<class T>
T func(T a)
{
    return a;
}

int func(int a)
{
    return a;
}

int main()
{
    std::cout << typeid(decltype(func<int>)).name() << std::endl;
}
```

このコードはコンパイルができますか？

はい。gccとclangではコンパイルができました。
https://wandbox.org/permlink/gnpV6M5k6HGB7aZa

しかし

**msvcではコンパイルができませんでした。**
なんでや…

```cpp
    decltype(func<int>) a;
    std::cout << typeid(a).name() << std::endl;
```

ちなみに上記のようにしたらコンパイルが通った


## サンプルコード2

```cpp
#include <iostream>
#include <typeinfo>

template<class T>
T func(T a)
{
    return a;
}

int func(int a)
{
    return a;
}

int main()
{
    decltype(&func) a;
    std::cout << typeid(a).name() << std::endl;
}
```

このコードはコンパイルができますか？

はい。gccとclangではコンパイルが失敗しました。
https://wandbox.org/permlink/SFzOCsAb2V5GHPL1

gccのエラー

```
'decltype' cannot resolve address of overloaded function
```

clangのエラー

```
reference to overloaded function could not be resolved; did you mean to call it?
```

オーバーロードされてるから解決できないとのことです。

しかし

**msvcではコンパイルができました。**(波線はでるんですけどね)
なんでや…

aは`int(*)(int)`型になってますね

## まとめ

MSVCは今日もバグっていました。(たぶん)
みんなもMSVCのバグには気を付けよう。

自分の書いたコードが他のコンパイラでも通るかしっかり確かめよう。
テーブル設計を遅らせることでユーザー体験の最大化を狙える!?米国式最新開発手法「ADD」とは。。

初めまして、記事に訪問いただきありがとうございますm(_ _)m

## 今までのプロジェクトでありがちな言い訳。。。

- 今からこの仕様変更をすると<b>「テーブル設計」</b>に影響が出るので工数がとてもかかります:confounded:
- 今からこの仕様変更をすると<b>「テーブル設計」</b>に影響が出るので工数がとてもかかります:sweat:
- 今からこの仕様変更をすると<b>「テーブル設計」</b>に影響が出るので工数がとてもかかります:pensive:
- 今からこの仕様変更をすると<b>「テーブル設計」</b>に影響が出るので工数がとてもかかります:worried:
- 今からこの仕様変更をすると<b>「テーブル設計」</b>に影響が出るので工数がとてもかかります:rage:

## なんでこんなことが起こってしまうのか:disappointed_relieved:

もう15年も前になるPOA vs DOA論争の結果、データ整合性のためにテーブル設計を一番初めに済ませることが一般的になりました。
[【初級】ゼロから学ぶDOA　第1回](https://xtech.nikkei.com/it/article/COLUMN/20061019/251255/)

ですがこのやり方では実際の画面の動きをお客様が見る前に仕様を決めて、
その仕様に基づいてテーブル設計をしていくため、

テーブル設計を済ませる
-> ビジネスロジックを作る
-> 画面を作っている最中 ←<b>ココ!!</b>

このタイミングで「イメージと違う」「こんなのじゃない」「これじゃ課題を解決できない」
などのやっかみが来て、冒頭の
> 今からこの仕様変更をするとテーブル設計に影響が出るので工数がとてもかかります:rage:

という言い訳が通らなかった日から我々の<b>デスマーチ</b>が始まります:persevere:
## 被害を最低限に抑えるためにはどうしたらいいのか
すでにおなじみとなった「顧客が本当に必要だった物」
![What the customer really needed.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38058/aea298a2-1876-7de7-d654-6518476b5f2d.gif)

プロジェクトのいかに早い段階で辿り着き、最低限の修正で<b>「本当に必要だった物」</b>に近づけられるか。。。

そのための開発手法が<b>「ADD」</b>という名前でアメリカでも一部で話題になっています。

## 具体的にADDとはどんな物なのか？

[An API-First Development Approach](https://dzone.com/articles/an-api-first-development-approach-1?fromrel=true)
[The Basics of API-Driven Development](https://dzone.com/articles/abcs-of-api-driven-development?fromrel=true)

DDDアーキテクチャの疎結合性とAPIやDTOの静的データ型を活用することで、
> テーブル設計を済ませる
-> ビジネスロジックを作る
-> 画面を作っている最中 ←ココ!!

この順番を逆転し

<table>
<tr>
  <th>フローA</th>
  <th>フローB</th>
</tr>
<tr>
  <td>1. モックデータで画面を作る<br/>-> お客様と方向性の確認(承認が取れるまでループ)</td>
  <td>1. 要件定義書からRepositoryのinterfaceとEntityを作る<br/>-> お客様と方向性の確認(承認が取れるまでループ)</td>
</tr>
<tr>
  <td colspan=2 style="text-align:center">2. UseCase層を作り結合テスト＆用語集に洗い出されたデータのグルーピング<br/>-> お客様と方向性の確認(承認が取れるまでループ)　　　　　　　　　　　　<span style="color:red">.</span></td>
</tr>
</tr>
<tr>
  <td colspan=2 style="text-align:center">3. グルーピングされたデータで出尽くした仕様を元にテーブル設計</td>
</tr>
<tr>
  <td colspan=2 style="text-align:center">4. Repositoryのinterfaceとデータベース間のSQLクエリを作成</td>
</tr>
<tr>
  <td colspan=2 style="text-align:center">4. 納品</td>
</tr>
</table> 

というように一番修正コストの高いデータベース実装の順番を最後に持ってくることで、
お客様やプロダクトオーナーと実装者間のイメージの食い違いを最小限の工数で修正することを目指した開発手法になります。

## なぜ今まで話題に上がらなかったのか？

私見ですがMySQL8.0が登場してJOINアルゴリズムが高速化したことで、
PostgreSQL、Oracleなどと遜色のないJOIN速度が出るようになり、
実行速度を考慮して画面やユースケースに引きづられたテーブル設計を求められることが減りました。

1つ1つのテーブルに教科書通りの必要最小限のカラム数と拡張性の高い設計を実現できるようになったことで、
「データ整合性と実用性が両立されたテーブル設計」に求められる考慮事項や難易度が下がり、
画面やビジネスロジックなどの、<b>「ユーザー体験に直結する部分」</b>を最優先にできる開発手法がようやく出てきたのかなと思いました。

### ※2020/10/26追記
記事タイトルと内容が合っていないと指摘をいただいたため、下記の通り記事タイトルを修正させていただきました:bow_tone1:
~~まだテーブル設計なんかで消耗してるの!?DDDの次の時代の進化系開発手法「ADD」とは。。~~
→ テーブル設計を遅らせることでユーザー体験の最大化を狙える!?米国式最新開発手法「ADD」とは。。

## お読みいただきありがとうございました:bow_tone1:
LGTMや拡散をしていただけると泣いて喜びます:joy:
[A5:SQL Mk-2]テクニック備忘録

#はじめに
毎回、忘れてしまうので時間の無駄を無くすため。
覚えることはしない。

##SetParameter（セットパラメータ）

```sql:
--パラメータセット
/**
 SetParameter aaa 'AAA' String
 SetParameter bbb 2 Integer
*/

SELECT * FROM TBL1 WHERE col1 = :aaa OR col1 = :bbb
```
| 型 | 文字列 |
|:-:|:-:|
|文字列型|String|
|整数型|Integer|
|実数型|Float|
|論理値型|Boolean|
|日付型|Date|
|時刻型|Time|
|日付／時刻型|DateTime|
・実数型、論理値型、日付型、時刻型、日付／時刻型については使ったことがない。
［Swift］UIProgressView を利用して進捗状況を表示 + UIAlertController を利用して処理完了を通知


### 書くこと
・UIProgressView を利用して進捗状況を表示
・UIAlertController を利用して処理完了を通知

### 処理のイメージ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/4f00c43e-d286-e7da-d788-ca1b9f720bcc.gif" width=250>

### 開発環境
<table>
<tr><td>PC</td><td>MacBook Air（13-inch,2017）</td><tr>
<tr><td>PC OS</td><td>macOS Catalina（ver 10.15.6）</td><tr>
<tr><td>IDE</td><td>Xcode（ver 12.0.1）</td><tr>
<tr><td>iPhone</td><td>SE（2nd Generation）</td><tr>
<tr><td>iPhone OS</td><td>ver 14.0.1</td><tr>
<tr><td>Swift</td><td>ver 5.3</td><tr>
</table>

### 前提条件
・Xcode を利用してデスクトップ上に `Sample` というプロジェクトアプリを作成する
・今回は、 `Sample` にある `ViewController.swift` にコードを記述する
・`UIProgressView` は `Main.storyboard` 上に配置
・`UIProgressView` は画面中央に配置されるよう制約を設定している
・下記コード例はリファクタリングを行っていない

### コード例
```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var progressView: UIProgressView!
    
    override func viewDidLoad() {

        DispatchQueue.main.asyncAfter(deadline: .now() + 1){
            self.progressView.setProgress(1/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 2){
            self.progressView.setProgress(2/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 3){
            self.progressView.setProgress(3/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 4){
            self.progressView.setProgress(4/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 5){
            self.progressView.setProgress(5/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 6){
            self.progressView.setProgress(6/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 7){
            self.progressView.setProgress(7/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 8){
            self.progressView.setProgress(8/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 9){
            self.progressView.setProgress(9/10, animated: true)
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 10){
            self.progressView.setProgress(10/10, animated: true)
        }
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 11){
            let alert:UIAlertController = UIAlertController(title: "お知らせ", message: "処理が終了しました", preferredStyle: .alert)
            let action:UIAlertAction = UIAlertAction(title: "OK", style: .default, handler: nil)
            alert.addAction(action)
            self.present(alert, animated: true, completion: nil)
        }
    }
    
    override func viewWillAppear(_ animated: Bool) {
        progressView.progress = 0
    }
}

```
Lambda Layer と CloudFormation / sam-cli で楽ちん X-Ray

# はじめに

こちらの [Lambda Layer と X\-Ray \- Qiita](https://qiita.com/Ricordanza/items/d68d708e274e28b6bfa2) という記事で、X-Ray を Lambda Layer で組み込む方法が紹介されています。複数の lambda をデプロイする場合に、個別に X-Ray を組み込まなくても一発で付け外しができるので、けっこういい感じです。

けっこういい感じなんですが、すこしコマンドを叩くのが手間なので、CloudFormation 化できないかな、と思っていたところ [AWS SAM CLI で Lambda Layers が ビルドできるようになったよ \- Qiita](https://qiita.com/hayao_k/items/f8c7ad5e35e29d590957) という記事を見つけました。

というわけで、２つの記事の内容をガッチャンコしたら、こんなかんじで

　　**X-Ray の LambdaLayer を CloudFormation で作れて楽チン!**

という記事です。

なお、 X-Ray は、AWS Lambda で使えるトレーシングツールです。X-Ray を使うことで、「Lambda のどの部分で時間がかかっているか？」「どこのリソース (DynamoDB, S3, etc) 呼び出しで時間をくっているか？」を下の図のような感じで確認できるようになります。

![sample1](https://docs.aws.amazon.com/ja_jp/xray/latest/devguide/images/scorekeep-servicemap.png)

![sample2](https://docs.aws.amazon.com/ja_jp/xray/latest/devguide/images/scorekeep-PUTrules-timeline.png)

（図の参照元: [AWS X\-Ray コンソール: \- AWS X\-Ray](https://docs.aws.amazon.com/ja_jp/xray/latest/devguide/xray-console.html)）

# X-Ray な Lambda Layer のテンプレート定義

用意するのは、template.yaml の他には **xray-layer-src/requirements.txt だけ** で OK です。

## template.yaml

```template.yaml
AWSTemplateFormatVersion: "2010-09-09"
Transform: AWS::Serverless-2016-10-31
Description: CloufFormation Template X-Ray lambda layer sample

Resources:
  # X-Ray の Lambda Layer 定義
  XRayLayer:
    Type: AWS::Serverless::LayerVersion
    Properties:
      Description: Lambda Layer for XRay
      ContentUri: xray-layer-src
      CompatibleRuntimes:
        - python3.8  # ここは利用している Python のランタイムを指定
    Metadata:
      BuildMethod: python3.8  # sam-cli でビルド時に指定が必要

  # XRayLayer を利用するラムダ定義の例
  SomeFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: lambda/src/
      Handler: lambda_handler.lambda_handler
      Runtime: python3.8
      Tracing: Active
      Layers:
        - !Ref XRayLayer  # 作成した Layer の参照
```

## xray-layer-src/requirements.txt

```xray-layer-src/requirements.txt
aws-xray-sdk
```

Lambda Layer に入れるライブラリの指定で、ここでは aws-xray-sdk のみを指定すれば OK です。

これで、X-Ray Lambda Layer のリソースが作成できます。デプロイは通常の sam を使うときと同じです。

```
sam build
sam deploy
```

## X-Ray を利用する Lambda の例

X-Ray を利用するソースコードは、例えば次のようになります。

```lambda-src/lamda_handler.py
import ...

# XRay SDK をインポート。公式ドキュメントにあるように最後にインポートする必要あり
from aws_xray_sdk.core import patch_all

# boto3 などの関連ライブラリにまとめて X-Ray のパッチをあてる
patch_all()

def lambda_handler(event, context):
    ...
```

<!--
```フォルダ構成.sh
+---template.yaml  # 必要なファイル その1 テンプレート定義
+---xray-layer-src
    +---requirements.txt  # 必要なファイル その2  X-Ray Lambda Layer 用の requirements.txt
+---lambda-src
    +---lamda_handler.py  # X-Ray Lambda Layer を利用するラムダのソースコード
    +---requirements.txt  # lambda-src の依存ライブラリ。対象ない場合でも空ファイルがある必要あり。
```
-->


# 参考リンク

- [Lambda Layer と X\-Ray \- Qiita](https://qiita.com/Ricordanza/items/d68d708e274e28b6bfa2) (再掲)
- [AWS SAM CLI で Lambda Layers が ビルドできるようになったよ \- Qiita](https://qiita.com/hayao_k/items/f8c7ad5e35e29d590957) (再掲)
Unityゲームの停止と最初から

###起こった事
ゲームのリトライを行った時に全てのオブジェクトが停止した状態になっていた

##リトライのコード

```
SceneManager.LoadScene(0);
```

また、全てのオブジェクトのstart()などは正常に動作していた。

##エラー原因のコード
ゲーム終了時の停止処理で以下のコードを実行していた

```
Time.timeScale = 0.0f; //時間停止
```

これが内部的にはstaticな値のようで、ゲームをリトライする前には時間停止を解除する必要があるようだった。

##解決策
以下のコードでリトライ処理を行なった

```
Time.timeScale = 1.0f; //時間起動
SceneManager.LoadScene(0); //シーンの再読み込み
```
[ASP.NET][VB]Response.Redirectを使って、手っ取り早く変数確認

#早速ですが
ただ、変数を確認したいだけ。
Response.Redirectを使って、Googleで変数を確認します。

```vb
Dim strVariable AS String = "変数確認"
Response.Redirect("https://www.google.co.jp/search?q=" & HttpUtility.UrlEncode(strVariable))
```
DelegationError について(Active Storage)

ポートフォリオ作成中
**DelegationError**
とエラーが出てその下に内容が
**variant delegated to attachment, but attachment is nil**
(google翻訳）添付ファイルに委譲された変形体で、添付ファイルがnilである
とエラーが出ました。

##解決方法
私のアプリはInstagramのようなアプリを開発しているので写真がないためこのエラーが出たと仮説を立て
**データベースをリセットすることでこの問題を解決することができました！！**

##対策として
このエラーの対策として、写真を保存するカラムにイメージが存在しないと保存ができないようにしてこのエラーが出ないように使用と思います
docker　エラー　削除コマンド

# docker system prune
停止コンテナ、タグ無しイメージ、未使用ボリューム、未使用ネットワークを一括削除できます。
# docker container prune
停止コンテナを一括削除できます。
# docker image prune
未使用イメージを一括削除できます。
# docker volume prune
未使用ボリュームを一括削除できます
# docker network prune
未使用ネットワークを一括削除できます

# エラー
docker-compose up -d workspace php-fpm nginx postgres
で下記のエラーが出てしましたが、既存のコンテナとイメージを消す事で解消できました。
上記のコマンドでdocker内の物を削除できます。
![スクリーンショット 2020-10-23 22.21.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/3022330f-a401-53ee-5a28-57ed5eb13953.png)
Linux版Zoomでフォントサイズもウィンドウサイズも大きいので小さくした


# きっかけ

いつの日からかデフォルトフォントが大きいなーと思っていたのですが、会話する分にも発表スライドを閲覧する分にも困っていなかったので、そのまま使っていました。
先日、オンラインカンファレンスに参加した時にログインアンケート（入室直後にポップアップでアンケートが表示されるアレ）があって困りました。フォントが大きいのでウィンドウがデスクトップ内に収まらず、回答を送信するボタンがデスクトップ欄外に位置してしまって押せないからです。

Before:
![Before](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488402/ea63e551-370b-de79-8b50-da047b497996.png "Before")

フォントサイズを小さくする方法がないかと探していた結果、見つかったのでメモとしてここに残します。同じ悩みの方に良き情報になれば幸いです。

# 変更点
~/.config/zoomus.conf ファイルを下のように変更して、Zoomアプリを再起動しました。

```diff
-autoScale=true
+autoScale=false
```
After:
![After](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488402/b1bf8ac7-5850-5908-89bd-5ccda89f1bac.png "After")

# その他の情報

私の環境では適さなかったですが、情報として記載があったのでココに記載します。

私の環境では変化が無かったのですが、参考文献[2]ではscaleFactorを1から2に変更することが書かれています。

また、参考文献[1]に下のように環境変数を指定することも書かれていました。私の環境では崩れてしまったので、実施していません。

```shell
$ export QT_SCALE_FACTOR=0.50
$ zoom
```

# Resources

## Version
- ver: 5.3.472687.1012 (debian, 64)

## 参考文献
1. https://www.reddit.com/r/Zoom/comments/hat5af/linux_client_ui_elements_too_large_after_update/
2. https://superuser.com/questions/1381054/how-to-enable-hidpi-support-on-zoom-us-linux-client?newreg=83b23554232d435eb0ead7523144753f
Concourse CI で arm64  worker を整備する(途中)

# 背景

* ローカル(プライベート)で aarch64/arm64 の CI ビルドしたい
  * Jetson AGX や, Raspberry Pi 4 など
* git repo 管理とか issue tracking 機能が必要というわけではないので, タスク実行に特化した? https://concourse-ci.org/ Concourse CI を使ってみます
* Concourse CI サーバは x64 を想定

サイトでは docker から利用する例がありますが, 実際のところは `concourse` 単一バイナリでサーバやワーカーを兼ねています.

Prebuilt binary や Docker image では, `concourse` の arm64 バイナリやイメージは用意されていません.

https://concourse-ci.org/concourse-worker.html

worker ノードの場合は特に DB など使うようでもなくて `concourse` バイナリだけあればよさそうですので, `concourse` バイナリをビルドするようにします.

# 手順

ソースコード https://github.com/concourse/concourse からビルドします.

golang なのであまり難しことはなく go build でいけます.

module(?)を使っているようなので最新 golang を使います(Ubuntu apt にあるのは古く `go mod` に対応していなかったりする). 幸いにも golang は web site に arm64 prebuilt があります.

```
$ go mod download
$ go build -x ./cmd/concourse
```

でいけます!
ビルドにはそこそこ時間かかるので `-x` で進捗を表示させるとよいでしょう.


あとは Dockerfile を参考に TSA キーを用意して `concorse worker` でサーバに繋げばいけるはず... ですが, gdn が必要と言われました.

https://concourse-ci.org/concourse-worker.html#configuring-gdn-server

T.B.W.
condaコマンドでHTTPエラーが出た

Ubuntu18.04.5

いざconda環境を作ろう!(`conda create -n 環境名`)という段階でエラー↓

```
>> conda create -n test
Collecting package metadata (current_repodata.json): done
Solving environment: done

CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://repo.anaconda.com/pkgs/main/linux-64/current_repodata.json>
Elapsed: -

An HTTP error occurred when trying to retrieve this URL.
HTTP errors are often intermittent, and a simple retry will get you on your way.

If your current network has https://www.anaconda.com blocked, please file
a support request with your network engineering team.

'https://repo.anaconda.com/pkgs/main/linux-64'
```


<h2>解決法

<h4>1.condaのバージョンが古い？<p>

```
conda update anaconda-navigator
```
(参考元: https://mugichoko.hatenablog.com/entry/2020/01/13/061539)

解決しない。違うな。

<h4>2.SSLの設定が違う？<p>

```
conda config --set ssl_verify no
```

(参照元: ​​​​​​​​https://qiita.com/takenawa/items/764682c47a0361dd773f)

これも違うな。そもそも以前はこんな設定してなくても使えてたしな。

<h4>3.プロキシ設定が違う？<p>

```
proxy_servers:
  http: http://プロキシアドレス:ポート番号
  https: http://プロキシアドレス:ポート番号
ssl_verify: true
```
(参照元: https://qiita.com/kitakrazy/items/af6c0fea17adef514ba8)

これを$homeで　`.condarc`　として作成すると見事解決。

Ubuntuとコマンドプロンプトとcondaは全て別々のプロキシ設定になっているらしい
(研究室のサーバ使ってるからだと思うんだけど)


一応、後の自分が困らない用にそれもメモすると、
Ubuntu:
設定>ネットワーク>ネットワークプロキシ>手動
HTTPプロキシとHTTPSプロキシに、プロキシアドレスとポート番号を入力

コマンドプロンプト:

```
sudo vi /etc/apt/apt.conf.d/80proxy
```
ってファイル作って

```
Acquire::http::proxy "http://ポートアドレス:ポート番号";
Acquire::https::proxy "http://ポートアドレス:ポート番号";
```

を書き込む。

そしてcondaのプロキシ設定はさっきのやつ。
ただし、研究室以外でネットワークに接続する際は、これらを全て`＃`でコメントアウトしなければいけない。
key指定でtuple配列のsortを高速化

# はじめに
競プロ精進中に「計算量的には間に合いそうなのにTLEする...」と悩んでいたところ、前準備のsort部分がボトルネックになっていたと発覚。
ハマったポイントを共有します。

# tupleの配列のsort　
key指定あり/なしの違いについて、簡潔に説明します。

## key指定あり
```python
a = [(3,3), (2,2), (3,1), (4,2)]
a.sort(key=lambda x: x[0])
print(a) # => [(2, 2), (3, 3), (3, 1), (4, 2)]
```
指定したkeyの大小によって、sortを行います。keyの要素が等しければ、その順序は保持されます。
>sort() メソッドは安定していることが保証されています。ソートは、等しい要素の相対順序が変更されないことが保証されていれば、安定しています。（[公式ドキュメント](https://docs.python.org/ja/3/library/stdtypes.html#list.sort)）

```sort(key=lambda x: (x[0],x[1])) ``` のようにkeyをtupleにして複数指定することもできますが、
本記事では単一の要素をkey指定することを考えます。



## key指定なし
何もkeyを指定しないと、
「tupleの0番目の要素で大小比較」→「同じなら1番目の要素で大小比較」→「...」
という方法でsortが行われます。

```python
a = [(3,3), (2,2), (3,1), (4,2)]
a.sort()
print(a) # => [(2, 2), (3, 1), (3, 3), (4, 2)]
```
このとき内部では、tuple同士の比較演算が行われているようです。
>key は一引数をとる関数を指定し、リストのそれぞれの要素から比較キーを取り出すのに使います (例えば、 key=str.lower)。それぞれの項目に対応するキーは一度計算され、ソート処理全体に使われます。**デフォルトの値 None は、別のキー値を計算せず、リストの値が直接ソートされることを意味します。**（[公式ドキュメント](https://docs.python.org/ja/3/library/stdtypes.html#list.sort)）


「tupleの先頭の要素でsortする」だけなら、key指定ありでもなしでも目的は果たせます。
ここで**「じゃあkey指定なしでいいや〜」**と思ってkey指定しないと、思わぬ罠にハマる可能性があります。
**tuple同士の比較は遅いのです。**


## 実験
### 「tuple同士の比較」 vs. 「tupleの要素同士の比較」
この2つで、どれほどの速度差があるのかを確認します。
実行環境はAtCoderのコードテスト（PyPy3）です。
各tuple内の要素数は3です。

```python
import random
random.seed(1)

''' n: 3通り
N = 1*(10**3)
N = 3*(10**3)
N = 5*(10**3)
'''

tl = [] # list of tuples
for i in range(N):
    l = random.randint(1,N)
    r = random.randint(1,N)
    tl.append((l,r,i)) # 3 elements in tuple

''' 
# 1. tuple同士の比較 
for i in range(N):
    for j in range(N):
        res = tl[i] < tl[j]
# 2. tupleの要素同士の比較
for i in range(N):
    for j in range(N):
        res = tl[i][0] < tl[j][0]
'''
```
計測結果は以下です。

|N  |1. tuple同士  |2. tupleの要素同士 |
|:-:|:-:|:-:|
|$1*10^3$  |78 ms  |17 ms  |
|$3*10^3$  |672 ms  |129 ms  |
|$5*10^3$  |1875 ms  |368 ms  |

タプルの要素が3つなので「高々3倍程度の誤差か？」と思いきや、かなり大きな差が出ました。
怖い。


### tuple配列のsort　「key指定なし」 vs. 「key指定あり」

```python
import random
random.seed(1)

''' n: 3通り
N = 1*(10**5)
N = 3*(10**5)
N = 5*(10**5)
'''

tl = [] # list of tuples
for i in range(N):
    l = random.randint(1,N)
    r = random.randint(1,N)
    tl.append((l,r,i)) # 3 elements in tuple

'''
3. tl.sort()
4. tl.sort(key=lambda x:x[0])
'''
```
測定結果は以下です。

|N  |3. keyなし  |4. keyあり |
|:-:|:-:|:-:|
|$1*10^5$  |198 ms  |98 ms  |
|$3*10^5$  |735 ms  |359 ms  |
|$5*10^5$  |1361 ms  |708 ms  |

最初の実験ほどではありませんが、およそ2倍程度の差が出ました。


# おわりに
さほど気にする差ではないかもしれませんが、問題によってはこれでハマる可能性があります。
実験のコードを見て「あの問題かな？」と思った人もいるはず。
ちなみに、key指定は```lambda```ではなく```itemgetter```のほうが高速らしいですね。
Goで使えるファイルタイプ

Goでは、**拡張子.goはGoのソースファイル**。というふうにGoが認識するファイルタイプが決まっています。

また、テストを記述するファイルを作成するときに末尾につける**_test.go**もGoが認識するファイルの種類の一つとして、特別に扱われます。

##拡張子.go
Goのソースファイルのこと

##拡張子.c, .h
Cのソースファイルのこと

##拡張子.cc, .cpp, .cxx, .hh, .hpp, .hxx
C++のソースファイルのこと

##拡張子.m
Objective-Cのソースファイルのこと

##拡張子.s, .S
アセンブラソースファイルのこと

##拡張子.swig, .swigcxx
SWIGを定義するファイルのこと

##拡張子.syso
システムオブジェクトのファイルのこと

##最後に
これらは他のプログラミング言語との連携の際に使われるものです。それぞれGoで特別な役割があるということですね。いつどこで使うのかもこれから経験していきたいところです！

##参考文献
著者　松尾愛賀
[翔泳社　スターティグGo言語](https://www.shoeisha.co.jp/search?search=%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0Go%E8%A8%80%E8%AA%9E)
【Swift】NSPredicateで全角半角の区別ができないことについて

#NSPredicateでの全半角の区別
下記のコードは携帯番号が半角英数字で入力されているかを判定する処理です。
一見正常に動きそうですが、これでは全角の「０９０-００００-００００」と半角の「090-0000-0000」のどちらを判定してもtrueが返ってきて全半角の区別がつきません。

```swift
func checkPhoneNum(string: String) -> Bool {
  let format = "[0-9]{3}-[0-9]{4}-[0-9]{4}"
  let predicate = NSPredicate(format:"SELF MATCHES %@", format)
  return predicate.evaluate(with: string)
}
```

#NSRegularExpressionでの全半角の区別
上記のようにNSPredicateでは全半角の区別がつかないため、NSRegularExpressionで下記のように判定します。これで全角の場合はfalse、半角の場合はtrueで返ってきます。

```swift
func checkPhoneNum(string: String) -> Bool {
  let format = "[0-9]{3}-[0-9]{4}-[0-9]{4}"
  let regexp = try! NSRegularExpression.init(pattern: format, options: [])
  let nsString = string as NSString
  let matchRet = regexp.firstMatch(in: string, options: [], range: NSRange.init(location: 0, length: nsString.length))
  return matchRet != nil
}
```

#参考
http://aryzae.hatenablog.com/entry/2017/12/13/004159
日本のエンジニア市場はオフショア開発に飲み込まれるのか

この記事では、
ベトナム人によるオフショア開発が
今後日本のエンジニア市場を飲み込むのかどうか
をテーマにして書いていきます。

「オフショア開発は安いけど言語が合わないから大丈夫」
「そんなにレベル高くないんでしょ？」
「時間外だと緊急対応しないから任せられない」

=>だから、心配する必要はない

いいえ、違います。
そもそもなのですが、オフショア開発に飲み込まれることはないから大丈夫
という結論を下すのであれば、このテーマについて考える意味がありません。

だってそうですよね。安心したいだけなら、議論するだけ時間の無駄です。

##言語優位性はあまりない
これは弊社の実体験に基づくものになりますが、
顔合わせMTGではベトナム人開発者のほとんどが日本語を話し、
私たちの言葉を理解していました。
また、ブリッジエンジニアと呼ばれる日本語が得意な通訳エンジニアもおり、
言葉の壁はあまり感じられませんでした。

最初は彼らの独特な発音で聞き取るのに少し手間取りますが、
すぐに慣れて聞き取ることができるようになりました。

##スキルレベルも高い
プロジェクトにアサインされた月からタスクを着々とこなし、
スピード感もありました。
バグの修正依頼も対応してくれ、
また言われたことを忠実に再現します。
これで私たちよりも単価が安いのだから、それこそ大きな脅威になると感じました。

##オフショアに切り替えられるきっかけ
「あれ、オフショア開発でも意外とイケるじゃん」
発注側の会社がそう感じたとき、日本のエンジニア市場は飲み込まれるのでしょう。
「いや、彼らの仕事は雑だった！」
そういう声もあります。
でもそれって、国内でも同じですよね。
当たり外れは当然どこでもある。

現在弊社ではベトナム人エンジニアと共同開発をしていますが、
リモートでコミュニケーションをとるのが少し大変ですが
開発面では問題なく、
オフショアに飲み込まれる可能性は十分にあると感じました。

##おわりに
単に言われたことだけをやるのでは
彼らとやっていることは変わりません。
オフショアに対抗していくには、言われたことだけ...ではない
エンジニアになる必要があると感じました。
SQLで指定した範囲の日付を穴埋めする（MySQL）

#はじめに
日付の開始日と終了日だけで、間の日付を埋めたいときってありますよね？...はい、きっとあるはずです！

例えば「ある商品の売上トランザクションデータを持っており、これを〇年〇月〇日～〇年〇月〇日までの各日で何点ずつ売れたのか、売れなかった日も含めて一覧を作りたい」といった場合、このトランザクションデータとLEFT JOINできる日付のマスタがあると便利ですよね。

今回はSQLのみで、始点と終点の日付から、間の日付を穴埋めした日付データを作る方法を書いておきます。

#検証バージョン
MySQL 5.6

#DATE_ADD関数のINTERVALを使うことで実現する
基本的な考えはDATE_ADD関数を用いて+1ずつ日付を足していく

```sql
-- 例えば、DATE_ADD関数を用いて1日加算すると下記の結果が得られる
SELECT DATE_ADD('2020-10-01', INTERVAL 1 DAY) as DATE;
+--------------------+
| DATE               |
+--------------------+
| 2020-10-02         |
+--------------------+
```

これを繰り返し加算すればよいので、加算するための表を作成する

```sql
CREATE TABLE number (
    number smallint
)
;
-- [0-9]までのデータを入れる
insert into number values (0);
insert into number values (1);
insert into number values (2);
insert into number values (3);
insert into number values (4);
insert into number values (5);
insert into number values (6);
insert into number values (7);
insert into number values (8);
insert into number values (9);
```
上記の表からSELECTした結果をDATE_ADD関数のINTERVALにセットしていくSQLを書けばよい

```sql
SELECT DATE_ADD('2020-10-01', INTERVAL number DAY) as DATE FROM number;
+------------+
| DATE       |
+------------+
| 2020-10-01 |
| 2020-10-02 |
| 2020-10-03 |
| 2020-10-04 |
| 2020-10-05 |
| 2020-10-06 |
| 2020-10-07 |
| 2020-10-08 |
| 2020-10-09 |
| 2020-10-10 |
+------------+
```
最後にほしい日付の範囲に絞る

```sql
SELECT DATE_ADD('2020-10-01', INTERVAL number DAY) as DATE FROM number
WHERE  DATE_ADD('2020-10-01', INTERVAL number DAY) BETWEEN '2020-10-01' AND '2020-10-05';
+------------+
| DATE       |
+------------+
| 2020-10-01 |
| 2020-10-02 |
| 2020-10-03 |
| 2020-10-04 |
| 2020-10-05 |
+------------+
```
これで完成です！が、これだと日付の範囲が10日分しか作れないので、numberテーブルのデータを拡張するVIEWを作る

```sql
-- ひとまず[0-999]の1000行のVIEWを作成
CREATE VIEW vw_number AS
SELECT a.number + (b.number * 10) + (c.number * 100) AS number
FROM number a, number b, number c;
```
上記のVIEWには1000行のデータが入っているので3年近くは作れます（必要に応じて拡張してください）

```sql
SELECT DATE_ADD('2020-10-01', INTERVAL number DAY) as DATE FROM vw_number
WHERE  DATE_ADD('2020-10-01', INTERVAL number DAY) BETWEEN '2020-10-01' AND '2022-10-01';
+------------+
| DATE       |
+------------+
| 2020-10-01 |
| 2020-10-02 |
| 2020-10-03 |
| 2020-10-04 |

| 2022-09-28 |
| 2022-09-29 |
| 2022-09-30 |
| 2022-10-01 |
+------------+
```
その他、DATE_ADD関数のINTERVALを使っているので月単位に変更することも簡単

```sql
SELECT DATE_FORMAT(DATE_ADD('2020-10-01', INTERVAL number MONTH), '%Y-%m') as MONTH FROM vw_number
WHERE  DATE_ADD('2020-10-01', INTERVAL number MONTH) BETWEEN '2020-10-01' AND '2022-10-01';
+---------+
| MONTH   |
+---------+
| 2020-10 |
| 2020-11 |
| 2020-12 |
| 2021-01 |

| 2022-07 |
| 2022-08 |
| 2022-09 |
| 2022-10 |
+---------+
```

これならトランザクションデータにLEFT JOIN出来る日付マスタを簡単に作れますね！

おわり
視覚と聴覚を統合して学習させたぞ！　な論文(原典:See, Hear, and Read: Deep Aligned Representations )


#原典
See, Hear, and Read: Deep Aligned Representations 
arxiv-vanity.com/papers/1706.00932/

#どんな論文？

画像とキャプションのペアを学習させた。
それによって、未知の画像に対しても、定量的にいい感じの音とテキストの関係も学習できていたことがわかった。
テキスト、サウンド、イメージについてCNNを施す。
下位の層は重みを共有しないが、上位の層でのみ重みを共有するという面白さ。


#どうやって学習させているのか？

 ペアになっている画像と音、あるいは画像とテキストの２つについて、それらが同じグループに属するように学習をさせた（KLダイバージェンス）


#どんなもの？
音声とテキストと画像データを食べさせた。学習については、画像＋テキスト、画像＋音声の２ペアである。しかしながら結果として音声とテキストのペアも学習することができた。（画像をブリッジとすることでペアを学習していると言っても良いよねというスタンス）


#先行研究と比べてどこがすごい？
画像と音楽とテキストの３つのマルチモーダルなものにまたがる認識を機会に学習させるという点。非常に人間らしい知覚を習得する点。
これほど大規模でかつ３つの感覚・モーダルへのアプローチは初めてだと考える。
結果として音とテキストのペアは学習させていないが、画像をブリッジとしてしようすることで可能となる。
つまり　英語→あらゆる言語へ翻訳するときに、ブリッジ言語を通すみたいなやつ（鉄壁英単語的なアプローチ）
英語→画像　画像→フランス語
英語が音orテキスト。　フランス語がテキストor音
技術や手法の肝はどこ？
音声と画像とテキストに関して全てのCNNをおこなった。その上層レイヤをすべて結合する新たなネットワークを作成している点。


#どうやって有効だと検証した？

 クロスモーダル検索のスコアを比較した。
クロスモーダル検索とは、例えばイメージしたモーダル（テキストか画像か音）のデータが欲しいときに、別のモーダルからのクエリ検索で、目的のデータが手に入るかを試す。



#メモ書き

音と言語
音声検索とか。割とよくある。
確率モデル
言語と視覚
画像→テキスト・キャプション自動生成とは違う。この実験では、画像と音声orテキストとの関係性のみを学習させている。
また、テキストに対してRNNを使わずに、CNNを使っている店も新しい。
クリエイティブなアートをAIで作らせてみた！　斬新をプログラミングしたぞ！(論文:Creative Adversarial Network)

#元の論文
https://arxiv.org/abs/1706.07068

#どんなもの？
GANとは少し違います。それは、識別器が、スタイルも学習するということ。
そして、生成器はスタイルも異なるように生成を学習することで、従来のGANよりもクリエイティブになるのではという論文。
アート論文として、アーティストは、スタイルブレイクを目指すことが多いとわかった。
アートの分布からの逸脱は最小限にしつつ、スタイルの逸脱を最大限にするように生成器を
#学習
クリエイティブシステムの要件としてある学者は、１想像力、２スキル（品質）、３独自の創造物を評価する能力の３つが必要であると述べているが、この３つ全てを満たしている。
提案されたシステムの主な特徴の1つは、 アートを作成するプロセスでアートの歴史について学習することです。ただし、スタイルの概念の背後にあるアートについての意味的な理解はありません。主題、要素の明示的なモデル、芸術の原理については何も知りません。ここでの学習は、芸術への露出とスタイルの概念にのみ基づいています。その意味で、システムは新しいアートから継続的に学習する機能を備えており、学習した内容に基づいて世代を適応させることができます。


#背景

昔の DE Berlyne（1924-1976）によって提案された理論に基づいています。
美学の最も重要な覚醒を高める特性は、_新規性、驚き、複雑さ、あいまいさ、および不可解さであることを_強調しました。
そして、一人のアーティストが作品を作り続けると、どうしても慣れてしまうから、それを避けるためにこのシステムでは頑張る。
また、刺激は強すぎても弱すぎてもでダメであるから、そこをコントロールしている。
カテゴリ（例：[ 18 ]）またはキャプション（例：[ 19 ]）  に基づいて画像を生成することを容易にするGANの拡張機能があります  。）。このようなラベルにトレーニングを提供することで、さまざまなアートスタイルまたはさまざまなアートジャンルの画像を生成するように設計およびトレーニングできるGANを考えることができます。


#先行研究と比べてどこがすごい？
フィードバックに人間を必要としない。
googleDreamというのがあったけど、それは曖昧すぎて、抽象アートではないし、コンピュータが生成したとばれちゃう。認識不可能すぎる。適度な曖昧さを頑張る


#技術や手法の肝はどこ？
識別器は、通常のGANのようにアートかアートではないかの判別も生成器にかえす。それとどのスタイルにどの程度分類できるかの値を生成器に返す。
識別器は、スタイルラベル（ルネサンス、バロック、印象派、表現主義など）に関連する多数のアートにアクセスでき、それを使用してスタイル間の区別を学習します。
生成器は、アートであるものを作り、かつ分類をできるだけ混乱させようと頑張る。

#次に読むべき論文
覚醒のさまざまなメカニズムの中で、芸術にとって特に重要かつ関連性のあるものは、外部刺激パターンの特性です  [ 3 ]。
マーティンデールは、アート制作システムの導出における慣れの重要性を強調しました  [ 15 ]。
Wundt曲線（覚醒の度合いを図る曲線？）
Google DeepDream [ 16 ]によって生成された画像について、「ほとんどが、寮の部屋のマンダラ、またはテレンスマッケンナの本の表紙にあると思われるデジタルサイケデリアのように見えます」とコメントしました  ３。他の人々は、「まばゆく、ドラッグ、そして気味が悪い」とコメントしました  4。この否定的な反応は、過度の覚醒の結果として説明される可能性があり、その結果、Wundt曲線に従って否定的な快楽がもたらされます。
"スキルセットを置く" が通じなかったので調べてみた


## 記事の背景
エンジニア単発案件獲得を目標としている知人に、「スキルセットどこに置いてるの？」と聞いたら通じなかったので、正しく「スキルセット」を使ってもらうために調べてみました。

##スキルセットとは
職種や案件に対して必要なスキルや開発環境、また自身の持つ技術一式を「スキルセット」と呼ぶ。

###1. 今回の「スキルセット」の使い方
今回の件を詳しく翻訳すると、Web制作の案件を取得したいと勉強しているようだけど、自分の技術として提示するために、どの言語、フレームワーク、（OS/ DB/ インフラ.....etc）を学習しているの？と、聞きたかった。

この「自分の技術として提示するために、どの言語、フレームワーク、（OS/ DB/ インフラ.....etc）」のところが、ここたんの使った「スキルセット」の部分。

###2. 使用例で理解する「スキルセット」
案件、もしくは求人で求められる技術の募集要項の部分をスキルセットと考えると簡単。
以下のまとまりを「スキルセット」と考えてみる。
######例①）製造管理システムの改修案件
【必須経験】言語：java/ FW：Spring Boot/ DB：PostgreSQL, Oracle
【尚可】使用ツール：git, backlog, slack
######例②）エンターテイメント系公式サイトの改修案件
【必須経験】言語：PHP/ FW：Laravel/ DB：MySQL
【尚可】Vue.jsでの開発のご経験

※FW（フレームワーク）

###3. 2の案件紹介を見て「スキルセット」を使って返答すると

javaの経験はあるんですけど、Springの経験ないんですよね。
フレームワーク重視してたら①って微妙ですよねぇ。。
②はスキルセット満たすし、案件としても興味あるのでエントリーしたいです:raised_hand:

##★スキルセットの重要性
採用側は速やかな案件の遂行を求めているので、開発環境が決定してキックオフしているプロジェクトの参画にはスキルセットのマッチング率が高いほど採用につながりやすいです。
自身がどういった事業内容、またシステムの案件で働きたいかを考え、そこで使用されるスキルセットの傾向を知った上で勉強するとよいと思います:raised_hand:
論文:音楽の脳内処理

#元の論文
http://papers.nips.cc/paper/6222-brains-on-beats.pdf

#どんなもの？
画像認識などの機械学習の分野では脳を模倣をヒントに画像認識している。そのCNNという技術で行うと、画像の色や何が描かれてるか、などぱっと見わかりやすい情報を学習している層と、ぱっと見ではわかりづらい情報を学習している層（画風など）がある。すなわち分けて認識していることが明らかになっている。

この論文では、音楽を脳がどう処理するかを調べた。

結果として高レベルの処理（スタイルとか）と低レベルの処理（メロディとか）の処理は脳内でも明確に分かれていることが明らかになった。

すなわち、AIは人間を模倣して作られたものであるが、実際に人間の脳も同じように分けて物事を認識していることがわかった。（認識のやり方が複数ある）
Automation 360で、ファイル名に日付を追加したい

よくやる基本処理のクイックな解説です。
ファイル名の任意の個所に今日の日付を入れたいケース、よくあると思います。

#やりかた
これを行うには「日時」パッケージの「文字列に変換」を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/a5f05355-e982-538d-9e9a-ea91c609be22.png)
上記のように設定します。
ソースはシステム変数の「Date」を選び、日時フォーマットは「カスタムフォーマット」を選びます。
あとは付けたいファイル名にYYYYMMddといった形で日付部分を追記してあげればOKです。


#実行結果:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/2616ec9c-1577-9e09-66d9-0281aa07243f.png)
論文:脳内の映像を再現する機械学習論文, (Deep image reconstruction from human brain activity)

#元論文
https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1006633

#どういう論文なの？自分の言葉でまとめると？
→脳内でみている映像を可視化するぞ！という論文。結果を見たら、意外とぼんやりしてるんだなぁと思いました。（もちろん精度の悪さもあると思われる）

#詳しく
まず画像を見ている状態で、fMRIの反応を測定する。その測定状態において、fMRI→画像の特徴量を生成するものがある。
すなわち、本来であれば、画像→特徴量なのだが、それをfMRI→特徴量としている。この点で精度が画像→特徴量よりも低いのは致し方ない。むしろここにこそ、曖昧さが存在していて、創造性研究に役立つ可能性もあると思う。
そしてその結果から、画像の特徴量が得られる。これはおそらくCNNみたいな感じで、複数のレイヤーにおける特徴量が得られると思う。すなわち浅いレイヤーでは具体的な形を捉えており、深いレイヤーでは抽象的な形を保持しているものと考える。
これらの画像の特徴量に関する複数のレイヤーをうまく組み合わせる２つ目のネットワークに通す。
すなわち、特徴量から画像を生成するというCNNの逆を行うDGNというネットワークモデルを使っている。
結果として、アルファベットなどの幾何学的な構造はうまくいった。
しかしながら、複雑な状態の画像を想像してもらう→それを画像化　というのはものすごく難しかったとの結果。　原因としてはネットワークにもあるだろうが、おそらく人間の想像力ではそこまで詳細に描けないという点が挙げられる。


#思ったこと・興味
プロ棋士の頭の中を描いてみたい。それをしてみたらどのくらい詳細に画像を描くことができるのだろうか気になる。
人それぞれ違うということもあり得るだろう。
宮崎駿も見てみたい。
fMRI→画像の特徴量　という変換ネットワーク。この時点で結構な論理的飛躍が起こっていて、精度が低いのかなぁと思った。
もちろん　画像の特徴量→画像生成　というDGNの精度も低いのだと思う。
精度が悪いフィルタを２つ通すことで、結構下がっているのは共通認識っぽいなぁ。ただその精度の悪さでも、今はアルファベットくらいなら画像生成できるのがすごいと思った。
論文: 頭の中で映像を描けない人(アファンタジア）についての論文,The blind mind: No sensory visual imagery in aphantasia

https://www.gwern.net/docs/psychology/2018-keogh.pdf

#アファンタジアとは？
アファンタジアは低レベルの感覚的視覚イメージの欠如によって特徴づけられている。メタ認知欠如ではないことを支持する。

アファンタジアは空間イメージは平均より得意である。
空間イメージは、精神回転課題のパフォーマンスと相関があるようだ。また、関連として、幻覚症の人は、このスコア完璧。
脳の構造について、背側（初期視覚野から頭頂葉までの初期視覚野）には空間内の物体の位置に関する情報が含まれる。
腹側（初期視覚野から側頭葉までの初期視覚野）または「何を」の流れには物体の同一性に関する情報が含まれている。
２つは階層が上に行くほど複雑になる。

心の中で物体を回転させる能力は？
→補助運動野や一次運動野などの運動野に加えて、頭頂皮質（具体的には頭頂皮質）を活性化する
対照的に、参加者が静止画像を想像すると、視覚野は活動の増加を示す傾向がある
画像を想像する→視覚野から複合される。
視覚野の応答レベルが高いほど、イメージの主観的な鮮明度と相関がある。

この２つの証拠から、静的な物体イメージと精神的な回転や空間イメージに使用される神経ネットワークの分離を示唆しています。
人が風景や物体を想像するとき→視覚野だけでなく、頭頂部や前頭前野にまで及ぶ大規模なネットワークが活性化される
前頭前野→視覚野の感覚表象を活性化するフィードバック接続を駆動（アファンタジアはこれができない可能性）
視覚野と前頭前野の両方の皮質の興奮性が、イメージの強さを支配する上で重要な役割を果たしていることが示されています
以上より、アファンタジアは視覚領域、前頭前野領域、またはその両方の領域で以上な活動レベルの可能性がある。
私たちの内的世界に対する能力や経験が大きく異なる原因となっている神経学的な違いを理解するのにも役立つでしょう。
論文:動的な自然風景のために、ディープラーニングを使って神経から生成するよっていう論文(Neural Encoding and Decoding with Deep Learning for Dynamic Natural Vision )

#どういう論文なの？ざっくり

機械学習（ニューラルネットワーク,CNN）は、人間の脳を模倣してきた。それを利用すると、そこから画像を見たときの脳内反応(MRI)を再現できるようになった！そして逆もできるようになった！つまり逆とは、MRIの反応結果から、ある画像の特徴量を予測できる！ということ。

今まで模倣と言われていたけれど、それが比喩ではなく本当にすごい精度で模倣していたんだなぁと裏付けられる論文な気がしました！



https://academic.oup.com/cercor/article/28/12/4136/4560155


#アブストと自分的まとめ
畳み込みニューラルネットワークは、脳みその画像処理機構を真似しているとされたが、それがきちんとわかってきたということ。
つまり、CNNの特徴量から→fMRIを作成できるし、逆もまた然りなことが最近の研究でわかってきた！
CNNは、時系列とかを考慮してないのに学習してるのがすごい！end to end ってこういうことなのかなぁって思った。
CNN と fMRIの双方向性を補強する論文。
また、CNNはおなか側だけでなく（こっちはすでに完璧に予測している）、背面側のfMRIも上手に予測したよ！程度は低いけど。
fMRI信号を直接デコードすることで、視覚空間と意味空間の特徴表現を推定し、視覚的再構成と意味的分類を行うことができました。
自分の意見:これはあくまで、fMRIと同レベルまできたというだけの話であり、FMRIも完全にはわかっていないはず。あくまで別のやり方で、同じくらいわかるようになってきた、つまり手法Aと手法Bで矛盾が生じなかったという説明にしかならないと思われる。ただそれだけで、畳み込みニューラルネットワークすごい！とは言い切れない。その可能性もあるけど。


#結果
CNNとfMRIの関係性についての結果。CNNと視覚野は、低レベルの視覚的特徴（例えば網膜トピ）と高レベルの意味的特徴（例えば顔）の類似した表現を共有しているだけでなく、抽象度の高い複数の中間レベルの視覚情報の階層的な表現も共有している（図2）
神経を再現することについての結果と妥当性。CNNの結果から、どの脳領域が活性化しているかを線形回帰モデルでやってみた。ラベルづけで分類する。
論文: 「赤い」＋「丸い」のような単語指定だけで、いろんな画像作ってくれる論文(SCAN: Learning Hierarchical Compositional Visual Concepts

#仕組みについて
画像から意味を理解する。大量のリンゴ画像→イメージへ。これにより、丸い・赤い・小さい　などの特徴を獲得する。
具体化の時は、獲得した概念をもとに画像を生成する。　丸い・赤い・小さい、などによる拘束はあるが、それ以外の縛りは存在しない。したがって照明や背景について自由度はあるため、多様性のある画像が生成される。

#超大事ポイント
以下のような命令によって到達することができます。"blue" AND "small"（より一般的なものからより特定のものへと階層を下降させる）、"blueeberry" IN COMMON "blueebell"（より特定のものからより一般的なものへと階層を上昇させる）、または "blueeberry" IGNORE "round"（同じく階層を上昇させる）という指示によって、概念{blue, small}に対応する新しいノードに到達することができる。



https://arxiv.org/pdf/1707.03389.pdf
論文: マルチリンガルの子供の学習方法を機械学習で模倣するぞ！　(Visual Grounding in Video for Unsupervised Word Translation)

https://deepmind.com/research/publications/Visual-Grounding-in-Video-for-Unsupervised-Word-Translation

#アブスト
視覚ベースをヒントに、多言語間の概念マッピングを行います

#良いポイント３つは何か？
異なる言語の間のペアを学習させることができる。
データセットが少ない言語についても対応できる
テキストベースの翻訳技術に関しても、初期化の際に役立つことができる。

#やり方
1つの料理の工程に対して、複数の言語によるナレーションをデータセットとして用いる。これにより視覚的なヒントから複数の言語を学習すると言うマルチリンガルの子供の学習方法の模倣することができる。

#比較対象
ウィキペディアを用いたフランス語と英語などの多言語間のマッチング。非類似性からスコア

#３つの貢献
我々の方法が、テキストベースの方法の多くの欠点に対処する既存の単語マッピング技
。教師なし学習であること。
教師なし学習
２つの言語間のコーパスなしで学習できるという点で教師なし学習である。
ビジュアルドメインZを土台として学習するぞ。

#結論
YouTubeの動画から学習することができる。多様なコーパスに直面したときに、より強い効果を発揮する。
Rテクニック 幾何平均/幾何標準偏差の算出

# Rによる幾何平均/幾何標準偏差の算出

幾何平均とは...
高校で相加・相乗平均の関係をやったと思うが、あれの相乗平均のほう
詳しい計算はwikiみましょか
https://ja.wikipedia.org/wiki/%E5%B9%BE%E4%BD%95%E5%B9%B3%E5%9D%87

対数変換→平均値/標準偏差を算出→指数変換
で、幾何平均や幾何標準偏差を求めることができる

SASで算出する場合は以下を参照
https://qiita.com/saspy/items/a1c300e9f0aa922ce502

今回もSQLコードとrパッケージによる方法を紹介

# 使用するデータ
SASHELP.CLASSのHEIGHTでためす(ついでに年齢ごとの計算にしてみる) 
![class.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564185/06f090d2-35b1-0c6e-385c-b5ef1808f315.png)


# 準備
```r
# パッケージ
Packages <- c( "sqldf" , "data.table" , "tidyverse" , "haven" )
for( i in Packages ) {
  library( i , character.only = TRUE )
}

# 読み込み
Sas_Pass <- "パス/class.sas7bdat"
SASHELP_CLASS <- haven::read_sas( Sas_Pass )
```

# sqldfパッケージで直接的に計算する方法
とりあえず幾何平均、幾何標準偏差、幾何CVを計算
信頼区間もめんどいが式を書けば出せるはず

```r
CLASS_STAT <- fn$sqldf(
  " select AGE , count(*) as N , 
           power( 10 , avg( log10( WEIGHT ) ) ) as GEOMEAN1 ,
           power( exp( 1 ) , avg( log( WEIGHT ) ) ) as GEOMEAN2 ,
           power( 10 , stdev( log10( WEIGHT ) ) ) as GEOSTD , 
           sqrt( exp( power( stdev( log( WEIGHT ) ) , 2 ) ) - 1 ) * 100 as GEOCV
   from SASHELP_CLASS
   group by AGE
 " )
```

# RSQLite(dbにSASHELP_CLASSをSQLデータとして格納してハンドリング)
```r
conn = dbConnect( RSQLite::SQLite() , "" , synchronous = "off" )
dbWriteTable( conn , "SASHELP_CLASS_SQL" , SASHELP_CLASS , overwrite = TRUE )
query <- " select AGE , count(*) as N , 
           power( 10 , avg( log10( WEIGHT ) ) ) as GEOMEAN1 ,
           power( exp( 1 ) , avg( log( WEIGHT ) ) ) as GEOMEAN2 ,
           power( exp( 1 ) , stdev( log( WEIGHT ) ) ) as GEOSTD ,
           sqrt( exp( power( stdev( log( WEIGHT ) ) , 2 ) ) - 1 ) * 100 as GEOCV
           from SASHELP_CLASS_SQL
           group by AGE "

CLASS_STAT2 <- dbGetQuery( conn , query )

dbDisconnect( conn )
```

# dplyr
```r
CLASS_STAT3 <- SASHELP_CLASS %>%
               group_by( Age ) %>% 
               summarise( n = length( Weight ) , GeoMean = exp( mean( log( Weight ) ) ) , GeoStd = exp( sd( log( Weight ) ) ) , .groups = "drop" )

```

# 結果
![geostat1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564185/a216146b-863c-96b1-c22b-c2a73054bc3d.png)

![geostat2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564185/04f8e380-f668-c501-4993-cdfc2e52eb4f.png)

![geostat3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564185/16e5c95b-9a3f-7ce0-93dc-d06774e830a2.png)

ってな感じでね
CentOS7 で rootのパスワード忘れたときの対処

## パスワードの変更

- GRUB2の起動画面で編集モードに入る

カーネルの選択画面で `e` を押して編集モードに入ります

![cent のクローン [実行中] - Oracle VM VirtualBox 2020-10-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/d7a998ff-1588-10b1-0028-17de7f5f9329.png)

- 編集モードで変更を行う

`linux16` から始まる行の `rhgb quiet LANG=ja_JP.UTF-8` を削除します

![1cent のクローン [実行中] - Oracle VM VirtualBox 2020-10-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/97738df4-c9ca-676d-b69d-72e534998078.png)


- 削除したところに追加を行う

削除したところに `rw init=/bin/sh` を追記を行います。
追加が出来たら `Ctrl + x` で起動させます。


![2cent のクローン [実行中] - Oracle VM VirtualBox 2020-10-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/661acc45-ceb3-735c-a21a-04d91c19ab54.png)


- 新しいパスワードに変更

コンソールが起動したら以下のコマンドを使ってrootのパスワードを変更します。

```
# passwd
```

ここではパスワードが7文字より少ない と怒られていますが、変更できました。
※出来るだけ長いパスワードを使いましょう

パスワードが変更できたら以下で起動させます。

```
# exec /sbin/init
```


![3cent のクローン [実行中] - Oracle VM VirtualBox 2020-10-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/90cae958-a4f4-3e28-3ea8-7935fa168961.png)


- ログイン

起動したら新しいrootのパスワードでログインを行います。

![4cent のクローン [実行中] - Oracle VM VirtualBox 2020-10-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/37d19cfa-1ace-b30a-81e6-184e67bc07c6.png)


## 参考

- [CentOS7でrootユーザのパスワードを変更する方法【旧来のシングルユーザモード的な】](https://i-think-it.net/centos7-root-password-change-single-user-mode/)
Ruby の Gem で CSRF を検索してみた

# はじめに
気が向いたので、やってみた
#　検索結果
|gem|last|
|:--:|:--:|
|angular_rails_csrf|4.5.0 - September 21, 2020|
|omniauth-rails_csrf_protection|0.1.2 - June 04, 2019|
|unified_csrf_prevention|1.0.0 - July 03, 2018|
|rack_csrf|2.6.0 - December 31, 2016|
|angular_csrf|0.1.6 - September 18, 2016|
|faraday_csrf|0.1.0 - October 29, 2015|
|artirix-cacheable-csrf-token-rails|0.3.1 - July 31, 2015|
|rack-csrf-detector|0.2.1 - July 07, 2015|
|rack-simple_csrf|1.3.0 - June 17, 2015|
|rails3_csrf_patcher|0.0.1 - March 23, 2015|
|cuba-csrf|0.0.3 - February 07, 2015|
|baldowl-rack_csrf|1.1.0 - August 11, 2014|
|angular-csrf-cookie-rails|0.1.0 - June 02, 2014|
|ng-rails-csrf|0.1.0 - June 18, 2013|
|csrf_token_caching|0.0.1 - May 22, 2013|
|cacheable-csrf-token-rails|0.2.0 - March 21, 2013|
|padrino-csrf|0.1.1 - February 18, 2012|
# まとめ
+ `sinatra`で使用している`rack_csrf`は新しい方だった

参照したサイト
*[RubyGems.](https://rubygems.org/)*
*[Sinatraで家族用todoリストを作る](https://qiita.com/superrino130/items/20f588f6a8b4d607c081)*