OmniAICreator/Qiita-1.07M huggingface dataset:
Python: VSCode: 関数名をスネークケース(小文字と_で構成)に変換するショートカットを設定する

Pyhonの関数名とか変数名の付け方って、スネークケース（例： get_user_info）がデファクトスタンダードっぽくて、オブジェクト指向言語メインだった身には新鮮でした。あっちはキャメルケース（例： getUserInfo）メインなので。

やはりみんな混同することがあるようで、前任者から引き継いだPythonコードがキャメルケースだらけだったりします。

リファクタリングする際に変数名とかをスネークケースにしようと思うと結構ハードワークなので、VSCodeのショートカットを活用することにしました。

# VSCodeのキーボードショートカット設定画面を開きます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553715/61fae597-f064-45c1-a983-613ee1532971.png)

# 設定キーワードに「editor.action.」と入力して検索します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553715/8d09e35a-dc50-2471-5956-7937762d6866.png)

便利そうなのがいっぱい出てきました。

VSCodeを日本語化していれば、そのまんまの「スネークケースに変換する」が出てきます。設定キーなら "editor.action.transformToSnakecase" です。
お好きなキーボード操作を設定しましょう。

わたしは

* Windows: Alt + M
* Mac: command + M

にしています。

これで、
例えばソースコードの変数にカーソルを置いた状態で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553715/57d388dc-f7c1-9e41-4389-e52452a04022.png)
Alt + M を押すと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553715/549e70f2-9680-6930-df02-8cb8b3b5ec3f.png)
スネークケースにしてくれます。


その他、
大文字 ＜－＞ 小文字変換 もオススメです。


* "editor.action.transformToLowercase"
* "editor.action.transformToUppercase"
{dplyr} 各グループで最大値を持つ行や平均値以上の値を持つ行を抽出

自分が結構引っかかってたので簡単なメモ。

# A. グループ化したい列を`group_by`して`filter`すればOK
グループ化されたtibbleに対しては、`filter`は通常とは少し違う挙動をします。詳しくは`filter`のレファレンスに書いてあります。以下部分的な引用です：

> In the ungrouped version, filter() compares the value of mass in each row to the global average (taken over the whole data set), keeping only the rows with mass greater than this global average. In contrast, the grouped version calculates the average mass separately for each gender group, and keeps rows with mass greater than the relevant within-gender average.
> 
> https://dplyr.tidyverse.org/reference/filter.html#grouped-tibbles より

つまり、**グループ化されたtibbleに対して`== max(<列名>)`や`>= mean(<列名>)`等によるフィルタリングをすると、全体における最大値や全体の平均値ではなく、グループ内の最大値やグループ内の平均値との比較でフィルタリングが行われます**。これを知っていれば行抽出が楽々できます。

# 例
## 各グループ１で最大値を持つ行を抽出

``` r
iris %>% 
  group_by(Species) %>% 
  filter(Sepal.Length == max(Sepal.Length))
```

    ## # A tibble: 3 x 5
    ## # Groups:   Species [3]
    ##   Sepal.Length Sepal.Width Petal.Length Petal.Width Species   
    ##          <dbl>       <dbl>        <dbl>       <dbl> <fct>     
    ## 1          5.8         4            1.2         0.2 setosa    
    ## 2          7           3.2          4.7         1.4 versicolor
    ## 3          7.9         3.8          6.4         2   virginica

## 各グループで平均値以上の値を持つ行を抽出

``` r
iris %>% 
  group_by(Species) %>% 
  filter(Sepal.Length >= mean(Sepal.Length))
```

    ## # A tibble: 68 x 5
    ## # Groups:   Species [3]
    ##    Sepal.Length Sepal.Width Petal.Length Petal.Width Species
    ##           <dbl>       <dbl>        <dbl>       <dbl> <fct>  
    ##  1          5.1         3.5          1.4         0.2 setosa 
    ##  2          5.4         3.9          1.7         0.4 setosa 
    ##  3          5.4         3.7          1.5         0.2 setosa 
    ##  4          5.8         4            1.2         0.2 setosa 
    ##  5          5.7         4.4          1.5         0.4 setosa 
    ##  6          5.4         3.9          1.3         0.4 setosa 
    ##  7          5.1         3.5          1.4         0.3 setosa 
    ##  8          5.7         3.8          1.7         0.3 setosa 
    ##  9          5.1         3.8          1.5         0.3 setosa 
    ## 10          5.4         3.4          1.7         0.2 setosa 
    ## # ... with 58 more rows

### 注意：必要に合わせて適宜`ungroup`するのを忘れずに
Flutterで「2022-01-01 00:00:00」の日付文字列を「●日前」、「●分前」に変換する

## やりたいこと
```
"2022-03-20 12:33:55"
↓
"35分前"
```
「文字列日時」を「●日前・時間前・分前」に変換する


## 下準備

intlが必要なので、まずintlをpub addしましょう
``` shell
$ flutter pub add intl
$ flutter pub get
```

## 方法
```dart
import 'package:intl/intl.dart';  // 先ほどのintlを読み込む

// 変換用の関数を作る
String convertFromNowString(String dateStr) {
  DateFormat dateFormatter = DateFormat("y-M-d HH:mm:ss");
  DateTime dateTime = dateFormatter.parseStrict(dateStr);

  final Duration difference = DateTime.now().difference(dateTime);
  final int sec = difference.inSeconds;

  if (sec >= 60 * 60 * 24) {
    return '${difference.inDays.toString()}日前';
  } else if (sec >= 60 * 60) {
    return '${difference.inHours.toString()}時間前';
  } else if (sec >= 60) {
    return '${difference.inMinutes.toString()}分前';
  } else {
    return '$sec秒前';
  }
}

// いざ処理
String timeStr = convertFromNowString("2022-03-20 12:33:55");
// これで timeStr = "35分前(現在時刻との差異時間)" になっています！

```
以上です。


convertFromNowStringの関数については下記記事からコピペさせていただきました。

https://qiita.com/seiboy/items/7b632103088c5ed65082

@seiboy さん、ありがとうございます。
Javascript 配列の破壊的メソッドと非破壊的メソッドに注意して配列操作を行う

### 配列の破壊的メソッドと非破壊的メソッドとは

### 非破壊的
元の配列を変更する 
###### メリット
一つの配列を操作するためメモリの消費を抑えれる
###### デメリット
元の配列を変化させるため使いすぎたり、複雑な場合はバグの温床になりやすい
***

### 破壊的
元の配列を変更しない
###### メリット
元の配列を操作しないため安全なコードを書ける
###### デメリット
配列を新たに作り出してしまうため、大規模な配列操作に対してはメモリを大量に使う
***

実際のCodeを使った例
##### 1.破壊的メソッド push

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push
```js
const arrayA = ['あ', 'い', 'う', 'え', 'お']
//破壊的メソッド arr.push([element1[, ...[, elementN]]])
arrayA.push('か')
console.log(arrayA)

// [LOG]: ["あ", "い", "う", "え", "お", "か"] 
```

##### 2.非破壊的メソッド concat

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

```js
const arrayB = ['あ', 'い', 'う', 'え', 'お']

//非破壊的メソッド const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])
const newArrayB = arrayB.concat('か')
console.log(arrayB)
console.log(newArrayB)

//元の配列B [LOG]: ["あ", "い", "う", "え", "お"] 
//新しい配列B [LOG]: ["あ", "い", "う", "え", "お", "か"] 
```


-----------

### その他の破壊的・非破壊的メソッド一覧

https://qiita.com/Shokorep/items/929e2e66908eaa915286

### 使い分け
大規模な配列(1000件とか1万件とかを超えるような配列操作以外は基本的には元の配列を使用する場合以外は破壊的メソッドはバグの温床になりやすいため避ける


### 破壊的メソッドを非破壊的に使う方法

spred構文を使用してcopyを作る
```js
const arrayC = ["あ", "い", "う", "え", "お"] 
// Copyを作る(注意: 代入するは意味がない)
const copyC = [...arrayC]
copyC.push('か')

console.log(arrayC)
console.log(copyC)

//元の配列C [LOG]: ["あ", "い", "う", "え", "お"] 
//copy配列C [LOG]: ["あ", "い", "う", "え", "お", "か"] 

```

##### 結論

大規模な配列(1000件とか1万件とかを超えるような配列操作以外は基本的には元の配列を使用する場合以外は破壊的メソッドはバグの温床になりやすいため避ける
しかし、破壊的メソッドには便利なものが用意されていることが多い(sort, reverse)ので、非破壊的メソッドで代用が難しい場合はspred構文を利用しcopyを作り破壊的メソッドを利用するのが良さそう
AlibabaCloud（中国サイト）のマーケットプレイスでRedhatを購入する方法

AlibabaCloud（中国サイト）のマーケットプレイスでRedhatを購入する方法を共有します。


# 1.ECS購入画面
画面の「镜像市场」（イメージマーケットプレイス）をクリックすると下に青い選択項目が出現します。
こちらをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/8e76e468-16d7-88db-5bb4-71db3176004a.png)

すると以下のようにマーケットプレイスのポップアップ画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/c1224620-5d5f-9035-b5da-caec199437b1.png)

さっそくredhatを検索しますが、CentOSしか表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/256811c1-8e02-14f6-d9ba-f6c8156a2ea6.png)

なんでだろう。。めげずに他の場所を探してみます。

# 2.マーケットプレイス
阿里云のTOPから「云市场」（マーケットプレイス）へ行き、検索してみることにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/973d5037-e8ce-0bfa-9127-83929e8895bb.png)

Redhatを検索してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/461542b2-213e-2e9a-af50-c7b0e068f21c.png)

発見！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/d0fa9457-c1f5-f91d-c554-68d7ede1bda2.png)

バージョンも要件通りのものが見つかったので、購入をクリックしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/eaeb2fe5-72be-9230-1cb0-d175afc15abd.png)

するとECS購入画面へ推移し、イメージにredhatが選択されています。イメージ料金も表示されているのでこれで買えそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263462/1e44c7c7-539b-44d6-a7a2-f923a05bfc9d.png)

# 3.終わりに
ECSの購入画面の「镜像市场」イメージマーケットプレイスとTOP画面の「云市场」（マーケットプレイス）では検索結果が異なります。ECSの購入画面で欲しいイメージが見当たらない場合は「云市场」で探してみると見つかることがあるかもしれません。
【Laravel】Class "App\モデル名" not found

## 環境
Laravel v9.5.1 (PHP v8.1.3)

## 状況

コントローラーにAricleモデルを宣言した際のエラー
```
Class "App\Article" not found
```

```app/Http/Controllers/HomeController.php
...
use App\Article;

class HomeController extends Controller
{
  ...
}
```

## 解決方法

ちゃんとディレクトリ通りに参照する。
古いバージョンの記事を参考にしていたため、自分のバージョンに合った記事を参考にする。

```app/Http/Controllers/HomeController.php
...
use App\Models\Article;

class HomeController extends Controller
{
  ...
}
```

いちいちモデル宣言しなきゃいけないの面倒だな…
[Python] UserWarning: X has feature names・・・の対処法

scikit-learnでpredictを行う際に出力された警告に対し、どのように処理を行ったかを共有させていただきます。誰かのご参考になれば幸いです。

## fit と predict の引数の型を確認しましょう
結論から申し上げますと、引数の型が異なっているので警告が出ています。

警告内容：UserWarning: X has feature names, but DecisionTreeClassifier was fitted without feature names

前提処理
１．訓練データとテストデータを分ける
```Python
from sklearn.model_selection import train_test_split

# 引数のx,yはデータフレーム型
x_train,x_test,y_train,y_test = train_test_split(x,y,test_size = 0.2,random_state = 0)
```
２．fitの引数は「データフレーム型」
```Python
from sklearn import tree

model = tree.DecisionTreeClassifier(max_depth = 3,random_state = 0)

model.fit(x_train,y_train)
```
:::note info
重要
fit の引数には「データフレーム型」を渡しています。
:::
## 警告されるコード
```Python
newdata = [[1.56,0.23,-1.1,-2.8]]
answer = model.predict(newdata)
```
学習時の訓練データはデータフレーム型なのに対し、
predict に渡したnewdataは「リスト型」なので警告が出力されます。
## 対処
```Python
# pandasはインポート済み
# データフレーム型に変換
data = pd.DataFrame(newdata)
```
リスト型からデータフレーム型に変換することで対処することができました。

上記のコードで対処できない場合には、fit の引数の列名や行の名前を一致させてあげることで対処できました。
```Python
# データフレーム型に変換する際に、行の名前を指定
data = pd.DataFrame(newdata,columns = ["x0","x1","x2","x3"])
```
【Laravel】Dockerでテスト用のDBを作成する方法

## 環境
Laravel v9.5.1 (PHP v8.1.3)

## やり方

テスト用のDBを作成するために```docker-compose.yml```に追記。

テスト用のDBを環境変数にしない理由は、Dockerを立ち上げたときに**おそらく**```.env```は読み込んでいるが```.env.testing```はテストを実行したときに読み込んでいるため、ここで環境変数にしても意味がないから。
環境変数にした場合、テストがうまく行かなかった。

```docker-compose.yml
    mysql: &mysql
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: "%"
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    # test用DB
    mysql_test:
        <<: *mysql
        volumes:
            - 'sail-mysql-test:/var/lib/mysql'
        ports: []
        environment:
            MYSQL_DATABASE: 'example_app'
            MYSQL_USER: 'root'
            MYSQL_PASSWORD: ''
            MYSQL_ROOT_PASSWORD: ''
            MYSQL_ROOT_HOST: "%"
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
    ...
    volumes:
        sail-mysql-test:
            driver: local
```

元々入っていた```.env.example```を丸々コピーしてテスト用のenvファイルを作成。
（※APP_KEYは新たに作成する必要あり ```php artisan key:generate --env=testing```）
DBに関するところだけ、```docker-compose.yml```のテスト用DBの方の環境変数と合わせて追記する。

```.env.testing
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:******/*****/*******************
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

####下記を編集
DB_CONNECTION=mysql
DB_HOST=mysql_test
DB_PORT=3306
DB_DATABASE=example_app
DB_USERNAME=root
DB_PASSWORD=
####

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
```

Dockerを立ち上げ直すのを忘れずに！
これでテストを実行してもデータがテスト環境に保存されるはず。
Laravelバリデータにエラーメッセージを設定【個人的なお勉強アウトプット】

## バリデータにエラーメッセージを設定
`Validator::make`を呼び出す時の引数で指定する。
```app/Http/Controllers/HelloController.php
 public function post(Request $request){
        $rules = [
            'name' => 'required',
            'mail' => 'email',
            'age' => 'numeric|between:0,150',
        ];

        $messages = [
                'name.required' => '名前は必ず入力してください。',
                'mail.email' => 'メールアドレスが必要です。',
                'age.numeric' => '年齢を整数で記入ください。',
                'age.between' => '年齢は~150の間で入力ください。'
        ];
        $validator = Validator::make($request->all(),$rules, $messages);
        if($validator->fails()){
            return redirect('/hello')
                ->withErrors($validator)
                ->withInput();
        }
        return view('hello.index',['msg'=>'正しく入力されました！']);
    }
```
Laravelクエリー文字列をバリデータ適用【個人的なお勉強アウトプット】

## 参考図書
https://www.amazon.co.jp/dp/B07CLLW4MX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

## クエリー文字列にバリデータを適用
```app/Http/Controllers/HelloController.php
public functioon index(Request $request){
$validator = Validator::make($request->query(), [
'id'=>'required',
'pass'=>'required'
]);
if($validator->fails()){
$msg = 'クエリーに問題があります';
}else{
$msg = 'ID/PASSを受け付けました。フォームを入力ください。'
}
return view('hello.index', ['msg'=>$msg,]);
}
```
"変数名"や"関数"の命名に迷った時に探すサイト

変数名や関数の命名に困っていたので参考になったサイトをまとめました。

## サイト一覧

1. codic
2. プログラミングに出る！英単語
3. Qiita うまくメソッド名を付けるための参考情報


## 1. codic

https://codic.jp/

## 2. プログラミングに出る！英単語

https://web.archive.org/web/20170923202234/http://www.g-ishihara.com:80/c_fd_02.htm


## 3. うまくメソッド名を付けるための参考情報

https://qiita.com/KeithYokoma/items/2193cf79ba76563e3db6?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=ef52de7cf3-Qiita_newsletter_172_09_09_2015&utm_medium=email&utm_term=0_e44feaa081-ef52de7cf3-32819345
EclipseへSpring Bootプロジェクトをインポート

### 手順
ダウンロードしたソースコードをEclipseにインポートします。Eclipseから[ファイル(F)]→[インポート(I)]でインポートウインドを開きましょう。その中の、[Maven]→[既存Mavenプロジェクト]を選択してください。
LinuxでPatchを適用・作成


## 結論
#### パッチ作成
```
$ git diff > name.patch
```
#### パッチ適用
```
$ patch -p1 < name.patch
```

#### パッチ内容の戻し
```
$ patch -R file_path < name.patch
```

## 参考
http://d.hatena.ne.jp/mrgoofy33/20101019/1287500809
ColabのvimキーバインドでjjをEscにマッピングする

Google Colaboratory(Colab)のVimキーバインド利用時にjjをEscにマッピングした時の備忘録

# ColabのVimキーバインド有効化

Colabでは以下のように設定からVimキーバインドを設定することが出来る。

![colab_vim_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138429/a2be6258-390f-e8dc-281a-2697708846ca.png)


# jjをEscにマッピング

この記事に興味を持って閲覧している人には、説明不要だと思いますが、Vimではインサートモード等からノーマルモードへ戻るときには、デフォルト設定ではEscキーを基本的に利用します。しかし、Escキーは位置的に遠いため、素早くノーマルモードへ戻るために、`jj`に`Esc`キーを割り当てる設定を行う人が多いです。

Colabでのマッピングは`:`押下でコマンドモードへ移行し、下記のように `imap jj <Esc>` を実行することで可能です。
![colab_vim_jj_esc_mapping.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138429/36f4c7b7-c0b1-d14c-8247-159a8b850219.gif)
ただし、この方法では永続的にマッピングできるわけではないので、Colabを起動する度にコマンドを毎回実行する必要があります。本当は`.vimrc`のような設定ファイルから毎回自動的に設定できるといいんですが、今はこの方法で我慢するしかなさそうですね...。

参考サイト：

https://stackoverflow.com/questions/69236097/is-there-a-way-for-google-colab-to-take-in-a-vimrc-file
EC-CUBE4独自プラグインサンプル作り方

# 作業環境
EC-CUBE4.0.5

# プラグインジェネレータを生成

EC-CUBEサイトroot
```
cd /var/www/html/example.com
php bin/console eccube:plugin:generate
```

対話形式

```
EC-CUBE Plugin Generator Interactive Wizard
===========================================

 name [EC-CUBE Sample Plugin]:
 > 
```

と聞かれるのでプラグイン名を入力

```
 name [EC-CUBE Sample Plugin]:
 > EC-CUBE4 ホゲカスタマイズプラグイン
```

コード名を入力

```
 code [Sample]:
 > HogeCustom
```

すでに同名プラグインが存在する場合はエラー

```                                                                                   
 [ERROR] Plugin directory exists.                                                     
```

別のコード名を入力

```
 code [Sample]:
 > HogeSpecialCustom
```

バージョンを入力

```
 ver [1.0.0]:
 > 
```

提案されたバージョンでよければ無入力でEnter

```
[OK] Plugin was successfully created: EC-CUBE4 ホゲカスタマイズプラグイン HogeSpecialCustom 1.0.0 
```

プラグインサンプル生成に成功

確認する

```
ls /var/www/html/example.com/app/Plugin/

HogeSpecialCustom
```

# インストール

```
php bin/console eccube:plugin:install --code=HogeSpecialCustom

 [OK] Installed.  
```
`[OK] Installed.`  と緑帯の中に表示されればインストール成功
`管理画面　＞　オーナーズストア　＞プラグイン一覧　＞　ユーザー独自プラグイン`で存在を確認

# 有効化

```
php bin/console eccube:plugin:enable --code=HogeSpecialCustom
```

# ディレクトリ構造

以下のディレクトリとファイルが生成されている

```
├── composer.json
├── Controller
│   └── Admin
│       └── ConfigController.php
├── Entity
│   └── Config.php
├── Event.php
├── Form
│   ├── Extension
│   └── Type
│       └── Admin
│           └── ConfigType.php
├── Navi.php
├── Repository
│   └── ConfigRepository.php
├── Resource
│   └── doctrine
│       ├── messages.ja.yaml
│       └── validators.ja.yaml
│   └── template
│       └── admin
│           └── config.twig
└── TwigBlock.php
```
# プラグインパッケージ化
プラグインルートに移動

`$ COPYFILE_DISABLE=1 tar --exclude  ".git" --exclude ".DS_Store" -cvzf ../[PluginDir].tar.gz *`でパッケージ化

```
cd app/Plugin/[PluginDir]
$ COPYFILE_DISABLE=1 tar --exclude  ".git" --exclude ".DS_Store" -cvzf ../[PluginDir].tar.gz *
```

***
# 参考記事
`https://www.u2yasan.com/ja/content/20200624/89`
【Kotlin】定数で定義する

Kotlinの定数定義をする場合
## 結論
CompanionObjectを利用し、constを付けて定義する
```定義の方法.kt
class Hoge {  
  companion object {
    const val NAME = "hoge"
  }
}
```

## companion objectとは
クラス内では、objectキーワードの前にcompanion修飾子を付与することでクラスに属する**Singletonが作成**できる。これをcompanion objectと呼ぶ。

companion objectは**1クラス内に1つだけ宣言可能**。また、オブジェクト名は省略可能。
Laravelのバリデータ【個人的なお勉強アウトプット】

# 参考図書
https://www.amazon.co.jp/dp/B07CLLW4MX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

バリデーション機能はFormRequestに用意されている`validate`メソッドを使ってバリデーションが行われる。
validateはRequestインスタンスと検証ルールの引数を渡すことで自動的にフォームの値のチェックを行い問題があればGETのページにリダイレクトする。
例）コントローラでバリデーションを行う
```app/Http/Controllers/HelloController.php
public function post(Request $request){
$validate_rule = [...]
$this->validate($request, $validate_rule);
}
```
これは便利だが、場合によってはエラーがあったときにフォームページにリダイレクトせずに別の処理を行わせたい場合もある。
またフォーム以外の値でバリデーションチェックを行いたい場合もある。
その場合、バリデータは独自に用意して処理することも可能。
Laravelでは`Validator`というクラスとして用意されている。
```app/Http/Controllers/HelloController.php
use Validator;

public function post(Request $request){
$validator = Validator::make($request->all(),[
...バリデーションルール
]);

if($validator->fails()){
return redirect('/hello')
->withErrors($validator)
->withInput();
}
}
```
バリデータはValidatorインスタンスをmakeメソッドで作成することで使える。
第一引数には値の配列、第2引数にはルールの配列。
failsはValidatorクラスにあるメソッド。バリデーションチェックに失敗したらtrue。
成功パターンは`passes`メソッドがある。

redirectで指定のパスにリダイレクト。
`withErrors($validator)`でエラーメッセージをリダイレクト先で引き継げる。
`withInput`はフォームの値を引き継げる。
マルチディスプレイで快適tmux生活

マルチディスプレイでtmuxを開いて作業しているとき、あるセッションの中で開いている複数のウィンドウを別のディスプレイで表示させたいことがあります。

例えばまずは普通にtmuxを起動したとして:

```sh
$ tmux
```

その中でたくさんtmuxウィンドウを作ります。

そのウィンドウたちを別のディスプレイから同時に見たいときは新しいターミナルを開いて

```sh
$ tmux new-session -t 0
```

とやると最初に開いていたtmuxを別のターミナルから独立に操作可能になります。

これでマルチディスプレイでも同一のウィンドウグループを活用でき、複数のセッションに分けてごにょごにょする必要がなくなります。


※ 用語が紛らわしいのでこの記事内では以下のように統一:
- ウィンドウ: tmuxの用語としてのwindow
- セッション: tmuxの用語としてのsession
- ターミナル: デスクトップにおけるウィンドウに対応



参考:
- [TMUX - Single window group, multiple session.](https://gist.github.com/chakrit/5004006)
Laravelのフォームリクエスト【個人的なお勉強アウトプット】

# 参考図書
https://www.amazon.co.jp/dp/B07CLLW4MX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

フォームのバリデーションをコントローラに書くのもあまりクールではない。
Laravelにはバリデーションをまとめて処理できる「フォームリクエスト」という機能を用意した。
LaravelはクライアントからのリクエストはRequestクラスのインスタンスとして送られてくる。
このRequestを継承して作成されたのが「FormRequest」。これを利用することでフォームに関する機能をリクエストに組み込むことができる。
## フォームリクエストの流れ
①クライアントからのリクエスト
②フォームリクエストでバリデーション
③コントローラでの処理
④レスポンス

③で行っていたバリデーションを②でできる。

## フォームリクエストの作成
`php artisan make:request HelloRequest`
HTttp/RequestにHelloRequest.phpが作成される。
フォームリクエストは基本的に当該フォルダ内に配置。

## HelloRequestのコード
```HTttp/Request/HelloRequest.php
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class HelloRequest extends FormRequest
{
    
        public function authorize()
        {
            if($this->path() == 'hello'){
                return true;
            }else{
                return false;
            }
        }

        public function rules()
        {
            return [
                'name' => 'required',
                'mail' => 'email',
                'age' => 'numeric|between:0,150',
            ];
        }

        public function messages()
        {  
            return [
                'name.required' => '名前は必ず入力してください。',
                'mail.email' => 'メールアドレスが必要です。',
                'age.numeric' => '年齢を整数で記入ください。',
                'age.between' => '年齢は~150の間で入力ください。'
            ];

        }

}
```
### authorize
フォームのリクエストを利用するか否かのアクション。
trueで許可、falseで不許可

### rules
適用されるバリデーションの検証ルールを設定する。

### messages
エラーメッセージをオーバーライドできる

## アクションを修正する
```/app/Http/Controllers/HelloController.php
use App\Http\Requests\HelloRequest;

public function post(HelloRequest $request){
return view('hello.index', ['msg'=>'正しく入力されました！']);
}
```
メソッドの引数でフォームリクエストのクラスを指定。これでHelloRequestに設定した内容を元にバリデーションが実行されるようになる。
設計の超初心者がシーケンス図を書くときにつまずいたこと

## はじめに
本記事は設計の超初心者である筆者がシーケンスを書こうとしてつまずいたこと、そこから学んだことについて書いたものです。
「初心者、そんなところでつまずくの！？」と思われるかもしれませんが、広い心でご笑覧ください。間違っていたら教えていただけると幸いです。

## つまずき~何をライフラインにしたらいいの？~

仕事でシーケンス図を作成する機会があり、さっそくシーケンス図の書き方を調べて書くこととした。
当時のシーケンス図のイメージは「クラスAがクラスBのメソッドbを呼ぶとしたら、クラスAからクラスBに矢印を引いて、メソッドbというメッセージをつける」という程度。
書き方を調べた時もだいたいそんな感じのシーケンス図がよく見つかった。

しかし、自分が書くべきシーケンスには、インタフェースとその実装のクラスがあった。インタフェースだけでなく、継承関係にあるクラスもあった。拡張メソッドのクラスもあった。調べて出てきた例には当てはまらなさそうだ。

 **「クラスAがクラスBのメソッドbを呼ぶけど、メソッドbはクラスBのインタフェースに定義されてるから実際に呼ばれてるのはインタフェース？じゃあインタフェースをシーケンス図に書けばいいのかな？」**

 **「クラスCのメソッドcはクラスCにしかないけど、メソッドdはクラスCの基底クラスのクラスDにある、この場合クラスDもシーケンス図に書かないといけないのかな？」** 

 **「クラスEにはメソッドfっていう拡張メソッドがあるから、拡張メソッドを実装してるクラスFもシーケンス図に登場するよね、だってメソッドf呼ばれてるし。」**

上記の発想をそのままシーケンス図で表すと、以下のようになる。
![sequences_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/0fd135f2-7ac0-b885-8f4b-9ba1cb92a081.png)
確かにシーケンスに関わるクラスは全て登場しているが、ごちゃごちゃしていて読みづらく、設計の良し悪しが評価できるような状態ではない。

## ライフラインに書くべきはオブジェクトである

シーケンス図のライフラインで書くべきは何か。
そもそもシーケンス図とは、オブジェクトの相互作用を時間軸に沿って表現する図である。つまり、ライフラインに書くべきはオブジェクトであり、今回のようにクラス間の相互作用を書く場合には、クラスを具象化したものであるインスタンスを書くべきである。

つまり、
> 「クラスAがクラスBのメソッドbを呼ぶけど、メソッドbはクラスBのインタフェースに定義されてるから実際に呼ばれてるのはインタフェース？じゃあインタフェースをシーケンス図に書けばいいのかな？」
 
 
インスタンスになるのはインタフェースではなくその実装であるため、図に書くべきはクラスBのインスタンスBになる。

>「クラスCのメソッドcはクラスCにしかないけど、メソッドdはクラスCの基底クラスのクラスDにある、この場合クラスDもシーケンス図に書かないといけないのかな？」

実際のインスタンスの型はクラスCになる。図に書くべきはクラスCのインスタンスC。

> 「クラスEにはメソッドfっていう拡張メソッドがあるから、拡張メソッドを実装してるクラスFもシーケンス図に登場するよね、だってメソッドf呼ばれてるし。」

拡張メソッドも結局はクラスEにメソッドが追加されていることと同義であるため、図に書くべきはクラスEのインスタンスE。

そしてできあがったシーケンス図が以下である。
以前の図よりもクラス同士の関係がわかりやすくなった。
![sequences_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/4bb27589-9e14-3827-88b4-30b32c98f02d.png)
もちろん、設計の問題も見つけやすい。
図の中でいえば、メソッドfが複数回呼ばれているなど。

## でもクラス書きたいときもありますよね？
staticなクラスはインスタンス化できない。インスタンスでないものをシーケンス図にはどうやって表せばいいのか。
シーケンス図のルールとしては、下線がない場合はクラスを表す。
また、「：」の左側にはオブジェクトの名前を書く。オブジェクトの名前とクラスの名前はどちらか一方でもよい。

## おわりに
仕事でごちゃごちゃしたシーケンス図を作成してしまった経験から、この記事を書こうと思い立った。
「登場するクラスは全部書かなきゃ！」と思い込んで図の作成を行ってしまったが、不必要に複雑な図となり設計で議論したい部分がわかりにくくなってしまっていたうえ、そもそもシーケンス図の書き方からも外れたものになっていた。
シーケンス図に限らず、UMLを使うときは「何をその図で表現したいか」を考えて使うべきと学んだ。

## 参考
『実践UML パターンによる統一プロセスガイド 第2版(Craig Larman 著、依田 光江 訳)』
実はGRASPの学習のために購入した書籍。（以前の記事参照。）
第22回 レイヤ3 クラスフルアドレッシング

インターネットの管理者
---
論理アドレスは、ネットワーク管理者がつ
けるが、インターネットのネットワーク管
理者(管理団体)も存在する。インターネッ
トとは、前述した通り、多数のネットワー
クが統合化した最大のネットワークを指す。
その管理者をICANNという。

実際に、ネットワークの要望に従って割り振
るのは、各地域、各国に存在するNIC(Network 
Infomation Center)。※日本なら、JPNIC

ICANNはインターネットのIPアドレスを管
理するためにクラスという概念を用いる。


クラスとは
---
ネットワークの規模の分類をクラスと呼ぶ。
NICはネットワークの要望に従い、IPアドレ
スを割り振るわけだが、規模に応じてIPアド
レスを割り振る。その際に、クラスという概
念を用いて、規模ごとに区分する。
<table>
<tr>
<th>クラス</th>
<th>第１オクテット</th>
<th>第２オクテット</th>
<th>第３オクテット</th>
<th>第４オクテット</th>
</tr>
<tr>
<td>Ａ</td>
<td>ネットワーク番号</td>
<td colspan=3>ホスト番号</td>
</tr>
<tr>
<td>Ｂ</td>
<td colspan=2>ネットワーク番号</td>
<td colspan=2>ホスト番号</td>
</tr>
<tr>
<td>Ｃ</td>
<td colspan=3>ネットワーク番号</td>
<td>ホスト番号</td>
</tr>
<tr>
<td>Ｄ</td>
<td colspan=4>マルチキャスト用</td>
</tr>
<tr>
<td>Ｅ</td>
<td colspan=4>研究用</td>
</tr>
<tr>
</table>
[Table22-01:クラスフルアドレッシング表]

上記のように5パターン存在する。
<table>
<tr>
<th>クラス</th>
<th colspan=4>第１オクテット</th>
<th>10進数で表記した場合</th>
</tr>
<tr>
<td>Ａ</td>
<td>0</td>
<td colspan=3></td>
<td>0.x.x.x ～127.x.x.x</td>
</tr>
<tr>
<td>Ｂ</td>
<td>1</td>
<td>0</td>
<td colspan=2></td>
<td>128.x.x.x ～191.x.x.x</td>
</tr>
<tr>
<td>Ｃ</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td></td>
<td>192.x.x.x ～223.x.x.x</td>
</tr>
<tr>
<td>Ｄ</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>224.x.x.x ～239.x.x.x</td>
</tr>
<tr>
<td>Ｅ</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>240.x.x.x ～255.x.x.x</td>
</tr>
</table>

[Table22-02:クラスの識別]
具体的には、上図のようなビット数で管理さ
れ、第一オクテットの値によって、どのクラ
スか検討をつけることが可能。ネットワーク
番号が少ないほど、ホスト番号の種類が多く
なる、つまり多くのホストを所有するネット
ワークとなる。

<table>
<tr>
<th>クラス</th>
<th>規模</th>
<th>ネットワークの数</th>
<th>保有できるホストの数</th>
</tr>
<tr>
<td>Ａ</td>
<td>政府・国家機関・大企業</td>
<td>7ビット=128個</td>
<td>24ビット=16,777,216個</td>
</tr>
<tr>
<td>Ｂ</td>
<td>中規模企業</td>
<td>14ビット=16,384個</td>
<td>16ビット=65,536個</td>
</tr>
<tr>
<td>Ｃ</td>
<td>小規模企業・プロバイダ</td>
<td>21ビット=2,097,152個</td>
<td>8ビット=256個</td>
</tr>
</table>

[Table22-03:ネットワークの規模とクラス]
このようにクラスに応じてIPアドレスを割り
振る方式をクラスフルアドレッシングという。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602995/e869a759-476c-99a6-7f38-a09e1e3e5d74.png)


各ホストにIPアドレスを割り振るが、NICが
割り振るのはネットワーク番号まで。各ホス
トのIPアドレスは、そのネットワーク管理者
が割り振る。

ネットワークアドレス、ブロードキャストアドレス
---
IPはネットワーク番号とホスト番号の2種で
構成されているが、使ってはならないホスト
番号が存在する。

それが「ホスト番号のビットが全て0となる
アドレス」と「ホスト番号のビットが全て1
になるアドレス」。つまり、最初と最後であ
る。

クラスC192.168.10のネットワーク番号の場
合、以下の2つのことを指す。

<table>
<tr>
<th></th>
<th>ネットワーク番号</th>
<th>ホスト番号</th>
</tr>
<tr>
<td rowspan=2>ネットワークアドレス</td>
<td>110000001010100000001010</td>
<td>00000000</td>
</tr>
<tr>
<td>192.168.10.</td>
<td>0</td>
</tr>
<tr>
<td rowspan=2>ブロードキャストアドレス</td>
<td>110000001010100000001010</td>
<td>11111111</td>
</tr>
<tr>
<td>192.168.10.</td>
<td>255</td>
</tr>
</table>
[Table22-04:予約済みアドレス]

ホスト番号が全て0のアドレスは、
ネットワークそのもの(ネットワーク番号)を表す。

ホスト番号が全て1のアドレスは、
ネットワーク内にあるすべてのホストを表す。
ネットワーク内全員が受け取ることのできるアドレス。

参照URL：
<a href="http://www5e.biglobe.ne.jp/~aji/3min/">3分間ネットワーキング</a>
Laravelの@errorディレクティブ【個人的なお勉強アウトプット】

# 参考図書
https://www.amazon.co.jp/dp/B07CLLW4MX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

`@error`ディレクティブを使うとエラーメッセージの表示が簡単にできる。

```resources/views/hello/index.blade.php
@error('name')
<tr><th>ERROR</th></tr>
<tr><td>{{$message}}</td></tr>
@enderror
```
`@error('name')`だけでエラーの発生をチェックし`{{$message}}`だけでエラーメッセージを表示している。
docker registry

レジストリ作成
```sh
docker run -d -p 5000:5000 registry
```

レジストリ登録,レジストリを利用するための設定
```sh 
/etc/docker/daemon.json
{
  "insecure-registries" : ["<レジストリを作成した端末のIP>:5000"]
}
```

Docker プライベートレジストリからイメージ一覧情報を取得

イメージ一覧を取得
```shell
curl http://<my-registry>/v2/_catalog
```

イメージのタグを確認
```shell
curl http://<my-registry>/v2/<my-image>/tags/list
```


レジストリ活用
https://www.itmedia.co.jp/enterprise/articles/1708/25/news014.h

```sh
docker tag ubuntu:16.04 <レジストリを作成した端末のIP>:5000/ubuntu:16.04
docker push <レジストリを作成した端末のIP>:5000/ubuntu:16.04
docker pull <レジストリを作成した端末のIP>:5000/ubuntu:16.04
```
python標準ライブラリだけを使って、タブ区切りの数値のテキストファイルをリストに入れる


`panda`などのモジュールを使うのが一般的だが、そのようなものが使えない環境もある。
ここでは、pythonの標準ライブラリだけをつかって行う方法を述べる。

```input.txt
100	400	0	60
100	400	100	60
300	400	500	60
100	500	500	60
400	-500	-200	40
...
```

以下のようにリスト内包表記で書けばいい。
なお、ここでは、リストのリストとして扱っている。

```python
with open('input.txt','r') as f:
    fl = f.read().split('\n')

input = [fl[i].split('\t') for i in range(len(fl))]
input = [[ int(input[i][j]) for j in range(len(input[i]))] for i in range(len(fl))]

```
ミニマルな静的サイトジェネレーター「tanuky」を作ってみた

# Webサイトを作りたい
こんにちは、~~非リア系~~ Python大好き高校生のLaddgeです。  
今回は、Webサイト構築の手間を削減するために、SSG(静的サイトジェネレーター)を自作したので、それを紹介したいと思います。

なぜか僕は急にWebサイトを作りたくなったのですが、さて、どうやって作ろう。  
WordPressは構築が簡単だけど、データベース(MySQL)が必要なので鯖を借りる必要がある。  
そこで、最近注目されてるSSGを試してみようと思ったんです。

# SSGとは
まずは、SSGとは何なのか、何がすごいのかを説明します。  

SSGは、Static Site Generator の略で、「静的サイトジェネレーター」という意味です。  
「静的サイト」というのは、元々用意されているhtmlなどのファイルを返すだけのサイトのことです。  
つまり、SSGはWebサイトの元になるファイル群から、Webサイトとして公開されるファイルを生成するもの、ということです。  
意味がわかりませんね。(オイ)  

SSGと対をなすものとして、SSR (Server Side Rendering) が挙げられます。  
こちらは、「動的サイト」を作るのに使われます。  
WordPress などもこれに含まれます。  
こちらは、閲覧者のリクエストに応じてその場でページが生成されます。

つまり、SSGとSSRではサイトが生成されるタイミングが違うというわけです。

では、それぞれのメリット・デメリットを比較してみましょう。

||SSG|SSR|
|-|-|-|
|メリット|・ページの表示が早い<br>・サーバーがいらない (Github Pagesなどで公開できる)<br>・データベースがいらないのでセキュリティが強い<br>・git管理が楽|・表現力豊か<br>・非エンジニアでも扱いやすい<br>・アップロードやコメントなどの機能をつけられる|
|デメリット|・表現力に制限アリ<br>・非エンジニアには難しい|・サーバーやデータベースが必要<br>・セキュリティが比較的弱い<br>・読み込みが重くなることがある|

こんな感じで、どちらにもそれぞれの良さがあります。  
全体的に、SSGは小規模、SSRは大規模なサイト向きだと思います。

# 有名なSSG
世の中でよく使われいるSSGとして、

* Hugo
* Jekyll
* Nuxt.js

などが有名です。  
これらは本当によくできていて、静的サイトなのに検索ができたり、めちゃくちゃかっこいいテーマが用意されていたりと、めっちゃ便利です。

じゃあそれ使えばいいじゃんって思ったかもしれません。  
ところが、僕みたいなわがままなアホには、これらのSSGは高機能すぎるんです。  
学校の文化祭のホームページとか作りたくて、そのためにイチから設計したくなったんです。

「しゃあねぇ、大好きなPythonでSSG作るか、、」

# SSGの作り方
SSGとして最低限必要な機能は、ソースからページを生成する機能です。  
ソース…… おいしそうですね。  

多くのSSGでは、MarkDownとテンプレートをもとにページを生成するという手法をとっています。  
MarkDownについての説明は~~めんどいので~~割愛します。  
今回は僕もこの手法を使おうと思います。  

そして、次が今回僕が作るやつの画期的なところです。  
他の一般的なSSGは、決まったディレクトリにMarkDownのファイルを配置して、そのディレクトリに応じてテンプレートが選択され、HTMLが生成されるのですが、ここをもっと自由にしたい。

そこで、ソースコードを入れておくディレクトリに、生成後と全く同じディレクトリ構造でファイルを置くようにしました。  
どのテンプレートを使うかは、MarkDownの中で指定しちゃおう。  
これで、どんなサイトにも対応できます。

あとはまあ適当にプログラミングして、できました。

# 完成品
完成品をGithubで公開しました。  
ぜひ使ってみてください。

https://github.com/laddge/tanuky

# 使い方
ここに書くと長くなるので、GithubのREADMEを読んでください。

# 感想
今回これを作ってみて、改めて既存のSSGの凄さを思い知りました。  
勉強します。
【一分理解】pythonでexcelを操作しよう

## pythonでexcel操作をしよう！
### こんな時に使える
・大量のExcelを管理するとき
・excelに保存したデータでpython動かしたい時

#### 流れ
excelファイルを読み込む
```python
file = openpyxl.load_workbook("ファイルのパス")
```

中身をいじる
●シート操作
```python
    sheet = file['Sheet1']

    file.create_sheet()  # シートを新規追加
    file.create_sheet(index=0, title='new_sheet')  # 指定の場所にシートを新規追加
    file.create_sheet(index=2, title='new2_sheet')  # 指定の場所(2番目)に名前を付けてシートを追加
    del file['new_sheet']
```


●セル操作
```python
    # A1セルを取得
    cell_a1 = sheet['A1'].value

    # 各セルに値(数式)をセット
    sheet['A2'] = 300
    sheet['A3'] = '=SUM(A1:A2)'  # 数式を適用

    # 列の挿入
    sheet.insert_rows(7)

    # 最終列に値を追加
    sheet.append(["こんにちは", "こんばんは"])
```
●保存を忘れずに
```python
    file.save("保存先のパス")
```

サンプルソース
[MyGitHub](https://github.com/yamuyum/python-Basic/blob/main/src/excel_operation.py "yamuyum/python-Basic")
新規プロジェクト

# 新規プロジェクト
![スクリーンショット 2022-03-22 12.05.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604562/5693b570-aa71-7b8c-04a3-22401d4d6b36.png)
i18nを使って多言語対応をしてみよう

# 目次
1. はじめに
1. i18nとは？
1. 実際にi18nを使って、言語設定によって表示を変えてみよう
1. まとめ
1. 参考

# はじめに
外国人向けのサービスやホテルなどのホームページで、
ユーザーの言語に応じて画面の表示言語を英語や中国語にしたい時はありませんか？

Visualizerではi18nという国際化対応のツールが入っており、
言語に応じた実装が可能となっています。

今回は、i18を使用する際の使用方法について
実際の実装方法も交えながらご紹介していきます:runner_tone3:

# i18nとは？
まず、i18nとは何か簡単にご説明します！

- 様々な言語や地域に対応できるようにアプリケーションを設計・開発することを国際化といい、i18nとも呼ばれています。
- V9 SP1 GA から、Quantumは Google 翻訳がサポートするすべてのロケールに対応しました。
- Visualizerが直接サポートしていないロケールについては、
内部で Google 翻訳を利用して翻訳し、カスタムロケールとして追加しています。
- Visualizer は、ヘブライ語とセルボ・クロアチア語を除き、
Google 翻訳でサポートされているすべてのロケールに対応しています。

i18nの設定を行うと、
以下のように端末の言語設定に応じた多言語対応の表示が可能となります！
![ezgif-2-1f6b6d9650.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/67622de7-a6c0-f826-bd85-f5ece98618ec.gif)

早速、実際に実装をしながら、i18nの使い方を学んでいきましょう😊

# 実際にi18nを使って、言語設定によって表示を変えてみよう
## ロケールの作成
1. 左サイドメニューの歯車マークをクリックし、ProjectSettingsを開きます。
1. [Application]内の[Internationalization(i18n)]下にある[Enable]にチェックを入れましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/019f0a35-1087-6050-6f27-b927a15acdf4.png)
1. [Configure]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e5a1e191-170f-cfd3-6e9d-a485bc87f175.png)
1. [Configure Locales]ボタンをクリックすると、
ロケールを選択する画面が表示されるので、対応したいロケールにチェックを入れます。
今回は、日本語と英語を選択しました。
![スクリーンショット 0004-07-04 14.08.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c0e0a6b4-feb8-f37a-4761-190795017a72.png)
1. ロケールの設定が終わったら、言語キーに応じた値を入力していきます。
英語の場合、「Hello!」、日本語の場合「こんにちは！」と表示するよう設定しました。
![スクリーンショット 0004-07-04 14.08.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e72b5ee2-140b-1ad5-b8e7-0720d6597e28.png)
1. 最後に[Default Locale]にデフォルトで表示したい言語を設定します。
![スクリーンショット 0004-07-04 14.08.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/51a9f87a-ff0c-a092-96dc-409751f40b5f.png)


## キーを設定
次に言語設定によって表示を変える対象の文字にキーを設定していきます。

今回は、「こんにちは」の表示を変えたいので、
対象のWidgetを選択した状態で右メニューの[Text i18n Key]から、
先ほど設定したキーを選択したら完了です！
![スクリーンショット 0004-07-04 14.09.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b0762c94-9cd9-4099-442d-a6b0766df6a8.png)

早速、動作を見ていきましょう！

![ezgif-2-1f6b6d9650.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/786e8641-bc58-25a2-4571-ea117b13510b.gif)

デフォルトの言語設定は、日本語になっているため、
最初は日本語で「こんにちは！」と表示。
その後、言語設定を英語に変更すると、
「Hello!」に変更になったことがわかりますね！

ロジックを追加することなく、多言語対応ができてとっても便利ですね:ok_hand_tone1:

# まとめ
今回のまとめです！

- 多言語対応を行う場合は、i18nという機能が使える
- 設定を行う場合は、Project Settingから行うことができる

その他、ボタンによる切り替えで多言語対応を行う方法は以下記事も参考になります。
公式ドキュメントとあわせて確認してみて下さいね！
▶︎[Konyで端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法](https://qiita.com/Kony_Team/items/169ba5a883c7808751d7)

# 次の記事
次からは、ついに第4章でバックエンドサービスのFabricを使用していきます！
折り返し地点なので引き続き頑張っていきましょう！

▶︎[Fabricでどんなことができるか？](https://qiita.com/Kony_Team/items/540996aa24fc17fd7b2f)

記事一覧：https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

# 参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Internationalization.htm

https://qiita.com/Kony_Team/items/f71fcc3428d7b32c8120

https://qiita.com/Kony_Team/items/169ba5a883c7808751d7
【mocha】beforeEach()・afterEach()とは

**Mocha**で``beforeEach()``/``afterEach()``について調べたのでメモしておく。合わせて``before()``/``after()``についてもメモしておく。
これはどちらもテストを実行する前後で行う処理を記述できる機能であり、初期化などに利用される。

# before()/after()
テストプログラムを実行する最初または最後に一回だけ実行される関数を設定できる。
もし``describe``の中に記述した場合は、``describe``の最初または最後に一回だけ実行される関数を設定できる。

```javascript
before(() => {
    // 処理内容
});
```

# beforeEach()/afterEach()
全ての``it``の最初または最後に一回だけ実行される関数を設定できる。
もし``describe``の中に記述した場合は、``describe``の中の全ての``it``の最初または最後に一回だけ実行される関数を設定できる。

```javascript
beforeEach(() => {
    // 処理内容
});
```

# 実行順序
上記のことから実行順序は以下のようになる。
① **before()**
② **beforeEach()**
③ テストコードの実行
④ **afterEach()**
⑤ **after()**
【HTML】スタイルシートの構文２

## 固定スタイルシート
常に適用させるスタイルシート。優先スタイルシートから代替スタイルシートに切り替えても、固定スタイルシートは適用される。
title属性を指定しないことで、固定スタイルシートとなる。

~~~html
<style>
 スタイル情報
</style>
~~~

## 優先スタイルシート
ページ読み込み時に、優先的に適用されるスタイルシート。
title属性を指定したstyle要素のうち、最初に現れたstyle要素のtitle属性値が、優先スタイルシートのグループ名となる。
同じグループ名のスタイルシートは、同時に適用される。

~~~html
<style title="優先タイトルシートのグループ名">
 スタイル情報
</style>
~~~

## 代替スタイルシート
優先スタイルシートの代替となるスタイルシート。ページ読み込み時には適用されず、ユーザーがブラウザを操作し、スタイルシートを切り替えたときに適用される。
title属性を指定したstyle要素のうち、優先スタイルシート以外のstyle要素のtitle属性値が、代替スタイルシートのグループ名となる。
同じグループ名のスタイルシートは、同時に適用される。

~~~html
<style title="代替スタイルシートのグループ名">
 スタイル情報
</style>
~~~

## 参考サイト
* [HTML5入門](http://html5.cyberlab.info/elements/metadata/style-title.html)

## 最後に
間違っている点がありましたらご指摘お願いします。
azure vue static web app cicd



# 1.vue project作成
auzreの　Devopsで、vueプロジェクト(vue-cicd)を新規作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604377/81f2d9c4-caf9-a207-6dd2-86335a7a5b28.png)

# 2.ローカルで、vueプロジェクトを取得する。

git cloneで、vue-cicdを取得する。パスワードの入力する必要がある。
```common_lisp
git clone https://xxxx
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604377/85a20e0a-230c-5c49-34ea-2f85844ff026.png)

# 3.vueプロジェクトを作成する。
```common_lisp
vue create vue-app
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604377/4ffc2c74-78fd-ee4e-adf3-48ba4eed13ef.png)

# 4.プロジェクトをプシューする。
```common_lisp
git add .
git commit -m "init project"
git push
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604377/7aa790ca-a8a5-7569-5ec9-a03e6c00b2f0.png)

# 5.静的 Web アプリを作成する。
デプロイの詳細について、「その他」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604377/880870b6-09d2-1941-0840-6b06eca4c3f4.png)

# 6.デプロイ トークンを取得する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604377/6e898a82-6d14-05fb-679f-148f85eedd46.png)

# 7. yamlを作成する

repos→files→set up build→starter pipeline
下記の内容を書き換える。
```yml
# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml
trigger:
  - master
pool:
  vmImage: ubuntu-latest
steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/vue-app'
      azure_static_web_apps_api_token: $(deployment_token)
```
deploy tokenを書き込む。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604377/76e9bdde-fec3-2d29-9200-45f6603b8615.png)


完了
Node-REDでLED ON/OFF制御

#__目的__
スマートフォンで、簡単にLEDのON/OFF制御を行いIoTにふれる。

#__目次__
1. 電子部品リスト
2. Raspberry Piの配線図
3. Raspberry Pi　Node-RED
4. 動作映像


#__１.電子部品リスト__
|名称|備考|
|:----:|:---:|
|Raspberry Pi|第4世代|
|LED|青色・赤色・緑色|
|抵抗　150Ω|３個|
|ジャンパワイヤ　オスーメス|３本|


#__２.Raspberry Piの配線図__
配線図は以下の通りになっています。

![ラズベリーパイGPIO.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/2e1a61d9-eaf6-33a5-92c9-794baffd1e71.jpeg)

![回路図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/16069adc-e06a-f564-5162-fe41e2725181.jpeg)

LEDの足には極性は、長い方をアノード（<font color="red">＋</font>）、短い方をカソード（<font color="blue">－</font>)
Raspberry PiとLEDの回路図

|Raspberry Pi|LED|
|:----:|:---:|
|6|GND|
|11|青色|
|13|赤色|
|15|緑色|


#__３.Raspberry Pi　Node-RED__
※Raspberry PiにNode-REDをインストールしてある状態で説明していきます。
__Node-REDの画面__
![Node-red.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/7cdc818c-5213-5909-b1d7-0cff59a5bac1.jpeg)

__Node-REDの画面、左下からSwitchとrpi-gpio out__

![スクリーンショット 2022-03-16 233531.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/67627a5f-8e25-1d2a-d628-a5b28f2a4af7.jpeg)

__Switchとrpi-gpio outをそれぞれ接続を行います。__
![フロート.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/9af940ce-2a31-e412-b880-ed48777a48ed.jpeg)

__Node-redでLED ON/OFF制御画面__
スマートフォンなどでRaspberry PiのIPアドレスにアクセスを行うと以下の画面が表示されます。
![S__29360130.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/7bf8107d-50b0-209f-64c1-087937bf4548.jpeg)


#__４.動作映像__
[![IMAGE ALT TEXT HERE](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/b8aa418d-afc4-ef05-22ab-ef4a16f51057.jpeg)
](https://youtu.be/uQT353j6pIM)
春から大学生（情報・工学）の方へ～プログラミング入門5～（買ったPCの設定）

# 対象読者
以下の記事を読んでいただいた方
https://qiita.com/HaaSAtC/items/490d066bdbec8441a2f6
https://qiita.com/HaaSAtC/items/2687eef10dba08432a19
https://qiita.com/HaaSAtC/items/4c114712a8f4400ef7ad
https://qiita.com/HaaSAtC/items/caf4998744044900e97f
<font color="red">かつ</font>、初めて自分のパソコンを持ったので<font color="red">まだ慣れていない方</font>

# なぜPCの設定をいじるべきなのか
当然と言えば当然ですが、通常パソコンは、買ったばかりの状態だと開発者（プログラマー）用の設定にはなっていません。当然ながら、使いやすい状態にするために自分でいじる必要があります。私が使っているのがWindowsなので、<font color="red">Windowsを例にして解説したいと思います。</font>
(Windows11だと少し違うかもしれません。ごめんなさい)

# エクスプローラー（ファイル管理アプリ）でファイルの拡張子を表示する
Windowsキー（左下のほう）とEを同時に押してください。
黄色と青色のファイルアイコンが開いたと思います。
左上「表示」ー＞右上「拡張子ファイル名」にチェックを入れてください
ファイルの種類を表す「拡張子」を表示するモードになりました。
（「隠しフォルダ」にもチェックを入れておいてもいかもしれません）

# 「タスクバー（画面下）」によく使うアプリを表示する
ChromeやfirefoxなどのWebブラウザ、オンライン授業で使うZoomやMicrosoft Teams、エディタやIDEなど、よく使うアプリをインストールした際には、画面左下のWindowsマークから対象のアプリの上にカーソルを合わせ、右クリックで「タスクバーにピン止め」を選んでください。画面の下側にアプリのショートカットが固定されます。
（TwitterやLINEなどもインストールしておくと、スマホで使っているアカウントをパソコンでも見られて便利です）
タスクバーのアプリはWindows+数字で開くことができます

# Webブラウザ
以下はこのページなどを使って試してみるとよいと思います
## ショートカットを覚える
プログラミングをするうえで、文法を調べることは大切です。
多くの場合、ターミナルに表示されたエラーメッセージをそのままコピペして検索したり、公式ドキュメント（Javaならオラクル社のサイトなど）を探して正しい文法を確認すると思います。以下は、そんな時に使うと便利であろうショートカットです。
（Chrome版、ほかのブラウザでは違うかも）
Ctrl+F 開いているページ内で見つけたい単語を探す
       ポップアップが開き、検索ボックスが出てきます。
　　　　閉じるときはEscを押してください。
　　　　エディタやIDEでも使える場合があります。
　　　　（VSCodeではCtrl+Hで置き換えもできる）
以下は日常的に使うであろうショートカットです。
Ctrl+T 新しいタブを開く
Ctrl+Shift+N 履歴の残らないタブを開く
Ctrl+F4(W) 今開いているタブを閉じる
Ctrl+Shift+T 先ほど閉じたタブを開く
Ctrl+数字 左から〇番目のタブに移動する
Ctrl+Tab 右隣のタブに移動する
Ctrl+Shift+Tab 左隣のタブに移動する
Alt+← 直前のページに戻る
Alt+→　上の逆です（説明がめんどくさいw）
Ctrl+R ページを再読み込み
Ctrl+D 今開いているページをブックマークに登録する（大学の授業で使うサイトなどを登録すると便利です）
Ctrl+H 閲覧履歴を表示する（閉じてしまったけどまた見たいページをさかのぼって探す用、PCが重い時には履歴を削除すると軽くなるかも）
Ctrl+N 新しいウィンドウを開く
Alt+F4 ウィンドウを閉じる
Alt+スペース ウィンドウのサイズ変更（最大化・最小化）など
Tab （Googleフォームなどで）次の入力欄（ボタン）に移る
Shift+Tab 前の入力欄（ボタン）に戻る
Caps Lock 英字<->かな
Shift+Caps Lock 英字を常時大文字にする
<font color="red">
※基本と言えば基本ですが、コピペや切り取り、保存などもググって覚えておきましょう
</font>

# アプリ・ウィンドウの操作に関するショートカット
Alt+Tab もしくは Windows+Tab 開いているアプリ間で移動する
Alt+F4 ウィンドウを閉じる
Windows+(←/→) ウィンドウを左右に分割する

# Windowsの設定
左下のWindowsマークから歯車アイコンを探す
or
Windowsキー+I

# デスクトップを表示する
Windows+M(or D)

# シャットダウンなどのショートカット
デスクトップでAlt+F4
↑↓で選んでEnter

# 最後に
読んでいただいてありがとうございました
そのほかにもプログラミング初心者がいじるべき設定等ございましたら、ぜひコメント欄でご教示ください

次回

https://qiita.com/HaaSAtC/items/de8d5d56e5eda50f9b1a
事前条件と事後条件について調べたメモ

[ノート:契約プログラミング - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%8E%E3%83%BC%E3%83%88:%E5%A5%91%E7%B4%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

に貼られていた資料を読みつつまとめていく。

[ET: Design by Contract (tm), Assertions and Exceptions](https://www.eiffel.org/doc/eiffel/ET-_Design_by_Contract_%28tm%29%2C_Assertions_and_Exceptions)

> The client's obligation, which protects the supplier, is called a precondition. It states what the client must satisfy before requesting a certain service. 

クライアントの責務は、サプライヤーを保護するためのものですが、これはpreconditionと呼ばれます。クライアントが特定のサービスを受ける前に満たすべきことについて記述されています。

> The client's benefit, which describes what the supplier must do (assuming the precondition was satisfied), is called a postcondition.

クライアントの利益は、サプライヤーがしなければならないことを示していますが(preconditionを満たすことを前提としています)、これはpostconditionと呼ばれます。

---

>Object-Oriented Software Construction
>Bertrand Meyer
>http://se.inf.ethz.ch/old/teaching/ss2004/0250/lectures/oosc_09_design_by_contract.pdf
>
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94177/72053785-b600-fbb4-2c61-ac31e1c66699.png)

---

>[契約に基づくプログラミング - cpprefjp C++日本語リファレンス](https://cpprefjp.github.io/lang/cpp23/contract-based_programming.html)
>
>契約は属性として記述する。C++20では、次の3つの契約属性が導入された：
>
>- [[expect: 述語]]：関数に入る際に期待する事前条件を定義する。
>- [[ensure: 述語]]：関数から戻る際に期待する事後条件を定義する。
>- [[assert: 述語]]：アサーションを定義する。


例えば動作条件は事前条件に該当して、得られる効果は事後条件に該当するのだろうか。
{"exception":"[object] (Symfony\\Component\\Debug\\Exception\\FatalThrowableError(code: 0): Call to undefined function GuzzleHttp\\Psr7\\stream_for() 

gcpを使っていたら以下のエラーが

```
Call to undefined function GuzzleHttp\\Psr7\\stream_for()

{"exception":"[object] (Symfony\\Component\\Debug\\Exception\\FatalThrowableError(code: 0):
Call to undefined function GuzzleHttp\\Psr7\\stream_for()
```

対策

```
composer require guzzlehttp/psr7 "^1.8.2"
composer update guzzlehttp/psr7 "^1.8.2"
```

上記で guzzle をアップデートしよう。
.envファイルについて

# はじめに
アプリ制作を進める中でよく分からず.envファイル使用していたのでこちらについて調べて見ました。

# .envファイルとは
環境変数を書きことができるファイルのことです。
こちらを使用することで、開発環境と本番環境を切り替えたり、データベースなどの接続情報の変更を行うことができます。
例えば開発環境では簡易的に利用できるsqliteのデータベースに接続し、本番環境ではmysqlのDBに接続といった変更が可能です。

# 環境変数とは
全てのプログラムで一緒に使える値を入れておく箱のことです。
例えば、アプリのフォルダーの直下に.envファイルに環境変数を書き込めば、そのフォルダー内で環境変数が扱うことができます。

# Railsで.envファイルを使用する場合
Gemfileに以下を記述

```Gemfile
gem 'dotenv-rails'
```

gemを　インストール

```bash
$ bundle install
```
こちらを使用することで、プロジェクト毎に環境変数が扱えるようになります。
# 使用例
簡単ではありますが、使用例を紹介します。
```
.env

本番環境
RAILS_ENV=production 

開発環境
RAILS_ENV=development

データベースのユーザー名
DATABASE_USER=ユーザー名

データベースのパスワード
DATABASE_PASSWORD=パスワード
```

```
config/database.yml
default: &default
username: <%= ENV.fetch("DATABASE_USER") %>
password: <%= ENV.fetch("DATABASE_PASSWORD") %>

development:
  <<: *default

production:
  <<: *default
```
#　まとめ
間違えがあったらコメント下さい。
【Power Apps】リンク付きラベルにマウスオーバーしたときに文字色を変える

リンクのついたテキストにマウスオーバーしたら👆ポインタ表示できないか、というお題を受けて
それっぽいことができないか検索しましたがそれっぽい記事はHITせず、フォントで対応しました。


## 参考にした記事


https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/controls/control-shapes-icons


https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/controls/control-text-box


## 番外


コルネさん（https://twitter.com/koruneko32767） のように背景色も利用した制御もできるようです

https://koruneko.hatenablog.com/entry/2019/06/06/011155#マウスホバーで反応するラベル
AWS Cognito ロックアウトの条件を調べてみた

### ロックアウトとは
ログインに連続して失敗した場合、一時的または永久的にアカウントを使用できないようにする仕組みです。
Cognitoにはデフォルトでロックアウト機能が存在します。

### Cognitoロックアウトの仕様

- ログインの試行回数は5回まで許容される（６回失敗でロックアウトする）
- 最初のロックアウトの時間はわずか1秒。ロックアウト解除後に再度ロックアウトすると、ロック時間は指数関数的に最大15分まで倍増する。
- 一時的なロックアウト中にログインを試みても無視されるため、その間は新しいロックアウトは開始されない。
- ログインを試行せずに15分待つと、一時的なロックアウトはリセットされる。
- パスワードリセットをしても、ロックアウトはリセットされず、ロック時間を待機する必要がある。

※ この仕様はAWS側都合により変更される場合があります。

### ロックアウトの仕様をカスタムすることはできるのか

結論から言うと、、、今のところ「できない」です。
（実際にAWSに問い合わせてご回答いただきました。今後できるようになる可能性も...?）

※ロックアウトの仕様をカスタム：◯回間違えると◯時間ロックアウトされる。

### 参考記事
https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/amazon-cognito-user-pools-authentication-flow.html
Python環境構築 M1 MacでHomeBrewを使ってライブラリのインストールをする

今回は短いです。
本当に短い。
なぜこのテーマにしたかというと、M1 MacのVisual Studio Codeで機械学習とか形態素解析を使用した自然言語処理のプログラムを久々に組もうかなと思いまして。(表現合ってる？笑)
MacでPythonってあまり動かした経験がないのでどんなものかなと。
ちなみにインストールしたライブラリ(HomeBrew関係なく)は以下です。
- MeCab
- Scikit-Learn
- Pandas
- TensorFlow

とか色々ですね。
pipコマンドでインストールできるものもあれば、今回のテーマのようにHomeBrew経由でないと難しいものもあります。

本題行きますか。
※HomeBrewがインストールされている前提です。

# HomeBrewを使ってライブラリをインストールする
基本的にHomeBrewでのライブラリのインストールは以下のコードになります。

```brew:通常(intel CPU)のMacでのライブラリのインストール方法
brew install [ライブラリ名]
```
M1 Macではこれでインストールするとエラー起こすんですね。
英語ができる方は読めばわかる内容だったりするのですが、コンソールには「M1 Macでのインストールはこうしてくださいね」みたいなことが明記されています。
とりあえずググってエラー解決するタイプの方のためにご紹介します。

# 「M1 Macで」HomeBrewを使ってライブラリをインストールする
これがM1 Macだとどうなるか
ということで↓

```brew:M1チップ搭載Macでのライブラリのインストール方法
arch -arm64 brew install [ライブラリ名]
```

ご覧の通り、少しコマンド？オプション？が増えます。
一度覚えてしまえば「あーそういえばあれ必要だったな」という感じなのでぜひ覚えておいてください。
ちなみにコンソールのコマンドやオプションには詳しくないので、機会があれば記事にしてみたいと思います。
プログラムを動かす上で最低限の知識しかない…笑

# 終わり
M1 Macに限らずzshとかbashとか何が違って、どうして混在しているのかわからない…
たしかLinux系OSもありましたよね…？(Linuxはラズパイで触ってみたいと思ってます)
WindowsのコマンドプロンプトやPowerShellも同じように思っています。
PowerShellはコマンドプロンプトのコマンドは大体使えるようですが…
勉強します〜
それでは。