OmniAICreator/Qiita-1.07M huggingface dataset:
RailsでAPIを作ってみた（前編）

こんにちは！モリタケンタロウです！
今回はRuby on RailsでAPIを作る方法について紹介します。

後編は↓

* [RailsでAPIを作ってみた（後編）](https://qiita.com/MORITAKENTARO/items/8cf03f876907a9b15530)


# 開発環境
* ruby 2.6.3p62
* Rails 5.0.7.2

# Let's Try Anyway
今回はひとまず、コントローラーの作成とルーティングの設定を行います。

## APIモードでRailsアプリを作成
今回はAPIモードでRailsのアプリを作ります。
Ruby on Railsで普通にアプリを作ろうとすると、MVCモデルを前提に色々と部品を用意してくれますが、APIモードで作成することで、ViewとかAPIに要らないものを除いた最小構成でアプリを作ることができます。

```bash
rails new rails_app -d mysql --api
```

ちなみにDBはMySQLを採用しています。
※何かとエラーが出た場合は↓を試してみてください。

```bash
sudo yum install mysql-devel
gem install mysql2
```
参考：[AWS Cloud9でRuby on Railsを動かしてみた（MySQL編）](https://qiita.com/MORITAKENTARO/items/ab6f1b9a7c356409f1da)

## コントローラーを作成
無事にアプリが作成できたら次にコントローラーを作ります。

```bash
$ rails g controller contents
```
コマンドを実行すると、`app/controllers/contents_controller.rb`というファイルができます。
このファイルをひとまず↓のように編集します。

```Ruby:app/controllers/contents_controller.rb
class ContentsController < ApplicationController
    
    def index
        render json: { action: action_name }
    end
    
    def create
        render json: { action: action_name }
    end
    
    def show
        render json: { action: action_name }
    end
    
    def update
        render json: { action: action_name }
    end
    
    def destroy
        render json: { action: action_name }
    end
    
end
```
まずは、アクション名を返すだけの処理です。

## ルーティングの設定
各アクションのURLを定義するために、ルーティングの設定をします。

```Ruby:config/routes.rb
Rails.application.routes.draw do
  resources :contents
end
```
これを一行書くだけで、APIモードのアプリでは、index、create、show、update、destroyの5つのアクションに紐づくルーティングが設定されるようです。
参考：[Rails のルーティング](https://railsguides.jp/routing.html)

念のため、`rake routes`コマンドで確認してみます。

```Bash
$ rake routes
  Prefix Verb   URI Pattern             Controller#Action
contents GET    /contents(.:format)     contents#index
         POST   /contents(.:format)     contents#create
 content GET    /contents/:id(.:format) contents#show
         PATCH  /contents/:id(.:format) contents#update
         PUT    /contents/:id(.:format) contents#update
         DELETE /contents/:id(.:format) contents#destroy
```
ちゃんとルーティングの設定ができているようです。

## 動作確認
それでは、早速APIの動きを確かめてみます。
まずはアプリ諸々立ち上げます。

```Bash
$ sudo service mysqld start #　MySQLのDB起動
$ rails db:create # DB作成
$ rails s -p 3001 # アプリ起動(3001番ポート使用)
```

`curl`コマンドでAPIの動作確認をしてみます。

```Bash
$ curl -G  http://localhost:3001/contents
# {"action":"index"}

$ curl -XPOST  http://localhost:3001/contents
# {"action":"create"}

$ curl -XPUT  http://localhost:3001/contents/id
# {"action":"update"}

$ curl -XPATCH  http://localhost:3001/contents/id
# {"action":"update"}

$ curl -XDELETE  http://localhost:3001/contents/id
# {"action":"destroy"}
```
ちゃんと期待した通りのアクション名が返ってきています。
今回は一旦ここまでで、[次回](https://qiita.com/MORITAKENTARO/items/8cf03f876907a9b15530)はモデルと連携してCRUD処理の動きを確認してみようと思います。
それでは～

* [RailsでAPIを作ってみた（後編）](https://qiita.com/MORITAKENTARO/items/8cf03f876907a9b15530)
Yii1.1でCInlineFilterを使ってControllerにフィルター処理を実装する


## はじめに
WebアプリケーションのMVCフレームワークだと、各コントローラーのアクションの実行前後で、共通処理を行う場面がよくある。
この場合は下記のように、フレームワーク側で専用のライフサイクルメソッドが提供されていることが多いだろう。

* beforeAction
* afterRender

Yiiの場合も上記のようなメソッドは存在しますが、
それとは別に、フィルターという機能で、フィルタリンング処理を行う事が可能だ。
今回はControllerクラスでフィルターの機能の実装例を紹介する。

## Yiiとフィルター
その前にどのような仕組みでこのフィルター機能が各コントローラーのアクションの前後で実行されているかを説明する。
Yii1.1.には[CFilter](https://www.yiiframework.com/doc/api/1.1/CFilter) クラスとがあり、このクラスを継承したサブクラスとして、以下が提供されている。

* [CAccessControlFilter](https://www.yiiframework.com/doc/api/1.1/CAccessControlFilter)
* [CHttpCacheFilter](https://www.yiiframework.com/doc/api/1.1/CHttpCacheFilter)
* [CInlineFilter](https://www.yiiframework.com/doc/api/1.1/CInlineFilter)

これらのクラスは各コントローラーのfiltersメソッドで指定する。
指定されたフィルタークラスは[CFilterChain](https://www.yiiframework.com/doc/api/1.1/CFilterChain)クラスでスタックされ、各コントローラーのアクションの前後で順次実行される。
今回はこの中から、CInlineFilterを利用してコントローラークラスにフィルターを実装した例を下記にコード付きで解説する。


## 実装例
対象のControllerクラスで以下のように実装する。
以下はアカウントチェック処理をフィルターで実装した例である。

```TopController.php
class TopController extends CController
{
    public function filters()
    {
        return ['CheckAccount']; // (1)
    }
    
    // (2)
    public function filterCheckAccount(CFilterChain $filterChain) 
    {
        // @ToDo アカウントチェック処理のフィルター処理を実行
        $filterChain->run(); // (3)
    }
}
```

ポイントは以下の3点である。

(1) 対象のControllerクラスのfiltersメソッドにフィルター名を定義
(2) `filter + (1)で追加したフィルター名`のメソッドを定義し、フィルター処理を実装
(3) (2)で実装したメソッドの引数でCFilterChain::runを実行する

Controllerクラスのfiltersメソッドでは以下のように+/-を使用して、フィルターを適用/除外の指定も可能だ。
以下はcreate/editアクションのみにフィルターを適用する場合の実装例である。

```
class TopController extends CController
{
    public function filters()
    {
        return ['CheckAccount + create, edit'];
    }
    
    ...
    
    public function actionIndex()
    {
    }
    
    public function actionCreate()
    {
    } 
    
    public function actionEdit()
    {
    } 
}
```


## 参考
* [Yiiのコントローラーのフィルターについて](https://www.yiiframework.com/doc/guide/1.1/ja/basics.controller#sec-5)
* [CInlineFilter](https://www.yiiframework.com/doc/api/1.1/CInlineFilter)
* [CFilter](https://www.yiiframework.com/doc/api/1.1/CFilter)
* [CFilterChain](https://www.yiiframework.com/doc/api/1.1/CFilterChain)
P5.js 日本語リファレンス(windowHeight)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の windowHeight関数を説明します。

## windowHeight

### 説明文

ブラウザなどのウィンドウの高さを格納するシステム変数で、window.innerHeight に相当します。

### 構文

windowHeight

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Swift:多次元配列の備忘録

##バージョン

・Xcode11.4.1
・Swift5

##概要
多次元配列を使用する宣言

##コード

```swift:test.swift
var Image:[[String]] = [["bananaUp", "bananaDown"], ["cadaverUp", "cadaverDown"]]
```

##参考にさせて頂いた記事
[Swift 多次元配列の宣言、追加、削除について　備忘録](https://qiita.com/akidon0000/items/80421c62ee16c59599ad)
[[Swift]多次元配列の宣言の仕方](https://qiita.com/naoyashiga/items/55fd2888e3774e1ac8c4)
P5.js 日本語リファレンス(windowWidth)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の windowWidth関数を説明します。

## windowWidth

### 説明文

ブラウザなどのウィンドウの幅を格納するシステム変数。window.innerWidth に相当します。

### 構文

windowWidth


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
お絵かきできるSNSを作りたい！5

お久しぶりです。

今回はUI部分を整えていこうと思います。
取り立てて難しい事をしないのでダイジェストです。

背景を水色にしました。

```css:
body {
	background-color:#BFE3F5;
}
```

CANVASの背景を透明から白色に。

```css:
#canvas {
	background-color:#FFF;
}
```


カラーパレッドも追加します。

```html:
<table id="palette_colors">
<tr>
<td id="color_1" class="active" onClick="Color(this);"></td>
<td id="color_2" onClick="Color(this);"></td>
<td id="color_3" onClick="Color(this);"></td>
<td id="color_4" onClick="Color(this);"></td>
<td id="color_5" onClick="Color(this);"></td>
</tr>
<tr>
<td id="color_6" onClick="Color(this);"></td>
<td id="color_7" onClick="Color(this);"></td>
<td id="color_8" onClick="Color(this);"></td>
<td id="color_9" onClick="Color(this);"></td>
<td id="color_10" onClick="Color(this);"></td>
</tr>
<tr>
<td id="color_11" onClick="Color(this);"></td>
<td id="color_12" onClick="Color(this);"></td>
<td id="color_13" onClick="Color(this);"></td>
<td id="color_14" onClick="Color(this);"></td>
<td id="color_15" onClick="Color(this);"></td>
</tr>
</table>
```

選択中の色を分かりやすくするためクリックイベントを追加しました。

```javascript:
//カラー設定用変数（デフォルトは黒）
var strColor="#000000";

//カラー選択関数
function Color(obj){
	for ( i = 1; i <= 15; i++ ) {
		id_name = "color_" + i;
		if (id_name == obj.id){
			document.getElementById(id_name).classList.add('active');
		} else {
			document.getElementById(id_name).classList.remove('active');
		}
	}
}
```

完成です。キャンパスサイズも大きくしました！
次回は今回作ったボタンやパレットをキャンバスに反映させていきます。

次：[お絵かきできるSNSを作りたい！6](https://qiita.com/cardcapt/items/0a323d0916c1c0f905dc)
最初：[お絵かきできるSNSを作りたい！](https://qiita.com/cardcapt/items/d15fedf80d336f6b4bb9)
ヤコビアン、多項分布

# はじめに
　久保川達也氏著「現代数理統計学の基礎」の4章を勉強していて、私が個人的に気になったところである
・ヤコビアン
・多項分布
について説明します。

# ヤコビアン
　$ $
　ヤコビアンは、変数変換をして(異なる座標系を考えて)積分するときに出てくることが多いです。例えば２次元極座標系から直交座標系に座標系を変換する場合、極座標系での微小面積は$rdrd\theta$と近似できて、直交座標系での微小面積は$dxdy$で、$$\iint f(x,y) dxdy=\iint f(r,\theta) rdrd\theta$$とし、３重積分の場合は$$\iiint f(x,y,z) dxdydz=\iiint f(r,\theta,\phi) r^2\sin \theta drd\theta d\phi$$として計算すると思います。実はこのときの$r$や$r^2\sin \theta$がヤコビアンというものです。私はヤコビ行列式をヤコビアンと呼んでいて、それは
$$|J|=|\frac{\partial (x,y,z)}{\partial (r,\theta,\phi)}|$$と表されます（左右の｜｜は分数全体にかかります）。行列式の中身は、変数$r,\theta,\phi$が増加したときに直交座標系ではどの方向に増加するように見えるかを表すベクトルです。それらの変化を表すベクトルに挟まれた図形の大きさがヤコビアン、つまり２次元だと平行四辺形の面積、３次元だと平行六面体の体積を表していることになります。ヤコビアンを拡大率と考えることもできます。$$dxdydz=r^2\sin \theta drd\theta d\phi$$と等号でつないでもそれぞれの微小体積の大きさは全く関係がないので、積分記号も含んで等号で結んだほうが良いと思います。

# 多項分布
$ $　
　１変量や２変量の確率分布を一般化したものが多変数の確率分布で、多変数の場合の方が現実的で使用例も多いです。では多項分布は何を一般化したものかというと、例えば２項分布を一般化したものです。二項分布はコインを例にして考えることができました。１枚のコインには'裏'と'表'の二つの面があり、それぞれが出る確率を$p_1,p_2$とすると$p_1=0.5,p_2=0.5$で、コインを$n$回投げたとき確率変数$X$を'表が出る回数'として一次元の確率関数で表すことができました。これを一般化するために、サイコロを例にして考えます。$k$個の面からなるサイコロを$n$回投げて１から$k$の面が出る回数をそれぞれ$X_1,X_2,...,X_k$とするとき、$(X_1,X_2,...,X_k)$が従う分布が多項分布となります。このとき、$$X_1+X_2+...+X_k=n$$$$p_1+p_2+...+p_k=1$$です。コインは$k=2$の場合であることが分かります。定義を引用しますと、

> (X_1,...,X_k)の(x_1,...,x_k)における同時確率関数が$$f_{1,...,k}(x_1,...,x_k|n,p_1,...,p_{k-1})=\frac{n!}{x_1!\cdot\cdot\cdot x_k!}p_1^{x_1}\cdot\cdot\cdot p_k^{x_k}$$となる形で与えられるとき、これを多項分布といい、$Multin_k(n,p_1,...,p_k)$で表す。

同時確率関数とは、すべての確率変数を固定（例:$1\le x_1 \le 3$ ）せずに考える確率関数という意味です。多項定理を用いてこれを積分すると１になることから正当性が確かめられます。コインは２次元ではないのかと思われるかもしれません。実際には２次元ですが、$X_2=n-X_1,\ p_2=1-p_1$と表せるので一次元の確率関数で表せます。

# 参考文献
「現代数理統計学の基礎」久保川達也氏著
ガチャのデータ設計-基本的構造１-

#内容
ガチャの基本的なデータ構造を考えてみます。

ガチャのデータ構造については、こちらも参照ください
> [Pythonで書くガチャ-データ設計-](https://qiita.com/saib-ryo/items/1309c4c94d9f6629ba6d)

##必要なデータの種類
ゲームにおけるガチャの位置づけは、**アイテムを入手する手段**になります。
よって、基本構成としてガチャに必要なデータの種類は、**ガチャ情報**と**アイテム情報**になります。

ガチャを行う際の最終的なデータ構造は、*[こちら](https://qiita.com/saib-ryo/items/1309c4c94d9f6629ba6d#ガチャに必要なデータ要素)*のようになりますが、アイテムはガチャからは独立したゲームデータとして扱いたいので情報の管理は別々にして、ガチャ情報にアイテム情報のIDを持たせる形で、データの関係性を設定することにします

##アイテム情報
ガチャ情報が参照するアイテムを管理します。
名前はもちろんですが、レアリティはアイテムに設定されている項目になります。
ゲームらしく、属性（item_type）とHPも付け加えてみました。

**items**

|  id | rarity |   item_name    |item_type|  HP  |
|:---:|:------:|:--------------:|:-------:|:----:|
| 5101  |   5    |   UR_勇者      | 1 | 1200 |
| 4201  |   4    |   SSR_戦士     | 2  | 1000 |
| 4301  |   4    |   SSR_魔法使い  | 3  | 800  |
| 4401  |   4    |   SSR_神官     | 4  | 800  |
| 3201  |   3    |   SR_戦士      | 2  | 600 |
| 3301  |   3    |   SR_魔法使い   | 3  | 500 |
| 3401  |   3    |   SR_神官      | 4  | 500 |
| 2201  |   2    |   R_戦士       | 2  | 400 |
| 2301  |   2    |   R_魔法使い    | 3  | 300 |
| 2401  |   2    |   R_神官       | 4  | 300 |
| 3199  |   3    |   SR_勇者      | 1  | 600 |

### レアリティ設定
レアリティIDに対応した名称を管理します。
**rarity**

|  id |  rarity_name      |
|:---:|:---------------------:|
|  5  |  UR  |
|  4  |  SSR |
|  3  |  SR  |
|  2  |  R   |
|  1  |  N   |

### アイテム属性設定
アイテム属性IDに対応した名称とスキルを管理します。
**item_type**

|  id |  name    | skill    |
|:---:|:--------:|:--------:|
|  1  |  Brave   | Bless |
|  2  |  Fighter | Attack |
|  3  |  Wizard  | Sorcery |
|  4  |  Priest   | Heal |

##ガチャ情報
### ガチャアイテム確率情報
アイテム毎の確率を設定するために**ガチャアイテム確率情報**が必要になります。
**item_id**という項目によって、アイテム情報の**id**と紐付けされています。

**gacha_items**

|  id | weight | item_id |
|:---:|:----:|:------:|
|  1  |  1   |  5101   |
|  2  |  9   |  4201    |
|  3  |  9   |  4301    |
|  4  |  9   |  4401    |
|  5  |  20  |  3201    |
|  6  |  20  |  3301    |
|  7  |  20  |  3401    |
|  8  |  40  |  2201    |
|  9  |  40  |  2301    |
|  10 |  40  |  2401    |

#####補足
レアリティを指定したガチャを行いたい場合は、ガチャアイテム確率情報のitem_idからアイテム情報を参照し、そのレアリティを用いて抽選対象に含めるかの判定を行います

###ガチャ抽選情報
1回（単数）ガチャと11連ガチャ（10回+おまけ１回）の抽選の設定を管理します。
ガチャを実行する際には、このidを指定することにより引き方を区別します。

- times：抽選回数
- omake_rarity：おまけのレアリティ確定以上（0の場合は、おまけなし）
- cost：ガチャを行う際に必要なゲーム通貨消費量
 
**gacha_lottery**

|  id | times | omake_rarity | cost |
|:---:|:----:|:------:|:------:|
|  1  |  1   |  0    | 10 |
|  2  |  10  |  3    | 100 |


##まとめ（基本的構造１）
**ガチャ情報**と**アイテム情報**によってガチャを行うための必要な情報は揃いました。
[基本的構造２](https://qiita.com/saib-ryo/private/c1b7837fe04022b6864d)では、これを拡張した形を解説します
Pythonのウェブプログラミング記事まとめ

# はじめに

私がQiitaに投稿したPythonのウェブプログラミングに関連する記事のまとめです。
今後もPythonのウェブプログラミングに関する記事を追加していくごとに、こちらのまとめも更新していきます。


# Flask

- [初期設定](https://qiita.com/yukiya285/items/024ce8acefeea55374e2)
- [データベース](https://qiita.com/yukiya285/items/b8857c3fee1657973c89)
- [アプリケーション](https://qiita.com/yukiya285/items/7ddcea565b04bce06f3b)
- [HTMLテンプレート](https://qiita.com/yukiya285/items/e2aa24be36fbe680c76f)


# Django

- [初期設定](https://qiita.com/yukiya285/items/90f1c0d0982b94edb4c5)
- [モデル](https://qiita.com/yukiya285/items/327d440910d7a8307562)
- [フォーム](https://qiita.com/yukiya285/items/e7bb77c88af727108c98)
- [クラスベースビュー](https://qiita.com/yukiya285/items/ac66ad7389610db753d4)
- [関数ベースビュー](https://qiita.com/yukiya285/items/32fb96c1bd760b594974)
- [ルーティング](https://qiita.com/yukiya285/items/fb9c3457925e0fbf84d5)
- [HTMLテンプレート](https://qiita.com/yukiya285/items/8786a6fc98e717808e5f)
Rubyの環境構築

# 新規アプリ作成

#Homebrewのインストール
[macOS用パッケージマネージャー — Homebrew](https://brew.sh/index_ja.html)

#Homebrewのバージョン確認

```
brew -v
```

#rbenv ruby-buildのインストール

```
brew install rbenv ruby-build
```

#rbenvのバージョン確認

```
rbenv -v
```

#rbenvの設定

```
$ echo $SHELL
```

↑の実行結果に応じて次のコマンドが変わる。

実行結果が /bin/bash の場合、以下のコマンド

```
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

実行結果が /bin/zsh の場合、以下のコマンド

```
$ echo 'eval "$(rbenv init -)"' >>  ~/.zshrc
$ source ~/.zshrc
```

#インストール可能なRubyのバージョン一覧を表示

```
rbenv install --list
```

#最新のやつをインストール

このときは

```
rbenv install 2.6.5
```

#現在インストールされている Ruby を一覧で確認

```
rbenv versions
```

#使用するバージョンのRubyを指定

```
rbenv global 2.6.5
```

#Rubyのバージョンを確認

```
ruby -v
```

#Ruby on Railsをインストール

```
gem install rails -v "5.2.4.1"
```

#Railsのバージョンを確認

```
rails -v
```

これで環境構築は完了！！
P5.js 日本語リファレンス(displayHeight)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の displayHeight関数を説明します。

## displayHeight

### 説明文

デフォルトの pixelDensity に従って画面表示の高さを格納するシステム変数。 これは任意のディスプレイサイズで全画面プログラムを実行するために使用されます。 実際の画面サイズを返すには、これに pixelDensity を掛けます。

### 構文

displayHeight


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(displayWidth)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の displayWidth関数を説明します。

## displayWidth

### 説明文

デフォルトの pixelDensity に従って画面表示の幅を格納するシステム変数。 これは任意のディスプレイサイズで全画面プログラムを実行するために使用されます。 実際の画面サイズを返すには、これに pixelDensity を掛けます。

### 構文

displayWidth


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Android Studio のインストールと日本語化とエミュレータ起動まで

Mac で Android Studio のインストールと日本語化とエミュレータ起動までの手順です。

# 手順

<table border=0>
<tr>
<td width=60%><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/b9032500-ffb1-d323-4986-b2ce2944012a.png'>
<td><a href=https://developer.android.com/studio>https://developer.android.com/studio</a>
<br>Android Studio をダウンロードします

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/ac3697a0-db42-7948-d3d7-f4e1ede92e94.png'>
<td><a href=https://mergedoc.osdn.jp>https://mergedoc.osdn.jp</a>
<br>ページを少し下にスクロールします
<br>pleiades-mac.zip をDLします
<br>DLした setup.app を実行します
<br>エラーが出るときは、右クリックで開くです

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/86c9d6ff-eee1-0556-ee87-d55c51c0feb3.png'>
<td>[選択]でインストールした Android Studio を選びます

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/5dd38d22-5de9-2d2c-be27-b204e851c7fd.png'>
<td>Android Studio を起動します
<br>（日本語化されています）

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/4fae02d9-557a-7514-b87d-61149643619b.png'>
<td>適当なサンプルを選びます
<br>（カメラアプリを選びました）

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/6a48587d-0758-ab2e-d769-f8dae574c6ce.png'>
<td>Android Studio を起動します

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/fcfcc4df-eadb-36b5-63cf-78f32792d959.png'>
<td>エミュレータの準備
<br>[ツール][ADV マネージャー]を起動します
<br>（ADV = Android 仮想デバイス）
<br>

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/eb70ac9e-9fe1-158e-a89c-bbb96a3b1988.png'>
<td>適当なデバイスを選びます

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/42c4d868-c0f8-3aeb-8a12-e2fc2b0fe9d9.png'>
<td>実行します
<br>バージョンエラーが出るとき
<br>[ファイル][プロジェクト構成]でバージョンを選びます

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/86606bf8-0768-b51d-1abb-a9433963559b.png'>
<td>起動できました（カメラの場合はダミーが表示されます）
</table>

# トラブルシューティング

<table border=0>
<tr>
<td width=60%><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/9a21da95-0439-5d36-e12c-76a2f3b3cacc.png'>
<td>エミュレータでGoogleマークが出ないとき
<br>[ツール][SDKマネージャー][AndroidSDK]で
タブを切り替えて "SDKツール" 
で "Android Emulator" にチェックします

<tr>
<td><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/54e277a1-f6bc-a038-9f0d-ea7f59aa6fa7.png'>
<td>実機でやりたいのに、利用可能なデバイスに出てこないとき
<br>実機の[設定][タブレット情報][ビルド番号]を<b>7回タップします</b>（開発者向けオプションが表示されます）
[開発者向けオプション][USBデバック]を有効にします（機種によって違います）
</table>

# まとめ
Mac で Android Studio のインストールを行いました。以前 Windows に入れたときはものすごく苦労したのですが、今回 Mac だと１時間程度でした。やはりトラブルシューティングは経験を反復しないと身につかないです。
VScodeのCode-runnerでverilogの環境を作る

# 環境
Windows10

# 動機
授業でハードウェア記述言語のVerilogを扱うとのことで、VSCodeをIDEにしたいと考えました。

# ディレクトリ構造とファイル

root/
  └ test.v

```test.v
module AND(
  a, b, x
);

  input a, b;
  output x;

  assign x = a & b;

endmodule // AND

module Test();
  reg a, b;
  wire [0:0] out;

  initial begin
    a = 0;    b = 0;
    $dumpfile("test.vcd");
    $dumpvars(0);
    $monitor("%t: a = %b, b = %b, x = %b", $time, a, b, out);

    #10
      a = 1;
    #10
      b = 1;
    #10
      a = 0;
    #10
      $finish;

  end

  AND ad (a, b, out);

endmodule // Test
```

AND演算だけする素子とテストです。
  
# 方法
※ iverilog等のコンパイラはインストールされていて、パスが通っているものとします。

## 1. 必要なVSCodeの拡張機能をインストール
+ Verilog HDL/SystemVerilog
+ Code Runner

## 2. setting.jsonで設定します
※Code Runnerはデフォルトではverilogに対応していないため、以下のような記述をjson中に追加します。
設定の詳細は自分の別記事、[Code Runnerを使いこなす](https://qiita.com/take_me/items/6a1d2d417889837219d1)をご覧ください。

```setting.json
"code-runner.languageIdToFileExtensionMap": {
	"verilog": ".v"
},
"code-runner.executorMap": {
	"verilog": "cd $dir && iverilog $fileName && vvp a.out"
},
// ここから下はお好みで
"code-runner.clearPreviousOutput": true,
"code-runner.runInTerminal": true
```

一つ目の `code-runner.languageIdToFileExtensionMap` は恐らく拡張子を言語に対応させる設定です。
二つ目の `code-runner.executorMap` は言語ごとに実行するコマンドです。
*.v*ファイル を 言語ID *verilog* に対応させたのち、実行時には*verilog*のコマンドを呼び出しています。でも拡張子から実行するコマンドを決める方法もあるので、そっちの方が完結かもしれません。[Code Runnerを使いこなす#ファイルの拡張子から実行コマンドを指定する](https://qiita.com/take_me/items/6a1d2d417889837219d1/#ファイルの拡張子から実行コマンドを指定する)を読んでみてください。

ちなみにコマンドについてですが
`cd \$dir` は現在編集しているファイルのあるフォルダに移動するコマンドです。
`iverilog \$fileName` でコンパイルしたのち、`vvp a.out` で実行になります。
※ \$fileNameは実行するファイルの名前(拡張子含む)です。これも[自分の記事](https://qiita.com/take_me/items/6a1d2d417889837219d1)を読んでみてください。
※ 出力ファイル名は `iverilog -o b.out $fileName` とすればb.outになります。それに合わせて `vvp b.out` に変更しましょう。


補足：この例では、iverilog直接を呼び出しましたが、その他ではbat, shを使用してもよいと思います。
その場合は

```setting.json
"code-runner.executorMap": {
	"verilog": "verilog.bat $fileName"
}
```

などとすればよいでしょう。

## 3. 試してみる
編集した.vファイルを開いた状態で、右クリックメニューのRun CodeもしくはCtrl + alt + N で実行します。以下のような表示が出れば成功です。

```
VCD info: dumpfile test.vcd opened for output.
                   0: a = 0, b = 0, x = 0
                  10: a = 1, b = 0, x = 0
                  20: a = 1, b = 1, x = 1
                  30: a = 0, b = 1, x = 0
```

# まとめ

以上で最低限のコンパイルできる環境が出来上がります。
VSCode自体のインストールやbatファイル, iverilogについてはその他のサイトに優れた解説が散見されるので、適当に検索してください。
また生成されるvcdファイルをVScodeの中で確認する拡張機能もあるようです→[WaveTrace](https://marketplace.visualstudio.com/items?itemName=wavetrace.wavetrace)
ついでに導入してみてはいかがでしょうか。
P5.js 日本語リファレンス(noCursor)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の noCursor関数を説明します。

## noCursor() 

### 説明文

カーソルを非表示にします。

### 構文

noCursor() 


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
お名前.com + GCP + DockerでWebサーバの立ち上げ

# 環境

- ドメイン
    - お名前.comの**.work**は最初の1年間は1円で取れる。その後の更新は数百円レベルで毎年かかるようだ
- サービス基盤
    - GCPのf1-microは永久に無償
- Cloud DNS
    - これはどうやっても無償にはならないが、最初に$300分もらえるのでそれで収まる

# f1-microをコンテナ用に作る
これはContainer-Optimized-OSというそのままずばりのものが用意されている。
Chrome OSベースの様で軽いようであるが、いろいろ不便ではある(pingすらない)。
無償のf1-microの立て方はこちらを見てください。
[※これから始めるGCP（GCE）　安全に無料枠を使い倒せ](https://qiita.com/Brutus/items/22dfd31a681b67837a74)
上記の手順でブートディスクのところだけ下記のように変更する。
<img width="348" alt="11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629456/48a6dee5-d815-41ff-e49d-ae957b661cc8.png">

このままではdocker-composeコマンドが使えない。公式に手順があるのでそちらを参考にする。
和訳済みのものもある。
[※GCE上のContainer-Optimized OSでDocker Composeを使う（和訳）](https://qiita.com/gorohash/items/608da9050b32db581802)
この手順のバージョンのところを最新のものに変えて実行しよう。
最新バージョンは[こちら](https://github.com/docker/compose/releases)。RCは正式版ではないので注意しよう。
動きとしては、docker-compose用のコンテナを立ててそこから実行するようだ。

# IPを静的にする
デフォルトだとエフェメラルとなっており、再起動するごとにグローバルIPアドレスが変わる。
下記のページを参照して設定を変更する。
[※GCP Compute Engineで静的IPアドレスを割り当てる](https://yusuke.blog/2017/12/16/1993)

# Cloud DNS
お名前.comで取ったそのままだと上記の静的IPとドメイン名を結び付けられない。
以下の手順を行えばよい。
[※Google Cloud DNSでIPアドレスとドメイン名を紐付ける](https://qiita.com/NagaokaKenichi/items/95052742d40392f3215e)
[※ネームサーバーの変更](https://www.onamae.com/guide/p/67)
しばらくするとアクセスできるようになる。

# 後はコンテナを配置するだけ

`docker run --name hogehoge -d -p 80:80 nginx`
これでドメインにアクセスすればいつものWelcome to nginx!が表示されるはず。
P5.js 日本語リファレンス(frameRate)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の frameRate関数を説明します。

## frameRate() 

### 説明文

毎秒表示するフレーム数を指定します。たとえば、frameRate(30) は1秒あたり30回のリフレッシュを試みます。プロセッサが指定されたレートを維持するのに十分な速度が出ない場合、フレームレートは達成されません。 setup() 内でフレームレートを設定することをお勧めします。デフォルトのフレームレートは、ディスプレイのフレームレート(ここでは「リフレッシュレート」とも呼ばれます)に基づいており、ほとんどのコンピューターでは60フレーム/秒に設定されています。 1秒あたり24フレーム(通常は映画の場合)以上のフレームレートで, スムーズなアニメーションを作成できます。これは setFrameRate(val) と同じです。

引数なしで frameRate() を呼び出すと、現在のフレームレートが返されます。描画関数は値を返す前に少なくとも1回実行する必要があります。これはgetFrameRate() と同じです。

基本型数ではない、または正でない引数で frameRate() を呼び出すと, 現在のフレームレートが返されます。

### 構文

frameRate(fps)

frameRate() 

### パラメタ

- fps  
Number：1秒ごとに表示されるフレームの数

### 例 

```javascript
let rectX = 0;
let fr = 30 // FPSを開始する
let clr;

let rectX = 0; // 矩形のx座標
let fr = 30 // frameRate数
let clr;

function setup() {
  background(200);
  frameRate(fr);
  clr = color(255, 0, 0); // 赤色
}

function draw() {
  background(200);
  // 長方形をx方向に移動します
  // frameRate数が小さいほどdeltaTimeは大きくなり、rectXの増加値も大きくなります。
  rectX = rectX + 1 *(deltaTime / 50);

  if(rectX >= width){
    //画面から外れた場合。
    if(fr === 30){
      clr = color(0, 0, 255); // 青色
      fr = 10;
      frameRate(fr); // frameRate数を10にします
    } else {
      clr = color(255, 0, 0); // 赤色
      fr = 30;
      frameRate(fr); // frameRate数を30にします
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/XwXvcoPrH



### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
【Unity初心者】UnityのCanvasオブジェクトのサイズ変更の仕方について

はじめまして。
最近Unityを始めまして、一部困っていることがあり質問させていただきます。

・経緯
既にUnity上でマップを作成している画面上にテキストを配置しようとしているのですが、
その時に作られるcanvasオブジェクトが既存のオブジェクトに対して非常に大きなサイズで作られてしまいます。

・実現したいこと
キャンバスの大きさを以下のマップと同じくらいの大きさにしたい。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635236/ea3828ad-e950-a1ed-8ca9-96f832580c6a.png)

・困りごと
マップ上にキャンバスを配置すると以下のように巨大なキャンバスが配置される。また、サイズや位置の変更もできない。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635236/67587ff4-26f6-4a66-75f4-52024c09ee80.png)

そもそも考え方が誤っているのかもしれませんが
ご教示いただければ幸いです。


#5/11追記
上記表示は一旦気にせず進めていたのですが、別の学習時にまた同じようにcanvasの大きさの問題が発生しました。
作ったオブジェクトが大きく、canvas内に収まらなくなってしまいました。(下図左)
参考にしている方のサンプルとの違いとしては、サンプルのほうでは下図右の赤枠の部分が1024×768となっており、キャンバスが自動で大きさを決めるところで違いが出てしまっているようでした。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635236/4adeeb82-c492-e5f4-46ed-448de0102469.png)

★質問
キャンバスが自動で認識する大きさを変える方法はあるでしょうか？

詳しい方いましたらご教示願います。

#5/11追記　自己解決
Unityのフォーラムなど調べたところそれらしきものがあり、
結局canvasのインスペクターをいじったらうまく調整できました。
しかも気づかなかったですが画面上にもアスペクト比を変更できるところがあり、
そこがそもそも違っていたというオチで…

最低限フォーラムまでは自力で調べるべきでしたね
PMP試験に出てくるConflict Managementを覚えよう！

# Conflict Managementとは
意見衝突マネージメントのこと。

##PMBOKのどこにでてくるのか
PMBOKガイドの`348ページ`の`9.5.2.1 Interpersonal and Team Skills`にでてくるぞ

# 意見衝突の解決のための５つのテクニックとは
- Withdraw / avoid
    - 延期して回避！
    - Yield-Loseな解決法
- Smooth / accommodate
    - 問題に目をつぶる！
    - LOSE-LOSEな解決法
- Compromise / reconcile
    - 妥協！調停！
    - LOSE-LOSEな解決法
- Force / direct
    - 命令！指示！
    - WIN-LOSEな解決法
- Collaborate / problem solve
    - 協力！問題解決！
    - WIN-WINな解決法

----

よかったよかった
P5.js 日本語リファレンス(cursor)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の cursor関数を説明します。

## cursor() 

### 説明文

カーソル形状を定義済みの記号または画像に設定するか、すでに非表示になっている場合はそれを表示します。画像をカーソルとして設定しようとしている場合、推奨されるサイズは 16x16 または 32x32 ピクセルです。パラメータxとyの値は、画像のサイズより小さくなければなりません。

### 構文

cursor(type, [x], [y])

### パラメタ

- type  
文字列 | 定数 | 組み込み：ARROW、CROSS、HAND、MOVE、TEXT、WAIT  
ネイティブCSSプロパティ：'grab'、'progress'、'cell' など  
外部：カーソルの画像のパス(許可されているファイル拡張子：'.cur' '.gif' '.jpg' '.jpeg' '.png')  

ネイティブCSSカーソルとURLの詳細については, [こちら](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)をご覧ください。

- x  
Number：カーソルの水平アクティブスポット(32未満である必要があります)(オプション)

- y  
Number：カーソルの垂直方向のアクティブスポット(32未満である必要があります)(オプション)

### 例

```javascript
//マウスを左上に持っていくとクロスカーソルを表示します。
//マウスを右上に持っていくとプログレスカーソルを表示します。
//マウスを左下に持っていくとグラブカーソルを表示します。
//マウスを右下に持っていくと矢印カーソルを表示します。
function draw() {
  line(width/ 2, 0, width/ 2, height);
  line(0, height/ 2, width, height/ 2);

  if(mouseX <50 && mouseY <50){
    cursor(CROSS);
  } else if(mouseX> 50 && mouseY <50){
    cursor('progress');
  } else if(mouseX> 50 && mouseY> 50){
    cursor('https://dl.dropbox.com/s/zts3fydxkeomz3m/arrow.png?dl=0');
  } else {
    cursor('grab');
  }
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/wLRV4IiXr


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Laravel6.xカラムタイプ変更エラー

# 結論

composer updateでバージョンアップする。
laravel 6.18.10 -> 6.18.13

# 対象コード
マイグレーションでカラムタイプを変更しようとしたときに発生

```
Schema::table('facilities', function (Blueprint $table) {
            $table->string('phone')->change();
        });
```
ここのスキーマがcreateとかになっている時も似たようなエラーが出るので注意

# 表示されるエラー

```
Doctrine\DBAL\Driver\PDOException::("SQLSTATE[42000]: 
Syntax error or access violation: 1064 You have an error in your SQL syntax; 
check the manual that corresponds to your MySQL server version for the right syntax to use near 'CHARACTER SET utf8mb4 NOT NULL COLLATE `utf8mb4_unicode_ci`' at line 1")

```

# 関連Issue
Laravel側でdbalの使い方がよくないから起きてるみたい
https://github.com/doctrine/dbal/issues/3714
Laravelサイドでフィックスされたみたい
https://github.com/laravel/framework/issues/30539#issuecomment-622082778
TweetDeckを痛くする

![スクリーンショット 2020-05-10 18.43.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280373/cc8b119b-7cb7-527a-6877-cdd777000e2e.png)

こんな感じの痛TweetDeckを作っていきたいと思います

CSSで背景と透明度を設定して、`BetterTweetDeck+CSS`か`Tampermonkey+UserScript`でTweetDeckに反映させていきます

## CSS部分

```css
.app-columns-container {
    background-image: url( [画像リンク] );
    background-size: cover;
}

.app-columns {
    opacity: .7;
}
```

`background-image`で背景画像を設定します

背景画像の表示について細かい設定をしたい場合は`background-size`や、追加で`background-repeat`などがあります
-- 参考：[background-imageの取り扱い一覧](https://qiita.com/kibinag0/items/31832971fdba6e4e4302)

`opacity`で透明度を設定します

## BetterTweetDeckを使う方法

BetterTweetDeckはTweetDeckをより使いやすくするアドオンです
今回の様なカスタマイズ以外にも便利な機能が豊富なのでおすすめです

#### 手順
1. BetterTweetDeckをインストール（[better.tw](https://better.tw)）
2. BetterTweetDeckの設定から`カスタムCSS`を開く
3. 上記のCSSをコピペ
4. 保存してリロードすれば完了

## Tampermonkey(Greasemonkey)を使う方法

Greasemonkeyは指定したページでUserScriptを実行するアドオンです（TampermonkeyはそのChrome版）
UserScriptはほぼJavaScriptだと考えていて大丈夫です

UserScriptを使って更にカスタマイズしたい場合におすすめです

#### 手順
1. Tampermonkey(Greasemonkey)をインストール
2. 新規スクリプトを追加
3. 下記のコードをコピペ
4. `ctrl-s`で保存してリロードすれば完了

```javascript
// ==UserScript==
// @name         痛TweetDeck
// @namespace    meihei
// @version      1.0
// @description  TweetDeckを痛くする
// @match        https://tweetdeck.twitter.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const STYLE_CSS = '' +
    '.app-columns-container {background-image: url( [画像URL] ); background-size: cover;}' +
    '.app-columns {opacity: .7;}';

    const f = () => {
        const style = document.createElement('style');
        document.head.appendChild(style);
        style.textContent = STYLE_CSS;
    };

    setTimeout(f, 1100);
})();
```

他にもカスタマイズしているUserScriptを荒削りしたコードなので、ちょっと変な書き方していますがご了承ください

## おわりに
CSSだけを変更したい場合はBetterTweetDeckがおすすめですが、JavaScriptを使ってもっと高度なことをしたい場合はTampermonkeyがおすすめです

良きツイッターライフを！
Laravel で環境変数を用いて Routing 設定を切り替える

Laravel では環境変数を用いてアプリケーション内の設定を更新することができます。
この記事では Routing 設定を環境変数を用いて切り替える方法について書きます。

## 動作環境

- PHP 7.2.26
- Laravel 6.9.0

## TL;DR

- Controller または Middleware に `config()` の値を用いた条件分岐を書くことで実現可能。
- routes/web.php に条件分岐を書くとテストが困難。

## シチュエーション

アプリケーションの何らかの機能が廃止され、ある特定のパスへのリクエストを別のパスにリダイレクトさせたいケースについて考えます。
このリダイレクトを行うかどうかは環境変数に応じて決定されるものとします。

```php
// 廃止されるパス
Route::get('/old/resources', 'OldIndexController@index');

// リダイレクト先にしたいパス
Route::get('/new/resources', 'NewIndexController@index')->name('new.resources.index');
```

```php:config/hoge.php
return [
    // true のとき、 /old/resources から /new/resources へリダイレクトさせる
    'enable_new_resources' => env('ENABLE_NEW_RESOURCES', true),
]
```

## 方法1. Controller で条件分岐する

OldIndexController で条件分岐をすると最もシンプルに実現できそうです。

```php:app/Http/Controllers/OldIndexController.php
class OldIndexController
{
    private $redirector

    public function __construct(Redirector $redirector)
    {
        $this->redirector = $redirector;
    }

    public function index()
    {
        if (config('hoge.enable_new_feature')) {
            return $this->redirector->route('new.resources.index', [], 301);
        }

        // 既存の処理
    }
}
```

## 方法2: 新規作成した Middleware で条件分岐する

Middleware を使用すれば複数のパスを対象にまとめて設定することもできます。

```php:routes/web.php
Route::middleware(['redirectToNewResources'])->group(function () {
    Route::get('/old/resources', 'OldIndexController@index');
    // 他にリダイレクトさせたいパスがあれば追加する
});
```

```php:app/Http/Kernel.php
class Kernel extends HttpKernel
{
    protected $routeMiddleware = [
        'redirectToNewResources' => 'RedirectToNewResources::class',
    ]
}
```

```php:app/Http/Middleware/RedirectToNewResources.php
class RedirectToNewResources
{
    private $redirector

    public function __construct(Redirector $redirector)
    {
        $this->redirector = $redirector;
    }

    public function handle($request, Closure $next)
    {
        if (config('hoge.enable_new_feature')) {
            return $this->redirector->route('new.resources.index', [], 301);
        }

        return $next($request);
    }
}
```

## おまけ: routes/web.php に条件分岐を書く場合（失敗例）

routes/web.php に条件分岐を書いても一応実現できます。

```php:routes/web.php
if (config('hoge.enable_new_feature')) {
    Route::redirect('/old/resources', '/new/resources', 301);
} else {
    Route::get('/old/resources', 'OldIndexController@index');
}
```

ただしこのように実装した場合、テスト中で `Config` ファサードを利用して設定を切り替えても Routing には反映されません。
恐らく Laravel 起動時に RouteServiceProvider が読み込まれた時点での Routing 設定が登録されることが原因と思われます。
Xplenty入門 Part1 :データ接続の設定方法

こんにちは。今回はXplentyではじめに行うデータ接続の設定方法について紹介します。

Xplentyには大きく分けて2種類のデータ接続方法があります。
方法が分かれる理由はXplentyがあらかじめそのデータソース専用（Native）にコネクタを提供しているかどうかによります。

#1.専用コネクタがある場合
Xplentyの左側のメニューからConnect（稲妻のアイコン）をクリックすると作成できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/b874e40f-128b-0cb6-c038-cac10889bd78.png)

以下の選択肢の中から接続したいデータの設定を行なっていきます。
![New connection · ETL and Reverse ETL 2022-06-15 at 11.47.43 AM.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/fc02dc32-5831-87c9-706b-a18a3bd55355.jpeg)
![New connection · ETL and Reverse ETL 2022-06-15 at 11.47.24 AM.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/9d1e78ab-ae29-4b82-4c58-a7041c45609d.jpeg)



#2.専用コネクタがない場合
専用コネクタがない場合でも、データソース側でデータ取得用のRest APIが提供されている場合、Xplentyが提供する汎用的なRest APIコンポーネントで接続することが可能です。
余談ですが、データ取得以外にも、XplentyではRest APIにCurlコマンドでリクエストを送信し、Rest API経由でデータを書き込む機能があります。（詳細は[こちらのブログ](https://qiita.com/Azabu10ban/items/b0b188c9f4c497dee617)をご覧ください。）

例えば、Kintoneに対してRest APIで接続したい場合、コンポーネント選択画面で「Rest API」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/d31e4b7c-4cdf-ecb1-7fd4-5bc77ba398da.png)

次にRest APIの設定画面で接続に必要なヘッダー情報をセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/e832ce90-2d89-0ddb-f476-9b32ade5d315.png)

もちろん、どの項目を取得するか？など後続の設定を行いますが、基本的にはこれだけでAPI経由でデータを取得する接続設定が完了します。

ちなみにKintoneは、[XplentyのIntegrationページ](https://www.xplenty.com/integrations/)の接続リストに掲載されていませんが、Xplentyの汎用的に使えるRest APIコンポーネントで接続することが可能です。

##注） Rest APIコンポーネントで接続できない場合
今回の例は比較的に簡単な場合ですが、認証のプロトコルがOAuth2の場合、注意が必要です。

- 「grant type」が**Client Credentials**の場合： <font color="blue">OK</font>
- 「grant type」が**Authorization Code**の場合： <font color="red">NG</font>

えっ！<font color="red">NG</font>の場合、つながらないってこと？と思う方がいらっしゃるかと思いますが、この場合はXplentyに問い合わせをしてみてください。**複数のお客様からの潜在的なニーズが見込まれるものについては、専用コネクタが開発され、提供される可能性があります。**

OAuth2の場合、AccessTokenを取得する際に一度トークン取得用のURLにTokenをリクエストするのですが、この辺の設定をどうXplentyで実装するか？については[こちらのブログの「利用シナリオ2」](https://qiita.com/Azabu10ban/items/5604aa3c11bf8e2ed9d7)で解説しています。

#最後に
XplentyはクラウドネイティブなETLツールです。したがってデスクトップツールのインストールは不要です。ブラウザがあれば、クラウド上の様々なアプリケーションやデータベース、ストレージに対して、簡単に接続、加工、ロードすることが可能です。
ぜひ[無償トライアル](https://try.xplenty.com/jp/)で操作感を試してみてはいかがでしょうか？
クラウド初心者のAWS入門(第2回)

# 第2回 ネットワーク構築
今回から本格的に構築を始めていきたいと思います。

以下構成の構築を最終的な目標として、今回は下図の⭐️箇所の「VPC」を構築したいと思います。(VPCはVirtual Private Cloudの略)

VPCは、現実世界のネットワークスイッチそのものに該当すると思っています。
これ以降、このVPC内にパブリックサブネットとプライベートサブネットを構築していきます。

パブリックサブネットはインターネットに接続できるよう、プライベートサブネットはインターネットに接続しないよう、それぞれ論理ネットワークを構築していきます。

|![Untitled Diagram-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/81939058-bad4-cf2e-2765-43934717b761.png)
|:-:|

## 1. AWSマネジメントコンソールへのログイン
[AWSマネジメントコンソール](https://console.aws.amazon.com/)に「IAMユーザ」でログインします。
IAMユーザの作成等、初期設定については[こちらを参考に](https://qiita.com/Jerid/items/9f3df0e119b298e1f67a)。

## 2. リージョンの選択
最初に、どの地域のデータセンターに構築するかを選択します。
初回に変更してしまえば、以後変更の必要はなさそうです。

|![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/9a9b773d-2c40-4784-221c-8655e1fec824.png)
|:-:|

## 3.VPCの作成
準備が整ったらVPCダッシュボードからVPCの作成を行います。
VPCダッシュボードへは、AWSマネジメントコンソールから「VPC」と検索しましょう！！

|<img width="1225" alt="img 2020-06-16 21.15.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/1f5bfb31-f054-6747-666a-94b4d057db76.png">
|:-:|

まずは「VPCの作成」ボタンを選択。

|![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3632363237302f64643061636136662d316161362d316436662d393837352d3139666464383730326562612e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/29e2b1ee-fdf5-b502-4b1f-68e959b7ac56.png)
|:-:|

<details>
<summary>**補足**</summary>
VPC作成時の項目としてある「テナンシー」は、ハードウェアを占有することらしい。
他企業さんとバッティングしたら嫌な場合は、検討した方が良いのかも。ただ有料でした。。。
</details>

続けて、「名前タグ」と「IPv4 CIDRブロック」を入力して、「作成」ボタンを選択すると作成完了です。

|![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3632363237302f63626135636265612d663865382d643036362d636335652d6134663739323139303032352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/f4384c3b-232a-2c49-4a1e-04ce9899da4b.png)
|:-:|

<details>
<summary>**補足**</summary>
「IPv6 CIDRブロックなし」が、IPv4に相当するようです。
「作成」を選択するとVPCが作成されます。
</details>

以上となります、ありがとうございました。

# 参考文献
[Amazon Web Services 基礎からのネットワーク&サーバー構築](https://shop.nikkeibp.co.jp/front/commodity/0000/231260/])

# 後書き
2020年6月13日に記載内容を修正しております。
ExpoでReactNativeアプリの開発

ReactNative + Expo でアプリを開発する際の自分用のメモを残します。

### Expo
ReactNativeでAndroidアプリやiOSアプリを作ると、ビルドやバージョン管理などの面倒くさい問題に遭遇します。
特に、ビルド時に出るエラーなどははまるものが多く時間を取られがちです。
expoはそういった開発者にとって面倒くさい問題を支援してくれる開発支援ツールです。

メリットは上記ですが、
デメリットは、expo管轄内で独自のネイティブモジュールを実装できないところです。
カメラや通知などを行うネイティブモジュールは用意されていますが、特殊な機能を実装したい場合は独自にネイティブモジュールを作る必要があります。
（例えば、以前作ったものですが、マイクの音声を数秒遅れてスピーカーでフィードバックするなどは独自にネイティブモジュールが必要です。）

独自のネイティブモジュールが必要な方はexpo detachで調べてみてください。


### アプリ作成・起動
[ドキュメント](https://docs.expo.io/)を読むと下記のコマンドでプロジェクトを作成できます。

```
# expo-cliをインストール
npm install --global expo-cli
# プロジェクト作成
expo init my-project
```

作ったら、動かしてみましょう。

```
# アプリ起動
expo start
```

上記のコマンドを打つと、ブラウザで下記のような画面が起動します。
![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275351/803698a8-58db-7005-85e4-24cb1f3124e1.png)

この画面の「Run in web browser」を押すと、ブラウザ画面でアプリを見ることができます。

↓作成中のアプリ（ブラウザ表示）
![screenshot4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275351/10e77ff6-a7fe-52b8-5698-0139fb197aba.png)


### Android Emulatorでアプリ起動

この段階でも簡単にアプリをエミュレータで確認できます。

エミュレータは、
AndroidStudio+Genymotionがオススメです。非常に軽く、開発しやすいです。

エミュレータを起動したら、ブラウザの「Run on Android device/emulator」ボタンを押すと、
エミュレータでアプリが起動します。

↓作成中のアプリ（エミュレータ表示）

![screenshot3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275351/b87c2bce-af43-919d-c29e-03618097120c.png)

便利ですね。


### Android Deviceでアプリ起動

Playストアで「Expo」というアプリ（アイコン下記）
![screenshot2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275351/046f2ca1-2546-29bd-92fe-4d7e6cf278f5.png)
をインストールします。

アプリを起動し、「Scan QR Code」というボタンがあります。これを押します。
![Screenshot_20200510-182611.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275351/9a7d8353-e6b1-7bfb-83c1-19cc68b79c93.jpeg)


ブラウザに書かている2次元QRコードを読み取ると、アプリを実機で動かせます。

↓作成中のアプリ（端末表示）

![Screenshot_20200510-182628.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275351/d77eb915-46d8-015d-cd3f-2d23c06a4f09.jpeg)


非常に便利ですね。
２次元配列をCSVで書き出し（UTF8形式）VBA

タイトルの通りのVBAサンプルです(^ ^)

```VB
'------------------------------------------------------------------------------
’2次元配列をUTF8形式のCSVで書き出しのテスト用コード
'------------------------------------------------------------------------------
Sub testExportCSVutf8()
    'CSVに書きだす２次元配列生成（テストデータ生成）
    Dim TextArry(10, 8) As String
    For i = 0 To UBound(TextArry, 2)
        For j = 0 To UBound(TextArry, 1)
            TextArry(j, i) = "<" & j & ">" & "(" & i & ")"
        Next
    Next
    
    'UTF8で書き出し
    Call ExportCSVutf8(TextArry, ActiveWorkbook.Path & "\data_utf8.csv")
End Sub

'------------------------------------------------------------------------------
' 2次元配列をUTF8形式のCSVで書き出し
' ※参照設定で Microsoft ActiveX Data Objects x.x Library にチェックを入れること
'------------------------------------------------------------------------------
Sub ExportCSVutf8(ByRef iTextArry2D() As String, ByVal iExportFileName As String)
    'ADODB.Streamオブジェクトを生成
    Dim AdoDB As Object
    Set AdoDB = CreateObject("ADODB.Stream")
    '1行分のテキストを入れるバッファ
    Dim LineText As String
 
    With AdoDB
        .Charset = "UTF-8"      '文字コード指定
        .LineSeparator = adCRLF '改行コード指定
        .Open                   '書き込むCSVファイルオープン
 
        For r = LBound(iTextArry2D, 1) To UBound(iTextArry2D, 1)
            '1行バッファをクリア
            LineText = ""
            
            '1行分のテキスト生成(カンマで連結)
            For c = LBound(iTextArry2D, 2) To UBound(iTextArry2D, 2)
                LineText = LineText & iTextArry2D(r, c) & ","
            Next
            
            '１行分書き出し
            .WriteText LineText, adWriteLine
        Next
        
        '上書き保存
        .SaveToFile iExportFileName, adSaveCreateOverWrite
        '閉じる
        .Close
    End With
End Sub
```
【Flutter基礎】Wrapについて

# 概要

FlutterのWidgetの1つであるWrapについて説明します。

# Wrap

ColumnやRowによって一列、一行に並ぶWidgetたちを、Wrapはうまいこと折り返してくれます。
具体的な用途としては、Chip(この記事のタイトルの下にある、Flutter・Dart・初心者みたいなパーツ)の折り返し等で利用します。

以下、WrapによってChipを折り返してみた例です。

```
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class WrapPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _WrapPageState();
}

class _WrapPageState extends State<StatefulWidget> {
  List<Chip> _chips = List<Chip>();
  final _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap"),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            enabled: true,
            controller: _controller,
            onSubmitted: _onSubmit,
          ),
          Wrap(children: _chips)
        ],
      ),
    );
  }

  void _onSubmit(String value) {
    print(value);
    setState(() {
      _controller.text = "";
      _chips.add(Chip(
        label: Text(value),
      ));
    });
  }
}
```

![Screenshot (2020_05_10 18_17_26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441085/cae6d4e0-f876-4ebc-6f24-292bb25a87e6.png)

こんな感じでうまいことChipたちを折り返してくれます。

一方、上記のWrap部分をRowに置き換えると、以下のように画面からはみ出してしまいます。

![Screenshot (2020_05_10 18_14_34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441085/3f5ee85b-d790-9a0c-236b-1fe573868a92.png)

Wrapがちゃんと仕事していることが証明されましたね。
P5.js 日本語リファレンス(focused)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の focused関数を説明します。

## focused

### 説明文

p5.j​​s プログラムが置かれているウィンドウが「フォーカスされている」かどうかを確認します。つまり、フォーカスされているとスケッチはマウスまたはキーボードの入力を受け入れます。この変数は、ウィンドウがフォーカスされている場合は "true"、フォーカスされていない場合は "false" です。

### 構文

focused

### 例

```javascript
function draw() {
  background(200);
  noStroke() ;
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  // p5スケッチが含まれているウィンドウをクリックすると、赤色のクロスラインが表示されます
  if(focused){
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/Nvj_IsI8l

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
[Dovecot-2.2] doveconf, doveadm オプション

# doveconf
Dovecot設定出力ユーティリティ.

## -d     
Show the setting's default value instead of the one currently configured.

Dovecot設定のデフォルト値を表示.

## -n     
Show only settings with non-default values.

## -N
Show settings with non-default values and explicitly set default values.


# doveadm
Dovecot管理者ユーティリティ.

## reload
doveadm reload

Force dovecot(1) to reload the configuration.

##stop
doveadm stop

Stop dovecot(1) and all its child processes.


## kick
doveadm-kick(1), Disconnect users by user name and/or IP address.


## doveadm log
doveadm-log(1), Locate, test or reopen Dovecot's log files.

```
# dovecot log test
```

```
dovecot: doveadm: Debug: This is Dovecot's debug log (1589101859)
dovecot: doveadm: This is Dovecot's info log (1589101859)
dovecot: doveadm: Warning: This is Dovecot's warning log (1589101859)
dovecot: doveadm: Error: This is Dovecot's error log (1589101859)
dovecot: doveadm: Fatal: This is Dovecot's fatal log (1589101859)
```
【競プロ】phpでの標準入力まとめ

###[paizaの標準入力の仕方](https://paizasupport.zendesk.com/hc/ja/articles/360038391912-%E6%A8%99%E6%BA%96%E5%85%A5%E5%8A%9B-%E5%87%BA%E5%8A%9B%E3%81%A8%E3%81%AF%E3%81%AA%E3%82%93%E3%81%A7%E3%81%99%E3%81%8B-)を一覧にしました。


######1つ、1行のデータ入力
入力例)
a

```php:example.php
<?php
$s = rtrim(fgets(STDIN));
echo $s . "\n";
```

######3行のデータ入力
入力例)
aaa
bbb
ccc

```php:example2.php
<?php
$s1 = rtrim(fgets(STDIN));
echo $s1 . "\n";
$s2 = rtrim(fgets(STDIN));
echo $s2 . "\n";
$s3 = rtrim(fgets(STDIN));
echo $s3 . "\n";
```

######N行のデータ入力
入力例)
3 ←N
aaa
bbb
ccc

```php:example3.php
<?php
$n = (int)rtirim(fgets(STDIN));
for ($i = 0; $i < $n; $i++){
$s = rtrim(fgets(STDIN));
echo $s . "\n";
}
```
($i = 0; $i < $n; $i++)は「同じ処理をn回繰り返す」という意味。
よく出て来るのでこのまま覚えてしまおう。

####1つの行で与えられたデータを分割して処理する方法
######3つのデータの入力の分割処理方法
入力例) aaa bbb ccc
出力例) 
aaa
bbb
ccc

```php:example4.php
<?php
$s = rtrim(fgets(STDIN));
$t = explode(" " , $s);
echo $t[0] . "\n";
echo $t[1] . "\n";
echo $t[2] . "\n";
```

######N個のデータの入力の分割処理方法
入力例) 
3←N
aaa bbb ccc
出力例) 
aaa
bbb
ccc

```php:example5.php
<?php
$n = (int)rtrim(fgets(STDIN));
$s = rtrim(fgets(STDIN));
$t = explode(" ", $s);
for ($i = 0; $i < $n; $i++) {
    echo $t[$i] . "\n";
}
```
PMP試験に出てくる経営学用語、社会学用語を覚えよう！

# PMP試験にでてくる経営学用語、社会学用語とは
ハロー効果、パーキンソンの法則などが有名で一般常識だね！
## どんな用語がでるのか
### Maslow’s Hierarchy of Needs
- 欲求5段階説

### Herzberg’s Theory of Motivation
- 動機付け要因（モチベUP）と衛生要因（モチベDOWN）の二要因理論

### Halo Effect
- 顕著な特徴に引きずられて他の特徴についての評価が歪められる（認知バイアス）現象

### Parkinson's Law
- パーキンソンの法則
- 第1法則
    - 仕事の量は、完成のために与えられた時間をすべて満たすまで膨張する
- 第2法則
    - 支出の額は、収入の額に達するまで膨張する

### McGregor’s X and Y
- X理論（欲求５段階の低いところにいるやつはなまけものなのでアメとムチが必要やで）
    - Y理論（欲求５段階の高いところにいるやつは自己実現のために自ら行動するから自主性を尊重するで）

### Ouchi’s Theory Z
- 大内のZ理論（日本的経営に近い、X理論とY理論のいいとこどり、終身雇用）

### McClelland’s Theory of Needs
- マクレランドの欲求理論（達成動機、権力動機、親和動機、回避動機）

### Vroom’s Expectancy Theory
- ブルームの期待理論
    -  expectancy (期待)：effort → performance (E→P)
    -  instrumentality (道具性)：performance → outcome (P→O)
    -  valence (誘意性)：outcome → reward
    -  Motivational Force (MF) = Expectancy x Instrumentality x Valence

----

よかったよかった