OmniAICreator/Qiita-1.07M huggingface dataset:
Lambdaの実行ロール　Lambda実行時のAWS_ACCESS_KEY_IDとかは何になる？

## はじめに
Lambdaをdeployしたものの、AWS SDKのクライアントに渡るCredential情報である`AWS_ACCESS_KEY_ID`や`AWS_SECRET_ACCESS_KEY`って何になるの？で混乱したので調べて分かった事を備忘録としてを残しておく。

※Lambdaが実行される時のIAMのロールは何が適用されるの？に関して理解を深めてみた。

## Lambda関数の権限管理の仕組み
Lambda関数には実行ロールという概念があり、このロールを持った状態でLambda関数が実行される
[^client]: https://aws.amazon.com/jp/getting-started/tools-sdks/
そのため、Lambda関数内でAWS SDKなどのclient[^client]を使っている場合、AWSのCredentialは環境変数（`AWS_ACCESS_KEY_ID`・`AWS_SECRET_ACCESS_KEY`・`AWS_SESSION_TOKEN`など）から自動的に読み込まれるが、その環境変数は実行ロールの情報でそれが作成される事になる
（実行ロールを持つ仮想的なユーザが自動で作られ、そのユーザのAWS_ACCESS_KEY_IDやAWS_SECRET_ACCESS_KEYが環境変数に自動的に組み込まれるというイメージでもいいかも）

どういうことか実際にLambdaを動かした時にどうなるかというと、

```js
exports.handler = async (event) => {
    console.log(process.env.AWS_ACCESS_KEY_ID)
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response ;
};
```
```
START RequestId: dfd399ec-5c22-47df-a50e-6811c8bc44a3 Version: $LATEST
2021-08-24T07:46:00.095Z	dfd399ec-5c22-47df-a50e-6811c8bc44a3	INFO	ASIAxxxxxxxxxxxxxxxx
END RequestId: dfd399ec-5c22-47df-a50e-6811c8bc44a3
REPORT RequestId: dfd399ec-5c22-47df-a50e-6811c8bc44a3	Duration: 52.47 ms	Billed Duration: 53 ms	Memory Size: 128 MB	Max Memory Used: 65 MB	Init Duration: 144.98 ms
```
[^3]: AWS Account Idが同じIAMユーザのアクセスキーIDの初め何文字かはユーザ間で同じなので、自分で作成したIAMユーザのアクセスキーIDではない事という事が分かる
のように、`ASIAxxxxxxxxxxxxxxxx`というAWS_ACCESS_KEY_IDが表示されるが、これが実行ロールを持つ仮想的なユーザのAWS_ACCESS_KEY_IDという感じ[^3]

なので例えば、Management Consoleから見た時にLambdaの設定が以下のような場合、実行ロール（今回だと`test-role-o19dxgu5`）に付与されている権限の事しかこのLambdaは実行できない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/4bd8c038-7830-da0d-1347-f09e083274fe.png)

・参考：[AWS Lambda 実行ロール](https://docs.aws.amazon.com/lambda/latest/dg/lambda-intro-execution-role.html)
・参考：[定義されたランタイム環境変数](https://docs.aws.amazon.com/lambda/latest/dg/configuration-envvars.html#configuration-envvars-runtime)

## Lambda関数作成時にロールを設定する
いずれの場合もIAMのロールを設定する手間は存在するが、個人的にはAWS CLIでやる方が意図しないRoleが作成されたいしないのでいいような気がする

### AWS CLI
AWS CLIコマンドで行う場合は、`--role`オプションが必須になっているのであらかじめIAMにロールを作成していないとLambda関数が作れないようになっているので分かりやすい（と思っている）

```bash
aws lambda create-function --function-name {作成したいfunction名} --role arn:aws:iam::{aws account id(12桁の数字)}:role/service-role/{lambda実行時のロール(execution role)} --runtime {functionのruntime言語バージョン} --zip-file fileb://{zipファイル名} --handler {ハンドラ名(言語指定方法違う)}
```

・AWS CLIコマンドについて参考：https://awscli.amazonaws.com/v2/documentation/api/latest/reference/lambda/create-function.html

### Management Console
Management Consoleから関数を作成する場合は、特に注意していないとAWS側で勝手に新規でロールを作成し、それがLambda関数の実行時のロールになる
[^制限]: `iam:CreateRole`を付与しないとか
ので、Lambda関数を作るユーザのIAMを制限[^制限]して新規で意図しないロールが作成されないようにするなどの注意が必要な気がする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/dc76aaaa-e7c5-4a90-f8b7-a5632adc3440.png)
computeIfPresentという便利なやつ

# どんな役割か
https://docs.oracle.com/javase/jp/8/docs/api/java/util/Map.html#computeIfPresent-K-java.util.function.BiFunction-

>指定されたキーの値が存在していてnull以外の場合、キーと現在マップされている値から新しいマッピングの計算を試みます。
関数がnullを返した場合、マッピングは削除されます。関数自体が(非チェック)例外をスローした場合、その例外は再スローされ、現在のマッピングは変更されません。

なるほど。

# コードで見る
- 使わなかった場合

```java:
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        Map<String, String> map = new HashMap<>();
        map.put("hoge", "hoge");
        map.put("fuga", "fuga");
        map.put("piyo", "piyo");
        
        if (map.get("piyo") != null) {
            map.put("piyo", "piyopiyo");
        }
        
        System.out.println(map.get("piyo"));
    }
}
```

`piyo`というキーが`map`あったら、それに対応するバリューを`piyopiyo`にします。

- 使った場合

```java:
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        Map<String, String> map = new HashMap<>();
        map.put("hoge", "hoge");
        map.put("fuga", "fuga");
        map.put("piyo", "piyo");
        
        map.computeIfPresent("piyo", (k, v) -> "piyopiyo");
        
        System.out.println(map.get("piyo"));
    }
}
```

やっていることはさっきと同じですが、スッキリしますね。
余計なif文が無いのは素晴らしいことです。

- こんな事もできる

```java:
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        Map<String, String> map = new HashMap<>();
        map.put("hoge", "hoge");
        map.put("fuga", "fuga");
        map.put("piyo", "piyo");
        
        map.computeIfPresent("piyo", (k, v) -> {
            if (v.equals("piyo")) {
                return "piyopiyo";
            }
            return "piyo";
        });
        
        System.out.println(map.get("piyo"));
    }
}
```

`piyo`というキーが`map`にあった場合、もしそのバリューが`piyo`であれば`piyopiyo`に上書きします。
バリューが`piyo`ではなかった場合は`piyo`に上書きします。

# まとめ

コードレビューでこれを使ったほうがキレイになるよ。と指摘された内容ですが、知らないメソッドだったので備忘録としてまとめました。
Java8から追加されたようなので結構実装自体は昔ですね。
みんなもドキュメントを、読もう！（私も読みます）
複数のAWS Chatbotを1つのSlackチャンネルで使う

## はじめに
SlackからAWS CLIコマンドを実行できて便利なAWS Chatbotだが、AWS ChatbotのAWSアカウントが複数ありそれを同一Slackチャンネル内で使うのはどうするのか？で躓いたのでその解決方法を備忘録に残す

## 状況のイメージ
![Slack-AWS Chatbot 複数アカウント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/99a7f7be-b633-dddb-086b-14f64a39689b.png)

## やり方
非常に簡単で、以下のように

```
@aws set default-account xxxxxxxxxxxx
```

とすると、AWS Chatbotから実行するコマンド（AWS CLI）の実行環境を設定できる
※`@aws set default-account`とコマンドを実行しAWS Chatbotの質問に応答するやり方もある

## 補足
以下の画像は、`@aws set default-account`してAWS Chatbotからの応答に対してAWS Account Idを選択する事でデフォルトのアカウントを設定したもの
`@aws set default-account <xxxxxxxxxxxx|yyyyyyyyyyyy>`となっているように、`@aws set default-account xxxxxxxxxxxx`や`@aws set default-account yyyyyyyyyyyy`でアカウント切り替えが実行できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/f051bf7b-2a51-ba1a-a867-8ec9c449a799.png)

## 参考文献
- [Enabling multiple accounts to use commands in a Slack channel](https://docs.aws.amazon.com/ja_jp/chatbot/latest/adminguide/chatbot-cli-commands.html#multiple-accounts-in-a-channel)
Ansible Tips: jinja2のネストを避ける例

備忘


# 問題: jinja2をネストするとエラーとなる

例えばjinja2のforにて文字列を作成し、それをfrom_yamlフィルターにかけたい場合、いずれもjinja2管理下なので、そのままでは書けない。

## NG例

list fooの最後の要素を取り除く

```yaml:tasks
  - debug:
      msg: "{{ 
        [ 
          {% for i in range(foo|length - 1) %}
            {{ foo[i] }},
          {% endfor %}
        ]|from_yaml
        }}"
    vars:
      foo: ['a', 'b', 'c', 'd']
```

この場合、{{ }}の中に{% %}や{{ }}があるのでエラーとなる。
(外側の{{ }}はfrom_yamlフィルター用)

### 結果

```
TASK [debug] *******************************************************************************************************************
fatal: [localhost]: FAILED! => {"msg": "template error while templating string: unexpected '%'. String: {{ [ {% for i in range(foo|length - 1) %} {{ foo[i] }}, {% endfor %} ]|from_yaml }}"}

```


# 対応方法例

jinja2のループをtask varsなどに逃し、jinja2のフィルター適用と分ける。


```yaml:tasks
  - debug:
      msg: "{{ bar|from_yaml }}"
    vars:
      foo: ['a', 'b', 'c', 'd']
      bar: |
        [   
          {% for i in range(foo|length-1) %}  
            {{ foo[i] }}, 
          {% endfor %}  
        ]   
```

あるいは

```yaml:tasks
  - debug:
      msg: "{{ baz }}"
    vars:
      foo: ['a', 'b', 'c', 'd']
      bar: |
        [   
          {% for i in range(foo|length-1) %}  
            {{ foo[i] }}, 
          {% endfor %}  
        ]   
      baz: "{{ bar|from_yaml }}"
```


### 結果

```
TASK [debug] *******************************************************************************************************************
ok: [localhost] => {
    "msg": [
        "a",
        "b",
        "c"
    ]
}
```
python3での標準入力メモ

この記事は古川研究室 [AdventCalendar](https://qiita.com/flab5420/items/fc94dadc49635f0e5c9f) 5日目の記事です．
本記事は古川研究室の学生が学習の一環として書いたものです．
内容が曖昧であったり表現が多少異なったりする場合があります．

#まえがき
これまで受けた[track](https://tracks.run/)や[paiza](https://paiza.jp/)でのコーディングテストで，入力のリストの整形にとまどったので自分用にまとめます．

標準入力は```input()```らしいのですが，入力として文字列```line```が与えられたとします．


#区切り文字のある文字列を分割する
ここでは入力リスト```line```の要素が空白で区切られた文字列を分割します．

```python
line = '3 2 3 2 3 2'
```

この場合，```split()```を使って分割します．```split()```は文字列を分割したリストを返してくれます．
```split()```の引数には区切り文字を指定します．デフォルトはスペース```split(' ')```と同じです．

```python
ls = line.split()
# ['3', '2', '3', '2', '3', '2']
```

つぎに，上とほぼ同じですが，```','```で区切った場合も書いておきます．

```python
line = '3,2,3,2,3,2'
```
上の```split()```の引数に```','```を設定するだけです．

```python
ls = line.split(',')
# ['3', '2', '3', '2', '3', '2']
```
#連なった文字を分割する
上の場合では区切り文字(スペースやコンマ)がありましたはここでは連なった文字を分割します．

```python
line = '323232'
```
for文で要素一つずつとってあげればよいです．

```python
ls = [i for i in line]
# ['3', '2', '3', '2', '3', '2']
```

おまけに，```ls```に入っている要素を```str```から```int```に変換します．for文で要素一つずつ変換します．

```python
lsin = [int(i) for i in line]
# [3, 2, 3, 2, 3, 2]
```

#2次元配列に格納する
```python
line = ['2,3','123,456']
```
このような入力が与えられたとき，

```python
[[1,2,3]
 [4,5,6]]
```
を得たいとします．```line```の第1要素はおおよそ配列の大きさを表します．（ここでは行数```n=2, m=3```です．）


nとｍは上の方法で取得します．

```python
n, m = line[0].split(',')
```
次に```line[1]```を二次元配列に格納します．
まず，```['123','456']```の配列```ls```を作ります．

```python
ls = line[1].split(',')
# ['123', '456']
```
それから，またそれぞれの要素を分割します．

```python
g = [[i for i in ls[j]] for j in range(int(m))]
# [['1', '2', '3'], ['4', '5', '6']]
```
#おわりに
今回は自分用にざっと入力リストの整形についてまとめてみました．
この記事が誰かのお役に立つと幸いです．

#参考文献
[【競技プログラミングの第一歩】Pythonでのさまざまな標準入力](https://code-ship-blog.wemotion.co.jp/technology/%E3%80%90%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E7%AC%AC%E4%B8%80%E6%AD%A9%E3%80%91python%E3%81%A7%E3%81%AE%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE/)
【Laravel】Laravel8 コントローラメソッドのルート定義

Laravel8ではコントローラメソッドのルート定義方法が変わっているようなので、備忘録。

例えば、HelloControllerのindexメソッドを呼び出す場合、以下のように記述する。

```web.php
<?php

use App\Http\Controllers\HelloController;

Route::get('/hello', [HelloController::class, 'index']);
```

従来であれば、`HelloController@index`のように描いていたが、Laravel8.xのマニュアルでは上記の書き方が紹介されていた。
<BR>
他の方法として、従来の書き方をするのであれば、`app/Providers/RouteServiceProvider.php`を変更する。

```RouteServiceProvider.php
protected $namespace = 'App\\Http\\Controllers';
```
上記の部分のコメントアウトを外せば、`HelloController@index`の記述方法でも動作した。

<br>
参考サイト

https://readouble.com/laravel/8.x/ja/controllers.html
[Kotlin]enumの記述例(インテントでenumを受け渡す)

#概要
enumを使うとコードが読みやすくなりミスを減らすことにつながります。

今回は、enumで定義されたデータを２つのActivity間で受け渡すサンプルコードを共有したいと思います。
#データを渡すActivity
```kotlin

class MainActivity : AppCompatActivity() {
    public enum class MyHandEnum{
        GU,
        CHOKI,
        PA
    }

    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.gu.setOnClickListener{
            openActivity(MyHandEnum.GU)
        }
        binding.choki.setOnClickListener{
            openActivity(MyHandEnum.CHOKI)
        }
        binding.pa.setOnClickListener{
            openActivity(MyHandEnum.PA)
        }
    }

    private fun openActivity(myHand: MyHandEnum){
        val intent = Intent(this,ResultActivity::class.java)
        intent.putExtra("MY_HAND",myHand)
        startActivity(intent)
    }
}
```
#データを受け取るActivity
```kotlin

class ResultActivity : AppCompatActivity() {
    private lateinit var binding: ActivityResultBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityResultBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val myHand: MainActivity.MyHandEnum = intent.getSerializableExtra("MY_HAND") as MainActivity.MyHandEnum

        when(myHand) {
            MainActivity.MyHandEnum.GU -> binding.myHandImage.setImageResource(R.drawable.gu)
            MainActivity.MyHandEnum.CHOKI -> binding.myHandImage.setImageResource(R.drawable.choki)
            MainActivity.MyHandEnum.PA -> binding.myHandImage.setImageResource(R.drawable.pa)
        }
    }
}
```
#補足
enumを分岐させるwhen()を記述したい時は
![スクリーンショット (654).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/b08b86ae-7aaa-8c09-68e5-b4ca03adc50d.png)
when(～){　　まで入力した時点で「Alt+Enter」を押すとenumの項目を自動入力してくれます:ok_hand:
Cloud SQL Auth Proxy

# Cloud SQL Auth Proxyはなぜ必要なのか
ローカル環境からCloud SQLに安全にアクセスできるから。（プライベートIPでアクセスできる）
なので、いちいちGoogle Cloudのインスタンスにデプロイしなくてもいい。
開発過程においては必須である。
![Screen Shot 2021-08-24 at 19.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553280/9cd33ef4-355b-9333-27d2-4dbb2e4cfb61.png)

# Cloud SQL Auth Proxy を使用する際の要件
Cloud SQL Auth Proxy を使用するには、次の要件を満たす必要がある。

>1.Cloud SQL API が有効になっている必要があります。
2.Cloud SQL Auth Proxy に Google Cloud 認証情報を指定する必要があります。
3. Cloud SQL Auth Proxy に有効なデータベース ユーザー アカウントとパスワードを指定する必要があります。
4. インスタンスでパブリック IPv4 アドレスが指定されているか、プライベート IP を使用するように構成されている必要があります。

>パブリック IP アドレスがすべての外部アドレスからアクセス可能である必要はありません（承認済みネットワークのアドレスとして追加する必要はありません）。

1はConsole画面からできる。
2はCloud SQLの設定時にできる。
3はサーバーサイドのコードで実装するのでここでは触れない。
2はここで触れます。

## 2.Cloud SQL Auth Proxy に Google Cloud 認証情報を指定する
Cloud SQL Auth Proxyは、次の順序で各項目をチェックし、最初に見つかったものを使用して認証を試みる。
>1.credential_fileフラグによって指定された認証情報（サービスアカウントキーのpathを使用）
2.アクセストークンによって指定された認証情報（アクセストークンを作成する）
3.環境変数によって指定された認証情報（GOOGLE_APPLICATION_CREDENTIALS 環境変数にサービスアカウントキーのpathを設定）
4.認証済みの Cloud SDK クライアントの認証情報（Cloud SDK 認証情報を使用）
5.Compute Engine インスタンスに関連付けられている認証情報（Compute EngineインスタンスからCloud SQLに接続している場合）
6.環境のデフォルトのサービスアカウント（デフォルトのサービスアカウントを使用）

1.3のサービスアカウントキーを使用する方法が一番やりやすい。
サービスアカウントキーの作成はこちらのドキュメントを見る。

https://cloud.google.com/iam/docs/creating-managing-service-account-keys?hl=ja#iam-service-account-keys-create-console

# Cloud SQL Auth Proxyのダウンロードと起動
Cloud SQL Auth Proxyをダウンロードする。

```
curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64
```

Cloud SQL Auth Proxyを動作可能にする。

```
chmod +x cloud_sql_proxy
```

起動（TCP接続）

```
./cloud_sql_proxy -instances=INSTANCE_CONNECTION_NAME=tcp:3306 \
                  -credential_file=<PATH_TO_KEY_FILE> &
```

※INSTANCE_CONNECTION_NAMEは、SQLインスタンスの接続名のこと
※PATH_TO_KEY_FILEは、サービスアカウントキーを格納したファイルのpathのこと


# 参照
https://cloud.google.com/sql/docs/mysql/sql-proxy?hl=ja

https://cloud.google.com/sql/docs/mysql/connect-admin-proxy?hl=ja

https://cloud.google.com/iam/docs/creating-managing-service-account-keys?hl=ja#iam-service-account-keys-create-console
【TypeScript入門】いろいろな関数の書き方

# はじめに
Typescriptではいろいろな関数の書き方があるので簡単にまとめてみました。

# 戻り値の整理
* ```void```: return文を持たない関数の戻り値
* ```never```: 決して戻ることのない関数の戻り値
    * throwする時や、whileで無限に回したりするときに使う

# 用語の整理
* ```パラメーター```: 関数宣言時に渡される（仮パラメーター）
* ```引数```: 関数を呼び出すときに渡す値(実パラメーター)
* ```戻り値```: 関数が返す値

# いろいろな関数の書き方
## アロー関数
```typescript:src/function/basic.ts
export const logMessage = (message: string): void => {
  console.log('sample 1:', message)
}
```
```typescript:src/index.ts
import { logMessage } from './function/basic'
logMessage('Hello TypeScript!')
//sample 1: Hello TypeScript!
```

## 名前付き関数
```typescript:src/function/basic.ts
export function logMessage2(message: string): void {
  console.log('sample 2:', message)
}
```
```typescript:src/index.ts
import { logMessage2 } from './function/basic'
logMessage2('Hello TypeScript!')
//sample 2: Hello TypeScript!
```

## 関数式
```typescript:src/function/basic.ts
export const logMessage3 = function (message: string): void {
  console.log('sample 3:', message)
}
```
```typescript:src/index.ts
import { logMessage3 } from './function/basic'
logMessage3('Hello TypeScript!')
//sample 3: Hello TypeScript!
```

## アロー関数式の省略記法
```typescript:src/function/basic.ts
export const logMessage4 = (message: string): void => console.log('sample 4:', message)
```
```typescript:src/index.ts
import { logMessage4 } from './function/basic'
logMessage4('Hello TypeScript!')
//sample 4: Hello TypeScript!
```

## neverを戻り値として使う
```typescript:src/function/basic.ts
export const alwaysThrowError = (message: string): never => {
  throw new Error(message)
}
```
自分のGoogle Play Consoleアカウントが閉鎖寸前

#概要
Google Play Consoleのアカウントを作成して放置していたら、アカウント閉鎖の予告が届いたので対応する

#届いたメール
「使ってないから10/13に閉鎖するよ」という予告。
登録料は返金しないよ！というお沙汰。

![takaneko.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/dd57f2bd-df00-c1af-516a-4a6b5ccf58c5.png)

#対応
基本的には言われた通りにすることで消えないと思われる

* Google Play Consoleにログインして「最終ログイン日時」を更新する
* 「TestApp001」とかなんでもいいので、アプリをGoogle Play Console上で作る
* 上記で作成したアプリに適当なaab（Android App Bundle）をアップロードする
* 内部テストでテスターに配信する

たぶん、これでひとまずアカウント削除は回避してくれると思われる。
pcl::fromROSMsgを高速化したい

#pcl::fromROSMsgとは

pcl::fromROSMsgとは、ROS形式からPCL形式にしてくれる優れものです。
しかしながら落とし穴が。。。

#何故かpcl::fromROSMsg遅い
私の環境では約0.1[sec]消耗していました。。。

こんな感じで。。。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ありがとうございます。<br>見てみると0.1secあたり消耗していたので。。。<br>もう少し見直してみます！</p>&mdash; るっと🐨@ロボ研究🤖 (@MeRTcooking) <a href="https://twitter.com/MeRTcooking/status/1430093260463087627?ref_src=twsrc%5Etfw">August 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ちょっとした、解決方法へ。。。

#高速化の呪文！！！（0.1[sec]→0.01[sec]へ）

それは、、、、！！！！！

```
catkin build -DCMAKE_BUILD_TYPE=Release
```

-DCMAKE_BUILD_TYPE=Releaseでした。。。

-DCMAKE_BUILD_TYPE=Debugで以前はしていたみたいです。。。
（初歩的。。。）

これで、だいだい0.1[sec]→0.01[sec]になりました。。。
まだまだ早くしたいですね！！！
他の方法を誰か知っていたら教えてください！！！！！

ではでは！！！
【Chart.js】プラグインchartjs-plugin-colorschemesが反映されない件

# 目的
Chart.jsでchartjs-plugin-colorschemesを使う際にハマってしまったのでその備忘録になります。
結論言うとchartjs-plugin-colorschemesはChart.jsのバージョン2系までしか動作しないようです。

# 環境
react: "^17.0.2",
typescript: "~4.1.5"
chart.js: 3.x.x
react-chartjs-2: 3.x.x
chartjs-plugin-colorschemes: "^0.4.0",

# chartjs-plugin-colorschemesについて
簡単な紹介です。
Chart.jsを使う人はご存知かと思いますが、グラフを描画する際にグラフ一つひとつの色を、プログラムで指定しなければいけません。
そこで自動でいい感じに色を付けてくれるのが**chartjs-plugin-colorschemes**です。
自動といってもある程度パターンは指定できるので、詳しくは公式サイトを確認してください。
公式サイト
https://nagix.github.io/chartjs-plugin-colorschemes/

# 注意点
私の場合、TypeScriptで使いたかったため下記コマンドで`chartjs-plugin-colorschemes`をインストール

```console
npm install chartjs-plugin-colorschemes --save
npm install --save-dev @types/chartjs-plugin-colorschemes
```
しかしコードに組み込んでも色が反映されませんでした。

調べたところ`chartjs-plugin-colorschemes`はChart.jsのバージョンはv2.9.4まで対応とのことでした。Chart.JS v3系は未対応っぽいです。
https://github.com/nagix/chartjs-plugin-colorschemes/issues/28

`chart.js`と`react-chartjs-2`をv2系にバージョンダウンさせたところ正常に反映されました！！

# まとめ
Chart.jsの2系と3系の違いは結構あるっぽいので注意が必要ですね。。。。
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
2021/8/23　学ぶ言語

####本投稿の目的
・Qiitaの使い方を学ぶ:taco:
・これから学ぶ言語でできること？を理解する:cheese:

学ぶのは以下の5言語
- HTML:sunny:
- CSS:cat:
- JavaScript
- Ruby
- RubyOnRails

スタンプが使えるだけでも既に面白いな
’#'で見出しにしたり個数を調整できるのか，ふむふむ
Quiitaの使い方で面白いと思えるくらいじゃなきゃプログラミングやっていけない気がしてきたな笑


###HTML
>HTMLとはハイパー・テキスト・マークアップ・ランゲージの略で，Webページの土台となるファイルを作成する言語です『HTML&CSSとWebデザイン』

どの教材でもHTMLの章から始まるのはHTMLありきってことなのかな。
Wikipediaに木構造のマークアップ言語とあった。

そもそもマークアップ言語の意味するところがわからないので引用
>人間であれば直感的に理解できる事柄を、タグや記号で表示し、コンピューターに認識させることを指します。https://mynavi-creator.jp/blog/article/what-is-mark-up-language

なるへそ。コンピューターに認識させるためにタグでテキストを構造化しているのか。

HTMLの歴史

1989年 HTML開発
1991年 HTML1.0
1995年 HTML2.0
1997年 HTML3.2

Rubyとかは同時期なのかなあとでわかるけど
JavaScriptでHTMLを動きをつけられるようになったのは流石にこれより後だと予想。

###CSS
>CSSとは「Cascading Style Sheets」の略で，文書の見た目を装飾するための言語です。『HTML&CSSとWebデザイン』

CSSを読み込んでいないWebページは簡素でただ文字と画像が並んでいるだけどCSSを使うと普段目にしているようなWebサイトになる。

要はデザインを担うという認識か。:fist_tone3:

1994年に提唱されて1996年に勧告

1996年 CSS Level1
1998年 CSS Level2
2011年 CSS Level3
2018年 CSS Level4

HTMLができてから思ったより時間空いているなあという印象
HTMLとCSSセットで完成されたものとして公表されなかったってことはやっぱりとにかく作るという姿勢が大事だということが伺える気がすんる

役割は再確認できたからCSSはこの辺で

###Javascript

>JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。https://ja.wikipedia.org/wiki/JavaScript

ふーむ，，，，:frowning2:

オブジェクト指向スクリプト言語
プロトタイプベース

この辺は軽く調べたけど今はまだ理解できず，，，

>Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバ、デスクトップからスマートフォンまで多岐にわたっている。

素人の自分にはなんでもできるって解釈できてしまうな，，，なんという言語

歴史はこじれてそうだから割愛

###Ruby

>1995年の一般公開以来、Rubyは世界中から熱心なプログラマーを集めています。 2006年になると、Rubyは大量の支持を集めました。 現在では、世界中の主要都市に活発なユーザーグループが形成され、 そしてRubyに関する大規模なカンファレンスが開かれています。https://www.ruby-lang.org/ja/about/

人気らしい笑
あと柔軟な言語でユーザー側で多少書き換えることができるのか，，，
書き換えるとはどういうことなんでしょうか，，，

自己流でもいけちゃうから逆に引き継ぎとかでは注意が必要なのね

製作者日本人の方なのか！！！！

>Webサービスやアプリケーションが挙げられます。Rubyは人気のフレームワーク「Ruby on Rails」のベース言語です。

ショッピングサイトブログサイトアプリケーションサイトが得意
ほーう，これはビジネスにおいては欠かせないなあ

###Ruby On Rails

> Rubyを使用したフレームワークのひとつとして知られるのが、Ruby on Railsです。https://hnavi.co.jp/knowledge/blog/ruby-on-rails/

フレームワークの定義があやふやだったので，，，

>Webアプリケーション開発を行う際に必要となる機能や、基本的な骨組みをまとめたものです。

型みたいな認識かな

Model
View
Contoroller

Progateでちょろっと勉強したときにこの3つのやりとりの理解に結構苦しんだなあっていう,,,

まあ，一回勉強したから2回目はするするいけるはず！！

それにしてもたとえばviewからModelに直接指示だせたりしないのかな，，，

詳しくて時間に余裕ある方いたらぜひ教えてください

####最後に

こんなところで5言語ほんとにざっくり調べたけどこの内容に関しては詳しく覚える必要はない気がしてるのでとりあえず，買った教科書使って勉強始めますか！！！！

最後にスタンプで遊んじゃお

:helmet_with_cross::flag_ae::bath_tone5::pizza::fountain:

タグは5個までという，，，悲しみ
AI画像認識（AI - OCR）の技術で業務の省力化、高速化、生産性向上

![OCR 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1217452/fa8bd1ee-0c99-b7b4-5d4a-49c40f5b0c00.png)
　　近年、多くの企業がディープラーニング（深層学習）、レインフォースメントラーニング（強化学習）、OCRなどの技術を活用して、業務の省力化、高速化、生産性向上に貢献できる 画像認識 AI（人工知能）モデルを導入しています。活字だけでなく手書きも、様々な資料をスキャンしたい場合、OCR（Optical Character Recognition：光学文字認識）をよく使っています。 当社カオピーズは、多数の企業様に役に立っている 画像認識 AIモデルをご提供できるだけではなく、御社ご要望に最適なAIモデルのスクラッチ構築やAIを応用したシステム開発もお手伝いします。
　　本記事では、ディープラーニングを活⽤した機能性AI-OCRエンジンのご紹介とその導⼊⽅法のご提案させて頂きます。
　　**【Kaopiz OCRとは】**
　　**[Kaopiz OCR](https://ocr.kaopiz.com/)**とは、運転免許書、パスポート、領収証、在留カードなどの様々な書類の画像から、AIとOCR技術により簡単・正確・高速で情報を読み取り、データ化することが出来るアプリケーションです。取引先ごとにフォーマットが異なる書類も まとめて簡単にデータベース化することができます。
![OCR 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1217452/c12b0be0-7d67-61e6-5a07-4df89bc02a8e.png)
　　Kaopiz OCRは、AIによる画像解析を活用することで幅広い書類フォーマットへの対応と学習による継続的な読み取り精度の向上を可能にするエンジンです。Kaopiz OCRは、ただのOCRではなく、最新技術である**[AI・ディープラーニング](https://kaopiz.com/ja-news-what-is-deep-learning/)**を応用した賢いOCRのエンジンです。今まで当社カオピーズで積み重ねてきた多くの**[システム開発](https://kaopiz.com/ja-system-development/)**の経験とAIとOCR技術を独自に研究開発してきたノーハウで、世界最高水準だけでなく、お客様に最適な書類読取アプリケーションを提供いたします。
![OCR 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1217452/164ed251-f035-6ddb-a8b8-37f4182ab3e0.png)
　　Kaopiz OCRというテクノロジーを通じて企業の生産性やサービスの利便性を高めて、**[デジタルトランスフォーメーション（DX）](https://kaopiz.com/ja-digital-transformation/)**時代をより早く現実にしてまいります。今までたくさんの労力を費やした書類の目視確認と手入力の作業を、これからはAIとOCRの技術で効率的に実現していきます。
![OCR 2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1217452/e98fb40a-eb28-e48f-e3cf-af1e3adadb8d.jpeg)
　　**【[Kaopiz OCRの特長](https://kaopiz.com/ja-news-ai-ocr-technology-introduction/)】**
①　AI・ディープラーニング技術を生かして賢いOCRアプリケーションに導入可能
②　Kaopiz OCRそのものだけでなく、周辺のシステムをまで開発可能
③　多様多種の書類と業務に対応できるカスタマイズ性が高い

　　**【まとめ】**
　　今まで当社カオピーズで積み重ねてきた多くのシステム開発の経験とAIとOCR技術を独自に研究開発してきたノーハウで、世界最高水準だけでなく、お客様に最適な書類読取アプリケーションを提供いたします。従来のOCRから進化したAI-OCRを活用することで、多様な文章表現も高精度で認識可能であり、業務効率化に大きく貢献することができると考えておりますので、 業務効率化を向けた対策を模索中の方は、是非一度弊社の**[AI-OCRエンジンの導入](https://kaopiz.com/ja-ai-image-recognition/)**をご検討ください。
　　弊社**[株式会社カオピーズ](https://kaopiz.com/)**は、2014年9月に創業してから7年目を迎え、お客様に**高品質なシステム開発、DX推進支援、[AWS導入支援](https://kaopiz.com/ja-news-kaopiz-aws-consulting-partner-2021/)、AI画像認識等の[オフショア開発サービス](https://kaopiz.com/ja-news-offshore-development-trends-2021/)**をリズナーブルな価格で提供しています。お客様のご要望をヒアリングした後、それに見合った開発基盤、プロセス、体制などを提案し、お客様と合意した上、システム開発を行なっていきます。多くの企業様を支え続けてきた300案件以上からくる豊富な知見とノウハウで、ご要件に見合ったクラウドサービスの提案からクラウド環境の設計、構築、運用をまでサポートいたします。
　　カオピーズにとって、案件の初期のみならず、開発期間中に出てくる課題を解決し、要件変更に対して最適な対策を取るなどが必要です。そこで、**[システム開発](https://kaopiz.com/ja-news-system-development-process-2021/)**に関してお悩みがあれば、是非お気軽にご相談ください。
Xcode13で非表示になったファイル拡張子を表示する

#環境
- Xcode 13.0 beta 5 (13A5212g)

#概要
Xcode13（beta）からナビゲーションエリアのファイル拡張子がデフォルトで非表示になったようです。

**Apple：**「新アイコンめっちゃイケてるから拡張子なくても識別できるやろ？」

ということでしょうか。

![navigationArea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476381/82ae312d-34e2-e2ad-7e1f-e89eb0f03a3e.png)



#設定方法

`Preferences` > `General` > `File Extensions`から表示切り替えを行えます。

|||
|:---:|:---:|
|Preferences > General|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476381/b6c5b478-ae28-dbed-b701-18a21de65d0a.png" width=800>|
|`Show All`を設定|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476381/f79f5488-ab4d-2527-cb96-9e9a90c7d9ba.png" width=300>|
|拡張子が表示される|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476381/29dedd1a-d253-324c-0f53-c6cdc5146181.png" width=400>|


表示したい拡張子を指定することもできるようです。（使わなそう）

|||
|:---:|:---:|
|swiftとstoryboardのみ指定|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476381/f8435704-1769-52ab-5ffd-d284485422bc.png" width=800>|
|指定した拡張子のみ表示される|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476381/aa8b67df-223e-c842-eea4-bf0f71c248ae.png" width=400>|

# 参照
>**Resolved Issues**
By default, the project navigator hides file extensions and document tab titles. Configure this behavior in Xcode’s general preferences. (71203294)

https://developer.apple.com/documentation/xcode-release-notes/xcode-13-beta-release-notes#Updates-in-Xcode-13-Beta
CentOS7でC++11が使えない原因

CentOSではSoftware Collectionからdevtoolset-10をインストールすればg++10がインストールできる。
しかしながら実際はC++11の機能はほとんど使えない。これは--with-default-libstdcxx-abi=gcc4-compatibleでコンパイルされており、古いlibstdc++を使うようになっているため。
_GLIBCXX_USE_CXX11_ABIをコンパイル時に定義しても無駄。

参考：
https://stackoverflow.com/questions/47951367/d-glibcxx-use-cxx11-abi-1-ineffective-for-devtoolset-7-on-centos-7/50459937#50459937
https://bugzilla.redhat.com/show_bug.cgi?id=1546704

使いたければ自分でgccをビルドするしか無い。
FirebaseのSMTP設定でGmailとiCloudからメールを送信できるようにしてみた

FirebaseのSMTP設定でGmail・iCloudからメールを送信する方法

恐らくFirebaseに限らず、どのSMTP設定もこれで送信できると思います。

一応、nodemailerで試したところ、メールを送信できました。

|  |Gmail  |iCloud  |
|---|---|---|
|送信者のアドレス  |name@gmail.com  |name@icloud.com  |
|SMTPサーバーホスト  |smtp.gmail.com  |smtp.mail.me.com  |
|SMTPサーバーポート|465|587|
|SMTP ユーザー名|name@gmail.com|name@icloud.com|
|SMTP パスワード|以下のサイトを参考にアプリパスワードを作成してください。<br>[https://pc-karuma.net/google-account-generate-app-password/](https://pc-karuma.net/google-account-generate-app-password/)|以下のサイトを参考にアプリパスワードを作成してください。<br>[[https://support.apple.com/ja-jp/HT204397](https://support.apple.com/ja-jp/HT204397)|
|SSL セキュリティモード|SSL|STARTTLS|

# 注意点

・SMTPパスワードは**ログインするときのパスワードではない**ことに気を付けてください。
・フリーのメールアドレスのため、docomo、au、softbankなどの**キャリアアドレスでは迷惑メールとして判断される**ため、キャリアアドレスではメールが受信されません。
#ReactなんでもLT会 に参加して

# React LT会 in LCDC まとめ

2021/08/20(fri)にオンラインLT会に視聴者として参加してきました。
自分の気になった、ためになったトピックについてまとめました。今後も月１ペースくらいでやっていこうと思います。

## 参加したLT会
[ReactなんでもLT会](https://ncdc-dev.connpass.com/event/218763/?utm_campaign=&utm_source=notifications&utm_medium=email&utm_content=title_link)

## #1 カスタムHookを利用したUIとロジックの分離
Reactで開発をするにあたって、太古の昔から言われていること→ **分解せよ**
- 機能とデザイン(UI)の分離
- 機能同士の分離(細分化) ...etc

### ReactにおけるUIとロジックの分離
ReactでUIとロジックを分離するには？
→ **React Hooks**のカスタムフックを使用

#### そもそもReact Hooksとは？
> フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

公式ドキュメントの序文にはこのように記載がある。公式サンプルコード(ボタンカウンター)がよくわかりやすい。

フックは関数コンポーネントにstateなどのReactの機能を接続するための機能(関数)。

#### カスタムフックとは
> カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。

つまりデフォルトで用意されている`useState`などのように`use`から始まるオリジナルのフックがカスタムフックになる。

カスタムフックを有効に活用して、ロジックとUIを切り離し、メンテナンス性や再利用性の高いコードを作ることが重要である。


## #2 React Bootstrapのススメ
### React Bootstrapとは？
Twitter社が開発したCSSフレームワークBootstrapをReact用に最適化したもの。
デザインが得意でない人でも手軽に整えられたデザインのReactアプリが作成できる。

### 使い方
通常のjsx要素の記述をBootstrap用に変更してあげるだけで適用される。

- 通常のReact
```jsx
...
return (
  <div>
    <button>データ取得</button>
    <table>
      <thead>
        <tr>
          <th>user.id</th>
          <th>user.name</th>
          <th>user.address</th>
        </tr>
      </thead>
    </table>
  </div>
);
```
- React Bootstrap適用
```jsx
...
return (
  <div>
    <Button variant="primary">データ取得</Button>
    <Table>
      <thead>
        <tr>
          <th>user.id</th>
          <th>user.name</th>
          <th>user.address</th>
        </tr>
      </thead>
    </Table>
  </div>
);
```

このようにタグの表記を少し変えたり、オプションやクラスを指定するだけで決まったデザインを適用することができる。

### デメリット
デザインの自由度は高くないので、カスタムしたい人や、独創的なサイトやサービスには向いていない。

## #3 ライフサイクルを意識しながらReactコードを書こう
### 「ライフサイクル」とは？
一般的な意味としてのライフサイクルとは？
→生活環
例：植物🌱

- 成熟した個体から種が生まれる
- 種が芽生える
- 芽生えた個体が育つ
- 育った個体がまたタネを撒く
(以降無限ループ)

これが「ライフサイクル」＝「生活環」

### Reactにおける「ライフサイクル」とは？
![React Lifecycle](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ogimage.png)

Reactを触ってる人なら一度は見たことがあるであろうこの画像が示す通り、コンポーネントが描画されてから消えるまでの循環を**Reactにおけるライフサイクル**と呼ばれている。

### マウント
コンポーネントのインスタンス(要素)がDOMツリーに挿入されること

### アンマウント
DOMツリーからインスタンスが削除されること

### ライフサイクルのミスとは？
ライフサイクルのミスが起こると
→エラーの原因になる。
エラーの原因とは？
→「副作用」を考慮していないから

### 副作用とは？
副作用という単語自体はプログラミングの世界では広義に様々な場面で使われる。
共通している認識は次の通り。
- 引数以外の要因で結果が変わってしまう関数
- 関数の外に影響を与えてしまう関数

Reactにおける副作用はデータ取得、コンポーネント内でDOMツリーを操作する、描画した後に何らかの変更を加えることを指す。

Reactにおける副作用の例
- DOMの変更
- APIとの通信
- console.log
- ファイルへの書き込み
- state/propsの変更
- オブジェクトまたはその内部のプロパティへの代入
- 配列のpush()

などが挙げられる。

### 副作用の回避
副作用を回避するには次のような対処法がある。
- ローディング処理
- `&&`を賢く使う
```jsx
{hogehoge && (
  <Input
    value={hogehoge}
  />
)}
```

###　わからなかったら。。。
わからなかったら公式DOCをとにかく読むべし！
パソコン初期設定備忘録(Windows10)

# 目次
1. 初めに
1. インストールするアプリ
1. Windows設定アプリ内
1. おわりに

# 初めに
ここ最近プログラミング環境に不満を感じたり，新規でパソコンを購入する機会が多くあったのですが久しぶりの初期設定だったことで，どのような設定にしていたか忘れていました．
なので備忘録として書いていきます．
理系大学生が良いと感じた設定ですのでよさそうだなと思ったらぜひ真似してみてください．あとおすすめの設定変更があったら教えてください．

# インストールするソフト
- iTunes(Apple関連ソフト)
- Blitz(VALORANTのTracker)
- Discord(ゲーム用SNS)
- git
- Google Chrome
- heroku
- Krisp(マイクのノイズキャンセリングアプリ)
- LINE
- Visual Studio Code
- OBS Studio
- Python
- Razer Synapse
- Steam

# Windows設定アプリ内
Windowsの設定アプリ内で変更する箇所です．
## システム
- サウンド
    - アプリの音量とデバイスの設定
        - システム音:1
- 電源とスリープ
    - 画面:なし
    - スリープ:2時間
- 個人用設定
    - 小さいタスクバーボタンを使う:オン

# おわりに
どんな設定にしてたか忘れてるのでわかり次第どんどん追加しようと思います～
Windowsってデフォルトで設定移行してくれる機能あるけどつい自分で設定したくなっちゃうね
Nuxt.jsにVuetifyをインストールしたら、サーバーが起動しなくなった

Nuxt.jsにVuetifyをインストールしたところ、エラーが発生し、サーバーが起動しなくなってしまいました。
今回は、CLIを使用せずにインストールしました。

下記に、吐かれたエラーと解決方法を記します。

Nuxt.jsのバージョンは、

```
% npx nuxt -v
@nuxt/cli v2.15.8
```

Vuetifyをインストールします。

```
% npm install @nuxtjs/vuetify -D
```
ちなみに「-D」というのは、「--save-dev」の省略形のようです。
参照：https://stackoverflow.com/questions/23177336/what-does-npm-d-flag-mean
公式ドキュメントはこちら：https://vuetifyjs.com/ja/getting-started/installation/

次に、nuxt.config.jsファイルを更新して、ビルドにVuetifyモジュールを含めます。

```nuxt.config.json
export.default {
:省略
:
buildModules: [
    '@nuxtjs/vuetify'
  ],
:
:省略
}
```

そして、サーバーを起動するとエラーが。。。

```
% npm run dev

 WARN  Module @nuxtjs/vuetify not found. Please ensure @nuxtjs/vuetify is in dependencies and installed.


 FATAL  Cannot find module '@nuxtjs/vuetify'

  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
  at Function.resolve (internal/modules/cjs/helpers.js:33:19)
  at p (node_modules/jiti/dist/jiti.js:1:52987)
  at Resolver.v [as _require] (node_modules/jiti/dist/jiti.js:1:53886)
  at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:381:29)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:182:38)
  at promise.then (node_modules/@nuxt/utils/dist/utils.js:639:43)
  at process._tickCallback (internal/process/next_tick.js:68:7)
  at Function.Module.runMain (internal/modules/cjs/loader.js:832:11)
  at startup (internal/bootstrap/node.js:283:19)


   ╭─────────────────────────────────────────────────╮
   │                                                 │
   │   ✖ Nuxt Fatal Error                            │
   │                                                 │
   │   Error: Cannot find module '@nuxtjs/vuetify'   │
   │                                                 │
   ╰─────────────────────────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! front@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the front@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/{ユーザー名}/.npm/_logs/2021-08-23T15_11_34_999Z-debug.log
```
上記で、「FATAL  Cannot find module '@nuxtjs/vuetify'」と書かれています。

nuxt.config.jsonのvuetifyモジュールをmoduleへ書き換えるなどしましたが、解決できず。。。
こちらの解決法の参照：https://qiita.com/munieru_jp/items/882727bb493c8502aea1

最終的に解決できた方法はこちら↓
https://github.com/nuxt-community/vuetify-module/issues/338

node-modulesフォルダを一旦全て削除してから、再度インストールし直しました。

少し躊躇しましたが、問題なく完了しました！笑

今回の記事は以上です！

何かご意見があれば、気軽にコメントください！
また、こうした方が良かった等のご意見も頂ければ幸いです！
AdMob　リワード広告設定時に詰まった点

自作androidアプリ　[Flexible Dice](https://play.google.com/store/apps/details?id=com.chelak.dice)　にはリワード広告を実装しているのですが、その実装の際に詰まった点を備忘録的にメモしてみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344513/6102ee3d-9058-12b2-3bac-ab0bcc81101c.png" width="160" height="326" class="jop-noMdConv"> <a href='https://play.google.com/store/apps/details?id=com.chelak.dice&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Google Play で手に入れよう' src='https://play.google.com/intl/en_us/badges/static/images/badges/ja_badge_web_generic.png'/ width="200"></a>

## 詰まった点
**アプリ認証後しかAdMob審査ができない**
AdMobの審査をする際にストアからアプリを検索しないといけない。つまり、ストアへの登録→AdMob審査の順番になるため、ストアへ登録した直後（48時間程度）は広告が表示されない。
バナー広告の場合はあまり問題ないが、リワード広告の場合は報酬を受け取れないので機能が一部使えなくなる。

これを防ぐために、まずリワード広告をつけていないアプリで審査を通し、広告ありのバージョンにアップデートするという方法をとった。

**忘れがち？な登録内容**
AdMobの「支払情報」の登録を忘れていた。これをやらないといつまでたってもアプリの広告審査が「準備中」から変化しない。
※これで１週間くらいロスした。

この項目だけは入力しなくてもアプリの登録、審査依頼ができる上、通常の審査待ちと同じ「準備中」状態になるため、意外と気づきにくいんじゃないかと思う。

**パーミッション**
これはリワード広告というかAdMobの仕様だが、インターネットアクセスのパーミッションが必要。

```kotlin:AndroidManifest.xml
<manifest>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>
```

見落としていて結構時間を取られてしまった。
kintoneのURLを利用してアクションをトリガーにするカスタマイズ

今回は、kintoneのアクションボタンをトリガーにして何かをするカスタマイズです。

記事を書こうと思い立ったきっかけはこちらのツイートでした👀✨✨

https://twitter.com/juri_don/status/1429636311544041474?s=20


https://twitter.com/kentaro1sh11/status/1430004435334307843?s=20

なるほどー！！！便利！！！

`location.href` から、keyもvalueも持ってこれないかなーと探してみた結果、いい感じのやり方を見つけたので紹介したいと思います👀✨✨


# アプリの準備

**フォームの設定**

| フィールド種類 | フィールドコード | 備考 |
|:-:|:-:|:-:|
| ラジオボタン  | どっちのアクション  |--（初期値）, 1, 2   |
| 文字列(1行)  | アクション1  |   |
| 文字列(1行)  | アクション2  |   |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/2492a87b-eba1-17b5-522c-a1ebd5fdd6fe.png)

**アクションの設定**

アクションを2つ作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e76f0a50-10a7-a4e9-5849-eb783c876c6b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c4b59529-33bb-bc2b-dae8-545955dd0bf8.png)


## 値を入力しておく

| フィールドコード | 値 |
|:-:|:-:|
| どっちのアクション  | --  |
| アクション1  | 1  |
| アクション2  | 2  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/52aba9a2-d520-5574-04e7-1f2a9420c504.png)

## アクション1ボタンをクリックしてURLを確認する

アクション1ボタンで新しいタブが生成されると、そのURLが

`https://【サブドメイン】.cybozu.com/k/【アプリID】/edit?action=【アクションID】&app=【アプリID】&record=【元のレコード番号】`

のようになるので、アクションIDを控えておきます。
私の環境で言うと、↓アクション1のIDは5527682となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/971e620c-bc8f-e146-f96d-2d1211d86a53.png)

## やりたいこと

アクション機能、テキストボックスにコピーすることはできるのですが
新規に値を入力するということはできません。

今回はカスタマイズでラジオボタンにどちらのアクションが選ばれたかを入力してみたいと思います。


# JavaScript

レコード追加のイベントでこんな感じにコードを書きます。
（アクションが3つ以上になったらswitch文使うなどそこは工夫してね👀）

```js
// レコード新規登録
kintone.events.on(["app.record.create.show"], (event) => {
  // URLからパラメータ部分を取得する
  const params = new URLSearchParams(location.search);
  if (params.has("action")) { // actionというパラメータを持っていたら
    // paramからgetしたアクションIDが、アクション1のアクションIDなら
    if (params.get("action") === "【アクション1のアクションID】") {
      // ラジオボタンでアクション1を選択する
      event.record.どっちのアクション.value = "1";
    } else {
      // ラジオボタンでアクション2を選択する
      event.record.どっちのアクション.value = "2";
    }
  }
  return event;
});
```

# こんな動きになります

試してみてね！

<iframe width="480" height="360" src="https://www.youtube.com/embed/pNqd5-yBiAs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# まとめ

そしてそして実は、こんな小難しいことしなくても、

`location.href.includes("action=5527682")`

で良さそうだということを教えて下さいました👀！！！

https://twitter.com/juri_don/status/1430091020532740099?s=20



みくさん、ｲｼｲｹﾝﾀﾛｳさん、ありがとうございました✨✨
Oracle Locale Builderを使った文字ソート順のカスタマイズに関するTips

Oracle Databaseの文字ソート順をカスタマイズする方法について調べる機会がありました。
ニッチな領域ですが、せっかく調べたので分かったことを整理しておこうと思います。
ちなみに文字ソート順のカスタム処理は「照合（英語だと collation）」とも言います。

## Locale Builderによるカスタム・ソート・オブジェクトの作成

以下マニュアルを参照ください。

- [12.6 Oracle Locale Builderを使用した新規言語ソートの作成](https://docs.oracle.com/cd/F19136_01/nlspg/customizing-locale-data.html#GUID-114ABBB8-9B7C-449F-A408-821518356399)
- [12.7 NLBファイルの生成とインストール](https://docs.oracle.com/cd/F19136_01/nlspg/customizing-locale-data.html#GUID-5DF1E03A-8DEA-4594-929C-E225E74A95A0)

上記はOracle Database 19cのマニュアルなので、他バージョンについては対応するマニュアルを確認ください。

## 作成したカスタム・ソート・オブジェクトの利用

前項で作成したNLBファイルを配置します。
Linux環境の場合は以下のように「$ORACLE_HOME/nls/data」配下に置きます。

```
$ cp /directory_name/xxxxx.nlb $ORACLE_HOME/nls/data
```

その後は NLS_COMP および NLS_SORT を設定します。

```
SQL> ALTER SESSION SET NLS_COMP=LINGUISTIC
SQL> ALTER SESSION SET NLS_SORT=<言語定義名>
```

あるいは環境変数として設定しても大丈夫です。
以上で完了です。

## カスタム・ソート・オブジェクト利用時の留意点

+ NLBファイルなどカスタムソートに関連するオブジェクトは、DBのアップグレードや集積パッチ適用する度に再作成することが推奨
    - NLS関連オブジェクトのバージョン間の互換性を保証していないため
+ DBのキャラクタセットによるバイナリソートと比較してパフォーマンス面でオーバーヘッドが生じる可能性あり
+ NLBファイルはリモートクライアントやDBLink接続するリモートDBにも配置が必要
    - 環境変数としてNLS_SORTを設定する場合、リモート環境にNLBファイルがないとエラーになる
+ リモートクライアントやリモートDBのバージョンが対象DBと異なる場合は、各バージョンごとにNLBファイルを生成する必要あり
+ ALTER SESSIONでNLS_SORTを設定している場合、RAC環境ではフェイルオーバー後もセッション状態を復元できるように考慮が必要
    - フェイルオーバーするとセッション情報は一旦失われるため
    - こちらについてはOracle Databaseの[アプリケーション・コンティニュイティ](https://docs.oracle.com/cd/F19136_01/racad/ensuring-application-continuity.html#GUID-C1EF6BDA-5F90-448F-A1E2-DC15AD5CFE75)でセッション状態の復元が可能（要RAC or ADGライセンス）
    - もしくはログオントリガーでも対応可能
Ubuntu 20.04にpostgresql-client-13をインストール (Unable to locate package postgresql-client-13の対処方法)

# 環境

- AWS
- Ubuntu 20.04

# 概要

- 以下のコマンドで、postgresql-client-12はインストールできるが

```
sudo apt install postgresql-client-12
```

- 以下のコマンドで、postgresql-client-13はインストールできない

```
sudo apt install postgresql-client-13

E: Unable to locate package postgresql-client-13
```

# インストール手順

## 準備

- 参考にしたサイトでは
  - updateとupgradeを行う
  - 再起動を行う
  - vim、wget、bash-completionをインストール
- とあるが省略可能

```
sudo apt update
sudo apt -y upgrade

sudo reboot
```

```
sudo apt -y install vim bash-completion wget
```

## PostgreSQL 13 repositoryをUbuntuのシステムに追加

- aptにキーを追加（PostgreSQL repository用のPGP PUBLIC KEYを追加）
  - PostgreSQL repositoryを参照するために必要な手順と捉えておけばよさそう

```
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
```

- Ubuntuが参照するリストにPostgreSQL repositoryを追加

```
echo "deb http://apt.postgresql.org/pub/repos/apt/ `lsb_release -cs`-pgdg main" |sudo tee  /etc/apt/sources.list.d/pgdg.list
```

## インストール

- リポジトリの参照先を変更したのでupdateする

```
sudo apt update
```

- クライアントのインストール

```
sudo apt install postgresql-client-13
```

- サーバのインストール

```
sudo apt install postgresql-13 
```

## 確認

```
psql --version
```

```
dpkg --get-selections | grep postgresql
```

# 参考にしたサイト

https://computingforgeeks.com/how-to-install-postgresql-13-on-ubuntu/
elixirプロジェクトで環境変数を呼び出す

.devcontainerで環境構築した場合は、docker containerの設定上、~/.zshrcに環境変数を設定する必要があります。

```
export SECRET_KEY=FDGAGVFBVSfsfsdfaer3r4sbfshsg...
source .zshrc
```
設定した環境変数を呼び出すには以下のようにします。

```
System.get_env("SECRET_KEY")
```
scpコマンドを使った、プライベートサブネット内EC2へのログイン

#scpコマンド

まずは、scpコマンドとは何か。
「リモート環境で違うサーバーへファイルをコピーできるもの」

今回の手順として、
①AWS上にて2つのサブネットを作成（パブリックとプライベート1つずつ）
②各サブネット上にサーバー（EC２）を追加
③プライベート側のEC2へログインするためにパブリック側へ一度ログインし、そこからプライベート側へログイン

③の手順の際にEC2ログインするためのキーペアのファイルが必要になってきます。
しかし、そのファイルはローカル上にしかない状態なので、これを一度パブリック側へ移さないといけない。
そのためscpコマンドでローカル→EC2（リモート側）へキーペアのファイルをコピーします。

また、以下２点の手順も踏みます。
・オプションを加えることでssh接続の際使用されるファイルと指定する。（-iオプション）
・保存先のディレクトリも同時に指定する。（保存先パスの末尾に「：ディレクトリー」）


コマンドはこんな感じ、

     scp -i ファイル名　保存先パス（ユーザー名＠IPアドレス）:/tmp

無事コピーができたらパブリックインスタンスへログインし、
ls -lにてファイルを確認できるかと思います。

そこから同様にプライベート側へログインすると無事実行できると思われます。

※NATゲートウェイなどの設定に関しては省略しており、
あくまでリモートログインする手順だけまとめてみました。

気になる点などありましたらコメント残していただけると嬉しいです！

参照
https://qiita.com/chihiro/items/142ebe6980a498b5d4a7
Macのパーミッションについた@（アットマーク）を取り除く方法と注意点。

AWSから公開鍵ファイルをダウンロードし、パーミッションを確認したところ、@（アットマーク）がついていました。
これについて、調べたこと、@（アットマーク）の削除方法について記載します。

## 最初に結論。
`ls -l@ ファイル名` で属性確認。
`xattr -c ファイル名` で属性削除。
**※ DesktopやDownloadの配下にあると消せない属性があるので注意。**

## ダウンロードしたファイルを確認。
```
$ ls -l ~/Downloads/my-key-pair.pem
-rw-r--r--@ 1 xxxx  xxxx  1678  8 22 21:37 /Users/xxxx/Downloads/my-key-pair.pem
```
@が表示されています。

## これは何か？
OSX のデフォルトのファイルシステムの拡張属性がそのファイルについていることを示します。
今回はブラウザからダウンロードしたファイルなので、そういった情報が記録されています。

## どんな情報がついているか確認する。
この拡張属性の操作には xattr コマンドを使います。
`xattr ファイル名`拡張属性の一覧を表示できます。

```
$ cd ~/Downloads
$ xattr my-key-pair.pem
com.apple.macl
com.apple.metadata:kMDItemWhereFroms
com.apple.quarantine
```

`ls -l@ ファイル名`としても確認することができます。パーミッションも確認できるので便利ですね。

```
$ ls -l@ my-key-pair.pem
-rw-r--r--@ 1 xxxx  xxxx  1678  8 22 21:37 /Users/xxxx/Downloads/my-key-pair.pem
	com.apple.macl	  72
	com.apple.metadata:kMDItemWhereFroms	  93
	com.apple.quarantine	  57
```

## 拡張属性を削除する。
xattr コマンドの-dオプションを使うことで拡張属性を削除します。
使用例: `xattr -d 属性 ファイル名`

```
$ xattr -d com.apple.quarantine my-key-pair.pem
$ ls -l@ my-key-pair.pem
-rw-r--r--@ 1 xxxx  xxxx  1678  8 22 21:37 /Users/xxxx/Downloads/my-key-pair.pem
	com.apple.macl	  72
	com.apple.metadata:kMDItemWhereFroms	  93
```

消すことができたので、残り2つも削除します。

## 拡張属性をまとめて削除する。
xattr コマンドの-cオプションを使うことでまとめて拡張属性を削除します。
使用例: `xattr -c ファイル名`

```
$ xattr -c my-key-pair.pem
$ xattr my-key-pair.pem
com.apple.macl
```

`com.apple.macl` という属性が残ってしまいました。
調べてみると、**DesktopやDownloadの配下にあるファイルの属性は削除できないようです。**
参考リンク：[Persistent File Access via com.apple.macl Xattr](https://mjtsai.com/blog/2019/12/18/persistent-file-access-via-com-apple-macl-xattr/)

ファイルを他のディレクトリにファイルを移してから再度、実行します。

```
$ xattr -c ~/xxxx/my-key-pair.pem
$ xattr ~/xxxx/my-key-pair.pem

# パーミッションの@も確認する。
$ ls -l ~/work/my-key-pair.pem
-rw-r--r--  1 xxxx  xxxx  1678  8 22 21:37 /Users/xxxx/xxxx/my-key-pair.pem
```
@を取り除くことができました！:thumbsup:
Laravel 英語のエラー表示を日本語にする


:::note info
英語のエラー表記設定 app/resources/lang/en を
まるっと日本語表記にしたい。 
:::

1 . ホームディレクトリからララベルディレクトリに移動。
2 . コマンドで取得。

```ruby:コマンド
php -r "copy('https://readouble.com/laravel/6.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
```

```ruby:コマンド
php -f install-ja-lang.php
```

```ruby:コマンド
php -r "unlink('install-ja-lang.php');"
```
3 . app/resources/lang/jaが出来上がってる。


https://readouble.com/laravel/6.x/ja/validation-php.html
【Rails heroku papertrail】良い感じに不要なログをフィルターして欲しいエラーログだけ抽出する

## 前提
papertrailは、herokuの無料でも使えるアドオンで、エラーログの監視をすることができます。
使い方は以下のようなサイトを見ていただければわかると思います
https://hub.appirio.jp/tech-blog/heroku-tips-3  
http://vdeep.net/heroku-papertrail


## 状況
herokuをホスティングサーバーとして利用し、Rails製のアプリを運用しています。
そこで、エラーログを監視してもしどこかでエラーがあればSlackなどに通知したくて、papertrailを採用しました。
そこで、採用したは良いものの、無料枠だと、2021年8月17日現在では、ログデータが10MBまでしか収集できませんでした。

そこで、今回不要なログ、つまり正常にアプリが動いている時のログはフィルターをかけたいと思いました。
この記事ではどのキーワードでフィルターをかければいい感じにログを取れるかについて記述します。
とりあえず以下のようにすれば、無料枠だけで毎日エラーログを収集できます🎉

## フィルターをかけるキーワード
例：
![スクリーンショット 2021-08-24 17.18.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/f5964937-c296-08af-68f0-ee25fd7157a4.png)

#### INFO
一般的な情報
#### DEBUG
低レベルの情報
#### at=info
一般的な情報

## 抽出したいキーワード
papertrailでは、ログの中から自分たちが見つけたいログのキーワードを指定して、該当のログをSlackなどに送信できます。
例：
![スクリーンショット 2021-08-24 17.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/05296ca0-04d2-084b-78b6-a7ce07246b4f.png)


```
"error code=H" OR "Error R" OR "Error L" OR "FATAL" OR "at=error" OR "at=warning"
```
ではどのようなキーワードを見つければ良いかについて記述します。
（追加の必要があるものはぜひコメントお願いします🙇‍♂️）

#### error code=H
heroku エラーコード
#### Error R
heroku エラーコード
#### Error L
heroku エラーコード
#### FATAL
プログラムをクラッシュさせるようなエラー
#### at=error
制御可能なエラー
#### at=warning 
警告

## 文献
[Heroku のエラーコード](https://devcenter.heroku.com/ja/articles/error-codes)
[Ruby 3.0.0 リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/library/logger.html)

修正や追記すべきものがあればどしどし教えてください😓
[Github](https://github.com/kazuhitonakayama)
【WPF】【Server Starter】GUIプログラミング開始！！…の前に準備

本記事はMinecraft JEのサーバー管理システムであるServer Starterの連載記事として執筆しています。
一部ShareWorldなど特殊な単語を用いていますが、興味のある方は[こちら](https://qiita.com/CivilTT/items/a59d9be7cea50d60a666)も見て頂けると嬉しいです。

このページでは筆者がGUI作成時に最低限意識していた項目をまとめてみました。
筆者も初心者のため、あくまで参考程度に見て行っていただけると嬉しいです。

# 早速プログラミングを始めると思いきや…
「これを作りたい！」と思い、いきなりソースコードを全部書き上げたなら、あなたは天才です。

GUIに限らず、ある程度規模の大きなシステムを構築しようとすると、たいてい、いきなり書き始めてもどこかで目標を見失ってしまい、作成を続けることが難しくなってしまいます。また、冗長な構築になってしまったり、構築漏れが出てしまったりとミスの原因になることも多々あります。

そのため、作成を始める際には、いろいろと事前の準備をしていくことが大切になると思っています。
業務などで行う場合を除き、趣味程度の構築ではこのくらい準備すればよいのでは？という項目を紹介していきたいと思います。

# どんな機能が欲しい？（要件定義）
さて、あなたが作りたいと思ったソフトはどんな機能を有している必要があるのでしょうか。
筆者が作成した[Server Starter](https://qiita.com/CivilTT/items/a59d9be7cea50d60a666)では主に以下の点に的を絞ることにしました。

### 機能要件（最低限確実に入っていないと成立しない機能のこと）
- ワンクリックでサーバーを起動できる
- 起動バージョンの追加がMinecraft launcherを通さずとも可能
- 起動するワールドを選択・追加できる


### 非機能要件（付属的な機能、ユーザーがより良くソフトを使うことができる機能）
- [ShareWorld](https://qiita.com/CivilTT/items/a59d9be7cea50d60a666#shareworld)（リモートサーバー同期システム）の導入
- `server.properties`を編集できる（よく編集する項目はハイライトされている）
- 不要になったバージョン・ワールドの削除ができる
- ワールドを再生成できる
- サーバー起動時にサーバーを立てている人にはop権限を与える
- Spigotサーバーが導入できる
- Datapack・配布ワールド・Pluginが導入できる
- サーバーが終了するとPCもシャットダウンさせることができる
- Minecraftのクライアントが存在しなくとも稼働することができる

<r>
おそらく、最初の草案で考えている内容は上記の「機能要件」にあたる部分が大半になっていると思います。しかし、ユーザーに楽に扱ってもらう・喜んでもらうためにはこれだけでは不十分です。

「非機能要件」にあるような付属的な機能を充実させることによってユーザーフレンドリーなシステムを構築することができ、ユーザーに喜ばれるようなものに仕上げることができます。
また、ユーザーに喜ばれるだけではなく、単純に個人で開発している際にボリュームのあるものに仕上がるため、達成感を得られると思います。

# 開発の見通しを立てる（設計）
これで搭載する機能も確定したため、コーディングに入りたくなりますが、もうひと作業残っています。
搭載する機能は決まりましたが、これはあくまで実際にコーディングをする上では抽象的なものです。この抽象的なものを具体的なものにしていく作業をする必要があります。

## 初心者的にはフローチャートがおすすめ
最低限考えておいてよかったと思うことの一つに<b>処理フローの決定</b>があります。
どんな処理をどこで行っておき、条件分岐によって分岐した処理はどこで本流と合流するのか、などを考えておくことで、開発の見通しが立ち、無駄な分岐やメソッドの開発をしなくて済むようになります。

これを整理する簡単なツールとしてフローチャートを筆者は使いました。ここで意識していたのは<b>わかりやすければ何でもよい</b>ことです。
一例として筆者がかつて作成したフローチャートの一部を貼り付けていますが、このフローチャートは２，３正式な書き方からすると間違っている箇所があります。しかし、自身の思考を整理するためのいわゆるメモ程度のもののため、人に見せるものでもないところは手を抜いても良いのではないかと個人的には感じています。

個人開発の利点であるスピード感を損なわないように、必要以上に本流と関係ないところで時間をとる必要はないと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1796208/a24b47c8-15cd-f112-0174-a07c9b672e8a.png)


## どんな画面構成にするか
これはGUI制作に限った話ですが、システムの処理内容が決まったとしても、実際にどんな画面でユーザーに操作してもらうかを考えなければなりません。
情報量を落としつつも、実装するすべての機能にアクセス可能な画面にする必要性があります。
Server Starterのメイン画面は現行版(v1.0.0)では以下のようになっています。
特に、主要機能であるサーバーのバージョン・ワールド選択を前面に出し、その他の細かい設定は別の画面で行うように作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1796208/c419b751-3bb1-b8a5-8e6a-d27e91be0733.png)

# まとめ
今回の記事でまとめたことはあくまで、一例であり、絶対的なものではありません。しかし、初めて中規模・大規模なシステムをはじめて作る方のリード文程度の立ち位置の記事になることを目指して執筆しました。

業務とは違う自由な開発が可能な個人開発を楽しみましょう！