OmniAICreator/Qiita-1.07M huggingface dataset:
Rでshiny レイアウトについてメモ

#Rのシャイニーでレイアウトがどうなってるのか分からん！

公式チュートリアルを読んでみるとリアクティブなデータの可視化ができそうだと分かったけれども、ここに箱ひげを書いて、箱ひげはこのくらいの大きさで、、、
とか細かいレイアウトがどうするのか分からなかった。

結論から言うと、
サイドバーを除いた部分のレイアウトは
fluidRowの中でcolumnという部分によって調節されている。
columnを大きくすると表示される割合は大きくなるし、小さければ小スペースになる。
一行あたり12までwidthが調整できる。
グローバル変数は <<- で書くと他の部分で使いたいときにも呼び出せる。
より細かく設定するときにはHTMLの指定を学べばできるらしい。


とりあえずserver.Rで表示したいもののスクリプトを書く。
書いたモノをoutputってものに入れる。outputに入れる時になにをしてほしいものなのかも指定しておく。

```
output$table1とか、output$table2とか、output$text1
```
ui.Rでoutputに指定したものを読み込んで表示させる。

```
tableOutput("table2")、tableOutput("table2")、textOutput("text1")が表示にあたる。
```
ui.Rではリアクティブにするためのボタンやスライダーなどがある。
これらはinputに入る

```R
  selectInput("A", 
        label = "ラベル",          
        choices = c("選択肢1","選択肢1"),
        selected = "選択肢1" #最初に選択されているものを書く
        ,width = "%表示で大きさを指定"
        )
```
たとえば上記で選択式のボックスが表示される。
選択したものはinput$Aという変数に入る。
選択肢2を選択したら、input$A <- "選択肢2"という行為をしたのと同じ。
server.Rの中でinput$Aを使って反映させることもできる。


動き方の実験用に使ったスクリプトを貼っておく。
同じフォルダにserver.Rとui.Rを入れて作業用フォルダに設定しておく。
動かすときは以下のコマンド。
エラーで止めたいときはEscキーを押す。

```R
setwd("C:\\Users\\Desktop\\test")
library(shiny)
runApp(display.mode = "showcase")
```

```R
#ui.R

shinyUI(
  fluidPage(
    titlePanel("title"),
    sidebarLayout(
      sidebarPanel(
        helpText("side"),
        selectInput("select_data", label = "please select",choices = c("iris", "trees","ToothGrowth"),selected = "iris" ,width = "50%"),
        actionButton("btn_go", "plot")
        ),
      fluidRow(
        column(width = 2,textOutput("text1")),
        column(width = 4,tableOutput("table1")),
        column(width = 12,plotOutput("plot1")),
        column(width = 12,plotOutput("plot2"))
      )
    )
  )
)
```

```R
#server.R

shinyServer(
  function(input, output) {

    output$text1 <- renderText({
    if(input$select_data == "iris"){
    text_data <<- "you select iris"
    } else if (input$select_data == "trees"){
    text_data <<- "you select trees"
    } else if (input$select_data == "ToothGrowth"){
    text_data <<- "you select ToothGrowth"
    }
    text_data
    })

    output$table1 <- renderTable({
    if(input$select_data=="iris"){
    plot_data <<- data.frame(iris)
    } else if (input$select_data=="trees"){
    plot_data <<- data.frame(trees)
    } else if (input$select_data=="ToothGrowth"){
    plot_data <<- data.frame(ToothGrowth)
    }
    head(plot_data)
    })

    output$plot1 <- renderPlot({  
    input$btn_go
    plot(plot_data)
    })

    output$plot2 <- renderPlot({
    input$btn_go
    library(scatterplot3d)
    scatterplot3d(plot_data)
    })
  }
)
```
ちなみにこんな感じの出力が得られる。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/275572/fef21dff-bafe-0251-94ee-d10e419206a0.png)
![02.png](https://qiita-image-store.s3.amazonaws.com/0/275572/006e9eef-4dcd-cdcd-f6b5-e799b4170e2e.png)

結果説明などプレゼンするときに使いやすい。
そこのデータ除いたらどうなるの？という議論の時にはいちいちスクリプトを書くよりも早いし変化が分かりやすい。
ただ準備がものすごく手間。
Windows Server 2008 R2 Install

![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/01a68e8d-b1d5-cb7e-e86c-1c46120efcb7.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/2784a15e-0e16-fef4-36d3-7e7264e0cc13.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/db6d6381-5ddf-b34c-c4df-ee0eb867d71c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/a2736b82-9bf9-7eb9-1625-df534a2dfeab.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/639c3bd3-8e55-e194-6f20-098ec5a4548d.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/66337888-1596-b047-95c0-63c163a0cefd.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/7ece9868-025b-07a9-806b-a8614fcb8deb.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/e35980a9-e52d-0a2b-7f40-49091ee45629.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/f15166ff-10a4-df64-5937-b59e979effc8.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/cdb21910-d8db-09ca-61b6-bb3c771eb13f.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/d0cf49f0-b610-97bc-ce3f-390b2ba7a894.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315938/40f9f022-cf65-9f0e-9f88-8b82394fce78.png)
【便利機能】Windows10でファイルパスをコピー

#はじめに
Windows10でファイルパスを簡単にコピーする方法があることをずっと知りませんでした！今日、友人に教えてもらって感動したので記しておきます。フルパスでファイル指定するのに便利ですね。

#やり方
１．対象のファイルの上で「Shift」＋「右クリック」
２．右クリックメニューに追加表示された「パスのコピー」を選択

![menu.png](https://qiita-image-store.s3.amazonaws.com/0/299024/30f45e95-1d0d-53a6-dd82-da94e6372c16.png)

３．これでコピーされたので、「Ctrl」＋「V」または「右クリック」-「貼り付け」で、以下のようにファイルパスを貼り付けるすることができます

```
"C:\Users\xxxxx\xxxxx\xxxxx\test\test.txt"
```
openvpnのログを監査する

# openvpnのログを監査する。
 残念ならが、監査文字列(TLS: Initial)が１分程度の一定間隔で流れるの。アラート過多になるので、止めている。


## install
```
apt-get install swatch
```


## swatch script
> vi /root/bin/swatch.sh

```
#
# Swatch for /etc/openvpn/openvpn.log
#
watchfor /TLS: Initial/
  mail=alarm@osmc.hrsk,subject="openvpn connect"
```

## サービスの編集
> vi /lib/systemd/system/user_swatch_openvpn.service 

```
[Unit]
Description=openvpn-log Authentication
After=openvpn.target

[Service]
ExecStart=/usr/bin/swatch -c /root/swatchrc.auth.sh -t /etc/openvpn/openvpn.log --daemon > /dev/null 2>&1
KillMode=process
Type=simple
Restart=no

[Install]
WantedBy=multi-user.target


```

## サービスの登録

```
systemctl enable user_swatch_openvpn
systemctl start  user_swatch_openvpn
```
【react】fetch apiを使ってjsonデータを取得、POSTでフォームデータを送信する

# ReactでMySQLに接続してデータを書き込みたい
初心者です。
まずは、Jsonデータを取得して表示までをやってみる。

##まずはJsonでデータを取得して表示してみる。
```react

  constructor(props) {
    super(props);
    this.state={
      loading: false
    };
  }

  componentDidMount(){
    return fetch('url')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          loading: true,
          data: responseJson,
        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render() {
    if(this.state.loading){
      return(
        <div className="App-header">
          <p>{ this.state.data }</p>
        </div>
      );
    }else{
      return(
        <div className="App-header">
          <p>Loading...</p>
        </div>
      );
    }
  }
}
```
はまったポイント
JsonのLoading中に、response.jsonの中身をrenderしようとすると、無理！っておこられる。
-> constructorのthis.state内でloading: falseを設定し、falseなら'Loading...'をrender、responseが帰って来たらloading: trueをsetStateして解決。
できたので、今度はPHPに送信してみる。

##Fetchを使ってPHPにデータをPOSTで送信してみる

```react
  onClickHandler = (e) => {
    e.preventDefault();
    const method = "POST";
    const body = new FormData(document.getElementById('form'));

    return fetch('url', {
      method,
      body
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          inputText:''
        });
        console.log(responseJson);
      })
      .catch((error) =>{
        console.error(error);
      });

  }
```
```PHP
<?php

  $data = $_POST["text"];
  header('Access-Control-Allow-Origin:http://localhost:3000');
  header('Content-type: application/json');
  echo json_encode( $data );

```
いつも通り作ったフォームを、new FormDataでフォームデータ化。
fetch('url')にオプションをつけて、methodとbodyを与えてあげる。



## おすすめツールの紹介
プログラミングが学べるツールを作成しました！ぜひみてみてください。

プログラミングが学べるプログラミング単語帳
https://protan.creatopia.jp/

プログラミング単語帳（Web版）
https://プログラミング.単語.jp
【Rails 勉強ネタ】　アソシエーションの親は削除しても、子はDBに残したい


著者と本のモデルがあります。

##authorを削除するときその著者の書籍もまとめてdelete↓
```author.rb
class Author < ApplicationRecord
  has_many :books, dependent: :destroy
end
```

```book.rb
class Book < ApplicationRecord
  belongs_to :author
end
```



##authorのみを削除し、書籍はデータベースに残しておきたい時↓

```author.rb
class Author < ApplicationRecord
  has_many :books, dependent: :nullify
end
```

```book.rb
class Book < ApplicationRecord
  belongs_to :author, optional: true
end
```

これでauthorが削除されても、そこにぶら下がっているbookはDBに残るはず。
大学時代に学びたい技術

# 大学時代に学びたい技術・使いたい技術・得意になりたい
・AWS
・競技プログラミング（アルゴリズムとデータ構造）
・Docker
・Anaconda Cloud
・Raspberry Pi
・Linux
・CTF
・ネットワーク（L1,L2,L3,L4）
・情報処理安全確保支援士
・FPGA
・Python(Jupyter notebook)

To DO
パラレルデスクトップ
macにwinインストール　bootcamp
linuxにmac win chromeos
avahi
tmux
sublime
javascript で サーバーサイド フロントエンド 
sphinx
VS code C,C++ gcc環境構築 MinGW
cmd,Powershell,chocolatey
firebase,WSL2
MVC,Webシステムデザインを参考に
パターソン&ヘネシー本を読んでいく（３）

パターソン&ヘネシー本を読んでいきます。

以下から購入できます。いい本ですよ！（ステマ）

https://www.amazon.co.jp/dp/B00UJ42A0K/

##データの安全な格納場所

*  揮発性メモリ→電源が切れると情報が失われる
*  不揮発性メモリ→電源が切れても情報が失われない
*  揮発性メモリ→主記憶または一時記憶
*  データ保持用のメモリ→二次記憶
*  二次記憶として、磁気ディスクやフラッシュメモリが使われる

##他のコンピュータとの通信
コンピュータをネットワークに接続すれば、以下の利点が得られる

*  通信、コンピュータ間で情報を高速に交換
*  資源の共有
*  リモートアクセス

ネットワークの伝送路長と性能は千差万別
*  ローカルエリアネットワーク
*  ワイド・エリア・ネットワーク

ネットワークの進歩により、コンピュータの利用形態が変わっていった。
ネットワーク技術が改善されるにつれ、コストは大幅に安くなり、情報伝達の容量も増大した
ワイヤレス通信なども普及した
背景には、メモリなどの半導体に使われるのと同じ低コストの半導体技術(CMOS)を用いて、無線通信を行えるようになった

##プロセッサおよびメモリを製造するための技術

*  トランジスタ　電気的なオン/オフ動作をするスイッチ
*  集積回路(Integrated Circuit)　　数十から数百のトランジスタを一チップにまとめたもの
*  大規模集積回路(very large integrated circuit)VLSI
*  チップの製造はシリコンから始まる

チップの製造工程については割愛

##性能の定義

*  飛行機の場合は、搭載可能人数、航続距離、巡航速度など、性能の測定基準はいろいろある。
*  コンピュータの場合は、応答時間、実行時間、バンド幅など、様々な性能測定基準がある
*  モバイルデバイスとサーバの性能を比較しようとすれば、異なるアプリケーションと異なる性能の尺度が必要となる

本書では、最初の数章において、主として応答時間に目を向ける
性能を最大化するには、タスクの応答時間つまり実行時間を最短化する必要がある

```math
性能_X＝\frac{1}{実行時間_X}
```

「XはYよりもn倍速い」時は、以下の関係が成り立つ

```math
\frac{性能_X}{性能_Y} = n
```

##性能の測定
*  コンピュータの性能を測る手段は時間である。
*  プログラムの実行時間は、プログラムあたりの秒数で測定する
*  最も単純な時間の定義は、応用時間または経過時間→全てのシステムの動作を含む

CPU時間ないし単にCPU時間という概念を導入する→経過時間とプロセッサが実際に処理に費やした時間とを区別したい
CPU時間→該当プログラムのためにCPUが費やした時間

ユーザーCPU時間→プログラム中で費やされたCPU時間
システムCPU時間→オペレーティングシステムがタスクを遂行するために費やしたCPU時間

本書では、経過時間に基づく性能とCPU実行時間に基づく性能を一貫して区別する

##プログラム性能の理解

プログラムの性能を改善するためには、まず問題となる性能の尺度を明確に定義し、それからプログラムを実行して測定することにより、性能上のボトルネックを探る

クロック周波数って、性能の測定基準として重要なようだ。クロック周波数とコンピュータのユーザが使う秒との関係を次で公式化している。

##最後に感想
個人的にBounty SourceのPOWER9プロセッサでの演算の最適化とかやろうかなと思っている。（できるかどうかわからんけど。多分結構むずい）多分だけど、演算の最適化の場合は、実行時間を最短化すればいいのかなとは思う。つまり、応答時間、全てのシステムを含んだ計算を開始してから答えが出るまでの時間を最短化すればいいのかなとは思う。
POWER9は組込み系ではなく、比較的でかいシステムで使われると思うので、メモリとかは潤沢に使っちゃっていい感じはするんだよね。最近のPythonはメモリを潤沢に使って高速化する感じになっていると聞いたことがある。前４テラのメモリ積んだコンピュータとか出てたけど、そこまで極端でなくても、まあ、結構な大容量を積めるので。
応答時間を最適化するということは、一部最適化を部分部分やって全体を最適化というのは、多分ダメだよねとは思う。いやわからないんですが（教えて欲しい）。
一応、P３２の最後に、「プログラムの性能を改善するためには、まず問題となる性能の尺度を明確に定義し、それからプログラムを実行して測定することにより、性能上のボトルネックを探る」と書いてあった。ボトルネックを改善するだけでいいのかなとは思ったりする。
昔、PART図ってのを習ったんだよね。オペレーションズリサーチの分野の一つで、ここではクリティカルパスを同定したり、パスを短縮するコストなどを勘案に入れた納期の短縮法などがあった。
まあ色々勉強する必要があるよね。

追記
どうでもいいけど、スタンディングデスクは作業や勉強が捗る。カロリー消費も増えるしオススメですよ。
md5で乱数に変換 ruby

##はじめに
スクレイピングで取得したurlのスクリーンショットを ```md5``` を使い保存しました。

##ソース

```scrape.rb
#md5
require 'digest'
#省略...

ua = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36"

    options = Selenium::WebDriver::Chrome::Options.new
    options.add_argument('--headless')
    options.add_argument('--no-sandbox')
    options.add_argument('--disable-gpu')
    options.add_argument('--disable-dev-shm-usage')

    session = ""
    session = Selenium::WebDriver.for :chrome, options: options
    session.manage.timeouts.implicit_wait = 60
    session.navigate.to link
    #スクレイピングで取得したurlを乱数にして保存
    image = "#{Digest::MD5.hexdigest(link)}.png"
    session.save_screenshot("public/images_e/screenshot/#{image}")
    session.quit
```

md5は使うのがとっても簡単で、

```
require 'digest'
```
としてあげるだけで、

```
Digest::MD5.hexdigest
```
を使い、乱数にしてあげることができます。

## ちなみに
link.pngのようにurlのまま保存しようとすると、https//のように//が含まれてしまいエラーになり、mb5を使って保存することにしました。
phpbrew で bzip2 や zlib が見つからないというエラー

## こんな現象に遭遇しましたか？

```bash
checking for BZip2 in default path... not found
configure: error: Please reinstall the BZip2 distribution
```

macOS 10.14 + phpbrew 1.23.1 を使って PHP をインストールしようとすると、zlib や bzip2 が見つからない、というエラーが出て先に進めなくなってしまいました。

## 手順

1. Homebrew でこれらのパッケージをインストールしましょう
   - `brew list`でインストールされているパッケージの一覧を表示できます
2. phpbrew を使って、以下の要領で PHP をインストールします（例は ver. 7.3.4）

```bash
phpbrew install php-7.3.4 \
    +bz2="$(brew --prefix bzip2)" \
    +zlib="$(brew --prefix zlib)"
```

*参考: [phpbrew ext install bz2 on OSX can't find BZip2](https://github.com/phpbrew/phpbrew/issues/966#issuecomment-453427216)*

variants はお好みで設定してください。上の例では説明に必要なものだけを表記しています。

## 解説

Homebrew でインストールした zlib や bzip2 を見つけられないので、パスを渡してあげればいいのですが、`$(brew --prefix zlib)`のようにすることで、パスを出力することができます。

なお、[出典のコード](https://github.com/phpbrew/phpbrew/issues/966#issuecomment-453427216)は、操作しているマシンのコア数も出力させて並列処理させたり、よく使われる variants が指定されているなど、なかなか良くできているので、このコードをコピペするのが手っ取り早い気がします。
IBM CloudにおけるIAMトークンの取得方法

# 1. はじめに

IBM CloudのサービスをAPIで呼び出す際には、IAMトークンが必要になります。よくAPI referenceやIBM Cloud docsに`Bearer $ACCESS_TOKEN`とか記載がある箇所です。頻繁に出てくる割には、効率よくIAMトークンを取得する方法がすぐには見つからなかったのでまとめました。

# 2. ユーザー or Service ID ？
IBM Cloudでは、IAMトークンは`ユーザー`もしくは`Service ID`のどちらかのものを利用することになります。

- `ユーザー`は、Customer Portalにログインする際に利用し、`IBMid`に紐づいています。気をつけなければいけないのは、もしこのユーザーが（チームから抜けたりして）このアカウントからいなくなった場合には、このIDは利用できなくなってしまうということです。もちろん、そういう事態を避けるために特定の人に紐づかない運用用途のユーザーを作成することで代替することも可能ですが、本来`ユーザ-`はCustomer Portalにログインして使うエンドユーザーを想定しているため、その度にIBMidを取得・管理したり適切な権限を与えて行くのは大変かもしれません。ただし、十分な権限を持っている`ユーザー`が、自身のIAMトークンを使って、開発・検証目的でAPIを実行するのには十分だと思います。
- `Service ID`は上記の問題を回避することができます。`Service ID`とは、サービスを呼び出すことに特化した一種のシステムユーザーのことです。Functional IDとか`Service ID`の作成にはIBMidは不要です。この`Service ID`に対して、様々なアクセスポリシーを設定することで、「あるサービスに対しては読み書きができるが、こちらのサービスに対しては読み取りしかできない」などの操作のみを許可したID管理が可能になります。

# 3. IAMトークン取得方法

## 3.1 ibmcloudコマンドを使う
この方法は、自分のユーザーのIAMトークンが取得できます。

```bash:
$ ibmcloud iam oauth-tokens
```

実際は、以下のようにしておくと楽だと思います。

```bash:改良版
$ iam_token=`ibmcloud iam oauth-tokens | awk '{printf $4}'`
$ echo ${iam_token}
```

## 3.2 APIで呼び出す(API Keyが必要）

こちらはより汎用的な方法のため、`ユーザー`に対しても`Service ID`に対しても利用可能です。

```bash:一般的な方法
$ APIKEY=xxxxxx
$ curl -sX POST \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "grant_type=urn:ibm:params:oauth:grant-type:apikey&apikey=${APIKEY}" \
  https://iam.cloud.ibm.com/identity/token
```

ただ、上記だとjsonファイルのままなので読みづらいです。jqコマンドでフォーマットしてあげると使い勝手が上がります。
(CentOS7では、epelを入れればyumで導入できます）


```bash:改良版
$ APIKEY=xxxxxx
$ iam_token=`curl -sX POST \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "grant_type=urn:ibm:params:oauth:grant-type:apikey&apikey=${APIKEY}" \
  https://iam.cloud.ibm.com/identity/token | jq -r '.access_token' `
$ echo ${iam_token}
```

```bash:private endpointアクセス版
$ APIKEY=xxxxxx
$ iam_token=`curl -sX POST \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "grant_type=urn:ibm:params:oauth:grant-type:apikey&apikey=${APIKEY}" \
  https://private.iam.cloud.ibm.com/identity/token | jq -r '.access_token' `
$ echo ${iam_token}
```



（参考）
https://cloud.ibm.com/docs/account?topic=account-iamtoken_from_apikey
https://cloud.ibm.com/docs/account?topic=account-iamapikeysforservices
https://cloud.ibm.com/docs/account?topic=account-serviceidapikeys


## 3.3 APIで呼び出す(API Keyを使わずにTrusted Profileを使用）

[IBM Cloud: Trusted Profileを使ったVSI for VPCからの安全なAPI/CLI呼び出し方法](https://qiita.com/testnin2/items/860a3b00a2029e0a2594#4-%E5%AE%9F%E8%A1%8C%E6%96%B9%E6%B3%95cli)を参照。
ImageMagickでホワイトノイズ画像を生成する

# ホワイトノイズ画像を生成する

```console
convert -size 128x128 xc:gray +noise random -colorspace gray noise.jpg
```
* `128x128` ここの数値を変更することで画像の大きさを指定できる
* `noise.jpg` 出力する画像ファイル名。拡張子を変更することで出力するファイルの形式を指定できる。

# 大量のホワイトノイズ画像を生成する

10000の画像ファイル(noise0000.jpg 〜 noise9999.jpg)を生成するのには下記のシェルスクリプトを実行する。

```bash
#!/bin/bash
for i in `seq -f %04g 0 9999` ; do
    convert -size 128x128 xc:gray +noise random -colorspace gray noise${i}.jpg
done
```
* `seq -f %04g 0 9999` 0000 〜 9999の4桁の数字を生成する。`-f %04g`の箇所で桁数を指定している。
SPSS Modelerで相関行列のヒートマップ

SPSS ModelerでR連携機能をつかって相関行列のヒートマップを作ってみます。

■テスト環境
Modeler 18.2.1
R 3.3.3

#1 事前準備
R連携を行うためにはEssentials for RとR3.3の導入が必要です。
IBM® SPSS® Modeler - Essentials for R: インストール手順
https://www.ibm.com/support/knowledgecenter/ja/SS3RA7_18.2.1/modeler_r_plugin_install_project_ddita/clementine/programmability_option/r_essentials_install_instructions_container.html

#2 拡張の出力ノードのシンタックス設定

拡張の出力ノードにRのシンタックスを入力します。

```R
#install.packages("corrplot")
library(corrplot)
mcor <-cor( modelerData)
mcorr <-round(mcor, digits=2)

# Generate a lighter palette
col <- colorRampPalette(c("#BB4444", "#EE9988", "#FFFFFF", "#77AADD", "#4477AA"))
corrplot(mcor, method="shade", shade.col=NA, tl.col="black", tl.srt=45,
         col=col(200), addCoef.col="black", addcolorlabel="no", order="AOE")
```
上の![undefined]()
Rのソースコードは以下を参照させてもらいました。
https://rpubs.com/yoshio/95789

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/fe9c4c1a-759a-0239-c686-c36b9513caab.png)



初回の実行時は”#install.packages("corrplot")”のコメントをはずしてパッケージを導入してください。

#3 結果 
以下のように相関行列をヒートマップで表示できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/f0a0f335-e269-f87e-72ce-02a046e99682.png)

サンプルのストリームは以下です。
https://github.com/hkwd/spsssmodelercorrplot
HTML/CSSを勉強中

##はじめに
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている＜@yuusuket57>です。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください！
プロゲートのHTML/CSSの初級編が終わり、中級編も半分を過ぎたところまできました。
##エラーの解決
初級編は習ったことを、そのまま書くものが多かったので、ミスも少なかったのですが、中級編になるとエラーがよく出るようになってきました。
特にHTMLのクラス指定で

```html
＜div class="クラス名"＞
```

としなければならないのが、

```html
＜div class=クラス名＞
```

としてしまい、「" "」を忘れることがよくあります。

また、CSSでは

```css
head {
```

と指定しなければならないのを

```css
.head{
```

としてしまうというミスもありました。headはクラス名ではないので「.」をつけてはいけないのですね。

##まとめ
新しい知識が増えてきてミスも増えてきています。エラーがどこなのかいろいろ考えてしまいますが、基本的なところのミスが多いです。複雑なコードになってきても、定期的に基本に戻って復習するのが大切だと感じました。
Chrome拡張のContent ScriptsからCross-Origin Read Blocking (CORB)を回避して外部のAPIと通信する

#まず結論
Chromeの仕様が変わってContent Scriptsからは通信できなくなった。
**バックグラウンドページ**で処理してからデータを渡してもらうことで回避しよう。

#もっと詳しく
Chromeの仕様変更で**Cross-Origin Read Blocking (CORB)**というものが適応された。これによって、外部のAPI（YouTube Data API v3）と通信する自作のChrome拡張が突然動かなくなった。
調査してみると、通常版のChromeでは何もエラーが出ないのに対して、Canary版では**「Cross-Origin Read Blocking (CORB) blocked cross-origin response [URL] with MIME type application/json. See [URL] for more details.」**というwarningが出るようになった。[指定された記事](https://www.chromium.org/Home/chromium-security/extension-content-script-fetches)に解決策が載っていたのでここで紹介する。

#具体的な方法
Content Scriptsではなくbackgroundで処理してデータを渡す形でなら外部のAPIとも通信することができる。上記の記事に載っているコードをそのまま転載しておく。

```content-script.js
chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

```

```background.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });

```

content-script.jsの```chrome.runtime.sendMessage()```の第一引数にフォアグラウンドからのデータを、第二引数に戻り値と続きの処理を記述する。ここでは省略形で書かれているが、古い書き方をすると

```content-script.js
function(price) {
  ...
}
```
という風になる。
この```price```は、background.jsの```sendResponse(price)```で返された値となっている。

#バッググラウンドページについて
バックグラウンドページのコンソールは```chrome://extensions```の「ビューを検証」の隣にあるリンクをクリックすると表示される。このページからはウェブサイトのDOMにアクセスできないので、先程の```sendResponse()```でフォアグラウンドにデータを渡してから続きの処理を書く必要がある。

また、APIにリファラーを設定している場合はこのバックグラウンドページのURLを許可する必要がある。このURLは```chrome-extension://拡張機能のID/*```とすればいいが、**ローカルの開発版とリリースされた製品版でIDが異なっている**ので注意。

#参考記事
[Chrome Platform Status](https://www.chromestatus.com/feature/5629709824032768)
Android 6以下ではDeprecatedなWebViewClient#shouldOverrideUrlLoadingのオーバーライドが必要

あたりまえの話かもしれないけどメモ。

# 前提
[Androidのwebviewで踏んだAタグのリンクへのフック処理](https://qiita.com/ppengotsu/items/312699c6f53d1f8b03bf)
の記事のように、WebView内で特定のURLをロードしようとした際に独自処理（今回はネイティブ側での画面遷移）を行う実装をしていた。

# 起きたこと
Android 6以前では、上述の独自処理が動作していなかった。

# ソースコード（改善前）
以下のような実装をしていた。

```BadActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        val webView = findViewById<WebView>(R.id.web_view)

        webView.webViewClient = object : WebViewClient() {

            override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
                if (request?.url.toString == "callback://doSomething") {
                    // 独自処理
                    val intent = Intent(this@BadActivity, AnotherActivity::class.java)
                    startActivity(intent)
                    return true
                }
                return false
            }
        }
        // ...
    }
```

# 原因

WebViewClientの

```
public boolean shouldOverrideUrlLoading(WebView view, String url)
```

は、API Level 24でDeprecatedとなっており、新しく

```
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
```

が追加されている。

今回は新しい方の `shouldOverrideUrlLoading` メソッドしかoverrideしておらず、API Level 24（= Android 7）未満ではこれが動いていなかった。

# ソースコード（改善後）
以下のような実装に修正し、Android 6以前でも独自処理が正常に動作した。

```kotlin
    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        val webView = findViewById<WebView>(R.id.web_view)

        webView.webViewClient = object : WebViewClient() {

            @TargetApi(Build.VERSION_CODES.N)
            override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
                return handleOverrideUrlLoading(view, request?.url)
            }

            @SuppressWarnings("deprecation")
            override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
                return handleOverrideUrlLoading(view, Uri.parse(url))
            }

            override fun handleOverrideUrlLoading(view: WebView?, uri: Uri?): Boolean {
                if (uri?.toString == "callback://doSomething") {
                    // 独自処理
                    val intent = Intent(this@BadActivity, AnotherActivity::class.java)
                    startActivity(intent)
                    return true
                }
                return false
            }
        }
        // ...
    }
```

# 参考URL
- [android - Is \`shouldOverrideUrlLoading\` really deprecated? What can I use instead? - Stack Overflow](https://stackoverflow.com/questions/36484074/is-shouldoverrideurlloading-really-deprecated-what-can-i-use-instead)
- [WebViewClient#shouldOverrideUrlLoading] (https://developer.android.com/reference/android/webkit/WebViewClient.html#shouldOverrideUrlLoading(android.webkit.WebView,%20android.webkit.WebResourceRequest))

# 反省点
- deprecatedだからといって、単純に新しい方のメソッドに置き換えてしまったのがまずかった
    - 公式ドキュメントの、 `Added in API level 24` の記述をちゃんと見る
- そもそも、アプリの対象バージョンとしていたAndroid 6で動作確認を全くしていなかった
    - 納期や端末の調達の問題はあったが、最低限動作確認をする必要がある（当たり前）
投票率と高齢化率の関係をsfパッケージで可視化する

2019年北海道議会議員選挙の北海道厚沢部町での各投票区の結果を用います。下のようなシンプルなデータです。人口データは2015年国勢調査です。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/60438/b9aa4da0-0421-c42f-5b6a-5259a68fb491.png)

### パッケージ読み込み

```r
library(tidyverse)
library(sf)
library(ggthemes)
```

### データのインポート

読み込むデータは投票区のポリゴンデータ（shp）と人口と投票率の入ったcsvファイルです。

```r
##地図データ読み込み_厚沢部町字名
assabu<-st_read(dsn="shp",layer="assabu_area")
## 投票データ読み込み
touhyou<-read.csv("senkyo/senkyo2019.csv")
## データの結合
data_t<-inner_join(data ,touhyou ,by="投票区")
```

### 投票区ごとの投票率

```r
p<-data_t%>%ggplot()+
	geom_sf(aes(fill=cut_number(投票率,n=4)),colour="white")+
	guides(size=FALSE)+
	theme_map()+
	scale_fill_brewer(palette="OrRd",direction=0)
```

下の投票率の地図は厚沢部の人でもちょっとどこがどこだかわかりにくいと思います。
投票率が高い（赤）のは当路、富栄、上里です。

![05.png](https://qiita-image-store.s3.amazonaws.com/0/60438/cd9a05fd-2830-efee-d682-08fe3bc24915.png)

### 投票区ごとの高齢化率

投票率が高齢化によって低下するのではないか、という話題が投票所ででていましたので、高齢化率（75歳以上人口率）のコロプレス図を作成しました。

![04.png](https://qiita-image-store.s3.amazonaws.com/0/60438/27af5697-551e-2e36-9aa6-275459b446a1.png)

投票率の図と見比べると、たしかに高齢化が進んでいる地区で投票率が下がっているようにも思えますが、どうでしょうか。

### 高齢化率と投票率の関係
![08.png](https://qiita-image-store.s3.amazonaws.com/0/60438/32a49c8f-b83a-4042-e3ba-08c58c70ac5f.png)

高齢化率と投票率で負の相関があるようには見受けられません。それぞれの集落を経時的に追いかけると高齢化が進むにつれて投票率が落ちていくのかもしれませんが、高齢化率よりも集落が個別に抱える事情に投票率を決める根本的な要因がありそうです。

### 相関性の検定

```r
##相関係数を算出
cor.test(data_t$投票率,data_t$X75歳以上率)
#結果
data:  data_t$投票率 and data_t$X75歳以上率
t = 0.0041019, df = 11, p-value = 0.9968
alternative hypothesis: true correlation is not equal to 0
95 percent confidence interval:
 -0.5501234  0.5518460
sample estimates:
        cor 
0.001236764 
```

相関係数は0.0012で、相関性の検定によるp値は0.996となり高齢化率と投票率の間に相関があるとは言えないようです。

### 投票率にかかわる要因

私見として次の点を指摘します。

- 大家族、あるいは血縁関係者が近所に住んでいることが投票率を押し上げる。
- 農家世帯の多い地域で投票率が高い。
- 都市的な集落では集会施設が集落中心に位置することで投票率が上がる。
PlantUML の note 内で#や*をエスケープする方法

PlantUMLのnote/endnote内では[Creole記法](http://plantuml.com/ja/creole)が使用できるが、それによって行頭の`#`や`*`がリストと解釈されて、そのまま表示ができない。
私はBTSのチケットを書こうとして少し困った。

```
@startuml
Bob -> Alice : hello
note left
  # orderd list
  ## sub list
  * unorderd list
  ** sub list
  This is **bold**
  This is //italics//
  This is ""monospaced""
  This is --stroked--
  This is __underlined__
  This is ~~waved~~
endnote
@enduml
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/124276/1b08cb53-5938-2464-9448-9897d76eaaa2.png)

# エスケープする方法

[公式サイト](http://plantuml.com/ja/creole)に書かれている通り、前にチルダ(`~`)を置く。

```
@startuml
Bob -> Alice : hello
note left
  ~# orderd list
  ~## sub list
  ~* unorderd list
  ~** sub list
  This is ~**bold**
  This is ~//italics//
  This is ~""monospaced""
  This is ~--stroked--
  This is ~__underlined__
  This is ~~~waved~~
endnote
@enduml
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/124276/c62c1f78-1884-9766-5b0f-ec67c89d2e69.png)

波型の下線で修飾できることを初めて知ったが、チルダの役割が競合しているからかエスケープできないようだ。
大学での演習に備える To DO

## Windows 開発環境で入れときたい
・Mobaxterm
・Windows Subsystem Linux(Ubuntu18.04,debian,OpensSUSE)+Xming
・Anaconda
・Atom
・VSCode
・VMWare Player(MacOS,ChromeOSインストール)
・Virtual Box
・VNC Player(Raspberry Pi用)
・Ecther(Micro SD書き込み)
・Quatus Prime(Verilog)
・Vivado
・Win SCP
・XAMMP(ローカルMoodle,Mahara,WordPress)　※クラウドでもいいんだけど
・Cygwin(使ってみたい)

## Mac 開発環境で入れときたい
・VSCode
・Anaconda
・FileZilla
なんかMacのTerminal ダサい・改造する

## Linux 開発環境で入れときたい
・vim
・emacs

LaTeXは，Cloudで十分か？
『Excelで複数ファイルの特定のセルの値を一つの表にまとめる方法【AppleScript】』私はこう書いた

Twitterのタイムラインで見かけた[ExcelのAppleScript][twcard]。（[Excelで複数ファイルの特定のセルの値を一つの表にまとめる方法【AppleScript】][url1]）
自分ならどう書くかなぁ、と思ってちょっと挑戦。  
実際の仕様はわかりませんが、できるだけ同じになるようにしたつもりです。  

## 使い方
ソースコードをスクリプトエディタにペースト後、アプリケーション方式で保存します。   
値を収集したいファイルをアイコンにドラッグ&ドロップすれば同じフォルダに収集したファイルが保存されます。

デフォルトではB2セルの値を収集するようにしてあるので、アイコンをダブルクリックでご自身の収集したいセルを指定してください。変更した値は保持されます。


## 解説  
#### Droplet化
`on run`ハンドラで取得するセルを指定しています。`property`宣言しているので入力した値は保持され次回以降同じセルが対象なら再指定は不要です。    
また、オリジナルではExcelのフォルダや新規ファイルの指定、そして取得するセルの指定を必ずダイアログが出て指定していたので手数がへらせました。  

#### まとめて処理  
1ファイルごとに新規ファイルに処理を行っていたので、全部のファイルの値を取得してからに変更しました。よほどファイル数が増えない限りはオーバーフローは起こらないでしょう（多分……

#### sum関数で計算  
これはオリジナルにはなかったのですがせっかく収集したデータなのでsumまでやって置いた方が利便性が上がるかなと考えてつけました。

#### ファイル保存  
最後に処理したファイルと同じフォルダ内に```{年月日}_収集.xlsx```という名前で保存します。


``` AppleScript
(*
	複数ファイルの指定セルの値を収集して新規ファイルを作成  

*)


--
property getValCell : "B1"

on run
	set tmpCell to text returned of (display dialog "取得するセルを指定してください" default answer getValCell)
	if tmpCell is not "" then set getValCell to tmpCell
end run

on open fileList
	
	set valList to {}
	
	repeat with aFile in fileList
		
		set rowVal to {}
		
		set aFileInfo to info for aFile
		set aNameFull to name of aFileInfo
		set aExt to name extension of aFileInfo
		
		if aExt is "xlsx" or aExt is "xls" then
			tell application "Microsoft Excel"
				activate
				open workbook workbook file name aFile as string
				
				set aName to my regName(aNameFull, aExt)
				set rowVal to {aName} & {value of cell getValCell}
				
				close active workbook saving no
				
			end tell
		end if
		
		set valList to valList & {rowVal}
		
		set rowCount to count of valList
		
	end repeat
	
	my newFile(rowCount, valList)
	my setSum(rowCount)
	
	my saveFile(aFile, "収集")

	beep 2
	display dialog "作業終了" buttons {"OK"} default button "OK"
	
end open



--登録ファイル名取得
on regName(aNameFull, aExt)
	set serch to "^\\d+_(.+)\\." & aExt
	set replace to "$1"
	
	set cmd to "ruby -Ku -e " & quoted form of ("print %Q{" & aNameFull & "}.gsub(/" & serch & "/){$1}")
	return do shell script cmd
end regName

--新規ファイル作成
on newFile(rowCount, valList)
	tell application "Microsoft Excel"
		
		make new workbook
		
		set c1 to "A1"
		set c2 to ("B" & rowCount) as string
		set pasteArea to c1 & ":" & c2 as string
		set value of range pasteArea to valList
		
	end tell
end newFile

--計算フィールド設定
on setSum(rowCount)
	tell application "Microsoft Excel"
		set cell_sum to "B" & rowCount + 1
		set sum to "=SUM(B1:B" & rowCount & ")"
		
		set value of range cell_sum to sum
		
	end tell
end setSum



--ファイル保存
on saveFile(aFile, tmpName)
	tell application "Finder"
		set tmpFolder to (parent of aFile) as string
	end tell
	set saveName to do shell script "date +%y%m%d" & "_" & tmpName & ".xlsx"
	set savePath to tmpFolder & saveName
	
	tell application "Microsoft Excel"
		
		save as active sheet filename savePath file format workbook normal file format
		close active workbook saving no
		
	end tell
end saveFile
```
  

Excelのスクリプトはあまり書かないので課題があると楽しい（笑


[url1]:https://higuchi.world/archives/1108
[twcard]:https://twitter.com/HiguchiKi/status/1114908452122267653
jOOQが巨大なリザルトセットをフェッチするとOOMエラーが出る場合にデフォルトフェッチサイズを設定する方法

jOOQが巨大なリザルトセットをストリーム的にフェッチするようにしたにもかかわらず、`OutOfMemoryError`とかになっちゃう場合は、おそらくフェッチサイズが無限の状態(PostgreSQLドライバの場合)になっているので、以下のXMLファイルをクラスパスのルート直下において、 jOOQのフェッチサイズのデフォルト設定値として使われるようにしましょう。

（詳しい処理は`org.jooq.conf.SettingsTools`参照）

```xml:src/main/resources/jooq-settings.xml
<?xml version="1.0" ?>

<settings
        xmlns="http://www.jooq.org/xsd/jooq-runtime-3.11.2.xsd"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

    <!-- 適当なサイズを指定してください。 -->
    <fetchSize>1000</fetchSize>

</settings>
```

なお、上記設定にあわせて、上記のXMLをJavaBeansにアンマーシャルするために、下記の依存性が別途必要になります。追加しましょう。

```gradle:build.gradle
    // 場合によりバージョン指定など異なると思うので適当な値を探してください。

    runtime('javax.activation:activation:1.1.1')
    runtime("com.sun.xml.bind:jaxb-impl:...")
    runtime("com.sun.xml.bind:jaxb-core:...")
```


## SpringBootでも同じ

SpringBootで `spring-boot-starter-jooq` を使っていたとしても、上記と同じ設定を `application.properties` などで実施する方法はなさそうなので、あきらめてXMLファイルを置くなりしましょう。

## ほかの方法(PostgreSQLの場合)

同僚の人に教えてもらいました。

[PostgreSQLのJDBC URL](https://jdbc.postgresql.org/documentation/head/connect.html)に下記文字列をつければ良いようです。

```
&defaultRowFetchSize=1000
```
Python requests で AWS Cognito の認証をする

# やりたいこと

Python の Requests (= 外からの HTTPS リクエスト) で、AWS Cognito の認証をしたい。

# やりかた

## 前提

* AWS Cognito のユーザープール でアプリクライアントを作成している。
* このとき、`USER_PASSWORD_AUTH` のみをチェックしている
* region は `ap-northeast-1`

## 経緯

https://github.com/aws-amplify/amplify-js を読んで、ログインに対応する部分を見つけ出す。

以下のあたりが使えそう。

```js:packages/src/CognitoUser.jsより抜粋
  initiateAuth(authDetails, callback) {
    const authParameters = authDetails.getAuthParameters();
    authParameters.USERNAME = this.username;

    const jsonReq = {
      AuthFlow: 'CUSTOM_AUTH',
      ClientId: this.pool.getClientId(),
      AuthParameters: authParameters,
      ClientMetadata: authDetails.getValidationData(),
    };
    if (this.getUserContextData()) {
      jsonReq.UserContextData = this.getUserContextData();
    }

    this.client.request('InitiateAuth', jsonReq, (err, data) => {
      if (err) {
        return callback.onFailure(err);
      }
      const challengeName = data.ChallengeName;
      const challengeParameters = data.ChallengeParameters;

      if (challengeName === 'CUSTOM_CHALLENGE') {
        this.Session = data.Session;
        return callback.customChallenge(challengeParameters);
      }
      this.signInUserSession = this.getCognitoUserSession(data.AuthenticationResult);
      this.cacheTokens();
      return callback.onSuccess(this.signInUserSession);
    });
  }
```

```js:packages/src/Client.jsより抜粋
 /**
   * Makes an unauthenticated request on AWS Cognito Identity Provider API
   * using fetch
   * @param {string} operation API operation
   * @param {object} params Input parameters
   * @param {function} callback Callback called when a response is returned
   * @returns {void}
  */
  request(operation, params, callback) {
    const headers = {
      'Content-Type': 'application/x-amz-json-1.1',
      'X-Amz-Target': `AWSCognitoIdentityProviderService.${operation}`,
      'X-Amz-User-Agent': this.userAgent,
    };

    const options = {
      headers,
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      body: JSON.stringify(params),
    };

    let response;
    let responseJsonData;

    fetch(this.endpoint, options)
```

## 結果

以下のスクリプトで、 JWT Token を get できた。

```python
import requests

# 初期設定
client_id = "クライアントID"
username = "ユーザネーム"
password = "パスワード"
region = "ap-northeast-1"

# リクエスト
endpoint = "https://cognito-idp.%s.amazonaws.com" % region
headers = {
    'Content-Type': "application/x-amz-json-1.1",
    'X-Amz-Target': "AWSCognitoIdentityProviderService.InitiateAuth",
    'X-Amz-User-Agent': "python-requests"
}
res = requests.post(
    endpoint,
    headers=headers,
    data=json.dumps({
        "AuthFlow": "USER_PASSWORD_AUTH",
        "ClientId": client_id,
        "AuthParameters": {
            "USERNAME": username,
            "PASSWORD": password
        },
    })
)
print(res.json())
```

# 参考文献

https://github.com/aws-amplify/amplify-js
【SAPUI5】チュートリアルを見ながらTest Driven Developmentを体験する (1) 概要

##この記事の目的
テストの自動化について、SDKの[チュートリアル](https://sapui5.hana.ondemand.com/#/topic/291c9121e6044ab381e0b51716f97f52)の説明がわかりやすかったので、チュートリアルを実装しながら、テスト自動化の考え方と方法を紹介します。

##今後の予定
QUnitについては[前回](https://qiita.com/tami/items/6b3221203823a117e123)紹介したので、このシリーズではOPA5に焦点を当てていきたいと思います。チュートリアルは16ステップありますが、以下5つの記事に集約します。
1. 概要
2. [Price Formatterのテスト(QUnit)](https://qiita.com/tami/items/5c5c065381f06aa35b48)
3. [テーブルの表示のテスト(OPA5)](https://qiita.com/tami/items/9db97e9253fbf713566f)
4. [ナビゲーションのテスト(OPA5)](https://qiita.com/tami/items/c9d5e2d8cc34c07b5a74)
5. [検索機能のテスト(OPA5)](https://qiita.com/tami/items/c5eb18edbb0b5118269d)

##テストの方針
参考：[Step 1: Overview and Testing Strategy](https://sapui5.hana.ondemand.com/#/topic/ab134ef3932c4b42898c79c10341e8b5)

- アプリケーションを開発するときは、開発サイクルの最初からテストのことを検討しておくこと。なぜなら・・・
    - ロジックが整理されてわかりやすくなるから
    - テストのコードを見れば仕様がわかるから    
- できるだけ多くのテストステップを自動化すること。なぜなら・・・
    - マニュアルでテストする手間を減らせるから
    - アプリケーションのどこかを変更したときに、自動テストを再実行するだけで品質が担保されていることが確認できるから

##SAPUI5に備わっている2種類のテスト
以下はアジャイル開発におけるテストのピラミッドです（上記リンク先より引用）。SAPUI5には下の2層に対応する自動化ツールとしてQUnitとOPA5が備わっています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/fbd9cfd4-c033-e1c7-47c6-e9cee899fa66.png)

- QUnit：ロジックに対するテスト（単体テスト）
- OPA5：ユーザの操作に関するテスト

##チュートリアルの進め方
チュートリアルはTest Driven Development (TDD)で進みます。
Test Driven Developmentとは、先にテストを書き、続いてテストに通るようにコードを書くという開発の進め方です。この方法のすごいところは、コードを実装し終わったときにはテストが終わっているということです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/063961cc-7287-b2e6-6d62-9b9f8eddcc2d.png)

##事前準備
ベースになるアプリを以下からダウンロードし、WebIDEに登録します。
https://sapui5.hana.ondemand.com/#/sample/sap.m.tutorial.testing.01/preview

ソースコードの表示に切り替える
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/96540ad9-925a-d5da-9169-af3efbc396b4.png)
ボタンを押してダウンロード
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/aa70bdd7-61db-07d0-141f-493c140e76fe.png)
WebIDEでダウンロードしたプロジェクトをインポート
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/36815687-4803-26da-f51d-27757aa25e14.png)

test.htmlファイルを実行します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/56869299-caac-be55-aa54-8356a665a05c.png)
ここが各テスト実行用のエントリーページになっています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/536af0b0-af8a-e998-20e6-8797593d9762.png)
mockServer.htmlを実行すると以下のようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/64262548-df52-3bc7-1afa-dcf27a008dac.png)

##関連記事
[チュートリアルを見ながらTest Driven Developmentを体験する (2) QUnit](https://qiita.com/tami/items/5c5c065381f06aa35b48)
プログラミング学習記録53〜自分の声を聞く〜

##今日やったこと
今日はプログラミングと少し違うかも知れませんが、情報処理技術者の試験などで問われる論理式や演算について学びました。
大学の講義です。

初めて見る式も数多くありましたが、特に難しい数学の知識はいらなさそうです。
ドモルガンの法則と命題の範囲をある程度理解していれば大丈夫な内容でした。

コンピュータの複雑な処理を分解してみてみることで、複雑に見える処理が実は簡単な処理の組み合わせでできていることがちょっとわかりました。

そこまでハードウェアに興味はなかったのですが、ハードウェアについて学んでみるのもいいなと思いました。

Web系のプログラミングは主にソフトウェアを作るものなので、ハードウェアには一見関係ないような気もします。

ですが、IoTの分野にも興味があるのでハードウェア関係を学んでおくのは悪くないどころかむしろプラスですね。

最近はプログラミングの勉強しかしていなかったので、ハードウェアに全然意識が行っていませんでしたが、ハードウェアとソフトウェアの両輪があって初めて人の役に立つのを考えると両方学ぶ必要がありますね。

一旦、Web系のプログラミングからは離れますが、一気に講義を終わらせてまたプログラミング言語、Web技術の勉強に集中したいと思います。

<br>
おわり
Markdownをgithub-markdown.cssを充てつつwkhtmltopdfでpdfに変換

[MarkdownをWordのテンプレートを充てつつdockerのpandocでWordに変換](https://qiita.com/mitsuaki1229/items/2d5818af1e08d7d886b4)してみたが、レイアウトの編集で小回りが効かなく、特にテーブルのレイアウトが扱いにくく辛い。。

docker imageのjagregory/pandocだと、lualatexが使えなかったため、環境を作ろうとしたが、
wkhtmltopdfを利用すれば、lualatexを使わなくてもPDFを出力出来る＆CSSが適用出来るようなので試してみる。

## 確認環境

* Mac OS Mojave 10.14.3

## 前提

* [pandoc](https://pandoc.org/)がインストールされていること。

## 手順

wkhtmltopdfをインストール。

```
$ brew cask install wkhtmltopdf
```

サンプル用のMarkdownファイルを取得。

```
$ curl https://raw.githubusercontent.com/mitsuaki1229/Sample/master/Documents/ForPandockConversionFile/ForPandockConversionFile.md -o ForPandockConversionFile.md
```

github-markdown.cssを取得して編集する。

```
$ curl https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css -o github-markdown.css
$ sed -i -e s/.markdown-// github-markdown.css
```

github-markdown.cssを充てつつMarkdownファイルからWordファイルを生成。

```
$ pandoc ForPandockConversionFile.md -f markdown -t html5 -c github-markdown.css -o ForPandockConversionFile.pdf
```

## 結果

```shell
$ open ForPandockConversionFile.pdf
```

![Screen Shot 2019-04-10 at 20.57.53.png](https://qiita-image-store.s3.amazonaws.com/0/25578/bc8cb156-ab21-019e-ced1-b1f90740fc75.png)


Wordのレイアウトに四苦八苦してたが、
フォーマットがdocx必須じゃなければ
CSS編集すればレイアウト弄れるこちらの方が良さそう。

## 参考

* [githubのmarkdown-cssをぶっこ抜く方法](https://qiita.com/__mick/items/c80fab6c185a41882880)
フォルダーオプションをコマンドラインで変更する

# フォルダーオプションをコマンドラインで変更する

新しく作った VM で毎度フォルダーオプションを GUI で設定すると面倒くさいので、一発で変更する PowerShell スクリプト.

```powershell
# フォルダオプションの"登録されている拡張子は表示しない"のチェックを外す
Set-ItemProperty HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced -name "HideFileExt" -Value 0
# フォルダオプションの"自動的に現在のフォルダーまで展開する"のチェックを入れる
Set-ItemProperty HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced -name "NavPaneExpandToCurrentFolder" -Value 1
```

ちなみにレジストリのどこをイジればいいか調べたい場合には、GUI での設定変更前と変更後のレジストリをダンプしておいて、diff を取ればいい.

```
reg.exe export HKCU hkcu.reg
```

ただし、export したファイルは UTF-16 なので、diff する前に UTF-8 あたりに変更しないと、ツールによっては上手く diff が取れないかもしれない.
ダサくないデザインとは

#あまりにもダサすぎる、0.5点。
まぁ、確かに、あまりにもこのシステムはダサすぎる…
でも何が原因でダサくて
何を直したらダサくなくなるのか
全然わからん…

じゃぁ色々調べてみよう！

##揃えよ
漠然としてるが、これがセンス関係なしにダサくなくなる第一歩。
例えば
・marginを整えて、要素の幅を揃える
・inputの長さはformの中で揃える
とか。

とにかくパッと見でギザギザ感が出てるとダサく見えて
シュッとスマート感が出てるとクールに見える。

##色のテーマを決めよ
ヘッダーの背景色は#FFCCCCで
コンテンツの背景色は#CCFFCCで
フッターの背景色は#CCCCFFにしよう！
となるとカラフルな感じには見えるかもしれないが
原宿系というか、そんな奇抜さが見えてしまってダサく見える。
(別に原宿系をディスっている訳ではない、KPPは好きだ。)

簡単な方法は
RGBの中から１つを選んで、一色の強弱でデザインしていくのが良い。
ヘッダーの背景色は#FF8888で
コンテンツの背景色は#FFEEEEで
フッターの背景色は#CC0000にする
と統一感が出てクールに見える。

##フラットデザインにせよ
例えば
・ボタンだとわかりやすくするためにborderをoutsetにしたり
するのは昭和のデザインである。
平成も終わるというのに、なんというデザインだ…

現代はスマートフォンが定着し、フラットデザインのデメリットが少ない。
なので
・ボタンはborder-radiusで丸みをつけるだけ
で良い。

#編集後記
入社8日目
上司からデザインがゴミすぎる…と指摘を受けたので
デザイナーさんに指導してもらったことをまとめてみました
そんで修正したサイトを見てもらったら5点にレベルアップできました。
デザインって中々意識しなれてないから難しいなぁ…
BigQueryで月末の着地見込みを出す（線形データ）

## 利用場面

月末の着地見込みを月の途中で表示させたいことがあります。
例えば 4/9 で実績が 12件だった場合、簡易的に着地見込みを出すとき経過日数で割ってその月の日数で割り戻す場面がよくあると思います。

```
-- 4/9 で実績が 12件だった場合
12 / 9 * 30 = 40着地
```

redashなどでデータの可視化をしているとその計算がめんどくさく、クエリで記述してしまおうと思ったので作ってみました。
どう整形しても見やすくならないのでワンライナーで ↓↓


```
対象の数値 / EXTRACT(DAY FROM CURRENT_DATE()) * EXTRACT(DAY FROM DATE_ADD(DATE_ADD(DATE_TRUNC(CURRENT_DATE(), MONTH), INTERVAL 1 MONTH), INTERVAL -1 DAY)) 
```

月末の記載が結果、地道な感じになっています
1. 今日の日付
2. DATE_TRUNC() で月初にする
3. DATE_ADD() 1ヶ月後にする
4. DATE_SUB() 1日引く

何度か使いそうなので備忘録的に
補完の効くwebpack.config.js

## webpack.config.jsでも型補完がほしい！

webpack.config.jsを書いてるとき、補完がほしくなりませんか？
(いや無くても書こうと思えば書けるし、コピーするからっていうツッコミもあるかもしれないけど、書くときに心理的な安心がほしい)

## こうする

まずは型定義を持ってきます。

```shell
yarn add --dev @types/webpack @types/webpack-dev-server
```

webpackのconfigファイルに下記のコメントを書く。

```webpack.config.js
/**
 * @type {import('webpack').Configuration}
 */
module.exports = {
  mode: 'development'
}
```

これで補完が効くようになります

## ts-check

`// @ts-check` とファイルの先頭に記述することでTypeScriptによる型チェックをさせることでエラーを表示することもできます。(エディタが対応してる場合?)

ただしwebpackのpluginなどの型定義もinstallしておく必要があります。(`html-webpack-plugin` など)

あと`copy-webpack-plugin`とかが、

> 呼び出しシグネチャまたはコンストラクト シグネチャがない型が含まれる式では 'new' は使用できません。

という文句を言ってくるのですが、うまく対応できなかったので自分は現状`ts-check`はしていません...。
いいやり方をご存知の方がおられたらぜひご教示下さい！

## 参考文献

- [Build 100% type-safe React apps in vanilla JavaScript](https://medium.com/@martin_hotell/build-100-type-safe-react-apps-in-vanilla-javascript-bd29a8364078)
delayed_jobのActiveRecordのログを消す

# Problem

delayed_jobを起動すると、以下のようなActiveRecordのログが定期的に出力されてしまい、他のログが見辛くなってしまう。

```
D, [2019-04-10T03:51:01.140319 #25947] DEBUG -- :   Delayed::Backend::ActiveRecord::Job Update All (0.4ms)  UPDATE `delayed_jobs` SET `delayed_jobs`.`locked_at` =..
D, [2019-04-10T03:51:06.142241 #25947] DEBUG -- :   Delayed::Backend::ActiveRecord::Job Update All (0.5ms)  UPDATE `delayed_jobs` SET `delayed_jobs`.`locked_at` =..
D, [2019-04-10T03:51:11.144010 #25947] DEBUG -- :   Delayed::Backend::ActiveRecord::Job Update All (0.4ms)  UPDATE `delayed_jobs` SET `delayed_jobs`.`locked_at` =..
```

# Solution

`config/initializers/delayed_job_config.rb` に以下の設定をすると、DelayedJobのActiveRecordのログが出力されなくなります。

```config/initializers/delayed_job_config.rb
unless Rails.env.development?
  module Delayed
    module Backend
      module ActiveRecord
        class Job
          class << self
            alias_method :reserve_original, :reserve
            def reserve(worker, max_run_time = Worker.max_run_time)
              previous_level = ::ActiveRecord::Base.logger.level
              ::ActiveRecord::Base.logger.level = Logger::WARN if previous_level < Logger::WARN
              value = reserve_original(worker, max_run_time)
              ::ActiveRecord::Base.logger.level = previous_level
              value
            end
          end
        end
      end
    end
  end
end
```

参考: https://github.com/collectiveidea/delayed_job/issues/886#issuecomment-409758672
djangoのsetting.pyに書く、「BASE_DIR」とは

#プロジェクトディレクトリのことでした
##動作環境
macOS Sierra10.12.6
python3.6.5
Django==2.1.3

##setting.pyに追記してみる
下記を追記して`manage.py runserver`する。

```projectname/projectname/setting.py
print(BASE_DIR)	#出力される
```

プロジェクトディレクトリまでのパスといった方が合ってるかもしれません。
systemdを用いたdigdag serverのデーモン化についてのメモ

digdag serverのデーモン化について、いろんなバージョン違いの影響からか、
ネット上の記事間で記述が異なっていたりして地味に困ったので、備忘録として投稿します。
なお、今回の環境は下記の通りです。
- OS：Amazon Linux 2
- Java：1.8
- digdag：0.9.35

※ digdagは、Treasure Data社が作ったOSSワークフローエンジンです
　　https://www.digdag.io/

## 起動スクリプトの作成
systemdを使ってデーモン化します。
`/etc/systemd/system/`に`digdag.service`を配置します。
一通り調べて、下記のように設定すればよかろう、と思ったのがこちらです（後述のように、これでもダメだったのですが・・・）。

```digdag.service
[Unit]
Description=digdag

[Service]
Type=simple
User=digdag
Restart=always
RestartSec=5
TimeoutStartSec=30s
WorkingDirectory=/opt/digdag/
KillMode=process

ExecStart=/usr/local/bin/digdag server --config /opt/digdag/server.properties --log /opt/digdag/logs/digdag_server.log -b x.x.x.x -O /opt/digdag/logs/tasklogs -A /opt/digdag/logs/accesslogs

[Install]
WantedBy=multi-user.target
```
パスは絶対パスで記述します。
ユーザdigdagで実行されるような設定です。
これで下記コマンドを叩いてデーモン化完了です。

```
systemctl enable digdag
systemctl start digdag
```

## エラー発生
それでも起動しませんでした。
システムログを見るとこのようなメッセージが。

```
systemd: Starting digdag...
systemd: Failed at step EXEC spawning /usr/local/bin/digdag: Exec format error
systemd: digdag.service: main process exited, code=exited, status=203/EXEC
systemd: Unit digdag.service entered failed state.
systemd: digdag.service failed.
```

status=203で調べてみると、権限付与のミスが原因という情報がいくつか出て来ましたが、そこはクリアしています。
もう少し調べてみると、stackoverflow等で、Shebang（ソースの冒頭に書く"#!/bin/bash"とかのこと）がないとダメだよ！という記事がちらほら出てきます。

## 解決策1
そこで、`ExecStart=`に記述したコマンドを内包するシェルスクリプトを作成し、それを実行させることに。

```digdag_start.sh
#!/bin/bash

/usr/local/bin/digdag server --config /opt/digdag/server.properties --log /opt/digdag/logs/digdag_server.log -b x.x.x.x -O /opt/digdag/logs/tasklogs -A /opt/digdag/logs/accesslogs
```

```digdag.service
[Unit]
Description=digdag

[Service]
Type=simple
User=digdag
Restart=always
RestartSec=5
TimeoutStartSec=30s
WorkingDirectory=/opt/digdag/
KillMode=process

ExecStart=/opt/digdag/digdag_start.sh

[Install]
WantedBy=multi-user.target
```
これで`systemctl start digdag`を叩くと、無事起動しました。
## 解決策2
ただこの解決策1は、下記のように起動スクリプトを記述するのと同義です。
実際、これで起動させても正常に動きました。

```digdag.service
[Unit]
Description=digdag

[Service]
Type=simple
User=digdag
Restart=always
RestartSec=5
TimeoutStartSec=30s
WorkingDirectory=/opt/digdag/
KillMode=process

ExecStart=/bin/bash /usr/local/bin/digdag server --config /opt/digdag/server.properties --log /opt/digdag/logs/digdag_server.log -b x.x.x.x -O /opt/digdag/logs/tasklogs -A /opt/digdag/logs/accesslogs

[Install]
WantedBy=multi-user.target
```
要は、インタプリタを明示しないといけなかった、ということのようです。
起動コマンドを.service内に記述するのと、別のシェルスクリプトを作成するのとで、起動コマンドのハンドリングのしやすさが異なるので、
状況によってどちらにするか判断することになるかなと思います。
（今回の場合、起動コマンドの書き換えは基本的に発生しないため、解決策2を採用しました）

digdagに限らず、systemdを用いたデーモン化で困っている方の一助になれば幸いです。
hostsを管理者権限で開いてみる

#hostsファイルを管理者権限で開くソースを、.Net標準のコンパイラで実行形式にしてみる
コンパイラ（C#やvb）が標準で入っている事を教えてもらったのでメモのため。


##前提
ソースはC#で記述している

##コンパイラの説明を出すコマンドは以下
D:\D-MyData\data> c:\Windows\Microsoft.NET\Framework64\v4.0.30319\csc

補足：vbのコンパイラ
D:\D-MyData\data> c:\Windows\Microsoft.NET\Framework64\v4.0.30319\vbc

##ソース

```css:hostsEdit.cs
using System;
using System.Diagnostics;

namespace test
{
	partial class StartWrapProgram
	{
		public static void Main ( string [ ] args )
		{
			string [ ] LoadModuleAtt = { @"notepad.exe", @"RunAs" };
			var mmm = new StartWrapProgram ( );
			mmm.VarbFunc ( LoadModuleAtt );
		}
	}
	partial class StartWrapProgram
	{
		private void VarbFunc ( string [ ] loadModuleAt )
		{
			var proc = new Process ( );
			proc.StartInfo.FileName=  loadModuleAt [ 0 ];
			proc.StartInfo.Verb = loadModuleAt [ 1 ];			// 管理者として実行
			var tgt = @"\Windows\System32\drivers\etc\hosts";
			proc.StartInfo.Arguments = tgt;
			try {
				proc.Start ( );
				proc.WaitForExit ( );
				proc.Close ( );
			}
			catch ( Exception e ) {
				Exception dmy = e;
			}
		}
	}
}
```

##コンパイル実施
D:\D-MyData\data> c:\Windows\Microsoft.NET\Framework64\v4.0.30319\csc /platform:x64 /t:winexe hostsEdit.cs

以下のようにコンパイル後は表示。

Microsoft (R) Visual C# Compiler Version 4.0.30319.36392
for Microsoft (R) .NET Framework 4.5
Copyright (C) Microsoft Corporation. All rights reserved.

##コンパイル後に出来上がったもの確認
D:\D-MyData\data>dir hostsEdit.exe
#shell で #cd コマンドを引数なしで実行したら ホームディレクトリに一発で移動できて驚愕した件 ( #linux #mac )

打ちにくいんだよこれどうにかならんのか！

`cd ~/`

# mac

う、うそやろ。

```
$ cd

$ pwd
/Users/yumainaura
```

# docker alpine

まじすか

```
# cd
~ # pwd
/root
```

# docker centos

まじすか

```
[root@f6e1db1c14e4 systemd]# cd

[root@f6e1db1c14e4 ~]# pwd
/root
```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
CircleCI のジョブ間で docker image を共有する

CircleCI の workflow 内のジョブ間で docker image を共有する方法を説明します。

## 一言で言うと

`docker save/load` と CircleCI の [workspace](https://circleci.com/docs/2.0/configuration-reference/#persist_to_workspace) 機能を使います

## 詳細な方法

以下の2つのジョブがあるとします。

- ジョブ `a` 
- ジョブ `b` : `a`のあとに実行される

```.circleci/config.yml
...
    jobs:
      - a
      - b:
          requires:
            - a
...
```

ジョブ `a` では次の処理を行ってください。

1. `docker save` コマンドでイメージをファイルとして保存
2. CircleCI の `persist_to_workspace` で docker image の保存先を永続化

```.circleci/config.yml
...
      - setup_remote_docker
      - run:
          name: Save image
          command: |
            mkdir -p /tmp/docker
            docker save hoge/fuga:latest -o /tmp/docker/image
      - persist_to_workspace:
          root: /tmp/docker
          paths:
            - image
...
```

ジョブ `b` では次の処理を行ってください。

1. CircleCI の `attach_workspace` で docker image のファイルをアタッチ
2. `docker load` コマンドでファイルをロード

```.circleci/config.yml
...
      - attach_workspace:
          at: /tmp/docker
      - setup_remote_docker
      - run: docker load -i /tmp/docker/image
...
```