OmniAICreator/Qiita-1.07M huggingface dataset:
【webpack】npm install --save-dev webpackのエラー（code ENOSELF npm ERR! Refusing to install package with name "webpack" under a package）

webpackのインストールでこの様なエラーが出た。

```
$ npm install --save-dev webpack
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR! 
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/aocattleya/.npm/_logs/2019-11-17T07_06_30_436Z-debug.log
```

# 💬 原因

２、３行目
npm ERR! Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same

webpackのインストールの拒否、
プロジェクトに"webpack"と同じ名前を付けましたかと聞いている。

webpackの練習でフォルダ名に『webpack』と付けていたが、
プロジェクト名とパッケージ名が同じだとダメならしい。

恐らくwebpack以外でも起こる。

# 💫 解決
　
**・フォルダ名のみを変えた場合**
フォルダ名を『webpack』 → 『hello-webpack』
これだけでは同じエラーが発生します。
　

**・package.json を修正する。**
`package.json`の`"name":〇〇〇`が問題でここを変更します。

```package.json
{
  "name": "webpack",
}
```

これを変更します。

```package.json
{
  "name": "hello-webpack",
}
```

一致していなければ、webpackが含まれても問題ないみたい。
これでインストールが進みます。
　
　
　
:octocat: GitHub
https://github.com/aocattleya
🐦 Twitter
https://twitter.com/aocattleya
node.jsからBigQueryを使う


久しぶりに触ったらハマった（ハマる要素はありませんが）のでメモ。

## 前提

* BigQuery側でデータセットおよびテーブルが作成されている。
* 適切なサービスアカウントが作成され、認証用のjsonが（カレントに）ダウンロードされている。

## 準備

```bash
mkdir bq-test
cd bq-test
npm init -f
npm install --save @google-cloud/bigquery
touch index.js
```

## 実装

index.jsを実装します。下記のような感じ。

```js:index.js
const { BigQuery } = require('@google-cloud/bigquery');

const bigquery = new BigQuery({
    projectId: 'your-project-id',
    keyFilename: 'path/to/key.json'
});

const query = "select * from test.members";

//simple
bigquery.query(query)
    .then(data => {
        const rows = data[0];
        rows.forEach(row => {
            console.log(JSON.stringify(row));
        })
    })
    .catch(error => {
        console.log(error);
    });

//with options
const options = {
    query: query,
    useLegacySql: false,
}

bigquery.createQueryJob(options)
    .then(results => {
        const [job] = results;
        return job.getQueryResults();
    })
    .then(results => {
        const [rows] = results;
        rows.forEach(row => {
            console.log(JSON.stringify(row));
        })
    })
    .catch(error => {
        console.log(error);
    })

```

### 実行

あくまで参考ですが（同じ結果が２回出ます）。

```bash
node index.js

{"id":1,"name":"hoge","age":22}
{"id":2,"name":"foo","age":33}
{"id":3,"name":"boo","age":44}
{"id":1,"name":"hoge","age":22}
{"id":2,"name":"foo","age":33}
{"id":3,"name":"boo","age":44}
```

## 参考

* https://cloud.google.com/bigquery/docs/quickstarts/quickstart-client-libraries?hl=ja#bigquery-simple-app-query-nodejs
* https://ryotah.hatenablog.com/entry/2017/04/16/154503
* https://qiita.com/ovrmrw/items/c8e15711688fb9108b60
【AWS EC2】Mysql2::Error: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'

#あなたのターミナルにはこんなエラーが出てますか？
```console
[ec2-user@ip-XXX-XX-XX-XX chat-space2]$ rails db:create
Mysql2::Error: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'
```
このようなエラーがでた場合、mysqlが起動していない可能性があります。
起動し直し、再度DB作成コマンドを打ち込むことで解決できるかと思います。

#入力するコマンド
```console
$ sudo service mysqld start
 #=> Starting mysqld:                                     [  OK  ]
```
OKとなったら再度DB作成しましょう。

```console
$ rails db:create RAILS_ENV=production
```
#終わりに
お互いにエラーにめげずに頑張りましょう！
Linux環境でdocker-composeのインストール後、docker-composeが失敗するときにすること

# はじめに
公式ドキュメントに従って、doker-composeをインストールをしたけどコマンドが通らない！
というときの私が試した対処方法です。

#環境
RHEL7系

#対処方法の結論
恐らくこの記事を読んでる方はインストールまで完了していると思います。
```docker-compose version```を打ってもダメって状況の場合、シンボリックリンクを以下のように設定することで解消されます。



```
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```
※なぜlocalディレクトリを回避することで通るようになるかは、未調査です。

詳細は公式ドキュメントをご覧下さい。
[公式ドキュメント](https://docs.docker.com/compose/install/)
https://docs.docker.com/compose/install/

#docker-compose(ver 1.24.1)のインストール手順
公式ドキュメントにあるインストール手順です。
多くのdocker-composeインストール記事だとシンボリックリンク作成まで書かれていないので、書いておきます。

①docker-composeをダウンロード

```
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```

②実行権を付与

```
sudo chmod +x /usr/local/bin/docker-compose
```


③versionコマンドで正常に入っているか確認
①〜②まで問題なく行えていたのに、以下のようにエラーが出ます。

```
[hoge@hoge bin]$ docker-compose version
bash: docker-compose: command not found...
```

④シンボリックリンクを作成

```
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```

⑤再度、確認する

```
[hoge@hoge bin]$ docker-compose version
docker-compose version 1.24.1, build 4667896b
docker-py version: 3.7.3
CPython version: 3.6.8
OpenSSL version: OpenSSL 1.1.0j  20 Nov 2018
```

以上のようにシンボリックリンクを作成することでdocker-composeがインストールできたことが確認できました。

#引用元
https://docs.docker.com/compose/install/
imgixで遅延ロードを実装してみる

最近 [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) を試したら、ものすごく低い点数が出て悲しかったのですが、その時に画像を遅延ロードさせるといいと出ていたのでやってみました。

自分が関わっているサービスは画像の表示に[imgix](https://www.imgix.com/)を使っているので、まずはimgixが対応しているかの調査から行いました。

対応してそうです。
https://blog.imgix.com/2016/05/02/imgix-lazysizes

やったことは大きく分けて以下の二つになります。

- 遅延ロード用ライブラリの導入
- 遅延ロード用にタグを調整するヘルパーメソッドの作成

ちなみに、今回遅延ロードを導入したサービスはRailsで作られています。

## 遅延ロード用ライブラリの導入

ライブラリ自体はいろいろあるようですが、上の記事で lazysizes が紹介されていたのでそちらを使わせていただきました。
https://github.com/aFarkas/lazysizes

これを `vendor/assets/javascripts/lazysizes.min.js` に置いて、全てのページで呼ばれる共通ヘッダー内で読み込むようにしました。

```ruby:app/views/application/_head.html.slim
= javascript_include_tag 'lazysizes.min.js'
```

## 遅延ロード用にタグを調整するヘルパーメソッドの作成

imgixで遅延ロードさせる時も `lazyload` クラスをあて、 `data-` 属性をつけてあげれば良いそうなので、その通りに実装していきます。

これを

```html
<img
  srcset="https://assets.imgix.net/unsplash/jellyfish.jpg?w=480&h=240&fit=crop&crop=entropy 480w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy 640w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=1024&h=512&fit=crop&crop=entropy 1024w"
  src="https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy"
  sizes="(min-width: 640px) 50vw, 100vw"
>
```

こうする

```html
<img
  data-srcset="https://assets.imgix.net/unsplash/jellyfish.jpg?w=480&h=240&fit=crop&crop=entropy 480w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy 640w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=1024&h=512&fit=crop&crop=entropy 1024w"
  data-src="https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy"
  data-sizes="(min-width: 640px) 50vw, 100vw"
  class="lazyload"
>
```

imgixでは通常 `ix_image_tag` というタグヘルパーを使うので、こいつを拡張させて遅延ロードに対応できるようにしました。オプションで渡して分岐させても良かったのですが、影響範囲を狭めて試したかったので、遅延ロード用に別メソッドを作成しました。

```ruby:config/initializers/imgix.rb
def ix_lazy_image_tag(*args)
  return if args[0].blank?
  args[1] = {} if args[1].blank?
			
  if args[1][:tag_options] && args[1][:tag_options][:class]
    args[1][:tag_options][:class] = [args[1][:tag_options][:class], 'lazyload'].join(' ')
  elsif args[1][:tag_options]
    args[1][:tag_options][:class] = 'lazyload'
  else
    args[1][:tag_options] = { class: 'lazyload' }
  end
			
  output_tag = ix_image_tag(*args)
  output_tag.gsub(/srcset|src|sizes/) { |tag| "data-#{tag}" }
            .html_safe
end
```

あとは遅延ロードさせたい箇所で `= ix_lazy_image_tag 'foo.png'` などとすれば遅延ロード完了です。

簡単！
Toolbarのタイトルやアイコンにテーマの属性のcolorOnSurfaceで色がつかないときの対処法

最近のMaterialComponentではテーマに以下のように設定しておけばPrimaryColorの上の文字が自動でこのattributeになるはずでしたが、若干ハマったのでメモとして残しておきます。

```xml
<item name="colorOnPrimary">@color/white</item>
```

でもToolbarで`setSupportActionBar(binding.toolbar)`していても、ちゃんとテーマが適応されていても、タイトルや色が変わりませんでした。

サンプルを見に行くと以下のようにstyleを設定する必要があるようです。
https://github.com/material-components/material-components-android/blob/d2870fbb3fd170712abfb6d6ff8bccf799360f5b/catalog/java/io/material/catalog/topappbar/res/layout/cat_topappbar_toolbar_fragment.xml#L40

```xml
<com.google.android.material.appbar.MaterialToolbar
  style="@style/Widget.MaterialComponents.Toolbar.Primary"
```

このstyleを見に行くと以下のように設定するように書かれています。

```xml
  </style>
    <style name="Widget.MaterialComponents.Toolbar.Primary">
    <item name="android:elevation" ns2:ignore="NewApi">@dimen/design_appbar_elevation</item>
    <item name="android:background">?attr/colorPrimary</item>
    ****
    <item name="titleTextColor">?attr/colorOnPrimary</item> 
    ****
    <item name="subtitleTextColor">@color/material_on_primary_emphasis_medium</item>
    <!-- Note: this theme overlay will only work if the style is applied directly to a Toolbar. -->
    <item name="android:theme">@style/ThemeOverlay.MaterialComponents.Toolbar.Primary</item>
  </style>
```

Widget.MaterialComponents.Toolbar.Surfaceというstyleもありますが、これは`attr/colorSurface`をバックグラウンドとして使いたいときに使うようです。
Visual Studio Code インストール手順

## 調べ方
1. [visual studio code - Google Search](https://www.google.com/search?hl=en&q=visual+studio+code)


## インストール

1. [Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/) にアクセスし, 画面右上の **Download** ボタンを押下する。
   - [Download Visual Studio Code - Mac, Linux, Windows](https://code.visualstudio.com/Download) 画面に遷移する。
1. **User Installer** の **64 bit** をクリックする。
   - *VSCodeUserSetup-x64-1.40.1.exe* がダウンロードされるまで待機する。
1. ダウンロードしたファイルをダブルクリックする。
   - *Microsoft Visual Studio Code (User) セットアップ* が起動し, *使用許諾契約書の同意* 画面が表示される。
1. **同意する** をチェックし, **次へ** ボタンを押下する。
   - *インストール先の指定* 画面が表示される。
1. そのまま **次へ** ボタンを押下する。
   - *プログラムグループの指定* 画面が表示される。
1. そのまま **次へ** ボタンを押下する。
   - *追加タスクの選択* 画面が表示される。
1. **全てチェックし, 次へ** ボタンを押下する。
   - *インストール準備完了* 画面が表示される。
1. そのまま **インストール** ボタンを押下する。
   - インストールが完了するまで待機する。
   - *Visual Studio Code セットアップウィザードの完了* 画面が表示される。
1. *Visual Studio Code を実行する* のチェックを **外し, 完了** ボタンを押下する。
1. OS を再起動する。


## 日本語化

1. 以下のサイトを参考に日本語化する。
   - [VS Codeで表示言語を変更するには：Visual Studio Code TIPS - ＠IT](https://www.atmarkit.co.jp/ait/articles/1805/18/news032.html)
      - **概要:** EXTENSIONS ビューの検索欄に, `japanese` と入力すると検索できる [Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja) をインストールする。


## C 言語対応

1. EXTENSIONS ビューの検索欄に, `c language` と入力する。
   - [C/C++ - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) が検索される。
1. **Install** ボタンを押下する。
   - インストールが完了するまで待機する。


## チュートリアル

[MinGW インストール手順 - Qiita](https://qiita.com/ryo-sato/items/00c17469978e47d91a09) が完了している前提とする。

1. VSCode のエクスプローラービューより, **フォルダーを開く** ボタンを押下する。
   - *フォルダーを開く* ウィンドウが表示される。
1. **ドキュメント** フォルダー直下に, `clang` という名前でフォルダーを新規に作成する。
1. 作成したフォルダーに移動し, **フォルダーの選択** ボタンを押下する。
   - VSCode に *CLANG* フォルダーが表示される。
1. **CLANG** フォルダー内で右クリックし, **新しいファイル** をクリックする。
   - ファイル名を入力するように求められる: 今回は `hoge.c` とする。
1. 以下の通りにプログラムを作成する。

    ```c
    #include <stdio.h>

    int main(void){
        printf("Hello, world.\n");
        return 0;
    }
    ```

1. メニューバーより, **表示 - ターミナル** をクリックする。
   - 画面下部にターミナルが表示される。
1. `gcc hoge.c` と入力する。
   - エラーが表示されたらプログラムを見直す。
1. `.\a.exe` と入力する。
   - **Hello, world.** と表示されることを確認する。


どっとはらい。
Linux 機を MacBook の代わりにする

## 冒頭
MacBookPro を高すぎて購入できない(する気がない)僕が, [以前の記事](https://qiita.com/toyoday/items/eb462245658a331629a5)で導入した Linux 機を使い慣れた MacBook 風にカスタマイズした際に行ったことを覚えている限り, 記載します。

## スペック
![ah77/j](https://www.fmworld.net/fmv/pcpm1210/ah/images/ah77j_front_red.jpg)
https://www.fmworld.net/fmv/pcpm1210/ah/spec/

OS | Linux Mint
--- | ---
メモリ | 16GB
CPU | Core™ i7-3632QM

## MacBuntu
まずこれを導入します。各アイコン, テーマを簡単に Mac風にできてしまいます。

```console
$ sudo add-apt-repository ppa:noobslab/macbuntu
$ sudo apt-get update
$ sudo apt-get install macbuntu-os-icons-lts-v7
$ sudo apt-get install macbuntu-os-ithemes-lts-v7
```

インストールが終わりましたら, テーマより MacOS のテーマを設定してください。
次に必要があればウィンドウの設定から, 最大化などのボタンを左側に配置します。

## Dock
次に Mac の使いやすさを担っている Dock を追加します。

```console
$ sudo add-apt-repository ppa:ricotz/docky
$ sudo apt-get install plank
S sudo add-apt-repository ppa:noobslab/macbuntu
$ sudo apt-get update
$ sudo apt-get install macbuntu-os-plank-theme-lts-v7
```
こちらは再起動時に常に表示されていてほしいので,「startup applications」に追加します。
また, dock にアプリを追加したい場合はそのアプリを起動状態で dock 上で右クリックで追加します。
また, dock も ウィンドウも下部にあるのは使いにくいので, ウィンドウは設定で上に持っていきましょう。
dock のアイコンの配置や大きさ等, 簡易的に変更できるので使いやすくカスタマイズしましょう。

## Lancher
「Slingscold」を追加します。

```console
$ sudo add-apt-repository ppa:noobslab/macbuntu
$ sudo apt-get update
$ sudo apt-get install slingscold
```

ただ、こちらのアプリ, アプリの並び替えをする方法がわからず個人的に若干使いづらいです。。。


参考
https://yagichon.com/linux-mint-macbuntu/
お名前.com から Route53 へ移管して, CloudFront を介して S3 の静的ページを公開

## はじめに
今回は様々な方の記事に助けられながらタイトルの通りのことを行った記録のようなもので, あまり細かく説明していくことは長くなってしまうため行いません。

## S3 のバケット作成
S3 の公開用のバケットを作成します。公開するのあたって気をつけたこととして, アクセス権限を読み取り許可にしました。

## CloudFront で Distribution を作成
CloudFlont にて Create Distribution から Origin Domain Name に該当の S3 のバケットを選択して作成します。

## CloudFront での CNAME 作成用に証明書を発行
AWS Certificate　Manager（https://aws.amazon.com/jp/certificate-manager/） から証明書を発行します。こちらを発行しないと現在 AWS では, CloudFront にて CNAME を設定することができないようです。
ドメイン名を入力して発行を続けると, DNS認証かメール認証になると思います。
DNS 認証にして, Route53 にて ホストゾーンを作成し CNAME で追加して認証するのが一番ラクかと思われます。
https://dev.classmethod.jp/cloud/aws/certificate-manager-dns-validation-support/

## CloudFront にて Custom SSL を設定 ＆ CNAME を設定
CloudFront で先程設定した SSL を設定し, その次に CNAME を設定できるようになるため, 設定します。

## Route53 と CloudFrount を接続
Route53 のホストゾーンに type A IP-v4 アドレス からエイリアス先を指定して, 先程の CloudFront のディストリビューションを指定します。

## Route53 と お名前.com を接続
Route53 と お名前.com のどちらも設定が必要になってきます。詳しくは, こちらの記事を参考にするとわかりやすいかと思います。(https://qiita.com/ysKey2/items/0545e13ec05def42ad55)

## 確認
まず, Route53 と お名前.com を接続できているかを確認するために

```
nslookup -type=ns ドメイン名
```

にて, 設定した4つの aws の value が帰ってくることを確認してください。
次に Route53 と CloudFrount を接続できているか確認するために

```
nslookup ドメイン名
```

で見つかるか確認してください。
最後に, 実際にドメイン名にアクセスしてみて S3 のファイルが参照できるか確認してみてください。
お疲れさまでした。
Stripe  で 定期購入 = Subscription を停止・キャンセルしたい ( #ruby gem を利用する例 )

```rb
Stripe::Subscription.retrieve(stripe_subscription_id)
deleting_stripe_subscription.delete
```

[stripe/stripe-ruby: Ruby library for the Stripe API.](https://github.com/stripe/stripe-ruby)

[日本正式リリースしたStripeを使ってサブスクリプション型決済システムを実装する - Qiita](https://qiita.com/tady/items/7617e62b2a5402ebd0fb#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E5%89%8A%E9%99%A4%E6%99%82%E3%81%ABstripesubscription%E3%82%82%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B)

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2729








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Uncontrolledなコンポーネントと戦う in ReactJS

ときどきハマるので書いておきます。

# inputタグやtextareaタグをReactで使うときはフルコントロールなコンポーネントにする
フォーム系のinputタグやtextareaタグに代表されるコンポーネントはUncontrolledなコンポーネントと呼ばれ、
入力内容がHTMLの入力欄自体で保持されています。
これの何が問題になるのかというと

* コンポーネントがUnmountされないと入力欄がクリアされない
* React RouterやStateの切り替えなどで同じ入力欄を持つコンポーネントを連続で表示する場合、Ummountされないため入力欄に前の入力状態が残ってしまう。

参考：[You Probably Don't Need Derived State](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)

意訳：getDerivedStateFromPropsは使う必要ないよ

# 回避策
２つあります。

## onChangeで常に値を監視し、親コンポーネント側でstateに保存します。value属性にpropsで常に更新したstateを渡します。
例えば、Emailの入力欄のフルコントロールコンポーネントを次のように作成します。

```jsx
function EmailInput(props) {
  return <input onChange={props.onChange} value={props.email} />;
}
```

例：https://codesandbox.io/s/6v1znlxyxn

## keyの属性にユニークキーをつけることで別物のinputタグとして判別される
この場合、valueを常に更新する必要はありません。ただし、ユニークなキーでなければなりません。

```jsx
<input defaultValue={props.defaultEmail} key={this.props.user.id} />
```
NumPyのrandomモジュールでの乱数の作り方

NumPyはnp.randomモジュールで乱数を生成することができる。

・0以上1未満の一様乱数を生成するnp.random.rand()
　()の中に指定した整数の個数分の乱数を生成します。


・x以上y未満の整数をz個生成するnp.random.randint(x, y, z)
　x以上y未満の整数を生成することに注意しましょう。
　さらに、zに(2,3)のように引数を指定すると、2×3の行列を生成することができます。


・ガウス分布に従う乱数を生成するnp.random.normal()
VBAと共に去りぬ：第1話 Windows OSがある限りVBAがある その１

#K北さんへ

※この文章はちょっと蛇足が多い。
なるべくすぐ次の記事へ飛んでほしい。
すぐ次の記事も蛇足と気づくだろう。

---
VBAをやるなんてくそだな～。
Railsやって、日本のスタートアップで重宝されたいな。
どーせならCCNAからDockerもやってScala学んでガチのFull Stackになりたいな。
PythonとかJuilaやってTensorflow、MXNet、Keras使い倒してAIエンジニアぶりたいな。
Matlabやって良いとこ出を醸し出したいな。
などなど、きっとVBAと聞いた途端に拒否反応が出て隣の芝が青く見えたかもしれませんが、僕らのようなレガシーな職場（SES業界では現場と呼ぶが）で、スタバで見かけるMacとは無塩バターのように無縁の、低スペックのWindows PCが闊歩し、新しいツールが全く導入されない、上司がそもそもSlackすら使ったことないようなIT企業のわりに間接業務の嵐の職場で働いている私たちに、唯一無駄な作業から身を守り、本当に価値のある仕事に割くための時間を与えてくれる神様のような存在は、フロントエンド言語でも、Railsのようなスーパーフレームワークでも、ましてはAI搭載したRPAでもなく、VBAだと思っています。（ごめん、RPAは期待できるけど）
そもそもWindows OS上で実行されるものは、ほぼすべてVBと名の付くもので自動化できます。
（VBAやVBscriptなど）
だからさ、諦めずにちょっとの期間だけお付き合いください。

Kさんへ　VBAのススメ　SES業界で働いてる人は特におすすめ
https://www.youtube.com/watch?v=_3Yh85wlvQs
UISearchControllerを使ったVC上でモーダルを出す際に気をつけること

#問題
UISearchControllerを使ったVC上でUIAlertControllerを表示させようとしたところ表示されず、そのままそのVCをdismissしようとしたらクラッシュしました。

#調査
同じようなことが [stack overflow](https://stackoverflow.com/questions/46917918/ios-uisearchcontroller-crash-application-tried-to-present-modal-view-controller)にありました。

```
So I've run into this as well (at least in crashlogs from the field) in iOS 11.4, 11.4.1. 
I was able to reproduce it and fix it. 
In my case I have two VCs. 
VC1 shows the searchcontroller and shows modally VC2. 
The user taps a button in VC2 and it goes away (by dismiss()) and then VC1 goes away (by dismiss()). 
In the case where the searchController is active on VC1 this assertion failure occurs after VC1 calls dismiss().
I fixed it by searchController.isActive = false just before dismiss().
```

どうやらUISearchControllerを保持しているVCで破棄する前に以下を実行する必要があるようです。

```Swift
searchController.isActive = false
```

ただ、これを追加してもdismissの際にクラッシュしました。
[Appleのドキュメント](https://developer.apple.com/documentation/uikit/uisearchcontroller/1618659-isactive)を確認したところ、そもそも本来この値はfalseになっています。
UISeachControllerを保持するVCを開いた際にSearchBarに自動フォーカスさせるためにbecomeFirstResponder()を呼んでいたのですが、この際に自動的にisActiveがtrueになるようです。

そこで、モーダル追加前にisActiveをfalseにしたところ、アラートが表示され、dismissの際にクラッシュもしなくなりました。

#結論
UISearchControllerを保持するVC上でモーダルを表示する際は事前にisActiveをfalseにする。

ただ、モーダルを追加しない限りはisActiveがtrueの状態でdismissしてもクラッシュしなかったので、結局ワークアラウンドな解決法になりました。。。
Power BI DesktopのファイルからPower Queryでデータを取れる②

[前回の記事](https://qiita.com/tanuki_phoenix/items/b551b2feeb2f95219661)を踏まえ，すぐ使えるよう再構成したもの．

###処理の流れ

1. Power BI Desktopでデータを抜きたいファイルを開いておく(1個だけ)
2. PowerShell：接続状況をテキストファイルを出力．
3. Power Query：当該テキストファイルからlocalhostを得る．
4. Power Query：localhostでデータベース名を得る．
5. Power Query：データベース名を使って，pbixとの接続クエリを作る．


###PowerShellコード
当方Win7環境を使うことが多いので，netstatなのです．

```powershell:Export_netstat
#プロセスIDを取る．
[string]$msmdsrv_id =(Get-Process msmdsrv).Id
#接続状況の文字列を得て，絞り込む．
$vStr =netstat -no
#行末がIDなので，それで絞り込む．
$vStr | Select-String (" " + $msmdsrv_id + "$") |Out-File "C:\Users\Public\Documents\localhost.txt"


```


出力されるテキストファイルはこんな感じ．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/39fcde7e-81e7-5fe3-f072-7005e524d2cb.png)

###Power Queryコード
DAXコードをパラメータとしてます．テキストファイルのパスはPowershellから固定場所に出力する想定なので，うめこんでます．

```pq:fx_FromPBIX
(DAX as text)=>
let
    FromTXT = Table.FromColumns({
                Lines.FromBinary( File.Contents("C:\Users\Public\Documents\localhost.txt"), null, null, 932 )
              }),
    //空白行のごみがあるので，空の削除をしてからの選択となる．
    FirstLine = Table.SelectRows(FromTXT, each [Column1] <> null and [Column1] <> ""){0}[Column1],

    //環境によっては囲んでる文字がちょっと違うかもしれない．その辺は現場対応．
    StrLocalhost = "localhost:" &
                   Text.Trim(
                        Text.BetweenDelimiters(FirstLine,"[::1]:","[::1]")," "
                   ),

    DBName = AnalysisServices.Databases(StrLocalhost, [TypedMeasureColumns=true, Implementation="2.0"])[Name]{0},
    Connect_pbix = AnalysisServices.Database(StrLocalhost, DBName, 
                                    [Implementation="2.0", 
                                     Query= DAX
           ]),
    列名の整理 = Table.TransformColumnNames( Connect_pbix,each Text.BetweenDelimiters(_,"[","]") )
in
    列名の整理
```
↓呼び出した様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/037192e8-29f9-5dd4-07a6-d0b23341d5b0.png)

###更新履歴
2020/2/2：「処理の流れ」の箇所を番号付きリストに変更。
ConcaでPDF配信時に、キャッシュを参照して更新されない罠

### 概要

電子書籍などをConcaで配信する人も多いかと思うが、ちょっと、自分の環境で配信ファイル更新しても、淡々とキャッシュからダウンロードされてしまい更新されないという沼にハマったので書いておく。

### 発生条件

- 同一ファイル名で配信ファイルの更新を行う
- iOS/Safariで、Concaの配信フォームからPDF表示 => SafariのPDF向け機能で「保存」を実行

この時、実はSafariのPDF表示上では、更新されたPDFが反映されている。

しかし、そこからダウンロードを行うと、以前のファイルが保存されてしまう（同名上書き、別名保存いづれもダメ）。

### 回避方法

iOS側のなんらかのキャッシュ系のバグか仕様だと思うが、現状確実な回避方法としては、配信時のファイル名を変える、、というのが、一番楽そう。バージョン番号とかリビジョンを埋めこんどけというやつ。

頻繁に更新する場合ファイル数が増えて微妙、、という気もするので、原因がわかればもうちょいスマートな方法にしたい。
VST3ホストを作ろう（８） 〜モジュールとプラグインの構造について〜

[目次](https://qiita.com/hotwatermorning/items/5ab2a687a4cbc73a0f56)

## はじめに

　今回は VST3 プラグインのモジュールとプラグインの構造について解説します。

## モジュールの構造について

　下の図は、VST3 プラグインのモジュールの大まかな構造を表したものです。

![Module Structure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944/a84d2d8e-9603-ab59-c1e1-7e8ebc768543.png)

　VST3 規格では、モジュールの中に複数のプラグイン（例えば Synth, EQ, Reverb, Comp, など）を定義できます。[^case_of_multiple_plugins_in_module] 言い換えるとモジュールはプラグインのコンテナであるといえます。

[^case_of_multiple_plugins_in_module]: モジュールの中に複数のプラグインを含める仕組みは、有名な所では Waves 社の WaveShell プラグインファイルで利用されています。

　モジュールに含まれる各プラグインは、通常は、次のふたつのコンポーネントで構成されます。[^about_component] 逆に言うと、 VST3 規格ではこのコンポーネントのペアをひとつのプラグインとみなします。

[^about_component]: コンポーネントとは VST-MA の仕組みにしたがって定義された具象クラスです。

* Processor コンポーネント
    * バスの管理、プラグイン状態のSave／Load、信号処理などプラグインとしての基本的な役割を担う。
    * また、自身がどの Edit Controller コンポーネントとペアになるかの情報を持つ。（図中の点線矢印で示したもの）
* Edit Controller コンポーネント
    * パラメータ情報の管理、プログラムリスト管理、エディターウィンドウの表示など、編集操作に関する役割を担う。

　複数の Processor コンポーネントが同じ Edit Controller コンポーネントを参照することもあります。上記の図では、プラグイン B と プラグイン C が同じ Edit Controller B を参照しています。この場合、プラグイン B と プラグイン C は、パラメータリストやプラグインの UI が同一でありながら、サポートしているバスの種類や信号処理が異なるプラグインになります。

　また、非推奨ではありますが Processor コンポーネントの機能と Edit Controller コンポーネントの機能をひとつのコンポーネントにまとめて実装することも可能です。上記の図では プラグイン D がそのように実装されています。
　
　モジュールにはさらにプラグインファクトリというクラスがひとつだけ含まれます。ホストアプリケーションはプラグインファクトリを利用して、モジュールに含まれるプラグインを列挙したり、指定したプラグインをロードしたりできます。

## コンポーネントを分離する設計について

　先に書いた通り、 VST3 ではひとつのプラグインを Processor コンポーネントと Edit Controller コンポーネントで構成し、逆にこれらのペアをひとつのプラグインとみなします。このようにプラグインをふたつのコンポーネントに分離している設計は、VST3 プラグインの大きな特徴です。

　ひとつのプラグインを実装するのにわざわざふたつのコンポーネントを別々に実装するのは、面倒が増えたり、余計な手間がかかったりする不便さがあります。しかし一方で、リアルタイムに処理しなければいけない信号処理部分とそうする必要がない編集操作を処理する部分が設計レベルで分離されるため、それらの処理を安全に実装しやすくなる利点があります。

　また VST3 規格では、コンポーネントを分離する仕組みによって、プラグインの信号処理と編集操作の処理を異なるマシンで実行することも想定しています。モジュールに含まれるコンポーネントはひとつひとつを個別に構築できるため、手元の PC ではプラグインの Edit Controller コンポーネントのみを構築し、それとは別の高速な PC で Processor コンポーネントを構築することで、手元の PC に信号処理の負荷をかけずにプラグインを利用できます。[^rpc_for_remote_dsp] [^support_remote_dsp]

[^rpc_for_remote_dsp]: ただし、これを実現するには RPC (Remote Procedure Call) が必要になります。 VST3 SDK には RPC の仕組みは含まれていないため、そこはホストアプリケーション側が自分で実装する必要があります。

[^support_remote_dsp]: VST3 プラグインのふたつのコンポーネントを別々の PC 上に構築して利用できるホストアプリケーションが実際にあるかどうかは不明です。 Waves 社の SoundGrid という技術はまさにこのような仕組みを提供していますが、その実装に VST3 のこの仕組みが利用されているかどうかは分かりません。

## おわりに

　今回は、VST3 プラグインのモジュールとプラグインの構造ついて解説しました。[次回](https://qiita.com/hotwatermorning/items/efe9be3934c6863b2a3b)は、 VST3 SDK のベースに利用されている VST-MA について解説します。
Git操作まとめ 〜ブランチ操作(git branch)

この記事では、Ubuntu18.04LTSにインストールしたGit(version 2.17.1)を使用しています。

## ブランチとは

Gitは履歴を管理する際にリリースの状態を保ちつつ、履歴の流れを分岐して記録し同時進行で機能を追加したりバグ修正をしたりするのに便利な機能が「ブランチ」です。

分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ中で複数の変更を同時に進めていくことができます。

実際にチームで作業する場合にGitが使われることが多いと思います。その場合はGit flowやGithub flowなどチームごとにルールがあると思うのですが、今回は基本的な操作のみ記述します。

---

## ブランチの確認
まずは、現在のブランチを確認します。

```shell
git branch
```
```shell:実行結果
* master
```

このリポジトリには、masterブランチが存在し、現在masterブランチで作業していることになります。

---

## ブランチの作成

ブランチを活用する際にはあらかじめルールを決めておくことが重要です。
基本的には統合ブランチとしてmasterブランチをリリース用などに利用し、トピックブランチとして他にブランチを切ってそこで機能追加やバグ修正などの作業をします。

masterブランチとは別にdevブランチを作ってみます。

```shell
git branch dev
```

```shell
git branch

  dev
* master
```

devブランチが作成されました。
*(アスタリスク)で、自分がいるブランチはmasterブランチであることが確認できます。

---

## 作業ブランチへの移動

ブランチができたら、作業するためにそのブランチに移動してみます。

```shell
git checkout dev
```

```shell
git branch

* dev
  master
```

*(アスタリスク)がdevブランチに変わっているのが確認できました。

---

## マージ

トピックブランチを切って作業を進めたあとは、統合ブランチに統合します。

devブランチで、いくつかコミットしておきました。

```shell
git log --oneline

c7bb542 (HEAD -> dev) dev.02
38746b8 dev.01
dc65374 (master) sixth commit
08c1848 fifth commit
07dc0ac fourth commit
11c93c0 (tag: ver.0.0.2) third commit
cd4ce0b (tag: ver.0.0.1) second commit
76d180f initial commit
```

devブランチのコミットがmasterブランチのコミットを追い越しています。

devブランチの内容をmasterブランチにマージしてみます。手順は次のとおりです。

１．masterブランチ(統合ブランチ)に移動する。

```shell
git checkout master
```

２．トピックブランチを統合ブランチにマージする。

```shell:
git merge dev
```

```shell
git log --oneline

c7bb542 (HEAD -> master, dev) dev.02
38746b8 dev.01
dc65374 sixth commit
08c1848 fifth commit
07dc0ac fourth commit
11c93c0 (tag: ver.0.0.2) third commit
cd4ce0b (tag: ver.0.0.1) second commit
76d180f initial commit
```

devブランチの内容が、masterブランチに統合されました。

---

## ブランチの削除

ブランチが統合されたことが確認できたら、トピックブランチを削除します。
※ルールによっては必ずしもマージ後に削除するものではないので、注意します。

まずブランチを確認します。

```shell
git branch

  dev
* master
```

まだdevブランチが残っているので、削除してみます。

```shell
git branch -d dev
```

```shell
git branch

* master
```

devブランチを削除することができました。

---

## ターミナルにブランチを表示させる

ブランチを使い始めると、現在のブランチの場所をコマンドで確認しながら作業を進めることになります。
私が知っている限りではUbuntuでの方法ですが、「違うブランチで作業をしていた」というようなミスを防ぐためにも、ターミナルに現在のブランチ名を表示させる方法があります。

Ubuntuには、HOMEディレクトリ直下に.bashrcという隠しファイルがあります。
このファイルを開き、その最下行に以下のコードを貼り付けるだけでターミナルのディレクトリ名の隣にGitのブランチを表示させることができます。

```shell
# ターミナルにgitブランチを表示させる
function parse_git_branch {
    git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ [\1]/'
}
function promps {
    # 色は気分で変えたいかもしれないので変す宣言しておく
    local  BLUE="\[\e[1;34m\]"
    local  RED="\[\e[1;31m\]"
    local  GREEN="\[\e[1;32m\]"
    local  WHITE="\[\e[00m\]"
    local  GRAY="\[\e[1;37m\]"

    case $TERM in
        xterm*) TITLEBAR='\[\e]0;\W\007\]';;
        *)      TITLEBAR="";;
    esac
    local BASE="\u@\h"
    PS1="${TITLEBAR}${GREEN}${BASE}${WHITE}:${BLUE}\W${GREEN}\$(parse_git_branch)${BLUE}\$${WHITE} "
}
promps
```

---

### 本記事目次ページ
[Git操作まとめ](https://qiita.com/tsweblabo/items/6aec9d022c08954f5024)

### 参考サイト
- [Qiita:git branch関連コマンド](https://qiita.com/starlabo/items/3a0b65e06394aa94dd05)
- [Qiita:プロンプトをカスタマイズしてgitブランチを表示する](https://qiita.com/caad1229/items/6d71d84933c8a87af0c4)
MinGW インストール手順

## 調べ方
1. [mingw - Google Search](https://www.google.com/search?hl=en&q=mingw)


## インストール

1. [MinGW | Minimalist GNU for Windows](http://www.mingw.org/) にアクセスし, 画面左の **Downloads** をクリックする。
   - [Download File List - MinGW - Minimalist GNU for Windows - OSDN](https://osdn.net/projects/mingw/releases/) に遷移する。
1. **MinGW Installation Manager (mingw-get) - MinGW-Get Version 0.6.3 (Beta) - mingw-get-setup.exe** とクリックする。
   - [Downloading File /68260/mingw-get-setup.exe - MinGW - Minimalist GNU for Windows - OSDN](https://osdn.net/projects/mingw/downloads/68260/mingw-get-setup.exe/) に遷移し, *mingw-get-setup.exe* のダウンロードが始まる。
1. ダウンロードした **mingw-get-setup.exe** をダブルクリックする。
   - *MinGW Installation Manager Setup Tool* が起動する。
1. **Install** ボタンを押下する。
   - *Step 1: Specify Installation Preferences* 画面に遷移する。
1. そのまま **Continue** ボタンを押下する。
   - *Step 2: Download and Set Up MinGW Installation Manager* 画面に遷移する。
   - 必要なファイルがダウンロードされるまで待機する。
1. そのまま **Continue** ボタンを押下する。
   - *MinGW Installation Manager Setup Tool* が終了し, *MinGW Installation Manager* が起動する。
1. **mingw32-base-bin** を右クリックし, **Mark for Installation** をクリックする。
   - *mingw32-base-bin* にチェックが入る。
1. メニューバーの **Installation** より **Apply Changes** をクリックする。
   - *Schedule of Pending Actions* ウィンドウが表示される。
1. **Apply** ボタンを押下する。
   - *All changes were applied successfully; you may now clone this dialogue.* と表示されるまで待機する。
1. **Close** ボタンを押下する。
   - *Schedule of Pending Actions* ウィンドウが閉じ, *MinGW Installation Manager* 画面に戻る。
1. メニューバーの **Installation** より **Quit** をクリックする。
   - *MinGW Installation Manager* が終了する。


## 環境変数設定

1. **スタート - 設定** を開く。
   - *Windows の設定* ウィンドウが表示される。
1. 検索窓に `環境変数` と入力する。
   - *環境変数を編集* と *システム環境変数の編集* が候補として表示される。
1. **環境変数を編集** をクリックする。
   - *環境変数* ウィンドウが表示される。
1. *ユーザー環境変数* の **新規** ボタンを押下する。
   - *新しいユーザー変数* ウィンドウが表示される。
1. 以下の通りに入力し, **OK** ボタンを押下する。
   - 変数名: `MINGW_HOME`
   - 変数値: `C:\MinGW`
1. *環境変数* ウィンドウに戻るので, *ユーザー環境変数* の **Path** をクリックし, **編集** ボタンを押下する。
   - *環境変数名の編集* ウィンドウが表示される。
1. **新規** ボタンを押下し, `%MINGW_HOME%\bin` と入力, **OK** ボタンを押下する。
   - *環境変数* ウィンドウに戻る。
1. そのまま **OK** ボタンを押下する。
   - *Windows の設定* ウィンドウは閉じても OK.
1. コマンドプロンプトを開き, `gcc` や `gdb` コマンドが利用できることを確認する。
   - `> gcc --version`

    ```shell
    gcc (MinGW.org GCC-8.2.0-5) 8.2.0
    Copyright (C) 2018 Free Software Foundation, Inc.
    This is free software; see the source for copying conditions.  There is NO
    warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
    ```

   - `> gdb --version`

    ```shell
    GNU gdb (GDB) 7.6.1
    Copyright (C) 2013 Free Software Foundation, Inc.
    License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
    This is free software: you are free to change and redistribute it.
    There is NO WARRANTY, to the extent permitted by law.  Type "show copying"
    and "show warranty" for details.
    This GDB was configured as "mingw32".
    For bug reporting instructions, please see:
    <http://www.gnu.org/software/gdb/bugs/>.
    ```

どっとはらい。
Intel MPI で WPS

Linux環境で、WRF という、オープンソースの風のシミュレーションソフトを使っています

WRF には、前処理プログラムの WPS と、本計算プログラムの WRF があります

https://github.com/wrf-model/WPS/releases
https://github.com/wrf-model/WRF/releases

ver 4.0.2 までは普通にビルド出来たのですが
ver 4.0.3 から WPS でビルドエラーが出たので、原因と対策をここにメモします

【バージョン】
WPS ver 4.1
WPS ver 4.0.3

【現象】
Intel MPI のインストール環境で
Linux x86_64, Intel compiler    (dmpar)
を選んでコンパイルすると、ビルドに失敗する

【原因】
./configur で作成される、configure.wps の中の
DM_FC = mpif90
DM_CC = mpicc

【対策】
以下のように修正
DM_FC = mpif90 f90=ifort
DM_CC = mpicc cc=icc

【備考】
Intel MPI は、コンパイラを指定しなかった場合
mpif90 や mpicc として呼ぶと、コンパイラとして
gfortran や gcc を使用します

https://software.intel.com/en-us/mpi-developer-reference-linux-compilation-commands
#Ruby キーワード引数はハッシュのままでメソッドに与えることが出来る - example : pass method keyword args with hash variable

柔軟に受け取るようにできているっぽい

```rb
class A
  def initialize(arg1, arg2, a:, b:, c:)
    @arg1 = arg1
    @arg2 = arg2
    @keyword_arg_a = a
    @keyword_arg_b = b
    @keyword_arg_c = c
  end

  def echo
    p @arg1
    p @arg2
    p @keyword_arg_a
    p @keyword_arg_b
    p @keyword_arg_c
  end
end



A.new(:some, :how, a: 1, b: 2, c: 3).echo

options = { a: 1, b: 2, c: 3 }

A.new(:some, :how, **options).echo

A.new(:some, :how, options).echo

# :some
# :how
# 1
# 2
# 3

```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2728








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Github

インデックス　　バージョンを記録するためにファイルを一時的に登録する場所である。インデックスに登録されているファイル群の変更が記録される。つまり、同じバージョンとして記録したい編集についてはインデックスを追加する。
git status　　gitの現状を確認する
git add ファイル名
ファイルをインデックスに追加する

git commit
インデックスに追加されている変更修正をコミットするためのコマンド、-mのオプションは、コミットメッセージにどんな変更をしたのかメモを残せるようになっている。

changes to be commited:
この記載の後にインデックスに追加されたファイルが並んでいる
これはインデックスに存在するコミッット待ちの修正という意味

git commit -m 'intitial'

intialというタイトルをつけてコミットする
この後に   git status
を行うと   nothing to  commit
コミットの対象となってる変更修正はないと言うメッセージになる

git  log　　＃コミットのログを確認する
コミットの履歴を表示するための操作。
様々なオプションが存在し、より詳細な情報を表示させることも可能

git add  ＃インデックスに追加

GitHubDesktop
githubが提供しているデスクトップ用のアプリケーション。コンソールで実施する作業をグラフィカルに表現してくれるのでgithubを利用した開発をより容易にしてくれる。これらのコンソールはGUIが呼ばれる。一方CUIと呼ばれるものも存在する。これらは文字だけで操作する。
GitHub Desktop
で右上の(Current Repository)で  『add』   『add exsiting Repository』っを選択
chooseの欄でファイルを探してadd Repositoryをクリック
GidHub Desktopでコミットする際にリモートリポリトジが作られていなかったらその場で作ってくれる。

ブランチとは、リポリトジで管理しているプロジェクトの流れを記録していく場所。リポジトリは必ずブランチを持っている。リポジトリのバージョンの管理はブランチが行われているため、Gitでリポジトリを作成した時点で、masterブランチと言う履歴で開発をする状態となる。そこからトピックブランチを作成し機能別に並行作業していく。
ブランチのイメージは一つの主流から枝分かれしていくイメージ
NumPyの集合関数

Numpyの集合関数

・配列要素から重複を取り除きソートした結果を返す
　np.unique()

・配列xとyのうち少なくとも一方に存在する要素を取り出しソートする
　np.union1d(x, y)（和集合）

・配列xとyのうち共通する要素を取り出しソートする
　np.intersect1d(x, y)（積集合）

・配列xと配列yに共通する要素を配列xから取り除きソートする
　np.setdiff1d(x, y)（差集合） など
Docker入門 ローカル環境とクラウド環境を作ってみよう(1/4)

最近、社内でDockerについて本当に触りの部分について説明しました。

聞いてくれた1/3の方は、実務・自主で触れた経験あり。
他の方は初耳みたいな感じだったのですが・・・
反応があまりにも悪かったので反省の意味を込めて **再度まとめ直し** 。

**正しい使い方でなくても、とりあえずローカルの開発環境をDockerで作ってみよう！！って思えたら嬉しいです。**

内容を理解してもらえるように、4回に分割してお伝えできればと思っています。


# 前提

- Docker初心者が対象です
- VM（VirtualBox）で環境を構築した経験があった方が理解しやすいかも



# Docker ってなんなの？

クジラの上に、貨物のコンテナが載っているアイコン
![Docker Icon](https://pbs.twimg.com/profile_images/1145722943688699904/n4u37v9t_200x200.png)

Wikipediaより引用
> Docker（ドッカー[2]）は、コンテナと呼ばれるOSレベルの仮想化（英語版）環境を提供するオープンソースソフトウェアである[3]。VMware製品などの完全仮想化を行うハイパーバイザ型製品と比べて、ディスク使用量は少なく、仮想環境 (インスタンス) 作成や起動は速く、性能劣化がほとんどないという利点を持つ。
(https://ja.wikipedia.org/wiki/Docker)

『Docker』で検索すると、よく画像で『物理マシンの上にホストOS・・・』っていう画像が多くヒットします。
いきなり見せられても **敷居が高いように感じてしまう** 気がしました *（実際、社内でやった時に載せて説明したけど、ポカーンって感じだった気がする）*

なので・・・環境を素早く作って・・・破壊して・・・また素早く作って・・・
**環境の再生と破壊が楽にできる！！** くらいに思っておいてもらえたらいいです。


# 便利なんですか？

百聞は一見に如かずということがあるので・・・例えば、こんな環境を用意してみましょう。
`PHP7.2（※最新版）が動作するWebサーバを構築`

「Chef」や「Ansible」を用いたり、インストール手順のコマンドをコピペしたりとしながら、まっさらなLinuxOSに構築するイメージが湧いたかとおもいます。

これをDockerで作ろうと思ったら・・・・
以下の作業をしてブラウザで『 http://localhost 』にアクセスするだけです。

```text:フォルダ・ファイル構成
demo
┗ index.php
```

```text:index.php
<?php phpinfo() ?>
```

```text:実行コマンド
$ cd demo
$ docker run --rm -p80:80 -v $PWD:/var/www/html php:7.2-apache
```

これは極端な作り方ですが、要件の環境はできています。

現実だとWebサーバだけ構築だけとはいかず
データベースとか、他のパッケージとかインストール必要があると思います。


# みて さわって ふれて みよう！！

自分が理解を深めていったやり方をそのまま紹介しようと思います。
Webサービスを作ろうと思った時に用意する環境を対象にして説明します。

### 構築する環境

- OS: CentOS(※中級からOSはDockerイメージに依存しているため違います)
- Web: Apache + PHP
- DB: MySQL

## 【初級】VMみたいに使ってみた

第２回に記載

- Dockerを構成するコンポーネント
- Dockerfileについて
- Dockerコマンド
    - アクセスするポート指定
    - ローカルPCのマウント
    - 起動と停止
    - 起動中のコンテナへログイン

## 【中級】本番環境を意識した役割で細分化してみた

第３回に記載

- Docker-composeについて
- Docker-composeコマンド
    - 起動と停止
    - 起動中のコンテナへログイン


## 【上級】コンテナオーケストレーションを意識して作ってみた

第４回に記載

- 1コンテナで１サービス起動するため
- ローカルk8sでの構築
- Google Cloud PlatformのGKEでの構築
    - GCRへプッシュ
    - kubectlコマンド
        - 設定の変更・反映

# 最後

第１回は、あまり内容のない記事になってしまいスミマセン。
続きで第２回とかも読んでいただけると幸いです。
MAMPにLaravelを5分でインストールする

##MAMPにLaravelを高速構築する

qiita投稿３記事目です。

まだLaravelを触ったことのないかた、この機会に5分で導入しましょう。

###環境

OS : macOS Mojave 10.14.5
MAMP : 5.3
Laravel : 5.8.x

`MAMPがmacに入っている前提で進めます`

##ゴール

<b>Laravelのあのトップ画面（welcome.blade.php）を表示する</b>
![スクリーンショット 2019-11-17 14.46.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/61d99e7e-ea6b-d409-3660-baf690c03918.png)

##1.composerを導入

```
$ curl -sS https://getcomposer.org/installer | php
```
まずcurlコマンドでcomposerのインストーラーにアクセスして、ダウンロードします。

```
$ sudo mv composer.phar /usr/local/bin/composer
```
mvはファイルを所定の場所に移動させるLinuxコマンド。move。
今回は/usr/local/bin/に。
この場所に置かないと動かない。

```
$ composer -V
```
-vでバーション確認すると、

![スクリーンショット 2019-11-17 15.00.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/e0fea531-9fdb-97f3-8055-aa4f952bf47e.png)

<b>*イカした画面が出てくるぜ...!!*</b>

##2.LaravelプロジェクトをMAMPで展開する

さあいよいよここから。

laravelでプロジェクトを作成する方法は２通りあります。

1.composer経由でプロジェクトを作成
2.laravelインストーラでプロジェクトを作成

`今回は前者の、composer経由でプロジェクトを作成します`

まずはcdコマンドでMAMPのhtdocsに移動します。（MAMPではhtdocs以下が公開ディレクトリになります。）

```
$ cd /Applications/MAMP/htdocs/
```
composerコマンドを使ってLaravelプロジェクトを作成します。

```
$ composer create-project laravel/laravel --prefer-dist lara-shogo
```

`最後のlara-shogoはお好きなプロジェクト名にしてください`

##3.MAMPでルートパスを変更

MAMPでまず`preferences`を開きます。
![スクリーンショット 2019-11-17 15.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/2986a626-dd25-a4d2-e859-ff6fea27d8e1.png)

その後、Web Serverのパスを変えます。

![スクリーンショット 2019-11-17 15.31.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/d48144a8-3c6c-a09f-67dc-f7d004fe0556.png)
このデフォルトだと開きません。

Laravelの公開ディレクトリはpublic以下になるので、そこをルートパスにします。

![スクリーンショット 2019-11-17 15.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/416e179d-8ad8-9a45-812d-b776609d22b4.png)
今回はプロジェクト名がlara-shogoなので、その中のpublicにしました。

`フォルダをドラッグアンドドロップで変更できたはず。多分...`

ではokして、開きましょう。

![スクリーンショット 2019-11-17 14.46.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/38a09067-5ebd-b3c7-6c9c-206ff4531d98.png)

<b>*〜長き物語は今、始まれり。〜*</b>
【Git】Gitインストール手順（vagrant&virtualbox&centos7)

#環境条件

- host pc：MAC OS
- 開発環境：vagrant & virtual box
- 開発環境OS:centos7

#環境構築にあたって

- vagrantのインストールはこちら
- virtual boxのインストールはこちら
- ローカル開発環境へのcentos7のインストールはこちら


##Gitのインストール

Gitの導入に必要なツールを先にインストールする。

```
$ sudo yum -y install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
```

wgetをインストールする

```
$ sudo yum -y install wget 
```

Gitを導入していきます。まずはソースコードを取得し、解凍する。

```
$ cd /usr/local/src/
$ sudo wget https://www.kernel.org/pub/software/scm/git/git-2.13.3.tar.gz
$ sudo tar xzvf git-2.13.3.tar.gz
```

makeコマンドでインストールする。

```
$ cd git-2.13.3
$ sudo make prefix=/usr/local all
$ sudo make prefix=/usr/local install
$ source /etc/profile
```

Gitのバージョンを確認する

```
$ git --version
git version 2.13.3
```

makeコマンドが動かない時

```
yum install curl-devel
yum install gcc
yum install openssl-devel
yum install expat-devel
yum install cpan
yum install gettext
```


以上です。

使い方はこちら
UE4で平面メッシュをコンピュートシェーダで変形させサインカーブの波面を作る

#概要
UE4で頂点バッファをコンピュートシェーダで編集するサンプルプロジェクトを作りました。
エンジン改造はせず、プロジェクトプラグインとして実装しています。
Githubにあげています。
何かいけてないことがあれば何でもご指摘ください。

レイトレーシングについては現状では配慮できてません。

#Githubレポジトリ
https://github.com/monguri/UE4ShaderPluginSandbox

#動機
メッシュの変形はパフォーマンスを考える必要がある部分ではGPU側で行いたいですが、UE4のマテリアルだとWorld Position Offset以外に方法がなく、適用範囲が限定されます。
エンジン改造せずにCSで行う最初の検証としてHello World的なものを作りました。
せっかくなので公開しました。

#スクリーンショット
SinWaveGridDemoマップのプレー中
![SinWaveDeformGridMesh.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16365/58523dcb-21f7-e003-7d0d-5d0ff67d74a8.gif)


#実装の補足説明
GlobalShaderプラグインについてはじめての方は、前回僕の書いたものをまず見てもらう方が導入がスムーズだと思います。
[前回書いた、CSでレンダーターゲットに描画する記事](https://qiita.com/monguri/items/157db540edcad1e87b17)
そちらの方がソースコードが短く、読み解きやすいからです。

ベースとなっている知識については、下に参考にした資料をあげるのでそちらを見ていただいた方がいいと思います。
本記事は、下にあげる参考資料を読んで理解できる方を読者として想定しています。
また、本記事では、ソースコードを部分的にとりあげて解説するようなことはせず、ソースコードを読んでもらう前提で、参考になるような補足説明を書きます。

全体的な実装方針として、なるべく読みやすくなるように、また、CSでの頂点デフォームをするためのテンプレートにできるように、最小限の実装にすることを心がけました。

SinWaveGridMeshComponentというコンポーネントを実装しています。
SinWaveGridDemoマップに配置したSinWaveGridActorは、コンポーネントにパラメータを設定しているだけです。
親クラスのUDeformableMeshComponent::InitGridMeshSetting()でグリッドジオメトリの頂点配列とインデックス配列を作っています。
描画はFPrimitiveSceneProxyを継承したFSinWaveGridMeshSceneProxyに任せます。

メッシュ描画パイプラインに投入する各種バッファの実装はFStaticMeshVertexBuffersから必要な部分をコピペしてFDeformableMeshVertexBufferというクラスを作っています。
メッシュ描画パイプラインの各描画パスを独自に作るようなこともしておらず、素直にUE4のメッシュ描画パイプラインに乗せています。
バーテックスファクトリはFLocalVertexFactoryをそのまま使っています。

レンダースレッド側の処理はSinWaveGridMeshDeformer.cppにまとまっています。
コンピュートシェーダはSinWaveDeformGridMesh.usfとGridMeshTangent.usfの2つあります。
前者は頂点のZ座標をサインカーブになるように設定します。
後者は、その結果としての頂点位置から法線と接線（TangentZとTangentX）を計算する処理です。
TangentZとTangentXを計算する処理は、完全に今回の等方性のあるグリッドジオメトリを前提としており、任意のジオメトリで通用する処理ではありません。

結果は全く面白くもなんともないですが、これをベースにいろんなシェーダを書けば、例えば布表現や水面表現など、もっと面白い表現ができると思います。

#参考資料
##ながさんのブログ記事
https://nagakagachi.hatenablog.com/entry/2019/09/22/222604
最も参考にさせていただいた記事です。ながさん、ありがとうございます。

今回の実装方針についてはながさんのものとほぼ同じです。

##UE4のドキュメント
https://docs.unrealengine.com/ja/Programming/Rendering/ShaderInPlugin/Overview/index.html
https://docs.unrealengine.com/ja/Programming/Rendering/MeshDrawingPipeline/index.html
Epicさん、いつもありがとうございます。

##参考にしたUE4のソースコード
HairStrandsプラグイン
https://github.com/EpicGames/UnrealEngine/tree/4.24/Engine/Plugins/Experimental/HairStrands

4.24まではUE4ではCSで頂点バッファをいじるようなものはなかったと思いますが、4.24でHairStrandsプラグインが追加されました。
シミュレーションからレンダリングまでかなり広範囲の実装をしており、参考になります。

#課題
そもそも検証としては、やってることが簡易すぎて、実装上の問題を見落としているかもしれません。
最小の実装とするためにFLocalVertexFactoryを流用し、FStaticMeshBuffersを真似しましたが、業務レベルでちゃんとやるならFRWBufferを使って専用のバッファを実装し、バーテックスファクトリも専用のものを実装すると思います。
また、ちゃんと使うなら、用途に応じて、パスをはさむタイミング、非同期コンピュートの検討、パフォーマンス測定、バッファフォーマットの検討などいろいろ考えねばなりませんね。

それはまた別の機会に書かせていただくかもしれません。
MySQLに日本語を入れると、データが???で表示される

#問題について


##前提

#####meido テーブル　こんなかんじのカラム。
<img width="596" alt="スクリーンショット 2019-11-17 15.22.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514276/3a3b5d15-99bc-b94a-4d3f-51233d28674c.png">


#####下記のコマンドで、meidoテーブルにデータを入れる。
```INSERT INTO meido (id, name, name_kana, prefecture, address, age) VALUES (1, '青山 和久', 'あおやま かずひさ', '東京都', '東京都千代田区丸の内１丁目', 25);
```
#####ここまではエラーは起きないが、
```SELECT * FROM meido; 
```
でデータを参照すると
<img width="596" alt="スクリーンショット 2019-11-17 15.29.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514276/4b02cb67-6212-5035-42be-3051085c0d98.png">

という風に日本語の部分が?????と表示される。

#解決方法

テーブルを作る際、VARCHAR を NVARCHAR に置き換える。


###エラーの出る書き方
```
CREATE TABLE meido(id INT,name VARCHAR(100),name_kana VARCHAR(200),prefecture VARCHAR(50),address TEXT,age INT);
```
###エラーを防ぐ書き方はこれ!!!!!!!!!
#####上述の通り、VARCHAR を NVARCHAR に置き換えます。
```
CREATE TABLE meido(id INT,name NVARCHAR(100),name_kana NVARCHAR(200),prefecture NVARCHAR(50),address TEXT,age INT);
```

以上。

mySQLにログインした状態で
```status
```
と打つと、
```
Server characterset が　latin1
```
になっていたので、これが原因かも。


参考記事　https://qiita.com/EigenPort_M/items/46bd1bf386eb56eba97e
　　　　　https://qiita.com/toshihirock/items/fdbc8e7b889e0d17a18d



##追記

言語設定を日本語 utf8mb4 に設定したら　VARCHAR指定でもきちんと表示されるようになった。
よく使うGitコマンド集

Gitはコマンドの種類が多すぎるので、私がよく使うものだけをメモとして残しておきます。

#### 状況に関わらず使うもの
```terminal:terminal
・現在のディレクトリをgit管理下に置く
$ git init

・全ての変更、新規ファイルをステージング
$ git add -A 

・特定のファイルの、特定の部分の変更だけをステージング
$ git add -p /app/hoge.txt

・コミット
$ git commit

・直前のコミットを取り消す(ファイルはそのままでコミット前の状態に戻す)
$ git reset --soft HEAD\^

・コミットメッセージを修正
$ git commit --amend

・コミット前の変更を破棄
$ git reset --hard
$ git clean -df .

・コミット履歴を確認
$ git reflog

・過去のバージョンに戻る
$ git reset --hard <commitのID>(git reflogで確認)

・現在の状態を確認
$ git status

・git管理から外す
$ git rm -r --cached hoge.html
```

#### Githubで管理する時に使うもの
```terminal:terminal
・Github上のリポジトリと紐付け
$ git remote add origin https://github.com/<ユーザー名>/<プロジェクト名>.git

・Push（初回、masterブランチ）
$ git push -u origin master

・Push（2回目以降、masterブランチ）
$ git push
```

#### ブランチを分けて開発する時に使うもの
```terminal:terminal
・他のブランチに移動
$ git checkout <ブランチ名>

・新規ブランチを作成して移動
$ git checkout -b <新規ブランチ名>

・今いるブランチのブランチ名を変更
$ git branch -m <新しいブランチ名>

・他のブランチの変更を取り込む
$ git merge <取り込みたいブランチ名>

・Push（masterブランチ以外）
$ git push origin HEAD

・ブランチ一覧を表示
$ git branch

・ブランチを削除
$ git branch -d <削除したいブランチ名>

・ブランチ名にfeatureという文字列を含むブランチを削除
$ git branch | grep feature | xargs git branch -d

・変更を退避
$ git stash -u

・退避リストを表示
$ git stash list

・退避した作業を適用（stash@{0}の部分は$ git stash listで確認）
$ git stash apply stash@{0}

・退避した作業を全て消す
$ git stash clear

・マージコミットをリバート
$ git revert -m1 26af64b29e58babde67ac46bhogehoge
revert用に新たにブランチ作る→revertする→PR出す
GitHubのUI上でもrevertできる
https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/incorporating-changes-from-a-pull-request/reverting-a-pull-request

・ブランチ切り替えの履歴を表示
$ git --no-pager reflog | awk '$3 == "checkout:" && /moving from/ {print $8}' | uniq | head

・最新のmasterブランチを、作業中のブランチに反映する
$ git fetch origin
$ git merge origin/master

・リモートのmasterブランチをベースに、ローカルに作業ブランチを作る
$ git checkout -b hoge_new_branch origin/master

・リモートで最新のmasterブランチ取り込んだあと、それをローカルに反映せずにcommitを重ねてしまった時の対応
$ git reset --soft HEAD\^
$ git stash -u
$ git pull origin feature/hogehoge
$ git stash apply stash@{0}
$ git commit -m "コミットメッセージ"
$ git push origin HEAD
```

#### Githubのリモートリポジトリを手元に持ってくる系
```terminal:terminal
・リポジトリのファイル一式をダウンロード
$ git clone https://github.com/<ユーザー名>/<プロジェクト名>.git

・手元のファイルをリモートリポジトリの内容に合わせる
（git remote addで紐付けができている状態で）
$ git pull 
```

## 参考
[git add -u と git add -A と git add . の違い](https://note.nkmk.me/git-add-u-a-period/)
シェルスクリプトのちょっと実用的な数行の関数（数値と日時）

シェルスクリプトでたまに必要になる、ちょっとした処理を関数にしました。

たった数行の処理をわざわざ関数にする目的の一つは、スクリプトの可読性を向上するためです。例えば`date +'%F %T'`と`now`では後者の方が意図を理解しやすくなります。

もう一つの目的は、たまにしか使わないコマンドのオプションや文法などのナレッジを関数のコードにまとめておくことで、自分が忘れた時に見直しやすくするためです。

# 数値
## 整数（10進数）の判定

引数を 10進数の整数と判定できたら真（終了ステータス 0）を返す関数です。

```Shell:
# $1  整数かを判定する文字列
function is_integer() {
  [[ ${1} == "" ]] && return 1
  printf "%d" ${1} >/dev/null 2>&1
}
```

printf は`"%d"`で整数に変換できない文字が与えられたら偽を返すのですが、空文字列の場合に真を返してしまいます。しかしこの関数では引数が空文字列の場合に偽を返したいので、先に空文字列の判定をしています。

### テスト

```Shell:
for value in '-100' '0' '9999999999' '1.1' '-0.2' '3e5' 'A' 'zz' ''
do
  if is_integer "${value}"; then
    echo "'${value}': OK."
  else
    echo "'${value}' is NOT integer."
  fi
done
```

結果は以下のようになりました。

* 正／負の整数と 0 で真を返す
* 正／負の小数で偽を返す
* `e`を使った指数表現で偽を返す
* 16進数として評価可能な英文字で偽を返す
* 文字列／空文字列で偽を返す

```Shell:
'-100': OK.
'0': OK.
'9999999999': OK.
'1.1' is NOT integer.
'-0.2' is NOT integer.
'3e5' is NOT integer.
'A' is NOT integer.
'zz' is NOT integer.
'' is NOT integer.
```
### 補足

空文字列の判定を以下のように書けば bash 以外のシェルでも使えるようになりますが、一般的なプログラム言語と同様の比較演算子`==`による可読性を優先しました。

```Shell:
  [ -z ${1} ] && return 1
```

## 実数の判定

引数を実数と判定できたら真を返す関数です。上の`"%d"`を`"%f"`に変えただけです。

```Shell:
# $1  実数かを判定する文字列
function is_numeric() {
  [[ ${1} == "" ]] && return 1
  printf "%f" ${1} >/dev/null 2>&1
}
```

### テスト

```Shell:
for value in '-100' '0' '9999999999' '1.1' '-0.2' '3e5' 'A' 'zz' ''
do
  if is_numeric "${value}"; then
    echo "'${value}': OK."
  else
    echo "'${value}' is NOT numeric."
  fi
done
```

結果は以下のようになりました。

* 正／負の整数と 0 で真を返す
* 正／負の小数で真を返す
* `e`を使った指数表現で真を返す
* 16進数として評価可能な英文字で偽を返す
* 文字列／空文字列で偽を返す

```Shell:
'-100': OK.
'0': OK.
'9999999999': OK.
'1.1': OK.
'-0.2': OK.
'3e5': OK.
'A' is NOT numeric.
'zz' is NOT numeric.
'' is NOT numeric.
```

# 日時

どれも一般的なプログラム言語の経験者が関数の名前を見ただけで、機能と引数を何となく連想できるようにしたつもりです。

## 現在日時

```Shell:
# $1  書式指定文字列（省略可）
function now() {
  date +"${1:-%F %T}"
}
```

## 今日の日付

```Shell:
# $1  書式指定文字列（省略可）
function today() {
  date +"${1:-%F}"
}
```

## 日時の書式設定

```Shell:
# $1  日時を表す文字列
# $2  書式指定文字列（省略可）
function format_datetime() {
  date -d "${1}" +"${2:-%F %T}"
}
```

## 日時の加算／減算

```Shell:
# $1  日時を表す文字列
# $2  正／負の整数（未来／過去）
# $3  $2の単位 {year|month|day|hour|minute|second}
# $4  書式指定文字列（省略可）
function add_datetime() {
  if (( ${2} < 0 )); then
    local date_opt="$((${2} * -1)) ${3}s ago"
  else
    local date_opt="${2} ${3}s"
  fi

  date -d "${1} ${date_opt}" +"${4:-%F %T}"
}
```

### テスト

```Shell:
add_datetime '1999-12-31 23:59:59' 1 second
add_datetime '1999-12-31 23:59:59' -1 second
add_datetime '1999-12-31 23:59:59' 180 day '%Y/%m/%d %H:%M:%S'
add_datetime '1999-12-31 23:59:59' -180 day '%Y/%m/%d %H:%M:%S'
add_datetime '1999-12-31 23:59:59' 10 hour '%Y/%m/%d %H:%M:%S'
add_datetime '1999-12-31 23:59:59' -10 hour '%Y/%m/%d %H:%M:%S'
add_datetime '1999-12-31 23:59:59' 20 year '%Y年%m月%d日 %H時%M分%S秒'
add_datetime '1999-12-31 23:59:59' -20 year '%Y年%m月%d日 %H時%M分%S秒'
```

以下のように意図した結果になりました。

```Shell:
2000-01-01 00:00:00
1999-12-31 23:59:58
2000/06/28 23:59:59
1999/07/04 23:59:59
2000/01/01 09:59:59
1999/12/31 13:59:59
2019年12月31日 23時59分59秒
1979年12月31日 23時59分59秒
```
Rubyで文字列配列を数値（整数）配列に変換する方法

# for文を使う方法

```rb
strings = ["1", "2", "3", "4", "5"]

integers = []
for n in strings
  integers.push(n.to_i)
end
# integers => [1, 2, 3, 4, 5]
```

# mapメソッドを使う方法


```rb
strings = ["1", "2", "3", "4", "5"]

integers = strings.map{|n| n.to_i}
# integers => [1, 2, 3, 4, 5]
```
または、

```rb
strings = ["1", "2", "3", "4", "5"]

integers = strings.map(&:to_i)
# integers => [1, 2, 3, 4, 5]
```
でもOKです。配列の各値が`&`となり、`:メソッド名`が適用されます。

なお、`map`を`map！`（破壊的メソッド）にすると、レシーバー(strings)自体が整数の配列に上書きされます。

```rb
strings = ["1", "2", "3", "4", "5"]

strings.map!(&:to_i)
# strings => [1, 2, 3, 4, 5]
```