OmniAICreator/Qiita-1.07M huggingface dataset:
Lottie-Playerを用いてLottieの機能をweb上で実装する方法

こんにちは！さくです！

一般的にLottieの機能をweb上で実装する際【Lottie.min.js】をダウンロードし外部ファイルとして読み込む方法がセオリーとされています。

が、本記事では代替手段としてLottie-Playerを読み込みLottieの機能を実装する方法を紹介したいと思います。

Lottie-Playerを使うメリットとして
・超短文で済ませられる
・検証を行いやすい

等のメリットが得られます。

##Lottie-Playerファイルの読み込み

https://unpkg.com/browse/@lottiefiles/lottie-player@0.3.0-rc2/

上記サイトの【dist/lottie-player.js】をインポートします。

>
```HTML:Lottie-Player-import-sample.html
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.3.0-rc2/dist/lottie-player.js"></script>
```
> リンクはソースコードの通り

##LottieFilesによる.jsonファイルの読み込み

https://lottiefiles.com/

こちらのサイトにアクセスします。

LottieFilesは有志が作成したアニメーションがLottieで使えるjsonファイルで公開されているサイトです。
>
![スクリーンショット 2019-11-20 4.07.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519143/400f2d4c-1d36-06b6-3085-224b4364b023.png)
>画像右上の「View Recent Animations」から一覧表示にできます

実装するアニメーションを見つけたら選択します。

>![Lottie-animeshon-compass.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519143/5bfeef3c-e38f-fd8e-4875-541823c63217.gif)
>今回はこちらのアニメーションを実装します


右下の「Lottie Animation URL」からURLを所得

![スクリーンショット 2019-11-20 4.09.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519143/e0ca4406-2c9b-8c65-d61a-6bd0d4b38553.png)

再びHTMLのソースコードに戻り、先程所得したURLをタグ<Lottie-player>のソースに入力します。

>
```HTML:Lottie-Player-sample
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_H0vxmL.json"></lottie-player>
```
> lottie-playerタグのソースに先程所得したURLを入力

##命令

自動再生やループといった命令はlottie-playerタグの中で行います

```HTML:Lottie-Player-order
<lottie-player src="リンク"
               autoplay
               loop
               speed = "1"
></lottie-player>
```

よく使われるものは上記の通りだと思います。
autoplayやloopは入力するだけで反映されます。

##完成

   

```HTML:Lottie-Player-comp
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.3.0-rc2/dist/lottie-player.js"></script>
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_H0vxmL.json" autoplay loop speed = "1"></lottie-player>
```
>出力結果
![compass-com.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519143/7f233f82-e0a6-d7ad-5496-713ea7a6e987.gif)


僅か二行でLottieによるアニメーションを実装することが出来ました。
トライアンドエラーが捗ります。

##最後に
Lottieをweb上に組み込む場合Lottie.min.jsファイルを別途ダウンロードしインポートする方法がセオリーと言われていましたが別の手段としてこういうのもあるよ、という紹介でした！

僅か２行で実装できるので是非みなさん試してみてね！

twitter→([@saku_nectaris](https://twitter.com/saku_nectaris))
フォローよろしくな！
失敗から学ぶECS入門


### 背景

ECSをよくわからずリリースしたら、エラー出しまくったので、
きちんとECSの仕組みを学んだときのメモ。

#### 障害イメージ

Slackをエラー文言でいっぱいにしました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/bf5de5ab-e887-ae83-52ba-10ae62d70716.png)

### そもそもECSって何ができるの？

・コンテナのイメージをそのままサーバーへ反映させるサービス
　今回は、ECRというAWS上にDockerのイメージをプッシュできるリポジトリを使う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/ea498ac6-e533-adcd-ea11-f4221e9db121.png)


### 事前に用意するもの

・アプリケーションを動かすためのDockerFile

### ECSが起動するまでの手順

#### 手順１　ECRにDockerのリポジトリ作成

![screencapture-ap-northeast-1-console-aws-amazon-ecr-repositories-ecs-sprng-boot-edit-2019-11-20-03_27_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/b2348d52-7613-1069-dc2c-52fa7b6dea57.png)

#### 手順２　ECRにDokcerのイメージをプッシュする

※　プッシュコマンドの表示の手順を実行する

![screencapture-ap-northeast-1-console-aws-amazon-ecr-repositories-2019-11-20-03_24_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/16e8dd7f-a91e-8bb0-4e4e-b2cb8f581fda.png)

![screencapture-ap-northeast-1-console-aws-amazon-ecr-repositories-springbootdocker-2019-11-19-23_47_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/147f3664-b8d4-554e-167c-66d1638a4632.png)

#### 手順３　ECSのタスク定義を作成する

・起動タイプは、FRAGATE（サーバー設定不可・高い）とEC2（サーバー）を定義可能

![screencapture-console-aws-amazon-ecs-home-2019-11-19-22_27_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/22ee254f-267c-a8b2-99f8-fd1f11e1c5cc.png)

・メモリやCPU、タスクは適当に設定

![screencapture-console-aws-amazon-ecs-home-2019-11
-19-22_29_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/878fe060-7837-0dbe-b7e9-4dd81f7bc3c5.png)

・コンテナの追加より、イメージにECRのリポジトリURLを入力する
　画面下のコンテナのポート番号も必要に応じて入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/d14a122a-e895-0ec7-9383-267b204405c7.png)

#### 手順４　クラスタの作成

![スクリーンショット 2019-11-20 20.37.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/a5534170-4296-7749-8051-d8ce461156a8.png)

#### 手順５　クラスタからタスクの作成

タスクタブから新しいタスクの実行を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/09e5a94b-e015-4cf2-d9d0-10a4d8530987.png)

タスクの作成より、ネットワークの設定を行う。

ワンポイント：セキュリティグループよりポート番号を開放可能

![screencapture-ap-northeast-1-console-aws-amazon-ecs-home-2019-11-20-20_41_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/12efb0cc-72dd-88a0-db8a-28ebd68d5585.png)

###  完成！

立ち上がったECSのタスクのパブリックIPアドレスにアクセスして、
コンテナのサービスが起動していることを確認！！
Rails Devise＋carrierwaveでのストロングパラメーター メモ

こんにちは[@yukifreeworld12](https://twitter.com/yukifreeworld12)です。

自分用メモ
ストロングパラメーターのkeysが間違っていて画像が保存されず書き方を調べてうまくいったのでメモ。


###Deviseを使っている場合の画像用のストロングパラメーター。

モデル作成＋アップローダー作成後にストロングパラメーターを追加
　　　　　　　　　　　　　　　 ↓ 
keysはregistration.htmlなどのフォームを見ればわかるのでそれを全部追加
　　　　　　　　　　　　　　　 ↓
アップローダーの紐付け

```app/models/user.rb
mount_uploader :avatar, AvatarUploader
```

今回の場合↓ 

```registration_controller.rb
protected
 
  def configure_account_signup_params
    devise_parameter_sanitizer.permit(:sign_up, keys: [:username, :image, :email, :password, :password_confirmation])
  end

  def configure_account_update_params
    devise_parameter_sanitizer.permit(:account_update, keys: [:username, :image, :image_cache, :remove_image, :email, :password, :password_confirmation, :current_password])
  end
  # The path used after sign up for inactive accounts.
  # def after_inactive_sign_up_path_for(resource)
  #   super(resource)
  # end
end
```


[参考サイト](https://remonote.jp/rails-devise-upload-image)

##最後に
今日も見てくれてホンマありがとな!!
記事がええなと思ったらフォローといいねホンマよろしくな!!
(ジョーブログ風に)
Jupyter Labをリモートからアクセスできるようにする

# はじめに
研究室のiMacやLinuxサーバーの方がそりゃあスペックが良いので，普段使用しているJupyterLabをリモートからでも使用できるようにするときの設定メモです．

こちらの[jupyter labをリモートから使う](https://qiita.com/RayDoe/items/e1ec21c63a15adb1a061)を参考にさせていただきました．というかほとんどこのままです．

# 環境
- python3.6
- Ubuntu18.04 （macOS 10.14.6でも試しました）
- jupyter-notebook 6.0.2
- jupyter lab 1.1.4
- ipython 7.9.0

# 手順
### 1.jupyterconfig.pyの作成

```sh
$ jupyter lab --generate-config
Writing default config to: /home/okuda/.jupyter/jupyter_notebook_config.py
```


### 2. ipythonでパスワードのハッシュ値を作成
```
$ ipython
Python 3.6.9 |Anaconda, Inc.| (default, Jul 30 2019, 19:07:31) 
Type 'copyright', 'credits' or 'license' for more information
IPython 7.9.0 -- An enhanced Interactive Python. Type '?' for help.

In [1]: from IPython.lib import passwd                                                                                                                      

In [2]: passwd()                                                                                                                                            
Enter password: 
Verify password: 
Out[2]: 'sha1:xxxxxxxxx'
```

### 3. config.pyを設定
```sh
$ nano ~/.jupyter/jupyter_notebook_config.py
```

で，必要なところを編集．

```~/.jupyter/jupyter_notebook_config.py
c = get_config()
c.IPKernelApp.pylab = 'inline'
c.NotebookApp.open_browser = False
c.NotebookApp.ip = '0.0.0.0'
c.NotebookApp.port = 9999
c.NotebookApp.allow_remote_access = True
c.NotebookApp.password = 'sha1:xxxx' 
```

### 4. sshでポートフォワーディングで接続
```sh
$ ssh -p ポート番号 [user]@[ip] -NL 9999:localhost:9999
```

Jupyter Labを起動して，

`http://localhost:9999/`
にアクセスすればOKです．

```~/.ssh/config
Host xxx
	HostName xxx
	User xxx
	Port xxx
        IdentityFile ~/.ssh/id_rsa_xxx
	LocalForward 9999 localhost:9999
```
みたいなのかくと，便利！

お疲れ様です．
HomebrewとMysqlの環境構築　

###Homwbrewを用意する
```
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  
```
必要に応じて

```
brew update
```

###権限の変更
```
sudo chown -R `whoami`:admin /usr/local/bin
```

###rubyインストール

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

###rbenvをターミナルから使えるように
```
 echo 'eval "$(rbenv init -)"' >> ~/.zshrc
```

###zshrcの変更を反映
```
source ~/.zshrc
```
###readlineをインストール
```
brew install readline

brew link readline --force
```
###rubyインストール
```
RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"

rbenv install
```

####mysqlをインストール
```
@以下はお好み？
brew install mysql@5.6

brew  reinstall https://raw.githubusercontent.com/Homebrew/homebrew-core/f171f1c74/Formula/mysql@5.6.rb
```

###自動起動設定
```
mkdir ~/Library/LaunchAgents 

ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents

launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist 
```
###ターミナルで使えるように
```
echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.zshrc

source ~/.zshrc
```
Mayaでシーン内の特定のグループだけ削除するMEL

blendShapeGrpの中にeye_geo_grpという名前を含むグループがあったら削除するだけ

```
string $children[] = `listRelatives -ad -f "blendShapeGrp"`;
for($child in $children)
{
	if(`objExists $child`)
	{
		if(`gmatch $child "*eye_geo_grp"`)
		{
			delete $child;
		}
	}
}
```

自分用メモ
【Unity(C#)】UniRxを使ったラジオボタンの実装方法

##ラジオボタンとは
>ラジオボタンとは、項目の選択に用いられる部品のひとつで、
複数項目から1つだけ取捨選択させる部品のことである。

>ラジオボタンは中が空白になった小さな円形をしており、
チェックを入れると円形の中が黒い丸で埋まる。選択肢のうちの他のラジオボタンを選択すると、
先にチェックしたラジオボタンのチェックは外れる。

引用元：[ラジオボタンとは何？ Weblio辞書](https://www.weblio.jp/content/%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3)

こんな感じのボタンです。

![ToggleUp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/d3e6cfcc-2664-d1f7-f5bd-959285683345.gif)


##On Value Changedに登録した処理が重複してしまう
全てのToggleの`On Value Changed`に対して`チェックマークが付いた時 (isOn)`を想定した処理を登録すると、
参考記事のように処理が重複してしまいます。

なぜこのような現象が起きるかというと、下記参考リンク内にもありますが、
**On Value Changedはトグルの状態が変わった時のコールバック**だからです。
つまり、`チェックマークが外れた時 (isOn)`にもコールバックされてしまいます。

【参考リンク】：[Unity uGUIのToggle “On Value Cahnged (Boolean)” で切り替え時の処理が重複する](https://akatana.games/blog/tips/unity/941/)


今回はUniRxを使って別のトグルを選択した際に、必ず１フレームのみ実行される実装を行います。
下記Gif画像のような状態です。

![Toggle.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/54b75f70-2967-f0ca-b03c-43b26616341c.gif)

##コード

```C#
using System.Linq;
using UnityEngine;
using UnityEngine.UI;
using UniRx;
/// <summary>
/// 選択中のトグルを取得
/// </summary>
public class RadioButtonObserver : MonoBehaviour
{
    public ToggleGroup toggleGroup;
    public static ReadOnlyReactiveProperty<string> selectedToggleName { get; private set; }

    void Start()
    {
        selectedToggleName = toggleGroup.ObserveEveryValueChanged(selectToggle => toggleGroup.ActiveToggles().FirstOrDefault())
            .Select(tgl => tgl.GetComponent<Toggle>().name)
            .ToReadOnlyReactiveProperty();

        //selectedLabelが変化した瞬間を検知する
        selectedToggleName.Subscribe(x => Debug.Log("Changed:" + x));
    }
}
```

##ObserveEveryValueChanged

下記参考リンクにもあるように、
指定したインスタンスオブジェクトが**前フレームと現在のフレームで変化したかどうかを検知**できるようです。

【参考リンク】：[【UniRx】ObserveEveryValueChangedでフレーム間での値の変動を監視する](https://qiita.com/toRisouP/items/d0d32cf674a00f3a8427)


##デモ
選択したトグルに応じてアニメーションが遷移します。
![ToggleDemo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/91eb3466-8cfc-efb3-14ee-2ad6fc8f3702.gif)


##参考にさせて頂いたリンク

[UniRxのシンプルなサンプル その2(WhereとSelect)](https://qiita.com/Marimoiro/items/5127e34de0f80e6e33fc)
[UnityのuGUIでラジオボタンを実装、選ばれたLabelを取得](https://qiita.com/JunShimura/items/453ab90ecafd2dd7abd8)
Mayaでオブジェクトを結合するだけのMEL

blendShapeGrpの下にあるグループを1つずつメッシュの結合していくだけ

```
string $childs[] = `listRelatives -f -c "blendShapeGrp"`;
for($child in $childs)
{
    select -r $child;
    polyPerformAction polyUnite o 0;
    DeleteHistory;
}
```

自分用メモ
Laravelで名前を指定してファイルをダウンロードできるようにする

# 概要
Laravelを使って、ファイル名を指定してダウンロードを促すレスポンスを返します。

# Content-Disposition
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Disposition

HTTPレスポンスのレスポンスヘッダーにContent-Dispositionを指定することによって、それがダウンロードすべきファイルである、名前は〇〇である、ということをブラウザに教えてあげることができます。

これをLaravelで実装します。

# 実装

```php:DocumentController.php

<?php

use Illuminate\Filesystem\FilesystemAdapter;
use Illuminate\Contracts\Routing\ResponseFactory;

class DocumentController {

    private $fileSystem;
    private $responseFactory;

    public function __construct(FilesystemAdapter $fileSystem, ResponseFactory $responseFactory)
    {
        $this->fileSystem = $fileSystem;
        $this->responseFactory = $responseFactory;
    }


    ... 略 ...


    public function download($file) {
        $data = $this->fileSystem->get($file); // S3などからファイルのrawDataを取ってくる

        return $this->responseFactory->make($fileData->rawData, 200, [
            'Content-Type' => 'application/pdf',
            'Content-Disposition' => 'attachment; filename="' . 'ファイル名' . '"'
        ]);
    }
}

```

Content-Dispositionの値として　`attachment`を指定することによりダウンロードすべきであるということを教えます。その後ろに`;`で区切って`filename`を指定することによってファイル名を指定できます。
Railsのテスト環境にデバッグ用の情報を表示する

Viewファイル内に
`<%= debug {変数} if Rails.env.development? %>`
を追加すると、テスト環境で任意の変数の中身を出力することができます。


####`@user`の中身を確認したい時

```erb
<%= debug @user if Rails.env.development? %>
```

####`params`を確認したい時

```erb
<%= debug params if Rails.env.development? %>
```

`/app/views/application.html.erb`に記述することで、全てのページでの出力が可能です。

application.html.erbの最下部に`<%= debug params if Rails.env.development? %>`と記述した場合の表示。
<img width="1440" alt=" 2019-11-20 19.57.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/91eea555-f43e-e6e2-0afc-a022a10ec0bd.png">
ChromeでCSSのTransformと動画再生を６画面で併用したら…

動画の再生が止まってしまった。。ので解消の方法をメモ

## 状態の再現

Chromeを複数立ち上げて
動画、CSSのアニメーション、CSSのアニメーション、CSSのアニメーション
を同時に表示する。。

試した限りでは
CSSアニメのタブが２つまでなら共存できた
３つ以上からは、動画ページの動画が停止した

CSSアニメが終了すると、一瞬は再生された。

## 原因っぽい？箇所

GPUが良くない？
Videoと3Dが交互になって、そのタイミングで動画再生されたので
VideoのGPUレンダを停止できればよさそう？
![NoName_2019-11-20_19-49-49_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/8df3f480-1e20-84b5-c7f9-a013bdb74dd6.png)
![NoName_2019-11-20_19-49-29_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/8b84d10a-43b8-15dd-8f2f-3f8d9edbe516.png)


## 解消した方法

下記設定にすることで、動画再生とCSSアニメ再生が共存できた

CSSアニメは、３つ以上になると、カクつき始めてしまったが
動画が停止は回避できたのでOK

### ChromeのGPU動画デコードの停止

![NoName_2019-11-20_20-2-43_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/00f01785-d1ce-39b1-5ecd-5db53384c512.png)

（CSSがGPU再生すると同時にはできないようなので、動画再生はGPU使わない）

```
chrome://flags/#disable-accelerated-video-decode
```

### Chromeのハードウェアアクセラレーションを有効化
![NoName_2019-11-20_20-3-10_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/693f5a5d-41f3-e6e1-3caa-c07ef9ad175b.png)

（CSSの描画をGPUでがんばってもらう）

```
設定　＞　詳細　＞　システム　＞　ハードウェア アクセラレーションが使用可能な場合は使用する
```

##参考サイト
各種ブラウザのハードウェアアクセラレーション(GPU)の有効／無効の切り替え
http://utaukitune.ldblog.jp/?p=133
RailsアプリをHerokuにデプロイする手順

本記事は、以下の記事を自分用にまとめ直したものです。
[【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39)

・Gitのインストール、Commit
・Heroku CLIのインストール
はできている前提で話を進めます。詳しい内容が知りたい方は、上記の記事をご参照ください。
##1.Railsでアプリを作成
各自アプリを作成します。rootにアクセスされた時にルーティングを忘れずに設定してください。

##2.Gemfileの設定
開発環境（ローカル）、本番環境（Heroku）のそれぞれで利用するデータベースの情報をGemfileに記述します。
まず12行目付近の`gem 'sqlite3'`をコメントアウトします。

```ruby:Gemfile
# gem 'sqlite3'
```
次に40行目付近`group :development, :test do ~~ end`内に、開発環境、テスト環境用のデータベースに関するGemを追加します。

```ruby:Gemfile
group :development, :test do
・
・
  gem 'sqlite3'
・
・
end
```
そして、`group :development, :test do`のかたまりの下に、本番環境用のデータベースに関するGemを追加します。

```ruby:Gemfile
group :production do
  gem 'pg'
end
```
最後に、変更したGemfileを反映させます。

```terminal
$bundle install --without production
```
`--without production`というオプションを加えることで、**group :produciton do~end内以外の**gemだけを自分のパソコンにインストールすることができます。

このオプションは一度打ち込めば、アプリ内部の`/bundle/config`というところに書き込まれるため、2回目以降は`bundle install`だけでOKです。その他のbundle install時のオプションも全てここに書き込まれます。

##3.config/datebase.ymlの設定
ファイル下部`production:`の項目を以下のように編集します。
ymlファイルはインデントで構造を判別するので気をつけましょう。

```/config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
```
`adapter`：接続するデータベースの種類
`encoding`：使用する文字コード
`pool`：DBに接続できる上限数？よくわかっていないのでいつか調べようと思います。

##4.config/environments/production.rbの設定
Sassなどの静的ファイルを、手動でプリコンパイルしなくても怒られないようにするために、動的プリコンパイルを有効にします。
31行目くらいにある`config.assets.compile`を`true`に変更しましょう。

```config/environments/production.rb
config.assets.compile = true
```

##5.Herokuにデプロイ
###ログイン
コマンドラインからHerokuにログインします。

```terminal
$ heroku login
```
以下のメッセージが表示されるので適当なキーをクリック。

```terminal
heroku: Press any key to open up the browser to login or q to exit:
```
するとブラウザが開き、Herokuのページに遷移します。`ログイン完了。コマンドラインに戻ってください`的な英語が表示されているので、指示通りコマンドラインに戻りましょう。

###Herokuアプリを作成
`heroku create {アプリ名}`でHerokuアプリを作成します。
アプリ名は一意でなければいけないので、他の人がすでに使っている名前だとエラーが表示されます。
またアプリ名がドメインの一部になるので、ドメインに使えない文字列は利用できません。

```terminal
$ heroku create d0ne1s-todo-app
```

###デプロイ
```terminal
$ git push heroku master
```

###本番環境(Heroku)でマイグレーション
デプロイをしたマイグレーションファイルを元に、本番環境用のデータベースを作成します。

```terminal
$ heroku run rails db:migrate
```
これで全てのデプロイ作業が完了です。


##アプリに修正を加えた時の操作
**変更したソースをデプロイ**

```terminal
$ git push heroku master
```

**データベースの構造を変更した時**

```
$ heroku run rails db:migrate
```
##参考
[【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39)
組み合わせ数の合計を出す(メモ)

(32個から1個取り出すときの組み合わせ)＋(32個から2個取り出すときの組み合わせ)＋(32個から3個取り出すときの組み合わせ)＋...というようにやっていって最終的に31個取り出すまでの組み合わせ数の合計を知りたくて作りました

```rb
num = 32
r = 1
sum = 0

while r < num do
  n = num
  i = r
  numerator = 1
  denominator = 1
  while i > 0 do
    denominator = denominator * i
    numerator = numerator * n
    n = n - 1
    i = i - 1
  end
  result = numerator / denominator
  puts "[#{num}C#{r}]#{result}"
  sum = sum + result
  r = r + 1
end
puts "合計#{sum}通り"
```

実行結果↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536456/48915c86-c5a6-7270-41c3-527138cb4be9.png)
シェルスクリプト &&リスト ||リスト

### && リスト
左側のパイプラインが真（終了ステータスが０）であれば、右側のパイプラインも実行する。

```bash:&&
# もし word1.txt と word2.txt が同じなら、word1.txt を元に word3.txt をコピーする
cmp -s word1.txt word2.txt && cp word1.txt word3.txt
```
本来＆＆は、左が真”かつ”右が真の場合、全体として真を返す論理演算。
左が先に評価され、”偽”の場合は右の評価は行われない、その性質を利用している。

### || リスト
左側のパイプラインが偽（終了ステータスが０以外）であれば、右側のパイプラインも実行する。

```bash:&&
# もし word1.txt と word2.txt が同じでなければ、word2.txt を元に word3.txt をコピーする
cmp -s word1.txt word2.txt || cp word2.txt word3.txt
```
本来｜｜は、左か右の何れかが”真”の場合、全体として真を返す論理演算。
左が先に評価され、”偽”の場合は右の評価を行う必要がある、その性質を利用している。
text-size-adjust: 100%;を指定すればスマホを横向きにしても文字が大きくならなくなる

```css
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%
}
```

スマホを横向きにすると文字サイズが勝手に大きくなることがあるのですが、上記のように指定するとそれを防ぐことができます。
[Ansible]proxy環境下でget_urlモジュールを使用する

# [Ansible]proxy環境下でget_urlモジュールを使用する

## 作成するに至った経緯
- proxy環境下でplaybookを実行した際につまづいたことを外部記憶として残したかったため。
- 自宅がproxy環境下ではないため、十中八九忘れてしまうため。

## 実行環境
```
# cat /etc/redhat-release
CentOS Linux release 7.7.1908 (Core)
# ansible --version
ansible 2.8.5
  config file = /etc/ansible/ansible.cfg
  configured module search path = [u'/root/.ansible/plugins/modules', u'/usr/share/ansible/plugins/modules']
  ansible python module location = /usr/lib/python2.7/site-packages/ansible
  executable location = /bin/ansible
  python version = 2.7.5 (default, Aug  7 2019, 00:51:29) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)]
```

## proxy環境下でget_urlモジュールを実行するplaybook
```
- name: get_url under proxy enviroment
  hosts: $inventoryファイルに定義しているparam
  enviroment:
    http_proxy: http://proxy_ip:port_num
    https_proxy: http://proxy_ip:port_num
  tasks:
  - name: Download the specified file under proxy environment
    get_url:
      url: $ダウンロードしたいファイルのURL
      dest: /usr/local/src
      mode: '0755'
      use_proxy: yes
      validate_certs: no
    register: download_result
    until: download_result | succeeded
    retries: 3
```

#### 備忘録1
必要最低限のparamだけ記載するとダウンロードに失敗することがあったため、下記を明記しております。

```
    get_url:
(省略)
      use_proxy: yes
      validate_certs: no
```

ダウンロードに失敗する理由に関しましては、参考URLの **wgetでこういう時はこうする** から言葉を引用いたしますと、
> httpsなサイトから、sslに対応していないwgetを使うとエラーになるので--no-check-certificateで無視して落とせる

ちなみに、手動で操作した場合を wget コマンドに例えると下記のようなイメージになります。

```
# wget <$ダウンロードしたいファイルのURL> --no-check-certificate
```
#### 備忘録2
download _resultの状態が"succeeded"になるまで、3回までリトライする。

```
    register: download_result
    until: download_result | succeeded
    retries: 3
```
何回かdownloadに失敗することがあったので、リトライ処理を追記しております。


## 参考URL
- [【docs.ansible.com】get_url – Downloads files from HTTP, HTTPS, or FTP to node](https://docs.ansible.com/ansible/latest/modules/get_url_module.html?highlight=ge_url)
- [【docs.ansible.com】Retrying a task until a condition is met](https://docs.ansible.com/ansible/latest/user_guide/playbooks_loops.html#do-until-loops)
- [【docs.ansible.com】The When Statement](https://docs.ansible.com/ansible/latest/user_guide/playbooks_conditionals.html#the-when-statement)
- [wgetでこういう時はこうする!!](https://qiita.com/hirohiro77/items/b774908436ec032df719)
- [ansible のダウンロード処理のリトライ（と既存コードの書き換えスクリプト）](http://t-suzuki.hatenablog.jp/entry/2017/10/10/193417)
【SQL server】T-SQL 学習メモ / CURSOR

T-SQLで使われているCURSORというものについて調べてみた。

#CURSORとは
SELECTで取得したデータを１行ずつ取り出す事ができるという機能。それにより１行毎に処理を書く事ができる。

```sql
--カーソル宣言
DECLARE カーソル名 CURSOR FOR 
SELECT 値 FROM テーブル名 WHERE 条件

--カーソルOPEN
OPEN カーソル名
FETCH NEXT FROM カーソル名 INTO 値

--FETCHで１行ずつ取り出す
WHILE @@FETCH STATUS = 0
BEGIN
--目的の処理
FETCH NEXT FROM カーソル名 INTO 値
END

--カーソル解除
CLOSE カーソル名 
DEALLOCATE カーソル名
```
Laravel で CollectionからLike検索をする

現在Laravelで一覧表示の結果をキャッシュしており、そこから検索できたら、クエリを発行せずに済むので試してみました。

検索はクエリパラメータを取得し行います

実際は複数カラムでのAND検索がしたかったのですが、思い浮かばず断念しました。

# 1.一覧画面の表示
まずは、ユーザーを全件取得し、`view`に渡しています。

```php:SampleController

    // 一覧表示画面
    public function index()
    {
        $users = Cache::rememberForever('users.all', function () {
            return User::all();
        });
        return view('sample',compact('users'));
    }
```

`view`では表示しているだけです。

```html:sample.blade.php


@forelse ($users as $user)
    <tr>
        <td>{{$user->id}}</td>
        <td>{{$user->name}}</td>
    </tr>
@empty
@endforealse



```

#2.検索エリア作成

`form`追加しただけです。

```html:sample.blade.php

<form action="#" method="GET">
<input type="text" placeholder="名前" name="name">
<input type="submit" value="検索">
</form>

@forealse ($users as $user)
    <tr>
        <td>{{$user->id}}</td>
        <td>{{$user->name}}</td>
    </tr>
@endforealse


```

#3.検索処理
クエリパラメータの存在を確認し、ユーザー全件を`filter`にかけます。
`true`のものだけ返却されるので、`strpos`でユーザー名に対して入力された名前のがあるか確認します。
あとは`filter`された結果が入るので一覧表示すれば、絞り込みになります。

```php:SampleController

    // 一覧表示画面
    public function index(Request $request)
    {
        $users = Cache::rememberForever('users.all', function () {
            return User::all();
        });
        // クエリパラメータが空じゃなくある場合
        if ($request->filled('name')) {
            $users = $users->filter(function ($user) use ($request) {
                return strpos($user->name, $request->name) !== false;
            }
        }


        return view('sample',compact('users'));
    }
```

# おわりに
本当はこれをベースに複数項目でのAND検索がしたかったのですが、
上手い書き方が思いつかず...
別途良い方法がありましたらご教授いただけますと幸いです。
Elastic Beanstalk + Railsで、can't find gem bundlerが発生する問題

## EC2インスタンスが初期化or再構築された際に、発生する

Railsアプリをデプロイする際、EBは`/opt/elasticbeanstalk/hooks/appdeploy/pre/10_bundle_install.sh`を呼び出し`bundle install`を実行する。
この際、Bundlerのバージョンがデフォルトは1.16.0という古いものになっており(何で？)、最近のバージョンのRailsでは互換性がなくエラーが発生する。


```
ERROR: [Instance: i-###############] Command failed on instance. Return code: 1 Output: (TRUNCATED)...:infind_spec_for_exe': can't find gem bundler (>= 0.a) with executable bundle (Gem::GemNotFoundException) from /opt/rubies/ruby-2.5.5/lib/ruby/site_ruby/2.5.0/rubygems.rb:308:in activate_bin_path'
    from /opt/rubies/ruby-2.5.5/bin/bundle:23:in'. Hook /opt/elasticbeanstalk/hooks/appdeploy/pre/10_bundle_install.sh failed. For more detail, check /var/log/eb-activity.log using console or EB CLI. INFO: Command execution completed on all instances. Summary: [Successful: 0, Failed: 1].`
```


解決するには対応するバージョンのBundlerをインストールすればいい。
これまでは`eb ssh`で`gem install bundler -v 2.0.2`を叩いてからデプロイしていた。


**しかしインスタンスがAuto Scalingに設定されていると、何度でもEC2が再構築されてしまい、予期せぬときにこのエラーが発生しサーバーダウンしてしまう。**
なので、デプロイ時の`10_bundle_install.sh`が実行される前に、自動でBundlerをインストールしてもらうシェルスクリプトを作成する。
注意点は、10より先の09以下の番号をファイル名の先頭に付けること。シェルスクリプトはアルファベット順に実行される。

```config:09_gem_install_bundler
 files:
  "/opt/elasticbeanstalk/hooks/appdeploy/pre/09_reinstall_bundler.sh" :
    mode: "000775"
    owner: root
    group: root
    content: |
      #! /bin/bash

      EB_APP_STAGING_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k app_staging_dir)
      EB_SCRIPT_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k script_dir)
      . $EB_SCRIPT_DIR/use-app-ruby.sh

      cd $EB_APP_STAGING_DIR
      echo "Installing compatible bundler"
      gem install bundler -v 2.0.2

```
化学者のためのアプリを作りたい[開発中]

### 研究の合間に化学データ解析アプリの開発をしたい人のお話

# イントロ
自分は大学院で化学を専攻している。つまりラボ畜である、、、

化学者というのは何を研究していてもたいていは(計算系でなければ)装置を使って分析を行なっていると思います。
大学は仮に旧帝であっても、大抵は古い装置を抱えていて、当然そのオペレーションや解析ソフトも古いものを使っているように思います。

そもそも大型装置はPCと抱き合わせで売っていることが大半で、ソフトもほとんどメンテナンスされていないのでWindows10になんか対応していなく、ひどい時はブラウン管にうつる95の文字が、、、
自然と研究者は解析を特定のパソコンでしかできなかったり、最新の手法による解析が行えなかったりします。
装置開発や分析を専門にしていると大抵は自分でプログラムを書くので問題ありませんが、大半の研究者は数行のHTMLをみてとんでもないプログラマーのように扱ってくれるレベルです。それはそれで気持ちのいいものですが。


そこで、細々とWEB開発でバイトしている程度ではありますが、**だれでも(プログラミングなんてやってる暇のない戦士たちにも)使える化学者向けの解析ソフトを開発していこうと思っています。**勉強も兼ねて

先生方には「昔はCOBOLやBASICを習ったもんだ」なんて行っている人もいますが、ここでは解析はPython、オペレーションはJavaScriptを使って開発していこうと思います。
当面の目標はスペクトルの解析、顕微鏡像の解析を実装します。


ちょっとずつ更新していくので、あたたかく見守っていただければ幸いです。
Jupyter上で常微分方程式のアニメを作る

常微分方程式の定性的な挙動は2次元までなら手で何とかなるとは言ってもやはり可視化，特にアニメーションにしたいですよね．
次のサンプルで解いてるのは減衰振動です．funcを適当にいじれば非線形でもOKです．
僕はまだ生後260ヶ月の赤ちゃんなので，実行例のgifは添付できてない上につい先日までスライス機能を知らず積分をfor文の中で実行しており計算時間がエライことになってました．

```Python:DiffAni.ipynb
%matplotlib nbagg
import matplotlib.pyplot as plt
import numpy as np
from scipy.integrate import odeint
from numpy import sin, cos, pi
from matplotlib.animation import ArtistAnimation

# Draw phase space of 2-D differential eq

def func(v, t, g, k):
    return [ v[1], -g*v[1]-k*v[0]] # 2-D damping oscillator

# parameters
g = 0.1
k = 3
# initial state
v0=[10,0]

# time interval
dt = 0.1
T = np.arange(0.0, 100, dt)

# integrate
v = odeint(func, v0, T, args=(g,k))
# make animation
fig = plt.figure()
ims = []
for i in range(len(T)):
    line = plt.plot(v[:i,0], v[:i,1],'r')
    ims.append(line)

plt.xlim(-17 ,17) 
plt.ylim(-17 ,17)
plt.grid()
ani = ArtistAnimation(fig, ims, interval=17, blit=True, repeat=True)

plt.show()
```

jitでfor文を高速化してみたかったのですが，試しに実装してみたら寧ろ遅くなったんですよね．このことも後々記事にするかもしれないです．
GitKrakenの無料版はライセンス改定によりプライベートリポジトリが開けなくなった

普段はSourceTree派なのですが久しぶりにGitKrakenを使おうかと思ってインストールしてリポジトリを開いたらこんな表示が出ました。

<img width="691" alt="スクリーンショット 2019-11-20 17.59.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16060/65255691-dedd-c7dd-7cd8-a717a8af2eff.png">

「あれ？前まで無料版でもプライベートリポジトリも開けたような？」と思って調べたらこんな経緯でした。

## 2019年4月頃まで

http://web.archive.org/web/20190401124604/https://www.gitkraken.com/pricing
によれば

> For open source, early-stage startups and non-commercial use

とのことで、オープンソース目的と非商用目的以外にも（詳細によれば）1年目までのスタートアップは無料プランが利用できました。

## 2019年4月頃から

http://web.archive.org/web/20190417181433/https://www.gitkraken.com/pricing

条件が変更されFREEの欄には

> For open source projects

とだけ書かれています。

## 2019年6月リリースのVersion 6

https://blog.axosoft.com/gitkraken-v6-0/#pricing-changes

リリースノートによれば

> The free version of GitKraken can only open public repos

とあり、その経緯として「無料ライセンスの条件が曖昧だったのでシンプルに改定したわ（意訳）」と書かれています。

> It also allows the free version to be used commercially—as long as it’s on public repos.

一方、パブリックリポジトリでの利用は商用目的でも可能になったようです。

## まとめ

GitKrakenでプライベートリポジトリを扱いたい場合はライセンスを購入するか、SourceTreeのような他のクライアントを検討しましょう。
PHPの$_POSTが受け取れない

ProgateのPHPコースを一通りやったので、手始めにページ間で値の受け渡しをやってみようと思い、以下のコードを書きました。

```sender.php
<! docutype html>
<html>
<body>
	<form id="form" name="form" action="receiver.php" method="POST">
		<input type="text" id="text" name="text">
		<input type="submit" id="button" name="button" value="送信">
	</form>
</body>
</html>
```

```receiver.php
<?php

if(isset ($_POST["text"]) ){
	//textがセットされている場合
	echo $_POST["text"];
}else{
	//textがNULL、または存在しない場合
	echo "なし";
}

?>
```

`sender.php`のテキストボックスに入力された値を、`receiver.php`で受け取り、値が存在する場合はその値を、存在しない場合は "なし" と表示するプログラムです。

困ったことに、テキストボックスに値を入力しても、結果は "なし" になってしまいます。If文の条件の書き方が良くないのかと思い、If文を外して試してみましたが、値は入ってきません。他にも色々と試してみましたが、値は受け取れませんでした。

今回、AWSのEC2(AmazonLinux)上に、ApacheとPHPをインストールしてやったのですが、もしかすると環境設定を誤ったのかもしれません。

このままでは埒があかないので、EC2を再セットアップするか、別の環境(ローカル、Dockerなど)で試してみようと思います。
VSCodeでファイルの中身をチラ見したいだけなのにたくさんファイルが開かれっぱなしで辛い

下記の設定にすればok。
プレビューはEnableにするけど、quickopenはdisabledね、的な設定。

<img width="884" alt="スクリーンショット 2019-11-20 18.27.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56194/7e16219e-3ca6-7d3b-2548-c1b44bfcb10a.png">

もしくは、setting.jsonに下記を追加。

```json
{
  "workbench.editor.enablePreviewFromQuickOpen": false
}
```
情報セキュリティ対策の第一歩

## はじめに
* 私が現職で「情報セキュリティ対策」に関する問題提起をした際の情報です。
* ITベンチャーですと、なかなか情報セキュリティ対策まで手が回っていないと思います。
* ただし、上場をすると外部監査・内部監査でそれ相応のチェックを受けますので、ぜひ参考にして見てください。

## 対応したこと
* 参考URLの情報を元に情報セキュリティ対策として、やるべきタスクを列挙。
    * まずはセキュリティ設計と業務フローの可視化が最優先

## 情報セキュリティ関連タスク
### 前提
* 以下のどちらかに合致するものを優先的に対応していく
	1. 外部監査で指摘されると思われるポイント
	2. 外部/内部脅威が顕在化するリスクのあるもの
		* すでに脅威が顕在化しているものはないという前提

### 優先度：高
* 情報セキュリティルールの設計
	* まずはセキュリティ対策として何をどうするか？を設計する。
	* セキュリティ運用の拠り所を整備し、それに従ってセキュリティ運用を行う。
		* 監査では「定めたプロセス通りに運用できているかどうか？」をチェックされる
* 情報セキュリティルールの整備・情報セキュリティガイドラインの制定
	* 上記、承認ルートの定義、エビデンスの残し方、業務フローなど、必要なルールを整備し、ガイドラインとして定義する。
		* 例えば、「いかなる場合でも定められた承認ルートに則ってVPN設定を行う」など
		* 運用を承認する人、変更する際のルール・フローを決めておく必要がある
* 内部脅威への対策検討
	* 「内部脅威」をリストアップし、それに対する対策を検討する。（手続きとシステムに分類）
		* 内部不正による情報漏洩対策
			* 持ち出させない仕組み
			* アクセス権限の適切な設定
			* 異動・退職に伴う不要IDの速やかな削除
			* ログ等の監視
			* 共有IDの利用不可
			* 外部オンラインストレージの利用不可
			* 個人モバイル端末の取り扱い定義
		* 持ち出したことを検知する仕組み
			* 重要情報へのアクセスログ・証跡の保護
			* システム管理者以外の第三者によるログ・証跡の確認

### 優先度：中
* 外部脅威への対策
	* 不正アクセスの防止
	* 標的型攻撃の防止
	* Webサービス改ざんの防止
		* サーバへのログインはVPN経由の為、ある程度は担保できている

### 優先度：低
* セキュリティ人材の育成
* 定期観測の実施
* ログイン状況のチェック
* 入社・退社・異動のチェック
	* 必要に応じて、権限に反映する
* 情報改ざん有無のチェック
* セキュリティ情報のチェック
	* JPRS、JPNIC、IPA、JPCERT等から情報を収集する
	* sitescan以外にも、定期的に収集するのが好ましい
* 定点観測の実施
	* 長期休暇明けに定期観測の実施
	* 組織改編時に定期観測の実施

## 検討メモ
### 2018年10大脅威＠IPA
* 標的型攻撃による被害
* ランサムウェアによる被害
* ビジネスメール詐欺による被害
* 脆弱性対策情報の公開に伴う悪用増加
* 脅威に対応するためのセキュリティ人材の不足
* ウェブサービスからの個人情報の窃取
* IoT機器の脆弱性の顕在化
* 内部不正による情報漏えい
* サービス妨害攻撃によるサービスの停止
* 犯罪のビジネス化（アンダーグラウンドサービス）　　　

## 監査のポイント
* 脅威を未然に防いでいるか？
* 脅威があった場合、検知可能か？
* 設計した通りの運用が出来ているか？

## 次のアクション
### 改善タスクのチケット管理
* 業務改善とマッピングして、進めるべきなので可視化、モニタリング、標準化/リファクタリングのどれに該当するかわかるようにする
    * タグをつけることで集計可能にする

### 対応優先度決定
* 優先すべき軸の明確化と各タスクを横並びで評価
    * 一度、Excelにまとめた方が良さそう

### AsIsの評価と整理
* 現状できているものはドキュメント化することで、セキュリティ対策としてはOK
	* 外部からの攻撃を防ぐ仕組みがあるか？
	* 内部の漏洩を検知する仕組みはあるか？
		* 防ぐ仕組みがあればベスト、トレースする仕組みはマスト

## 参考URL
* [システム信頼性保証の考え方](https://ecompliance.co.jp/CSV/SystemQuality/CSV_seminar_6.html)
* [情報セキュリティポリシーの内容](http://www.soumu.go.jp/main_sosiki/joho_tsusin/security/business/executive/04-3.html)
* [デロイト・トーマツシステム監査内容](https://www2.deloitte.com/jp/ja/pages/audit/solutions/iac/system-audit.html)
TypeORMメモ

わからなくてハマったことを追記していきたいと思っています。

# 元にするtableのentity
例えばサッカーチームについてのテーブル

```typescript:entities/Team.ts
import {Entity, Column, OneToMany} from "typeorm"
import {Member} from "./Member"

@Entity()
export class Team {

    @PrimaryGeneratedColumn()
    id: number

    @Column()
    name: string
    // 一対多
    @OneToMany(type => Member, member => member.team)
    members: Member[]
}
```

# 1対1(OneToOne)
チームに対して監督は一人と言うことで、参照される側にoneToOneを入れる
`@JoinColumn`は必須。

```typescript:entities/HeadCoach.ts
import {Entity, Column, OneToMany} from "typeorm"
import {Member} from "./Member"

@Entity()
export class HeadCoach {

    @PrimaryGeneratedColumn()
    id: number

    @Column()
    teamId: string

    @Column()
    name: string

   // TODO selectしたい時の書き方求む
   @OneToOne(() => Team)
   // Teamテーブルの`id`を元にHeadCoachの`teamId`でjoin
   @JoinColumn([{
      name: 'teamId',
      referencedColumnName: 'id'
    }])
   team: Team;
}
```

# 1対多(OneToMany)

チームに対してメンバーが複数を表現すると

```typescript:entity(多の方)
import {Entity, Column, ManyToOne} from "typeorm"
import {Team} from "./Member"

@Entity()
export class Member {

    @PrimaryGeneratedColumn()
    id?: number

    @Column()
    name?: string

    @ManyToOne(type => Team, team => team.members)
    team: Team
}
```

```typescript:
import { TeamRepository } from './repository/TeamRepository'

class TeamUsecase {
  teamRepository: TeamRepository

  constructor(
    teamRepository: TeamRepository    
  ) {
    this.teamRepository = teamRepository  
  }

  execute = (name: string) => {
    const result = await this.teamRepository.find({
      relations: ["member"],
        where: {
          name
        }
      })
  }
}
```

# relationをネストさせたい
Teamに対するMemberとMemberの中でSeasonDataをrelationしたい。
難しく考えることなく

```typescript
    const result = await this.teamRepository.find({
      relations: ["member", "member.seasonData"],
        where: {
          name
        }
      })


```
rails アプリをherokuに上げるまでの道のり　プログラミング学習42日目

##DBはpgがやりやすい
自身の開発環境のdbはmysql２でherokuつまり本番環境のデフォルトのDBはpgらしい。herokuのDBをmysql２に変更することもできるっぽいが、今回は自身の本番環境をpgにします！

##エラーの嵐
```
$git add .
$ git commit -m "change DB adapter to PG"
$ git push heroku
```
とherokuのプッシュしようとするととてつもない長さのエラーが出てしまいました。

エラーの原因はいくつかありました。
1.database.ymlの中身がmysql2を示していた
訂正後

herokuのsettingのものと合わせます(以下画像)
<img width="1199" alt="スクリーンショット 2019-11-20 18.12.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513269/e504a702-af19-6a25-5fb3-9fab655ff4fe.png">

```

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

development:
  <<: *default
  database: app_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: app_test

================================================================

production:
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: <%= ENV.fetch('DATABASE_URL') { 'localhost' } %>

```

2.herokuのDBをmysqlに変更していたのに、本番環境をpgにしていた
3.DBにusers emailが重複していた

```
ActiveRecord::StatementInvalid: PG::DuplicateColumn: ERROR:  column "email" of relation "users" already exists
```
これはgem 'devise'をちゃんと理解せず、user modelも別に作っていたことが原因だと考えられます。実際にdb/migrate/add_usersを消したらadd, commit ,pushしたらherokuで開くことができました。
副作用って結局何なのさ。

最近、vue.jsの文脈で人にcomputedとmethods（と、data)について語る時に思いついた例がいい感じだったので、メモ。

公式読んだら理解できる人とかではなく、

```vuejs
<template>
  <div>税込価格　{{ getTaxIncludedPrice() }}　円</div>
</template>

<script>
export default {
  methods: {
    getTaxIncludedPrice() {
      return this.price * 1.1
    }
  }
}
</script>
```
「こんなのはcomputedに定義しましょう」って言うのは簡単なんだけど、
大体なんで？ってなります。

副作用がないコードはcomputedに書きましょうって言っても、
はぁ、、となります。

## 結論
体重計に乗った時の計測値を取得する() という関数と
かーちゃん殴った時の反応を取得する() という関数を考えましょう。

両者ともに処理が２行で、返り値が１つのシンプルな関数に見えますが、

体重計には何度乗っても反応は変わりません。自分が同じである限りは、結果は一定です。
自分が太れば結果は変わります。
こういう副作用がないものの、計算が必要なものは、体重（）というcomputedにしましょう。


一方で、かーちゃんは一度殴ってしまうと、かーちゃんの状態が変化します。
次に、別の兄弟がかーちゃんを殴ろうとすると、そもそも学習したかーちゃんを殴るのに失敗するでしょう
こういう、副作用がある（状態が変化する）ものはmethodsに定義しましょう。

と、伝えるといいと思います。
[UE4] VS上でSolution Configurationsを見やすくする


VisualStudioのツールバーに右クリックして、
![vs1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369484/bb98c6df-ac96-8f6c-d6a3-d11df6949594.png)

Commands、Toolbar、Standard、
![vs2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369484/d36f9bb1-f3b4-c530-1a41-0f008984455e.png)

Solution Configurations、Modify Selection、
![vs3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369484/15fe4d9c-42bb-c617-33ed-0f9ace3079da.png)

Widthの所に200を入れたら、
![vs4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369484/df9273df-c4ab-c73b-edcb-9a0c025f5d3c.png)

Solution Configurationの全文字を表示されています！
![vs5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369484/e3a1d551-c053-bf07-6193-9674d7dca990.png)
railsでsubmitをキャンセルする

参考：https://www.sejuku.net/blog/28720#submit


「false」を渡してあげるだけです。


```javascript

<%= form_for @wifi_agency, html: {class: 'form'}  do |f| %>
  <%= f.text_field :name, :class=>"form-control"%>
  <%= f.submit "保存", class: "btn btn-success", :onclick => "return check_name()"%>
<% end %>

<script>
  function check_name() {
    if (!$("#name").value){
      //空だったらfalseを返してsubmitをキャンセル
      return false;
    } 
  }
</script>
```
/etc/sysconfig/rhn/up2dateの設定

##/etc/sysconfig/rhn/up2dateとは？
###RedHatネットワーク接続時のプロキシ設定をするファイル!
/etc/yum.confのプロキシ設定を変更するだけではyumでプロキシサーバへ接続することが出来ません。
そこで上記のファイル/etc/sysconfig/rhn/up2dateも設定変更します。

```
# vi /etc/sysconfig/rhn/up2date
```
確認はcatコマンドを実行します。

```
# cat /etc/sysconfig/rhn/up2date
```

###引用

旅モバ
>https://www.tabimoba.net/entry/20111028/1319770184#.XdTM4W5uK8A

以上がup2dateファイルの設定方法でした。
最後までご覧いただきありがとうございました！
webpackにESLintを導入する

webpack4.xがインストール済みのところにESLint v6.6.0を導入して使えるようにするまで。

# ESLintインストール
package.jsonがあるディレクトリで以下を実行。

```sh
yarn add --dev eslint eslint-loader
```

続いて初期化。コマンドラインでいくつかの質問に答えると、それに応じた内容の`.eslintrc.js`が作られます。

```sh
eslint --init
```
もし、eslintがない！？ということになったら、`./node_modules/.bin/`とかにあるのではないかと思いますので、確認してみてください。その場合は、`./node_modules/.bin/eslint --init`です。

# webpack.config.jsに追記
`module:`のブロックが追記部分です。

```js
module.exports = {
  mode: 'development',
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  module: {
    rules: [
      // For *.js
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader'
          }
        ]
      }
    ]
  }
}
```

これで使えるようになります。

# おまけ
外部のライブラリを使っている場合などで、ESLintの対象としたくない場合、webpack.config.jsの`exclude:`に指定します。もとから`/node_modules/`が記載されていると思います。追加する場合は配列にすることで複数指定できます。

```js
exclude: [/node_modules/, /^\/usr\/local\/lib/],
```
フルパスに対してのパターンマッチなので、～/lib/にあるものは除外したい場合は、以下のように指定することができます。

```js
exclude: [/node_modules/, /.+\/lib\//],
```


# 参考文献
- [ESLintの導入手順まとめ](https://qiita.com/ogontaro/items/3981b6a1b1f769ac78a9)
【Swift5】動画のサムネイル画像生成時に画像が90度回転するときの対処法

## はじめに

動画を扱うアプリを開発しているのですが、動画のサムネイルを生成する際に左に90度回転してしまい、解消までに地味に時間を取らてしまったのでその解消法を残しておこうと思います

## サムネイル画像生成方法
`AVAssetImageGenerator`に動画のAssetを突っ込んで`copyCGImage(at:_,actualTime:_)`メソッドで生成したところ、画像をみると左に90度回転していました（ポートレートで撮影した動画のみ）

```swift
let asset = Asset(url: videoURL)
let imageGenerator = AVAssetImageGenerator(asset: asset)
let time = CMTime(seconds: 0.0, preferredTimescale: 600)
do {
  let cgImage = try imageGenerator.copyCGImage(at: time, actualTime: nil)
  return(UIimage(cgImage: cgImage))
} catch {
  print("error")
}
```

## 解消法
`imageGenerator`の以下のプロパティを`true`にするだけで解消しました

```swift
imageGenerator.appliesPreferredTrackTransform = true
```

## appliesPreferredTrackTransformとは
[公式ドキュメント](https://developer.apple.com/documentation/avfoundation/avassetimagegenerator/1390616-appliespreferredtracktransform)
> Instance Property: appliesPreferredTrackTransform
> The default is false. AVAssetImageGenerator only supports rotation by 90, 180, or 270 degrees.
> This property is ignored if you set a value for the videoComposition property.

よしなに向きを判断して回転してくれる感は伝わってきますが、よくわかりません・・・^^;
同じことにつまずいた方の助けになれば幸いですm(__)m
Synology Audio Stationで曲の情報を編集できないのはwavだったから

CDで持っている音楽はSynologyのNASに入れてAudio Stationで聴いているのだけど、楽曲情報を手動で編集しようとしたらつまずいた。
原因は表題の通り、音源の形式によって楽曲の情報が編集できない仕様になんですね。情報を編集できるファイル形式は**MP3、M4A、M4B、OGG、FLAC、AIFF**。それ以外は楽曲情報が修正できないので注意が必要。我が家はWindowsから非圧縮で保存しようとWAVを選択していました。
参考：[Synologyサポートページ](https://www.synology.com/ja-jp/knowledgebase/DSM/help/AudioStation/browsemusic#b_43)
<img width="468" alt="スクリーンショット 2019-11-20 13.36.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479523/f25b810f-2d54-37cd-57c2-522d3669bb7c.png">
wavだと"情報をオンラインで検索"がグレーアウトしている。"曲の情報"からの編集も不可。

# SoxでWAVからAIFFに変換

iTunesなどで全曲変換するのは面倒なので、Soxを使用します。環境はmacです。

まずインストール。
lameが廃いていない場合は先に```brew install lame```が必要かも。

```sh
brew install sox
```

今回はwavをaiffに変換するので、

```sh
sox hoge.wav hoge.aiff
```

でhoge.wavからhoge.aiffが作成されます。

一括でaiff変換するならこんな感じかな。

```sh
cd /volumes/music
find ./ -name '*.wav' -print0|sed 's/.wav//g'|xargs -0 -I{} sox {}.wav {}.aiff
```

あとは残ったwavファイルを削除。

```sh
find ./ -name '*.wav' -print0|xargs -0 -I{} rm -f {}
```

#### 参考
- http://www.xucker.jpn.org/pc/sox_use1.html
- https://qiita.com/samurai20000@github/items/2af98b6c468af317bb09
DataTablesでカスタムエラーメッセージ表示

DataTablesにAjaxで取得したデータを表示するの、便利ですよね。

サーバーで何かエラーが起こったときにブラウザでカスタムメッセージを表示したいなーって場合、レスポンスのJsonを以下のようにすると一応表示できます。


```json:JSON
{"error":"カスタムメッセージ"}
```

```text:エラー表示例
DataTables warning: table id=hogehoge - カスタムメッセージ
```

ただ、これだけだとJavascriptのエラーが出ちゃうので、データ0件だよーという内容のレスポンスに仕立てます。

```json:JSON
{"data":[],"draw":1,"recordsFiltered":0,"recordsTotal":0,"error":"カスタムメッセージ"}
```

これでアラートが表示されたあとにJavascriptエラーは出ません。

ちなみに、アラート表示だけじゃなくて他に何かJavascriptで処理したい場合は以下のようにエラー処理方法もカスタムします。

```javascript:Javascript
$.fn.dataTable.ext.errMode = function(settings, techNote, message){
	alert(message);
	// 何か処理を書く
};
```

英語苦手マンなのでDataTablesのリファレンス読むの難しい・・・。
git checkoutによって　エラーが何か追求する　プログラミング学習42日目

###そもそもなんでgithubを使うの？###
githubは簡単に言うと変更を記録したりするものです。
チーム開発などでは必須です。ただ僕は初心者なのであくまでも1人で使っています。

##githubは初心者1人でも使うべき##

例えば何か変更を加えたことでエラーが出てしまった時。エラーの原因が分からないから元に戻したい、そんな時にgithubは役に立ちます。![IMG_6445.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513269/0e556c64-5d46-056d-8a3f-7ff440e82403.jpeg)

こちらはインターン先のエンジニアの方に書いていただいたgithubの簡単な説明になります。masterがデプロイするもの(実際にサービスとしてリリースするもの?)で、そのよこのthongとsekiはエンジニアの名前です。

例えばmasterでA,B,Cまで作ってあり、それ以降を変更する場合各エンジニアはそれぞれのブランチでその変更作業を行います。理由→変更したものがそのまま使えるか確かめないといけないなど

とりあえずチーム開発をするときは各自のブランチで作業を行い、変更後デプロイするブランチ(ここで言うとmasterに0)pull requestする必要があるそうです。

##主なgit commandの確認
**git status** ワーキング・ツリーの状態を表示する,現在の状況を確認する
https://www.sejuku.net/blog/71857#git_status

**git checkout** ブランチの切り替えに使う
https://www.sejuku.net/blog/71457
git checkout . で最新のcommitに移る
git checkout master でmaster branchに移る

**git branch**　引数を指定しない場合、現在のbranchを表示する
git branch branchname branchの作成

**$ git checkout -b new** →　Switched to a new branch 'new'(表示されたもの)

#戻り方#

**git log** logを表示
↓
**git checkout 5b32vc2(仮の番号)** 指定のlogに移動
↓
**bundle install**
RHEL ネットワーク設定方法

#Linux RedHat ネットワーク設定方法とは？
##2種類のファイルを書き換えます
1:/etc/sysconfig/network
2:/etc/sysconfig/network-scripts/ifcfg-ens192


##1:/etc/sysconfig/network
上記のファイルは、接続するネットワークを決めるファイルです
固定IPにするのか、DHCPによるIP設定にするのかで設定が異なります

###/etc/sysconfig/networkを設定するには？
####viコマンドの利用

```
# vi /etc/sysconfig/network
　NETWORKING=yes
　HOSTNAME=test.your.domain.name
　DOMAINNAME=your.domain.name
　GATEWAY=192.168.0.2
```
上記ファイルの中身では、個々の行ごとに意味があります。

| 行                |  説明　　　　       　　　　　　　　　　　　　　　　   |
|:------------------|:----------------------------------------------------|
| NETWORKING | ネットワークを使用するかどうか　（yes/no）  　　     　|
| HOSTNAME   | このシステムのホスト名（FQDN） 　 |
| DOMAINNAME | ネットワークのドメイン名         |
| GATEWAY    | ゲートウェイマシンのIP アドレス                      |




因みに、AWSでは書き込みできない様です。下記のように表示されました。

```
# cat /etc/sysconfig/network
# Created by cloud-init on instance boot automatically, do not edit.
#
NETWORKING=yes
```

##2:/etc/sysconfig/network-scripts/ifcfg-ens192
上記のファイルはそのシステムのネットワークインターフェースに関する定義をします。
手動で作成する場合はifcfg-loをコピーし作成すると良いです。

※インターフェース名をifcfg-eth0などに変更する際はmvコマンドを使用します。
　名前を変更する際はnetwork-scriptsまで移動する必要があります。


###/etc/sysconfig/network-scripts/ifcfg-ens192を設定するには？
####viコマンドの利用

```
# vi /etc/sysconfig/network-scripts/ifcfg-ens192
```
このファイルの中身も、個々の行で意味があります。

| オプション  |  説明　　　　                     |
|:-----------|:---------------------------------|
| DEVICE     | ネットワークインターフェース名      |
| BROADCAST  | ブロードキャストアドレス            |
| IPADDR     | そのシステムのIP アドレス  |
| NETMASK    | ネットマスク　　　　　     |
| NETWORK    | そのシステムが属するネットワーク     |
| BOOTPROTO  | システム起動時にIP アドレス等を割り当てられるしくみを利用するか否かの設定 |                        
| ONBOOT     | 起動時に有効にするかどうか(yes/no)  |


##引用

Linux ネットワーク基本設定其の一
>https://kazmax.zpp.jp/network/net.html

ネットワークの設定と操作
>https://users.miraclelinux.com/technet/document/linux/training/1_5_1.html

以上がネットワークの設定方法でした。
最後までお読みいただきありがとうございました！
続・Amazon Linux WorkSpaces でメニューのカスタマイズを GUI で行う

前回記事「[Amazon Linux WorkSpaces でメニューのカスタマイズを GUI で行う](https://qiita.com/mosop/items/39d4cdbf482ee3759893)」では、メニューのカスタマイズを GUI で行うために Alacarte と AppEditor の 2 つのアプリを組み合わる方法をとりました。

が、"Mozo" という Alacarte から fork されたアプリを見つけて試したところ、これひとつでうまくいきました。

Mozo のパッケージは epel エクストラリポジトリにあります。epel を有効化していない場合は、次のコマンドで有効化します。

```
sudo amazon-linux-extras install -y epel
```

次に Mozo をインストール。

```
sudo yum -y install Mozo
```

インストールが成功すると、システムメニューに "Main Menu" が追加され、Mozo を使えるようになります。

![Screenshot at 2019-11-20 17-52-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63688/c652ad2b-870f-5d19-f4ca-4ca993258f75.png)

できました :tada:
VSCodeで効率的にconsole.logする 【Turbo Console Log】

# 思ってたこと
毎度console.log書いて変数名をC&Pするのが面倒:pensive:
（スニペット登録してても面倒に感じてました。


# 動作例
対象の変数名を選択して「Ctrl+Alt+L」（Macの場合は 「Option+Shift+L」）
![tlc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478285/80a94d79-da44-9b23-04cc-607bcef876a8.gif)


# 拡張機能をインストールする

サイドバーのEXTENSIONS「(Ctrl|Cmd)+Shift+X」を選択し、「Turbo Console Log」を検索してインストール

VSCodeMarketPlace: [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
<img width="1440" alt="tlc.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478285/c29b6013-d35b-750e-e2ec-d03fe769ef9d.png">

## オプション設定
「Turbo Console Log」では、複数のオプションが用意されています。

行末にセミコロンを挿入するか （dafault: false）

```setting.json
"turboConsoleLog.addSemicolonInTheEnd": true
```

ログ表示に変数が所属しているクラス名を出力するかどうか （default: true）

```setting.json
"turboConsoleLog.insertEnclosingClass": true
```

ログ表示に変数が所属しているメソッド名を出力するかどうか （default: true）

```setting.json
"turboConsoleLog.insertEnclosingFunction": false
```

ログ表示に利用するprefixを指定 （default: "TCL"）

```setting.json
"turboConsoleLog.logMessagePrefix": "Debug"
```

ログ表示に利用するクォートの種類を指定 （types: （"|'|`））

```setting.json
"turboConsoleLog.quote": "`"
```

ログ表示を"---"で囲うかどうか （default: false）

```setting.json
"turboConsoleLog.wrapLogMessage": true
```

# キーボードショートカット
キーバインドの初期値一覧です。
使いやすいようにカスタマイズして下さい。

| キーバインド | 説明 |
| ------- | ------- |
| Ctrl+Alt+L(Option+Shift+L) | フォーカスされている箇所をconsole.logで囲って次行に挿入 |
| Ctrl+Alt+C(Option+Shift+C) | 出力したすべてのconsole.logをコメントアウト |
| Ctrl+Alt+U(Option+Shift+U) | 出力したすべてのconsole.logのコメントアウトを解除 |
| Ctrl+Alt+D(Option+Shift+D) | 出力したすべてのconsole.logを削除 |

# おわりに
普段JavaScriptの開発を行ってる方にとって便利な拡張機能だと思いますので、ぜひお試し下さい。
ガウス分布とポアソン分布をqq-plotする

#Import

```python
import numpy as np
from scipy import stats
import matplotlib.pyplot as plt
```
#乱数を生成
ガウス分布、ポアソン分布に従う乱数をそれぞれ１００００個生成する。

```python
norm = np.random.normal(0, 1, 10000)#平均０、標準偏差１
poisson = np.random.poisson(lam=10, size=10000)#λ=10
```
これをヒストグラムで図示する。
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/e0e9801f-37e4-0c51-5d81-683c7c17e657.png)
![download-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/3decfdf0-9733-023e-1c09-dcf111de1825.png)
#qq-plot
正規分布をqq-plotする。

```python
stats.probplot(gaussian, dist='norm', plot=plt)
plt.show()
```
![download-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/17fe5803-8132-25f3-64af-d980849291a2.png)
次にポアソン分布をqq-plotする。

```python
stats.probplot(poisson, dist='poisson', sparams=10, plot=plt)#λ=10
plt.show()
```
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/6c463b23-7d94-73df-a4f9-cf0cead98df3.png)
React コンポーネントのプロパティに包含要素無しで複数要素を与えたい

元のダメコードです。

```jsx
import React from 'react';

function Base(props) {
  return (
    <div>
      {props.message}
    </div>
  );
}

export function Specialized(props) {
  return (
    <Base
      message={
        props.message,    ←値とJSX要素を一緒に指定したい
        <div>element</div>
      }
    />
  );
}
```

フラグメント使えばいけそうです(元々プロパティへ１要素指定は可能なので、フラグメントを使えば記述方法的に複数個の要素を内包可能)。

```jsx
      message={
        <>
          {props.message}
          <div>element</div>
        </>
      }
```