OmniAICreator/Qiita-1.07M huggingface dataset:
インクリメンタルサーチの学習中出てきた用語

# append()
<img width="246" alt="スクリーンショット 2020-07-04 23.00.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/b71d71ce-7558-b501-03f6-c3f1d701c79b.png">
この場合*****の部分にクラス名を記述する事でhtmlをそのクラスに入れる事ができる。
# parent()
親要素を指定してくれる。
# remove()
削除してくれる。
AtCoder 生活　86日目

[前回](https://qiita.com/flandrescarlet237/items/1dc6bbb798759d1bc5f5)

#86日目
今回は茶色diffの問題を3問解きました。

|問題|難易度|自力で解けた|かかった時間|
|:-:|:-:|:-:|---|---|
|Code Formula 2014 本選|C|✕|82分18秒|
|ARC068|C|◯|6分16秒|
|ARC033|B|◯|14分35秒|


##[Code Formula 2014 本選_C](https://atcoder.jp/contests/code-formula-2014-final/tasks/code_formula_2014_final_c)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    string a;
  	string s;
    while(cin >> s){
        a += s;
      	a += " ";
    }
    set<string> ans;
    int cnt = 0;
    rep(i,a.size()){
        if(a[i] == '@'){
            int j = i+1;
            for(;j < a.size();j++){
                if(a[j] < 'a' || 'z' < a[j]) break;
            }
            string e = a.substr(i+1,j-i-1);
            if(e != ""){
                ans.insert(e);
            }
        }
    }
    for(string q:ans){
        cout << q << endl;
    }
}

```

解くのにかかった時間：82分18秒
感想：setの使い方をいまいちよく理解できていない


##[ARC068_C](https://atcoder.jp/contests/arc068/tasks/arc068_a)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    ll x;
    cin >> x;
    ll t = x/11;
    ll s = x%11;
    t *= 2;
    if(0 < s && s < 7) t += 1;
    if(6 < s && s < 11) t += 2;
    cout << t << endl;
}

```

解くのにかかった時間：6分16秒


##[ARC033_B](https://atcoder.jp/contests/arc033/tasks/arc033_2)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    int n,m;
    cin >> n >> m;
    vector<ll> a(n),b(m);
    set<ll> s;
    rep(i,n){
        cin >> a[i];
        s.insert(a[i]);
    }
    rep(i,m){
        cin >> b[i];
        s.insert(b[i]);
    }
    double p = s.size();
    double q = (n+m) - s.size();
    double ans = q/p;
    cout << fixed << setprecision(10) << ans << endl;
}

```

解くのにかかった時間：14分35秒


###最後に
もっと茶色diffを解けるようになりたい

難易度|かかった平均時間|解けた問題数|
|:-:|---|---|
|B|14分35秒|1問中1問|
|C|6分16秒|1問中1問|
モデル作成、削除等のあれこれ

毎回忘れるので、自分の忘備録用に

# モデルの作成


外部キー制約（※1）をつけるならreferrence型で作成(インデックスは自動で付貼ってくれる)
カラムはuser_idではない点に注意

```
rails g model Article title:string text:text user:references
```
（*1）存在しない値の外部キーは登録できない（整合性がとれる）、親テーブルに外部キーが登録されている子テーブルのリソースは削除できない

<br>


外部キー制約をつけないならintger型で作成(インデックスを貼るならマイグレーションファイルで記述が必要)
カラムはuser_idにする

```
rails g model Article title:string text:text user_id:intger
```

<br>



単純にマイグレーションファイルだけの作成

```
rails g migration Artcle
```

#モデルの型

- string : 文字列（255字まで）
- text : 文字列（string以上の文字数の場合）
- references:　外部キー
- integer : 整数
- float : 浮動小数点
- datetime : 日時
- time : 時間
- date : 日付
- boolean : trueまたはfalse



# 削除
マイグレーションを実行する前か後かで操作が変わるので注意（rails db:migrateをしたかしてないか）


rails db:migrate前ならdestroyで削除

```
rails destroy model Article
```


rails db:migrate後ならロールバックで戻す

```
rails db:rollback #１つ前
rails db:rollback STEP=2　#2つ前
rails db rollback VERSION=202007012345 #バージョン指定で戻す
```
そのあとに　rails destroy model Article　で完了。



# カラムの追加と削除
カラムの追加

```
rails g migration AddSubtitleToArticles subtitle:string
```
<br>
カラムの削除

```
rails g migration RemoveSubtitleFromArticles subtitle:string
```
テーブル名Artcles（複数形）になる点に注意
マイグレーションファイルではchangeメソッドの中に記述される。
TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～CSS第8回～

# アジェンダ
* borderの指定
* ボックスの装飾
* 実践

# borderの指定
borderとは、marginとpaddingの間に存在する、ボックスの枠(線)である。

## border-style
ボーダーの線の種類を指定する。指定方法は以下のとおり。

```
border-style: 値;
```
値は単語で指定する。
単語は以下のようなものがある。

<dl>
  <dt>none</dt>
  <dd>無し</dd>
  <dt>hidden</dt>
  <dd>表示させない</dd>
  <dt>solid</dt>
  <dd>実線</dd>
  <dt>double</dt>
  <dd>二重線</dd>
  <dt>groove</dt>
  <dd>立体的で窪んで見える枠</dd>
  <dt>ridge</dt>
  <dd>立体的で隆起して見える枠</dd>
  <dt>inset</dt>
  <dd>ボックスの内側が窪んで見える枠</dd>
  <dt>outset</dt>
  <dd>ボックスの内側が隆起して見える枠</dd>
  <dt>dashed</dt>
  <dd>破線</dd>
  <dt>dotted</dt>
  <dd>点線</dd>
</dl>
実際に表示させるとこんな感じ。
![border.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/05c99ad6-0195-5ee7-68b7-18e1882fcc56.png)

## border-width
ボーダーの太さを指定する。指定方法は以下の通り。

```
border-width: 値;
```
値は数値か単語で指定する。
単語は以下のようなものがある。

<dl>
  <dt>thin</dt>
  <dd>細い</dd>
  <dt>medium</dt>
  <dd>普通</dd>
  <dt>thick</dt>
  <dd>太い</dd>
</dl>

## border-color
ボーダーの色を指定する。指定方法は以下の通り。

```
border-color: 値;
```
値は色で指定する。

# border / border-top / border-bottom / border-right / border-left
ボーダーの線の種類、太さ、色を一度に指定する。指定方法は以下の通り。

```
# 全ての辺
border: 線の種類 太さ 色;
# 上辺のみ
border-top:  線の種類 太さ 色;
# 下辺のみ
border-bottom:  線の種類 太さ 色;
# 左辺のみ
border-left: 線の種類 太さ 色;
# 右辺のみ
border-right:  線の種類 太さ 色;
```

# ボックスの装飾
## border-radius
ボーダーの角を角丸にし、半径を設定する。設定方法は以下の通り。

```
# 通常
border-radius: 左上 右上 右下 左下;

# 左右方向の半径と上下方向の半径をそれぞれ指定する場合
# / の左側が左右方向の値、右側が上下方向の値
border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下;
```
値は数値で指定する。省略した場合、点対称の角の値が反映される。

## box-shadow
ボックスの影を指定する。指定方法は以下の通り。

```
box-shadow: 水平方向のオフセット 垂直方向のオフセット ぼかし距離 広がり距離 影の色 影の位置;
```
水平方向のオフセット、垂直方向のオフセット、ぼかし距離、広がり距離は数値で指定する。
影の色は色で指定する。
影の位置は、以下のように指定する。

<dl>
  <dt>inset</dt>
  <dd>影を内側に書く</dd>
  <dt>記述なし</dt>
  <dd>影を外側に書く</dd>
</dl>

# 実践
上記内容を用いて、以下のindex.htmlとstyle.cssを作成した。

```html:index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="./style.css">
    <title>box</title>
  </head>
  <body>
    <div class="inset">このボックスは奥に窪んで見える。</div>
    <div class="outset">このボックスは手前に隆起して見える。</div>
  </body>
</html>
```

```css:style.css
div {
  border-width: 25px;
  border-color: darksalmon;
  height: 150px;
  width: auto;
  margin: 20px;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}

.inset {
  background-color: lightgray;
  border-style: inset;
  box-shadow: 0px 0px 10px 5px gray inset;
}

.outset {
  background-color: lightyellow;
  border-style: outset;
  box-shadow: 0px 0px 10px 5px gray;
}
```
これをWebブラウザに表示させるとこんな感じ。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/60c6f61d-659d-4f2e-edd2-3a30e54fb30c.png)

# おわりに
今回はボックスのボーダー及び装飾に関する内容だった。

今回でCSSの入門講座はおしまい。
すべてを理解したわけではないけれど、CSSの書き方の基本を学ぶことができた。
これで、少し調べるだけでCSSはかけるようになりそう。

## 参考
[8-1 borderプロパティ（CSSの背景）](https://www.youtube.com/watch?v=vxuDFUr2m2E&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=32)
[8-2 角丸を扱う（CSSのボーダー）](https://www.youtube.com/watch?v=NjFK5yBT1sM&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=33)
[8-3 影をつける（CSSのボーダー）](https://www.youtube.com/watch?v=GsOZ714HHpE&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=34)
[JavaScript]エラーをthrowする場合はちゃんとカスタムエラーを作ろう

エラーをthrowする際は、カスタムエラーを定義してあげましょう。
例えば、意図して処理をスルーさせている場合は、コメントではなくカスタムエラーでやったほうがより良いコードとなります。（併用もOK）

## 例

```js
class GetUser404Error extends Error {};

function getUser(id) {
  try {
    return userService.getUser(id):
  } catch(e) {
    if (e.status === 404) {
      throw new GetUser404Error();
    }
     throw e;
  }
}

try {
  getUser(123);
  // ...
} catch(e) {
  // データが取得できない場合は、エラーを表示せずに処理を終える
  if (e instanceof GetUser404Error) {
    return;
  }
  errorDialog(e.message);
}
```

## 参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error
fatal error: newproc: function arguments too large for new goroutine


#問題

###fatal error: newproc: function arguments too large for new goroutine
goroutineを実行している部分でエラー

#原因

起動時にスタックが大きいとエラーが発生するようで、
goルーチンで起動する関数の引数にでかい構造体が合っても同じことを言われます
(構造体の中にクソデカ配列があるなど)


```go
type structure_t struct {
    kusodeka_array       [9999]int64
}

func (s structure_t) hogehoge () {}

func main() {
    structure := structure_t{}
    go structure.hogehoge()
}
```

#解決策
引数がそのままスタックにコピーされないように
goルーチンを別の関数（下記の例では無名関数）で実行してから構造を呼び出す

```go

go func() {
    structure.hogehoge()
}() 
```

もしくはhogehoge関数を定義している部分でレシーバをポインタレシーバにする

```go
func (変数名 *structure_t) hogehoge () {}
```
恐らくエラーが起きている人は関数定義の部分で値渡し(値レシーバ)を設定しているので
どちらかというと後者の方法で直すのが良いと思います

そもそも値渡しだと関数で実行した結果が反映されないので
もし反映されないことを意図したものなら前者でも良いかも

#感想
実行時にスタックが大きいの気にする割に
実行中にスタックでかくなっても気にしないのは笑えますね
（要するにgoルーチンは実行時（コンパイル時？）しかスタックの大きさを気にしてない）
#参考
https://www.coder.work/article/204560
curlを使ってjavascriptを有効にした場合のhtmlソースを取得する

[domcurl](https://github.com/PaulKinlan/domcurl)というツールがあります。webscrapingに非常に便利なツールです。`phantomjs`などで要件を満たせない場合におすすめです。

> domcurlはPuppeteerを使う小さなNodeJSアプリケーションで、 npm i domcurlコマンドを発行することでインストールできます。 curlコマンドのように、簡単なdomcurl [url]を発行してリソースを取得し、JSをページ上で実行することができます。
> 
> https://paul.kinlan.me/domcurl/

```sh
$ npm i domcurl
$ ./node_modules/domcurl/index.js  --url https://example.com
```

注意 : タイトルは正確ではありませんが、検索のしやすさからcurlと表記しています
【JavaScript】FileReaderをasync/awaitでエレガントに使いたい

こんにちは。

皆さんもFileReaderを使う機会は多いと思います。
FileReaderは非同期なので、コールバック地獄に陥りがちです。

しかし最近のJavaScriptには、非同期なコードを同期的に扱えるasync/awaitという素晴らしい機能が存在します。

**FileReaderもasync/awaitの恩恵を受けたい!!**


# 解決策
```js
class FileReaderEx extends FileReader{
    constructor(){
        super();
    }

    #readAs(blob, ctx){
        return new Promise((res, rej)=>{
            super.addEventListener("load", ({target}) => res(target.result));
            super.addEventListener("error", ({target}) => rej(target.error));
            super[ctx](blob);
        });
    }

    readAsArrayBuffer(blob){
        return this.#readAs(blob, "readAsArrayBuffer");
    }

    readAsDataURL(blob){
        return this.#readAs(blob, "readAsDataURL");
    }

    readAsText(blob){
        return this.#readAs(blob, "readAsText");
    }
}
```
元のFileReaderクラスをPromiseでラップした拡張クラスを作成して万事解決。
`#readAs()`は外部から見られたくないのでプライベートメソッドにしてあります。

# ビフォーアフター
今までコールバックにまみれていたコードも...

```js:Before
const reader1 = new FileReader();
reader1.addEventListener("load", ()=>{
    const buffer1 = reader1.result;

    const reader2 = new FileReader();
    reader2.addEventListener("load", ()=>{
        const buffer2 = reader2.result;

        const reader3 = new FileReader();
        reader3.addEventListener("load", ()=>{
            const buffer3 = reader3.result;
        });

        reader3.addEventListener("error", ()=>{
            alert(reader3.error.message);
        });

        reader3.readAsArrayBuffer(blob3);
    });

    reader2.addEventListener("error", ()=>{
        alert(reader2.error.message);
    });

    reader2.readAsArrayBuffer(blob2);
});

reader1.addEventListener("error", ()=>{
    alert(reader1.error.message);
});

reader1.readAsArrayBuffer(blob1);
```
async/awaitの手に掛かればこの通り!!

```js:After
(async()=>{
    const buffer1 = await new FileReaderEx().readAsArrayBuffer(blob1);
    const buffer2 = await new FileReaderEx().readAsArrayBuffer(blob2);
    const buffer3 = await new FileReaderEx().readAsArrayBuffer(blob3);
})();
```
一目瞭然で見やすくなっています。

FileReader以外にも応用が利く、かなりオススメな手法です。
【PHP】正規表現（半角英字・郵便番号・メールアドレス）

プログラミング初学者がアウトプットのため気まぐれ更新。
アドバイス等あればご教示頂きたく、よろしくお願い致します。

今回は、よく使う正規表現をキロクしておきます。

##半角英字
ユーザー名の登録などで使用する。
`{ }`のなかに数字をいれることで、文字数制限もできる。

```php:validation.php
// 半角英字であるかチェック
$pattern ='/^[a-zA-Z]+$/';
// 8文字以内の半角英数字であるかチェック
$pattern ='/^[a-zA-Z0-9]{8}+$/';
```

##郵便番号

```php:validation.php
// 郵便番号であるかチェック
$pattern ='/[0-9]{3}-[0-9]{4}/';
```

##メールアドレス

```php:validation.php
// メールアドレスであるかチェック
$pattern ='/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/iD';
```
---

お問い合わせフォームでよく使う正規表現をまとめました。
ありがとうございます。
ITILファンデーション(ITIL4エディション)の資格の勉強を始めた

## はじめに
ITILファンデーション(ITIL4)の資格の勉強を始めたので
基本的だと思われる項目のメモを残していきます。
参考にしたのは「ITILファンデーション：ITIL4エディション」の本です。

## ITIL4の主な要素
1. ITILサービスバリューシステム(SVS)
1. 4つの側面モデル

## ITILサービスバリューシステム(SVS)の主な要素
1. ITILサービスバリューチェーン
1. ITILプラクティス
1. ITILの従うべき原則
1. ガバナンス
1. 継続的改善

## 4つの側面モデルの主な要素
1. 組織と人材
1. 情報と技術
1. パートナとサプライヤ
1. バリューストリームとプロセス

## サービスバリューチェーン(6つのバリューチェーン活動)
1. 計画
1. 改善
1. エンゲージ
1. 設計および移行
1. 取得/構築
1. 提供およびサポート

## ITILの7つの従うべき原則
1. 価値に着目する
1. 現状からはじめる
1. フィードバックをもとに反復して進化する
1. 協調し、可視性を高める
1. 包括的に考え、取り組む
1. シンプルにし、実践的にする
1. 最適化し、自動化する

## ITIL4プラクティスの概要
- 一般的マネジメントプラクティス
- サービスマネジメントプラクティス
- 技術的マネジメントプラクティス

## 一般的マネジメントプラクティス
- アーキテクチャ管理
- 継続的改善
- 情報セキュリティ管理
- ナレッジ管理
- 測定および報告
- 組織変更の管理
- ポートフォリオ管理
- プロジェクト管理
- 関係管理
- リスク管理
- サービス財務管理
- 戦略管理
- サプライヤ管理
- 要員およびタレント管理プラクティス

## サービスマネジメントプラクティス
- 可用性管理
- 事業分析
- キャパシティおよびパフォーマンス管理
- 変更実現
- インシデント管理
- IT資産管理
- モニタリングおよびイベント管理
- 問題管理
- リリース管理
- サービスカタログ管理
- サービス構成管理
- サービス継続性管理
- サービスデザイン
- サービスデスク
- サービスレベル管理
- サービス要求管理
- サービスの妥当性確認およびテスト

## 技術的マネジメントプラクティス
- 展開管理
- インフラストラクチャおよびプラットフォーム管理
- ソフトウェア開発および管理

## ここまでの感想
ITIL4の参考書などが無いため、ITIL3の参考書を読んで学習を始めたのですが、
ITIL3とITIL4で中身がだいぶ違っているようでどうしようかなと思っています。
各プラクティスについてはこれから読んでいこうと思いますが、
各プラクティス毎に「バリューチェーン活動」への貢献度の記載があるのですが、読んでいてよく分からなかったです。
jQueryでユーザーの判定を行う

# プログラミングの勉強日記
2020年7月4日　Progate Lv.148
ポートフォリオ作成中

##レスポンシブデザイン
　[こちらの記事](https://qiita.com/mzmz__02/items/ba36d3a70d90eaaa0b6b)でレスポンシブデザインについて詳しく書かれている。メディアクエリ(ブラウザの画面サイズによってCSSのスタイルを設定できる手段)を用いて、画面のレイアウトを防ぐことができる。
　今回はブラウザの画面幅ではなく、jQueryを用いてユーザーの端末情報を判定することで、レイアウト崩れを防ぐ方法を紹介する。

##ユーザーエージェント判定
　サイトのアクセスするときに、スマートフォンとパソコンで処理を切り替えるときに使う。

```js:JSファイル
$(function () {
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
        // スマートフォン用処理
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
        // タブレット用処理
    } else {
        // PC用処理
    }
})
```


##参考文献
https://nodoame.net/archives/9689
FileZilla で vsftp サーバーにアクセスするとファイル一覧が取得できない

CentOS8のサーバーを新規構築し、vsftpを設定しました。ところが、FileZillaでアクセスするとディレクトリ リスト（ファイル一覧）が取得できません。
現在稼働中のCentOS6では、同じ設定なのに問題がないのですが…

# パッシブモードの問題

パッシブモードのトラブルらしいのですが、根本的な原因は分かりませんでした。
パッシブモードのポートを指定すれば良いようです。

```
pasv_addr_resolve=YES
pasv_address=（サーバーのIPアドレス）
pasv_min_port=60000
pasv_max_port=60030
```
よく耳にするReactを自分なりにまとめてみた...

#自己紹介
むちゃんです。
関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です:boy_tone2: (2020.7.4現在)

イベントなど回っているので是非大阪辺りの方は会いましょう！

#1...REACTとは？

**Facebook社**が開発した**WebのUI**を作るための**Javascriptのライブラリ**。

**<font color="DarkRed">[公式ドキュメント]</font>**:https://ja.reactjs.org/


##2...コンポーネントとは?
[**見た目**]+[**機能**]を合わせた物。

1. 見た目(View)
2. 機能(controller)


###Webの構造(コンポーネントツリー)

・オブジェクトの階層構造のこと

![20161026134922.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493204/ef01c4ff-d196-be38-5f08-9de8f381a50b.png)

###なぜコンポーネントを使うのか？
1. 再利用をするため
2. 分割統治するため(お互いの依存関係をなくす)
3. 変数に強くなるため

###コンポーネントの種類

**・Functional Component(ファンクショナルコンポーネント)**
<img width="760" alt="名称未設.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493204/c859b922-b483-a81c-e374-52c158b03793.png">


**・Class Component(クラスコンポーネント)**
<img width="784" alt="名設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493204/0915ed94-ce7e-6a0a-0d15-f83d9e3e96a7.png">

##3...DOMについて

###そもそもDOMって何？

〜Document Object Model (DOM)=要はインターフェース
>HTMLにアクセスする窓口みたいな物
構造や見た目、コンテンツを変更

###Virtual DOMとは
〜Reactが管理しているDOM
>ブラウザのレンタリングと別管理
->効率よくDOM操作をできる

**・通常のDOM操作**


```
document.getElemntById('hoge').innerText='hoge'
```

**・ReactのVirtualDOM操作**


```
render(
<div id="hoge">hoge</div>
)
```

##JSXについて(トランスコンパイル)

〜Javascropt内で<font color="blue">HTML</font>っぽくる


```
ReactDOM.render(
<div ClassName={hoge}>
  <h1>HelloWorld</h1>
</div>
)
```

###4...JSXの基本文法での注意点!!

**・Reactのパッケージインストールが必要**

```
import React from "react"
```
**・ClassはClassNameと記述**

**・１つで完了するタグは終了タグをつける**

#あとがき
今回は自分なりにReactについて簡潔にまとめてみした:thumbsup_tone2:

次回はstateやライフサイクルについてより詳しくまとめてみたいと思います。

Twitter [<font color="green">@HomgMuchan</font>](https://twitter.com/HongMuchan)  ぜひフォロー待っています❗️
コマンドラインからjavascriptでレンダリングされたHTMLソースを取得する方法

`curl`からは、javascriptを有効にしたブラウザと同じHTMLソースを取得することが難しいことがあります。このような場合、`phantomjs`を使用すると便利です。

```sh
$ npm i -g phantomjs phantom
```

公式サイトにてバイナリも配布されてるので、`node`からのインストールが依存関係などで失敗する場合、こちらをダウンロード、解凍して実行権限を与えると良いでしょう。

https://phantomjs.org/download.html

```sh
$ curl -sLO https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
$ aunpack phantomjs-2.1.1-linux-x86_64.tar.bz2
$ cd phantomjs-2.1.1-linux-x86_64/bin/
$ chmod +x phantomjs
$ ./phantomjs --version
```

```js:set.js
var system = require('system');
var page   = require('webpage').create();argument
var url    = system.args[1];
page.open(url, function () {
  console.log(page.content);
  phantom.exit();
});
```

```sh
$ phantomjs set.js https://google.com
```
製薬企業研究者がPythonのコーディング規約についてまとめてみた

# はじめに

ここでは、Pythonのコーディング規約について解説します。


# PEP8で定められたコーディング規約

Pythonでは、PEP8というコーディング規約が定められています。
PEP8で定められている概要について以下に示します。

## import文

import文では、`import os, sys`などとせず以下のように複数行に分けるようにします。
また、標準ライブラリ、サードパーティ製ライブラリ、ローカルのモジュール等は区別できるよう1行の空白行を入れるようにします。

```python
import os
import sys

from django.utils import timezone

from my_app.models import User
```




## 文中の空白文字

```python
a = 1
b = a + 2
list_nums = [a, b]
dict_nums = {'a': a, 'b': b}
```

`=`の前後には半角スペースを入れ、リストや辞書などの`,`の後にも半角スペースを入れます。
また、辞書の`:`の後にも半角スペースを入れます。

## インデント

`if`文や`for`文、関数やクラス定義の際には、`:`の後の行は半角スペース4つ（およびその倍数）分だけインデントして書き始めます。

```python
if True:
    print("It's true.")
```


## 空白行

トップレベルの関数やクラス定義の前には、2行空けるようにします。
クラス内のメソッドの場合は1行空けます。

```python
def my_func():
    return 'my_func'


class MyClass():
    name = my_class

    def print_name(self):
        return self.name
```


## 1行の文字数

1行の文字数は基本的に79文字以下にします。
docstringの場合は72文字以下にします。



# Flake8を用いたチェック

ソースコードがPEP8に従っているかチェックするツールとして、`flake8`があります。
以下のコマンドで実行することができます。

```bash
$ flake8 ファイル名.py
```

実行すると、ソースコードのどの部分がどのようなコーディング規約に合っていないかを表示してくれます。


# まとめ

ここでは、Pythonのコーディング規約について解説しました。
Pythonは可読性を重視する言語ですので、他の人が読んでも分かりやすいコードを書くのに不可欠です。
chatwork で雑談botを試してみた

#背景
ChatWorkは、5年くらい使ってまして、時々Google Apps Scriptでchatwork APIを呼ぶスクリプトを試していました。今回実用的なchatwork botを作ろうとネットを見ていたところ、たまたま面白い雑談botを見つけました。
この記事です。
[雑談に応答するLINE Botを爆速で作成する方法(Google Apps Script + Chaplus雑談対話API)](https://qiita.com/maKunugi/items/e6fc7f51071ab3696d5f)
この雑談対話APIは、興味深いので、試しにchatworkと連携させてみることにしました。

余談ですが、私が20代の頃は、インターネットがなかったので、それははもう調べるのに苦労して、膨大な時間を費やしました。それに比べると、今ネットで瞬時に回答を得られるので、みなさんの情報提供に感謝しかありません。こうやってネットで便利になったはいいのですが、40年前のITエンジニアと比べて、生産性は本当に上がったのか？疑問に思うこともしばしばです。

#前提
ChatWorkアカウントを持っていて、chatwork APIトークンを取得済みであること。
Google Apps Scriptの書き方に慣れていること。

#手順
1. [Chaplus](https://www.chaplus.jp/) に行って、APIを取得する。
2. Google Apps Script で以下のような、スクリプトを書く。

~~~
var API_TOKEN = '******************************';　//チャットワークAPIトークン

function doPost(e) {
  
  var json = JSON.parse(e.postData.contents);
  /* リクエスト用パラメータ・URLの準備 */
  var params = {
    headers : {"X-ChatWorkToken" : API_TOKEN},
    method : "post"
  };
  
  var roomId = json.webhook_event.room_id;
  
  url = "https://api.chatwork.com/v2/rooms/" + roomId + "/messages";
  
  var jsonBody = json.webhook_event.body;

 
  var tmpSplit = jsonBody.split(/:/);
  var keyword = tmpSplit[0];
  var usermessage = tmpSplit[1];

  
  if(jsonBody.slice(0, 3) == "bot"){   
    var accountId = json.webhook_event.account_id;
    var messageId = json.webhook_event.message_id;

    var body = ''
    body += '[rp aid=' + accountId;
    body += ' to=' + roomId + '-' + messageId + '] '
    
    var replyMessage = getChaplusMessage(usermessage, 'nakano');
    body += '[info]雑談bot：' + replyMessage  + '[/info]'
 
    params.payload = {body :body};
    
    UrlFetchApp.fetch(url, params);
  }  
}


function getChaplusMessage(mes, username) {
  var dialogue_options = {
    'utterance': mes,
    'username' : username,
    'agentState' : {
      'agentName' : 'sample_bot',
      'age' : '30歳',
      'tone' : 'kansai'
    }
  }
  var options = {
    'method': 'POST',
    'contentType': 'text/json',
    'payload': JSON.stringify(dialogue_options)
  };

  var chaplusUrl = "https://www.chaplus.jp/v1/chat?apikey=<APIキー>";
  var response = UrlFetchApp.fetch(chaplusUrl, options);
  var content = JSON.parse(response.getContentText());

  var answer = content.bestResponse.utterance;
  return answer;
}
~~~

3.Google Apps Script のWeb URLを公開する。(このあたりはネットの記事がたくさんあります。)
4.ChatWork のwebhook で上記URLを設定する。(このあたりはネットの記事がたくさんあります。)

5.試してみる。
![zatudan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/aee266ff-b6ca-56f6-1ca5-34c3e7ec4f6c.png)
chatworkに投稿するときに先頭に bot:をつけたときに、雑談botを呼ぶ仕様にしています。

雑談APIの詳細は、[Botが雑談に応えられるようにするWEB APIを公開してみた話【個人開発】](https://qiita.com/maKunugi/items/b1afb6441571119729a7)　をご覧ください。

#今後
こんな雑談対応APIを提供して頂けるのはとても嬉しいです。
より実用的な会話にできるか挑戦してみたい。
ChonohaVPSのCentOS7にLaravelアプリをデプロイ

さくらのレンタルーサーバで運用していたものをChonohaVPSに移管しようとしたらハマりまくったので、覚えていることをメモ。


#コンポーザの入れ忘れ
プロジェクトフォルダだけ持っていってもLaravelは動かない。
開発は手元のローカル端末でやってGitにアップロードしたものをCloneするだけだから、サーバ側にはコンポーザはいらないかと勘違いしていた。
公開して閲覧できるようにするためにもコンポーザは必要なので、インストールする。

#なんだかわからないけど500
500だからファイルはあるんだろうけど、ブラウザにはそれしか書いていないし、開発ツール開いても何もヒントがない。
付近のフォルダで、フレームワークのない単独のphpファイルが動いているのでlaravelの何かがおかしいと思うんだけどエラー内容がわからなくて途方にくれた。

最終的にはアパッチのエラーログをtail -fしてブラウザをリロードしたら問題のパスがログに出てきたので修正したら治った。

/var/log/httpd/ に ログがあるのでそれのどっかにあった。どれか忘れたけど、とにかく謎の500でハマったらこの辺のログを tail -f で監視するとヒントがあるかも。

アプリ名/public/index.php の中にララベルのpublic以外のフォルダへのパスが書いてあるのでそれを合わせる。
参考にしたページの通りに書いたのだが、ディレクトリ構成が自分と違ったのでパスがズレた。
その方の場合はpublicフォルダを公開フォルダの/var/www/html へ　mv で移動して読めるようにするやり方だったのでindex.phpをいじる形になっていたけど、自分は ln -sで　公開フォルダからソフトリンクでパスをつなぐやり方にしたので、デフォルトのまま触ったらダメだった。

#DBの設定が間違っている
ここで、見慣れたLaravelの綺麗なエラー画面になった。
whoops!とか出るやつ。
ここまできたら後一息って感じ。

.envの設定が間違っていた。
ホスト名にサーバのipアドレスを書いたけど、localhostが正しかった。
ただし私の場合はってだけで必ずしもそうではない。
私の場合、同じサーバにDBを構築しているので、そこのサーバ側から見るとlocalhostになるってことで、決して手元の操作端末という意味ではない。
phpMyAdminでDBを見ると接続しているホスト名が表示されているので、これに合わせると多分繋がるはず。
私の場合はここがlocalhostと表示されているのがヒントになって上記の対応をした。

#トップページしか表示されない
紆余曲折してやっとトップページが表示できたと思ったら、今度はそこしか見れない。
/etc/httpd/conf を vi で開いて
/var/www/ と /var/www/html/
のところにある
AllowOverride None を AllowOverride All に変更する。
オーバーライドを許可するだから、多分 web.php でルーティングできるようにするって事かな？
あれが多分URLを上書きしているって事だろう。

これで動いた。
丸一日かかった・・
VCIが消失その１

#結論
コライダーとgravityをチェックしよう

#背景
VR配信・SNSサービスのバーチャルキャストでは、他のVRSNSに見られない仕組みとしてVCIというものがあります。VCIはバーチャル空間で取り扱えるアイテムであり、好きな場所で好きなタイミングで取り出すことができ、その挙動はスクリプトを用いて制御することでインタラクティブな効果を奏することができます。

そのVCIを制作するにあたって、制作の最初の段階で（特に初心者に多い）結構な割合で**作ったはずのVCIを呼び出しても出てこない**（見つけられない）事が起きます。

本記事ではこの現象に対する事例分けをし、それぞれの対処方法を紹介し、、、たいのですが、結構多岐にわたるので、そのうちの一つをご説明します。

作者のモチベーションが続けばもっと書きます

#対象
all user(主に初心者）

#症状
出したのに出てこない、もしくは
一瞬だけ出現するけど、すぐ消えてしまう

#原因
出現した瞬間無限落下している

#どういうことか
重力設定がオンになっているうえで、接触判定を入れていないと起きる。

unityでは、どういうわけか、これが**デフォルトで「落ちるが地面を突き抜ける」状態になっている**ため、設定間違いが非常に起きやすい。（作者は未だによくやる）

#解決策
**下図の"use gravity"のチェックを外そう。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494837/45f6f425-53c3-04ab-e785-320f7f7ce236.png)
なんならその下のisKinematicのチェックも入れておくと良いと思います。最初のうちはどのプロパティがどういう意味があるのか理解できないと思うので、とりあえずGravityをオフisKinematicをオンにしておけば大体の用は済みます。

その上で**コライダーを入れよう。**バーチャルキャストでは使えるコライダーは"box collider"、"capsule collider"、"sphere collider"の三種類のみなので気をつけよう。

上記のどちらかのみ行っていれば消えることはないのですが、最初のうちは両方意識しましょう。

#ちなみに
一旦落ちてしまうと、アイテムの更新を行うのは極めて困難です。素直に一旦タイトルに戻って読み直しましょう。
作者はフールプルーフとして、VCI作成時にsimple vciで作成設定して、最初から入ってるオブジェクトを消さずにおきます。こうすると更新用の（消失しない）アイテムが必ず手元に残るので安全です。

あと、他の事例でも言えることですが、床が透明だと気づきやすいです。落っこちていく様子が見えるので。基本的に僕は何かあったら、床のないところで原因を考えることが多いです。
現場支援で伝えていること　職場の活性化への気づき

**私は日頃『ムダ取り・現場改善』を強いメッセージとして伝えています。**
アジャイル開発に注目が集まれば集るほどそのプラクティスを如何に実践するのか・・・・プラクティスを実践しないとアジャイルでは無いというような、技法寄りの声を多く耳にします。『本を読めば解ります！！』と言ってしまう人までいるくらいです。
私の経験からこの声に私は凄く違和感を覚えます。
2007年に初挑戦で非常に上手く実施しているチームを前にして私の頭に浮かんだのが『彼らは特別な人？スキル？・・・・・』という言葉でした、私は『チームのメンバー個々が成功できる何か特別なものを持ち合わせている』という答えを探していたのです。
このチームの技術スキルは一般的なもので、一名新卒者という構成でしたので、**『アジャイル開発はスキルが高いエンジニアが必要という定説』からは外れています。**
その為に、個人の技術スキル以外の能力を測定して、一般値との乖離は何か？を求めたのですがその結果は全て一般的な結果で、何ら『特別なスキル』が無いチームでした。
では彼らの足跡に何かあるのではと思い、実績データを確認しました。これが素晴らしく、チームの日々の作業の見積り・実績の記録から、毎週の振返り、ストーリーの変更、等の従来法でも、過去のアジャイル実績報告からも見る事が出来ない**実績値が克明にチームで記録していたのです。**（記録方法・記録対象等チームで決めていました。）
自分たちの能力を正しく状況把握しているから、様々な変更にも対応できたのです。すなわち、発注元の要求に適時・的確に対応していたから成功できたのです。
発注元へ提案する際も、全て実績ベースでの計画提案ができますので、**発注元からの信頼を得るという心理的にモチベーションが上がった**ことも一因ではないかと判断しています。

　この経験から**『ムダ取り・現場改善』**を強いメッセージとして伝えています。

アジャイル開発のプラクティスは重要である事は間違いありませんが、それが何故必要なのかを理解する事、そして、自分達が行っている毎日の作業を見える化する事が真っ先に必要なのです。**見えるから、心が安定・不安が減る・信頼が増すのです。**
　この見える化する事はソフトウェア開発の現場だけでなく、企画などの頭脳労働を行っている現場でも応用できます。
【Docker】初心者が環境構築しました！

#背景
未経験から転職した僕が初めてDockerの環境構築をしたので、アウトプットします。併せて、同じ初心者の方の参考になれば嬉しいです。
#使用環境
- Macを使用しています
- 開発フレームワークはRuby on Railsです

#Dockerとは
**仮想環境**を提供するオープンソースソフトウェアです。
**仮想環境**というのは、自分のPCやサーバーとは別の環境のことをいいます。
このメリットは何のか？といいますと例を2つくらい挙げたいと思います。

1. MacPCを使用しいてWindows専用のソフトを使いたい！という時に仮想環境を作ってWindowsの環境を作り出せばそこでWindowsのソフトを作れちゃうって感じになります！

2. 自分のPCのプログラミング言語のバージョンが5だとして、仕事の現場のバージョンが3を使っていたとしたらわざわざ自分のPCのバージョンを落さなくてもこの仮想環境情で開発できちゃうって訳です！！

これは便利ですね😲（初心者ながら思っています、、笑）

#なぜDockerを使うのか
理由は主に2点あります。
1. **環境構築が簡単**
既に開発が行われている現場な難しい環境構築をしなくても簡単なコマンド（docker compose）を打てばすぐに開発に移れます。
2. **移動のしやすさ**
イメージで言うとdockerと言う船にコンテナと言うパーツ（プログラミング言語Webサーバー、データベース等）が乗っている感じです。これはコマンドで簡単に移動できるみたいです。（まだ体験していないですが、、）

#環境構築手順
※以下はまだDockerとDocker Composeを自分のPCにインストールしていない方向けです。(初めてDockerを使う方)
1. まずは下記のURLでDockerのインストールから始めましょう！
   https://www.docker.com/
2.  インストールが終わったらターミナルを開いて下記の作業をしてください。
そして、% docker --versionと% docker-compose --version(%は除いてください) と打ってください。
下記の様に出ていればインストール成功です。
[![Screenshot from Gyazo](https://gyazo.com/b9be2818ffaedc141c6253f247edf229/raw)](https://gyazo.com/b9be2818ffaedc141c6253f247edf229)

#まとめ
今回は概念の理解と簡単な環境構築手順をまとめてみました。
勉強し始めで間違っているところあるかもしれませんが、Dockerってすごく便利だ
なって思いました。今後も勉強してまた記事を更新していきたいと思います！！
確率論

#1. 定理
$X_1,\cdots,X_n$が独立な非負確率変数の族であれば

```math
E[\prod^n_{m=1} X_m] = \prod^n_{m=1} E[X_m]
```

#2. 証明
確率変数$\prod^n_{m=1} X_m$の代わりに，$\prod^n_{m=1} \rho_r(X_m)$を考える．ただし，$r\ge1$．
なぜなら，$r\to\infty$のとき，$\rho_r(X_m)\to X_m$となるからである．

$\prod^n_{m=1} \rho_r(X_m)$は，単関数の積であるから，それぞれ$0,\frac{1}{2^r},\cdots,\frac{r2^{r-1}}{2^r},r$の値をとる$i_m (m=1,\cdots,n)$に対して，

```math
\Big(\prod^n_{m=1} \frac{i_m}{2^r} \Big)
P\Big( \bigcap^n_{m=1}\{\rho_r(X_m)=\frac{i_m}{2^r} \Big)
```
をすべての$i_1,\cdots,i_n$の値の組み合わせについて合計することで，$\prod^n_{m=1} \rho_r(X_m)$の期待値が計算される．

すなわち，

```math
E[\prod^n_{m=1} \rho_r(X_m)] = \sum^{r2^r}_{i_1,\cdots,i_n=0} 
\Big( \prod^n_{m=1} \frac{i_m}{2^r} \Big)
P\Big( \bigcap^n_{m=1}
\{\rho_r(X_m)=\frac{i_m}{2^r} \}\Big)
```
$\rho_r(X_m)=\frac{i_m}{2^r}$となるのは，$X_m\in[\frac{i_m}{2^r},\frac{i_m+1}{2^r})$となるときであり，この区間は当然$\mathcal{B}([-\infty,\infty])$に含まれるから，$\\{\rho_r(X_m)=\frac{i_m}{2^r} \\}\in \sigma \\{X_m \\}$である．

$X_m (m=1,\cdots,n)$は独立，すなわち$\\{\sigma\\{X_m\\}\\}_{m=1,\cdots,n}$が独立であるから，

```math
\begin{align}
E[\prod^n_{m=1} \rho_r(X_m)]
&= \sum^{r2^r}_{i_1,\cdots,i_n=0} 
\Big( \prod^n_{m=1} \frac{i_m}{2^r} \Big)
\prod^n_{m=1} P\Big( \{\rho_r(X_m)=\frac{i_m}{2^r} \}\Big) \Big) \\
&= \sum^{r2^r}_{i_1,\cdots,i_n=0} 
\left( \prod^n_{m=1} \frac{i_m}{2^r}
P\Big( \{\rho_r(X_m)=\frac{i_m}{2^r} \}\Big) \right) \\
&= \prod^n_{m=1}
\left( \sum^{r2^r}_{i=0} \frac{i}{2^r}
P\Big( \{\rho_r(X_m)=\frac{i}{2^r} \}\Big) \right) \\\end{align}
```
最後の等式は，カッコ内を$f(i_m,X_m)$と単純に表すと，例えば$r=1$のときでは

```math
\begin{align}
\sum^2_{i_1,i_2,i_3=0} \prod^3_{m=1} f(i_m,X_m)
&= f(0,X_1)f(0,X_2)f(0,X_3) + f(1,X_1)f(0,X_2)f(0,X_3) + \cdots + f(2,X_1)f(2,X_2)f(2,X_3) \\
&= \left(f(0,X_1)+f(1,X_1)+f(2,X_1)\right)\left(f(0,X_2)+f(1,X_2)+f(2,X_2)\right)\left(f(0,X_3)+f(1,X_3)+f(2,X_3)\right)
\end{align}
```

となることからわかる．
したがって，

```math
E[\prod^n_{m=1} \rho_r(X_m)] = \prod^n_{m=1} E[\rho_r(X_m)]
```
であり，$r\to\infty$とすると，単調収束定理より

```math
E[\prod^n_{m=1} X_m] = \prod^n_{m=1} E[X_m]
```
が成り立つ．


#3. 系
$X_1,\cdots,X_n$が独立な可積分確率変数の族であれば，$\prod^n_{m=1} X_m$は可積分であり，

```math
E[\prod^n_{m=1} X_m] = \prod^n_{m=1} E[X_m]
```
#4. 証明
確率変数$X$を，正の部分と負の部分にわけ，$X = X^+-X^-$と表すと，

```math
\begin{align}
E[\prod^n_{m=1} X_m] &= E[\prod^n_{m=1} (X_m^+-X_m-)] \\
&= E[\prod^n_{m=1} X^+_m]+(-1) E[\prod^{n-1}_{m=1} X^+_m] E[X^-_n] +\cdots \\
&\qquad + (-1)^{n-1}  E[X^+_n] E[\prod^{n}_{m=2} X^+_m]
+ E[\prod^n_{m=1} X^-_m] \\
&= \prod^n_{m=1} E[(X_m^+-X_m^-)] = \prod^n_{m=1} E[X_m]
\end{align}
```
Linuxディストリビューションの種類についてまとめ

Yuheiです。

8月からインフラのスクールに通う予定ですが、現在、Linuxの勉強を進めています。

7月に入り、「[新しいLinuxの教科書](https://www.amazon.co.jp/gp/product/4797380942/ref=ppx_yo_dt_b_asin_image_o01_s00?ie=UTF8&psc=1)」を進めていますが、その中でLinuxディストリビューションについてよくわからないところがあったので、調べた内容をまとめました。



#Linuxディストリビューションとは？

Linuxカーネルとその他ソフトウェア群を１つにまとめ、利用者が、簡単にインストールや利用できるようにしたものを指します。

Linuxは本来カーネルのことを指しますが、カーネルだけではOSを使うことはできません。

そこで、
Linuxを利用しやすいようにアプリケーション等をパッケージにし、いつでも使える状態にしたものを

「Linuxディストリビューション」
と言います。

#Linuxディストリビューションの一例
例えば、自動車を動かすときは、
①エンジン
②タイヤ
③ハンドル
④ブレーキ
などがあり、初めて車を動かすことができますが、

Linuxディストリビューションは、上記と同じように、様々なアプリケーションを使って、初めてLinuxをOSないで動かすことができます。


#Linuxディストリビューションの種類
Linuxディストリビューションには、

①Red Hat系
②Debian系

上記の２種類があります。

それぞれの特徴ですが、
①は、主に商用向けのLinuxディストリビューションで、大規模システムの開発や運用で使われます。(こちらは主に有料版が使われていることが多い)

ネットユーザーからは、RedHatの名前から、「赤帽」と呼ばれているおり、

安定性があるLinuxディストリビューションです。


②はフリーで使えるLinuxディストリビューションです。
様々なCPUのサポートと、膨大なアプリケーションが特徴で、多くの企業のシステムに導入されています。

#それぞれのソフトウェア

Red hat系
①CentOS
②Red Hat Enterprice Linux
③Fedora

Debian系
①Debian GNU/Linux
②Ubuntu
③Linux Mint
④Edubuntu

上記がそれぞれで使われているソフトウェアですが、どのような特徴があって、どんな使われ方をしているのかは、また調べてからまとめたいと思います。

以上です。

#参考文献
[新しいLinuxの教科書](https://www.amazon.co.jp/gp/product/4797380942/ref=ppx_yo_dt_b_asin_image_o01_s00?ie=UTF8&psc=1)

#参照URL
[Linuxディストリビューションとは？](https://www.linuxacademy.ne.jp/lablog/infrastructure/266/)
[【目的別】初心者におすすめのLinuxディストリビューション7選](https://eng-entrance.com/linux_beginner_distribution#_RedHahttps://eng-entrance.com/linux_beginner_distribution#_RedHat)
[今更聞けない！CentOSとRed Hatの違いとは？](https://eng-entrance.com/centos_redhat#Red_Hat_Enterprise_Linux)
[Linuxとは](https://www.infraeye.com/study/linuxz0.html)
dockerでRails6開発環境構築

## 紹介する内容
- rails6開発環境をdockerでrails newから構築します
   - rails6.0.3.2です

## 結論
- rails6開発環境をdockerでrails newから構築するなら、Dockerfileやentrypointの内容作成タイミングに気を付ける必要があります


## 紹介始めます
### ディレクトリ構成
全体ソースコードは https://github.com/cheekykorkind/qiita-example/tree/master/rails/6/puma で確認できます

- 全体図
![allD.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247584/63e88367-e524-4310-0d96-1198a3d9aad2.png)


- `rails new . -d postgresql`で生成された部分
![railsNew.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247584/3f87c2f2-a83e-13b5-b3d7-a4016a99f99b.png)


## Rails6プロジェクト作成までの手順です
### docker composeがあるデレクトリーに移動しました
 - `cd qitta-example/rails/6/puma`


### Dockerfileとentrypoint.shに**dbマイグレーション、puma起動コマンド部分なし**で、rails起動させるdockerコンテナを起動しました  
 - railsをインストールするためです
 - railsがインストールされてない状態でentrypoint.shの`bundle exec`コマンドで`db:create db:migrate`や`rails s -p 3000 -b 0.0.0.0`などを行したらエラーになるからです
   - rails newコマンドを実行するタイミングで使ったDockerfileファイル
![commentoutDockerfile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247584/a5727a95-a121-5f16-80db-37e50ffc0d76.png)  


   - rails newコマンドを実行するタイミングで使ったentrypoint.shファイル
![commentoutEntrypoint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247584/b00104b3-c92d-3756-bc4a-29f156232132.png)


### rails起動させるdockerコンテナに入りました
 - `DOCKER_UID=$(id -u $USER) DOCKER_GID=$(id -g $USER) docker-compose up -d`
 - `docker exec -it rails-puma-web /bin/bash`


### rails newコマンドでインストールしました
 - `rails new . -d postgresql`
 - postgres使いますからrails newコマンドにpostgresを含めました


### database.ymlを修正しました
 - `host`をdocker composeに合わせて調整しました
 - 他の部分も調整しました


### Dockerfileとentrypoint.shにdbマイグレーション、puma起動コマンドを追加しました
 - railsがインストールされたから、dbマイグレーション、puma起動コマンドが問題なく起動できます

## Rails6動きました
実行コマンドです  

```
cd qitta-example/rails/6/puma
DOCKER_UID=$(id -u $USER) DOCKER_GID=$(id -g $USER) docker-compose up
```
![railsPuma.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247584/bf5ab8d9-bdde-0c72-a650-8ba403718b95.gif)
Nim（言語）で解く AtCoder Beginner Contest 063

[AtCoder Beginner Contest 063](https://atcoder.jp/contests/abc063)

# 経緯
新しい言語学びたい！
特に作りたいものは無い！
じゃあ競プロだ！

# 事前準備

```bash
brew install nim
```

# 実行手順
下記のどちらでも。

```bash
$ nim c hoge.nim
$ ./hoge
```

```bash
$ nim c -r hoge.nim
```

# [A - Restricted](https://atcoder.jp/contests/abc063/tasks/abc063_a)
- 複数空白区切り入力（int）

```nim:a.nim
import sequtils, strutils

let A = map(split(readLine(stdin)), parseInt)  # 複数空白区切り入力（int）
let total = A[0] + A[1]
if total >= 10:
    echo "error"
else:
    echo total
```

[提出リンク](https://atcoder.jp/contests/abc063/submissions/14932932)

## Pythonとの比較
```python:a.py
A = list(map(int, input().split()))
total = A[0] + A[1]
if total >= 10:
	print('error')
else:
	print(total)
```

記述方法がPythonと似ていたので、PythonにてNimのコードに似せて書きました。

<img width="727" alt="スクリーンショット 2020-07-04 13.51.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559964/e1b04443-e14f-9233-874d-330f322757a3.png">

提出を比較すると、実行時間とメモリにおいてはPythonより優れていることが伺えます。
コンパイル言語なので速いです。

# [B - Varied](https://atcoder.jp/contests/abc063/tasks/abc063_b)
- 単一入力(string)
- 重複検出

```nim:b.nim
import sets

let str: string = readLine(stdin) # 単一入力(string)

var charSets = initSet[char]()
var ok = true
for s in str:
    if charSets.contains(s):  # 重複検出
        ok = false
        break
    charSets.incl(s)

if ok:
    echo "yes"
else:
    echo "no"
```
[提出リンク](https://atcoder.jp/contests/abc063/submissions/14932786)

```nim
let str: string = readLine(stdin)
```
Nimは静的型付を使用できるので、上記のように型を明示的にして変数を宣言することができます。


# [C - Bugged](https://atcoder.jp/contests/abc063/tasks/arc075_a)
- 複数行入力（int）
- 剰余

```nim:c.nim
import strutils
import algorithm

let n = parseInt(readLine(stdin))
var A: seq[int] = @[]  # 空の配列
var total: int = 0

# 複数行入力（int）
for i in 0..<n:
    A.add(parseInt(readLine(stdin)))
    total += A[i]

if total mod 10 != 0:  # 剰余
    echo total
else:
    A.sort(system.cmp[int])  # 配列のソート
    var ok = false
    for a in A:
        if (total - a) mod 10 != 0:  # 剰余
            ok = true
            total -= a
            break
    if ok:
        echo total
    else:
        echo 0
```
[提出リンク](https://atcoder.jp/contests/abc063/submissions/14939682)


```nim
echo 11 div 3  # 3
echo 11 mod 3  # 2
```

Nimにおける除算、剰余演算は上記の通り。

# [D - Widespread](https://atcoder.jp/contests/abc063/tasks/arc075_b)
- 関数

```nim:d.nim
import sequtils, strutils

var n: int
var a: int
var b: int
var H: seq[int] = @[]

# 関数宣言（引数、戻り値）
proc f(num: int): bool =
    var total = 0
    for h in H:
        if h - b * num > 0:
            total += (h - b * num + a - b - 1) div (a - b)
    return total > num

# 関数宣言
proc main() = 
    let inputs = map(split(readLine(stdin)), parseInt)
    n = inputs[0]
    a = inputs[1]
    b = inputs[2]

    for i in 0..<n:
        H.add(parseInt(readLine(stdin)))

    var ng = 0
    var ok = 1000000010
    while (ok - ng) > 1:
        let mid: int = (ng + ok) div 2
        
        if f(mid):
            ng = mid
        else:
            ok = mid

    echo ok

main()
```

[提出リンク](https://atcoder.jp/contests/abc063/submissions/14940424)
XBRLからCSVの変換ツールがうまくインストールできなかった→何とか解決したのでメモ

有価証券報告書のデータを使って自分なりに分析をしたくなりました。
今まではedinetからPDFを見て値をスプレッドシートに書き込んで。。。みたいな地道な作業を少ししていたのですが、csvに項目がダウンロードできるツールがあるということで使ってみようと思いました。


まずは手順通りにインストールを試みました。
→jnlpファイルがダウンロードされる
→jnlpファイルを実行　→　音沙汰無し（プログラムも動いてなさげ）

jnlpについていろいろ調べ、

javaws -import XXX.jnlp

と打つとjnlpによってモジュールがインストールされるらしいと分かりました。

実行してみたところ、jarファイルが見つからないとのこと。。。。


jnlpのcodebaseに記述されているURL+jarファイルをブラウザで実行し、無理やりローカルにダウンロードし再度

javaws -import XXX.jnlp　を実行し正常にインストールできました！
【PHP7.4】laravelで日付をフォーマットする方法

備忘録として


## 開発環境
・ゲストOS: Windows10 home10
・ホストOS: WSL2 Ubuntu20.04
・PHP7.4
・Laravel Framework 7.17.2

##目標
・viewに日付を表示する際に(2020/07/03)という形で表示する

## 実装例

laravelでオブジェクトのcreated_atプロパティを表示すると、デフォルトでは以下のような形で出力されます。

コード

```php
<span>{{$item->created_at}}</span>
```
出力結果

```
2020-07-03 04:34:04
```

これでも機能的には問題ないですが、できればフォーマットを整えて表示できるようにしたいです。以下のようにするとフォーマットを変えて出力できるようになります。

コード

```php
<span>{{$item->created_at->format('yy/m/d')}}</span>
```

出力結果

```php
2020/07/03
```

[PHPの公式ドキュメント](https://www.php.net/manual/ja/function.date.php)には日付のフォーマット方法が多数紹介されています。


### 参考資料

[PHP公式ドキュメント](https://www.php.net/manual/ja/function.date.php)
初心者によるプログラミング学習ログ 360日目

#100日チャレンジの360日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
360日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます。<br>昨日の作業・やったこと↓<br>・寝る直前の筋トレ5分、kindle読書10分<br>・ブログ1記事作成<br>・プログラミング学習360日目1h<br>・<a href="https://twitter.com/4ralife_happy?ref_src=twsrc%5Etfw">@4ralife_happy</a>とオンライン勉強会</p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1279149824877551616?ref_src=twsrc%5Etfw">July 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Kobiton でスマートフォンのリモートテストを試してみた

# 概要

昨今のテレワーク推進の中、スマートフォン開発における課題となるのが実機による動作検証です。
多種多様なスマートフォン端末の準備・利用は、利用者それぞれがテレワークしていると難しくなります。

今回は上記課題を解決しうるリモート実機動作検証サービス [Kobiton](https://kobiton.com/) について調査しました。

## TL; DR

- Kobiton https://kobiton.com/ はリモート実機検証できるサービス
- ブラウザからリモートの実機を操作して手動・自動での動作検証が可能
- デスクトップアプリを利用すると、自分たちで用意した実機を使っての動作検証も可能
- 30日間無料トライアル

# リモートの実機による動作検証

Kobiton がクラウド上に用意した実機を使って動作確認を行うことができます。

## 利用可能な端末

利用可能な実機の一覧は以下のURLから参照できます。

https://docs.kobiton.com/devices-list/

2020年7月4日時点で208種類のAndroid・iOS端末を利用できます。

![端末一覧](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172889/031cdca9-da59-0bf1-2007-ff41b307d449.png)

ログイン後には以下のような画面から利用する端末を選ぶことができます。

![ログイン後端末一覧](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172889/f8140b95-7445-c936-832d-e1fb57e6149d.png)

## 動作検証セッション

### セッション中

動作検証中のセッションは以下のような画面です（以下の画面はAndroidの場合です）。
スワイプ等の操作は少々ラグがありますが、ブラウザから操作できていることを考えると十分でしょう。

![セッション](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172889/7f1836b3-e4d3-4828-a7b2-d2d322f29d42.png)

右上の「Install Apps」ボタンから、自分で登録したアプリをインストールすることができます。
これで自分で開発したアプリの動作確認ができます。

### セッションログ

セッション終了後はログが残ります。

![セッションログ一覧](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172889/59e2ce10-5def-6c71-c207-1ae2d3da1d93.png)

動作確認した動画も自動で残ります。

![セッションログ overview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172889/fba81f01-2bcd-2704-f22b-099ce209765a.png)

セッションの詳細では、どの時点でどんな操作をしたか閲覧することもできます。

![セッションログ details](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172889/9cbaeb9c-af81-052c-eeb6-f0eea71c8a60.png)

# 自分たちで用意した実機による動作検証

Kobiton がクラウド上に準備した端末は種類も多く便利ですが、不便な点もあります。
他の人が使用中だと使えなかったり、パブリックなネットワークにしかアクセスできなかったりします。

これらの問題点を解決するため、Kobiton のデスクトップアプリを介して自分たちで用意した実機を使用することができます。
上記の問題点を解決しつつ、端末の管理は Kobiton のクラウド上の端末と同様に行うことができます。

## デスクトップアプリの準備

詳細は[公式のドキュメント](https://docs.kobiton.com/device-lab-management/kobiton-desktop-app/getting-started-desktop-app/)を見ていただくとよいかと思います。

Kobiton のデスクトップアプリは Mac OS でのみ使うことができます。
Windows アプリはないようです。
iOS 端末にも対応するためでしょうか。

その後、 Android と iOS の設定を行います。
Android であれば JDK および Android SDK のパスを指定します。
iOS であれば Xcode のパスおよび証明書・プロビジョニングプロファイルの設定を行います。

## 端末の登録

端末を接続すると、 Kobiton のアプリケーションが端末にインストールされます。
基本的にはこれだけで問題ないです。

私が設定したときは、 追加で端末のデバイスロックを解除しておく必要がありました。
[Android](https://docs.kobiton.com/device-lab-management/kobiton-desktop-app/installation/setup-lab/android-setup-and-troubleshooting/)および[iOS](https://docs.kobiton.com/device-lab-management/kobiton-desktop-app/installation/setup-lab/ios-setup-and-troubleshooting/)のトラブルシューティングのドキュメントが整備されているので、設定がうまくいかないときはご確認ください。

## 端末の利用

設定が終われば、あとは Kobiton が提供する端末と同じように自分のローカル端末で動作確認を行うことができます。

![ローカルデバイス](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172889/f6d77206-d283-73a7-865e-4085674c1bad.png)

# まとめ

今回は Kobiton による実機端末を利用した動作確認について簡単に紹介しました。
Kobiton が提供する端末に加えて、自分の端末を利用することができます。

Kobiton ではさらにテストの自動実行や各種便利APIの利用ができるようです。

Free Trial もあるため、興味が湧きましたらぜひ試して記事を公開してください :pray:
vue.js 動的に取得した code を hilight する

vue.jsでコードをハイライトしたい。
しかし、動的に取得したデータをハイライトできない。

cdn から直接読み出し、ハイライトする方法を取る。



```vue.blade

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

```

以下の感じ。
getProfileでソースコード `code` タグ入りのHTMLを読み込むような。

```hoge.vue

<style>

</style>

<template>
    <div>
        <div v-html="post"></div>
    </div>
</template>


<script>

    export default {

        data () {
            return {

                post:''
            };
        },

        created(){
            this.getProfile();
        },


        methods: {


            highlight() {
                document.querySelectorAll('code').forEach((block) => {
                    hljs.highlightBlock(block)
                })
            },

            getProfile(){


                let dataform = new FormData();
                dataform.append('screen_name',this.$route.params.screen_name);

                axios.post('/profile/view/', dataform).then(e => {

                    this.post = e.data.res.profile.body;
                    this.$nextTick(() => {
                        this.highlight();
                    })

                }).catch((error) => {

                    console.log(error);
                    console.log("プロフィール読み込みエラー");
                });
                //


            },
        }
    }
</script>


```
【Vue.js】renderについて_その１

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

#render
テキストだけではなくHTMLのタグを使用して要素を組み込みたいような場合は。{{}}によるテキスト表示は難しいです。
このような場合は、「render」プロパティを使うことでHTMLのエレメントを生成し組み込むことができるようになります。

```
render: (element)=>{・・・・描画処理・・・・}
```

##アロー関数
(○○)=>{・・・・}というのは「アロー関数」という特別な書き方であり、
「名前のない（無名の）関数」を少し違った書き方で表したものです。

#仮想DOM
実際のDOMに完璧に対応しており、常に実際のDOMと仮想DOMは同様の状態になるように働きます。仮想DOMのコンテンツやプロパティを操作すると、それに対応する実際のDOMの内容が更新され、HTMLの表示タグが変更されます。

#参考書籍
Vue.js & Nuxt.js超入門
https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339
CircleCIに環境変数を渡す方法



長い時間躓いたのでこちらに残します。
間違いがありましたら是非ご指摘ください。


ローカル環境でRspecのテストは通るのに何故かcircleCIではレッドになる。。

様子を見ていると環境変数がうまく渡せていないようでした。


###やったこと

####.envファイルに環境変数記入

```
HOGE= hogehoge
```


####CircleCIのProject SettingsからEnvironment VariablesでENVを設定
![スクリーンショット 2020-10-09 12.07.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612179/e317aebc-6d36-778f-f6b7-c2e92c1bba92.png)


##Docker-compose.ymlに記載

docker-compose.ymlでの記入が足りなかった

```
web:
  environment:
    HOGE: ${HOGE}
```

で私はこれで無事に通るようになりました！
そもそもDocker立ち上げる時に変数を渡せていなかったのかな・・・
npm ERR! code ELOOP が出たときの対処法

npm install を使った時に

<code>npm WARN checkPermissions Missing write access to /Users/[ユーザー名]/node_modules/[ファイル名]
npm WARN [ユーザー名]@1.0.0 No description
npm WARN [ユーザー名]@1.0.0 No repository field.
npm ERR! code ELOOP</code>

というエラーが出現してハマりました。これを仮説で解決できたので同じエラーでハマった方向けに書いておきます。

まず一番上にnpm WARN checkPermissions Missing write access to /Users/[ユーザー名]/node_modules/[ファイル名]

と書いてあります。

この意味は「ファイルにアクセスできない」という意味です。

この理由として考えられるのは

①ファイルへのアクセス権が無い
②ファイルそのものが無い
③ファイルパスがおかしい

のどれかです。

①の場合の対処法は公式にも書いてあります。

https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

ただこれはエラーコードが違いますし、実際にやってみても治りませんでした。

②の場合はファイルをどうにかして追加できれば治りそうですが、この場合ではインストールそのものができないので解決は無理です。

そこで、Node.jsを一旦全て削除することにしました。(パスを書き換えるだけで解決できそうでしたが、ファイルの場所がよく分からないのと確実に治すためにそうしました。)

<code>/Users/[ユーザー名]/node_modules/[ファイル名]</code>
に関連するファイルを全て削除しました。

具体的には

.npm-global
.nodebrew
.npmrc
.zprofile
.node-modules

の５つです。

さらに、
https://qiita.com/gaipoi/items/406d6c4b1ccd1733318a
に従ってNode.jsを全て削除しました。

その後インストーラーでNode.jsを再インストール。

最後にターミナルで
<code>export NODE_PATH=/usr/local/lib/node_modules</code>
を打ち込むと解決できました。

おそらく前に他のパッケージをインストールする時にパスを弄ったのが原因ではないかと思っています。
VSCode, Visual Studio 2019 での CMake bootstrap 設定のメモ

## 背景

* cmake 叩いて sln ファイルとか作るのめんどい
* VSCode, VS2019 で標準で cmake を使う方法と組み合わせたい

## CMake 3.20 以降は Presets がおすすめ.

CMake 3.19 からサポート(3.20 でより改善?)された CMakePresets.json を使うのが推奨です!

https://learn.microsoft.com/en-us/cpp/build/cmake-presets-vs?view=msvc-170



## VSCode 

最新の VSCode なら CMakePresets 読めるはずです.

以下は古い情報で CMakePresets が使えない場合に検討ください.

https://github.com/microsoft/vscode-cmake-tools/blob/develop/docs/cmake-settings.md

プロジェクトフォルダの `.code/settings.json` に CMake 引数記述します.
設定を変えて cmake bootstrap したいときは, variant を使う... のかな?

https://github.com/microsoft/vscode-cmake-tools/blob/develop/docs/variants.md

## Visual Studio 2019

2019 16.10 以降から `CMakePresets.json` が推奨になりました(内部で読み込んでいるため CMake のバージョンには依存しない)

https://learn.microsoft.com/en-us/cpp/build/cmake-presets-vs?view=msvc-170

以下は古い情報です.

カレントディレクトリに `CMakeSettings.json` があると, それを読んで cmake bootstrap するようになりました.

https://docs.microsoft.com/en-us/cpp/build/customize-cmake-settings?view=vs-2019

設定は複数(variant)持てます.
has_secure_passwordとpresenceとallow_nilと私。

Railsチュートリアル（第6版）の10.1.4 -TDDで編集を成功させる でつまり、
午前中いっぱいかけて解消させた疑問の備忘録です。
私以外の人はこんなところでつまらないかもしれないですが・・

##つまったところと疑問点
####つまったところ：パスワードが空のままでも更新できるようにする

「ユーザー情報を編集する際、いちいちパスワードを入力するのは不便なので
パスワードを変えないときは、入力しなくてもユーザー情報を更新できるようにする。」
という内容。

具体的には、現状

```ruby:user.rb
class User < ApplicationRecord
  has_secure_password
  validates :password, presence: true, length: { minimum: 6 }
```

となっていて、nilや空文字、6文字未満のパスワードは受け入れられないところを

```ruby:user.rb
class User < ApplicationRecord
  has_secure_password
  validates :password, presence: true, length: { minimum: 6 }, allow_nil: true
```

と、`allow_nil`というオプションで、パスワードが空だった時の例外処理を与える（バリデーションをスキップする）よ。

ということでした。

何が疑問なの？という方、どうかこの記事をそっと温かくスキップしてください:see_no_evil:


####疑問点：そもそも、presence: true書く必要あったの？？

なぜにそんな疑問が生まれてしまったのかというと、チュートリアル中の、
「allow_nilによって新規登録時にパスワードがなくても登録できちゃう！？と心配になるけど、
`has_secure_password`がオブジェクト生成時に存在性を検証するようになっているから、
その心配もいらないよ！」
という文。
（簡略化してます。語弊があったら申し訳ないです。。）

以下、私の疑問と疑問が生まれる原因となった勘違いです。

- 新規登録時はパスワード必須にしたい → `has_secure_password`で検証できる
- 編集時はパスワード入れなくても更新できるようにしたい → `has_secure_password`はオブジェクト生成時にのみ、存在性を検証するので、編集時はパスワード入れなくてもOK！
⇒ あれ、`has_secure_password`だけで完結する？`presence: true`いらなくない・・？

大事なことを見落としていたわけですね。


##結論：編集時、空の場合はスキップしたいが、空文字の場合はバリデーションかけねば。

改めて、下記3点を明確にしておきたいと思います。

- `has_secure_password`：DBにレコードが生成された時だけ存在性のvalidationをおこなう
- `presence: true` : 値が`nil`や`空文字`でないことを確認
- `allow_nil` : 対象の値が`nil`の場合にvalidationをスキップ = 値が`空文字`の場合はvalidationにひっかかる

つまり、`presence: true`は書いておかないと、
「編集時、パスワード欄にスペースを打ちこまれちゃった場合にも更新ができてしまう」
のでしたね・・



##どうやって疑問を解消したのか
「`presence: true`いらなくない・・？」と思っていたので
`presence: true`を消して、下記の状態でテストを回してみました。

```ruby:user.rb
class User < ApplicationRecord
  has_secure_password
  validates :password, length: { minimum: 6 }, allow_nil:true
```

すると下記統合テストはGREENに。

```ruby:test/integration/users_edit_test.rb
  test "successful edit" do
    get edit_user_path(@user)
    assert_template 'users/edit'
    name = "Foo Bar"
    email = "foo@bar.com"
    patch user_path(@user), params: { user: {name: name,
                                            email: email,
                                            password: "",
                                            password_confirmation: "" }}
    assert_not flash.empty?
    assert_redirected_to @user
    @user.reload
    assert_equal name, @user.name
    assert_equal email, @user.email
  end
```

やはり`presence: true`いらないのか・・？と思ったそのとき、
別のテストが私に思い出させてくれました。

```ruby:user_test.rb
  test "password should be present (nonblank)" do
    @user.password = @user.password_confirmation = " " * 6
    assert_not @user.valid?
  end
```
こちらがしっかりREDになっていた！

まずこのテストはユーザを新規登録せずにパスワードの値を空文字に設定しているため
`has_secure_password`の検証にはひっかかりません。

そして`presence: true`を消してしまったがために、空文字入力がOKになり、
ユーザーが有効になってしまったのでテストがREDになっていたのでした。

ここでしっかり、`" " * 6`と**空文字**がテストされていたおかげで
自分の勘違いに気づくことができました。。



同じようにうっかりここで詰まってしまった方のご参考になれば幸いです。



##参考
- [Railsチュートリアル](https://railstutorial.jp/)
- [Railsガイド /Active Record バリデーション](https://railsguides.jp/active_record_validations.html#presence)
XcodeでSwiftのバージョンを確認する

★XcodeでのSwiftバージョン確認方法

現在Xcodeで開発しているものは、
果たしてSwift4・・？　それとも、5・・・？というときの確認方法をまとめました！

①[プロジェクト名（キャプチャ内ではmemo）]を選択
②[Build Settings]▶︎TARGETS＞[memo]▶︎[Basic]▶︎[Levels]と順に選択
③検索窓に[Swift]と入力してEnter
④[Swift Language version]が該当箇所！（キャプチャではSwift5）


<img width="1277" alt="スクリーンショット 2020-07-04 19.53.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667857/889e29b0-25fb-428b-be2d-cacc33c47699.png">


ちなみに・・・
　インストール済みのSwiftバージョンの確認方法は以下

①ターミナルを起動
②以下をコピペ
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swift -v
③Enter！