OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js環境をWindowsで構築する

# Node.jsとは
JavaScriptをサーバサイドで動かす際の実行エンジン(サーバ機能とかもあったりするので、だけではないけど)のようなもの。
JavaでいうとJVMというかJVM+Tomcatというかそんな感じ。
サーバサイドでもJavaScript使えるとフロントエンドエンジニアがバックもできるじゃない。経済的！
という気持ちから流行った。昨今いろんなところで出てくるのでお勉強することにしました。

## Node.jsで動かせるJavaScriptについて
Node.jsはJavaScriptの実行エンジンと書いたが、実際はJavaScriptは2系統あるらしい。
仕様名で言うとECMAScriptとCommonJSの2つ。
予備知識として以下に記載。

**1. ECMAScript**
ブラウザとかが対応しているのがこちらの仕様。
現在はES9まで策定されているが、ブラウザが対応できているのは現状ES5まで。
ES6以降の仕様には完全にはついていけていないという現状がある。
ES6以降の記載に対応するために、ES6以降⇒ES5の変換をするトランスコンパイラが存在する。
代表的なトランスコンパイラとしてはbabelがある。

**2. CommonJS**
JavaScriptを構造的に扱いたい（モジュール化とかしたい）という熱意から2009年前後に策定された仕様。
サーバサイドのJavaScript実装としては実質Node.jsがデファクトになったので、Node.jsの仕様＝CommonJSの仕様でよさそう。
CommonJSで作ったツールをブラウザで動かしたいという熱意からこちらもトランスコンパイラが作られている。
代表的なトランスコンパイラとしてはbrowserify等がある。


## WindowsでのNode.js環境構築
Node.jsのインストール方法はOS毎にいろいろ。
とりあえずローカルで試すためにまずはWindowで環境構築を行う。
Windows向けにnodistというツールがある。
Pythonとかでいうところのcondaとかanacondaとかそのへんのノリのもの。
これをつかうとnode環境が容易につくれる。
[nodist](https://github.com/nullivex/nodist/releases)

## nodistでの環境構築手順
nodistをexeを落としてインストーラに従いインストールする。
**1. コマンドプロンプトで以下が通ればインストール成功**
nodist -v
**2. Node.jsの利用可能バージョン表示**
nodist dist
**3. 使いたいバージョンをダウンロード(10.15.3入れたいなら以下みたいな)**
nodist + 10.15.3
**4. ダウンロード済みのバージョン一覧表示**
nodist
**5. 利用したいバージョンを変更(10.15.3に変えたいなら以下みたいな)**
nodist global 10.15.3
**6. 現在選択されているNode.jsのバージョン確認**
node -v

## パッケージ管理ツール
Node.jsのパッケージ管理ツールとしてはnpmというものがある。
Javaで言うところのMaven、Rubyでいうところのgemみたいな。
Node.js入れるとデフォルトで入っているらしい。便利。

## npmによるパッケージ管理方法
(プロジェクトルート的な意味合いの)ディレクトリを掘ったとして、その中で以下コマンドを実行する感じ。
**1. パッケージ管理ファイル(package.json。Mavenでいうとこのpom.xml的なファイル)を作成する**
npm init
**2. パッケージのインストール(以下はchalkというパッケージをインストールする場合の例)**
npm install chalk
**3. パッケージを消す**
npm uninstall chalk
**4. インストール済みの一覧表示(--depth=0が無いと情報量がすごくて目視で確認が厳しかったのでこれにおちついた)**
npm ls --depth=0

### npm installのオプションについて
installのオプションとしては--save、-gとかがある。
**--save**
オプションに--saveとするとpackage.jsonにインストールしたパッケージのdependency情報が記載される。
が、npmの5.0.0以降ではデフォルトになってるので5.0.0以降を使っているのであれば気にしないでOK。
**-g**
オプションに-gとするとインストール先がローカルモード(コマンド実行場所=プロジェクト固有)ではなく、
グローバルモード(npmのインストールディレクトリ)になる。
グローバルモードで入れるとpackage.jsonとかに記載されないので、割と厄介。
gitとかにpackage.json登録してもnpm installで環境が再現できなくなる。
じゃあなんでグローバルモードとかあるかというとグローバルモードだとパスが通るかららしい。
コマンドとかで使うものはこっちに入れたくなるとか。
だけど資材管理の対象から外れるのは嫌だよね。
そんな場合はローカルで入れて、package.jsonのscriptにコマンド書いてあげるといいらしい。
npmが頑張ってローカルのnode_modulesディレクトリの.binから探してくれるんですって。
例えばこんな感じ。

```javascript
  "scripts": {
    "babel": "babel src --out-dir target"
  },
```

実行する場合はこんな感じ。

```bash
npm run babel
```
## babel導入
ES6等でソースを書いた場合、前述のとおりNode.jsで動かす前にトランスコンパイルする必要がある。
npmでbabelを使えるようにする方法は以下。

**1. npmでbabelをインストール(@babel/coreがエンジン、@babel/cliがCLIから呼ぶためのツール、@babel/preset-envが変換時の設定用のパッケージ）**
npm install --save @babel/core @babel/cli @babel/preset-env
**2. 設定ファイル(babel.config.js)はpackage.jsonと同じ階層に自分で作る必要がある。ミニマムだと以下。**

```javascript
// babel.config.js
const presets =  [
  ["@babel/preset-env"]
];
module.exports = { presets }
```
**3. 変換実行（babelをsrcディレクトリ配下にかけて、targetディレクトリ配下に出力する場合）**

```bash
babel src --out-dir target
```
rails備忘録2  params[:text] が取得できない

未だによくわからないバグが発生したので、その対処法を此処に忘れないように記す。
~~理由が分かる方がいればコメントをお願いします。~~

まだ推測ですが原因もわかってきました。


ピザのレビューを書くために、そのピザのidとピザに対するレビュー内容(text)を取得する処理を記入

```reviews_controller.rb
class ReviewsController < ApplicationController
  def create
    @review = Review.create(text: create_params[:text], pizza_id: create_params[:pizza_id])
    redirect_to root_path
  end

  private
  def create_params
    params.require(:review).permit(:text, :pizza_id).merge(user_id: current_user.id)
  end
end
```
このようにして、formに入力された内容を取得して表示させたかったのだが.....

current_user.nameしか表示されない......

view, controllerそのほかを見てもよくわからない....


そこでbinding.pryでデバッグを行なう。
<img width="1008" alt="59b0f02733861427decb2ea6ad1d7eb3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354080/2c288dfa-d485-b757-27bb-ad803f01a616.png">





paramsで取得しようとすると失敗したので、メソッド名のcreate_paramsで試す...

<img width="485" alt="029592c4359079e392ba02eb811a0128.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354080/7100991d-dc2e-5853-0ff3-0ed9e46f9a33.png">

textは取得できた...しかしpizza_id（ピザ側の識別子）の方は取得できない。

そこでcreateメソッド内の記述を変更

```reviews_controller.rb
class ReviewsController < ApplicationController
  def create
    @review = Review.create(text: create_params[:text], pizza_id: params[:pizza_id])
    redirect_to root_path
  end

  private
  def create_params
    params.require(:review).permit(:text).merge(user_id: current_user.id)
  end
end
```
textはprivateメソッドのcreate_pramsから取得。
pizza_idはparamsで取得しました。


####レビュー取得成功！！


どうやら識別子であるpizza_idはform_forを使用した時にはストロングパラメータには入らないようなので、paramsで取得しなければならないようです・・・
コマンドひとつでWebサーバ構築する


## Python2

```
python -m SimpleHTTPServer 8000
```

## Python3 

```
python -m http.server 8000
```

## Ruby

```
ruby -rwebrick -e'WEBrick::HTTPServer.new(Port: 8000, DocumentRoot: Dir.pwd).start'
```

or

```
ruby -run -ehttpd . -p 8000
```

or

```
gem install adsf
adsf -p 8000
```

## PHP

```
php -S localhost:8000
```

## Nodejs

```
npm install -g http-server 
http-server -p 8000 .
```

or

```
npm install -g node-static
static -p 8000 .
```

## busybox on Docker

```
docker run -it -p 8000:8000 busybox httpd -f -p 8000
```
rails 備忘録１

初めて自分でアプリ制作を行った際に自分がめちゃくちゃ苦労した事を挙げていく



##haml記法での変数の記入方法

haml記法でDBから画像を取得して表示する時は主にimage_tagを使用しました。
link_toと併用して、画像をリンクにする方法

```index.html.haml
- @menus.each do |menu|
  = link_to image_tag( menu.image, class: 'thumnail-menu'), menu_path(menu.id), method: :get
```
ここでのもう一つのポイントは、パスに変数を入れなければならなかった時、どう記入するかである。
menu_path単独では、そのimageに結びつく詳細表示画面にアクセスができないので、(menu.id)でmenuのidを取得する必要があった。





しかしshowアクションで定義したviewでは

```show.html.haml
  = link_to image_tag( @menu.image, class: 'thumnail-food'), '#'
  %ul.detail-info
    %li.detail-info__title 
      = @menu.title
    %li.detail-info__price
      価格: ¥#{  @menu.price } 
    %li.detail-info__calorie
      カロリー: #{ @menu,calorie }kcal
```





```menus_controller.rb
def show
    @menu = menu.find(params[:id])
    @reviews = @menu.reviews.includes(:user).order('created_at DESC')
    @review = Review.new
  end
```

このようにコントローラーで定義されたインスタンス変数@menuによってカラムのデータを取得している。

indexではすでに@menus.each doで@menuからのデータを毎回取得している。　
しかしshowでは一つづつインスタンス変数を記入する必要がある。


##form_forの使用方法

初めのうちはform_tagばかり使っていましたが、何かと融通がきくform_forを使ってレビュー投稿画面の作成をしました。

reviewsはmenusに対して１対多のの関係であるため、ルーティングはネストされている。

そのため、form_forに指定する引数として、@menus, @reviewの二つを指定する。

```show.html.haml
.forms
  - if current_user
    .form
      = form_for [@menu, @review] do |f| 
        = f.text_area  :text, placeholder: "レビューを書く"
        %br/
        = f.submit 'post'
      = link_to 'X close', '#', class: 'post-close'
```
コントローラー側ではcreateアクションにて@reviewインスタンスを生成する。

```menus_controller.rb
def show
    @menu = Menu.find(params[:id])
    @reviews = @menu.reviews.includes(:user).order('created_at DESC')
    @review = Review.new
end

```

色々参考にしたものの中ではこのブログが一番わかりやすいかも
https://cre8cre8.com/rails/how-to-use-form_for.htm
リンクの飛ばし方は他にも色々あるみたいです。
GCD on Blackboard

- [GCD on Blackboard](https://atcoder.jp/contests/abc125/tasks/abc125_c)

## コンテスト中の考察

- ある1点をナシにしてGCDをとる。それを全探索すれば解ける。ただ、計算量が$2^N$になってしまう（たぶん）
- DFS書いたからDPできないか考えたけど無理っぽい。計算途中ではどの値が最適かわからないので最大値をとるとか最小値をとるとかができないので。
- GCDときたらLCMなのでLCMをとってみる。なにもわからない。
- なんもわからん。終了



## 反省

### 詰まった部分

- あるひとつの要素を取り除いてGCDをすればいいことはわかったがこれではTLE。その先どう考えればいいかわからなかった。
- 全体のGCDを取ってからある要素を取り除きたい気持ちになったが、GCDは復元みたいなのができないので無理だった。例えば和だったら全体の和を求めてからある要素を引けばいいけどGCDはそれができない。

### 解決策

- 両端からGCDを累積する。
- 発想としては簡単だが思いつけなかった。累積といえば累積和という固定された知識があったから思いつかなかった気がする。全体からある要素を取り除いた結果を知りたかったら、両端累積するとよさげ（類題解いてないからなんとも言えんが）。これは後から復元できない演算で有効っぽい？例えばGCDの部分がOR演算とかAND演算でもこの問題は同じようなことができそう。



## 解法

1. 両端からGCDの累積をとる
2. 取り去る要素を全探索する。そのとき、あらかじめ求めた累積GCDの左右の要素のGCDをとる。そして、その値の最大値が答えとなる。



## [コード](https://atcoder.jp/contests/abc125/submissions/5167079)

```cpp
#include <bits/stdc++.h>
using namespace std;

#define int long long

template<class T>bool chmax(T &a, const T &b) { if (a<b) { a = b; return 1; } return 0; }

int N;
int A[111111];

// 1-indexed
int l[111111]; // 左から累積
int r[111111]; // 右から累積

long long gcd(long long a, long long b) {
   if (b == 0) return a;
   return gcd(b, a%b);
}

signed main() {
  cin >> N;
  for (int i = 0; i < N; i++) {
    cin >> A[i];
  }

  for (int i = 0; i < N; i++) {
    l[i+1] = gcd(l[i], A[i]);
  }
  for (int i = N; i >= 1; i--) {
    r[i] = gcd(r[i+1], A[i-1]);
  }

  int ans = 0;
  for (int i = 1; i <= N; i++) {
    int tmp = gcd(l[i-1], r[i+1]);
    chmax(ans, tmp);
  }

  cout << ans << endl;

  return 0;
}
```



## 要点

- ある要素だけいらない場合を考える時、両端から累積をとると良い
  - 累積＝累積和ってイメージが強かったし、今までそれしか見たことなかったのでGCDでもできるのかぁってなった。
  - GCDに限らず、ORやANDでも使える（和とか積でも使えるけど使って嬉しい場面がなさそう）
- 累積テーブルは連続的に処理していく演算をしている全ての問題に適応できる。逆から累積和を使うテクは、その演算に結合法則が成り立つ場合に使える。って強い人が言ってた



## メモ

- [3N Numbers](https://atcoder.jp/contests/arc074/tasks/arc074_b)。これ類題らしい。他にも類題あったら教えて欲しい。
- 解けなかったクッソ悔しい。ていうかGCD使う問題本番で解けたことないんだけど。
【Java】オブジェクト指向まとめ_その2

## 前回
[【Java】オブジェクト指向まとめ\_その1 \- Qiita](https://qiita.com/snyt45/items/55363a7a0634f38158d2)

## 趣旨
前回は､クラス作成､インスタンス化についてでした｡

今回は､インスタンス操作まで行い､一旦終了です｡

## 一部訂正
プログラミングにおけるオブジェクト
訂正前：
「物体」

訂正後：
「情報の集まり」
理由：
現実世界の「物体」では､不都合があるため｡

例：
空気は､「オブジェクト」？ → Yes

空気は､「物体」？ → No
空気は､「情報の集まり」？ → Yes

スケジュールは､「オブジェクト」？ → Yes

スケジュールは､「物体」？ → No
スケジュールは､「情報の集まり」？ → Yes

## 参考
[【Java】 オブジェクトって何？ \| 一番かんたんなJava入門](https://nobuo-create.net/java-beginner-17/)
[Javaのオブジェクト指向入門](http://www.kab-studio.biz/Programing/OOPinJava/)

[【Java】 コンストラクタって何？ this\( \)の意味 \| 一番かんたんなJava入門](https://nobuo-create.net/java-beginner-20/)


## インスタンスを使う準備
### 前回のコード(再掲)
```java:Car.java
class Car {
	String carname = "A"; // 車の名前
	String color = "red"; // 車の色

	void start() { // 車の発信動作
		System.out.println("発進します");
	}
 
	void stop() { // 車の停止動作
		System.out.println("止まります");
	}
}
```

【プログラムの解説】

- Carクラス作成

```java:CarTest.java
class CarTest{
	public static void main(String[] args){
		Car car = new Car();
	}
}
```

【プログラムの解説】

- Car型の参照型変数carにCarインスタンスを代入
- インスタンス本体ではなく､参照(インスタンス本体の位置)が代入される｡
![参照.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163887/6701625f-e353-6675-7424-b728a097f8c2.png)


## 参照型変数を通して､インスタンスのフィールドを操作
```java:CarTest.java
class CarTest{
	public static void main(String[] args){
		Car car;
		car = new Car();
		car.carname = "B"; // 車の名前を"B"に変更
		car.color = "blue"; // 車の色を"blue"に変更
	}
}
```

【プログラムの解説】

- carのcarnameにBを代入｡
- carのcolorにblueを代入｡
- 参照型変数名.フィールド名とすると､インスタンスのフィールドが操作可能｡

![参照(フィールド操作).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163887/b7d9524b-3bf2-ffde-9ce8-bbbcd17cf2ee.png)


## 参照型変数を通して､インスタンスのフィールドを出力
```java:CarTest.java
class CarTest{
	public static void main(String[] args){
		Car car;
		car = new Car();
		car.carname = "B";
		car.color = "blue";
		System.out.println(car.carname); // 出力結果:B
		System.out.println(car.color); // 出力結果:blue
	}
}
```

【プログラムの解説】

- 出力も基本は同じで､参照型変数名.フィールド名として操作可能｡

## 参照型変数を通して､インスタンスのメソッドを実行
```java:CarTest.java
class CarTest{
	public static void main(String[] args){
		Car car;
		car = new Car();
		car.carname = "B";
		car.color = "blue";
		car.start(); // 出力結果:発信します
		car.stop(); // 出力結果:止まります
	}
}
```

【プログラムの解説】

- メソッドもフィールドと操作方法は同じで､参照型変数名.メソッド名として操作可能｡

![参照(メソッド操作).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163887/0193fc45-01ca-0229-07ee-c1ff5b96d998.png)


## 結果
![スクリーンショット 2019-04-28 0.33.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163887/9bddf63f-b4a8-3e45-4fcf-4443a618d79e.png)


## まとめ
概要：

- プログラミングにおけるオブジェクトは､「情報の集まり」で「名前」をつけたもの｡実体がある｡
- オブジェクト指向は､オブジェクトを扱う為の考え方｡
- クラスは設計書｡インスタンスはクラス型で生成した実体｡

インスタンス操作について：

- インスタンスを操作するには､「クラス作成→インスタンス化→インスタンスの参照を保存→参照を通して､インスタンスのフィールド､メソッドを操作」という手順を踏む｡

その他：

- インスタンス操作以外の難しそうな用語はここではスルー｡
-  コンストラクタ/デフォルトコンストラクタ/this/this()/カプセル化/継承/ポリモルフィズム/ガベージコレクタ
Path.Combineであっぷっぷ☆（＾～＾）！

```C#
var fullName = Path.Combine("C:\This\Is", "A\Pen.txt");

// 多分 C:\This\Is\A\Pen.txt
```

うろおぼえだが　Ｃ＃で　こんな書き方ができたと思う。

```C#
var fullName = Path.Combine("C:\This\Is", "\A\Pen.txt");

// 多分 C:\A\Pen.txt
```

こうして　わたしのＣドライブには色んなフォルダーが作られた。

```C#
var fullName = Path.Combine("C:\This\Is", "\A\Pen.txt".TrimStart('/', '\\'));

// 多分 C:\This\Is\A\Pen.txt
```

なんということだぜ。おわり。
Laradockで動かすアプリケーションを切り替える方法(nginx)

# 概要
プログラミング歴浅いけど最新技術で環境構築も開発やってみたわ〜でも、Laradockよくわかってない、ミドルウェアよくわかってない、ちょっとの変更できそうにない人向け。
そういう人向けなのでタイトルは回りくどい書き方ですが要はドキュメントルートを変える方法。
#やってみる
`laradock/nginx/sites/default.conf`に` server_name`でgrepして下の方に`root /var/www/(指定ディレクトリ);`があるので指定ディレクトリを変えてあげる。
私は一つのlaradockを使い回してアプリケーションを動かす環境なのでlaradockというフォルダと同じ階層に複数のアプリケーションフォルダが並んでいます。
そのアプリケーションフォルダで動かしたいものを指定。
ラズパイでjohnny-fiveを使用したExpressなAPIをpm2で自動起動する場合の覚書

知っている人は疑いなく実現できるからかこれぞという情報があるようなないようなカンジで、知らない人はどうやるんだか見当がつきにくい。
johnny-five とか pm2 とかはじめてだし！ という私のような方向け。

pm2で自動化を試みて、以下のようなエラーが発生した場合、
（具体的には raspi-io を new したときに発生する）

```
 $ pm2 start app.js --name hoge
API server started on: 5001
fs.js:119
    throw err;
    ^

Error: EACCES: permission denied, open '/sys/class/leds/led0/trigger'
```

rootユーザのパスワードを設定して、suしてから同操作を行えばよいよ、という話。

##### root にパスワードを設定。
```
$ sudo passwd root 
```
##### su してrootになる。
```
$ su
パスワード:
```
##### pm2 で自動化設定。
```
pm2のインストール
# npm i -g pm2

起動
# /usr/local/lib/nodejs/node-v11.14.0-linux-armv7l/bin/pm2 start app.js --name hoge
# /usr/local/lib/nodejs/node-v11.14.0-linux-armv7l/bin/pm2 save
```

##### 再起動し、自動起動していることを確認。
おしまい。
#####おまけ、実行した環境。
```
$ uname -a
Linux raspberrypi02 4.14.98-v7+ #1200 SMP Tue Feb 12 20:27:48 GMT 2019 armv7l GNU/Linux

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 9.8 (stretch)
Release:	9.8
Codename:	stretch

$ node -v
v11.14.0

$ npm -v
6.9.0

$ pm2 -v
3.5.0
```

####2020/05/29追記：
#####Error: EACCES: permission denied, open '/root/.pm2/module_conf.json'
Raspi4を入手したので試してみたら、同じ要領で実行してエラーになった。

```
$ uname -a
Linux raspberrypi 5.4.42-v7l+ #1319 SMP Wed May 20 14:12:03 BST 2020 armv7l GNU/Linux

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 10 (buster)
Release:	10
Codename:	buster

$ node -v
v13.14.0

$ npm -v
6.13.4

$ pm2 -v
4.4.0
```

コマンドのオプションでユーザ指定して解消。

```
# pm2 start app.js --name hs-node1 --user root
# pm2 startup --user root
```

先に試した時は、オプション指定せずに実行して、次のサービスが作成された。
/etc/systemd/system/pm2-root.service

今回、同じコマンドを実行して、次のサービスが作成された。
/etc/systemd/system/pm2-pi.service

「--user root」を指定すると、「/etc/systemd/system/pm2-root.service」が作成される。
puts、print、pの違い【Ruby超入門】

**`puts`と`print`と`p`のメソッドはいずれも出力に使うのだが、微妙に挙動が違う。**

| メソッド | 出力後の改行 | 配列の表示 | 呼び出すメソッド | 戻り値 | 対象者 |
|:-:|:-:|:-:|:-:|:-:|:-:|
| puts | あり | 要素ごとに改行 | to_s | nil | 一般ユーザ |
| print  | なし | 改行しない | to_s | nil | 一般ユーザ |
| p | あり | 改行しない | inspect | 引数のオブジェクト | 開発者(デバック用) |

#puts
`puts`メソッドはオブジェクト出力後の末尾に改行が入る。

```ruby
puts 123
puts 'abc'
```

```:実行結果
123
abc
```

#print
`print`メソッドはオブジェクト出力後に改行を加えない。

```ruby
print 123
print 'abc'
```

```:実行結果
123abc
```

#p
`p`メソッドは主にデバック用で、オブジェクトと型表現も含めた形の文字列を出力し、末尾に改行が入る。
文字列を出力すると、その文字列がダブルクォートで囲まれている。

```ruby
p 123
p 'abc'
```

```:実行結果
123
"abc"
```

`\n`のようなエスケープ文字もそのまま出力される。

```ruby
p "abc\ndef"
```

```:実行結果
"abc\ndef"
```

#違い
**`puts`と`print`は改行するかしないかの違いとなる。**

`puts`と`p`はいずれも、オブジェクトの内容を文字列に変換するメソッドを内部的に呼び出している。
**しかし`inspect`を呼び出している`p`の方が開発者にとって役立つ情報を返すように実施されるので、デバック用として使われる。**

#参考書
* [プロを目指す人のためのRuby入門](https://www.amazon.co.jp/gp/product/4774193976/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4774193976&linkCode=as2&tag=ykms1230e-22&linkId=7d182a6724516a0f1a495c33599a4946)
* [ゼロからわかる Ruby 超入門 (かんたんIT基礎講座)](https://www.amazon.co.jp/gp/product/4297101238/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4297101238&linkCode=as2&tag=ykms1230e-22&linkId=16f1470f0d06b61a190643877fd54da0)
Rails 序盤シート

- 少しずつ更新します。

# RubyMineに `Version Control` パネルを出す

- `⌘ + 9` で出ます。

# `rails g` 時の自動生成を制御

```config/application.rb
class Application < Rails::Application
    config.load_defaults 5.2

    # 以下を追記
    config.generators do |g|
      # 「rails g」時の自動生成を制御
      g.assets false         # css,jsを生成しない
      g.helper false         # ヘルパーを生成しない
      g.test_framework false # テストファイルを生成しない
    end
  end
```

- テストファイルは後ほど作りますが、個人的に `rails g` 時には要らなかったので、こう書いています。

# コントローラー生成時にアクションも指定する

```
$ rails g controller books index edit show new
```

- 例として `books_controller` を生成し、同時に4つのアクションを指定しました。
- これでビューも一緒に作られます（ルーティングも記述されますが、それは生成後に手で直すことも多いですかね）

# モデル生成時に外部キーを指定する

- 例： `teams` モデル生成時に、 `name` カラムと `league_id （外部キー） ` を指定する。

```
$ rails g model team league:references name:string
```

# トップページのルーティング設定

- 例として `books_controller` の `index` アクションにマッピングします。
- `root` メソッドは、 `routes.rb` の最下部に記述します。

```config/routes.rb
Rails.application.routes.draw do
  resources :books

  (中略)

  root to: 'books#index'
end
```

# 参考
- [【Rails】generate コマンドで生成されるファイルをconfig.generatorsで設定する](https://remonote.jp/rails-config-generators)
- [RubyMine で Git を使う](https://qiita.com/Yukibou/items/cf9bc7d76a3133656c56)
- [Ruby on Railsでコントローラ作成時にviewファイルやrouteを一気に作成する方法](https://code-schools.com/railsgcontroller/)
- [Ruby on Rails 5 アプリケーションプログラミング](https://www.amazon.co.jp/Ruby-Rails-5%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/4774188832/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=Ruby+on+Rails+5%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0&qid=1555163469&s=books&sr=1-1)
【JavaScript】ユーザーエージェントの取得と変更

JavaScriptでは、``navigatorオブジェクトのuserAgentプロパティ``からユーザーエージェントが取得できます。

使用しているOSやブラウザの情報を取得できるので、環境ごとに違う内容を返したいときに利用できます！

>[フリー百科事典『ウィキペディア（Wikipedia）』〜ユーザーエージェント](https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88)

>[JavaScriptリファレンス〜navigator.userAgent](http://www.htmq.com/js/navigator_userAgent.shtml)

# コンソールで確認
コンソールで下記のコードを実行するだけです。

```
console.log(navigator.userAgent);
```
# サンプルコード
こちらもどうぞ。

```useragent_test.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>userAgentの表示</title>
</head>

<body>
  <p id="result"></p>

  <script>
    var userAgentResult = navigator.userAgent;
    document.getElementById("result").innerHTML = userAgentResult;
  </script>
</body>

</html>
```

# ユーザーエージェントの変更
ブラウザで変更可能です。
例えば、Mac上でWindowsの場合の動作を確認したいときに。（実機確認も必要ですが・・・）

## Chromeで変更する方法
1. デベロッパーツールを開く
2. 右上の``縦三点リーダー(Customize and control Dev Tools)``をクリック
3. ``More tools``を選択
4. ``Network conditions``を選択
5. ``User Agent``で``Select automatically``のチェックを外し、好みの「ブラウザ-OS」を選択

# 判定方法
``IndexOfメソッド``で地道に文字列を判定する。
しかし、ブラウザによる挙動の違いに注意。
>[MDN web docs〜User Agentを用いたブラウザーの判定
](https://developer.mozilla.org/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent)

プラグインがあれば入れておくと良さそうです。

>[UserAgentからOS/ブラウザなどの調べかたのまとめ](https://qiita.com/nightyknite/items/b2590a69f2e0135756dc)
fish shell環境下でMacのPHPバージョンを上げる

# やること

Macに標準インストールされているPHPではなくHomebrewでPHPをインストールして、標準ではなくbrew経由で入れたPHPを動かす。今回はPHP7.3を入れます。
fish shell環境下だと.bashrcや.bash_profileには書かないらしい。

# 前提

Homebrewインストール済み

# HomebrewでPHPをインストール

```sh
$ brew search php@7
$ brew install php@7.3
```

# PHPのバージョン確認

```sh
$ php -v
```

7.3じゃなくて標準インストールされている方のバージョンが表示される...:thinking:
パスを確認する。

```sh
$ pwd php
-> /usr/bin/php
```

# brewで入れた方を見るようにする。

fish_user_pathsを使う。[こっち](https://qiita.com/s-yoshida/items/98e115ddcc619fe95815)でも同じことやってました。

```sh
$ set -U fish_user_paths /usr/local/opt/php@7.3/bin/ $fish_user_paths
```

shellを再起動して

```sh
$ php -v
-> 7.3.x
```
Figmaで一番下のレイヤーを選択する方法

## Figmaで一番下のレイヤーを選択する方法
今はFigmaのデザイン仕様を元にクライアントを実装する作業をしています。

その中でFigmaで一番下のレイヤーを選択する方法を知ったところ、これが便利だったので紹介します。

commandを押しながらクリックすることで、一番下のレイヤーを選択することが出来ます。

便利ですので、ぜひ使ってみてください。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
AtCoder Beginner Contest 125 D問題 Flipping Signs pythonの解答例

# 本稿について
テスト投稿です。
AtCoder Beginner ContestではじめてD問題(Flipping Signs)が解けた記念でqiita初投稿。
（C問題？解けてませんが何か？）

## 問題
[こちら](https://atcoder.jp/contests/abc125/tasks/abc125_d)　を参照

$N$個の整数が並んでおり、順に $A_1, A_2, ... , A_N$ です。
あなたはこの整数列に対して次の操作を好きなだけ行うことができます。
操作:$ 1 ≤ i ≤ N − 1$を満たす整数 $i$ を選ぶ。$A_i$ と $A_{i+1}$ に $−1$を乗算する。
操作終了後の整数列を $B_1 ,B_2, ... , B_N$ とします。
$B_1+B_2+...+B_N$の最大値を求めてください。

## 解答例
```
import sys

N = int(sys.stdin.readline())
A = list(map(int, sys.stdin.readline().split()))

abstotal = 0
count_minus = 0
abs_A = []
for i in range(N):
    abstotal += abs(A[i])
    abs_A.append(abs(A[i]))
    if A[i] < 0:
        count_minus += 1

ans = abstotal
if count_minus % 2 == 1:
    ans = abstotal - 2 * min(abs_A)

print(ans)
```

## 説明
公式の解説にある「かっこいい解法」で解きました。
かんたんな例をいくつか考えると、負の値が偶数個か、奇数個かのみの場合分けになると推測できます。

#### 偶数個の時

* 全ての数を正数に変換可能  
    ⇒答え：(全ての数の絶対値の総和)

#### 奇数個の時

* 負数の任意の1つまで減らすことができる  
    ⇒答え：(全ての数の絶対値の総和) - 2 * (最小の絶対値)

## ほらね
簡単でしょう？

## 出典
https://atcoder.jp/contests/abc125/tasks/abc125_d
phpMyAdmin(nginx)に認証をつける with docker-compose

phpMyAdminに認証をつけたい！と思ったものの……

よく分からず力業でなんとかした記録。

誰かが「そんなんこうしたら一瞬じゃん？」って言ってくれることを希望。

■dockerに公式のphpMyAdminがあります
https://hub.docker.com/r/phpmyadmin/phpmyadmin/

### phpmyadminコンテナに入ります

`docker exec -it phpmyadmin sh`

いつもの癖で `bash` って打つと「そんなハイカラなものは知らない」と一蹴されます。

### htpasswdコマンドを使えるようにします

htpasswdコマンドは `not found` になります。Alpineという個人的に馴染みのないディストリビューションのため、htpasswdを入れるのにどうしたら良いか分からないので調べました。

`apk add apache2-utils`

### nginxの設定にBASIC認証を追記します

```
        location / {
            (以下 追記)
            auth_basic "Restricted";
            auth_basic_user_file /etc/nginx/.htpasswd;
        }
```

### .htpasswdファイルを作る

`htpasswd -c /etc/nginx/.htpasswd {アカウント}`

そしてパスワードを設定。

### イメージファイルを保存

`docker commit phpmyadmin phpmyadmin`

分かりにくいですが、左がコンテナ名で、右が保存するイメージ名です。イメージ名は `/` で区切るのが推奨されていますが、内部で使うだけなので省略。

### docker-compose.ymlを修正

```
  phpmyadmin:
    image: phpmyadmin
    # image: phpmyadmin/phpmyadmin
```

### そして docker-compose を落とし上げ

`docker-compose down && docker-compose up -d`

で認証がかかるようになります。
デジタルトランスフォーメーション(DX)について

CDP導入におけるボトルネックを理解するために重要そうな概念なのでまとめ

https://www.meti.go.jp/committee/kenkyukai/digital_transformation/pdf/001_haifu.pdf
こちらを元に考えてみる

## デジタルトランスフォーメーションとは
既存のビジネスから脱却し、新しいデジタル技術を活用することによって新たな価値を生み出していくこと

## 背景
新技術によるビジネス構築に積極的か否かで、ビジネス上の相乗効果が大きく変わる

## 問題
既存のビジネスが古い技術資産だけを用いたモデルに収まっている

## 原因
運用コスト(維持管理)が大部分を占めている

- 老朽化
- 複雑化
- ブラックボックス化

->現行モデルの改善・追加視点でのリソース融通に留まっていてDXの方向にシフトできていない

## 解決ステップ
システムの再構築を段階的に行う

- 情報資産の現状を分析する
- 情報資産の現状を評価する
- 情報資産の現状を仕分けする
- 戦略的なシステム刷新を推進する

## 雑感
CDPはDXを推進するためのものである一方、まだDX推進の地盤が固まっていないことがボトルネックになっていそう
DX推進の地盤を固めるという部分からソリューションの道すじを描いていくアプローチが現状のニーズとなりそうだが、大変そう
zsh導入までの流れ

# 概要
AWS ECS Linuxインスタンスにzshいれるまでの流れをメモ書き

# 作業
### バージョン確認
```
zsh --version
```
出て来ればインストール済み

### インストール
```
sudo yum -y install zsh

# 現在設定しているシェルの確認
$ echo $SHELL
/bin/bash

# 使用可能なシェルの確認
$ cat /etc/shells
/bin/sh
/bin/bash
/sbin/nologin
/bin/dash
/usr/bin/tmux
/bin/zsh
```

### シェル設定
```
chsh -s /bin/zsh
```

# 参考
https://qiita.com/abgata20000/items/992fb14686221c326abe
Minecraft BE ScriptingAPI 第2回講座

# 【Minecraft BE】の ScriptingAPI開発講座(2)

まだ(1)を見ていない方は先に[こちら](https://qiita.com/Button/items/c0c0ed7c4d8b59d085f4)をご覧ください。

## 注意
ScriptingAPI は現段階でWindows10にしか対応していません。
Android,iOS,XboxOne,Switchでは開発できません。(AndroidはBlockLauncherという外部ツールを使えばできます)

## 開発環境
windows10 Minecraft ver 1.11.1

## 敵を攻撃したときにいろいろなデータを取得する
ファイル構成は前回と同じで、今回はserver.jsに書き込んでいきます。

```JavaScript:server.js
const ServerSystem = server.registerSystem(0, 0);
//おまじない

ServerSystem.initialize = function () {
    this.listenForEvent("minecraft:player_attacked_entity", (eventData) => this.attackEntity(eventData));
    //minecraft:player_attacked_entityで攻撃したplayerと攻撃をうけたentityを取得可能
};

ServerSystem.attackEntity = function (eventData) {
    var TestData = eventData.attacked_entity.__identifier__;
    //TestDataに攻撃したentityのidntifierを入れる
    this.broadcastEvent("minecraft:display_chat_event", `攻撃したmobは、§a${TestData}§rです。`);
    //チャット欄に出力
};
```
#### 実行結果
![bandicam 2019-04-27 23-18-12-656.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266165/65a88d24-265a-fc8c-27ca-b86b299d6c22.jpeg)

#### 解説
新しく`minecraft:player_attacked_entity`が出てきました。
これはそのまんまの意味、攻撃したentityを取得したりできます。

`attacked_entity.__identifier__`のほかにも、
`attacked_entity.__type__`
`attacked_entity.id`
`player.__identifier__`
`player.__type__`
`player.id`
があります。

実行結果は自分で見てみましょう。

次回は何をしようかな...( 'ω')

[次回](https://qiita.com/Button/items/c47b6bbadcf24d98caa8)
t-SNE-CUDAをCUDA 10.1, Ubuntu  18.04でビルド

[tsne-cudaの手順](https://github.com/CannyLab/tsne-cuda/wiki/Installation#building-from-source) に従ってすすめる。

## cmake

cmakeの途中でエラー。Web検索の末に最新版のcmake 3.14.3をインストールすると先に進んだ。
cmakeの途中でさらに MKL が見つからないという旨のエラー。下のようにMKLの場所を指定すると通った。

```
$ cmake .. -DBUILD_PYTHON=TRUE -DMKL_INCLUDE_DIR=/usr/include/x86_64-linux-gnu -DMKL_LIBRARIES=/usr/lib/x86_64-linux-gnu/openblas/libblas.so
```

## make

makeの途中で下のエラーが出た：

```
$ make
[  9%] Built target faiss
[ 11%] Built target glog
[ 12%] Built target gtest
[ 13%] Building NVCC (Device) object CMakeFiles/tsnecuda.dir/third_party/faiss/gpu/tsnecuda_generated_GpuIndexFlat.cu.o
/opt/tsne-cuda/third_party/faiss/gpu/impl/../utils/Tensor.cuh(362): error: type name is not allowed

/opt/tsne-cuda/third_party/faiss/gpu/impl/../utils/Tensor.cuh(362): error: expected an expression

2 errors detected in the compilation of "/tmp/tmpxft_00003467_00000000-4_GpuIndexFlat.cpp4.ii".
CMake Error at tsnecuda_generated_GpuIndexFlat.cu.o.cmake:275 (message):
  Error generating file
  /opt/tsne-cuda/build/CMakeFiles/tsnecuda.dir/third_party/faiss/gpu/./tsnecuda_generated_GpuIndexFlat.cu.o
```

下のように一行手を入れるとビルドが通った：

```
$ cd third_party/faiss
$ git diff
diff --git a/gpu/utils/Tensor.cuh b/gpu/utils/Tensor.cuh
index f925a37..2ddaba6 100644
--- a/gpu/utils/Tensor.cuh
+++ b/gpu/utils/Tensor.cuh
@@ -359,7 +359,7 @@ bool canUseIndexType() {
 
 template <typename IndexType, typename T, typename... U>
 bool canUseIndexType(const T& arg, const U&... args) {
-  return arg.canUseIndexType<IndexType>() &&
+  return arg.canUseIndexType() &&
     canUseIndexType(args...);
 }
```

開発元に pull-request を出した https://github.com/DavidMChan/faiss/pull/1
PDF にコマンドベースでスタンプ (注釈) を付ける

仕事で情報の共有／提供をする際、PDF に Confidential 的なスタンプをつけなければいけないのですが、それをいちいち GUI でやるのが面倒だったので、何か良い方法がないか探してみたところ、[Coherent PDF](http://community.coherentpdf.com/) なるツールでできました。

## 試した環境

* Windows 7
* [Coherent PDF](http://community.coherentpdf.com/)

## 準備したもの

* スタンプを貼るドキュメント (in.pdf)
* 貼り付けるスタンプ (stamp.pdf)

## やり方

### ツールのダウンロード

まず、[Coherent PDF のバイナリ](https://github.com/coherentgraphics/cpdf-binaries)をダウンロードしておきます。インストールは不要で、Windows、Linux、Mac それぞれに対応したバイナリが配布されています。

また、同じフォルダ配下に in.pdf と stamp.pdf を置いておきます。

### 実行

コマンドプロンプトにて、下記のように実行します。

```
cpdf.exe -stamp-on stamp.pdf in.pdf -o out.pdf
```

[マニュアル](https://www.coherentpdf.com/cpdfmanual/indexch8.html#x11-470008.1)をみていただければ分かると思いますが、ポジションや貼り付けるページなどを指定することができます。

最初のページだけにスタンプを貼りたい場合は、下記のように実行すればよいです。

```
cpdf.exe -stamp-on stamp.pdf in.pdf 1 -o out.pdf
```

ポジションなんかも少し調整ができます。下にズラす場合は下記のように実行すればよい、かな？

```
cpdf.exe -stamp-on stamp.pdf -pos-left "0 -50" in.pdf 1 -o out.pdf
```

## その他

今回の Coherent PDF ですが、[マニュアル](https://www.coherentpdf.com/cpdfmanual/index.html)にあるように、スタンプを押す以外にも、分割や結合はもちろん様々な処理を行うことができるツールです。2017 年から更新が無いようですが、とりあえずわたしの環境ではきちんと動作しました。

最近は RPA など自動化が流行っていますので、こういうツールの開発／利用がどんどん増えるといいですね:blush:
GASでGoogle Formへの回答をGoogle Documentに記録していく話


　はい、記事第二弾です。記録も兼ねて。好きなように改造してください。フォームからスプレッドシートを経由してドキュメントに入力するやつです。

```gs:form2doc.gs
function form2doc() {
  //スプレッドシートを開く
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
  //フォームのシート
  var sheet = spreadSheet.getActiveSheet();
  //最終行数の取得
  var lastRow = sheet.getLastRow();
  
  //ドキュメントを開く
  var document = DocumentApp.openById('ドキュメントのID');
  //ドキュメントの本文を取得
  var txt = document.getBody().getText();
 
  //セルからフォームに入力されたデータを取得
  var example = sheet.getRange(lastRow, 1).getValue(),

  //ドキュメントに書き込む
  document.setText([[txt,example]]);
}
```

　簡単なものです。でもなぜかなかったので投稿してみたり。
　今回のオススメはフォームからスプレッドシートを作成して、既存のドキュメントに書き込む方法です。
　注意点としては、.setText(xxx)をするとxxxで今までの文章全てが上書きされてしまうところですね。なので毎回本文を取得して、それと入力されたデータを合わせて上書きするという力技でどうにかしてます。故にデータが増えると動作が重くなります。多分。
Markdown記法の整理

初投稿なので、次回以降投稿するにあたってドットインストールを見つつ
Markdown記法について改めてインプットしました。

##使用エディタ
Atom


##見出しの表現について

　行頭に`#`または改行して`=`を入れる。
　`#`一つでh1タグ、h6タグくらいまでなら記載可能

####記載例(h1は以下のように記載できます)
```
# test
```
```
test
=
```
```
## h2
### h3
#### h4
```

##パラグラフ
空の行を入れるとパラグラフとして判定される

##引用文
`>`を行頭に入れると引用文にできる

####表示例
>test

####記載例
```
>test
```

##区切り線
以下のように記載すると区切り線が描ける
ハイフンを使うときは空の行を入れないと見出しとして判定されることに注意

```
***

---
```


##強調する表現

####表示例
`test`
*test*
_test_
**test**


####記載例
```
`test`
*test*
_test_
**test**
```

##リスト表示
四則演算の記号を使って箇条書きすると表現できます。
(追記)/は使えませんでした。。

####記載例
```
+ test
- test
* test
```


また、数字の後に記載していくと、数字付きのリストになります。


1. test
2. test2
3. test3


##リンクの表現
`<>`で囲むとリンクになります。
`[]`で囲った後に丸括弧`()`で囲ってあげると
`[]`で囲った文言に`()`内に記載したリンクがハイパーリンクとして付きます。

<https://www.google.com>

[Google](https://www.google.com "Google it!")

##最後に
結論、投稿画面の右側に基本的な書き方載っているのでそちらを参考にねと
元も子もない内容の初投稿でした。。。。。。

####参考
ドットインストール「Markdown記法入門」
https://dotinstall.com/lessons/basic_markdown_v2
VSCodeをインストールする方法

こんにちは、アキトです。

この記事では、HTMLやCSSを書くためにとても便利なツールである「VSCode」をインストールする方法を紹介します。
おすすめの拡張機能やカスタマイズ方法もお伝えしますので、ぜひご参考にしていただけたらと思います。

##　インストールする

以下のリンクからダウンロードします。

[VSCodeダウンロードページ](https://code.visualstudio.com/)

<img width="795" alt="スクリーンショット 2019-04-27 23.00.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349810/06d3e333-edbc-3c2e-68ac-940d3a3d6b6a.png">


##　起動する

以下の画像と同じようになればOKです。

<img width="611" alt="スクリーンショット 2019-04-27 23.05.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349810/9748342e-ada8-f2bd-9e96-23a1221ec572.png">


VSCodeのインストール方法は、以上になります。
Semaphore Multithreaded Shared Resource

```
var sharedResource = [String]()

let semaphore = DispatchSemaphore(value: 0)

let dispatchQueue = DispatchQueue.global(qos: .background)
dispatchQueue.async {
    self.fetchImage { (_, _) in 
       print("Finished fetching image 1")
       self.sharedResoure.append("1")
       semaphore.signal()
    }
    semaphore.wait()
     
    self.fetchImage { (_, _) in 
       print("Finished fetching image 2")
       self.sharedResoure.append("1")
       semaphore.signal()
    }
    semaphore.wait()

    self.fetchImage { (_, _) in 
       print("Finished fetching image 3")
       self.sharedResoure.append("1")
       semaphore.signal()
    }
    semaphore.wait()

    print("Start fetching images")
}
```

result:
Start fetching images
Finished fetching image 1
Finished fetching image 2
Finished fetching image 3
管理者ユーザーの作成

# 概要
AWS EC2等でインスタンスを立ち上げた際に、ec2-userで立ち上がるがセキュリティ面より別の管理者ユーザーを作成することをお勧めします。

# 手順

### ユーザー作成
```
$ useradd -m <ユーザ名>

# 確認する
$ ls -l /home/
```

### パスワード設定
```
$ passwd <ユーザ名>
```

### 権限の付与
```
$ visudo

# 以下を追記する
<ユーザ名> ALL=(ALL) ALL

# 確認する
$ view /etc/sudoers
```

### ssh-keyをコピーする
```
$ cp -arp /home/ec2-user/.ssh /home/<ユーザ名>/
$ sudo chown -R <ユーザ名> /home/<ユーザ名>/.ssh
```

# その他
ec2-userの権限を剥奪する場合は以下のファイルを編集する

```
$ visudo -f /etc/sudoers.d/cloud-init
```

# 参考
以下の記事を参考にさせていただきました。
ありがとうございます。
https://eng-entrance.com/linux-user-add
https://saku.io/first-step-on-ec2/
Python3 初心者　辞書

#辞書
辞書はリストと同様ミュータブルである。要素の追加、削除、変換などができる。ただし大きく変わっている点がある。それはオフセットがキーになると言うところである。キーとは一つ一つの要素に名前をつけると言うことです。しかし帰ってくるねはランダムである。
例えばリストでは

```py
['Lou', '080-1234-5678', 'example.com']
```

と言うリストがあったとしよう。これは見ただけでわかるかもしれないが、その要素が確実に名前、電話番号、メールアドレスだとは確証できない。ここで辞書を使おう。

```py
{'name': 'Lou', 'adress': '080-1234-5678', 'mailadress': 'example.com'}
```

こうすれば何が何かわかるでしょ！！これが辞書の強みです！！もっと具体的に辞書の使い方について説明していきます。ちなみに辞書の作り方は先ほどの通り{}で要素をデータ構造にまとめることが出来ます。
##　辞書の表現方法

```py
key: value
#まとめて
items
```

## dict()による変換
辞書は英語でdictionaryです。だから略してdict()って自分は考えてます笑笑
dict()関数を使えば先頭をkey、後方をvalueとして考えて変換してくれます。

```py
gakki = [['g', 'guitar'], ['p', 'piano'], ['d', 'dram']]
dict(gakki)
{'p': 'piano', 'g': 'guitar', 'd': 'dram'}
```

と言う風に変換できます。他にも

```py
#２字の文字列のリスト
gakki=('gguitar', 'ppiano', 'ddram')
dict(gakki)
{'g': 'guitar', 'd': 'dram', 'p': 'piano'}
#他にも２文の文字列のタプル２要素のリストのタプルがある。
```

##[key]で要素の追加や変換を行う

```py
my_introduce = {'name': 'Lou', 'adress': '080-1234-5678', 'mailadress': 'example.com'}
my_introduce 
{'name': 'Lou', 'adress': '080-1234-5678', 'mailadress': 'example.com'}
#あ、そういえばなんか忘れてたなー。あー好きな食べ物だ！
my_introduce['food'] = 'Sushi'
my_introduce
{'food': 'Sushi', 'adress': '080-1234-5678', 'name': 'Lou', 'mailadress': 'example.com'}
```

今何をしたかわかりましたか！？my_introduceに[追加したいものの（key）]=追加したい（value）
で完了です！！！また変換も同様でmy_introduce[変更したい（key）]=変換したいもの（value）でできます！！
また、辞書名[key]で要素を取得しましょう

```py
my_introduce['name']
'Lou'
```


## update()による辞書の結合

```py
my_introduce2={'hobby': 'Qiita', 'sport': 'tennis'}
my_introduce.update(my_introduce2)
my_introduce
{'hobby': 'Qiita', 'adress': '080-1234-5678', 'food': 'Sushi', 'mailadress': 'example.com', 'sport': 'tennis'}
```

## delによる指定したキーが持っている要素の削除

```py
del my_introduce['sport']
{'hobby': 'Qiita', 'adress': '080-1234-5678', 'food': 'Sushi', 'mailadress': 'example.com'}
```

clear()を使えば全ての要素を削除してしまいますので慎重に考えて実行してください！！！

## inを使ったキーの有無のテスト
やっぱりユーザーがnameに要素を入れてなかったら気になっちゃうよね？！だからinを使って確認してみよう

```py
'hobby' in my_introduce
True
'sport' in my_introduce
False
```

##取得シリーズ
取得するものの結果は全てタプルである。しかしここで問題がある。返ってくるものは関数dict_key()と言う関数を含むタプルができる。詳細はkeys()による全てのキーの取得の時に言いますね！
###keys()による全てのキーの取得

```py
my_introduce.keys()
dict_keys(['hobby', 'adress', 'food', 'mailadress'])
```

これはただ結果を見たいだけならこのままでいいが色々としたいならlist()を使えば本当のリストに変身できる。

```py
list(my_introduce.keys())
['hobby', 'adress', 'food', 'mailadress']
```

と言う風にできる。このようにしていけば
value()は全ての要素を、items()は全てのキーと要素を取り出してくれる。
### items()を使ってみよう！！

```py
list(my_introduce.items())
[('hobby', 'Qiita'), ('adress', '080-1234-5678'), ('food', 'Sushi'), ('mailadress', 'example.com')]
```

個々のキーと値のペアは（）のなかにタプル形式に返される。
vmwareのディスク増設

#概要
vmwareのubuntuでディスク増設が必要になったので、方法をメモ
通常はlvm推奨なんだろうが、vmwareではgpartedがあればまあ、簡単に
増設できることがわかった。

なかなか、この方法が紹介されていないので投稿

#増設の方法
##vmwareでのディスクの増設
vmwareは私の場合は複数のファイルで１つのディスクを構成している。
vmwareの「管理」->「仮想マシン設定」->「ハードディスクを選択」->「展開」でディスク増設すると、ubuntuを起動してgpartedで見ると

/dev/sda1  swap 未使用

みたいな感じで未使用の部分が増える状態になる

##ubuntu側の作業
まあ、この状態ですでにubuntu側でgpartedを見ている状態なのだが
swapが邪魔である。
このときよく考えずに未使用の部分を/homeに割り当てるようなことをしていたのだが、
これがめんどくさいのである。
swapを未使用にして、/dev/sda1をresizeすればいいことに気がついた。

なんだ、lvmは必要ないんか！よかったよかった。
だって、system-config-lvmが全然apt-getできないんですよねえ。

#swapの設定
今後のこともあるので、/var/swap/swap0というファイルでswapを設定することに
変更して無事運用

#注意点
gpartedで構成を変えるというのは、起動できなくなるという危険性が高い。
バックアップを強くおすすめする。実は、私もたまたま復旧したが、起動できないという
状態に今まで陥っていたが、なんとか復旧できたという状態である。
ロード開始からDOMContentLoadedまでとパーサー

HTMLに書いたJavaScript実行のタイミングを改めて見返していたら、いろいろと発見がありました。

## TL; DR

* `DOMContentLoaded`はパーサーのイベント
* `<script>`要素には、表に現れない内部属性がある
* タイマーで`DOMContentLoaded`より前に割り込める

## `DOMContentLoaded`は何のイベント？

よくJavaScriptの実行タイミングとして使われる`DOMContentLoaded`ですが、厳密に言えば何が起きているかをご存知でしょうか。実は…

> Fired at the `Document` once the parser has finished （[HTML LS](https://html.spec.whatwg.org/multipage/indices.html#event-domcontentloaded)より）

と、**HTMLのパーサーが完了した**タイミングで起きるイベントなのです。

### パーサーとJavaScript

「パースだけならすぐ終わってしまうんじゃない？」というのが正直な感想かと思いますが、HTMLのパーサーは単純にHTMLだけの処理をしているわけではありません。

さらに厳密な話は後からしていきますが、文書の途中に書いた`<script>`がそれ以前のDOMだけ読める、というように、HTML内にあるJavaScriptは、HTMLのパースを中断することがあります。

もっと強烈なものとして、`document.write()`があります。これは**HTMLとして出来上がっていない断片**（開きタグだけとか、コメントに入る`<!--`だけとか）すら出力できるというように、`document.write()`の結果は文書全体のパーサに影響することとなります（このため、`<script>`以降のパースは、JavaScriptを実行し終えてからでないと行えません）。

## `<script>`要素の内部属性

HTMLやJavaScript処理の過程で、`<script>`にはいくつかのフラグが付けられます。

* `already started`…実行済みかどうか
* `parser-inserted`…`Document`のパーサーが生成した（HTMLに書いてあった、もしくは`document.write`で出力した）か
* `non-blocking`…スクリプトのロードがドキュメントをブロックしないか（基本的に、`parser-inserted`の場合にfalseとなります）。
 * なお、`async`とは別管理となっていて、（あとから`async`を付け外ししたときに実行漏れになるのを防ぐためなのか、理由ははっきりわかりませんが）`async`を付けたスクリプトに対しては`non-blocking`はfalseとなります。

なお、以下の解説ではできるだけふつうのHTMLに即した形にしてありますが、動的に`<script>`要素を作り変えた場合など、特殊な場合にはこれらのフラグで考える必要があります。

### 状況に応じた挙動

`<script>`要素の状況に応じて、それがどのように実行されるか区分していきます。なお、煩雑になるのを避けるため、`type="module"`の場合の挙動については省略します。

#### HTMLに書いてあった、あるいは`document.write()`で生成した場合

* `src`あり、`defer`あり、`async`なしの場合…パーサーの完了時に、HTMLにある順序に従って実行される（実行が終わるまでパーサーは完了しません）
* `src`あり、`defer`なし、`async`なしの場合…JavaScriptのロード完了までパーサーを止めて、その場で実行します。 ※
* `src`あり、`async`ありの場合…読み込みが終わり次第、文書での順番に関係なく実行される。
* `src`なし（直書き）の場合…パーサーを止めて、その場で実行します。 ※

※: 「その場で実行する」ものの場合、これ以前に読み込まれたスタイルシートがあると、その読み込みを待つこととなります。本来、スタイルシートの読み込みはパーサーをブロックしない（`DOMContentLoaded`に**影響しない**（[MDN](https://developer.mozilla.org/ja/docs/Web/Events/DOMContentLoaded)））のですが、同期的に実行されるスクリプトが1つでもあると、「スクリプトがパーサーをブロックする」→「スタイルシートがスクリプトをブロックする（[HTML LS](https://html.spec.whatwg.org/multipage/semantics.html#interactions-of-styling-and-scripting)）」の2段構成で、スタイルシートも`DOMContentLoaded`前のロードが強制される形となります。

#### DOMで作った場合

もちろん、DOMと言っても`document.write()`は除きます。

* `src`ありの場合…読み込みが終わり次第、文書での順番に関係なく実行される（`async`がある場合と同じ）。
* `src`なしの場合…ドキュメントツリーへの挿入と同時に、同期的に実行される。

## `DOMContentLoaded`前に処理を割り込ませる

`defer`となったスクリプトがある場合、それが読み込まれるまで`DOMContentLoaded`が発生しませんので、ファーストビューが`DOMContentLoaded`前に発生することもあります。そのような状況で「仮想DOMを出来るだけ早くマウントしたい」という場合に、挿入する場所の直後、あるいは`</body>`直前に`<script>`を書くことで、そのタイミングで実行させるという方法があります。

ページの上に入れた場合にも、タイマー系は`DOMContentLoaded`と関係なく動作しますので、`requestAnimationFrame`でループさせて、目的のエレメントを検出する、なんていうことをやってみてもいいかもしれません。

## 参照

* [WHATWG HTML Standard § 4.12.1.1 Processing Model](https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model)
macでVS CodeとDjangoを使って「Hello Django!」を表示させてみた

#  はじめに
Pythonを勉強するためにWebアプリを作ろうと思い立ちました。
その際の作成方法を残しておきます。
補足：作成途中で、VS CodeのDjangoチュートリアルを見つけたので、途中からそのチュートリアルに沿った形になっています。

# 作った環境
* MacBook Air(mac OS Mojave)
* VS Code 1.29.1(インストール済み)
* Python 3.7.3(インストール済み)

# 作成手順
## 環境準備
1. Djangoをインストールします。
pipenvが入っていなければ先にinstallしておきます。
```brew install pipenv```
```pipenv install django```

2. 次に、適当なプロジェクトを作り、そのフォルダ内でPythonの仮想環境を作成します。
```python3 -m venv env```

3. ここまで来たら、一旦VS Codeを立ち上げます。
フォルダーオープンにて、先ほど作った適当なプロジェクトのフォルダを開きます。

4. ⇧⌘P(shift + メタ + P)を押して、"Python Select Interpreter"を選択します。
その後、先ほど作ったPythonの仮想環境を選びます。
(./envもしくは.\envで始まる環境です)

5. VS Codeの左下が、作成した仮想環境となっていることを確認します。
(私の環境だとPython 3.7.3 64bit ('env': venv)となっていました)

6. ターミナル上で、作成した仮想環境をアクティベートします。
```source env/bin/activate```

## Webプロジェクト作成
1. VS Code上でDjango Projectを作成します。  
```django-admin startproject web_project .```
補足：django-adminがcommand not foundとなる場合があります。
その場合、以下コマンドを実行してsite-packagesがある場所を探してください。
```python -m site```
そのフォルダ内(site-packages/django/bin/)にdjango-admin.pyがあります。

2. VS Codeのターミナル上で、2で作成したフォルダ内に移動し、以下コマンドを実行します。
```python manage.py runserver```

3. ブラウザ上で「http: //127.0.0.1:8000/」にアクセスします。
ロケットで飛んでいく画面が表示されます。

## Hello, Django!を表示
1. helloフォルダ以下のviews.pyを以下コードに修正します。

```python
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")
```  
  
2. helloフォルダにurls.pyを作成し、以下コードを記載します。  

```python
from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]
```  

3. web_projectフォルダのurls.pyを以下のように修正します。  

```python
from django.contrlib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
]
```  

4. VS Code上で以下コマンドを実行し、ブラウザ上で「http: //127.0.0.1:8000/」にアクセスします。

「Hello, Django!」が表示されます。
```python manage.py runserver```

# 参照
[https://code.visualstudio.com/docs/python/tutorial-django:title]
C++/OpenCVでスプラトゥーン2の戦況を可視化する索敵補助ツール作ってみた


スプラトゥーンの戦況をモニタに出力するプログラムを書きました


**・敵の生存秒数を数値/ゲージで表示、デス回数のカウント表示**
**・味方、敵のデス時にSEで通知**
というシロモノプレイヤーの人数状況をプログラムに補助させるというシロモノです


[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/A37ryRYBSU8/0.jpg)](https://www.youtube.com/watch?v=A37ryRYBSU8)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/fBe9zbTjsoQ/0.jpg)](https://www.youtube.com/watch?v=fBe9zbTjsoQ)

【仕組み】
まず、スプラトゥーン2ではゲーム中、画面上に**「イカアイコン」**なる　
敵、味方合計8人の**ブキの種類、生存してるか、SPが溜まっているかどうか**
という3つの情報が表示されています。

プレイヤーはこの情報から立ち回りを判断するわけですが
しかしキャラコントロールしながら「常に」その情報にまで目を配らせることは至難なので
そこから分かる情報をプログラムに保持させウィンドウに表示させようという発想です。

キャプチャボードからのゲーム画面のピクセルデータからOpenCVで画像認識を行い、イカアイコン情報を取得します。

OpenCVの関数で直接キャプチャーボードの映像を取ることも可能ですが、
録画ソフトと並列できなくなるので(プレイ動画の録画もしたい)、
**OBSSutdioというソフトで録画しながらゲーム画面のフルスクリーン表示をさせ、それをスクリーンキャプチャでプログラムに取得させる**という
手段を取りました。

WINAPIで1/60秒毎にでスクリーンキャプチャ行い、OBSstudioで表示された画像データを取得します。

**あとは、ブキアイコンの認識をどのような方法で行うか？です**

このゲーム、戦況に応じて「イカアイコン」のサイズと位置がアニメーションで変化してしまうのです。
これがopencvで画像認識する上で、とにかく邪魔なんです。常に位置を固定してくれてれば処理も楽なんですけどね。

**それらの問題を「ラベリング」と「テンプレートマッチング」で解決しました。**

テンプレートマッチングについてですが
用意するテンプレート画像は**デスを表す画像の1枚だけ**にしました。
**このゲームのブキは約127種類以上存在し、それぞれのアイコン画像を用意などやってられません。**
またOpenCVのテンプレートマッチングではテンプレートにアルファ値が使えません。(＝矩形領域の検出しかできない)

**「デス状態のイカアイコン」と「それ以外のイカアイコン」という扱いで処理していきます。**


◆解説
イカアイコンの並びの下部にあるボーダーラインを利用します。
![0.png](https://qiita-image-store.s3.amazonaws.com/0/295263/7dc9f147-65b3-b8ab-94fd-2a4dffaed42c.png)
<br><br><br><br><br>


まず、画面上部のイカアイコンを切り取り、さらにそれを味方アイコン領域、敵アイコン領域、下部のボーダーラインの３つに切り取ります。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/295263/997ca6e2-d8fc-b696-5e9e-e29ac1b49a5a.png)

↓
切り取った味方/敵のイカアイコン画像から、**cv::inRange()**関数でデス状態を表すグレーのバツマークの色のピクセルのみを抽出

![2.png](https://qiita-image-store.s3.amazonaws.com/0/295263/a576d319-d7ac-1ab1-2b32-feb576cc2994.png)


↓
ここでテンプレートマッチング
![3.png](https://qiita-image-store.s3.amazonaws.com/0/295263/9b3f8499-1abf-121d-72d7-0be46ce46a56.png)
**とりあえずこれでマッチ回数から８人中何人デスしているか検出できました。**
しかしこれでは誰がデスなのかはわからない状態です。
それと、マッチしたそのxy座標(緑のラインで囲われた部分の中心)を取得しておきます。
↓
ここで、最初に切り取った3つのうちのボーダーライン部分画像を利用することになります
![bod1.png](https://qiita-image-store.s3.amazonaws.com/0/295263/8fa0cf09-bc97-bc8e-7891-72fb44cd48dd.png)

まず、ラベリングの前処理をします。
デス状態を表すグレーの罰点印の色を**cv::inRange()**でマスクし黒(0,0,0)にします。
もう一度**cv::inRange()**でボーダ部分の黒検出し黒とそれ以外の色分けたマスクゲット。
![bod2.png](https://qiita-image-store.s3.amazonaws.com/0/295263/ce042105-3929-6f02-4da9-f1e516286853.png)

↓

ラベリングを実行します。幅と高さのしきい値を決めた上で
白ピクセルを連続している領域のバウンディングボックス(位置となるxy座標、幅、高さ)を取得します。
結果が緑色で囲われた領域です。見事に生存しているプレイヤーのイカアイコンのみのバウンディングボックスが取得でき、
**テンプレートマッチングで取得した罰点印のバウンディングボックスと合わせて、
プレイヤー8人のイカアイコン位置が取得できました。**
![dob3.png](https://qiita-image-store.s3.amazonaws.com/0/295263/cf022a79-17ee-0187-db89-5a6f90e0fc1f.png)
↓
あとは、8人分のバウンディングボックスの**x位置座標で昇順ソートを掛けます。**
ソートの順序に対応するようにプレイヤー情報クラスを配列変数に格納すれば、
これで誰が生存していてデスしているのかが把握できます。

あとは以上の処理を1/60秒毎に繰り返し、前フレームのアイコン状態と比較してデスプレイヤーが増えた時に効果音を鳴らす処理するだけです。
WINAPIでは複数の効果音を同時に再生できないらしいので、HSPでウィンドウメッセージ受け取ったら効果音鳴らすアプリを数十行で書いて、
C++側ではデス検知したときはそのHSPで作ったアプリにsendmessageでユーザーアプリを送るようにしました。

**ガチマで何度か使ってみた所、デス通知よりも敵が復活した時に効果音通知のほうが実践では有用かも**

githubにソースコード載せました
https://github.com/kazumax75/opencv_base_GUI/
プログラミング学習記録70〜やる気〜

##今日やったこと
- Progate JavaScript3そのまま復習

ここ１週間ぐらいモチベーションに困っています。
つい1週間前まではバリバリやれていたのに不思議です。

今日はProgateでJavaScript３をやりました。
関数の基本を復習しました。

Progate JavaScript3の最後の総合演習に１〜３の内容が全て詰まっています。
なので、この最後の演習が理解できれば、JavaScript１〜３は理解したと言ってもいいでしょう。

モチベーションが全く戻らないので、また自分会議をして具体的に進むべき道を確認する必要がありそうです。

目標とする成果物も決めた方がいいのかもしれません。

おわり
金融のための量子アニーリングことはじめ1  |  D-wave Leap導入編

#はじめに

某社でクオンツアナリストとして働いておりますhalと申します。
本記事は自分の勉強も兼ねて、金融実務者の方向けに典型的なポートフォリオ最適化を通じて、
"量子アニーリング"の紹介&デモンストレーションをしていきます。
pythonの導入されたPCがあればどなたでも無料で試せるので、興味がある方は実際に動かしてみてください。

#D-Wave Leap 

https://www.dwavesys.com/take-leap
カナダのD-Wave社が提供している量子アニーリングのサービスです。
2019/3/26にようやく北米以外でも解禁となり、日本からでも利用できるようになりました。
登録するだけで、無料で1分間量子コンピュータを利用できます。(GitHubアカウントを連携させれば毎月1分間利用できます)
有料プランも用意されていて1時間あたり＄2000ほどで購入できるようです(高い...)
まぁ本体を購入すると$15Mくらいらしいので妥当ではあるのでしょうか

さて今回はこちらのサービスを利用していききます。
上記のアドレスから簡単にSign upできます。 
動作のイメージなどはマイページのResourcesからチュートリアルが見れるので、そちらも参考にすると良いかと思います。

##D-Wave Oceanの導入

Leapにはpythonから簡単に利用する為のD-Wave OceanというSDK(ソフトウェア開発キット)が配信されているので、今回はこれを利用していきます。

pip を使用すれば以下のコマンドでインストールできます。
(公式では仮想環境にインストールすることが推奨されていますが、わからなければスルーで大丈夫です)

```bash
pip install dwave-ocean-sdk
```


インストール後自分のアカウントを利用できるように設定をしていきます。
設定には自分のアカウントのAPIトークンとAPIエンドポイントが必要です。

###APIトークン

マイページのDashboardから取得できます。(赤で囲ってある箇所です)

<img width="800" alt="API_Token.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402775/2c76d8c4-9d4d-550c-ad11-52f52de5bfbd.png">

###APIエンドポイント

Dashboard の下部に表示されています。

<img width="800" alt="API_end_point.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402775/2cf70e6a-c9d9-35e4-39d3-c9d1977ad987.png">

###設定の登録

ターミナルから`dwave config create`を実行し以下のように入力します。

```shell
Configuration file not found; the default location is: #############
Confirm configuration file path (editable):
Profile (create new): prod
API endpoint URL (editable): 取得したAPIエンドポイント
Authentication token (editable): 取得したAPIトークン
Client class (qpu or sw): qpu
Solver (can be left blank): {"qpu": true}
Proxy URL (can be left blank):
Configuration saved.
```

実行後`dwave solovers`でエラーが発生しなければ成功です!

##試しに動かしてみる

```python:leap_test.py
from dwave.system.samplers import DWaveSampler
from dwave.system.composites import EmbeddingComposite

sampler = EmbeddingComposite(DWaveSampler())
response = sampler.sample_ising({'a': -0.5, 'b': 1.0}, {('a', 'b'): -1})
print(response)
```

以下のような結果が帰ってきたら成功

| a | b | energy | num_oc. | chain_. |
|:-:|:-:|:-:     |:-:      |:-:      |
| -1| -1| -1.5   | 1       | 0.0     |

#実際にポートフォリオ最適化を解いてみる

[量子コンピュータことはじめ2](https://qiita.com/hal_quant/items/215838aca79fe5b5ea53)に続く

#リンク
金融のための量子アニーリングことはじめ1 | D-wave Leap導入編（本記事)
[金融のための量子アニーリングことはじめ2 | ポートフォリオ最適化 1](https://qiita.com/hal_quant/items/215838aca79fe5b5ea53)
[金融のための量子アニーリングことはじめ3 | ポートフォリオ最適化 2](https://qiita.com/hal_quant/items/93722ea4ca3dfcc90eb2)
Unityで銀テープを降らせる

#はじめに
ライブでよくあるような銀テープをUnity内で降らせたいと思いました．
![tape.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239014/c0ca35e4-f946-a676-4fec-4dfbab6d72d2.jpeg)
画像元：https://feely.jp/4603521/

Unity 2018.3.0f2を使いました．今のところこんな感じです．発射の仕方とか質感とかは微妙ですが，落下中のひらひら感は出てると思います．
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">銀テープ <a href="https://t.co/wwrqdSkz6e">pic.twitter.com/wwrqdSkz6e</a></p>&mdash; 敬也 (@takaya901) <a href="https://twitter.com/takaya901/status/1122117774988288005?ref_src=twsrc%5Etfw">2019年4月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#実装
Particle Systemのオプションの中にTrailsというものがあります．これはParticleの軌跡を指定した時間だけ描画できるオプションです．今回の方針としては，目立たないParticleをランダムに動かして，その軌跡を銀テープの長さ分描画すればひらひら舞っている感じになるだろうということです．

まずParticleの基本設定は以下のとおりです．
Gravity Modifierを調整すると銀テープの落下スピードが変わります．
<img width="398" alt="Screen Shot 2019-04-27 at 21.25.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239014/4556e0af-6e00-886e-e2c1-929eeba62688.png">

Rendererの設定は以下のとおりです．
<img width="398" alt="Screen Shot 2019-04-27 at 17.31.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239014/099f4185-37ca-5f03-18bf-8667e5429bb2.png">

Particle自体のMaterialは，とりあえずUnity標準の中で1番目立たなそうなSpatialMappingMaterialにしました．TrailのMaterialはMetaricを1にした黄色のを作りましたが，全然銀テープっぽくないのでおいおい調整します．

次に，Trailsの設定は以下のとおりです．
<img width="398" alt="Screen Shot 2019-04-27 at 17.37.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239014/d5ab485c-0dbc-0965-c66b-974c3cc51f7a.png">

ParticleのLifetimeにTrailのLifetimeをかけたものが軌跡の長さになるので，テープの長さはこの2つで調整します．また，Generate Lighting Dataを有効にします．

さて，肝心のForce over Lifetimeは以下のように設定しました．
<img width="398" alt="Screen Shot 2019-04-27 at 10.58.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239014/a21152c5-fa61-3a11-cd9b-be329e1a3c80.png">

落下によるY座標の変化は重力に任せ，XZ平面に平行な力をランダムに加えます．発射直後はあまり揺らさず，上空に上りきってから徐々に揺らすことで銀テープ感を再現できてると思います．