OmniAICreator/Qiita-1.07M huggingface dataset:
APKファイルの準備からApp Distributionを使ってテストアプリを配信するまで [androidアプリ]

#はじめに
Flutterで作ったアプリをApp Distributionを使って簡単に実機にテスト配布できたので備忘録をして書きます。
今回はAndroidアプリでの手順です。


#APKファイルの準備
コマンド一つで簡単にできました。

```
flutter build apk --release
```
少し待っているとDoneとなりました。

```
💪 Building with sound null safety 💪

Running Gradle task 'assembleRelease'...                                
Running Gradle task 'assembleRelease'... Done                      80.7s
✓ Built build/app/outputs/flutter-apk/app-release.apk (20.3MB).
```

　
出来上がったAPKファイルは`build/app/outputs/flutter-apk/`の中に`app-release.apk`という名前で作成されます。

![スクリーンショット 2021-05-01 午後15.49.04 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263604/b126e32e-53f3-dbde-84e1-3d1aa0a4075f.png)

#FirebaseのApp Distributionでの手順
![スクリーンショット 2021-05-01 午後15.52.42 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263604/8d54b40b-2150-07cd-d150-84d87e711732.png)
メニューからApp Distributionを開いて`開始`を押します。

　
![スクリーンショット 2021-05-01 午後15.52.57 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263604/5cd56755-e7a7-2fbb-d3eb-9b01dc0b4680.png)
この画面で先程のAPKファイルをドラッグ＆ドロップします。

　
　
![スクリーンショット 2021-05-01 午後15.26.32 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263604/1771a9c0-1cb0-2836-f907-5e38fa49e374.png)
するとテスターの追加画面が出るのでメールアドレスを入力し`次へ`を押します。

　

![スクリーンショット 2021-05-01 午後15.26.43 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263604/05b74f35-22c3-72c8-fa7c-002cd628c182.png)
リリースノートを書いて`配布`を押すといい感じのアニメーションが出て配布完了になります。


　
#スマホでの操作
先程テスターのメールアドレスに届いているメールを開き、`Get started`を押します。


その後アカウントにログインして、手順に沿って進めて`App Tester`をインストールし、

スマホ側でダウンロードの許可設定をして、ダウンロードすればアプリが使えるようになります。

　

#バージョンを更新する際の手順

App DistributionのAPKファイルをアップロードする画面で新しいAPKファイルをドラッグ＆ドロップするだけなのですが、
バージョンの番号などの編集はできませんでした。

APKファイルを作成するときに番号を指定できます。

```
flutter build apk --release --build-name=1.0.0 --build-number=2
```

`build-name`と`build-number`を指定して実行してあげれば、反映されます。
【反省話＆アイディア募集】日付を数値型で入れるの、ダメ、ゼッタイ

株式会社オズビジョンのユッコ (@terra_yucco) です。
変わらず BigQuery と戯れる日々を送っています。

BigQuery に同期している元の RDS でデータ設計がおかしく、BigQuery 上での演算に苦労している例があるため、本記事ではそれについて書きました。

# 昔々、日付を数値で入れた人が居た

こんな感じ。

```sql
BigQuery > SELECT MAX(a_date) FROM xxx_dataset.target_data
----
Row	f0_	
1	20210430
```

勿論、他に timestamp 型のカラムなどはあり、そちらを使えば日付型でいろいろなクエリは書けるのですが、TimeZone をいちいち考慮したりが面倒なため、JST の日付であることが保証されているこのカラムは便利なのです。


# BigQuery で DATE 型にしようとやってみた
## そのまま CAST

- エラー

```sql
DECLARE d_date INT64 DEFAULT 20210101;
SELECT CAST(d_date AS DATE);

----
Query error: Invalid cast from INT64 to DATE at [y:x]
```

## `DATE()` を使えるように頑張る

- なんとか出来た

```sql
DECLARE d_date INT64 DEFAULT 20210101;
SELECT DATE(
         CAST(d_date / 10000 AS INT64),
         CAST(MOD(d_date, 10000) / 100 AS INT64),
         CAST(MOD(d_date, 100) AS INT64)
       );
----
Row	f0_	
1	2021-01-01
```

## 文字列で組み立てて CAST

- これもなんとか出来た

```sql
DECLARE d_date INT64 DEFAULT 20210101;
SELECT CAST(CONCAT(
         SUBSTR(CAST(d_date AS STRING), 1, 4),
         "-",
         SUBSTR(CAST(d_date AS STRING), 5, 2),
         "-",
         SUBSTR(CAST(d_date AS STRING), 7, 2)
       ) AS DATE);
----
Row	f0_	
1	2021-01-01
```

# スマートなやり方求む！

なんとかやりたいことはできたものの、あまり頭のいいやり方でもなく、毎回忘れそうになって思い出す始末。

きっともっとスマートなやり方があると思いますので、我こそはという方、是非コメントでお知らせください！
【AWS】 リージョンとアベイラビリティゾーンとは？



#はじめに
AWSの基礎学習した内容をアウトプットしていきます。

#リージョンとは
地理的に離れた領域を示します。
例：東京、大阪、シドニー、ソウル


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508533/63a4c721-e9a6-3f82-5727-d18e481a9214.png)


#アベイラビリティゾーン（AZ）とは
それぞれのリージョン内に設置された地理的、電源、ネットワークが自律しているデータセンターの集合の単位です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508533/ec05ca41-b36f-1b70-8d54-0f37c1049891.png)


#特徴
複数リージョン/AZで、システムを分散配置することで、火災や地震などの災害発生時に障害耐性を高めることができます。


#この記事は以下の情報を参考にして執筆しました。
- [AWS初学者を導く体系的な動画学習サービス「AWS CloudTech」](https://aws-cloud-tech.com)
- [Regions and Availability Zones](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/)
VMwareにUbuntu20.04serverをインストール直後に行う設定

VMwareにUbuntu20.04serverをインストールした際に、下のようなトラブルが発生しましたので、その解決方法を記載します。

# GUIが使えない
GUIを使えるようにするには下のコマンドを実行します。

```
apt install ubuntu-desktop
```

# GUIでネットワーク設定が変更できない
`etc/netplan/00-network-manager-all.yaml`を下のように変更すれば、GUIでネットワーク設定を変更できるようになります。

```
network:
  version: 2
  renderer: NetworkManager
```

# mozcにすると英語キーボードになる
キーボードのレイアウト設定を日本語キーボードに変えるには、`/usr/share/ibus/component/mozc.xml`のファイル下の部分を変更します。

```:デフォルト
 <layout>default</layout>
```

```:変更後
 <layout>jp</layout>
```

# 音が出ない
作成したVirtualMachineフォルダの`.vmx`ファイルに以下の行を追加します。

```
sound.virtualDev = "hdaudio" 
```

# USBマウスの戻るボタンを使えるようにする
作成したVirtualMachineフォルダの`.vmx`ファイルに以下の行を追加します。

```
mouse.vusb.enable = "TRUE"
mouse.vusb.useBasicMouse = "FALSE"
usb.generic.allowHID = "TRUE"
```

# フォルダ名が日本語になって使いにくい
英語に戻すには下のコマンドを実行します。

```
LANG=C xdg-user-dirs-gtk-update
```

# viエディタの行番号が出ない
viエディタで行番号を表示するには下のコマンドを実行します。

```
echo "set number" > ~/.vimrc
```

# NTPサーバを変更する
`/etc/systemd/timesyncd.conf`に以下の行を追加します。

```
NTP=[NTPサーバ]
```

# Chromeをインストールする

下のコマンドでインストールできます。

```
apt install google-chrome-stable
```

もし上記のコマンドでインストールできない場合は、下のコマンドを使って直接debファイルをインストールします。

```
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
apt install ./google-chrome-stable_current_amd64.deb
```
【Swift】コードでUITabBarControllerを実装する

Storyboardを使わずに、コードのみでUITabBarControllerを実装する方法まとめ。

## 環境
- Xcode12.4
- Swift5

#1. 各タブに表示するViewControllerを準備する

今回は、以下のファイルを新規作成する。
・FirstViewController
・SecondViewController
・ThirdViewController
・FourthViewController

タブを切り替えた際に、わかりやすいようにそれぞれの背景色だけ変更しておく。

```swift:FirstViewController
import UIKit

class FirstViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .red
    }
}
```

# 2. ViewControllerをUITabBarControllerに設定する

```swift:MainTabController
import UIKit

class MainTabController: UITabBarController {
     
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configureViewControllers()
    }
    
    func configureViewControllers() {
        
        let first = FirstViewController()
        first.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), selectedImage: nil)
        
        let second = SecondViewController()
        second.tabBarItem = UITabBarItem(title: "Chat", image: UIImage(systemName: "message"), selectedImage: nil)
        
        let third = ThirdViewController()
        third.tabBarItem = UITabBarItem(title: "Book", image: UIImage(systemName: "book"), selectedImage: nil)
        
        let fourth = FourthViewController()
        fourth.tabBarItem = UITabBarItem(title: "Person", image: UIImage(systemName: "person"), selectedImage: nil)
        
        viewControllers = [first, second, third, fourth]
    }
}
```

<img width="300" alt="Simulator Screen Shot - iPhone 12 Pro - 2021-05-01 at 15.59.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/148065c9-3800-0750-007c-13e52b277709.png">


# Storyboardを使わない設定に変更する
最初は`Main.storyboard`が呼ばれるようになっているため、修正する。

1. `TARGETS > General > Development Info`のMain Interfaceを空白にする。
2. Info.plistの`Information Property List > Application Scene Manifest > Scene Configuration > Application Session Role > Item 0 > Storyboard Name`の項目を削除する。
3. Info.plistの`Information Property List > Main storyboard file base name`の項目を削除する。
4. SceneDelegate.swiftを修正する。

```swift
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        guard let scene = scene as? UIWindowScene else { return }
        window = UIWindow(windowScene: scene)
        window?.rootViewController = MainTabController()
        window?.makeKeyAndVisible()
    }
```
【メモ】RSpecの準備・セットアップ

#はじめに
RSpecの導入手順を記しとこうと思います。
ここではRSpec, FactoryBotの導入部分を書いていきます。

#Gemfileの編集
次の様にGemfileを編集する。

```ruby:Gemfile
group :development, :test do #すでにあるブロックに下３行を追加
  gem "rspec-rails"
  gem 'spring-commands-rspec'
  gem "factory_bot_rails"
end
```

####自分用(Rubyのバージョンを変えたらエラーが出たため)
**Rubyのバージョンが 3.0.0 以上の場合、Gemfileに以下を記入**
これを記入しないと`rspec`コマンドを実行してもエラーが出る。

```ruby:Gemfile
gem 'rexml', '~> 3.1', '>= 3.1.9'
```

そして`bundle install`する。

#RSpecのインストール
コマンドラインで次のコマンドを実行。

```
rails g rspec:install
```

次のコードを`.rspec`ファイルに追加。

```ruby:.rspec
--format documentation
```

##Config/Application.rbの編集
次のコードを追加。

```ruby:config/application.rb
class Application < Rails::Application
  config.generators do |g|
      g.test_framework :rspec,
        controller_specs: true,
        fixtures: true,
        helper_specs: true,
        model_specs: true,
        request_spec: false,
        routing_specs: false,
        view_specs: false
    end
end
```
これでRSpecの導入は終了。
以下、RSpecコマンド

・モデルスペック

```
rails g rspec:model user
```

・システムスペック

```
rails g rspec:system projects
```

#FactoryBotの設定
rails_helperを編集。
*必須ではない

```ruby:rails_helper.rb
RSpec.configure do |config| #元からあるこのブロックに以下の１行を追加
  config.include FactoryBot::Syntax::Methods
end
```
これがあることで次の様に簡潔にコードか書ける。

```ruby
# 通常の呼び出し方
user = FactoryBot.create(:user)

# 上のコードを書いたことにより省略形が使える様になる。
user = create(:user)
```

#おわりに
以上で導入完了です。
ESP32-WROOMでの書き込み/読み込み 速度比較

#概要
個人的な忘備録的に書いておく。

#結果

1. DRAM
 - 書き込み: 0.01 us/byte
 - 読み込み: 0.01 us/byte
1. PSRAM
 - 書き込み: 0.12 us/byte
 - 読み込み: 0.10 us/byte
1. Queue
 - 書き込み: 1.75 us/byte
 - 読み込み: 1.84 us/byte

# 検証プログラム

```cpp
#include <Arduino.h>

#define LENGTH  100000

QueueHandle_t xqueue;


void setup() {
    Serial.begin(115200);
  // put your setup code here, to run once:
    xqueue = xQueueCreate(LENGTH, sizeof(uint8_t));
}

void loop() {
    // put your main code here, to run repeatedly:
    uint8_t data = 0;
    unsigned long t0, t1;
    uint8_t *array = (uint8_t*)malloc(sizeof(uint8_t) * LENGTH);
    uint8_t *parray = (uint8_t*)ps_malloc(sizeof(uint8_t) * LENGTH);

    t0 = micros();
    for (int i = 0; i < LENGTH; i++)
    {
        xQueueSend(xqueue, &data, 0);
    }
    t1 = micros();
    Serial.printf("write: ");
    Serial.println((double)(t1 - t0) / LENGTH);

    t0 = micros();
    for (int i = 0; i < LENGTH; i++)
    {
        array[i] = data;
    }
    t1 = micros();
    Serial.printf("write array: ");
    Serial.println((double)(t1 - t0) / LENGTH);

    t0 = micros();
    for (int i = 0; i < LENGTH; i++)
    {
        data = array[i];
    }
    t1 = micros();
    Serial.printf("read array: ");
    Serial.println((double)(t1 - t0) / LENGTH);

    t0 = micros();
    for (int i = 0; i < LENGTH; i++)
    {
        parray[i] = data;
    }
    t1 = micros();
    Serial.printf("write parray: ");
    Serial.println((double)(t1 - t0) / LENGTH);

    t0 = micros();
    for (int i = 0; i < LENGTH; i++)
    {
        data = parray[i];
    }
    t1 = micros();
    Serial.printf("read parray: ");
    Serial.println((double)(t1 - t0) / LENGTH);

    uint8_t recv;
    t0 = micros();
    for (int i = 0; i < LENGTH; i++)
    {
        xQueueReceive(xqueue, &recv, 0);
    }
    t1 = micros();
    Serial.printf("read: ");
    Serial.println((double)(t1 - t0) / LENGTH);

    free(array);
    free(parray);
}
```
Excel関数(文字列の操作、関数を使った集計・抽出)


##特定の文字の前を取り出す

「事業所」の前

```
=LEFT(A2,FIND("事業所",A2)-1)
```

##特定の文字の後ろを取り出す

「：」の以後

```
=RIGHT(A2,LEN(A2)-(FIND("：",A2)-1))
```

「：」の後ろ

```
=RIGHT(A2,LEN(A2)-(FIND("：",A2)))
```

##特定の文字と文字の間を取り出す
A1に「ほげほげR4.1」、「R」と「.」の間の年を取り出す
B44に「左の文字列あいうえお右の文字列」、「左の文字列」(文字数が1文字以外)と「右の文字列」の間の文字を取り出す。
```
=MID(A1,FIND("R",A1)+1,FIND(".",A1)-FIND("R",A1)-1)
=MID(B44,FIND("左の文字列",B44)+len("左の文字列")+1,FIND("右の文字列",B44)-FIND("左の文字列",B44)-len("左の文字列")-1)
```


#スペースで区切られた姓と名をそれぞれ取り出す
```
予めスペースを全角に統一する
=TRIM(JIS(A1))

予めスペースを半角に統一する
=SUBSTITUTE(A1,"　"," ")


姓(スペースの左側)
=LEFT(A1, FIND(" ", A1)-1)

=TRIM(JIS(LEFT(A1, FIND(" ", A1)-1)))
=SUBSTITUTE(LEFT(A1, FIND(" ", A1)-1),"　"," ")

名(スペースの右側)
=RIGHT(A1, LEN(A1)-FIND(" ", A1))

=TRIM(JIS(RIGHT(A1, LEN(A1)-FIND(" ", A1))))
=SUBSTITUTE(RIGHT(A1, LEN(A1)-FIND(" ", A1)),"　"," ")


住所のスペースより前を取り出す
=SUBSTITUTE(A1,"　"," ")
=IF(ISERROR(FIND(" ", A1)), A1, LEFT(A1, FIND(" ", A1) - 1))

```


##左から1文字だけ取り出す

```
=LEFT(A2,1)
```

#末尾2文字を削除する
```
=LEFT(A2, LEN(A2)-2)
```

#左から〇文字目以降を取り出す
```
2文字目以降
=MID(A2,2,LEN(A2)-1)

8文字目以降
=MID(A2,8,LEN(A2)-7)

```

#何文字目から何文字取り出す
```
2文字目から4文字
=MID(A2, 2, 4)

6文字目から2文字
=MID(A2,6, 2)

```
#ゼロ埋め、ゼロパディング
```
A1が「1」の場合、「0001」になる
=TEXT(A1,"0000")
```


都道府県名を抜き出す
```
=IF(MID(A1,4,1)="県",LEFT(A1,4),LEFT(A1,3))
```


#全角・半角スペースを削除
```
SUBSTITUTE(SUBSTITUTE(c2,"　","")," ","") 
```

#半角・全角をそろえる
```
半角にする
=ASC(A1)

全角にする
=JIS(A1)
```


#　0以上の数をカウントする
```
0以上
=COUNTIF(C2:C20, ">=0")

0より大きい(0は数えない)
=COUNTIF(C2:C20, ">0")
```

#空白か判定する
```
=IF(A1<>"", "値が入ってます", "空白セルです")
```

#日付操作

##テキスト形式を日付形式に変換する
```
=DATEVALUE(A1)
```

##○か月後
```
=EDATE(A1,○)
```

##2年経過判定
2年経過していたら○、していなければ何も表示しない

```
IF(DATEDIF(A1,TODAY(),"y")>=2,"○","")
```

##経過月数
```
=DATEDIF(開始年月日,終了年月日,"M")&"ヶ月"



```

##型の変換
vlookupで数字がヒットしないとき

```
文字列を数値に変換 1
=値*1

文字列を数値に変換 2
=VALUE(値)

数値を文字列に変換
=TEXT(値,表示形式)
=text(参照先,"@")


文字列型か判定
=ISTEXT(値)

数値型か判定
=ISNUMBER(値)

```




指定した位置のデータを取り出す

```
=INDEX(範囲,行番号,列番号)

選択範囲の3行目の2列目の値を取り出す
=INDEX($A$1:$B$8,3,2)

```

検索値の相対位置を出す

```
=MATCH（検索値, 範囲(特定の一列or一行), 照合の種類(0で一致)）

=MATCH（あいう, a1:a10, 0）

```

VlookupをINDEXとMATCHで行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532979/b4fb4dc0-0847-750e-78d1-33e4a0de8121.png)

```
=INDEX(A1:D8,MATCH(F6,A1:A8,0),3)

下記と同じ結果となる
=vlookup(F6,A1:D8,3,0)


```
INDEXとMATCHで値を取り出す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532979/363a0318-adeb-8507-9341-db3355975b33.png)

```
=INDEX(A1:D8,MATCH(F6,A1:A8,0),MATCH(G5,A1:D1,0))
=INDEX(検索範囲,MATCH(行の検索値,行[縦方向]範囲,0),MATCH(列の検索値,列[横方向]範囲,0))

```

Vlookupと異なり2列目から1列目の値も返せる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532979/7ef8fc63-6479-0365-0493-2a637926ccaf.png)

```
個数が17の商品名を返す
=INDEX(A1:D8,MATCH(F6,B1:B8,0),1)
```

##担当者別の合計額を出す

```
=sumif(担当者の列,検索値,合計する列)
```



#スプレッドシートの関数

and と or の組み合わせ

```
=query('シート名'!範囲:範囲,"select * where (E = '条件1' or E = '条件2') and D = '条件3'",1)

```

日付操作
```
前月1日
=TEXT(eomonth(today(),-2)+1,"YYYY-MM-DD")

前月末日
=TEXT(eomonth(today(),-1),"YYYY-MM-DD")
```

#数字を取り出す

##フィルタをかけて結果の合計

```

9は集計の種類指定SUMを表す
=SUBTOTAL(9,A2:A100)

```
VSCodeにおけるsettings.jsonの優先度について / Cursorも対応

:::note info
以下、AI搭載エディタCursorでも同様の設定が可能です。
:::

## VSCodeの設定には2種類ある

Visual Studio Code（以下、VSCode）の設定には**ユーザー設定**と**ワークスペース設定**の2つがある。
ユーザー設定はVSCode全体に反映される設定。
ワークスペース設定は個別のワークスペースごとの設定のことだ。

皆さんは、新規プロジェクトごとにユーザー設定を毎回設定してはいないだろうか。

VSCodeには、以下のように**3つの設定優先度**というものがある。
これを有効活用することで、**最小限の基本設定を維持しつつ、プロジェクトごとに必要な設定だけを上書きして利用できる**という便利な機能が存在する。

![優先度.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183668/97bade72-64c0-6afb-e0e4-a0228f604629.png)

VSCode触り始めの方は、まずはこの仕組みを理解しておこう。
今後の開発でやりやすさが大きく変わってくる。

### ユーザー設定

ユーザー設定はVSCodeのメニューから「ファイル」→「ユーザー設定」→「設定」と進み、右上のアイコンをクリックする。

![2021-04-28_13h41_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183668/1481ad75-8b65-001e-9701-c21efc2c2933.png)

すると、`settings.json` が開く。
ここに `JSON` 形式で設定を記述していけばよい。

![2021-04-30_22h46_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183668/c48b7e37-bcbc-e32f-10eb-82c67266bdfa.png)

ここでまず設定したいのが、```"workbench.settings.useSplitJSON": true,```
ユーザー設定とワークスペース設定の切り替えタブ（画像拡大部分）が表示されるようになる。

![2021-04-30_23h16_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183668/c6714776-f73a-0871-1511-31dee4f3b58b.png)

さらに、マルチルートワークスペース設定がONになり、設定編集画面が2つに分割される。

左側に表示されているのが初期状態で適用されたデフォルトの設定だ。
緑色で設定に対するコメントが付いているのでとてもわかりやすい。
これらを参考にしながら右側に自分の設定で上書きをしていく。

例えば、私は以下のように設定している。

```json:settings.json
{
	"workbench.settings.useSplitJSON": true,
	"editor.formatOnSave": true,
	"emmet.variables": {
		"lang": "ja"
	},
	"window.zoomLevel": 0,
	"editor.fontSize": 16,
	"editor.tabSize": 4,
	"editor.fontFamily": "HackGen",
	"editor.detectIndentation": false,
	"editor.insertSpaces": false,
	"html.format.extraLiners": "",
	"html.format.preserveNewLines": false,
	"editor.renderWhitespace": "boundary",
	"editor.minimap.showSlider": "always",
	"editor.quickSuggestions": {
		"strings": true
	},
	"editor.suggest.insertMode": "replace",
	"files.eol": "\n"
}
```

言語、フォントサイズ、インデントなど、基本的な**ワークスペース（プロジェクト）に依存しない設定がおすすめ**だ。

### ワークスペース設定

ここまで記事通りに進めてくれていれば、ワークスペースに `.vscode/settings.json` というファイルができているはずだ。
ない場合は、手動で `.vscode` フォルダと `settings.json` を作成しても問題ない。
settingではなくsettingsという点は注意しよう。

![2021-05-01_14h32_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183668/92d70a77-965d-3c52-19e5-49f9f7780a15.png)

Cursorの場合でもディレクトリ名は変える必要はなく `.vscode` のままで構わない。

ワークスペース設定はプロジェクトごとに異なる設定を使いたいときに有効だ。

例えば、チーム開発となれば他メンバーの環境に合わせる必要性も出てくる。
そんな時、ワークスペース設定をメンバーで共有し、優先度を上書きすることで簡単に対応ができる。



まとめると、

* ユーザー設定：ワークスペースに依存しない自分だけの基本設定
* ワークスペース設定：チーム開発のために設定を上書きしたり、プロジェクトごとに拡張機能を入れ替えたいときの設定

こんな感じだろうか。

最後に、万が一設定が消えても良いように、ワークスペース設定はGitで管理しておこう。
【Swift】iPhoneのStatusBarを白にする

# はじめに
iPhoneの上部に表示されているステータスバー（Wifiや時間が表示されているところ）の色をアプリ全体で変更する方法を書きます。

# 実装方法
Project → Targets → Deployment Info → Status Bar Style
Light Contentに変更します。
![スクリーンショット 2021-05-01 16.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592713/8e776d47-6542-dda3-8b5b-4a92376e4f19.png)

Info.plistにView controller-based status bar appearanceを追加します。
![スクリーンショット 2021-05-01 16.15.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592713/7608598a-cda4-a54a-d858-7f9c16f1f739.png)

以上でStatusBarを白に変更することができます。
![スクリーンショット 2021-05-01 16.17.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592713/b5db8481-5a2d-507d-63c8-986e6f28277a.png)
ビルドの際のエラーの解消. - Could not find module for target

# 以下のエラーの対応を説明します
Realmにて以下のエラーが発生

```
Could not find module 'RealmSwift' for target 'x86_64-apple-ios-simulator'; found: arm64, arm64-apple-ios-simulator
```


# 解決策
![スクリーンショット 2021-05-01 16.13.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199256/70d2708c-e8c7-f5de-4b5b-c0798eb3140e.png)

Build Settingsの`Excluded Architectures > Debug`にAny iOS Simulatorの*x86_64*を追加した。

するとビルドができるようになりました。
Bitnamiのロゴを除去する方法

# はじめに
WordPressブログを作るとき、EC2インスタンスの立ち上げの際、「WordPress power by Bitnami」というAMIを用いると、サイトの右下に以下のようなロゴのリンクが表示されます。これを除去する方法をメモしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397136/09cfe4fb-4256-4da2-af67-bd30547e2c27.png)

# 除去方法
(1) ターミナルでEC2インスタンスに接続

```terminal
ssh -i KEYFILE.pem bitnami@パブリックIPアドレス
```

(2) 以下のコマンドで、Bitnamiのロゴを非表示

```terminal
sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
```

(3) 以下のコマンドで、Apacheを再起動したら完了

```terminal
sudo /opt/bitnami/ctlscript.sh restart apache
```

(4) ロゴが消えているか確認
ループ内の要素をすべて書き換えたい

例えばforeach内のテキストを、innerHTMLですべて書き換えたい場合の方法

```hoge.php
@foreach($hoges as $hoge)
  <p class="rewrite">これから変更されます</p>
@endforeach
```

```hoge.js
  var target = document.getElementsByClassName("rewrite")
  for(var i = 0; i < target.length; i++){
    target[i].innerHTML = "<p>すべて変更されました〜</p>"
  }
```
DeepLearningのメモ

# はじめに
Deep Learningの基本知識をメモしました。

# ニューラルネットワーク
* ニューラルネットワーク（多層パーセプトロン）：パーセプトロンを複数組み合わせることで、重み（パラメータ）の数が増えて、分類だけでなく複雑なタスクを扱えるようになる。← 線形代数により計算

# Deep Learning
* 深層ニューラルネットワーク（Deep Neural Network）：狭義だと、ニューラルネットワークの層が4層以上の場合。← これを用いた機械学習の手法をDeep Learningと呼ぶ。

**Deep Learningの利点・欠点**
利点
・ 特徴量の自動抽出
欠点
・ 大量の学習データが必要（層の深さ・ノード数が増えるほどパラメータが増加し、パラメータの数∝必要なデータ数）
・ 計算量が膨大（GPUを利用する必要あり）
・ ブラックボックス（結果の解釈ができない）

## ネットワークの種類
* CNN（Convolutional Neural Network)：画像認識・物体検出で利用。脳の神経系を模した通常のニューラルネットワーク層（全結合層：層ごとの全てのノードが結合）に、眼の神経系を模した畳み込み層を繋げている。再帰構造。

* RNN（Recurrent Neural Network）：時系列データ（順序関係があるデータ、言語・音声・動画・株価変動など）に対して用い、文章分類・文章生成・機械翻訳・音声認識などに利用。

## 多層ニューラルネットワークの構造例（Keras）
* Flattenによる画像のベクトル化

* 活性化関数：ニューロンの電気信号の入力が一定以上で、隣のニューロンに電気信号を流す。計算スピード、学習スピードが左右。決定境界が曲線（非線形）。例として、ReLu, tanh, シグモイド関数等。← 仮に活性化関数が線形だと、分類性能は線形判別機であるパーセプトロンと同じ。

* Optimizers: 様々な勾配下降法のアルゴリズムがまとまったモジュール（SGD, Rmsprop, Adam, AdaDelta, AdaGradなど）。学習効率・最適解への収束・鞍点（ある方向から見ると極大値、別方向から見ると極小値=最小値でない）の脱出

**SGD（確率的勾配下降法）**
学習データをサンプリングして行う勾配下降法で、ミニバッチ学習やオンライン学習で利用。サンプリングする学習データによって、誤差関数が変化（サンプリングされる学習データがある意味パラメータ）。

> バッチ学習では、毎度同じ誤差関数によって重みを更新する最急降下法を用いる。

* batchsize：ミニバッチというかたまりに含めるサンプル数。← ミニバッチ学習

* epoch数：パラメータが多い場合、学習回数を増やす。

* 順伝搬計算：予測を行うための処理で、入力が左から右へ伝播。入力層からの値と重みの積の合計値を算出。出力層のうち、最大値となるのがクラスの予測結果。

* 逆伝播計算：学習を行うための処理で、順伝播とは逆方向。この学習方法は、誤差逆伝播法（Back Propagation）と呼ばれ、右から左へパラメータの修正幅を決定。

* softmax関数：出力層への入力（実数）を確率（0 ~ 1）に変換する活性化関数。

* cross_entropy誤差関数：ニューラルネット特有の誤差関数。

$$
C = - \frac{1}{n} \sum (y \log p_i + (1-y) \log (1-p_i))
$$

* 重みの修正幅：連鎖率を利用して、出力層につながるパラメータだけでなく、手前の層のパラメータも調整可能。

$$
\Delta \omega_i = - \eta \frac{\partial J(\omega)}{\partial \omega_i} \\
J(\omega) = \frac{1}{2} \sum (y_i - f(x_i))^2
$$

## 学習結果の確認
* グラフの出力
* 混同行列の出力（どれと間違えたか）
* 正答率

## モデルの重みの保存・復元
学習させたモデルのパラメータ（重み）を保存することで、再利用できる。

# 補足
* テンソル：RGB画像などの、3次元以上の行列。

### 学習方法の種類
|                    | バッチ学習 |オンライン学習|ミニバッチ学習|
|:------------------:|:---------:|:-----------:|:-----------:|
|メモリ効率・計算効率  |     ✕     |      ◎     |     〇      |
|  収束の正確性       |     ◎    |       ✕    |     〇      |

* バッチ学習（一括学習）：全サンプルを一気に用いて誤差関数の勾配を算出。機械学習アルゴリズムで利用。DeepLearningで扱うデータは大規模なので、計算時間・メモリの観点から向かない。新しいデータを取得した時、ゼロから学習を再開しないとだめ。
* オンライン学習（逐次学習）：一つのサンプルから誤差関数の勾配を算出。学習終了後、新しいサンプルを得た時に、学習済みモデルに追加で学習可能。大規模データには適しているが、解が最適化に収束しづらいという欠点あり。（← ノイズ・外れ値の影響を受けやすいため）
* ミニバッチ学習：小分けしたデータの塊ごとに、誤差関数の勾配を算出。多くの場合で用いられる。
超初心者がAWSについて勉強してみた①～サブネット編～

##概要
アラフォーのAWS初心者が学んだことをつらつら書いていきます。

##今回の目標
サブネットを作成する。


##教材
[AWS CloudTech](https://aws-cloud-tech.com/)で学びはじめました。
AWSを学びたい人は心者でも丁寧にまた安価(参考書1冊分+コーヒー2缶)で学べるのでお勧めです。

##前提
[VPC編](https://qiita.com/konaga99/items/afeb97149ecce82b5c66)が完了していること。

##用語集
構築するのに最低限必要な用語を書きます。
★アベイラビリティーゾーン(通称；AZ)
データセンタの集合群のこと。AWSの東京リージョンでは、通常3つ使用できる。
障害に備えて、一つのシステムを複数のAZで使用(マルチAZ)ということもできる。

★サブネット
1つのネットワークを小さく分割した小規模のネットワークと思ってもらえれば。
理解するのはそんなに難しいことではないが、言語化が困難なので、ググってもらえれば分ると思います。

★パブリックサブネット
公開用のサブネット。外部(インターネット)から接続できる機能を持たせたサブネット。

★プライベートサブネット
非公開用のサブネット。外部(インターネット)からの接続ができないようにしているサブネット

##構成図
今回作成する構成図となります。作成する部分は赤枠で囲った部分になります。
![サブネット構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/cf98a829-8e19-c230-cb4c-78f55d05218e.png)


##サブネットについて
若干解説します。
10.0.0.0/21のネットワークを/24のサブネットに分割する場合について見ていきます。
VPCには、10.0.0.0/21のネットワークが設定してあります。これをさらに、/24のネットワークに分割して、そのネットワーク内でIPアドレスを割り当てていきます。/21や/24は何を表しているかというと、ビット数でネットワークを決めています。図にするとわかりやすいですかね。。
![サブネット説明1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/4922e81a-d61c-5306-7fd5-29414f0b42f4.png)
![サブネット説明2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/902ef5d7-fa82-669d-13a4-6b7f474352b3.png)
![サブネット説明3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/120372ca-c389-a003-1e62-f8f27df61347.png)

ちなみにAWSでは一つのVPCにデフォルト200個までサブネットを作成できるようです。サブネットが/24で200個のサブネットを作成する場合、VPCは/16にする必要があります。

##サブネット作成
ではサブネットを作成していきましょう。
まずパブリックサブネット10.0.0.0/24を作成します。ここではパブリック(公開用)の機能を持たせるわけではないので、後々パブリックサブネットになるサブネットを作成するんだなということをとどめておいてください。

まず、AWSのマネージメントコンソールでVPCを検索してVPCのダッシュボードを開きます。
そしてサブネットを選択します。
![VPCダッシュボード(サブネット).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/a0bb5699-f28d-3080-201e-c0fcd33bad97.png)

サブネット作成を押します。
![サブネット作成押す.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/a5273a16-2a4a-78c1-8028-ebb51c2b2965.png)
以下入力・選択します。

VPC・・・test-vpc
サブネット名・・・Public_subnet_1a_0
アベイラビリティーゾーン・・・アジアパシフィック(東京)/ap-northeast-1a
IPV4 CIDRブロック・・・10.0.0.0/24


サブネットを作成を押します。

![サブネット作成_Public.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/fef6eb78-eaeb-455b-4c41-2e9dddf9fb46.png)

はい、作成されましたね。念のため、作成した内容に間違いないか確認しましょう。間違っていた場合、サブネットを編集する画面がなかったので、アクションから一度削除していただき、再度作成するしかないようです。
![サブネット確認1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/aad3d199-9c49-e729-abdc-3af30ed4f0be.png)
続きまして、同じようにプライベートサブネットを作成します。
サブネット作成ボタンを押した後、以下を入力します。内容はパブリックサブネットと同様なので、画像は省略します。

VPC・・・test-vpc
サブネット名・・・Private_subnet_1a_2
アベイラビリティーゾーン・・・アジアパシフィック(東京)/ap-northeast-1a
IPV4 CIDRブロック・・・10.0.2.0/24

最後に、プライベートサブネットが正しく作成されたか確認します。
![サブネット作成確認2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/8e0c9ecb-20c0-4ee8-06fc-985645ba5c2d.png)

はい、作成されました。

次回は、Public_subnet_1a_0に公開機能を持たせるべくインターネットゲートウェイの作成・ルートテーブルの設定を実施していきます。
インターネットゲートウェイ編は[こちら](https://qiita.com/konaga99/items/d05af4f05697e713b655)
FreeCAD で断面を確認するいくつかの方法


FreeCAD断面を確認したい。

いくつかの方法を試してみました。

# 環境

- FreeCAD 0.19
- Ubuntu 20.04 LTS

# 元になった図形

色や透明度などを触ってわかりやすくしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5c62a9ca-5dce-a9eb-5bd6-009d37728562.png)


# 表示を切り替える方法

「表示」→「断面」でクリッピングを以下のように調整

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/cb2c017f-d66e-34a5-ceb9-7b01a07aa6e6.png)


# 断面部品を追加する方法

Partワークベンチ→「部品」→「断面」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ccda6500-9ab6-5f4b-8f6f-145cd9c75b0f.png)

上図は「Line Color」などを調整して見やすくしています。

最初は作業できなかったが「コンボビュー」の「アプリケーション」でオブジェクトを選択すると「断面」が選択できるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f9c1e44a-e341-3be6-8b3f-8eae813e8383.png)

元オブジェクトの表示を切ると断面だけの表示になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/752e1b0b-f47c-90e7-8af5-80d9dd98b019.png)

タスクを繰り返してみたところです。

# ブーリアン演算を使う方法

Partワークベンチで、「部品」→「プリミティブ」→「立方体」で適当に被せます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/b173189a-2c13-3921-a2cd-bc3e865d1bd7.png)

「部品」→「ブーリアン」→「ブーリアン演算」で2番目の図形に立方体を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/b70899c1-1b41-9a1e-4fad-6eb01e92295a.png)

「立方体」と元の図形を非表示にすると切り取られた図形が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0c15a1df-1f25-2502-8bdd-ade534793d0c.png)

# 平面でカット

Draft ワークベンチで平面が作れるらしいですが、FreeCAD の調子が悪い感じです。FreeCAD の調整をして後日公開します。
Docker ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?

サーバーを再起動した後Dockerが動かなくなったのでつまづいた。

##エラー内容

```
ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?

If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.
```

##解決方法
dockerを起動できていなかったそう
以下のコードで起動できる

```
$ sudo systemctl start docker
```
PrimeVue prestige有料を購入してみた

primevue prestige
他に情報がなかったので英語サイトを回りながら

VUE3.0で構築したいがBUEFYが対応してくれなくなったので別のものを探す。
40$程度だったのでprestigeを購入してみた。

使い方自体は簡単。zipをダウンロード解凍して
npm installすればOK。

ただ、他のプロジェクトにコンパクトに適応するのに困った。
必要なファイルがpublicフォルダにあるし、inde.htmlでcssの適応を変更しないとデザインが適応されない。
この情報がうまく見つけ切れてなかったので苦戦した。
vue用のsrcだけではなく、public側にcssファイルをコピーするのと、htmlもコピーする必要がある。
未経験者が頑張ってWebアプリを作ってみた

初心者が頑張ってそこそこモダンな技術を使ってポートフォリオアプリケーションを作ってみました。

#使用技術

```
Docker
Docker-compose 
Ruby 2.6.5
Rails　６．０．０
AWS（EC2,S3,VPC）
```

になります。
もう本番環境に上げています

なのでこちらのリンクを踏めばすぐに飛ぶことができます。
http://13.208.108.131:3000/

#どういったアプリなのか

僕はよくブロガー兼Youtuberの人を見るときがあります。
そうでなくてもツイッターとYoutubeで活動している方を見ることがあるのですが、その時に思うのは、

###プラットフォームの移動がめんどくさい

って言うことなんですよね。

TwitterいってからYoutubeに行ってコンテンツを楽しむ
しかもその上にブログ記事を書いている人にはブログ記事もチェックしないといけない

いつも思っていました。
俺が見たいのはブログなどのコンテンツであって読み込み画面や別のタブを開いて検索をかけてとかがしたいわけではない

なので、それらをすべて一つのアプリケーションにまとめることができれば楽だなと思ったので、まだまだサービスとしては至らない点は多いですがそういった思想のもと作ってみました。

#このアプリの紹介というか思い出話

このアプリでは３つの分類にページが分かれています。

・ブログ
・つぶやき
・動画

した２つにはバリデーションをかけています。なので、動画以外を動画投稿のページで投稿してしまうと、バリデーションによって弾かれてしまいます。
その機能を作ろうとした時に、どうやってもバグになってしまうんですよね。

普通にやろうとすると、動画投稿のページで普通に動画を投稿しようとすると動画を投稿しているのにバリデーションで弾かれてしまうんですよね。

なので、ActiveStorageに対してバリデーションをかけられるGemを追加していくことで対応しましたね。

あと印象に残っているのは、
No Method Errorになてしまった時に、チェックするのは基本的にはコントローラーなのですが、底があっているときにはどこを見たらいいかというと、マイグレーションファイルとモデルを見ていくと解決の糸口になるということがわかったときはすごい良かったとお思いました。

それにその頃からエラーが起きてしまってもどこを見ていったらいいかを構造的に考えていくといったことができるようになったので、良かったなと

初学者にありがちなのが、

コピペに頼るあまり構造がわかっていない。
だからエラーになったとしても対処ができない、仕組みや構造がわかっていないから。
それを解消できるきっかけはやっぱりこのアプリをつくったときですね。

エラーになっても、構造から逆算して考えるようになったので、成長が早くなったというかスタートラインに立つことができたなと感じました。

あと頑張ったことといえばActionTextを導入したことですね。

Rails6からの機能で、Railsでかんたんにブログが投稿できるようになるっていうものですね。
なので、追加してみたのですが、初心者には難しかったですね。
何より情報がすくねぇっていう問題があったので、、
本当にググっても情報がまじで出てこねぇっていうことが頻発したので、めちゃくちゃ大変だったんですよね。
ユーザーとの関連付けも大変だったのですよはい。

・ActionTextに関するマイグレーションファイル
・Blogに関するマイグレーションファイル
・ActiveStorageに関するマイグレーションの３つが生成されるのですが、その時に俺間違えてActionTextに関するマイグレーションファイルの方にユーザー情報を関連付ける記述をしてしまったので、投稿する時に

ユーザー情報なんてねぇよって怒られてましたｗ
まぁソレはBlogのマイグレーションファイルに記述すればよかったのでいいんですけどね。

あとはオブジェクトについてまなんだりしました
それと非同期いいね機能も学んだので、すげぇ良かったです。

あと、ユーザー別の投稿一覧ページを作成した時に、UserモデルをDeviseというGemを導入する時に作ったのですが、それのShowメソッドを用いて作りました。

これがけっこう大変でした。
なんせ投稿を取得しようとすると、別のテーブルから引っ張ってくることができなくてずっとNo Method Error担ってしまっていましたので。
これはcongrollerの記述を

```
    @posts = Post.find(user_id: @user.id)
```
から

```
    @posts = Post.where(user_id: @user.id)
```

findメソッドを使わずにwhereメソッドを使ったら解決しました。
findメソッドだと全部の投稿を持ってきてしまうからかな。

なので、whereメソッドのように、指定した投稿のみ持ってこれるようにしました。

あと、これタブUIを実装したのですが、これ実はスクリプトなしで作っています。
HTMLとCSSのみですね。

まじで苦労した。

#まとめ

今回マジでドカンと成長できたなと思いました。
初学者あるあるを散々踏み抜いてきたので回避することを学びました。
主に、エラーが起きたときはそのプログラムやアプリはどういった順番で動いていくものなのかを思い出してそこから逆算することでエラーの原因を突き止めるといったことをやれるようになったので、本当に良かったと思っています。
それに過去一番でかいアプリになりました。
モデルの数11個ですからねこれ。
これからの自分の成長が楽しみだなと思えるようになりました。
ほんとね、何でも来いよと思えます。
そのたびにまた調べてやってやんよって感じですね。
ここまで長い文章でしたが、みなさんありがとうございました。
Ubuntu20.04に最新版のPython3をInstallする方法

# Background
[CentOS7に最新版のPython3をInstallする方法](https://qiita.com/satsukiya/items/997b423944d14a034862) のパート2。
ここではOSが`Ubuntu20.04`だった場合の`Python3.9.4`をインストールする方法についてです。

# Caution
注意点としては以下の通りです。

- Ubuntu20.04でデフォルトでgccをインストールするとバージョンは9.3
- インストールした後にコマンドパス`PATH`、共有ライブラリパス`LD_LIBRARY_PATH`にパスを通す
- `./configure` の実行高速化パラメータ`--enable-optimizations` は使える
- `./configure` で `--enable-shared` を付けないと `pip3 install mod_wsgi` するときにエラーになる。
- `/usr/share/pyshared/lsb_release.py` で `site-packages` にパスを通さないと`pip`でパッケージをインストールするときにエラーになる


# Development

```shell

# 必要なパッケージをインストール
apt-get install -y wget build-essential libreadline-gplv2-dev libncursesw5-dev libssl-dev libsqlite3-dev tk-dev libgdbm-dev libc6-dev libbz2-dev libffi-dev zlib1g-dev

# gccをインストール
apt-get install -y gcc

# python3.9.4 をインストール
wget https://www.python.org/ftp/python/3.9.4/Python-3.9.4.tgz \
 && tar xzf Python-3.9.4.tgz \
 && cd Python-3.9.4 \
 && ./configure \
 --with-ensurepip \
 --enable-shared \
 --enable-ipv6 \
 --prefix=/usr/local/python3.9 \
 --enable-optimizations \
 && make -j4 \
 && make altinstall

# パスを通す
ln -sf /usr/local/python3.9/bin/python3.9 /usr/bin/python3
ln -sf /usr/local/python3.9/bin/pip3.9 /usr/bin/pip3
ln -sf /usr/share/pyshared/lsb_release.py /usr/local/python3.9/lib/python3.9/site-packages/lsb_release.py
echo 'LD_LIBRARY_PATH="$LD_LIBRARY_PATH:/usr/local/python3.9/lib"' >> ~/.bashrc
echo 'PATH="$PATH:/usr/local/python3.9/bin"' >> ~/.bashrc
source ~/.bashrc

# pip をアップデート
pip3 install --upgrade pip

```

# Reference

- [Ubuntu、Debian、LinuxMintにPython3.9をインストールする方法](https://tutorialcrawler.com/ubuntu-debian/ubuntu%E3%80%81debian%E3%80%81linuxmint%E3%81%ABpython3-9%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)
- [No module named 'lsb_release' after install Python 3.6.3 from source](https://askubuntu.com/questions/965043/no-module-named-lsb-release-after-install-python-3-6-3-from-source)
AWS Lambdaによるリアルタイムデータ処理は本当にコストが高いのか？

# １．はじめに
IoTデバイスデータの収集や計測を行う等のリアルタイム性の高いシステムを構築する場合、
LambdaよりEC2を利用した方がコストメリットが大きくなる場合があると聞きますが、
どのくらいの規模からコストが逆転するのか？疑問だったので試算してみました。

今回は、ストレージやデータ通信の料金は含まず、
EC2 または Lambdaを利用した場合のコンピューティング料金だけに焦点を当て考えてみます。

# ２．比較方法
次の2つのアーキテクチャについてコンピューティング料金を試算することでコスト比較を行ってみたいと思います。

## ① EC2 構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689353/a50f2099-b4aa-6370-7e6f-39caf253fe4c.png)

※Lambdaと同等の可用性を確保するという前提条件でEC2はマルチAZ構成とします。

## ② Lambda 構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689353/e9d2a43f-307d-2a8f-dc2b-f03adb0245b3.png)


# ３．コスト試算
## ① EC2 コスト
汎用ワークロード向けのM5インスタンスを利用した場合の月額コストを試算してみます。
月額コスト = 時間単価（※1） x 24時間 x 30日 x 2インスタンス（※2）
※1 オンデマンド料金
※2 マルチAZ構成

|インスタンス名|vCPU|メモリ|時間単価|月額（マルチAZ）|
|---|---|---|---|---|
|m5.large|2|8GiB|0.124USD|178.56USD|
|m5.xlarge|4|16GiB|0.248USD|357.12USD|
|m5.2xlarge|8|32GiB|0.496USD|714.24USD|
|m5.4xlarge|16|64GiB|0.992USD|1428.48USD|
|m5.8xlarge|32|128GiB|1.984USD|2856.96USD|

EC2料金：https://aws.amazon.com/jp/ec2/pricing/on-demand/

## ② Lambda コスト
Lambda実行時間 = 200ms/リクエスト とした場合の月額コストを試算してみます。
月額コスト = リクエスト料金（※1） + 実行時間料金（※2）
※1 リクエスト料金 = リクエスト単価 x リクエスト数 / 100万リクエスト
※2 実行時間料金 = 時間単価 x 実行時間 x Lambdaメモリ / 1024MB

|リクエスト数|月額（128MB）|月額（256MB）|月額（512MB）|
|---|---|---|---|
|100 RPS|159.9USD|267.9USD|483.9USD|
|200 RPS|319.7USD|535.7USD|967.7USD|
|300 RPS|479.6USD|803.6USD|1451.6USD|
|400 RPS|639.4USD|1071.4USD|1935.4USD|
|500 RPS|799.3USD|1339.3USD|2419.3USD|

Lambda料金：https://aws.amazon.com/jp/lambda/pricing/

## コスト比較
m5.2xlarge インスタンスで 300 RPS のデータを処理するケースで比較してみましょう。
Lambdaメモリが128MBの場合は、Lambdaコスト < EC2コストとなりますが、
Lambdaメモリが256MBの場合は、Lambdaコスト > EC2コストとなり、コストが逆転します。

Lambdaのコストとして大きな割合を占めるのが実行時間料金となる為、
Lambdaが常時実行される場合は、コンピューティング料金の割高感が否めない結果となりました。
逆に実行時間が短い場合は、Lambdaのメリットを最大限に活かすことが出来そうです。
各サービスの特徴を理解して選択することが重要ですね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689353/6b5f4c95-c688-c417-eb99-bfdea1fc2c93.png)

## ４．まとめ
Lambdaが常時実行されるようなユースケースの場合は、コンピューティング料金だけを比較するとEC2 より Lambdaの方が高額となる傾向にあると思います。
ただ、リアルタイム性の高いシステムでも1時間に1回通信をする等の場合は、Lambdaの実行時間が短くなる為、Labmdaの方がコストメリットがあると思います。

__EC2 と Lambda を選択するときは、リクエスト頻度だけではなく実行時間を考慮して、アーキテクチャを選択することが重要だと思います。__
 
今回は、EC2 と Lambda のコンピューティング料金に焦点を当て考えてみましたが、本当に前提条件が1つ異なるだけで違う結果になると思います。
一般的な事例だけで判断するのではなく、まずは一度比較検してみてはどうでしょうか？
個々のユースケースに応じてベストな選択は、きっと変わるはず！
docker-composeでMySQL簡易構築

## MySQLに接続してみよう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/89783117-dc34-5f14-9862-1125b52ed8b8.png)

## 材料

- さくらVPS
- docker-compose
- MySQL公式サンプルデータベース
- teraterm

## 準備

```
mysql-test/
   + docker-compose.yml
   + conf.d/
   + data/
   + docker-entrypoint-initdb.d/
        + world.sql.gz
```

```yml:docker-compose.yml
# vim: set ts=2 et:
version: '3.1'

services:

  db:
    image: mysql:8.0.24
    volumes:
      - ./data:/var/lib/mysql
      - ./conf.d:/etc/mysql/conf.d
      - ./docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d
    command: --default-authentication-plugin=mysql_native_password
    cap_add:
      - SYS_NICE
    ports:
      - "3306:3306"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: my-secret-pw
      MYSQL_DATABASE: world
      MYSQL_USER: user1
      MYSQL_PASSWORD: pass1

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOSTS=db
      - PMA_USER=root
      - PMA_PASSWORD=my-secret-pw
    ports:
      - 10080:80
```

```
$ wget https://downloads.mysql.com/docs/world.sql.gz
$ mv world.sql.gz docker-entrypoint-initdb.d/
```

- TeraTermでポートフォワード設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/1e6fbb8f-ab65-92f0-bc9e-db32298f3ceb.png)

## 起動＆確認

```
docker-compose up  // or start
```

`http://localhost:10080` でブラウザアクセスするとphpmyadminが起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/32869208-ef06-d9ad-a7a8-b91bd7e688b5.png)


なお、PyCharmであればSSHトンネルの使用という機能でTeraTermでのSSHポートフォワードの設定の代わりができる（Professional版）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/cf236163-ee8a-fffe-c13f-d5f10194faf6.png)



[dockerのmysql8環境でmbind: Operation not permitted](https://sunday-morning.app/posts/2020-07-29-docker-mysql8-mbind-operation-not-permitted)
[【SQL】MySQL公式サンプルデータベースを使う \- Qiita](https://qiita.com/yukibe/items/fc6016348ecf4f3b10bf)
[TeraTerm SSH転送（ポートフォワード）機能よりローカルIPアドレスでphpmyadminログイン \- 協栄情報ブログ](https://cloud5.jp/teraterm-ssh-forwaring/)
[PyCharmでSSHトンネル経由でDBに接続する \- Qiita](https://qiita.com/yuki-k/items/ca7203b3a680b7d9997a)
実務未経験でエンジニア転職して感じること。〜1ヶ月目〜


##はじめに
4月から実務未経験でエンジニアとして転職をし1ヶ月が経ちました。
この１か月で感じたことを発信できればと思います。
未経験から転職してリアルなところをお伝えできればという感じです。

##前提
前職では人事や広報をしていたので、**エンジニアとしての知識や経験はゼロ**です。
退職をして約2ヶ月スクールに通ってエンジニアとして転職をしました。
ちなみに生まれも育ちも大阪でしたが、今回の転職で東京に引っ越してきました。
（東京は電車の中が静か。関東、関西の人の１日の会話量調べたら絶対に差があると思う。）



##この一か月で感じたこと

###**実務と、学んでいるだけの知識は全然違う。**

思っていた何倍も違いました、うん。
スクール卒業後も、ポートフォリオを作成を通して知識を身に着けていましたが 
ポートフォリオでは自分が使う部分の知識しか身につけていなかった。**点でした、点。**
例えばポートフォリオでインフラは AWS を使っていて、今の勤務先でもAWSを使っていますが、 
EC2を使う場合、ポートフォリオを作っている時にはEC2=サーバーみたいなイメージしかなく、
なぜ使うのか、運用面のコストとか考えてなかったです。
エンジニアとして働いている方からすると、**コストを考えるなんて当たり前や**と思うかもですが、その視点すらなかったです。


###**実務で使う以前の知識が足りない**
例えば AWSって便利だなと思うんですけど、ベースのIT知識が浅いことによってその便利さもわからないし、このままだと便利さが活かせないなと。
資格のためではなく、自分のベースの知識は身に付けるために、基本情報技術者の勉強を始めようかなと。必要なところだけでもやって行こうかなと思ったりしています。
普段は分からない単語が出たらその都度メモをして調べたり、YouTubeで動画を見たりで
キャッチアップしていますが、YouTubeでいろんな動画があって世の中便利すぎと思ったり。
何でネットが繋がるのかみたいなベースの話で個人的にわかりやすかったのは以下２点です。
**[3分間ネットワーキング](http://www5e.biglobe.ne.jp/aji/3min/)**
**[図解！ネットワークの7層を実務に当てはめてみた](https://qiita.com/manamin0521/items/1df1ec65637ad1620329)**





##１ヶ月で１番印象に残ったトピック
テスト環境でSQL文を練習していた時に、本当は１件のみの更新するべきところを、
**間違えて全件更新してしまうという大事件。**

UPDATEでWHERE句をつけずに実行してしまったんですよね。
これはもはや未経験とか関係なく凡ミスすぎる。いやね、本当にね笑えないですよね。。
テスト環境だったからまだ良かったものの、（もちろん復旧する仕組みはありますが）
本番環境でこんなことをしてしまったらと思って、パニックになった１日でした。。
まあ逆に早い段階で失敗ができたのは良かったかなと思います！言い聞かせております。
振り返った時に笑い話のネタになるぐらいに成長したいですね。




###雑談
**スラムダンクにはまりました。**
きっかけは事業部の責任者がスラムダンクが好きというのを聞いて、見始めたんですが面白い。 
感動。 泣いたよね。
１日１話アニメで見ていますが、この１ヶ月はスラムダンクを見るために生きてました。嘘です。
ちなみに今は、湘北対陵南が始まったばかりです。個人的には三井くんが好きです。
バスケ初心者で始めた天才花道が死ぬほど上手くなっていくのを見て、
未経験でエンジニアとして転職した自分と重ね合わせて自分も早く戦力になりたいってモチベーションが上がってます。単純です。バスケがしたいです。



##まとめ
環境としては、何か分からないことがあった時にすぐに聞ける先輩がいらっしゃったり、
リモートでも働きやすさを考えてくださったり、恵まれまくりな感じです。
ありがたい、、本当に。。。（土下座）
もちろん実務のキャッチアップは大変ではありましたが、
それが苦ではなく、環境と人に恵まれ楽しい１ヶ月でした。

次回以降は、実務的な話も投稿できればと思っています。
まだまだ**自分の知識が点の状態**だと思った１ヶ月でした。
自己学習は今後も重要だと思いますが、実務へどう繋げていくかだなと、、。
未経験から転職したエンジニアがどうなっていくのか、、、~~乞うご期待！~~
JS~分割代入~


#概要
配列やオブジェクトから値を取り出して1つずつ別の変数に代入するのはコード量が増えます。
そこで、分割代入を使うことにより配列要素やオブジェクトのプロパティの値を短い記述で取り出すことができます。

今回使用する配列はこちらです。

```index.js
const fruits = ["りんご","ぶどう","みかん","マンゴー"];
```

#分割代入

1、分割代入

```index.js
const fruits = ["りんご","ぶどう","みかん","マンゴー"];
const[f1,f2,f3] = fruits;
console.log(f1,f2,f3);
//りんご、ぶどう、みかん
```
配列fruitsを定義します。
分割代入では、左辺に[ ]に変数をかきます。そして右辺に配列名を書くことで、右辺の配列から要素を得て対応する位置に書いた変数に代入します。


2、分割代入のスキップ残余取得

```index.js
const[f1,,...f2] = fruits;
console.log(f1,f2);
//りんご　["みかん","マンゴー"]
```

変数を飛ばしたいときは変数を書かずに「,」のみかきます。
また今回のようにりんごだけ取り出し、あとは配列で取り出したい場合はレスト構文を使用します。表し方は「...」です。
homebewでPHPをインストールしたときに'Error: python@3.9: the bottle needs the Apple Command Line Tools to be installed'

PHPを仕事で使うことになったので早速自分のPCにインストールしようとしたときに謎のエラーで若干詰まった話

#エラーの内容
下記のようにインストールをしようとした結果

```terminal
brew install php@7.4
```

下記のエラー・・・

```terminal
Error: python@3.9: the bottle needs the Apple Command Line Tools to be installed.
  You can install them, if desired, with:
    xcode-select --install

You can try to install from source with:
  brew install --build-from-source python@3.9
Please note building from source is unsupported. You will encounter build
failures with some formulae. If you experience any issues please create pull
requests instead of asking for help on Homebrew's GitHub, Twitter or any other
official channels.

```

要するに、**「Command Line tool（xCode）が入ってないぜ。」**ということなそうな。

いろいろ調べていくと、OSをアップグレードしたらCommand Line toolを再インストールする必要があるみたいですね〜

その後、macに標準装備されているPHPからローカルにインストールしたものにパスを設定し直し・・・（パスの設定の参考記事：https://qiita.com/kuroro_ru/items/046cba8e23d32599ee4a）

```terminal
$ php -v
PHP 7.4.18 (cli) (built: Apr 30 2021 09:57:43) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
with Zend OPcache v7.4.18, Copyright (c), by Zend Technologies
```

無事インストールできました。
解決！！
CentOS7に最新版のPython3をInstallする方法

# Background
[自作のHP](https://featurepoints.jp/)で動かしているサーバOSはCentOS7と少し古いversionを使っています。それで今までは`Python3.6`だったのですが、`asyncio`の記述がシンプルになっているのとセイウチ構文をどこかで書いてみたいと思っていたので`Python3.9.4`にアップデートかけてみました。

普通であれば `yum install python3`でインストールすればいいのですが、デフォルトだと`python3.6`だったと思います。なのでここでは公式ページからソースファイルをダウンロードし、`make`を使ってコンパイルして`python3.9.4`をインストールしようと思います。

# Caution

注意点としては以下の通りです。

- CentOS7でのgccのバージョンは4.8
    - バージョン5以上でないと`make`でエラーになる
- インストールした後にコマンドパス`PATH`、共有ライブラリパス`LD_LIBRARY_PATH`にパスを通す
- `./configure` の実行高速化パラメータ`--enable-optimizations` を使わない
    - 付けないときと比べて2倍から5倍の実行速度があるのですが付けるとエラーになります。
- `./configure` で `--enable-shared` を付けないと `pip3 install mod_wsgi` するときにエラーになる。

# Development

```shell
#必要なパッケージをインストール
yum groupinstall -y "Development Tools"
yum install -y kernel-devel kernel-headers bzip2-devel libdb-devel libffi-devel
yum install -y gdbm-devel xz-devel ncurses-devel readline-devel tk-devel uuid-devel　openssl-devel

#zlibをインストール
wget http://zlib.net/zlib-1.2.11.tar.gz \
 && tar xvzf zlib-1.2.11.tar.gz \
 && cd zlib-1.2.11 \
 && ./configure \
 && make -j4 \
 && make install

#gccをインストール + ７系にスイッチ
yum install -y centos-release-scl
yum install -y devtoolset-7 && scl enable devtoolset-7 bash

# python3.9.4 をインストール
wget https://www.python.org/ftp/python/3.9.4/Python-3.9.4.tgz \
 && tar xvzf Python-3.9.4.tgz \
 && cd Python-3.9.4 \
 && ./configure \
--with-ensurepip \
--enable-shared \
--enable-ipv6 \
--prefix=/usr/local/python3.9 \
 && make \
 && make altinstall

# パスを通す
ln -sf /usr/local/python3.9/bin/python3.9 /usr/bin/python3
ln -sf /usr/local/python3.9/bin/pip3.9 /usr/bin/pip3
echo 'LD_LIBRARY_PATH="$LD_LIBRARY_PATH:/usr/local/python3.9/lib"' >> ~/.bashrc
echo 'PATH="$PATH:/usr/local/python3.9/bin"' >> ~/.bashrc
source ~/.bashrc

# pip をアップデート
pip3 install --upgrade pip

```

# Reference
- [CentOS7でldconfigを使って共有ライブラリを追加する](https://qiita.com/Esfahan/items/0064d845ca6faf7f3d47)
- [DockerfileでPATHを通す時はRUNではなくENVを使おう](https://qiita.com/TakashiOshikawa/items/2b8974c242a7054e0be5)
- [[解決済み]Python3.8.5で「ssl module in python is not available」](https://qiita.com/mookouchi/items/21653db7cebf149be633)
- [Dockerfileで、あえてsourceコマンドで環境変数を設定](https://qiita.com/lilacs/items/4d4e3f169a04560dee76)
- [UbuntuでPythonをソースからインストール](https://qiita.com/yniji/items/8e392103a6f2a4152606)
- [pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available](https://stackoverflow.com/questions/45954528/pip-is-configured-with-locations-that-require-tls-ssl-however-the-ssl-module-in)
- [python: error while loading shared libraries: libpython3.4m.so.1.0: cannot open shared object file: No such file or directory
](https://stackoverflow.com/questions/43333207/python-error-while-loading-shared-libraries-libpython3-4m-so-1-0-cannot-open/56088070)
- [“ssl module in Python is not available” when installing package with pip3
](https://stackoverflow.com/questions/41328451/ssl-module-in-python-is-not-available-when-installing-package-with-pip3)
- [python 3.8 Could not import runpy module](https://yukun.info/django-centos-mysqlclient-error/)
Power Automate DesktopとUiPathを戦わせる

#はじめに
https://qiita.com/etoootak/items/38df3f70d38b00228625
の続きです。
今度は、Power Automate Desktop(PAD)とUiPathで同じロジックを組んで戦わせてみました。

#戦いの舞台
単純な陣取り合戦です。10×10のマスからランダムに選んで埋めていきます。
プログラムは.NetのWindows Form。各マスはTextBoxです。
![game01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/bdddb8eb-023d-820d-0035-57a478e73808.png)

#Botのロジック
- 乱数で10×10からマスを１つ選びデータを読み出す。
- データが入ってなければ自分の数字(UiPathは1、PADは2)  をうちこむ。



#結果（水色がUiPath、赤がPAD）
https://youtu.be/bncuC29EGhE


#さいごに
戦いは互角でした。
戦わせるというか、単なる実行速度対決ですね。

本当はコアウォーズみたいな事をやりたかったのですが（しつこい）。

# おまけ
初めてPower Automate DesktopでBot作ってみました。わずか7ステップなのに変数使って動的にUI操作する書き方がわからず3時間くらいかかりました。
もしかしたら他の人の参考になるかもしれないので、以下にハマりどころをメモしています。
https://qiita.com/etoootak/items/d74fc60f9f8e6460b012
[Android]お寿司屋で例えるAndroid Architecture Component 第一貫：どんなもんか知る

# Android Architecture Componentって？
どうもReoです。
Android Architecture Componentとは、丈夫でテストがしやすく、保守性の高いアプリを作るためのライブラリ群です。
公式の呼び方ではないのですが、それらを用いた設計手法として、MVVMがAndroidだと有名です。

あ！ここ違くね！ってところがあったらコメントとか筆者の（[Twitter](https://twitter.com/RunningReo)）で教えてもらいたいです～！

取り敢えず、[公式リファレンス](https://developer.android.com/jetpack/guide)を見てみましょう。
![スクリーンショット 2021-05-01 110640.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599059/52576d42-f5e0-2e7b-02e7-40343bd9e247.png)
上記の図が、Android Architecture Componentによって作られてアプリの設計図です。
一応、こちらがAndroidの推奨設計とされていますが、当然完全なわけではありません。
状況に応じて適切な設計手法があるものです。

我々が、普段よく使うのはActivityやFragmentですよね。
自分自身もよくやりがちなのが、兎に角一つのActivityやFragmentに全コードを書いちゃうことです。
こうすると、簡単なアプリの場合はいいのですが、凝ったアプリを作った際に、大変なことになります。
例えば、筆者はランニングアプリを数か月前にリリースしたのですが、その際一つのファイルで1000行越えることがありました。
関数で共通化できていなかった部分もありますが、その時の自分は、わーい！1000行越えた～！イケてるアプリ作っちゃってる～！、と優越感に浸ってました。
また、それに関してどやるツイートもしちゃってました。（反省）

しかし、修正しようとした時に、該当コードがどこにあるのか？どうやって実装したんだっけ？、そもそもなんでこの書き方したの？？等々自分ですら追えないことがありました。

自分でも追えないコードなんて、他人から見たら解読不可能です。
ここから、筆者はアプリの保守性を意識するようになり、設計について学ばねば！と思うに至りました。

話しを戻します。
上記の図を見ると、色々な役割やリファレンス内には小難しい説明があって良く分からんぁと思っているかなと。
でも、それほど複雑な作りではありません。

要は、分業をしているのです。
リファレンス内では、関心の分離と表現していますね！！

# アーキテクチャを現実世界で例えてみる
例えば、みんな大好きお寿司屋さん！

お寿司屋には、板前さんがいてお寿司を握ってくれます。
そして、そのお魚さんはどこから来るのか、、
そう、漁師さんがとってきてくれますよね。
じゃぁ、そのお魚さんは港に水揚げされて、仲卸業者がライバル業者より高い値段で勝ち取る！
そして、それを自分たちのお魚屋さんにもっていき、お寿司屋さんに売るわけです。
他にも、冷凍車で配送する人など、色々な人が関わっています。

では、この漁に出る所からお寿司を握ってお客さんに提供するまでを板前さん一人でやるとしたらどうですかね？

とてつもない労力になりますよね！

筆者は、一つのFragmentに機能モリモリにして、1000行のコードでどやってましたが、その板前さんの例えをソフトウェアの世界でやっちゃってるようなものです。
一つのActivity/Fragmentが、板前や配送業や卸売業や漁師などの様々な役割を担ってしまうと、キャパオーバーになります。
ソフトウェア的には、メモリ不足・・・
要は、ソフトウェアの世界でも分業は必要なのです。
その為に、MVVM等のアーキテクチャをアプリに導入するわけです。

![スクリーンショット 2021-05-01 110640.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599059/52576d42-f5e0-2e7b-02e7-40343bd9e247.png)

さてさて、お寿司屋の例えを無理やりこちらのMVVMの図に当てはめると、


View(Activity/Fragment)はお客さん

ViewModelが板前さん

Repositoryが、漁師

Modelが、海

こんな感じですかね。（仲卸業者どこいった！笑）
自分自身、自力でMVVM実装したことないので、人によっては、いやこうじゃね？？？って部分があるかと思いますが、無理やり比喩表現したので悪しからず。

そして、大事なのが矢印の方向性にしか依存関係がないということです。

お客さんは、板前さんにお寿司を注文する（つまり依存している）
板前さんは漁師さんに魚を取ってきてもらう。（〃）
漁師さんは、海がないと魚が取れない。（〃）


また、データの流れは矢印の逆です。
データを魚だとすると、海から魚が流通してくるということですね。

第二貫までに筆者自身、理解を深めておきます。
このイメージをもってMVVM設計を作っていきましょう。

### [第二貫に続く・・・](https://qiita.com/LaO/items/05f9dd4fba00e3e3e30a)
裁判結果を取り寄せよう

プログラマーたるもの、法律も知らなければいけない。

#開示請求

昨今ではネットの書き込みの規制も厳しくなった。
またレンタルサーバーを利用していて自分の名前を公表していない場合、
相手が法的に自分の住所や名前を割り出してくる場合がある。

#サーバー管理会社やプロバイダーと、開示請求者の裁判結果を知るには？

開示系裁判のほとんどが東京裁判所で行われる。
裁判の結果だけなら裁判所に電話をすりゃ教えてくれる。

```

自分
「令和1年（ハ）第12345号 の裁判結果教えて下さい」

裁判所の人
「原告勝訴ですよー！あなたの住所氏名を開示されましたよー！」

```

#上記、やり取りの内容を知るには？

・東京地方裁判所まで調べるに行く（誰でも見れる）
・利害関係がある場合は、裁判結果のコピー（法律用語で謄写『とうしゃ』という）を送付してもらう

上記2点がある。
今回は裁判結果の謄写を送ってもらうおう

#さぁ、取り寄せよう

印刷してくれるのは、司法協会さん。
http://www.jaj.or.jp/

上記サイトの複写事業部に電話。
ここで注意するのは、コピーが欲しいとか言っても伝わらない。
必ず謄写が欲しいという必要がある。


自分
「利害関係ある事件、令和1年（ハ）第12345号において、やり取り全ての謄写を送付して欲しいのですが」

と伝える。

# 謄写に必要なもの

・ 委任状テンプレート
http://www.jaj.or.jp/wp/wp-content/uploads/2019/07/bc0c81c005d98c2fbb193be9fdc717c9.pdf

をダウンロード。
まずは東京地方裁判所に電話して事件名、担当部、などは地方裁判所に事件番号を伝え教えてもらい、記載する。

・ 上申書 (東京地方裁判所宛に、利害関係がある旨の詳細を書く。自分の契約しているサーバーですよとか、プロバイダーですよとか。)

・サーバー管理会社やプロバイダーから開示請求された旨の証拠となるメールや訴状などを証拠として添付

・収入印紙
150円

・免許証のコピー
・法人の登記簿 3ヶ月以内

複数事件依頼する場合は事件数分、必要となる。
上記書類を封筒に入れて送る。

送付先は、
〒100-0013
東京都千代田区霞が関1-1-4
東京高等裁判所1F 司法協会御中

# 料金

コピー代金は、1枚あたり
白黒 45円
カラー 80円
となる。

ただし、全部で何枚になるか司法協会さんもわからないので、
100枚を超えるときは謄写する前に教えて下さいと
連絡先を明記して委任状に付箋を貼っておく。

送付するときは、簡易書留で送ったほうがいい。

早ければ 2～3日以内
遅くても 7～10日 で届くが、遅い場合は再度電話したほうが良い。
今回は裁判所の人が忘れちゃってたので1ヶ月以上かかった。

謄写完了後、電話かかってくるので指定された銀行口座に入金して完了。

ちなみに、今回は1事件 5,000円程度で取り寄せることができました。

# なぜ、裁判結果を取り寄せるの？

虚偽の証拠を提出したり、嘘をついてくる弁護士も多いので
必ず入手しておいた方が良い。
nuxtでいつもつまずくscssの設定


# nuxtでいつもつまずくscssの設定

nuxtにおいて共通で使いたいglobal.scssの読み込ませ方とか、scss変数を全体に適用させたいとき毎度少しハマるので記事にします。
ポイントは**node-sassとsass-lodaerのversion**です。

## 前準備

### srcディレクトリに各ディレクトリを移動
nuxtはcreateした直後はpagesやassetsがrootに作られるためsrcディレクトリを自作し、node_modules/とtest/以外をsrcに移動させます。
お好みでどうぞ。

```tsconfig.json
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"] // 変更
    },
```
これで@がsrc/を指してくれるようになります。
もし移動させた場合は、以下の記述も変更します。

```nuxt.config.js
export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  srcDir: 'src/',　// 追記
  // 省略・・・
```
これでsrc配下のディレクトリを読み込んでくれるようになります。


## 共通のscssを読み込ませる
### node-sassとsass-loaderのinstall

```bash
yarn add -D node-sass@5.0.0 sass-loade@10.1.1
```

```package.json
{
  "dependencies": {
    "node-sass": "^5.0.0",
    "sass-loader": "10.1.1"
  }
}
```

```nuxt.config.js
export default {
 css: ['~/assets/scss/global.scss'],
}
```
## 共通変数を持ったscssを読み込ませる

### node-sassとsass-loaderのinstall

```bash
yanr add -D @nuxtjs/style-resources
```

```nuxt.config.js
export default {

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    "@nuxtjs/style-resources" // scss変数使用のmodule
  ],

  // @nuxtjs/style-resourcesのための記述
  styleResources: {
    scss: [
      '~assets/scss/_variables.scss'
    ]
  },

}
```

以上
Git ブランチの見つけ方 形跡たどる

#このコードが入ったor削除された原因、タスクを調査して欲しい
意図しないバグや不具合が起きている場合に、
ディレクターさんにこんなお願いされることがたまにあります。

##gitでソースコードの対象範囲がいつ変更されたのか調べる
```
git log -L 最初の行,最後の行:ファイル名
```
上記で、対象のソースコードの変更履歴を調べ、変更された時のコミットを見つける

##対象のコミットが含まれているブランチを特定する
```
git branch -r --contains <対象の変更範囲が含まれているコミットID>
```  
  
  
  
  
拙い文章や間違ってること、こうした方がいい等があると思いますので、
アドバイスや助言をいただけると嬉しいです。