OmniAICreator/Qiita-1.07M huggingface dataset:
【MATLAB】相関係数行列をヒートマップ表示



matlabで相関係数行列をヒートマップで表示する方法を調べたのでシェアします。行列を色付きで表示するアレです。


# 相関係数行列って？


あるデータ$\mathit{\mathbf{x}}=\left\lbrace x_1 ,x_2 ,\cdots ,x_n \right\rbrace$,$\mathit{\mathbf{y}}=\left\lbrace y_1 ,y_2 ,\cdots ,y_n \right\rbrace$があったとき、それぞれの組合せで相関を計算することができます。計算式はwikipediaから以下の通り



```math
r=\frac{\sum_{i=1}^n \left(x_i -\bar{x} \right)\left(y_i -\bar{y} \right)}{\sqrt{\sum_{j=1}^n {\left(x_j -\bar{x} \right)}^2 }\sqrt{\sum_{k=1}^n {\left(y_k -\bar{y} \right)}^2 }}
```


複数のデータ列${\mathit{\mathbf{x}}}_1 ,{\mathit{\mathbf{x}}}_2 ,\cdots ,{\mathit{\mathbf{x}}}_n$があったときにこれら全ての組合せで相関係数を計算して行列化することができます。行列の各要素は次のようになっています。



```math
R\left(i,j\right)=r_{i,j} \;\;\;\;\left(i=1,2,\cdots ,n\right)
```


これが相関係数行列ですね。言わずもがな$R\left(i,j\right)=R\left(j,i\right)$で、$R\left(i,i\right)=1$となります。


# 相関係数行列のmatlabコード


これをmatlabで実現するのは簡単です。とりあえずまずはデータ読み込みます。今回はアヤメです。



```matlab:Code
load fisheriris.mat
size(meas)
```


```text:Output
ans = 1x2    
   150     4

```



4個の説明変数のそれぞれにつき、150個のデータがありますね。




それぞれの説明変数ごとの相関係数行列は次のコードで計算できます。



```matlab:Code
R = corrcoef(meas)
```


```text:Output
R = 4x4    
    1.0000   -0.1176    0.8718    0.8179
   -0.1176    1.0000   -0.4284   -0.3661
    0.8718   -0.4284    1.0000    0.9629
    0.8179   -0.3661    0.9629    1.0000

```



これで各変数の相関係数行列ができました。3番目と4番目の変数の相関がめちゃくちゃ高いですね。まぁ相関は単に線形の関係があるかどうか見ているだけなので必ず散布図を見ることを忘れてはいけないとは思います。



```matlab:Code
% おまけ
plotmatrix(meas)
```

![figure_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202697/011db34c-c5d1-4003-2870-eab43e1ebb34.png)




これをみると4番目要らなくないですかね。


# 行列をヒートマップとして可視化


こちらにはheatmap関数というのがありました。



```matlab:Code
h = heatmap(R);
```


![figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202697/aece378a-e316-8d8c-393a-424e99778a80.png)


# ・・・色がイケてない


青が相関maxってなんか逆な感じしませんかね…。カラーマップももちろんいじれます。



```matlab:Code
h.Colormap = parula(64);
```


![figure_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202697/7ec9c2da-24e0-692e-697b-f398a17b382a.png)



初めて使ったので知りませんでしたが、GUIで行、列の入れ替えができるんですね~。



![heatmap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202697/476cb544-5e7b-0adb-37bc-cb412564d2e5.gif)

# 追記(2020/7/2)
@sanmojih さんからコメントいただきました。色の範囲を指定することと、負の相関も相関アリとしてヒートマップでわかるようにすることで、さらに見やすく誤解がない可視化となります。

```matlab:Code
h.ColorLimits = [-1,1];
h.Colormap = [flipud(parula(64));parula(64)]; % parulaの場合
```
<img width="373" alt="colored_flipped.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202697/c922fea3-7b4a-45d6-6794-6eb84c5556e9.jpeg">


# おわりに
ちょっと調べた内容のシェアでした。今回は短めです。

# 謝辞
いつも通り、[eigsさん](https://qiita.com/eigs)の[livescript2markdown](https://github.com/minoue-xx/livescript2markdown/blob/master/doc/README_JP.md)使わせていただいてます。
UnityでXBOXコントローラーを振動させる

忘れそうなので自分用メモとして残しておきます。
Unity 2019.4で確認済みです。

今回はこちらの**XInputDotNet**というライブラリを使用させていただきました。
とても助かりました。感謝。
https://github.com/speps/XInputDotNet.git


## 手順
https://github.com/speps/XInputDotNet/releases

上にある最新のunityPackageをプロジェクトにインポートして

```c#:VibrationTest.cs
XInputDotNetPure.GamePad.SetVibration(0,5,5);
```
この一行で振動してくれました。お手軽。
左右別々のモーターをそれぞれ動かすことができるようです。
## 例

例えばこんな風にテスト用のスクリプトを書いてみました。

```c#:VibrationTest.cs
using System.Collections;
using UnityEngine;
using XInputDotNetPure;

public class VibrationTest : MonoBehaviour
{
    [SerializeField] float right_power = 1;
    [SerializeField] float left_power = 1;
    [SerializeField] float duration = 0.5f;

    void Update()
    {
        if (Input.GetButtonDown("Fire1"))
        {
            StartCoroutine("RightVibration");
        }

        if (Input.GetButtonDown("Fire2"))
        {
            StartCoroutine("LeftVibration");
        }
    }

    IEnumerator RightVibration()
    {
        GamePad.SetVibration(0, 0, right_power);
        yield return new WaitForSecondsRealtime(duration);
        GamePad.SetVibration(0, 0, 0);
    }

    IEnumerator LeftVibration()
    {
        GamePad.SetVibration(0, left_power, 0);
        yield return new WaitForSecondsRealtime(duration);
        GamePad.SetVibration(0, 0, 0);
    }

}

```


今のところ0をセットすることで振動を止めていますが、これでいいのでしょうか…

## 参考

[【Unity】ゲームパッドを振動させてみる](https://www.urablog.xyz/entry/2016/07/18/203910)
windows 10 企業版で仮想環境を作る手順

## システム環境
1. Windows 10企業版
2. OS Ver: 1809
3. 仮想マシン:VMWARE workstation player14
4. 仮想イメージ：centos 6


## 手順
1. virtualizationを有効にします(BIOS)
2. Windows Defender Credential Guardを無効にする (powershellのツール提供あり、参考２）
3. Hyper-Vを無効にする(CPUはAMDの場合)

### 参考
1. https://support.microsoft.com/en-us/help/3204980/virtualization-applications-do-not-work-together-with-hyper-v-device-g
2. https://docs.microsoft.com/en-us/windows/security/identity-protection/credential-guard/credential-guard-manage
safari(ios)でMediaRecorderを使う

#前提
使用デバイス等の説明
##機種
iPad 13.5.1
safari
##実現すること
MediaRecorderを使おうと調べたらSafari未対応という記事しかない
が、iosでMediarecorderを使うことができるっぽいことを見つけたので
まとめておく


#方法
方法としては非常に簡単である
>①設定を開く
②Safariの項目を開く
③詳細の項目を開く
④Experimental Featureを開く
⑤MediaRecorderをオンにする

試用機能なのかな？詳しくはわからないが、これで使えるはずです。
RHEL8 でhttpd(Apache)のロケール(LANG)を変える

# 状況
wsgi＋Apache(httpd）でpythonのサービスを動かしたいが、エラーで動かない
ぐぐってもRed Hat系の情報が無い・古い

# 環境
- python 3.7
- mod-wsgiはpip3でインストール

```sh
# cat /etc/redhat-release
Red Hat Enterprise Linux release 8.2 (Ootpa)
```
```sh
# httpd -v
Server version: Apache/2.4.37 (Red Hat Enterprise Linux)
```

# エラー
`tail /var/log/httpd/error_log`

```sh
UnicodeDecodeError: 'ascii' codec can't decode byte 0xc2 in position 205: ordinal not in range(128)
```
ASCIIじゃないと怒られる。
スクリプトや設定ファイルはutf-8なので当たり前である

# NG例
- ` /etc/sysconfig/httpd` に`HTTPD_LANG=ja_JP.utf8 ` を書く

そもそもファイルがない。
書いても読み込まれない。

- ` /etc/rc.d/init.d/httpd` に`export LANG=ja_JP.utf8 ` を書く

そもそもファイルがない。
RedHatは7以降init.d系からsystemctl系に移行しているので、
古いバージョンを想定した上記方法では意味がない。（ここでだいぶ嵌った。。）

# OKパターン
まずは起動設定を確認

```sh
# systemctl status httpd
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
```

サービスファイルの場所が分かったので
` vi /usr/lib/systemd/system/httpd.service`

```
# Modifying this file in-place is not recommended, because changes
# will be overwritten during package upgrades.  To customize the
# behaviour, run "systemctl edit httpd" to create an override unit.

# For example, to pass additional options (such as -D definitions) to
# the httpd binary at startup, create an override unit (as is done by
# systemctl edit) and enter the following:

#       [Service]
#       Environment=OPTIONS=-DMY_DEFINE
```

直接書くんじゃねー！ってことらしい(´・ω・｀)
ので言われたとおりに
`systemctl edit httpd`
すると一時ファイルっぽいのが作られるので、

```sh
[service]
Environment=LANG='ja_JP.UTF-8'
```

保存して、`systemctl restart httpd` 
サイトを再読み込みして`tail /var/log/httpd/error_log`

```
PermissionError: [Errno 13] Permission denied:
```
まだエラー出てるけど、とりあえず文字コードはクリア！
php 標準入力の値をforeach文で表示


#個人学習用にメモ

標準入力の値を、foreach文で表示する。
※あとでまとめる用


```php 
$input_line = fgets(STDIN);
    while($input_line = trim(fgets(STDIN))){
        $array[] = explode(" ",$input_line);//２次元配列で横の行を読み込み
    }
    
    print_r($array);
    
    foreach ($array as $key1 => $value1) {
      foreach ($value1 as $key2 => $value2) {
          if ($key2 == 1){
               $value2 = $value2 + 1;//$key2が「１」なら、要素に＋１の処理
               print $value2 . "\n"; 
     }else{
          echo $value2." ";//$key2が「０」なら、要素＋スペースで表示する
       }
      }
    }
```

メモ：
外側のforeachが「[0] => Array」の部分をまわす。
内側のforeachが「[0] => tanaka」の部分をまわす。

```
Array
(
    [0] => Array
        (
            [0] => tanaka
            [1] => 20
        )

    [1] => Array
        (
            [0] => kondo
            [1] => 10
        )

    [2] => Array
        (
            [0] => honda
            [1] => 30
        )

)
tanaka 21
kondo 11
honda 31

```
Linuxのリダイレクト vol.3

リダイレクトの3つ目、まとめ。
今までのをテーブルに。


| 演算子（記号）       |       意味 | 
|:-----------------|------------------:|
| >             |              標準出力の出力先を指定 | 
| >>            |            標準出力の出力先を指定し標準入力出力先に追記 |       
| << (終了文字)            |              後に文字を入力すると、自動に入力が終わる | 
| >& dev/null              |               呼び出せない | 

これ全部左寄りに統一できないのかな、見栄え悪すぎ
MacにGitをインストールする

# 最終更新日

2021年4月28日

検証を行ったmacOSのバージョンは下記です。この手順はIntel版Mac・Apple Silicon版Mac両方で共通です。

- macOS Big Sur 11.3

インストールするもののバージョンは下記です。

- Git 2.30.0

> この記事が古くなった場合、下記の手順は最新のインストール手順とは異なっている可能性があります。

# インストール方法は2つ
次の2つからお好きな方を選んでください。

1.の方が簡単です。ただし、1.でインストールされるGitはちょっとバージョンが古いことが多いです。

常に最新のGitを使いたい場合は2.を選んでください。

1. App StoreからXcodeまたはXcode Command Line Toolsをインストールすれば、Gitが付属しています
    - Xcode Command Line Toolsは、Homebrewのインストール時にインストールされます。Homebrewのインストールは https://brew.sh/ に載っているコマンドをターミナルにコピペして実行するだけです。
2. Homebrewを使う（ターミナルで `brew install git` を実行）

インストール完了後、 `git --version` を実行してGitのバージョンが表示されれば、インストールは成功です。

# Git LFSのインストール
[Git LFS](https://github.com/git-lfs/git-lfs)は、Gitでサイズの大きなファイル（画像など）を扱うための拡張機能です。

(1) ターミナルで `brew install git-lfs` を実行してください。

> もしうまく実行できなかった場合は `brew update` を実行後、もう一度試してみてください。

(2) ターミナルで `git lfs install` を実行してください。
HTMLとCSSで表現するツールチップ

HTMLとCSSだけでツールチップ（マウスオンしたら出てくる注釈みたいなやつ）を作ります。

#HTML

```html:HTML
<span class="c-tooltip" data-tooltip="ツールチップの内容">マウスホバーでツールチップを表示</span>
```
今回は`span`タグで囲っているけど何でも良い。文字だけじゃなくてアイコン画像などでも良い。
`data-tooltip`というカスタムデータ属性を作成、その中にツールチップに表示したい内容を入力してくださいね。

[data-* - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)


#CSS

ポイントは`::after`要素にHTMLで設定したカスタムデータ属性のを`attr(data-tooltip)`で呼び出すこと。
これ便利だなー


```css:CSS

/* マウスオンする要素とツールチップを横並びにする */
.c-tooltip {
	display: inline-block;
	position: relative;
}

/* ツールチップ共通の設定 */
.c-tooltip::before,
.c-tooltip::after {
	-webkit-transition: all 0.2s;
	opacity: 0;
	position: absolute;
	transition: all 0.2s;
	visibility: hidden;
	z-index: 11;
}

/* ツールチップ吹き出しのひげ */
.c-tooltip::before {
	-webkit-transform: translateY(-50%);
	border-color: transparent #5f6368 transparent transparent;
	border-style: solid;
	border-width: 3px 7px 3px 0;
	content: "";
	height: 0;
	left: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
	width: 0;
}

/* ツールチップ吹き出しの本体 */
.c-tooltip::after {
	-webkit-transform: translateY(-50%);
	background: #5f6368;
	border-radius: 3px;
	color: #fff;
	content: attr(data-tooltip); /* ここでdata-tooltipの内容を呼び出しているよ */
	display: block;
	font-size: 11px;
	font-weight: 600;
	left: calc(100% + 13px);
	padding: 5px 10px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
}

/* マウスオンしたときのカーソルの設定 */
.c-tooltip:hover {
	cursor: pointer;
}

.c-tooltip:hover::before {
	opacity: 1;
	visibility: visible;
}

.c-tooltip:hover::after {
	opacity: 1;
	visibility: visible;
}

```

以上です。完成データはこちらです。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="nagomi-753" data-slug-hash="oNbGVXN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="simple Tooltip">
  <span>See the Pen <a href="https://codepen.io/nagomi-753/pen/oNbGVXN">
  simple Tooltip</a> by nagomi-753 (<a href="https://codepen.io/nagomi-753">@nagomi-753</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Docker基本コマンド

![mono-horizontal.png](https://qiita-image-store.s3.amazonaws.com/0/282414/0c7354e5-d08c-9211-66ca-11b8eadc759e.png)

# はじめに
Dockerについての記事は沢山ありますが
自分用の忘備録です。
覚えたコマンドは随時追加

###コンテナの起動/再起動
```terminal
docker start [コンテナ識別子]
```
###コンテナの停止
```terminal
docker stop [コンテナ識別子]
```
###コンテナの削除
```terminal
docker rm [コンテナ識別子]
```

###コンテナを作って中に入る
```terminal
docker run -it [イメージ名] bin/sh
```

##コンテナの名前を変えるコマンド
```terminal
docker rename [古いコンテナ名][新しいコンテナ名]
```

#Docker-compose build

```
docker-compose build
```

imageを作成・Pullするコマンド


#docker-compose run
```
docker-compose run (サービス名) （コマンド）
example: docker-compose run --rm app bash 
```
コンテナを起動して、コマンドを実行することができる。
-rm を追加することによって、コマンドを実行した後に、
コンテナを削除します。

docker-compose　up する前などに、一時的にコンテナ内に入り
コマンドを実行したい時などに便利です。

#docker-compose exec
```
docker-compose exec (サービス名) (コマンド名)
example: docker-compose exec app bash
```

これは、稼働中のコンテナに入りコマンドを実行するための物です。


#docker-compose run
```
docker-compose up
```
このコマンドを実行すると、
docker-compose.ymlで記述した通りにコンテナを作成し、
コンテナ同士を繋げて起動をします。

-d をオプションとしてつけることで、バックグラウンドでコンテナを起動します。
TextBox.InputScope  Property値によるタッチキーボードの差

# TextBox.InputScopeのProperty値によるタッチキーボードの差

[参照URL](https://docs.microsoft.com/en-us/windows/uwp/design/input/use-input-scope-to-change-the-touch-keyboard)

## 評価環境
- Surface Pro 
- Windows 10
- .NET Core 3.1.301
- WPF desktop app
- VS2019

[こちら](https://docs.microsoft.com/en-us/windows/uwp/design/input/use-input-scope-to-change-the-touch-keyboard)のページには
**CurrencyAmountAndSymbol**,**Number**,**TelephoneNumber**を指定した場合のSIP(Soft Input Panel = Touch Keyboard)の例が画像で挙がっている。
Property値に Digit を指定した場合も　それらと同じだった。記号なしで数値のみ入力できるとベターなのだが。自前で作るしかない？
jQuery.ajax : fail(jqXHR, textStatus, errorThrown)

# jQuery.ajax : fail

jQuery の `$.ajax` による非同期通信は、レガシーな開発対象では大変有用です。

エラーハンドリングの必要性を考慮し `.fail` に渡ってくる引数と、その内容を実装ベースで調べました：

```
.fail(function(jqXHR, textStatus, errorThrown) {
  // jqXHR
  //  .status: 500
  //  .statusText: "Internal Server Error"
  //  .responseJSON: {
  //    "StatusCode": 500,
  //    "Message": "Something went horribly, horribly wrong while servicing your request.",
  //    "Details": "Nancy.RequestExecutionException: Oh noes! ---> System.NullReferenceException: オブジェクト参照がオブジェクト インスタンスに設定されていません。\r\n   場所 ..."
  //  }
  //  .responseText: "{"StatusCode":500,"Message":"Something went horribly, horribly wrong while servicing your request.","Details":"Nancy.RequestExecutionException: Oh noes! ---> System.NullReferenceException: オブジェクト参照がオブジェクト インスタンスに設定されていません。\r\n   場所 ..."
  //  .getAllResponseHeaders(): "cache-control: no-store, no-cache, must-revalidate\r\nconnection: close\r\ncontent-type: application/json; charset=utf-8\r\ndate: Tue, 30 Jun 2020 05:02:13 GMT\r\nexpires: Thu, 19 Nov 1981 08:52:00 GMT\r\nlink: </add-addr.xml>; rel=\"application/xml\"\r\npragma: no-cache\r\nserver: Apache/2.4.41 (Win32) mod_fcgid/2.3.10-dev\r\ntransfer-encoding: chunked\r\nvary: Accept\r\nx-powered-by: PHP/7.4.2\r\n"
  // textStatus: "error"
  // errorThrown: "Internal Server Error"
});
```

- jqXHR は略称とのことで (`The jQuery XMLHttpRequest (jqXHR) object`) 
  XMLHttpRequest オブジェクトのスーパーセットとの説明があります (`a superset of the browser's native XMLHttpRequest object.`)
- `textStatus` と `errorThrown` は、両方とも `string` でした。

参考:

- [XMLHttpRequest - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
- [jQuery.ajax() | jQuery API Documentation](https://api.jquery.com/jQuery.ajax/#jqXHR)
elastic beanstalk 備忘録

<img width="1032" alt="スクリーンショット 2020-06-30 14.39.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417196/0120f426-aa67-7730-d69a-a2c4ab0e0a28.png">
![スクリーンショット 2020-06-30 13.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417196/adf3a021-c20a-f92b-7ea6-9f40d191e6b4.png)
CSSを使ってタブの見た目だけを作る

このような見た目のタブをHTMLとCSSで作成します。見た目だけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365187/de6273b1-2d86-af7d-c0f0-4cd96cd577dd.png)

#HTML

まずはHTMLから。

```html:HTML

<!-- tab -->
<div class="c-tabs_wrap">
    <ul class="c-tabs_list">
        <li class="c-tabs_item is-current"><span>アクティブなタブ</span></li>
        <li class="c-tabs_item"><a href="">クリックできるタブ</a></li>
        <li class="c-tabs_item"><a href="">クリックできるタブ</a></li>
        <li class="c-tabs_item is-disabled"><span>使用できないタブ</span></li>
        <li class="c-tabs_item is-disabled"><span>使用できないタブ</span></li>
    </ul>
</div>
<!-- ./tab -->

```

ポイントは`.is-current`や`.is-disabled`をつけるだけでタブの見た目を変えること。JSで制御しやすくなります。
`c-tabs_wrap`は今回は特に使用しませんが全体の余白の設定とかで使うと良いかもしれませんね。

#CSS

###タブ全体のレイアウト

まずはタブアイテムを横並びにします。
flexboxを使用するとタブアイテム内のテキストの行数に関係なく高さを揃えることができます。

```css:CSS
/* タブアイテムを横並びにする */
.c-tabs_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
}
```

タブグループの下部にグレーの線をひきます。疑似要素を使って線を作り、z-indexの設定もしておきます。

```css:CSS
/* タブグループの下部にグレーの線をひく */
.c-tabs_list::after {
	background-color: #8598a7;
	bottom: 0;
	content: "";
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}
```


###タブアイテムの基本デザイン(青い背景のやつ)

タブアイテムの基本デザインを設定します。
flexboxを使用しているのは、文字を常に上下中央に配置したいから。こうすることにより、もしタブ内のテキストが2行になっても大丈夫。

```css:CSS
/* タブアイテムの形状を設定 */
.c-tabs_item {
	border-radius: 5px 5px 0 0;
	margin-right: 5px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

/* タブアイテムのデザインを設定 */
.c-tabs_item a,
.c-tabs_item span {
	-ms-flex-direction: column;
	-ms-flex-pack: center;
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-webkit-box-pack: center;
	background-color: #004bb1;
	border: 1px solid #004bb1;
	border-bottom-color: #fff;
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	font-size: 1.3rem;
	font-weight: 600;
	height: 100%;
	justify-content: center;
	line-height: 1.2;
	min-height: 2.8em;
	min-width: 8em;
	padding: 0.3em 0.8em;
	text-align: center;
	text-decoration: none;
	width: 100%;
}
```


リンクが貼られているタブアイテムにマウスオンした場合の設定も入れておきましょう。

```css:CSS
/* マウスオン時の設定 */
.c-tabs_item a:hover {
	opacity: 0.6;
}
```

###アクティブなタブのデザイン

アクティブタブのデザインの設定を行います。`is-current`クラスを付与したときのデザインです。
z-indexの値を他の要素よりも大きくして、一番手前に持ってくることで、いい感じにグレーの下線を隠してくれますよ。

```css:CSS
/* 要素を一番手前に持ってくる */
.c-tabs_item.is-current {
	z-index: 11;
}

/* タブのデザイン設定 */
.c-tabs_item.is-current::before {
	background-color: #004bb1;
	content: "";
	display: block;
	height: 4px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.c-tabs_item.is-current span {
	background-color: #fff;
	border: 1px solid #8598a7;
	border-bottom-color: #fff;
	color: #004bb1;
}
```

###使用できないタブ（グレーアウトしてるやつ）

最後に使用できないタブのデザインを設定します。

```css:CSS
.c-tabs_item.is-disabled span {
	background-color: #dbe0e5;
	border: 1px solid #c7cfd8;
	border-bottom-color: #fff;
	color: #5f6368;
}
```

これで完成です。文字の長さや行数が変わっても大きく崩れることはありません。
HTMLはなるべくシンプルに、CSSはなるべく柔軟性をもたせて書くのが大事です。

このHTMLをもとに、さくっと切り替えができるJSもそのうち書こうと思います。以上です。
【コピペ】CentOS8で作るPHP8環境

# 前置き
[PHP8.0.0α1がリリースされたのでさっそくJITの威力を体感する(した)](https://qiita.com/rana_kualu/items/73c346b3feadfa3a5b21)

これ試したかったんですが、centos8でやりたかった。

[CentOS8で、PHP8のインストール。](https://qiita.com/IiToshihide/items/efc80ed6be4e1fcbaa01)

で、これをコピペしようとしたら、ちょこちょこライブラリでつまずいた。

あれこれ調べた結果、コピペ手順ができたので、載せておこうと思いました。

OPCache/JIT周りは上の記事読んでどうぞ。

# 諸準備
```
dnf update -y

dnf install -y git wget tar sqlite* libxslt* gcc gcc-c++ make autoconf automake bison
```

# re2c

最新をチェック

```
cd /usr/local/src

wget https://github.com/skvadrik/re2c/releases/download/1.3/re2c-1.3.tar.xz

tar Jxfv re2c-1.3.tar.xz

cd re2c-1.3

./configure

make

make install

re2c -v
```

# PHP8
```
cd /usr/local/src

git clone https://github.com/php/php-src.git

cd php-src

./buildconf

./configure

make

make install

php -v
```
[Ruby] CSVファイルをYaml（Yml）に変換する方法

#### 手順

１、requireメソッドでRubyの標準ライブラリの[csv](https://docs.ruby-lang.org/ja/master/library/csv.html)と[yml](https://docs.ruby-lang.org/ja/master/library/yaml.html) を読み込む。

```
require 'csv'
require 'yaml'
```


２、`CSV.read(path_to_csv, :headers => true)`を実行すると、CSV::tableクラスのインスタンスが返ってくる。
`map`メソッドで要素（CSV::Rowクラスのインスタンス）を一つずつ取り出し、その要素を`to_h`メソッドでハッシュ化する。mapメソッドの返り値は配列となるため、ハッシュを要素とした配列が作成される。今回`：header => true`オプションを付け加えたことでハッシュのkey名がCSVのカラム名になっているところがポイント。

```
hash_arr = CSV.read(path_to_csv, :headers => true).map(&:to_h)
=>[{"region_id"=>"1", "country_id"=>"1", "region_name"=>"北海道"}, {"region_id"=>"2", "country_id"=>"1", "region_name"=>"青森県"},...]
```



３、pathで指定されたファイルを書き込みモードでオープンし、２のハッシュを要素とする配列をYamlに変換して保存。

```
File.open(path_to_yaml, 'w') { |f| f.write(hash_arr.to_yaml) }
```

追記：以下でも同様の書き込みができるらしい。コメントありがとうございます！

```
IO.write path_to_yaml, hash_arr.to_yaml
```


#### P.S
ここからは余談ですが、DBで基本的に値が変更されないテーブル（国や地域）を管理していたので、それをActiveYamlで管理するために今回の変換しました。ActiveYamlで管理してもActiveRecordのようにテーブルを操作すること（allやfindなどのクラスメソッドが使える）ができるので便利です。
windowsでiverilog その38

#概要

windowsでiverilogやってみた。
float32やってみた。
乗算やってみた。

#使用したライブラリー

https://github.com/danshanley/FPU

#テストベンチ

0.2 * 0.5
期待値　3dcccccd

```
module test();
	wire [31:0] out;
	wire [31:0] a = 32'h3e4ccccd;
	wire [31:0] b = 32'h3f000000;
	multiplier u(.a(a), .b(b), .out(out));
	initial
	begin
		$monitor("%h %h %h", a, b, out);
	end
	initial
	begin
		#10
			$finish();
	end
endmodule
```

結果

```
3e4ccccd 3f000000 3dcccccd
```


以上。
GCP ArtifactRegistry で Private NPM Registry を使う

# GCP ArtifactRegistry で Private NPM Registry を運用してみよう

- 2020/06/30現在、npmの利用はAlpha版のみ
    - Alpha版参加のためにはアンケート記入を求められる
    - 記入した翌日には、メールが届いて、npmが選択可能になった
- とてもお手軽に使えたよ
- AWS CodeArtifact とは違い、 UserScope (~/.npmrc) を汚染せずに使えたよ

## 例
以下のパッケージを publish / install してみます

```json:package.json
{
  "name": "@mycompany/great-project",
  "version": "0.4.11",
  ...
}
```

## リポジトリを作る

https://console.cloud.google.com/artifacts/create-repo

- 名前:仮に `myrepositry` としよう。

## プロジェクトへの設定

- 作成したリポジトリを選択し、「設定の手順」にしたがう

### .npmrc の追記

```.npmrc
@SCOPE=https://asia-northeast1-npm.pkg.dev/<YOUR_PROJECT>/<YOUR_REPOSITRY>/
//asia-northeast1-npm.pkg.dev/<YOUR_PROJECT>/<YOUR_REPOSITRY>/:_password=""
//asia-northeast1-npm.pkg.dev/<YOUR_PROJECT>/<YOUR_REPOSITRY>/:username=oauth2accesstoken
//asia-northeast1-npm.pkg.dev/<YOUR_PROJECT>/<YOUR_REPOSITRY>/:email=not.valid@email.com
//asia-northeast1-npm.pkg.dev/<YOUR_PROJECT>/<YOUR_REPOSITRY>/:always-auth=true
```

- @SCOPE: ここでは、 `@mycompany` となりますね
- <YOUR_PROJECT＞ : GCP Project 名
- <YOUR_REPOSITRY＞ : 作成したリポジトリ名 (myrepositry)

### npm scripts の追記

```package.json
scripts: {
  "artifactregistry-login": "npx google-artifactregistry-auth .npmrc"
}
```

- "prepublish" に入れればいいんじゃないのと思って試したけど、上記のように別コマンドにしないと動きません
- (prepublish に入る前の .npmrc が参照されるみたい)

## publish

```sh
$ npm run artifactregistry-login
# ここで .npmrc を見ると、 _password が更新されていることがわかる
$ npm publish
> ...
> + @mycompany/great-project@1.0.0
```

:tada::tada::tada:

## install

(install先へも .npmrc / scripts 設定を行ったうえで)

```sh
$ npm run artifactregistry-login
$ npm install
> ...
> + @mycompany/great-project@0.4.11
```

:tada::tada::tada:

## CI/CD 環境で npm install する方法

サービスアカウントを使う方法が[公式](https://www.npmjs.com/package/google-artifactregistry-auth)に書いてあった

- ServiceAccount を作る
    - 「Artifact Registry 読み取り」 ロールを付与
- JSONキーをダウンロードして環境に配置

```sh
export GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account-key.json
npm run artifactregistry-login
npm i
```
vue-code-highlight 使い方

https://www.npmjs.com/package/vue-code-highlight

ここに書いてあるとおりなんだが、
コードの色を変更する方法がわからなかった。

ということで、 node_modules の css を読み込もう。

```

    import "vue-code-highlight/themes/prism.css";


```

これだけ。
phpMyAdminのAI（オートインクリメント）とPDOの意味

phpを使った開発をしながらログイン機能を搭載するために、phpMyAdminおよびデータベースの利用に関する単語で分からなかったもの二つ（AIとPDO）を調べてみました！

##AI（オートインクリメント）

AUTO_INCREMENTを略して、**AI**と言います。

整数か浮動小数点数のデータ型のカラムに対して設定可能なもので、自動にてそれぞれのデータに固有の番号を割り当ててくれる。データ管理には欠かせない機能です。

**AUTO_INCREMENT**をカラムに設定する際、以下の二つを設定します。

- PRIMARY KEY（主キー）
- UNIQUE KEY（ユニークキー）

設定方法として、AUTO_INCREMENTとPRIMARY KEYの二つを利用して、連番を付けますね。

##PDO

『PDO』とは『PHP Data Objects』の略です。

PDOを使うにあたって、いろいろありますが、例として以下のものがあります。

```
       // エラーのリポート => 例外を投げる
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,

       // デフォルトのフェッチモードを設定 => 
　　　　// 結果セットに 返された際のカラム名で添字を付けた配列を返す
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
```

参照
[PDO::ATTR_ERRMODE](https://www.php.net/manual/ja/pdo.setattribute.php)
[PDO::ERRMODE_EXCEPTION](https://www.php.net/manual/ja/pdo.error-handling.php)
[PDO::ATTR_DEFAULT_FETCH_MODE](https://www.php.net/manual/ja/pdo.setattribute.php)
[PDO::FETCH_ASSOC](https://www.php.net/manual/ja/pdostatement.fetch.php)

##まとめ

一回では理解できないから、何度もデータベースを利用して使っていけば、自由自在に扱えますね！
PHPでメッシュコード（最大8分の1）から中心点を取得する

PHPでメッシュコードの中心点を取るコードが以下です。
呼び出すのは `coordinateFromMeshCode($mesh_code)` で引数にメッシュコードを入れればOKです。
4分の1などを出したい場合は末尾の数字を削っていけばOKです。
その際中心出す距離も適宜変更が必要です。

```php
function coordinateFromMeshCode($mesh_code) {
    $first_coordinate = $this->first($mesh_code);
    $second_coordinate = $this->second($mesh_code);
    $third_coordinate = $this->third($mesh_code);
    $forth_coordinate = $this->forth($mesh_code);
    $fifth_coordinate = $this->fifth($mesh_code);
    $sixth_coordinate = $this->sixth($mesh_code);
    $lat = ($first_coordinate[1] + $second_coordinate[1] + $third_coordinate[1] + $forth_coordinate[1] + $fifth_coordinate[1] + $sixth_coordinate[1]) / 3600;
    $lon = ($first_coordinate[0] + $second_coordinate[0] + $third_coordinate[0] + $forth_coordinate[0] + $fifth_coordinate[0] + $sixth_coordinate[0]) / 3600;

    $center_lat = $lat + 3.75 / 3600 / 2;
    $center_lon = $lon + 5.625 / 3600 / 2;
    return [$center_lat, $center_lon];
}

private function first($mesh_code) {
    $lat = substr($mesh_code, 0, 2);
    $lon = substr($mesh_code, 2, 2);
    return [(intval($lon) + 100) * 3600, $lat / 1.5 * 3600]; // 3600をかけて秒に直す
}
  
private function second($mesh_code) {
    $lat = substr($mesh_code, 4, 1);
    $lon = substr($mesh_code, 5, 1);
    return [$lon * 7.5 * 60, $lat * 5 * 60]; // 60をかけて秒に直す
}

private function third($mesh_code) {
    $lat = substr($mesh_code, 6, 1);
    $lon = substr($mesh_code, 7, 1);
    return [$lon * 45, $lat * 30];
}

private function forth($mesh_code) {
    $forth = substr($mesh_code, 8, 1);
    if ($this->is_south($forth)) {
        $lat = 0;
    } else {
        $lat = 15;
    }

    if ($this->is_west($forth)) {
        $lon = 0;
    } else {
        $lon = 22.5;
    }
    
    return [$lon, $lat];
}

private function fifth($mesh_code) {
    $fifth = substr($mesh_code, 9, 1);
    if ($this->is_south($fifth)) {
        $lat = 0;
    } else {
        $lat = 7.5;
    }
    
    if ($this->is_west($fifth)) {
        $lon = 0;
    } else {
        $lon = 11.25;
    }
    
    return [$lon, $lat];
}

private function sixth($mesh_code) {
    $sixth = substr($mesh_code, 10, 1);
    if ($this->is_south($sixth)) {
        $lat = 0;
    } else {
        $lat = 3.75;
    }

    if ($this->is_west($sixth)) {
        $lon = 0;
    } else {
        $lon = 5.625;
    }
    
    return [$lon, $lat];
}

private function is_south($code) {
    if ($code == 1 || $code == 2) {
        return true;
    }
    return false;
}

private function is_west($code) {
    if ($code == 1 || $code == 3) {
        return true;
    }
    return false;
}
```
PowerApps とPowerAutomate を使用して HTML から PDF を生成する時の注意

https://youtu.be/bfXV_GXc_JM

↑↑このやり方を真似して、Power Apps のGallery の内容を Power Automate を使って HTML から PDF 化する際の注意点。

Power Automate で読み込む際に、HTML の中に「日本語表記」が入っているとエラーになる。
https://powerusers.microsoft.com/t5/Building-Flows/PowerAutomate-Convert-file-with-path-HTML-to-PDF-Error-400/m-p/609545#M80599

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573860/d84f9454-86d8-8f0c-b84d-90c3d7b62864.png)
日付をjson形式で送ってxcodeで日本語形式に表示例「ISO8601形式（iOS10.0以上）」

Json形式

```php
date('Y-m-d',mktime(0, 0, 0, $month, $i, $year))."T00:00:00+00:00"
```


xcode文

```xcode
                        let datew = json["calendar"][i]["date"].string
                        print("datew")
                        print(datew)
                        
                        let datewx = datew!
                        // iOS10.0以上ならズバリのフォーマッターが使える
                        let iso8601DateFormatter = ISO8601DateFormatter()
                        // 変換
                        let date = iso8601DateFormatter.date(from: datewx) // 拡張形式
                        
                        
                        print("datew日付変換")
                        print(date)
                        
                        
                        let dateFormatter = DateFormatter()
                        // フォーマット設定
                        dateFormatter.dateFormat = "yyyy'年'M'月'd'日" // 曜日1文字
                        //dateFormatter.dateFormat = "M'月'd'日 ('EEEE')'" // 曜日3文字
                        
                        // ロケール設定（日本語・日本国固定）
                        dateFormatter.locale = Locale(identifier: "ja_JP")
                        
                        // タイムゾーン設定（日本標準時固定）
                        dateFormatter.timeZone = TimeZone(identifier: "Asia/Tokyo")
                        
                        // 変換
                        let str = dateFormatter.string(from: date!)
                        
                        print("datew変換後")
                        // 結果表示
                        print(str) 
                
                
                    }
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622660/54fd75ee-8642-c309-a15e-6a64ad6776ab.png" width="50%">

参考リンク先
String ⇒ Date 変換のISO8601形式（iOS10.0以上）を参考
https://www.2nd-walker.com/2020/01/14/swift-date-string-convert/
ブラウザが認識できる言語に変換する仕組み

##高級言語と低級言語

**・高級言語**
高級言語は、機械よりも人間が理解しやすいように設計されたプログラミング言語のことです。
また、「高級」とは優れた言語という意味ではなく、機種やOSなどに固有の要素を抽象度の高い記述が可能であることを表しており、アプリケーションソフトの開発などに用いられる言語の多くは高級言語に分類されるから「高級」という表現を用いています。

**・低級言語**
機械が認識しやすい言語は低級言語と呼ばれます。
「低級」とは劣った言語であることを意味するのではなく、ハードウェアに近いことを意味
することから「低級」という表現を用いています。

ファイルをブラウザに表示させるには、高級言語で開発したあとに、それを機械が認識
できる低級言語に翻訳する必要があり、その翻訳の事を**コンパイル**と呼びます。


##コンパイル
プログラミング言語を、動作する機械が理解できるように翻訳する作業のことです。
コンパイルは、**コンパイラ（機会にやさしいプログラミング言語のこと）**と呼ばれる
プログラムによって行われます。
もしコンパイラで認識できない言語があれば、あらかじめ認識できる言語に**プリコンパイル**しておく必要があります。


##プリコンパイル
コンパイラが翻訳できない言語を翻訳できるようにする事前コンパイルのことです。あるいは、メインとなる処理に対して必要な前処理のことを指します。
つまり、コンパイルやメインの処理の前に行われるべきコンパイルが、プリコンパイルです。

たとえば、Webアプリケーションでは、Webブラウザが静的ファイルを読み込んで表示するというメインの処理ができるように、高級言語で書かれたファイルをプリコンパイルしてからブラウザに渡しています。

このようなプリコンパイルを行うための手法として、**アセットパイプライン**という仕組みがあります。


##アセットパイプライン
JavaScriptやCSSなどのアセットと呼ばれる静的ファイルを小さくまとめてくれる機能です。
アセットパイプラインには、高級言語のプリコンパイルを行う機能も追加できるため、これを応用してSCSSやTypeScriptなどを使用した開発もできるようになります。

アセットパイプラインの処理は、**「①プリコンパイル」「②連結」「③圧縮」「④配置」**の流れで行われます。
複数の静的ファイルをプリコンパイルして連結したのち、圧縮して軽量化したものを`publicディレクトリ`に配置して、ブラウザへ渡せるようにします。

これまでRailsでは、CSSやJavaScript等をプリコンパイルするために、**Sprockets**というGemによるアセットパイプラインをデフォルトで用いていました。

しかし、近年JavaScriptのライブラリ機能を合わせて開発することが大体となってきたため、Railsではバージョン6以降から、**モジュールバンドラ**を使用したプリコンパイルを主流とするようになりました。


##モジュールバンドラ
モジュールバンドラは、JavaScriptのモジュールを依存関係を考慮しながら管理するツールです。

モジュールとは、機能を1つずつ分けて他のファイルから読み込めるようにした処理のまとまりのことです。
JavaScriptでは複数の機能をファイルごとに分割すると、1つのファイルへまとめる際に不具合が生じるため、Node.js環境では機能をモジュールという単位で扱います。

モジュールによって、大量の機能を複数のファイルに分けることができ、分けられた機能を1つのファイルにまとめても問題なく動作できます。
ただし、複数に分かれるため依存関係が生まれ、読み込みができてないモジュールがあると正しく動作できない問題があります。

これを解消するのが、モジュールを一括で束ねて管理してくれるモジュールバンドラです。
近年では、モジュールバンドラの中でも**webpack**が主流となりつつあります。

##webpack
webpackとは、Webアプリケーションを作成する際に必要な、さまざまなJavaScriptをひとまとめに管理するためのツールです。
webpackが行うことは、大きく分けて4つあります。

| 基本要素 |     役割                                          |
|:-------|:-------------------------------------------------:|
| Entry| 依存関係を解決するために、どのファイルを基準（エントリーポイント）とするかを決める|
|Output| エントリーポイントにされ、webpackによってまとめられたファイルを、どこへどのような名前で出力（アウトプット）するのか指定する|         
|Loaders|JavaScript以外のCSSやHTMLなどのファイルをモジュールに変換する方法を読み込み（ロード）、指定した処理を行う|
|Plugins|圧縮などの、ファイルをまとめる以外でローダーが実行できないタスクを導入し、拡張（プラグイン）する|

つまり、webpackを用いることで、JavaScriptのライブラリとJavaScript以外のさまざまな言語を変換・圧縮した上で、好きな場所に配置することが可能となります。

Railsにもwebpackを導入してコマンド操作が可能ですが、設定ファイルの記述がやや難しいことから、設定を簡易化してくれる**Webpacker**というGemがあります。


##Webpacker
webpackをRails仕様にし、専用の設定ファイルやヘルパーメソッドを用意してくれるGemです。Railsバージョン6系以降からは、デフォルトでWebpackerが導入されます。
Webpackerによって、Sprocketsのアセットパイプラインと同じような静的ファイルのプリコンパイルに加え、JavaScriptのパッケージが利用できるようになります。
LaravelでCSVする方法

# はじめに

FuelPHPには `Format:forge($array)->toCsv()` という感じで配列からかんたんにCSV用の文字列を生み出すことができたのですが、Laravelにはありません。
http://fuelphp.jp/docs/1.9/classes/format.html

それくらい `foreach` でぐるぐる回せやってのはあるのでしょうけど、めんどくさいじゃないですか。
そこでいい方法がないかなって探してみました。

# `soapbox/laravel-formatter` を入れる

まあ、だいたいこういうものはpackagist漁ればいいのがありそうなもんなんですよ。
Laravel用じゃなくてもいいのですが、Laravel用だと5.5以降ならServiceProviderにいちいち登録しなくても使えるのがいいですよね！

というわけで今回は `soapbox/laravel-formatter` というのを使ってみます。
https://packagist.org/packages/soapbox/laravel-formatter

こいつを `composer require` しましょう。

```bash
$ composer require soapbox/laravel-formatter
```

これでLaravel内で `Formatter` として使えるようになっているので、あとは以下の感じで行けるはずです。
基本的には連想配列のキーがそのままラベル行として使われるので、DBから引っ張ってくるときにカラム名をas使って日本語とかにすると使いやすいと思います。

```php
use SoapBox\Formatter\Formatter;

class HogeService
{
    public function makeCsvData()
    {
        $list = $this->hogeRepository->listForDownload();
        $formatter = Formatter::make($list->toArray(), Formatter::ARR);

        return $formatter->toCsv();
    }
}
```
ApacheのAddDefaultCharsetを変更しても一部文字化けが解消されない

#概要
CentOS5x->CentOS7xへのリプレースを実施したときのことです。
旧環境では文字化けしていなかった一部のhtmlファイルの日本語が新環境では文字化けしていることが確認されました。

#調査
対象htmlファイル内ではcharsetがshift-jisに指定されていました。
一方、ApacheのAddDefaultCharset utf-8(旧環境ではOFF)でした。なるほど。
そこで、新環境でも同じくこれをOFFにしたところ、、、なんと文字化けは解消しませんでした。


#解決
調査の過程でphp環境の影響が浮上しました。
php.ini内でcharsetがutf-8と指定されており、これがApache起動時の設定パラメータを上書きしていたと思われます。

```php.ini
; PHP's default character set is set to UTF-8.
; http://php.net/default-charset
default_charset = ""
; If empty, default_charset is used.
```
上記のとおり変更を反映させた後、対象htmlファイルの文字化けがなくなったことを確認しました。
※ApacheのAddDefaultCharset はOFF

phpのデフォルト設定でUTF-8が指定されるようになっていたようです。
対象ファイルは静的htmlファイルだったのでphpの設定との関連性になかなか気づけませんでした。
【RPA】Gmailに毎日14時に届くメールの内容に応じてアクションを変えてSlackへ通知する

# 背景
Gmailのメールの内容を読み取り、ようは特定の状況の場合にSlack通知をしたいと考えました。
この背景自体が闇をまとっている感じもしますが、自社以外が関わる際などに時々起き得る要件な気はしています。


# 考え方と解決方法
メールをそのまま転送するだけならSlackのチャンネルにメールアドレスを発行し、転送して行けば良い話です。しかし、今回やりたいのは「メールの内容に応じてアクションを変える」ということなので、一度Gmailの内容を読み取り、何かで処理をする必要があります。

正直、色々なやり方があるのではと思うのですが、運用などを加味したうえで以下を採りました。

## 基本方針
Gmail→GAS→スプレッドシート→適当なプログラム→Slackという流れを辿る

## 大まかな流れ
・GoogleAppsScript(GAS)を用いてGmailの特定タイトルのメールを検索する
・メールの内容から必要部分を抽出し、スプレッドシートに現在日付と一緒に追記する
・1日1回の処理なので現在日付も関数で引っ掛けて「本日のXXX」という箇所を用意しておく
・該当メールを既読にする
・プログラムからスプレッドシートの「本日のXXX」の箇所を読みに行き、内容によって処理を変えてSlackに通知する


# コード
データを張り付けるスプレッドシートに以下のGASを設定します。

```
function getMail(){
  
  var tdate = new Date();
  var tdate_hh = Utilities.formatDate(tdate, 'Asia/Tokyo', 'HH');
  if(String(tdate_hh)!="14"){
    Logger.log("this script is not execute thistime");
    return;
  }
  
  // 以下の順番にindexofしてsubstringしていく
  var TARGET_DEPENDENCE_MSG_CHAIN1="14時のお知らせです";
  var TARGET_DEPENDENCE_MSG_CHAIN2="見つけた猫の数";
  var TARGET_DEPENDENCE_MSG_CHAIN3="子猫の数";
  var TARGET_DEPENDENCE_MSG_CHAIN4="件";
  
  var sheet = SpreadsheetApp.getActiveSheet();
  var start = 0;
  var max = 1;
  var threads = GmailApp.search('label:notice-このラベルは開いてはならないし既読NG  is:unread',start,max);
  var row = sheet.getLastRow() + 1;
  for(var n in threads){
    var the = threads[n];
    var msgs = the.getMessages();
    for(m in msgs){
      var msg = msgs[m];
      var body = msg.getBody();
      var idx1 = body.indexOf(TARGET_DEPENDENCE_MSG_CHAIN1);
      if( idx1>=0 ){
        var idx2 = body.indexOf(TARGET_DEPENDENCE_MSG_CHAIN2,idx1+1);
        var idx3 = body.indexOf(TARGET_DEPENDENCE_MSG_CHAIN3,idx2+1);
        var idx4 = body.indexOf(TARGET_DEPENDENCE_MSG_CHAIN4,idx3+1);
        var targetmsg = body.substring(idx3+4, idx4); // 超細かい調整

        sheet.getRange(row,1).setValue(msg.getSubject());//二列目に内容
        sheet.getRange(row,2).setValue(String(Utilities.formatDate( msg.getDate(), 'Asia/Tokyo', 'yyyyy/MM/dd')))
        sheet.getRange(row,3).setValue(targetmsg);
        the.markRead();
        row++;
      }
      
    }
    Utilities.sleep(1000);
  }
}
```

後述の、トリガー対応のため冒頭で「14時で無かったら即リターン」といった事をしています。

# トリガー
crontabと異なり「毎時X分に実行」といったトリガーがありません。
毎日メールが14時に届くとはいえ「1時間おき」のトリガーにしてしまうと、秒差で空振りした場合に通知が1時間後になってしまいます。

これを防ぐため、5分おきに実行し、該当の時間帯だけ検索に行く、ということをしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68734/77ff386e-e643-5a38-8642-ecf907f2874c.png)


トリガーなどは [こちらのリンク](https://script.google.com/home/my) から確認可能です。


# 取得＆通知
プログラムからのスプレッドシートへの接続方法は割愛します。
取得した情報を適当に処理し、[ワークフローでSlack通知](https://qiita.com/yuji_saito/items/5dc2b079d4e43bd381d8)しました。



# この方法のデメリット、所感
「未読のメールを見る」という方法を採っているため、自身は絶対に見ないような箇所にラベル付けを行って封印する必要があります。
また、担当者（私）が退職したらどうするんだという問題がありますが、個々人に届くメールを処理している以上、どのみちある程度は属人性を引き継ぐことにはなるんじゃないかなぁと思います。
一応、専用のGSuiteアカウントを1つ作成すれば良いっちゃ良いんですが、そのためにランニングコストが発生する点なども考えなくてはなりません。

という訳で、アンコントローラブルな要素が多い場合のRPAの一例として参考/反面教師になればと思います。


# 感想
正直悪手だとは思いつつ、楽しかった
【Enterprise A2019】ログイン、登録不要ですぐ見られるチュートリアルのまとめ

Automation Anywhere Universityで誰でも無償でEラーニングが利用できるのですが、
手っ取り早く情報にアクセスしたい！というニーズも結構ある気がしましたので、、
学習や試用などされる際に役立つよう、まとめてみました。


#【Qiitaにあるチュートリアル】

無料のAutomation Anywhere Community Edition A2019日本語版で始めるRPA-as-a-Service - セットアップからHello World!まで - Qiita
https://qiita.com/RPAbot/items/2a2d94eeab641dfa6516

【5分でできる】Automation Anywhere A2019でCSVファイルを読み込む - Qiita
https://qiita.com/RPAbot/items/66c05fc7092a2a0eba10

【5分でできる】Automation Anywhere A2019で簡単ウェブスクレイピング - Qiita
https://qiita.com/RPAbot/items/09c2dc6405a379e8d5ad

【5分でできる】Automation Anywhere A2019でメールを一括送信する - Qiita
https://qiita.com/RPAbot/items/57d47323011a98bbb1ec

Automation Anywhere A2019の「コメント」と「ステップ」で見やすいフローを作ろう - Qiita
https://qiita.com/RPAbot/items/519a694ea9de622f679c

Automation Anywhere A2019で業務アプリ (ウェブ) に入力する - Qiita
https://qiita.com/RPAbot/items/b62820846743d5724096


#【YouTube上にあるチュートリアル】

【開発の基本】Bot Agentの接続| Automation Anywhere Enterprise A2019 - YouTube
https://www.youtube.com/watch?v=QHI9SPVcaUk&t=31s

【開発の基本】Hello Bot：ボット作成の流れ | Automation Anywhere Enterprise A2019 - YouTube
https://www.youtube.com/watch?v=6nBQg6E1TJ0

【RPA ボット作成デモ】Webテーブルデータ取得 | Automation Anywhere Enterprise A2019 - YouTube
https://www.youtube.com/watch?v=jbV-U_g98Oo

【RPA ボット作成デモ】Webアプリへのデータ入力自動化 | Automation Anywhere Enterprise A2019 - YouTube
https://www.youtube.com/watch?v=Wqkba79TLmIhttps://www.youtube.com/watch?v=jbV-U_g98Oo

【ハンズオントレーニング】演習3題 | Automation Anywhere Enterprise A2019 - YouTube
https://www.youtube.com/watch?v=hB1DTW8DiL4&t=2170s


#【総合的な案内】

🔰Automation Anywhere のオススメの学習方法についてまとめてみる - Qiita
https://qiita.com/KamiyaMT/items/bfd200a4b8e09bc02090

Automation Anywhere Enterprise A2019 お役立ちリンク集 - Qiita
https://qiita.com/zamaezaaa/items/960e9eb0118005bc177d
Jenkinsfile label(agent内)について

Jenkinsfileに記載するagentのlabelが何を指すのかわからなかったので調査。

## agentとは
ジョブを実行する環境を指定するsections内の要素のこと
## labelとは
agent 内に記載する*ビルドをどのノード*で実行するかを指定する

```jenkinsfile
agent {
    label '【ノード名】'
}
```

## ちなみにノードとは？
ノードとはJenkinsがインストールされたサーバのこと。
ビルドを実際に実行するサーバのこと。
## 参考URL
https://blog.lufia.org/entry/2018/01/19/000000
https://knowledge.sakura.ad.jp/5433/
https://www.jenkins.io/doc/book/pipeline/syntax/#declarative-directives
WindowsにVisual Studio Codeをインストールする

# 最終更新日

2020年6月30日

検証を行ったWindows 10のバージョンは下記です。

- Windows 10 Home 64bit 2004 19041.329

インストールするもののバージョンは下記です。

- Visual Studio Code 1.46

> この記事が古くなった場合、下記の手順は最新のインストール手順とは異なっている可能性があります。

# インストール
(1) https://code.visualstudio.com/download にアクセスしてください。

(2) [Windows]-[User Installer]の[64 bit]をクリックしてください。

<img width="987" alt="スクリーンショット 2020-06-30 11.47.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/4eef8141-3457-3c2e-c3cc-7e4421b951cc.png">

(3) ダウンロードしたVSCodeUserSetup-x64-1.46.1.exeをダブルクリックしてください。

(4) [同意する]を選択して、[次へ]をクリックしてください。

<img width="501" alt="スクリーンショット 2020-06-30 11.49.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/d40becee-28e6-0d4d-4180-7fcb422ccc8e.png">

(5) [次へ]をクリックしてください。

<img width="501" alt="スクリーンショット 2020-06-30 11.51.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/1ed023ae-f586-85f9-1550-0f647eb7d4e6.png">

(6) [次へ]をクリックしてください。

<img width="501" alt="スクリーンショット 2020-06-30 11.52.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/c45b6b93-0b98-8842-319b-f2e3d2a57a41.png">

(7) 全てチェックを入れて、[次へ]をクリックしてください。

<img width="500" alt="スクリーンショット 2020-06-30 11.52.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/d55790d9-177e-a03e-b4a4-7e182a8fde3e.png">

(8) [インストール]をクリックしてください。

<img width="503" alt="スクリーンショット 2020-06-30 11.53.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/2be08ba4-1c07-03c5-8ac2-c925771ae468.png">

(9) [Visual Studio Code を実行する]のチェックを外して、[完了]をクリックしてください。

<img width="501" alt="スクリーンショット 2020-06-30 11.54.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/2ebae5b6-cdee-6029-6cb8-99207cb5434d.png">
WordPressが初めてでさっぱりわからないときに見たいリンク集

# 管理画面の使い方がわからない
- [【丁寧解説】WordPressヘッダーメニューバーの作り方と設定方法 | WEBST8](https://webst8.com/blog/wordpress-menubar-setting/)
- [WordPressのカテゴリーの設定方法から編集まで徹底解説](https://bazubu.com/how-to-setup-wp-category-23699.html)
- [WordPressで「テーマの編集」が表示されない？もしかしたらそれマルチサイトじゃありませんか](https://it.sorayori.com/wordpress_themecustomize/)
- [O-DAN (オーダン）- 無料写真素材・フリーフォト検索](https://o-dan.net/ja/)

# ディレクトリ構成
- [WordPress のフォルダ構成/ Web Design Leaves](https://www.webdesignleaves.com/pr/wp/wp_folder_structure.html)

```bash
サイトディレクトリ
├app
｜├public
｜├public/wp-admin
｜├public/wp-content
｜├public/wp-content/plugins
｜├public/wp-content/themes
｜├public/wp-content/themes/各テーマディレクトリ # ここにショートコードで使うfunctions.phpがある
｜├public/wp-content/uploads
｜└public/wp-includes
├conf
｜├apache
｜├mysql
｜└php
└logs
　├apache
　└php
```

# PHPを書きたい
- [PHPがよくわからない時に助けになりたいリンク集 - Qiita](https://qiita.com/ponsuke0531/items/91fd603a2242a47b2c3e)
- [PHPのforeachで配列処理（HTML埋め込みでもスッキリな書き方も）- flatFlag](https://www.flatflag.nir87.com/foreach-294)
- [WordPressにショートコードを使ってPHPを埋め込む方法 - Qiita](https://qiita.com/ponsuke0531/items/a4328cdd7ddd98579146)

## with Custom Search API
- [WordPressでGoogleのCustom Search APIを使ってみる - ponsuke_tarou’s blog](https://ponsuke-tarou.hatenablog.com/entry/2020/06/29/184108)
- [GoogleのCustom Search APIでORとAND検索する方法 - Qiita](https://qiita.com/ponsuke0531/items/114ea51a34a9b9579916)
- [GoogleのCustom Search APIでニュースを検索する方法 - Qiita](https://qiita.com/ponsuke0531/items/b53edb7cf7bdb1d31a56)

|Parameters|型|内容|
|:-:|:-:|:-:|
|q|string|検索ワード|
|key|string|APIキー|
|cx|string|検索エンジンID|
|start|integer|検索結果の取得開始順位|
|safe|[enum](https://developers.google.com/custom-search/v1/reference/rest/v1/Safe)|[セーフサーチの設定](https://support.google.com/websearch/answer/510?co=GENIE.Platform%3DAndroid&hl=ja)|

# ツール
- Embed(サムネイルっぽいやつ)の作成ツール : [Embed Code Generator | Embedly](https://embed.ly/code)

## 簡単にWordPressでサーバを使いたい
- [無料レンタルサーバー【XFREE(エックスフリー)】](https://www.xfree.ne.jp/)
- [WordPress.com: 無料のサイトやブログを作成](https://ja.wordpress.com/)

## ローカル環境を作ってみたい
- [超簡単にローカル環境が構築できるLocalbyFlywheelの使い方](https://bazubu.com/local-by-flywheel-33920.html)
- [Local's router is having trouble starting.となった時の対応方法 - Qiita](https://qiita.com/ponsuke0531/items/7b33e7a48cb27c42fbdc)
windowsでiverilog その37

#概要

windowsでiverilogやってみた。
float32やってみた。

#使用したライブラリー

https://github.com/danshanley/FPU


#plunkerでfloat32を作る。

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

#テストベンチ１

0.1 + 0.2
期待値　3e99999a

```
module test();
	wire [31:0] out;
	wire [31:0] a = 32'h3dcccccd;// 0.1
	wire [31:0] b = 32'h3e4ccccd;// 0.2
	adder A1(.a(a), .b(b), .out(out));
	initial
	begin
		$monitor("%h %h %h", a, b, out);
	end
	initial
	begin
		#10
			$finish();
	end
endmodule
```

結果

```
3dcccccd 3e4ccccd 3e999999
```

#テストベンチ２

0.3 + (-0.2)
期待値　3dcccccd

```
module test();
	wire [31:0] out;
	wire [31:0] a = 32'h3e99999a;// 0.3
	wire [31:0] b = 32'hbe4ccccd;// -0.2
	adder A1(.a(a), .b(b), .out(out));
	initial
	begin
		$monitor("%h %h %h", a, b, out);
	end
	initial
	begin
		#10
			$finish();
	end
endmodule
```

結果

```
3e99999a be4ccccd 3dccccd0
```

以上。
Raspbian OS コマンドラインでBluetooth機器に接続する。

SSHでの接続時など、コマンドラインでのアクセスする際に、Bluetooth機器に接続する備忘録です。

## 環境
- Raspberry Pi 3 B+
- MicroSDカード
- MacBook Pro（Catalina）

## 作業手順
### 1.bluetoot起動

```
# bluetooth off
% sudo hciconfig hci0 down

# bluetooth on
% sudo hciconfig hci0 up
```
### 2.bluetooth設定ツールの起動
以下のAgentは以下、種類があるようです。
詳細はhelp等でご確認を。
・DisplayOnly
・DisplayYesNo
・KeyboardDisplay
・KeyboardOnly
・NoInputNoOutput

```
# bluetooth設定を起動
% bluetoothctl
Agent registered

# Agentを設定する（Pinコードを要求されないようする）
[bluetooth]# agent DisplayYesNo

# 上記Agent設定をデフォルトにする
[bluetooth]# default-agent

# bluetooth機器をスキャンする
[bluetooth]# scan on
Discovery started
[CHG] Controller XX:XX:XX:XX:XX:XX Discovering: yes
[NEW] Device YY:YY:YY:YY:YY:YY blurtoothDevice01 12345
[NEW] Device ZZ:ZZ:ZZ:ZZ:ZZ:ZZ 00-00-00-00-00-00 
...

#デバイスのスキャンを停止
[bluetooth]# scan off
```
### 3.bluetooth機器に接続する
```
# ペアリング
[bluetooth]# pair YY:YY:YY:YY:YY:YY
Attempting to pair with YY:YY:YY:YY:YY:YY
[CHG] Device YY:YY:YY:YY:YY:YY Connected: yes
[CHG] Device YY:YY:YY:YY:YY:YY UUIDs: 00001124-0000-1000-8000-00801r9p68fb
[CHG] Device YY:YY:YY:YY:YY:YY UUIDs: 00001200-0000-1000-8000-00801r9p68fb
[CHG] Device YY:YY:YY:YY:YY:YY ServicesResolved: yes
[CHG] Device YY:YY:YY:YY:YY:YY Paired: yes
Pairing successful

# コネクトする
[bluetooth]# connect YY:YY:YY:YY:YY:YY
Attempting to connect to YY:YY:YY:YY:YY:YY
[CHG] Device YY:YY:YY:YY:YY:YY Connected: yes
Connection successful

# 自動接続のためにtrustする
[bluetooth]# trust YY:YY:YY:YY:YY:YY
[CHG] Device YY:YY:YY:YY:YY:YY Trusted: yes
Changing YY:YY:YY:YY:YY:YY trust succeeded
```

#### その他のコントローラのコマンド####
`select<ctrl>`：コントローラ選択
`discoverable<on/off>`：onで発見可能にする
`devices`：デバイスを表示する
`pairable<on/off>`: ペア機能のスイッチ
`paired-devices`：ペアリング済デバイスを表示

その他のデバイスのコマンド
`remove[dev]`：ペアリングの削除
`disconnect[dev]`：デバイス切断
`info[dev]`：デバイスの状態
ソフトウェア開発のテスト工程について

## 単体テスト
ソフトウェアの最小単位であるモジュールごとに行うテストのこと。
主に詳細設計書どおりにモジュールが動くかどうかをテストする。
単体テストはプログラマが担当することが多い。

## 結合テスト・機能テスト
結合テストとは、複数のモジュールを組合わせて動作をテストする工程のこと。
詳細設計で定義したモジュール間の連携方法が実現されているかを確認する。
一方、機能テストでは、組合わせたモジュールを1つの機能としてテストする。
内部構造は確かめず、機能として正しく役割を果たしているかを確認する。

## システムテスト
個々のモジュールや機能を統合した状態で、要求定義の内容が実現されているかを確認するテストのこと。
ユーザーの立場から、想定される使い方を試して欠陥を検出する。

## 参考
■【この1冊でよくわかる】ソフトウェアテストの教科書―品質を決定づけるテスト工程の基本と実践
https://www.amazon.co.jp/dp/B00U17809A
SPAとモノリス

Reactを学習中のRailsエンジニアです。学習していて思うのは、Reactは(サービス開発全体のことを考えると)Railsよりはるか学習コストが高いということ。似たようなサービスを作るために必要な手数も、考えなければいけないこともかなり多いです。

正直最初は「技術が大好きなエンジニアの自己満だろ」「Railsに飽きた奴らがやってるだけだろ」くらいに思っていたのですが、そうとも限らないことが腹落ちして理解できるようになったので、現在の考えをまとめてみようと思います。

## おことわり
この記事の中で登場する`SPA`という単語は`フロントエンドとバックエンドを明確に分けて開発されるアプリケーション`くらいの意味として解釈してください。フロントエンドのロジックをNuxt.jsで作ってNetlifyにデプロイして、Goで作ったAPIをAWSで動かす、みたいな構成のやつです。乱暴ですみません。他に良い表現があればコメントください。

`モノリス`はRailsやLarabelでviewファイルの生成まで行っているアプリケーションを指します。

SPA⇄MPA
マイクロサービス⇄モノリス
で比較しろよ、って話ですが、マイクロサービスについて語れるほどの知識はないし、MPAというよりモノリスの話がしたかったので、雰囲気で読んでください。

## SPAが台頭した理由
### よりリッチな表現ができる(UXの向上)
ページ遷移が高速、DOMを色々動かしてもコードがカオスになりにくいなど。SPAのメリットとして真っ先にあげられることが多いので、みなさんもよくご存知かと思います。

### フロントエンドとバックエンドが疎結合になる
疎結合になると、新技術を部分的に採用することが容易になります。またサービスの規模が大きくなっても、コードがカオスになりづらいです。Railsエンジニアをやっていると、成長し大規模化したRailsアプリ開発者がつらそうにしている記事をよく見かけます。

### クロスプラットフォーム対応
SPAを採用すると、web、iOS、Android、macOS用アプリ、windows用アプリで同じAPIを使うことができます。
元々web以外のプラットフォームでは、表示周りやページ切り替え等のロジックを先にインストールして、他に必要なデータのやりとりだけをAPIを使って行う、というスタイルで統一されていました。webも同じスタイルに揃うと構成がキレイになってすっきりしますね。

### マネージドサービスの充実
この記事を書くに至った理由です。この視点を得て、SPAが普及したことの必然性を理解しました。
2020年現在、ざっと思いつくだけでも以下のようなマネージドサービスが存在します。

認証: Firebase Auth, Auth0, Cognito
決済: Stripe
検索: Algolia
サーバーレスコンピューティング: Lambda, Cloud Functions
NoSQL: CloudFirestore, DynamoDB
ストレージ: S3
メール送信: SendGrid

ここで言えるのは、**バックエンドで自前で実装しなければいけない機能が大幅に減った**ということです。
「外部サービスをどれだけ有効に活用できるか」が重要になってくると、モノリスの魅力は相対的に薄れていきます。

そもそもRuby on Railsが登場した2004年にはAWSすら存在しておらず、モノリスがwebアプリ開発のど真ん中に鎮座していた2010年代前半にも、上記で紹介したサービスの多くは存在していませんでした。

いくらRuby on Railsも進化しているとはいえ、これだけ状況が変わってしまえば、開発のメインストリームから外れてしまうのは仕方のないことだと感じます。

また余談ですが、Rubyの認証ライブラリで1番人気があるDeviseを使っている人は、全員つらそうな顔をしています。

### その他
- コンポーネント単位で分割することで保守性や再利用性が高くなったり、デザイナーとの協業がしやすくなる
- TypeScriptとVSCodeの連携がすごい

などなど他にもSPAのメリットは色々とありそうですが、これらはどちらかというと副産物に近く、SPAが台頭したメインの理由では無いと考えています。

## モノリスは用済みになったのか
**全くそんなことは無い**と考えています。
以下の条件を満たすアプリケーション開発では、今でもモノリスがファーストチョイスです。
**「モノリスでも問題ない」ではなく、「モノリスの方が圧倒的に良い」**です。

- webだけで良い
- 関わる開発者が少ない
- UXの要件がそれほど厳しくない

具体的な場面としては

- 多くのwebアプリののプロトタイプ
- リリース後の修正が少ないと予想されるシステム
    - 機能要件が指定された受託開発など
    - 「この機能を削ればこの予算で実現できます」など仕様をモノリスに寄せることで双方が得をする場面は必ず存在する
- 小~中規模のwebアプリの一部
    - 必要な要件や、想定されるユーザー数などから技術選定。モノリスの方が効率良く開発できるサービスは、今後もそこそこの割合で残り続けるはず。

などが考えられます。

モノリスの最大の弱点とされる密結合は、必ずしも悪ではないのです。
**分割は短期的な生産性を下げます。**
**密結合は短期的な生産性を上げます。**
この点を考慮して技術選定をするべきです。

## 結論
特定の制約の上で、モノリスはもの凄い力を発揮します。

## 参考
[Next.js,、Nuxt.jsが次世代のRailsになるという話についてどう思いますか？ - Quora](https://jp.quora.com/Next-js-Nuxt-js%E3%81%8C%E6%AC%A1%E4%B8%96%E4%BB%A3%E3%81%AERails%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E8%A9%B1%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%A9%E3%81%86%E6%80%9D%E3%81%84%E3%81%BE)