OmniAICreator/Qiita-1.07M huggingface dataset:
Windows11をインストールする際にシステム要件を満たしているのに最小要件を満たしていないと言われた件【パソコン工房AMD組立キット福袋】

# はじめに
新年明けましておめでとうございます！今年は年が明ける前から多くの福袋が売り出されていて、中々に忙しい年末年始になりました。
本題に入りますが、身内が[パソコン工房様のAMD組立キット福袋](https://www.pc-koubou.jp/shopinfo/contents/sale_flyer_hatsuuri2022.php)を購入したので、組み立てを依頼されました。組立→起動チェックまではスムーズに完了し、Windowsをインストールすれば作業完了というところでこんなメッセージが、、、
![スクリーンショット 2022-01-03 17.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300353/981c260d-75fe-30d8-89b8-f45b942990a7.png)
再起動等して何回か試みてみましたが、同様のメッセージが表示されました。

# パソコンの構成（パソコン工房AMD組立キット）
「最小要件を満たしていない」と言われたので、パソコンの構成を確認してみます。

|   |今回のパソコン  |システム最小要件  |
|---|---|---|
|プロセッサ|Ryzen5 5600X|1 ギガヘルツ (GHz) 以上で 2 コア以上の64 ビット互換プロセッサ|
|メモリ|DDR4-3600 16G|4G|
|ストレージ|500G|64G|
|システムファームウェア|ASUS TUF GAMING B550M-PLUS|UEFI、セキュア ブート対応|
|グラフィックスカード|GTX1660Ti|DirectX 12 以上|

CPU性能に対してGPUが少し物足りないのかな〜と思ったり（←余談）もしましたが、最小要件はクリアしているようです。

# 解決法
色々と調べてみると、「[Windows 11で誤った「最小システム要件を満たしていない」との判定ケースが確認（2021/10/7）](https://iphone-mania.jp/news-409670/)」という記事が見つかりました。
こういう時には、システム構成を変えてインストールすると経験的に上手くいくことが多いのですが、生憎と代わりとなるデバイスが手元にありませんでした。なので、BIOSをアップデートすることにしました。（アップデート前のBIOSバージョン：2407、最新のBIOSバージョン：2423）

### BIOSアップデート
まずは、[ASUSのダウンロードセンター](https://www.asus.com/jp/support/Download-Center/)で最新のBIOSをダウンロードします。製品名（今回は「TUF GAMING B550M-PLUS」になります）を入力して、「ドライバーとツール」→「BIOS & FIRMWARE」とページを遷移していき、最新のBIOSをダウンロードしておきます。
![スクリーンショット 2022-01-03 17.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300353/c5fb713f-2e21-5e1d-d994-a93d2fa1943c.png)
FAT16またはFAT32形式でフォーマットされているUSBメモリに、先ほどダウンロードしたファイルを解凍して「TUF-GAMING-B550M-PLUS-ASUS-2423.CAP」をコピーします。後は、USBメモリをパソコンに挿してBIOS画面の「ASUS EZ Flash 3」からアップデートを実行します。詳しくは[コチラ](https://www.asus.com/jp/support/FAQ/1012815/)

### Windows11をインストール
これで上手くいって欲しいと願いながら、インストールしてみると、成功しました！！！やったね！
この方法で全ての人が上手くいくとは思いませんが（そもそも同じ福袋を購入した方々はこの問題に直面していないのかな？）、今回はこれで解決できました。

# 参考
[Windows11の最小システム要件](https://www.microsoft.com/ja-jp/windows/windows-11-specifications)
<備忘録> rails6でbootstrap5系を使う方法

#環境
* macOS      Monterey 12.0.1
* Ruby       3.0.3
* Bundler    2.2.32
* Rails      6.1.4.1

#bootstrapを導入
今回はwebpackを使ってbootstrap5.1.3 を導入していきます。

```
 $ yarn add bootstrap@next #bootstrapをインストール(バージョン選択)
 $ yarn add @popperjs/core
```


#application.jsの設定

```ruby:app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
#追記
import "bootstrap"
import "../stylesheets/application"
import "channels"
#ここまで
Rails.start()
Turbolinks.start()
ActiveStorage.start()
```

#application.html.erbの設定

```ruby:application.html.erb

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>　#追加

```

以上でbootstrap5の導入は終わりです。
【Heroku】Laravelアプリケーションをデプロイする際に詰まったところ

# 概要
個人開発中のアプリケーションのデプロイ時に発生した疑問点などをまとめます。

# 環境
- heroku/7.59.2
- Laravel Framework 8.65.0

# サブディレクトリをgitのリポジトリへプッシュ
```
├── ルートディレクトリ
    ├── src
    └── docker
        ├── mysql
        ├── nginx
        └── php
```
上記のような構成の場合、ルートディレクトリで以下のコマンドを実行し、srcディレクトリをプッシュする必要がある。

```
git subtree push --prefix src/ heroku master 
```

# 500エラー
https://qiita.com/mumucochimu/items/f233d6f6347747dde7f2

### 原因：.envファイルが無し

デプロイ後にアプリケーションを表示させようとした際に発生。
.envファイルはgit管理外のため、デプロイの際に用意してあげる必要がある。

# The only supported ciphers are AES-128-CBC and AES-256-CBC
https://blog.hypermkt.jp/2017/2017-03-13-laravel-the-only-supported-ciphers-error/

### 原因：APP_KEYにbase64:を含める
こちらの記事を参考。php artisan key:generateを実行して生成されるkeyのコピペミス。herokuのConfig Varsで設定するAPP_KEYはbase64:を含めてコピペする。
outsystemのAggregate

Aggregateとは、ソース、フィルタ、ソートによってエンティティからデータを取得するためのクエリを定義できるビジュアル要素です。

多くのアプリケーションは、データベースからデータを取得する必要がある

Aggregateは管理しやすい
実データをExcelのように表示できます。
SQLに関しての知識が不要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/0cd7873f-06b0-82ef-d0b1-0596aa280b8a.png)

Aggregateによってデータベースクエリを視覚的に定義可能
ソースの追加
フィルタの作成
ソートの定義

・ソースの追加
データの取得元となるエンティティ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/3a309fc5-a9d8-09ce-9050-d245366948ec.png)

・Filters（フィルタ）
クエリに1つ以上の条件を追加して出力レコードをフィルタリング

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/20efa633-8cf8-f69f-d163-cb6835e3c2b8.png)

・Sorting（ソート）
ソートの基準にするエンティティのアトリビュートと、ソート順を定義できます。
 昇順
 降順

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/378f7176-4ae0-2085-da65-dcf53228224c.png)
shallowオプション

##shallowオプションとは
ルーティングの記述を複雑にせず、かつ深いネストを作らないというバランスを保つことのできるオプションのこと。
簡単に言うと、``rails routes``した時のURLを短く分かりやすくしてくれるもの。

##shallowオプションの実例
###オプション無

```
resources :posts, only: %i(index show new create destroy) do
    resources :likes, only: %i(create destroy)
end

#URLを確認
$rails routes -c likes
    Prefix Verb   URI Pattern                         Controller#Action
post_likes POST   /posts/:post_id/likes(.:format)     likes#create
 post_like DELETE /posts/:post_id/likes/:id(.:format) likes#destroy
```
destroyアクションの``/posts/:post_id/likes/:id(.:format)``が見づらくなっている。これをshallowオプションで見やすくする。

###オプション有

```
resources :posts, only: %i(index show new create destroy) do
    resources :likes, only: %i(create destroy), shallow: true
  end

#URLを確認
$ rails routes -c likes
    Prefix Verb   URI Pattern                     Controller#Action
post_likes POST   /posts/:post_id/likes(.:format) likes#create
      like DELETE /likes/:id(.:format)            likes#destroy
```
destroyアクションの``/posts/:post_id/likes/:id(.:format)``が``/likes/:id(.:format) ``に短く変更され簡潔なURLになった。

今回は子リソースにshallowオプションをつけた例だったが、親リソースに直接shallowオプションを指定することもできる。

記述方法はとても簡単で、例にもあるように``shallow: true``を追加するだけである。

##参考記事
[shallowオプションでroutesを整える](https://qiita.com/k-o-u/items/b4e371258c01a14b3700)
Swift - Frameworkを作成し、ローカルで使ってみる

#はじめに
大体の流れ
STEP1:新しいプロジェクトを立てて、Frameworkを選ぶ
STEP2:swiftファイルを追加する
STEP3:swiftファイルにclass,funcを定義する
STEP4:testFrameworkTwo.podspecを作成する
STEP5:該当frameworkを使いたいプロジェクトのPodfileに追加する

#STEP1:新しいプロジェクトを立てて、Frameworkを選ぶ
![截圖 2022-01-02 22.19.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/bfc57ffa-c322-c4d1-7ae5-5df061850aa0.png)
#STEP2:swiftファイルを追加する
![截圖 2022-01-03 16.25.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/0a28d475-df49-d620-8273-c7310f16687c.png)
#STEP3:swiftファイルにclass,funcを定義する
```testFrameworkTwo.swift
import Foundation

public class TestFrameworkTwo: NSObject {
    
    public func testFrameworkTwo(){
        print("testTwo")
    }
    
}
```
#STEP4:testFrameworkTwo.podspecを作成する
以下のような内容を記入

```testFrameworkTwo.podspec
Pod::Spec.new do |spec|
  spec.name         = "testFrameworkTwo"
  spec.version      = "0.0.1"
  spec.summary      = "Test for framework two."
  spec.description  = <<-DESC
                   For learing how to make a framework I make a Test for framework 
                         DESC

  spec.homepage     = "https://qiita.com/Wesley-chu"
  spec.license      = "MIT"
  spec.author             = { "XXXXX" => "XXXXX@hotmail.com" }
  spec.platform     = :ios, "11.0"
  spec.source       = { :http => 'file:' + __dir__ + "/" }
  spec.source_files  = "testFrameworkTwo", "testFrameworkTwo/**/*.{swift}"

end
```
#STEP5:該当frameworkを使いたいプロジェクトのPodfileに追加する
以下の行を追加して、ターミナルを開いて、コマンドpod installを実行すれば、プロジェクトに該当frameworkをインポートできる

```
platform :ios, '11.0'
target 'xibForTableView' do
use_frameworks!
pod 'test', :path => '../test'
pod 'testFrameworkTwo', :path => '../testFrameworkTwo' #この行を追加する

end
```
#最後に
インポートしてみて、必要なコードを書いて実行してみたら、

```ViewController.swift
import UIKit
import testFrameworkTwo

class ViewController: UIViewController {

    let shared2 = TestFrameworkTwo()
    override func viewDidLoad() {
        super.viewDidLoad()
        shared2.testFrameworkTwo()
    }

}
```
成功に実行された！やった！
![截圖 2022-01-03 17.05.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/b5d77b9e-2d9b-9d52-c3ea-faa0a71cd550.png)
Amplify×SPA 動的ルーティングでNot found page時の対処法

## 起きた現象
Nuxt.jsアプリ(SPAモード)をAmplify(S3×Cloudfront)で動かしていて、IDから生成される動的ページをリロードや直打ちした際に以下のようなエラーが返ってくる現象が起きました。

![スクリーンショット 2022-01-03 16.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/7f1d90ed-4d4f-7ce9-c250-a35cf2fc9b58.png)

これはSPAモードだと初回html取得時に動的なページは生成されていないことが原因だとわかりました。

ページ構成は以下のようになっています。

```
pages
└── hoge
    └── _id.vue
```

自分はNuxt.jsのSPAモードで起きた問題でしたが、他のSPAでも同じような問題が起きそうだと思いました。

## 対応策
調べたところ、以下のようにすれば回避できそうでした。

- pathパラメータをやめてqueryパラメータでidをもたせる

```
/hoges/1 => /hoges?id=1
```

- (Nuxt.jsの場合)nuxt.config.jsの`generate: { routes() { } }`で対応

```js
generate: {
  fallback: true,
  routes() {
    // ここでAPIからIDを取得して動的なパスを返す
  }
}
```

しかし、前者はpathパラメータを使えない時点で違和感があるのと、後者はビルド時にバックエンドがIDを持っていることを前提としているためビルド後にアプリ上で新規作成したIDを考慮できていないかと思いました。(後者はSEO対策という意味では一概に良くないとは言えない。)

そのため、Amplifyの機能を使ってなんとかならないか探したところ以下の方法でうまくいきました。

## 手順

- Amplify consoleを開きます

- 書き換えて、リダイレクトを選択します

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/e5f178d0-c10a-6c1d-4a48-aeb90f05de60.png width=30%>

- 以下のように設定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/ed2914fd-3bb4-0658-2d69-ab6f79d9b842.png)

これでリロードしてもindexにリダイレクトされて動的ページが取得できるようになりました！
【Rails】simple_formatとは

##simple_formatとは
simple_formatは、改行文字を含むテキストをブラウザ上で表示させる時に使われるヘルパー。
simple_formatの特徴
・文字列を``<p>``で囲む
・改行には``<br/>``を付与
・連続した改行については、``</p><p>``を付与

##記入法

```
<%= simple_format(入力値) %>
```

##simple_formatの有無
###simple_formatなし
本当は改行しているが、出力値では改行されていない。

```
# 入力値
simple_formatのテスト。 
改行を1度挟む。

# 出力値
simple_formatのテスト。 改行を1度挟む。
```

###simple_formatあり
出力値でも改行されていることがわかる。
全体を<p>で括っているため、最後の行にスペースが入っているように見える。

```
# 入力値
simple_formatのテスト。 
改行を1度挟む。

# 出力値
simple_formatのテスト。
改行を1度挟む。
---ここに1文空く---
```

##simple_formatのオプション
###sanitize
sanitizeオプションを付け加えることによって、一部の危険なHTMLタグを取り除いてくる。

```
<%= simple_format(入力値, sanitize: true)%>
```

###hオプション
一部ではなく、全てのHTMLタグを安全に表示したいという場合にはhオプションを使う。
hオプションをsimple_formatに付け加えることによって、与えられたテキストにhtmlタグが埋め込まれている場合にエスケープすることが可能です。ただし、scriptタグに関しては除去される。

>scriptタグとは、JavaScriptやVBScriptなどのスクリプトを文書内に埋め込んだり外部スクリプトを読み込んだりするために使用するタグ。
スクリプトの言語のタイプを示すtype属性の値には、JavaScript、VBScriptなどのスクリプト言語名を指定。
なお、type属性は必須属性。

```
<%= simple_format(h(入力値))%>
```

```hオプション使用例.
# 入力値
hオプションがある場合について検証。
<h1>hオプションがある場合はこのようになる。</h1>

# 出力値
hオプションがある場合について検証。
<h1>hオプションがある場合はこのようになる。</h1>
```

このようにエスケープを行う処理をオプションで記述することによってクロスサイトスクリプティング（XSS）という攻撃を防ぐことができる。

##参考記事
[Railsのヘルパーメソッド「simple_format」について調べて見た](https://tonteki4.hatenablog.com/entry/2018/12/28/164349)
[Railsヘルパーメソッド「simple_format」の使い方](https://qiita.com/KA-ZU-KI/items/2749415d396c2e2a497a)
[script](https://html-coding.co.jp/annex/dictionary/html/script/)
WEB上でシーケンス図を描けるツールUML Sequence Diagram Online Toolを使おう！

シーケンス図をWeb上で簡単に描けるツールの紹介です。

https://sequencediagram.org/

# 画面
左ペインに入力をすると、右ペインにシーケンス図が描画されます。

![sequence_intro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/bbeb7fc4-4407-be4d-b35e-1d1c05b76033.png)


入力補完も効いていて便利です。

![snap_09_interporation.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/442dc046-2396-773a-7223-c420f859064e.png)



# 基本的な入力の仕方
## タイトル
`title`に続けてタイトルを入力します。

```
title 商品購入シーケンス
```

![sequence_title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/1eed60b4-9c20-147b-27c2-1ba039fd9433.png)


## メッセージ

メッセージを入力するには、オブジェクトとオブジェクトの間に`->`や`<--`の記号を入力し、そのあとにコロン`:`に続けてメッセージを入力します。

```
フロント->バックエンド:ユーザ情報の問い合わせ
フロント<--バックエンド:ユーザ情報
```

と入力すると、このようなシーケンス図が作成されます。

![sequence_message.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/526e5aa1-ef85-3782-6594-150d391d073f.png)


# オブジェクトのアイコン
オブジェクトのアイコンを変えるにはオブジェクトの種類を指定します。

```
actor ユーザ
participant アプリ
database 顧客DB
```

![sequence_actor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/d49354b7-c540-2d7f-67cd-69356001bc65.png)


## opt

```
opt ログイン済み
アプリ->顧客DB:メッセージ
end
```

![sequence_opt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/c0e551b3-6cb6-e541-f2fb-fda90e70eb91.png)


## alt

```
alt 6時から10時
ユーザ<--アプリ:おはよう
else 10時から18時
ユーザ<--アプリ:こんにちは
else 18時から翌6時
ユーザ<--アプリ:こんばんは
end
```

![sequence_alt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/179d15b6-1aec-eda3-e597-bf0d98f8bd53.png)



## loop

```
loop 1, 商品数
A->B:消費税の計算
A<--B:消費税込み価格
end
```

![sequence_loop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/412003c7-dfa1-f36c-85e0-febbda87609d.png)

## その他
他にもいろいろな記述方法があります。詳しくはHelpを参照ください。

https://sequencediagram.org/instructions.html

# 保存、ロード
左メニューの**save source text**を選択すると、左ペインに入力した内容がテキストファイルとして保存されます。編集を再開したい場合は、**open source text**をクリックし、ファイルを選択します。

![snap_text_save.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/e924c7a3-99f8-9d50-9adf-f9e49c985d08.png)


# 画像として保存
左メニューの**export diagram**で、作成したシーケンス図を図として保存できます。

![sequence_save.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/e864834f-4c5e-cf73-b21c-db0f8b7c323c.png)
独学でデータサイエンスの勉強をする方法(作成中)

元々システムエンジニアだった自分がデータサイエンティストになるために独学で勉強した内容をまとめてみた記事となります。
　・書籍
　・Eラーニング
　　・udemy
　・講座
　・資格
RSpecで表示順をテストする(SystemSpec)

アプリ内のユーザーの表示順を任意に変更する機能のテストを書く上で、正規表現も含めて勉強になったのでメモを残します。

2人の``user``の表示順が正しく変更されているかをテストします。

#テスト
```ruby:spec/system
RSpec.describe '表示順変更テスト', type: :system do
  let!(:user) { FactoryBot.create(:user) }
  let!(:other_user) { FactoryBot.create(:other_user) }

  describe '表示順を変更する' do
    it 'ユーザー表示順を変更できる' do
      #user→other_userの順番で表示されていることをテスト
      expect(page.text).to match %r{#{user.name}.*#{other_user.name}}
      #other_user→userの順番で表示されていないことをテスト
      expect(page.text).not_to match %r{#{other_user.name}.*#{user.name}}
      
      #表示順を変更する処理を記述
      
      #変更に成功し、user→other_userの順番で表示されていないことをテスト
      expect(page.text).not_to match %r{#{user.name}.*#{other_user.name}}
      #変更に成功し、other_user→userの順番で表示されていることをテスト
      expect(page.text).to match %r{#{other_user.name}.*#{user.name}}
    end
  end
end
```

※``%r{}``で正規表現を生成

#正規表現について
```ruby
%r{#{user.name}.*#{other_user.name}}
#*user.nameはイチロー、other_user.nameはジロー
```

上記の箇所では正規表現の``/イチロー.*ジロー/``が生成されています。
正規表現において``.*``は「任意の文字列に一致」という意味です。
つまり、``page.text``の中に、``イチロー（任意の文字列）ジロー``が含まれているかどうかをテストしており、``ジロー（任意の文字列）イチロー``の場合は不一致となるため、表示順をテストすることができます。
MySQLバージョンアップ

# 現在のバージョン確認
mysql --version 

# mysql5.5系→5.7系へのバージョンアップ
```
sudo service mysqld stop 
sudo yum -y remove mysql-config mysql55-server mysql55-libs mysql55  
sudo yum -y install mysql57-server mysql57     

mysql --version 

sudo service mysqld start
```
#動作状況確認
```
service mysqld status
```

#停止コマンド
```
sudo service mysqld stop
```

#ルートユーザーでログイン
```
mysql -u root
```

#文字コードの確認
```
show variables like '%char%';
```

（latin1が含まれている場合、日本語が文字化けするので変更する必要がある）

#設定ファイルの確認
```
less /etc/my.cnf
```

#設定ファイルのバックアップ取得
```
sudo cp /etc/my.cnf /etc/my.cnf.bk
```

#設定ファイルの編集
```
sudo vim /etc/my.cnf
```

[mysqld_safe]の直前行に
character-set-server = utf8
と入力

#mysqlの再起動
```
sudo service mysqld restart
```

#文字コードがutf8に変わっているのを確認
（character_set_filesystemとcharacter_sets_dir以外）

#自動起動設定
```
sudo chkconfig mysqld on
```

#状態確認
```
sudo chkconfig | grep mysql
```

#サーバ再起動
```
sudo reboot
```

再度service mysqld statusを行い、
mysqld (pid  2948) is running...となっていればOK

#新規ユーザー作成（ルートユーザーでログイン中のみ可能）

```
create user <dbuser01>@<localhost> identified by '<password>';
grant all on <db01>.* to <dbuser01>@<localhost>;
```

#ドキュメント（mysql5.6の日本語リファレンス）必要に応じて参照
https://dev.mysql.com/doc/refman/5.6/ja/
隠しフォルダとか含めたディレクトリサイズの計算 / du

ディレクトリ内の容量を計算する際 `du` コマンドを使うが、サブディレクトリ毎の一覧を出したい時に、隠しディレクトリが拾えなかったりで意図と違う感じになる。

git 使ってるディレクトリだと `.git` に大量のファイルが入ってたりするので、整理する。

## 結論

下記のコマンドで全部出る。

```bash
$ du -sh . .[^.]* *
```

## 経緯など

下記のような内容のディレクトリがあった場合。

```bash
$ ls -a
.		.DS_Store	.gitattributes	sc1.png		sc3.png		sc5.png
..		.git		README.md	sc2.png		sc4.png
```

`du -sh *` で出力すると下記のような感じで隠しファイルと隠しディレクトリは計算から外れてしまう。

```bash
$ du -sh *
4.0K	README.md
176K	sc1.png
180K	sc2.png
180K	sc3.png
 44K	sc4.png
 44K	sc5.png
```

が実際にはこのディレクトリは全体で 13MB くらいあるのでこの結果は変、変というか、足りてない。

```bash
$ du -sh
 13M	.
```

と言うわけで、隠しフォルダを出力する。

隠しフォルダは `du -sh .[^.]*` で集計される。

```bash
$ du -sh .[^.]*
8.0K	.DS_Store
 12M	.git
4.0K	.gitattributes
```

ただ、このやり方だと隠しフォルダ以外は出てこないので、 `*` と、ディレクトリ全体の出力も `.` で追加して全部一気に出してあげる。

```bash
$ du -sh . .[^.]* *
 13M	.
8.0K	.DS_Store
 12M	.git
4.0K	.gitattributes
4.0K	README.md
176K	sc1.png
180K	sc2.png
180K	sc3.png
 44K	sc4.png
 44K	sc5.png
```

これで大体意図した感じの出力に近づいた。
最初に覚えるLinuxコマンド5つ

Linuxのコマンドを打った経験がない方向けです。
これを覚えないとはじまらないやつです。

# 目標
- ディレクトリの確認ができる。
- ファイルのコピー、移動ができる。

# Linuxコマンドの記載について

記載のコマンドがLinuxのコマンドであると明示するために慣例として接頭に$や#をつけることがあります。
コピペする場合は$や#を除外します。

```bash:記載例
$ ls -al
# ls -al
```

## ディレクトリの確認

### pwd
何か操作をするとき、現在いるディレクトリのpathの確認が重要です。
Linuxコマンド操作の起点となる操作です。

```bash
$ pwd
/home/allsmart
```

### ls
現在のディレクトリにあるファイル、ディレクトリを表示します。
リスト表示、隠しファイルの表示を有効にする -al オプションつきでよく利用します。

```bash
# オプションの例 
# -a : 隠しファイルも表示
# -l : 詳細を一覧で表示
# -al : 隠しファイルを詳細一覧で表示
$ ls -al
drwxr-xr-x   7 allsmart  allsmart    224  6  1  2020 .ssh
drwxr-xr-x   4 allsmart  allsmart    128  6  1  2020 .vscode
-rw-r--r--   1 allsmart  allsmart    113  3 19  2021 .zprofile
-rw-------   1 allsmart  allsmart   1575 12 31 12:00 .zsh_history
drwx------  12 allsmart  allsmart    384  1  2 18:33 .zsh_sessions
drwxr-xr-x   4 allsmart  allsmart    128  3 19  2021 allsmart
``` 

## ディレクトリ操作

### cd
現在いるディレクトリの移動に使用します。
「change directory」 に由来します。

```bash
# cd [移動したいディレクトリのpath]
$ cd /data/logs

# ひとつ上の階層に移動したい時
$ cd ../

# ログインユーザのホームディレクトリに移動したい時
# ~(チルダ)はログインユーザのホームディレクトリのpathに読み替えられえる
$ cd ~
```

## ファイル操作
### mv
ファイルを移動する時に使用します。

```bash
# mv [移動元のファイルpath] [移動先のファイルpath]

# 「/data/logs」　ディレクトリ下の 「app.log」 ファイルを、
# ログインユーザのホームディレクトリ下に 「app.log」 ファイルとして移動する。
$ mv /data/logs/app.log ~/app.log
```

### cp
ファイルをコピーする時に使用します。

```bash
# cp [コピー元のファイルpath] [コピー先のファイルpath]
# オプション
# -r : コピー元にディレクトリのpathが指定された場合、以下のディレクトリ、ファイルを再帰的にコピーする。

# 「/data/logs」　ディレクトリ下の 「app.log」 ファイルを、
# ログインユーザのホームディレクトリ下に 「app.log」 ファイルとしてコピーする。
$ cp /data/logs/app.log ~/app.log

# 「/data/logs」 ディレクトリ以下の ファイル、フォルダを、
# ログインユーザのホームディレクトリ下に 「logs」ディレクトリとしてコピーする。
$ cp -r /data/logs ~/logs  
```
【props編】Vue.jsで再利用可能なコンポーネントを実装する方法

props編👈今ここ
slot編
[実装編](https://qiita.com/h-iwamori/private/0445d088150e6a7a93b8)

## はじめに
どうすれば再利用可能なコンポーネントを実装することができるのか？
必要になるのは「props」と「slot」です。

今まで型指定のみで、他の指定方法があることすら知りませんでした。この記事では「props」について理解を深めようと思います。

バージョン
Vue.js 2.6.11

## 結論
propsは3つのプロパティを理解しよう！

## 詳細
親から子にデータを引き渡す際に、子にpropsオプションとして属性を定義でき、
その際に、引き渡すデータの型指定・必須項目かどうか・デフォルト値など様々な指定できます。

### プロパティの種類

propsでは3つのプロパティを設定することができます。

- `type` : データの方を指定
- `default` : 初期値の設定。親からデータが渡されない場合に使用
- `validator` : データ必須。値は真偽値で指定

Vue公式を参考に3つのプロパティの設定を確認していきます。
https://jp.vuejs.org/v2/guide/components-props.html

### typeの設定方法

- 型を複数設定することが可能
- 複数設定した場合は指定した型を許容する

プロパティ名（type）を記載しなくても、typeとして判断してくれます。

```vue
<script>
export default {
  props: {
    // 基本的な型の検査 (`null` と `undefined` は全てのバリデーションにパスします)
    propsA: Number,

    // 複数の型の許容
    propsB: [String, Number],

    // 文字列型を必須で要求する
    propC: {
      type: String,
      required: true
    },
  }
}
</script>
```

#### データ型一覧

- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- null（全て許容）
- undefined（全て許容）

#### 全てを許容する
null, undefinedの他に、{}とすることで全て許容と同じになります。

```vue
<script>
export default {
  props: {
    propsD: {},
  }
}
</script>
```

### defaultの設定方法
defaultオブジェクトは親から子に指定したデータが受け渡されていなくても、エラーにならずにデフォルト値（既定値）を指定します。

```vue
<script>
export default {
  props: {
    // デフォルト値つきの数値型
    propsE: {
      type: Number,
      default: 1000
    },

    // デフォルト値つきのオブジェクト型
    propF: {
      type: Object,
      // オブジェクトもしくは配列のデフォルト値は
      // 必ずそれを生み出すための関数を返す必要があります。
      // 関数を設定しない場合のエラー
      default: () => {
        return { message: 'hello, Vue.js' }
      }
    }
  }
}
</script>
```

### requiredの設定方法
requiredを設定することで、そのデータの受け渡しを必須（親からpropsに必ずデータが指定される）かどうか指定できます。指定する値はBoolean型のtrueまたはfalseの真偽値を指定します。

```vue
<script>
export default {
  props: {
    // カスタマイズしたバリデーション関数
    propG: {
      validator: (value) => {
        // プロパティの値は、必ずいずれかの文字列でなければならない
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
}
</script>
```

#### includesメソッドを使ったバリデーション関数
好みの問題ですが、`includes()`を使って書くと以下のようになります。

```vue
validator: (value) => {
  ['success', 'warning', 'danger'].includes(value)
}

// もっと簡潔に
validator: (value) => ['success', 'warning', 'danger'].includes(value)
```

## 最後に
参考にどうぞ！
次回はslot編です！

## 参考文献
https://jp.vuejs.org/v2/guide/components-props.html
LaTeX初心者がとりあえずまともな文章を仕上げるためのまとめ

こんにちは．初投稿です．
今回は，私が数か月 $\LaTeX$ を用いていく過程で身に付けたことを紹介していきたいと思います．この記事の対象者は， $\LaTeX$ について全く分からないけれどとりあえずこれを使ってレポートを仕上げてみたいという方です．パソコンに詳しくない人が環境構築するのは難しいのでCloud LaTeX等をはじめは使うと良いと思います．授業で使うように指示されなければ諦めていただろうと思うくらい初めの方は難しいと感じたので，ようやく初心者を脱出しそうになった今，始めたばかりの時のことを思い出してその時に欲しかった情報を書いていきます．もっとよりよい書き方があれば指摘してくださると幸いです．
（ちなみに私はVSCodeでuplatexを用いています．導入にとても苦労しました．）

私が毎回書いているプリアンブルは以下の通りになります．細かい解説を書いていきますが意味が分からなければコピペしてとりあえずコマンドを打ち込んでみるといいと思います．

```tex:preamble.tex
\documentclass[dvipdfmx,a4j,11pt]{ujarticle}
\usepackage{amsmath}
\usepackage{amssymb}
\usepackage{siunitx}
\usepackage{physics}
\usepackage{enumerate}
\usepackage{tikz}
\usetikzlibrary{intersections, calc, arrows}
```

まずは初めの行から．

```tex:
\documentclass[dvipdfmx,a4j,11pt]{ujarticle}
```

これは出力する用紙のサイズを指定しています．dvipdfmxは入れなくても動きますが後述するTikZを用いるには書かないと動かないです．a4jのところをa4paperにするのもよいですが，後者は左右の余白が大きすぎて私は好みじゃないのでa4jを用いています．11ptは文字の大きさを指定しています．いろいろなサイズの文字で作ってみてこれがいい感じだったので適当に決めました．uplatexを用いているのでujarticleと指定しています．課題で2ページ程度のレポートを出すくらいにしか使用していないので，ujreportじゃない理由は特にありません．どちらもこの使用範囲では特に変わらない感じがします．

```tex:
\usepackage{amsmath}
\usepackage{amssymb}
```

これを入れると数式が書きやすくなると聞いて書いています．プリアンブルはなんぼあってもいいので両方書いた方がいいです．詳しくは以下の記事に詳しく書かれているのでお読みください．
基本的に私はequationとalign*とgather*とcasesばかり使っています．

https://qiita.com/t_kemmochi/items/a4c390b4967b13f3afb7#align%E7%92%B0%E5%A2%83

```tex:
\usepackage{sinunitx}
```

これは単位を書くときにとても役に立ちます．equation環境下でアルファベットを書くとイタリック体になりますが，単位はローマン体で書く必要があります．具体的にどう書けばよいかは以下の記事をお読みください．


https://medemanabu.net/latex/siunitx-package/

```tex:
\usepackage{physics}
```

これは微積の記述をするときに役に立っています．equation環境下でdxと書くと $dx$ となるようにdもイタリック体になってしまうのですが，\dd{x}と書くと $\text{d} x$のようになってくれます．これを知る前は\frac{\text{d} y}{\text{d} x}と書いて $\frac{\text{d} y}{\text{d} x}$ と無理やり書いていました．physicsパッケージについては以下の記事に詳しく書いてあるのでお読みください．こちらの記事には括弧の楽な書き方についても詳しく紹介されていてわかりやすいのでオススメです．

https://qiita.com/yetput_ikura/items/912cc9d9496ebefcccd9

```tex:
\usepackage{enumerate}
```

これは良い感じの箇条書きをするときに使っています．1,2,3…かi,ii,iii…といったカウンタを変えることができます．enumerateとenumitemの2つがあるらしいですがenumerateのほうがカウンタを変えるために打つ文字が少ないし大した問題が無いのでenumerateを使っています．詳しい書き方は以下の記事をご覧ください．

http://nalab.mind.meiji.ac.jp/~mk/knowhow-2020/node25.html

```tex:
\usepackage{tikz}
\usetikzlibrary{intersections, calc, arrows}
```

これは $\LaTeX$ で図を書くときに使っています．TikZで図を描くためにはこの記事がおすすめです．

https://math-note.xyz/latex/tikz/tikz-line/




最後に．
コマンドの書き方は以下のリンクにまとまっています．

https://medemanabu.net/latex/latex-commands-list/

[改訂第8版]LaTeX2ε美文書作成入門   奥村晴彦 
ネットサーフィンするよりもはるかに簡単に欲しい情報が見つかります．これからずっと使えるスキルなので買っておいて損はありません．私は辞書のように使っています．

https://www.amazon.co.jp/dp/4297117126/ref=cm_sw_r_tw_dp_12GCYMCHNNTA2F83C48H?_encoding=UTF8&psc=1

しばらく使っていって，最低限必要な情報を仕入れればあとは文章を仕上げていきながら使い方を覚えていくしかないと痛感しました．
ここまでお読みいただきありがとうございました．
SQLiteバージョンアップ

ソースからコンパイルしてバージョンアップする方法

# gcc、makeインストール
```
yum install -y wget gcc make
```

# 最新版のsqlite取得
```
wget https://www.sqlite.org/2021/sqlite-autoconf-3360000.tar.gz
ls
```

# コンパイル
```
tar zxvf sqlite-autoconf-3360000.tar.gz
ls
cd sqlite-autoconf-3360000/
./configure --prefix=/usr/local
make
make install
cd ..
ls
rm -rf sqlite-autoconf-3360000 sqlite-autoconf-3360000.tar.gz
```
# ライブラリのパスを通す
```
mv /usr/bin/sqlite3 /usr/bin/sqlite3_old
ln -s /usr/local/bin/sqlite3 /usr/bin/sqlite3
echo 'export LD_LIBRARY_PATH="/usr/local/lib"' >> ~/.bashrc
ldconfig
```
Vue.jsで複数のclassをバイディングする方法

## はじめに
「Vue.jsで動的に見た目を変更するために、どうやって複数のクラスを適用したらいいのか？」と思い、v-bindディレクティブで、どうすれば複数のクラスをバイディングするのかその実装方法をまとめました。

バージョン
Vue.js 2.6.11

## 結論

複数のクラスを適用したい場合は、配列構文を使い、同じ要素に複数のスタイルオブジェクトをバインディングすることができます。

## 実装例

各項目に「色」「is-active」を付与する、簡単な例です。
![スクリーンショット 2022-01-03 16.41.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2016955/adff14c3-4a75-5aa6-9549-c4fcbe4c1ac6.png)


### 1. 配列構文

```
<template>
  <div id="app">
    <nav class="nav">
      <ul class="nav__list">
        <li
          class="nav__item"
          v-for="(nav, index) in navs"
          :key="index"
          :class="[
            nav.isActive ? 'is-active' : '',
            `nav__item--${nav.color}`,
          ]"
        >
          {{ nav.label }}
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      navs: [
        {
          label: "ホーム",
          color: "black",
          isActive: true,
        },
        {
          label: "会社概要",
          color: "green",
          isActive: false,
        },
        {
          label: "事業紹介",
          color: "blue",
          isActive: false,
        },
        {
          label: "お問い合わせ",
          color: "orange",
          isActive: false,
        },
      ],
    };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 30px;
}

.nav__item {
  text-decoration: underline;
}
.nav__item.is-active {
  font-weight: bold;
  text-decoration: none;
}

.nav__item--black {
  color: black;
}
.nav__item--green {
  color: green;
}
.nav__item--blue {
  color: blue;
}
.nav__item--orange {
  color: orange;
}
</style>
```

### 2. リファクタリング

`is-active`クラスの部分が、三項演算子式を使って少し冗長になってます。
配列構文の内部ではオブジェクト構文が使えるので、
オブジェクト構文でリファクタリングしてみます。

```
<template>
  <div id="app">
    <nav class="nav">
      <ul class="nav__list">
        <li
          class="nav__item"
          v-for="(nav, index) in navs"
          :key="index"
          :class="[{ 'is-active': nav.isActive }, `nav__item--${nav.color}`]"
        >
          {{ nav.label }}
        </li>
      </ul>
    </nav>
  </div>
</template>
```

## 最後に

リファクタリングを少しは見やすいコードになったと思います。

複数のクラスを適用したい場合は
- 配列構文を使う
- 配列構文の内部ではオブジェクト構文を使う

参考にどうぞ！

## 参考文献
https://jp.vuejs.org/v2/guide/class-and-style.html
Windows Terminal、最高！！！！

# Windows Terminalとは
Windowsのターミナル系を統合した新しいMSのターミナルです(語彙力)
無料。

# きっかけ
少し前にPowerShellでsshできることを知って(今更)、サーバー操作をpoertShellでやるようになった
前はrloginをよく使っていたので、Powershellって画面分割できないので辛いと思っていた
powerShellで画面分割できる方法を調べていたらWindows Terminalなるものを見つけた

# 何が良いか
* PowerShellを複数タブで開ける
* タブだけでなくて画面ごと分割もできる
* コマンドプロンプトも使える
* wslも使える
* Azure CloudShellも使える
* その他にも追加して使えるらしい

# 実際の画面
![winterm.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246479/ced2d5ca-b7e4-dc28-a9ca-cd6392032367.png)


# 主な操作
## インストール
Microsoft StoreからWindows Terminalで検索しインストール

## ペイン分割
Alt+Shift+D

## ペイン閉じる
Ctrl+Shift+W

## タブを増やす
Ctrl+Shift+\[1-4\]
(Ctrl+Shift+1だとPowerShellが、Ctrl+Shift+2だとコマンドプロンプトが、Ctrl+Shift+3だとwslが、Ctrl+Shift+4だとAzure CloudShellが開くように設定されている)

# 設定
上部の▽みたいなところから設定を選択で設定画面に行く。
settings.jsonを使う場合、自動でVS Codeが開きそこで設定可能。

# 番外編(powershellの文字化け)
`cat .\Dockerfile`
したときに日本語が文字化けした。
理由はPowershellのデフォルト文字コードがUS-ASCIIであり、UTF8を自動判別しない為。
これの解消方法は
`cat .\Dockerfile -Encoding UTF8`

# 番外編(codeコマンド)
黒い画面でPowershellを開いてcatとかlsとか使っているともはや自分がWindowsで作業していることを忘れてしまうことがある
`vi hogehoge.py`
とか打ってしまったり。。

コマンドラインからエディタが呼び出せるのは流石にLinuxやwslじゃないとできない。。
と、思いきや
`code hogehoge.py`
でVS codeが開くのですね。
知らなかった。
Tmux レイアウトの書式に関するメモ

# Tmux layoutに関するメモ
先にアップロードしたLayoutを生成するスクリプトを作った際に、Tipsで書こうとしてたのをど忘れしてたので、メモっときます。

## Tmux layoutの文法
公式ドキュメントがあるといいのですが、、見つけられず。
実際に手元のtmux 3.0a(Ubuntu 20.04)で試したASISですので、ご注意ください。

まず、manで見る場合にselect-layoutあたりには以下のような文法で書いてあるのですが、、

```
bb62,159x48,0,0{79x48,0,0,79x48,80,0}
```

手元で試すと、若干違ってます。

```
$ tmux list-windows
0: zsh- (3 panes) [172x90] [layout d7fe,172x90,0,0[172x17,0,0,0,172x10,0,18,2,172x61,0,29,1]] @0

該当部を抜き出すと以下ですね。
d7fe,172x90,0,0[172x17,0,0,0,172x10,0,18,2,172x61,0,29,1]
```

いくつかレイアウト試しながら確認した感じだと、list-windowsで表示されるlayoutの文法は以下のようになるようです。

- 一番外側 ：
    - \<check sum\>,\<子ペイン群\>
    - 一番外側の場合は、子ペイン群＝ターミナルのサイズ・位置になるので、\<ターミナルの幅\>x\<高さ\>,\<x位置(0固定)\>,\<y位置(0固定)\>[...]などになります
- 子ペイン群：
    - 縦に並べるペイン群　\<子ペイン群の幅>x\<高さ\>,\<x位置\>,\<y位置\>\[\<子ペイン\>,\<子ペイン\>,...\]
    - 横に並べるペイン群　\<子ペイン群の幅>x\<高さ\>,\<x位置\>,\<y位置\>\{\<子ペイン\>,\<子ペイン\>,...\}　
- 子ペイン ：
    - \<Paneの幅>x\<の高さ\>,\<Paneのx位置\>\<Paneのy位置\>,\<Paneの通番\>
    - 子ペイン群が子ペインとして下にぶら下がってもOK
    
manに書いてある文法だと、Paneの通番（index)の情報が欠落してるんですね。
ちなみに、通番ありの文法でも、なしの文法でも、どちらもselect-layoutでちゃんと受け付けてもらえました。
どちらかは非推奨なのかもですが、、

## Check Sum
これはtmuxのソースコードの以下辺りに定義されています。
47行から。

https://github.com/tmux/tmux/blob/6c2bf0e22119804022c8038563b9865999f5a026/layout-custom.c

pythonで実装するとこんな。

```
def csum(layout):
    csum = 0
    for char in layout:
        csum = (csum >> 1) + ((csum & 1) << 15)
        csum += int.from_bytes(char.encode(), byteorder='big')
        if csum >= 2 ** 16:
            csum -= 2**16

    return format(csum, '04x')
```

上記の通番情報があってもなくても、もっというとサイズがターミナルにあってなくてもselect-layoutは受け付けてくれるのですが、Check Sumが間違ってると一発で蹴られます。

## Paneの通番
list-windowsで表示される通番は、Paneの生成順序で決まるもので、bind qで表示される番号とは違うみたいです。
一回Paneを消して、再度生成しても番号の振り直しは行われないようで、例えば2番のPaneを消して、新たに作ると、新しいPaneの通番は3になります。

また、この通番は、Window群を通して振られるようです。
Pane 1, 3がWindow 1の２枚、Pane 2がWindow 2の1枚、みたいなことになります。
後述しますが、これ別に重要じゃないっぽいですが。

## 受け付けてもらえるレイアウトと駄目なレイアウト
なんか結構ゆるいです。

受け付けてもらえるもの。

- Pane通番ありフォーマット/なしフォーマット、どっちでも受け付けてもらえる
- Pane通番ありの場合で、通番が現状のPane群の通番と合っていなくても受け付けてもらえる
- 高さ、幅、位置があっていなくても、受け付けてもらえる
    - 例えば、レイアウトを作成したときと、select-layoutするときでターミナルのサイズが変わっていたとしても、受け付けてはもらえる
    - ただし、表示は歪む

受け付けてもらえないもの。

- Check Sumがあってない
- Paneの枚数があってない

## まとめ
とりあえずこんなところでしょうか。
なんというか、次のバージョアップでがらっと変わってしまいそうなので、なんともですね。
泥臭いなぁ。。
【JAWSDB設定】HerokuでMysqlを使う

## JAWSDB設定

**バージョン**
ruby '2.7.2'
rails '6.1.3.1'
mysql2 '8.0'

**前提**

- Herokuへのログイン、及びアプリ作成は完了していること

**アドオンを追加**

- Herokuの標準のDBはPostgresのため、MySQL使う場合はアドオンの追加が必要になる
- MySQLのアドオンは知る限りClearDBとJawsDBの二種類ある（バージョンの違いにより使い分ける）

　 　1. ClearDB の MySQL のバージョンは 5.5系
　　 2. JawsDB の MySQL のバージョンは 8系

今回は、タイトルにもある通り、JawsDBを利用します。

```jsx
$ heroku addons:create jawsdb:kitefin --version=8.0
# 自動で DB 接続情報が環境変数にセットアップされる
# ただし、必要に応じて分解してアプリに適した形式の環境変数になおすこと
```


**アドオンの確認**

```jsx
$ heroku addons

Add-on                           Plan     Price  State  
───────────────────────────────  ───────  ─────  ───────
jawsdb (jawsdb-amorphous-40408)  kitefin  free   created
 └─ as JAWSDB
```


**確認方法とフォーマット**

```jsx
$ heroku config:get JAWSDB_URL
 > mysql://DB_USERNAME:DB_PASSWORD@DB_HOST:3306/DB_DATABASE
# 詳細は個人情報のため記載をしませんが、上記の順でURLを確認することができます
```


**JAWSDBの接続情報を環境変数にセット**

```jsx
$ heroku config:set DATABASE_NAME="*************"
$ heroku config:set DATABASE_PASSWORD="****************"
$ heroku config:set DATABASE_USERNAME="***************"
$ heroku config:set DATABASE_URL ="<JAWSDB_URLの値をそのまま設定>"

# RailsアプリはDBのadapterはmysql2なので、変更が必要（mysql: ⇛ mysql2:）
# 環境変数と=の間はあけない（エラーの原因になる）
# 因みに削除する場合は、 $ heroku config:unset DATABASE_HOST
# DBの接続情報は画面から確認できる
```

- JAWSDBの画面から接続情報確認
![スクリーンショット 2022-01-03 15.20.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677769/fb25cc8e-713a-ae10-7d2d-fb9ec9cafc7b.png)


**heroku configファイルの確認**

```jsx
$ heroku config

# 設定後の結果
DATABASE_NAME:            ************* #英数字が入っている
DATABASE_PASSWORD:        ************* #英数字が入っている
DATABASE_URL:             mysql2://DB_USERNAME:DB_PASSWORD@DB_HOST:3306/DB_DATABASE
DATABASE_USERNAME:        *************
JAWSDB_URL:               mysql2://DB_USERNAME:DB_PASSWORD@DB_HOST:3306/DB_DATABASE
LANG:                     en_US.UTF-8
RACK_ENV:                 production
RAILS_ENV:                production
RAILS_LOG_TO_STDOUT:      enabled
RAILS_SERVE_STATIC_FILES: enabled
SECRET_KEY_BASE:          **************************************************** #特に変更などはしていない
```

## JAWSDBとRailsを連携
**Railsアプリ config/database.ymlに設定**

- 環境変数から読み込ませる

```jsx
// config/database.yml

production:
  <<: *default
  database: <%= ENV['DATABASE_NAME'] %>
  username: <%= ENV['DATABASE_USERNAME'] %>
  password: <%= ENV['DATABASE_PASSWORD'] %>
  url: <%= ENV['DATABASE_URL'] %>

# Heroku configファイルと相違ないか内容の確認を行う
```
## データベース作成

**テーブルを作成**

```jsx
$ heroku run rake db:migrate
```

**seedデータを作成**

```jsx
$ heroku run rails db:seed
# seedデータを作成した場合は、こちらのコマンドを実行する
```


**MysqlでJawsDBの中身を確認**

```jsx
$ mysql -u < Username > -p -h <Host > -D < Database >
```

以上。
完全に個人的なメモにはなっていますが、少しでも誰かの参考になればと思います。
間違っている点などあれば、ご指摘いただけると嬉しいです。
【Rails】decoraterの使い方

##decoraterとは
Decoratorというデザインパターンを導入することで、ビューファイルにロジックを記述しないことが出来る。

使用イメージとしてはModelとViewの中間にデータの加工の役割を担うもの。これらを使えるようにするため、gemをインストールする。

##Draper導入
まず最初にgemをインストール。

```
#Gemfile
gem 'draper'

$ budle install
```
次にセットアップ。

```
# app/decorators/application_decorator.rb を作成
# ApplicationDecoratorは全てのDecoratorの親クラスになる
$ rails generate draper:install
```

##Draper使用例
データベースに``first_name: "田中", last_name: "太郎"``という名をviewにて**フルネームで表示**させようとすると、以下のようになる。

```
<%= "#{@user.first_name} #{@user.last_name}" %>
```

もしこれに複雑な加工を追加でする場合、コードが見づらくなってしまう。
そこでDraperでコードを見やすくする。

```
$rails g decorator User
このコマンドでuser_decorater.rbを作成
```
以下ファイルに``full_name``を定義。

```user_decorater.rb
class UserDecorator < Draper::Decorator
 delegate_all

 def full_name
   "#{object.last_name} #{object.first_name}"
 end
end
```

この処理をするとviewにて``@user.decorate.full_name``と記載できるようになる。

```
<%= "#{@user.first_name} #{@user.last_name}" %>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
<%= @user.decorate.full_name %>

```

もし``.decorate``を毎回書くのが面倒なのであれば、コントローラーに下記を加えると省略できる。

```users_controller.rb
@user = User.first.decorate
```

##model、helper、moduleで記載しない理由
**◆model**
何でもモデルに記載しておくと、すぐにモデルは肥大化してしまうため。
モデルにはDBにアクセスするような処理のみを記載することで肥大化を防ぐ。

**◆helper**
helperもDecoratorもビューを書きやすくするための仕組みという点では共通点がある。しかし２つの違いとして
・helperは``モデルから独立し直接関係していない``描画ロジックを実装するのに用いる。
・Decoratorは``特定のモデルに関連``した描画ロジックを実装するのに用いる。

**◆module**
moduleで拡張用のメソッドを定義して、モデルのクラスにincludeすれば同じことを再現できるが、これもモデルに記載しているのとあまり変わらない。

もし1人で開発している場合であれば、モジュールがviewのロジック・モデルにはDBのアクセス…というルールのもとで実装できるかもしれないが、

共同開発の場合にはそのルールを共有していない場合、モデルにビューロジックが溢れ出すこととなりやすいためあまりお勧めできない。

##参考記事
[Rails decoraterでviewをすっきりさせるメモ](https://note.com/hbkk/n/nb836dcc0f58f)
[Decoratorの役割とDraperについて](https://qiita.com/jonson29/items/00077b54bb91ed74fdb8)
[Draperの使い方 まとめ](https://nekorails.hatenablog.com/entry/2018/10/13/070437)
JSONがどんなものかをなんとなくで解説

「JSON」という言葉を知ってネットで色々と検索したものの、イマイチ意味がわからず
「結局JSONってなんやねん!!」と思っていたのですが、現場の先輩にとても丁寧に解説されて納得したので、さらに自分なりにまとめて解説していこうと思います。

##JSONとは!!
**JSONとはJavaScriptオブジェクトを文字列化したもの**。。。らしいです。
いきなり言われてもわけが分からないですねよね。
説明をする前にJSONってやつを見てみましょう。
JSONの例を出すとこんな感じです↓↓

```ruby:jsonExample
'
let JsonExample = {
  'id':12345,
  'name':hogehoge,
  'info':{
     'money':10000,
     'type':'A'
 }
}
'
```

↑だけ見てもわからないので、説明文の言葉で僕がイマイチ分からなかった部分を個別に解説して、説明文全体を理解していこうと思います。
ここで分からないことを一つずつ紐解いていきます。
僕がJSONの解説をされて分からなかった言葉↓↓
・オブジェクト
・文字列化

###JavaScriptオブジェクト
これはもう少し細かい説明をすると**JavaSprictの書き方で書かれたオブジェクト**ですね。
では、オブジェクトとは何でしょうか？
オブジェクト＝何かが入った物
と理解しています。。。
かなり抽象的な表現ですが、とりあえず何かが入ったものらしいです。
こちらの[記事](https://wa3.i-3-i.info/word1119.html)が参考になるかなと思います
ただ、実際にその概念的な何かを使用するためには、人間でも分かるように表現してあげないといけません。
何かが入った概念的な何かを、どう表現するのか？ってことですね
その表現の仕方が言語によって異なるようです。
今回の場合はJavaScriptという言語でオブジェクトをどう表現するかですね。
JavaScriptでのオブジェクトの書き方はこちらの[サイト](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics)を見て頂ければと思います。(これに全てが載っている気がする...)
↓例↓

```ruby:objectExample
let JsonExample = {
  'id':12345,
  'name':hogehoge,
  'info':{
     'money':10000,
     'type':'A'
 }
}
```


###文字列化
文字列化は、ある変数に入っている値を「ダブルクォーテーション ""」か「シングルクォーテーション ''」で囲まれたテキスト形式で表現可能なデータに変換すること
↓例↓

```ruby:toStringExample
let numberExample = 123; //=> 123
let stringExample = String(numberExample); //=> "123" 
```

###最初の説明に戻ると
**Javasprictの書き方で書いたオブジェクトの最初と最後にダブルクォーテーションかシングルクォーテーションをつけれあげればJSONになる!!**ってことだと思います


色々と御幣があると思うので、間違っている箇所やこんな解説のほうが理解しやすい！！ってのがあれば教えてください
pumaを起動させるとconfig/initializers/devise.rb:17: syntax error, unexpected << (SyntaxError) <<<<<<< HEAD ^~

##背景
pumaを起動させようとしたらこの文法エラーが出て、最初どういう意味かわかりませんでした。

##エラーの意味

```
config/initializers/devise.rb:17: syntax error, unexpected << (SyntaxError) <<<<<<< HEAD ^~
```

というエラーは皆さんもご存知の通り文法が間違っているというエラーなのですが、<<<<<<< HEAD ^~はファイルのコンフリクトを意味しています。(devise.rbにコンフリクトしている行があるよと教えてくれている)

##解決法
vimで↑のファイルを開くと17行目に不等号と＝がついている箇所があるのと思うので、その行を消してください。そうするとエラーは解決します。
ktor 2.0.0-beta-1 withTestApplicationのdeprecatedを解消する

## 背景
### 現象
[Ktor Project Generator](https://start.ktor.io) にて、以下の条件でProjectを作成すると、
生成されたサンプルテストコードにて、`deprecated`な`withTestApplication()`が含まれてしまっている。

	- Ktor version: 2.0.0-beta-1 
	- Engine: Netty
	- Configuration in: Code
	- Add sample code: チェックをつける

※ 2021/01/02時点。今後解消される可能性あり。
※ 2.0.0-beta-1 以前のバージョンでは試していないのですが、同様の現象が発生する可能性あり。


### 推測される原因
以下のPRで、新しいテストコードが実装されたが、Ktor Project Generatorが追いついていないためと考えられる。
（詳細がわかる方がいらっしゃいましたら、ご教示いただけますと幸いです。）
https://github.com/ktorio/ktor/pull/2689
https://youtrack.jetbrains.com/issue/KTOR-3236


## 解決案
### 修正前コード
デフォルトで生成されるAPIのテストコードはこんな感じ。

```kotlin
package com.example  
  
import com.example.plugins.configureRouting  
import io.ktor.http.*  
import io.ktor.server.testing.*  
import kotlin.test.Test  
import kotlin.test.assertEquals  
  
class ApplicationTest {  
  
    @Test  
	fun testRoot() {  
	    withTestApplication({ configureRouting() }) {  
			handleRequest(HttpMethod.Get, "/").apply {  
				assertEquals(HttpStatusCode.OK, response.status())  
	            assertEquals("Hello World!", response.content)  
			}
		} 
	}
}
```

動きはするが、コードチェックにかけると、以下のようなWARNINGが出てしまう。
```
Warning:(12, 9) 'withTestApplication(Application.() -> Unit, TestApplicationEngine.() -> R): R' is deprecated. Please use new `testApplication` API
```


### 修正後コード

上記PRの差分を見ながら、以下のように書き換えたら、同様のテストができた。
(よりよい方法がありましたら、ご教示いただけますと幸いです。)

```kotlin
package com.example

import com.example.plugins.configureRouting
import io.ktor.client.request.*
import io.ktor.client.statement.*
import io.ktor.http.*
import io.ktor.server.testing.*
import kotlin.test.Test
import kotlin.test.assertEquals

class ApplicationTest {

    @Test
    fun testRoot() {
        testApplication {
            application {
                configureRouting()
            }
            val client = createClient { expectSuccess = false }
            client.get("/").let {
                assertEquals(HttpStatusCode.OK, it.status)
                assertEquals("Hello World!", it.bodyAsText())
            }
        }
    }
}
```
Angular 次に覚えること

# はじめに

[「Angular はじめに覚えること」](https://qiita.com/thankkingdom/items/ca8acd2fd75c7778443d)の次に調べたコマンドをまとめます。

# Angularのバージョンアップ
Angular12から13にバージョンアップについてググったら、Angularアップデートガイドの存在があることを知りました。
https://update.angular.io/?v=12.0-13.0

npxコマンドを使ってアップデートを試したのですがエラーになったので、npmコマンドを実行

```bash
$ npm install @angular/core@13 @angular/cli@13
```

@angular/cli はバージョンアップするも他の@angularパッケージは更新されず。
AngularアップデートガイドのAngular Material という項目を選択すると ```ng update @angular/material``` が「アップデートの実施」にでたので試しに実行するとエラーが表示されました。

```bash
$ ng update @angular/animations
Repository is not clean. Please commit or stash any changes before updating.
```

メッセージ通りコミットすれば、コマンド実行できたのですが、コミットしないで実行できるオプションがあるそうです。

```bash
ng update @angular/cli@13 @angular/core@13 --allow-dirty
```

# 関連記事
* [Angular はじめに覚えること](https://qiita.com/thankkingdom/items/ca8acd2fd75c7778443d)
* [Angular フォーム (1)：基礎](https://qiita.com/thankkingdom/items/f8a670be6302471a198e)
* [Angular フォーム (2)：バリデーション](https://qiita.com/thankkingdom/items/6a32cc6edf2f431a8b43)

# References
* [Repository is not clean. Please commit or stash any changes before updating](https://qiita.com/NoOne/items/6385d2629096596b52a5)
独立と排反の違い

#●確率とは
＜試行＞（サイコロを振る、コインを投げる等）を行ったときの、
＜事象＞（１の目が出る、表が出る等）の起こる割合のこと

#●独立：お互いの結果が影響し合わない：試行(サイコロを振る)
独立の場合のみ P(A)×P(B)＝P(A∩B)が成り立つ
独立の場合のみ P(A|B)=P(A)⇨事象Bの影響を受けないから

#●排反：同時に起こらない事象：事象(1の目が出る)
排反の場合のみ　P(A)＋P(B)＝P(A∪B)が成り立つ
排反ではない時は P(A)＋P(B)-P(A∩B) ＝P(A∪B)が成り立つ
排反の場合のみP(A|B)=0 が成り立つ


※参考HP
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1368446618
【Project Euler】Problem 6: 2乗の和の差

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 ６． 2乗の和の差

原文 [Problem 6:  Sum square difference](https://projecteuler.net/problem=6)

**問題の要約：１から100までの2乗の和と和の2乗と差を求めよ**

比較的簡単な問題なので、pythonのmapとlambdaを使って短く書くと以下のようになります。

```python
nl = list(range(1,100+1))
print(f"Anwer : {sum(nl)**2-sum(map(lambda x: x**2, nl))}") 
```

またちょっと凝って以下の公式を使ってみると。1行で書くことも。

```math
(a+b+c)^2 - (a^2+b^2+c^2) \\
= 2ab+2bc+2ca 
```

```python
import itertools
print(f"Anwer : {sum([2*a*b for a,b in itertools.combinations(range(1,100+1),2) ])}")
```
vscode+php+xdebug3系(+typescript) [docker window10]

直近で書いたtypescriptをvscodeでデバッグする環境にphpのデバッグ環境(xdebug3系)を追加してみた。

##【ディレクトリ構造】

```
docker
│  docker-compose.yml 
├─html
│  │  xdebug.log
│  │  
│  ├─.vscode
│  │      launch.json
│  │      
│  └─section9-setup
│      │  index.html
│      │  index.php
│      │  tsconfig.json
│      ├─.vscode
│      │      launch.json   
│      ├─dist
│      │      index.js
│      │      index.js.map                        
│      └─src
│              index.ts
├─php
│      Dockerfile
│      php.ini
```

##docker-compose.yml

```docker-compose.yml
version: '3.8'
services:
  php:
    build: ./php/
    volumes:
      - ./php/php.ini:/usr/local/etc/php/php.ini
      - ./html:/var/www/html
    ports:
      - 8080:80
```

##Dockerfile

```dockerfile
FROM php:7.4-apache

# php.iniをdockerコンテナ内にコピって設置している
COPY php.ini /usr/local/etc/php/

# Xdebugのインストール(xdebug3系)
RUN pecl install xdebug \
&& docker-php-ext-enable xdebug

RUN apt-get -y update
RUN apt-get install -y \
    curl \
    gnupg
    
# nodeのインストール
RUN curl -fsSL https://deb.nodesource.com/setup_17.x | bash - && \
apt-get install nodejs

# npmのインストール
RUN npm install npm@latest -g
```

##php.ini

```php.ini
[xdebug]
xdebug.mode=debug
xdebug.start_with_request = yes
; host.docker.internalはdockerのhostマシンのIPを解決してくれる。
xdebug.client_host=host.docker.internal
xdebug.client_port=9003
xdebug.remote_log="/var/www/html/xdebug.log"
```

##index.php

```index.php
<?php
phpinfo();
```

##lanch.json

```lanch.json
    "version": "0.2.0",
    "configurations": [
        {
            //typescriptデバッグ用
            "type": "pwa-chrome",
            "request": "launch",
            "name": "debug typescript",
            "url": "http://localhost:8080/section9-setup/",
            "webRoot": "${workspaceFolder}",
        },
        {
            //phpデバッグ用
            "name": "debug php",
            "type": "php",
            "request": "launch",
            "port": 9003,//php.iniで設定したxdebug用のport番号
            "pathMappings": {
                // {docker上のdocument root}:{ローカルのdocument root} 
                "/var/www/html/section9-setup/":"${workspaceRoot}"
            }
        }
    ]
```

##index.phpにブレークポイントを置いて、デバッグする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495919/b7b163b4-a297-7bb4-52e1-d00f8b29a954.png)
MetaTrader5の最適化結果xmlファイルをDataFrameに変換する

#はじめに
PythonでMT5の最適化データを扱おうと思ったら最適化データがxmlファイルとして出てくる。しかもこのxmlファイル、構造が少々複雑で巷に出回っているxml→CSVなどの変換スクリプトがうまく動かない。じゃあこれに特化したPythonスクリプトを組んでやろうというのが本記事の目的。
Python3.7のGoogleColab環境で動かした。

#全体の流れ（という名の目次）
1. ソースコード全文
2. xmlファイルの構造
3. コード解説
3. 注意

#ソースコード全文

```python
import xml.etree.ElementTree as ET
import pandas as pd

#ファイルの読み込み
f = open('2021.08.01.xml', encoding='utf-8')
xml_data = f.read()
f.close()

root = ET.fromstring(xml_data)

all = []
col = []
for i in range(len(root[2][0])):
  for n in range(len(root[2][0][0])):
    col.append(root[2][0][i][n][0].text)
  all.append(col)
  col = []

#データフレームの生成と整形
df = pd.DataFrame(all)
df = df.set_axis(df.iloc[0,:], axis=1)
df = df.drop(0, axis=0)

print(df) #完成
```

#xmlファイルの構造
MT5から出力されるxmlは大体以下のような構造になってる。

```xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?mso-application progid="Excel.Sheet"?>
<Workbook>
  <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
    最適化するときの通貨ペアやらEAに関する情報やら
  </DocumentProperties>
  <Styles>
    書式設定
  </Styles>
  <Worksheet ss:Name="Tester Optimizator Results">
    <Table>
      <Row>
        <Cell><Data ss:Type="String">列の名前</Data></Cell>
        ...
        <Cell><Data ss:Type="String">列の名前</Data></Cell>
      </Row>
      <Row>
        <Cell><Data ss:Type="Number">行の数値や情報</Data></Cell>
        ...
        <Cell><Data ss:Type="Number">行の数値や情報</Data></Cell>
      </Row>
      ...
      </Row>
    </Table>
  </Worksheet>
</Workbook>
```

#コード解説
解説と言ってもやってることは構造解析したあとに添え字でアクセスしてるだけです。

```python
import xml.etree.ElementTree as ET
import pandas as pd
```

インポートしてる。ElementTreeでxmlの文構造を解析してそこから、PandasでDataFrameに変換する。

```python
#ファイルの読み込み
f = open('2021.08.01.xml', encoding='utf-8')
xml_data = f.read()
f.close()
```

xmlファイルの読み込み。open()で読み込み、xml_dataという名前の変数にstr型で格納、のちにCloseしてる。

```python
root = ET.fromstring(xml_data)
```
xmlファイルの構造分析、fromstring()でstr型の文章を構造解析している。
これで全ての要素にアクセスできるようになった。後述の通りrootに添え字をつけるとアクセスできる。
>【Python】XMLを解析・読み取りする(ElementTree)
>https://pg-chain.com/python-xml-elementtree

```python
all = []
col = []
for i in range(len(root[2][0])):
  for n in range(len(root[2][0][0])):
    col.append(root[2][0][i][n][0].text)
  all.append(col)
  col = []
```

DataFrameにする前にリスト配列にまとめる。for文で添え字の値を変更してそれぞれ取る。

```
root[0] → <DocumentProperties>
root[1] → <Styles>
root[2] → <Worksheet>
```

にアクセスできる。さらに深い場合でもどうように添え字を増やすことでアクセスできる。

#注意
Office仕様のxmlファイルであれば同様このコードでアクセスできるとは思われるけども、よく見かけるシンプルなxmlだと逆にうまくDataFrameに変更できない。
xmlからDataFrameに変えたいだけであればもっと良いコードが公開されてると思うよ。
あと、自分はPython初心者だから多分もっとスマートに書くことができると思うよ。
Chromeの検索履歴をSQLiteからCSVへ書き出す

# 環境
Windows 10 Home

# chromeのHistoryファイルはsqliteで扱える
場所はUsers/ユーザー名/AppData/Local/Google/Chrome/User Data/Default(もしくはProfile 番号)/History

# Windowsの場合wslから使う(Windowsのsqlite3導入がしんどい)
apt install sqlite3

# 確認
ヒストリーファイルはChrome使用中はロックされるらしいのでコピーをとってそれを使う
`sqlite3 History`
`.schema`でスキーマ確認が出来る。
`select カラム名 from テーブル名;`(普通のSQL)

# 書き出し
下記の記事を参考にして行いました。

https://qiita.com/qqhann/items/69ef194e3378bb68608a

書き出したらホストにファイル移して(`cp output.txt /mnt/c/path/to/dest/`)それをGoogleスプレッドシートでそのままインポートして見れる
年末Docker大掃除

# 全てのコンテナを削除する
`docker rm -f $(docker ps -a -q)`

# 使っていないイメージ(=全てのイメージ)を全て削除
`docker image prune`

# 使っていないその他のもの(キャッシュなど)を全て削除
`docker system prune`
bashのif文を書くときの注意点6選

# 完全に間違った書き方
```:hoge.sh
#!/bin/bash
hoge="hoge"
if [${hoge} eq "hoge"]
    echo "do something"
else if [${hoge} eq "fuga"]
    echo "do something else"
else
    echo "do nothing"
```

# 正しい書き方
```:hoge.sh
#!/bin/bash
hoge="hoge"
if [ "${hoge}" = "hoge" ] ; then
    echo "do something"
elif [ "${hoge}" = "fuga"] ; then
    echo "do something else"
else
    echo "do nothing"
fi
```

# 間違いポイント１  fiがない
これは基本だがたまにやる。

# 間違いポイント２  [はコマンド
[ はコマンドなので、前後にはスペースが必要

# 間違いポイント３  ;thenがない
たまに忘れる

# 間違いポイント４  elif
else ifではなくelif。そしてこちらも;thenが必要

# 間違いポイント５  eq
eqではなく-eqが正しいのと、これは数値比較に使うもので、文字列比較には-eqではなく=を使う。

# 間違いポイント６  ${hoge}
条件式で使う変数にはダブルクォーテーションをつける
変数が文字列と認識されず、"unary operator expected"というエラーが環境によっては出る。
firebase_dynamic_links 4.0.0で破壊的変更があった箇所の修正

## はじめに
個人アプリのライブラリのバージョンアップ対応しようと思い`flutter pub upgrade --major-versions`をしたところ、firebase_dynamic_linksの4.0.0で破壊的変更があり修正が必要だったので変更した箇所を記録しておきます。
2.0.7から4.0.3への変更で出たエラーです。

参考URL
https://firebase.flutter.dev/docs/dynamic-links/usage/#build-short-dynamic-link

## 変更箇所
### buildShortLinkメソッドの変更
以前までは、このような形で使用していたのですがエラーになっていました。

```dart
final parameters = DynamicLinkParameters(
...
    );

final dynamicUrl = await parameters.buildShortLink();
final shortUrl = dynamicUrl.shortUrl;
```

↓変更後

```dart
final dynamicUrl =
        await FirebaseDynamicLinks.instance.buildShortLink(parameters);
    final shortUrl = dynamicUrl.shortUrl;
```

このように変更になっています。


### onLinkの変更

以前までは以下のように実装していました。
onSuccessパラメーターに`PendingDynamicLinkData`が含まれるような形だったのですが、

```dart
FirebaseDynamicLinks.instance.onLink(
          onSuccess: (PendingDynamicLinkData? dynamicLink) async {
        final deepLink = dynamicLink?.link;
        ...
      });
```

変更後は`PendingDynamicLinkData`が含まれるStreamを返すように変更になっていました。

```dart
FirebaseDynamicLinks.instance.onLink.listen((dynamicLinkData) async {
        final deepLink = dynamicLinkData.link;
        ...
      });
```

## さいごに
他にも変更点がありましたが自分のアプリで該当するのはこの2つでした。
他の変更点に関して詳しくは公式ドキュメントを参照してみてください。
https://firebase.flutter.dev/docs/dynamic-links/usage/#build-short-dynamic-link