OmniAICreator/Qiita-1.07M huggingface dataset:
Understanding Rust `move` keyword

Rust's `move` keyword always bothers me so, I decided to write my understanding which I obtained after thorough discussion with my colleague @YushiOMOTE. 

I hope this might help someone.

```rust
let x = 1;
```

In the above statement, x is a variable whose value is 1. Now,

```rust    
let y = || println!("y is a variable whose value is a closure");
```

So, `move` keyword is used to transfer the ownership of a variable to the closure.
    
In the below example, without `move`, `x` is not owned by the closure. Hence `x` is not owned by `y`and available for further use.

```rust
let x = 1;
let y = || println!("this is a closure that prints x = {}". x);
```

On the other hand, in this next below case, the `x` is owned by the closure. `x` is owned by `y` and not available for further use.

```rust
let x = 1;
let y = move || println!("this is a closure that prints x = {}". x);
```

By `owning` I mean `containing as a member variable`. The example cases above are in the same situation as the following two cases. We can also assume the below explanation as to how the Rust compiler expands the above cases.

The formar (without `move`; i.e. no transfer of ownership),

```rust
struct ClosureObject {
    x: &u32
}

let x = 1;
let y = ClosureObject {
    x: &x
};
```

The later (with `move`; i.e. transfer of ownership),

```rust
struct ClosureObject {
    x: u32
}

let x = 1;
let y = ClosureObject {
    x: x
};
```

Please share your views on my understanding!!
CSSのcontentプロパティで画像を指定してサイズ調整する方法

# 使いどころ

CSSの中で、画像URLの指定とサイズの指定を同時に行いたいとき。
`@media screen and ( max-width: 600px )`を使ってpcとモバイルで画像を切り替えたいとき。
imgの「widthとheightが効かない」とき。

# 方法

`display: inline-block;`が重要です。

```html:index.html
<a href="https://www.google.com/" target="_blank" rel="noreferrer" >
    <img alt="ロゴだよ" id="mylogo"/>
</a>
```

```css:style.css
# mylogo{

    content: url("./svg/my_logo_line.svg");
    display: inline-block;
    width: 6.5rem;
    height: auto;
}
```

# 備考

セマンティックデザイン的に、ロゴなのでbackground-imageではなく、imgにする必要あり。

**Excelsior!**
【Node.js】ドメイン名からIPアドレスを取得する

[3000文字Tips - 知ると便利なTipsをみんなへ届けよう](https://qiita.com/official-events/d523df99d6479293ffa7) の参加記事です。

タイトル通りです。
同じようなことは[このサイト](https://www.site24x7.com/find-ip-address-of-web-site.html)でも可能です。
しかし、IP制限されているサーバーの場合、こういった外部サイトでは取得できません。
そのため、手元で試す方法を調べました。

## 環境

```shell
$ node -v
v13.11.0

$ npm -v dns
6.13.7
```

## 結論


ドメイン名→IPアドレス (v4)

```js
const dns = require("dns");
const dnsPromises = dns.promises;

dnsPromises.lookup("google.com").then(({ address, family }) => {
  console.log("address: %j family: IPv%s", address, family);
  // address: "172.217.25.110" family: IPv4
});
```

ドメイン名→IPアドレス (v6)

```js
const dns = require("dns");
const dnsPromises = dns.promises;

const options = {
  family: 6,
  hints: dns.ADDRCONFIG | dns.V4MAPPED,
};

dnsPromises.lookup("google.com", options).then((result) => {
  console.log("address: %j family: IPv%s", result.address, result.family);
  // address: "::ffff:216.58.220.142" family: IPv6
});

```

## 参考

- [DNS | Node.js v16.3.0 Documentation](https://nodejs.org/api/dns.html#dns_dns)
Bootstrap4をRailsに反映させる方法



Udemy:「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう」を学んで詰まったところを書いていきます。今回はBootstrapの適用方法についてです。


Bootstrapが反映されない
--


https://qiita.com/tomsyoya/items/3234fddf73eab2879f9f

こちらの方の記事を参考にしたら反映させることができました！私がやった手順を下記に記します。

1.まずyarnパッケージからjqueryとbootstrapをインストールする

```
$ yarn add jquery popper.js bootstrap
```
2.Gemfileに下記を記述し、bundle installを実行

```ruby:gemfile
gem 'bootstrap-sass'
gem 'jquery-rails'

```

```console:console画面
$bundle install
```

3.environment.jsに下記を記述

```ruby:config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

```
4.application.jsに下記を記述

```ruby:javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap/dist/js/bootstrap.min.js')

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap/dist/js/bootstrap.min.js')
```

こうしたらやっとbootstrapが適用されました、、ちなみにindex.html.rbはこのようになっています。

```
<h2>Questions</h2>
    <div class="row">
        <div class="col-md-12">
        <table class="table table-striped">
            <thead class="thead-light">
                <tr>
                <th scope="col ">ID</th>
                <th scope="col">Title</th>
                <th scope="col">Menu</th>
                </tr>
            </thead>
    <tbody>
                <tr>
                    <% @questions.each do|question| %>
                        <th scope="row"><%= question.id%></th>
                        <td><%= question.title%></td>
                        <td>[Edit][Delete]</td>  
                        <br>
                </tr>
                    <%end%>
    </tbody>
    
    </table>

     </div>
    </div>
```
結果として下記の画像のようになりました！！！Webpackを使った場合と通常の場合だとbootstrapのインポートの仕方が異なるみたいですね。。

![2021-06-07 12.01のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466226/ece9e60c-0575-d41b-b25c-eca87e1f9059.jpeg)


参考文献
--
https://qiita.com/beanbeenzou/items/4f49d4d63776234cc992

https://www.udemy.com/share/101WM4AEccd1tXR3oH/
（Unity）SimpleSQL使用時の「DllNotFoundException: sqlite3」エラー対応

UnityでSQLiteを使うに当たって、評価の高い「SimpleSQL」を使ってます。

これまでiOS向けにしかビルドを試していなかったので、Android向けにビルドしたところ以下のエラーが。。。

```E/Unity: DllNotFoundException: sqlite3```


ググったところ、Plubinsフォルダの配下に以下のフォルダを用意し、
libsqlite3.soを三つのフォルダそれぞれにいれる

- arm64-v8a
- armeabi-v7a
- x86

との先人の記事が出てきたため、試行しましたが上手くいかず。。。

そこでSimpleSQLのドキュメントをよく読むことに（当然ですね）

### 解決方法

メニューから、Tool > SimpleSQL > Option を選択

![スクリーンショット 2021-06-07 16.01.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63370/8a721420-8eba-093a-526d-d7a62f38afe1.png)

ここで、Optimize PlatformからAndroidを選択するとAssets直下に以下のフォルダが自動で作成され、
sqlite-android-328000が配置されます。

``` Plugin/Android/sqlite-android-3280000 ```


### これで解決します...

結論、ドキュメントをよく読めってことです。。。

ではでは。
typescriptでArrayを指定数毎に区切る

### こういう感じで、配列を指定数毎に区切りたい

```typescript
describe("chunk test", () => {
  it("number", () => {
    expect(chunk([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3)).toStrictEqual([
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9],
      [10],
    ]);
  });
  it("string", () => {
    expect(chunk(["one", "two", "three", "four"], 2)).toStrictEqual([
      ["one", "two"],
      ["three", "four"],
    ]);
  });
});

```

### これで出来ました
```typescript
export function chunk<T>(arr: Array<T>, size: number): Array<Array<T>> {
  return arr.reduce(
    (newarr: Array<Array<T>>, _: T, i: number) =>
      i % size ? newarr : [...newarr, arr.slice(i, i + size)],
    [] as Array<Array<T>>
  );
}
```
amplify storageへcognito ユーザIDを使用したアクセス制限

cognito user pool のidをuser id
cognito id pool のidをidentity id
と記載します。

amplify storageを使用すると、identity idを使用したアクセス制御がかかります。
iamへ、${cognito-identity.amazonaws.com:sub}と記載することで使用可能。

ただ、cognito user poolからidentity idを引っ張ることができないので、管理者がユーザのs3データを参照する・・・みたいなことが出来ない。

そのため、cognito userがログインした時にidentity idをどこかに保存することで対処可能だが、対象のユーザが未ログインの場合はidentity idが分からず、ユーザ登録と同時に画像を保存・・・みたいなことは出来ない。

対応として、user idをcognito idへマッピングすることにより、user idを使用したアクセス制限が可能となる。

- cognito id poolのデフォルトマッピングをオンにする
- 対象のロールの信頼ポリシーに sts:TagSessionを許可する
- role へ ${aws:PrincipalTag/username}　を記載

これにより、user idを使用したs3へのアクセス制御が可能となる
Kintoneアプリレコードのフィールド情報をさっと取得する

## はじめに
Kintoneアプリ開発をしていて、管理者権限のないアプリのフィールドタイプや、フィールドコードをさくっと確認したいとき用の備忘録です
権限の与えられていないフィールドの情報は取得できないので、必要に応じてアプリ管理者に確認する必要はあります

## レコード情報の確認方法

### 1. レコードの詳細画面でブラウザのデベロッパーツールのConsole画面に以下を貼り付けてEnter

```javascript
    kintone.events.on([
        'app.record.detail.show',
    ], function (event) {
        var record = event.record;
        console.log(event);
        return event;
    });
```

### 2. 前後どちらかにレコードを移動すると・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022607/2d2c97d6-f5b5-7c19-2609-8c65774dfdaa.png)
　レコードを移動する

### 3. Console画面でレコード情報が表示される
![スクリーンショット 2021-06-07 153727.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022607/45e729d7-3c85-58fd-0afe-c80e73479b8c.png)
※権限のないフィールドの情報は取得できません
【Python】結局"i += 1"と" i = i + 1"どっちが速いの?

# 概要
"i += 1"と"i = i + 1"の処理速度を比較します。
すでに[[小ネタ] Pythonでは、 i+=1 よりも i = i+1の方が微妙に早い、というお話](https://qiita.com/gyu-don/items/2cc167fb729efa2c6f7a)に詳しくまとまっているので、ここでは箱ひげ図で可視化してみる。

# 方法
"i += 1"と" i = i + 1"をそれぞれ10,000,000回計算してそれを1セットとして、100回分計測して箱ひげ図で比較します。
箱ひげ図は、[プログラマーのための統計学】箱ひげ図](https://qiita.com/Esfahan/items/14811149a047c44956b6)を参考にしました。

```Python:処理速度の比較
import time
import matplotlib.pyplot as plt

number_of_set = 100
list_1 = []# "i = i + 1"
list_2 = []# "i += 1"
n = int(1e+7)

# "i = i + 1"と"i += 1"の計測
for _ in range(number_of_set):
    # "i = i + 1"
    i = 0
    start_1 = time.time()
    for _ in range(n):
        i = i + 1
    list_1.append(time.time() - start_1)

    # "i += 1"
    i = 0
    start_2 = time.time()
    for _ in range(n):
        i += 1
    list_2.append(time.time() - start_2)

# 箱ひげ図
time = (list_1, list_2)# タプル化
fig, ax = plt.subplots()
bp = ax.boxplot(time)
ax.set_xticklabels(['i = i + 1', 'i += i'])
plt.title('100 times with 10,000,000 loops as one set')
plt.xlabel('type')
plt.ylabel('time [sec]')
plt.grid()
# 描画
plt.show()
```
![スクリーンショット 2021-06-07 15.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/5a2a7be5-5033-7091-58a0-fefdb28c7285.png)

# 結論
箱ひげ図から定性的になりますが、"i = i + 1"の方が速い結果となりました。
ただ、"i += 1"の方がすっきりしているので、臨機応変に使い分けたいところです。

# 参考資料
[[小ネタ] Pythonでは、 i+=1 よりも i = i+1の方が微妙に早い、というお話](https://qiita.com/gyu-don/items/2cc167fb729efa2c6f7a)
GCS上のTSVファイルからBQテーブルを作成する

## 概要
Cloud ConsoleとCloud Shellを利用して、GCS上のTSVファイルをソースとしてBigQueryテーブルを作成します。

Cloud ConsoleはCSVファイルであればGCSインポートでテーブル作成できるのですが、TSVファイルには対応していないためCloud Shellでの転送処理が必要となります。 
 
## BQテーブルの作成
Cloud Consoleでスキーマを定義し、空のテーブルを作成します。

### スキーマの定義

インポートするデータのスキーマを定義します。ここではテキストとして定義しています。

```
uid:STRING,gender:STRING,age:INTEGER
```

このテキストをテーブル作成画面のスキーマの項目で[テキストとして編集]のトグルをONにして、貼り付けます。
![51f07ab1-e2f8-4261-9a51-43asdad8dc000e98.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147689/5eb4bb6f-65b0-6b8d-ee05-8455f9869abb.png)
## GCSから転送

GCSのTSVファイルをソースとして、前述の空のテーブルに対してデータを転送します。

```shell
bq load --source_format=CSV --encoding=UTF-8 --field_delimiter="\t" datasetName.tableName gs://bukectName/fileName.tsv
```

### 転送でエラーが発生した場合
スキーマの定義が誤っている場合などエラーが発生した場合には、スキーマと実際のデータを比較することになります。
ただファイル容量が大きい場合にはローカルで確認するのは不便なため、例えばCloud Dataprepでプレビューしながら確認すると良いと思います。


## 参考URL
- [Cloud Console を使用したクイックスタート  |  BigQuery  |  Google Cloud](https://cloud.google.com/bigquery/docs/quickstarts/quickstart-web-ui?hl=ja)
- [BigQueryにタブ区切りのTSVファイル[テキスト]を全件ロードする方法 - case-kの備忘録](https://www.case-k.jp/entry/2019/02/08/105919)
【React】初回レンダリングを回避したい

<h2>初回レンダリングされる</h2>
以下を読み込むと、初回レンダリングが走ってしまい、「1回押された」と表示されてしまいます。
本来はbuttonが押されたときのみ、処理をさせたい。。。！！

なので、初回レンダリング時に読み込ませないようにします。


```react:Hoge.jsx
import React, { useState} from "react";

export const Hoge= () =>{
  const [count,setCount] = useState(0);

  const handleHoge= () =>  {
      setCount(count+1)
  }

  return(
    <div>
        <div>{count}回押された</div>
        <button onClick={() => handleHoge()}>HOGEButton</button>
    </div>
  )
}
```


<h2>解決策</h2>
初回レンダリングかどうかのフラグを持たせて、制御する方法です。

```react:Hoge.jsx
import React, { useRef,useState,useEffect } from "react";

export const Hoge= () =>{
  const [count,setCount] = useState(0);
  const renderFlgRef = useRef(false)

  useEffect(() => {
    console.log("初回レンダリング")
    renderFlgRef.current = true
  },[])

  const handleHoge= () =>  {
    if (renderFlgRef.current){
      setCount(count+1)
    }
  }

  return(
    <div>
        <div>{count}回押された</div>
        <button onClick={() => handleHoge()}>HOGEButton</button>
    </div>
  )
}
```


<h2>参考</h2>
https://stackoverflow.com/questions/55075604/react-hooks-useeffect-only-on-update

https://qiita.com/irico/items/4b2ff1c25b49ea6a4abf

https://qiita.com/Paul_Dirac/items/359f622e4f9414b16547
GitHub SSH 公開鍵の作成

## GitHubにSSHの設定をする
```sh
$ cd ~/.ssh

$ ls
authorized_keys2  id_dsa       known_hosts
config            id_dsa.pub

$ ssh-keygen
```
パスフレーズを二回入力するよう求められます。鍵を使うときにパスフレーズを入力したくない場合は、パスフレーズを空のままにしておきます。

```
$ cat ~/.ssh/id_rsa.pub
```

上記コマンドで出力されたログをコピー＆ペーストでGitHubやらに貼る

## GitHub に貼る
1. 自分のアイコンをクリックして `Settings` をクリック
1. `SSH and GPG keys`をクリック
1. `new SSH keys`という緑色のボタンをクリック
1. title に任意の名前、key に先程コピーしたものを貼る

## もし、ssh で git push しているのにパスワードを求められたら
```sh
$ ls ~/.ssh
id_ed25519	id_ed25519.pub	known_hosts	known_hosts.old

$ ssh-add ~/.ssh/id_ed25519
```

参考：
- https://git-scm.com/book/ja/v2/Git%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC-SSH-%E5%85%AC%E9%96%8B%E9%8D%B5%E3%81%AE%E4%BD%9C%E6%88%90
- https://kako351.dev/entry/2019/07/18/ssh%E3%81%A7git_push%E3%81%97%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%AB%E6%AF%8E%E5%9B%9E%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%82%92%E8%81%9E%E3%81%8B%E3%82%8C%E3%82%8B
- https://prog-8.com/docs/git-env
jpcalでpanic goroutine 1 [running]: github.com/holiday-jp/holiday_jp-go.init.0()


カレンダーを確認するためにマウスを触るのがめんどくさいので、CUIでカレンダーを見ようと思い、calコマンドを入れたのですが、休日、祝日がわからない為、うーんと思っていたら作っている方がいますね。

[jpcal](https://github.com/y-yagi/jpcal)

こちらを落として

```zsh:zsh
% go get github.com/y-yagi/jpcal
```
実行すると

# エラー

エラーが出た。

```zsh:zsh
% jpcal
panic: EOF

goroutine 1 [running]:
github.com/holiday-jp/holiday_jp-go.init.0()
        /Users/hogehoge/workspace/gohome/src/github.com/holiday-jp/holiday_jp-go/holiday.go:33 +0x2d0
```
ちょっとソースを見たけどわかりません。

# 差し替え
とりあえずcloneして動かすことができるか確認

```zsh:zsh
~/workspace/gohome/src/github.com/y-yagi/jpcal　% go run main.go calendar.go
     2021年 06月       
日 月 火 水 木 金 土   
       1  2  3  4  5   
 6  7  8  9 10 11 12   
13 14 15 16 17 18 19   
20 21 22 23 24 25 26   
27 28 29 30            

```

実行できるのでbuild

```zsh:zsh
~/workspace/gohome/src/github.com/y-yagi/jpcal % go build main.go calendar.go 
```

jpcalの置き場所確認

```zsh:zsh
% which jpcal
/Users/hogehoge/workspace/gohome/bin/jpcal

```

差し替える

```zsh:zsh
% mv ./y-yagi/jpcal/main ~/workspace/gohome/bin/jpcal                                                                                                                                                                                             

```

# 動きました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/812e54df-e5d1-62e9-e849-6225f810ed7a.png)


祝日もちゃんとなってる。ありがとうございます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/d6cfee17-343b-f5f0-0cdc-839d28062883.png)
[Rails]モデルによるデータベース操作について（初歩）

## はじめに
こないだ、面接でデータベースに関しての質問に対して惨敗したので、データベースの学習をしっかりやってこうと思いました。

手始めにRailsでデータベースを操作するために用いられるModelとデータベースについてまとめてみました。

## ORM
まずはこの用語**ORM**ですが Object Relational Mappingの略でリレーショナルデータベースのデータをオブジェクト思考のプログラミング言語でオブジェクトとして使用するために変換する技術のことです。

RailsのActiviRecordのメソッド（createとかdestroyとか)もORMです。
そして、例えばdestroyを使ったときにはその裏ではSQLという言語が実行されています。

私はこの時点でリレーショナルデータベースってなんだっけとなりました。

## RDB(リレーショナルデータベース)
リレーショナルデータベースはデータを複数の表（テーブル）として管理し、様々な表（テーブル）同士の関係を定義をすることで、複雑なデータの関連性を扱えるデータベースのことです。

## SQL(Structured Query Language)
SQLはデータベースを操作するための言語で、もっと言えば、リレーショナルデータベースを操作するための言語になります。ActiveRecordのメソッドは実際には実行されるときSQLに変換されています。

このSQLという言語は大きく三つの命令に分類されます。

**データを定義　DDL (Data Definition Language)**

**データを操作　DML (Data Manipulation Language)**

**テータを制御　DCL (Data Control Language)**

そしてそれぞれの命令の代表的なものを紹介します。

**DDL**

| 命令 | 機能 |
| ---- | ---- |
| CREATE | データベースやテーブルの作成 |
| ALTER | データベースやテーブルの更新 |
| DROP | データベースやテーブルの削除 |

**DML**(ちなみに私はこれを面接で突っ込まれて一つも答えることができませんでした。）

| 命令 | 機能 |
| --- | ---- |
| INSERT | データの登録 |
| UPDATE | データの更新 |
| DELETE | データの削除 |
| SELECT | データの検索 |


**DCL**

| 命令 | 機能 |
| --- | ------ |
| COMMIT | DBの変更の確定 |
| ROLLBACK | DBの変更の取り消し |
| GRANT | ユーザーに操作権限を付与 |
| REBOKE | ユーザーの操作権限を無効化 |


またSQLはどの種類のリレーショナルデータベースであったとしても基本的に使うことができます。
なぜならSQLはISO(国際基準化機構)で規格化が行われているからです。

私はまだリレーショナルデータベースはMySQLしか使ったことはないですが、他のPostgreSQLやSQLiteという他のリレーショナルデータベースでも利用可能ということです。


## 最後に

データベースの扱いは学習していたつもりでしたが、今まで記述として書くことがほとんどなかったため、ほとんど覚えていませんでした。
サーバーサイドにおいてデータベースの知識と理解は必要不可欠になるので、しっかり復習と新たな学習は継続して行なっていきたいです。
テーブルタグについて

テーブルタグを外すと、tdのテーブルの要素がはずれて、
テーブルではなく、列でcssを記載することができた。

列ごとで、しかも奇数の列にだけ色を付けるのをやってたんだけど
テーブルタグついてるとテーブルごとだから、テーブルとテーブルの間は白になってて、列全体がその背景色になってくれなかった。
普通にtableタグをはずしたら一列ずつきれいにつくられた。
最新の技術記事を自動配信するSlackアプリを作って公開してみた

## はじめに
この度、各社のテックブログを中心に、最新技術記事を配信するSlackアプリ[Winkie](https://winkie.app)を作って公開しました。
毎日定時に最新の技術記事がお使いのSlackワークスペースのチャンネルに配信されます。
現在Winkie FrontendtとWinkie Backendの二種類があり、それぞれフロントエンド、バックエンドの情報が配信されます。

開発チームの技術力向上に、個人の情報収集に、お使いください。
編集部からのおすすめポイントの解説もあるので、読む前の参考になります。

![スクリーンショット 2021-06-07 12.37.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/9a22189f-2da7-7254-3f36-ae4fc6f3cf4d.png)

この記事では、当サービスWinkieがどのような技術を使って開発されているかをご紹介したいと思います。

Slackアプリの開発に関心のある方は特に必見です。


## サービス構成図
以下がサービスの構成図です。
![スクリーンショット 2021-06-07 13.05.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/4a3d65c0-d730-4828-5ee4-cf7ac8596477.png)

### 管理画面
投稿する記事の登録や、編集部からのおすすめの文章を編集する管理画面が必要になるため、その管理画面のフロントをReact+Typescriptで実装しています。基本的には記事の追加・編集・削除等の単純で軽量なものとなっているためRedux等のツールは導入していません。デザインも、とりわけ凝ったものにはしておらず、Material UIを使って実装しています。

### APIサーバー
記事の登録や配信、slack情報の取得などを行うAPIサーバーはScala+PlayFrameWorkで実装しています。
DatabaseはPostgresを使用していて、[Slick](https://scala-slick.org/doc/3.0.0/)を使用してデータベースへのアクセスを行なっています。

アーキテクチャについてはDDD（ドメイン駆動開発）で構築しています。

### デプロイ
デプロイは管理画面・サーバーともにHerokuを使ってデプロイを行なっています。
また、記事配信のための定期実行もherokuで行なっています。[heroku scheduler](https://devcenter.heroku.com/articles/scheduler)で実装

## つまずいたポイント
今回このSlackアプリWinkieを開発するにあたってつまずいたポイントをいくつか列挙したいと思います。同じ問題に苦しむ方の参考になれば幸いです。

### slack event api
Botがアンインストールされたり、channelに招待されたりなどといったイベントが起こった際に、それにhookしてapiリクエストを飛ばしてくれる仕組みが用意されているのですが、イベントごとにリクエストURLの指定ができず、全ての受信イベントが1つのURLにアクセスします。
そのため、そのイベントがなんのイベントであるかを受け取ったサーバー側で判定する必要がありました。

Winkieのサーバーではadapter層で送られてきたJsonに型をつけたり、バリデーションを挟んだりしています。
そのためリクエストのbodyのJsonからどの型か（どのリクエストか）をその処理の前に判定しています。

Scalaにはapplicativeという概念があり、これを使って型の判定、振り分けを行いました。
やり方としては同一のEventBodyというtraitを各々が継承してその後型のパターンマッチングでどの処理を走らせるか決めています。

```scala
sealed trait EventBody

final case class AppUninstalledEventBody(
  teamId: String,
  apiAppId: String,
  eventType: "app_uninstalled") extends EventBody

final case class AppHomeOpenedEventBody(
  channelId: String,
  userId: String,
  eventType: "app_home_opened"
) extends EventBody

def mapToEventCommand = 
 case body: AppUninstallEventBody => // 後続する処理
 case body: AppHomeOpenedEventBody => // 後続する処理
```

### リクエストのJson形式
Slack event apiは日本語ドキュメントが用意されていて非常にわかりやすいのですが、たまにドキュメントとは異なる形でJsonが送られてくる場合がありました。ドキュメント通りのJsonを想定して実装を進めるとフォーマットが異なると怒られてしまうケースがあります。
もしおかしいなと思ったら、一度リクエストをそのままログ出力してみるなどして確認してみるといいと思います。


## Block Kit Builderを活用する
[Block Kit Builder](https://app.slack.com/block-kit-builder)を使うと、送信するメッセージのプレビューを確認しながらUI構築が可能です。
![スクリーンショット 2021-06-07 14.23.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/c5a3555f-35a0-132b-7c78-17e5a3f92d92.png)

画面左でぽちぽちで操作すると、そのUIを構築するのに必要なJsonが自動で画面右に生成されます。画面最左のメニューから、どんなUIテーマが用意されているかを確認することも可能ですね。
それに加えて例えば、ユーザーがセレクトボックスから何か選択した時にどういったリクエストが飛んでくるかもここから確認ができ、非常に便利です。
画面中央上にある、Action Previewのタブをクリックした上で、左側のUIプレビュー画面で実際に操作することで確認できます。

ちなみに右上のSend to Slackボタンから実際に送信できます。

## 終わりに
いかがでしたか。外部APIを多く利用するようなサービスはそのAPIの仕様や制約に結構引っ張られてしまいがちなので、やはりそこが難しいですね。

Winkieはhttps://winkie.app/ から簡単にインストールができます。ぜひインストールしてください！
BAT ネットワークアダプター（イーサネット）IP取得自動取得に変更


![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614609/a72106f2-6e36-abda-1150-237df91cfc04.jpeg)


```vim
@echo off
netsh interface ip set address "イーサネット" dhcp
netsh interface ip set dns "イーサネット" dhcp
netsh interface set interface "イーサネット" disable
netsh interface set interface "イーサネット" enable


if %errorlevel% neq 0 (
netsh interface ip set address "イーサネット 2" dhcp
netsh interface ip set dns "イーサネット 2" dhcp
netsh interface set interface "イーサネット 2" disable
netsh interface set interface "イーサネット 2" enable
echo アダプター名イーサネット 2を変更しました。
)else if %errorlevel% equ 0(
echo アダプター名イーサネットの設定を変更しました。
)else (
echo エラーで設定できませんでした。
)
pause
exit


```
IAM・VPC(AWS SAA試験対策編)

#IAM
[公式ページへ](https://aws.amazon.com/jp/iam/)
IAMとは、AWSのユーザーとグループを作成および管理し、アクセス権を使用してAWSサービスへのアクセスを許可および拒否できます。

***ポリシー***
ポリシーとは、権限をJSON形式で書いた設定ファイルです。
例えば、S3のアクセスを許可しているポリシーをユーザーにアタッチすることで
そのユーザーは、S3のアクセスすることが出来ます。


主に**3つ**の権限の管理方法があり、
ユーザー、グループ、ロールがあります。

***ユーザー***
ユーザーを作成し、ユーザーに対してアクセスの権限を付与させて管理します。

***グループ***
ユーザーを作成し、ユーザーをグループに分け、アクセスの権限を付与させて管理します。
開発チームや運用チームなどの分け管理する事で誤操作でのミスを防ぐことが出来ます。

***ロール***
AWSのサービス間に対して権限を許可をさせて管理することが出来ます。
例えば、EC2からS3へのアクセス権限を許可させてサービス間の連携することができます。

#AWS Organizations
[公式ページへ](https://aws.amazon.com/jp/organizations/)
類似サービス: IAM

AWS Organizationsとは、複数のアカウントを利用している場合に
マスターアカウントとして統合管理を実施することができます。
組織単位 (OU) にアカウントをまとめることで組織単位で管理することが出来ます。


***AWS Organizationsを使用するメリット***
S3などの一部のサービスでは、ユーザーがサービスをより多く使用すればするほど低価格となるボリューム価格が利用されています。したがって、ストレージの利用量を統合して請求することによって、コストを削減できる可能性ありAWS Organizationsを使用するメリットがあります。


#VPC編
今回は、セキュリティーグループ設定とネットワークACL設定の違いを書きたいため
VPCについて説明しませんが簡単に言うとEC2とかRDSを置くための仮想ネットワークです。
詳しくは、[公式ページ](https://aws.amazon.com/jp/vpc/?vpc-blogs.sort-by=item.additionalFields.createdDate&vpc-blogs.sort-order=desc)を確認してください。


***セキュリティーグループ設定とネットワークACL設定の違い***
セキュリティーグループは、**ステートフル**であり、
サーバー単位にインバウンドとアウトバウンドのアクセス権限を決めれます。

ネットワークACLは、**ステートレス**であり、
VPC/サブネット単位でアクセス権限できます。
インバウンドとアウトバウンドの設定を別々に反映させることが出来ません。

#参考
Udemy
[これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）
](https://www.udemy.com/course/aws-associate/)
ウマ娘のレース管理アプリを作る【１】〜スクレイピング編〜

ウマ娘をやってて、ミッションなどで特定のレースに出走する必要があったりする場合、そのレースがいつ開催されるのか、そしてそのミッションをクリアしたかどうかをアプリで管理できたら良いと思いませんか？
まぁ、大手攻略サイトと、TODOリストアプリ使えばいいんですが、Pythonのコーディング練習とか含めてやってみようと思います。
スクレイピングや、tkinterの使い方のメモなどになればいいかなと。

# 手順

1. スクレイピングでレースデータを取得【今回やる】
1. データを使ってGUIアプリケーションを作る（検索＆TODOリスト登録）

# 使用開発環境
* Python 3.8.3
* beautifulsoup4 4.9.1
* pandas 1.0.5
* エディタ：VScode

# スクレイピングでレースデータを取得
レースデータを一つ一つ入力していくのは時間がかかるので[Game With様](https://gamewith.jp/uma-musume/)から取得させていただきます。
サイトは[こちら](https://gamewith.jp/uma-musume/article/show/258835)。
ただ、スクレイピングをする上で自分が気をつけているのは、「インターネット上にある誰かのデータを借りている」「データ取得のリクエストにはサーバーに負担をかけている」ということを意識することです。
なので簡単に実行できないようにURLや内部のクラス名などは明記しません。

```python
from bs4 import BeautifulSoup
import requests
import pandas as pd

URL=''
RACE_CLASS=''

# リクエスト＆読み込み
load_url = URL
html = requests.get(load_url)
soup = BeautifulSoup(html.content, 'html.parser')

lis_td = []     # td要素を入れるためのリスト
lis_a = []      # a要素を入れるためのリスト

# レース毎に設定されてるクラスから一つずつ取り出す
for element in soup.find_all(class_=RACE_CLASS):
    # 要素内のデータを整形して、項目毎のレースデータを作成
    lis = [i.text for i in element.find_all('td')]
    lis_td.append(lis[0].split(' ') + lis[1].split(' / '))
    lis_a.append([i.text for i in element.find_all('a')])

# 空リストを削除する
while [] in lis_a:
    i = lis_a.index([])
    lis_a.pop(i)
    lis_td.pop(i)

# リスト内の空要素を削除
lis_a = [i[1] for i in lis_a]

# データフレーム形式でデータを整形
df = pd.DataFrame(lis_td, columns=RACE_COLUMNS)
se = pd.Series(lis_a)
df['レース名'] = se

# 出力
df.to_csv(OUTPUT_CSV)
```

ソースコードの細かい処理などはコード内のコメントを見てください。

### 参考文献
* [【ウマ娘】レース一覧 - ゲームウィズ(GameWith)](https://gamewith.jp/uma-musume/article/show/258835)
* [PythonでHTMLを解析してデータ収集してみる？ スクレイピングが最初からわかる『Python 2年生』](https://codezine.jp/article/detail/12230)
* [米国データサイエンティストがやさしく教えるデータサイエンスのためのPython講座](https://www.udemy.com/share/103qtiAEESeFlURHUD/)（Pandasの説明がわかりやすいコースです）

### Git Hub
* [https://github.com/sugimochi97/uma_musume/tree/master/race_plan](https://github.com/sugimochi97/uma_musume/tree/master/race_plan)
メモ: スマートシティ

## デジタル庁

https://xtech.nikkei.com/atcl/nxt/column/18/01651/060300005/

## オープンデーター

https://cio.go.jp/

## 例

札幌市

https://www.city.sapporo.jp/kikaku/ictplan/platform/documents/02_about_smartcity_20180305.pdf

https://data.pf-sapporo.jp/

https://documents.fiware-testbed.jp/

CKAN

https://demo.ckan.org/dataset/sample-dataset-1/resource/e687245d-7835-44b0-8ed3-0827de123895

### LPWAの種類

* 少ない電力消費で数kmの長距離通信が可能になる無線通信

https://time-space.kddi.com/ict-keywords/kaisetsu/20170428/

| 名前 | 速度(約) | 飛距離(約) | 
|:--|:--|:--|:--|
| SIGFOX | 100 bps | 50 km |
| LoRaWAN | 100 K bps | 15 km |

* [渋谷区での検証](https://www.green-house.co.jp/topics/lorawan-network/)
* [サンプルプログラム](https://osoyoo.com/2018/07/26/osoyoo-lora-tutorial-how-to-use-the-uart-lora-module-with-arduino/)


### LPWAの欠点

移動中や遮蔽物がある場合の通信が難しい

## QGIS

* 3D都市モデル 東京都23区（FBX 2020年度）

https://www.geospatial.jp/ckan/dataset/plateau-tokyo23ku-fbx-2020

## オープンデーター

https://qiita.com/uedayou/items/9e4c6029a2cb6b76de9f
Sambaファイルサーバーへのアクセス許可がないときの対処法

# 概要
Sambaファイルサーバにアクセスすると
「ユーザー名が見つかりません」
「このネットワーク リソースを使用するアクセス許可がない可能性があります」
と表示され、アクセスできないときの対処法

# 環境
* windows10
* VMware Workstation 16 Playerの仮想マシン
* CentOS7
* Samba

# 前提条件
* サーバー名：File-Server
* sambaユーザー名：centos1(パスワード：CentPass)

# 手順
## １．ネットワークの削除
```:cmd
>net use \\サーバー名 /delete

(例)
>net use \\File-Server /delete
\\File-Server が削除されました。
```
※実際は`\`ではなく、`￥`で表示されます


## ２．ファイルサーバーにユーザーでログインする
```:cmd
>net use \\サーバー名 /user:ユーザー名

(例)
>net use \\File-Server /user:centos1
\\File-Server のパスワードまたはユーザー名が無効です。

'File-Server' に接続するための 'centos1' のパスワードを入力してください: CentPass　←パスワード入力
コマンドは正常に終了しました。
```
Javascript オブジェクト


本日はオブジェクトを学習しましたので、そちらについて記事に残していきます。

配列と同様に、オブジェクトはデータをまとめて格納することが可能ですが、オブジェクトは異なるデータを格納することが可能です。

配列の例

```javascript
let animal = ["イルカ", "キリン", "猫",];
```
配列の使い方としては上記のように、変数 animal の中にそれに対応する値が格納されているイメージです。
もちろん、文字列の他にも数値、オブジェクト、その他の変数なども格納可能ですが、現在の私の学習レベルでは上記のような使い方が多いかと思います。

オブジェクトの例

```javascript
let dolphin = {
  type: "動物",
  name: "イルカ"
};

let giraffe = {
   type: "動物",
   name: "キリン"
};

let cat = {
  type: "動物",
  name: "猫"
};
```
オブジェクトはオブジェクト名に対して、{プロパティ名1: 値1,} という形でデータが格納されています。
オブジェクトの操作は、オブジェクト名.プロパティ名 とすることで値を呼び出すことが可能です。

```javascript
let cat = {
  type: "動物",
  name: "猫"
};
console.log(cat.name); //猫
```

また下記のように、変数にオブジェクト名とプロパティを代入しても値を呼び出すことが可能です。

```javascript
let cat = {
  type: "動物",
  name: "猫"
};
let name = cat.name;
console.log(name); //猫
PlayCanvasの(loadFromUrl)で正しくリソースを読み込めないの対処法

### `loadFromUrl`で正しくリソースを取得できない場合

PlayCanvasでエディタ外からリソースを読み込む際に、拡張子がURIにアクセスをした場合に正しくアセットを読み込む方法です。


PlayCanvasで外部からリソースをアセットとして読み込む際に使用するメソッドです。
この読み込み方法では拡張子が指定されていないと一部、正しく読み込めない場合があります。
https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#loadFromUrl


#### 例: GLBファイルの読み込みの場合

##### 正しく読み込まれる例

```javascript
const url = https://example.com/model/xxxxxxxxxxx.glb
pc.app.assets.loadFromUrl(url, "container", (err, asset) => {})
```

##### 正しく読み込まれない例

```javascript
const url = https://example.com/model/xxxxxxxxxxx
pc.app.assets.loadFromUrl(url, "container", (err, asset) => {}) //　リソースにデータが入らない
```

### `loadFromUrlAndFilename`を使用してアセットを読み込む


このようなGLBファイルを読み込む場合には、`loadFromUrlAndFilename`メソッドを使用して、モデルの名前を指定することで正しく読み込まれるようになります。

https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#loadFromUrlAndFilename

```javascript
const url = https://example.com/model/xxxxxxxxxxx
pc.app.assets.loadFromUrlAndFilename(url,`model.glb`, "container", (err, asset) => {})
```

これで外部のリソースが`type:container`としてアセットが読み込まれます。
LinuxにPowershellインストール方法について

## はじめに
**Powershell** をインストールするには、以下の各ディストロの手順を参照してください。

## RHEL8
```bash
curl https://packages.microsoft.com/config/rhel/8/prod.repo | sudo tee /etc/yum.repos.d/microsoft.repo
sudo dnf install -y powershell
pwsh
```

## RHEL7
```bash
curl https://packages.microsoft.com/config/rhel/7/prod.repo | sudo tee /etc/yum.repos.d/microsoft.repo
sudo dnf install -y powershell
pwsh
```

## Ubuntu 20.04
```
wget -q https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo apt-get update
sudo add-apt-repository universe
sudo apt-get install -y powershell
pwsh
```

## Ubuntu 18.04
```bash
wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo apt-get update
sudo add-apt-repository universe
sudo apt-get install -y powershell
pwsh
```

## Azure Powershellモジュール

次に、**Powershell**から**Azure Powershell**モジュールをインストールします：

```powershell
PS > Install-Module -Name Az -Scope CurrentUser -Repository PSGallery -Force
```

## Docker
または、**Docker** が使用されている場合は、**Azure Powershell** のコンテナーを使用することもできます：

```bash
docker run -it mcr.microsoft.com/azure-powershell pwsh
```

## おわりに
**Azure Powershell**をインストールした後、`Connect-AzAccount -UseDeviceAuthentication`でログインしすると、**Azure**のコマンドを使うことができます。例えば`Get-AzVM`を使って見てください。
Shapley 値（シャープレイ値）の計算式


## 計算式

$$
\phi_i\,(N, v) = \sum_{S \subseteq N\\i} \frac{|S|! (N - |S| - 1)!}{N\!} \left( v(S\,\cup\,i) - v(S)\right)
$$

## 具体例

参加者とその報酬について、[SHAP(SHapley Additive exPlanations)で機械学習モデルを解釈する](https://dropout009.hatenablog.com/entry/2019/11/20/091450) の設定を引用した。

| 参加者 | 集合表記 | 報酬 |
|---|---|---|
| A君 | {A} | 6 |
| B君 | {B} | 4 |
| C君 | {C} | 2 |
| A君とB君 | {A, B} | 20 |
| A君とC君 | {A, C} | 15 |
| B君とC君 | {B, C} | 10 |
| A君とB君とC君 | {A, B, C} | 24 |


A, B, C の参加順には 3! = 6 通りある。各参加順における A 君の貢献を、「A君が参加したタイミングで報酬がいくつ増えたか」として定義すると、下記のように求められる。

| 参加順 | 0 人 | 1 人 | 2 人 | 3人 | A 君の貢献 |
|---|---|---|---|---|---|
|参加順1: A君→B君→C君  | {} **0** | {**A**} **6** | {A, B} 20 | {A, B, C} 24 | 6 - 0 = **6** |
|参加順2: A君→C君→B君  | {} **0** | {**A**} **6** | {A, C} 15 | {A, B, C} 24 | 6 - 0 = **6** |
|参加順3: B君→A君→C君  | {} 0 | {B} **4** | {**A**, B} **20** | {A, B, C} 24 | 20 - 4 = **16** |
|参加順4: B君→C君→A君  | {} 0 | {B} 4 | {B, C} **10** | {**A**, B, C} **24** | 24 - 10 = **14** |
|参加順5: C君→A君→B君  | {} 0 | {C} **2** | {**A**, C} **15** | {A, B, C} 24 | 15 - 2 = **13** |
|参加順6: C君→B君→A君  | {} 0 | {C} 2 | {B, C} **10** | {**A**, B, C} **24** | 24 - 10 = **14** |

A 君の貢献度は、各パターンにおける貢献の平均値として下記のように求められる。
$$(6 + 6 + 16 + 14 + 13 + 14)\,/\,6 = 11.5$$

## 一般化
ある参加順において i よりも前に参加していた人々の集合を S と表記すると、その参加順における i の貢献は下記のように求められる。すなわち、各パターンにおける i の貢献は、「i よりも前に誰が参加していたか」に基づいて計算される。
$$v(S\,\cup\,i) - v(S)$$

i よりも前に参加した人は |S| 人、i より後に参加した人は N - |S| - 1 人なので、N! 通りの参加順のうち、このような参加順の数は下記のように表される。
$$|S|! \times (N - |S| - 1)!$$

S としては、全体から i を除外したもののうち、自由に選んでよい。可能な全ての S を対象としてこれらの積和を計算し、N! で除することで、Shapley 値を計算することができる。


## 問題点
N! 通りの参加順について考慮する必要があるので、N が増えると計算時間も膨大になる。機械学習の手法としては、多項式時間で計算可能な SHAP 値などが使用される。
【初心者】Laravel Mixの周辺について理解する

#Laravel Mixとは、
PHPフレームワーク「Laravel」に同梱されているビルドツールです。
現在主流のWebpackがベースになっており、Laravelを使用しなくても使うことができます。
とにかく設定ファイルがシンプルで、ビルド（ソースコードなどを元に実行可能ファイルや配布パッケージを作成する処理や操作のこと/コンパイルを含む）のスピードも申し分ありません。
package.jsonに設定を記入すると、Webpackやsassの環境構築、Bootstrapのセットアップなどを、
時間をかけずに自動的に圧縮等の処理をしてくれます。

https://tech.arms-soft.co.jp/entry/2020/04/01/090000#:~:text=Laravel%20Mix%E3%81%AF%E3%80%81PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0,%E3%81%AE%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%82%82%E7%94%B3%E3%81%97%E5%88%86%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82

#Webpack
モジュールをバンドル（束ねる）するツールです。
モジュールとは、プログラム内のJavaScriptファイル（以下：jsファイル）やsassファイルなどのことです。webpackを使うことで、複数のjsファイルをひとつのjsファイルにまとめたり、複数のsassファイルをひとつのsassファイルにしたりできます。
https://goworkship.com/magazine/how-to-webpack/

#Bootstrap
Twitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

https://techacademy.jp/magazine/6270

#node.js
PHPのようにサバ―サイドでJavaScriptを動かせるプラットフォームがあり、中でも代表的なのがNode.jsだ。他にそこまで有名なものもないので、「Node.js = サーバサイドJavaScript」だと認識しておけばいいだろう。
サーバサイドで動くというとPHPなどと一緒だと思われたかもしれないが、実はまったく違う。
そもそもNode.jsがサーバサイドで動くプログラムという説明自体が正確ではない。より正確に言うと、Node.jsはサーバサイドでJavaScriptを実行できるようにしてくれるものだ。プラットフォームという表現が正しい。

https://eng-entrance.com/what-is-nodejs

#node.js のバージョンを管理するnodebrew
nodebrewを使うことで、一つの環境に複数のバージョンのNode.jsを導入することができます。
Web開発でNode.jsが頻繁に使われる昨今、特にnpmのバージョン互換性が問題となる場合が多いです。そんな中で、複数のプロジェクト用に別々のパッケージを保持したNodeを管理できたり、Nodeのバージョンを即座に切り替えたりできるのは大きなメリットだと思います。

https://rennnosukesann.hatenablog.com/entry/2018/06/14/221944#:~:text=nodebrew%E3%81%AF%E3%80%81Node.js%E3%81%AE,%E3%81%AA%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%8C%E5%A4%9A%E3%81%84%E3%81%A7%E3%81%99%E3%80%82

ディレクトリ直下にあるwebpack.mix.jsを編集し、
作成したsassファイルをコンパイルするように記入する。
attr_accesorの利用中、integerで詰まった話

備忘録です。

```student.rb

class Student
    
    attr_accessor :name, :height
    
    def initialize(name, height)
        @name = name
        @height = height
    end
    
    def info
        puts '名前:' + @name
        puts '身長:' + @height
    end
    
   
end

student1 = Student.new('山浦', 167)
student2 = Student.new('土田', 178)

student1.info
student2.info

```

これで実行するとなぜかエラーになる。
```
 `+': no implicit conversion of Integer into String (TypeError)
```

@height の後に　to_sをつけることで解決。
「産業ロボット」には実際どのようなものがあるのか


産業界におけるロボットの存在感は強調してもしきれません。これなしに産業界は存続し得ないと言っても過言でもないでしょう。それくらいに、大事な役割を担っているのです。産業界の縁の下の力持ちこそがロボットです。

<a href="https://www.universal-robots.com/ja/%E8%A3%BD%E5%93%81%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%8A%E3%83%83%E3%83%97/">産業ロボット</a> の話をしていますが、実際には、非常に曖昧な表現かもしれません。と言うのも、ロボットの種類はもう少し細かく分類できるからです。これについて、以下でご紹介したいと思います。
<center>![900px_COLOURBOX16748631.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857503/b880260b-7589-b797-e863-d5b357528936.jpeg)</center>

<h3>協働ロボット</h3>

協働ロボットは、巨大な組立ラインで他のロボット（そして人間）と一緒に働くことのできる設計です。通常、製造ラインの効率を最大化するためには、ハンドリングや溶接、ピックアンドプレイスなどのロボット、作業員が調和して行動する必要があります。協働ロボットは、通常、人にもたらされる危険を最小限にする設計なので、すぐ横で人が仕事をしても、全く問題ありません。プログラミングの柔軟性が高いのも一般的な特徴です。

<h3>塗装ロボット</h3>

プロの塗装職人や作業員を見つけるのは難しく、また、この仕事は非常に毒性が強いのも特徴です。だからこそ、ロボットを利用するのが最適です。これにロボットを利用することで、塗料の無駄を減らすこともできます。作業員の健康を守るのは、雇用主の責任です。これをロボットの導入で果たすことができれば理想的でしょう。健康被害や病欠者が出たりすると、結果的には事業にとって経済的にも、日々の操業的にも問題となります。

<h3>組み立てロボット</h3>

多くの自動車工場では、ロボットが稼働することで、あらゆる部品を高速で組み立てています。また、スループットを向上させるために、フロントガラスやホイールの取り付けなどの作業をロボットが行っている場合も多くあります。組み立ては特に、同じ動きの高速での繰り返しが求められる仕事です。だからこそ、ロボットの導入が効果的です。組み立てロボットは休むこと無く稼働します。可用性の高さという意味でも理想的な「従業員」です。
<center>![How-Well-Is-Your-Cobot-REALLY-Performing.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857503/90c24db4-877d-f59d-fdfb-9c903ecde016.jpeg)</center>
プログラマーが【勉強用の本】を選ぶときの、4つのルール

　こんにちは。紙屋と申します。海城高校の情報科TAや、大学生用プログラミングコミュニティのメンターなどを務めている大学生です。趣味でボカロPさんの動画を作ったりもしています。

#この記事の目的
**これからプログラミングの勉強を始めようとしている方や、より腰を据えて勉強したいと考えている方に向けて、失敗しない勉強本の選び方を教えること**が本記事の目標です。

　この記事にたどり着いた方であれば、世間にプログラミング関連の書籍が星の数ほど出回っていることを、すでにご存知でしょう。それぞれの書籍にはそれぞれの目的・信念・情熱が込められており、どれも一読の価値はあるはずなのです...が、残念ながら**勉強用としてはあまり適していない本が多い**こともまた事実です。効率的に勉強し、限られた時間で質の高い情報を得るためには、無数に存在する本の中から、目的に合致する本を取捨選択する必要があります。

　そこで本記事では、**とりあえずこれさえ押さえておけば地雷を踏む確率がかなり低くなるだろう、という4つの目安**を、理由とともに紹介します。

　一応、プログラミング関連の書籍の選び方についての記事ですが、他分野であっても、勉強目的の書籍を選ぶ際には参考にできるはずです。（自分は、院試の勉強用の書籍なども、本記事で紹介する基準をもとに選んでいます）
#ルール1： 著者がなるべく多い本を選ぼう
**理由：どこでも通用する知識が得られる可能性を上げるため。**


プログラミング関連の技術書は、書き方に著者のクセが出ている場合が多いです。中には、著者独自の視点・定義のもとで話が進められる本もあります。「一般論とは違う視点に立って説明されているな」と分かる方であれば問題ないのですが、初心のうちにそういうクセの強い書籍にあたってしまうと、下手したら勉強が無意味になる可能性さえあります。

そのため「共著」や「〇〇委員会　編」みたいな本があれば、それを選んでおくのがおすすめです。

#ルール2： 「一般書」ではなく「教科書・専門書」を選ぼう
**理由：「一般書」では、知識は得られても技術は得られないため。**


「一般書」がＮＧというわけではありませんが、そればかりをやみくもに読んでしまうと、その分野を中途半端に分かった気になってしまいがちです。自分の能力として操れる "技術" を得るためには、ワンランク上の難しい書籍をあたるのは不可避だと思います。

「一般書」は、あくまでその分野を学ぶモチベーションアップとして読み、頃合いを見計らって踏み込んだ内容の本に移りましょう。

「一般書」と「教科書・専門書」の明確な線引きはおそらくありませが、個人的には次のような基準で判断しています。

+ 参考文献リストが・・・充実していない / 充実している
+ 索引が・・・充実していない / 充実している
+ 数式やソースコードが・・・少ない / 多い

#ルール3： 著者が表紙に載っている本は...
**理由：そういった本は、著者の顔を売ることを目的に書かれている可能性が高いため。**

ネガキャンじみた内容になってしまい大変恐縮ですが、こういった本は少なくとも勉強用としては避けるべきです。上記の理由に加えて、こういった本が「一般書」に分類されることも、勉強用としては不適である理由です。（専門書の表紙で著者がこちらに微笑みかけているものがあれば、ちょっと見てみたい気はします...）

#ルール4： リアルの先輩に勧められた本があれば逆張りせずに受け入れよう
**理由：一番信頼すべき・信頼できる情報であるため。**

正直、これが一番大事なうえに手っ取り早いです。自分が志す領域で実際に活躍されてきた先輩のアドバイスは、ひとまず聞き入れましょう。

#まとめ
　この他にも「こういう本を選ぶべき！」「こういう本は避けるべき！」といった意見があれば、ぜひコメントや[紙屋のTwitter](https://twitter.com/KaseiKamiya)のＤＭなどでお知らせください。記事修正の参考にさせていただきます。

　また、現代において書籍以上の情報源であるネット上の情報の選び方（Webサイトはどこを見れば信頼できる？など）については、本記事では触れられなかったので、後日、そちらを取り上げた記事も書こうと思います。

　最後までご清覧いただき、ありがとうございました。
【Ruby,Python】初心者がじゃんけんゲーム作ってみた

## 前提
某プログラミングスクールでRubyを学習しました。
Rubyの復習、Pythonの学習を兼ねてじゃんけんゲームを作って見ました。

##Ruby.ver
```
# ＜じゃんけんゲーム＞
# 間違った番号を入れた場合のループ
def validate(player_hand, hands)
  if player_hand < 0 || player_hand > 2
    loop{
      puts "0~2の番号を選択してください"
      puts "0.#{hands[0]} 1.#{hands[1]} 2.#{hands[2]}"
      player_hand = gets.chomp.to_i
      if player_hand >= 0 && player_hand <= 2
        break
      end
    }
  end
end

# 入力フォーム
hands = ["グー","チョキ","パー"]
puts "__________________________"
puts "名前を入力してください"
player_name = gets.chomp
puts "0.#{hands[0]} 1.#{hands[1]} 2.#{hands[2]}"
puts "0~2の番号を選択してください"
player_hand = gets.chomp.to_i
validate(player_hand, hands)
puts "#{player_name}さんの選択された手は#{hands[player_hand]}です。"

# コンピュータとの勝敗判定
program_hand = rand(3)
if player_hand == program_hand
  puts "コンピュータの手は#{hands[program_hand]}あいこです"
elsif (player_hand == 0 && program_hand == 1) || (player_hand == 1 && program_hand == 2) || (player_hand == 2 && program_hand == 0)
  puts "コンピュータの手は#{hands[program_hand]}で#{player_name}さんの勝ちです"
else 
  puts "コンピュータの手は#{hands[program_hand]}で#{player_name}さんの負けです"
end
```
##Python.ver
```
# ＜じゃんけんゲーム＞
import random
# 間違った番号を入れた場合のループ
def validate(player_hand, hands):
  if player_hand < 0 and player_hand > 2:
    while player_hand != 0 or player_hand != 1 or player_hand != 2:
      print ('0~2の番号を選択してください')
      player_hand = int(input(f'0.{hands[0]} 1.{hands[1]} 2.{hands[2]}'))
      if player_hand >= 0 and player_hand <= 2:
        break

# 入力フォーム
hands = ['グー','チョキ','パー']
print ('__________________________')
print ('名前を入力してください')
player_name = input('')
print (f"0.{hands[0]} 1.{hands[1]} 2.{hands[2]}")
print ('0~2の番号を選択してください')
player_hand = int(input(''))
validate(player_hand, hands)
print (f'{player_name}さんの選択された手は{hands[player_hand]}です。')

# コンピュータとの勝敗判定
program_hand = random.randint(0,2)
if player_hand == program_hand:
  print (f'コンピュータの手は{hands[program_hand]}あいこです')
elif (player_hand == 0 and program_hand == 1) or (player_hand == 1 and program_hand == 2) or (player_hand == 2 and program_hand == 0):
  print (f'コンピュータの手は{hands[program_hand]}で{player_name}さんの勝ちです')
else :
  print (f'コンピュータの手は{hands[program_hand]}で{player_name}さんの負けです')
```
## じゃんけんゲームで学んだRubyとPythonの違い
- Rubyと違いPythonはインデントに注意する必要がある。（インデントを間違えると正しい挙動を示さない）
- メソッド（関数）やif文などpythonではendをつけず、：（コロン）をつける。
- 式展開を行う際、Rubyは#{}で記述を行うがPythonは(f'{}')で記述（一例）

##まとめ
同じオブジェクト指向の言語であったが、色々と記述方法が違うのでこれから引き続き学習を行って行きたいと思います。
また、Pythonの式展開は一例なので今後、まとめて行きたいと思います。
React + Typescript + Lint + Hook のプロジェクトテンプレート

# React + Typescript + Hook のプロジェクトテンプレート

自分用に作ったものですが、せっかくなので公開します。

## こんな人に向けた記事

- React開発やりたいけど、TypescriptとかLintの設定がイイカンジに設定されてるプロジェクトテンプレートがほしい人
- Redux、Redux-Sagaとか、そろそろいらないんじゃ？ってことでHookで書いたらどうなるのかななめ読みで知りたい人

## やったこと

TODOアプリを作った

### 触れるサンプル:GitHub.io
https://ytokuyoshi.github.io/react-typescript-todo/

### ソース:GitHub
https://github.com/ytokuyoshi/react-typescript-todo

## ポイント解説

### useResource
hookを別ファイルに書けます。これにより、JSXとロジックを分割することができます。

### 非同期処理 async/await
脱Redux-Sagaのため、async/await を利用します。

今回はサンプル実装のため、いろいろ足りていません。業務用などで使うなら、エラーハンドリングなどを共通メソッド化してそちらで集約してアレコレやるといいです。

### stateの永続化
今回はlocalStorageを利用しています。

ログイン情報（ログインAPIなどでを外部サーバ化した場合のIDなど）はサーバ側でCookie利用しましょう。ローカルデータはセキュリティがザルってことを忘れてはいけない。

## 番外編：おすすめしないこと

というか、とある現場で遭遇したバグの愚痴。ある意味で実体験に基づくアンチパターン集

### anyだらけ
Typescriptを全否定する攻め？のスタイル。

### Lintエラー放置
4桁のエラーがあったりすると、放置しちゃいけないエラーも無視することになる。

### でかいソース
目的のコードを探すため、延々とソース追いかけるはめになる。経験則的に600行以上は分割対象。

### デフォルト値がtrueを期待するboolean
イラっとします。そんでもって初期化忘れて画面ぐちゃぐちゃ。

### useMemoは、基本やめとけ
裏の値と画面表示が一致しないとかの、やべーバグを修正させられるこっちの身にもなって。
フレームワークなし、.htaccessとPHPでURLルーティングする

#フレームワークを使わずに以下のルーティングを使って自作したサイトたち
自作SNS
https://test.nieru.net/
ユーザーページサンプル
https://test.nieru.net/admin
https://test.nieru.net/nieru
(利用者募集しております。)

無料レンタル掲示板サイト
https://nieru.net/ 
掲示板活用サンプル
- https://nieru.net/sample
- https://nieru.net/vip
- https://nieru.net/atbs


#フレームワークなし、.htaccessとPHPでURLルーティングする
フレームワーク使わないルーティングはこれでいいよねって思ったので書いてみる
## フォルダ構成
ルート
┣ index.php
┣ .htaccess
┗ show
　　┗ main.html
## .htaccess

```
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>
```
5行目の
```RewriteRule ^(.*)$ index.php/$1 [L]```が重要
これを記載すればとりあえずどんなURLでも最初のindex.phpにアクセスさせる・・・らしい。
違ったらごめんなさい。
##index.php
```
<?php
    $path = explode("/",$_SERVER["PATH_INFO"]);
?>
```
これで現在のURLのディレクトリを配列で取得出来る。
`https://example.com/test/hello/bay`にアクセスしている場合
$pathの中は
```Array ( [0] => [1] => test [2] => hello [3] => bay )```
となっている。

##show/main.html
```
こちらはコンテンツです。
```
ブラウザに表示する文字を書きます。
ではURLが`https://example.com/contents`の時、`show/main.html`を表示させてみる。
## コードを追加
index.php

```
<?php
    $path = explode("/",$_SERVER["PATH_INFO"]);
    switch($path[1]) {
        case "contents": include "show/main.html"; break;
    }
?>
```
`https://example.com/contents`にアクセスすると
`こちらはコンテンツです。`と表示されます。

`$path[1]`がcontentsなら、つまりURLのディレクトリの1番目がcontentsなら`show/main.html`をincludeします。
なので`https://example.com/contents/hello`でも`show/main.html`がincludeされブラウザに`こちらはコンテンツです。`と表示されます。

## https&#58;//example.com/contents/helloの場合表示させない
index.php

```
<?php
    $path = explode("/",$_SERVER["PATH_INFO"]);

    switch($path[2]) {
        default: exit();
    }

    switch($path[1]) {
        case "contents": include "show/main.html"; break;       
    }
?>
```
上記の場合はURLのディレクトリが2階層以上の場合exit()により処理が止まります。
`if($path[1] === "contents") {} `などでいろいろ条件分岐出来ると思います。
##おまけ
ルートのindex.phpで動かしてるのでshow/main.htmlに書いたPHPのコードも動きます。

#フレームワークを使わずに以下のルーティングを使って自作したサイトたち
自作SNS
https://test.nieru.net/
ユーザーページサンプル
https://test.nieru.net/admin
https://test.nieru.net/nieru
(利用者募集しております。)

無料レンタル掲示板サイト
https://nieru.net/ 
掲示板活用サンプル
- https://nieru.net/sample
- https://nieru.net/vip
- https://nieru.net/atbs
POWERSHELL リストの名前を含むファイルをコピー

ファイルの構成
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614609/7b7e9f93-9388-7462-9d36-2028c16fc0db.jpeg)


```powershell
$getlist = (Get-Content \searchlist.txt) -as [string[]]

foreach ($word in $getlist) {
    $list = "*" + $word +"*"
    $link = "\findfolder\"
    $file = $link + $list
    if(Test-Path $file)
    {
        Write-Host "見つかったワード：" $word
        Write-Host "コピーして移動しました：" $word
    }
    else
    {
        Write-Host "見つからなかったワード：" $word
        Write-Output $word | Out-File -Append "\folderreadcopy\out.txt"
    }
}



# 処理対象のフォルダ
$targetFolder = "\findfolder"

# コピー先のフォルダ
$destinationPath = "\copyfolder"
 
# $targetFolder内のファイル・フォルダのリストを取得する。
$itemList = Get-ChildItem $targetFolder;
foreach($item in $itemList)
{
    
    if($item.PSIsContainer)
    {
        # フォルダの場合の処理
        Write-Host ($item.Name + 'はフォルダです。'); 
    }
    else
    {
        # ファイルの場合の処理
        # 拡張子を除いたファイル名を$str_file_name_without_extここにいれる
        $str_file_name_without_ext = [System.IO.Path]::GetFileNameWithoutExtension($item);
        Write-Host ($str_file_name_without_ext + 'はファイルです。'); 
        # $fileにin.txtにあるリストをすべて代入
        $file = (Get-Content \searchlist.txt) -as [string[]]
        # $str_file_name_without_extに$fileのリストの文字が含まれていればtrue含まれていない場合はfalse
        foreach ($l in $file) 
        {
            if($str_file_name_without_ext.Contains($l))
            {
                $copymoto = "\findfolder\" + $item
                Copy-Item -Path $copymoto -Destination $destinationPath
            }

            
        }
        
    }
} 


```
Terminalの背景色を ssh 接続先に合わせて変更する自作コマンド

# 概要

本番環境に ssh 接続した後、ローカル環境と間違えて誤ったコマンドを打たないように Terminal の背景色を動的に変更する

# 設定

１． `~/bin` ディレクトリを作成する
２． `~/.zprofile` に `export PATH="$HOME/bin:$PATH"` を追加する
３． `~/bin/sshh` ファイルを作成し以下記載

```sh:sshh
#!/bin/bash

set_term_bgcolor(){
  local R=$1
  local G=$2
  local B=$3
  /usr/bin/osascript <<EOF
tell application "iTerm"
  tell the current window
    tell the current session
      set background color to {$(($R*65535/255)), $(($G*65535/255)), $(($B*65535/255))}
    end tell
  end tell
end tell
EOF
}

function tab-reset() {
   NAME="Default"
   echo -e "\033]50;SetProfile=$NAME\a"
}

trap "tab-reset" INT EXIT # exitで背景色を戻す
if [[ "$2" == prd ]]; then
  set_term_bgcolor 100 0 0
elif [[ "$2" == stg ]]; then
  set_term_bgcolor 0 0 100
else
  set_term_bgcolor 0 100 0
fi

ssh $1
```
４． `$ chmod 755 ~/bin/sshh` で実行権限を付与

# 使い方

`$ sshh [sshの引数] [prd または stg または 引数なし]`

```sh
# production 環境に接続（背景色が赤）
$ sshh xxxx@xxxx prd

# staging 環境に接続（背景色が青）
$ sshh xxxx@xxxx stg

# その他（背景色が緑）
$ sshh xxxx@xxxx
```
Davinci Resolve で 透過png の連番画像を書き出す方法

日本語での説明が無かったため、備忘録として綴っておきます。

詳しくは[こちら](https://techvideostack.com/transparent-background-fusion-clip-export-in-davinci-resolve-16/)に動画付きの説明があります。

要約すると、

###1. 書き出したいクリップの Fusion にて、ノードの最後に 「Saver」を追加し、

###2. 「Inspector」でファイルの保存先の指定「Browse」から、「.png」 としてファイル名を指定し、

###3. 「Inspector」上の「Export」の「save alpha to Color」のチェックを「外し」ます（これをしないと、色が無い画像で出力されてしまいます）

###4. 画面上部のタブ、「Fusion」から、「Render All Fusions」を選択することです。


以上になります。
Railsでsessionによるwhere検索を行うときの注意点

# 障害内容
コントローラのある1つのアクション内でsessionを利用後にデータを削除するような処理を想定して、下記コードを書いたとする

```ruby:hoge_controller.rb
def action
  # イメージ的には検索処理のような感じ
  # category_idはInteger型でDBに登録されている
  @lists = Book.where(category_id: session[:category_id])
  session[:category_id].clear
end
```

上記のコードでは`Book`モデルからデータを取得することはできない
実際に発行されているSQLも
`SELECT * FROM books WHERE category_id = ''`
のような形で出力されることが確認できるはず

通常、Railsで定義される変数類は先行評価の形式をとっているため、
例えwhere検索等の遅延評価系メソッドの後に値を`nil`にしても正しくデータを取得することができる

反対に、[sessionは基本的に遅延評価であるため](https://railsguides.jp/action_controller_overview.html#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B)遅延評価系メソッドで使用した後にsessionの中身をクリアするとデータの取得ができなくなってしまう

# 解消方法

今回の例ではwhere検索であるため、それを先行評価メソッドにしてしまえば問題ない

```ruby:hoge_controller.rb(whereの先行評価ver)
def action
  # SQLを直書きする
  @lists = Book.where('category_id = :id', id: session[:category_id])
  session[:category_id].clear

  # take、firstなどで即時発行させる
  @lists = Book.where(category_id: session[:category_id]).take
  @lists = Book.where(category_id: session[:category_id]).first
  session[:category_id].clear
end

  # to_aなどで変換を行う(ActiveRecord::Relationクラスではなくなるため要注意)
  @lists = Book.where(category_id: session[:category_id]).to_a
  session[:category_id].clear
end
```

また、それとは逆にsessionの値を`dup`でコピーするなど、sessionとは別で保持させることでも解消できる
格納させるときには`id = session[:category_id]`のように代入で行わないようにさえすれば大体何とかなる(代入は結局のところメモリ参照のため、参照先が変われば代入された変数の値も変化する)

# 参考記事
* [ActiveRecord各メソッドのクエリ実行タイミングについて](https://qiita.com/ykamez/items/0c81a33ec1b90219d541)
  * ActiveRecordクラスのメソッドについて、詳しい解説が載っています
テックブログまとめ

#企業のテックブログまとめました
https://tech.andpad.co.jp/entry/2021/04/16/104326

https://techlife.cookpad.com

https://buildersbox.corp-sansan.com/entry/2020/12/24/110000

https://speakerdeck.com/yujif/iosdc-japan-2020-day-2-cookpad?slide=33



随時追加予定
イニシャライザの基本

#はじめに

```.swift
class DataEntity {
  let id: Int
  let name: String
  let age: Int

  init(id: Int, name: String, age: Int){
    self.id = id
    self.name = name
    self.age = age
  }
}
```

こんなのよく目にしますよね。これは一体何をしてるのかっていうことを簡単に説明します。
気持ち的には、インスタンス毎に固有の値を初期値として持たせたい時に使う感じだと思います。classの雛形に則ってインスタンスを生成し、その中身（プロパティ）の値はイニシャライザで与えます。

```.swift
let data1 = DataEntity(id: 1, name: "Taro", age: 20)
let data2 = DataEntity(id: 2, name: "Hanako", age: 20)
```

こんな感じです。

要すると、イニシャライザとは__インスタンス生成時にプロパティに値を与えるための関数__です（って言って差し支えないと思います）。

こんな流れで解説していきます。

#イニシャライザ
上のサンプルコードで使い方はざっくりわかったと思うので、もう少し細かく見てみましょう。

```.swift
init(id: Int, name: String, age: Int){
    self.id = id
    self.name = name
    self.age = age
}
```

初見だとなんか書き方がよくわからないですね。ですが分かってしまえば大したことはないです。（多分）

`self`キーワードは__インスタンスに型の内部からアクセスする時に使います__。
![スクリーンショット 2021-05-31 0.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1222455/f8a7a730-194a-fad1-588a-3e4a4a4132d6.png)
なので、やってることは

```.swift
self.id = id という式は data.id = 1 ってしてるようなものです
```

つまり、__インスタンスのプロパティにinitの引数を代入している__ということです。
文字通り初期値を入れて初期化してるわけです。

大分しつこく解説してしまいましたがやってることはシンプルなのです。

終わり