OmniAICreator/Qiita-1.07M huggingface dataset:
取引先の所有者を変更した時に、商談の所有者を変更するトリガー

簡単に例題となるような回答やブログ等が見つかると思いましたが、なかったのでサックと作成。

本当は既に終わった商談は対象にしないなど、要件の洗い出しが必要だと思います。


別の回答者さんは、プロセスビルダー押しでしたが、後々の変更を考えるとやっぱりApexトリガでしょう。
一括処理も考慮しやすいしね。

```
trigger UpdateAccountOpp on Account (after insert, after update) {
    
    Map<Id, Account> acOldMap = null;
    Map<Id, Account> acNewMap = new Map<Id, Account>(Trigger.new);
    if (Trigger.old != null) {
        acOldMap = new Map<Id, Account>(Trigger.old);        
    } else {
        acOldMap = new Map<Id, Account>();
    }
    
    Set<Id> AccountIdSet = new Set<Id>();
	List<Opportunity> updateOpportunityList = new List<Opportunity>();
    
    if (Trigger.isAfter) {
        for (Account ac: Trigger.new) {
            if (ac.RecordType.Name == 'ABC' ){
                Account oldAcc = (Account)acOldMap.get(ac.Id);
                if (oldAcc != null && ac.OwnerId != oldAcc.OwnerId){
                    AccountIdSet.add(ac.Id);
                }
            }            
        }//end of for
        
        List<Opportunity> OpportunityList = [SELECT Id,AccountId FROM Opportunity WHERE AccountId =: AccountIdSet];
        for (Opportunity opp : OpportunityList){
            Account acc = (Account)acNewMap.get(opp.AccountId);
            if (acc != null){
                Opportunity upopp = new Opportunity();
                upopp.Id = opp.Id;
                upopp.OwnerId = acc.OwnerId;
                updateOpportunityList.add(upopp);
            }
        }//end of for
        if (updateOpportunityList.size() > 0) update updateOpportunityList;
        
    }
}
```

https://trailblazers.salesforce.com/answers?id=9064S000000DrmL
javascript 配列のループ処理 勉強用

配列のループ処理の種類
-
forEach / filter / mapの３種類がある

forEachで配列要素を繰り返し処理する
-
forEachは、配列データに対してのみ実行することが可能で、各要素1つずつに任意の処理を実行させることがでる。

```javascript
let items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];
 
items.forEach(function( value ) {
     console.log( value );
});
```
実行結果

```javascript
バナナ  //配列要素を1つずつコンソールに出力
リンゴ
メロン
ブドウ
```
---
filterで配列要素を抽出する
-
```javascript
let items = [5,2,7,8,3,1,6,8,4];
 
let result = items.filter( function( value ) { 
    //5よりも小さい数値だけを抽出
    return value < 5;
}) 
console.log( result );
```
実行結果

```javascript
[2, 3, 1, 4]  //5よりも小さい数値だけを抽出
```
---

mapで処理した要素を新しい配列で作成する
-
```javascript
let items = [1,2,3,4,5];
let result = items.map(function( value ) {
    //配列の各要素を2倍にする
    return value * 2;
}); 
console.log( result );
```

実行結果

```javascript
[2, 4, 6, 8, 10]  //1*2,2*2,2*3,2*4,2*5の結果を新しい配列として作成する。
```
---
javascript 配列の連結、結合、分割方法　勉強用

配列を連結・結合する方法  (join())
-
join()は、配列の各要素を連結・結合して「文字列（String）」として出力することができる。

```javascript
let items = [2018, 1, 10];

let result = items.join('/');

console.log( result );
```
実行結果

```javascript
2018/1/10   //要素ごとに/が追加され文字列として出力される。
```

join()の引数を何も指定しない場合

```javascript
let items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];

let result = items.join();

console.log( result );
```
実行結果

```javascript
バナナ,イチゴ,リンゴ,メロン   //カンマ区切り」の文字列を取得
```
---
配列を分割する方法  (slice)
-
slice()は、指定した配列のインデックス番号を境目に分割して
新しい配列データを取得することができる。

```javascript
let items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];

let result = items.slice( 2 );

console.log( result );
```
実行結果

```javascript
["リンゴ", "メロン"]  //配列の2番目のインデックス番号にある要素から末尾までを分割
```
slice()は「開始位置」「終了位置」の2つの値を引数に取ることもできる。

```javascript
let items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];

let result = items.slice( 1, 3 );

console.log( result );
```
実行結果

```javascript
["イチゴ", "リンゴ"]  //配列の1番目のインデックス番号から3番目のインデックスの手前までの要素を分割
```
---
javascript 配列の参照、追加、削除方法　勉強用

配列の参照
-

```javascript
let firstName = ['kato','sato','suzuki','tanaka','hayama'];

//１番目の要素
console.log('firstName[0]:' + firstName[0]);

//4番目の要素
console.log('firstName[3]:' + firstName[3]);

//6番目の要素(空っぽ)
console.log('firstName[5]:' + firstName[5]);
```
実行結果

```javascript
firstName[0]:kato       //firstName[0] katoの要素が取得される。

firstName[3]:tanaka     //firstName[3] tanakaの要素が取得される。

firstName[5]:undefined  //firstName[5] 要素がないのでundefinedが返ってくる。
```
---
配列の要素を追加する方法
-
追加したい配列の現在の一番後ろの要素番号を指定して追加する方法と
pushメソッドを使い要素を追加する方法

```javascript
let firstName = ['kato','sato','suzuki','tanaka','hayama'];

console.log('追加前：' + firstName);

// 要素を追加
firstName[5] = 'maeda';

console.log('追加後：' + firstName);


// pushメソッドを使い要素を追加
firstName.push('yamada');

console.log('追加：' + firstName);
```
実行結果

```javascript
追加前：kato,sato,suzuki,tanaka,hayama               //追加前の要素

追加後：kato,sato,suzuki,tanaka,hayama,maeda         //指定した要素番号に追加

追加：kato,sato,suzuki,tanaka,hayama,maeda,yamada    //一番最後の要素の後ろに追加
```
---
配列の要素を削除する方法
-
```javascript
let firstName = ['kato','sato','suzuki','tanaka','hayama'];


// ‘sato’君が転校することになった
delete firstName[1];

console.log(firstName);
```
実行結果

```javascript
[ 'kato', , 'suzuki', 'tanaka', 'hayama' ]//指定したfirstName[1]　satoが削除される。
```
---
javascript 配列の宣言方法　勉強用

配列の宣言方法
-

配列の宣言には2種類の方法がある。
1つ目は配列コンストラクタ「Array」を使う方法で、2つ目は配列リテラル「[ ]」を使う方法。
一般的には配列リテラル[ ]を使う。

```javascript
//①配列コンストラクタの例
let array1 = new Array('リンゴ', 'バナナ', 'イチゴ');

//②配列リテラルの例
let array2 = ['リンゴ', 'バナナ', 'イチゴ'];

console.log( array1 );
console.log( array2 );
```
実行結果

```javascript
["リンゴ", "バナナ", "イチゴ"] //配列の[0][1][2]の全要素が取得される。

["リンゴ", "バナナ", "イチゴ"] //配列の[0][1][2]の全要素が取得される。
```
---

結果が異なる配列
-

```javascript
let array1 = new Array(5);
let array2 = [5];

console.log( array1 );
console.log( array2 );
```
実行結果

```javascript
[empty × 5]  //5つ分の配列要素を用意する

[5]          //5という数値を配列に格納する
```
---

配列の初期化
-
すでに作成した配列データを初期化する方法
配列データの中身を空っぽにする

```javascript
let array = [];

console.log( array );
```
実行結果

```javascript
[]  //空の要素が取得される
```
---
git コマンド　勉強用

```
…or create a new repository on the command line
echo "# diarys" >> README.md

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ke158/diarys.git
git push -u origin main

…or push an existing repository from the command line
git remote add origin https://github.com/ke158/diarys.git
git branch -M main
git push -u origin main
```
初期設定を行う
-

```git
//ユーザー名の登録
git config --global user.name "XXXX"
//メールアドレスの登録
git config --global user.email "XXXX@hogehoge.com"
```
---

ローカルにリポジトリを作成し、リモートにプッシュする
-

アップロードしたいフォルダの場所
-
フォルダ名を入力するか、ファイルをドラッグ＆ドロップする。

```git
cd [フォルダ名]
```
---
Gitのリポジトリを新たに作成する
-
既にあるリポジトリを再初期化するためのものでもある。

```git
git init
```
ファイルを追加
-
[.]は全てのファイルを追加
指定したファイルを追加したい時は $ git add <ファイル名>で指定する。

```
git add .
```
---
ファイルの変更や追加をコミット
-
git commit -m "任意のメッセージ"

```git
git commit -m "first commit"
```
---
ローカルの変更を確認する
-
```
git status
```
---
originという名前に対して[URL]を関連付けさせる。
-
git remote add origin [URL]
（githubにアップする場合はgithubのリモートリポジトリのURLを指定)


```
git remote add origin https://github.com/XXXX/XXXXXX.git
```
---
masterを更新,追加
-
リモートリポジトリにアップロード（プッシュ）

```
git push -u origin master
```
---
JS基礎②

#概要
プログラミングで扱うデータについての記事です。
数値、文字列、写真などそれらはすべてデータ型と言います。

#７つのデータ型

JSには７つのデータがあります。

```
①Number−数値
②string-文字列
③Boolean-真偽値
④undefined-未定義を表す
⑤Null-存在しない
⑥BigInt-大きな数値を扱う
⑦Symbol-シンボル値
```

#数値
JSでは数を扱うのはNumber型の一種類だけです。

```index.js
console.log(10 + 3); //13
console.log(10 - 3); //7
console.log(10 * 3); //30
console.log(10 / 3); //3.333
console.log(10 % 3); //わり算のあまり
console.log(10 ** 3); //1000

console.log(33 + 2 * 4); //41
console.log((33 +2) * 4); //140
console.log(45 * 33 / 22); //わり算▶掛け算
```

*余剰の計算
数値をグループ分けをしたいときなどに使います。

```index.js
console.log(0 % 2 );
console.log(3 % 3 );
console.log(6 % 3 );
console.log(7 % 2 );
console.log(9 % 5 );
console.log(13 % 2 );
console.log(55 % 22 );
```

#文字列

```index.js
console.log('チョコ' + 2 + '枚');
console.log('チョコ２枚');
```

テンプレート文字列は以下のように使われます。
改行することもできます。

```temp.js
let shopping = `洋服２着
               10000円`

console.log(shopping); //洋服２着10000円
```
```temp.js
 let menu = 'ケーキ';

 let tax = `ご注文は${menu}です`;

 console.log(tax); //ご注文はケーキです
```

#Boolean 真偽値

```index.js
const energy = 400;
console.log(energy > 1000); // false  1000より大きい
console.log(energy < 1000);// true　　1000より小さい
console.log(energy >= 1000);// false　1000より大きいまたは同じなら
console.log(energy <= 1000);//true    1000より小さいまたは同じなら
console.log(energy === 1000);//false　1000と厳密に同じ
console.log(energy !== 1000);//true　1000と厳密に異なる
```

```index.js
let name = "なお";
const job = "医者"

if(name === "なお" && job ===　"医者" ) {
  console.log("よくできました");
 } else {
   console.log("Game Over");
 }
```

#undefined
変数宣言をしたあと、何も代入していない値のことです。未定義を指します。
配列の要素やオブジェクトのプロパティに値が設定されていないときにundefinedが入ります。
関数の戻り値を書いていないときにもundefinedが入ります。

#Null

存在しない、あるいは無効を意味する値です。
関数の戻り値として得られることがあります。


#JSでデータ型を調べる

```data.js
console.log(typeof 'apple');
console.log(typeof 45);
console.log(typeof undefined);
console.log(typeof true);
console.log(typeof null);
```
typeofでデータ型を調べることができます。
ブラウザーのクッキーへの対応状況

Firefox 88.0 と Chrome 89.0 のクッキーへの対応状況です。

テストページ

```html:www2_cookie.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Cookie</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="www2_cookie.js"></script>
</head>
<body>
<h2>www2.ekzemplaro.org</h2>
<hr />
<div id="message">message</div>
<hr />
Apr/29/2021 AM 09:47<br />
</body>
</html>
```

```js:www2_cookie.js
// ---------------------------------------------------------------
//	www2_cookie.js
//
//						Apr/29/2021
//
// ---------------------------------------------------------------
jQuery(function (){

document.cookie = "ff=パイナップル;SameSite=Strict";
document.cookie = "gg=いちご;SameSite=Lax";
document.cookie = "hh=すいか;SameSite=None;Secure";
document.cookie = "ii=ぶどう;SameSite=None";
document.cookie = "jj=キウイ;";
console.log(document.cookie)

const cookies = document.cookie
const cookiesArray = cookies.split(';')

var str_out = "*** cookies ***<br />"
str_out += cookies + "<br />"
str_out += "<br />"

for(var cc of cookiesArray){
	var cArray = cc.split('=')
	console.log(cArray)
	str_out += cArray  + "<br />"
}

jQuery("#message").html(str_out)
})

// ---------------------------------------------------------------
```


Firefox 88.0 の結果
すべてのクッキーが送られています。
![firefox_apr29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/9994de5b-0330-027d-63ed-14bdfb5f35c6.png)


Chrome 89.0 の結果

次のクッキーは送られていません。

```text
document.cookie = "ii=ぶどう;SameSite=None"
```

![chrome_apr29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/aec3bcd1-5ffa-459b-d7bc-b006a223426a.png)
Javascript データ型の種類 勉強用

Javascriptのデータ型の種類
-

JavaScriptにおける型とは、数値(number)、文字列(string)、ブール値(boolean)、null、undefinedの5つのプリミティブ型があります。これらはtypeof演算子を用いて判別する事が出来ます。ただし、nullだけは仕様に反して'object'を返します。

|型  |判定  |
|---|---|
|String|文字列|  
|number|数値|
|boolean|true false|  
|undefined|undefined|
|object|null| 
--- 

typeofでの型の判定方法
-

```javascript
console.log((typeof "文字列"));    //String
console.log((typeof 1));          //number
console.log((typeof true));       //boolean
console.log((typeof undefined));  //undefined
console.log((typeof null));       //object
```
---

オブジェクトの[[Class]]を用いた判定
-
様々なオブジェクト(Object、Array等)の判別は出来ない。しかし、「型」の判定をしたいと言う場合、実際にはArrayやObjectの区別をしたい場合が多い。
そこで、Object.prototype.toStringを用いて、オブジェクトの[[Class]]内部プロパティを取得する方法がしばしばとられる。出力は、[object [[Class]]]という形式。

```javascript
let toString = Object.prototype.toString

toString.call({});                // [object Object]  
toString.call([]);                // [object Array]
toString.call(function() {});    // [object Function]
toString.call(new Error());       // [object Error]
toString.call(new Date());        // [object Date]
toString.call(JSON);              // [object JSON]
toString.call(Math);              // [object Math]
toString.call(new RegExp());      // [object RegExp]
toString.call(new String('str')); // [object String]
toString.call(new Number(1));     // [object Number]
toString.call(new Boolean(true)); // [object Boolean]
```
---
zshにPATHを通す方法 勉強用


zshにPATHを通す方法 勉強用
-
ホームディレクトリに移動
-
```react
cd ~
```
---
ディレクトを一覧を表示
-
```react
ls -a
```
---
zshrcを開いてPATHを編集
-
```react
open .zshrc
```
---

編集したzshrcを反映させる
-
```react
source ~/.zshrc
```
---
attribute, read_attribute, _read_attribute の違い

## 環境 / Environment

* Rails 6.1.3.1
* Ruby 3.0.1
* OS: macOS

## attribute とは

`attribute` は Rails での ActiveRecord モデルオブジェクト のメソッドで、 属性名を引数として渡すとその値を返してくれます。
ただしこれは モデルの内部でのみ使えるプライベートメソッドとなっています。

そして実態は `_read_attribute` へのエイリアスで、 `_read_attribute` はパブリックメソッドになっています。


### Rails Console での実行例

```ruby
>> u = User.new
=> 
#<User:0x00007fb142bdd288
...
>> u.name = 'a'
=> "a"
>> u.name
=> "a"
>> u._read_attribute('name')
=> "a"
>> u._read_attribute(:name)
=> nil
```

文字列を渡すと値が返りますが、シンボルでは値が `nil` となります。
`u.name` のように、 カラム名をメソッドとして実行した場合にも この `_read_attribute` が実行されます。

#### つまづくポイント

`object.column_name = 1` のように値を代入しても、 `attribute(:column_name)` では値を取得できません。
もし メソッド `column_name` をオーバライドしてしまった場合で、 属性値を直接取得したい場合は、 下の `read_attribute` を使う必要があります。

## read_attribute とは

`read_attribute` は、 `_read_attribute` と同様に属性値を返すメソッドですが、 `_read_attribute` よりも複雑な処理を行います。
引数を文字列に変換する処理を行っているため、シンボルを引数とした場合でも正しく属性値を返します。

### Rails Console での実行例

```ruby
>> u = User.new
=> 
#<User:0x00007fb142bdd288
...
>> u.name = 'a'
=> "a"
>> u.read_attribute('name')
=> "a"
>> u.read_attribute(:name)
=> "a"
```

文字列を渡した場合でも、シンボルを渡した場合でも、同じ結果となっています。
内部的に、引数を文字列に変換しているため、シンボルを渡しても文字列と同じ結果となります。

## 定義

紹介した3つのメソッドは、 ActiveRecord で定義されています。

```ruby:read.rb
module ActiveRecord
  module AttributeMethods
    module Read
      def read_attribute(attr_name, &block)
        name = attr_name.to_s
        name = self.class.attribute_aliases[name] || name

        name = @primary_key if name == "id" && @primary_key
        @attributes.fetch_value(name, &block)
      end

      # This method exists to avoid the expensive primary_key check internally, without
      # breaking compatibility with the read_attribute API
      def _read_attribute(attr_name, &block) # :nodoc
        @attributes.fetch_value(attr_name, &block)
      end

      alias :attribute :_read_attribute
      private :attribute
```

## 実はその昔...

昔の Rails (たとえば version 3.0.1) では このような違いはありませんでした。

`attribute` も `read_attribute` も ActiveRecord 6.1.3.1 と同じように `read.rb` で定義されていましたが、 シンボルを渡した場合でも文字列を渡した場合でも、 同じ結果を返していました。 そのとき `_read_attribute` は存在しませんでした。

```ruby:read.rb
def read_attribute(attr_name)
  attr_name = attr_name.to_s
  attr_name = self.class.primary_key if attr_name == 'id'
  if !(value = @attributes[attr_name]).nil?
    if column = column_for_attribute(attr_name)
      if unserializable_attribute?(attr_name, column)
        unserialize_attribute(attr_name)
      else
        column.type_cast(value)
      end
    else
      value
    end
  else
    nil
  end
end

def attribute(attribute_name)
  read_attribute(attribute_name)
end
```
GitHubからダウンロード→再アップロード 勉強用

※修正したものだけをアップロードする方法。
-
github上のリモートリポジトリーにある
「Clone or download」ボタンを押してURLをコピーする。

---
ローカルにダウンロード
-
githubのリモートリポジトリーURL

```git
$ git clone [URL]
```
---
変更したファイルを追加
-

```git
$ git add .
```
---
変更したファイル名をインデックスに反映
-

```
$ git add ****.html[変更したファイル名]
```
---
変更箇所をコミット
-

```git
$ git commit -m "変更箇所"
```
---
リモートリポジトリに変更を反映
-
```git
$ git push
```
---
第二回日本最強プログラマー学生選手権 備忘録

https://atcoder.jp/contests/jsc2021

A - Competition

店1：1パック　XgをY円で販売
店2：1パック　Zg 店1よりg単価が安くなり、かつ最大の整数値段はいくらか？

それぞれの単価を出して、計算する。
Y/X*Zがちょい高くなるよう設定すればよい。
整数の時はそのまま出力だと同じ値段になるので1円足す。
割り切れない場合はそのまま出力。

```php
#include <bits/stdc++.h>
#include <math.h>
using namespace std;

int main() {
  long double X,Y,Z;
  cin>>X>>Y>>Z;
  int A;
  long double B;
  int ans=0;
  A=Y/X*Z; //整数
  B=Y/X*Z; //浮動小数

  if(B>A){ //小数以下がある場合
  ans=(Y/X)*Z;
  }
  else{ //小数点以下がすべてゼロ
  ans=(Y/X)*Z-1;
  }
  
  if(ans<0){
    cout<<"0"<<endl;
  }
  else{ 
  cout<<ans<<endl;
  }
  }
```

B - Xor of Sequences
整数列 A,Bがある。
A, Bで片方にだけ出現する整数を、昇順に出力する。

map関数を使う。
A,Bそれぞれをmap Cにぶっこむ。
求めたい数字は1のやつだけを出力すればよい。
出力時に数字間の" "をわすれずに。

```php
#include <bits/stdc++.h>
#include <math.h>
using namespace std;
 
int main() {
  int N,M;
  int A[1100];
  int B[1100];
  cin>>N>>M;
  map<int, int> C;
  for(int i=0;i<N;i++){
    cin>>A[i];
    C[A[i]]=C[A[i]]+1;
  }
  for(int i=0;i<M;i++){
    cin>>B[i];
    C[B[i]]=C[B[i]]+1;
  }
  for(int i=0;i<1001;i++){
    if(C[i]==1){
      cout<<i<<" ";
    }
  }
}
```
JS基礎①

#概要

JavaScriptの役割とJSの主なアウトプットについての記事です。

#JSできること

JSでできることは以下になります。
①ユーザーが入力した情報を含むWebページ上の情報を読み取る。
②ユーザーからのアクションによって処理を呼び出す。
③Webページを書き換える。
③Webページに動きを与える。
④情報をもとにブラウザのストレージに記録する。*ストレージとはデータを保存する場所のことです。

#JS出力までの流れ

インプットからアウトプットまで
①イベントの発生(ユーザがクリックしたとき、もしくはスライドしたときなど)
②インプット(HTML/CSSから情報を読み取る)
③加工(イベントに伴う処理、情報からの計算など)
④アウトプット(HTML/CSSを書き換える、処理に伴う結果を出力する)


#大事なポイント

JSを書くときに最低限必要になるのは3つです。このポイントを押さえながら、コードを書いていくことをおすすめします。

①HTML/CSSの情報を読み取る
②その情報をもとに加工
③HTML/CSSを書き換える

#具体的な書き換え
①タグに書き込まれたテキストの書き換え
②要素の追加、削除
③タグ属性を書き換える
（例）

```index.html
<img src="image.png" >
```
srcが属性値、image.pngが属性値になります。
③CSSの値の変更
（例）テキストの色、背景画像の変更


#具体的な情報の読み取り
①郵便番号の読み取り
②入力文字数の読み取り
③ブラウザの開かれた時間

#アウトプットの場所
JSの主なアウトプットは以下のようになります。

①コンソールにアウトプット
②ダイアログボックス
③HTML/CSSへのアウトプット

#出力してみよう

では、早速出力していきましょう。

```index.js
console.log('HELLO!');
```

ブラウザのコンソールタブにHELLOと出力されました！

このconsoleからオブジェクトが始まっています。

#オブジェクト

<<誰々は何何をどうしなさい>>

①console　▶オブジェクト
(history,document,location,windowなど)
オブジェクトはJSが指示を出す相手になります.つまり誰にの部分になります。

②('HELLO!') ▶パラメータ
指示に必要な情報になります。何々をに当たります。
ちなみに'',""どちらでも良いです。

```index.js
console.log("It's OK");
```
しかし、このように文章中に'シングルクォーテーションが入る場合などはダブルクオーテーションにしないとエラーの原因になります。
使い分けましょう。

カッコ内にも種類があります。

```index.js
 console.log('あいうえお'); //文字列　あいうえお
 console.log('3+2');　　//文字列3+2
 console.log(3+2);    //数式5
```
と表示されます。

③log('HELLO!')　▶メソッド
オブジェクトにさせたいことです。どうしなさいに当たります。
()内のテキスト、数式の計算をさせます。

#文字と文字列

```
あ▶文字
あいうえお▶文字列
```

文字列結合といいます

```index.js
 console.log('チョコ' + 2 + '枚'); // チョコ2枚
```
はじめてC++で画面を作ろう! (2) プロジェクト作成

これから、C++言語を始める人が最初にぶち当たる「壁」、「開発環境のセットアップ」を突破した人に贈る、次の一歩、「プロジェクトを作る」

※説明は、Windows10 64bit版が前提条件とします。

面倒な「Microsoft C++ Build Tools」(MSVCxxx.DLL)を使わず、GCC/Clangコンパイラだけでも、そんなに影響していない。

#5.Qt Creatorの起動(前回のおさらい)
c:/msys64/mingw64/bin/qtcreator.exeファイルをダブルクリックして、起動!!
ショートカットを作っとけば、起動が楽になります。

#6.プロジェクトを新規作成する
6-1. QtCreatorの初期画面には、4個のボタン「プロジェクト」,「サンプル」,「チュートリアル」,「マーケットプレイス」が表示されているので、``「プロジェクト」``をクリック
6-2. 2個のボタン「New」,「Open」が表示されるので、```「New」```をクリック
6-3. 新しいプロジェクト画面で``「Application (Qt)」``をクリック
6-4. 続けて``「Qt Widget Application」``をクリック
6-5. ``「選択」``ボタンをクリック
6-6. __パス__設定　名前: 「無題」が初期値になっているので、ここは、__練習のため「hello」__に変更して、パス:は、プログラムを保存するフォルダーを指定して、``「次へ」``ボタンをクリック
6-7. __ビルドシステム__設定　ビルドシステム:「qmake」を「CMake」に変更して、``「次へ」``ボタンをクリック
6-8. __詳細__設定　クラス名,基底クラス,ヘッダーファイル...は、そのままで、``「次へ」``ボタンをクリック
6-9. __Translation__設定　翻訳は、設定しないので、``「次へ」``ボタンをクリック
6-10. __キット__設定　「Desktop Qt MinGW-w64 __32bit__(MSYS2)」のチェックを外し、``「Desktop Qt MinGW-w64 64bit(MSYS2)」``にチェックを入れて、``「次へ」``ボタンをクリック
6-11. __概要__設定　プロジェクト管理も、そのままで、``「次へ」``ボタンをクリック

すると、``「hello」``のC++コードが画面で出てくる!!
__Qt Creator__を使えば、プロジェクトの雛形を自動で、作ってくれる!!

画面の左の``「hello」``は、ツリー構造になっているので、ぞれぞれを開くと既に最小限のプログラムが書かれている!!

#7.実行!!
とりあえず、画面の左下にある、右三角マークの``「実行」``ボタンをクリックすると、何やら右下側にビルドしている状況が表示され、___「MainWindow」___が出てきた!!　動いているぞ!!

作った___「MainWindow」___は、普通のアプリと同じ、サイズ変更したり、位置を動かしたりできる。
普通のアプリと同様に``×``ボタンで終了する。

今回は、ここまで次回は、メニューを作ろう!!です。
【Javascript】Promiseをいろいろ試してみた・Promiseチェーンthen(No.２）

# 初めに
前編に続き、Promiseについて学習した内容を纏めてみました。今回はPromiseを使って非同期処理を連続で行う方法についてoutputします。

前編：https://qiita.com/redrabbit1104/items/02bc16cf5abd4ed10ec1

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

# Promiseチェーンの概念
Promiseの非同期処理を一つの処理が終わったら次の処理へと連続して行うためにPromiseチェーンを利用します。ここで登場するのがthen()メソッド。「.then」で繋げると「.then」の前のPromiseの結果をまた入力値として非同期処理を行えます。処理が成功(fulfill)した時は成功した結果を、失敗（reject)した場合は失敗した結果を返します。この時エラーの処理はcatch()メソッドで行います。
![スクリーンショット 2021-04-29 7.56.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/4f1fb157-9a5e-9c4f-af3a-b127cf00a982.png)

# Promiseチェーンthenで繋げる

まずはtestPromiseという関数を作りました。inputNumberに好きな数字を入力すると数字が200以上場合にそれを半分に割った結果を返します。処理が失敗した場合は'数字が200以下です'というメッセージが出るようにしました。

```javascript
   function testPromise(inputNumber) {
      return new Promise((resolve, reject) => {
        if (inputNumber > 200) {
          let devideTheInput = inputNumber / 2
          resolve(devideTheInput);
        } else {
          reject('数字が200以下です')
        }
      })
    }
```
次は先程定義した関数を.then()メソッドで繰り返して非同期処理をするようにしてみました。 thenで繋げた後の戻り値はresult1,result2,...などで受け取ります。戻り値の名前はresult1以外に自分の好きな名前で構いません。また、戻り値のresult1をtestPromiseの引数にしてPromiseチェーンを起こします。1000を3回２で割ると3回目には125になり、失敗（reject）します。

```javascript
testPromise(1000).then(result1 => {
      console.log(result1);
      return testPromise(result1);
    }).then(result2 => {
      console.log(result2);
      return testPromise(result2);
    }).then(result3 => {
      console.log(result3);
      return testPromise(result3);
    })
```
console画面は以下の通り。
![スクリーンショット 2021-04-29 8.13.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/3281758d-6954-0e4c-777f-38e4db4020f6.png)

# Promiseチェーンのエラー処理catch
エラーが出た場合は処理を止まりますが、その際の処理を.catch()メソッドで行います。お好みの処理ができますが、今回は入力値を100にして、エラーが出たらconsoleに「これ以上処理は続けられません。」と表示させてみました。

```javascript
  testPromise(100).then(result1 => {
      console.log(result1);
    }).catch(e => console.log('これ以上処理は続けられません。'));
```
結果は赤文字ではなく、黒文字で「これ以上処理は続けられません。」と表示されます。
![スクリーンショット 2021-04-29 8.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/38904f76-6b9c-61f1-6b2b-96aca73011b1.png)

# 参考サイト
https://qiita.com/kiyodori/items/da434d169755cbb20447
https://qiita.com/Takagi_/items/84b4a2184f42ee77867c
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises
https://hirocorpblog.com/post-383/
pythonでgnuradio その8

#概要

pythonでgnuradioやってみた。
FM変調を聞く、見る。
信号は、440ｈｚのサイン波、搬送波は、16KHZ。

#写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/8949b50a-61ac-c961-eac2-b589540bbbe2.jpeg)


#サンプルコード

```
from gnuradio import gr
from gnuradio import blocks
from gnuradio import analog
from gnuradio import filter
from gnuradio import audio
from gnuradio import qtgui
from PyQt4 import Qt
from PyQt4 import QtGui, QtCore
import sys
import sip

class my_top_block(gr.top_block):
	def __init__(self):
		gr.top_block.__init__(self)
		self.qapp = QtGui.QApplication(sys.argv)
		self.samp_rate = samp_rate = 32000
		self.qtgui_sink_x_0 = qtgui.sink_f(1024, filter.firdes.WIN_BLACKMAN_hARRIS, 0, samp_rate, "", True, True, True, True, )
		self.blocks_vco_f_0 = blocks.vco_f(32000, 16000, 1)
		self.blocks_add_const_vxx_0 = blocks.add_const_vff((1, ))
		self.audio_sink_0 = audio.sink(samp_rate, '', True)
		self.analog_sig_source_x_1 = analog.sig_source_f(samp_rate, analog.GR_COS_WAVE, 440, 0.3, 0)
		self.connect((self.analog_sig_source_x_1, 0), (self.blocks_add_const_vxx_0, 0))
		self.connect((self.blocks_add_const_vxx_0, 0), (self.blocks_vco_f_0, 0))
		self.connect((self.blocks_vco_f_0, 0), (self.audio_sink_0, 0))
		self.connect((self.blocks_vco_f_0, 0), (self.qtgui_sink_x_0, 0))
		pyQt = self.qtgui_sink_x_0.pyqwidget()
		pyWin = sip.wrapinstance(pyQt, QtGui.QWidget)
		self.top_widget = Qt.QWidget()
		self.top_layout = Qt.QVBoxLayout(self.top_widget)
		self.top_layout.addWidget(pyWin)
		self.top_widget.show()

if __name__ == "__main__":
	tb = my_top_block();
	tb.start()
	tb.qapp.exec_()
	tb.stop()



```

以上。
いまさらC/C++の学習

Windows環境でC/C++について勉強していく。

環境：Windows10 ＋Visual Studio Community2019

# 1. Visual Studio設定
## 1-1.SDLチェックの無効化
無効化しない方が良いが、とりあえず昔のソースを使用したい場合などのために。
sanfなどでエラーになった場合の暫定対応。

プロジェクトのプロパティで、[C/C++]-[全般]-[SDLチェック]の値を「はい(/sdl)」から「いいえ(/sdl-)」に変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187121/17ca4733-4e35-849e-6648-e8f0d9d0d68b.png)

#2.コード

## 2-1. 変数とポインタの基本

||変数|ポインタ|
|:---|:---|:---|
|宣言|int a = 1;|int *b = NULL;|
|アドレスの確認|&a;|b;|
|値|a;|*b;|


# 3.Tool

## 3-1.Google Test

### 3-1-1.困ったこと

■ヘッダファイルが見つからない
テスト用プロジェクトのプロパティで、「VC++ディレクトリ」のインクルードディレクトリで、
自身のディレクトリから1階層上に上がり、対象プロジェクトを指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187121/d993d3e6-9887-2734-c3dd-df43334042d0.png)

## 3-2.log4cpp

### 3-2-1.困ったこと
■コンパイルに失敗した
以下を参考に、とりあえず、log4cppのプロジェクトを右クリックし、
プロパティ⇒C/C++⇒プリプロセッサにある
プリプロセッサの定義にHAVE_SNPRINTFを追加したらdllが出来た。
http://piyolog6.blogspot.com/2016/08/vclog4cpp.html

■プロジェクトから使えない


## 4-3.spdlog

### 4-3-1.インストール
ヘッダーファイルを取ってきて、プロジェクト直下に「spdlog」ファイルを配置。
プロジェクトのプロパティで[c/C++]-[全般]にある「追加のインクルードディレクトリ」で【$(ProjectDir)】を指定する。

### 4-3-2.ソース

```cpp:main.cpp
#include <iostream>
#include "spdlog/spdlog.h"

#include "spdlog/sinks/basic_file_sink.h"
#include "spdlog/logger.h"

int main()
{
    std::cout << "Hello World!\n";
    auto file_logger = spdlog::basic_logger_mt("basic_logger", "basic.txt");
    file_logger->info("hello!");
    // デフォルトのLoggerに登録
    spdlog::set_default_logger(file_logger);
    spdlog::info("Some info Log here!!!");
}

```

# 4.自分の規約

チーム開発するときの規約を考える。

## 4-1. プロジェクト開始前

### 4-1-1.ソリューションとプロジェクトは分ける

ソリューションファイルとプロジェクトファイルの場所は分ける。

×ダメな例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187121/71607d15-4b7f-d180-d47c-30ef6281e96c.png)

〇良い例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187121/e0c3e2d4-6162-5566-7af6-c473bed66f8b.png)

ソリューションを作成した後に自動的に作られる同名のプロジェクトを削除して、
ソリューションフォルダの下に、自分でプロジェクトを追加する。
なるべく階層構造にしていく。
なおプロジェクトを削除してもプロジェクトファイルは自動で削除されない模様。

## 4-2.コーディングルール

### 4-2-1.コメント

メソッドに対して、「///」コメントを作成する。

## 4-3.テストのルール

### 4-3-1.テストファイル名

テスト対象クラス+Test+(OK or NG)とする。

例)「Format.cpp」のテストを行う場合は、「FormatTestOK」と｛FormatTestNG」を作成する。
【Rails6】devise_auth_tokenを用いたOmniauthのSNS認証でパスワードのバリデーションを突破する方法

Omniauthを用いたSNS認証を実装している際にパスワードがバリデーションに引っかかる事象が発生。
具体的には

- パスワードが英大文字、英小文字、数字の混合であること
- パスワードが6文字以上20文字以下であること

これらのバリデーションに引っかかった。
その時の解決法をメモ

## 結論…set_random_passwordメソッドをオーバーライドし、修正

https://github.com/lynndylanhurley/devise_token_auth/blob/master/app/controllers/devise_token_auth/omniauth_callbacks_controller.rb

より、devise_auth_tokenの一次ソースを参照していた際にset_random_passwordメソッドを発見。
こいつがパスワードを自動生成していたようだ。

元のメソッドでは

```ruby
 def set_random_password
   # set crazy password for new oauth users. this is only used to prevent
   # access via email sign-in.
   p = SecureRandom.urlsafe_base64(nil, false)
   @resource.password = p
   @resource.password_confirmation = p
 end
```

このようになっているが、このpって値が上記バリデーションに引っかかる仕様となっていた。

これをオーバーライドし以下のように修正。英小文字、英大文字、数字を必ず含む形式にしている。

```ruby
def set_random_password
  # パスワードのバリデーション突破のためにオーバーライド
  random_password = SecureRandom.alphanumeric(10) + [*'A'..'Z'].sample(1).join + [*'a'..'z'].sample(1).join + [*'0'..'9'].sample(1).join
  @resource.password = random_password
  @resource.password_confirmation = random_password
end
```

これにて解決
JavaScript:「Vanilla JS」どころではないジョークフレームワーク。

[Vanilla JSはジョークフレームワーク。普通のJSのこと。](https://qiita.com/tyoukan__/items/e4582c6774748b7f96cd)

> Vanilla JS とは
単にJavaScriptのことです。ネイティブのJavaScript。

http://vanilla-js.com/

Vanilla、「バニラ」のjsなんて言われ方にはだいぶ慣れたのですが、同じ勢いのネタフレームワーク (?) をいくつか見かけ書き留めていたのがたまったので、その寄せ集めです。


## vapor.js

https://github.com/madrobby/vapor.js

> The World's Smallest & Fastest JavaScript Library

使い方は以下。

```html
<script src="vapor.js"></script>
```

>On modern browsers, you can inline it with a data URL:

データURLなら以下だと言っている。

```html
<script src="data:application/javascript,"></script>
```

https://qiita.com/poruruba/items/0d57d5b157a97a79dba6


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/93a4e18b-8ba2-96d7-dfec-c261c5e81dc3.png)
**空です。**


## semicolon.js (1) 

https://github.com/madrobby/Semicolon.js

> Semicolon.js — a more secure and reliable Vapor.js

使い方は以下。

```html
<script src="semicolon.js"></script>
```
あるいは以下。

```html
<script>;</script>
```

＿人人人人人人人＿
＞　セミコロン　＜
￣Y^Y^Y^Y^Y^Y^￣


まあJavaScriptでセミコロン忘れると大変ですってことですね。

https://qiita.com/riku-shiru/items/dce12248947f7f33aecc

## semicolon.js (2)

https://github.com/dchest/semicolon-js

> Semicolon.js — the most useful JavaScript library for cargo cult programmers

セミコロン.js もう一つあった。作者曰く、コードにセミコロンを前置するおまじない（以下）が流行ってしまっていることを憂慮し、作ったようだ。

```js
;var x = 1;
return x;

```

> How is it different from vapor.js or earlier semicolon.js?
These frameworks are jokes; my Semicolon.js is a real deal and comes with ideology (see above).
vapor.jsや以前のsemicolon.jsとどう違うのですか？
これらのフレームワークはジョークです。一方私のSemicolon.jsは本物で、イデオロギーもついています。

いずれのsemicolon.jsも思うところはおそらくどちらも同じと思われる。


## five.js

https://github.com/jackdclark/five

https://five.js.org/

抜粋すると

```js
five.chinese() // 五
five.chinese('pinyin') // wǔ
five.chinese('financial') // 伍 
five.japanese() // 五

```

ピンインも用意している辺り芸が細かいです。
何が面白いのかなあと思いますが

```js
five.high(); // 'o/'
```

これがやりたかったのかな。ハイファイブということらしい。

## faker.js

https://github.com/marak/Faker.js/

これは別にネタというわけではない（むしろ便利なのかもしれない）ですが以下の通り、フェイク（ダミー）のデータを生成してくれるもの。

https://rawgit.com/Marak/faker.js/master/examples/browser/index.html#address

日本語データも作れそう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/0ae7d81f-9690-767e-6b9e-aec5c00516d8.png)

## trump.js

https://github.com/bullgit/trump.js


> I don't want any of those images that aren't from my server!

最近見られなくなっちゃいましたね。前大統領。

```html
<script type="text/javascript" src="./js/trump.js"></script>
``` 

等などで使うと、img タグの中から他所からきている img を見つけ出し

使用前：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/aebbafbb-bdf3-46cd-4b9e-e9d489ddfb43.png)
使用後：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/13a5edb1-5df1-b35b-af8d-011871200cfa.png)

といった感じでよそ者に対して強めに主張してくれるライブラリです。
中身はこのようでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/425c56b1-ecb4-6e39-7bc3-ccd008be7928.png)

**MAKE THE WEB GREAT AGAIN**
お後がよろしいようで。面白おかしく風刺できるセンスと知識って素敵

## まとめ
どちらかというとソースコードやネタの意味が勉強になります。お楽しみいただけたらさいわいです。
Vagrant仮想化環境でDocker Composeのボリューム永続化しようとしてハマったこと

Vagrant 仮想化環境で Docker Compose を使った際にちょっとハマったのでメモ。

##なにがあったのか

仮想化ホストOS：Windows10
仮想化ソフト：VirtualBox＋Vagrant
ゲストOS:Ubuntu20.4

コンテナ：
https-portal
nginx
mysql

以上のような構成で docker-compose up しても、https-portal と mysql のステータスが Restarting を繰り返しててうまくいかなかった。

##なにがだめだったのか

結論から言うと、https-portal と mysql の永続化ボリュームを、Vagrant の共有ディレクトリ内に作成していたためでした。

```yaml:docker-compose.yml
  mysql:
    （中略）
    volumes:
      - ./build/mysql/initdb:/docker-entrypoint-initdb.d
      - ./db:/var/lib/mysql
  https-portal:
    （中略）
    volumes:
      - ./cert:/var/lib/https-portal
```

docker-compose.yml のあるフォルダは Vagrant と共有していたので、これだと db フォルダと cert フォルダの場所が Vagrant で共有しているフォルダ内にできてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106969/202c71a5-5179-507d-ffc5-5e89e4dc5f79.png)
https-portal の証明書ファイルなどのオーナーが vagrant になってしまうのでだめみたいでした。

##どう解決したか

db フォルダと cert フォルダの場所を Vagrant で共有しているフォルダ外になるようにしたらうまくいきました。

```yaml:docker-compose.yml
  mysql:
    （中略）
    volumes:
      - ./build/mysql/initdb:/docker-entrypoint-initdb.d
      - ../db:/var/lib/mysql
  https-portal:
    （中略）
    volumes:
      - ../cert:/var/lib/https-portal
```

以下の図のように共有フォルダ外に作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106969/16da94e9-080d-400a-db33-ff729ab9c7f4.png)
Vagrantfile の config.vm.synced_folder に mount_options を指定することでも解決できるのかもしれませんが、db フォルダと cert フォルダは Windows でいじりたいものではなかったので共有しないという選択を取りました。今後、アプリを入れる www フォルダで権限絡みの問題が発生したときには mount_options を検討してみようと思います。
The Ruby zlib extension was not compiled

## rbenv で特定のバージョンがインストールできない場合

```
% rbenv uninstall 2.7.1

BUILD FAILED (macOS 11.2.3 using ruby-build 20200520-14-g1642176)
略
The Ruby zlib extension was not compiled.
ERROR: Ruby install aborted due to missing extensions
Configure options used:
  --prefix=/Users/XXXX/.rbenv/versions/2.7.1
  --with-openssl-dir=/Users/cano/.rbenv/versions/2.7.1/openssl
  --enable-shared
  --with-readline-dir=/usr/local/opt/readline
  CC=clang
  LDFLAGS=-L/Users/cano/.rbenv/versions/2.7.1/lib 
  CPPFLAGS=-I/Users/cano/.rbenv/versions/2.7.1/include 
```

## オプションをつけてインストール

```
% RUBY_CONFIGURE_OPTS="--with-zlib-dir=$(brew --prefix zlib)" rbenv install 2.7.1
```

ダメな場合は

```
% RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local/opt/openssl" rbenv install 2.7.1
```
[Rails]deviseで使えるヘルパーメソッド一覧

## はじめに
個人でRailsアプリケーションを作った際にdeviseを使ったので備忘録として残しておきます。

## deviseのヘルパーメソッドの種類
※下記の`user`の部分はモデル名なので例えば`post`がモデル名の場合は`post`に置き換えてください

| ヘルパーメソッド | 説明|
|:-:|:-:|
|  current_user |  現在ログインしているユーザのレコードを取得する |
|  user_signed_in? |  ユーザーがサインインしていれば`true`、サインアウトしていれば`false`が返ってくる |
| user_session  |  ユーザーのsession情報にアクセスする |
|  configure_permitted_parameters |  モデルにストロングパラメーターを追加します。デフォルトはメールアドレスとパスワードのみ適応されています。 |
| authenticate_user!| ログインしていないユーザーをログインページにリダイレクトさせます。**before_action :authenticate_user!** のように使います。　|

## 補足
**authenticate_user!**
`only`や`exception`でアクションを設定することが多い、例を以下に示す。

```
before_action :authenticate_user! , only: [:show, :edit, :update, :destroy]
 or
before_action :authenticate_user! , except: [:show, :edit, :update, :destroy]
```

**configure_permitted_parameters**
第一引数は下記のように指定できる
・sign_up： 新規登録時
・sign_in： ログイン時
・account_update： 更新時

下記に使用例を示します。

```
before_action :configure_permitted_parameters, if: :devise_controller?

def configure_permitted_parameters
   # サインアップ時にusernameのストロングパラメータを追加
   devise_parameter_sanitizer.permit(:sign_up, keys: [:username, :image])
   # アカウント編集の時にnameとprofileのストロングパラメータを追加
   devise_parameter_sanitizer.permit(:account_update, keys:[:username,:image,:profile])
end
```
[MySQL]PRIMARY KEY制約とUNIQUE制約を変更

主キーを変更する方法をよく忘れてしまうので、自分用のメモとして残します。

## テスト用テーブル

```
CREATE TABLE employee(
 id int NOT NULL AUTO_INCREMENT
,code varchar(45) NOT NULL
,name varchar(45)
,age int
,PRIMARY KEY(id)
,UNIQUE(code)
);

+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | int(11)     | NO   | PRI | NULL    | auto_increment |
| code  | varchar(45) | NO   | UNI | NULL    |                |
| name  | varchar(45) | YES  |     | NULL    |                |
| age   | int(11)     | YES  |     | NULL    |                |
+-------+-------------+------+-----+---------+----------------+

```

## PRIMARY KEY制約とUNIQUE制約を変更

```
ALTER TABLE employee
 DROP PRIMARY KEY
,DROP INDEX code
,ADD PRIMARY KEY (code)
,ADD UNIQUE (id)
;

+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | int(11)     | NO   | UNI | NULL    | auto_increment |
| code  | varchar(45) | NO   | PRI | NULL    |                |
| name  | varchar(45) | YES  |     | NULL    |                |
| age   | int(11)     | YES  |     | NULL    |                |
+-------+-------------+------+-----+---------+----------------+

```
［EXCEL VBA × Chrome］EXCELシートに記載された接続先情報を使ってChromeで自動ログインする

#備忘メモ：Seleniumbasicを使った自動ログイン

## 説明
とあるシステムの管理コンソールに接続するためのURL、ログイン情報等が記載されているEXCELシートの表に[接続]セルを作成し、クリックすることでChromeを使用して自動ログインできるようにする。

## EXCELシートの表の例
|  |A       |B         |C                 |D   |E   |F   |G                  |H   |I   |J   |
|:-|:-      |:-        |:-                |:-  |:-  |:-  |:-                 |:-  |:-  |:-  |
|1 |        |組織情報  |ユーザ用          |    |    |    |管理者用           |    |    |    |
|2 |        |組織コード|URL               |ID  |PW  |    |URL                |ID  |PW  |    |
|3 |○○支店|13412813  |https://hoge/user/|0001|0001|接続|https://hoge/admin/|9001|9001|接続|
|4 |××支店|87237492  |https://hoge/user/|0002|0002|接続|https://hoge/admin/|9002|9002|接続|
|5 |■■支店|68123754  |https://hoge/user/|0003|0003|接続|https://hoge/admin/|9003|9003|接続|
|6 |△△支店|73561841  |https://hoge/user/|0004|0004|接続|https://hoge/admin/|9004|9004|接続|
|7 |※※支店|21828114  |https://hoge/user/|0005|0005|接続|https://hoge/admin/|9005|9005|接続|

##コード
```vb
Public driver As New Selenium.ChromeDriver

Private Sub Worksheet_SelectionChange(ByVal Target As Range)
    
    'http://florentbr.github.io/SeleniumBasic/
    'Download＞Release page＞SeleniumBasic-2.0.9.0.exe
    'Chromeメニュー＞ヘルプ＞Google Chromeについて
    '～94　https://sites.google.com/a/chromium.org/chromedriver/downloads
    '104～　https://sites.google.com/chromium.org/driver/
    'chromedriver.exe を %userprofile%\AppData\Local\SeleniumBasic に上書き
    'ツール＞参照設定＞Selenium Type Library
    
    X = Selection.Column
    Y = Selection.Row
    
    If Not ((X = 6 Or X = 10) And (Y >= 3 And Y <= 7)) Then
        Exit Sub
    End If
    
    url = Cells(Y, X - 3)
    officecode = Cells(Y, 2)
    userid = Cells(Y, X - 2)
    password = Cells(Y, X - 1)
    
    driver.Start ("chrome")
    driver.Get url
    
    driver.FindElementByName("officecode").SendKeys officecode
    driver.FindElementByName("userid").SendKeys userid
    driver.FindElementByName("password").SendKeys password
    driver.FindElementById("login").Click

End Sub
```
rails new ~ でLoadError: cannot load such file -- sqlite3/2.7/sqlite3_nativeのエラーが出る時の解決

#環境
Windows10
Ruby+Devkit 2.7.3-1(x64)
rails 6

#生じた問題
「rails new アプリ名」でアプリを作成した際に「LoadError: cannot load such file - sqlite3/2.7/sqlite3_native」というエラーがでてきました。

```
LoadError: 126: 指定されたモジュールが見つかりません。　　　-C:/Ruby27-x64/lib/・・・

<中略>

Caused by:
LoadError: cannot load such file -- sqlite3/2.7/sqlite3_native
```

#解決策
原因はsqlite3のバージョンがRubyのバージョンに対応していないことだったらしいです。
以下の手順で解決しました！

```
$ gem uninstall -a sqlite3
```

```
$ gem install sqlite3 --platform=ruby
```

#参考記事
[sqlite3起因でrails server失敗した場合](https://qiita.com/kiroku_2018/items/1fe0fdb01b6bcc52d511)
［EXCEL関数］印を付けた列の値を取得する

# 備忘メモ：INDEX関数＋MATCH関数

## 説明
例のような表がある場合に左端と右端の●の位置を取得する関数。

## 関数の例

### 表の例
|   | A | B | C | D | E | F | G | H | I | J  |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:--:|
| 1 |4/1|4/2|4/3|4/4|4/5|4/6|4/7|4/8|4/9|4/10|
| 2 |   |   |   | ● | ● | ● | ● |   |   |    |

### 左端の日付を取得する
```
=INDEX($A$1:$J$1,1,MATCH("●",$A2:$J2,0))
```

### 右端の日付を取得する
```
=INDEX(A1:J1,1,MATCH(1,INDEX(0/(A2:J2="●"),0,0),1))
```
スクロールで下からフェードインする動きを実装したら、ページ内リンクがずれる

JQueryでページスクロールしたら、要素がふわっとフェードインするJQueryを実装した。


```HTML:HTML
<div class="fadeIn">test</div>
<div class="fadeIn">test</div>
```

```Javascript:scroll.js
 $(window).on('load scroll', function (){

	var box = $('.fadeIn');
	var animated = 'animated';
	
	box.each(function(){
	
	  var boxOffset = $(this).offset().top;
	  var scrollPos = $(window).scrollTop();
	  var wh = $(window).height();
  
	  //画面内のどの位置で処理を実行するかで「100」の値を変更
	  if(scrollPos > boxOffset - wh + 100 ){
		$(this).addClass(animated);
	  }
	});
  });
```

```CSS:CSS
.fadeIn {
  transition: 1.5s;
  opacity: 0;
  transform:translatey(100px);
}

.fadeIn.animated {
  opacity: 1;
  transform:translatey(0px);
}
```

これで、HTMLで`fadeIn`のクラスが付与された「test」という文字が
スクロールするとふわっと下からフェードインするようになります。
JQueryでスクロールすると`fadeIn`というクラスに`animated`というクラスが追加されるようにしてあるので、
CSSで指定している●pxの部分が、フェードインする動きの幅になるイメージです。


## transformを使った方が良い


`transform:translatey(●px）;`ですが、
最初はmargin-topにしていました。

```CSS:CSS
.fadeIn {
  transition: 1.5s;
  opacity: 0;
  margin-top: 100px;
}

.fadeIn.animated {
  opacity: 1;
  margin-top: 0px;
}
```

こんな感じで。

そしたら、ページ内リンクの位置がズレる・・・！
margin-topであった100pxがスクロールすることでanimatedクラスが追加されて、なくなってしまうからですね。。

transformはあまり使ったことありませんでしたが
勉強になりました◎
coc.nvim で JSON/YAML Schema による YAML ファイルの補完を行う方法

# はじめに
私は普段 neovim 上で [coc.nvim](https://github.com/neoclide/coc.nvim) を使ったコード補完を行っている。仕事で [JSON Schema](https://json-schema.org/) もしくは [YAML Schema](https://asdf-standard.readthedocs.io/en/1.5.0/schemas/yaml_schema.html) を使って YAML ファイルの記入を補完したくなったので neovim + coc.nvim 環境上で、JSON Schema もしくは YAML Schema を使った YAML ファイル上での補完をセットアップする方法を解説する。 

# セットアップ方法
本稿では coc.nvim は既にセットアップされているものとする。coc.nvim をセットアップしていない人は[適当な記事](https://qiita.com/coil_msp123/items/29de76b035dd28af77a9)を参照してセットアップされたし。

## coc 上で yaml をインストールする
最初に [coc-yaml](https://github.com/neoclide/coc-yaml) をインストールする。リンク先にある通り、

```
:CocInstall coc-yaml
```

と neovim のコマンドで叩くだけである。

## YAML ファイルのスキーマを指定する
スキーマの指定方法には何種類かがある。

### (1) mode line に記述する
対象の YAML ファイルに対して mode line に以下の様な内容を記述する。`<urlToTheSchema>` の部分をスキーマファイルの URL に置き換える。

```
# yaml-language-server: $schema=<urlToTheSchema>
```

### (2) 特定パターンのファイル名に対して特定のスキーマを常に使う
coc の設定ファイルに記述しておくと、coc-yaml は特定パターンのファイル名に対して特定のスキーマを常に（デフォルトで）使うように設定することができる。
coc のプラグインは `CocConfig` で設定を書く決まりなので neovim から

```
:CocConfig
```

と打つ。以下の様なパターンで、用いる JSON Schema の URI を書いていく。個人的には左右逆になってくれる方が分かりやすいのだが、現在編集中の YAML ファイルが右側（リスト）のどれかにヒットしたとき、左側のスキーマ（JSON Schema ファイルもしくは YAML Schema ファイル）を使ってバリデーションや補完を行う。

```
"yaml.schemas": {
    "http://json.schemastore.org/composer": ["/*"],
    "file:///home/johnd/some-schema.json": ["some.yaml"],
    "../relative/path/schema.json": ["/config*.yaml"],
    "/Users/johnd/some-schema.json": ["some.yaml"],
}
```

上記の例で下から２つ目の相対パス記載だが、相対パスで記載するとプロジェクトルートディレクトリ（git リポジトリのルートとか）からの相対パスになるようだ。（「なるようだ」というのは、ドキュメントを読んでもそのような記載はされていないように思えるが、手元で数例試した限りではここに解釈が正しそうに私には思える。）
連想配列、List,Arraylist、キャスト、参照

連想配列は便利だけどメソッドで返せない。

ArraylistかList<T>なら返せる。

Arraylistだと何でもバンバン突っ込めるがObject型なので
明示キャストが必要。あと参照外れる。

List<T>なら当たり前だけどキャスト要らないし参照も外れない。

テスト時にArraylistで組んでて
コードレビュー受けてListにしたらキャストの手間も要らないし
参照も外れないから全件検索の必要なくなるよ
ってコードで言われて赤面しました。

あと配列はシャローコピーとディープコピーがあるらしく
一次レイヤーは値コピー、参照コピーの使い分けができるけど
二次レイヤー以下は参照コピー扱いになっちゃって毎回初期化してた。
ここの解決策ほしい。
vscodeでnode.js開発始める環境作り-Remode-Container

#Remote-Containerって便利
Lambda作るときにサクッとローカル環境つくりたかった。そしてローカル汚したくないのでDocker使おうと思いました。

## 1.ファイルコピー
予め作っておいた`.devcontainer`を作業ディレクトリを作ったらコピーする

```
$ tree .devcontainer
.devcontainer
├── Dockerfile
└── devcontainer.json
```

内容は今のところシンプル。好きに育てればよいです。

``` Dockerfile:Dockerfile
FROM node:14

RUN set -x

```

``` json:.devcontainer.json
{
	"name": "Existing Dockerfile",
	"context": "..",
	"dockerFile": "./Dockerfile",
	"settings": { 
		"terminal.integrated.shell.linux": null
	},
	"extensions": [
		"oderwat.indent-rainbow",
		"ionutvmi.path-autocomplete",
		"chrmarti.regex",
		"wayou.vscode-icons-mac",
		"alefragnani.bookmarks",
		"humao.rest-client"
	]
}
```

## vscode操作

[><]からReopen in Container 選んで実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216527/9f2ed7d1-f265-54ab-f39b-346d895505b4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216527/9c38db88-e551-4f70-db4a-f95f098ac610.png)

## 完成
あとは、`npm init` 使えるようになってるので、どんどん作っていけばいいです。
ローカルでバージョン管理とかやめれるのが良いのかなーと思っています。
[VBA]ExcelにおけるEnum(列挙型)の使い方

## [0]はじめに
Zitanです。
Excelマクロでは、行と列の操作をすることが多いですが、（当たり前ですねw）
ヘッダの項目名を列番号でコーディングすると分かりづらい場合があります。
そこでEnum(列挙型)を使うと、あとでコードを見返したときに見やすいというメリットがあります。

## [1]前提
Excel(2016を使用)を開きます。
Sheet1に下の図のような商品テーブルを用意します。

<img width="200" alt="Sheet1_商品テーブル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/4b833eed-55a7-afd2-9f8a-d82eac616e90.png">

## [2]やること
B列（商品名）のデータが入っている最終行の行番号を取得します。
出力結果が「４」になればOKです。


## [3]Before
```ruby:Enumを使わない場合
Sub test1()

Dim lastRow As Long
Dim SHEET As Worksheet: Set SHEET = ThisWorkbook.Worksheets("Sheet1")
lastRow = SHEET.Cells(Rows.Count, 2).End(xlUp).Row '←ここです
Debug.Print "B列(商品名)のデータが入っている最終行の行番号は" & lastRow & "です。"

End Sub
```

```ruby:出力結果
商品名列のデータが入っている最終行の行番号は4です。
```

## [4]After
※Enumの宣言はSubの上に記述します。
※Enum型は既定でPublicなのでプロジェクト全体で使う場合は省略可能です。モジュール内のみで使用する場合は「private Enum」にします。
※一列目（ID）を1に設定する場合は、明記しないと０が割り振られます。以降省略すると+１ずつ割り振られます。

```ruby:Enumを使った場合
Enum COL
ID = 1
商品名
End Enum

Sub test1()

Dim lastRow As Long
Dim SHEET As Worksheet: Set SHEET = ThisWorkbook.Worksheets("Sheet1")
lastRow = SHEET.Cells(Rows.Count, COL.商品名).End(xlUp).Row '←ここです
Debug.Print "B列(商品名)のデータが入っている最終行の行番号は" & lastRow & "です。"

End Sub
```

```ruby:出力結果
商品名列のデータが入っている最終行の行番号は4です。
```

## [5]まとめ
いかがでしょうか。知っている人にとっては大した内容ではないかもしれませんが、初心者・プログラミング未経験の方にとっては意外と重宝する内容だと思います。開発現場でも割と使います。
GitでリモートリポジトリにPushするまで

#はじめに
チーム開発でgitを利用するためによく使うコマンドを簡単な手順書として残しておきます。

##Gitがリモートリポジトリにアップロードするまで

```
# すべての変更を含むワークツリーの内容をインデックスに追加
$ git add -A

# インデックスに追加されたファイルをコメントを付けてコミットする
$ git commit -am "アプリ初期化"    <- コメントを入力

#リモートリポジトリの変更を、現在のブランチに取り込む(fetch + merge)
$ git pull

#リモートリポジトリに変更を書き込む
$ git push
 or
$ git push origin
```

## Gitの構造
Gitは以下の順番でアップロードされている

```
ワーキングツリー  ->  インデックス  ->  ローカルリポジトリ  ->  リモートリポジトリ
```

* ワーキングツリー : 作業場所
* インデックス : コミットする変更を準備する場所
* ローカルリポジトリ : 変更履歴を記録(ローカル環境)
* リモートリポジトリ : 変更履歴を記録(共有できる)

またgitのコマンドは下記のようにアップロードしていく

* git add : 「ワーキングツリー → インデックス」
* git commit : 「インデックス → ローカルリポジトリ」
* git push : 「ローカルリポジトリ → リモートリポジトリ」

**※インデックスがワークツリーとリポジトリの間にある理由**
理由は、以下の2つ

* ワーキングツリー内の必要ないファイルを含めずにコミットを行える。
* ファイルの一部の変更だけをインデックスに登録してコミットが可能
Appleがシレッと修正していたバグのお話(BigSur11.3, iOS14.5)

# はじめに
どうもこんにちは、３度目の緊急事態に入りました、Toshです。最近開発をしていて原因不明の環境依存のバグに出くわすことが多々あり、解決方法やワークアラウンドも見つからないものに出くわすことが多かったです。
けれど、そういった不具合が実はOSアップデートの際にAppleによってシレッと修正されていたケースがいくつかあったので、紹介していきたいと思います。

# iOS14のorthogonalScrollingBehavior問題
iOS13からCompositionalLayoutが導入され、複雑なレイアウトでも容易に組むことが可能になりました。
その一番のメリットと言えるのがorthogonalScrollingBehavior。これを使用することによって、今まで、TableViewのCellの中にCollectionViewを入れて、FlowLayoutを作成して、といった実装を一行で実装することが可能になりました。

しかし、そんなorthogonalScrollingBehaviorにはiOS14下でのみ発生する不具合が存在していました。
仮に、orthogonalScrollingBehaviorでcontinuousGroupLeadingBoundary
をセットした場合、スクロールしたアイテムは右端で止まりますが、iOS14環境でのみ、一番最後のCellの挙動が期待どうりに動かないと言う不具合がありました。

ちょうどこんなかんじ
![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180994/8b69efc1-5274-6dbc-42c0-a03c5e8de385.gif)


これについては、StackOverflowなどで、議論されていましたが、結局は、解決法もワークアラウンドもなく、ただiOS14.5で修正されただけとなりました。
なので、orthogonalScrollingBehaviorを使用する場合には、iOS14.0~14.4では挙動が一部おかしいので注意してください。

またこれに似た問題として、ScrollToItemもiOS14環境で壊れていたりしたので、CompositionalLayoutはiOS14ではなかなかお粗末な出来だったようです。
https://developer.apple.com/forums/thread/663156

# M1MacのWKWebView問題
M1MacでWKWebViewを使用しているアプリをビルドしようとした際に、iOS13.7以下の端末ではクラッシュすると言うバグもありました。
WKWebViewのインスタンスを生成しようとするだけで、クラッシュすると言うものです。ちなみにターミナルにはログは出ません。
![スクリーンショット 2021-04-28 13.47.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180994/39239e75-6e5d-1b22-3e11-b0fbe1beca26.png)

また、これらのシミュレーターではsafariが起動できないなど、シミュレーターそのもののWebViewに問題を抱えているように見えました。


一応、[リリースノート](https://developer.apple.com/documentation/xcode-release-notes/xcode-12_5-beta-release-notes)の73375522ではXcode12.5のbeta3でしゅうせいされたとあるのですが、実際にはbeta3では修正されておらず、OSをBigSurの11.3へと上げるとバグが発生しなくなっていました。

# まとめ
Appleといえど、人の子。バグは意外と多いものです。原因不明の不具合もOSをアップデートするとこれらのケースのように直ってたりするので、できるだけ最新のOSを使うようにしましょう。
こういったものについては、AppleにWWDCの際には直接聞けたりするのですが、一年に一回となかなか機会がないので、こういった機会を増やして欲しいですね。
[AWS 管理画面] English 表示のススメ

AWSクラウドエンジニアのルビコン([@RubiconLink](https://twitter.com/RubiconLink))です。
最近は本業のかたわら、駆け出しエンジニア向けにAWSのメンターに力を入れています。


## 結論
AWS管理画面は「English」一択だと思っています。
私に騙されたと思って今日から「English」を試してみてください。

## 「日本語」と「English」の見た目
AWSの管理画面を「日本語」で使われている方が多いと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680908/4e6a6a9d-a04f-3a41-baa7-0caf87335157.png)

思い切って「English (US)」に変えてみましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680908/ca468118-ed97-54c2-7ef4-bba90c9e0c09.png)

頭がついていかない気持ち、心の抵抗は良く分かります。
私も英語が決して得意ではありません。
でも慣れてくると逆に「日本語」の方が気持ち悪くなってくる不思議！

なぜか？

## 「English」のメリット

### 1. AWS CLI（awsコマンド）で使う名前と一緒
例えばAWS管理画面で「起動テンプレート」＝「Launch Template」ですが、AWS CLIでも英語ならもちろん同じ表記です。

最初から「起動テンプレート」と覚えるのと「Launch Template (ローンチテンプレート)」で覚えるのでは、全く別のサービスくらいの感覚差があります。

できれば最初からオリジナル・世界共通の名前で覚えてしまいましょう。

```shell
$ aws ec2 create-launch-template --launch-template-name <name> ...
```

### 2. CloudFormation（テンプレによるインフラ自動構築）でも同じく
当然ながらCloudFormationでも英語なら同じ表記です。

```yaml
Type: AWS::EC2::LaunchTemplate
Properties: 
 LaunchTemplateName: <name>
 ...
```

### 3. （外国製あるある） 日本語が変。結局カタカナにしただけ。英語混在
もし日本語で表示させていると、例えば...

- 日本語の中に突然「Elastic IP」← 訳せなかった？？
- 「Auto Scaling グループ」← グループだけカタカナ？？
- CloudFrontの管理画面は全部英語 ← ネットに記事が少ないのはそのせいかも

日本語と英語の混在は読みづらくなります。
だったら最初から全部英語に！

### 4. (冒頭の画像の通り) カタカナは折り返しが多くて、むしろ見づらい
カタカナを使うとやたら名前が長くなるんですよね。
そうすると折り返しされてとても見づらいです。
やはり英語の方がスッキリしたデザインになっています。

### 5. いざ海外で働くとなっても「いつでもOK！」という自信
普段から英語でAWSを操作していれば、海外でもそのまま通用します。
海外に行かなくても海外の人と一緒に働く機会は増えています。
その場合でも抵抗なし！

また公式ドキュメントは英語しかない記事も多いです。
日本語があっても英語の方が正しかったり、新しかったりする場合も多々あります。
英語は結局避けられません。
割り切ってしまいましょう。

## 「English」のデメリット

### 1. マニュアルを書く時・スクショを撮る時・しゃべる時の違い
皆さん「日本語」なので、自分だけ「English」だと言葉が違うんですよね...。
正直、職場でも全員英語画面にさせたいくらいです。

## 改めて
AWS管理画面は「English」一択だと思っています。
私に騙されたと思って今日から「English」を試してみてください。

最後までお読み頂き、ありがとうございました。

## おまけ
週4稼働の現役クラウドエンジニアと並行して、毎日AWSの個別相談やグループ指導もお受けしています。もしご興味あればTwitter [@RubiconLink](https://twitter.com/RubiconLink) のDMまでお問い合わせください。フォローも大歓迎です。