OmniAICreator/Qiita-1.07M huggingface dataset:
iOS SimulatorでFlutter WebViewのlocalhost参照でページが真っ白になる件

Flutter WebViewでlocalhostのBasic認証ページを参照した際、ページが真っ白の状態で何も表示されない現象に遭遇した。

iOS Simulatorは13.2を使用。

```
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.6 18G87, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.42.0)
[✓] Connected device (2 available)
```

結論から言うと、接続先を`localhost`としていたところを、ホストマシンのローカルループバックアドレス`127.0.0.1`にすることで解消された。

iOS SimulatorのSafari上で直接アクセスした際は問題なくページ参照できたが、FlutterアプリのWebView経由ではAndroid Emulatorと同じくIPアドレスに置き換える必要があるということなのだろうか。
[Android Emulatorでnet::ERR_CONNECTION_REFUSEDが出た時の対処法 - Qiita](https://qiita.com/unsoluble_sugar/items/f39bb5afae60f51ea7a4)

StackOverflow等でそれらしい情報は得られたが、詳細仕様についてのドキュメントが見つからず…いまいちモヤる。

> If you have a server running on the machine where you iOS simulator is running, then you need to choose 'http://127.0.0.1' as the URL.
[swift - ios simulator access localhost server - Stack Overflow](https://stackoverflow.com/questions/25702354/ios-simulator-access-localhost-server/55686530)
RM mini3(eRemote mini)+外部公開API+webflowでリモコンを作ってみる

# 背景
3年前に構築した[Google HomeとIFTTTと自宅のサーバ(Rasberry Piでもok)で簡単家電操作](https://qiita.com/freddiefujiwara/items/589f1388d5b278cf216e)　の続きです
スマホだけではなく　あらゆる端末から自宅家電を操作したくなりました

# 前提条件
[Google HomeとIFTTTと自宅のサーバ(Rasberry Piでもok)で簡単家電操作](https://qiita.com/freddiefujiwara/items/589f1388d5b278cf216e)の環境が構築されていること

#材料
* [webflow](http://webflow.io/)
* [Google App Script](https://developers.google.com/apps-script)

# 構成
おさらいですが前回までにこんな感じで自宅環境が構築されていると想定します
![Google HomeとIFTTTと自宅のサーバ(Rasberry Piでも多分できる)で簡単家電操作.jpg](https://qiita-image-store.s3.amazonaws.com/0/1817/dbc012b0-41e4-1336-8a62-fa1df6ba1367.jpeg)

#API
つまり下記のAPIができていると仮定します

| アクション      |     API |    実際のコマンド    |
|:-----------------|:------------------:|:------------------|
| tvの電源をつける            |http://api.my.domain/[broadlinkのmacaddress]/tv |  $ broadlinkjs-rm-cli  [broadlinkのmacaddress] tv |
| tvのボリュームを上げる            |http://api.my.domain/[broadlinkのmacaddress]/tv_vol_Pup |  $ broadlinkjs-rm-cli  [broadlinkのmacaddress] tv_vol_up |
| 7チャンネルに切り替える           |http://api.my.domain/[broadlinkのmacaddress]/tv_7 |  $ broadlinkjs-rm-cli  [broadlinkのmacaddress] tv_7 |
などなど。。。

#Google App Script
GASの具体的なはじめかたは省略しますが下記のように
api叩き先と叩いたあとredirectするようなかんたんなAPIを作成し　web appとして公開します

```JavaScript:Code.gs
function doGet(e) {
  UrlFetchApp.fetch(e.parameter.get, {'method':'get'});
  return HtmlService.createHtmlOutput(
    "<script>window.top.location.href='"+e.parameter.redirect+"';</script>"
  );
}
```

| パラメータ名      |     意味 |    例    |
|:-----------------|:------------------:|:------------------|
| get           | API叩き先|  http://api.my.domain/[broadlinkのmacaddress]/tv|
| redirect           | get後の遷移先|  https://www.google.com/|

# webflow
![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/be4bec81-da84-910f-5302-4d1d8800ff8d.gif)

webflowを使ってボタンだらけのUIを作ります
もちろんボタンのリンクはこのような形になります

```html
https://script.google.com/macros/s/[GAS Key]/exec?redirect=[publishしたあとのwebflowページのURL]&get=[URLエンコードしたAPIのURL]
```

# 実際の動き
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/51e36c81-0d77-3765-f754-f4a49d607e37.gif)
こんな感じで　UI->GAS->API-リダイレクト->UI
となっていて　とても動きはもっさりしていますがなんとか実用に耐えられるレベルです
bubble.ioやadalo.com等試してみましたが挫折し、UIはwebflowに落ち着きました

# 注意事項
今の構成だと、セキュリティ的な防御はまったくなく、誰でも自宅の家電を操作出来てしまいますので
お気をつけください
引き続き、下記どちらも何か有りましたらpull requestでFBいただけると幸いです
- [broadlinkjs-rm-cli](https://github.com/freddiefujiwara/broadlinkjs-rm-cli)
- [altd](https://github.com/freddiefujiwara/altd) 

最後まで読んで頂きありがとうございました。
素人とEnumerizeとarray: true

## はじめに
　先日、Railsでチェックボックスを使った複数選択を実装した際に詰まったところがあったので書いておきます。

## やりたかったこと
- 好きな果物 
- [ ] みかん 
- [x] りんご 
- [ ] ぶどう 
- [x] バナナ

　選択肢の要素はEnumerizeで管理し、ビュー側では上のように複数選択でき、String型でDBに保存し、CSVで出力する際に"りんご, バナナ"という形式にする。

## 詰まったところ
　CSVに出力しようとするとnilが返ってきた。

## 解決法
　以下のようにマイグレーションファイルで`array: true`を追加する。

```ruby
def change
  add_column :users, :favorite_fruits, :string, array: true
end
```


## 原因
　複数選択の際にEnumerizeは配列を返す（`#<Enumerize::Set {apple, banana}>`）ので、`array: true`の指定によって配列を許容しておかないとDBに保存できなかったのではないか(おそらく)。

## おまけ
　今回使ったRailsで複数選択をする実装をついでに書いておきます。いろんな実装があると思うので個人の責任でお願いします。ちなみに、カラムに複数値を入れるのはアンチパターンです（『SQLアンチパターン』の最初に出てきたような気がする）。ご利用は計画的に！

```ruby:model
class User < ActiveRecord::Base
  extend Enumerize

  enumerize :favorite_fruits,
    in: %i[
      orange
      apple
      grape
      banana
    ], multiple: true
  end
end
```

```erb:view
<%= form_for @user do |f| %>
  <% User.favorite_fruits.options.each do |name, value| %>
    <%= f.check_box :favorite_fruits, { id: "user_favorite_fruits_#{value}", multiple: true } %>
    <%= f.label :favorite_fruits, name, value: value %>
  <% end %>
<% end %>
```

```ruby:controller
class User < ApplicationController
  def show
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      # 処理省略
    end
  end

  private

  def user_params
    params.require(:user).permit(favorite_fruits: [])
    # ストロングパラメーターの配列のための書き方
  end
end
```

```yml:locale
ja:
  user:
    favorite_fruits:
      orange: 'みかん'
      apple: 'りんご'
      grape: 'ぶどう'
      banana: 'バナナ'
```

```ruby:csvに出力するとき
@user.favorite_topics.texts.join(', ')
```

## おわり
　今回の記事におけるミスやもっと良い実装があれば気軽に教えてください！

## 参考
[Enumerizeのドキュメント](https://github.com/brainspec/enumerize)
回転をサボるAVL木を落とす

この記事では$N$を二分探索木中の要素数(ノード数)として以後断りなく用います。
今回はAVL木をsetのような平衡二分探索木として扱いますが、配列型(平衡二分木)として使ってもほとんど同じことがいえます。

## 前提知識
二分探索木について
(分かってると嬉しい) : AVL木の平衡方法

## 正しい平衡
ノードの平衡係数は(左の子の高さ) $-$ (右の子の高さです)。
説明によっては一重回転をやるケースと二重回転をやるケースとを完全に別のものとして区別していますが、二重回転は一重回転を2回やってるだけで、かつその2回目が一重回転をやるケースの一重回転と一致するので以下のように実装することができます。

 - ノード$x$の平衡係数が2の場合
   1. $x$の左の子の平衡係数が-1なら左の子を左回転  
   2. $x$を右回転
 - ノード$x$の平衡係数が-2の場合(上の全く左右対称)
   1. $x$の右の子の平衡係数が1なら右の子を右回転  
   2. $x$を左回転
 - それ以外(平衡係数が-1,0,1の場合)
    特に何もしない

## サボり
故意にサボらなくても実装ミスって回転されてないとかありそう
いろんなサボり方があるけど上の実装であり得るのが手順の各1.を全くしないタイプです。
つまり平衡係数の絶対値が2だったらいい感じの方向に1回転させて終わりっていう実装です。
もちろんなんで二重回転するかを考えれば間違ってるのは明らかですが困ったことにこいつ適当なケースでは落ちません。

## いろいろ実験
$N = 10^4$で実験します

 - ランダムシャッフルした順列を挿入  
     高さ17  
     ランダムケースは何も平衡しないやつすら落とせないので当たり前
 - 昇順挿入  
     高さ14  
     ただの二分探索木はこれで落ちますがこいつは落ちません
 - 最大値と最小値を交互に  
     i番目に(i & 1) ? i : n - iを挿入するみたいな感じです  
     高さ83  
     ちょっと兆しが見えてきました、これのオーダー分からん

## 一番平衡が壊れたケース
$N = 10000$の場合、i番目にi xor 0xFFF(=4095)を挿入すると最終的な高さが4108になりました。
実験ではxorする定数を$r$($r$は2べき-1)とすると、だいたい$\min(r, N - r)$くらいの高さになりそうなことが分かったので高さを$\Theta(N)$にできました。

そしてこのケースは平衡手順の、「ノード$x$の平衡係数が-2の場合」の項の手順1.をサボった場合に平衡が壊れます。
「ノード$x$の平衡係数が2の場合」の方の手順1.だけサボってるのを落としたい場合はi xor rの代わりにINF - (i xor r)にするとよいです。

## 最後に
ちゃんと二重回転するモチベができて良かった
超簡単に生成できるし、露骨に平衡二分探索木使う問題のテストデータに入ってるとうれしいな
モック生成・パターン管理ツールの am-mocktimes を Svelte で作り直した

## am-mocktimes の簡単なご紹介

[am-mocktimes](https://github.com/ampcpmgp/am-mocktimes) とは、モック生成とパターン管理を行うツールです。

直感的には、以下のコードを書くと

```yml:patterns.yml
Travel Plan A: [setPlan, A]
Travel Plan B: [setPlan, B]
Travel Plan Z:
   - [setPlan, Z]
   - [setLocation, Cell Game, true]

```



以下のような一覧画面が表示され

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85111/a35516d5-a411-1976-56a1-1516ef8d8ba9.png)



以下のコードを追加して、上記リンクをクリックすると

```javascript:mock-config.js
import mock from 'am-mocktimes'

mock({
    setPlan(name) {
        // 処理
    },
    setLocation(name, flag) {
        // 処理
    }
})
```



アプリ画面に切り替わり実行されます。（ブラウザバックで戻れます。）

| Plan A 選択 | Plan B 選択 |
| ---- | ---- |
| ![image-20200216181125682.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85111/0e84bb97-3e2d-4301-44ea-fe77f9691474.png) | ![image-20200216181156134.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85111/e36f00f0-fb0d-bdc1-db47-5325f5468aae.png) |





詳しいドキュメントは[レポジトリ](https://github.com/ampcpmgp/am-mocktimes)をご覧ください。上記デモは[こちら](https://ampcpmgp.github.io/am-mocktimes/docs/patterns.html)。



## Svelteに移行した理由

am-mocktimes は [Riot.js](https://github.com/riot/riot) を採用していました。Riot は Web Standard に合わせるような仕様を目指していると感じていて、とても好感がありました。ライブラリ特有の処理を覚えることが少なく、軽量であったことも大きいです。そのため、捨てやすいライブラリでもありました。

[Svelte](https://github.com/sveltejs/svelte) は js に完全にコンパイルするため、ライブラリとしての容量は0kbになります ( [参考記事](https://qiita.com/so99ynoodles/items/a8144ced1a21467c6300) ) 。より Web Standard に近い形になると考えることも出来そうです。
また、 [2019 JavaScript Rising Stars / Front-end Frameworks](https://risingstars.js.org/2019/en/#section-framework) では突如3位に浮上し、注目度が急激に高まっています。

> Does it mean that we have now a BIG-4 instead of a BIG-3?

「（Vue.js, React, Angularの） 3強時代から、4強時代になったことを意味する？」と書かれている通り、人気上位のフレームワークにも食い込んできています。

これらの注目もあって、 Riot.js に比べて開発ツールが非常に充実しています。 linter や formatter, suggest の機能が vscode で得られたのは非常に大きく、書きやすさも申し分無い。デメリットとしては TypeScript サポートが現時点では無いことですが、個人的にはそれ以上のメリットを感じています。

移行の決め手となったのは、 Svelte の機能の一つである component-scoped CSS (子コンポーネントに style が継承されない機能) です。予期せぬ style崩れが起きないようずっと気をつかっていて、この機能を持つ Web Components に何度も乗り換えたいと思ってたくらいなので、喉が潤った感じがしました。この機能を知らない方は [こちらのTutorial](https://svelte.dev/tutorial/nested-components) を見ると分かり易いと思います。



## 実際に作ってみて

想像以上に作り易かったです。 [Svelte Tutorial (公式)](https://svelte.dev/tutorial/basics) を8章くらいまで読んで、開発の合間に [Svelte Master / tutorial](https://www.youtube.com/playlist?list=PLcjHRSem_cvP440pjw79kB85Z_7Nn8VqZ) を見つつ作りました。最初に公式の Tutorial を全部眺めていたら、書き直しが減ったように思います。再帰などいくつかハマった点はありますが、無事に解決し全体的に大満足です。



## Riot.jsについて

自分はこのフレームワークをとても愛していて、マイペースで作り上げていくコアコミッターの方を応援し続けるつもりです。ただもしかすると、Riot.js が本当に目指していたのは Svelte のような 0kbライブラリなのではないか、と考えたりもしています。良い意味で自分の予想を裏切ってくれたら嬉しく思います。



## 全体を通して

Svelte は型に厳密なプログラミングでは無いので、それを求めている大規模・大人数開発には向かないと思います。ただ、型安全性を持たなくとも、開発パフォーマンスを十分に高めることが出来る一つの手法であると考えています。型安全性を持つ開発としては、自分は Rust でのフロントエンド開発に期待を寄せています。今後は Svelte と Rust の融合は可能か、どのように進化していくとより良いか等の理想を考えながら、開発していきたいと思っています。
JetBrains製品でLiquidテンプレートを使いたい

Intelij IDEAでLiquidテンプレートを使いたいと思い、
サポートに確認したところ、以下の回答が。


---
Liquid template language is not supported yet, but we are aware of its popularity and are currently collecting people's expectations and would-likes in [this YouTrack ticket](https://youtrack.jetbrains.com/issue/RUBY-7210) thread.
You can vote for the ticket and optionally add a comment describing your specific use case.

---


なので、JetBrains製品でLiquidテンプレートを使いたい方は、
以下のページから必要性をアピールしましょう。

https://youtrack.jetbrains.com/issue/RUBY-7210





参考

・Liquid
https://shopify.github.io/liquid/
sudachiclone-rs作った

## 先達の記事

[Rustによる自然言語処理ツールの実装: 形態素解析器「sudachi.rs」]
(https://qiita.com/sorami/items/7934fec2074c493c0f7d)

## 成果物

https://github.com/Yasu-umi/sudachiclone-rs
https://crates.io/crates/sudachiclone

## やったこと

- SudachiPyの中身を読んでRustで再実装した。
- sudachi.rsとのdiffは再現度。テスト含めSudachiPyにある機能は大体実装済み。

## まだやってないこと

- いくつかの機能の実装。数字のnormalizeのためのpluginとか。
- パフォーマンス改善。辞書読み込みがpythonより遅いとかどうなっているんだ。

## そもそもやりたかったこと

- wasm使ってブラウザでtokenizerを動かす。

## 雑感

Rustを書くこと自体が久々だったので構文を結構忘れていた。しかしやはりこんなに親切なコンパイラは他にないのではなかろうかというくらいには優しいコンパイラだ、とにかくコードを書くのが楽しい。
pythonからの素朴な移植をやったので`Rc<RefCell<T>>`を使わざるを得なかったのがつらい。しかしこれは内部の構造を大幅に変更しないとなくせないだろう。
[以前100本ノックをやっていた時](https://qiita.com/Yasu-umi/items/9d799e34c630c69fbd5c)にも感じたが、RustでNLPする上での(python比較での)一番のハードルはやはり文字列の扱いで、Stringに良い感じにutf8でsliceする機能がstdで欲しくなった。([unicode_segmentation](https://crates.io/crates/unicode-segmentation)の存在にはたった今気付いたのでこれを使うコードに書き直そう)
改行しつつ text-overflow ellipsis を使いたい

以下の回答をご確認ください。

* [Text overflow ellipsis on two lines - Stackoverflow](https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines#answer-30940678)


## ポイント

リンク先の SCSS を見ると `height` を計算させています。これは `-webkit-line-clamp` で指定された行の末尾だけが `...` に変換されるからです。それ以降の行も普通に表示されてしまいます。それを避けるために `height` を計算させています。


```scss
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {

  height: $font-size*$line-height*$lines-to-show; /* <--- ここに注目してください。 */

  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;

}
```

`-webkit-line-clamp` は、ベンダープリフィックスがついていますが IE を除いたブラウザは対応してくれていそうです。

* [-webkit-line-clamp - MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)

## リンク

* [文字数制限をしないでCSSだけで「...」を表示する](https://www.ilovex.co.jp/blog/system/html/css-1.html)
* [text-overflow: ellipsis が上手く動作しない？ 解決してあげよう。 - Qiita](https://qiita.com/Nexus0831/items/705cd8b082379b42e565)
* [CSS text-overflow: ellipsis; not working? - Stackoverflow](https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working)
* [Text overflow ellipsis on two lines - Stackoverflow](https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines)
* [font-size vs line-height vs actual height - Stackoverflow](https://stackoverflow.com/questions/41336177/font-size-vs-line-height-vs-actual-height)

あと CSS variables を Vue.js の中で使おうとしたら、少し引っかかる。

* [CSS variables use in Vue - Stackoverflow](https://stackoverflow.com/questions/53240081/css-variables-use-in-vue)
* [How do you inspect CSS variables in the browser? - Stackoverflow](https://stackoverflow.com/questions/35604836/how-do-you-inspect-css-variables-in-the-browser)
[Laravel 5.6 ~] ServiceProvider内でシンプルなbindを行う方法が増えてた

## はじめに
初投稿です。

今まで業務ではlaravel5.5を使っており、最近新規のプロジェクトでlaravel6系統を使うようになったので、色々と変更点を確認しておりました(今更)。

その中で、ドキュメントにひっそりと追記されているにもかかわらず、あまり類似の情報をqiita等で見かけなかった(と思っている)物があったため、備忘録として投稿します。

## 環境
- laravel 5.6 ~ 
    - ~ 5.5までは対応していません

## 対象
- Laravelをそれなりに使っていて、DIコンテナ内で抽象と具象のbindについて大枠理解している方
    - 本記事ではDIの仕組み、それを使う動機等、「そもそもなぜこんなことをする必要があるか」について理解されている前提です。

## 基本的なバインド処理

さて、早速ですが基本的なバインド処理についてです。
最も基本的なinterfaceと実装クラスのbindingは以下のようになるかと思います。

```php:app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        // 抽象に対して具象クラスをbindingする
        // 以後、コンストラクタインジェクションやapp()の引数に(Abstract::class)で呼び出すと、Concreteクラスが返却される
        $this->app->bind(Abstract::class, Concrete::class);
        dd(Abstract::class); // => Concreteクラスが返却される
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

```
## ~ 5.5までのバインド方法

その上で、複数のバインドをまとめて行いたいユースケースについて考えます。
今まで自分が関わってきたプロジェクトで、バインドを複数まとめて行いたいとき(Repository Pattern等)、以下のような書き方をしていました。

```php:app/Providers/AppServiceProvider.php
class AppServiceProvider extends ServiceProvider
{
    /**
     * bindingするinterfaceと実装クラスを$key => $valueで保持する
     *
     * @param array
     */
    private $repositoryBindings = [
        FooRepository::class => EloquentFooRepository::class,
        BarRepository::class => EloquentBarRepository::class,
    ];

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        // すべてのbindingを回して登録する
        foreach($repositoryBindings as $abstract => $concrete) {
            $this->app->bind($abstract => $concrete);
        }
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}
```

汚いというわけでもなく、特に問題なく動作するコードです。

## 5.6からのバインド方法

readoubleにしれっと追記されています。
https://readouble.com/laravel/5.6/ja/providers.html

シンプルなバインドを行うためのプロパティが追加されており、ここにbindを指定するだけで自動でbindingが行われる様になっています。
(ついでに$singletonのプロパティも用意されています)

```php:app/Providers/AppServiceProvider.php
class AppServiceProvider extends ServiceProvider
{
    /**
     * 結合したいabstractとconcreteを登録. ここに記述されたものは自動でbindingされる
     *
     * @param array
     */
    public $bindings = [
        FooRepository::class => EloquentFooRepository::class,
        BarRepository::class => EloquentBarRepository::class,
    ];

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        // ここで何も書かなくても$bindingsに指定があれば自動でbindが行われる
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}
```

## 終わりに
大きなメリットがあるわけでもなく、ちょっとしたtipsでした。
ただ、やはりフレームワークが用意してくれている方式に乗っかれると気持ちがいいですね。
Android Emulatorでnet::ERR_CLEARTEXT_NOT_PERMITTEDが出た時の対処法

WebViewでlocalhostを参照する実装をAndroid Emulatorで見る際、`net::ERR_CLEARTEXT_NOT_PERMITTED`というエラーが表示された。
![スクリーンショット 2020-02-16 18.47.53_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/10a68e7e-f518-e415-ad55-c8d920eac57e.png)

これはAndroid 9（API レベル 28）からTLS（Transport Layer Security）がデフォルトとなり、HTTPプロトコル通信許が可されなくなったことが原因。
[Google Developers Japan: Android P で TLS のデフォルト化によるユーザー保護](https://developers-jp.googleblog.com/2018/05/protecting-users-with-tls-by-default-in.html)

対処法はいくつかあるが、今回はサンプルアプリということもあり、マニフェストファイルにHTTP通信を許可するよう`usesCleartextTraffic`の設定を追加することで回避した。

```AndroidManifest.xml
<application
    ...
    android:usesCleartextTraffic="true"
    ...
>
</application>

```

厳密に対応する場合は、特定ドメインのみを許可する設定などが推奨されている。

```AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config"
                        ... >
            ...
        </application>
    </manifest>
```

```res/xml/network_security_config.xml
    <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
        <domain-config>
            <domain includeSubdomains="true">secure.example.com</domain>
            <domain includeSubdomains="true">cdn.example.com</domain>
            <trust-anchors>
                <certificates src="@raw/trusted_roots"/>
            </trust-anchors>
        </domain-config>
    </network-security-config>
```
[ネットワーク セキュリティ構成  |  Android デベロッパー  |  Android Developers](https://developer.android.com/training/articles/security-config?hl=ja)
Android Emulatorでnet::ERR_CONNECTION_REFUSEDが出た時の対処法

WebViewでlocalhostを参照する実装をAndroid Emulatorで見る際、`net::ERR_CONNECTION_REFUSED`というエラーが表示された。
![スクリーンショット 2020-02-16 18.45.52_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/77932571-dde0-561f-cf42-239316ba6635.png)

接続先は`http://localhost:3000/`を指定していたのだが、Android Emulatorは仮想環境上で実行されているため、ホストマシンで直接実行しているローカルサーバーには接続できない模様。

> エミュレータの各インスタンスは、仮想ルーターおよびファイアウォール サービスの背後で実行されます。この仮想ルーターおよびファイアウォール サービスによって、各インスタンスは開発マシンのネットワーク インターフェースと設定、そしてインターネットから分離されます。エミュレートしたデバイスでは、開発マシンやネットワーク上のその他のエミュレータ インスタンスは認識されず、イーサネット経由でルーター / ファイアウォールに接続されていることだけが認識されます。
> 
> 各インスタンスの仮想ルーターは、10.0.2/24 ネットワーク アドレス空間を管理します。ルーターによって管理されるすべてのアドレスは、10.0.2.xx の形式を持ちます（xx は数字）。この空間内のアドレスは、エミュレータ / ルーターによって次のように事前に割り当てられます。

> [Android Emulator のネットワークを設定する  |  Android デベロッパー  |  Android Developers](https://developer.android.com/studio/run/emulator-networking)

Android Emulatorからホストマシンのローカルループバックアドレス（127.0.0.1）を参照するためには、ネットワークアドレス`10.0.2.2`を使用する必要がある。

| ネットワーク アドレス | 説明 |
|:--|:--|
| 10.0.2.1 | ルーター / ゲートウェイ アドレス |
| 10.0.2.2 | ホスト ループバック インターフェースへの特殊エイリアス（開発マシンの 127.0.0.1 など） |
| 10.0.2.3 | 1 番目の DNS サーバー |
| 10.0.2.4 / 10.0.2.5 / 10.0.2.6 | オプションの 2 番目、3 番目、4 番目の DNS サーバー（存在する場合） |
| 10.0.2.15 | エミュレートしたデバイスのネットワーク / イーサネット インターフェース |
| 127.0.0.1 | エミュレートしたデバイスのループバック インターフェース |


WebViewの接続先を`http://10.0.2.2:3000/`に指定することで、localhostへアクセスすることができた。
![スクリーンショット 2020-02-16 18.32.11_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/e76c5009-4ab1-19a0-b2fb-a78c53057de1.png)

これまでAndroid Emulator上でlocalhostを参照する機会がなかったため、大変勉強になった。
Gemfileでインストールするgemを間違えた時の対処法

## 本記事の対象者
「インストールしようと思っていたgemを間違えてしまった」
「Gemfileでインストールしたgemを削除したい」
そんな方に向けてこの記事を書いています。

### ステップ１：Gemfileから削除する
はじめに、Gemfileから間違ってインストールしたgemの記載を削除します。

### ステップ２：Gemfile.lockから削除する
次に、Gemfile.lockの記載を更新します。Gemfile.lockは手動で修正せずに、以下のコマンドを実行して、自動で修正するようにしてください。

```
$ bundle install
```

もしくは

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

### まとめ
Gemfileでインストールするgemを間違えた際には、以上のたった２ステップを実行することで対処できます。
csvファイルを読み込んで書き込む

```py
import csv

with open('test.csv', 'w+', newline='') as csv_file:
    fieldnames = ['Name', 'Count']
    writer = csv.DictWriter(csv_file, fieldnames=fieldnames)
    writer.writeheader()
    writer.writerow({'Name':'A', 'Count':1})
    writer.writerow({'Name':'B', 'Count':2})
    
    csv_file.seek(0)
    
    reader = csv.DictReader(csv_file)
    
    for row in reader:
        print(row['Name'], row['Count'])
```

```:実行結果
A 1
B 2
```
Node.js + Express + passport.jsでローカルサーバーにBasic認証ページを立てる

# 経緯

FlutterアプリのWebViewからBasic認証ページの接続テストをしたかったので、サンプルとしてローカルでBasic認証ページを作ることにした。
[FlutterのWebViewからBasic認証ページにアクセスする - Qiita](https://qiita.com/unsoluble_sugar/items/84920666ebd58c44782a)

ローカルサーバーを立てるだけならVSCodeのLive Serverでサクッとできたのだが、Basic認証のかけ方がいまいちわからなかったため、Node.js + Express構成を使うことにした。

環境はMacでnpmコマンドが使用できる前提。

# Passport-HTTPのインストール
認証まわりが簡単に実装できる[passport.js](http://www.passportjs.org/)というライブラリを使ってみた。

[Passport-HTTP](http://www.passportjs.org/packages/passport-http/)をインストールする。

```
$ npm i express passport passport-http
```


view engine（テンプレートエンジン）には`ejs`を使うので、こちらもインストール。

```
$ npm install --save ejs
```

## 認証ページの準備

プロジェクトフォルダ直下に`app.js`ファイルを作成。Basic認証をかけ、成功時にそれ用の表示を出すだけの簡素なつくり。

```app.js
const express = require('express');
const passport = require('passport');
const passportHttp = require('passport-http');

passport.use(new passportHttp.BasicStrategy(
  function(username, password, done) {
    if (username === 'user' && password == 'pass') {
      return done(null, true);
    } else {
      return done(null, false);
    }
  }
));

const app = express();
app.set("view engine", "ejs");
app.get('/', 
  passport.authenticate('basic', { session: false, }),
   (req, res) => {
  res.render("index", {content:"Success"});
});

app.listen(3000, (err, res) => {
  console.log('server is launched');
});
```

`views`フォルダを作成し、その直下に`index.ejs`を作成する。

```js:/views/index.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title><%= content %></title>
</head>
<body>
    <h1><%= content %></h1>
</body>
</html>

```
今回の目的はWebViewからBasic認証ページの接続確認をしたいだけなので、認証に使う`username`は「user 」、`password`は「pass」というガバガバセキュリティで行く。


## ブラウザで表示確認
ローカルサーバーを起動。

```
$ node app.js
server is launched
```

## 

ブラウザで`localhost:3000`にアクセスすると、ユーザー名＆パスワードを聞かれる。
http://localhost:3000/

![スクリーンショット 2020-02-16 10.40.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/cdf70b29-0f10-c994-66dc-df621c134944.png)
正しいユーザー名＆パスワードを入力して「OK」を押すと
![スクリーンショット 2020-02-16 10.40.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/d5bfb6a9-c3e8-7666-db68-dbd3818e52e4.png)
「Success」と表示される。
![スクリーンショット 2020-02-16 10.40.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/dfb48549-e8c3-7c9a-3fa2-0d832684317f.png)

キャンセル時は「Unauthorized」と表示される。
![スクリーンショット 2020-02-16 10.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/02c8fc30-25bb-664b-94ec-173831ef3389.png)

終わり。
## curlコマンドで確認
ちなみにターミナルでcurlコマンド叩いても確認できる。

```
$ curl -u user:pass http://localhost:3000
```

今回はビューをレンダリングしてるのでhtmlが吐かれる。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Success</title>
</head>
<body>
    <h1>Success</h1>
</body>
</html>
```

誤ったユーザー名、パスワードを指定したり、userオプション（`-u`）を指定しなかった場合は`Unauthorized`が返ってくるだけ。

```
Unauthorized
```
Vue.js:アロー演算子を使うタイミング

Vue.jsで「アロー演算子」を使うタイミングが分からないなと思ったので、
このパターンが来たら、アロー演算子の出番だよ。と言うタイミングをメモっておいた。

https://jp.vuejs.org/v2/guide/components.html

```javascript
data: function () {  //←function()
  return {           //←return
    count: 0
  }
}
```
出た！このパターンがきたら、アロー演算子を使う。

```javascript
data: () => ({
  count: 0
})
```
スッキリする！

```javascript
computed:{
  hoge:{
    get: function(){  //←function()
      return this.$store.getters.hoge //←return
    }
    set: function(val){
      this.$store.dispatch('setHoge',val)
    }
  }
}
```
このパターンが来たらアロー演算子

```javascript
computed:{
  hoge:{
    get() => (
      this.$store.getters.hoge
    )
    set(val){
      this.$store.dispatch('setHoge',val)
    }
  }
}
```
スッキリする。

```javascript
getFilteredCity:{
  get: function(){  //←function & return
    return this.citys.filter(function(City){  //←function & return  
      return (City.pref.indexOf(this.prefCode) !== -1 && (City.pref == this.prefCode || this.prefCode == ''))
      }
    }
  }
},
```

フィルタ関数のこのパターンも

```javascript
getFilteredCity:{
  get() => (
    this.citys.filter(
      (City) => (City.pref.indexOf(this.prefCode) !== -1 && (City.pref == this.prefCode || this.prefCode == '')
    ) 
  )
},
```
こんなにスッキリする。

```javascript
watch:{
  meta(){
    this.$emit('updateHead')
    setTimeout( funtion(){
      this.getStoreLoading(false)
    }, 1000);
  },
},
```

setTimeoutも。

```javascript
watch:{
  meta(){
    this.$emit('updateHead')
    setTimeout(() => {
      this.getStoreLoading(false)
    }, 1000);
  },
},
```

ちょっとスッキリする。

#でもPrettierとかESLintで--fixを設定してると…
勝手に直してくれるから、勝手にイケてる感じにしてくれる。

#Babelのプラグイン
自動で直す設定にしておくと、ドンドンイケてる感じに直って行くので、
`babel.config.js`に、プラグインを入れておいたほうが良いと思います。

```javascript

module.exports = {
  presets: ["@babel/preset-env"],
  overrides: [
    {
      presets: [
        ["@babel/preset-env", {	targets: { ie: "11" } }],
      ],
      plugins: [
        '@babel/plugin-transform-arrow-functions', //←これ
      ]
    }
  ],
}
```

以上です。
elmのRandomで遊ぼう

## はじめに
Web系の何がしかを弄りたいという気持ちと、関数型言語っていうのを試してみたいという気持ちが悪魔合体して、最近Elmで遊んでいる。TRPG好きならいじってしまう乱数生成で遊んでいたら思わず楽しかったので何番煎じかもはや数えてないけど記録。

## まとめ
- elm/randomは直接乱数を生成するのではなく、乱数生成のレシピ(Random.Generator a)を作り、それをRandom.generateで実際に生成する二段構え
- 乱数をもとに計算したり、乱数を複数作ったりするときも、最終的にはRandom.Generator a型にしてgenerateに渡す(のが想定されているぽい)
- 最初はちょっとめんどくさいけど、やり方がわかるとわかりやすい気もする。多分

## 乱数を生成する
Randomの使い方は、Introduction to Elmにも[ページ](https://guide.elm-lang.jp/effects/random.html)があり、オンラインエディタで色々といじることができる。下にコードを抜粋する。

```random.elm
import Browser
import Html exposing (..)
import Html.Events exposing (..)
import Random

type alias Model =
  { dieFace : Int
  }

init : () -> (Model, Cmd Msg)
init _ =
  ( Model 1
  , Cmd.none
  )

type Msg
  = Roll
  | NewFace Int

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Roll ->
      ( model
      , Random.generate NewFace (Random.int 1 6)
      )

    NewFace newFace ->
      ( Model newFace
      , Cmd.none
      )
```

Rollメッセージを呼ぶとRandom.generate~のコマンドが呼び出されて、レシピに従った乱数がNewFaceメッセージに送られるしくみ。Random.generateでいきなりModelの中身に乱数の結果をぶち込むことはできず、いったん別のメッセージを挟むことになる。あまり関数型のエッセンスをまだ理解していないので詳細な解説はできないけど、乱数をさらに加工したいときはNewFaceメッセージの中で何やらすることもできそう。

ここからは、どんな乱数生成ができるか、Generatorを色々紹介したい。

### 整数値の乱数
上の例でも書かれている整数値の乱数を出すGenerator。下の例だと1から6までの整数を出力してくれる。

```elm
dice6D : Random.Generator Int
dice6D = Random.int 1 6
```

### 小数の乱数
整数とやることは変わらない。Referenceを見ると、生成した乱数に対して```p < 0.4```などとチェックをすることで、40%の確率で何かをしたりしなかったりすることができますよ！という応用例が示されている。ちなみに、整数や小数の乱数の確率分布は一様分布になっている。

```elm
zeroToOne : Random.Generator Float
zeroToOne = Random.float 0 1
```

#### 一様分布ではない乱数
weightedという関数を使うことで、グラサイのような確率に偏りのある乱数を生成することができる。

```elm
rollWeighted : Random.Generator Int
rollWeighted = Random.weighted (10, 1) [(20, 2), (30, 3), (40, 4), (50, 5)]
```

上の例だと5が最も出やすいが、6はないので出ない。ちなみに、確率の比率の合計が100になっていないが、Elmが勝手にそれぞれの確率を```重み/合計```で計算してくれる。賢い。

### 定数
乱数ではないけど、

```math
  P(x) = \begin{cases}
    1 & (x=a) \\
    0 & (otherwise)
  \end{cases}
```

という確率分布を考えていると思えばいい（と勝手に思っている、積分して1にならんけど）。

```elm
alwaysZero : Random.Generator Int
alwaysZero = Random.constant 0
```

## 乱数を加工する
上の関数群はただ乱数のレシピを作ってくれるだけで、その乱数をさらに加工するには一工夫する必要がある。例えば乱数を5倍したいなどという場合、Random.mapを使う。

```elm
make5x : Random.Generator Int
make5x = Random.map (\a -> a * 5) (Random.int 1 6)
```

2個の乱数を合わせて使いたい時はmap2。例えば2つの6面ダイスを振って値を合計したい時は

```elm
roll2D : Random.Generator Int
roll2D = Random.map2 (\a b -> a + b) (Random.int 1 6) (Random.int 1 6)
```

これでやっとソード・ワールドができるようになった。

Call of Cthulhuの新版では、ステータスを3D6*5で算出するようになった。3つの乱数にはmap3を使う。

```elm
makeStatus : Random.Generator Int
makeStatus = Random.map3 (\a b c -> (a + b + c) * 5) (Random.int 1 6) (Random.int 1 6) (Random.int 1 6)
```

以下map4、map5があるのだが、これは大変面倒だ。どうせ同じD6ダイスを使うのだし、任意個数のダイスを振って合計を出したい。そこで、乱数のリストを作成しよう。Random.listで、Int引数の数だけ乱数を持つリストを作れる。

```elm
rollND6 : Int -> Random.Generator (List Int)
rollND6 dice = Random.list dice (Random.int 1 6)
```

この乱数をmapで煮るなり焼くなり好きにできる！

## おわりに
elm/randomは、乱数の出力に二段構えの構成で最初はとっつきにくいけど、関数は色々痒い所に手が届くものが多くて、欲しい乱数をmapやら何やらで出すのはまるでパズルみたいな感覚。他にも色々あるみたいなのでもう少しいじってみよう。
Techpitの教材「Vue.js と Firebase ではてなブックマーク風なブックマークサービスを作ってみよう！」を終えての感想

#  説明

[TechCommit](https://www.tech-commit.jp/)さんのお年玉企画で、[Techpit](https://www.techpit.jp/)さんの教材[「Vue.js と Firebase ではてなブックマーク風なブックマークサービスを作ってみよう！」](https://www.techpit.jp/)が当選したので使ってみた感想を書きました。

## 前提

### 筆者のレベル

|言語・ツール         | レベル                       |
|:-----------------|:---------------------------|
| HTML・CSS         | 基礎レベル                   |
| JavaScript       | 業務で少し触ったことがある   　　 |
| Vue.js           | はじめて                     |
| Firebase         | はじめて                     |

## 扱った技術

- Vue.js
- Bulma
- Firebase Authentication
- Firestore
- Firebase Storage
- Firebase Cloud Function
- Firebase Hosting 

## 作った機能

- ブックマークサービス
    - トップページ（全ユーザーのブックマーク一覧）
    - サインアップ
    - サインイン
    - 認証情報変更
    - ブックマークへのコメント
    - ブックマークコメントのスター登録
    - プロファイルページ

## 完成品

公開したアプリケーション。
<https://pitmark-prod-9c6b2.firebaseapp.com/>

### トップページ

<img width="1440" alt="スクリーンショット 2020-02-16 17.27.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295193/26777fd1-ae4a-77dd-73b5-346d34966e38.png">

### サインアップ

<img width="1440" alt="スクリーンショット 2020-02-16 17.35.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295193/2c0c9a9b-ccaa-42e8-e95e-3077a278d3cf.png">

### サインイン

<img width="1440" alt="スクリーンショット 2020-02-16 17.35.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295193/20f41474-8f46-76da-6ac3-1db8772810cf.png">

### 認証情報変更

<img width="1439" alt="スクリーンショット 2020-02-16 17.39.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295193/c102be43-ae2f-0ba1-62ef-40fc46b7e918.png">

### ブックマークへのコメント＆スター登録

<img width="1435" alt="スクリーンショット 2020-02-16 18.02.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295193/d1e9c607-a7f7-e14b-0378-e6d3dcfbd746.png">

### プロファイルページ

<img width="1438" alt="スクリーンショット 2020-02-16 17.59.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295193/12824b72-cea4-9d1a-a86a-7a066869b69a.png">

## 感想

1. 手順通りに進めるとアプリができあがるので、Progate等で基礎を学んだあとに何か成果物を作りたい人に良いと思いました。Vue.jsとFirebaseの使い方を丁寧に説明してくれるので詰まる箇所も少なく進めていけました。ただし説明が少ない箇所もあるので自分で調べる必要もあります（[Vueの公式ページ](https://jp.vuejs.org/)がわかりやすいので助かる）。

2. HTML・CSS、JavaScriptの基礎を学んでいないと消化不良になりそうです。自分はJavaScriptをしっかり学んでいなかったのでJavaScriptとVue.jsの両方を調べながら教材を進めていきましたが、それだとVue.jsの内容が頭に入りきらないことがあったのでちょっともったいなかったと感じました。

3. Firebaseは初めて触りましたが、基礎的な内容を学ぶことができ勉強になりました。アプリを簡単に公開までもっていけます。学んだ内容は
    1. Firebase Authentication：認証機能
    2. Firestore：データベース機能
    3. Firebase Storage：ファイルストレージ機能
    4. Firebase Cloud Function：データが作成・更新・削除されたときに特定の処理を裏側で行わせる等で使用
    5. Firebase Hosting：アプリの公開に使用

4. Bulmaが便利。Flexboxベースの柔軟なレイアウトを簡単に構築できる。教材に沿って使っただけなので自分で色々試してみたい。
【Vuejs】v-forで配列を出力する時に1つ目の要素とそれ以降でstyleを変える

テーブルとかもそうですが、最初の要素だけスタイルを切り替えたい時にどうするんだろうと調べていたら3項演算子が使えました。

#class属性を配列の要素番号で切り替える

```html:sample.html
    <style>
        .first{
            color: aquamarine;
        }
        .two-or-more{
            color: burlywood;
        }
    </style>
    <div id="app">
        <ul>
            <li v-for="(e,index) in mylist" v-bind:class="[index == 0 ? 'first' : 'two-or-more']">{{e.name}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                mylist: [
                    { name: "1つ目" },
                    { name: "2つ目" },
                    { name: "3つ目" },
                    { name: "4つ目" },
                ],
            }
        })
    </script>
```

#結果
画面はこんな感じで、
![Screenshot2020-02-16_20-09-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/371771/5ee7f69a-cab3-7557-bcfc-4cad17856c5b.png)

要素はこんな感じで出力されました。
![Screenshot2020-02-16_20-13-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/371771/6895e588-8c56-dcb9-f287-1b10d22a4ca6.png)


#参考
公式ドキュメント#配列構文
https://jp.vuejs.org/v2/guide/class-and-style.html#%E9%85%8D%E5%88%97%E6%A7%8B%E6%96%87
電子機器をネットで買う時に検索する手順

電子機器をネットで買う時に検索する手順

# 価格.com
http://kakaku.com

買いたいものの価格順に検索する。

例：　マイク　有線

マイク本体だけでなく、部品が入ってくる。

# 製造元・販売元へ行く

最新製品の型番号を確認する

購入するものが、最新製品である必要があるものと必要がないものがある。
PCなどでは、最新製品の方が、OS、アプリなどのライセンスが最新の場合には、最新製品の方がよい。１年前と最新製品とが、ハードウェアもソフトウェアも同じ版のライセンスであれば１年前のものでもよい。仕様を確認するとよい。

仕様の読み方がわからなければ、質問サイトなどで仕様の読み方を、具体的な製品名と型番を買いて質問するとよい。

#購入サイトへ行く

楽天ポイントを貯めたければ楽天に、
それ以外のカード決済や、ポイント貯めたいとうのであれば、
そのサイトに行って、製造元で確認した型番を入れて検索する。

検索結果で、最安値に行く。

購入条件、送料などを考慮しても本当に最安値かを確認して購入。
# 文書履歴(document history)
ver. 0.01 初稿 20230307
ver. 0.04 URL追記　20230307

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
深層強化学習（方策勾配法）で株式投資(1)

強化学習について学んでいる大学4年生です。もう卒業です。
単純に、AIの力で儲けることができないかなと思って研究に着手しましたが、
金融関連だからか検索しても全然情報が出てこないんですよね...
そこで自分が今年行った研究「深層強化学習による投資戦略の獲得」
についてつらつら書き、どこかの誰かの参考になればと思います。
(学会等には出稿したことがありませんので悪しからず...論文を探しても出てきません。)
(お金儲けの研究と書きましたが、情報商材等ではありません。変なURLへの誘導もないので安心してご覧ください。)

今回は(1)ということで導入を、
(2)(3)以降で実際の理論やプログラムを説明していきたいと思います。


また今回投稿する内容は、授業等で学習したという訳ではなく全て独学で学んできた内容です。間違っているだろう箇所が随所に見受けられるかと思いますが温かい目で見ていただけたら幸いです。
よろしくお願いします。


# 強化学習(方策勾配法)ってなんぞ？
まず、強化学習について興味を持ったきっかけ「AlphaGo」について例に強化学習とは何か簡単に紹介します。

##AlphaGo
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351881/c49b39d5-a6ea-f5df-1564-4659d085a0bd.png)

ざっくり説明すると、(本当にざっくりです。専門家の方々すみません)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351881/61846385-f430-9b23-02c7-fb8b07a2cbab.png)

1. 囲碁環境から、現在の盤面を取得
2. その盤面を強化学習エージェントが読み込み
3. 打てる手の**確率分布**を出力
4. 確率分布から次の一手を確率的に決定

というのが盤面から打つ手を決定する一連の流れです。
> 打てる手の**確率分布**を出力

というのがミソで、今の盤面に応じて
次に打ったほうがいい、打ったら勝ちに近くなるような手は**確率を高く**、
打ったらピンチになってしまう手には**確率を低く**するような
"適切な"確率分布を出力することが目標です。

そうして、そんな強化学習エージェントの入出力を可能にしてくれるのが、
深層学習でおなじみ"ニューラルネットワーク"であり、
そのニューラルネットの出力する確率分布を"適切に"学習させるのが強化学習の役割になります。

だから二つ合わせて深層強化学習っていうんですね。

###Alpha Goのここがすごい
AlphaGoもとい深層強化学習は
「現在の環境に応じて**適切な**確率分布を学習する」アルゴリズムと言えますが
このアルゴリズムのすごいことは

- 「"定石"と呼ばれる人が発見してきた知識を使わずに学習している」
- 「実時間内に収束している」
- 「人間を遥かに凌駕する強さである」

ことなんですよね、、、
人が何十年、何百年と勝負をしながら発見してきた知識がいとも容易く敗れ去ってしまうほど、
囲碁において強靭な力を発揮しているのがこの深層強化学習なのです。

##　株式投資への応用
深層強化学習の詳しい理論等々はとりあえず置いておいて
「現在の環境に応じて**適切な**確率分布を学習する」というアルゴリズムが株価にも使えるのでは？と考えました。

人は株式売買において、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351881/5e4821a0-5025-4a65-02ef-82ccdc08ed27.png)


こんな風に過去から現在の値動きに応じて取引しますよね。
もちろん先々のことが分かっていないので失敗することもあります。


これを強化学習エージェントが、株価を読み取って
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351881/a6fa6367-b6c0-20a9-abcc-c480c7ede34d.png)

という風に、確率に変換して取引することは可能そうじゃないですか？

株価をピンポイントで当てなくても、次の時点での売買の確率を求めることが出来れば
お金を儲けることは十分に可能です。

従って
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351881/09361232-af3a-5341-3bf2-0ce39aa82c10.png)

ということが、今回の目標であり、プログラムの中身でもあります。


# 結果について
結果が悪かったら読んでもらう意味がなくなってしまうので先に出しておきます。
しかし説明不足な点が大いにあることも承知しております。詳細な結果や手法に関しては後日投稿しますので、今はこの強化学習手法でも確率は収束し、人間を凌駕しているかどうかは置いておいて、ある程度の利益が出せるのかな？程度に考えていただければと思います。

学習データ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351881/5d88e6b1-3f80-5230-8c72-f83e3f3ceb41.png)

学習の様子↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351881/9362c041-722c-521d-a1a2-ba14ddd152c2.png)

- 青色の線がニューラルネットワークの誤差関数の値です。
    - 0に近づくほど確率が収束していることが分かります。
- オレンジ色の線が学習期間における５０日間の間に得られた平均利益です。

step数を重ねるごとに平均利益が上昇していますね。

売買に関しては、
- 「買いポジションをとる」
- 「売りポジションをとる(空売り)」
- 「解消する、またはポジションを持たない」
の3つの出力を用意しており、1単位の日経平均株価を必ず購入(売却)出来る前提のもと、1単位を買ったり売ったりさせている状況です。





- 具体的な出力の設計
- ニューラルネットワークそのものの構造
- 売買ルール
- 強化学習アルゴリズム
- 実際のプログラム
- 詳細な結果(テスト期間の結果を含む)


に関しては後日投稿していきたいと思います。


長い投稿になるかもしれませんが、どうかお付き合いください。
よろしくお願いします。
Vue.jsならPugとStylusが良い

「vue.js」での「pug」と「stylus」は相性が良いです。

#インストール

```sh
$ npm install -D pug
$ npm install -D pug-loader
$ npm install -D stylus
$ npm install -D stylus-loader
```

#ファイル準備
`/stylus/_reset.styl`
`/stylus/_variable.styl`
`/stylus/_mixin.styl`
元々あるやつをファイル変換しておく。

#Component.vue
コンポーネントの中で使っていく

```vuejs

<template lang="pug"></template>
<style lang="stylus" scoped></style>
<script></script>
```

外部ファイルは先に読み込んでおく。コンポーネントからの
相対パスで指定する必要があると思います。ここはsassより不便。

```vuejs
<template lang="pug"></template>
<style lang="stylus" scoped>
@import "../../../../scss/_reset.styl"
@import "../../../../scss/_variable.styl"
@import "../../../../scss/_mixin.styl"
</style>
<script></script>
```

#中身を書いていく
実際に中身を書いてみる

```vuejs
<template lang="pug">
.component
  .wrapper
    .container
      .inner
        .item
          .text
            a.link ボタン
</template>
<style lang="stylus" scoped>
@import "../../../../scss/_reset.styl"
@import "../../../../scss/_variable.styl"
@import "../../../../scss/_mixin.styl"
.component
  component()  //mixinを読み込む
  margin 0
  .wrapper
    wrapper()  //mixinを読み込む
    margin 0
    .container
      container()  //mixinを読み込む
      width $default
      .inner
        inner()  //mixinを読み込む
        margin-bottom 0
        .item
          item()  //mixinを読み込む
          display flex
          jusitify-content space-between
          .text
            text()  //mixinを読み込む
            font-size $normal
            a.link
              link()  //mixinを読み込む
              color $link
</style>
<script></script>
```

どうですか？
`_variable`と`_mixin`から呼び出して使って書いても
めっちゃ書きやすくないですか？`{:};@include`書かなくて良いんです。

以上です。
VSCodeだけでSSH接続して作業できるようにするまで

VSCodeのRemote Developmentで外部サーバに接続しようとして色々苦戦したので備忘録をば．

VSCodeが便利すぎてベンジョンソンになったわね・・・:muscle_tone3:

#おさわり

[Remote Development](https://code.visualstudio.com/docs/remote/remote-overview)は，VSCodeのプラグインでリモートSSH，WSL，コンテナの機能を内包している…らしい．

外部サーバのファイルを触るのにTeraTerm入れるのも面倒くさすぎるので，VSCodeで諸々出来たら楽じゃん？って思ったら割とドツボにハマってしまった．

#ながれ

ひとまずVSCodeに入れなきゃはじまらんので，Extensionsから導入．

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418810/1a812d1f-4c1d-d0d3-4c51-033cabe08678.png)

すると左のアクティビティバーにRemoteの項目が追加される．

今回はSSHを使うので「SSH Targets」を選択する．

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418810/96b4a8fc-1d65-1d0b-39ed-7d50b30b313c.png)

そこのConfigureから.sshにある接続先のConfigにアクセスすることが出来る（無ければ作ってくれる）

configに必要な情報を記入していく

```configの記入例
Host host1
    HostName xxx.xxx.xxx.xxx
    Port x
    User xxxxxx
    IdentityFile ~/xxx
```

`Host : アクティビティバーで表示される名前を表す，識別できればなんでもいい`
`HostName : IPアドレス`
`Port : ポート番号`
`User : リモートに接続するためのUserID`
`IdentityFile : キー`

接続するためのパスフレーズは接続時に入力する．

そうするとアクティビティバーのSSH TARGETSに項目が追加される．

項目からConnect_to_Host_in_New_Windowで接続してみよう．

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418810/cd1e821d-d9b0-94db-01a8-57b0a4fc80e7.png)

でたわね．

パスフレーズを入力する．

![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418810/322f6401-4a85-b5e7-439b-c17662cd7957.png)

左下の緑の><マークが接続先のHostを表したら接続完了．

接続できると接続先のターミナルも開いてくれるし，
VSCodeで接続先のフォルダを開くことができる．

すばらしい．

#詰まったところ

最初はキーをppk形式で記述していたけれど，
読み取ってくれなかったので，pem形式のキーにしたら解決した．

後で調べたら，
ppkはPuTTY形式のキー，pemはOpenSSH形式のキーらしい．

そもそもPuTTY形式のキーはそのままOpenSSH対応ツールには適用できず，
OpenSSH対応のpemに変換する必要があるらしい．

鍵について大勉強不足だったことが原因ってことやんなあ・・・

#〆

ネットワーク周りを勉強しなければというお気持ちにさせられてしまった

しかし結果的にリモート接続は成功したのでヨシ！
Markdown形式のファイルをGoogle docs形式に変換

### はじめに

私はマークダウンやプレインテキストで文書を書くのが好きです。マークダウンで記述すると、体裁だけでなく章や節などの文書構造も記述できて、あとで色々都合が良いことが多いです。

しかし、関係者と一緒に文書を編集しようとすると、Google docsの文書共同編集機能には勝てません。そのため、私が起案する文書は一度マークダウン形式で記述してから、Google drive上でGoogle docs形式に変換して共有するようにしています。こうすることで、文書構造をGoogle docs形式のファイルでも維持することができます。

この記事ではその手順を紹介します。



### この記事で分かること。

* 変換に使っているツール

* 変換手順



### 前提とする環境

* Ubuntu Linux 18.04 LTS
* WindowsやMACでも簡単に実行できますが、本記事では取り扱いません。



### 使っているツールのインストール

最初に一通りのツールを準備します。ツールはtyporaとpandocです。



##### Typoraのインストール

Typoraはマークダウンファイルを編集するためのエディタで、非常に人気があります。Typoraの公式サイトは[こちら](https://typora.io/)になります。Windows版, MAC版, iOS版, Linux版があります。Android版がないのは残念。MACとWindowsはここからインストールパッケージをダウンロードしてインストールします。Windows版のインストール例は[こちら](https://nekotokoban.com/blog/typora)、MAC版のインストール例は[こちら(Homebrew)](https://karaage.hatenadiary.jp/entry/2018/12/28/073000)です。ここではUbuntu 18.04LTS上に[公式サイトで紹介している方法](https://support.typora.io/Typora-on-Linux/)でインストールします。



以下のコマンドを実行します。行頭が#で始まる行はコメントなので、入力しても無視されます。

```bash
# or use
# sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys BA300B7755AFCFAE
wget -qO - https://typora.io/linux/public-key.asc | sudo apt-key add -

# add Typora's repository
sudo add-apt-repository 'deb https://typora.io/linux ./'
sudo apt-get update

# install typora
sudo apt-get install typora
```

このあと、`typora`と入力すれば、typoraエディタを起動できます。



##### Pandocのインストール

Pandocはファイル形式変換ツールです。単独でも利用できますが、本記事ではTyporaから呼び出して利用します。Pandocのインストールは[こちらの記事](https://qiita.com/sky_y/items/3c5c46ebd319490907e8)が参考になります。Ubuntuの場合、aptでも入りますが、2020年2月15日現在でバージョンが1.19でだいぶ古いため、パッケージをダウンロードしてインストールすることにします。



最初に[Pandocのgithubサイト](https://github.com/jgm/pandoc/releases)を見て最新バージョンを確認します。2020年2月15日現在では2.9.1.1が最新でした。そのバージョン番号を用い、以下のコマンドを実行してインストールします。

```bash
wget https://github.com/jgm/pandoc/releases/download/2.9.1.1/pandoc-2.9.1.1-1-amd64.deb
sudo dpkg -i pandoc-2.9.1.1-1-amd64.deb
```



### 変換手順

変換手順としては、Typoraでマークダウンファイルを読み込み、編集して、Microsoft docx形式にエクスポートします。そのファイルをGoogle driveにアップロードして、Google docsで読み込んでGoogle docs形式で保存する、という手順になります。

##### マークダウン形式ファイルをMicrosoft docx形式で保存

編集中のTyporaのウィンドウで[ファイル]→[エクスポート]→[Word (.docx)]を選択します。

![md2docx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519489/da5d9e25-ebc7-9965-ef1c-2ae402e9dc30.png)

ファイルを置くフォルダの選択ウィンドウが現れますので、適切な場所を選んでファイルを保存します。



##### docx形式からGoogle docs形式に変換

ウェブブラウザで[Google drive](https://drive.google.com/)を開き、そこに先ほど作成したdocxファイルをドラッグ&ドロップします。ドロップ直後は以下のような感じになります。

![dropDocx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519489/63f6831e-56d4-326d-1451-e959781c9a0c.png)

ここで、ドロップしたファイルをダブルクリックで編集モードに入り、「Googleドキュメントとして保存」を選択するとGoogle docs形式のファイルに変換できます。

![docx2docs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519489/40209169-8ffe-6441-5932-62d563ca453c.png)

変換されたGoogle docs形式のファイルは数のようにタイトルや構造などが記録されていることがわかります。

![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519489/02873f4e-790e-8f1d-13f1-1cb71c35c0a3.png)

以上です。
Minecraft BE NukkitServerの建て方

#MinecraftBE NukkitをWin10で建てる
NukkitサーバーをWindows10で建てたのでまとめました。
###環境
| Windows 10 Home Edition 64bit |
|:-----------------|
| Minecraft Bedrock Edition v1.14. |

#1.JAVAの確認＆インストール
❶コマンドプロントかWindows Powershellを開きます。
❷立ち上がったら次のコマンドを打ちます

```powershell
java -version
```

バージョン等が出てきたらJAVAはインストールされているため
**2**へ進みます。
バージョン等が出てこなかった場合は❸へ。
####JAVAのダウンロード
❸[ここ](https://www.java.com/ja/download/win10.jsp)のサイトへ行きJAVAをダウンロードします。
❹ダウンロードファイルにあるインストーラーをクリックし、JAVAをインストールします。
JAVAのインストールはこれで完了です。

#2.Nukkitのダウンロード
❶[ここ](https://ci.nukkitx.com/job/NukkitX/job/Nukkit/job/master/lastSuccessfulBuild/artifact/target/nukkit-1.0-SNAPSHOT.jar)のサイトへアクセスします
``nukkit-1.0-SNAPSHOT.jar``というファイルがダウンロードされます。


#3.Nukkitサーバーの準備
❶どこでも大丈夫なので、サーバー用のファイルを作成します。(ここではデスクトップとします)
❷その中に**2**でダウンロードしたファイルをコピー又は移動させます。
❸ファイル内で右クリックし、新しいテキストファイルを作成したら名前を **start.bat** とします。(名前はお好きな名前で大丈夫です。拡張子は**.bat**又は**.cmd**にしてください)
❹作成したファイルをメモ帳などのテキストエディタで開き次の文章を書き、
上書き保存します。これで起動ファイルの完成です。

```
java -jar nukkit-1.0-SNAPSHOT.jar
```

(**nukkit-1.0-SNAPSHOT.jar**はnukkitのVersionが変わった場合、変更する必要があります)

#4.サーバーの起動＆停止
❶**3**で作った起動ファイルをダブルクリックし、立ち上がったら``jpn``を打ちます。
するとサーバーが起動します。
❷サーバーを停止させたい場合は、stopとコマンドを打つことでサーバーが停止します。

#あとがき
自分はNukkitの方が簡単に建てれたなと感じました。
簡単に建てれるのでみなさんも建ててみてはいかがでしょうか。
Atom でC++競プロ環境

競プロを始めようかなと思い、[APG4b](https://atcoder.jp/contests/apg4b)に取り組んでいたのですが、そろそろブラウザのエディタがきつくなってきたので普段使っているAtomで競プロ環境構築しました。

## 目標
- gcc環境構築、Atom上でコンパイルと実行を行う
- `#include <bits/stdc++.h>`を使えるようにする
- linterをいれる

## 環境
- macOS Catalina(10.15.3)
    - Homebrewが入っている前提です。
- Atom

## 構築手順
### gcc環境
今回は、APG4bでも出てくる`#include \<bits/stdc++.h>`を使うため、gccをインストールします。
詳しくは[こちら](https://qiita.com/EngTks/items/ffa2a7b4d264e7a052c6)にまとまっています。

#### 1. gccをインストール
Homebrewを使ってコンパイラをインストールします。

```terminal
$ brew install gcc
```

#### 2. pathを通す
macには今

- /usr/bin/g++ (デフォルト)
- /usr/local/bin/g++-9 (今インストールした方)

の2つが存在していて、このままだと上の方が呼び出されます。

```terminal
$ which g++
/usr/bin/g++
```

これをgccに変えてあげるためpathを通します。

```terminal
$ ln -s /usr/local/bin/g++-9 /usr/local/bin/g++
```
これでシンボリックリンクを作成し、新しいターミナルの画面でもう一度確認すると

```terminal
$ which g++
/usr/local/bin/g++
```
となります。

### Atomの設定
#### 1. パッケージのインストール
- gpp-compiler 
- linter-gcc (構文解析ツール)

この二つをpackage管理画面からインストール。

#### 2. gcc-compilerの設定
「GCC Executable Path」の欄に `usr/local/bin/g++`と記入。
これでF5キーを押すとg++でコンパイルしてくれるようになる。

#### 3. linter-gccの設定
同じように「GCC Executable Path」の欄に `usr/local/bin/g++`と記入。
いい感じに構文解析して、エラーを出してくれる。

このままだとエラーが出てしまうので
「C++flag」のところに`-fsyntax-only`を追加。
(構文解析エラーのみチェックというオプションです。)

### 最後に
これで最低限の環境は整いましたが適宜アップデートしていきたいと思います。

## 参考
https://qiita.com/EngTks/items/ffa2a7b4d264e7a052c6
https://qiita.com/mendako_muscat/items/57e54c8dd97436b0ed06
https://www.smartbowwow.com/2018/08/atomclinter-gccatom-beutify.html
Salome-Meca 2018を用いた線形熱応力解析（SSLV）

静的に熱応力を計算します。
温度は均一に分布しているものとして、線形の弾性解析を行います。 

この資料は[オープンCAE勉強会＠岐阜](http://opencae.gifu-nct.ac.jp/pukiwiki/index.php?OpenCAE%20Users%20Wiki)で公開されているFS氏ご提供の「[SALOME-Mecaの使用法解説](http://opencae.gifu-nct.ac.jp/pukiwiki/index.php?SALOME-Meca%A4%CE%BB%C8%CD%D1%CB%A1%B2%F2%C0%E2)：5.0 線形熱応力(1)、5.1 線形熱応力(2)」をSalome-Meca 2018（Code_Aster 13.6）のAsterStudyモジュールを用いて実行しました。

# ジオメトリ

幅10mm×高さ20mm×長さ100mmの直方体

# 材料

- ヤング率：E=70,600MPa
- ポアソン比：$\nu$=0.345
- 線膨張係数：$\alpha$=2.3e-5

# 拘束条件と荷重条件

20℃から120℃の温度変化を与えます。

|境界条件|トポロジ|境界条件の種類|条件|
|:--|:--|:--|:--|
|fix0<br>fix100|面|変位|DX=DY=DZ=0|

![bar-true-mesh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201403/98634bb3-5055-db2e-b5d8-72fa11655edb.png)


# 解析結果

変形図（×100倍表示）を示します。

![bar-trure-displacemet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201403/c039f2c5-aa79-a336-523e-f7ac1f586138.png)

# コマンドファイル

```python:bar-true.comm
DEBUT(LANG='EN')

mesh = LIRE_MAILLAGE(FORMAT='MED',
                     UNITE=20)

mesh = MODI_MAILLAGE(reuse=mesh,
                     MAILLAGE=mesh,
                     ORIE_PEAU_3D=_F(GROUP_MA=('fix100', 'fix0')))

model = AFFE_MODELE(AFFE=_F(MODELISATION=('3D', ),
                            PHENOMENE='MECANIQUE',
                            TOUT='OUI'),
                    MAILLAGE=mesh)

Aluminum = DEFI_MATERIAU(ELAS=_F(ALPHA=2.3e-05,
                                 E=70600.0,
                                 NU=0.345))

load = AFFE_CHAR_MECA(DDL_IMPO=_F(DX=0.0,
                                  DY=0.0,
                                  DZ=0.0,
                                  GROUP_MA=('fix100', 'fix0')),
                      MODELE=model)

tempS = CREA_CHAMP(AFFE=_F(NOM_CMP=('TEMP', ),
                           TOUT='OUI',
                           VALE=(120.0, )),
                   MODELE=model,
                   OPERATION='AFFE',
                   TYPE_CHAM='NOEU_TEMP_R')

fieldmat = AFFE_MATERIAU(AFFE=_F(MATER=(Aluminum, ),
                                 TOUT='OUI'),
                         AFFE_VARC=_F(CHAM_GD=tempS,
                                      NOM_VARC='TEMP',
                                      TOUT='OUI',
                                      VALE_REF=20.0),
                         MAILLAGE=mesh)

reslin = MECA_STATIQUE(CHAM_MATER=fieldmat,
                       EXCIT=_F(CHARGE=load),
                       MODELE=model)

reslin = CALC_CHAMP(reuse=reslin,
                    CONTRAINTE=('SIGM_ELNO', 'SIGM_NOEU'),
                    CRITERES=('SIEQ_ELNO', 'SIEQ_NOEU'),
                    RESULTAT=reslin)

IMPR_RESU(FORMAT='MED',
          RESU=_F(NOM_CHAM=('SIGM_NOEU', 'SIEQ_NOEU', 'DEPL'),
                  RESULTAT=reslin),
          UNITE=80)

FIN()
```
Minikube MemoryとCPUを変更して起動する

例: `メモリ: 4GB`, `CPU: 12コア`に設定して起動したい場合

```bash
minikube start --memory='4g' --cpus=12
😄  minikube v1.6.2 on Darwin 10.15.2
✨  Automatically selected the 'hyperkit' driver (alternates: [])
🔥  Creating hyperkit VM (CPUs=12, Memory=4000MB, Disk=20000MB) ...
```


`minikube start --help` で起動時のオプションを見ることができる。

```bash
minikube start --help | grep memory
      --memory='2000mb': Amount of RAM allocated to the minikube VM (format: <number>[<unit>], where unit = b, k, m or g).
minikube start --help | grep cpu
      --cpus=2: Number of CPUs allocated to the minikube VM.

```

すでにclusterを構築している時はオプションつけて起動しても適用されないので注意。  
`minikube delete`してから起動させること。