OmniAICreator/Qiita-1.07M huggingface dataset:
IQ Bot トラブルシューティング：UM1117エラー

IQ Botにログインしようとしたときに、以下のエラーが出る場合の対処方法です。
V11系統で、マシン起動後最初のログイン時に出がち。

`{"code":"UM1117","details":null,"message":"Access token expected in the 'X-Authorization' header"}`

![UM1117.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/87726c11-c07b-d83f-a32c-1129f8fb43eb.jpeg)

#対処方法

CRサーバーもしくはIQ Botサーバーを起動したてであれば、しばらく待っていれば解消することもあります。

そうでない場合は、CRサーバーのWindowsのサービスから、Automation Anywhere Control Room Reverse Proxyを再起動すると直ることが多いです。

![対処方法.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/f226a142-3277-3ed0-9fb6-11befe4b9eba.jpeg)

それでもだめなら[Rabbit MQ の再起動](https://qiita.com/IQ_Bocchi/items/01d95043d11878ee2377)を試みます。

これで大抵解決するはず。
injectメソッドについて

現在チェリー本やってます。

その中ででてきた表題の件に関して整理しておきます。

まず、大前提として、to_hexメソッドのリファクタリングの話です。

3段階のリファクタリングで、
①そのまんまのコード
②eachメドレー
③injectメソッドという流れ。

ではまず最初のコードがこちら

```ruby
def to_hex(r,g,b)
 "#"+
  r.to_s(16).rjust(2,"0")+
  g.to_s(16).rjust(2,"0")+
  b.to_s(16).rjust(2,"0")
end
```

rgbを16進数の2文字ずつに変換している感じです。

injectメソッドはeachやmapなどと同様に繰り返し処理のメソッドである。

```ruby
配列.inject(初期値の最初の値) {|初期値, 要素| ブロック処理 }
```

eachメソッドをより短くすることができることがある。

```ruby
def to_hex(r,g,b)
  hex="#"
  [r,g,b].each do|n|
  hex+=n.to_s(16).rjust(2,"0")
  end
  hex
end
```

上記を

```ruby
def to_hex(r,g,b)
  [r,g,b].inject("#")do|hex,n|
  hex+n.to_s(16).rjust(2,"0")
  end
end
```

にできる。


はい。こんな感じでしょうか。

以上。
Amazon Correttoのインストールについて

CentOSにCorrettoをインストールしたい、ただそれだけ。
なので、備忘録。

```
[root@ip-10-140-51-1 jenkins-slave]# cat /proc/version
Linux version 3.10.0-514.26.2.el7.x86_64 (builder@kbuilder.dev.centos.org) (gcc version 4.8.5 20150623 (Red Hat 4.8.5-11) (GCC) ) #1 SMP Tue Jul 4 15:04:05 UTC 2017
```

Amazon Correttoをインストールしたい場合、この手順はAmazon Linuxだけなので、CentOSや他のディストリではこの方式ではインストールできない。(実際やってみると失敗する。)
https://docs.aws.amazon.com/ja_jp/corretto/latest/corretto-11-ug/amazon-linux-install.html


なので、以下のページからrpmファイルのDLリンクを引っ張ってきて、

https://docs.aws.amazon.com/ja_jp/corretto/latest/corretto-11-ug/downloads-list.html

```
[root]#sudo yum install https://xxxxxxxxxx.cloudfront.net/11.0.3.7.1/java-11-amazon-corretto-devel-11.0.3.7-1.x86_64.rpm
```
とすればいける。

```
[root]# java -version
openjdk version "11.0.3" 2019-04-16 LTS
OpenJDK Runtime Environment Corretto-11.0.3.7.1 (build 11.0.3+7-LTS)
OpenJDK 64-Bit Server VM Corretto-11.0.3.7.1 (build 11.0.3+7-LTS, mixed mode)
```

まあ別にlocalinstallでもいいんだけど。
https://docs.aws.amazon.com/ja_jp/corretto/latest/corretto-11-ug/generic-linux-install.html
【JavaScript】文字列の操作いろいろ

##`文字列を操作`##

-　文字列の文字数を取得する
- .length( ) を使う

```javascript
const str = 'hello';

console.log(str.length);
// 実行結果
// 5
```

- 文字列中の指定した文字を取得する
- .substring( )を使う

```javascript
const str = 'hello';
 //定数.substring(開始位置,終了位置）
console.log(str.substring(1,3));
// 実行結果
//el
```

- 配列のような記法で取得することもできる　
※配列と同じ操作はできない

```javascript
const str = 'hello';
console.log(str[1]);
// 実行結果
//e
```

##`配列の要素を結合して文字列にする`##

- join( )を使う

```javascript
const today = [2020, 5, 13];
  //join()の引数に結合するときの文字列を渡す
  //空白でも良い。その場合 join('')とする
console.log(day.join('/'));
// 実行結果
// '2020/5/13'
```
##`文字列を分割して配列化する(上記の逆パターン)`##

- split( )を使う

```javascript
const today = '2020/5/13';
   //split()の引数に渡した区切り文字のところで分割する
console.log(day.split('/'));
// 実行結果
//[2020,5,13]

  //第2引数に個数も指定できる
console.log(day.split('/',2));
// 実行結果
// [2020,5]
```

- 上記の応用で分割代入を使う

```javascript
const today = '2020/5/13';
  //分割した要素を定数に代入する
const[year,month,day] = day.split('/');
console.log(year);
console.log(month);
console.log(day);

// 実行結果
// 2020
// 5
// 13
```
[Rails6] cocoonのインストール方法

# はじめに
railsを最近触り始めたのですが、cocoonに関する日本語の情報がほぼrails5用だったので、rails6にcocoonをインストールする方法を紹介します。cocoonについて説明はしません。多分、[Rails6でjQueryの導入方法](https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13)を参考にしてjqueryをいれておく必要があると思います。

# インストール方法
ありがたい[PR](https://github.com/nathanvda/cocoon/pull/454)があるので、それを活用しましょう。

```:gemfile
gem 'cocoon'
```

```bash
$ bundle install
$ yarn add github:nathanvda/cocoon#c24ba53
```

```js:/javascript/packs/application.js
import 'cocoon';
```

# 参考
[stackoverflow: How to use cocoon gem in Rails 6](https://stackoverflow.com/questions/57974863/how-to-use-cocoon-gem-in-rails-6)

# おわりに
早くマージされるといいですね。
rails5とrails6のjs周りの違いは初心者殺しですよね。
railsのjsまわりの挙動がブラックボックスすぎてなんか知らんけど動くっていうかなり気持ち悪い状態で勉強を進めないといけなくて、ちゃんと理解しながら学びたい私にとってかなり苦痛ですよね。
[Vetur 2339] [E] Property '$store' does not exist on type  'CombinedVueInstance<Vue, unknown, ...

## 症状

以下のように this には $store は無いよ、と怒られます。

```typescript
import Vue from 'vue'
export default Vue.extend({
  methods: {
    hello () {
      const value = this.$store.getters.value
      //                 ^^^^^^
      // [Vetur 2339] [E] Property '$store' does not exist on type 
      // 'CombinedVueInstance<Vue, unknown, ...
    }
  }
})
```

## 対応

以下の記事を参考にさせていただいて、妥協してワーニングを切りました。

```tsconfig.json
{  
  "compilerOptions": {  
    "noImplicitAny": false, 
    "noImplicitThis": false,  
  }, 
}  
```

* [TypeScript 再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に](https://employment.en-japan.com/engineerhub/entry/2019/04/16/103000)


## 検討

なお `"noImplicitThis": false` を指定してしまうと `this` に型推論がされなくなります。

* [Vue2.5 でthisが推論されない](https://forum.vuejs.org/t/vue2-5-this/19731/5)


本来は以下の記事を参考にさせていただいて、Vuex にも型定義をつけたかったのですが、いまは妥協しました。

* [Vuex による状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita](https://qiita.com/potato4d/items/c9c0c8e674f20c85948a)
VisualStudioCodeのLiveShareに参加できない。

# 問題
VisualStudioCodeからLiveShareに参加しようとすると、サインイン後に下記エラーが表示されて参加できない。

```
Joining collaboration session: The user code is invalid or expired. Try signing in again.
```

# 解決方法
1. ブラウザで https://prod.liveshare.vsengsaas.visualstudio.com/auth/login からサインインする。
2. 「問題が発生した場合、ここをクリックしてユーザーコードに関する指示をご確認ください」をクリックする。  
 <img width="445" alt="スクリーンショット 2020-05-13 10.29.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472216/c3fb8727-5bf4-5a1d-ccd7-a8a6c7b793db.png">
3. 表示された手順に従う。  
<img width="446" alt="スクリーンショット 2020-05-13 10.33.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472216/fcc8410d-673e-2889-2645-5fc0d72dfdbe.png">

# 注意
* MacからMicrosoftアカウントで試しました。
* VSCodeの再起動、マシン再起動、拡張機能の再インストールでも解決せず、上記手順にて解決。
* issueに動きがあるので、そのうち解消しそう。
    * https://github.com/MicrosoftDocs/live-share/issues/3216
* 公式のトラブルシューティングを先に試すべきだったかも。
    * https://docs.microsoft.com/ja-jp/visualstudio/liveshare/troubleshooting
Rubyメモ

# 概要
Rubyの記法で調査したメモ

# 前提
Ruby初心者

# Rubyの文字列表記法
## 文字列を正規表現として扱う。

```Ruby:
/Ruby正規表現/
```

※正規表現の詳細は[公式](http://docs.ruby-lang.org/ja/latest/doc/spec=2fregexp.html)にて

## 文字列に変数の値を含む

```Ruby:
:test = "てすと"
puts "いめーじ：#{test}"
```

## 変数名と同じ文字列や特殊記号を、文字列として扱う（「.」など）
※「"」で表現する場合、「"\\."」とするためURLなどの場合に使用するイメージ。

```Ruby:
:test = 'test.com'
puts test
```
【axios】axiosを使用してLiquid APIを叩き、node.jsで実行

初学者ですが自分のメモの意も含め、誰かのお役に立てたらと思い執筆します。
タイトルの通りaxiosを使用して、APIを叩き、node.jsで実行してBTC/JPYをコンソール上に出力します。
今回は認証不要なPublic APIを使用。
補足情報やアドバイスがあれば、ぜひコメントいただければ幸いです。

##参考元
Liquid API ドキュメント：https://developers.liquid.com/
https://kennejs.com/entry/2019/01/23/001715
https://qiita.com/shisama/items/61cdcc09dc69fd8d3127

##環境
macOS Mojave 10.14.6

##事前準備
node.jsのインストール
https://qiita.com/oreo3@github/items/622fd6a09d5c1593fee4

yarnのインストール
https://classic.yarnpkg.com/ja/docs/install/#mac-stable

axiosのインストール
https://github.com/axios/axios#installing

##axiosって何？
https://www.willstyle.co.jp/blog/2751/
公式：https://github.com/axios/axios

##ソースコード
```sample.js
const axios = require("axios").default;

let url = "https://api.liquid.com";
let path = "/products/5";
let query = "";

axios
  .get(url + path + query) //指定した引数へリクエストを送る
  .then((res) => {
    const items = res.data;
    console.log(items.last_traded_price, items.market_bid, items.market_ask);
  })
  .catch((error) => {
    const { status, statusText } = error.response;
    console.log(`Error! HTTP Status: ${status} ${statusText}`);
  });
```

##まとめ
APIを叩くことも初めてだったので、最初は"request"と"axios"を2つとも使用してしまっていました。汗
また、「axios.create」などでインスタンスも作成できるようですが、どんな必要性 or 用途で使用するのかもこれから勉強したいと思います。
単純化したPromiseを作ってみた

単純化したPromiseを作ったらPromiseが分かると思って作ってみた。

# 単純化したPromiseのプログラム[^promise]

```javascript:JavaScript
//CC0 license
class myPromise {
	constructor(executor) {
		executor((value) => {
			this.do_resolve(value);
		});
	}
	do_resolve(value) {
		//setTimeoutを使ってthenの引数関数をTask Queueに追加する。
		setTimeout(() => {
			this.callback(value);
		}, 0);
	}
	then(callback) {
		this.callback = callback;
	}
}

var v_promise = new myPromise((resolve) => {
	console.log('in Promise');

	//resolveをsetTimeoutの引数関数内で呼ぶ。
	setTimeout(() => {
		resolve('a');
	}, 3000);
});

v_promise.then((value) => {
	console.log('in then, value =', value);
});

console.log('last line');
```

# プログラムの出力

```
in Promise // new myPromiseの引数関数は即時実行される。
last line
in then, value = a // 最後の行まで実行してからTask Queueのタスクを実行する。
```

# Task Queueとは？

[イベントループとは一体何ですか？の動画](https://youtu.be/8aGhZQkoFbQ)で説明される。

setTimeoutやonClickで起動された非同期タスクはTask Queueに追加される。
タスクがなくなったらTask Queueからタスクを取り出して実行する。

これはシングルスレッドのJavaScriptが非同期的に並行処理する仕組み。

# Promiseが分かりにくい理由

```javascript:JavaScript
var p = new Promise((resolve) => {
	// 処理
	setTimeout(() => { resolve('a'); }, 3000);
};
```

`(resolve)=>{}`は`setTimeout`と似ており、new Promiseの引数関数がTask Queueに追加されると思うかもしれないが、実は違う。

単純化したPromiseを作ってみて分かったことは、new Promiseの引数関数は即時実行される。

このプログラムは以下のプログラムにリファクタリングできる。

```javascript:JavaScript
// 処理　（Promiseの外に持っていく）
var p = new Promise((resolve) => {
	setTimeout(() => { resolve('a'); }, 3000);
};
```

では`new Promise( (resolve)=>{} )`はなぜ引数関数を渡す形式になっているのだろうか？

`new Promise( (resolve)=>{resolve('a')} )`の引数関数`(resolve)=>{resolve('a')}`は、`( (resolve)=>{resolve('a')} ) ( (value)=>{do_resolve(value)} )`として実行され、`resolve('a')`を実行したとき`do_resolve('a')`を実行するようになっている。

`new Promise( (resolve) => {} )`が引数関数を渡す形式になっているのは、`resolve('a')`を実行したとき`do_resolve('a')`を実行させるため。`resolve`はプログラマーが任意の名前を付けられる。

では`do_resolve`は何をするのだろうか？

`do_resolve`はthenの引数関数をTask Queueに追加する。

# 2つのthenがある場合

PromiseとTask Queueの関係が分かったら、2つのthenがある場合が分かる。

```javascript:JavaScript
var v_promise = new Promise((resolve) => { resolve('b'); });

v_promise.then((value) => {
	console.log("then 1 value =", value);
});

v_promise.then((value) => {
	console.log("then 2 value =", value);
});
```

このプログラムは1回のresolveが2つのタスクをTask Queueに追加する。



```javascript:JavaScript
var v_promise = new Promise((resolve) => { resolve('c'); });

v_promise.then((value) => {
	console.log("then value =", value);
	return 'c2';
}).then((value) => {
	console.log("then value =", value);
});
```

thenがチェーンでつながる場合は1回のresolveが1つのタスクをTask Queueに追加する。


# まとめ

単純化したPromiseを作ってみたら以下のことが分かった。

setTimeoutと似ているから、new Promiseの引数関数がTask Queueに追加されると思うかもしれないが実は違う。
new Promiseの引数関数は即時実行される。
Task Queueに追加されるのはthenの引数関数。

プログラマーが名前をつけたresolveで、resolve('a')を実行したときdo_resolve('a')を実行させるためnew Promiseは引数関数を渡す形式になっている。

[^promise]: Promiseの完全版は[jsdelivr.net](https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js)などで見れる。Promiseの仕様は[promises-spec](https://github.com/promises-aplus/promises-spec)でCC0のパブリックドメインで公開されている。
Netlify Functionsのローカル環境をyarn startで起動する設定

Netlify Functionsの開発、検証用としてローカルでの実行環境が用意されている。netlify-lambdaパッケージをローカルにインストールしている場合、以下のコマンドを実行することで`http://localhost:9000/.netlify/functions/ファンクション名`にアクセスできるようになる。

```sh
% npx netlify-lambda serve src/lambda
```

通常は、ファンクションだけではなく、webページとあわせて起動する必要がある。たとえばwebページをVue.jsで開発している場合、webページは以下のコマンドで起動する。

```sh
% vue-cli-service serve
```

これらをpackage.jsonに登録することで、npmあるいはyarnコマンドで実行できるようになる。さきにファンクションの環境を起動して、しばらくしてからwebページを起動しないと、ファンクションが起動できない。startにwebページの起動、prestartにファンクションの起動と3秒の待機(sleep 3)を設定することで、yarn startでwebページとファンクションが起動できるようになる。

```json:package.json
...
  "scripts": {
    "start": "vue-cli-service serve",
    "prestart": "npx netlify-lambda serve src/lambda & sleep 3",
...
```
Vuexのexamplesを実行する方法

# Vuex入門中
https://vuex.vuejs.org/ja/guide/
をすすめている中で
https://vuex.vuejs.org/ja/guide/structure.html
で
> 参考として Shopping Cart Example をみてみるのもよいでしょう。

とあったが、見るだけじゃなく、実際に動かしてみたかった。

# 手順
1. Vuexクローン
https://github.com/vuejs/vuex.git

1. examplesディレクトリに移動し、ビルドを行う

    ```
    npx webpack
    ```
    を実行したところ、
    既存のpackage.jsonでwebpack-cliが入っていないということなので、指示にしたがって、インストール

1. expressを動かす

    ```
    node server.js
    ```
    私はPORT番号を変えたかったので、

    ```
    PORT=3000 node server.jsとした
    ```
    こうすると、node.jsの環境変数のポート番号指定が変更できる
1. `http://localhost:xxxx` にアクセス
うまく行っていればexamplesが見れるはず

# おわりに
意外と簡単にいけて、nodeすげぇってなった。
もともと動かしたい目的が、色々いじってどうなるか見てみたかったというところなので、ホットリロードしたくなったら、また調査して、記事にしたいと思います。
golang でpostgresにinsert

###　とりあえず一行をInsertしてみた。

```
package main                                                                                       

import (
    "database/sql"
    "fmt"

    _ "github.com/lib/pq"
)

const (
    host     = "localhost"
    port     = 5432
    user     = "postgres"
    password = "1234"
    dbname   = "sample"
)

func main() {
    psqlInfo := fmt.Sprintf("host=%s user=%s password=%s dbname=%s sslmode=disable", host,user,password,dbname)
    fmt.Println(psqlInfo)
    db, err := sql.Open("postgres", psqlInfo)
    if err != nil {
        panic(err)
    }   
    defer db.Close()

    sqlStatement := `
    INSERT INTO account (id) values (30)`
    _, err = db.Exec(sqlStatement)
    if err != nil {
        panic(err)
    }   

}

```

db.Queryで複数行のSelectをしたりする。

参考
[Querying for multiple records with Go's sql package](https://www.calhoun.io/querying-for-multiple-records-with-gos-sql-package/)
[[Go言語] database/sqlパッケージを使ってみた](https://qiita.com/tenntenn/items/dddb13c15643454a7c3b)
Ubuntuで新しいpythonの仮想環境を構築する方法

# 目的
新しいpythonプロジェクトを始める際に、仮想環境を準備する手順を、備忘録として整理します。

# 実行環境
ホストOS： Windows 10 pro
仮想化ソフト： VirtualBox 6.0
ゲストOS： Linux Ubuntu 18.04
統合開発環境： VS Code 1.44.2

# 仮想環境の構築手順
venvを使うと、pipにより導入するパッケージをプロジェクト毎に独立させることができるので便利。
ただし、python 自体のバージョンは管理できないので、必要ならpyenv等の別のツールを用いる。（ここでは説明は割愛）

###1．仮想環境を作成する
```
$ mkdir {new_project_name}
$ cd {new_project_name}
$ python3 -m venv {venv_name} //venv_nameは何でもよいが、使い勝手よいので原則venvとする
```
以下のようなエラー表示が出る場合、python3-venvパッケージがインストールされていないので、aptコマンドでインストールする。

```
The virtual environment was not created successfully because ensurepip is not
available.  On Debian/Ubuntu systems, you need to install the python3-venv
package using the following command.
apt-get install python3-venv

$ apt install python3-venv
```

### 2. VSCodeのワークスペースを作成する

以下の手順で設定用ファイルを作成し、新規ワークスペースとして保存する。
１．以下のコマンドでVSCodeを開く

```
$ cd {Project_Directory}   // new_projectのディレクトリに移動
$ code .  // VSCodeを開く
```

２．.gitignoreファイルを作成する

```
$ echo "/venv" > .gitignore
```

３．ワークスペースとして保存する
File >> Save Workspace As ... を選択すでと、保存ウィンドウが開くので、ワークスペース名を入力して保存する。

今後は以下のコマンドでワークスペースを開くことができる

```
$ cd { Project_Directory }    // new_projectのディレクトリに移動
$ code {new_workspace_name}.code-workspace
```

### 3．githubにリポジトリを作成する
githubのwebサイトから新しいリポジトリを作成する。
下記のサイトの、「4,github上で新規レポジトリを作成」を参考にしてください。

Githubに新規リポジトリを追加
https://qiita.com/sodaihirai/items/caf8d39d314fa53db4db

### 4．ローカル環境とgithubのリポジトリを連携する（ターミナルを利用する方法）
ターミナルから、以下のコマンドを実行する。

```
// 
cd { Project_Directory }    // new_projectのディレクトリに移動
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/{ User_Name }/{ Repository_Name }.git
git push -u origin master
```
githubのユーザー名とパスワードの入力が求められるので、入力しエンターを押す。
以上で完了です。


# 参考資料
venv: Python 仮想環境管理
https://qiita.com/fiftystorm36/items/b2fd47cf32c7694adc2e
PickerInputのeventReactiveの組み合わせ

#はじめに
shinywidgetsのPickerInputとactionButtonを実装したので、メモする。

##コード

```R:ui.r
library(shiny)
library(leaflet)
library(shinyWidgets)



shinyUI(fluidPage(
  
  titlePanel("TEST"),
  
  #sidebarLayout settings
  sidebarLayout(
    sidebarPanel(
      pickerInput(
        inputId = "PickerID", 
        label = "testlabel", 
        choices = LETTERS, 
        options = list(
          `actions-box` = TRUE, 
          size = 7,
          `selected-text-format` = "count > 3"
        ),
        multiple = TRUE,
      ),
      actionButton("do","RUN!")
    ),
    #mainpanel settings
    mainPanel(
      textOutput("distText")
      )
    )
  ))
```

```R:server.r
library(shiny)
library(leaflet)
library(dplyr)
shinyServer(function(input, output) {
  
  output$distText <- renderText({
    print(outtext())
  })
  
  outtext <- eventReactive(input$do,{
    print(input$PickerID)
    return(input$PickerID)
  })
})

```

＃おわりに
`actionButton`の位置を間違えてせいで1時間以上苦戦してしまった。。。
【JavaScript】オブジェクト配列（連想配列）の操作いろいろ

##`オブジェクト配列（連想配列）のプロパティ（値）にアクセスする`##

- キーを指定する(2パターン)

```javascript

const fruits = {
  banana: 150,
  orange: 200,
};
  //１つめのパターン
console.log(fruits.banana);

  //２つめのパターン
console.log(fruits['banana']);

// 実行結果はどちらも同じ
// 150

```

##`オブジェクト配列（連想配列）のプロパティ（値）を操作する`##

-上記と似たやり方でプロパティを書き換える

```javascript
const fruits = {
  banana: 150,
  orange: 200,
};

  //１つめのパターン
fruits.orange = 300;
console.log(fruits['orange']);

  //２つめのパターン
fruits['orange'] = 300;
console.log(fruits.orange);

// 実行結果はどちらも同じ
// 300
```

- キーとプロパティを追加する＆削除する

```javascript
const fruits = {
  banana: 150,
  orange: 200,
};
  //strawberryというキーと450というプロパティがfruitsオブジェクト配列に追加される
fruits.strawberry = 450;

  //キーを指定して削除する(ここではbananaを削除)
delete fruits.banana;
```

##`オブジェクト配列（連想配列）でforEach( )を使う`##

- オブジェクト配列（連想配列）はforEach( )を使えないので工夫が必要
- Object.keys( )を使う。Object.keys( )とは配列のキーを取り出すメソッド

```javascript
const fruits = {
  banana: 150,
  orange: 200,
  strawberry: 450,
};
  //fruitsオブジェクト配列（連想配列）のキーを定数（ここではshops)に入れる
const shops = Object.keys(fruits);
  //fruits配列のキーが入ってるshopsからforEach()を使いキーと値を取り出す
shops.forEach(shop => {
  console.log(`${shop} : ${fruits[shop]}`);
}
// 実行結果
// banana : 150
// orange : 200,
// strawberry : 450,
```

##`配列とオブジェクト配列（連想配列）を組み合わせる`##

```javascript
const fruits = [
  { banana: 150, orange: 200},
  { tomato: 100, onion: 120},
  { fish: 250, meat: 500},
];
console.log(fruits[1].onion);
// 実行結果
// 120
```
【Golang】マップ（辞書）

#【Golang】マップ（辞書）
Golangの基礎学習〜Webアプリケーション作成までの学習を終えたので、復習を兼ねてまとめていく。 基礎〜応用まで。

```
package main
//map 連組配列 Pythonでいう辞書
//関数では参照渡しされるので、本体の値も変わる。配列とは違う。


import "fmt"

func main() {
	//宣言
	//mapを作成 pythonの辞書型のような感じ
	//map[キーの型]値の型{中身}
	m := map[string]int{"a": 100, "b": 200}
	fmt.Println(m)
	//>>map[a:100 b:200]
	//値取り出し
	fmt.Println(m["a"])
	//>>100

	//宣言
	//make(map[キーの型]値の型, キャパシティの初期値)
    //make(map[キーの型]値の型)// キャパシティの初期値は、省略も可能
	//初期化。空を作成
	m2 := make(map[string]int)
	fmt.Println(m2)
	//>>map[]

    //宣言
	var m3 = map[string]string{"A":"AAA", "B": "BBB"}
	fmt.Println(m3)
	//>>map[A:AAA B:BBB]




	//上書き
	m["b"] = 300
	fmt.Println(m)
	//>>map[a:100 b:300]

	//追加
	m["new"] = 500
	fmt.Println(m)
	//>>map[a:100 b:300 new:500]

	//無いものを取り出す
	//0が返ってくる
	fmt.Println(m["nothing"])
	//>>0

	//vに値（100）,okはエラーでTrue（False）が返ってくる
	//okは書かなければ無視することもできる
	v, ok := m["a"]
	fmt.Println(v, ok)
	//>>100 true

	v2, ok2 := m["nothing"]
	fmt.Println(v2, ok2)
	//>>0, false




	//追加
	m2["pc"] = 5000
	fmt.Println(m2)
	//>>map[pc:5000]


	//削除
	delete(m2, "pc")
	fmt.Println(m2)
	//>>[]



	//宣言だけしてもメモリー上に存在しない==nilなので、追加できない
	//makeが必要
	/*
		var m3 map[string]int
		m3["pc"] = 5000
		fmt.Println(m3)
	*/


	
	//if文
	//宣言だけの場合nilになってしまう。
	//Nilが表示される
	var s []int
	if s == nil {
		fmt.Println("Nil")
	}
	//>>Nil

}

```
画像と文章を交互に記載するCSSの方法

例）
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635497/243a51a9-6900-b161-f08d-680fb278efd0.jpeg)

Html

<div class="service__product">
            <div class="service__product--img">
              <img src="img/service/logo-switch_science.svg" alt="株式会社スイッチサイエンス">
            </div>
              <div class="service__product--section-contents">
                  <h1>株式会社スイッチサイエンス</h1>
                  <p>最先端のテクノロジーを、より多くの人々が道具として当たり前に使える世界を目指して活動しています…</p>
                <a href="" class="btn">詳しくはこちらへ</a>
              </div>
          </div>
          <div class="service__product">
            <div class="service__product--img">
              <img src="img/service/logo-switch_education.svg" alt="株式会社スイッチエデュケーション">
            </div>
            <div class="service__product--section-contents">
                <h1>株式会社スイッチエデュケーション</h1>
                <p>すべての子供にSTEM教育を実践することを目的に活動しています。考える、作る、発表するプロセスを…</p>
              <a href="" class="btn">詳しくはこちらへ</a>
            </div>
          </div>

CSS

 &__product {

    display: flex;
    margin-bottom: 10rem;
    align-items: center;
    justify-content: space-between;
    &:nth-child(odd) {
      flex-direction:row-reverse;
    }
    &--img {
     border: 1px solid #FFFFFF;
     width: 450px;
     & > img {
      display: block;
      padding: 5rem;
      margin: 0 auto;
     }
    }

要点
①justify-content: space-between;で両端に要素を置く
②nth-child(odd（奇数）　or evev（偶数）)に
flex-direction:row-reverse;を置くことで、逆にする。
nth-childは、兄弟要素を指定する
Promise async function result / return value VS then result / #javascript #node

```js
async function f() {
  return "XXX";
}

const result = f()
console.log(result)
// Promise { 'XXX' }

f().then(result => {
  console.log(result)
});
// XXX

```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3164











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Promise { <pending> } in Javascript / async await function / return value VS then result #node #javascript

非同期の関数 ( async ) では返り値が ` Promise` となるので、直接返り値を利用できない
then で結果が出たことを待ち受けて、その中で関数の返り値を利用する

```js
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function f() {
  await sleep(1000);
  return "XXX";
}

const result = f()
console.log(result)
// Promise { <pending> }

f().then(result => {
  console.log(result)
});
// XXX

```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3163











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
sudoでコマンドがnot foundになってしまう

サーバーを久しぶりに構築していて、忘れがちなものなので、メモ。
スーパーユーザーのPATHをsudoでも使えるようにしておく。

```
$sudo visudo
```
```
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults        env_reset
Defaults        mail_badpass
#Defaults       secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"
Defaults        env_keep +="PATH"
```
【Laravel 7.x】Laravel(PHP)未経験者がプロジェクトを作るための備忘録(プログラミング初心者用)

## プロジェクト作成
 composer create-project --prefer-dist laravel/laravel プロジェクト名　で作成
SourcetreeやGithubDesktopなどでリポジトリの連携を行っておく

php artisan serve コマンドでサーバ立ち上げ　localhost:8000でつなぐ

## DB設計
Databaseは手動で作る必要あり　Railsのようにrake db:createで作れる下地はない

.envの1ファイルを編集（MySQLの場合の一例）
DB_CONNECTION=mysql
DB_HOST=データベースのホスト名（127.0.0.1）
DB_PORT=ポート番号(3306)
DB_DATABASE=データベース名(プロジェクト名)
DB_USERNAME=データベースのユーザ名（rootなど）
DB_PASSWORD=データベースのパスワード(MySQLのパスワード）


## 認証機能を使う場合
composerからlaravel/uiを入手
$ composer require laravel/ui

インストール（時間かかる）できたら
＄ php artisan ui vue --auth

できたらログの通り　npm install && npm run dev をする

npmコマンドはnode.jsのコマンドなので、nodejsが入っていないならnodenv等を使ってnode.jsをインストールする
PATHを通すのを忘れずに。bashファイルにexport (PATH:以降は　インストール完了してターミナル上でwhich npm)
source ~/.bashrc やsource ~/.bash_profileをして
コマンド使えるようになったら　もう一度npm install && npm run dev 

最後に　$ php artisan migrate
でユーザーテーブル作成完了

 （もし　1071 Specified key was too long; max key length is 767 bytes のエラーが出たら　Laravel5.4以上、Mysql5.7.7未満のものを使った場合に起きるものなので
App/Providers/AppServiceProvider.php の26行目に
　　Schema::defaultStringLength(191); を追記する
一回上でエラー起きてるとすでにテーブルはできてしまっているのでMYSQLから
drop table users; で一旦削除を忘れずにする）

##テーブルの作成
テーブル作成のためのマイグレーションファイルは
php artisan make:migration (ファイル名)となる　ファイル名はcreate_○○○s_tableのようにする
また、オプションとして 後ろに—create=テーブル名s  をつけるとマイグレーションファイルが
テーブル名を含んだ形で生成される　　（Schema::create() 以下）

###マイグレーションファイルのカラム設定の一例と自分が引っかかった箇所（外部キー）
$table->text("images")->nullable(); null許可
$table->foreign("user_id")->references('id')->on('users') 
外部キー設定 これだけじゃだめ？
↓
$table->integer('user_id')->unsigned();  
（unsigned は整数カラムを符合なしの値として扱う　これがないとエラー（主キーではデフォルトで適用されている））
$table->foreign("user_id")->references('id')->on('users'); 
#####一旦普通にカラムを作ってから、外部キーとして設定する記述を行う
↓
さらにハマる　型があってないので上記のカラムを最初に作る箇所で
#####$table->bigInteger('user_id')->unsigned();  
に修正してmigrateすると　うまくテーブル作成出来ました
360度(全天球)ライブ配信をするときに考えること

360度(全天球)ライブ配信ってどうやったらできるのかという話題があったので、知っていることをちょっと整理してみました。

# カメラからヘッドマウントディスプレイまでの流れ

(1) 複数のレンズからの映像の入力
(2) 映像をひとつに合成する
(3) 送信
(4) 受信
(5) 見たいところを切り出して表示

## 複数のレンズからの映像の入力
360度の全天球の映像はひとつのレンズでは捉えることができないので、映像ソースは必ず複数になります。前後の2つの魚眼レンズを使う場合には、これは円形の映像が2つになります。

## 映像をひとつに合成する
複数の映像をひとつに合成します。このときにはequirectangular（エクイレクタングラー）というフォーマットを使うのが一般的です。
私の大雑把な理解では、球面の映像を円筒形に投射して、その円筒形を切り開いて長方形にしたものです。アスペクト比は2:1 になります。

## 送信と受信
なんらかの方法で、映像を遠隔地に配信します。遅延時間が短いことを重視するならば、WebRTCが候補になります。片方向で大人数に対して配信したいならば、HLSなどを使います。
equirectangularのアスペクト比は2:1 なので、上下に黒い帯を追加して16:9に変換します。それ以外は普通のライブ配信と変わるところはありません。

## 見たいところを切り出して表示
ヘッドマウントディスプレイの加速度センサーの情報などから視聴者の見ている方向を特定し、equirectangularの画像から一部を切り出して表示します。
Unityを使うとこのようなビューアーを作ることができるそうです。

# 課題
## 思ったより画質がよくない
equirectangular で4Kのサイズで配信したとしても、実際に見るのはそこから切り取った一部だけです。なので感覚的に720pかそれより低いぐらいの感じです。

## 映像の合成処理が重い
(2) のequirectangularへの合成はけっこう重い画像処理なので、これをリアルタイムに行うには専用のハードウェアが必要です。
廉価の360度カメラではこの機能はついていません。この機能を持っているカメラでも発熱がすごいので長時間の連続配信はできないことがあります。このあたりをクリアした機材は当然高価なものになります。

## モバイル回線では厳しい
映像の内容にもよりますが、4K 30fps 20Mbps くらいの通信帯域が必要です。光回線が前提ならばよいですが、屋外から配信したいとなるとLTEのモバイル回線では厳しいです。5Gに期待？

## 意図しないものも映り込む
これはあえて、ここで言及することではないですが ..
360度全天球動画だと死角がありません。なのでカンペを持っているスタッフさんも映ってしまいます。完全にありのままを映すことになりますね。街中からの配信で、通行人の肖像権とか考えだすとややこしいことがあるかもしれません。
Reactの開発環境を簡単に構築しよう

#目次
* [概要](#概要)
* [Reactとは](#reactとは)
* [開発環境構築](#開発環境構築)
* [まとめ](#まとめ)

#概要
Reactの概要とReactの開発環境を簡単に構築する方法をまとめたものです。これからReactを勉強し始めるという方の一助となるようであれば幸いです。

#Reactとは
Reactとは、簡単に説明するとユーザインタフェースを効率的かつ柔軟に構築するためのJavaScriptライブラリです。
##Reactの特徴
React公式サイトで紹介されている主な特徴を３つ紹介します。
###1. 宣言的なView
Reactは、JSXというXMLのような文法で構造を定義（宣言）することで、Webページを描画（View）します。アプリケーションの各状態に対応するViewを設計することで、Reactはデータの変更を検知し、関連するコンポーネントのみを更新、再描画します。

###2. コンポーネントベース
Reactでは、カプセル化された「コンポーネント」と呼ばれる小さく独立した部品から組み立てることでUIの構築ができます。
コンポーネントに分割することで、Webページの共通部分を１つのコンポーネントにまとめたり、コンポーネントごとに状態管理ができます。またJavaScriptで記述できるためDOMの外側で状態を保持することができます。

###3. **どこでも使える**
Reactはブラウザ向けのアプリケーションを作製するためだけでなく、React Nativeというモバイル向けのアプリケーションの作製などにも利用できるため、一度学習さえすれば様々な場所で再利用ができるという特徴があります。

#開発環境構築
今回私はmacOS(10.15.3)で環境構築を行いました。
Reactの環境構築方法はいろいろとありますが、私はCreate React Appを用いる方法が一番簡単だと思います。
以下にversionの記載がありますが、インストールできているかの確認のためですので同じである必要はありません。

##Homebrewのインストール
まずはじめにHomebrewをインストールしておきます。（[Homebrew公式サイト](https://brew.sh/index_ja)）

```bash:bash
#Homebrewのインストール
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

#Homebrewのupdate
$ brew update

#version確認
$ brew -v
Homebrew 2.2.15
```

Homebrewは、macOS用のパッケージマネージャーで、パッケージのインストールやアンインストールを行うことができます。またパッケージの依存関係も管理してくれるため、パッケージAを使うために別のパッケージBも必要になるときには、Aをインストールすれば自動でBもインストールしてくれます。
Homebrewをインストールした後には念のためアップデートとバージョン確認も行っておきましょう。

##Node.jsのインストール
続いてNode.jsをインストールします。

```bash:bash
#Node.jsのインストール
$ brew instasll nodejs

#version確認
$node -v
v14.1.0

#npmの確認（Node.jsのインストール時に一緒に入っている）
$ npm -v
6.14.4
```
Node.jsはJavaScriptでサーバーサイドの処理を可能にするプログラムで、npmはNode.jsで動作するJavaScriptのパッケージマネージャーです。

##Yarnのインストール
次にYarnをインストールします。

```bash:bash
#Yarnのインストール
$ npm install -g yarn

#version確認
$ yarn -v
1.22.4
```
Yarnはnpmと同じくJavaScriptのパッケージマネージャーです。npmと互換性があり、npmよりもインストールが速くセキュリティも高いという特徴があります。

##Create React Appのインストール
ここまでの準備ができたところでReactの開発環境ツールであるCreate React Appをインストールします。

```bash:bash
#Create React Appのインストール
$ yarn global add create-react-app
```

これだけです。簡単ですよね。本来であればReactの開発環境を構築するうえでは、webpackやbabelといったツールをReactとは別にインストールする必要がありますが、Create React Appでは事前にこれらは構成要素として組み込まれているので、少ないコマンドで環境構築ができます。

##Create React Appの利用
では実際に、新しいアプリケーションを作製してみましょう。

```bash:bash
#アプリを置きたいディレクトリに移動
$ cd {ディレクトリ名}

#アプリケーションの作製
$ create-react-app {アプリケーション名}

#アプリケーションの起動
$ yarn start
```
以下のような画面が表示されれば成功です。
![スクリーンショット 2020-05-13 8.31.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622836/3b61ab8e-0baf-45c7-d177-b50900c3dc00.png)
接続の切断は、ターミナル上で`[control] + c`で可能です。

#まとめ
今回はCreate React Appを利用した開発環境構築の方法について紹介しました。
Reactの環境構築方法にはいくつかの種類がありますので、自身に合う方法で環境構築することをおすすめします。




#参考
* [React公式サイト](https://ja.reactjs.org/tutorial/tutorial.html)
* [Reactの基本を学ぼう～コンポーネントの仕組みと作り方](https://codezine.jp/article/detail/11686)
* [Create React App公式サイト](https://create-react-app.dev/)
AWSデプロイしてアプリの背景画像を表示させる

AWSデプロイするも、アプリの背景画像が表示されず、CSSやJSが一切機能してない件。

assetsディレクトリ以下がプリコンパイルされてないっぽい。そこで

```
$rake assets:precompile RAILS_ENV=production
```
が変わらず。cssも反映されない。。
調べた結果、以下を試す。

```
$ find app/assets/ -type f -exec touch {} \;
$ rake assets:clobber assets:precompile
$ RAILS_ENV=production rake assets:precompile
```

んでunicornとNginxを再起動したら
CSSが反映された！

参考：https://teratail.com/questions/231518
Rubyのhashでvalueの順番を明示的に取得する方法

# values_atメソッド
values_atメソッドを使えばvalueの順番を明示的に取得できる。

```hash_values.rb
hash = { 'name' => 'yamada', 'gender' => 'm', 'age' => 20 }

p hash.values                                        #=> ["yamada", "m", 20]
p hash.values_at('name', 'gender', 'age')            #=> ["yamada", "m", 20]
p hash.values_at('age', 'name', 'gender')            #=> [20, "yamada", "m"]
p hash.values_at('name', 'gender', 'age', 'address') #=> ["yamada", "m", 20, nil]
```
valueの順番を入れ替えて表示することもできる。
存在しないkeyを指定するとnilが帰ってくる。
疑似要素で　＞　を入れる方法

　
&::after {
    content: '';
    height: 6px;
    width: 6px;
    border: 0;
    border-right: 2px solid #707070;
    border-top: 2px solid #707070;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -4px;
　　}

まずは、
①contentで空の要素を作る
②heightとwigthで正方形を作る
③border-right: 2px solid #707070;とborder-top: 2px solid #707070;で
④transform: rotate(45deg)で45度回転させる
⑤position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -4px;
で位置の調整をする。
Bashで3パターンのおみくじを作った

#はじめに
シェルスクリプトの学習として作りました。
作ったおみくじはifを使ったもの、caseを使ったもの、配列を使ったものの3パターンです。

#ifを使ったおみくじ

```bash
#!/bin/bash

number=$(($RANDOM%6))

if [ $number -eq 0 ]; then
        echo 大吉
elif [ $number -eq 1 ]; then
        echo 中吉
elif [ $number -eq 2 ]; then
        echo 小吉
elif [ $number -eq 3 ]; then
        echo 末吉
elif [ $number -eq 4 ]; then
        echo 凶
else
        echo 大凶
fi
```

#caseを使ったおみくじ

```bash
#!/bin/bash

number=$(($RANDOM%6))

case "$number" in
        0)
                echo 大吉
                ;;
        1)
                echo 中吉
                ;;
        2)
                echo 小吉
                ;;
        3)
                echo 末吉
                ;;
        4)
                echo 凶
                ;;
        5)
                echo 大凶
                ;;
esac
```

#配列を使ったおみくじ

```bash
#!/bin/bash

f=("大吉" "中吉" "小吉" "末吉" "凶" "大凶")
num=$(($RANDOM%6))

echo ${f[$num]}
```

以上です
C言語で3パターンのおみくじを作った

#はじめに
[苦C](http://www.9cguide.appspot.com)でC言語の文法を一通り学んだので、演習としておみくじをいくつか作りました。
ifを使ったものとswitchを使ったものと文字列の配列を使ったものの3パターン作りました。
(追記 5/14)
main関数の型をvoidからintに変更しました。

#ifを使ったおみくじ

```c
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>

int main(void)
{
        int num;

        printf("Press the Enter key... ");
        getchar();

        srand((unsigned int)time(NULL));

        num = rand() % 6;

        if (num == 0) {
                printf("大吉\n");
        } else if (num == 1) {
                printf("中吉\n");
        } else if (num == 2) {
                printf("小吉\n");
        } else if (num == 3) {
                printf("末吉\n");
        } else if (num == 4) {
                printf("凶\n");
        } else {
                printf("大凶\n");
        }
        return 0;
}
```

#switchを使ったおみくじ

```c
#include <stdio.h>
#include <stdlib.h>
#include <time.h>

int main(void)
{
        int num;

        printf("Press the Enter key... ");
        getchar();

        srand((unsigned int)time(NULL));
        num = rand() % 6;

        switch (num) {
                case 0:
                        printf("大吉\n");
                        break;
                case 1:
                        printf("中吉\n");
                        break;
                case 2:
                        printf("小吉\n");
                        break;
                case 3:
                        printf("末吉\n");
                        break;
                case 4:
                        printf("凶\n");
                        break;
                case 5:
                        printf("大凶\n");
                        break;
        }
        return 0;
}
```

#文字列の配列を使ったおみくじ

```c
#include <stdio.h>
#include <stdlib.h>
#include <time.h>

int main(void)
{
        char f[][8] = {"大吉", "中吉", "小吉", "末吉", "凶", "大凶"};
        int num;

        printf("Press the Enter key... ");
        getchar();

        srand((unsigned int)time(NULL));
        num = rand() % 6;

        printf("%s\n", f[num]);
        return 0;
}
```

以上です
plunkerでstun

# 概要

plunkerでstunのテストしてみた。

# 結果

chrome - ok
バージョン: 81.0.4044.138（Official Build） （64 ビット）

edge - ng
Microsoft Edge 44.18362.449.0
createDataChannelで落ちる。

# サンプルコード


```
var addrs = [];

function appendAddr(addr) {
	if (!((',' + addrs.join() + ',').match(',' + addr + ','))) 
	{
		addrs.push(addr);
	}
}

function showAddrs() {
	alert('address = ' + JSON.stringify(addrs));
}
var iceServers = {
	iceServers: [{
		url: 'stun:stun.l.google.com:19302'
	}]
};
var optionalRtpDataChannels = {
	optional: [{
		RtpDataChannels: true
	}]
};
var mediaConstraints = {
	optional: [],
	mandatory: {
		OfferToReceiveAudio: false,
		OfferToReceiveVideo: false
	}
};
var offerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
var offererDataChannel = offerer.createDataChannel('RTCDataChannel', {
	reliable: false
});
offerer.onicecandidate = function(event) {
	if (event.candidate) 
	{
	}
	else 
	{
		var ary = offerer.localDescription.sdp.split('\n');
		for (var i = 0; i < ary.length; i++)
		{
			if (ary[i].match('a=candidate'))
			{
				appendAddr(ary[i].split(' ')[4]);
			}
		}
		showAddrs();
	}
	if (!event || !event.candidate) return;
	answerer && answerer.addIceCandidate(event.candidate);
};
offerer.createOffer(function(sessionDescription) {
	offerer.setLocalDescription(sessionDescription);
}, function() {
	alert("Create Offer failed");
}, mediaConstraints);




```

# 成果物


https://embed.plnkr.co/plunk/Ehj23zBl4ifyr4JwS4CW


以上。
WindowsでLinux(WSL)

細かいことはいいから、とにかくWindowsでLinuxを触りたい
WSLとUbuntuをインストールすればOK（要再起動）
## インストール

1. WSL
⊞ Windowsキー + Pauseキー
　＞コントロール パネル ホーム
　＞プログラムと機能　　 （⊞ Windowsキー + Rで「appwiz.cpl」）
　＞Windowsの機能の有効化または無効化
　＞Windows Subsystem for LinuxのチェックONでOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368782/39f65d6a-0db3-cf97-f50a-aa497ee4d0fb.png)

2. Ubuntu
Microsoft Store
　＞ubuntu で検索しインストール 
　＞ターミナルでusername/passを適当に設定

## 起動

⊞ Windowsキー + R で「wsl」or「ubuntu」

**ホームへ移動**

```
$ cd ~
/home/ubuntu
```

**CドライブのProgram Filesへ移動**

```
$ cd /mnt/c/"Program Files"
```
初心者によるプログラミング学習ログ 314日目

#100日チャレンジの2314日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
314日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>313日目 2h<br>・ポートフォリオ作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1260299179223445504?ref_src=twsrc%5Etfw">May 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
VSCodeでnRF5の開発をするときに起こる参照エラーを徹底的に取り除く

# はじめに
MacでnRF52を使った開発をしており、はじめはSegger Embedded Studioを使っていたのですが、まあこれがクラッシュしまくる上にコード補完が全然なくイライラだったので調べているとVSCodeが開発環境に使えるという情報をゲットし導入しました。
しかし、uint8_tとuint32_tの型がエラーとなっていろいろなところに波線が引かれていたのですが、ついにその解決ができたのでまとめます。

# nRF5 + GNU Arm Embedded Toolchain + VSCode導入方法
こちらを参考にしました。
英語記事ですが画像が多めなのでなんとなくで理解できると思います。
https://www.novelbits.io/nrf52-visual-studio-code/

日本語記事もいくつか存在し、みなさん少しづつ定義ファイルの作り方が異なりますが大枠は同じです。
https://qiita.com/nishinohi/items/545521df7b06e66149c9
https://qiita.com/ksksue@github/items/dcf5d9938fad5a622968

# uint8_t, uint32_t 参照エラー解決方法
以下が私が現在使用中のc_cpp_properties.jsonです。

```json:c_cpp_properties.json
{
    "env": {
        "nRF_SDK": "${workspaceFolder}/../nRF5_SDK",
        "GNU_GCC": "${workspaceFolder}/../gnu_toolchain"
    },
    "configurations": [
        {
            "name": "Mac",
            "includePath": [
                "${nRF_SDK}/components/**",
                "${nRF_SDK}/modules/**",
                "${nRF_SDK}/integration/**",
                "${GNU_GCC}/arm-none-eabi/include",
                "${GNU_GCC}/lib/gcc/arm-none-eabi/9.2.1/include/**",
                "${GNU_GCC}/lib/gcc/arm-none-eabi/9.2.1/include-fixed/**",
                "${workspaceFolder}/service/*",
                "${workspaceFolder}/config/*",
                "${workspaceFolder}/drivers/**"
            ],
            "defines": [
                "BOARD_CUSTOM",
                "CONFIG_GPIO_AS_PINRESET",
                "FLOAT_ABI_HARD",
                "INITIALIZE_USER_SECTIONS",
                "NO_VTOR_CONFIG",
                "NRF52840_XXAA",
                "NRF_SD_BLE_API_VERSION=6",
                "S140",
                "SOFTDEVICE_PRESENT",
                "SWI_DISABLE0",
                "__STATIC_INLINE= static inline"
            ],
            "compilerPath": "${GNU_GCC}/bin/arm-none-eabi-gcc",
            "compilerArgs": [
                "-mcpu=cortex-m4",
				"-mthumb",
				"-mfloat-abi=hard"
            ],
            "cStandard": "c11",
            "cppStandard": "c++17",
            "intelliSenseMode": "clang-x64",
            "macFrameworkPath": [
                "/System/Library/Frameworks",
                "/Library/Frameworks"
            ]
        }
    ],
    "version": 4
}
```

上記のURLと異なって、envをe_cpp_properties.json上に書いていたり少し異なるところがあります。
環境によって`defines`の`BOARD_CONFIG`や`S140`などの値が異なりますが、ここで**一番重要なところ**が
`defines`内の`__STATIC_INLINE= static inline`です。
__STATIC_INLINEマクロが解決できず色々なところに影響を与えてたみたいなので、強制的に定義してあげると参照エラー問題が解決しました。

めでたしめでたし:relaxed:
バイオインフォマティクス解析の種類をまとめる（メモ）


バイオインフォマティクス解析について、たくさんの種類があるのでメモとしてまとめます。
書籍は講談社サイエンティフィックの「よくわかるバイオインフォマティクス入門」が分かりやすいと思います。
ツールの使い方は「次世代シークエンサーDRY解析教本」やDBCLSの[統合TV](https://togotv.dbcls.jp/)が参考になると思います。
また、バイオインフォマティクス学会は[バイオインフォマティクス技術者認定試験](https://www.jsbi.org/nintei/)を毎年行っています。

以下に解析の種類を①シークエンス解析と②立体構造・相互作用予測の２つに分けてまとめます。

#シークエンス解析
DNAやRNAの配列解析で、NGSが用いられる。
配列断片を繋げて復元する**アセンブリ**と、リファレンス配列へマッピングして比較する**アライメント**の２つがある。
de novo解析はアセンブリ、他の解析ではアライメントを行う。

## ゲノム解析
主にタンパク質のコードするエクソン領域のみを解析するエクソーム解析が行われる。
変異解析によって疾患原因遺伝子などを見つけることが出来る。
一塩基変異（SNP/SNV）を検出できる。
ゲノム全体のSNPの頻度と形質の関連を調べる解析がGWAS(Genome Wide Association Study)。

## トランスクリプトーム解析
主にRNA-seqによる遺伝子発現の定量化が行われる。
最近は1細胞ごとに単離して行うscRNA-seqが盛んになっている。
1細胞解析によってデータ量は大幅に増え、システム生物学へとつながっていく。
他には、転写開始点(TSS)を解析できるTSS-seqやCAGE-seqもある。

## エピゲノム解析
遺伝子の発現制御を解析する。
ChIP-seq・・・ヒストン修飾の解析。他のタンパク質にも可能
BS-seq・・・DNAのメチル化の解析。BSはBisulfiteの略
ATAC-Seq・・・クロマチンアクセシビリティの解析。
Hi-C法・・・クロマチン構造の解析。

##メタゲノム解析
細菌叢など、微生物群集において行われる手法。
分離培養することなく、環境サンプルをそのままシークエンスする。
サンプルの細胞の系統組成などを得ることが出来る。

##de novo解析
アセンブリによる解析。
リファレンス配列が決定されていない生物種での配列決定に用いられる。
ゲノムアセンブリ、トランスクリプトームアセンブリなど。



#立体構造・相互作用予測
生体分子の構造はＸ線結晶構造解析やクライオ電子顕微鏡で観察されますが、配列情報を基にした立体構造予測も行われる。
立体構造というとタンパク質のイメージが強いですが、クロマチンやncRNAも立体構造を形成する。
立体構造だけでなく相互作用の予測も行われていて、機械学習の手法が用いられる。

##クロマチン
クロマチンはDNAとヒストンが結びついたもの。
クロマチン構造は遺伝子の発現制御において重要。
3C(Chromosome Conformation Capture)が基礎的な技術で、
現在はNGSを用いるHi-C法などによって行われる。(エピゲノム解析でもある。) 
DNAのコンタクトマップが生成され、TADs(Topologically Associated Domains)という領域が見られる。

##ncRNA(non cording RNA)
ncRNAはmRNA以外のRNAで、様々な機能を持つ。
物理化学的な手法などが用いられる。

##タンパク質
タンパク質はシークエンスが出来ないため、電気泳動や質量分析が用いて測定される。
データベースに基づく手法や物理化学的な手法が用いられる。分子動力学シミュレーションなど
現在はデータベースがwwPDBにまとめられている。
立体構造や相互作用の予測は創薬などに応用される。
ApolloClientでwriteQueryしてもcomponentがupdateされないときの対処法

# 現象
例えば以下では、ユーザが追加されるイベントをSubscribeしており、イベントを受け取ったらキャッシュを書き換えるという処理をしようとしていますが、これだとキャッシュは書き換えられますがcomponentがupdateされません。


```js

const LISTEN_FOR_USERS = gql`
  subscription {
    newUser {
      githubLogin
      name
      avatar
    }
  }
`;

class App extends Component {
  componentDidMount() {
    let { client } = this.props;
    this.listenForUsers = client
      .subscribe({ query: LISTEN_FOR_USERS })
      .subscribe(({ data: { newUser } }) => {
        const data = client.readQuery({ query: ROOT_QUERY });
        data.totalUsers += 1;
        data.allUsers = [...data.allUsers, newUser];
        client.writeQuery({ query: ROOT_QUERY, data });
      });
  }
  ...
}
```

# 理由
cacheされたオブジェクトをreadしてそのまま更新すると、変更されたとみなされないからです。
これを防ぐには、以下のようにします。

```js
class App extends Component {
  componentDidMount() {
    let { client } = this.props;
    this.listenForUsers = client
      .subscribe({ query: LISTEN_FOR_USERS })
      .subscribe(({ data: { newUser } }) => {
        // 新たにオブジェクトを作成する
        const data = { ...client.readQuery({ query: ROOT_QUERY }) };
        data.totalUsers += 1;
        data.allUsers = [...data.allUsers, newUser];
        client.writeQuery({ query: ROOT_QUERY, data });
      });
  }
  ...
}
```

# 仕組み化
[こちら](https://github.com/apollographql/apollo-client/blob/master/CHANGELOG.md#apollo-cache-in-memory-160)にあるように、InMemoryCache作成時に freezeResults オプションを指定すると、cache を immutable なものとして扱わないとエラーを引き起こすようにできるので、このような失敗をせずにすみます。
PMP試験に出てくるPDMを覚えよう！

# PDMとは
プレシデンス・ダイアグラム法のこと、クリティカルパスの問題とかで出てくるアレ
タスクを四角で表現、スケジュールの順序を矢印で表現するぞ。

## PMBOKのどこに出てくるのか
PMBOKガイドの`189ページ`の`6.3.2.1 Precedence Diagramming Method`に出てくるぞ

# PDMのタスク依存関係の種類
- FS (Finish-to-start)
    - 先行タスクFinish後に次タスクStart可
    - 先行タスク完了と次タスク開始の間の期間を`Lag`と呼ぶぞ！
- FF (Finish-to-finish)
    - 先行タスクFinish後に次タスクFinish可
- SS (Start-to-start)
    - 先行タスクStart後に次タスクStart可
    - 五月雨ってやつか！
    - 先行タスク開始と次タスク開始の間の期間を`Lead`と呼ぶぞ！
- SF (Start-to-finish)
    - 次タスクStart後に先行タスクFinish可 `(要注意！)`

----

よかったよかった
複数プログラミング言語より Factom ブロックチェーンのアクセス

![1*UfR2neXteow2gUQrScP6BQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473244/e97ab578-ac24-4a8f-8033-f24eb0533b1e.png)
Kompendium LLC は色んなプログラミング言語知識と効果的な Factom のグループです。
グループのいずれかの目標は Factom エコシステムに多くの開発者を引き続け、案内や簡単に
の理解等を申し上げることです。ブロックチェーンには継続的な拡張のシステムがあるのでソ
フトウェア遷移することが大変です。Factom に興味がある開発者ために様々なプログラミン
グ言語でスムーズに扱うクライアントライブラリの収集を提供し、Factom エコシステムの開
発ツールボックスも拡大する。顧客の選択言語に利用できないライブラリは思いとどまらせる
原因です。それを防止するように Factom エコシステムの開発ツーリングの改善を努力してい
ます。

大分のブロックチェーンはスマートコントラクト機能が無いですが Factom コミュニティと開
発者はスマートコントラクトの統合と標準に向け、ブロックチェーンへすぐに低レベルアクセ
ス機能を要求して続けます。

普通に5~10 までの多くライブラリの言語があります。多重の Factom クライアントは Java、
C#、パーソンに利用可能があります。人気がない言語も Factom プロトコルに広い API システ
ムを利用することです。

三つの API エコシステム
- `factomd` API サブセット
- `walletd` API サブセット
- `debug` API サブセット
上の API サブセットは Factom プロトコルのリファレンス実装である実行ファイルにより表示
させます。

ソフトウェアエンジニアとプログラミング言語のコミュニティを収容するため大きなライブ
ラリを下記のプログラミング言語に作成していました。
- `PHP` https://github.com/kompendium-ano/factom-php-client
- `Ruby` https://github.com/kompendium-ano/factom-ruby-client
- `Swift` https://github.com/kompendium-ano/factom-swift-client
- `Haskell` https://github.com/kompendium-ano/factom-haskell-client
- `Rust` https://github.com/kompendium-ano/factom-rust-client

上のクライアントはネイティブの JSON RPC API 用です。Remote Procedure Call (RPC) という強
いデータ移動技術ですが頻りに作りつらいです。 RPC の実用一部は開発者へ高いレベルの一般
性と柔軟性を提供することです。 PHP と Ruby は動的な言語ので幅広い用途です。私たちの PHP
と Ruby ライブラリは実行中の品質を確認するため疲労テスト範囲行いを実施しています。

Rust と Haskell は安全的な言語として少ないテスティングがあってもバグ無しソフトウェアが
実現することできます。開発の最初でが頻りに加速できます。静的タイプのシステムはビルド
する前に似合わないコーディングや正式以外等のコーディングを検出し、手動的なテスティン
グ・広いテスト範囲をコンパイラに行います。私たちの Haskell と Rust にあるライブラリは広
範囲テストを組み込むと開発にすでに利用できるし、正しさを確保します。

私たちのライブラリは JSON データを指定言語型に割り付けます。ビジネスアプリケーション
向け、データ変換の前に Factom プロトコルで出しいオブジェクト・型を直接に検証です。
次の記事は各 Kompendium Factom プロトコルのコミュニティライブラリの特徴と小さなアプ
リケーションのビルドの説明をさせて頂けます。
【Google Apps Script】[clasp] clasp login がいつまで経っても終わらないときの対処

# 前提条件

* nodeインストール済み
* google/claspをインストール済み

```
sudo npm i @google/clasp -g
```

* [こちら(Google Apps Scriptの設定画面)](https://script.google.com/home/usersettings)からGoogle Apps ScriptをONにしている



# 出来事

公式サイトの案内に従って

```
clasp login
```

してブラウザで認証を行ったところ、以下の画面がでてGoogleの認証が終わらなかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610153/95e0565a-243a-0136-e38c-200b7950674e.png)



# 対処

https://github.com/google/clasp/blob/a556599e78bdc3f168e3bb5cdc2ff0a55909f6f5/README.md#login

`clasp login`には`--no-localhost`というオプションがあった。
これを実行すると、コマンドラインは次のような状態になる。

```
% clasp login --no-localhost
Logging in globally...
🔑 Authorize clasp by visiting this url:
｛認証用URL｝
Enter the code from that page here:
```

ブラウザ側では、認証が終わった段階でブラウザ上にコードが表示される。
<img width="490" alt="スクリーンショット 2020-05-13 3.15.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610153/0039afac-b95f-e7b2-6ec6-6652ca7dd996.png">

それを待機していたコマンドラインの`Enter the code from that page here:
`
の後ろに貼り付ければ、認証完了。


# 振り返り

すぐに公式ドキュメントを当たったのでハマらずに済んだ。
今後もその姿勢で臨みたい。

#
puppeteer + GAS + claspでスクレイピングするまでの調べ物

# やりたいこと
あるレビューサイトから、そのブランド毎のレビューを抜き出したい
特定のブランドによってはレビューが1000件を超えるものもあるし、ブランド自体も5000件ほどある
長丁場が想定されるため計画立てて進めよう
また次回スクレイピングを走らせたときに、最新のものが取れるような工夫をしたい
また自分のマシンからスクレイピングすると、めっちゃ熱くなったり時間がかかるので、サーバリソース上で完結できるようにしたい
あと、当然だけどサイト様への配慮は忘れない

### puppeteer

https://github.com/puppeteer/puppeteer

### GASから puppeteer in GCP Cloud Functionを発火する
https://qiita.com/howdy39/items/2f355fea8340a35aa5da

### clasp
https://github.com/google/clasp

始め方など
https://qiita.com/HeRo/items/4e65dcc82783b2766c03

### clasp starter
https://qiita.com/howdy39/items/0e799a9bfc1d3bccf6e5

## 計画
1. ローカルでスクレイピングスクリプトを書く
    - ブランドIDとページ番号を渡して汎用的に使えるものを作る
2. Cloud Function化する
    - インラインエディタでは辛いのでCloudSourceRepogitoriesを使う
2. スクレイピングFunctionを呼ぶGASを作る
    - starterkitを使わせていただく
3. いい感じに遅延処理を挟まして負荷軽減考慮する
4. 終わったら:まとめ記事を書く


次のステップとして、定期的にスクレイピングして最新レビューを取れるようにしたいが、サイト側がスクレイピング不可的な変更をしたとき怖いので、まずは現状あるデータを全て拝領するところをゴールにする

## 期間
モチベーション維持のために、作るまで４０時間ぐらいでできるといいなぁ

以上
【Rails】条件に応じてデータ数を取得する

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#条件式を使用する
####基本的な条件式
テーブルのデータを条件式で絞って取得する場合。
データを受け取りたいテーブルに紐づくモデルに対して、
`モデル名.where(カラム名: '値')`

```
User.where(artist: 'sample')
```

#countメソッドを使用してデータ数を数える

```
User.where(artist: 'sample').count
```

`puts`で標準出力する

```
puts User.where(artist: 'sample').count
```

#参考記事
・[【Rails】条件に応じてデータを取得する](https://qiita.com/Hal_mai/items/babb19560ace072c99f5/)
・[【Rails】世界で一番分りやすく詳しいcountメソッドの使い方](https://pikawaka.com/rails/count/)
・[Railsアプリで puts, logger コマンドを実行した時の log / 標準出力 について](https://qiita.com/NaokiIshimura/items/dbf072c313f36c2d9dcc/)