OmniAICreator/Qiita-1.07M huggingface dataset:
C++でミリ秒マイクロ秒単位の性能測定する


C++でミリ秒マイクロ秒単位で性能測定するサンプルコードを書きます。
測定環境は、Xubunts(ubuntu)系のOSを使用しています。やったことないですが、windowsだとCLOCK_MONOTONICが無いので利用できない可能性が高いです。
https://www.mm2d.net/main/prog/c/time-05.html


```c++

#include <iostream>
#include <stdio.h>
using namespace std;

//!時間取得
double calcTime()
{
    struct::timespec getTime;
    clock_gettime(CLOCK_MONOTONIC, &getTime);
    return (getTime.tv_sec + getTime.tv_nsec*1e-9) *1000;
}

int main()
{

    double start = calcTime();
    int cnt = 0;
    while(cnt < 100)
    {
        cnt++;
    }
    double end = calcTime();

    printf("処理時間[ms]：%lf\n", end -start);

    return 0;
}
```

サンプルは、単純に100回ループしただけの処理を測定しています。
サンプルコードの計測結果は、「処理時間[ms]：0.001045」(＊)でした。

<b>(＊)注意事項：</b>
この方法で計測する場合は、オーバヘッドのコストを考慮して計測しましょう。
例えば、私のマシンで下記のように何の処理も記述せずにstartとendの時刻を取得して性能測定してみると「処理時間[ms]：0.000334」となります。

```c++

#include <iostream>
#include <stdio.h>
using namespace std;

//!時間取得
double calcTime()
{
    struct::timespec getTime;
    clock_gettime(CLOCK_MONOTONIC, &getTime);
    return (getTime.tv_sec + getTime.tv_nsec*1e-9) *1000;
}

int main()
{
    double start = calcTime();
    // 処理なし
    double end = calcTime();

    printf("処理時間[ms]：%lf\n", end -start);

    return 0;
}
```

「処理時間[ms]：0.000334」→ 0.3マイクロ秒程度のオーバヘッドがある前提で、性能測定するようにしましょう。
C++のmapの初期化

c++のmapの初期化の方法を調べたので記述します。

配列を初期化するときに要素を一気に生成(以下のコード)できますが、「mapで同じことができないのか？」という疑問から調べてみました。
以下、配列の初期化のサンプルコードです。

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

int main()
{
    int ary[] = {1, 2, 4, 8, 16, 32, 64, 128};
    for(int cnt = 0 ; cnt < sizeof(ary) / sizeof(ary[0]) ; cnt++)
            printf("ary[%d] = %d\n" , cnt , ary[cnt]);

    return 0;
}
```

調べたところ、以下のようにすれば、mapも同じように初期化できるようです。

```c++
#include <stdio.h>
#include "map"

int main()
{
    std::map<int, const char*> mapList =
    {
            {1, "a"},
            {2, "b"},
            {3, "c"},
    };
    std::map<int, const char*>::iterator it = mapList.begin();

    while(it != mapList.end())
    {
        printf("key:%d value:%s\n" , it->first , it->second);
        it++;
    }

    return 0;
}
```

注意点としては、C++11で追加された機能であるということです。C++11より前のバージョンでは上の書き方はできないのでご注意ください。
【JavaScript】new Date()で今日の日付の時間と分を指定をしたい

## やりたいこと
今日の日付の時間と分を指定したい。
例えば、今日が2020年4月5日だとして、`new Date()`で以下のようになるのを

```
Sun Apr 01 2020 12:15:00 GMT+0900 (日本標準時)
```
時間と分を指定したい。
今日の12時30分を指定したいなら

```
Sun Apr 01 2020 12:30:00 GMT+0900 (日本標準時)
```

## 方法
まず、`new Date()`をすると

```js
new Date()
=> Sun Apr 05 2020 12:15:30 GMT+0900 (日本標準時)
```
今日の日付と時間が取得できます！

　
で次に、`new Date(2020, 5, 10, 10, 10)`とすると

```js
new Date(2020, 3, 10, 15, 20)
=> Fri Apr 10 2020 10:15:20 GMT+0900 (日本標準時)
```
指定した日付と時間が取得できますね！


なので、今日の日付の時間と分を指定したい場合、
例えば今日が4月5日で10時10分を指定したかったら`new Date(2020, 3, 5, 10, 10)`
とすれば指定した今日の日付の時間と分を取得できます。

しかし問題が！
「今日」というのを動的に変えたい場合、年や日付も指定してしまっているのでこれでは良くないです...。（4月5日の今日は4月5日だし、4月10日の今日は4月10日なので）

### なのでこうする
今日の日付を4月5日として、10時10分を指定したい場合、

```js
const date = new Date() // 今日の日付
date.setHours(10) // getHoursで時間を指定
date.setMinutes(10) // getHoursで分を指定
console.log(date)
// => Fri Apr 5 2020 10:10:20 GMT+0900 (日本標準時)
```

### (結論)面倒くさいのでこうできる
setMinutesを使わなくても、
setHoursの第一引数で「時間」、第二引数で「分」を指定できるみたいです。
`setHours(hour, minute)`（知らなかった... ><）

```js
const date = new Date() // 今日の日付
date.setHours(10, 10) // getHoursで時間と分を指定
console.log(date)
// => Fri Apr 5 2020 10:10:20 GMT+0900 (日本標準時)
```
これで「今日」の時間と分を指定できました〜！

----
[JavaScript の Date は罠が多すぎる](https://qiita.com/labocho/items/5fbaa0491b67221419b4)
とりあえず、上記の記事にも書いているみたいに色々とJSのDateは面倒なのでできるだけ使いたくない...。

使う場面が多い場合はmoment.jsとかdayjs、date-fnsとかのライブラリを使った方が良さげ。
DB操作を楽にするためにdbcliをインストールする

##はじめに
データベースを操作するときにはいろいろなツールがあると思います。
特にGUIツールは便利ですね。
ただコマンドラインで簡単にチェックしたいと思うときがると思いますが、そんな時に便利なdbcliを紹介したいと思います。
dbcliは自動補完などでき大変便利です。
Windows、Mac、Linux全て対応しています。

※詳細は下記確認お願いします。
MySQL：[mycli](https://www.mycli.net/)
PostgreSQL：[pgcli](https://www.pgcli.com/)
SQLite3：[litecli](https://github.com/dbcli/mssql-cli)

##インストールする
※pythonのパッケージインストールしていれば下記いづれかのコマンドで完了します。

```php:command
$ sudo pip install mycli
$ sudo easy_install mycli
```

通常の場合は以下のコマンドを実行します。

```php:command
//macOS
$ brew install mycli

Linux:
$ sudo apt-get update
$ sudo apt-get install mycli
```

##DBに接続する
```php:
$ phpcil -h (DB_HOST) -U (DB_USERNAME) (DB_CONNTCTION)
```

##おわりに
そこから先は通常のDB操作と同じなので簡単にためしていけると思います。
ターミナル変更 powershellからGit bashへ

#ターミナル
今までpowershellでやっていたのでbin/コマンドは使用せずいたがそれがbootstrapやJqueryの誤動作を招いていたのかもしれない。

#webpakcer
あとbootstrapの導入はgemではなくwebpackerで行った。
pipでmojimojiがインストールできない Mac Catalina 10.15.4

## 環境

Mac OS X 10.15.4
Python 3.7
pip 20.0.2

## 問題

mojimojiのインストール中に以下のエラーが出て色々試したのですが、うまく行かなかったのでメモ。(1) ソースからsetup.pyを使う方法が載っていたのですが、上の環境下ではうまくいきませんでした。結局gccではなくclangでインストールすればうまくいきました。

## エラー

```
(エラー省略) 
#include_next <limits.h>  /* recurse down to the real one */
compilation terminated.
error: command 'g++' failed with exit status 1
```

## 解決

```
CC=clang pip install mojimoji
```

## 参照URL
https://github.com/salestock/fastText.py/issues/116
FIDOデバイスエミュレータを作成してみた(これが最後)

何回か続けてきたFIDOデバイスエミュレータはこれが最後です。

・[WebAuthnを使ったFIDOサーバを立ててみた]( https://qiita.com/poruruba/items/243d39c8b77b98a99bab)
　本物のFIDOデバイスをお持ちであれば、この投稿だけでも参考になります。
・[FIDOデバイスエミュレータを作成してみた。。。が]( https://qiita.com/poruruba/items/48656358dbae7531bbee)
　仮想的なFIDOデバイスをサーバに配置しようという野望です。
・[FIDOデバイスエミュレータを作成してみた（だけどもうちょっと。）]( https://qiita.com/poruruba/items/37df2ffd8d26cc091f46)
　Arduinoを使って、ブラウザとFIDOデバイスエミュレータの橋渡しをしました。
・[FIDOデバイスエミュレータようやく完成](https://qiita.com/poruruba/items/5b859e635ffc3d8e0242)
　この投稿の続編です。この投稿でうまく動かなかったところを直してようやく完成しました。

試行錯誤しながらも、ある程度の完成度まで仕上げられましたが、結局のところ、完成にはできませんでした。（※追記 この記事時点のことで、結局完成しました！）
上記の投稿ですでに編集済みですが、x509証明書が、FIDO Allianceに登録されていないためと、最終的に判断しました。

FIDOのプロトコルだけでなく、Passkey認証付きBLEペリフェラル、x509証明書など、多岐にわたるノウハウを獲得できました。今回の主要な目的の一つでしたので良かったと思っています。

最後の最後で行った修正を記録しておきます。

#x509v3証明書にする

x509証明書の作成には以下を使っていました。

・Junkurihara/js-x509-utils
　https://github.com/junkurihara/js-x509-utils

しかしながら、v3には対応していないため、急遽以下のnpmモジュールに変更しました。

・jsrsasign
　https://kjur.github.io/jsrsasign/

これでv3にはなりました。fido2-libのコメントアウトも解除できました。

ですが、Chromeはエラーを吐いていましたので、さらに、本物のFIDOデバイスから抜き出したx509証明書との違いを探してみました。以下の2つで差分がありました。

・サブジェクトキー識別子
・FIDO U2F certificate transports extension

サブジェクトキー識別子が何なのかがわかりませんでした。一般にHashらしく、それっぽく入れてみたのですがだめでした。コード上ではコメントアウトしています。

FIDO U2F certificate transports extension は、以下の仕様書に記載がありました。
　[FIDO U2F Authenticator Transports Extension](https://fidoalliance.org/specs/fido-u2f-v1.2-ps-20170411/fido-u2f-authenticator-transports-extension-v1.2-ps-20170411.pdf)

結局x509証明書作成の部分は、以下のようなコードになりました。
(有効期限が固定値だったりと、力尽きてる感がありますが。。。)

```js:index.js
  // X.509証明書の作成
  var tbsc = new rs.KJUR.asn1.x509.TBSCertificate();

  tbsc.setSerialNumberByParam({'int': 1234});
  tbsc.setSignatureAlgByParam({'name': 'SHA256withECDSA'});
  tbsc.setIssuerByParam({'str': "/CN=FT FIDO 0200"});  
  tbsc.setNotBeforeByParam({'str': "190511235959Z"});
  tbsc.setNotAfterByParam({'str': "340511235959Z"});
  tbsc.setSubjectByParam({'str': "/CN=FT FIDO P2000000000000"});  
  tbsc.setSubjectPublicKey(kp.pubKeyObj);

/*
  //サブジェクトキー識別子
  var extSKI = new rs.KJUR.asn1.x509.Extension();
  extSKI.oid = '2.5.29.14';
  const ski = rs.KJUR.crypto.Util.hashHex(kp_cert.pubKeyObj.pubKeyHex, 'sha1');
  const derSKI = new rs.KJUR.asn1.DEROctetString({ hex: ski });
  extSKI.getExtnValueHex = () => {return derSKI.getEncodedHex() };
  tbsc.appendExtension(extSKI);
*/

  // FIDO U2F certificate transports extension
  var extSKI2 = new rs.KJUR.asn1.x509.Extension();
  extSKI2.oid = '1.3.6.1.4.1.45724.2.1.1';
  extSKI2.getExtnValueHex = () => { return "03020640" };
  tbsc.appendExtension(extSKI2);
    
  var cert = new rs.KJUR.asn1.x509.Certificate({'tbscertobj': tbsc, 'prvkeyobj': kp_cert.prvKeyObj });
  cert.sign();
  var attestationCert = Buffer.from(cert.hTLV, 'hex');
```

#FIDO仮想デバイスの通信バッファサイズを変更

X509証明書をv3にしたからなのか、通信サイズが少し大きくなって、バッファオーバーフローが発生しました。
Arduinoのソースコードで、通信バッファサイズを2倍にしました。

#結果

だめでした。状況変わらずです。
以下のブラウザ画面です。何回見させられたことか。。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/4251cbae-7344-cc1d-5fdb-11c946242705.png)

このダイアログはChromeが出しているわけではなく、OSが出しているように思えます。Firefoxでも同じ表示だったためです。

#最後に

ここまでご参照いただきありがとうございました。
CISSP合格に必要な勉強と時間（トレーニングあり）

こんにちは！

日本でセキュリティ人材の不足が叫ばれています。そんな中、注目されている資格がCISSPです。
ただ、日本の合格者は約2500人（2020.3月時点）で、どう勉強すれば合格するの？試験の様子は？などの情報がなかなかないです。

今回は、最近CISSPに合格した私が合格のための勉強法を解説します。1人でも多くの方が合格しますように！
それではいきましょう！

# 結論：CISSP合格に必要な勉強と時間

- CISSP Official Student Guide(日本語)を1周し苦手分野を把握
    - CISSP Official Student Guide(日本語)は[セキュリティベンダのトレーニング](https://www.nri-secure.co.jp/service/learning/cissp_training)で配布。
    - トレーニングに参加しない場合、[新版 CISSP CBK公式ガイドブック](https://www.amazon.co.jp/dp/475710376X/ref=cm_sw_r_tw_dp_U_x_itsIEbWTTS80W ) で代用できると思います。
　
- [CISSP公式問題集](https://www.amazon.co.jp/dp/B08C7J6SR5/ref=cm_sw_r_tw_dp_x_DXu3FbPV91GJG)を正答率70%以上になるまで繰り返す。
    - 問題数は約100問×8ドメイン＋模擬試験125問×4。
    - amazon, honto, apple books等で販売されています。(2020.12.19時点)
    - 間違えた問題の用語をStudent Guideで確認しノートにメモ。**CISSPは試験範囲が広いのでノートに苦手分野をまとめるのがおすすめ**です。
    - CISSPは過去問を公開していないため全く同じ問題は出ませんが、**設問の聞かれ方は本番と同じ**なので購入必須です！
    - 日本語の問題集はこれだけなので、貴重です。

- **超重要** 選択肢を消去法で絞る練習が大事
    - CISSPの問題は全て4択ですが、問題集をやっていると2択まで絞れるがどちらも正解に見える・・・・ことが多発します。
    - 原因は、①用語を知らない②問題文のキーワードを拾えていない（考慮できていない）のどちらかなので、**用語を暗記して、キーワードを拾い2択から答えを導き出す練習**をすると良いです。
    - CISSPは大量の用語を知った上で、セキュリティ責任者として与えられた情報から判断を下す能力が求められます。

- 勉強時間は105時間で、期間は3ヶ月（[トレーニング](https://www.nri-secure.co.jp/service/learning/cissp_training)含む）
    - 前提として私のスキルは、情報処理安全確保支援士、CCNA(Switch and Routing)を取得したレベルです。ネットワークとセキュリティの基礎は理解しているレベルだと思います。

- コストは約60万円
    - 60万円　[セキュリティベンダのトレーニング](https://www.nri-secure.co.jp/service/learning/cissp_training)
    - 3,300円　[CISSP公式問題集](https://honto.jp/ebook/pd_29714148.html)

# CISSPとは

- CISSPはCertified Information Systems Security Professionalの略で、日本語にすると「情報システムセキュリティプロフェッショナル認定」です。
- [(ISC)2CISSP CBK](https://japan.isc2.org/cissp_gaiyou.html)に書かれた知識の理解が要件です。
- 資格保有者は世界で14万2000人。日本では2566名（2020.3.8時点）です。
- アメリカのグローバルナレッジが発表した[稼げる資格ランキング](https://itjinzai-lab.jp/article/detail/2069)で、第6位にランクインしています。
- 試験は4択問題が250問。試験時間は6時間！！正答率70％以上で合格です。

# 試験の様子

- 場所は[ピアソンプロフェッショナルセンター＠新宿](https://www.pearsonvue.co.jp/test-taker/Pearson-Professional-Center-Tour.aspx)
    - リンク先の写真のとおり常に監視されているので、慣れない感じでした。
- 試験開始が8時でしたが試験前の手続きもあるので30分前位に到着すると安心です。
- 試験時間は6時間なので途中退室はOKですが、退室中も試験時間は経過します。
    - 集中が切れたら即途中退室し、軽食（さっと食べられるウィダーインゼリーがおすすめ！）でリフレッシュすると良いです。
    - 私は計3回途中退室しました。コロナの影響か、退室の度、手にアルコール消毒が必須でした。
- 問題は消去法で絞り込みパターンが多かったです。前述したとおり、問題文のキーワードから2択から1択に絞る練習は大事です。

# 詳細なタスク・スケジュール
最後にタスク・スケジュールをまとめます。

CISSPは対策に時間はかかりますが、セキュリテイ責任者の考え方を知ることができる。また、広大な試験範囲を学ぶことで自社のセキュリティ対策に不足はないか知ることもできます。（あと転職の推奨資格要件に記載されることも多いです）
日本語の問題集も2019年に登場し対策もしやすくなっています。取るなら今です！


|タスク       |ポイント　　　　　     | 時間 |
|:----------|:------------------|------:|
|トレーニング|5日間で60万円。一通り試験範囲を学び苦手範囲を把握| 40h|
|問題集1周目|正答率48.4%| 11h|
|復習|1ドメインごとに復習⇒再度解く。正答率82.8％| 20h|
|ノート作成|覚える範囲を絞るために。問題集で誤答した問題の用語をStudent Guideを見てまとめる| 9h|
|問題集2周目|正答率69.9%| 19h|
|試験|試験時間は6時間。集中が切れたら休憩して軽食| 6h|
|合計|| **105h**|


# 更新
- 2020.12.19 [CISSP公式問題集](https://www.amazon.co.jp/dp/B08C7J6SR5/ref=cm_sw_r_tw_dp_x_DXu3FbPV91GJG)がamazonで販売されていたためリンクをhontoからamazonに変更。
Railsアプリのテスト実行中に cookies.signed がエラー（undefined） になったときの対処法

こんにちは、[ペーパーエンジニアのよしこ](https://twitter.com/K2_Yoshiko)です。

Ruby on Railsのテストで、Cookies周りのバグに対応しました。
RSpecテスト環境での日本語情報が少なかったので、私と同じ初心者向けに情報共有します。

# バグの内容

ControllerやHelperなどで使われている`cookies.signed[:foo]`をテストで呼び出すと、
NoMethodError: undefined method `signed' for #\<Rack::Test::CookieJar:0x0\>とエラーになりました。

※ `cokkies.permanent` や `cookies.encrypted` でも同様のエラーになります。

``` hoges_controller.rb
class hogesController < ApplicationController
  def hogehoge
    pp cookies.signed[:foo] = "bar"
  end
end
```

上のコントローラー（もしくはヘルパー）のRSpecテストを書きます。

``` hoges_request_spec.rb
RSpec.describe "Hoges", type: :request do
  it { expect(hogehoge).to eq "bar" }
end
```

実行結果は、エラーとなります。

```
#ターミナル
$ rspec

Failures:

  1) Hoges #hogehoge
     Failure/Error: pp cookies.signed[:foo] = "bar"
     
     NoMethodError:
       undefined method `signed' for #<Rack::Test::CookieJar:0x00007ffddefd5460>
     # ./app/helpers/hoges_controller.rb:3:in 

```


# 対処方法（結論）

Rack::Test::CookieJarの未定義メソッド (undefined method) を定義し直します。

`./spec/support/cookies.rb`というファイル（名前は任意）を作成し、下のコードで保存します。

``` cookies.rb
# RSpecでcookies.signedがエラーになる対処
class Rack::Test::CookieJar
  def signed
    self
  end

  def permanent
    self
  end

  def encrypted
    self
  end
end
```

これで、 テストはパスできるはずです。

この解決方法は、GitHubのRSpec Issuesのコメントに記載されていました。
[【GitHub】Signed cookies not available in controller specs - rspec-rails 3.5.0, rails 5.0 #1658](https://github.com/rspec/rspec-rails/issues/1658)
こちらの最下部コメントがヒントになりました。

> @wangthony wangthony  commented on 10 Nov 2018

>@ivko999 's solution worked for me - thanks!
>Even cleaner, just put it in a spec/support file:

>```
># spec/support/cookies.rb
>class ActionDispatch::Cookies::CookieJar
>  def encrypted; self; end
>  def signed; self; end
>  def permanent; self; end # I needed this, too
>end
>```


# なぜ動かないのか

Railsのcookieクラスは、環境によって参照元が変わります。

```
# テスト環境以外
ActionDispatch::Cookies::CookieJar

# テスト環境
Rack::Test::CookieJar
```

テスト環境のRack::Test::CookieJarが、
`signed`  `permanent`  `encrypted` メソッドをサポートしていないので、
テスト実行時にエラーになってしまいます。

> ※ ActionController::TestCaseではサポートしているとのことなので、Controllerテストではサポートしているのかもしれません。
> [【GitHub】Signed cookies not available in controller tests #27145](https://github.com/rails/rails/issues/27145)

参考にしたブログ記事
[Railsのインテグレーションテストでcookies.signedを使いたい](https://medium.com/@petitviolet/railsのインテグレーションテストでcookies-signedを使いたい-6b046e1331d6)


以上となります。
少しでもお力になれれば幸いです。
Qiita書き方の初歩　タイトル、コードの書き方　画像の貼り方

記事作成における初歩的な内容をメモ
・タイトル書き方
・コードの書き方
・画像の貼り方
・細かい設定は公式を参照

#タイトルの書き方
タイトルは先頭に#を付ける
例）#タイトルの書き方


#コードの書き方
**1.コードの範囲指定**
　 コードの始まり：「Shift+@」で入力できる記号(記号の名前わかりません汗)を3回入力
　 コードの終わり：同じく「Shift+@」で入力できる記号を3回入力
　**↓こんな感じ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/707e1c18-ed46-3d67-8a66-625ff7a55c56.png)

**2.コード入力**　
この記号の中にコードを入力すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/385af5f7-8f22-4a0c-4765-7ac94cfafcd2.png)
　↓このように表示されます



```
   private float red;
```

**3.言語の指定**
言語がC#の場合、「Csharp」を次のように記述すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/a6845082-7b3c-c872-bd39-49aa1340b9f6.png)
↓色がついて表示されます

```Csharp
   private float red;
```
**4.スクリプト名称の入力**
名前を入れたい場合「:」コロンを入力したあと名称を入力
:testを付け足してみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/ef72229f-7659-39cb-d296-cacf93b985f1.png)
↓左上に名称が表示されます。

```Csharp:test
   private float red;
```

#画像の貼り方
貼り方は2種類
**①貼りたい画像を記事内にドラック＆ドロップ**

**②記事右上の画像ボタンをクリック**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/755780c1-c29f-d64b-c97b-578ee6b7c588.png)

#細かい設定は公式を参照
↓リンクはこちら
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
【Python】Seleniumでブラウザの自動操作をする

PythonでSeleniumを使用する時の、基本的な使い方について記載します。



# ライブラリのインストール

```
pip install selenium
```


pythonでimportする場合

```python
from selenium import webdriver
from selenium.webdriver.support.select import Select
```


# 指定したURLに遷移する

```python
# Chromeを起動
driver = webdriver.Chrome()

# 指定したURLに遷移する
driver.get("指定したURL")
```


# テキストボックスに入力する
name属性などを取得してから、テキストボックスに文字を入力します。

```python
# 指定したname属性のテキストボックスに文字を入力する
element = driver.find_element_by_name("name属性")
element.send_keys("テキスト")

# 指定したid属性のテキストボックスに文字を入力する
element = driver.find_element_by_id("id属性")
element.send_keys("テキスト")

# 指定したclass属性のテキストボックスに文字を入力する
element = driver.find_element_by_class_name("class属性")
element.send_keys("テキスト")

# class属性A内のclass属性Bのテキストボックスに文字を入力する
element = driver.find_element_by_class_name("class属性A").find_element_by_name("class属性B")
element.send_keys("テキスト")
```

# 確認ダイアログを閉じる

```python

# 確認ダイアログを押下する
alert = driver.switch_to.alert
alert.accept()
```

# ボタンを押下する

ボタンを押下する場合、onclick内のJavaScriptを実行させるか、指定した属性を押下する方法があります。


```python
# JavaScriptの実行
driver.execute_script("JavaScript名")

# 指定したclass属性を押下する
driver.find_element_by_class_name("class属性").click()
```

# Webブラウザを閉じる

```python
# 開いているWebブラウザを閉じる
driver.quit()
```

# 例：ログインIDを入力する方法
[Qiitaのログイン画面](https://qiita.com/login)から、ログインID・パスワードを入力する場合以下のようにします。

```python

from selenium import webdriver
from selenium.webdriver.support.select import Select

# Chromeを起動
driver = webdriver.Chrome()

# 指定したURLに遷移する
driver.get("https://qiita.com/login")

# 「ユーザ名またはメールアドレス」を入力
driver.find_element_by_name("identity").send_keys("ログインID")

# 「パスワード」を入力
driver.find_element_by_name("password").send_keys("パスワード")

# 「Qiitaにログイン」を押下
driver.find_element_by_name("commit").click()

# Webブラウザを閉じる
driver.quit()

```

# 参考
https://tanuhack.com/selenium/#CSSXPath
https://www.seleniumqref.com/index.html
GitLabの始め方

# はじめに

ここでは、GitLabのユーザー登録やSourceTreeの初期設定について解説します。

# ユーザー登録

[GitLab公式ページ](https://gitlab.com/)にアクセスし、右上の「Register」をクリックします。

![gitlab_top.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/b4273108-1162-714d-3622-f85cac8c1686.png)

ユーザーIDやメールアドレスなどを入力します。

![gitlab_register.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/bafa420c-4abd-25b7-489b-3d39fd7855de.png)


# SourceTreeの初期設定

ユーザー登録が済んだら、SourceTreeでリモートリポジトリとしてGitLabを登録します。
SourceTreeを立ち上げ、左上の「Remote」を選択し、「アカウントを追加」をクリックして立ち上がるウィンドウで、ホスティングサービスとして「GitLab」を、優先するプロトコルとして「HTTPS」を選択し、「Personal Access Tokenを再読み込み」をクリックします。

![gitlab_sourcetree.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/80a1f5e0-f848-9c09-b266-eb3dbaa9dde8.png)

立ち上がったウィンドウでユーザーIDやパスワードを入力して認証するわけですが、ここのパスワードはGitLabアカウントのパスワードではなく、GitLabのWebページ上で作成した一時パスワードを使用することになります。

GitLabのWebページで、右上のメニューから「Settings」に進みます。

![gitlab_settings.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/c864b9ed-29bc-fd93-eaec-d758d2f8d3d1.png)

すると、以下のようなページに移りますので、左側のメニューから「Access Tokens」を選択します。

![gitlab_tokens.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/9f243771-afb6-203e-35d5-7af3fbd16d48.png)

遷移先のページでトークン名を入力し、有効期限を設定すると、認証に用いるパスワードが表示されます。

![gitlab_access_tokens.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/e13f093d-2f44-d8a7-a36a-6f11fd3c6fb2.png)


# まとめ

ここでは、GitLabの利用を開始するにあたって必要な初期設定について解説しました。
以上の設定が終われば、GitLabにソースコードをアップロードできるようになります。
プログラミング初心者の私が気になったワード

### Ubuntuてよく聞くけど何？
Linuxディストリビューションの一つ。

### まって、「Linux」て何？「でぃすとりびゅーしよん」て何？
Linuxとは、OS（Operating System）の一つ。OSはLinuxの他に、MacのOS XやWindowsOS などがある。
LinuxはオープンソースのOSで、ユーザーはそれを使ってまた新しいOS的なものを開発することができる。そうしてできたものをディストリビューションという。
そして話は戻り、UbuntuとはLinuxというOSを元に開発されたディストリビューションの事。（厳密にいうとUbuntuは、これもまたLinuxディストリビューションのDebianが元となって作られたもの）

以下、その他の気になったワード（調べる予定）
Docker
Kernel
Virtual box
Shell
Bash
yml
Java Gold SE8 に合格したお話

###はじめに
***
やっとこさ「Oracle Certified Java Programmer, Gold SE 8」を取得できました。
結果としては正答率87%でした。（65%以上で合格）　受ける前不安でしたが案外やれましたね…。

Javaの資格取るメリットとか、実際の試験に関する所感など書いていきます。

###Java Gold SE8 ってなんぞや？
***
Oracleが認定するJavaプログラマの資格です。Bronze、Silver、Goldと3つあり
<B>難易度は[Bronze < Silver < Gold]</B> となっています。
受験料は税込みで3万ペリカくらいします。　これじゃ地上に出られない！！
あとGoldには取得条件があり、<B>事前にSilverの資格を取得していることが必要条件</B>となります。

ちなみにSE8っていうのはJavaのバージョンのことを指しています。


###Goldをの資格を取得する（学習する）メリット
***
Javaのクラスやメソッドの具体的な使い方等を網羅している感じですね。
あと、<b>「Stream API」</b>という分野が大きくフォーカスされています。
これを学習するとfor文とかif文とかいっぱい書いてて可読性の悪いコードも簡潔に書けるようになります。
他には、並列処理とかファイル操作とかデータベースの接続についても範囲に含まれます。（他にもありますが省略します）

学習するメリットとしては下記のような感じだと思います。

+ 簡潔に可読性の高いコードを書く技術が身に着けられる。
+ 実務で実際に使われるようなメソッド等（ファイル操作とかデータベース接続とか）を理解することができる。
+ 処理の高速化について知ることができる（並列処理、ここは結構難しいです笑）

つまり、
Silverではオブジェクト指向言語の特性について学習しますが、GoldではJavaのクラスやメソッドについて多く言及していることが分かるかと思います。ただしSilverと重複する部分も範囲には含まれています。


###Goldでの学習時間の目安
***
実務経験の浅い人がやるには学習量はそこそこ多いと思います。
ちなみに私は実務経験の浅い人に該当します。
120時間くらいの学習時間は見ておいた方がいいかも。（しっかり網羅して理解しようと思うならもっと必要だと思う）

###Goldでの学習の方法について
***
ここに関しては持論です。
<b>まずは紫本でしっかり説明を見て自分でコーディングして動作確認しながら進める</b>のが良いと思います。
紫本は黒本と比べても解説が丁寧にされています。
コーディングした方が良い理由については、実際に動作させてみた方が納得感があるし、コーディングの途中に思わぬ発見があったりします。（コンパイルエラーとか）　あと、本だけで勉強すると内容がなかなかインプットされません。

概念やどういうメソッドがあるのか軽く頭に入った状態で黒本の問題に着手した方が精神的に安全な気がします。
全く何も知らない状態で黒本解こうとするとイライラするかも。（ちなみにSilverの時は黒本オンリーで勉強してました。解説丁寧だし。）

###Goldの試験について
***
Silverの試験と比較すると、引っ掛け問題的な要素は弱くなっているように思えました。
どちらかというと<b>メソッドを使用した時の挙動とか理解できているかどうか</b>が重要な感じ。
つまりしっかり勉強しているとしっかり点数が取れる印象でもあります。

あと、<b>やはり黒本が最強でした。</b>　私は黒本と紫本両方使って学習しましたが
試験で高得点とれた要因としては確実に黒本です。　ただ、詳しく解説が書かれているのは紫本。
Javaの学習としては紫本、試験対策としては黒本ですね。　まあ個人的には両方使用することを推奨します。

黒本が最強といった理由としては、まず既視感のある問題が多かったです。
学習としては良くないですが、たまたま答え覚えてたやつがそのまま出るみたいな。
そういう意味ではSilverと同じだったかもしれません。
関数型インターフェースやStreamAPIとか主要なとこしっかり網羅して、黒本の総合演習2周くらいしてればいい線いけるのかも。

まあ後は、Silverと同じで<b>キャンペーン中であれば再受験無料</b>ってのがあるので絶対確認しておいた方がいいです。
Jupyter Notebook 初期設定Tips

## はじめに
jupyter notebookを使い始めてから、知っていればよかったと思った設定がいくつかあったので、
記事にまとめて、いつでも見返せるようにしたいというのが始まりです。
他の記事でも紹介しているものはあると思いますが、情報が少し古かったので改めて書いてあるものもあります。
随時、気づいたことがあれば追加していくつもりなので、最初は情報が少ないですが、了承ください。

## 環境
Anaconda3
Jupyter Notebook 6.0.1
Python 3.7.4

## %matplotlib inline の省略

**そもそも「%matplotlib inline」とは何か**
Jupyter Notebookでnotebook上にグラフを表示するために必要。
%matplotlibの詳細の設定については、[こちら](https://ipython.readthedocs.io/en/stable/interactive/magics.html#magic-matplotlib)を参照してください。
グラフを表示するのに毎回plt.show()やこの「%matplotlib inline」を書くのが面倒なので、常にグラフを表示できるようにするための方法です。

※<code>C:\Users\username\\.jupyter\jupyter_notebook_config.py</code>ファイルがある場合は、手順３から実行

① 　　Anaconda Prompt(anaconda)を起動する。
②　 　プロンプト上で以下のコマンドを実行する


> jupyter notebook --generate-config

    
③ 　 ② で作成されたファイルを開き、下記行を追加する。

```config
# lines of code to run at IPython startup.
# c.InteractiveShellApp.exec_lines = traitlets.Undefined
c.InteractiveShellApp.exec_lines = ['%matplotlib inline']
```
  
  
## Jupyter Notebook初期表示ディレクトリの変更

Jupyter Notebookを起動すると、初期表示ディレクトリは<code>C:\Users\username</code>です。
ただ、notebookを保存しているディレクトリを最初から表示してくれるようにしたかったのがきっかけです。

上記、matplotlibの設定変更するときに作成した<code>jupyter_notebook_config.py</code>を利用します。

1.  C:\Users\username\\.jupyter　ディレクトリに移動します。
2.  jupyter_notebook_config.pyファイルをテキストエディタで開きます。
3.  下記のように修正します。（264行目辺り）

注意点として、<code>c:\user</code>を設定する場合は、「c:\\\user」 or 「c:/user」にすること。
windowsのパスの指定をそのまま利用すると設定がうまくいきません。

```python
## 修正前
## The directory to use for notebooks and kernels.
c.NotebookApp.notebook_dir = ''

## 修正後
## The directory to use for notebooks and kernels.
c.NotebookApp.notebook_dir = '変更したいディレクトリ先を入力'
```


## 参考サイト
[%matplotlib inlineを毎回書かなくて済む方法](https://qiita.com/nogut0123/items/2c83e30e274e5a51cb41)
行列積の誤差逆伝播を計算グラフで考えてみた



# 1.導入

[以前の記事](https://qiita.com/17ec084/items/03899202aa3282f9a4fd)でも述べた通り、
誤差逆伝播法と計算グラフの関係は、次のように表すことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/e38b10b8-2f74-3d19-28dc-0c7a3e5e153e.png)

今回は、ニューラルネットワークの実装に欠かせない、行列積(具体的にはベクトルと行列の積)計算における逆伝播の式を求めていこうと思います。
この過程が理解できれば、「重み行列中のある一か所だけ重みを固定したい」などの特殊なニューラルネットワークを実装することも容易に行えるようになるはずです。



# 2.計算グラフの設計

まず、具体的にどのような行列積を考えるかを明確にしたいと思います。
ニューラルネットワークの各層では、現在の層の入力ベクトル(つまり前の層からの出力ベクトル)$\left( \begin{array}{a} x_1 && \ldots && x_{inputDim} \end{array} \right)$にバイアス1(:= $x_0$)を連結したもの
$\boldsymbol{x}=\left( \begin{array}{a} x_0 && x_1 && \ldots && x_{inputDim} \end{array} \right)$
と各層の重み行列$W$の積$xW$を計算し、続いてその結果を活性化関数に入れます。(今回、活性化関数については議論しません)
ここで、$W$は$(inputDim+1)$行$outputDim$列の行列となります。
積の計算結果は$outputDim$次元の行ベクトル
$\left( \begin{array}{a} x_0 W_{0,1}+x_1 W_{1,1}+ \ldots +x_{inputDim} W_{inputDim,1} && \ldots && x_0 W_{0,outputDim}+x_1 W_{1,outputDim}+ \ldots +x_{inputDim} W_{inputDim,outputDim} \end{array} \right)$となります。

これを素直に計算ベクトルで表すと、次のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/767d542d-1585-92d2-de62-8fd39e33af95.png)

現在の層へ逆伝播されてきた誤差を、赤字で示した$\boldsymbol{\partial}$とします。
出力$\boldsymbol{x}W$の直前に、1出力加算ノード「+」が2つあります。
1出力の加算ノードでは誤差は何も変化せずそのまま通過し、次のノードへ進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/94d2f327-e4b8-adab-6a22-b51d2b8acb10.png)

続いては掛け算ノード(6つ)です。掛け算ノードは2入力なので、逆伝播する誤差は6×2=12通りあります。
そのうち一番左のもので、$x_0$へ伝わる誤差を例にとって説明します。
誤差逆伝播は、順方向の出力□を順方向入力△で微分し、逆方向の誤差入力〇を掛けることで求めることができます。
今、□=$x_0 W_{0,1}$、△=$x_0$、〇=$\partial_1$ですから、誤差出力☆=$W_{0,1} \partial_1$と求められます。
他11つも同様に考えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/3f16442d-7871-1ca8-5b10-2e626672fe64.png)

実は、これで$\boldsymbol{x}$へ伝わる誤差、すなわち逆方向に出力される誤差が求められています。
事実、今求めた誤差のうち6つは$\boldsymbol{x}$と直接つながっていて、かつ$\boldsymbol{x}$はこれら6つ以外に直接つながっているものはありません。

例えば$x_0$のノードへ伝わる誤差には$\partial_1W_{0,1}, ..., \partial_{outputDim}W_{0,outputDim}$があります。
これらの総和を求めると$\sum_{i=1}^{outputDim}{\partial_iW_{0,i}}$です。
一般化すると、$x_j$のノードへ伝わる誤差の総和は$\sum_{i=1}^{outputDim}{\partial_iW_{j,i}}$です。
つまり、転置行列の記号を$^T$とすると、$\sum_{i=1}^{outputDim}{\partial_iW^T_{i,j}}$です。
したがって、$\boldsymbol{x}$に伝わる誤差は$\boldsymbol{\partial}W^T$であるといえます。

実は、損失関数を$L$と書くとき、
$target$に伝わる誤差を$\frac{\partial L}{\partial target}$と書くことができます。
これは、計算グラフを「関数をできるだけ細かく分解して、微分法の連鎖律を適用する様子を図に表したもの」とみることで、おのずと理解できるはずです。ある層に伝わる誤差は、損失関数をその層で偏微分したものと同じです。
上のことは
$\frac{\partial L}{\partial \boldsymbol{x}}=\frac{\partial L}{\partial \boldsymbol{y}}W^T$
と書けます。(ただし$y$は現在の層の出力ベクトルです)

また$W$へ伝わる誤差$\frac{\partial L}{\partial W}$は、
$W_{r,c}$へ伝わる誤差が$x_{r-1}\partial_c$であることより、
$\frac{\partial L}{\partial W}=\boldsymbol{x}^T\frac{\partial L}{\partial \boldsymbol{y}}$と書けます。
Vue.js 画像URLから幅と高さを取得しようとしてはまった

[こちらの記事](http://cojocco.blog113.fc2.com/blog-entry-131.html)どうり簡単に取得できるものだと思っていたけど、

```javascript

var img = new Image();
img.src = 'http://image.src.com/image.jpg';
 
var width  = img.width;  // 幅
var height = img.height; // 高さ
```


vue.jsでやってみた時には`img.width`や`img.height`が0だった。

調べているとstackoverflowなどでreturnが0だ！なんで！みたいな記事を見つけたがそもそもjavascriptの知識が乏しいのとjQueryを使ってどうにかしようとしている解決法をvue.jsでどうかくかわからなかった


知人に聞きこちらの記事を発見
https://www.raymondcamden.com/2019/06/13/reading-image-sizes-and-dimensions-with-vuejs

`img.onload`という関数を使って`var img = new Image();`でできたimgを読み込まなきゃ画像の幅、高さを取得できないそうだ。


かつ、スコープの関係で`onload`内で使った変数を他で使うことはできないため、vue.jsのdataにプロパティを設定して、そこにセットする形になるそう。



```vue.js
  export default {
    data () {
      return {
        new_image: []
      }
    },
    methods: {
      getImageSize (obj) {
        var img = new Image();
        img.onload = () => {
          this.new_image.push({width: img.width, height: img.height});
        }
        img.src = obj;
      }
    }
  }

// objには画像urlが入ります。
```
Office 365 | 10分でできる Office 365 Education A1 の利用開始手続き

関連記事は[**「Microsoft Teams の授業での活用」**](https://qiita.com/hisaho/items/12837a169bd6f1d90d5c)をご参照ください。

#はじめに
Office 365 Education A1 は教育機関向けに提供されるクラウドサービスで無償で利用することができます。2020年2月以前は、オンラインでの試用版の申し込みでは教職員・学生各**25名**、試用期間は**1ヶ月**でしたが、COVIT-19対策支援のため2020年3月より、教職員・学生各**2,500名**、試用期間は**6ヶ月**に変更されました。また、試用期間終了以降も契約さえ結べば(教育機関であるかどうかの審査があります)、そのまま利用することができます。
※カスタムドメインを使用しなければ、DNSの設定は必要ありませんのでお手軽にご利用いただけます。

本記事では、Office 365 Education A1 の利用開始手続きに関して解説していきます。

#Office 365 Education A1 で使えるサービス

Office 365 Education A1 では以下のサービスが利用可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/4f8fddd6-b128-ab2f-9f72-a87594de2327.png)

詳細に関してはマイクロソフトの[Office 365 Education](https://docs.microsoft.com/ja-jp/office365/servicedescriptions/office-365-platform-service-description/office-365-education)をご確認ください。


#Office 365 Education A1 への申し込み

- Office 365 Education A1 の申し込みは、[https://aka.ms/a1free](https://aka.ms/a1free)　から申し込みできます。**Office 365 Education A1 の申し込みの場合は、クレジットカードは必要ありません。**

- **[無料で使用開始]**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/0c57e45e-ee39-e73f-0609-095944e2a4ff.png)

- 必要事項を入力し、**[次へ]**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/b4d0f040-e672-b909-c335-9aa6602df323.png)

- ユーザーIDを作成します。
@マークの前にはログインID、@マークと.onmicrosoft.com の間には、任意の文字列を入力してください。
他のユーザーが利用していないものであれば、グリーンのチェックが表示されます。パスワードを入力して、**[アカウントの作成]**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/8ed2e8d6-23f8-c273-69bc-2736a6b4ceb2.png)

- 申込者の確認をするためにSMSもしくは電話を受けとれる電話番号を入力します。電話番号を入力後、**[自分にテキストメッセージを送信(SMS)認証]**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/ac2cfa05-df7d-f026-fb28-df3464022da7.png)

- SMSでコードが送られてきますので、そのコードを入力し**[次へ]**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/e1ff68fe-9f31-74d6-58c9-44dc7fa45cfa.png)

- これで申し込みは完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/268b3be0-cc44-44db-baf5-d43a2d5ee018.png)

- **[準備が整いました]**をクリックすると Office 365 の管理画面に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/47fc3548-998b-2d2d-a318-cca62c66caec.png)


-  続いて自組織のドメインを追加などの作業を行えますが、ドメインの所有権を確認するためにDNSの設定等が必要となります。DNSの設定権限を持っていない場合には、ドメイン追加作業は行わくてもOffice 365 Education A1 で利用できるサービスはほとんど利用可能です。

# おわり

試用期間の6ヶ月をすぎて継続利用したい場合に、教育機関であることを証明するための手続きが必要です。この手続きに関しては別途ご紹介いたします。
カスタムViewをXibで作成する

いつもはStoryboardやXibは使わずにコードで全てレイアウトを組みます
久しぶりに共通ViewをカスタムViewとしてXibで切り出して使おうとしたら忘れてたのでメモ

ただもうまとめられているので参考になった記事を載せておしまいにします
http://tanihiro.hatenablog.com/entry/2015/10/13/092710
https://takasfz.hatenablog.com/entry/2018/08/10/151515
https://qiita.com/maebaru/items/90f915f82e3d6425cbdc

# 要点
- Xibとそれに対応するSwiftファイルの作成
- XibのFile's Owenerでカスタムクラス選択(これでファイルとXibが紐づくのでIBOutletでつなげられる)
- 使用したいStoryboardのViewのclass Identifierをこのカスタムクラスにする

# 困ったこと
R.swiftを使っていたので `R.nib.customView.firstView(owner: self)`でカスタムクラスのインスタンスを取得できるかと思ったけど
取得できずに落ちました
結局この解決方法がわからなかったのでIBOutletで対応することにしました
CppUTestの導入メモ

# 背景
[テスト駆動開発による組み込みプログラミング](https://www.oreilly.co.jp/books/9784873116143/)をやろうと思ったら思ったより導入に手間取ったため。

# 目標
* CppUTest本体のビルド、インストール
* テスト駆動開発による組み込みプログラミングが提供するサンプルコードのビルド、実行
* Windows(Visual Studio)とLinux両方で環境構築

# 環境
* Windows
    * Visual Studio2019
* Linux
    * Ubuntu 18.04 on VirtualBox6.1

# CppUTest本体のビルド、インストール
## 共通
* 適当な場所にgithubから最新のソースコードをクローン<https://github.com/cpputest/cpputest>

## Windows
* cpputestフォルダ内のCppUTest_VS201x.slhをダブルクリック
* プロジェクトの変換等の画面がでるが、全てOKで次へ。
* ソリューションをビルド
    * Debugの場合、libフォルダにCppUTestd.libが生成される。
    * ReleaseでもビルドをするとCppUTest.libが生成される。
    * 違いがあるかはわからないがx86,x64でそれぞれビルドしてlibファイルを生成しておく。
* cpputestフォルダのある場所をCPPUTEST_HOMEとして環境変数に追加

## Linux
* 以下のコマンドを実行

```bash:bash
$ cd cpputest                                            // cpputestディレクトリ内へ移動
$ sudo apt install build-essential autoconf libtool      // 必要なライブラリをインストール
$ bash autogen.sh                                        // autoreconfを実行
$ ./configure                                            // makefileを生成
$ make                                                   // ファイル生成
$ make check                                             // これはやらなくてもいいかも
$ make tdd                                               // テストモジュールを実行し結果を確認
$ echo "export CPPUTEST_HOME=$(pwd)" >> ~/.bash_profile  // .bash_profileに環境変数CPPUTEST_HOMEを追加
$ source ~/.bash_profile                                 // 環境変数を反映
$ sudo make install                                      // cpputestをインストール
$ sudo ./scripts/InstallScripts.sh                       // スクリプトをインストール
```

# サンプルプログラムの実行
## 共通
ホームページからコードを落としておく<https://pragprog.com/titles/jgade/source_code>
## Windows
* codeフォルダ内にあるBookCode.dswを起動
* プロジェクトの変換を尋ねられるが全てOKで先へ進む。
* 構成プロパティ→C/C++→コード生成→関数レベルでリンクするの項目が「いいえ(/Gy-)」となっているので空欄にする。
    * AllTest_CppUTestとProductionCodeLib両方とも同じ設定にする。
* 構成プロパティ→C/C++→全般→追加のインクルードディレクトリで、`$(CPPU_U_TEST)`と記載されたパスがあるので`$(CPPUTEST_HOME)`に書き換える。
    * AllTest_CppUTestとProductionCodeLib両方とも同じ設定にする。
* 構成プロパティ→リンカ―→入力→追加の依存ファイルで以下の設定を行う.
    * `$(CPPU_U_TEST)`と記載されたパスがあるので`$(CPPUTEST_HOME)`に書き換える。
    * cpputest.libとなっているものをCppUTestd.libに書き換える。
        * ***サンプルプログラムがDebugにしか対応していないとのことなのでデバッグ版ライブラリを指定。***
    * この変更はAllTest_CppUTestのみ
* ソリューションのビルドを実行
    * 問題がなければ正常に終了
* デバッグを実行してみて`OK (127 tests, 126 ran, 525 checks, 1 ignored, 0 filtered out, 10 ms)`と表示されたら成功。

## Linux
* codeディレクトリへ移動しCppUTestだけ実行したいので、`make -i -f MakefileCppuTest.mk`を実行
* 1か所エラーが発生するので、コードを修正して再度ビルド。
* `OK (127 tests, 126 ran, 525 checks, 1 ignored, 0 filtered out, 1 ms)`と表示されたら成功。
Dev環境取得直後にサンプルデータを消し込む方法

小ネタですが(Partner)Developer環境に初期投入されているサンプルデータを開発者コンソール Anonymous Windowから消し込む方法です。

```
List<Opportunity> oppList = [Select Id From Opportunity];
delete oppList;

List<Case> csList = [Select Id From Case];
delete csList;

List<Lead> ldList = [Select Id From Lead];
delete ldList;

List<Campaign> cpList = [Select Id From Campaign];
delete cpList;

List<Entitlement> eList = [Select Id From Entitlement];
delete eList;

List<Account> accList = [Select Id From Account];
delete accList;
```
リモートワークの生産性を上げるために買ってよかった物6選とハック術をまとめる。

生産性が上がる環境で仕事するだけで、同じ仕事が短時間で終わるようになります。
例えばデュアルディスプレイを導入することで42%も生産性が向上することが知られており、理想の作業環境を構築することは、エンジニアにとって必須ではないでしょうか。

この記事では新卒エンジニアが自宅での作業環境を構築する際に、気をつけたことについてまとめているのでぜひ参考にしてください！

## 生産性を上げる物を買う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202653/0e2fa810-3923-539a-52c6-48ee63d8beb8.png)


### 広い机を買う

パソコンを置くだけでなく、ノートにメモをして思考を整理することが多いのである程度広い机を買いました。

### 速いネット回線を契約する

NTT+OCNで契約しました。
この組み合わせにして、接続方式をIPoE方式にしました。
IPoE方式ならネット回線が混みやすい時間帯でも100Mbpsは出してくれるので満足しています。

### デュアルディスプレイ

デュアルディスプレイにすることで、作業効率が42%上がると言われてます。
エディタを開いてプログラムを書く際に、大きなモニターがあればかなり作業が捗ることはエンジニアなら誰もが実感したことがあるはず。
僕がディスプレイに求めた機能は以下です。
- 24インチ以上
- 高さ調節が簡単にできる
- ベゼルレス（かっこいい）

ディスプレイの高さの理想は目と同じくらいだと言われています。
高さ調節ができないディスプレイの場合下に台を置く必要があるので、最初から高さ調節ができる物を選ぶのが良いと思います。

### HHKB professional hybrid type-s

エンジニアならタイピングする回数は多くなるのでキーボードにこだわるべきです。
僕はMacbookProを愛用していましたが、
- 長時間のタイピングだと疲れる
- MacbookProは嵩上げして、ディスプレイの高さが目線と合うようにしたい
という理由で、外付けのキーボードを検討し始めました。
HHKBにした理由は、エンジニア界隈でかなりの人気を持っているからです。
高額なのがデメリットですが、いろんなキーボードを何回も検討するよりは、最初から良いものを買ったほうが結果的にコスパが良いだろうという判断です。
実際HHKBを使ってみるとタイピングの感覚が心地良くて、気付いたらHHKBに触るためにPCの前に座っている自分がいました。

### logicool mxergo

トラックボールタイプのマウスを使い始める前は、「なんかいろいろ極めた先で使い始める変態的なマウス」というイメージがありました。
実際このタイプのマウスは人によって相性がはっきり出るので、友人のを借りたりしてから購入するのが良いです。
しかし相性が良い人であれば以下のようなメリットがあります。
- 少ないスペースのみ使用する。
- 手を動かさなくて良い
- 腕が疲れにくい
僕の場合は普通のマウスを使うとストレスが溜まるくらいには、トラックボール式のマウスを気に入っています。

### 高い椅子を買う

1、2時間程度なら安い椅子でも問題はありません。しかしエンジニアのように8時間程度椅子に座っていると、お尻や腰が痛くなってきます。
リモートワークする以前から、家での作業用にある程度高い椅子を購入することは決めていました。
ミドルグレードの椅子でも10万円くらいはするので、中古のオフィス用品店で8万円の椅子を2万円ほどで購入しました。
中古でも性能が落ちているわけでもないので、新品にこだわる必要はないとおもいます。

### AirPods Proを買う

集中するために効果的だと感じたのが、外部の音を消すことです。
ノイズキャンセリング機能を考えると、ヘッドフォンタイプが最強ですが、蒸れたりして快適性が下がるのでイヤホンタイプを使っています。
イヤホンタイプのノイズキャンセリングなら、SONYかAppleの二択ですが、Apple製品をたくさん持っているのでAirPods Proを買いました。

ノイズキャンセリングだけだと、微妙に外部の音が入ってくるのでSpotifyのLo-Fi Beatsというプレイリストを流すようにしています。
このプレイリストは歌詞がない曲を定期的に更新してくれます。
定期的に更新されるので、飽きることがなく重宝しています。

## 環境を整える

### 机の上を綺麗にする

自宅の作業環境を構築し始めたときに、いろいろなエンジニアの作業環境を見て思ったことがあります。
「机の上ごちゃごちゃしすぎ」ということです。
僕の場合は机の上に最低限のものしか起きたくない性格なので、机の上はなるべく綺麗にするようにしています。
おかしいとかぬいぐるみとかは絶対に起きたくないです。

これは個人の好みなので、どっちも試してみるのが良いでしょう。

### 週に何回か運動する。

エンジニアは特に座りっぱなしの職業なので何かしら意識的に運動しないと不健康です。
僕の場合は趣味のロードバイクかランニングをするようにしています。

### 1時間に1回は立つ

ずっと座りっぱなしだと、血流が悪くなるので、1時間に1回は立つようにしています。
Apple watchに命令されるがままに立つだけです。

### ちゃんと身支度をする

リモートワークだと極論パジャマで髭伸ばして髪ボサボサのままでも仕事ができてしまいます。
しかしそのようなだらしない格好だと、気持ちの切り替えができずに集中力が上がりません。
外に行く予定がない日でも、外出する時と同じように身支度をするようにしていました。

### 通勤がないからと言って遅くまで起きたり、寝たりしない

なんとなく寝るのが遅かったり、朝起きるのが遅いと気持ちが入りません。
通勤時間がなくなった分の時間は運動したり、家事をしたりすることに使いました。

### 気が向いた時に換気する

二酸化炭素濃度が高くなるとぼーっとするらしいので、気が向いた時に換気するようにしています。

### ナイトシフト機能を使う。

夜遅い時間帯までブルーライトを見ると、寝付きが悪くなるのでPCのナイトシフト機能を使って夜になると自動的にブルーライトをカットしてくれるようにしました。
気付かぬうちに攻撃されている！？「集中力を保つ方法」

TECE CAMP受講生の皆なさん学習お疲れ様です。
自粛ムードもあり自宅学習が増えると思いますが、家で勉強すると集中が持たない( ；∀；)
という事ありませんか？
僕は、注意散漫ねこ好き野郎なので、気付いたらyoutubeでねこ動画見てたりして　
っは！！Σ(￣。￣ﾉ)ﾉ
と我に返ったりします。

自宅学習だとどうしても集中が持たない、、、
これは、なんででしょう？

自宅には誘惑が多く
無意識のうちに、攻撃を受けているのです。
本棚の漫画や、PS４、お菓子に、おかんが大量に作り置きするカレーなど
私たちのやる気を盛大に削ってきます。

"もうやめて!とっくに ライフはゼロよ!"
遊戯王　真崎杏子引用　↓
https://www.nicovideo.jp/watch/sm117

私たちのライフポイントを守るためには、遊戯にバーサーカーソウルを引かせない事、、、

ではなく、まず何が自分の集中力を乱しているのか見つける必要があります。
　そこで、学習中に不快に感じた事をメモ機能や紙に書き出し、集中力減少の原因を突き止め対策を打ちましょう。

私は、食いしん坊なので、食べ物が目に入ると、勉強をやめて、食いつきます。
なので、目に入る場所に食べ物を置かないようにしています。
これはダイエットの時も使えます。(●´ω｀●)

休日などの学習はメリハリが大切だと思っています。
しっかりリフレッシュもしてまた教室で一緒に勉強しましょう。
Firebase Functions に VSCode でブレークポイントを設置したい

[こちらの記事](https://qiita.com/amay077/items/829630273721fb7a615e)で解説している[functions-emulator](https://www.npmjs.com/package/@google-cloud/functions-emulator)は既に Deprecated になっており困ってしまったので覚書を残しておきます。

## デバッグツール
* [Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging)
* [firebase-tools](https://www.npmjs.com/package/firebase-tools)

## `tsconfig.json`の作成
TypeScriptで開発している場合は、`tsconfig.json`の`sourceMap`を`true`にしておきます。

```json
{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es6"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}
```

## `launch.json`の作成
`.vscode/launch.json`を作成します。ポイントは`outFiles`の箇所で、これを書くとマップファイルを読み込んで、TypeScript上に直接ブレークポイントを設置できます。

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Functions",
      "type": "node",
      "request": "attach",
      "processId": "${command:PickProcess}",
      "outFiles": ["${workspaceRoot}/functions/lib/**/*.js"]
    }
  ]
}
```

## ローカルエミュレータを起動
私はできるだけグローバルインストールしたくない派なので、`npx`を使って起動します。ポイントは`--inspect-functions`で、このオプションをつけて起動しないと、ブレークポイントを設置しても止まってくれません。

```shell
npx firebase emulators:start --inspect-functions --only functions
```

## VSCode のデバッガを起動
VSCodeで <kbd>F5</kbd> を打つとアタッチ先のプロセスを訊いてくるので、エミュレータのプロセスを選択します。コンソールに `Debugger attached.` と表示されたら、ブレークポイントで止めることができるようになります。

以上
JP1で一定時間間隔で繰り返しジョブを実行させる

## はじめに

1日の中で同じジョブネットを定期的に複数回実行したい場合，次の三つの方法のどれかで定義できます。（http://itdoc.hitachi.co.jp/manuals/3020/30203K2143/AJSF0115.HTM）

- 方法1：ジョブネットを一つ作成し，スケジュールルールを複数設定する。
- 方法2：開始時刻ごとにジョブネットを作成する。
- 方法3：実行間隔制御を起動条件として設定する。

このうち、10分間隔で終日実行といった繰り返し回数が多い実行を実現しようとする場合は、方法3が現実的な設定方法となります。

以降、方法3についての説明になります。

## 設定条件

### 設定できること

- 何分間隔で実行するか。
- 何時から何時までの間で実行するか。
- １日に何回繰り返し実行するか。
- 指定日あるいは何曜日に適用するか。（カレンダーによるジョブ制御）
- 異常終了した場合に、その日の残りの繰り返し実行をするか。

### 設定できないこと

- 秒間隔での繰り返し実行。（最小１分間隔）
- 正確な時間間隔での実行。（多少のズレが発生する）
- ルートジョブネット以外での定義。

### 実現できるけど設定に工夫が必要になること

- 特定の日だけ起動条件を変える。（複数定義や排他実行で対応）
- 実行時間内の特定の時間だけ繰り返し実行をやめる。（複数定義や排他実行で対応）

## 設定方法

### 設定内容と動作のイメージ

- ルートジョブネットの「スケジュールルール」に繰り返し実行を設定する。
- ルートジョブに「起動条件」を作成する。
- 「起動条件」内に「実行間隔制御」を設定する。

↓

1. ルートジョブネットの「起動条件」内の「実行間隔制御」により一定時間待機する。
2. 待機終了後、ルートジョブネット内のジョブが実行される。
3. ルートジョブネットの「スケジュールルール」に基づき再実行される。
4. 1 に戻る。

### 設定方法

1. ルートジョブネットを作成する。
2. ルートジョブネットの「スケジュールルール」を変更する
    1. 起動条件を「設定されていれば使用する」にする。
    2. 起動条件の「回数」か「時間」を設定する。
    3. 翌日以降も同じように動かしたいならサイクル関連の設定もする。
3. ルートジョブネット内に繰り返し実行したいジョブを作成する。
4. ルートジョブネットが表示されている状態で、メニューの [編集] - [起動条件の設定] を選択する。→ ルートジョブネットのツリー表示に「.CONDITION(AND)」が作成される。
5. 「.CONDITION(AND)」内に「実行制御イベント」を作成する。
    1. 待機条件を設定する。
    2. 異常終了時に繰り返し実行をするか否かを設定する。

## 実行間隔制御を起動条件としたジョブを一時停止したい場合

### 停止手順

1. 対象の制御ジョブ（「監視中」のルートジョブ）を「強制終了」する。 
2. 対象ジョブネットを「登録解除」する。

### 再開方法

1. 対象ジョブネットを「実行登録」する。


### 補足

- ジョブを中断→再開した場合、対象となっていたルートジョブネットは「監視中」に戻らず、１回実行した後、次のサイクル（通常の設定なら翌日）まで実行されない。
- 「起動待ち」のジョブを「保留」や「停止」にした場合、そのジョブは実行されないが、次の繰り返しのタイミングでその次に実行されるジョブが「起動待ち」で作成される。再開するまでの間、繰り返し時間ごとに都度ジョブを止めないといけないので面倒くさい。
 
## おわりに

補足・他の方法なのど、コメント頂けると嬉しいです。
【Day43】積み上げ日記

##予定
■おみくじアプリ作る

##完了
■おみくじアプリ作る

##学習時間
５h

##学習ポイント
■エラー出た時
デベロッパーツール のconsoleでエラ〜メッセージを確認する

■動きをつけたい時
①イベントを追加する
②アロー関数を追加する
③イベント後どういう表示をするか

■JSでクラス作成する時
①クラスを追加する
②どういう動きをするか
③ブラウザに表示させる

■textContent = “…”;
⭕️textContent = “…”;
❌textContent (“…”);

■Math.randomとは？
■Math.floorとは？
■アロー関数とfunction

#疑問点
■Math.randomとは？
■Math.floorとは？
→マスランダムで、ランダムにする。ランダムにした数字の小数点を省く時にマスフロア。

■アロー関数とfunction
アロー関数はfunctionを用いた文の簡略版として使える

##計画通り進んだか？
進んだ。Twitterの有効的な使い方として、絶対に今日中に成し遂げることと、その結果を報告する様にすることで、逃げられない状態を作り、達成するまで辞められないという心理が働く。結果的に達成できた。絶対に達成するぞ！っていうものを宣言することはすごく大事。
VSCodeで自作のスニペットを登録する

# 概要
VSCodeで、HTML用のスニペットを新規に登録してみる。

# スニペットとは
コードパターンを登録しておくことで、それをショートカットキーで呼び出すことができる便利な仕組み。
例えば、HTMLファイルで「`html:5`+[`Tab`]」と入力すると、HTMLファイルのテンプレートがすぐに作成できる。

## 自作スニペットの登録方法
スニペットは。`.html`や`.java`など、ファイル形式ごとに登録するjsonファイルが用意されている。  
以下からは
1. 設定ファイルを開く
2. スニペットを登録する
3. 実際に表示を確認する
の流れで自作スニペットの登録方法を述べる。

### 1. 設定ファイルを開く
「ファイル」→「基本設定」→「ユーザースニペット」をクリック。
するとファイル形式を選択する画面が表示される。
今回は「HTML」にスニペットを登録してみる。

### 2. スニペットを登録する。
設定ファイルはjson形式で記述できる。
デフォルトでは色々と英語でコメントが書かれているが、とりあえず全部消してOK。
スニペットは以下の感じで記述する。

```json
{
    "スニペットの名前": {
        "prefix": "スニペット使う際のショートカット",
        "description": "スニペットの説明",
        "body": [
            "スニペットの中身",
            "配列形式で書いていく",
            "..."
        ],
    }
}
```

自分は以下のようなhtmlのテンプレを登録している。

```json
{
	"html-template": {
		"prefix": "html",
		"description": "htmlのテンプレート",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"ja\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<link rel=\"stylesheet\" href=\"${1:./style.css}\">",
			"\t<title>${2:Title}</title>",
			"</head>",
			"<body>",
			"\t$4",
			"\t<script src=\"${3:./app.js}\"></script>",
			"</body>",
			"</html>"
		]
	}
}
```

#### 入力値の補足
* `$n`  
`$1`や`$2`は、スニペット呼び出し後にフォーカスが来る場所である。
呼び出し直後は`$1`にフォーカスがいき、「`tab`」を押すと次に`$2`にフォーカスがいく。`$3`も付け足すと同じような流れでフォーカスが移動する。

* `${n:初期値}`
`$n`の箇所に初期値を設定することができる。
スニペット呼出し直後は初期値全体にフォーカスがあるため、そのまま入力すれば初期値を書き換えて値を入れることができる。

* `\t`
`\t`でインデントを入れることができる。

### 3. 実際に表示を確認する

自分の例であれば、HTMLファイルで「`html`+[`Tab`]」を入力すると以下のようにテンプレートが作成される。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Title</title>
</head>
<body>
    
    <script src="./app.js"></script>
</body>
</html>
```

## おわりに
よく使うコードパターンはどんどん登録しておこう。
Pythonのshuffleとsample、どっちが速い？

#ご挨拶

はじめまして、[cells_comp](https://twitter.com/cells_comp)です。
ROM専であった私も深夜テンションでQiitaをはじめてしまいました。
記念すべき最初の記事がこんな駄記事で申し訳ないのですが、ひとまず思いついたことを投稿していきたいと思います。

#やってみたこと
Pythonでリスト(l)の要素をランダムに並び替えたいとき、素直に考えれば

- random.shuffle(l)で並び替え
- l2 = random.sample(l, len(l))で並び替え
    - 正しくは「リストの中から指定した個数を重複せずにランダム取得」しています。
    - 指定した個数=全要素なので結果としてシャッフルしたリストが得られます。

が出てくると思います。ところで、この2つの方法どちらが速いのでしょう？
**速さ言い出すならnumpy使え**という声が聞こえそうですが、どうかご容赦ください。

#実行環境

Python 3.5.5
Intel® Core™ i7-6700 3.4GHz
Windows10 (WSL)
Ubuntu 16.04 LTS

#実行結果

###random.shuffleの場合


対象リストは整数を格納しています。

```python
import random
import time

if __name__ == '__main__':
    l = [i for i in range(1000000)]
    start = time.time()
    random.shuffle(l)
    elapsed_time = time.time() - start
    print("elapsed_time:" + str(format(elapsed_time)) + "s")
```

結果

```
elapsed_time:0.6656289100646973s
```

###random.sampleの場合

```python
import random
import time

if __name__ == '__main__':
    l = [i for i in range(1000000)]
    start = time.time()
    l2 = random.sample(l,len(l))
    elapsed_time = time.time() - start
    print("elapsed_time:" + str(format(elapsed_time)) + "s")
```

結果

```
elapsed_time:0.7895145416259766s
```

---

はい、random.shuffle()の方が2割ほど速いですね。
やはり元はランダム抽出用の関数なので最適ではない、ということでしょうか。

###おまけ

```python
import random
import time
import numpy

if __name__ == '__main__':
    l = [i for i in range(1000000)]
    start = time.time()
    numpy.random.shuffle(l)
    elapsed_time = time.time() - start
    print("elapsed_time:" + str(format(elapsed_time)) + "s")
```

結果

```
elapsed_time:0.1087648868560791s
```

***終わり！閉廷！以上！みんな解散！***

#おわりに

はい、ひとまず初投稿です。
どうにも怖気ついて今まで投稿せずにいましたが、やってみると気楽なものですね。
自己満足的な投稿ですが、たとえ一人でも何らかのお役に立てると嬉しいです。
これからも適時投稿していきたいと思います。
それでは、何卒よろしくお願いいたします。
初心者によるプログラミング学習ログ 281日目

#100日チャレンジの281日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
281日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>281日目　2.0h<br>・xdデザインカンプからのサイト模写<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/1246556037252964352?ref_src=twsrc%5Etfw">April 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
開発者コンソールでのユーザ言語の切替

画面からも操作可能な設定ですが、いくつもリンクを踏まないと画面に辿り着けないため、開発者コンソール Anonymous Windowから一発で切り替える方法を考えてみました。

```
String email = '※操作ユーザのメルアド※';
USER user = [select id,LanguageLocaleKey from USER where email =: email];
if ( user.LanguageLocaleKey == 'ja' ){
user.LanguageLocaleKey = 'en_US';
} else {
user.LanguageLocaleKey = 'ja';
}
update user;
```
plunkerでd3 その3

#概要

plunkerでd3やってみた。
covid-19のcsv読んで、vegaで片対数グラフにしてみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c0f32bc3-fa5d-76ef-f2cc-ce64a436366e.png)


#サンプルコード


```

var url = "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv";

d3.csv(url, function(data) {
  var values = [];
  for (var i = 0; i < data.length; i++)
  {
    if (data[i]['Country/Region'] == 'Japan')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Japan"
        });
      });
    }
    if (data[i]['Country/Region'] == 'Korea, South')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Koria, South"
        });
      });
    }
    if (data[i]['Country/Region'] == 'Germany')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Germany"
        });
      });
    }
    if (data[i]['Country/Region'] == 'Taiwan*')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Taiwn"
        });
      });
    }
  }  
  const spec = {
	  '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
	  'width': 300,
	  'height': 300,
	  'data': {
		  'values': values
	  },
	  'mark': 'line',
    'transform': [{
      "calculate": "(datum.y + 0.1)/10", 
      "as": "y1"
    }],
	  'encoding': {
		  'x': {
			  'field': 'x', 
			  'type': 'quantitative'
		  },
		  'y': {
			  'field': 'y1', 
			  'type': 'quantitative',
        "scale": {
          "type": "log"
        }
		  },
		  'color': {
			  "field": "c", 
			  "type": "nominal"
		  }
	  }
  };
  vegaEmbed('#vis', spec);
});




```

#成果物

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

以上。