OmniAICreator/Qiita-1.07M huggingface dataset:
ESP32 ことはじめ

Arduino IDEを使って ESP32 にサンプルプログラムを焼くところまで。
さくっとできると思いきや、半日もかかってしまった。GWの３日目。ほえー。。。

# とりあえず

- Arduino IDEはWindows アプリとしてインストールし、追加のplugin を後で入れる。それが一番シンプルでよい気がする。
- Bootボタンを押さなければFWのdownload が始まらない。押しっぱなしにすれば動いた。

## お買い物

- amazonで買いました。960円。
HiLetgo® ESP32 ESP-32S NodeMCU開発ボード2.4GHz WiFi + Bluetoothデュアルモード 

そもそも自分が何を買ってのか分かっていない。--;
シールドにはESPRESSIF ESP32-WROOM-32 と印字されているので、これは　ESP32-WROOM-32 なのだとわかる。[情報ページ](https://ht-deko.com/arduino/esp-wroom-32.html#01)だとどういうSoCなのかとか分かる。[こちら](http://dubstylee.net/v/esp32s-nodemcu/)の記事を読むと、私が購入したのはv1.1のとなりの数字が101010なのでコピー品なのかも。。。[これ](https://leico.github.io/TechnicalNote/Arduino/esp32-pinmap)もうそうだけど。

## Arduino IDEでEPS32用の環境を整える(２step)

いろいろなことを書いているページがありますが、以下でOKでした。

1. Arudino IDEで、ファイル --> 環境設定 (Preference) で
"追加のボードマネージャーのURL"という項目で、

https://dl.espressif.com/dl/package_esp32_index.json

を追加する。（コピペしてOKとする）

2. ツール --> ボードマネージャで、EPS32を選び（一番下にあると思います）、「インストール」を選択します。最新のものがダウンロードされてインストールされます。
![board_manager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/74c0f8bc-913f-f8a9-d2cb-0c13e5194901.png)

## ESP32 に　Arudino IDEでサンプルプログラムをdownload する。

1. ツール --> ボード　で Esp32 Dev Module を選びます。
2. ファイル --> スケッチ例 で ESP32 の中からChipIDを選びます。
3. コンパイルしてマイコンボードに書き込む、のボタンを押しておしまい、のはずがそうはいきませんでした。本当はこれで終わりでなければいけないはずなのに。さてさて。

(2019/05/01追記)
以下はネットでの情報収集と経験的に自分はうまくいった、というメモです。Windows 10を使用しています。

1. 通信はできていることをシリアルモニタなので確認します。baudrate 115200 でつなぐと、デフォルトではWiFiスキャンしている様子が表示されます。表示されないときはEN(reset)ボタンを押します。

2. Arduino IDEでは baurdrate 921600 で接続し、ESP32 Dev Module を選択します。
ボードの条件は、デフォルトのままでした。
3. いろいろなところに書かれていましたが、ENとGNDの間に0.1uF のセラミックコンデンサを挟みます。電圧が維持できないのでしょうか、よく理由は分かりません。コンデンサの種類や静電容量はほかでもよいのかもしれません。
4. USBケーブルを抜き差しします。それをしないとうまくいきません。原因は分かりませんが。
5. Arduino IDEでFW　の dowbload を開始するボタンを押します。すると、build ののちに Connecting と表示されるので、そうしたらIO0のボタンを押します。（私のESP32ボードにはBOOTと書かれたボタンはありません。）

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/02aec048-ffca-ce55-2e68-b2524f8cc346.png)


## はまったところ

- Arudino IDEで。最初、起動せず、arduino.exe と同じディレクトリに portable というフォルダを作る、などで進展はあったのですが、結局、EPS32用のものが足りなくてビルドできずなどトラブルが最後までありました。アプリとして入れなおしたら、今のところ動いているので、管理者権限など気にしなくてよいこちらの方で行こうと思います。
- FWを焼くときにBootボタンを押していなければならない、は本来の仕様ではないようです。[ここ](https://randomnerdtutorials.com/solved-failed-to-connect-to-esp32-timed-out-waiting-for-packet-header/)に書かれているようにコンデンサをかませば良いとの情報もありますが、~~私は一度ぽちっと押さなければダメです。おしっぱななしにする必要はないですが~~。--> ボタン押さずに掛けるようになりました。ただしUSBケーブルの抜き差しは必要なままです。(2019/05/01)

なんというか、やろうとしていたことに対して、大変すぎる。センサーの値を読んでMQTTでサーバに上げて、スマホで見る、というIoTを体験したいだけなのだけれど。
create-react-appを利用してReactアプリをGitHub Pagesで公開

# はじめに
Facebookが作成しているReactを試してみたかったので、GitHub PagesでReactアプリを公開する方法です。現時点のReactの公式ページとGitHubの公式ページに記載されている方法で動いたので、この方法を書いていきます。

# Reactアプリの環境構築
Reactアプリの環境構築は、コマンド1つで作成できるcreate-react-appを使います。このツールは、Reactと同様にFacebookが公開しています。使い方は、簡単。インストールに必要な環境は、npxのバージョンが5.2以上。この環境があれば、公式ページに書かれている手順でReactが使えるようになります。
Reactアプリの環境を作るのは、以下のコマンドを実行します。

```
npx create-react-app my-app
```

my-appは、ディレクトリ名なので、自分の好きな名前に変更できます。この記事では、my-appとします。Reactのページをブラウザで表示するには、以下のコマンドを実行して、ブラウザで http://localhost:3000/ を開きます。my-app/src/App.js を編集すれば、表示内容を修正することができるので、試してみてください。

``` shell
cd my-app
npm start
```

# Reactアプリのデプロイ

GitHub Pagesに設置するURLをpackage.json ファイルのhomepageの項目に設定します。初期のpackage.jsonファイルには、homepageの項目はないので、例えば、以下のように設定を追加します。

``` json
  "homepage" : "http://myname.github.io/myapp",
```

設定後、以下のコマンドでbuildを行います。
ビルド結果は、my-app/build ディレクトリに生成されます。
このディレクトリをGitHubに設置すれば公開することができます。

``` shell
npm run build
```

# GitHub Pagesで公開

1. GitHubでusername.github.ioのレポジトリを作成  
usernameの部分は、自分のGitHubユーザ名に変更します。このレポジトリは、GitHub Pagesとしてwebサーバとして公開されます。
2. GitHubのレポジトリ(username.github.io)にbuildディレクトリを設置    
ディレクトリ名は、myappにします。git pushしてGitHubに反映させます。
3. http://myname.github.io/myapp にアクセスして確認

# 環境
- create-react-app 3.0.0
- npx 6.7.0
- node 11.10.1

# 参考文献

- [React 公式ページ](https://reactjs.org/)
- [create-react-app 公式ページ](https://facebook.github.io/create-react-app/)
- [create-react-app 簡単な導入説明](https://facebook.github.io/create-react-app/docs/getting-started)
GraphDBを学ぶ（６） CypherQLでneo4jの内部結合

# TL;DR

* Cypher QLでノード間結合を行うクエリを学びます
* [前回](https://qiita.com/myoshimi/items/e9912d5e5590e66287d9)のneo4j環境を使用して，簡単な内部結合を行うCypherQLクエリを検証します

# CypherQLでの結合処理

* TPC-Hでは，基本的にテーブル間の内部結合(inner join)が行われます
    * ベンチマーククエリでは結合処理を明示せず，各レコードの外部キーと一致する主キーを持つ別テーブルのレコードを検索する，という書き方になっています

## 最も基本的な結合処理(SQL)

* 以下のようなSQL文で検討します

```sql
select N_NAME, R_NAME
  from nation, region
  where nation.N_REGIONKEY = region.R_REGIONKEY;
```

* 「nationテーブルの全レコードについて，外部キー（N_REGIONKEY）に基づき，対応するregionテーブルのレコードを結合し，N_NAMEとR_NAMEを表示する」というクエリです
    * 実行結果は，以下のようになります
    * 「国名と，各国が存在する地域の名前を，すべて出力する」

```sql
MariaDB [sf001]>
select N_NAME, R_NAME
  from nation, region
  where N_REGIONKEY = R_REGIONKEY;

+----------------+-------------+
| N_NAME         | R_NAME      |
+----------------+-------------+
| ALGERIA        | AFRICA      |
.....<snip>.....
| SAUDI ARABIA   | MIDDLE EAST |
+----------------+-------------+
25 rows in set (0.00 sec)
```

## 結合処理(CypherQL)

* 前節のSQLクエリを，Cypherで書き直すと，以下のようになります
    * 「nationラベルのノードをすべて取り出し，関係するregionノードとともに，名前（N_NAMEとR_NAME）を出力する」

```sql
neo4j>
match(n:nation)-[:AT]->(r:region)
return n.N_NAME, r.R_NAME;

┌──────────────┬───────────────────┐
│ n.N_NAME     │ r.R_NAME          │
╞══════════════╪═══════════════════╡
│ MOZAMBIQUE   │ AFRICA            │
│ MOROCCO      │ AFRICA            │
.....<snip>.....
│ IRAN         │ MIDDLE EAST       │
│ EGYPT        │ MIDDLE EAST       │
└──────────────┴───────────────────┘
25 rows returned in 26ms (first row after 24ms, rendered after 28ms)
```

# 参考

* [From SQL to Cypher – A hands-on Guide](https://neo4j.com/developer/guide-sql-to-cypher/)
* [GraphDBを学ぶ（５）neo4jでTPC-H Query1を実行してみる](https://qiita.com/myoshimi/items/e9912d5e5590e66287d9)
minishiftにRed Hat CodeReady WorkspacesをAdd-onする

# はじめに

minishift単体でアプリケーション開発を完結する手法としてRed Hat CodeReady Workspacesが使えるかもしれないので、検証目的にインストールしてみました。
minishift関連のドキュメントではCodeReady WorkspacesはEclipse cheというベースとなっている名称で記載されていますので、各種ドキュメントを参照する際は注意してください。

# 環境

- macOS 10.14.4
- VirtualBox 6.0.4
- minishift v1.33.0
- Red Hat CodeReady Workspaces(Eclipse che 6.14.0)

# Add-on手順

OpenShiftにRed Hat CodeReady Workspacesをインストールするにはデプロイスクリプトを実行しますが、minishiftの場合はAdd-onという形式でインストール(追加)します。
手順の詳細については[GitHubのminishiftページ](https://github.com/minishift/minishift/tree/master/addons/che)を参照してください。

## minishiftを起動する

```
$ minishift start
```

## Add-onのEclipse cheを有効化

```
$ minishift addons enable che
Add-on 'che' enabled
```

## Eclipse cheをデプロイ

```
$ minishift addons apply che
-- Applying addon 'che':
[CHE] Create the Che server Template.
[CHE] Create the che-workspace Service Account Template.
[CHE] Creating mini-che project as developer..
[CHE] Creating che-workspace Service Account.
[CHE] Deploying Che on minishift.
Please wait while the pods all startup!
You can watch in the OpenShift console via:
  minishift console
Then you should be able the open the Che dashboard here:
  http://che-mini-che.192.168.99.101.nip.io
```

と、cheのデプロイは成功した様に見えますが、実はこの後にworkspaceを作成する工程で失敗する事象が発生しました。2019/5/1時点でインストールされる che は7.0系でまだベータ版ですので、この辺りに原因がありそうです。minishift v.1.34では解消されそうな感じですが、6.14系でインストールすることをお薦めします。

```
$ minishift addons apply --addon-env CHE_IMAGE_REPO=eclipse/che-server  --addon-env CHE_IMAGE_TAG=6.14.0 che
```

## web consoleにアクセス

Openshiftのweb consoleにアクセスすると、新しく"mini-che"という名前のプロジェクトが作成されています。デプロイ完了まで時間がかかるので、Monitoringを眺めつつ終わるのを待ちましょう。
デプロイが完了したら先ほどログに表示されていたURLにアクセスしましょう。

```
http://che-mini-che.192.168.99.101.nip.io
```

アクセスすると、cheの画面が表示されます。
<img width="1403" alt="che.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184483/19b6aed8-dc5d-31fb-61b7-042d18fd2aa8.png">
型Listを継承順になるようにsortする

## やりたいこと

依存管理のコンパイル時解決などの目的で 「型Listを継承順になるようにsortする」何かがほしい

```C++
struct hoge3_1{};
struct hoge2_1:hoge3_1{};
struct hoge2_2:hoge3_1{};
struct hoge1_1:hoge2_1,hoge2_2{};


using input = std::tuple<hoge1_1,hoge3_1,hoge2_1,hoge3_1,hoge2_1,hoge1_1>;

inherit_sort<input>::type; // => std::tuple<hoge3_1,hoge3_1,hoge2_1,hoge2_1,hoge1_1,hoge1_1>
// ↑ こういうのがほしい
```


## 型リストのトポロジカル的なソートと継承
下の型のような、依存しているクラスを包含している型をソートの対象としている場合、適当に木をたどればsortできる気がする

```C++
struct hoge1_1{using deps=std::tuple<hoge2_1,hoge2_2>;}
```

しかし、包含ではなく継承している場合、C++では親クラスのリストの取得はできないため「適当に木をたどれば」ということができない。
これをどうにかしなければならない



## 解決案
`X → 入力のうちXを継承したもの` を示せる、下の Treeのような概念を構築すればできる

```C++
template<class InputTypeList>
struct sort{
  template<class D>
  struct Tree{
    using child = InputTypeList.filter([](T){return !std::is_same_v<T,D> && std::is_base_of_v<T,D> }).map([](T){return Tree<T> }); // 疑似コード
  };
}
```

## 実装例

```C++
template<class>struct inherit_sort;

template<class...T>
struct inherit_sort<std::tuple<T...>>{
    using input = std::tuple<T...>;
    // 親クラスより 子クラスのほうが大きいvalueになるようにしてる
    template<class D>
    struct Priority{
        static constexpr std::size_t value = ((std::conditional_t< !std::is_same_v<T,D> && std::is_base_of_v<T,D>, Priority<T>,std::integral_constant<std::size_t,0> >::value)+...+1);
    };

    static constexpr auto index = []{ // `N番目の型Priority::value`でsortした(0,1,2...)
        std::array<std::size_t,sizeof...(T)> index_list={};
        sprout::iota(index_list.begin(),index_list.end(),0); 
        std::array<std::size_t,sizeof...(T)> p = {Priority<T>::value...};
        return sprout::stable_sort(index_list,[&](std::size_t lhs,std::size_t rhs){return p[lhs] < p[rhs];}); // constexpr なsortがC++17のstd::* に無いので sproutを使っている
    }();
    
    template<std::size_t...i>
    static auto trans(std::index_sequence<i...>) -> std::tuple<std::tuple_element_t<index[i],input>...>;
    
    using type = decltype(trans(std::make_index_sequence<sizeof...(T)>{}));
};


```

```C++:main.cpp
struct hoge3_1{static inline std::string name="hoge3_1";};
struct hoge2_1:hoge3_1{static inline std::string name="hoge2_1";};
struct hoge2_2:hoge3_1{static inline std::string name="hoge2_2";};
struct hoge1_1:hoge2_1,hoge2_2{static inline std::string name="hoge1_1";};

int main()
{
    using in = std::tuple<hoge1_1,hoge3_1,hoge2_1,hoge3_1,hoge2_1,hoge1_1>;
    using out = deps_sort<in>::type;
    
    std::cout<<"in"<<std::endl;
    std::apply([](auto...e){
        for(auto s:{e.name...}) std::cout<<s<<" ";
    },in{});
    std::cout<<std::endl;
    
    std::cout<<"out"<<std::endl;
    std::apply([](auto...e){
        for(auto s:{e.name...}) std::cout<<s<<" ";
    },out{});
    std::cout<<std::endl;
}

```
実行結果

https://wandbox.org/permlink/haB3J3tCry1Xdvc2

```
in
hoge1_1 hoge3_1 hoge2_1 hoge3_1 hoge2_1 hoge1_1 
out
hoge3_1 hoge3_1 hoge2_1 hoge2_1 hoge1_1 hoge1_1 
```
カラムの内容を変更して、再度migrate時にエラーが出る時の対処法

#はじめに
Djangoのmodels.pyに記述したカラムの内容を変更して、再度migrateした時に、tableに関するエラーが出た時の対処法をまとめます。

#開発環境
OS:macOS Mojave(10.14.4)

#対処法
①db.sqlite3ファイルを削除する
②migrateディレクトリ下にあるファイルと、pycache下にあるファイルを削除する
③以下のコマンドを打つ

```python
$ python manage.py makemigrations
$ python manage.py migrate
```
無事エラーは解決されましたでしょうか。

#参考記事
[Django - no such table exception](https://stackoverflow.com/questions/34548768/django-no-such-table-exception)
GoogleカレンダーAPIを用いてカレンダー一覧を取得する

# はじめに
いよいよ平成最後の日になりました。GoogleカレンダーのAPIを使う機会があったので、Google Calendar APIに関する記事を投稿します。

# 前提
+ Googleの開発者アカウントが作成済みであること
+ Calendar APIを有効化して、APIキーの取得ができていること

## やりたいこと
+ Googleカレンダーで所有しているカレンダーの一覧を取得する（共有カレンダー含む）

一つ一つのカレンダーにIDが割り振られているため、動的にカレンダーの一覧を取得して、その中から特定のカレンダーを指定して操作することが可能になります。

## 実装
本記事では、カレンダーの一覧を取得してログに出力するための実装を記載します。

```getAllCalendarList.js
'use strict';
const url = require('url');
const https = require('https');

const HTTP_RESPONSE_OK = 200;
const ACCESS_TOKEN = 'API実行に必要なアクセストークン';

// カレンダー一覧取得のためのAPI
let options = url.parse("https://www.googleapis.com/calendar/v3/users/me/calendarList");
options.method = "GET";
options.headers = {
    "Authorization":"Bearer " + ACCESS_TOKEN,
};

let req = https.request(options, (res) => {
    let data = "";
    res.setEncoding("utf8");
    res.on("data", (d) => {
        data += d;
    });

    res.on("end", () => {
        if (res.statusCode === HTTP_RESPONSE_OK) {
            let resBody = JSON.parse(data);
            // カレンダー一覧が存在する場合に、一覧をコンソールログに出力
            if(resBody.items) {
                // 取得するカレンダーリストの最後２つは「誕生日」と「日本の祝日」カレンダーのため無視する
                for(let i=0, len=resBody.items.length; i < len-2; i++) {
                    console.log(`${(i+1)}：${resBody.items[i].summary}`);
                }
            }
        } else {
            // エラー（HTTPレスポンスコード200以外）
            console.log('HTTPレスポンスコード : ' + res.statusCode);
        }
    });
});

req.on("error", (e) => {
    console.log('エラー発生');
});
          
req.end();

```

#おわりに
GoogleカレンダーAPIだけでもさまざまな機能が提供されています。Google開発者コンソールではAPIに必要なパラメータを入力して実行する環境が提供されているので試しながら実装を進められました。またGoogleAPI関連の投稿ができればと思います。
それではまた令和の時代に。。。
Visualization Toolkit (VTK) のインストール on Ubuntu (CUI)

以前 Visualization Toolkit を Windows 上でビルドしたときのメモを[ここ](https://qiita.com/MusicScience37/items/0d197b4fed062b880db1)に書きましたが、今回は Ubuntu 18.04 のサーバーに ssh 接続した CUI しか使えないという環境の中でビルドしました。
この記事と同じ問題にぶつかる方なら ssh 接続くらい触っていると思いますので、基本的なコマンドの説明は省きます。それ以外にも、今回は細かい説明をあまり加えていませんので、コマンドの使い方は Google に聞いてください。

# 使ったもの

- Ubuntu 18.04 (Google compute engine 上のものへ putty を使って ssh 接続)
- cmake 3.10.2
- ccmake 3.10.2
- gcc, g++ 7.3.0
- git 2.17.1

ccmake は `sudo apt install cmake-curses-gui` でインストールできます。
他は名前そのままで apt が探してくれます。

# ソースコードのダウンロード

[VTK の wiki](https://vtk.org/Wiki/VTK/Configure_and_Build) によると git でソースコードがダウンロードできるそうですので、git でダウンロードします。なお、git リポジトリは[ここ](https://gitlab.kitware.com/vtk/vtk)から覗いてみてください。（欲しいバージョンのコミットのハッシュ値を見るのに使います。）

適当にフォルダを作って（私は ~/programs/VTK にしました）、そのフォルダに移動した後に次を実行します。

    git clone https://gitlab.kitware.com/vtk/vtk.git src

これで src フォルダにソースコード（とその改変履歴）がダウンロードされました。
次に、欲しいバージョンへ git を使って移動します。ここでは、version 8.2.0 が欲しかったため、src フォルダの中に入って

    git checkout  e3de2c35

を実行しました。これで、欲しいバージョンのソースコードを手に入れることができました。

# ビルド

ソースコードが手に入りましたので、ビルドに移ります。
まず、src フォルダの隣に build フォルダを作り、その中に移動します。
そこで `cmake ../src` を実行してしばらく待ちます。（少し重めの処理がしばらく続きます。）

しばらく待ち、処理が終わったら、`ccmake ../src` を実行します（c は 2 つです）。
下の図のように設定項目名（左）と設定内容（右）が出ます。（青く塗りつぶしている箇所にはユーザー名が入ります。）
この画面でカーソルを上下のキーで動かしては Enter を押して変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229492/c0c856b5-2d3f-e400-86a3-de285099ed08.png)

私の場合は図のように BUILD_TESTING, CMAKE_BUILD_TYPE, CMAKE_INSTALL_PREFIX を変更しました。
あとは、画面下の使い方にある通り、c を押してもう一回 cmake の処理を回して、オプションが新たに出現したらそれを直して…の繰り返しのあと、q を押して終了します。

ここまで来ると、build フォルダにライブラリのビルドをするための Makefile ができています。make コマンドを走らせましょう。（環境に余裕のある方は並列ビルドのオプションを付けてもいいかもしれません。）
※ make には非常に時間がかかります。途中で一旦接続を切りたい方は screen コマンドとかを使って make を放置できるようにする準備をしてください。

make コマンドが終わったら、インストールのため `make install` を実行します。（こちらは並列化しなくてもすぐ終わります。）
最後に、環境変数の設定をします。.bashrc に

    export VTK_DIR=~/programs/VTK/install
    export LD_LIBRARY_PATH=~/programs/VTK/install/lib:$LD_LIBRARY_PATH

のようにインストール先（CMake が VTK を探すときなどに使う）を VTK_DIR 変数に代入し、インストール先の lib フォルダを LD_LIBRARY_PATH （ライブラリを探すときに見るフォルダ）に追加します。

これでインストールまで終わりです。何かテスト用のプログラムを実行してみたりして動作するかどうか確認してみてください。
Elementary OS 5.0 Junoで無線LANを使えるようにする

## 問題点

Elementary OSを入れたら、イーサネットしか使えなかった。
以下で無線LANデバイスの詳細を確認。

```code:bash
sudo lshw -C network
```

RTL8821CEのドライバを手動でインストールする必要があった。

## ドライバのインストール
早速インストールしていく。

```code:bash
sudo apt update
sudo apt install dkms git 
sudo git clone https://github.com/tomaspinho/rtl8821ce.git
cd rtl8821ce
sudo ./dkms-install.sh
sudo modprobe 8821ce
```

これで無線LANが使えるようになる。
2019年 Vue.js + Electron の環境構築は vue-cli-plugin-electron-builder がおすすめ

今まで Vue.js + Electron の組み合わせでプロジェクトを作成するには electron-vue が定番でした。
しかし、Vue CLI がバージョン3になり、Webpack 周りの設定を意識することなく TypeScript などが手軽に導入できることに慣れてしまうと、Vue CLI 2 ベースの electron-vue で新規プロジェクトを作るのは若干面倒に思えてしまいます。
検索してみたところ、Vue CLI 3 のプラグインである vue-cli-plugin-electron-builder というのが見つかり、大変便利だったのでご紹介させていただきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158453/b754d8f7-3f53-be7a-c8d2-a69341b3e041.png" />
公式サイト https://nklayman.github.io/vue-cli-plugin-electron-builder/

# 導入方法
Vue CLI 3 がインストールしてあり、すでにプロジェクト作成済みの状態で、

```shell
vue add electron-builder
```
と入力すると、 Electron や依存パッケージがインストールされるほか、いろいろと設定やファイルを追加してくれます。

※ `vue ui` のプラグイン画面からでも追加できます

## 追加されるもの
### .gitignore
アプリケーションビルド先のディレクトリ `/dist_electron` が .gitignore に追加されます。

### package.json
プロジェクトルートの package.json に npm スクリプトがいくつか追加されます。
重要なのは以下の2つです。

#### `electron:build`
ビルドコマンド。`/dist_electron` ディレクトリに Electron アプリケーションやインストーラが書き出されます。
#### `electron:serve`
Dev サーバ起動。Electron ウィンドウが立ち上がり、ホットリロードしながら開発できます。

### src/background.js
Electron 起動スクリプトのファイルが新たに作成されます。
メインウィンドウの作成や、すべてのウィンドウが閉じられた時にアプリケーション終了（Mac OS除く）などのテンプレ的な内容に加え、開発時は起動後に DevTools を開く、といった処理が書かれています。
ちなみに Vue CLI で TypeScript を選択したプロジェクトの場合、拡張子がちゃんと `.ts` になっていて感心しました。


# electron-vue との違い
一番の違いはディレクトリ構成でしょうか。
electron-vue は `/app/src` の下がメインプロセス用とレンダラプロセス用のディレクトリに分かれていますが、 vue-cli-plugin-electron-builder は Vue CLI のディレクトリ構成のままなので、`/src` に両方のファイルが置かれることになります。

また、electron-vue は 設定ファイルが細かく分かれていますが、vue-cli-plugin-electron-builder は Vue CLI の設定ファイル `vue.config.js` を使用します。

electron-vue も vue-cli-plugin-electron-builder もしっかり使い込んでいるわけではないので、他にも違いがあったらお知らせください。

# まとめ
公式サイトの[ガイドページ](https://nklayman.github.io/vue-cli-plugin-electron-builder/guide)には、インストール方法から使い方、各種設定、アイコン作成方法などのTipsやFAQ的なページなどがあり、しっかり作りこまれていて安心感があります。
既存プロジェクトにも簡単に Electron を導入できるのも大きな強みですね。
Vue.js + Electron の新たな定番になりそうなポテンシャルを秘めているのではないでしょうか。
お名前.comで取得したドメインをさくらのVPSで利用する

#おおまかな流れ

- ドメイン取る
- さくらの管理画面から新規にネームサーバとしてドメインを登録する（ゾーンの追加）
- ドメイン名にIPアドレスを割り当てる（簡単設定）
- ドメイン取得元でネームサーバ変更を行う（さくらのネームサーバの値を設定する）

#ドメインを取る

僕は種類が豊富なので[お名前.com](https://www.onamae.com/)で取得しています。
whoisの情報公開代行も設定されるので個人で取るには何かとセキュアで便利です。（※[詳細](https://www.onamae.com/service/d-regist/option.html)）

#さくら側の設定（ゾーン設定）

[さくらのVPSの管理画面](https://secure.sakura.ad.jp/menu/domain/index.php)からネームサーバ新規登録し、ゾーンの追加をします。

その後に、ゾーンの編集からさくらのネームサーバにVPSのIPアドレスを設定します。
設定方法は複数ありますが、迷わず初心者におすすめの簡単設定を選択します。

webとmail、ftpのホスト勝手に自動生成してくれます。
NSは下記に設定されます。不安なら自分で立ち上げましょう。

- ns1.dns.ne.jp.
- ns1.dns.ne.jp.

##は？って人向け

わかります。難しいですよね。
下記のページを読みましょう。
言ってる僕もよくわかりません。

- ドメインとかホスト名とかFQDNとかがそもそもわからんって人は[コチラ](https://www.cman.jp/network/term/domain/)
- DNSについては[IIJのサイト](http://manual.iij.jp/dns/help/1480651.html)がわかりやすいです。

ゾーン設定とは取得したドメインにIPアドレスなどを設定する事です。
ゾーンとは権威DNSサーバが管理する範囲の事です。

#お名前.com側の設定（NSの変更）

[ココ](https://www.onamae.com/domain/navi/ns_update/input?btn_id=navi_domain_icon_nsmanage_nsupdate_6624320_1)から出来ます。
取得したドメインが出ているはずなので、選択して"他のネームサーバを使用"のタブを選択します。

プライマリとセカンダリのネームサーバの入力欄がありますので（他にもあるけど）そこにさくらのネームサーバの値を入力します。

さっきのコレ

- ns1.dns.ne.jp.
- ns1.dns.ne.jp.

さくらのゾーンの追加設定をした時に出たNSレコードの値ですね。
全く画像を用いる気がないので、ものすごいわかりにくいですね。
自分用のメモが主な使い道なのでご容赦ください。
IDとかモザイクにするのが面倒で。。
とあるRailsエンジニアが再就職活動を共有したがっているようだ 2019-04-29 on Twitter

# とあるRailsエンジニアが再就職活動を共有したがっているようだ 2019-04-28 on Twitter


<a href="https://twitter.com/YumaInaura/status/1122517914265976832">2019-04-28 15:08:20 UTC</a>
# コピペプログラミングが心底嫌いでちょっと損してきた気がする。



<a href="https://twitter.com/YumaInaura/status/1122675702405296129">2019-04-29 01:35:20 UTC</a>
# Mac で django を始める最小手順のコマンドを羅列する ( python )


<a href="https://twitter.com/YumaInaura/status/1122679417854152704">2019-04-29 01:50:06 UTC</a>
# django で docker mysql コンテナに対してマイグレーションする ( python )


<a href="https://twitter.com/YumaInaura/status/1122693252199612417">2019-04-29 02:45:04 UTC</a>
# 銭湯に入るたびに銭湯力を高めるエンジニアのぺぺ子さん。


>久しぶりに
>・買い物以外は外に出ない
>・疲れたら寝る
>といった怠惰な一日を過ごせて大変満足です。
>
>これから銭湯に行って洗濯して寝ます。無計画な連休って贅沢だな。

<a href="https://twitter.com/YumaInaura/status/1122696279547449345">2019-04-29 02:57:06 UTC</a>
# そもそも安泰が嫌いなのがエンジニア気質。


>安泰は衰退の始まりだと思ってる。
>
>銀行に入っとけば安泰
>の時代が終わって
>エンジニアになっとけば安泰
>の時代がなかばって感じ
>
>歴史は繰り返す。

<a href="https://twitter.com/YumaInaura/status/1122705487659618305">2019-04-29 03:33:41 UTC</a>
# 資格を持たないのはブラックジャックエンジニア。


>ネタの解説恥ずかしいですが・・・
>
>ブラックジャック=無免許医師なのに凄腕
>
>他の医師=免許持ってるのにブラックジャックより腕は良くない。
>
>というネタなのです。
>そもそも、エンジニアは料理人みたいなもので、資格を持ってるからといって、料理の腕が良いとは限らないのは重々承知ですのよ😉

<a href="https://twitter.com/YumaInaura/status/1122717755210256385">2019-04-29 04:22:26 UTC</a>
# 余裕のdocker宣言。
さすがてんさい。

>さーてdockerたるものを使ってみるかぁ
>まずはnginxで試してみる

<a href="https://twitter.com/YumaInaura/status/1122719766131531777">2019-04-29 04:30:26 UTC</a>
# Mac で django を始める最小手順のコマンドを羅列する ( python )  2019-04-28 on Twitter


<a href="https://twitter.com/YumaInaura/status/1122727897012363264">2019-04-29 05:02:44 UTC</a>
# 資格を持たないのはブラックジャックエンジニア。
  2019-04-28 on Twitter


<a href="https://twitter.com/YumaInaura/status/1122772794582999043">2019-04-29 08:01:08 UTC</a>
# 就職って大ギャンブルだよね。
フリーランスは小さなギャンブルをひたすら続けていくイメージがするな。

>フリーランス目指す人って何を求めてるのだろう？
>
>「スキル=収入に直結する」は実際はスキル証明も仕事獲得も大変
>
>「正社員特有の理不尽が無い」は実際は交渉で理不尽多い
>
>そして税金怖い
>守ってくれる会社がなくて怖い
>
>正直、社会不適合すぎた人がやむなく選ぶ過酷な道と思ってた
>今のブームが謎

<a href="https://twitter.com/YumaInaura/status/1122818724640149504">2019-04-29 11:03:39 UTC</a>
# プログラマ収入のピンキリのキリの代表なんて。


>時給900円の
>プログラミング
>求人広告を見て震えてる
>
>「
>JAVA、PHP、C＃が使える方 
>」

<a href="https://twitter.com/YumaInaura/status/1122819375705116672">2019-04-29 11:06:14 UTC</a>



# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
esxi6.7で仮想マシンにUSBカードリーダをパススルーする方法


#esxi6.7で仮想マシンにUSBカードリーダをパススルーする方法

esxi6.5以降だとUSBカードリーダを仮想マシンにパススルーしても、仮想マシンを起動したら"切断済み"と表示され使用できなかった。
![screenshot-192.168.11.3-2019.04.30-00-38-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404125/854da59e-509e-c9bf-91ac-4a92250d01ee.png)


色々調べると、ドンピシャな公式ドキュメントがあったのでその通りやったらうまくいった。
[ESXi 6.5 以降でゲスト OS に USB スマート カード リーダーをパススルーできない(55789)](https://kb.vmware.com/articleview?docid=55789&lang=ja)
公式の手順ではvmxファイルを直接テキストエディタなどで編集するようになっているが、web clientからも編集することができたのでその手順を記す。

##手順
手順を実施する前に、仮想マシンをパワーオフする。
###構成設定ファイルにパラメータを追記する
仮想マシンの"設定の編集"を開き"仮想マシンオプション"を選択する。<img width="589" alt="screenshot-192.168.11.3-2019.04.30-00-50-47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404125/926549bd-408e-7af7-9dc5-dab7bad5bfb1.png">
"詳細"を展開し、その中の"構成パラメータ"の"構成の編集"を選択する。
<img width="585" alt="screenshot-192.168.11.3-2019.04.30-00-53-04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404125/a38534ca-9955-2762-d573-d262596d8e31.png">

左上のパラメータの追加をクリックするとパラメータが追加されるので、キーに"usb.generic.allowCCID"を値に"TRUE"を入力する。
![screenshot-192.168.11.3-2019.04.30-00-55-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404125/1f3840b8-dd51-c53c-f530-6a3890f9edab.png)

すると、仮想マシンを起動してもカードリーダは切断済みではなく接続済みとなり、問題なく使用できるようになった。
![screenshot-192.168.11.3-2019.04.30-00-59-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404125/ff098ffd-8cb1-e6ea-73f7-754f9086d9ab.png)
[Rails]deviseでreset_password_tokenが不正と言われる

## 先に結論

`devise-i18n-views`の影響で、ユーザーのパスワード変更が出来なかった。
[README](https://github.com/mcasimir/devise-i18n-views)にもかいてあるが、このgemは[devise-i18n](https://github.com/tigrish/devise-i18n)にマージされたのでこっちを使うようにする。

## 環境

- rails 5.2.3
- devise 4.6.2
- devise-i18n 1.8.0
- _devise-i18n-views 今回これが要らなかった話_

## 何が起こった

deviseで管理しているモデルのパスワード変更をしようとしたらトークンが不正だと言われる。

1. ログイン画面から「パスワードを忘れた」をクリック
2. 登録されているメールアドレスを入力して送信
3. 確認メール内のリンクをクリック
4. パスワード再設定のフォームが開くので、新しいパスワードを入力
5. **reset_password_tokenが不正だと言われる** orz

## 調査

「rails devise reset_password_by_token invalid」とかでググってみると、この手の話題は幾つか見つかった。
[このissue](https://github.com/plataformatec/devise/issues/4446)とか参考になった。
具体的に、deviseはreset_password_tokenを作成するときに、以下のようなコードになっていた。

```rb
def set_reset_password_token
  raw, enc = Devise.token_generator.generate(self.class, :reset_password_token)

  self.reset_password_token   = enc
  self.reset_password_sent_at = Time.now.utc
  save(validate: false)
  raw
end
```
>https://github.com/plataformatec/devise/blob/master/lib/devise/models/recoverable.rb#L89

で、この戻り値 `raw`を受け取ってパスワードリセットメールを送信している

```rb
def send_reset_password_instructions
  token = set_reset_password_token
  send_reset_password_instructions_notification(token)

  token
end
```

この処理を見ると、実際はDBに保存されている `reset_password_token`の値とパスワードリセットのメールに記載されている`reset_password_token`は違うものだった

`localhost:3000/users/password/edit?reset_password_token=vu9utDw1Mri848sEqPYf` ←これ

[issue](https://github.com/plataformatec/devise/issues/4446)にも書いてある通り、このリンクが書いてあるのはviewのmailer配下なので、問題があるとすればここだと思った。

が、今回はdeviseのファイルを翻訳するために

- devise-i18n
- devise-i18n-views

というgemを入れていた。

`devise-i18n-views`のソースコードを調べたところ、 [ここ](https://github.com/mcasimir/devise-i18n-views/blob/master/app/views/devise/mailer/reset_password_instructions.html.erb#L6)が原因となっていた。

```rb
(Devise::VERSION.start_with?('3.') ? @token : @resource.reset_password_token)
```

deviseは4.6.2なのでfalseが実行されていた。。。

## 対応

1. Gemfileから`devise-i18n-views`を削除
2. bundle update
3. bundle clean
CNNでよく見かけたり使えるksizeとかをまとめる

# 動機
ResNetなどでいつも同じカーネルサイズだったり、特定の値が使われてたりするのはなんでだろうと悩んでいたので自分がわかる範囲でまとめました（ちょっとしかない）。あとついでによく見るけどわからなかった略称。

# まとめる
(ksize = 1): 任意のチャンネル数に変えられるため便利
(ksize = 3, stride = 1, pad = 1): 出力サイズが入力サイズと変わらないため便利
(ksize = 4, stride = 2, pad = 1): 入力サイズが2 ^ nのとき、出力サイズが入力サイズの半分になる
(ksize = 3, pad = m、dilate = m): 出力サイズが入力サイズと変わらないため便利
(ksize = 2, pad = m、dilate = 2 * m): 出力サイズが入力サイズと変わらないため便利

これしかない...

# 略称
CV: Computer Vision
NLP: Natural Language Processing


皆さんの知っているtips教えてください
STM32 Nucleoって何？

STM32って何ですか？
という質問がありました。
ArduinoやRaspberryPiはメジャーでもSTM32は知らないという人が意外といます。

STM32はSTマイクロエレクトロニクスが販売してるArm社のCortexという32bitマイコンのことです。
STM32にはSTM32F4やL1とかあるけど何が違うの？

STM32には現在、CortexM0,M0+M4,M7そして、近年CortexA7の製品が登場しました。
数年前まではシングルコア（CPUが1個しかない）のものしかありませんでしたが
近年はWBというワイヤレスとデュアルコアのマイコンもがあったりと混迷しています。

じゃあ、何を使えばいいの？
と思われると思います。

まずは、使用用途に合わせて選んでみましょう。

電池などで使う場合LowPowerであるLxシリーズを選びましょう。
Fｘシリーズに比べると、低電圧の設定項目が多く、低消費電力化しやすいそうです。
逆に、高度な計算などをさせたい場合は、Fxシリーズをお勧めします。

比較表はこちらにあります。
https://www.st.com/ja/microcontrollers-microprocessors/stm32-32-bit-arm-cortex-mcus.html
しかし、正直、どれを選べばいいかわからないですよね？

Arm社のCortexは数字が大きい方が、性能がいいと考えください。
当初でた、CortexM3よりM4の方が高性能で、M0が下です。

初めて使うという人は、CortexM4のF4やL4のものを選びましょう。

それでは、Nucleoって何でしょうか？
ラインアップは、以下のようです。
（C)https://www.st.com/content/st_com/ja/products/evaluation-tools/product-evaluation-tools/mcu-mpu-eval-tools/stm32-mcu-mpu-eval-tools/stm32-nucleo-boards/nucleo-f334r8.html）

<img src="https://www.st.com/content/ccc/fragment/product_related/line_information/line_level_diagram/f0/b8/25/69/66/01/45/dd/ln1847_stm32_nucleo.jpg/files/ln1847_stm32_nucleo.jpg/_jcr_content/translations/en.ln1847_stm32_nucleo.jpg">

Nucleoとは、STM32が簡単に使用できるようにしたマイコンボードになります。
Arduinoと何が違うのか？
Arduinoは、Atmel社のATmegという8bitマイコンを簡単に使用できるようにしたものです。
（有料のソフトなどを使用せずに、無料で使えるために、多くのユーザーに使われています）
STM32はArm社のCortexという32bitマイコンで、近年、Arduinoでも使用することもできるようになりました。

Nucleoの何が良いの？ですが、32bitマイコンを簡単に、安易に使用できることが挙げられます。
32bitのArmマイコンは実は、いろいろな種類があり、STM32は中国ではBluePillとして1ドル程度で購入可能です。
また、秋月電子などでは、LPCやPaso4などが600円程度から購入可能です。
が、Arduinoのシールドを使うためには、ジャンパーケーブル（コネクター）が必要だったりとArduinoの拡張ボード(SHield)のように初心者には簡単ではありませんでした。
STマイクロのNucleoの利点は、ArduinoのShieldの端子により、簡単に拡張可能な点があります。
そして、STマイクロがサンプルソフトウェアを用意しており、容易に、簡単に、かつかなり確実に使用が可能です。

拡張ボードであるX-Nucleoのラインナップは以下のようです。
https://www.st.com/ja/ecosystems/stm32-nucleo-expansion-boards.html#products

最後に、展示会等で、デモや、無償配布を行っており、入手の容易性もあり、STM32 Nucleoはぜひ触ってもらいたい製品だと思っています。
ちなみに、法人だけでなく、学生向けのセミナーもあるので、機会があればいかがでしょうか？？
https://www.stmcu.jp/event/
[Android] ２つの日付の差分を簡単に計算する

# 概要
例えば **2008/9/23** 〜 **今日** の間って， **何日間？何ヶ月間？何年間？**

みたいなことをJava/KotlinのDateとかCalenderを使ってやろうとすると，日付をUnixTimeに直して引き算してさらにパースし直して・・・，となります．

そんな時に活躍するのが `LocalDate` なのですが，これがなんとminSdk26以上と手厳しい．
これが今回解決する課題です．
<img width="571" alt="スクリーンショット 2019-04-30 0.13.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181933/2e93c91c-2ac8-a371-10fa-ff1f2ad865b3.png">

（ちなみに 2008/9/23 はAndroid1.0が出た日なのです）

# 解決策
なんとあのJakeWharton神が，このAndroid用のバックポートライブラリを作ってくれているのです．

> **ThreeTen Android Backport**
> https://github.com/JakeWharton/ThreeTenABP

これを使うことで，minSdkを気にせずLocalDateを使用することができます．


# 使い方
まずGradleに下記を記述します．

```gradle:app/build.gradle
dependencies {
    ...
    implementation 'com.jakewharton.threetenabp:threetenabp:1.2.0'
}
```

これにより， 
`java.time.LocalDate` 
に存在したLocalDateに加え，
`org.threeten.bp.LocalDate`
が使用可能になりました．こちらを使います．

たとえば 2008/9/23 〜 今日（執筆：2019/4/30） 間の差分日数・月数・年数を調べてみましょう．

```kotlin
val androidFirstRelease = LocalDate.of(2008, Month.SEPTEMBER, 23)
val today = LocalDate.now()  // 2019/4/30
val period = Period.between(androidFirstRelease, today) 

> period.days -> 7
> period.months -> 7
> period.years -> 10

// java.time.Month ではなく org.threeten.bp.Month を使うことに注意
```

となり，Androidのファーストリリースから10年7ヶ月7日経っていることがわかりました．

LocalDateの使い方は基本的にJava8に乗っているデフォルトのLocalDateと同じですので，そちらを見ると良いでしょう．
> [覚えたら書く - java.time.LocalDate](https://blog.y-yuki.net/entry/2016/09/15/003000)

これでUnixTimeに戻して・・・なんてやらなくても大丈夫ですね！
お疲れ様でした．
sparkで改行の入ったcsvを集計したいときはoption("multiLine", "true")をつければいいよ

こういうcsvを読み込みたい時はこうする

```sample.csv
1,"改行入り
とても長いタイトル1","body1"
2,"改行入り
とても長いタイトル2","body2"
```

```spark-shell
val df = spark.read.option("multiLine", "true").csv("sample.csv")
df.show
+---+----------------------------+-----+
|_c0|                         _c1|  _c2|
+---+----------------------------+-----+
|  1|改行入り
とても長いタイトル1|body1|
|  2|改行入り
とても長いタイトル2|body2|
+---+----------------------------+-----+
```

ちなみにoptionをつけないと下記のように改行で分けられちゃいます。
よくやらかしがちなので気をつけましょう。

```
val df = spark.read.csv("sample.csv")
df.show
+--------------------+--------+
|                 _c0|     _c1|
+--------------------+--------+
|                   1|改行入り|
|とても長いタイトル1"|   body1|
|                   2|改行入り|
|とても長いタイトル2"|   body2|
+--------------------+--------+
```
【あとで書き足す】Vuex勉強

# State
### Vue ComponentをVuex Stateへと値を取ってくる
一番シンプルなやり方はcomputedプロパティの中でStoreのStateをreturnすること

```javascript
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}
```
この場合、Storeのstateを使うcomponentで毎回storeをimportしなければならない

Vuexはすべての子コンポーネントにStoreを注入するstoreオプションを提供している

```javascript
const app = new Vue({
  el: '#app',
  // 全ての子コンポーネントにstoreを注入する
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

// こっちでも良い
Vue.use(Vuex)
```

vueコンポーネント内で、this.$storeでstoreにアクセスできるようになる

```javascript
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
```

# mapState

複数のstoreのstateのプロパティを使う場合は、冗長になるためmapStateを使う

```javascript
// in full builds helpers are exposed as Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // arrow functionsを使うと短く書ける
    count: state => state.count,

    // 文字列の 'count' を書くのは `state => state.count`と書くのと同じ処理になる
    countAlias: 'count',

    // thisでローカルstateにアクセスする場合は、arrow functionではなく、nomal functionを使う
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
```

### spread operator 
https://vuex.vuejs.org/guide/state.html

# Getters
GetterはcomputedのStore版っぽい

```javascript
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    // GetterはStateを第一引数として受け取る
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
```

### MapGetters

```javascript
import { mapGetters } from "vuex";

export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
```

Getterを違う名前でマッピングしたい場合は、オブジェクトを使う

```javascript
...mapGetters({
  // map `this.doneCount` to `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
```
obniz入門レッスン(html 距離測定編）

#距離測定センサ
秋月電子通商さんで[シャープ測距モジュール　ＧＰ２Ｙ０Ａ２１ＹＫ](http://akizukidenshi.com/catalog/g/gI-02551/) を入手しました。
![距離センサ_01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/2a39a8f4-2b62-9299-7892-1a72d9255659.png)
[アプリケーションノート](http://akizukidenshi.com/download/ds/sharp/gp2y0a_gp2y0d_series_appl_e.pdf) によると、枠が小さいほうの右目（赤外線LED）が対象物に光を当てて、
枠が大きいほうの左目（PSD:Position Sensing Device）でその反射を受けることで電圧が変化し、
それによって距離を測定するということのようです。
![距離センサ_02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/8b6343b6-dd78-d84a-1f82-1fec553aff13.png)
#プログラム
[9wickさんの「Web技術でIoTをしよう」](https://9wick.booth.pm/items/1317247) を参考にさせて頂いて作ってみました。

```
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.0.2/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>

    <div id="obniz-debug"></div>
    <h1>距離を測ります</h1>

    <script>
      var obniz = new Obniz("7517-4418");
      obniz.onconnect = async function () {

        var sensor = obniz.wired("GP2Y0A21YK0F", { vcc:0, gnd:1, signal:2 } );
        while (1) {
          var val = await sensor.getWait();
          obniz.display.clear();
          obniz.display.print("distance " + val + "mm");
          console.log("distance " + val + "mm");
          await obniz.wait(1000);
        }
      }
    </script>
  </body>
</html>
```

#計測してみる

次の箇所の処理に基づいて

```
console.log("distance " + val + "mm");
```

ブラウザ側では対象物からの距離が記録されていきます。
![距離センサ_03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/12db0e7b-67b0-4e06-865f-10b197a7a748.png)
次の箇所の処理に基づいて


```
          obniz.display.clear();
          obniz.display.print("distance " + val + "mm");
```

obniz 側でも対象物からの刻々の距離が表示されます。
対象物を近づけたときと遠ざけたときの値に差があります。
精度の評価は置いておいて、とりあえず成功としておきます。
![距離センサ_05.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/ad7bb9ad-bd6e-9db3-3fe3-3461d19f2bc7.png)
![距離センサ_04.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/2025fd14-ae71-4937-8a86-209c4c6e880a.png)

#まとめ
・前回の [html Lチカ編](https://qiita.com/azumabashi/items/77e923574d32a641d60f) では制御、今回は計測とアウトプット、インプットができることが確認できました。
・次は、センサーやアクチュエータの種類を増やして実験するということを少しやってみて
・その次に、Websocket API、Python などからのコントロールをやってみて
・そうやっていろいろやりながら eneblarから動かせればいいな。
Asciidocでドキュメント作成をしてみた

# 始めに
**個人的なメモをベースに少し体裁を直しています。**
システム開発・保守運用でほぼどこでもドキュメントを作成します。会社によって色々なファイル(Excel,Word etc)で作成していますが、これらのファイルは経験上こんな面倒に当たりました。

- いざ目的のドキュメントを探そうとしても見つからない。
- 統一したテンプレートがないから、一からテンプレートを作成する必要がある
- 印刷レイアウトを考えてしまう
- 歴史を重ねると最新の居場所が分からなくなる

# Asciidocとの出会い
Wordでテンプレートを作成したり、運用ルールを作ったりしたのですがメンバーが増えると人の数だけ多様性が発生し、レビューでストレスがたまりました。
代替を色々と探し色々と試してAsciidocが現段階で一番楽なのかな？という結論に達しました。

# Asciidocの始め方
Asciidocは基本テキストファイルなのでテキストエディタで作成できます。IDEを使うとPreviewを確認しながら作成できるます。Asciidoctorのサイトで調べると以下のエディタがあるようです。

[Editing AsciiDoc with Live Preview
](https://asciidoctor.org/docs/editing-asciidoc-with-live-preview/ "Asciidoctor")

VisualStudioCodeを使っている人が多いようですが、個人的にIntelliJを使っています。
VisualStudioCodeのPreviewプラグインは更新の度にページの先頭に飛んでしまい、長文を書くと煩わしさを感じました。

## Asciidocの構文
色々と書き方などたくさんあるので都度記事を作成し、ここからリンクを作成していきます。

[ドキュメントヘッダーを設定する
](https://qiita.com/asz2145/items/e6d71d79c91b85aa8cd7)
PythonのShallow CopyとDeep Copy

Pythonで辞書やリストをcopyメソッドでコピーすると、javaのclone()と同じように浅いコピーとなるようだ。

```python:test1.py
mydict = {'val': 'aa', 'dict': {'val': 'bb'}}
copy_dict = mydict.copy()
print(mydict)
# -> {'val': 'aa', 'dict': {'val': 'bb'}}
print(copy_dict)
# -> {'val': 'aa', 'dict': {'val': 'bb'}}
copy_dict['val'] = 'aa modified'
copy_dict['dict']['val'] = 'bb modified'
print(mydict)
# -> {'val': 'aa', 'dict': {'val': 'bb modified'}}
print(copy_dict)
# -> {'val': 'aa modified', 'dict': {'val': 'bb modified'}}
```
copy_dictで{'val': 'aa'}部分を書き換えても、mydict側は書き換わらないが、{'dict': {'val': 'bb'}}部分を書き換えると、mydict側も書き換わってしまう。
つまり、copyメソッドでは再帰的にオブジェクト自体のコピーをしてくれないらしい。
これは、deepcopyを使うことで解決できる。

```python:test2.py
from copy import deepcopy

mydict = {'val': 'aa', 'dict': {'val': 'bb'}}
copy_dict = deepcopy(mydict)
print(mydict)
# -> {'val': 'aa', 'dict': {'val': 'bb'}}
print(copy_dict)
# -> {'val': 'aa', 'dict': {'val': 'bb'}}
copy_dict['val'] = 'aa modified'
copy_dict['dict']['val'] = 'bb modified'
print(mydict)
# -> {'val': 'aa', 'dict': {'val': 'bb'}}
print(copy_dict)
# -> {'val': 'aa modified', 'dict': {'val': 'bb modified'}}
```
JavascriptのGeneratorで簡易対話式チャットボットもどき 

この記事は [なんか書く太郎｜GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/31) 4日目の記事です。

昨日は @yusaka39 さんの [Kotlin Serialization + Jersey で RESTful API](https://qiita.com/yusaka39/items/a26e52c85ea6f68af730#_reference-675045c5cb8e3f7057a3) でした。


## 前置き
サーバサイドエンジニアなのですが
少し前からJavaScriptを学習しています。

先日JavaScriptのIteratorを学習したのでGeneratorで少し遊ぼうと思っています。
簡単なチャットボットを作ろうと思ったのですが家族でホルモンを食べて酔っ払った状態で先程帰宅して寄稿まで時間がないので大した内容を書けそうにありません。

localのnode.jsで用意したGeneratorのファイルをimportして遊びます。

好きなジャンルとエリアを指定して、Rettyさんの検索URLを生成して返すというシンプルなアプリケーションをイメージしています。


```
exports.default = () => {
  function* gen() {
    console.log('好きなジャンルはなんですか？')
    let cat = yield 'start'

    if(cat.match(/.*焼肉.*/)) {
      console.log('やはり' + cat + 'ですね')
    } else {
      console.log('う~ん焼肉以外ですね')
      console.log('焼肉を選んでください')
    }

    let area = yield '何駅でお探しですか？'
    console.log(area + 'でお探しですね。URLを発行する場合は"y"と入力してください')
    let url = `https://retty.me/restaurant-search/search-result/?latlng=35.778026%2C139.720928&free_word_area=${area}&station_id=2017&free_word_category=${cat}&category_type=310`

    const answer = yield url
    if(answer == 'y') {
      console.log(`${area}、${cat}のおすすめのお店はこちらです`)
      console.log(url)
    }
  }
  return gen()
}
```

Generatorを利用した簡易的な対話側のコードができました。
それでは遊んでいこうと思います。

```
$ node

> const gen = require('./gen')
undefined
>
> c = gen.default()
Object [Generator] {}
>
> c.next()
好きなジャンルはなんですか？
{ value: 'start', done: false }
>
> c.next('焼肉')
やはり焼肉ですね
{ value: '何駅でお探しですか？', done: false }
>
> c.next('新宿駅')
新宿駅でお探しですね。URLを発行する場合は"y"と入力してください
{ value:
   'https://retty.me/restaurant-search/search-result/?latlng=35.778026%2C139.720928&free_word_area=新宿駅&station_id=1376&free_word_category=焼肉ですかね&category_type=310',
  done: false }
> 
> c.next('y')
新宿駅、焼肉のおすすめのお店はこちらです
https://retty.me/restaurant-search/search-result/?latlng=35.778026%2C139.720928&free_word_area=新宿駅&station_id=1376&free_word_category=焼肉&category_type=310
{ value: undefined, done: true }
> 
```

これをUIからの入力操作でコントロールすればもうちょっと楽しそう。
焼肉以外も検索できるようにしたいですね。


Rettyのstation_idの辞書、category_typeの辞書があればmatchしてURLを変化させられます。
言語の曖昧さを吸収する処理は難しいですが。


## 終わりに
再帰処理などでメモリを捨てながら使うイメージが強いIterator/Generatorですが、対話型の処理にGeneratorを活用することも頑張ればできるという事例でした。Generator使わなくてもできるじゃんというご意見は置いといて。


よいGWをお過ごしください。



明日は @flum1025 さんの [Dockerでインターネット越しにネットワークを組む](https://qiita.com/flum1025/items/2885817aae21cf6aeb03) です。
Swiftの「case is」とか「case as」って何なの？

Swiftでコードを書いているとたまに「case is」や「case as」といった書き方を目にします。
よくわからなかったので少し調べてみました。

### case isとcase asの目的
case isやcase asはswitchに与えられた変数が特定の型にマッチしてるかどうか判定することを目的に使用されているみたいでした。
これだけではなんのことやらわからないと思うのでそれぞれ使用例を見てみましょう。

### case isの使用例
case isはインスタンスの型チェックを行い、trueなら処理を行います。

``` swift

case 変数 is 型 
```

例をあげるとこんな感じです。

``` swift
var things: [Any] = []

things.append(0)
things.append("hoge")
things.append(2.5)

for thing in things {
    switch thing {
        case is String:
            print("string")
        case is Int:
            print("Int")
        case is NSObject:
            print("Object")
        default:
            break
        }
}

```

### case asの使用例
case asは変数の型がキャスト可能かどうか判定し、可能であればキャストします。
キャストとは型を変換することです。

``` swift
case as 型 
```

キャストした値を変数として定義し、case内の処理で利用することもできます。
僕はこっちの書き方が使いやすくて好きです。

``` swift
case let 変数名 as 型
```

例をあげるとこんな感じです。

``` swift
for thing in things {
    switch thing {
    case let str as String:
        print("\(str)はStringにキャストされました") // hogeはStringにキャストされました
    case let int as Int:
        print("\(int)はIntにキャストされました") // 0はIntにキャストされました
    default:
        break
    }
}
```

### まとめ
* case isは変数の型を判定し、trueの場合処理を行う
* case asは変数の型がキャスト可能かどうか判定し、可能であればキャストする。
PlayCanvasつかってみた  #GWアドベントカレンダー5日目


 #GWアドベントカレンダー[「使いたかったもの使ってみたカレンダー（1人アドベントカレンダー）」](https://gw-advent.9wick.com/calendars/1)の5日目、令和1日記事です。


# PlayCanvasつかってみた 

[PlayCanvas](https://playcanvas.jp/)はHTMLベースの3Dゲームとかが作れる！というものです。
JSがそのまま使えるので、webの知識を再利用しながら3Dゲームが作れます

今回は登録して[日本語チュートリアル](https://support.playcanvas.jp/hc/ja/articles/224163827-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB-PlayCanvas%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C-1-7)をやって、ゲームを作るところまでやってみました。


作ったゲームは公開されています。
https://playcanv.as/p/93nCpqRd/

矢印キーで移動、スペースで攻撃です

<img width="1257" alt="スクリーンショット 2019-04-29 23.42.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/d5f855b9-02cf-4bdf-9ae9-0e47b94ac5cb.png">


## 良さそうなところ/面白かったところ

- 普通にconsole.logとかfetchとかできて良い
- ブラウザベースでも思ったより速度出る。すごい
- チュートリアルやるだけなら１時間ぐらいでできた。簡単
- こまったらconsole.logして開発者ツールで分析できる

<img width="1417" alt="スクリーンショット 2019-04-29 23.02.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/d53269db-5ae8-1ca9-aee7-aff96d204828.png">



## あんまりイケてないところ

- 今回スキップしたが、やっぱり3Dのモデリング大変そう
- 3Dの基礎知識がしっかり無いと使いこなすのは難しそう（チュートリアルに言われるがまま、よくわからないまだ理解できていないパラメータを弄ったりした）

## 総合評価

3Dゲームを作るならぜひ使いたい！けど、そもそもツールを選ぶ以前に3Dゲームを作るコストが高すぎて
なかなか手が出なそう。
ブラウザで動くからこそ連携できることがたくさんありそうなので、底と組み合わせて使うと楽しそう。

- スクショがDropboxに貯まるとか
- IoTでコントローラーを作るとか
- clovaとつながって声で操作するとか
【鏡を活用】狭い部屋でも快適にプログラミングをするテクニック

## 【鏡を活用】狭い部屋でも快適にプログラミングをするテクニック
狭いワンルームに住まれている方などは、プログラミングをする時に壁を目の前にして作業することもあると思います。

しかし、ただでさえ集中力を必要とするプログラミングを壁に向かいながらするのは精神的にもとても疲弊します。
特に遠くをぼんやりと眺めることが出来ないのが辛いですよね。

そこでオススメなのが、机の上に鏡を置くことです。プログラミングに疲れたら自分の顔や、さらにその後ろの部屋の光景をいつもと違った視点から見ることで集中力を保つことが出来ます。
ぜひ試してみてください。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
【GooglePlay】ポリシーに違反「コンテンツの不適切なレーティング」

Google Play から以下のメールが届きました。

<font color="OrangeRed">
公開ステータス: 否承認
審査の結果、お客様のアプリは、ポリシーに違反していると判断されたため、否承認となり公開されませんでした。送信したのがアップデートの場合は、引き続き以前のバージョンのアプリが Google Play に掲載されます。
</font>
<font color="LimeGreen">
問題: コンテンツの不適切なレーティング
アプリのコンテンツのレーティングが正しくありません。弊社のコンテンツのレーティング システムでは、IARC（International Age Rating Coalition）の正式なレーティングを採用しており、デベロッパーはユーザーの各国に応じたレーティングを示すことができます。
</font>
<img width="638" alt="スクリーンショット 2019-04-29 23.46.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b5cc9d65-1c1a-4c0c-8b67-da68862f0beb.png">



<font color="DeepPink">
どうやら、アプリの名前「CherryCocktailGlassチェリーカクテルグラス」
のカクテルが、アルコールだ！！という話みたいです。ToT
![s_スクリーンショット 2019-04-29 23.06.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a725a384-4948-81b2-2efa-a4da5de48313.png)
</font>

こんな事なら、ソーダー水にすればよかったなぁ。。（†〇†)
とりあえず、レーティングを修正した。

「ストアでの表示」ー「コンテンツのレーティング」を選択し「規制物質」

「アルコールの表現があります」にをチェックONしました。
<img width="1042" alt="スクリーンショット 2019-04-29 23.30.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c427ae76-1564-b593-37eb-6d811b14d370.png">


<font color="Blue">
対処方法: アプリを送信して再審査を受ける
1.	詳細について、[コンテンツのレーティング](https://play.google.com/about/storelisting-promotional/content-ratings/)に関するページと[ヘルプセンター](https://support.google.com/googleplay/android-developer/answer/188189)の記事を確認。
2.	アプリが他のすべての[デベロッパー プログラム ポリシー](https://play.google.com/about/developer-content-policy.html)に準拠していることを確認（お客様のアプリが再度ポリシーに違反した場合、追加の措置を取らせていただくことがございます）。
3.	[Play Console](https://play.google.com/apps/publish/) にログイン。
4.	アプリを選択。
5.	左側のメニューで [ストアでの表示] > [コンテンツのレーティング] をクリック。
6.	[新しい質問票を開始] をクリック。
7.	メールアドレスを入力、確認。
8.	[次へ] をクリック。
9.	アプリのカテゴリを選択。
10.	質問票に回答を記入して保存。
11.	[レーティングを算定] をクリック。
12.	レーティングの概要ページで [レーティングを適用] をクリック。
13.	左側のメニューで [ストアの掲載情報] を選択し、[アップデートを送信] をクリック。
</font>

送信して、30分後、承認されて、公開中になりました。
無事に、公開できました。

<br/>

↓↓Google Play 無料Free
CherryCocktailGlassチェリーカクテルグラス〜無料簡単ミニゲームFree games
[![googleStoreLink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/62d43ce7-8afc-81d3-19ff-aad08b9a6471.png)](https://play.google.com/store/apps/details?id=com.non.CherryCocktailGrass)


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">⭐️Androidアプリ⭐️リリース<br>🍒CherryCocktailGlass🍒<br>Blenderで絵を描いてUnityで作成したミニゲームリリースしました😍<br>🍷カクテル🍷グラス🍷に<br>🍒チェリー🍒をのせるシンプルなゲームです。<br>✨（●＾o＾●）✨<br>【Android】<br>Google Play 無料Free<a href="https://t.co/I70R9QEDuq">https://t.co/I70R9QEDuq</a><a href="https://twitter.com/hashtag/CherryCocktailGlass?src=hash&amp;ref_src=twsrc%5Etfw">#CherryCocktailGlass</a> <a href="https://t.co/g8kCM9QVhL">pic.twitter.com/g8kCM9QVhL</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1121818121323433984?ref_src=twsrc%5Etfw">April 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
位置情報をもらうとスタンプを返すLINE Bot

# はじめに
[ある記事](https://qiita.com/n0bisuke/items/909881c8866e3f2ca642)の影響を受けてLINE Botを作ってみました。環境構築やらの手順は今更なので省略します。

# やったこと
タイトルの通り位置情報を受け取るとスタンプを返します。特に意味がないです。練習のために作りました。上記記事のコードを以下のようにいじりました。

```JavaScript:index.js
'use strict';

const functions = require('firebase-functions');
const express = require('express');
const line = require('@line/bot-sdk');

const config = {
    channelSecret: 'hogehoge',
    channelAccessToken: 'hugahuga'
};

const app = express();

app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);

async function handleEvent(event) {
  if (event.message.type === 'location') {
    return client.replyMessage(event.replyToken, {
      type: 'sticker',
      packageId: 11538,
      stickerId: 51626496
    });
  }

  if (event.type !== 'message' || event.message.type !== 'location') {
    return Promise.resolve(null);
  }

}

exports.app = functions.https.onRequest(app);
```

# 一応解説
特に解説の必要ないかと思いますが、自分の学習のために書きます。上記のコードで`event.message.type`とあるのがLINEユーザから送られてきたメッセージが`text`なのか`location`なのか`image`なのかを判断する箇所です（linebotのSDKがJsonを勝手にパースしてくれるので楽ですね）。今回は位置情報を受け取ったときの判断をしたいので、`if (event.message.type === 'location'){...}`としてブロック内に処理を書きます。
次に`client.replyMessage()`でメッセージを返します。このとき第１引数に`event.replyToken`を置き、第2引数に返すメッセージのボディを構築します。今回は以下のように構築しました。

```Javascript
{
   type: 'sticker'
   packageId: 11538,
   stickerId: 51626496
}
```

`type:sticker`とすることでスタンプを返します。`packageId`と`stickerId`が返すスタンプを選択できる箇所です。[このリスト](https://developers.line.biz/media/messaging-api/sticker_list.pdf)を参考に適当に選びました。packageIDは各ページの左上に、stickerIDは各スタンプの絵の下に示している番号で参照が可能です。

# 動作の様子
こんな感じになりました。
![LINE.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/1978a71d-cac9-9b4c-90eb-b9702cec55b4.jpeg)
まあ、特に意味はないですね。はい。

# おわりに
位置情報を使ったサービスとかを実装できたらいいなと思います。あと、LINE Thingsもせっかく触ったので連携してみたいですね。
railsにてf.selectにclass設定

###はじめに
初学者のアウトプット記事です。
ご指摘アドバイスあればよろしくお願いします。

本日のハマりです。

じゃん!!!!


#railsでf.selectにclass設定できなくハマる

```ruby
#html.Haml表記です
= form_with url: root_path, html: { class: "signup" } do |f|
  = f.select :card, [[ "01","01"], [ "02", "02" ], [ "03", "03" ]],  class: 'signup__box'

#これだとclass設定できてません。

```

f.text_fieldの時はこんな感じでclass設定ができてたのですが、f.selectだとできない。。。

で、早速対処法なんですが、

###class設定

```ruby
= form_with url: root_path, html: { class: "signup" } do |f|
  = f.select :card, [[ "01","01"], [ "02", "02" ], [ "03", "03" ]], {},  class: 'signup__box'

#これでclass設定できます
```

なんと。
{},これ (空のハッシュ)を先に記述するだけでclass設定できました。



###参考

公式ドキュメントも読みましたがイマイチ原因が分からず、こちらの記事を参考にしました。
解決できたものの、まだまだ腑に落ちないのでアドバイスや情報あれば教えてほしいです。

railsでf.selectにclassを設定する
https://qiita.com/nakanoyoshiki/items/e87a6238f8febbeb208a