OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js(axios)からDiscordに通知を送るメモ


忘れがちなのでコピペできる簡単なサンプルをメモしておきます。

![スクリーンショット 2020-01-22 13.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/4544ab65-170b-516d-f713-292efc0aa9b0.png "スクリーンショット 2020-01-22 13.25.38.png")

## 準備

```bash
$ mkdir myapp
$ cd myapp
$ npm init -y
```

## インストール

```bash
$ npm i axios
```

## コード

```app.js
'use strict'

const axios = require('axios');
const URL = `DiscordのWebhook URL`;

//ヘッダーなどの設定
const config = {
    headers: {
        'Accept': 'application/json',
        'Content-type': 'application/json',
    }
}

//送信するデータ
const postData = {
    username: 'n0bisuke BOT',
    content: 'Node.jsからポストしてるよ :)'
}

const main = async () => {
    const res = await axios.post(URL, postData, config);
    console.log(res);    
}

main();
```

実行するとPOSTされます。

```bash
$ node app.js
```


## ちなみにcurl版

```bash
curl -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"username":"n0bisuke BOT","content":"Node.jsからポストしてるよ :)"}' 'DiscordのWebhook URL'
```
【Unity】いったりきたりするオブジェクトをつくる

定型文みたいなものなので、基本コピペでいいと思います

これをスクリプトで書くなら、Animationのほうがずっと楽です。
[【Unity】ノンコーディングでオブジェクトを動かしたい【Animation】](https://qiita.com/sanpeita/items/b947227cdbad0c26e1e2)


```
using UnityEngine;
using System.Collections;


public class ittarikitari : MonoBehaviour
{
    [SerializeField]
    private Vector3 _startPosition;

    [SerializeField]
    private Vector3 _targetPosition;

    [SerializeField]
    private float _duration = 1f;

    private float _time = 0;
    //private int _dirFactor = 1;
    private bool _inverse = false;

    private void Update()
    {
        _time += Time.deltaTime;

        // 指定時間を過ぎたら向きを逆に
        if (_time >= _duration)
        {
            _time = 0;
            _inverse = !_inverse;
        }

        // 時間を媒介変数として計算（0 - 1）
        float t = _time / _duration;

        if (_inverse)
        {
            transform.position = Vector3.Lerp(_startPosition, _targetPosition, 1f - t);
        }
        else
        {
            transform.position = Vector3.Lerp(_startPosition, _targetPosition, t);
        }
    }
}
```
コンポーネントの見た目はこんな感じ
<img width="368" alt="j.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/debd8dfc-255e-fd5f-7bf9-175d7297de64.png">

いったりきたりする
<img width="409" alt="k.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d5379460-4b65-9598-097e-8e2f6d39372a.png">
<img width="408" alt="l.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/124e4b95-d337-ba5f-d9eb-5ad2c823a403.png">
base64形式にして画像を表示できるようにする　React

初めてbase64を使ったのでメモ


#base64とは
この記事を読むとわかる
[base64ってなんぞ？？理解のために実装してみた](https://qiita.com/PlanetMeron/items/2905e2d0aa7fe46a36d4)

#base64に変換してくれるサイト
[画像をbase64に変換してくれるサイト](https://lab.syncer.jp/Tool/Base64-encode/)


実際にbase64化されたURLをブラウザで検索して、画像が表示されてたらbase64化できてる

#実装方法

```logo.js
export const logo ="base64形式のURL"
```

```App.js
import logo from './logo'

(コード省略)
<img src={logo} alt={画像が表示されない時に代わりに表示したい文字} />
```

画像を　export　して　読み込みたいところでimportして使える！
【C#】Project euler 62問目

C#を用いてProjectEulerに挑戦している人の記録です。VisualStudio2017で、1つのフォームアプリの中に問題番号のボタンを作成し、そのボタンをクリックすると結果をラベルに表示するという形式でやっています。

#62問目
立方数 

```math
41063625 (345^3) 
```

は, 桁の順番を入れ替えると2つの立方数になる: 

```math
56623104 (384^3) , 66430125 (405^3)
```

である. 41063625は, 立方数になるような桁の置換をちょうど3つもつ最小の立方数である.

立方数になるような桁の置換をちょうど5つもつ最小の立方数を求めよ.

```
private void button62_Click(object sender, EventArgs e)
        {
            const int Max = 10000;
            const int MaxCount = 5;

            long[] CubeArray = Enumerable.Range(1, Max).Select(X => (long)X * X * X).ToArray();

            for (int i = 0; i <= CubeArray.GetUpperBound(0); i++)
            {
                var sb1 = new StringBuilder();
                foreach (char Each in CubeArray[i].ToString().OrderBy(X => X))
                    sb1.Append(Each);

                var AnswerList = new List<int>() { i };
                int Cnt = 1;
                for (int j = i + 1; j <= CubeArray.GetUpperBound(0); j++)
                {
                    if (sb1.ToString().Length > CubeArray[j].ToString().Length) continue;
                    if (sb1.ToString().Length < CubeArray[j].ToString().Length) break;

                    var sb2 = new StringBuilder();

                    foreach (char Each in CubeArray[j].ToString().OrderBy(X => X))
                        sb2.Append(Each);

                    if (sb1.ToString().Equals(sb2.ToString()))
                    {
                        AnswerList.Add(j);
                        if (++Cnt > MaxCount) break;
                    }
                }
                if (Cnt == MaxCount)
                {
                    AnswerList.ForEach(X => textBox1.AppendText((X + 1) + "の立方" + (long)(X + 1) * (X + 1) * (X + 1) + " "));
                    label1.Text = "Answer =" + CubeArray[i].ToString();
                    return;
                }
            }
        }
```
2つの立方数を計算するループで、桁の順番を入れ替えて他の立方数になるということは、昇順で並べ替えたときに同じなので、昇順で並び替えて5つ等しいものが見つかると終了という仕組みです。

#感想
かなり調べたので、自分の力で解けるように努力します
（私のような）猿でもわかる強化学習（Q学習）

# はじめに
一度、DQNを通してお勉強したのですが、いまいち納得できていなかったので、ちゃんと勉強し直します。
とは言っても、変数とか数式とか出てくると意識が飛んでしまうので、なるべく簡単な言葉に翻訳します。

# 登場人物（ひとではない）
- 状態
    - 今どういう環境になっているのか
- 行動
    - 今の状態から何をするのか
- 報酬
    - 行動したことによりもらえるお金（のようなもの）
- 価値（Q値）
    - 将来の報酬を集めたもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130771/497248e5-c863-1dfa-c5eb-65a6b57accc4.png)

# ゴール
***<font color="FF0000">ある状態でどういった行動をとれば、価値（Q値）が最大になるのかを求める。</font>***
瞬間瞬間で、常にベストな行動をとるイメージです。
[![images.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130771/17d94560-568c-bb28-c8d4-aa40a1ba0503.jpeg)
](https://books.google.co.jp/books/about/%E6%97%A5%E6%9C%AC%E7%A7%91%E5%AD%A6%E6%8A%80%E8%A1%93%E5%A4%A7%E5%AD%A6%E6%95%99%E6%8E%88%E4%B8%8A%E7%94%B0%E6%AC%A1.html?id=ObgcNwAACAAJ&source=kp_cover&redir_esc=y)

# 基本的な考え方
今の状態である行動をとったときの価値（Q値）は、それによってもらえる報酬と、その後の価値（Q値）を足したものになります。

```
価値（Q値）＝報酬＋その後の価値（Q値）
```

ただし、その後の価値（Q値）は確定ではないので、正確にはちょっと割り引いた値（割引率）にします。
（この説明では、話を簡単にするために省略）

# 価値（Q値）の求め方
価値（Q値）の求め方はいろいろあります。

- Q学習
- SARSA
- モンテカルロ法
- etc.

ここでは「Q学習」での求め方を説明します。

## Q学習
残念ながら将来の価値（Q値）はわかりませんので、実際に「ある状態のときにある行動をとったらいくらの報酬になった」かを学習して、どんどん価値（Q値）を更新することで実現します。

今の価値（Q値）を、更新前の今の価値（Q値）と、今回の行動によって得られる報酬と、次の全ての行動の価値（Q値）の最大値を足したものとするのがQ学習になります。
次に行う行動はわからないので、とりあえず最大値を使用するという、ざっくりとした計算でも大丈夫そうです。
なお、「次の全ての行動の価値（Q値）」も更新前の値を使用します。

```
今の価値（Q値）＝更新前の今の価値（Q値）
　　　　　　　　＋（今回の報酬＋次の全ての行動の価値（Q値）の最大値）
```

また、本当はそこに学習率をかけることで、どのくらい急激に価値（Q値）を変化させるかを指定します。
（この説明では、話を簡単にするために省略）

この計算を、実際に学習するときに行い、価値（Q値）を更新していきます。

最終的に、状態×行動のマトリックスに価値（Q値）を設定した表が出来上がります。
※今の状態と行動から報酬が求められるので、それと表の価値(Q値)を使って、表を更新していきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130771/062dfcf9-937d-5351-f25d-9bd1a72a46d6.png)
※OpenAIの「[CartPole v0](https://github.com/openai/gym/wiki/CartPole-v0)」で、状態を6種類に量子化した場合

## 図解
価値（Q値）の更新を、簡単なポンチ絵で説明してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130771/cb1be5cc-a270-3855-fbb2-beba0db26131.png)

# 実行
出来上がった表に従い、今の状態から、価値（Q値）が最大となる行動を選んでいけば、最適な行動がとれるということになります。

# 問題点
一見なんの問題もなさそうな仕組みですが、状態のパターンが多い（離散的ではなく連続的な場合とか）と、表が作れないという問題があります。
（学習できなかったパターンがあると、正しく価値（Q値）が求められない）
そこで、機械学習（Deep Learning）を使って価値（Q値）を近似してしまおうというということになります。

なので、次はDQN（Deep Q-Network）をこのくらい簡単に説明できればなと思っています。
私的Python学習手順

# 概要

ここでは、個人的にPythonを学ぶ上での学習手順を示します。これは、私が人にPythonを教えた時の学習手順です。
学習手順は以下の通りです。期間は大体2週間から1か月です。

- 基本的なプログラミング文法は参考書を買い、その写経をする
- クラスを用いてプログラムを作成する
- GUI用ライブラリ：tkinterを用いて、デスクトップアプリを作成する


ここでの狙いは以下の通り。

- 参考書の写経を通じて基本的な文法をしっかり覚える
- デスクトップアプリの作成を通じて、オブジェクト指向（またはコンポーネント指向）の感覚を覚える
- GUIであると出来ているかどうか見て分かりやすいので、モチベーションを上げやすくする

私が思うに、本当に基礎の基礎の所は本を読めば誰かに教わる必要なんてないと考えています（実際、私が初めてプログラミングした際は独学でした）。基本的には独学に近い状態で勉強してもらい、調べても分からないところを都度誰かに聞くといった方が良いと思います。

# 開発環境

開発環境はAnacondaを使用させます。初学者の場合、環境構築で躓くことが多いと思います。Anacondaの場合であればインストールすればとりあえず使用できますし、AnacondaにあるSpyderというIDE（統合開発環境ソフト）を使用すれば特別何も考えなくてもプログラミングできるので、私はAnacondaを使用させています。

# 基本的なプログラミング文法は参考書を買い、その写経をする

私は「[やさしいPython](https://www.amazon.co.jp/%E3%82%84%E3%81%95%E3%81%97%E3%81%84Python-%E3%80%8C%E3%82%84%E3%81%95%E3%81%97%E3%81%84%E3%80%8D%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E9%AB%98%E6%A9%8B-%E9%BA%BB%E5%A5%88/dp/4797396024)」を用いて勉強することを推奨しています。基本的なことが分かりやすく説明されていますし、簡単な練習問題も章末にあるので、勉強しやすいです。

# クラスを用いてプログラムを作成する

次にクラスを用いてプログラミングしてもらいます。Pythonの講座などでは、あまりオブジェクト指向的なコードが見受けられないイメージがあります。個人的に最低限クラスを用いることが出来なければ、業務上使えるレベルにならないと思っています。

また、可能であれば、以下のAPIを用いたプログラムを作成してみると面白いと思います。Pythonは時折サーバサイドで使用したりするので、HTTP通信程度は知識として持つために、使用すると良いと思います。


- 個人でも使える！おすすめAPI一覧：[https://qiita.com/mikan3rd/items/ba4737023f08bb2ca161](https://qiita.com/mikan3rd/items/ba4737023f08bb2ca161)

# GUI用ライブラリ：tkinterを用いて、デスクトップアプリを作成する

最後に、2つめの項目で作成したプログラムを用いてデスクトップアプリを作成します。tkinterはPythonに標準で使用できるライブラリなので、初心者が躓きやすい環境構築の手間がなく、また見た目としても「出来上がっている感」があるので、モチベーションを上げやすいと思います。基本的にはgirdを多用するように作成します。私の頭の中では以下のような感じで組み立てていきます。


```
tk
├─frame1：ページ1用フレーム／自動で配置（pack）
|   ├─frame_component1：部品1／表的に配置（grid）
|   ├─frame_component2：部品2／表的に配置（grid）
├─frame2：ページ2用フレーム／自動で配置（pack）
    ├─frame_component3：部品3／表的に配置（grid）
    ├─frame_component4：部品4／表的に配置（grid）
```
変数連番のソースコードを複数個一瞬で作成する方法

Powershellウィンドウに流すと、C:\Temp\getHogeId.vb　ファイルに下記の$_部分を連番の数字に置換して連番で50個一瞬で出力します。

```powershell
1..50 | %{echo @"
    Protected Sub txtName$_`_TextChanged(sender As Object, e As EventArgs) Handles txtName$_.TextChanged
        Dim Id As String = ""
        Id = txtName$_.Text
        If Not String.IsNullOrEmpty(Id) Then
                txtHoge$_.Text = Id
        Else
            txtHoge$_.Text = ""
        End If
    End Sub
"@ >> C:\Temp\getHogeId.vb}
Lambda + API GatewayでCORSを有効にしているのにCORSでエラーになる

Amazon Pinpoint を使用するために、[チュートリアル: E メール設定管理システムの設定](https://docs.aws.amazon.com/ja_jp/pinpoint/latest/developerguide/tutorials-email-prefs.html)をやってみたら、[ステップ 6: ウェブフォームを作成してデプロイする](https://docs.aws.amazon.com/ja_jp/pinpoint/latest/developerguide/tutorials-email-prefs-part-6.html)で引っかかったので。

## API GatewayでCORSは有効になっている
API Gatewayのメソッドレスポンスではこんな感じで設定済みなのに、いざ違うドメインから実行しようとするとブロックされてしまう。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260487/df29519c-640f-b9ec-239e-1145590f6c9a.png)


## 対策：Lambda 関数側でもレスポンスヘッダーを設定する必要がある

[チュートリアルの前ステップ](https://docs.aws.amazon.com/ja_jp/pinpoint/latest/developerguide/tutorials-email-prefs-part-4.html)で作成したLambda関数のコードでは、レスポンスが特に設定されていない。

終了時にレスポンスを設定・返却する必要がある。

```javascript
  const response = {
    "statusCode": 200,
    "headers": {
        "Content-Type": 'application/json',
        "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
        "Access-Control-Allow-Methods": "POST",
        "Access-Control-Allow-Origin": "*"
    },
    "body": JSON.stringify(event)
  };

  callback(null, response);
```

"body" の中身はJSON形式であれば空でもいい。設定しなかったりただの文字列だとAPI Gateway側のエラーで返される。
FLOPSとFLOPs

##はじめに
ResNetの論文を読んでたらFLOPsって出てきたんですけど，FLOPSと何が違うのとなったのでこの記事書きました．
同じ悩みの人がいればぜひ見てください

## FLOPS(Floating-point Operations Per Second)
パソコンの性能指標（CPU，GPU）を図るための指標です．
一般的に調べればこっちが多く出てきます．
この値が大きいほど性能がいいパソコンになります．

## FLOPs(FLoating-point OPerationS)
ただの計算量です．
なので増えれば増えるほど処理に時間がかかることになります．
機械学習の評価値としてたまに出てくるんですがFLOPSとFLOPsを読み間違えると層が増えるほど処理速度が速くなるというわけわからん解釈になるので気を付けたほうがいいです（1敗）
日本語では[ここ](https://daily.belltail.jp/?p=2537#hs_b13c81e1d93e8b709d82152347459f21_footnote_1)(1)にいい感じに書いてました．

## さいごに
処理速度(FLOPS)と計算量(FLOPs)を間違えないようにしよう！！
ものすごく紛らわしいけど・・・

## 参考文献
(1)[Chainerで書いたニューラルネットの理論計算量を推定するchainer_computational_cost](https://daily.belltail.jp/?p=2537#hs_b13c81e1d93e8b709d82152347459f21_footnote_1)
Vuetify Componentに定義されているCSSを上書きするTips

# 背景

タイトルそのまま

## 結論

scoped cssを使わない。

## 例

```vue
<template>
  <v-parallax dark :src="require('../../assets/images/hoge.jpg')" 
  </v-parallax>
</template>

<style>
.v-parallax__image {
  transform: translate(-50%, 0px) !important;
}
</style>
```

## 参考

[How to override vuetify styles?](https://stackoverflow.com/questions/52310060/how-to-override-vuetify-styles)
Vue + Firebase 本番デプロイコマンドメモ

## 前提

###①firebaseでの各種設定を済ませていること

###②ターミナルでfirebaseへのログイン

```:$
firebase login
```

```
zsh: command not found: firebase
```
と出てきてしまったら、、
npmのパスに問題がある可能性があるので

```
npm bin -g
```
でパスを確認

```
/Users/emisub/.npm-global/bin
(not in PATH env variable)
```
(not in PATH env variable)と出てきてしまったらパスを通す必要あり

```
export PATH=$PATH:`npm bin -g`
```
でパスを通す

###③npmのインストール

```:$
npm i -g firebase-tools
```
## Vueファイルを本番環境用に
```:$
npm run build
```

## Firebaseにデプロイ
```:$
firebase deploy
```
Quartus用のgitignoreを作る

# はじめに

今まで個々のHDLしかgitで管理していなかったため
Quartusプロジェクト用のgitignoreファイルを作りました。
備忘録として残します。

HPSは管理対象に入っていません。

# 環境

Quartus Prime Version 18.1.0 build 625 09/12/2018 SJ Lite edition

# gitignoreファイル

gitignore.ioで生成した[Quartusのgitignore](https://www.gitignore.io/api/alteraquartusii)を元に作成しました。 

```
*.*
!/*.gitignore

# ignore Quartus generated folders
/db/
/incremental_db/
/simulation/
/timing/
/testbench/
/*_sim/

# project files
!*.qpf
!*.qsf
# source files
!*.bdf
!*.vhd
!*.v
!*.sv
# IP core files
!*.qip
!*.sip
!*.bsf
# SOPC builder project source files
!*.ptf
!*.bsf
# board description
!**/class.ptf
# sdc files:
!*.sdc
# tcl files:
!*.tcl
```

# 変更点

## Quarutusが生成するフォルダを除外

論理合成やシミュレーション時に生成されるフォルダの除外を追加しました。

```
# Quartus generated folders
/db/
/incremental_db/
/simulation/
/timing/
/testbench/
/*_sim/
```

## SystemVerilogファイルを追加

SystemVerilogでコードを書く場合があるため追加しました。

```
# source files
...
!*.sv
```

## .qws(Quartus Window Settings ?)を管理対象外に変更

guiの設定は不要なので以下の記述を削除しました。

```
!*.qws
```

## IP関連のファイルを追加

IP生成時に追加されるファイルを追加しました。
`.bsf`も生成されますが元々のgitignoreに入っています。

```
# IP core files
!*.qip
!*.sip
```

## タイミング解析用のファイルを追加

sdcファイルを追加しました。

```
# sdc files:
!*.sdc
```

## 書き込み用のバイナリファイルを削除

プロジェクトから生成できるので以下の記述を削除しました。
巨大なプロジェクトの場合は生成に必要な時間が長くなるため管理対象にするのもよいと思います。

```
!*.sof
```

## ソフト関連を削除

もともとコメントアウトされていたので削除しました。

```
## tbd
```

# とりあえず残したもの

## 各基板用のファイル

評価ボードなどを使う場合に生成されると思われます。

```
# board description
!**/class.ptf
```

# 参考
https://www.gitignore.io/api/alteraquartusii
[thomasrussellmurphy/quartus-DE0-project - .gitignore](https://github.com/thomasrussellmurphy/quartus-DE0-project/blob/master/.gitignore)
https://www.gitignore.io
[/var/log/hikalium - QuartusのプロジェクトをGitで管理する ](https://hikalium.hatenablog.jp/entry/2017/06/05/091802)
git logから最新タグ以降の `Merge pull request` だけを抜き出す

# やりたいこと
 - 本番リリース毎に最新のコミットに対してタグを付けているので、リリース時に本番リリースされていない `Merge pull request` コミットの確認をしたい
   - 本番リリース前の最終チェックで、何が反映されるのか毎回手動で確認していたから何とかしたかった
 - 最新のタグが付いたコミットも表示させる


# シェルコマンド
```shell
git log --pretty=format:'[%ad] %s %D' --date=iso --decorate-refs=tags | grep Merge.*pull | awk -F, '{if ( $0 ~ /tag\:/ ) {print; exit 0} else {print}}'
```

# alias登録用
```shell
alias git-log-check="git log --pretty=format:'[%ad] %s %D' --date=iso --decorate-refs=tags | grep Merge.*pull | awk -F, '{if ( \$0 ~ /tag\:/ ) {print; exit 0} else {print}}'"
a
```
 - awkで利用する変数 `$0` に対してエスケープが必要なのに気づくのにすごく時間がかかった


# 参考
 - [`git log --pretty=format` で tagを表示する方法](https://qiita.com/isuke/items/35b192b0899872aa7b03)
 - [awkワンライナー集](https://qiita.com/yusukew62/items/f9502a3ddd6087a496ce)
 - [linux - awkコマンドのエイリアス方法](https://tutorialmore.com/questions-802430.htm)

いつもQiitaには感謝しています。
Rails6 のちょい足しな新機能を試す 117（puma pidfile編)

# はじめに

Rails 6 に追加された新機能を試す第117段。 今回は、`puma pidfile` 編です。
Rails 6 では、 `rails new` したときに `config/puma.rb` に `pidfile` の設定が追加されるようになりました。
`pumactl` で制御できるようにするためのようです。

なお、この修正は、Rails 5.2.4 にも反映されています。

Ruby 2.6.5, Rails 6.0.2.1, Rails 5.2.3, Rails 5.2.4.1 で確認しました。 (Rails 6.0.0 でこの修正が入っています。)

```shell
$ rails --version
Rails 6.0.2.1
```

# Rails プロジェクトを作る

Rails プロジェクトを新たに作成します。

```shell
$ rails new rails_sandbox
$ cd rails_sandbox
```

# `config/puma.rb` を確認する

`config/puma.rb` を確認すると `pidfile` の設定があることがわかります。

```ruby:config/puma.rb
...
# Specifies the `pidfile` that Puma will use.
pidfile ENV.fetch("PIDFILE") { "tmp/pids/server.pid" }
```

# 試してみる

普通に、 `rails s` でサーバーを起動します。

```shell
$ bin/rails s
```

別のコンソールから、プロジェクトのディレクトリに移動して  `pumactl status` を実行してみます。

```shell
$ pumactl status
Puma is started
```

リスタートしてみます。

```shell
$ pumactl restart
Command restart sent success
```

`rails s` を実行したコンソールで puma (rails) が再起動されました。

```shell
=> Booting Puma
=> Rails 6.0.2.1 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.1 (ruby 2.6.5-p114), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
Use Ctrl-C to stop
* Restarting... # <=== ココ
=> Booting Puma
=> Rails 6.0.2.1 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.1 (ruby 2.6.5-p114), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
Use Ctrl-C to stop
```

# Rails 5 では

Rails 5.2.4.1 では、Rails 6 と同じ動作になりますが、 Rails 5.2.3 では、 `pumactl status` を実行してもエラーメッセージが表示されます。

```shell
$ pumactl status
Neither pid nor control url available
```

# 参考情報

* [Add pidfile option to puma config template](https://github.com/rails/rails/pull/36542)
JavaScript: 変数の初期化では`undefined` と `null` のどちらを使うのがよい？

# 概要

JavaScriptには `undefined` と `null` があります。

先ほど以下のようなコードを見かけました。

```js
let callback = undefined;
```

私個人としては初期化の時は `null` を入れておくことが多いので、変数の初期化では`undefined` と `null` のどちらを使うのがよいのか考えました。

# 個人的な結論

`undefined` はその名の通りundefinedを示すものです。
変数を初期化している以上、その変数はundefinedとは呼べないのではないかと。

そんなこんなで **「初期化の時は `null` を入れておく」** に落ち着きました。

# 補足

ググり力が足りないためか良い感じの初期化に関するドキュメントが見つけられませんでした。
何かあれば教えていただけると嬉しいです。

# 補足2

いろんなところに書かれている内容ではありますが、`undefined` と `null` の比較について。

```
% node -v
v12.14.1
```

```node
> undefined == undefined
true
> undefined == null
true
> null == null
true

> undefined === undefined
true
> undefined === null
false
> null === null
true
```

ポイント: `undefined == null` は `true`

# 参考
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/null
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined
Docker DesktopのGUIにダッシュボードが搭載されてコンテナやボリュームがわかりやすくなったぞ

本日Docker Desktopの新バージョン[2.2.0.0がリリース](https://docs.docker.com/docker-for-windows/release-notes/)されましたが、今まで設定画面しかなかったGUIに新しくダッシュボード画面が追加されて作成しているコンテナやボリュームがわかりやすくなっています。（個人的にはCLI使うのでいらんのですが・・・ん？イメージの情報がないぞ！こっちのほうが使いたい）

詳細は丸投げ → https://docs.docker.com/docker-for-windows/dashboard/

設定画面の「Settings」のタイトルの右にある「×」（ウインドウを閉じるではない方）をクリックするとダッシュボード画面に移動します。まあタスクトレイのメニューに「Dashbord」ってあるんですけどね。新しくなった設定画面に注目してると気づきにくいかなーと思ったので。

あと、Windows側のドライブのマウントにCIFSではなくgRPC FUSE（なにそれ？）というのを使うようになったみたいです。Linux inotifyに対応したようだから、Auto Reloadとか動くようになってるのかな？

参考
・[New Filesharing Implementation in Docker Desktop Windows Improves Developer Inner Loop UX](https://www.docker.com/blog/new-filesharing-implementation-in-docker-desktop-windows/)
・[Deep Dive Into the New Docker Desktop filesharing Implementation Using FUSE](https://www.docker.com/blog/deep-dive-into-new-docker-desktop-filesharing-implementation/)

それだけです。
【Excel】日付をまたぐ時間の平均値を取得する方法

業務で苦戦した「日付をまたぐ時間の計算」「配列数式」ついて備忘のためにメモ。
##やりたいこと
「終了時間の平均時間(黄色セル)を求めたい。」

※わかりやすいために、実行時間の平均を表示している。
　終了時間の平均は0：46になるべきである。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558866/ea5366f7-b165-2cd5-1ab6-94552e93eaa5.png)

##求めてみよう(take1)

普通にやるとこうなる。
※式=AVERAGE(D19:D26)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558866/322d36d6-f6f6-0e08-b629-1859ea137c32.png)

日付(0時)をまたぐか否かで計算する必要があるということがわかった。

##求めてみよう(take2)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558866/500390d7-768a-5b67-66cb-004568b9a878.png)
数式はあっているはずなのに、エラーとなる。

そこで配列数式なるものを知る。
##配列数式とは
数同士の計算ではなく、数の集まり同士の計算を扱うときに使うもの。
配列数式の場合は数式バーで「Ctrl + Shift + Enter」でうまくいくとのこと！

##求めてみよう(take3)
無事に正しい時間が取得できた。

ちなみに「Ctrl + Shift + Enter」で実行するのでCSE数式とも呼ばれるそう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558866/ae6db3fa-2b48-8031-99ec-90a69d6563d9.png)


##参考サイト
https://press.share-wis.com/array-formula-excel
http://office-qa.com/Excel/ex69.htm
MySQLのバージョン毎に実行を分けるコメント構文「!」version指定

ダンプやクエリで

```
/*!32302 */　や　/*!50100 */　、/*!50500 */　、/*!50600 */
```
とコメント構文で囲ってあるものがあります。

こちらは、「!」の後に指定しているのが**バージョン番号**を表していて
``32302``は``MySQL3.23.02``
``50100``は``MySQL5.1.00``
``50600``は``MySQL5.6.00``
となります。

「!」文字のあとにバージョン番号を追加すると、
コメント内の構文はMySQL のバージョンが指定されたバージョン番号以上の場合にだけ実行されます。（指定されたバージョン未満は実行されません。）

なので

```
/*!50635 select * from hoge */;
```
は**MySQL5.6.35以上**のみ実行されるクエリになります。

バージョン毎に実行クエリを分けたい場合に使えます。
Apache2.4 の SNI で VirtualHost 毎に SSLProtocol が設定できなかった 

Apache2.4 でSNIを利用して複数の HTTPS サイトを運用していたが
とある事情から、ひとつのサイトだけ SSLProtocol を変更しなければいけなくなったときの話

SNIではないWEBサーバで既に SSLProtocol の変更をした実績があったため
同じように Apache の config で SSLProtocol の部分を TLSv1.2 だけ有効にしたのだが
openssl コマンドで確認すると TLS1 でも TLS1.1 でも通信できてしまっている。。

確認コマンド
$ openssl s_client -connect example.com:443 -servername example.com -tls1_1

どうやら、 SNI の場合は一番初めに読み込まれる VirtualHost に設定されている
SSLProtocol の内容がその他の VirtualHost にも適用されてしまっている模様（検証済み）

この問題については Apache コミュニティでも指摘はされているが、修正はされていないようで
Apache2.4.41 でも同様の結果だった。

https://bz.apache.org/bugzilla/show_bug.cgi?id=55707

仕方なくWEBサーバを追加で構築することにしました。
各種コンパイルツール（exe化ツール）の注意点

１．Bat_to_Exe_Converter（.bat形式のEXE化）
　ファイル郡を内包した場合の展開先が、ツールと同じパスの為、
　ファイルサーバ上で複数人が同時に直接実行するとエラーになる。
　また、EXEをStart-Processでpsexecからキックすると内包ファイル郡が展開されない。
　（Invoke-Expressionなら展開される）
 
２．PowerGUI（.ps1形式のEXE化）
　ツールが日本語ファイル名だと、コンパイルできても実行時にエラーになる。
　ファイル郡を内包した場合の展開先が、毎回異なるテンポラリの為、
　ファイルサーバ上で直接実行できる。
 
３．nandemoEXE（あらゆる形式のEXE化）
　PCの実行環境に依存する。（例えばPS1をダブルクリックで実行できない環境だと
　EXEにしても実行できない）
　エラー内容が見えない。エラーになると、実行中で止まってしまう。
 
４．Windows Script Encoder（.vbs形式の.vbe化）
　容易にデコード（もとのソース表示）が可能
powershell／Start-ProcessとInvoke-Expressionの違い

１．Invoke-Expression
・引数も含めて１行で記載できる
・非同期実行しかできない（すぐ次の行が実行される）
・batファイルをキックした場合に、batの中の「%~dp0」の解釈が
「カレントディレクトリ」の為パス結合の際にbat内の記載で￥が必要
・psexecを実行して更にBAT_to_Exe_Converterで作成したEXEをキックすると、内包ファイル郡が展開される

２．Start-Process
・引数は別（-ArgumentList）
・同期実行ができる（-Waitで終わるまで待てる）

・batファイルをキックした場合に、batの中の「%~dp0」の解釈が
「カレントディレクトリ￥」の為パス結合の際にbat内の記載で￥が不要
・psexecを実行して更にBAT_to_Exe_Converterで作成したEXEをキックすると、内包ファイル郡が展開されない
rails gするとundefined local variable or method `config' for main:Object (NameError)が出て困った話



# はじめに
`spring stop`すればいいよ！とか書いてあって対処したもののさっぱり解決しなかったので、色々試行錯誤した時の話です。

# どんなエラーが出たか
以下のようなエラーが出ました。
`config`がなんか変らしいです。

``` sh
/Users/t-nakagawa/rails/config/application.rb:46:in `<top (required)>': undefined local variable or method `config' for main:Object (NameError)
        from /Users/t-nakagawa/rails/vendor/bundle/ruby/2.6.0/gems/spring-2.0.2/lib/spring/application.rb:92:in `require'
        from /Users/t-nakagawa/rails/vendor/bundle/ruby/2.6.0/gems/spring-2.0.2/lib/spring/application.rb:92:in `preload'
        from /Users/t-nakagawa/rails/vendor/bundle/ruby/2.6.0/gems/spring-2.0.2/lib/spring/application.rb:153:in `serve'
        from /Users/t-nakagawa/rails/vendor/bundle/ruby/2.6.0/gems/spring-2.0.2/lib/spring/application.rb:141:in `block in run'
        from /Users/t-nakagawa/rails/vendor/bundle/ruby/2.6.0/gems/spring-2.0.2/lib/spring/application.rb:135:in `loop'
        from /Users/t-nakagawa/rails/vendor/bundle/ruby/2.6.0/gems/spring-2.0.2/lib/spring/application.rb:135:in `run'
        from /Users/t-nakagawa/rails/vendor/bundle/ruby/2.6.0/gems/spring-2.0.2/lib/spring/application/boot.rb:19:in `<top (required)>'
        from /Users/t-nakagawa/.rbenv/versions/2.6.3/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
        from /Users/t-nakagawa/.rbenv/versions/2.6.3/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
        from -e:1:in `<main>'
```

# 該当箇所のコード
spring2.0.2のコードを確認します。
パス関連でエラーを起こしているようなので、configフォルダが怪しいということが分かります。

``` Ruby
require Spring.application_root_path.join("config", "application")
```

# 解決しなかった対処方法
`spring stop`してはダメでした。これはこれで立ち上げておくと`rails g`がエラーになるみたいなんで、停止しておいた方が無難だと思います。

# 解決した対処方法
この作業をする直前にやった`config/application.rb`の作業が良くなくて上手くconfigが処理出来なかったようです。
一旦`git restore`で切り戻して`rails g`することで無事コマンドが終了してファイルが作成できました。

# 終わりに
何か困った際は一旦切り戻しするの重要。
念の為、周りの人にspringのバージョンが同じであるかの確認とコマンドが成功しているかの確認は行いました。
みんな駄目ならこの環境自体が駄目で自分だけ駄目なら自分の変更による影響というのが分かるので、やっておきましょう。
PhpStorm（JetBrains製品）のバージョンアップでミスってscratchesが消えたので手動で移行した


# 経緯

PhpStormをアップデートしたタイミングでscratchesファイルが消えてしまった。

scratchesファイルはバージョンごとに管理されているようである。
諸事情で二つのバージョンのPhpStormをインストールしていたこともあって、バージョンアップの際にscratchesファイルに不整合が発生してしまった。

## 解決方法

scratchesファイルを利用するバージョンのディレクトリにコピーしてやると良い

```shell
cp -rp Library/Preferences/PhpStorm2019.2/scratches/* Library/Preferences/PhpStorm2019.3/scratches
```

`PhpStorm2019.2` の部分は適宜変更すること。
PhpSrotmからPyCharmなどへの移行も可能かと思います。
Ubuntu でタッチパッドが使えないときの解決法

#タッチパッドが使えない

中古のパソコン買って、Ubuntuが動くようなスペックある！
ってことで、Ubuntu入れたんですが、タッチパッドが反応しない...

しかも、ほかのサイトを参考にしたら、Wi-Fi が使えなくなった...

私も同じことなってるので、これで解決していきましょう！！

##PC情報
CPU : Intel i7-3632QM
RAM : 8GB
OS : Ubuntu 18.04 LTS

ってことでやっていきましょ！

##解決方法

grubを編集

~~~
~$ sudo nano /etc/default/grub
~~~

9行目の`GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash”`の下に
以下の内容を追加します

~~~
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash i8042.noloop=1" #i8042.noloop=1
~~~

こんな感じになります

![Screenshot from 2020-01-22 20-48-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542494/c3cd2a2b-b0a3-d1f3-8147-e1354dfc6d50.png)

`Ctrl + O` で上書き保存
`Ctrl + X` で終了

grubをアップデート

~~~
~$ sudo update-grub
~~~

本体を再起動

~~~
~$ sudo reboot
~~~

これで、タッチパッドが使えるようになるはずです！

参考サイト
http://restart-plan.com/2018/02/04/
【C++Builder】FireDACでMySQLを使用する際の環境設定

FireDACでMySQLを使う際の環境設定にはまったので、備忘録として書く。

## 使用するデータベースのバージョンの選択
RAD Studioのバージョンによって、[サポートしているデータベースのバージョン](http://docwiki.embarcadero.com/Status/ja/FireDAC_%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88)が違うことに注意。

C++Builderは32bitアプリケーションなので、開発環境からMySQLにアクセスするために32bit版のクライアントライブラリ（libmysql.dll）が必要になる。
さらに、自分で作成するアプリケーションが64bitである場合は64bit版のクライアントライブラリも必要になる。

現在公開されているMySQLの最新は8.0.19であるが、8.0.19での32bit版クライアントライブラリの入手方法が調べてもよくわからなかったので、今回は

- RAD Studio 10.2
- MySQL 5.7.29

を使用することにした。

## 開発環境作成手順
MySQLのインストールに関する詳細は省略。

1. MySQL64bit版インストーラーを[ダウンロード](https://dev.mysql.com/downloads/windows/installer/5.7.html)
2. 64bitでインストールする。（インストーラは32bitだけど問題なし）
3. MySQL32bit版のzipを[ダウンロード](https://dev.mysql.com/downloads/mysql/5.7.html)
4. 3.のzipを任意のディレクトリに展開する。展開後必要なのはbinとlib配下のみなので、それ以外は削除する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274481/c1cc0dca-c0eb-8d2a-91a8-ebd9013da148.png)
こんな感じ。

5. FDDrivers.iniを編集し、参照するlibmysql.dllを設定する。
FDDrivers.iniの格納場所は[こちら](http://docwiki.embarcadero.com/RADStudio/Rio/ja/%E3%83%89%E3%83%A9%E3%82%A4%E3%83%90%E3%81%AE%E6%A7%8B%E6%88%90%EF%BC%88FireDAC%EF%BC%89)を参考に。

```
[FDDrivers.ini]
Encoding=UTF8
[MySQL]
VendorLibWin32 =C:\mysql-5.7.29-win32\lib\libmysql.dll
VendorLibWin64 =C:\Program Files\MySQL\MySQL Server 5.7\lib\libmysql.dll 
```
VendorLibWin32は32bit版のDLLへのパスを、VendorLibWin64は64bit版のDLLへのパスを記述する。

6.接続確認を行う。
C++BuilderでForm上にTFDConnectionを配置し、ダブルクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274481/a4d58fae-eba4-faa0-23e5-68594f04341e.png)

FireDAC接続エディタが表示されるので、作成したデータベースに関する情報を設定し、「テスト」ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274481/a286a28d-283e-1c0c-a374-5589c1cb968f.png)

環境設定がうまくいっていれば下のようなポップアップが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274481/e00ff4e8-0c79-ee8f-59d6-daee8beccd8b.png)
windows updateのログを取得する

windows updateでなぜかこけ続けるパッチがあったので。
ひとまずリブート、トラブルシューティングツール、一時ファイル削除、DISM.exe,sfc /scannowとかしても解決しなかった。

たぶんwin10以降でしか動かないけど、powershellで以下のコマンドを打つ。

```powershell

Get-WindowsUpdateLog

```

実行すると、WindowsUpdateLog.logが出力される。
あとはFAILEDとかでgrepしてもらったらエラー内容が特定できると思われる。
[Java]eclipseでJerjey(Jax-rs)を利用したAPI作成

##はじめに
mavenとかgradleを使わないで実装する方法があんまりなかったので書こうと思います。

##Jerjeyの導入
* [Jerjey](https://eclipse-ee4j.github.io/jersey/download.html"Jerjey")から最新版をDL。
* jaxrs-ri-(version).zipを解凍し、中の[lib]ファイルの中身をEclipceで使うTomcatの[lib]内に入れる。


##プロジェクトの作成
Eclipseで動的Webプロジェクトを作成し、
パッケージ[com.sample.api]とその下にクラス[SampleApi.java]を作成する。

##web.xmlの作成
WebContent/WEB-INFに[web.xml]を作成し、以下をコピペ。

```xml:filename.xml
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
  version="2.4">

 <servlet>
  <servlet-name>jersey-app</servlet-name>
  <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
  <init-param>
    <param-name>jersey.config.server.provider.packages</param-name>
    <param-value>com.api.sample</param-value><!--パッケージ名-->
  </init-param>

  <init-param>
    <param-name>jersey.config.server.provider.classnames</param-name>
    <param-value>org.glassfish.jersey.media.multipart.MultiPartFeature</param-value>
</init-param>
 </servlet>

 <servlet-mapping>
  <servlet-name>jersey-app</servlet-name>
  <url-pattern>/api/*</url-pattern>
 </servlet-mapping>

  </web-app>
```

##ApiSample.javaの編集
最初に作成したApiSample.javaを以下に編集。

```java:ApiSample.java
package com.api.sample;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.QueryParam;
import javax.ws.rs.core.MediaType;

@Path("/Sample")
public class ApiSample {
	@Path("/hello")
	@GET
	@Produces(MediaType.TEXT_HTML + "; charset=UTF-8")
	public String hello(@QueryParam("name") final String name){
		return "Hello!"+name+"さん。";
	}
}

```

##実行
http://localhost:8080/プロジェクト名/api/Sample/hello
>結果
>Hello!nullさん。

と表示されればOK。
また、http://localhost:8080/プロジェクト名/api/Sample/hello?name=山田
と入力すれば
>Hello!山田さん。

と表示されるはず。
xamppのPHP、pearのupgradeをしてみる、DBを入れてみる件

#はじめに

XAMPP for Windows 7.4.1ではPHPに最初からpearライブラリが入ってるんだけど、DBが入っていないのでインストールしてみた所コケタ件

##pearにDBを入れてみる

```
CD C:\xampp\php\
pear list

```
これでpearのリストが表示されるんだけどDBは入っていない
とりあえずupgradeしてみるけど

```
pear upgrade

```

```

Notice: Trying to access array offset on value of type bool in PEAR\REST.php on line 186

```

という文句を言われる。

REST.php on line 186目は厳密にはコメントなんだけど
「If cache is newer than $cachettl seconds, we use the cache!」
で検索してみたところ

https://github.com/pear/pear-core/commit/81b71ecfaeb9eb06debcb5197d18ad4147ad23f3

ここに行き着く。
とりあえず言われたとおりに書き換えてみる
（元の行はコメントで残した方がいいよ）

でまたアップグレードしてみると

```

Fatal error: Cannot use result of built-in function in write context in C:\xampp\php\pear\Archive\Tar.php on line 639

```

今度はTar.phpの639行目がダメって言われる。
こっちはよく「アリガチ」なエラーらしく、すぐに情報が得られる

https://k3akinori.hatenadiary.org/entry/20180728/1532788736

ということでこれも書き換えてupgrade

いろいろ文句は言われるけどupgradeは成功。

```

pear install DB

```

DBをインストールしてみたら実行できた。

とりあえずはDBインストール、pear upgradeどっちもできたってことで
jarファイルに画像リソースを含める

## IntelliJからjarファイルを出力すると、画像が表示されなくなる問題
Swingを用いたGUIツールを作製したとき、IntelliJ上で実行した場合は画像ファイルがきちんと表示されるが、jarファイルとして出力すると画像ファイルうまく表示できなくなるという問題に直面した。
ググったところ、よく知られた現象らしく、解決策もすぐに出てきた。以下はその解決策を自分用のメモとしてまとめたものである。

## 状況説明
JavaのGUIツールキットであるSwingを練習するため、砂時計アイコンが表示されるだけの簡単なプログラムを作製していた。
![スクリーンショット 2020-01-22 10.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329378/cac66c4d-1e5d-879f-87a8-29d9f3e86279.png)
こんなの

アイコンはhourglass.pngファイルという名前で、srcフォルダ直下に保存した。また、アイコンファイルの読み込みは以下のように記した。
`ImageIcon myIcon = new ImageIcon("hourglass.png");`
![スクリーンショット 2020-01-22 10.49.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329378/c08dfb88-34f5-3664-df8a-5a2bd4ec0e31.png)

このコードをIntelliJ上で実行すると、砂時計アイコンがきちんと表示されたプログラムが実行される。
しかし、jarファイルを出力し、ターミナル上からプログラムを実行すると、以下のようにアイコンが表示できなくなってしまう。

![スクリーンショット 2020-01-22 11.23.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329378/d68abad9-dd16-fd7e-99b6-04d9213a535d.png)

## 解決策
#####ClassLoader.getResource()を利用する。

Javaでは、ファイルなどのリソース情報を取得する処理としてClassLoader.getResource()が用意されている。

先のコードで`ImageIcon myIcon = new ImageIcon("hourglass.png");`としていた記述を、

```java

ClassLoader cl = this.getClass().getClassLoader();
ImageIcon myIcon = new ImageIcon(cl.getResource("hourglass.png"));
```

と書き換えることで、jarファイルとして出力した後も、画像リソースがちゃんと参照されるため、画像が表示されるようになる。
![スクリーンショット 2020-01-22 10.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329378/8c0cca66-b27b-b153-8c3b-ec39ad45d6d2.png)
やったね

##参照元
https://virtualwalk.hatenadiary.org/entry/20121013/1350127275
http://hiesuke.hatenablog.com/entry/2016/12/30/101639
JavaScript の dateObj.toISOString() が便利だった。

日付を`YYYY/MM/DD`形式などにフォーマットして出力したい場合に、年月日をそれぞれ求めてから文字列に加工していました。

インターネットを検索しても同様の記述が多く、もっと簡単な方法がないかなとMDNをみていたら常に`YYYY-MM-DDTHH:mm:ss.sssZ`の文字列を返す`toISOString()`があり、使ってみたら便利でした。

Qiitaでもすでに投稿されている方がいますので、その一部のリンクを記述します。

* [ECMAScript 2017 に準拠した方法で Date オブジェクトをシリアライズ(文字列化)する](https://qiita.com/think49/items/b314eb874a66e9fe9e19)
* [toISOStringから時間を整形する。](https://qiita.com/HadaGunjyo/items/ff98f02b53ad175474e9)
コマンドライン上でJSONを上書き保存する

## やりたいこと
GithubActions上でJSONを書き換えるのにいい方法ないかなーと思ったことです。

```zsh:console
% echo '[{"name":"hoge","age":"29"},{"name":"fuga","age":"30"}]' > test.json
% cat test.json | jq
[
  {
    "name": "hoge",
    "age": "29"
  },
  {
    "name": "fuga",
    "age": "30"
  }
]
% jq '.[1].age="25"' test.json # この結果でtest.jsonを上書きたい
[
  {
    "name": "hoge",
    "age": "29"
  },
  {
    "name": "fuga",
    "age": "25"
  }
]
```

## できない方法
```zsh:console
% cat test.json | jq '.[1].age="25"' > test.json
% cat test.json | jq # 空ファイルになる
```
[stackoverflowのコメント](https://ja.stackoverflow.com/a/35017)より
>シェルがコマンドラインを解釈した後、hoge.txt をオープンして 0 バイトにしてから cat を起動するので当然の結果です。実行したいコマンドラインの前に hoge.txt を一時ファイルにコピーして利用するか、実行結果を一時ファイルに出力したあと上書きする必要があります。

[stackoverflowのコメント](https://ja.stackoverflow.com/a/35013)より
>リダイレクトはコマンドが実行される前に shell が処理してしまってますから、コマンドが実行された時には既にファイルは空になっています。

簡単にできるわけではなさそう。

## 実現する方法
### 1.tmpを作って逃がす
違う名前だったら処理結果を出力できるので
 
```zsh:console
% echo '[{"name":"hoge","age":"29"},{"name":"fuga","age":"30"}]' > test.json
% jq '.[1].age="25"' test.json > tmp && mv tmp test.json
% cat test.json | jq
[
  {
    "name": "hoge",
    "age": "29"
  },
  {
    "name": "fuga",
    "age": "25"
  }
]
```

### 2.[黒魔術](https://ja.stackoverflow.com/a/35022)  
悪くはなさそうだけど、何をやってるのか直感的じゃないですね。。。

```zsh:console
% echo '[{"name":"hoge","age":"29"},{"name":"fuga","age":"30"}]' > test.json
% (rm test.json && jq '.[1].age="25"' > test.json) < test.json
% cat test.json | jq
[
  {
    "name": "hoge",
    "age": "29"
  },
  {
    "name": "fuga",
    "age": "25"
  }
]
```

### 3. [sponge](https://qiita.com/ngyuki/items/ad7d52186a84cc973438#sponge)  
macOSなら `brew install moreutils` した後で

```zsh:console
% echo '[{"name":"hoge","age":"29"},{"name":"fuga","age":"30"}]' > test.json
% jq '.[1].age="25"' test.json | sponge test.json
% cat test.json | jq
[
  {
    "name": "hoge",
    "age": "29"
  },
  {
    "name": "fuga",
    "age": "25"
  }
]
```

後から読む人のことを考えたら1が良さそうです。
3はスッキリするけど、この為だけにインストールしなきゃなので…

## 参考
- [linux - コマンドラインで読み込んだファイルに上書きするには - スタック・オーバーフロー](https://ja.stackoverflow.com/q/35012)
- [シェル芸力向上のため moreutils を一通り試してみた - Qiita](https://qiita.com/ngyuki/items/ad7d52186a84cc973438)
docker-compose up出でるエラー

#概要
いつものようにDocker-compose upするとサーバーが立ち上がらない。

具体的には、↓こんな感じでエラーが出ている。

<img width="579" alt="スクリーンショット 2020-01-11 23.34.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504349/a232171d-eb7f-6e3e-5a58-0f52d06fc489.png">

〈注意すべきポイント〉
**bundler: failed to load command: rails (/usr/local/bundle/bin/rails)
Bundler::GemNotFound: Could not find ast-2.4.0 in any of the sources**

#解決策
**docker-compose build**
 で解決！！

#原因（ここ重要!）
原因によっては対処法が変わってくる。
今回の場合は、前回このアプリを利用した時にgemを追加して
bundle install
したあとに、サーバーの立ち上げしていなかった。

###参考サイト
https://techracho.bpsinc.jp/ebi/2017_05_25/40438
bluetoothキーボードを再接続したときキーリピートがデフォルトに戻ってしまう問題

# はじめに

年末Bluetooth版のThinkPad Keyboardに買い替えたのですが、bluetoothを再接続するたびにキー反応速度がデフォルトに戻ってしまう現象が発生しました。xsetの設定を.xprofileやi3confに入れて起動時に走らせても全く改善しなかったのですが、あれやこれやをやっているうちに昨日ふとできたので、忘れないうちに書き留めておきます。

# 使用環境


- Lenovo ThinkPad X1 Carbon Gen 6
- Linux 5.4.12-1-MANJARO x86_64 GNU/Linux
- i3wm

# bluetoothの自動接続設定

既に出来ている方は飛ばしてください。Arch wikiに書いているように``/etc/bluetooth/main.conf``を編集します。
``AutoEnable=true``のコメントアウトを外すか、新しく追加してください。

[参考：起動後に自動で有効にする](https://wiki.archlinux.jp/index.php/Bluetooth#.E8.B5.B7.E5.8B.95.E5.BE.8C.E3.81.AB.E8.87.AA.E5.8B.95.E3.81.A7.E6.9C.89.E5.8A.B9.E3.81.AB.E3.81.99.E3.82.8B)

# 起動時・スリープ復帰後にキーリピートを設定する

## デバイスの絞り込み：udevの設定

udevを使います。``/etc/udev/rules.d/``に移動して、``95-xset-input-rules``ファイルを作成し、以下を入力します。

```sh
KERNEL=="js0", ACTION=="add", RUN+="/bin/sh -c '/usr/local/sbin/lenovo-keyrepeat'"
```

最初のKERNELやACTIONなど「==」が付いたものは、検索条件で、ここでデバイスを限定します。これには色々な絞り込み方があると思うので、``udevadm monitor``や``udevadm info``を使って絞り込んでください。

参考サイト：
[ デバイス名を固定するのにudevのルールを書いてみた ](https://shrkw.hatenablog.com/entry/20120218/static_device_name_by_udev_rules)
[udevルールの書き方](https://qiita.com/hana_shin/items/16c457eed20e8822cab8)

ちなみに絞り込みがちゃんとできているかのログの見方がわからなかったので、以下のコマンドをスクリプトで実行していました。

```sh
echo 'test' >> /home/<user>/log
```

再接続時にtestが一行だけなら絞り込み成功、二個以上なら絞り込みが不十分、という原始的な判別方法です。

## コマンドの実行

RUN+=以下のスクリプトを記述します。場所は他のところでも大丈夫だと思いますが実行可能にしておく必要はあります。

```sh

#!/bin/bash

sleep 1
export XAUTHORITY="/home/<user>/.Xauthority"
export DISPLAY=:0

/usr/bin/xset -display :0 r rate 200 100
```
``sleep 1``は即時実行すると反応しない場合があるので少し待ちます。3とかにしておくと確実で、徐々に減らしてみると良いかもしれません。
``export XAUTHORITY=``これを入れないだけで一週間以上悩みました。下記リンクが参考になりました。

[udev rule to turn on keyboard backlight](https://unix.stackexchange.com/questions/243339/udev-rule-to-turn-on-keyboard-backlight)

正直これと``export DISPLAY=:0``はなぜ必要なのかはっきりわかっていません。udevの実行は親権限なのでその辺が関係しているのかな、と想像します。

## 実践！

下記のコマンドをrootで実行します。

```sh
udevadm control --reload && udevadm trigger
```

``udevadm control --reload-rules``でも良さそうです。

bluetoothを再接続して少し待つとスピードが変わっています。
内蔵キーボードに比べると即座に打てないのが玉に瑕ですが、そこまで気にはならないので良しとします。
Macでzshからbashへ戻す方法(Mojave, Catalina, Big Sur)

## 最近macOSをCatalinaにあげたらデフォルトがzsh(%)になっていたのでシンプルにbash($)に戻したい

#### 結論

方法は以下の2パターン
[**ターミナルの環境設定から設定を変更**](#手順1-ターミナルの環境設定から設定を変更)
[**＜追記＞ターミナルからコマンド実行で設定を変更**](#手順2-追記ターミナルからコマンド実行で設定を変更)

### 手順1 （ターミナルの環境設定から設定を変更）

1. ターミナルを開き、画面左上の「ターミナル」を開いて
<img width="1440" alt="スクリーンショット 2020-01-22 11.26.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/10bc4db2-cb2c-911e-e772-b0e50496646e.png">

2. 「環境設定」を開いて
<img width="1440" alt="スクリーンショット 2020-01-22 11.28.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/258bbad0-7cf7-adb2-6d0a-e1d4e8bdc9b0.png">

3. 「一般」をクリック！
<img width="1440" alt="スクリーンショット 2020-01-22 11.29.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/73b379d0-807a-7e07-4f41-c91409856469.png">

4. 「開くシェル:」の「コマンド（完全パス）」にチェックして、さらにその下の入力フォームに`/bin/bash`を入力

```terminal
/bin/bash
```
<img width="1440" alt="スクリーンショット 2020-01-22 11.29.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/03b42bd9-802c-d409-2c83-afedc8e04213.png">
5. ターミナルを再起動すると、、、bash($)に切り替わった！！！
<img width="1440" alt="スクリーンショット 2020-01-22 11.32.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/4b4ecfb7-ea22-1970-6075-02b7acff8878.png">

### 手順2 （＜追記＞ターミナルからコマンド実行で設定を変更）

```terminal
$ chsh -s /bin/bash
$ echo $SHELL
```

以上です！

参考記事
https://qiita.com/chat-flip/items/a85df83eaa3c0805aea8
https://mac-ra.com/catalina-zsh/
https://note.com/noelrecords/n/ne3f886e531d6
SourceTree SSH 接続で、ユーザ、パスワード入力をミスってハマった

# 単純パスワード認証のSSH接続でパスワードミスった
　お客さんが設置した VPS に、案件リポジトリがあって、そいつにプッシュしているんです。
　SSHはユーザ・パスワード認証。

　リポジトリパスを入力すれば、ユーザ、パスワードの認証ダイアログでますよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/577d491e-9f89-d13d-665f-6bc426d2b5fd.png)

　素直に手打ちすればよかったんですが、横着してお客さんからもらったパスワードとかを記録しているExcelから直接コピペしたんですよ。
　セルを選択してコピペすると、末尾に改行コードが入るんですよね。

　そのおかげで、Access Denied になっちゃったんですよ・・・
　認証ダイアログもでてくれない。

　ローカルリポジトリ削除してクローンしなおしても、認証情報は記録されちゃっているから、認証やり直せないんですよ。

　最初は原因がわからず、あれやこれや調べても、Github GitLab とかの鍵交換の記事しかでてこないし、困り果てていたんですよ。

# 結論
　SourceTreeがローカルで認証情報やらキャッシュやら保存しているのは考えればわかること。
　そいつを削除しちゃえばいい、ってんでアンインストール。
　これ、ローカル情報ってアンインストールしても残るんですね・・・・・

　ということで手動削除。
　C:\Users\ユーザ名\AppData\Local\Atlassian

　この中を空っぽにしたら、認証ダイアログでました・・・・

　この問題で2時間も使っちゃった・・・
Twitter APIで取得したアイコン画像の大きさを変える【Ruby on Rails】

#はじめに
TwitterAPIの取得にomniauthを使っています。
またomniauthの基本的な使い方については省略しています。
omniauthの基本的な使い方については別記事を参照してください。

###開発環境
Ruby 2.6.1
Ruby on Rails 6.0.1
#Twitterアイコン画像を取得する

```ruby:app/controllers/twitter_controller.rb
class TwitterController < ApplicationController
  # 基本的なomniauthの使い方は省略
  def twitter
    auth_hash = request.env["omniauth.auth"]
    @image_url = auth_hash[:info][:image]
  end
end
```
このままでは**48x48にリサイズされたアイコン画像のURL**を取得してしまいます。
小さい！当然CSSなどで拡大してもボヤボヤになってしまいます。
#大きなTwitterアイコン画像の取得方法
omniauthの設定に使ったファイルを書き換えます。

```ruby:config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter,
  Rails.application.credentials.twitter[:key],
  Rails.application.credentials.twitter[:secret_key],
  # 以下を追加する
  {
    :image_size => "original"
  }
end
```
こうすることによって、本来のサイズでのアイコン画像のURLを取得できます。
#参考
omniauth-twitter(GitHub)：https://github.com/arunagw/omniauth-twitter
Playgroundで動作するミニマムなUIViewControllerのサンプルコード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/d9e25eb4-2723-1985-6ece-2300ab142dc0.png)

```swift
import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = .white

        let label = UILabel()
        label.text = "Hello World!"
        label.sizeToFit()
        label.center = self.view.center
        
        self.view.addSubview(label)
    }
}

PlaygroundPage.current.liveView = MyViewController()
```
routes.rb collectionとmember

プログラミング初心者の備忘録です。

## routes.rbで自作のルーティングを作りたいとき。

collectionとmemberの違いは、idが付けられるかどうか。
以下に例を記載。

### collection
```routes.rb
resources :users do
    collection do
      get "logout" 
    end
end
```

```ターミナル.
$ bundle exec rails routes
logout_users GET    /users/logout(.:format)    users#logout
```

### member
```routes.rb
resources :users do
    member do
      get 'profile'
    end
end
```

```ターミナル.
$ bundle exec rails routes
profile_user GET   /users/:id/profile(.:format)   users#profile
```

### 結果
idを持たせたいかどうかで使い分ける。
django-storage で Google Cloud Storages  へのファイル upload と delete

# 背景
Djangoのライブラリである[django-storages](https://django-storages.readthedocs.io/en/latest/)を使った[Google Cloud Stoarge](https://cloud.google.com/storage/)ファイルのdelete方法を試行錯誤で解決したので、upload方法もふくめてそのメモをまとめておきます。

# 方法
[django-storages](https://django-storages.readthedocs.io/en/latest/backends/gcloud.html)のページに基本的な設定方法が書かれています。

```settings.py
DEFAULT_FILE_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
GS_BUCKET_NAME = 'YOUR_BUCKET_NAME_GOES_HERE'
```

と、

```settings.py
from google.oauth2 import service_account

GS_CREDENTIALS = service_account.Credentials.from_service_account_file(
    "path/to/credentials.json"
)
```

の２点を記述して通常通りモデルを定義しておけばuploadまでは動作します。
以下は画像ファイルのモデル例です。

```models.py
class Image(models.Model):
    image = models.ImageField(upload_to='image/')

    def __str__(self):
        return self.image.name
```

ただ、ここまでだと、レコードを削除してもGoogle Cloud Storageのファイルは消してくれません。これは（二次情報を読んだだけですが）Django自体の設計思想として、Google Cloud Storageを使う場合に限らず、ファイル削除は自分で実装することとしているようです。

その実装にはレコード削除時に呼ばれる関数をデコレータを使って定義する必要があります。
Google cloud consoleでファイル削除すると（本処理時にGoogle Cloud Storage側にファイルが無い場合）エラーが発生するので例外処理を入れています。

```models.py
from django.dispatch import receiver
from google.cloud import exceptions

@receiver(models.signals.post_delete, sender=Image)
def auto_delete_image(sender, instance, **kargs):
    file = instance.image
    try:
        file.storage.delete(name=file.name)
    except exceptions.NotFound as e:
        print(e)
```

環境変数`GOOGLE_APPLICATION_CREDENTIALS`を設定していればgoogle.cloudのモジュールで以下のようにも実装できます。
ただ、この場合google cloudの権限として、`storage.buckets.get`を割り当てておかないとエラーになりました。

```model.py
from google.cloud import storage
from django.conf import settings

@receiver(models.signals.post_delete, sender=Image)
def auto_delete_image(sender, instance, **kargs):
    storage_client = storage.Client()
    bucket = storage_client.get_bucket(settings.GS_BUCKET_NAME)
    blob = bucket.blob(instance.image.name)
    try:
        blob.delete()
    except exceptions.NotFound as e:
        print(e)
```


#補足
Google Cloud Storage側の設定を補足しておきます。しっかり検証していないのですべては不要かもしれませんが私の環境では以下の権限を割り当てたサービスアカウントを発行してます。

- storage.objects.create
- storage.objects.delete
- storage.objects.get
- storage.objects.list
- storage.objects.update


実際の設定方法は公式のリンクを載せておきます。

- [カスタム役割の作成と管理](https://cloud.google.com/iam/docs/creating-custom-roles?hl=ja)
- [サービス アカウントの作成と管理](https://cloud.google.com/iam/docs/creating-managing-service-accounts?hl=ja)
【備忘録】HTML

# 目的
HTML でものを作っている中で、つまづいた内容についての備忘録。
逐次更新の予定。

# 備忘録
## 横並びのメニューバーをヘッダ部分につくりたい
header 部分にリストを作成する。 style でリストを横並びにする。

```html:index.html
<body>
    <header>
        <ul>
            <li><a class="btn_menu" href="contents/profile_en.html" target="main">Profile</a></li>
            <li><a class="btn_menu" href="contents/research_en.html" target="main">Research</a></li>
            <li><a class="btn_menu" href="contents/publication_en.html" target="main">Publication</a></li>
            <li><a class="btn_menu" href="contents/distribution_en.html" target="main">Distribution</a></li>
        </ul>
    </header>
</body>
```

display: inline-block; のところで横並びを定義してる。

```css:style.css
header{
  z-index: auto;
  height: fit-content;
  width: 100%;
  position: relative;
  top: auto;
  background-color: dodgerblue;
  text-align: center;
  z-index: auto;
}

ul {
  overflow: hidden;
  list-style: none;
  margin: 0 auto;
  z-index: auto;
}

ul li {
  display: inline-block;
  padding: 10px 20px 10px 20px;
}
```
GCEからbqコマンド叩いた際に「Insufficient Permission」エラーが出たときの対処法

GCEを立てて、bqコマンドを叩きたかったが

```
# bq ls
# BigQuery error in ls operation: Insufficient Permission
```

というエラーが出て叩けなかった。

原因は
GCEの設定で、CloudAPIアクセススコープでBigQueryが無効になっていたから。
有効にすれば解決

![スクリーンショット 2020-01-22 11.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80769/6460e91f-e775-0d07-9902-73b2452aecb8.png)
ファイル名を一括置換するpowershellスクリプト

# あいさつ
ファイル名を置き換えるpowershellスクリプトを作成しましたので紹介します。第一引数にディレクトリを指定し、その配下にあるファイルに対し、ファイル名に含まれるある文字列を指定した文字列で置換するスクリプトを作りました。簡単に言うと、ファイル名を置換するスクリプトです。引数に関しては実装で数を減らしたりもすることが出来るので、今回はあくまで一例としてみて下さい。置換対象、置換後の文字列は引数で指定しようとも思いましたが、私が普段使う用途だといちいち入力するのがめんどくさいので固定しています。仕事なのでディレクトリ内のファイル名を一括で置換するときの効率化にでもどうぞ。
# ソースコード
```powershell
#置換対象の文字列
$before = "【置換前】"
#置換後の文字列
$after= "【置換後】"
# 1.ディレクトリ(第1引数で受け取る）
$dir = $Args[0]
# 2.ディレクトリのアイテム一覧を取得
$itemList = Get-ChildItem $dir
foreach($item in $itemList)
{
    # 3.ファイルの場合ファイル名を変更する
    if(-not $item.PSIsContainer)
    {
        Get-ChildItem $item.FullName | Rename-Item -NewName { $_.Name -replace $before,$after}
    }
}
```
SudachiPyのユーザー辞書に英単語を入れる場合は全て小文字にする

* Ubuntu 18.04.3 LTS x86_64
* Python 3.8.0
* SudachiPy 0.3.2

GiNZA (v3.1.1)でユーザー辞書を使いたかったのだが、これで困った。

```
Wi-Fi,4786,4786,5000,Wi-Fi,名詞,固有名詞,一般,*,*,*,ワイファイ,Wi-Fi,*,*,*,*,*
```

これだといくらコストを小さくしても認識されず、下の様にしなければならない。

```
wi-fi,4786,4786,5000,wi-fi,名詞,固有名詞,一般,*,*,*,ワイファイ,Wi-Fi,*,*,*,*,*
```

ついでに言うと、GiNZAの場合は`sudachipy ubuild`の際に`-s`で`site-packages/ja_ginza_dict/sudachidict/system.dic`の辞書を指定すれば良さそう。
AWS CDK で VPC を作成する指示をした時に自動で作成されるリソース一覧

# 概要
AWS CDK(Typescript) で、以下のようなコードを書いたときに実際に生成されるリソースを確認した。

```
new ec2.Vpc(this, 'CdkStudyVpc', {
  cidr: "10.1.0.0/16"
})
```

# 作成されたリソース
- Internet Gateway x 1
- Subnet x 6
    - Public Subnet x 3
        - 10.1.0.0/19
        - 10.1.32.0/19
        - 10.1.64.0/19
    - Private Subnet x 3
        - 10.1.96.0/19
        - 10.1.128.0/19
        - 10.1.160.0/19
- NAT Gateway x 3
    - 3つのプライベートサブネット用
- EIP x 3
    - ↑の NAT Gateway 用
- Route Table x 6
    - Private Subnet 用が3つ
        - デフォルトルートは↑で作成した各NAT Gateway に向く
    - Public Subnet 用が3つ
        - デフォルトルートは↑で作成した Internet Gateway に向く