OmniAICreator/Qiita-1.07M huggingface dataset:
Locustで詳細な統計情報を取得したり出力内容を編集したりする

# はじめに
locustはお手軽で良い。サクサクっと性能測定して、自分でグラフを作るまでもなくWebUIで動作が確認できる。
でも、WebUIだと95%タイルと中央値しか表示されなくて物足りないんじゃー！平均とかも確認させろ！な人向け。

# やること
起動時のマスターノードのオプションを以下のようにすること。以上。簡単！

```shell-session
locust --master --csv=log/test --csv-full-history
```

これで、(起動ディレクトリ)/log 配下に以下のようにファイルが出力されるようになる。

```shell-session
/locust$ ls log
test_failures.csv  test_stats.csv  test_stats_history.csv
```

コンテナ起動している場合、素のままだとログファイルがコンテナに閉じ込められてしまうので、docker-compose等で

```YAML:docker-compose.yml
services:
  locust-master:
    volumes:
      - ./log:/locust/log
```

とか定義しておこう。

これで

```test_stats_history.csv
Timestamp,User Count,Type,Name,Requests/s,Failures/s,50%,66%,75%,80%,90%,95%,98%,99%,99.9%,99.99%,100%,Total Request Count,Total Failure Count,Total Median Response Time,Total Average Response Time,Total Min Response Time,Total Max Response Time,Total Average Content Size
1603540111,17,GET,/xxxxx/,0.000000,0.000000,2,2,3,3,4,28,28,28,28,28,28,11,0,2,4.694659181702511,1.4053259992579115,28.377445999467454,14265.0
1603540111,17,GET,/yyyyy/,0.000000,0.000000,3,3,3,4,9,9,9,9,9,9,9,10,0,3,3.410866200010787,2.1423650005090167,8.981184999356628,93670.0
1603540111,17,GET,/zzzzz/,0.000000,0.000000,2,2,3,3,4,6,19,24,24,24,24,76,0,2,2.9205118157374512,1.2653539997700136,24.40452499922685,4668.0
1603540111,17,,Aggregated,0.000000,0.000000,2,3,3,3,4,8,24,28,28,28,28,97,0,2,3.1722557834523895,1.2653539997700136,28.377445999467454,14931.783505154639
(以下略)
```

な感じで、リソース単位の集計を取ることができるようになる！

# 補足
ログに出力するパーセンタイルも調整可能っぽい。

[公式ドキュメント](https://docs.locust.io/en/stable/configuration.html#customization-of-statistics-settings)によると、

```Python
import locust.stats
locust.stats.CONSOLE_STATS_INTERVAL_SEC = 15
```

みたいな感じで ```PERCENTILES_TO_REPORT``` を変更することができるようだ。

ドキュメントが不親切でどう変更したら良いかわからないので、ソースを見てみると

```Python
grep PERCENTILES_TO_REPORT /usr/local/lib/python3.9/site-packages/locust/stats.py
PERCENTILES_TO_REPORT = [0.50, 0.66, 0.75, 0.80, 0.90, 0.95, 0.98, 0.99, 0.999, 0.9999, 1.0]
```

な感じで書かれているので、locustfile.py に

```Python
import locust.stats
locust.stats.PERCENTILES_TO_REPORT = [0.95]
```

を書き加えてオーバーライドすると

```
Timestamp,User Count,Type,Name,Requests/s,Failures/s,95%,Total Request Count,Total Failure Count,Total Median Response Time,Total Average Response Time,Total Min Response Time,Total Max Response Time,Total Average Content Size
1603542253,4,GET,/xxxxx/,0.000000,0.000000,22,2,0,2.2806119995948393,12.121530499825894,2.2806119995948393,21.96244900005695,14265.0
1603542253,4,GET,/yyyyy/,0.000000,0.000000,3,2,0,2.666434999810008,2.6112880000255245,2.556141000241041,2.666434999810008,93670.0
1603542253,4,GET,/zzzzz/,0.000000,0.000000,28,4,0,2.067968999654113,8.805921999964994,2.067968999654113,27.854616000695387,4668.0
1603542253,4,,Aggregated,0.000000,0.000000,28,8,0,3,8.086165624945352,2.067968999654113,27.854616000695387,29317.75
```

お、なんかスッキリした出力になった！
C#_繰り返し


C#における繰り返し処理の書き方をまとめて紹介します。

繰り返しには **"for文"**, **"foreach文"**, **"while文"**, **"do-while文"** が存在します。
ひとつずつ見ていきましょう

## for文

for文の書き方は以下のようになります。

```C#:Program.cs
// for (初期化式; ループ条件式; 更新式)
for (int i = 0; i < 3; i++)
{
    // ループ処理
    Console.WriteLine(i);
}
```

```TXT:出力
> 0
> 1
> 2
```

for文は次の順番で実行されます

1. 初期化式
2. ループ条件式評価
3. 2.が偽 ⇒ 終了
4. 2.が真 ⇒ ループ処理実行
5. 更新式実行
6. 3.に戻る

つまり、最初からループ条件式が偽であれば、一度もfor文の中に入らず、ループ処理を実行しないこともあります。
上記のfor文はi=0から始まっていき、iが3以上になるまで内部の処理を繰り返すことになります。

## foreach文

foreach文ではfor文と違いループ条件や更新の式がなく、コレクションの全要素に対してループを回します。

```C#:Program.cs
int[] arr = new int[] { 2, 4, 6 };
//foreach (一時変数宣言 in コレクション)
foreach (int even in arr)
{
    //ループ処理
    Console.WriteLine(even);
}
```

```TXT:出力
> 2
> 4
> 6
```

単純なfor文と比べて式が簡素になる反面、foreachでループしている間はコレクションへの変更・追加ができなくなります。

```C#:Program.cs
int[] arr = new int[] { 2, 4, 6 };
for (int i = 0; i < arr.Length; i++)
{
    arr[i] /= 2;
}
foreach (int even in arr)
{
    Console.WriteLine(even);
    // 変更不可
    // even *= 2;
}
```

```TXT:出力
> 1
> 2
> 3
```

## while文

for文のような初期化子を抜きにしてある条件を満たしている間繰り返すような処理を書く場合、while文を使用します。

```C#:Program.cs
// while (条件式)
bool loop = true;
while (loop)
{
    // loop = 何らかの処理
}
```

loop変数がtrueの間while文は繰り返し続け、loopがfalseになった段階で繰り返しを終了します。

## do-while文

do-while文もwhile文とほとんど一緒ですが、最初だけ挙動が異なります。

```C#:Program.cs
bool loop = true;
do
{
    // loop = 何らかの処理
} while (loop);
```

こちらもloopがtrueの間繰り返し続けることになりますが、例え最初からloop変数がfalseだったとしても、最初の一回だけは実行されます。
必ず初回は処理をして、その結果によって繰り返しの判定を行いたい時などはdo-while文が有用です。

ただし、while文やdo-while文はプログミングのミスにより"無限ループ"を引き起こしやすいので、使用するときは繰り返しの停止条件が正しいのか、よくよく注意する必要があります。

今回はここまで
【初心者でもわかる】imgの画像がぼやける理由と対策

#どうも7noteです。なんだか画像がぼやけてるような気がする時の対処法

imgタグの画像は**画像データと全く同じpxに指定するのが基本！**

画像データが大きいが、無理に150pxの幅の箇所に画像を使用してしまうとぼやけてしまいます。（おそらくChromeのみ）

## 画像がぼやけないためには

### ①使う予定の場所のpxに合わせて画像をトリミング

**一番正攻法**です。
ただ、レスポンシブに対応しなければならない場面もあると思うので、実際にはPCでの指定よりも大きなサイズの画像が必要になうｒことが多いです。

```style.css
img {
  width: 100px;  /* 画像データの横幅も100px */
}
```

### ②画像データを使う場所の2倍の大きさで書き出す。

**imgの特徴として、元データの半分のサイズで使う場合などは比較的綺麗み見えます。**

レスポンシブサイトを作るときは、スマートフォンの画像サイズに合わせて画像を書き出す必要があります。
スマホは倍の画角の画像が必要になるため、横幅350pxのスマホに幅いっぱい画像を表示する場合最低でも700pxの画像が必要になります。
しかし、パソコンでは幅を400pxの場所に画像を使う場合、画像は700pxに対して使う場所は400pxと綺麗に割りきれません。

そこで、画像サイズを800pxで予め書き出しておくことで、PC表示でもスマホでも綺麗に見せることができます。

### ③画像をPC用とスマホ用2種類に分ける

多くの場合、レスポンシブサイトのため少しでも軽くする意図で1枚の画像でやろうとしますが、画像の綺麗さを優先するのであればPCもスマホも別の画像として登録しておいて呼び出す方が良い出しょう。

```html:index.html
<img src="./images/img_pc.jpg" class="pc_img">  /* pc用の画像 */
<img src="./images/img_sp.jpg" class="sp_img">  /* スマホ用の画像 */
```

```css:style.css
.pc_img {
  display: inline;
}
.sp_img {
  display: none;
}

@media screen and (max-width: 700px) {
  .pc_img {
    display: none;
  }
  .sp_img {
    display: inline;
  }
}
```

※クラスを使わずに、pcとスマホの画像を自動で切り換える方法もあるので、今度記事にします。

### ④CSSで解決

```css
img {
  -webkit-backface-visibility: hidden;
}
```

これが一番簡単かも。

> 参考元：https://creativememomemo.com/chrome_image_blur/


## まとめ

CSSで一応解決できるので、いろいろ紹介したけど結局④の方法が一番良いかも。
③のpcとスマホで画像を切り換える方法は全く違う画像に切り換える方法としても使えるのでむしろそっちの使い方の方が主流かも。

なんにせよ気兼ねなく自由に画像を書き出してそのまま使えるようになる時代になるといいですね。

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

**コメントにてツッコミをいただきましたので、併せてご確認頂けると幸いです**


`変数a`を定義し、１を入れた時
それぞれメモリ空間上に配置される

```js:def.js
let a = 1;
```

aは1への参照(住所みたいなイメージ、メモリ空間上のアドレス)を保持している

![スクリーンショット 2020-10-23 16.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174757/09f7a371-64c9-26c5-9b75-ec244cacc63f.png)


`変数b`に`変数a`をコピーした時

```js:def.js
let a = 1;
let b = a;
```

値の1がコピーされ、その参照を持つ変数bが作られる

![スクリーンショット 2020-10-24 12.49.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174757/583f9f21-ea9e-83f0-b16b-3ac7bfd56d3a.png)

それぞれ別の参照先なので、変数bに再代入しても、変数aは影響を受けない
参照先が張り替えられるだけ

```js:def.js
let a = 1;
let b = a;
b = 2;

console.log(a,b); // 1 2
```

![スクリーンショット 2020-10-24 13.24.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174757/b1ff7955-fc69-3d31-613e-254ba5b98a39.png)

#オブジェクト

```js:def.js
let user = {
    name: '山田'
};
```
上記のようなオブジェクトが定義されている時

変数`user`は「オブジェクトへの参照」は対して参照をもつ
「オブジェクトへの参照」というのは、オブジェクトのプロパティなどを示すアドレス

オブジェクトのプロパティはそれぞれの値への参照をもちます
![スクリーンショット 2020-10-24 13.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174757/fb932048-6806-aa27-e22a-416d14bdc2ec.png)

このオブジェクトをコピーします

```js:def.js
let user = {
    name: '山田'
};

let secondUser = user;
```

ここでコピーされるものは「オブジェクトへの参照」です
「オブジェクトへの参照」への参照をコピーし、変数`secondUser`はそれへの参照を持ちます

![スクリーンショット 2020-10-24 13.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174757/ab4a0dea-e61a-5480-01c1-bb20923340fc.png)

なので、オブジェクトの参照はそのまま残っているので、書き換えると両方変わります


```js:def.js
let user = {
    name: '山田'
};

let secondUser = user;

secondUser.name = '田中';

console.log(user.name, secondUser.name); // 田中　田中
```

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="natsume0718" data-slug-hash="mdERXrr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Object Reference">
  <span>See the Pen <a href="https://codepen.io/natsume0718/pen/mdERXrr">
  Object Reference</a> by natusme (<a href="https://codepen.io/natsume0718">@natsume0718</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

これは、メソッドの引数の時も同様の挙動となる

#参考
[【JS】初級者から中級者になるためのJavaScriptメカニズム] (https://www.udemy.com/course/javascript-essence/) の 参照とコピー


<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
ラムダ、ソート、無名関数の例

import java.util.*;
import java.util.function.Predicate;
import java.util.Comparator;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

// ソートのテスト
// https://techacademy.jp/magazine/34841
 class Test1 {
    public static void ソートテスト() {
    	
    	//小さい順
    // 	List<Integer> num1 = new ArrayList<>(Arrays.asList(100,35,72));
        
    //     Collections.sort(num1);
        
    //     for (Integer a : num1) {
    //         System.out.println(a);//35 72 100
    //     }
        
    	List<Integer> num1 = new ArrayList<>(Arrays.asList(72,100,86));
        
    	Collections.sort(num1,new java.util.Comparator<Integer>(){
            @Override
            public int compare(Integer i1,Integer i2) {
                       
                System.out.println(i1);

            	return i2 - i1;
            }
        });
        
        
        // for (Integer a : num1) {
        //     System.out.println(a); //100 72 35
        // }
    }
}

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        Test1.ソートテスト();
        
me test = new me();
        
        //その１　メソッドチェーンの話
        // つまりページの数のインデックス範囲をしぼりこみ
        // 一覧を作る例　１００件５ページ目で１０件ずつなら　５０－６０とか
        // 要素を取り出す取り出してリスト形式にする

        // showUserList = IntStream.range(0, allUserList.size())
        // .filter(index -> index >= (currentPage - 1) * showNumber && index < currentPage * showNumber)
        // .mapToObj(allUserList::get).collect(Collectors.toList());
      String 結果= test.test().substring(2,4);
      
      String 結果= test.test();
      
      
      System.out.println(結果);
       
      //その２　ラムダ式、無名関数の話
      //index -> index >= (currentPage - 1) * showNumber && index < currentPage * showNumber
      //ここの処理はメソッド渡しと言って、メソッドにメソッドそのものを渡す事が出来ます書き方はラムダ式、無名関数とも呼ばれます。
       
    //   中身を書き直すと
    //   ○○メソッドで引数がint型のarg変数で処理はargと１を比較するという意味です、全部省略するとこのような書き方になります
        boolean keltuka = test.test2(arg -> arg == 1);
        System.out.println(keltuka);
        
        //Comparatorインターフェースとは(compareToとは一致しているか調べるメソッドです)
    
//     o1 < o2 なら -1

// o1 == o2 なら 0

// o1 > o2 なら -1
    //     Comparator<String> c = (s1, s2) -> s1.compareTo(s2);
    //     System.out.println(c.compare("ABC", "ABC"));
    }
}


class me{
    public String test()
    {
        System.out.println("kazuki");
        return "kazuki";
    }
    
    public boolean test2(Predicate<Integer> predicate)
    {
        Integer argument = 1;
        
        if (predicate.test(argument)) {
            return true;
        } else {
            return false;
        }
    }
}
JavaScripの復習

### 基本を見直しました。
if文をswich文に、書き直して見ました。

### if文のコード
```javascript
var firstName ="yourname";
var age = 18;

if(age < 15){
    console.log(firstName + 'is a junior high school student');
} else if(age >=15 && age < 18 {
    console.log(firstName + 'is a high school student');
} else if(age >=18 && age < 20) {
  console.log(firstName + 'is a university student');  
} else {
    console.log(firstName + 'is a salary man');
} 
}
```
これをswich文に書き直すと

### swich文
```javascript
var firstName = "yourname";
age = 24;
switch (true){
    case age < 13: 
        console.log(firstName + 'is a junior high school student.');
        break;
    case age >=13 && age < 18: 
        console.log(firstName + 'is a high school student.');
        break;
    case age >=18 && age < 22: 
        console.log(firstName + 'is a university student.');
        break;
    default:
        console.log(firstName +'is a salaryman.');     
}  
```
出たエラーメッセージ
```
Uncaught SyntaxError: Unexpected end of input
```
### 自分で試したこと
ageの指定範囲を変えましたが、エラーがでます。
[chown]ファイルやディレクトリの所有者を変更する方法

# chownコマンドとは？
ファイルやディレクトリのユーザーやグループの所有権を変更するためのコマンド。

```

$ chown [オプション] ユーザーorグループ ファイルorディレクトリ
```

##使い方

1.対象のファイルのユーザー・グループの所有権を確認する。
※実行結果からユーザー所有権は「sample」グループ所有権「sample」であることがわかります。

```ruby

$ ls -l
#=> -rw-rw-r— 1 sample sample 47 5月 21 08:42 test1.htmle.erb
```

2.ユーザー所有権を変更するには以下のように実行します。

```ruby

$ chown root test1.htmle.erb

$ ls -l
#=> -rw-rw-r— 1 root samurai 47 5月 21 08:42 test1.htmle.erb
```

3.グループの所有権も変更する場合には引数にセミコロン「:」をはさんで「ユーザー：グループ」とする。

```ruby

$ chown root:root test1.htmle.erb

$ ls -l
#=> -rw-rw-r— 1 root root 47 5月 21 08:42 test1.htmle.erb
```

##オプション一覧

| オプション | 説明 |
|:-:|:-:|
| -c  | 所有者情報を変更された場合に詳細を表示する  |
| -f  | エラーメッセージを表示しない  |
| -h  | シンボリックリンクの所有権も変更する  |
| -R  | ディレクトリ内の所有権も変更する  |
| -v  | 所有者変更情報の詳細を表示する（変更されなかった場合も表示）|
[Scala] 値クラスについてまとめ

## なぜ書こうと思ったのか

AnyValに関して知識なかったので、公式ドキュメントのことを自分なりにまとめてみた。
てか、ほぼ公式ドキュメントと同じ。

## ソース

[公式ドキュメント「 値クラスと汎用トレイト」](https://docs.scala-lang.org/ja/overviews/core/value-classes.html)
詳しく書かれているのでありがたい。


### 値クラスの定義

AnyValを継承することで値クラスを定義できる。

```scala

class UserId(val value: string) extends AnyVal
```
値クラスにすることで、実行時のオブジェクトのメモリ割り当てを回避できる。
つまり、ヒープにメモリを割り当てをすることをしなくても良くなるので、実行時のオーバーヘッドを無くせる。

上記例では、コンパイル時にはUserIdという型だが、実行時にはString型になる。


### 制約

値クラスには制約が多くあるので、それを見ていく。

##### 一つのパラメータしか受け取れない

```scala
// これはできない
class UserId(val value1: String, val value2: String) extends AnyVal
```


##### defだけ定義できる

```scala

class UserId(val value: String) extends AnyVal {
  def print(): Unit = println(value)
}
```


##### 汎用トレイトのみ継承できる

他のクラスなどは継承できない。

```scala

trait Printable {
  def print(): Unit
}

class UserId(val value: String) extends AnyVal with Printable {
  override def print(): Unit = println(value)
}
```


## 値クラスの用例

### 拡張メソッド

implicit classで拡張メソッドを定義する時に、値をクラス定義すると実行時にオーバーヘッドのない拡張メソッドを作成できる。


```scala

implicit class RichInt(val value: Int) extends AnyVal {
  def toHexString: String = java.lang.Integer.toHexString(value)
}

3.toHexString
```

上記の例で言うと、`toHexString`メソッドを利用するために、RichIntをインスタンス化する必要がなくなると言うこと。なので、実行時のオーバーヘッドをなくせる。


### 正当性

実行時には、オーバーヘッドを無くしながら、実装時には型安全を得ることができる。

```scala
class Meter(val value: Double) extends AnyVal{
  def +(x: Meter): Meter = Meter(value + x.value)
}

val x = new Meter(3.0)
val y = new Meter(4.0)
val z = x + y
```

実装時（コンパイル時）には、Meter型は守られるので、安全に実装できる。
実行にはMeter型は消えるので、オーバーヘッドがなくなる。


## メモリ割り当てが必要になる場合

### (1) 他の型として利用する場合

以下のように、親型（`Distance`）で関数のパラメータを受け取る場合は、`Meter`型はインスタンス化される。

```scala

trait Distance

class Meter(val value: Double) extends AnyVal with Distance

def add(x: Distance, y: Distance): Distance = ???

add(new Meter(3.0), new Meter(4.0))
```


以下のようならインスタンス化されない

```scala
def add(x: Meter, y: Meter): Meter = ???

add(new Meter(3.0), new Meter(4.0))
```

ちなみに、型パラメータの場合もメモリ割り当てが必要になる。


```scala
def add[A](x: A, y: A): A = ???

add(new Meter(3.0), new Meter(4.0))
```


### (2)配列の中に組み込まれる場合

以下の場合、内側のDouble型を格納するのではない。
Meter実体を格納する。

```scala

val m = new Meter(3.0)
val array = Array[Meter](m)
```

### (3) パターンマッチで型でマッチさせる場合

型検査する場合は、インスタンス実体が必要になる。

```scala
val p = new Meter(3.0)

p match {
  case Meter(3.0) => println("3です。")
  case Meter(_) => println("3以外です。")
}
```


以下のように値クラスのコンパニオンオブジェクトで、applyをオーバーロードしてもMeterはインスタンス化されない！？？


```scala
case class Meter(val value: Double) extends AnyVal

object Meter {
  def apply(value: Double): Meter = new Meter(value + 1.0)
}

val m = Meter(3.0)

```



## まとめ
一つずつ知識が増えていく。
Cakephp2でボタンにクエリ付きのリンクを表示させたかった

ボタンっていう形を保ってクエリ付きのURLを生成させたかった。

他にもボタンの作り方はあってやり方はあるのだろうが、自分にとってはこの書き方が都合が良かったので記事にする。
#コード
``` php
<?php
　//urlの生成
  $queries = ["id"=>$data['model']['id'], "name"=>$data['model']['name']];
  $url = $this->Html->url(['controller'=>'action', 'action'=>'action', "?"=>$queries]); 
?>
<!-- ボタン生成 -->
<button type="button" onclick="location.href='<?= $url ?>'">button</button>

```

[FormHelper - 2.x]
(https://book.cakephp.org/2/ja/core-libraries/helpers/form.html)
実際に書いてみると、何に悩んでいたのかわからないレベルに当然っちゃ当然だなって感じになった。


#サンプルコード
``` php

<?php
/* Controller.php */
public function index(){
 //仮のデータ
 $datas = array(
     0 => array(
         'model' => array(
             'id' => 0,
             'name' => 'zero'
         ),
     ),
     1 => array(
         'model' => array(
             'id' => 1,
             'name' => 'one'
         ),
     ),
     2 => array(
         'model' => array(
             'id' => 2,
             'name' => 'two'
         ),
     ), 
  );
  $this->set('datas', $datas);
}

?>

<!-- view.ctp -->
<table>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>buttons</th>
    </tr>
    <?php foreach($datas as $data): ?>
        <tr>
            <?php
                $queries = ["id"=>$data['model']['id'], "name"=>$data['model']['name']];
                $url = $this->Html->url(['controller'=>'controller', 'action'=>'action', "?"=>$queries]); 
            ?>
            
            <td><?= $data['model']['id'] ?></td>
            <td><?= $data['model']['name'] ?></td>
            <td><button type="button" onclick="location.href='<?= $url ?>'">button</button></td>
        </tr>
    <?php endforeach; ?>
</table>
```

#実行結果
![スクリーンショット 2020-10-24 20.46.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/750183/5a190259-80ea-6ecd-f44e-a8f21551248b.png)
上記のサンプルコードはこのような表となって出力されるはず。

![スクリーンショット 2020-10-24 20.47.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/750183/e31c169b-2bff-b414-07d2-929ac5cbb84b.png)
ボタン要素には、リンクが生成されてそこから飛ぶようになってる事が確認できた。
Unityでのドラッグアンドドロップ

学習記録として、残しておきます。

<h2>準備</h2>
図のような構成にします。
![2020-10-24_21h03_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672817/c630f7d2-f759-98a4-b17c-db5e676c1d8c.png)


<h2>Script2つ用意</h2>
<h3>Dragするものに対して</h3>
Imageに次のようなスクリプトをあててください。

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class Drag : MonoBehaviour, IPointerDownHandler, IBeginDragHandler, IEndDragHandler, IDragHandler
{
    private RectTransform rectTransform;
    private CanvasGroup canvasGroup;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        canvasGroup = GetComponent<CanvasGroup>();
    }
    public void OnBeginDrag(PointerEventData eventData)
    {
        canvasGroup.alpha = .6f;
        canvasGroup.blocksRaycasts = false;
    }
    public void OnDrag(PointerEventData eventData)
    {
        rectTransform.anchoredPosition += eventData.delta;//anchoredPositionは中心からの距離
    }
    public void OnEndDrag(PointerEventData eventData)
    {
        canvasGroup.alpha = 1f;
        canvasGroup.blocksRaycasts = true;
    }
}

```

<h3>Dropするものに対して</h3>
Image(1)に次のスクリプトをあててください。

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class Drop : MonoBehaviour, IDropHandler
{
    public void OnDrop(PointerEventData eventData)
    {
        if (eventData.pointerDrag != null)
        {
            eventData.pointerDrag.GetComponent<RectTransform>().anchoredPosition = GetComponent<RectTransform>().anchoredPosition;
        }
    }

}

```


<h2>最後にすること</h2>
Dragされる、Imageに対して、CanvasGroupをつけてください。

これで動きます。
カラオケハックのハッカソン参加（メモ）

#ハッカソン参加の自分用メモ

>**ニューノーマル時代のカラオケをハックせよ Sponsored by JOYSOUND #protoout**
ニューノーマル時代だからこその「新しいカラオケ」の楽しみ方を生み出すハッカソンです。カラオケそのものの楽しみ方から、友達への誘い方、終了後の余韻まで、カラオケにまつわるあらゆるシーンをハックし、「ニューノーマル時代のカラオケ」のあり方を提案しましょう！

#作る概要決め
・カラオケのガヤ（合いの手）を入れるボット？
・LINEBOTで入力 → 中継サーバ → Webページで表示（ガヤ再生）
　※LINEBOTだとコネクションを常に張るのは難しいとのことなので、中継サーバを利用。
・音楽は決め打ち。 → 大塚愛／さくらんぼ。

>**※アドバイス**
データ受け渡し部分を先に決めるのが良いと思うが、時間的に厳しいハッカソンなので、連携ができなくても問題ない。LINEBOT、Webページはユーザが使う部分なので、使い勝手を意識したら良い。

>**Webページ作成**
youtube、Webページ、MP4スクリプト、オーディオタグ　で調べると良いかも。


#役立ちそうなリンク
**●Webアプリの作り方（思い出し用）**
　・[Codepenサンプル１（ToDo・CSSなし）](https://codepen.io/pen/?template=gOMMBgK)
　・[Codepenサンプル２（ToDo・Bootstrap）](https://codepen.io/pen/?template=JjKKwMj)
　・[Codepenサンプル３（axios・COVID-19App）](https://codepen.io/pen/?template=QWEEJOG)

**●音の再生はどうやるの？受け取った音声ファイルを自動再生？**
　・[vue.jsで複数のvideoタグを扱う - Qiita](https://qiita.com/fumix/items/6eb0080207eec7009f8a)
　・[ChromeとSafariでaudioタグを自動再生するための対策](https://webty.jp/staffblog/production/post-907/)
　・[Vue on CodePen - Vue Patterns & Templates （player検索）](https://codepen.io/search/pens?q=player)

**●音楽再生のよさそうなAPI（howler.js）**
　・[howler.js - Doc](https://github.com/goldfire/howler.js#documentation)
　・[[HTML5] 音声ファイルをJSで再生/停止する – howler.js編](https://blog.katsubemakito.net/html5/audio-howlerjs1)

**●音楽再生のよさそうなAPI（Youtube Player API）**
　・[自宅で夏の散歩ができる「夏休み君」をYoutube Player APIで作ってみた - Qiita](https://qiita.com/canonno/items/8b0be6309b479ec5cdcc)

**●音源サンプル**
　・[フリー効果音素材・無料効果音 - 無料効果音で遊ぼう！](https://taira-komori.jpn.org/freesound.html)
　　→ 「DL」のリンクをコピーすればmp3のURL取得できる。

**●データの受け取り**
　・[PubNubアカウント作成方法](https://blog.kakakikikeke.com/2015/01/pubnub.html#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)
　・[PubNub](https://www.pubnub.com/docs/platform/quickstarts/javascript)
　　→ 中継サーバの構築も不要で、リアルタイムに受け取れる。（恐らく簡単かも？）
　　※下のコードは単純に受けたメッセージを表示するサンプル

```html:HTML
<div>
  <h1>GAYA Play</h1>
  <h1 id="gaya"></h1>
</div>
```

```JavaScript:JS
var pubnub = new PubNub({
  subscribeKey: "myPublishKey",
  publishKey: "mySubscribeKey",
})

pubnub.addListener({
    status: function(statusEvent) {
      if (statusEvent.category === "PNConnectedCategory") {
        console.log('connect')
      }
    },
    message: function(message) {
      console.log(message)
      gaya.innerHTML = message.message
    },
})

pubnub.subscribe({
  channels: ['gaya'],
})
```
【備忘録】ページの表示スピードが遅い原因の見つけ方（PageSpeed Insightsの見方）

#本稿について
ポートフォリオサイトを作成し公開したあと、ページの読み込みに時間がかかっていたため、
ずっと理由がわからず悩んでおりました。
原因がわかれば努力はできるが、原因がわからなかったためです。
その原因を調べるのに、有効だったツールの見方、原因の見つけ方を残しておきます。
（2020年10月24日時点）

原因を見つけてトライ&エラーしていきましょう

#PageSpeed Insightsとは
モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。
PageSpeed Insights:https://developers.google.com/speed/docs/insights/about?hl=ja
![スクリーンショット 2020-10-24 20.08.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/4477f740-83fe-4819-b2d9-887e1ebb8125.png)

とは言われてもピンと来ない。。。

##使い方
###計測
ひとまず、上の検索バーに計測したいページのURLを入力して、分析してください。
成功するとこのような画面になります。スコアについてはよく変動します。
低いからといって、落ち込むのは必要ないようです。
![スクリーンショット 2020-10-24 20.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/a55fa867-f851-5db3-7263-c8214317e4dc.png)

####失敗すると
こんな画面が表示されます。ひとまず、自分のブラウザからサイトにアクセスできるなら測定できるはずです。
私はサイトが重いためか、よくエラーが表示されます、、、
![スクリーンショット 2020-10-24 20.11.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/4310e751-a4ba-8459-d3d9-fac163875aaa.png)

###読み方
####ラボデータ
詳細は右側のタグをクリックすると、説明が出てきます。
計測するごとにスコアが変わります。また、項目が増えたりすることもあるので、詳細を確認して見てください。
![スクリーンショット 2020-10-24 20.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/248f891b-4d19-49bb-cc3f-807f3a2d50d4.png)

####改善できる項目
ここが一番大切です。処理に時間がかかる要素が表示されます。
サイトによって問題点が異なるので、アプローチ方法が変わりますが、
私のPFサイトは、画像の容量が重くて、遅くなっていました。
（当時のスクショをとっていなかったため割愛させていただきます）

画像はできれば、jpeg形式で保存し、100kb以下にした方が良いそうです。
![スクリーンショット 2020-10-24 20.29.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/5a59519a-3a7e-aa12-db58-2feefe3497ff.png)

![スクリーンショット 2020-10-24 20.24.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/6e380d13-d87d-6a72-02f4-fbe2ba6f2b8d.png)

####診断
自分は最初、改善できる項目しか見ていなかったのですが、私のPFサイトにおいては、診断がかなり重要でした.
![スクリーンショット 2020-10-24 20.30.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/77903525-9be7-b849-30c2-be47864d26b2.png)

今回の結果をみるとCSSファイルの読み込みに9.9秒かかっているので、CSSの何かの処理が時間を使っていることがわかります。
なおここも割と変わります、何度か計測して頻出する項目にあたりをつけて原因を見つけて行くのが良いかと思います。
![スクリーンショット 2020-10-24 20.32.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810435/483a10fb-2815-5214-22e9-c0517c857194.png)

以上です。ありがとうございました。
Vue.jsのコンポーネント内からhrefで画面遷移するには

#やりたかったこと
環境：Laravel + vue.js(単一Vueコンポーネント)

SPAではなく、普通に画面全体を遷移させる。
ただし、URLはbladeテンプレート側からpropsで受け取りvue側で他の変数と合体させるため可変にしたい。

URLが固定でいいなら以下のように普通のHTMLでいい。

```html
<a href="/edit"></a>
```

で、この固定のURLの代わりにどうやってコンポーネント内のdataを埋め込むかというのが問題。
やり方がググっても出てこなかったのでかなりハマりました。
vue-rooterとかはいらないです。
#解決法
## aタグの場合

```html:sample.vue
<template>
    <a :href="url_edit_id" class="btn btn-primary">編集</a>
</template>

<script>
    export default {
        props: ['url_edit'],
        data: function() { 
            return {
                url_edit_id:'/edit'
            }
        },
</script>
```
##buttonタグの場合
ボタンタグの場はmethodsに任意の名前で関数を作成し、その中でlocation.href=[遷移させたいURL]を指定します。
そのmethod名をbuttonタグの中のv-on:clickの値として呼び出します。

```html:sample.vue
<template>
    <button v-on:click="locate" class="btn btn-primary">編集</button>
</template>

<script>
    export default {
        props: ['url_edit'],
        data: function() { 
            return {
                url_edit_id:'/edit'
            }
        },
        methods: {
            locate: function() {
                location.href= this.url_edit_id;
            }
        },
</script>
```

aタグの場合とbuttonタグの場合で書いていますが、リンクへの挙動は同じです。
script側のdata内で定義した変数名を**マスタッシュ{{ }}とかつけずに**そのまま書きます。
不思議な構文ですが、これでurl_edit_idの値である/editがtemplate側に置換されて文字列展開されます。
aタグの方が簡単なので必要なければaタグにボタンのcss当てた方が簡単です。
私は:disabled属性を当てる必要があったのでボタンタグを使う必要がありました。

一応これで動きましたが、もっと簡単にかける方法あるよって方はコメントお願いします。
[Linux]かんたんに解説！権限確認と変更方法

## パーミッションの確認方法
Linuxコマンドでカレントディレクトリ内のファイルやディレクトリの情報を確認する。

```ruby

$ls -l

#=>
-rw-r--r--  1 user group      9  1月 1 00:00 hoge.html.erb
drwxr-xr-x  6 user group  20480  1月 1 00:00 ダウンロード
```

## パーミッションの読み方
最初の１文字目はファイル種別を表す。
2〜4文字目はファイルの所有者に対する権限を表す。
5〜7文字目はファイルの所有グループに対する権限を表す。
8〜10文字目はその他に対する権限を表す。

####権限の区分（設定する範囲）
| 種別 | 意味 |
|:-:|:-:|
| -  | ファイル  |
| d  | ディレクトリ  |
| l  | シンボリックリンク  |

####権限の基本種類

| 読み込み権限 | 書き込み権限 | 実行権限 |
|:-:|:-:|:-:|
| r  | w  | x |

####権限の範囲

| 数値 | 権限 | 内容 |
|:-:|:-:|:-:|
| 0  | ---  | 権限無し  |
| 1  | --x  | 実行可  |
| 2  | -w-  | 書込可  |
| 3  | -wx  | 書込、実行可  |
| 4  | r--  | 読込可  |
| 5  | r-w  | 読込、実行可  |
| 6  | rw-  | 読込、書込可  |
| 7  | rwx  | 読込、書込、実行可  |

-例-
-rw-r--r--
↓
ファイル種別=ファイル
所有者=読み取りと書き込み権限有り
所有グループ=読み取り権限有り
その他=読み取り権限有り

##アクセス権限の変更方法

```

$ chmod モード 対象ファイル名

$ chmod 764 hoge.html.erb
```


##コマンドのオプション

| 引数 | 内容 |
|:-:|:-:|
| -v  | コマンド実行結果を表示  |
| -c  | 変更があった場合のみ、実行結果を表示  |
| -R  | 再帰的に変更 |
macosで開発環境を作ろうとしたらシェルコマンドのバージョンが違って動かないcgiをbrew httpdのPATHを書き換えて動くようにした話

# 目的
- VPSで動いているcgiをmacosでlocalで開発環境を立ち上げようとしました。でも、macosのシェルコマンドは古いのです。
- 通常のログイン環境では`brew`でgnu core utilitiesをインストールすれば、`/usr/local/bin`などにGNU系のコマンドが使えるようになります。
- しかし`httpd`など環境を（当然）引き継がないのでcgiで使われている`awk`、`sed`、`date`、`find`などが古いコマンドが先に呼ばれてしまいます。例えば

```{bash}

$ /bin/bash --version
GNU bash, version 3.2.57(1)-release (x86_64-apple-darwin19)
Copyright (C) 2007 Free Software Foundation, Inc.
$ /usr/local/bin/bash --version
GNU bash, バージョン 5.0.18(1)-release (x86_64-apple-darwin19.5.0)
Copyright (C) 2019 Free Software Foundation, Inc.
```
- そのため、cgiのbashのシェルスクリプトが動かないモノもありました。`[ -v $HOGE ]`なんかエラーが出ました。
- そこで頑張って`httpd`のPATHを書き換えることでVPSのcgiと同じコードで同じ動作をさせることを思いつき、できました。


# 環境
- macの環境

```bash
$ uname -a
Darwin hoge 19.6.0 Darwin Kernel Version 19.6.0:
...
```

- appacheはbrew でインストールされた`httpd`です。

```{bash}
$ httpd -v
Server version: Apache/2.4.46 (Unix)
Server built:   Aug  7 2020 10:55:45
```


# 環境の構築

- default のapatchは切っておきます。

```{bash}
$ sudo apachectl stop
$ sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null
$ brew services restart httpd
==> Successfully started `httpd` (label: homebrew.mxcl.httpd)
```

## `httpd.conf`の編集
-省略：ご自身の目的に応じて編集してくださいね。

### httpdの起動と停止

- 起動：brewは一味違います

```
$ sudo brew services start httpd
==> Successfully started `httpd` (label: homebrew.mxcl.httpd)
```


- 停止：

```
$ sudo brew services stop httpd
==> Successfully stopped `httpd` (label: homebrew.mxcl.httpd)Stopping `httpd`... (might take a while)
```

ここで、設定ファイルとlogファイルはこちらです。

| パス                            | 説明         |
| ------------------------------- | ------------ |
| /usr/local/etc/httpd/httpd.conf | 設定ファイル |
| /usr/local/var/log/httpd        | logファイル  |


# brew httpdのPATHの変更
- [**元ネタ**](https://stackoverflow.com/questions/51645150/changing-the-homebrew-apache-path-variable)はここで見つけました。

```{bash}
/usr/local/Cellar/httpd/2.4.46/homebrew.mxcl.httpd.plist
$ cd /usr/local/Cellar/httpd/2.4.46
$ diff homebrew.mxcl.httpd.plist homebrew.mxcl.httpd.plist.org 
7,13d6
< 	<!-- add this -->
<   <key>EnvironmentVariables</key>
<   <dict>
<    <key>PATH</key>
<    <string>/usr/local/opt/findutils/libexec/gnubin:/usr/local/opt/coreutils/libexec/gnubin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin:/bin</string>
<   </dict>
<   <!-- end add -->
```

- ここで
    - `/usr/local/opt/findutils/libexec/gnubin`と
    - `/usr/local/opt/coreutils/libexec/gnubin`と
    - `/usr/local/bin`
- の３つを追加することで`bash` `find`、`awk`、`date`などGNUのコマンドが使えるようになります。
- そのため、macosにありがちな`gfind` 、`gdate`、`gsed`、`gawk`などリンクを張らなくてOKになります。

### おまけ

- シバンはいきなり`#!/bin/bash -xvue`と書くとmacosは古い`bash`を呼びだすのではバージョン違いでまります。下のように書くと`httpd`のPATH定義順に探してくれるので`brew bash`つまり`/usr/local/bin/bash`が呼び出せます。また、`/usr/bin/env`は引数を取れないので`-xuev`なんかをつけるとエラーになりますが、`set`を別に書くと同じlogが得られます。副次的にapacheのログを汚さないで澄む効果もあります。

```{bash}
#!/usr/bin/env bash 
# hogehoge.cgi:
# 2020-10-24 (C) woodie2wopper

#
# LOG
CMD_SESSION=$( basename $0 )
f_log="/var/www/log/$CMD_SESSION.$(date '+%y%m%d_%H%M%S').$$"
exec 2> $f_log
set -xveu
...
```


- どなたかのお役に立てれば嬉しいです。
nuxt.js静的画像参照の書き方

#はじめに
Nuxt.jsでは、assets(モジュール部品とする),static（静的フォルダ）の下に画像を配置します。

>アセット
>デフォルトでは、Nuxt は vue-loader、file-loader、url-loader webpack ローダーを使用して、強力なアセットを提供します。 静的アセットには static ディレクトリを使用することもできます。

出典：https://ja.nuxtjs.org/guide/assets/

Assetsフォルダー例：

```vue.js
<img src="~/assets/image/no-image.png">
<img src="@/assets/image/no-image.png">
```

Staticフォルダー例：

```vue.js
<img src="/image/no-image.png" />
```

ただし、書き方によってWindows,Mac,Linuxに表示されない場合がありました。

#もともとのコード
```vue.js
<v-img :src="require('~/assets/image/no-image.png').default" />
```

作る時点はWindows,Mac,Linuxでも正常に動作しました。

#最近の発生した現象
Windowsでは「require('~/assets/image/no-image.png').default」はundefinedになってしまったため、
画像表示されない問題です。

#解消案
```vue.js
<v-img :src="require('~/assets/image/no-image.png').default ?
             require('~/assets/image/no-image.png').default :
             require('~/assets/image/no-image.png')"

```

つまり、undefinedの場合はdefaultを削除して`require('~/assets/image/no-image.png')`のように変更。

ほかの解消方法もあると思いますが、修正した内容をメモしました。

以上
Virtualbox で「FATAL: No bootable medium found!」が表示された時の対処（Mac版）

状況：起動順序で光学を１番上にしてもisoが読み込めず「FATAL: No bootable medium found!」が表示されOSがインストールできない。

前提条件：あらかじめOSのisoファイルをローカルにDLしておく。
（今回の場合は「CentOS-7-x86_64-DVD-2003.iso」）

VMにカーソルを選択した状態（メニューバーにVirtualBox VMと表示されている）で「Devices」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/815458/2a10304d-8f21-0dae-e520-41538c801cb8.png)
続いて、「Optical Devices」→「Choose a disk file...」をクリックし、DLしておいたisoを選択する。
一度、VMの電源をオフにし、再度起動する。

起動画面が表示される。

（備忘録）
Rails学習　1日目その２

#Ruby on Rails5速習実践ガイド chapter2

## 2-6-1-1 Railsアプリケーションを新規作成する

```ruby
$ rails new scaffold_app -d postgresql
```
rails new：Railsの新規ファイル作成
scaffold_app：ファイル名
-d postgresql：SQLの指定（-dはpostgreSQL用ですよという意味)

## 2-6-1-2　ユーザー管理機能のひな形を作る
```ruby
$ bin/rails generate scaffold user name:string address:string age:integer
```
bin/rails：
scaffold：アプリを作る上での作業をまとめて簡単にしてくれるツール
user：モデル名（userモデル）
name:string address:string age:integer：3つの情報をテーブルに入れテーブルを作成。

## Column YAMLの基本
YAMLは構造化されたデータを表現するためのフォーマット。

```ruby
animal: &animal
 cat: 'ネコ'
 dog: 'イヌ'

animal_shop_1:
  <<: *animal
  hamster: 'ハムスター'

animal_shop_2:
  <<: *animal
  parrot: 'オウム'
```
animalを&animalとしておく
つまり＆animal= cat: 'ネコ' dog: 'イヌ'となる

animal_shop_1は
<<: *animal
  hamster: 'ハムスター'

つまり
　＆animalとhamster: 'ハムスター'
cat: 'ネコ' dog: 'イヌ'　hamster: 'ハムスター'となる
テストコードで「basic認証が通らないエラー」を対応"出来なかった話"



# エラー時の状況
某フリマサイトのコピーアプリを実装したので、練習としてコントローラーの単体テストコードを記述していたところ、実行時にターミナル上で下記エラーが発生しました。

```console:ターミナル
bundle exec rspec spec/requests/items_spec.rb

~中略~

 1) ItemsController GET #index indexアクションにリクエストすると正常にレスポンスが返ってくる
     Failure/Error: expect(response.status).to eq 200
     
       expected: 200
            got: 401
     
       (compared using ==)
     # ./spec/requests/items_spec.rb:20:in `block (3 levels) in <top (required)>'

~中略~
```
##### 開発環境
Ruby 2.6.5
Rails 6.0.3.3
MySQL
Visual Studio Code
(Caprybara,Rspec,GoogleChrome)

# 考察・検証
root_pathへのアクセス時にHTTPステータスが401になっている(アクセスできていない)、というエラーな模様。
本アプリケーションは**basic認証**を導入しており、それがが関係しているのではと予想しました。

##### basic認証とは
HTTP通信の規格に備え付けられているユーザー認証の仕組みのことで、Webサイトにアクセス制限をかけることのできる簡易的な方法の一つです。
サーバーとの通信が可能なユーザーとパスワードをあらかじめ設定しておき、それに一致したユーザーのみが、Webアプリケーションを利用できるようにします。

【サンプル画像】
![スクリーンショット 2020-10-24 19.44.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/813419/da88bba6-31b6-3bcb-8433-8c14f48e0c81.png)
上記エラー文とbasic認証で調べた所、やはりテスト時にbasic認証が通らない事例が見受けられました。
参考記事(記事末に掲載)を元に、テスト時のリクエストにbasic認証のユーザー名とパスワードをどうにか渡せないかと試してみました。

# 結果
メンターさんを交えて格闘すること約2時間…
参考記事を元に様々な方法を試みるもエラーは解決せず。
~~そして、メンターさんが調べたところ…
**「2020年現在、テスト時のbasic認証は推奨されていない」**とのことでした。~~


なんてこった…！
##### *〜出来ぬなら、やらぬ〜*
エラー解決の方針を「テスト時にbasic認証を通す」から、
「本番環境以外(テスト時)はbasic認証をしない」へ変更。

```ruby:application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth if Rails.env.production? # テスト時はbasic認証を行わないように分岐

  private
  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == 'username' && password == 'password'
    end
  end
end
```
※usernameとpasswordは、実際は環境変数で設定しています。

before_actionに**if Rails.env.production?**を追記して、本番環境でのみ適用するようにしました。
お陰で、テスト時はbasic認証せずそのままトップページへアクセスし、テストを実行できるようになりました！

# 感想
まだまだ初学者なこともあり、エラーに直面すると問題箇所を真正面から解決しようとしがちです。
今回のように、**エラーを避ける、「やらずに済む」方法が無いか**と多方面から考えることも重要だと実感しました。


本記事が初投稿でした。少しでも参考になれば嬉しく思います。
最後まで閲覧いただき、誠にありがとうございました。


##### 参考記事
[ベーシック認証（Basic認証）とは？設定方法と注意点・エラーになる原因を解説](https://www.itra.co.jp/webmedia/basic_authentication.html
)
[Rails×Basic認証×Rspecでつまづいた](https://doruby.jp/users/hello_rails/entries/Rails%C3%97Basic%E8%AA%8D%E8%A8%BC%C3%97Rspec%E3%81%A7%E3%81%A4%E3%81%BE%E3%81%A5%E3%81%84%E3%81%9F)
[RSpec3でBASIC認証がかかったアクションをテストする](https://qiita.com/srockstyle/items/6397c458d8f12dfcd02c
)
[Rails/Rspecテストをhttp基本認証で渡す](https://www.366service.com/jp/qa/976656f32d192de511196b8959223cd4)
[Basic認証を交えたテストコードの書き方](https://qiita.com/taka_no_okapi/items/b4cab8e2a451b3f1b88e)


##### 修正履歴
2020/10/25
ご指摘いただき、下記修正いたしました。

- 非推奨については口頭のみで伺った話でソース元が不確かなので、打ち消し線を入れました。(「そんな噂がある」程度に捉えていただければと思います。)

- 要は、エラーを**対応出来なかった**話なので、タイトルを変更しました。

@jnchito様、ありがとうございました。
google-java-formatの適用

#はじめに
JavaCodeスタイルはたくさんありますが、
例えば：
Javaコーディング規約：https://future-architect.github.io/coding-standards/documents/forJava/Java%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F%E7%B4%84.html

Google Java Style：https://google.github.io/styleguide/javaguide.html

Codeのフォーマッタがあると便利だと思われます。

#Google Java Styleに合わせたい
開発者はstyleの理解をしましたが、フォーマッタも自動化しないと漏れの可能性があります。
google-java-formatを適用すれば便利です。

##google-java-formatとは
>google-java-format is a program that reformats Java source code to comply with Google Java Style.

https://github.com/google/google-java-format

##インストール方法
IntelliJ, Android Studio, and other JetBrains IDEs　などPluginをインストールできます。

EclipseはJARファイルをダウンロードし、Eclipseのpluginsフォルダに配置した後、Eclipseを再起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/529b3e97-ba3e-c2ab-c772-8ea40fe96017.png)

設定後、JAVAファイルを開いて、Ctrl + Shift + F でフォーマットできます。

以上
Unity The AnimationClip 'xxx' used by the Animation component 'xxx' must be marked as Legacy 対処法


##目的
Unityで以下のような警告が出たので、忘れないように記録に残す
「The AnimationClip 'xxx' used by the Animation component 'xxx' must be marked as Legacy」


##開発環境
PC:macOS Catalina
エディター：Visual Studio for Mac
Unity:2020.1.7f1

##内容
Unityでローディング画面でクルクル回るアニメーションを作成した際に、表題のような警告が出た

###解決方法
作成したアニメーションを選択して、inspectorの右側にある三つの点（鍵マークの隣にある）をクリックすると、下記画像のようになります(animationがアタッチされているオブジェクトではなく、animation自体を選択します)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/7a020e6f-f17f-5c3e-d0f5-df86b86508e3.png" width=50%>
特に何も設定していなければ、Normalにチェックが入っているので、Debugを選択します
すると、inspectorが以下画像のようになります
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/93e2a312-ad0e-38fc-7af9-37085f5e0cf2.png" width=50%>
ここのLegacyにチェックを入れるとタイトルにあるような警告は消えます
そして、DebugをNormalに変更して終了です

##参考
https://stackoverflow.com/questions/56166350/the-animation-state-could-not-be-played-because-it-couldnt-be-found
Locust1.2の新機能「カスタムロードシェイプ」を試してみる

# はじめに
locustはお手軽で良い。Dockerfileとちょっとしたシナリオのpythonコードがあれば、サクサクっと性能が測定できる。

そんなlocustも、もともとは手動で負荷量を調整しなければいけないのが面倒だったものの、バージョン1.2で追加された「カスタムロードシェイプ」を使えばそんな手間も無くなるというのがドキュメントを読んでいて分かったので、さっそく試してみる。

# やること
と言ってもメチャクチャ簡単。

[公式ドキュメント](https://docs.locust.io/en/stable/generating-custom-load-shape.html)と、[そこからリンクされているGitHubのサンプル](https://github.com/locustio/locust/tree/master/examples/custom_shape)を参考に作ってみる。

```Python:locustfile.py
from locust import LoadTestShape

# (中略)

class MyCustomShape(LoadTestShape):
    time_limit = 900
    spawn_rate = 10

    def tick(self):
        run_time = self.get_run_time()
        print(run_time)

        if run_time < self.time_limit:
            user_count = 20 + ( run_time // 120 ) * 20
            return (user_count, self.spawn_rate)

        return None
```

シナリオを書いているlocustfile.pyに上記を入れるだけ。以上。

> In this class you define a tick() method that returns a tuple with the desired user count and spawn rate (or None to stop the test). Locust will call the tick() method approximately once per second.

と書かれている通り、```tick()``` メソッドが毎秒呼ばれるので、そこで計算ロジックを立てて、必要 ```user_count``` 分だけ ```return``` すれば良い。```return None``` すればシナリオが終わる。

上記は、120秒ごとに20ユーザを10spawn/秒して、900秒走行する例である。

これでWebのGUI画面を表示すると、通常は入力可能なユーザ数とHatch Rateが以下のようにディアクティベーションされた状態で表示される。

![スクリーンショット 2020-10-24 195506.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111314/e7ff0381-0cdf-9e8f-e91b-8bff27f93b18.png)

ここで、シナリオ投入したいサーバを設定すればシナリオの自動走行が始まる。

あとは、カップ麺でも食べながらシナリオ走行の完了を待てばよい。

時間が来たら、こんな感じで勝手に止まってくれる。

![スクリーンショット 2020-10-24 194918.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111314/82116604-0c61-e452-1e5b-cf7d1348237e.png)

やったね！ここまでできれば、あとは試験条件を変更しながら同じロードシェイプを流して比較ができるぞ！
sudoを理解した上で使おう！

###sudo
スーパーユーザ（や他のユーザ）の権限でコマンドを実行するときに使うコマンド。

| コマンド | 概要 |
|:-:|:-:|
| -A  | パスワード入力用のコマンドを使用する（コマンドは「/etc/sudo.conf」または環境変数「SUDO_ASKPASS」で設定）  |
| -n  | パスワードを要求するプロンプトを表示しない（パスワード入力が必要なコマンドの場合はエラーとなって実行できない）  |
| -p 文字列  | パスワード入力時のプロンプトを指定する（デフォルトは「:」記号）  |
| -S  | パスワードを端末ではなく標準入力から読み込む（パスワードの末尾には改行が必要）  |
| -k  | 保存されている認証情報を無効にする（次回のsudo実行時には必ずパスワード入力が必要）。コマンドと一緒に使用可能  |
| -K  | 保存されている認証情報を完全に消去する  |
| -V  | 保存された認証情報を更新する  |
| -u ユーザー  | コマンドを実行するときのユーザーを「ユーザー名」または「ユーザーID（#記号と数字）」で指定する  |
| -g グループ  | コマンドを実行するときのグループを「グループ名」または「グループID（#記号と数字）」で指定する  |
| -P  | sudoを実行するユーザーが所属するグループのままコマンドを実行する  |
Facebookのapiを使って認証した時に「アプリがセットアップされていません：このアプリは開発モードです」と出る場合

・まずは普通にDevelopperとして登録
・アンケート答えたりなんなりでアプリの登録まで進めてAPIキーを取得
この状態だと開発者アカウントは使えますが、一般ユーザーには使えません。
アプリが未公開みたいな状態になります。

開発者アカウントでログインしていない一般ユーザーがfacebookで認証しようとすると
「アプリがセットアップされていません：このアプリは開発モードです」と表示されます。

アプリを選択して上の方にでトグルがありますので、ライブに切り替えます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714629/40f6f65d-93d0-b6cd-0706-ee26fa43987a.png)

これで普通に認証できるようになります。
innerHTML とtextContentの違い

textContentが出てきた時に「innerHTMLとは何が違うのだろう？」と疑問に思ったため調べたことを記録します。

## innerHTML
> Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

## textContent
>textContent は Node のプロパティで、ノードおよびその子孫のテキストの内容を表します。


文章だけではよくわからなかったので実際に以下のコードを実行します。

```:html
<html>
  <body>
    <input type="button" value="innerHTML" onclick="reWrite1()">
    <input type="button" value="textContent" onclick="reWrite2()">
    <p id="p1">ここがかわるよ</p>
    <script>
      function reWrite1(){
        const p1 = document.getElementById('p1')
        p1.innerHTML = "<b>変更しました！</b>"
      }

      function reWrite2(){
        const p1 = document.getElementById('p1')
        p1.textContent = "<b>変更しました！</b>"
      }

    </script>
  </body>
</html>
```

結果
・innerHTMLボタンをクリック
![e2d5b4c22abf9fb950bbfe018c736492.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/1904c7e9-02c5-518e-a43a-e88f3f1d0de0.png)

・textContentボタンをクリック
![651cb8d0da6ab73e06bcddce9f891aa3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/ab07ed2a-c7a3-5070-d6f8-60f0788e27fc.png)


##結論
``innerHTML``メソッドではタグはHTMLとして解釈されて表示される。
``textContent``メソッドではタグは文字として表示される。


### 参考記事
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/ja/docs/Web/API/Node/textContent
https://itsakura.com/js-textcontent-innerhtml
Rspecで多対多のFactoryを作ってSystemSpecでテストしたときのノート[RSpec, FactoryBot]

### 背景
Rspecで多対多の関係を作って、SystemSpecでテストをしました。
元々のテーブル構造の複雑さもあり、かなり苦労したので、以下にノートをまとめます。

実行完了は下記の通りです。

- Rspec 3.9
- Rails 5.2.4.2

### テーブル構造
テーブル構造は、このようになっています。メインのテーブルは、`offices`(ある会社の支社)と`shops`(営業先である店舗)で、`office`（支社）は`evebt`を開いて、そこに営業先である店舗`shops`が参加します。`shops`は必ず何らかの`category`を持っています。

[![Image from Gyazo](https://i.gyazo.com/5c2e5afa32f8b4f296a380672b2dde59.png)](https://gyazo.com/5c2e5afa32f8b4f296a380672b2dde59)

### 起こっていた問題
モデルメソッドの関係で、どうしても`events`の`factory`を作った時に、それに紐づく、`shops`が必要になりました。しかし、構造上、このように書いたのでは、エラーが出てしまいました。

```ruby
let!(:shop){FactoryBot.create(:shop)}
let!(:event){FactoryBot.create(:event)}
#=> ここで eventに紐づくshopがないとエラーになる構造になっていた
let!(:event_shops){FactoryBot.create(:event_shop, event: event, shop: shop)}
```

### 対処方法
そこで、`event`の`factory`生成時に、同時に関連する`shop`も定義できるようなfactoryを作成することにしました。

#### eventsのファクトリを作る
作成したFactoryは以下のようになっています。

```ruby:spec/factories/events.rb
FactoryBot.define do
  factory :event do
    office_id { nil }
    name { "テストイベント" }
    
    trait :with_shops do
      after(:create) do |event|
        category = FactoryBot.create(:category, :sequence)
        create_list(:shop, 1, events: [event], category: category)
      end
    end
  end
end
```
まず、`event`のファクトリ内に`with_shops`というtraitを作成して、`event`作成時に関連する`shop`も作成できるようにします。`create_list`で`shop`のファクトリを複数作成でき流ようにし（ここでは１つしか必要ないので１つだけ）、`events`から`event`のインスタンスが複数入れられるように、`[event]`と配列で表記します。

なお、`category`がわざわざ`trait`を使って呼び出してあるのは、後ほど解説します。

#### System Specで適切に呼び出せるようにする
```ruby:spec/factories/categories.rb
FactoryBot.define do
  factory :category do
    name { "医療系" }

    trait :sequence do
      sequence(:id, 100)
      name { "服飾系" }
    end
  end
end
```
```ruby:spec/system/events_spec.rb
let!(:event) { FactoryBot.create(:event, :with_shops, office: office, shops: [shop]) }
# ここからcategoryをshopに当てはめることはできない
```

次に、`category`のファクトリですが、ビューの中で、`event`は複数回生成されます。そのため、同時に生成される`shop`の`cateogory`は毎回別の`id`(FK)にしないと、FKの重複エラーになってしまいました。

また、`system spec`から`event`の`shops`に`category`を当てはめようとすると、`spec/factories/events.rb`内で、`shop`のファクトリを作成しようとしたときに、「外部キーが存在しません」とエラーになってしまいました。

そのため、`sequence`を利用して、一つ一つ違う`id`(FK)のcategoryを作成するようにしました。

### 終わりに（参考サイトなど）
解決に長い時間がかかってしまいましたが、なんとか解決できてよかったです！
今回はDBの構造が複雑だったため、このような複雑なSpecを書かねばならなくなってしまいましたが、
今後はDB設計をしっかりして、もっとシンプルなテストで済むようにしたいです。。。。

▼特に参考にさせていただいた記事など
- [FactoryGirlで「多対多」や「複数の1対多」のアソシエーションを設定する](https://qiita.com/kojiro3/items/b0957813695ca61fa3aa)
- [Factorybotのtraitを使って、has_manyが２重にある複雑なassociation付きのデータを用意する](https://n350071.com/factorybot-trait-has_many-has_many/)
- [FactoryBot (旧FactoryGirl) の sequence と .next](https://qiita.com/kuboon/items/8897aca59dc968ca6d3c)
自己紹介

```introduction.c
#include<stdio.h>

int main(){
   printf("Thank you for reading!\n");
   return 0;
}
```



#<font color="green">**ゴブリン</font>について**

初めまして。この記事を開いて下さり有難うございます。

<font color="Red">**ゴブリン**</font>と申します。

これからこの**Qiita**を使って、多くのことを**アウトプット**していきたいなと考えています。

今回は、テストも兼ねて**自己紹介**をしていきたいなと思います。

名前だけでも覚えて頂けると大変喜びます。

<font color="red">**ゴブリン**</font>です。（大事なことなので2回言いました）



#**目次**

[1.Qiitaを始めた経緯](#1-Qiitaを始めた経緯)
[2.他の場所での活動](#2-他の場所での活動)
[3.最後に](#3-最後に)



#1. Qittaを始めた経緯

##イントロダクション

私が初めてプログラミングに触れたのは2018年。

今から約3年前のことです。（2020/10/24 現在）

初めてC言語を見て「これが何の役に立つのだろう？」と思ったのを覚えています。

```first_program.c
#include<stdio.h>

int main(){
   printf("Hello World!\n");
   return 0;
}
```

皆さんは初めてプログラムを見たときどんなことを思いましたか？

また今までプログラミングに触れてこなかった人は、上のプログラムを見てどう思いますか？

<font color="green">**私はもっと楽しいことがしたいと思いました。**</font>

①Unityを用いたCG制作
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637147/eb41fd26-3183-d954-da28-19b26d4c809b.png)
②WordPressを用いたブログサイト制作
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637147/36ec5453-0287-6ffd-6562-de0af1a13a62.png)

<font color="red">**↑↑↑上記の画像は私が実際に制作したものです。**</font>

しかし私自身モチベーションが上がりにくく、**インプット**はするのですが、なかなか**アウトプット**をしてきませんでした。

このままではダメだと思い、この**Qiita**を使って、**アウトプットする決断**に至りました。

至らない面も多いとは思いますが、皆様と意見を交えることで**成長**できたらなと思っています。

##今後の予定

具体的にどのような記事を書いていくかですが、**限定はしません**。
ですが大体の方針は考えています。

①流行りの**Python**を用いて**データ分析**や**機械学習**をしたり
②**HTML**,**CSS**,**JaveScript**を用いてサイトを構築したり
③**VurtualBox**を始めとした仮想マシンを使って**Linuxサーバー**を構築したり
④**Unity**や**UnrealEngine**といった**ゲームエンジン**を使って何か制作したり
⑤**Blender**というソフトを使って**CG**を制作したり
⑥**制御**に関わってくる**ラプラス変換**を始めとした座学をしたり
⑦**音**に深く関わってくる**フーリエ変換**についても座学をしたり
⑧**Java**によって書かれた**Processing**を使ってみたり

…などなどを今想定しています。

これは現時点での考えなので他にも色々書いていくとは思います。

いきなりサッカーに関する記事なんか投稿してしまったらすみません＞＜

ドラえもんのように温かい目で見守っていただけると幸いです。



#2. 他の場所での活動

次に他の場所での**活動場所**を紹介させてください。

##①Twitter
**活動報告**や**情報発信**、その他**どうでもいいこと（これがメイン）**を呟いています。

**ゴブリン**のTwiiter
<a class="twitter-timeline" href="https://twitter.com/gobugobu__rin?ref_src=twsrc%5Etfw">Tweets by gobugobu__rin</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**恋人のバブリン**のTwitterもあります
<a class="twitter-timeline" href="https://twitter.com/babubabu__rin?ref_src=twsrc%5Etfw">Tweets by babubabu__rin</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##②YouTube
**YouTube**もやっています。主に息抜きとしてゲームをしています。

Ⅰ．**バブリンとゴブリン（カップルチャンネル）**
[ここからバブリンとゴブリンのチャンネルにいけます。](https://www.youtube.com/channel/UClzEU8KFLvrnIWlvbB9tgcA)

Ⅱ．**恋人のバブリンのチャンネル**
[ここからバブリンのチャンネルにいけます。](https://www.youtube.com/channel/UCvaTAsSv4-x0BsPVBRYxKPg)

Ⅲ．**ゴブリンのチャンネル**
[ここからゴブリンのチャンネルにいけます。](https://www.youtube.com/channel/UCHVHyrCkQ47Gy3QAQNZjyEw)



#3. 最後に

以上が、簡単ではありますが自己紹介となります。

拙い文を最後まで読んで頂きありがとうございました。

これからよろしくお願いします。
Rails 3 から PostgreSQL 10 に接続するときに使ったコード

Rails 3.0.1 で PostgreSQL 10 に繋いでテストする必要があり、 initializer を追加することになりました。

`config/initializers/backport_pg_10_support_to_rails_3.rb`


```ruby
if Rails.env.test?
  module ActiveRecord
    class Base
      class << self
        def establish_connection(*arg)
        end
      end
    end
  end
  require 'active_record/connection_adapters/postgresql_adapter'
  module ActiveRecord
    module ConnectionAdapters
      class PostgreSQLAdapter < AbstractAdapter
        # Resets the sequence of a table's primary key to the maximum value.
        def reset_pk_sequence!(table, pk = nil, sequence = nil)
          unless pk and sequence
            default_pk, default_sequence = pk_and_sequence_for(table)
            pk ||= default_pk
            sequence ||= default_sequence
          end
          if pk
            if sequence
              quoted_sequence = quote_column_name(sequence)
              if ActiveRecord::Base.connection.select_value('SELECT version()').include?('PostgreSQL 10')
                # language=sql
                sql =<<-EOS
                  SELECT setval('#{quoted_sequence}', (SELECT GREATEST(MAX(#{quote_column_name pk})+(SELECT seqincrement FROM pg_sequence WHERE seqrelid = '#{quoted_sequence}'::regclass), (SELECT seqmin FROM pg_sequence WHERE seqrelid = '#{quoted_sequence}'::regclass)) FROM #{quote_table_name(table)}), false)
                EOS
              else
                # language=sql
                sql =<<-EOS
                  SELECT setval('#{quoted_sequence}', (SELECT GREATEST(MAX(#{quote_column_name pk})+(SELECT increment_by FROM #{quoted_sequence}), (SELECT min_value FROM #{quoted_sequence})) FROM #{quote_table_name(table)}), false)
                EOS
              end
            else
              @logger.warn "#{table} has primary key #{pk} with no default sequence" if @logger
            end
          end
        end
      end
    end
  end
end
```

`require 'active_record/connection_adapters/postgresql_adapter'` を入れて、 `def reset_pk_sequence!(table, pk = nil, sequence = nil)` を上書きしましたが、 それだけだと `establish_connection` が存在しないというエラーが出るので、 `require` の前に `establish_connection` を記述しました。

`reset_pk_sequence!` は https://github.com/rails/rails/blob/3-0-stable/activerecord/lib/active_record/connection_adapters/postgresql_adapter.rb から基本的にコピーで、 変更したのは SQL 作成部分です。