OmniAICreator/Qiita-1.07M huggingface dataset:
UICollectionViewCellのFade Inアニメーションを作る

## この記事について
UICollectionViewCellのFade Inアニメーションの作り方

## How To
UICollectionViewのdelegateの `willDisplay` メソッドでalphaをアニメーションする。

注意: デフォルトではアニメーション中はuserControllがdisableされるので、optionsに　`.allowUserInteraction` を設定する。これにより、アニメーション中にもスクロールできる。

```swift
    override func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
        cell.alpha = 0
        UIView.animate(withDuration: 0.5, delay: 0.0, options: .allowUserInteraction, animations: {
            cell.alpha = 1
        }, completion: nil)
    }
```

## Result

![2020-04-03-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241550/096cc47c-2dbe-a970-4356-6597a351fc6a.gif)

*輪郭の形が変わって見えるのはgifデータの問題です
EDB Postgresで作る高可用性システム

<a href="https://www.enterprisedb.com/ja/" target="_blank">EDB Postgres Advanced Server</a>（以下、EDP Postgres）がOracle互換のデータベースとして浸透しつつありますが、Oracle特有の機能はやはり便利でEDB Postgresが適さないケースもあります。

<a href="https://docs.oracle.com/cd/E15817_01/rac.111/e05738/admcon.htm" target="_blank">ORACLE RAC</a>（Oracle Real Application Clusters）がその代表例です。

EDB Postgresには「Streaming Replication」でデータをレプリケートし、「Failover Manager」で監視しながら、スレーブへと仮想IP(VIP)を切り替えることで可用性を実現する仕組みがありますが、これにOracle RAC並みの可用性と拡張性を担保させるのはなかなか困難です。

![rac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556649/24b9afdc-04df-cdda-55a0-1757f847831d.png)

# EDB Postgresの高可用性と拡張性を両立させてみる
副題はやや誇張です。RACの様にインスタンス間でデータ・ブロックのやり取りを行う「キャッシュ・フュージョン」の仕組みはやはりありませんので、更新処理はあくまで1サーバに紐づいたVIPに対してアクセスを行います。また、、各レプリケーション・サーバ自体は物理IPを保有しているので、物理IPを指定すればマスタ・サーバもスレーブ・サーバ自体は利用可能です。

したがって、更新処理はVIPを用いた1台に限定し、参照処理は複数のスレーブ・サーバにロードバランス(クライアント・ロードバランス)を行うことが理にかなっていますが、EDB社のODBCドライバには、クライアント・ロードバランスや複数サーバのフェイル・オーバ機能が実装されていないのです。

EDB Pgpoolを使うことも検討したいところですが、ここでは、よりシンプルに、EDB PostgresにOracle RAC並みの可用性と拡張性を持たせるため、サードパーティー製ドライバ Progress DataDirect for EDB Postgresを使い、クライアント側で参照のロードバランスを実施しながら可用性レベルを高めてみます。

## DataDirectとのロードバランス設定
odbc.iniに設定するのみの簡単仕様です。

フェイルオーバの設定

```console
AlternateServers=(HostName=SqlsServer:PortNumber=1433:Database=Sqlsdb1, HostName=255.201.11.24:PortNumber=1434:Database=Sqlsdb2)
```

ロードバランスの設定

```console
LoadBalancing=1
```
これでAlternativeServersで指定したサーバへロードバランスを行えます。
詳細のパラメータについてはDataDirectのマニュアルをご覧ください。


## DataDirectとEDB Postgres純正ドライバを比較してみる
EDBのODBCドライバには無い、クライアント・ロードバランス機能やフェイル・オーバ機能があるだけで、DataDirectは魅力的ですが、処理性能でもメリットがあります。

すべてのSQLで同じように処理性能が出るのかはわかりませんが、一度試してみるのも良いかと思います。
下のグラフは、EDB PostgreSQLをVirtualBox上のCentOSにデフォルト状態でインストールし、emp表の行数を徐々に増やして、全件検索していった結果です。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556649/0f2e51eb-a4d3-3274-068d-7b0878e45d6c.png)

メモリ4GB、4コアのVirtualBox環境ですので、それほどスペックは良くありませんが、EDB ODBCドライバは2万行ぐらいから明らかにレスポンスが遅延してきます。(2万行の全件検索が適切かはさておき)

片やDataDirectは78万件ほどで、レスポンスが体感で遅延したように感じられますが、157万件でも5秒程度のレスポンスとなりました。これは、DataDirectの持つ「<a href="https://en.wikipedia.org/wiki/Wire_protocol" target="_blank">Wire Protocol</a>」とネットワーク・ソケットの最適化機構によるものと思われます。

## まとめ
Oracle RACとほぼ一緒とまでは行かないものの、これまで、Standard EditionでRACを組んでいた環境などは、もしかしたらEDB Failover ManagerとDataDirectで十分なケースもあるかもしれません。

特にBIツールからOracleを参照する際は、JDBCよりもODBCの方が一般的でしょうし、検索の結果セットが大きいというBIのアプリケーション特性から考えると、DataDirectはアドバンテージがありそうです。

参考サイト：<a href="https://www.ashisuto.co.jp/datadirect/connectors/postgresql.html" target="_blank">DataDirect for PostgreSQL</a>
ローカルからEC2へpemキーを渡す方法

ローカルからEC2へpemキーを渡すのってどうやんの？

ってことで調べてみました。

まずはローカルからpemキーを置いてあるフォルダに移動します。

その後


scp -i [公開鍵ファイルのパス] [送信元先ローカルファイルパス] [ユーザ名@ドメイン]:[転送先EC2ファイルパス]

で渡します。


公開鍵ファイルのパスとはEC2へログインするときに使うpemキーのことですね。ファイルを渡すときもカギが必要です。


送信元先のローカルのファイルパスは、渡したいpemキーがあるパスのことです。例えばEC2へ渡したいpemキーが /c/Users/ユーザー/.ssh/hoge.pem　であればそれを指定してください。


ユーザ名@ドメインは今回EC2へ渡すので、ec2-user@EIP(IPv4パブリックIP)という事になりますね。


転送先EC2ファイルのパスはpemキーを渡したいEC2のパスを指定します。今回は/home/ec2-user/.ssh　に渡すことにしましょう。


```
scp -i /c/Users/ユーザー/.ssh/huga.pem /c/Users/ユーザー/.ssh/hoge.pem ec2-user@EIP:/home/ec2-user/.ssh
```

これで/home/ec2-user/.sshへhoge.pemが渡せているはずです。
C言語　ALDS1_1_D　Maximum Profit

##問題

Maximum Profit
http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=ALDS1_1_D&lang=ja


##考え方

>ある通貨について、時刻 t における価格 Rt (t=0,1,2,,,n−1)が入力として与えられるので、価格の差 Rj−Ri (ただし、j>i とする) の最大値を求めてください。

問題文を数式に置き換えていく

```c
    for(int j = 1; j < n-1; j++){
        for(int i = 0; i <= j-1; i++){
            max_profit = max(max_profit, R[j] - R[i]);
        }
    }
```

改良

```c
    for(int j = 1; j < n-1; j++){
        max_profit = max(max_profit, R[j] - min_value);
        min_value = min(min_value, R[j]);
    }
```

##コード


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

int max(int a, int b) { return a > b ? a : b; }
int min(int a, int b) { return a < b ? a : b; }

int main(void)
{
    int n, max_profit, min_value;
    int R[2000000];

    /* 値の受け取り */
    scanf("%d", &n);
    for (int i = 0; i < n; i++)
        scanf("%d", &R[i]);

    /* 初期化 */
    max_profit = INT_MIN;
    min_value = R[0];

    /* 最大利益の計算 */
    for (int j = 1; j < n; j++)
    {
        max_profit = max(max_profit, R[j] - min_value);
        min_value = min(min_value, R[j]);
    }

    /* 出力 */
    printf("%d\n", max_profit);

    return 0;
}

```

##所感
min_value = R[0];
の設定のところとか、ループ内でやろうとして混乱してた。
何を結果としてほしいのか、問題文から言語化していく。


所要時間70分
pyinstaller にで作成した exeでNo such file or directory問題

## 実行すると No such file or directory 
ファイルのパスがExeで解凍されると違う場所になるので、パスを解凍後のパスに設定する必要がある

```
application_path = (
    sys._MEIPASS
    if getattr(sys, "frozen", False)
    else os.path.dirname(os.path.abspath(__file__))
)
```
このapplication_pathをファイルに付け加える必要がある


```
# 修正前
driver = webdriver.Chrome('chromedriver', options=options)
```

```
# 修正後
driver = webdriver.Chrome(application_path + '/chromedriver', options=options)
```
開発中は修正前でも動くの忘れがち


##おまけ
exeが置いてあるパスを取りたい時

```
os.path.dirname(sys.argv[0])
```
Ruby入門メモ(プログラミング経験者用)2

#TIPS
###定数
英大文字で定義する（慣習的に全部大文字)。

```
VERSION = 1.1
```

##オブジェクトの型変換
to_i : 数値変換
to_f : 浮動小数点変換
to_s : 文字列変換

```
number = 100
f_number = number.to_i * 0.01
l_number = number.to_s + "円"
d_number = f_number.to_i

puts "#{number} #{f_number} #{l_number} #{d_number}"
```

[実行結果]

```
100 1.0 100円 1
```

###書式付きの値埋め込み
%d  整数
%f  浮動小数
%s  文字列

puts "文字列と書式埋め込み" %[対応する値]
※埋め込む書式が複数なら配列で渡す。

```
diagram = "円"
radius = 1
ratio = 3.14

puts "半径%dcmの%sの直径は%.2fcmです" %[radius, diagram, 2 * ratio * radius]
```
[実行結果]

```
半径1cmの円の直径は6.28cmです
```



#ハッシュ
C#でいう辞書、連想配列。
keyとそれに対応する値(value)をもつ。
型は数値でも文字列でも可能

```
presents = {"日本" => "お肉券" , "米国" => "お金", "英国" => "お金" }
puts presents["日本"]

awards = { 1 => "金" , 2 => "銀" , 3 => "銅" }
puts awards[1]
```

[実行結果]

```
お肉券
金
```

####ハッシュのメソッド
size :サイズを返す
keys :キーを返す
values :値を返す

```
presents = {"日本" => "お肉券" , "米国" => "お金", "英国" => "お金" }

puts presents.size
puts "-----------------"
puts presents.keys
puts "-----------------"
puts presents.values
puts "-----------------"
```

[実行結果]

```
3
---------------------
日本
米国
英国
---------------------
お肉券
お金
お金
---------------------
```

#Case
CやC#のswitch文に対応する。

```
case 変数
 when パターン1
    処理
 when パターン2
    処理
 end
```


```
input = gets.chomp

case input 
  when "red"
    puts "止まれ!"
  when "yellow"
    puts "警戒!"
#条件を複数扱いたいときはコンマで区切る
  when "blue","green"
    puts "進め"    
  end
```

[実行結果]

```
red
止まれ!
```

#ループ
for文は入門メモ1参照

##while

```
while 条件 do
  処理
end
```
```
input = gets.chomp.to_i
i = 0

while i < input do
  puts "あ"
  i += 1
end

```
[実行結果]

```
3
あ
あ
あ
```


途中でループ処理から抜けたいときは「break」
一回ループをスキップするときは「next」
条件文(if文)と共に扱うことが多い。



##times
ループする回数が決まっているときに使う。

```
回数.times do |変数|
 処理
end
```

```
input = gets.chomp.to_i

input.times do |x|
  puts "あ"
end
```
[実行結果]

```
3
あ
あ
あ
```


#参考文献
Progate https://prog-8.com/slides?lesson=72%2C75%2C78%2C81%2C85
ドットインストール　https://dotinstall.com/lessons/basic_ruby_v3
leave one out法とは


#leave one out法とは
**leave one out法**とは、ひとつひとつのデータから作る「データ集合」を分割し**グループ**を作る。次に **学習**と**テスト**をグループごとにして、予測結果を出力する「モデル」の選択をするものである。

まず始めにデータ集合を要素の(個数-1)分だけ分割する。

![IMG_0110.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33329/35d5dcb6-b8c5-e80b-3729-472b30056b05.jpeg)
<div style="text-align: center;">[データ集合の要素数が100ならば、99分割する]</div>


要素から一つだけテストに使い、残りの要素を学習に使う。たとえば、100個の要素からなるデータ集合の場合は、99個のデータを学習に使い1個のデータをテストに使う。
学習に使うデータとテストに使うデータを変えていき、グループを作る。

![IMG_0109.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33329/54921dec-685b-10c9-a240-407bf17b7d49.jpeg)
[データ集合を分割したあとは、グループごとに学習とテストをする]

グループごとにモデルを作成し、グループごとにモデルの予測結果とラベルの値（真の値）との誤差を計算する。
![IMG_0111.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33329/2afc8667-1273-4ef9-58a4-8508221ffba0.jpeg)

最後に、テストデータと予測した値との誤差からなる「予測誤差」が最も良いモデル選択をする。
これが、**leave one out法**である。
pyinstallerで、[29577] Failed to execute script pyi_rth__tkinter

```
pip install pyinstaller
```

```
pyinstaller hogehoge.spec --clean --onefile
```

で実行するとこのエラー

```
File "PyInstaller/loader/rthooks/pyi_rth__tkinter.py", line 30, in <module>
FileNotFoundError: Tcl data directory "/var/folders/j7/5l7s1ly92cndg76ghdw1gyx40000gn/T/_MEIHPuWkm/tcl" not found.
[29577] Failed to execute script pyi_rth__tkinter

```

specファイルにTclを追加すると解決できる

```
# -*- mode: python ; coding: utf-8 -*-

block_cipher = None


a = Analysis(['main.py'],
             pathex=['/Users/user/PycharmProjects/onehundred'],
             binaries=[('/System/Library/Frameworks/Tk.framework/Tk', 'tk'), ('/System/Library/Frameworks/Tcl.framework/Tcl', 'tcl')],
             datas=[],
             hiddenimports=['PySide2.QtXml', 'PyMySQL'],
             hookspath=[],
             runtime_hooks=[],
             excludes=[],
             win_no_prefer_redirects=False,
             win_private_assemblies=False,
             cipher=block_cipher,
             noarchive=False)
pyz = PYZ(a.pure, a.zipped_data,
             cipher=block_cipher)
exe = EXE(pyz,
          Tree('ui_files',prefix='ui_files'), # 追加
          a.scripts,
          a.binaries,
          a.zipfiles,
          a.datas,
          [],
          name='onehundred',
          debug=False,
          bootloader_ignore_signals=False,
          strip=False,
          upx=True,
          upx_exclude=[],
          runtime_tmpdir=None,
          console=True )
app = BUNDLE(exe,
             name='onehundred.app',
             info_plist={ 'NSHighResolutionCapable': 'True'}, #  追加
             icon=None,
             bundle_identifier=None)
```
binariesに、Tclを追加すると上手くいきました。
引数ですが、binaries=["開発時のパス","解凍時のパス"]
Gradleで発生した Plugin was not found in any of the following sources: の備忘

# はじめに

困っている方がいたので、今後の備忘として書きます。

## こんな感じのエラーが出ました

```
Starting a Gradle Daemon (subsequent builds will be faster)

FAILURE: Build failed with an exception.

* Where:
Build file '/tmp/build/xxxx/xxxx/build.gradle' line: 13

* What went wrong:
Plugin [id: 'org.springframework.boot', version: '2.1.7.RELEASE'] was not found in any of the following sources:

- Gradle Core Plugins (plugin is not in 'org.gradle' namespace)
- Plugin Repositories (could not resolve plugin artifact 'org.springframework.boot:org.springframework.boot.gradle.plugin:2.1.7.RELEASE')
  Searched in the following repositories:
    Gradle Central Plugin Repository

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 3m 9s
```

## 解決
* Intellij IDEA の `Toggle Offline Mode` がONになっていたので、OFFにしました。

### BEFORE
![before.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439602/35ee4337-f1b4-a97d-7b5d-cd3c274bdeef.png)

### AFTER
![after.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439602/9c4f8ea7-f377-463e-2e0f-42353591a3a2.png)

## メモ
* 私用Macでも同じ現象が起こったことがあったが、そのときはMacの再起動で直った
  * IntelliJ IDEA の `Chack for Updates...` がそもそも `Connection failed` だった
  * なぜ直ったかは不明
* Dockerでも同じようなエラーが出たことがあるが、どうやって解決したか忘れたので思い出したら書く…
MATLABからCコードを呼び出す方法

# はじめに
タイトルの通り、MATLABからCコードを呼び出す方法のまとめです。全く仕組みがわからない所から、資料を漁ってようやく理解が深まってきたので、自分の備忘も兼ねつつ、初学者のためになればと記録します。

# 環境
MATLAB R2020a
MATLAB Support for MinGW-w64 C/C++ Compiler
Visual Studio 2017

# Cコードの呼び出し方
### Cコードは「MEXファイル」に変換して呼び出すことが可能
MEXファイルとは、Wikipediaによりますと[[1]](https://en.wikipedia.org/wiki/MEX_file)
> "A MEX file is a type of computer file that provides an interface between MATLAB or Octave and functions written in C, C++ or Fortran. It stands for "MATLAB executable"."

とのことで、
個人的には、CコードをMEXという実行ファイルのような形式に変換して呼び出すことができる、という理解です。


### MEXファイルのビルド方法
MATLABに[mex](https://jp.mathworks.com/help/matlab/ref/mex.html)関数が存在するので、これを使ってビルドすると良いようです。

```matlab
mex filename
```
ちなみにmexファイルを作成する際に、最初「MATLAB Support for MinGW-w64 C/C++ Compiler」がないとエラーになったので、MATLAB上部の[アドオン]ボタンから追加しました。

### MEXファイルのmain関数的なものを用意する必要がある
じゃあ既存のcコードをmexすれば良いのね簡単簡単と思ってたら出鼻をくじかれました。

```matlab
エラー: mex
LINK : error LNK2001: 外部シンボル "mexFunction" は未解決です。
filename.lib : fatal error LNK1120: 1 件の未解決の外部参照
```
"mexFunction"が未解決ですとしかられていますが、mexFunctionとは[[2]](https://jp.mathworks.com/help/matlab/apiref/mexfunction.html)、
> C 行列 API で作成された C/C++ MEX 関数へのエントリ ポイント

とのことです。確かにこれがないと機械にはわからないですよね。

### mexFunctionの仕組み
@shohiroseさんの[[MATLAB] MEX関数の作成方法](https://qiita.com/shohirose/items/0689a76638fa217c6e83)にて、わかりやすくまとめてくださっていたので、リンクを貼らせて頂きます。勉強になりました、ありがとうございます。
MathWorksの[公式ドキュメント](https://jp.mathworks.com/help/matlab/apiref/mexfunction.html)にも記載のある通り、そして@shohiroseさんも書いてくださっている通り、

```c:C構文
#include "mex.h"
void mexFunction(int nlhs, mxArray *plhs[], int nrhs, 
  const mxArray *prhs[])
```

上記の構文の中で
・nlhs = 戻り値の数
・plhs = 戻り値へのポインタの配列
・nrhs = 引数の数
・prhs = 引数へのポインタの配列
となります。
この仕組みで、引数や戻り値のやりとりをするようです。

### mexFunctionを使ったわかりやすい例
とはいえ、、、私はここまで来ても具体的な使い方がわからずはまっていたのですが、良い例に出会えたのでシェアします。
[C MEX ファイルでの文字列の受け渡し](https://jp.mathworks.com/help/matlab/matlab_external/passing-strings.html)
上のページからもリンクに飛んで頂けますが、MATLABのコマンドウィンドウで下記を入力し、revord.cを見て頂くと非常にわかりやすいです。

```matlab
edit([matlabroot '/extern/examples/refbook/revord.c']);
```

ポイントとしては、
・自作の関数を作成および既存のCコードを転用可能（例の中のrevord関数）
・mexFunctionから自作の関数を呼び出す
・自作の関数の入力・出力は、mexFunctionの引数に紐づける
・紐づけの際は[C 行列 API](https://jp.mathworks.com/help/matlab/cc-mx-matrix-library.html?s_tid=CRUX_lftnav)を使う（MATLAB上の変数を、Cで理解できる形に変換しているという個人的な理解です）

私の環境でも無事にMEXファイルを作成し、Cコードの処理を呼び出すことに成功しました。

```matlab
>> mex -v revord.c
>> x = 'abcde';
>> y = revord(x)

y =

    'edcba'
```

### 結論として
既存のCコードは、mexFunctionから呼び出せる形に書き換えて、MEXファイルに変換することで呼び出せます。

### 補足：MEXファイルはWindows, Linux, Apple Macのいずれにも対応
MathWorksの公式ページには[こんな説明](https://jp.mathworks.com/help/matlab/call-mex-file-functions.html)がありました。

Linux® (64 ビット)では
mexa64
Apple Mac (64 ビット)では
mexmaci64
Windows® (64 ビット)では
mexw64

という拡張子で、それぞれMEXファイルが作成されるようです。試していませんが、どのOSでも大丈夫なのだと思います。

# 参考文献
[1] https://en.wikipedia.org/wiki/MEX_file
[2] https://jp.mathworks.com/help/matlab/apiref/mexfunction.html
Pycharmにおけるpyenv ちゃんと理解

## Pycharmで仮想Python環境を作るには
- インタープリターの追加から行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166346/de2fb7b8-f5b5-a261-8cee-c496714882de.png)
新しいロケーションを設定する。

で、これを反映させるコマンドが

```
source venv/bin/activate
```

ここから、pipでライブラリを入れると

```
pip install selenium
```
こんな感じで、venvの下のsite-packages配下にライブラリが入る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166346/93e9763f-979e-c6a5-6696-d6fc10787d36.png)


### ModuleNotFoundError: No module named
この手のエラーは、この辺が原因で、きちんと配置できていないと思われる。
スクラムのスプリント振り返り（レトロスペクティブ）には Azure DevOps 拡張機能 Retrospectives がいい

スクラムイベントの スプリント振り返り ( Sprint Retrospective ) は [Scrum.org の Scrum Guide](https://www.scrumguides.org/scrum-guide.html) に定義されています。スプリント期間の終了時に、スプリント期間1週間につき 45分（4週間なら3時間）の時間をとって、何が良かったか？何が良くなくてどう改善するか？をみんなで話し合います。

他のスクラムイベントはしっかりやれているのに、スプリント振り返り だけやれてないという話はよく聞きます。重要なこのイベントを、ちゃんとやれるように何とか定着させたいところです。

Azure DevOps にはスクラムで開発するために必要な機能がおおよそ揃っていますが、標準ではスプリント振り返りに関する機能がありません。

しかし、Microsoft DevLabs の拡張機能を Azure DevOps にインストールすると、Azure DevOps の画面で スプリント振り返り を行うことができます。

[Retrospectives 拡張機能 (Marketplace)](https://marketplace.visualstudio.com/items?itemName=ms-devlabs.team-retrospectives&targetId=eb374388-8c2d-44bd-93ef-af3e000b4073&utm_source=vstsproduct&utm_medium=ExtHubManageList)

![Marketplace Webサイトの画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474869/5903e937-d835-ceef-40b7-86cfcd8b2a0a.png)


Retrospectives は Azure DevOps の Boards（スプリント・バックログ・タスク を扱う画面のグループ）に画面が追加されます。

![Retrospectives の画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474869/9c55c36f-b60a-2577-521f-fb2b93b6a24b.png)


この画面でいわゆる KPT ( Keep, Problem, Try ) の手法で振り返りを行うことができます。

スプリント期間用の画面を作成して開始します。

良かったこと Keep を左の「What went well」に、良くなかったこと Problem を右の「What didn't go well」に追加します。メンバーがそれぞれ自分のアカウントで Azure DevOps を開いてそれぞれ追加でき、ちゃんと名前も表示されるので、リモートでも出来て、ホワイトボードでやるより手間がありません。

![Voteで投票した様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474869/0b99d945-723f-9070-921e-99e0a42ab884.png)


「Group」で意見をまとめたり、「Vote」では気軽に「いいね！」感覚で投票できたり、良い感じです。

![Act でタスクを追加することができる様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474869/6826bc3d-d45f-b9d4-c060-660c809cbfc3.png)


最後に「Act」の画面で、Azure DevOps の work item（タスクやバックログなど）を追加することができます。いわゆる Try として、改善のために次のスプリント期間でやることを、ちゃんと、Azure DevOps 標準のタスクとして登録して、実施することができます。これがかなりい良い！！

「KPTを話し合って終わり」ってよくあって、その後 T が具体化されずに、毎週同じ T が続くことってあるんですよね。でも、Work item を Sprints に登録するのなら、（Azure DevOps を使いこなせるようになったチームであれば）実行可能な具体的なタスクを作ることが自然にイメージされます。そういうタスクでなければ落ち着かない。

Retrospectives で追加したタスクは、そのまま Sprints に親の無いタスクとして登録されます。

![作成されたタスクがSprintsに表示される様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474869/3637f636-1a33-919e-2ff7-08c31acd6631.png)


Epic・Feature・Product Backlog  に関連付けたタスクしか作らないようにしていると、これらのタスクは少し居心地が悪いですが、実際にちゃんとスクラムをやっていると、Product Backlog には関連づけにくい、でもスクラムを維持・改善するにやらなければならない、そういうタスクってありますよね。でも、タスクを任意に追加できるのは、それはそれでちょっとやりずらい。そういう時に、Retrospectives で追加したタスクは OK とすると、チームとして運用がしやすいように思います。

Azure DevOps ではスクラムを開始する最初に、スプリントの期間（日付）を設定します。この時一緒に、Retrospectives をインストールして、最初の振り返りの画面を作っておくと良いでしょう。

Retrospectives は スプリント振り返り の他、スプリントレビューでもらったフィードバックをその場でリアルタイムに追加することにも使えます。Retrospective と Review といった文字と、スプリント期間を組み合わせた名前を付けるとわかりやすいと思います。
Flutterでブックリーダーを作る

# やりたいこと
Flutterで作ったAndroidアプリ上で電子書籍を読みたい。

# やったこと
Flutterのepubパッケージを使って、インターネット上のepubファイルを画面表示させた。
横スクロールでページングさせたかったが、後述する別のパッケージを利用した方が良さそう。

# 対応
```pubspec.yaml
  dependencies:
    epub:
    flutter_html:
```

```main.dart
  import 'dart:async';
  import 'package:epub/epub.dart' as epub;
  import 'package:http/http.dart' as http;
  import 'package:flutter/material.dart';
  import 'package:flutter_html/flutter_html.dart';
  
  class Reader extends StatefulWidget {
    @override
    _ReaderState createState() => _ReaderState();
  }
  
  class _ReaderState extends State<Reader> {
    String content = 'no epub file';
  
    @override
    void initState() {
      _showReaderInfo();
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('ブックリーダー'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Html(
              data: content,
            ),
          ),
        ),
      );
    }
  
    _showReaderInfo() async {
      epub.EpubBook book = await fetchBook('epubのURL');
      epub.EpubContent bookContent = book.Content;
      Map<String, epub.EpubTextContentFile> htmlFiles = bookContent.Html;
      setState(() {
        // インデックスを変えることで、epubの次のチャプターになる
        content = htmlFiles.values.toList()[0].Content;
      });
    }
  
    Future<epub.EpubBook> fetchBook(String url) async {
      final response = await http.get(url);
  
      if (response.statusCode == 200) {
        return epub.EpubReader.readBook(response.bodyBytes);
      } else {
        throw Exception('Failed to load epub');
      }
    }
  }
```

# 参考
https://pub.dev/packages/epub

# 今後参考にしたいもの
横スクロールでページング
https://github.com/creatint/light-old
Android ぱっと見でわかるConstraintLayout

`ConstraintLayout`で最低限おぼえておくべき4つ

* layout_constraintTop_toTopOf
* layout_constraintTop_toBottomOf
* layout_constraintStart_toStartOf
* layout_constraintStart_toEndOf

![android-layout01_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0dd9d077-900a-d356-4124-59b86a463548.png)
Active Storageでファイルアップロード時に403エラー

# 現象
Active StorageでS3にファイルアップロードした際に以下のエラーダイアログを表示し、エラー。
3回に1回くらいの割合で失敗しているため、CORSやパーミッションのエラーではない。

```
  Error storing "ファイル名.pdf". Status: 403
```

Chrome Developer ToolsのNetworkタブ

```
  Request URL: 割愛(ActiveStorageのurl_forヘルパー押下により作成されたリンク)
  Request Method: PUT
  Status Code: 403 Forbidden
  Remote Address: XXX.XXX.XXX.XXX:443
  Referrer Policy: strict-origin-when-cross-origin
```

# 環境
- Ruby 2.7.0
- Rails 6.0.2.1
- Active Storage 6.0.2.1
- S3

# 原因
セキュリティ対策として、S3の署名付きURLの有効期限を1秒にしていたことが原因と思われる。

```active_storage.rb
  Rails.application.config.active_storage.service_urls_expire_in = 1.second
```

# 対応
有効期限を適切に(今回は10秒)変更した。

```active_storage.rb
  Rails.application.config.active_storage.service_urls_expire_in = 10.second
```
pgAdmin4でPL/pgsqlをデバッグする

# pgAdmin4でPL/pgsqlをデバッグする

pgAdmin4を利用して、PL/pgsqlをデバッグしてみます。
同様の記事は他にもあるのですが、古いバージョン（pgAdmin3）を対象としているものが多いので、新しいバージョンの環境で試してみました（手順はほぼ同じでしたが・・・）
また、pgAdmin3ではエラーとなり使用できないという記事がいくつか見られたのですが、pgAdmin4では（少ししか使っていませんが）問題ないようです。


今回使用する環境は以下のとおりです。

- PostgreSQL 12(CentOS 7.5)
- pgAdmin4 4.19(Windows版)



# pldebuggerのインストール


```
$ git clone git://git.postgresql.org/git/pldebugger.git
$ cd pldebugger
$ USE_PGXS=1 make
$ sudo USE_PGXS=1 make install
```

使用するためにはpostgresql.confを以下のように変更します。変更後、PostgreSQLを再起動します。

```
shared_preload_libraries = 'plugin_debugger'
```

モジュールを使用するためには、以下を実行します。

```
# create extension pldbgapi;
CREATE EXTENSION
```


# 実行方法

pgAdmin4で対象のFunctionを選択して、コンテキストメニューから[Debugging] - [Set breakpoint]を選択します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/9638a9cf-ac10-26a6-977e-aab661213bc5.png)

以下のようにテスト用のfunctionを実行します。

```
postgres=# select test_func();
```

pgAdmin4では以下のようにbreakpointを入れながらデバッグができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/bec51227-3f6c-4fd1-57e8-ba8c128fc39c.png)

functionの実行が終わると以下のように出力されました。

```
postgres=# select test_func();
INFO:  Current timestamp 1: 2020-04-03 00:32:42.186011
INFO:  Current timestamp 2: 2020-04-03 00:32:51.495337
INFO:  Current timestamp 3: 2020-04-03 00:32:53.966918
 test_func 
-----------
 
(1 row)

```

今回使用したfunctionは以下のとおり。

```sql
CREATE OR REPLACE FUNCTION public.test_func()
RETURNS void AS $$
DECLARE
BEGIN
  RAISE INFO 'Current timestamp 1: %', timeofday()::TIMESTAMP;
  RAISE INFO 'Current timestamp 2: %', timeofday()::TIMESTAMP;
  RAISE INFO 'Current timestamp 3: %', timeofday()::TIMESTAMP;
END;
$$ LANGUAGE plpgsql;
```


# 参考

- [pldebugger](https://git.postgresql.org/gitweb/?p=pldebugger.git;a=blob_plain;f=README.pldebugger;hb=54d993c04809da7cda79013a55b679a615c7dce1)
vimで読み取り専用ファイルを編集、保存する

EC2上でreadonlyファイルを編集しようとした時に一瞬詰まったので備忘録を。
やり方は2通りある。

# 方法１：ファイルを開く段階でsudoコマンドを付ける

一番シンプルで一番簡単な方法。

```:ターミナル
$ sudo vim 編集したいファイルを選択
```

これならvimで編集後、普段通り:wqで保存が可能。

# 方法２：readonlyのまま編集したファイルを強制保存

これが一番よくあるパターンだと思う。てか私がなったからこれを書いているわけだが。
編集した後にそういやsudoで実行してない！となっても焦らず下記コマンドを叩けば良い。

```:vim
:w !sudo tee % 
# 内容が出力される
```

それぞれ意味は
**w**： 保存
**!**： その後のコマンドを指示
**sudo**： 管理者権限で実行
**tee**： ファイルの出力と標準出力を同時に行うコマンド。sudoと組み合わせるとファイルの上書きが可能
**%**： 現在開いているファイルを指定



その後:q!で終了する。

```:vim
:q!
```

これで無事保存される。
AWSの全体像

#AWSとは
AWS(Amazon Web Service)とはAmazonが提供するWEBサービスを構成するためのインフラ系のサービスです。AWS側で世界各地にあるサーバーを仮想化しており、ユーザーはその仮想化されたサーバーをカスタマイズし使用できます。

##AWSのメリット

従来のオンプレミスのサーバーと比較して私が思うAWSのメリットは以下です

・料金形態が月ごとのサービス使用量で決まるため料金のため無駄がない
・世界各地にあるデータセンターに分散してデータを保存できるため可用性が高い
・サーバー・DB側の多くをAWS側に任せられる(信頼性)
・管理サービスが充実している(CloudWatch,CloudTrail)
・ユーザー側で自由に設計できる

##AWSのデメリット

逆にAWSのデメリットは以下だと私は思っています

・サービス多すぎ(数：175以上、設計が大変そう)
・料金形態が月ごとのサービス使用量で決まるため見積もりが難しい

#AWSの全体像

AWSを理解するには各メインのサービスを理解し、AWSの全体像を把握するのがいいと思う。
各段階ごとに重要度の高いサービスをまとめる。(今後、各サービスに対するリンクを記載して更新していく予定です)

<img width="1202" alt="スクリーンショット 2020-04-03 6.04.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272157/6e3f6533-be64-046c-b59f-91c1bbdcd2c9.png">

出典：https://aws.amazon.com/jp/products

- 分析
- アプリケーション統合
- AR及びバーチャリティ
- AWSコスト管理
- ブロックチェーン
- ビジネスアプリケーション
- コンピューティング
- コンテナ
- カスタマーエンゲージメント
- データベース
- 開発用ツール
- エンドユーザーコンピューティング
- Game Tech
- IoT(モノのインターネット)
- Mechine Learning
- マネジメントとガバナンス
- メディアサービス
- 移行と転送
- モバイル
- ネットワーキングとコンテンツ配信
- 量子テクノロジー
- ロボット工学
- 人工衛星
- セキュリティー・アイデンティティ・コンプライアンス
- ストレージ

※この記事は随時更新します。

本記事は以下の方を対象としています。お力になれたら幸いです。
・AWSを学ぼうとしているが、何から手をつけていいかわからない方
・AWSの全体像を見失ってしまった方

自分はまだ未熟物ですので、ご指摘等あればお気軽にコメントしてください。
Solarized 表


[Solarized](https://ethanschoonover.com/solarized/) は、コードエディタやターミナルエミュレータで使用するカラースキームの一種。
いつも値がわからなくなるので、表にしておく。

<table bgcolor="#fdf6e3" style="color:#073642">
  <tr><th></th><th>NAME</th><th>HEX</th><th>R</th><th>G</th><th>B</th></tr>
  <tr><td><font color="#002b36">■</font></td><td>base03 </td><td>#002b36</td><td>  0</td><td> 43</td><td> 54</td></tr>
  <tr><td><font color="#073642">■</font></td><td>base02 </td><td>#073642</td><td>  7</td><td> 54</td><td> 66</td></tr>
  <tr><td><font color="#586e75">■</font></td><td>base01 </td><td>#586e75</td><td> 88</td><td>110</td><td>117</td></tr>
  <tr><td><font color="#657b83">■</font></td><td>base00 </td><td>#657b83</td><td>101</td><td>123</td><td>131</td></tr>
  <tr><td><font color="#839496">■</font></td><td>base0  </td><td>#839496</td><td>131</td><td>148</td><td>150</td></tr>
  <tr><td><font color="#93a1a1">■</font></td><td>base1  </td><td>#93a1a1</td><td>147</td><td>161</td><td>161</td></tr>
  <tr><td><font color="#eee8d5">■</font></td><td>base2  </td><td>#eee8d5</td><td>238</td><td>232</td><td>213</td></tr>
  <tr><td><font color="#fdf6e3">■</font></td><td>base3  </td><td>#fdf6e3</td><td>253</td><td>246</td><td>227</td></tr>
  <tr><td><font color="#b58900">■</font></td><td>yellow </td><td>#b58900</td><td>181</td><td>137</td><td>  0</td></tr>
  <tr><td><font color="#cb4b16">■</font></td><td>orange </td><td>#cb4b16</td><td>203</td><td> 75</td><td> 22</td></tr>
  <tr><td><font color="#dc322f">■</font></td><td>red    </td><td>#dc322f</td><td>220</td><td> 50</td><td> 47</td></tr>
  <tr><td><font color="#d33682">■</font></td><td>magenta</td><td>#d33682</td><td>211</td><td> 54</td><td>130</td></tr>
  <tr><td><font color="#6c71c4">■</font></td><td>violet </td><td>#6c71c4</td><td>108</td><td>113</td><td>196</td></tr>
  <tr><td><font color="#268bd2">■</font></td><td>blue   </td><td>#268bd2</td><td> 38</td><td>139</td><td>210</td></tr>
  <tr><td><font color="#2aa198">■</font></td><td>cyan   </td><td>#2aa198</td><td> 42</td><td>161</td><td>152</td></tr>
  <tr><td><font color="#859900">■</font></td><td>green  </td><td>#859900</td><td>133</td><td>153</td><td>  0</td></tr>
</table>
WordPress5.4でダッシュボードに追加されたサイトヘルスを非表示にする

通知に気づかないふりをしていたけれどやっぱり現れたやつ。

<img width="629" alt="sitehealth" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97451/72507951-e236-a8a9-8fb7-e1ab3d4e5045.png">

ログイン直後に視認されてしまうので色々都合が悪い。
よって消す。

他のウィジェット同様に

```php:functions.php
add_action('wp_dashboard_setup', function() {
    global $wp_meta_boxes;
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_site_health']);
});
```

見たいときは
ツール＞サイトヘルス　でも見れる。
ここも消したいときは

```php:functions.php
add_action('admin_menu', function() {
    remove_submenu_page('tools.php', 'site-health.php');
});
```

>[管理側の諸々の非表示まとめ](https://qiita.com/ki6ool/items/fc25798aa62f7833cd94)
Azure WebAppsへのwarデプロイ(maven)

#目的
GitActionsがプレビュー版となったため、mavenビルドをgitに行ってもらい、WebAppsにデプロイする

## １：アプリ準備
まずは、Maven + TomcatのJavaアプリケーションを作成する

mavenは以下のように記述した

```
  <properties>
  	<java.version>1.8</java.version>
  	<maven.compiler.source>1.8</maven.compiler.source>
  	<maven.compiler.target>1.8</maven.compiler.target>
  	<RESOURCEGROUP_NAME>DeployTest</RESOURCEGROUP_NAME>
  	<WEBAPP_NAME>MavenJsptest</WEBAPP_NAME>
  </properties>
  <dependencies>
  	<dependency>
	    <groupId>javax.servlet</groupId>
	    <artifactId>javax.servlet-api</artifactId>
	    <version>4.0.1</version>
	    <scope>provided</scope>
	</dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
  <build>
    <finalName>ROOT</finalName> <!-- Azure default root pass -->
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.6</version>
        <configuration>
          <packagingExcludes>WEB-INF/lib/javax.servlet-api-3.0.1.jar</packagingExcludes>
        </configuration>
      </plugin>
    </plugins>
  </build>
```

特に詰まったのが、<font color="DeepPink">finalName</font>の部分で、これはmvn install で生成されるwarファイル名の名称。
WebAppsがROOT以下をデフォルトで参照しにいくため、これ以外の指定だとエラーが発生していた。

※もし、別の名前でもエラーを起こさない方法があれば教えていただきたいです！

アプリを作り終えたら、GitHubにプッシュ

## ２：WebApps設定
App Service Plan および WebAppsを作成（Javaの環境はアプリに合わせる）して、「デプロイセンター」を選択し、GitActionや作成したアプリのリポジトリを選択。

最後にyamlが出力されるが、この中を見てみると、Javaのバージョンの選択およびmvn clean installしていることがわかる

## ３：確認
ここまでやれば、GitHubのアクションが動作していることが確認できる。
問題がなければ、デプロイされ、正常にアクセスすることができる

## 感想
JenkinsやAzure Pipelineも素晴らしいツールだが、設定や構築が少し面倒なのが気になっていたため、今回のGitActionsがGitHubとAzureさえ登録すれば構築不要で使えたので、とても楽だった。

今回はyamlも特に編集しなかったがカスタマイズすることで（単体テストの実行など）より効果的な開発ができると思う。
初心者によるプログラミング学習ログ 279日目

#100日チャレンジの279日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
279日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>279日目<br>・xdデザインカンプからのサイト模写<br>・メンターさんからの修正をやる<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1245803904878522371?ref_src=twsrc%5Etfw">April 2, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
声に出して読みたいAI用語

#目的
AI用語で、なんて読めばいいのか、わからないものがある。よく目にするものでもある。
だから、
AI関連用語をどう発音したらいいのかを、調べて示す。
厳密な発音でなく、カタカナ表記でどうなるかという程度の発音。
AI専門用語以外にも、AI関連のソフトウェア開発等で出会う可能性のある単語も、ついでに、扱う。

#前提
**ネイティブがどう発音しているかではなく、日本で発音するならば、どう発音するのが一般的か？を示す。**
つまり、多く日本で既によく発音されているものは、それに従う。
（下記、英語のYoutubeを優先4にしていることでわかると思います。）

#調べ方の優先順位
優先順位は、以下。
優先１：一般英語の場合は、カタカナ表記のある辞書の情報に従う。
優先２：固有名詞等で、辞書で扱われないものは、
　　　　　カタカナ表記が、ニュースの記事や、Wikipedia等で、示されているものはそれに従う。個人ブログ等は、とりあえず、あまり、参考にしない。
優先３：上記を満たさない場合は、Youtube（日本語）で日本語の講演などでの発音に従う。
優先４：上記を満たさない場合は、仕方がないので、Youtube(英語）で、英語の発音に従う。

#調べた結果

**先に（優先１から順）記載しているものがお勧め（同一セル内でも）。**

|単語|優先1（辞書）|優先2（記事）|優先3<br>（YouTube日本語）<br>優先4<br>（YouTube英語）|備考|
|:---:|:---:|:---:|:---:|:---:|
|A|
|arXiv||アーカイヴ *wi||||
|augmentation|オーグメンテイション *英j|||||
|C|
|Coral|||[日本語]コーラル *y5<br>[英語]コーラル *y4|Google Coral TPU|
|CIFAR-10|||[英語]シーファーテン *y2||
|Chainer||チェイナー *日k|[日本語]チェイナー *y3||
|D|
|define|ディファイン *英j|||||
|H|
|height|ハイトゥ *英j|||ヘイトだったか、どっちがどっちかわからなくなりますが、**「ハイトゥ」**みたいです。|
|I|
|inference|インファレンス *英j|||インフェでなくて、インファ|
|K|
|Keras||ケラス *般2|[日本語]ケラス *y3||
|M|
|MNIST||エムニスト　*般1|||
|N|
|Nervana|||[英語]ナ**バー**ナ *y1|NervanaSytems|
|Numpy||ナムパイ *日k |||
|P|
|PyTorch||パイトーチ *日k|[日本語]パイトーチ *y3||
|R|
|ReLU||レル　*般3|||
|T|
|TensorFlow||テンソルフロー *wi *日k<br>テンサーフロー *日k||||
|W|
|width|ウィズ *英j|||カタカナ表記では、withと同じ発音。厳密にどうかはわかってません。|

*Wi Wikipedia
*英j　英辞郎 on the Web
*日k 日経関連の記事
https://xtech.nikkei.com
https://www.nikkei.com
https://business.nikkei.com
*y1 YouTube
https://www.youtube.com/watch?v=7q4tguDcXXg
https://www.youtube.com/watch?v=zEzm-rMwyVo
*y2 YouTube
（単に、検索上位）
https://www.youtube.com/watch?v=3BXfw_1_TF4
https://www.youtube.com/watch?v=HRK1Qx-SQLk
*y3 YouTube
【深層学習】深層学習の実装｜深層学習フレームワーク、Keras
https://www.youtube.com/watch?v=Vo9Atzozv0w
*般1
(一般のサイトの意）
https://www.codexa.net/cnn-mnist-keras-beginner/
*般2
(一般のサイトの意）
https://aizine.ai/glossary-keras/
*般3
https://quizlet.com/jp/442884711/g%E6%A4%9C%E5%AE%9A2019-%E7%8F%BE%E4%BB%A3%E3%81%AE%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92-flash-cards/
*y4 YouTube
（単に、検索上位）
https://www.youtube.com/watch?v=Jgm25QdF90A
*y5 YouTube
（単に、検索上位）
https://www.youtube.com/watch?v=tKBu-7tR3g8&t=49s



# 調べ方などに関する細かい情報
## どう調べているか、調べた結果を示しているか
・英辞郎で、[US][UK]が区別して示されている場合は、[US]を採用。
・優先4の場合は、太字は、アクセントがあると思ったところ。
　実際には、この記載を日本語風に変更していい気がする。
　　例)ナ**バー**ナ  →日本語風：ナバナ
・複数の発音がある場合は、できるだけ、複数示す。
・wikipediaと一般の記事では、wikipediaが優先と考えている。
・**できるだけ信頼度の高いサイトの情報をもとに記載するようにしているが、
　　経験的に、ワタシがよく知っている事項、まちがいないと思っている事項は、一般のサイトを参照している場合もある（手抜き）。**
・会員登録がいるサイトは、さけている？


## 調べる過程で経験したこと、感じたこと
・「日経」関連は、比較的、カタカナ表記に熱心。おじさんからニーズがあるからだと思う。
・一般英語の場合、英語をカタカナ表記に変換してくれるサイトがいくつかあるが、発音記号ベースだったりで、どうしても、現実にあわない場合がある。
やはり、直接カタカナ表記している辞書のほうが安全。そのため、Web英辞郎を参照している。

#　訂正履歴（おもいっきり間違えたことを示した場合のみ）
**おもいっきり間違えたことを記載し、修正した場合のみ、ここにその情報を記す**
（そもそも、まだ、あまり、記載していないので、）該当ありません。

#まとめ
特にありません。
できるだけ、間違わないようにはします。（**[再掲]日本だと、こう発音されますよ、というのを優先しているので、ネーティブがどう発音しているかは気にしていない。優先4は、しぶしぶ。**）
コメントなどあれば、お願いします。:candy:
日立 統合システム運用管理 JP1 について


# 1.統合システム運用管理 JP1とは何か

システムの運用・保守に携わった経験のある方は既にご存知かと思いますが
システムの運用管理ソフトであり、**稼働状況把握**、**業務の自動化**などを
統合的に行うことのできる製品です。
私の経験則ではありますが、一般的に言われる大企業で多く使用されている
イメージが強くあります。

JP1は主に以下4つに分類され、役割別に各種製品が提供されています。

●Intelligence
 └統合管理★
 └ITサービス管理
 └IT運用自動化

●Intelligent Monitoring
 └インフラストラクチャ管理
 └パフォーマンス管理★
 └ネットワーク管理★

●Intelligent Automation
 └ジョブ管理★
 └バックアップ管理

●Intelligent Governance
 └資産・配布管理
 └セキュリティ管理

※主に導入されるものには「★」を記載しています。

# 2.具体的にどのような場面で使用するか

上記にて役割別に分類されたものを挙げさせていただきましたが
中でも最も利用されているのが、**ジョブ管理製品(JP1/AJS3)** かと思われます。
主に定例業務の自動化を図る製品となります。

例)
　・日次で行う各拠点ごとの集計処理を夜間に自動化
　・月次で行う定期バックアップ処理を自動化　　　　　など

ここで疑問に思われるのではないでしょうか。

**Windowsであればタスクスケジューラーでいいのではないか**
**Linuxであればcronを使用すればいいのではないか**

確かにその通りだと思います。
ジョブ管理という観点のみで考えると各OSの機能などで満たせる要件かと思いますが
ジョブ管理製品の他にも、システムを一元管理させるような製品が多くあります。

※処理を行うサーバのみではなく、**システム全体を管理**するイメージを
　持っていただければと思います。

同業他社製品(Zabbix、Hinemos など)が数多くありますが、
その中でもJP1は国内シェア率約27%と
トップクラスのシェア率をキープしています。
一般的に名の知れている中小企業、大企業では導入されているところも
多いかと思います。

# 3.おわりに

初回ということでものすごく簡単にJP1について記載しました。
(内容ありませんが許してください・・・)

需要があるかどうかはわかりませんが、次回からは主要製品についてまとめます。
また、業務で最も使用されているであろうJP1/AJS3のジョブの組み方～トラブルの
対応に至るまでを、まとめていきたいと思います。
オブジェクトの配列で同一のプロパティ値を持つ要素を除外したい

## やりたいこと

```typescript

type Item = {
  id: number
  value: string
};

const items: Array<Item> = [
  { id: 1, value: 'foo' },
  { id: 2, value: 'bar' },
  { id: 3, value: 'bar' },
  { id: 4, value: 'baz' },
  { id: 5, value: 'baz' }
];

// 配列itemsからidの値は気にせず、valueの値が同じものを消したい！
const expect: Array<Item> = [
  { id: 1, value: 'foo' }, 
  { id: 2, value: 'bar' },
  { id: 4, value: 'baz' }
];
```
## 方法
* [filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)と[indexOf()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)を組み合わせることで出来ました。

```typescript
const result = items.filter((item, index, self) =>
  self.map(e => e.value).indexOf(item.value) === index
);

result.forEach(e => console.log('id:' + e.id + ',' + 'value:' + e.value));
// id:1,value:foo 
// id:2,value:bar 
// id:4,value:baz 
```

* filter()やmap()の第３引数ってどういう時に使うんだろう:thinking:と思っていましたが、こういう用途があるんですね。勉強になりました。
React Navigationのヘッダー下のborderを消す

# 前提
- ReactNative 0.61.4
- react-navigation v5

# 問題
ヘッダーとコンポーネントが連続して一つに見える、以下のようなデザインを実装したいのだが、
境界の白線が消せない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224815/3b290960-c84a-fb34-2c4e-61f6cd9329d2.png)

一体どこをいじったらいいのか。

# 方法
`shadowColor: 'transparent'` をheaderStyleに設定すれば消える。

※追記（Androidの方はこれも必要でした。）
`elevation: 0` をheaderStyleに設定すれば消える。

念のためコードは以下

```tsx

<NavigationContainer theme={Theme}>
     <Stack.Screen
          name={screen}
          component={Screen}
          options={{
            title: 'Header Title',
            headerStyle: {
              shadowColor: 'transparent', //ここ(iOS)
              shadowOpacity: 0, // ここ(iOSはこちらでも可)
              elevation: 0, // ここ(Android)
            },
          }}
        />
      </Stack.Navigator>
</NavigationContainer>
```

# 参考記事
- https://github.com/react-navigation/react-navigation/issues/865
- https://stackoverflow.com/questions/42709730/how-do-i-hide-the-shadow-under-react-navigation-headers
LambdaからAuroraに接続する時に注意すること

# TL;DR

- [RDS Proxy](https://dev.classmethod.jp/articles/using-relational-databases-with-aws-lambda-easy-connection-pooling/)の発表により、LambdaからAurora（RDS）が利用しやすくなりました。
- ただし、ORMライブラリが採用するコネクションプールがあれば、無効化されているかの確認を忘れずに。

# LambdaからAurora?

LambdaからAuroraに接続することは、長くコネクションの枯渇問題によりアンチパターンとされてきました。
そんな中、昨年のre:Invent2019でRDS Proxyが発表されたことで、今後の採用が増えそうな予感があります。
RDS Proxyが何を解決するかは、[なぜAWS LambdaとRDBMSの相性が悪いかを簡単に説明する](https://www.keisuke69.net/entry/2017/06/21/121501)を読んでいただければと思います。

# 実際にやってみた

![CloudWatch Management Console 2020-04-03 02-18-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65380/2d929387-9896-144c-a67a-d95677b96192.png)

上記のグラフは、あるLambdα関数内部でRDSへの単一の接続を必要とするケースでのCloudWatchで見るDatabaseConnectionsのグラフです。ここで注目すべきは、矢印の直前で約48,000付近まで達している点です。

![CloudWatch Management Console 2020-04-03 02-28-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65380/dd8e63dc-8e16-9da3-ba6c-98592a606c6a.png)

これに対し、LambdaのInvocationsのグラフでは、特にこれだけのコネクションを必要とするほどの呼び出し回数を示していません。せいぜい1,000未満。

# なにが起こったのか？

この時採用していたORMは、[Slick](https://scala-slick.org/)でした。これはScala界隈では有名なフルスタックWebフレームワークPlayframeworkでも採用されており、デファクトなORMになりつつあります。このSlickで注意すべきが、configの設定です。

```config
slick {
    profile = "slick.jdbc.MySQLProfile$"
    db {
        driver = "com.mysql.jdbc.Driver"
        url = "jdbc:mysql://url:3306/table"
    }
}
```
通常のWebアプリケーションの設定では、上記のような設定があれば、その他細かい設定をすることなく、Slickは使い始めることができます。しかし、これで実行を繰り返した場合に、以下のエラーが発生しはじめました。

```conf
slick-pool - Connection is not available, request timed out after 1000ms.: java.sql.SQLTransientConnectionException
```

これは一体何が発生しているのでしょうか。Slickは3.xにおいては、明示的にコネクションプールの無効化をしない場合、内部的にデフォルトで[HikariCP](https://github.com/brettwooldridge/HikariCP)をコネクションプールとして採用します。つまり、Lambdaで起動しているにもかかわらず、内部的なコネクションプールであるHikariCPがコネクションをデータベースとの間に持った状態になります。そして、そのコネクションはLambdaのライフサイクルの中で、正常に解放されないままにリークした状態になります。
実際、グラフの矢印よりも後で、以下の設定を反映させるとDatabaseConnectionsは激減し、Innvocationとも大きく乖離することは解消されたことが分かります。

```config
slick {
    profile = "slick.jdbc.MySQLProfile$"
    db {
        driver = "com.mysql.jdbc.Driver"
        url = "jdbc:mysql://url:3306/table"
        connectionPool = disabled
    }
}

```

# まとめ
今回の件は、相当量の負荷をかけ続けたテストをしない限り、事前に発見することはとても難しい問題でした。
RDS Proxyがリリースされることで、今後ますますLambdaからAuroraを利用するケースが増えてくるかもしれません。自身がお使いになるORMライブラリが内部的にコネクションプールを持っていないか、そしてそれは無効化されているか、これらは今回のScala/Slickの組み合わせに限ったことではなく、是非ご確認いただければと思います。
UnityのNativeAudioPluginについての情報まとめ。

### はじめに

同内容は以下ページに保存済みです。
https://machiaworx.net/?p=485

### そもそもNativeAudioPluginって、何をするもの？

公式の説明：
https://docs.unity3d.com/Manual/AudioMixerNativeAudioPlugin.html
（日本語版は単に直訳っぽいので、英語版のURLを参照した）

本来だとMixerに追加するエフェクト、の扱いみたい。
ただ、アウトプットを加工した上で出力することが可能なため（Callback関数で処理）、
インプットをすべてスルーしてアウトプットの処理を書くことで、
シンセサイザー等を実装してコントロールすることが可能。
ちなみにGUIを実装してそれと連携して鳴らすことも可能です。

公式リポジトリ
https://bitbucket.org/Unity-Technologies/nativeaudioplugins/src
（公式）

https://github.com/keijiro/MinimumAudioPlugin
（kzrさん作の最小限構成）

### 利用手順（ザックリと）

* プラグイン作成
* フォルダ配置
* 名前変更（「audioplugin_XXX」という名前にすることでNativeAudioPluginと認識する
* ミキサー上にエフェクトとして処理を追加（Add Effect）
* 各種Callback関数が自動的に処理を開始する

### プラグイン作成手順

* DLL作成準備を行う（プロジェクトファイルが存在するのでそれ使いまわしでもいい）
* リポジトリ内ファイル「AudioPluginInterface.h」を読み込ませる
* 各種Callback関数の中身を記載する
* コンパイル
* 配置・名前変更（上記利用手順参照）

### 挙動のTips

* Mixerに入ってきた音に対して自動的に処理する形
* エフェクト名称についてはプラグイン内部で定義する。（これはどちらかというと実装Tipsかなあ）
* ミキサー自体をソロにするとCallbackも止まるケースがある模様
* AudioSourceへの直接的なアクセスは不可能
あくまで出力されたオーディオに対しストリームでアクセスできる

### 実装Tips

* Callback処理については通常特段のコントロールは不要。常に鳴るものとして処理を書いておく
* サンプリングレートは各環境に依存するため、各種構造体から取得する必要がある。
* Callback関数の引数・戻り値については「AudioPluginInterface.h」に記載がある
* Callback関数内に分岐によって「書き込まない」処理を行うとグリッチが発生するので注意
* つまり「何もしない処理を書き込む」前提で処理を行う必要がある
* Editor上での処理が必要であれば特定Callback関数への値引き渡しで調整可能
* DLL上で関数を公開することで、C#等からの関数呼び出しが可能
* ただしマングリングが必要なため、書き方は注意が必要。
* 記述例：「extern “C” UNITY_AUDIODSP_EXPORT_API void xxx(xxx xxx) {}」
（好きな関数名・引数・戻り値の型を決められます）
* マングリングについての参考URL：https://albel06.hatenablog.com/entry/2016/03/17/180000
* 公開した関数は以下記載を追加することでC#での呼び出しが可能。
* 記載例：[DllImport(“AudioPluginSinOsc”)]private static extern void xxx();
* Editor上での読み込みは、「常に読み込まれる形になる」ため、プラグインの内容を変更する際、Editorですでに読み込んでいる場合はEditorの再起動が必要になる。
* あとEditor上だとずっと読み込まれてる形なので、状態を保管している場合、初期化されない状態がずっと続くため、繰り返しテストする場合に不具合が起こることが予想される。
（素直にシーン開始時に実行する自前の変数初期化処理書いたほうがいいかも）
【Java入門】ClassとMethod

# プログラムの構成
一つのプログラムは複数のClassが集まって完成したもの。

# Classとは？
設計図?
そもそも、Class団体よりは👇の3つを同時に覚えた方がわかりやすい。

- Class（クラス）
- Instance（インスタンス）
- Object（オブジェクト）

単純に言うと！！！
自分が作りたいものに対して設計図を書き、
設計図（Class）の通りにゴリゴリコードを書いて実際に作られたもの（Instance）が出来上がったのが完成物（Object）

# Methodとは？
オブジェクト指向における「操作」を定義したもののこと。

# Methodの種類
- Instance method（インスタンスメソッド）
- Class method（クラスメソッド）

# Instance methodとは？
インスタンスに属するメソッドのことであり、インスタンスに対しメッセージを送信する事で実行。

# Class methodとは？
クラスに属するメソッドのことであり、クラスに対しメッセージを送信する事で実行。
主要４パブリッククラウドのVPC,Subnetの構成を比較してみた

#主要４パブリッククラウドのネットワーク構成を比較してみた
　いま現在よく使われている主要４パブリッククラウドについて勉強していたところ、IaaSとして利用する場合の最初の関門であるネットワークについてかなりの考え方の違いがあることがわかりましたのでまとめてみました。
##VPCの考え方
###AlibabaCloud,AWS,Azureの場合
　クラウドでは仮想ネットワークの中に仮想サーバなどのリソースを配置して行きます。この仮想ネットワークをAWSやAlibabaCloud, GCPではVirtual Private Cloud（VPC）と呼んでいます。AzureではVNetと呼んでいます。
　AWS,AlibabaCloud,Azureではリージョンの中にVPCを作る方式です。地域に別れたデータセンター群（リージョン）の中に仮想ネットワークを作る概念です。リージョン間の通信もVPC間を接続するVPC Peeringを作らないとインターネット越しの通信になってしまいます。
![3A-VPC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113808/b6aae303-eeca-ec8f-bff6-c7de925f2e26.png)

＃＃＃GCPの場合
　GCPはレガシーなIPネットワークの考え方を超えたクラウドネイティブな考え方なのでしょうか、VPCは全世界のリージョンを跨いで作られます。VPCとVPCを繋ぐ場合はVPC Peeringにより接続することもできます。
![GCP-VPC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113808/d83e966e-4a30-e9bd-ef1c-b3ff25512872.png)

##Subnetの考え方
###AlibabaCloudとAWSの場合
　この２つのクラウドサービスはほぼ同じ考え方です。どちらかと言えばレガシーなIPネットワークをクラウド上でも受け継いでいるようです。VPCはリージョンに縛られてましたが、SubnetもAZに縛られています。AZの中でSubnetが作られます。
![2A-Subnet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113808/6672f198-8c4e-ab98-16bd-e0412c6ebc4f.png)
###Azureの場合
　AzureではAZを跨いでSubnetが設定されます。仮想サーバ(VM)を作る場合にサーバレベルでAZを選択することでマルチAZを活用した可用性を実現することができるようです。
![Azure-subnet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113808/a915add7-3201-e07c-9296-931ba672e95d.png)
###GCPの場合
　GCPでは、当初はSubnetを設定することができなかったそうです。2015年からSubnetの設定が可能になり、AutoとCustomの２つの方法があるようです。いずれの方法でもSubnetはリージョンの中に縛られて設定できます。AZは超えて設定されます。
  Autoでは10.128.0.0/9のCIDRブロックがVPCに設定され、リージョンごとに自動でSubnetが付与される仕組みです。リージョンが増えると勝手にSubnetが設定されます。
　Customを利用するとレガシーなIPネットワークのように独自にSubnetとCIDRブロックを作ることができます。
　ただ、VPCの中のIPアドレス空間は複数混在できるようで、１つのCIDRブロックだけでなく複数のCIDRブロックが混在しても成立するそうです。IPアドレス空間が混在したときにVPC間の接続やオンプレミスのIPネットワークとの接続に影響がないのか？興味があるところです。
![GCP-Subnet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113808/4611dfb9-9239-2f4f-d97b-b8ed8695ef60.png)
##まとめ
　AlibabaCloudとAWSは同じアーキテクチャーで考えることができそうです。AWSからAlibabaCloudに移行させるようなケースには便利ですね。AzureやGCPはAWSからの移行では単純にはできないためネットワークレベルから再設計が必要になりそうです。

##参考としたサイト
[AlibabaCloudドキュメントサイト：VPC ネットワークの計画](https://jp.alibabacloud.com/help/doc-detail/54095.htm?spm=a21mg.p38356.907453.15.272e2f9f3hkFyV&accounttraceid=1b0d5d1951f34d4cb71760d9d5424a21bkve)
[AWS のネットワーク設計入門](https://d1.awsstatic.com/events/jp/2017/summit/slide/D2T3-5.pdf)
[Azure 可用性ゾーンを使うならこんな構成](https://www.softbanktech.co.jp/special/blog/cloud_blog/2019/0045/)
[Azure Virtual Network とは](https://docs.microsoft.com/ja-jp/azure/virtual-network/virtual-networks-overview)
[Azure の Availability Zones の概要](https://docs.microsoft.com/ja-jp/azure/availability-zones/az-overview#services-support-by-region)
[GCEのSubNetwork対応による、変更点とAWSとの違い](https://iga-ninja.hatenablog.com/entry/2016/06/25/193219)
[GCPのVPC関係ヘルプ](https://cloud.google.com/vpc/docs/vpc?hl=ja)
MaixduinoをWebカメラにする

# はじめに

[Maixduino](https://www.seeedstudio.com/Sipeed-Maixduino-Kit-for-RISC-V-AI-IoT-p-4047.html) はカメラ、WiFiなどが付いているのでそのままWebカメラにすることができます。

# 準備

- [Maixduino](https://www.seeedstudio.com/Sipeed-Maixduino-Kit-for-RISC-V-AI-IoT-p-4047.html) まずはこれ
![Maixduino](https://media-cdn.seeedstudio.site/media/catalog/product/cache/ab187aaa5f626ad16c8031644cd2de5b/m/a/maixduino-kit_1.jpg)

# コード

コードは [GitHub](https://github.com/fukuen/maixduino-webcam-demo) をご覧ください。

SiPeed社から提供される標準のArduinoライブラリーに加えて、以下のライブラリーを使用しています。

#### GC0328カメラ

データシートでは、カメラがOV2640となっているが、実際にMaixduinoに付属していたカメラはGC0328だった。PlatformIOで使用するSiPeed社のArduino SDKではこのGC0328カメラは動作しない。そのため、GC0328カメラ用に [こちら](https://github.com/fukuen/Maixduino_GC0328) のライブラリーを使用する。

### ESP32 WiFi

PlatformIOで使用するSiPeed社のArduino SDKはM1wに内蔵されているESP8265用のため、Maixduinoで使用しているESP32はそのままで使えない。そのため、[ESP32 WiFi](https://github.com/fukuen/Maixduino_WiFiEsp32) を使用する。（[MaixduinoでWiFiを使用する](https://qiita.com/fukuebiz/items/9cf9bd3d685a1a9ecf4b) 参照）

### mDNS

mDNSが普及してきたので、mDNSにも対応してみた。 ArduinoのmDNSライブラリを、Maixduino用に変更して [mDNS](https://github.com/fukuen/ArduinoMDNS) 使用する。
ただし、iPhoneでは名前解決できたが、Windows 10のFirefoxからはできなかった。ESP32のmDNSに比べると、[ArduinoMDNS](https://github.com/arduino-libraries/ArduinoMDNS) はかなりシンプルなのでサポートしていない仕様があるのかもしれない。

# 最後に

LAN内のiPhoneでsafariを使用して http://maixduino.local/ を開くとカメラの画像が表示されました。
疲れからか、不幸にも画面付きのM5AtomでLチカしてしまう

後輩をかばいすべての作業を放棄したuzukiに対し、車の主、暴力団員谷岡が言い渡した示談の条件とは・・・。

冗談はおいといて、世の中こんなんですがM5Stackからはるばる新商品がとどきました。

![7AAF24F3-DFB5-4C63-AAA0-4A34BCCC4DFF.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/fb405c30-5e36-348e-9646-520c255f2d0e.jpeg)

M5Atom小さくて良いですよね。
技適も無事通過したので、ESP32 Picoが気軽に使えるのはすごくうれしいです。

ということで、仕事の合間に ~~現実逃避~~ 気分転換 でちょっと触ってみました。

## 環境構築

[FTDI driverは最新のじゃ無いとイケないらしい。](https://twitter.com/M5Stack/status/1245743900205019137?s=20) 僕はmaix触る関係で頻繁にガチャガチャやってるので何も考えずに動いた。

M5AtomのライブラリはArduinoのライブラリマネージャーにすでに上がってるのに普通に入れてOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/8d37412e-4253-f521-afe2-9912f3b79465.png)

ボードはまだM5Atomでは登録されてないので、普通に `ESP32 Pico Kit` を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/2178df7c-1096-b15a-9bab-a178233e258a.png)

コレで書き込めた。


## 公式サンプル

とりあえず、  
https://github.com/m5stack/M5Atom/tree/master/examples/Basics  
を眺めてLEDDisplayとLEDSetを試した。

LEDSetは動いた。

LEDDisplayは何故か真っ暗なまま。  
![EEED9792-26FF-4A20-B707-8D7D0ED005E3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/b6ff8dc0-4af1-908b-bd28-56c90604ac52.jpeg)


## とりあえずLチカしてみる

LEDマトリクスディスプレイのAPIを確認するために、軽くスケッチを書いてみる。

```c++
#include "M5Atom.h"

uint8_t counter = 0;
uint8_t color_index = 0;

const CRGB COLOR[4] = {
  0xf00000,
  0x00f000,
  0x0000f0,
  0x707070
}; 

void setup() {
    M5.begin(true, false, true);
    delay(50);
    M5.dis.clear();
}

void loop() {
    // ボタン(画面)をクリックすると、LEDを順番に点灯していく。一週したら色を変える。
    if (M5.Btn.wasPressed()) {
        counter++;
        if (NUM_LEDS <= counter) { // NUM_LEDS は M5Atomライブラリにある
            counter = 0;
            color_index++;
        }
        if (4 <= color_index) {
            color_index = 0;
        }
    }
    for (int i=0; i<counter+1; i++) {
        M5.dis.drawpix(i, COLOR[color_index]); // Neopixel的な連番指定の他に、x, y で点灯位置を指定するIFもあり。
    }
    
    delay(100);
    M5.update();
}
```

![80E112BF-157F-40F8-AAA3-D236C957CF24.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/6b6a148a-9dbb-9812-c134-623921a03be5.jpeg)

[動画はこっち。](https://twitter.com/uzuki_aoba/status/1245749445402058753?s=20)

いかにもネオピクらしい使い方。
本当は、 **Atom pixel tool** で作ったデータを `M5.dis.animation` で表示するとかが王道だとおもうけど。Lチカってことで許して。

## 追記

- この後、 [前に書いたSESAMEコントローラーのコード](https://qiita.com/uzuki_aoba/items/2baa690816f55119a03e) を [M5Atom向けに書き換えたりしてた。](https://twitter.com/uzuki_aoba/status/1245777205742862337?s=20)
    - [ソースコードはここに](https://gist.github.com/TakuroFukamizu/019682fbda50414500e63454e69301de)
- なぜか、 `CRGB` による色指定が  `RGB` ではなく `GRB` で処理される。M5Atomライブラリ内部でFastLEDで渡す時のオーダー指定が間違ってるのかも。ソースまだ追ってない。
- ボタンの反応が悪いときがあるので、ボタン押されたらまずMatrix全点等など、リアクションを作っておいた方が良いように思う。
npmで"npm i -D jQuery"してもjQuery関連のエラーが出てしまう時

もしかして`npm i -D jQuery`でjQuery入れてるからエラーが出てしまうのかもしれません。
「Q」を「q」に変えて`npm i -D jquery`で入れ直してみてください。
j"Q"ueryのnpm公式を見ると`jquery`と`jQuery`それぞれ別のパッケージで、しばらく更新されておらず「`jquery`の方を使って！」と作者からメッセージが出てました。

jqueryのnpm公式：https://www.npmjs.com/package/jquery
jQueryのnpm公式：https://www.npmjs.com/package/jQuery