OmniAICreator/Qiita-1.07M huggingface dataset:
【UE4】SideScrollerテンプレートのSideScrollerCharacterに180度ターンを簡単に実装

久しぶりに記事を書きます。UE4初心者向けのかゆい所に手が届く内容です。
SideScrollerテンプレートのSideScrollerCharacterに、180度ターンを簡単に実装する記事です。

#SideScroller ターン時の問題点

UnrealEngine4で3Dのサイドスクロールゲームを作成する時に、大多数の人がSideScrollerテンプレートを使うと思われます。
SideScrollerテンプレートはデフォルトで2Dのように移動、ジャンプが実装されているため、自分もサイドスクロールゲームを作成する時はよく使用します。

ただ、このSideScrollerテンプレート、絶妙に困る部分が一つあります。
それは**逆を向く時**です。

![side.gif](https://qiita-image-store.s3.amazonaws.com/0/104377/ed900471-1ce5-eaa5-fec5-32af2c2d6bdf.gif)

こんな感じで、向いてる方向と逆に向きたい場合、このGIFのように正面を向いてターンをするようになっているので、ボタンを押したらすぐに逆を向いてほしい場合には適しません。

なので、これを解決するためにSideScrollerCharacterに、簡単な180度ターンを入れてしまいましょう。

UE4フォーラムの[3D Sidescroller: How to make a character turn in instant 180° intervals?](https://forums.unrealengine.com/development-discussion/content-creation/33052-3d-sidescroller-how-to-make-a-character-turn-in-instant-180%C2%B0-intervals)を元に実装しています。

今回は**BluePrint**で実装しています。

#180度ターン(SideScroller限定)

さっそくサイドスクロール用の180度ターンを実装しましょう。

まず、SideScrollerCharacterを開きます。
位置がわからない人は、以下の画像を見てください。
![フォルダ.png](https://qiita-image-store.s3.amazonaws.com/0/104377/f68d580d-819f-0863-d427-4d33245e4f92.png)

修正を加えるのは、イベントグラフのMovement inputとコメントされている部分です。
![MovementInput.png](https://qiita-image-store.s3.amazonaws.com/0/104377/c06a88e7-54d0-1bf4-1e76-44d4da9183cc.png)

Axis MoveRightインプットイベントの修正に入る前に一つ、180度ターンを処理を行う関数を作成しましょう。

##関数作成

関数を作成します。関数の部分にある＋のボタンをクリックして、関数を作成します。
以下は、関数名の例です。
![関数.png](https://qiita-image-store.s3.amazonaws.com/0/104377/05ed5356-8122-b4cb-727c-871947cc2e0f.png)

次にインプットにFloatの変数ピンを一つ追加します。
以下は名前の例です。
![インプット.png](https://qiita-image-store.s3.amazonaws.com/0/104377/83840802-e36a-c70e-3de0-fcd56b272b9e.png)

最後に関数を以下の画像のように実装します。
![BP.png](https://qiita-image-store.s3.amazonaws.com/0/104377/c76f043c-dada-67e5-2acd-2dd85b7f1f3b.png)
SweepとTeleportのチェックを入れているのは、一応プレイヤーが壁等を通過してしまう可能性を考慮にいれたのと、直ぐに逆を向いてしまうのでテレポートさせて変な物理の粗ぶり等を防ぐためです。


Blueprintueにソースをコピペして貼り付けられるものを作成したので、使うようであればこちらからジャンジャン使ってください
[SideScroller180Rotate](https://blueprintue.com/blueprint/9c7-l365/)

##インプットイベント修正

次にAxis MoveRightインプットイベントに、先ほど作成した関数を呼び出すように、以下のように修正します。
![EG.png](https://qiita-image-store.s3.amazonaws.com/0/104377/086df52b-6c47-2e03-ae01-edccb087f8bc.png)

こちらもBlueprintueにソースをコピペして貼り付けられるものを作成したので、使うようであればこちらからジャンジャン使ってください
[SideScroller180RotateInputEvent](https://blueprintue.com/blueprint/mti7p19_/)

#実装結果

上記を実装すると、以下のようにすぐに逆を向くようになりました。やったね!
![side2.gif](https://qiita-image-store.s3.amazonaws.com/0/104377/e3c4b28c-852c-2970-dbea-b3b8510643ae.gif)

これで地味に物足りない部分が簡単に解決しました。
ゲームによってはすぐに逆を向いてほしいというのもあるので、ここに書かれているのを参考にサクッと180度ターンを実装してしまいましょう。
音声操作可能なiOS(iPhone iPad)ブラウザアプリを作りました

iPhone、iPad向けに音声で操作可能なブラウザアプリを作りました。

## できること

基本的に普通にブラウジングする分にはすべて音声操作で完結するようにしてあります。
具体的には検索、スクロールダウン・アップ、リンクのクリック、戻る・進む、リフレッシュ、などです。
音声で操作が完結する部分に注力していて、タブを複数開いたりブックマークを登録するといった、ブラウザとして当たり前のように求められる機能は全然実装していません。
ただ、このアプリはITリテラシーがあまり高くないようなユーザーをターゲットにしているため、そういった機能があったとしてもあまり使われないんじゃないかと思います。

## デモンストレーション

デモンストレーション動画はこちらです。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/pE7m-M3hovo/0.jpg)](http://www.youtube.com/watch?v=pE7m-M3hovo)
## 作った背景

少し前にGoogle HomeやAmazon Alexaなどスマートスピーカーがブームになり、音声でデバイスを操作するということが当たり前になってきているような印象があります。
個人的には何かに対して話しかけることで操作するというインターフェースはあまりピンとこないというか、声を出すのよりは指先を動かしたほうが楽に感じてしまうのですが、例えば私の母親なんかは何かを検索するときには必ず音声で入力しているので、音声操作は可能性があるのかなと考えてちょっと作ってみました。

## 想定ターゲットと用途

- 体が不自由な方  
  デバイスを指で操作するのが難しい方が利用する
- スマホの操作が苦手な方  
  画面をタッチするのが意外と難しかったり、ブラウザバックの横スワイプが苦手だったりする方が該当する操作を声で実施する
- 手がふさがっているタイミング  
  料理中だったり、庭仕事をしている時など、テでスマホを触れない状況で利用する

## 反省点

アプリを何人かに利用してもらって感じた反省点です

- 画面上部に音声入力された文字列を表示するウィンドウがあるが、これがsafariのURL入力ウィンドウと似ているため、タッチしようとしてしまう
- 音声操作が直感的じゃない。操作方法を説明しないと全然使えない
  - 音声操作で何ができるかわからない、操作のためのキーワード（「検索」としゃべると検索画面に移動するなど）がわからない
  - 「これ音声で操作できるんです」といって渡すといきなり検索用の文言を話始めるが、その操作はできない
  - アプリは5秒単位で操作用の音声を聞き直している。この聞き直しが発生する前のタイミングから操作用の音声を話しても、その前の音声と混ざってしまいうまく操作できない。これはストレス
- 親世代は音声入力は使うよくが、音声操作の必要性はあまり無い様子。入力はあの小さく使い慣れていないキーボードで入力しないといけないため、結構大変。しかし操作は基本的にタッチやスワイプができれば完結するので、それらのイベントを音声で行える必要性はあまり無い  
思えば一番始めに携帯を手にしたときは入力だけやたらと大変だった。あの感覚と同じなのだろう
- となると、あとは体が不自由な方の利用や手がふさがっているタイミングでどれだけ使えるかになってくるのだが、全然検証できていない

## 展望

思いつきで作ったので上記のような反省点が出てくるのはしょうがないとは感じつつ、展望を考えてみます。
まず、ターゲットが甘いので今想定しているユーザーごとにもう少し深ぼる必要があると思っています。
例えば本当に音声操作のみで完結できるようにするのであれば、もっと使いやすいユーザー体験にする必要があります。
今アプリが操作を待っている(聞いている)のかどうかはっきり明示したり、常に操作を待っている状態で行くのであればもっと柔軟に命令に対応してあげる必要があります。
もし音声操作は受け付けつつITリテラシーの低いターゲットに注力するのであれば、音声は入力が主だと割り切りそれに注力したUIUXにするのもありだと思います。例えばアプリを開いた瞬間から、検索クエリを聞いているみたいな。

あとこういった個人開発は作るのが楽しくて本当に価値があるのかあまり検証せずに進めますが、本気だすとしたらやはりユーザーを見つけ、対話をしながら進めるべきです。

## ダウンロードはこちら

と、完成度が低くQiitaユーザーのようなリテラシーの高い方々には箸にも棒にもかからないとは承知しつつ、一応リンクを載せておきます。よろしくお願いします。

[Vrowser / ボラウザ](https://itunes.apple.com/jp/app/vrowser-%E3%83%9C%E3%83%A9%E3%82%A6%E3%82%B6/id1436267251?platform=iphone&preserveScrollPosition=true#platform/iphone)

## 付録：Apple Storeへの提出と審査

今回始めてiOSアプリをリリースしました。Appleへの提出と審査に関して感じたことを書きます。

- 審査は早い。昔は一週間くらいかかっていたと聞きますが、今は2日以内で審査が終了します。
- 審査はちゃんとしている。メタデータ(アプリそのものではなく宣伝用の画像など)に不備があり、一度リジェクトされましたがその理由はしごくうなずけるものでした。それらを修正したら承認されました。
- リリースは思ったほど大変じゃなかった。key chainやprovisioning profile、XcodeからApp Store Connectへのアップロードなど、iOSは審査依頼までかなりステップがあります。ですが大きくハマることもなく、問題があった場合その指摘もわかりにくくはなかったので、アプリができてからは2,3時間で審査依頼までこぎつけました。
MSTestでプライベートメソッドの参照渡しをテストする

VS2015のMSTestで、StaticでPrivateなメソッドをテストするのにPrivateTypeのInvokeStaticを使用している。
ただ、メソッドの引数が参照渡しの場合、パースが通りません。

```C#:ダメな例。refキーワードは付けられない。
p.InvokeStatic("GetFiles", Dirpath, Ref No);
```

こう書いたら解決しました。

```C#:object配列で引数を渡す。できました。
object[] args = new object[] { Dirpath, null };
p.InvokeStatic("GetFiles", args);
No = args[1] 'argsに参照値が入る
```
Ethereum[CryptoZombies][ハッシュ関数・キャスト・イベント]

# ハッシュ関数

ランダムにuintで返すハッシュ関数に`keccak256`があります。
ハッシュ関数は基本的には、文字列をランダムな256ビットの16進数にマッピングします。

# 型キャスト
場合によっては、データ型を変更する必要があるときがあります。

```contract.sol
uint8 a = 5;
uint b = 6;
// a * b はuint8ではなくuintで返すので、エラーになります
uint8 c = a * b; 
// 正しく動作させるために、bをuint8に型キャストさせます
uint8 c = a * uint8(b);
```

この例ではa * bはuintを返し、uint8で格納しようとしているので、問題が発生することになります。
uint8にキャストすることで、正常に動作する上にコンパイラもエラーを吐き出すことがなくなります。

# イベント

Eventは、ブロックチェーンで何かが生じたときに、コントラクトがアプリのフロントエンドに伝えることができるものです。しかも特定のイベントを'listening'状態(接続待ち)にして、何かあった時にアクションを起こすこともできます。

```contract.sol
// イベントの宣言
event IntegersAdded(uint x, uint y, uint result);

function add(uint _x, uint _y) public {
  uint result = _x + _y;
  // 関数が呼ばれたことをアプリに伝えるためにイベントを発生させる：
  IntegersAdded(_x, _y, result);
  return result;
}
```

アプリのフロントエンドをlistening状態にできる。JavaScriptで実装すると次のように書けます。

```example.sol
YourContract.IntegersAdded(function(error, result) { 
  // 結果について何らかの処理をする
}
```


# Web3.js
イーサリアムにはWeb3.jsというJavascriptライブラリがあります。
Web3.jsがどういう風にコントラクトとやり取りするのか、サンプルコードを以下に書きます。

```javascript

// これがコントラクトにアクセス：
var abi = /* abi generated by the compiler */
var ZombieFactoryContract = web3.eth.contract(abi)
var contractAddress = /* our contract address on Ethereum after deploying */
var ZombieFactory = ZombieFactoryContract.at(contractAddress)
// ZombieFactoryはコントラクトのpublic関数とイベントにアクセスできる。

// 入力テキストを取得するイベント
$("#ourButton").click(function(e) {
  var name = $("#nameInput").val()
  // createRandomZombie関数を呼び出す部分
  ZombieFactory.createRandomZombie(name)
})

// NewZombieイベントをlisteningしてUIを更新
var event = ZombieFactory.NewZombie(function(error, result) {
  if (error) return
  generateZombie(result.zombieId, result.name, result.dna)
})

// ゾンビのdnaを取得して画像を更新
function generateZombie(id, name, dna) {
  let dnaStr = String(dna)
  // 16桁未満の場合はDNAの先頭に0をつける
  while (dnaStr.length < 16)
    dnaStr = "0" + dnaStr

  let zombieDetails = {
    // 最初の2桁は頭の部分だ。頭部は7種類用意してあるから、%　7して
    // 0から6の番号を取得したら、そこに1を足して1から7にする。
    // これを基にして、"head1.png" から"head7.png"までの
    // 画像ファイルを用意する
    headChoice: dnaStr.substring(0, 2) % 7 + 1,
    // 次の2桁は目の部分だ。11種類用意してあるぞ：
    eyeChoice: dnaStr.substring(2, 4) % 11 + 1,
    // シャツの部分は6種類用意してある：
    shirtChoice: dnaStr.substring(4, 6) % 6 + 1,
    // 最後の6桁は色の部分だ。 CSSのフィルタを使用して更新できる。
    // 360度の色相回転（hue-rotate)を使う
    skinColorChoice: parseInt(dnaStr.substring(6, 8) / 100 * 360),
    eyeColorChoice: parseInt(dnaStr.substring(8, 10) / 100 * 360),
    clothesColorChoice: parseInt(dnaStr.substring(10, 12) / 100 * 360),
    zombieName: name,
    zombieDescription: "A Level 1 CryptoZombie",
  }
  return zombieDetails
}
```

以上です。
【IIS】 TLS セキュリティ設定でエラーになった時

# 既存の今まで表示できていたサイトがIISのサイト表示時にエラーになった

## IISのエラーメッセージ


```
このページに安全に接続できません
サイトで古いか安全でない TLS セキュリティ設定が使用されている可能性があります。この問題が解決しない場合は、Web サイトの所有者に連絡してください。
```


### 試してみたチェック項目
- [x] セキュリティーソフトを停止
- [x] 他ブラウザで表示
- [x] 他サイトをチェック

全て解決せず"(-""-)"


## 解決方法

もしかして？と思って証明書をチェック
SSL証明書が未選択になっていた⇒通常はこれで「OK」が押せないので何らかの原因で外れてしまったことが原因だったと思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/278660/915e4cbe-47c2-1405-88f8-246a74772cda.png)

## 正しいSSL証明書を選択したらサイトが無事表示されました。
EC2起動前自動化処理

お決まりの内容だけど、EC2インスタンスを立ち上げる時の初期設定を毎回するのめんどくさいのでユーザーデータから自動化しておこうという内容。


##指定箇所

インスタンス作成画面から「３．インスタンスの設定」で高度な詳細を開いた場所


##ユーザーデータの内容

・AmazonLinux/Centos6の場合

```
#!/bin/bash

# ホスト名
sed -i 's/^HOSTNAME=[a-zA-Z0-9\.\-]*$/HOSTNAME=hostname-hogehoge/g' /etc/sysconfig/network
hostname 'hostname-hogehoge'

# タイムゾーン
cp /usr/share/zoneinfo/Japan /etc/localtime
sed -i 's|^ZONE=[a-zA-Z0-9\.\-\"]*$|ZONE="Asia/Tokyo”|g' /etc/sysconfig/clock

# 言語設定
echo "LANG=ja_JP.UTF-8" > /etc/sysconfig/i18n

# yum update
yum update -y
```

・AmazonLinux2/CentOS7の場合

```
#!/bin/bash

# ホスト名
hostnamectl set-hostname hostname-hogehoge

# タイムゾーン
timedatectl set-timezone Asia/Tokyo

# yum update
yum update -y
```

#まとめ

簡単ですね。
PHPでAmazon S3に画像アップロードと、画像一覧表示するサンプルプログラム

# はじめに
PHPでAmazon S3に画像アップロードと、アップロードした画像を一覧表示するサンプルプログラムを書いてみました。

3つの画面を使ってサンプルを紹介します。
・ファイルアップロード画面
・S3バケットに画像をアップロードする画面
・S3バケットの画像を一覧表示する画面

# 環境
PHP 7.2.10
AWS SDK for PHP 3.33.4 (Composerでインストール)

※ 前提としてS3のバケットと、S3にアップロードできるユーザー（IAM）は作成済みとします。

# ファイルアップロード画面

ファイルを選択してアップロードする画面です。

```html:upload.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Upload</title>
</head>

<body>
  <form enctype="multipart/form-data" action="s3.php" method="POST">
    <input type="file" name="file">
    <input type="submit">
  </form>
</body>
</html>
```
JPEGの画像ファイルを選択して、送信ボタンを押します。
![s3_1.png](https://qiita-image-store.s3.amazonaws.com/0/278715/9f58d94e-b119-1201-ba1d-e979e0b70162.png)


# S3バケットに画像をアップロードする画面

ファイルアップロード画面でアップロードされた画像をS3バケットにアップロードします。

```php:s3.php
<?php
require_once "vendor/autoload.php";
use Aws\S3\S3Client;

$bucket = '--- BUCKET_NAME ---';
$key = '--- KEY_NAME ---';
$secret = '--- SECRET_NAME ---';

// S3クライアントを作成
$s3 = new S3Client(array(
    'version' => 'latest',
    'credentials' => array(
        'key' => $key,
        'secret' => $secret,
    ),
    'region'  => 'ap-northeast-1', // 東京リージョン
));

// アップロードされた画像の処理
$file = $_FILES['file']['tmp_name'];
if (!is_uploaded_file($file)) {
    return;
}

// S3バケットに画像をアップロード
$result = $s3->putObject(array(
    'Bucket' => $bucket,
    'Key' => time() . '.jpg',
    'Body' => fopen($file, 'rb'),
    'ACL' => 'public-read', // 画像は一般公開されます
    'ContentType' => mime_content_type($file),
));

// 結果を表示
echo "<pre>";
var_dump($result);
echo "</pre>";
?>
```
レスポンスはとりあえずvar_dumpで表示させておきます。

# S3バケットの画像を一覧表示する画面

S3バケットの画像をすべて取得して表示する画面です。

```php:filelist.php

<?php
require_once "vendor/autoload.php";
use Aws\S3\S3Client;

$bucket = '--- BUCKET_NAME ---';
$key = '--- KEY_NAME ---';
$secret = '--- SECRET_NAME ---';

// S3クライアントを作成
$s3 = new S3Client(array(
    'version' => 'latest',
    'credentials' => array(
        'key' => $key,
        'secret' => $secret,
    ),
    'region'  => 'ap-northeast-1', // 東京リージョン
));

// S3バケットの画像を全て取得
$objects = $s3->listObjects(array(
    'Bucket' => $bucket
));
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>FileList</title>
</head>

<body>
  <?php foreach ($objects['Contents'] as $object) { ?>
  <img width="300" src="https://s3-ap-northeast-1.amazonaws.com/<?php echo $bucket ?>/<?php echo $object['Key'] ?>" /><br />
  <?php } ?>
</body>
</html>
```
ページを開くとS3バケットにアップロードした画像が表示されます。
![s3_3.png](https://qiita-image-store.s3.amazonaws.com/0/278715/75c5d656-e2ae-1663-f84c-6fe8f091f075.png)

簡単なサンプルですが、以上で終わりです。
[小技] alpine イメージの中を探索する

Dockerfile を書いてるときに実際に alpine イメージの中でコードを実行したり、ビルトインで入ってるコマンドを確認したり、 `apk` のパッケージを検索したい。

# TL; DR

```sh
docker run -it --rm alpine sh
```

# 使い方

```sh:.bashrc
alias alpine-sh="docker run -it --rm alpine sh"
```

```shell-session
$ alpine-sh
```

とかやると良さそう。
React基本(クリックイベント)

+ 概要
+ 解説

***

#概要
クリックしたら文字をアラートさせる

```App.js
import React from 'react';
import './App.css';

export default class Click extends React.Component{
  constructor(props,context){
    super(props,context)
    this.state = { clickText : 'Hello!'}
}
  clickAction(event){
      alert(this.state.clickText);
  }

  render(){
      return (
        <div onClick={(event) => this.clickAction(event)}>
          クリックしてね
          </div>
     )
  }
}


```
#解説
###constructor

>
Class Componentは内部に状態を持つことができます。classにconstructor()メソッドを追加して、this.stateにオブジェクトとして初期Stateの値を定義します。ES6のclass構文では、明示的にsuper()メソッドを呼び出すようにします。

https://mae.chab.in/archives/2956

```react

constructor(props,context){
        super(props,context)
        this.state = { clickText : 'clicked!'}//stateでデータを渡す
    }
```

###function
今回は`clickAction(event)`という名前のfunctoinをつくる。
state.clickTextで読み込んで表示

```react
clickAction(event){
        alert(this.state.clickText);
    }
```

###render
とりあえずこの型で覚える

```react

render(){
      return (
        <div onClick={(event) => this.clickAction(event)}>
          クリックしてね
          </div>
     )
```
PDOのbindValueでIN句を使うには一工夫が必要

# 概要
PHPのPDOを使ってIN句を使うためには一工夫が必要というはなし

環境

```
PHP：7.2.8
MySQL：5.7.23
```

# 経緯

こんなテーブルがあって

```sql:create.sql
CREATE TABLE `history` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(11) unsigned NOT NULL,
  `action_id` int(11) unsigned NOT NULL,
  `created_at` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```

こんなSQLを発行したい

```sql:select.sql
SELECT * FROM history WHERE user_id IN (1,3,5);
```

PHPで実装してみた

```php:test.php
try {
  $user_id = '1,3,5';
  $dbh = new PDO('mysql:host=localhost;dbname=test', 'dbuser', 'pass');

  $sql = 'SELECT * FROM history ';
  $sql .= 'WHERE user_id IN (?)';
  $stmt = $dbh->prepare($sql);
  $stmt->bindValue(1, $user_id, PDO::PARAM_INT);
  $stmt->execute();

  var_dump($stmt->fetchAll(PDO::FETCH_ASSOC));
} catch (Exception $e) {
  print "error!! " . $e->getMessage() . PHP_EOL;
}
$dbh = null;
```

結果は1の結果のみしか取得できない
もしくは「Invalid datetime format〜」というエラー発生


# 解決方法
IN句の中に指定する?を、user_idsの数分だけ記述する。
例えば、1,3,5なら「?,?,?」

```php:test2.php
try {
  $user_id = '1,3,5';
  $user_ids = explode(',', $user_id);
  $dbh = new PDO('mysql:host=localhost;dbname=test', 'dbuser', 'pass');

  $sql = 'SELECT * FROM history ';
  $sql .= 'WHERE user_id IN (' . substr(str_repeat(',?', count($user_ids)), 1) . ')';
  $stmt = $dbh->prepare($sql);
  $stmt->execute($user_ids);

  var_dump($stmt->fetchAll(PDO::FETCH_ASSOC));
} catch (Exception $e) {
  print "error!! " . $e->getMessage() . PHP_EOL;
}
$dbh = null;
```

参考
[[PHP][PDO][SQL] IN句のbindを簡単に作成する。](http://mio-koduki.blogspot.com/2012/03/phppdosql-inbind.html)
React基本(表示)

##import
```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
```


##コンポーネント
>
・UIの構成要素
・Reactでは、コンポーネントを組み合わせてUIを作る
・コンポーネントには表示系のだけでなく処理も記述する
https://qiita.com/takehiro224/items/d98c91475f80a5c51f48

```
const Hello = (props) => (
    <div>Hello {props.name}</div>
  );
```

##レンダー
```
ReactDOM.render(<Hello name="world"/>, document.getElementById('root').appendChild(document.createElement('div')));
registerServiceWorker();
```

こっちでもいける

```
import {render} from 'react-dom';
・・・
  render(
    <div><Hello name="world"/></div>,
    document.getElementById('root')
);
```
Python tips3 ~内包表記

Pythonの特徴の一つに内包表記があります。イテラブルなオブジェクトの各要素に対して処理をした結果をリスト・タプル・辞書化する際に内包表記は便利です。ここではリスト内包表記を中心にその使い方についてまとめていきます。

### まずはよくある内包表記
```python
>>> [x*x for x in range(10)]
[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]
```

### 内包表記とif文の組み合わせ
```python
# 偶数のみを抜き取ってリスト化
>>> [x*x for x in range(10) if x%2==0]
[0, 4, 16, 36, 64]
```

### zipを使って複数のオブジェクトに対して処理
```python
>>> [x*y for x,y in zip(range(1,5), range(6,10))]
[6, 14, 24, 36]
```

### 独立した２つのリストオブジェクトに対して、組み合わせで処理をする
```python
>>> even = [2, 4, 6]
>>> odd = [1, 3, 5]
>>> [e * o for e in even for o in odd]
[2, 6, 10, 4, 12, 20, 6, 18, 30]
```
これはfor文で書くと下記と同じ

```python
>>> result = []
>>> for e in even:
>>>     for o in odd:
>>>         result.append(e*o)
>>> result
[2, 6, 10, 4, 12, 20, 6, 18, 30]
```
### １次元配列同士の組み合わせから2次元配列を作る
```python
>>> even = [2, 4, 6]
>>> odd = [1, 3, 5]
>>> [[e, o] for e in even for o in odd]
[[2, 1], [2, 3], [2, 5], [4, 1], [4, 3], [4, 5], [6, 1], [6, 3], [6, 5]]
```

### if文の条件によって値を変える
```python
>>> [data**2 if data%2==0 else data*2 for data in range(10) ]
[0, 2, 4, 6, 16, 10, 36, 14, 64, 18]
```

### ネストの応用 1: ２次元配列を１次元配列に変換
```python
>>> data = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16]]
>>> [pix for row in data for pix in row]
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
```

### ネストの応用 1: ２次元配列の要素１つ１つに処理
```python
>>> data = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16]]
>>> [[pix * 2 for pix in row] for row in data]
[[2, 4, 6, 8], [10, 12, 14, 16], [18, 20, 22, 24], [26, 28, 30, 32]]
```
これはfor文で書くと下記と同じ

```python
>>> data = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16]]
>>> for i, row in enumerate(data):
>>>     for j, pix in enumerate(row):
>>>         data[i][j] *=2
[[2, 4, 6, 8], [10, 12, 14, 16], [18, 20, 22, 24], [26, 28, 30, 32]]
```

### 内包表記を用いて簡単な画像処理をしてみる
２次元配列で表現された画像に対して画像全体の平均を求める場合、下記で可能

```python
>>> data = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16]]
>>> data1 = [pix for row in data for pix in row]
>>> sum(data1) / len(data1)
8.5
```
２次元配列で表現された画像に対して標準偏差を求める場合、下記で可能

```python
import math
data = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16]]
data1 = [(pix - ave)**2 for row in data for pix in row]
var = sum(data1) / len(data1) ### 分散
std = math.sqrt(var)  ### 標準偏差
```

## 参考文献
[LIFE WITH PYTHON](https://www.lifewithpython.com/2014/09/python-list-comprehension-and-generator-expression-and-dict-comprehension.html)
tmuxのデフォルトシェルをzshにしたいのに起動時にbashなる問題

zsh,tmuxインストール、dotfiles設定後、tmuxを起動してもデフォルトシェルがbash等になってしまう場合の対処法。

## tmux起動後、$SHELLがzshになっているか確認  
```
echo $SHELL
```

## 下記の設定を.tmux.confに書き込む。  
```
set-option -g default-shell "${SHELL}"
set -g default-command "${SHELL}"
```

## tmuxを再起動(念のため全プロセスをkillしてから起動)
```
tmux source-file ~/.tmux.conf
```

## もし上記の設定でも治らない場合は、記述場所を疑う。  
例えば.tmux.confの一番下部に記述してみるとか

## 検証環境
```
% zsh --version
zsh --version
zsh 5.6 (x86_64-apple-darwin17.7.0)

% tmux -V
tmux -V
tmux 2.3
```
未来予想図_V2

#テーマ
**宇宙の感覚**

#キーワード
- VR + ロボ + 宇宙
- 宇宙に興味する
- インターネットカフェみたいな店

###なぜ宇宙？
**֎不思議な宇宙**
今まで私たちは映画とかアニメからを見ました。たくさん映画とかアニメは宇宙について、でも他のと全く同じではありません。
だから今の宇宙は不思議な宇宙。

| ![p035d0qg.jpg](https://qiita-image-store.s3.amazonaws.com/0/293079/76d304b4-fe6e-3e2a-1fab-825f03e00f98.jpeg) | → |![maxresdefault.jpg](https://qiita-image-store.s3.amazonaws.com/0/293079/d835d260-ee52-0add-9e8c-2c177ad80971.jpeg) |
|:-----------------|------------------:|------------------:|

###なぜロボ？
**֎未来世界**
私たち知っている、車の会社は車を作りたい場合、作る時人間の助けが必要です。でも、未来の車会社、たぶん車を作る時人間の助けが必要でわないです。そして、未来で、私たちの社会はロボと関係がいつもあると思います。
だからロボ技術を使いたいです。

| ![maxresdefault.jpg](https://qiita-image-store.s3.amazonaws.com/0/293079/c7a4356a-1ab5-761c-43bb-08058077c24c.jpeg) | → |![maxresdefault.jpg](https://qiita-image-store.s3.amazonaws.com/0/293079/d5758e8b-1e0d-40e2-e218-0be19dfb9c02.jpeg) |
|:-----------------|------------------:|------------------:|

###なぜVR？
**֎現実的にする**
この例みたい、今まで私たちはゲームをして時、モニターに見ます。でも、ゲームをしてVR技術を使う時、そのゲームはもっと現実的にする。
だからこの現実的な感じをしたい、VRを使います。

| ![maxresdefault.jpg](https://qiita-image-store.s3.amazonaws.com/0/293079/32c2c44f-49de-4df8-114e-a931b16ad527.jpeg) | → |![maxresdefault.jpg](https://qiita-image-store.s3.amazonaws.com/0/293079/20abd26c-25fa-8bff-5ef8-a3959211be00.jpeg) |
|:-----------------|------------------:|------------------:|



#未来予想
- 宇宙に行きたい人を助けます。
- 宇宙の生き方を感じることができます。
- 実際に宇宙の知識を知ることができます。


#私の考える未来予想図
私の未来予想図は１つサービスを作りたいです。そのサービスはインターネットカフェみたいな店です 。この店は宇宙で感じたい人が使用です。このサービスはVR技術とロボを使います。
このサービスでは宇宙に興味がある人がこの宇宙の生き方を感じることができます、この経験することができます。
このサービスは宇宙に行きたい人、でもできませんの人を助けます。例えば子どもや受講生。宇宙に興味があります。彼らは宇宙に行きたいとか宇宙の生き方を感じたいです。でも宇宙に行くことができません。だからこのサービスは彼らを助けることができます。
そして、インターネットから読みました。たぶん、2022年に人間は宇宙に行くことができます。
もし、宇宙に行くことができます、それはちょっと危ないと思います。
だから、このサービスはあります。このサービスで、宇宙に興味がある人が助けることができます。

#私は何をしますか
BITで卒業あと、最初のステップはロボの技術を勉強しなければなりません。
日本で働きます。日本で働いているうちに、ロボの技術を勉強します。
そして、宇宙に興味のエンジニアを集めます。例えばVRエンジニア、ロボエンジニア、宇宙の技術エンジニアです。
お金も集めましなければなりません。たってたくさんお金が必要です。
他の専門の人も集めたいです。たとえば
宇宙で住むの人や店に世話の人や宇宙に関する知識の人やVR技術に関する知識の人。



**これは私の未来予想図です、もし質問とご意見があったら是非コメントしてください。**
**ありがとうございます。**
[関数系] array_reverseの罠

# 概要

array_reverseがreverseするのは、なんなのかわからなかったというお話。


# では、動作を確認

```php:
php > var_dump(array_reverse(array(1,2,3,4,5)));

array(5) {
  [0]=>
  int(5)
  [1]=>
  int(4)
  [2]=>
  int(3)
  [3]=>
  int(2)
  [4]=>
  int(1)
}
```

どうやらこれは普通にreverseしただけのようだ。
では次。

```php:元スクリプト
<?php
$input  = array("php", 4.0, array("green", "red"));
$reversed = array_reverse($input);
$preserved = array_reverse($input, true);

print_r($input);
print_r($reversed);
print_r($preserved);
?>

```

```php:結果2
Array // 元の配列
(
    [0] => php
    [1] => 4
    [2] => Array
        (
            [0] => green
            [1] => red
        )

)

Array // array_reverse オプションなし
(
    [0] => Array
        (
            [0] => green
            [1] => red
        )

    [1] => 4
    [2] => php
)

Array // array_reverse preserve_key=true→これ使うとただ単に順番のみをreverseした形となる。
(
    [2] => Array
        (
            [0] => green
            [1] => red
        )

    [1] => 4
    [0] => php
)
```

本当に注意すべきなのは、キーに文字列が混じった連想配列である場合。


```php:結果
array(4) {
  ["test3"]=>
  int(3)
  ["test2"]=>
  int(2)
  [0]=>
  int(1)
  [1]=>
  int(0)
}
```
スマートフォンでFIDO U2Fを可能にするKryptonが便利すぎる！

# セキュリティに関することなので、利用はあくまでも自己責任でお願いします

SMSやキージェネレートアプリなど、多要素認証が用いられるようになっています。その中でも最近注目されているのがFIDO U2Fというもので、ハードウェアキーを用いて認証する技術です。ハードウェアキーとしては、[YubiKey](https://yubikey.yubion.com)がよく知られています。ハードウェアを用いることで、それがないと認証できない状態にできます。Googleでは従業員に配布してフィッシングを防いだ一方、[自社でもハードウェアキーTitan Security Keyを開発しました](https://cloud.google.com/titan-security-key/?hl=ja)。

[Google社員のフィッシングを0にした物理キー。余りの効果に、Google｢もう自社でつくる｣、元祖のYubicoは苦笑い | ギズモード・ジャパン](https://www.gizmodo.jp/2018/08/google-employees-secret-to-never-getting-phished-is-using-physical-security-keys.html)

個人的にも使っているのですが、USBポートを一つ独占してしまったり、常に持ち歩かないといけないのが面倒だったりします。後、そもそも買わないといけなかったり。

YubiKeyの楽なところとしては、キージェネレートアプリと違ってボタンを押したりするだけで認証が完了する点にあります。デスクトップでAuthyを使っていますが、それでも立ち上げたりコードをコピーしたりする手間があります。YubiKeyであれば、その手間は若干少ないです。

で、そもそもスマートフォンは常に持ち歩いているので、スマートフォンがFIDO U2Fに対応してくれれば楽なのにと思っていたんですよね。またはMacBook Proの指紋認証が対応するとか。そんな中、ついに[Krypton](https://krypt.co/)がFIDO U2Fに対応してくれました！

## Kryptonの嬉しいところ

Safariにも機能拡張を提供しています！デフォルトのSafariはFIDO U2Fに対応していないので、これは嬉しいです。ただしWebサービス側でSafariでは動かない、としているところもあります。

## Kryptonの使い方

まずiOS/Androidアプリをダウンロードします。デスクトップ側では機能拡張をインストールします。次にデスクトップ側でQRコードを表示して、スマートフォンアプリ側で読み込みます。これでペアリングが完了です。

<img width="414" alt="IMG_5242.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/61833/aa3e2827-33aa-b030-513e-4305d557f729.png">

後はFacebookやGoogle、Dropboxなどの設定に従って進めていくとセキュリティキー（YubiKeyなど）の挿入を求められます。そうするとスマートフォンアプリが許可を求めてくるので、Yesをタップすると登録が完了する仕組みです。YubiKeyの代わりをKryptonが行ってくれます！

<img width="414" alt="IMG_5243.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/61833/11c97206-8a9b-b892-49bc-af7119b636e3.png">

## FIDO U2Fを提供しているサイト

今、多要素認証の一つとしてハードウェアキーの導入が進んでいます。なのでセキュリティに気を遣うサービスでは導入が増えています。Kryptonがデフォルトで並べているだけでも以下があります。

- Google
- Facebook
- GitHub
- GitLab
- Bitbucket
- Twitter
- Dropbox
- Stripe
- Sentry.io

とは言え、FIDO U2Fは汎用的な技術なので、[デモサイト](https://demo.yubico.com/u2f)でもKryptonが使えます。自分たちのサービスにFIDO U2Fを導入してもKryptonは利用可能です。

----

KryptonはSSH認証でも使えたりするので便利なのですが、FIDO U2Fに対応してくれたことでYubiKeyは不要になるくらい便利です。スマートフォンを紛失した場合のリスクはありますが、指紋認証などを使うことでセキュアにできるでしょう。

なお、Krypton自体に何らかのセキュリティインシデントが起こったり、技術的に何か問題がある可能性も少なからず存在します。責任は取りかねるので、導入はあくまでも自己判断で行ってください。

[Krypton | Let's make two-factor easy & secure](https://krypt.co/)
Jacksonでjava.timeを利用する

#目的
Jacksonはjava.util.Dateやjava.util.Timeをよしなに変換してくれ出力はyyyy-MM-dd,HH:MM:ss等のフォーマットにしてくれる。
一方、Java8以降に追加されたjava.timeパッケージのLocal~クラスではうまくシリアライズしてくれず、以下のように連想配列として処理される。

(以下ソースコードは日時の取得に実行時間を利用しているので整合性がありません)

```Javascript
{"id":1,"name":"hoge","registrationDateTime":{"dayOfMonth":19,"dayOfWeek":"WEDNESDAY","dayOfYear":262,"month":"SEPTEMBER","monthValue":9,"year":2018,"hour":10,"minute":28,"nano":916000000,"second":37,"chronology":{"id":"ISO","calendarType":"iso8601"}}}
```
これでは必要のない情報も多く、受け取る側は困ってしまうので以下のようにしたい。

```Javascript
{"id":1,"name":"hoge","registrationDateTime":"2018/09/19 10:29:30"}
```

#解決
まずJacksonでjava.timeを扱えるように以下のモジュールをObjectMapperインスタンスに明示的に登録する必要がある。

* JavaTimeModule

このクラスを以下のように利用することで、java.timeをある程度わかりやすくシリアライズしてくれる。

```Java
ObjectMapper om = new ObjectMapper();
		
JavaTimeModule jtm = new JavaTimeModule();
		
om.registerModule(jtm);
```
これによって、以下のようにシリアライズしてくれるようになる。

```javascript
{"id":1,"name":"hoge","registrationDateTime":[2018,9,19,10,24,49,73000000]}
```

これでもまだ扱いにくいので、デフォルトのフォーマットを変更する処理が必要だ。

以下のように任意のフォーマットを指定できる。

```Java
jtm.addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss")));
```
これによって、以下のようにシリアライズしてくれるようになる。

```Javascript
{"id":1,"name":"hoge","registrationDateTime":"2018/09/19 10:29:30"}
```

今回はシリアライズに焦点をあてていますが、java.timeを利用したJavaObjectに日時をデシリアライズする際、yyyy/MM/ddのようなフォーマットだと例外が発生するので、Serializerを登録した手順と同様にDesirializerも以下のように登録する必要があります。

```Java
jtm.addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss")));
```


# ソースコード
説明に利用したソースコードは[git](https://github.com/Hyuga-Tsukui/sample-src)にあげてあります実際に実行してみたりしてください。
Google spreadsheetで文章の翻訳作業を楽にする

## 大量の文章を翻訳する作業を楽にするシートを作りました
英語の契約書などを翻訳する時に便利なGoogle spreadsheetを作りましたので、共有したいと思います。

## 背景
英語の文章を翻訳する時、Google翻訳を使っている方も多いと思います。翻訳精度が上がってから翻訳結果をそのまま使えるケースも増えていますが、それでも人間が修正を加えなければならないことも多い。

また、長い文章をまるっと翻訳するのではなくてセンテンスごとに対訳を作って文章を整えていくという作業のやり方を進めていくことも多いと思います。先にあげた契約書などの場合、条、項単位で作業をする場合もありますよね。

そこで、原文を入力すると対訳を表示し、機械翻訳の結果を見ながら最終の訳文を作りやすいようなSpreadsheet"[翻訳シート](http://bit.ly/2QW5laH)"を作成してみました。

なお、翻訳処理についてはこちらの記事の実装を参考にしています。
[Google Spreadsheet の googletranslate 関数の代わりに LanguageApp を使うワークシート関数を作ってイケてる翻訳ができるようにする](https://qiita.com/kazinoue/items/82779a11af8a2dea0d21)

## 使い方
1. セルに関数を入力して使う。  
セル内でtranslate関数として使えます。  
"translate("翻訳する文章",元の言語,翻訳語の言語)"  
例）translate("This is a pen.", "en", "ja");  
言語は、[ISO3166-1](https://ja.wikipedia.org/wiki/ISO_3166-1 )で規定されている国別コードの２文字を入力します。  
1. A列に翻訳したい文章を入れて翻訳結果をB列にいれる。  
A列に翻訳したい文章を入れ、メニューから「ツール」→「マクロ」「transelate_from_en_to_ja」を選択。  
B列に翻訳結果が自動的に入力されます、多数の文章を一括で翻訳する場合はこちらがおすすめです。
1. 翻訳したい文章が入ったセルを選択して、翻訳結果を右隣のセルにいれる。

## 最後に
使い方の説明は、[翻訳シート](http://bit.ly/2QW5laH)の中にも記載しています。

Google翻訳の精度が高くなったとはいえ、まだまだ人間が補正しなければならないことも多いので、B列の翻訳結果を見ながらC列に補正後の訳文を入力する想定でシートは作っています。

[翻訳シートはこちらをクリックしてください](http://bit.ly/2QW5laH)
【Android Kotlin】複数チェックボックスでチェックがついてるものの値だけ加算する

[ブログ](https://hammer-appli.hatenablog.com/entry/2018/09/04/141758)でも書きましたがQiitaでも投稿します。
##やりたいこと
○○という名前のcheckbox項目がチェックされたら、○○がmapコレクションで紐づいている数値を加算し、逆にチェックが外れたら減算する(≒合計値を元の値に戻す)。
##準備
配列とマップ関数はこんな感じ。

```Array.kt
//チェックボックスに表示する文字列の配列
val hoges = arrayOf("フガ", "ムニ", "モチャ", "ニャー")
//view名からIDを取得するためのマップ関数
val hogeMap = mapOf("フガ" to "huga", "ムニ" to "muni", "モチャ" to "mocha", "ニャー" to "nya-")
//チェックボックス項目に紐づいた値を設定するマップ関数
val hogePrices = mapOf("フガ" to 100, "ムニ" to 200, "モチャ" to 300, "ニャー" to 400)
```

あと、レイアウトファイルにはチェックボックスを項目数分用意し、IDを「checkBox + (hogeMapで設定した文字列)」となるようにネーミング。
例)ID : checkBoxhuga

##コーディング
for文を使ってhogesの項目名をチェックボックスに設定し、クリックしたらチェックされているチェックボックス項目に紐づいた数値を加算します。
私が作っているアプリではスピナーの値とチェックボックスの合計を加算してTextviewに表示してます。

```SumActivity.kt
//チェックボックスの合計値を入れる変数を宣言
val checkPrice = 0

for (hoge in hoges){
    //レイアウトファイルのチェックボックスのViewIDを取得
    val viewId = resources.getIdentifier("checkBox"+ hogeMap[hoge], "id", packageName)
    //findViewByIdでviewIDの紐付け
    val checkbox = findViewById<CheckBox>(viewId)
    //デフォルトをfalseに設定
    checkbox.isChecked = false
    //チェックボックスに表示する文字列をセット
    checkbox.setText(hoge)

    checkbox.setOnClickListener(View.OnClickListener{
        //クリックするたび合計値は0にする
        hogePrice = 0
        //再度hogeの項目数分forを回す
        for (hoge in hoges){
            val viewId2 = resources.getIdentifier("checkBox"+ hogeMap[hoge], "id", packageName)
            val checkbox2 = findViewById<CheckBox>(viewId2)
            //チェックされている項目であれば、数値を合計値に加算する
            if (checkbox2.isChecked == true){
                checkPrice += hogePrices[hoge].toString().toInt() //map関数の戻り値はint?型なので、int? -> string -> intに変換が必要
            }
        }
        //スピナーの値とチェック合計値を加算してsetText
        val sum = spinnerPrice + checkPrice
        price.setText(sum.toString())
```
最初は以下のような、全体の合計値を先に変数宣言してから、都度加算や減算するやり方でした。
checkboxだけの加算減算ならこれでも問題ないです。

```
if (checkbox2.isChecked()){
    totalPrice += hogePrices[hoge].toString().toInt()
    }else{
    totalPrice -= hogePrices[hoge].toString().toInt()
}
```

ただ、これだと
>スピナーの値をtotalPriceに代入(≠加算)
>→チェックボックスを何個かON
>→スピナー項目を変更(ここでtotalPriceがリセットしてスピナー項目の値そのものになる)
>→チェックボックスをOFF

とすると、スピナー項目の値からチェックボックスの値分減算して想定より値を低く出せてしまうことが判明。
直前のスピナーで選択されていた項目を参照するやり方が見当たらないので、スピナーを変更したらチェックボックスを全部OFFにする対応策を考えたものの、ユーザーフレンドリーじゃないなと思い無事お蔵入りに。

ケースバイケースですが、こういう風に変更した部分だけ再計算するより、全体の値を再計算するとうまくいけるという学びがありました。
Nginx1.12にて’real_ip_header X-Forwarded-For’でALB/ELBのIPアドレスが取れてしまう時

Nginxを1.9から1.12にver.upした際に、REMOTE_HOSTの値がクライアントのIPアドレスではなくALBのIPアドレスになってしまいました。
元々の設定は以下の通り。

```
real_ip_header X-Forwarded-For;
```

これに`set_real_ip_from`を追加すると動作しました。

設定例）

```
set_real_ip_from 10.0.0.0/16;
real_ip_header X-Forwarded-For;
```

`X-Forwarded-For`は偽装が可能とのことなので、`set_real_ip_from`を指定しないと適用されなくなったのかもしれません。
（確認すればよいのですが、、ひとまず書き留め）
Docker内で動いているNuxt.jsをVS codeでデバッグする

## はじめに

フロントエンドはReact系しか触れたことがなかったのですが、Vue.js + Vuex + Nuxt.jsという構成の開発をすることになりました。

本記事ではdocker-composeを利用していることを前提としていますが、ポートさえ空ければdocker-composeを使わない環境でもデバッグできます。

また、本記事はこれをコピペすればできる、というものであり、細かい説明は省かせていただきます。
説明などは参考リンクの記事を見ていただきたいと思います。

## Dockerコンテナ側の準備

package.jsonのscriptsに次を追加します。これにより、9229番ポートにデバッガが接続できるようになります。

```json
"debug": "node --inspect-brk=0.0.0.0:9229 node_modules/.bin/nuxt",
```

ただし、これだけではホスト側からコンテナの9229番ポートは見えないので、docker-compose.yamlに次の設定を追加する必要があります。また、`docker-compose up`で先程のスクリプトを実行するようにしておきましょう。

```yaml
version: '3'
services:
  nuxt:
    build: <Dockerfile>
    command: npm run debug
    ports:
      - 3000:3000
      - 9229:9229
    environment:
      - HOST=0.0.0.0
      - PORT=3000
```

## VS code側の準備

VS CodeにChromeデバッガアドオンを入れておきます。

[https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

VS Codeの「デバッグ」メニューから「構成を追加」をクリックします。

![スクリーンショット 2018-09-14 15.06.22.jpg](https://qiita-image-store.s3.amazonaws.com/0/133157/f4fed60d-2942-bcd9-a4c9-13cd3643bfad.jpeg)

すると、launch.jsonというファイルが開くので、次をコピペ

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client",
      "url": "http://lvh.me:3000",
      "webRoot": "${workspaceFolder}",
      "runtimeArgs": [
          "--remote-debugging-port=9222"
      ]
    },
    {
      "type": "node",
      "request": "attach",
      "name": "ssr",
      "port": 9229,
      "address": "localhost",
      "localRoot": "${workspaceFolder}/frontend",
      "remoteRoot": "/app",
      "protocol": "inspector"
    },
  ],
  "compounds": [
    {
      "name": "debug-frontend",
      "configurations": ["client", "ssr"]
    }
  ]
}
```

## デバッグ

あとは、Dockerコンテナを立ち上げてVS Codeのデバッグメニューからデバッグを開始すればデバッグ可能です。
ただし、Nuxtが立ち上がるまでそこそこ時間がかかりますので、そこは注意です。

## 参考リンク

- [Docker + Node.js のデバッグ Visual Studio Code編](https://qiita.com/tailix/items/fe3804e7a58978741d56)
- [Nuxt.js を VS Code上でデバッグする方法](https://qiita.com/idani/items/ac638d5a0786aaefb8cf)
form_for undefined method `merge' for @hogehoge.id

## よく忘れるのでメモ


```
= f.hidden_field :hoge_id, @hogehoge.id
```


これだとundefined method `merge' for  @hogehoge.id　:integerが帰ってきそうなので




```
= f.hidden_field :hoge_id, value: @hogehoge_id
```
明示的にオプションを渡してあげる



## ご参考

https://teratail.com/questions/5179
Cloud FunctionsでPython利用記事まとめ

## 概要

Cloud FunctionsでPython利用する際によく参考にしている記事をまとめています。

自分用なので、自分記事が若干多めです。随時更新

この記事良かったよーとか、教えていただけると助かります。


## 利用

Google Cloud FunctionsでPythonを利用してみた(Beta利用)
https://qiita.com/kai_kou/items/dca21cdfd8375a247c2f

Cloud Functions(Python)でコードファイルを分割する
https://qiita.com/kai_kou/items/a07872db77193f130b9a


## 環境変数

Google Cloud FunctionsのPython(Bata)で環境変数を利用する
https://qiita.com/kai_kou/items/222d9ac85e38b57da8be

Using Environment Variables
https://cloud.google.com/functions/docs/env-var


## Http

Google Cloud FunctionsのPython(Beta)でHttpトリガーのときJSONを返す
https://qiita.com/kai_kou/items/622265c32aecfa2e7cc3


## SDK

Google API Client for pythonでSSL証明証エラーがでたので応急処置した
https://qiita.com/kai_kou/items/b6f613145e9c1cfdb5bb


## GCP連携
Google Cloud Functions(Python)からGoogle Kubernetes Engine(GKE)のジョブを登録する
https://qiita.com/kai_kou/items/66d4bf823acb4cec277a

Google Cloud Functions(Python)からCloud Buildでビルド実行してみる
https://qiita.com/kai_kou/items/8f040e261c4a50ef8bfc


## 活用

Qiita APIを利用して記事のViewsとストック数がまとめて取得できるAPIを作ってみた
https://qiita.com/kai_kou/items/3f10ce93f4aa3b57b2d0
  

## 不具合

Cloud Functions(Python)でcopy.pyが含まれているとデプロイに失敗する
https://qiita.com/kai_kou/items/080013e32d65f719dc1d
【初心者必見】Ruby on Railsで新規アプリケーションを作る際のお作法

# 【初心者必見】Ruby on Railsで新規アプリケーションを作る際のお作法

## Introduction
皆様こんにちわ，荒ぶっている新人プログラマーのChaaaBoooです！！

今回はRailsで新しいアプリケーションを作成しようとするときの作法についてのお話です．
Railsで特定のバージョンのGemを使用する際は参照先などを変更しないと時々Errorが発生します．
これはRailsで新規にアプリケーションを作成する際，Errorを回避し綺麗な形でプロジェクトを作成する作法について記したものです．

### プロジェクト用ディレクトリ作成

まずはプロジェクト用のディレクトリを作成します．

```bash

$ mkdir test_project
$ cd test_project
```

### rbenvのインストール
続いてrbenvのインストールを実施します.
rbenvとは,Rubyをバージョンごとに管理でき,尚且プロジェクトごとにバージョンの指定を行うことができるツールです.

インストールされていない方は下記コマンドでインストールを行ってください.

```bash

$ brew update
$ brew install rbenv ruby-build
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
$ rbenv -v
```


### Rubyのバージョン設定
今度は使用したいRubyのバージョンを選択します．

```bash

$ rbenv versions
※インストールされているRubyのバージョンを確認

$ rbenv local <使用したいバージョン>
※そのディレクトリ内で使用したいRubyのバージョンを設定
```

もし使用したいRubyのバージョンがインストールされていなかった場合は下記コマンドでインストールを行いましょう．

```bash

＃インストールできるバージョン一覧
$ rbenv install -l

＃インストール
$ rbenv install <インストールしたいバージョン>

# 更新
$ rbenv rehash
```

### Gemfileの作成

使用するRailsのバージョンを選択するため下記コマンドを実行しGemfileを作成します．
尚、GemfileはGemを使用する際に使用するファイルでありRuby用のパッケージ管理ツールになります.
Gemを用いることで、Ruby用ライブラリのインストール、アンインストール、バージョン管理などを簡単に実行することができます.

```bash

$ bundle init
```

### Gemfileの編集

Gemfile作成後，対象ファイルを開きRailsのバージョン指定を行いましょう．

```bash

$ vi Gemfile
```

```
source "https://rubygems.org"
gem "rails", "6.0.3"
#バージョン指定の部分は使用したいバージョンへ変更する．
```

### Railsをパスを指定して'bundle install'

こうすることによりプロジェクト単位でGemのver指定を行う事ができます．
これをしないとRails側がGemfileインストール時，アプリケーションのGemfileに記載されているバージョンを参照すべきなのか
Rubyにインストールされているバージョンを参照すべきなのかわからずErrorを起こすので注意が必要です．

```bash

$ bundle install --path vendor/bundle
```

path以降は自身が読み込ませたいパスを記載すれば良いが'vendor/bundle'がベターです．

尚、Gemfileにライブラリ名およびバージョンを記載し"bundle install"を行うことでライブラリのインストールを行うことが出来ます．
尚、バージョン指定を行わず記載すると最新版をインストールする.

```
記載例：

# バージョンを固定してインストール
gem '<ライブラリ名>', '<バージョン>'

# バージョンの範囲指定（下記例の場合：バージョン1.0.0以上、2.0.0未満）
gem '<ライブラリ名>', '>= 1.0.0, < 2.0.0'

# 指定のバージョン以上（下記例の場合：バージョン1.3.0以上使用可能）
gem '<ライブラリ名>', '>= 1.3.0'

# 指定のバージョンの系列のみ使用可能（下記例の場合：バージョン5.◯は使用可能だが3.◯や６.◯は使用不可）
gem '<ライブラリ名>', '~> 5.0'

```

### Railsプロジェクトの作成

いよいよRailsのプロジェクトを作成.

```bash
# 構文
$ bundle exec rails new <インストールしたいディレクトリ> -d <使用したいDBMS> --skip-bundle

# 例
$ bundle exec rails new . -d postgresql --skip-bundle --skip-keeps
```
※ '--skip-bundle'は'rails new'時に自動で行われる'bundle install'をスキップするオプション
※ '--skip-keeps'は'rails new'時に自動で生成される'.keep'ファイル作成をスキップするオプション

## Conclusion

以上となります！！
如何だったでしょうか？？？
面倒な手順を踏むことにもなりますが，こうすることによって他と競合することなく
プロジェクトのカスタマイズを行う事ができます！！

皆様も是非，試して見てください＾＾

ではでは〜
magitで新規ディレクトリ内のファイルを表示する

```shell-session
$ git config status.showUntrackedFiles all
```
を設定したうえで、stagingでディレクトリ名のところでTABを押すとディレクトリが展開されます。
これでディレクトリ単位でstagingしてから、unstagingしまくる必要がなくなります。
[magit公式マニュアル](https://magit.vc/manual/magit/Status-Sections.html)の`magit-insert-untracked-files`に記載があります。

巨大なディレクトリの場合、レスポンスが悪くなる(最悪固まる)みたいなので、gitが探す範囲に大量のアウトプットを置くような場合、あらかじめignoreしておいた方がよさそう。
SQLアンチパターン勉強会　第四回：キーレスエントリ

#はじめに
本エントリーは某社内で実施するデザインパターン勉強会向けの資料となります。

本エントリーで書籍「[SQL アンチパターン](https://www.oreilly.co.jp/books/9784873115894/)」をベースに学習を進めます。書籍上でのサンプルコードはMySQLですが、本エントリーでのサンプルコードはT-SQLに置き換えて解説します。

#キーレスエントリとは
外部キー制約を省略するアンチパターンです。
外部キー制約を省略すれば、データベース設計はシンプルになりますが、参照整合性を保証するソースコードを書く必要があります。

##参照整合性を保証するコード
参照整合性を保証するために用いられる解決策は、データの関連付けを常に維持するためのソースコードを書くことです。
外部キー制約を設定しなかった場合は、変更を適応する前に、変更によって参照が壊れないことを確認する必要があります。

以下に例を示します。
テーブルAccountsが親、テーブルBugsが子の関係です。

1.レコードを追加する場合
1.1.アカウントが存在することを確認する

```
SELECT account_id FROM Accounts WHERE account_id = 1;
```

1.2.レコードを追加する

```
INSERT INTO Bugs (reported_by,date_reported) VALUES (1,'2018-09-19');
```


2.レコードを削除する場合
2.1.子テーブルで削除するアカウントが使われていないことを確認する

```
SELECT bug_id FROM Bugs WHERE reported_by = 1;
```

2.2.アカウントを削除する

```
DELETE FROM Accounts WHERE account_id = 1;
```
上記の場合でも、2.1.と2.2.の間でaccount_id=1のアカウント利用者がBugsテーブルにレコードを追加した場合、存在しないアカウントがBugsテーブルのレコードに存在することになります。
対策案として、関連するテーブルをロックし、処理後に解除する方法がありますが、利用者が増えるとロックの解除待ちで処理時間が伸びてしまいます。

##不正レコードを抽出する
ここでは存在しないステータスがBugsテーブルのレコードに存在する場合を想定します。
Bugsテーブルで不正なレコードを特定するためには、以下のようなクエリです。

```
SELECT b.bug_id, b.status
FROM Bugs b LEFT OUTER JOIN BugStatus s
ON b.status = s.status
WHERE s.status IS NULL
```

テーブルBugStatusが親、テーブルBugsが子の関係です。
ここで抽出された不正レコードに対して何らかの対処が必要になります。
また、上記のようなチェックをBugsテーブルが参照しているテーブルで全てで行い、不正レコードのチェックを定期的に実施する必要があります。


##アップデートのジレンマ
開発者が外部キーを避けるのは、複数のテーブルの関連し合う列を更新する際に、外部キー制約が邪魔になると感じるからです。
親テーブルのレコードを削除する場合、外部キー制約違反を避けるためには、先に子テーブルのレコードを削除する必要があります。

```
DELETE FROM Bugs WHERE status ='bogus'; --子テーブル
DELETE FROM BugStatus WHERE status ='bogus'; --親テーブル
```

ただし、アップデートをする場合は問題です。
親テーブルのレコードを更新するまで、子テーブルのレコードは更新できません。
また、子テーブルのレコードを更新するまで、親テーブルは更新できません。
両方を同時に変更する必要がありますが、2つの更新処理を同時に実行することはできません。

```
UPDATE Bugs SET status = 'INVALID' WHERE status='bogus'; --子テーブル
UPDATE BugStatus SET status = 'INVALID' WHERE status='bogus'; --親テーブル
```

#アンチパターンを用いざるを得ない場合
外部キーを用いた関連付けを行えない、極端に柔軟なデータベース設計の場合、他のアンチパターンの陥る可能性があります。

 - EAV
 - ポリモーフィック関連


#解決策：外部キー制約を宣言する
外部キー制約による参照整合性の強制によって、データ不整合を検出してから修正するのではなく、データベースへの登録時点でミスを阻止します。

```
CREATE TABLE Bugs (
  ～省略～
  reported_by       BIGINT NOT NULL,
  status            VARCHAR(20) NOT NULL DEFAULT 'NEW',
  FOREIGN KEY (reported_by) REFERENCES Accounts(account_id),
  FOREIGN KEY (status) REFERENCES BugStatus(status)
);
```

外部キーを設定することで、レコードを確認するソースコードを省くことができるため、結果として、修正や保守の時間を削減できます。

##複数テーブル変更のサポートを有効にする
親子関係のあるレコードの変更や削除をするために、カスケード更新という機能があります。
「アップデートのジレンマ」で紹介した、外部キー制約違反で更新できない問題はこれで解決できます。

```
CREATE TABLE Bugs (
  ～省略～
  reported_by       BIGINT NOT NULL,
  status            VARCHAR(20) NOT NULL DEFAULT 'NEW',
FOREIGN KEY (reported_by) REFERENCES Accounts(account_id)
	ON DELETE NO ACTION,
FOREIGN KEY (status) REFERENCES BugStatus(status)
  	ON UPDATE CASCADE
	ON DELETE SET DEFAULT
```

ON DELETE NO ACTION は子テーブルが参照しているレコードは親レコードで削除できなくなります。
ON DELETE SET DEFAULT は親テーブルでレコードを削除したとき、このレコードを参照する子テーブルのレコードにデフォルトの値をセットします。

#まとめ
外部キー制約を設定することによって以下のメリットがあります。

- 更新、挿入、削除の前にレコードをチェックする必要がない
- 複数テーブルを変更するために、テーブルをロックする必要がない
- 不正なレコードが発生しないため、レコードをチェックする操作が必要ない
VRMモデル作成時、メッシュ直したらSpringBoneとか移すのが面倒な件

# この記事について
VRMのSpringBoneやBlendShapeを別のモデルにコピーする方法のメモです。VRMモデルの作成そのものには慣れている人を対象にしています。

以下のような場合に役立ちます。
>UnityでVRMをセットアップして動かしてみたらモデルに穴が開いてる！ Blenderで直してFBXが出来たけどまたUnityに入れてSpringBoneとか全部設定し直すの？ 面倒くさいなあ･･････

この記事の手順でSpringBoneやBlendShapeなどの設定を古いモデルから新しいモデルにコピーできます。


# 必要なファイルなど
[UniVRM](https://github.com/dwango/UniVRM/releases)のバージョンはv0.43で試しています。**古いバージョンでは以下の手順は使えません。**新しいUniVRMを入れ直してください。

また、**SpringBoneの設定のコピーに[CopyComponentsByRegex](https://github.com/Taremin/)を使います。**リンク先に飛んで右上の「Clone or download」から「Download ZIP」をクリックするとダウンロードできます。ダウンロードできたら、中に入っているEditorフォルダをモデルの入ったUnityプロジェクトの中に入れてください。


# 古いモデルから新しいモデルに設定をコピーする手順

## 新しいモデルをインポートしてVRMに変換する
FBXファイルを通常の手順に従ってVRM化します。この段階ではSpringBoneとBlendShapeの設定は何もされていません。

1. 新しいFBXファイルを、古いモデルと同じUnityプロジェクトにインポートします。通常通りAnimationTypeをHumanoidにしてConfigureからボーンの設定をしてください。ここはコピーできません。
2. その後も通常通り、そのFBXをシーンに配置してExport HumanoidでVRM化します。

## BlendShapeのコピー
古いVRMからBlendShapeの設定をコピーします。モデルのブレンドシェイプの構成が変わっていると上手くコピーできないことがあります。

1. 古いモデルのBlendShapesフォルダと、新しいモデルのBlendShapesフォルダをエクスプローラで開きます[^1]。
2. 古いモデルのフォルダから**「BlendShape.asset」以外の**全てのassetファイルを新しい方のフォルダに上書きコピーします。
3. Unity上で新しいモデルのBlendShapeを選択して、InspectorウィンドウでBlendShapeが表示されるようにします。
4. Inspectorウィンドウ右上の歯車ボタンからRestoreをクリックします。

以上でBlendShapeの設定をコピーできました。

## SpringBoneのコピー
古いVRMからVRMSpringBoneとVRMSpringBoneColliderGroupの設定をコピーします。モデルのボーンの名前や構成が変わっていると上手くコピーできないことがあります。

1. 新しいVRMをシーン上に配置して古いモデルの横に並べておきます。
2. Hierarchyウィンドウで古いモデルを右クリックして「Copy Components By Regex」をクリックします。
3. 新しいウィンドウが出てきます。正規表現の部分に「VRMSpring」と入力してください。
4. Copyボタンをクリックします。
5. Hierarchyウィンドウで新しいモデルを選択してからPasteボタンをクリックします。

以上でSpringBoneの設定をコピーできました。

## MaterialのコピーとTextureの移動
古いVRMからマテリアルの設定をコピーします。マテリアルの名前などが変わっていると上手くコピーできないことがあります。

1. 古いモデルのMaterialsフォルダと新しいモデルのMaterialsフォルダをエクスプローラで開きます[^1]。
2. 古いモデルのフォルダから全てのassetファイルを新しいフォルダに上書きコピーします。
3. Unity上で新しいモデルのTexturesフォルダの中身を全て削除します。
4. Unity上で古いモデルのTexturesフォルダの中身を全て新しいモデルのTexturesフォルダに移動します。

以上でマテリアルの設定をコピーできました。


# その他
もっといい方法があったら教えてください。

[^1]: Projectウィンドウでファイルを右クリックして「Show in Explorer」をクリックするとそのフォルダを開けます
Qiitaに記事を書くエンジニアが一番成長する説 (ラーニングピラミッド)

「ラーニングピラミッド」というものがある。

学習の効果(平均学習定着率)として「人に教える」が1位にあり「自ら体験する」2位にある。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/bd1b5201-c4b3-7731-763a-150eff459226.png)

(「なんでピラミッドのヒエラルキーの下部が1位なんだよ！」と思わなくもないが、単に最初に最初の図形の選び方が完璧じゃなかっただけではないかと思う)

## Qiitaの話

このピラミッドを知って思ったのは、Qiitaに記事を書くのも「人に教える」なんじゃないだろうか。

なぜなら学習効果を左右するのは、具体的な脳の働き方だと思う。

それが特定の個人に対して口頭で教えることであっても、不特定多数の人に対してテキストで教えるであっても、おそらく脳内で似たような働きがおこなわれるのではないかと思う。統計的な根拠などは全く調べていない。

そして、僕らが何か記事を書いてアウトプットする時は、人に教える前に「自ら体験する」ことも踏まえるはずだ。

つまりQiitaに記事を書くだけで、学習効果トップの1位2位を同時に実践できて、ものすごく学習効果が高いのではないだろうかと思った、という話。

僕はピラミッドを味方につけた。

## 言いたいこと

- もっと人に教えよう
- プログラミングの記事を書くのは時間の無駄じゃなく、むしろ最大の時間節約だ

## 参考

学びを結果に変えるアウトプット大全

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/a039e496-e4fa-aed9-85c3-99c88f7ba814.png)

## 注意

ラーニングピラミッドは世の中に流布しているが、もしかしたら、あまり根拠のある図ではないかもしれない。

- [ラーニングピラミッドの誤謬](https://www.ic.nanzan-u.ac.jp/NINKAN/kanko/pdf/bulletin17/02-03.pdf)

ただピラミッド自体が仮に眉唾ものだとしても、体感的に事実と合致する感じはする。昔から言われている「教えるのが最大の学び」というのは、おそらく大規模でより精度の高い統計をとっても、同じ事実が見えてくるのではないだろうか。




## あわせて読みたい


- [拝啓 本当は Qiita を書きたいのに、まだ迷っているあなたへ。 - Qiita](https://qiita.com/YumaInaura/items/4d2c602d59c62daa9344)
- [エンジニアは全員技術記事を書くことを習慣化した方がいいぞ - Qiita](https://qiita.com/HiromuMasuda0228/items/a71dea7ef4d77a30b118)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
個人で作ったアプリのリニューアルの話

#きっかけ
Appleから電話があり、アプリのアップデートしないと数週間後には使えないと連絡がきました。（BITCODE関連問題のようです。）
何年前、派遣社員時代に現場を回っていて勤怠表をあっちこち出さないといけなくて自分のために勤怠アプリを作っていました。
ほぼ放置した状態で忘れていたアプリでしたが、せっかく連絡もきてるし、トレンドみると何人か使っているらしので1日潰てやってみることにしました。

トレンドはこんな感じでした。
<img width="1183" alt="スクリーンショット 2018-09-19 8.36.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/32323/f423a40d-e980-f806-dd33-96c05e17ed4c.png">

#改修ポイント

##development targetバージョンアップ

iPhoneは11.0、Apple watchは　4.3へアップしました。Apple watchは今回やめようかと思いましたが、
ソース修正なく、ビルドが通ったのでそのままに。。


##iPhoneX対応
ただのAutolayoutの調整作業です。　やはりStackViewは積極的に使うべきですね。
画面がシンプルだったため、ソース修正はほぼありませんでした。

##deprecated対応
Navigationbar関連、AlertView関連のwarningを潰しました。CocoaPodsで入れたいくつかのサートーパティはアップデートも止まったのでwarningのままにしています。
（Appleからの連絡がきた原因のサートーパティは削除しました。）

##Swiftを導入
Obj-Cでコードを書くのは何のメリットもないので今回Swiftを導入しました。

##Privacy Policy プライバシーポリシー追加
今回、アプリ審査の際に必須になったようでメニューからWebViewで表示するように対応しています。

##Firebaseライブラリー追加
Appleから提供するトレンドツールは物足りないのでFirebaseで分析するように入れました。

##その他
いらない画面の整理
iPhoneXに対応するイメージ作り
細かいバグ修正などなど


#感想
１日で集中してなんとか終わりました。充実な週末を過ごした気がします。

- 冷めた情熱が個人アプリ開発した時の状態に少し戻った。
- 今回の経験で少し業務に活きることができるかな。
- こんなつまらないアプリを使っている方に感動



#補足

このアプリはGitHubに公開されています。Fork, PRなど大歓迎です。
（みなみに、恥ずかしいですが、今のコードってめちゃめちゃ汚いです。。）

https://github.com/dolfalf/Hakenman


# 最後アプリ紹介

こんなことができるアプリです。

<img width="600" alt="スクリーンショット 2018-09-18 10.57.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/32323/fb20645f-850e-3ae3-9a30-171a7fd13eac.png">

- 月末になると面倒な勤務表作成から解放できます！
- 毎日の日報を送る手間も簡単に。
- 報告先によって時間区切りが異なって困っている方へ。
- 勤務管理をさらに簡単に！ 　

[「HakenMan」をApp Storeで](https://itunes.apple.com/jp/app/hakenman/id904564831?mt=8)
仮想環境をatomに繋いだ

###virtualBoxでvimエディタ使っているけど、難易度高い。
vimは全てコマンドから操作しないといけないので、ファイル探したり開いたりするの時時間かかるんですよね。
今までcloud9しか使ったことなかったのできつかった。
なのでAtomに連携させたので、その備忘録。

#手順

###①Atomインストール

###②Atomでremote-ftpをインストール

＊FTP(File Transfer Protocol)はサーバーとクライアント間で、ファイルを送受信する通信の決まりごとです。

###③.ftpcinfigファイルに遠隔操作したいPCの「host（IPアドレス）」「user」「pass」の設定をする
・適当にプロジェクトファイル選んで
「Packages」 -> 「Remote-FTP」 -> 「Toggle」 と選択し、remote-ftp サイドバーを開く。
＊ここが大事だった。これやらずに「create SFTP config file」 押しても何もできない。

・Atomから「パッケージ」⇒「remote-ftp」⇒「create SFTP config file」 で.ftpcinfig（設定ファイル）を開く。

.ftpcinfig内の「host（IPアドレス）」「user」「pass」に接続したい仮想環境PCの「host（IPアドレス）」「user（ユーザ名）」「pass（パスワード）」を入力する。

＊SFTPはFTPの利便性を損なわず、さらにFTPにSSHの安全性を付加しています。

###④接続する
・「パッケージ」⇨「Remote-FTP」⇨「Connect」
⇨「remote-frp connected」となれば接続完了。


参考：https://loumo.jp/wp/archive/20151004000041/　　
https://qiita.com/otsukaaaa/items/8117055665af259bd9f2
代表的なデータマイニングタスクのまとめ


## はじめに
データマイニングにおいて重要なことの一つは、問題を対応方法が分っているタスクへ分解し、解決できる状態にすることです。
あらかじめ、代表的なデータマイニングのタスクを知っておくと問題解決に役立ちます。

## 分類 (classification)
母集団の構成要素がどのクラスに分類されるかを予測するです。
クラスとは母集団を複数の集まりに分割した際の階級です。
例えば、「全ユーザーの中でキャンペーンに反応してくれるのはどの顧客か」という問題は、「反応する」と「反応しない」の2つのクラスに分けられます。

## 回帰 (regression)
個別のデータに対して、何らかの数値を予測あるいは推定することです。
例えば、「ユーザーはこのサービスをどれほど使ってくれるか」という問題は「利用量」を予測できます。
分類は何かが*起こるかどうか*を予測するもので、回帰は*どの程度起こるか*を予測するものです。

## 類似性マッチング(similarity matching)
類似するデータを識別します。
類似性マッチングを利用したレコメンド（商品の購入履歴や趣向が似通った人を見つける)手法が存在します。
類似性の測定が分類や回帰などの基礎になることもあります。

## クラスタリング (clustering)
特定の基準を与えず、その類似性に従って母集団をグルーピングします。
「特定の目的を持たせずに、グルーピングしたり、分割境界を設定することは*可能かどうか*」に答えることができます。
データマイニングの予備調査として使用し、以降のデータマイニングのタスクやアプローチを決めるといった使い方ができます。

また、クラスタリングにより、意思決定プロセスの入力情報を作成することもできます。
例:「どのような製品を提供・開発するべきか」「マーケティングチームをどのように組織するべきか」

## 共起グルーピング (co-occurrence grouping)
データ間の関連を見つけることができます。共起とは一緒に発生することです。
例えば、「どの商品とどの商品が一緒に購入されているか」といった問題に答えることができます。

クラスタリングはデータを表現する各属性の値からデータ間の類似性を発見するものであるのに対して、
共起グルーピングは取引データ内で共起するデータに基づいてデータの類似性を見つけることです。

## プロファイリング (profiling)
個別のデータやグループ、そして母集団における典型的な振る舞いがどのようなものか明らかにします。
例えば、「このユーザーグループにおける典型的な携帯電話の使用量はどれだけか」といった問題に答えることができます。

母集団全体の典型的な振る舞いを定義することが多いが、より小規模なグループや個別のデータごとに定義することもあります。
不正利用対策や異常検知のためにその基準値を決めるために使うこともあります。
例えば、あるユーザーのクレジットカード利用に関するプロファイル(購入商品の傾向や購入地域など)を定義すると、その人のクレジットカードが使われたときに、その使用方法がプロファイルと合致するかどうか判定できます。

## リンク予測 (link prediction)
データ間のリンク(つながり)の強さを予測することです。
SNSのソーシャルグラフやレコメンドシステムでよく使われます。

## データ削減 (data reduction)
大量のデータセットから余分な情報を削ぎ落とし、重要な情報のみを含んだ小さいデータセットへ変換します。
情報の欠落が発生するので、データ削減の使い所には気をつける。

## 因果モデリング (causal modeling)
他の何かに影響を及ぼす出来事や行為を把握するために役立ちます。
実験データや観測データから因果関係を示す結論を導出することができます。

例えば、ユーザーに広告を出して売上が上がったとします。
しかし、ユーザーの購入行動を変えたのは広告のおかげではなく、単にいつも商品をよく購入してくれるユーザーだったのではないでしょうか。
因果モデリングの手法の一つにA/Bテストがあります。特定のユーザーに広告を見せる場合と見せない場合の差異を理解することに役立ちます。

## 参考

[戦略的データサイエンス入門 ―ビジネスに活かすコンセプトとテクニック](https://www.amazon.co.jp/%E6%88%A6%E7%95%A5%E7%9A%84%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%82%B9%E5%85%A5%E9%96%80-%E2%80%95%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%81%AB%E6%B4%BB%E3%81%8B%E3%81%99%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%81%A8%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Foster-Provost/dp/4873116856/ref=as_li_ss_tl?ie=UTF8&qid=1537314242&sr=8-1&keywords=%E6%88%A6%E7%95%A5%E7%9A%84%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%82%B9%E5%85%A5%E9%96%80&linkCode=sl1&tag=zeroshiki04-22&linkId=6ad3cc2e6c46287be6ae3a265fed41a8&language=ja_JP)