OmniAICreator/Qiita-1.07M huggingface dataset:
CentOS8 キーボード操作でterminalを起動したい

# CentOSでもマウスを使わずにTerminalを起動したい

## Ubuntuだと普通に出来る

Ubuntuだと Ctrl + Alt + t でターミナルを起動出来て便利なのに、CentOSで同じ事をしようとすると、自分でショートカットの設定を行わないと行けません。
一人で管理してるサーバならそれでも良いんですけど、自分以外の人が操作する事を考えると、基本的な操作方法に変更は加えたくないし。。。

## マウス操作が煩わしいだけなのでコマンド入力から起動しよう

* Alt + F2 で　**コマンドを入力** を呼び出す
* **gnome-terminal** コマンドを入力

![centos8-input-commands.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560759/117df8a4-fb10-eda5-fdf1-d82174367429.png)
Laravel「php artisan migrate」でエラー「could not find driver」が発生したときの解決方法

#原因
エラーメッセージに書いてある通り、driverが見つからないのが原因

#解決方法
`php.ini`の**`extension=pdo_mysql`**のコメントアウトを外す

```
// 変更前
;extension=pdo_mysql

// 変更後
extension=pdo_mysql
```
orbslam3 build on mac 備忘録

そもそも Thirdparty/g2o あたりで　<tr1/memory> 

とかのインクルードで怒られるので、(boost)関連の依存関係。


これらは
https://github.com/matheecs/ORB_SLAM2_MacOS
ここらへんの　mac でビルドできるようにしてあるorbslam2系の
Thirdparty/g2o をそのままコピー、上書きするとうまくいくような気がする。


また、openssl　が見つからないエラーに関しては、
brew install openssl && brew link openssl
を実行、これでも言われる時は、

find /usr -name "openssl*"

で見つけたinclude path を、　/usr/local/include/openssl

にシンボリックリンクすることで解決。
https://shinshin86.hateblo.jp/entry/2016/07/18/082624　ここを参考にさせていただいた。



fatal error: 'stdint-gcc.h' file not found
に関しては少し調査中。
[Ruby] 配列内の偶数を数える 

# 初記事

プログラミング初心者
勉強したことで気になったこと、書き留めておこうと思ったこと、オリジナルアプリ作る際などに記事にしていきます。

初記事は標題の`配列内の偶数を数える方法`で書きます。

何時ごろか忘れましたがかなり前に同じ問題を解きました。
初めて解くときは途中でわからなくなり解説付きの答えを見ました。

```ruby
def count_evens(nums)
  count = 0
  nums.each do |num|
    if num.even?
      count += 1
    end     
  end
  puts count
end
```

※出力例
count_evens([2, 1, 2, 3, 4]) → 3
count_evens([2, 2, 0]) → 3
count_evens([1, 3, 5]) → 0

今は普通に理解できるので簡単に解説すると、配列の中の数字をとりあえず全部出してみてif分で条件に合うものをカウントしたら偶数がカウントできちゃうという仕組み。（ざっくりだけど合ってるよね？）


今回はこの問題に2回目に挑戦。
上記で書いた内容はちょっと忘れてて、何も見ずに問題を解きました。

※今回の回答

```ruby
def count_evens(num)
  puts num.count{ |i| i.even? }
end 
```

カウントするからcountメソッド使えばいいか〜でこんな感じ。
理解を深めるためと解説するにあたって少し調べました。
[countメソッド 公式リファレンス](https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/count.html)
リファレンスにも書いてあることですが、countメソッドはブロックを指定した場合、真の値を数えてくれるというやつ。
初めに見た解説付きの答えと同じ結果が出力されました。（よきよき）

この考えで本当に合ってるかどうかわかりません。何か間違ってるとこなどあればご指摘いただければと。

でわ良き日曜日を:raised_hand:
Linuxでバッチファイル的なものを作って実行したい（Windowsのbatみたいなやつ）

#どんなことをしたいん？
Windowsでいう **batファイルにあたるもの** をLinuxでも作って実行したいん。
タイトルそのままやんけ(´・ω・`)


#せっかくだからDocker Desktop使ってみよう
[Windows10でDockerをインストールしてCentOS8の検証環境を作るところまでやってみましょい！](https://qiita.com/waokitsune/items/10295d748e7044d91a73)
でDockerを導入したので、今回はDocker上のCentOS8でいろいろ試してみます。
作ったコンテナを起動して…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/21fad71c-e437-4bbe-c50f-0d3c0e755f5a.png)
端末起動！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c83462b0-91be-1138-22b2-c0a2d417d58c.png)


#新規ファイル作成
まずは下記コマンドでシェルスクリプトファイルを作成します。

```
touch test1.sh
```

下記コマンドで、作ったシェルスクリプトファイルをviで開きます。

```
vi test1.sh
```

```i``` を押してviの編集モードに移る。

下記を入力。

```
#!/usr/bin/bash
echo herou-wa-rudo
```
入力終わったら ```Esc``` で編集モード抜ける。
```:wq``` で書き込み＆viを終了。 

1行目の ```#!/usr/bin/bash``` で **どのシェルで実行するか** を指定しています。

シェルスクリプトファイルをいろんなフォルダーに置いても実行できるように ```#!/usr…``` と絶対パスで指定した方が都合がよいと思います。


#作ったシェルスクリプトファイルに対して実行権限を与えてあげる

```
chmod 755 test1.sh
```


#ほいじゃあ、自作シェルスクリプトを実行してみよう

```
./test1.sh
```
OKっすね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/fe868910-5cfb-9f42-6191-05da24e484f3.png)


#シェルスクリプト実行時注意点
同じフォルダにあるからといってパスの先頭を省略しちゃダメ。
省略すると下図のようになっちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/7eeb7894-a01d-a5ee-4048-4714b570bc15.png)
『test1.sh』という **ファイル** ではなく **コマンド** を探して実行しようとして、こけます。

相対パスで指定する場合でも頭に『./』を付けるように。



#蛇足
Dockerが役に立ってくれましたん。

[CentOS8にRcloneインストールしてGoogleDriveの特定フォルダの中身表示するとこまでやるん](https://qiita.com/waokitsune/items/2d1efe540d8209432808)
のRcloneのインストール検証でもDockerを使いました。


#参考サイトさん
https://uxmilk.jp/8395
https://eng-entrance.com/linux-shellscript-do


#バージョン
Windows10 Pro バージョン1909 OSビルド19042.630
Docker Desktop:2.5.0.1（49550） Engine:19.03.13
CentOS Linux release 8.2.2004 (Core)
flutter DateTimeとStringの変換方法

##概要
Flutterで自作アプリを作っている時に、
`DateTime => String`
の変換が必要になったので、忘れないようにdocument化

ついでに　`String => DateTime` 　もメモしておきます。

##事前準備
[公式ドキュメント（intl 0.16.1）](https://pub.dev/packages/intl/install)

```pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  intl: ^0.16.1
```
##変換方法
```
＊＊＊＊＊　DateTime => String　＊＊＊＊＊＊

①initializeDateFormatting("ja_JP");
　（→日本語化しますよと初期設定）

②final schedule = DateTime.now();
　（→TimeStamp型を定義する）※本来はDBから持ってくるようにする。

③var display = new DateFormat('yyyy/MM/dd(E) HH:mm', "ja_JP");
　（→TimStamp型から具体的にどんな表示（String型）にするのかを決める）

④var StringTime = display.format(StringTime);
　（→②で定義したschedule（TimStamp型）を③で決めた表示方法（String型）に変換する）

⑤subtitle: Text(StringTime)
　（→表示させたいところに書く）


＊＊＊＊＊　String => DateTime　＊＊＊＊＊＊

①DateTime TimeStampTime = DateTime.parse(StringTime);
　（→④で定義したStringTime（String型）をTimeStampTime（TimStamp型）に変換する）

```

##使用例
```main.dart

import "package:intl/intl.dart";
import 'package:intl/date_symbol_data_local.dart';


,,,,（略）


　　　　body: Consumer<MainModel>(builder: (context, model, child) {
          initializeDateFormatting("ja_JP");
          final schedule = DateTime.now();
          var display = new DateFormat('yyyy/MM/dd(E) HH:mm', "ja_JP");
          var StringTime = display.format(schedule);
          return ListView(
            children: todoList
                .map(
                  (todo) => CheckboxListTile(
                    title: Text(todo.title),
                    subtitle: Text(StringTime),
                    value: todo.isDone,
                    onChanged: (bool value) {
                      todo.isDone = !todo.isDone;
                      model.reload();
                    },
                  ),
                )
                .toList(),
          );
        }),
```
緯度経度の線が入った地図を描きたい

# 目的
こういう感じに背景に緯度・経度の線が入っている地図を描きます。この線はベクター(ライン)です。
 ![gazou00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/917414/588cab4f-1b28-cd25-ed51-0b4c532d2185.jpeg "できあがり")

# 準備
 - QGIS3.4〜3.10
 - QGISに[MMQGIS](http://michaelminn.com/linux/mmqgis/)プラグインをインストールする

# 手順
 1. プロジェクトの座標参照系(CRS)は好きなものでよい
 1. メニューから、`MMQGIS` > `Create` > `Create Grid Layer`　を選択

 1. 以下のように入力
  * `Geometry Type`: Lines
  * `XSpacing`, `Y Spacing`: 好きな間隔で。 `Units`: Degrees
  * `Extent`: Custom Area が良いです。キリの良い範囲で
  * `Output File Name`: ファイル名と保存場所を指定

 1. 緯度経度のラインのベクター(shpファイル)が作成されます
 
プロジェクトの座標参照系(CRS)が、`地理座標系`(WGS84、JGD2000)の場合（左）と`平面直角座標系`や`UTM座標系`(JGD2000/UTMzone54N)の場合(どちらも10度間隔)

![gazou8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/917414/c73ce043-c4fa-0667-76b8-bf1d6d857523.jpeg)

 5.グリッドのレイヤーの順番を変えて、線の太さや色を変えて、出来上がり。 緯度・経度の数値は自分で付け足しましょう
![gazou6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/917414/805ec74f-49fa-f208-10fb-80fa23d3a030.jpeg)

# 余談
プラグインを使わなくてもQGISの機能でも緯度・経度の線は一応描ける
## 手順
 1. プロジェクトの座標参照系(CRS)をWGS84などの地理座標系に指定（平面直角座標系やUTM座標系だと間隔を距離(メートルなど)で指定されるので）
 1. メニューの`ベクタ` > `調査ツール` > `グリッドの作成`　を選択
 1. 同様にグリッドの範囲や間隔をなどを指定。

 しかし、CRSを変更すると、以下のようになって、MMQGISの線と合わない...（オレンジ実線:`MMQGIS`、青点線:`グリッドの作成`）
![gazou3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/917414/0aacec3d-d218-96b6-ee75-a7955b6d570d.jpeg)

というのも、`MMQGIS`(左)と`グリッドの作成`(右)では線の書き方が違うからです。`MMQGIS`では交点をつなぐ線分を作りますが、`グリッドの作成`は範囲の端を結んだ線を作ります。
　ということは、もっと滑らかな線を引きたい場合は間隔をせまくして緯度経度の線を作成してから、間引けば良いのかな。
![gazou7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/917414/43f788fb-8b2c-1bc4-6575-8cd2c67a601b.jpeg)

---------------------------------
* 地図のベクターは[Natural Earth](https://www.naturalearthdata.com/about/)からdownloadしました
MySQL dumpファイルを出力する

## 目的

- MySQLのdumpファイルの出力方法をまとめる

## 前提情報

- 特定のDBのdumpファイルを出力する。

## 詳細

- 下記を実行するとカレントディレクトリに「出力されるdumpファイル名」のファイルが出力される。MySQLのユーザパスワードの入力を求められたら入力する。※出力されるdumpファイル名は拡張子も指定する。

    ```terminal
    mysqldump --single-transaction -u DBユーザ名 -p DB名 > 出力されるdumpファイル名
    ```
- `--single-transaction`のオプションは「このオプションは、サーバーからデータをダンプする前に BEGIN SQL ステートメントを発行」らしい。言うなればdumpファイルを出力するときに処理がトランザクションで囲まれる。

## 参考文献

- [https://dev.mysql.com/doc/refman/5.6/ja/mysqldump.html](https://dev.mysql.com/doc/refman/5.6/ja/mysqldump.html)
PHPのcURLがTLS1.2に対応しているか確認する

# はじめに
WebAPIで連携しているサービスから
「TLS1.0とTLS1.1を廃止して、TLS1.2のみ対応します」
と連絡がきたので、WebAPIを呼び出しているphpのcURLがTLS1.2に対応しているか確認したいと思います。

# 環境
CentOS 7
php 5.4.16
cURL 7.29.0

# コード
phpのcURLでYahoo!セキュリティセンターのサイトに接続してみます。

```php:tls.php
<?php
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://security.yahoo.co.jp/news/tls12.html');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $response = curl_exec($ch);
    $statusCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    echo $response;
    echo "\n";
    echo 'status code: ' . $statusCode;
    echo "\n";
?>
```

上のコードをコマンドラインで実行して、HTMLのレスポンスとステータスコード200が返ってくれば成功です。

```
$ php tls.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
:
省略
:
</body>
</html>
status code: 200
```
cURLはTLS1.2に対応しているのが確認できました。

# TLSのバージョンを指定する
curl_setoptでTLSのバージョンを指定することもできます。

```php
curl_setopt($ch, CURLOPT_SSLVERSION, CURL_SSLVERSION_TLSv1_0);
```

TLS1.0を指定したのでリクエストは失敗します。接続すらできないのでステータスコードは0になります。

```
$ php tls.php

status code: 0
```

以上で終わります。
【RSpec】Ruby on Rails チュートリアル「第４章」のテストを RSpec で書いてみた

# はじめに
こちらは前回の続きとなります。

【RSpec】Ruby on Rails チュートリアル「第３章」のテストを RSpec で書いてみた
https://qiita.com/t-nagaoka/items/27b51ef1610c4c336a80
## 対象者
+ Ruby on Rails チュートリアルのテストを Rspec で実施予定、または実施してみたい人
+ Ruby on Rails チュートリアル「第4章」のテストを Rspec で書きたいけど、書き方が分からない人

## テストコード
実際にテストコードを書き換えた結果が下記になります。
### Minitest
```ruby:static_pages_controller_test.rb

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Ruby on Rails Tutorial Sample App"
  end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
    assert_select "title", "Help | Ruby on Rails Tutorial Sample App"
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | Ruby on Rails Tutorial Sample App"
  end
end
```
### RSpec
```static_pages_spec.rb
require "rails_helper"

RSpec.describe "StaticPages", type: :request do
  before do
    @base_title = "Ruby on Rails Tutorial Sample App"
  end

  describe "Home page" do
    it "should get home" do
      visit static_pages_home_url
      expect(page.status_code).to eq(200)
      expect(page).to have_title "#{@base_title}"
      expect(page).not_to have_title "Home |" # タイトルに「Home |」が含まれていないことを確認
    end
  end

  describe "Help page" do
    it "should get help" do
      visit static_pages_help_url
      expect(page.status_code).to eq(200)
      expect(page).to have_title "Help | #{@base_title}"
    end
  end

  describe "About page" do
    it "should get about" do
      visit static_pages_about_url
      expect(page.status_code).to eq(200)
      expect(page).to have_title "About | #{@base_title}"
    end
  end
end
```
###ポイント
「 expect(page).to have_title "xxx" 」 だけでは "xxx" がタイトルに含まれていればテストをパスするので、例えタイトルに含まれていて欲しくない "yyy" がタイトルに含まれていてもテストをパスしてしまいます。そのため、タイトルに "xxx" が含まれていて "yyy" がが含まれていないことを確認するためには、上記のエクスペクテーションの他に 「 expect(page).not_to have_title "yyy" 」 を追加で記述し、別途タイトルに "yyy" が含まれていないことを確認する必要があります。
##次回
「第5章」のテストコードを RSpec に書き換える予定です。
Webhookを使ってInvoke-WebRequest/curlでDiscordに投稿する

# はじめに
どうも‪✋(´･ᴗ･\` )‬
タイトルの通りWebhook使ってDiscordに投稿しようというお話です。
Python使ってどうのこうのという記事は山ほど出てきたんですが, `curl`使うとかましてやPowerShellの`Invoke-WebRequest`なんて記事はけっこう少なくて詰まったので記事にしました。

Python人気なんですねぇ(ﾊﾅﾎｼﾞ
私はそもそも嫌いとか好きとか以前に勉強したことがないので使えないんですが。

# 実行環境
|項目|バージョン|
|:---|:---|
|OS|macOS 10.14.6|
|Discord|Stable 72071 (6cb1462)|
|PowerShell|7.1.0 (Core Edition)|
|zsh|5.3 (x86_64-apple-darwin18.0)|


# 手順
手順です。
Pythonの記事ばかり出てきて参考になる記事探しに苦労しただけで手順としてはめちゃくちゃ簡単でした。

## DiscordでWebhookを作成する
① Discordの「サーバー設定」を開く
<img alt="スクリーンショット 2020-11-29 10.40.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319289/b2a6abed-8f64-a606-be0d-737ed5540e33.png" width="350px">

② 「連携サービス」から「ウェブフックを作成」をクリック
![スクリーンショット 2020-11-29 10.40.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319289/9e501361-0c7c-505a-e9e0-71df80aa8a40.png)

③ 「お名前」に表示させたい名前, 「チャンネル」に投稿したいチャンネルを設定し, 「変更を保存する」をクリック
![スクリーンショット 2020-11-29 10.42.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319289/beb848e0-6801-bbc4-8ec4-f22c7b407c9a.png)


これで準備は完了です。
次は`Invoke-WebRequest`または`curl`コマンドを使って実際に投稿します。

## Invoke-WebRequestまたはcurlコマンドで投稿する
① 「サーバー設定」 > 「連携サービス」 > 「ウェブフックを作成」から先程作成したWebhookの設定を開き, 「ウェブフックURLをコピー」をクリック
![スクリーンショット 2020-11-29 12.02.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319289/7af4bb08-f233-90ce-3b7c-5b809ddcb0f1.png)

② 下記のコマンドを使って投稿(`https://discord.com/api/webhooks/***`には①で取得したURLを使用します)

```Powershell:PowerShellの場合
Invoke-WebRequest -Headers @{"Content-Type"="application/json"} -Method Post -Body "{`"username`": `"Login Notifier`", `"content`": `"Hello World from PowerShell`"}" https://discord.com/api/webhooks/***
```

![スクリーンショット 2020-11-29 11.48.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319289/d64e4cad-e8e2-3460-9702-3e7d8458c7a8.png)
![スクリーンショット 2020-11-29 11.35.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319289/514c13e6-0a70-1ecf-1cac-8e5dbc3d3867.png)



```bash:bash等の場合
curl -H "Content-Type: application/json" -X POST -d "{\"username\": \"Login Notifier\", \"content\": \"Hello World from zsh\"}" https://discord.com/api/webhooks/***
```
![スクリーンショット 2020-11-29 12.13.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319289/aed37dc1-81be-63d3-b2be-e049480672ce.png)

以上で完了です。

# 参考にした記事
[PowerShell : Invoke-Webrequestメモ - Qiita](https://qiita.com/CinemaFish/items/a553b4a93ba78ef57acc)
配列から重複した値を取り除く方法　php &javascript



###どのようなことがしたいか？
[1,4,3,1,3]のような配列から重複した値を取り除いて、[1,4,3]のような配列にしたい。
###結論
####php   
   array_unique()を使う
####javascript 
Setを使う
________
phpでは、array_unique()をいう関数を使うことで配列から重複した値を簡単に取り除くことができます
引数には対象の配列をいれますarray_unique(対象の配列)

````php:qiita.php
$array=[2,3,2,4,3];
$array2=['a','b','c','a'];
$array=array_unique($array);
$array2=array_unique($array2);
//$array=[2,3,4]  $array2=['a','b','c']
````
一方javascriptではES2015(ES6)で導入されたSetを使います。これを使うことによって簡単に配列から重複した値を取り除くことができます。

````qiita.js
let array=[1,3,5,1];
array=new Set(array);
console.log(array);
//(3)Set{1,3,5}
array=Array.from(array);
console.log(array);
//(3)[1,3,5]

````
Setを使うことによって重複を取り除いたオブジェクトを得ることができますそれを配列に直すにはArray.from()メソッドをしようします。
opencv関連備忘録

## docker container で　GUIをローカル側に表示

https://medium.com/@benjamin.botto/opengl-and-cuda-applications-in-docker-af0eece000f1
ここをフォローし、

ローカルで
```
sudo xhost +local:root
```

docker run のときに

```
-v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY=$DISPLAY -e QT_X11_NO_MITSHM=1

```

をつける。

テストは、

```
 apt-get install -y -qq glmark2 
```
としたあとに、

```
glmark2
```

とする。

また、
https://qiita.com/161abcd/items/9aa0d3dc3b38d7bf3f26
https://qiita.com/mocobt/items/726024fa1abf54d843e1

この2つを組み合わせることで動くことが確認できた。

```
ifconfig
```
でdockerのIPを調べたあと、

```
echo $DISPLAY
```
でdisplay 番号を確認。その後に下に沿って `docker run`

```
sudo docker run -itd -e DISPLAY="172.17.0.1:1"  --net host  -e DISPLAY=$DISPLAY  -v /tmp/.X11-unix:/tmp/.X11-unix dtam
```


```
xeyes
```


## docker + gpu

https://hub.docker.com/r/nvidia/cuda/


基本的にここを辿れば良い。
https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/install-guide.html#install-guide

ここからイメージをプルして、使うイメージのもとで

```
sudo docker run --rm --gpus all nvidia/cuda:11.0-base nvidia-smi
```

## ubuntu18.04 + opencv3.4.9 + cuda が関係しているとき

opencv3.1とかでも同じで良い。


https://demura.net/robot/16485.html 

ここの手順をフォローし、最後のcmake のところだけ自分のパスになるように書き換える。
この例ではpython環境は `apt-get install -y python3-dev python3-numpy python3-pip`

でインストールしている。


## opencv 'NppiGraphcutState' has not been declared (opencv3.1, cuda 8.0 で起こった）

解決策
https://forums.developer.nvidia.com/t/opencv-installation-problem-nppigraphcutinitalloc-not-declared/47167/3

```
modify this file “opencv-3.1.0/modules/cudalegacy/src/graphcuts.cpp” by replacing

#if !defined (HAVE_CUDA) || defined (CUDA_DISABLER)
with

#if !defined (HAVE_CUDA) || defined (CUDA_DISABLER)  || (CUDART_VERSION >= 8000)
```



## CMake Error: CUDA_nppi_LIBRARY (ADVANCED)

```
-DCMAKE_BUILD_TYPE=Release -DCUDA_nppi_LIBRARY=true
```


## mac + opencv[3, 4] + no cuda 

```
$ brew install opencv@2
$ brew install opencv@3
```

```
$ brew list --versions | grep opencv
opencv 4.1.0_1
```

などで多分問題ない。


brew install opencv などでインストールしたopencvがcmakeで見つからない時は、
https://qiita.com/ysuzuki19/items/e1d14a29d78529eab51a
この記述で助けられた。brew link でcmake に教えてあげる必要有。
AtCoder Regular Contest 109

vscodeにエディタを変更したので、arcでテストしました。
remote developmentでdockerを使用しています。
今回の実験でdocker fileとdevcontainer.jsonの設定をしてonline-judge-toolsをインストールするのを決めました。
テスト入力でランダム値を自動生成するスクリプトを生成しようかなって思ったけど、正解が分からないと判断ができないのでやめます。

##[A - Hands](https://atcoder.jp/contests/arc109/tasks/arc109_a)

```C++:C++
#include <bits/stdc++.h>

#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9

using namespace std;
using ll =long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }
const long long INF = 1LL << 60;

int dx[8] = { 0,  1, -1, 1, -1, 0};
int dy[8] = {-1, -1,  0, 0,  1, 1};
int feild[100][2];

int main() {
    int a, b, x, y;
    cin >> a >> b >> x >> y;
    a--;
    b--;
    queue<P> que;
    que.push(P(a, 0));

    while(que.size()){
        P p = que.front();
        que.pop();

        for(int i=0; i<8; i++){
            int dxx = dx[i] + p.second;
            int dyy = dy[i] + p.first;

            if(dxx<0 || 2<=dxx || dyy<0 || 100<=dyy) continue;
            int cost = 0;
            if(dx[i]==0) cost = y;
            else cost = x;

            if(feild[p.first][p.second] + cost < feild[dyy][dxx] || feild[dyy][dxx]==0){
                feild[dyy][dxx] = feild[p.first][p.second] + cost;
                que.push(P(dyy, dxx));
            }
        }
    }
    cout << feild[b][1] << endl;
    return 0;
}
```

##[B - log](https://atcoder.jp/contests/arc109/tasks/arc109_b)

```C++:C++
#include <bits/stdc++.h>

#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9

using namespace std;
using ll =long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }
const long long INF = 1LL << 60;

int main() {
    ll N;
    cin >> N;
    ll res = 0;
    ll i = 0;
    for(i = 1; res+i<=N+1; i++){
        res+=i;
    }
    i--;
    cout << N-i+1 << endl;
    return 0;
}
```
【React】 routing を設定してみる

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です

## routing を 設定してみる

routing とはこのURLにアクセスするとこの画面を表示しますっていうやつです。

まずは必要なライブラリをインストール

~~~
$ yarn add react-router-dom 
~~~

今回の目標としては Home, A, B の 3つのコンポーネントを準備し、

- localhost:3000 にアクセスすると Home component を表示
- localhost:3000/A にアクセスすると A component を表示
- localhost:3000/B にアクセスすると B component を表示

を目指します。

~~~jsx:index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route  } from "react-router-dom"

const Home = () => {
  return(<p>ホーム画面です</p>) 
}

const A = () => {
  return(<p>A画面です</p>) 
}

const B = () => {
  return(<p>B画面です</p>) 
}

const  App= () => {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/A" component={A} />
      <Route path="/B" component={B} />
    </BrowserRouter>
  )
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


~~~

localhost:3000/A にアクセス
![スクリーンショット 2020-11-29 11.52.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559794/1582e160-07a0-916e-db90-e49b396fda94.png)

表示成功

localhost:3000, localhost:3000/B も正常に表示されていました。

## まとめ

- routing には `react-router-dom` を使うと良い
    - `yarn add react-router-dom` を実行するだけでインストール可
    - ファイルの先頭に `import { BrowserRouter, Route } from "react-router-dom"` を書く

>今回は react-router-dom の中から BrowserRouter, Route だけを使いましたが、他にも Switch や Link, NaviLink など便利なものがいろいろあります。適宜使う時はどれも import するだけでOK

- 補足 「`exact`について」

`<Route exact path="/" component={Home} />` の exact って何?って思った方もいると思います。

routing は URLの前方一致で最初に一致した component が表示されてしまいます。
ですが、`exact`を使うと 完全一致で一致した場合のみ表示されます。

今回の例で言うと`/A`にアクセスした時に`/`がまず`Home component`への routing に一致してしまうので`/A`にアクセスするとHome画面が表示されます。
それを防ぐ意味で`exact`を追記しています。
Pythonの高速化について調べたこと

# 背景
機械学習を学び始めて、Pythonに触れて、その流れで競技プログラミング（ほぼ AtCoder）も始めました。様々な問題や解法・考え方に触れはじめる段階では、解答が TLE となってもプログラムがまずいことが大半でしたが、最近は「解法はどうも合っている。どうやってTLEを回避したらいいかわからない」という状況にしばしば遭遇してきました。Pythonあるあるだと思います。
そんな時、 Pypy をとりあえず試せとあるのを見たり、AC の方のプログラムに Numba が使われていたりしました。それぞれにいろんな注意書きがあるものの、回避の仕方がわからないこと多く、その理解の前提となる「何しているの、これ」の知識も少なかったので、色々学んだメモです。 

# そもそも、Python のプログラム実行までの話を整理
Python 自体はプログラミング言語であって、インタープリタでもコンパイラでもない。Python というプログラミング言語のルールにそって、それを実行できる環境があれば良いわけです。インタープリタとして、通常は CPythonを指すことが多いようですが、当然それ以外にもあって。そして、その一つが　CPython より高速に処理できる PyPy があります。

Pythonのインタープリタについては[こちらの記事](https://qiita.com/ousrok/items/0edacb92b0c7054ba81a)をご参照ください。

## Python はインタープリタ型言語だけど、コンパイルもある。
通常のスクリプトはインタープリタを介して走りますが、コンパイルが全く実行されないわけではない、というのが面白いところで、モジュール類は一旦コンパイルされています。毎回ではなく、更新があったらコンパイルして、そうでなければコンパイル済みのものを使う、ということのようです。

Pythonのコンパイル界隈の話は[こちらのサイト](https://blog.codecamp.jp/programming-python-compile-can-1)をご参照ください。

そして、プログラム中でコンパイル（を指示）して、高速化するのが、Numba ということでしょうか。

## Numba って何だ？

[Numba](https://numba.pydata.org/)
[Numba - Wikipedia](https://ja.wikipedia.org/wiki/Numba)
[numbaでざっくりPython高速化 - Qiita](https://qiita.com/gyu-don/items/9d223b007ca620e95abc)

ふんふん、要するにインタープリタ言語である Python をコンパイルして高速に動作するようにするのね。って、素直にそうですか、というほど知識のない入門者が理解できなかったのが、
- AOTって何？プログラムの中でコンパイルを指示しているのに「事前」ってどういうこと？
ということで、改めて調べてみた話。

# AtCoder の提出の流れ
AtCoder で解答を提出すると、そのまま実行されるものだと思っていたのですが、改めてAtCoderのページを見てみると、実行コマンドだけではなく、コンパイル・インタープリタの欄にも記述がある。つまり、仮実行が走って、その後、本実行になる、ということで、この仮実行でコンパイルを掛けて、その情報を使えるようにしておく、というのが、AtCoder にて、Numbaを利用する流れになるということです。（毎回のコンパイルでも効果がある場合もあると思いますが）

[ルール - practice contest AtCoder](https://atcoder.jp/contests/practice/rules)

## Numba での実行の流れ
コンパイルの時点で `@njit` に `catch=True` でキャッシュしておいたり、コンパイル時の引数 `ONLINE_JUDGE` を使って、

```
if sys.argv[-1] == 'ONLINE_JUDGE':
```
というようなやり方が主流みたいです。

## コードテストでも事前コンパイルは可能
ちなみに、ちゃんと事前にコンパイルは流れます。って、C++ とか Java とか考えたら、そうなっていないと困るよね。

# 終わりに
一通りの Numba の実行はできるようになりました。Numba の制約を理解していないとすぐに引っかかってしまうので、そのあたりは別途。

今まで見た中で、こちらが一番自分の引っ掛かりパターンについての説明が多かったと思います。
[Numba のコンパイルが通らなかった時の対処](https://nagiss.hateblo.jp/entry/2020/08/20/060340)

次は、自分のエラーパターンのメモ、残すつもりです。
Java　二次元配列

#はじめに
学習用のメモになります。

#二次元配列とは？
二次元配列とは、２つのインデックスで要素を指定する配列のことです。

[詳しくはこちら！](http://ysklog.net/java/5-18.htm)
#サンプルコード
```Main.java
public class Main {
    public static void main(String[] args) {
        String[][] teams = {{"勇者", "戦士", "魔法使い"}, {"盗賊", "忍者", "商人"}, {"スライム", "ドラゴン", "魔王"}};

        System.out.println(teams[0][0]);
         //実行結果　:勇者

        teams[0][0] = "剣士";
        // 勇者　→　剣士 に更新

        System.out.println(teams[0][0]);
        //実行結果:剣士


        System.out.println(teams.length);
        //実行結果:2
        //配列の長さ

        System.out.println(teams[0].length);
        //実行結果:3
        //teams[0]の配列の長さ

    }
}
```

## 二次元配列の宣言
```Main.java
 String[][] teams = {{"勇者", "戦士", "魔法使い"}, {"盗賊", "忍者", "商人"}, {"スライム", "ドラゴン", "魔王"}};
```

 二次元配列変数の宣言は、配列の型と次元がふたつあることを宣言する。変数の型の後に[]をふたつ書けば二次元配列になる。


#二次元配列をループ処理する
```Main.java
// 2次元配列をループで処理する
public class Main {
    public static void main(String[] args) {
        String[][] teams = {{"勇者", "戦士", "魔法使い"}, {"盗賊", "忍者", "商人"}, {"スライム", "ドラゴン", "魔王"}};

        for (int i = 0; i < teams.length; i++) {
            for(int j = 0;  j < teams[i].length; j++) {
                System.out.print(teams[i][j] + " ");
            }
            System.out.println("");
            
        }
        //出力結果
        //勇者 戦士 魔法使い 
        //盗賊 忍者 商人 
        //スライム ドラゴン 魔王 
        

        //拡張forでのループ処理
        for (String[] team : teams) {
            for (String player : team) {
                System.out.print(player + " ");
            }
        }
    }
}
```

#二次元配列をnewで作成する
```Main.java
// 2次元配列をnewで作成する

public class Main {
    public static void main(String[] args) {
        int[][] numberA = new int[3][4];
        for(int i =0;i<numberA.length; i++){
            for(int j =0;j<numberA[i].length;j++){
                numberA[i][j]=i*10+j;      //初期値を指定している
                System.out.print(numberA[i][j]+" ");  
                
            }
            System.out.println("");
            System.out.println("---");
        }
    }
}
```
出力結果

```
0 1 2 3 
---
10 11 12 13 
---
20 21 22 23 
---
```
deviseの導入の仕方

##手順

1. Gemfileに最下部に`gem 'devise'`と記述する
2. `bundle install`する
3. `rails g devise:install`する
4. モデルを作成するために`rails g devise user`を実行する
5. ビューファイルを設置するために`rails g devise:views`を実行する

2~5はターミナルで操作します。
【Swift】スコープの有効範囲

#スコープとは
変数や定数、また関数などには使用できる有効範囲が存在します。
その有効範囲が**スコープ**です。

スコープはその範囲に応じて、
**グローバルスコープ**と**ローカルスコープ**に分類されます。

また、同じスコープ内に同じ名前を複数存在させることは出来ません。

##ローカルスコープ
局所的に使用されるスコープをローカルスコープと言います。

局所的と言われてもよくわからないと思いますので、
関数ないで宣言された変数のスコープはローカルスコープだと思っていいと思います。

また、ローカルスコープは、**そのスコープ内でのみ利用可能**で、
外部からの参照は出来ません。

下記の例は、関数testMethod()内で定数aを宣言していますので、
関数内でしか定数aを使用することは出来ません。

関数内というのは、
func testMethod(){ } の { }で囲まれた範囲になります。

```swift

func testMethod() {
   let a = 10
   print(a)    // 10
}

print(a)   //コンパイルエラー
```

##グローバルスコープ
プログラム全体から参照できるスコープをグローバルスコープと言います。

グローバルスコープで宣言された変数や定数は、**ファイル外も含めて**どこからでも参照できます。

下記の例は定数globalを定義し、関数の内部と外部から参照しています。

```swift

let global = "global"

func testMethod() {
   print(global)   // global
}

print(global)   //global
```

グローバルスコープとローカルスコープを学ぶと、
わざわざ分けないで全てグローバルスコープにしてしまえばいいのではないか。
と思ってしまったので調べたところ、

グローバルスコープで宣言された変数や定数は、
**どこからでも同じ名前で参照でき、意図しない変更を招きやすい**らしいです。
確かにその通りだなと思いました。

なので、その恐れがある変数はローカルスコープに記述するか、
ローカルスコープに宣言された変数矢定数よりも説明的な命名をして
グローバルスコープ内に記述する必要があると思います。


##スコープの優先順位
ここで一つ疑問が出てきました。
それは、**グローバルスコープとローカルスコープに同じ変数名があったらどうなるのか**です。

コンパイルエラーが起きるのか、もし起きないとしたら優先順位はどうなるのか。


同じスコープ内に同じ変数名は宣言できませんが、
グローバルスコープとローカルスコープや、違うローカルスコープ内に同じ変数があった場合はどうなるのか。

結論として、**コンパイルエラーは起きませんでした！**

なので、優先順位をはっきりと理解しないと、間違った処理を書いてしまう恐れがあります。
肝心の優先順位ですが、下記のようになりました。

```swift

let a = "global"

func test() {
    let a = "local"
    print(a)    // local
}

print(a)   // global
```

まず、グローバルスコープとローカルスコープに同じ名前の定数aを宣言しました。
問題なくコンパイルはできました。

次に、グローバルスコープとローカルスコープで、
print()関数を使用して定数aの値を出力したのですが

**グローバルスコープのprint()関数はグローバルスコープの定数aを参照
ローカルスコープのprint()関数はローカルスコープの定数aを参照**

という結果になりました。

グローバルスコープのprint()に関してですが、
最初の方で記載した通りローカルスコープの定数aを参照できないことは知っていたので、
想定通りの結果になりました。

ローカルスコープのprint()は、グローバルスコープも参照できる立場ですが、
**優先順位的には同じローカルスコープが優先される**らしいです。

皆さんも気をつけてください。

以上、ありがとうございました！
【Semantic Segmentation】AdapNet : 

<h1>AdapNet: Adaptive Semantic Segmentation
in Adverse Environmental Conditions</h1>

basenetworkにResNet+deconvolutionを組み合わせたシンプルなネットワークResNetUpconvを使用している。FCNと同じくらいの精度が出てパラメターが少なくて早かったらしい。


<h1>新規性</h1>

<h2>Multiscale Blocks (MS)</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/7cb37347-c95e-6020-d233-d5bfded9345f.png)

普通の[ResNet](https://deepage.net/deep_learning/2016/11/30/resnet.html)で使われているResidual Block。

*普通の3x3 Convを重ねていくと消失勾配という問題が出るので、入力を足す事で回避
*1x1 Conv(Channel数を小さくする)->3x3 Conv->1x1 Conv(出力したいChannel数にする)   => 計算量が小さくなる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/607f9b79-754f-4286-d119-ae4a266b1915.png)

複数のsize(Globalとlocal)の特徴量を学習する為に、channelを半分に分けて別々のDilated(atrous) Convで畳み込み、結合する。



<h2>Front Convolution (FC)</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/9ceefb12-3806-0275-bc9c-06976dbed3fa.png)

ResNetではstride2のConvと2x2Max Poolingで画像サイズが1/4になっていしまう。
High Resolutionの特徴を失っちゃうんじゃね？！という事でその前に3x3 Convを一つ挟んでみたそうです。

<h2>convoluted mixture of deep experts (CMoDE)</h2>
まだ理解出来ていないので、今後updateします。
分かる人いたら、説明して頂けると嬉しいです。

<h2>結論</h2>
・ResNetにUpconvをしただけのsimpleなネットワークがbase
・Residual Blockを複数のサイズで学習出来るように工夫
・3x3 convを最初に付け足した
・CMoDEという手法を使っている

次はSOTAのAdaptNet++を調べるぞ！

<h1>参考文献</h1>
AdapNet: Adaptive Semantic Segmentation in Adverse Environmental Conditions
http://ais.informatik.uni-freiburg.de/publications/papers/valada17icra.pdf
医療系の論文が見れるサイト

# 論文が見れるサイト
※もしよければ教えて下さい。追記致します。

medpub: https://www.ncbi.nlm.nih.gov/pubmed
Leibniz-LSB@TUM https://www.leibniz-lsb.de/
Oxford academic https://academic.oup.com/journals
sage journals https://journals.sagepub.com/
nature https://www.natureasia.com/ja-jp/nature/
PMC https://www.ncbi.nlm.nih.gov/pmc/
コラクン https://www.cochrane.org/ja/evidence

#### 参考
・心理職のためのエビデンス・ベイスト・プラクティス入門―エビデンスを「まなぶ」「つくる」 原田 隆之 (著)
・パレオな男 https://yuchrszk.blogspot.com/
データが偏ってる時の偏差ってどうするんだろう

# 普通の代表値
専門家以外の人が把握している統計学っておそらく**平均値**が基準になっていて、そこから分散などを計算し、やりたいことの手掛かりにすると思います。

最近仕事で、**「どういう分布かわからない時にはどう見ればいいんだろう」**と疑問に思うことがありました。例えば実験データを見る時など、通常は正規分布や二項分布などの平均が最頻である物を想定すると思います。その前提がなかったら？どうやってデータの傾向を把握すればいいのでしょう。

そういうったことに詳しい方コメントくれたら嬉しいですが、自分なりに少し考えてみました。

# 平均値が実態をよく表さない時
年収の話をする時などはしばしば**平均年収**を語られることが多く、**「俺そんなに貰ってねぇよ」**と文句を垂れる人が多いと思います。実際の日本の年収分布ってこうなっているそうです。

[<img width = 800 src = "https://www.mhlw.go.jp/toukei/saikin/hw/k-tyosa/k-tyosa09/images/2-2a.gif">](https://www.mhlw.go.jp/toukei/saikin/hw/k-tyosa/k-tyosa09/images/2-2a.gif)

> [平成21年度国民生活基礎調査](https://www.mhlw.go.jp/toukei/saikin/hw/k-tyosa/k-tyosa09/2-2.html)

年収でなくても何かの統計データがこんな分布をしていたら、**平均**にあまり意味を感じませんよね。どうみても最頻値かせめて中央値がデータの実態をよく表すと思います。データの値を$x$、平均を$\bar{x}$として、分散は通常以下のように定義されます。

$$\sigma^2=\frac{1}{N}\sum_{n=1}^{N}(x_n-\bar{x})^2$$

これって平均からの差を**ばらつき**として定めてるじゃないですか。上のようなデータに対して使おうと思ったら明らかに不適切ですよね？？

# 最頻値を基準にしてみる
じゃあ最頻値を基準にしてみるか。と思い分散を改造してみました。

$$\sigma'^2=\frac{1}{N}\sum_{n=1}^{N}(x_n-x_m)^2$$

$x_m$が最頻値です。そこそこいい指標にはなりそうですがいまいちピンとこないですね。データの裾野が広く分布してればいいですが、年収のように片側がギュッと詰まっている場合、ピーク位置が左に行くほど分散が小さくなってしまいそうです。

# データ軸を修正する
もう一つ思いつく(というより頭の片隅にあった)方法としてx軸を対数軸などにしてグラフの形を変えちゃう方法です。
ただこれも裾野のデータがたくさんある時しか有効じゃないですよね。下限があるときついです。。。

# なんかアイデアあったらください
僕はこの辺の知識が基礎レベル以下なのでこんなデータ解析の方法があるとかコメントでいただけるとありがたいです。分布が不確定なものをどう評価するか、これから少しずつ調べて行こうと思います。
Rails 504 time outエラー対応

# 概要
rails, puma, nginxで構築した環境で504 time outエラーが発生した時に対応したことについてまとめます。
状況としてはpumaとnginxが起動状態で、DBにアクセスする前に504エラーが表示されていたので処理に時間がかかっていることが原因ではないという想定で原因調査をしました。

# 環境
rails:5.3.4
puma:3.12.4
nginx:1.19.1

# 原因
デプロイ時にconfigで定義しているcredentials.yml.encファイルの中身が書き換わってしまうことが原因でした。

# 解決方法
書き換わったファイルを別の名前にリネームして、以下のコマンドを実行  

```
export SECRET_KEY_BASE=`bundle exec rake secret`
```
このコマンドを実行することで新しくcredentials.yml.encが作成され、time outエラーは解消されました。  

# まとめ  
504 time outエラー時に対応したことについてまとめました。
firewallの3つのタイプについて

## 勉強前イメージ

外からのアクセスに関してリスト確認してOK,NGだけだと思ってたけど違うんかな

## 調査

### 3つのタイプ

#### パケットフィルタリング型

通信を許可する送信元情報や、宛先情報をルールとして設定することでルールに反する通信を遮断します。
一般的なセキュリティ対策方法。

#### アプリケーションゲートウェイ型

パケットフィルタリングよりも詳細に、アプリケーションプロトコル毎に通信を制御し遮断したり許可したりします。
なりすまし型の不正アクセスを防御することが可能。

#### サーキットレベルゲートウェイ型

トランスポート層での通信を監視・制御する方式。
コネクション単位の制御も可能で、パケットフィルタリングよりも設定や管理が簡単です。
コネクション単位なので `パケットフィルタリング型` では防げない、送信元IPアドレスの偽装もサーキットレベルゲートウェイ型で防ぐことが可能です。

## 勉強後イメージ

firewallってパケットフィルタリング型のイメージがあったけど、
確かにアプリケーションゲートウェイ型も認識はしてた。
サーキットレベルゲートウェイ型ははじめて聞いたから今度はもう少し掘り下げて調べてみたい。

## 参考

- [ファイアウォールとは？メリット・デメリットや仕組み・種類を解説！](https://locked.jp/blog/what-is-firewall/)
- [ファイアウォール（FW）とは？仕組みや機能と併せてWAFなどとの違いについても解説](https://www.rworks.jp/system/system-column/sys-entry/21277/)
Lottie+React NativeでFunctional Componentを使いたいんだけど？

## 結論

useRefを使いましょう

## やりたかったこと

React Nativeでいいねボタンを押した時に、以下のようなオシャレなアニメーションをつけたくなりました。

![animation_500_ki2f47b9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33823/f4b7dedd-4cbb-4154-5905-0c493d6d566f.gif)

## Lottieを使うことにする

自作は辛いので調べているとこちらの記事の内容がドンピシャだったので、Lottieを使うことに決めました。

* [【React Native】【Expo】 Lottieでおしゃれなアニメーションを簡単に実現 ](https://tech.maricuru.com/entry/2018/04/11/120523)

## lottie-react-nativeの実装例を探す

React Nativeでlottieを使うにはlottie-react-nativeが便利です。

以下のリポジトリや記事を参照しながら実装例を探していきました。

* [lottie-react-native/lottie-react-native](https://github.com/lottie-react-native/lottie-react-native)

* [Expo Lottie Docs](https://docs.expo.io/versions/latest/sdk/lottie)

* [【React Native】【Expo】 Lottieでおしゃれなアニメーションを簡単に実現 ](https://tech.maricuru.com/entry/2018/04/11/120523)

* [Lottieを使ってReactNativeアプリにアニメーションを追加する](https://qiita.com/tamago3keran/items/c286ec811510227e7b51)

* [React NativeにLottieアニメーションを実装したときに苦労した3つのこと](https://qiita.com/tamago3keran/items/3225eee8c7bf99413d2a)

## あれ？どれもClass Componentばかりだぞ...？

ここまで調べてきたところ、
Class Componentのインスタンスにanimationの参照をもたせている実装例ばかりです。

## 意地でもFunctional Componentで書きたい

既存のコンポーネントをガッツリFunctional Componentで書いてしまっていたので、
ここからClass Componentに書き換えるのは面倒です。何とか実現できる方法を探しました。

## Stackoverflowで良い質問を見つける

[useRef hooks doesn't work with lottie-react-native(https://stackoverflow.com/questions/58283848/useref-hooks-doesnt-work-with-lottie-react-native)

どうやらReact Hooksの機能の一つであるuseRefを使えばDOMの参照を取得できるので、
クラスを書かずに済みそうです。

Reactの公式ドキュメントでも紹介されていますね。
https://ja.reactjs.org/docs/hooks-reference.html#useref

## useRefで実装した例

Expoの公式ドキュメントの内容をuseRefに書き換えたものをSnackに書きました。
コードはこちらをご覧ください。

[lottie-react-native-useref-example](https://snack.expo.io/@masarufuruya/lottie-react-native-useref-example)

動作イメージはこんな感じです。

![be059d357699d96915c584630c368d7e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33823/7ed469cf-25bf-c0a9-e259-382c060493be.gif)

## まとめ

ということでFunctional Componentで書いてしまっていたコンポーネントに、
Lottieを使ってアニメーションをつけたくなったらuseRefを使いましょう。

React Hooks便利
【Vue.js】v-onを使ってカウントアップする【初心者向け】

#はじめに
Vue.jsを使うと、簡単に動的なサイトを作れるようになります。
ここでは、v-onというVue.jsの基本構文を使って、クリックで数字をカウントアップさせるサイトを作成していきます。

#この記事が役立つ方
・Vue.jsを学ぼうか迷っている人
・Vue.jsを学び始めた人

#この記事のメリット
・Vue.jsでどんなことができるのか、知ることができる
・Vue.jsで使えるv-onに関する基本構文を知ることができる

#環境
・MacOS Catalina 10.15.7
・vue.js 2.6.12

#完成形
ボタンを押すと数字がカウントされるビュー。

![countup2 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/efb01836-dc73-f5af-1b49-60f133e317db.gif)





#v-onとは？
（例）
・マウスをクリックした
・ボタンをクリックした
・マウスが動いた

という『瞬間』に動作を発火させたいときに使う。
今回は、ボタンをクリックするたびに数字を増やす『v-on:click』で作成。

#基本構文

```index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
 <p>現在{{ number }}回クリックされています</p>
  <button>カウントアップ</button>
</div>
```

```vue.js
new Vue({
 el: '#app',
  data: {
   number: 0
 }
})
```

このままでは動きません・・・。

![countup1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/9dc8fe2f-bd95-6bd0-ea64-ddcd013b4945.gif)


```index.html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
 <p>現在{{ number }}回クリックされています</p>
<!-- 以後ここから -->
  <button v-on:click="countUp">カウントアップ</button>
<!-- ここまでで記載 -->
</div>
```
```vue.js
new Vue({
 el: '#app',
  data: {
   number: 0
},
<!-- 以後ここから -->
methods: {
 countUp: function() {
  this.number += 1
  }
 }
<!-- ここまでで記載 -->

})
```

無事、カウントアップされるようになりました！

![countup2 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/fa981eb4-3058-4409-63f0-a4f7b9e0d10e.gif)



#おわりに

Vue.jsを使うと、HTMLやCSSだけでは表現できないことも行えるようになります。
最初はとっつきづらいかもしれませんが、実際に動作させていくと、楽しみを覚えると思います！

#参考
『超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)』
https://www.udemy.com/course/vue-js-complete-guide/
（動画教材は非常に分かりやすいので、オススメです！）
RFCに準ずるメールアドレスの正規表現

"@"マークの前後で分けて定義しました。（= ユーザー名とドメイン名で分けて定義した）
これで大体はカバーできているはず。

```
ユーザー名の正規表現 = /^[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+(\.[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+)*$/;
```
```
ドメイン名の正規表現 = /([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)|(docomo\ezweb\softbank)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
```
以下は詳細です
・携帯キャリアメール（ezweb.ne.jp、docomo.ne.jp、softbank.ne.jpの3つ）は有効とする
・以下の例のようなものは無効とする
　.abcd@example.co.jp
　abcd.@example.co.jp
　abcd..@example.co.jp
　ab..cd@example.co.jp
　ab[cd@example.co.jp
　ab@cd@example.co.jp
・以下の例のようなものは有効とする
　user+mailbox/department=shipping@example.com (dot-atom)
　!#$%&'*+-/=?^_`.{|}~@example.com (dot-atom

以下2点はカバーできていない
・“" "”でくくられたquoted-stringの形式であれば、「 ( ) < > [ ] : ; @ , 」のようなASCII文字を使用できる
・さらにquoted-string中では、“\”を前につけたquoted-pairの形式であれば、「 \ " 」のようなASCII文字を使用できる
TensorFlow+KerasでCutoutを実装/評価する

# はじめに

[別記事](https://qiita.com/T-STAR/items/478a23eef50f965953ca)で各種Data Augmentationを実装した際に、TensorFlow Addonsを使うと簡単にCutoutを実装できることに気づいた。
ここではDatasetに対してmap適用する実装とその評価を行う。
## 環境
* TensorFlow(2.3.0)
* tf.keras(2.4.0)
* tensorflow_addons(0.11.2)

# Cutoutとは

画像のデータ拡張手法として[提案](https://arxiv.org/abs/1708.04552)されたもので、ランダムな座標の矩形を単色で塗りつぶす。
似たような手法にRandom Erasingがあるが、Cutoutのほうがより単純。
TensorFlow Addonsには[tfa.image.cutout](https://www.tensorflow.org/addons/api_docs/python/tfa/image/cutout?hl=ja)が用意されている。


# 実装

下記関数をDatasetのmap関数で適用する。

```Python
import tensorflow_addons as tfa
@tf.function
def cutout_augmentation(images, cutout_size, cval=0):
    img_shape = images.shape[-3:]
    mask_size = (int(img_shape[0]*cutout_size[0])//2*2, int(img_shape[1]*cutout_size[1])//2*2)
    images = tfa.image.random_cutout(images, mask_size, constant_values=cval)
    return images
```

cutout_sizeは塗りつぶす矩形のサイズを指定する。元画像からの比率を[H,W]としてfloatで指定する。32x32画像の場合は[0.5,0.5]で16x16の範囲を塗りつぶす。
cvalは塗りつぶす色。0.0～1.0の画像の場合はcval=0.5で灰色となる。

tensorflow-addonsのバージョンが古いと使えないので、Google Colabでは```!pip install --upgrade tensorflow-addons```を事前に実行する。

実行結果はこちら。
![cutout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824193/3cae3042-3c71-617d-03ae-056f06a76e1a.png)


# 評価

矩形サイズの設定値の影響や、他のAugmentationとの比較を行う。

 * Google ColabのTPUでCIFAR10の学習を3回行い、ValidationのAccuracyの中間値で比較
 * Vertical Flipのみ使用したものをベースとして、そこに以下のAugmentation処理を追加して実施
  * Cutout(0.4～0.8)
  * Width/Height Shift (range=0.25,fill_mode='constant'および'reflect' )
  * Cutout + Width/Height Shift('reflect')
 * SGD(lr=0.01/momentum=0.9)で100epoch、100～150epochはlr=0.001に変更

結果はこちら。

| 拡張法 | cutout | fill_mode | Accuracy |
|---|---|---|---| 
| Vertical Flip | - | - |89.15|
| Cutout | 0.4 |- | 91.80|
| Cutout | 0.5 |- | 92.31|
| Cutout | 0.6 |- | 92.50|
| Cutout | 0.7 |- | 92.63|
| Cutout | 0.8 |- | 92.53| 
| Shift | - |constant | 92.86|
| Shift | - |reflect | 93.39 |
| Cutout+Shift| 0.5 | reflect | 94.43 |

Cutoutのサイズ比較では0.7が最も良好だった。0.7*0.7=0.49なので、ほぼ半分が消えることになる。
元論文ではCIFAR10では16x16つまり0.5が最も良いとされていたので結果にはずれがあった。モデルの違いが影響しているのか？。
同論文ではCIFAR100の場合はもっとサイズを下げたほうが好結果となっている。学習内容によってパラメータ調整する余地があるようだ。
Shiftとの比較になると、Shiftのほうが好結果だった。
全体としては、ShiftとCutoutを混ぜたものが最も好結果となった。Shift(reflect)からは1%の認識率向上があるが、このレベルでは結構大きな差なので同時に適用する価値は十分あると思われる。

実験用コードは[こちら](https://gist.github.com/T-STAR-LTD/78154f9c00956190b538b435ca898cf5)。

# 参考

[ImageDataGeneratorを拡張しcutoutを実装する](https://qiita.com/shoji9x9/items/c4a0f56db23d80da14af)
[PyTorchでデータ水増し（Data Augmentation）する方法](https://qiita.com/karaage0703/items/9b56a68a5dba4ad330d9)
contact form7にページのタイトルを自動で付加する

#自己紹介
ホームページ制作＆webに関するスキルシェアをしています。

今回は、wordpressでお問合せボタンを押した時に、どのページからお問い合わせをしたのか情報が引き継いだら良いのにな～と思った時に使える、contact form7のカスタマイズ方法を紹介します。

#contact form7での設定

```html
<label>お問合せ元ページタイトル
 [text* title]</label>

<label> お名前 (必須)
    [text* your-name] </label>

<label> 電話番号 (必須)
    [tel* your-tel] </label>

<label> メールアドレス (必須)
    [email* your-email] </label>

<label> メッセージ本文
    [textarea your-message] </label>

[submit "送信"]
```

#function.php ファイルへ追記
pageIDをフックに、そのページのタイトルとURLを取得します。

$tag[‘name’] == ‘title’
という箇所ですが、contact formの設定でページのタイトルを自動出力する箇所の名前に[text* title]と記述しているので、右の値がtitleとなります。

```php

function wpcf7_get_post_data( $tag ){
     
    if( !is_array( $tag ) ) return $tag;
     
    //クエリに[post_id]がセットされているか
    $post_id = ( isset( $_GET['post_id']) && $_GET['post_id'] ) ? $_GET['post_id'] : false;
     
    //[post_id]がある場合
    if( $post_id ) {
         
        if( $tag['name'] == 'title' ) {
             
            $title = get_the_title( $post_id );
            $tag['values'] = array( $title );
             
        }         
    }
     
    return $tag;
}
add_filter( 'wpcf7_form_tag', 'wpcf7_get_post_data' , 11 );
```

#お問い合わせフォームを出力させる時
ページの番号を?post_id=番号の箇所へ入れてあげるとタイトルを引き継ぐことが出来ます。

```html
<a href="http://自分のドメイン.com/contact/?post_id=番号">問い合わせ</a>
```

functionをいじるので、ちょっと怖いかもという方には、以下の設定がお勧めです。
今までの説明は、
固定ページ　⇒　お問い合わせフォーム
と画面を移行するけれど前のページの情報を引きつぐという内容だったのですが、

これから紹介する内容は、
「固定ページ(投稿ページ)でお問い合わせフォームを出力している」
場合に使える超～簡単な方法になります！

#contact form7に特殊なメールタグが存在
今回は[_post_title]を使います。

その他にも
IPアドレス取得[_remote_ip]
ブラウザ情報取得[_user_agent]
コンタクトフォーム設置のURL[_url]
送信日[_date]
送信時間[_time]

その他にも色々あるみたいで[contact form7で使える特殊なメールタグ公式サイト](https://contactform7.com/ja/special-mail-tags/)を参考にしました。

#投稿ページ内部に埋め込まれている時に使えるメールタグ

>[_post_id] — このタグは投稿の ID で置き換えられます。
>[_post_name] — このタグは投稿の名前(スラッグ)で置き換えられます。
>[_post_title] — このタグは投稿のタイトルで置き換えられます。
>[_post_url] — このタグは投稿のパーマリンク URL で置き換えられます。
>[_post_author] — このタグは投稿の作成者名で置き換えられます。
>[_post_author_email] — このタグは投稿の作成者のメールアドレスで置き換えられます

#メールタグを挿入するだけだった
メールの設定に[_post_title]を入れるだけでした。
なんと簡単。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/ef2d31b9-e1ed-3b63-ad14-5e401498eedb.png)

#まとめ
ネットショップ風だったり、前のページの情報を受け取りたい時はfunctionへの追記、簡単に実装したい方はcontact form7の特殊なメールタグを利用してみてください！
guard文まとめてみた

#guard文の役割
想定外の状況が起こった時にその処理から抜け出す役割をします。
#書き方
guard 条件　else {
　　　条件を満たさなかったときの処理
　　　break　//returnでも良い
} 条件を満たした時の処理
#使ってみた
number2を割る数として割る数に０が入った時、{}内の処理が行われます。
条件式　number2 != 0の時{}外の処理
number2 ==　０の時{}内の処理です。

```swift
            guard number2 != 0 else{
                answerLabel.text = "割る数には０以外の数字を入れてください"
                return
            }
            kekka = number1 / number2
```
#参考文献
詳解Swift 第５版
gcloud config configurations関連（メモ）

# gcloud config configurationsの自分用メモ
別アカウントとか、別プロジェクトの切り替えをする必要があったので、色々調べてみました。

# 参考にさせていただいた記事
gcloud configで複数の設定を持って切り替える
https://qiita.com/sky0621/items/597d4de7ed9ba7e31f6d

# configurations 一覧参照
memo: IS_ACTIVATE が現在有効なconfigurations

```python
gcloud config configurations list
#### 結果 ####
NAME        IS_ACTIVE  ACCOUNT                  PROJECT             COMPUTE_DEFAULT_ZONE  COMPUTE_DEFAULT_REGION
aaa         True       yyyyyyyy@gmail.com       prj2
default     False      xxxxxxxx@gmail.com       prj1
```
# configurationsの作成
configurationsを新規作成する。

```python
gcloud config configurations create new_config_name
#### 結果 ####
Created [new_config_name].
Activated [new_config_name].
```

# configurationsの変更
指定のconfigurationsをactivateする。

```python
gcloud config configurations activate default
#### 結果 ####
Activated [default].
```

# configurationsの削除
指定のconfigurationsを削除する。

```python
gcloud config configurations delete cnf

#### 結果 ####
The following configurations will be deleted:
 - cnf
Do you want to continue (Y/n)?  Y   #←削除確認

Deleted [cnf].

```

参考まで
ActivateしたままDeleteを実行すると、下記エラーが発生するので、
別のconfigurationsをactivateした後に削除する。

```python

ERROR: (gcloud.config.configurations.delete) Deleting named configuration failed because configuration [newcnf] is set as active.  Use `gcloud config configurations activate` to change the active configuration.
```
ExcelScanチュートリアル

# ExcelScanとは
ExcelScan ( https://github.com/miura1729/excelscan )は、RubyからExcelを簡単に使うためのライブラリです。出来ることや効率を犠牲にすることで、お手軽さを得ています。ExcelScanは基本的にExcelのシートの上から下へ行をスキャンする形で処理を書くためにこう名付けました。
このチュートリアルでは、いくつかの例を元に使い方の概要を説明したいと思います。

# 材料の集計
あなたは水道屋さんだとします。現場で使った材料とその量を日報に書き込んで行って、毎日家で集計しないといけません。日報の内容はこんな感じでExcelに入力されるでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31888/9da983f7-f169-39eb-57e6-d8f34165fddc.png)
これを集計しようと思います。ピボットテーブルとか駆使すれば簡単かもしれませんが、年寄りにはなかなか覚えられません。そこで、ExcelScanとRubyを使って、こんな感じのプログラムを書きます。

```ruby:mat.rb```
require 'excelscan'
es = ExcelScan.new("sample/material.xlsx")

table = Hash.new(0)
es.each do |row|
  if row[0] then
    name = "#{row[1]} #{row[2]}"
    table[name] += row[3]
  end
end

es.quit

table.keys.sort.each do |name|
  printf "%-20s  %g\n", name, table[name]
end
```
これで、集計が出来て、こんな感じでコンソールに出力されます。もちろん、Excelに書きだすこともできますが、ちょっと複雑なのでまた後から説明します。

```
エルボ φ20               8
エルボ φ25               5
チーズ φ20               2
パイプ φ20               3.5
パイプ φ25               4.3
```

プログラムが何をやっているのか？Ruby(Excel VBAじゃないのがミソ)になれた人ならすぐ分かるかもしれませんが、改めて説明します。

```ruby
require 'excelscan'
es = ExcelScan.new("sample/material.xlsx")
```

requireはExcelScanを使うためのおまじないですね。ExcelScanクラスをnewしてExcelScanオブジェクトを作ります。引数にファイル名を入れるとそのファイルを読み込んでくれます。
他にもシート名とかExcelを画面に表示するかの指定が出来るのですが、今の所は説明しません。

```ruby
table = Hash.new(0)
es.each do |row|
  if row[0] then
    name = "#{row[1]} #{row[2]}"
    table[name] += row[3]
  end
end
```

ExcelScanオブジェクトはあたかも二次元配列のように使うことが出来ます。ExcelScan#eachメソッドは各行ごとに順番にその行の行オブジェクトを引数にブロックを実行します。このプログラムではrow変数がそうです。row変数は配列のようなインターフェースでセルの中身をアクセスできます。ちなみに、Excel VBAでは1オリジンですが、ExcelScanではRubyと同じ0オリジンです。セルが数値なら数値が得られますし、文字なら文字が得られます。この辺は変数に型の無いRubyにぴったりですね。
元データのExcelファイルは先頭にヘッダ行があるので、これを集計しないようにしなければなりません。ここでは行番号(1カラム目)が空かどうかで判別します。このあたりは煩雑と言えば煩雑ですが、単純なインタフェースを選択しました。

```ruby
es.quit
```
立ち上げたExcelを終了します。何もしなければではRubyのプログラムが終わっても立ち上がったExcelは終了しません。

```ruby
table.keys.sort.each do |name|
  printf "%-20s  %g\n", name, table[name]
end
```
集計した結果を出力します。これは、ExcelScan関係ないですね。
【TypeScript】TypeScriptとは何か？


TypeScriptを学ぶにあたって前提知識として調べたので備忘として投稿します。
# TypeScriptとは

Microsoft社が開発した**「型のあるJavaScript」**です。
JavaScriptの拡張言語で、**altJSの一種**です。
2017年にGoogleが6番目の社内標準言語としてTypeScriptを採用し、需要が拡大してきました。

# AltJSとは？
AltJSとは、JavaScript代替言語の総称です。
その言語で書いたものを JavaScript に変換して使用します。
TypeScriptの他には、CoffeeScript, Opal(Ruby から JavaScript に変換するツール)などがあります。

TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されます。
そのため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリもTypeScriptから使用できるなど、互換性の高さが特徴です。


#TypeScriptの特徴

**``静的型付けが採用されている``**
**``インターフェース、クラスがつかえる``**
**``JavaScriptと同様の構文が使える``**
**``エディタによる入力補完が強力。(Visual Studio Code など対応しているエディタ)``**

最大の特徴はTypeScriptは変数のデータ型をあらかじめ決めることができる点です。
この仕組みは静的型付けと呼ばれ、**コンパイルする時点でエラーが分かる**(型を宣言するためエラーを未然に防げる)ことや、
コードの読みやすさ、大人数が開発に携わる環境で便利なことが特徴です。
実行前に型を宣言するため、動作が早いこともTypeScriptの特徴です。

#参考
[TypeScript の概要](https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6)
[TypeScriptを入門者向けに解説！JavaScriptとの違いや勉強法までわかりやすく](https://udemy.benesse.co.jp/development/system/typescript.html)
switch文について初歩的なことをかく

![スクリーンショット 2020-11-29 8.07.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/9e6d7bf1-b26f-224c-7cf5-ff10375baaf2.png)
#switch文の書き方
```swift
    let number1 = Double(number1TextField.text!) ?? 0
    let number2 = Double(number2TextField.text!) ?? 0
    var kekka :Double = 0
switch calculateSegmentedControl.selectedSegmentIndex{
    case 0:
        kekka = number1 + number2
    case 1:
        kekka = number1 - number2
    case 2:
        kekka = number1 * number2
    case 3:
        guard number2 != 0 else{
            answerLabel.text = "割る数には０以外の数字を入れてください"
            return
        }
        kekka = number1 / number2
      default:
        print("該当なし")
    }
```
メモ程度なので自分が使用したコードをそのまま載せます。
switch 式　{
   case ラベル１：
　　　　文...
   case ラベル２：
　　　　文...
   default:
      文...
}
こんな感じで書く。
式にはcaseで条件分けしたい式を書きます。この場合だとsegmentedControlのIndexを式に入れることで、ラベルに０番目、１番目と指定してそれぞれの処理を書いていきます。

segmentedControler
![スクリーンショット 2020-11-29 8.07.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/b9062e08-c4c1-32f2-1ae5-99d2d7d91d70.png)
![スクリーンショット 2020-11-29 8.07.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/7b1371e5-04c0-3576-7823-06cbccf9d2db.png)