OmniAICreator/Qiita-1.07M huggingface dataset:
[python]echo serverをマルチクライエントに対応しましょう

# 概要

前回[pythonで簡単な echo サーバーを作りましょう](https://qiita.com/iari/items/5872a024bbd362efe63b) は、pythonで簡単なechoサーバーを作成しました。  
が、そのサーバーは一つのクライエントしかに対応できないので、  
今回はpythonの`_thread`モジュールを使って、マルチクライエントに対応しよう！  

# 変更点

* サーバー  

1. クライエント受送信部分は`onNewClient`に封じました
2. クライエントごとにスリードを配ります。

* クライエント
  
  サーバーとの接続が成功でしたら、まず一回受信してみる（Welcomeメッセージがあるから）。

## サーバーサイド

まずサーバーサイドを見てみよう

pythonには`_thread`と`threading`との2つのスレットを処理するモジュールがありますが、  
今回は抽象度の低い`_thread`を使わせていただきます。  

```python
import _thread
'''
略
'''
while True:
  client_socket,client_address = server_socket.accept()
  client_socket.send(("Welcome to the server").encode())
  print("[-] Connection from",client_address)
  #スレッドを起動する
  _thread.start_new_thread(onNewClient,(client_socket,client_address))
```

## クライエント

略

## 結果

まずサーバを実行してみよう：

```
PS > python .\echo_server_multi.py
[-] Socket Bound to port 45621
[-] Listening...
```
クライエント1号さんを実行する：

```
PS > python .\echo_client.py
[-] Received from server: Welcome to the server
>I'm No.1
[-] Received from server: I'm No.1
>
```

クライエント2号さんを実行する：

```
PS > python .\echo_client.py
[-] Received from server: Welcome to the server
>I'm No.2
[-] Received from server: I'm No.2
>
```

サーバーの方の表示：

```
[-] Connection from ('127.0.0.1', 13425)
[-] Connection from ('127.0.0.1', 13426)
[-] Send by client(('127.0.0.1', 13425)):I'm No.1
[-] Send by client(('127.0.0.1', 13426)):I'm No.2
```



# 全コード

```python
#server
import socket
import _thread

HOST = '127.0.0.1'
PORT = 45621

def onNewClient(client_socket:socket.socket,addr):
  while True:
    data = client_socket.recv(1024)
    if not data : break
    str_data = data.decode()
    print("[-] Send by client({0}):{1}".format(addr,str_data))
    client_socket.send(data)
  client_socket.close()

server_socket = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
server_socket.bind((HOST,PORT))
print("[-] Socket Bound to port " + str(PORT))

server_socket.listen(5)
print("[-] Listening...")

while True:
  client_socket,client_address = server_socket.accept()
  client_socket.send(("Welcome to the server").encode())
  print("[-] Connection from",client_address)
  _thread.start_new_thread(onNewClient,(client_socket,client_address))
```


```python
#client
import socket

client_socket = socket.socket()
client_socket.connect(("127.0.0.1",45621))

while True:
  newData = client_socket.recv(1024)
  print("[-] Received from server:" ,str(newData.decode()))
  data = input(">")
  client_socket.send(data.encode())
  if  not data:break
client_socket.close()
```
【Ansible】動的にリストを作成したい

### はじめに
<バージョン>
ansible 2.9.7
　かなり限定的な使い方になってしまうのですが、以下のように特定のリストと変換した結果の
組み合わせを作成するのに苦労したのでメモしておきます。
ネットワーク系のコマンドはスペースが入っているので、ファイル名にコマンドを入れる場合は
いちいち置換する必要があるので面倒ですね。

```yaml:入力
---
sample_commands:
  - show version
  - show route
  - show running-config
```

```yaml:出力
---
file_list:
  - cmd: show version           # 変換前
    filename: show_version.log  # 変換後
  - cmd: show route
    filename: show_route.log
  - cmd: show running-config
    filename: show_running-config.log
```

### playbook紹介
　ループの1週目にリストが存在せずエラーにならないように、default([])と記載します。

```yaml:create_list.yml
---
- name: create list
  hosts: localhost
  gather_facts: no
  vars:
    sample_commands:
      - "show version"
      - "show route"
      - "show running-config"
  tasks:    
    - name: set fact
      set_fact:
        file_list: >
          {{ file_list | default([]) + [{
          'cmd': item,
          'filename': filename
          }] }}
      loop: "{{ sample_commands }}"
      vars:
        filename: "{{ '%s.log' | format( item | replace(' ', '_')) }}"

    - name: debug
      debug:
        var: file_list
```

### 実行結果
　想定通りの結果を得ることが出来ました。

```text:ログ
[ec2-user@ip-<ip-addr> ansible]$ ansible-playbook create_list.yml 

PLAY [create list] *****************************************************************************************************

TASK [set fact] ********************************************************************************************************
ok: [localhost] => (item=show version)
ok: [localhost] => (item=show route)
ok: [localhost] => (item=show running-config)

TASK [debug] ***********************************************************************************************************
ok: [localhost] => 
  file_list:
  - cmd: show version
    filename: show_version.log
  - cmd: show route
    filename: show_route.log
  - cmd: show running-config
    filename: show_running-config.log

PLAY RECAP *************************************************************************************************************
localhost                  : ok=2    changed=0    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0
```

### 参考記事
[dictionary - Ansible Playbookでホストグループから辞書のリストを作成する](https://cloud6.net/so/dictionary/2033949)
クレジットカード決済用JavaScript準備 ⑩環境設定3

Heroku上に環境変数を設定しましょう
Heroku上に環境変数を設定します。
下記のコマンドを実行してください。

```terminal:ターミナル
% heroku config:set PAYJP_SECRET_KEY='sk_test_*************'
```

```terminal:ターミナル
% heroku config:set PAYJP_PUBLIC_KEY='pk_test_*************'
```

Heroku上で環境変数を確認しましょう
設定が正しくできているか、Herokuの環境変数一覧を表示してみましょう。下記のコマンドを実行してください。

```terminal:ターミナル
% heroku config
```

一覧に、PAYJP_SECRET_KEYとPAYJP_PUBLIC_KEYという変数名で、値が設定されていれば成功です。
GitHub上のファイル・ディレクトリに大文字・小文字の差分が反映されない

今回自身の忘備録または、同じ事象で悩んでいる方のためにメモとして残しておきます。

記載するにあたっての流れは、Reactで作成したアプリで`yarn run build`コマンドを実行した際に、

**「githubからcloneしたファイルとアプリがimportしているファイルのファイル名が違うよ！」**

というエラーで怒られたのがきっかけです。

そもそも、Githubはデフォルトでファイル名の大文字・小文字を差分として認識しない設定らしく、認識するように設定するのであれば以下のコマンドを実行しましょう。

```
$ git config core.ignorecase false
```

ただ、上記を実行しただけではpushをしても反映されなかったので、下記の内容を実行してみてください。

**※絶対にディレクトリ・ファイルのコピー・バックアップは取っておきましょう！**

## 1.git上のキャッシュを削除する

まず、git上に残っているキャッシュを削除し、git上の管理対象から外します。
必ず一つのファイルずつ確認しながら実行しましょう。

```
git rm --cached PATH&FILENAME
```

## 2.実際にファイル・ディレクトリを削除する。

対象のファイル・ディレクトリを直接削除しましょう。**（※絶対にコピー・バックアップは取っておきましょう！）**

右クリックでもコマンドでもどちらでも大丈夫です。

## 3.大文字・小文字に修正した、同じ内容のファイル・ディレクトリを作成する。

実際に削除が出来たら、大文字・小文字のファイル名を思うように修正し、コピー・バックアップした内容を貼り付けましょう。

成功例としては、`git status`を実行すると、下記のように

```
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        deleted:    src/components/Footer/index.tsx
        deleted:    src/components/Footer/style.scss

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   src/components/footer/index.tsx
        modified:   src/components/footer/style.scss
```

**deletedとmodified計４つの変更が確認できますので、コミット・プッシュをしましょう。**
コミット・プッシュがした跡は、リモートリポジトリがしっかりと反映されているか確認しましょう。

以上で作業は終了です。
ありがとうございました！

## 参考文献リスト

https://www-he.scphys.kyoto-u.ac.jp/member/shotakaha/dokuwiki/doku.php?id=toolbox:git:rm:start

https://qiita.com/shoheiyokoyama/items/0fd9f688a269bbdc9da3
DataFrameとSeriesのapply()メソッドにおけるaxis

## 背景
以下のようにTypeErrorが出て、「あれ、なんでだ？」ってなってたので、記録する。

```python
import pandas as pd

foo = pd.DataFrame([[[1,2],['i','ii']],
                    [[3,4,5],['iii','iv','v']]], columns=['A','B'])

bar = foo['A'].apply(len, axis=1)
print(bar)
#　---------------------------------------------------------------------------
# TypeError                                 Traceback (most recent call last)
# (中略)
# TypeError: len() takes no keyword arguments
```

## 結論
DataFrameの`.apply()`メソッドには`axis`のキーワード引数があるけど、Seriesにはない。。そりゃそうだ。

```python
import pandas as pd

foo = pd.DataFrame([[[1,2],['i','ii']],
                    [[3,4,5],['iii','iv', 'v']]], columns=['A','B'])

bar = foo['A'].apply(len) #no axis
print(bar)
# 0    2
# 1    3
# Name: A, dtype: int64
```

DataFrameの`.apply`では`axis`で適用方向を指定できる。（いい例が思い浮かばないけど）

```python
import pandas as pd

foo = pd.DataFrame([[[1,2],['i','ii']],
                    [[3,4,5],['iii','iv', 'v']]], columns=['A','B'])

baz = foo.apply(lambda col: [col[0][0], col[1][0]], axis=0)
print(baz)
#    A    B
# 0  1    i
# 1  3  iii
qux = foo.apply(lambda row: row['A']+row['B'], axis=1)
print(qux)
# 0            [1, 2, i, ii]
# 1    [3, 4, 5, iii, iv, v]
# dtype: object
```
クレジットカード決済用JavaScript準備 ⑨環境設定２


JavaScriptで環境変数を呼び込みましょう
-

Railsで設定した環境変数をJavaScriptで呼び出せません。その際は、下記のようにwebpackerを用いることで呼び出せます。

####1)以下のコマンドを実行してwebpacker.rbを作成してください。

```ターミナル
% touch config/initializers/webpacker.rb
```

####2)config/initializers/webpacker.rb

```rb:config/initializers/webpacker.rb
Webpacker::Compiler.env["PAYJP_PUBLIC_KEY"] = ENV["PAYJP_PUBLIC_KEY"]
```

####3)javascript/card.jsを編集

```javascript:app/javascript/card.js
const pay = () => {
 Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
```

これで、環境変数を呼び出すことができました。
クレジットカード決済用JavaScript準備 ⑧環境変数１　シェルに設定しよう

環境変数をシェルに設定しよう
-

開発環境における鍵情報など大切な情報はシェルに保存し、環境変数として呼び出すようにしましょう。
使用しているMacのOSごとに設定方法が異なります。以下の作業マークのうち、自身の環境に合致する方を選択して実行してください。

MacOSがCatalina以降の場合
-

ターミナルで以下のコマンドを実行して環境変数を設定しましょう。

```rb:ターミナル
% vim ~/.zshrc
# iを押してインサートモードに移行し、下記を追記する。既存の記述は消去しない。
export PAYJP_SECRET_KEY='sk_test_************'
export PAYJP_PUBLIC_KEY='pk_test_************'
# 編集が終わったらescキーを押してから:wqと入力して保存して終了
```

現在の.zshrcの内容を削除せず、末尾に上記の設定を「追記」してください。既存の設定を削除してしまうとPCが正常に動作しなくなる危険性があります。記述ができたら、以下のコマンドを実行して設定を反映させましょう。

```rb:ターミナル
# 編集した.zshrcを読み込み直して、追加した環境変数を使えるようにする
% source ~/.zshrc
```

これで、環境変数の設定が完了しました。

MacOSがMojave以前の場合
=

ターミナルで以下のコマンドを実行して環境変数を設定しましょう。

```rb:ターミナル
% vim ~/.bash_profile
# iを押してインサートモードに移行し、下記を追記する。既存の記述は消去しない。
export PAYJP_SECRET_KEY='sk_test_*************'
export PAYJP_PUBLIC_KEY='pk_test_*************'
# 編集が終わったらescキーを押してから:wqと入力して保存して終了
```

現在の.bash_profileの内容を削除せず、末尾に上記の設定を「追記」してください既存の設定を削除してしまうとPCが正常に動作しなくなる危険性があります。
記述ができたら、以下のコマンドを実行して設定を反映させましょう。

```rb:ターミナル
# 編集した.bash_profileを読み込み直して、追加した環境変数を使えるようにする
% source ~/.bash_profile
```

これで、環境変数の設定が完了しました。

≈
ReactのContext.Providerがいっぱいネストするのを防ぐための書き方

# Context.Providerの数が多いとネストが深くなる問題について

https://ja.reactjs.org/docs/context.html#consuming-multiple-contexts

公式ドキュメントのの例における以下の部分

```jsx
    // コンテクストの初期値を与える App コンポーネント
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
```

これは２つのコンテキストProviderでラップしているが、これが多くなるとネストが深くなってくのが嫌だなという問題。

```jsx
    // (コンテキスト名は適当)
    return (
      <ThemeContext.Provider value={theme}>
        <UserGroupContext.Provider value={{}}>
          <UserContext.Provider value={signedInUser}>
            <PlacementContext.Provider value={{}}>
              <HogeContext.Provider value={{}}>
                <FugaContext.Provider value={{}}>
                  <PiyoContext.Provider value={{}}>
                    <Layout />
                  </PiyoContext.Provider>
                </FugaContext.Provider>
              </HogeContext.Provider>
            </PlacementContext.Provider>
          </UserContext.Provider>
        </UserGroupContext.Provider>
      </ThemeContext.Provider>
    );
  }
```

これが嫌かどうかは個人の感じ方もあるかもしれないが、以下に示す書き方の方がすっきりする。

h1. 解決

```jsx
import React from 'react';

/**
 * コンポーネントリストを入れ子にして連結したコンポーネントを返す
 * @param components
 * @returns {*|(function(...[*]): *)|(function(*): *)}
 */
const composeComponents = (...components) => {
  if (components.length === 0) {
    return (arg) => arg;
  }
  if (components.length === 1) {
    return components[0];
  }
  return components.reduce((A, B) => (props) => <A><B {...props} /></A>);
};


const ComposedProvider = composeComponents(
  (props) => <ThemeContext.Provider {...props} value={theme} />,
  UserGroupContext.Provider,
  (props) => <UserContext.Provider {...props} value={signedInUser} />,
  HogeContext.Provider,
  FugaContext.Provider,
  PiyoContext.Provider,
);

/* (途中省略) */
    return (
      <ComposedProvider>
        <Layout />
      </ComposedProvider>
    );


```

コンポーネントをreduceを使って連結する関数を用意しておいて、連結結果でラップするように書くとキレイだし、順番を入れ替えたりするのも楽。
Vue.jsでBootstrapを利用する方法と、Bootstrapをカスタマイズする方法

# はじめに
Vue.jsでBootstrapを利用する方法です。

利用する方法はいろいろあり、
Bootstrapの利用したい機能の範囲などによっても
適切な導入方法が違ったりすると思います。

利用方法の1つの例として参考にしてください。

# Bootstrapを利用可能な状態にする

## sass-loaderインストール
Vue.jsでsassをコンパイルするために必要なパッケージをインストールします。

```shell
npm install sass-loader node-sass
```

## bootstrap-vueインストール
Vue.jsでbootstrapを利用するために用意されているパッケージをインストールします。

```shell
npm install bootstrap-vue
```

## main.jsで有効化
インストールしたbootstrap-vueを利用可能な状態にします。
main.jsに下記5行を追記します。

```js:main.js
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
```

これでbootstrapが利用可能な状態です。

## bootstrapのコードを記述
実際にbootstrapが使える状態かどうか確認します。
こんな感じで適当にbootstrapのコードを書いてみましょう。

```html
    <b-button size="lg" variant="outline-primary">
      Bootstrap Button
    </b-button>
    <b-button size="lg" variant="danger">
      Bootstrap Button
    </b-button
```

正しくbootstrapのボタンが表示されていればOKです。

# テーマカラーなどをカスタマイズ可能な状態にする
さらに、bootstrapをカスタマイズ可能な状態にするための設定も行います。

## カスタマイズ用scss作成
カスタマイズのコードを記述するためのファイルを作成します。
assetsなどのディレクトリ配下に
`bootstrap-custom.scss` を作成し下記のように記述してください。

```scss:assets/scss/bootstrap-custom.scss
$primary: green;

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';
```

これは、本来は青色であるprimaryの色を、緑色に変更しています。
他にもカスタマイズしたい場合はこの
`$primary: green;` の下にコードを並べていきます。


## カスタマイズファイルを有効化
main.jsで、先ほどimportした2つのbootstrapのcssではなく、
今回追加したカスタマイズ用のscssをimportします。

```js:main.js
// import "bootstrap/dist/css/bootstrap.css";
// import "bootstrap-vue/dist/bootstrap-vue.css";
import "./assets/scss/bootstrap-custom.scss"
```

これで先ほどのボタン表示を再確認してみてください。
primaryのボタンの色が緑になっていればカスタマイズ成功です。

## カスタマイズ方法
下記ファイルに、カスタマイズ可能な変数がたくさん定義されています。
`node_modules/bootstrap/scss/_variables.scss`

テーマカラーや背景色、ボーダーの太さなどいろいろ定義されているので、
変更したい変数を `bootstrap-custom.scss` で上書きすることで、
カスタマイズすることができます。

# 参考
https://bootstrap-vue.org/docs/reference/theming#theming-bootstrap--bootstrapvue
https://getbootstrap.com/docs/4.5/getting-started/theming/
MySQLのslow queryの設定が上手くいかなかった時に確認すること

https://qiita.com/SuguruOoki/items/5c4c04a120d9fa5b4267

本記事は、この記事からかなりそのまま引用している。

slow queryの設定方法は2通り。 

```
mysql> set global slow_query_log_file = '/tmp/mysql-slow.log';
mysql> set global long_query_time = 5;
mysql> set global slow_query_log = ON;
```

または、my.confからの場合は

```/etc/my.conf
[mysqld]
slow_query_log=ON
long_query_time = 5
slow_query_log_file = /tmp/mysql-slow.sql
```

my.confからの場合は再起。

```
/etc/init.d/mysqld restart
```


#上手くいかない時がある

## とりあえず
もう一回再起動

## 再起動は成功するけどやっぱり出ない場合は、テーブルに出力してみる

```
mysql> set global log_output = 'TABLE';
```
念のため設定確認...。

```
mysql> show variables like 'slow%';
+---------------------+---------------------+
| Variable_name       | Value               |
+---------------------+---------------------+
| slow_launch_time    | 2                   |
| slow_query_log      | OFF                 |
| slow_query_log_file | /tmp/mysql-slow.sql |
+---------------------+---------------------+
```

slow_query_logが**OFF**になってたら**ON**へ変更。

```
mysql> set global slow_query_log = ON
```

これで出力されるはず。

```
mysql> select * from mysql.slow_log;
```

## テーブルには出せたけど、やっぱりファイルに出したい

出力先設定。

```
mysql> set global log_output = 'FILE';
```
* この設定をしたときに権限エラーがでたら、出力先ファイル**slow_query_log_file**の権限を確認して変更。

* /etc/my.confにゴミが入ってないか確認。(自分はこれｗ)

* **long_query_time**を0にしてみる。

```
mysql> set global long_query_time = 0;
```
[Git] HEADの動きの履歴を表示

#概要
コミットを取り消したりしてHEADの位置を確認したい場合の方法をメモします。

HEADの概念は以下の記事が分かりやすかったです。
[GitのHEADとは何者なのか](https://qiita.com/ymzk-jp/items/00ff664da60c37458aaa)

#方法

```
git reflog
```
【React】フロントを複数のAPIサーバーとつなげたい【Docker】

## 前置き
Docker利用
Reactコンテナでaxiosを使ったリクエストをExpress(API用バックサーバ)コンテナにオーバーライドさせる必要があったのでまとめました。
APIコンテナ1つの場合と2つ以上の場合に分けてます。

### 1. APIコンテナ１つの場合
##### 状況

|コンテナ  |ポート番号  |コンテナ名  |
|---|---|---|
|React |3000  |front  |
|Express  |3333  |back |

##### 方法
###### Reactコンテナのpackage.jsonにproxy項目追加

```package.json
#  "http://コンテナ名:ポート番号" を記入
"proxy": "http://back:3333"
```
これで、例えばback側に/usersというapiのURLを作っていたとすると、
front側で axios.get('/users').....で呼び出せます。


### 2. APIコンテナ２つ以上の場合
 
##### 状況

|コンテナ  |ポート番号  |コンテナ名  |
|---|---|---|
|React |3000  |front  |
|Express1 |3333  |back1  |
|Express2 |3838  |back2  |

##### 方法
###### [http-proxy-middlewareの利用](https://github.com/chimurai/http-proxy-middleware)
1. React側コンテナでhttp-proxy-middlewareのインストール

```
# Reactコンテナ
$ npm install --save-dev http-proxy-middleware
```

２. setupProxy.jsに設定記述

今回の状況の場合は下記のようなコードなりました。

```
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
       # ここに呼び出したいURL
        '/users/**',
        createProxyMiddleware({
       # /users/と打つとhttp://back1:3333/users/になる
　　　　# "http://コンテナ名:ポート番号" を記入
        target: 'http://back1:3333',
        changeOrigin: true,
        secure: false
        })
    );
    app.use(
        '/cards/**',
        createProxyMiddleware({
        # /cards/と打つとhttp://http://back2:3838/cards/になる
        target: 'http://back2:3838',
        changeOrigin: true,
        secure: false
        })
    );
  }
```
marginとpaddingの違いは何？

## はじめに
HTML、CSSの勉強を初めて一番最初につまづいたのが「margin」と「padding」です。　　
二つとも余白を作ることはわかったけど、

内側の余白？？？
外側の余白？？？

何を言っているのか分かりませんでした、、、
また要素間の余白をとりたい時に、marginとpaddingのどちらを使えば良いのか迷いますよね。

本記事はそんな悩みを持っている方に向けて書きました。
（marginとpaddingの違いを確認することが、本記事の目的であるため、具体的なコードの記述方法については詳しく触れていません）

## 目的
- marginとpaddingの違いを明確にする
- 比喩表現でmarginとpaddingの理解度をあげる

## ボックスモデルとは
marginとpaddingを理解する前に前提知識としてボックスモデルについて触れていきます。
ボックスは下記の図のような「content」、内側の余白の「padding」、contentに枠をつける「border」、外側の余白である「padding」から構成されています。
CSSを当てることで個別に高さや幅、色などを指定できます。
![スクリーンショット 2021-04-22 18.58.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/96fdf47a-12bf-ba20-a735-881907c7b1b0.png)


## paddingとは
内側の余白のことを指します。上下左右の余白はpxで指定が可能です。
順番は時計回りになります。


|padding: 1px| 上下左右に内側の余白を1px指定 |
| ---- | ---- |
|padding: 1px 2px | 上下に1px 左右に2px内側の余白を指定|
|padding: 1px 2px 2px| 上に1px 左右に2px 下に3px内側の余白を指定|
|padding: 1px 2px 3px 4px| 上に1px 右に2px 下に3px 左に4px内側の余白を指定|

![スクリーンショット 2021-04-22 19.18.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/bb51f8a1-a9a0-0d62-0ff1-e79452b3d6b1.png)


## borderとは
要素の境界線（枠）の幅や色を指定できる
boder: 太さ　線の種類　色; と記述することで境界線の指定ができます。
記述例　線が3px 線の種類が１本線　線の色が青

```html
border: 3px solid blue;
```

![スクリーンショット 2021-04-22 19.33.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/dca562b4-615f-574f-42e5-b68e081ec3bc.png)

## marginとは
外側の余白のことを指します。上下左右の余白はpxで指定が可能です。
順番は時計回りになります。


|margin: 1px| 上下左右に外側の余白を1px指定 |
| ---- | ---- |
|margin: 1px 2px | 上下に1px 左右に2px外側の余白を指定|
|margin: 1px 2px 2px| 上に1px 左右に2px 下に3px外側の余白を指定|
|margin: 1px 2px 3px 4px| 上に1px 右に2px 下に3px 左に4px外側の余白を指定|
|margin: auto| 余白を自動で算出|

![スクリーンショット 2021-04-22 21.57.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/667cd434-159e-f228-1df6-7a8cddd127c7.png)



## 比喩表現でmarginとpaddingの違いを理解しよう
私がmarginとpaddingの違いを落とし込むことができた比喩表現は

**バリアー**です。

バリアーだけでは？？となると思いますので、ボックスモデルをもとに比喩表現を記述します。

- content = 本体
- padding = バリアーの内側の領域
- border = バリアー
- margin = バリアーの外側の領域

![スクリーンショット 2021-04-22 22.15.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/bf1b2bcc-647e-bdd6-e32b-0b7447b66b70.png)

考え方として

本体(content)に対して、バリアー(border)内の領域を広げたい場合は、バリアーの内側であるpaddingを指定。

他の本体(content)との距離を取りたい場合は、バリアーの外側の領域であるmarginを指定する。





## 図でpaddingとmarginの違いを確認してみよう
上記を踏まえて図をみて確認してみましょう。

paddingで余白をとる場合

```html
.content-blue{
padding-bottom: 50px;
}
```

本体(content)に対して、バリアー(border)内の領域を広げたい為にpaddingを指定して、内側の余白をつくります。

![スクリーンショット 2021-04-23 8.29.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/3fbd10aa-1d9e-e542-4438-4c29c5ea790e.png)

marginで余白をとる場合

```html
.content-blue{
margin-bottom: 50px;
}
```

他の本体(content)との距離を取りたい為、バリアーの外側の領域であるmarginを指定して外側の余白をつくります。

![スクリーンショット 2021-04-23 8.41.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/543f68a0-1bc2-5b42-5d42-5840790dec22.png)


上記のようにバリアー（border)を起点として、内側か外側かを考えるとCSSをスタイリングする時に迷いが減ると思います。




## おわりに
以上で比喩表現でのpaddingとmarginの違いについての説明は終わりになります。
少しでも本記事がお役に立てると幸いです。
アプリwebview間の疎通やり取りメモ

アプリとwebviewの間で起きる疎通確認で、自分はwebフロントの人間でアプリのこと全然知らず、webview側ではアプリ側に何ができるのか。知識を0を1にするためのメモ

アプリとwebviewのハイブリットアプリの対応はこれからも起きそうなので、残しとこうと思う
Android, ios共通です


## やりたいこと
アプリとwebviewの疎通
目線はwebview

## アプリ側が出来ること
* console.logが取得できる
* alertも取得できて、alertをJS側から渡すとアプリのalertとして出すことが出来るらしい
* web側がアプリ専用のglobal関数を渡せばアプリでもJSメソッドを使うことができる
    * window.hoge = 'test'　とかするとtestをアプリでも取得できる、みたいな。
* localStorageやsessionStorageが保存できる(ドメイン気を付けて)
* ユーザーエージェント偽装ができる。この対応の時は文字列でもらった。Android,ios別々にもらえる
    * chromeでは要素を検証の歯車アイコンを押してdevicesでmobileを追加するときにUAにstringを書くことができるので偽装したUAの名前を入れると確認することができる。
* web側のパス情報を取得してviewに出すことができる。(Reactだとフックかけづらくてめんどくさいらしいができるみたい)
    * そのパス情報を判別してwebviewを出さずにアプリのviewを出すことができる


## webview側でできること
* アプリ側のメソッドを使うことができる。(自分がやったプロジェクトでは対応はなかったけど)
* アプリで保存されたstorageはwebviewで使うことができるが、アプリ側の保存タイミングがあるので、そこだけ気を付ける
* アプリ側がgetパラメータで送ってきたものを取得できる(まあそうだよね)
    * ※ただし、postはJS側では取得できない。これは無理




とりあえずわかったことは以上。
チャールズとかも本当は使ったほうがいいかな～？とかも思ったりするけど、今回使用なし。
わかったことがあれば追記していきたい。
Uipathでxlsファイルをxlsxファイルに変換する方法

# 環境
- UiPath

# 対象
- UiPathでxlsファイルをxlsxファイルに変換したい人

# 方法
■全体の配置は今回このようにしています
![スクリーンショット 2021-04-23 184639.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/77d9c32c-5ac6-2b38-6b94-27c897e63c5e.png)

 ※使った変数/引数はこれ
![スクリーンショット 2021-04-23 184813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/ff5918db-831d-8752-4208-4a5a46fb3e80.png)
![スクリーンショット 2021-04-23 184926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/d0eefe81-b37c-762e-6e38-5a8be6388edd.png)
今回は外部から呼ばれる想定なので、ターゲットのパスは引数にしています



■ターゲットのパスからファイル一覧を取得します
![スクリーンショット 2021-04-23 185241.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/4edcfc32-9d49-afcc-17dc-3864e6812451.png)
右辺には下記を入れています

```vb
Directory.GetFiles(in_targetPath, "*.xls", SearchOption.AllDirectories)
```
※一応xlsで拡張子指定していますが、GetFilesの仕様でxlsxファイルも取得してしまいます


■ファイル数分for eachで回す
![スクリーンショット 2021-04-23 190406.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/eccb563f-2773-d55a-411f-1d0ef84e37f1.png)

※Type ArgumentはStringを指定してください。

■ファイルの拡張子がxlsか確認する
![スクリーンショット 2021-04-23 190309.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/2e4f1dae-d3cd-0a8a-47fb-bd65dfaf5da6.png)

```vb
Path.GetExtension(item).ToLower().Equals(".xls")
```


■ファイル変換コードを実行する
![スクリーンショット 2021-04-23 190715.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/0650f7e3-0b69-1796-51db-7aae8e205f49.png)
![スクリーンショット 2021-04-23 190734.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/629cc9f1-4a98-4f1f-eab0-6addb11468db.png)

```vb:
    Dim  xlsFileName As String = in_Path
    Dim  xlsxFileName As String  = xlsFileName & "x"
	
    '変更後のパス表示
	Console.WriteLine(xlsxFileName)
    Dim  excelApp As Microsoft.Office.Interop.Excel.Application  = New Microsoft.Office.Interop.Excel.Application()

    '.xlsファイルを開く。
    Dim  eWorkbook As Microsoft.Office.Interop.Excel.Workbook= excelApp.Workbooks.Open(xlsFileName)

    ' .xlsx形式で保存する。
    eWorkbook.SaveAs(xlsxFileName,
        Microsoft.Office.Interop.Excel.XlFileFormat.xlOpenXMLWorkbook, Type.Missing,
        Type.Missing, Type.Missing, Type.Missing,
        Microsoft.Office.Interop.Excel.XlSaveAsAccessMode.xlNoChange, Type.Missing,
        Type.Missing, Type.Missing, Type.Missing, Type.Missing)

    ' ファイルを閉じる
    eWorkbook.Close(False, Type.Missing, Type.Missing)

    ' .xlsファイルを削除する。
    File.Delete(xlsFileName)
```
こちらのコードを実行するにはMicrosoft.Office.Interop.Excelのアセンブラを追加する必要があります。
対象のxamlファイルをテキストエディターで開いて以下のように追記してください
![スクリーンショット 2021-04-23 192018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/7d11e3c3-2e4a-b437-c106-1825c2d7fee2.png)

```
<AssemblyReference>Microsoft.Office.Interop.Excel</AssemblyReference>
```

■実行結果
・実行前
![スクリーンショット 2021-04-23 184141.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/cbee78ec-af90-68d8-2082-3f53f9e36aec.png)

・実行後
![スクリーンショット 2021-04-23 191522.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/8e28e832-5cf1-1c86-fc28-898005bbd10f.png)
【Vue.js】v-scroll-lockを使って、スクロールのロックを実装

#v-scroll-lockとは

v-scroll-lockは（modal / lightbox / flyouts / nav-menus）等のスクロールを
中断することなくボディのスクロールをロックするライブラリです。

#v-scroll-lockの導入方法
以下のnpm、yarn、CDNを使ってインストールします。

- npm

```terminal
npm install v-scroll-lock --save
```
- yarn

```terminal
yarn add v-scroll-lock
```

- CDN

```html:CDN
<script src="https://cdn.jsdelivr.net/npm/v-scroll-lock@1.0.1/dist/v-scroll-lock.min.js"></script>
```

#導入手順

###1.ライブラリの取り込み

```javascript
import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)
```

v-scroll-lockは、インストールされた時点では、body全体のスクロールがロックされてしまいます。

###2.メソッドを設定

```javascript
export default {
  name: 'Modal',
  data() {
    return {
      open: false,
    }
  },
  methods: {
    openModal() {
      this.open = true
    },
    closeModal() {
      this.open = false
    },
  },
}
```
dataに、open: falseを追加ことによって、通常時（モーダル非表示時）にはスクロールが可能になります。

openModalやcloseModalを設置し、openModalにはthis.open = trueを設置、
これでv-on:click="openModal"が呼び出されたときに、背景スクロールは停止します。
body要素には、style="overflow: hidden"が追加されている状態です。

closeModalが呼び出されたら、this.open = falseが発動し、通常時のスクロールは可能となる。

###3. テンプレートを準備

```html
<template>
  <div class="post-inner">
    <button @click="show(); openModal();" class="post-comment flex">
      <img class="comment-icon" src="../assets/コメント.jpg" alt="コメント" />
    </button>
    <modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="485">
 <button class="hide-btn flex" @click="hide">×</button>
</template>
```

#まとめ

上記と設定してあげるだけで簡単にスクロールをロックすることが出来たかと思います。
作業を一時避難する方法（git stash）について

作業が途中でコミットしたくはないけど別のブランチで作業しないといけない。
そういう時に作業を一時避難するときに使うコマンド

```git10
git stash
git stash save
```

stashは「隠す」という意味
ワークツリーだったリステージだった理においてあるファイルの変更分をstashという場所に一時避難する
そしてワークツリーとステージの変更をなかったことにする

git stashで非難した作業を確認するコマンドは

```git10
git stash list
```

これで非難した作業の一覧を確認できる

非難した作業を復元する方法

```git10
#最新作業を復元する
git stash apply

#ステージの状況も復元する
git stash apply --index

#特定の作業を復元する
git stash apply (スタッシュ名）
git stash apply stash@{1}
```

非難した作業を削除する方法

```
#最新の作業を削除する
git stash drop
#特定の作業を削除する

git stash drop(スタッシュ名）
git stash drop stash@{1}

#全作業を削除する
git stash clear
```
git stashは急遽別の作業しないといけない状況(特にバグフィックスなど)に有効らしい
varによるローカル変数型推論

# varによるローカル変数型推論

<!-- 概要を記載 -->
JavaSilverSE11の模試を受けたところ、varに関する問題をことごとく間違えたので、ここで自分なりにvarについて調べてまとめてみました。


<a id="#Chapter1"></a>

# varとは？

ローカル変数の宣言時に型（String、intなど）の代わりに「var」を書くことで型を推測してくれるため、型の指定を省略することができます。これを型推論といいます。

```Java
//従来のローカル変数の宣言
String word = "Hello World!!";
System.out.println(word);// Hello World!!を出力
```
```Java
//varを使用したローカル変数の宣言
var  word = "Hello World!!";
System.out.println(word);// 変数wordをString型と認識し、「Hello World!!」を出力
```

<a id="#Chapter2"></a>
# varの書き方
**varの宣言場所に注意！**
タイトルにローカル変数とある通り、varはメソッド内で宣言しなければなりません。
※フィールド（メンバ変数）、メソッドやコンストラクタの引数、メソッド戻り型、catchブロックなどには使用できません。

OK例

```Java
public class Main{
    public static void main (String[] args){
        //varを使用したローカル変数の宣言
        var  word = "Hello World!!";
        System.out.println(s);// 変数wordをString型と認識し、「Hello World!!」を出力
    }
}
```
NG例 1

```Java
public class Main{
    var  word1 = "Hello";// メンバ変数のため、NG(コンパイルエラー )
    public static void main (String[] args){
        var word2 = "World"; // ローカル変数のため、OK
    }
}
```
NG例 2

```Java
public class Test{
    // test()メソッドの引数にvarを使用しているため、NG(コンパイルエラー )
     void test (var word){
        var word = "Hello World!!"; // ローカル変数のため、OK
    }
}
```
NG例 3

```Java
public class Test{
    // test()メソッドの戻り値の型にvarを使用しているため、NG(コンパイルエラー )
     var test (){
        var word = "Hello World!!"; // ローカル変数のため、OK
    }
}
```
<br>

## 変数は必ず初期化！
varを宣言する際、必ず値を代入し、初期化しないといけません。
（値を代入しないと型を推測できなくなる）


OK例

```Java
        //変数wordに値（Hello World!!）を代入し、初期化する
        var  word = "Hello World!!";
```
NG例

```Java

        //変数wordに値が代入されていないため、コンパイルエラーとなる
        var  word;
```


<a id="#Chapter3"></a>
# まとめ
varはローカル変数の宣言時に型の代わりに「var」を書くことで型の指定を省略することができます。

しかし、varはメソッド内でしか定義できない、varを宣言する際に初期化しないといけないなどの制限が多いため、varを使用する際には注意が必要です。


<a id="#reference"></a>
# 参考文献
- [https://programmer-life.work/java/java-var#var]
GPT-3の動作の考え方とプロンプトの役割


## 動作

多彩な動作の割に基本的には「テキスト入力、テキスト出力」インターフェースのみです．つまり，あるテキストを与えたら次に続くものを予測するというだけです．
APIに「デカルトが言いました．私は思う」というプロンプトを与えると、「故に我あり」という結果を返します．

- APIを使用するには、テキストプロンプト（APIに提供するテキストベースの入力または「指示」）を指定
- 指定したコンテキストまたはパターンに一致させようとして、テキストの補完が返される
- コンテクストはAPIに与える文脈に相当し，その意図を呼んで次にくるテキストを予想して返してくれる

したがって，いかにプロンプトをうまく与えるかが開発ポイントです．


## プロンプトを与えるコツ

###  「伝える」だけでなく、見せる

- 手順、例、または2つの組み合わせのいずれかを使用して、必要なものをAPIに明確にする。
- APIでアイテムのリストをアルファベット順にランク付けしたり、段落を感情で分類したりする場合は、それを表示。

### データをちゃんと与える

プロンプトを十分に与えないと単体ではGPT-3は動作しないです．
カウセンセラーとクライアントのやりとりを与えればカウンセラーになってくれますが，，学習するサンプルは必要です．しかし与えた文脈を理解する力は評判通りすごいです．

## エンジンは４つ

動作は多彩ですが，文脈を変えているだけでエンジンは４つしかありません．davinciが最も有能なモデルで、adaが最速です。 開発時は最良の結果が得られるのでdavinciを使用しておくと良さそうです．

https://beta.openai.com/docs/introduction/key-concepts
[Rails]idsメソッドについて

## はじめに
idsメソッドについてRailsドキュメントでは以下のように説明されています。
`idsは、テーブルの主キーを使用するリレーションのIDをすべて取り出すのに使用できます。`

https://railsguides.jp/active_record_querying.html#ids
## 使い方
```
usersテーブルのidカラムのデータを取得する
User.ids
SELECT `users`.`id` FROM `users`
=> [1, 2, 3, 4] # 返り値`
```
idsメソッドはpluckメソッドに似ていますが少し違いがありpluckメソッドの場合はカラムを指定して指定したカラムを配列に入れて返します。idsメソッドの場合は主キーのカラムデータのみを取得します。この場合はidが取得される。

またpluckメソッドの詳しい使い方は以下をご覧ください

https://qiita.com/Jackson123/items/34fd4400843de471e562
クレジットカード決済用JavaScript準備 ⑦ tokenの値もOrderモデルで取り扱えるようにしましょう



```rb:app/models/order.rb
class Order < ApplicationRecord
  attr_accessor :token
  validates :price, presence: true
end
```

attr_accessor
-

|値別|基本構文|
|--|--|
|# シンボルの場合|attr_accessor :インスタンス変数名|
|# 文字列の場合|attr_accessor 'インスタンス変数名'|

  attr_accessorとは、インスタンス変数の読み取り専用のメソッドと書き込み専用のメソッド(セッター/ゲッター)の両方を定義することが出来るメソッドのことです。Rubyでは、以下のコードのように記述してクラス外部からインスタンス変数にアクセスしようとすると、「インスタンス変数にアクセスするためのメソッドが定義されていない」というエラーが発生します。これにより、クラス外部からのインスタンス変数の参照や変更が出来ません。
  このように、attr_accessorメソッドはインスタンス変数にアクセスするためのメソッドを裏側で定義してくれます。そして、attr_accessorメソッドに指定されたインスタンス変数は、クラス外部から参照と変更の両方を行う事が出来ます。

```rb:attr_accessorメソッドを定義して各インスタンス変数にアクセスした場合-->
class User
  attr_accessor :name, :age # この記述で@name,@ageへアクセス出来る

  def initialize(name, age)
    @name = name
    @age = age
  end
end

tanaka = User.new('田中太郎', 18)

tanaka.age = 33
```

>参考：Pikawaka 【Ruby】attr_accessorメソッド初心者入門書~使い方と必要な理由を理解しよう
>http://pikawaka.com/ruby/attr_accessor

モデルのバリデーション
-

tokenはordersテーブルに存在しないため、本来はOrderモデルのバリデーションとしては記載することはできません。しかしながら、前のステップでattr_accessor :tokenと記載したことにより、tokenについてのバリデーションを記述することができます。

```rb:spec/factories/orders.rb
class Order < ApplicationRecord
  attr_accessor :token
  validates :price, presence: true
  validates :token, presence: true
end
```
MCUの映画公開とQiitaユーザーの動向の関係について分析してみた！

#はじめに
Qiita初投稿になります！
役に立つ記事も書きたいなと思いつつも皆さんに面白いなと思ってもらえるような記事が書けたらと思いますので暖かい目で見守って下さい！

#背景
QiitaAPIを使って何か面白い分析ができないかと思い表題をやってみよう！となりました。
なぜMCUを絡めての分析かというと半分は純粋に大好きだからです！<font color="Gray">（フェーズ4も始まったし）</font>
もう半分はMCUには様々な架空のテクノロジーが出てきます。
そこで技術情報共有サービスであるQiitaは、MCUの映画が公開されるたびにMCU関連の記事が読まれるのではないかと思い分析してみました！

#方法
１．「ジャービス」と検索して出てくる記事のLGTM（Qiitaのいいね！みたいな機能）された日時を
　　QiitaAPIで取得します。
　　※MCUに出てくる代表的かつ実現味がありそうなテクノロジーといえば「**ジャービス**」!!
２．取得したデータの期間に公開された映画をピックアップ。
３．取得結果と映画公開日をグラフで一覧化し分析します！

#ソースコード
今回使用したQiitaAPIは以下の二つです。

・GET /api/v2/items

・GET /api/v2/items/:item_id/likes
　※こちらはQiita Teamでは廃止になっているので注意してください！

一つ目の/api/v2/itemsを使ってジャービスと書かれた記事を抽出していきます。
抽出された結果からitem_idを取得し/api/v2/items/:item_id/likesを使ってLGTMが生成された日時を取得します。

```java:code
// axiosモジュールを読み込む
const axios = require('axios');

async function main() {
    //ジャービスを含む記事を取得
    let response = await axios.get("https://qiita.com/api/v2/items?query=" + encodeURIComponent("ジャービス"));
    
    //取得された記事数だけ繰り返し
    for(let i = 0; i < response.data.length; i++){
        //記事のLGTMの情報を取得
        let response2 = await axios.get('https://qiita.com/api/v2/items/' + response.data[i].id +'/likes');
        //LGTMがなかった場合はスキップ
        if(response2.data != null){
            //LGTMの数だけ繰り返し
            for(let j = 0; j < response2.data.length; j++){
                //LGTMの生成日時だけをログに出力
                console.log(response2.data[j].created_at);
            }
        }
    }
}

// 上で定義した関数をここで実行します。
main();
```
コメントでは書いていない部分を解説します。

・対象の文字列が含まれている記事の検索
items?query=”検索文字列”を使うことで対象の文字列が含まれている文字列を検索することができます。
そこで注意したいのがURLエンコードに対象文字列を変換しないといけないというところ。
encodeURIComponent()関数で「ジャービス」をURLエンコード変換してます。
URLエンコードとは何ぞや？と思われた方は以下を参照してみてください.
[URLエンコードについて調べてみた](https://qiita.com/enghst/items/113afd5bc9da29eb108d)

```java:code
let response = await axios.get("https://qiita.com/api/v2/items?query=" + encodeURIComponent("ジャービス"));
```

#結果と考察
抽出した結果と映画公開日を１つのグラフにまとめました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/9fe24a65-32e2-cdc4-36db-f57b990479e7.png)

一見、関係が少しありそうな感じがしますが記事が投稿された日時と比較・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/c179b2d6-8353-5788-d4a2-11159e79b5eb.png)

**うーん、なんとも言えない！！！**
記事が関係してそうなところも映画が関係してそうなところもあるのでもう少しフォーカスしてみる。
2018年6月に投稿された記事がここのLGTM数に関係してそうなのでここは映画公開日に挟まれてはいるが関係はなさそう。

もう一つの2019年5月のLGTM数が直近に記事の投稿があったわけではなく増えており丁度映画公開日に挟まれている！！
掘り下げてどの映画が公開されていたかを含めて考察。

この時期にやっていた映画は以下の二作品
・アベンジャーズ/エンドゲーム
・スパイダーマン:ファー・フロム・ホーム

***お、エンドゲームがある！！***

エンドゲームにはAIジャービスのモデルになった秘書の人間ジャービスが出てきてかなり興奮した思い出あり！！
これはエンドゲームを見た後にジャービスを作りたいと思った人がいると言っていいのではないか！<font color="Gray">（かなりこじつけ）</font>

#結論
***MCUの映画公開はQiitaユーザーの動向に少し影響を与える！！***

#感想
QiitaAPIを使うことが目的だったのですが考察のほうが盛り上がってしまいました笑
ただ趣味からプログラム書く人が何人かいるのではないでしょうか？
今回は簡単なプログラムしか書きませんでしたが目的遂行のために費やした時間はいつものようなお勉強ベースのプログラミングより楽しかったです。
今後、SF映画に出てくるようなものを実装していきたいと思っているのでプログラム自体が複雑になっていきそうですが楽しく学んで実装できそうです！

#参考にした記事

[「テレワーク」と「新型コロナ」には相関性があるのか確かめてみた。](https://qiita.com/twtjudy1128/items/836efaf748b8b76a6b82)
[Rails]超有用なpluckメソッド

pluckメソッドの使い勝手が良かったので自分なりにメモとして残しておきます

## 公式ドキュメント
公式ドキュメントではpluckメソッドは以下のように定義されています
`pluckは、1つのモデルで使用されているテーブルからカラム (1つでも複数でも可) を取得するクエリを送信するのに使用できます。引数としてカラム名のリストを与えると、指定したカラムの値の配列を、対応するデータ型で返します。`

## 使い方
```
User.pluck(:name)
=> ["モロヤン", "k蓮", "kouri", "ザキヤマ", "ふぅ", "山ちゃん。",
 "やんまー", "もとき", "字音", "江南スタイル", "やばめ", "オードリー",
 "karin", "march", "水鶏", "ルイルイ", "はぴたん", "keith_forest", 
"ヤッピー", "ゲストユーザー", "レイマン"]
```

上記のようにUserモデルのカラム(:name)を指定するとnameカラムを配列に入れて返してくれます。
また引数を2つ選択すると以下のようになります


```
User.pluck(:name,id)
=> [["モロヤン", 2], ["k蓮", 3], ["kouri", 4], ["ザキヤマ", 5], ["ふぅ", 6],
 ["山ちゃん。", 7], ["やんまー", 8], ["もとき", 9], ["字音", 10], ["江南スタイル", 11], 
["やばめ", 12], ["オードリー", 13], ["karin", 14], ["march", 15], ["水鶏", 16], ["ルイルイ", 17], 
["はぴたん", 20], ["keith_forest", 18], ["ヤッピー", 1], ["ゲストユーザー", 21], ["レイマン", 19]]
```
指定したカラム２つが一つの配列になり帰ってきます。またこれは以下のコードと同じオブジェクトが返ってくるなのでとてもスッキリしたと言えますね。

```
User.select(:id, :name).map { |c| [ c.name, c.id] }
```
ちょっとした違いとして`pluck`の場合はモデルオブジェクト（Userのインスタンス）は作られませんが，`select`だと（いったん）作られます。
@scivolaさんご指摘ありがとうございます。

すごい便利なpluckメソッドですが
公式ドキュメントでは以下の記載があります

`pluckは、selectなどのRelationスコープと異なり、クエリを直接トリガするので、その後ろに他のスコープをチェインすることはできません。ただし、構成済みのスコープをpluckの前に置くことはできます。`

どういう意味かというと以下の記述ができないということです。

```
User.pluck(:name).limit(1)
```
pluckの後ろには記述できないということですね。
この場合は以下のようにpluckの前に記述する必要があります

```
User.limit(1).pluck(:name)
```
pluckメソッドの使い方は以上です。
XcodeでSwiftのクラス、structのイニシャライザを自動生成

# 概要
イニシャライザ作成するのが面倒だと思って検索してみたら日本語だと見つけられなかったので一応メモ代わりに。
Xcode10から追加された機能みたいです。
メンバ変数入力した後にclassのinitializerを自動で生成してくれます。
数が多いと集中力削られるので結構ありがたいです。

## 手順
クラス名を右クリック → Refactor → Generate Memberwise Initializer
※strcutでも追加出来ますが、Swift5.1からはデフォルトでイニシャライザが作られてるようなので不要みたいです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131424/ea59d817-2a23-42a3-1e03-b1cf4e5ea06f.png" width=50%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131424/8f85d0a2-cc2b-b852-b717-c6edc2c0799e.png" width=50%>

## ショートカットに登録も出来る
上のメニューからXcode、Preferences→ Bindingsにあります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131424/29ac819c-e8d2-52a4-cd96-7162f7c5fe8d.png" width=50%>


初投稿なので何かありましたらコメントしていただけると幸いです。


### 参考
https://stackoverflow.com/a/49732567
https://iganin.hatenablog.com/entry/2019/10/20/160825
git rebaseについて

gitの学習中で起きたエラーの対処法の備忘録


gitのコミット履歴を編集するときにgit rebeseを使用すると思い
git rebase -i HEAD~3
コマンドを入力
![スクリーンショット 2021-04-23 124944.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376984/767d268c-252c-0e80-8ecf-3eff0a03c8f0.png)
この画面が出てくる
そのこうしたかったのだが
![スクリーンショット 2021-04-23 125323.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376984/033eda22-278f-e6c1-6430-8d93aa146dfd.png)
間違えて削除して保存してしまった
![スクリーンショット 2021-04-23 125432.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376984/cd952bc5-482e-2bf3-c6c6-be2768996a98.png)
そしたらまたgit rebase -i HEAD~3を入力しても
![スクリーンショット 2021-04-23 180437.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376984/e9119e26-cee8-c2c7-0660-84eb085cceb9.png)
こいつが出てくる書いてある通りに
git　rebase --ontinueだったり
git rebase --abortだったり
git rebase --skipやってみたけど
無理だったから最終手段なのかなと思いつつrm -fr ".git/rebase-merge"をコピーして入力してみると最初の画面が立ち上がった
できたっぽい
また間違えたからもう一度
rm -fr ".git/rebase-merge"
をやってみたらもっと前のコミットの編集画面になりfirst.htmlなどのコミットが消えてしまったので多用するのは避けたほうがいい
Prism コードサンプル学習：09-ChangeConvention

# Prism コードサンプル学習：09-ChangeConvention

## はじめに

以下の記事の続きです。
<https://qiita.com/mngreen/items/749a57635cffbb146646>

## 09-ChangeConvention

本サンプルでは、Viewの型からViewModelを取得する際の解消方法を変更しています。
デフォルトの規則ではViewModelはViewModelパッケージ以下に格納されなければ型解消できないのですが、本サンプルでは、Viewパッケージ以下に格納されているにもかかわらずViewModelが生成されています。

```cs
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : PrismApplication
    {
        ...

        protected override void ConfigureViewModelLocator()
        {
            base.ConfigureViewModelLocator();

            ViewModelLocationProvider.SetDefaultViewTypeToViewModelTypeResolver((viewType) =>
            {
                var viewName = viewType.FullName;
                var viewAssemblyName = viewType.GetTypeInfo().Assembly.FullName;
                var viewModelName = $"{viewName}ViewModel, {viewAssemblyName}";
                return Type.GetType(viewModelName);
            });
        }
    }
```

- [ViewModelLocationProvider.SetDefaultViewTypeToViewModelTypeResolver](https://github.com/PrismLibrary/Prism/blob/342689ba9a10e511418943438d0f5c57534ca623/src/Prism.Core/Mvvm/ViewModelLocationProvider.cs#L78)内でデフォルトのResolverを置き換えています。
  - 元々の規則は[45行目](https://github.com/PrismLibrary/Prism/blob/342689ba9a10e511418943438d0f5c57534ca623/src/Prism.Core/Mvvm/ViewModelLocationProvider.cs#L45)にありました。
- ちなみに ConfigureViewModelLocator メソッドは[InitializeInternal](https://github.com/PrismLibrary/Prism/blob/342689ba9a10e511418943438d0f5c57534ca623/src/Wpf/Prism.Wpf/PrismApplicationBase.cs#L41)メソッド内で呼び出されています。

## おわりに

今回はViewModelLocatorの型の解消の変更方法について学習できました。
基本的に自前で変更したいというモチベーションがなければ利用しないかもしれませんが、カスタマイズ性を持たせている点は設計として優れているように感じました。
次回、[10-ChangeConvention](https://github.com/PrismLibrary/Prism-Samples-Wpf/tree/master/10-CustomRegistrations)について見ていこうと思います。
UbuntuのDockerコンテナ内からcrontabを実行&メール送信させてみた。

# crontabの実行内容がメール送信されるまで

## Dockerfileの作成
作成したDockerfileは以下。
※今回要らない物もインストールしてる。

```
FROM ubuntu:latest
USER root
WORKDIR /Users/fukafukafukka/working_dir
ENV DEBIAN_FRONTEND="noninteractive"

RUN apt-get update
RUN apt-get install -y \
wget \
vim \
git \
curl \
cron \
postfix \
mailutils \
locales

RUN locale-gen ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
```

## Dockerコンテナ起動&接続
ビルドコマンド（イメージ作成）

```
docker build -t fukafukafukka/ubuntu_lts .
```

コンテナ起動コマンド

```
docker run -d -v `pwd`:`pwd` -it --rm --name ubuntu_lts fukafukafukka/ubuntu_lts
```

コンテナ内接続コマンド

```
docker exec -it ubuntu_lts /bin/bash
```

## cron設定（Dockerコンテナ内）
cron設定コマンド

```
crontab -e
```

設定内容

```
MAILTO=fukafukafukka@fuka_mail.com
*/2 * * * * echo "Hello asa_asa Engineer"
```

cron確認コマンド(上記で設定した内容が表示される)

```
crontab -l
```

## cron起動（Dockerコンテナ内）
cronの起動状態確認

```
service cron status
```

cron起動

```
service cron start
```

## postfixの起動（Dockerコンテナ内）
postfixの起動状態確認

```
/etc/init.d/postfix status
```

postfixの起動

```
/etc/init.d/postfix start
```

ここまでで、メールが届くはず！

## cron設定 別の方法
こちらを参考に、`/etc/crontab`内に書く方法などもある。
https://qiita.com/katsukii/items/d5f90a6e4592d1414f99

## 前提知識
- メールユーザエージェント（MUA）：郵便ポスト
- メール転送エージェント（MTA）：仕分け係の郵便局員さん
- メール配信エージェント（MDA）：郵便配達のおじさん

ref ) https://wa3.i-3-i.info/word11136.html
Route53とは

##概要
フルマネージド型のDNSサービス
単なるDNSサービスとも振る舞えるためオンプレミスなリソースや
他のサービスで購入したドメインをRoute53で管理できるよう割り当てることもできる
(ドメイン購入もできるが若干高い)

https://aws.amazon.com/jp/route53/

##ルーティングポリシー
###シンプルルーティング
基本的に選択されるルーティングで、場合によってそれぞれ特徴のあるルーティングを選択していく流れとなる

(運用例)
LB-1に変わるLB-2を開発中、開発者はRoute53を介せず直接アクセスして行う。
開発が済んだらLB-1に紐づいているドメイン名をLB-2に切り替える。

![Route53講座_2.004.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/4b1c0c5b-e0f5-bece-524c-a928a3a241ef.jpeg)

**ひとつのリソース**に対する紐付けを管理する
###加重ルーティング
複数のリソースに対するルーティングポリシーで、重み付けの設定を加えられる
ここではLB-1に90%,LB-2に10%割り振られる
新システムを本番運用する上でのリスクヘッジになる

(運用例)
10%の人に新機能を使ってもらい反応を確認し、問題なさそうならLB-2に100%振り分けていく

![Route53講座_2.007.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/3b33c13d-e9f9-96ef-e3a5-81b4bd03c9d6.jpeg)

###レイテンシールーティング
複数のリージョンにまたがってサービスを展開している場合に有効
一番応答時間が速いリソースへ通信を流していく

![Route53講座_2.008.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/1c847cb1-dd66-6e6e-2e9f-c8ec271abd9a.jpeg)

###位置情報ルーティング
リクエストが発生した地域に合わせる
地理データベースと接続元IPアドレスを照合しクライアントに地域ごとの異なるレコードを返すDNSの構成です。これによって特定地域のみにルーティングする設定が可能となります。 地理的近接性ルーティングでは、Amazon Route 53 はユーザーとリソースの地理的場所に基づいてリソースのトラフィックをルーティングします。

![Route53講座_2.009.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/90498e34-b0e7-7946-a7fd-8ca4e409ea38.jpeg)

###複数値回答ルーティング
ひとつのDNS回答値に合わせて、複数の値をランダムに返す
オプションで各値に対するヘルスチェックも設定可能
→ 仮に22から始まる値のページが正常でない場合別の値を取得し直す(ロードバランサーの拡張機能)
※画像の例では22.~が返ってきている

![Route53講座_2.010.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/e60a000e-ff9e-fa1c-9cad-e90e6050fe0e.jpeg)

###フェイルオーバールーティング
ELBやEC2がサーバーダウンを起こして503エラー(サーバーが原因)を返された際、このドメインに通信するよう優先順位を設定できる
(運用例)
S3のStatic website hosting機能で障害発生した時用のHTMLファイルを用意しておき、クライアントにソーリーページを表示させることができる

![Route53講座_1.013.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/b85c069e-5331-06e8-9c3a-2a283164a13d.jpeg)


####ヘルスチェック

https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/dns-failover-determining-health-of-endpoints.html

##レコード
ドメインと何かを設定したものを**レコード**と呼びます。
一つ一つの設定のことを**レコードセット**、**リソースレコード**と呼び、
これら集合体を**ホストゾーン**と呼びます

**・Aliasレコード**
Route53独自機能

**・Aレコード**
一般的なレコード
DNSで定義されるそのドメインについての情報の種類の一つで、特定のホスト名に対応するIPアドレス（IPv4アドレス）を定義する

**・AAAAレコード**
:(コロン)で区切って表すタイプのレコード

**・NSレコード(ネームサーバー)**
4つのサーバーで管理されている

![Route53講座_2.012.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/0bbe7e64-822e-7a87-8540-aca0677c9ebd.jpeg)

**・CNAMEレコード**
Aliasレコードと似ているが、**AWSサービスと紐付ける時はAliasレコードがおすすめ**です。
一旦ドメインをAWSリソースのドメインに置き換えた後にIPアドレスに変換するのに対して、**Aliasだと一発でドメインからIPアドレスに変換できるから**です。
→ 応答速度に違いが出る、追加料金が違う


![Route53講座_2.014.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/1190671f-b650-bc90-e214-70f23e3152f2.jpeg)

https://aws.amazon.com/jp/route53/pricing/#Alias_Queries

https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/resource-record-sets-choosing-alias-non-alias.html#resource-record-sets-choosing-alias-non-alias-comparison

##参考
この記事はAWS初学者を導く体系的な動画学習サービス
「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com
binding.pryを使えるようにする方法

# 概要
### テストコードでerror_full_messagesを確認したり、インスタンス変数の中身を確認するのに便利なbinding.pry。そんなbinding.pryの導入方法をここに記述しておきます。

# 手順
### Gemfileに'pry-rails'を記述。
```Gemfile.
~中略~
gem 'pry-rails'
```
###Gemfileの一番下に記述。

# 以上！
###たったこれだけでbinding.pryが使用できるがGemfileにpry-railsを記述せずにbinding.pry未遂をすることが多々あったため、記事にしました！
クレジットカード決済用JavaScript準備⑥



```javascript:card.js
  const renderDom = document.getElementById("charge-form");
  const tokenObj = `<input value=${token} name='token' type="hidden"> `;
  renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }
  document.getElementById("order_number").removeAttribute("name")
  document.getElementById("order_cvc").removeAttribute("name")
  document.getElementById("order_exp_month").removeAttribute("name")
  document.getElementById("order_exp_year").removeAttribute("name")
```

type="hidden
-

HTMLの<input type="hidden">は、ユーザーには見えない隠しフィールドを設置するために使います。
あくまでもブラウザ上で表示されていないだけで、ソースコード上では閲覧可能なことに注意しましょう。


emoveAttributeで属性を削除
-

removeAttribute('削除する属性')という形式で使います。
【Swift】バイブレーションを使う

#はじめに
今回はバイブレーション機能を使ってみます。

#GitHub

https://github.com/0429oonishi/vibration

#実装

![スクリーンショット 2021-04-23 17.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/7142bc7d-d3f3-a0a5-d81d-a0a9aeaad771.png)


```swift
import UIKit
import AudioToolbox

final class VibrationViewController: UIViewController {
    
    @IBAction private func longStrongOneButtonDidTapped(_ sender: Any) {
        AudioServicesPlaySystemSound(SystemSoundID(kSystemSoundID_Vibrate))
    }
    
    @IBAction private func shortStrongOneButtonDidTapped(_ sender: Any) {
        AudioServicesPlaySystemSound(1520)
    }
    
    @IBAction private func shortStrongTwoButtonDidTapped(_ sender: Any) {
        AudioServicesPlaySystemSound(1011)
    }
    
    @IBAction private func shortWeakOneButtonDidTapped(_ sender: Any) {
        AudioServicesPlaySystemSound(1519)
    }
    
    @IBAction private func shortWeakTwoButtonDidTapped(_ sender: Any) {
        AudioServicesPlaySystemSound(1102)
    }
    
    @IBAction private func shortWeakThreeButtonDidTapped(_ sender: Any) {
        AudioServicesPlaySystemSound(1521)
    }
    
}
```

#解説

バイブレーション機能を使うために、`AudioToolbox`を`import`します。

```swift
import AudioToolbox
```
1回長くて強いバイブレーション

```swift
@IBAction private func longStrongOneButtonDidTapped(_ sender: Any) {
    AudioServicesPlaySystemSound(SystemSoundID(kSystemSoundID_Vibrate))
}
```

1回短くて強いバイブレーション

```swift
@IBAction private func shortStrongOneButtonDidTapped(_ sender: Any) {
    AudioServicesPlaySystemSound(1520)
}
```

2回短くて強いバイブレーション

```swift
@IBAction private func shortStrongTwoButtonDidTapped(_ sender: Any) {
    AudioServicesPlaySystemSound(1011)
}
```

1回短くて弱いバイブレーション

```swift
@IBAction private func shortWeakOneButtonDidTapped(_ sender: Any) {
    AudioServicesPlaySystemSound(1519)
}
```

2回短くて弱いバイブレーション

```swift
@IBAction private func shortWeakTwoButtonDidTapped(_ sender: Any) {
    AudioServicesPlaySystemSound(1102)
}
```

3回短くて弱いバイブレーション

```swift
@IBAction private func shortWeakThreeButtonDidTapped(_ sender: Any) {
    AudioServicesPlaySystemSound(1521)
}
```

#おわりに
あるのとないので使い心地が変わりそうですね。
コマンドナレッジ


#railsコマンド
~~~md
.railsアプリ作成
`rails _バージョン_ new アプリケーション名`

・gemインストール
`bundle install or bundle update`

・railsサーバー起動（開発環境）
`rails server or rails s`

・テスト開始
`rails test or rails t`

・コンソール起動
`rails console or rails c`

・データベースのマイグレーション
`rails db:migrate`

・マイグレーションを最初の状態に戻す
`rails db:migrate VERSION=0`

・データベースのマイグレーションファイル削除
`rails db:rollback`

・controller作成
`rails generate controller コントローラ名 アクション名`　＃（アクションは複数可）

・model作成
`rails generate model モデル名 引数名:型`　＃　（引数名は複数可）

~~~
クレジットカード決済用JavaScript準備⑤JavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する



```javascript:app/javascript/card.js
    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
        debugger;
```

1.`${～}` の中には、変数や計算式を入れることができる！
-

これはRailsの式展開と同じで文字列の中で計算ができる。変数が使える。

2.メイン：HTML要素を追加
-

####insertAdjacentHTMLメソッドとは

HTMLを差し込む基準になるElementに対して、.insertAdjacentHTML(  )と記述することで使えます。第1引数に差し込む位置の指定をする文字列、第2引数に差し込むHTMLを渡します。

|第１引数|挿入位置|
|--|--|
|beforebegin|Elementのタグの上に挿入します。|
|afterbegin|Elementタグの中の最初に挿入します。|
|beforeend|Elementタグの中の最後に挿入します。|
|afterend|Elementのタグの下に挿入します。|

**ちなみにinnerHTMLはまるごと差し替える場合に使うという認識でOK**

デバグ
-

debuggerステートメント
基本的にはブレークポイントを追加します。
*プログラマに必要とされるスキルはいくつかありますが、その中でもエラーの原因をすばやく突き止めることができる、デバッグのスキルは非常に重要なスキルのひとつです。