OmniAICreator/Qiita-1.07M huggingface dataset:
【Flutter】パスワードの表示・非表示の実装方法

## Flutterでパスワードの表示・非表示を実装する

初投稿です。最近趣味でFlutterを始めました。
プログラミング未経験なので、アウトプットも兼ねてQiitaを書いていこうと思います。
（挫折しないように頑張ろう）
### 内容
今日はパスワード入力フォームでよく見るパスワードの表示・非表示をFlutterで作ってみました。
こんな感じです。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1976926/9ac80a29-e23b-1dba-c3d3-f61d41a0e116.gif)

### コード全体
```dart:main.dart
class _MyHomePageState extends State<MyHomePage> {
  bool isDisplay = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('パスワードの表示/非表示'),
      ),
      body: Center(
          child: TextFormField(
        obscureText: isDisplay,
        decoration: InputDecoration(
          suffixIcon: isDisplay != true
              ? IconButton(
                  icon: Icon(Icons.visibility),
                  onPressed: () {
                    setState(() {
                      isDisplay = !isDisplay;
                    });
                  },
                )
              : IconButton(
                  icon: Icon(Icons.visibility_off),
                  onPressed: () {
                    setState(() {
                      isDisplay = !isDisplay;
                    });
                  },
                ),
        ),
      )),
    );
  }
}
```

今回はstatefulwidgetで状態管理を行っているので、setStateで状態を更新します。
まず、`TextField`を表示し、非表示化しておきます。

```dart:main.dart
    return Scaffold(
      appBar: AppBar(
        title: Text('パスワードの表示/非表示'),
      ),
      body: Center(
          child: TextField(
        obscureText: true,
      )),
    );
```

`obscureText: true`でTextFieldを非表示にできます。
次に論理型を宣言しておきます。今回は`isDisplay`とします。

```
bool isDisplay = true;
```
宣言したら`obscureText`に格納

```
obscureText: isDisplay;
```
次に`TextField`にアイコンを表示するのですが、ボタンを押したときに状態を更新したので`IconButton`を記述

```dart:main.dart
      body: Center(
          child: TextField(
        obscureText: isDisplay,
        decoration: InputDecoration(
          suffixIcon: isDisplay != true
              ? IconButton(
                  icon: Icon(Icons.visibility),
                  onPressed: () {
                    setState(() {},
                )
              : IconButton(
                  icon: Icon(Icons.visibility_off),
                  onPressed: () {},
                ),
        ),
      )),
    );
```

三項演算子をを用いて`isDisplay`が`false`の場合には目が開いているアイコン。`isDisplay`が`true`の場合には目が閉じているアイコンを表示するように記述。
（widget内で条件分岐させるときは三項演算子か即時関数で記述する必要があるらしい）

最後に`setState`でボタンを押したときの状態を変更します。

```dart:main.dart
                  onPressed: () {
                    setState(() {
                      isDisplay = !isDisplay;
                    });
                  },
```


以上です。

そんなん簡単だわ！！って感じですが、自分にとってはかなり良い勉強になりました。
これからアプリ開発を通してFlutterの勉強を頑張っていきます。
1000万レコードのバルクupdateが遅すぎ


検証dbを作成する際のデータマスキングで、
1000万レコードに対して一括UPDATEを行うことがあったが、1時間ほどかかった。
以下の①,②を考える。

①なぜここまで遅くなるのか
②どうすれば早くなるのか

実行したSQL

```sql
update users 
set name = 'ダミー'
```



## 調査

以下の記事にUPDATE文を実行すると起きることがわかりやすくまとめられていた。

https://xtech.nikkei.com/it/article/COLUMN/20071129/288386/

引用
>RDBMSはSQL文1を受け取ると，SELECT文を受け取った時と同じように構文解析を行います。そして，UPDATE文であることを理解します。続いて，UPDATE対象のレコードを探します。このレコードを探す方法は，SELECT文と同じです。まず，「メモリー・バッファ」内に対象のレコードが存在していないかを確認し，存在していない場合は，ディスク上の「データベース・ファイル」から読み込みます。そして，メモリー・バッファ内に読み込んだ対象のレコードの値を指定された値に更新します。

つまり、updateの時
メモリにはupdate対象のレコードが展開され、さらにその更新後の値も保持する。

①
上記のようなことが、1000万レコードに対して実行された際簡単にメモリが溢れて、
スワップが起きてしまい遅くなってしまっていたよう。


②
①の原因を考えると、単純に一回にメモリに乗せる量を減らせばいいと推測できる。
以下の様に10回のupdateに分けた。
実行時間は、
一回あたり40秒 * 10　= 6分40秒 
だいぶ早くなった。
ストアドプロシージャなどを使ってもう少し実行しやすい形にしたい。。

```sql
update users 
set name = 'ダミー'
where between 1 AND 1000000;
update users 
set name = 'ダミー'
where between 1000001 AND 2000000;
           ・
           ・
           ・
update users 
set name = 'ダミー'
where between 9000001 AND 10000000;
````
【Rails】投稿者のみに削除ボタン表示（メモ）

#環境
* Rails: 6.1.3
* ruby: 3.0.0
* mac: OS

# 前提
* 投稿機能、ログイン機能実装済み

#方法
#### ビューに記述
削除ボタン設置前に、投稿者本人か確認するため、`if logged_in? && current_user.id == post.user_id`を記述。
今ログインしているユーザーidと投稿idが一致した場合にのみ削除ボタンが表示されます。


```erb:app/views/posts/index/html.erb
 <% if logged_in? && current_user.id == post.user_id %>
    <%= link_to '削除', post_path(post.id),method: :delete, data: { confirm: '本当にいいですか?' } %>
 <% end %>
```
こちらの場合も同様の手順で投稿者のみに削除ボタンが表示されます。

```erb:app/views/comments/_comment.html.erb
 <% if logged_in? && current_user.id == comment.user_id %>           
   <%= link_to '削除', [comment.post, comment],method: :delete,data: { confirm: "本当に削除してもよろしいですか？" } %>
 <% end %>
```

以上になります。
上手なクラス分けをするために頑張ることをまとめてみた。


先月8月から受託系IT企業で働き始めました。
一旦は社内業務ということで、開発言語C#にて勉強を進めているのですが早速クラスという壁にぶち当たりました。

# まずクラスとは？
[++C++;](https://ufcpp.net/study/csharp/oo_class.html)というサイトによると、
> 操作の対象となるものをオブジェクトといいます。 オブジェクトを作る場合、まず設計図が必要になります。 内部がどういう構造になっているのか、外部からどのような操作をすることが出来るのかを決めてやるわけです。 このようなオブジェクトの設計図のことをクラス(class)といいます。 

とのこと。
私なりの解釈として、「ロールキャベツを作る」という目的（オブジェクト）に対して「食材を用意する」「切る」「煮る」というように役割（クラス）を分けてあげるようなものかな、という答えに行きつきました。

確かに分けたほうが分かりやすい。私個人だけではなく、色んな人と共有しながらでも使いやすい。また、仕様変更になった場合も少ない作業量での変更対応がしやすい。
とりあえず様々なメリットがあることが分かりました。

# どういう基準でクラス分けをするのだろう
それでは実装してみようということなり、VisualStudioを立ち上げてみましたがすぐに疑問が出てきました。

1つのクラスに対してどこまで機能を持たせたらいいのだろう、、、

調べてみても私の中で分かりやすい説明を見つけられず、会社の方にも聞いてみたのですが、難しい話らしくこれといった明確な答えは出なかったように思えます。

私の中でイメージしやすいなと思ったのは、「これは◯○という役割を持ったクラスです」と簡潔に説明できるようにする、ということ。
上記のロールキャベツの例でいくと、「食材を用意するクラスでは、ロールキャベツに必要な食材を全てまとめて並べます。」「切るクラスでは、大きい食材から順番に同じ大きさに切ります。」というようなイメージかなと思いました。

# これから意識すること
なんとなくイメージはできたので、実際にシステムやアプリケーションを作る際に上手なクラス分けをするために以下のようなことを意識、挑戦してみます。

・とにかくコードを書く。
汚いコードでも、クラス分けが違っていても、自分の考えや実現させたいことをコードで表せるようにする。

たくさんコードを書く中で、上手くクラスを分けられることもあれば、分けられていない時も出てくるので次書く時に何をどう改善したらいいかを学習する。


・コードを書く際に本を読みつつ理解を深めながら書いてみる。
がむしゃらにコードを書くのもどうかな、と思うし早くコードを書くのに慣れたいのでインプットもしつつ。

今のところはC#で住所録を作ろうかなと考えているのですが、他に何か良さそうな課題が思いつけば着手していこうと思います。


私の理解が甘かったり認識が違うかもしれないですが、とりあえずの現状整理と目標をまとめてみました:blush:
【PHP】Class名を変数に入れてインスタンス化or静的に呼び出す

## 概要
変数にClass名を入れて、別クラスでインスタンス化 or 静的に呼び出したい

- 共通で使用するクラス
- 適当なクラス
- 基底クラス(今回は登場しません)
- バリデーションクラス(今回は登場しませんが、staticなvalidate()という関数を持っています。)
の4つが前提として存在します。


## 詰まった時のコード
```php
適当なクラス extends 共通クラス{
// 省略
    // リポジトリのクラス名を返す
    protected function getValidationClassName(): string
    {
        return 'TestClassName';
    }
// 省略
}
```

```php
共通クラス extends 基底クラス{
// 省略
    $validate_class_name = $this->getValidationClassName();
    $error_validate = $validate_class_name::validate();
    var_dump($error_validate);
// 実行結果////////////////
--> $error_validateを表示しようとするとエラーになる
}
```
どうやら、`$validate_class_name::validate($row_data);`の部分でエラーが出ているようです。
ベタ書きで、
`$error_validate = TestClassName::validate($row_data);`

としたところうまくいきましたが、何が原因なのかわかりませんでした。

クラス名を変数に入れると動かないのか？
[PHP: クラスの基礎 - Manual](http://php.net/manual/ja/language.oop5.basic.php#language.oop5.basic.new)
を見る限りだと、そういうわけでもなさそうです。

## 解決したコード

```php
適当なクラス extends 共通クラス{
// 省略
    protected function getValidationClassName(): string
    {
        return TestClassName::class;
    }
// 省略
}
```

```php
共通クラス extends 基底クラス{
    // 省略
    $validate_class_name = $this->getValidationClassName();
    $error_validate = $validate_class_name::validate($row_data);
    var_dump($error_validate);
// 実行結果////////////////
--> 正常に$error_validateが表示される
    // 省略
}
```

原因は、
`return TestClassName::class;`
の部分でした。

`return 'TestClassName'`がダメで、
`return TestClassName::class;`がうまくいく理由は、

**名前空間が解決できていないこと** が根本の原因でした。

公式に書いてありましたね...

[PHP: クラスの基礎 - Manual](https://www.php.net/manual/ja/language.oop5.basic.php#:~:text=%3A%3A-,class,-%C2%B6)

> class キーワードでもクラス名の解決を行うことが出来ます。 クラスの名前が ClassName になっているクラスの完全修飾名を取得するには、 ClassName::class を使います。 これは、名前空間付きのクラスに使うと特に便利です。

同じような詰まり方する人少ないと思いますが、どなたか参考になれば幸いです。
Python3について(->とは,API通信の例外処理,指数関数的なリトライ処理)

#アノテーション

_この関数はこれを返します_　とかの説明用->以降の文字は関数に影響しない

```py
def fetch(url : str) -> requests.Response:
	max_retries = 3
	retries = 0
	while True:
		try:
			print(f'Retrieving {url} ...')
			response = requests.get(url)
			print(f'Status: {response.status_code}')
			if response.status_code not in TEMPORARY_ERROR_CODES:
				return response
	...
```

#API通信の例外処理

この方のページが参考になりました

https://qiita.com/d_kvn/items/5da7f5cdfc8200172a39

#指数関数的なリトライ間隔を求める

この方のページが参考になりました

https://christina04.hatenablog.com/entry/exponential-backoff

イメージは、同じ間隔でスクレイピングを続けてサーバーに負荷がかかりエラーが吐かれた場合、同じ間隔で続けるとずっとエラーを吐かれてしまうので、
リトライ間隔を開けて、サーバーの負荷を軽減している。と理解しました。

純粋に＋１秒ずつでも良いのでは？とも思いましたが…
Unity スクリプトの実行順番をコントロールする方法

##0.0 はじめに
Unityでは異なるスクリプト間でのAwake/Startメッソドの実行順序は原則不規則です。この順番を制御する方法があります。
下記のどちらかで制御が可能です。





##1.0 [DefaultExecutionOrder()]属性をつかう
下のように[DefaultExecutionOrder()]属性をクラス（スクリプト）につけます。()内に数字をいれます。小さな数字から実行されます。0がデフォルトなので先に実行させるためにマイナスの数字をいれると良いでしょう。

```C#:Test.cs
[DefaultExecutionOrder(-5)]
public class Test : MonoBehaviour{
    
}
```








##2.0 Script Execution Orderをつかう
メニューで Edit --> Project Settings（Unity2018.4）を選びます。
『Script Execution Order』を選択します。
ウィンドウでの設定はシンプルで、[+]を押してスクリプトを追加し、スクリプトを実行したい順に並べるだけです。数字が小さなものから（上から順に）実行されます。全てのスクリプトを指定する必要はありません。
[Rails] 条件分岐について

##初めに
####この記事の対象者
・条件分岐に混乱しているヒト、復習がしたいヒト

####環境
・Macbook Air (Retina, 13-inch,2019)
・プロセッサ 1.6GHz デュアルコアIntel Core i5
・メモリ　8GB 2133 Mhz LPDDR3
・MacOS Big Sur　バージョン 11.5.2

####記事の目次
**１）どういうときに使うのか**
**２）例**
**３）最後に**

##どういうときに使うのか
####条件を設定してその条件を満たしていないか、満たしているかで処理を決めたいときにつかう。

```
(遊園地でジェットコースターに乗るときを例にとってイメージしてみよう)
身長が160cmのヒトが遊園地のジェットコースターに乗るとき。このジェットコースターは乗車するのに身長が
155cm以上でないと乗れないです。

(条件分岐のイメージ）
A（身長）：160cm

1)条件：　A<155　　→ 処理：乗車不可
2)条件：　A≧155 →　　処理：乗車できる
```

####条件分岐の方法

**使い方**

```erb
if　条件式1
　　処理 **(条件に満たしたときの処理を書くところ)**
elseif　条件式2
　　処理 **(条件１に当てはまらず、条件2に満たしたときの処理を書くところ)**
else
　 処理 **(上の条件のどれにも当てはまらないときの処理を書くところ)**
end
```

##(例:上の遊園地を例に条件分岐を書いてみよう！)

```erb
friend = {}                        ←名前と身長を保存するために配置
puts "お友達の名前は？"               
friend[:name] = gets.chomp         ←入力した文字を名前として保存する
puts "お友達の身長は？"
friend[:height] = gets.to_i        ←入力した数字を身長として保存する

if friend[:height] >= 155
  puts "#{friend[:name]}さんは乗車できます"
else
  puts "#{friend[:name]}さんは乗車できません！"
end
```
##最後に
・演算子が苦手なので、壁にぶつかったときにうまくここを使ってアウトプットしなきゃなと思った。。
・ここまで読んでくださってありがとうございます！
【C#】文字列を0や空白で埋める

##コード
```C#:文字列の場合
            string str = Console.ReadLine();
            //試しに1と入力

            Console.WriteLine(str.PadLeft(3, '0'));
            //001
            Console.WriteLine("{0,3:d}", str);
            //001

            //空白を挿入する場合
            Console.WriteLine(str.PadLeft(3, ' '));
            //  1
            //入力した文字数を含めた分の空白を入れる。この場合は空白2つ。
```
`String.PadLeft()`は左側から順番に指定した文字数になるまで埋めていく。
`String.PadRight()`はその逆。
<br>
<br>

```C#:数値の場合

            int N = int.Parse(Console.ReadLine());
            //1を入力

            Console.WriteLine(N.ToString("d3"));
            //001
            Console.WriteLine(string.Format("{0:d3}", N));
            //001

            //逆に0詰めをする場合
             Console.WriteLine(string.Format("{0,-3:d}a", N));
            //1  a
            //入力した文字数を含めた分の空白を入れる。この場合は空白2つ。
```
<br>

表示方法1つを取っても、様々な表し方があるのが面白いです。

ふと気になったのですが、
詰めるときのコードで表記している「d」は何の略語なんでしょうか…。

個人的には桁を意味するdigitの頭文字なのかな？と勝手に思っています。
何かを覚えるときは、意味を関連付けたほうが断然覚えやすいです。
Reactで配列をマッピングする際に三項演算子を使う。


今Reactを使ってSPAのアプリを作っているのですがググって見つけた記事が間違っておりのでハマったので新しく忘備録のために記事を書いておこうと思います。

APIでデータを取得して配列になっているオブジェクトを取得してmap関数で逐一オブジェクトをマッピングしたい時、配列が空であればnullで非表示にしたい場合。

これ三項演算子
↓
objects ? objectsがtrueになるときの処理：objectsがfalseになるときの処理
今回の具体的処理は
objects ? objects.map(object)=>(<ここにオブジェクトを一つ一つマッピングたいコンポーネント>):null

となっているサイトがあるのですがobjectsが空配列で[]の時これは条件分岐判定でfalseにならないのでobjects.lengthにして三項演算子に判断させる必要があります。[].lengthであれば三項演算子てfalseと判断してくれます。


ちょっと自分のコードを掲載しておきます。

```react
{gmaps.length
            ? gmaps.map((marker: Gmap ) => (
                <Marker
                  key={marker.id}
                  position={{
                    lat: marker.latitude,
                    lng: marker.longitude,
                  }}
                  onMouseOver={() => {
                    setSelected(marker);
                  }}
                />
              ))
            : null}
```

アプリの詳しい説明は省きますが三項演算子で空配列を評価したい場合はこんな感じです。
gmapsが空配列の場合は表示されるのはnullになってコンポーネントは評価されません。

![スクリーンショット 2021-09-08 22.19.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54774/18b1fcf2-ead8-bd73-f5a8-38453e3dffdd.png)
Mac ポート番号を指定して使用しているプロセスを調べる

#　目的

- ポート番号を指定して使用しているプロセスを調べる方法をまとめる

# 方法

- ターミナルにて下記コマンドを実行する。

    ```terminal
    $ sudo lsof -i:ポート番号
    ```
php artisan make:authにて作成したビューがリダイレクトしてしまう。

### 経緯
僕が作ったアプリでは、管理者のみがユーザー登録できるように、ログイン
した人間のみが、画面遷移できるよう"カスタマイズ"したかった。

### 解決方法

新しく自分でコントローラーを作ってください！！

php artisan make:authを実行すると

下記のようなコントローラーが作成される。↓（これはほんの一部）

ConfirmPasswordController
ForgotPasswordController.php
LoginController.php

さらに下記のようなビューもが作成される。↓（これもほんの一部）

register.blade.php
login.blade.php

####　やりたかったこと
通常は、ログイン画面から、register.blade.phpに遷移するが。
ログイン→メイン画面→ボタン遷移でregister.blade.phpに繋げたかった。

####　やらかしたこと。。。

上記にあるLoginController.phpなど、php artisan make:auth
を使って、遷移させようとしたら、、

→何やってもリダイレクトしてしまう。

なので、新しく自分で画面遷移専用のコントローラーを作成すること。


##### 関連ワード
auth
リダイレクト
ビュー
【WordPress】All-in-One WP Migrationでインポートが100%で止まるときの対処法(nginxの場合)

wordpressのプラグインAll-in-One WP Migrationを使ってサイトを移行する際に、移行先でインポートが100%で止まってしまう現象が発生したときの内容とその解決法をご紹介します。
なお、この記事の内容はnginx限定となっていますのでご了承ください。

## 環境
nginx 1.12.2
WordPress 4.9.18
All-in-One WP Migration 7.45
All-in-One WP Migration Multisite Extension 4.13(エクスポート側のみ)

## 現象
この現象はAll-in-One WP Migrationを使ってサイト間のデータ移行を行う場合において、移行先でデータをインポートするときによく起こる現象のようです。
自分はマルチサイト用の拡張版を使ってマルチサイトから通常サイトへデータを移行したときに発生しました。
この時は画像やプラグインは除外していたのでデータそのものは約19MBでした。
再現手順は以下の通りです。

まず元サイトからAll-in-One WP Migration Multisite Extensionでデータをエクスポートします。(自分はマルチサイト用の拡張版を使いました。)
次に新しく作成したサイトでAll-in-One WP Migrationをインストールし、エクスポートした元サイトのデータをインポートします。
すると画像のようにインポート率が100%で止まったまま動かなくなりました。

![スクリーンショット 2021-08-31 201214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261074/7958eee5-718d-acdb-b7b3-846068581815.png)

## 解決法
まず[How to Increase Maximum Upload File Size in WordPress](https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/)に書かれている方法を試してみましたが、上手くいきませんでした。
その後色々な情報を探していたところ、プラグインのサポートフォーラムの投稿([Uploading a file stuck at 100% – what to do](https://wordpress.org/support/topic/uploading-a-file-stuck-at-100-what-to-do/))に書かれていた、以下の一文が目に留まりました。


>3\. If you wait for a while and the process does not move past the 100% mark, open developer tool and see if you have any JavaScript errors in the console.

「しばらく待ってもプロセスが100%を超えなかったら、デベロッパーツールのconsoleでJavaScriptエラーを確認せよ」ということなので、この通りにブラウザのconsoleを確認すると以下のエラーメッセージが出ていました。

```
Failed to load resource: the server responded with a status of 413 (Request Entity Too Large)
```

このメッセージを検索すると[こちら記事](https://qiita.com/takecian/items/639deeae094466de6546)がヒットしましたので、内容を参考にしてnginx.confのserverディレクティブに以下の行を追加しました。

```
client_max_body_size 1024M;
```

このコードでは1024MBまでのデータをアップロードできるようになります。
「1024M」の部分はインポートするデータに合わせて調整してください。

nginxをリロードして再度インポートを試みると、無事にインポートできました。

## 参考
・Nginx での 413 Request Entity Too Large エラーの対処法
https://qiita.com/takecian/items/639deeae094466de6546

・Uploading a file stuck at 100% – what to do(サポートフォーラムへの開発者の投稿)
https://wordpress.org/support/topic/uploading-a-file-stuck-at-100-what-to-do/

・How to Increase Maximum Upload File Size in WordPress
https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/
【備忘録】パーミッションとは？

#はじめに#
　ITの勉強をしていると、知らない単語が次から次へと出てきます。今回はそのうちの一つ、パーミッションについて勉強してきましたのでそれについてまとめていきたいと思います。

　それでは初めていきます！
 
#パーミッションとは#
　パーミッションとは、ファイルやディレクトリに対するアクセス権のことです。ファイル単位で与えられており、主に3つの権限に分けられます。

①read(読み込み)
②write(書き込み)
③execute（実行する）

この3つになります。順番に見ていきましょう。


####read####
　なんとなく分かると思いますが、ファイルの中身を見るために必要な権限がreadになります。これが設定されていると読み込み可能、されていないと不可ということになります。

####write####
　こちらもなんとなく分かるかと思いますが、writeはファイルの中身を書き換えるのに必要な権限になります。変更だけでなく、削除や保存（これらも厳密には変更と呼べますが）といった操作を行えるようになります。

####execute####
　executeは実行権限のことを言います。ファイルを実行するのに必要な権限のことを言います。スクリプトが書かれたファイルを指定し、プログラムを実行させることが出来ます。


#表記方法#
　これらの権限は下記のように表記されています。
　`-rwxr--r--`
　呪文のようですね。これは実は4つに区切ることが出来ます。区切ってみると下記のようになります。
　`①- | ②rwx | ③r-- | ④r--`
　一つずつ順に見ていくと、①はファイルorディレクトリを表しています。このパーミッションが与えられてるのがファイルであれば-、ディレクトリであればdと表記されます。
　次に②の部分ですが、こちらはファイル・ディレクトリの所有者の権限となります。③は所有者と同じグループに属しているユーザーの権限、④はそれ以外の他人の権限を表しています。
　こういった表記は、「744」といった数字で表されます。権限を2進数で表すとき、許可されているものは1、されていないものは0で表されます。つまり上記のパーミッションは111 100 100と表されます。これを8進数で表したものが「744」といった数字になります。
　逆に言うと、「このファイルの権限は755にしよう」と言われると、**-rwxr-xr-x**となります。とはいえ、いちいち2進数を8進数に直すのは結構大変だと思います。その場合は、読み：書き：実行=4：2：1というふうに覚えましょう。例えばrwxであれば4+2+1で7、r-xであれば4+1で5、という感じで、簡単に導き出すことが出来ます。

#まとめ#
　パーミッションとは、ファイルやディレクトリの、読み・書き・実行という3つの権限を表したものでした。それぞれrwxというアルファベットで表され、ユーザー・グループ・その他の3つに分けて表記されます。また、これらを8進数で表すこともあります。なかなか馴染みのない表現が多く難しいですが、慣れるまで頑張りましょう！
【Flutter】showModalBottomSheetでSafeAreaが効かない時の対処法

# 概要

FlutterでモバイルアプリのUI実装をする際、isScrollControlledをtrueにしたModalBottomSheetが画面上部の網掛け部分にかかってしまう問題の解消法をご紹介いたします。

# 使用するWidget

親Widget（お問い合わせフォーム） - main.dart
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/8d87494b-43d5-b1f5-8790-de7dd8cfa99e.png" width="300">

子Widget（メッセージ送信フォーム）- child.dart
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/2c80ba42-eb95-1258-42a6-23853254a7d6.png" width="300">

画面上部の網掛け部分にViewが被ってしまっていますね・・。
AppBarが無いViewではSafeAreaを使うことで、画面上部に被らないように実装できるはずなのですが・・

```childView.dart

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea( //SafeAreaを使えば画面上部に被るのを防止できるはず・・
        child: Container(...),
      )
    );
  }
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/2c80ba42-eb95-1258-42a6-23853254a7d6.png" width="300">

残念ながら変わりません・・。


# 解決策

```main.dart

// --省略
child: ElevatedButton(
  child: Text("お問い合わせをする"),
  onPressed: () {
    BuildContext mainContext = context; //これを追加
    showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return parentWidget(
        mainContext //子Widgetに渡す
      );
    });
  },
),
```

```childView.dart
Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.only( //
            top: MediaQuery.of(widget.context).padding.top, //親Widgetから渡されたBuildContextをpaddingで指定
          ),
          child: Column(//..省略),
        ),
      ),
    );
  }
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/fec89db0-2d5c-6d38-5905-a6457e0b0116.png" width="300">



無事いい感じに表示されました。

# 問題点
親Widgetがmain.dartじゃない場合、子WidgetにBuildContextを渡してpaddingに指定しても0.0として扱われ、正しく対処できない。

→ main.dartでMediaQueryを使って画面上部のpaddingを取得し、子Widgetまで渡してpaddingで指定すれば良い？

``` main.dart
double height = MediaQuery.of(context).padding.top;
```

端末ごとの画面上部の高さはこのようにして取得できます。
良い感じの解決策は現在調査中です・・。

# 参考

https://github.com/flutter/flutter/issues/39205
【Docker】DockerDesktopをアップデート後、Dockerが動作しなくなる

# 何が起きたのか?
開発で使用しているWindowsPCにインストールしている、DockerDesktopをアップデートしたところ、
DockerEngineが起動しない状態に見舞われた。OSの最起動などを試みても解決しなかったが、
Dockerの設定ファイルを一部削除することで解決出来た。
今後同じ現象になった場合でもすぐ解決出来るようメモとして本記事を残す。

## 発生環境
- OS
    Windows10 Pro(21390.2035)
- DockerDesktop
    v4.0.0(67817)
- DockerEngine
    v20.10.8

## 解決策
`C:\Users\<ユーザ名>\AppData\Roaming\Docker\settting.json`
を削除して、OS再起動解決した。
原因は不明。
JavascriptのDateオブジェクトのタイムゾーンは何を参照しているの？

## 概要
Javascriptでよく使う？Dateのタイムゾーンはどこを参照しているか気になったので調べてみました。

[MDN Web Docs Date](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)に詳細を書いてくれているのですが、、、`地方時 (ホストシステムなど) のタイムゾーン`なんて書き方だから、クライアントPCなの？サーバーなの?か結局確信が持てませんでした。
（注：私の読解力は結構低いですw）

## 結論
クライアントPC(デバイス)のシステム設定を参照しているようです。

## 検証

### 1. 現在時刻をコンソール出力させる
以下のJSでブラウザのコンソールに現在時刻を出力できます。

```js
function showClock() {
  var nowTime = new Date();
  var nowHour = nowTime.getHours();
  var nowMin  = nowTime.getMinutes();
  var nowSec  = nowTime.getSeconds();
  var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。";
  console.log(msg);
}

window.onload = () => {
  showClock();
};
```

`JSが動くなら、サーバーでもローカル環境でもどちらでもOK`


### 2. ブラウザで確認
ブラウザのデベロッパーツールのコンソールを確認します。

```txt
現在時刻は、19:48:58 です。
```

### 3. システム設定にてタイムゾーンの変更
今回はMacで検証します。

Macは、システム環境設定 > 日付と時刻 > 時間帯 にて変更できます。
![スクリーンショット 2021-09-08 19.50.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/118f0ffe-fe66-bf6a-c9f4-dfb1d0479759.png)


変更前(東京)
![スクリーンショット 2021-09-08 19.52.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/6dfc591e-678d-26b8-317c-0988cc7a777e.png)

変更後(アメリカ)
![スクリーンショット 2021-09-08 6.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/87b1ec9e-4b3b-fa94-e774-42e97effda8c.png)

変更後に、PCの時計を確認してみてください。
時計の時刻が変わっていれば変更はうまくできています。

### 4. ブラウザで再確認
ブラウザ側でも時刻が変わっていることが確認できます。

```txt
現在時刻は、6:48:58 です。
```
[Ruby] Atcoder過去問 C - Replacing Integer 

##はじめに
AtCoder過去問のC問題を解いてみました。
よろしくお願いします。

問題はこちらからご確認ください。

https://atcoder.jp/contests/abc161/tasks/abc161_c


##C - Replacing Integer 
まずは入力を受け取ります。

```ruby
n, k = gets.split.map(&:to_i)
```

今回の場合、for文やeach文を使って回すと、nの入力値が大きすぎたときに、かなり負荷がかかってしまうのでできれば使いたくないです。

nからkを何回も引いていく作業は、割り算で作ることができます。
割り算のあまりを算出する```%```を使えば、0を超えないまで（負の数にならないまで）のnからkを引き続けた結果を得られます。

まずはそれをaに代入します。

```ruby
n, k = gets.split.map(&:to_i)

a = n % k
```

次にaが最小の数ではないかもしれません。
なぜなら```n % k```をした後にもう一度kを引いたときに、aよりも絶対値が小さくなる可能性があるからです。

さらにkを引いたものをbに代入しておきましょう。

```ruby
n, k = gets.split.map(&:to_i)

a = n % k
b = a - k
```

あとはaとbの絶対値のどちらが小さいかを調べて、小さい方を出力するようにします。
aが負の数であることはあり得ないのでaは何も加工しなくても絶対値です。

bに関してはabsメソッドを使用して絶対値に変換します。

```ruby
n, k = gets.split.map(&:to_i)

a = n % k
b = a - k
if a <= b.abs
  puts a
else
  puts b.abs
end
```
【CSS】ボックスモデルとは　〜マージンとパディングの違い〜

#　はじめに
CSSを勉強してて、ボックスモデルを説明できるように簡単にまとめてみました。

## コンテントボックスとは
* 実際の横幅と高さ
* 基本はwidthとheight

```html:html
<div class="box">ボックススタイルブロック</div>
```

```css:css
.box {
  /* background-color: green; */
  /* Content Box*/
  width: 200px;
  height: 200px;
}
```

## パディングボックスとは
* コンテントボックスから外側までどのくらい空けるか
* ```padding:上　右　左　下```の順で書く(ショートハンドという)

```html:html
<div class="box">ボックススタイルブロック</div>
```

```css:css
.box {
  background-color: green;

  /* Padding Box */
  padding: 8px 10px 15px 30px;
}
```

## マージンボックスとは

* 他の要素からどのくらい空けるか

```html:html
<div class="box">ボックススタイルブロック</div>
```

```css:css
.box {
  background-color: green;

  /* Margin Box */
  margin: 8px 10px 15px 30px;;
}
```

### マージンの相殺とは
* マージが重なると値が大きいほうが優先される
* 下記のコードの場合margin-topの値が大きいため、```margin-top: 40px;```が適用される

```html:html
 <div class="box">ボックススタイルブロック</div>
 <div class="margin">マージン相殺用の説明のブロック</div>
```
```css:css
.box {
  background-color: green;
  margin-bottom: 20px;
}

.margin {
  background-color: blue;
  margin-top: 40px;
}
```

## ボーダーボックスとは
* ```border: 先の太さ 線の種類 線の色```と書く


```html:html
 <div class="box">ボックススタイルブロック</div>
```

```css:css
.box {
  background-color: green;
  /* Content Box*/
  width: 200px;
  height: 200px;

  /* Border Box */
  border: 5px solid black;
}
```

## Box-Sizing プロパティについて
* ボーダーとパディングの値が加わって、実際の指定した値よりも大きくなることがある。これは、直感的ではないのでBox-Sizing プロパティを使うと良い
* ```Box-Sizingプロパティ```をつかうと```widthとheight```で指定した大きさになる
* [MDNのドキュメント　CSS ボックスモデルの代替](https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model)


```html:html
 <div class="box">ボックススタイルブロック</div>
```

```css:css
.box {
  background-color: green;
  /* Content Box*/
  width: 200px;
  height: 200px;

  /* Padding Box*/
  padding: 8px 10px 15px 30px;

  /* Margin Box */
  margin: 8px 10px 15px 30px;

  box-sizing: border-box;
}
```
GitHub Actionsの`synchronize`とは

# はじめに

- GitHub Enterprise Serverを使っているため、ソースURLはすべてGitHub Enterprise Serverのものとなっています。必要に応じてGitHub.comに切り替えてください。
- 記事の結論は末尾「結論」を参照ください。

# 執筆の動機
GitHubでPRを発行したときにもワークフローが実行されたらなぁと思ったので調べてみました。

「[GitHub公式>アクティビティの種類もしくは設定を伴う複数のイベントを使用する例](https://docs.github.com/ja/enterprise-server@3.1/actions/reference/workflow-syntax-for-github-actions#%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%93%E3%83%86%E3%82%A3%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%82%82%E3%81%97%E3%81%8F%E3%81%AF%E8%A8%AD%E5%AE%9A%E3%82%92%E4%BC%B4%E3%81%86%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E4%BE%8B)」によると、確かにPRを発行したときにワークフローを実行することができるようです。

そこで気になったのは、「PRを発行したソースブランチに対し追加コミットをした場合、その追加コミットをトリガーとしてワークフローを実行できるか」です。


「[GitHub公式>pull_requestに関するアクティビティタイプ](https://docs.github.com/ja/enterprise-server@3.1/actions/reference/events-that-trigger-workflows#page_build)」を参照すると、以下のようなことが書かれています。

```
デフォルトでは、ワークフローが実行されるのはpull_request のアクティビティタイプが opened、synchronize、または reopened の場合だけです。 他のアクティビティタイプについてもワークフローをトリガーするには、types キーワードを使用してください。
```

デフォルトでは、`opened` `synchronize` `reopened`の場合はワークフローが実行されるとのことですが、それらが何を意味するのか知っておく必要があります。

基本的には用語の意味でなんとなくわかりますが、やはりソースを見ておきたいところです。
なかなか見つからなかったのですがようやく見つけたので共有します。


「[GitHub公式>Type](https://docs.github.com/ja/enterprise-server@3.1/developers/webhooks-and-events/webhooks/webhook-events-and-payloads)」にて以下の記述がありました。

```
synchronize: Pull Requestが追跡しているブランチがPull Requestのソースブランチと同期されたときにトリガーされます。これは、ソースブランチが更新されたときに生じます。
```

ちなみに、`opened` `reopened`について詳しい説明は見つかりませんでしたが、`opened`はPRをオープンしたとき、`reopened`はPRを(いったんクローズしてから)再度オープンしたときのことだと思われます。

# 結論

つまり、`pull_request`イベントを用いると、デフォルト設定では、以下の時にワークフローが実行されます。

- PRを発行したとき
- 発行したPRのソースブランチに対するプッシュをしたとき
- いったんクローズされたPRが再度オープンされたとき

また、以下もわかりました。

- `synchronize`は、「Pull Requestが追跡しているブランチがPull Requestのソースブランチと同期されたとき」を表す
【Blender2.9】配列＋カーブで歪まない方法

# 配列＋カーブで歪まない方法

カーブにオブジェクトを沿わせる時に歪んでしまう、、、
![スクリーンショット 2021-09-08 17.44.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576001/e7271e78-9270-5952-9215-1d3b5fd5deef.png)
# 平面の子供としてオブジェクトを配置すればいい

絶対に歪みは出てきてしまうので、平面を沿わせて、その中心に「Keep Transform」の状態でオブジェクトを配置すればいい。
こちらのYoutubeが非常に参考になりました。
[カーブでも歪まない！配列を使った鎖の作り方！【blender2.9】](https://www.youtube.com/watch?v=bhgVeBvkzFU)

## 平面を配列でカーブに沿わせる

ModifierのArray & Curveを使って平面をハートにそわせます。
歪んでいるのがわかります。
![スクリーンショット 2021-09-08 19.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576001/c4dc42ac-c60b-b4e2-7918-7085e33bec02.png)
球（子供）→平面（親）の順に選択して、cntl+P(Keep Transform)で親子付けします。　
この時、Object Property/Instancingの設定を画像のように設定すると、平面の中心にオブジェクトが配置されます。
![スクリーンショット 2021-09-08 19.21.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576001/04fcfc68-84d4-6fa8-2107-f19f19f8c23e.png)
![untitled6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576001/21272f6d-606e-885f-922a-48ee43cb1052.png)
平面が見えないようにInstancingの設定のチェックを以下のように外しておきます。
![スクリーンショット 2021-09-08 19.26.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576001/85f3bd31-af55-0504-f356-6d21b001849d.png)

# 完成！！！
やったー！
![untitled8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576001/ac4dbb33-a9a4-035e-1cd1-196c9a84f1e2.png)
【JavaScript】JSONとStorage


JavaScript関連で`JSON`と`Storage`の基本についてのまとめています。

こいつらを使いこなせるとアプリ開発などの幅が広がることは間違いないです！

#JSON

jsonはデータ交換フォーマットです。
**異なる言語間でもデータをやりとりできるのがjsonです。**

JavaScript→Rails→JavaScriptなどのようにデータを送るときにはjsonを使います。


JSONは{}の中にキーと値をコロンで区切って記述します。キーは必ずダブルクォーテーションで囲む必要があります。(シングルクォーテーションだとエラーになる）

```json
{ "a": 0, "b": 1, "c": 2}
```

JavaScriptでは、オブジェクトをJSON形式に変換したりその逆を行ったりすることが簡単にできます。

これには`stringify`と`parse`を使います。

```js
const obj = {a: 0, b: 1, c: 2};

const json = JSON.stringify(obj);
console.log(json);
//{"a":0, "b":1,"c":2} ←json

const obj2 = JSON.parse(json);
console.log(obj2);
//{a: 0, b: 1, c: 2} ←object
```
`JSON.stringify(obj)`という記述でjson形式に変換しています。

ちなみにjsonに変換するときに特定のプロパティだけを指定することもできます。

```js
const obj = {a: 0, b: 1, c: 2};

const json = JSON.stringify(obj, ["a", "c"])
//{"a":0,"c":2}
```

`JSON.stringify(abj, ["a", "c"])`としています。
これで指定したプロパティのみをjson形式にすることができます。


#Storage

Storageは、ブラウザの特定領域にデータを格納するためのオブジェクトです。

JavaScriptでは、実際には`localStorage`を使ってブラウザにデータを格納することができます。

```js
localStorage.setItem('key', 1);

const storageData = localStorage.getItem('key');
console.log(storageData);
//1
```

`localStorage.setItem('key', 1);`という記述でブラウザにデータを格納できています。

検証ツールの`Application`の`Local Storage`で確認できます。

![スクリーンショット 2021-09-08 18.50.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303613/cd718ebc-6af9-00f2-7ade-e5715bb0adcd.png)


この値を取得したいときは、`localStorage.getItem('key')`のようにしてあげれば取得できます。

もちろんjson形式でデータを格納することもできます。

```js
const obj = {a: 0, b: 1};
const json = JSON.stringify(obj);
localStorage.setItem('key', json);

const storageData = localStorage.getItem('key');
console.log(storageData);
//{"a":0,"b":1}
```

#まとめ

JSONとStorageについて見てきました。
かなり実践的に活躍してくれる奴らだと思います。

手を動かしていじってみてください。

今回は以上です！
Solana validator のための nginx 設定メモ

グローバル IP 無いんで VPS で nginx でプロキシ建てます.

Solana validator では, UDP ポートで同時接続 30000 くらいが要求されます.

まず, UDP の forward(proxy) を複数ポートでできるようにします.

https://qiita.com/syoyo/items/f91b92e3cd1457821e0b

ありがとうございます, 自分.


その後, max_connection あたりを増やします.
そうしないと nginx に莫大なサイズの error log が生成されてしまいますので注意です!(logrotate しない場合)


https://qiita.com/mikene_koko/items/85fbe6a342f89bf53e89

ありがとうございます. nginx とは別に, VPS のサーバで `/etc/security/limits.conf` あたりで nofile 増やしておく必要あります.

最終的に設定ファイルは以下のようになりました!

```
# nginx.conf
worker_processes  4; // 必要に応じて調整して.
pid logs/nginx.pid;

events {
  worker_connections  30000;
}

http {
  include mime.types;
  default_type  application/octet-stream;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  logs/access.log  main;
  sendfile  on;
  keepalive_timeout 65;

  include /home/syoyo/local/nginx/conf.d/*.http.conf;
}

stream {
  include /home/syoyo/local/nginx/conf.d/*.stream.conf;
}
```

```
# proxy.stream.conf
# 10.8.0.2 : validator の IP アドレス
server {
    listen       8089-8099;
    proxy_pass   10.8.0.2:$server_port;
}

 
server {
    listen       8089-8099 udp;
    proxy_pass   10.8.0.2:$server_port;
}

server {
    listen       8001-8011 udp;
    proxy_pass   10.8.0.2:$server_port;
}

server {
    listen       8001-8011;
    proxy_pass   10.8.0.2:$server_port;
}
```


## TODO

* [ ] udp 処理のさらなる効率化パラメータがあるか調べる
インターネットゲートウェイと仮想プライベートゲートウェイの違い

## 勉強前イメージ

なんだっけ・・・ぱっと違いが出てこない

## 調査

### インターネットゲートウェイとは

インターネットゲートウェイはインターネットと接続するもので、
ネットワーク内はインターネットゲートウェイを通じてインターネットとやり取りを行います。
VPC内とインターネットを通信する際は以下を行います。

- VPCにインターネットゲートウェイとアタッチする
- ルートテーブルでデフォルトルートにインターネットゲートウェイの設定を追加

### 仮想プライベートゲートウェイとは

`Virtual Private Gateway` とも言い、
VPN接続の際にVPC側に配置するもの
複数のカスタマーゲートウェイ(ユーザ側に配置されるVPN装置)を受け付けることが出来る。

### 違い

- インターネットゲートウェイ → VPC内とインターネットの接続の際に使用
- 仮想プライベートゲートウェイ → VPN接続の際にVPC側に接続するもの

## 勉強後イメージ

全然違うやん！！！
特に仮想プライベートゲートウェイ忘れがち

## 参考

- [4. インターネットゲートウェイとルートテーブルでパブリックサブネットをインターネットにつなげる](https://100webdesign.jp/services/web_knowhow/aws-site/web_knowhow-21172/)
【ポケモン剣盾・マイコン】Arduinoを使用して卵孵化を自動化

#まえがき
この記事はAruinoLeonardを使用して北米版剣で卵孵化の自動化を実行したところうまく動作しなかったため、そのための覚え書きです。

参考サイト

https://pokemonit.com/micon-introduction/

###起こった問題

https://pokemonit.com/swsh-auto-hatch-eggs/

こちらのサイトのコードを実行したところ下の動画のようにタウンマップを開くだけで止まってしまった。

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729518/bf01fde6-ea04-f6f4-a931-758e6309c7c9.gif)

###解決法
上から順番に動作確認したところ、空飛ぶタクシーでハシノマはらっぱに移動する関数moveToInitialPlayerPosition() のpushButton(Button::A, 450, 2);がうまく実行されていなかった。

```hatch-eggs-in-the-box.ino
// 空飛ぶタクシーでハシノマはらっぱに移動する関数
void moveToInitialPlayerPosition() {
    pushButton(Button::A, 2000);
    pushButton(Button::A, 450, 2);//ここがうまく実行されていない
    delay(2200);  // 天候によって読み込み時間がやや異なる(最も重かった砂嵐でも1900で安定していたが、柱の本数や服装などの環境による差異がある可能性も考慮して少し余裕を持たせた)
}
```

おそらく北米版のためロトムの文字表示が日本語より多く、待機時間が足りなかったのではないかと予想した。

```hatch-eggs-in-the-box.ino
// 空飛ぶタクシーでハシノマはらっぱに移動する関数
void moveToInitialPlayerPosition() {
  pushButton(Button::A, 2000);
  pushButton(Button::A, 1000);
  pushButton(Button::A, 2200);
}
```
待機時間を増やしたらうまく動作した。
![Videotogif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729518/f2834fa0-9e50-fe47-0999-e80dfc358684.gif)

#まとめ
北米版剣はテキストの量が日本語と違うため、待機時間が変わる場合がある。
【AWS】RDSとEC2を紐づける方法

# はじめに
今回はRDSとEC2を紐づける方法について記述します。
本来であればEC2やRDSの作成の際に紐付けお行うのですが、
その工程を飛ばしてしまい、後から紐づける方法について記述いたします。
今回は自分自身のセキュリティの都合上、スクショはなく文字のみでご案内させていただきます。

AWSやEC2、RDSについては下記の記事でまとめているので詳しく知りたい方は、
ぜひ参照してください

https://qiita.com/kenta-nishimoto-1111/items/4760bc02a6dfa40db035

https://qiita.com/kenta-nishimoto-1111/items/4760bc02a6dfa40db035

https://qiita.com/kenta-nishimoto-1111/items/546990b12d4485a1b843

# EC2とRDSの紐付け方法
<h4>●EC2のセキュリティグループをコピーする</h4>
AWSのEC2を開き、紐付けたいインスタンスを選択します。
そしてメニューの中の「セキュリティ」を選択すると、セキュリティグループが表示されます。
こちらのコピーをしてください。

<h4>●RDSで接続を許可する</h4>
①RDSの左のメニューか「データベース」を選択
②紐付けたいデータベースを選択し、真ん中のメニュー「接続とセキュリティ」を選択
③右端の「VPC セキュリティグループ」を選択し、画面が切り替わると「インバウンドルール」を押す
④「Edit inbound rules」が右端にあるのでそちらを選択し、インバウンドルールの編集を行う
⑤左下の「ルールを追加」を選択し、データベースのタイプを選択
⑥ソースを「カスタム」に選択し、ここに先程のEC2のセキュリティグループを貼り付けるとOKです！

# 終わりに
今回は文字のみのご案内となり、非常にわかりにくい方も多かったかもしれません🙇‍♂️
ご不明点はお気軽にコメントいただけると幸いです。
requests.postのallow_redirectsでハマった話


# ハマった状況

Flask-Loginを使用した簡単なアプリケーションを作成中。
ブラウザから操作した範囲ではOKであることを確認した。

テストを自動化するために、requestsパッケージを使用して、ログインを実装してみたが、
ログインに成功しているにも関わらず、その後の問合せに対してログイン状態が維持されず、
再度、ログインを要求するレスポンスが返ってくる。

# 最初のコーディング

作成したアプリケーションは、emailとpasswordで認証する。

```python
import requests
from bs4 import BeautifulSoup

# GET /loginでformを取得して、csrfトークンを抽出
r = requests.get("http://127.0.0.1:5000/login")
doc = BeautifulSoup(r.text, 'html.parser')
csrf_token = doc.find(attrs={'name':'csrf_token'}).get('value')

# credentialとsession cookieを指定して、POST /login
cookies = {"session": r.cookies["session"]}
credential = {"email": "user1@email.com", "password": "password1",
    "csrf_token": csrf_token}
r = requests.post("http://127.0.0.1:5000/login", cookies=cookies,
    data=credential, allow_redirects=True)
```

しかしながら、この後の呼び出しでは、ログイン状態が維持されていないため、
ログイン画面に飛ばされてしまう。

コマンドラインからcurlで実行した場合は、正しくログイン状態が維持されることは確認。

```
curl http://127.0.0.1:5000/login -i -c cookie.txt -b cookie.txt
curl http://127.0.0.1:5000/login -i -c cookie.txt -b cookie.txt ^
  -d "email=user1@email.com" -d "password=password1" ^
  -d "csrf_token=・・・" -L
```

# 調査

何が違うのか色々と調べてみたが、原因分からず。
stackoverflowで、requestsのログを出力する方法を見つけて、ログを調査。
https://stackoverflow.com/questions/16337511/log-all-requests-from-the-python-requests-module

```python
import logging
import http.client

logging.basicConfig(level=logging.DEBUG)
httpclient_logger = logging.getLogger("http.client")

def httpclient_logging_patch(level=logging.DEBUG):
    """Enable HTTPConnection debug logging to the logging framework"""

    def httpclient_log(*args):
        httpclient_logger.log(level, " ".join(args))

    # mask the print() built-in in the http.client module to use
    # logging instead
    http.client.print = httpclient_log
    # enable debugging
    http.client.HTTPConnection.debuglevel = 1

httpclient_logging_patch()
```

# 原因

最初にrequestsがPOST /loginすると、サーバー側で認証後、レスポンスが返る。
サーバー側がredirectで返しているので、戻り値が302 Foundとなり、
遷移先を取得しようとしてrequestsがGETを発行する。
この際、レスポンスにSet-Cookieが含まれているにも関わらず、
最初のPOSTで指定したcookieをそのまま送ってしまっている。

# 対応方法1

allow_redirectsをFalseに変更して、
戻り値が302の場合は、cookieを再設定してGETする。

```python
# credentialとsession cookieを指定して、POST /login
cookies = {"session": r.cookies["session"]}
credential = {"email": "user1@email.com", "password": "password1",
    "csrf_token": csrf_token}
r = requests.post("http://127.0.0.1:5000/login", cookies=cookies,
    data=credential, allow_redirects=False)
if r.status_code == 302:
    cookies = {"session": r.cookies["session"]}
    r = requests.get(r.next.url, cookies=cookies)
```

# 対応方法2

最初から素直にsessionオブジェクトを使用する。

```python
import requests
from bs4 import BeautifulSoup

session = requests.session()
r = session.get("http://127.0.0.1:5000/login")
doc = BeautifulSoup(r.text, 'html.parser')
csrf_token = doc.find(attrs={'name':'csrf_token'}).get('value')
credential = {"email": "user1@email.com", "password": "password1",
    "csrf_token": csrf_token}
r = session.post("http://127.0.0.1:5000/login",
    data=credential, allow_redirects=True)
```

# おわりに

- 常識なのかもしれませんが、答えを求めてインターネットを三日間くらい彷徨いました。
CAGradientLayer( ) を少し使ってみました。

#今回の内容
<img width="150" alt="B74F482A-9CA3-48F0-B256-FDC044BBB008_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/991a40d5-915f-f7f2-db38-1ec46b331ce2.jpeg"> <img width="150" alt="A11CDFB7-48A4-45AD-ACBA-84F1E2B33408_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/80ed6aae-d556-0de4-ccb9-94604ab1d020.jpeg"> <img width="147" alt="102EFB9C-EAFF-407F-A4A7-EBF4F5444E08_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/0b544a74-8135-16d9-9e7d-94e4a2fe0f94.jpeg">


#機能説明
* Timer( )を使って、一定秒後にランダムに背景色が変わってるように見せる。

#全体コード

```Swift:
import UIKit

class ViewController: UIViewController {

    var gradient = CAGradientLayer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        gradient.frame = CGRect(x: self.view.frame.minX, y: self.view.frame.minY, width: self.view.frame.size.width, height: self.view.frame.size.height)
        
        Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(changeGradient), userInfo: nil, repeats: true)
        
    }

    @objc func changeGradient(){
        
        UIView.animate(withDuration: 1,delay: 0,options: .allowUserInteraction ,animations: {[self] in
            
            gradient.colors = [
                
                UIColor(red: CGFloat.random(in: 0...255) / 255,
                        green:CGFloat.random(in:0...255) / 255,
                        blue: CGFloat.random(in: 0...255) / 255,
                        alpha: CGFloat.random(in: 0.0...1.0)).cgColor,
                UIColor(red: CGFloat.random(in: 0...255) / 255,
                        green:CGFloat.random(in: 0...255) / 255,
                        blue: CGFloat.random(in: 0...255) / 255,
                        alpha: CGFloat.random(in: 0.0...1.0)).cgColor
            ]  
            
            gradient.startPoint = CGPoint(x: 0.5, y: 0.5)
            gradient.endPoint = CGPoint(x: 0.5, y: 0)
            self.view.layer.insertSublayer(gradient, at: 0)
                
        },completion: nil)
    }

}
```

#終わり
間違いの指摘、ご質問などありましたら、コメントまでお願い致します。
FirebaseUIを使用してexport 'default' (imported as 'firebase') was not found in 'firebase/app' と表示された時の対処

##Firebase UIはv9にまだ対応していない
```
 warning  in ./node_modules/firebaseui/dist/esm.js

"export 'default' (imported as 'firebase') was not found in 'firebase/app'
```
Firebaseは2021年8月25日にv8→v9に正式にアップデートされ、```npm install --save firebase```とすると自動的にv9がインストールされます。
ですが2021年9月8日現在、Firebase UIはFirebase JS SDK v9に対応していません。
そのため上記のようなエラーが発生します。
FirebaseUIを使う際は後述のcompat(互換)ライブラリを使用してv8以前のように書く必要があります。

## compatライブラリ
Firebase JS SDK v9以前のコードを使えるようにする一時的な措置としてcompat(互換)ライブラリがあります。
[公式ドキュメント：バージョン8からモジュラーWebSDKにアップグレードします](https://firebase.google.com/docs/web/modular-upgrade)

```js
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
```
パスにcompatを挟むと、v8以前のままのコードで動くようです。
ただ、Composition APIを使用した高速化の恩恵は得られません

# Firebase UIを Firebase v9に対応させる

まずエラーログにある```./node_modules/firebaseui/dist/esm.js```のimportをcompatライブラリに書き換えます。

```./node_modules/firebaseui/dist/esm.js
import firebase from 'firebase/compat/app'; import 'firebase/compat/auth';
```
そして、FirebaseUIを設置しているファイルを以下の通りに書き換えます。
私の場合はこんな感じです。

```signin.vue
<!-- abbr -->
import { getAuth } from "firebase/auth";
import * as firebaseui from "firebaseui"
import "firebaseui/dist/firebaseui.css";

var ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(getAuth());
<!-- abbr -->

```
FirebaseUIインスタンスの初期化で注意する点は、```AuthUI()```の引数であるAuthインスタンスの取得は```firebase.auth()```ではなく```getAuth()```です。
【JavaScript】クラスについて

#はじめに
こんにちは。
JavaScriptのクラスについてアウトプットしていきます！

##クラスとは
>クラスはオブジェクトを作成するためのテンプレートです。それらは、そのデータを処理するためのコードでデータをカプセル化します。

> 参照：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes



```javascript:JavaScript
class MyObj {

    //コンストラクタ
    constructor() {
        this.name = '佐藤';
        this.age = 20;
    }

    //メソッド
    introduce() {
        console.log(`私の名前は${this.name}で、${this.age}歳です。`);
    }
}

//インスタンスを生成
const obj = new MyObj();

obj.introduce();  //私の名前は佐藤で、20歳です。
```
`Myobj`というクラスを宣言し、上記のようなコンストラクタとメソッドを定義する。コンストラクタは、クラスを初期化するときに呼ばれる関数のことです。クラスを定義した後、new演算子でオブジェクトを生成して処理を実行させる。

<br>

また、コンストラクタに引数を設定して、インスタンス生成時に値を受け取ることができる。

```javascript:JavaScript
class MyObj {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }

    introduce() {
        console.log(`私の名前は${this.name}で、${this.age}歳です。`);
    }
}

const sato = new MyObj('佐藤',20);
const yamada = new MyObj('山田',25);

sato.introduce();    //私の名前は佐藤で、20歳です。
yamada.introduce();  //私の名前は山田で、25歳です。
```
`sato`と`yamada`をそれぞれ定数に代入して、クラスの処理を実行することができる。

#最後に
ここまでクラスについてまとめてみました。
クラスを定義することで、関数を使いまわすことができたり、コードの保守性を高めることができます。
まだ不十分な理解の部分もあるので、別の記事で詳細に書いていこうと思います！
window.confirmのように手軽に使用できるReactの確認ダイアログコンポーネントを作成してみました

# 背景

ちょっと確認ダイアログを出したい際にwindow.confirmのように手軽に使用できるReactコンポーネントがあると便利だと思い、作ってnpmレジストリで公開してみました。

# 作ったもの

* GitHub: [kamiya-kei/simple-confirm](https://github.com/kamiya-kei/simple-confirm)
* DEMO: [https://kamiya-kei.github.io/simple-confirm/](https://kamiya-kei.github.io/simple-confirm/)
* npm: [@kamiya-kei/simple-confirm](https://www.npmjs.com/package/@kamiya-kei/simple-confirm)

![dc4089ac937ea1b4feebd98d2367b88b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648017/06c4555b-92bf-571c-050b-723f3349cceb.gif)

オプションでダイアログタイトル・メッセージ・OK/キャンセルのテキスト・カラーを設定できるようにしてます。

# インストール・使用方法

以下GitHubのREADMEにインストール・使用方法を記載していますので、よかったら使ってみてください。

[kamiya-kei/simple-confirm/README.md](https://github.com/kamiya-kei/simple-confirm/blob/main/README.md#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)

# 制作メモ

window.confirmは以下の様に使用すると「OK」を選択すると`true`、キャンセルを選択すると`false`が返ってきます。

```javascript
const is_ok = window.confirm('本当によろしいですか？');
```

同じような感じで以下のように使用できるようにしました。

```react
const is_ok = await simpleConfirmRef.current.confirm();
```

子コンポーネント側の関数を呼び出せるようにする為にReact.useImperativeHandleを使用し、結果を同期的に受け取れるようにする為にPromise・Async/Awaitを使用しました。

上記コードを実行すると、下記コードのconfirm関数が呼び出されるようになっています。

```react
  useImperativeHandle(ref, () => ({
    confirm: () => new Promise((resolve, reject) => {
      setHandleAgree(() => () => {
        resetHandle();
        resolve(true);
      });
      setHandleDisagree(() => () => {
        resetHandle();
        resolve(false);
      });
      setHandleClose(() => () => {
        resetHandle();
        resolve(false);
      });
      setOpen(true);
    }),
  }));
```

コンポーネント全体のソースコードはこちらです。
[https://github.com/kamiya-kei/simple-confirm/blob/main/src/index.js](https://github.com/kamiya-kei/simple-confirm/blob/main/src/index.js)

# 最後に

そもそもuseImperativeHandleは手続き的であり、あまり積極的に使用するべきではないといったことも書かれていたのですが、確認ダイアログを表示してその選択結果によって処理するといったことをする場合に宣言的かつシンプルで分かりやすいコードの書き方が思いつかず、手続き的な書き方をしました。
Reactは最近使い始めたばかりでまだ分かっていない部分も多いので、もっと勉強してより良い書き方ができるようにしていきたいと思います。

# 参考記事
* [React 16.8: 正式版となったReact Hooksを今さら総ざらいする](https://qiita.com/uhyo/items/246fb1f30acfeb7699da)
* [Reactコンポーネントをnpmで公開する（GitHub Pages付き、Babel7、webpack4）](https://qiita.com/Takumon/items/945335b0e0fa035f2201)
* [async/awaitを使用して、"regeneratorRuntime is not defined "エラーが出た時の対処](https://qiita.com/nbstsh/items/44a63b724214a9f920e2)
* [npmとyarnのコマンド早見表](https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8)
Vivado の WARNING: [Labtools 27-3222] の解決法

#エラー

WARNING: [Labtools 27-3222] Mismatch between the design programmed into the device xc7z020 (JTAG device index = 1) and the probes file(s)
/....../[Project name]/[Project name].runs/impl_1/design_1_wrapper.ltx.
The hw_probe  in the probes file has port index 6. This port does not exist in the ILA core at location (uuid_23E7D65A79BC59F7BC47406C1714DFAE).

と表示され、Waveformが表示されない

#解決法
左のペインのHardware->Xilinxのコアを右クリックしてProgram deviceでFPGAをプログラムする。

（あまりに初歩的なミスなのでネットのどこにも転がっていませんでした。同じようなミスをした人が困らないように恥を忍んで残しておきます。）
Labtools 27-3222
【Blender/glTF】BlenderのglTF出力でtangent情報が出ない原因と解決法

# 概要

注：筆者は3D関連の経験が半年程度 かつ アーティストではないため、Blenderに関しての知識が浅い。

glTFから読み込んだ3Dモデルで法線マップを使った描画をする処理を書いていると、tangent情報が正しく取得できないことがあった。
エクスポート時に「ジオメトリ ＞ タンジェント」を有効にしてるのに、うまく行かない。

これを解決する手段を、忘備を兼ねて記しておく。
※ Blender 2.83.9 と 2.93.4にて確認

シェーダー、glTFパーサ、そのほかライブラリソースなど一通り疑った。どこにも問題はない。
そこで、glTFファイルでの記述を見に行くと…

```json
**略**
"meshes" : [
        {
            "name" : "Cylinder",
            "primitives" : [
                {
                    "attributes" : {
                        "POSITION" : 0,
                        "NORMAL" : 1,
                        "TEXCOORD_0" : 2
                    },
                    "indices" : 3,
                    "material" : 0
                }
            ]
        }
**略**
```

 **無いやんけ、"TANGENT"！！！！**

あと、シェーダー側でUVから良い感じにtangent算出する方法もあるらしいけど、今回はそれは無しという方向で……

# 原因と解決法

## 原因

GitHubのIssueにあった。
https://github.com/KhronosGroup/glTF-Blender-IO/issues/172

> For calc_tangents to work, the mesh needs be all tris/quads, and there has to be a UVMap.

つまり…

* **すべてのメッシュが３角or４角である(n-gonはダメ)**
* **UVマップ情報が存在する必要がある**

この２点が必要だそうだ。

## 解決法１：n-gonの撲滅

前者は分かりやすい。
対策は、面をすべて三角/四角化するだけなので比較的簡単である。

「Ctrl + T」で自動で面を三角化するのが一番手っ取り早い。

もし、n-gonな面を放射状(ホールケーキを切り分ける感じ)に三角メッシュが生成されるように変換したければ、
面を差し込み & そこで生まれた頂点を中央にマージしてあげるといいだろう。

ちなみに、n-gonのみを選択するには、「選択 ＞ 特徴で全選択 ＞ 頂点数で選択」で、頂点数を 4、タイプを大きいにするとよい。
(n-gonを探し出して撲滅する際に役立つ)

## 解決法２：UVマップ情報を追加

さて、後者のUVマップ情報についてだ。
該当のオブジェクトについて、**「オブジェクトデータプロパティ ＞ UVマップ」**を確認してみよう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552958/28c4b91b-ffc1-c5ff-e7c4-6055c28f1b69.png)

何もない！！！
これが原因。 **「+」ボタンを押してUVマップを追加してあげよう。**
筆者の場合は、ネット上から拾った素材がこの状態で長時間悩まされた。

# 参考にしたサイト

[Tangent are not exported · Issue #172 · KhronosGroup/glTF-Blender-IO - https://github.com/KhronosGroup/glTF-Blender-IO/issues/172](https://github.com/KhronosGroup/glTF-Blender-IO/issues/172)
[Blender での n ゴンの使い方 - https://dskjal.com/blender/how-to-use-ngon.html](https://dskjal.com/blender/how-to-use-ngon.html)
<input>で正の整数値のみを入力できるようにする

`<input type="number">`で数値のみの入力にすることはできますが、正負を表す`+`や`-`、少数を表す`.`、べき乗を表す`e`が入力できてしまいます。

これらをVueのディレクティブを使って一括で正の整数のみ入力できるようにします。


```plugins/integer.directive.ts
import Vue from 'vue';

const targets = ['+', '-', '.', 'e'];
const listen = (element: HTMLInputElement) => {
  element.addEventListener('keydown', event => {
    if (targets.includes(event.key)) {
      event.preventDefault();
    }
  });
  // コピペ対策
  element.addEventListener('input', event => {
    let value = (event.target as any).value as string;
    targets.forEach(char => (value = value.replaceAll(char, '')));
    (event.target as any).value = value;
  });
};

/**
 * v-integer
 *
 * inputタグにて、正の整数のみを許容する
 */
Vue.directive('integer', {
  bind(el, _binding, _vnode) {
    if (el instanceof HTMLInputElement) {
      listen(el);
    } else {
      const elements = el.getElementsByTagName('input');
      if (elements.length) listen(elements[0]);
    }
  },
});

```

`input`イベントでreplaceしているのは、コピペした場合にkeydownでは弾けないので追加してます。
ただ、`+1234`みたいに先頭に+がある数値をコピペすると`event.target.value`で`1234`と`+`なしの値が設定されていました。。。
そんなことやるやつはまれだと思うので今回は無視しますが、解決できるのであれば解決しておきたいですね。


```test.vue
<template>
  <input v-integer type="number">
</template>
```

```nuxt.config.js
  plugins: [
    '~/plugins/integer.directive.ts',
```
Laravelでフラッシュメッセージを表示したい。


#View

sessionメッセージがあれば、表示する記述を追加する。

```blade.php
    @if (session('flash_message'))
        <div class="flash_message">
            {{ session('flash_message') }}
        </div>
    @endif
```

```app_blade.php
<body>
    <div id="app">

        @yield('header')
        @yield('dheader')

        <main class="py-4">
          
// @yield('content')の上くらいに入れるのがちょうどいい。
            @if (session('flash_message'))
              <div class="flash_message">
                  {{ session('flash_message') }}
              </div>
            @endif

            @yield('content')
            @yield('inc_pagination')

            <section id="dashboard">
                @yield('dsidebar')
                @yield('dashboard')
            </section>
        </main>
    </div>

    @yield('footer')
</body>
```

#Controller

if文などで、分岐を作り、withでフラッシュメッセージをViewへ送る。

```Controller.php

return redirect()->back()->with('flash_message', '登録が完了しました。');

```