OmniAICreator/Qiita-1.07M huggingface dataset:
AWS CloudShell を翻訳CLIとして使う


# TL;DR

動画のとおりAWS CloudShellを対話翻訳器にするコマンドです。CloudShellおじさんと呼ばれたかっただけの小ネタです。
![CloudShellでTranslateCLI.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/d567629f-0cb2-4547-4f74-777c96983d24.gif)

# AWS CloudShellとは

https://aws.amazon.com/jp/cloudshell/

AWS re:Invent 2020で発表された管理コンソールから無料で使えるCLIコンソールです。

[参考：Amazon Web Services ブログ AWS CloudShell – AWS リソースへのコマンドラインアクセス](https://aws.amazon.com/jp/blogs/news/aws-cloudshell-command-line-access-to-aws-resources/)

AWS CloudShellは管理コンソールの上の">"ボタンをおすと現れるWebUIのターミナルシェルです。
印象としては「デフォルトで用意されているちっちゃいCloud9」です。ただし、違いもあって、CDE的な機能はないし、EC2の管理画面をみてもCloudShell用のEC2インスタンスは見つからない。いまのところVPCの外で動いて管理コンソールのIAM User権限でAPIを叩ける見えない無料インスタンスといったところ。

ウィンドウペインは縦、横、タブに分割可能。ActionsにFile UploadがあるのはCloud9同様。pwshとzshが利用可能。リージョンあたり 5セッションまで同時利用可能。
![CloudShellでTranslateCLI-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/8919a663-dcea-04d9-4a9b-aaf5a3d8bcc6.jpeg)

揮発性のインスタンスではなくて、1GBのディスクスペースは永続的に維持されます。1GBの永続ストレージは/homeだけなので注意(シェルのワークエリアとして別に15GBが確保されている)。yumなどでのインストールも$HOMEヘのみ可能とのこと。
![CloudShellでTranslateCLI-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/f1ea1cb3-048c-29b6-9743-ea04cf751c09.jpeg)

# CloudShell上で翻訳するワンライナー

すぐにマネコンから開けるCLIができました。そうなると手元の作業はCLIで済ませたくなるのが人情。というわけで、AWS CLIのワンライナーで対話的に日英の翻訳をするシェルエイリアスを作りました。`transe2j`が英語から日本語、`transj2e`が日本語から英語です。プロンプトに翻訳元文書を入力すると日英翻訳してくれます。Ctl-Cで終了です。

## 実行例

実行例はCloudShellを立ち上げて、コマンド叩くだけのこんな感じです。

```bash
[cloudshell-user@ip-10-0-97-xxx ~]$ transe2j
English> It translates strings from English to Japanese interactively.
英語から日本語に文字列を対話的に翻訳します。
English> Hello, how are you?
こんにちは、元気ですか？
English> ^C

[cloudshell-user@ip-10-0-97-xxx ~]$ transj2e
Japanese> このコマンドは日本語から英語へ翻訳します。
This command translates from Japanese to English.
Japanese> 今日はいい天気ですね。
It's nice weather today.
Japanese> ^C
[cloudshell-user@ip-10-0-97-xxx ~]$ 
```

## 設定方法

~/.bashrcの末尾に以下の4行を追加してCloudShellを開きなおしてください。

```bash
# Amazon Translater CLI
export LANG=ja_JP.UTF8
alias transe2j='while true;do echo -n "English> ";read STR; aws translate translate-text --source-language-code "en" --target-language-code "ja" --query 'TranslatedText' --output text --text "$STR";done'
alias transj2e='while true;do echo -n "Japanese> ";read STR; aws translate translate-text --source-language-code "ja" --target-language-code "en" --query 'TranslatedText' --output text --text "$STR";done'
```

実行するIAM Userには`arn:aws:iam::aws:policy/TranslateFullAccess`権限が必要です。

## 解説

翻訳はAWSの翻訳サービス「Amazon Translate」をAWS CLIから呼び出しています。Amazon Translateには「リアルタイム翻訳」機能があり、管理コンソールから最大5,000文字までの文章を翻訳することができます。

![スクリーンショット 2020-12-20 16.28.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/5a489a07-36e7-5232-13c1-adeef13b3df8.png)

これをCloudShell上のAWS CLIで対話的に呼びだしています。TranslateはUTF-8が前提なので、LANG環境変数を設定しています。
ぶっちゃけCloudShell上でなくてもローカルからでも同じシェルで動作します(^^; 。

# 参考

[AWS CloudShell](https://aws.amazon.com/jp/cloudshell/)
[Amazon Translate : AWS CLIをつかった利用開始方法](https://docs.aws.amazon.com/ja_jp/translate/latest/dg/get-started-cli.html)

良いお年を！
JavaScript,13,Number,String,初心者向け

型（type）とは？JavaScriptにおける型の紹介と扱い方、型変換の方法について紹介！


Number（数値）型
String（文字列）型

1000と打ち込んでも数値の1000と文字列の1000は別物

文字と数値を足すと1000 + 1000 は

10001000

になる

文字列を数値にするには

textContentから取ってきたものは文字列になる
カーソルを合わせるとStringって出てくる

inputが要素だとして

何型か調べるには
Console.log(typeof input)

数値に変換するには
input = Number(inpput)
（　）の中に変換したいものを入れると変わる
【JavaScript】HTTPRequestの送信方法

#プログラミング勉強日記
2020年12月20日
httprequestをちゃんと理解していなかったのでまとめる。

#Ajaxとは
　Asynchronous JavaScript and XMLの略で、JavaScriptで非同期に通信をすることである。通信には言語であるXMLだけでなく、HTMLやJSONといったデータフォーマットの様々なデータが通信できる。JavaScriptは非同期的なデータの送受信とHTMLの内容を動的に変更することができる。なので、ページを再読み込みすることなく最新の情報を提供できる。

#HTTPRequestとは
　HTTPという通信プロトコルのリクエストのことで、簡単に言うと通信の種類にHTTPの規格を使って要求を出す。非同期なデータの通信を実現するためのAPIである。

　HTTPRequestの送信方は、JavaScriptで用意されているHTTP通信の操作を簡単に行えるFetchというAPIを使う。

#HTTPRequestを利用してサーバーに要求する
　fetchメソッドの引数にURLを渡すことで、そのURLの通信を行う。

```
const URL = 'https://hogehoge';

fetch(URL)
.then( response => response.json() )
.then( responseData => console.log(responseData) );
```

#参考文献
[XMLHttpRequest について](https://hakuhin.jp/js/xmlhttprequest.html)
[JavaScriptによるhttprequestの送信方法について現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/49325)
DockerでWildFlyを試す

[同じ内容をZennにも投稿しました。](https://zenn.dev/backpaper0/articles/try-wildfly-with-docker)

---

[WildFly公式イメージ](https://hub.docker.com/r/jboss/wildfly)がDocker Hubで公開されているので、これを使ってWildFlyを試します。

## 起動

次のコマンドで起動できます。

```
docker run -d --name demo -p 8080:8080 -p 9990:9990 \
    jboss/wildfly /opt/jboss/wildfly/bin/standalone.sh \
    -b=0.0.0.0 -bmanagement=0.0.0.0
```

`8080`はアプリケーションを公開するポート、`9990`は管理コンソールのポートです。

スタンドアロンモードで起動しているので`/opt/jboss/wildfly/bin/standalone.sh`を使用しています。
ドメインモードで起動するなら`/opt/jboss/wildfly/bin/domain.sh`です。

起動オプションに`-b=0.0.0.0`を付けていますが、これがないとコンテナ外から接続できません（つまり`http://localhost:8080`で接続できない）。
`-bmanagement=0.0.0.0`も同様で、こちらは管理コンソール用のオプションです。

起動ができたら管理ユーザーを追加します。
次のコマンドでユーザー名が`admin`、パスワードが`secret`の管理ユーザーを追加できます。

```
docker exec demo /opt/jboss/wildfly/bin/add-user.sh admin secret --silent
```

管理ユーザーが追加できたら管理コンソールを開いてみてください。
URLは`http://localhost:9990`です。

## アプリケーションをデプロイする

[JAX-RSでhelloworldするだけのアプリケーション](https://github.com/backpaper0/demo-for-wildfly)を用意したので、お手元に`clone`して試してみてください。

### wildfly-maven-pluginでデプロイする

[wildfly-maven-plugin](https://docs.jboss.org/wildfly/plugins/maven/latest/)を使ってみましょう。

次のコマンドでデプロイできます。

```
mvn wildfly:deploy
```

プラグインの設定は次の通りです。

```xml
<plugin>
    <groupId>org.wildfly.plugins</groupId>
    <artifactId>wildfly-maven-plugin</artifactId>
    <version>2.0.2.Final</version>
    <configuration>
        <hostname>localhost</hostname>
        <port>9990</port>
        <username>admin</username>
        <password>secret</password>
        <name>ROOT.war</name>
    </configuration>
</plugin>
```

ちなみに`id`を使うとMavenの`settings.xml`に書かれたサーバーの認証情報を使ってくれるようです。
その場合、`username`と`password`は不要です。

デプロイができたら次のコマンドで動作確認してください。

```
curl http://localhost:8080/api/hello
```

動作確認が終わったら次のコマンドでアンデプロイしておいてください。

```
mvn wildfly:undeploy
```

### jboss-cliでデプロイする

次はWARファイルをコンテナへ送ってから`jboss-cli`でデプロイしてみましょう。

まず次のコマンドでWARファイルをコンテナへ送ります（WARファイルは`mvn package`で作っておいてください）。

```
docker cp target/demo-for-wildfly-0.1-SNAPSHOT.war demo:/tmp/
```

それから次のコマンドでデプロイします。

```
docker exec demo /opt/jboss/wildfly/bin/jboss-cli.sh --connect \
 --command="deploy /tmp/demo-for-wildfly-0.1-SNAPSHOT.war --name=ROOT.war"
```

デプロイができたら次のコマンドで動作確認してください。

```
curl http://localhost:8080/api/hello
```

こちらの方法もアンデプロイのコマンドを記載しておきます。

```
docker exec demo /opt/jboss/wildfly/bin/jboss-cli.sh --connect \
 --command="undeploy ROOT.war"
```

## おわりに

Dockerを使ってお手軽にWildFlyを試せました（Docker使わなくてもダウンロードして`standalone.sh`実行するだけなので十分手軽ですが）。

以上です。
【初心者】連想配列・・・？

# 連想配列とは
PHPで配列を作成するとき、

```php
$h = ["a", "b", "c", "d"];
```
のように定義して、出力すると...

```php
print_r($h);
// 出力結果です。
Array
(
    [0] => a
    [1] => b
    [2] => c
    [3] => d
)
```
このようになっておりました。
連想配列では、配列の値に割り振られた番号の代わりに名前をつけて管理することができます。

```php
$h = ["apple" => "a", "banana" => "b", "calot" => "c", "orange" => "d"];
```
このように定義して、

```php
Array
(
    [apple] => a
    [banana] => b
    [calot] => c
    [orange] => d
)
```
番号だった部分に名前をつけることができました。

このような連想配列を定義して、色々な場面で使えるようにしましょう。
[100%] PassingCars (codility lessons)

> _Painless_  
> ### [PassingCars](https://app.codility.com/programmers/lessons/5-prefix_sums/passing_cars/)
> 道路を通過する車の数を数えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196344/d9f5e101-3606-5ac9-63fb-a3efe9877221.png)

#### タスク説明

N個の整数で構成される空でない配列Aが与えられます。配列Aの連続する要素は、道路上の連続する車を表します。

配列Aには0または1、あるいはその両方が含まれています。

* 0は東に移動する車を表し、
* 1は西に移動する車を表します。
目標は、通過する車を数えることです。 Pが東に移動し、Qが西に移動しているときに、0≤P<Q <Nである2台の車（P、Q）が通過していると言います。

たとえば、次のような配列Aについて考えてみます。

```:例
  A [0] = 0
  A [1] = 1
  A [2] = 0
  A [3] = 1
  A [4] = 1
```

（0、1）、（0、3）、（0、4）、（2、3）、（2、4）の5組の通過車があります。

関数を書く：

`class solution {public int solution(int [] A); }

これは、N個の整数の空でない配列Aが与えられると、通過する車のペアの数を返します。

通過する車のペアの数が1,000,000,000を超える場合、関数は-1を返す必要があります。

たとえば、次のようになります。

```:例
  A [0] = 0
  A [1] = 1
  A [2] = 0
  A [3] = 1
  A [4] = 1
```

上で説明したように、関数は5を返す必要があります。

次の仮定のための効率的なアルゴリズムを記述します。

* Nは[1..100,000]の範囲内の整数です。
* 配列Aの各要素は、0、1のいずれかの値を持つことができる整数です。

---

#### 解く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196344/3fcae621-974f-40ca-14ed-4fc262cbc405.png)

#### Program

[PassingCarsSolution.java](https://github.com/yp2211/algorithm/blob/main/src/codility/lessons/Lesson5_PrefixSums/PassingCarsSolution.java)

```java:PassingCarsSolution.java
    public int solution(int[] A) {
        int goal = 0;
        int[] P = new int[A.length + 1];
        P[0] = 0;
        for (int i = 0; i < A.length; i++) {
            P[i + 1] = P[i] + A[i];
        }

        for (int j = 0; j < A.length - 1; j++) {
            if (A[j] == 0) {
                goal += P[P.length - 1] - P[j + 1];
                if (goal > 1000000000) {
                    return -1;
                }
            }
        }

        return goal;
    }
```

Detected time complexity:  
O(N)

#### jUnit
[PassingCarsSolutionTest.java](https://github.com/yp2211/algorithm/blob/main/test/codility/lessons/Lesson5_PrefixSums/PassingCarsSolutionTest.java)

#### Report
[trainingJC2BAT-X4S](https://app.codility.com/demo/results/trainingJC2BAT-X4S/)

***
### See also: [CodilityのLessonsをすべて解く（更新中）](https://qiita.com/yp2211/items/537f733060bb0f2aba8f)
PYNQ2.6にROS/ROS2をインストールする

<a href="http://www.pynq.io/">PYNQ</a>とROS/<a href="https://index.ros.org/doc/ros2/">ROS2</a>の組み合わせが楽しそうです。

PYNQは、<a href="http://www.pynq.io/board.html">公式サポートのボード</a>の他、Zynqが載っているボードなら大抵自分でSDカードを作れば動きます(<a href="https://wasamon.net/miyo/index.cgi?page=Diary%2F2019%2D11%2D3">例</a>)。

しかし、<a href="https://index.ros.org/doc/ros2/Installation/Eloquent/Linux-Install-Debians/">通常のROS2のインストール手順</a>で、PYNQにROS2を入れようとすると上手くいかないので、以下の修正が必要です。

ROS2のバージョン：ros-eloquent-desktop
PYNQのバージョン：PYNQ2.5 および PYNQ2.6　（Ubuntu18.04ベース）

> 追記：5か月前にROSのdiscourseにも投稿してました。。。Pynq2.3およびROS1も同様です
> https://discourse.ros.org/t/installation-of-ros-ros2-on-pynq/15549?fbclid=IwAR3pfSqelt0csqQz8PJkIsyXlCGgexswOZnmREJSob5SfaNeJFIHMV0RpA8

修正すべきは以下の2点です。

## １．Ubuntuのバージョンを自分で書く
ROS2の通常手順だと以下をやれと書いてあります。

```
sudo sh -c 'echo "deb [arch=$(dpkg --print-architecture)] http://packages.ros.org/ros2/ubuntu $(lsb_release -cs) main" > /etc/apt/sources.list.d/ros2-latest.list'
```

しかしPYNQの場合、$(lsb_release -cs) で出てくるのがbionicではないため、ROS/ROS2のパッケージ取得に失敗します。

```
 xilinx@pynq:~$ lsb_release -cs
 WFH
```

そのため、上記の代わりに、以下を実行してください。

```
sudo sh -c 'echo "deb [arch=$(dpkg --print-architecture)] http://packages.ros.org/ros2/ubuntu bionic main" > /etc/apt/sources.list.d/ros2-latest.list'
```

## ２．aptソースリストに、bionic-updatesを追加する

ROS2が依存しているfast-rtps が、 libssl1.1 (>=1.1.1) を必要とします。
しかし、18.04 bionic (armhf or arm64)のバージョンは、 libssl1.1.0gです。

そのため、/etc/apt/sources.list.d/multistrap-bionic.listに、bionic-updates repository を追加してください。

```
xilinx@pynq:~$ cat /etc/apt/sources.list.d/multistrap-bionic.list
deb [arch=armhf] http://ports.ubuntu.com/ubuntu-ports bionic universe main
deb-src http://ports.ubuntu.com/ubuntu-ports bionic universe main
deb http://ports.ubuntu.com/ubuntu-ports bionic-updates main
```

（[arch=armhf]は環境によっては無いかもしれません。）

## インストールと動作確認

以上の操作を行うと、無事PYNQ上にROS2がインストールできるはずです。

```
sudo apt update
sudo apt install ros-eloquent-desktop
```

新しいウィンドウを２つ開いて、TalkerとListenerを動かしてみましょう

```
source /opt/ros/eloquent/setup.bash
ros2 run demo_nodes_cpp talker
```

そして、

```
source /opt/ros/eloquent/setup.bash
ros2 run demo_nodes_py listener
```

上手く動作しましたか？ROS2ではROSのようなマスターノード(roscore)が不要なので、躓きがなくて良いですね。

![pynq-ros2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64120/8663b9fb-8d09-2a02-f43f-219ccaf8bd7b.png)
Azure Form Recognizer 2.1 が日本語に対応していたから試してみる

この記事は [Azure Advent Calendar 2020 - Qiita](https://qiita.com/advent-calendar/2020/azure) の 22 日目の記事です。

Azure Form Recognizer の日本語 OCR は実際どれくらいの精度なのでしょうか？ビルド済みモデルは使えるのでしょうか？
今回はビルド済みの請求書モデルと、レイアウト＆テーブル機能で試してみます。検証に使うデータは画像検索で拾ってきたサンプルのものです。

[Form Recognizer のドキュメント - クイック スタート、チュートリアル、API リファレンス - Azure Cognitive Services | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/cognitive-services/form-recognizer/)

Sample UI Tool: [Analyze - Form OCR Testing Tool](https://fott-preview.azurewebsites.net/)

[![Image from Gyazo](https://i.gyazo.com/2702a4abb4f6c4c9eeca3931f360d5e9.png)](https://gyazo.com/2702a4abb4f6c4c9eeca3931f360d5e9)

## 請求書モデル

検出出来た項目は請求日、請求書 ID, 合計、小計、税額、業者名の 6 つで、税額のみ違うかなと思いました。また、英語だと請求先の住所だったり電話番号なども検出できるので、そのまま使うのは少し物足りないかなと思います。

テーブルレイアウトで検出されている日本語や、請求書ではなくただの日本語として検出されている部分は普通に使えそうです。漢字とカタカナの間などに変なスペースが存在することが比較的多いように見えるので、スペースは削る必要がありそうです。

[![Image from Gyazo](https://i.gyazo.com/f83dd98e4667b687e6b79a1f2d230f41.png)](https://gyazo.com/f83dd98e4667b687e6b79a1f2d230f41)

[![Image from Gyazo](https://i.gyazo.com/709293014f271698a576f50017137381.png)](https://gyazo.com/709293014f271698a576f50017137381)

[![Image from Gyazo](https://i.gyazo.com/d9c80a29f23dcf146da55952b64bd2dc.png)](https://gyazo.com/d9c80a29f23dcf146da55952b64bd2dc)

## レイアウト＆テーブル

黄色マーカーが文字として検出された部分です。また二つのテーブルが検出されています。

大体の文字は正しく検出されていますが、一部抜けがあったり、テーブルを区切っている波線が `:` として文字検出されていたりしますね。このサンプル画像が 950 x 710 pixel なので、少し文字が潰れてしまう解像度なのも原因かもしれません。 PDF ではまた違った結果になるようにも思えます。

それと志望動機の大枠レイアウトは一行ずつ文字が検出されるようです。これを一つの文章として認識させたいなら位置判定の処理を書かないといけませんね。個人的な希望ではテーブルと同じく枠ごとに検出されて、一つの文章で検出されて欲しかったです。

[![Image from Gyazo](https://i.gyazo.com/314b431bf5f90cc9af24eb437320713e.png)](https://gyazo.com/314b431bf5f90cc9af24eb437320713e)

[![Image from Gyazo](https://i.gyazo.com/31d0edee7a99179cb89b93d5ba915e1c.png)](https://gyazo.com/31d0edee7a99179cb89b93d5ba915e1c)

[![Image from Gyazo](https://i.gyazo.com/2e01f05c625f00a60595fbe14161de08.png)](https://gyazo.com/2e01f05c625f00a60595fbe14161de08)

[![Image from Gyazo](https://i.gyazo.com/9cf407a16b4659c67a69962b66a92b0e.png)](https://gyazo.com/9cf407a16b4659c67a69962b66a92b0e)

### 手書きの文字を検出してみる

おまけです。この人は比較的字が上手いのか、ほぼ正しい日本語の検出されているように見えます。

今回は載せませんが、僕みたいに凄く文字が適当な人だとかなり適当に検出されてしまうため要注意です。この精度でダメな場合はもっと高精度な OCR を使って手書き→文字データ（検出されやすいフォント）に変換して、その後 Form Recognizer を使う、などが必要ですね。

[![Image from Gyazo](https://i.gyazo.com/857665327f755840e0c70a1d8da3ce9e.png)](https://gyazo.com/857665327f755840e0c70a1d8da3ce9e)

[![Image from Gyazo](https://i.gyazo.com/042e9157c63686d93e7522ac347a0491.png)](https://gyazo.com/042e9157c63686d93e7522ac347a0491)

[![Image from Gyazo](https://i.gyazo.com/ad6cb56f4870acee964d75ae49b5690f.png)](https://gyazo.com/ad6cb56f4870acee964d75ae49b5690f)
BootstrapとFont-Awesome導入(Rails)

##導入方法（rails）

#Gemfileを編集する
```text:gemfile
gem 'bootstrap', '~> 4.5'
gem 'jquery-rails'
gem 'font-awesome-sass', '~> 5.13'
```

```bash:bash
$ bundle
```


#SCSSに読み込ませる
```scss:app/assets/stylesheets/application.scss
@import "bootstrap";
@import 'font-awesome-sprockets';
@import 'font-awesome';
```
#application.jsファイル

```js:app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
```

#application.cssの拡張子を変更する。
デフォルトでは、application.css」だが、「application.scss」に変更する。
「SCSS」はCSSの拡張言語で、bootstrapを使用できるようになる。

```bash:
　mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```

#記述方法
```erb:xxx.html.erb
<i class="fas fa-アイコン名"></i> 
```


[**アイコン名検索**](https://search-fa.com/ "Font-awesome")
DevOpsに本気で取り組んだ1年の振り返り

これは、[Holmes Advent Calendar 2020](https://qiita.com/advent-calendar/2020/holmes)の19日目の記事です。

こんにちは。株式会社Holmesで取締役CTOをやっている花井です。
年末ということもあり、1年間のDevOpsの取り組みを振り返り、その一部を紹介したいと思います。

## はじめに

DevOpsがビジネス価値をもたらすことは、[State of DevOps Report 2020](https://puppet.com/resources/report/2020-state-of-devops-report/)等で示されており、このHighパフォーマーの尻尾を掴むためにまずは1weekサイクルで本番環境へのデプロイができる状態を目指しました。
DevOpsプラクティスを取り入れている組織とそうでない組織を比べると以下の成績に大きな違いがあり、単に開発工程のベストプラクティスとしての取り組みではなく、ある時点のビジネス成果を同じとした場合により早く辿り着くことができる長期的な速さを得られるものと捉えています。

* 本番デプロイの成功率
* 生産性、マーケットシェア、利益性の目標達成率
* サービスを復元するためにかかる平均時間

一般的に言われるようなDevとOpsの対立関係については一つの組織としてまとまり、組織目標の作り方によって打ち消しているため、元々（把握している限り）存在しておらず、これを解消したいという動機は一切ありません。

## バッチサイズの縮小

従来は、当然の事ながらバッチサイズに比例してデプロイ成功率が下がる傾向である事が課題でした。そのため、バッチサイズを一定にする事をマストとして、コードやインフラを変更する事による影響のチェックを定型化してノウハウを獲得し、一定のリズムで一定の検査が出来る状態を目指す中で、イレギュラーケースやプロセスの問題を炙り出して改善するアプローチを取りました。
バッチサイズを一定とするためにはフィーチャートグルによってコントロールをする必要があり、作りかけの機能を構成するコードは本番環境にデリバリーされても表面化しないようトグルをOFFにして無害化しておく仕掛けを組み入れます。そのためには、トグルを意識した開発と環境毎の切り分けをする必要があり多少の非効率さはあるものの、それと引き換えに余りある成果が得られると思えば払うべきコストだし、実際のところ顕著なスピードダウンはパフォーマンス指標上も見られず比較的スムーズに導入できたと思います。
分かっていた事とはいえ、プロセスが安定してリズムに乗るまで、様々な問題が浮上しては潰してを繰り返す間は度々混乱もあり高コストだったと思います。

## パイプラインの統合

元々コードの各環境へのデプロイはパイプラインに統合されてビルドとユニットテストの実行といった、最小限の継続的デリバリーは自動化していました。
これに加えてコードの静的解析と一部のパフォーマンステストについてはパイプラインに組み込み、セキュリティチェックやリグレッションテストはマニュアルオペレーションでのベストプラクティスを探るため、敢えて自動化から入らないアプローチを取りました。これは、E2Eテストが手負いとなって短サイクルで回す中でテストを通すことが目的となってしまい欠陥を検出する本来の目的を果たせなくなる可能性と、全体的なUIリニューアルを行っているプロジェクト状況からせっかく作ったテストコードの賞味期限が短い事も理由の一つです。

## パフォーマンスの計測

上半期で2week、下半期で1weekまでサイクルを縮めるため、上半期はシンプルにデプロイ回数を指標として下半期はAgileプロセスのパフォーマンスと合わせる形で提供価値のある機能単位でのOn-time delivery率をパフォーマンス計測の指標としました。
それと同時に品質が犠牲になっていないことを確認するため欠陥検出率を指標として併せ持ち、結果として小さいバッチサイズで検査をして頻繁に本番環境へのデプロイをする方が品質はむしろ上がる事を検証しようとしました。
価値を早く安全に届ける共通目的の元で、テストケースやコード変更による影響範囲を特定し易くし、範囲を絞った検査と如何なる時も実施する重要シナリオテストによって検出された欠陥を修正して再提出するといった、健全なDevとOpsへの受け渡しがされるようになったと思います。

## まとめ

紹介した他にも受け渡し制限やGit戦略などの施策を合わせ、QAチームに足を向けて寝られない中でDevOpsに本気で取り組んだ結果、1weekサイクルのデプロイを実現する事ができ、同時にボトルネックとなりがちなプロセスを特定して新たな課題を発見することもできました。
この先マニュアル運用の成熟を求めるとMid/Low-level寄りのアプローチでより変更が難しくなりバッチサイズが大きくなるループから抜け出せなくなるため、エンジニアリング駆動での自動化を目指す方向になると思います。
また、期待するようなビジネス成果を得るためにはビルドトラップに陥らずフィードバックループを獲得する必要があり、ずっとフィーチャートグルをかけた状態でデプロイ成功率だけ高めていても仕方なく、顧客に価値を届けるまでを1サイクルと捉えて全体適用する必要があり、下半期はBiz+DevOpsを取り組むテーマとして追加しました。
うまく動いているものは触らないの原則に引っ張られそうになりながらも理想の状態に近づけるための必要なリスクは取り、今後もスピードと品質をトレードオフせず両立するために組織的な学習と改善、安全尊重の文化を醸成していきたいと思います。
【ポートフォリオ】環境構築編_その2_LAMP環境の構築

[link-1]:https://qiita.com/HIDE03/items/263f15c0c994fa569944
[link-2]:https://qiita.com/RayDoe/items/fb3e0ef69b9b4132e7f7

# はじめに
[前回][link-1]でAWSのインスタンスが利用できるようになりました。
今回はインスタンスにLAMP環境を構築するのが目標です。


# 1. LAMPとは
LAMPって聞くと結構、
__PHPのフレームワークの一種！__
ってなることが多い気がするのですが、正確にはWebアプリケーションの実行環境の組み合わせの事を指します。
具体的には、
__L__inux ：OS
__A__pache ：Webサーバ
__M__ySQL ：データベース
__P__HP ：スクリプト言語
上記で構成されていて、これらの頭文字を取って__LAMP__って呼ばれているそうです。
最近はWebサーバやスクリプト言語を別のものに置き換える場合もあるそうですね。
（例えばPHPをPythonに置き換えるとか。その場合でもLAMPって呼べますね）


# 2. 全体の流れ
LAMP環境構築の全体の流れは下記の通りです

1. Apacheをインストールする
* PHPをインストールする
* MySQLをインストールする
* phpMyAdminをインストールする
* サンプルブログを設置する
* HTMLベースで改良する
* PHPべースで改良する
* データベースを改造する


# 3. インスタンスの初期設定
インスタンスは初期状態では時間設定などが日本向けになっていないので、設定します。

1. IPアドレスにアクセスしてWEBサーバの起動確認を行う
* SSHでログインする
* 管理者権限に切り替える
* サーバの時間設定を変更する（UTCからJST）
* 言語設定を日本語に変更する


# 4. Apacheのインストール
Apacheについては前回インストールしたのでスキップします。


# 5. PHPのインストール
まずはPHPをインストールします。
AWSで普通にインストールすると__PHP5.4という古いバージョン__でインストールされてしまいます。
~~ちなみに自分はpaizaの通りにやってPHP5.4がインストールされてしまい、全部最初からやり直すことに、、、~~
なので、[こちらの記事][link-2]を参考にしつつ下記の手順で__PHP7.2__をインストールしました。

1. SSHでログインして管理者権限に切り替える
* パッケージを確認する
* PHP7.2をインストールする
* PHPの設定ファイルをバックアップする
* PHPの設定を変更する
* Apacheを再起動する
* PHPファイルを作成する
* PHPファイルにアクセスして動作確認をする


# 4. MySQLのインストール
続いて、データベースを使えるようにするためにMySQLをインストールします。
paizaの内容が少し古かったので[こちらの記事][link-2]を参考にしつつ、実際には下記の内容で行いました。

1. SSHでログインして管理者権限に切り替える
* 初期インストールされているMariaDB用パッケージを削除する
* MySQLのリポジトリをyumに追加する
* MySQLに必要なパッケージを取得する
* インストールパッケージの確認を行う
* ログファイルを出力する
* mysqldがインスタンスの起動と同時に起動するように設定する
* rootのパスワードを確認する
* rootのパスワードを変更する
* MySQLの設定を変更する
* MySQLを再起動する


# 5. phpMyAdminのインストール
コンソールのみでMySQL操作するのはなかなか辛いので、phpMyAdminをインストールします。

1. SSHでログインして管理者権限に切り替える
* /var/www/htmlに移動する
* 上記のルートにphpMyAdminのパッケージをダウンロードする
* phpmyAdminディレクトリを作成して、パッケージを展開する
* phpMyAdmin-latest-all-languages.tar.gzを削除する
* phpMyAdminの設定を変更する
* phpMyAdminの動作確認を行う


# まとめ
* LAMP環境 + phpMyAdmin を構築しました


# 参考
paizaラーニング -AWS入門編2:LAMP環境を構築しよう-
https://paiza.jp/works/aws/primer/aws2
Amazon Linux2でLAMP環境を構築
https://qiita.com/RayDoe/items/fb3e0ef69b9b4132e7f7
MySQLインストール時にやること（DBとユーザーの作成等）
https://qiita.com/daichi87gi/items/f9dac6cd8acc3ad4330d
AWS EC2 AmazonLinux2 MySQL rootユーザの初期パスワードの確認方法
https://qiita.com/miriwo/items/457d6dbf02864f3bf296
Amazon LinuxでPHP5.6からPHP7にアップデートする
https://owani.net/2016/02/14/php56-php7/#%EF%BC%91php56%E3%81%AE%E5%89%8A%E9%99%A4
【AWS】EC2でphpMyAdminを利用し、RDSへアクセス
https://qiita.com/s_Pure/items/2bf5bafffdbb6f20422a
Google recruit problem



# 課題

    {e(自然対数の底)の値で連続する10桁の数のうち，最初の素数}

を求める．ただし，e(自然対数の底)は200桁までで

    2.71828182845904523536028747135266249775
    7247093699959574966967627724076630353547
    5945713821785251664274274663919320030599
    2181741359662904357290033429526059563073
    81323286279434907632338298807531952510190

をテキストにコピーしてそのファイルを読み込んで動作させる．


# 解法

やることとしては

-   テキストファイルに記載されているeの小数点と改行を取り除く．
-   頭から10桁を取り出しそれが素数かどうかを判定する．
-   1桁ずつずらしていき最初に素数が出てきたところでストップ

をすれば良さそう．

まず「テキストファイルに記載されているeの小数点と改行を取り除く．」をやってみる．

```ruby
exp = File.read("e.txt").delete("\n .")
```

これで「e.txt」に書かれたeの値を小数点と改行を取り除き変数expに格納できる．

次に，「頭から10桁を取り出し,一桁ずつずらしていく」ことを実装する．

```ruby
exp = File.read("e.txt").delete("\n .")

for i in Range.new(0, exp.length - 10)
    num = exp.slice(i .. i + 9).to_i
    if　#素数かどうかを判定 
	    #初めてできた素数を表示
	    break
    end
end
```

forループで実現したがこの時

    Range.new(範囲開始値, 範囲終了値)

というものを使用している．

さて，いよいよ「素数の判定」だがrubyには素数を判定するクラスがあるようなのでそれ使用してみる．

使い方は

```ruby
require 'prime'

Prime.prime?(判定する数値)
```

これで素数ならture，そうでなければfalseが返ってくる．

```ruby
require 'prime'

exp = File.read("e.txt").delete("\n .")

for i in Range.new(0, exp.length - 10)
    num = exp.slice(i .. i + 9).to_i
    if Prime.prime?(num)
	    puts num
	    break
    end
end
```

これでひとまず完成．

結果は

    7427466391

となる．


# 発展課題

    Congratulations. You've made it to level 2. 
    Go to www.Linux.org and enter Bobsyouruncle 
    as the login and the answer to this equation as the password.
    f(1)=7182818284
    f(2)=8182845904
    f(3)=8747135266
    f(4)=7427466391
    f(5)=__________


# 解法

先程の問題をクリアすると，この問題が次に出題されたらしい．

これらには何かしらの法則があるようだが，どうやら先程のeに現れる10桁の整数のうち全ての桁を足し合わせると合計が49になるものという法則のようだ．

その整数を探索するプログラムを作成する．

簡単に思いつくのは，先程同様に前から10桁の整数を1桁ずつずらして探索していくということだ．以下がそのプログラム．

```ruby
require 'prime'

exp = File.read("e.txt").delete("\n .")

count = 0
for i in Range.new(0, exp.length - 10)
    num = exp.slice(i .. i + 9).to_i
    num_sum = num.to_s.split("").map { |s| s.to_i }.inject(:+) 
    if num_sum == 49 
      puts num
      count += 1
      if count == 5
	    break
      end
    end
end

```

結果は，

    7182818284
    8182845904
    8747135266
    7427466391
    5966290435

となる．

今回使用したものとして

```ruby
num_sum = num.to_s.split("").map { |s| s.to_i }.inject(:+) 
```

があるが，これはまず取ってきた10桁の数字を文字列に変換し，それ一文字ずつ分割し数値化，その後全てを足し合わせるということを行っている．


# まとめ

今回は素数判定をするプログラムを作成した．これはGoogleのリクルートに使用された問題らしい．


# 参考

-   [RubyのPrimeクラスの使い方](https://techacademy.jp/magazine/19472)
-   [Rubyで桁の合計を求める](https://melborne.github.io/2009/01/22/Ruby-Ruby-Problem16/)



------
 - **source** ~/prog/github/grad_members_20f/members/miyanagi/post/google.org
[Python] 累積和 ABC186D

#[ABC186D](https://atcoder.jp/contests/abc186/tasks/abc186_d)

入力をソートして $A_1\leq\ldots\leq A_N$ として良いです。このとき $i&lt;j$に対して $|A_i-A_j| = A_j-A_i$ となり、計算を単純化することができます。

各 $i$ について $\sum_{j=i+1}^{N}|A_i-A_j|=(\sum_{j=i+1}^{N}A_j)-(N-i)A_i$ となり、これは予め $A$ の累積和を計算しておくことでそれぞれ $O(1)$ で求めることができます。よって $O(N\log N)$ でこの問題が解けました。

よくわからない場合は、
[AtCoder ABC 186 D - Sum of difference (茶色, 400 点)](https://drken1215.hatenablog.com/entry/2020/12/19/231000)

```python:サンプルコード
n = int(input())
a = list(map(int,input().split()))
a.sort()
suma= sum(a)
ans = 0
for i in range(n-1):
    # print()
    suma -= a[i]
    ans += suma - a[i]*(n-i-1) 
 
print(ans)
```
Flutter×Firebase Auth

![スクリーンショット 2020-12-20 17.02.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/591fc1ce-9fb8-238b-0fe6-a45b02e00ecb.png)

始めるをクリックし、最初はメールアドレスだけでいいと思うので
メールアドレスを有効にするに変更・保存します。

```yaml:room_mobile_app/pubspec.yaml
.....
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  provider: ^4.1.3
  firebase_core: ^0.4.5
  cloud_firestore: ^0.13.6
  //firebase auth を追加する
  firebase_auth: ^0.14.0+5
...
```
そしたら、pub getをターミナルで行う

```terminal
$ flutter pub get
```
以上！
roman numerals



# 課題

アラビア数字(arabic numerals)を受け取って，ローマ数字(roman numerals)を返すmethodを書きなさい．


# 作成

ひとまず動くものを作ってみた．4桁の整数が入力されるものとして各桁を分割し，それぞれに対して4か9かそれ以外かという分岐を施した．

```ruby:roman_numerals.rb
class Integer
    def arab_to_roman
	number = self
	m = number / 1000
	number = number % 1000
	c = number / 100
	number = number % 100
	x = number / 10
	number = number % 10
	i = number


	roman = 'M' * m
	if c == 9 
	    roman += 'CM'
	elsif c == 4
	    roman += 'CD'
	else
	    roman += 'D' * (c / 5)
	    c = c % 5
	    roman += 'C' * c
	end
	if x == 9
	    roman += 'XC'
	elsif x == 4
	    roman += 'XL'
	else
	    roman += 'L' * (x / 5)
	    x = x % 5
	    roman += 'X' * x
	end
	if i == 9
	    roman += 'IX'
	elsif i == 4
	    roman += 'IV'
	else
	    roman += 'V' * (i / 5)
	    i = i % 5
	    roman += 'I' * i
	end
	puts roman
    end
end

[4, 15, 32, 44, 99, 439, 499, 961, 2254, 3782].each do |i|
    i.arab_to_roman
end
```

結果は，

    IV
    XV
    XXXII
    XLIV
    XCIX
    CDXXXIX
    CDXCIX
    CMLXI
    MMCCLIV
    MMMDCCLXXXII

動くけども冗長なコードになってダサい．

改造しよう．ifをcaseを用いて短縮することを考える．

```ruby:roman_numerals.rb
class Integer
    def arab_to_roman
	number = self
	m = number / 1000
	number = number % 1000
	c = number / 100
	number = number % 100
	x = number / 10
	number = number % 10
	i = number


	roman = 'M' * m

	case c
	when 9 then roman += 'CM' #900
	when 4 then roman += 'CD' #400
	else
	    roman += 'D' * (c / 5)
	    c = c % 5
	    roman += 'C' * c
	end

	case x
	when 9 then roman += 'XC' #90
	when 4 then roman += 'XL' #40
	else
	    roman += 'L' * (x / 5)
	    x = x % 5
	    roman += 'X' * x
	end

	case i
	when 9 then roman += 'IX' #9
	when 4 then roman += 'IV' #4
	else
	    roman += 'V' * (i / 5)
	    i = i % 5
	    roman += 'I' * i
	end

	puts roman
    end
end

[4, 15, 32, 44, 99, 439, 499, 961, 2254, 3782].each do |i|
    i.arab_to_roman
end
```

さらにcaseの動作は三回ともほぼ同じなので別のメソッドを作っておいて使用する．

```ruby:roman_numerals.rb
class Integer
    def arab_to_roman
	number = self
	m = number / 1000
	number %= 1000
	c = number / 100
	number %= 100
	x = number / 10
	number %= 10
	i = number

	roman = 'M' * m

	roman = proc(roman, ["C","D","M"], c)
	roman = proc(roman, ["X","L","C"], x)
	roman = proc(roman, ["I","V","X"], i)

	puts roman
    end

    def proc(roman, sym, n)
	case n
	when 9 then roman += (sym[0]+sym[2])
	when 4 then roman += (sym[0]+sym[1])
	else
	    roman += (sym[1] * (n / 5))
	    n = n % 5
	    roman += (sym[0] * n)
	end
	return roman
    end
end


[4, 15, 32, 44, 99, 439, 499, 961, 2254, 3782].each do |i|
    i.arab_to_roman
end
```

だいぶマシにはなった．まだ短くできるのかもしれないけども，僕はここまでしかできません．


# まとめ

アラビア数字をローマ数字に変換するコードを作成した．


# 参考



------
 - **source** ~/prog/github/grad_members_20f/members/miyanagi/post/roman.org
【Git/GitHub】GitHubがGit操作時のパスワードのみの認証を禁止したので2段階認証に変更した

# はじめに
最近こんなニュースがTwitterに流れてきましたね。
![スクリーンショット 2020-12-20 16.37.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512695/808e6d68-a6f0-31db-9a2e-dd4db126a049.png)

リンク記事はこちら→**[GitHubがGit操作時のパスワード認証を廃止、今後はトークンによる認証が必須に](https://gigazine.net/news/20201219-github-token-git-operations/)**

僕もパスワード認証のみだったのでこれを機に2段階認証にしました。
その時の手順を超ざっくり書きます。
（他の記事を見ながらやったのでそのまとめです）

# 手順
## GitHub側で2段階認証にする 
2段階認証はこちらの記事を見れば問題なくできる。
**[GitHubを使おう! ログイン方法や2段階認証設定を徹底解説](https://www.sejuku.net/blog/70914)**

`Google Authenticator`はAWSの多要素認証（MFA）でも使うのでインストールしておくと良いと思う。

## ターミナルでpasswordにPersonal access tokensを設定する
GitHubでの設定を終えて`$ git push origin ****`とかしようとすると

```git
git push origin develop
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/********.git/'
```
になるはず。

でいつも通りGitHubに`ユーザー名`と`パスワード`を入れても上記と同じ結果になる。

どうやらGit側でも設定を変える必要があるらしい。

詳しい手順はこちらでやればOK。
**[Githubの2段階認証入れたらpushできなくなった人へ](https://qiita.com/cyborg__ninja/items/6efd349370bf5f8bffb2)**

結果的にはパスワードの入力を求められたら`パスワード`ではなく`Personal access tokens`を設定すれば良い。
（ユーザー名は今まで通りGitHubのユーザー名でOK）

タイトル通り**「Git操作時のパスワードのみの認証を禁止」**って書いているんで***そりゃGitHubのパスワードは使えるわけないよなw***っていう話でした。

これで問題なくpushできた**（完）**

# おわり

ググると

- GitHub側の設定
- Git側の設定

がまとめて書かれている記事がなかったので書きました。

おわり
How Samsung’s Digital Inverter Compressors Help Consumers Save Energy

Six Samsung refrigerator models sold in the U.S. have been awarded the 2020 ENERGY STAR Emerging Technology Award by the U.S.   <a href="https://samsungrepairco.com/how-to-fix-refrigerator-ice-maker/">تعمیرات یخساز سامسونگ</a>  Environmental Protection Agency (EPA). Every year, the EPA, through its ENERGY STAR Program, chooses 1 or 2 innovative technologies for their Emerging Technology Award. This year the Award recognized six Samsung refrigerator models that met three strict performance criteria: (1) super-efficient compressors; (2) low greenhouse gas blowing agents for their insulation; and (3) low greenhouse gas refrigerants.

 

“This award shows that digital inverter compressor technology can save significant levels of energy in practice,” said Kook-Jeong Seo, Head of the Thermal Energy Lab, Digital Appliances Business at Samsung Electronics. “Going forward, we will continue to develop products that contribute to reducing energy consumption and support sustainability.”

 



 

The digital inverter compressor serves as the ‘engine’ for Samsung’s main refrigerator line-up, and is the component responsible for determining how much energy the refrigerator consumes. <a href="https://samsungrepairco.com/">نمایندگی سامسونگ</a>  Currently, nearly all of Samsung’s refrigerator solutions incorporate digital inverter compressors. While traditional compressors operate at a fixed speed, digital inverter compressors are able to automatically adjust their energy use between 1,050 and 4,300RPM according to need, at any given time. Samsung digital inverter compressors use around 30% less energy than ones with single-speed induction motor compressors, and thus also help contribute to the reduction of greenhouse gas emissions.<a href="https://samsungrepairco.com/how-to-repair-a-refrigerator-board/">قیمت برد یخچال سامسونگ </a>They have also been certified by German institution Verband Deutscher Elektrotechniker (VDE)1 to last up to more than two decades in durability.

 

The ability of Samsung compressors to intelligently detect changes in temperature and adjust accordingly has additionally allowed for the emergence of other unique features in the company’s full refrigerator lineup. Refrigerators from the Samsung Chef Collection, for instance, feature a unique fixed-temperature technology called Precise Chef Cooling that maintains a temperature variation rate of less than 0.5 degrees Celsius (0.9 degrees Fahrenheit), ensuring that food stays fresher, for longer.
Node.js で E2E テスト！Puppeteer とは？

# はじめに
E2EテストやWebスクレイビングするときに使うPuppeteerについて調べてみました。Googleのカンファレンスでも紹介されていたのとNode.jsを使うことがあるので、それに合わせてPuppeteerも使っていこうと思います。
Puppeteerのソースを見たい方は、[こちら](https://github.com/puppeteer/puppeteer/)です。

# 準備
```bash
$ brew install yarn
$ yarn add puppeteer
$ yarn add -D @types/node typescript ts-node @types/puppeteer
```

# 最小限の構成
```json:package.json
{
  "scripts": {
    "test": "ts-node src/all.ts"
  },
  "dependencies": {
    "puppeteer": "^5.2.1"
  },
  "devDependencies": {
    "@types/node": "^14.6.4",
    "@types/puppeteer": "^3.0.1",
    "ts-node": "^9.0.0",
    "typescript": "^4.0.2"
  }
}
```

```json:tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es2017",
    "module": "commonjs",
    "lib": ["dom", "es2017"],
    "outDir": "./dist",
    "rootDir": "./src"
  }
}
```

```typescript:src/all.ts
import { launch } from 'puppeteer'

(async () => {
    const puppeteer = require('puppeteer')

    const browser = await launch({
        headless: true
    })

    const page = await browser.newPage()
    await page.emulate(puppeteer.devices['iPhone X'])

    const url = 'https://m.yahoo.co.jp'

    await page.goto(url, {waitUntil: 'networkidle0'})
    await page.screenshot({path: 'topPage.png', fullPage: true})

    await browser.close()
})()
```

これらのファイルを置いて、以下を実行します。

```bash
$ yarn test
```

# launchで使えるオプション
| オプション | 型 | 説明 |
| --- | --- | --- |
| headless | boolean | ヘッドレスブラウザで起動するかどうか |
| args | string[] | ブラウザに渡す引数 |
| userDataDir | string | ユーザディレクトリのパス |
| devtools | boolean | Chrome DevToolsを開くかどうか。 これをtrueにするとheadlessは、falseとなる。 |
| ignoreHTTPSErrors | boolean | HTTPSのエラーを無視するかどうか |
| defaultViewport.width | number | ブラウザの横幅 |
| defaultViewport.height | number | ブラウザの縦幅 |
| defaultViewport.deviceScaleFactor | number | 拡大率 |
| defaultViewport.isMobile | boolean | モバイルかどうか |
| defaultViewport.hasTouch | boolean | タッチをサポートするかどうか |
| defaultViewport.isLandscape | boolean | 横画面にするかどうか |
| slowMo | number | Puppeteerの操作を何ms遅らせるか |
| timeout | number | タイムアウト（ms） |

# page.gotoで使えるオプション
| オプション | 型 | 説明 |
| --- | --- | --- |
| referer | string | 付与するreferer |
| waitUntil | string | どのイベントが発火されたら操作を開始するか。"load" or "domcontentloaded" or"networkidle0" or "networkidle2" |

# page.screenshotで使えるオプション
| オプション | 型 | 説明 |
| --- | --- | --- |
| path | string | スクショを出力するパス |
| type | string | 拡張子。"json" or "png" |
| quality | number | 画像のクオリティ。0~100で指定する。 |
| fullPage | boolean | 画面全体のスクショとするか |
| clip.x | number | 切り取るときのx座標 |
| clip.y | number | 切り取るときのy座標 |
| clip.width | number | 切り取るときの横幅 |
| clip.height | number | 切り取るときの縦幅 |
| omitBackground | boolean | 白色のバックグラウンドカラーをつけるか |
| encoding | string | 画像のエンコーディング。"base64" or "binary" |

# おわりに
ユニットテストだけではテストしきれない部分があったり、いろいろなデバイス・環境で同じ操作のテストをしたいといったりE2Eテストには用途はたくさんあるかと思います。また、１度作ってしまえば、別の言語・FWに置き換えることになってもUIが変わらない限り使いまわせるメリットもあります。しかし、あまり細かく書いてしまうと改修を入れるたびにE2Eテストも修正しないといけなくなり、無駄な工数がかかってしまうデメリットもあるので、適宜調節しつつテストを書いていくと良いかと思います。

# 参考
https://qiita.com/bezeklik/items/c6448d50ff0efb45829e
[100%] MinAvgTwoSlice (codility lessons)

> _Respectable_  
> ### [MinAvgTwoSlice](https://app.codility.com/programmers/lessons/5-prefix_sums/min_avg_two_slice/)  
> 少なくとも2つの要素を含むスライスの最小平均を見つけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196344/d29983fb-b5c2-f5d9-d661-3927d673ccf2.png)

#### タスク説明
N個の整数で構成される空でない配列Aが与えられます。 0≤P<Q <Nのような整数のペア（P、Q）は、配列Aのスライスと呼ばれます（スライスには少なくとも2つの要素が含まれていることに注意してください）。スライスの平均（P、Q）は、A [P] + A [P + 1] + ... + A [Q]の合計をスライスの長さで割ったものです。正確には、平均は（A [P] + A [P + 1] + ... + A [Q]）/（Q − P + 1）に等しくなります。

たとえば、次のような配列A：

```json:例
    A [0] = 4
    A [1] = 2
    A [2] = 2
    A [3] = 5
    A [4] = 1
    A [5] = 5
    A [6] = 8
```

次のサンプルスライスが含まれています。

* スライス（1、2）、その平均は（2 + 2）/ 2 = 2;
* スライス（3、4）、その平均は（5 + 1）/ 2 = 3;
* スライス（1、4）、その平均は（2 + 2 + 5 + 1）/ 4 = 2.5です。

目標は、平均が最小であるスライスの開始位置を見つけることです。

関数を書く：

`class solution {public int solution(int [] A); }`


これは、N個の整数で構成される空でない配列Aが与えられた場合、最小の平均でスライスの開始位置を返します。平均が最小のスライスが複数ある場合は、そのようなスライスの最小の開始位置を返す必要があります。

たとえば、次のような配列Aが与えられます。

```json:例
    A [0] = 4
    A [1] = 2
    A [2] = 2
    A [3] = 5
    A [4] = 1
    A [5] = 5
    A [6] = 8
```

上で説明したように、関数は1を返す必要があります。

次の仮定のための効率的なアルゴリズムを記述します。

* Nは[2..100,000]の範囲内の整数です。
* 配列Aの各要素は、[-10,000..10,000]の範囲内の整数です。

#### 解く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196344/15ee720c-7878-683c-39c4-c32ed22b8458.png)


#### Program
[MinAvgTwoSliceSolution.java](https://github.com/yp2211/algorithm/blob/main/src/codility/lessons/Lesson5_PrefixSums/MinAvgTwoSliceSolution.java)

```java:MinAvgTwoSliceSolution.java
    public int solution(int[] A) {
        int goal = 0;
        int[] P = new int[A.length + 1];
        P[0] = 0;
        for (int i = 0; i < A.length; i++) {
            P[i + 1] = P[i] + A[i];
        }

        double minAvg = 10000;
        for(int j = 0; j < A.length - 1; j++) {
            double currentAvg2 = (double)(P[j + 2] - P[j]) / 2;
            if (currentAvg2 < minAvg) {
                minAvg = currentAvg2;
                goal = j;
            }

            if (j == A.length - 2) break;;

            double currentAvg3 = (double)(P[j + 3] - P[j]) / 3;
            if (currentAvg3 < minAvg) {
                minAvg = currentAvg3;
                goal = j;
            }
        }

        return goal;
    }
```

Detected time complexity:

O(N)

#### jUnit
[MinAvgTwoSliceSolutionTest.java](https://github.com/yp2211/algorithm/blob/main/test/codility/lessons/Lesson5_PrefixSums/MinAvgTwoSliceSolutionTest.java)

#### Report
[trainingP37RME-WBC](https://app.codility.com/demo/results/trainingP37RME-WBC/)
***
### See also: [CodilityのLessonsをすべて解く（更新中）](https://qiita.com/yp2211/items/537f733060bb0f2aba8f)
[MySQL]レコードのINSERT時に指定の値で格納する

既存のテーブル(以下、B-table)にあるレコードを指定条件に基づいて抽出し、別テーブル(以下、A-table)に格納する
また、指定条件に基づいて抽出されたレコードは、別テーブルのCというカラムにCASE文で指定された値（今回は1, 2, 3）を保持する

## 結論

```sql

INSERT INTO
  A-table (A, B, C)
SELECT
  B-table.A, B-table.B
  (CASE
   WHEN B-table.A LIKE "%あいうえお%" THEN 1
   WHEN B-table.A LIKE "%かきくけこ%" THEN 2
   WHEN B-table.A LIKE "%さしすせそ%" THEN 3
   ELSE 0
   END) AS C
FROM
  B-table
WHERE
  NOT EXIST (SELECT * FROM A-table WHERE A-table.B = B-table.B)

```
[別のテーブルのデータをテーブルに追加する](https://www.dbonline.jp/mysql/insert/index6.html)
RESTについて簡単にまとめてみた

# RESTとは
REST(REpresentational State Transfer)とは、Webサービスにおけるアーキテクチャスタイルの一つです。

###アーキテクチャスタイルとは

アーキテクチャを決めるための**設計指針**です。
闇雲に設計せずに指針に沿って設計すればいい感じにできるよ〜、ってやつです。

そもそも**アーキテクチャ**とは**構造**のことで、実際に具現化されたものを指します。
webで例えるとURLやHTML、ブラウザなどがアーキテクチャに当たります。
そう！今皆さんが開いてるブラウザもRESTに基づいて作られているんです！

家の建築を例に出すと、家の設計指針がアーキテクチャスタイル、トイレや玄関、リビングなどがアーキテクチャに当たります。
更に言えば
「友人を呼んで、ホームパーティに適した家を作りたい」という**アーキテクチャスタイル（設計指針）**があったとしたら、それに基づきリビングは広くして、テラスもつけて、間取りは南向きにする・・・などの**アーキテクチャ(構造)**を決める
が建築による設計の流れになります。

このweb版が**REST**なんですね〜。

##何でRESTを使うと良いの？
>* アプリケーション中のリソースがURIによって参照できる。
* ステートレスにすることで、スケーラビリティが向上(一番のメリット)
* シンプルで一貫性のある設計。リソースへの操作はCRUDの4種類という制約
* 標準的なデータフォーマット(XML/JSON)を扱うことでほかサービスとの連携が容易になる。
* REST理論に基づいたWEBアプリでは、インターフェースが固定されてるので、互換性の問題が発生しない。

引用元：REST理論をわかりやすく。
https://qiita.com/geshi/items/5275cc9d089105625c5f

ほとんどのWebサービスがRESTを採用しており、互換性に問題が生じません。
多くのWebサービスの目的は**「大勢にサービスを使ってもらう」**ことです。特に理由がなければ、普及され、洗練された設計指針である「REST」を採用するのが安定なんですかね。

## リソース
RESTを語る上で必須になるのが**リソース**です。
リソースを一言で表現すると**「Web上に存在する、名前を持ったありとあらゆる情報」**。
具体的にはURIのことです。
以下の特徴を持っています。
- リソースとは、Web 上の情報である
- 世界中の無数のリソースは、それぞれ URI で一意の名前を持つ
- URI を用いることで、プログラムはリソースが表現する情報にアクセスできる

以上がRESTの説明でした！
###RESTには6つのアーキテクチャスタイルが含まれている

更に深掘ると、実は6つのアーキテクチャスタイルで構成されています。
以下の章で解説していきます。

# 構成する6つのアーキテクチャスタイル

##クライアント/サーバー
クライアントとサーバー間でリソースのやりとりをすることです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680641/7df114d6-6294-c1c0-1692-c4c198b63d2d.png)

##ステートレスサーバー
サーバーがクライアントの情報を保持しないことです。
情報を保持しないことでサーバーの実装が簡素化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680641/1369fa82-3c63-dd11-b719-b7fc288b14d2.png)


##キャッシュ
一度得たリソースをクライアント側で保存し、使い回す仕組みです。
例えば、一度開いたことのあるWebページを再度訪問する時、キャッシュにあるCSSが読み込まれて高速でページが表示される感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680641/fc80d442-9657-13cf-c26c-42f59464464e.png)

##統一インターフェース
リソースをリクエストする際、HTTPメソッドを指定してリソースを限定すること。
つまり、リクエストの際に、URLだけでなくHTTPメソッド（GETやPOSTなど）を指定することができます。
HTTPメソッドは8個しかないシンプルな構造。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680641/ffe7d488-5521-5d5b-9b2b-6ad3b3d4c6c2.png)

##階層化システム
クライアントとサーバー間にプロキシなどの中継サーバーを設置することです。
例えば、ロードバランサーを間に挟むことで、サーバーへの負荷が軽減しリスクを減らすことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680641/d415c384-e43e-e3a1-1b5d-127a34e7a842.png)


##コードオンデマンド
プログラムをクライアントがサーバーから受け取り、クライアント上で実行することです。
JavaScriptやFlashなどがこれに当たります。
都度都度、サーバーに通信することが無く、クライアント側で処理するため、処理の速度が向上します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680641/b7fe5688-0dab-8d31-419e-e30a4f32a9b7.png)


最後まで読んで頂きありがとうございました！

## 参考
- [Webをささえる技術](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042)
【Maya】テクスチャの切り替えキーフレームを設定する。

この記事は[Maya Advent Calender 2020](https://qiita.com/advent-calendar/2020/maya)の21日目の記事です。
AdventCalenderに初めて参加させていただきます。kouと申します。
普段は[EmptyAttribute](https://emptyattribute.net/)というPodCastなどやってますので興味があればぜひ！

#概要
最近必要に迫られて調べたのですが、意外に情報が出てこなかったのが、mayaでテクスチャの切り替えをキーフレームを設定する方法でした。
自分はアニメーション周りは詳しくないので、単純になにか方法を見落としている可能性がありますが、この記事は自分なりに手段を考えてみたので備忘録です。

例えばフェイシャルをテクスチャの切り替えで表現している場合、どのテクスチャを使用するかをキーフレームを設定したい場合、どのような手段を取ればいいのかわからない。
テクスチャ切替をアニメーションすること自体はよくあるイメージですが、UVアニメーションなどで実現しているイメージが強いです。
ゲームとかでよく使用される手法でしょうか？
今回はアサインされているテクスチャそのものをスイッチする方法を探しました。

#検証(結果だけ見たい方はスキップしてもよい)
- ①ImageNameの切り替えでアニメーションできるか。
アニメーションしたいテクスチャを全てインポートしなければいけないとなるとmaya内のデータが荒れそうだなと思ったので、読み込むパスのアニメーションでテクスチャの切り替えができるのかどうかを試してみた。
キーフレームの設定に合わせてsetAttrでImageNameを更新してみる。
 - 予想通りできない。少し前までテクスチャパスの変更にrefreshが必要だったことを考えても、なんとなく無理がありそうな気がしていた。
 

- ②layerdTextureを使用する。使用するテクスチャのインポートは事前にしておいて、layerdTextureのアルファ切り替えでテクスチャ表示を変更する。
使用するテクスチャだけalphaを1に。それ以外のテクスチャをのalphaを0に設定すれば疑似的に同じことになるのでは？
    - すごく冗長になる。エクスプレッションでの切り替えもifを挟む感じでめんどくさい。
エクスプレッションでalphaをバインドしてしまうので、瞳のアニメーションを入れるためにテクスチャを重ねたいときなどに、部分的に抜いた表現ができなかった（工夫すればできるかもだけど、これはこれでめんどくさそう）

# 準備
これから作る物ですが、viewport2.0では動きません。
（タイムスライダを動かしている最中テクスチャの更新が行われない？）
vieport内のRendererからLegacyDefaultViewportを選択してください。
[LegacyDefaultViewportがない場合はこちら](https://knowledge.autodesk.com/ja/support/maya/troubleshooting/caas/sfdcarticles/sfdcarticles/JPN/Restore-the-Legacy-Viewport-in-Maya-2018.html)

検証用に四枚の素晴らしいクオリティのフェイシャルテクスチャを準備
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367001/922ba286-f7b9-7303-422d-6c1ee1c83b44.png)

#完成
あまりにも早い完成
![プレゼンテーション1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367001/0a1f4b6e-b44d-0715-0e0b-287c7dab7a07.gif)

キーフレームを設定するとこんな感じ。
https://twitter.com/i/status/1340549343061798912

作り方はすごくシンプルに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367001/c81866b9-3a25-ccd8-c328-e358fed01d8c.png)
アサインされているマテリアルのColorにChoiceノードでスイッチしたテクスチャを使用する。
SwitchのプロパティのSelecterがどのテクスチャを使用するかのインデックスになっているので、Expressionでマテリアルのアサインされているメッシュに追加したFacial変更用のEnumアトリビュートとバインドする。
Expressionはこんな感じ。めちゃめちゃシンプル。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367001/e0a11ed0-028b-ca0f-8b48-6a6cefe18e70.png)

これでフェイシャルのアトリビュートを変更するとテクスチャが切り替わるようになるので、アトリビュートのキーフレームを設定すればよい。

alphaやbumpmapを使用する場合もswitchとテクスチャをそれぞれ必要な分追加していけば簡単にスイッチできそう。

あとは自動化するなり煮るなり焼くなり、何でもできますね。

Unrealとかに持っていきたい場合はフレームごとに使用しているテクスチャ名をcsvなりで持っていってダイナミックマテリアルインスタンスのテクスチャを切り替えるとか…？ちょっと強引すぎる感が否めない気がしますが、やってやれないことはない感じですね。
どちらにせよエクスポートとインポートに自動化が必要そうです。

# 自動化
あまりにサクッと終わったので自動化について…
といっても取得してconnectしてを繰り返すだけになりそうですが。
後日追記予定

#最後に
簡単な記事になってしまいましたが、誰かの参考になれば幸いです。
明日は[cr_coyote](https://qiita.com/cr_coyote)さんの記事です。
ArgoCD(GKE)でデプロイしてみる

# 概要
継続的デリバリ（CD）ツールのArgoCDをデプロイしてみます。
前回[ArgoCDをGKEにインストールしてみる](https://qiita.com/A9hB5/items/0ab350aef6a83bfdb655 "前回")の続きです。

公式入門ガイドをなぞりつつサンプルアプリをデプロイしていきます。
（入門ガイド:https://argoproj.github.io/argo-cd/getting_started/#5-register-a-cluster-to-deploy-apps-to-optional）

今回環境を再構築してるのでIPアドレス全般・クラスタ名とか少し違います。

# ハンズオン

### 1. デプロイ先のクラスタを作成

```
$  gcloud container clusters create target-cluster --zone us-ceral1-a
```

### 2. デプロイ先クラスタを登録
クラスタ一覧を表示

```
$ kubectl config get-contexts -o name
```
デプロイ先クラスタを登録

```
$ argocd cluster add {TARGET_CLUSTER}
INFO[0000] ServiceAccount "argocd-manager" created in namespace "kube-system"
INFO[0000] ClusterRole "argocd-manager-role" created
INFO[0001] ClusterRoleBinding "argocd-manager-role-binding" created
FATA[0021] Failed to establish connection to 34.85.17.205:443: dial tcp 34.85.17.205:443: operation was canceled
```

接続エラーが発生。なんの確証もなかったがCLIでログインしていなかったことを思い出したのでCLIでログイン。証明書の警告が出るがYESを選択。

```
$ argocd login 34.84.102.51
WARNING: server certificate had error: x509: cannot validate certificate for 34.84.102.51 because it doesn't contain any IP SANs. Proceed insecurely (y/n)? y
Username: admin
Password:
'admin' logged in successfully
Context '34.84.102.51' updated
```

再度クラスタを登録すると成功。

```
$ argocd cluster add {TARGET_CLUSTER}
INFO[0000] ServiceAccount "argocd-manager" already exists in namespace "kube-system"
INFO[0001] ClusterRole "argocd-manager-role" updated
INFO[0001] ClusterRoleBindin![destination.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367760/7a8c65ea-d1b8-7420-4f0e-0aee5e15153e.png)
g "argocd-manager-role-binding" updated
Cluster 'https://35.202.58.143' added
```

### 3. アプリを作成する
UIログイン後、左上の「New App」ボタンをクリックしてアプリを作成。
Githubのリポジトリ含め値はすべて公式のものを使用します。
![argocd-setting-app.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367760/310acc2f-ecd5-2e8f-cda5-da705e1f79bf.png)

Destinationは今回外部のクラスタを使用しているのでそのエンドポイントを設定。
![destination.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367760/df262479-4d5b-767f-093f-933d2e310653.png)

「CREATE」ボタンをクリックして設定を完了します。
アプリを作成した直後はStatusは「OutOfSync」になっています。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367760/b53180de-6354-63de-013c-3243b07f54ae.png)


### 4. アプリをデプロイ（Sync）する
アプリの「SYNC」をクリックするとサイドパネルが出てくるので「SYNCHRONIZE」をクリック。
![synchronize.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367760/7824e751-a706-efa7-9a58-ea1c1150b6b5.png)

ステータスの表示がSyncedに変われば成功。
![synced.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367760/8ef4d9ee-7014-47bd-66a3-5a3f757e7a61.png)

図で表示できてわかりやすい。
![synced-map.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367760/f2a60da6-d02b-1adf-a740-e3d41cc72c05.png)

# おわりに
アプリのデプロイ（Sync）はCLIからでも出来るようですがアプリ全体の状態を把握しようと思うと図の方が断然わかりやすいですね。大規模な環境になってくるとよりそう感じられると思います。今回まででArgoCDのインストール・デプロイと一通りやってみましたが、図の表示など基本的な機能は他のCDツールでもあるので、軽く触った程度の使用では他のツールとの比較は難しいと感じました。
Vue.jsまとめ10　フィルターとミックスイン

下書きが上限に達しているので仮の状態で投稿しています

フィルター #フォーマットさせるのに便利、一括適用

グローバル登録
main.jsに
Vue.filter("名前", function(引数){
 処理内容
})
適用したい箇所で{{ 変数 | 名前 }}
例
Vue.filter("upperCase", function(value){
 return value.toUpperCase();
})
Vue内で
<h2>{{ title | upperCase }}</h2>

ローカル登録 #thisは使えない（derectiveと一緒）
export内で
filters:{
 名前（引数）{
  処理内容
 }
}

{{ 変数 | 名前 | 名前２ }}のように連結させることができる

フィルターは再描画されるのでcomputedの方が良い場合もある

ミックスイン #オプションを共有化（一箇所にまとめる）

使用方法
jsファイルを作成
ファイル内で
export const tokyoNumber = {
 共有したいデータ
}
Vueファイル内で
import { 名前 } from "@/ファイル名"　#@はsrcを示せている
export default {
 mixins:[名前]
}

データが被った場合はコンポーネントのデータが優先

グローバルにもできるが基本的に使わない
Vue.jsまとめ⑨　カスタムディレクティブ

下書きが上限に達しているので仮の状態で投稿しています

使用するにはv-名前

グローバルに登録する
main.js に
Vue.directive("名前",{
　bind(el, binding, vnode){}, #ディレクティブが初めて対象の要素に紐ついた時
　inserted(el, binding, vnode){}, #親Nodeに挿入された時
　update(el, binding, vnode, oldVnode){}, #コンポーネントが更新される時、子コンポーネントが更新される前に
　componentUpdated(el, binding, vnode, oldVnode){}, #コンポーネントが更新される時、子コンポーネントが更新された後に
　unbind(el, binding, vnode){}　#ディレクティブがヒモ付いている要素から取り除かれた時
});

bindとupdateをメインに使う

bindとupdateの省略記法
Vue.directive("border", function(el, binding){
})
#elはhtml要素　el.style.border = "solid black 2px"などのように使う

#bindingはいろんな機能がある
el.style.borderWidth = binding.value　と設定し
v-名前="○px"　などとするとボーダーの幅を変更できる

複数の値を必要とする時
v-名前="オブジェクト"　と設定する
例
<p v-border="{ width: '5px', color: 'red' }">Home</p>
main.js で
Vue.directive("border", function(el, binding){
 el.style.border = "solid black 2px"
 el.style.borderWidth = binding.value.width;
 el.style.borderColor = binding.value.color;
})

引数を扱う
v-名前:引数 #引数は一つのみ
例
<p v-border:solid="">Home</p>
main.js で
Vue.directive("border", function(el, binding){
 el.style.borderStyle = binding.arg #argで引数を持ってこれる
})

修飾子
v-名前:引数.修飾子 #複数個つなげられる
例
<p v-border:solid.round="">Home</p>
main.js で
Vue.directive("border", function(el, binding){
 el.style.borderStyle = binding.arg;
 if(binding.modifiers.round){
  el.style.borderRadius = "0.5rem"
 }
})

ローカル登録
exportで
directives:{
 名前（el, binding）{
  内容
 }
}
例
<p v-border:solid.round="{ width: '5px', color: 'red' }">Home</p>
同じ場所のscript内
export default{
 directives:{
  border（el, binding）{
   el.style.border = "solid black 2px"
   el.style.borderWidth = binding.value.width;
   el.style.borderColor = binding.value.color;
   el.style.borderStyle = binding.arg;
    if(binding.modifiers.round){
     el.style.borderRadius = "0.5rem";
    }
  }
 }
}

ローカル登録の際に
directives内でthisは使えない
Vue.jsまとめ⑧　v-model

下書きが上限に達しているので仮の状態で投稿しています

textarea, inputタグ内でv-model="データ"で双方向データバインディング
入力したらデータを書き換える

v-modelの修飾子
.lazy
フォーカスを外した時に反映させる
.number
typeをナンバーに統一
.trim
前後の空白をカット

textareaの改行を適用させるには
preタグ or style="white-space: pre;"

単体チェックボックスのv-modelはブーリアン（true or false）
複数のチェックボックスの時はv-modelに入れるデータは配列になる（中身は空でおk）
ラジオボタンのv-modelに入れる値はvalueのどれか
セレクトボックスの選択肢はv-forを使う。v-modelはselectタグ内に付ける。初期値は選択肢のどれか

v-modelの中身
#textの場合
:value="eventData.title"
@input="eventData.title = $event.target.value"

#コンポーネントタグの場合
:value="eventData.title"
@input="eventData.title = $event"
子
exportに
props:["value"]
input内に
:value="value"
@input="$emit('input', $event.target.value)"