OmniAICreator/Qiita-1.07M huggingface dataset:
[react][webpack]Reactのビルド環境を構築する

# Reactの開発環境を整備する備忘録

- create-react-appを使わずに自前でビルド環境を構築する

## 完成形

```
% tree -I node_modules
.
├── build
│   ├── bundle.js
│   └── index.html
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── Hello.js
│   └── index.js
└── webpack.config.js
```

## moduleのinstall

- 必要なmoduleをinstallする

```bash
mkdir react-sample
cd react-sample
npm init -y
npm i react react-dom
npm i -D @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader copy-webpack-plugin
```

## 設定ファイルの作成

```js:webpack.config.js
const path = require('path');
const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');

const DEV_PORT = process.env.PORT || 3000;

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ['@babel/env'] },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'build/'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'build/'),
    port: DEV_PORT,
    hot: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CopyPlugin([{ from: './public', to: '.' }]),
  ],
};
```

```config:.babelrc
{
  "presets": ["@babel/env", "@babel/preset-react"]
}
```

## scriptsの追加

- package.jsonのscriptsに追記

```json:package.json
  "scripts": {
    "start": "webpack-dev-server -d --open",
    "build": "webpack -p"
  },
```

## Reactコードの作成

```react:src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./components/Hello";

function App() {
  return (
    <div>
      <Hello name="ozaki25" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
```

```react:src/components/Hello.js
import React from "react";

function Hello({ name }) {
 return <h1>Hello {name}!</h1>
}

export default Hello;
```

## htmlの作成

```html:public/index.html
<title>hello react</title>
<div id="root"></div>
<script src="bundle.js"></script>
```
## アプリの起動

### 開発モード

```bash
npm start
```

- 3000ポートで起動する
- ホットリロードがきいているのでファイルを保存するだけで画面が更新される

### 本番モード

```bash
npm run build
```

- `public/bundle.js`にビルドされたファイルが生成される
- public配下を公開すればアプリを配信できる

```bash
brew install serve
serve build
```

- デフォルトだと5000ポートで動作確認できる
JupyterNotebookで、アニメーションするグラフを簡単に作る（plotly）

![jupyter.gif](https://qiita-image-store.s3.amazonaws.com/0/195903/13d38839-65e2-a27a-f36e-86c07e165c5b.gif)


# 目的
- JupyterNotebook上で、グラフをアニメーションさせたい。
- 面倒くさいインターフェースはいやだ。簡単に試したい。

# 想定されるシチュエーション
- 損失関数の推移
- 最適化の経緯
- 発表とか勉強会用に、理解しやすいように使うのが主かもしれません。


# コード全量
- GitHub
https://github.com/tatsuya-takahashi/python-library-exercises/blob/master/plotly/plotly.ipynb  

- Jupyter nbviwer(GitHubだと、plotlyが表示されない)
http://nbviewer.jupyter.org/github/tatsuya-takahashi/python-library-exercises/blob/master/plotly/plotly.ipynb  


# 結論

```
# import plotly as offline mode
import plotly.offline as offline
import plotly.graph_objs as go
offline.init_notebook_mode()

from sklearn.datasets import load_iris
import pandas as pd
import numpy as np


frames = []
xaxis = []

# framesに突っ込んだデータの通りに、勝手にアニメーションしてくれる。
# 今回は y = x **2のグラフを想定している。
for x in np.arange(-10,11,1):
    xaxis.append(x)
    data = [
        go.Scatter(
            x = xaxis,
            y = np.array(xaxis) ** 2
        )
    ]
    frames.append({"data": data})

layout = go.Layout(
    title="アニメーション　サンプル",
    xaxis={"title":"x", "range": [-10, 10]},
    yaxis={"title":"y(x ** 2)", "range":  [-100, 100]},
    showlegend=True,
    height=600,
    updatemenus=[{'type': 'buttons',
                     'buttons': [{'label': '再生',
                                  'method': 'animate',
                                  'args': [None]}]}]
)

fig = go.Figure(
    data=data,
    layout=layout,
    frames=frames
)
offline.iplot(fig)
```

# このように表示されます
![jupyter.gif](https://qiita-image-store.s3.amazonaws.com/0/195903/13d38839-65e2-a27a-f36e-86c07e165c5b.gif)
css(scss)のみで簡単なフェードスライダー

フェードスライダーを使いたいけどjsを使うまでもないなって時に

<p data-height="265" data-theme-id="0" data-slug-hash="ZRxapY" data-default-tab="css,result" data-user="kzt" data-embed-version="2" data-pen-title="only css fade slider" class="codepen">See the Pen <a href="https://codepen.io/kzt/pen/ZRxapY/">only css fade slider</a> by kazuto (<a href="https://codepen.io/kzt">@kzt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##解説
cssアニメーションではディレイを含めたループができないので
表示されていない時間も含めたアニメーションの時間を計算しています。

```scss

$slide: 6; //スライド数
$slider-active-time: 8; //スライダーの表示時間(秒)
$slider-duration: 1; //スライダーの表示切り替え時間(秒)
$slider-time: (($slider-active-time + $slider-duration) * $slide); //アニメーションの時間
```
<br>

forを使い、それぞれにディレイを持たせ表示をずらします。
ついでにそのindexを使って画像を指定しています。

```scss
@for $i from 1 through $slide {
  &:nth-child(#{$i}) {
    animation-delay: #{(($slider-active-time + $slider-duration) * ($i - 1)) - $slider-duration}s;
    background-image: url('https://picsum.photos/1600/1000?image=#{$i}');
  }
}
```
<br>

はじめに設定したスライドの時間等を%に変換してkeyframeに設定しています。

```scss
$fade: $slider-duration / $slider-time * 100;
$active: $slider-active-time / $slider-time * 100;
@keyframes fade-slider {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }

  #{$fade}% {
    opacity: 1;
  }

  #{$fade + $active}% {
    opacity: 1;
  }

  #{$fade + $active + $fade}% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 0;
  }
}
```
[Python]関数内でのモジュールimportの是非

# 結論

PEP的には非。ただし現場レベルでは採用することもある。

# PEP8

https://www.python.org/dev/peps/pep-0008/#imports

> Imports are always put at the top of the file, just after any module comments and docstrings, and before module globals and constants.

**ファイルの先頭でインポートすべし**との記述。

関数内でのモジュールインポートについては言及なし。

# 現場レベルの議論

## インプット情報

https://stackoverflow.com/questions/3095071/in-python-what-happens-when-you-import-inside-of-a-function
https://stackoverflow.com/questions/1024049/is-it-pythonic-to-import-inside-functions/1024087

## 関数内でのモジュールインポートが採用される例

 * 循環参照の回避
 * 名前空間衝突の回避

 * パフォーマンス
   * ただし先頭インポートと比較して必ずしも優位ではなく、採用するなら実際に比較すべきとの意見あり
 
 * 複雑度の減少
   * ただしこれは応急対応であり、本来ならモジュール切り分け等で対処すべしという（解釈できる）意見あり
Aurora(MySQL)のクラスタ構成でリードレプリカが頻繁に再起動していたけどAWSサポートから連絡きて解決した話

## 概要

リードレプリカ構成のAurora(MySQL)が1日数回程度、勝手に再起動を繰り返していたんですが、アプリの作りが悪いから再起動しちゃうんだろうな〜と思ってました。

ある日、AWSサポート(ベーシックプランなのに！)から「RDSのバグなのでバージョンアップしてね」って連絡が来ました。


## AWSサポートからのメッセージ（意訳）

我々はあなたのリードレプリカが勝手にクラッシュしていることに気づきました。これは2.02で修正された既知の問題であることが判明したので出来るだけ早くクラスタをバージョンアップするかレプリカの負荷が高い状態でDROP TABLEを行わないようにしてください。これにより発生した不便や苦痛をお詫び申し上げます。


## まとめ

* 勝手にお知らせしてきてくれるAWSサポートすごい
* （既存ソースの流用とはいえ）DROP TABLEしない
Rails チュートリアル メモ 第7章

# メモ

## 7.1.1 環境

* 以下の3つ
    * development
    * test
    * production
* 指定方法
    * rails console  : `rails console production`
    * rails server   : `rails server --environment production`
    * マイグレーション : `rails db:migrate RAILS_ENV=production`

## 7.1.2 routes.rb における `resources`

* `resources :users` と書くだけでこんなことになる
    * こんなことになる、ということだけ覚えておけばいいか

```
   Prefix Verb   URI Pattern               Controller#Action

    users GET    /users(.:format)          users#index
          POST   /users(.:format)          users#create
 new_user GET    /users/new(.:format)      users#new
edit_user GET    /users/:id/edit(.:format) users#edit
     user GET    /users/:id(.:format)      users#show
          PATCH  /users/:id(.:format)      users#update
          PUT    /users/:id(.:format)      users#update
          DELETE /users/:id(.:format)      users#destroy
```

* メソッド名と同じ名前で erb を用意すれば、それが描画に利用される

## 7.1.2 `params`

* 下記のような各種リクエストパラメータは `params` というハッシュから参照できる
    * REST URI に含められたパラメータ
    * クエリストリング

## 7.1.3 `debugger`

* 最強か

## 7.2.1 `form_for`

* `form_for` ヘルパーを使えば、モデルのためのフォームが簡単に作れる
    * コントローラー側でモデルのまっさらなインスタンスを作ってビューに渡す
        * そのとき、コントローラー側で属性をセットしておくと、それがプレースホルダーになる
    * 作られるフォームは自動的に `action="/users" method="post"` となる
    * CSRF 対策までしてくれる

## 7.3.2 Strong Paramater

* 上記の `form_for` を使うと、ユーザーの入力が `params` の1要素としてハッシュで追加される
    * `params` 自体がハッシュなので、正確には「ハッシュのハッシュ」になる
* Rails のモデルは、更新時に属性をハッシュで渡して一発で初期化することができる
    * これをマスアサインメントと呼ぶ
    * 例 : `u = User.new(name: "foo", password: "bar")`
* しかし、マスアサインメントを使うと、悪意あるユーザーが不正なパラメータを送りつけてきたときに対処ができない
* それを防ぐために、「 `params` に存在していい要素」を宣言することができる
* その仕組みを Strong Parameter という
    * この役割を担うのは **コントローラ層**
    * かつてはモデル層で `attr_accessible` を使ってやっていたらしいが、github が脆弱性を突かれて、その手法には問題があるとわかったらしい？
* 実際には、専用のプライベートメソッド (`user_params`) をひとつ作り、それを使うのが慣習
    * `require` や `permit` は、正常だった場合は `self` を返す（つまり params を返す）ので、このプライベートメソッドの呼び出しをマスアサインメントの引数にすればよい
    * 実装の解説はここがわかりやすい
        * https://qiita.com/mochio/items/45b9172a50a6ebb0bee0

## 7.3.3 app/views/share

* アプリ全体で使う partial は app/views/share に入れるのが慣習
* partial なのでファイル名を _ で始める（復習）
    * でも `render` で呼び出すときは _ は要らない。難しいな

## 7.3.3 pluralize

* 引数の数値に応じて、英単語を複数形に変えたり変えなかったりするやつ

## 7.3.4 assert_no_difference

* すげー

## 7.4.1 `redirect_to`

* 以下の2つは同じ
    * `redirect_to @user`
    * `redirect_to user_url(@user)`
* 後者の方が覚える負担が少なくていいかな
* リダイレクトなので _path ではなく _url を使っている（復習）

## 7.4.2 flash

* 割愛

## 7.4.3 DB の初期化

```
rails db:migrate:reset
```

## 7.4.4 `content_tag` ヘルパー

* ruby の世界だけで html を記述できるようになるので、erb が簡潔になる効果がある

## 7.5.1 SSL の使用

* config/environments 配下に、環境ごとの設定がいろいろ書いてある
* 本番環境用の設定で、SSL の利用を強制できる
mysqlバックアップの取り方

#バックアップ

毎回やる度に忘れているので自分のメモがてら共有

## いつも使ってる構文

### 特定のデータベースのみバックアップする方法

```
mysqldump --single-transaction -u DBユーザ名 -p DB名 > 出力先ファイル名
```
#### 例文
DBユーザー名：root
DB名：sample
出力先ファイル名：sample.dump
出力ディレクトリ：作業ディレクトリ

```
mysqldump --single-transaction -u root -p sample > ./sample.dump
```
###全てのデータベースをバックアップする方法

```
mysqldump --single-transaction -u root -p -x --all-databases > 出力ファイル名
```
#### 例文
DBユーザー名：root
出力先ファイル名：sample.dump
出力ディレクトリ：作業ディレクトリ

```
mysqldump --single-transaction -u root -p -x --all-databases > ./sample.dump
```

#復元
## いつも使ってる構文
### 特定のデータベースのみ復元する方法

```
mysql -u ユーザー名 -p データベース名 < dumpファイル名
```
#### 例文
DBユーザー名：root
DB名：sample
出力先ファイル名：sample.dump
出力ディレクトリ：作業ディレクトリ

```
mysql -u root -p sample < ./sample.dump
```
###全てのデータベースを復元する方法

```
mysql -u ユーザー名 -p < dumpファイル名
```
#### 例文
DBユーザー名：root
出力先ファイル名：sample.dump
出力ディレクトリ：作業ディレクトリ

```
mysql -u root -p < ./sample.dump
```

#オプション抜粋
 
| オプション         |        説明　　　　         |
|:----------------:|:--------------------------:|
| --set-charset    |              文字コードを指定する。（utf-8,binary など） |
| --single-transaction         |            トランザクションを利用してバックアップを実行する。 |

この二つがあれば困ることはないと思いたい・・・

#参考サイト
https://dev.mysql.com/doc/refman/5.6/ja/mysqldump.html#option_mysqldump_set-charset
https://qiita.com/PlanetMeron/items/3a41e14607a65bc9b60c
https://qiita.com/morizyun/items/f45dc580bac0ebba79ab
丸括弧と波括弧の使い方

## ()丸括弧
- 別プロセスで動く、サブシェルで動く　という事らしい
- 別プロセスで動くので、「起動したスクリプト」自体には影響がない

変数が「起動したスクリプト」との物と別物になってたのはこのせいだったのね

```
number=1

# 変数を書き換えてみる
(
number=2
)

echo $number
```
結果 -> 1

## {} 波括弧
- 変数の展開とコマンドをカレントシェル（実行したシェル）で実行する

変数の展開はいつもやってるこんな感じのです。

```
number=1
echo "numberにはこの値が入ってます -> ${number}"
```

そして、これなら変数が「起動したスクリプト」と別物にならないはず。

```
number=1

# 変数を書き換えてみる
{
number=2
}

echo $number
```
結果 -> 2

一つ謎が解けました。
JavaScript (ES6) で Python range(n) する

よく忘れるのでメモ書き程度に。

```js
[...Array(5).keys()]
// [0, 1, 2, 3, 4]
```

または

```js
Array.from(Array(5).keys())
// [0, 1, 2, 3, 4]
```

## 参考記事
+ [JavaScript function similar to Python range()](https://stackoverflow.com/a/37980601/7859687)
paper.jsでレスポンシブな図形を描く

Paper.jsはcanvasに図形を簡単に書けるライブラリです。

http://paperjs.org/

レスポンシブにする方法はググると出てくるんですが、図形ごとにpositionとscaleを変えるなど、どう考えても見通しが悪いものしか出てきません。（ググり方が悪いのかも）

layerにscaleをかけるだけでうまくいったのでここで紹介します。

以下はpaperscriptの中です。viewはcanvasを指定しているところで自動的にオブジェクトが入ります。

```javascript
var original_size = {width: 640, height: 640};
var last_ratio = 1.0;
view.onResize = function(event) {
  var ratio = $('#can').innerWidth()/original_size.width;
  project.activeLayer.scale(ratio/last_ratio, new Point(0,0));
  last_ratio = ratio;
}
```

また、下はHTMLです。resizeの指定が必要です。

```html
<div id="can">
  <canvas id="myCanvas" width="640" height="640" resize></canvas>
</div>
```

ポイントは、project.activeLayer.scale(ratio/last_ratio, new Point(0,0));
の部分です。第１引数は比率を、第２引数はどこを起点に拡縮するかを定義します。
scaleは破壊的操作なので、リサイズ中常にratio/last_ratio 倍することで前フレームの影響を打ち消せます。
また、第２引数を指定しないとデフォルトが中心となり上手くいかないため、左上を基準にします。
ESModules について

予習のために調べたことをまとめました。
勘違いや誤りがあるかもしれませんので、修正・指摘歓迎いたします :innocent: 

## ESModules とは

- JavaScript から別の JavaScript を読み込む為の仕組み
- いままで CommonJS で実現していたことをJSの標準仕様にしたという理解
- 仕様を決めるのに苦労した様子
  - ESModules と CommonJS の相互運用問題
  - ESModules の判定方法をどうするか問題
- まだ production 環境などに採用するのは時期尚早かも？

## 対応状況

- Node.js は v8.5 から実験的に対応されている
  - `--experimental-modules` フラグを付与する 
- 主要ブラウザは概ね対応済み
  - [https://caniuse.com/#feat=es6-module](https://caniuse.com/#feat=es6-module)

## 利用例

### Browser

```html
<script type="module" src="index.mjs">
```

- `type="module"` を指定する
- 認証も必要なら `crossorigin="use-credentials"` を付与

### Node

```zsh
node --experimental-modules index.mjs
```

- 拡張子を `.mjs` にする
- `--experimental-modules` フラグを付与する 


## 実装例

```javascript
import hello from './hello'

export default () => {
  hello('world')
}
```

- ファイルの拡張子は `.mjs`
- import の際に `.mjs` は省略して良い (.mjs -> .js の順で探索される為)
- 既に ES2015 (with Babel) で実装しているなら慣れ親しんでいるかも

### require はできない

```javascript
const hoge = require('./hoge')
```

- CommonJSとは記法が異なる

### named import はできない

```javascript
import { piyo } from './hoge'
```

- Babel だとトランスパイルできてしまうので注意

```javascript
import hoge from './hoge'
const { piyo } = hoge
```

- これなら書ける

### 使えなくなるグローバル変数がある

- __filename
- __dirname
- require
- module
- exports
- arguments

## Tips

### __dirname を代替する

```javascript
const __dirname = path.dirname(new URL(import.meta.url).pathname)
```

- `import.meta` というAPIが提案されている
  - ファイルのURLが取得できるようになる
  - [https://github.com/tc39/proposal-import-meta](https://github.com/tc39/proposal-import-meta)

### エディタで import.meta が syntax error になる場合

- まだ仕様策定中だから未対応の可能性がある
- IntelliJ が Early Access Program で対応してる
  - [https://www.jetbrains.com/webstorm/eap/](https://www.jetbrains.com/webstorm/eap/)

## 何が嬉しいのか

- webpack などでバンドルしなくていい(遠い将来に)
- babel などでトランスパイルしなくていい(遠い将来に)
- HTTP/2 で各モジュールを並列配信できれば速くできるかも？

## 参考
- [http://blog.hiroppy.me/entry/nodejs-esm](http://blog.hiroppy.me/entry/nodejs-esm)
- [https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs](https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs)
- [https://yosuke-furukawa.hatenablog.com/entry/2016/05/10/111102](https://yosuke-furukawa.hatenablog.com/entry/2016/05/10/111102)
rails5でform_forしたものをajax+partialで非同期に表示する

##やりたいこと

NAVERまとめのようなサービスで、
1つのまとめに情報をajaxでガンガン追加していきたい。

プログラム的には
form_forで送信した情報を保存、
partialを追加する形で非同期描写したい。

##概要
partialを用意、HTMLの要素に#novel-cardsを設定。
form_forでnovel#createに情報を送信、
/views/novels/create.js.erb/を実行、
create.jsの中でrenderでpartialを描画し、
#novel-cardsにappendToする。

##具体的なやり方

###html

表示するhtml

```haml:app/views/matomes/show.html.haml
#novel-cards
  - @novels.each do |novel|
    = render partial: "novel-card", locals: { novel: novel }
```

###パーシャル（部分テンプレート）
・**/views/matomes/_novel-card.html.haml**という場所にある。
・[novel]という変数を渡してきて使うようになっている。
・novelはインスタンス変数を渡すことを想定。

```haml:app/views/matomes/_novel-card.html.haml
.row
  .card.mx-2.w-100.shadow
    .card-title
      = simple_format(novel.title,:style => "font-size:20px; line-height:160%;")
      = simple_format(novel.description,:style => "font-size:17px; line-height:160%;")
      = simple_format(novel.review,:style => "font-size:20px; line-height:160%;")
    .card-body.pl-2.pt-3.pb-2{:style => "min-height:100px;"}
      .row.pl-3.pb-2.small.text-muted
        = novel.created_at.strftime("%Y/%m/%d/ %H:%M:%S")
      .font-weight-bold.pb-4
        = simple_format(novel.description,:style => "font-size:17px; line-height:160%;")
```

###コントローラ

```ruby:app/controllers/novels_controller.rb

  def create
    @novel = Novel.new(novel_params)

    respond_to do |format|
      if @novel.save
        format.html { redirect_to @novel, notice: 'Novel was successfully created.' }
        format.json { render :show, status: :created, location: @novel }
        #scaffoldにformat.jsを追加
        format.js
        #format.jsを追加
      else
        format.html { render :new }
        format.json { render json: @novel.errors, status: :unprocessable_entity }
      end
    end
  end

```
上記コントローラでnovels#createを呼んでいるので、
/views/novels/create.js.erb
を自動で呼んでくれる。
その中でajaxでの自動追加を実装。

コントローラからインスタンス変数@novelを渡して、
renderにて描画、appendToで一番下に追加描画する。

###js

```erb:app/views/novels/create.js.erb
$("<%= escape_javascript(render partial: '/matomes/novel-card', locals: { novel: @novel }) %>").appendTo("#novel-cards");

//submitの後に、フォームの中身を空にする
$('form').find("textarea, :text, select").val("").end().find(":checked").prop("checked", false);
```

###+α

[Rails の form 内で disabled された submit ボタンを再度 enable する](https://ohbarye.hatenablog.jp/entry/2017/08/25/005902)
ランダウの記号

点aの近くで定義された2つの関数,f(x),g(x)に対して

```math
|f(x)| \leq C|g(x)| 
```

(Cはある正の定数)が成り立つとき
$f(x)=\mathcal{O}(g(x))　(x→a)$と書き，この式が成り立つとき，aの近くでf(x)はg(x)で押さえられてるといいます．

この$\mathcal{O}$をランダウの記号といいます．

###具体例
$f(x) = 1 + x + \frac{1}{2}x^2+\frac{1}{6}x^3 \cdots \frac{1}{n!}x^n$を考えます．

これをランダウの記号を用いていて，2次の項まで書くと
$f(x) = 1 + x + \frac{1}{2}x^2+\mathcal{O}(x^3)$と書くことができます．
xを大きくしていったときに定数の影響はほとんど受けないので，定数を無視してしまおうというアイデアです．

コンピュータサイエンスでもlognのオーダを$\mathcal{O}(log(n))$などと表します．つまり暗黙的にでてきたこの記号は定数はオーダに影響しないので無視しようという意味だったともいえるのです．
js, node で手軽な pretty print メモ

深いネストもダンプする関数

```js
> const pp = v => console.dir(v, { depth: null, colors: true})

> pp(obj)
[ { type: 'text', start: 0, end: 6, depth: 0, content: 'before' },
  { type: 'bracket',
    start: 6,
    end: 10,
    depth: 0,
    open: '(',
    close: ')',
    nodes:
     [ { type: 'text', start: 7, end: 10, depth: 1, content: 'hit' } ] },
  { type: 'text', start: 11, end: 16, depth: 0, content: 'after' } ]
```
AWS管理コンソールのサインインを検知しメールで通知する方法。

AWS管理コンソールのサインインを検知しメールで通知する方法。

AWSのコンソールにログインした時、それをメールで通知する。というのがやりたくて
下記サイトを参考に設定を行いました。
https://dev.classmethod.jp/cloud/aws/check-amc-signin-using-cloudwatch-events/

2年前の記事なので記載は若干違うところがありましたが、そこまでかわらないので
HP通り進めたのですが、ログイン検知メールが飛んできません。

記載どおり、「設定したメールアドレスに以下のような[AWS Notification]メールが届きますので、[Confirm Subscription]をクリックします。」
のところの確認メールは飛んできたのですが・・・

CloudWatch Eventsのためのルールをみるとこうなっています。

{
"detail-type": [
"AWS Console Sign In via CloudTrail"
]
}

CloudTrailのイベント履歴をみると「ConsoleLogin」はしっかり記録されている
のも確認しています。

何か通知メールが来ない原因はわかりませんでしょうか。

宜しくお願い致します。
ドラッグ＆ドロップでディープラーニングができるNeuralNetworkConsoleの事例紹介

![Neural Network Console (4).png](https://qiita-image-store.s3.amazonaws.com/0/253492/6a28a5f7-72b2-20b0-edcc-f69c2122d859.png)


※この情報は2018年6月22日（金）のものです。


#弊社の紹介
データサイエンスアカデミーは、次世代のデータサイエンティスト人材の育成・輩出を行っています。
現在、自社ブログでもデータサイエンスに関するコラムを連載しております。
ぜひご一読ください！
[ブログについてはこちら](https://d4c-academy.org/topics/category/column)


#NeuralNetworkConsoleとは？
ソニーが開発したディープラーニングツールです。

![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/253492/343a2f0d-a34e-f979-b3d3-0bb562c47a79.png)

サイトはこちら
[https://dl.sony.com/ja/](https://dl.sony.com/ja/)

従来までは、プログラミングでしかできなかったディープラーニングが
**ドラッグ＆ドロップでもできるようになった画期的なツールです。**

今回はそのツールを活用して、どんなことが可能になったか事例を集めてみました。


##画像データを使用した判別モデル作成事例
NeuralNetworkConsoleでは、すでに何個かのサンプルプロジェクトが用意されています。
そのうち、○○か○○じゃないか、を判別するサンプルプロジェクト、
「01_logistic_regression.sdcproj」を使うだけで簡単に判別モデルの作成ができます。
以下は、色々な画像で判別モデルを作った事例です。

###ドラッグ＆ドロップでディープラーニング！NeuralNetworkConsoleの使い方

弊社データサイエンスアカデミーの記事です。
AKB世界選抜総選挙が終了したということもあり、HTK48のメンバーの一人である宮脇咲良さんか、
そうではないかを判別するモデル作成に挑戦してみました。

インストールの方法から解説しておりますので、
以下、事例をお読み頂き、使いたくなってみた方は、ぜひご参考ください。

[https://d4c-academy.org/topics/1569](https://d4c-academy.org/topics/1569)


![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/253492/156139ef-5485-5136-0e42-567047447870.png)


![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/253492/32e83284-5f19-4980-784e-dedd5e194230.png)



###Neural Network Consoleの学習モデル自動最適化機能が凄すぎる！
[https://ai-coordinator.jp/neural-network-console](https://ai-coordinator.jp/neural-network-console)
男女の画像を使ったモデル作成手順を解説しています。

![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/253492/d4bcd7b8-8e75-c117-4e35-4f45fd6bec53.png)



###【Neural Network Console】新規画像のDataset作成方法
http://imagingsolution.net/deep-learning/neural-network-console/create_new_image_dataset/

きのこの山と、たけのこの里を判別するユニークな事例。
![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/253492/4c263c15-9889-9341-531f-a5b9d850b137.png)


モデルの学習から評価までツールが自動でやってくれる分、
あとは画像を集めるだけ・・・ということで、
画像をどのように集めたのかの方法も解説してくれています。


[画像収集の方法はこちら](https://imagingsolution.net/deep-learning/trainingimagecapture/)


##数値データを使用した事例
NeuralNetworkConsoleだと画像だけではなく、数値データを使った推定なども
行うことできます。以下の事例ではデータの作り方から解説してくれています。


###SONY Neural Network Consoleで日経平均株価をディープラーニング
http://cedro3.com/ai/nikkei-stock-dl/
ディープラーニングの例でよく見かける日経平均株価予測。
**プログラミングではどのように作るかわからなかった、挫折した、という方にこそ、
データの作り方から学べるおすすめの事例です。**

###SONY Neural Network Console 家賃を推定するニューラルネットワーク
http://cedro3.com/ai/rent-dl/
日経平均株価の予測の次は、家賃の推定を行ってみたい方に参考となる事例です。
![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/253492/810b8d68-4508-4bd5-bef2-3ffb5eef214c.png)


#自社ブログで技術系コラムを連載中！

NeuralNetworkConsoleで弊社が実装した事例はこちら！
[https://d4c-academy.org/topics/1569](https://d4c-academy.org/topics/1569)

この他にもデータサイエンスに関するコラムを連載しております。
ぜひご一読ください！
[ブログについてはこちら](https://d4c-academy.org/topics/category/column)
Python bitly URL短縮

Pythonでbitly APIを使ってURLを短縮する例

```py
# bitly APIのtokenと短縮前URL
def createShortURL(access_token, longUrl):
    url = 'https://api-ssl.bitly.com/v3/shorten'
    values = {
            "access_token": access_token,
            "longUrl": longUrl
            }
    response = urllib.request.urlopen(url, urllib.parse.urlencode(values).encode('utf-8'))
    encoding = response.info().get_content_charset('utf-8')
    data = json.loads(response.read().decode(encoding))
    return data["data"]["url"]
```
Virtual Boxのスナップショット作成でゲストOSが起動しなくなった話

# 概要
Virtual BoxでゲストOSのスナップショットを作成すると、突然ゲストOSが起動できなくなった。何とか解決したのでその手順をメモしておきます。

# 環境
Virtual BOX：5.2.8 r121009 (Qt5.6.2)
Host OS：Windows10(1803)

# 詳細
1. Virtual BoxでゲストOSのスナップショットを作成して、そのゲストOSを起動しようとするとすぐに停止するようになった。
2. エラーコードは次の通り
<pre>
仮想マシン"Redmine"のセッションを開けませんでした。
Parent UUID {00000000-0000-0000-0000-000000000000} of the medium 
'C:\Users\<User>\VirtualBox VMs\Redmine\Snapshots/{filename}.vhd' does not match UUID {uuid} 
of its parent medium stored in the media registry ('C:\Users\<User>\.VirtualBox\VirtualBox.xml').
終了コード : E_FAIL (0x80004005)
コンポーネント: MediumWrap
インターフェース: IMedium {4afe423b-43e0-e9d0-82e8-ceb307940dda}
</pre>
3. 原因は Parent UUID が null になっているため。  
Parent UUID がエラーメッセージに表示されているUUID(uuid)になっている必要がある。
4. https://michlstechblog.info/blog/virtualbox-no-boot-after-snapshot-efail-0x80004005/ を参考 にVBoxManage.exeを使ってParent UUIDを変更すると起動するようになった。
<pre>
>"c:\Program Files\Oracle\VirtualBox\VBoxManage.exe" internalcommands sethdparentuuid ".\\{filename}.vhd" {uuid}
</pre>
SFDC AccountManager

クラスとそのテストクラスを下記のように実装し
確認するたびにエラーが発生
List has no rows for assignment to SObject

最後解決した方法が
@RestResource(urlMapping='/Account/*/contacts')
↓
@RestResource(urlMapping='/Accounts/*/contacts')

要は複数に変更し、確認すれば、sfdc trailheadが通してくれた。
ご参考まで

#java
@RestResource(urlMapping='/Accounts/*/contacts')
global with sharing class AccountManager {

    @HttpGet
    global static Account getAccount() {
        RestRequest req = RestContext.request;
        RestResponse res = RestContext.response;
        String accountId = req.requestURI.substringBetween('Accounts/', '/contacts');

        Account acc = [SELECT Id, Name, (SELECT Id, Name FROM Contacts) FROM Account WHERE Id = :accountId];
        return acc;
    }
}

#java
@istest
public class AccountManagerTest {

	@isTest static void testGetAccount() {
	    Id recordId = createTestRecord();
	    // Set up a test request
	    RestRequest request = new RestRequest();

        request.requestUri =
	        'https://ap5.salesforce.com/services/apexrest/Accounts/'+recordId+'/contacts';
	    request.httpMethod = 'GET';
	    RestContext.request = request;
	    // Call the method to test
	    Account thisAcc = AccountManager.getAccount();
	    // Verify results
	    System.assert(thisAcc != null);
	    System.assertEquals('Test record', thisAcc.Name);
	}

	// Helper method
	static Id createTestRecord() {
	    // Create test record
	    Account accTest = new Account(
	        Name='Test record');
	    insert accTest;

	    Contact con = new Contact();
	    con.LastName = 'test con';
	    con.Account = accTest;
	   	insert con;
	    return accTest.Id;
	}
}
動的なページの読み込みが完了してからChrome拡張機能を実行する方法

#やりたいこと
- Chrome拡張機能において、ページの読み込み後に要素を取得する処理をしたい。
    - 該当のページは動的に生成され、取得したい要素が表示されるまでタイムラグが存在するため、[Content Script](https://developer.chrome.com/extensions/content_scripts)だけでは実現できない。

#実現方法

- [google chrome extension - How to get a content script to load AFTER a page's Javascript has executed? - Stack Overflow](https://stackoverflow.com/questions/13917047/how-to-get-a-content-script-to-load-after-a-pages-javascript-has-executed)
    - `addEventListener`でウィンドウの読み込み完了を待つ。
    - `setInterval`で対象の要素が現れるまで処理を繰り返す。

上記に書いてあることそのままですが、一応下記に説明を記載します。

#完成したコード
```json:manifest.json
{
  "name": "Name of Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "説明",
  "icons": {
    "16": "16px.png"
  },
  "content_scripts": [
    {
      "matches": [
        "http://対象のURL/*"
      ],
      "js": [
        "script.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}
```

```javascript:script.js
window.addEventListener("load", main, false);

function main(e) {
    const jsInitCheckTimer = setInterval(jsLoaded, 1000);
    function jsLoaded() {
        if (document.querySelector('#取得したい要素') != null) {
            clearInterval(jsInitCheckTimer);
  //要素を取得する処理
};
```

#コードの説明
```json:manifest.json
  "content_scripts": [
    {
      "matches": [
        "http://対象のURL/*"
      ],
      "js": [
        "script.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
```
[Content Script](https://developer.chrome.com/extensions/content_scripts)で、指定のURLを読み込み時に`script.js`が実行されるようにします。
（ページ内にフレームが含まれる場合には、`"all_frames": true`として、フレーム内のページもスクリプトの実行対象に含めます。）

`"run_at": "document_end"`を記載していますが、公式ドキュメントに記載の通り、フレームなどはロードされる前に実行されてしまいます。

>Scripts are injected immediately after the DOM is complete, but before subresources like images and frames have loaded.
>[Content Scripts - Google Chrome](https://developer.chrome.com/extensions/content_scripts)


```javascript:script.js
window.addEventListener("load", main, false);
```

そこで、DOM読込完了した時点では`addEventListener`でウィンドウを監視して、フレームやJavascriptの読み込みが完了した時点でメインの処理を動かすようにします。

```javascript:script.js
function main(e) {
    const jsInitCheckTimer = setInterval(jsLoaded, 1000);
    function jsLoaded() {
        if (document.querySelector('#取得したい要素') != null) {
            clearInterval(jsInitCheckTimer);
  //要素を取得する処理
};
```
更に、`setInterval`を使用して、取得したい要素が読み込まれるまで、間隔を置いて処理を実行します。
これで、指定の要素が現れるのを待って、拡張機能を動かすことができます。
#参考サイト
- [google chrome extension - How to get a content script to load AFTER a page's Javascript has executed? - Stack Overflow](https://stackoverflow.com/questions/13917047/how-to-get-a-content-script-to-load-after-a-pages-javascript-has-executed)
- [DOMの存在確認する方法で処理速度の速いコードは？ - Qiita](https://qiita.com/ketabawo/items/056a487c593be22bd319)
Eclipse CDT 忘備録 Autotools makefile の読み込み手順

# 概要
* Autotools で生成された makefile から、 Ecripse CDT の プロジェクトとして読み込む手順を示します。
* 時々行うのですが、その時には忘れてる事が多く、ここに手順を記載します。参考になれば幸いです。
* この記事は以下の環境で試したものです。以後のバージョンでも同様に出来ると思います。
    * CentOS 7 
    * eclipse 4.7.3 oxygen + CDT

---
# 手順

* [File] → [New] → [Makefile Project with Existing Code]

![e01_1.png](https://qiita-image-store.s3.amazonaws.com/0/169589/af14b8d4-02b2-1831-0c9a-72b65f9fec58.png)


---

* [Browse...] → [ファイルブラウザ画面] : Makefile の存在する ディレクリで [OK] ボタンを押下
* [Toolchain for Indexer Setting] 領域で 「GNU Autotools Toolchain」


![e02_2.png](https://qiita-image-store.s3.amazonaws.com/0/169589/b09eab51-b8d5-c7e7-26fa-88c389cf84aa.png)


* プロジェクトとして読み込み完了

# 確認
* Build でエラーが出ないことを確認する
    * 古い autotools で生成された makefile や、複雑な makefile では Buildが失敗することがある。

* project名の右クリックの選択メニュー内に [Build project] の選択肢があることを確認
  

![e03_1.png](https://qiita-image-store.s3.amazonaws.com/0/169589/ddd245e8-c418-a8c6-ea00-bdb544ff4a85.png)

* [Build project] を選択し Build を実行する

![e04_1.png](https://qiita-image-store.s3.amazonaws.com/0/169589/fc30978f-d33a-4f26-98fa-fe0aa2cd7fe8.png)


* 上図の様に Build の成功メッセージが出ることを確認

# 他のプロジェクトのファイルをインクルード

![p03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169589/e6b199f8-266d-63ec-7c09-55b91523743c.png)


# Debugger 向け設定
* library と TEST用コマンド を生成するプロジェクトの場合、Debugger で TEST用コマンドを指定しても、library が見つからないとの エラーメッセージで Debugger が開始されない場合。
    * make コマンドで library が生成される先のディレクトリを `find` コマンド等で探す　→ ① とする。

* LD_LIBRARY_PATH を 設定する
    * (画面左側)`Project Explorer` → 該当Projectを選択 → `Properties` → `C/C++ Build`　→　`Environment` 画面の `Environment variables to set` の `Add` ボタン押下
    * `Name:` に `LD_LIBRARY_PATH` , `Value` に ① のディレクトリ名を入れ、`OK` ボタン押下。  


---
* 以上
【Ruby】nil? empty? blank? present?の小さなサンプルメモ


```ruby:test.rb
require 'active_support'
require 'active_support/core_ext'

nil_var = nil
empty_var = ""

###############
# nil?
p nil_var.nil? #=> true
p empty_var.nil? #=> false

###############
# empty?

# p nil_var.empty? #=> Error
p empty_var.empty? #=> false

###############
# blank?
p nil_var.blank? #=> true
p empty_var.blank? #=> true

###############
# present?
p nil_var.present? #=> false
p empty_var.present? #=> false
```

# 参考
nil? empty? blank? present? の使い分け - Qiita https://qiita.com/somewhatgood@github/items/b74107480ee3821784e6

【Ruby入門】nilのポイントまとめ(nil? empty? blank? present?) | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト https://www.sejuku.net/blog/19044#blank
UITableViewのdidSelectRowAtが特定のSimulatorで呼ばれなくて実機で呼ばれる現象の回避策

原因は特定できない。しかし、再現できる。


# 問題

UITableViewのdidSelectRowAtがSimulatorで呼ばれなくて実機で呼ばれる。

## 環境

僕がつかってる環境

* Xcode　Version 9.4.1 (9F2000)

## 詳細

* ソースコードは実機/Simulatorで同一
* 作業前にソースを戻しても同じ
    * 念のため製品版としてリリース済みのソースコードに戻したが問題はおこったままであった。
* pod updateしても変わらない。
    * 外部のライブラリが原因の可能性があると考えて、製品版として使っていた外部ライブラリのバージョンを指定してやってみたが、問題はおこったままであった。
* ErrorやWarningは出ていない。
    * Constantsとかの警告もなし
    * didSelectRowAtが来ないTableViewでは警告なし
    * 作業中のstoryboard等では警告有り
    * 作業中のstoryboardと問題となってるUITableViewがあるstoryboardは別
* DrivedData削除してもだめ
* キャッシュ削除してもだめ
* Simulatorと実機の接続先(データダウンロード元）は同じ
* アインインストール→インストールしてもだめ
* 透明のViewか何かが一番手前に表示されている可能性を確認するために、スクロールできることや別画面上にあるボタンがタップできることなどを確認した。
* 問題発症時はスクロールが全て「スクロールしてタップ」の扱いになってた様な気がする。（気のせいかも知れない)

### 補足: 「呼ばれない」「呼ばれる」とは何をもってそう言ってるのか

問題がおこる画面のUITableView内に表示されているCellをタップすると、`func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)` が呼び出されない。

何故呼び出されないと判断したかは、`debugPrint`やbreakpointを設定して、ログが出ないことやbreakpointで停まらないため。
なお、そのソースコードがCustomClassとして使っているのか確認するために`viewDidLoad`や`numberOfRowsInSection` が期待通り動くことを確認している。

本当に動かない画面のStoryboardやClassに対してログを吐き出すようにしたのかというのも不安だったので、 `CaptureViewHierarchy` を使ってきちんとViewを確認したりもしている。


## 端末別状態

動く:

* Simulator iPhone7 PLUS / iOS11.4 -> 問題無し
* Simulator iPhone 8 / iOS11.4 -> 問題無し
* 実機 iPhoneX -> 問題無し
* Simulator iPhoneX / iOS11.4 -> 問題無し

動かない:

* Simulator iPhone 8 PLUS / iOS11.4 -> うごかねぇ！！

## 発生したタイミング

作業中に不意におこった、そのため具体的に記録を取っていないが、こんなタイミングだった。
以下、問題のあった画面を画面A、問題の無い画面全てを画面Bと言う。（画面Aと画面BはStoryboardとxibは共通していない）

* 画面Bに対して、Xcodeで新規機能の実装作業中
* 画面Bの切りの良いタイミングが出来上がる（画面Aは動くことを確認済み）
* 画面Bの変更点をSouceTreeでCommit
* 画面Aに問題が発症 ←！？

## 補足

* 不意に画面Aに問題が出た状態のため、変更を画面Aに対しておこなってしまった可能性を考えて、gitの履歴を除くが、変更点はなかった。
    * UITableViewでdidSelectRowが呼ばれない原因として、よくあるdelegate設定があるが、既に設定済みであったため問題なかった。

## 再現方法

2018/10/09、再現しました。
キーボードのOptionキーを押した状態のまま、フォーカスをSimulatorから外して、Xcode側でRebuildをすると再現しました。
以下手順を、1秒から2秒以内程度に素早くおこなうかつマウス操作は一切しないと高確率で再現します。
（操作の都合上、Magnetという画面サイズの操作できるアプリに依存しているようですが、利用しているライブラリに依存した問題ではないと言い切れるほど調べれていません。）

1. macOS上でSimulatorにフォーカスを当てた状態でOption+Controll+Command+「←」キーを押す
    2. この操作は僕の環境だと、Magnetで画面サイズを左側に寄せる操作になってる
2. その状態で素早くCommand+TabでXcodeに切り替える
    3. この状態で、Simulator上でピンチイン-ピンチアウト操作をSimulateするときに表示される○いやつが表示されていると、再現します。
3. その状態で素早くCommand+Rを押してRebuildすると問題が発生します

# 回避策
以下でこの問題を回避できた

1. ~~Simulator内の問題がおこってるアプリ削除~~
    2. これは不要です。Simulatorの再起動だけで治りました。
2. Simulatorの再起動
    1. Simulator内のOS再起動
3. ~~Xcodeの再起動~~
    4. 不要です。


意味がわからん。
Xcodeの挙動が怪しいときはXcodeの再起動、DrivedData削除、キャッシュクリア、AppleIDのログアウトのみが定石と思っていたが、Simulatorの再起動やSimulator内のアプリ削除も今後は含めた方が良いと学んだ。

0.3人日返して欲しい。
以上...φ('ᴗ'」)
opkg upgradeでresolve_conffilesエラーが出たときの対応

結論としては気にしなくていいです。

### 何の話か

OpenWrtやその他のdistro（組み込み向けdistroが多い気がする）で採用されているopkgというパッケージマネージャがあります。`opkg upgrade [パッケージ名]`でパッケージの更新ができるのですが、その際に次のようなエラーメッセージが表示されることがあります。


```
root@openwrt001:/# opkg upgrade mackerel-agent
Upgrading mackerel-agent on root from 0.55.0-18 to 0.55.0-19...
Downloading https://hnw.github.io/openwrt-packages/17.01/mips_24kc/mackerel-agent_0.55.0-19_mips_24kc.ipk
Configuring mackerel-agent.
Collected errors:
 * resolve_conffiles: Existing conffile /etc/config/mackerel-agent is different from the conffile in the new package. The new conffile will be placed at /etc/config/mackerel-agent-opkg.
```

エラー内容としては書いてある通りで、パッケージから展開しようとした設定ファイルが既に存在していて、かつパッケージ内のオリジナルとMD5値が異なっているのでオリジナルを別名で保存しておいたよ、というものです。

このエラーが出た場合、新旧の設定ファイルを念のため比較してみるのが良いと思いますが、大抵の場合は何もする必要が無いと思います。

もしかすると明示的にファイルを変更していない場合にこのエラーが出ることがあるかもしれません。OpenWrtの場合はUCIの設定の実体が `/etc/config` 以下に保存されるので、LuCI経由などで設定値を変更していた場合にもこのエラーが出ることがありそうです。

## 挙動を確認する

上記エラーを出しているのはopkgコマンドです。opkgのソースコードのミラーがGitHub上にあるので、これを眺めてみましょう。

- https://github.com/shr-project/opkg/blob/f434078a342435ae8a666b599d989c30d4c6a7f5/libopkg/opkg_install.c#L1128-L1150

上記部分を読む限り、設定ファイルがオリジナルから書き換わっている場合は必ず出るエラーのようです。書きかえる前提で配布されている設定ファイルでもこのようなエラーが出るとしたら混乱の元のような気がしますね。
Python Twitterに画像を投稿

```py
import sys
import json
import ssl
import string
import io
from PIL import Image
from requests_oauthlib import OAuth1Session
import urllib.request

# Twitter APIのAuthToken等は事前に用意
# OAuth認証 セッションを開始
twitter = OAuth1Session(CK, CS, AT, AS)

url_media = "https://upload.twitter.com/1.1/media/upload.json"
url_text = "https://api.twitter.com/1.1/statuses/update.json"

# 画像 URL
img_url = 'http://www.dmm.com/xxx.jpg'  # など
response = urllib.request.urlopen(img_url)
data = response.read()
files = {"media" : data}
req_media = twitter.post(url_media, files = files)

# レスポンス
if req_media.status_code != 200:
    print ("画像アップロード失敗: %s", req_media.text)
    exit()

# media_id を取得
media_id = json.loads(req_media.text)['media_id']

# 投稿した画像をツイートに添付したい場合はこんな風に取得したmedia_idを"media_ids"で指定してツイートを投稿
message = '投稿メッセージ'
params = {'status': message, "media_ids": [media_id]}
req_media = twitter.post(url_text, params = params)
```
Python:[pip install requests]実行時の[matplotlib 1.3.1 requires nose, which is not installed.]の対処方法

#はじめに
初歩的だとは思いますが、pip install requests実行時に

```
matplotlib 1.3.1 requires nose, which is not installed.
matplotlib 1.3.1 requires tornado, which is not installed.
```
上記エラーが発生した際の対処方法を記録として残したいと思います。

##①sudo easy_install nose及び、sudo easy_install tornadoを実行することで解決。

```
sudo easy_install nose
sudo easy_install tornado
```
とターミナルへ入力することで解決いたしました。

念の為に情報源を下記に残します。
https://stackoverflow.com/questions/49718346/matplotlib-nose-tornado

ご参考になれば幸いです。
styled-components で視覚的にわかりやすい Grid Layout を生成する

https://mizchi-sandbox.github.io/grid-generator/ でやってることを、視覚的に指定できるように styled-components のヘルパ作ったら個人的に便利だったので紹介。

## 実装

こういうヘルパを書いた

```js:Grid.js
import styled from 'styled-components'

export const Grid = styled.div`
  display: grid;
  grid-template-columns: ${({ columns }) => columns.join(" ")};
  grid-template-rows: ${({ rows }) => rows.join(" ")};
  grid-template-areas: ${({ areas }) =>
    areas.map(r => `'${r.join(" ")}'`).join(" ")};
  width: 100%;
  height: 100%;
`

export const GridArea = styled.div`
  grid-area: ${p => p.name};
  width: 100%;
  height: 100%;
`
```

## 使い方

```js:MyComponent.js
// ...
import { Grid, GridArea } from './Grid'
export function MyComponent() {
  return (
    // prettier-ignore
    <Grid
      columns={["250px", "1fr"]}
      rows={[
        "40px",
        "1fr"
      ]}
      areas={[
        ["header", "header"],
        ["menu",   "editor"],
      ]}
    >
      <GridArea name="header">
        Header
      </GridArea>
      <GridArea name="menu">
        Menu
      </GridArea>
      <GridArea name="editor">
        Editor
      </GridArea>
    </Grid>
  )
}
```

columns と rows と areas で二次元的に、視覚的にわかりやすい指定ができるのがミソ。

prettier-ignore しないと整形されてしまうのが難。prettier-ignore-start/end も最新版にあるらしいが VSCode の prettier プラグインだとプリインされてる prettier が古いのか有効化されなかった。

https://prettier.io/docs/en/ignore.html
【React Native】いきなりmodule unresolvedが発生したとき

## 何が起きた？
redux-sagaのmoduleを触っていないのに、`node_modules/redux-saga/lib/internal/sagaHelpers/takeEvery`で`require("./fsmIterator"))`がmodule　unresolvedだよーって言われた

## やったこと
- Metro Bundlerのキャッシュクリア
    - `rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf $TMPDIR/haste-map-react-native-packager-*`
- watchmanクリア
    - `watchman watch-del-all`
- monorepo(lerna)環境だったので
    - `lerna clear`, rootのnode_modules削除, `lerna bootstrap`

## 結論
**PC再起動**

まじかよ。なおった。
raspberry pi3 + 3.5インチLCD(Kuman)の設定

# はじめに
持ち運びデモ用に丁度いいかな？と思い、Amazonで売っているラズパイ用の3．5インチLCDを買ってみた。

商品はこちら。実用性はともかく、割と高い解像度まで対応しているらしい。
[Kuman 3.5インチ 小型 HDMI モニター](https://www.amazon.co.jp/gp/product/B075JDVV18/ref=as_li_ss_tl?ie=UTF8&psc=1&linkCode=ll1&tag=wanderingprog-22&linkId=890bd2d5cc7c4650cb4cf52e9bff1e58)

が、ぐぐって出てくるドライバーを入れて設定するとブート画面で止まってしまった。最終的に動作しれくれたが、別途色々調べた結果をメモしておく。

## ドライバーのダウンロード先
[LCD-show-180331.tar.gz](https://www.waveshare.com/w/upload/3/34/LCD-show-180331.tar.gz)
※2018/06/25時点での最新。念のため実施時点でのバージョンはチェックして下さい。

```bash

$ wget https://www.waveshare.com/w/upload/3/34/LCD-show-180331.tar.gz
```


## ダウンロード後のインストール

```bash
$ tar xzvf LCD-show-180331.tar.gz
$ chmod -R 755 LCD-show 
$ cd LCD-show
```

展開したフォルダ内を見ると色々とドライバー類などが入っているが、今回関係あるのは3.5inch系の`LCD35*`のファイルのみ。末尾に解像度がついているものなどあるが、お好みで実行。個人的によさげだったのは800x480のかな。

```bash
$ sudo ./LCD35-show
```
実行すると自動でリブートかかって立ち上がってくる。

## 気に入らない場合
上手く行かなかったり、元に戻したい場合は

```bash
$ sudo ./LCD-hdmi
```
を実行すれば切り戻し出来る。

## キャリブレーション
このタッチパネル、初期状態だとかなりずれているのでキャリブレーションが必須。以下を実行すること。
### キャリブレーションツールのインストール
```bash
$ sudo apt-get install -y xinput-calibrator
```
メニューの設定に`Calibrate Touchscreen`が出来ているはずなので実行。実行し終わるとターミナルに

```
Section "InputClass"
Identifier	"calibration"
MatchProduct	"ADS7846 Touchscreen"
Option	"Calibration"	"160 3723 3896 181"
Option	"SwapAxes"	"1"
EndSection
```
こんなのが表示されている（内容は環境によって変わる）はずなので、これをコピー。その後

```bash
$ sudo nano /etc/X11/xorg.conf.d/99-calibration.conf
```
で同一記述がある所に上書きコピペして保存。その後再起動すればOK。


## おしまい
これで使えるようになっているはず。ちなみにこのLCD、別にラズパイ専用ではないのでHDMIの入力であれば色々受け付けると思われる。試しにミニファミコンを接続してみたら、案外まともな反応速度で表示されました(笑)
CircleCIでのみrubocopがエラーになる

# 現象

手元の開発環境ではrubocopに怒られない。

```
% bundle exec rubocop
Inspecting 31 files
...............................

31 files inspected, no offenses detected
```

だがしかし、CircleCIのコンテナで動かすとエラーになる！

![スクリーンショット 2018-06-25 15.26.38.png](https://qiita-image-store.s3.amazonaws.com/0/59853/481ca894-1b87-b1c0-b4ac-5e86fa1490be.png)

```
#!/bin/bash -eo pipefail
bundle exec rubocop
Error: The `Style/TrailingCommaInLiteral` cop no longer exists. Please use `Style/TrailingCommaInArrayLiteral` and/or `Style/TrailingCommaInHashLiteral` instead.
(obsolete configuration found in vendor/bundle/ruby/2.5.0/gems/public_suffix-3.0.2/.rubocop_defaults.yml, please update it)
Exited with code 2
```

# 原因

理由は簡単だった。bundle installしたgemsは手元ではシステム（というかrbenv）の配下にロードされるのに対して、CircleCIではvendor/bundle配下にロードするように指定してあった。

```
- run:
    name: install dependencies
    command: |
      yarn install
      bundle install --jobs=4 --retry=3 --path vendor/bundle
```

このためrubocopがvendor配下のgemsたちまでチェックしてしまっていたのだった。

# 対策

vendor配下をrubocopの対象外にすることで解決した。

```
AllCops:
  TargetRubyVersion: 2.5
  Exclude:
    - 'bin/**/*'
    - 'node_modules/**/*'
    - 'vendor/**/*'
```

# 参考

https://tosbourn.com/rubocop-circleci-config/
C#で文字列の配列を初期化

やられた～
文字の配列を作って初期化した。

```C#:memo.rb
	var result = new string[9];
	result.Initialize();
```
この方法で初期化したら配列の中身がすべてnullだった！
がーん…　""（空文字？）で初期化されるわけじゃないのね…

```C#:memo.rb
	var result = ( new string[9] ).Select( s => "" ).ToArray();

	//albireoさま コメントよりコピー
	var result = Enumerable.Repeat("", 9).ToArray();
```
忘れないようにメモメモ。
調べたらこんな感じでできるのとのこと。（ありがとう～誰となく…

int にするなら、"" の部分を初期化したい数値にすればいいみたいよ。
Varian EclipseのPTVの線量制約はTarget volume にweight 0のupper constraintをつけると上手くいくかも

非常にニッチな案件であるが，自分の備忘録として。
以下の条件で役立つtipsです。
- Varian Eclipseを使用して治療計画を行う
- POを使ったOptimizeを行う(PROでは知らない)
- VMATプランを作成

Target structureに対する線量制約の全体への寄与は通常，$w\cdot (d_i-d)^2$ の様に，あるボクセルの目標値 $d$ に対して現在の値 $d_i$との差を二乗して，weight $w$ を乗じて求める。しかし，target structureへ対する制約がupper, lowerの一つづつしかない場合は，$w\cdot (d_i-d)^3$となり，通常より大きな影響力を持つ。なので，weightが0のdummy constraintを追加すると使い慣れた二乗の方の式が採用される。

また，VMATのOptimizationを行う際に，Normal Tissue Objective (NTO) を使うことがある。このNTOでは，105% とか 100%とかの線量を指定しなければならないが，これは何に対する線量かというと，Target structureの最小のupper constraintに対する線量である。つまり，target structureのupper constraintに103%, NTOに105%などを使っていたら，処方線量の103%のさらに105%，となるのでNTOが甘くなる。

これら両方を一度に解決するためにweight 0のupper constraintをダミーとして用いることは有用かもしれない。
Macのダブルクォーテーションに騙された件について

##書こうと思った理由
JSONをparseしようとしたらうまくいかず、以下のエラーが発生する

```
SyntaxError: Unexpected token “ in JSON
```

結論から言って、2,3時間格闘した結果、わかったのがダブルクォーテーションがダブルクォーテーションじゃなかった、というかダブルクォーテーションが実はいくつか種類があった

##実例

```
""　← 本物

“”　← 偽物
```

わかりずれぇえええええええええええええええええええええええええ

##直し方

「システム環境設定」→「キーボード」→「ユーザ辞書」のスマート引用符とスマートダッシュを使用のチェックボックスを外す

<img width="664" alt="スクリーンショット 2018-06-25 15.31.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/127072/45474a97-f462-396c-a920-ac2c0aa521be.png">

##まとめ

全然スマートじゃないよ

###おまけ

ちなみにこれはvimの「g8」というコマンド使ってUTF-8コードを見比べると以下のような違いがあるみたいですね

```
""　（本物）→22 22

“”　（偽物）→e2809c e2809d
```
Excel 調べたショートカット

#Mac版

|ショートカット名|説明|参考|
|:--|:--|:--|
|Command + Option + 矢印|矢印の方向に罫線を引く||
|Option + ← or →|シートの移動|
|Ctrl + u |セルを編集モードに|
|Shift + Space|現在の行選択|
|Ctrl + -|行選択中に押すと行削除|
|Command + l|左揃え|
|Command + e|中央揃え|
|Command + r|右揃え|
|Shift + Command + C(ユーザ設定)|色の塗りつぶし|
|Option + Command + C（ユーザ設定)|文字色の変更|
|Option + Command + U(ユーザ設定)|セルの結合 U = Unity|
|Command + Shift + X|取り消し線|
|fn + Del|セルの中身を削除|
DeviseAuthTokenでログイン時に返される値を変更する

2018-06-25

Rails (5.0.7)
devise (4.4.3)
devise_token_auth (0.1.43)

### はじめに

Diviseでログイン認証をする際に返却されるユーザー情報の項目を修正したかったが、日本語の記事が見当たらなかったので投稿してみた。（あるのかなぁ探せなかった）


### 1. Userモデル

```ruby:models/user.rb

class User < ActiveRecord::Base
  devise :database_authenticatable, :registerable,
          :confirmable,
          :recoverable, :rememberable, :trackable, :validatable

...
...

  # 追記
  def token_validation_response                                                                                                                                         
    Api::App::UserSerializer.new( self, root: false )
    
  end

end
```

### 2. UserSerializer
```ruby:serializeres/user_serializer.rb
module Api
  module App
    class UserSerializer < ActiveModel::Serializer
      attributes :id, :email,

        # 追加したい項目を追加
        :confirmed_at,

        :created_at, :updated_at
    end
  end
end


```

### 結果

```json:json
{
    "data": {
        "id": 1,
        "email": "ex@example.com",
        "confirmed_at": "2018-04-24T09:35:29.488Z",
        "created_at": "2018-06-21T00:47:20.161Z",
        "updated_at": "2018-06-25T06:16:44.449Z"
    }
}
```

めでたしめでたし。


### 参考
https://github.com/lynndylanhurley/devise_token_auth/blob/master/app/controllers/devise_token_auth/sessions_controller.rb

https://github.com/lynndylanhurley/devise_token_auth/issues/597
TypeScript-React-Starter で Cannot find name 'AsyncIterator' が出るエラー


React 再入門しようと思ったけど `AsyncIterator` エラーが出た。(1か月に1回ぐらい思ってんなこいつ)

## AsyncIterator エラー

今は `TypeScript-React-Starter` という素敵なものがあると聞いたので、早速使おうと思ったら `yarn start` で エラーがでた。

```sh

> npm install -g typescript@next
+ typescript@3.0.0-dev.20180623

> npm install -g create-react-app
+ create-react-app@1.5.2

> create-react-app my-react-app --scripts-version=react-scripts-ts

> cd my-react-app

> yarn start
@types/graphql/subscription/subscribe.d.ts
(17,12): Cannot find name 'AsyncIterator'.

```

しょうがないので、昔触った webpack のプロジェクトを思い出しつつ環境構築したけど、全く同じエラーで動かなかった。

```js
> webpack
@types/graphql/subscription/subscribe.d.ts
(17,12): Cannot find name 'AsyncIterator'.
```




## Async Iteration とは

Async Iteration とは ES2018 に入る 非同期イテレーターの仕様らしい。
問題はどこにあるかというと、 `graphql-subscriptions` で、AsyncIterator の[型解決に問題がある？](https://github.com/apollographql/graphql-subscriptions/issues/77) そうだ。

解決策もばっちり上記リンクに乗っていて、

## 動かすには

`tsconfig.json` の `compilerOptions.lib` に  "esnext.asynciterable" を追加する。

```js
  "lib": ["es6", "dom", "esnext.asynciterable"],
```

どうしてこうすれば動くかはよくわからないので、誰か教えてください。

## 参考

* [Typescript no longer compile : Generic type 'AsyncIterator<T, E>' requires 2 type argument(s) · Issue #77 · apollographql/graphql-subscriptions](https://github.com/apollographql/graphql-subscriptions/issues/77)
* [ES2018 Async Iteration - Qiita](https://qiita.com/printf_moriken/items/f11c63296c60bb5d6ee2)
How to Startup a .NET Core WebAPI Project in Ubuntu 18.04 LTS?

# 1. Create Project
```
# dotnet new webapi -o testapi <-- testapi is your project name

The template "ASP.NET Core Web API" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on testapi/testapi.csproj...
  Restoring packages for /home/johnnychu/DotNetProjects/testapi/testapi.csproj...
  Generating MSBuild file /home/johnnychu/DotNetProjects/testapi/obj/testapi.csproj.nuget.g.props.
  Generating MSBuild file /home/johnnychu/DotNetProjects/testapi/obj/testapi.csproj.nuget.g.targets.
  Restore completed in 571.95 ms for /home/johnnychu/DotNetProjects/testapi/testapi.csproj.

Restore succeeded.
```

# 2. Run
```
# cd testapi
# dotnet run

Hosting environment: Development
Content root path: /home/johnnychu/DotNetProjects/testapi
Now listening on: https://localhost:5001
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
```

# 3. Call API via Your Browser or PostMan
https://localhost:5001/api/values

```
["value1","value2"]
```



https://docs.microsoft.com/zh-tw/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.1
LPICレベル1に出てくるコマンドをまとめてみた

* LPICのレベル1にでてくるコマンドを書き出してみました。
    * 意味やオプションを書く余力がありませんでした。。。
    * 重複しているものもありますし、全てを網羅しているわけではありません
    * 分類は適当ですｗ
    * これプラス、オプションや設定ファイルについても出題されますよ～

# 101試験
## デバイス
* lspci
* lsusb

## モジュール
* lsmod
* modprob
* ldd
* ldconfig

## 起動
* dmesg
* shutdown
* runlevel
* init/telinit
* systemctl
* grub-install
* grub-mkconfig

## パッケージ管理
* man
* whatis
* apropos
* makewhatis
* alien
* dpkg
* dpkg-reconfigure
* apt-get
* aptitude
* apt-cache
* rpm
* yum
* yumdownloader

## シェル操作
* export
* set
* unset
* echo
* env
* printenv
* history
* tee

## ファイル操作
* ls
* cp
* mv
* mkdir
* rm
* rmdir
* touch
* file

## テキスト処理
* less
* cat
* nl
* od
* head
* tail
* cut
* join
* paste
* tr
* sort
* split
* uniq
* pr
* fmt
* expand
* unexpand
* wc
* xargs
* grep
* egrep
* fgrep
* sed
* vi

## 圧縮/解凍/アーカイブ
* gzip
* gunzip
* bzip2
* bunzip2
* xz
* unxz
* tar
* cpio
* dd

## ファイル管理
* chmod
* umask
* chown
* chgrp
* ln

## ファイル検索	
* find
* locate
* updatedb
* which
* whereis

## プロセス管理
* ps
* top
* pstree
* kill
* killall
* pkill
* pgrep
* jobs
* nohup

## システム管理
* free
* uptime
* uname
* screen
* nice
* renice

## ファイルシステム
* fdisk	
* gdisk
* parted
* mkfs
* mke2fs
* mkswap
* df
* du
* fsck
* tune2fs
* dumpe2fs
* debugfs
* mount
* umount

## クォータ
* quota
* quotacheck
* quotaon
* quotaoff
* edquota
* repquota

# 102試験
## スクリプト
* set
* unset
* env
* printenv
* alias
* unalias
* source
* .
* exec

## GUI
* Xorg
* Xhost	
* startx

## 管理業務
* pwconv
* pwunconv
* chage
* chsh
* useradd
* usermod
* userdel
* passwd
* groupadd
* groupmod
* groupdel
* id
* groups
* getent
* crontab
* run-parts
* at
* batch
* locale
* iconv
* tzselect
* tzconfig

## 重要なシステム
* date
* hwclock
* ntpdate
* ntpq
* logger
* who
* w
* last
* lastlog
* journalctl
* mail
* mailq
* lpr
* lp
* lpq
* lpc
* lpstat
* lprm
* lpadmin

## ネットワーク	
* ping
* ping6
* traceroute
* traceroute6
* tracepath
* hostname
* netstat
* nc
* route
* ip
* ifconfig
* ifup
* ifdown
* host
* dig

## セキュリティ
* lsof
* nmap
* chage
* su
* sudo
* visudo
* ulimit
* ssh

意外とありますね。。。