OmniAICreator/Qiita-1.07M huggingface dataset:
nodebrewによるNode.jsのインストールとバージョン管理

##概要
ローカル環境がごちゃごちゃしていたので一度全てアンインストールしてので再インストールした記録。

##環境
macOS Catalina 10.15.3
zsh(bashを使用している場合は「.zshrc」を「.bashrc」に読み替えられる。）
homebrew

##手順
###1.Node.jsの確認とnodebrewのインストール

```terminal
$ node -v # nodeの存在の確認 #バージョンが表示されたら先にアンインストールする。
  command not found: node

$ brew install nodebrew # nodebrewのインストール

$ nodebrew -v # nodebrewインストールの確認
  nodebrew 1.0.1
```

###2.PATHの設定
```terminal
$ nodebrew setup # PATHの部分をコピー
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH # <=ここをコピー
========================================

$ echo '# nodebrew' >> ~/.zshrc \ # PATHを通す
$ echo 'さっきのコピーを貼り付け' >> ~/.zshrc \
$ #例) echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc \

$ vim .zshrc # PATHの確認。「:q」でvimを終了。
# nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

###3.Node.jsのインストール

```terminal
$ nodebrew install-binary stable # Node.js安定版(stable)のインストール。

$ nodebrew list # インストールの確認
v13.8.0
v12.16.0
current: none

$ nodebrew use 12.16.0 # バージョンの変更。複数ある場合はインストール時に表示されたバージョン。
use v12.16.0

$ nodebrew ls # 使用バージョン(current)の確認。
v12.16.0
v13.8.0
current: v12.16.0

$ node -v # バージョン確認
v12.16.0

$ npm -v # node.jsと一緒にインストールされるパッケージ管理ツール。
6.13.4
```

###4.使用しないバージョンのアンインストール（任意）

```terminal
$ brew uninstall 13.8.0 # アンインストール
v13.8.0 uninstalled

$ nodebrew ls # アンインストール確認。
v12.16.0
current: v12.16.0
```

##参考
[【2018年版】macのhomebrewでnodebrew入れてからnode.jsを入れるまで](https://qiita.com/Alex_mht_code/items/422f5ce10d9c9d5729b7)
[NodebrewでNodeをインストールする](https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498)
iosでボイチェン(vocoder)する

# はじめに
Cで実装されたWorld VocoderのSwiftのwrapperを作りました。
リポジトリはこちら → https://github.com/fuziki/WorldInApple
動作の様子
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">worldのswiftのwrapperを公開しましたー<br>iPhoneでボイチェンができます！<a href="https://t.co/t2Y3BvhvLi">https://t.co/t2Y3BvhvLi</a> <a href="https://t.co/b7AI4F1Qkr">pic.twitter.com/b7AI4F1Qkr</a></p>&mdash; ふじき (@fzkqi) <a href="https://twitter.com/fzkqi/status/1229194017910378496?ref_src=twsrc%5Etfw">February 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# WorldInApple
## サンプルプロジェクト

* [world](https://github.com/mmorise/World)をサブモジュールとして組み込んでいるため、--recurse-submodulesオプションをつけてクローンします。
* サンプルプロジェクトはchartsを使っているので、cathageを使ってインストールします。
* xcworkspaceの方(白い方)を開きます。

```
git clone --recurse-submodules https://github.com/fuziki/WorldInApple
cd WorldInApple/Examples/Example-iOS/
carthage update --platform iOS
cd ../../
open WorldInApple.xcworkspace
```

## 機能
### 概要
[AVAudioPCMBuffer](https://developer.apple.com/documentation/avfoundation/avaudiopcmbuffer)のピッチとフォルマントを変化させることができます。
AVAudioPCMBufferはiOSでPCMを扱うことができるクラスで、PCMのバイナリとそのフォーマットを格納しています。
Worldには64bit浮動小数点、48kHz、1chのPCMデータを入力します。指定のフォーマットへの変換は[AVAudioConverter](https://developer.apple.com/documentation/avfoundation/avaudioconverter)を使用します。

### AVAudioPCMBufferのピッチとフォルマントを変える

#### 1. WorldInAppleのインスタンスを作成する

* x_lengthにはAVAudioPCMBufferのframe長を設定します。  
(例えば、48kHzの38400frame分の場合は38400frame/48kHz=0.8sec)

```swift
let worldInApple = WorldInApple(fs: 48000, frame_period: 5, x_length: 38400)
```

#### 2. ピッチとフォルマントを設定する

* ピットとフォルマントの移動分を設定します。
* 1より大きいと高くなり、1より小さい低くなります。
* ピッチは声の音自体の高さであり、フォルマントは声質です。

```swift
worldInApple.set(pitch: Double(1.2)) 
worldInApple.set(formant: Double(1.8))
```

#### 3. AVAudioPCMBufferを入力する

* convの結果としてAVAudioPCMBufferを受け取ります。
* 0.8sec分の処理に0.4sec~0.7secほど要するため非同期で実行することをオススメします。

```swift
let result = worldInApple.conv(buffer: buffer)
```

## イコライザー
サンプルプロジェクトにはイコライザを搭載しています。
worldの変換後の音に対してイコライザ処理ができます。
スライドバーが上にあるほど低音域で、下にあるほど高音域です。
低音域のゲインを小さくすることでノイズを低減する効果がある（気がします）。
<img width="200" alt="IMG_2793.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/dceed9d1-79cb-d044-6216-b4f5479c18a5.png">


# おわりに
WorldのSwiftのwrapperを実装しました。
swiftがcの関数の呼び出しが可能なため、比較的簡単に高品質なvocoderを実装ができました。
簡単にiOS実機とmacのエディタで使えるアセットを作成するツールを作っていています
→ https://fzkqi.hatenablog.com/entry/2020/02/12/235202
今後はこれを使って、WorldのUnityのNative Pluginを作りたいなと考えています。
アセット作成ガイドライン 


# はじめに

長期運用や大人数また作成するアセットが大量にある場合、仕様をかためていかないと大事故につながる危険があります。プロジェクト毎で多少の差異は生まれてきますがその仕様を決めるための基本ルール、ガイドラインについて今回は書いていきます。

# なぜ必要か？
一定のルールを設けることで複数人で作業しても一貫したデータ構造を保つことができる。
そのルールにより後工程にて特定のプログラムを走らせることができる。
構造がルール化されるので誰が見ても分かりやすくなり、引き継ぎや改修が楽になる。
また、そのルールに従っているのであれば問題点も特定しやすい（はず）

# 前提条件
プロジェクト全体の仕様、例えばディレクトリ構造などがかたまっていることが前提となります。

# 基本ルール
現在所属しているところではHoudiniを使用していることもあって[Orbolt](https://www.orbolt.com/)のガイドラインを参考にしています。
[Asset Guidelines](https://www.orbolt.com/asset-guidelines)

## コアファイル
- すべてのパスは相対パスで記述。
- マテリアルはアセット内のサブネット内に配置する。

## コントロールとパラメーター
- すべてのコントローラーはアセットのトップレベルに配置する。
- パラメーターには意味のあるデフォルト値が必要。
- シリーズで作成する際は共通のパラメーター基本レイアウトを考案し、参照する際は統一性を持たせる。

## 単位とスケール
- アセットは一貫した単位設定が必要。距離単位は1Unit ＝1m。実寸で作成。

## 位置と方向
- 座標系の指定（YupかZupか）
- 原点（0,0,0）を中心とする
- 正面の指定

## トポロジー
- 四角形と三角形のみで構成すること

## エクスプレッション、スクリプト
- すべてのカスタムスクリプトはアセットに埋め込むこと。外部スクリプトファイルへの依存はしないように。

## 命名規則
- 一貫した命名規則（プロジェクトにより異なるが一貫した命名規則により整理する）
- Namespaceの指定

## 最適化
- 使用していないノードを削除する。（オフにしているノードをそのままにしてあるとメンテナンス時に判断に困るため）
- エラーやウォーニングが出ているノードは解決する。
- 粒度の大きい処理の塊をネットワークボックスで囲い見やすくする。
- 大まかな処理の内容をスティッキーにメモする。
- 場合によっては色付して見やすくする。
- 場合によってはノードの形状を変えて見やすくする。
- ロックはしてもブラックボックス化しない。（メンテナンスの為）
- ファイル名とノード名を一致させる。
- 不要なアトリビュートを削除する。
- インスタンスが可能であればインスタンス化して軽量化する。
- PythonやHscriptを使用しているプロセスで処理が重くVEXで書き換え可能であればVEXを使用する。

## ヘルプカード
- アセット内にそのアセットに関するヘルプカードを格納する。
- 使用にあたり前提条件があれば記す。
- アセットの簡単な挙動の要約
- パラメーターの説明。（ユーザーが実行できることの説明）

※参考：[HDAにヘルプを付ける方法](https://qiita.com/d658t/items/1737cb4e820b45f28723)

# アセット管理

## 管理ツール
[Shotgun](https://area.autodesk.jp/product/shotgun/)など

## 登録ルール
使用するツールの仕様に従う。

## ヴァージョン管理
管理ツール、管理方法により異なる。
現在所属しているところではSVNでヴァージョン管理を行っています。
Houdiniのアセット HDAの場合は内部にヴァージョンを持てるのでその機能を使用するのも良いでしょう。
注意としては管理方法が重複しないようにする必要があります。統一しておかないと後々混乱のもととなりますので。

## リリースノート
作成、更新した際の記録を残しておく。
最低限下記の3点
- 日付
- 作成（更新）者
- 内容

## 仕様が変更になった場合
長期運用する場合、初期で構築した仕様が途中で変更していくというケースが考えられます。
その際、できているアセットはどの仕様に沿ったもので現仕様とどの部分が異なっているのかを明確にして更新していく必要があります。
管理する際、長期プロジェクトが見込まれる場合には仕様変更も視野に入れる必要があります。

# 終わりに
今回記載した内容は私が現在所属している部署でのものを参考にしているので形状作成によっている内容となっています。
この他にテクスチャ、リグ、アニメーションデータ、シミュレーションのキャッシュの扱いなどプロジェクトによって様々なものが必要になるのでプロジェクトが始まる前に様々な要件の策定が必要になります。
また、プロジェクトで使用しているツール群や関わる他の仕様によっては一部変更する必要もあるでしょう。（実際、走っているプロジェクトでは一部変えている部分もあります。）

事故が起こらないようなにかの参考となれば幸いです。

# 参考ガイドライン
[Orbolt : Asset Guidelines](https://www.orbolt.com/asset-guidelines)
[TurboSquid : CheckMate Pro Specification](https://www.turbosquid.com/3d-modeling/checkmate/checkmate-specifications/checkmate-pro-specification/)
[Unreal Engine :Marketplace Guidelines](https://www.unrealengine.com/ja/marketplace-guidelines?lang=ja)
[Unity : アセットガイドライン](http://assetstore.info/guide/#guide2)
ruby(rails)でデータ量が多い時でもcsvファイルを比較的速く作成する書き方

メモなので分かりにくいかもです

```ruby
user_data_csv = CSV.generate do |csv|
  csv_column_names = ["名前", "年齢"]
  csv << csv_column_names
  
  User.all.find_each do |user|
    csv << [user.name, user.age]
  end
end

File.open("all_user_data.csv", "w") do |csv| 
  csv.puts user_data_csv
end
```

データをまとめてからcsvファイルに書き出してるので、こう書くより速い

```ruby
CSV.open('all_user_data.csv','w') do |csv|
  csv_column_names = ["名前", "年齢"]
  csv << csv_column_names
  
  User.all.find_each do |user|
    csv << [user.name, user.age]
  end
end
```

こちらにさらにいいやり方が載っていました。
https://www.techscore.com/blog/2017/12/04/fast_and_low-load_processing_method_when_exporting_csv_from_db_with_rails/
Nuxtで本番リリースした際にのみスタイル崩れ

Nuxtで運用しているサービスで `productionビルドリリース` したもののみスタイル崩れが発生する、という不具合に遭遇。
詳しく調査した結果、スタイル適用順序がproductionビルドとそれ以外とで違ってくる、というのが原因でした。

# 確認した環境
- nuxt@2.11.0
- スタイルはsass(scss)を選択

# 発生パターンと根本的な原因
これは幅広く発生するというものではなく、特定の条件の場合にのみ発生。
以下のように `自ら定義したカスタムコンポーネントにスタイル上書きをする` 場合にのみ発生します。

```components/CustomComponent.vue
<template>
  <div class="container">
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100px;
  background-color: #f00; // 背景色に赤を設定
}
</style>
```

```pages/index.vue
<template>
  <div>
    <CustomComponent class="override" />
  </div>
</template>

<style lang="scss" scoped>
.override {
  background-color: #ff0; // CustomComponentの背景色を黄色で上書き
}
</style>

<script>
import CustomComponent from '~/components/CustomComponent';

export default {
  components: {
    CustomComponent,
  },
};
</script>
```

こちらのコードを実行する際、 `NODE_ENV=staging` や `NODE_ENV=development` の場合には

> 1. CustomComponentのstyleタグ
2. Indexページのstyleタグ

の順でstyleタグが挿入されるため、想定した通りにCustomComponentの背景が黄色でスタイル上書きされます。

ですが `NODE_ENV=production` ではこれが逆転し

>1. Indexページのstyleタグ
2. CustomComponentのstyleタグ

の順でstyleタグ挿入されてしまうためスタイル上書きが効かなくなり、結果想定したスタイルが適用されなくなります。

# 対処方法

## class属性でなくstyle属性で上書き
単純にスタイル詳細度を高めることにより、適用順序に関係なく上書きスタイルが想定通り適用されるようにします。

```pages/index.vue
<template>
  <div>
    <CustomComponent :style="{'background-color': '#ff0'}" />
  </div>
</template>
```

## extractCSSをONにしてスタイル適用順序をコントロール
若干無理矢理感とextractCSSを入れること自体に抵抗があるかもしれませんが、一応載せます。

```nuxt.config.js
  ...
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          // globalスタイル
          styles: {
            name: 'styles',
            test: /\.(css|scss)$/,
            chunks: 'initial',
            enforce: true
          },
          // components配下のスタイル
          components: {
            name: 'components',
            test: /app\/components/,
            chunks: 'all',
            enforce: true
          },
        }
      }
    },
  }
  ...
```

このようにbuildオプションを設定してcomponents配下のスタイルのみ別の外部cssとして吐き出し読み込みます。
この設定で

> 1. components.css
2. styles.css
3. pages/index.css（ページ単位で生成され遷移のたびに追加される）

の順序でcss読み込みされるようになるため、pages/indexで定義したCustomComponentの上書きスタイルが常に想定通りに適用される、という寸法です。

style属性上書きの方が手軽ではありますが、こちらの場合は開発者が `productionビルドの癖を意識せず自由に実装できる` というメリットがあります。

# まとめ
どちらの対処方法も一長一短ではありますが、私が試行錯誤した範囲ではこの2つしか対処方法が見つかりませんでした。
（というかなんでproductionビルドでこの挙動になってるの・・・）
何か良い方法がありましたらぜひコメントでつっこみお願いします！
herokuでbuildpackを自作してがんばってデプロイできるようにする

# 概要

* Herokuではデプロイするためにbuildpackというのを使う
    * Node.jsでは`npm script`に`start`を定義しておけば、あとはいい感じにやってくれて嬉しい
    * よくある構成のアプリだと、簡単にデプロイできる一方で、独自のオレオレ構成アプリはデプロイが大変！(ていうかどうやるんだろう)
* buildpackを自作してしまったらよいのでは？
* 試しにやったら結構苦労した

# 想定される構成

フロントエンド(SPAの静的なファイル)とバックエンド(WebAPI)の組み合わせです。
Herokuでは静的なファイルを配信するためにもNginxやそれに類する静的ファイル配信用のアプリケーションを用意して、そこで配信する必要があります。
ここで、この問題に対応するためには以下のようなソリューションが考えられるでしょう。

1. WebAPIの特定のパスにアクセスする場合は静的ファイルを配信できるように実装する
1. 静的ファイルはNetlifyとかで配信して、HerokuではWebAPIだけ載せる(CORS対策ちゃんとする)
1. Dockerイメージに固める
1. Herokuのインスタンス内に2つのプロセスを立ち上げて、静的ファイル配信とWebAPIを共存させる

1, 2はダルかったので、3か4で、おそらく簡単で正しいのは3なのだと思うのですが、buildpackを理解する上でもやっておこうと思い、4を選びました。

# 実施内容

## 実際の構成
こんな感じでhttp-serverでリクエストを受けて、それをWebAPIと静的ファイル配信に振り分ける感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71143/c83c349a-aca4-058b-0253-28f4abe1e3ff.png)

## 自作のbuildpackを使えるようにする

まずは、buildpackを作る前にオレオレbuildpackを使えるようにする方法を確認します。
Herokuの[Buildpack API](https://devcenter.heroku.com/articles/buildpack-api)が参考になるでしょう。
具体的なところは実際のbuildpack([heroku-buildpack-nodejs](https://github.com/heroku/heroku-buildpack-nodejs))をみた方が早かったです。

それを踏まえた上で、自分がやったことは以下の通りです。

* Githubとかにbuildpack用のリポジトリを用意する(今回はアプリのリポジトリをそのまま使うことにした)
* トップレベルにbinディレクトリを用意する
* binディレクトリには`detect`, `compile`, `release`というシェルスクリプトを用意する
* detectで"Monorepo"を出力する
* compileでビルドやサーバーを用意する
* releaseは特になにもしなくていいっぽい

## compileでやったこと

実物はこちらです。
https://github.com/naoki-tomita/todo-wasm/blob/master/bin/compile
言語はRustなので、それ特有の処理もやっています。

* Rust関連のツールをインストールする先を`$CACHE_DIR`に設定しておく(ここのディレクトリは永続されるっぽいので、次回以降は早くなる)
* rustupというバージョン管理ツールをインストールする
* cargo-webというツールをインストールする
* ビルドされた成果物が`$CACHE_DIR`に出力されるように設定する(次回からはインクリメントビルドが効く)
* フロントエンド、バックエンドをビルドする
* ビルドで生成された成果物を`$BUILD_DIR`にコピーしておく(Herokuのインスタンスには、`$BUILD_DIR`がコピーされるのでやっとかないと意味ない)
* Node.jsを`$BUILD_DIR/.heroku/node`下にインストールする(http-serverを立てるのに必要だった)
    * インストールというか、Linux用の実行ファイルを公式サイトからダウンロードして解凍しただけ。

## .profile.dを用意する

`.heroku/node`下にNode.jsをインストールしましたが、当然ながらこれだけでは実行することができません。
パスを通さないといけないのです。しかし、パスを通す方法がわからず、相当苦戦しました。

結論からいうと、.profile.dというフォルダ下(binと同じ階層)に任意のシェルスクリプトを置いておくことで、`.bash_profile`的な効果を得られるようです。
そこで、`$HOME/.heroku/node/bin`にパスを通すことで、nodeコマンドやnpmコマンドを利用できるようにしました。

## Procfileを用意する

Herokuでは、トップレベルの階層にProcfileというファイルを置いて、中にコマンドを書いておけば起動時に実行されます。
したがって、これを使ってhttp-serverとWebAPIを起動することにしています。

できたものが[こちら](https://github.com/naoki-tomita/todo-wasm)になります。

以上です。よろしくお願いします。
JenkinsでCygwinを使う

仕事で Windows にインストールした Jenkins を使う機会があったのでまとめ
Jenkins x Cygwin に関する記事があまりなかったので備忘のために書きます

※Windows を使いなれていない人向け


# 環境

Windows10
64bit

# インストール

インストールについてはいろいろ記事があるので簡単に

## Windows にJenkinsをインストール
https://qiita.com/4_mio_11/items/de90df3682323c30319a
とかわかりやすいです

## Cygwinのインストール
https://cygwin.com/install.html
setup-x86_64.exe をダウンロードして実行
言われるがままにOKを押してインストールします（自己責任で）

`C:\cygwin64\bin\sh.exe` が作られたことを確認します
※64bitマシンの場合、ディレクトリ名に `64` がついてますね
![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98954/c124c929-d244-eb51-74b0-7373727b4e4e.png)

# Jenkins設定

Jenkinsを開き、 `Jenkins` -> `Manage Jenkins` -> `Configure System` と選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98954/b706f914-8bf9-95fb-1e04-1627094fd3ca.png)

`Shell` -> `Shell executable` の欄に、先ほど確認した Cygwin の実行ファイル(`C:\cygwin64\bin\sh.exe`)を指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98954/536b48ec-4100-dc52-0cc7-8626d3e50f46.png)

# ジョブ作成

通常の手順でジョブを作ります
Build 項目でビルドステップを追加します。このとき `Execute shell` を追加。
これにより、先ほど設定した `C:\cygwin64\bin\sh.exe` をシェルとしてコマンドが実行できるようになります。
（`Execute Windows batch command` は選択するな！絶対にだ！ ~~Windows batch なんて書きたくない~~）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98954/7456b4d5-78f9-6e11-0361-a3aad94e9750.png)

## サンプルコード

実行環境を確認するために、試しに以下のように書いて動かしてみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98954/8e5b332e-543f-b81b-b589-65fd6aa6645c.png)

大まか、以下のようなログがでます

```
Started by user <yourname>
Running as SYSTEM
Building in workspace C:\Program Files (x86)\Jenkins\workspace\<job_name>
[cygwin] $ C:\cygwin64\bin\sh.exe -xe C:\windows\TEMP\jenkins5658594975380388795.sh
+ PATH='/cygdrive/c/cygwin64/bin:hogehoge...'
+ echo /cygdrive/c/cygwin64/bin:hogehoge...
+ /cygdrive/c/cygwin64/bin:hogehoge...
+ pwd
/cygdrive/c/Program Files (x86)/Jenkins/workspace/<job_name>
+ ls
+ whoami
SYSTEM
Finished: SUCCESS
```

### 解説

```
PATH=/cygdrive/c/cygwin64/bin:$PATH
```

これを先頭に書いておきます
Cygwin にパスを通しておくことで、Cygwin のあらゆるコマンドが使えるようになります

`echo $PATH` でパスが正しく入っているか確認します。確認できたらこの行は消しておきましょう

```
pwd
```

自分のいる位置は、jenkinsのworkspace の中ですね

```
ls
```

ファイルはまだ空っぽ
Cygwin のコマンドが使えていることがわかりますね（Windows batch だと `dir` です）

```
whoami
```

`SYSTEM` さんになっています
権限の問題もあるので、できればちゃんと自分のユーザになりたいところですが、Cygwin には `su` コマンドがないのです
調べたのですが、ちゃんとした解決方法がないようです（情報知りたいです）
（ポートを開けて ssh コマンドで localhost にログインするという手段などが取られているようです）

## OK

これにて Cygwin が使えることが確認できました
bash とか zsh で使ってたコマンドがwindowsでも使えるようになって一安心ですね
(~~windows batch マジめんどい~~)

## 注意点

パスの指定方法に注意がいります
「windows から Cygwin は認識できない」ということです（表現が正確じゃないですが）

windows のパス指定は `C:\...` 
Cygwin のパス指定は `/cygdrive/c/...` という感じですよね

Cygwin コマンド(`ls`, `pwd`, `find`...)を使うんであれば `cygdrive` 方式のパス指定をすれば問題ないのですが
Windows のプログラム (`Program Files (x86)`の中の物とか）に引数としてパスを渡す場合は、 `C:\...` 形式にしておかないと、認識してくれない場合があります
ここ、気をつけて使い分けないと、「パスが存在しません」的なエラーが出て頭を悩ますことになります

Cygwin用のディストリビューションが用意されているソフトウェアの場合は、そちらを使った方がいろいろと楽になると思います

~~`Program Files (x86)` のディレクトリ名にスペースが含まれているのが悪い~~
phpのjson_encodeでjsonの形式を空配列と空のオブジェクトで識別するオプション

phpでjsonの形式にエンコードする際に連想配列を用いていることが多いと思いますが、
空の配列の場合はどうなるでしょう。

普通にデフォルトで指定するとこうなります

```php
$a = [];

var_dump(json_encode($a));
```

```php:出力結果
string(2) "[]"
```

あれ？jsonって``{}``になるんじゃないの？って思った方もいると思います。
そこのjsonの形式を変更させるオプションが``JSON_FORCE_OBJECT``です。

これを使うと空配列``[]``ではなく``{}``と変換されます。

JSON_FORCE_OBJECTを指定した場合とデフォルトの場合

```php
$a = [];

var_dump(json_encode($a));
var_dump(json_encode($a, JSON_FORCE_OBJECT));
```

```php:出力結果
string(2) "[]"
string(2) "{}"
```

``JSON_FORCE_OBJECT``パラメータはphp5.3.0からoptionsパラメータに追加されました。
All-in-One WP Migrationのメモ

##プラグイン All-in-One WP Migrationをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/cd7e1f9a-516c-eee1-af20-18e8b9927934.png)

##移行元（ひな形）をエクスポートする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/e816a498-f2b6-29be-0013-6a3abcb0835d.png)

今回はひな形として移行するため、テーマとプラグインとその設定が中心となる



##移行先にもプラグイン All-in-One WP Migrationをインストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/a28d342d-9611-2eaf-bdb1-3da5840bda61.png)



##移行先のバックアップを取る
移行先で復元したときにどの程度影響がでるのかわからないので、バックアップをまずは取っておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/0de6af14-faf6-5d9a-22c7-a1f6d71428d3.png)


##インポートサイズの制限問題
「All-in-One WP Migration」の無料版では、扱えるファイル容量に制限があります。
バージョンによって異なりますが、インポートは100M程度です。

これを解決する方法を試してみましたが、プラグインを利用するのがよさそうです。

###All-in-One WP Migration Importと言う拡張プラグインをインストールする

https://import.wp-migration.com/

上記からプラグインをダウンロードしてWordPressにアップロードを行います。

WordPressのバックアップと復元は、
All-in-One WP MigrationとAll-in-One WP Migration Importがあれば無敵ですね！


###別環境に復元したときの注意点
バックアップを別の環境に復元したときに、一部のファイルが消えることがわかりました。
例えば、db.phpなどですね。
他にもあるかもしれませんのでご注意を！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/b81611b6-04f3-be71-3520-732c9cf605a5.png)
Gitlab12 504エラー対応メモ（Prometheusのwalファイル圧迫）

# 概要

* GitLabが接続できないとの報告を受ける
* 504エラー
* ざっと見たところファイルシステムフル状態
* /var/opt/gitlab/prometheus/以下がかなり割合を占めている

# 詳細

* 状態

```
# du -sh /var/opt/gitlab/prometheus/*
15G	/var/opt/gitlab/prometheus/data
247M	/var/opt/gitlab/prometheus/data_tmp
8.0K	/var/opt/gitlab/prometheus/prometheus.yml
24K	/var/opt/gitlab/prometheus/rules

# du -sh /var/opt/gitlab/prometheus/data/*
0	/var/opt/gitlab/prometheus/data/lock
20K	/var/opt/gitlab/prometheus/data/queries.active
15G	/var/opt/gitlab/prometheus/data/wal

# du -sh /var/opt/gitlab/prometheus/data/wal/*
52M	/var/opt/gitlab/prometheus/data/wal/00001340
52M	/var/opt/gitlab/prometheus/data/wal/00001341
52M	/var/opt/gitlab/prometheus/data/wal/00001342
52M	/var/opt/gitlab/prometheus/data/wal/00001343
52M	/var/opt/gitlab/prometheus/data/wal/00001344
52M	/var/opt/gitlab/prometheus/data/wal/00001345
:
:
53M	/var/opt/gitlab/prometheus/data/wal/00001621
128M	/var/opt/gitlab/prometheus/data/wal/00001622
129M	/var/opt/gitlab/prometheus/data/wal/00001623
128M	/var/opt/gitlab/prometheus/data/wal/00001624
128M	/var/opt/gitlab/prometheus/data/wal/00001625
66M	/var/opt/gitlab/prometheus/data/wal/00001626

```

## 対応

* 当該ファイルを削除し念のためシステム再起動
* [参考イシュー](https://github.com/prometheus/prometheus/issues/6408)

```
$ sudo rm -f /var/opt/gitlab/prometheus/data/wal/000013*
$ sudo rm -f /var/opt/gitlab/prometheus/data/wal/000014*

$ sudo reboot
```

## 結論

* walファイルを削除して暫定対応
* 削除して問題ないかは調査しきれていない、復旧・開発再開を最優先
* walファイルを削除してもその後の動作には今の所影響なさそう
* walファイルはシステムクラッシュ時の復旧に使用するファイルらしいのでバックアップさせしっかりとれていれば問題なさそう
* 自動的にバックアップは取っている環境なのでwal削除を決定
* チェックポイントで自動削除されるらしいが。。
* 設定で自動削除を制御するなど根本対応できないか調査中
kotlinでNULLチェックインライン関数を作る

KotlinのNullチェックはまさに神だと思います。

```
v ?: return
```

Javaで書くとこういうことです。

```
if (v == null) {
  return
}
```

これに対して、NotNullチェックは特に用意されていないのです。
つまり、

```
if (v != null) {
  return
}
```
と、Javaのような書き方をしないといけません。

気にならない人は気にならないかもしれませんが、NullチェックとNotNullチェックが並んでいて、且つ頻繁に変更されることがあるとしたら、都度面倒な修正をしないといけないので、上記のような書き方ではちょっと嫌になります。

## インライン関数の登場
自分好きな名前でインライン関数を作成してみましょう。

```
private inline fun <T> ifNotNull(p: T?, f: () -> Unit) {
    if (p != null) f()
}

private inline fun <T> ifNull(p: T?, f: () -> Unit) {
    p ?: f()
}
```

すると、下記のように同じフォーマットで書くことができます。

```
ifNull(aa) {}
ifNotNull(bb) {}
ifNull(cc) {}
```
NullチェックとNotNullチェックを変更する時は、メソッド名を変えるだけで、簡単に処理を切り替えることができます。
情報処理安全確保支援士を辞めた

#情報処理安全確保支援士とは
情報処理安全確保支援士というのは、経済産業省・IPAが実施している情報処理技術者試験の「情報処理安全確保支援士（登録セキスペ）試験(SC)」に合格し、かつ登録手続きを行った人に与えられる国家資格です。（他の試験と異なり、合格しただけでは資格取得にはなりません）

この度、以下のような理由のため、登録を消除することにしました。
（期限内に講習を受けなければ自動的に資格喪失になるとは思いますが、法律上は法律違反で処分されることになり気持ちが悪いので、きちんと届け出をして消除しました）

個人的には、試験の受験自体はスキルアップのためにも良いことだと思いますが、試験合格後にすぐに登録手続きを行わないことをお勧めします。

# 情報処理安全確保支援士に登録しないほうが良い理由（消除した理由）

## 名前がカッコワルイ

「情報処理安全確保支援士」っていう名前からは、セキュリティ関連のイメージが全く湧きません。未だに知名度が向上しない最大の理由でもあります。
もしかしてカタカナ文字を使いたくなかったのかもしれませんが、祝日の名前ですら「スポーツの日」のようにカタカナ文字が使われるこのご時世。
単純に「情報セキュリティスペシャリスト」とかのほうがよっぽど良かったんじゃないかと思います。

## 資格を持つメリットがない

そもそも運転免許のような「免許」制度ではないので、この資格を持たなくてもセキュリティに関する業務に何の問題もなく従事できます。
採用時の応募資格として決められているのも、警察のサイバー犯罪捜査官くらいしか聞いたことがありません。
名刺にロゴなどを印刷できる「特典」があるそうですが、そもそも知名度も世間の評価も大したものではないので、名刺に印刷しても大したアピールになりません。

## 維持費用が高額

資格を維持するためには毎年２万円払ってオンライン講習を受ける必要があります。
オンライン講習といっても非常にチープなもので、会社などで定期的に受けさせられる Web ブラウザで行う理解力確認テストみたいなものです。（スライド形式の資料を見た後に、選択式の問題を全問正解するまでひたすら一から回答を入力させられる、アレです）
講習システムの構築や運営にもお金もかかるのでしょうが、正直ボッタクラレた感が強烈です。
こんな低レベルのオンライン講習に毎年２万円も取られるくらいならば、毎年再受験するかベンダー系資格の取得費用に回したほうがマシだと思ってしまいます。（なお再受験による資格維持制度は現在はありません）
さらに、３年に１度は集合講習が必要であり、こちらは８万円。受講者の感想を見る限りは良い内容のようですが、他の国家資格の集合講習と比べると割高です。
３年間に必要となる講習費用は計１４万円になりますので、金銭的負担が非常に大きいです。

## 資格を持つデメリットがある

情報処理安全確保支援士には罰則があり、罰金刑・懲役刑を受ける可能性があります。
秘密保持義務違反などを行った場合、有資格であるために刑罰に処される場合があります。
まあ、資格を取った後に悪いことをしなければ問題はないのでしょうが、悪いことをしていなくてもあらぬところから火の粉が飛んでくることもある業界でもあるので、リスクではあります。
注意が必要なのは、試験に未合格の状態や試験に合格しただけで「情報処理安全確保支援士」と名乗ると罰金刑（非親告罪）の対象になります。
合格実績を履歴書などに記載する場合、「情報処理安全確保支援士試験合格（未登録）」といった表記にしないと「前科者」になってしまいますよ。

## 登録の手間がとても面倒かつ費用もかかる

登録の際には合格証書のコピーと登録申請書を出すだけでなく、戸籍謄本/抄本/住民票なども必要となります。
最近は少しだけ手間が減ったようですが、役所に行って手続きして書類をかき集めて郵送、と非常にメンドクサイです。
あんまりメンドクサイので、フローチャート書いたくらいですよ。こういうのこそ、マイナンバーで管理すれば手続きも簡素化できて良いと思うんですが。
登録時の手数料なども必要で、合計でおよそ２万円強かかります。出費がイタイ。

## 登録制度に欠陥がある（最新の能力であることを証明できない）

現状の情報処理技術者試験には(部分合格を除く)合格の有効期限がありませんので、合格した試験・資格は（欠格事項に該当しない限り）生涯有効です。
日進月歩で技術が進化している昨今においては知識をどんどんアップデートする必要があるので、生涯有効な資格の実効性には疑問に思うところがあります。
情報処理安全確保支援士に関しては、試験に合格してから登録するまでの期限もありません。(いつでも登録できる)
一旦登録してしまうと、オンライン講習や集合講習を定期的に受講しないと資格を維持できませんが、合格した後で登録しなければ、(情報処理安全確保支援士を名乗ることはできませんが)いつでも資格を有効にできるので、定期講習を受けるコストが不要になります。
さらに、登録を自分で消除した後での再登録にも制限はありません。（新制度以降の合格者は再合格する必要もありません）
いずれは登録制度の内容の見直しもされるのでしょうが、現状制度では消除・再登録を行えば「講習逃れ」も可能と思われます。（再登録の手間があるので、そこまでしてやるかというのはあります）

# 参考リンク

「情報処理安全確保支援士」登録の手引き
https://www.ipa.go.jp/files/000063891.pdf

「情報処理安全確保支援士」よくある質問
https://www.ipa.go.jp/files/000068579.pdf

「情報処理安全確保支援士」登録消除届出書
https://www.ipa.go.jp/files/000058522.pdf
webpack(4)とTypeScriptとglob

# 概要

- webpack(4)でglobを使用して効率よくコンパイル
- TypeScriptだと拡張子ts変換が出力されてしまうので、js拡張子に

## コード

```webpack.config.js
~~省略~~

const glob = require("glob");
const srcFiles = "./resources/js/*.ts";
const entries = {};

glob.sync(srcFiles).map(function(file) {
  const key = file.replace("resources/js/", "").replace(/\.ts$/, "");
  entries[key] = file;
});

module.exports = {
  entry: entries,
  output: {
    path: path.resolve(__dirname, "common/js"),
    filename: "[name].js"
  },

~~省略~~
```

## 参考

[webpack 4＋TypeScript 3＋globで開発環境をつくる](https://tt-computing.com/webpack4-ts3-glob)
rbenvによるRubyのインストールとバージョン管理

##概要
ローカル環境がごちゃごちゃしていたので一度全てアンインストールしてので再インストールした記録。

##環境
macOS Catalina 10.15.3
zsh(bashを使用している場合は「.zshrc」を「.bashrc」に読み替えられる。詳しく知りたい場合は参考先を参照。）
homebrew

##手順
###1.現在のrubyのバージョンと場所の確認。

```terminal
$ ruby -v # バージョンの確認
  ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]

$ which ruby # 場所の確認
  /usr/bin/ruby
```

「/usr/bin」配下のrubyは削除しないほうが良いようなのでこの状態でOK。
>/usr/bin配下はMacOS標準のコマンドが格納されていて、システム自身が利用します。
削除やインストールなどはしないでください。
[参考](https://teratail.com/questions/241681)

###2.rbenvのインストールとセットアップ

```terminal
$ brew install rbenv ruby-build # rbenvのインストール

$ echo '# rbenv' >> ~/.zshrc \ # PATHを通す
$ echo 'export PATH=~/.rbenv/bin:$PATH' >> ~/.zshrc \
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc \

$ source .zshrc # PATHの追加を反映

$ vim .zshrc # .zshrcの確認。確認ができたら「:q」でvimを抜ける
# rbenv
export PATH=~/.rbenv/bin:$PATH
eval "$(rbenv init -)"

$ rbenv -v # rbenvのバージョンを確認
  rbenv 1.1.2
```

###3.Rubyのインストール
[Ruby公式ページ](https://www.ruby-lang.org/ja/downloads/)で安定版の確認。

```terminal
$ rbenv install 2.7.0 # ruby安定版のインストール

$ rbenv versions # アクティブなバージョンを確認
  system
* 2.6.3 (set by /Users/ユーザー名/.ruby-version)
  2.7.0 

$ rbenv global 2.6.0 # バージョンの切り替え。

$ rbenv versions # アクティブなバージョンを確認。変わっていなければ「rbenv local 2.6.0」を実行。
  system
  2.6.3 
* 2.7.0 (set by /Users/ユーザー名/.ruby-version)

$ ruby -v # rubyのバージョン確認
  ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]

$ rbenv uninstall 2.6.3 # アンインストール(任意)
```

##参考
[rbenvによるRubyのインストールからHello, World!まで](https://qiita.com/krtsato/items/3d77501434f623092893)
Pepper SDK入門(15) Layout Editor

Android Studioでは、Layout Editorというツールが利用できます。これは、デバイス上でのレイアウトをプレビューするためのものです。
以下でその使い方をまとめていますが、[Googleによる公式ドキュメント](https://developer.android.com/studio/write/layout-editor)も存在しますので、より詳しく知りたい方はそちらも参考にしてみてください。
#Pepperタブレットのプレビュー
Android Studioでは、様々なスクリーンをプレビューできるようになっています。Pepper用のアプリケーションをプレビューしたい場合は、Pepperのタブレットのサイズを正確に選択しましょう。Pepper pluginがインストールされていれば、デバイス一覧からPepperのタブレットが選択できるようになっていると思います。
<img width="659" alt="スクリーンショット 2020-02-10 16.43.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574697/5d040f22-1e65-b218-5b66-57ea40e227ff.png">
#SpeechBarのプレビュー
SpeechBarは、ユーザーから聞き取った内容を表示するものです。現状3つの種類が存在し、ALWAYSは常にこのバーを表示しておくもの、Overlayはユーザーの発話を認識した際のみこのバーを表示するもの、そしてIMMERSIVEは聞き取った内容のみをToastのように表示するものになります。いずれも表示位置については、上部か下部か選択することが可能です。
上記のSpeechBarとエディターのプレビューも利用することができますので、gradleファイルのdependenciesにimplement com.aldebaran:qisdk-design:x.x.xの一行を書き加え、さらにShow Layout Decorationsのオプションにチェックを入れてみてください。
デフォルトのSpeechBarを表示するには、RobotTheme.Editor.SpeechBar.Alwaysを選択しましょう。
<img width="759" alt="スクリーンショット 2020-02-18 9.26.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574697/1c376692-fefc-4204-6927-6e0c4d4c06f8.png">
ただし、実際のアプリでの表示とは異なる可能性があるため注意が必要です。*SpeechBarはAPI6では使用可能ですが、API4では使用できない点に注意してください。*
##レイアウトの違い
RobotTheme.Editor.SpeechBar.Always、RobotTheme.Editor.SpeechBar.Overlay、RobotTheme.Editor.SpeechBar.Immersiveそれぞれのテーマのレイアウトは以下の通りです。差を分かりやすくするため、左上にボタンを配置しています。
<img width="499" alt="スクリーンショット 2020-02-18 12.37.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574697/be2495d7-a59b-7e6a-28fe-a300c2420ee9.png">
<img width="500" alt="スクリーンショット 2020-02-18 12.36.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574697/7ff2aa39-659d-0596-4203-f04fb3b2e05f.png">
<img width="499" alt="スクリーンショット 2020-02-18 12.36.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574697/adb05906-960b-92c2-a330-919dd4cc810c.png">
AdobeXDのカラーピッカー(スポイト)で正しい色を拾わないバグの対処法(mac)

多い時は月2～3回アップデートが行われるAdobeXD。
様々な機能が追加され嬉しい反面、たまにバグに直面します。
公式フォーラムにて質問したところ対処法が確認されたのですが、
タイトルが日本語から英語に修正され、日本語の検索でひっかかりにくいため
日本語版として記載します。

#起こる現象
iOS：バージョン10.15.1
AdobeXD：バージョン　24.1.22

スポイトで色を拾った時に、拾った色と微妙に違う色になるバグがありました。
![スクリーンショット 2019-11-11 18.35.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587632/42d9f983-5dd8-0e5d-098b-9fc68e1a7a51.png)

#解決方法(一部)
フォーラムで確認した所、以下の提案がありました。
- サブディスプレイではなく、macのディスプレイからAdobeXDを起動する
- モニターのカラー設定を全てsRGBにする
- グラフィックボードのドライバを最新にする

自分はモニターのカラー設定を変更することで解決しました。

##原因
Photoshop、Illustratorはカラープロファイルを設定できるのに対して
AdobeXDはデバイスカラーを拾っているので起こるバグ、
また、グラフィックボード由来のバグもあるようです。


##フォーラムの記事
海外でも同様のバグに直面したユーザーが多く、スレが盛り上がっていました。
https://community.adobe.com/t5/adobe-xd/panel-color-picker-picks-up-the-light-color-in-adobe-xd/td-p/10729788?page=1

根本的な解決はまだアップデートされていないと思われます。
Rails6 link_toで作成したリンクをGETではなくPOSTにしたいとき

## 目的

- ページ内リンクでHTTPメッセージのGETではなくPOSTを送りたい時の方法をまとめる

## 書き方の例

- 考え方は簡単で、POSTを送りたいlink_toに引数として`{method: "post"}`を与えてあげるだけである。
- 下記にアプリ内URLにPOSTを送る時のlink_toの記載をする、

    ```ruby
    link_to("表示されるリンク名", "POSTを送るURL", {method: "post"})
    ```
goenvでGo1.13.6をインストールメモ

## 背景
homebrewでインストールしたgoenvをupgradeしたがインストールできるバージョンの最大が1.12だったので使いたかった1.13.6が使えなかった。

```
$ goenv install -l
Available versions:
  [省略]
  1.10.7
  1.11.0
  1.11beta2
  1.11beta3
  1.11rc1
  1.11rc2
  1.11.1
  1.11.2
  1.11.3
  1.11.4
  1.12beta1
```

## 作業メモ

goenvのディレクトリとbrewのgoenvを一旦削除

```
$ rm -rf `goenv root`
$ brew uninstall goenv
```

[goenv/INSTALL.md](https://github.com/syndbg/goenv/blob/master/INSTALL.md)の手順通りにコマンド実行

```
$ git clone https://github.com/syndbg/goenv.git ~/.goenv
$ echo 'export GOENV_ROOT="$HOME/.goenv"' >> ~/.bash_profile
$ echo 'export PATH="$GOENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(goenv init -)"' >> ~/.bash_profile
$ echo 'export PATH="$GOROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'export PATH="$PATH:$GOPATH/bin"' >> ~/.bash_profile
$ eval "$(goenv init -)"
$ brew install goenv
```

インストールされている事を確認

```
$ goenv install -l
Available versions:
  [省略]
  1.11.12
  1.11.13
  1.12.0
  1.12beta1
  1.12beta2
  1.12rc1
  1.12.1
  1.12.2
  1.12.3
  1.12.4
  1.12.5
  1.12.6
  1.12.7
  1.12.8
  1.12.9
  1.12.10
  1.12.11
  1.12.12
  1.12.13
  1.12.14
  1.12.15
  1.12.16
  1.12.17
  1.13.0
  1.13beta1
  1.13rc1
  1.13rc2
  1.13.1
  1.13.2
  1.13.3
  1.13.4
  1.13.5
  1.13.6
  1.13.7
  1.13.8
  1.14beta1
  1.14rc1
```

Go1.13.6をインストール

```
$ goenv install 1.13.6
Downloading go1.13.6.darwin-amd64.tar.gz...
-> https://dl.google.com/go/go1.13.6.darwin-amd64.tar.gz
Installing Go Darwin 64bit 1.13.6...
Installed Go Darwin 64bit 1.13.6 to /Users/xxxxxxxxx/.goenv/versions/1.13.6
```

1.13.6が使えるようにする

```
$ goenv global 1.13.6
$ goenv rehash
$ goenv versions
  system
* 1.13.6 
```

## アップグレードする場合

```
$ cd ~/.goenv
$ git pull
```

## 参考
- [【Go】goenvを使ってGo1.13.4の環境構築](https://qiita.com/seicode/items/9ffce10086f0646379a1)
- [goenv/INSTALL.md](https://github.com/syndbg/goenv/blob/master/INSTALL.md)
PhpStorm(IntelliJ IDEA)でたまにやる矩形選択を解除する方法

急いで打ってたら何かの拍子にショートカットを押してしまって、急に空白のところにカーソルが侵入して打ちづらくなる現象。

左で改行したいのにあるはずのない亜空間にカーソルが動いてしまう。そんな現象。

短径選択とかフリーカーソルというらしいです。

直し方

![スクリーンショット 2020-02-17 11.40.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430539/38223bad-17fe-d761-dc01-cbd84b492b79.png)

Edit > Column Selection Mode

の左に☑️が付いてたらはずしてあげます。

comannd + shift + 8 か...押した覚えがない(ある)
Reactで画像をlazyloadしつつpreloadするコンポーネント

FirstViewにはいらんけど、スクロールして登場するまでにはなるべく存在してほしいみたいな画像があったので作ってみました。
正直こんな雑なやり方で合ってるのか分からんのでもっといい方法知ってる人がいたら教えてください頼みます。

```tsx

import * as React from 'react';

type Props = {
  imgUrl: string;
  alt: string;
};

export default function LazyAndPreloadImage(props: Props) {
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    // preload しておく
    const img = new Image();
    img.src = props.imgUrl;

    // 読み込めたら img タグ描画する
    img.onload = () => {
      setLoaded(true);
    };
  }, []);

  if (loaded) {
    return <img src={props.imgUrl} alt={props.alt} />;
  }
  
  // 雑に空divにしてるけど思い思いのplaceholder入れてください
  return <div></div>;
}

```
Excel VBAで頭の片隅に置いておきたいバグ一覧

#概要
Excel VBAを作っている時に遭遇するバグを記載。
知らないと面喰うので頭の片隅にでも。

`ほとんどは Excel2010 で体験したことなので最新版で再現するかは未検証。ご存じの方は教えてください。`

#バグ一覧

##コマンド ボタンが小さくなる
###現象
**ActiveXコントロール**のコマンドボタンを設置していると、ボタンもボタンのtextもマクロを実行するごとに小さくなっていく場合がある。

###対策
**フォームコントロール**のコマンドボタンを使う。

`ボタンのサイズ等を毎回セットし直せばよいのでは、と思って試したけどうまくいかなかった気がする。だいぶ昔の話なので、なぜうまくいかなかったかは覚えていない。`


##大量にコピペをしていると実行時エラーが出る
###現象
マクロでグラフやシート等を大量にコピペ or 生成していると途中で実行時エラーが発生する。

###対策
いくつかコピペ or 生成するごとにブックを保存する。

###参考
http://yutechi.hatenablog.com/entry/2012/12/05/111910
`以前はMicrosoftのサポートページに記載があったけど消えてた。`


##ブレークポイントで止まらない
###現象
ブレークポイントを設定してもデバッグ実行中に止まらずスルーされる。悲しい。

###対策
ソースコードに適当な改行を増やしたり減らしたりして保存するとなおる。

###参考
https://www.remember-the-time.xyz/2013/07/vba.html
http://kagen88.blogspot.com/2013/12/vbabreakpoint.html


##何もないところで「コードの実行が中断されました」と出てマクロが中断される
###現象
ブレークポイントも設定していないし、実行時エラーが出るわけでもないのにマクロの実行が中断される。
中断される場所、タイミングはバラバラ。

###対策
マクロが中断されている時に `Ctrl` を押しながら デバッグの`リセット`ボタンをクリックすると改善する？らしい？

###参考
http://unote.hatenablog.com/entries/2011/09/26


##[Ctrl] + [Y] を押すと1行消える
###現象
アンドゥ([Ctrl]+[Z])しすぎて元に戻そうとした場合に、1行消えて自分自身の動きが止まる。
`※バグじゃなくて仕様だけど。`

###対策
涙を拭きながら打ち直す。

#まとめ
慌てず冷静に症状を言語化してググれるかどうかが勝負の分かれ目。
PMBOKにおけるプロジェクトマネジャー

##PMBOKガイドにおけるプロジェクトマネジャーの定義
一定の知識、経験を有するもので、チームの目標を問題なく完成させるようにチームをリードし、動機づけることを責任とするものです。

##プロジェクトマネジャーに求められる３要素
###客観視できる視野
プロジェクトの状態、各メンバーの状態などを客観視しながら、プロジェクトの目標を常に意識することです。

###正論と正解の判別
下手に支援役になろうとせず、意思決定をするのはマネジャーです。白黒をつける必要があります。メンバーと話し合い、いくつもの正論の中から、１つの正解をメンバーに提示する、それがリーダーたるものの責任です。

###業務における十分なコンピテンシー
コンピテンシーはメンバーを十分安心させるだけ十分に持つ必要があります。そこで自己研鑽など絶えずして、外部環境などを意識する必要もあります。
rails new APP_PATHで悩んだ

ほんとうに悩んだ。

```
c:\workspace\rails new hoge
```

これを実行してエラーもなく完了する。
しかし

```
c:\workspace\cd hoge
c:\workspace\hoge\rails new hoge
Usage:
  rails new APP_PATH [options]
（省略）
```
ってなった。ググると仲間が多い。

エクスプローラーでhogeの中身が物足りないことに気が付いた！


コマンドプロンプトを管理者で実行してからやり直すだけだった。
（超初心者向け）サーバーを新しく買ったから、セットアップをしていこう！

# 初心者向けのサーバー構築手順書です。
## 概要
新しいサーバーにリプレースをすることになったとき、あなたはきっとこう思うはず。
PC1台組むのと何ら変わらない。
その通りです、何も心配ありません。一緒にやっていきましょう。

## ①ハードウェアの取り付け
サーバー本体に、購入したSSDやメモリを取り付けましょう。
※HPのSSDの場合はフロントにあるバーのようなものを開いて取り付けます、取説をちゃんと読みましょう。
RAIDを構成するためにコントローラーなどを合わせて購入したときは、デフォルトでついているコントローラーからの"配線の繋ぎ変え"を忘れずに！
※私はこれを忘れて作業が４時間伸びました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391507/166dd95e-80d7-b76e-3fca-cae02d5985ae.png)


## ②ラックにマウントしよう
ネジを使わないラックマウントレールがついてるかな？
差し込むだけだから簡単だね
※前後もそうですが、"上下"の間違いに注意！私はこれでねじで固定できなくなりました。


## ③ストレージの設定をしよう！
サーバーについているディスプレーの出力と、USBマウス・キーボードをつなげよう!
アレイやRAIDの設定はBIOSで行います。まずはRAIDを構成しましょう！
参考：http://ottoserver.com/pcserver1/wp/archives/3643

## ④OSのインストール
WEBからダウンロードしたデータをインストールディスクに書き込みしたりして用意
USB-光学ドライブなどに入れて接続
BIOSの設定でブートをUSBポートなどにしてから、起動してインストール

## ⑤完了！
おめでとう！
rails6でのjquery導入方法

メモ

①

```bash
$ yarn add jquery
```

②エディタとか閉じて開き直す。 railsも再起動する。

③localhost:3000のページでoption+command+iでデベロッパーツールを開く。

④コンソールを選択して

```console
console.log($.fn.jquery)
```

これで3.4.1とかバージョンが返ってくればok

なんか")"が赤くなっちゃった笑
PMBOKにおける成果物の定義とは

# 成果物とは
成果物とはプロジェクトの各フェーズで生成される結果のことです。成果物は大きく分けて、スペシャリスト成果物とマネジメント成果物の二種類あります。

##スペシャリスト成果物とは
スペシャリスト成果物とは仕様書や設計書、ソースコードや開発されるシステムなど、プロジェクトにおいて各専門職が生成する結果です。これらはプロジェクトの内容や業種によって異なります。

##マネジメント成果物とは
プロジェクトを管理する上で必要な成果物です。WBSやガントチャート、課題管理表やプロジェクト報告書など、主にプロジェクトの進行上発生する文書類のことを指します。これらはプロジェクトの内容と業種によって違いが少ない特徴を持っています。
誤ってGCPのデフォルトサービスアカウントを削除してしまった場合の復元方法

# サービスアカウントとは

GCPには各アカウントによって権限が割り当てられています。
そしてそれらはメールアドレスと紐付けられています。
そして、プロジェクトを作成すると自動的に「デフォルトサービスアカウント」というものが作成されます。

ここで厄介なのが、このデフォルトサービスアカウントは自分で簡単に削除することができるものの、他のサービスアカウントをデフォルトに変更することができません。

つまり、誤ってデフォルトのサービスアカウントを削除してしまった場合、すべてのGCPプロダクトからのアクセスがリジェクトされます。

# 解決法

`$ gcloud beta` コマンドを使ってサービスアカウントを復元します。
もし削除から30日以上立っていた場合は復元不可能ですので諦めて新しいプロジェクトを作成しましょう。


## 1. 削除したサービスアカウントのIDを探す

[GCPログ](https://console.cloud.google.com/logs/viewer?hl=ja&_ga=2.23803642.1133608293.1581895225-1183271298.1581895225)を見て削除時のログを探します

検索バーに`text:"DeleteServiceAccount"`とか打つとすぐ出てくるかも。
出てきたログからIDを捕まえます。




## 2. `beta`コンポーネントを追加する

```
$ gloud components install beta
$ gloud components update
```

## 3. 復元

```
$ gloud beta iam service-accounts undelete <アカウントID>
```

# 参考

- [gcloud beta iam service-accounts undelete
](https://cloud.google.com/sdk/gcloud/reference/beta/iam/service-accounts/undelete)
- [Managing SDK Components
](https://cloud.google.com/sdk/docs/components)
- [サービス アカウントの削除の取り消し](https://cloud.google.com/iam/docs/creating-managing-service-accounts?hl=ja#undeleting_a_service_account)
【Ruby3】 型を書かずに型検査する "型プロファイラ" を試す

追記（2020/02/27）: セットアップ方法が変更されたので記事に反映しました

## 型プロファイラとは？
> 型プロファイラは、
>
> 型注釈がない素の Ruby プログラムを入力して、
> 型エラーの可能性を警告したり（Testing）、
> 型シグネチャのプロトタイプを生成したり（Understanding）
> できるツールです

※開発者である遠藤さんのブログ記事から引用

この機能は2020年にリリースが予定されている Ruby3 の新機能の中の静的解析の一要素となっています。
その他の静的解析の情報については [Ruby の型関連の情報まとめ](https://qiita.com/natsuokawai/items/6d652e3b72a79e019f22) にまとめてあるので良ければ見てください。

## 環境
- Ruby 2.7.0

## セットアップ
```shell
$ git clone --recursive https://github.com/mame/ruby-type-profiler.git
$ cd ruby-type-profiler
$ bundle install
```

## デモ
README の DEMO と同じものを動かしてみる。
以下のコードを `ruby-type-profiler/tmp/test.rb` として保存。

```rb:test.rb
def foo(x)
  if x > 10
    x.to_s
  else
    x.boo()
    x + 42
  end
end

foo(42)
```

```shell
$ cd ~/work/ruby-type-profiler
$ ./run.sh tmp/test.rb
```
上記を実行すると、以下のように、定義が存在しない定義が検出される。また、推定された型シグネチャも出力されている。

```
# Errors
tmp/test.rb:6: [error] undefined method: Integer#boo

# Classes
class Object
  foo : (Integer) -> (Integer | String)
end
```

ここで `x.boo()` の行をコメントアウトしてみると、予想通りエラーが消える。

```
$ ./run.sh tmp/test.rb
# Classes
class Object
  foo : (Integer) -> (Integer | String)
end
```

次に、引数を文字列にしてみる。

```rb:test.rb
def foo(x)
  if x
    x + '42'
  else
    x + 42
  end
end

foo('a')
```

型プロファイラの実行結果は以下のようになる。

```
$ ./run.sh tmp/test.rb
# Errors
tmp/test.rb:6: [error] failed to resolve overload: String#+

# Classes
class Object
  foo : (String) -> (String | any)
end
```

x が文字列のとき、 `x + 42` を実行すると TypeError が発生するが、上のコードでは else ブロックに入らなくてもそれを検出できている。
引数を文字列にしたことで、推定される型が先程は Integer だったのが String に変わっている。

## サンプルコード
`smoke/` に大量のサンプルコードがあるので、これらで遊んでみると良さそう。

```
$ ./run.sh smoke/demo.rb
# Classes
class Object
  foo : (FalseClass | TrueClass) -> (Integer | String)
  identity : (:sym | Integer | String) -> (:sym | Integer | String)
  fib : (Integer) -> Integer
end

class A
  foo : (Integer | String) -> NilClass
  bar : (Integer | String) -> NilClass
end

class B
  bar : (Integer | String) -> NilClass
end
```

## テスト
`./smoke.sh` を利用することでテストを実行できる。
OK の場合はそれ以外表示されず、NG の場合エラー内容が表示される。

```
$ ./smoke.sh smoke/demo.rb
# OK: smoke/demo.rb

$ ./smoke.sh tmp/test.rb
# NG: tmp/test.rb
expected:
actual:
# Errors
tmp/test.rb:6: [error] failed to resolve overload: String#+
# Classes
class Object
  foo : (String) -> (String | any)
end
```

## 参考
type-profiler のレポジトリ
https://github.com/mame/ruby-type-profiler

開発者である遠藤さんによる解説記事
https://techlife.cookpad.com/entry/2019/04/16/164858

A Static Type Analyzer of Untyped Ruby Code for Ruby 3
https://www.slideshare.net/mametter/a-static-type-analyzer-of-untyped-ruby-code-for-ruby-3
[Docker] "Timed out waiting for the lifecycle-server to start"によりサービスが起動しない

Docker Desktopが2.2系にアップデートされて以降、表題のエラーが通知され起動しなくなった。

軽く調べたところ、[docker/
for-win のIssue#4393](https://github.com/docker/for-win/issues/4393)がヒットし、読み進めていくと、[rezapci commented on 15 Oct 2019](https://github.com/docker/for-win/issues/4393#issuecomment-541780066)にて提示された方法でエラーは出なくなった。

しかし、次いで *Error response from daemon: open \\.\pipe\docker_engine_linux* のエラーが表示される。

これは、表示されたエラーダイアログにて、**Factory Defaults**のボタンを押して再起動することで、最終的には起動が確認できた。
Excelで日々の売り上げを月ごとに集計する方法

## はじめに

この記事では、Excelを使用して日々の売り上げを月ごとに自動集計するシートを作成してみたいと思います。
基本的には、SUMIF関数（作業列が必要）やピボットテーブルで実現できますが、VBAの勉強のため、自作の関数を作成してみます。

## Excelのバージョン

使用しているExcelのバージョンは「Excel 2013」になります。

## 画面イメージ

以下のようなシートを作成しました。
ちなみに、左側の売り上げテーブルには「Amazon」という名前を付けています。

![agg_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262544/4cbe451d-9d4c-dd07-7519-ba9b27179405.png)


## SUMIF関数を使用した場合の関数

まず、売り上げテーブルに「（月）」という作業列を追加して、日付カラムのデータから何月のデータなのかを取得しています。[E5]セルには以下のような式を入力します。

`=MONTH(B5)`

そして、SUMIF関数を使用している[H5]セルには以下のような式を入力します。

`=SUMIF(Amazon[(月)],[@月別],Amazon[金額])`

これで、売り上げテーブルにデータが追加される度に、集計テーブル（左側）が自動的に更新されていきます。
この方法で特に問題はありませんが、１つ気になるのが作業列として「（月）」というカラムを追加しなければいけない、という点です。
それを解決するために以下のような関数を自作してみます。

## 自作の関数を使用した場合

VBAエディタを起動して、以下のような関数を作成します。

```VisualBasic
Option Explicit

Public Function AggMonthly(dummy As Object, MonthVal As Integer) As Integer
    Dim nTotal As Integer
    Dim row As ListRow
    Dim tbl As ListObject
    Dim dtTemp As Date
    
    ' dummyはAmazonテーブルが編集された時に、この関数が呼ばれるための仕掛け
    ' Application.Volatileの使用は避けたい
    
    Set tbl = ActiveSheet.ListObjects("Amazon")
    
    For Each row In tbl.ListRows
        dtTemp = row.Range(1)
        
        ' 対象となる月のデータを集計していく
        If Month(dtTemp) = MonthVal Then
            nTotal = nTotal + row.Range(3)
        End If
        
        ' 時系列に並んでいることが分かっている場合には最適化する
        ' そうでない場合には、以下の３行はコメントアウトする
        If Month(dtTemp) > MonthVal Then
            Exit For
        End If
    Next row
    
    AggMonthly = nTotal
End Function
```

そして、[K5]セルには以下のような式を入力します。

`=AggMonthly(Amazon,[@月別])`

これで、売り上げテーブルにデータが追加される度に、集計テーブル（中央）が自動的に更新されていきます。

## コードの解説

AggMonthly関数の中では、`Set tbl = ActiveSheet.ListObjects("Amazon")`という式で売り上げテーブルを取得していますが、引数でも`dummy As Object`という記述をしています。

これには２つの理由があります。

- 関数の引数にListObject型が指定できなかった。何故かRange型になってしまいます。
- 関数の引数として売り上げテーブルを渡していないと、テーブルが更新された時に、AggMonthly関数がコールされない。

このような理由により、ダミーの引数を渡しています。

これで、売り上げテーブルが追加される度に、集計テーブル（右側）が自動的に更新されていきます。

## ピボットテーブルを使用した場合

ピボットテーブルを使えば、この手の集計は簡単に行えます。
ただし、売り上げテーブルにデータを追加してもリアルタイムでピボットテーブルが更新されません。
意図的に「ピボットテーブルの更新」コマンド（Alt+F5）を実行する必要があるようです。これはちょっと面倒です。
（もしかしてExcel2013だから？）

## 補足

日々の作業では、「今日の日付」、「ギフト券番号」、「金額」の３つを入力していきますが、私の場合にはペースターというツールを使用して半自動的に入力しています。
例えば、ギフト券取得のメールを受信すると、メールの本文に記載されている「金額」と「ギフト券番号」を連続してコピーしてしまいます。
これで、ペースターのクリップボード履歴にセットされます。
あとは、[B12]セルなどをアクティブにしてから、ペースターのキーストロークの発行タグを使用すると、今日の日付、ギフト券番号、金額を一発で入力できます。

ちなみに、ペースターのカスタムメニューには以下のように記述しています。

```text:MenuItem.txt
Amazonギフト券の集計（ペースター）\tAlt+Ctrl+F9|
[Y1]/[T2]/[D2][!K "TAB"][C1][!K "TAB"][C2]
/E
```

まず、今日の日付を貼り付けて、[TAB]キーを押して、履歴の１番を貼り付けて、[TAB]キーを押して、履歴の２番を貼り付ける、、、という処理が行われます。
見て頂けると分かると思いますが、このコマンドにはショートカットキーが割り当ててありますので、メニューを表示する必要もありません。

操作イメージを動画にしてみましたので、参考にしてみて下さい。
[YouTubeの動画（約30秒）](https://youtu.be/LyidvJjTYLE)

## 終わりに

今回のタスクを作成している時に困ったのが以下の点です。

AggMonthly関数の引数として渡している売り上げテーブルを、関数の方でListObject型として直接受け取れないということです。
もし、以下のように記述できたらもっとスマートなのになぁ・・・と思いました。

`Function AggMonthly(tbl As ListObject, MonthVal As Integer) As Integer`

もしかしたら、Excel2016以降では普通にできるのでしょうか？

それでは、この辺で失礼します。
よく見る (気がする) 略語変数名

- ctx: context
- attr: attribute
  - attrs: attributes
- ch: channel
- buf: buffer
- fp: file pointer
  - fh: file handler
  - fd: file descriptor
- idx: index
- seq: sequence
- addr: address
- val: value
- retval: return value
- res / r: response / result
- s: string
- pat: pattern

おまけ

- usr: UNIX System Resources
AtCoder Beginner Contest 155E - Payment を解くための入力例

# AtCoder Beginner Contest 155E - Payment を解くための入力例

完全にネタバレになるので注意. これを見て解けても自慢できない.

- - -

入力例4

```
45
```

出力例4

```
9
```

あなたが価値 10 の紙幣 4 枚と価値 1 の紙幣 5 枚を支払い、使う紙幣の枚数は合計で 9 枚になります。

- - -

入力例5

```
65
```

出力例5

```
9
```

あなたが価値 100 の紙幣 1 枚を支払い、店員が価値 10 の紙幣 3 枚と価値 1 の紙幣 5 枚をお釣りに渡すと、使う紙幣の枚数は合計で 9 枚になります。
Cognos Analytics新機能の「予測」を使ってフォークリフトバッテリー劣化予測を試しました

#はじめに
Cognos Analytics新機能の[「予測」](https://www.ibm.com/support/knowledgecenter/ja/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_ca_dshb.doc/c_ca_forecast_background.html)を使ってフォークリフトバッテリーの劣化予測を試してみました。特に面倒な設定無しに、グラフの続きが簡単に参照できました。ただし、データによっては、期待通りの表示が出来ない場合がありました。合わせて共有させてください。

#操作はスライダーをオンにするだけ
操作は作成したグラフの右上のこの矢印アイコンをクリックし、
![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188447/32e7f96e-1c2e-c079-e815-b2a14877aab9.png)


「予測」スライダーをオンにするだけでした。
![img02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188447/51e38739-07d8-0605-3cfe-411c899c6ab8.png)
予測のデフォルト設定では自動で[データの長さの20%先が参照](https://www.ibm.com/support/knowledgecenter/ja/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_ca_dshb.doc/t_forecasting_visualizations.html)できるそうです。

#フォークリフトバッテリー劣化予測
今回はこの[稼働中のフォークリフトバッテリーモニタリングシステム](https://www.motta.tech/monitoring)でバッテリーの充電後の電圧データを約1か月間測定し用いました。
1年後の電圧を予測し、あくまでも「見なし」ですが、バッテリーの劣化具合としました。
1年後の予測をするため「予測」をオンにした後、「予測期間数」に365を指定し・・・
![img03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188447/e9b0b50d-5cc4-ea3d-afa9-57a6c4a76680.png)

・・・・予測（点線部分）された結果が下図です。いい感じです！
![img04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188447/8a82ee5e-7759-b7cf-d068-d5c2ee334ec6.png)

下図の様に実計測データでは低い場合で51.8vであった電圧が・・・
![img05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188447/9e34b498-38fc-aab3-db32-83d0403bb681.png)


１年後の予測で低い場合50.88vとなり、1年後の値は現在より期待通り低くなっています。
![img06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188447/0ba6facb-6ec6-74ac-fcf1-dbd42af80367.png)



#向き/不向きデータ？
ところが、データによってはこんな感じで・・
![img07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188447/c8dd2a6b-fafd-205c-24d3-b477cfcf302b.png)
上がったり下がったりの折れ線グラフの続きではなく、予測が直線になってしまう場合がありました。
また[「予測に適したデータは、規則的な間隔の時刻ポイントに対応する数値データ値を持つデータです」](https://www.ibm.com/support/knowledgecenter/ja/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_ca_dshb.doc/c_ca_forecasting_data.html)との事で、今回のように1日に1回とかxx分に1回計測、と言ったキッチリ等間隔のデータではないと予測データとして不向きなので注意が必要でした。

#今後
ご覧のように非常に簡単に、手軽に予測が出来るので、いろいろなデータでバンバン使って行きたい機能です。
Eclipse che

Eclipseを使ったJAVAのセミナなどを開催したことがある。

Eclipseを土台とした道具類のセミナを主催し、開発元の方に講演・演習をしていただいたことが数種類ある。

あまりうまくいかなかったのは、UML-Bとか。

今だに Eclipse cheを使いこなせていない。

上記道具類の一つが、PizzaFactoryというクロスコンパイラを含む道具。
https://github.com/PizzaFactory

そのche版がこちら
https://github.com/PizzaFactory/che

 <この項は書きかけです。順次追記します。>

 

# Getting Started

SaaS Cloud: Self-service Eclipse Che developer workspaces hosted at che.openshift.io
https://www.eclipse.org/che/getting-started/cloud/


Che quick-starts
https://www.eclipse.org/che/docs/che-7/che-quick-starts/
>Running Che locally on a personal workstation.
Deploying Che on Kubernetes on Amazon Elastic Compute Cloud .
Installing Che on OpenShift 3 using the Operator.
Installing Che on OpenShift 4 from OperatorHub.
Installing Che on Google Cloud Platform.
Installing Che on Microsoft Azure.
Accessing Che from OpenShift Developer Perspective.

すでに利用しているCloudが一覧にあればそれを利用する。そうでなければ、on a personal workstationを利用するかどうか。

SaaS Cloudをたどると

![che1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/5129f4bb-4802-65b7-98b8-8c84518b40b4.png)

Create a Free accountを選ぶと

![che2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/36302232-a526-d3ec-bb8e-310156bb4c5b.png)

![che3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/b8477eb4-39cf-f6fd-cad9-8f2a3ec9d7f2.png)

Licence条項がむつかしい。

>* I have read and agree to the エンタープライズ契約 .
* I have read and agree to the Red Hat OpenShift Online Services Agreement .
* I have read and agree to the Developer Program Terms & Conditions .

いろいろ触っていると価格に到達。

https://www.openshift.com/products/online/

![che4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/11be6593-455e-050f-78be-e2ee8676da7c.png)

どの道を辿るとよいか迷う。



#支援(support)


ところで、PizzaFactory/cheでは有償の支援(support)を2019年11月から始めたらしい。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">確かにタダで使えるものに金を払うお人好しは滅多に居ないよなぁ。ということで、リターンを設定してみた。$1000 、GitHub Sponsors にしては、強気の法人向け価格w <a href="https://t.co/KVJcVttNha">https://t.co/KVJcVttNha</a> <a href="https://t.co/FW3aqIg7Dq">pic.twitter.com/FW3aqIg7Dq</a></p>&mdash; もなか (@monamour555) <a href="https://twitter.com/monamour555/status/1191189983094140929?ref_src=twsrc%5Etfw">November 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
Rails　コーティング規約について　4

# はじめに
Ruby、Railsの基礎を学習中の方に向けて記載致します。
[Rubyのコーティング規約はコチラをクリック願います。](https://qiita.com/raigakun/items/9db169935baa654af90d)
[Railsのコーティング規約 2 はコチラをクリック願います。]
(https://qiita.com/raigakun/items/265046a9fe78debfbd42)
私自身これからチーム開発を行う上で大事にしたい。知っておきたいことをOutputします。

#Routing
####ActiveRecordのモデル間の関連を表現するには、入れ子型でルートを定義すると分かりやすい。

```qiita.rb
# 実践してみます。
class Post < ActiveRecord::Base
  has_many :comments
end

class Comments < ActiveRecord::Base
  belongs_to :post
end

# routes.rb
resources :posts do
  resources :comments
end
```

#Bundler
- 開発およびテストでしか利用しない gem は、Gemfileにて利用する環境（developmentやtest）を指定すること。

- 有名で利用者の多い gem を利用すること。
    - 無名の gem を利用しなければならない場合は、利用前にソースコードをよく確認する。

#さいごに
当たり前のことですが、チーム開発で欠かせないことかと思いました。
皆様の復習等にご活用頂けますと幸いです。