OmniAICreator/Qiita-1.07M huggingface dataset:
【エクセルVBA】ソート処理

# VBAにおけるソート
　・エクセルVBAにはソート機能がない。
　・ソート機能をするには
　　１．ソートデータをシートに転記する。
　　２．Range.Sortを使用する。
　　３．シートからソートデータを削除する。

# Range.Sortの使い方
```vb
  ' Key : 対象列, Order : Asc/Desc , Header, 1行スキップするか 
  tempSheet.Range("A1").CurrentRegion.Sort _
    Key1:=Range("A1"), _
    Order1:=xlDescending, _
    Header:=xlNo
```



# 参考リンク
https://excel-ubara.com/excelvba1/EXCELVBA388.html
OBJからgLTFとUSDZを生成してmodel-viewerで遊ぶ

[model-viewer](https://modelviewer.dev/)を使うとAndroidとiOSの双方で手軽にARを遊べます。
当初はBlenderでgLTF、UnityでUSDZを書き出していましたが、処理する数が多いので自動化したくなりました。

環境：Windows10 Pro（gLTF化まで）、MacOS 10.15（USDZ化）

**承前：** 私はWindowsメインのユーザーであり、あまりMacに詳しくないので、そのあたりの記述が曖昧です。大変申し訳ありません。確実さを増す情報がありましたらお知らせいただければ幸いです。

#まずOBJを作ります
OBJ（と、そのマテリアルを表現するMTLファイル）は中身は単純なテキストデータなので、PHPでチョロチョロと書きました。簡単です。OBJが作れればなんでもよいです。

##Node.jsが必要かもしれない
次で使用するobj2gltfを使用するのにNode.jsが必要です。
まだだったらインストールしておいてください。

#OBJからgLTFを作ります
gLTF生成には[obj2gltf](https://www.npmjs.com/package/obj2gltf)を使いました。
私の案件ではDBから読み込んだ情報で連続的に生成したかったので、OBJ生成からの流れで[AR Quick Lookで使える3Dモデル動的生成](https://sumanobe.imjp.co.jp/blog/2020/08/21/custom-ar-quick-look/)と同様に、PHPからexec()でコマンドをたたきます。

```
exec('obj2gltf -i XX.obj -o XX.gltf');
```

gLTFファイルができました。glb（バイナリ形式）でなくてgltf（テキスト形式）にしたのは意味があります。

##一部マテリアルを書き換えます
生成元のMTL内マテリアルに透過度テクスチャマップmap_dがある場合、gLTF化したときにそのマテリアル全体が半透明になってしまっています。
それでは困る場合、gLTFを書き出した直後に読み込んで無理やりそこを書き換えます。

```
// "alphaMode": "BLEND"を"MASK"に書き換える
// もうちょっと慎重に置換した方がいいかもしれません
$gltf_str = str_replace('BLEND', 'MASK', $gltf_str);
```

gLTF化する時にオプション指定できればこんなことをしなくても万事解決なのですが、今のところよくわかっていません。

#USDZを作らなくてもよくなっています
6/22追記：
**model-viewer 1.7.0より、ios-srcをオンザフライで生成するようになっているようです。素晴らしい……!!**　ここから下は、1.7.0以前を使わざるを得ない場合や、自動生成でうまく行かない場合に参照ください。

#gLTFからUSDZを作ります
ここからはMacOSでの作業になります。私のMacは9年前のやつでバリバリ3Dモデル案件をこなすには無理があるのでここだけの出番としていますが、最初からメインがMacOSの方は同様にexec()で流れでできると思います。

## MacOSを10.15にする
このあとインストールするアプリの導入条件なので、OSを10.15（Catalina）以上にします。

### もしかしたらXcodeが必要かもしれない
すでにインストールしていたので必須要件なのかわからないのですが、もし必要そうだったらインストールしてください。

## Reality ConverterとUSDZツールを入れる
[ARツール - 拡張現実 - Apple Developer](https://developer.apple.com/jp/augmented-reality/tools/)に行き、Reality ConverterとUSDZツールを入れます。
Reality Converterはもしかしたら要らないかもしれません。
USDZツールをインストールしたら、usdconvertへのパスを設定します。
ここのベストアンサーを見ながらそのままやりました。
[How to create USDZ file using Xcode converter?](https://stackoverflow.com/questions/50846627/how-to-create-usdz-file-using-xcode-converter)

## コマンド実行
gLTFを書き出すついでに以下を連続で処理するスクリプトを書き出して、一緒にMacに持っていって一括処理しました。

```
usdconvert XX.gltf XX.usdz -metersPerUnit 1;
```

gLTFとUSDZでは1Unitあたりの長さが違うようで、そのまま変換するとgLTFに比べてとてもとても小さいモデル（1/100スケールくらい）ができあがってしまいます。そこで-metersPerUnitオプションで指定してサイズを合わせています。

#できました
これでgLTFとUSDZができたので、model-viewerに入れてARで見ることができます。
どんどん遊びましょう！
プレイ中にFreezePositionとFreezeRotationのオンオフ

空中アスレチックを作成していて、回る物体を作りました。
回してPlayerを移動させるとPlayerが物体に当たったら下の床に食い込むんですね。
この原因はPlayerのRigidbodyのFreezePositionのY軸のチェックが入ってなかったからです。
では、チェックを入れるとどうなるのか？
現象は解消されました！
が。。。床から落とすと当然下に落ちません。。。
こういう場合、床に乗っている時はFreezePositionのY軸をオン、
床に乗っていない時はオフにしたい訳です。

まず、RigidbodyのFreezePositionとFreezeRotationを全てチェックを外します。
それからコードを書いていきます。

```C#
rb.constraints = RigidbodyConstraints.FreezeRotation;  //Rotationを全てオン
rb.constraints = RigidbodyConstraints.FreezePosition;  //Positionを全てオン
rb.constraints = RigidbodyConstraints.FreezeRotationX;  //RotationのXのみオン
rb.constraints = RigidbodyConstraints.FreezeRotationY;  //RotationのYのみオン
rb.constraints = RigidbodyConstraints.FreezeRotationZ;  //RotationのZのみオン
rb.constraints = RigidbodyConstraints.FreezePositionX;  //PositionのXのみオン
rb.constraints = RigidbodyConstraints.FreezePositionY;  //PositionのYのみオン
rb.constraints = RigidbodyConstraints.FreezePositionZ;  //PositionのZのみオン
```

※rbはRigidbodyの変数です。
では、私の場合はRotationは全てオン、PositionはY軸のみオンにしたいので。。。

```C#
rb.constraints = RigidbodyConstraints.FreezeRotation;  //Rotationを全てオン
rb.constraints = RigidbodyConstraints.FreezePositionY;  //PositionのYのみオン
```
こう書けば大丈夫！！
だと思いましたが、残念ながら違います…

```C#
rb.constraints = RigidbodyConstraints.FreezeRotation  //Rotationを全てオン
            | RigidbodyConstraints.FreezePositionY;  //PositionのYのみオン
```
こう書かないといけないのです。
1行目はセミコロンのみ書かなくて良くてrb.constraintsは書かなくていいです！！
これで大丈夫！！

ちなみに
私の場合は常にRotationは全てオン、
床に乗っている時だけPositionはY軸のみオンにしたいので。。。

```C#
//collisionに接触している場合はRotationは全てオン、PositionはY軸のみオンにする。
void OnCollisionStay(Collision collision)
    {
        rb.constraints = RigidbodyConstraints.FreezeRotation
            | RigidbodyConstraints.FreezePositionY;
    }
//collisionに接触してない時はPositionのY軸はオフ。Rotationは全てオンのまま。
    void OnCollisionExit()
    {
        rb.constraints = RigidbodyConstraints.FreezeRotation;
    }
```
これで最初は全てチェック外している状態ですが、Rotationは全て、PositionのY軸のみプレイしたらチェックが入り、床から落ちるとPositionのY軸のみチェックが外れます！！
残プロ　第-19回　~第12回から第18回のまとめ~

# 各回のまとめ

[第-13回](https://qiita.com/R1nY1x1/items/37df847ff4bd2c55e57e)(月) PILを利用した定期的な画面キャプチャ
[第-14回](https://qiita.com/R1nY1x1/items/26c056d2ef0a3848215c)(火) tkinter.ttk.treeviewを使用した表の作成
[第-15回](https://qiita.com/R1nY1x1/items/1525e615d26548404919)(水) cronで利用しやすいmainの書き方
[第-16回](https://qiita.com/R1nY1x1/items/6c7139fb0967408b16c0)(木) tkinterのウィジェット均等配置
[第-17回](https://qiita.com/R1nY1x1/items/c80b2208ac62525cc604)(金) tkinterへの画像表示
[第-18回](https://qiita.com/R1nY1x1/items/c95ae1baa157cc659d12)(土) csvエディターをtkinterで実装してみる

今週は主にtkinter周りについて実装を行いました．最終的にはflaskなりJavaScriptなりで実装するとしても，プロトタイプがあると設計が楽になると思ったので．


# 来週の予定

もともと自分にサーバー関係の知識が全く無く，想像以上に難しかったのでラズパイへの外部接続は成功しませんでした．来週はそういったことの解決をしていきます．今考えているのはAWSとFlaskを使う方法かなぁ...
railsチュートリアル　第５章

####テスト駆動開発
エラー

```
undefined local variable or method `static_pages_contact_url'
``` 
`static_pages_contact_url'にアクセスしようとしたけれどアクセスできない

ルーティングを直す。

```
ActionNotFound: The action 'contact' could not be found for StaticPagesController
```
StaticPagesControllerの中にcontactアクションがない
controllerを直す。

```
ActionController::MissingExactTemplate: StaticPagesController#contact is missing a template for request formats
```
contactアクションまで動いているが、contactのテンプレートを探しているけどない。

Viewを直す。

```
<Contact | Ruby on Rails Tutorial Sample App> expected but was
<Ruby on Rails Tutorial Sample App>
```
Sample Appは動けるけど追加タイトルが入っていない。

サイトのタイトルを追加する

URLをきれいにする方法
rootを作るとpathとurlができる
root_pathはドメイン名が入らない。
root_urlはドメイン名が入る。

####統合テスト
ルート
<% %>と<%= %>は違う
コードは縦横並べて書く。
WindowsのOpenCVでCUDAを使うためにビルドするメモ

https://twitter.com/yasnis/status/1406499958413426689
この辺に関連して苦戦した記録。あとでちゃんと書く(かも)。

- RTX 3070
- Game Ready Driver 461.40
- CUDA ToolKit 11.2
- cuDNN 
- OpenCV 4.5.1
- opencv_contrib
- Ninja


``` 
"C:/Program Files (x86)/Microsoft Visual Studio/2019/Community/VC/Auxiliary/Build/vcvars64.bat"
set "generator=Ninja"

set "openCvSource=C:/tools/opencv"
set "openCVExtraModules=C:/tools/opencv_contrib-4.5.1/modules"
set "openCvBuild=%openCvSource%/build"
set "buildType=Release"
set "pathToPythonDir=C:/Program Files/Python37"

cmake -B"%openCvBuild%/" -H"%openCvSource%/" -G"%generator%" ^
-DCMAKE_BUILD_TYPE=%buildType% ^
-DOPENCV_EXTRA_MODULES_PATH="%openCVExtraModules%/" ^
-DINSTALL_TESTS=ON -DINSTALL_C_EXAMPLES=ON -DBUILD_EXAMPLES=ON ^
-DBUILD_opencv_world=ON ^
-DWITH_CUDA=ON ^
-DCUDA_TOOLKIT_ROOT_DIR="C:/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v11.2" ^
-DCUDA_FAST_MATH=ON ^
-DWITH_CUBLAS=ON ^
-DCUDA_ARCH_PTX=8.6 ^
-DCUDA_ARCH_BIN=8.6 ^
-DWITH_NVCUVID=ON ^
-DWITH_OPENGL=ON ^
-DWITH_MFX=ON ^
-DBUILD_opencv_python3=ON ^
-DPYTHON3_INCLUDE_DIR="%pathToPythonDir%/include" ^
-DPYTHON3_LIBRARY="%pathToPythonDir%/libs/python37.lib" ^
-DPYTHON3_EXECUTABLE="%pathToPythonDir%/python.exe" ^
-DPYTHON3_NUMPY_INCLUDE_DIRS="%pathToPythonDir%/lib/site-packages/numpy/core/include" ^
-DPYTHON3_PACKAGES_PATH="%pathToPythonDir%/Lib/site-packages/" ^
-DOPENCV_SKIP_PYTHON_LOADER=ON
...
```

```
# OpenCVのビルド
cmake --build .

# OpenCVのインストール
cmake --build . --target install

```

この辺が参考になった
https://jamesbowley.co.uk/accelerate-opencv-4-5-0-on-windows-build-with-cuda-and-python-bindings/

https://dev.infohub.cc/build-opencv-430-with-cuda/
Python Challenge level 0

Pythonに慣れたいので暇をみてですが、[The python challenge](http://www.pythonchallenge.com/)を今更（１０年以上前のサイト！）ながら挑戦していこうと思います。

![logo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62130/c30d7e19-4663-3cc0-7193-e3a15a20f4b2.jpeg)

では早速、level 0
![calc.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62130/2b1468c3-945d-9acc-85d5-7614f53a59df.jpeg)

 なんだかよく分からない絵です（**追記：このファイルの名称がcalc.jpgで「計算せよ」というヒントになってます。コメントご指摘ありがとうございます。**）。2の３８乗（2^38）を計算せよということなのでしょうか。Pythonプロンプトで入力すればすぐに答えは出てきます。

```python:0.py
]>> 2**38
274877906944
```

したがって、次のレベルのアドレスは274877906944.htmlでしょう。

正解でした。
次→[The python challenge level1](http://www.pythonchallenge.com/pc/def/274877906944.html)
Vue2+Composition APIでVue Test Utilsのtrigger,emittedが機能しない時の対処方法

# 概要
今後はVue3を使うことが多くなると思いますが、Vue2 + Composition APIを使う環境で、
triggerを行った結果イベントがemitされることを `wrapper.emitted` で検証しようとしても、
戻り値がundefinedしか取れずうまく行かない事象が起きてハマっていました。


``` javascript
  const expectedId = 'test-id'
  const wrapper = mount(SideMenuItem, {
    propsData: {
      id: expectedId,
      title: 'テスト',
    },
  })

  await wrapper.find('[data-test="menu-item"]').trigger('click')

  expect(wrapper.emitted('click')[0][0]).toBe(expectedId)
  // wrapper.emitted('click') の戻り値がundefinedでうまく行かない。
  // もう少し調べると emitted() の戻り値が空のオブジェクトになっている。
```

# TL;DR
jest用に以下の設定ファイルを作成し、`jest.config.js` で指定する必要がありました。
Vue2ではComposition APIはプラグイン扱いなので、当然と言えば当然でした。

setup.js

``` javascript
import Vue from 'vue'
import CompositionApi from '@vue/composition-api'

Vue.use(CompositionApi)
```

jest.config.js

``` javascript
module.exports = {
  //中略
  setupFiles: ['./setup.js'],
}
```

# 詳細

## コンポーネント

```vue
<template>
  <div>
    <div
      @click="handleClick"
      data-test="menu-item"
    >
      {{ title }}
    </div>
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  props: {
    id: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
  },
  setup(props, context) {
    const handleClick = () => {
      context.emit('click', props.id)
    }

    return {
      handleClick,
    }
  },
})
</script>
```

## テスト

```js
  it('クリック時にイベントがemitされること', async () => {
    const expectedId = 'test-id'
    const wrapper = mount(SideMenuItem, {
      propsData: {
        id: expectedId,
        title: 'テスト',
      },
    })

    await wrapper.find('[data-test="menu-item"]').trigger('click')

    expect(wrapper.emitted('click')[0][0]).toBe(expectedId)
  })
```
SUSE Linuxのキーボードを日本語に変更

#目的
デフォルトの設定では、
「*」を押すと「"」
「+」を押すと「:」
など異なった記号が入力される。
日本語入力用キーボードに変更する。

#方法

##１．右下「Computer」から「Control Center」を起動し、「Keyboard」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685631/039f30de-bbab-07c5-64c0-b62e94f1a0e6.png)


##２．LayoutタブからAddを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685631/79261564-c166-fbd2-9fdb-e81139aa9899.png)

##３．By languageタブから　LanguageでJapaneseを選択し、Add


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685631/cb505090-f71e-4aac-fa37-36cfdbc58e71.png)


##４．追加されたJapanのLayoutを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685631/778b537f-7d39-d1b8-9633-1c21bc944aba.png)

以上
【Train with Spring】1. プロジェクトのセットアップ

# 初めに
この記事は主に同期に対してSpringを紹介するために作成されました。
なるべく楽をしながらSpringと仲良くなるのが目的ですので、網羅的な説明は極力避け、目的を達成する手段が幾つかある中から、その内の1つを学ぶ形式で進みます。
また、記事中には正確性に欠ける表現が出現しますが、これも上記と同じ理由です。

# 対象レベルと目標レベル
以下のように対象レベルと目標レベルを設定しています。

- 対象: JDBC・Servlet・JSPで簡単なWebアプリが作成できるがSpringは未経験の人
  - プログラミング初心者
  - Javaの基礎を習得済み
  - MySQLを標準設定でインストールできる
  - SQLで簡単なクエリを書いて実行できる
  - JDBCに触れた事がある
  - Servlet／JSPに触れた事がある
- 目標: Springで簡単なWebアプリが作成できる状態

# 環境
統合開発環境(IDE, Integrated Development Environtment)はEclipseを使います。
Eclipseの環境構築については解説が沢山あるので、まだEclipseを持っていない人はそれらを参考に準備してください。

- Pleiades All in One Eclipse 2021-03

# プロジェクトの作成
早速、Spring Initializrでプロジェクトのひな形を作成しましょう。

プロジェクトに必要な設定はURLに埋め込む事で既に完了しているので、以下のURLを開き`GENERATE`ボタンからプロジェクトのZIPファイルをダウンロードできます。

[https://start.spring.io/#!type=maven-project&language=java&platformVersion=2.5.1.RELEASE&packaging=war&jvmVersion=11&groupId=com.example&artifactId=train-with-spring&name=train-with-spring&description=Train%20with%20Spring&packageName=com.example.train-with-spring&dependencies=web,data-jpa,h2,thymeleaf,lombok,validation](https://start.spring.io/#!type=maven-project&language=java&platformVersion=2.5.1.RELEASE&packaging=war&jvmVersion=11&groupId=com.example&artifactId=train-with-spring&name=train-with-spring&description=Train%20with%20Spring&packageName=com.example.train-with-spring&dependencies=web,data-jpa,h2,thymeleaf,lombok,validation)

# 解凍
ダウンロードしたZIPファイルを`train-with-spring`ディレクトリに解凍すると以下のような形になります。

以降はこの`train-with-spring`ディレクトリを**プロジェクトルート**と呼びます。

```
train-with-spring
|-- .mvn/
|-- src/
|-- .gitignore
|-- HELP.md
|-- mvnw
|-- mnvw.cmd
|-- pom.xml
```

## Dependencies (依存関係)
ここは必要無ければ飛ばしてください。
簡単にこのプロジェクトで用いる依存関係について説明しておきます。
プロジェクトでの依存関係とは、プロジェクトを作る上で前提とするライブラリの事です。

- Spring Web
Webアプリを作るのに必要です。
- Spring Data JPA
Springでデータベースを扱う際に役に立ちます。
- H2 Database
MySQL等のDBMSが用意されていない環境でもこのチュートリアルを実行できるように、仮のデータベースを用意します。
- Thymeleaf
役割はJSPと全く同じです。テンプレートエンジンと呼ばれ、SpringではJSPよりも此方が推奨されています。
- Lombok
アノテーションライブラリという種別の物で、様々な機能を`@Getter`等と一言書くだけで自動実装してくれます。
- Validation
フォームに入力されたデータに制約(例えば文字数制限とか)を掛けるために使います。

# Eclipseにプロジェクトをインポート
Eclipseを開いて、上部メニューの`ファイル(F) ⇒ インポート(I)...`から、<br>
インポート・ウィザードで`Maven ⇒ 既存のMavenプロジェクト`を選び、<br>
出現したウィンドウで**ルート・ディレクトリー(I)**に先ほど解凍して作成したプロジェクトルートを指定して、完了ボタンを押します。

プロジェクトが完全に読み込まれると、Eclipseのパッケージ・エクスプローラーに次のように表示されます。

```
train-with-spring [boot]
|-- src/main/java
|-- src/main/resources
|-- src/test/java
|-- JRE システム・ライブラリー [JavaSE-11]
|-- Maven 依存関係
|-- bin
|-- src
|-- target
|-- HELP.md
|-- mvnw
|-- mvnw.cmd
|-- pom.xml
```

# 実行
これでアプリケーションを起動できるようになったので、
プロジェクト名を右クリックして出て来るメニューから`実行 ⇒ Spring Boot アプリケーション`を選んで実行してください。

初期設定では[http://localhost:8080](http://localhost:8080)で立ち上がったWebアプリに接続可能です！

## Whitelabel Error Page
現在はテンプレートもコントローラーも何も無いアプリケーションなので、接続してもページが見つからない(`404 Not Found`)事を示すエラーページが表示されます。

# まとめ
今回はプロジェクトのセットアップについて学びました。
以降は今回作ったプロジェクトを基準にSpringの基本を学んでいきます。

次回は画面遷移について学びます。
[AWS Amplify DataStore] [iOS] "Cannot find 'AmplifyModels' in scope" の原因が Target Membership の設定だった

[AWS Amplify DataStore の iOS アプリ向けチュートリアル](https://docs.amplify.aws/lib/datastore/getting-started/q/platform/ios)をしていた際、
[Initialize Amplify DataStore](https://docs.amplify.aws/lib/datastore/getting-started/q/platform/ios#initialize-amplify-datastore) で次のコードを ``AppDelegates.swift`` に追加した時、
``let dataStorePlugin = AWSDataStorePlugin(modelRegistration: AmplifyModels())``の部分で 
``Cannot find 'AmplifyModels' in scope`` というエラーが表示されました。

```swift:swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    do {
        // AmplifyModels is generated in the previous step
        let dataStorePlugin = AWSDataStorePlugin(modelRegistration: AmplifyModels()) // ←　ここでエラー （ Cannot find 'AmplifyModels' in scope　）
        try Amplify.add(plugin: dataStorePlugin)
        try Amplify.configure()
        print("Amplify configured with DataStore plugin")
    } catch {
        print("Failed to initialize Amplify with \(error)")
        return false
    }

    return true
}
```

原因は、 AmplifyModels クラスが定義されている ``AmplifyModels.swift`` の Target Membership が ``[アプリ名]UITest`` のみだったためでした。

``amplify codegen models`` コマンドでこのファイルをプロジェクトに追加した際、 ``[アプリ名]UITest`` のみが Target Membership に設定されていたようです。

# バージョン
xcode: 12.5
amplify cli: 5.0.1
【備忘録】【Rails】provideとyieldの関係

viewでprovideヘルパーを利用することで、ここのテンプレートからレイアウト側にタイトルを引き渡すことができる。

```ruby:app/views/devise/registrations/new.html.erb
<% provide(:title, "新規登録") %>

<h2 class="contents" >新規登録</h2>

<div class="center">

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <div class="actions">
    <%= f.submit "新規登録する" %>
  </div>
<% end %>

</div>
```

レイアウト側からは、yield メソッドを利用することで呼び出せる。

```ruby:layouts/application.html.erb
<!DOCTYPE html>
<html>
 <head>
   <title><%= page_title(yield(:title)) %></title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
   <%= stylesheet_link_tag    'application', media: 'all' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
 </head>
```
AWS PollyをLaravelで利用したよ

#はじめに
Amazon PollyはAWSが提供する深層学習を利用してリアルな音声に変換できるサービスです。

ブラウザの読み上げ機能よりクオリティの高い音声を実現したいなどテキストから音声ファイル（mp3）に変換したい時に活躍するのではないでしょうか。

そんな、AWS Pollyをハッカソンで利用したので備忘録的な感じで書いていきます。Pythonでの記事はたくさん見かけたのですがPHPはあまり見つからなかったので参考になればと思います。

AWSのサンプルコードがありますのでしておきます。[PHP Code sample for Amazon Polly](https://docs.aws.amazon.com/code-samples/latest/catalog/code-catalog-php-example_code-polly.html)

※もし、利用方法などに間違いなどがあればコメントください。

#実装
今回はAPIを利用し、下記の工程の流れとなります。
1.テキストをPollyに対してリクエストを送る
2.Pollyで作成したmp3ファイルをAWS S3に保存する。
3.S3に保存されたmp3ファイルのファイルパスをLaravelで取得する。
4.取得した、ファイルパスを保存する。

###パッケージをインストールする
必要なパッケージをインストールする

```
composer require aws/aws-sdk-php
```
```php:
<?php
use Aws\Exception\AwsException;
use Aws\Sdk;
use Aws\Polly\PollyClient;
use App\Models\s3_file_path;

public function index(){
    $config = [
        'version' => 'latest',
        'region' => 'ap-northeast-1',
        'credentials' => [
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY')
        ]
    ];
    try {
       $client = new PollyClient($config);                    
       $result = $client->startSpeechSynthesisTask([
           'Text' => '再生するテキストです。',
           'OutputFormat' => 'mp3',
           'OutputS3BucketName' => 'bucket-name',
           'VoiceId' => 'Mizuki',
       ]);
       $s3_file_path = $result['SynthesisTask']['TaskId'];
       s3_file_path::create([
           's3_file_path'=>$s3_file_path
       ]);
     }catch (AwsException $e) {
        echo $e->getMessage();
        echo "\n";
     }
}
```
簡単なプログラムの解説

```php:
$client = new PollyClient($config);                    
$result = $client->startSpeechSynthesisTask([
    'Text' => '再生するテキストです。',
    'OutputFormat' => 'mp3',
    'OutputS3BucketName' => 'bucket-name',
    'VoiceId' => 'Mizuki',
]);
$s3_file_path = $result['SynthesisTask']['TaskId'];
s3_file_path::create([
    's3_file_path'=>$s3_file_path
]);
```
1.new PollyClientにてインスタンスを生成する。
2.テキストや、アウトプット形式、保存するバケット、読み上げる声優を指定する。
3.$result['SynthesisTask']['TaskId']にS3のファイルパスが保存されているので受け取る。
4.DBにファイルパスを保存する。


###補足
パブリックにアクセスを受け付ける場合はS３の設定にてパブリックに公開の状態にすること。
現在の日本語の声優はMizukiさんとtakumiさんが存在するようです。
Android Studio + kotlin + SQLiteで音符フラッシュカードアプリを作る　⑪当日日付データ取得

#１．今回のテーマ

前回はインテントの復習だけの軽い記事でした。
今回は、当日日付を取得して画面に表示する処理を実装していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619303/a8362035-9418-f271-672b-95d1585b13c5.png)

形式は***yyyy/mm/dd***です。


#２．実装内容

```kotlin:ResultActivity.kt

        //日付取得
        val date = Date()
        //日付の形式を定義
        val df = SimpleDateFormat("yyyy/MM/dd")

        //日付表示
        val tvDate = findViewById<TextView>(R.id.tvDate)
        tvDate.setText(df.format(date))

```

現在日付・時刻はDate()で取得できます。簡単ですね。

```kotlin
   val date = Date()
```

これでdateという変数に日付・時刻データが格納されました。


次に、取得した日付・時刻データの形式を、**SimpleDateFormat()***を使って指定します。
今回は「**yyyy/mm/dd***」で表示したかったので、引数に**yyyy/mm/dd**を指定します。

```kotlin
   val df = SimpleDateFormat("yyyy/mm/dd")
```
dfという変数で、SimpleDateFormatクラスのオブジェクトを生成します。

次に日付を設定する画面項目を取得します。

```kotlin
   val tvDate = findViewById<TextView>(R.id.tvDate)
```

取得したtvDateのテキストをsetText()で設定します。
Data()で取得したデータを、SimpleDateFormatのformat()メソッドに渡すことで形式を変換します。

```kotlin
   tvDate.setText(df.format(date))
```

今回は短いですが以上です。
次回は、Databaseにデータを登録する処理について説明します。


[①概要](https://qiita.com/tomohiro-yamashita-5664/items/e87f90fef9cf34faf9bf)
[②画面デザイン～トップ画面（Constraint Layout）～](https://qiita.com/tomohiro-yamashita-5664/items/72a529e12f292a8e1538)
[③画面デザイン～ゲーム画面（Linear Layout）～](https://qiita.com/tomohiro-yamashita-5664/items/9674fa7c1d0cc2de1c40)
[④画面デザイン～結果画面（Linear Layoutその2）～](https://qiita.com/tomohiro-yamashita-5664/items/08f99be14d2ac2254634)
[⑤トップ画面からの遷移（インテント(putExtra)）](https://qiita.com/tomohiro-yamashita-5664/items/ae86d6273cfc8c13b482)
[⑥トップ画面から引き継いだデータ表示（インテント(getExtra)）](https://qiita.com/tomohiro-yamashita-5664/items/bf50791fa5355818d7fb)
[⑦問題出題（ロジック実装）](https://qiita.com/tomohiro-yamashita-5664/items/a67eeb3fe9cc63eb1c65)
[⑧回答ボタン押下（効果音再生（MediaPlayer、正誤判定、次の問題出題）](https://qiita.com/tomohiro-yamashita-5664/items/8b032855a9377ba9897e)
[⑨タイムカウンターの実装（handler）](https://qiita.com/tomohiro-yamashita-5664/items/8f5633e68f0519d6841f)
[⑩ゲーム画面から引き継いだゲーム結果表示（インテント）](https://qiita.com/tomohiro-yamashita-5664/items/0e208a3c1a75c5b13376)
[⑪当日日付データ取得（本記事）](https://qiita.com/tomohiro-yamashita-5664/items/59513080e5d5f419d6af)
[⑫DB保存（SQLite、Insert）](https://qiita.com/tomohiro-yamashita-5664/items/5a0d967f2e42aa90ee24)
⑬もう一度、トップ画面へ戻るボタン（インテント）
⑭ランキング表示（SQLite、Select）
⑮実機でのテスト
⑯Google Playで公開
Clean Architecture完全に理解したので、二酸化炭素濃度システムで再現してみた

## 所感など
先日CleanArchitectureを読んで[感想をまとめました](https://qiita.com/kterui9019/items/ea649c38e91a950e300b)。
なんとなく書いてある意味は伝わったし、完全に理解したと確信したので「いっちょ趣味アプリでも作ってみますか〜ｗ」と軽い気持ちでアプリを作ってみました。
やはり手を動かしてみると気づくことが多く、それこそ途中で「CleanArcitectureなにもわからない」状態に陥ったりもしました
何度か立ち止まって書籍を読み返したりして、一度読んだだけでは理解できていなかった部分を掘り下げることができました。しんどいですけど、やっぱり読みっぱなしじゃなくアウトプットすることは大切ですね。（自戒

## 成果物
MH-Z19C(二酸化炭素濃度センサー)を使って部屋の二酸化炭素濃度を測定するCUIアプリです。
[co2checker](https://github.com/kterui9019/co2checker)

ちなみにラズパイZeroで作ったのですが、本筋と外れるので結線や環境構築は割愛します。知りたい方がいたらコメントください。

### ディレクトリ構成
```
src/
　├ main
　├ domain/ ・・・図でいうところの「Entity」　。システムの登場人物たち。
　├ driver/　 ・・・図で言うところの「Gateway」。低レイヤ層との通信を担う。
　├ handler/ ・・・図で言うところの「Controller」。
　└ usecase/ ・・・そのままUsecase層

```

### クラス図
Pythonなので厳密には抽象クラスはないですが、依存性の逆転箇所がわかりやすいのでAbstract扱いにしています
![](http://www.plantuml.com/plantuml/png/TP0n3u8m48Nt_Wh-G0VTJ1mmBWpeGbnSp4aF92ajwPMu-ECbqGEQ2oDVtxlt7Zb5277ihQej46Ldlo_06OjX0JV26WZLGfI29yK0TSn-xFJ_B7tRpjPg20YcUY4otx9TVUoQRZQMdKD6cvuA7NbsN8h7VNTGQccR7RMssCJrehJbf1W7lHwOrjbMSBXy5n4VRVpRQValP1Xha_aYaKMhnLEDf0IZv0v3KOHV-6AEpeoz_G80)

## 迷ったポイントなど
まずそこまでpython慣れてないのでその辺は辛かったのですが、もう少しアーキテクチャ寄りのはなしなど。

### ユースケースって、何？
途中ゲシュタルト崩壊するくらい悩みました。
具体的には「センサーで二酸化炭素濃度を測り、1001以上ならLINEで通知する」を実装するときに、どこまでを１ユースケースにするかを迷いました。
「測定する」と「LINEで通知する」の２つに分けるか、「測定して濃度次第では通知する」の１つにまとめるかの２パターンが考えられましたが、今回は後者を選択しました。
前者は測定結果を見て通知するかどうか判断するのがController層になってしまうのですが、Entityが持つメソッドを叩くのにふさわしいのはUsecaseだと判断したので、後者を選びました。
とはいえ、今回DTOを使わなかったのでこういう形になったのかとも思います。仮にプレーンなオブジェクトをControllerが扱えるなら、やはりユースケースを２つに分ける選択肢もアリだったんじゃないかと思います。

### DTOって本当に要る？
いや要るんですが、今回はどう考えても冗長なので作りませんでした。
書籍では「レイヤをまたぐオブジェクトと、ドメイン知識を表すオブジェクトは変更される理由が異なる。なのでDTOでEntityをシステム都合の変更から守りましょう」という趣旨のことが書かれていたと思います。とはいえ今回の`Co2`エンティティは`value`と`is_dangerous()`メソッドしか持たないミニマムなクラスです。
`Co2NotifierCommand`みたいなDTOクラスを作ったところで`value`くらいしか渡すものがないので今回はわざわざDTOを作るのは控えました。
でもお仕事で作るようなシステムなら絶対最初から作っておいたほうがいいんでしょうね・・・。

### Boundaryどこに置くか問題
依存性の逆転を担う抽象クラスですが、ディレクトリ構成的にどこに置くかは悩みました。
UseCase層に置くと境界線が際立つのですが、いまいちパッとしないんですよね・・・。Usecaseディレクトリにユースケース以外のクラスが置いてあるのが少し気持ち悪いと言うか・・・。
ということで今回は実装クラスとまとめてGateway層の「Driver」ディレクトリに突っ込んでおきました。
この辺も正解はないところだと思いますが…。皆さんは抽象はどこに置いているんでしょう？

## 作ってわかるイケてるポイント

### 単体テストの書きやすさ
依存がコントロールされているため、基本的に1つ下の（内側の）レイヤだけをモックするだけでテストができるため、考えるコストが少ないです。

### 差替可能
こういったシステムだと効果が実感しやすいと思いました。
例えば二酸化炭素濃度を測定するセンサーを変えたとしても、AbstractSensorクラスさえ実装すればこれまでのクラス群がそのまま使えます。
WebアプリでUIやDBを差し替えることはそうそうないと思いますが、IoTといった世界では差し替え可能のアーキテクチャは強みだと感じます。

## このあと
次はフロント側も作ってみたいです。
Reactでクリーンアーキテクチャとか本当にできるのか・・・？と懐疑的なので、それらしい書籍などを見つけて実装してみたいなと思っています。
双方向性マップ

この記事では、Androidで双方向性マップを使う方法について記載しています。(Javaでも使えます)

### 双方向性マップ
双方向性マップは、「keyを指定してvalueを取得する」だけでなく、「valueを指定してkeyを取得する」ことが出来ます。

### 使い方
双方向性マップのライブラリはいくつかあるようですが、ここではcom.google.guavaのBiMapを使います。
ライブラリは、MavenまたはGradleで依存関係を指定することで使用できます。

```
dependencies {
  implementation("com.google.guava:guava:30.1.1-android")
  // Javaの場合は 30.1.1-jre
}
```

「valueを指定してkeyを取得する」場合は、inverseメソッドをコールすることで、keyとvalueが反転したMapが取得できます。

```kotlin
    val userId: BiMap<Int, String> = HashBiMap.create()
    userId.put(1, "Taro")
    // keyとvalueが反転したMapを取得
    val index = userId.inverse()["Taro"]
```

### 参考

https://guava.dev/releases/snapshot/api/docs/com/google/common/collect/BiMap.html

https://github.com/google/guava#adding-guava-to-your-build
間違えてGitHubにpushしてしまった時の対処法

# 間違えてGitHubにpushしてしまった時の対処法。

間違えてGitHubにpushしてしまった！

そんな時はターミナルで以下の４つをやればいいだけです。

（１）git branch
（２）git reflog
（３）git reset --hard （２）で取得した値
（４）git push -f


（１）ブランチ一覧を表示
（２）過去にコミットした履歴を見る
（３）コミットを取り消すことができる（自分のPC上のデータを削除）
（４）GitHub上のデータを削除


## 感想

今までGItHubDesktopしか使っていませんでした。
しかし、GItHubDesktopだけではできることが限られてしまいます。
なので、今後はいろいろなコマンドも少しずつ覚えていくことにします。
「TestTube」にようこそ

[TestTube](https://github.com/fixrb/test_tube)を紹介したい 🧪

この簡単なテストツールは[Spectus](https://github.com/fixrb/spectus/)のエンジンです。

![実験コード](https://github.com/fixrb/test_tube/raw/v1.1.0/img/social-media-preview.png)

使用するには、マッチャーが必要です。
例えば、[Matchi](https://github.com/fixrb/matchi/)にマッチャーのコレクションがあります。
以下のようなマッチャーを使います：

```ruby
class BeTheAnswer
  def match?
    42.equal?(yield)
  end
end
```

そして、このブロックを定義します：

```ruby
block_of_code = -> { "101010".to_i(2) }
```

では、結果を見てみましょう：

```ruby
require "test_tube"
experiment = TestTube.invoke(
  matcher: BeTheAnswer.new,
  negate:  false,
  &block_of_code
)
experiment.actual # => 42
experiment.error  # => nil
experiment.got    # => true
```

成功！素晴らしいですね！
ご覧いただき、ありがとうございます。
ubuntu20.04 の eclipse に preiades を導入して日本語化し、github のリポジトリから開発ソースを読み取るように設定する。

# はじめに
開発のための個人的な備忘録です。各先達の知恵を参照した内容です。

# eclipse のインストールと preiades の導入（日本語化）
### 環境
    - ubuntu20.04
    - java openjdk-11
    - eclipse IED for Enterprise Java and Web developpers 2021-06
    - pleiades 2021年６月最新

### 参考情報

   ubuntu に eclipse をインストールする
      https://www.khstasaba.com/?p=1049

   【Eclipse】GitHubと連携する方法について解説する
   https://miya-system-works.com/blog/detail/100

### 作業手順
#### eclipse　セットアップ
   [eclipseのダウンロードページ](https://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/2021-06/R/eclipse-jee-2021-06-R-linux-gtk-x86_64.tar.gz&mirror_id=1287)から、パッケージ版をダウンロードする。
   実行フォルダ配置位置を決め、tar -zxf で解凍でよい。

#### pleiades インストール
  [pleiades](https://ftp.jaist.ac.jp/pub/mergedoc/pleiades/build/stable/pleiades.zip)をダウンロードして、unzipする。unzip先の一時フォルダを作成しておくほうがよい。一時フォルダ内に解凍される、featuresフォルダの中身を elipse のfeatures フォルダへ、 pluginsフォルダの中身を eclipse の plugins フォルダへ移動（またはコピー）する。そして、eclipseフォルダにある <strong> eclipse.ini </strong> に以下を追記。

    -Xverify:none
    -javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
　
#### eclipse 起動
eclipseインストールフォルダにある eclipse アイコンをダブルクリックで起動する。日本語化されていることを確認できる。


#### eclipse から　github リポジトリを参照
Eclipseのメニューで『ウィンドウ⇒パースペクティブ⇒パースペクティブを開く⇒その他』を選択、Gitのパースペクティブを「開く」。以降は、eclipse IDEの右上の「git」ボタンでパースペクティブを切り替えられる。
Gitのパースペクティブの左ペインのメニューで、「Gitリポジトリのクローン」を選択。
![Screenshot from 2021-06-20 18-02-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699890/2146431d-e574-4d16-b4a0-c1b77a4abaf7.png)
現れたウィンドウで、ロケーションや認証情報を入力する。
![Screenshot from 2021-06-20 18-05-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699890/c5c7e7d1-37f6-0114-7421-2854fb4a1cb7.png)
次のウィンドウでは、ディレクトリを指定し、「完了」を押す。するとウィンドウが閉じる。

ここで、しばらく待つ。画面のみぎしたを見ると、"githubから複製中"と表示されている。
![Screenshot from 2021-06-20 18-23-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699890/4153d20b-5eb9-60c6-6b8c-77681703bb0f.png)
（今回は、数百Mバイトのプロジェクトで、20分ほどかかった。）複製が終わると、左ペインに複製（クローン）されたリポジトリの情報が表示される。

#### githubリポジトリクローンからプロジェクト参照
クローンされたリポジトリ名を右クリックしてメニューを開き、「プロジェクトをインポート」を選択。表示されたウィンドウは特に何もせずに完了を押してよいらしい。

#### eclipse gitパースペクティブ　左ペイン（プロジェクトエクスプローラ）の Working Tree から編集対象ファイルを選択し、編集する

#### リポジトリに　コミット・プッシュする
プロジェクト・エクスプローラーのプロジェクト名を『右クリッ⇒チーム⇒コミット』という様に選択して『Gitステージング』のメニューを開く。もしくは、Eclipseの下部のタブに表示される「Gitステージング」のパネルを開く。「Git ステージング」パネルにて、ステージングするファイルを選択。コミットメッセージを記入して「コミット」ボタンを押す。

# まとめ
以上、セットアップからgit コミット・プッシュまで。
AWS Amplify - 最速でログイン機能を実装してみた　① AWS Amplifyとは?

![amplify.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1668464/e3d94626-f495-a2d8-f79a-669a668a0a91.jpeg)



今回は、巷で話題になっているAWS製mBaaSを使って最速でログイン機能を実装してみました。
便利な世の中になったなぁというのが一番の感想ですが、とにかくアプリを最速でリリースしたい方にすごくおすすめのサービスだなと思いました。

[チュートリアル動画はこちら](https://www.udemy.com/course/aws-amplify-react-authentication/?referralCode=6C9136CDF443E05B3A40)

[元記事はこちら](https://chott-works.com/tips/AWS/AmplifyAuth)

##AWS Amplifyとは?

AWSを使用したスケーラブルなWeb・モバイルアプリ開発のためのmBaaS(Mobile backend as a Service)なフレームワークです。
Amplifyを用いることで、複雑なバックエンドの構築、アプリケーションとの統合を簡略化し、 バックエンドとインフラをAWSにサーバーレスで任せることができます。また、CI/CD環境の構築も自動で構築してくれまので、 インフラ構築からデプロイまでシームレスに任せることができます。 特に、React, Vue, AngularなどでのSPAや、Gatsby, NextJS、 NuxtJSなどの静的サイトジェネレーターを用いたWebアプリケーション開発の事例がたくさんあります。 

##AWS Amplifyの3つの構成要素
- Amplify CLI
- Amplify Framework
- Amplify Console

#####Amplify CLI
Amplify CLI は、AWS CloudFormationやInfrastructure as Code の仕組みを利用することなく、コマンドラインから対話的に質問に回答するだけで、バックエンドを構築することができるインターフェースです。 また、Amplify CLIは、バックエンドとの連携に必要な設定ファイルやソースコードを自動で 生成します。 Amplify CLIによって、下記機能を構築することができます。
- 認証機能
- バックエンドAPI
- Websocketを使ったリアルタイム通信
- ホスティング

#####Amplify Framework
Amplify Framreworkは、クライアントがAWSのバックエンドと連携するための処理を数行で実装できるようにするフレームワークです。
- ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク
- 数行でバックエンドと連携するための処理を実装
- iOS、Android、Web(React/Vue/Angular)、React Native
- それぞれに最適化されたライブラリ、UIコンポーネントを提供

#####Amplify Console
サーバーレスウェブアプリケーションのデプロイ・ホスティングをするための サービス
- SPA （シングルページアプリケーション）や静的サイトのホスティング
- CI/CD の運用を自動化
- GithubやAWS CodeCommitなどのソースリポジトリと連携
- ブランチごとにテスト環境を自動で構築
- 特定の環境へのBasic認証の付与

##AWS Amplifyのメリット
- バックエンドをすばやく構成
- 最速でサービスをリリースできる
- 柔軟性が高い
- フロントエンドとのシームレスな接続
- 数クリックでデプロイ

#####バックエンドをすばやく構成
直観的なワークフローで、認証、ストレージ、データを含む、スケーラブルな バックエンドを素早くセットアップできます。
#####最速でサービスをリリースできる
本質的な開発に注力することが可能
#####柔軟性が高い
Amplify consoleを使うと、テスト環境を自動で構築したり、認証を付与するといった、柔軟な開発フローの設計ができます
#####フロントエンドとのシームレスな接続
数行のコードで、アプリケーションを、新規もしくは既存のAWS リソースと接続可能
#####数クリックでデプロイ
Amplify コンソールを使用すると、数クリックでレポジトリと接続しアプリケーションをホスティングできます。
herokuデプロイ後のエラー　uninitialized constant ApplicationCable::ActionCable (NameError)

<h2>やっとherokuにデプロイできたのに</h2>
数々のエラーを解決してやっとの思いでherokuへデプロイ後
uninitialized constant ApplicationCable::ActionCable (NameError)
こんなエラーメッセージが出てきたので解決方法を書き留めておきます。

<h2>heroku openするとエラー画面が</h2>
![スクリーンショット 2021-06-20 18.54.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1194218/5d4b280f-14d2-4f76-aa33-ba7c27e56b1d.png)
ここに書いてあることを簡単に訳すと
「アプリケーションでエラーが出たので、次のコマンドでログを確認してください。」ということです。

```
$ heroku logs --tail
```


ちなみに翻訳はこちらのDeepLがおすすめです！
<a href="https://www.deepl.com/ja/home">DeepLトップページ</a>
「Google翻訳」よりも制度の高い日本語に翻訳してくれます。

そこで上記のコマンドを打ってログを見てみました。
<h2>ログを眺めてみる</h2>
今回はログの中にこんなエラーが表示されていました。
<br>



```
2021-06-20T11:17:05.170313+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=obscure-fjord-38948.herokuapp.com request_id=b4d66ca2-5f24-4cb8-996b-4b386d3b83fa fwd="126.255.41.232" dyno= connect= service= status=503 bytes= protocol=https
```
これを調べてみたところ「アプリケーションが起動できず、ページを表示できない」とのこと。
<a href="https://devcenter.heroku.com/ja/articles/error-codes">参考 Heroku Dev Center</a>

そこで起動できない原因を探すためにログを見ると下記エラーが見つかりました。

```
/app/app/channels/application_cable/channel.rb:2:in `<module:ApplicationCable>': uninitialized constant ApplicationCable::ActionCable (NameError)
```

このエラーを元に検索し、下記を追加することで解決です。

```config/application.rb
require "action_cable"
```

<a href="https://github.com/rails/rails/issues/23183">[Rails-5] uninitialized constant ApplicationCable::ActionCable #23183</a>
<h2>おわりに</h2>
最近エラー続きでしたが、エラー文やログをきちんと見るのって大切なんだなと実感しています。
書き忘れていましたが、herokuへデプロイ後すぐに

```
$ heroku run rails db:migrate
```

こちらを行っています。
以上、herokuデプロイ後のエラーを解決した方法でした。
LinuxでMySQLをアップデートする方法


#目次
[1.MySQLのバージョン確認](#1-インストールされているmysqlのバージョン確認)
[2.MySQL停止](#2-mysql停止)
[3.MySQLをアンインストールする](#3-mysqlをアンインストールする)
[4.MySQLのインストール](#4-mysqlのインストール)
[5.終わりに](#5-終わりに)


#1. インストールされているMySQLのバージョン確認

cloud9は、デフォルトでMySQLがインストールされています。
バージョン確認をすると5.5系がインストールされています。
```mysql --version
```
こちらを5.7系にアップデートしていきます。

#2. MySQL停止
まずはSQLを停止させます。
```sudo service mysqld stop
```
#3. MySQLをアンインストールする
``` sudo yum -y remove mysql-config mysql55-server mysql55-libs mysql55
```
5.5系のSQLをアンインストールする為、上記の数値は```55```となっています。

#4. MySQLのインストール
```sudo yum -y install mysql57-server mysql57
```
インストールしたいバージョンの数値を指定してください。
今回は5.7系をインストールする為```57```としています。

#5. 終わりに
こちらでLinuxでMysqlのアップデートが完了しましたが最後に確認をしましょう。
```mysql --version
```
#最後に
以上となります。不明点や間違っている点がありましたらコメントでお知らせください。
ありがとうございました。
【学習メモ】cakePHP3 ＃3

《Formヘルパー》
FormHelperというクラスとして用意されている。
これはビューテンプレート内では$this->Formという変数にインスタンスが用意されている。
例
<?=$this->Form->create(null,['type'=>'post', 'url'=>['controller'=>'Hello', 'action'=>'index']]) ?>  --⓵フォームの開始タグを生成する。
<?=$this->Form->text("HelloForm.text1")?>　--⓶テキストボックスが作られる
<?=$this->Form->submit("送信") ?>          --⓷送信ボタンが作られる
<?=$this->Form->end(); ?>　--⓸

⓵：create(モデル名,属性指定);
引数には値を保管する先となるモデル名と、タグに指定する各種の属性（連想配列）を指定して渡す。
⓶：text(名前,属性指定);
引数にはname属性で指定される名前を渡します。この名前は、"モデル名.フィールド名"という形で通常は記述します。ここでは特にモデルを指定していないため、送信先のアクションを指定して"HelloForm.text1"と指定してあります。
送信された値はこの場合、$data[モデル名][フィールド名]という形で連想配列に保管されます。
また、タグに各種の属性を指定したい場合は、第２引数に指定することが可能です。この値は属性名をキーとする連想配列で指定します。
⓷submit(キャプション,属性指定);
⓸フォームの終了タグを生成します(</form>タグ)。

《送信されたか確認する方法》
$this->request->isPost()
$this->request->isGet()
値の取り出し方の例は
foreach($this->request->data['HelloForm'] as $key =>$val){
}

※上記のformヘルパーが生成される前のHTMLコード
<form method="post" accept-charset="utf-8" action="/hello">
 <div style="display:none;">
  <input type="hidden" name="_method" value="POST"/>
 </div>
 <input type="text" name="HelloForm[text1]"/>
 <div class="submit">
  <input type="submit" value="送信"/>
 </div>
</form>

《チェックボックスの生成》
checkbox(名前,属性指定);
※チェックボックスそのものを生成することはできますが、ラベルは生成されないので用意が必要。
label(ラベルをつける項目の名前)

《ラジオボタンの生成》
radio(名前, ラジオボタン名の配列, 属性設定);
※第3引数を「['label'=>true, 'value'=>'Linux']」にするとLinuxというvalueの項目が選択された状態で表示される。

《選択リストの生成》
select(名前, 項目の配列, 属性の配列);
例
<?=$this->Form->create(null,['type'=>'post', 'url'=>['action'=>'index']]) ?>
<?=$this->Form->radio("HelloForm.radio1", 
	[
		['text'=>'ウインドウズ', 'value'=>'Windows'],
		['text'=>'リナックス',   'value'=>'Linux'],
		['text'=>'マックOS',     'value'=>'macOS'],
	],
	['label'=>true, 'value'=>'Linux']) ?>
<?=$this->Form->submit("送信") ?>
<?=$this->Form->end(); ?>
※multiple属性を用意しておくことで複数の項目を選択させることができる。
注意点：配列で渡されるので、受け取る側の処理も送られてきた配列から順に値を取り出して処理するようにしなければいけません。

《その他のフォーム生成メソッド》
非表示フィールドの生成
hidden(名前, 属性設定);
パスワードフィールドの生成
password(名前, 属性設定);
テキストエリアの生成
textArea(名前, 属性設定);
プッシュボタンの生成
button(キャプション, 属性設定);

《日時の入力フォーム生成》
例
<?php
echo $this->Form->create(null,['type'=>'post', 'url'=>['action'=>'index']]);
echo $this->Form->dateTime('HelloForm.date');
echo $this->Form->submit("送信");
echo $this->Form->end()；
?>
dateTimeを使うと日時を入力するためのポップアップ類が自動生成される。

年月日時分をまとめて生成する
dateTime(名前, オプション);
年月日を生成する
date(名前, オプション);
時分を生成する
time(名前, オプション);
年を生成する
year(名前, オプション);
月を生成する
month(名前, オプション);
日を生成する
day(名前, オプション);
時を生成する
hour(名前, オプション);
分を生成する
minute(名前, オプション);
午前午後の表示を生成する
meridian(名前, オプション);

オプションで用意できる項目
monthNames
minYear/maxYear
empty
second等

dateTime以外は単独のポップアップメニューを生成するので通常のselectと同様の形で選択した項目を調べることができる。
検定の多重性問題と第1種の過誤について


統計検定を勉強していたことで混同行列、第1種の過誤、第2種の過誤、検定など知識としては知っていたが、「Rによるやさしい統計学」に、Rを使用して実験的に第1種の過誤、検定の多重性の問題について分かりやすく説明していたので、自戒のためにも纏めたいと思います。

#第1種の過誤、第2種の過誤とは

PCR検査でコロナであるかを調べることを考えます。この場合、第1種の過誤と第2種の過誤とは次のような誤りになります。尚、第1種の過誤をα、第2種の過誤をβと記します。

第1種の過誤：本当はコロナに罹患しているが、コロナでないと結果が出る
第2種の過誤：本当はコロナに罹患していないが、コロナという結果が出る


#検定の多重性の問題
3つの群A、B、Cがあったときに、それぞれの母平均μA、μB、μCが等しいか異なっているかを考えたいとします。

帰無仮説1: μA = μB
帰無仮説2: μB = μC
帰無仮説3: μC = μA

上記について、3回のt検定を行いたくなるかもしれない。しかしながら第1種の過誤が起きる確率が5%であったとすると、1回のt検定につき、5%の確率で第1種の過誤が発生することを意味する。従って、3つに分けた検定のうち少なくとも1つで第1種の誤りを犯している確率は、それぞれの検定が独立であった場合、

$$1-(1-0.05)^{3} ≒　0.143$$

となり、14.3%の確率で第1種の過誤が起こることを表している。これは5%より大きく、複数回検定を適用するこで、全体で見ると第1種の過りを犯す確率が大きくなることを示している。これを検定の多重性問題と言います。


#Rを使って実験的に第1種の過誤を再現
グループA、グループB、グループCを標準正規分布に従う、サンプル数10のグループとする。
帰無仮説1、帰無仮説2、帰無仮説3に対してt検定を行い、第1種の誤りが1度でも起こる確率を
10,000回実験して確率を求めてみる。

```R:R
反復回数 <- 10000
第1種の誤り <- 0

for (i in 1:反復回数){
  gp_A <- rnorm(n=10)
  gp_B <- rnorm(n=10)
  gp_C <- rnorm(n=10)
  ttest1 <- t.test(gp_A, gp_B, var.equal = TRUE)
  ttest2 <- t.test(gp_B, gp_C, var.equal = TRUE)
  ttest3 <- t.test(gp_C, gp_A, var.equal = TRUE)
  第1種の誤り <- 第1種の誤り + ifelse(ttest1$p.value < 0.05 | 
                              ttest2$p.value < 0.05 | ttest3$p.value < 0.05, 1, 0)
}

第1種の誤り/反復回数
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541839/2be028fa-6ce9-e9c7-f6d7-00ecc61a60a8.png)

上記プログラムから、3種類の検定（ttest1~3）で第1種の過誤が少なくとも1回おこる確率は、約12.1%と5%よりも大きく、理論値の14.3%に近い数値となることが確認できます。
ちょっとしたコツ｜GoodNotes(5)

## はじめに（コメント）

ノートアプリのGoodNotes、すっごく良い。
macOSとiPadOS/iOSで、勝手に同期してくれるのもとても助かる。

ただし「強制同期」がない。
同期しないとき、何が理由かわからなくてわりと困っていた。

同期の現状を、簡単にチェックする方法を発見したので記録しておく。

## 環境

ここで書いていることは、下記のバージョンで実施しました。

- GoodNotes 5.7.6（iPadOS版）
- iPadOS 14.6
- GoodNotes 5.7.6 (1145024.349670233)（macOS版）
- macOS BigSur 11.4


## やること

アプリ起動 > 歯車アイコン > 設定 > iCloud設定 > iCloudを利用

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/6f00e40a-c515-7f6c-7967-58bb8bdf5a21.png" width=45%>

この画面で、同期ステータスが表示されている。
エラーが起きたらここに表示されている。

ここを見れば、現状はわかる。

## リソース

その他の設定は下記に書いてある通り。

[Syncing GoodNotes documents between iPhones/iPads/Macs](https://support.goodnotes.com/hc/en-us/articles/208438576-Syncing-GoodNotes-documents-between-iPhones-iPads-Macs)

ざっくりいうと

- 同じAppleIDに揃えて
- OSで`iCloud Drive`と`GoodNotes`をオンにする（OSによって場所が若干違う）
- appで`iCloudを利用`をオンにする
VertualBoxに仮想マシンを作成する手順（macOS）

## 概要

備忘録として、下記手順を記載する。
・VertualBoxに仮想マシン(CentOS7)を作成する手順


### 前提
OS：macOS Big Sur
バージョン：11.2.1

下記作業を実施済みであること
1. [CentOS7をダウンロード](https://qiita.com/kazuho_0531/items/f413c5914a632c4cd83f)
2. [VertualBoxをインストール](https://qiita.com/kazuho_0531/items/ecf57d5b780e0e3d87ff)

## 1. 仮想マシン作成手順
- VirtualBoxを起動
- 上部の［新規］をクリック
![スクリーンショット 2021-06-20 16.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/197db3e5-0947-f491-3d0c-dbe46afab8c1.png)
- ［名前とオペレーティングシステム］ダイアログボックスが表示される
- ［名前：］に`CentOS7`を入力
   - 　自動で［タイプ：Linux］［バージョン：Red Hat(64-bit)］が入力される
- ［続き］をクリック
![スクリーンショット 2021-06-20 16.50.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/eb19dcf8-d338-0c56-6be7-90b6848059fa.png)
- ［メモリーサイズ］画面に遷移
- 仮想マシンに割り当てる、メモリーサイズを指定
   - 初期設定は`1024MB`だが、今回は`2000MB`を指定
- ［続き］をクリック
![スクリーンショット 2021-06-20 16.58.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/48eb077c-92c3-1f46-74ab-eadc2227ecec.png)
- ［ハードディスク］画面に遷移
- 今回は新規に仮想マシンを作成するため、`仮想ハードディスクを作成する`を選択
- ［作成］をクリック
![スクリーンショット 2021-06-20 17.01.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/f3d31575-d36c-1b05-196b-8b83c691e2f2.png)
- ［ハードディスクのファイルタイプ］画面に遷移
- `VDI(VirtualBox Disk Image)`を選択
- ［続き］をクリック
![スクリーンショット 2021-06-20 17.03.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/6bcb5390-875d-5d06-25bc-f7f664d5c47e.png)
- ［物理ハードディスクにあるストレージ］画面に遷移
- ストレージに余裕がある場合は、`固定サイズ`を選択しよう
- ［続き］をクリック
![スクリーンショット 2021-06-20 17.06.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/6c88191f-d56b-6372-f738-d97622473f08.png)
- ［ファイルの場所とサイズ］画面に遷移
- 作成する仮想マシンを格納するフォルダを指定
- 仮想マシンのサイズを指定
- ［作成］をクリック
![スクリーンショット 2021-06-20 17.08.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/7c6d2fe2-fc9d-0dab-0f52-f356346a024f.png)

## 2. 仮想マシン作成 確認手順
以下2点から、仮想マシンが作成されたことを確認する
1. 指定した名前の仮想マシン(`CentOS7`)が、仮想マシン一覧に追加されたこと
![スクリーンショット 2021-06-20 17.13.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/57ec793f-ace3-f16b-956c-06be48cd644c.png)
2. 指定したフォルダに、仮想デスクトップ基盤が格納されていること
![スクリーンショット 2021-06-20 21.31.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/25985991-9185-8c05-35a5-14e7b42ca970.png)

以上

[仮想マシンの初期設定、CentOS7のインストール・起動手順](https://qiita.com/kazuho_0531/items/b6ed1c89294a77b5a91e)　に続く
Shopify 商品の表示件数案内 （全〇〇件中 １〜〇〇件）の作り方

# Shopify 商品の表示件数案内 （全〇〇件中 １〜〇〇件）の作り方

![スクリーンショット 2021-06-20 20.44.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076779/e0b3b4e9-12a7-555a-23ef-934ed90657ba.png)

今回案件の中で使うことのあった、ECサイトの商品一覧ページで見かける 全〇〇件中 １〜〇〇件 の作り方を紹介します。（上の画像みたいなやつ）
ページネーションと連動して今のページに表示されている商品件数を案内するものです。

##　まずはコードから
```
全{{ paginate.items }}件中
{% assign page_count = paginate.page_size %} 
{% assign page_offset = paginate.current_offset | plus: 1 %}
{% if paginate.previous and paginate.next %}
  {%- comment -%} 前も次もある {%- endcomment -%}
  {{ page_offset }}〜{{ paginate.current_offset | plus: page_count }}

{% elsif paginate.next %}
  {%- comment -%} 次がある（一番最初） {%- endcomment -%}
  1〜{{ page_count }}
  
{% elsif paginate.previous %} 
  {%- comment -%} 前がある（一番最後）{%- endcomment -%}
  {% if page_offset == paginate.items %}
    {%- comment -%} 一番最後が一件のみの時 {%- endcomment -%}
    〜{{ page_offset }}
  {% else %}
    {%- comment -%} 一番最後表示件数 {%- endcomment -%}
    {{ page_offset }}〜{{ paginate.items }}
  {% endif %}
{% else %}
  {%- comment -%} 最初のページで全てが表示される時 {%- endcomment -%}
  {{ paginate.items }}
{% endif %}
件

```

##　オブジェクトの説明
　```paginate.page_size　```
　1ページに表示されるアイテムの数


　```paginate.current_offset　```
　現在のページより前のページにあるアイテムの総数


　```| plus: 1　```
　Liquidの足し算

　```paginate.next　```
　次へのリンクを返します

　```paginate.previous　```
　前へのリンクを返します

　```paginate.items```
　ページネーションで管理されているアイテムの総数。全〇〇件中の〇〇の部分


### コードの説明
`{% assign page_count = paginate.page_size %}`
`{% assign page_offset = paginate.current_offset | plus: 1 %}`
この二行で現在のページに表示されるアイテム数と現在のページまでのアイテム数を変数に代入しています。

`{% if paginate.previous and paginate.next %}`
`{{ page_offset }}〜{{ page_offset | plus: page_count }}`
前もある、次もあるページかを判別して、そのページであれば、今までのページのアイテム数＋１ 〜 今までのページのアイテム数＋ページに表示されるアイテム数


`{% elsif paginate.next %}`
`1〜{{ page_count }}`
上記の条件に当てはまらないということは、一番最初のページが一番最後のページになります。
次がるので一番最初。一番最初であれば、 １〜 ページに表示されるアイテム数


`{% elsif paginate.previous %} `
上記までの条件に当てはまらない→　前と次（両方）はない、次はない、ので一番後ろ

`{% if page_offset == paginate.items %}`
`{{ page_offset }}`
`{% else %}`
`{{ page_offset }}〜{{ paginate.items }}`
`{% endif %}`
一番最後のページで、今までのページ＋１（現在のページの一番最初に表示されるアイテム数） イコール （アイテムの総数） の時は、一番最後のページに表示されるアイテムの数が、１件なので、〜今までのページ＋１。それ以外は、一番最後のページに表示されるアイテムが複数あるので、今までのページのアイテム数＋１ 〜 今までのページのアイテム数＋ページに表示されるアイテム数

`{% else %}`
`{{ page_count }}`
`{% endif %}`
上記までの条件に当てはまらないということは、（前＋次、次、前 がない）ということは、次のページに行くほどのアイテム数がないので、一番最初のページに全てが表示されている状態。
ページネーションで管理されているアイテムの総数

#＃ まとめ

私の環境上で動作確認は行っていますが…もっとスマートな方法があるのかもしれませんし、間違っているかもしれません。（間違っていた場合はその都度この記事を修正します。）
その時はごめんなさい。
ですが、よく見かける機能なのでコードを書くのが苦手な方は参考にされてみてください。


参考：https://shopify.dev/docs/themes/liquid/reference/objects/paginate#paginate-page_size
AWS NetWork Firewall を使用した Web フィルタリングの実装  - ネットワーク構成 - 

AWS Network Firewall が東京リージョンにて 2021年3月より利用可能

**本記事では NAT Gateway を経由して、インターネットへ外部通信する際に AWS NetWork Firewall を使用して、Web フィルタリングとして機能させるためのネットワーク構成を記載する**

#構成
構成は以下のイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/c282d64a-108d-4c9c-eec2-5735c5a2c1b9.png)

#Network Firewall の作成
Firewall Endpoint とは、Network Firewall を作成する際に、対象の VPC 内の指定したサブネットに作成される検査用のエンドポイント。
この endpoint 上にルールグループを追加して、指定した通信を制御する仕組みとなる。ルールグループについては別記事にて記載。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/2ffb29bd-2dbf-1e98-ce42-65238e7db768.png)

##サブネットに関する考慮事項
* Firewall Endopoint は対象の VPC 内であれば 異なるアベラビリティゾーンへ複数配置する事も可能。
* 本構成では Firewall Endpoint は NATGateway が配置されたサブネットとは別のサブネットを指定する必要がある。
* EC2 インスタンスからインターネット通信を行う際、Firewall Endpoint 上で検査を行う送信元IP は NAT Gateway の Private IP となる。
* Firewall Endopoint を VPC 内に作成したとしても同一 VPC に PublicSubnet や、Firewall Endopoint の透過対象としない Natgatewawy の配置も可能。

##ルートテーブルに関する考慮事項
* 本構成におけるルートテーブルは、以下のように基本的に4つ必要となる。
* 1つはゲートウェイルートテーブルとして、インターネットゲートウェイを Edge の関連付けを行う。
* 基本的には Private Subnet > NAT Gateway Subnet > Firewall Endpoint > Internet Gateway の順番でルートの関連付けする。

https://docs.aws.amazon.com/ja_jp/network-firewall/latest/developerguide/arch-igw-ngw.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/391283a7-4d9e-e242-dada-142413376294.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/8e940697-1f48-dcc0-570f-89c9e982cd2e.png)


ネットワーク構成はこのようにして作成を行う。
以下の記事にて NetWork Firewall のルールグループに関する記事を記載する。
【Ruby】配列を条件に基づいて分割したい

# 概要

Enumerable#partitionメソッド使って、条件に当てはまるものとそうでないものに分類できます。
結果が真（true）の組みと偽（true以外）の組みの２つの要素からなる配列を返します。

```ruby
array = [1,2,3,6,7,8]
array_partition = array.partition {|i| i < 5}
array_partition #=> [[1, 2, 3], [6, 7, 8]]
array_partition[0] #=> [1, 2, 3]
array_partition[1] #=> [6, 7, 8]
```

# どんな時に使うと便利？
数値などでpartitionメソッドを使って分割すると、真（true）の組みと偽（true以外）の組みに分割した配列を作成できて便利に使用できます。

例：3で割り切れる数値の配列とそうでない配列に分割

```ruby
array = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
array_partition = array.partition {|i| i % 3 == 0 }

array_partition #=> [[9, 6, 3, 0], [10, 8, 7, 5, 4, 2, 1]]
# 3で割り切れる数値の配列
array_partition[0] #=> [9, 6, 3, 0] 
# 3で割り切れない数値の配列
array_partition[1] #=> [10, 8, 7, 5, 4, 2, 1]
```


# 参考資料

Ruby 3.0.0 リファレンスマニュアルEnumerable#partition

https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/partition.html
【Ruby】 クラス、インスタンスとは？違いなどをプログラミング初心者のために解説！

# 背景
未経験からエンジニアを目指し勉強中です。

自分ひとりでWebアプリケーションを作ってみたり、日々精進しているところですが、
まだまだ精進が足りないと感じたため、理解できそうでいまいちできない「クラス」と「インスタンス」について、
私自身の備忘録も兼ねて、解説しようと思います。

また、本記事は「クラスとインスタンスついてざっくりと理解しよう」というコンセプトで執筆しておりますので、
発展的な内容に関しては別の記事で解説していこうと思います。
記事が出来次第こちらの記事からも飛べるようにいたします。

最後になりますが、初学者故に、至らぬ点が多々あるとは思いますが、温かく見守っていただけますと幸いです。
なお、何かお気づきの点があればコメントにてご指摘ください。

# クラスとインスタンスの関係

クラスとは「モノを作る際の設計図」です。
例えば、人間というモノを作成するときの場合は以下のようになります。

皆さんもご存知の通り、人間にはそれぞれ個性があって、DNAから何から何まで全て同じ人は存在しません。
ですが、人間には共通しているところもありますよね。例えば、

* 身長があること
* 体重があること
* 目や口が存在すること

などです。また、このような機能面以外にも、

* 食べる
* 笑う
* 走る

などのアクション面も共通しています。
このように、「モノ」を作成するにあたって、もとになるような共通事項をまとめてあるものをクラスと言います。
この設計図をもとに「インスタンス」と呼ばれる実際の「モノ」を作成していくわけですね。
![スクリーンショット 2021-06-20 21.17.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753344/d7f925f5-4b0b-b3a0-1425-c0d6defe08ca.png)

# まとめ
ざっくりとした説明ではありますが、これでクラスとインスタンスについての解説は以上になります。
同じプログラミング初心者の方にとって少しでも参考になれば幸いです。
ここまでご覧いただき誠にありがとうございました。

必要があれば、修正・追記をいたしますので、
何かお気づきの点などございましたら、コメントにてご連絡ください。

# 参考文献
[クラスとオブジェクトとインスタンスの関係](https://qiita.com/N-qiita/items/de972c176f50c22414a6)
[【Ruby】クラスとかインスタンスについて改めて学習してみた](https://qiita.com/ksk_lack/items/734b4961e9e6c7480d33)
上記の記事を参考にさせていただきました。こちらの記事の方が詳しく書いていることもありますので、
そちらも是非参考にしてみてください。