OmniAICreator/Qiita-1.07M huggingface dataset:
Dockerでsshサーバ構築

"相手サーバにsshでログインして・・・"という実装の動作確認をローカル開発環境で完結させたい時に。

1. 鍵ファイルを作っておく

    ```bash
    cd /path/to/project/local-ssh-server
    ssh-keygen -t rsa -b 4096 -C "localtest@example.com" -f 
    id_rsa_localtest
    mv id_rsa_localtest.pub authorized_keys
    ```

2. /path/to/project/local-ssh-server/Dockerfileを作る

    ```
    FROM amazonlinux:2
    RUN yum install -y shadow-utils \
        && yum install -y sudo \
        && yum install -y openssh-server
    RUN useradd localtest
    RUN mkdir /home/localtest/.ssh && chmod 700 /home/localtest/.ssh
    ADD authorized_keys /home/localtest/.ssh/authorized_keys
    RUN chmod 600 /home/localtest/.ssh/authorized_keys
    RUN chown -R localtest:localtest /home/localtest/.ssh
    WORKDIR /home/localtest/
    ```

    amazonlinux:2なのは、使い慣れてるから、というだけの理由です。

3. /path/to/project/Dockerfileに以下を追加

    sshクライアント
        = 開発プログラム稼働サーバ
        => /path/to/project/Dockerfileでビルド
    を想定。

    ```
    RUN mkdir /root/.ssh && chmod 700 /root/.ssh
    ADD ./local-ssh-server/id_rsa_localtest /root/.ssh/id_rsa_localtest
    ```

    
4. /path/to/project/docker-compose.ymlを更新

    `local-ssh-server:`以下を追加

    ```
    version: '3'
    services:
      project_name:
        container_name: "project_name"
        build: ./
      ・
      ・
      ・
      local-ssh-server:
        container_name: "local-ssh-server"
        build: ./local-ssh-server/
        privileged: true
        environment:
          TZ: Asia/Tokyo
        ports:
          - "22:22"
        command: /sbin/init
    ```

5. 確認

    ```bash
    cd /path/to/project/
    docker-compose up -d --build
    docker exec -it project_name /bin/bath
    ```

    project_nameコンテナにログインして、以下でssh接続できればOK!

    ```bash
    ssh -i /root/.ssh/id_rsa_localtest localtest@local-ssh-server
    ```
アソシエーション定義方法について調べてみた

## はじめに
現在アプリ制作を行っています。作成したER図を元にメンバーの方がmodelを作成してくださったのですが、コードレビューする際に知らないオプションがありなにこれ？となったため、いい機会だと思いどんなオプションがあるのかを調べてみました。


## アソシエーションとは？
アソシエーションとはモデル間の関連付けのことで、簡単に言うと**２つ以上のテーブルの関係性を定義する**ことです。

関係性を定義することで、複数のテーブルにまたがるデータを簡単に取り出せるようになります。


## 前提
- 今回の記事では、以下３つのテーブルがあるときの関係性を例に考えてみます。

| Users | Communities | Documents |
|----|----|----|
|id|id|id|
|name|name|title|
|email||body|
|||owner_id|
|||writer_id|

### テーブル同士の関係性

#### 1. UsersとCommunitiesの関係　(多対多)
- 1人のユーザーは複数のコミュニティに属す。
- コミュニティには複数のユーザーが含まれる。
#### 2. UserとDocumentsの関係 　(1:多)
- 1人のユーザーは複数のドキュメントを持つ。
- ドキュメントは1人のユーザーが書いたものである。

#### 3. CommunitiesとDocuments
- 割愛

以上のように3つのテーブル間には`1対多`もしくは`多対多`の関係が成り立つことが分かり、この関係を踏まえた上で作成したER図が下記になります。

<img width="928" alt="スクリーンショット 2021-04-20 16.43.38.png (40.6 kB)" src="https://img.esa.io/uploads/production/attachments/17751/2021/04/20/103923/737ca950-7646-4041-a5a4-01f8ed7265b1.png">


- UsersテーブルとCommunitiesテーブルは多対多となるため中間テーブルを用意します。
- Documentsは書いた人(writer)と所有する人(Owner)を分けるためにidを分けてます。


以上の前提条件を踏まえた上でこれからアソシエーションを定義していきましょう。



## アソシエーションの定義方法

まず、基本的なアソシエーションの定義方法は以下になります。

- `belongs_to`
 - 関連するテーブルに属することを表す
  - 1つのデータを割り当てる(下記の例なら一人のユーザと一つのコミュニティを紐付ける)
  
```ruby:community_user.rb
class CommunityUser < ApplicationRecord
  belongs_to :user
  belongs_to :community
end
```

- `has_many`
  - 複数データを参照する
  - 1対多の関係を表す

```ruby:user.rb
class User < ApplicationRecord
	has_many :documents
end
```
ユーザーは複数ドキュメントのデータを参照できる

- `has_many :through`
  - 多対多の関係を表す
  - `through`で定義した中間テーブルを通して直接、相手側のテーブルにアクセスできる

```ruby:user.rb
class User < ApplicationRecord
	has_many :communities, through: :community_users
end
```

以上はよく使うアソシエーション定義方法だと思いますが、次からはアソシエーションに用意されているオプションを紹介していきます。

## アソシエーションのオプション
### class_nameオプション
一つのモデルに対して違う名前で値を取り出したい時に使う。

```ruby:user.rb
class User < ApplicationRecord
    has_many :documents,
    has_many :have_documents, class_name: "Document", as: :owner
end
```
以上のようにすることで、`documents`ではすべてのドキュメントを取り出し、`have_documents`ではDocumentsテーブルのowner_idを持ったドキュメントのみを取り出せるようになります。



### dependentオプション

あるモデルを削除した際の関連するモデルに対する挙動を定義する。

- `dependent: :destroy`
  - 関連付けしているモデルも一緒に削除する
  - ActiveRecordを介して関連付けの数だけDELETEが実行される

```ruby:user.rb
class User < ApplicationRecord
	has_many :community_users, dependent: :destroy
end
```
以上のようにすることでUserが削除された際に、紐づくCummunity_userも一緒に削除される。

- `dependent: :delete_all`
  - 直接SQLを発行してDELETEを１回だけ実行する

- `dependent: :nullify`
  - 関連付けしているモデルは削除しない
  
```ruby:user.rb
class User < ApplicationRecord
	has_many :documents, dependent: :nullify
end
```

これでユーザーが削除されてもユーザーの作成したドキュメントは一緒には削除されません。


### foreign_key
- 参照先テーブルの外部キーのカラム名を明示

### inverse_of
- どちらのモデルからでもインスタンスを参照できるようにする


```ruby:user.rb
class User < ApplicationRecord
	has_many :documents, foreign_key: :writer_id, inverse_of: "writer"
end
```

以上のようにすることで**自分の書いたドキュメント**で有ることがわかりやすくなる。


## 参考記事
- [【Rails ガイド】Active Record の関連付け](https://railsguides.jp/association_basics.html)
- [railsアソシエーションオプションのメモ](https://qiita.com/tomoharutt/items/e548186c763079327ed1)

## おわりに
まだ理解が怪しい所もあるため、間違いなどご指摘や、他にもこんなオプションあるよなど教えて頂けると嬉しいです。
Flexboxで作ったUAE国旗をもっとシンプルにしてみた

以前投稿した、『Flexboxの基礎を徹底的な理解のためにUAEの国旗を作ってみる』からもっとシンプルにcodeを書いたので投稿します
基盤は、以前のcodeに少しシンプルにしました

![2finish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/ea1e01b5-99d1-e9fc-da5b-d00b31bf3b91.png)


目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
[Css Flexboxのチートシート] (https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　UAEの国旗を調べる
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

ここまで出来たらcodeを書いていきます♪ ※head部分は省略

組み立てのポイント！　
『あか』と『みどり、しろ、くろ』の向きが違うのでそれぞれに親要素をつけてあげる

```html
　　　<div class="uae11">
        <div class="uae13"></div>
        <div class="uae12">
          <div class="uae14"></div>
          <div class="uae15"></div>
          <div class="uae16"></div>
        </div>
      </div>
```
```css
   .uae11 {
  width: 450px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto; 
  }

   .uae12 { }
  
  .uae13 {
    background-color: red; 
  }

 .uae14 {
    background-color: green;
  }

  .uae15 {
    background-color: white;
  }

 .uae16 {
    background-color: black;
  }
```
上記の状態をブラウザで一旦確認

![スクリーンショット (54).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/3ba32ffc-6e53-9c84-21ef-b5c99df67d11.png)


上記のCSSにFlexboxをつける。

```css
  .uae11 {
  width: 450px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto; 

  display: flex;　※追加
  }

 .uae12 {
     display: flex;　※追加
     flex-direction: column;　※追加

     flex-grow: 4;　※追加
   }
  
  .uae13 {
    background-color: red; 
    flex-grow: 1;　※追加
  }

 .uae14 {
    background-color: green;

    flex-grow: 4;　※追加
  }

  .uae15 {
    background-color: white;

    flex-grow: 4;　※追加
  }

 .uae16 {
    background-color: black;

    flex-grow: 4;　※追加
  }
  
```

結果　↓

![スクリーンショット (55).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/1482cb91-4225-ce34-7b04-9174b7d590a6.png)

UAE国旗完成しました！


##　まとめ
以前作成したUAE国旗をもっとシンプルにしてみたら、結構簡単に作成できました
無駄な`code`をなくすととても簡単に完成できます
引き続き、シンプルかつ簡単に`code`を書けるようがんばります！！


今回は以上です
ありがとうございます！
Spyderが起動しない場合の対処法（一例）

#環境
Windows10
Anaconda3（2020.03）

#発生した障害
Anacondaを更新しようと `conda update --all` を実行した後、Spyderが起動しなくなりました。
マウスポインタがぐるぐる回るけど、すぐに戻ってそのままうんともすんとも言わず・・・

#対処
##対処1
以下の記事を参考に`spyder.lock`フォルダを削除しても改善しませんでした。

https://sites.google.com/site/keiopython2016/?tmpl=%2Fsystem%2Fapp%2Ftemplates%2Fprint%2F&showPrintDialog=1

##対処2
管理者権限のプロンプトで`spyder`を実行しても以下のメッセージが出て起動できません。

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584833/308a7c60-1ad3-a78e-2f4c-20087468e220.png)
Traceback (most recent call last):
File "C:\Users\007033\Anaconda3\Scripts\spyder-script.py", line 10, in 
sys.exit(main())
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\app\start.py", line 210, in main
from spyder.app import mainwindow
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\app\mainwindow.py", line 119, in 
from spyder.utils.environ import WinUserEnvDialog
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\utils\environ.py", line 19, in 
from spyder.plugins.variableexplorer.widgets.collectionseditor import (
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\variableexplorer\widgets\collectionseditor.py", line 57, in 
from spyder.plugins.variableexplorer.widgets.collectionsdelegate import (
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\variableexplorer\widgets\collectionsdelegate.py", line 31, in 
from spyder.plugins.variableexplorer.widgets.objectexplorer.attribute_model \
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\variableexplorer\widgets\objectexplorer\__init__.py", line 23, in 
from .objectexplorer import ObjectExplorer
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\variableexplorer\widgets\objectexplorer\objectexplorer.py", line 33, in 
from spyder.plugins.editor.widgets.codeeditor import CodeEditor
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\editor\widgets\codeeditor.py", line 70, in 
from spyder.plugins.editor.panels import (ClassFunctionDropdown,
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\editor\panels\__init__.py", line 13, in 
from .codefolding import FoldingPanel
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\editor\panels\codefolding.py", line 32, in 
from spyder.plugins.editor.panels.utils import (
File "C:\Users\007033\Anaconda3\lib\site-packages\spyder\plugins\editor\panels\utils.py", line 15, in 
import textdistance
ModuleNotFoundError: No module named 'textdistance'
```
エラーメッセージの一番下の行に`textdistance`のモジュールがないとメッセージが出ています。
ということで以下を実行して`textdistance`をインストールします。

```
conda install textdistance
```


`textdistance`について調べると、文字列を比較してどれだけ離れているかを調べるためのライブラリのようです。
https://pypi.org/project/textdistance/
https://pycarnival.com/textdistance/


これが完了したら無事に起動することができました。
Flexboxの理解を深めるためJAPAN国旗を作ってみた

Flexboxを使って国旗を作る
今回は日本国旗

![スクリーンショット (49).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/68f33661-a309-3457-ad0e-65c1a33fa75d.png)



目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
[Css Flexboxのチートシート] (https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

・紙とペンで実際に枠を書いてみる（添付画像　準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略

```html
<div class="japan">
    <div class="japa"></div>
  </div>
```

```css
.japan {
  width: 500px;
  height: 300px;
  border: 1px solid black;
  margin: 200px auto;
}

.japa {
  width: 150px;
 height: 150px;
 border: solid;
 background-color: red;
 border-radius: 50%;
}
```

この状態を一旦ブラウザで確認

![スクリーンショット (50).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/0384fec9-171c-e9a8-fbac-103b00db68b9.png)

`display: flex;` を親要素につけてみる

```css
.japan {
  width: 500px;
  height: 300px;
  border: 1px solid black;
  margin: 200px auto;
  display: flex; ※追加
}
```
ブラウザで確認
![スクリーンショット (51).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/0e84d414-c4a2-1268-bea8-9baa9f1768f5.png)

`display: flex;`をつけても変化なし。
次に`justify-content: center;` をつけてみる

```css
.japan {
  width: 500px;
  height: 300px;
  /* background-color: pink; */
  border: 1px solid black;
  margin: 200px auto;
  display: flex;
  justify-content: center; ※追加
}
```

![スクリーンショット (52).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/764085c9-de7c-ee06-6b70-38c75990efab.png)

<font color="red">赤丸<font> が水平方向の`center`に来ました

最後に赤丸が中央にくるよう`align-items: center;`　を追加します

```css
.japan {
  width: 500px;
  height: 300px;
  /* background-color: pink; */
  border: 1px solid black;
  margin: 200px auto;
  display: flex;
  justify-content: center;
  align-items: center;　※追加
}
```

![スクリーンショット (53).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/05d992da-0dd3-7fcd-0ea1-ef42fd482243.png)

日本国旗の完成です！


##まとめ
display: flex　を上手に挙動させるためには、
『親要素』と『子要素』をきちんと把握することが大切だと感じてます。
また、『親要素』にはFlexコンテナー。　
`Flexコンテナー`の水平方向と垂直方向を意識すると苦手意識も和らぐとおもいます

一個、一個理解していけば必ず完成します。

今回は以上です
ありがとうございます！！
【Bubble】reusable elementsを固定（float状態）にする方法

## 概要
こんにちは。アジアをデジタルインテグレートする会社、アジアクエストの藤井です。
うちの会社は技術者が多い中、私はセールスを担当していてプログラミング等は出来ないのですが
ひょんなことからノーコードの魅力に取りつかれ、現在はノーコードツール「Bubble」の学習に精を出しています。
この記事では自身がBubbleでWebアプリを構築中にハマった現象を後生の為にメモを残します。

## reusable elementをfloating groupで作成して実際のページに組み込んでもfloatしない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/29fc49d1-fdff-2b3a-d719-eae98a67b05a.png)
上記のように、通常通りfloating gloupでheaderを作成し、reusable element化する。
その後、indexに移動して貼り付けるもfloatせず・・・

## 解決方法
Reusable elementに関してはfloating groupではなく、通常のgroupで作成し、
Reusable element自体のType of elementを「Floating Group」に変更することでfloat化することが判明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/4340acd2-9a06-5f22-98a2-aeb1b0660a15.png)

これでようやくサイドメニューやその他floatが必要なelementをいちいちコピペで作り直さなくて済む・・・

## 手順解説
1.画面左上の▽ボタンをクリックし、下記のAdd a new reusable elementをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/25558ad7-a115-9a0a-0d60-254f8e2c8437.png)

2.Reusable elementの名前を決める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/e11616d6-7351-15c7-e73a-9a7e6ccbce6f.png)

3.画面左上が「Reusable：Qiita_FloatingGroup」になっていることを確認して、ContainersのGroupをデザインボードにドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/2d3c4008-1fe0-5f15-35f4-a846768fe6b5.png)

4.Qiita_FloatingGroupのAppearanceのType of elementをFloating Groupに変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/9d7ece35-440e-7613-2d21-9960ab2e4fe5.png)

5.GroupのStyleやWHXYを設定してヘッダーを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/09369d41-d20f-b332-20c1-df1ebfd4e645.png)

6.作成したreusable elementを載せたいページに移動し、Reusable elementsからQiita_FloatingGroupを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/2ddc0a68-c2da-776f-dd6a-f957dd7ac3b8.png)

7.準備完了。一旦この状態まで行けば大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/f03f4a13-f39f-0cf9-5630-54b99f931ad0.png)

8.画面右上、Previewを表示してちゃんとヘッダーがFloatingされているか確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1356032/bbc677b2-7c81-8020-58cf-55631bf56ef8.png)

## いかがでしたでしょうか？
恐らく上記手順で無事ヘッダーがFloatingされているかと思います。
基本的にreusableしないelementは各ページでFloating Groupでelementを作成して頂ければ問題ないですが、
reusable element化してFloatしたい場合には「reusable element自体のType of elementをFloating Groupに変更しないとダメ」と
いうことを覚えて頂ければと思います。

それではまたハマったら更新します！
お読み頂き有難うございました！
DB2 SQL Error: SQLCODE=-407 SQLSTATE=23502

# はじめに
この記事では、DB2でSQLCODE=-407が発生した時の調査方法を紹介します。

# 背景
SQLを実行した際に、SQLCODE=-407のエラーメッセージDB2 SQL
何が原因でエラーになっているのかエラーメッセージから特定できない。
そのため、エラーメッセージの方法を元に調査方法とエラー原因を特定する

# 調査方法
1. エラーメッセージの TBSPACEID, TABLEID, COLNO,を確認する  
例：`TBSPACEID = 3,TABLEID = 29, COLNO = 0 `
2. 以下のSQLを実行する  

```SQL
SELECT C.TABSCHEMA, C.TABNAME, C.COLNAME
FROM SYSCAT.TABLES AS T,
SYSCAT.COLUMNS AS C
WHERE T.TBSPACEID = 3
AND T.TABLEID = 29
AND C.COLNO = 0
AND C.TABSCHEMA = T.TABSCHEMA
AND C.TABNAME = T.TABNAME
```
以下のようにスキーマ、テーブル名、列名が特定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658425/fef80333-60b9-2c50-7931-5406687c0201.png)
AWSのDR対策を確認してみた

## そもそもDRとは？

disaster recovery の略で、災害からの復旧の意味です。
天災や不正侵入によってシステムが壊滅的な状態になった際の復旧・修復や
それに備えてのシステム・体制のことを指します。

## AWSのDR対策のパターン

AWSのDR対策として4パターンが公式ドキュメントにもあったので
それについて詳細に確認してみました

パターンとして以下4つになります。

- バックアップ・リストア
- パイロットライト
- ウォームスタンバイ
- マルチサイト

### バックアップ・リストア

- 概要

定期的にシステムのバックアップを作成、
障害発生時はバックアップからの復旧を行います。

イメージ図は以下です

![1# AWSのDR対策を確認してみた - diagrams.net - Google Chrome 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/91618f06-394e-37c2-1013-b0f9130a03af.png)


- 復旧時間

時間単位での復旧時間を見込む必要があります。

- 復旧時点

最終バックアップ時点まで

- 費用

データだけの保存なのでコストは安い

### パイロットライト

- 概要

DR用にDBを起動しておいて、通常はデータの同期のみ。
障害発生時のみ別リージョンでアプリケーションを立ち上げてDR用のDBを使用します。

![2# AWSのDR対策を確認してみた - diagrams.net - Google Chrome 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/90515394-9943-26f2-8128-1664a9ecf4f3.png)


- 復旧時間

数十分単位での復旧時間が見込まれます

- 復旧時点

最終データの同期時点まで

- 費用

DBを別で稼働しておく必要があるのでバックアップ・リストアよりはかかります。

### ウォームスタンバイ

- 概要

DR用のリージョンで縮小した構成のシステムを常時稼働しておきます。
障害発生時にはDNSを切り替えて稼働を行います。

![3# AWSのDR対策を確認してみた - diagrams.net - Google Chrome 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/d3d58516-8cfc-2fdf-6ad9-dfefe46f0223.png)


- 復旧時間

Route53を切り替えるため
数分単位での復旧時間が見込まれます。

- 復旧時点

最終データ同期時点まで

- 費用

アプリケーションやDBなど、別リージョンで縮小した構成を常に運用しないといけないので
パイロットライトより費用はかかります。

### マルチサイト

- 概要

DR用のリージョンで同様の構成のシステムを常時稼働しておきます。
障害発生時にはDNSが自動フェイルオーバーでをDR用の環境に切り替わって稼働を行います。

![4# AWSのDR対策を確認してみた - diagrams.net - Google Chrome 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/d6caae38-597c-09f0-b8ae-598d2abff574.png)


- 復旧時間

DNSの自動フェイルオーバーなので数秒単位での復旧時間が見込まれます。

- 復旧時点

最終データ同期時点まで

- 費用

アプリケーションやDBなど、別リージョンで同様の構成を常に運用しないといけないので
ウォームスタンバイより費用はかかります。

### まとめ

復旧時間と費用は反比例することがわかりました

| -                      | 復旧時間   | 費用   | 
| ---------------------- | ---------- | ------ | 
| バックアップ・リストア | 数時間単位 | 低     | 
| パイロットライト       | 数十分単位 | 中     | 
| ウォームスタンバイ     | 数分単位   | 中・高 | 
| マルチサイト           | 数秒単位   | 高     | 

## 勉強後イメージ

言葉とかは知ってたけど、ちゃんと調べたことはなかった
特にパイロットライトとか初めて知った。
手間・お金と復旧時間は反比例するからどこまでするかは考えないといけないですね。

## 参考

- [IoT@Loft#18 大阪リージョンとAWS Wavelengthの紹介](https://www.youtube.com/watch?v=v8h4OiNHBm0)
- [AWS 上でのディザスタリカバリ (DR) 構成 4 パターン](https://michimani.net/post/aws-architecture-for-disaster-recovery/)
オブジェクト指向(Java)

#環境構築

- VScode
- JDK

[JDKインストールします](https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html)
Macの場合は`Mac OS X x64`選択します。
その後、Oracleのアカウント作成して下さい。
インストール完了後、ターミナルでバージョン確認します。

```
$ java -version
```
バージョンが出たらインストール完了です。

#オブジェクト指向
`オブジェクト指向`とは、物を定義し、その物に対して、振る舞いを定義することで同じものを定義しなくて済むようになります。
`オブジェクト指向`はこれだけではありませんが説明すると長くなってしまいますので興味ある方は調べてください。
参考記事[wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91)


```java:
class クラス名01 {
  クラスのxxを定義する

  メソッド(処理させたいこと) //例えば(1+1)を計算
}

class クラス名02 {
  クラス名01 インスタンス名 = new クラス名01();
  インスタンス名.xx //xxが使えるようになります。
  インスタンス名.メソッド //メソッドが使えるようになります。

  System.out.println(インスタンス名.xx); //出力できます
}
```


```java:Eater.java

//Foodクラスを元にインスタンスを作成します。
class Food {
  String name;

  // calculateAvgメソッド
  public double calculateAvg(double[] data) {
    double sum = 0;

    for( int i = 0; i < data.length; i++) {
      sum += data[i];
    }

    double avg = sum/data.length;
    return avg;
  }
  //judgeメソッド
  public String judge (double avg) {
    String result;
    if(avg >= 60) {
      result = "美味しい";
    } else {
      result = "んー";
    }
    return result;
  }
}

public class Eater {
  public static void main(String[] args) {
    Food sushi = new Food(); // ここでFoodを参照し、sushiのインスタンス作成しています
    sushi.name = "tuna"; // sushiインスタンスnameにtunaを代入しています。
    double[] data = { 70, 65, 90, 90, 90}; // dataの配列を定義してます

    double avg = sushi.calculateAvg(data); 
    //sushiインスタンスの中のcalculateAvgメソッドを呼び出す。引数はdataを使ってavgに代入する
    String result = sushi.judge(avg);
    // sushiインスタンスの中のjudgeメソッドを呼び出す。引数はavgを使う

    System.out.println(avg);
    System.out.println(sushi.name + " " + result);
  }
}
```

```
$ javac Eater.java
$ java Eater
```
コンパイルして`Eater.class`ファイルが生成されます。
コンパイルされたコードを出力させます。

```
81.0
tuna 美味しい
```
今回のコードでは、このような結果になっていると思います。
dataの平均とインスタンスの`name`と`result`の結果を表示させるプログラムです。
PoEとは？

■きっかけ
業務でわからない用語が出てきたので、調べました。
■感想
アプリで電力供給の優先度を変える必要があるので、
前もって知ることができてよかった。

■目次
・PoEとは

・PoEとは
PoEとは、LAN線(ツイストペアケーブル)を使って電力を供給する仕組み。
機器の設置場所に電源コンセントがない場合(IP電話の接続など)もあります。
PoEを利用すると、LAN線を接続するだけで、電力供給ができる。IP電話の接続などで使用。

[e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120895/d740233b-bcc6-afe5-5ac0-81457adb6328.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120895/313053bb-3247-84ba-c4ce-241f490271d0.png)



参考
https://news.mynavi.jp/kikaku/switch-9/
BigSur Xcode12 で Preferencesを開くとクラッシュする

## 概要

xcodeでBuildした後に、音を出したかった。

その設定がPreferences -> Behaviors でできるが、なぜかBehaiversタブをクリックするとどうしてもクラッシュした。

- xcode: 12.4
- OS: Big Sur 11.2.3

## 答え

ディスプレイを抜く。

マルチディスプレイで操作するとxcodeが落ちることがあるらしい。

と、ここに答えがありました！

https://developer.apple.com/forums/thread/666566?answerId=662440022#662440022
【Rails】特定のカラムを更新したい場合の対応策

# やりたいこと

ZIPダウンロード処理時に、ダウンロードする画像名を

dl_image_nameカラムに保存・更新したい。が、なぜかできない。

前提条件：別でimageカラムが存在する。

# 原因

既存のバリデーションに引っかかっていたみたい。

常にバリデーションを実行するようになっていた。

# 解決策

上記のやりたいことを実行するためには、バリデーションが邪魔。

バリデーションを、以下のような処理で実行しないようにする。

言い換えると、特定の部分で別のバリデーションをする処理にする。

```ruby
@order.save(context: :update_dl_image_name)
```

これは、update_dl_image_nameコンテキストで

@orderをバリデーションしてから保存する処理になる。

ここまでできたら、次はバリデーションをありにするか？なしにするか？

### バリデーションありにする場合

```ruby
validates :dl_image_name, on: :dl_image_name # context: :dl_image_nameのときだけバリデーションする
```

context: :dl_image_nameのときだけバリデーションするようにする。

### バリデーションなしにする場合

特になにもしない


------------------------------------------------
上記の対応で無事に保存できた！

前提条件で記載した、別でimageカラムが存在する。

もしこれが存在しない場合も解決策はある。

別の記事で先輩方が詳しくまとめていただいているので、割愛します。

# 参考サイト

https://railsguides.jp/active_record_validations.html

https://hene.dev/blog/2019/06/03/rails-validation

https://qiita.com/metafalse/items/872d0403e3030aa6db38
変数　スコープ

JSの変数には、スコープあります。

#①ブロックスコープ
ブロックスコープとは、関数やfor文、if文などで使われる{}の中で使われている変数です。これをブロックスコープといいます。このブロックスコープ内で宣言された変数をブロック外で呼び出そうとするとエラーが起きます。

#②関数スコープ
これは名前の通り、function() {}の中括弧内で使われた変数のことです。こちらも、関数内でのみ有効です。

またこれらの変数は、スコープ内の移動はが可能ですが、｛｝外では、無効になります。

#再宣言
スコープ内では変数を呼び出すことができます。しかし、スコープ内で、再宣言はできません。
例えば、極端な例ではありますが。

```index.js
if (条件式) {
 let fruit = 'りんご';
 
 let fruit = 'バナナ';
}
``` 
これを再代入といいますが、これは、同じ階層のスコープ内なので呼び出すことができません。
ただし、同じ階層の再代入はできませんが、別の階層ならば可能です。

```index.js
if (条件式) {
 let fruit = 'りんご';
 }
if (条件式){
 let fruit = 'バナナ';
}

```
この場合は、階層が違うので、変数の再宣言は成り立っています。

#巻き上げ
変数には、スコープがあり、更に階層が違えば使うことはできます。
しかし、違う階層で使ったとしても呼び出したあとにもう一度、再代入した場合。再代入された値が優先されます。

#グローバル変数
これは、スコープの外で宣言されたものを言います。
#ローカル変数
これは、スコープ内で宣言された変数を言います。

```index.js
let fruit ;

if (条件式){
 let fruit = 'りんご';

 if(条件式) {
 let fruit = 'バナナ';
 }
}
```

let fruit;これがグローバル関数といいます。これは、スコープを気にせず使うことができます。
ただし、どこからでも書き換えられてしまいます。
基本的な検索フォームヘルパまとめ

参考：Railsガイド 感謝です。
>https://railsguides.jp/form_helpers.html


1 基本的なフォームを作成する
-

|名前|
|-|
|form_tag|

```ruby
<%= form_tag do %>
  Form contents
<% end %>
```

form_tagは、上のように引数なしで呼び出されると<form>タグを生成します。このフォームを指定のページに送信するときにはHTTPのPOSTメソッドが使われます。たとえば現在のページが/home/indexの場合、以下のようなHTMLが生成されます (読みやすくするため改行を追加してあります)。

```ruby
<form accept-charset="UTF-8" action="/home/index" method="post">
  <div style="margin:0;padding:0">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />
  </div>
  Form contents
</form>
```

1.divタグは省略不可
上のフォームにはivタグに囲まれた中に、2つの隠しinput要素が置かれています。このdivタグがないとフォームを正常に送信できないため、**divタグは省略できません。**最初の隠しinput要素であるutf8は、フォームで指定の文字エンコーディングをブラウザに強制します。これはアクションがGETとPOSTのどちらであってもすべてのフォームで生成。

2.authenticity_tokenはGET以外のすべてのフォームで生成
2番目の隠しinput要素であるauthenticity_token要素は クロスサイトリクエストフォージェリへの保護のためのセキュリティ機能。**この要素はGET以外のすべてのフォームで生成されます**(セキュリティ機能が有効になっている場合)。

一般的な検索フォーム
-

|検索フォーム|働き|
|--|--|
|form_tag|GETメソッドを送信するためのフォーム要素
|label_tag|入力するものを示すラベル
|text_field_tag|テキスト入力要素
|submit_tag|「送信」ボタン要素

```ruby
<%= form_tag("/search", method: "get") do %>
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q) %>
  <%= submit_tag("Search") %>
<% end %>
```

上のコードから以下のHTMLが生成されます。

```rb
<form accept-charset="UTF-8" action="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
  <label for="q">Search for:</label>
  <input id="q" name="q" type="text" />
  <input name="commit" type="submit" value="Search" />
</form>
```

どのフォームinputでも、id属性はinputのnameから生成。(上の例では「q」)。これらのidは、cssでのスタイル追加やJavaScriptによるフォーム制御で使うのに便利。

HTMLのすべてのフォームコントロールには、text_field_tagやsubmit_tagと同様の便利なヘルパーが用意されています。

フォームを検索に使う場合は必ずGETメソッドを利用。こうすることで検索クエリがURLの一部となり、ユーザーが検索結果をブックマークしておけば、後でブックマークから同じ検索を実行できます。Railsでは基本的に、常にアクションに対応する適切なHTTPverbを選びます。
GPT-3で作成したアプリケーションをデプロイする前のレビュー審査について


GPT-3で作成したアプリケーションをデプロイする前にレビュー審査を受ける必要があります．
なかなか情報が整理されていなかったのでSlackで聞いた情報を共有します．

## ガイドライン

https://beta.openai.com/docs/going-live

- 5人以上がアクセスできる状態にする場合，レビュー審査が必要
- レビューは最低１週間かかるので，２週間前に依頼することが必要

## ユースケースガイドライン

https://beta.openai.com/docs/use-case-guidelines

- 短い入力に基づいてレシピのアイデアを生成するアプリケーションなどは基本的に承認
- データの解析および/または入出力タイプの変換も承認
- SNSへの投稿や政治的な発言を意図するものはケースバイケースで判断とのこと

## 申請方法のまとめ

https://help.openai.com/en/articles/4936818-ready-to-go-live-with-your-application

- アプリケーションを5人以上と共有するには、最初にGoing Liveページを読み、次にリリース前のレビューフォームに記入します。この段階では、製品の実用的なデモが理想的ですが、優れたモックアップやよく考えられた設計も可能
- レビューを送信せずにデプロイすると、APIキーがすぐに取り消される場合があります。
- 場合によっては、APIキーの喪失が永続的である可能性があります。このポリシーに気付かずに誤ってデプロイした場合は、サポートに連絡してくださいとのこと。

## Form

https://share.hsforms.com/1u1CnLpx3TGqjJbe5k76UpA4sk30

Going Liveにするなと言いつつ審査は受ける必要あるのでどのみち公開にしないといけない．それならサブドメインならパスワード認証なしで公開してOKという人もいたが，この辺はまだルール化されていないだけなので個人的にはようできん．パスワード認証つけても５人以上がアクセスする場合もあるし，本質的には意味ないけどね．．
Pythonを使ってTwitterでいいねを自動化する

# 概要

みなさんTwitterのフォロワーを伸ばそうとしたときに、いいねをとにかくし続けたことはありませんか？

指が動かなくなるくらいいいねを押した経験がある人はわかると思いますが、めちゃくちゃ大変です。

いいねを押すためにTwitterを始めたわけではないですよね？

それでしたらいいねすることを自動化してしまいましょう！

# 謝罪

画像が多いため下記のサイトに内容が書いてあります。
手順を画像付きで丁寧に解説しているので参考にされば幸いです🦔

[Pythonを使ってTwitterでいいねを自動化する](https://www.cardenema.com/?p=171)
JavaScript 備忘録9<オブジェクトに関して>

■Reflectについて

```js
// 一般的なインスタンス化
const obj = new C(1, 2);
console.log(obj);

// Reflectを使用したインスタンス化
// Reflect.construct(クラス名, [コンストラクタ関数の引数])
const obj2 = Reflect.construct(C, [1, 2]);
console.log(obj2);
```

■weekMapについて
→キーが必ずオブジェクトを設定する必要があり、弱い参照のオブジェクト

```js
const wm = new WeakMap();

const o = {};
// 必ずオブジェクト出なければならない
wm.set(o, "value1");
// コンソールにvalue1が出力される
console.log(wm.get(o));

// こうした場合、もうoは「ガベージコレクション」により削除される
// そのため、oに対するキー'value1'も必然的に削除される
o = null;

o = {};

// 参照先のoがメモリ空間に存在しないので、エラーとなる
console.log(wm.get(o));
```

■配列について

```js
const arry = [1, 2, 3, 4, 5];
// 一番最初に要素を追加する
arry.unshift(0);
// 一番最後に要素を追加する
arry.push(6);

// 一番先頭の要素を削除する
arry.shift();

// 一番最後の要素を削除する
arry.pup();

//(要素のインデックス, 削除する数)
arry.splice(0, 1);

```
【未経験用】頻出IT基礎用語まとめ

<h2>背景
<p>なんと転職できました。
未経験から転職するにあたって、ITの基礎的な知識を、なあなあではなく
しっかりさせようとした目的です。まあ【備忘録】です。

<h2>用語集
<h3>OS
<p>コンピューターを動かすためのソフトウェアのこと。
コンピューター全体を管理・制御し、人が使えるようにする役割を担う。
代表例）Windows,mac,Linux

<h3>ソフトウェア
<p>ソフトウェアとは、コンピューターを動かすプログラムのこと。広い意味では、プログラムが処理するデータも含まれる。コンピューター自体や周辺機器などのように目に見える機器をハードウェアと呼ぶのに対し、ソフトウェアは目で見ることができない。
大きく二つに分類する。
<ul>
<li>応用ソフトウェア：ワープロや表計算などの各種アプリケーション
<li>システムソフトウェア：ミドルウェア（DB）・基本ソフトウェア（OS、言語プロセッサなど）
</ul>


<h3>ハードウェア
<p>コンピューターを構成する目に見るもの全般。
例）マウス・ディスプレイ・キーボード


<h3>CPU
<p>人の「頭脳」のような役割を行うパーツのこと。
コア数＝処理を行える頭脳の数。


<h3>HDD
<p>PCにデータを保存するための内ストレージと呼ばれる領域。
（ストレージ＝「データを保管する場所」）
記憶装置のため本棚と例えられる。


<h3>メモリ
<p>データやプログラムを一時的に保存する部品のこと。
机や作業台で例えられる。



<h3>ディレクトリ
<p>CUIで用いるデータの入れ物。
GUIでいうフォルダ。


<h3>GUI
<p>情報の提示を画像や、形を多用し、
基礎的な操作の大半をマウスやタッチスクリーンなどの画面上での指示。


<h3>CUI
<p>コンピューターやソフトウェアが利用者に情報を提示したり、操作を受付したりする方法の一つ。

```
全てのやり取りを文字だけで行う。
こんなかんじのやつ
```

<h3>ビット
<p>1bitとはコンピューターが扱う最小の位のこと。



<h3>バイト
<p>1バイト（Byte）= 8ビット（bit）。
0か1が入る箱が8個並んでいるイメージ

![1-9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144247/db292385-60a6-fd34-1d93-c5c2ec74f526.jpeg)


<h3>ローカル
<p>自分自身のPC環境のこと。
ローカル環境。

<h3>パス
<p>ファイルまでの経緯を指す示す経路


<ul>
<li>絶対パス
<p>誰から見ても変わらない場所。
最初のフォルダから始まりますよという意味で、絶対「/」から始まる。
【自分へ】キタミ式の276Pみたらわかるよ


<li>相対パス
<p>自分のいる位置からの場所
</ul>


![20170105_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144247/47f6114d-b28b-3dc5-2caa-3c341bfa192a.png)


<h3>IDE
<p>統合開発環境の略。
プログラミング開発に必要となるテキストエディタ・コンパイル・デバッカを一つにまとめた開発環境
例）Eclipse、Android Studio、Swiftなど


<h3>IP
<p>PCやスマートフォン等のネットワーク上の機器を識別するためにふり振り当てられている番号。
（よく見る129.168.20.5168.20.5ってやつ）


<h3>port
<p>利用しているパソコンがどんなサービスを利用しているのかを特定する際に利用している番号。

<h3>グループウェア
<p>組織内のスケジュールやタスクなどの共有したコミュニケーションを目的とした
アプリケーション


<h3>ネスト
<p>プログラムやデータにおいて、ある構造の中に同じ構造が含まれている状態。
IF文の中にIF文があると「ネストが深い」と言われると。


<h3>ふー…ちょっと休憩…
<p>Qiitaを備忘録としてしか使っていません…わら



<h3>インデント
<p>字下げ

<h3>コミット
<p>処理や変更などを確定・反映させる

<h3>マザーボード
<p>各パーツに電気を供給したり、デバイスの統制を行う。
PCの土台となる主要な電子回路基板のこと
…？


<h3>BIOS
<p>OSの起動や、PCと接続機器間の入出力を制御するプログラムのこと
電源を入れた時に最初に起動するプログラム。


<h3>ドライバ
<p>PCに接続されている周辺装置をOSによって制御するために作られたプログラム


<h2>あとがき
<p>無事にコロナ禍で転職ができましたけども、
まだまだスタートラインにたっただけですね。

私は、こういう風に何か記録に残さないと忘れてしまうんですよね～
では、これからも頑張りまっす！
FormオブジェクトでActiveRecordのfind風なメソッドを作ろう

## なんでこんな事するの？

formオブジェクトを用いた実装を行いDBに保存した。その時の処理が

```ruby
class Output
  include ActiveModel::Model
  attr_accessor :content, :user_id, :book_id, :awareness, :action_plans

  def save
    awareness = Awareness.new(content: content, book_id: book_id, user_id: user_id)
    awareness.save
    action_plans.each do |action_plan|
      action_plan = ActionPlan.new(time_of_execution: action_plan[:time_of_execution], what_to_do: action_plan[:what_to_do],
        how_to_do: action_plan[:how_to_do], awareness_id: awareness.id)
      action_plan.save
    end
    # 別々にレスポンスとして扱うためにハッシュ形式を採用(配列でもいけるが、なんのデータなのかわかりやすくしたい)
    output = {}
    output[:awareness] = awareness
    output[:action_plans] = action_plans
    output # 生成したハッシュをコントローラーに返し、レスポンスにする
  end
end
```

こんな感じでAwarenessモデルとActionPlanモデルのデータを保存し、コントローラー側に戻り値として返す、というもの。
これを使ってコントローラー側では

```ruby
def create
  @output = Output.new(output_params)
  if @output.valid?
    output_save_result = @output.save
    # ステータスは手動で設定する。リソース保存時のステータスは201
    render status: 201, json: { awareness: output_save_result[:awareness], action_plans: output_save_result[:action_plans] }
  else
    render status: 422, json: { errors: @output.errors.full_messages } # バリデーションに引っかかった際のステータスは422(Unprocessable entity)
  end
end
```

のようにすることで複数モデルを同時に保存することを可能にしている。

各モデルには1対多のアソシエーションが組まれているのでDBからのデータの参照は

```ruby
book = Book.find(params[:id])
awarenesses = book.awarenesses
action_plans = awarenesses[0].action_plans
```

のようにアソシエーションを用いることでが対応可能だが、なんかコードが冗長だしまとまりがない。
そこでDBを参照する機能もformオブジェクトに書いておこう、と思った。

## 実装内容

```ruby
class Output
  include ActiveModel::Model
  attr_accessor :content, :user_id, :book_id, :awareness, :action_plans

  def self.fetch_resources(book_id)
    book = Book.find(book_id)
    outputs = []
    output = {}
    book.awarenesses.each do |awareness|
      output[:awareness] = awareness
      output[:action_plans] = awareness.action_plans
      outputs << output
    end
    return outputs
  end
end
```

こんな感じのクラスメソッドを用意した。上記の通りformオブジェクトで保存する各モデルは1対多の関係でアソシエーションが設定されているため
空の配列を用意してそこにどんどん値を放り込んでいくイメージ。最終的に配列を戻り値として返している。引数に渡しているbook_idは
コントローラーでparamsを用いて取得したBookモデルの情報をformオブジェクト側で取得するために使用。

```ruby
def my_outputs
  user_book_relation = UserBook.find_by(user_id: @user.id, book_id: params[:book_id])
  if user_book_relation
    outputs = Output.fetch_resources(user_book_relation.book.id)
    render json: { outputs: outputs }
  else
    render status: 422, json: { errors: '書籍が推薦図書として追加されていません' } 
  end
end
```

コントローラー側ではparamsから飛んでくる値を用いて書籍情報を取得。ここではUserモデルとBookモデルの中間テーブルを
取得し、userとのアソシエーションも確認するようにしている。

## 個人的に感じた実装のメリット

コントローラーが肥大化するのを抑えることができる。(コントローラにモデルの処理をいくつも書くとわかりにくくなる)
シンプルなデータの取得と条件分岐だけでアクションが完結したので非常に良いのではないでしょうか。
tree macにインストールしたい。M1チップ

tree mac エラー　homebrewからインストールしたいがエラーとなる
以下で解決した。



```mac:terminal
tree mac

zsh: command not found: tree
hide@hidenoMacBook-Air demoapp_v1 % brew install tree
Updating Homebrew...
error: Not a valid ref: refs/remotes/origin/master
fatal: ambiguous argument 'refs/remotes/origin/master': unknown revision or path not in the working tree.
Use '--' to separate paths from revisions, like this:
'git <command> [<revision>...] -- [<file>...]'

```

not install

```mac:terminal
tree mac

hide@hidenoMacBook-Air ~ % brew install tree  
Updating Homebrew...
fatal: Could not resolve HEAD to a revision
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
Error: No available formula or cask with the name "tree".
==> Searching for a previously deleted formula (in the last month)...
Error: No previously deleted formula found.
==> Searching taps on GitHub...
Error: No formulae found in taps.
hide@hidenoMacBook-Air ~ % brew doctor
```

解決はロゼッタモードのterminalでのインストールでOKだった
Clipyで矢印キー操作を有効にする方法（Macのクリップボード管理アプリ）

#はじめに
Qiita投稿初心者のikore908です。
Macのクリップボード管理アプリ「Clipy」を愛用しているのですが、
一覧から矢印キーでの選択ができなくなった問題が発生し、解決したので同様の方の
助けになるかもと思い投稿いたします。

#手順
1. Macの「システム環境設定…」
1. 「セキュリティとプライバシー」
1. 「プライバシー」タブ
1. 「入力監視」
1. 左下カギのロック解除
1. 「＋」ボタン
1. FinderからClipyを選択
![スクリーンショット 2021-04-23 5.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189491/cc6306b0-69f6-92ce-7ad4-449a3b269eaa.png)
1. 完了です！

#おわりに
お読みいただきありがとうございました。
いかんせん投稿をほとんどしたことのない初心者ですので、記事投稿にあたりこうした方が良いかもといったアドバイス等ありましたらコメント等で教えていただければと思います。
皆様のClipyライフがより良いものとなりますように！

#参考URL
【Mac】文章を簡単にコピペするなら無料クリップボードアプリ「Clipy」がオススメ
https://www.2ldk-life.space/mac-clipy/
Markdown記法 チートシート
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
Python: 文を bunkai する

## bunkai 

https://github.com/megagonlabs/bunkai

https://pypi.org/project/bunkai/

Sentence boundary disambiguation tool for Japanese texts (日本語文境界判定器)
という、文を分解してくれるPython。改行を含んでも分解できるのが特徴、ということ。やってみた。

`pip install bunkai` 

以下は公式サンプル引用

```
root@0230359a1b81:~/opt# echo -e '宿を予約しました♪!まだ2ヶ月も先だけど。早すぎかな(笑)楽しみです★\n2文書目の先頭行で す 。▁改行はU+2581で表現します。' \
>     | bunkai
宿を予約しました♪!│まだ2ヶ月も先だけど。│早すぎかな(笑)│楽しみです★
2文書目の先頭行です。▁│改行はU+2581で表現します。
```


## お試し

＊例文は「雨ニモマケズ」と、私のTwitter投稿より人畜無害なものを使用



### 分かれない例

```
root@0230359a1b81:~/opt# echo -e '雨にも負けず風にも負けず雪にも夏の暑さにも負けぬ丈夫なからだを持ち欲は無く決して瞋からず何時も静かに笑っている' | bunkai
雨にも負けず風にも負けず雪にも夏の暑さにも負けぬ丈夫なからだを持ち欲は無く決して瞋からず何時も静かに笑っている
```

改行しても、文は分かれているとは判定されない。

```
root@0230359a1b81:~/opt# echo -e '雨にも負けず風にも負けず雪にも夏の暑さにも負けぬ丈夫なからだを持ち\n欲は無く決して瞋からず何時も静かに笑っ
ている' | bunkai
雨にも負けず風にも負けず雪にも夏の暑さにも負けぬ丈夫なからだを持ち
欲は無く決して瞋からず何時も静かに笑っている
```

- 例では
    - 雨にも負けず風にも負けず雪にも夏の暑さにも負けぬ丈夫なからだを持ち欲は無く決して瞋からず何時も静かに笑っている

### 分かれる例

```
root@0230359a1b81:~/opt# echo -e '自己理解や相互理解ができるwevox values cardをプレイしたよ！私が大切にしている価値観はこれ！「卓越性」 「影
響力」 「違いをつくる」 「豊かさ」 「遊び心」' | bunkai
自己理解や相互理解ができるwevox values cardをプレイしたよ！│私が大切にしている価値観はこれ！│「卓越性」 「影響力」 「違いをつくる」 「豊かさ 」 「遊び心」
```

改行しても結果は変わらず、文の切れ目で分かれる。

```
root@0230359a1b81:~/opt# echo -e '自己理解や相互理解ができるwevox values cardを\nプレイしたよ！私が大切にしている価値観は\nこれ！「卓越性」
「影響力」 「違いをつくる」 「豊かさ」 「遊び心」' | bunkai
自己理解や相互理解ができるwevox values cardを
プレイしたよ！│私が大切にしている価値観は
これ！│「卓越性」 「影響力」 「違いをつくる」 「豊かさ」 「遊び心」
```
- 例では
   - 自己理解や相互理解ができるwevox values cardをプレイしたよ！
   - 私が大切にしている価値観はこれ！
   - 「卓越性」 「影響力」 「違いをつくる」 「豊かさ」 「遊び心」


## まとめ

以上、なにかに使えるかなあ、分からないがお試しと今日のお遊び記録。
plunkerでopenjscad その4

# 概要

plunkerでopenjscadやってみる。
intersect使ってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d2cdf75f-391f-845d-9a4c-9a3e6e577ae3.png)


# サンプルコード


```
function main() {
  var a = CSG.cube();
  var b = CSG.sphere({ 
    radius: 1,
   	center: [1, 1, 1],
  	resolution: 32 
  });
  return a.intersect(b);
}
```

# 成果物

https://embed.plnkr.co/plunk/SpdqEGllpRoKAiDt

以上。
.NET5.0とVSCodeで開発環境を整える

## はじめに
普段は主に.NETで開発をしているエンジニアです。
この記事では、**Visual Studio以外**で.NETの開発環境を構築するのが目的です。
理由は、

* 無料で自宅PCの開発環境を構築したい
* .NETCore以降の環境についてあまり知らない(開発経験は一応ある)
* Visual Studio以外でC#をコンパイルする方法を知らない！
* C#9の新機能を使ってみたい

業務で使う場合は面倒なことはVisualStudioが全てやってくれるイメージなので、この機会に勉強したいなと思います。

## 環境
* Windows 10
* [.NET 5.0](https://docs.microsoft.com/ja-jp/dotnet/core/dotnet-five?WT.mc_id=AZ-MVP-5001601)

## 準備
### VSCodeのインストールと拡張機能の追加
[こちら](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)からダウンロードできます。
インストールしたら、忘れずに[拡張機能のC#](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)や日本語パックも追加しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/bbec71f9-7517-c87c-3df7-c800d718a251.png)

### .NET5のSDKのインストール
[こちら](https://dotnet.microsoft.com/download)からダウンロードできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/a3e143ac-1be1-e842-597b-d82ddee3f55e.png)
OSはWindowsなのでWindowsタブを選択します。
今回はC#9の機能も使ってみたいので、**.NET5.0**のSDKをダウンロードしてインストールします。

以上で準備完了です。
VSCodeを開いて、`Ctrl+Shift+@`でターミナルが開けるので以下のコマンドを実行してください。

```powershell:powershell
dotnet --version
```
表示されたバージョンが5.0以上なら.NET5.0のSDKがインストールされています。

## プロジェクトの作成

```powershell:powershell
dotnet new console -o halloApp
```
上記のコマンドを実行すると、`Hello World!`をコンソールに表示するスケルトンプロジェクトが生成されます。

```cs:Program.cs
using System;

namespace halloApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}
```
オーソドックスなコンソールアプリの最低限のコードが生成されています。
実行方法は以下のコマンドです。

```powershell:powershell
dotnet run
```
エラー無く表示されれば、開発環境の完成です！

## C#9の新機能
せっかく.NET5.0のSDKを導入したので、C#9で導入された[最上位レベルのステートメント](https://docs.microsoft.com/ja-jp/dotnet/csharp/whats-new/csharp-9#top-level-statements)を試してみたいと思います。
先ほどの`Hellow World`プロジェクトをこの新機能で書き換えると以下のようになります。

```cs:Program.cs
System.Console.WriteLine("Hello World!");
```
C#では冗長的だった名前空間やクラス、関数の宣言が無くなってとてもシンプルに記述できるようになりました。
ただしこの**最上位レベルのステートメント**を使用できるのは、アプリケーション内の一つのファイルのみです。
複数のソースファイルで検出されるとエラーになるので注意してください。

## おわりに
今回はじめてVisualStudio以外でC#のプログラムを作成しました。
VisualStudioは業務では必要不可欠な強力なツールですが、自宅で手軽に新機能を試すだけなら今回の開発環境はとても良いと感じました。
業務では.NET5.0への移行はできないので、この機会にいろいろと試してみたいです。
plunkerでopenjscad その3

# 概要

plunkerでopenjscadやってみる。
subtract使ってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/3039b802-c6af-92ac-59c0-a877f1262e4a.png)


# サンプルコード

```
function main() {
  var a = CSG.cube();
  var b = CSG.sphere({ 
    radius: 1,
   	center: [1, 1, 1],
  	resolution: 32 
  });
  return a.subtract(b);
}
```

# 成果物

https://embed.plnkr.co/plunk/pzNyvFQzUPd9l50O

以上。
Windows Terminal & PowerShellでPowerShellスクリプトを実行する方法

# はじめに

Windows Terminalを入れ、PowerShellも7にしてみました。
しかし、右クリックメニューからスクリプトファイルを実行する場合、従来のターミナル経由で古いPowerShellが実行されてしまいます。

これを右クリックメニューで、

- ターミナル: Windows Terminal
- シェル: PowerShellCore

で実行できるようにしたいと思います。

ターミナルをWindows Terminalにすると、出力結果を検索できたり、メッセージを選択してもスクリプトの動作を停止しなくなったりと便利になりますので多くの人に試してもらいたいと思っています。


# 環境

Window TerminalとPowerShellCoreともにパスが通っているとします。

```:WindowsTerminal
バージョン: 1.7.1033.0
```

```:PSVersionTable
Name                           Value
----                           -----
PSVersion                      7.1.3
PSEdition                      Core
GitCommitId                    7.1.3
OS                             Microsoft Windows 10.0.19042
Platform                       Win32NT
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0…}
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1
WSManStackVersion              3.0
```

# コマンドで、Window Terminal & PowerShellCore でスクリプトファイルを実行する

まずは、基礎知識としてターミナルにコマンドを打ってWindow Terminal & PowerShellCoreを実行する場合は、

```
PS >wt pwsh -noexit "script.ps1"
```

などとします。
`-noexit`は、必須ではなくこれを渡すとスクリプトの実行が終わっても閉じないようになります。

# エクスプローラーから、Window Terminal & PowerShellCore でスクリプトファイルを実行する

右クリックメニューから実行できるようにする".reg"ファイルは、以下のようになります。
これを結合すると

- ディレクトリを選択してから右クリックすると出る"PowerShellで開く"メニューを削除する
- スクリプトファイルのアイコンを PowerShellCore に置き換える
- スクリプトファイルを Window Terminal & PowerShellCore を用いて実行する右クリックメニューを追加する
- スクリプトファイルを管理者権限で Window Terminal & PowerShellCore を用いて実行する右クリックメニューを追加する

となります。

このファイルでは、`wt`と`pwsh`のようにパスが通っている前提で登録しています。
確実を期すためには、絶対パスで登録したほうが無難です。

それぞれの絶対パスは、以下になります。

- "%LocalAppData%\Microsoft\WindowsApps\wt.exe"
- "%ProgramFiles%\PowerShell\PowerShell\7\pwsh.exe"


```:pwsh.reg
Windows Registry Editor Version 5.00

; Powershell to Pwsh (WindowTerminal & Powershell7)
[-HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell]

[-HKEY_CLASSES_ROOT\Directory\shell\Powershell]

[-HKEY_CLASSES_ROOT\Drive\shell\Powershell]

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\DefaultIcon]
@="\"C:\\Program Files\\PowerShell\\7\\pwsh.exe\",-32512"

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\Shell\0]
@="PowerShellで実行"

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\Shell\0\Command]
@="wt new-tab --title \"PowerShell\" pwsh -NoExit -Command \"if((Get-ExecutionPolicy ) -ne 'AllSigned') { Set-ExecutionPolicy -Scope Process Bypass }\\; & '%1'\""

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\Shell\runas\Command]
@="wt new-tab --title \"PowerShell\" pwsh" -NoExit -Command \"if((Get-ExecutionPolicy ) -ne 'AllSigned') { Set-ExecutionPolicy -Scope Process Bypass }\\; & '%1'\""
```
plunkerでopenjscad その2

# 概要

plunkerでopenjscadやってみる。
union使ってみた。
プリミティブを表示。


# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f7967ab1-f22b-d6a4-0a18-63d155936f49.png)


# サンプルコード

```
function main() {
  //var a = CSG.cube();
  var a = CSG.cube({
    center: [4, 0, 0],
    radius: [1, 1, 1]
  });

  var b = CSG.sphere({ 
    radius: 1.35,
   	center: [0, 4, 0],
  	resolution: 32 
  });
 	var c = CSG.cylinder({
		start: [0, 0, 3],
		end: [0, 0, 5],
		radius: 1,
		resolution: 32
	});
  var d = CSG.roundedCube({
    center: [4, 0, 3],
		radius: 1,
		roundradius: 0.2,
		resolution: 16
	});
  var e = CSG.roundedCylinder({
		start: [4, -1, 6],
		end: [4, 1, 6],
		radius: 1,
		resolution: 16
	});
  var f = CSG.polyhedron({
	  points: [[1, 1, 0], [1, -1, 0], [-1, -1, 0], [-1, 1, 0], [0, 0, 1]],
	  faces: [[0, 1, 4], [1, 2, 4], [2, 3, 4], [3, 0, 4], [1, 0, 3], [2, 1, 3]]
  });
	return a.union(b.union(c.union(d.union(e.union(f)))));
}
```

# 成果物

https://embed.plnkr.co/plunk/hb4pwYYz4Clpjru8


以上。
pythonでgnuradio その4

#概要

pythonでgnuradioやってみた。
サイン波を再生。

#サンプルコード

```
from gnuradio import analog, audio, blocks, gr

class my_block(gr.top_block):
    def __init__(self):
        gr.top_block.__init__(self, "top0")
        self.samp_rate = samp_rate = 48000
        self.audio_sink_0 = audio.sink(samp_rate, '', True)
        self.wavfile_source_0 = blocks.wavfile_source("a1.wav", True)
        self.connect((self.wavfile_source_0, 0), (self.audio_sink_0, 0))

if __name__ == '__main__':
	try:
		my_block().run()
	except KeyboardInterrupt:
		pass




```



以上。
pythonでgnuradio その3

#概要

pythonでgnuradioやってみた。
サイン波を録音。

#サンプルコード

```
from gnuradio import gr
from gnuradio import blocks
from gnuradio import analog

class my_top_block(gr.top_block):
	def __init__(self):
		gr.top_block.__init__(self)
		samples = sample_rate = 48000
		ampl = 0.3
		src = analog.sig_source_f(sample_rate, analog.GR_SIN_WAVE, 440, ampl)
		head = blocks.head(gr.sizeof_float, samples)
		dst = blocks.wavfile_sink("a1.wav", 1, sample_rate, 8)
		self.connect(src, head, (dst, 0))

if __name__ == '__main__':
	try:
		my_top_block().run()
	except KeyboardInterrupt:
		pass



```

以上。
Linuxのdocker上のredashからlocalhostのMySQLに接続

CentOS7にdockerでredashを構築して、localhostのMySQLに接続しようとしたところ、接続先名は``localhost``ではつながらなかった。

[docker上のredashとローカルのmysqlを連携させる](https://qiita.com/babyse/items/fa0e67911526ac5fdc82)
上記の記事によるとMacやWindowsだと``host.docker.internal``で接続できる。

[How to connect locally hosted MySQL database with the docker container](https://stackoverflow.com/questions/44543842/how-to-connect-locally-hosted-mysql-database-with-the-docker-container)
上記の記事によると、Linuxだと``172.18.0.1``で繋がる。




また、MySQL側もlocalhost以外で繋げるように、ユーザーの権限を``172.18.0.1``または'%'で指定する必要がある。

```
grant all privileges on sample.* to testuser@'%';
```

[MySQL サーバーに外部(localhost以外)から接続する方法](https://loumo.jp/archives/24590)
[Rails]Rspecの下準備

## はじめに
自作のRailsアプリケーションでRspecを利用したので備忘録として残しておきます。

## Gemの追加
```:Gemfile
gem 'rspec-rails'
```
Gem追加後以下のコマンドを入力します。

```
$ rails g rspec:install
```

## factory_bot
factory_botとはテストモデルの自動生成ができるGemです

```
gem 'factory_bot_rails'
```

インストールすると以下のようにダミーデータを作成することができます。

```:spec/factories/user.rb
FactoryBot.define do
  factory :user do
    name {Faker::Name.name}
    email {Faker::Internet.email}
    password {'password'}
    password_confirmation {'password'}
  end
end
```

以上でRpecの下準備が完了です
Unity Barracuda だけど簡単にできる style transfer のサンプルを動かしてみよう

[ニューラルネットで何でもできちゃう！？ Unity Barracudaで遊ぼう](https://www.youtube.com/watch?v=5oKgj8q83ec) を見たので、
さっそく style-transfer 動かしてみました。
左下のサムネイルで、動画にエフェクトがかかるものです。

![Moving.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/42b8c234-9320-98b5-1b2b-05fa01af697f.gif)

# 概略
ポストエフェクトみたいな感じなので、インプットの値をゴリゴリ調整することもなく、
git clone して静止画を動画に変えればすぐに試せます。

# 前提
* Windows 10 home
* Unity 2019.4.10f1
    * 注意：GitHub のバージョンは  2019.4.1f1 なので、そちらのほうが無難です

# 手順
1. [こちら](https://github.com/UnityLabs/barracuda-style-transfer) から git clone してください。
2. Unity で開きます。
3. 開いたところでエラー（※1）がかなり出ていましたが、無視して clear します。
4. Unity で実行します。
    * マウスの左でエフェクトの On/Off
    * マウスの右でエフェクトのイメージ切り替え
5. GitHub のコードは静止画＋カプセルオブジェクトなので、[この辺](https://xr-hub.com/archives/15798)を参考に動画に切り替えると、上記 gif のようなことができます。

### ※1 エラー
無視したやつです。

```
Unexpected error while evaluating model output StyleNetwork/residual_block1/residual_block1_conv1/convolution_residual_block1_conv1/instance_normalisation/get_normalization/alpha. System.NotImplementedException: Layer type 40 needs to be explicitly handled
  at Unity.Barracuda.ModelAnalyzer.ListTemporaryTensorShapes (Unity.Barracuda.Model model, System.Collections.Generic.IDictionary`2[TKey,TValue] inputShapes, System.Collections.Generic.IDictionary`2[System.String,System.Nullable`1[Unity.Barracuda.TensorShape]]& shapesByName) [0x01259] in D:\10_unity\barracuda-style-transfer\Library\PackageCache\com.unity.barracuda@1.2.1-preview\Barracuda\Runtime\Core\Backends\ModelAnalyzer.cs:517 
  at Unity.Barracuda.ModelAnalyzer.TryGetOutputTensorShape (Unity.Barracuda.Model model, System.Collections.Generic.IDictionary`2[TKey,TValue] inputShapes, System.String output, Unity.Barracuda.TensorShape& shape) [0x00008] in D:\10_unity\barracuda-style-transfer\Library\PackageCache\com.unity.barracuda@1.2.1-preview\Barracuda\Runtime\Core\Backends\ModelAnalyzer.cs:532 
  at Unity.Barracuda.Editor.NNModelEditor+<>c__DisplayClass26_0.<OnEnable>b__2 (System.String i) [0x00008] in D:\10_unity\barracuda-style-transfer\Library\PackageCache\com.unity.barracuda@1.2.1-preview\Barracuda\Editor\ONNXModelImporterEditor.cs:142 
UnityEngine.Debug:LogError(Object)
Unity.Barracuda.D:LogError(Object) (at Library/PackageCache/com.unity.barracuda@1.2.1-preview/Barracuda/Runtime/Core/Internals/Debug.cs:131)
Unity.Barracuda.Editor.<>c__DisplayClass26_0:<OnEnable>b__2(String) (at Library/PackageCache/com.unity.barracuda@1.2.1-preview/Barracuda/Editor/ONNXModelImporterEditor.cs:147)
System.Linq.Enumerable:ToList(IEnumerable`1)
Unity.Barracuda.Editor.NNModelEditor:OnEnable() (at Library/PackageCache/com.unity.barracuda@1.2.1-preview/Barracuda/Editor/ONNXModelImporterEditor.cs:137)
UnityEditor.AssetPreviewUpdater:CreatePreviewForAsset(Object, Object[], String)
```
Rasbian/ラズパイ備忘録

# Python実行中のPermission denied
Rabian(ラズパイ4）で、ユーザーアカウントでpython3.7 のコードを実行中に以下のエラー(permission denied)が発生。
結論:sudo で「moduleインストール+python実行」で解消。

```python
Traceback (most recent call last):
  File "/usr/lib/python3/dist-packages/serial/serialposix.py", line 265, in open
    self.fd = os.open(self.portstr, os.O_RDWR | os.O_NOCTTY | os.O_NONBLOCK)
PermissionError: [Errno 13] Permission denied: '/dev/serial0'

```
原因は/dev/serial0へのpermissionがないことだと思い、pythonコードをsudoで実施した。

```
sudo python3 co2out.py
```
今度はgspreadモジュールがないと言われる(pipしていたのに..）。

```
Traceback (most recent call last):
  File "co2out.py", line 5, in <module>
    from oauth2client.service_account import ServiceAccountCredentials
```

sudoでインストールし直したら今度はうまく行った。

```
sudo pip3 install gspread 
```


#Rasbian でPATHを通す
python3のgspreadをインストールしている際に以下警告が現れる。

```
  The script google-oauthlib-tool is installed in '/home/XXXXX/.local/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
```
文字通りPATHをgoogle-oauthlib-toolにPATHを通して置かないと後々まずいと思い以下コードをコマンド上で実施。
※絶対に$PATHを冒頭につけること！これをつけることで「既存のPATHに追加する」という意味になる。（つけないと既存のパスが失われる...）
参照：https://www.fabshop.jp/path-exportcommand/

```terminal
$ export PATH="$PATH:/home/XXXXX/GDrive/bin"
```

#ラズパイで定期的に実行
windowsのタスクスケジューラのようなものがcrontab。
コマンドでcrontabを編集

```terminal
crontab -e
```
初心者はおとなしくnanoで編集。
* * * * * は　Minutes Hour Day Month Weekと対応。

```python
#crontabの末尾に追記
1 1 * * * sudo python3 /home/XXXXX/GDrive/XXX.py
#毎日01:01にpythonを流す
*/5 * * * * sudo python3 /home/XXXXX/GDrive/XXX.py  2> /home/XXXXX/Logs.log  
#5分ごとに起動+エラー時のログ取得
```

参照：https://k99-tech.com/blog/archives/1141#i-5
material/index.d.tsはモジュールではありません


@ angular / material / index.d.ts 'はモジュールではありません


バージョン9未満

```ts
import { MatDialog } from '@angular/material'
```
これでインポートできた。

バージョン9以降

```ts
import { MatDialog } from '@angular/material/dialog'
```
materialの下の階層も指定しないとインポートできない。