OmniAICreator/Qiita-1.07M huggingface dataset:
コマンドプロンプトのpath あってる？

Microsoft Windows [Version 10.0.17134.472]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\福本英一>path
PATH=C:\Program Files (x86)\Common Files\Oracle\Java\javapath;"C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Users\福本英一\Documents\マインクラフト\改造\jdk-11.0.1_windows-x64_bin\jdk-11.0.1\bin;";c:\pg\php;"C:\Perl\site\bin;C:\Perl\bin;C:\WINDOWS\sys.";"C:\福本英一\ドキュメント\Java\java\jdk-11.0.1_windows-x64_bin;\bin;C:\Users\福本英一\AppData\Local\Microsoft\WindowsApps;";"C:\Users\福本英一\AppData\Local\GitHubDesktop\bin;";"C:\Users\福本英一\AppData\Local\Microsoft\WindowsApps;";"C:\福本英一\ドキュメント\java\java\jdk-11.0.1_windows-x64_bin;";"C:\福本英一\ドキュメント\java\java\jdk-11.0.1_windows-x64_bin;\AppData\Local\Android\android-sd\tools";

C:\Users\福本英一>
ARMポインタ認証まとめ

文章にする時間がないので箇条書きで。

# まとめ

- ARMv8.3-Aの拡張仕様の1つ
- 目的は攻撃者によるポインタ書き換えの検出
    - たぶんソフトウェアでも実装できるが、より安全で高速だと思われる
        - 性能評価結果はないのでどの程度性能が良いのかは不明
- 攻撃者には生成できない認証コードをポインタに埋め込む
    - Aarch64だと仮想アドレスの一部は使われていないのでそこを利用する
        - この[プレゼン資料(pdf)](https://events.static.linuxfound.org/sites/events/files/slides/slides_23.pdf)にアドレスのレイアウトの図がある
    - 認証コードが埋め込まれたポインタは不正な仮想アドレスになる
    - ポインタ利用時には認証コードを検証し認証コードを削る
    - 認証に失敗したときはポインタ内の認証コード部分を壊すので、実際にポインタを利用しようとすると不正なアドレスとなり例外が発生しプログラムの実行が止まる
- 認証コードの生成にはポインタ自体、秘密鍵、もう一つの何か(例：スタックポインタ)を用いる
    - 秘密鍵はシステムレジスタに保持され攻撃者はアクセスできない
        - 後述の新規命令でのみ利用できる
    - 5種類の鍵が存在するが違いはあまり理解していない(Linuxは1つしか使っていない)
    - 認証コードを生成するアルゴリズムはQARMA
- 専用命令
    - ポインタに認証コードを付加するpac*命令, 認証コードを検証してポインタを元に戻すaut*命令がある
    - CPUに機能がない場合だとNOP扱いになる命令(例：paciasp)と、通常の命令(例：pacia)が存在する
    - 最初は前者のみサポート
    - 実際の使われ方はこの[プレゼン資料(pdf)](https://events.static.linuxfound.org/sites/events/files/slides/slides_23.pdf)を参照
- Linux 5.0でカーネル側のサポート機能が入る
    - exec時に秘密鍵を設定したり、コンテキストスイッチ時に鍵を切り替えたりする
    - 5.0ではポインタ認証が使えるのはユーザプロセスのみでカーネルでは使えない
- コンパイラのオプションで上記命令を埋め込むことでポインタ認証をプログラムで利用する
    - GCCだと-msign-return-address
    - 引数は不明だがLLVMも[対応ずみ](https://reviews.llvm.org/D36517)らしい


# 参考資料

- [ARM pointer authentication \[LWN\.net\]](https://lwn.net/Articles/718888/)
- [arm64: docs: document pointer authentication](https://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git/commit/?id=fbedc599e9b891a6756b1c9bc2eead02b02cce77)
- [6.5.4. Hint instructions](http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.den0024a/ch06s05s04.html)
- [16.24 AUTIA, AUTIZA, AUTIA1716, AUTIASP, AUTIAZ](http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dui0801g/vco1476202745841.html)
- [ARMv8\.3 Pointer Authentication](https://events.static.linuxfound.org/sites/events/files/slides/slides_23.pdf) (pdf)
- [Pointer Authentication on ARMv8\.3: Design and Analysis of the New Software Security Instructions](https://www.qualcomm.com/media/documents/files/whitepaper-pointer-authentication-on-armv8-3.pdf) (pdf)
- [\[AArch64\] Enable ARMv8\.3\-A pointer authentication](https://reviews.llvm.org/D36517)
- [The QARMA Block Cipher Family](https://eprint.iacr.org/2016/444.pdf)
ipywidgets で気楽に条件をいろいろ変えてプロット （インタラクティブなプロット）

パラメタの値などをいろいろ変えたらグラフがどう変わるか見たくなりませんか？パラメタがひとつで取る値が10個というなら、全部プロットできますが、パラメタが２つで100パターン。パラメタが10x10x10で1000パターンとなると静止した図に書き出すのは難しそうです。

ipywidgets を使うとすごく簡単にできます。

```bash
$ pip3 install ipywidgets
```

(Python3 で pip が pip3 という名前の場合。）

Jupyter notebook + matplotlib で、

```python
%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
from ipywidgets import interact, FloatSlider

x = np.linspace(0, 10, 1000)

@interact(k=(1, 10))
def plot_sin(k):
    plt.plot(x, np.sin(k*x))
```

と書くと $ \sin kx $ の $k$ の値をスライドバーで変更できます。

<img width="389" alt="screenshot1.png" src="https://qiita-image-store.s3.amazonaws.com/0/63210/7e57e267-b9a2-eca0-a4fa-97b524171bd0.png">

二つの値は min, max. 三つ与えると min, max, step になります。

```python
@interact(k=(1.0, 10.0, 0.5))
```

パラメタが複数あってもこの通り。

```python
@interact(k1=(1, 10), k2=(1, 10))
def plot_sin2(k1, k2):
    plt.plot(x, np.sin(k1*x) + np.sin(k2*x))
```

<img width="375" alt="screenshot2.png" src="https://qiita-image-store.s3.amazonaws.com/0/63210/5e505fe5-1651-aee8-d49c-06bde2e2cd0f.png">

## 初期値
初期値は真ん中になるようで、これを指定したいなら、

```python
@interact(k=FloatSlider(min=0.5, max=5.0, step=0.05, value=1.0))
def plot_sin(k):
    plt.plot(x, np.sin(k*x))
```

でしょうか。

## continious update
スライドするだけで再描画されては重くてかなわんという場合は `continuous_update=False` を指定するとスライドバーを移動し終わった後に描画されます。

```python
@interact(k=FloatSlider(min=0.5, max=5.0, continuous_update=False))
def plot_sin(k):
    plt.plot(x, np.sin(k*x))
```

## SelectionSlider

等間隔ではなく、不規則な値から選択する場合は。

```python
from ipywidgets import SelectionSlider

@interact(k=SelectionSlider(options=[1.0, 1.1, 2.0], description='k'))
def plot_sin(k):
    plt.plot(x, np.sin(k*x))
```

ドロップダウンメニューにすることもできます。

## 参考

先人
https://qiita.com/driller/items/0730325bf5c1cd689979

スライドバー以外にもいろいろあるので、公式ページをみるといろいろ夢が広がります。

https://ipywidgets.readthedocs.io/en/stable/examples/Using%20Interact.html
https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html



あくまでも「簡単に」がテーマなので、毎回図をイチから描き直すなどの無駄があります。滑らかさを求めたり、他の人に気持ちよく使って欲しいなどと作り込むなら Bokeh などを使うのが良いかもしれません。その辺は手軽さとのトレードオフになると思います。
BingMaps用 ライブラリをGithubに公開

##BmapQuery.jsを作り始めました。
目標、BingMapsをサクッと使えるものを目指していく。

##Download（github）
[BmapQuery](https://github.com/yamazakidaisuke/BmapQuery)

#### BingMapsの情報が少ないので使いやすくした
BingMapsの記事・情報が少ないため困られてるフロントエンド界隈の人も多いと思いますので、簡単に使える関数を用意して見ようと思い作り始めました。
上記、Github にて公開してます。

##使用方法はGithubのREADME.mdを読んでください。
READMEは英語で記述してありますが、現段階で作成してある使用方法例は記載してあります。
英語で記述するため、他のライブラリ等を参考にして作成しました。
結構難しい。。

##そもそも何故必要か？
[「以前書いた記事へのリンク」](https://qiita.com/daisu_yamazaki/items/3158ad20cb1290ea6901)
上記の記事でも取り上げたとおりで、
GoogleMapのクレジット登録が必須となり、クレジット登録が必要無いMicrosoft[BingMaps]の出番が増えるかと思っています。


##今はシンプルで機能が少ないけど、使いやすいライブラリに育てる
現段階では空いてる時間で思ったまま作った状態です。
今後、みんなが簡単に使えるようになるライブラリになるよう育てていければと思いますので、協力していただける人がいればアップデート~~（関数ですがオブジェクトにしていただいても・・、などなど）~~していただけると嬉しいですね。
全然違う名前のライブラリを作ってもいいと思うんですよね。
きっといろんなものが出てきて、淘汰されて良いものができてくると思いますので、その布石としてまずは、このBmapQueryを作成してますので。


##アウトプットファースト
個人的にはOutput or Die の思想で作ってますので、
まずは作って、駄目だったら修正して、更に駄目だったら修正してと、頭で考えすぎずにトライ＆エラーで進めてるので、このBmapQueryもそんな感じです(*^^*)
でも、考えすぎて、動けないよりは何かしら行動していかないといけない。失敗は成功のもと。失敗から学ぶことは多いはずです。思ったらやればいい、できなかったら次に活かせばいい。いつか成功すると信じて！！
HTML&CSS： 空のsectionタグに高さを持たせるとき

単純に終了タグの付け方の問題らしい．

```html:index.html
<!-- ダメな例　-->
<section id="empty"/>

<!-- 良い例 -->
<section id="empty"></section>
```

```css:style.css
section#empty {
    width: 100%;
    height: 50px;
}
```
Unity/iOS で起動 URL を取得する (Unity 2018.3)

# Unity/iOS で起動URL を取得する (Unity 2018.3)

DeepLink (Custom URLScheme) を使いたい的な。

サンプルプロジェクトはこちら。
[https://github.com/Bugfire/Unity_OnOpenURL](https://github.com/Bugfire/Unity_OnOpenURL)
文章読むよりコード読んだ方が早いと思う方はここで終わり。

## Native 部分

AppDelegate　の

```objc
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
```

こちらは使いません。Plugin の仕組みがあります。

`AppDelegateListener　Protocol` の ```onOpenURL``` を実装して、```UnityRegisterAppDelegateListener()``` で登録しましょう。

```objc
@interface OnOpenURLListener : NSObject<AppDelegateListener>
@end

@implementation OnOpenURLListener

- (id)init {
    self = [super init];
    UnityRegisterAppDelegateListener(self);
    return self;
}

- (void)onOpenURL:(NSNotification *)notification {
    NSURL *url = notification.userInfo[@"url"];
    NSString *openURLString = [url absoluteString];
    UnitySendMessage("Receiver", "OnOpenURL",
                     [openURLString cStringUsingEncoding:NSUTF8StringEncoding]);
}
```

こんな感じです。ついでに getter から取れるようにもします。

```objc
@interface OnOpenURLListener : NSObject<AppDelegateListener>
@property (nonatomic, copy) NSString *openURLString; // 追加
@end

- (void)onOpenURL:(NSNotification *)notification {
    NSURL *url = notification.userInfo[@"url"];
    self.openURLString = [url absoluteString]; // 追加
    UnitySendMessage("Receiver", "OnOpenURL",
                     [self.openURLString cStringUsingEncoding:NSUTF8StringEncoding]); // 変更
}

- (const char*)getOpenURLString {
    if (!self.openURLString) {
        return nil;
    }
    const char *str = [self.openURLString cStringUsingEncoding:NSUTF8StringEncoding];
    return strdup(str);
}

@end

extern "C" const char *OnOpenURLListener_GetOpenURLString()
{
    return [[OnOpenURLListener sharedInstance] getOpenURLString];
}
```

こうして作ったソースファイル(.mm) を Assets に放り込んでおいて、Platform を iOS にしておくだけで、組み込みが完了するので本当に楽ですね。

## C# 部分

呼び出すなら、

```cs
public static class NativeBinding
{
#if UNITY_IOS && !UNITY_EDITOR
    [DllImport("__Internal")]
    public static extern string OnOpenURLListener_GetOpenURLString();
#endif
}
```

受け取るなら、上の例でいうと "Receiver" と名前をつけた GameObject に適当に Component を貼り付ける。

```cs
public sealed class Receiver : MonoBehaviour
{
   public void OnOpenURL(string url)
   {
   }
}
```

呼び出すのも受け取るのも楽でいいですね。

## Player Settings

起動 URL 設定、```Player Settings > Supported URL Schemes``` で対応したい URL Scheme の設定を忘れずに。

## 動作例

github のプロジェクトで、動かした結果です。openurl といういい加減な URLScheme にしています。

OnOpenURL のイベント時に C# 側に URL を送信し、アプリ切り替え時に Native 側に URL を問い合わせています。

![openurlex.jpg](https://qiita-image-store.s3.amazonaws.com/0/180344/5323ef43-6c05-8d56-891f-d4000e115280.jpeg)

 - 1行目: safari で "openurl://open-new" で起動
 - 2~3行目: アプリ切り替えで "Resume"
 - 4~6行目: safari で "openurl://open-exists" でアプリ切り替え

を行った結果です。
ng new でエラー should match format "html-selector"

angularのプロジェクトを作成しようとしたら、エラー

```
$ ng new angular_onsen

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SASS   [ http://sass-lang.com   ]
Schematic input does not validate against the Schema: {"name":"angular_onsen","version":"7.1.4","routing":true,"style":"sass"}
Errors:

  Data path ".name" should match format "html-selector".
```

プロジェクト名にアンダーバーが使えないそうです。

```
$ ng new angular-onsen

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SASS   [ http://sass-lang.com   ]
CREATE angular-onsen/README.md (1029 bytes)
CREATE angular-onsen/angular.json (3922 bytes)
CREATE angular-onsen/package.json (1312 bytes)
CREATE angular-onsen/tsconfig.json (435 bytes)
CREATE angular-onsen/tslint.json (2824 bytes)
CREATE angular-onsen/.editorconfig (246 bytes)
```

作成できました！
VeeValidateを使用したコンポーネントのユニットテストのエラーを解消する

※本記事は VeeValidate v2向けです。v3でのユニットテストのやり方については [公式ドキュメント](https://vee-validate.logaretm.com/v3/advanced/testing.html) を参照してください。

<hr>

VeeValidateを使ったコンポーネントの書き方には、注意が必要なポイントがあります。特に、vue-test-utilsと組み合わせて使っている場合、謎のエラーに悩まされる可能性があります。

## 先に結論

- `mount`/`shallowMount` は `sync: false` にすること
- `flush-promises` 等で、バリデーションの完了を待つこと

## VeeValidate + vue-test-utilsのありがちなエラー

以下のようなコンポーネントがあります。nameフィールドが未入力(null/undefined/空文字列)だと、エラーメッセージが表示されます。

```html
<template>
  <form>
    <label>
      Name: <input name="name" v-model="name" v-validate="'required'" />
    </label>
    <p style="color:red">{{ errors.first('name') }}</p>
  </form>
</template>

<script>
export default {
  name: 'EntryForm',
  data() {
    return {
      name: '',
    }
  }
}
</script>
```

このフォームのバリデーションをテストしてみます。mocha + chai + vue-test-utilsでテストを書くと、こんな感じになると思います。テスト用のVueコンストラクタを`createLocalVue`で作成し、これにVeeValidateをインストールしているところがミソです。

```js
import { expect } from 'chai'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import VeeValidate from 'vee-validate'
import EntryForm from '@/components/EntryForm.vue'

const localVue = createLocalVue()
localVue.use(VeeValidate)

describe('EntryForm', () => {
  it('The name field is required', async () => {
    const wrapper = shallowMount(EntryForm, {
      localVue,
    })
    wrapper.find('[name="name"]').setValue('')
    wrapper.vm.$validator.validateAll()
    expect(wrapper.vm.errors.first('name')).to.equal('The name field is required.')
  })
})
```

このテストを実行してみると、Macだとエラーが大量に表示され、WindowsだとStack Overflow(exit code 3221225725)が発生します。

エラーの原因は、vue-test-utilsがデフォルトでDOMの更新を同期的に適用するのに対して、VeeValidateは非同期なDOMの更新（Vueのデフォルトの動作）を期待しているからです。この辺の事情はvue-test-utilsドキュメントの↓の記事に詳しいです。
https://vue-test-utils.vuejs.org/ja/guides/testing-async-components.html

## テストが動くようにする

上記記事にも言及があるように、vue-test-utilsでDOMの更新を非同期的に適用するようにするには、`shallowMount`の第2引数に `{ sync:false }` を渡します。

```diff
    const wrapper = shallowMount(EntryForm, {
      localVue,
+     sync: false,
    })
```

この状態で再度実行すると、先ほどのエラーは消えますが、テストは依然として失敗します。バリデーションエラーになるはずなのに、エラーにならない、という状態になります。これは、バリデーションの反映が非同期に行われるためです。そこで、`flush-promises`ライブラリ等を使用して、全ての非同期処理が完了するのを待ちます。

```diff
 import { expect } from 'chai'
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import VeeValidate from 'vee-validate'
+import flushPromises from 'flush-promises'
 import EntryForm from '@/components/EntryForm.vue'

 const localVue = createLocalVue()
@@ -15,7 +14,6 @@ describe('EntryForm', () => {
     })
     wrapper.find('[name="name"]').setValue('')
     wrapper.vm.$validator.validateAll()
+    await flushPromises()
     expect(wrapper.vm.errors.first('name')).to.equal('The name field is required.')
   })
 })
```

これで、テストが正常に実行されるようになります。

```
  EntryForm
    ✓ The name field is required (42ms)


  1 passing (45ms)

 MOCHA  Tests completed successfully
```

## まとめ

冒頭の結論を再掲します：

- `mount`/`shallowMount` は `sync: false` にすること
- `flush-promises` 等で、バリデーションの完了を待つこと

flush-promisesはvue-test-utilsで非同期処理のテストを書いていれば頻出のライブラリですが、VeeValidateが`sync:false`でないと動かないのは落とし穴ですね。
microraidenを使うときのnetwork id

# 最初に
筆者はECDSAについて通り一遍を読んだだけで、ソースまで追ってません。これは嘘かもしれません。曖昧です。嘘であることがお分かりの方は、ご一報ください。

# 起こったこと
以下のエラーが出現した。

```python
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/root/.pyenv/versions/pygeth/lib/python3.6/site-packages/microraiden/client/client.py", line 274, in get_suitable_channel
    return self.open_channel(receiver, deposit)
  File "/root/.pyenv/versions/pygeth/lib/python3.6/site-packages/microraiden/client/client.py", line 165, in open_channel
    data
  File "/root/.pyenv/versions/pygeth/lib/python3.6/site-packages/microraiden/utils/contract.py", line 90, in create_signed_contract_transaction
    sign_transaction(tx, private_key, int(contract.web3.version.network))
  File "/root/.pyenv/versions/pygeth/lib/python3.6/site-packages/microraiden/utils/crypto.py", line 116, in sign_transaction
    sig = sign(privkey, keccak256(rlp.encode(tx)), v=35 + 2 * network_id)
  File "/root/.pyenv/versions/pygeth/lib/python3.6/site-packages/microraiden/utils/crypto.py", line 108, in sign
    sig = sig[:-1] + bytes([sig[-1] + v])
ValueError: bytes must be in range(0, 256)
```
エラーは、bytesは 0 ~ 255までしか取れないのに、それ以上になっちゃってるよ！と仰っている。
コードを追うと、sig[-1]は0 ~ 3のいずれかになるらしい。
そしてv=35 + 2 * network_idらしいので、bytes内を確実に255以下にするにはnetwork_idを109以下にしなくてはならない。

# やったこと
とりあえず99にしてやってみよう。
ここは通過したみたいだ。また別のエラーが出現してるけど、とりあえずこれはok。
Android で gRPC通信 をする時に MetaData を使いたい！

gRPC on Androidの正しい新しい記事が少ない為書きました．

AndroidでgRPCを使っていて，MetaDataを使いたくなったら以下のように書くといいです．

keyが`authorization`の`session $sessionId`をMetadataに入れる例を示します．

```kotlin:UserServiceClient.kt

class UserServiceClient{

    private val channel: ManagedChannel = ManagedChannelBuilder
            .forAddress(BuildConfig.SERVER_URL, BuildConfig.PORT.toInt())
            .useTransportSecurity()
            .build()

    private var userStub: UserServiceGrpc.UserServiceBlockingStub = UserServiceGrpc.newBlockingStub(channel)

    suspend fun user(sessionId: String) = coroutineScope {

        Metadata().apply {
            put(Metadata.Key.of("authorization", Metadata.ASCII_STRING_MARSHALLER), "session $sessionId")
        }.let {
            //  この，stubに代入してあげるのを忘れると積むので気をつけること！！
            userStub = MetadataUtils.attachHeaders(userStub, it)
        }

        val createRequest = Users.GetCurrentUserRequest.newBuilder()
                .build()

        userStub.getCurrentUser(createRequest)
    }
}
```


協力： @gedorinku　ありがとうございます！！
Vue.jsのプロジェクトをfirebaseでシンプルにデプロイする


# 手順
①[npmをインストール](https://qiita.com/Alex_mht_code/items/422f5ce10d9c9d5729b7)
②今回のプロジェクト作成用のディレクトリを作成する（mkdir ディレクトリ名)
③②で作成したディレクトリにVue.jsをインストールする
https://qiita.com/567000/items/dde495d6a8ad1c25fa43
④firebaseでデプロイする

###### 説明していきます！　①②③は各自お願いします、、、

④firebaseでデプロイする
-②で作成したディレクトリでfirebaseを操作するためのコマンドを使えるようにします

```
npm install -g firebase-tools
```

-firebaseにログインします。*googleアカウントが必要です

```
firebase login
```

-②で作成したディレクト内をfirebaseと繋げます

```
firebase init
```

-以下の選択肢から、Hostingをチョイスする
<img width="557" alt="スクリーンショット 2018-12-04 0.14.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/243062/9eb01275-c441-0607-4175-7537a08ee58d.png">

＊選択するときに、半角スペースを押して、選択した項目を緑に発火させてから、エンターを押してください

-このディレクトリをfisebase内でのプロジェクトとして登録します。
今回は、create a new projectを選択

```
What do you want to use as your public directory? dist
```
と聞かれるので、 distを入力。

あとで行う　npm run buildでビルドされたファイルは、dist配下に保存されるためです。
＊そのままエンター押すとpublicになってしまい、ビルドしても何も画面に映りません（あとで変更できますが、、、）

```
Configure as a single-page app (rewrite all urls to /index.html)?  No
```
と聞かれるので、Noを選択します。　

```
Select a default Firebase project for this directory [create a new project]
```
と聞かれるので、[create a new project]を選択。↓のページに飛ぶように言われます。
![スクリーンショット 2018-12-04 0.44.17.png](https://qiita-image-store.s3.amazonaws.com/0/243062/72f8311d-a92c-39b1-c760-f050a81f5dd5.png)
この画面に行くように言われるので、そのままプロジェクトを追加。（素直に入力していけば大丈夫です。ここでミスっても問題ありません)

-作成したらターミナルに戻って

```
firebase use --add
```
を入力し、先ほど作成したプロジェクトを選択する。

-vue.jsをビルドする

```
npm run build
```
このとき、npm run dev　にするとローカルサーバーが立ちがって、ローカル環境で動作確認ができます。


-デプロイする

```
firebase deploy
```

-生成されたURLを開く
vue.jsのデフォルト画面が映るはずです！
<img width="533" alt="スクリーンショット 2018-12-06 17.57.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/243062/5792fa13-b6d8-69f2-7b59-b4e117272e51.png">
docker for windowsをWSLから呼び出す

# はじめに
これはWSLでdocker-composeを動かす環境を構築するためのメモです。
前回、WSLでLinuxネイティブのDockerを起動させるための記事を書いたが、どうやら現在のWSLではiptablesが完全にサポートされてないそうで、起動することが出来ないそうです。
そのため、再度WSLからdocker-for-windowsのデーモンを呼び出すように設定したのでそのまとめです。

# 環境
- Windows 10 Pro version 1809
- WSL Distribution Ubuntu 18.04.1 LTS (Bionic Beaver)
- Docker version 18.09.0, build 4d60db4
- docker-compose version 1.23.2, build 1110ad01
- Docker for Windows version 2.0.0.0-win81 (29211), build 4271b9e

# インストール手順
## Docker for Windowsのインストール
まずは公式ページを参考にDocker for Windowsをインストールする。
こちらはインストーラを起動するだけなので簡単ですね。
[Get started with Docker for Windows](https://docs.docker.com/docker-for-windows/)

## Docker for Winedowsの設定
次にSettingを開いて一部の設定を行う。

1. daemonを呼び出すためのポートを許可
GeneralのExpose daemon on tcp://localhost:2375 without TLSにチェックを入れる。
<img width="625" alt="無題.png" src="https://qiita-image-store.s3.amazonaws.com/0/161926/6f416e2d-10ef-0320-03e2-9e85c04f19f8.png">

2. imageをpullする際のDNSを設定
NetworkのDNS Server項目のラジオボタンをFixedに変更（IPはそのままで良い）。
<img width="625" alt="無題2.png" src="https://qiita-image-store.s3.amazonaws.com/0/161926/4a767952-b270-4aec-a3c8-47e30d119650.png">

## WSLをインストール
Microsoft StoreでUbuntuと検索しインストールします。
自分はUbuntuをインストールしていますが、2019/01/08現在これでインストールされるディストリビューションはUbuntu 18.04LTSです。
自分は他のディストリビューションでは動作を確認していませんが、Ubuntu 16.04LTSでは動作できそうな記事はいくつかあったと思います。

## Dockerのインストール
こちらも公式ページのUbuntuに導入する手順に従ってインストールします。
試していないので定かではないですが、自分はDocker for Windowsと同じバージョンをインストールしました。
[Get Docker CE for Ubuntu](https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce)

余談ですが、Ubuntuにはもともdocker.ioというパッケージがインストールされていたりしますが、こちらはUbuntuがメンテしているDockerのパッケージらしいです。
現在公式ではdocker-ceをインストールすることを推奨しているそうです。

## Docker for Windowsのdaemonへ接続
WSL上のdockerクライアントからDocker for Windowsのデーモンを呼び出すための設定を行います。
ホーム直下にある.bashrcに定数を追記するため、以下のコマンドを実行します。

```.bashrc
$ echo "export DOCKER_HOST=tcp://localhost:2375" >> ~/.bashrc && source ~/.bashrc
```

## docker-composeをインストール
最後にdocker-composeをインストールします。
こちらも例に習って公式ページを参考に進めたらOKです。
[Install Docker Compose](https://docs.docker.com/compose/install/)


以上でインストール終了です。
お疲れ様でした。

# まとめ
インストール手順をまとめましたが、できれば早くLinuxネイティブのdocker-composeが動いてくれるようになればいいですね。

# 参考
参考にさせていただいた偉大な先人達のリンクです

- [WSLでdockerのインストールからdocker-composeまで動かす](https://qiita.com/tettsu__/items/85c96850d187e4386c24)
- [Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection](https://github.com/docker/for-win/issues/611)
- [Windows Subsystem for LinuxでDockerを動かす](https://qiita.com/unhurried/items/43e9afda62c51f0975f5)
- [Docker for Windowsで快適な環境を得るまでの そこそこ長い闘い](https://qiita.com/YukiMiyatake/items/73c7d6c4f2c9739ebe60)
- [docker-engine、docker-ce、docker.ioの違い](http://kenoha.hatenablog.com/entry/2017/03/31/114418)
Railsで該当モデルの特定オブジェクトの順位を取得する

ふと、悩んだので皆さんのお考えを伺いたく。

Userモデルが存在し

| id       |       名前(name) |    年齢(age)|
|:-----------------|------------------:|:------------------:|
| 1             |              Suzuki |        50        |
| 2           |            Sato |       30       |
| 3             |              Takahashi |        40       |
| 4               |                Motoki |         22         |
| 5             |             Nagano |       18       |

というデータ構造とします。

このとき、例えば、Suzukiさんの、年齢順（降順）の順位を取得したいという時があると思います。
答えは、1位ですね。

では、これを取得する方法は、なんでしょうか？

今回、データ数が、多くても、数千件と考えたとき、下記で十分では？

```
user = User.find_by(name: 'Suzuki')
ranked_ids = User.all.order('age desc').select(:id).map(&:id)
ranking = ranked_ids.index(user.id) + 1
```

と思うのですが、みなさんいかがでしょうか・・・？

・データ数が多くなると、カラムを追加して、バッチ処理で事前計算しておきたい？
・DBによっては、RANK関数が使えるのでそっち使ったほうが早い？

などなど、いろいろ懸念はあるかなと思います。
Jupyter Notebook で時間のかかる処理をしていて、計算が終わったら教えて欲しいとき

Jupyter Notebook で時間のかかる処理をしていて、計算が終わったら教えて欲しいとき、セルの最後に

```python
!osascript -e 'display dialog "終わったよ！"'
```

と書いておくと、無音でダイアログを出してくれて、しかもそのタイミングで画面を見ていなくても気づけるのでオススメ。

<img width="532" alt="スクリーンショット 2019-06-10 15.52.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211162/f5835032-2b34-757f-0c19-949c09cbac6c.png">


もうちょっと凝りたければこんな感じ。

```python
!osascript -e 'display dialog "その炭素原子は不斉です。" with icon stop'
```

<img width="532" alt="スクリーンショット 2019-06-10 14.07.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211162/943ac670-ffbc-5d4b-36ad-925660c47a2d.png">

```python
!osascript -e 'display dialog "その炭素原子は不斉です。" with icon caution'
```

<img width="532" alt="スクリーンショット 2019-06-10 14.08.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211162/41a93fa5-39dc-f7d9-ffe8-568eaa4fb8ce.png">
gitの勘違いしたメモ

そういえばQiitaにアカ作ってから何も書いてなかったので、メモ。

おさーんにもかかわらず、最近になってgitに触れるようになって、
http://koseki.hatenablog.com/entry/2014/04/22/inside-git-1
でちょっと構造を頭に入れたので解ったつもりになってたのですが（＜無茶）
色々わかりにくいなーと思って、
https://qiita.com/kyoyyy/items/161b6905f45bee2efe21
この辺読んだら、割と腑に落ちた……というか、誤解してた所とかあったので軽くまとめ。
というか、上のリンクは良くまとまっててオススメです。

##コミット前の作業状態

例えばgit resetの説明とか見ると
https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe
コミットの流れの延長上にインデックスやワーキングツリーがあって、resetの戻し方が解りやすいよね？って感じに書かれることが多いのですが、
そもそも、未コミットのファイルってgitでどういう保持してるんだっけ？ってなると、ちょっと使うの怖い。（だって事故るってよく言うし）
というか、矢印がポインタ的に前後するイメージで書かれると、ブランチやHEADみたいに参照だったっけ？ってなりますが……

でも、実際は、インデックスはaddでワーキングツリーから作るわけで、最終コミットから一直線に伸びてくようなイメージではない訳です。
じゃあ、内部的にどうなってるのか、って言うと、たぶん、
・ワーキングツリーはただのファイルを変更した状態そのもの（だから、gitは直接管理していない、その差分を都度確認するだけ）
・インデックスは、addした時に
　.git/objects（ディレクトリ）にファイル内容の変更情報
　.git/index（ファイル）に追加した（コミット予定の）ファイルの情報
　を保持する
なので、例えば、resetでHEADを戻した場合、コミットはHEADから参照されなくなる、のは良いのですが、そのままだと、インデックスにはないことになります。（ワーキングツリーにはそのまま残る。コミットの変更もワーキングツリーには反映されているので）
要するに、reset --softでHEAD「だけ」戻す場合、インデックスに取り消したコミットの変更情報を書き戻すことになる（はずな）訳です。

逆に、reset --hardならHEADを戻して、ワーキングツリーから修正部分を削除、となり、
いわゆる省略時の挙動であるreset --mixedが、HEADの参照だけ戻す、一番シンプルな挙動って事になります。

と、理解がすっきりした……と思ってたのですが、よく考えてみたら……公式に
https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB-%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E8%A9%B3%E8%AA%AC
ちゃんと説明がありますね、よく読め（＞自分）的な。
（でも、あまりググっても引っかからないんですよね……ググりワードのせいか）

##トラッキング、いわゆる追跡ブランチとリモート追跡ブランチ
なんか長くなったけどもう一つ。
最初のリンクでは（たぶん）説明が入ってなくて、すっかり理解から外れてました。

SourceTreeとか使ってると、pullとかした時に、「なんとなく良いあんばいに」作成元のブランチを反映してるようなイメージになっちゃうのですが、実際は追跡ブランチ、の機能で、この追跡元（上流、って言うっぽいですが）から変更を引っ張ってくるみたいです。

で、それなら「リモート追跡ブランチ」は「リモートが上流の追跡ブランチですね」で終わりそうですが……（タダのブランチです、って言うくらいだし）
実は、リモート追跡ブランチは、追跡ブランチの一種かもしれませんが、リモートが上流なだけのタダの追跡ブランチ、ではないです。

追跡ブランチはfetchしても更新はされませんし、pullすればローカル修正とのマージが発生します、が、リモート追跡ブランチはfetchすればその時点で更新されてしまいます。

実際は、（普通の）追跡ブランチは、ローカルで作業しているブランチで、そのためローカルでコミットすれば更新されてしまいますが、リモート追跡ブランチはfetchでリモートのブランチ状態をそのまま持ってくるだけなので、ローカルでコミットできないわけです。
ただ、実体はどちらもブランチ、即ち参照なので、同じと言ってしまえば同じです。

では、なんでふるまいが変わるのか……というと、参照の入ってる場所が
・普通のブランチ……heads
・リモートブランチ……remotes
と分けてあって、これで切り替えてるって事みたいです。
（扱いが違うから、入れる場所が違うんだ、かも知れませんが；
　あと、ここにはスタッシュもありますね）

リモート関連の機能説明は、リモート側の情報を指すのか、ローカルに複製されたリポジトリ内のリモート関係の情報を指すのか、混乱しやすいですね。
（fetch以外では、リモート側の情報を扱うことは少ないと思いますが）
関連の説明を読むのはちょっとしんどかったかも。理解してから読めば楽なんでしょうけどね……

##gitは挙動はシンプルだけど、イメージしやすいとは限らない……かも……
なんかまだ詳細の理解に不安がある感じですが、なんとなく「よく分かってないけど使ってた」部分の理解は進んだかな……と。
（あと、まだマージとか……抜けてるところあるんですけどね）

gitはresetとかもそうですが、仕組みは単純（HEADの巻き戻しって参照の書き換えだけですし）なのですが、イメージ（例えば変更が時系列で進行するような）通りの実装、とは限らないので注意が必要ですね。
と言うか、挙動はエンジニアはイメージできると思いますが、非エンジニアの人に理解させようとすると大変じゃないかな……とは思います。
iTerm の設定を共有する

# iTerm の設定を共有する

github で課金しなくても private repository が作れるようになりましたね。嬉しい。

## 設定ファイルの場所を設定する

設定ファイルを任意の場所に置くオプションがあります。

Preferences > General > Load preferences from a custom folder or URL:
<img width="788" alt="スクリーンショット 2019-01-09 0.11.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/180344/2b53a116-c8f2-ef3f-17a3-76024ffdabf8.png">
設定後は、真下の "Save Current Settings to Folder" ボタンを忘れずに押してファイルに書き出しましょう。

## 共有する

iCloud で共有するなら ~/Documents 以下にディレクトリを掘るなり、git の dotfiles で管理したりお好きなように。

## Oops

BG 画像 (Background Image Location) が、フルパスで保存されていますね...。
Photon Unity Networking 2 にて ReturnCode: 32767 (Invalid application id) と出ることについて

この一文が必要。
どうやらv2になってからappIDを手動で追加する必要がある。
というかv2のほうが不便説

```
PhotonNetwork.NetworkingClient.AppId = PhotonNetwork.PhotonServerSettings.AppSettings.AppIdRealtime;
```
GPUのメモリが足りない時のちょっとした工夫

画像処理でGPUを使ったライブラリを動かしたとき、一度に全部データを渡すと落ちちゃう場合がありました。
こんな場合には入力を分割して処理を回しますが、なるべく他の処理を増やしたくありません。
こういった場合の対処方法をメモします。

入出力numpyの関数`gpu_process(imgs)`を使ってgpu上で画像を処理し、その結果が返されるものとします。

```python
print(imgs.shape) # (NUM_SAMPLE,WIDTH,HEIGHT,3)

outputs = gpu_process(imgs)  # ここで落ちる

print(outputs.shape) # (NUM_SAMPLE,WIDTH,HEIGHT,3)
```

これを下のように`np.array_split()`で分割して渡し、得られたarrayのリストを`np.concatenate()`してnumpyに戻します。

```python
print(imgs.shape) # (NUM_SAMPLE,WIDTH,HEIGHT,3)

NUM_SPLIT = 10 # ←増やすほどGPUの処理を軽く出来る
imgs_list = np.array_split(imgs, NUM_SPLIT)
outputs = np.concatenate(
    [gpu_process(imgs) for imgs in imgs_list],
    axis=0,
)

print(outputs.shape) # (NUM_SAMPLE,WIDTH,HEIGHT,3)
```
[helm] elasticsearchをinstallしたらkubectlが「Unable to connect to the server:」しか返さなくなった

## Pickup
- k8sのログ管理を試してみようと思って軽い気持ちで [helmでelasticsearch](https://github.com/helm/charts/tree/master/incubator/elasticsearch) をapplyした失敗まとめ
- デフォルト設定のまま挑むとkubectlオペレーションの標準出力がすべて↓のエラーになってしまいます
- `Unable to connect to the server: EOF`
- `Unable to connect to the server: net/http: TLS handshake timeout`

## Requirement
- k8s

    ```
    $ kubectl version
    Client Version: version.Info{Major:"1", Minor:"13", GitVersion:"v1.13.1",     GitCommit:"eec55b9ba98609a46fee712359c7b5b365bdd920", GitTreeState:"clean", BuildDate:"2018-12-13T19:44:10Z", GoVersion:"go1.11.2", Compiler:"gc", Platform:"darwin/amd64"}
    Server Version: version.Info{Major:"1", Minor:"10", GitVersion:"v1.10.3", GitCommit:"2bba0127d85d5a46ab4b778548be28623b32d0b0", GitTreeState:"clean", BuildDate:"2018-05-21T09:05:37Z", GoVersion:"go1.9.3", Compiler:"gc", Platform:"linux/amd64"}
    ```
※ namespace移動のために *kubens* をinstallしておくと楽

- helm

    ```
    $ helm version
    Client: &version.Version{SemVer:"v2.12.0", GitCommit:"d325d2a9c179b33af1a024cdb5a4472b6288016a", GitTreeState:"clean"}
    Server: &version.Version{SemVer:"v2.12.0", GitCommit:"d325d2a9c179b33af1a024cdb5a4472b6288016a", GitTreeState:"clean"}
    ```
- docker

    ```
    $ docker -v
    Docker version 18.09.0, build 4d60db4
    ```

- 参考にした[elasticsearch](https://github.com/helm/charts/tree/master/incubator/elasticsearch)


## Document

### ■ 問題の再現方法

1. kubectlを使えるようにインストール

2. kube-systemに移動

    ```
    $ kubens kube-system
    ```
3. gitを参考にhelm installする

    ```
    $ helm repo add incubator http://storage.googleapis.com/kubernetes-charts-incubator
    $ helm install --name my-release incubator/elasticsearch
    ```
4. 問題発生！！

    ```
    $ kubectl get po
    Unable to connect to the server: net/http: TLS handshake timeout

    $ kubectl get nemaspace
    Unable to connect to the server: EOF

    $ kubectl proxy
    Starting to serve on 127.0.0.1:8001
    I0108 23:33:34.280873    1751 log.go:172] http: proxy error: net/http: TLS handshake timeout
    I0108 23:34:08.619748    1751 log.go:172] http: proxy error: net/http: TLS handshake timeout
    I0108 23:34:21.963468    1751 log.go:172] http: proxy error: net/http: TLS handshake timeout
    ```


### ■ 原因

Docker Engineに割り振っているメモリやSwapが不足していたことだった。
参考文献： https://github.com/docker/for-mac/issues/2717


### ■ 解決方法

「Docker Engine > Preferences > Advanced」でメモリとSwapを上げる
※　↓は上げた後
<img width="499" alt="Advanced.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/318649/31bc1463-e1c2-c860-b726-fa92c03d29ab.jpeg">

これで無事解決！！
IDEで標準出力処理を補完するショートカットキー

Javaを使っていると、`sout`とか`sysout`の後で補完キーを押下するとIDEが`System.out.println`に補完してくれるあの機能（コードスニペットというらしい）。

C#の場合は`cw`と入力した後に補完(※)で`Console.WriteLine`になるのだが、知らないとググってもなかなか探しだせなかったので、ここにメモしておく。

※Visual Studio ProだとTabキー**2回**押下で補完しないと出てこない！！
　Visual Studio Codeの場合は`cw`の`w`入力後に候補を提示してくれるのに。。。

Visual Studio C#のコードスニペット一覧は以下を参照。
https://docs.microsoft.com/ja-jp/visualstudio/ide/visual-csharp-code-snippets?view=vs-2017
H8/3664ではじめるマイコン制御0　動作環境紹介

閲覧していただきありがとうございます。この記事はマイコン初心者の私が手作り評価ボードを使ってH8/3664のマイコン制御に挑戦する記事です。
Arduino、RaspberryPiがある世の中であえて基本を学ぶべくH8マイコンを使いました。

#AKI-H8/3664タイニーマイコン
評価ボードの心臓部は、秋月電子通商で販売されている[AKI-H8/3664タイニーマイコン](http://akizukidenshi.com/catalog/g/gK-00159/)を用いています。
![H8Tiny.jpg](https://qiita-image-store.s3.amazonaws.com/0/333756/13f85d15-87f3-027d-cc8e-6730578d6a0b.jpeg)
AKI-H8/3664タイニーマイコンには、ルネサス テクノロジのマイコン「H8/3664F」と、アナログ・デバイセズのRS-232ドライバIC「ADM3202」が搭載されているため、パソコンで作ったプログラムをマイコンのフラッシュROMに書き込んですぐに実行できます。
H8マイコンは1980年代後半に日立が開発した組み込み向けのマイクロプロセッサです。マイクロプロセッサとしては世界的に大きなシェアを有しています。電子工作用や教材用としてもそれまでのZ80などに代わって、中規模のマイコンとして広く使われており、シリーズによっては容易に入手することができます。またレゴのMINDSTORMSにも使われています。
ちなみにこのH8シリーズの後に出たSuperHというシリーズあります。そのシリーズ内のSH-2は家庭用ゲーム機のセガサターン、SH-3は探査機はやぶさ、そしてSH-4がドリームキャストに乗っていました。

　現在販売されている大多数のノートパソコンには、シリアルポートがありません。一般的には下図の「USB－シリアル変換ケーブル」などを用いて、パソコンとマイコンボードを接続します。
![Serial.jpg](https://qiita-image-store.s3.amazonaws.com/0/333756/91bf12cc-b5d0-4153-f3e7-823efee171e9.jpeg)

#H8/3664回路図

![H83664.PNG](https://qiita-image-store.s3.amazonaws.com/0/333756/e16b4b4f-e4d4-4602-9513-4701ef291bb1.png)

H8/3664には29本、汎用入力ポートが8本あります。ポート8は大電流ポートになっておりLoW時に20mA駆動が可能です。

#評価ボード回路図
今回使用している評価ボードの回路図です。表記ミスにより緑ボタンと黒ボタンの位置が実際は逆になっています。
![評価ボード.PNG](https://qiita-image-store.s3.amazonaws.com/0/333756/2e5cbc02-a5b1-8f7c-5cd3-0573b7d8184c.png)

#完成品
![ボード表.jpg](https://qiita-image-store.s3.amazonaws.com/0/333756/18206989-5f57-3f08-8583-80a21fb47876.jpeg)
![ボード裏.jpg](https://qiita-image-store.s3.amazonaws.com/0/333756/8ef0f151-6def-cb94-934c-e3ec5ed5443e.jpeg)

次回[H8/3664ではじめるマイコン制御1](https://qiita.com/kiki0817/items/74f00b83164cf43c7886)
true / 2

JavaScript は様々な面白コードを書ける面白言語ですが、実際に利用している（？）人は初めて見たので。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Probably the weirdest valid code I&#39;ve written in my life <a href="https://t.co/u9HglsdOJx">pic.twitter.com/u9HglsdOJx</a></p>&mdash; Locomalito (@Locomalito) <a href="https://twitter.com/Locomalito/status/1082315388086571010?ref_src=twsrc%5Etfw">2019年1月7日</a></blockquote>

結果は `0.5` です。はい。
しかしこの人はどういうシチュエーションでこの式を書いたのだろうか。そして何かの役に立つのだろうか。いや、立っても書きたくないな…。

## 蛇足

こういった暗黙の型変換による面白コードを見るたびに TypeScript へ意識が向くわけですが、手軽に型変換をチェックしたいのであれば flow でも良いのでは。
例えば次のような `main.js` があるとして、

```javascript
// @flow
let a = true
console.log(a / 2)
```

以下の手順で flow をインストール＆実行すれば、

```shell
> npm i --save-dev flow-bin
> npx flow init
> npx flow
```

こんな感じでチェックしてくれますね。

```
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ main.js:3:13

Cannot perform arithmetic operation because boolean [1] is not a number.

     1│ // @flow
 [1] 2│ let a = true
     3│ console.log(a / 2)
     4│
```

ただ flow だと `a = 1` みたいな異なる型の再代入はチェックしてくれないんですよね。はい。
GitHubで無料プランでもPrivateRepositoryが作れるようになったので使ってみた

タイトル通りです。  
[GitHub](https://github.com/)で、2019年01月07日より無料プランでもPrivate Repositoryが作れるようになりました:raised_hands:
参考：https://blog.github.com/2019-01-07-new-year-new-github/

ということで、改めてユーザー作成からリポジトリの作成、ファイルのコミットまでを一通り行ってみたいと思います。  

## GitHubアカウントの作成

GitHubトップページからユーザー登録を行います。
![screenshot.1.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/4c61029a-e0d4-2002-86f7-3ee234c4692c.jpeg)

パズルを解いて、次へ進みます。
![screenshot.2.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/d22dccf9-f434-8dce-8920-db244192f108.jpeg)

プランを選びます。今回は「Free」を選択します。
![screenshot.3.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/6283b01d-a9f6-b416-14f6-a62834f05799.jpeg)

アンケートに答えて、アカウント作成します。
(答えたくない場合は、右下のskip this stepをクリックします)
![screenshot.4.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/f4b26442-0a6f-f959-fb83-8fe8ce503cad.jpeg)

メール認証を行い、アカウントを有効にします。
![screenshot.6.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/e22ccd43-efde-fb33-e64f-b71c7b6057d3.jpeg)

以上でアカウント作成は完了となります。お疲れさまでした!!


## プライベートリポジトリを作成
早速プライベートリポジトリを作成してみましょう。

「New Repository」をクリックします。
![screenshot.5.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/61d11e82-b88a-45af-8a50-88ea581a0cb0.jpeg)

リポジトリを作成します。無料プランでも「Private」が選択できるようになっていました。
![screenshot.7.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/7fdb83c9-07d6-53d5-435f-04c1c136e349.jpeg)

これでプライベートリポジトリは完成です。
試しにログアウトしてから検索してみましたが、先ほど作成した「FirstRepository」は表示されませんでした。
![screenshot.8.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/a63d5f6d-c47b-8609-4498-3f972a0b3440.jpeg)


ちなみに「Public」で「SecondRepository」を作成したところ、ばっちり検索結果に表示されました。
![screenshot.9.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/d04626e7-a664-dda5-f44d-cfc4e3491154.jpeg)

## Private Repositoryにファイルをプッシュする
最後に、作成したプライベートリポジトリにファイルをプッシュしてみます。
作業環境は以下の通りとなります。  

* Windows10
* コンソールにGitBashを使用
* 作業ディレクトリは「C:\GitTest\FirstRepository」

GitHubでリポジトリ作成後、いくつかの初期作業手順が表示されます。
今回は赤枠内の作業を行います。
青枠内のコピーボタンで、コマンドが一括コピーできます。
![screenshot.1.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/912c8224-683c-b160-92bd-710f115a4a65.jpeg)

GitBashを使用し、作業ディレクトリに移動後、コマンド実行します。
コマンド実行後に認証ダイアログが表示されるため、ユーザー名、パスワードを入力して認証します。
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/ed035e98-2c50-8631-8d28-986aa323167e.jpeg)


認証に成功すると、ファイルがプッシュされます。
![screenshot.3.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/32d478c4-7ed4-dc65-20ac-983a8e69dc62.jpeg)

GitHubへアクセスすると、README.mdファイルがアップされていることが確認できます。
![screenshot.1.jpg](https://qiita-image-store.s3.amazonaws.com/0/137137/3e4aef2c-a10e-8313-b46b-c4ed402a12be.jpeg)

## 以上になります
GitHubで無料プランでもプライベートリポジトリが使えるようになったとのことで、勢いだけで投稿しました。
今までは無料プランだとパブリックリポジトリしか作成できなかったため、使用に抵抗のある方も多かったのではないのでしょうか？
これを機にGitHubを使用してみるのもよいかもしれませんね。
elm0.19 + webpack4 + webpack-dev-server のサンプルをdockerで試したメモ

webpack-serveがあっという間に使われなくなったので、
webpack-dev-serverに戻したバージョンをメモしておく。

[前回の記事](https://qiita.com/hibohiboo/items/b19519b4a9dbb5ec11b0)

```js:webpack.config.js
// 省略
if (MODE === "development") {
    console.log("Building for dev...");
    module.exports = merge(common, {
        plugins: [
            // Suggested for hot-loading
            new webpack.NamedModulesPlugin(),
            // Prevents compilation errors causing the hot loader to lose state
            new webpack.NoEmitOnErrorsPlugin()
        ],
        module: {
            rules: [
                {
                    test: /\.elm$/,
                    exclude: [/elm-stuff/, /node_modules/],
                    use: [
                        { loader: "elm-hot-webpack-loader" },
                        {
                            loader: "elm-webpack-loader",
                            options: {
                                // add Elm's debug overlay to output
                                debug: true,
                                forceWatch: true
                            }
                        }
                    ]
                }
            ]
        },
        devServer: {
            inline: true,
            stats: "errors-only",
            contentBase: path.join(__dirname, "src/assets"),
            historyApiFallback: true,
            // feel free to delete this section if you don't need anything like this
            before(app) {
                // on port 3000
                app.get("/test", function(req, res) {
                    res.json({ result: "OK" });
                });
            }
        },
        watch:true, 
        watchOptions:{
         aggregateTimeout: 300,
          poll:1000
        }
    });
}

// 省略
```

## サンプル

* 以下、elm-webpack-starterで色々試してみたログ

[dockerで動かした時点](https://github.com/hibohiboo/develop/tree/4c8cb84520a9a1c603e93f865fd675eec1de4806/tutorial/lesson/elm/elm-webpack-starter)

[typescript導入時点](https://github.com/hibohiboo/develop/tree/95074655693f9a6885b406e27be3ffc25ec829ca/tutorial/lesson/elm/elm-webpack-starter)

[jquery導入時点](https://github.com/hibohiboo/develop/tree/1f7b849f3e28b77eed97d72ad509ec181ca04286/tutorial/lesson/elm/elm-webpack-starter)
Postメソッドによる画面遷移【Java】

# はじめに
Webアプリの作成について勉強していると、JSP、Servlet、formやPost/Getメソッドなど多くの言葉が出てきます。
一度に多くの言葉が出てきて混乱しやすい所なのではと思います。
そこで、ここではPostメソッドについて、非常に単純なコードを用いて紹介します。

環境はEclipseです。


# Postメソッドとは
Postメソッドは、Webアプリにおけるリクエストの方法の1つです。
よくGetメソッドと一緒に紹介されると思います。
2つの違いは、Webサーバへのパラメータの渡し方にあります。PostメソッドはパラメータをRequest領域に入れて渡すのに対して、GetメソッドはURLに乗せて渡します。

# 画面遷移
start.jspからボタンをクリックするとend.jspに画面遷移するプログラムを作ります。
それぞれのコードは以下の通りです。bodyタグの箇所のみの記載となっています。

```jsp:start.jsp
<body>
start
<form method="post" action="end.jsp">
	<button>click</button>
</form>

</body>
```

```jsp:end.jsp
<body>
end
<a href="start.jsp">back</a>

</body>
```
実行結果は以下のようになります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245072/7a002c56-5c80-1dd0-9a50-7b70e4f76c45.png" width=60%>
ただ画面遷移するだけならば、end.jspのように、aタグで可能です。
しかし、start.jspのように、formタグを使ってmethodにPostを指定することで、パラメータをWebサーバに送ることが可能となります。
例えば、formタグの中にテキストボックスを作り、テキストボックスに文字を入れてボタンをクリックすると、テキストボックスの入力値をWebサーバに送信できます。

# 参考
・JSPサーブレット：Javaサーバーサイド実践Java言語シリーズ　井上 信幸(著)
twitterの認証をpuppeteerなど使わずに頑張ろうとしたけど無理だったメモ

## 概要

これは自分用メモです。
twitterクライアントをnode.jsで作ろうと思い、漢の浪漫を追求してヘッドレスクロムとか使わないで素のnode.jsのapiでそこらへん頑張って自動認証してやるぜ！！って意気込んでいたやつが失敗して頑張った証だけ残したものです。

前後の文脈はカットしてます。

```javascript:素のnode.jsだけで頑張ろうとしたやつ
const { JSDOM } = require("jsdom");

https.get(accessUrl, res => {
  res.setEncoding('utf8');
  let requestCookie = {};
  res.headers["set-cookie"].forEach(cookieString => {
    const cookieArray = cookieString.split("; ");
    const keyValArray = cookieArray[0].split("=");
    const key = keyValArray[0];
    const value = keyValArray[1];
    requestCookie[key] = value;
  });

  res.on('data', body => {
    const { window } = new JSDOM(body);
    const form = window.document.getElementById("oauth_form");
    const formElements = form.elements;
    const action = form.action;

    let requestParameter = {
      "session[username_or_email]": "",
      "session[password]": ""
    };


    Array.prototype.forEach.call(formElements, element => {
      switch (element.name) {
        case "authenticity_token":
          requestParameter["authenticity_token"] = element.value;
        case "redirect_after_login":
          requestParameter["redirect_after_login"] = element.value;
        case "oauth_token":
          requestParameter["oauth_token"] = element.value;
        case "ui_metrics":
          requestParameter["ui_metrics"] = element.value;
        default:
      }
      // resolve(requestParameter);
    })

    const { hostname, pathname  } =  parse(action, true);

    const options = {
      hostname: hostname,
      port: 443,
      path: pathname,
      method: 'POST',
      headers: {
        "Cookie": `_twitter_sess=${requestCookie["_twitter_sess"]}; personalization_id=${requestCookie["personalization_id"]}; guest_id=${requestCookie["guest_id"]}`
      }
    };

    // Set up the request
    const postRequest = https.request(options, res => {
      res.setEncoding('utf8');
      resolve(res);
      res.on('data', chunk => {
        resolve('Response: ' + chunk);
      });
    });

    // post the data
    // resolve(querystring.stringify(requestParameter));
    // resolve(postRequest);
    postRequest.write(querystring.stringify(requestParameter));
    postRequest.end();
  });
});
```

```javascript:server立ててみたやつ
retrun new Promise(async () => {
  const hostName = "127.0.0.1";
  const server = http.createServer(async (request, response) => {
    const { url } = request;
    response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
    response.end('<h1>Successfully Oauthenticated!!</h1><div><div class="js-redirect" data-status="finish"></div></div>');

    const { query } = parse(url, true);
    const { oauth_verifier } = query;

    await server.close(() => {
      console.log('Server closed!');
    });

    await request.connection.end();
    await request.connection.destroy();

    resolve(oauth_verifier);
  });

  server.listen(10401, hostName, () => {
    console.log("Listening on port 10401");
  });
});

```

## 追記

結局puppeteer使ったら余裕すぎて漢の浪漫はどこかにいきました。
Python初心者 Anaconda Navigator / Jupyter notebookでKeras, Tensorflow 実装

Python初心者がAnacondaの環境でkeras, Tesorflowを使えるようにしてみた。
その過程で、下記事象が発生。
・Python 3.7 tensorflow インストールできない
・Python 3.7 keras インストールできない
失敗も含めて備忘として残したいと思う。

**環境**
OS: win 10
Anaconda Navigator version: 1.9.6

**前提**
・2019年1月現在、Python 3.7でkerasとtensorflowを[インストール出来ない](https://pycarnival.com/tensorflow_python37/)。
jupyter notebook上で!pip installした際のエラーメッセージ
```!pip install -U tensorflow==1.6.0```
⇒Could not find a version that satisfies the requirement tensorflow==1.6.0 (from versions: )
No matching distribution found for tensorflow==1.6.0
```!pip install -U keras==2.0.0```
⇒Could not find a version that satisfies the requirement tensorflow (from keras==2.0) (from versions: )
No matching distribution found for tensorflow (from keras==2.0)

・もともとAnacondaで入れていたのは、Python3.7なので、Keras, Tensorflowを入れる為にはPython 3.6にダウングレードする必要があった。
・Anacondaの環境ではbase(root)のみを使っていた（Anaconda NavigatorのEnviromentsで確認できる。Anacondaのデフォルトの環境）

**失敗**
・Python3.7が入っている環境(base(root))で、Anaconda Prompt上でConda install Python = 3.6.6　でPython3.6にダウングレードしたら、keras, tensorflowはインストールできたが、どうやらライブラリのパスがおかしくなったようで、matplot.pyplotやpandasのライブラリをインポートしようとすると、インポートエラーになる

**対処とインストール**
・今さらであるが、Anacondaで開発環境を別々に持つ事が可能なため、今回の場合base(root)とは別に、keras, tensorflowを導入する為の環境を別途準備。こちらではPython 3.6にして、必要に応じてこちらの環境で別途ライブラリーをインストールしている
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/328424/b5dc92d1-1b75-ec25-c71b-4ee4520bc635.png)
・上記までできていればAnaconda NavigatorのHome＞Applications on のメニューでPython3.6の環境（上の画像のKeras_tensorflow）を選んで、jupyter notebookを立ち上げ、下記のようにすればインストールできる(個人的な都合でtensorflow, kerasのバージョンを指定している)
```!pip install -U tensorflow==1.6.0```
```!pip install -U keras==2.0.0```
![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/328424/816c3aa1-33b6-bb3c-61bb-07b793da7dc0.png)
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/328424/3ccdf2c3-ce10-232b-2160-0c306af797eb.png)
Vaporをdocker-compose上で走らせる

VaporのプリセットのテンプレートではDockerを使うための設定があるのですが、docker-composeとなると、あまり参考となるような情報が多いとはいえず、なかなか四苦八苦させられたので、自身が対応してうまくいった方法を以下に述べてみます。

# 前提

macOS High Sierra以降をインストールしたMacで実行しました。

以下のソフトウェアをインストールしている必要があります。インストールしていない場合は、インストールする必要があります。

* Xcode
* Homebrew
* Docker for Mac
* docker-compose
* Vapor

# 各種ツール類をインストール

※ この節はXcode, Homebrew, Docker for Mac, docker-compose, Vaporをインストールしていない場合のインストール手順です。全てインストール済みであれば [Vaporプロジェクトを作成する](#vaporプロジェクトを作成する) までスキップしてください。

## Xcodeのインストール

Xcodeをインストールしていない場合は、App Storeを起動、「Xcode」を選択して、インストールを行います。

インストール完了後、一度Xcodeを起動して、「Welcome to Xcode」の画面が開くかどうかを確認しておくとよいでしょう。

## Homebrewのインストール

Homebrewをインストールしていない場合は、以下のコマンドでインストールができます。

```shell
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

## Docker for Macとdocker-composeのインストール

Docker for Macとdocker-composeをインストールするには、以下のコマンドで行えます。

```shell
brew cask install docker
brew install docker-compose
```

## Vaporのインストール

Vaporをインストールするには、まずは `vapor/homebrew-tap` をtapします。

```shell
brew tap vapor/homebrew-tap
brew update
```

その後、以下のコマンドでインストールできます。

```shell
brew install vapor
```

# Vaporプロジェクトを作成する

※ この節はVaporプロジェクトを作成したことのない場合の手順です。不要であれば [docker-composeでVaporプロジェクトを走らせる](#docker-composeでvaporプロジェクトを走らせる) までスキップしてください。

## プロジェクトを作成する

Vaporプロジェクトを作成する場合は、以下のコマンドでおこなえます(ウェブアプリを作成する場合)

```shell
vapor new --web FooBar
```

上記の場合は、FooBarという名称のウェブアプリテンプレートで作成することができます。 `--web` の部分を `--api` とすればAPIテンプレート、 `--auth` とすれば認証機能のテンプレートが適用されます。

また、任意のテンプレートを使用したい場合は `--template=(GitHubのリポジトリ名またはGitのリポジトリのURL)` とすることもできます。

## Xcodeプロジェクトを生成する

Xcode用のプロジェクトを生成する場合は、作成したプロジェクトのディレクトリにて、以下のコマンドを入力することで行えます.

```shell
vapor xcode
```

この時に、`Package.swift` で指定されたライブラリー群もインストールされます。

# docker-composeでVaporプロジェクトを走らせる

前置きが長くなりましたが、ここからdocker-composeでVaporを走らせる方法について説明していきます。

## docker-compose.ymlを作成する

まずは、作成したVaporプロジェクトのディレクトリに以下のファイルを作成します。

```docker-compose.yml
version: '3'
services:
  web:
    build:
      context: .
      dockerfile: web.Dockerfile
    container_name: vapor_web
    image: web:dev
    environment:
      ENVIRONMENT: dev
    ports:
      - 8080:80
    stdin_open: true
    tty: true
    restart: unless-stopped
```

`docker file: web.Dockerfile` の部分については、Dockerfileの名前に応じて適宜変更を行ってください。

## docker-composeをビルドして実行する

docker-compose.ymlを作成したら、以下のコマンドでdocker-composeの関連づけられたコンテナをビルド、実行します。

```shell
docker-compose build
docker-compose up -d
```

ビルド・実行完了後、ブラウザで `127.0.0.1:8080` をひらけば、「It works」のページが表示されればdocker-composeでVaporアプリを実行できています。

その後、以下のコマンドでdocker-composeの関連づけられたコンテナが終了します。

```shell
docker-compose down
```

# 最後に

今回はVaporアプリをdocker-compose上で走らせる方法について書いてみました。docker-composeは、ウェブサーバーとMySQLサーバー、Redisサーバーなど複数のDockerコンテナを走らせるような構成の時にはかなり力を発揮するという利点があり、VaporアプリでもMySQLと連携させるような時にはかなり力を発揮すると言えます。

しかしながら、docker-composeでVaporアプリを走らせる方法については、なかなか見つからなかったので、なかなか面倒だったため、この項目が参考になればと思っております。
悲報 minikubeのCPUコア割り当てのdefault値は2コア

[minikubeのメモリ割り当てのdefault値は2GB](https://qiita.com/loftkun/items/7400d5ae0e7b1fb7d26e)に続く悲報です。

以下のようにdefaultでは2コアしか割り当てられていません。
どれだけコア数の多いCPUを積んだマシンでもdefaultでは2コアしか使われません。

```bash
$ minikube start -h
( : 略 )
      --cpus int                       Number of CPUs allocated to the minikube VM (default 2)
( : 略 )
```

CPUリソースが足りない場合、`Insufficient cpu.`という理由でpodの`status`が`pending`となりスケジューリングされません。

以下のようにして変更できます。
変更後はいったん`minikube delete`が必要なようです。

```bash
$ # 12コアを設定する
$ minikube config set cpus 12
These changes will take effect upon a minikube delete and then a minikube start
$ # 設定の確認
$ minikube config get cpus
12
$ minikube config view
- cpus: 12
$ # 泣く泣くクラスタを削除してから
$ minikube delete
$ # 新たな気持ちでクラスタを開始する、もろもろ再構築しましょう。
$ minikube start
```