OmniAICreator/Qiita-1.07M huggingface dataset:
MAMP ルートが合っている、URLも間違ってないよな...　ローカルサーバーが開けない!

Udemyのカリキュラムをしていて
MAMPのルートを正しく設定しURLを正しく入力した！
よし、出力してみよう！

![d64e7170efa36d186d7a59f587f91741.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678154/56d0ac0a-4f45-99be-da73-df0277feaa0c.png)

絶望ですよね...

しかし色々ググっていると
**そもそもサーバーは正しいポートで入力したか？**
このように合ったので自身のMAMPのPreferencesを開き
PortsのApache Portの数値を確認すると
カリキュラムで説明してあるポート番号と違うやんけ！！

正しいポートをURLに入力すると

![PHP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678154/4455e3ed-7e62-dd01-a585-69ed54085cf9.png)

無事、開けました！！
GitHub Actionsで現在日時を取得する

GitHub Actionsで現在日時を取得する必要があったため、その方法をまとめておきます。

```yml:.github/workflows/get_current_datetime.yml
name: "Get current datetime"

on: [ workflow_dispatch ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Set current datetime as env variable
        env:
          TZ: 'Asia/Tokyo' # タイムゾーン指定
        run: echo "CURRENT_DATETIME=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_ENV

      - name: Show current datetime
        run: echo ${{ env.CURRENT_DATETIME }}
```

`Set current datetime as env variable` の部分で、環境変数 `CURRENT_DATETIME` に現在日時を入れています。
タイムゾーンは、 `TZ: 'Asia/Tokyo'` のように指定します。
`'%Y-%m-%d %H:%M:%S'` の部分で、フォーマットを指定可能です。
この例では `2021-09-26 00:00:00` のような形式になります。

以降は、 `${{ env.CURRENT_DATETIME }}` のように現在日時を取得可能です。
Android で Lua 言語で LÖVE2d で ’Hello World!’するまで。

LÖVE2d はゲームエンジンです。
https://love2d.org/
>As you probably know by now, LÖVE is a framework for making 2D games in the Lua programming language. LÖVE is totally free, and can be used in anything from friendly open-source hobby projects, to evil, closed-source commercial ones.

Lua言語が使えます。他のいくつかの言語でも非公式ですが使えるようです。

Fennel

>Fennel is a programming language that brings together the speed, simplicity, and reach of Lua with the flexibility of a lisp syntax and macro system.
https://fennel-lang.org/


https://fennel--lang-org.translate.goog/setup?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=nui#using-fennel-with-l%C3%B6ve

---

`Hello World!` に至るまでは、ここに参考となるチュートリアルがあります。

[learn2love](https://rvagamejams.com/learn2love/pages/02-02-love-structure.html)

---

この記事の内容は Android OS の環境（つまりタブレット）で google play store からインストールするアプリの LÖVE2d を使って GUI 上で`Hello World!`するまで、です。

Termux を使います。（ Termux でなくてもアプリでテキストエディターがあれば可能です。）

`Hellow World!` のためのプログラムの配置は、このようになっています。

![Screenshot_20210926-013415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225786/f543191d-d7cd-6e3f-5000-0917948e272f.png)

LÖVE2d では、`main.lua`というファイルに `love.`から始まるカスタムメソッドにプロパティを渡すプログラムコードがかかれていることが必要とされます。
`main.lua`のなかに、これだけを書きました。

```lua:main.lua
function love.draw()
      love.graphics.print('Hello World!',400,300)
end
```

gametest というフォルダ（ディレクトリ）のなかにあります。

```terminal
u0_a185@localhost ~/gametest> tree ./
./
└── main.lua

0 directories, 1 file
```

この`main.lua`を LÖVE2d のアプリで開けばいいわけですが、`.love`というファイルにして LÖVE2d で開くことで `main.lua` が読み込まれます。

**`.love`とは zip 圧縮されたフォルダなのですが、LÖVE2d で読み込むには、そのフォルダの一階層目（ゼロ階層というべきか）に`main.lua`がなくてはいけない**ということになっています。

つまり、`hello.love`というアーカイブファイルを展開したら、ぽろっと `main.lua`というファイルが出てくる構造になっていないといけないということです。
展開したときに `hello` というフォルダに `main.lua` が入っているという構造ではエラーになります。

https://love2d.org/wiki/Game_Distribution_(%E6%97%A5%E6%9C%AC%E8%AA%9E)

ここで、`..`で一階層上がって、

```terminal
u0_a185@localhost ~/zip -r gametest.zip gametest/
u0_a185@localhost ~/mv gametest.zip hello.love
```
とすると、この場合、`hello.love`のディレクトリ直下はフォルダになってしまいます。

フォルダを含めないで zip する方法としては、

```
u0_a185@localhost ~/gametest> zip hello.love main.lua
```

とするか、または、

```
u0_a185@localhost ~/gametest> zip -r -D hello.love *
```

とすると、`hello.love`の直下は`main.lua`になり、必要の無いフォルダが含まれず LÖVE2d で`hello.love`を開いてもエラーになりません。

https://youtu.be/ebOMRHKxSH0

つまり、シェルコマンドで zip アーカイブするときにフォルダのなかにファイルを詰めるのではない方法ということになります。
この場合は、main.lua などがフォルダのなかにはない状態を実現することを説明しました。
他の画像や音声等のゲーム素材に使うものはフォルダに入った状態でアーカイブされていてもよいです。

>Rf. https://sheepolution.com/learn/book/12
You can also put your image in a subdirectory, but in that case make sure to include the whole path.

>```Lua
myImage = love.graphics.newImage("path/to/sheep.png")
```
 
以上。

https://unix.stackexchange.com/questions/182032/zip-the-contents-of-a-folder-without-including-the-folder-itself
【Swift】強制アンラップを返す関数の注意点


# 強制アンラップを返す関数の注意点

強制アンラップを返す関数で `nil` を返すような処理を書くとコンパイルエラーにはならずに実行時エラーになります。

環境：Xcode 12.5.1

```swift:サンプル
func testA() -> Int! {
    return 0
}

func testB() -> Int! {
    return nil // nilを返却してもコンパイルエラーにはならない
}

let hogeA: Int = testA() // 変数宣言時に!をつけなくてもコンパイルは通る
let hogeB: Int = testB() // 変数宣言時に!をつけなくてもコンパイルは通るが、実行時にエラーになる
```

なので、そもそも強制アンラップを返す関数は使うのはやめたほうがいいです。
WSL2で 'rails new' できるけど 'rails s' できない方へ

# はじめに
最近，Ruby on Rails 環境を作成していたのですが，思わぬところで躓きました…

`rails new` はできるんです．
`rails s`した時，サーバーが立ち上がらず，エラーが出てしまいました．

キーワードは`yarn`でした．

# 事前環境
```
wsl2: Ubuntu-20.04
node: 14.17.1
rails: 6.1.4.1
```

# webpackerは入っていますか？
`rails s`した時のエラー文に以下のような部分はありませんか？

```bash
(略)
Please run rails webpacker:install
(略)
```

`rails webpacker:install`ができませんか？
まさに私と同じ状況ですので，次を見てみてください．

# yarnは入っていますか？
私はまさにこれでした．

```bash
npm install --global yarn
```

yarnを導入した後先ほどのコマンドを実行してみてください．
もしくは`rails new`の時に自動で`webpacker`がインストールされてると思います．

# node(npm)が入っていない人へ
yarnの導入には，`npm`コマンドを使用しているので，以下の記事などでnodeをインストールしてください．
npmはnodeについてきます．

[>>WSL環境におけるNode.jsの導入から利用](https://qiita.com/RoaaaA/items/17df30bf9400edfb7fb3)

# 改善後の環境
```
wsl2: Ubuntu-20.04
node: 14.17.1
rails: 6.1.4.1
yarn: 1.22.11
```

# さいごに
`yarn`を使用できる環境を構築していなかったので，アプリケーション作成時に`webpacker`がインストールされていなかったみたいです．

同じ事案に出会った方が救われますように…

それでは:wave:

# 参考
- [【Rails new】webpacker・node・yarnのエラーと対処法](https://scuration.hateblo.jp/entry/2020/05/10/203000)
pythonのパッケージ作成でのエラー対応


環境
Ubuntu 18.04
python3.8


pythonでパッケージを作り配布する際、今までexeファイルに変換しないといけないのかと思っていました。
しかし、以下のコマンドを実行するとパッケージを作成できることを学びました。
````

````
python3 setup.py sdist
````
初回これを実行すると以下のエラー発生しました。


````
Traceback (most recent call last):
   File "./configure", line 22, in <module>
     from distutils.spawn import find_executable
 ModuleNotFoundError: No module named 'distutils.spawn'
````

調べたところpythonのpython3-distutilsをインストールしないといけないことが分かり。
インストールしました。
```

````
apt install -y python3-distutils

````
インストール完了後、再度、コマンドを実行して無事、パッケージを作成できました。
とりあえず最低限入れておいたフリーソフト

## 前提

- 業務用PC(Windows10)に入れているアプリを記述
- Office、Teams、Zoomはインストール済み(日常的に使用) 
- データ処理、プログラミング、仕様調整(PowerPoint作成)などが普段の作業
- WebブラウザはChromeにOneNoteのアドオンを入れている(Firefoxでも可)

とりあえず最低限これ使ってます的な(主観的)メモ。  
最近はWebブラウザ上でできることが増えたので必要なアプリもだいぶ減ってきた気がする。

## 開発環境など

**Python環境全般**　[Anaconda](https://www.anaconda.com/products/individual)
Pythonライブラリのインストール、各種IDE(統合開発環境)を呼び出せる。
Jupyterも使えるようになる。個人的にはSpyderが使いやすくて重宝している。

**コード全般**　[Visual Studio Code](https://code.visualstudio.com/)
Python以外のコードも扱うときに使う。プラグインが豊富。
RemoteSSHが大変便利。

**GitHub**　[GitHub Desktop](https://desktop.github.com/)
GitHubへのPush、Pullなどに使用。

**Docker**　[Docker Desktop](https://www.docker.com/products/docker-desktop)
DockerコンテナでAnacondaが入っていないWindows環境を立てたり、Linuxサーバの模擬をしたり。

**DB関連**　[PostgreSQL](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads)
ローカルでの開発や、PgAdminでAWS上のDBの確認をしたり。

**ターミナル**　[WindowsTerminal](https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?cid=msft_web_chart&activetab=pivot:overviewtab) 
PowerShell、WSLが使えてタブ表示もできる。

**R用IDE**　[Rstudio](https://www.rstudio.com/products/rstudio/)　
LinuxサーバにRStudioServerを入れたりもしているので、クライアントに入れておくとソースの確認などに便利。

## ファイル操作とか

**テキストエディタ**　[サクラエディタ](https://sakura-editor.github.io/)
UTF-8を使うことが多いので個人的には必須。(メモ帳だと文字化けする)
文字コードや改行コードの変換ができるのでありがたい。

**ファイル圧縮/解凍**　[7-Zip](https://sevenzip.osdn.jp/)
基本的にはzipしか使わないが、たまにgzとかあるので入れている。

**PDFページ操作**　[CubePDF](https://www.cube-soft.jp/cubepdf/?lang=ja)
PDFのページ結合などに使用。Acrobatは入ってないけど、PDF操作をしたいというときに。

**描図**　[draw.io](https://draw-io.softonic.jp/)
描画用ソフト。ユースケース図やAWSの構成図の作成に使用。Web版でもいいが、ダウンロード版もあるのでありがたい。

**画面動画キャプチャ**　[LICEcap](https://www.cockos.com/licecap/)
画面キャプチャのgifを作成可能。簡易な動画をPowerPointに貼ったりするのに使用できる。

**(趣味用)バイナリファイル**　[Stirling](https://freesoft-100.com/download/stirling/)
バイナリファイルの内容を16進数でテキストエディタのように操作可能。昔重宝したので入れているが、最近は使う機会なし

**テキストエディタ**　[ATOM](https://atom.io/)
テキストエディタ(兼簡易IDE)。家のMacと共通で使うつもりだったが、最近は使っていない。  

## その他
**メモ全般**　[OneNote](https://www.onenote.com/download?omkt=ja-JP)
業務用メモや資料の下書き、Webのクリップ(Chromeのアドオンが必要)に使用。
プライベートでもevernoteを捨てたので時々使っている。

**タブつきエクスプローラ**　[QTTqbBar](http://qttabbar-ja.wikidot.com/)
Windows10のエクスプローラにタブ機能を追加できる。
インストール後、「表示」メニューのオプションから追加できる。

**サイボウズ**　[Cybozu Desktop](https://cybozu.co.jp/info/desktop2/)
サイボウズに来た業務メールを度々見逃すので導入。既読にしたメールの表示がなぜか消えないことも。。
【Git】ローカルの構造（初心者向け）

#はじめに
ローカルとは自分のPC内の環境のことで、３つのエリアに分かれています。
このローカル環境内にあるリポジトリのことをローカルリポジトリ、ネットワーク上にあるリポジトリのことをリモートリポジトリと言います。

## ①ワークツリー
ファイルを変更するなど、実際に作業する場所（作業場）のことです。
ここからステージに追加するには、`git add`というコマンドを使います。

```git:ターミナル
git add <ファイル名orディレクトリ名> もしくは git add .
```

## ②ステージ（インデックス）
ワークツリーで変更されたファイルのうち、次にコミットするファイルを準備しておく場所です。
ステージを経由せずにいきなりリポジトリにコミットしてもいいのではないかと思ったかもしれませんが、変更したファイルを一旦ステージに乗せることで、変更したファイルの中からコミットしたいファイルのみを選別してコミットすることができるようになります。
リポジトリにコミットするには、`git commit`というコマンドを使います。

```git:ターミナル
git commit -m "メッセージ"
```

## ③ローカルリポジトリ
変更履歴を保存する場所です。
ここまでがローカルでの作業になりますが、チーム開発では、ローカルリポジトリに保存されている記録をほかのユーザーと共有する必要があるので、この後、リモートリポジトリに`git push`します。

```git:ターミナル
git push -u <リモートリポジトリ名> <ローカルブランチ名>
```

#おわりに
初めの頃はコマンドとそのコマンドによってどういう動きがあるのかを必死に覚えようとしていましたが、日頃からGitを使っていれば自然に覚えていけるので、できるだけ毎日触るようにしましょう。
railsチュートリアル第6章 長さを検証する

###長さを検証する
各ユーザーは、Userモデル上に名前を持つことを強制されるようになりました。
存在性の有効　valid?
しかし、これだけでは```十分ではありません```。
ユーザーの名前はサンプルWebサイトに表示されるものなので、```名前の長さにも制限```を与える必要があります。

最長のユーザー名の長さを単に50を上限として手頃な値を使うことにします。
つまりここでは、51文字の名前は長すぎることを検証します。
問題になる可能性もあるので```長すぎるメールアドレスに対してもバリデーション```を掛けましょう。
ほとんどのデータベースでは文字列の上限を255としているので、それに合わせて255文字を上限とします。
説明するメールアドレスのフォーマットに関するバリデーションでは、こういった長さの検証はできないので、```本節で長さに関するバリデーションを事前に追加```しておきます。

####nameとemailの長さの検証に対するテスト

```rb
>> "a" * 51
=> "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
>> ("a" * 51).length
=> 51
```

```rb
>> "a" * 244 + "@example.com"
=> "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a@example.com"
>> ("a" * 244 + "@example.com").length
=> 256
```
テスト

```
buntu:~/environment/sample_app (modeling-users) $ rails test
Running via Spring preloader in process 10002
Started with run options --seed 29700

 FAIL["test_name_should_not_be_too_long", #<Minitest::Reporters::Suite:0x0000559e8fb92520 @name="UserTest">, 1.5510990120001225]
 test_name_should_not_be_too_long#UserTest (1.55s)
        Expected true to be nil or false
        test/models/user_test.rb:25:in `block in <class:UserTest>'

 FAIL["test_email_should_not_be_too_long", #<Minitest::Reporters::Suite:0x0000559e8fba8c08 @name="UserTest">, 1.5563912540001184]
 test_email_should_not_be_too_long#UserTest (1.56s)
        Expected true to be nil or false
        test/models/user_test.rb:31:in `block in <class:UserTest>'

  13/13: [============================] 100% Time: 00:00:01, Time: 00:00:01

Finished in 1.55965s
13 tests, 24 assertions, 2 failures, 0 errors, 0 skips
```

```Expected true to be nil or false ```
tureになって欲しいが、nilかfalseだった。
####name属性に長さの検証を追加する

```rb
class User < ApplicationRecord
  validates :name,  presence: true, length: { maximum: 50 }
  #属性はname,属性の存在を検証、 最大50字まで
  validates :email, presence: true, length: { maximum: 255 }
  #最大255字まで
end
```

```
ubuntu:~/environment/sample_app (modeling-users) $ rails t
Running via Spring preloader in process 3042
Started with run options --seed 12529

  13/13: [============================] 100% Time: 00:00:01, Time: 00:00:01

Finished in 1.86197s
13 tests, 24 assertions, 0 failures, 0 errors, 0 skips
```
####演習
1.長すぎるnameとemail属性を持ったuserオブジェクトを生成し、有効でないことを確認してみましょう。

```rb
>> user = User.new(name: "", email: "   ")
   (0.1ms)  begin transaction
=> #<User id: nil, name: "", email: "   ", created_at: nil, updated_at: nil>
>> user.valid?
=> false
```
2.長さに関するバリデーションが失敗した時、どんなエラーメッセージが生成されるでしょうか? 確認してみてください。

```rb
>> user.errors.full_messages
=> ["Name can't be blank", "Email can't be blank"]
```
[Docker]初心者の覚えるコマンド達

# はじめに
本記事では、Dockerにコマンドについて記述します。
先日から、Dockerを学習しており、私が覚えた範囲でアウトプットしたいと思います。
Dockerに挫折してから300年。再び頑張ります。

# コマンド一覧
### docker login
Dockerにログインするコマンド。
これやらないと始まらない。

### docker --version
Dockerのバージョンを確認できる。
インストールされていたらバージョン出てくる。

### docker pull image名
DockerHubからimageをpullする。

### docker run -it image名 bash
pullしたimageにて、コマンドを作って入る。
これで、bashというシェルとやりとりができ、
`root@~~`にターミナルが切り替わる。

[【3分でわかるシリーズ】Ubuntuとは？](https://eng-entrance.com/what-is-ubuntu)

```terminal
% docker run -it ubuntu bash 

root@~~:/# touch test

root@~~:/# ls
bin  boot  dev  etc  home  lib  media  mnt  opt  proc  root  run  sbin  srv  sys  test  tmp  usr  var

testというファイルを作れる
```

### exit
`root@~~`（コンテナ）から出て、ホストに戻る。
プロセスを消して、ホストに戻ります。
ステータスが`Exited`。

### docker ps -a
ホストにある全てのDockerのコンテナを参照できる。

### docker images
ホストにあるイメージのリストを参照できる。

### docker restart
コンテナに入るため、ステータスが`exited`になっているものを`Up`にする。

### docker exec -it コンテナ名 bash
Upのコンテナに入り、bashへ指示できる。

```
例.ubuntuとコミュニケーションできる。
docker exec -it ubuntu bash
```

### docker commit コンテナ名 イメージ名
入ったコンテナから新しいイメージを作る。

### docker tag 今のイメージ名 新しいイメージ名
DockerHubにアップして、他の人にもイメージを使ってもらえるように名前を変更する。
新しいイメージ名は、DockerHubのリポジトリ名を同じにする。

### docker push イメージ名
DockerHubにイメージをpushする。

### docker rmi イメージ名
ホストにあるイメージを削除する。

以上です。

# 終わりに
Dockerは、理解することと覚えることが多く、大変ですが、
楽しいですね。
効率が良いのが大好きなので、なおさらマスターしたいです。

私の学習している動画はこちらです。(有料)
最高に分かりやすいのでオススメです。
[米国AI開発者がゼロから教えるDocker講座](https://www.udemy.com/course/aidocker/)

明日もDocker頑張ります！
React で認証機能を実装する

## 背景
個人開発＆業務での開発用にreactアプリのテンプレートになりそうなソースコードを探したのですが、自分の求めているものがなかったので作成してみました。
本記事では作成したテンプレートの説明をしていきます。

テンプレートには以下のような要素を組み込みました。

- ログイン、ログアウト機能の実装
    - 認証状況によって表示を切り替える
        - ```AppRoute```認証状況によって表示内容が変わるページへのルーティングを行う
        - ```PrivateRoute```認証済みのユーザーのみが見れるページを表示する
        - ```GuestRoute```誰でも表示出来るページを表示する
    - axiosを使ったAPI通信
        - バックエンドはIdentityASP.NET Coreで作成したものを使用しています。
    - 認証情報をreduxで管理
- デザイン
    - Tailwindの導入
    - レイアウトコンポーネントの実装
    - ハンバーガーメニューの実装

ソースコードは以下で公開しています。
GitHub:[redux-auth-sample](https://github.com/koki-2424/redux-auth-sample)


## フォルダ構成

```bash
.
├── App.js
├── Layout
│   ├── LoginLayout.js
│   └── MainLayout.js
├── Pages 
│   ├── Home.js //user listを表示
│   ├── Login.js
│   └── MyPage.js //ユーザー情報を編集する　※未実装
├── api
│   └── auth.js
├── components
│   ├── HeaderMenu.js
│   ├── Router
│   │   ├── AppRoute.js
│   │   ├── GuestRoute.js
│   │   └── PrivateRoute.js
│   └── Spinner.js
├── index.css
├── index.js
└── store
    ├── auth.js
    └── index.js
```

## Storeの永続化
画面リフレッシュをするとStoreに保存されているデータまでリセットされてしまうため、redux-persistを使用しました。
また、reduxの実装のためにはRedux tool kitを使用しました。

## Router
３種類のRouterコンポーネントを使い分けることによってコンテンツごとのポリシーごとに対応できるようにしました。

使用例

```react
<Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
    <BrowserRouter>
      <Switch>
        <AppRoute path='/' exact layout={MainLayout} component={Home} />
        <GuestRoute path='/login' layout={LoginLayout} component={Login} />
        <PrivateRoute path='/mypage' layout={MainLayout} component={MyPage} />
      </Switch>
    </BrowserRouter>
  </PersistGate>
</Provider>
```

AppRoute: 認証しているユーザーとしていないユーザーで表示するコンポーネントを切り替えたい
GuestRoute: 誰でも表示出来る
PrivateRoute: 認証済のユーザー飲み表示できる。そうでない場合はログイン画面に戻す
Qiitaの数式に不要なスクロールバーが出る現象と暫定的な対処法

# 2023/05/07 追記

あれ？直った？

# 現象

Qiitaの記事で一部の数式がスクロールバー付きで表示されてしまう。

```text
$a_0, a_1, \cdots, a_9$
```

$a_0, a_1, \cdots, a_9$

長さは関係ない様子。

```text
$a,b \in A$
```

$a,b \in A$

# 暫定的な対処法

文末に「\ 」で半角スペースを入れるとスクロールバーが表示されなくなる。

```text
$a_0, a_1, \cdots, a_9 \ $
```

$a_0, a_1, \cdots, a_9 \ $
ABC79 C - Train Ticket が解けた

https://atcoder.jp/contests/abc079/tasks/abc079_c

![abc79_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/983a946a-48ea-cfe5-4cb0-52faa3ae1d73.png)
![abc79_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/f96fe050-0bce-8ad2-a550-813aab57866d.png)
![abc79_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/37e047b1-6195-24ad-b8a7-4d2f52874cd7.png)

op は 2 種類しかないうえに、
op は 3 つしかない。2^3 だから全探索で余裕だ

```TrainTicket.py
ABCD = input()
lisST = list(ABCD)
lisINT = list(map(lambda x:int(x),lisST))
OP =["+","-"]
#print(lisST,lisINT)
ans = ""
from itertools import product
for op1,op2,op3 in product(["+","-"],repeat=3):
    #print(op1,op2,op3)
    if op1 == "+":
        num1=lisINT[0]+lisINT[1]
        ans += lisST[0]+"+"+lisST[1]
    else:
        num1=lisINT[0]-lisINT[1]
        ans += lisST[0]+"-"+lisST[1]

    if op2 == "+":
        num2=num1+lisINT[2]
        ans += "+"+lisST[2]
    else:
        num2=num1-lisINT[2]
        ans += "-"+lisST[2]

    if op3 == "+":
        num3=num2+lisINT[3]
        ans += "+"+lisST[3]
    else:
        num3=num2-lisINT[3]
        ans += "-"+lisST[3]

    if num3 == 7:
        print(ans+"=7")
        break
    else:
        ans = ""
```

***

全部列挙は苦痛だったので、
文字をそのまま計算できる eval() を使った。

```abc79c.py
S = list(input())

from itertools import product
for op in product(["+","-"],repeat=3):
    op = list(op)
    num = ""
    for i in range(3):
        num += S[i]+op[i]
    num += S[3]
    if eval(num)==7:
        print(num+"=7")
        exit()
```
CentOS7にFusionPBXをインストール

昔Asterisk PBXの環境を構築してみようとして挫折して諦めていたけれど
昨今クラウドIP-PBXサービスが沢山あるのを知り無料やOSSのPBXって他にもあのではないかと探してみたところ以下の様な記事を見つけたので幾つか調べてみた。

[Asterisk、FreeSwitchなど　無料で使えるオープンソースIP-PBX（電話交換機）一覧](https://blog.cba-japan.com/%E7%84%A1%E6%96%99%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9ip-pbx%EF%BC%88%E9%9B%BB%E8%A9%B1/)

その中で幾つか調べてみたところFusionPBXというのが導入自体は簡単そうなのでVMを一台立ててインストールを試してみた。

##公式に載ってるインストール手順

[FusionPBX公式サイトDownloadページ](https://www.fusionpbx.com/download)より
####CentOS Install(管理者権限で実行)

```sh
yum install wget
wget -O - https://raw.githubusercontent.com/fusionpbx/fusionpbx-install.sh/master/centos/pre-install.sh | sh
cd /usr/src/fusionpbx-install.sh/centos && ./install.sh
```
__基本的にはこれだけで必要なnginxなどのインストールからSELinuxの設定まで一通り自動で完了してくれる。__

インストール完了後ユーザー情報が以下の形式で実行ターミナルを少し遡った所に記載されているので忘れないように控えておくこと。
domain name: https://192.168.*.*
username: admin
password: ****************
(*は実際にはなんらかの値)

あとはdomain nameに記載されたアドレスにアクセスすれば繋がるはずだが実際これでやった場合二点ほどうまくいかないところがあった。
（localhost証明書でhttpsにアクセスしているので例外アクセスするのは想定内として）

####1.アクセスすると403エラーとなる
探してみたところ以下のような記事がありそれによるとCentOSではインストール後再起動しないとそうなるとの事で再起動したら少し状況が改善
[Installed new FusionPBX installation, getting 403 forbidden on web gui](https://www.pbxforums.com/threads/installed-new-fusionpbx-installation-getting-403-forbidden-on-web-gui.428/)

####2.PostgreSQLの接続に失敗してるというエラーが出る
インストール時に微妙に失敗してる風なメッセージが気になってたがやっぱり失敗していたようで
もう一度

```sh
cd /usr/src/fusionpbx-install.sh/centos && ./install.sh
```
を実行してみたところやはり

>postgresql96-server は利用できません。

などのメッセージが出ていた。
試しに手動でインストールしてみようとしらべてみたところ
[PostgreSQL 9.6 を CentOS 7 に yum インストールする手順](https://weblabo.oscasierra.net/postgresql96-centos7-install/)

```sh
yum -y localinstall https://download.postgresql.org/pub/repos/yum/9.6/redhat/rhel-7-x86_64/pgdg-centos96-9.6-3.noarch.rpm
```
にてまずリポジトリのインストールが必要との事で実行してみたところ
そんなリポジトリはないというエラーに見舞われた。
それについても調べていたところ以下の記事に行きつき
[[CentOS7] PostgreSQL9.6のYumリポジトリインストールでエラー（pgdg-centos96-9.6-3.noarch.rpmが消えた）](https://hiroki-sawano.hatenablog.com/entry/pg96-yum-repo-not-found)

```sh
yum -y localinstall https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm
```

とやればいいということが分かった。（おそらくFusionPBXのインストーラーもここで引っ掛かってるのかもしれない）
確かにリポジトリのインストールは上手くいったので再度

```sh
cd /usr/src/fusionpbx-install.sh/centos && ./install.sh
```
を実行するとPostgreSQLのインストールも正常に完了し
アドレスにアクセスするとちゃんと管理画面が表示された。
（ここでFusionPBXのインストールを実行すると保存先のSQLがなかったからなのか新しいパスワードが発行されるので忘れないように控える）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314532/d898ed6a-f157-2530-5500-737f9a5141cb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314532/ce43326d-d0c9-602f-0c65-3d3d58e9bfe7.png)


という事でPostgreSQLのリポジトリだけは事前にインストールしておいた方がよさそうなのとCentOS以外なら規定のインストール手順だけで全自動でインストールしてくれるのかもしれない。
RESTfullAPIのレスポンスデータへの型付


TypeScriptのESLintのルールの1つ、@typescript-eslint/no-explicit-anyの対応の一環として、
各APIに対して割り当てられる汎用的な型の例をメモとして載せます。

※API側がPOSTとPATCHでもデータを返す事を想定しています。

最終的にはこんな感じ

```ts

type PickPartial<T, D extends keyof T> = Partial<Pick<T, D>> & Omit<T, D>

type BaseApi<
  T, // 基本となるデータの型
  O extends keyof T, // Optional Keys
  KS extends string, // Key Singular
  KP extends string // Key Prural
> = {
  data: T
  optionalData: PickPartial<T, O>
  index: { [key in KP]: T[] }
  get: { [key in KS]: T }
  post: { [key in KS]: T }
  patch: { [key in KS]: T }
}

```
## 使用例
上記で定義したBaseApiの型を使って、`~.d.ts`ファイルなどでUserの型を定義

```typescript
declare namespace ApiResponse {
  type User = {
     id: number
     name: string
     email: string
     age: number
     admin: boolean
   }
}

export type User = Pick<
    BaseApi<
     ApiResponse.User,
     "email" | "age",
     "user",
     "users",
    >,
    "data" | "index" | "get" | "post" | "patch"
>


```
例えば、Userの一覧を取得するAPIで
axiosを用いて通信する関数の戻り値に対して、以下のように使える。

```typescript

getUsers(): Promise<AxiosResponse<User['index']>> {
...省略
}
// response.dataがこのようになる場合に有効
//{ users: [ { id: 1, name: "name", email: "email", age: 20, admin: true} ...省略 ] }
```
fzfを用いてAWS CLIプロファイル簡単切り替え


# 簡単に aws cli のプロファイルを変更したい

表題の件について調べたところ、該当する npm パッケージを発見。
https://github.com/johnnyopao/awsp

しかし当方の`node v14`環境で正常に動作しなかったので、fzf で関数自作しました。

## fzf

fzf とは、cli 上でのあいまい検索および結果選択が可能になる、GO 製の CLI ツールです。
peco とよく比較されます。
詳細は以下記事等参照
https://qiita.com/kamykn/items/aa9920f07487559c0c7e

### fzf のインストール

```bash
$ git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf
$ ~/.fzf/install
```

## シェル設定ファイルに関数追加

`~/.aws/config`を参照して、profile 一覧を取得し、その中からプロファイルを fzf で選択する、という挙動の関数を作成します。
`.bashrc`や`.zshrc`に以下関数定義を追記します。

Linux 用

```bash
function awsp() {
  local profile=$(grep -o -P '(?<=\[profile )[^\]]+' ~/.aws/config | sort | fzf )
  export AWS_PROFILE="$profile"
}
```

Mac では aws コマンドで実装`default`が選択肢に含まれてしまうが、妥協)

```bash
function awsp() {
  local profile=$(aws configure list-profiles | sort | fzf )
  export AWS_PROFILE="$profile"
}
```

(2021/10/1 追記)
単純に sed を加えれば、`default`非表示にできる

```bash
function awsp() {
  local profile=$(aws configure list-profiles | sed "/default/d" | sort | fzf )
  export AWS_PROFILE="$profile"
}
```

## 自作 fzf 関数を呼び出して AWS CLI プロファイルを切り替え

関数定義後に、シェル再起動(`exec $SHELL -l`)や設定ファイル再読み込み(`source ~/.zshrc`)を実施しシェルに反映させます。
あとは、シェルで`awsp`コマンドを打つだけでプロファイルを切り替えられるようになります。

## 余談 1：zsh プロンプトに aws profile 選択状態を表記

本家 awsp のレポジトリの README.md 参照に書けます。以下を`.zshrc`に追記してシェルに反映させることで、プロンプトに aws cli のプロフィール選択状態が反映されます。
プロンプトに表示される文字色が気に入らない場合は、下記の`blue`や`yellow`の部分を好きな色に変更してください。
`black`, `red`, `green`,`yellow`,`blue`,`magenta`, `cyan`, `white`が指定できます。
https://wiki.archlinux.org/title/zsh#Colors

```bash
autoload -Uz colors
colors
function aws_prof {
  local profile="${AWS_PROFILE:=default}"
  echo "%{$fg_bold[blue]%}aws:(%{$fg[yellow]%}${profile}%{$fg_bold[blue]%})%{$reset_color%} "
}
PROMPT+="\$(aws_prof)
```

## 余談 2: aws cli が参照する環境変数

上記の実装内容通りですが、aws cli は環境変数`$AWS_PROFILE`の値を参照してプロファイル設定に反映させます。
このとき`~/.aws/config`の[default]プロファイルを使用する動作は上書きされます。
`--profile`オプション付きのコマンド実行では、コマンドラインパラメータが優先されます。

他にも色々な環境変数を設定値として参照できたりします。
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-envvars.html
Laravel8:ログイン後にユーザーごとのページ（マイページ）にリダイレクトさせる

## 前提
PHP7
Laravel8
Jetstream
を導入済み

## やりたいこと
jetstreamのログイン機能でログインしたあと、各ユーザーのIDごとのページにリダイレクトさせたい。


## 準備

RouteServiceProviderの「HOME=◯◯」の部分にリダイレクトさせたいURLを入れる。
このとき、◯◯の部分は第2引数を持てないのでここでは一旦「redirects」というアドレスに飛ばして、その後パラメータ付きのURLに遷移させる。

```app/Providers/RouteServiceProvider.php
class RouteServiceProvider extends ServiceProvider
{
    /**
     * The path to the "home" route for your application.
     *
     * This is used by Laravel authentication to redirect users after login.
     *
     * @var string
     */
    public const HOME = 'redirects'; //ホーム画面としてリダイレクトしたいアドレスに変更
```

ルーティング。ここでは関数indexを立ち上げる。

```routes/web.php
use App\Http\Controllers\RecordUsersController;
// ユーザー投稿の一覧表示画面
Route::get('/record/user/{user_id}', [RecordUsersController::class, 'show_by_user'])->name('show_by_user_record');s

use App\Http\Controllers\Auth\LoginController;
Route::post('logout',[LoginController::class, 'logout'])->name('logout');
Route::get('redirects',[LoginController::class, 'index']);//追記
```

ログイン後のリダイレクト先を指定する。

```app/Http/Controllers/Auth/LoginController.php
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\Record; 
use App\Models\User;

class LoginController extends Controller
{
    public function index(Request $request)
    {
        $user = Auth::user();
        return redirect(route('show_by_user_record',
    [
        'user_id' => $user->id
    ]));
    }
```

これでログイン後はマイページにリダイレクトされるようになった。



## 困ったこと

下記エラーが表示されてなかなか進めなかった。

```
Illuminate\Routing\Exceptions\UrlGenerationException
Missing required parameter for [Route: show_by_user_record] [URI: record/user/{user_id}] [Missing parameter: user_id].
```

エラーが出ているときのLoginController

```/app/Http/Controllers/Auth/LoginController.php
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\Record; 
use App\Models\User;

class LoginController extends Controller
{
    public function index(Request $request)
    {
        return redirect(route('show_by_user_record'));
    }
```

「/record/user/{user_id}」のパラメータにどうやって値を渡せばいいのかわかなくてハマった。
「$user = Auth::user();」がないとユーザー情報が渡せないことになかなか気づかなかった。
.suffix( )で文字列から指定した文字数分だけ取得

#今回の内容

* `.suffix()`を使用して、文字列から指定した文字数分だけ取得
 * 例　: abcからbcだけを取得する


#コードと簡単解説

* `.suffix(Int)`は、文字列の終わりから１文字目に向けて`Int`で指定した数値分だけ値を取得します。

```Swift:

    let stringOne = "abcdefg"
    let stringTwo = "1234567"

    override func viewDidLoad() {
        super.viewDidLoad()
      
        print(stringOne.suffix(2))
        print(stringTwo.suffix(5))        
        print(stringTwo.prefix(3).suffix(2))  //prefixで123を取得して、suffixで123から23だけを取得します。
    }
``` 

```:print結果
fg
34567
23
```

#終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
MacでfbxをgLTF（GLB）に変換する方法

MacでfbxをgLTF（GLB）に変換する方法をまとめます。

## fbxファイルの用意
Fusion360などのツールを使って、fbxファイルを用意します。

UnityのPrefabを.fbxに変換する場合は、以下の手順でExportを行えます。
[Unity上の3Dオブジェクトをfbxフォーマットでエクスポートする - Qiita](https://qiita.com/tichise/items/77d0a909aac05ca20966)

## FBX2glTFのダウンロード
変換にはfacebookincubatorが配布してる[FBX2glTF](https://github.com/facebookincubator/FBX2glTF/)を使います。

以下のページからFBX2glTF-darwin-x64をダウンロードします。
https://github.com/facebookincubator/FBX2glTF/releases

ダウンロードしたらターミナルで以下を実行して、FBX2glTF-darwin-x64を実行できるようにします。

`chmod +x FBX2glTF-darwin-x64`

## fbxをgLTF（GLB）に変換する
ターミナルで以下の様なコマンドを実行すると、fbxファイルをgLTF（GLB）に変換できます。

`./FBX2glTF-darwin-x64 -b -v result.fbx`
SOLID原則についてザックリ学ぶ

## 単一責任の原則（SRP）

モジュールやクラスや関数などを改修する理由は、**たった1人のアクター(user)**に対してのみ行う

### つまり？

- あるクラスがユーザーとオペレータと管理者向けの機能を全部持っていると、修正時の影響範囲が把握できない
- 単一のアクターに対して機能提供できるように分割しましょう
    - 例) ユーザー向けの機能、オペレータ向けの機能、管理者向けの機能を分離する

## オープン・クローズドの原則（OCP）

作成したクラスや関数などを変更せずに、新たにコードを追加するだけで対応できるようにするべき

### つまり？

- 既存の処理に手を入れないで仕様変更が出来るようにする

## リスコフの置換原則（LSP）

SがTの派生型であれば、T型のオブジェクトが使われている箇所はS型のオブジェクトで置換できる

### 仕様書Tの実装であるS1、S2の呼び出し方は、Tの呼び出し方と同じでないといけない。

- S2固有の呼び出し方などは許されない
- 戻り値や副作用もTで決まってる範囲は、必ずS1、S2も実装されているべき
    - 本来stringが帰ってくるはずなのに、S1の場合だけnumberを返したり、nullを返したりしてはいけない

### つまり？
- Tの使用を満たすSなら、それは他のものと置換してもいい
- Tとして宣言されてる場所では必ずTという想定で扱う

## インターフェース分離の原則

インターフェースによって不要な実装が強制されないようにする

例) 犬は飛ばないけどインターフェースにfly()メソッドが用意されてる

### つまり？

- インターフェースを複雑にしてはいけないので、分離できるものは分離する
- 1つのインターフェースに何もかもぶち込むんじゃない
    - 最小限のものだけを定義しておき、別の役割をもったインターフェースを作ろう

## 依存性逆転の原則

変更されやすいもの(実装の詳細)には依存せず、安定したもの(抽象)に依存させる

### つまり？

- 変化しやすいもの具象(実装クラス)には依存せず、安定している抽象(抽象クラスやインターフェース)に依存させる。
- インターフェイスは変化しにくいが、実装クラスは変化しやすい
[Swift]アプリの立ち上げ、画面遷移をコードで行う方法

複雑な画面遷移を行うアプリでStoryboardで行うと、Segueが入り混じりとんでもないことになるのが予想されます。

それを避けるため、コードで遷移する方法を簡単に実装します。

#完成形
![スクリーンショット-2021-09-25-22.37.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112697/b009d13f-4daa-4bc9-ae95-806c12ac7a50.png)


#目的
可読性が良い、改修のしやすいコードにする

#事前準備
①Info.plistのMain storyboard file base name　を削除
②SceneDelegateを削除（iOS12以前にも対応可能にするため）

#コード

##①AppDelegate

```ruby:AppDelegate.swift
import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

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

        let window = UIWindow(frame: UIScreen.main.bounds) 
        #//ウィンドウをインスタンス化する

        self.window = window 
        Router.showRoot(window: window) 
        #// 初期Viewの取得はRouterクラスで行う

        return true
    }
}
```

##②Router

画面遷移の処理はこのクラスで全て行う。

```ruby:Router.swift

import UIKit

final class Router {

   # // アプリ起動時にrootViewを取得する処理
    static func showRoot(window: UIWindow?) {
        let firstStoryboard = UIStoryboard(name: "First", bundle: nil)
        let firstVC = firstStoryboard.instantiateInitialViewController() as! 
        FirstViewController
        let nav = UINavigationController(rootViewController: firstVC) 
     #// ナビゲーションコントローラーを定義。引数で最下層となるViewを指定
        window?.rootViewController = nav
        window?.makeKeyAndVisible()
    }

   # // 2つ目のViewへ画面遷移する処理
    static func showSecond(fromVC: UIViewController) {
        let secondStoryboard = UIStoryboard(name: "Second", bundle: nil)
        let secondVC = secondStoryboard.instantiateInitialViewController() as! SecondViewController
        show(fromVC: fromVC, nextVC: secondVC)
    }

   # // 実際に画面を遷移させる処理
    private static func show(fromVC: UIViewController, nextVC: UIViewController) {
        if let nav = fromVC.navigationController {
            nav.pushViewController(nextVC, animated: true)
        } else {
            fromVC.present(nextVC, animated: true, completion: nil)
        }
    }  
}


```

#③FirstViewController

立ち上げた時に出る画面

```ruby:FirstViewController.swift

import UIKit

class FirstViewController: UIViewController {
   # // ボタンを押した時の処理
    @IBAction func tapGoSecond(_ sender: UIButton) {
        Router.showSecond(fromVC: self)
    }
}

```

#④SecondViewController

遷移した後の画面

```ruby:SecondViewController

import UIKit

class SecondViewController: UIViewController {
    // ボタンを押した時の処理
    @IBAction func tapGoThird(_ sender: UIButton) {
        Router.showThird(fromVC: self)
    }   
}

```

#追記

以上がコードで書く画面遷移のやり方となります。

複雑な画面遷移を必要とするアプリの場合、このように切り離すことで、可読性が良くなり改修もしやすくなると思います。
Mac STSでSpringスターター・プロジェクトが作れない

####MacでSpringスターター・プロジェクトを作成しようとすると入門コンテンツインポートのところで永遠に終わらない。

（例）
![スクリーンショット 2021-09-25 23.33.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347341/c6bc6eea-1c01-8c00-6beb-1c4eaa545bda.png)


→STS４基地の問題。Eclipseでは実行できるとのことなので、解決するまではEclipseで実行するのが良さそう。
スターター・プロジェクトのウィザードで依存関係を選ぶときに何も選ばず次へを選択すればプロジェクト自体は作れるので、その後pom.xmlにちまちまmavenプロジェクト追加すレバ同等のプロジェクトを作成することは可能でした。
https://github.com/spring-projects/sts4/issues/683


〜後日談〜
日を改めて再度スターター・プロジェクト作成したらものの数秒で完成した。
結論：日による
Singleton の使用例


|関連記事のトップページ|
|:--|
|[[シリーズ] Python におけるデザインパターンの記録](https://qiita.com/robozushi10/items/3c1c0d1b1fbf7b38a33b)|

## 概要

個人的には、Python での Singleton の使用頻度は非常に高い.

が、下記 URL にあるように Singleton の実装方法は何通りもあり、
どれが適切なのかが分からない.

・https://try2explore.com/questions/jp/10006686
・https://try2explore.com/questions/jp/10158296


私は次のように "静的"変数である `__share_state` を使う実装を拝借させてもらっている.[^1]


```python
class Singleton(object):
  _share_state = {}
  def __new__(cls, *args, **kwargs):
    obj = super().__new__(cls, *args, **kwargs)
    # "静的"変数 _share_state へのポインタを obj.__dict__ に格納する
    obj.__dict__ = cls._share_state
    # obj を __init__(self) へ渡す
    return obj

class KlassA(Singleton):
  def __init__(self):
    # Singleton クラスの "静的"変数 _share_state に書き込まれる
    self.name = ''
    self.age  = 0

if __name == '__main__':

  a = KlassA
  a.name = 'Qiita'
  a.age  = 10
```

なお、参考情報として、[pypattyrn](https://github.com/tylerlaberge/PyPattyrn) という Singleton, Decorator,  Iterator, Observer などの
デザインパターンを提供するサードパーティパッケージでは次のような実装であった.

```python
class Singleton(type):
    """
    Singleton Metaclass.

    Enforces any object using this metaclass to only create a single instance.

    - External Usage documentation: U{https://github.com/tylerlaberge/PyPatterns/wiki/Creational-Pattern-Usage}
    - External Singleton Pattern documentation: U{https://en.wikipedia.org/wiki/Singleton_pattern}
    """
    __instance = None

    def __call__(cls, *args, **kwargs):
        """
        Override the __call__ method to make sure only one instance is created.
        """
        if cls.__instance is None:
            cls.__instance = type.__call__(cls, *args, **kwargs)

        return cls.__instance
```

　

以上.


[^1]: `__new__()`, `__init__()`, `__dict__` の機構が理解できて、且つ、この方法で都合が悪かったことも無いため
Rubyのインストール（簡易）

Windows WSLのubuntu20.04にRubyをインストールしようとして数回失敗。

以前、Chromebook(Debian: penguin)にRubyをインストールしたときはあっさり入ったのになぜ？と言うことで、成功していたChromebookのhistryを見て同様のことをwsl のubuntu20.04に行ったらあっさりインストールできた。

```bsh:rubyinstall
sudo apt-get install ruby -y
```

これだけで出来た。
（というか、apt-get install rubyって普通ですよね。Rubyのバージョン管理ツールrbenvやらを意識したインストールで失敗したので・・・。）

作業を行った2021年09月時点では ruby 2.7.4 (ver. 2の最新）がインストールされた。

rbenvとか使用しないのであればとりあえず。
【Rails】学習アプリにおける進捗状況をprogressバーで表現する

rails 初学者のアウトプット用投稿です。同じ結果を得られるより良い書き方がございましたらコメントでご教示頂けると幸いです。

#実現したいこと
学習アプリ作成においてユーザーの個人ページ（user_controllerのshowアクション)に一週間、どのくらい学習を行なったのかをhtmlのprogressタグで見える化する。

今回はanswerモデルにそれぞれの学習内容が保存されており、answerの作成数をカウントし、それを学習量の算出基準とする。

イメージ図（下記）
![FEBA03C7-F478-4A4E-B8ED-545C9F588945_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1640672/72761668-1709-023e-484d-fe2c0051f2b2.jpeg)

#実装の流れ
①userに紐づいたanswerモデルから一週間分のデータを配列として取り出す。

②①で取り出したデータからさらに曜日だけを配列として取り出す。

③show.html.erb内のprogressタグ、value属性の値に②の配列の数を代入する。

#実際のコード

```
def show
 @wdays = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
    @contributions = @user.answers.where(created_at: Time.current.all_week)
    @contributions = @contributions.map{|days| days.created_at.strftime('%a')}
end

```
@wdaysに曜日を配列として保存。
where(created_at: Time.current.all_week)で一週間以内の日にちが含まれるcreated_atを有するデータを検索できる。
created_at.strftime('%a')で曜日だけを取り出せる。


```ruby:show.html.erb
<% @wdays.each do |day|  %>
    <section>
      <span><%= day %></span><progress value=<%="#{@contributions.count{|i| i == day}}" %> max="30"></progress>
      <span><%="#{@contributions.count{|i| i == day}}" %></span></section>
<% end %>
```
progressタグのvalue属性にanswerの数分の曜日が収容されている@contributionsを埋め込み、それぞれの曜日に保存されたanswerの数をcount{|i| i == day}で取得し、表示する。
ABC83 C - Multiple Gift を解いた

https://atcoder.jp/contests/abc083/tasks/arc088_a

![abc83_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/4175301d-bb50-50a6-1506-cd782ba6c29e.png)
![abc83_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/09475485-7d29-cd50-d18e-202cacf632b1.png)
![abc83_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/319b65fc-8d43-3275-9783-23622b1a8147.png)
![abc83_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/f00845b8-9632-7231-fef9-bafb09278d5d.png)
![abc83_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/5352bada-5e1c-c3ae-8ad7-b74b2af5ebcb.png)

数列を長くするのであれば、Ai+1,Ai の倍数はなるべく小さい方がいい。2 じゃね？
とりあえず、2 倍で数列を作って、配列長を答えとしてみる。

```MultipleGift.py
x,y = map(int,input().split())

lis = [x]

for i in range(1,10001):
    if lis[i-1]*2 <= y:
        lis.append(lis[i-1]*2)
    else:
        break

print(len(lis))
```

***

以下の記述の方がイメージしやすいし、
読みやすいかも。

```abc83c.py
X,Y = map(int,input().split())

lis = [X]

while True:
    if X*2 <= Y:
        X = 2*X
        lis.append(X)
        if X == Y:
            break
    else:
        break
print(len(lis))
```
Arduino DueにJ-Linkを接続、J-Scopeで波形表示する

# はじめに
[J-Scopeが便利！](https://qiita.com/motorcontrolman/items/c1910c5a51fb29a700fd)という話は以前にもしていますが、ST以外のマイコンでやる方法が(自分の中で)よく分からず困ったので自分用に書き残します。

# 1. Arduino DueとJ-Linkを接続(物理)
seggerのデバッグプローブである[J-Link](https://www.embitek.co.jp/product/jlink-edu.html)ですが、マイコンとの接続端子は20pinのJTAGとなっています。

これに対し、Arduino Dueのデバッグ用端子は10pinのJTAGとなっています。
[Arduino Due+自作JTAGアダプタでスケッチのソースレベルデバッグしてみた](http://projectc3.seesaa.net/article/316575195.html)

ということで、まずは変換ケーブルを購入する必要があります。
DegiKey等で1000円程度で購入可能です。
[ARM-JTAG-20-10](https://www.digikey.jp/product-detail/ja/olimex-ltd/ARM-JTAG-20-10/1188-1016-ND/)

接続しました。(スパゲッティ配線すいません)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302506/d275036e-d9ce-e719-2fc9-abcce7edf7d7.png)

# 2. Arduino DueとPCの通信可否を確認
この作業は省略しても良いのですが、自分の場合<b>elfファイルの素性がアレでJ-Scopeが動作しない</b>という特殊なケースに見舞われたため、原因を見極める目的でelfファイルを使わず接続のみ確認する方法について記述します。

具体的にはJ-Link Software and Documentation Pack　に同梱されているJ-Link Commanderを使います。
https://www.segger.com/downloads/jlink/#J-LinkSoftwareAndDocumentationPackBeta

`connect`してデバイスを`ATSAM3X8E`に指定、インターフェースを`JTAG`もしく`SWD`に指定してあとはデフォルト設定とすることで、物理的な接続が間違っていなければ通信可能であることの確認が出来るかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302506/f4041818-4c82-a8fb-5a53-2e4345d92da5.png)

接続確認できたらJ-Link Commanderは閉じてOKです。

# 3. Arduino DueとJ-Scopeを接続
基本的な設定についてはJ-Link Commanderと同じですが、elfファイルが必要となります。
Arduino IDEを利用している場合、elfファイルがどこにあるかを探しに行くよりビルドフォルダを変更してしまったほうが早いです。
[Arduino IDE | Intel Galileo Arduino IDEのビルドフォルダを変更する ](https://neo-sahara.com/wp/2015/12/23/arduino-ide%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%97%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AF%E3%81%A9%E3%81%93%E3%81%AB%EF%BC%9F/)

設定は下記の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302506/e1e3b134-f927-0259-02c2-1461dae86e39.png)

わーいエンコーダ信号だ~。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302506/18b2ed09-f56b-f62b-360c-4af0173c48e4.png)
React で折り畳み (Collapse) をアニメーション付きで実装する

React で折り畳み (Collapse) をアニメーション付きで実装しました。

![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163276/661c4995-a29c-b8fa-66ff-584884e07d38.gif)

ちょっとハマったので記録を残しておきます。

# 実装コード

```tsx:App.tsx
import { useState } from 'react'

import './App.css'

const App = () => {
  const [open, setOpen] = useState(false)

  const onClick = () => setOpen((prev) => !prev)

  return (
    <>
      <button onClick={onClick}>{open ? 'close' : 'open'}</button>
      <div className={`collapse ${open ? 'visible' : 'hidden'}`}>example</div>
    </>
  )
}

export default App

```

```css:App.css
.collapse {
  transition: height 300ms;
  overflow: hidden;
  color: white;
  background-color: #333;
}

.visible {
  height: 30px;
}

.hidden {
  height: 0;
}
```

# CSS のポイント

- 折り畳み (Collapse) を開いた時と閉じた時で height を切り替える
- `transition: height {X}ms;` を指定する
- `overflow: hidden;` を指定する

# ハマった箇所

## `overflow: hidden;`

`overflow: hidden;` を指定しないと、子要素(例だと「example」というテキスト)がアニメーションに関係なく表示されてしまいます。
![ezgif.com-gif-maker (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163276/85a33abd-471e-a741-83aa-81ab378db51e.gif)
[stack overflow の記事](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css?rq=1)を見て `overflow: hidden;` を指定する事に気づきました。

## `display: none;`

元は [Bootstrap の Collapse](https://getbootstrap.jp/docs/4.2/components/collapse/) を真似て作ろうと思ったのですが、元のソースコードを眺めていると非表示時は `display: none;` が[設定されていました](https://github.com/twbs/bootstrap/blob/60d3eb34f8a1aabe5d2a2308bb841f30cf16c9c4/dist/css/bootstrap.css#L3442)。
この部分だけ読んでいた自分が早合点した可能性もありますが、 `display: none;` だと DOM がマウントされていないので transition が機能しませんでした。
9.25　git status　　　ActionController::UrlGenerationError

<h2>git pushする前にgit statusすること</h2>
<p>どのファイルいじったか、違うのいじってないかわかる</p>
```
git status

git add .

git commit -m "コミットメッセージ"

git push (origin mainなど)
```

<h2>ActionController::UrlGenerationError　定義していないもの使ってエラーかました</h2>
<p>@patient_idがnillになる</p>
<p>@patient_idを定義していないため使えない</p>
```
 def create
    @patient = Patient.find(params[:patient_id])
    @record = Record.new(record_params)
    @record.patient_id = @patient.id
    return redirect_to staff_patient_record_path(@patient_id, @record) if @record.save
    render :new
 
  end
```
@patient.idにした

```
def create
    :                                            ↓↓↓↓↓↓↓↓↓↓
    return redirect_to staff_patient_record_path(@patient.id, @record) if @record.save
    render :new
 
  end
```
AWS Certified Database - Specialty を取得した


# 前回のお話

https://qiita.com/morio1101/items/a7211d9b77f3c5d92550

# はじめに

本記事は、将来再認定を受けるときの備忘録でもあります
本記事を見る時点で大体AWS認定試験のことや、Database のことは大体理解されている前提で記事をまとめたいと思います


## 目指した経緯

AWS WEB 問題集で学習しようを使った学習がメインでした
ただ、データベースは、AWS WEB 問題集では取り扱ったばかりで問題数は乏しい（2021/09次点）＋プロフェッショナルの有効期限が切れて（ここが重要）良い区切りだったので Database を目出すことにしました

# 試験を受ける前の私のスペック

* AWS を使った業務経験は最低限はある
    * EC2 関連がメインであり、DB 関連はほぼ知らないに等しい状態
* AWS認定試験は以下を取得
    * アソシエイト資格3種
    * スペシャリティ 試験3種
        * データアナリティクス
        * セキュリティ
        * ネットワーク

# 学習教材

* AWS 認定データベース・専門知識
* Udemy
    * Practice Exam | AWS Certified Database Specialty
    * AWS Certified Database Specialty Practice Exams
*  ブラックベルト

※ 酔っぱらいながら書いているので、リンクはまたシラフの時に追加できれば行います
（需要がなさそうであればそのまま放置します。スペシャリティの試験はそこまで興味がある人は少なそうなので…）

# 学習期間

9/6 - 9/21
（基本的に試験取得した前後は休みを取りがち）

# 学習方法

## 書籍学習（9/6-9/21）

### 書籍を読む
スペシャリティで書籍が存在するのはセキュリティとデータベースのみ
WEB問題集も問題に乏しいので、取っ掛かりとしてデータベースの書籍を用いた
※ 9/13 ぐらいまでは読んでいた模様

### 問題を解く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532289/360611e3-2d04-0756-24bc-40b066296152.png)

基本的にはスプレッドシートで解答をまとめていた
その実績ベースでみると、試験を受けるまでに模擬試験は4回実施した
※ 100% 正解は一度もできていない orz

## Udemy の学習（9/14-21）

不安に思ったので、問題集を追加した

### 前提

英語が読めないので、基本的にChromeの日本語翻訳を有効にした状態＋翻訳した問題が理解できなければ、DeepL の翻訳を用いていた

### 取り組み方

#### 模擬試験以外の着手

65問の問題以外にサブ問題があったので、それらの問題を解いていた
9/14 - 16 の期間に、65 問の模擬試験以外を2～4週実施した
初回はすべて不合格で、2周目不合格は1回あったがそれ以外は90～100%という感じだった


#### 模擬試験の着手

9/18 -21 まで実施して、それぞれ3週実施した
初回は60%台で、最終は95%程度
※ 100% 正解は一度もできていない orz

## AWS 提供の模擬試験の実施（9/20）

```
総合スコア: 65%

トピックレベルスコア:
1.0  Workload-Specific Database Design: 100%
2.0  Deployment and Migration: 25%
3.0  Management and Operations: 100%
4.0  Monitoring and Troubleshooting: 50%
5.0  Database Security: 50%
```

普通に不合格でした…が、本試験よりかなり難しい印象でした

## ブラックベルト（9/21）

https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/

やることもなかったので、Databases の弱そうな部分を読んでいた
なんとなくわかるという感じにはなっていた

## 試験当日

英語読めないので過去問できるわけでもなく、本を読んでも仕方がないしと思って ~~ドラクエウォークしてた~~ 瞑想していました

# 試験結果

26問ぐらいは2択に絞り込みその中の一部は自信があるぐらいだった
それ以外は勉強した知識であっているという手ごたえは感じれた

65問なので、75%合格とすると49問正解が合格ラインとなる
2択まで絞り込んだ上で自信ありと、合っているだろうと思えた問題の合計が49問で合格している確率のほうが高いと思って採点ボタンを押した

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532289/59e557f4-faa5-bb7d-16d2-5944c40d3e1f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532289/a2752d8d-d3a5-3ac7-9e38-f1106db1ba02.png)

結果として、ギリギリの点数だった:sweat_smile:
実際の採点はわからないが、自信をもって答えた問題以外落としている可能性がとても高い結果になり、結果から見る限りだと受かったのは奇跡かもしれない

問題集の切り口に近い問題が多めに感じた(事細かい上限数とかはほぼ問われなかったが、このエラーが起きる原因は？とか、問題文に対してどの選択がベストかとかは結構問われた)
そのうえで、問題集や参考書から学んだ知識で解答を導き出せなかったのは2問あった

# 最後に

残る試験はスペシャリティの機械学習と、プロフェッショナル2種となった
個人的には残った試験全部ピーキーと思っている

WEB問題集の問題がそこそこあるので、再契約して残りの試験（次はSAP or DOP）を目指したいと思っているが、この休みはちょっとお休みして英気を養う予定:sweat_smile:

残り試験どの資格から攻めるのがいいかも的なアドバイスがあれば募集中したいです:bow:
ABC86 C - Traveling で自分の成長を感じた

https://atcoder.jp/contests/abc086/tasks/arc089_a

![abc86_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/1e962333-adda-9225-1db8-01e5f0c8fb52.png)
![abc86_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/68b221b2-d812-678a-8e0e-54d18bc96724.png)
![abc86_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/3e05bab8-7a1f-23b9-dd7e-a7492e1d1efc.png)
![abc86_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/16b635d1-27a7-6586-ba59-c789346353de.png)

t,x,y を受け取る度に NG の条件に引っかからないか
見てあげればいい。

とりあえず書いたら、
For のネストも不要だったので、
たぶん行けると踏んだ。

```Traveling.py
from sys import exit
N = int(input())
rear = 0
x0,y0 = 0,0
for _ in range(N):
    curent,x1,y1 = map(int,input().split())
    if curent-rear == abs(x1-x0)+abs(y1-y0):
        x0,y0 = x1,y1
        pass
    elif curent-rear < abs(x1-x0)+abs(y1-y0):
        print("No")
        exit()
    else:#<= 注意!
        diff = (curent-rear) - (abs(x1-x0)+abs(y1-y0))
        if diff%2 != 0:
            print("No")
            exit()
    rear = curent
print("Yes")
```

上記で一応通ったけど。たぶん上記のコードには問題がある。
コメントにあるように "注意!" の個所を通過する場合、
それが連続する可能性もあるので x0,y0 = x1,y1 を追記すべきかも。
※それっていうのは。超過した分を近端で往復することで帳消しにする座標 の事。

```Traveling.py
from sys import exit
N = int(input())
rear = 0
x0,y0 = 0,0
for _ in range(N):
    curent,x1,y1 = map(int,input().split())
    if curent-rear == abs(x1-x0)+abs(y1-y0):
        x0,y0 = x1,y1
        pass
    elif curent-rear < abs(x1-x0)+abs(y1-y0):
        print("No")
        exit()
    else:
        diff = (curent-rear) - (abs(x1-x0)+abs(y1-y0))
        if diff%2 != 0:
            print("No")
            exit()
        else:
            x0, y0 = x1, y1 # <= もし超過した分を近端で往復することで帳消しにする座標が連続する場合は
                            #    ちゃんと座標を保存して次に行かないと WA になる。
    rear = curent
print("Yes")
```

成長を感じた筈だったが、
未熟さを感じた問題でもあった(笑)
【Excel】表の計算式を動的に設定する

# はじめに

エクセルの表計算を、スピルとINDIRECT関数でちょっとだけ簡単・効率化します。

# サンプルとする明細

品名に対する金額を取得し、個数と掛け算して金額を算出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/6e09a246-2f23-a388-e591-ae58ef5bb25e.png)

A～C列：手入力
D列：K～L列の表から品名に紐づく金額を取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/e62c0388-d68b-68fa-508a-df561c4c4267.png)
E列：単価と個数をかけて金額を算出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/82f5111d-5925-2ea6-da9f-36e6ae4a37f7.png)
K～L列：品名に対する金額を設定、LookUPで参照します。

D・E列の計算式は、明細数分コピペする必要があります。
明細が追加される都度、コピペするのは面倒です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/096ab53f-c9b8-f951-883c-97d43209c4b9.png)
→5行目を追加しましたが、当然それだけでは計算されません。

# スピル機能を使って少し簡単にする

D列、E列の計算式を変更します。

D列：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/d77453ec-b194-2c3a-45c7-c79d1e7d55f2.png)
（明確な意図はないですが、xlookupにしました）

E列：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/7a029ea2-0058-6824-c474-0b41724711de.png)

結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/6e09a246-2f23-a388-e591-ae58ef5bb25e.png)
2行目に計算式を指定するだけで、同じ結果が取得できます。（見た目は変わりませんが）
ただし、これでも明細が追加される都度、計算式の修正が必要です。

5行目の明細追加に対応：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/213511ec-ca42-ff49-2933-d07d79f30d5b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/897502a3-5716-8629-966d-60dba2d7d799.png)
それぞれスピル範囲を、B2:**B4**→B2:**B5**、C2:**C4**→C2:**C5**　に変更しています。
もっと簡単にしたいです。

# INDIRECT関数で明細の追加に追従させる

D、E列の計算式のスピル範囲を、INDIRECT関数でを指定します。

D列：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/8c7536b4-cfdb-36b7-40e0-1f5aa84b9664.png)
E列：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/1cd19b81-7dbb-58ea-41f4-285d34a873ff.png)
スピル範囲を動的にするため、INDIRECT関数を使用します。
D列の場合、**変更前 B2:B4**　→　**変更後 INDIRECT("B2:B"&COUNTA(A:A))**　としました。
スピル範囲の最終行（変更前の"4"）を動的にするため、INDIRECTで**"B2:B"**まで文字列指定、
最終行を**COUNTA(A:A)**で取得して&で文字列結合します。これにより、明細が追加される都度、
COUNTA(A:A)で最終行を取得するため、計算式も明細に追従するようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/d16c96f2-5a4e-7950-f462-2cb510dc0798.png)
A～C列を入力するだけで、D・E列の計算式が追従します。
### 注意点
1. COUNTAで明細行を取得する行は、必須項目である必要がある<br>
　 →未入力があり得る項目だと、行数計算がおかしくなります。
1. 行・列に挿入があると関数の再設定が必要<br>　 →INDIRECT関数で固定文字列で指定しているため、行・列挿入に相対的に変更されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/14d27f3d-929c-6d76-b71c-f38d6a1bc14d.png)
項目を追加しようとB列を挿入しましたが、正しい計算結果が得られなくなりました。<br>

1. INDIRECT関数を使ったことにより、関数の視認性が悪くなる<br>　 →なれるしかない。