OmniAICreator/Qiita-1.07M huggingface dataset:
HTML の インライン要素 インラインブロック要素 を 画面(親要素)の中央 に 表示する

# 目的
- HTMLファイルのブロック要素を画面(親要素)の左右の中央に配置する設定するをまとめる

# 押さえるポイント
- インライン要素・インラインブロック要素の配置位置を指定するにはtext-alineプロパティを使用する。
- 要素の位置は中央の他に左側、右側も指定できる。
- 要素の位置はcenter(中央)、left(左側)、right(右側)で指定する。  
※ブロック要素を中央に配置する設定は[こちら](https://qiita.com/miriwo/items/7bf12e98a308f400de4d)に記載しています。

# 書き方の例
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  text-aline: 要素の配置場所の指定;
}
```

# より具体的な例
- a要素の位置を画面左右中央に配置する。
- input要素の位置を画面左側に配置する。
- textarea要素の位置を画面右側に配置する。
- 下記にHTMLファイルの内容を記載する。

``` html
<a>Googleへ</a>
<input>
<textarea></textaria>
```

- 下記にCSSファイルの内容を記載する。

``` css
*/ 中央配置 /*
a {
  text-aline: center;
}

*/ 左側配置 /*
input {
  text-aline: left;
}

*/ 右側配置 /*
textaria {
  text-aline: right;
}
```
HTML の 文字 の 太さ を 設定する

# 目的
- HTMLファイルの文字の太さを設定する方法をまとめる。

# 押さえるポイント
- 文字の太さを設定するにはfont-weightプロパティを使用する。
- 文字の太さはfont-weightにて細字にしたい時はnormal、太字にしたい時はboidを設定する。
- h1〜h6はデフォルト値でboidが設定されている。

# 書き方の例
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  font-wight: 字の太さの指定;
}
```

# より具体的な例
- h1要素の文字の太さをnormalに設定する。
- p要素の文字の太さをboidに設定する。
- 下記にHTMLファイルの内容を記載する。

``` html
<h1>おはようございます。</h1>
<p>これは日本の朝の挨拶です。</p> 
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  font-weight: normal;
}

p {
  font-weight: boid;
}
```
HTML の リンク の クリックできる範囲 を 広げる

# 目的
- HTMLファイルの行間の高さを設定する方法をまとめる。

# 押さえるポイント
- リンクを作成するaタグはインライン要素のため文字部分しかクリックできる範囲がない。
- クリックする範囲を広げるにはaタグをインライン要素からブロック要素に変えてあげる  
※HTMLでのリンクの作成方法は[こちら](https://qiita.com/miriwo/items/97b6a93bd20f20819b82)を参考にしてください。

# 書き方の例
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  display: block;
}
```

より具体的な例が思いつかなかったため今回は記載しない。
家計簿管理システム midas の DB 権限の設定

## はじめに

以前、[家計簿管理システム](https://qiita.com/firedial/items/7ed49cc342667bf44857)の話をしたが、今回はそのシステムの DB 周りの権限を適切に設定した話である。

## 現在の設定

現在 API から DB に接続しているユーザーは midas であり、そのユーザーはデータベース midas の全権限を持っている。でも実際に必要としているのは、SELECT と INSERT のみである(あくまでも現時点では)。

また、DB から NAS にバックアップしているユーザーは root である。おかしい話だ。しかもバックアップをとるシェル内にパスワードを生で書いている。もうひどい。どっかの (3+4)pay のことが笑えない。

## ちゃんと設定してあげる

今回準備するユーザーは下記の通り

* midas
    * データベース midas 配下の全権限と権限付与ができるユーザー
    * いわば データベース midas の root ユーザー
* midas_api
    * API から DB に接続するユーザー
    * データベース midas 配下の全てのテーブルに対しての SELECT と INSERT ができる
* midas_backup
    * バックアップ取得用のユーザー
    * データベース midas 配下の全てのテーブルに対して SELECT のみできる

## 設定したときのコマンド

* midas ユーザーにデータベース midas に `GRANT OPTION` 権限を付与
 
```
GRANT GRANT OPTION ON midas.* TO midas@localhost;
```

* midas_api ユーザーと midas_backup ユーザーの作成

```
CREATE USER midas_api@localhost IDENTIFIED BY 'hitonookanede';
```

```
CREATE USER midas_backup@localhost IDENTIFIED BY 'yakinikutabetai';
```

* midas_api ユーザーに SELECT と INSERT 権限を付与

```
GRANT SELECT, INSERT ON midas.* TO midas_api@localhost;
```

* midas_backup ユーザーに SELECT 権限を付与

```
GRANT SELECT ON midas.* TO midas_backup@localhost;
```

## 最後に

権限周りはちゃんとしておくことで事故が防げると思っているので、今回対応できてよかった。
windowsタブレットをタッチ操作で使う場合に便利だと思ったソフト

## はじめに
もともとwindowsはタッチ操作を前提として作られたOSではないため、マウス・キーボード無しだと細かい操作が多く扱いづらい印象です。
その中でこのソフトはwindowsタブレットと相性がいいな、と感じたものを備忘録的にまとめておこうと思います。
なお仕事ではなくプライベートの使用を基本としているため、ミュージックプレーヤー等の娯楽的なソフトも含まれます。

### 1.Honeyview
画像ビューワー。
基本的な機能はMassigra等のビューワーと変わりありませんが、画像切り替えのボタンが左右に大きく配置されているためタッチ操作でもストレスなく画像切替が行えます。

### 2.Notion
ToDoリストや簡易的なウェブクリップ、チーム内の情報共有等様々な用途に使用できるサービス。
類似するサービスは複数存在しますが、Notionはこれ一つで幅広くカバー出来る点がメリットだと思います。
情報をNotionにまとめておけば外出時でもタブレットでそれらを簡単に確認、編集できるため非常に便利です。

### 3.TouchPanelGestures
windowsタブレット用のジェスチャーソフト。
ユーザースクリプトも使用可能。

### 4.uLilith
とにかく軽いミュージックプレーヤー。
私だけかもしれませんがタッチ操作でプレーヤーを操作しようとすると、割と頻繁に誤操作が発生します。
それにタブレットは全体的に画面が小さいため、ミュージックプレーヤーは最小化して使用することが多いです。
uLilithの場合同梱のDDECliantを経由することでコマンドライン上からプレーヤーを操作できるため、最小化状態のままでも不自由なく操作が行なえる上に誤操作も防ぐことが出来ます。
処理毎にショートカットを作り、ランチャー等に登録しておくと便利。

### 5.As/R
ファイラーソフト。
ファイラー上で行える全ての処理をツールバーに登録することが出来るため、コピー&ペーストやフルパスの取得等がワンタッチで行える点が非常に便利です。
ボタンの大きさやフォントサイズのカスタマイズも行えるため、全体的に大きめに設定しておくとストレス無く扱えます。
標準のエクスプローラーと違いアプリケーションやショートカット等もランチャーに登録できるので、前述のuLilithのショートカット等をまとめて登録しておくと楽。

### 6.OFR
As/Rと同作者によるオンライン小説のオフラインリーダー。
外出先でネットに繋ぐ環境が無い場合でもオンライン小説が読めるため、小説家になろう等を使用している場合は入れておくと結構便利です。

### 7.Input Director
一組のマウスとキーボードで複数のマシンを操作することが出来るようになるソフト。
メインのPCを使うときに、タブレットをサブディスプレイ的に使うことが出来るようになります。
クリップボードを共有できる点も地味に便利です。

### 8.AutoHotkey
スクリプト実行環境。
タッチ操作だと複雑な操作は途中で失敗してしまったり等が多いため、スクリプトを書いて簡易化するとストレスが減らせて便利です。
前述のAs/Rは全ての操作のコマンドIDを公開しているため、postMessageを使っての連携も簡単に行えます。

## 最後に
普段余り文章を書くという習慣がなく拙い内容ではありますが、少しでも役に立てば幸いです。
他にこういうソフトがあるよ、等ありましたら教えていただけると嬉しいです。
HTML の 行間 の 高さ を 設定する

# 目的
- HTMLファイルの行間の高さを設定する方法をまとめる。

# 押さえるポイント
- 行間の高さを設定するにline-heightプロパティを使用する。
- 行間の高さはピクセル数を用いて設定する。
- line-heightで行間の高さを設定すると、テキストは設定した行間の縦方向の中央に勝手に配置される。

# 書き方の例
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  line-height: ピクセル数;
}
```

# より具体的な例
- h1要素の行間の高さを10ピクセルに設定する。
- 下記にHTMLファイルの内容を記載する。

``` html
<h1>おはようございます。</h1>
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  line-height: 10px;
}
```
selectタグについて

## Selectタグの使い方

最初、このように冗長に書いていました(hamlでの書き方です)

①
<a href="https://gyazo.com/d888b4095a85261ba4f1a48832f9cc1a"><img src="https://i.gyazo.com/d888b4095a85261ba4f1a48832f9cc1a.png" alt="Image from Gyazo" width="357"/></a>

<a href="https://gyazo.com/9470c879d8b4bd12786f4f5135efd78e"><img src="https://i.gyazo.com/9470c879d8b4bd12786f4f5135efd78e.png" alt="Image from Gyazo" width="390"/></a>

## 結論
```
    %ul
 　　　%li
  　　　 %label 生年月日
         %span 必須
     %ul
       %li
        %h.birthday
          = select_tag('year',options_for_select(1900..2019),include_blank: '---',class: "birthday")
        %span.tosi 年
          %h.birthday2
           = select_tag('year',options_for_select(1..12),include_blank: '---',class: "birthday2")
         %span.tosi 月
           %h.birthday
            = select_tag('year',options_for_select(1..31),include_blank: '---',class: "birthday")
          %span.tosi 日
```

そうすると、このように

[![Image from Gyazo](https://i.gyazo.com/a7602d7ffb76b2703795c9f641198cc8.gif)](https://gyazo.com/a7602d7ffb76b2703795c9f641198cc8)
bash shell に関するtips 備忘録

# 実行時にデバッグ出力する場合のヘッダ

```
#!/bin/bash -x
```

# root以外が実行すると処理せずに終了させる

```
if [ $(whoami) != "root" ]; then
        echo "This script must be run as root"
        exit 1
fi
```

# スペースの入ったファイル名を処理するために配列の分割子を改行コードに固定する

```
export IFS=$'\n'
```

 ので、上記設定以降はshell内での配列指定は以下の例のように記述する必要がある

```
EXTLIST=(
"mov"
"mkv"
"..avi"
"avi.mp4"
"wmv.mp4"
"flv.mp4"
"mpeg"
"mpg"
"flv"
"rmvb"
"wmv"
"M4A"
"avi"
"ts")
```

# rootから全てのユーザのjavaに対してgc実行リクエストする

```
for line in `ps aux | grep java | tr -s " " | grep -v grep | tr " " "," | cut -d ',' -f 1-2`
do
        arr=( `echo $line | tr -s ',' ' '`)
        user=${arr[0]}
        pid=${arr[1]}
        sudo -u $user jmap -histo:live $pid
done
```


# lockファイルを作らずに、shellの複数起動をしないようにする
参考 :  https://qiita.com/hit/items/e95298f689a1ee70ae4a                                                                                                                                                               

```
_pcnt=`pgrep -fo ${CMDNAME} | wc -l`               
if [ ${_pcnt} -gt 1 ]; then                        
        echo "This script has been running now. proc : ${_pcnt}"
        exit 1                                           
fi
```
障害時の情報取得

# 障害発生時の情報取得
私がこれまでにいた現場では、各ミドルウェア担当ごとに、障害情報取得スクリプトを自作していた。

## 問題点
* DRYできてない。
* Apacheで障害が起きたとしても、Apacheのログしか取得してない。
* 定義ファイルだけを取得するスクリプトと障害情報？を取得するものでスクリプトが別れている。もちろんメンテは片方ずつしかされてなかったりする。

> こういうときって、APだったり、負荷分散だったり、のログもほしいもの。
ほしければ、自分で実装しなければいけない。

## 解決策
sosreportの活用を！
sosreportのプラグインを自作してしまえばいいんだ！

とりあえず定義ファイルとコマンドを抜くだけだったら以下のようにすればいい。

```python
from sos.plugins import Plugin, RedHatPlugin

class MyPlugin(Plugin, RedHatPlugin):
    """pluginの説明"""

    def setup(self):
        self.add_copy_spec([
            "取得したいファイルのパス",
            "取得したいファイルのパス",
            "取得したいファイルのパス",

        self.add_cmd_output("実行したいコマンド")
        ])
```

こんなプラグインを、
`/usr/lib/python2.7/site-packages/sos/plugins` につっこんでおけばよい。
ファイルは普通にアーカイブされているし、コマンド結果も、
`sos_commands/プラグイン名/コマンド名` で保存されている。
VScodeでAWS Cloud9の操作 | アクセスエラーの原因と対処法


## 概要

[VScode でAWS Cloud9の操作 - Qiita](https://qiita.com/funabashi800/items/de7d33989d0d2030148c)


[参考](https://qiita.com/funabashi800/items/de7d33989d0d2030148c)の手順に従いVSCodeに[Live Sync for AWS Cloud9](https://marketplace.visualstudio.com/items?itemName=iann0036.live-share-for-aws-cloud9)をセットアップした。


しかし、エラーが発生しCloud9にアクセスできない。

その対処方を備忘録として残す。


## 問題

Environmentsは表示されるが、Connectするとエラーが発生している。

![SnapCrab_NoName_2019-7-16_20-56-49_No-00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62413/078a05b6-4552-4fd1-5766-010b719c4df9.jpeg)


### エラー内容

![SnapCrab_NoName_2019-7-16_20-57-1_No-00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62413/01cf3074-c2e0-ed5b-b6dd-dcb75c6cc3c5.jpeg)


```bash

User: arn:aws:iam::714834470136:user/local-vscode-t3500 is not authorized to perform: cloud9:CreateEnvironmentToken on resource: 5992e3f14a604d23a5146be72951fe99 with an explicit deny
```



## 原因

原因は、Cloud9を作成したユーザと、VSCodeに登録した **ユーザ異なる** ためであった。


> I believe what is happening is that another user has created the environment and that user has not shared the environment with the user you specified in VS Code. I believe the fix would be to log into the Cloud9 web interface and click the "Share" button and add the user that you're using in VS Code.


 [How to delete C9 Environment? · Issue #4 · iann0036/cloud9-sync](https://github.com/iann0036/cloud9-sync/issues/4)


## 対策

Cloud9の設定から、VSCodeに登録した **ユーザを招待** することで、Environmentへのアクセス権限を得ることができ、無事VSCodeからアクセスできた。

![SnapCrab_NoName_2019-7-16_20-57-50_No-00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62413/1169b4cc-b708-90be-20ca-e8f56f830d1f.jpeg)


以上
TypeScriptでtype predicateを安全に使う方法


## TL;DR

```ts
import { isT, isNotT, defineIsT } from "safe-type-predicate";

// isA: (x: "a" | "b") => x is "a"
const isA = defineIsT((x: "a" | "b") =>
    x === "a" ? isT(x) : isNotT()
);
```

## GitHub
[safe-type-predicate](https://github.com/kgtkr/safe-type-predicate)  

## type predicateとその問題点

TypeScriptにはtype predicateという機能が存在する。  
これは適当な型の値`x`を受け取り`boolean`を返す関数の戻り値を`x is T`と書くことで､`true`を返せば`x`が`T`型､`false`を返せばそうでないことを表す機能である。  
これによってユーザー定義関数で型ガードを行うことを可能にしている。  
例えば`unknown`型、つまり任意の型を受け取りその値が`string`型であるかを返す関数は次のようになる。

```ts
function isString(x: unknown): x is string {
  return typeof x === "string";
}
```

これは便利な機能であるが大きな問題が存在する。それは型チェックがほとんど効かないことである。  
例えば以下のコードは実際は`number`型であるかを判定する関数なのに、型上では`string`型であるかを判定する関数になってしまっている。

```ts
function isString(x: unknown): x is string {
  return typeof x === "number";
}
```

この程度の単純な例でも型チェックが行われないためちょっとしたミスがバグの原因になりやすい。  
そこでこの記事ではtype predicateを安全に使う方法と、それをライブラリ化した`safe-type-predicate`を紹介する。

## type predicateを安全に使う方法
type predicateを安全に扱うとはつまり`(x: T) => x is R`な関数を安全に定義することである。  
もちろんTypeScriptなので完全な安全は難しい。そこで一定の書き方に従っている限り安全であることを目指すことにした。
そしてこれを実現するために、型ガードと型推論を上手く生かす事を考えた。  

そして以下のような書き方ができれば良いという発想になった。  

```ts
const isHoge = defineIsT((x: /* 引数に取る型 */) =>
    /* 条件式 */ ? isT(x) : isNotT()
);
```

このように書ければ条件式のおかげで`isT(x)`の時点の`x`は型ガードによって絞り込まれているので型推論可能である。  
また値を考えると(つまりJSへのコンパイル結果)、`defineIsT`は恒等関数、`isT`と`isNotT`はそれぞれ`true`と`false`を返す定数関数とすればよくシンプルである。  
あとは上手く型をつけるだけである。  

それで出来たものが以下である。

```ts
declare const isTSymbol: unique symbol;
declare const isNotTSymbol: unique symbol;

export type isT<T> = true & { _T: T; _Tag: typeof isTSymbol };
export type IsNotT = false & { _Tag: typeof isNotTSymbol };

export function isT<T>(_x: T): isT<T> {
  return true as isT<T>;
}

export function isNotT(): IsNotT {
  return false as IsNotT;
}

export function defineIsT<T, R extends T>(
  f: (x: T) => isT<R> | IsNotT
): (x: T) => x is R {
  return f as any;
}
```

`IsT<T>`はnew typeと幽霊型のテクニックを、`IsNotT`はnew typeのテクニックを使っている。
new typeは元の型には変換出来るが、元の型からはキャストなしでは変換出来ない型である。これはなくても動作するが、あったほうが`isT`, `isNotT`の戻り値以外の値が入ることを防止出来るのでより安全である。ここでは`& { _Tag: typeof isTSymbol }`と`& { _Tag: typeof isNotTSymbol }`の部分である。  
幽霊型は型に別の型の情報を残すテクニックである。ここでは`& { _T: T }`の部分で`T`という型情報を残している。  

これを使うことで以下のように書くことが出来るようになった。 

```ts
// isString: (x: unknown) => x is string
const isString = defineIsT((x: unknown) =>
    typeof x === "string" ? isT(x) : isNotT()
);
```

そしてここまで書いた事は`safe-type-predicate`という名前でライブラリ化して公開している。


## カスタムtslintルール

`safe-type-predicate`を使う事で何もしないよりはかなり安全にtype predicateを使うことが出来るようになった。  
しかし以下のような書き方をされれば当然型システムと動作に矛盾が生じる。  

```ts
// isString: (x: unknown) => x is string
const isString = defineIsT((x: unknown) =>
    isT("x")
);
```

なぜなら「一定の書き方に従っている限り安全」ということを目指して作ったライブラリだからだ。
そこで「一定の書き方」を強制させればよいのではないかと考えtslintルールを作り、`tslint-safe-type-predicate`という名前で公開した。  
`npm i -D tslint-safe-type-predicate`して、`tslint.json`の`extends`に`"tslint-safe-type-predicate"`を追加するだけで使える。    
こうすることで例えば上の例では以下の画像のような警告を出してくれる。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169698/d371a20a-4b8e-6c34-156b-ed8f62610e1b.png)
MySQL で DB ユーザー周りのコマンド

# DB ユーザー周りのコマンドをまとめてみた

DB のユーザーの作成、確認、権限の付与などいつも使うときに忘れてしまうのでまとめてみる。
※ 下記コマンドは root ユーザーで実行する必要があるものがある(てかほとんどがそうだと思う)
※ MySQL5.5 で実行確認している

## ユーザーに関するもの

* 登録されているユーザーの確認

```
SELECT Host, User FROM mysql.user;
```

* ユーザーの作成

```
CREATE USER user@host IDENTIFIED BY 'password';
```

* ユーザーのパスワードの変更

```
SET PASSWORD FOR user@host=password('password');
```

※ password() 関数で暗号化している

* ユーザーの削除

```
DELETE FROM mysql.user WHERE user='user';
```

## 権限に関するもの

* ユーザーの権限の確認

```
SHOW GRANTS FOR user@host;
```

* ユーザーに全権限を付与

```
GRANT ALL PRIVILEGES ON *.* TO user@host;
```

* ユーザーから全権限を剥奪

```
REVOKE ALL, GRANT OPTION FROM user@host;
```

* ユーザーに特定の権限を付与

```
GRANT SELECT, SHOW VIEW, TRIGGER, LOCK TABLES ON *.* TO user@host;
```

※ 付与した権限は、[mysqldump するのに最低必要な権限](https://qiita.com/yoshi-taka/items/3628c5d4240fbff02134)

* ユーザーから一部の権限を剥奪

```
REVOKE SHOW VIEW, TRIGGER, LOCK TABLES ON *.* FROM user@host;
```

※ 特定の条件下だと mysqldump するには SELECT 権限だけよかったので他は剥奪というケースを想定

##
cannot load such file -- bundler/setup (LoadError)と出てきたときの対処法

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#どういうエラーなのか
railsのリポジトリをクローンしてきてちゃんと動くか確かめようとした時に発生しました！
やったことはbundle installをしたら最後に以下のような感じのものが出てきました

```
//省略
`require': cannot load such file -- bundler/setup (LoadError)
```
どうやらbundlerのGemが欠けてみたいだったので

```
sudo gem install bundler
```
以下のようにコマンドを入力したら問題なくいけました！
curlでのメタデータ確認

### curlでのメタデータ確認

2019/07/15 時点
Computeインスタンスから取得できる情報

$ curl -L http://169.254.169.254/opc/v1/instance/
{
  "availabilityDomain" : "****",
  "faultDomain" : "****",
  "compartmentId" : "****",
  "displayName" : "****",
  "id" : "****",
  "image" : "****",
  "metadata" : {
    "ssh_authorized_keys" : "****",
    "user_data" : "****"
  },
  "region" : "****",
  "canonicalRegionName" : "****",
  "shape" : "****",
  "state" : "****",
  "timeCreated" : ****,
  "agentConfig" : {
    "monitoringDisabled" : false
  }
}

Public IPが確認出来ないのは残念

あと残念な点として、URIを忘れた際に、途中まで入力しても403になってしまう点
AWSのEC2なら、選択できる先のpathも表示されていて便利だった。

```
$ curl -L http://169.254.169.254/opc/v1/
<html>
<head><title>403 Forbidden</title></head>
<body bgcolor="white">
<center><h1>403 Forbidden</h1></center>
</body>
</html>
```
Chromeのキャッシュを5秒で消す方法

##Google Chromeのキャッシュをたったの5秒で消す方法

CSSを更新したのにページに反映されない！！！！！！
HTMLファイルをサーバーにアップしたのに表示が前のままじゃねーか！！！

そんな悩めるWebエンジニアに救いの手を差し伸べる記事です

##ページの変更が反映されない時はこれをしろ
1.開発中のページをchromeで表示する
2.⌘ + ⌥ + i で開発ツールを表示 
3.左上の更新ボタンを右クリック！（Macユーザーは2本指クリック）
4.”キャッシュの消去とハード再読み込み”をクリック
<img width="502" alt="スクリーンショット 2019-07-16 20.26.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436904/e45a5c38-7483-63c6-09f7-d26468fbbf7f.png">
5.全て解決！
（解決しない場合はコードを見直す）


##Happy Hacking :sunglasses: !
ROS URDFの設定(ORIGIN編)

#初めに
[srsさんの記事](https://qiita.com/srs/items/77f378230bf856a3625c)で、個人的に理解が難しかったことに関して書いておきます。
#わからないこと

```vis_lecture/urdf/simple_body4.urdf
<robot name="test_robot">
  <material name="red">
    <color rgba="1.0 0.0 0.0 2.0"/>
  </material>

  <link name="base_link"/>

  <joint name="body1_joint" type="fixed">
    <parent link="base_link"/>
    <child  link="body1_link"/>
  </joint>
  <link name="body1_link">
    <visual>
      <geometry>
        <box size="0.1 0.1 0.5"/>
      </geometry>
      <origin xyz="0 0 0.25" rpy="0 0 0"/>
      <material name="red"/>
    </visual>
  </link>

  <joint name="body2_joint" type="revolute">
    <parent link="body1_link"/>
    <child  link="body2_link"/>
    <origin xyz="0.1 0 0.5" rpy="0 0 0"/>
    <limit lower="-1.5" upper="1.5" effort="0" velocity="0"/>
  </joint>
  <link name="body2_link">
    <visual>
      <geometry>
        <box size="0.1 0.1 0.4"/>
      </geometry>
      <origin xyz="0 0 0.2" rpy="0 0 0"/>
      <material name="red"/>
    </visual>
  </link>

  <joint name="body3_joint" type="revolute">
    <parent link="body2_link"/>
    <child  link="body3_link"/>
    <origin xyz="0.1 0 0.4" rpy="0 0 0"/>
    <limit lower="-1.5" upper="1.5" effort="0" velocity="0"/>
  </joint>
  <link name="body3_link">
    <visual>
      <geometry>
        <box size="0.1 0.1 0.4"/>
      </geometry>
      <origin xyz="0 0 0.2" rpy="0 0 0"/>
      <material name="red"/>
    </visual>
  </link>
</robot>
```
このurdfを起動させると3つの箱がずれた状態で表示されるわけですが、箱(リンク)の位置を調整しているのが

```simple_body4.urdf
<origin xyz="0.1 0 0.5" rpy="0 0 0"/>
```
この部分となっています。

#originの値
上に引用しましたvis_lecture/urdf/simple_body4.urdfを用いて説明します。
##jointタグのorigin
つながっている親linkの重心からのオフセットをパラメータとして与えます。
例えば、body2_jointはbasel_linkの原点からの距離の位置に存在します。
ただしオフセット分は考慮されないのでbase1_linkの元の原点の位置つまり原点からの位置となります。
(linkの元の原点はオフセットを足す前の位置なので、つながっているjointの位置となっている)
##linkタグのorigin
繋がっている元のjointの位置を原点としていて、オフセットをパラメータとして与えます。ただしlinkの原点座標はlinkの重心の位置を基点としています
例えば、body2_linkの重心はbody2_jointからオフセット分の距離の位置に存在します。

#最後に
自分で動かした結果、思い込んでいることを書いているだけなので間違いあれば教えてください。
http://wiki.ros.org/urdf/XML/joint
http://wiki.ros.org/urdf/XML/link

[ここの](http://wiki.ros.org/urdf/XML/joint
)
>This is the transform from the parent link to the child link. The joint is located at the origin of the child link, as shown in the figure above.

これはjointの位置が、子linkの原点となるっていう理解でいいのだろうか・・・
それではjointの位置はどこに位置してるのかってどこに書いてあるのかよくわかりません。
弄っていたところ親のjointの位置からの相対距離という認識で間違いではなさそうでありました。
#参考
https://qiita.com/srs/items/77f378230bf856a3625c
http://forestofazumino.web.fc2.com/ros/ros_urdf_xacro.html
Sencha Architect 4.2.5 を CentOS7 で動かしてみる

JavaScript でのシングルページアプリケーション構築の商用フレームワークである Ext JS は Visual Studio Code や Eclipse などの IDE で開発できますが、ビジュアル開発環境である Sencha Architect を使えばコンポーネントをドラッグ＆ドロップして画面デザインを見たままに作ることができます。

そして Sencha Architect は Windows, macOS, Linux のいずれでも利用できますが、Linuxの場合はディストリビューションによってlibc++.so.6のバージョンが異なるために、そのままではSencha Architectが実行できない場合があります。

その一つがCentOS7なのですが、この記事ではSencha Architectを動かすためにライブラリをソースからビルドして、動く環境を作ってみることにします。

## 必要な作業

- OpenJDK 1.8 をインストールしておきましょう。
- inotify の設定も変えておきます。
- Sencha Architect が参照する libc++.so.6 は CentOS7 標準のバージョンよりも新しいため、ソースからビルドします。

### OpenJDK 1.8 のインストール

これは特に難しいことはありませんので説明は省略します。

```
# yum install java
```

### inotify の設定を変える

Sencha Architectはプロジェクトを保存するごとにバックグラウンドでビルドツールが自動的に実行されますが、Linuxではファイルの変更をinotifyで検知しています。しかし CentOS7 のデフォルトでは inotify の max_user_watches が下記のように 8192 と少々少なめに設定されています。

```
$ cat /proc/sys/fs/inotify/max_user_watches 
8192
```

そこで root 権限で以下のように実行して inotify の上限を増やすことにします。

```
# echo 100000 > /proc/sys/fs/inotify/max_user_watches
```

ただしこのコマンドは現在のOSに対する一時的な設定変更にすぎないので、永続的に有効化するために下記のように設定しておきます。

```/etc/sysctl.d/inotify.conf
fs.inotify.max_user_watches=100000
```

### libc++.so.6 の新しいバージョンを使うために gcc をソースからビルドする

libc++.so.6 は gcc に含まれるため、gcc をビルドします。この作業の説明はそれだけで記事が一つ書けてしまいますが、Qiitaに類似の記事がありましたので、そちらのリンクを提示いたします。

https://qiita.com/IntenF/items/dbfe1bef4568719a0133

この作業を行っていない場合は上記記事で紹介されているような GLIBCXX のミスマッチにより Sencha Architect が実行できないのです。

なお、この記事の手順を抜粋し、またビルドに必要な rpm パッケージのインストールを行う手順を追加したものがこちらです。

```bash
# yum install gmp-devel mpfr-devel libmpc-devel glibc-devel.x86_64 glibc-devel.i686
# yum install gcc gcc-c++

# curl -LO http://ftp.tsukuba.wide.ad.jp/software/gcc/releases/gcc-8.3.0/gcc-8.3.0.tar.gz
# curl -LO http://ftp.tsukuba.wide.ad.jp/software/gcc/releases/gcc-8.3.0/sha512.sum
# sha512sum --check sha512.sum

# tar xzfv gcc-8.3.0.tar.gz -C /usr/local/src
# cd /usr/local/src/gcc-8.3.0/
# ./contrib/download_prerequisites
# mkdir build
# cd build
# ../configure --enable-languages=c,c++ --prefix=/usr/local --disable-bootstrap --disable-multilib
# make
# make install
```

gcc のビルドはそれなりに時間がかかる作業なので、ビルドを仕掛けてランチに出かけるとか帰宅するとよいでしょう。

### ビルドした libc++.so.6 を使って Sencha Architect を起動する

ソースからビルドした libc++.so.6 は Sencha Architect 実行時だけ参照すればよいので、とりあえず、LD_LIBRARY_PATH の設定により一時的に参照できるようにします。

```bash
$ LD_LIBRARY_PATH=/usr/local/lib64
$ export LD_LIBRARY_PATH
```

### Sencha Architect をインストールして実行する

ここまでの準備ができていれば、Sencha Architect をインストールして実行してみてください。インストールそのものは特に難しい点はないので省略します。

インストールした Sencha Architect は LD_LIBRARY_PATH を設定したシェルから次のように実行して起動します。

```
$ sencha/Sencha\ Architect\ 4.2/SenchaArchitect 
```

すると、Sencha Architect が無事起動しました。下記のスクリーンショットは CarListing のサンプルを開いた状態です。画面左上のアイコンを見るとCentOS7で動いていることが分かりますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149350/55903a8c-a74b-0c92-f06a-70e3226e9eb7.png)

では実際にブラウザでプレビューしてみましょう。画面左側の Firefox でプレビューしつつ、画面右側には Sencha Architect を配置しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149350/9584d004-2f8f-77ad-f927-7bd048ed2e6f.png)

RHEL8 系列ならこういう環境構築を行わずともSencha Architectを実行できまるはずですが、RHEL7/CentOS7 系列でSencha Architectを利用しなければならない場合はこういう方法で対応できます。
【JavaScript】axios@0.19.0で共通のクエリパラメータが正常にセットできない問題と対応方法

## 結論
**v0.19.0限定のバグ**のようです。
<a href="https://github.com/axios/axios/issues/2190">axiosのGithub上のissue</a>で既に議題になっています。

暫定対応になりますが、**v0.18.0にダウングレードして利用することで回避**できます。

## 問題のコード
以下のようなコードを書いた時に発生します。

```js
axios.create({
  params: {
    apiKey: "abcdefghijklmnopqls"
  }
});

axios.get("https://xxx.com/api/posts");

// 期待される実行結果 
//   https://xxx.com/api/posts?apiKey=abcdefghijklmnopqlsへのアクセス
// 実際の実行結果
//   https://xxx.com/api/postsへのアクセス
```

APIにアクセスする際に、常にクエリパラメータにAPIキーの指定が必要なシステムがあり、毎度`get`関数を呼び出す際にapiKeyを指定したくない。

といった場合に、`create`関数で共通する情報を予め設定できます。
...が、`axios@0.19.0`のバグでうまく付与されないようです。

<br>

## 暫定対応

issueを見ると、修正のPRが取り込まれたバージョンがぼちぼちリリースされる雰囲気ですが、一応それまでの暫定対応を書いておきます。

```js:get関数にベタ書き
axios.get("https://xxx.com/api/posts?apiKey=abcdefghijklmnopqls");
```
<font color="gray">※ メンテナンス性最悪なので非推奨。</font>

OR

**`axios@0.18.0`にダウングレード**

```html:CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
↓
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
```

```bash:npm
# 今のaxiosのアンインストール(自身の環境に合わせて--saveオプション、--save-devオプションを付与して下さい)
npm uninstall axios

# 0.18.0版のインストール
npm install axios@0.18.0
```

<font color="gray">v0.19.0じゃなければいけない理由がなければこちらを推奨</font>


一応issueをウォッチして、修正版がでたら追記します。
MasterMemoryとAirtableでいい感じにマスタを高速に読む

# 事の発端

きゅぶんずさんがいい感じの記事を書いてるのを見て、Airtableに興味を持ち、いろいろ調べていたらMasterMemoryなるものが出たので、全部一緒に料理してやんよ見たいな感じでUnityでいい感じに使おうと思った記録です。

# とりあえず参考までに

きゅぶんずさんの記事
https://qiita.com/kyubuns/items/dc47cf7c9af38f13c9ee

Airtable
https://airtable.com/

Airtableの.NETクライアント
https://github.com/ngocnicholas/airtable.net

↑がJson.NET使ってたので、Utf8Json用に私が作ったもの
https://github.com/yKimisaki/AirtableClient

Utf8Json
https://github.com/neuecc/Utf8Json

起動のたびにAirtableにアクセスすると遅いので、手元にそのデータをバイナリでキャッシュしておく。
そのキャッシュを作ったり、バイナリからテーブルにしてくれる良い物がMasterTable。
https://github.com/Cysharp/MasterMemory

# 作戦

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330809/55791fed-425a-4a4d-1a7e-bc3be23b83e7.png)

↑のようなテーブルを

```MasterCache.cs
var appleMaster = MasterCache.TestMaster.FindByID(1);
```

みたいな形でUnity上から使えるようにする。

# TestMasterクラスの作成

自動生成したいけど、いろいろ面倒くさい経験しかないので頑張って書きます。

```TestMaster.cs
[MessagePackObject(true)]
[MemoryTable(nameof(MainGameMaster))]
public class TestMaster
{
    [PrimaryKey]
    public int ID { get; set; }

    public string Name { get; set; }

    public int Price { get; set; }
}
```

注意点としては、PrimaryKey属性がフィールドじゃなくプロパティにしか付けられないので{ get; set; }なりが必須、<del>またUnity用のmpc.exe（MessagePackのリゾルバ生成）はTestMasterのリゾルバは生成してもTestMaster[]、つまりカスタムクラスの配列は自動で生成してくれないので、作っておかないと怒られます。</del>以下で生成されるMasterMemoryResolverを登録しましょう！！！

# UnityEditorで必要なものをいい感じに生成する

https://gist.github.com/yKimisaki/9ecc52c87cd7e926423a506bab519de1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330809/8a5d50be-1b75-9fd9-ec69-e065774922cd.png)

みたいなのを作ってメニューからMessagePackのリゾルバやらAssetBundleやらをそれっぽく生成できるようにしておきます。
できたらMasterMemoryのTablesを生成します。
普通にMasterMemory.Generator.exe自分でたたいてくれてもいいです。

# AirTableやバイナリからMasterMemoryに読み込む

https://gist.github.com/yKimisaki/5a3bc7317e4193c38651b8f8ebff1771

みたいな感じで、複数の経路、具体的にはキャッシュのバイナリか、Airtableから直接MasterCacheみたいなメモリ上に展開するクラスに登録できる状態を作っておきましょう。

# Airtableからバイナリを作成

あとは、だいぶ前のBuilder.csあたりに

```.cs
[MenuItem("Build/MasterMemory/Binaries")]
public static void BuildBinaries()
{ 
    var binary = ScriptableObject.CreateInstance<BinaryObject>();

    Task.Run(async () =>
    {
        binary.Value = await new AirtableMasterLoader().LoadAsync();
    }).Wait();

    AssetDatabase.CreateAsset(binary, ClientMasterLoader.BinaryAssetPath);
    AssetDatabase.Refresh();

    Debug.Log($"Build completed. Binary is created on {ClientMasterLoader.BinaryAssetPath}");
}
```

を追加して実行すると、指定の場所にバイナリを内包したScriptableObjectが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330809/4ff33813-3f48-b246-eeec-2d3712994df1.png)

# 仕上げ

あとはそのバイナリをAssetBundleにしておきましょう。

```.cs
await MasterCache.RegisterAsync(new ClientMasterLoader());
```

で、読み込んであげれば、

```MasterCache.cs
var appleMaster = MasterCache.TestMaster.FindByID(1);
```

これが達成できます。

# まとめ

雑くてスミマセンが、アプリの起動時間＝ログインのしやすさ関わってくる部分だと思っているので、できるだけマスタなどはクライアントにキャッシュしておくことをお勧めします。
で、更新があれば都度AssetBundleなどを経由してDLしてもらうのが、いいと思います。
＜初心者＞Vue.jsとviz.jsでgraphvizのオンラインエディタを作ってみた。＜Vue.js練習＞

Vue.jsの公式にはマークダウンエディタの例がある。これのgraphviz版を作ってみる。
[公式のマークダウンエディタ](https://jp.vuejs.org/v2/examples/index.html)

#作ったもの
Viz.jsには[サンプル](http://viz-js.com/)があるので、この記事で作っているのは車輪の再発明（バージョンダウン）です。
Vue.jsもViz.jsもcdnから読み込むため、htmlファイル1つで完結します。

![test10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89564/439bba9d-aaec-acdb-db02-13a12ca9bca2.gif)

Viz.jsとGraphvizについてはそれぞれの公式参照。
[Viz.js-公式](http://viz-js.com/)
[Viz.j-github](https://github.com/mdaines/viz.js)
[Graphviz-公式](http://www.graphviz.org/)

サンプルだけ引用します。
Graphvizを使用してDOT言語でこのように書くと

```
digraph G {
    subgraph cluster_0 {
        style=filled;
        color=lightgrey;
        node [style=filled,color=white];
        a0 -> a1 -> a2 -> a3;
        label = "process #1";
    }
    subgraph cluster_1 {
        node [style=filled];
        b0 -> b1 -> b2 -> b3;
        label = "process #2";
        color=blue
    }
    start -> a0;
    start -> b0;
    a1 -> b3;
    b2 -> a3;
    a3 -> a0;
    a3 -> end;
    b3 -> end;
    start [shape=Mdiamond];
    end [shape=Msquare];
}
```

こう出力される。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89564/f7d705b9-bb82-90b6-7567-e13987b70da5.png)

#中身
最低限、下記をhtml形式で保存するだけで動きます。
CSSとpng保存用のmethodが付いた全文は[github](https://github.com/qdkmk/Vue.js-Viz.js)で公開しています。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.js-Viz.js</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/viz.js@1.8.0"></script>
  <style>
  </style>
</head>
<body>
  <div class="container">
    <div id="graph">
      <div class="write">
        <h2>入力</h2>
        <textarea v-model="input"></textarea>
      </div>
      <div class="out">
        <h2>結果</h2>
        <div class="graph" v-html="svg"></div>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#graph',
    data: {
      input: `digraph x {
graph [
charset = "UTF-8",
rankdir = LR,
];
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
}
`,
    },
    computed: {
      svg: function() {
        return Viz(this.input, {
          format: 'svg'
        });
      },
    },
});
</script>
</html>


```

vue.jsで初めて作ったwebサービスが外部サーバーを挟んでもっさりしており、なにかリアルタイムで書き換わるものを作ってみたかったので作りました。

まだまだ勉強を始めたばかりです。突っ込みどころがあるかもしれません。お気づきの点ありましたら、コメントなどいただけますと大変ありがたいです。
ActionMailerでhelperメソッドを使用する

メール機能であるActionMailerのviewテンプレートで、先ほど作成したhelperメソッド([regular_format](https://qiita.com/yusaku_/items/b8b595f92a43f56f421c))
を使おうとしたらエラーとなってしまった。

##解決方法
ActionMailerのView内でhelperメソッドを使いたい場合は、
**`add_template_helper(ApplicationHelper)`**
を追加すれば良い。

``` application_mailer.rb
class ApplicationMailer < ActionMailer::Base
  add_template_helper(ApplicationHelper)

・
・
・
```

これで無事helperメソッド**`regular_format`**が使えるようになった。
Marp + Netlify (+pdfpc) でスライドを作って発表する

「**慣れてるマークダウンでスライド書きたいし、Git 管理もしておきたいし、ホスティングもしておきたい**」 という思いから、**Marp** + **Netlify** (+ **pdfpc**) でスライドを作って発表した話。

超ざっくりと紹介を書いたのみなので、具体例は <a href="https://github.com/sensuikan1973/flutter-ffi-slide"><font color="BLUE"><strong> github.com/sensuikan1973/flutter-ffi-slide </strong></font></a> を見て下さい。

## [Marp](https://github.com/marp-team/marp)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/0c4759eb-50c0-b558-994b-3e4f4f146646.png" height="100">
マークダウンで書けるし、css を書けばデザインのカスタムもできる。すごく便利。
もちろん、マークダウンや html/css に慣れてない場合は向きません。

### マークダウンで書く
例えばこんな感じになる。いえ〜い。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/21a1f92b-3987-d029-03af-fe9c90dcc720.png" height="300"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/9c1dc49c-0734-8aea-8b99-697107ab91f7.png" height="300">
詳しい記法は [ドキュメント](https://marpit.marp.app/) を参照。

### 開発
カスタム CSS を使っているなら、 `marp --theme foo.css --html --server .` でプレビューを見ながら開発することになると思います。
スライドを都度スクロールしないといけなかったりがちょっと煩わしいですが...

カスタム CSS を使わないなら、[Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode) を使うと快適。 スクロール機能が嬉しい。[^1]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/4a89b7d1-a1d3-cc13-b1be-748ad7ff90df.png" height="200">


### [Netlify](https://www.netlify.com/)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/ca5191be-a487-48f8-b9b9-73a491d12a1e.png" height="100">
ぽちぽち+少しの設定でホスティングできる。

#### html の出力
hosting する html を出力するようにしておく。

```package.json
{
    "name": "foo",
    "version": "0.0.1",
    "main": "index.js",
    "author": "sensuikan1973",
    "scripts": {
        "start": "./start.sh",
        "build": "./build.sh"
    },
    "dependencies": {
        "@marp-team/marp-cli": "0.11.3"
    }
}
```

```build.sh
THEME='foo.css'
SRC='foo.md'
OUTPUT='dist/index.html'

# See: https://github.com/marp-team/marp-cli#metadata
OG_TITLE='Foo'
OG_DESCRIPTION="Foo description"

marp --html $SRC --output $OUTPUT \
--theme $THEME \
--title $OG_TITLE \
--description "$OG_DESCRIPTION" \
```

### deploy 設定
```netlify.toml
# See: https://www.netlify.com/docs/netlify-toml-reference/
[build]
  publish = "dist"
  command = "yarn install && CHROME_PATH=$(node .puppeteer.js) yarn build"
```

Puppeteer については、[作者の方の記事](https://qiita.com/yhatt/items/874d5bfa919c32728403) を参照。

## [pdfpc](https://pdfpc.github.io/)
＊Netlify でホスティングして、それを使って発表するなら pdfpc はなくても済みますが、一応書いておきます。

Marp は PDF を出力できるが、その PDF で発表するのに良さそうなツールないかなと探してたら、pdfpc を見つけた。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/9e55b2f5-0d0e-fc16-0617-6115f801ccdd.png" height=150">
時間とか、次のスライドとか、枚数とかがパッと確認できて便利。

```sh
brew install pdfpc
pdfpc foo.pdf
```

## おわりに
超ざっくりと紹介を書きましたが、慣れれば生産性高いと思いました :thumbsup: 

## 参考
- [作者の方の example](https://github.com/yhatt/marp-cli-example)

[^1]: [marp-vscode | Custom theme](https://github.com/marp-team/marp-vscode/issues/39) という issue が立っているので、いつか VSCode でもカスタム CSS を当てれる時が来そう!
Laravelコレクションのpluck()メソッドを活用しよう

#環境
Laravel Framework 5.8
PHP 7.2

#やりたいこと

DBからこのようなデータを取得して、idがキー、カラムデータがバリューとなる、配列を作りたくなることがよくある。

```php
        $collection = collect([
            ['id' => 1, 'name' => 'ジャック鈴木', 'company' => 'Five Needs'],
            ['id' => 2, 'name' => 'Umichiko' , 'company' => 'Five Needs']
        ]);
```

私はこれまで、このようなときarray_column()を利用して配列を生成していた。

```php
      $user_array = array_column($collection->all(),null,"id");
```
#スマートなやり方
Laravelコレクションの機能であるpluck()メソッドを利用することで同様のことがより簡潔に実現できる。

```php
        $collection = collect([
            ['id' => 1, 'name' => 'ジャック鈴木', 'company' => 'Five Needs'],
            ['id' => 2, 'name' => 'Umichiko' , 'company' => 'Five Needs']
        ]);

        /*
         * nameの値だけを取得できる。
         */
        var_dump($collection->pluck("name"));
        
        //class Illuminate\Support\Collection#331 (1) {
        //  protected $items =>
        //  array(2) {
        //    [0] =>
        //    string(18) "ジャック鈴木"
        //    [1] =>
        //    string(8) "Umichiko"
        //  }
        //}


        /*
         * キーがidでバリューがnameのコレクションを生成
         */
        var_dump($collection->pluck("name", "id"));
        
        //class Illuminate\Support\Collection#331 (1) {
        //  protected $items =>
        //  array(2) {
        //    [1] =>
        //    string(18) "ジャック鈴木"
        //    [2] =>
        //    string(8) "Umichiko"
        //  }
        //}



        /*
         * キーがidでバリューに全データが入ったコレクションを生成
         */
        var_dump($collection->pluck(null, "id"));
        
        //class Illuminate\Support\Collection#331 (1) {
        //  protected $items =>
        //  array(2) {
        //    [1] =>
        //    array(3) {
        //      'id' =>
        //      int(1)
        //      'name' =>
        //      string(18) "ジャック鈴木"
        //      'company' =>
        //      string(10) "Five Needs"
        //    }
        //    [2] =>
        //    array(3) {
        //      'id' =>
        //      int(2)
        //      'name' =>
        //      string(8) "Umichiko"
        //      'company' =>
        //      string(10) "Five Needs"
        //    }
        //  }
        //}

        /*
         * array_columnでも同様のことができる
         */
        var_dump(array_column($collection->all(),null,"id"));
        //array(2) {
        //  [1] =>
        //  array(3) {
        //    'id' =>
        //    int(1)
        //    'name' =>
        //    string(18) "ジャック鈴木"
        //    'company' =>
        //    string(10) "Five Needs"
        //  }
        //  [2] =>
        //  array(3) {
        //    'id' =>
        //    int(2)
        //    'name' =>
        //    string(8) "Umichiko"
        //    'company' =>
        //    string(10) "Five Needs"
        //  }
        //}

```
FreeBSDで一部のディレクトリを指定時刻にバックアップする

# 自己紹介
はじめまして。某大学で大学院生をやっているactttと申します。普段は画像や知覚の研究をしています。
本日Qiitaのアカウントを作成したので早速何か記事を書きたいと思い、まず今回の内容に触れることにしました。

# はじめに
サーバーやデータ管理等でFreeBSDを使う場合、非常に重要なファイルやディレクトリは自動的にバックアップされるようにするのが望ましいです。ここでは、FreeBSDでディレクトリを自動的にバックアップする方法について紹介します。

# 早速バックアップの設定をする
指定時刻にバックアップを行うには、定期的に実行するコマンドを管理する「crontab」（場所:/etc/crontab）と、ファイルやディレクトリの同期を行う「rsync」（場所:/usr/local/bin/rsync）というコマンドが必要になります。

まず、【/etc/crontab -e】を実行してください。すると、定期的に実行するコマンドの一覧をviで編集できるようになります。（※間違えて【/etc/crontab -r】と入力しないようにしてください！以前に設定した内容が全て消えてしまいます）

次に、この状態で内容を入力していきます。例えば、以下のように記述します。

```
10 5 * * 1 /usr/local/bin/rsync -au --delete /dir001/ /backup_dir001/
```

これを例に挙げ、記されている内容を以下で説明します。

- 「10 5 * * 1」：実行時間を表します。左から順に、「分」「時」「日」「月」「曜日（0：日曜日-6：土曜日）」です。この場合は、「毎週月曜日の5:10にバックアップを実行する」ことを表します。
- 「/usr/local/bin/rsync」：先程説明した「rsync」コマンドを実行することを表します。
- 「-au」：「rsync」コマンドのオプションです。「a」はアーカイブモード（「ディレクトリの再帰的処理」や「パーミッションの保持」等のオプションを一つに纏めたもの）で同期することを、「u」は同期先のファイルの方が新しい場合はスキップすることを表します。
- 「--delete」：「rsync」コマンドのオプションです。**同期元のディレクトリに無く**て**同期先のディレクトリにある**ファイルを削除するようにします。例えば、同期元で何らかのファイルを削除した場合、このオプションが無いとその変更が同期先にも反映されません。
- 「/dir001/」：同期元のディレクトリを表します。ここで、後ろにスラッシュを付ける場合と付けない場合（今回であれば「/dir001」）とで**挙動が変わります**。具体的には、後ろにスラッシュを付けると**そのディレクトリの中身を同期先のディレクトリにコピー**し、後ろにスラッシュを付けないと**そのディレクトリを同期先のディレクトリにコピー**します。
 - 今回のように「/dir001/」とすれば、中に「AAA」と「BBB」というファイルが入っていた場合、「backup_dir001」の中に「AAA」と「BBB」がコピーされます。逆に「/dir001」とすれば、「backup_dir001」の中に「dir001」がコピーされます。
- 「/backup_dir001/」：同期先のディレクトリを表します。

ファイルやディレクトリの同期の設定をもっと変更したければ、「rsync」コマンドのオプションについて調べてみてください。
同期先のディレクトリには、同期元のディレクトリが保存されているHDDとは別のHDD（バックアップ用のHDD）のディレクトリを用意すると良いと思います。

# さいごに
今回は初めての記事ということで、FreeBSDの時刻指定バックアップについて紹介させて頂きました。
自分で使っている方法を基にしていますが、もしも間違い等ございましたらお教え頂けたら幸いです。
ここまでお読みくださりありがとうございました！
Laravelのseederを冪等にする

seederを冪等に作成しておかないと、重複してはいけないデータが存在した場合に、2度目の実行時にエラーが発生してしまいます。
そのため、データがなければ作成してすでに存在していれば作成をしないようにするような書き方について調べました。

## そもそも冪等とは
[wikipedia](https://ja.wikipedia.org/wiki/%E5%86%AA%E7%AD%89#%E5%BD%A2%E5%BC%8F%E7%9A%84%E5%AE%9A%E7%BE%A9)によると
> ある操作を1度行っても複数回行っても同じ効果となることを言う。特に、何回行ってもエラーや不整合の状態が変わらない操作を指す。

## firstOrCreateを使う
[firstOrCreate](https://readouble.com/laravel/5.8/ja/eloquent.html#other-creation-methods)を使用することで、データが存在すればそれを取得するし、なければ新しく作成してくれます。

> firstOrCreateメソッドは指定されたカラム／値ペアでデータベースレコードを見つけようします。モデルがデータベースで見つからない場合は、最初の引数が表す属性、任意の第２引数があればそれが表す属性も同時に含む、レコードが挿入されます。

## firstOrCreateで作成されたのかどうかはwasRecentlyCreatedで判定をする
モデルのインスタンスの`wasRecentlyCreated` で判定ができます。

```php
// 初回の実行
>>> $user = App\User::firstOrCreate(['name' => 'hoge', 'email' => 'hoge2@hoge.com', 'password' => 'hoge2']);
=> App\User {#2901
     name: "hoge",
     email: "hoge2@hoge.com",
     updated_at: "2019-07-15 23:11:35",
     created_at: "2019-07-15 23:11:35",
     id: 53,
   }
// 作成されたのでtrueになる
>>> $user->wasRecentlyCreated;
=> true
// 再度実行して取得する
>>> $user = App\User::firstOrCreate(['name' => 'hoge', 'email' => 'hoge2@hoge.com', 'password' => 'hoge2']);
=> App\User {#2900
     id: 53,
     name: "hoge",
     email: "hoge2@hoge.com",
     created_at: "2019-07-15 23:11:35",
     updated_at: "2019-07-15 23:11:35",
     stripe_id: null,
     card_brand: null,
     card_last_four: null,
     trial_ends_at: null,
   }
// 作成されていないのでfalseになる
>>> $user->wasRecentlyCreated;
=> false
```

## これらを組み合わせてseederを作成する
一部分ですが、複数回実行するとデータが重複してエラーになる箇所は、`firstOrCreate` で作成をして、`wasRecentlyCreated` がtrueの場合のみそれにひもづくデータを作成するようにすれば、何度実行しても同じ結果となります。

```php
$user = User::firstOrCreate(['name' => 'hoge']);
// 今回作成された場合にはtrueになる
if ($user->wasRecentlyCreated) {
  // userにひもづくデータをここで作成する
}
```
BigQueryのWindow関数

## Window関数とは
ただの集約関数じゃないの？いいえ違います。
Googleの公式リファレンスには以下のように記載されています（2019年6月14日時点）。
>データベースでは、分析関数は行のグループ全体に対して集計値を計算する関数です。行のグループに対して単一の集計値を返す集計関数とは異なり、分析関数は入力行のグループに対して分析関数を計算することで、行ごとに単一の値を返します。

一体どういうことかなかなかピンと来ないと思いますので具体的に説明していきます。

## サンプルテーブル
例えば肉・野菜・魚の好き嫌いのアンケートをネットで調査したとする
#### sample_table
| id | user_id | category | like_or_not | created_at |
|--:|:--|:--|:--|:--|
| 1 | A | fish | like | 2019-01-01 0:00:00 |
| 2 | B | fish | not | 2019-01-02 0:00:00 |
| 3 | C | meat | like | 2019-01-03 0:00:00 |
| 4 | B | meat | like | 2019-01-03 0:00:00 |
| 5 | C | fish | not | 2019-01-04 0:00:00 |
| 6 | B | vegetable | not | 2019-01-03 0:00:00 |
| 7 | C | vegetable | not | 2019-01-05 0:00:00 |

## サンプルコード
### 普通の集約関数
ユーザーごとの初回回答日時を求める

```sql

SELECT
 sample_table.user_id,
 MIN(sample_table.created_at) AS first_created_at
FROM
 sample_table
GROUP BY sample_table.user_id
```

#### 実行結果
|sample_table.user_id|first_created_at|
|--:|:--|
|A|2019-01-01 0:00:00 
|B|2019-01-02 0:00:00 |
|C|2019-01-03 0:00:00 |

### WINDOW関数を使う場合
sample_tableに１列追加してユーザーの最初の回答日時を付け加える
```PARTITION BY```これがGROUP BY みたいなものです
GROUP BYしなくてもユーザーの最初の回答日時を算出できます

```sql
SELECT
 sample_table.*,
 MIN(sample_table.created_at)OVER(PARTITION BY sample_table.user_id) AS first_created_at
FROM
 sample_table
```
#### 実行結果

| id | user_id | category | like_or_not | created_at | first_created_at |
|--:|:--|:--|:--|:--|:--|
| 1 | A | fish | like | 2019-01-01 00:00:00 UTC | 2019-01-01 00:00:00 UTC |
| 2 | B | fish | not | 2019-01-02 00:00:00 UTC | 2019-01-02 00:00:00 UTC |
| 4 | B | meat | like | 2019-01-03 00:00:00 UTC | 2019-01-02 00:00:00 UTC |
| 6 | B | vegetable | not | 2019-01-03 00:00:00 UTC | 2019-01-02 00:00:00 UTC |
| 5 | C | fish | not | 2019-01-04 00:00:00 UTC | 2019-01-03 00:00:00 UTC |
| 3 | C | meat | like | 2019-01-03 00:00:00 UTC | 2019-01-03 00:00:00 UTC |
| 7 | C | vegetable | not | 2019-01-05 00:00:00 UTC | 2019-01-03 00:00:00 UTC |

このテーブルがあれば初回の回答日時からどれくらい経過して回答しているかなど算出可能範囲が広がりますよね。
husarnetを利用してスマホをROSノードに

## 何がしたいか
IMUとか高性能なカメラとかがついているスマホを遠隔のROSノードとして使えたら色々と嬉しいですよね。
husarnet・hNodeという便利なものがあるみたいです。
セットアップの要点のみを以下にまとめたので、詳細は記事下部の公式ドキュメント等をご覧ください。


## ブラウザ上での準備
1. husarnetのコンソール(https://app.husarnet.com/) にアクセスし、アカウントを作成しログイン
2. Create Networkから任意の名前のネットワークを作成

## Android端末側の準備
1. Google Playで"hNode"というアプリをインストール
1. アプリを立ち上げ、右上の︙マークからPair with cloudを選択、Scan QR codeに進む
2. ブラウザ上での準備で作成したネットワーク下部のAdd Elementからscan QRをクリックし、QRコードを表示
3. QRコードをスキャンし、成功すると端末の名称を登録でき、ネットワークに端末が登録される


## roscoreを走らせる端末側の準備
### husarnetのインストール（実行できない場合はrootユーザーに切り替えて実行）
```bash
curl https://install.husarnet.com/install.sh | sudo bash
sudo husarnet websetup
```

以下のようなメッセージが返ってくるので該当ページに移動して端末を使用するネットワークに追加

```
Go to https://app.husarnet.com/husarnet/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx to manage your network from web browser.
```


### IPv6設定
roscoreやrosnodeを立ち上げるターミナルにおいて以下を実行する

```bash
export ROS_MASTER_URI=http://master:11311
export ROS_IPV6=on
```

### roscore立ち上げ
通常通りroscoreを立ち上げる

```
roscore
```
ブラウザのネットワークに登録されている端末一覧において、設定した名称を選択し、ポップアップ内でROS masterにチェックを入れUpdateをクリック。
"ROS master (roscore) is not running on (登録名)"と表示されなければ正しくroscoreが認識されていることになる。

## 動作チェック
- Android端末のrostopicが正しく表示できていることを確認する（以下はAndroid端末の名称をkagetoraで登録した場合の例）

```
$ rostopic list | grep kagetora
/kagetora/camera0/image/compressed
/kagetora/camera1/image/compressed
/kagetora/imu
/kagetora/light
/kagetora/magneticfield
/kagetora/pressure
/kagetora/proximity
```
`rostopic hz`や`rostopic echo`で返答が返ってこない場合はターミナル上でROS_IPV6がonになっているかを確認する。

- 上記のうち`/kagetora/camera0/image/compressed`の中身を確認（無論rviz上で表示させることも可能）

```
rosrun image_view image_view image:=/kagetora/camera0/image _image_transport:=compressed
```


- IPv6アドレスやネットワークとの接続状態は以下のコマンドで確認できる

```
sudo husarnet status
```

あとは好きにスマホのカメラ映像やIMU情報を処理することができます。

---
参考
https://docs.husarnet.com/
https://medium.com/husarion-blog/dont-buy-expensive-sensors-for-your-robot-use-your-smartphone-24380eab521
https://husarion.com/tutorials/ros-tutorials/5-running-ros-on-multiple-machines/
[Rails]DBのReadを、既存コード変更なしでレプリカへ向けるGemをMakaraにした話

# Makaraを選んだ経緯
DBアクセスのRead/Writeを分けるGemとして[switch_point](https://github.com/eagletmt/switch_point)が有名です。しかし、既存コードを変更しなければならず、導入コストの観点から、私たちのプロジェクトでは使えませんでした。

他に有名なものとて[Octopus](https://github.com/thiagopradi/octopus)があります。[Partial Replication](https://github.com/thiagopradi/octopus/wiki/Replication#-partial-replication-)の設定をすることでデフォルトの接続先をマスターに向けることができ、既存コード変更なしで導入できます。使い方もModelに`using`を付けるだけと快適です。ただ、2点問題がありました。

- `rake db:setup`でコケる。どうやら`db:create`と`db:schema:load`を同時に行うと上手く動作しない
- `rake db:migrate`と`rake db:rollback`でレプリカに`ar_internal_metadata`と` schema_migrations`のテーブルが作成される

２点目の、レプリカなのに書き込まれてしまう点が致命的で、私たちのプロジェクトでは使えませんでした。

困っていた折、[Scaling Reads](https://ankane.org/scaling-reads)という記事に出会い救われました。Makaraの使い方を共有します。

# Makaraとは
開発元[ブログ](http://tech.taskrabbit.com/blog/2013/01/02/makara/)より

> MakaraはRead/Writeを分けるActive Recordのアダプタだ

こんな機能があります。

- 複数DBへのRead/Write分離
- スレーブ障害時のフェイルオーバー
- スレーブ接続断時の自動再接続
- マスターないしスレーブへの接続を分離しないオプション(sticky)
- Mysqlやpostgresに対応
- Middlewareを提供 for releasing stuck connections
- スレーブDBへの荷重接続(Weighted connection pooling)

> 以前はOctopus使ってた。エラーハンドリングやログ出力がイケてないから改善したぜ。
また、マスターの変更がすぐにレプリカに反映されないとき'RecordNotFound'エラーが出てしまう。マスターに書き込んだら読み込みもマスターからの方が安全なんだ。だから俺たちは'sticky'という概念を導入したぜ。

# 使い方
`distribute_reads`ブロックで囲むとレプリカへ接続されます。囲わないとマスターへ接続されます。

```
distribute_reads { User.last }   # replica
User.first                       # primary
```

Makara公式のReadmeを読むと、本来の使い方は自分でProxyを作るようです。しかし、[参考にしたブログ](https://ankane.org/scaling-reads)ではProxyクラスを`prepend`で拡張しています。

`distribute_reads`実行時に`:distribute_reads`フラグをON。これがONならレプリカへ接続。OFFならマスターへ接続。ということをやっています。

注意すべきは、トランザクションを貼ると強制的にマスター接続になる点です。
[/makara/blob/master/lib/makara/proxy.rb](https://github.com/taskrabbit/makara/blob/master/lib/makara/proxy.rb)

```
def _appropriate_pool(method_name, args)
...
  elsif in_transaction?
    @master_pool
  # yay! use a slave
  else
    @slave_pool
  end
end
```

# 導入方法
GemfileにMakaraを追加

```
gem 'makara', '~> 0.4'
```
`config/database.yml`をMakara設定に変更。マスターとレプリカの設定を記載。

```
production:
  adapter: 'mysql2_makara'
  database: 'MyAppProduction'
  makara:
    blacklist_duration: 5
    master_ttl: 5
    master_strategy: round_robin
    sticky: true
    connections:
      - role: master
        name: primary
        host: master.sql.host
      - role: slave
        name: replica
        host: slave.sql.host
```

`config/initializers/makara.rb`を新規作成。`Makara::Context.generate`はv0.4以降廃止されたので、[テストケース](https://github.com/taskrabbit/makara/blob/master/spec/context_spec.rb)を参考に`seed`を手動作成。

```
Makara::Cache.store = :noop

module DefaultToPrimary
  def _appropriate_pool(*args)
    return @master_pool unless Thread.current[:distribute_reads]
    super
  end
end

Makara::Proxy.send :prepend, DefaultToPrimary

module DistributeReads
  def distribute_reads
    previous_value = Thread.current[:distribute_reads]
    begin
      Thread.current[:distribute_reads] = true
　　　 seed = Time.now.to_f
      Makara::Context.set_current(mysql: seed)
      yield
    ensure
      Thread.current[:distribute_reads] = previous_value
    end
  end
end

Object.send :include, DistributeReads
```
Cloudera Manager 6.2にCDFを追加インストール

https://docs.hortonworks.com/HDPDocuments/CFM/CFM-1.0.0/installation/content/add-nifi-toolkit-service.html

https://github.com/fabiog1901/OneNodeCDHCluster/blob/master/setup.sh

Root 権限で実行：

```
wget https://archive.cloudera.com/CFM/csd/1.0.0.0/NIFI-1.9.0.1.0.0.0-90.jar -P /opt/cloudera/csd/
wget https://archive.cloudera.com/CFM/csd/1.0.0.0/NIFICA-1.9.0.1.0.0.0-90.jar -P /opt/cloudera/csd/
wget https://archive.cloudera.com/CFM/csd/1.0.0.0/NIFIREGISTRY-0.3.0.1.0.0.0-90.jar -P /opt/cloudera/csd/
chown cloudera-scm:cloudera-scm /opt/cloudera/csd/*
chmod 644 /opt/cloudera/csd/*
```

その後CM再起動：

```
sudo service cloudera-scm-server restart
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133516/9c5c017c-59fb-56cf-1cbb-8c85527a18ac.png)

NiFiがサービス追加のメニューに、出ました！！！
【Excel】TRANSPOSEを使わない行列入れ替え参照【備忘録】

# 行列入れ替え参照といえば
`TRANSPOSE`関数が有名です。
大体「Excel 行列 入れ替え 関数」とかでググるとTRANSPOSE関数の記事がたくさん出てきます。
ただ、TRANSPOSE関数って配列関数なんですよね。
数式を編集するたびに`Ctrl＋Shift＋Enter`で確定しなきゃいけないし、オートフィルも使えない…ので、場合によってはちょっと不便です。
なので、`INDEX`関数(とその他情報関数？)を利用した数式を残しておきます。
これで毎回「-"TRANSPOSE"」って除外用の検索演算子使ってググる手間が省けるぜ。

# サンプルデータ
5行×3列の表を3行×5列に変換します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117413/e4d91d9d-0401-f9a5-e52c-26c60288c8a5.png)

# 解
参照先の左上になる`G2`のセルに以下の数式を入力し、後は縦横にフィルでドラッグするだけ。

```
=INDEX($B$2:$D$6,COLUMN(B2)-COLUMN($B$2)+1,ROW(B2)-ROW($B$2)+1)
```
INDEX関数の引数について

- 配列：**絶対参照で**参照元の表全体
- 行番号：参照元の表示対象のセルの列番号 - 参照元の表の左上のセルの列番号(**絶対参照**)
- 列番号：参照元の表示対象のセルの行番号 - 参照元の表の左上のセルの行番号(**絶対参照**)

表示したいセルは相対参照にすることで、コピーとかフィル使ったときにちゃんと場所がずれていきます。
参照元の表と基準となる参照元の表の左上のセルを絶対参照にしておかないと、相対参照のセルから正しい位置が割り出せません。

式が長くなるので、参照元の表の配置が絶対に変わらないのであれば、INDEX関数の第2、第3引数を予め計算しておいて以下のような形にするのもありっちゃありです。

- 行番号：`COLUMN(B2)-COLUMN($B$2)+1`　→　`COLUMN(B2)-3`
- 列番号：`ROW(B2)-ROW($B$2)+1`　→　`ROW(B2)-3`

ただし、参照元の表が動くと参照先の表が死ぬ。(絶対参照されていれば、参照元の表の位置が動いた場合に式も連動します)
まあ、あと「式」で書いておけば流用ができます。(計算内容覚えなくても式を移植して参照変えればいいだけ)

頻繁に使うなら、ユーザ関数切るのもいいかも。

やったね~~たえちゃん~~これでTRANSPOSE関数から解放されるよ！
MySQLにコマンドラインからパスワードを入力せず接続

# はじめに
この記事は初心者インフラエンジニアが備忘録的に書いたものです。

# やりたいこと
1.MySQLに接続し、バックアップの取得
2.cronを使ってバックアップの自動化

# 動作環境

```
$ mysql -V
mysql  Ver 14.14 Distrib 5.6.36, for Linux (x86_64) using  EditLine wrapper
```

# バックアップ時の問題点

```
$ mysqldump -u USER_NAME -pPASSWORD -x -A > FILE_NAME
```
上記のコマンドだとパスワードが丸見えなのでセキュリティ上大問題です。
なので、

```
$ mysqldump -u USER_NAME -p
$ Enter password:PASSWORD
```
とするのが普通です。
しかし、自動バックアップとなると後者のコマンドは使用できないため必然的に前者のコマンドになってしまいます。

# 解決案
####1.スクリプトを作成し、変数を使う
結果から言うと意味ないです。

```backup.sh
#!/bin/bash
USER_NAME="root"
PASSWORD="hogehoge"

mysqldump -u $USER_NAME -p$PASSWORD -x -A > FILE_NAME
```
上記のようにスクリプト内に記述してもcronのログに

```
[Warning] Using a password on the command line interface can be insecure.
```
という警告文を吐かれます。
コマンドラインにパスワードを書くなと怒られます。

####2.設定ファイルを読み込ませる
今回はこの方法で解決しました。
適当な場所に設定ファイルを作成します。

```
$ vi /etc/sql.cnf
```
隠しファイルにしたい場合はファイル名の先頭に「.(ドット)」をつけます。(てか、隠しファイルにしたほうが安全です。)
設定ファイルの中身は下記のようにします。

```sql.cnf
[client]
user = root
password = hogehoge
host = localhost
```
パーミッションを最低限に設定します。

```
$ chmod 600 /etc/sql.cnf
```
以下のコマンドで設定ファイルを読み込むことができます。

```
$ mysqldump --defaults-extra-file=/etc/sql.cnf -x -A > FILE_NAME
```
これであとはcronに設定するだけです。

# まとめ
・バックアップを自動化する際はパスワードをコマンドラインに入力しない
・設定ファイルを用いたやり方が分かりやすい
・他にいい方法があったら教えてください