OmniAICreator/Qiita-1.07M huggingface dataset:
StoryboardReferenceの使いかた備忘録

# Storyboardを作成する
遷移先の画面（Second）を作成します。
1.  Second.storyboardとファイルを作成し、ViewControllerを配置する。
2.  SecondViewControllerファイルを作成する。
3.  StoryBoardの参照先を、作成したViewControllerクラスに設定する。
4.  StoryBoardIDを設定し、「UseStoryBoardID」にチェックを入れる
5.  「Is Initial ViewController」にチェックを入れる。

# StoryboardReferenceを設定する。
1. StoryboardReferenceを配置する
2. Storyboard項目に対象のファイル名(今回はSecond)を設定する。
3. ViewControllerから「Cmd+ドラッグ」でStoryboardReferenceをつなげる
4. 生成されたSegueにIDを設定する。

# 遷移元ViewControllerに処理を実装する。
* IBActionメソッドを配置する(ボタン等)
* メソッドの中に下記コードを実装する

``` swift
let storyboard: UIStoryboard = **self**.storyboard!
let next = storyboard.instantiateViewController(withIdentifier: "SecondViewController")

self.navigationController?.pushViewController(next, animated: true)

```
# 注意点
モーダルが表示されている画面では遷移できない？
ソフトウェア工学Q&A

Q: SWEBOKとは？
A: ソフトウェア工学に関する理論や方法論、ノウハウ、その他の知識を体系的にまとめたもので、ソフトウェアエンジニアには必要とされる知識。

Q: SWEBOK等に照らしたソフトウェア工学の定義と必要性
A: 

Q: ソフトウェアの品質特性について、その代表的な種類を含めて説明せよ。
A: 品質特性とは良いソフトウェアが満たすべき性質のことである。機能とその性質の集合である機能性、故障・障害時ソフトウェアの達成度を維持する信頼性、ユーザの労力や使用結果による評価である使用性、ソフトウェアの達成度と使用する資源の関係に影響する効率性、仕様化された改定を行うための労力に影響する保守性、ソフトウェアの環境を移行する際にソフトウェアの能力をもたらす移植性の6種類をソフトウェアの品質特性という。

Q: 多層アーキテクチャについて例を用いて説明せよ
A: システムを変更のしやすさごとに層として分割し、安定している層から順に積み上げていくことで構成されるアーキテクチャである。ユーザとの対話に関するUI層、ソフトウェアシステムの全体の流れの制御を行うアプリケーション層、データ間の関係とデータを処理する核となるドメイン層、DBによるデータの永続化を行うデータソース層などに分かれる。

Q: ソフトウェア保守の目的と内容について説明せよ(代表例も入れて)
A: 

Q: アジャイル開発について説明せよ
A: スパイラル型プロセスの亜種で、イテレーションを極小にすることで、堅実な小規模リリースと変更への俊敏な対応が可能になる。ただ、開発者間でface-to-faceでの意思疎通が重要となる。

Q: 構造化設計とオブジェクト指向設計の違い
A: 

Q: ファンインとファンアウトの違い
A: 

Q: ロバストネス分析とは
A: オブジェクトをバウンダリ、コントロール、エンティティの3種類に分けて、ロバストなシステム全体を構築するオブジェクト指向の分析手法であり、ユースケースの妥当性の検証、概念モデルの洗練、設計モデルの元を導出ができる。

Q: バウンダリクラス、コントロールクラス、エンティティクラスの違い
A: バウンダリクラスはアクタとシステムの境界に存在するインタフェースクラス、コントロールクラスはバウンダリからの刺激に基づいて、エンティティやコントロールを操作するクラス、エンティティクラスはシステムで一時的または永続的に記録するクラスである。

Q: 高凝集と低結合の違い
A: 

Q: 検証と妥当性確認
A: 検証とは、正しくソフトウェアを作れているのかをある段階・工程の入力と出力のつき合わせることで評価すること。妥当性確認とは、正しいソフトウェアを作れているのかを最初の要求と出力のつき合わせることで評価すること

Q: ホワイトボックステストとブラックボックステスト
A: ホワイトボックステストはプログラムの構造をみてテストデータを作成しテストするもの、ブラックボックステストはプログラムの仕様書をみてテストデータを作成しテストするもの。ホワイトボックステストは制御フローやデータフローの誤りを精密に特定できるが、ブラックボックステストはランダムに行うよりはずっと効率が良く、幅広いテストに対応できる。規模が大きくなった場合ブラックボックステストの方が現実的である。

Q: 同値クラステスト
A: 仕様から同値クラス群を取り出し、それぞれの同値クラスから代表値および期待出力からなるテストケースを作成しテストする。同値クラスとは同じ結果をもたらすと期待される入力値の集合であり、仕様に応じて細分化される有効値クラスと無効な値を持つ無効値クラスがある。
PWAの「ホーム画面に追加する」をAndroid Chromeでデバッグする

## 目的
PWAの機能であるホーム画面に追加（A2Hs）を実機（Android Chrome）で確認したい。

## 環境
Nuxt.js。
[Create Nuxt App](https://github.com/nuxt/create-nuxt-app)でプロジェクトを作成する際に、**@nuxtjs/pwa**をインストール。

workboxがdev環境でも動くようにするため、`nuxt.config.js`に設定を追加。

```nuxt.config.js
export default {
  //省略
  workbox: {
    dev: true
  },
  //省略
```

`npm run build`して`npm run start`する。
`http://localhost:3000`へアクセスしページが表示されることを確認。

## 検証手順
- Chrome DevToolsを開く。
- Remote devicesパネルを開く。表示されていなければメニューからMore tools -> Remote devicesで開く。
- Settings項目でDiscover USB devicesにチェック。
- Settings項目でPort forwardingにチェック。今回は実機（Android Chrome）でlocalhost:3000にアクセスしたいため、`3000`、`localhost:3000`とそれぞれ入力する。
- 実機でChromeを開いてlocalhost:3000にアクセスする。
- ホーム画面に追加するバナーが画面下部に表示される。
- バナークリックで画面中央にプロンプトが表示される。
- 追加をクリックでホーム画面にアイコンが表示される。
【JavaScript修行】初めてのReact覚書き


Reactってなんか凄いらしい。
そして難しいらしい。
概念だけでも掴みたく今日もお勉強です。
さらっと覚書きで行きます。

##Reactって？
Facebookが作ったjsのライブラリ。

 - UI作成にむっちゃ強い！
 - コンポーネント思考
 - DOMを自由自在に操る！

始めるにはNode.jsが必須。
https://qiita.com/kuniken/items/19fccc27b8bfa8068d22
この辺を参考に。

```
npm install react --save
```

これをターミナルに打ち込みインストール！

##React書いてみよう
https://uxmilk.jp/43555
https://webkikaku.co.jp/blog/javascript/react-start/
https://qiita.com/morrr/items/c32a4916d55373b64c70
この辺をがっつりみつつ。

**React,HTML風にかけるらしい。**
→`JSX`っていう名称の書き方（Javascript XML)

```react
<h1>{hello}<h1>
```
`{}`で書かれた部分はJavascirptとして扱われる！

**HTMLと違う属性名注意！！**

- class→**className**
- for→**htmlFor**

🐳< どれがどのDOM！？って混乱しなくてみやすい気がする。凄い

例としてリストを作ってみましょう。

```react
const happySet = ['ハンバーガー','ジュース','ポテト','おもちゃ']

<ul className="happySet">
   {happySet.map(item => <li>(item)</li>)}
</ul>
```

これによって以下が生み出されますね。

```react
[
  <li>{'ハンバーガー'}<li>, 
  <li>{'ジュース'}</li>, 
  <li>{'ポテト'}</li>, 
  <li>{'おもちゃ'}</li>, 
];
```


##コンポーネントの作り方



コンポーネントの作り方は二種類！

- `React.createClass()` に対してオブジェクトを渡す(ES5)
- `React.Component`クラス継承済みのクラスを定義！

絶対必要な**render**
~>DOMをレンダリングするとこ（HTMLを描写するとこ）

```react:コンポーネント作成(ES6)
class greeting extends React.Component{
  render(){
    return (<div>Hello</div>);
  }
}
```

Helloを`innerHTML`にもつdivを作る部品です！


大事な概念:`props`,`state`

##出力はどうやるの？

```react
ReactDOM.render(
  <div>hello</div>,
  document.querySelector('body')
)
```

`ReactDOM.render`を使って、
`出力するDOM`,`出力先`の順で指定します。
これでhtml内にhelloを出力できました！


続きはまた今度。
ロバストネス分析

ロバスト(頑健)なシステム全体構造を得るオブジェクト指向分析手法

基本的な考え方
オブジェクトを3種類に分ける

- バウンダリ: ソフトウェアシステムの外部とのインタフェース(画面に対応)
- コントロール: ユースケースでソフトウェアシステムが行うロジック(ユースケース記述から抽出される機能群に対応)
- エンティティ: ソフトウェアシステム内部で半永久的に管理するデータ(概念モデルを模倣する形でエンティティを抽出)

## ロバストネス分析の手順
1. アクタからの該当ユースケースに関与するエンティティのインタフェースとしてバウンダリを作成
2. 該当ユースケースに関与するエンティティを概念モデルから識別or新規に作成
3. バウンダリとエンティティをつなぐコントロールを作成
Windows10環境にRubyとRailsをインストールしてみた

#Windows10環境にRubyとRailsをインストールしてみただけ
情報が蔓延しすぎててめちゃくちゃ戸惑ったのでまとめておきます。今回はWindows10環境を使用。
間違いやエラーがあればぜひ教えてください。

#Rubyインストール
まず、Rubyインストールサイトに移動します。
https://rubyinstaller.org/downloads/
今回は64bitのWindowsなのでDevkit付きの1番上のものをインストールしました。
Devkitはビルド環境を手軽に整えるための開発用ツールキットらしい。
<img width="598" alt="スクリーンショット 2019-07-25 13.13.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413469/96bd506c-1e94-9d21-87d8-ba05c83d8fd2.png">
ライセンスに同意し指示に従って特に何も変更しません。
<img width="584" alt="スクリーンショット 2019-07-25 13.14.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413469/cb079d42-2c54-bf7f-204d-01e53df83d02.png">
途中でインストールするものが選択できるのですが、コマンドラインの環境を整えてくれるMSYS2もついでにインストールします。
そのまま進めてインストールしちゃいましょう。
<img width="580" alt="スクリーンショット 2019-07-25 17.24.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413469/77ab71f3-44c8-c468-ae14-ce7203c95546.png">
インストールが完了するとMSYS2をインストールするために勝手にシェルが起動されます。とりあえず「Enter」キー押してインストール。
<img width="573" alt="スクリーンショット 2019-07-25 17.22.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413469/2242f052-a598-0f30-4a64-83f6a1763e78.png">
終了したら、もう一度「Enter」キーを押すとシェルが閉じます。
これでRubyのインストールは完了したので、プロンプトから確認してあげましょう。
「Start Command Prompt with Ruby」を使用します。こちらはrubyコマンドのパスなどの環境設定が全て設定された状態でコマンドを打てます。
<img width="481" alt="スクリーンショット 2019-07-25 17.27.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413469/92384521-606c-523b-7845-b725a291fcf9.png">
ではバージョンを確認してあげましょう。

```
>ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
```

ちゃんと返ってきたら大丈夫!!
#Railsインストール
次に、Railsをインストールしていきます。Railsのインストールはプロンプトで以下を入力するだけです。

```
>gem install rails
```

インストールが完了したら、バージョンを確認してあげましょう。

```
>rails -v
Rails 5.2.3
```

ついでにbundlerもインストールしておきましょう。
bundlerはgem同士の互換性を保つための管理ツールです。

```
>gem install bunder
>bundler -v
Bundler version 2.0.2
```

あとはデータベース管理システムのSQLiteもインストールしてあげます。

```
>gem install sqlite3 --platform ruby
```

正常にインストールされていることを確認しましょう。

```
>sqlite3 --version
3.29.0 2019-07-10 17:32:03 fc82b73eaac8b36950e527f12c4b5dc1e147e6f4ad2217ae43ad82882a88bfa6
```

#動作確認
動作確認のために、試しに「TEST」という名前のフォルダを作成してみましょう。
デスクトップに移動し、以下のコマンドを入力してください。railsは「rails new」コマンドでフォルダを作ります。

```
>cd desktop
>rails new TEST
```

「TEST」というフォルダができるので移動します。

```
>cd TEST
```

サーバーを起動させます。<font color="Red">これは通常の「コマンドプロンプト」を使用します。</font>
デフォで設定されているPumaサーバが立ち上がります。
もし、「bundle install」コマンドを要求された場合実行してあげ、もう一度以下のコマンドを入力します。
サーバを終了したいときは「Ctrl+C」キーで終了できます。

```
>rails s
=> Booting Puma
=> Rails 5.2.3 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.1-p33), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
```

サーバが起動できたら、ブラウザからアクセスしていきます。検索バーに「http://localhost:3000/ 」と入力するとアクセスできます。
以下のように表示されれば正常に動いています!
<img width="623" alt="スクリーンショット 2019-07-25 17.44.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413469/ddc952c0-ca0c-9260-2f17-467fee66f586.png">
ここに行き着くまで大変だった...。
LeetCode / Merge Sorted Array

（[ブログ記事](https://mhiro216.hatenablog.com/entry/2019/07/25/174100)からの転載）

[https://leetcode.com/problems/merge-sorted-array/]

Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array.

Note:
The number of elements initialized in nums1 and nums2 are m and n respectively.
You may assume that nums1 has enough space (size that is greater or equal to m + n) to hold additional elements from nums2.

Example:
Input:
nums1 = [1,2,3,0,0,0], m = 3
nums2 = [2,5,6],       n = 3
Output: [1,2,2,3,5,6]

2つのソート済みリストをソートされた状態でマージしろという問題。
nums1はnums2の要素をマージするのに十分な長さがある前提で、nums1の要素をin-placeで置換しろという指示があります。

#### 解答・解説

##### 解法1
とにかく解くだけなら簡単で、どんな手法でも良いのでnums1, nums2をマージしてnum1.sort()としてやれば良いです。
しかしそれでは能がないので、別の解法を考えます。sort処理そのものも計算時間がかかりますしね。

```python
class Solution:
    def merge(self, nums1: List[int], m: int, nums2: List[int], n: int) -> None:
        """
        Do not return anything, modify nums1 in-place instead.
        """
        while n > 0:
            if m <= 0 or nums2[n-1] >= nums1[m-1]:  
                nums1[m+n-1] = nums2[n-1]
                n -= 1
            else:
                nums1[m+n-1] = nums1[m-1]
                m -= 1
```

まず、nums1の要素を置換するのはリストの後方なので、大きなインデックスから順にIterationを回していきます。
次に、if elseの分岐で何をやっているかですが、日本語で書くと以下のようになります。

nums1, nums2の要素の大小を後方から順に比較しながら、nums1の後方から順に要素を置換する。2つの分岐があり、
1. 比較するnums2の要素がnums1の要素以上のときは、nums2の要素で置換対象のnums1の要素を置換し、比較対象をnums2の次の要素に移し、
2. 比較するnums2の要素がnums1の要素より小さいときは、nums1の要素をコピーして置換対象のnums1の要素を置換し、比較対象をnums1の次の要素に移す（一時的にソート順序が崩れるが、上記1の分岐に入った時点で是正される）

となりますが、具体例を示した方が早いですね。
inputが以下だったとします。

```
num1: [1,2,3,0,0,0]
m: 3
nums2: [1,2,6]
n: 3
```

これに対して上記コードで処理したときのIterationごとの処理結果を示すと、以下のようになります。

```
compare 6 of nums2 and 3 of nums1
nums1:[1, 2, 3, 0, 0, 6]

compare 2 of nums2 and 3 of nums1
nums1:[1, 2, 3, 0, 3, 6]

compare 2 of nums2 and 2 of nums1
nums1:[1, 2, 3, 2, 3, 6]

compare 1 of nums2 and 2 of nums1
nums1:[1, 2, 2, 2, 3, 6]

compare 1 of nums2 and 1 of nums1
nums1:[1, 1, 2, 2, 3, 6]
```
【Unity】 ScrollBarをScrollRect.verticalNormalizedPositionを使ってスティックで操作する

##概要
マウスを使わずに、コントローラーの入力でuGUIのスクロールを行う記事を探したが、見つからず、試行錯誤した結果成功したので、まとめることにしました。誰かの役に立つことを願います。

まず初めに断っておきますが、縦スクロールの挙動しか検証していません。
横も理論上同じ動作ができるはずですが、未検証のため今回は***縦スクロールの方法のみを紹介します***。

##手順

ヒエラルキーにuGuIのCavasを作成し、ScrollViewを作成します。
次に、ScrollRectのHorizontalのチェックをはずします。

縦スクロールのみ必要なので、Scrollbar Horizontalを消します。

次に以下のスクリプトを作成し、ScroolViewにアタッチします。

```cs:ScrollBar.cs
using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public class ScrollBar : MonoBehaviour {
     public ScrollRect ScrollRect;

    void Update()
    {
        float v = Input.GetAxis("Vertical");

        if(Input.GetAxis("Vertical") != 0 )
        {
            if(Input.GetAxis("Vertical") <= 0 )
            {
                ScrollRect.verticalNormalizedPosition = Mathf.Lerp(ScrollRect.verticalNormalizedPosition, v, 0.01f);
            }


           if(Input.GetAxis("Vertical") >= 0 )
           {
               ScrollRect.verticalNormalizedPosition = Mathf.Lerp(ScrollRect.verticalNormalizedPosition, v+1, 0.01f);
           }
        }
    }
```

##解説
縦の入力値をvに保存し、正と負の入力に応じてスクロールバーの位置を変更しています。
Mathf.Lerpをかけることで入力値を緩やかにしています。

正の入力の際に、vに+1しているのは、スクロールバーの上限と下限が1と0に対し、入力値は1と-1のため、
1,1の間を補完させるとスクロールバーが端に行くほど動きが遅くなるため、+1をして1と2の間を補完するようにしています。

##手順続き

アタッチしたスクリプトのScrollRectのインスペクタに、ScrollViewのScrollRectをドラッグ＆ドロップします。
これでシーンを再生すると、スクロールバーをVerticalの入力で動かせるようになりました。

最終的にこのようなhierarchyになります。![スクリーンショット (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421073/53642f26-a237-6419-2735-c4c6aada69f5.png)
MySQLの小手先チューニング

# 概要

MySQL(5.7)でクエリが重たいとき、インデックスの付け替え等を試してもイマイチ早くならなかった。
そんなときにクエリの形状を変更してパフォーマンスが上がらないかということで、試していることです。
__コード解析はしていないので、推測で書いている部分は根拠ゼロです。__

## whereの順番

元々postgresを使っており、whereの最適化はオプティマイザがやってくれるものだと思っていました。
ところが先日、whereの順番を並び替えることでパフォーマンスが劇的に改善したので、少し調査してみました。

おそらくですが、__インデックスが使われる句以外はwhereに記載した順で比較されます__。
そのため、行数を多く減らせる句を前に、行数が少ないほど良い相関サブクエリは末尾に持っていくと、パフォーマンスが向上すると思います。
（実際に並び替えで速度が変わることをは確認しています。）

## カバリングインデックスに基づいてクエリを分割する

データサイズが大きいクエリでは、SELECTに書くのはidなどのカバリングインデックスが効く範囲のみにし、別途本体行を取得することでパフォーマンスが向上することがあります。

例えば下記のようなクエリです

```sql

SELECT
  u.id,
  u.name,
  u.address,
  p.name
  ...（カラム一杯）
FROM users u
INNER JOIN user_billings ub ON ub.user_id = u.id
INNER JOIN products p ON p.id = ub.product_id
...（JOIN複数回）
WHERE
  u.age > 20
  AND u.address LIKE '東京都%'
...
LIMIT 10
```

カバリングインデックスを使わない場合、最終的な結果行以外のデータも取得し、余分な時間がかかることがあります。
（データサイズが大きい場合顕著です）

以下のように書き直すと早くなることがあります。

```sql

SELECT
  u.id
  ...
FROM users u
INNER JOIN user_billings ub ON ub.user_id = u.id
...
INNER JOIN (
  SELECT
    id -- ← 検索等を行うクエリでは、idのみなど、余分なデータをとらないようにする
  FROM users u2
  WHERE 
    ...
  LIMIT 10
) tmp ON tmp.id = u.id -- ← 事前に絞ったidと結合し、そちらで必要なデータを取得する
```

## 最後に

以上が小手先チューニング方法です。
（特に後者については、）常にパフォーマンスが向上するわけではないですが、割とお手軽に試せることですので、困ったときにお試しください。
AtCoder Beginner Contest 006

###A - 世界のFizzBuzz

久々の余剰計算。

```py
I = int(input())
if I % 3 == 0:
  print("YES")
else:
  print("NO")
```

・他のAC

問題文に（整数  N(1≦N≦9)）って書いてあるから
確かにinput()in'369'で良かった。反省ポイント。

```py
print(' YNEOS'[input()in'369'::2])
```
:nth-child()を使った打消しの盲点

スマホとPC（タブレット）でカラムを変えたい時に、
`:nth-child()`を使った打消し時に嵌った点をメモします。

例：自動でn列の時に最後のサイドmarginを削ってくれるシステム

```sass:style.sass
      li
        &:not(:nth-child(2n))
          margin-right: 10px
        @media only screen and (min-width:640px)
          &:not(:nth-child(3n))
            margin-right: 10px
```

上記の様に書いたら全然打消ししない。
もしかしなくても`:not(:nth-child(2n))`と`:not(:nth-child(3n))`は別のセレクタ扱い？？？🤔

```sass:style.sass
      li
        &:not(:nth-child(2n))
          margin-right: 10px
        @media only screen and (min-width:640px)
          &:not(:nth-child(2n))
            margin-right: auto
          &:not(:nth-child(3n))
            margin-right: 10px
```

上手くいきました🤣🤣🤣
Debianでpipを使えるようにする

Debian 9 Stretchにpipを簡単にインストールしたメモ。
python3ユーザ向け。
##準備
pythonがインストールされていなければいけない。
pythonのバージョンを確認するには、`python3 -V`と入力する
筆者はpython3.5なので、

```
$ python3 -V
Python 3.5.3
```
これで確認できた。

また、`apt install`を使うのでsudo権限をあらかじめ持っておく。

##インストール
aptを使うので、いつもの更新をかける。

```
$ sudo apt update
$ sudo apt upgrade
```

次に、以下のコマンドを入力する。

```
$ sudo apt install python3-pip
```
これでpipとそれに依存するパッケージがインストールされるはず。
試しにバージョンを確認してみる。

```
$ pip3 -V
pip 9.0.1 from /usr/lib/python3/dist-packages (python 3.5)
```
確かにpipがインストールされている。

注意すべきなのは、コマンドは`pip`ではなく`pip3`なこと。

```
$ pip -V
bash: pip: コマンドが見つかりません
```
つい忘れてしまいがちなので気をつける（自戒）。

###参考文献
- [https://linuxize.com/post/how-to-install-pip-on-debian-9/](https://linuxize.com/post/how-to-install-pip-on-debian-9/)
IP制限がかかっているAPIをsshポートフォワーディングしてコールする

# はじめに

IP制限が掛かっているAPIやサイトに特定サーバからだとアクセスできるけど
localのマシンからだとIP制限でアクセスできない、ってことありますよね。
先日、その悩みを解消したので備忘録として残します。

# 解決方法1　VPN(今回は使いません)

![ssh-port-forwarding-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170923/3b45ae07-87ab-4155-6953-260bd7ed4607.png)

エンジニアが使いそうなVPNだと以下があります。

- [google cloud](https://cloud.google.com/vpn/pricing?hl=ja)
- [aws](https://aws.amazon.com/jp/vpn/)
- [azure](https://azure.microsoft.com/ja-jp/services/vpn-gateway/)

基本従量課金なんで今回は使わなかったです。

# 解決方法2　sshポートフォワーディング


本記事では[sshポートフォワーディングについての説明](http://www.koikikukan.com/archives/2016/09/15-000300.php)はせずに粛々とhow toだけ書いていきます。

例として、ssh接続先のvps.jp経由で、APIのエンドポイント（[https://httpbin.org/ip](https://httpbin.org/ip)）にアクセスできるようにしていきます。
※ [https://httpbin.org/ip](https://httpbin.org/ip)はIPが確認できるサイトです。

vps.jpのssh接続設定

``` txt:config
host vps
  user hoge
  hostname vps.jp
  Identityfile /hoge/.ssh/hoge
  port 22
```

```ssh vps```で接続できることを確認した上で下記を追記します。

``` txt:config
host tunnel-vps
  user hoge
  hostname vps.jp
  Identityfile /hoge/.ssh/hoge
  LocalForward 8000 httpbin.org:443
  port 22
```
追記が終わったら、```ssh tunnel-vps```でsshができることを確認して下さい。

ssh接続をしたままの状態で
localhost:8000へアクセスするとア〜ラ不思議☆
<b>httpbin.orgにはアクセスできません</b>

# なんで？
僕はずっと
サーバ側(ssh)がDNS解決出来てないんだなってサーバ側の```/etc/hosts```を書き換えるってアホなことやってたんですが、永井大先生(身内ネタすいません)がご教授くれたんでなぜ駄目だったかと解決方法を書きます。

**まず、なぜ駄目だったかの理由から**
至極かんたんな理由でしてhttpbin.orgのサーバへlocalhostというドメインでアクセスしていた為、サーバ側のvirtual hostがどこへ振り分けていいかわからないという状況となっていました。

**解決方法**
localマシン(MAC)の/etc/hostsに下記を追記します。

```
127.0.0.1	httpbin.org
```
超初歩的。

この状態で[https://httpbin.org:8000/ip](https://httpbin.org:8000/ip)へアクセスするとア〜ラ不思議☆
<b>ssh接続先のglobal IPがちゃんと返ってきます!</b>

スバラ！！！
html5 で導入された button タグに付けれる formaction と formtarget 属性 を用いてプレビューを実現する

html5 で導入された（formタグではなくて）buttonタグに付けれる formaction と formtarget 属性 を用いてプレビューを実現する話です。

### 前提知識説明
今までの認識では送信先を示すaction属性やmethod属性はformタグにしか指定できないイメージでした。
参考: http://html5.cyberlab.info/elements/forms/form-action.html

```html
<form action="http://html5.cyberlab.info/elements/forms/sample.php" method="post">
	<p>入力欄： <input type="text" name="sampleInput"></p>
	<p><input type="submit" value="送信"></p>
</form>
```

しかしながら、buttonタグに指定できる formaction属性を使用すると、formのなかの**ボタンごとに別々の送信先を指定できます**。
参考: http://html5.cyberlab.info/elements/forms/button-formaction.html

```html
<button type="submit" formaction="URL">ボタン名</button>
```

### プレビューの表現について

##### html の書き方例
※csrf_field の記述など端折っているので、本運用で使うときには Laravel Blade の記法に乗っ取って正しくお使いください。

```html
        // method も同様に actionmethod を使って個別に設定することができます（今回はたまたま共通なのでここで設定）
        <form class="form-horizontal" method="POST">
            <textarea name="hogehoge">ここにブラウザで入力される値を保存かプレビューのURLのどちらかに送りたい</textarea>
            <button type="submit"
                    formaction="http://fugafuga/preview"
                    // これを設定するとブラウザの別タブで開くので、よりプレビューっぽい
                    formtarget="_blank">プレビュー
            </button>
            <button type="submit"
                    // 上とは違う保存用のURL
                    formaction="http://fugafuga/">
                今すぐ更新
            </button>
        </form>
```

##### 対応する laravel の Controller の書き方例
routing は端折ってます。ここはControllerの記述。

```php
    public function preview(UpdateRequest $request)
    {
        $inputText = $request->input('hogehoge');

        return view('ここにプレビュー用のview', [
            'text' => $inputText
        ]);
    }

    public function update(UpdateRequest $request)
    {
        $inputText = $request->input('hogehoge');

        // 架空の保存メソッド
        $this->update($inputText);

        // 保存ページに戻るためのところ。本質的ではない
        return redirect()->route('piyopiyo');
    }
```

### おまけ（プレビューも get ではなくて post で投げている理由）

1. クエリパラメタではなくてリクエストボディにinputを入れたかったから
    * get のクエリパラメタは Laravel 的には文字制限があるようで、（確か 419 status あたりの）エラーが帰ってきてしまいました
2. mozilla のドキュメントによればPOSTメソッドは 「HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザがサーバに送信するためのメソッド」
    * 今回のケースでいうと、プレビューもリクエスト本文で提供したデータを考慮したレスポンスを要求しているので、これに当てはまると考えました


        // ref: https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
iOS:ローカルビルド版はリモート通知が有効がTestFlightにあげるとBadDeviceTokenエラーになる


ローカルでビルドしたバージョンでは、いつもNotificationが問題なく送信される。
因みにDeveloper用ANPS証明書を利用して検証。

但し、TestFlightのあげてインストールすると、いつも以下のようにエラーになってしまう。

```
　　status: '400',
    response: { reason: 'BadDeviceToken' } 
```

色々調べたが以下Linkの理由が原因だったので、メモして置く！
参照URL：
https://qiita.com/yoching/items/40b91d4f875972ed2d78

＊　TestFlight Beta Testingの内部テスト時に、PUSH通知を利用するには、Production用の証明書(Certificate)が必要です。

>iOS、Androidアプリの制作なら、hq7781@gmail.comまで、
>法人並みに、信頼且つ満足できる製品を納品いたします
Rubyのシンタックス勉強用（シンボル 編）

Rubyのシンタックスを息を吸うように書くために、少しでも理解が怪しいシンタックスを繰り返したくために書きます。

# 前提知識

## 文字列とシンボルを比較した場合

- 基本的にはシンボルは文字列よりも高速に処理できる
    - （その背景1） シンボルはRubyの内部では整数として扱われる
    - （その背景2） シンボルは同じシンボルであれば同じ`object_id`を持つ特徴があるためメモリの使用効率がいい
    - （その背景3） 文字列は同じ文字列であれば異なる`object_id`を持つ
    - （その背景4） 文字列はミュータブルなので破壊的な変更が可能 / シンボルはイミュータブルなので不可能

```ruby
p :ruby
p :ruby.class
p 'ruby'
p 'ruby'.class

=> :ruby
=> Symbol
=> "ruby"
=> String
```

### その背景2と3の証明

シンボルは同じシンボルであれば同じ`object_id`を持つ特徴があるためメモリの使用効率がいい。
文字列は同じ文字列でも異なる`object_id`を持つ。ことの証明

return

```rb
p :ruby.object_id
p :ruby.object_id
p :ruby.object_id
p 'ruby'.object_id
p 'ruby'.object_id
p 'ruby'.object_id

=> 664668
=> 664668
=> 664668
=> 70246727800420
=> 70246727800100
=> 70246727798620
```

### その背景4の証明

文字列は破壊的な変更が可能 / シンボルは不可能。ことの証明

return

```rb
p 'ruby'.upcase!
p :ruby.upcase!

=> "RUBY"
=> undefined method upcase! for :ruby:Symbol (NoMethodError)
```

参考: [プロを目指す人のためのRuby入門_152p](https://ruby-book.jnito.com/)

# シンボルはハッシュのキーとしてよく用いられる

「文字列とシンボルを比較した場合」の項目を見るとわかるように、文字列と比較すると、パフォーマンスの良さがわかると思います。
そして、よくハッシュの`key`として用いられています。

上と下は、同じです。

```rb
languages = { 'ruby' => 'rails', 'php' => 'laravel', 'python' => 'django', }
languages = { ruby: 'rails', php: 'laravel', python: 'django', }
```

`key`がシンボルになる場合、`=>`すら省略できます。その場合、シンタックスは`key: 'value'`になります。コロンの位置が変わることに注意。

また、`value`がシンボルにもなり得ます。

例えば、

```rb
languages = { ruby: 'rails', php: 'laravel', python: 'django', }
```

上記を、下記のように使うことも場合によっては良い方法もあります。

```rb
languages = { ruby: :rails, php: :laravel, python: :django, }
```
AWS　SageMakerとGCP。機械学習のマネージメントサービス比較

# AWS　SageMakerとは

Amazonが提供するサービスのひとつ。科学計算や機械学習の用途で使用されるソフトウェアを構築してくる完全マネージド型サービス
AWS SageMakerによって構築された環境は、機械学習のためのモデル訓練やデプロイだけでなく、JupyterNotebook、Jupyter LabによるPythonの開発環境も
提供してくれる。

https://aws.amazon.com/jp/sagemaker/
＊またAWS上で動作しているために、パソコンのOSの違いを気にする必要はないというメリットがある。
Pythonライブラリとして利用するPyTorch、Chainer、Scikit-learn、SparkML、Horovod、Keras、Gluon などが標準で含まれている。

・ソフトウェア開発に必要なDockerを始めとしたソフトウェアも初期状態でインストールされている。


# Google Cloud Machine Learning 
サイズを問わず、あらゆるデータの機械学習モデルを簡単に構築できる
マネージド プラットフォーム（Google Cloud Platformで提供）
https://cloud.google.com/ml-engine/?hl=ja

## AWS SageMakerサービス構成
#Ground Truth
  →2018年に発表された新サービス
  　機械学習における典型的なタスクのためのデータセットの構築の支援を行うためのサービス

・ノートブック(NoteBook)
　→開発・実行環境を提供
  
・トレーニング（training)
　→機械学習におけるモデル作成のために必要なサービスを提供

AWS SageMaker Ground Truthは、機械学習用のラベルデータ作成を行うためのプラットフォームです。

・SageMaker Ground Truthでは、以下の種類のラベルデータを作成することができます。

Image Classification
Bounding Box
Text Classification
Semantic (Image) Segmentation
Custom

参照記事：https://www.inoue-kobo.com/aws/sagemaker-ground-truth/index.html

・推論（Inference)
　→機械学習におけるモデルのデプロイのための必要なサービスを提供。
 　Web APIエンドポイントの設置など機械学習システムをサービス提供するために必要な機能群を提供。
   バッチ処理によるジョブ登録もすることができる。

### 開発環境のセットアップ

-マネージメントコンソールから「sagemaker」と入力
・ノートブックのインスタンスを作成する
　→IAMロールの設定など行う（AWSにおけるセキュリティ情報を集約して管理している）
　→Amazon S3へのアクセスを許可する
 
## 使用料金

Amazon SageMaker では、使用した分のみ料金が発生します。構築、トレーニング、ホスティングは秒単位で課金され、最低料金や前払いの義務はない。

Amazon SageMaker の料金はオンデマンド ML インスタンス、ML ストレージ、ノートブックとホスティングインスタンスでのデータ処理料金に分かれている。

無料利用枠

AWS 無料利用枠の一環として、Amazon SageMaker の使用を無料で開始できる。Amazon SageMaker では、サインアップ後最初の 2 か月間、モデル構築のための notebook 利用に t2.medium インスタンスを 1 か月あたり 250 時間、トレーニングに m4.xlarge インスタンスを 50 時間、リアルタイム推論とバッチ変換用の機械学習モデルのデプロイに m4.xlarge インスタンスを合計で 125 時間、無料で使える。

無料利用枠は、初めて SageMaker リソースを作成した最初の月から始まる

# Google Cloud Machine Learning の料金
→無料期間のトライアルも実施している

Googl Cloud MLでは、モデルのトレーニングや予測の実行に対して料金が発生します。ただし、クラウド内の機械学習リソースの管理は無料で行うことができます。各アクションの料金詳細を後に記述します。
アクション
米国
ヨーロッパ/アジア
モデル トレーニング
ML トレーニング ユニットごとに1時間あたり $0.49
ML トレーニング ユニットごとに1時間あたり $0.54
バッチ予測
予測1,000回あたり $0.10、プラス1時間あたり $0.40
予測1,000回あたり $0.11、プラス1時間あたり $0.44
Katalon Recorder （Chromeアドイン）使ってみた

Katalon Studio という自動テストツールを導入したのですが、Chromeのアドイン版もあるようなので導入してみます。

## インストール

**Katalon Recorder (Selenium tests generator)**
↓ から入手できる
https://chrome.google.com/webstore/detail/katalon-recorder-selenium/ljdobmomdgdljniojadhoplhkpialdid

###Chromeに追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/8b89a699-2010-935b-3b36-810f71873ef3.png)

###拡張機能を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/c630102c-3e0c-7da2-8255-1ad54c79f67e.png)

###アドインが追加された
会員登録しろ的なページが表示される けどしない
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/cd5ed26b-4c12-bca7-bced-0c675eed7cee.png)

## 起動
右上にある↓のボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/3f075b84-9bf2-2243-b6d7-6a2086a12ea0.png)

起動するとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/dfc55eb5-1acc-da9e-0d2a-79d1080f6ecc.png)
## 記録
↓のボタンを押してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/7ee47b17-6e03-d201-8a8d-2800c1310366.png)

記録が始まるので Webページを遷移してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/2a8cd569-3a4b-0ce4-0376-bb0144dbe208.png)

操作が記録されていく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/646dc0b0-abbb-c9de-daf8-fcb7c9990eaa.png)

記録を止める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/ec2610f9-28cf-e926-50a1-fa352b713a0f.png)

## 再生
記録した操作を再生してみる
↓のボタンを押してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/f0268355-7380-743c-dc5b-9822a263e06d.png)

再生されている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/d0c79bae-00b9-61f1-fd44-7752ba29ba91.png)

再生完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/dd6bc96d-567f-4a5e-a3fb-dc699288c2ae.png)

## 保存
操作の記録を保存してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/1645c1db-0617-f33b-55ce-981f8f7e9157.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/2f58997b-bae0-4e8e-8dda-e05685b2bee0.png)

##エクスポート
操作の記録をエクスポートしてみる
↓のEXPORTボタンを押してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/1b7dee48-37f7-a5c5-0c6d-5ab6200ed67b.png)

KatalonStudio形式で保存してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/d62c7f56-0814-cf53-7439-c3734af2c586.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222266/5a89251c-f860-d5f6-5fb8-bc0a7d07e7ae.png)
## 　　
軽快なツールだし 様々な形式にエクスポート保存できて便利そうです。
WebDriver+Junit など主流の形式もあり、既存の自動テスト環境でも活用しやすそうですね。
Windowsでファイル名を一括置換したい(何もインストールしたくない)

# 経緯
Windows環境。
月に1回、データ取込作業が発生。
テンプレートのCSVファイル名「YYYYMM_~.csv」のYYYYMM部分を一括置き換えしたくなった。
ただし、怪しいソフトはインストールしたくなかった。

# 対応方法
ググったらすぐ出ましたが、また忘れそうなので、備忘にメモ。
(https://it-engineer-info.com/language/powershell/1705/ を参照しました)

・PowerShell 使って、以下のコマンドを使えば良いとの事でした。

**Get-ChildItem <対象PATH> | Rename-Item -NewName { $_.Name -replace '置換したい単語','置換後の単語' }**
Railsのバリデーションエラーメッセージの取得

#概要
Railsの*model*にバリデーションを記述すると、バリデーションチェック後に、
エラーメッセージを取得できます。

その際によく使ったコマンドを備忘録として残します。

#基本的な流れ
1. インスタンスに対してメソッド*.valid?*を行う（バリデーションエラーがある場合、*false*が返り値となります）
2. その後、インスタンスに対してメソッド*.errors*でエラーを取得できます

#コマンド
```.rb
# ユーザーインスタンスを例にとります
@user = User.new

# 単にエラーがあるかどうかの判断を行う
@user.errors.any?
-> false # エラーなし
-> true # エラーあり

@user.valid?
-> false # バリデーションに引っかかった場合
-> true # バリデーションを通過した場合

# 下記コードの結果は".valid"実行後に正しく取得できます
@user.errors # エラー情報が取得できます
@user.errors.full_messages # エラー文の全てを取得できます
@user.errors.full_messages_for(:カラム名) # 特定のカラムに対してのエラーメッセージを取得できます
```
#表示の具体例
```.haml
// 部分テンプレート（_error-messages.html.haml)
- if user.errors.any?
  - unless user.valid?
    - if errors = user.errors.full_messages_for(column.to_sym)
      %ul
        - errors.each do |error|
          %li=error

// 呼び出し
= render partial: 'error-messages', locals: {user: @user, column: "nickname"} // ニックネームのエラー文のみ表示したい場合
```
初回フォーム表示時に空のユーザーインスタンスが作成されていると、フォーム入力前にも関わらずエラーが出てしまいます。ですので、1行目の*if*で、フォーム初回表示時にはエラー文が出ないようにしています。

*full_messages*でのエラー文取得は、配列型です。
それを取り出して表示することで、バリデーションエラーのメッセージをビューに表示することができます。

*.to_sym*は文字列をシンボル型にするメソッドです。
モデルの表記法

座席予約を例に説明する

## 概念モデル
対象業務の世界を構成する概念と概念間の関
係を表すモデル

*静的側面: クラス図、オブジェクト図
動的側面: プロセス図*

例: 座席とは... 予約とは...

## 要求モデル
顧客がシステムに望む事柄を表すモデル

*静的側面: ユースケース図
動的側面: ユースケース記述、アクティビティ図*

例: 座席をオンラインで予約できるように...

## 分析モデル
実装方法を関知せずに、対象業務についてシ ステム化する方法を詳細に表すモデル

*静的側面: クラス図
動的側面: コラボレーション図*

例: 画面から希望座席を指定すると...

## 設計モデル
システム化する事柄と、その実装方法を詳細に表すモデル

*静的側面: クラス図
動的側面: ステートチャート図、シーケンス図*

例: CGI経由でScreenオブジェクトからselect()すると...

## 実装モデル
プログラムソースコード、(コンパイル後の)プログラム、プログラムの計算機上の配置

*機能/静的/動的側面: OOPソースコード
物理側面: コンポーネント図、配置図*

例:
class Sheet{
  void select();
  x=y+1;
  ...
AndroidのData BindingでAndroid resource linking failedエラー

Data Bindingで実装してたら、なぜか突然以下のエラーが発生してビルドできなくなった。

```
Android resource linking failed
```

原因はData Bindingのプレフィックスを`@`でなく`$`にしていたことでした。

```xml:誤
app:imageUrl="${viewmodel.photoUrl}"
```

```xml:正
app:imageUrl="@{viewmodel.photoUrl}"
```

ハマった。
開発プロセス

## ウォータフォールモデル
旧型の開発プロセス
1. 分析(要求分析・定義)
1. 設計(内部・外部)
1. 実装(プログラミング)
1. テスト
1. 運用・保守

の順番でシステム(ソフトウェア)を開発
**順番を守らなければならない。**
### 利点
- 全ての工程が順番通り
- 全体の見通しがつく
- スケジュール、資源配分が計画通りにいく
- 工程が理解しやすい
- 大規模のシステム開発に向いている
### 欠点
- 開発工程の初期段階で要求仕様の確定は難
- UIの要求はシステムが完成してからじゃないと確立できない

トップダウン開発方式、段階的詳細化技法

## プロトタイプモデル
1. 要求分析
2. とりあえずプロトタイプ(試作)を作る
3. ユーザに使ってもらって、フィードバックを得る(評価)
4. 設計
5. プログラミング
6. テスト
7. 運用・保守

比較的小規模
### 利点
- 早い段階でユーザの要求を把握できる
- 開発期間、開発コストを小さくできる
- ユーザからの積極的な協力

### 欠点
- 開発スケジュールの調整が難

#現代的開発プロセスの基本形
## 反復型(iterative)
- 各イテレーションごとにシステムの完成度を高めていく
- 明確なモジュール分割なし
- 管理しにくい

例: ver1 -> ver2 -> ver3 -> ...

## 漸近型(incremental)
- 各イテレーションごとに明確に分割されたモジュール単位で開発
- 明確なモジュール分割
- 管理しやすい

## スパイラルモデル
ウォータフォールとプロトタイプの利点を抽出
反復型+漸近型
1. 要求定義
2. 要求分析
3. 設計
4. 実装・テスト
5. 評価・計画(2へ戻る)
6. 保守

## アジャイル開発プロセス
スパイラル型プロセスの亜種
- 極小のイテレーション
- 堅実な小規模リリースと変更への俊敏な対応
- 開発者間のface-to-faceでの意思疎通を重視

## ICONIX(アイコニクス)
- ユースケース中心に実装まで行う
  軽量オブジェクト指向開発プロセス
  - わかりやすい
  - 属人性が低い(と考えられる)
Dockerを使ってGAEにNuxt.jsをデプロイしたい


## 目次

1. centosにNuxt.jsの環境を構築するためのDockerFileの作成
2. Nuxt.jsを作成できるDockerの環境を立ち上げる、docker-compose.ymlを作成
3. Dockerの環境で、GAEにデプロイするためのGoogle Cloud SDK をインストール
4. gcloudの初期化と初期設定
5. Nuxtアプリを作成
6. Nuxtアプリにapp.yamlを追加してデプロイ

## 1. centosにNuxt.jsの環境を構築するためのDckerFileの作成

```Dockerfile
FROM centos:7.4.1708

RUN yum -y update

RUN yum -y install epel-release
RUN yum -y install http://rpms.remirepo.net/enterprise/remi-release-7.rpm

RUN yum -y upgrade
RUN yum install -y sudo
RUN yum -y install nginx

RUN curl -sL https://rpm.nodesource.com/setup_9.x | bash -
RUN yum install -y gcc-c++ make
RUN yum install -y nodejs

RUN npm install -g vue-cli
RUN npm install -g nuxt
RUN npm install -g create-nuxt-app

ENV HOST 0.0.0.0

CMD ["nginx", "-g", "daemon off;"]

WORKDIR /usr/share/nginx/html


```

## 2. Nuxt.jsを作成できるDockerの環境を立ち上げる、docker-compose.ymlを作成

```yaml
version: "3"
services: 
  web:
    build: 
      context: ./
    privileged: true
    volumes:
      - "./:/usr/share/nginx/html"
    ports:
      - 80:80
      - 3000:3000
    container_name: "nuxt-platform"

```

DockerFileよりdocker-composeを立ち上げる

```
docker-compose build
docker-compose up -d
docker-compose exec web bash
```

## 3. Dockerの環境で、GAEにデプロイするためのGoogle Cloud SDK をインストール

```
sudo tee -a /etc/yum.repos.d/google-cloud-sdk.repo << EOM
[google-cloud-sdk]
name=Google Cloud SDK
baseurl=https://packages.cloud.google.com/yum/repos/cloud-sdk-el7-x86_64
enabled=1
gpgcheck=1
repo_gpgcheck=1
gpgkey=https://packages.cloud.google.com/yum/doc/yum-key.gpg
       https://packages.cloud.google.com/yum/doc/rpm-package-key.gpg
EOM

sudo yum install google-cloud-sdk
```

## 4. gcloudの初期化と初期設定

```
gcloud init

// google acountでログイン後、いくつかの質問に答える
```

## 5. Nuxtアプリを作成

```
create-nuxt-app sample-app
cd sample-app
npm install
```

## 6. Nuxtアプリにapp.yamlを追加してデプロイ



app.yaml

```yaml
runtime: nodejs10

instance_class: F2

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'
  NODE_ENV: 'production'
```

Nuxt.jsのbuildとデプロイ

```
npm run build
gcloud app deploy
```

## 参考文献

### DockerでのNuxt.js環境の構築
https://qiita.com/ProjectEuropa/items/d9ee1b8c96084e3bab55

### Nuxt.jsのGoogle App Engineへのデプロイ(公式)
- app.yamlファイルを参考
- https://ja.nuxtjs.org/faq/appengine-deployment/

### CentOSへのGoogle Cloud SDKのインストールなど(公式)
- https://cloud.google.com/sdk/docs/quickstart-redhat-centos
CNNの仲間たちについてまとめてみた

自分の勉強用メモ。

#CNN(Convolutional Neural Network)とは
畳み込みニューラルネットワークと言われ、画像や音声認識などいろいろな場面で使われているDNNの１つです。
CNNを利用した下記ののモデルもあるが、ここでは扱わない。
・物体検出（R-CNN/Fast/Faster/SSD/YOLOなど）
・セマンテックセグメンテーション（FCN/SegNet/RefineNet/PSPNet/）

##特徴
・畳み込み層で特徴を抽出している。
　畳み込みを何度もかけることで、複雑な局所的特徴を抽出できる。
・プーリング層では領域内の最大値（または平均値）を取得する。
　位置情報が多少ずれていても同じ結果となるように調整し、ロバスト性を持つ。
　※ロバスト性とは、外的要因による変化を内部で阻止する仕組みや性質などを意味する表現。　

・Convolutionレイヤ（畳み込み層）と、Pooloingレイヤ（プーリング層）の一般的なネットワークは下記のとおり。
　ConvとPoolを繰り返し最後のレイヤで全結合層の処理をしsoftmaxで出力している。　
　
　X（入力データ）　→  Conv（畳み込み）→ Relu（活性化）→ Pool（プーリング）
　　　　　　　　　→Conv → Relu → Pool → Affine → Softmax(出力層の活性化）

・全結合層のニューラルネットワークでは形状を無視して、入力データを同じ次元として扱ってしまいます。
　CNNでは画像などの形状を理解でき、畳み込み層でフィルター、ストライド、パティングを活用します。
　畳み込み層とプーリング層で、形状を意識してデータを特徴付けることができます。

　畳み込み層の入出力のデータの形状は下記計算式で求めることができます。
　出力高さ＝（入力高さ　＋　2*パティング　ー　フィルターの高さ）/ストライド
　出力幅　＝（入力幅　　＋　2*パティング　ー　フィルターの幅　）/ストライド

※ここでは、コードの実装の詳細については触れませんが、
　簡単に言うと、入力データ（４次元＜個数,チャンネル数,高さ、幅＞）とフィルタ（重み）を
　im2colで２次元のデータに変換して行列計算します。
　計算後、reshapeで元の次元に戻します。

##CNNの仲間たち
ネットワーク図や詳細についてはリンクの論文からご確認ください。

###LeNet
はじめてのCNN。1998年に提案されました。
活性化関数にシグモイド関数が使われています。（現在の主流は、Relu)
また、プーリング層ではサブサンプリングで縮小しています。（現在の主流は、Maxプーリング）

[論文](http://yann.lecun.com/exdb/publis/pdf/lecun-99.pdf)

##AlexNet
ILSVRC2012年で優勝したモデル。
ディープラーニングの火付け役で、圧倒的な性能を見せつけ優勝しました。
5つの畳み込み層と3つの全結合層を持つ。
特徴として、パラメータの数が多いため過学習を起こしやすく、
2つの全結合層でドロップアウトを使っている。


###VGG
畳み込み層とプーリング層で構成されるベーシックなCNNです。
重みのある層は16層または19層まで重ねています。
3*3の小さなフィルターで畳み込みを連続して行なっていることが特徴です。

とてもシンプルな構成で応用が効くネットワーク。
その上、2014年のコンペでは２位の成績を納めるほど優秀。
＃１位はGooglenet

[論文](https://arxiv.org/pdf/1409.1556.pdf)

###Googlenet
Googleのチームによって開発されたネットワークです。
インセプション構造を持っているのが特徴。
インセプション構造を積み重ねてネットワークを構築している。

インセプション構造では、サイズの異なるフィルターを複数適用してその結果を結合するため、
従来のCNNよりも表現力が高まっている。
また、1*1の畳み込みフィルタが多くの場所で使われており、次元削減（パラメータ数の削減）により
計算コストを低くする工夫がみられる。
Inceptionmoduleにより、モデルの表現力と計算時間のトレードオフの関係を改善している。

また、Auxiliary Lossの存在も特徴的だ。
ネットワークの中間層に直接誤差を加えることによって、勾配消失の対策をしている。

[論文](https://www.cs.unc.edu/~wliu/papers/GoogLeNet.pdf)

##Resnet
Microsoftのチームによって開発されたネットワークです。
残差ブロック構造を持っているのが特徴。
畳み込み層とスキップ構造を組み合わせ、入力データをそのまま「identity mapping(恒等写像)」で、
出力に渡しています。
これまでのネットワークでは層を深くしすぎると学習がうまくいかずに性能が落ちてしまう
という問題があったが、スキップ構造によってその問題を解決しました。

2015 ILSVRCで優勝してます。誤認識率3.5%!!

[論文](https://arxiv.org/pdf/1512.03385.pdf)
[xcode] アップデート後にSimulatorが選択できなくなった時の対処法

最近xcodeをアップデートし、simulatorを選択しようとした時に選択できなくなったので、
同じような初心者の人で困っている人がいるかもしれないので対処法を記載します。

##対処法
**Macを再起動**　これで解決できました。

以上です。
Google AIY Vision Kit 顔を検出しと人工知能体験

今日の記事はGoogle AIY Vision 顔を検出しと人工知能体験。Googleが2018年4月に発表したAIY第2弾「Vision Kit」が届いたので、レビューしてみたいと思います。

![微信截图_20181109142012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/11f53b67-144e-f80b-6009-bce5c5f36871.png)

### AIY Projects
Googleは、もの作りを楽しむ「Makers」に、最先端技術AI（人工知能）を手軽で、身近に活用してもらえるようにと「Google AIY Project」 を立ち上げました。AIY Projects は、Maker の皆さまが AI を活用したプロジェクトを実現するために、2 つのDIYキットをリリースいたしました。

![微信图片_20190718135822.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/bb2e5f8c-dc56-1049-5fb7-1d04da2a0535.jpeg)
部品
![微信图片_20190322110455.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/b105902b-3fb9-e660-fd6b-e15ab51ebba6.jpeg)
組み立て完了



海外 Gravitylink（https://store.gravitylink.com） 購入したものです。


- 標準では次のモデルが用意されていて、すぐにスマート カメラのおもしろさを試せます。
- 1000種類のモノを認識するモデル
- 顔を検出し、「悲しみ」や「笑い」など表情を評価するモデル
- 人、犬、猫を識別するモデル

![微信图片_20190322105747.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/1dd69a69-dfcc-b26f-23bd-67ea36a7af8a.jpeg)

![微信图片_20190322105742.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/b47698da-5949-5ab0-9fd3-42a8df787ee9.jpeg)
![微信图片_20190322105718.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/7413b3d2-e186-0939-a8c7-50b836650aed.jpeg)


Vision Bonnetは Intel  Movidius MA2450という低電力駆動VPU(vision processing unit）が搭載して、ニューラルネットワークが直接にそのチップの上で動作します。

![微信图片_20190322105736.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/f8093cba-60c8-0159-ffcf-21dcbef4769b.jpeg)


#### Joy Detector
Joy Detectorのデモを試すには、Vision Kitを他の人の顔（または自分の顔）に向けます。 カメラが顔を検出すると、ボタンが点灯します。

Joy Detectorは、機械学習を使用して、人が微笑んでいるのか顔をしかめているのか、またどれだけそうしているのかを検出します。 微笑みがボタンを黄色に変え、眉をひそめてそれが青色に変わります。

![微信图片_20190322110429.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/39c3684c-aa3c-f10d-0da8-38b229031569.jpeg)


![微信图片_20190322110437.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/26561dc9-eda9-0d7f-683d-a8f85cedef6b.jpeg)


表現が本当に大きい場合は、音が鳴ります。 カメラが複数の顔を見ている場合は、各人の顔を評価し、各顔の喜びスコアを合計します。


#### 顔検出デモ

デモを実行するには、次のコマンドを入力します：

```
./face_detection.py --input image.jpg
```
画像ファイルに別の名前を付けた場合は、`image.jpg`を使用したいファイルの名前に置き換えます。

完了したら、次のようになります:

```
Face #0: face_score=0.989258, joy_score=0.969556, bbox=(632.0, -15.0, 782.0, 782.0)
```
- face_scoreは、モデルが顔を見つけたことをモデルがどの程度確信し
- joy_scoreは、その人物がどれほど満足しているように見えるかを示します（両方のスコアが1から外れます）。 
- bboxは、顔が画像のどこにあるかを教えてくれます。

![微信图片_20180611112532.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/e9070296-3f26-6e6b-629b-d02f3764e722.jpeg)

![微信图片_20180611112550.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/b09c01f2-33dd-ff70-0425-95296402299f.jpeg)

複数人の認識もできているみたいで


perfectです!
CSVを書き出した時にExcelでセル内改行させた話

# はじめに
アプリでCSVの書き出しを行った時に躓いた部分の解決方法を備忘録として記載します。

### やりたかった事
- TextViewで複数行書いた内容を同一セルでのCSVの書き出し

### 躓きポイント
TextViewに複数行で書いた内容をCSVで書き出した際に同一セルに書き出せずに
2行に分かれてカラムがずれてしまう現象が起きていました。
<img width="260" alt="スクリーンショット 2019-07-25 15.48.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198843/3075db95-dd6a-4285-39f8-ed47362e16dc.png">
↑ こんな感じになって欲しかったのが。。。。。
<img width="269" alt="スクリーンショット 2019-07-25 15.50.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198843/3aac6663-9b93-6265-51c2-e78fabf0474f.png">
↑ こんな感じになってしまう。。。。。

### 解消方法
成功と失敗をCSVをテキストエディタ等で比較して確認してみると


- 失敗 →
<img width="119" alt="スクリーンショット 2019-07-25 15.54.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198843/3ae69cdd-1d8b-b2e9-404c-def6dbdda091.png">
- 成功 →
<img width="120" alt="スクリーンショット 2019-07-25 15.55.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198843/f0ced87b-d0f7-5e16-f0d3-5e3dafeba944.png">

セル内で改行している部分は `""`で囲まれている！！
修正してみるとうまくセル内で改行されました。

Swift上でコードを書いた際は文字列としての`""`の他にさらに`\"\"`を中に組み込む事でExportができました！

# 感想
CSVは普通に\nでセル内改行ができると思ってたのですが仕様上できなくて苦戦しまいした。
インポートの部分は調べるとたくさん資料が出てくるので書きやすいかもしれません。
console.logを使って、隠しメッセージを仕込む方法

2週間程前に、自社サイトの改修依頼が来ました。
その際、console.logを使った隠しメッセージの実装方法について
メモも兼ねて、記事にします。

#全ページ共通のJSファイルに実装する
こんな感じで、実装してみました。
画像の大きさを調整するのが、ちょいと大変だったかなー。
自社サイトがjQueryを使ってたので、記述は、jQuery用に作ってます。
何かの参考になれば幸いです。
実装した隠しメッセージに対して、何か言われたら一番下の
「SAMPLE.SAMPLE_COMMON.EASTER_EGG.init();」をコメントアウトするだけでおｋ。

```javascript:common.js
var SAMPLE = SAMPLE || {}
SAMPLE.SAMPLE_COMMON = {}

SAMPLE.SAMPLE_COMMON.EASTER_EGG = {
  init: function () {
    this.consoleMessage();
  },
  empty: [
    ''
  ],
  triangleStyle: [
    'color:#005bac;'
  ],
  welcomeStyle: [
    'font-size:40px;'
  ],
  logoStyle: [
    'background-image: url(https://sample.jp/img/logo.jpg);', //画像は絶対パス
    'background-repeat:no-repeat;',
    'background-position:center;',
    'background-size:100% auto;',
    'color:transparent;',
    'font-size:20px;',
    'line-height:1.2;',
    'padding:10px 100px;' // paddingで縦幅と横幅を取る。
  ],
  leadStyle: [
    'font-size:14px;',
    'line-height:1;',
    'margin:0 0 0 14px;'
  ],
  consoleMessage: function () {
    console.log('%c▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼\n\n%cWelcome!!\n\n%clogo%cのサイトへようこそ！%c\n\n株式会社SAMPLEでは、エンジニアの方を募集しています。\n\nhttps://sample.jp/recruit/ %c\n\n▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲', this.triangleStyle.join(''), this.welcomeStyle.join(''), this.logoStyle.join(''), this.leadStyle.join(''), this.empty.join(''), this.triangleStyle.join(''))
  }
}

$(function () {
  SAMPLE.SAMPLE_COMMON.EASTER_EGG.init();
});
```
[Rust] rand でシードを指定

rand 0.7.0 でシードを指定して乱数を生成する例. (コピペ用) 2020-01-28 rand_xoshiro のバージョンを上げた

```toml:Cargo.toml
[dependencies]
rand = "0.7"
rand_xoshiro = "0.4"
```

```rust:src/main.rs
use rand::{Rng, SeedableRng};

fn main() {
    let mut rng = rand_xoshiro::Xoshiro256StarStar::seed_from_u64(123);

    for _ in 0..8 {
        println!("{}", rng.gen::<u8>());
    }
}
```

数値計算を想定して, 暗号学的に安全ではないが, 高速に動作する長周期 PRNG である Xoshiro256** を採用しています. 詳しい情報は rand の公式ガイドの [このあたり](https://rust-random.github.io/book/guide-gen.html) とか [このあたり](https://rust-random.github.io/book/guide-rngs.html) 参照. rand の基礎は [この記事](https://qiita.com/termoshtt/items/6e2ff724e6da86963aa9) が詳しいです.

# おまけ: 並列計算するとき

```rust
let rng1 = rand_xoshiro::Xoshiro256StarStar::seed_from_u64(0);
let mut rng2 = rng1.clone();
rng2.jump();
```

みたいな感じで RNG を増やしてそれを各スレッドで使う ( [参考文献](https://rust-random.github.io/rand/rand_xoshiro/struct.Xoshiro256StarStar.html#method.jump)).
python勉強メモ：ピアソンの相関係数

ピアソンの相関係数は、まだコードを読んだまでですが、
今後勉強していく予定でとなるので為になるＵＲＬを貼っておきます。

SciPy
Numpy
Pandas

を利用する方法があるようですね


【Python】ピアソンの相関係数をいろいろな方法で計算する方法まとめ(SciPy / Numpy / Pandas)
https://www.st-hakky-blog.com/entry/2018/01/30/004659
Golangでカンタンに指定回数繰り返す

# 競プロとかでn回処理を施行するとかしたいとき

メモです

1. nを標準入力
2. n回処理を施行

```go
var n int
fmt.Scan(&n)

for range(make([]int, n)) {
    //処理
}
```
  
Goのforeachはイテレータの要素を使わなくても文句言わない
Youtube の ID を取得する正規表現

とある SNS アプリでフィードに表示する動画 OGP に対応したときのものをメモ。

### 正規表現
```
^.*\/(?:watch\?)?(?:v=)?(?:feature=[a-z_]+&)?(?:v=)?([a-zA-Z0-9-=_]+)(?:&feature=[a-z_]*)?(?:\?t=[0-9]+)?$
```

### ツール
すごくわかりやすくて使いやすかった正規表現エディタです。
https://www.debuggex.com/r/DdsLZnB8UKCJ7hDz
PIC24にmruby/cでプログラムする（Lチカ）

#はじめに
pic24にmruby/cで書き込む手順が公開されていたのでやってみる。
個人的になんとなくPICが好きなので動かしてみたかった。

#使用部品・回路
・[pickit3](http://akizukidenshi.com/catalog/g/gM-03608/)
・[pic24ep512gp202-i](https://jp.rs-online.com/web/p/microcontrollers/9163753/)
・抵抗[330](http://akizukidenshi.com/catalog/g/gR-25331/),[10k](http://akizukidenshi.com/catalog/g/gR-25103/)
・コンデンサ[1u](http://akizukidenshi.com/catalog/g/gP-08150/),[10u](http://akizukidenshi.com/catalog/g/gP-08155/)
・[LED](http://akizukidenshi.com/catalog/g/gI-11577/)

電源ラインが1uF
左のソケットがPickit3　左から1ピン

![pic_ブレッドボード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195542/e06ce9c9-8483-fe81-8f21-38d2572d6a67.png)



#手順
基本的に同じ手順なので異なるところだけ書いておく。
https://www.s-itoc.jp/activity/research/mrubyc/mrubyc_news/842

・4.1の4は[pickit3]を選択
・MCCは無操作で「Generate」ボタンのみ押す
・main.cとsample1.rbは↓を使用

#プログラム
Lチカのみ

``` sample1.rb
while true
  led1_write( 1 )
  sleep 1
  led1_write( 0 )
  sleep 1
end
```

``` main.c
#include "mcc_generated_files/mcc.h"
#include "mrubyc.h"
#define FCY (_XTAL_FREQ/2)

extern const uint8_t sample1[];
#define MEMORY_SIZE (1024*20)
static uint8_t memory_pool[MEMORY_SIZE];

static void c_led1_write(mrb_vm *vm, mrb_value *v, int argc) {
    int set_value = GET_INT_ARG(1);
    PORTBbits.RB5 = set_value;
}

int hal_write(int fd, const void *buf, int nbytes) {
    return 0;
}
int hal_flush(int fd) {
    return 0;
}

int main(void)
{
    SYSTEM_Initialize();
    TRISB = 0x0;

    mrbc_init(memory_pool, MEMORY_SIZE);
    mrbc_define_method(0, mrbc_class_object, "led1_write", c_led1_write);
    mrbc_create_task(sample1, 0);
    mrbc_run();
    return 1;
}
```
Elasticsearch とは… そして Kibana で検索を実践!

# Elasticsearch とは

ぶっちゃけ NoSQL なデータベース エンジンです。

「オープンソースの全文検索エンジン」
「スケーラビリティに優れた全文検索エンジン」
「マルチテナント対応検索エンジン」

という説明文を良く見てきました。
それで、データはどこにあるの…? 何をどこから検索できるの…?
Elasticsearch が **データベース エンジン** です。

SQL Server のようなデータベース エンジンと比べて、
「データベース」や「テーブル」に相当する機能の呼び方が異なっています。

| RDB | Elasticsearch |
|---|---|
| データベース | インデックス |
| テーブル | マッピングタイプ |
| カラム（列） | フィールド |
| レコード（行） | ドキュメント |

引用元: [3分で分かった気になる、Elasticsearchとは？](https://qiita.com/r548/items/3622048a622d9c0acc05)

# Kibana とは

Elasticsearch につながって データの見える化を実現する web ベースのアプリです。

# 使用例

どのような使い道があるのか… 身近な課題を例に考えたいと思います。

## ファイル名検索で

ファイル名で検索… 私はよくこのコマンドを使います。もっぱら Windows ユーザーでして＾＾；

```bat
dir csvr.cs /b/s/a

D:\Proj\xxxxxxxxxx\Csvr.cs
D:\Proj\yyyyyyyyyy\Csvr.cs
D:\Proj\zzzzzzzzzzzz\Csvr.cs
D:\Proj\wwwwwwwwwwww\Csvr.cs
```

非常に強力なのですが… サブディレクトリをくまなく探索するために、多大な待ち時間が発生します。

そこで予めデーターベース化しておけば高速に検索できるはず。

Elasticsearch にデータを追加し、その強力といわれる検索エンジンをフル活用すれば待ち時間を短縮できるのでは、という目論見です。

（しかしながら、ファイルの増減によりデータベースの方の情報が古くなります。定期的にデータを最新の情報に更新する必要があります）

[Index API](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-index_.html) の解説通り、延々とファイル情報の JSON を投入していきます。

```plaintext
PUT dd36/files/D%3A%5CProj%5Cxxxxxxxxxx%5CCsvr.cs
{
    path: "D:\Proj\xxxxxxxxxx\Csvr.cs",
    ext: "cs",
    name: "Csvr.cs",
    size: 4178
}
```

ファイルパスの urlencode をキーにしています。
dd36 は私の PC 名です。

Elasticsearch にデータを投入したら Kibana にアクセスします。

例： http://ubunku:5601/

まず Kibana にインデックス `dd36` を認識して頂くように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364126/7760b55b-cab9-e49e-3d99-eee1a7065c82.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364126/1937ea3d-24ac-8f90-7231-4ee9ad09021a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364126/5b08d3ec-7ed8-1b10-c212-74eb0892726e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364126/ac2f3fb4-988f-e871-e15b-9366933a565f.png)

これで良いと思います。つぎに検索

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364126/725a26bd-2275-b3b3-9415-629bed62e928.png)

`name:Csvr.cs` で検索すると、`name` が `Csvr.cs` であるレコードを検索してくれます。

ワイルドカードが使えます。`name:*csv*.cs` のような検索ができます。
`Csvr.cs` のほかに `Csvw.cs` のレコードもヒットします。

# まとめ

- Elasticsearch は、方々紹介されているように優れた検索エンジンです。
- Elasticsearch へデータを登録してから、それらを検索します。
- Kibana を使うと UI で検索できます。
- ワイルドカード検索を使うと便利!
PHPを使い、ファイルをアップロードすると、日本語のファイル名のみ失敗する

# 問題
PHPを使い、ファイルアップロードが出来るようになったのは良いのですが、
日本語で書かれたファイル名のデータが送れなかったので備忘録として載せておきます。
多分当たり前の事だと思いますが...その点はお許しください。
php7.0.33(サポート終了済)

以下のものを付けてみてください。

```php
<?php
setlocale(LC_CTYPE, 'ja_JP.UTF-8');
.
.
.
?>
```
付ける前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349992/6267635b-53d2-6af4-f292-0fbab3bf95c2.png)
付けた後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349992/2fe0b051-d50c-fdc8-4678-efbc315921d9.png)

これで何とかなるはずです...
また、phpのバージョンが古いので、これからアップデートします。
Redux-hooks【短編】

## 概要
Reactで開発するにあたってHooksちゅう新しい機能を使うので、勉強したことをメモ的に投稿していこうと思います。

[公式ドキュメント](https://ja.reactjs.org/docs/hooks-intro.html)  
[React Redux(Hooks)](https://react-redux.js.org/next/api/hooks)

トピックス
・useSelector
・useDispatch

## useSelector
selecter関数をしてStoreのstateからデータを取得します。
useSelectorはStoreを監視し、アクションがディスパッチされるたびにselecter関数を実行します。

例：`useSelector`

```js:useSelector
 const selector = state => state.name;
 const name = useSeletor(selector);
```

## useDispatch
Storeからdispatch関数を返します。
dispatch関数を使用してアクションをディスパッチできます。

例：`useDispatch`

```js:useDispatch
 const dispatch = useDispatch();
 dispatch({ type: "LOGIN", 'くいだおれ太郎' });
```

## useSelector & useDispatch
実際に使ってみたサンプル

```example.jsx
import React from "react";
import { useDispatch, useSelector } from "react-redux";

const Example = () => {
    /* useSelector */
    const name = useSeletor(state => state.name);
    /* useDispatch */
    const dispatch = useDispatch();

    return(
        <>
            <h1>NAME: {name}</h1>
            <input
                type="text"
                onChange={event =>
                    dispatch({ type: "NAME", event.target.value })} />
        </>
    );
}
```

## ざっくりまとめ
 Action, Reducerの設定は今まで通り必要ですが、connect関数を使用した、めんどくさい設定がいらんようなって楽チンになりました。