OmniAICreator/Qiita-1.07M huggingface dataset:
クエリパラメタをReactコンポーネントに渡すときはreact-routerが便利

他のページからReactアプリに遷移してきたときに、URLのクエリ文字列にパラメタを指定し、そのパラメタの値に応じて見せ方を変えたい場合があります。そんなときは`react-router`と`query-string`を使うと便利です。以下ではどんな感じに使うかを簡単に説明します。

デモ用にこんなディレクトリを作ります：

```
react-router-demo/
  ├── index.html
  └── app.jsx
```

`index.html`は単にReactアプリのマウントポイントです。

```html
<!DOCTYPE html>
<html>
<head>
<title>react-router demo</title>
</head>
<body>
<!-- Reactアプリのマウントポイント !-->
<div id="mount"></div>
<script src="./app.js"></script>
</body>
</html>
```

下が`app.jsx`の内容です。
ポイントはクエリ文字列を受け取りたいコンポーネントを`<Router>` と`<Route>`でかこむことです。
これにより`props.location.search`にクエリ文字列が格納されるので、コンポーネントに渡すことが出来ます。ただし、このままでは`?query1=FirstQuery&query2=SecondQuery`のように、クエリ文字列が処理されていない状態なので、`queryString`を使ってパースしています。

```jsx
import React, {Component} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route} from "react-router-dom";
import queryString from 'query-string';

class App extends Component {
    render () {
        const qs = this.props.qs;
        return (
            <div>
                <a href='?query1=FirstQuery&query2=SecondQuery'>parse url query parameters</a>
                <ul>
                    <li>query1: <strong>{qs.query1}</strong></li>
                    <li>query2: <strong>{qs.query2}</strong></li>
                </ul>
            </div>
        );
    }
}

ReactDOM.render(
    <Router>
      <Route render={ (props) => 
        <App 
            qs={queryString.parse(props.location.search)}
        />
      }/>
    </Router>, 
  document.getElementById("mount"));
```

`parcel`を使ってビルドしページにアクセスすると、クエリ文字列を受け取れていることが確認出来ます。

```
$ parcel build -d ./ -o app ./app.jsx
$ python -m SimpleHTTPServer
```

![qs.gif](https://qiita-image-store.s3.amazonaws.com/0/101644/0e71bd22-ee3f-c051-3cc5-ba4052fef04f.gif)
lombokをインストールしたらEclipseが起動しなくなった話

## lombokをインストール
[Eclipse：lombokインストール手順](https://web-dev.hatenablog.com/entry/eclipse/lombok)
に従ってlombokをインストールしたらeclipseが起動しなくなりました。
この手順自体は正しいですが、次のようなケースだとうまく起動できなくなります。

## 原因：eclipse.exeのファイルパスに日本語が含まれていた
私の環境のeclipseのファイルパスには日本語が含まれていました。

```
C:\日本語\exclipse\exlipse.exe
```

lombokインストール時、excipse.iniに `-javaagent` が追記されるのですが、日本語の間に `\` が入ってしまい、起動エラーが起こっていたようです。

## 対処：exlipse.iniを修正する

``` :修正前
-javaagent:C:\日\本\語\exclipse\lombok.jar
```

``` :修正後
-javaagent:C:\日本語\exclipse\lombok.jar
```

## 感想
`-clean` 等も効かなくて4回くらいeclipseのzipフォルダ解凍しなおしました。
Zappier で Github Issue 作成をトリガーにして、pythonスクリプトからGoogle翻訳APIを叩き、翻訳済みの新しいGithub Issue を作成する例。日本語から英語へバージョン。

Zappier で Github Issue 作成をトリガーにして、pythonスクリプトからGoogle翻訳APIを叩き、翻訳済みの新しいGithub Issue を作成する例。日本語から英語へバージョン。

# 補足

Google のトークンの有効期限などは確認していない。とりあえず動いた。

# Google翻訳API用に GCP の認証トークンを取得しておく

[Google Cloud の認証トークンを gcloud コマンドで取得する。環境変数でサービスアカウントファイルを指定する例。 · Issue #545 · YumaInaura/YumaInaura](https://github.com/YumaInaura/YumaInaura/issues/545)

# Issue 作成をトリガーにする

![image](https://user-images.githubusercontent.com/13635059/52161371-86b87280-2707-11e9-866a-5260655d30bf.png)

# Code By Zapier 

Github の title と description を 入力リソースに指定する

![image](https://user-images.githubusercontent.com/13635059/52161410-e9117300-2707-11e9-8e73-ac194f9e3c8f.png)



# Script

先程取得したトークンをスクリプト内に埋め込む
Google 翻訳で Markdownが崩れるので、pythonで適当に整形。

```py
import requests
import re

data = {
  'q': [
        input["title"],
        input["body"],
    ],
  'source': 'ja',
  'target': 'en',
  'format': 'text'
}

url = 'https://translation.googleapis.com/language/translate/v2'
token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

headers = {
 'Authorization': 'Bearer {}'.format(token),
 'Content-Type': 'application/json',
}

res = requests.post(url, headers=headers, json=data)

# Title
output_title = res.json()['data']['translations'][0]['translatedText']
# For twitter in English 240 upper limit characters
output_title = output_title[:200] 

# Fix Body: Image Markdown tag spaces
output_body = res.json()['data']['translations'][1]['translatedText']
output_body = re.sub(r'! \[image\] ', "![image]", output_body)


output = [
  {
    "title": output_title,
    "body": output_body
  }
]
```

# Find or Create Issue をアクションにする

- いろいろ記入する
- 「Github ISsueを探して、なければ作成することも可能」という謎の仕様なので、検索対象として、絶対に入力しないような Search value を指定しておく。

![image](https://user-images.githubusercontent.com/13635059/52161437-3e4d8480-2708-11e9-93d5-fd04c6c93de2.png)

![image](https://user-images.githubusercontent.com/13635059/52161442-43aacf00-2708-11e9-8ecd-1ecc955ccac5.png)

# 結果

https://github.com/YumaInaura/issue/issues/63

![image](https://user-images.githubusercontent.com/13635059/52161460-79e84e80-2708-11e9-9857-3bcb74853452.png)

画像もバッチリ

![image](https://user-images.githubusercontent.com/13635059/52161462-81a7f300-2708-11e9-9a50-d35b8e808d57.png)




# おまけ。必要なら Zapier の Detect Language / Only Continue if で、日本語判定された場合にだけ、アクションが走るようにしておく。

![image](https://user-images.githubusercontent.com/13635059/52161375-9637bb80-2707-11e9-9f05-b21c336e5fb3.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/548








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Inno SetupでXCopyFile()を実装する

## Inno Setupのスクリプトでファイルを配置する

Inno Setupでファイルやフォルダをインストールする際、[Files]セクションを利用するのが基本です。しかし、いろいろな事情で、スクリプトを使ってファイルをインストールしたいこともあります。こういった場合、インストーラー本体とインストールするファイルをユーザーの環境の一時的な場所に展開しておき、インストーラーで適切な場所にファイルをコピーすることになります。こういった用途には、[CreateDir()](http://www.jrsoftware.org/ishelp/topic_isxfunc_createdir.htm)や[CopyFile()](https://jrsoftware.org/ishelp/topic_copyfile.htm)などの関数を利用できます。しかし、ファイル数が多いとコーディングも大変ですし、ファイル構成が変わるとせっかく書いたコードを編集することになり大変です。

## そこでXCopy()関数

Windowsのコマンドプロンプトでは、フォルダ構造を保ったまま複数のファイルをコピーするXCOPYコマンドがあります。この機能がInno Setupのスクリプトで使えれば便利なのですが、残念ながら用意されていません。そこで、独自に実装してみたのですが、思ったより簡単にできたので紹介します。手順的には、コピー元のフォルダとファイルを列挙して順次コピーしていくだけなので、列挙方法をInno Setupのヘルプで調べます。まずは、FindFirst()とFindNext()を組み合わせて・・・と思い[FindFirst()のヘルプ](http://www.jrsoftware.org/ishelp/topic_isxfunc_findfirst.htm)を見ると、下記のサンプルのコードが載っています。

```Pascal
var
  FilesFound: Integer;
  FindRec: TFindRec;
begin
  FilesFound := 0;
  if FindFirst(ExpandConstant('{sys}\*'), FindRec) then begin
    try
      repeat
        // Don't count directories
        if FindRec.Attributes and FILE_ATTRIBUTE_DIRECTORY = 0 then
          FilesFound := FilesFound + 1;
      until not FindNext(FindRec);
    finally
      FindClose(FindRec);
    end;
  end;
  MsgBox(IntToStr(FilesFound) + ' files found in the System directory.',
    mbInformation, MB_OK);
end;
```

ん！ 再帰を使えば「このコードそのまま使えるじゃん！」ということに気づき、ちょっとの改造でXCopy()関数を実装しました。

```Pascal
//---------------------------------------------------------------------------
// sourcePathフォルダをdestPathフォルダ以下にファオルダ構造を保ってコピーする
//---------------------------------------------------------------------------
procedure XCopyFile(sourcePath, destPath: String);
var
  FindRec: TFindRec;
begin
  if FindFirst(sourcePath+'\*', FindRec) then begin
    try
      repeat
        if (FindRec.Name<>'.') and (FindRec.Name<>'..') then begin  // フォルダ自身と親フォルダは処理しない
          if FindRec.Attributes and FILE_ATTRIBUTE_DIRECTORY = 0 then begin
            // ファイルのとき
            CopyFile(sourcePath + '\' + FindRec.Name, destPath + '\' + FindRec.Name, False);
          end else begin
            // ディレクトリのとき
            CreateDir(destPath + '\' + FindRec.Name);
            XCopyFile(sourcePath + '\' + FindRec.Name, destPath + '\' + FindRec.Name);
          end;
        end;
      until not FindNext(FindRec);
    finally
      FindClose(FindRec);
    end;
  end;
end;
```

FindFirst()とFindNext()は、カレントディレクトリ「.」と親ディレクトリ「..」も返すので、これらを処理しないようにする必要がありました。
学びの記録　〜Progate HTML&CSS 中級編〜

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているryota_miraidenshiです。
今回、HTML＆CSS 中級編で学んだことで忘れやすい部分についてまとめます。

#インラインブロック
ブロック要素とインライン要素の特徴を併せ持つ要素。
インライン要素のように横に並べることができ、ブロック要素のように幅や高さを調節できる。

![スクリーンショット 2019-02-02 16.09.53.png](https://qiita-image-store.s3.amazonaws.com/0/351843/c43b03c0-ba2f-3bde-81da-5cbf3e61cbb3.png)
これはdisplayプロパティで指定して使用する。

```html:index.html
display: inline-block;
```

#「margin: 0 auto」「text-align: center」の違い
これらは要素を中央に寄せる方法ですが、使う場面が分かれます。
![スクリーンショット 2019-02-02 16.18.10.png](https://qiita-image-store.s3.amazonaws.com/0/351843/daea57ed-f397-62b4-7d2a-63815952d0b6.png)

#position
HTMLの要素は基本的に重ならないようになっていますが指定してあげることで重ねることができます。
![スクリーンショット 2019-02-02 16.22.59.png](https://qiita-image-store.s3.amazonaws.com/0/351843/e8d79127-ebeb-fcde-265f-0b590ab5d64d.png)
上は画面上の左上が基準になっていますが、要素を基準にすることもできます。
![スクリーンショット 2019-02-02 16.25.03.png](https://qiita-image-store.s3.amazonaws.com/0/351843/9c0414c6-ee72-2029-f4e2-9d8f1f08a57a.png)

#ボタン
立体的なボタンならばユーザーは押したくなります。
そのようなボタンを作るにはまず影をつけること。

影をつけるにはbox-shadowプロパティを使います。
![スクリーンショット 2019-02-02 16.29.56.png](https://qiita-image-store.s3.amazonaws.com/0/351843/90c9ebc0-1db3-5cc4-f262-d4d2d3400791.png)
そしてクリック時に影をなくし、なくした影分ボタンを移動させることで押したような感覚を再現できます。
セレクタにactiveつけることでクリック時にのみ適用されるCSSになります。
![スクリーンショット 2019-02-02 16.34.13.png](https://qiita-image-store.s3.amazonaws.com/0/351843/6a99ebbf-5af5-dc98-6061-68e0d6e5e44e.png)
ガウス関数メモ

ガウス積分

定義

```math
Γ(z) = \lim_{\substack{u \to \infty }}\int_{0}^{u}t^{z-1} e^{-t}dt \\ 
     = \lim_{\substack{u \to \infty }} \{[ t^{z-1} (-e^{-t}) ]_{0}^{∞} - \int_{0}^{u}(z-1)t^{z-2} (-e^{-t})dt\} \\
= \lim_{\substack{u \to \infty}} (z-1)\int_{0}^{u}t^{z-2} e^{-t}dt \\
= (z-1) Γ(z-1) = ... = (z-1)(z-2)... 1 \times Γ(1) = (z-1)! Γ(1) 
```
また，　Z=1のとき，

```math
Γ(1) = \lim_{\substack{u \to \infty }}\int_{0}^{u} e^{-t}dt \\
    = \lim_{\substack{u \to \infty }}[-e^{-t} ]_{0}^{u}  \\
    = 1
```

大切なのは，階乗を関数の形で表せること！

```math
 (z\geq0) \\ 
Γ(z+1) = z! \\

```



以下は，メモ（おまけ）

```math
Γ(\frac{1}{2}) = \sqrt{ \pi }
```

の証明

```math
Γ(\frac{1}{2}) = \int_{0}^{∞}t^{-\frac{1}{2}} e^{-t}dt \\
t = u^2 とおく \\
\frac{dt}{du} = 2u \\
Γ(\frac{1}{2}) = \int_{0}^{∞}\frac{1}{u} 2u e^{-u^2}du \\
  = 2\int_{0}^{∞} e^{-u^2}du \\
```

ここでガウス積分を求める．

```math
\int_{0}^{∞} e^{-u^2}du \\
```

これを求めるために，

```math
I = \int_{-∞}^{∞} e^{-x^2}dx \int_{-∞}^{∞} e^{-y^2}dy \\
とおく． \\
x = rcos(θ)　, y = rsin(θ)
とおくと，
```

ヤコビアン:r より，
 
```math
I = \int_{0}^{2\pi}dθ\int_{0}^{∞}re^{r^2}dr \\
 = 2\pi (-\frac{1}{2}[e^{-r^2}]_{0}^{∞}) = \pi 
```
つまり，

```math
\int_{0}^{∞} e^{-u^2}du　= \frac{1}{2}\sqrt{I} = \frac{1}{2}\sqrt{\pi}
```


よって，

```math
Γ(\frac{1}{2}) = 2\int_{0}^{∞} e^{-u^2}du
= \sqrt{\pi}
```

以上．
オフラインリアルタイムどう書く E30 の問題

オフラインでリアルタイムに「どう書く」をやるイベント( https://yhpg.doorkeeper.jp/events/84247 )を行っています。

問題は「面白いセルの合計」という名前で、詳細は
http://nabetani.sakura.ne.jp/hena/orde30sumt/
です。

実装ができた方はこちらのコメント欄からリンクを張っていただくと見つけやすくて助かります。

似たような問題をもっと解きたいという方は、
https://nabetani.hatenadiary.com/entry/yhpg_list
に過去問リンク集がありますので、そちらをご覧になると良いと思います。

次回の E31 は 3/9(土)。
see https://yhpg.doorkeeper.jp/events/86766
Redux は reducer から理解するのがわかりやすい

いくつか解説を眺めてみたが、最初から全部の流れを概観しようという解説や、action から入る解説は私にとって少しわかりにくかった。

少し理解が進んだ今、redux は reducer から理解すべきだ、と思う。
reducer を理解するといくつも疑問が生じる。その疑問を解消する形で理解の範囲を広げていく。

## Reducer を理解する
### `(state, action) => newState`

Reducer はただの関数だ。
一般的に `(state, action) => newState` とあらわせる（[シグネチャ](https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%B0%E3%83%8D%E3%83%81%E3%83%A3)として）。
日本語に翻訳するなら、

「状態と作用をとって新しい状態を返す関数」

あるいはもっと噛み砕いて、

「状態に作用を加えて新しい状態を作る関数」

とも言えるかもしれない。
もちろん、新しい状態にさらに作用を加えれば、また別の状態が生まれる。

`(newState, anotherAction) => newState2`

もちろんこれは副作用のない関数だ。
state と action の組み合わせが同一であるならば、何度呼んでも同じ newState が返ってくる。

### Array.prototype.reduce との類似

[`Array.prototype.reduce()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) という JavaScript の関数で例えてみよう。
時系列に沿って次のような action があって、なぜか配列に収まっていたとする。

`[action1, action2, action3]`

この action の配列によって作られる状態は次のようなものだ。

```js

[action1, action2, action3].reduce((累積した状態, action) => {
  // ...
  // 状態に対して action が作用する処理
  // const newState = ...

  return newState // 新しい状態 ＝ 次の累積した状態
}, 初期状態)
```

`Array.prototype.reduce` は初期状態に対し、コールバックによる配列要素の処理を累積させていくものだ。

さて、ここで渡されるコールバックのことを reducer という。
[MDN doc のデモ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) でも reducer という単語が使われている。

```js:MDNdocDemo
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
```

この reducer と Redux の reducer はほとんど同じものである。
ただ、Redux においては action は時系列に沿って順次やってくるものであって、最初からおとなしく配列におさまっているものではない。

## 生じる疑問

さて、 reducer は状態の**変化**を司るが、これだけで状態を**管理**をすることはできない。
以下の疑問が当然生じてくるだろう。

- reducer の返り値はどこに（誰が）保存するのか
- reducer はどうやって呼ぶのか

### reducer の返り値はどこに（誰が）保存するのか

A. store

具体的には `createStore` という関数から返されるオブジェクトである。

```js
store = createStore(reducer[, 初期状態とかエンハンサとか])

// いろんな処理

store.getState() // reducer の最新の返り値、すなわち現在の状態を得る
```

### reducer はどうやって呼ぶのか

A. store のメソッド経由で

このメソッドを dispatch という。

```js
store.dispatch(action)
```

state は store が持っているので、渡す必要はない。

dispatch の名前の由来は知らないので知りたいが、別に知る必要もない気もする。
とりあえず、メソッドの名前だ。

## その他のあったらいいな
### ActionCreator

そもそも action とはなんぞや。
上の方では作用と言っていたけれど、作用を表現するための決まった形式がある。
具体的には次のようなJSオブジェクトでしかない。

```js:action
{
  type: 'ADD_OBJCET',
  payload: object
}
```

ただ、この action を毎回作るのめんどくさい。
これを作る過程でいろんなロジックも必要になりそう。

それなら ActionCreator にまとめてしまえ。

```js
// 上の action が返ってくるような関数 actionCreator を作っておく
store.dispatch(addObjectCreator(object))
```

ちょっとオシャレ（？）になると自分で作ったアクションをそのまま dispatch しちゃったりする。
基本的に自由だ。
redux に必要というより react-redux に必要（便利）。

### subscribe

状態変化の通知が欲しかったらコールバックを渡して購読する。
実際には dispatch のたびにコールバックが呼ばれるらしい。

```js
store.subscribe(() => console.log(store.getState()))
```

状態の監視ができる。
Windows 10 Pro x64 + VsCode で SQL Server 2016 Express にアクセスする .NET Core コンソールアプリを作成してみる

#目的
VsCode で SQL Server 2016 Express にアクセスするコンソールアプリを作成してみる
.NET Core で SQL CLR はと思ったけど Microsoft.SqlServer.Server が無いので無理？っぽい
##初期設定
・VSCode を立ちあげて適当なフォルダを選択する
・ターミナルメニュー -> 新しいターミナルを選択
・ターミナルで dotnet new console [Enter]
##launch.jsonの作成
デバックボタンの押下
　-> 'launch.json'の構成や修正の押下
　　-> 環境の選択で -> NET Core と選択
##launch.jsonの修正
```
修正前
"program": "${workspaceFolder}/bin/Debug/<insert-target-framework-here>/<insert-project-name-here>.dll",
修正後
"program": "${workspaceFolder}/bin/Debug/netcoreapp2.2/cmdexe.dll",
```
##task.json の作成
デバッグメニュー 
　-> デバック
　　-> タスク'build'を見つけられませんでした
　　　-> タスクの構成ボタン押下
　　　　-> テンプレートからタスクを生成 -> .Net Core .Net Core ビルドコマンドの実行
##System.Data.SqlClientを追加する
表示メニュー 
　-> コマンドパレット
　　-> nuget
　　　-> Nuget package Manager:Add Pckage
　　　　-> System.Data.SqlClient を入力後 enter
　　　　　-> System.Data.SqlClient を選択
　　　　　　-> 4.6.0 を選択
cmdexe.csproj に以下が追加される

```
  <ItemGroup>
    <PackageReference Include="System.Data.SqlClient" Version="4.6.0"/>
  </ItemGroup>
```
##サンプルコード
<pre>
using System;
using System.Data.SqlClient;
namespace cmdexe
{
    class cmdexe
    {
        static void Main(string[] args)
        {
            SqlConnectionStringBuilder constr = new SqlConnectionStringBuilder();
            constr["Data Source"] = "xxx.xxx.xxx.xxx";
            constr["User ID"] = "demo";
            constr["Password"] = "demo";
            constr["Initial Catalog"] = "demo";
            constr["Trusted_Connection"] = true;

            SqlConnection con = new SqlConnection(constr.ConnectionString);
            con.Open();
            try {
                SqlCommand oc = new SqlCommand("select * from ZIPCODE WHERE seq = '00000001'",con);
                SqlDataReader odr = oc.ExecuteReader();
                while (odr.Read() == true) {
                    Console.WriteLine(odr["POSTAL"]);
                }
                odr.Close();
            }
            finally {
                con.Close();
            }
        }
    }
}
</pre>
##参考にしたのは以下のサイト
[dotnet new](https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-new?tabs=netcore21)
vscodeをビルド&実行

以下のページを参考にしてgithubのvscodeをビルドして実行した。

contributionの第一歩。

[How to Contribute · Microsoft/vscode Wiki](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run)

### 環境
#### os

macOS mojave 10.14.2

#### node

8以上9未満が要件

8.15.0をインストールした。

[リリース一覧 \| Node\.js](https://nodejs.org/ja/download/releases/)

#### python

version2.7が要件。macOSではデフォルトで入っている。

### ビルド

特に問題なくビルドできた。ビルド時間はけっこうかかった(計測していない)。

### 実行

初回のみ、ffmpegとelectronがダウンロードされる。

```shell
$ scripts/code.sh                             *[master]
[14:20:04] Using gulpfile ~/.../vscode/gulpfile.js
[14:20:04] Starting 'clean-electron'...
[14:20:04] Finished 'clean-electron' after 207 ms
[14:20:04] Starting 'electron'...
↓ ffmpeg-v3.1.2-darwin-x64.zip [====================] 100%
Downloaded ffmpeg-v3.1.2-darwin-x64.zip
↓ electron-v3.1.2-darwin-x64.zip [====================] 100%
Downloaded electron-v3.1.2-darwin-x64.zip
[14:25:45] Finished 'electron' after 5.68 min
[14:25:54] Syncronizing built-in extensions...
```
![vscode.png](https://qiita-image-store.s3.amazonaws.com/0/5247/5f340256-cc0b-86ba-cbac-f7bb2c2cc874.png)
GCPのAlways FreeとFree Trialはどちらが優先されるか？

Always Freeが優先されて適用。

https://cloud.google.com/free/docs/gcp-free-tier

> Always free の使用 
無料トライアルの期間中に Always Free の対象となるリソースを使用する場合、これらのリソースが無料トライアルのクレジットに対して課金されることはありません。

お得情報でした。
GCEのAlways Freeが無効になっていた

自分用メモなので参考程度に。

# 症状

* GCEの無料枠(Always Free)を使えるインスタンスを作った（はずだった）
* 一ヶ月運用してみて無料だった
* だか料金表を見ると無料トライアル枠からの天引きとなっておりAlways Freeではなさそうだった
* always freeによるディスカウントが効いていないのでは？

# 料金表

実際の料金表はこんな感じだった。

![スクリーンショット 2019-02-02 15.34.26.jpg](https://qiita-image-store.s3.amazonaws.com/0/320676/e8364da1-a453-c262-88a0-ec564d3b043c.jpeg)

割引されてはいるのだが、 `Credit FreeTrial` と `Compute Engine Sustained Usage Discount` の2種類による割引であり `Always Free` による割引ではない。

GCEのディスカウントは少なくとも以下の3種類がある。

* 無料枠(always free)
* フリートライアル
* 継続利用料金

## 無料枠(always free)

これが今回で使おうと思っていたディスカウント対象であり特定の条件を満たすインスタンスを利用すると割引される。

## フリートライアル

GCPの使用開始してから1年間300ドルまで割引でGCPのサービスを利用できる制度。

## 継続利用料金

インスタンスを継続的に利用した場合に発生する割引。
後で調べる。

# 原因

今回の場合はインスタンスタイプが無料の対象外になっていた(ただのミス)

`f1-micro` にする必要がある。

## フリートライアルとAlways Freeはどちらが優先されるか

Always Freeが優先。

https://cloud.google.com/free/docs/gcp-free-tier

> Always free の使用	
> 無料トライアルの期間中に Always Free の対象となるリソースを使用する場合、これらのリソースが無料トライアルのクレジットに対して課金されることはありません。

よって、仮説「フリートライアルを使っていたためにAlways Freeによる割引が無視されていた」という仮説ははずれ。

本当にAlways Freeによる割引が適応されていなかった。

# 解決策

## インスタンスタイプの変更

当該のインスタンスを `f1-micro` に変更する。ただしインスタンスを一度停止しなければならない（IPが変わるかどうかは未確認）。

今すぐでなく、フリートライアル枠がなくなってからやってみようと思う。

## 追加の調査

ちゃんと無料枠の条件を満たすインスタンスを生成すればディスカウントされるのかどうか別のプロジェクト作成して確認しておく（料金表はプロジェクト毎に分けられる）。
gitで特定のコミットを自分のブランチに取り込みたい

##  記事を書いた経緯
gitを使って業務をしていた際に、「別ブランチの特定のコミットのみを反映させたい！」という状況になったため、備忘録も兼ねて。
エディタはvisual studio codeを使用してます。

##  cherry-pickコマンド
gitで特定のコミットを反映させたい場合には『`git cherry-pick`』コマンドが使えます。
おおまかな流れとしては、以下のような感じです。

①取り込みたいブランチへ移動
　　　　　　　↓
②ログを表示させ、コミットidをメモる
　　　　　　　↓
③『`git cherry-pick`』を打つ

次項ですこし詳しめに説明します。

##  実際の使い方

### ①取り込みたいコミットのあるブランチへ移動
visual studio codeでは、ブランチ移動の際はコマンドを打たなくてもUIからブランチを切り替えることができます。

左下あたりの矢印の部分をクリックします。
![ブランチ移動①.png](https://qiita-image-store.s3.amazonaws.com/0/352984/1a82657f-fa99-10d2-84f5-331042214989.png)

次に変更したい ブランチ名をクリックします。今回は [sample] をクリックしています。
![ブランチ移動②.png](https://qiita-image-store.s3.amazonaws.com/0/352984/bc9595cb-c03a-1847-d4c4-3863710cc4ff.png)

さっきの左下の部分が選択したブランチ名に変わっていたらOKです
![ブランチ移動③.png](https://qiita-image-store.s3.amazonaws.com/0/352984/4ae87e76-f75c-2081-0225-758c8818bd93.png)

### ②『git log』でログを表示させ、コミットidをメモる
取り込みたいコミットのあるブランチに移動できたら、ターミナルに『`git log`』コマンドでログを表示させます
![git log.png](https://qiita-image-store.s3.amazonaws.com/0/352984/983bbb58-91df-c9c0-72d3-862e43821965.png)

コミット情報が表示されている中で、取り込みたいコミットの青枠で囲った部分をコピーしておきます。
![git log.png](https://qiita-image-store.s3.amazonaws.com/0/352984/9538b019-024a-3096-623c-dc5d5f38cb44.png)

### ③自分のブランチへ戻り、『git cherry-pick』コマンドを打つ
①の容量で自分のブランチへ戻ったら、ターミナルで以下のコマンドを打ちます。
さきほどコピーしたコミットidを使います。

```ruby:VSのターミナル
git cherry-pick 取り込みたいコミットid
```

その後自分のブランチで『`git log`』し、取り込みたいコミット情報が表示されたら完了です。

##  『git cherry-pick』を取り消したい場合

「やっぱり元に戻したい！」という場合は、自分のブランチで以下のコマンドを打ちます。

```ruby:VSのターミナル
git cherry-pick --abort
```
Minttyの環境構築 [VSCodeとOfficeを添えて]

# はじめに
ソフト開発的なことを仕事にしているせいなのかどうかはわならないが、マウスに手を伸ばす瞬間がなんだかんだで結構ストレスになる。

なので、できるだけ色々な作業をマウスなしでできるようにしたいとは、前々から思っていた。が、１０年ほど前にCygwinで同じようなことにチャレンジした時の色々面倒だった記憶がよみがえって億劫になっていた。のだけれど、最近またちょろっと調べてみたら、Minttyとかいう素敵な環境があるらしいことが分ったので、重い腰を上げて環境構築を行った。

こういう環境設定ってインストールするPCの状況によって必ずしもこの通りにやればいいってわけじゃないんだけれども、とはいいつつも（明日の自分を含めた）誰かのために設定方法などを残しておく。


# 目標
Windows 8.1にMinttyをインストールする。

今回の環境構築で重要視したのは以下の項目。
- ターミナルの外観が見やすい事。
- MinttyからVisual Studio Code (VSCode)とOffice関係(Excel、Word、PowerPoint)が呼び出せる事。

1個目のポイントは、まぁかっこいいターミナル使ってると仕事してる感が出るってのと、あとはフォントとか色とかの視認性は作業効率に大きく影響する、という持論のため。2個目のポイントは、VSCodeとOfficeがあればそれなりのことが大体片付くため。


# Minttyのインストール
[ここ](http://pmw1415.hateblo.jp/entry/2015/10/17/222111)を参考にした。
「ショートカット作成」の後に以下のことをやった。

```
$ mingw-get update
$ mingw-get upgrade
```

# その他のターミナルの外観の設定
インストールの項目に記載してサイトで説明されているカスタマイズ以外にやったことは以下の通り。
ちなみにフォントの種類とサイズ、自分は[Ricty Diminished Discord](https://github.com/edihbrandon/RictyDiminished)を14ポイントで設定。

## カラースキームの変更
適当なエディタで~/.minttyrcを開いて以下の項目を追加。

```
ForegroundColour=208,208,208
BackgroundColour=21,21,21
CursorColour=253,157,79
Black=21,21,21
BoldBlack=80,80,80
Red=172,65,66
BoldRed=116,44,45
Green=144,169,89
BoldGreen=102,119,61
Yellow=244,191,117
BoldYellow=238,158,45
Blue=106,159,181
BoldBlue=70,120,141
Magenta=170,117,159
BoldMagenta=130,80,120
Cyan=117,181,170
BoldCyan=77,144,133
White=208,208,208
BoldWhite=245,245,245
```

なお、[ここ](https://github.com/oumu/mintty-color-schemes)に何種類かのカラースキームがあるので、好みに合わせて変更すればいい。

以上の設定で大体以下のような感じになる。
![2019-02-02-15-21-29.png](https://qiita-image-store.s3.amazonaws.com/0/119094/3c138abe-e45a-f785-c07b-98bb847e5fec.png)


# VSCodeとOfficeの呼び出し
## VSCodeの呼び出し
### 準備
[VSCodeのインストールフォルダのパス]\bin にパスが通っていることを確認する。

### 設定
~/.profileを適当なエディタで開く(無けりゃ作る)。以下の項目を追加して保存。

```
alias code='cmd //C code $*'
```

そんで、以下のコマンドを実行して設定を反映

```
$ source .profile
```

これでcodeコマンドでVSCodeが起動してくるようになる。当然

```
$ code [filename]
```

でfilenameが開くし、

```
$ code .
```

でMinttyのカレントディレクトリが開かれた状態でVSCodeが立ち上がってくる。

## Officeの呼び出し
### 準備
excel.exeとpowerpnt.exeとwinword.exeが入ってるフォルダを探す。
自分の場合は "C:\Program Files\Microsoft Office 15\root\office15" だった。
以後このフォルダのパスを[OFFICEROOT]とする。

### 設定
~/.profileを適当なエディタで開く(無けりゃ作る)。以下の項目を追加して保存。

```
function xls() {
  "[OFFICEROOT]\excel.exe" $@ &
}
function ppt() {
  "[OFFICEROOT]\powerpnt.exe" $@ &
}
function wrd() {
  "[OFFICEROOT]\winword.exe" $@ &
}
```

そんで、以下のコマンドを実行して設定を反映

```
$ source .profile
```

これでxlsコマンドでExcelが、pptコマンドでPowerPointが、wrdコマンドでWordが起動してくるようになる。当然

```
$ xls [filename]
```

でfilenameが開く。

# 最後に
とりあえず、これで比較的快適なターミナル環境が出来上がった。使ってればそれなりにやりたいことは増えてくると思うので、出てきたらまた別記事に起こそうと思う。
それと、後出し感が半端ないが、上のやり方が正しいやり方かどうかはわからない。特にExcelの起動とかは相当怪しい。が、まぁとりあえず今のところはやりたいことができてるからこれで使ってみて、なにかあればまたその時に考える、ということで。
Windows Installer手引書 Part.6 64bit版Windowsにおけるフォルダとレジストリ

[**前の記事へ**](https://qiita.com/tohshima/items/9c992f16d08f9b3b962d)　　[**目次へ**](https://qiita.com/tohshima/items/dc4c4721d50a2ad70c7a)　　[**次の記事へ**](https://qiita.com/tohshima/items/2dfa841cbab3d8488641)

## 64bit版プログラム用のフォルダとインストーラー

64bit版Windowsでは、64bit版プログラムだけでなく32bit版プログラムも動作します。しかも、両者を1つの環境にインストールすることもできます。この仕組みのために`Program Files`フォルダーが２つ用意されています。64bit版プログラム用に`Program Files`が、32bit版プログラム用に`Program Files (x86)`が使われます。とはいえ、OSがプログラムの格納場所に応じて「32bit版アプリしか動かない」とか「64bit版アプリしか動かない」といった制限をかけている訳ではないので、どこにアプリを置いても動作します。

しかし、インストーラーでファイルを配置する際には明確に使い分けられます。MSIのコンポーネントには32bit版と64bit版を区別する属性があり、32bit版コンポーネントでは64bit版Windowsの`Program Files`にファイルを置けませんし、64bit版コンポーネントでは`Program Files (x86)`にファイルを置くことができません。例えば、下記の様にWiXで64bit版コンポーネントで`Program Files (x86)`にファイルを置くコードを書くと、エラーが出てビルドできません。

```xml
 1:<Directory Id="TARGETDIR" Name="SourceDir">
 2:  <Directory Id="ProgramFilesFolder">
 3:    <Directory Id="INSTALLFOLDER" Name="SetupProject1">
 4:      <Component Id="prg" Guid="{466B1C91-5BFE-412A-9D9E-23A5745986CB}" Win64="yes">
 5:        <File Id="fCalc" Source="C:\Windows\System32\calc.exe" />
 6:      </Component>
 7:    </Directory>
 8:  </Directory>
 9:</Directory>
```

このエラーをFixするには、Componentエレメントの`Win64=yes`を外すか、2行目のDirectoryエレメントのIdを`Id="ProgramFiles64Folder"`に変更する必要があります。

例えば、32bit版Windows上で下記のパスにファイルを置く32bit版のインストーラーがあったとしましょう。 
`C:\Program Files\VenderName\ProductName` 
このインストーラーを64bit版Windowsで動かすと、下記のパスにファイルが置かれます。 
`C:\Program Files (x86)\VenderName\ProductName` 

気を付けなければいけないのは、64bit版Windowsの`Program Files`にファイルを置くインストーラーは64bit版のMSIとして作成する必要があり、32bit版Windowsでは動作しない、ということです。また、32bit版のMSIは64bit版Windowsでも動作するが、`Program Files`にはファイルを置けない（`Program Files (x86)`には置ける）、ということです。

## 64bit版プログラム用のレジストリとインストーラー

64bit版のWindowsでは、レジストリも32bit版プログラム用の領域と64bit版プログラム用の領域に分かれています。32bit版プログラムでレジストリにアクセスすると32bit版プログラム用の領域にリダイレクトされ、64bit版プログラム用の領域にはアクセスできません。

例えば、32bit版Windows上で下記のキーにデータを置く32bit版のプログラムがあったとしましょう。 
`HKEY_LOCAL_MACHINE\SOFTWARE\VenderName\ProductName` 
このプログラムを64bit版Windowsで動かすと下記32bit版プログラム用のキーにリダイレクトされます。 
`HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\VenderName\ProductName` 
同様に、下記のキー 
`HKEY_CURRENT_USER\Software\VenderName\ProductName` 
は 
`HKEY_CURRENT_USER\Software\Wow6432Node\VenderName\ProductName` 
にリダイレクトされます。

インストーラーで64bit版Windows上でレジストリにアクセスする際の挙動は、先に説明したフォルダにアクセスする際の挙動と同じです。

- 32bit版コンポーネントでは32bit版プログラム用のレジストリキーにしかアクセスできない。
- 64bit版コンポーネントでは64bit版プログラム用のレジストリキーにしかアクセスできない。
- 64bit版MSIで32bit版コンポーネントを使って32bit版プログラム用のレジストリ領域にアクセスすることはできるが、32bit版Windowsで動かすことはできない。
- 32bit版MSIは64bit版Windowsで動かすことはできるが、64bit版プログラム用のレジストリキーにアクセスすることはできない。

## MSIを構成する上で注意すべきこと

64bit版MSIには32bit版コンポーネントも64bit版コンポーネントも混在することができますが、32bit版MSIには64bit版コンポーネントを入れることができません。これは、32bit版Windowsで動作するプログラムも配布する場合、32bit版プログラムと64bit版プログラムを一つのMSIにまとめることができないことを意味します。このような要求がある場合は、32bit版のインストーラーと64bit版のインストーラーの2つを配布するか、どちらのOS上で起動したか判断し、環境に合ったインストーラーを起動するセットアップランチャーを用意することになります。

[**前の記事へ**](https://qiita.com/tohshima/items/9c992f16d08f9b3b962d)　　[**目次へ**](https://qiita.com/tohshima/items/dc4c4721d50a2ad70c7a)　　[**次の記事へ**](https://qiita.com/tohshima/items/2dfa841cbab3d8488641)
日本のGPKI アプリケーション認証局2を無効化する

~~Mozillaの認証局セットを使いましょう。 おわり。~~

これじゃあ面白くないので、Windowsで無効化してみましょう。

# Windows Server 2016 で試してみる

自分の手元にはこれしかなかったですが、たぶん　Windows 10でも同じ方法が使えるかと思います。

Google Chromeの詳細設定から「証明証の管理」という項目をクリック。Edgeと　IEの場合もそれっぽい項目をクリックします。

そうすると、以下のような画面が現れるはずです。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/154157/e0c4f5f9-563c-8b74-ddfb-0bb789a23534.png)
macOSでJuliaをJupyter Notebookで使えるようにするまでの手順


# 実施環境
* macOS 10.14.x
* homebrewを利用
* Python3.x+pip 導入済

補足：bash4を前提にしていますが、各自利用している環境に合わせてPATHを追加するなどしてください。

# インストール作業

Juliaのインストールにhomebrewを利用します。
homebrewの導入手順については本記事では割愛します。

また、すでにJuliaおよびJupyterを導入している場合は本項目をスキップしてください。

### Juliaのインストール

```bash
brew update
brew cask install julia
```

2019/02/01現在では、`v1.1.0`がインストールされました。

## Jupyter Notebookのインストール

`pip`を利用して`jupyter`をインストールしてください。

```bash
pip3 install --upgrade pip
pip3 install jupyter
```

もしくは、`Anaconda`を利用してる場合はインストールの必要がありません。

# 設定作業

JupyterではPython以外にもあらゆる言語の実行環境（カーネル）を利用することができます。
https://github.com/jupyter/jupyter/wiki/Jupyter-kernels

現在の環境で利用できるカーネルを確認するには、以下のコマンドを利用します。

```bash
$ jupyter kernelspec list　
Available kernels:
  python3      /path/to/jupyter/kernels/python3
```

Available kernelsにJuliaが存在しない場合、以下の手順を実行してカーネルを登録します。

```bash
$ julia
               _
   _       _ _(_)_     |  Documentation: https://docs.julialang.org
  (_)     | (_) (_)    |
   _ _   _| |_  __ _   |  Type "?" for help, "]?" for Pkg help.
  | | | | | | |/ _` |  |
  | | |_| | | | (_| |  |  Version 1.1.0 (2019-01-21)
 _/ |\__'_|_|_|\__'_|  |  Official https://julialang.org/ release
|__/                   |

julia> (ここで "]" を押すとプロンプトが　 "(v1.1) pkg>"　に切り替わります)
(v1.1) pkg> add IJulia
   Cloning default registries into `~/.julia`
   Cloning registry from "https://github.com/JuliaRegistries/General.git"
     Added registry `General` to `~/.julia/registries/General`
 Resolving package versions...
。。。(中略)。。。
  Building IJulia ─→ `~/.julia/packages/IJulia/hogehoge/deps/build.log`

(v1.1) pkg> (Ctrl+Cで抜ける）　

julia> exit()
```

Available kernelsにjuliaが存在すれば成功です。

```bash
$ jupyter kernelspec list　
Available kernels:
  julia-1.1    /path/to/jupyter/kernels/julia-1.1
  python3      /path/to/jupyter/kernels/python3
```

## 起動してみる

※jupyter notebookの初回起動時はメッセージが出てくることがあります。

```bash
$ jupyter notebook
```

正常に起動したら、通常利用しているブラウザが立ち上がり、jupyter-notebookの画面が表示されます。 
もしも自動的にジャンプしなかった場合は、以下のようにコンソールに表示されたURLをブラウザでコピペしてください。

```URL
[I HH:MM:SS.ZZZ NotebookApp] http://localhost:8888/?token=xxxxxxxxxxxxxxxxxxxxxx
```

Jupyter Notebook上にて、 `Julia` があることを確認してください。
<img width="242" alt="スクリーンショット 2019-02-02 15.25.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/41491/b02ae80c-e0d2-c67f-24f7-a0c64c69be40.png">

実際にJupyter Notebook上でJulia Kernelが正常に動作すれば成功です。
<img width="517" alt="スクリーンショット 2019-02-02 15.44.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/41491/f16e3235-f5c8-f5bb-e0b7-285825150979.png">
docker exec -it "container id or container name" /bin/bashの-itについて

#概要
dockerのコンテナ内に入る際に何とな-itオプションを使っていたが気になったので調べた！
学んだ事をまとめます。

##-iについて
docker　exec --help　で調べる。

<img width="480" alt="スクリーンショット 2019-02-02 13.12.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/317296/e85faf72-5a04-1690-a0a2-3dbcebfa3a82.png">

「STDINがアタッチされていないときでもSTDINをオープンにし続けるよ!」って事
STDINが分からないのでググってみた

wikipediaによると

<img width="636" alt="スクリーンショット 2019-02-02 13.17.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/317296/229fc09c-00dc-309a-2592-bd31a7afde61.png">
「コンピュータプログラミングでは、標準ストリームは、実行開始時にコンピュータプログラムとその環境との間に事前に接続された入出力通信チャネルです。 3つの入出力（I / O）接続は、標準入力（stdin）、標準出力（stdout）、および標準エラー（stderr）と呼ばれます。」
つまりSTDINは"Standard input(標準入力)"の略である。　

よって-iオプションをdocker exec "container id or container name" /bin/bashに加える事によって指定したコンテナ内で、標準入力を受け付けられるとゆうことか
###docker exec -t "container id or container name" /bin/basを試してみる
試しに-iオプションなし、つまりdocker exec -t "container id or container name" /bin/bashでコンテナの中に入り色々なコマンドを試してみた。
<img width="517" alt="スクリーンショット 2019-02-02 15.03.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/317296/79faab3f-892f-c723-dd7b-8b1ec3884f31.png">


結果、入力に対するレスポンスが何も得られなっかた。
よって-iオプションはコンテナ内で標準入力を受け付けられるようにするオプションであるとわかった。

##-tについて
docker exec --helpで調べる
<img width="439" alt="スクリーンショット 2019-02-02 14.20.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/317296/4e1e3573-221d-3d7a-8334-e456c139d23c.png">

「pseudo-TTYを割り当てるよ。」
pseudo-TTYが分からないのでググってみた。
以下のサイトがわかりやすかった
https://unix.stackexchange.com/questions/21147/what-are-pseudo-terminals-pty-tty
上記サイトによるとpseudo-TTYは「ターミナルのような機能をもつデバイス」とゆう意味らしい
つまり-tオプションは「ターミナルのような機能をもつデバイスを割り当てるよ！」って事
###docker exec -i "container id or container name" /bin/bashを試してみる
試しに-tオプションなし、つまりdocker exec -i "container id or container name" /bin/bashでコンテナの中に入り色々コマンド試してみた
<img width="488" alt="スクリーンショット 2019-02-02 14.46.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/317296/99e5a8a9-6bf2-6aa2-0187-786970531c5a.png">

結果は上記のように標準入力に対するレスポンスは帰ってくるが,docker exec -it "container id or container name" /bin/bashと入力すれば表示されるはずの"root@コンテナ ID:/フォルダ名#"が表示されなくなった。
なのでコードがかなり読みづらかった。

#終わりに
最初は　-it の意味が全く分からなかったが、今回の調査でこんなに重要な機能を提供してくれるのか！と感動した。
これからはオプションが出てきた際には曖昧にせずちゃんと調べようと思った。

この記事が誰かの参考になってくれれば幸いです。

何か間違った記述があった場合、指摘していただけたら嬉しいです。🙇‍♂️
atcoder ABC94

c問題、D問題共に解けたhttps://atcoder.jp/contests/abc094/tasks
#C問題
#方針
はじめは、与えられて数列をlistなどにコピーし、i番目の要素を削除しソートして、(l+1)/2番目の要素を取り出そうとしたが、ソートの計算量がnlognのため、要素すべてについて一つ一つ要素を決してソートしてをすると計算量が(配列の長さ*ソート)=(n*nlogn)となってしまい間に合わない。ここで、中央値についてよく考えると、中央値は2通りくらいにしか動かないことがわかる。これは、中央値より大きい値が削除された時は中央値が一個小さい要素に代わるということ以外に中央値は動かないからである。よって削除される値と元々の中央値を比較することで中央値がそのままか動くのか判断すれば定数で中央値を求められるので、結局計算量はO(N)で答えを求められる。

#D問題
#方針
comb(l,r)と考えると、combの性質から明らかに、lが大きい方がcomb(l,r)は大きくなるのがわかる。また、rはl/2に近い方がcomb(l.r)が大きくなるのがわかる。よって、a[i]の中から最大の値をlとし、二分探索で、l/2に近い値を見つけ、rとすれば良い。
[Flutter] Mac Flutter doctorのメモ



忘れると困るからメモ :)



```terminal

[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ! CocoaPods out of date (1.5.0 is recommended).
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin
        usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To upgrade:
        brew upgrade cocoapods
        pod setup

```


![Screen Shot 2019-02-02 at 3.08.05 PM.png](https://qiita-image-store.s3.amazonaws.com/0/137182/3a26144c-d5e6-16f6-7449-03bdabd8398f.png)
atcoder ABC95

c問題は解けたが、D問題は解けなかった。
https://atcoder.jp/contests/abc095/tasks
#C問題
#方針
これはよく考えると以下の購入の仕方が3通りしかないことに気づく
(1) ABピザのみ買う
(2) ABピザを買わずにAピザ,Bピザを買う
(3)ABピザとAピザ、Bピザを買う方法
これらの中で最小の値が答えになる。なお(3)の時は、(x,yのうち小さい方の数*2)枚分のABピザを買い、そのあとx,yのうち多い方から残った枚数分の金額を足せば会計額が出せる。

#D問題
#方針
まず問題条件から全探索は一個の変数にしかできないことがわかる。高橋くんが歩く範囲をイメージすると以下のように左端と右端が決まる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263740/e7a99292-f869-b04b-0b5e-51737cfffdf5.png)

よって左端と右端を全探索すれば答えが求まりそうだが、そうすると計算量が制限時間を超えてしまう。なので、もう少し考えてみると、もし、左側を固定した時、右端の最適位置は一意に決まっていることがわかる。なぜなら、この最適位置は、寿司のvとxによってのみ決まるからである。よって、反時計回りに寿司のvについて累積和をとっておき、反時計回りに各寿司iについて、(寿司iの地点での累積和-x<sub>i</sub/>)を更新していくことで、左端を固定した時の右端の位置を定数で求めることができる。よって、この左端と右端について左から右に行った時と右から行った時の両方を求めよりスコアが大きい方について採用し答えを更新していく。これを時計回りにもすることで最終的な答えが求まる。
[ React ] 使いまわせる画像のリサイズ

画像を保存するサービスなどでは画像を事前に整えてから保存しないと諸々不備などが出てきてしまいます。
今回はinputからのeventを入力するだけで使えるコンポーネント(というか関数)を作成しました。
色々使うと思うのでメモ。

##ライブラリのインストール
画像のresizeがしやすくする為、[blueimp/JavaScript-Load-Image](https://github.com/blueimp/JavaScript-Load-Image)を使います

```
npm i -S blueimp-load-image
```

##resizeImageコンポーネントの作成
コンポーネントを作成します。

inputから得られるeventを入力するだけ、promiseで画像のURIとリサイズされた画像のblobファイルがリターンされます。
第２引数の`maxWidth`はお好みで。

```js:resizeImage.js
import loadImage from 'blueimp-load-image';

const toBlob = (base64, reject) => {
  const bin = atob(base64.replace(/^.*,/, ''));
  const buffer = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i += 1) {
    buffer[i] = bin.charCodeAt(i);
  }
  // Blobを作成
  try {
    const blob = new Blob([buffer.buffer], {
      type: 'image/jpg',
    });
    return blob;
  } catch (e) {
    reject();
    return false;
  }
}

export const resizeImage = (event, maxWidth = 1024) => {
  return new Promise((resolve, reject) => {
    const file = event.target.files[0];
    loadImage.parseMetaData(file, (data) => {
      const options = {
        maxWidth,
        canvas: true,
      };
      if (data.exif) {
        options.orientation = data.exif.get('Orientation');
      }
      loadImage(file, (canvas) => {
        const imageUri = canvas.toDataURL('image/jpg');
        const imageFile = toBlob(imageUri, reject);
        resolve({
          imageFile,
          imageUri,
        });
      }, options);
    });
  });
};
```

##呼び出し

```js:App.js
import React, { Component } from 'react';
import { resizeImage } from './resizeImage';

class App extends Component {
  state = {
    imageUri: null,
    imageFile: null,
  }

  async imageChangeHandler(e) {
    const { imageFile, imageUri } = await resizeImage(e);
    this.setState({
      imageFile,
      imageUri,
    });
  }

  render() {
    const { imageUri } = this.state;
    return (
      <div className="App">
        <div>
          <input
            type="file"
            onChange={e => this.imageChangeHandler(e)}
          />
        </div>
        {
          imageUri &&
            <img src={imageUri} alt="resizedImage" />
        }
      </div>
    );
  }
}

export default App;

```
##..

画像のサイズ圧縮もここに組み込んでブラッシュアップさせたいところ...
MongoDBによる多言語間非同期通信

#目的

 オンライン学習システムを開発時、システム各部分を違う言語で開発し、
    データ交信の手段としてMongoDBが有効です。

#MongoDBの導入

   下記[記事](https://garafu.blogspot.com/2016/12/install-mongodb.html)をご参照ください。
    個人的にはMongoDB Compass よりRobo 3T　が使いやすいと感じています。

 
#MongoDBの設計

   本例では下記のようにDBを作成する。
    cmdに入るデータはjavaとか他言語により書き込まれる動作指示です。
    responseには他言語への学習結果報告です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/326390/360e04c8-a191-cbda-3f41-a192b12bad74.png)


#学習本体


```python:train.py

from pymongo import MongoClient
import sys
import time
break_flag = False
end_flag = False

client = MongoClient('localhost', 27017)
db = client.j_p

def train(epoch):
    global break_flag,end_flag
    for e in range(epoch):
        #通常train
        print("in train")
        #Train結果を上のレーヤへ送信
        resp = db.cmd_respons.find_one ({"_id":"5c4be3e86b95412bca9230a6"})
        old_resp = resp["response"]
        new_resp = 890 #疑似結果
        db.cmd_respons.update_one({'response': old_resp},
                        {'$set': {'response': new_resp}})
        if (break_flag == True):
            print("break in train.py ")
            #sys.stdout.flush()           
            break
    end_flag = True
    print("exit in train.py")
    time.sleep(2)
```
#学習制御

```python:control.py
from pymongo import MongoClient
import train
import threading
import time
client = MongoClient('localhost', 27017)
db = client.j_p
epoch = 100000
def control():
    cmd = db.cmd_respons.find_one({"_id":"5c4be3c56b95412bca923099"})
    if(cmd["cmd"] == "start"):
        #Trainを起動する
        thread = threading.Thread(target=train.train, args=(epoch,))
        thread.daemon = True
        thread.start()
    while True:
        #上のレーヤと交信
        cmd = db.cmd_respons.find_one({"_id":"5c4be3c56b95412bca923099"})
        if(cmd["cmd"] == "stop"):
            train.break_flag = True
            print("break by stop command")
            time.sleep(2)
            break
        if train.end_flag == True:
            break
    
    time.sleep(2)
    print("exit in control.py")

    
if __name__ == '__main__':
    control()

```
Google翻訳APIをpythonスクリプトで叩いて英語を日本語に翻訳する。

Google翻訳APIをpythonスクリプトで叩いて英語を日本語に翻訳する。

# script

```py
import requests
import os

data = {
  'q': 'The Grate Great Pyramid of Giza (also known as the Pyramid of Khufu or the Pyramid of Cheops) is the oldest and largest of the three pyramids in the Giza pyramid complex.',
  'source': 'en',
  'target': 'ja',
  'format': 'text'
}

url = 'https://translation.googleapis.com/language/translate/v2'
token = os.environ['TOKEN']

headers = {
 'Authorization': 'Bearer {}'.format(token),
 'Content-Type': 'application/json',
}

res = requests.post(url, headers=headers, json=data)

print(res.json())
```

# 実行例

```
TOKEN=xxxxxxxxxxxxx python example.py
```

# 結果

```
{'data': {'translations': [{'translatedText': 'ギザのグレート大ピラミッド（クフのピラミッドまたはチープのピラミッドとしても知られています）は、ギザピラミッド複合体の3つのピラミッドの中で最も古く、最も大きいピラミッドです。'}]}}
```

# Ref

[Google Cloud の認証トークンを gcloud コマンドで取得する。環境変数でサービスアカウントファイルを指定する例。 · Issue #545 · YumaInaura/YumaInaura](https://github.com/YumaInaura/YumaInaura/issues/545)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
C言語　PATHの通し方

#まず色々揃える
[PATHの通し方](https://koji.noshita.net/page/compbio/env/envclangwin/)
[VSCをつかってC言語](https://qiita.com/N_Matsukiyo/items/464594d1fd3e6ef576a4)
[Cのコンパイラ導入する](https://web-camp.io/magazine/archives/5158)
１　エディタはVisualStudioCodeがインストールされていた。
２　コンパイラを準備した。(MinGWのインストール)
３　PATHの設定を行った。
PATH…環境変数。gccを使用するときの絶対パスは、「C:\MinGW\bin\gcc.exe」となる。
毎回打つのは大変なので「gcc.exe」とシンプルに実行する。 cd(ファイルの場所)で移動。
```gcc -o program Helloworld.c
```
でコンパイル。
```./program
```
で実行。
Docker for Mac 2.0.0.2 で docker-sync が動作しない


## 概要

タイトルの通りですが、該当バージョンだと `sync_strategy` が `native_osx` でも `unison` でも `rsync` でも、ホスト側・コンテナ側の変更が反映されませんでした。

## 環境

```
$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.2
BuildVersion:   18C54
```

## 解決策

ひとまず、Docker Community Edition 18.06.1-ce-mac73 2018-08-29 に戻したら `native_osx` で動作しました。

* [Docker for Mac Stable release notes \| Docker Documentation](https://docs.docker.com/docker-for-mac/release-notes/)

## 経緯


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">docker-syncのnative_osx, unison, rsyncのどのモードでもhostの変更がcontainerに反映されないな… あと一歩だと思うんだけど今日はギブアップ。</p>&mdash; Norimitsu Yamashita (@nori3tsu) <a href="https://twitter.com/nori3tsu/status/1091350376702328832?ref_src=twsrc%5Etfw">2019年2月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">docker-syncが同期できない件, 公式のboilerplateでも動作しないので、設定以外の箇所に問題がありそう…<a href="https://t.co/bsLcHIkAoF">https://t.co/bsLcHIkAoF</a></p>&mdash; Norimitsu Yamashita (@nori3tsu) <a href="https://twitter.com/nori3tsu/status/1091563629231562752?ref_src=twsrc%5Etfw">2019年2月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ローカルのDocker for Macのバージョンが2.0.0.2。メジャーバージョン上がってるので怪しい….  バージョン戻してみる。<a href="https://t.co/gGx7Uuj73h">https://t.co/gGx7Uuj73h</a></p>&mdash; Norimitsu Yamashita (@nori3tsu) <a href="https://twitter.com/nori3tsu/status/1091564638758555650?ref_src=twsrc%5Etfw">2019年2月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">メジャーバージョンが変わる直前のStable版である Docker Community Edition 18.06.1-ce-mac74 2018-08-29 に変えたらnative_osxで普通に動作した…. 致命的だと思うんだけど、ざっと見た限りIssueに当たらなかったな。<br>StableではなくEdgeだと直っているのかも？</p>&mdash; Norimitsu Yamashita (@nori3tsu) <a href="https://twitter.com/nori3tsu/status/1091569873677737984?ref_src=twsrc%5Etfw">2019年2月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Nuxt.js + Docker + docker-sync を組み合わせたら爆速化した！！起動も1/3, ホットリローディングに関しては1/4くらいになった！！これでやっとまともに開発できる〜</p>&mdash; Norimitsu Yamashita (@nori3tsu) <a href="https://twitter.com/nori3tsu/status/1091570244278050817?ref_src=twsrc%5Etfw">2019年2月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Google翻訳APIをシェルスクリプトで叩いて英語を日本語に翻訳する。ほとんど公式チュートリアルのまま。

Google翻訳APIをシェルスクリプトで叩いて英語を日本語に翻訳する。ほとんど公式チュートリアルのまま。

# Google Translate API を有効化しておく

チュートリアルのとおりに。

https://cloud.google.com/translate/docs/quickstart

# トークンの取得

[Google Cloud の認証トークンを gcloud コマンドで取得する。環境変数でサービスアカウントファイルを指定する例。 · Issue #545 · YumaInaura/YumaInaura](https://github.com/YumaInaura/YumaInaura/issues/545)

# Script

```
key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

curl "https://translation.googleapis.com/language/translate/v2" \
  -H "Authorization: Bearer $key" \
  -s -X POST -H "Content-Type: application/json" \
  --data "{ 'q': 'The Great Pyramid of Giza (also known as the Pyramid of Khufu or the Pyramid of Cheops) is the oldest and largest of the three pyramids in the Giza pyramid complex.', 'source': 'en', 'target': 'ja', 'format': 'text' }"
```

# 結果

```
$ sh example.sh
```

```
{
  "data": {
    "translations": [
      {
        "translatedText": "ギザの大ピラミッド（クフのピラミッドまたはチープのピラミッドとしても知られています）は、ギザピラミッド複合体の3つのピラミッドの中で最も古く、最も大きいピラミッドです。"
      }
    ]
  }
}
```

# Ref

[Cloud Translation API ドキュメント  |  Cloud Translation API  |  Google Cloud](https://cloud.google.com/translate/docs/)

[クイックスタート  |  Cloud Translation API  |  Google Cloud](https://cloud.google.com/translate/docs/quickstart)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
(JSX) メソッド内でthisを正しく参照する



`React.Component`のメソッドを使う際に`this`が正しく参照できないことがあった。その原因と対処法を記す。動かせるコードは[こちら](https://codepen.io/shimaokasonse/pen/daWOZM?editors=1010)。

## 問題
`Click Me!`という文字列をクリックした時に`Thanks`と文字列が切り替わるようなコンポーネントを実装したい。
![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/101644/21cad36b-0a34-fb7d-f70a-501b3ee90037.gif)

ここで次のようなコードにすると、クリックしても文字が切り替わらない。

```jsx
class Clickable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: "Click Me!"};
  };
  render () {
     return <h1 onClick={this.handleClick}>{ this.state.msg }</h1>;
  };
  handleClick () { this.setState({ msg: "Thanks!"}); };
}

ReactDOM.render(
  <Clickable/>,
  document.getElementById('mount')
);
```
原因はメソッド`handleClick`を定義した時に、`this`のスコープがメソッド内のものに置き換わってしまい、クラス内のスコープの`this`を参照することが出来ないためだ。

正しく動作させるための対処法を以下に書いていく。

## 対処法①：コンストラクタで束縛する
最初の対処法はクラスのコンストラクタ内でクラスのスコープでの`this`をメソッドに束縛させる方法だ。

```jsx
class Clickable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: "Click Me!"};
    // 対処法①　 コンストラクタ内でhandleClickを束縛する
    this.handleClick = this.handleClick.bind(this);
  };
  ...
}
```
この方法はうまくいくが、束縛はコンストラクタ内で行う必要があるため、コンストラクタを省略することが出来なくなるという欠点がある。

## 対処法②：クロージャを使う 
２番目の対処法はメソッド呼び出しの時にクロージャを使うことだ。`render`が実行された時、クロージャによってクラスの`this`が束縛されるので、メソッド内で正しく参照を行うことが出来るようになる。

```jsx
 render () {
     return <h1 onClick={() => this.handleClick()}>{ this.state.msg }</h1>;
  };
```
この書き方ではコンストラクタ内で束縛する必要がなくなるため、コンストラクタが不必要な場合は省略することが出来る。

## 対処方③：アロー関数を使う
最後の対処法はメソッド`handlwClick`の定義にアロー関数表記を使うことだ。アロー関数は変数のリスコープを行わないので、元々の`this`をメソッド内部でそのまま参照することが出来る。JavaScriptでは関数は第1級のオブジェクトであるため、アロー関数をクラスのメンバ変数として登録している形となっている。

```jsx
handleClick = () =>  { this.setState({ msg: "Thanks!"}); };
```
この書き方でもコンストラクタ内で束縛を行う必要はないので、コードが短くなる。

## まとめ
メソッド内でクラスの`this`を参照する方法を3つ紹介した。
どうもJSのスコープは奥が深いというかクセがある。。
Python で FizzBuzz ／ Sequence を作る

@sdkei さんの「[Kotlin で FizzBuzz ／ Sequence を使う](https://qiita.com/sdkei/items/c0cfe74c46fbf3f4a0fd)」を真似できるかな？ という出来心で・・・

```kotlin:Kotlin版
fun main() {
    (1..100)
        .map {
            when {
                it % (3 * 5) == 0 -> "FizzBuzz"
                it % 3 == 0 -> "Fizz"
                it % 5 == 0 -> "Buzz"
                else -> it.toString()
            }
        }
        .forEach {
            println(it)
        }
}
```

```py:Python版
def main(): (
    seq(1, 100)
        .map (
            lambda it: (
                it % (3 * 5) == 0 and "FizzBuzz" or
                it % 3 == 0 and "Fizz" or
                it % 5 == 0 and "Buzz" or
                it
            )
        )
        .forEach (
            print
        )
)

class Sequence:

    def __init__(self, iterable):
        self.iterable = iterable

    def __iter__(self):
        return iter(self.iterable)

    def map(self, func):
        return Sequence(map(func, self.iterable))

    def forEach(self, func):
        for item in self.iterable:
            func(item)


def seq(start, stop=None, step=None):
    if stop is None:
        return Sequence(range(start))
    if step is None:
        step = 1
    return Sequence(range(start, stop + (-1, 1)[start <= stop], step))


if __name__ == '__main__':
    main()
```