OmniAICreator/Qiita-1.07M huggingface dataset:
【UiPath】要素の有無の検出を素早く行う

特定のシステムやWebサイトへログインするロボットを作る際、ログイン成功/失敗の判定が必要になる場合がある。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/6d39b021-4f1b-dc47-5a4e-fed81d1a0bcf.png)

大体は「要素の有無を検出」などを使い、エラーメッセージの有無などを判定するが、このアクティビティは、タイムアウトに指定した時間が経過した後でないと、要素が無いと判定しない。
(逆に、要素がある場合は、即座に「有り」と判定する。つまりタイムアウトいっぱいまで要素を探し続けるイメージ)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/b52c0859-11ce-34ed-f743-b699822877e3.png)

これでは「無い」と判断する場合に時間がかかってしまうので、ログインに成功/失敗のどちらかが分かった時点で判定できるようにしたい。
以下がそのサンプル。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/1cef1f37-a818-5ac0-3b9b-8ac59c9691cc.png)

基本的な流れは以下の通り：

1. 要素の有無の判定を、短いタイムアウト(0.5～1秒)で実行する。
2. Webページなどの表示時間を考慮し、別途タイムアウトを設定する(サンプルでは10秒)。
3. 別途用意したタイムアウトの時間が経過するまで、要素の有無の判定を繰り返す。

これで、ログインが成功したにせよ、失敗したにせよ、即座に判定して次の処理へ移れる。
smartphone向けのCSSを読み込む方法とその例

##通常のウィンドウ幅表示と幅480ピクセル以下表示とを同時に満足するHTMLとCSSの書き方です。これからの時代は、これらの書き方が主になることが考えられます。


```html:smartphone-css.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial=1.0"> //書き込む箇所：、表示処理をキャンセルするときの<meta name="viewport">の書式
<title>スマートフォン向けのCSSを読み込む</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 480px)"> //書き込む箇所
</head>
```

```css:smartphone-css.css
/* @mediaルールを使ったレスポシブなCSSの記述例 */
@media screen and (max-width: 480px) {
	/* 画面の横幅が480px以下の時に適用されるCSSは全てここに記載する */
	header, nav, #graphic, #contents, footer {
		margin: 0 auto;
		width: 95%;
	}
}
```
Go 関数型を試す 備忘録

``` go
package main

import (
	"fmt"
)

//関数型の定義
type typeFunc func(int) int

func main() {

	//定義した関数型の変数宣言
	var f typeFunc 

	//変数に関数を代入
	f = returnInt
	
	//関数を実行してprint
	fmt.Println(f(1))
}

//代入する関数の定義
func returnInt(i int) int {
	return i
}
```
ONNX  Nodes in a graph must be topologically sorted対策

すごく簡単なONNXモデルでonnx.checker.check_modelを使ったところ、このエラーがでてはまりました。

エラーが出るソース

```python
import onnx
from onnx import TensorProto
from onnx import helper

X = helper.make_tensor_value_info('X', TensorProto.FLOAT, [28, 28])
input_shape = helper.make_tensor_value_info('input_shape', TensorProto.INT64, [1])
reshape_out = helper.make_tensor_value_info('reshape_out', TensorProto.FLOAT, [784])

flat_op = helper.make_node(
    'Reshape',
    inputs=['X', 'input_shape'],
    outputs=['reshape_out'],
    name="reshape_node"
)

graph_def = helper.make_graph(
    [flat_op],
    'my-mlp',
    [X],
    [reshape_out]
)

model_def = helper.make_model(
    graph_def,
    producer_name='natsutan'
)

onnx.save(model_def, 'onnx/my_mlp.onnx')
onnx.checker.check_model(model_def)
print('The model is checked!')

```

MNISTの入力だけをPython APIでONNX化がやりたかったのですが、でるエラーがこれ。

```
  File "C:\home\app\anaconda3\lib\site-packages\onnx\checker.py", line 86, in check_model
    C.check_model(model.SerializeToString())
onnx.onnx_cpp2py_export.checker.ValidationError: Nodes in a graph must be topologically sorted, however input 'input_shape' of node: 
input: "X" input: "input_shape" output: "reshape_out" name: "reshape_node" op_type: "Reshape"
 is not output of any previous nodes.

```
OP一個しかないのになんで順番が関係あるのかわからず、エラーがでている箇所のソースを追いました。

この部分でfalseを返すと上のエラーが表示されます。
https://github.com/onnx/onnx/blob/64b4b6865d55fd3b94dea1f15a9368d4be0444c3/onnx/checker.h#L104

```c++
  bool this_or_ancestor_graph_has(const std::string& name) const {
    return this_graph_has(name) ||
        (parent_context_ && parent_context_->this_or_ancestor_graph_has(name));
  }
```

ちゃんと追ったわけではないので想像ですが、nameしか見ていないので変数の前方参照を失敗しているようです。

エラーがでるソースとにらめっこして、input_shapeが値を指定していない状態ではグラフの入力につなげないと駄目かもと思い修正しました。

```python
graph_def = helper.make_graph(
    [flat_op],
    'my-mlp',
    [X, input_shape], # 初期値を与えていないTensorはグラフの入力につなぐ
    [reshape_out]
)
```

この修正で、onnx.checker.check_modelはエラーを出さなくなりました。このエラーが出たときは、ネットワークのトポロジーと合わせて、前方参照が全部できているかどうか確認すると問題解決が早そうです。

![reshape.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327/01474c38-198f-74f8-e23d-43823197d84e.png)


次は、グラフの入力になっているreshapeのパラメータをinitializerで固定値にしたい。
S3バケットを削除する（バージョニングが有効になっている場合の動作）

#1.Amazon S3 コンソールを使用してバケットを削除する#
「Amazon S3 コンソールは、空のバケットおよび空ではないバケットの削除をサポートしています」

ということで、空の場合でも空でな場合どちらでも削除できるとのことなので省略。



#2.AWS CLI を使ってバケットを削除する#
「バケットのバージョニングが有効化されていない場合にのみ、AWS CLI を使ってコンテンツオブジェクトがあるバケットを削除できます。
バケットのバージョニングが有効化されていない場合には、rb (remove bucket) AWS CLI command with --force パラメータを使用して空ではないバケットを取り除くことができます。
このコマンドは、すべてのオブジェクトを削除した後にバケットを削除します。」

バージョニング無効であれば、オブジェクトがあっても、
`aws s3 rb s3://bucket-name --force`
で削除することができる。

なので、バージョニングを有効にした状態だけ検証してみた。

```
##オブジェクトがある状態での削除
$ aws s3 ls s3://aws-delete-cli
2019-09-20 05:03:39          0 test.txt
$ aws s3 rb s3://aws-delete-cli
remove_bucket failed: s3://aws-delete-cli An error occurred (BucketNotEmpty) when calling the DeleteBucket operation: The bucket you tried to delete is not empty. You must delete all versions in the bucket.

##オブジェクトがない状態、かつ--forceをつけた場合。
$ aws s3 rb s3://aws-delete-cli --force
remove_bucket failed: s3://aws-delete-cli An error occurred (BucketNotEmpty) when calling the DeleteBucket operation: The bucket you tried to delete is not empty. You must delete all versions in the bucket.

##オブジェクトがない状態での削除
$ aws s3 rm s3://aws-delete-cli/test.txt
delete: s3://aws-delete-cli/test.txt
$ aws s3 ls s3://aws-delete-cli
$ aws s3 rb s3://aws-delete-cli
remove_bucket failed: s3://aws-delete-cli An error occurred (BucketNotEmpty) when calling the DeleteBucket operation: The bucket you tried to delete is not empty. You must delete all versions in the bucket.
```

まあ、CLIではバージョニングを無効にしなければいけないということだ。
vagrant-vmware-esxiでVMware ESXiのみの環境をコントロールする

vagrant-vsphereだとvCenterサーバーが必要なので単純にESXiのみをvagrantから操作できないかなぁと調べたらあったので使ってみた。因みにESXi、vagrant共に触れ始めなので色々知識不足なのはすみません。
## vagrant-vmware-esxiとは
>This is a Vagrant plugin that adds a VMware ESXi provider support. This allows Vagrant to control and provision VMs directly on an ESXi hypervisor without a need for vCenter or VShpere. ESXi hypervisor is a free download from VMware! 
>Not everyone has vCenter / vSphere... vCenter cost $$$. ESXi is free! Using this plugin will allow you to use a central VMware ESXi host for your development needs. Using a centralized host will release the extra load on your local system (vs using KVM or Virtual Box). [GitHub](https://github.com/josenk/vagrant-vmware-esxi)

コストフリーなESXiのみの環境でも快適にコントロールしたいというのが伝わります。

vagrant環境にあるboxファイルを変換してESXiにネットワーク越しに送信し、自動でVMを作成してくれるプラグイン。

##構築環境
+ サーバー:ESXi 3.7
    + **SSH接続の許可が必要**
+ vagrantを動かすホスト:macOS Mojave 10.14.6 
+ Vagrant 2.2.5
+ vagrant-vmware-esxi 2.4.4

##構築手順
### vagrant-vmware-vsphereのインストール
```
vagrant plugin install vagrant-vmware-vsphere
```
### VMWare OVF Toolのインストール

[VMWare OVF Tool](https://www.vmware.com/support/developer/ovf/)
上記リンクからダウンロード、インストールをしてPATHを通す。

```
export PATH=$PATH:/Applications/VMware\ OVF\ Tool/
source ~/.bash_profile
```
###Vagrantfileの編集
適当なディレクトリにVagrantfileを作成し編集する。

```
mkdir hoge
cd hoge
vagrant init
```

```ruby:Vagrantfile
Vagrant.configure('2') do |config|

  # 対応Ploviderにvmwareがあるboxだけが使えます。
  config.vm.box = 'generic/centos7'

  # ホスト/ゲスト間でのファイル共有を使う際はtypeにrsyncかnfsで指定。
  config.vm.synced_folder('.', '/vagrant', type: 'nfs')

  config.vm.provider :vmware_esxi do |esxi|

    # 必須：ESXiのhostnameかIPアドレス
    esxi.esxi_hostname = 'esxi'

    # 必須：ESXiのusername
    esxi.esxi_username = 'root'

    # 必須：ESXiのパスワードは
    # 1. 'prompt:'→プロンプト上で入力
    # 2. 'file:','file:my_secret_file'→パスワードが平文で保存されているファイルを指定
    # 3. 'env:','env:my_secret_env_var'→パスワードが平文で保存されている環境変数を指定
    # 4. 'key:','key:~/.ssh/some_ssh_private_key'→SSHの公開鍵認証のファイルを指定
    # 5. esxi.esxi_password = 'my_esxi_password'→Vagrantfile上に平文での記入
    # から選べる。(セキュリテイ上4.が無難かと……)
    esxi.esxi_password = 'prompt:'

    # 必須：SSHポート番号
    esxi.esxi_hostport = 22

    # 接続するポートグループ
    esxi.esxi_virtual_network = 'VM Network'

    # 作成先のデータストア
    esxi.esxi_disk_store = 'datastore1'

    # 作成するVMの名前
    # 指定しないと自動で生成される
    esxi.guest_name = 'Custom-Guest-VM_Name'

    # VMのゲストユーザーの名前、デフォルトは'vagrant'
    esxi.guest_username = 'vagrant'

    # メモリ
    esxi.guest_memsize = '2048'

    # CPU数
    esxi.guest_numvcpus = '2'

  end
end
```
特に詳細な設定は必要なかったので自分の場合はこれぐらいで十分だった。

##VMの起動
Vagrantfileがあるディレクトリで

```
vagrant up
```
を実行すると、boxをダウンロードし変換、ESXiに送信してVMとして登録して起動してくれる。

もちろんdestroyでVMの削除も行なえる上snapshotも作成できる。
##リンク
[GitHub](https://github.com/josenk/vagrant-vmware-esxi)
[Wiki - GitHub](https://github.com/josenk/vagrant-vmware-esxi/wiki)
他のVMのクローンを作成することも出来るらしいが今回はやっていないのでまた試してみたい。
Craft CMS に登録するユーザをメールアドレスのドメインで制限する

> Restrict user registration by domain in Craft CMS, allows you to limit who can register for your site based on their email address.

ということなので、メールアドレスのドメインを見てサイトに登録するユーザーを制限出来るプラグインぽい。

> Restrict Registration
> https://plugins.craftcms.com/restrict-registration

そういうふうに限定してしまう時はありなのかもしれない。

admin とかも含まれるのかどうかとかがちょっと気になる。
ActionCableのChannelでもcookies、sessionを使いたい

# Connection

Connection側は`request`が見れるので、直接触れる
https://qiita.com/sasurai_usagi3/items/8f744cb732b0b522f33f

# Channel

`connection`への変数を持っているのでそこから`cookies`を使う

```ruby
class ChatChannel < ApplicationCable::Channel

  ...
  ...

  private

  def session
    session_key_name = Rails.application.config.session_options[:key]
    cookies.encrypted[session_key_name]&.with_indifferent_access
  end

  def cookies
    connection.send(:cookies)
  end
end

```
rubyでgetsメソッドを使ってジャンル、タイトル、感想を入力できるようにする。

# 復習
getsメソッドはターミナルからユーザーに入力を行わせ、入力した値の文字列オブジェクトを返り値として渡す。
getsメソッドの特徴として入力が完了するまでプログラムの処理を中断するというものがある。

```ruby:reviewApp.rb
# 変数の定義
puts "ジャンルを入力してください:"
genre = gets
puts = "タイトルを入力してください:"
title = gets
puts "感想を入力してください:"
review = gets
line = "-------------------------"

# レビューの描画
puts "ジャンル : #{genre}\n#{line}"
puts "タイトル : #{title}\n#{line}"
puts "感想 :\n#{review}\n#{line}"
```
#　入力時のターミナルでの出力結果
```
ジャンルを入力してください:
映画
タイトルを入力してください:
スパイダーマン
感想を入力してください:
迫力満点で面白い作品です!
ジャンル : 映画

---------------------------
タイトル : スパイダーマン

---------------------------
感想 :
迫力満点で面白い作品です!

---------------------------
```
# 改行を除く
getsに.chompを追記するとgetsメソッドでの返り値の文字列の末尾から改行をのぞいた文字列が得られる。

```ruby:reviewApp.rb
# 変数の定義
puts "ジャンルを入力してください:"
genre = gets.chomp
puts "タイトルを入力してください:"
title = gets.chomp
review = gets.chomp
line = "---------------------------"

# レビュー描画
puts "ジャンル : #{genre}\n#{line}"
puts "タイトル : #{title}\n#{line}"
puts "感想 : \n#{review}\n#{line}"
```
# gets.chompの入力時の出力結果
```
ジャンルを入力してください:
映画
タイトルを入力してください:
スパイダーマン
感想を入力してください:
迫力満点で面白い作品です!
ジャンル : 映画
---------------------------
タイトル : スパイダーマン
---------------------------
感想 :
迫力満点で面白い作品です!
---------------------------
``` 
# まとめ
たまにこう言った初歩的なことでも実務未経験の私には書かないと忘却してしまうので載せてみました。
Markdownも勉強しないとだ、、、見辛くてすみません。。。
Laravelで429 (Too Many Requests)が出た時の対策

## 429(Too Many Requests)とは

>HTTP 429 Too Many Requests レスポンスステータスコードは、ユーザーが指定された時間内に多くのリクエストを送信した ("rate limiting") ことを示します

https://developer.mozilla.org/ja/docs/Web/HTTP/Status/429

## Laravelではデフォルト1分間に60リクエスト

Laravelでは同一ドメインの同一IPアドレスからのAPIリクエストを
デフォルトで1分間に60回で制限されています。

`app/Http/Kernel.php`で指定

```php:Kernel.php
protected $middlewareGroups = [
    'api' => [
        'throttle:60,1',
    ],
];
```

## throttleの中身は?
Larvael標準の`ThrottleRequests`でアクセス制限が掛けられているのでここを確認しましょう。

先程と同じ`app/Http/Kernel.php`で呼び出されていいる`throttle `のソースを追います。

```php:Kernel.php
protected $routeMiddleware = [
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
];
```

`\Illuminate\Routing\Middleware\ThrottleRequests.php`
で**IPアドレス**と**ドメイン**のハッシュを返却しています。

`sha1()`が分からない方は↓
https://www.php.net/manual/ja/function.sha1.php

```php:ThrottleRequests.php
public function handle($request, Closure $next, $maxAttempts = 60, $decayMinutes = 1)
{
    $key = $this->resolveRequestSignature($request);
    // 色々書かれているけど省略
}

/**
 * Resolve request signature.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return string
 * @throws \RuntimeException
 */
protected function resolveRequestSignature($request)
{
    if ($user = $request->user()) {
        return sha1($user->getAuthIdentifier());
    }

    if ($route = $request->route()) {
        return sha1($route->getDomain().'|'.$request->ip());
    }

    throw new RuntimeException(
        'Unable to generate the request signature. Route unavailable.'
    );
}
```

すみません。
色々ソースを追う予定でしたが後ほど更新します。

## 429を出さないようにするには？

Larvaelのデフォルトの制限を緩めて上げましょう。

`throttle:60,1`が1分で60回なので
`throttle:600,10`に書き換えれば10分で600回

ここらへんはシステムをどうしたいのかで自由に変更しちゃいましょう！
個人的にはよっぽどの事が無い限りデフォルトで使いたいですね！

```php:Kernel.php
protected $middlewareGroups = [
    'api' => [
        'throttle:60,1',
    ],
];
```

## APIの送信自体を減らす考え方

例えばjsなどのクリックイベントでAPIが何度も送信されているケースがあれば
クリックイベント自体をn秒に1回までなどの制限を掛けてあげればいい。

#### 一例

Lodashの`debounce`や`throttle`を使って
一定時間の連続の呼び出しを制限して負荷対策を行う。
https://qiita.com/waterada/items/986660d31bc107dbd91c
kintone アプリ間で、相互に関連レコード一覧を表示させてみる。

# ０．はじめに

kintone アプリ間で、相互に連携する関連レコードの一覧を表示したくて、ちょっと試してみました。

大枠の構成は、こちら。

![名称未設定.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/69d1bf9f-e2e7-99c7-75ed-729cf025135c.jpeg)

流れとしては、以下。

1. アプリＢで、アプリＡに登録されているレコードを選択する。
1. アプリＢの関連レコードに、選択されたアプリＡのレコード情報が表示される。
1. アプリＡの関連レコードに、連携IDが選択された、アプリＢの全レコード情報が表示される。

<br>

# １．アプリＡに、連携IDを追加する。
1. アプリＡに、連携用のIDの設定先として、自動計算を設定した文字列フィールドを追加します。
<br>
    * <b><font color="red">※ 作成日時から簡易的に作成した連携 ID なので、一秒以内に複数レコードの登録があると、ID の一意性が担保出来ませんので、その点ご注意下さい !! </font></b>
<br><br>
    * フィールド名 : ※任意
    * 自動計算する : 〆
        * DATE_FORMAT(作成日時, "YYYYMMddHHmmss", "system")
    * フィールドコード : ※任意
<br><br>
    * ![FireShot Capture 185 - アプリの設定 - genbasupport.cybozu.com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/5b2e3de2-c8f7-84c2-3705-6d927f7cf86a.jpeg)

# ２．アプリＢに、アプリＡの連携IDの設定先を追加する。
1. アプリＢに、アプリＡの連携IDと紐付けを設定するルックアップフィールドを追加します。
<br>
    * フィールド名 : ※任意
    * 関連づけるアプリ : アプリＡ
    * コピー元のフィールド : アプリＡに追加した連携ID
    * フィールドコード : ※任意
<br><br>
    * ![FireShot Capture 188 - アプリの設定 - genbasupport.cybozu.com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/f5c2cff7-136b-12f9-112b-1cb331245305.jpeg)

# ３．アプリＢに、関連レコード用の連携IDを追加する。
1. アプリＢに追加する関連レコードの「表示するレコードの条件」において使用されるフィールドとして、自動計算を設定した文字列フィールドを追加します。
<br>
    * フィールド名 : ※任意
    * 自動計算する : 〆
        * ※アプリＢに追加したルックアップフィールドのフィールドコード
    * フィールドコード : ※任意
<br><br>
    * ![FireShot Capture 187 - アプリの設定 - genbasupport.cybozu.com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/8106e54f-deca-e460-233d-1fa7a5eeda97.jpeg)

# ４．アプリＢに関連レコードを追加する。
1. アプリＢに以下の設定で関連レコードを追加します。
<br>
    * 参照するアプリ : アプリＡ
    * 表示するレコードの条件 : 〆
        * アプリＢに追加したルックアップフィールド
        * アプリＡに追加した連携IDフィールド
    * フィールドコード : ※任意
<br><br>
    * ![FireShot Capture 189 - アプリの設定 - genbasupport.cybozu.com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/d7fad513-3480-d542-a2cf-93830a8a82ea.jpeg)

# ５．アプリＡに関連レコードを追加する。
1. アプリＡに以下の設定で関連レコードを追加します。
<br>
    * 参照するアプリ : アプリＢ
    * 表示するレコードの条件 : 〆
        * アプリＡに追加した連携IDフィールド
        * アプリＢに追加したルックアップフィールド
            * [３.](https://qiita.com/drafts/5c91315936280dabcea7#%EF%BC%93%E3%82%A2%E3%83%97%E3%83%AA%EF%BD%82%E3%81%AB%E9%96%A2%E9%80%A3%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E7%94%A8%E3%81%AE%E9%80%A3%E6%90%BAid%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B) で作成した関連レコード用の連携IDでもOK
    * フィールドコード : ※任意
<br><br>
    * ![FireShot Capture 186 - アプリの設定 - genbasupport.cybozu.com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/f7c09f69-3377-f032-64a0-7809c7f896c4.jpeg)

# ９９．ハマりポイント

* js 連携で出来るかと思ったんですが、js 連携でのレコード情報の更新は、「一覧表示」や「詳細表示」では許可されていないので、こういう形になりました。
<br><br>
* [１.](https://qiita.com/drafts/5c91315936280dabcea7#%EF%BC%91%E3%82%A2%E3%83%97%E3%83%AA%EF%BD%81%E3%81%AB%E9%80%A3%E6%90%BAid%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B) でも記載しましたが、アプリＡの連携IDはあくまで簡易的なものなので、一秒間に複数のレコード登録が発生しそうなアプリの場合には、js 連携を作って、ちゃんと一意性の担保される連携IDを作成した方が良いと思います。

# ＸＸ．まとめ

今回こういうやり方をしましたが、もしかしたら、もっと簡単に出来る方法があるかもしれないので、良いやり方があれば、どうぞコメントお願いします。

🙇‍♂️🙇‍♂️🙇‍♂️

参考になれば♪
AWSでRoleを削除しようとしたときに、 Cannot delete entity, must remove roles from instance profile first エラーになったときの対処

あるRoleがInstance profileに関連しているとそのRoleは削除できません。しかし、instance profileは管理コンソールからは削除できないためコマンドラインから削除します。

## Roleが使われているInstance profileの確認

```bash
aws iam list-instance-profiles-for-role --role-name {ロール名}
```

この出力から、`InstanceProfileName` をメモしておきます。

## Instance profileからロールを削除する

```bash
aws iam remove-role-from-instance-profile \
  --instance-profile-name {インスタンスプロフィール名} \
  --role-name {ロール名}
```

## Instance profileそのものを削除する

```bash
aws iam delete-instance-profile \
  --instance-profile-name {インスタンスプロフィール名}
```
Qiitaを書く為にMarkdown記法を学ぶ

#はじめに
>これからQiitaを書きたいが、
「 Markdown記法ってなんだ！？ 」ってレベルの人（自分のことです）のための記事。
簡単にQiitaの書き方を下に書いています。

・<b>Markdownってそもそもなんなの？</b>
>Markdown => マークアップ言語のひとつで書きやすくて読みやすい。メールを書くときのように書きやすく、見栄えもするようにHTML文書へ変換されるフォーマット。2004年に[John Gruber](https://twitter.com/gruber)が頑張って作ってくれた。ありがとう。

---
##コードの挿入

```
 (空白行)
```[言語名:ファイル名]
  ~　　　          #ここにコードを書く
```　　　　　
 (空白行)
```

#####例

```php5:example.php
 echo 'うまくコードが記入できたかな？';
```

また、単にバッククォート(\`)で囲むと、
`このように`なりコードの一部を表示するのに使う。
#####例
>`npm start`でプロジェクトを実行してください。

---

##見出し
\#の数で表現する。
`#<h1>タグを表します。`
`##<h2>タグを表します。`
`###<h3>タグを表します。`
#####例
>#\<h1>タグを表します。
##\<h2>タグを表します。
###\<h3>タグを表します。

---

##リンクの挿入
`[コンテンツ](URL)`
#####例
>[John Gruber](https://twitter.com/gruber)


---

##画像の挿入
`ドラッグ&ドロップ` 
もしくは 
`![alt](URL "タイトル")`
もしくは
`<img width="幅" alt="代替テキスト" src="URL">`
#####例
`![IMG_0134.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489303/73e90b31-7e8a-7a25-90ee-b8394cbe6f51.jpeg)`
>![IMG_0134.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489303/73e90b31-7e8a-7a25-90ee-b8394cbe6f51.jpeg)

---

##水平線
`***`
もしくは
`---`
#####例
>***
---
---

---

##打ち消し線
`~~コンテンツ~~`
#####例
>~~今日の夕食はお寿司です。~~
*追記 カレーになりました。

---
##注釈
`コンテンツ[^1]`
`[^1]: 注釈内容`
#####例

>今日の夕食はカレー[^1]です。

---
##テーブル(表)の挿入
`column(列) x row(行)`
#####例
`3x2`
<br>
`| 1 | 2 | 3 |`
`|:-:|:-:|:-:|`
`| a | a | a |`
`| b | b | b |`
*`:-:`の部分を`:--`に変えると左寄せ、`--:`で右寄せ

>| 1 | 2 | 3 |
|:-:|:-:|:-:|
| a | a | a |
| b | b | b |

---
##イタリック体(斜体)
`*コンテンツ*`

#####例

>*イタリック体*とは手書きのような書体のことであり*斜体*と同義ではない。単に斜めになっている書体は*オブリーク*という。<font color=red>結局よくわからん。</font>

---
##フォントカラー(文字色)

`<font color=[color]>
　　コンテンツ　　
</font>`

#####例
>*イタリック体の章でフライングしてしまったが、<font color=blue>このように</font>文字色を変更することができる。*

---
##引用
`>引用文`
`>>引用文`

#####例
>引用文
>>引用文
>>>引用文

---
##エスケープ処理

`\マークダウン記号`

#####例
>\`code記法ができないよ〜`

---

###参考サイト
・ [Qiita マークダウン記法 一覧表・チートシート](https://qiita.com/kamorits/items/6f342da395ad57468ae3#%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%E3%81%AE%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97)
・ [Qiita書き方メモ](https://qiita.com/hiroyuki_hon/items/f2a779bb295fd12646ab)
・ [Markdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)
[^1]: ビーフカレー
CakePHPでHTTP ERROR 500にハマった時の解決策

#この記事について
CakePHPで`HTTP ERROR 500　This page isn't working`のエラーにハマり苦しんだので、自分が見つけた解決策をここに記述しています。
解決策を調べると、`.htaccess`の記述が違うだとか、File Permissionがおかしい等の指摘ばかりですが、CakePHPやその他のフレームワークを使用している場合、そもそも違ったところに原因があるかもしれません。
以下に、解消原因とその解決策の一例を示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464595/0f9ca223-2717-cba9-d106-8ddbc285bcdb.png)


#原因
自分の場合、CakePHPを見に行く際にロードされる`Application.php`が原因でした。
もう少し言うと、以前にCakePHPに追加したPluginの`addPlugin`の記述を`bootstrap()`メゾットの頭に記述していたものの、そこでエラーが発生していたのが原因。

```php3
    public function bootstrap()
    {
        //　ここにaddPluginを記述するとHTTP ERROR 500に落ちる
        $this->addPlugin('SoftDelete');

        // Call parent to load bootstrap from files.
        parent::bootstrap();

        if (PHP_SAPI === 'cli') {
            $this->bootstrapCli();
        }

        /*
         * Only try to load DebugKit in development mode
         * Debug Kit should not be installed on a production system
         */
        if (Configure::read('debug')) {
            $this->addPlugin(\DebugKit\Plugin::class);
        }
    }
```

#修正

```php3
    public function bootstrap()
    {

        // Call parent to load bootstrap from files.
        parent::bootstrap();

        if (PHP_SAPI === 'cli') {
            $this->bootstrapCli();
        }

        /*
         * Only try to load DebugKit in development mode
         * Debug Kit should not be installed on a production system
         */
        if (Configure::read('debug')) {
            $this->addPlugin(\DebugKit\Plugin::class);
        }
        // addPluginをメゾットの最後に書く
        $this->addPlugin('SoftDelete');
    }
```

#結果
以下のスクショのように、CakePHPのDebugモードが起動されていることがわかる。
あとはメッセージに沿って問題を解消すればいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464595/a01f81a4-14df-7631-1b94-045f18689ca5.png)

#最後に
ネットにある情報は日英両方とも探して試しましたが、解決できませんでした。
OSの設定やAppacheがおかしいのかと疑っていましたが、自分でまずデフォルトのDBに繋がっていないCakePHPを作成したところ、普通に見れたので一気に解決に繋がりました。
Go インターフェース型 備忘録

``` go
package main

import (
	"fmt"
	"strings"
)

//martian構造体の定義
type martian struct{}

func (m martian) talk() string {
	return "nack nack"
}
func (m martian) loud() string {
	return "NACK NACK"
}

//laser構造体の定義
type laser int

func (l laser) talk() string {
	return strings.Repeat("pew ", int(l))
}
func (l laser) loud() string {
	return strings.Repeat("PEW", int(l))
}

//インタフェース型の定義
type talker interface {
	talk() string
	loud() string
}

func main() {

	// talk()メソッドを持つインタフェース型のt変数を定義

	var t interface {
		talk() string
		loud() string
	}

	// 型といっても、あくまで変数宣言をしているだけなので、型名があるわけじゃない
	fmt.Printf("%T\n", t)

	t = martian{}
	fmt.Printf("%T\n", t)
	fmt.Println(t.talk())
	fmt.Println(t.loud())

	t2 := martian{}
	fmt.Printf("%T\n", t2)
	fmt.Println(t2.talk())
	fmt.Println(t2.loud())

	// 仮にtypeで定義しても、代入するまでnilで、代入しても代入した値の型名になる。
	var t3 talker
	fmt.Printf("%T\n", t3)
	t3 = martian{}
	fmt.Printf("%T\n", t3)
	fmt.Println(t3.talk())
	fmt.Println(t3.loud())

	//順に定義していった場合
	var i laser
	i = 5

	var t4 talker
	t4 = i

	fmt.Println(t4.talk())
	fmt.Println(t4.loud())

	//キャストして定義していった場合
	i2 := laser(10)
	t5 := talker(i2)

	fmt.Println(t5.talk())
	fmt.Println(t5.loud())

	//キャストをネスト
	t6 := talker(laser(15))
	fmt.Println(t6.talk())
	fmt.Println(t6.loud())

	//もう全部いれちゃう
	fmt.Println(talker(laser(25)).talk())
	fmt.Println(talker(laser(25)).loud())

}

```
VirtualBoxからドメインが解決できない

# VirtualBoxからドメインが解決できない
## 事象
### VirtualBoxからPingが通らない
```
ping google.co.jp
ping: unknown host google.co.jp
```
## IP直で疎通するか確認
* googleのIPを調べる

```
nslookup google.co.jp
----------------------
名前:    google.co.jp
Addresses:  2404:6800:4004:800::2003
          216.58.197.131
```

* ViatualBoxからIP直でpingしてみる
 
```
[root@xxxxx ~]# ping 216.58.197.131
PING 216.58.197.131 (216.58.197.131) 56(84) bytes of data.
64 bytes from 216.58.197.131: icmp_seq=1 ttl=53 time=2.27 ms
64 bytes from 216.58.197.131: icmp_seq=2 ttl=53 time=3.13 ms
```
IP直なら疎通しているのでDNSでのドメインIP変換がダメなようだ

## 利用するDNSを確認する
* [Linux クライアント側のDNS設定](https://www.infraeye.com/study/linuxz52.html)

```
vim /etc/resolve.conf

nameserver 172.24.5.81
domain xxxxx.local
```

* 古い社内DNSに向いていたので、新しいIPに書き換えて設定反映

```
#nameserver 172.24.5.81
nameserver 172.17.1.20
domain xxxx.local

[root@xxxx ~]# /etc/init.d/network restart
```

## 再度疎通確認
```
[root@xxxx ~]# ping google.co.jp
PING google.co.jp (216.58.197.131) 56(84) bytes of data.
64 bytes from nrt12s01-in-f131.1e100.net (216.58.197.131): icmp_seq=1 ttl=53 time=2.51 ms
```

* 無事に疎通確認。社内でネームサーバー変更した時は注意せねば。
*
HTMLにslideshow.jsを組み込む方法

##今回は、Websiteにslideshowを導入して、写真データが代わる代わる投影していく方法を纏めてみました。
当然スライドショーを動かすためには、　slideshow.js　ファイルを　js　フォルダ内に置いてあることが前提になります。

次のslideshowプラグイン情報を参照してください。
[使えそうなjQueryのSlideshowプラグイン: Slides](https://parashuto.com/rriver/development/slides-jquery-slideshow-plugin)


ではNAVの下にスライドショーを組み込む方法です。

img src="images/画像データ名"　と、　alt="データ名"　と、　class="データ名"　などのデータ名は、任意のものであります。データの階層を間違いないようにしましょう。


```html:base-graphic.html
<nav>
	<ul>
		<li>
			..........
		</li>
	</ul>
</nav>

<div id="graphic">
	<ul>
		<li class="now"><img src="images/slide1.jpg" alt="こだわりの空間" class="image1"></li>
		<li><img src="images/slide2.jpg" alt="チャペル" class="image2"></li>
		<li><img src="images/slide3.jpg" alt="ありがとう" class="image3"></li>
	</ul>
</div>
```

html内の　slideshow.js　の呼び出し部分（=script）は基本的に　head　内、　body　内のどこにでも置くことが出来ますが、コンピュータは上から下に言語を読み込む仕組みゆえに、　/footer　の下に書き込むのが普通になっております。その方が、　Website　の読み込みが速く進みます。

```html:slideshow.js
...
<footer>
...
</footer>
<script src="js/slideshow.js"></script>
</body>
</html>
```
Photon(PUN2)でネットワークオブジェクトを設定する時のメモ

# 環境
- Unity2018.3以降
- PUN2

# 準備
1. [PUN2で始めるオンラインゲーム開発入門【その１】 - Unity Connect](https://connect.unity.com/p/pun2deshi-meruonraingemukai-fa-ru-men-sono1)の**初期設定をしよう**に則って初期設定を行う
3. ネットワークオブジェクトにしたいGameObjectをPrefab化し、Resourcesフォルダに入れる

3. PhotonViewをアタッチする


# Transoformを同期する場合

1. PhotonTransformViewをPrefabにアタッチする

2. PhotonTransformViewのSyncronize OptionsのPosition, Rotation, Scaleの項目の中から同期したい項目にチェックを入れる

3. PhotonViewのObserved Componentsに、アタッチしたPhotonTransformViewをドラッグ&ドロップする

# Animatorを同期する場合

1. PhotonAnimatorViewをPrefabにアタッチする

2. PhotonViewのObserved Componentsに、アタッチしたPhotonAnimatorViewをドラッグ&ドロップする

3. PhotonAnimatorViewのオプションから同期したい項目を設定する

# その他の特定のパラメータを同期する場合

1. 同期を担当するクラスを作成し(既にある場合は作成する必要はありません)、`IPunObservable`インターフェースを実装する

2. 次のように`OnPhotonSerializeView()`メソッドを作成する(ここでは`parameter`を同期したいパラメータとしています)

```csharp

public void OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info)
{
    if (stream.IsWriting)
    {
        stream.SendNext(this.parameter);
    }
    else
    {
        this.parameter = (int)stream.ReceiveNext();
    }
}

```

3 . PhotonViewのObserved Componentsに上記の処理を書いたコンポーネントをドラッグ&ドロップする


# インスタンスを生成する

ネットワークオブジェクトは

```csharp

PhotonNetwork.Instantiate("PrefabName", position, rotation, 0);
```
で生成することができます。
このメソッドの第4引数は**グループ**を指定しています。
**グループ**というのはルーム内にあるサブチャンネル的なもので、ルーム内の特定の人達とボイスチャットをしたい場合などに使います。
ここではとりあえず0を指定しています。

# 参考文献

- [7 - Player Networking \| Photon Engine](https://doc.photonengine.com/en-us/pun/v2/demos-and-tutorials/pun-basics-tutorial/player-networking)
- [PUN2で始めるオンラインゲーム開発入門【その１】 - Unity Connect](https://connect.unity.com/p/pun2deshi-meruonraingemukai-fa-ru-men-sono1)
フロントエンドとバックエンドをわけて開発する

## はじめに
従来のWebシステムはフロントエンドとバックエンドを区別せず、ブラウザからのリクエストを受けると処理を実行後、HTMLを返すようなものでした。
![web-system.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105279/964b74fa-4c09-502d-3089-eb021515aaeb.png)
最近はユーザに快適な操作感を提供するためSPAとしてWebシステムを作成することも多くなってきています。
SPAを実現するために、Reactなどのフロントエンドのフレームワークを利用し、フロントエンドとバックエンドを別々に開発することもあります。
ここでは、フロントエンドとバックエンドをわけて開発することの利点を説明し、実際に開発するとき、どのような構成で開発すると良いかを説明します。

## フロントエンドとバックエンドをわけるメリット
メリットとしては以下の３つが挙げられます。
* バックエンドが簡潔になり、再利用性が高まる
* フロントエンドとバックエンドを別チーム/並行で開発できる
* フロントエンド/バックエンドがそれぞれリリースでき、リリースが簡単になる

### バックエンドが簡潔になり、再利用性が高まる
従来のWebシステムで実施していた次のような機能をフロント側で実施することにより、バックエンドはWeb API(REST)として作成することができます。
* HTMLレンダリング
* セッション管理
* ルーティング
バックエンドが画面を意識することなく、データをJSONで返すようになれば、フロント側（呼び出し側）で表示の仕方を調整すればいいので、PCやスマホなど様々なデバイスから利用可能にすることも容易になります。
### フロントエンドとバックエンドを別チーム/並行で開発できる
フロントエンドとバックエンドとの結合はAPIの呼び出しとその応答になるので、APIのインターフェースを決めればバックエンドの実装ができていなくても、フロントエンドの開発をすることができます。
そのため、フロントエンドとバックエンドの開発を並行して実施することができます。また、フロントエンドとバックエンドでは使用する技術や考えるポイントも異なるため、それぞれ担当するチームを用意し、別々のチームで開発することが可能です。
### フロントエンド/バックエンドがそれぞれリリースでき、リリースが簡単になる
フロントエンドは見た目の変更などでリリースが必要になるので、バックエンドに比べてリリースのサイクルは短くなります。
フロント側だけの修正にも関わらず、バックエンドもいっしょにリリースするとなると手間が大きくなり、リリースサイクルを短く保つのが難しくなります。しかし、フロントはフロントだけでリリースが可能になるので、リリースが簡単になりリリースサイクルを短くすることができます。

## 開発の構成
### フロントエンド開発
![front-dev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105279/86628fbb-0252-512d-0494-ff9661321779.png)
フロントエンドの開発はボイラープレートを利用して、プロジェクトの雛形を作成します。
[React](https://ja.reactjs.org/)を利用する場合は、[create-react-app](https://github.com/facebook/create-react-app)を利用して開発を始め、実行したい場合は npm start コマンド(内部的にはwebpack-dev-server)でフロントエンドの開発資材を提供できる状態にし、ブラウザからアクセスします。
フロント部分でバックエンドにAPIリクエストを投げますが、開発時はまだバックエンドのAPIがないことが想定されるのでモックサーバを用意します。
バックエンドをREST APIとして実装するならモックサーバとして [JSON Server](https://github.com/typicode/json-server)がおすすめです。リソースをjson形式で用意しておくだけで、REST APIとして動作します。またCORSの対応もされているので、どこからのアクセスに対しても応答を返すので、開発時にCORSで悩まされることがありません。

### バックエンド開発
![back-dev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105279/acd683cf-3693-ed2d-c1b9-75b6300f4519.png)
バックエンドはSpringを利用して開発し、そのまま組み込みTomcatで起動させるのが一番楽だと思います。
[Spring Initializr](https://start.spring.io/)でテンプレートを作成すれば、mvn spring-boot:run コマンドで組み込みTomcatで起動できます。
APIを叩くリクエスターとしてはブラウザからアクセスしても良いですが、[Postman](https://www.getpostman.com/)を利用すればリクエストのシナリオを用意してシナリオを順に実行することができ、API のテストが実施できます。

## まとめ
Webシステムをフロントエンドとバックエンドにわけて開発することでSPAによって快適な操作感を提供できるだけでなく、バックエンドの簡素化や開発のしやすさのメリットが得られます。
また、フロントエンドとバックエンドを別々に開発するとき、対抗先が未完成の場合にモックサーバやリクエスターを利用することで別々に開発を進めることができます。

気をつける点としては、フロントエンドの責務を多くしすぎるとフロントエンドが複雑になりメンテナンスが難しくなることと、バックエンドエンジニアに比べてフロントエンドエンジニアが少ないことです。それぞれのスキルセットを持った人員の準備と複雑な構成にならないように設計する必要があります。
Sidekiqプロセス配下の実行中ジョブを取得する

## やりたいこと
Dockerなどで複数のSidekiqプロセスが立ち上がっている状態でプロセス配下のジョブだけを取得したい

## 方法
```
# 実行環境のSidekiqプロセス識別子を取得
process_identity = Sidekiq::JobRetry.new.identity

Sidekiq::Workers.new.each do |process_id, thread_id, job|
  # 一致しなければskipする
  next unless process_identity == process_id

  ... # ジョブに対して実行したい処理
end
```

## 説明
`Sidekiq::Workers.new`で取得できる実行中ジョブは、全Sidekiqプロセスで実行されているジョブが含まれているので、その中から選別する必要がある。
Docker環境でなければ、以下のようにプロセスごとの識別子を取得できる。

```
Sidekiq::ProcessSet.new.find { |p| p['pid'] == Process.pid }.identity
```
Docker環境の場合、同一PIDで稼働させていることがあるので、PIDは利用できず、`Sidekiq::Util`のクラス変数を直接読みにいく。
`Sidekiq::Util`がincludeされているクラスで比較的簡単にインスタンス化できそうなもの(根拠はない)として、`Sidekiq::JobRetry`を利用する。

## 経緯
sidekiq-unique-jobsの`until_and_while_executing`が通常のSidekiqのプロセス終了時のリトライ処理ではロックの関係でリトライできなかったので、ロック削除したり、enqueueし直したりする必要があった。
Sidekiqのshutdownブロック(`config.on(:shutdown)`)にて実行中のジョブに対して処理を実装していたら、複数のdockerコンテナが同時に終了したときに同じジョブが大量にenqueueされて困った。
docker-composeコンテナ間でUnixソケット通信をする

# docker-composeでソケットを共有する

1. 共通ボリュームを作成
2. 参照したいソケットのあるコンテナのソケット位置を共通ボリュームに接続
3. 参照する側のコンテナに共通ボリュームをマウント

でOKです。

以下、とあるAPIサーバからMySQLに繋ぐときの例です。

```yaml
version: "3.7"
services:
  api:
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - "8080:8080"
    environment:
      # （Optional） アプリから参照するときは環境変数からソケット位置を取る
      - DB_SOCKET: /var/run/mysqld/mysqld.sock
    depends_on:
      - db
    volumes:
      - dbsocket:/var/run/mysqld # ↓で共有しているソケットファイルディレクトリを任意の位置にマウント
  db:
    image: mysql:5.7.26
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: test
      MYSQL_USER: test
      MYSQL_PASSWORD: test
    ports:
      - "3306:3306"
    volumes:
      - dbsocket:/var/run/mysqld # mysqldソケットファイルディレクトリを共有
volumes:
  dbsocket: # 共通ボリュームを作成

```

参照する側にも同じディレクトリがあるとぶつかって予期せぬことが起こりそうなので、
ソケット共有したいディレクトリが参照側のコンテナにも既に存在するのであれば
別の位置にしたほうが良いと思います。
例では参照する側(APIコンテナ)の`/var/run/mysqld`は存在しないので、
わかりやすくmysqlコンテナと同じ位置にマウントしています。

# コンテナ間ソケット通信が必要になった背景

主にCloud Runのせいです←

GCPのCloud RunからCloud SQLに繋ぐとき、GoogleはCloud SQL Proxyを介して
ソケット通信する方法を推奨しています。そうなると、本番環境はソケット通信ですが
通常のdocker-compose方式の開発であればローカルDBへは普通にTCP接続するので、
組み立てるコネクションストリング形式をローカル環境と本番環境で分岐する必要があります。

が、個人的には余計なトラブルを防ぐため環境差異をできるだけ無くし
ローカルもソケット接続にして同じコネクションストリングを使用したく、
やり方を模索していたところ案外あっさり行けたので記事起こししました。
GqlExecutionContext.create(context).getContext().reqって？

# バージョン
6.7.1

# 結論
Expressのresだった

# きっかけ
GraphQLとpassportの連携時

```typescript

import { ExecutionContext, Injectable, Logger } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class GqlAuthGuard extends AuthGuard('oauth2-client-password') {
  getRequest(context: ExecutionContext) {
    const ctx = GqlExecutionContext.create(context);
    const request = ctx.getContext().req;
    /*
    for (var n in request) {
      if (typeof request[n] === 'function') {
        Logger.log(n);
      }
    }
    */
    Logger.log(request.params);
    Logger.log(request.body);
    Logger.log(request.query);
    return request;
  }
}
```

ちなみに、`graphql-tag`で`request.body.query`をパースした結果

```javascript

{
  "kind": "Document",
  "definitions": [
    {
      "kind": "OperationDefinition",
      "operation": "mutation",
      "variableDefinitions": [],
      "directives": [],
      "selectionSet": {
        "kind": "SelectionSet",
        "selections": [
          {
            "kind": "Field",
            "name": {
              "kind": "Name",
              "value": "login"
            },
            "arguments": [
              {
                "kind": "Argument",
                "name": {
                  "kind": "Name",
                  "value": "client_id"
                },
                "value": {
                  "kind": "StringValue",
                  "value": "demo",
                  "block": false
                }
              },
              {
                "kind": "Argument",
                "name": {
                  "kind": "Name",
                  "value": "client_secret"
                },
                "value": {
                  "kind": "StringValue",
                  "value": "abcdefgh",
                  "block": false
                }
              }
            ],
            "directives": [],
            "selectionSet": {
              "kind": "SelectionSet",
              "selections": [
                {
                  "kind": "Field",
                  "name": {
                    "kind": "Name",
                    "value": "accessToken"
                  },
                  "arguments": [],
                  "directives": []
                }
              ]
            }
          }
        ]
      }
    }
  ],
  "loc": {
    "start": 0,
    "end": 101
  }
}
```
【labelImg：物体検出】公式READMEが当てにならない件

# labelImgの公式READMEが当てにならない
labelimgの[githubの公式README](https://github.com/tzutalin/labelImg)通りに動かそうとするとpyqt周りでエラーが... そんなエラーを解決していられるほど私たちは暇ではありません． さっさとlabelimgを動かしてアノテーションして学習を回したいという**Macユーザ**のニーズにお応えして秒速でlabelimgが使えるようになる魔法の解決方法をお伝えします．



# 解決方法
ターミナルで以下のコマンドをまるごとコピペしてEnterキー押すだけ！
（qt周りのエラーが出ないので本当にオススメです！）

```bash
brew install python3
pip install pipenv
pipenv --three
pipenv shell
pip install pyqt5 lxml
make qt5py3
rm -rf build dist
python setup.py py2app
cp -rf dist/labelImg.app /Applications
exit
```
ぱっと見わかりにくいですが，Dockにこんなアプリアイコンができてます．
<img width="409" alt="スクリーンショット 2019-09-20 12.44.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/e9472402-5bc2-8288-7512-a6b9ec183b96.png">

# 結果
こんな感じできちんと動作してます．
<img width="1280" alt="スクリーンショット 2019-09-20 12.36.50_gimp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/312e3441-567a-e172-6a9e-359d1a65d1b5.png">

# 環境
<img width="544" alt="スクリーンショット 2019-09-20 12.40.28_gimp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/4024a342-f112-fcf9-0033-0f97d7aeaf67.png">


###P.S.
なぜかポケモンの裏技投稿サイトみたいな書きっぷりになってしまいました笑
機械学習，自動運転などをメインに（たまにそれ以外も）発信しているのでぜひ [twitterのフォロー](https://twitter.com/cv_carnavi)おねがいします．
AWSサービス、データベース

# データベース

AWSデータベースサービスについての備忘録
サービスの概要・特徴・料金などを簡潔（できれば）に記載します。

## Amazon Aurora
高性能マネージド型リレーショナルデータベース

### 概要
クラウド向けに構築された、MySQL および PostgreSQL と互換性のあるリレーショナルデータベース

### 特徴
* MySQL および PostgreSQL と互換性のある
* データベースに最大 15 個の Aurora レプリカを作成
* 最大 64 TB まで自動スケール

## Amazon DocumentDB (MongoDB 互換)

### 概要
フルマネージド型ドキュメントデータベース
高速でスケーラブルかつ高可用性の MongoDB 互換データベースサービス

### 特徴


## Amazon DynamoDB

### 概要
フルマネージドで高速な NoSQL データベース

### 特徴
* 一定の低レイテンシーのパフォーマンスを維持しながら水平スケーリングが可能
* 単一障害点（SPOF）が存在しない、データは3AZに保存されるから。
* プロビジョンドスループット、テーブル毎にRead/Writeそれぞれに対し、必要なスループットキャパシティを割り当てることが可能
* ストレージの容量制限がない
* DynamoDB ストリームを使用したリアルタイムのデータ処理
* DynamoDB Time-to-Live 一定期間を過ぎたアイテムを非同期に削除する事が可能
* VPCエンドポイント（VPC内で完結）
* DynamoDB Acceralator DAX、DynamoDBの前面にマネージドなキャッシュクラスタを設置、DynamoDB Accelerator でマイクロ秒のレイテンシーを実現
* 更新・削除に対しては、結果整合性を採用

### ユースケース
* ユーザ属性、行動履歴DB、ソーシャルアプリのバックエンド
* 堅牢かつ高スケールするシステムの構築
* スループットが増減するようなピーク帯のあるシステム
* 大量のデータを貯めていくようなシステム


## Amazon ElastiCache
マネージドで提供するDynamoDBよりも高速なインメモリキャッシュなNoSQLサービス

### Redis 用 Amazon ElastiCache
* クラウド向けに構築された Redis 互換のインメモリデータストア
* ミリ秒未満のレイテンシーを実現し、リアルタイムアプリケーションを強化できる
* データの永続化に対応
* 多数のデータ構造をサポート
* リードレプリカ/フェイルオーバー機能
* クラスタ機能で秒間処理を大きくできる
* Pub/subメッセージング（チャットアプリケーション
* リーダーボード（ランキング
* リアルタイム分析
* 位置情報処理

### Memcached 用 Amazon ElastiCache
* Memcached と互換性のある、マネージド型のインメモリ key-value ストアサービス
* リアルタイムアプリケーションを可能にするミリ秒未満のレイテンシーを実現
* マルチスレッド対応
* 単純なデータタイプ向き


## Amazon Neptune

### 概要
完全マネージド型グラフデータベースサービス

### 特徴
* ソーシャルネットワークのリレーション調査
* 推奨エンジン（リコメンド）

## Amazon Quantum Ledger Database (QLDB)
フルマネージド型台帳データベース

## Amazon RDS

### 概要
MySQL、PostgreSQL、Oracle、SQL Server、MariaDB 向けの構築、運用、拡張が容易なマネージド型リレーショナルデータベースサービス

### 特徴
* RDSリードレプリカが設置が　MySQL（5台）、MariaDB（5台） 、PostgreSQL（5台）、Oracle（5台）、Aurora（15台）　に対応
* フルマネージド化による運用負荷の軽減
* 数クリックでDataBaseが起動
* データベースをサービスとして提供
* マルチAZデプロイメント（Multi-AZ）構成で高可用性を実現、フェイルオーバー
* 自動でスナップショットを作成（0日～35日）、35日を超える場合は、手動でスナップショットを作成する
* 自動でスナップショットは、DBインスタンスのサイズと同じサイズまでストレージコストが無料
* Auroraは、ディスク容量を64TBまで拡張できる。Aurora以外は、16TB。

### ユースケース
* 複雑なトランザクション管理が必要な場合
* 単一のワーカーノード/シャードで管理する必要がある場合
* ある程度高速な書込みが必要な場合
* データの耐久性が重要な場合

## Amazon RDS on VMware
オンプレミスデータベースの管理を自動化

## Amazon Redshift

### 概要
高速、スケーラブルで費用対効果の高いデータウェアハウスおよびデータレイク分析マネージドサービス

### 特徴
* データウェアハウス・分析向けに特化したRDB
* ギガバイトからペタバイト規模に拡張できる、動的にスケールアップ/アウトが可能
* Amazon Redshift Spectrum（スペクトラム） 、Amazon S3に対する直接クエリ実行
* セキュリティグループによるセキュリティ強化
* リーダーノードは、課金対象外


### ユースケース
* 全社横断的なデータ分析基盤



## Amazon Timestream
フルマネージド型の時系列データベース

## AWS Database Migration Service（AWS DMS）
最小限のダウンタイムでデータベースを移行できるサービス
Project Euler 022を解いてみる。「名前のスコア」

# Project Euler 022
[022](http://odz.sakura.ne.jp/projecteuler/index.php?cmd=read&page=Problem%2022)
>5000個以上の名前が書かれている46Kのテキストファイル[names.txt](http://odz.sakura.ne.jp/projecteuler/index.php?plugin=attach&refer=Problem%2022&openfile=names.txt)を用いる. まずアルファベット順にソートせよ.
のち, 各名前についてアルファベットに値を割り振り, リスト中の出現順の数と掛け合わせることで, 名前のスコアを計算する.
たとえば, リストがアルファベット順にソートされているとすると, COLINはリストの938番目にある. またCOLINは 3 + 15 + 12 + 9 + 14 = 53 という値を持つ. よってCOLINは 938 × 53 = 49714 というスコアを持つ.
ファイル中の全名前のスコアの合計を求めよ.

->[次の問題](https://qiita.com/radiol/items/3a9153b3b908c40b14e8)

初め「アルファベットに値を割り振り〜」ってなんだろうと思いましたが、A=1 B=2 C=3のようにアルファベット順に値をつけるって意味でした。

## 考え方
まず、与えられたテキストを確認してみたところ、

- 改行なし。1行に全ての名前が記載。
- 名前は前後に`"`あり。
- `,`区切り、スペースなし。

という形式でした。まずはテキストを読み込んでリストに変換します。

```Python:euler022.py
# ファイルを開いてtxtに読み込み
with open('names.txt') as file:
    txt = file.readline()
# 不要な"を除去
txt = txt.replace('"', '')
# ,区切りでリストに変換
names = txt.split(',')
# ソート
names.sort()
```
ついでにソートしています。もしかしたら問題としてはソートするアルゴリズムを自分で作って欲しいのかもしれませんが、**組み込みで入っているものは使ってよいのだ**の精神で行きます。

nameのアルファベットスコアを出す部分は関数として定義しました。
ordを使うことで文字コードに変換できるのでそれぞれの文字コードから「A-1の文字コード」を引いています。

```Python:euler022.py
def name_to_score(name: str) -> int:
    """
    nameの文字列をスコアに変換する
    A = 1, B = 2,...として和を返す
    ordで文字コードに変換 ord('A')=65なのでそれぞれの文字コードから64を引いている
    :param name: str
    :return: int
    """
    base = ord('A') - 1
    return sum([(ord(char) - base) for char in name])
```
あとは算出したアルファベットスコアに順番をかけて合計すればOKです。
enumulateを使用してインデックスとリストの中身を同時に取得しています。

## コード
```Python:euler022.py
def main():
    with open('names.txt') as file:
        txt = file.readline()
    txt = txt.replace('"', '')
    names = txt.split(',')
    names.sort()
    scored_names = [(i + 1) * name_to_score(name) for i, name in enumerate(names)]
    print(sum(scored_names))


def name_to_score(name: str) -> int:
    """
    nameの文字列をスコアに変換する
    A = 1, B = 2,...として和を返す
    ordで文字コードに変換 ord('A')=65なのでそれぞれの文字コードから64を引いている
    :param name: str
    :return: int
    """
    base = ord('A') - 1
    return sum([(ord(char) - base) for char in name])


if __name__ == '__main__':
    main()
```
Mac book proにて実行
`結果
871198282
main処理時間: 0.00870203971862793 sec.
`
Promiseを一回だけ実行する（非同期メモ化）

```js
class X {
  async init() {
  }
}
```
みたいなPromiseがあったとき、これを一回だけ実行したい。普通に考えると、initの結果をキャッシュするメモ化を行いたくなる。たとえば、以下のコード。

```js
// Bad Pattern
class X {
  async init() {
      if (!this.initResult) {
        this.initResult = await this._init();
      }
      return this.initResult;
  }
  async _init() {
  }
}
```
これだと、initの実行中に別のinitが開始されると複数回実行されてしまう。

こういう場合には、定石があって、

```js
class X {
  init() {
      if (!this.initPromise) {
        this.initPromise = this._init();
      }
      return this.initPromise;
  }
  async _init() {
  }
}
```
とする。あまり変わらないようだけど、asyncが外れたことで、メモ化の対象がPromiseになったことがポイント。この場合、_initは必ず一回だけ実行される。Promiseは、pendingやresolved状態で、何度でもresolveできるので、この性質を使っている。自分は、最初、この挙動を理解するのに結構戸惑ったけど、最近やっと慣れてきた。

さて、実装としては、これで良いのだけど、このためだけに、_initとか、initPromiseとか本質的ではない名前が増えるのは嫌だ。そういうときのためにdecoratorというものがある。

```js
function memoize(target, fieldName, descriptor) {
  const func = descriptor.value;
  const memoizedFieldName = Symbol(`$$once_${fieldName}`);
  return Object.assign({}, descriptor, {
    value: function() {
      if (!this[memoizedFieldName]) {
        this[memoizedFieldName] = func.apply(this);
      }
      return this[memoizedFieldName];
    },
  });
}

class X {
　@once
  async init() {
  }
}
```

前のコードで、_initに相当するフィールドは、クロージャーに隠蔽され、initPromiseに相当するフィールドは、シンボルで隠蔽されてるので、Xの名前空間は何も汚染せず、整理整頓された気分になる。

onceという名前にしたけど、内部の実装はただのメモ化で、同期処理のメモ化にも使える。実務上は、以下のようなライブラリを使えば良い。

https://www.npmjs.com/package/memorize-decorator

ちなみに、「非同期メモ化」で検索したら、4年前に自分が書いた記事が出てきた。

https://qiita.com/norami_dream/items/ae9a1919f86c773d95c9

やりたいことは同じなんだけど、今回紹介した、Promiseを使ったやり方の方がエレガントでコード量も少ないので、前に書いたやり方を使うべき状況はないと思う。4年前にはPromiseはすでに一般的だったと記憶しているけど、その時点で、自分はPromiseのことを良く理解してなかったらしい。黒歴史だ。
Elixir Zen スタイル バイナリ＋パターンマッチでバイナリデコーダを作ってみよう！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Elixir Zen スタイル講座，お次はバイナリデコーダを作ってみましょう。バイナリデコーダって何？って話なんですが，具体例としてはCPUエミュレータとかバイトコードインタプリタ，ELFバイナリのダンプ，MIDIシーケンサなど，あるビット列に合致するかどうかで条件分岐するようなプログラムです。</p>&mdash; Susumu Yamazaki (@zacky1972) <a href="https://twitter.com/zacky1972/status/1174887899986182144?ref_src=twsrc%5Etfw">September 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">このようなバイナリデコーダは，Elixir ではバイナリとパターンマッチの組合せで，とても見通し良く書くことができます。ではやっていきます。</p>&mdash; Susumu Yamazaki (@zacky1972) <a href="https://twitter.com/zacky1972/status/1174888218690379776?ref_src=twsrc%5Etfw">September 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ではコード例をご紹介。MIDIシーケンサーの一部を書いてみました。

```elixir
defmodule MidiDecoder do
  def decode(<<>>), do: []

  def decode(<<
  	8::size(4),
  	channel::bitstring-size(4),
  	velocity::bitstring-size(8),
  	rest::bitstring()
  >>) do
  	[{:note_off, channel, velocity}] ++ decode(rest)
  end

  def decode(<<
  	9::size(4),
  	channel::bitstring-size(4),
  	velocity::bitstring-size(8),
  	rest::bitstring()
  >>) do
  	[{:note_on, channel, velocity}] ++ decode(rest)
  end
  …
end
```

まず

```elixir
def decode(<<>>), do: []
```

これは再帰呼び出しを止めるために存在します。

次に

```elixir
  def decode(<<
  	8::size(4),
  	channel::bitstring-size(4),
  	velocity::bitstring-size(8),
  	rest::bitstring()
  >>) do
  	[{:note_off, channel, velocity}] ++ decode(rest)
  end
```

コメントで注釈を入れていきますね。

```elixir
  def decode(<<
  	8::size(4),                   # 4ビット取り出して値が8である場合
  	channel::bitstring-size(4),   # 次の4ビットは channel に割り当てます
  	velocity::bitstring-size(8),  # その次の8ビットは velocity に割り当てます
  	rest::bitstring()             # 残りです。
  >>) do
  	[{:note_off, channel, velocity}] ++ decode(rest)  # ノートオフを読み出せました
  end
```

では同様にこちらも読み解いてみましょう。

```elixir
  def decode(<<
  	9::size(4),
  	channel::bitstring-size(4),
  	velocity::bitstring-size(8),
  	rest::bitstring()
  >>) do
  	[{:note_on, channel, velocity}] ++ decode(rest)
  end
```

わかりました？

こんな感じで，バイナリ列にマッチするような条件分岐をスマートに書くことができます！

これを Elixir Zen スタイルの新しい仲間に加えたいと思います。
エンジニア「雨ニモマケズ」

# 雨ニモマケズ
---
# 風ニモマケズ
---
# 雪ニモ夏ノ暑サニモマケヌ
---
# 丈夫ナPCヲ持チ
---
# ウソノ報告ヲセズ
---
# 無駄ナモノヲ提案シナイ
---
# 自由ナ服ヲ着テ
---
# 好キナダケもにたーヲ増ヤシ
---
# 好キナOSデ
---
# 好キナ席デ
---
# 残業モセズ
---
# 通勤モセズ
---
# 週ニ3日ハ休ミ
---
# 東ニExcelガふりーずシタ人イレバMicrosoftダカラダヨト言イ
---
# 西ニ休出ノ人イレバすこーぷ見直セト言イ
---
# 寛大ナ心デ人ヲ育テ
---
# 新シイコトニ貪欲ニ取リ組ミ
---
# 決シテですまーちニシナイ
---
# サウイフモノニ
---
# ワタシハナリタイ

---
それぞれに対する想いは[ブログ](https://hyunwookpark.github.io/itenziniayu-nimomakezu.html)に書きました。
仮想通貨アービトラージBinanceAPIのLOT_SIZEエラー

# はじめに
各国の取引所をクローリングして
価格差で利益を得るアービトラージシステムを作って回しているのですが
たまにBinanceでオーダーエラーが発生して
ググってもろくな情報がなくいつも困っているので
メモとして残しておこうと思います。

# BinanceのLOT_SIZEエラーとは
**[公式ドキュメント](https://github.com/binance-exchange/binance-official-api-docs/blob/master/rest-api.md#lot_size)**を見ると・・・

```
The LOT_SIZE filter defines the quantity (aka "lots" in auction terms) rules for a symbol. There are 3 parts:
　● minQty defines the minimum quantity/icebergQty allowed.
　● maxQty defines the maximum quantity/icebergQty allowed.
　● stepSize defines the intervals that a quantity/icebergQty can beincreased/decreased by.

In order to pass the lot size, the following must be true for quantity/icebergQty:
　● quantity >= minQty
　● quantity <= maxQty
　● (quantity-minQty) % stepSize == 0

/exchangeInfo format:
{
  "filterType": "LOT_SIZE",
  "minQty": "0.00100000",
  "maxQty": "100000.00000000",
  "stepSize": "0.00100000"
}
```
はぁ・・・
って感じです(^^;)

# 書いてある内容
上２つは見た通りすごく簡単で
・最小取引額
・最大取引額
これの中でオーダーしろよってことですね。

問題は最後の１つ・・・
・(quantity-minQty) % stepSize == 0

うーん・・・って感じですが
結論から言ってしまうと最小単位が決まってるってことです。

小数点以下の桁が小さ過ぎるのはダメ。
細かい単位を指定するな！ということでした。

# 最小額・最大額・最小単位
これは通過毎に決まっていて、**[ここ](https://api.binance.com/api/v3/exchangeInfo)**から確認できます。
イーサリアムの場合には

```
	"symbols": [
		{
			"symbol": "ETHBTC",
*途中省略*
				{
					"filterType": "LOT_SIZE",
					"minQty": "0.00100000",
					"maxQty": "100000.00000000",
					"stepSize": "0.00100000"
				},

```
ということで
僕が指定していた額が「5.1132 ETH」だったので
小数点以下は3桁までにしろ！！って怒られたという訳です (^^;)

stepSize以下は切り捨てるか・切り上げるか・四捨五入するか・・・
アービトラージなのでしっかり利益が取れるようにすることが重要です。
設計し直してプログラムを改修します。


# 最後に
このアービトラージシステムは初月で月利8％を記録しています。
とんでもない数字ですね。
（銀行なんて年利で・・・）

株式会社アポロではブロックチェーンで様々なプロダクトを作って利益をあげています。
**[世界初のAI](https://www.facebook.com/courage.liberty/posts/3143285182409595&width=500)**の開発もしていますので、ご興味ある方は是非**[こちら](https://apo-llo.com/#projects)**をご覧ください (^^)
MacOS Mojaveでfasttextがインストール出来なかった

fasttextを動かそうと思ったらインストールに手こずったので備忘録として

### 環境

* MacBook Pro
* Mojave ver.10.14.6
* Xcode 9.4
* python 3.5.6

### 状況

* pythonで動かそうと `import fastText` したところ No module エラー
* MacOS Serriaの時に一度入れようとしたような気がする...
* mecabとかgccとかは入っている

```
$ pip freeze
$ fasttext==0.8.3
```


### 解決までにやったこと

`pip install fasttext` ではいけないことは知っていました。

[fastTextをpipインストールしてはいけない話](https://qiita.com/YuukiMiyoshi/items/c862ab8b5796ee717a3d)
上記の記事通りにリポジトリをクローンして `pip install .` としたところ、長文のエラーが出現...!

[fastTextのインストールエラー](https://qiita.com/ekkyu/items/441d5d5527b9cfd7fce9)
このへんをやってみるも治らず。

### 最終的にこれで解決しました。

```
$ export MACOSX_DEPLOYMENT_TARGET=10.9
$ python setup.py install
```

[build error: clang: error: linker command failed with exit code 1](https://github.com/facebookresearch/fastText/issues/669)
はじめのhtmlメール

# htmlメールとは
htmlメールとは、ウェブーページような写真や文字をレイアウトした、HTMLで作った電子メールです。下記の写真ようなものです。
<img width="375" alt="unnamed (1).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434532/d672ebe2-188d-6102-666b-5d16b66953ed.jpeg">

#メリット
● 開封数(HTMLメール内の画像の読み込まれた回数)を取得できます！
● 見た目や要点を洗練されたメールはユーザーに好まれやすいです！

#htmlメールの構造

```html:qiita.rb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>【タイトル】</title>
<style type="text/css">
   <!-- ここに埋め込み形式のCSSタグを記述して行きます -->
</style>

</head>
<body>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0"  class="base">
    <tr>
      　<td style="">
 　　　　　　<!-- ここにコンテンツをHTMLタグで記述して行きます -->
      　</td>
    </tr>
</table>
</body>
</html>
```
htmlメールの中身ですが、基本的にテーブルレイアウトで構成します。cssは別ファイルで書いて、リンクさせるのではない、cssをインラインで記載します。
ここで、一つのことが注意するべきです。htmlメールって、全部のタグやcssを使えるわけではない、使えるかどうか確認する必要があります。
<img width="480" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434532/524a2c51-f6bf-f170-352f-57e7ef6f5311.png">
The Ultimate Guide to CSS:https://www.campaignmonitor.com/css/

# まとめ
以上、簡単にhtmlメールを紹介しました。実はレスポンシブ・デザインを対応するもっと複雑な構造もありますよ。一緒に勉強しましょう。