OmniAICreator/Qiita-1.07M huggingface dataset:
[メモ]Laravel Echoでbroadcasting/auth 404 NotFound

Laravel5.5で公式通りにEchoをインスタンス化したらエラー
broadcasting/auth 404 NotFound
出るし、Pusherからうけとれなかった。


<img width="831" alt="スクリーンショット 2019-07-04 20.30.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174757/120d26f5-20ef-fa2b-2e7e-29198dad6287.png">

結局`authEndpoint:`なるものを仕込んでうまくいった
`http://localhost`にアクセスしたときにlaravelプロジェクトを参照するようになっていれば躓かなかった模様


```bootstrap.js

window.Echo = new Echo({
    authEndpoint: 'http://【ドメインlocalhostとか】/【LaravelProject名】/public/broadcasting/auth',
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    cluster: 'eu',
    encrypted: true
});

```
AWSマネジメントコンソールの色をアカウントによって変更するChrome拡張機能「AWS COLOR CHANGER」を作った(実装編)

# はじめに
先日、AWSマネジメントコンソールの色をアカウントによって変更するChrome拡張機能を作成してリリースしました。
機能や使い方はこちらの記事をご覧下さい。
[AWSマネジメントコンソールの色をアカウントによって変更するChrome拡張機能「AWS COLOR CHANGER」を作った](https://qiita.com/Shi-nakaya/items/a9b20f85ab2de7b94a40)

# 実装詳細
オプション画面はjqueryを使用して値を取得しています。
input要素を適当に配置しただけのHTMLですので特記する事はありません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/8c86e848-bc29-098b-2731-f3c55bbc4830.png" width=40%>
AWSのサイトで起動するスクリプトはJavaScriptです。

ソースはこちらに
https://github.com/sh-nakayama/AWS_COLOR_CHANGER

# 苦労した点
オプション画面で入力した値を保存して、AWSのマネコンのサイトで起動するJavaScriptに読み込ませるのに苦労しました。
最初はオプション画面で入力した値をlocalstrageに保存していましたが、
localStorageはページごとに保存するデータが分かれている事が判明、読み書きは同じ場所でないと値が共有できません。つまりAWSのマネコンのサイトで起動するJavaScriptではlocalStorageに保存した値が読めません。
回避方法はあるみたいですが、
https://mae.chab.in/archives/2861

# 苦労した点の対応
今回はchrome.storageを使用することで対応しました。

下記の記事を参考に作成しました。
https://easyramble.com/chrome-storage-set-and-get.html
https://qiita.com/shimutaya/items/e8835d6ce794ef6c73cf

# 終わりに
意外と簡単にリリースまでこぎつけました。
実は最も苦労した点はmanifestファイルかもしれません。スペルミスや、インデントミスでかなり時間を取られました:sweat_smile:

# 参考にさせていただいた記事
https://qiita.com/otchy/items/e29bf2e377c5b7ddc2f7
https://qiita.com/miztch/items/67e69421c33bf10b7b0a
初めてのRuby3　〜クラスとインスタンス、命名規則〜

#クラスとインスタンス
:sunny:クラス : オブジェクトの種類を表すもの、型（クッキーの型）
　　　　　　　　　eg:)Arrayオブジェクト、stringオブジェクト


:sunny:インスタンス : クラスから作られたもの（クッキー:cookie:）
　　　　　　　　　eg:)[1,2,3],  "name"


##newメソッド
:star:new : クラスからインスタンスオブジェクトを作るメソッド（クッキーの型でクッキー:cookie:を作る）
eg:) Array.new: []
     String.new: ""
（:writing_hand_tone1:メソッド＝お仕事）

:loudspeaker:インスタンスオブジェクトは直接作ることも可能
eg:) [1,2,3]  , "name"

####クラスの作り方

```
class クラス名（必ず一文字目は大文字）
　クラスの定義
end
```

#####作ったクラスをnewする
```
class Recipe
end

recipe = Recipe.new
```

#####classにメソッドを作る
:necktie:メソッドを作ってRecipeクラスが仕事をできるようにしてあげる

```
class Recipe
 def title
   "cheese cake"
 end
end

recipe = Recipe.new
recipe.title => "cheese cake"
```

タイトルを返せるようになった:point_up_tone1:

###インスタンス変数
:star:インスタンス変数 : インスタンスがある間ずっと使える変数。頭に@をつける。
１、インスタンスオブジェクト（クッキー:cookie:）ごとにインスタンス変数を持っている。
２、オブジェクトの外から直接アクセスできない。アクセスするときはそのオブジェクトのメソッドを通す。


:helmet_with_cross:変数のスコープ（有効範囲）
あるメゾット内で作成した変数はそのメソッドの中でしか有効でない。
この有効範囲を広げるためにインスタンス変数を使う。

```
❶
class Recipe

 def title = (t)
   @title = t
 end
 
 def title = (t)
   @title 
 end
end
```

```
recipe = Recipe.new
recipe.title = "cheese cake"
p recipe title => "cheese cake"
```

❶はよく使われるのでattr_accessorという書き方が用意されている
書き方 : attr_accessor インスタンス変数のシンボル

書き換えるとこうなる↓

```
❶
class Recipe
　attr_accessor :title
end
```

##命名規則
:sunny:クラス名 : 大文字始まり。２語以上は単語境界文字を大文字にする（Camel Case):camel:

:sunny:変数名 : 小文字のみ。2語以上は_でつなぐ。(Snake Case):snake:

##initializeメゾット
:sunny:initialize : newメゾットが呼ばれた時に自動で実行するメソッド
newメソッドに引数を渡すとinitializeメソッドで受け取ることができる

```
class Recipe 
 attr_accessor :title, :author
 def initialize (title, author)
  @title = title
  @author = author
 end
end

recipe = Recipe.new("cheese cake", "chef")
p recipe.title => "cheese cake"
p recipe.author => "chef"
```

##インスタンスメソッドとクラスメソッド
####:sunny:インスタンスメソッド
クラスの中で定義したメソッド。インスタンス（クッキー:cookie:）に対して呼ぶことができる。
:writing_hand_tone1:（記法）クラス名#インスタンスメソッド名


####:sunny:クラスメソッド
クラス（クッキーの型）に対して呼び出す。
self.メソッド名で定義。
:writing_hand_tone1:（記法）クラス名.クラスメソッド名
Google App ScriptでDriveAppを使わずに、自動でファイルダウンロードする機能を作った

# 概要
GASでJsonのダウンロードができれば良いなと思っていたが、調べていると大体、一旦Google Driveに入れろということが書いてありました。
しかし、いろいろ面倒なのでなにか他に手段が無いかと調べていたところ、GASでHTMLを表示できるということなので、DataURL使えばいいじゃんと思ったので、やってみました。
GASの設定など、TypeScriptでの環境構築などは他でいろいろ紹介されていると思うので、そちらを参照してください。
今回紹介するのは単純にダウンロード部分です。

## GAS上でのプロジェクトの構成
以下のようになっているとします。

```
.
├── json.gas
├── main.gas
└── download.html
```

## 中身

HTMLを表示するための関数とJsonを作成する用の関数です。
webpackでトランスパイルされて、json.gas になる想定です。そのため、globalで定義します。

```ts:json.ts
declare let global: any;

global.body = "" // HTML上で参照される変数

function() { // この関数がJson文字列を作成すると仮定する。この中でspread sheetを読み込むでもよしdocumentを読み込むでもよし
    return JSON.stringify({
        firstName: "john",
        lastName: "satoh"
    }, null, 2);
}

function jsonDownloadDialog() {
    global.body = createJson();
    const name = "jsonの中身"; // ダイアログの名前

    var output = HtmlService.createTemplateFromFile('download'); //同じディレクトリにあるHTMLを参照している
    var html = output.evaluate().setHeight(420).setWidth(600);
    var ui = SpreadsheetApp.getUi();

    ui.showModalDialog(html, name);
}
global.jsonDownloadDialog = jsonDownloadDialog;
```

こちらは「JSON」→「ダウンロード」というメニューを用意するためのスクリプトです。
こちらはwebpackに含まれない想定です。（globalに定義しても呼ばれなかったので別にしました。

```main.js
function onOpen() {
    var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
    var entries = [{
        name : "ダウンロード",
        functionName : "jsonDownloadDialog" // globalに定義されているjson.gasの関数を参照している
    }];
    spreadsheet.addMenu("JSON", entries);
}
```

こちら作成したJsonを表示し、さらに自動的にファイルをダウンロードするスクリプトが入っているHTMLです。
`#json`の中身をFileとしてObjectURLにしている感じです。

```download.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <base target="_top">
    <script>
        window.addEventListener('load', function() {
            console.log(document.querySelector("#json").textContent)
            var link = document.createElement('a');
            link.download = 'data.json'; // ファイル名
            var blob = new Blob([document.querySelector("#json").textContent], {type: 'text/plain'});
            link.href = window.URL.createObjectURL(blob);
            link.text = "もう一回ダウンロード";
            document.querySelector("#download_area").appendChild(link);
            link.click(); // aタグを叩く
        });
    </script>
</head>
<body>
    <pre id="json"><?
output.append(body);
        ?></pre>
    <div id="download_area">
    </div>
</body>
</html>
```

## 出来上がり
![スクリーンショット 2019-07-04 19.37.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75299/df378661-9bb5-5e0c-3799-579db1ed9f72.png)

## まとめ
GAS面白い。
claspでhtmlがあげられるのを知りませんでしたし、メニューを追加できるのも知りませんでした。。。
これなら本当に小さいアプリケーションは作れてしまいますね。。。
pandasのマルチカラムをいい感じに処理するtips

# 概要
pandasでマルチカラムがひょっこり出てくると焦りませんか?
僕は焦ります .
そんなマルチカラムに対して「えいや!」とカラム名をべた書きで突っ込んでいませんか?
僕はそんなことしていました.
そんな僕が贈る,マルチカラムをいい感じに処理してフラット化するためのtipsです.

# やってみる

まずは対象のDataFrameを適当に作ります

```python

import pandas as pd

df_score = pd.DataFrame(
    {
        "name": ["hoge", "hoge", "fuga", "piyo", "hoge", "piyo", "fuga"],
        "score": [30, 35, 67, 90, 20, 70, 20],
    }
)

```
こんなDataFrameが作られます

<img width="117" alt="スクリーンショット 2019-07-04 19.18.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139991/73adde6d-8be9-db73-745f-43cac99d5609.png">

マルチカラムが作られるのはやっぱり`groupby`して統計特徴量を作ったときですね. ではそれを行います.

```python
# nameごとにscoreの様々な統計特徴量を計算する
agg = {"score": ["count", "max", "min", "mean", "std"]}
df_agg = df_score.groupby("name").agg(agg)

```

するとこんな`df_agg`はこんなDataFrameになります.

<img width="324" alt="スクリーンショット 2019-07-04 19.21.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139991/60d95f4c-a8d2-f332-9e3a-b3ec3fad56c3.png">

マルチカラムが出てきた!
見てみるとこんな感じです.

```python
print(df_agg.columns)

# 以下出力
# MultiIndex(levels=[['score'], ['count', 'max', 'min', 'mean', 'std']],
#           codes=[[0, 0, 0, 0, 0], [0, 1, 2, 3, 4]])
```

さあ, こいつをなんとかします! と言っても覚えておくのはひとつだけ.

# これだけ覚える!
**columnsのvaluesにアクセスする!**
実際アクセスしてみると...

```python
print(df_agg.columns.values)

# 以下出力
# array([('score', 'count'), ('score', 'max'), ('score', 'min'),
#       ('score', 'mean'), ('score', 'std')], dtype=object)
```
なんだか処理しやすそうな形になりましたね.
あとは煮るなり焼くなりしてもらって大丈夫です.

# カラムをスネークケース(もしくはキャメルケースにしたい)
さらに丁寧にマルチカラムをスネークケース, もしくはキャメルケースにする関数をメモしておきます.

```python
def get_converted_multi_columns(df, *, to_snake_case=True):
    if to_snake_case:
        return [col[0] + '_' + col[1] for col in df.columns.values]
    else:
        return [col[0] + col[1].capitalize() for col in df.columns.values]
```

基本的にはスネークケースにしようってやつです.キャメルケースにしたかったら明示的に引数に`to_snake_case=False`を指定してください.
使ってみるとこんな感じです.

```python
print(get_converted_multi_columns(df_agg))

# 以下出力
# ['score_count', 'score_max', 'score_min', 'score_mean', 'score_std']
```

```python
print(get_converted_multi_columns(df_agg, to_snake_case=False))

# 以下出力
# ['scoreCount', 'scoreMax', 'scoreMin', 'scoreMean', 'scoreStd']
```

いい感じで処理できていますね.

# まとめ
- マルチカラムには`df.columns.values`でアクセスすると処理しやすい形を得られるよ
- このトピックをスタックしておくと便利かもしれないよ

まとめが簡単すぎて媚びちゃいました.
いいねもらえたら泣いて喜びます.
よきpandasライフを〜
社内PCでAnacondaの仮想環境が作れない時に考えること（Proxy)

#はじめに
社内PCにAnacondaを入れて、仮想環境を作ろうとしたものの、
何故か環境が作れない！
という状況に陥った時の解決法です。
原因がわかってしまえば「なんだ、串刺さってるの忘れてた」で済みますが、
当時は「家ではできるのになぜ会社ではできないんだ」と四苦八苦した覚えがあります。一度設定すればもう触ることはないですが、社内でAnaconda, Miniconda使用者が増えた時のことを想定し、備忘録として残します。
Windows環境を想定しています。


##確認
Anacondaで仮想環境を作ろうとCreateを押しても作られない。そもそもpipが通らない。
そんな時はプロキシ設定されてないか疑いましょう。
手っ取り早いのはIEのインターネットオプションを確認することです。

IE立ち上げ⇒歯車⇒インターネットオプション⇒接続タブ⇒LANの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/81a6e0ca-8f60-eaef-933b-a26762acf3a9.png)

アドレス・ポートが記載されている場合もありますし、スクリプトを使用してい場合もあります。
スクリプトの場合は、そのファイル or URLを見に行けばアドレス・ポートが判明すると思います。

##Anaconda（Miniconda）のプロキシ対応
Anacondaのルートディレクトリに.condarcを作成します。
ルートディレクトリは通常```C:\Users\[ユーザー名]\Anaconda3```
もしくは```C:\ProgramData\Anaconda3```と思います。
Anaconda Navigatorの起動ファイルがある場所です。
それでもわからない場合は、コマンドプロンプト上で
```conda config --show```と打ち込んで出てくる

```
root_prefiix：***
```
　の***部です。

次にこのルートディレクトリに適当なテキストファイルを作成します。
ここでは便宜上a.txtとします。
*いきなり.condarcファイルは作れないのでリネームします。

a.txtの中身を以下のようにします。

```
proxy_servers:
    http: http://[プロキシアドレス]:[ポート番号]
    https: https://[プロキシアドレス]:[ポート番号]
    ex)http://255.255.255.255：8080
```
次にリネームします。
windowsマーク+Rでcmdと打ち込みコマンドプロンプトを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/7eb54d98-2efc-3253-4933-fb2e7ae626cc.png)

a.txtがあるディレクトリまで移動します。
cd を駆使してください。ここでは解説しません。
*```cd C:\Users\[ユーザー名]\Anaconda3``` と打ち込んで目的地へ

次に以下を打ち込みリネームします。

```
> ren a.txt .condarc
```

これで完了です。
プロンプト上で```conda config --show```を実行し、

```
proxy_servers:
    http: http://～
    https: https://～
```
と表示されていれば成功です。

##pipのプロキシ対応
Anacondaは環境構築の際やconda install、jupyter notebookの起動時など、
プロキシで弾かれる場面が多い一方、pipについては出番が少ないので以下のように
打ち込むのが手っ取り早いです。
設定ファイルを作成するのも良いですが、環境毎にpipが入るのでそれぞれ設定しないといけない（はず）です。

```
ex)
pip install tensorflow-gpu --proxy=[プロキシアドレス]:[ポート番号]
```


参考URL
https://qiita.com/ktknj/items/af6c0fea17adef514ba8
http://solasyndrome.blog.fc2.com/blog-entry-14.html
rails でflashメッセージを作成（toastrを使う）

#はじめに
忘れそうなのでメモしました。

#gemインストール
```rb

gem "toastr-rails"
```
```
$ bundle install
```
```js:assets/javascripts/application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require toastr #これを追加します。
//= require_tree .
```

```scss:assets/stylesheets/application.scss

@import "toastr"; #これを追加します。
```
もし、sassを使っていなければ、

```css:assets/stylesheets/application.css

*= require toastr
```
これで準備完了です。

使う前にちゃんと使えるかテストして見ます。
application.html.erbに以下のように追加します。

```erb:application.html.erb

<script type="text/javascript">
  toastr.success("hello")
</script>
```
これを追加してページにアクセスすると以下のようなアラートが右上に出現します。

<img width="1440" alt="スクリーンショット 2019-07-04 16.50.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348610/3c5430ec-b525-0351-d12a-e84b65e6527c.png">

色はこの４色みたいです。以下参考

```erb:application.html.erb

<script type="text/javascript">
  toastr.success("hello")
  toastr.warning("hello")
  toastr.error("hello")
  toastr.info("hello")
</script>
```
<img width="1440" alt="スクリーンショット 2019-07-04 18.22.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348610/53943d0d-92f1-316a-6958-8c8a7934d6a9.png">

#flashメッセージに適応する

まず、前提としてflashのシンボルは　:alert　と　：notice　の2つです。（deviseを使ってたのでその2つになりました）ホントは :error と :successのほうが都合がいいのですが。。。
flashメッセージがある時適宜flashを使いたいのでapplication.html.erbに記述します。

```erb:layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>InstagramClone</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>

  <body>
    <%= render 'layouts/header' if user_signed_in? %>
    <%= yield %>
    <%= render "layouts/footer" %>

<!--ここから下を追加しています。----------------------- -->
    <% if flash.any? %>
      <script type="text/javascript">
        <% flash.each do |key, value| %>
          <% key = "success" if key == "notice" %>
          <% key = "error" if key == "alert" %>
          toastr['<%= key %>']('<%= value %>');
        <% end %>
      </script>
    <% end %>
<!--ここまでです----------------------------------- -->
  </body>
</html>

```
まず、if flash.any?　flashがあるかないかを判定してます。その次に見た目が奇妙なのですが、
scriptタグでflashのeach分を囲ってます。

でtoastrで扱うメソッドが :info :success :error :warning　の４つです。しかし、flashのシンボルが :alert　と　:notice　になっているため、変換して上げる必要があります。
その記述が以下の２つになります。

<% key = "success" if key == "notice" %>
<% key = "error" if key == "alert" %>

:notice　を　:success　に　:alert　を　:error　に変換してます。
最後に値をtoastrに入れて終わりです。

#おまけ
こんな書き方も出来るみたいです。

```erb:layouts/application.html.erb

<% if flash.any? %>
  <script type="text/javascript">
    <% flash.each do |key, value| %>
      <% type = key.to_s.gsub('alert', 'error').gsub('notice', 'success') %>
      toastr.<%= type %>('<%= value %>')
    <% end %>
  </script>
<% end %>
vimtexにおいてmintedを使う時の設定

# はじめに
日頃からvimtexを使っているが、コードをレポートに記述する際`listings`というパッケージより`minted`というパッケージの方が綺麗にコードが載せられそうだったので、使おうと思った時ハマったことについてかく。

インストールなどについては[この記事](https://qiita.com/la_float/items/2884a4d80a54ffa89a34)が丁寧に書いてくれてるので省略します。

# minted VS listings
![listings_vs_minted.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234222/e0e8288e-813c-a16d-0b5d-71f16b98453a.png)

`minted`と`listings`の大きな違いは、`minted`は外部ライブラリを用いてシンタックスハイライトをするのに比べ、`listings`はtex内でハイライト作業を行う。
したがって、この2つのパッケージの差はこの違いによって生じる。

listingsはtex内でコンパイル・ハイライトを行うので簡単に行える上、ユーザ定義がしやすいというメリットがある。逆にいうと、ユーザが定義をしないとハイライトができないというデメリットがあるとも言える。

逆に、mintedは[Pygments](http://pygments.org/)というPythonのシンタックスハイライトライブラリを用いるので、ユーザが定義をせずとも綺麗にコードをハイライトしてくれる。
[言語](http://pygments.org/languages/)もほとんど対応しているのは嬉しい。
また、スタイルをいちいち記述する必要はなく、Pygmentsですでにある以下のスタイルを用いることができる。

```
['default', 'emacs', 'friendly', 'colorful', 'autumn', 'murphy', 'manni', 'monokai', 'perldoc', 'pastie', 'borland', 'trac', 'native', 'fruity', 'bw', 'vim', 'vs', 'tango', 'rrt', 'xcode', 'igor', 'paraiso-light', 'paraiso-dark', 'lovelace', 'algol', 'algol_nu', 'arduino', 'rainbow_dash', 'abap']
```

しかし、この外部のライブラリを読んでいるからこその問題が発生した。

# 問題

`vimtex`にて、

```latex

\usepackage{minted}
```
とすると

```vimscript

error| Package minted Error: You must invoke LaTeX with -shell-escape flag
```

と怒られてしまった。要は、外のライブラリを読みたいんだけど読めないということだった。
texは`-shell-escape`を許さない仕様になっているので、使えなかったっぽい... （セキュリティ的にも安全ではないので納得)

`latexmkrc`を書けば良いという記事をいくつか見つけたが、それもうまくいかず（というかあまり気にくわない）、[本家のレポジトリ](https://github.com/lervag/vimtex)の`issue`を見ていたらやはり多くの人がこの問題に突っかかっていた。

以下のように、`vimtex_compiler_latexmk`の`option`に`-shell-escape`を追加したところうまくいった：

```vim

  let g:vimtex_compiler_latexmk = {
        \ 'backend': 'nvim',
        \ 'background' : 0,
        \ 'build_dir' : '',
        \ 'continuous' : 1,
        \ 'options' : [
        \   '-pdfdvi',
        \   '-verbose',
        \   '-file-line-error',
        \   '-synctex=1',
        \   '-shell-escape',
        \   '-interaction=nonstopmode',
        \ ],
        \}
```

# 最後に

正直、`-shell-escape`を常に許していると怖いので、使わないときはコメントアウトしようかと思う

# 参考サイト
- https://tex.stackexchange.com/questions/389191/minted-vs-listings-pros-and-cons
- https://github.com/lervag/vimtex/issues/467
論文紹介-#4 PFLD: A Practical Facial Landmark Detector

## 論文紹介-#4 
[落合先生のフォーマット](https://www.slideshare.net/Ochyai/1-ftma15?ref=http://lafrenze.hatenablog.com/entry/2015/08/04/120205)を元に論文をまとめ紹介していく記事です。

今回は、CVPR2019の[PFLD: A Practical Facial Landmark Detector](https://arxiv.org/pdf/1902.10859.pdf)という論文を紹介します。
至らないところばかりなのでツッコミお待ちしてます！

## どんなもの？
モデルサイズ2.1MbでQualcomm ARM 845プロセッサで140fps以上のリアルタイム輪郭点検出モデル。
[PFLD 0.25Xモデルデモシステム](https://sites.google.com/view/xjguo/fld)

## 先行研究と比べてどこがすごい？
精度と速度のトレードオフだったところを、様々な精度改善手法の導入により、精度と速度両方をモバイルシステム上で稼働させても遜色ないレベルにまであげた。

## 技術や手法のキモはどこ？
輪郭点検出の課題として以下があった。
1, 一部隠れたりといった局所的な変更
2, 顔の向きや画像品質の問題
3, データの不均衡
4, モデルの効率性

この1,2,3を、幾何学的制約とデータ不均衡の懸念を考慮した新しい損失関数で解決した。
この損失関数は、推定したyaw, roll, pitchの偏差角が正解より大きいほどペナルティをかけ、データが少ない真正面以外の顔画像に対する学習を促進し、顔の向きなどにも対応する。

また、受容野を拡大し顔の全体的な構造をよりよく捉えるために、バックボーンネットにマルチスケール完全接続（MS-FC）レイヤを追加した。
また、バックボーンネットにMobileNetを使うことにより、モデルの効率性をあげ課題4を解決した。

そして、ランドマーク推定と回転情報推定(yaw, pitch, roll)を切り離し、標準顔からオイラー角を計算して学習させる補助サブネットを用意した。
<img width="593" alt="スクリーンショット 2019-07-04 19.02.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218202/f9a0940e-c752-b6df-10b3-c62adf1cebda.png">


## どうやって有効だと検証した？
300W（iBUG、LFPW、AFW、HELEN、およびXM2VTSを含む）およびAFLWをデータセットに、他の検出モデルと精度比較した。
Mobilenetのwidthパラメタを変えることで、0.25X, 1X, 1X+の３つのモデルを作成し比較検証した。
<img width="291" alt="スクリーンショット 2019-07-04 18.55.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218202/3f8b410b-7bca-8b00-e84b-68631633ba3a.png">
<img width="577" alt="スクリーンショット 2019-07-04 18.56.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218202/401941c6-03c5-30cc-8956-362069f50965.png">
<img width="284" alt="スクリーンショット 2019-07-04 18.56.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218202/65c3896f-3bbd-a4b4-177c-8954422d8251.png">
<img width="597" alt="スクリーンショット 2019-07-04 18.55.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218202/900d8bf4-ee02-26a0-cc68-704e07f9b606.png">

## 議論はある？
量子化によりさらにサイズ削減できる可能性
今は、yaw, roll, pitchのみを使っているが、他の幾何学的、構造的情報を使用すれば更に精度が上がるのでは

## 次に読むべき論文は？
[Style Aggregated Network for Facial Landmark Detection](https://arxiv.org/pdf/1803.04108.pdf)
[Look at Boundary: A Boundary-Aware Face Alignment Algorithm](https://arxiv.org/pdf/1805.10483.pdf)
[Mobilenets:      Efficient   convolutional   neural   net-works   for   mobile   vision   applications.](https://arxiv.org/pdf/1704.04861.pdf)
[Shufflenet: An  extremely  efficient  convolutional  neural  network for mobile devices](https://arxiv.org/pdf/1707.01083.pdf)
[Disentangling 3d pose in a dendritic cnn for unconstrained 2d face alignment](https://arxiv.org/pdf/1802.06713.pdf)
LaravelでStorageを使ったファイルおよびディレクトリの操作をまとめてみた

# はじめに
Laravelでファイルを取り扱った個人開発を行っている際にファイル保存の方法を調べた際に気になったため、調べてまとめました。
駅に貼られているチラシを見るように流し見していただければ幸いです。

# Storageとは？
LaravelではFlysystem PHPパッケージによって提供されているファイルシステムを抽象化させたものを使えるように設定されている。
設定ファイルは`conofig/filesystems.php`にあり、環境によって保存先のディレクトリが分けられている。らしい。　(引用：参考文献1)

今回はそんな`Storage`を使ったファイルおよびディレクトリの操作方法をまとめてみる。

# 基本的な書式
`Storage`は`Facades`を拡張して使われるもの。
なので書式は基本的に

```php
 Storage::◯◯('hoge', 'fuga');
```
になる。
# ファイル関連
## ファイル保存
#### Storage::put
```php
Storage::put('file_name', $file);
```
で`$fileを'file_name'という名前で保存`することができます。

#### Storage::putFile
```php
Storage::putFile('dir', $file);
```
で`$fileを'dir'に保存`することができます。`Storage::putFile`では
ファイル名は自動で設定されます。
また、

```php
Storage::putFile('dir', $file, 'public');
```
とすることで`$fileを一般公開したい`という意思を伝えることができます。

#### Storage::putFileAs
```php
Storage::putFileAs('dir', $file, 'file_name');
```
で`$fileを'dir'に'file_name'という名前で保存`することができます。`Storage::putFileAs`では自分でファイル名は設定することができます。

## ファイル書き込み
#### Storage::prepend
```php
Storage::prepend('file_name', 'hogegeeeee');
```
で`file_nameの先頭にhogegeeeeeを書き込む`ことができます。

#### Storage::append
```php
Storage::append('file_name', 'fugagaaaaaa');
```
で`file_nameの末尾にfugagaaaaaaを書き込む`ことができます。

## ファイルのコピー
#### Storage::copy
```php
Storage::copy('old dir/file_name', 'new dir/file_name');
```
で`old dirにあるfile_nameをnew dirにコピー`することができます。

## ファイルの移動
#### Storage::move

```php
Storage::move('old dir/file_name', 'new dir/file_name');
```

で`old dirにあるfile_nameをnew dirに移動`することができます。
また、

```php
Storage::move('file_name', 'new_file_name');
```

で`file_nameの名前をnew_file_nameに変更`できます。

## ファイル削除

#### Storage::move

```php
Storage::delete('file_name');
```

で`file_nameを削除`することができます。
また、

```php
Storage::delete(['file_name', 'file_name2']);
```
で`file_nameとfile_name2を削除`することができます。

#ディレクトリ関連
## ディレクトリ内の全ファイルを取得
#### Storage::files

```php
Storage::files('dir');
```
で`dirの中の全ファイルを配列で返す`ことができます。

#### Storage::allFiles

```php
Storage::allFiles('dir');
```
で`dirの中のサブディレクトリの中も含めた全ファイルを配列で返す`ことができます。


## ディレクトリ内の全ディレクトリを取得
#### Storage::directories

```php
Storage::directories('dir');
```
で`dirの中の全ディレクトリを配列で返す`ことができます。

#### Storage::allFiles

```php
Storage:: allDirectories('dir');
```
で`dirの中のサブディレクトリの中も含めた全ディレクトリを配列で返す`ことができます。

## ディレクトリ作成
#### Storage:makeDirectory 
```php
Storage:makeDirectory('dir');
```
で`dirという名前のディレクトリを作成する`ことができます。

## ディレクトリ削除
#### Storage:deleteDirectory 
```php
Storage:deleteDirectory('dir');
```
で`dirという名前のディレクトリを削除する`ことができます。
# 終わりに
今回はStorageを使ったファイルおよびディレクトリ操作についてまとめてみました。
完全に自己満の記事ですが、何かの役に立てれば幸いです。
それでは、またどこかで。笑

#参考文献
1. [Laravel 5.5 ファイルストレージ](https://readouble.com/laravel/5.5/ja/filesystem.html)
【Python】globとreで簡潔にファイル名を取得、リストを生成する

# TL;DR
特定のディレクトリ内のファイル名を取得しリストを生成するコードを、os.walkによる2重for文の代わりに

- [glob.glob](https://docs.python.org/ja/3/library/glob.html#glob.glob)
- [re.search](https://docs.python.jp/3/library/re.html#re.search)

を用いて正規表現で書き換えた。

# いきさつ
画像の高解像度化がしたいと思い調べたところ、[RAISRを実装したリポジトリ](https://github.com/movehand/raisr)が公開されていたのでさっそく導入。そのソースコードの中にちょっと気になる部分がありました。[test.pyのこの部分](https://github.com/movehand/raisr/blob/master/test.py#L43:L47)と[train.pyのこの部分](https://github.com/movehand/raisr/blob/master/train.py#L51:L55)になります。

```python
imagelist = []
for parent, dirnames, filenames in os.walk(trainpath):
    for filename in filenames:
        if filename.lower().endswith(('.bmp', '.dib', '.png',
                                      '.jpg', '.jpeg', '.pbm',
                                      '.pgm', '.ppm', '.tif', '.tiff')):
            imagelist.append(os.path.join(parent, filename))
```

trainpathに代入されている名前のディレクトリから、画像ファイルの名前を取得しimagelistにブチ込む処理をするコードです。しかし、2重for文なのでいささか冗長に感じます。

# 手直し
以下が手直ししたコードになります。

```python
imagelist = [path
             for path in glob.glob(trainpath + '/**', recursive=True)
             if re.search('.(bmp|dib|png|jpg|jpeg|pbm|pgm|ppm|tif|tiff)', path.lower())]
```

endswithは引数に複数の文字列からなるタプルを渡す必要がありました。しかしre.searchは第一引数に1つの正規表現の文字列を渡すため、見た目がスッキリしますね。

# ちなみに
Qiita初投稿なので、ご指摘・アドバイスいただけると筆者は喜びます。よろしくお願いします。

# 追記
改行位置、パスの小文字化に関するご指摘を頂いたので修正。(2019/7/4)
【Python】【Selenium-webdriver】Webテスト自動化の第1歩

# 概要
Webの目視テストが苦手なので、PythonのWebアプリでのテストをSeleniumで自動化しよう。という話の初歩です。

# 環境
- Python 3.7
- Chrome 75.0
- Django 2.2.2

# 手順
- [テストしたいWebアプリの構築](#テストしたいWebアプリの構築)
- [Selenium-webdriverの導入](#Selenium-webdriverの導入)
- [chrome-binaryの導入](#chrome-binaryの導入)
- [SeleniumBaseの導入](#SeleniumBaseの導入)
- [テストコードの作成](#テストコードの作成)
- [テストの実行](#テストの実行)

## テストしたいWebアプリの構築
[DjangoによるWebアプリケーション開発入門](https://eiry.bitbucket.io/)を参考にして、「Hello World!」を表示するだけのWebアプリを作成。

## Selenium-webdriverの導入
~~~
pip install selenium
~~~

## chrome-binaryの導入
[【Python】SeleniumでHeadless Chromeを使おう](https://qiita.com/derodero24/items/9e9567790bde9e4b9d0c)の記事を参考にして導入。
SeleniumでChromeを動かす場合は必要です。
インストールしているChromeとバージョンが異なると起動しないので、Chromeのバージョンは要確認。
今回はインストールしているChromeのバージョンが`75.0`なので、同じメジャーバージョンのchrome-binaryをバージョン指定で導入。

~~~
pip install chromedriver-binary==75.0.3770.8.0
~~~

## SeleniumBaseの導入
[Awesome Selenium : 素晴しい Selenium ライブラリの数々](https://qiita.com/hatai/items/a4cbff763b9ee8a7879a)を参考に導入。
`pytest`コマンドを使ってseleniumでのテストを自動実行するためのフレームワーク。

~~~
pip install seleniumbase
~~~

## テストコードの作成
1. テスト用のコードは別に分けておくことが一般的なので、プロジェクトのルートに`tests`ディレクトリを作成
1. ユニットテストと切り分けるため、`tests`ディレクトリ内に`selenium`ディレクトリを作成
1. [SeleniumBaseのリポジトリ](https://github.com/seleniumbase/SeleniumBase)の`example`ディレクトリを参考に`setup.cfg`ファイルを`(プロジェクトのルート)/tests/selenium`ディレクトリ内に作成（このファイルが無いとテストの実行自体に失敗します）
1. 実施したいテストコードを記述した`.py`ファイルを`(プロジェクトのルート)/tests/selenium`ディレクトリ内に作成<br />今回は`Hello World!`の表示を確認したいので`hello_tests.py`というファイルを作成

~~~ python
from seleniumbase import BaseCase
import chromedriver_binary

class HelloTestClass(BaseCase):
    BASE_URL = 'http://127.0.0.1:8000/'

    def test_hello(self):
        self.open(self.BASE_URL + 'hello/')
        self.assert_text('Hello World!', 'body')
~~~

## テストの実行
- （今更かもしれませんが）DjangoのWebアプリケーションを立ち上げる

~~~
python mysite/manage.py runserver
~~~

- `pytest`コマンドからSeleniumの自動テストを実行する
  - `--browser=BROWSER`オプション：`BROWSER`部分に実行するブラウザを指定。今回はChromeを使うので`--browser=chrome`で指定する。
  - `--headless`オプション：このオプションを付けると、ヘッドレスモードで実行。

~~~
cd ./tests/selenium
pytest hello_tests.py --browser=chrome --headless
~~~

- 実行結果を確認する
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27600/bcf1ed79-138c-00ae-a86a-351501d09a1f.png)

## 追記
公式ドキュメントをよく読んでみたら、こんな項が……
[Django におけるテスト](https://docs.djangoproject.com/ja/2.2/topics/testing/)

`django.test`パッケージ内の`SimpleTestCase`クラス、またはそのサブクラスを継承するテストクラスを定義することで、Webサーバを起動せずにWebアプリの基本的なテストを実行できる。

アプリケーション内にテストクラスを定義した場合の実行コマンドは

~~~
[プロジェクトのディレクトリ]/manage.py test [テスト対象のアプリケーション]
~~~

テストクラスを別パッケージに分けた場合の実行コマンドは

~~~
[プロジェクトのディレクトリ]/manage.py test [テストクラスのパッケージのディレクトリ]
~~~

でテストを実行できる。

アプリケーション単位にテストクラスを定義する場合は、アプリケーションのディレクトリ内に`tests.py`を作成し、その中に定義するのが慣習。
デフォルトのテストスクリプトのファイル検出パターンは`test*.py`。
テストスクリプトのファイル検出パターンを変更する場合は`--pattern=[ファイル名パターン]`または`-p=[ファイル名パターン]`で指定する。
Seleniumを用いない単純なテストなら、こちらの方が実装は簡単そうです。
【追記】APNのPartner Central画面で組織親アカウントに紐づくユーザーを確認する

どこになにがあるかわからなすぎて危うくハゲるところだったので毛髪を守るため、メモしておきます。

APNのPartner Central画面で組織親アカウント（アライアンスリードのアカウント）に紐づくユーザー一覧を確認する方法です。

APNってなにとかはあとに書きます。
とにかく見てください。

# ここです
左サイドバーのここをクリック
<img width="444" border="1px" alt="Partner_Scorecard___Partner_Central.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/05c33d30-d979-bf96-d1fb-8ac55d4f5563.png">

そして
<img width="1260" alt="Partner_Central.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/5fdee9da-76d7-3c13-00b1-62aeeedc0174.png">

そもそもパートナーユーザーっていう名前もピンときていない状態であちこち探していて「え、Manageって書いてあるけど・・・まさかこれは、リンクなの・・・？」とクリックしてみたら無事一覧が開きました。
ヘッダーが「アカウントに紐づくパートナーユーザー一覧」とか書いていてくれるだけでぜんぜん違うかもしれない。

未来の私、覚えておいてね。

# APNとは
> AWS パートナーネットワーク (APN) は、AWS の世界的なパートナープログラムです。ビジネス、技術、マーケティング、および販売促進をサポートすることで、APN パートナーが AWS ベースのビジネスやソリューションの構築に成功するよう支援することに重点を置いています。

参照： [AWS パートナーネットワーク](https://aws.amazon.com/jp/partners/)

パートナー資格を維持するにはいろいろ条件があります。
その一つが会社に所属する社員の資格保持です。

そこで、そのAPNの管理画面、Partner Centralで組織と社員のAWS資格の紐付けをしたりします。

# 希望
APNパートナー資格維持のため、社員の資格取得状況を随時確認したいです。

社員が個人アカウントで資格を取得した状態で入社してきたりすると、パートナーユーザーを作ってもらって個人アカウントとさらに紐付けしないと組織の資格保持数に反映されません。
https://aws.amazon.com/jp/blogs/psa/newyear-prep-for-tier-changes/
したがってパートナーユーザー一覧の情報が正しい状態になっているかは重要なので見やすいとうれしいです。

また、トップページには組織に紐づく資格の数が表示されていますが、パートナーユーザーの誰がどの資格を保持しているのかはわかりません。（たぶん密かなリンクを見落としていなければ）

一応要望は送ってみたのでPartner Central画面のさらなる改良を期待したいと思います。

## 2019/11/6 【追記】 誰が何の資格を持っているのか、見られるようになりました！！！！！🎉

> パートナーユーザーの誰がどの資格を保持しているのかはわかりません

要望を送ったおかげかどうかわかりませんが、
誰が何の資格を持っているのか、見られるようになりました！！！！！🎉

New Feature Enables Visibility of Employees’ AWS Certification Completions
https://aws.amazon.com/jp/about-aws/whats-new/2019/11/new-feature-enables-visibility-of-employees-aws-certification-completions/

ただし、パートナーユーザーの方で情報開示の同意を設定してもらう必要があります。

#### パートナーユーザー側の情報開示同意の手順

1. APNパートナーネットワーク画面にログイン
1. マイプロフィールを表示
1. 編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/c5b4ff8b-d3b4-1ff7-20d6-3a75dc85b67c.png)

1. 下の方の「私の AWS 認定を「HANDS LAB INC.」と共有することに同意します。」で「はい」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/be4358e8-ead5-f3fd-fa0c-a0576ee4f768.png)

【注意】
「はい」を選択していない状態でもプロフェールはこんなかんじで表示されます。
「私の AWS 認定を「HANDS LAB INC.」と共有することに同意します。」ってあるからもう同意している扱いなのかと思ったけどそうではなかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/203d3441-4d38-eb24-6ae3-934dfa8c3baa.png)

#### APN組織親アカウントで確認する方法
1. APNパートナーネットワーク画面にログイン
1. AWS認定を表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/5aaaae19-6811-9516-6aa0-29cdbb1bdbdb.png)

たぶんこの伏せ字になっているところが開示されるようになるはず
ただ情報開示に同意しても即時反映ではないようなので気長に待ちたいと思います:beach:
（なお現在丸一日経過したけど反映されてない様子）
日々の進捗ノート_画像処理100本ノックまとめ

[**画像処理100本ノック**](https://qiita.com/yoyoyo_/items/2ef53f47f87dcf5d1e14)というのをやろうと思います．

#目次
[Q.1. チャネル入れ替え](#q1-チャネル入れ替え)
[Q.2. グレースケール化](#q2-グレースケール化)

#Q.1. チャネル入れ替え
>画像を読み込み、RGBをBGRの順に入れ替えよ。
![imori.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448696/dbbf161c-5bc9-aed5-b893-0e3ef4ef52e9.jpeg)

```gazo01.py
import cv2
import numpy as numpy
img = cv2.imread("files/imori.jpg")

r = img[:, :, 2].copy()
b = img[:, :, 0].copy()

img[:, :, 0] = r
img[:, :, 2] = b

cv2.imwrite("newimori.jpg", img)
```
####結果
![newimori.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448696/22420acc-d3d4-c027-674b-e0801398f64a.jpeg)

####備忘録
・cv2.imreadで読み込むとRGBはBGRの順で出力される
・numpy.ndarrayを取り扱うときは参照渡しに注意 最初.copy()をつけずにやってミスをした

#Q.2. グレースケール化
>画像をグレースケールにせよ。 グレースケールとは、画像の輝度表現方法の一種であり下式で計算される。

Y = 0.2126 R + 0.7152 G + 0.0722 B
![imori.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448696/dbbf161c-5bc9-aed5-b893-0e3ef4ef52e9.jpeg)

```gazo02.py
import cv2
import numpy as np

img = cv2.imread("files/imori.jpg")
img = img * [0.0722, 0.7152, 0.2126]
img = img.sum(axis=2)

cv2.imwrite("newimori2.jpg", img)
```
####結果
![newimori2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448696/f2431fe2-44b5-00ae-0f52-5510ab4149fe.jpeg)

####備忘録
・グレースケールの場合各ピクセルに格納されている値はYひとつのみ

#Q.3. 二値化
>画像を二値化せよ。 二値化とは、画像を黒と白の二値で表現する方法である。 ここでは、グレースケールにおいて閾値を128に設定し、下式で二値化する。

`y = { 0 (if y < 128)
     255 (else) `

![imori.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448696/dbbf161c-5bc9-aed5-b893-0e3ef4ef52e9.jpeg)

```gazo03.py
import cv2
import numpy as np

img = cv2.imread("newimori2.jpg")
img = np.where(img <128, 0, 255)

cv2.imwrite("newimori3.jpg", img)
```
####結果
![newimori3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448696/195edd68-3385-34ae-23de-cedf04280bdb.jpeg)

####備忘録
・まあいいかなと思って2問目で作ったグレースケールの画像をもとにしました
・if は np.where
かんたんにAWS Cloud9にLaravel開発環境を構築する。

家のマシンのスペックが貧弱なのでCloud9上に環境構築することにしました。
メモとしてQiitaに書き残しておきます。学習が進み次第追記していくかもしれません。

## PHPのインストール

```terminal
# パッケージ更新
sudo yum update -y

# phpのバージョン確認
rpm -qa | grep php

# php5.6を一式アンインストール
sudo yum remove php56*

# PHP7.3を一式インストール
sudo yum install php73*

# リンク削除 -> 貼り直し
sudo unlink /usr/bin/php
sudo ln -s /etc/alternatives/php7 /usr/bin/php
```

## composerのインストール

```terminal
# インストーラーのダウンロードと実行
curl -sS https://getcomposer.org/installer | php

# パスの通った場所へ移動
mv composer.phar /usr/local/bin/composer
```

## Laravelのセットアップ

```terminal
# Laravelのインストール
composer global require "laravel/installer"

# Laravelプロジェクトの作成
composer create-project --prefer-dist laravel/laravel myapp
```

## ローカルサーバーが動いているか確認

```terminal
# ポート8080でサーバー起動
php artisan serve --port=8080
```

Previewボタン -> PreviewRunningApplicationから確認できます。
おつかれさまでした。:tada:

## 参考URL
[AWS Cloud9（Amazon Linux）にPHP7.3をインストールして開発環境を作る手順書](https://qiita.com/gomiryo/items/28c07d5ee9afd1c325b0)
[Composerをインストールしてみた](https://qiita.com/kakijin/items/02364adacf36410f449e)
[Laravel 5.8 インストール
](https://readouble.com/laravel/5.8/ja/installation.html)
クロスプラットフォームで実装できるフレームワークPros and Cons


簡単な画像やエフェクトを使った軽量のネイティブアプリを作る際のフレームワークを検討しています。
条件としては、ネイティブに近い速度間、高いユーザビリティを実現できる。各種サードパーティを使える。
Xamarineも検討フレームワークにいれたかったが、iOS、Android間の親和性が低いとの情報をみたので省きました。
共通化できるコードは60％程度にとどまるらしいです。なにか良い情報があれば
フレームワーク

||Cocoa2d-x|React Native|Unity|
|:--|:--|:--|:--|
|各種サードパティとの互換性・相性|△|〇|△|
|レイアウトの作成のしやすさ|〇　専用のGUIツールがでたので初期よりはかなり使いやすくなった。|×|◎|
|OS共通化具合|△|〇|◎|
|プログラミング言語ととっつきやすさ|〇C++,JavaScript,Lua|× JavaScript|◎ C#,JavaScript|
|主なデメリット|CCなんちゃらのクラス名を覚えなくてはいけない、アップデートで大幅にクラス名が変わる|もともと、Web用のライブラリなので、エフェクト等はすくない、リッチコンテンツに向いてない webViewを拡張したものに近い。ガワネイティブの域|有料　起動時にUnityロゴがでる、軽量アプリでもローディング時間が必要|
|メリット|軽力サクサク、豊富なエフェクト|安定している。|iOS,Android　パブリッシュ先をほぼ意識しなくてもよい。|
|シェア的なもの|×Unity Technologyが２D向けの機能を提供し全面戦争に敗北し近年は開発が停滞気味|◎一般的なツールではかなり使われている|〇|
|主なアプリ|モンスト（今はわからない）、ドラクエ、LINEツムツム|Facebook Instagram Skypeのアプリ版|コロプラのゲーム、3Dのゲームはほぼこれやないかな|
|HelloWorldのファイルサイズ(.ipa)|C++ :3MB程度　JS:10Mテイド|測定中|１６MB|
Go template で、「can't evaluate field X in type Y」のエラー

# エラー内容
range ループ内で、rangeに与えていない変数を利用しようとすると、
「can't evaluate field X in type Y」というエラーが発生する

# エラーが発生する例
変数 exFlag が true の場合に $v を表示する

```.go
    {{ range $i, $v := .Values }}
      {{ if .exFlag }}
      {{ $v }}
      {{ end }}
    {{ end }}
```

# なぜか
> When execution begins, $ is set to the data argument passed to Execute, that is, to the starting value of dot.

rangeの中では、先頭に「.」がつく変数は、「$.」でアクセスできるようになるようです。

# 正しい例

```.go
    {{ range $i, $v := .Values }}
      {{ if $.exFlag }}
      {{ $v }}
      {{ end }}
    {{ end }}
```

# まとめ
常識なのかもしれませんが、
私は、はまったので誰かの役に立てれば。

参考：
https://stackoverflow.com/questions/43263280/go-template-cant-evaluate-field-x-in-type-y-x-not-part-of-y-but-stuck-in-a
[BluePrism]例外タイプの一覧をExcelに取得する方法を発見しました。

# 例外タイプとは
ここに出てくるやつです。

システム→オブジェクト→例外タイプ
![無題 01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142092/b8011dd2-f2a9-364c-dbff-027bb73ac98d.png)
使われている例外タイプと、その例外タイプを使ってるプロセス・オブジェクトの一覧がここで参照できます。

# 例外タイプの一覧が欲しかった理由
基本的には、予め「例外タイプはこれの中から選んで使ってね」という運用ルールにしているのですが
それでも表記のバラけた例外タイプが設定されてきちゃうことがあります。

business exception
BusinessException
Bussiness Exception
とか…

これを1個にまとめて統一したいのです。

# 例外タイプを一覧から削除する方法
1. まず、当該の例外タイプを使用しているプロセス・オブジェクトをゼロにします
2. それから、制御室の システム→オブジェクト→例外タイプ の一覧から当該の例外タイプを削除します（誰も使ってない例外タイプはこの画面から削除できる）

# 一覧がうまく表示できない
「当該の例外タイプを使用しているプロセス・オブジェクト」は、制御室の例外タイプの一覧でスキャンすれば出てくるんですが
数が多いと、表示がはみだしてしまって全部は見ることができません。
（Excelでいうところの「折り返して全部を表示」みたいな表示方法は無いっぽい）

なので、この一覧をまるごとエクスポートなりダウンロードなりする方法はないかなあ、と思ったのです。

DBサーバでクエリで検索して……等考えたのですが、
どうやら、この「スキャンして得られるプロセス・オブジェクトの一覧」というのはどこかに保存されるのではなくて
あくまでも、スキャンしたらその場で画面に出してくれて終わり、という機能のようなのです。


# だったらBluePrismでやればいいのでは
Webの情報を取得するのとか、BluePrismでできるんだから
BluePrismで取得すればいいじゃん？

BluePrismをBluePrismでspyして（書いてて相当頭悪い感があるアイデア

# やってみた

- スタジオに行って、新しいオブジェクトを作成します
- 制御室→オブジェクト→例外タイプ の画面を出します
- スキャンすると、プロセスとオブジェクトの一覧が表示されます
- 新しいオブジェクトのアプリケーションモデラーで、
    - Windowsアプリケーション
    - 既に表示されていて…の方を選択
    - WindowTitleは 「Blue Prism - Robotic Process Automation Software」
    - プロセス名は 「Automate」
- Attachします
![無題03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142092/c020b114-6086-49ed-d1b0-2625c2851096.png)

- 「子を追加」で、例外タイプの一覧表のところをspyします（ListViewで取れます）
![無題02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142092/daf5d2f3-f384-348d-4536-b5b5fe3f5b71.png)


あとはこのspyした一覧表をCollectionに取得して、Excelに書き出すだけです！
画面では表示しきれてなかったぶんのプロセスやオブジェクトもちゃんと全部書き出されています。　　　　　　　　　　　　　　　　　


# おわりです
できちゃったときは、ええ……マジで……いやいいのこんなので？？って感じでした(笑)

だけどこれができたってことは、他のいろんなものもこの方法でぱっと取得できちゃうのでは！
と思って、この後制御室で流したプロセスのログを同じ手順で取得しようとしたのですが、それはうまくいかなかったです。
python仮想環境セットアップメモ

本番環境は基本poetryかvenv(requirements+constraints)でやるけれど、手元で普通のアプリ開発と複数分野の機械学習・信号処理をやるときにはanacondaと普通のpython両方使いたいので(更にプロジェクト毎の複数pythonヴァージョン対応もしたいので)pyenvを使っている

pyenvにある程度なれてる人向け。手順はmac、Linuxの場合は以下。Windowsは知らない。

# pyenv, pyenv-virtualenv

```
brew install pyenv pyenv-virtualenv
```

`.zshrc` に以下を記載

```
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"
```

# anacondaの場合

## pyenvでanaconda入れる

とりあえず3系の5.3.1の場合

```
pyenv install miniconda3-4.3.30
```

## conda envの作成

pyenvでconda envを管理するには、まずベースにしたいanaconda環境下で、 `conda create` をする必要がある。

```
pyenv shell miniconda3-4.3.30
conda create -n ENV_NAME python=3.6 conda
```

`conda create` するときには、必ずインストールするパッケージとしてcondaを指定する必要がある。そうしないと、pyenvでcreateした環境を用いるときにcondaコマンドが利用できなくなる

## activate

`pyenv shell` なり `pyenv local`なりを利用してアクティベートする

```
pyenv shell miniconda3-4.3.30/envs/ENV_NAME
```

ベースになったanacondaヴァージョン名とENV_NAMEを指定してactivateすると、あとはcondaコマンドで作った環境にライブラリをインストールしていくことが可能。
MS Accessでレポートを印刷する際に、何故かフォームが印刷される件。

【対応中】ダメだったので、更に調査中。

裏のフォームを非表示にするとかレポートのプロパティで、「作業ウィンドウ固定」を「はい」に変更するとか、対応は諸々ありますが。。

一番楽なのは、Accessのオプションを開いて、
「現在のデータベース」「ドキュメントウィンドウオプション」「ウィンドウを重ねて表示する」を選択すること。

デフォルトでタブ付きドキュメント（タブ表示）になってるので、ウィンドウを重ねて表示するに変えればOK。（ではなかった。。。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76660/109374be-99bd-3e74-f4ba-56537b9c308d.png)
StreamAPIの細かい挙動　ステートフルな中間操作と短絡終端操作

# StreamAPIの細かい挙動　ステートフルな中間操作と終端操作

## 始めに問題です。
以下のコードのコンソール出力はどうなるでしょうか。

``` java

//問1
		Stream.of(1, 2, 3, 4, 5).map(i -> {
			System.out.println(i);
			return i * 2;
		}).filter(i -> i > 3).findFirst();
//問2
		Stream.of(1, 2, 3, 4, 5).peek(System.out::println).map(i -> {
			return i * 2;
		}).filter(i -> i > 3).findFirst();
//問3
		Stream.of(1, 2, 3, 4, 5).peek(System.out::println).map(i -> {
			return i * 2;
		}).filter(i -> i > 3).sorted().findFirst();
//問4
		Stream.of(1, 2, 3, 4, 5).peek(System.out::println).map(i -> {
			return i * 2;
		}).filter(i -> i > 3).distinct().findFirst();

```

## 答え

```
//問1
1
2
//問2
1
2
//問3
1
2
3
4
5
//問4
1
2

```

## 解説
### 問1
javaのStreamの処理は、「生成」「中間操作」「終端操作」に分けられます。
基本的に、生成がStreamを作成している部分、終端操作が最終的に結果を返すメソッド、
中間操作がそれ以外のStreamからStreamを返す部分と考えればOKです。

実際の処理は終端操作が実行されたタイミングで実行されます。
そして基本的にStreamに流れる各要素に対し終端操作まで実行します。
すべての要素にmapをかけてから、filterをかけるわけではありません。
(例えば、javascriptの配列で似たようなコードを書いた場合と挙動が異なります。)

そして、今回終端操作として採用しているFindFirstは終端操作の中でも短絡終端操作と呼ばれるものです。
「短絡」のつく操作は、条件さえ満たせばStreamで流れてくるすべての要素が評価される前でも処理を終了します。
(短絡操作が条件を満たせば、無限に値を返すStream(hasNextが常にtrueを返すiteratorから作ったStreamなど)に対しても無限ループに陥らせずに処理を終えることが出来ます。)

forやwhileのループで、一つでも条件を満たしたらbreakして残りは無視する処理はよくありますが、それを自動でやってくれるわけです。中々賢い。

今回のケースでは、2が流れてきた時点でfindFirstが値を返すことが出来るので、1、2まででStream処理が中断されます。

### 問2
基本的には問1と同じです。
5つの要素が流れてくるStreamの生成の直後にpeekを置くと、5回実行されそうなものですが、
末尾が短絡終端処理のためStreamの処理は2までで止まります。

### 問3
短絡終端処理を行っていてもすべてのStreamに流れる要素が評価されるケースがあります。
「ステートフルな中間処理」を間に挟んだ場合です。
この場合だとsortedがステートフルな中間処理です。
ソートした上で最初に条件を満たすものを取得するという処理なので、
論理的にもすべての要素を参照する必要があるのは当然ですね。

ちなみに、各中間処理がステートフルなのかどうかは[公式リファレンス](https://docs.oracle.com/javase/jp/8/docs/api/java/util/stream/Stream.html)に書いてあります。

### 問4
ちなみに、ステートフルな中間操作を挟むと常にすべての要素を参照する必要があるかというとそういうわけではありません。
distinctもステートフルな中間操作ですが、これも1,2で処理が完了します。
というより、実際通常の順序ありStreamで全要素が常に参照されるのはsortedを使ったときくらいです。

## まとめ
* Streamは各要素ごとに終端操作まで処理される
* 短絡終端処理を使う場合、Streamがよろしく処理を最適化してくれる
* ステートフルな中間操作(sorted)の場合は例外があるので注意

## 余談
ParallelStreamの場合はちょっと挙動が異なりますが、
長くなるのでこの辺りで。
v-forを使う時、配列に初期値があると初めから画面に表示されてしまう

vueでtodoリストを作る際に、v-forを使い配列の中身を順に表示させようとしたのですが、ボタン要素を作る為にhtmlに`<button>`を記述したところ、初期の状態からボタン要素が見えてしまっている不備があった為、少し躓いたので解決策を記載します。
##html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">   
</head>
<body>
    <div id="app">
        <h1>ToDoList</h1>
        <table>
            <thead>
              <tr>
                <th>コメント</th>
                <th>状態</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="todo in todos" :key="todo.value">
                <td>{{ todo.item }}</td>
                <td><button @click="">{{ todo.state }}</button></td>
            </tr>
            </tbody>
          </table>
          <input type="text" v-model="newItem">
          <button @click="addItem">追加</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="script.js"></script>
</body>
</html>
```
ここは問題なしです。

##javascript(vue)　不備があったコード。

```javascript
let vm = new Vue({
     el: '#app',
     data: {
          newItem: '',
          todos: [{
               item: this.newItem,
               state: ''
          }]
     },
     methods: {
          //タスクを追加する関数
          addItem: function () {
               this.todos.push({item: this.newItem, state: '作業中'})
          }
     }
});
```

このコードだと、htmlに初めからボタン要素が見えてしまいます。
じゃあhtmlの`<button>`を消して、javascriptの関数内でボタン要素を作り、それを配列todosにpushしよう！
と思ったのですが、~~vueには生のjavascriptでお世話になった`document.createElement`に相当するものは無い~~ようなので、少し躓いてしまいました。
（誤解を招く表現でしたので訂正します。わざわざ使う必要がない、という認識です。）

難しく考えていましたが解決策は非常にシンプルでした。
##解決したコード

```javascript
let vm = new Vue({
     el: '#app',
     data: {
          newItem: '',
          todos: []
     },
     methods: {
          //タスクを追加する関数
          addItem: function () {
               this.todos.push({item: this.newItem, state: '作業中'})
          }
     }
});
```
【解決策】
配列todosを空にするだけです。

【原因】
htmlに初めからボタン要素が表示されていた原因は、配列todosのボタン要素になるプロパティ`state`に初期値を与えてしまったせいです。
ですので配列todosを空にし、関数内でpushする時にプロパティを作ってあげれば解決です。
（プロパティ`item`は今回のボタン要素の表示には関係ありませんが、同じ関数内で一緒にpushしてあげた方がスマートで保守性と可読性も上がると思います。）

---
以上です。
よく考えれば当たり前なのに理解不足もあり少し時間を取られたので記載しておきました。
補足や訂正などありましたら、ぜひご教授いただければ嬉しいです。
最後まで見ていただきありがとうございます。
Form_forでプルダウンメニューの項目をDBから選択する

##概要

select_tagによる、決め打ちの選択肢 ↓
`<%= f.select :subject, [["１", "１"], ["２", "２"]] , class:"form-control" %>`
**ではなく**、DBのテーブルから項目を引っ張ってきたい時 :fist_tone4:


## 今回の例

都市を入力するページで、国をプルダウンで選択させたい。
Countries （国のテーブル） ※数が増えることがないので`db/*seed.rb`に記載済み。

|  id  |  name  |
| ---- | ---- |
|  1  |  Australia  |
|  2  |  Canada  |
|  3  |  Japan  |

has_many :cities 
国は都市をたくさん持っています。

Cities (都市のテーブル）:tokyo_tower: :shinto_shrine: :metro:

|  id  |  name  | country_id |
| ---- | ---- | ---- |
|  1  |  Tokyo  | 3 |
|  2  | Osaka   | 3 |
|  3  | Kyoto | 3 |

belongs_to :countries

## collection_select を使う

```app/views/cities/new.html.erb

<%= form_for @city do |c| %>
<%= c.label :country_id %>
<%= c.collection_select :country_id, Country.all, :id, :country_name %>

```

## collection_selectの文法

```
<%= f.collection_select <属性名>, <プルダウンメニュー表示用の配列データ>, <valueとして扱うカラム名>,  <表示用のカラム名>, <オプション> %>

```


##オプション

### :prompt
prompt オプションを使うと、プルダウンメニューが選択されていない時に設定した文字列の行が先頭に追加される。

```
<%= form_for @city, url: admins_cities_new_path do |c| %>
       <%= c.label :country_id %>
       <%= c.collection_select :country_id, Country.all, :id, :country_name,
                               :prompt => "国を選択" %>
```

これで選択していない時は、 国を選択が表示される :fist_tone4:

###:include_blank

プルダウンメニューの先頭に空白行を追加する。空白行の value は空文字列が指定される。
include_blank オプションの値を true/false ではなく文字列にすると、その文字列が使用される。

```
<%= f.collection_select :origin_id, Origin.all, :id, :name, :include_blank => true %>
```
PythonでCAD(.dxf、Excel)ファイルを読むメモ

#DXFとは

Drawing eXchange Format の略。
異なるCAD間での図面データをやりとりするための中間・共通フォーマット。

######直線と円と円弧の2Dデータが多い。


##Autodesk社が開発したファイル形式の1つ。

Autodesk社は、CADと言われる図面を作成するソフトウェアを開発している会社。
Autodesk社が開発した製品と言えば、AutoCADという代表的なソフトウェアがある。

https://www.autodesk.co.jp/

AutoCADは設計事務所を中心に日本でも幅広く普及しており、聞いたことがあるという方も少なくない。
拡張子の1つであるDXFは、CADソフトであるAutoCADで図面が作成されたときに、保存する形式として選択することができる

###既存のPythonでDXFファイルを読み書きできる主なモジュール

####dxfgrabber
・DXFから情報を取得。全DXFバージョンに対応。読み込みのみ対応。
   https://dxfgrabber.readthedocs.io/en/latest/

####dxfwrite
A Python library to create DXF R12 drawings.書き込み専用
https://pypi.org/project/dxfwrite/


##インストール

Anaconda環境にpipでインストールなど

動作方法：Anaconda をダウンロードする （MacもしくはWindows）
Anacondaのダウンロードページを開いて、「64-BIT INSTALLER」をクリックし、
https://www.anaconda.com/


「Anaconda3-4.4.0-Windows-x86_64.exe」をダウンロード.Macの場合は該当の箇所をクリック。

![スクリーンショット (54).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453475/6cc5f762-8ec3-d1e3-6a05-3276ae82ab8b.png)



```
pip install dxfgrabber
```

##使い方の例

```
ファイル読み込み
>>> import dxfgrabber
>>> dxf=dxfgrabber.readfile("hogehoge.dxf")
```

##無料CADソフト

#####RootPro CAD
http://www.rootprocad.com/download/dl.html

#####Jw_cad
https://cadjob.co.jp/cad_course/column/p953/


##参照URL

・Myfuturesightforpast
　PythonのCAD(.dxf)ファイル読み書きモジュールまとめ
　https://myfuturesightforpast.blogspot.com/2014/07/pythoncaddxf.html

・DXFと亀
　https://qiita.com/ackermanrf128/items/d9275a7d077c1dff3ec7

・AutoCAD
　https://knowledge.autodesk.com/ja/support/autocad
axiosでネットワークエラー・タイムアウトエラーをハンドルする

axiosでネットワークエラー・タイムアウトエラーをハンドルする場合、以下のように判定可能です。

``` javascript
axios.interceptors.response.use(
  function(error) {
      //タイムアウトの場合
      const isTimeout = error.code === "ECONNABORTED";
      if (isTimeout) {
        //do something
        return;
      }
  
      //ネットワークエラーの場合
      if (!error.response) {
        //do something
        return;
      }
  }
);
```
自己署名証明書を受け付けるRestTemplate

# 概要

Springフレームワークで提供されている`RestTemplate`で、自己署名証明書（オレオレ証明書）を許容する。

## 環境

- Java 8
- SpringBoot 2.1.3.RELEASE
- Spring 5.1.5.RELEASE
- Apache HttpClient 4.5.7

## Bean定義

```java:RestTemplateのBean定義
import org.apache.http.client.HttpClient;
import org.apache.http.conn.ssl.NoopHostnameVerifier;
import org.apache.http.conn.ssl.TrustSelfSignedStrategy;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.ssl.SSLContexts;
import org.springframework.boot.web.client.RestTemplateBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.client.HttpComponentsClientHttpRequestFactory;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.client.RestTemplate;

import javax.net.ssl.SSLContext;
import java.security.KeyManagementException;
import java.security.KeyStoreException;
import java.security.NoSuchAlgorithmException;

@Configuration
public class RestTemplateBeanConfig {

    @Bean
    RestTemplate restTemplateIgnoreSelfSignedCertification() throws KeyStoreException, NoSuchAlgorithmException, KeyManagementException {
        SSLContext sslContext = SSLContexts.custom()
            .loadTrustMaterial(new TrustSelfSignedStrategy())
            .build();
        HttpClient httpClient = HttpClients.custom()
            .setSSLContext(sslContext)
            .setSSLHostnameVerifier(NoopHostnameVerifier.INSTANCE)
            .build();
        HttpComponentsClientHttpRequestFactory requestFactory = new HttpComponentsClientHttpRequestFactory();
        requestFactory.setHttpClient(httpClient);
        return new RestTemplateBuilder()
            .messageConverters(new MappingJackson2HttpMessageConverter())
            .requestFactory(() -> requestFactory)
            .build();
    }

}
```

## 参考

- [RestTemplateでクライアント証明書の認証を突破する](https://itneko.com/kotlin-rest-template/)
- [Setup Spring RestTemplate to accept Self Signed Cert](https://raymondhlee.wordpress.com/2016/01/09/setup-spring-resttemplate-to-accept-self-signed-cert/)
- [Small hack to avoid SSL validation in Spring RestTemplate](https://pragmaticintegrator.wordpress.com/2017/08/13/small-hack-to-avoid-ssl-validation-in-spring-resttemplate/)
Git bashでrails consoleが開けないときの解決策

<h1>はじめに</h1>
<img width="343" alt="git.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435480/e025b72f-72a7-f48a-cd4d-ff7bb94ab32c.png">

WindowsのGit bashでrails cを行うと　Switch to inspect mode.と出てきてしまい後は何も出ません。

一応入力することは出来ても真っ黒な画面なので気持ち悪いです:sweat_smile:

<h1>解決策</h1>
Windowsのプロンプトでは、駄目でしたが、VS code内でGit bashを開くとrails cを開くと何故かは分かりませんが、うまく開くことが出来ました。

<img width="661" alt="git4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435480/5a49825d-b15d-34f5-93a8-7c998d3ecdd6.png">

<h1>まとめ</h1>
今回偶然うまく行って良かったのですが、ただ、windowsのプロンプトの方は駄目で、VS codeでやるとうまく行った理由が分からないのでそこが気になります。