OmniAICreator/Qiita-1.07M huggingface dataset:
会社用GitHubアカウントでのclone方法 備忘録

弊社では数ヶ月前から自社内において開発を行うこととなり、徐々に参画メンバーが増えていっています。
(何かのサービスを運営するというよりは、社内業務用システムを自社で作ってしまおうという趣旨のものです。)

会社用のGitHubアカウントを個人個人で作成してもらい、各自git cloneして貰おうというところ

**プロジェクトへの認証は済んでいるのにgit cloneできない**

との声が上がったので、備忘録として解決までの工程をまとめます。


## 発生した問題
プロジェクトのリモートリポジトリをgit cloneしようとしても、not foundが出てしまいcloneができない。

```
$ git clone https://github.com/xxxxxxxxx/xxxxxxxxxxx.git

Cloning into 'xxxxxxxxxxx'...
remote: Repository not found.
fatal: repository 'https://github.com/xxxxxxxxx/xxxxxxxxxxx.git' not found
```

## 前提条件
- GitHub上のプロジェクトリポジトリに対して該当のGitHubアカウントは認証されている
- 二段階認証は未設定


## 原因
- ターミナルからのgit cloneにおいて、個人用のGitHubアカウントからプロジェクトリポジトリをgit cloneしようとしてしまっていた。
- このユーザーの切り替えがうまく行っていなかった。

## 問題のゴール
今回はプロジェクトのリポジトリをclone出来れば良いです。
git configなどでユーザーを切り替える方法などもありますが、今回は触れません。
一旦仕事用に切り替えた後、また元に戻すといった作業が面倒だったり、切り替え忘れなどを懸念する人もいました。

## 解決手段
とりあえずは以下の方法。

```
$ git clone https://{ユーザ名}:{パスワード}@github.com/xxxxxxxxx/xxxxxxxxxxx.git
```

会社用のGitHubアカウントのユーザー名、パスワードをそれぞれ該当の箇所に入れた上でgit cloneしました。

弊社では以降の作業は全てSourceTreeに任せてしまっているので、あとはSourceTree側でcloneしたリポジトリを追加しておけば、Gitコマンドを覚えることなく簡単にプロジェクトへ新規参入できるというわけです。
(コマンド覚えられないし裏で何しているのかもわからないから絶対良くないと思う...)

## 最後に
not foundの問題はこれで解消されました。
ただ解決方法に関して一時凌ぎ感が強いので、もっとスマートな方法があるのではと思っています。
引き続き模索していきます。
AWSのEC2にSSH接続できない（Permission denied (publickey).と出る）

# 環境
- macOS
- EC2
- AMIは、Deep Learning AMI (Ubuntu 16.04) ← ここがミソ

# 問題
- ローカルのターミナルから、EC2インスタンスにログインする際に、

```
$: ssh -i keypair_for_xxxx.pem ec2-user@xx.xx.xx.xx
ec2-user@xx.xx.xx.xx: Permission denied (publickey).
```
とエラーが出てログインできない。

- なお、プライベートキーへの権限やpathなどは問題ない

# 原因
ユーザー名が`ec2-user`ではなく、`ubuntu`だった。
今まで、Railsで開発したアプリケーションを動かしていたため、AMIとしてAmazon Linux 2 または Amazon Linux AMIを用いてきた。そのユーザー名が`ec2-user`だったため、デフォルトでユーザー名は`ec2-user`だと思っていた。
しかし、AMIが異なるとユーザー名が異なることが分かった。

```
Amazon Linux 2 または Amazon Linux AMI の場合は、ユーザー名は ec2-user です。
CentOS AMI の場合、ユーザー名は centos です。
Debian AMI の場合は、ユーザー名は admin です。
Fedora AMI の場合、ユーザー名は ec2-user または fedora です。
RHEL AMI の場合は、ユーザー名は ec2-user または root のどちらかです。
SUSE AMI の場合は、ユーザー名は ec2-user または root のどちらかです。
Ubuntu AMI の場合は、ユーザー名は ubuntu です。
```
参考: https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/managing-users.html

# 解決
以下のようにユーザー名を変えたら接続できた。

```
$: ssh -i keypair_for_xxxx.pem ubuntu@xx.xx.xx.xx
```
手紙～拝啓新卒エンジニアのきみに～2021

## 新卒エンジニアのきみに

エンジニア歴ももうすぐ30年になるんだけれども。

もともと趣味でプログラムを書いていたし、C言語さえ覚えればあとは一生勉強せずに食っていけると思っていたんだけれども、今ではそんな言語はほとんど見ることも無くて、新しい言語やフレームワークがものすごいペースで登場と退場を繰り返していて。

時を越えて役に立った、最初から知ってればよかったことを手紙にしておこうと思う。


## 読む：9割 / 書く：1割

職業エンジニアの仕事としては、プログラムを1から書く(フルスクラッチする)プロジェクトは少ない。
スタートアップ企業などで1から書くことももちろんあるが、オープンソースや外部ライブラリ・フレームワークを組み合わせてプログラムを作り、全て自分で作らないケースが大半である。

工夫して自分なりのコードを書くのがプログラミングの醍醐味であるし、達成感も大きいが、全く分からない巨大なスパゲッティーソースから必要な情報を探す能力を上げることも視野に入れよう。結果としてプログラミング上達の近道にもなるから。

そして、優れたオープンソースやライブラリの大半は海外製なので英語もGoogle翻訳を駆使して読めるようにしておこう。


## 写経

昔はプログラミングの勉強をしようと思ったら、数千円の書籍を購入する以外に方法がなかったが、今は便利な世の中で github などに優れたソースコードが大量に存在している。

手頃なサイズで興味のありそうなコードを探して、手で打って動くようにしよう。

退屈な教科書の様な書籍から得られる情報よりはるかに多くの情報が得られるはずだ。
英語の文法を何年も習ってるのに、英文を書けるようにならない理由はシンプルで、**書いてないから**だ。
if文が分からない、for文が分からないと悩むより、**心を無にして写経をする方が救いがある。**

自分で考えたコードは最高にカッコいいし、書いた達成感もあるが、それは自分のモノサシの中での最高だったりする。
世界の超絶にカッコいいコードをたくさん読んで、自分のモノサシと一般的なモノサシを近づけてほしい。


## コーディングは外部設計の翻訳作業

PG（プログラマ）で数年間経験を積んだらSE（システムエンジニア）として外部設計を行うというキャリアパスは一般的だと思うが、コーディングと外部設計が全く別の工程と考えられているケースが多い様に思う。

「美しく、読みやすいプログラムは？」という問への一般的な回答は以下だと思う。
- 適切なコメントが書かれている
- クラス名や関数名や変数名が分かりやすい
- デザインパターンに沿って設計されている

ところでこの **「適切な」** とか **「分かりやすい]** とかってなんだろう？
変数名のルールを分解すると「動詞」+「名詞」、キャメルケースなど体裁を整える方法はよく見かけると思うが、これは仕様書で言えば「体言止めで書こう」といったレベルのルールであり、仕様書全体の読みやすさには大きな影響はあるが本質ではないことが理解できると思う。

**「分かりやすい」** 仕様書は、 **「ストーリーがきちんとできてる」** 仕様書だと思う。粒度の粗い概要などの話題から始まり、章立てが正しく構成され、自然な流れで物事が説明されている仕様書が分かりやすいのではないだろうか？

業務プログラムのコーディング（主にビジネスロジック部分のコーディング）は、そのストーリーをそのままコンピューターが理解できる言語に翻訳する作業だと思う。

当然、それだけでモノができるのは「ローコード」「ノーコード」と言われているツールだけであって、外部設計以外にも莫大なコードが存在するが、「ある一定の断面」を切り取った時に、外部設計のストーリーが読み取れる様に書かれていると「分かりやすい」プログラムになると思う。
ソースを読む人間が持っている前提知識は、外部設計や要検定義など前工程の知識しかないはずだから。
言語を理解していれば読めるハズ、は、日本語が理解できれば、物理や科学の本を読めるハズと言っているのと変わらない。

**この様に考えて作業をしていれば、外部設計も自然にできるようになっている**はずなので、コーディング作業から外部設計へとキャリアを変えていく時の痛みが少ないと思う。

デザインパターンに従って、隙きのないクラス設計を行うのは尊いし価値もあるが、外部設計に従ってコーディングすることにも同じくらい価値があると思う。


## プログラム以外のこともやる

わたしの場合、小さなゲーム屋にいたので割と何でもやっていた(画面デザインや簡単なアイコン作成、シナリオ、Webライティング、PM…)ので意識せずに視野を広げることができたと思う点がある。

業務プログラマーをやっているとプロジェクトのゴールは単一であることが多いと思う。
製造物がプログラムのみで、それが完成すれば試験して納品となるため、「バグの量」「完成までの時間」などが成果物に対する尺度であり、知覚できることが少ない。

一方、ゲームのプロジェクトはそうではない。
グラフィッカーは依頼された画像リソースを完成させるのが彼らのゴールであり、彼らのプロジェクトはそこで終わりである。
サウンドやシナリオも同様であるが、プログラマは、受け取ったリソースをゲーム上で動く形にするのがゴールである。最後にバトンを握って、リソースに不備があると修正依頼を出して嫌な顔をされながら直してもらうことになる。

マテリアルデザインが業務アプリの世界にも侵食しつつあり、ガチ業務エンジニアのあなた達も、リア充っぽいデザイナー達と仕事をするようになってくることが想像される。

ここで理解してほしいのは、誰がいいとか悪いとかではなく、**自分と大きく価値観が異なる人間**がプロジェクトに存在すること。
製品を開発するプロジェクトにおいて、**「プログラムを書くことはごく一部の工程」**であること、プロジェクトには色々な立場の人が参画していること。**自分の立場のみを主張していると、製品の開発などできない**ということ。


## 「技術が分からないから管理をやる」は超高難易度

このようなことを考える方は割といると思う。

「管理」という仕事が仕事を右から左に流すだけの仕事であれば、可能かもしれないが、見積もりやwbsの作成、メンバーのサポートや教育など、どれを取っても基礎的な技術なしで簡単にできるものはないと思う。

**そもそも、右から左に流すだけの仕事は存在しない。**誰か特定の人間に頼む必要がある仕事ではないからだ。


## 新卒エンジニアのきみに

技術の遷移を見ていると勉強しなくてよくなる日はこなそうです。
最近のプログラム言語は昔の言語に比べると簡単だし楽しいですし、どうせやらなければいけないことであれば、楽しくやれるようにポジティブに色々なことに取り組んでもらえたらと思います。

よかったらこちらの記事も合わせてご参照ください：

https://qiita.com/kaku3/items/abe98001f74025cec422
switch文

# 用途

- ある式や値が複数の値を取りうる
- それぞれの値に応じて処理を変えたい
- 式と値が一致した処理を実行する

#構文
```php
switch（式） {
    case 値１:
        //式の結果が値1と等しいときに実行する処理
        break;
    case 値２:
        //式の結果が値2と等しいときに実行する処理
        break;
    case 値3:
        //式の結果が値3と等しいときに実行する処理
        break;
    default:
        //式の結果がどれにも該当しないときの処理
}
```
Fusion 360の電子回路設計でワイヤーネットの太さを変える方法

ワイヤー（net）のデフォルトの太さ、ビアホールのデフォルトのパッドの広さを変更したときのメモです。

## ワイヤー（net）の太さ

`RULES DRC/ERC`の `Class`を選びます。

![Screen Shot 2021-04-03 at 14.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/9dad597c-8965-93d2-016b-3641db2781a1.png)

ここで `Rules` タブをひらいてデフォルトの `Width`を調整することができます。

![Screen Shot 2021-04-03 at 14.13.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/dfe9b2c5-ff37-d260-cf54-a9ba8c99ed5b.png)

## ビアホールのパッド

ビアホールのパッドは DRCのほうを選びます。

![Screen Shot 2021-04-03 at 16.06.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/2c91237c-3b17-122e-81a7-4637c57947d7.png)

Annular Ring の Viasで OuterとInnerを調整してパッドの広さを調節することができます。

![Screen Shot 2021-04-03 at 14.17.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/110ba27f-85b7-5900-09af-03f9c90ef162.png)
streamlitで変数の状態を維持する

**※注意**
本記事はstreamlit version 0.84.0以前の記事となります。
Streamlit version 0.84.0にてSession State機能がリリースされたため、本記事で行っているようなSession管理を自前実装する必要はなくなりました。
詳細は公式ドキュメントを参照ください: https://docs.streamlit.io/en/stable/add_state_app.html

---

こんにちは。
streamlitを使っているとき、その挙動の特殊さに苦労することが多いです。
今回は変数の状態維持についてどのように実現するかを書きます。

github: https://github.com/irisu-inwl/streamlit-state-test

### 現象
ボタンを押すとcountが増加、減退するアプリケーションを作ろうとします。
以下のようにコードを書くと、一回目の施行は成功しますが、以降ボタンを押しても変数は`+1`, `-1`から動きません。

```python
import streamlit as st


def main():
    st.title('Counter App')
    count = 0
    increment_count = st.button('count +')
    decrement_count = st.button('count -')
    if increment_count:
        count += 1
    if decrement_count:
        count -= 1
    
    st.write(f'count: {count}')


if __name__ == '__main__':
    main()
```

run app

```
docker run -itd -v $(pwd)/src:/opt/streamlit/src -p 8080:8501 --name streamlit-state streamlit-state streamlit run src/wrong_app.py
```

結果:

https://twitter.com/irisuinwl/status/1378238672231751680

### streamlitの実行順序

streamlitの実行順序をおさらいします。
streamlitの公式ドキュメントでは、streamlitの挙動として、アプリのrendering後にユーザーによるイベント発火でスクリプトを再実行するとあります。
そのため、ボタンを押した際に毎回`count = 0`が実行され変数が初期化されてしまい、`+1`,`-1`の状態となってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299097/cec08563-ea81-614d-bbd2-d82ba20d6508.png)
引用元: 

https://docs.streamlit.io/en/stable/main_concepts.html#app-model

### 対処

では、変数の状態を維持するためにはどうするか、というと、以下のstreamlit communityの記事にてセッションの状態を管理する方法が記されております。

https://discuss.streamlit.io/t/multi-page-app-with-session-state/3074

[引用されてるコード](https://gist.github.com/okld/0aba4869ba6fdc8d49132e6974e2e662)にある`_SessionState`クラスを利用して、先ほどのアプリを以下のように改良します。

```python
import streamlit as st
from src.session import _get_state


state = _get_state()

if state.count == None:
    state.count = 0


def main():
    st.title('Counter App')
    
    increment_count = st.button('count +')
    decrement_count = st.button('count -')
    if increment_count:
        state.count += 1
    if decrement_count:
        state.count -= 1
    
    st.write(f'count: {state.count}')


if __name__ == '__main__':
    main()
```

まず、`_SessionState`クラス, `_get_state()`, `_get_session()`を`session.py`に書きます。([こんな感じ](https://github.com/irisu-inwl/streamlit-state-test/blob/master/src/session.py))
そして、アプリケーション実行時に`count`を初期化します。その際に`_SessionState`にcount変数の状態を保存するため`state.count`を参照することで、アプリケーションのイベントが発生で初期化されないようにします。

以降アプリケーションコードで状態を管理したい変数は`state`から参照すれば以下のように状態が保持されます。

https://twitter.com/irisuinwl/status/1378238184337801219

### おわり
streamlitで変数の状態を管理する方法を紹介しました。
streamlitはめちゃめちゃ便利ですが、使う上で、その挙動について知ることと、何が出来て何ができないかを知ることが大切だと思います。（任意のことにも言えますが）
では。
体脂肪判定プログラム

Python学習の一環で体脂肪判定（BMI)プログラムを作ってみました。体形・健康維持も考え、BMI数値だけでなく、数値から現状判断ができるようしています。

BMIは【体重（kg）÷身長（m）÷身長（m）】で求められる数値で、肥満度を測るものとして広く利用されています。 例えば身長165cm、体重65kgの人のBMIは、【65÷1.65÷1.65＝23.8】となります。 BMIが18.5未満なら“痩せている”、25以上なら“肥満”と判定されており、ココでは、　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　①　痩せています。　
②　現状維持していきましょう！　
③　ダイエッットしましょう❣　の３つに分けてみました。

自分で体重、身長を入力してBMIを計算できるようします。

####フロー：
①身長を入力する。
②体重を入力する。
③BMIを計算する。(体重(kg) / 身長 **2)
④BMIから判定する。
⑤出力する。

```python
#浮動小数点まで求めるため、float関数使う。
h = float(input('身長を入力してください。>'))/100
w = float(input('体重を入力してください。>'))
bmi = w / h ** 2
print(f'BMI={bmi}')
if bmi <= 18.5:
    print('痩せています。')
elif 18.5 <= bmi <25:
    print('現状維持していきましょう！')
else:
    print('ダイエッットしましょう❣')
```

**結果**
いずれにも、ダイエッット必要です。
```
身長を入力してください。>175
体重を入力してください。>78
BMI=25.46938775510204
ダイエッットしましょう❣
```
Typescript 奮闘記 No.03 『Class編』

# Objectの構造を定義するもの

type alias, interface, class ってやつがある。

## Interface編

https://qiita.com/ikkitang/items/7a12be1dcc497044a1d2

## Type Alias編

https://qiita.com/ikkitang/items/b2dd9b497428cedc1bb0

という事で今回は Class編

# Class 

色んな言語で採用されている手法。 Class は Interface や Type Alias よりも多くの機能がある。

## 定義や使用方法

定義としてはこんな感じ

```typescript
class Item {
  name: string;
  unitPrice: number;
}
```

使用時は `new` というキーワードを使用してインスタンスを生成して使う

```typescript
const pen = new Item();
pen.name = "ペン";
pen.unitPrice = 100;
```

コンストラクタというインスタンスの初期化を行う関数を定義して、それを利用してインスタンスの初期化を行う事もできる。


```typescript
class Item {
  name: string;
  unitPrice: number;

  constructor(name: string, unitPrice: number) {
    this.name = name;
    this.unitPrice = unitPrice;
  }
}

const pen = new Pen("ペン",100);
```

また以下のように Constructor のパラメータの前に`public`キーワードを設定する事で、プロパティを実装する事もできる

```typescript
class Item {
  constructor(public name: string, public unitPrice: number) {
    this.name = name;
    this.unitPrice = unitPrice;
  }
}

const pen = new Pen("ペン",100);
```

## classの機能

### methodの実装

TypeやInterfaceでは出来ないが、Classにはできる事の一つとしてメソッドの実装を定義することができる点 ( totalPrice を わざわざ const で宣言する必要無いって話はおいておくとしてｗ

```typescript
class SaleRow {
  item: Item;
  count: number;

  getTotalPrice(): number {
    const totalPrice = this.item.unitPrice * this.count;
    return totalPrice;
  }
  
}
```

### InterfaceのImprement

Interface と Class を併用したりもできます。

```typescript
interface SaleRowInterface {
  item: Item;
  count: number;
  getTotalPrice(): number;
}

class SaleRow imprements SaleRowInterface {
  item: Item;
  count: number;
  getTotalPrice(): number {
    const totalPrice = this.item.unitPrice * this.count;
    return totalPrice;
  }
}


```

### classの拡張

```typescript
class Item {
  name: string;
  unitPrice: number;
}

class HaveTaggedItem extends Item {
  tags: string[];
}
```

### 抽象クラス（Abstract Class）

継承のみ可能でインスタンス化出来ないClass 

```typescript
abstract class Item {
  name: string;
  unitPrice: number;
}
```

expirationDate(賞味期限)プロパティを持つ食品専用のclassを定義する事とかができる.

```typescript
class FoodItem extends Item {
  constructor(public expirationDate: Date) {
    this.expirationDate = Date;
  }
}
```

メソッドに abstract をつける事で、 小ClassではcalcInTaxを実装する必要がある（軽減税率とかつらいですよね

```typescript
abstract class Item {
  name: string;
  unitPrice: number;
  abstract calcInTax();
}
```

### アクセス修飾子

`private` や `public` などのアクセス修飾子をつける事でアクセスの権限を調整できる

```
class Item {
  name: string;
  unitPrice: number;
  private tax: number;
}
```

### getter / setter プロパティ

getter や seｔterが定義できる.

```
class Item {
  name: string;

  private _unitPrice: number;
  get unitPrice(): number {
    return this._unitPrice || 0;
  }
  set unitPrice(value: number) {
    if (value < 0) {
      value = 0;
    }
    this._unitPrice = value;
  }
}
```

Staticとかあるけど、他の言語と同じようなイメージで理解できるので、一旦おいておく。
QiitaやGoogleなどで使える、クオートで囲うBookmarklet作ってみた


#クオートで囲うの面倒くさい

選択して`"`や`shift+@`で囲ってくれるエディターの便利機能に体が慣れてしまった。
誰か作ってるだろうけど、練習用に作ってみた。

#使い方

* コピーしてブックマーク編集のURL欄に貼り付け、使いたい場面でそれをクリック。
* カーソルが十字になる。
* 文字を選択して`` ` ``とか`"`とか`{`とか押すだけ。詳しくはソース参照。

```js:bookmarklet
javascript:
/* eslint semi: "error"*/
(() => {
  function sandwich(p1, p2) {
    if (p2 === undefined) {
      p2 = p1.slice(p1.length / 2);
      p1 = p1.slice(0, p1.length / 2);
    }
    var textarea = document.activeElement;
    var pos_start = textarea.selectionStart;
    var pos_end = textarea.selectionEnd;
    var val = textarea.value;
    var range = val.slice(pos_start, pos_end);
    var beforeNode = val.slice(0, pos_start);
    var afterNode = val.slice(pos_end);
    var insertNode = p1 + range + p2;
    textarea.value = beforeNode + insertNode + afterNode;
    textarea.setSelectionRange(pos_start + p1.length, pos_end + p1.length);
  }
  function handleKeydown(ev) {
    var el = ev.target;
    if (!['TEXTAREA', 'INPUT'].includes(el.tagName)) return;
    if (el.selectionStart === el.selectionEnd) return;
    var pd = () => ev.preventDefault() || true;

    if (ev.key === '`' && ev.ctrlKey) return pd() && sandwich('\n```\n', '\n```\n');
    if (ev.key === '`') return pd() && sandwich('``');
    if (ev.key === '{') return pd() && sandwich('{}');
    if (ev.key === '[') return pd() && sandwich('[]');
    if (ev.key === '(') return pd() && sandwich('()');
    if (ev.key === '~') return pd() && sandwich('~~~~');
    if (ev.key === '*') return pd() && sandwich('****');
    if (ev.key === '_') return pd() && sandwich('__');
    if (ev.key === '"') return pd() && sandwich('""');
    if (ev.key === '\'') return pd() && sandwich('\'\'');
    if (ev.key === '>') return pd() && sandwich('> ', '');
    if (ev.key === 'L' && ev.ctrlKey) return pd() && sandwich('[](', ')');
    return true;
  };
  /* main */
  document.addEventListener('keydown', handleKeydown, {once: !true});
  document.title = '@' + document.title;
  var style = document.createElement('style');
  style.textContent = 'textarea,input{ cursor: crosshair;box-shadow: inset #f005 0px 0px 20px 0px;}';
  document.body.appendChild(style);
})();
```
#作ってみて分かったこと
* 書き換えた瞬間、編集履歴が消える。
    * `ctrl+z`で戻れない
    * ブラウザIDEとかは戻れるし、別の方法があるんだろうなあ。
    * Qiitaで補助機能発動で編集履歴が消えることあるのはこれかあ。
* Qiitaでは、書き換えの直後はプレビューに反映されない。
    * ev.preventDefault()してるからかな。
* 日本語入力中だと、なんかおかしい。 
* 総合的に、そんなに便利じゃない。
* ```` ``` ````は`ctrl`か`control`のコンビネーション。
    * alt系にしたかったけど。Macで`ev.key`が不明になり諦める。
* Qiitaにドラッグアンドドロップで使えるリンクを作れなかった。
    * markdownのリンク書式にコードを改行消して入力してみたが、括弧の認識がずれて無理だった。
* Bookmarklet Builder
    * http://subsimple.com/bookmarklets/jsbuilder.htm
    * が let const に対応してなかった。
* bookmarkletはセミコロン必須、コメントアウトはブロック。
    * スペースや改行は削除せずそのままで良い。
* 動作してるかどうか分かる何かが必要。alertは邪魔くさい。
    * カーソル変化は楽で良いと思った。bodyでなくtextareaに。
    * 背景色やoutlineも考えたけど、条件が様々だから決めれないし、アクティブ時に上書きされたりする。
    * ポップみたいなもの。邪魔になる。イベントでdisplay:noneすればいけそう。
* vscodeで`javascript:(123)`て書いても怒られない。
    * ラベルはまだ良くわからない。
* アロー関数のが短いので使っていたが、ソース的に分かりにくいのでnamed function?にする。


#参考にさせてもらったページ

https://qiita.com/bbbar326/items/d68f0ffb268c0678750c
Rails パーシャル

#【Rails パーシャル】

Railsでは、複数のビューで共有するビューをパーシャルとして切り出すことができる。

##Rails パーシャルの基本

新規作成画面と編集画面でほぼ同じの作りである場合など、それぞれにフォームを記載していると冗長であり、修正が大変になる。無駄が多い。
　→　共通のものはパーシャルとして再利用する。

　**・可読性アップ**
　**・再利用性もアップ**

####ファイル名の先頭にアンダースコアを付ける。

例） _form.html.erb

####パーシャルを呼び出すには、renderメソッドを使用。

例） <%= render partial: 'form' %>

####パーシャル内でインスタンス変数は使用しない。

部分テンプレートの依存度が高くなる。

##参考

>3.2 パーシャル
部分テンプレートまたはパーシャルは、出力を扱いやすく分割するための仕組みです。パーシャルを使用することで、ビュー内のコードをいくつものファイルに分割して書き出し、他のテンプレートでも使いまわすことができます。

>3.2.1 パーシャルの命名ルール
パーシャルをビューの一部に含めて出力するには、ビューでrenderメソッドを使用します。

>　<%= render "menu" %>

>上の呼び出しにより、_menu.html.erbという名前のファイルの内容が、renderメソッドを書いたその場所でレンダリングされます。パーシャルファイル名の冒頭にはアンダースコアが付いていることにご注意ください。これは通常のビューと区別するために付けられています。ただしrenderで呼び出す際にはこのアンダースコアは不要です。以下のように、他のフォルダの下にあるパーシャルを呼び出す際にもアンダースコアは不要です。

> <%= render "shared/menu" %>

>上のコードでは、app/views/shared/_menu.html.erbパーシャルを読み込んで使用します。

>3.2.2 パーシャルを活用してビューを簡潔に保つ
すぐに思い付くパーシャルの使い方といえば、パーシャルをサブルーチンと同等のものとみなすというのがあります。ビューの詳細部分をパーシャルに移動し、コードの見通しを良くするために、パーシャルを使うのです。

[Railsガイド](https://railsguides.jp/action_view_overview.html#%E3%83%91%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB) 参照
Google／Web Scraper 1分間チートシート

しょっちゅう忘れてしまうので、自分用にまとめる

##手順
* スクレイビングしたいネットのソースを探す（ＵＲＬ）
* 明らかにリンク先と考えられるリスト欄を探す。→　ロボットがそこをベースに探しに行く

##chrome developer
#### URL登録
* Web Scraperのタグを選ぶ
* Create new sitemap　→ Create sitemapを選択
* Sitemap name→適当　、Start URL→調べたURLをコピペ

#### LINK先
* Add New Selectorを選択
* id →　LINK、TYPE　→　LINK
* multiple　→　チェック
* selectタブをクリック
* 一層目としてLINK　Aタグが入っていそうなものをクリック
* Pボタン(PARENT）で親をさかのぼり、親ノードを探す（赤くなる範囲が選択要素）
* Done Selectingを押す　→　selector　に　htmlノード名が入る
* 例）ul.lcp_catlist →　このままだとA要素が選択されない
* 例）ul.lcp_catlist a　→　A要素を足す（ここが最大重要ポイント）
* Data viewを押す

こんな風にリンク先が取れていればＯＫ

####Data Preview
|link|_followSelectorId|link-href|_follow|
|---|---|---|---|
|リンク先URL|	link|	https://xxxxx|	https://xxxxx|

####TEXT
* 本文があるページに飛ぶ
* linkを選ぶと、`_root　/　link`に表示が変わる
* Add New Selectorを選択
* id →　TEXT、TYPE　→　TEXT
* multiple　→　チェック
* selectタブをクリック
* 欲しいテキストが入っているHTML要素を選択
* Done Selectingを押す　→　selector　に　htmlノード名が入る
* Data viewを押す

→　これで１ページのテキスト内容を入手できれば、設定は終了

####SCRABING
* sitemap →　scrabingを実行する
* ページが切り替わり、どんどんスクレイビングされる
* export data as CSV →　CSVに落とす
* VSCODEでCSVを開く
* 改行含めて、不要タグを外す

例　イメージタグの場合
```<img[\n\s\S]*?>```



#WEBページの綺麗さに惑わされないこと


最近、どんどんWEBページが美しくなって、装飾に圧倒されてしまうことがある。

しかしながら、蓋を開けてしまえば、所詮ＣＭＳのコンテンツなんて言うものは、
人間が書いたテキストデータなので、あまりに時代の変化に一喜一憂しないほうが
いいのかと最近考えている。

例えばこのページ
https://tabi-labo.com/

もうノッケから、WEBデザイナーさんがかなり頑張っている感があって、
こんなに魅力的なサイトって、自分では無理っなんて思ってしまうと、
この先、自分がエンジニアとしてやっていけるのかなんて不安になってしまう。

#WEBを裸に・・・

というわけで、最近は人様のWEBページを見ながら、スクレイビングを試みている。

#やり方
一番簡単なのは、googleのWeb Scraper - Free Web Scraping

https://chrome.google.com/webstore/detail/web-scraper-free-web-scra/jnhgnonknehpejjnehehllkliplmbmhn?hl=ja


#結果

使い方学習　約３０分
https://tokidoki-web.com/2020/10/%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%AEchrome%E6%8B%A1%E5%BC%B5%E3%80%8Cfreewebscraping%E3%80%8D%E3%82%92%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%A6%E3%82%84%E3%82%93/#i-2

スクレイビング　約３０分

あっちゅうまに、コンテンツの中身が丸裸に・・・

#こつ

* リンク先　→　link　を選ぶ、セレクタ要素は**** a（スペース開けること）、 マルチにすること
→　欲しい記事に、たどり着くまで、上記を繰り返すこと

* テキスト　→　TEXT　を選ぶ。


#結論

結局はWEBはテキスト情報。
コンテンツをスクレイビングして、あとは自然言語処理して、分類→要約→選別

なんとなく、WEBとの付き合い方を学んだ気がしました。
データをエクセルで管理するときの９つの注意点

#はじめに

メロスは激怒した。必ず、かの邪智暴虐の神エクセルを除かなければならぬと決意した。メロスにはVBAがわからぬ。メロスは、ただの事務員である。簡単な関数を使い、FileMakerと遊んで暮して来た。けれどもセル結合に対しては、人一倍に敏感であった。

春です。これから新たな業務に取り組む人も多いでしょう。データをエクセルで管理するとき、注意したい点をまとめました。

##好ましくない例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140682/f88dec06-9a18-0a18-a5fa-7ad199d236a3.png)


##好ましい例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140682/c612d5ca-c2b6-5c1b-841c-70069734bc8b.png)



#注意点
- セル結合は使わない
- 1行1レコードにしよう。N行1レコード(Nは2以上の自然数で気分によって増減)は後任が死にます
- 列には同種の情報だけをならべよう  
  良い例: A列に整理番号、B列に受注日、C列に受注数(数字のみを書く)  
  ダメな例：A列に整理番号顧客名タイトルを縦に羅列  
B列に個数を書くが3、4個、5ケ…のように数字のみと単位付きがごちゃまぜ  
- 1セル1情報にしよう  
  良い例：1セルに1つの日付  
  ダメな例：1セルに改行で日付を2個書く、山田太郎(2021/4/4～)のように担当者と変更日を書く
- 1セル中にやむなく情報を羅列する場合、せめて区切り文字は統一しよう  
  良い例：A社、B社、C社、D社、E社  
  ダメな例：A社、B社 C社/D社/E社    
- 日付や数字を書く列にメモ(文字列)を書いてはいけません
- セルの見た目がいっぱいになったからといって近くのセルに続きを書いてはいけません
- 塗りつぶしや文字色のように色だけで情報を伝えない。緊急、特殊、中止とか書く列を作ろう。色を使うなら、せめて同じ情報は同じ色を使おう(特にグレーは間違えがち～＾＾)
- 顧客名や種別は表記ゆれに注意。統一しよう。株式会社にゃんこさん ㈱にゃんこさん、中止、中断、待ち、待機など
- 罫線を使うなら一種類だけにしよう。行単位の編集作業が楽になるよ

※コメントいただいた点を追記しました。
 


##おわりに
いい感じのデータがいただけると聞いていたら神エクセルだったときの悲しみから書いた。ファイルやシートもいくつかあってそれぞれ列要素が違う。わかる…気持ちはわかるんだよ。印刷するなら上の形にしたくなるよね。下の形だと右端で切れちゃうもんね。データ管理用と印刷用のレイアウトを分けたらいいんだけどね。めんどくさいよね。結果、上の形になるよね。

で、でもね、データベースにデータ入れるときは下の形に整形しないと入らないんだー。下の形にしておくと、数年後データベースに変えようってなったときに焦らなくてすむよ！あと、下の形のメリットとしては、検索や編集が楽になるよ！2020年中の受注出してって言われてもさくっと出せるし、件数もわかりやすいし、会社名の変更とかもやりやすいよ！データの並び替えやフィルタ機能も使えるよ！あと、後任が死なないよ！

もっと知りたい子は正規化って言葉でググろう。知らんけど。というか注意点とかえらそうに書いてみたけど、きっとツッコミどころ満載だと思います。しかしそれを恐れていてはアウトプットなど出来はしない！お気づきの点がありましたら教えてくださいまし～。
LinuxMint Eclipseの日本語化によるエラー

#本記事で解説すること
Eclipseを日本語化し、ランチャから起動させたときにエラーが出た場合。
>win10でjavaの勉強中、ネットに落ちていたSwingのサンプルコードを使用したところなにを間違ったのかOpenJDKが死んだ。同じようなエラーが出た人を探すと「再インストールで治った」とのこと。Win10で再インストールしてもいいなと思っていたが、USBに入れてあるLinux mint 20でJava環境を作ったほうが早いなと考えて方針を切り替えた。しかし、この男、Linuxはど素人である。3日間、英語と日本語とLinuxにいじめられた。その中で、LinuxにEclipseを導入するまではなんとかうまく行ったが、日本語化でかなりやられたので備忘録がてら参考にしてほしい。
私のような初心者へ
・いろいろなサイトを徘徊して、参考にしながらインストールしたほうが良い。
・私のような初心者向けに1から10まで丁寧に解説してくれるサイトは残念ながらない。
・一人で悩まずにLinuxに詳しい人を探して質問しよう。
・荒波に揉まれまくるか、Winに逃げるかの二択なのだ。
→多分、私は数日後にWinに逃げる。

なお、二作目の記事なので温かい目で・・・

#Eclipseの導入・日本語化まで
今回はこちらのサイトを参考にさせていただいた。
[Eclipse（2019年12月版）のインストール，日本語化，基本操作（Ubuntu 上）](https://www.kkaneko.jp/tools/ubuntu/linux_eclipse.html)
なお、PleiadesのTXTにちゃんと説明がある。
>ダウンロードした場所/pleiades/readme/redme_pleiades.txt
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1265249/5fa3b60d-8fac-51e5-f23b-6b2b222a5976.png)

#ランチャからの起動
ここで、下のようにランチャから起動しようとした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1265249/9f634418-e293-abdf-33fb-3e225dd53347.png)
そうすると、謎のエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1265249/305cd3bb-5658-c988-cfbc-34bc2f8ceb9e.png)
同じような症状の人を探すとこちらのサイトがヒットした。
[インデックス » 開発環境 » Eclipse を起動したあと時間が経つとエラーがでる。](https://forums.ubuntulinux.jp/viewtopic.php?id=19346)

##解決方法

**結論:フルパスにする**

先程、Eclipse/eclipse.iniに入力した
[-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar]
を
[-javaagent:/home/ユーザー/~~~/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar]
のフルパスに書き換えるだけ。

↓変更後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1265249/1b218047-d843-4268-8420-0ef8a341d01f.png)
ちなみに、私はこれに1日を費やした。
条件分岐

# if文


```php
if (条件式){
処理内容1 //条件式を満たす場合にのみ実行する
}
else{
処理内容2 //条件式を満たさない場合にのみ実行される
}
```
```php
const score = 70;
if (60 > score ){
    console.log ("不合格");
} else if (60 <= score && score < 80){
    console.log ("おしい！");
} else if (80 <= score){
    console.log("合格");
}
```




### 論理演算子

- && …かつ
- || …または
- ! …〜でない（否定）
【Android Studio】XML初心者がぶつかったConstraintsの壁


こんにちは。半月くらい前に初めてAndroid StudioでXML周りを触りはじめた初心者です。
いつもはデザインのことをメインでやっていて、難しいコードのことはあまりわかっていないので温かい目で見て頂ければ幸いです。

今日は、XMLをやりはじめて私が一番つまったConstraintsのことについて覚え書き程度にまとめたいと思います。



#Constraintsとは

そもそもConstraintとは、英語で「制約」を表す言葉です。
テキストビューやボタンなど、配置したもの同士の関係性を設定できるものだとイメージしてみると良いかもしれません。

具体的には
・画面の左端からこれくらい離れたところに設置したい
・このボタンとこのボタンはこれくらいの幅をあけて設置したい
みたいなのを設定できるという感じです。

#Constraintsの設定の仕方

Constraintsがなにものかちょっとだけわかったところで、じゃあどうやって設定するんだというところに入ります。
![スクリーンショット (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273361/b1e3f29d-6404-ad64-3090-3556acb031de.png)

上のスクショのように、〇をつかんで基準にしたいところまで引っ張ります。
このスクショではHello,Worldと書かれたTextViewの基準を、画面の一番上に設定したいので上に向かって引っ張っています。一番端までもっていくとたぶんTextViewが画面の天井まで飛んでいきますがそういう仕様なのでOKです。

![スクリーンショット (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273361/1e13fa30-1937-99f8-2251-ff8a55aa55ab.png)

左側と上側のConstraintsを設定したところです。
が、端にありすぎてこれではとっても見づらいのでもうちょっと右下におろしたいと思います。

![スクリーンショット (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273361/73725bc3-2505-b28e-c7a3-7e606a63d696.png)

Android Studioの画面右側に上の画像のような表示があります。
いまは左の数字も上の数字も0となっています。ここの数字が、さっき設定した基準になるところからどれくらいの幅をあけるの？という設定ができるところです。今回はとりあえず左32上24くらいで設定します。

ちなみに、画像下部のStart→StartOf parentなどで基準が今どこになっているかを確認できる（今は画面端を基準にしているのでparentと表示されています）ので、たくさんのボタンなどを設定し始めてどこが基準になっているかわからなくなったときはここを確認するといいです。
![スクリーンショット (22).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273361/d200e4a4-0ae9-9eb2-24c6-af600381a6b9.png)

左32上24で設定しました。ちょっと右下にずれたので多少さっきよりは見やすくなったと思います。
こんな感じでConstraintsの設定は終わりです。

基本的にConstraintsは、左右と上下を各１つずつは必ず設定しなければいけません。
（画面のどこに配置するの？というのを表しているので、これがないままデバッグすると配置したものが画面のどこにあるかとか空気読んでくれないみたいです。）
* * *
![スクリーンショット (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273361/94119181-123d-05c1-b572-1fab41ebbdda.png)

補足として、今回は上と左しか設定しませんでしたが、上下両方や左右両方を設定すると設定した幅の中央に配置してくれる（上の画像参照）ので、きれいにど真ん中に配置したい！というときは両方を設定してみると良いかもしれません。

逆にそれ以外の時は上下左右すべてを設定してしまうのはあまりお勧めしません。
左からの距離と右からの距離、また上からの距離と下からの距離を二重に設定してしまうことになるので、機種によって画面サイズが変わると指定した幅がうまくいかなくなることがあります。

* * *

Constraintsを設定してしまったけれどやっぱりいらないから消したいな、というときは
・消したい矢印をクリックして選択し、deleteする
・下に載せる画像のところをクリックする
のどちらかで消せます。
![Mask Group.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273361/8f08dd77-1a1e-ace0-bfcf-15370c860f5f.png)

#最後に
つたない技術力と文章力なので伝わらないことも多いかと思いますが、ここまで読んでいただいてありがとうございました。
選択リストの「年」「月」「日」の値を日付項目に落とし込む方法（Lightning環境なら設定注意）

こんにちは。本橋です！

今回は選択リスト「年」「月」「日」の値を日付項目に落とし込む方法をお伝えします。

つまりこんな感じです
![年0403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/bca22b5e-3482-47fc-6ae4-c07eecc9d966.png)

選択リストで年項目作成。（API参照名はYear__c）
他に選択リストで月項目作成（API参照名はMonth__c）
選択リストで項目日項目作成（API参照名はDay__c）

上記３つの選択リストに基づき数式で日付項目として表示できます
![年04022.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/6adc2da4-e28c-3aaa-d60a-7d65cec928a5.png)

数式は下記となります

DATEVALUE(LEFT(TEXT(Year__c), 4) & "-" & MID(TEXT(Month__c), 1, 2) & "-" & RIGHT(TEXT(Day__c), 2))

注意点としては「２０２１年２月３０日」など存在しない月日を選択すれば数式はエラーとなりますのでお気を付けください。
![classic環境0403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/a07deb9f-af73-7eb6-3528-a0c1fff5b56c.png)

Classic環境なら「#エラー」と表示されますがLightning環境なら下記のようなエラーが表示されてしまいページレイアウトそのものが見えなくなります。
![lightningエラー0403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/2d1361bd-9fa7-811d-ef52-488dd18db1f6.png)

なので、Lightning環境でこの設定を行うのは注意が必要です。

応用編
下記のように値を「令和3年」と設定すれば、選択リストは令和で選択し、日付を西暦に変換することが可能です
![令和変換0403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/9bfd5456-7fb2-4103-fa30-a97b1507e06e.png)


以上のようにLightningならエラー表示が出て危険な設定なので、くれぐれも設定にはご注意ください。
GraphQLのFieldの変更・削除するときの運用フローについて

## Introduction

本記述は GraphQLのschemaからFieldを削除、変更を行う際の運用フローについてまとめたものである。

## Why?

GraphQLはクエリ言語でデータの取得をしてくる際にField名を記載し取得して来ます。
そのためサーバーサイドでのみ変更、削除を行ってしまうとフロントサイドでエラーが発生し通信が取れなくなってしまう危険性があります。

そのため安全にFieldを変更、削除するため、合意形成、周知、対応を行うための運用フローが必要となります。

## Example

本記述は下記のようなQuery、schemaを使用して記述していきます。

```graphql:schema.gql
type Book {
  id: ID!
  name: String!
　author: String! 
}
```

```graphql:Query（変更前）
query book{
 book(id: "id"){
    id
    name
    author
  }
}
```

```graphql:Query（変更後）
query book{
 book(id: "id"){
    id
    title
    author
  }
}
```

## Flow

ほぼ参考資料の推奨のやり方ではございますが、下記のようにFieldの変更、削除を行っております。

### 1. 関係者に新しいQueryの周知を行う

連携するQueryは最終形で行う（対象のFieldを削除、変更した形）
今回は `name` を　`title` に変更します。

```graphql:Query
query book{
 book(id: "id"){
    id
    tile #nameを削除しtitleの追記
    author
  }
}
```

### 2. 対象のfieldを一度deprecatedにして新しいfieldを追加する

下記はrenameするときの記載です。
削除の際はcolumnを追加せず対象のcolumnを`deprecated`にするのみになります。

`deprecated`は`その名の通りで使用を非推奨を明記するものです。
こちらを追記することで、他の開発者へゆくゆく削除するもだと明示していきます。

```graphql:schema.gql
type Book {
  id: ID!
  name: String! @deprecated(reason: "rename column for title") #deprecatedを追加
  title: String! #追加
　author: String! 
}
```

***注意：尚、この際にクライアントサイドの方もschemaに合わせて実装を行います***

### 3. stagingで動作のテストを行い、production環境へリリースする

staging環境があればこちらで動作テストを行い影響がないか確認を行います。
問題がなければ本番環境へリリースしマージを行います！！

### 4. Fieldの削除

リリースを行い動作に問題がなく、かつ変更対応が完了しました`deprecated`をつけたFieldの削除を行います。

```graphql:schema.gql
type Book {
  id: ID!
  # nameのFieldを削除する
  title: String!
　author: String! 
}
```

尚、私は対象のFieldを削除するまで期間を明記、チーム内のタスク管理ツールでタスクを作成しチーム内で周知。
合意形成をとっております。

```　graphql:schema.gql
type Book {
  id: ID!
  name: String! @deprecated(reason: "yyyy/mm/ddで削除いたします。各位対応をお願いたします。") 
  title: String!
　author: String! 
}
```

## Conclusion

安心安全なField変更で、楽しいGQLライフを！！ｗ

## Supplement （補足）：　NestJSでの`deprecated`の書き方

私の所属しているチームではNestJSでschema.gqlを自動生成しております。
久しぶりに書いたときに忘れたので備忘録として記載します。
同じく忘れてしまった方はご参考くださいｗ

```typescript:book.shema.ts
  @Field(_type => ID)
  id: string;

  // 対象
  @Field(_type => String, { deprecationReason: 'rename column for title' }))
  name: string;

  @Field(_type => String)
  author: string;
```

## References（参考文献）

- GraphQL Schema Design: Building Evolvable Schemas

https://www.apollographql.com/blog/graphql-schema-design-building-evolvable-schemas-1501f3c59ed5/
【Python】Warningを消したい場合。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996173/1ff340e9-77a3-a73f-8a59-3c86ebde59cb.png)

これを消したい。見栄えが悪い。

```
import warnings
warnings.filterwarnings('ignore')
```

消えた。
Ubuntu20.04 macライクな設定

# UI Macライク
macのキーボード入力に慣れているが、linuxを使っている。
linuxで入力する時、CapsLockとか、変換/無変換を入力しまくって困ったため調べた

参考記事
[https://qiita.com/momokura/items/33cd6ee525553fc91473](https://qiita.com/momokura/items/33cd6ee525553fc91473)

## Dockの長さを適切に短くする

```terminal
$ gsettings set org.gnome.shell.extensions.dash-to-dock extend-height false
```

## 「アプリケーションを表示する」を左端に配置する

```terminal
$ gsettings set org.gnome.shell.extensions.dash-to-dock show-apps-at-top true
```

## 「ゴミ箱」をDockに配置する

```terminal
$ gsettings set org.gnome.shell.extensions.dash-to-dock show-trash true
```


## UIをMac風

[https://www.gnome-look.org/s/Gnome/p/1305429](https://www.gnome-look.org/s/Gnome/p/1305429)からアイコンをダウンロードし、/usr/share/icons/に展開する

```jsx
# Gitをインストールしていない人だけ
$ sudo apt install git curl
$ mkdir ~/.themes
$ cd ~/.themes/
# 他にもDarkモードなどあるので自分にあったテーマを
$ git clone https://github.com/B00merang-Project/macOS.git
# iconとかを変えるやつ
$ sudo apt install gnome-tweak-tool
$ gnome-tweaks
```

### gnome-tweaksの設定


### タイトルバーの位置を左に

### ここまででこんな感じになる
![2021-04-03_15-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397356/7f759ffc-2fbf-a47c-700c-4c5827f1ad68.png)



## キー配置をmacライクに

### 変換/無変換 → かな/英数

[https://magidropack.hatenablog.com/entry/2018/11/30/120602](https://magidropack.hatenablog.com/entry/2018/11/30/120602)

### Caps Lock英数 → hyper(control)

[https://www.komee.org/entry/2018/10/24/150000](https://www.komee.org/entry/2018/10/24/150000)

- xmodmapを作成する

```bash
$ xmodmap -pke > ~/.Xmodmap_default
```

- キーボードの割当keycodeを探す

```bash
$ xev
```

- 書き換える

```bash
$ vim ~/.Xmodmap_default

keycode 66 = Hyper_L
# 私の場合は、CapLockキーが66だったため
```

- システムログイン時に自動でキーバインドする（ログインスクリプトに追記する）

```bash
vim ~/.bashrc

xmodmap -e 'keycode 66 = Hyper_L'
# 私の場合は、ログインスクリプトがbashrcだったため
```

- 再起動する
```bash
$ sudo reboot
```


### CapsLock + f → <rightカーソル>

[https://zenn.dev/skanehira/articles/2021-03-08-linux-autokey](https://zenn.dev/skanehira/articles/2021-03-08-linux-autokey)

Autokeyをインストールする

```bash
$ sudo apt install autokey-gtk
```

- Autokeyを設定する
    1. フォルダを作成する

        GUIで `アプリケーション`、`新規`、`フォルダ作成`

    2. フォルダとアプリケーションを紐付ける
    3. キーバインドを設定する
        - Set Hotkey ⇒ Press to Setで、キー設定を行う
            - 例> hyper + f
        - Scriptに入力する⇒ keyboard.send_keys("<right>")
        - 保存

これで完了
【メモ】Dockerのビルドキャッシュを削除する

* 製造業出身のデータサイエンティストがお送りする記事
* 今回はメモとして、Dockerでビルドキャッシュを削除する方法を残しておきます。

##発生した事象
Dockerfileをbuildしていて、急に今まで問題なかったのにエラーが出たため、ストレージ容量を確認したらビルドキャッシュの容量が多く、削除したら問題が解決したのでメモとして残しておきます。

##ストレージ容量の確認方法
下記コマンドで確認できます。

```php
docker system df
```

実際に出力された結果は下記です。
Build Cacheが異常に大きいです。

```
TYPE            TOTAL     ACTIVE    SIZE      RECLAIMABLE
Images          2         2         5.142GB   0B (0%)
Containers      2         0         1.688MB   1.688MB (100%)
Local Volumes   0         0         0B        0B
Build Cache     88        0         21.07GB   21.07GB
```

##ビルドキャッシュを削除する
下記コマンドで実行できます。

```php
docker builder prune
```

その後、ストレージ容量を確認した結果は下記です。
Build Cacheが小さくなっております。

```
TYPE            TOTAL     ACTIVE    SIZE      RECLAIMABLE
Images          2         2         5.142GB   0B (0%)
Containers      2         0         1.688MB   1.688MB (100%)
Local Volumes   0         0         0B        0B
Build Cache     20        0         0B        0B
```

無事に解決して良かったです。

* 参考文献：[docker builder prune](https://matsuand.github.io/docs.docker.jp.onthefly/engine/reference/commandline/builder_prune/)
デジタルマーケティングについて（メモ）

会社の推薦図書でデジタルマーケティングの本を読んだので、インプットした内容をメモしておきたいと思います。
完全に自分のためのメモなので、あしからず。

# デジタルマーケティングとは
一般にデジタルマーケティングとは自社メディアを使用して行うマーケティングと誤解されがちだが、より広範的にあらゆるデジタルメディアを活用し、得られたデータを活用して行う総合的な展開を意味している。WebマーケティングやSNSマーケティングはデジタルマーケティングの一部でしかない。デジタルマーケティングは消費者一人ひとりに対してフォローできるのが強みである。（ターゲティング広告）

## デジタルマーケティングの特徴
- 検索性
- 双方向性
- 即時性
<br><br> 
- ターゲティング
    - 広告内容に合った条件にマッチしたユーザーに向けて広告を配信すること
- パーソナイラゼーション
    - 顧客のニーズに対して適切に応えられるように一人ひとりに対して提供するコンテンツを出し分けすること。Amazonのおすすめ機能などがこれに当たる
- 消費者行動モデル[AISARE]   
    - Attention（注目）
    - Interest(興味)
    - Search(検索)
    - Action(購入)
    - Repeat(リピート)
    - Evangelist(伝導（SNSによる発信）)

## デジタルマーケティングの戦略
目的に合わせた広告の配信

- リスティング広告
    - 検索連動型広告
        - ユーザーが検索した結果に連動して出現する有料広告で、通常の検索上位サイトよりも上部に表れるので高い効果が見込める。
        - 短時間でコンテンツをコントロールすることができる。
- ディスプレイ広告
    - バナー広告、コンテンツ連動型広告とも呼ばれる
    - 潜在層のユーザーにアプローチして、商品やサービスの認知度拡大につなげることができる。
    - リスティング広告と違い、画像や動画を活用できるのでビジュアル面から商品をアピールすることができる。
- リマーケティング（リターゲティング）
    - Webサイトを利用したことのあるユーザーに再度アプローチすること。
    - 商品の購入の決断には至らなかったユーザーに対して別のオファーを提供することができる。
    - 既存ユーザーに対して新商品やセールのお知らせを配信することができる。
- 直帰率を改善する方法
- 目的のページが見当たらない（UI、UXの改善）

## ブランディング

- 現代ではブランディングにSNSをうまく活用する
- インフルエンサーの存在が鍵となる
- いい情報だけでなく、悪い情報も拡散されるので注意が必要
    - Twitter
        - 無形商材のPRに最適
        - リツイートで拡散力大
    - Facebook
        - 充実した個人情報をベースにターゲティングを行うことで精度の高い広告配信が可能
    - Instagram
        - 女性ユーザーが多い
        - ビジュアルインパクトのある商材の広告との親和性が高い
        - Facebookが抱える会員情報を使用できるため高度なターゲティングが可能
    - LINE
        - 国内最大規模
        - SNSはLINEしか活用していないユーザーも多い
        - 現代版メルマガとして活用することができる。
    - Youtube
        - ユーザーが能動的に検索して視聴するスタイルなので広告効果が高い
        - 人気YoutuberとタイアップすることによってYoutuberがインフルエンサー的な立場になる
    - Tiktok
        - 10代が多いので若年層向け商材のPRに最適
        - 起動画面広告
        - インフィード広告
        - ＃チャレンジ
            - Tiktokと企業がタイアップ
            - 企業側が提供する楽曲などに合わせて動画を投稿
            - ユーザー参加型

## CVR
- conversionrate(顧客転換率)
    - それまで企業と無縁だっった消費者が顧客に転じる割合のこと
- CVRが低い原因
    - 市場や環境の変化
    - サイトそのものの変化
    - 広告の内容ちぐはぐ
- UI、UXの向上がCVRを上げる

## CRM(カスタマーリレーションシップマネージメント)
顧客との関係性を管理するためのマネージメント手法

- CRMのメリット
    - 顧客情報を一元管理して部署連携することにより、情報の価値が高まる
    - 迅速、的確に顧客の満足度を向上させる
    - PDCAサイクルを回すことにより、改善が加速する
- CRMのデメリット
    - 　顧客情報を一元管理するベース構築が大変
    - 　導入コストや運営コストがかかる
    - 　効果が現れるまでの時間がかｋる

## MA(マーケティングオートメーション)
獲得した見込み客の情報を一元管理して、WebサイトやSNSといったデジタルマーケティングを自動化、可視化するソフトウェアのこと。
MAを活用したマーケティング戦略

- リードジェネレーション
    - 展示会やセミナーでの名刺交換や広告、Webサイトなどで集めた個人情報をもとに見込み客を創出すること

- リードナーチャリング
    - 創出した見込み客を、自社の顧客へと育て上げていくこと
    - 質の高い見込み客を選出し、MAを活用し見込み客の購買意欲によって適切なタイミングでニーズに合った情報を発信していくことにより、購買意欲の高い見込み客を育成する
- リードクオリフィケーション
    - 育成が進んだ見込み客をさらに分析し、見込み客の重要度を分類する
    - 重要度の高い見込み客から営業をかけていくので高い成果が期待できる

まぁこんなところですかねざっとまとめてみました。

ちなみに以下の本を読みました
　

https://amzn.to/3fHxIsz
(amazonのアフィリエイトになってます笑)
【kintone】日付フィールドAの経過日数を日付フィールドBへ登録する

#目次
・はじめに
・カスタマイズ概要
・テンプレート
・変数説明
・おわりに

#はじめに
プログラミング初心者の方や、コードをいちいち書きたくないという方の為に、3つの変数の値だけ変更すれば即使えるテンプレートを作りました。

#カスタマイズ概要
from（日付フィールドA）から14日後をto（日付フィールドB）へ反映させる。
尚且、to（日付フィールドB）は手動で更新も可能。

対応イベントは以下になります。
・レコード追加画面　表示後
・レコード一覧　インライン編集のフィールド値変更
・レコード編集画面　フィールド値変更
・レコード追加画面　フィールド値変更

①〜④までの変数の値を利用する用途やフィールドコードに合わせて変更してお使い下さい。


#テンプレート
```Javascript
// ＃処理概要
// from（日付）から14日後をto（日付）に反映する。to（日付）は手動で更新も可能。
// ＃変数
// 　①reflectionDays：　加算する日数を指定する
// 　②from:　計算の元となるフィールド（フィールドコード）
//   ③to:　計算結果を反映するフィールド(フィールドコード)
(function() {
  'use strict';
  const reflectionDays = 14;
  const conf = [
    {
      from: '作業依頼日',
      to: '提出希望日'
    },
    {
      from: '提出希望日_2',
      to: '提出希望日_2'
    }
  ];
  
  // 値の変更の元となるフィールド(n)
  let targetFields = [];
  conf.forEach(field=>{
    targetFields.push(field.from);
  })
  
  const targetEvents = createEvents(targetFields)
  function createEvents(fields){
    var eventLists = [
      'app.record.create.show',
    ];
    fields.forEach(field=>{
      eventLists.push(`app.record.index.edit.change.${field}`);
      eventLists.push(`app.record.edit.change.${field}`);
      eventLists.push(`app.record.create.change.${field}`);
    })
    return eventLists;
  }
  kintone.events.on(targetEvents, function(event) {
    // イベントタイプを配列に分解
    const eventTypeArray = event.type.split(".");
    console.log(eventTypeArray);
    const eventType = eventTypeArray[eventTypeArray.length -2];
    // フィールドの変更イベントかそれ以外のイベントかを判定
    if(eventType == 'change') {
      // イベントタイプの一番後ろの文字（変更されたフィールド）を代入
      const changeField = eventTypeArray[eventTypeArray.length -1];
      // 変更元フィールドに対しての更新先フィールドをconfの中から探して代入
      const targetSetting = conf.find(setting => setting.from === changeField).to;
      // 計算処理。加算する場合は'add'。減算する場合は'subtract'
      let result = moment(event.record[changeField].value).add(reflectionDays, 'd').format('YYYY-MM-DD');
      // 計算結果を反映先フィールドへ更新
      event.record[targetSetting]['value'] = result;
      console.log('変更イベントの場合の計算結果:' + result);
    // その他のイベントの場合
    }else{
      // fromからtoへそれぞれ計算結果を反映する
      conf.forEach(fields => {
        let result = moment(event.record[fields.from].value).add(reflectionDays, 'd').format('YYYY-MM-DD');
        event.record[fields.to].value = result;
        console.log('変更イベント以外の場合の計算結果:' + result);
      })  
    }
    return event;
  });
})();
```
#おわりに
この記事を上げた理由は以下になります。
1. kintoneのアプリ開発をしていると同じようなカスタマイズ案件に出会うことがあり、その度に、毎回調べてコードを書くのが面倒。（自分の為）
2. 変数だけ変えるだけで使えるようにテンプレート化してしまえば、コードを書けない方でも使えるじゃん！　と。

コードは書けないけどkintoneの標準機能だけでは満足出来ない！という方の為になれば幸いです。
これからも、変数の値を変えるだけで使えるカスタマイズテンプレートを随時投稿していきたいと思います。
最後まで見てくださりありがとうございます！
自分なりにClean Architectureを理解する

# 概要
Clean Architectureに関して自分なりに可能な限り簡潔にまとめてみました。

# Clean Architectureで達成する事

**関心の分離**

# 関心の分離により達成できる事

関心の分離によって、下記のことを達成できる。

## (1) フレームワーク非依存

アーキテクチャは、機能満載のソフトウェアのライブラリに依存していない。これにより、システムをフレームワークの制約で縛るのではなく、フレームワークをツールとして使用できる。

## (2) テスト可能

ビジネスルール(ソフトウェアの核心)は、UI、データベース、ウェブサーバー、その他の外部要素がなくてもテストできる。

## (3) **UI**非依存

UIは、システムのほかの部分を変更することなく、簡単に変更できる。たとえば、ビジネ

スルールを変更することなく、ウェブUIをコンソールUIに置き換えることができる。

## (4) データベース非依存

OracleやSQL ServerをMongo、BigTable、CouchDBなどに置き換えることができる。ビジネスルールはデータベースに束縛されていない。

## (5) 外部エージェント非依存

ビジネスルールは、外界のインターフェイスについて何も知らない。

# Clean Architecture概要

依存関係は内側一方向のみで、外側のルールを、内側に持ち込んではいけない。

つまり、内側の層では外側の層の実装を知ってはならず、また一切影響を受けてはならない。

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28464/11d18689-9a99-5bc0-39dc-e48623f1d11c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28464/11d18689-9a99-5bc0-39dc-e48623f1d11c.jpeg)

# 図を各レイヤーごとに理解する

## エンタープライズビジネスルール(Entities)

- システムが自動化されていなくても存在する最重要ビジネスルール・最重要ビジネスデータをカプセル化したもの
- システムの中で最も独立していて、最も再利用可能であるべき

## アプリケーションビジネスルール(Use Cases)

- アプリケーション固有のビジネスルールを記述する
- エンタープライズビジネスルールをいつ・どのように呼び出すかを規定したルール が含まれている

## インターフェースアダプター(Controllers/Presenters/Gateways)

- 内側(Entities/Usecases)と外部(DB・Webフレームワーク)でデータフォーマットをそれぞれ便利な形式に変換するアダプター

## フレームワークとドライバー(UI/Web/Devices/DB/External Interfaces)

- フレームワークやツールで構成されている(DB, Webフレームワーク等)

# 参考
- [Clean Coder Blog](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html)
- [世界一わかりやすいClean Architecture - nuits.jp blog](https://www.nuits.jp/entry/easiest-clean-architecture-2019-09)
- [実装クリーンアーキテクチャ - Qiita](https://qiita.com/nrslib/items/a5f902c4defc83bd46b8#usecase)
- [Trying Clean Architecture on Golang](https://medium.com/hackernoon/golang-clean-archithecture-efd6d7c43047)
- [クリーンアーキテクチャ完全に理解した](https://gist.github.com/mpppk/609d592f25cab9312654b39f1b357c60)
- [Clean ArchitectureでAPI Serverを構築してみる - Qiita](https://qiita.com/hirotakan/items/698c1f5773a3cca6193e#use-cases%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC)
- [図解クリーンアーキテクチャ - Qiita](https://qiita.com/kz_12/items/bc79102247b86626fc72)
Visual Studio Tips

# ショートカット

# 編集画面のソリューションエクスプローラのファイル同期
## やりたいこと
編集画面で開いているファイルとソリューションエクスプローラで選択されているファイルを同期する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117057/e5542eee-e9c0-ce62-943d-762386d09e2f.png)

## 手順
1. メニューバーの[ツール]-[オプション]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117057/708ac410-1f89-cf15-ad04-3bf7094e8154.png)

1. [オプション]のボックスの[プロジェクトおよびソリューション]-[全般]をクリックする。
1. [アクティブな項目をソリューションエクスプローラで選択された状態にする]にチェックする。
1. [OK]ボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117057/101fbaca-4acf-ee8f-e56f-b7ed2726ac11.png)



# 参考文献
1. https://www.fenet.jp/dotnet/column/tool/5444/
field_with_errorsのレイアウトが崩れるのを防ぐ【Tailwind css】

#背景
ユーザ管理機能のgem「devise」を導入後、新規登録設定を実施
新規登録に失敗した際にレイアウトが崩れてしまうことを確認
Googleの検証ツールを使用して確認したところ
元は「class="reg_info_field"」というクラスの親に
「div class="field_with_errors"」が追加されていた
見た目が変わるのはよくないため修正を行う

今回もQiitaさんに投稿されている方々にお世話になりました、
ありがとうございます

**参考文献**
[field_with_errorsによるレイアウト崩れを防ぐ](https://qiita.com/mogurinchu/items/bb1ffab51aa9eb9d98fd)
[Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ](https://yukimasablog.com/rails-field-with-errors)

##開発環境
- Ruby 3.0.0
- Rails 6.1.3.1
- tailwindcss 2.0.4

##改善前の状態
下記の画像は新規登録画面の一部を切り取ったもの
レイアウトが崩れてない状態
Googleの検証ツールで確認したところclass名「reg_info_field」
![スクリーンショット 2021-04-03 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215137/857f176f-7da8-5a50-2d15-fcc3bec25732.png)
![スクリーンショット2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215137/8d48d14d-f327-9992-081a-2a5c41c3fade.png)

上記の状態が新規登録の失敗をすると・・・・
入力欄が狭くなっている
加えて「div class="field_with_errors"」が親になっているではないか・・・・
![スクリーンショット3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215137/b2bd08ac-7f11-7074-e588-6f98119286f8.png)![スクリーンショット4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215137/9497f072-4019-b4ee-7b9f-d8d13f5defc6.png)

##解決方法
@mogurinchuさんの投稿の「[field_with_errorsによるレイアウト崩れを防ぐ](https://qiita.com/mogurinchu/items/bb1ffab51aa9eb9d98fd)」
の情報によると下記の2点でいけるらしいのどっちも試す

- 自動で読み込まれるfield_with_errorsタグを読み込まないように設定する
- field_with_errorsに対してCSSをあてる

##方法１

**・自動で読み込まれるfield_with_errorsタグを読み込まないように設定する**

```config/application.rb
module TestTailwind
  class Application < Rails::Application
   /* 下記追記 */
　　config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }
  end
end
```

###解決!!

##方法２
**・field_with_errorsに対してCSSをあてる**
こちらの記事「[Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ](https://yukimasablog.com/rails-field-with-errors)」を少し参考
「Tailwind css」だと少し異なる!!
Tailwind cssだと「display: contents;」は「contents;」だけとなる

```app/javascript/css/tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* 下記追記 */
@layer components {
  /* 「field_with_errorr」にCSSをあてる */
  .field_with_errors {
    @apply contents;
  } 
}
```
###解決!!

##おわりに
レイアウトが崩れることに関しては上記の方法で問題はなさそう
しかし、どちらを採用したほうがいいのか判断が出来なかった・・・

- 処理速度の違いがあるのか
- webpackに影響でやすいのか
- ローカル環境だから問題はないが、本番環境で影響がでるのか

知識がないため、これらなどを判断する術もなし・・・・
とりあえず、様子見してみる!!


## 参考文献
[field_with_errorsによるレイアウト崩れを防ぐ](https://qiita.com/mogurinchu/items/bb1ffab51aa9eb9d98fd)
[Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ](https://yukimasablog.com/rails-field-with-errors)
localeでエラーが起きた時対応

MacのターミナルではUTF8テキストが文字化けせずにみれるのに、他のターミナルからは文字が化けるということがある。ターミナルからlocaleを送る時と、そうでない時があるようだ。

WSL Terminalからだとこんば化け方（あいうえおと書いてる）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53489/f3fc4abc-2b7c-62e1-7311-1817cec822a4.png)

localeがおかしいはずなので、localeコマンドをうってみる

```
# locale
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_MESSAGES to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory
LANG=C.UTF-8
LC_CTYPE="C.UTF-8"
LC_NUMERIC="C.UTF-8"
LC_TIME="C.UTF-8"
LC_COLLATE="C.UTF-8"
LC_MONETARY="C.UTF-8"
LC_MESSAGES="C.UTF-8"
LC_PAPER="C.UTF-8"
LC_NAME="C.UTF-8"
LC_ADDRESS="C.UTF-8"
LC_TELEPHONE="C.UTF-8"
LC_MEASUREMENT="C.UTF-8"
LC_IDENTIFICATION="C.UTF-8"
LC_ALL=
```

いろいろ怒られてる。localeの設定がこと切れてる。じゃぁどのloaleを設定すればいいのさ。

```
locale -a | less
```

のコマンドを打てば、利用可能な一覧が出てくる。

```
export LC_ALL=en_US.utf8
```

というロケール設定で、だいたいは収まる。

以下、en_US.utf8 にしている理由。

- コマンドの出力結果が日本語だと想定外になるので、英語のままがいい
- US以外の英語もあるが、こだわりはないので、en_USでいい
- 何よりもUTF8の表示がしたいから、UTF8がいい
Typescript 奮闘記 No.02 『Type Alias編』

備忘録として TypeScriptのインプットをまとめていく.

# Objectの構造を定義するもの

type alias, interface, class ってやつがある。

前回は Interface だった。

https://qiita.com/ikkitang/items/7a12be1dcc497044a1d2

今回はTypeをキャッチアップ

# Type

正確には Type Alias(型エイリアス） って名前

```typescript
type StrOrNum = string | number;

let sample : StrOrNum;

sample = 1
sample = "test"
```

また、前回の Interfaceのように宣言する事も可能

```typescript
type Item = {
    name: string;
    price: number;
}
```

上記の宣言を使用して、同様に使用する事ができる

```typescript
const pencil: Item = {
    name: "鉛筆",
    price: 110
}
```

## Type Alias と Interface の違い

Type Alias は Interfaceのように拡張したり、実装したり出来ないという事に違いがある

これとか腹落ちしやすかった

https://qiita.com/sotszk/items/efe32e07e52dce329653
Typescript 奮闘記 No.01 『Interface編』

備忘録として TypeScriptのインプットをまとめていく.

# Objectの構造を定義するもの

type alias, interface, class ってやつがある。

とりあえず Interface を勉強した

# Interface

## Property

```typescript
interface Item {
    name: string;
    price: number;
}
```

Customer の Interface は name と age の プロパティが定義されている。
Interfaceでプロパティを定義すると、そのInterfaceを実装するオブジェクトは 定義されたプロパティを持たなければならない、という制約を掛ける事ができる。

```typescript
const pencil: Item = {
    name: "鉛筆",
    price: 110
}
// price か name のどちらかが制限されてなければエラーになる
```

Interface は 型なので、別のInterfaceから参照する事もできる

```typescript
interface SaleRow {
    item: Item
    total: number
}
```

### method

また、メソッドの構造も定義できる。ただし、メソッドの実装を定義するものではない。


```typescript
interface Item {
    name: string;
    price: number;
    getDiscountPrice(discountRate: number): number;
}
```

ここで以下のように認識しておくと良い

- パラメータの型さえ同じなら、実は `discountRate` の部分を `discountPercentage` とかに変えても動く
- でも、メソッド名を変更したり、パラメータの型や戻り値の型を変えるとコンパイルは通らない
- 上記の事もあって、Interfaceにて メソッドを定義する場合は、パラメータ名を定義しない事も慣習としてある。

```typescript
interface Item {
    name: string;
    price: number;
    getDiscountPrice(number): number;
}
```

### Option


```typescript
interface Item {
    name: string;
    price: number;
    image?: string;
    getDiscountPrice(discountRate: number): number;
}
```

上記のように `?` をつけて宣言する事で、Optionalの型を定義できる

### Readonly

- プロパティの前に readonly キーワードを使用する事で、最初に設定された後にプロパティが更新できないようにする.

### Extend

既にあるInterfaceについて それを拡張して新しいInterfaceを再定義する事もできる。

```typescript
interface Item {
    name: string;
    price: number;
}

interface Item {
    tags: string[];
}

// Item は name, price, tags をプロパティに持つInterfaceとなる
```

```typescript
interface Item {
    name: string;
    price: number;
}

interface SpecialItem extends Item {
    specialPrice: number;
}

// SpecialItem は name, price, specialPrice をプロパティに持つInterfaceとなる
```
picoCTF 2021 Transformation

できなかった問題をwriteup等を参考に勉強した記録を残す。
この問題を解くカギは，ヒントのとおり，ネットでTransformツールを探し当てることだったようだ。

# Transformation

フラグを加工したpython

```python
''.join([chr((ord(flag[i]) << 8) + ord(flag[i + 1])) for i in range(0, len(flag), 2)])
```

ファイルencで与えられた文字列

```
灩捯䍔䙻ㄶ形楴獟楮獴㌴摟潦弸弲㘶㠴挲ぽ
```

ヒント

```
You may find some decoders online
```

encのバイナリ

```
e7 81 a9 e6 8d af e4 8d 94 e4 99 bb e3 84 b6 e5 bd a2 e6 a5 b4 e7 8d 9f e6 a5 ae e7 8d b4 e3 8c b4 e6 91 9f e6 bd a6 e5 bc b8 e5 bc b2 e3 98 b6 e3 a0 b4 e6 8c b2 e3 81 bd
```

picoCTF{}のpiを与えられたpythonで加工してみる

```python
flag = "pi"
enc = ''.join([chr(   (ord(flag[i]) << 8) +    ord(flag[i + 1])  ) for i in range(0, len(flag), 2)])
print(ord(enc))
print(hex(ord(enc)))
```

結果

```
28777
0x7069
```

困った。encのバイナリと全然違う。

ここから他力。
------------------------------

解いた人は，online convertorを使ったと書いてる。
URLは書いてない。

online convertorで検索
みつからない

picoによくある「問題名＝ヒント」でやってみる
Transformation decorde toolでググると

http://guanine.evolbio.mpg.de/cgi-bin/bwt/bwt.cgi.pl

というのが見つかった。
試してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/4385bb22-f860-4846-3545-6568cb55b9ce.png)
赤〇に pi の 28777 が見える
次の青〇の 17236 が co か？


```python
flag = "co"
enc = ''.join([chr(   (ord(flag[i]) << 8) +    ord(flag[i + 1])  ) for i in range(0, len(flag), 2)])
print(ord(enc))
```

結果

```
25455
```

このコンバーターから数値を取り出す。

```
28777,25455,17236,18043,12598,24418,26996,29535,26990,29556,13108,25695,28518,24376,24370,13878,14388,25394,12413
```

ソルバー書く

```python
trans = [28777,25455,17236,18043,12598,24418,26996,29535,26990,29556,13108,25695,28518,24376,24370,13878,14388,25394,12413]
i = 0
flag = ""
while i < len(trans):
    flag = flag + chr(trans[i] >> 8)
    flag = flag + chr(trans[i] & 0xff)
    i = i + 1
print(flag)
```

ビンゴ

しかし， Burrows-Wheeler Transform が何やってるのか全くわからん。

https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%BD%E3%83%BC%E3%83%88