OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.js 覚書

# Vue.js 覚書

## 基本コマンド
`vue serve [vue_file]` -> vue server起動
`vue create [app_name]` -> APP作成
`yarn serve` -> プロジェクトでserver起動
`yarn build` -> distフォルダにbuild
`vue ui` -> プロジェクトをGUIで管理

---
## v-xx(Virtual Node)
v-xｘとかくことで仮想ノードを作成することができる

### v-html
HTMLを出力する

```
<p v-html="messages"></p>
```
こうすると、vueで`messages=<h2 style="color:red;">test</h2>`のように動的にHTMLを設定できる

### v-bind
属性に値をバインドする

```
<p v-bind:style="custom_style"></p>
```
こうすると、vueで`custom_style='font-size: '+event.target.value` のように動的に設定できる

※v-bindを省略もできる

```
<p :style="custom_style">
```

### v-if, v-else
条件付きレンダリング

```
<p v-if="条件">...</p>
<p v-else>...</p>
```
こうすると、条件付きでレンダリングを制御できる。

またtempalteを使うとまとめられる

```
<template v-if="条件">
  <p>...</p>
  <p>...</p>
</template>
```


### v-for
繰り返し

```
<p v-for="変数 in 配列">...</p>
```

### v-model
バインドする

```
<input type="text" v-model="input_text">
```
こうするとinput_textという変数に入力されたものが入ってくる



### $emit
これを使うと親コンポーネントにイベントを遅れる


```
子コンポーネント
this.$emit('result-event', this.input);
```

```
親コンポーネント
<HelloWorldv-on:result-event="appAction" />
---
methods:{
    appAction: function(message) {
      this.result = '(*** you send:"' + message + '". ***)';
    }
  }
```

# Nuxt.js

### nuxt install

```packege.json
{
    "name": "my-app",
    "scripts": {
        "dev": "nuxt"
    }
}
```

npm install コマンドでNuxt.jsと必要なパッケージをインストールする

```
npm install --save nuxt
```

npm をdevサーバーを起動

```
npm run dev
```
Wgetでダウンロードしたファイルの保存先

クローリング＆スクレイピングに関した本で、
wgetコマンドでダウンロードしたはずの
ファイルや画像が見つからない点、
Appendix（付録）通り作成した「vagrant」フォルダを
以下のようにする必要がありました。

$ cd  /vagrant　　＃保存先をvagrantフォルダに指定
vagrant $ wget  http://___　　＃本通りに入力

（ちなみに、OSはwindows10)
リンクを押したときに青から紫ではなく、別の色に変える方法

#はじめに
**結論：疑似クラスで解決できる**

#疑似クラスとは
`疑似クラス`とは、指定の要素が特定の状態である場合にスタイルを適用させるセレクタ。
[【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！](https://www.asobou.co.jp/blog/web/css2#i-5)


#解決方法
リンクの状態によって解決方法は2種類。

* 既にリンク先に訪問したことがある状態　⇒　**:visited疑似クラス**
* リンク上にフォーカスがある状態　　　　⇒　**:focus疑似クラス**

##

```
既にリンク先に訪問したことがある状態
a:visited {
  color: red;
}

リンク上にフォーカスがある状態
a:focus {
   color: yellow;
}
```
**※「visited」⇒「focus」の順番で指定しないと、「focus」が効きません。**
javascriptでできること１５選




## 特徴

インターネットを見るブラウザというソフトの上で動くプログラミング言語
画像が横に動くスライダーや、マウスの動きによるアニメーションなどはjavascriptで作られている。



## ポップアプウィンドウ

ブラウザに入っている基本的なものだけだとこのような形になるが、デザインをつけることも可能。その方がわかりやすく表現できる。

javascriptはページを移動しない状態で確認ができるほとんど唯一の手段。こういった注意警告系のポップアップは重宝され、とてもよく使われている。


## Ajax
Ajaxは、ページを移動しなくてもデータを取得できたり、表示したりできる機能。Ajaxを使ったページで一番驚きを持って迎えられたのが、ご存知Google Mapである。中の地図を自由に動かせること自体が画期的だった。Ajaxという言葉自体もGoogle Mapによって広がっている。


## サイトの利便性アップ

例えば、情報量が大きくなりすぎてしまったときにタブでまとめることができる。メニューにカーソルを合わせると、詳細メニューが表示されるのは良く見る機能だろう。こちらもJavaScriptだ。


## サイトをブラッシュアップ

UIをブラッシュアップすることができる。例えば、よくあるのがスライダー。Appleのサイトでも用いられているが、メイン画像が横にスライドして切り替わっていく。楽しくなって、あまり使いすぎると美しさのないサイトになるので、適度に活用しよう。


## カウントダイマー
現在時刻を取得したり、そこから計算をすることもできるため、カウントダウンタイマーを作ることができる。


## ソートや検索機能も作れる
データが羅列された表を用意したとしよう。データが並んでいるなら、並び替えや検索、ページ分割機能があるとより便利だ。
しかし、これをプログラムで組むとなると、そこそこに厄介（面倒）だ。JavaScriptを使うことで手軽に表のソートや検索機能を使うことができる。
ゼロから書くのは大変なので、Datatablesというライブラリを使う。とても便利で美しいライブラリだ。


## 文字を爆発させることができる
これはとても楽しいライブラリだ。下の画面のどこかをクリックしてみてほしい。文字が爆発するのがわかるはずだ。
fontBom
fontBombというライブラリ（追加機能）を利用している。作った方の発想が素晴らしい。


## できることその９　 リアルタイムで動くグラフ
株価などのチャートは常に動いているが、JavaScriptを使うとそれを表現することも可能だ。
￼
静止画を載せているが、このグラフが１秒ごとに最新版にアップされて表示させることもJavaScriptであれば可能だ。




## 実は、ブラウザ以外でも動く
ブラウザで動くことばかりが強調されるJavaScriptだが、実はブラウザ以外の場所でも動かすことができる。それがNode.jsだ。
特にWebサービスを作るときに注目を浴びている。なぜなら、ブラウザで動くのもJavaScript、企業がもっているサーバと呼ばれるコンピュータでも動いているのはJavaScriptという状態にできるからだ。

* 同じプログラミング言語を知っていれば、両方とも書くことができる
* ブラウザとサーバのプログラムの相性がよくなる（同じ言語だから当たり前だ）

Node.jsは注目のプログラミング言語だ。

## できることその１２　Webで動くゲームが作れる
Web上だけで完結できるゲームは、JavaScriptがあれば作成できてしまう。例えば、シューティングゲームやパズルゲームなどは初心者からでも勉強すればと作れてしまうだろう。
enchant.jsというJavaScriptのテンプレートがあり、これを使うとより色々なゲームが手軽に作成できる。
￼
http://enchantjs.com/ja/


## できることその１４　ChromeやFirefoxの拡張機能を作れる
ブラウザには拡張機能というものがあって、色々と機能を追加することができる。
￼
Webブラウザでの作業が効率化されるいいツールが揃っている。これらの多くはJavaScriptで作られている。

## できることその１５　 ハイブリッドアプリという形でスマホアプリが作れる
スマートフォンアプリは、通常iPhoneとAndroidで使うプログラミング言語が違う。iPhoneではSwiftという言語が使われ、AndroidではJavaが使われている。
しかし、JavaScriptを使うとハイブリッドアプリという形で、両方のスマホで使えるスマホアプリを作ることができる。これは結構便利だ。なぜなら２種類のスマホに対応する必要がなくなり、開発する時間も半分になるからだ。
￼
ハイブリッドアプリの導入が徐々に進んできており、今後も加速度的に進んでいくだろう。
sdで複数ファイルの全文置換をお手軽に実現する

みなさんはCLIで複数ファイルの全文置換を行い時に何を使っていますか？

多くの人は`sed`をベースに`find`系ツールや`xargs`などをパイプで組み合わせていることと思いますが、いざ置換を行う際にぱっとコマンドが思い浮かばない人も多いことでしょう。

そんな時に`sed`の代替として開発された[`sd`(Search & Displace)](https://github.com/chmln/sd)を使えば、簡単に全文置換を実現できます。

## `sd`のインストール

`brew`でインストールするだけです。

```
brew install sd
```

## `sd`の使い方

以下のようにシンプルです。

```
sd 置換前の文字 置換後の文字 対象ファイル(正規表現)
```

## `sd`の使用例

使用例を具体的に見てみましょう。どれも直感的です。

### 特定のファイルに対して全文置換

```
sd before after file
```

### ディレクトリ配下の全ての`.js`ファイルに対して全文置換

```
sd before after *.js
```

### ディレクトリ配下の全ての`.js`ファイルに対して全文置換 (再帰的)

```
sd before after **/*.js
```

### 改行をカンマに置換

```
sd '\n' ',' file
```

## まとめ

`sd`を使うことで、短く覚えやすいコマンドで複数ファイルの全文置換が行えます。
ReactHooks useEffectを "超" 簡潔に説明

useEffectを勉強していて色々と混乱したので、超簡潔にまとめてみました。

```js:index.js
const App = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>The current count is {count}</p>
      <button onClick={() => setCount( count -1)}>-1</button>
      <button onClick={() => setCount(0)}>reset</button>
      <button onClick={() => setCount(count + 1 )}>+1</button>
    </div>
  )
}

ReactDOM.render(<App />,document.getElementById('root');
```
変数countには初期値で0が指定されており、-1ボタンを押すとマイナス1、+1ボタンを押すとプラス1づつ増えていく。また、resetボタンを押すと0に戻るという仕組みのカウント機能を元に説明します。


### 第二引数に何も書かない場合 (componentDidmount / ComponentDidUpdate)

```js:index.js
  useEffect(() => {
     console.log('useEffect ran');
  })
```
つまり、「一番最初のレンダリング時」と「**あらゆる**コンポーネントのstateやpropsの値に変更がある時」に実行される。

### 第二引数に`[]`がつく場合 (componentDidMount)

```js:index.js
  useEffect(()=>{
    console.log('This should only run once')
  }, [])
```

「一番最初のレンダリング時」にのみ実行される

### 第二引数に値を指定した場合 (componentDidmount / ComponentDidUpdate)

```js:index.js
  useEffect(() => {
     console.log('useEffect ran');
  },[count])
```

「一番最初のレンダリング時」と「**ある特定の**stateもしくはprops(ここではcount)の値が変更した時」に実行される
実行されるタイミングは「第二引数に何も書かない場合」と似ているが、具体的な値を第二引数に指定してあげることで限定できる。
DiscordのServerStatsのロールカウントが動かない！？

2020年に入ってから、DiscordのStatsBOT, ServerStatsのロールカウントが動かない現象が起きました。なぜこのようなことになったのか。

# それは

## Discordの制限によるもの
でした。

プログラムでDiscordのゴニョゴニョをするために、プログラムとDiscordを通信接続する必要があります。しかし、スマホのデータ使用量が決まってるように、Discordと一定期間内に接続しすぎると、接続しすぎだと制限されます。

複数ある制限のうちの一つ、チャンネル名の変更の制限が関係してきます。

10分間に2回変えると、制限がかかります。
まぁ、解除されるまで、５分位ですが・・・ｗ

# 以上のことから

付与・剥奪が多いロール人数。
人数の変更がとても激しいので、すぐ制限にかかり、解除されても、すぐに制限にかかってしまいます。

只今、開発者さんが、この問題を解決しようとしてるので、おとなしく解決されるのを待ちましょう。
以上。
vagrant up時に発生した『kernel-devel』に関わるエラー対処メモ

##1.実行環境
macOS Catalina10.15.6
vagrant 2.2.10
virtualbox 6.0.14
##2.問題
```
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
    default: Adapter 2: hostonly
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
==> default: Machine booted and ready!
[default] No Virtualbox Guest Additions installation found.
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: ftp.tsukuba.wide.ad.jp
 * extras: ftp.tsukuba.wide.ad.jp
 * updates: ftp.tsukuba.wide.ad.jp
Package centos-release-7-8.2003.0.el7.centos.x86_64 already installed and latest version
Nothing to do
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: ftp.tsukuba.wide.ad.jp
 * extras: ftp.tsukuba.wide.ad.jp
 * updates: ftp.tsukuba.wide.ad.jp
No package kernel-devel-3.10.0-957.12.2.el7.x86_64 available.
Error: Nothing to do
==> default: Checking for guest additions in VM...
    default: No guest additions were detected on the base box for this VM! Guest
    default: additions are required for forwarded ports, shared folders, host only
    default: networking, and more. If SSH fails on this machine, please install
    default: the guest additions and repackage the box to continue.
    default: 
    default: This is not an error message; everything may continue to work properly,
    default: in which case you may ignore this message.
The following SSH command responded with a non-zero exit status.
Vagrant assumes that this means the command failed!

yum install -y kernel-devel-`uname -r`

Stdout from the command:

Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: ftp.tsukuba.wide.ad.jp
 * extras: ftp.tsukuba.wide.ad.jp
 * updates: ftp.tsukuba.wide.ad.jp
No package kernel-devel-3.10.0-957.12.2.el7.x86_64 available.

Stderr from the command:

Error: Nothing to do
```
問題はこれ↓

```
No package kernel-devel-3.10.0-957.12.2.el7.x86_64 available.
```
kernelの問題なのかな・・
macだから、『yum install -y kernel-devel-`uname -r`』のコマンド打てないし。。
##3.試したこと
####①vagrantのバージョンを調べてみた！
```
$ vagrant version
  Installed Version: 2.2.10
  Latest Version: 2.2.10
  // 最新版なので、問題なしと判断！！
```
####②次にvirtualboxを調べてみた!!
すると古いバージョンであることが判明！古いバージョンだったために発生したエラーでした。
バージョンを

```
旧：virtualbox 6.0.14
新：virtualbox 6.1.14
```
に更新したところ解決しました！
以上です！
CircleCIでEC2デプロイ時にエラー

# はじめに
個人アプリにてCircleCIを導入し、
EC2にデプロイしようとした所、いくつかエラーが発生したので、解決策を記載します。

## 環境
* ruby 2.6.2
* rails　5.2.4
* EC2

## config.yml
``` hash
version: 2
 
jobs:
    # build ジョブ: CircleCI 上で Docker コンテナを作成してテストする
    build:
        docker:
            - image: alpine
        steps:
            - checkout
            - run:
                name: Echo Test
                command: echo "CircleCI Test"
    # deploy ジョブ: EC2 に SSH 接続して、デプロイを実行する
    deploy:
        machine:
            image: circleci/classic:edge
        steps:
            - checkout
            # CircleCI に登録した秘密鍵を呼び出す
            - add_ssh_keys:
            # CircleCI に登録した環境変数を使って SSH
            - run: ssh ${USER_NAME}@${HOST_NAME} 'cd /var/www/myapp && git pull origin master'
 
workflows:
    version: 2
    # build_and_deploy ジョブ: 一番最初に呼ばれるジョブ
    build_and_deploy:
        # build ジョブと deploy ジョブを呼び出す
        jobs:
            - build
            - deploy:
                requires:
                    # deploy ジョブより先に build ジョブを実行しろ！
                    - build
                # master ブランチに push された場合のみ deploy ジョブを実行する
                filters:
                    branches:
                        only: master
```

## 起こった問題と解決策
### ①ポートが開いてないことによるエラー
``` hash
ssh: connect to host ************* port 22: Connection timed out
```

【解決策】
EC2のセキリティグループのインバウンドを下記のように編集する。
注）セキリティ上、中間サーバーを使用するほうが好ましい

| ポート範囲 | ソース　　　|
|:-----------|------------:|
| 22       | マイIP　　xxx.xxx〜|

　　　　　　　↓

| ポート範囲 | ソース　　　|
|:-----------|------------:|
| 22       | カスタム　0.0.0.0/0|

## ②秘密鍵が合わないことによるエラー
①EC2にて下記のコマンドを実行し、pem鍵を作成（他の鍵と競合する可能性がある為、circleci-keyなどの名前にする）

```hash
ssh-keygen -m pem
```
②EC2にて下記のコマンドを実行し、①で作成した公開鍵（鍵名.pub）をauthorized_keysにコピー

```hash
cat ~/.ssh/circleci-key.pub >> authorized_keys
```
③EC2にて下記のコマンドを実行し、①で作成した秘密鍵を表示

```hash
cat ~/.ssh/circleci-key
```
④表示された秘密鍵をCircleCIのSSH-Keyに設定
（このとき-----BEGIN RSA PRIVATE KEY-----と-----END RSA PRIVATE KEY-----まで含める）

##　最後に 
私の場合、これでエラーが解消されましたので、
是非ためしてみてください。
#　参考
[CircleCIの使い方](https://suwaru.tokyo/%E3%80%90%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%91circleci%E3%81%A8%E3%81%AF%EF%BC%9Fec2%E3%81%ABssh%E3%81%97%E3%81%A6%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E8%87%AA%E5%8B%95%E5%8C%96/)
【Xcode】まずはこれだけ、便利なショートカット

マストなアイテム（キーボードショートカット）を集めてみました。
環境はXcode 11.6です。 

複雑なショートカットはよく忘れてしまいますが（カスタマイズしろよ！）、これらはよく使うのですぐに慣れるはず。


# 検索

### cmd + F

現在開いているファイル内で検索。

### cmd + shift + F

全てのファイルから検索。

### cmd + shift + O

ファイル名や関数名を検索。
だいぶ便利！

# ビルドと実行

以下の２つはセットで覚える。

### cmd + R

実行。

### cmd + .

実行（ビルド）を中止。

# 表示

### cmd + shift + J

「いま編集しているファイル、どのディレクトリ階層にあるんだっけ？」

### cmd + 0

左メニューの表示/非表示を切り替える。

### cmd + 1~9

左メニューの中の表示を切り替える。

# 編集

### 右クリック、　cmd +  クリック

シンボルを右クリックしたり、cmdを押しながらクリックすると、各種アクションが表示される。
右クリック → Refactor → Renameはよく使う。
Visual Studio Code - 非エンジニアによるメモ帳セットアップと拡張機能のまとめ

## はじめに

Visual Studio Code（以下VSCode）はエンジニア向けの総合開発環境ですが、拡張機能をインストールすることで非エンジニアでも活用できる強力な多機能メモ帳に進化します。
本記事では私自身の備忘録として、MacOSでのセットアップ手順と利用している拡張機能をまとめます。

- 2020/10/21 投稿

## VSCodeを使う

#### インストール方法
VSCodeのインストール方法は以下の２種類があります。

* インストーラーをダウンロード
* Homebrewでインストール

私はMacにインストールするアプリケーションをHomebrewで管理しています。
インストーラーを使いたい人は[公式サイト](https://code.visualstudio.com/download)よりダウンロードしてください。

#### Homebrewでインストール
```
brew cask install visual-studio-code
```

#### Markdownプレビュー画面の表示

1. コマンドパレットを開く（ `View` > `Command Pallet` もしくは `cmd` + `shift` + `p` ）
1. `markdown open preview to the side`を入力

## おすすめの拡張機能
ここで紹介しているものは全てVSCodeメニューのEXTENSION（拡張機能）からインストールができます。

#### Japanese Language Pack for Visual Studio Code
VSCodeを日本語化します。初回起動時のデフォルトは英語版になりますので、必要な人は以下手順で日本語化しましょう。

1. EXTENSIONSから`Japanese Language Pack for Visual Studio Code`を検索しインストール
1. VSCodeを再起動（再起動後に日本語化されていれば次以降の手順は不要）
1. コマンドパレットを開く（ `View` > `Command Pallet` もしくは `cmd` + `shift` + `p` ）
1. `configure display language`を入力
1. `ja`を選択し、VSCodeを再起動

#### vscode-icon
VSCode上でファイルアイコンを表示します。私はSetiというテーマがお気に入りです。

1. EXTENSIONSから`vscode-icons`を検索しインストール
1. ファイルアイコンのテーマ（ `Code` > `基本設定` > `ファイルアイコンのテーマ` ）でから好きなテーマを選択

#### テキスト校正くん
WORDのようにVSCode上で入力した日本語文章をチェックしてくれます。
チェックするルールをカスタムできるtextlintという拡張機能も存在しますが、簡易でざっくりとした校正機能を求めるのであればテキスト校正くんで十分です。

#### Code Spell Checker
英単語のスペルをリアルタイムでチェックしてくれます。
検出されたくない単語をホワイトリスト登録することも可能です。

#### CharacterCount
文字数をカウントしてステータスバーに表示します。

#### Evilinspector
文章中の全角スペースを強調表示します。

## 公式設定のススメ

#### 行末のスペースを削除
1. 設定を開く（ `cmd` + `,` )
1. `Trim Trailing Whitespace` を有効化

Trailing Spacesという拡張機能でも実現できるらしいです。（未検証）

#### 設定の同期
設定やキーバインド、拡張機能をマシン間で同期できます。
設定手順は[ユーザガイド](https://code.visualstudio.com/docs/editor/settings-sync)に記載されており、利用にはGithubもしくはMicrosoftアカウントが必要です。
私はMacOSとVMwareFusion上で稼働するKalilinuxで設定を同期させています。
2020年10月の段階でプレビュー中ですが、問題なく動作しています。

## 気になっている拡張機能

#### Draw.io Integration
[Draw.io](https://app.diagrams.net/)のVSCode拡張版です。
思考整理や簡単な図を作るのに便利な気がします。

#### Todo Tree
特定のコメントを検索し、アクティビティバーに表示してくれる拡張機能です。
何か使いどころがないか模索しています。

#### VSNotes
VSCode上で動作するシンプルなメモ帳です。
シンプルと言ってもマークダウンに対応し、GoogleドライブやGithub連携も実現しています。
画像を貼れないのが気になっていますが、なぐり書きするアイデア帳としては悪くないかも。

## おわりに
おすすめの拡張機能があったら教えてください。
みなさんも良いVSCodeライフを！
[AWS][AmazonLinux]docker-composeでディスク容量不足のエラー分析

##背景
コンテナを起動しようとしたところ怒られた

```docker:
# docker-compose up
ERROR: failed to register layer: Error processing tar file(exit status 1): write /usr/sbin/mysqld: no space left on device
```

どうやらデバイスに容量がないらしい

##原因分析
全ファイルシステムの空き容量を見る
dfコマンド・・・パーティションサイズ、空き容量をパーティションごとに表示する

```bash:
# df -h
Filesystem     1K-blocks    Used Available Use% Mounted on 
devtmpfs          485220       0    485220   0% /dev 
tmpfs             503468       0    503468   0% /dev/shm 
tmpfs             503468     704    502764   1% /run 
tmpfs             503468       0    503468   0% /sys/fs/cgroup 
/dev/xvda1       8376300 7869788    506512  94% / 
tmpfs             100696       0    100696   0% /run/user/1000 
```

おそらく/dev/xvda1が94%を使用していて、dockerイメージをDLできないらしい。
では何に容量を食っているのか。調べたところ、もともと入っているライブラリが容量を食っているらしい。
Amazon無料枠に余裕はない模様
duコマンド・・・ディスクの使用量を表示するコマンド

```bash:
# du -sh /usr/*
817M    /usr/bin 
0       /usr/etc 
0       /usr/games 
28M     /usr/include 
344M    /usr/lib 
613M    /usr/lib64 
90M     /usr/libexec 
12M     /usr/local 
1.9G    /usr/sbin 
355M    /usr/share 
0       /usr/src 
0       /usr/tmp
```

##解決
最低限使えればいいのでディスク容量を8GB→12GB拡張する。（AWSを利用している方はおそらく課金対象になるため注意）
Amazon Linxのディスク容量拡張方法については下記参照
https://qiita.com/Ponkotwo/items/fd87d356fd3a735fde99
[AWS]Amazon linuxでディスク容量を拡張する方法

##大きな流れ
①AWSのEC2 コンソールからボリュームサイズを拡張
②Amazon Linux内のディスク容量（パーティション）を拡張

#①AWSのEC2 コンソールからボリュームサイズを拡張
EC2のインスタンス→ボリューム→アクション→ボリュームの変更
私の場合指定のボリュームサイズを8GB→12Gbにした。

参考
EBS ボリュームの変更をリクエストする
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/requesting-ebs-volume-modifications.html

#②Amazon Linux内のディスク容量（パーティション）を拡張
lsblkコマンドで①の設定が反映されていることを確認

```bash:
# lsblk
NAME　　　MAJ:MIN RM SIZE RO TYPE MOUNTPOINT   
xvda 　　 202:0    0  12G  0 disk   
┗xvda1　  202:1    0   8G  0 part
```

※
xvda・・・デバイス名
xvda1・・・xvdaのパーティション番号1を表す

ボリュームサイズが12Gに対しパーティションサイズが8Gなので拡張してあげる必要がある。



<br>
パーティションサイズを変更
gworpartというパーティションサイズ拡張パッケージが必要なのでインストール

```bash:
# yum install cloud-utils-growpart
```
パッケージリストにgrowpartがあるか確認

```bash:
# rpm -qa | grep cloud
cloud-utils-growpart-0.31-2.amzn2.noarch
```

growpartコマンドでパーティションサイズを拡張し、再起動

```bash:
# growpart /dev/xvda 1
# reboot
```

xvdaの1番パーティションが12Gに拡張されていることを確認

```bash:
# lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT 
xvda    202:0    0  12G  0 disk 
┗xvda1  202:1    0  12G  0 part /
HerokuのClearDBをSequelProで可視化

##概要
自作アプリを作成してHerokuにデプロイした際に、ちょっとDBの中身見せてください。
と思った事があったのですが
「・・・どうやって見るんや・・・」となったので、備忘録を兼ね初学者の方のお役に立ったらいいな〜と記事を残しておきます。
そんな事知ってるわ！という方はごめんなさい。

##ことの発端
デプロイしたアプリのトップページに商品としてDBに保存しているデータから画像をとってきて表示しようとしている箇所があり、
それが表示されない（エラーが出る）
↓
なんで？商品３つ保存してあるから商品３の画像は存在するはず・・・
↓
データ保存されてない？why?（結果データは保存されていた）

ということがあって混乱したからです。

##方法
Herokuへデプロイしたアプリのディレクトリでheroku configします。


```
% heroku config
=== (アプリ名） Config Vars
CLEARDB_DATABASE_URL:mysql://ユーザー名:パスワード@ホスト/データベース?reconnect=true
```

この:や?で切られている文字列がそれぞれ必要になる箇所です。
それをSequelProの入力項目にそれぞれあてはめていきます。

![スクリーンショット 2020-10-21 0.07.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656450/cf2082a9-4ff5-42e1-cac1-fd0d69b3035c.png)

ホスト、ユーザー名、パスワード、データベースの箇所を埋めて接続すると、
HerokuのClearDBを確認できます。
他にもHerokuのClearDBを確認する方法はあったのですが、
個人的にこれが一番難易度低いかな・・・と思った方法でした。

そしてデータを確認して気付いたのですが、IDが１０番飛ばしで保存されてました。
id:1
id:11
id:21
みたいなかんじです。
そりゃid3は存在しないわけだ・・・と納得できました。
CSS Containmentとcontent-visibilityによるパフォーマンス改善

# 概要
Chrome85にて実装された`content-visibility`プロパティーと、それに関連するCSS Containmentという仕様について調べたメモです.

間違い等ありましたらご指摘いただけると幸いです.

# Browser Support
- Chrome 85 ~
- Edge 85 ~

# CSS Containment
CSS Containmentとは、描画の改善を目的に、UserAgentに対象のDOMが、他のDOMに影響を与えない事を伝え、レンダリングの最適化を行うための仕様.

仮想DOMのように差分の更新およびレンダリングによる最適化のようなイメージ.
(Containment = 封じ込め の意味から推測できる.)

また、後述の`content-visibility`プロパティーを使うことで、viewportに含まれたらレンダリングするLazyLoad的な方法での最適化もできる.


CSS Containmentには4つのタイプが存在し、`contain`プロパティーを通してそれらを指定する.

### Size Containment
- 子要素の大きさに依らず、そのサイズが分かっている際は、`contain: size;`を指定することで、その子要素のサイズの計算等を省略することができる.
- `contain: size`を指定して、大きさを指定しなかった場合は`0px x 0px`で表示される.
- パフォーマンスにはあまり寄与しない.

### Layout Containment (効果大)
- レイアウトの封じ込め.
- 子要素によって他の要素のレイアウトに変更を与えないことが事前にわかっている場合は、`content: layout;`を指定することで、レイアウト計算を省略できる.

### Style Containment
- 子要素内のスタイルの変更が、他の要素にも影響しないことを保証する.
- CSSのカウンターなどは、他の要素に影響を及ぼす例.

### Paint Containment (効果大)
- 描画の封じ込め.
- 子要素が、指定された要素の領域外に表示されない場合、描画処理を省略できる.
- positionにabsoluteやfixedを指定された要素のような挙動を取る.
    - 親の要素と同じようには配置されない.
- スタッキングコンテキストになる.
- フォーマティングコンテキストになる.
    - 独立したレイアウト環境として扱われる.

### contain
`contain`は上4つのContainmentを複数指定することができる.

```
contain: paint layout;

contain: content;
// contain: layout style paint;と同じ
 
contain: strict;
// contain: layout style paint size;と同じ
```

# content-visibility
`content-visibility`は`contain`でやっていたヒューリスティックな作業を、ブラウザ側で自動で識別して改善してくれる.
content-visibilityが指定された要素が完全にviewportに表示されていない(Off-screen状態)ならレイアウト計算を省略し、要素がviewportに含まれた時点で、描画を始める.

### content-visibility: hidden;
`content-visibility: auto;`とは違い、Viewportに含まれても自動で描画してくれなくなる.

`display: none`は通常の描画と同じくらいの描画コストがかかる.

`visibility: hidden`は表示されないが、完全に要素が消えているわけではなくクリックも可能な状態. また子要素の変更に対して、表示しないにも関わらず描画処理が走る.

`content-visibility: hidden`だと、レンダリング状態は保持しつつ、visibleになったときのみ描画処理が走る.

# contain-intrinsic-size
Size Containmentのheightをここで指定する. 
Off-screen時で描画が省略されている場合は通常そのheightがわからないが、ここで指定することで描画しなくても、スクロールバーが正しく表示される.

# まとめ
```css
content-visibility: auto;
contain-intrisic-size: px;
```
この組み合わせを上手く活用することで、大幅なパフォーマンス改善できることでしょう！（ただしChromium系に限る...）

# 参考

- Can I use... Support tables for HTML5, CSS3, etc https://caniuse.com/?search=content-visibility

- content-visibility: the new CSS property that boosts your rendering performance https://web.dev/content-visibility/
- Chrome 52 に CSS Containment が導入  |  Web  |  Google Developers https://developers.google.com/web/updates/2016/06/css-containment
要約力が大事

「要約力」が大事テクニカルライティング　というか
ほうれんそう　というか結構一般的な、ビジネス的な　コミュニケーションのセオリー。
case

* お客様とのトーク、会議
* 先輩との報連相質
* ビジネスメール
...仕事上でのジョーク以外の全部、かもしれませんね。以下、意識してみると、
いろいろ各段にスムーズになります。
* 結論から。
* 種類から。（質問/提案/依頼/謝罪/報告）
* 相手（の職種・業務・立場）の興味/危機感あるところから。
* 相手の理解度から。
大概は、概要と結論でいい。

詳細が必要になったら、

その際、追加で回答すればいい。
　　
　　詳細欲しい人なんて稀。
　　みんな暇じゃない。 business = busyの名詞
　　興味がある / めっちゃ危機感ある人だけです。　　
　　あと、長文って、読み手の恐怖をあおるんですよね 😱
　　読みにくくなって理解しにくくなる
　　メインでない、余計な言葉が目について気になってしまう🙄　親切したつもりで、まさに裏返し🔁
　　その結果、これでもかこれでもかと言葉を足して、
　　悪循環になってる人を頻繁に見ます🌪

何かうまく伝わらないなー　横道にそれるなー　と思ったら、

↑の観点でKPTしてみてくださいね。
「要約力」大事です。
NFCとFeliCaのお話

## 勉強前イメージ

suicaとかicocaで使われてるものって感じ
電力がなくても使える
FeliCaとは何が違うのかな？

## 調査

### NFC とは

Near Field Communicationの略。
近距離無線通信規格の一つ。
かざすだけで様々な機器と無線通信ができる。
suicaやicocaなどの決済だけじゃなくて認証にも使われている


### NFCの規格

NFCの種類は大きく以下の4つあります。

- 密着型(ISO/IEC 10536) : 通信距離2mm程度
- 近接型(ISO/IEC 14443) : 通信距離10cm程度
- 近傍型(ISO/IEC 15693) : 通信距離70cm程度
- 遠隔型(ISO/IEC 18000) : 通信距離70cm以上

今回は近接型について確認していきます。

### NFCの種類(近接型)

- Type-F(ISO/IEC 18092)
	- 開発 : sony
	- 用途 : suicaやicoca
	- 特徴 : Type-A,Bに比べて通信速度が2倍近くはやい
	- その他 : 国内ではType-Fが普及している

- Type-A(ISO/IEC 14443/18092)
	- 開発 : NXP Semiconductors(旧フィリップス)
	- 用途 : taspo にて使用されている
	- 特徴 : 世界中で普及しており、安価に使用できる
	- その他 : Visa等クレジットカードのタッチ決済	

- Type-B(ISO/IEC 14443)
	- 開発 : Motorola
	- 用途 : 免許証やマイナンバーカードに使用されている
	- 特徴 : セキュリティレベルが高いが、処理が遅く製造コストが高い
	- その他 : Visa等クレジットカードのタッチ決済

#### まとめた図

| プロトコル | ISO/IEC 18092                             | ISO/IEC 14443/18092 | ISO/IEC 14443                 | ISO/IEC 15693 |
|------------|-------------------------------------------|---------------------|-------------------------------|---------------|
| 名称       | Type-F                             | Type-A        | Type-B                  | -             |
| 通信規格   | FeliCa                                    | Mifare Topaz        | -                             | -             |
| 主な用途   | suica/icoca/QUICPay | taspo               | 運転免許証/マイナンバーカード | 物流RFIDタグ  |
| 特徴 | Type-A,Bに比べて通信速度が2倍近くはやい | 世界中で普及しており、安価に使用できる | セキュリティレベルが高いが、処理が遅く製造コストが高い | - |

※ISO/IEC 15693は特殊なので他3つを重点的に見ます

### FeliCa と　NFC の違い

NFCのType-Fの規格で、独自のセキュリティ機構を盛り込んだのが `FeliCa` になります。

### スマホにはどの規格が使われている？

- よくおサイフケータイって言うけど....

おサイフケータイとはFeliCaチップを搭載し非接触決済が可能な携帯電話のこと
要するに、`おサイフケータイ` = `NFC Type-Fを搭載している` ということ

- iphone7 でのモバイルsuica対応

これは、Appleが国際的なType-A/Bだけでなくて、日本の規格のType-Fを搭載したと言うことになります。

- 要するに....

今のスマホには、おサイフケータイが使えたらType-Fが使える、と言うことになります。	

### スマホでのNFCの機能

- リーダー/ライターモード

NFCタグの読み取り・書き取りをできるモード
suicaやicocaなどの残高を読み取るアプリはこのリーダー/ライターモードを利用しています。
NFCデバイスはリーダー/ライターモードを使用する際はすべてのNFCタグのタイプを読み書きできるように義務付けられています。

- P2Pモード

NFCデバイス同士で情報を交換するモード
Android Beamが昔あった。

- カードエミュレーションモード

従来の非接触ICカードの機能の代替モード
スマホをsuicaのように振舞わせて、決済できる機能。
よく使われている。
リーダー/ライターモードはある(残高は見れる)けど、モバイルSuicaが使えない時はこのカードエミュレーションモードが搭載されていないということです。

## 勉強後イメージ

思ったよりいろいろ規格があった....
昔のスマホは、モバイルSuica使えなかったけど残高は見れたから、`リーダー/ライターモード`は使えたんだなぁとやっと腑に落ちました。
あとFeliCaとNFCの違いがわかった。
クレカの非接触とモバイルSuicaは規格が違うだなんて知らなかった...面白かった。

## 参考

- [NFCって何？FeliCaとの違いは？【解説コラム】](https://telektlist.com/what-is-nfc/)
- [NFCとは？—決済・3つのモード・プロトコルの違いについてお勉強](https://8vivid.net/whats-nfc/)
- [“かざして通信”の『NFC』規格とは？ FeliCaとの違いやスマホでできることを解説](https://time-space.kddi.com/ict-keywords/20190222/2577)
- [FeliCaとは？—構造・スペック・特徴・種類・利用例をまとめて調べてみたぞ！](https://8vivid.net/whats-felica/)
gitリポジトリの統合

# 準備

統合先リポジトリ：main-repo
統合されるリポジトリ：sub-repo

# 統合編
[【Git】2つのGitリポジトリを履歴を保持して統合したい](https://qiita.com/nozomi-kawai/items/5efe8e47e54ebccd0bf8)

先駆者の方がいらっしゃいましたので同じ手順で行いました。

```shell
# 統合先リポジトリに移動
cd main-repo/

# 念の為ローカルリポジトリを最新にする
git pull

# 作業用のブランチを作成(ブランチ名：integration_repo)
git checkout -b "integration_repo"

# 統合するリポジトリを格納するためのディレクトリを作成
mkdir sub-dir

# 空ディレクトリをgit管理できるように.gitkeepを作成する
touch sub-dir/.gitkeep

# 一旦コミットする
git add -A
git commit -m "create sub-dir"

# 統合されるリポジトリを統合先リポジトリのリモートに追加する
git remote add sub-repo <統合されるリポジトリのURLかローカルリポジトリのPath>
git remote update sub-repo

# ちゃんとリモートに追加されているか確認
git remote -v
#=> origin <path> (fetch)
#=> origin <path> (push)
#=> sub-repo <path> (fetch)
#=> sub-repo <path> (push)

# 統合する
git merge --allow-unrelated-histories -X subtree=sub-dir sub-repo/master 

# コミットメッセージの入力画面が開く。そのままでよければそのまま保存する

# リモートリポジトリに反映
git push --set-upstream origin integration_repo
```

# コマンドの意味

##### `git remote add <remote> <url>`

リモートを追加します。`remote`はリモートに対する短縮名なのでわかりやすい名前ならなんでもいいです。`url`にはローカルリポジトリをcloneしているならそのパスを指定することもできます。
この時、指定したurlのmasterが最新でないとその状態で統合されることになるので`git remote update`する前にmasterがどのような状態であるか確認するのがベターです。

##### `git remote update <remote>`

リモートリポジトリからオブジェクトとそれに関連したメタデータを取得します。
`git fetch <remote>`でも代用可能です。

##### `git merge --allow-unrelated-histories -X subtree=<path> <commit>`

`git merge <commit>`・・・今いるブランチに`<commit>`の内容をマージします。
`--allow-unrelated-histories`・・・共通の祖先のいない履歴同士のマージを許可します。（デフォルトではこのようなマージは稀であり安全のため認められていません。）
`-X subtree=<path>`・・・マージ戦略のオプションを渡します。subtreeで指定した`<path>`が統合されるブランチのプレフィックスとして付与されたうえでマージされます
// subtreeを指定しないと、ルートディレクトリにマージされます。そうすると同じファイル名のものはもちろんマージされるので、競合の可能性もあり作業が複雑になります。

# 影響

Q 統合元のコミット履歴は統合先にも反映されるか

される

Q これ以降、統合元のコミットは統合先にも反映されるか

されない

Q これ以降、統合先のコミットは統合元にも反映されるか

されない

Q 統合元のMRとかPRは統合先に引き継がれるか

引き継がれない

Q 統合元のタグは引き継がれるか

引き継がれない
アセットパイプライン


Railsは、どのようなWebアプリケーションを開発おする際にも共通して作成する必要があるものを、自動的につくることができます。Webアプリケーションフレームワークのひとつです。

Webアプリケーションフレームワークは、みなさんが日常的に使っている「メールテンプレート文」とその役割が同じです。どちらも作業を効率化するために使う点では、同じことです。メールテンプレート文は、メールを新たに作成する都度使います。Webアプリケーションフレームワークは、Webアプリケーションを開発する都度使います。

Ruby on Railsにはアセットパイプラインという機能が実装されています。その役割をひと言で説明すると、「Web画面上の色塗りを楽にする機能」です。

比喩として”色塗り”と言っていますが、具体的にはWebブラウザに画面のデザインを認識させるためにHTMLに紐付くCSSやJavaScript、Imageファイルを記述・作成することです。

初学者は、Ruby on Railsのフレームワークの役割とディレクトリ構造を覚えることに苦心します。そのため、”Webブラウザ上に画面が表示される仕組み” については見落とされがちです。

インターネット上の情報は、webブラウザを介してみることがほとんど。そのwebブラウザ上に画面が表示されるのは、”webブラウザがHTMLとCSS、javascriptを認識する必要があることを、認識せずに Ruby on Rails の学習を進める初学者が多いです。
￼
webブラウザでh表示されるものは、HTMLとCSS、javascriptが紐付くことによって、描かれていると認識する。この仕組みがアセットパイプラインによって実現されるようになっている。
no CUDA-capable device is detected

2020/10/28 更新　エラーの解決策を見つけた。

#環境
linux
python3
gpu nvidia

#エラー
rayで__GPUを使用__し、並列処理をしていると以下のようなエラーがでる。

```
RuntimeError: cuda runtime error (100) : no CUDA-capable device is detected at /opt/conda/conda-bld/pytorch_1591914855613/work/aten/src/THC/THCGeneral.cpp:47

```

#エラーの対処方法
上記のエラーは以下のようになっているであろうか。

```
 File "/home/user/anaconda3/envs/muzero/lib/python3.7/site-packages/torch/cuda/__init__.py", line 192, in _lazy_init
    torch._C._cuda_init()
RuntimeError: cuda runtime error (100) : no CUDA-capable device is detected at /opt/conda/conda-bld/pytorch_1591914855613/work/aten/src/THC/THCGeneral.cpp:47
```

このとき、/home/user/anaconda3/envs/muzero/lib/python3.7/site-packages/torch/cuda/\_\_init\_\_.pyのファイルを開く。
そして、以下のようにGPUの指定を行う。

```
r"""
This package adds support for CUDA tensor types, that implement the same
function as CPU tensors, but they utilize GPUs for computation.

It is lazily initialized, so you can always import it, and use
:func:`is_available()` to determine if your system supports CUDA.

:ref:`cuda-semantics` has more details about working with CUDA.
"""

import contextlib
import os
import torch
import traceback
import warnings
import threading
from typing import List, Optional, Tuple, Union
from torch._six import raise_from
from ._utils import _get_device_index, _dummy_type
from .streams import Stream, Event
from .. import device as _device
import torch._C

try:
    from torch._C import _cudart
except ImportError:
    _cudart = None

os.environ["CUDA_VISIBLE_DEVICES"]="0"
・
・
・
```

上記のように__os.environ["CUDA_VISIBLE_DEVICES"]="0"__を書く。

するとGPUが指定されてエラーがなくなる。
__補足__
私はCUDA:0をしようした例を書いた。
CUDA:1を使うならos.environ["CUDA_VISIBLE_DEVICES"]="0"と書く。
【Python】zip関数ってなんだっけ？

#忘備録
zip関数は、異なるリストから同時に要素を取り出したい時に使う。
*例題は要素2つでやってるけど、要素3つ以上でもOK

###(例１) for文で使う場合

```
 for alpha, kana in zip(["a","b","c"],["あ","い","う"]):
    print(alpha, "and", kana)
```

```python:実行結果1
a and あ
b and い 
c and う
```

###(例2) listで使う場合

```
a = [1,2,3]
b = [11,12,13]
c = list(zip(a,b))
c
```

```python:実行結果2
[(1, 11), (2, 12), (3, 13)]
```
MySQLにホームディレクトリ.my.cnfの認証情報でログインに失敗する

## はじめに
本番環境を仕様書にして検証環境を構築している最中のこと。
本番環境のシェルスクリプトがmysqlコマンドをユーザID、パスワードを渡さずに実行しています。ユーザID、パスワードは、ホームディレクトリの.my.cnfファイルに定義されていたので、検証環境も同じように定義しました。（本番環境、検証環境でパスワードは異なる）
検証環境でシェルスクリプトを実行すると、MySQLのログインに失敗し実行エラーが発生する。
それが解決できたので、同じ事象が起きた時のために情報をまとめます。

## 環境

+ CentOS Linux release 7.8.2003 (Core)
+ mysql  Ver 8.0.22

## ログインできないケース
### 認証情報の定義
```config:.my.cnf
[client]
user = root
password = Pass1234#
```

### ログイン実行結果
```console:console
[root@dev01 ~]# mysql
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
```

## 原因
もしかして、パスワードの#がコメントの始まりとして無視されているのではないか？
パスワードをダブルクォーテーションで括ってみます。

```config:.my.cnf
[client]
user = root
password = "Pass1234#"
```

```console:console
[root@dev01 ~]# mysql
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 17
Server version: 8.0.22 MySQL Community Server - GPL

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>
```

今度はログインできました！

## 最後に
検証環境でシェルスクリプトが正常実行できるようになりました。
設定ファイルの設定値が文字列の場合は、クォーテーションで括ったほうが良いのかな。
令和2年秋　データベーススペシャリスト受験記

[こちらのブログ記事](https://yk0807.com/techblog/2020/10/20/%e4%bb%a4%e5%92%8c2%e5%b9%b4%e7%a7%8b%e3%80%80%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9%e3%82%b9%e3%83%9a%e3%82%b7%e3%83%a3%e3%83%aa%e3%82%b9%e3%83%88%e5%8f%97%e9%a8%93%e8%a8%98/)と同じ内容です。

10月18日日曜日、4月に行われるはずだったのが延期になっていたデータベーススペシャリストの試験を受けて来た。会場は沖縄県立那覇工業高校。

午前1は去年受けたシステムアーキテクト試験（午後2で不合格）のおかげで免除で、午前2から。
自分の受けた教室は受験人数は20人より少し少ないくらいか。

# 午前2
問題は[こちら](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/mondai_kaitou_2020r02_oct/2020r02o_db_am2_qs.pdf)。
いきなり問1にCAP定理が出て、焦る。昨年CAP定理が出たから今年は出ないだろうと思っていたけど、違う切り口で出てきた。これはやはりCAP定理についてちゃんと理解しておく必要があるということか。
問2も新作問題のNoSQLについてだが、参考書で別のノードに時間差で反映されるのがあった気がして、イにマークする。
問3からは過去問通りの問題が出て来て、ペースが上がってくる。
最後の方に電気泳動型電子ペーパーとか知らない問題も出て来たが、終わってみるとまあ大丈夫かなという感触。
解答は[こちら](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/mondai_kaitou_2020r02_oct/2020r02o_db_am2_ans.pdf)。自己採点で18/25。一安心。

# 午後1
問題は[こちら](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/mondai_kaitou_2020r02_oct/2020r02o_db_pm1_qs.pdf)。
予定では問1＋問2か問3のどちらかなので、まずは問1を解いていく。
問題の意味はまあわかるのだが、45分（90分の半分）でやるにはどうにも量が多い。最後の方は結構慌てて書いたので、リレーションをいくつか書き損ねてしまう。
問1が終わったところで47〜8分くらい経過。問2と問3をざっと見て、問2の方が記述の量が少なそうなので問2に行くが、これが失敗だった。
設問1と設問2の最初はまあわかったのだが、そこから先がさっぱりわからず、これはまずいと思い問2を退散し、問3に。10分くらいタイムロスしてしまったので30分で問3を解かなければならない。
しかし、問3はやってみると３問の中では一番簡単で、販売額がNULLになるケースと一番最後のテーブル構造以外はそんなに悩まず解くことができた。
試験後のツイッターとか5chとかを見た感じだと、やはりみんな問1が時間かかり過ぎという声が多かった。

# 午後2
問題は[こちら](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/mondai_kaitou_2020r02_oct/2020r02o_db_pm2_qs.pdf)。
こちらは物理設計が苦手なのでお絵かきの問2と最初から決めており、問1には目もくれず問2にかかる。
こちらは時間的には午前1よりは十分にあるのだが、ルート巡回とかがいまいちイメージしきれず、リレーションの線を引く箇所も結構迷うところが多く、なかなかしんどかった。
特に設問2(2)の6箇所中5箇所が同じ回答になってしまい、本当かよと思いつつ、他に回答が思い浮かばず6箇所中5箇所が同じ回答のまま進める。
どうにか回答を埋めきったけど、全然答えに自信が持てないorz
去年のパン屋の問題がかなり難しかった反動で易化を期待したけど、残念ながらそうはならなかったか。

#その他
試験勉強は[この本](https://www.amazon.co.jp/%E5%85%A8%E6%96%87PDF%E3%83%BB%E5%8D%98%E8%AA%9E%E5%B8%B3%E3%82%A2%E3%83%97%E3%83%AA%E4%BB%98-%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AA%E3%82%B9%E3%83%88%E6%95%99%E7%A7%91%E6%9B%B8-%E4%BB%A4%E5%92%8C3%E5%B9%B4%E5%BA%A6/dp/4295009903/ref=zg_bs_2157079051_2?_encoding=UTF8&psc=1&refRID=6AT84D2VZARV43HAFDR9)を主に使いました。
午前2は何回か過去問をやって大丈夫そうだったので、午後にやや重きを置いて勉強しました。
勉強の仕方としては、問題と解答をよく読んで解き方を理解して行くというものでした。ただ、今になって思えばもう少し手を動かせばよかったかなと。

合格発表は12月25日のクリスマス。去年のアーキテクトも含めて高度試験は3回午後2で沈没しているので、そろそろ受かりたいけど、どうなるか。。。

# 2020/12/25追記
何とか合格しました！！
午前１:免除、午前２:７２点、午後１:６９点、午後２:62点でした。
午後2は本当ギリギリだったので（配点がわからないので何とも言えないけど）、リレーションをあと数本引き忘れていたら落ちていたと思うと、本当ゾッとする（汗）
勝因としては、最後まで諦めずに粘ったことと、午後1で手が動かなくなった時点で問2を退却して問3に切り替えたことか。
とは言え、現在業務でテーブル設計とかやっているけど、実務の点ではまだまだだと痛感するので、これから勉強を積んで本当の意味でデータベースのプロになれるよう研鑽を積んでいきたい。

次は何を受けるかを考えると、ネットワーク（に限らずインフラ全般）は苦手だし、エンベデッドは業務と結びつかないし、セキュリティ改め情報処理安全確保支援士は資格を維持するのにかなりお金がかかるみたいなので、長文を書くのは苦手だけど、論文系の資格（システムアーキテクトorプロジェクトマネージャ）を狙うしかないなあ。
Muralのファシリテーター権限で使える機能(覚書)

Muralのゲストとファシリテーターで使える機能が違うのだけれど、すぐに忘れてしまうのでメモ。

以下は、古いので、新しいのは こちら。 https://qiita.com/tokudiro/items/24f4b6ccec6eaff0b883
# ファシリテーター権限のみ使えるのは、以下の6つ。

* タイマー
* 招集
* アウトラインの編集
* 特別なロック
* ボードのサイズと背景色変更
* 御祝い機能

![Mural_Facilitation_Superpowers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73918/b0ab1cb4-318c-d2c7-9ac0-b5af793fa3b4.png)

---
以下、ダイアログのざっくり訳を載せておきます。

## Facilitation Superpowers(ファシリテーションスーパーパワー)
Facilitator Superpowers are tools to help set up your murals and run productive meetings or workshops.
ファシリテータースーパーパワーは、Muralsを設定し、生産的な会議やワークショップを実行するのに役立つツールです。

### Timer(タイマー)
Use the Timer stay focused and on schedule. If you need more time for an activity, you can add extra time on the fly.
集中してスケジュールどおりに進むよう、タイマーを使用できます。 アクティビティにもっと時間が必要な場合は、その場で時間を追加できます。

### Summon(召喚)
Make sure everyone is looking at the same thing at the same time by summoning all partcipants to where you are in the mural.
Mural上のあなたのいるところに全ての参加者を召喚することによって、全員が同時に同じものを見ているようになります。

### Outline, Instructions, and Hide/Reveal steps(アウトライン、手順、および非表示/表示の手順)
Use the Outline to guide people through your mural. Add instructions, and hide steps you're not ready for people to see.
アウトラインを使用して、Muralを通して人々をガイドできます。 手順を追加したり、他の人が見る準備ができていないステップを非表示にしたりできます。

### Super Lock(スーパーロック)
Any element you lock can only be unlocked by members with Facilitation Superpowers, so your content stays where you want it.
ロックした要素は、ファシリテーションスーパーパワーを持つメンバーのみがロックを解除できるため、コンテンツは必要な場所にとどまります。

### Change the mural size and background color(壁画のサイズと背景色を変更する)
Customize your mural to fit the needs of your session.
セッションのニーズに合わせてMuralをカスタマイズします。
You can also modify the mural size by dragging the bottom and right edges.
下端と右端をドラッグしてMuralのサイズを変更することもできます。

### Celebrate(祝う)
Is a teammate having a birthday? Did your team reach a milestone? From your avatar menu you can throw confetti to celebrate together.
チームメイトは誕生日を迎えていますか？ あなたのチームはマイルストーンに到達しましたか？ アバターメニューから、紙吹雪を投げて一緒に祝うことができます。
【初学者/自分用】gitのbranch〜pushまで詳しく解説!!

#はじめに

プログラミング入門時や公式ドキュメント(Railsチュートリアルetc.)などを書くときに、
「git checkout -bとは？」「git add -A と git add . の違いって？」ってなりました。😇（私だけ？）

まあ、初めから分かる人なんていません。まずは基礎からゆっくりわかればいいのです。

まずは、簡単な流れを書くと、、、(例：Railsチュートリアル)

```ruby:consale
$ git checkout -b XXXX　(内容のタイトルを書くように、コーディングする内容をわかりやすく書く)
 #コーディングする
$ rails test　#コーディングした後はテストする癖をつける
#コーディング、テスト共に終了した！
$ git add -A
$ git commit -m "comment"("comment"はどんなこと書いたか一言。) #誰が見ても分かるように
$ git checkout master
$ git merge XXXX(上のXXXXと同じことを書く)

$ rails test(確認。念のため。) #pushする前にテストする癖をつける
$ git push
$ git push github(herokuなど)
```

　
それぞれについて意味や違いを解説していくよ〜！
それぞれにあるURLは、「もう少し詳しく知りたい！」って人向けの記事になります！
自分が参考になった記事を載せています。

# git checkout -b

そもそもこれは、「chekcout」と「branch」が複合していたんですよね〜
では、なぜこの組み合わせはくっつくことができるのかと言いますと、
まずはそれぞれの意味を理解する必要があります。
　
**git checkout**

「ブランチを切り替えたいとき」に使用するコマンドです。

つまり、今作業しているブランチから退出して、新たに他の作業ブランチで作業をしたい場合に使用する。

https://git-scm.com/docs/git-checkout#git-checkout-emgitcheckoutemltbranchgt


**git branch**

ブランチを"切る"と言います。✂︎

masterブランチの内容を引き継いで他の作業を実施したい時に、ブランチを"切る"と、他のブランチとは独立した履歴が保存されていくため、他人の作業に影響を与えることなく作業をすることができます。

ソフトウェアやサービスの開発をしていて、

・「新しい機能追加を試したい時」
・「複数人でファイルを編集する時」
・「更新や修正が必要になった場合」

に編集をしやすくするための機能です。

各ブランチで開発された機能は「masterブランチ」にどんどんマージ（mergeはこの先でやるよ！）されていき開発を進めていくという流れが一般的にはよく使用されています。

https://qiita.com/chihiro/items/e178e45a7fd5a2fb4599



#git add

https://qiita.com/iHiromu/items/5629eb76a31565613a96



#git commit

gitを使用すれば簡単にファイルの進捗を管理することができます。
そのためにファイルの「変更」や「追加」などを「保存」しておく必要があります。

ファイルの変更をgitレポジトリに保存することができます。

(いい記事が見当たらなかった...ので今度書きます。)



#git checkout master

git chekoutと同じ。
branchを切り替えた後に編集し、masterに反映させるために使う。



#git merge

各ブランチで開発された作業はそのままだと、マスターのブランチには反映されません。


そうならないために、マスターブランチに各ブランチで編集した作業を反映させるためのコマンド。

https://backlog.com/ja/git-tutorial/stepup/09/


#git push

ローカルリポジトリで開発したとしても、それをリモートリポジトリに反映できなければ、他の人が書いているコードは過去のバージョンのコードのままです。

そうならないために、git ではgit pushというリモートリポジトリにローカルリポジトリの変更を反映するためのコマンドが用意されています。

ローカルリポジトリ、リモートリポジトリ
https://wa3.i-3-i.info/word15664.html
git push
https://www-creators.com/archives/1472


#終わりに

簡単に説明しただけなので、完全な理解はできていないと思いますが、少しづつ理解していければ問題ないと思います。
詳しい内容は、それぞれのURL先に記述していきます。

筆者も初学者ですので、未経験がエンジニアになるための人助けに少しでもなればいいと思い書きました。
少しでも参考になれば幸いです。☺️



###参考文献(※外部サイトへ飛びます。)

>https://railstutorial.jp/
>https://note.nkmk.me/git-add-u-a-period/

参考になったら、下の『ストック』や『LGTM』を登録するといつでも見れるようになります。👇👇👇
機械学習のためのPandas Matplotlib 入門

#What
Chainerを利用して機械学習を学ぶにあたり、私自身が、気がついた点、リサーチした内容をまとめる記事になります。今回は、scikit-learnを勉強します。

私の理解に基づいて記述しているため、間違っている場合があります。間違いは都度修正するつもりです、ご容赦ください。

#Content
###Pandas
>Pandas はデータ操作によく用いられるパッケージであり、CSV などの一般的なデータ形式で保存されたデータの読み込みや、条件を指定しての一部データの抽出など、機械学習手法で取り扱うデータを整理するのに便利です。

とまぁ計算ツールみたいなものですね。算盤とか電卓とか計算を楽にしてくれる道具的な立ち位置です。ちなみに下記の操作ができるみたいです。

・CSV ファイルの読み書き
・統計量の算出
・並べ替え
・データの選択
・条件指定による選択
・欠損値の除去 / 補間
・ndarray とデータフレームを相互に変換
・グラフの描画

パッケージの読み込みは下記、pandasライブラリをpdという名前で使いますという宣言

```py
import pandas as pd
```

よく使われるcsv形式のファイルを例に取り、読み込みたい場合は下記、

```py
# データセットの読み込み
df = pd.read_csv('ファイルパス')
```
ここで出てきた`df`はpandasで定義されているデータフレーム型(data frame) のデータ構造 (data structure) を表すクラス名です。 pd.read_csv() 関数は、CSV ファイルを読み込みます。


###Matplotlib
グラフを描けるライブラリ。折れ線、散布図、箱ひげなど。特筆すべき点は特に見当たらない。

またコード書きながら抑えるポイントが出てきたら追記します
Qiita初めての投稿

はじめまして。エンジニア歴10年、プログラマ歴10ヶ月のエンジニア **まさお** です。
初のQiita投稿です。

システムエンジニアとして成長するために、分野を問わず学習したことを
アウトプットして行きたいと思います。

私がQiitaへ記事を投稿(output)する目的は下記の通りです。

- 可視化された実績(記事の積上げ)を目にすることで自分に対する自信を深めるため
- 学んだ知識が必要となった際に振返れるようにするため
- アウトプットにより学んだ知識をより定着させるため

目的が増えたら追加していこうと思います。
いずれ他の人にとって役に立つアウトプットを共有できるようにして行きたいと思います。
Svelteでnpm run dev時に出る警告ログの消し方

# はじめに

Svelte.js、Sapperなどでnpm run devなどでコードの書き方で警告表示がされることがあるかとおもいます。一番いいのは勿論コードを修正することですが、特に問題ない場合そのままにしておきたい、でも警告が邪魔って思う時があるかと思うので今回はその時の対応方法を紹介します。

# `svelte-ignore`
コメントに`svelte-ignore`追加することでアクセスシビリティルール(a11y)を無視することが出来ます。

例

```svelte
<!-- svelte-ignore a11y-rule -->
```

# 実際に警告を消してみる

```jsx
<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>test</label>
```
【rails】partialをrenderする時（部分テンプレートを読み込む時）のcollectionについて

今回railsで部分テンプレートを呼び込む際、collectionを使うと、ローカル変数をより簡単に渡せることを学習したため、アウトプットいたします。

renderメソッドについてわからない方は検索してみてください。

#collectionを使うと部分テンプレートにローカル変数を送る際にとても楽にできる


まずは前提としてanswerモデル、コントローラーがあります。

```csharp
def index
@answers = Answer.all
end
```

これでそれぞれの人の答えが@answerに入りましたね。

ここでlocalを使って部分テンプレートに変数を送ると

```csharp
<% @answers.each do |answer| %>
  <%= render partial: "answer", locals: { answer: answer } %>
<% end %>
```

となります。

ただ、上記では、@answersに10個情報が入っていたなら、1回づつrender particalが呼び出されてしまいます（合計10回）。
つまり速度が遅くなってしまうのです。

そこで簡単に部分テンプレートに変数を遅れるのがcollectionです。

#collectionを使うと便利

```csharp
<%= render partial: "answer", collection: @answers %>
```

たったこれだけで部分テンプレートにローカル変数を送ることができます。
例え10個情報が@answersに入っていたとしても、部分テンプレートにまとめて渡されて、10個のビューが作成されます。


私も学習段階になるため、間違い等が発生する場合があります。
その際はお手数ですが、ご指摘いただけると幸いです。
Vuetifyのv-textarea下にある空白を消し去る

#概要
Vuetifyでv-textareaを使ったときにtextareaの下にできる空白を消す方法を紹介します。
結論的には全然大したことじゃなかったのですが、折角なので記事書いてみようってことで書いてみました。
初めてなので生温い目で見て頂けると大いに喜びます。

**Version**
@nuxt/cli v2.14.6
vuetify 2.3.14

##コード
とりあえずv-textarea使ってみる。

```Vue
<template>
  <div class="container">
    <v-form>
      <v-textarea outlined>
      </v-textarea>
    </v-form>
    <p>上に空白できるよー</p>
  </div>
</template>
```
こんな感じでテキストエリアの下になんかいる。
![v-textarea_SS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551910/0397472c-1bd5-5c49-b5ed-f9cb604bbde6.png)

##原因と対処法
v-textareaにはバリデーションやヒントのメッセージを簡単に表示できる機能があり、
そのメッセージを表示するためのエリアがテキストエリアの下に空白として出てるっぽい。
特にバリデーションやヒント使わないで、空白消したい場合はv-textareaのpropsに
**hide-details="false"**指定してあげれば消え去ってくれます。

```Vue
<template>
  <div class="container">
    <v-form>
      <v-textarea outlined hide-details="false">
      </v-textarea>
    </v-form>
    <p>上に空白できるよー</p>
  </div>
</template>
```
すっきり！
![hide-details_SS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551910/5c8c822e-cbcf-d8c2-3f46-171e09d3f590.png)

##まとめ
Vuetify便利で良いですね、使いこなせていませんが。
日本語で「Vuetify v-textarea 空白」とか調べて2日くらいモヤモヤしてましたが、
普通にVuetifyのドキュメントに書いてありました。（英語苦手で避けてました…）
慣れないうちはドキュメント最強という話は本当だったのだと知る良い機会でした。

###参照
https://vuetifyjs.com/en/api/v-textarea/
pythonanywhereにuploadしたDjangoのSQLite3をGUIだけで変更する方法 mshmura

pythonanywhereにuploadしたDjangoのデータを変更する方法。
コマンドラインを使用せずに、直観的に変更方法の備忘録。

やりたかったこと
・しばらく放置していた自身のポートフォリオサイトのアプリのリンク先と画像を久しぶりに更新したかった。

変更前の画像





ステップ１
pythonanywhereのコンソール画面を開いて、sqllite3ファイルが置いてあるフォルダまで進む。sqlite3ファイルをダウンロードする。

![スクリーンショット 2020-10-20 205239.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/571d353f-4597-d54a-df7f-d3c2fc8c7ca9.png)

ステップ２
DB Browser(sqlite) を使用して、ダウンロードしたdb.sqlite3ファイルを開く。

![sql3broser.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/b5b0b724-3dd0-1519-828c-2c2444fc3b20.png)


ステップ３
リンク先と新たな画像名を変更する。変更後、Applyを押す。

![editdatabase.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/d7dffc1a-95e7-2910-0feb-1d7de132adf6.png)

ステップ４
新しい画像をアップロードする。
pythonanywhereのコンソール画面から、写真の置いてある（staticの設定してある）フォルダまで移動する。
新しい画像をuploadする。
（ステップ３で変更した画像名と一致するようにする。）

![upload_pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/3d9835b2-47f1-f83b-9617-d975bcd1d8b2.png)

ステップ５

再度、sqlite3.dbファイルがあるフォルダに移動し、ローカルで書き換えたsqlite3.dbをアップロードして置き換える。

![変更後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/f80295d0-4387-4db6-fa56-93421ec0dac1.png)


以上で修正完了。
git format-patchなどで複数のコミットを別のリポジトリーに変換して移植する

今日やったことのメモです。

# 要件

`REAMDE.md`という名前のファイルをリポジトリーAに作っていくつかコミットしたが、事情が変わり別のリポジトリーBに同じ内容の変更を加えたい。しかし以下の懸念事項が:

- コミットメッセージやdiffの内容は極力維持したい
- ただし、リポジトリーBにはすでに`README.md`というファイルがあるので`CODE_OF_CONDUCT.md`というファイルにリネームした状態でコミットしたことにしたい

# 使ったコマンドのバージョン

```bash
> git --version
git version 2.24.1.windows.2

> perl --version

This is perl 5, version 28, subversion 1 (v5.28.1) built for x86_64-msys-thread-multi
```

# 1. `git format-patch`で各コミットをpatchファイルとして書き出す

参考: [`git show`を使用して複数のコミットにまたがってパッチを作成して適用する](https://stackoverrun.com/ja/q/3457923)

今回はmasterブランチから生やした各コミットを、patchファイルとして再利用したかったので`git format-patch`コマンドを次のように使った:

```bash
git format-patch master
```

これで、masterから現在の最新のコミット（つまり`HEAD`）までの各コミットが、連番がファイル名の先頭に着いた`.patch`ファイルとして書き出される。

# 2. リポジトリーAの`README.md`をリポジトリーBに`CODE_OF_CONDUCT.md`としてコピーする

`git format-patch`で作った`patch`ファイルは、例えリポジトリーが異なろうと`git am`コマンドでコミットとして適用できるはずだが、そのためには、適用するコミットのうち、最初のコミットが変更を加えるファイルが、不整合しない状態で存在していなければならない。
つまり今回の場合、変更を加える前のリポジトリーAにおける`README.md`が、リポジトリーBにおいて、変換後の名前、`CODE_OF_CONDUCT.md`として、あらかじめコミットされている必要がある。

そこでリポジトリーAにおいて`README.md`に変更を加える前の状態、masterブランチに戻って、リポジトリーBに`CODE_OF_CONDUCT.md`としてコピー・コミットした:

```bash
# リポジトリーAでの作業
cd /path/to/repository-a
git checkout master
cp README.md /path/to/repository-b/CODE_OF_CONDUCT.md

# リポジトリーBでの作業
cd /path/to/repository-b/
git add CODE_OF_CONDUCT.md
git commit -m"Add CODE_OF_CONDUCT.md"
```

# 3. `git format-patch`で作成したパッチファイルを一括置換する

今度は、最初に`git format-patch`コマンドで書き出した`README.md`に対する各patchファイルを、`CODE_OF_CONDUCT.md`向けに変換しよう。
やり方は単純で、`perl`コマンドで`README.md`と書かれていた部分を`CODE_OF_CONDUCT.md`に書き換えれば良い<small>（もちろんsedでもなんでもいい）</small>:

```bash
perl -i.bk -pe 's/README.md/CODE_OF_CONDUCT.md/g' *.patch
```

当然、コミット内容に`README.md`という文字列が含まれている場合はその部分まで変換されてしまうので少し気を遣う必要があるが、今回は特に気にする必要がなかったので、思いっきり一括置換した。
`-i.bk`というオプションでバックアップファイルを作るかはお好みで。

# 4. `git am`コマンドでリポジトリーBに適用する

あとは、変換した`.patch`ファイルをリポジトリーBに移して`git am`すればよい:

```
mv *.patch /path/to/repository-b/
cd /path/to/repository-b/
git am *.patch
```

以上！
レスポンシブWEBデザイン

#レスポンシブWEBデザインについて
##目的
* レスポンシブWebデザインとは何か理解すること
* Webサイトをレスポンシブ対応にする方法を理解すること


##下記3行目の部分
```java:
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>DEMO</title>
 <link rel="stylesheet" href="./css/reset.css" />
 <link rel="stylesheet" href="./css/style.css" />
</head>
```
# 画面サイズによってCSSを切り替える方法
```java:
@media (max-width: 500px) {
  p {
    font-size: 10px
  }
}
```
#メディアクエリ
##表示された画面幅に応じて適用するスタイルを切り替える機能を指す。またメディアクエリによって規定されるスタイル適用の分岐点をブレークポイントと呼ぶ

#ブレークポイント
##ブレークポイントとは、メディアクエリによって規定されるスタイル適用の分岐点を指す。@media (max-width: 500px){ }の場合は500pxがブレークポイントとなる。ブレークポイントの値を何pxにするか、また何箇所ブレークポイントを置くかは制作するWebサイトの要件によって変わる。PCとスマホのみの対応であれば、ブレークポイントは1箇所で済みますが、タブレットにも対応となると、2箇所ブレークポイントが必要になる
![967b10492eca36bcbd025c324f547d79.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/bdc9bc9b-457d-0149-ccbb-4c28809b5e04.png)

#画面サイズごとにCSSを適用する方法
```java:例
/* PC表示時 */
p {
 font-size: 30px
}

/* タブレット表示時 */
@media (max-width: 1000px) {
  p {
    font-size: 25px
  }
}

/* スマホ表示時 */
@media (max-width: 500px) {
  p {
    font-size: 20px
  }
}
```
#現場からは以上です！
【Flutter】flavorで環境ごとに、google-services.json や アプリID, アプリ名を切り替える

## アプリID, アプリ名をflavorで分ける

`android/app/build.gradle`配下のファイルに`productFlavors`を追加する。

```android/app/build.gradle

...

android {
    compileSdkVersion 29

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        ...
    }

    buildTypes {
        ...
    }

    flavorDimensions "app"
    productFlavors {
        dev {
            dimension "app"
            resValue "string", "app_name", "DEV_{アプリ名}"
            applicationId "{開発環境のID}.dev"
        }
        qa {
            dimension "app"
            resValue "string", "app_name", "{アプリ名}"
            applicationId "{QA環境のID}"
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    ...
}

```

ちなみに、`android/app/src/flavor名/res/values/strings.xml`からアプリ名を変更する方法は上手く変更できませんでした。

## google-service.jsonを環境ごとに切り替える方法

`android/app/src`配下にflavor名のフォルダを作成し、'google-service.json'の名前でconfigファイルを設定すると、flavorを指定してbuildした際にそのディレクトリを参照してくれます。

そのため、以下のようにディレクトリを配置するだけで、flavorごとのfirebaseの設定ファイルの切り分けは完了です。

```
app
└── src
    ├── main
    │   ├── AndroidManifest.xml
    │   ├── java
    │   ├── kotlin
    │   └── res
    ├── dev
    │   └── google-servicesjson.json
    ├── qa
    │   └── google-services.json
    └── prd
        └── google-services.json
```


## 参考記事
- [flutterでflavorを設定し、アプリごとに画像、テキスト、primarySwatchを変える。(Androidのみ)](https://qiita.com/rottonton/items/579ad9273c5d01cf73f9)
- [Flavor毎に異なったgoogle-services.jsonをつかう](https://qiita.com/gyamoto/items/39351917ee6755abf7bf)