OmniAICreator/Qiita-1.07M huggingface dataset:
VisualStudioプロジェクトをコンソールからビルドするためのメモ

# 使用するツール

VisualStudioのプロジェクトをビルドするには、以下のツールが使える。

- MSBuild
- devenv　（要VisualStudioのインストール）

なおMicrosoft的には、ビルド関連のタスクはMSBuildの使用を推奨している模様。

# MSBuild

## バージョン別の実行ファイルの場所
- VS2005 -> "C:\Windows\Microsoft.NET\Framework\v2.0.50727\MSBuild.exe"
- VS2008 -> "C:\Windows\Microsoft.NET\Framework\v3.5\MSBuild.exe"
- VS2010/VS2012 -> "C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe"
- VS2012 -> "C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe"
- VS2013 -> "C:\Program Files (x86)\MSBuild\12.0\Bin\MSBuild.exe"
- VS2015 -> "C:\Program Files (x86)\MSBuild\14.0\Bin\MSBuild.exe"
- VS2017 -> "C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\15.0\Bin\MSBuild.exe"

　VS2005～VS2012についてはOS標準で入っているバージョンもあり紐づけが若干怪しい
　また、Windows7 なら v3.5、Windows10なら v4.0.30319 が標準で入っている

### 実行例
"C:\Program Files (x86)\MSBuild\14.0\Bin\MSBuild.exe" "project.sln" /t:rebuild /p:Configuration=Release;Platform="Win32"

上記の引数について、
　"project.sln" --> ソリューション指定
　/t:rebuild --> ビルド方法（build/rebuild/clean）
　/p:Configuration=Release;Platform="Win32" -> ビルド構成（Debug/Release）、Platform指定（Win32/x64）

コマンドラインについては本家を参照
　https://msdn.microsoft.com/ja-jp/library/ms164311.aspx

# devenv
### バージョン別の実行ファイルの場所
- VS2005 -> "C:\Program Files (x86)\Microsoft Visual Studio 8\Common7\IDE\devenv.exe"
- VS2008 -> "C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe"
- VS2010 -> "C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\devenv.exe"
- VS2012 -> "C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe"
- VS2013 -> "C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\devenv.exe"
- VS2015 -> "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\devenv.exe"
- VS2017 -> "C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Common7\IDE\devenv.exe"

　　VS2017はCommunityエディションであれば Professional を Community に置き換え

### 実行例
"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\devenv.exe" "project.sln" /Build "Release|Win32" /Out VS2015.log

上記の引数について、
　"project.sln" --> ソリューション指定
　/Build -->、ビルド方法（Build/Rebuild/Clean）
　"Release|Win32" --> ビルド構成|Platform（Debug/Release|Win32/x64）
　/Out VS2015.log --> ビルドログ出力ファイ指定

コマンドラインについては本家を参照
　https://msdn.microsoft.com/ja-jp/library/xee0c8y7.aspx
【React Native】 'config.h' file not found

## 解決策

こちらのほうがわかりやすかったので変更しました。
[react-nativeでiOSのビルドをするとmutex.hで'config.h' file not foundが出る](https://paging.hatenablog.com/entry/2018/06/24/183355)

```bash
$ cd node_modules/react-native/third-party/glog-0.3.4
$ ../../scripts/ios-configure-glog.sh
```

## 参考

![image.png](https://qiita-image-store.s3.amazonaws.com/0/103475/19f6e8a1-3cbc-19ff-b6e5-ac42d66d9faa.png)

>`rm -rf node_modules/ && yarn cache clean && yarn install and rm -rf ~/.rncache`
>`cd node_modules/react-native/scripts`
>`./ios-install-third-party.sh`
>If your network is slow, you can download the packages separately and move them to the `rncache` folder

https://github.com/facebook/react-native/issues/14382#issuecomment-420190830
Newton法（非線形方程式の数値解法）

# Newton法とは
- 非線形方程式の数値解法の一つ
- 初期値$x_n$におけるグラフ$f(x)$の接線が$x$軸と交わる点を$x_{n+1}$として解$\alpha$の近似値を求める。

 ![qiita-num-2.png](https://qiita-image-store.s3.amazonaws.com/0/299208/99d5b7f3-09a3-f6dd-db8e-49939d47bd8f.png)

# 算法

#### 初期値
$x_0$ : 適当な方法で決める

#### 反復手順
$x_{n+1}=x_n-f(x)/f^{\prime}(x)$

#### 停止則
- 更新量が小さい：$|f(x)/f^{\prime}(x)|<\varepsilon_1$
- $f(x_n)$が$0$に近い：$|f(x_n)|<\varepsilon_2$

# サンプルコード
$f(x)=x^2-1$ 、初期値 $x_0=3$ としてNewton法を使って解を求めるプログラム。
$f^{\prime}(x)\neq 0$ の確認とかを入れてないガバガバコード

```c:newton_method.c
#include<stdio.h>
#include<math.h>

double f (double x) {
  return x*x-1;
}

double df (double x) {
  return 2*x;
}

double newton_method (double x) {
  double new_x;
  while (1) {
    new_x = x - f(x)/df(x);
    if (fabs(f(x)/df(x)) < 1e-10) break;
    if (fabs(f(new_x)) < 1e-10) break;
    x = new_x;
  }
  return new_x;
}

int main (void) {
  double alpha;
  alpha = newton_method(3);
  printf("%f\n", alpha);
  return 0;
}
```
# 特徴
- 初期値によって、反復回数が結構変わる。
Railsでwebサイトのページを増やす方法

Ruby on Railsのページを増やす手順についてまとめます。

## 手順

１．　configのrouteファイルにURLと対応するアクションを記述
２．　controllerに該当するアクションを追記
３．　viewフォルダにhtml.erbファイルを新規作成

※まったく０からのサイト作成ではなく、既存のプログラムに追加する想定です。

## routeファイルにURLとアクションを記述

〜書き方〜
### HTTPプロトコル　”ページを表示させたいURL”　=>　”コントローラ名#アクション名”
のように記述します。

※「HTTPプロトコル」としましたが、ほとんどの場合「get」か「post」のどちらかです。

以下に具体例を示します。

```route.rb
get "images/index" => "images#index"
```
〜/images/indexというURLへリクエストを受けた時に、
このプログラムでは、`images`controllerの中の、`index`アクションを実行しますという書き方になっています。


## controllerに該当するアクションを追記

```images_controller.rb
def index
end
```

先ほど、routeファイルに書いたとおり、URLのリクエストを受けた後、
プログラムは`images`controllerを見に来ます。そして、`index`アクションを探して実行しようとします。
今回は、その流れそのものをひとつ増やす作業を行っているので該当するアクションを追記します。

## viewフォルダにhtml.rbを新規作成

最終的にブラウザ等で表示されるのはhtml.rbファイルです。
route→controller→html
※.rb省略
の順番で記述やファイルを追加していきましょう。

```index.html.rb
<h1>写真の広場</h1>
〜
〜
```

ここまでの一連の流れで最初に設定したURLを叩くと、
新規作成した新しいhtml.rbファイルが読み込まれるようになります。


本日はこのあたりで失礼します。

## 参考サイト
progate railsレッスンコース
https://prog-8.com/
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その３

[その２](https://qiita.com/yanda/items/95d7546444691d24424b)では、パネルを横並びにするスタイル作るところまでやりました。
本記事はその続きです。

# パネルを並べよう
さっそく作った2つのクラスを組み合わせてみましょう。
きれいに横並びできたでしょうか。  
でも今はどのパネルもテキストの長さが同じだからたまたま高さが揃っているだけかもしれません。

# パネル内のテキストを変えてみる
以下のようにパネルの中身を変えてみましょう。

|パネル1|パネル2|パネル3|
|:--:|:--:|:--:|
|タイトル1|タイトル2|タイトル3|
|テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト|テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト|テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト|
|補足補足補足補足<br>補足補足|補足補足|補足補足補足<br>補足補足補足<br>補足補足|

こうするとパネルの高さが不揃いになったのではないでしょうか（揃っている人はさすがです）。  
どうすればパネルの高さを揃えることができるか考えてみてください。


## できましたか？
以下は筆者だったらこう作る例です（追加分のみ）。

```index.html
<li class="panels__item panel">
    <div class="panel__header">
      <div class="panel__header__icon">
        <img src="dummy.png" alt="ダミー">
      </div>
        <div class="panel__header__text">タイトル1</div>
    </div>
    <div class="panel__content">
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </div>
    <div class="panel__footer">
        <ul>
            <li>補足補足補足補足</li>
            <li>補足補足</li>
        </ul>
    </div>
</li>
```
筆者の場合は`.panels__item`要素に`.panel`をつけることでパネルの高さを揃えています。
揃え方は他にもあるのでそれぞれのやり方で実現してください。

[コード例](https://github.com/yonda-yonda/html-css-bootcamp/tree/master/stage4)

# 追加要求
さてこれで課題は完成、とはいきません。
要求者はいつだって気まぐれで、出来上がったものをみてから急に追加や変更を要求してきます。

今回はこんなことを言ってきました。

* パネルの数を増やしたい
* 青枠線のパネルを追加したい
* SP時にテキストの位置を移動したい

PC時
![add.png](https://qiita-image-store.s3.amazonaws.com/0/203034/6c0682c8-1531-dc58-d015-a3b06d87065c.png)
SP時
![add-sp.png](https://qiita-image-store.s3.amazonaws.com/0/203034/79c3fc2b-8b1b-50eb-98fa-70851a3b5f4a.png)

## パネルの数を増やしたい
パネルを3つから4つに増やしたいと言われました。
1つのパネル幅は今のままで、4つ目は1段落として表示したいそうです。

うまくclassが作れていればタグをコピペして要素を増やすだけで対応できそうですが、場合によってはCSSを見直さないといけないかもしれません。  

## 青枠線のパネルを追加したい
一部のパネルを強調したいので、枠線を太い青にしたい（`border: 2px solid #3176d5`）と言われました。

マルチクラスで対応してみましょう。

## テキストの位置を移動したい
スマホ時に要素の高さを減らしたいということで、本文テキストの位置をタイトルの下(間隔10px)に移動したいと言われました。

場合によってはCSSだけでなくHTMLの構造を大幅に見直さないといけないかもしれません。  

## できましたか？
細かな変更点は[コード例](https://github.com/yonda-yonda/html-css-bootcamp/tree/master/stage5)を見てください。

### パネルの数を増やしたい(例)
筆者の場合は単純にコピペするだけでは実現することができず、
`.panels`に`flex-wrap: wrap;`を追加する必要がありました。
あとは`.panels__item`に下マージンを追加しています。

### 青枠線のパネルを追加したい(例)
筆者の場合は`.panel--highlight`というmodifierを用意しました。

### テキストの位置を移動したい(例)
筆者の場合は`.panel`の中身を大幅に見直す必要がありました。
めんどうですね。できあがってから変更したいなんて簡単に言わないでほしいものです。



今度こそ課題が完成、とは残念ながらいかないです。
まだIE11で確認していません。
[その４](https://qiita.com/yanda/items/44c890640e5fb5278504)（IE11編）へ続く。
PowerShellの完全な履歴を取得する

約３ヶ月前にPowerShellで実行したコマンドを確認する必要がでてきたが、履歴を確認するコマンドを調べて出てきた`Get-History`コマンドは現在のセッション内で実行したコマンドしかでない...

しかし、↑キーを押して遡る場合は以前のセッションで実行したコマンドも出てくるのでやはりどこかしらにはログが残っているのではないかと、英語でも調べてみたらやはりあった

ログのパスは以下を実行すると出てくる

```powershell
(Get-PSReadlineOption).HistorySavePath
```

参考

- [How can I see the command history across all powershell sessions in Windows Server 2016? - Stack Overflow](https://stackoverflow.com/questions/44104043/how-can-i-see-the-command-history-across-all-powershell-sessions-in-windows-serv)
MPEG-2 TSファイル処理 -PCRの取得-

# はじめに
[前回](https://qiita.com/sagesagesagesagesage/items/0bc277e838e375c03edc)はTSヘッダを解析し、その結果をダンプするようにしました。今回は予告通りPCRを取り出してみます。

プログラムは以下を参照ください。
https://github.com/sagesagesagesagesage


# PCRとは？
PCR（Program Clock Reference）はMPEG-2 TSの送信側と受信側で同期をとるためのクロックになります。PCRは重要なもので、これが送信側と受信側で同期がとれないと受信側で正しく映像が再生されません。

PCRは100ms以下の間隔で送信器から送信することが推奨されているようです。

PCRは42Bitのデータになりますが、Base 33Bit、Extension 9Bitで構成されており、BaseとExtensionを使用して以下の様に算出します。

```math
PCR = PCR(Base) × 300 + PCR(Extension)
```

なお、PCRの27MHzのクロックとなるため、およそ26.5時間で巡回します。

```math
2,576,980,377,811（PCRの最大値） ÷ 27,000,000 ÷ 3600 ≒ 26.5（時間）
```


# PCRの取得方法
PCRはTSヘッダにAdaptation Filedが存在し、Adaptation Filed中のpcr_flagが1の場合に存在します。実際のデータを見た方が早いので、以下にあるTSパケットのヘッダを示します。

```
47,01,FF,20,B7,10,BD,F5,CC,EB,7E,D6,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,FF,
```

上記データはsync_byte 0x47 で始まるTSパケットなり、adaptation_filed_controlが2(0x2）となるTSヘッダのみのTSパケットです。adaptation_filed_lengthは0xB7（183）となっていますが、実際にはPCRしか含まれておらず、残りは0xFFでパディングされています。pcr_flagはadaptation_filed_lengthの次のバイト、0x10に含まれており、第4ビット(LSBが第0ビット)がそれに該当します。今回、1が立っているのでPCRが含まれています。

PCRは「BD,F5,CC,EB,7E,D6」に含まれており、先頭の 33Bit がPCRのBase,6Bit reserved で、次の 9Bit がExtension となります。

実装時には以下の様なマクロを作成してみました。

```
#define GET_PCR_EXT( pcr_bin, pcr )		{																			\
										uint64_t	b, e;															\
										b  = ( ( ( uint8_t* )pcr_bin )[ 0 ] << ( 3 * 8 ) ) & 0x00000000FF000000;	\
										b |= ( ( ( uint8_t* )pcr_bin )[ 1 ] << ( 2 * 8 ) ) & 0x0000000000FF0000;	\
										b |= ( ( ( uint8_t* )pcr_bin )[ 2 ] << ( 1 * 8 ) ) & 0x000000000000FF00;	\
										b |= ( ( ( uint8_t* )pcr_bin )[ 3 ] << ( 0 * 8 ) ) & 0x00000000000000FF;	\
										b <<= 1;																	\
										b |= ( ( ( uint8_t* )pcr_bin )[ 4 ] >> ( 7 ) ) & 0x0000000000000001;		\
										e  = ( ( ( uint8_t* )pcr_bin )[ 4 ] << ( 8 ) ) & 0x0000000000000100;		\
										e |= ( ( ( uint8_t* )pcr_bin )[ 5 ] << ( 0 ) ) & 0x00000000000000FF;		\
										pcr = b * 300 + e;															\
									}																				\
```

# おわりに
今回はPCRを解析しました。次はPAT、PMTの解析をしたいと思います。
Doczを使ってみた

## 背景

- [この勉強会](https://meguroes.connpass.com/event/98856/)で[この話](https://speakerdeck.com/mukai21/doczwopjniru-retemita)を聞いたのがきっかけでDoczを知った
- 実際に触ってみたので簡単な使い方を記事にする

## Doczとは

- 公式サイト
    - https://www.docz.site/
- コンポーネントガイドを作ることができるライブラリ
- [Storybook](https://storybook.js.org/)のようなもの

## Doczの特徴

- mdxで書くことができる
    - markdown + jsx
    - 基本はmarkdownで書くことができる
    - **markdownの中にjsxタグを埋め込むことができる**
- 設定ファイルなしで作ることができる

## 使い方

### HelloWorldまで

- ライブラリのインストール

```bash
yarn add -D docz
# or
npm i -D docz
```

- mdxファイルを作る
    - プロジェクト内ならどこでもOK

```md:hello.mdx
---
name: Hello
---

# Hello world

Hello!
```

- 起動

```bash
yarn docz dev
# or
npx docz dev
```

- ページにアクセス
    - http://localhost:3000/ で起動するのでアクセスするとHello Worldを確認できる

<img width="609" alt="hello.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/6f438ce9-8641-c19f-d441-f9dbc5ea0c30.png">

### Reactコンポーネントを埋め込む

- 単純なボタンコンポーネントのサンプル

```md
---
name: Button
---

import { Playground, PropsTable } from 'docz'
import Button from './Button'

# Button

- ボタンコンポーネント

## Usage

<Playground>
  <Button onClick={() => alert('hello!')}>ボタン</Button>
</Playground>

<Playground>
  <Button wide onClick={() => alert('hello!')}>ボタン</Button>
</Playground>

## Props

<PropsTable of={Button} />
```

- 上記のmdxを作ると以下のような画面になる

<img width="813" alt="button.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/6fd5c6c8-bd40-293a-3bf4-1e1f776786bc.png">

### 特徴1

- 表示したいコンポーネントを`<Playground>`で囲うと、描画内容とjsxタグが自動で表示される
- 図中で赤枠で囲っているようにjsxだけでなく変換後のhtmlも確認できる

### 特徴2

- `<PropsTable of={Button} />`とすることでPropsの情報を自動的にテーブルにしてくれる
- FlowでもPropTypesでもちゃんと拾ってくれる
- サンプルの例だと以下のような感じで定義している

```js:Button.js
// ...省略

// flowの場合
type Props = {
  /** 横幅いっぱいにするかどうか */
  wide?: boolean,
};

// PropTypesの場合
Button.propTypes = {
   /** 横幅いっぱいにするかどうかにするかどうか */
   wide: PropTypes.bool,
 };

// DefaultPropsはFlowでもPropTypesでも共通
Button.defaultProps = {
  wide: false,
};
```

## (参考)Storybookと比較

- 上の例で示したボタンコンポーネントのガイドと同じものをStorybookで作ってみる
- セットアップは割愛
- Docz版と同じものを再現するには`@storybook/addon-info`が必須
    - それ以外はなくても再現できる

```jsx:stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';

import Button from './Button';

storiesOf('Button', module)
  .addDecorator(withInfo)
  .addParameters({
    info: {
      text: 'ボタンコンポーネント',
      inline: true,
    },
  })
  .add('通常パターン', () => (
    <Button onClick={action('click!!')}>
      {text('label', 'ボタン')}
    </Button>
  ))
  .add('幅広パターン', () => (
    <Button onClick={action('click')} wide>
      {text('label', 'ボタン')}
    </Button>
  ));

```

<img width="541" alt="storybook.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/c70b81ad-03b3-1c21-765e-248e68bd9431.png">


## まとめ

- できることはStorybookと同じか少ないけど、これだけの内容を設定ファイルなしでできるのはお手軽だと思う！
データベースの基礎知識

こんにちは！本日MySQLの設定を行うにあたってデータベースというものに初めて触れました。
僕のような初心者のために今回はデータベースの基礎知識について共有しようと思います。
###データベースとは
データベースとは**構造的に整理されているデータの集合体**です。
といってもわかりにくいと思うので、簡単に説明するとデータを入れる**倉庫**のようなものです。
無造作に散らばっているデータから必要なものだけを抽出することは困難ですが整理されていることで検索がプログラムで扱いやすくなります。
###データベースはどのように操作するのか
データベースは倉庫ですがそれ自体がデータを入れたり取り出したりできるわけではありません。このようなデータの管理をする管理人の役割が必要になります。
それが**DBMS**(データベースマネジメントシステム)です。
###DBMSは指示待ちマン
DBMSが管理をすることはわかっていただけたでしょうか
しかし、DBMSが管理をしてくれるからあとはこいつに任せて‥というわけにはいかないのです。
実はDBMSは自分の意思を持っておらず、指示を出さなくては何もしません。
そこでこいつに指示する上司が必要になります。
それが**SQL**です。
VIMとVSCodeを行ったり来たり移動する

# Qfixhowmと、fugitiveだけはVim使いたい
- vimとVSCode行ったり来たりしたい  
    - vimからVSCodeを呼び出してファイルを開く
    - VSCodeからvimを呼び出してファイルを開く


## vim側
- vimscriptでvscodeを呼び出す
 
``` .vimrc
if has('win32')
  nnoremap <silent> <leader>v :<c-u>call <SID>OpenVSCode()<CR>
  function! s:OpenVSCode()
    let l:targetfile  = expand("%:p")
    let l:cmd = '!code ' . l:targetfile
    silent execute! l:cmd
  endfunction
endif

```
## vscode側
- [Visual Studio Code から外部エディタを開く](https://qiita.com/standard-software/items/785e3c27865a8e8d0b92) 
 
``` settings.json
    // vimで開く
    "alt-editor.binary": "gvim",
    "alt-editor.args": "{filename}",
```
「この先生きのこる」を4つの自然言語処理エンジンに食わせてみる

ちょっと気になったのでやってみた。

## Google Natural Language API
https://cloud.google.com/natural-language/
![google.PNG](https://qiita-image-store.s3.amazonaws.com/0/283400/4831cb49-f360-15be-adba-67d343e1508a.png)

## Kuromoji
https://www.atilika.com/ja/kuromoji/
![kuromoji.PNG](https://qiita-image-store.s3.amazonaws.com/0/283400/d034c6ea-244b-3cbf-6025-a5ff5ab8f9ba.png)

## COTOHA API
https://api.ce-cotoha.com/demo?query=%E3%81%93%E3%81%AE%E5%85%88%E7%94%9F%E3%81%8D%E3%81%AE%E3%81%93%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB
![cotoha.PNG](https://qiita-image-store.s3.amazonaws.com/0/283400/a7f80764-0753-1884-ac12-22948ee088a4.png)


## Rakuten MA
http://rakuten-nlp.github.io/rakutenma/
![rakuten.PNG](https://qiita-image-store.s3.amazonaws.com/0/283400/a4bf74f7-5be0-9179-0c05-046b7e810abc.png)


## 感想
意外と「この先生」「きのこる」とは誰も解析してくれませんでした。
ほかにもwebで試せるものが教えてください。
チートシートのフォーマット例

## 概要

　チートシートのフォーマット例をまとめました。いきさつとしてはプログラミング初心者を対象としたRuby教育の中で、学習のふりかえり用にチートシートがあるといいな〜と思い立ち記事を作成しました。参考になれば幸いです。
なお、チートシートは簡単な実行例に留めておき、比較やメモなどは別ファイルにとりまとめます。


## チートシート フォーマット
```CheatSheetFormat.txt
■項目名
･メソッド名など
DESCRIPTION: 概要説明
SYNOPSIS: 記法
EXAMPLE: 使用例
-> Stdout:  実行結果

```

## チートシート 記入例
```CheatSheet.rb
■標準入出力(standard streams)
･puts
DESCRIPTION: 標準出力(stdout)、引数のオブジェクトを文字列に変換、改行を加えて出力
SYNOPSIS: puts (arg, ...)
EXAMPLE: puts "This is string."
-> stdout: This is string.


･p
DESCRIPTION: 標準出力(stdout)、引数のオブジェクトを分かりやすい文字列に変換、改行を加えて出力
SYNOPSIS: p (arg, ...)
EXAMPLE: p  "This is string."
-> stdout: "This is string."
```

## メモ 記入例
```CheatSheetMemo.rb

■標準出力(stdout)の比較
･print, puts, pの違い
printは改行コードを含めない、putsは自動的に改行コードを加えて出力
pはprint, putsとは異なり引数のオブジェクトを分かりやすい文字列にして出力

EXAMPLE:
string0 = "Hello,"
string1 = "World!"
array0 = [0, 1, 2]
array1 = ["3", "4", "5"]

print string0, string1
-> stdout: Hello,World!

print array0, array1
-> stdout: [0, 1, 2]["3", "4", "5"]

puts string0, string1
-> stdout: Hello,
World!

puts array0, array1
-> stdout: 0
1
2
3
4
5

p string0, string1
-> stdout: "Hello,"
"World!"

p array0, array1
-> stdout: [0, 1, 2]
["3", "4", "5"]
```
Chromeのデフォルト機能でフルスクリーンショット

Windows使ってます

#やり方1 ぱぱっとスクショしたい時

##1.デベロッパツールを立ち上げる
「F12」 or 「Ctrl」+「Shift」+「I」 or 右クリック→検証

##2.More optionsからCapture full size screenshotを選択
「Ctrl」+「Shift」+「P」
→出てきた入力画面から「Capture full size screenshot」を選択
（capture や full と入力すれば絞り込める）

##3.ダウンロードフォルダあたりにいい感じの画像が保存される
完成！やったー


#やり方2 任意の画面幅でスクショしたい時

##1.デベロッパツールを立ち上げる
「F12」 or 「Ctrl」+「Shift」+「I」 or 右クリック→検証

##2.モバイル表示に切り替える
デベロッパーツール左上にあるアイコン（Toggle device toolbar）を押す

##3.任意の画面表示を選択する
画面上のプルダウンからiphoneとかレスポンシブとか
お好きな表示を選択

##4.More optionsからCapture full size screenshotを選択
2.で押したToggle device toolbarの左にある●が縦に3つ並んだアイコンを押す
→Capture full size screenshotを選択

##5.ダウンロードフォルダあたりにいい感じの画像が保存される
完成！やったー
Win10でssh-addがError connecting to agent: No such file or directory

サービスでssh-agentが無効になっていました

PowerShellを管理者権限で開き、以下を実行したら直りました

```powershell
Set-Service -Name ssh-agent -StartupType Manual
Start-Service ssh-agent
```

参考
- [Can't get ssh-agent working · Issue #1133 · PowerShell/Win32-OpenSSH](https://github.com/PowerShell/Win32-OpenSSH/issues/1133#issuecomment-401064568)
EclipseのSQLエディタで配色を変更する

# SQLエディタの配色設定

実はSQLエディタ表示中に右クリック（コンテキスト表示）からの設定(SQLでフィルタされる)で表示される内容では、表示色の設定ができません。
ではどこであるかというと…

Window > Preference > Data Management > SQL Development > SQL Editor > **Syntax Coloring** 

Pleiades適用済みで日本語化した場合は、

ウィンドウ > 設定 > データ管理 > SQL開発 > SQLエディタ > **構文の色指定**

の中にあります。SQLでフィルタリングされてしまうため、最後の Syntax Coloring が表示されないオチでした。

![SqlEditorColor.png](https://qiita-image-store.s3.amazonaws.com/0/13268/a32a512a-91e2-5051-7138-1936cdbcfa6a.png)

わかってしまうと単純ですね (・ω| < ｿﾝﾅﾄｺ ﾆ ｶｸﾚﾃﾀﾝｶ ｺﾞﾗｧ 

SQLファイルを他のエディタ(例：DBViewer)で開いて何とかしていた場合もあるでしょう。
dotConnect for Oracle

[dotConnect for Oracle] (https://www.devart.com/dotconnect/oracle/) is an enhanced ORM enabled data provider for Oracle that builds on ADO.NET technology to present a complete solution for developing Oracle-based database applications. It introduces new approaches for designing application architecture, boosts productivity, and facilitates the development of database applications.

**Fast and Advanced ADO.NET Provider**
![uploading-0](https://www.devart.com/dotconnect/oracle/images/tagcloud.png)

dotConnect for Oracle offers both high performance native connectivity to the Oracle database and a number of innovative development tools and technologies. It supports a wide range of Oracle-specific features, such as Advanced Queuing , Alerts, Pipes, Direct Path Loading , Change notifications, Transparent Application Failover, REF cursors, objects, packages, and others.

**RAD Approach**
![uploading-0](https://www.devart.com/dotconnect/oracle/images/2nd.png)

dotConnect for Oracle provides a vast number of GUI tools that increase your productivity. It integrates into Visual Studio Server Explorer and other tools , and provides advanced visual component editors to simplify component tweaking. DataSet tools, such as DataSet Wizard , DataSet Editor, DataSet Manager, provide you an easy way to create and edit typed and untyped DataSets.

 
**ORM Solutions**
![uploading-0](https://www.devart.com/dotconnect/oracle/images/orm.png)

dotConnect for Oracle offers enhanced ORM support with a bundled visual designer for ORM models - Entity Developer. dotConnect for Oracle supports ADO.NET Entity Framework , NHibernate , and LinqConnect (formerly known as LINQ to Oracle) - our own ORM solution, closely compatible to Microsoft LINQ to SQL, while extending its functionality with its own features.
【AWS】特定のタグを含むEC2インスタンスのAMIを一度に作るためのワンライナー【小ネタ】

# やりたいこと
- EC2インスタンスが数多く存在しているが、指定したタグ（Env=dev）を持つインスタンスのみフィルタしてAMIを作成したい。
- ワンライナーでやることは、AWS CLIのコマンドを生成するところまで。実際の作成は出力結果をコピー＆ペーストして実行する。
- AMI名は、インスタンス名（Nameタグの値）と、日付8桁の文字列としたい。（例：api_20181011）
- 出力結果は、インスタンス名（Nameタグ）でソートしたい。


# 作成したワンライナー
```
$ aws ec2 describe-instances --filters "Name=tag:Env,Values=dev" \
  | jq -r '.Reservations[].Instances[] | [.InstanceId, (.Tags[] | select (.Key == "Name").Value)] | @csv' \
  | sed 's/\"//g' | sort -t , -k 2 \
  | awk -F, '{image_name=$2 "_" strftime ("%Y%m%d"); print "aws ec2 create-image --no-reboot --instance-id", $1, "--name", image_name};'

```

実行するとこんな感じで結果が出力されます。

```
aws ec2 create-image --no-reboot --instance-id i-xxxxxxxxxxxxxxxxx --name api11_20181011
aws ec2 create-image --no-reboot --instance-id i-xxxxxxxxxxxxxxxxx --name api12_20181011
aws ec2 create-image --no-reboot --instance-id i-xxxxxxxxxxxxxxxxx --name web11_20181011
aws ec2 create-image --no-reboot --instance-id i-xxxxxxxxxxxxxxxxx --name web12_20181011
```

# 補足
## ec2-describe-instancesの出力結果をフィルタする
まず、AWS API発行時点で、対象のインスタンスのみを抽出するよう、フィルタ条件を指定します。

```
$ aws ec2 describe-instances --filters "Name=tag:Env,Values=dev"
```

## jqの結果をCSVとして出力する
下記を実行すると、インスタンスIDとNameタグの値をCSVとして出力します。

```
$ aws ec2 describe-instances --filters "Name=tag:Env,Values=dev" \
  | jq -r '.Reservations[].Instances[] | [.InstanceId, (.Tags[] | select (.Key == "Name").Value)] | @csv'

```

## sortコマンドで指定の列を元に並べる・区切り文字として空白以外の文字を使う
sortコマンドは「-k」オプション（若しくは「--key=KEYDEF」オプション）を指定することで、ソート対象の列を指定することが出来ます。
また列の区切り文字は、デフォルトでは空白文字（white space/tab）ですが、
「-t」オプション（若しくは「--field-separator=SEP」オプション）で、任意の文字を指定することが可能です。

```
$ aws ec2 describe-instances --filters "Name=tag:Env,Values=dev" \
  | jq -r '.Reservations[].Instances[] | [.InstanceId, (.Tags[] | select (.Key == "Name").Value)] | @csv' \
  | sed 's/\"//g' | sort -t , -k 2 \
```

## awkの中で時刻を取得する
シェルのコマンド置換を利用して、dateコマンドの出力結果を用いることもできますが、今回はawkスクリプトが少し長くなったので、strftimeを使いました。
フォーマット文字列は、dateコマンド等と恐らく一緒です、多分。（※未確認）

```
$ awk 'BEGIN {print strftime ("%Y%m%d")}'
```
remove_post_type_supportの挙動が変わったメモ

#挙動が変わったタイミング
Wordpress4.9.3から4.9.8にアップデートしたタイミングで発生しました。

#挙動が変わった関数
remove_post_type_support
wordpress管理画面でのいらない機能を無効にする関数です。

今回は以下のような指定をしていました。

```remove_post_type_support.php

remove_post_type_support('post','editor');

```

#エラーコード
ブラウザのコンソールで出ていたエラー

```error.js

Uncaught ReferenceError: tb_show is not defined
    at HTMLInputElement.<anonymous> (example.js?ver=4.9.8:12)
    at HTMLInputElement.dispatch (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,backbone,wp-util,&load[]=wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:3)
    at HTMLInputElement.r.handle (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,backbone,wp-util,&load[]=wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:3)

```

#ソースコード
jsでwordpressコア内のthickboxを使って
media-upload.phpを呼び出しています。

```example.js

tb_show('', 'media-upload.php?type=image&TB_iframe=true');

```

#具体的にどう挙動が変わったか
ユーザーによって動作するようphp側で指定していました。
以前は投稿者でも問題なく動作することができたのですが
4.9.8にアップロードしたタイミングで前述のエラーがでて
機能もしなくなりました。
編集者以上の権限だと今回のエラーは発動しません。

#対応策
remove_post_type_support()は無効にしました。
いい対応ではないですが
取り急ぎ機能させることの優先順位が高かったのと
worpdress管理画面の調整でほかにも
cssで調整しなければならない部分があったので
cssのdisplay: noneで対応しました。

こちらで機能が復活したのは
remove_post_type_supportを実行すると
おそらくuserroleのupload_filesが
何らかの影響を受けて実行できないのでは？
と予想しています。

#原因の予想
これらの状況からuser権限周りの
関数を眺めてみたのですがはっきりと突き止められていません。
remove_post_type_support()内を確認すると
$_wp_post_type_featuresのunsetのみなので
こちらの配列が変わっているのかもしれません。
どなたかこのあたり心当たりのある方
コメントいただけましたらうれしいです。
JavaScriptで秒を数えるいくつかの方法

####**普通の書き方**

```javascript
let i = 0;
const update = () => {
  console.log(i);
  i++;
}
setInterval(update, 1000);
```

####**再帰関数**

```javascript
const update = (i = 0) => {
  console.log(i);
  return setTimeout(() => update(i + 1), 1000);
};
update();
```

####**クロージャー**

```javascript
const update = () => {
  let i = 0;
  return () => console.log(i++);
};
setInterval(update(), 1000);
```

短く書くと

```javascript
const update = (i = 0) => () => console.log(i++);
setInterval(update(), 1000);
```

####**Promise**

```javascript
(async() => {
  for (let i = 0; true; i++) {
    await new Promise(res => setTimeout(res, 1000));
    console.log(i);
  }
})();
```
Finder から指定ディレクトリに移動したときに自動的に jupyter notebook を起動させるようなフォルダアクションを追加した話

# はじめに
標準の Finder から、いま現在開いているフォルダをターミナルで開くのは面倒臭い。
それに加えて毎度同じコマンドをターミナル上で実行するなら、それも含めて自動化しよう。

# 今までやっていたこと
### フォルダに新規ターミナルタブ
🍎→「システム環境設定…」→「キーボード」→「ショートカット」→「サービス」と辿って、
「フォルダに新規ターミナルタブ」という項目にチェックを入れるとフォルダを右クリックしたときのサービスが増える。
それをクリックすることでターミナルを開くことができる。
<img width="344" alt="スクリーンショット 2018-10-11 17.41.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/105953/a0751d28-413f-b0d5-27d9-2715b3d3658d.png">

これで開いたターミナルは右クリックしたフォルダ内をカレントディレクトリにしてくれているので、

```
$ jupyter notebook
```

と実行すると、このフォルダをルートにした作業環境が構築される。

# 今回やってみたこと
### フォルダアクション設定…
毎度 jupyter notebook を実行するフォルダは決まっているので、
フォルダアクションで、フォルダを開くと勝手にそこまでやってくれるようにした。

# フォルダアクションとは
AppleScript という~~けったいな~~スクリプトを
`/Library/Scripts/Folder Action Scripts`
に用意しておき、
フォルダ毎にそのスクリプトを対応させておくことで所望の動きをさせられる。

Apple 社のサンプルがあらかじめいくつか用意されている。

# AppleScript
macOS に標準で入っているスクリプトエディタというアプリケーションで書く。

今回は

1. フォルダを開くことをトリガに
2. そのフォルダのパスを取得して
3. ターミナルを開きそこに`cd`し
4. `jupyter notebook`と実行する

という簡単なお仕事を自動化する。
以下がそのスクリプト。

```open　-　jupyter　notebook.scpt
on opening folder this_folder
	set pPath to POSIX path of this_folder as string
	tell application "Terminal"
		do script "cd " & pPath
		activate
		do script "jupyter notebook" in window 1
	end tell
end opening folder
```

### 注意事項
`POSIX path of`と入れないと`cd`できるような文字列が`pPath`に格納されない。
`in window #`のない`do script`を実行すると新たなターミナルウィンドウが表示される。
`in window #`で 1 個以上開かれているターミナルのウィンドウを最近に`activate`された順に指定できる。

# Folder Action Scripts フォルダ

このスクリプトを
`/Library/Scripts/Folder Action Scripts`
に置いておくと「フォルダアクション設定…」で選択できるようになるのだが、
いったんどこか適当な所に保存し、

その後、sudo 権限を使って
`/Library/Scripts/Folder Action Scripts`
に移すと良い。

# フォルダアクション設定…
適当なフォルダを右クリックして「フォルダアクション設定…」をクリックすれば
「関連付けるスクリプトを選択 : 」という項目が出てくるので、先ほど保存したスクリプトを選ぶ。

これで、そのフォルダを開く度に jupyter notebook が自動で実行され面倒が省ける。

# おわりに
ちょっとフォルダの中身を見たいだけなのにいちいちスクリプトが実行されては嫌なので、
Finder はリスト表示かカラム表示にすると良いです。
GASでユーザーのEmailアドレス、所属しているGoogle グループごとに表示するhtmlを切り替え

新Google Siteでユーザーごとに表示するページを切り替えられなくなったので、ユーザーごとに表示するhtmlを切り替えるスクリプト(Google Siteに埋め込む為の)をGoogle App Scriptで書きました。

#ページを切り替える条件（２パターン）
- ユーザーのEmail
- ユーザーがあるGoogle グループに所属しているかどうか

#共通の手順
1. App Scriptのエディタで新規プロジェクを作成
2. 表示するHtmlを作成(A.html、B.html)
3. スクリプトファイルを新規作成
4. 下記のスクリプトを書く
5. 公開→ウェブ アプリケーションとして導入
6. 生成されたURLをGoogle Siteの挿入→埋め込む→URLの部分に貼り付け

#ユーザーのEmailごとに表示するHtmlを切り替え
```
function doGet() {
  // Get email address of the person running the script.
  var user_email = Session.getActiveUser().getEmail();
  if (user_email == "xxx@xxx.net") {
    return HtmlService.createTemplateFromFile("A").evaluate();
  }
  else{
    return HtmlService.createTemplateFromFile("B").evaluate();
  }  
}
```

#ユーザーがあるGoogleグループに所属しているかどうかによりHtmlを切り替え
**要注意ポイント、自分がそのグループのメンバーであり、オーナーまたはマネージャー権限が必要です**

```
function doGet() {
  // Set Google Group by Email.
  var group = GroupsApp.getGroupByEmail("xxx@xxx.net");
  var currentUser = Session.getActiveUser();
  if (group.hasUser(currentUser)) {
    return HtmlService.createTemplateFromFile("A").evaluate();
  } else {
    return HtmlService.createTemplateFromFile("B").evaluate();
  }
}
```

参考資料
[Groups Service  |  Apps Script  |  Google Developers](https://developers.google.com/apps-script/reference/groups/)
EC2上のlaradockのローカルmysqlをRDSに移行した話 

## サービスイン時のインフラ構成について

新しいサービスは基本的にリリース日マストで短納期で進むことが多いです。
私が携わっているサービスもアプリケーションの開発ボリュームが多く短納期だったため、サービスイン時はインフラ準備に極力工数をかけず、EC2 1台にlaradockでWebアプリケーションを公開する構成でした。

     Route 53 → VPC → EC2 (laradockでローカルのmysqlにデータを保存)

いわゆるノーヘル状態。かなり男らしい構成ですね。
EC2が壊れたらデータも消し飛びます。

## サービスインより3ヵ月

サービスも徐々に成長してきて、データ量も少しずつ増えてきました。
初期はphpmyadminで手動で不定期でバックアップを取ってましたが、
流石に怖くなってきたので、RDSを導入してデータベースをバックアップできるようにしました。

     Route 53 → VPC → EC2 → RDS(multi-AZ)

データベースを外だしすることで少しだけ安心になりました。

## RDSを導入するメリット
* EC2から切り離されているので、耐障害性、冗長性、セキュリティが良い
* AWS上で簡単に設定、運用、およびスケールできる
* バックアップやバージョンアップを自動化できる(7日分バックアップを取るようにしました)

## デメリット
* お金がかかること
現状のサーバー費用に16,804円/月が追加でかかる

初期スペックはこちら
db.t2.medium
0.104USD * 24時間 * 30日 × 2台 = 16,804円
https://aws.amazon.com/jp/rds/mysql/pricing/  

## RDS移行までの簡単な手順を以下にまとめました。

### 0.宣言

まずメンバーに何故、対応が必要か同意をえる。
費用、対応期間、対応方法を明確にする。

### 1. 現行のデータダンプを取得

phpmyadminを使っていたので
特に説明する必要はないと思いますが..以下コマンドでphpmyadminを起動

     docker-compose up -d phpmyadmin

ブラウザアクセスできるように

* AWSのセキュリティグループでphpmyadminに利用するポートを解放
* phpmyadminにアクセス
* データベースを指定してエクスポートを実行

### 2. RDSのインスタンスを立ち上げ

以下の記事を参考にさせていただきました。
https://qiita.com/na0AaooQ/items/7c69a88c80f1efb4cad3

* エンドポイントは後で必要になるのでコピーしておきましょう

### 3. ダンプファイルをdockerの/tmp/配下にコピー

     docker psでコンテナIDを確認
     897bc331c76a  laradock-mysql  "docker-entrypoint..."   6 weeks ago  Up 6 weeks    0.0.0.0:3306->3306/tcp  laradock-mysql_1

* docker cpコマンドでダンプファイルをコピー

     docker cp 〇〇.sql 897bc331c76a:/tmp/.

### 4. mysqlコンテナにbashではいり、リストアコマンドを実行

     docker-compose exec mysql bash
     mysql データベース名 -h エンドポイント* -u ユーザー名 -p < 〇〇.sql

### 5. laradockの.envファイルを修正し本番切りかえ

     .envファイルのホスト名を
     ローカルのデータベース　→　RDSのエンドポイントに

以上、割と簡単にできました。

サービスイン時はとにかく見た目の部分が優先になってきてしまいますが、
インフラって重要ですね。

アクセスが増えてきたらELBも入れたほうがいいでしょうが、まだまだですね。
grpcの練習がてらgoのディレクトリ転送パッケージを作成した

# なぜ作ったか
1. gRPCを練習するために，なにか作りたかった
2. 研究の過程で，ディレクトリを転送するパッケージがあったらいいのになと思っていた  
上記2つの動機が重なり，作りました．

# 成果物
https://github.com/youtangai/dts
使い方はgithubのREADMEをご覧ください

# 工夫
- パッケージを作るのは初めてだったので，いろいろなオープンソースを参考にディレクトリ構成を考えました．
- できる限りソースコードが見やすくなるように，以下の点に気をつけました．
    - 1関数30行超えないようにする
    - エラーや汎用的な関数は`lib`に用意する
    - 関心事に合わせてファイルを切り分ける(server.goやclient.goなど)

# 感想
ProtocolBuffersとgRPCの良い練習になりました．
ディレクトリを転送したいなんて需要はあまりないと思いますが，もしよかったら使ってみて，改善点など教えていただけると幸いです．
GAE/SE PHP7.2環境で旧来のようなマルチコントローラを実現する

GAE/SE PHP 7.2環境では5.5環境とapp.yamlの書き方が変わっており、フロントコントローラ構成が前提になっています（参照：「[GAE/SE PHP 5.5環境と7.2環境のapp.yamlの違い - Qiita](https://qiita.com/hnw/items/debbac04674cd7fbe869)」）。

しかし、置いたPHPファイルをそのまま実行したいんだ！ということもあるのではないでしょうか。そうした状況のための設定例を紹介します。

```
.
├── app.yaml
├── index.php
├── php
│   └── *.php
└── static
    ├── css
    │   └── *.css
    └── js
        └── *.js
```

```app.yaml
runtime: php72
entrypoint: serve index.php

handlers:
- url: /js
  static_dir: static/js
- url: /css
  static_dir: static/css
- url: /
  script: auto
- url: /.*\.php
  script: auto
```

```index.php
<?php
$path = @parse_url($_SERVER['REQUEST_URI'])['path'];
if ($path === '/') {
    $path = 'index.php';
}
$path = sprintf("%s/php/%s", __DIR__, $path);
if (file_exists($path) && is_file($path)) {
    require $path;
} else {
    http_response_code(404);
}
```

上記のディレクトリ構成とファイル内容にした上で、`/foo.php`にアクセスすると`./php/foo.php`が、`/bar.php`にアクセスすると`./php/bar.php`がそれぞれ実行されます。

ダミーのフロントコントローラを置いて実体ファイルを`require`しているだけなんですが、以前と流儀が変わって悩む人もいるかと思ったので記事にしておきます。
nodejsで開発/本番の設定を切り替える

##イントロダクション
Node.jsでローカルの開発環境と本番環境で設定を切り替えたいとき場面は多々ありますが、
その切り替え手法として自分としてのベストプラクティスを載せておきます。

## 変更前

＜開発環境用＞

```/scripts/config.dev.js
export const config = {
  mail : {
    host: 'mailhog',
    port: 1025,
  }
}
```

＜ステージング用＞

```/scripts/config.stg.js
export const config = {
  mail : {
    host: 'postfix',
    port: 25,
    auth: {
      user: 'user',
      pass: '12345678'
    }
  }
}
```

＜本番環境用＞

```/scripts/config.prd.js
export const config = {
  mail : {
    host: 'postfix',
    port: 25,
    auth: {
      user: 'user',
      pass: '12345678'
    }
  }
}
```

読み込み元のファイル
（※ビルドツールを使用する前提で記載していますので、直に書く場合はimportではなくrequireの書き方になります。）

```/scripts/app.js
import { config } from './config.dev.js' // ここを切り替えたい

console.log(config.mail);
// ...
```


## 切替機能の組み込み

### dotenvモジュールの利用
dotenvモジュールを使うとルートディレクトリに置いた.envファイルの値を読み取ってprocess.envに割り当ててくれますので、これを利用します。

npmでdotenvをインストール。

```
# npm i dotenv
```

.envをプロジェクトルートに設置して、切替用の変数だけ設定。

```/.env
# 開発環境は↓を記載
TARGET_ENV = development

# ステージング環境は↓を記載
TARGET_ENV = staging

# 公開環境は↓を記載
TARGET_ENV = production
```

### config.js

```/scripts/config.js
import dotenv from 'dotenv'
dotenv.config(); // .envをprocess.envに割当て

const setConfig = {
    // 公開用
    production : {
      mail : {
        host: 'postfix',
        port: 25,
        auth: {
          user: 'user',
          pass: '12345678'
        }
      }
    },
    // ステージング用
    staging: {
      mail : {
        host: 'postfix',
        port: 25,
        auth: {
          user: 'user',
          pass: '12345678'
        }
      }
    },
    // 開発用
    development : {
      mail : {
        host: 'mailhog',
        port: 1025,
      }
    }
}
export const config = setConfig[process.env.TARGET_ENV];
```
config.jsにてdotenvでの割当てを行い、process.env.TARGET_ENVの値で切り替わる形にします。

### app.js
```/scripts/app.js
// import { config } from './config.dev.js'
//   ↓
import { config } from './config.js'

console.log(config.mail);
// ...
```
config.js側で環境に応じて自動的に切り替えるので、configのファイルは1つになります。
pip checkを実行すると、モジュール間の依存関係を確認できるという話

# 実現したかったこと
Microsoft azureをSDKで起動し、Azure仮想マシン(=VM)の作成までを完全にPythonコードのみで実現したかった。

# 手順
そのため、[Azure SDK for Python](https://github.com/Azure/azure-sdk-for-python)をGithubのガイドにしたがってインストールし、手順については[公式ドキュメント](https://docs.microsoft.com/ja-jp/azure/virtual-machines/windows/python)の手順通りにスクリプトを作成した。

そしてpythonスクリプトを実行したが、結果エラーが出力された。
エラー内容は以下[リンク](https://github.com/Azure/azure-sdk-for-python/issues/703)内容と同様で'ImportError: No module named 'msrest'などのインポートエラーが出力する。

# 原因
インストールするモジュールの依存性だった。

# 処置
不要な（依存性を満たさない）モジュールを、pip uninstallでアンインストールし、
その後、必要なモジュールをpip install で再インストールして実行すると無事に起動した。

# 詳細
不要なモジュールを検知する（=依存性を確認する）コマンドとして、
**pip check** の存在を知った。

pip check での確認OK,NGの場合のターミナル上の出力は以下となる。

```terminal:OK
$ pip check
No broken requirements found.
$ echo $?
0
```

```terminal:NG
$ pip check
pyramid 1.5.2 has requirement WebOb>=1.3.1, but you have WebOb 0.8.
$ echo $?
1
```

②動かないソースは、githubにあるazure sdk for pythonの手順なので、この記事にたどり着いた方は、気をつけて下さい。原因は依存性です。
オブジェクト指向って何がすごい？本当にすごいの？使うべきなの？

# TL;DR

色々ともてはやされる「オブジェクト指向」です。

オブジェクト指向を使うことで色々な問題が解決されることがあります。

例えば、`private`によって保守性を上げることが出来ます。 `継承` や `ポリモーフィズム` によって、または `Stateパターン` によって条件分岐の複雑性を減らしたりできます。

ただ、こういう考え方自体は、**別にオブジェクト指向じゃなくても存在します**。
ただ**オブジェクト指向の方が得意**なのです。

というのも実は少しおかしな話で、というかむしろ逆で、**「オブジェクト指向」と呼ばれるものがなかった時代のスーパーエンジニア達が考え作りだしてきたスーパーテクニックを、一般大衆が使えるようにまとめあげたものが「オブジェクト指向」**なのです。

なので！！

すごくて当然です。


以上

# 実例

## C言語でのスコープの妙技

C言語では、`public`や`private`という言語的な概念はありませんでした。
ただ、C言語時代のエンジニアは、2つのグローバルスコープを使って、それを実現していました。

```
・ファイルを1オブジェクトと考える
・ファイル内のグローバル変数 … ファイル内からはアクセス可能、他ファイルからはアクセス不可 ≒ Privateなメンバ的な使い方
・ファイルをまたがったグローバル変数 … どのファイルからでもアクセス可能 ≒ Publicなメンバ的な使い方
```

です。
これによって実装のしやすさを維持しつつ保守性をあげてました。

## 関数ポインタによるポリモーフィズム

これも黄金パターンですが、C言語では関数ポイントとして関数のポインタを変数で持つことが出来ます。

なので構造体に関数ポインタを持たせることで、変数と関数≒メンバとメソッドをひとまとめにすることは普通に行われていました。

また、関数ポインタを、配列にいれて、イベントが発生するたびに配列の添え字を操作して、処理を切り替えていくというのもドライバ界隈では普通に行われていたことです。関数ポインタの型さえ一緒であれば呼び出しが可能なので、アドレスを入れ替えることで、呼び出し元には手を加えずに、別の処理を呼び出すことができました、

インタフェースが一緒であれば、リンクする `.so` を変えることで処理を変えるということもできました。

これはいわゆるポリモーフィズムです。

## つまり

ただ、これらはC言語の本来の使い方ではなく（わけではないですが……）、その有効性が明らかであるのにかかわらず、初学者からみるとかなりトリッキーで難易度が高いものでした。

こういう過去の偉人たちのノウハウをまとめて、それを「新たな言語」のレベルまで「新たなパラダイム」にまで持っていったものが「オブジェクト指向」です。

それは、すごくて当然なのです。

実際わたしのまわりの、こういうのを普通にやっていた先輩エンジニア達は、オブジェクト指向が出てきたときにも「別にいままでやってたことだよね？」という涼しい顔をしていました。。。そこまでの道のりを、ぎゅっと縮めてくれたのがオブジェクト指向だと思って、十分にそのメリットを活用していただければと思います。
GoogleTagMangerってこんなもの

ディレクター目線のGoogleTagMangerの紹介になります。
認識違うところもあるかもしれませんので参考程度に

# 目次
#### GoogleTagMangerについて

- [GoogleTagMangerとは](#GoogleTagMangerとは)
- [タグマネージャーツールを使用するメリット](#タグマネージャーツールを使用するメリット)
- [デメリット](#デメリット)
 
#### GoogleTagMangerの導入

- [おすすめ導入タイミング](#おすすめ導入タイミング)
- [準備するもの](#準備するもの)
- [GTMの新規登録](#GTMの新規登録)
 
# GoogleTagMangerについて
## GoogleTagMangerとは
GoogleTagMangerはタグマネージャーツールの一種です。GTMと呼ばれてます。
googleのツールであり、adwords、オプティマイズ、アナリティクス等に対応してますので、そういったものを多く利用している場合はおすすめのツールです。
**公式ヘルプより**(https://support.google.com/tagmanager/answer/6102821?hl=ja&ref_topic=3441530)
>Google タグマネージャとは、ウェブサイトやモバイルアプリに含まれるタグやコード スニペットを素早く簡単に更新できるタグ管理システムです。
タグマネージャのスニペットをウェブサイトやモバイルアプリに追加すると、他のコードを変更したり設置したりすることなく、ウェブベースのユーザー インターフェースからタグを設定することができます。
これによりエラーを減らせるほか、タグを変更する際にデベロッパーに頼る必要もなくなります。

## タグマネージャーツールを使用するメリット
- 管理画面の操作、プレビュー、本番反映が容易
    - ソースコードを毎回リリースする必要がないため、リスク低減につながる
    - プレビュー機能があるため、自分のブラウザ上で検証が可能
    - プレビュー時にエラーを教えてくれる
- 提供しているタグの設置が容易
    - 一般的なものであれば、学習コストがほぼなく使用可能
    - javascriptに自信がなくてもなんとかなる

## デメリット
- 新規サイトでない場合は導入コストが高い
    - ワンタグ・コンテナタグを入れるだけでは完結しない為
    - 少数のタグを運用している場合はメリットを感じにくい
    - 同期処理のタグ等、発火するタイミングを調整することは可能だが、自己責任での設置
- 誰でも簡単に使用できてしまう
    - サイトに影響の与えるものを公開してしまったりする可能性

# GoogleTagMangerの開始

## おすすめ導入タイミング

- サイトのリニューアル時
- 新規サイト作成時
- 外部タグの数が増えて今後を思うと悲しくなった時

## 準備するもの
- Googleアカウント
- 導入するサイト

## GTMの新規登録

ここからは、WEBサイトに設置をする想定でやり方を掲載していきます。

### 1. GTMのログインページへアクセス

https://www.google.com/intl/ja/analytics/tag-manager/
googleにログインした状態で無料登録ボタンをクリックします。

### 2.アカウントの追加
アカウントの設定に入ります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/152116/1863303a-03a4-eb0c-abb5-d1fbd68605d9.png" width=80%>

必要事項を入力後、続行（アカウント名は後から名称変更可能。）

`Google や他の人と匿名でデータを共有`
こちらに関しては、サイト等は特定されない状態でデータが利用されることになるとうものなのでお好みで

### 3. コンテナの設定
コンテナの設定に入ります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/152116/60549ab3-7cf2-a980-a471-2544d08bc7b8.png" width=80%>

コンテナ名の例がドメインになっていますが、サイト名でも問題ないです。（こちらも後から名称変更可能。）
コンテナの使用場所は今回はWEBサイトへ設置するため、ウェブを選びます。

### 4. Google タグマネージャ利用規約

Englishで出ますが、右クリックなりで日本語に翻訳していただいたりして確認後同意してください。
下部にデータ処理規約のチェックもありますので確認後問題なければチェックを。

### 5. Google タグマネージャをインストール
規約同意後、管理画面へ遷移しますがポップアップでスニペットタグが画像のような表示されます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/152116/4cad834f-6299-e22b-455e-587eefc062ef.png" width=80%>
案内に従って`<head>`内と`<body>`の開始直後にそれぞれタグを設置してください。

**設置しても設置しなくてもOKを押せばポップアップ消えますので、ここまででGTMの新規登録は完了です。**


## （余談）コンテナスニペットの設置

新規作成のところではさらっと書きましたが、コンテナスニペットの設置方法についてちょっと詳しく。
コンテナスニペットタグは`<script>`タグと`<noscript>`タグの二種類あります。

`<script>`タグ
`<head>`内の上の方にするように指定されています。
これはGoogleoptimizeでABテストを行う際にページ表示よりも早くテストパターンを読み込むだとかそういった理由のようです。

`<noscript>`タグ
javascriptが動かなかった場合に動くようにするGTMタグになります。無くても動きは動きますが設置したほうが良いです。
IBM CloudのGitの個人用アクセス・トークンの認証


![GitLab.png](https://qiita-image-store.s3.amazonaws.com/0/64173/2ef0901b-089a-4716-27b6-8c1233fd8682.png)

## ここを見れば大体わかる
https://console.bluemix.net/docs/services/ContinuousDelivery/git_working.html#git_authentication

## 手順
1.アクセス・トークンの作成
アクセストークンのページを開く
https://git.ng.bluemix.net/profile/personal_access_tokens?cm_sp=dw-bluemix-_-nospace-_-answers

 - アクセス・トークンを作成するアプリケーションの名前を入力します。 例えば、「Git CLI」と入力します。
 - オプション: アクセス・トークンの有効期限日を選択します。
 - api チェック・ボックスを選択して、スコープとして api を使用する個人用アクセス・トークンを作成します。
「個人用アクセス・トークンの作成 (Create Personal Access Token)」をクリックします。 後で使用するために、アクセス・トークンを安全な場所にメモしておきます。

2.Git Repos and Issue Tracking ユーザー名の取得
https://git.ng.bluemix.net/profile/account?cm_sp=dw-bluemix-_-nospace-_-answers

の「Change username」セクションで自分のユーザ名を見つけてメモしておきます。

3.cloneする
`git clone https://ユーザ名:アクセス・トークン@git.ng.bluemix.net/user name/repository name.git`
ざっくりしすぎなDocker

ざっくり自分向けメモ。

Dockerfileを書く→ビルドをするとイメージが出来上がる→イメージを元にコンテナを立ち上げる。

# Dockerfile
Dockerfileを作ることでイメージを自作できる。

`FROM`にベースとなるイメージ名書く。
`RUN`はイメージをビルドするときにコンテナに実行させるコマンドを書く。
'CMD'はコンテナが起動したあとにコンテナに実行させるコマンドを書く。
`COPY`や`ADD`はホストからファイルを取り込むことができる。

もちろんコレだけじゃないけど、僕はコレくらいでもの足りる程度のことしかしてないのでコレだけ。

```dockerfile:Dockerfile
# DockerHubにあるubuntuイメージを元にする
FROM ubuntu

# コンテナのなかでコマンド実行
RUN apt-get -y update && apt-get install -y python3-pip python3-dev vim

# flaskが使いたいので
RUN pip3 install flask

# ホストにあるpythonのスクリプトを持ってくる
COPY src/ /opt/

# コンテナでFlaskを使ってるPythonのやつを動かす
CMD python3 /opt/app.py

```

# build

```bash
$ docker build -t <イメージ名> <Dockerfileのあるパス>

# 作業ディレクトリにあるなら...
$ docker build -t <イメージ名> .
```

`-t`オプションをつけることでイメージに任意の名前をつけることができる。
名前つけないとわかりにくいしつけるべきだと思う。

ビルドして得られたイメージは`/var/lib/docker`とかそのへんのシステムのとこに置かれている。
イメージのパスは把握してなくてもよさそう。

作成・取得したイメージは`docker images`コマンドで確認できる。
名前つけないとといい加減に与えられた英数字のIDを使う羽目になってメッチャめんどくさいので名前つけような。

## ちなみに
`-f`オプションでDockerfileの名前を指定できる。

```bash
$ docker build -t <イメージ名> -f <Dockerfileの名前> <Dockerfileのあるパス>
```

# run
さて、イメージも作れたしコンテナ起動すっかぁ〜！
`docker run`コマンドでコンテナを作成する。

```bash
$ docker run -it --name <コンテナ名> <イメージ名>
```

`-i`オプションはコンテナの入力にホストの入力を繋いでくれる。
`-t`オプションはコンテナのターミナルをホストのターミナルに繋いでくれる。

作られたコンテナもイメージと同じようにシステムのディレクトリに保存される。
コンテナは名前がかぶると「名前かぶっとるんやが？」とコンテナを上書きせずにキレる。

同名のコンテナを再度作るときは削除した後に`docker run`をする必要がある。

## 消したり、一覧見たり

```bash
# コンテナの様子をみる（-aオプションで動いていないやつも表示）
$ docker ps -a

# コンテナ削除
$ docker rm <コンテナ名>
```

## オプション系

### --rm

`docker rm`でわざわざ消すのめんどっちーってときは`--rm`オプションをつけることで回避できる。

```bash
$ docker run -it --name <コンテナ名> --rm <イメージ名>
```

### -d

フォアグラウンドに来んなや！！って思うときは`-d`オプションをつける。（デタッチ）

```bash
$ docker run -itd --name <コンテナ名> <イメージ名>
```

デタッチしたやつにつなぎたいときはコレを唱える。

```bash
$ docker exec -i -t <コンテナ名> bash
```

###-p

`-p`オプションでホストとコンテナ内のポートを繋げられる。

```bash
$ docker run -itd -p <ホストのポート>:<コンテナのポート> --name <コンテナ名> <イメージ名>
```

# コンテナのなかで動かしてるFlask製webページにアクセスする

```bash
# コンテナをうごかす
$ docker run -itd -p 30000:80 --name <コンテナ名> --rm <イメージ名>
```

で、ホストのブラウザとかで`localhost:30000`にアクセス。

# 参考にしたサイト
[さくらのナレッジ Docker入門](https://knowledge.sakura.ad.jp/13265/)
[Dockerのイメージファイルの格納場所](https://qiita.com/tifa2chan/items/b9607d80fb58476e4ef5)
[ねここくぶろぐ Dockerイメージ、コンテナの場所](https://www.neko6.info/archives/1979)
[Dockerfileを極めて、Dockerマスターになろう！](https://qiita.com/soushiy/items/0945bcbc7ecce4822985#%E5%9F%BA%E6%9C%AC%E6%A7%8B%E6%96%87)
[Dockerコンテナのシェルの中に入る](https://qiita.com/__cooper/items/4740c24666299c366044)
[Docker ドキュメント日本語化プロジェクト](http://docs.docker.jp/index.html)
modelの命名規則(Rails)

##モデルとは

データベースへのアクセスや、データのやり取りを担当しているファイル。

コントローラーがモデルを利用してデータを抽出し、それをビューに渡している。


##テーブルとモデルの名前は決まっている

| 種類 | 概要 | 名前例 |
|:--|:--|:--|
| モデルクラス名 | 先頭は大文字、単数形 | Tweet |
| モデルクラスのファイル名 | 先頭は小文字、単数形 | tweet.rb |
| テーブル名 | 先頭は小文字、複数形 | tweets |

テーブルには多くのレコードが入っているから複数形？



モデルの作成には、

```ruby:ターミナル
$ rails g model モデルクラス名(全て小文字)
```
を使用する。

打ちまちがえで作成したモデルを削除したいときは

```ruby:ターミナル
  $ rails d model モデル名
```

で削除可能。


##rails g modelコマンドでモデルファイルを作成すると、そのモデルに結びつくテーブルの設計図も一緒に生成されている。


いわゆるマイグレーションファイルが一緒に作成されている。
マイグレーションファイルは「実行」することでテーブルを作成する機能を持っている。


##マイグレーションファイルとは

テーブルの設計図。作成したいテーブルに必要なカラムを記述することで、マイグレーションファイルを実行した際にその通りにテーブルが作成される。

主なカラムの型は、


| 型 | 説明 | 用例 |
|:--|:--|:--|
| integer | 数字 | ユーザーのidなど |
| string | 文字(少なめ) | ユーザー名、パスワードなど |
| text | 文字(多め) | 投稿文など |
| boolean | 真か偽か | 真偽フラグ |
| datetime | 日付と時刻 | 作成日時、更新日時など |


##マイグレーションファイルの実行

マイグレーションファイルを「実行」するためのコマンドは、

```ruby:ターミナル
$ rake db:migrate
```

マイグレーションを実行すると、**スキーマファイル**というファイルも作成される。
スキーマファイルは最新のマイグレーションファイルのバージョンが記録されているファイル。

rake db:migrateコマンドを実行すると、初めにschema_migrationsを参照し、実行されていないmigrationファイルがあるかどうか調べ、あればそれを実行する。
なので、rake db:migrateを複数回実行しても、同じmigrationファイルは再度実行されない。**また、一度実行されたmigrationファイルの中身を変更してもそれは反映されない。**


##じゃあデータベースの中身を変えたい場合は？
migrationファイルの中の記述を間違えていて、自分の意図しないテーブルが作成されてしまった場合は、

```ruby:qiita.rb
$ rake db:rollback
```

コマンドを使用する。このコマンドを使用することで、データベースの状態が最新のmigrationファイルを実行する前に戻る。
オブジェクト指向に限らず守りたい最重要原則 ”open/closed principle - OCP - 開放/閉鎖原則”（SOLID原則より）


GoFのデザインパターンやGRASPと呼ばれるパターンがあります。

オブジェクト指向プログラミングには`Public`や`Private`等のスコープがあります。

それが何のためにあるかと言えば、この**open/closed principle - OCP - 開放/閉鎖原則**を守るためと言っても言い過ぎじゃないです。

もう少し補足すると、`Public`や`Private`や`デザインパターン`を使うことによってこの**open/closed principle - OCP - 開放/閉鎖原則**を守った設計が自然と出来るということです。

> ちなみに、この OCP というのは オブジェクト指向の基本原則（基本５原則）と呼ばれるものの１つにあげられます。他の4つもとても重要なものではあるのですが OCP の重要さには負けます。
>
> ちなみに今はこれを SOLID原則 と言う方が一般的らしいです。。

# サマリー

OCPを簡単に表現すると、

```
拡張に対して開いて (open) いなければならず、
修正に対して閉じて (closed) いなければならない
```

という設計上の原則のことです、 

もう少し平易な日本語で説明すると、

```
何か機能追加があった場合には、既存のコードには手を入れず、オブジェクトの追加によって対応可能であるべきであり、
何かバグなどの修正が入った場合には、バグが入ったオブジェクトだけを修正することで対応可能であるべきである。
```

ということを言ってます。

これはソフトウェア設計に限定された話ではなく様々な構造物において大事な原則です。

何か家電であったり自動車であったりも部品が壊れたらその壊れた部品の交換だけで済むべきです。何か機能の追加がしたければその機能をプラグイン的に差し込むだけで拡張できるべきです。

そういうことを言っています。

# 主な実現方法とメリット

オブジェクト指向においてどうやってこれを実現するか？という実装例です。

## 拡張 - Open について

実現方法の前にこれが実現できていなかったケースは以下になります。
機能追加があったときに、そのクラス自体を修正しています（`functionA'`とそれを使う `feature B`を追加してます）。このクラス自体に変更が入っているために今まで `class_A` を使っていた `feature A` でも再テストが必要になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33095/3bdf11d4-4526-3e3c-4036-0451f3ae26ec.png)

OCPの原則を守るためにこの問題を「継承」を使って解決します。
*※ 解決のために継承を使う場合とインタフェースを使う場合がありますが本質的には同じことを指すためここでは「継承」を扱ってます。*

次にこれを「継承」を使って実現した場合には以下のようになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33095/dc3c5e53-822e-6e2e-91fc-8641a885ea3f.png)

継承を使い既存のオブジェクトには一切手を加わえることなく `class_A'` を作ることで機能の追加を行っています。 `class_A` を使っていた `feature A` には影響なく、`feature B` のための機能拡張ができています。

これが、拡張に対して開いている、という状態です。

## 修正 - Closed について

こちらは比較的簡単で、修正があった場合にはなるべく影響範囲を少なくしようという話です。

ある機能がバラバラに複数のクラスにまたがるのではなく、1つのクラスに封じ込めることで、ある機能に不具合があっても、その機能を表現している1クラスの修正で済ませるべきという考え方です。

ここに関しては他の基本原則である SRP が関わってくるので、いつかそちらでも説明します。

> ここでもSRPの原則がなぜ必要かというと、OCPが守れるからと言ってしまってよいと思います。

## メリット

機能追加（拡張）に対して、既存クラスに手を加えていないことが保証されているため、少ないリスクで作業が可能です。
先述の図で言うと、`feature A`への影響がない状態で機能の拡張`feature B`の追加ができるということです。

小さな規模での少人数での開発では、このメリットがピンとこないこともあるかと思います。
ある程度規模が大きくなっていくと、1つのクラスに本当に多くの機能が依存しているため、そのクラスの修正による影響範囲の分析も難しく、そのための再テストの工数も膨大になってきます。

そのような問題を回避できるのが **open/closed principle - OCP - 開放/閉鎖原則** です。

# まとめ

最初にも言いましたが、これはソフトウェア設計に限定されず様々な構造物において大事な原則です。
何か家電であったり自動車であったりも部品が壊れたらその壊れた部品の交換だけで済むべきです。何か機能の追加がしたければその機能をプラグイン的に差し込むだけで拡張できるべきです。

ただ、いくらこれが大事だとわかっていても、これを実現するためには非常に様々なテクニックが必要になります。
われわれが対象としているシステムや事象というのは、われわれが想像している以上に複雑なものです。

オブジェクト指向、デザインパターンといったものを使うと、これの実現のための最低限の道しるべが出来ます。

なんならオブジェクト資料やデザインパターンというものはOCPのためのフレームワークといっても良いかもしれないです。
vue.js-画像ファイルアップロード後の表示

#window上で選択したfileを表示する方法
Vue.jsを使うと簡単に選択したfileを表示することができたので、練習ながらまとめておく。

##HTML
input要素(type="file")を使って行った。

```index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<link rel="stylesheet" href="style.css">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<input type="file" @change="change">
			<div v-if="preview">
				<img :src="preview">
			</div>
		</div>

		<script src="main.js"></script>
	</body>
</html>

```
##Vue.js
dataは、previewとし、index.htmlのimg要素内のsrc属性に紐づけしておく。

```main.js
var app = new Vue({
	el: '#app',
	data: {
		preview: ""
	},
	methods: {
		change: function(e){
			var file = e.target.files[0];
			if(file && file.type.match(/^image\/(png|jpeg)$/)){
				this.preview = URL.createObjectURL(file);
			}
		}
	}
});

```
##main.js内のまとめ
- input type="file"にはfilesというObjectがある。
そのfiles[0]に選択したファイルがObjectで入っている。
それを変数fileに格納する。
- file.typeは、(image/png|jpeg)なので、正規表現を用いてmatch した場合のみ表示するようにする。
- URL.createObjectURL(file)を用いる。
[URL.createObjectURL()](https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images)
- データ、previewをバインドしているので、画像が表示される。
link_toでshow(:id)へのリンクを生成

#link_toで/:idのリンクを作る
URLが/user/:idの詳細ページへのリンクを作りたい

controllerでユーザーのIDを取得

```user_controller.rb
def show
 @user = User.find(current_user.id)
end
```
IDは@userに入る

```user.html.erb
<% link_to('Show', user_path(@user)) %>
```

```user.html.erb
<% link_to('Show', user_path(current_user.id)) %>
```
とも書くことができた。