OmniAICreator/Qiita-1.07M huggingface dataset:
ServiceNowのサーバーサイドスクリプトやクライアントスクリプトからログを出力する

# 環境

バージョン：KINGSTONE(Developer Instance)

# ログに種類について

ServiceNowのログは、サーバーサイドスクリプトから出力するログと、クライアントサイドスクリプから出力するログの２種類がある。
それぞれ、ログを出力するメソッドと、ログが出力される場所が異なるので、ログ出力時はサーバーサイドのスクリプトかクライアントスクリプトかのどちかに応じてログ出力方法を確認する。

# サーバーサイドスクリプトのログについて

サーバーサイドスクリプトは、例えばBusiness Ruleや、UI PAGEのProcessing Scriptなど、サーバーで実行されるスクリプトを指している。
スクリプトの作成時は、Server Developmentのカテゴリーに含まれるものです。



```javascript

 gs.debug("これはdebugログです");
 gs.info("これはinfoログです");
 gs.warn("これはwarnログです");
 gs.error("これはerrorログです");
```


サーバーサイドログは、Application Logに出力される。
検索バーに「Application Logs」と入力し表示させる。


![ServiceNowApplicationLog.png](https://qiita-image-store.s3.amazonaws.com/0/197947/7a7ab5fb-114b-1d35-515e-c290cbb22093.png)

なお、gs.debugで出力したデバッグログは初期状態では出力されない。
デバッグログを出力するには、次の手順でsystem_propertiesの設定変更を行う。

検索バーに「sys_properties.list」と入力する。
Name=x_58872_needit.logging.verbosity
Value=debug
で新規レコードを作成する。
※Nameの「x_58872_needit」の部分はそれぞれの環境に応じたアプリケーションスコープ名に置き換える必要がある。

![DebugLog.png](https://qiita-image-store.s3.amazonaws.com/0/197947/dac94ab0-4e09-a226-1f1d-2b9cd563a950.png)

この設定を行うことで、デバッグログもApplication Logsに出力されるようになる。

# クライアントサイドスクリプトのログについて

クライアントサイドのスクリプトは、Client Script、UI Policy、UI PageのScriptを指す。

ログの出力は、下記の通り行う。

```javascript
function onLoad() {
    jslog("クライアントスクリプト onLoad()");
}
```

クライアントスクリプトのログは、クライアントの実行画面の下部に直接出力されるが、デフォルトではクライアントスクリプトのログ出力はオフとなっているため、下記の通り設定によりログ出力をオンにする。
ServiceNowのブラウジング画面の右上のギアアイコンから下記の通りの設定を行う。

![clientLogSetting.png](https://qiita-image-store.s3.amazonaws.com/0/197947/063b2a27-a7f1-0667-5f59-7263849fd3a1.png)

設定後、下記の通りクアイントの画面にクライアントスクリプトログが出力される。

![ClientLogOutput.png](https://qiita-image-store.s3.amazonaws.com/0/197947/b7473e33-1772-5dd3-f3d4-75d4be27b6ea.png)

# さいごに

ServieNowはPlugInのインストールと設定により簡単に日本語に切り替えが可能であるが、ここではあえて英語の画面を使用している。
理由は、今のところServiceNowの情報源はほとんど英語しかなく、日本語の画面に変更してしまうと、英語の情報源に記載されているメニュー名から対応する日本語の名称をいちいち探す手間を省くためである。
TypeScriptのenumにfunctionを追加する

# TypeScriptのenumにfunctionを追加する

最近はFirebaseのCloud Functionsをやたら書きまくってる[@1amageek](https://twitter.com/1amageek)です。
普段Swiftを使ってると他の言語でも欲が出てきてします。そして他の言語でも実は出来たりするとちょっと嬉しくなりますね😄。

今回はTypeScriptのenumに関数を追加したくなったのでやってみました💪🏻。

```typescript
enum Type { }

namespace Type {
  export const f = (type: Type) => { }
}

export { Type }
```

こんな感じで使ってます。実際にプロジェクトで使ってる例です。

https://github.com/1amageek/tradable.ts/blob/master/src/currency.ts
フォームのふりがなを自動入力する vanilla-autokana

フォームのふりがな自動入力ライブラリとして、最も有名なのは[jquery.autokana](https://github.com/harisenbon/autokana)だと思います。このライブラリはjQueryプラグインです。2018年現在では、jQueryを使わない開発環境は普通にありますし、ライブラリはscriptタグで読み込むのではなくwebpack等でバンドルするのが一般的になっています。

そこで、jQueryに依存せず、ES Modulesとして使用できるライブラリを作成しました。

vanilla-autokana
https://www.npmjs.com/package/vanilla-autokana

## デモ

↓のURLで、vanilla-autokanaを使ったフォームを試すことができます。
http://5ac8f708be40f12ac4c70db9.clever-wiles-e716bc.netlify.com/

## インストール

`npm install vanilla-autokana` でインストールできます。
ライブラリをscriptタグから読み込みたい場合は、[GitHubリポジトリ](https://github.com/ryo-utsunomiya/vanilla-autokana)の`dist/autokana.js`をダウンロードしてください。

## 基本的な使い方

`AutoKana.bind()`メソッドを使って、名前のinput要素とふりがなのinput要素のidをAutoKanaに教えてください。
この際、DOM要素があらかじめ存在している必要があるので、`AutoKana.bind()`の呼び出しがinput要素よりも後に来るように配置するか、`DOMContentLoaded`イベントのハンドラで`AutoKana.bind()`を呼び出してください。

```html
<input name="name" id="name">
<input name="furigana" id="furigana">
<script src="autokana.js" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    AutoKana.bind("#name", "#furigana");
  });
</script>
```

jQuery.autokanaとAPI互換性があります。

```js
// jQuery.autokana
$.fn.autokana('#name', '#furigana', { katakana: true });
// vanilla-autokana
AutoKana.bind('#name', '#furigana', { katakana: true });
```

## JavaScriptフレームワークと組み合わせる

ReactやVueのようなJavaScriptフレームワークでは、input要素のvalueに値を設定するだけでは、フレームワークが保持している状態に変更を加えることができません。
jQuery.autokanaはこれらのフレームワークと連携するようには作られていませんが、vanilla-autokanaはReactやVueとも組み合わせることができます。

以下はVue.jsの単一ファイルコンポーネントです。このままではふりがなの自動入力は行われません。

```html
<template>
<div>
  <input name="name" id="name" v-model="name">
  <input name="furigana" id="furigana" v-model="furigana">
</div>
</template>
<script>
  import * as AutoKana from 'vanilla-autokana';

  export default {
    data() {
      name: '',
      furigana: '',
    },
    mounted() {
      AutoKana.bind('#name', '#furigana');
    }
  }
</script>
```

ふりがなの自動入力を行うには、`AutoKana.bind()` の戻り値として取得できるAutoKanaインスタンスの`getFurigana()`メソッドを使用するのがお勧めです。

```html
<template>
<div>
  <input name="name" id="name" v-model="name" @input="handleNameInput">
  <input name="furigana" id="furigana" v-model="furigana">
</div>
</template>
<script>
  import * as AutoKana from 'vanilla-autokana';

  let autokana;

  export default {
    data() {
      name: '',
      furigana: '',
    },
    mounted() {
      // ふりがなのinput要素のidは省略可能
      autokana = AutoKana.bind('#name');
    },
    methods: {
      handleNameInput() {
        this.furigana = autokana.getFurigana();
      }
    }
  }
</script>
```

## 仕組み

vanilla-autokanaは、jQuery.autokanaと同様、IME変換中のinput要素のvalueを読み取って、ふりがなを取得しています。**かな漢字変換の機能を持っているわけではありません**。

ライブラリの設計上、コピペに対応できない等の制約があります。より本格的なかな漢字変換が必要な場合、サーバサイドにかな漢字変換APIを用意する方式になると思います。
ABC093 in Haskell

HaskellでAtCoder Beginner Contest 093を解いてみました。


# A

そのまま。

```Haskell:a.hs
import Data.List

main = do
  str <- getLine
  putStrLn $ if elem str $ permutations "abc" then "Yes" else "No"
```

と思ったら条件より以下の方が適切でした。

```Haskell:a.hs
import Data.List

main = do
  str <- getLine
  putStrLn $ if nub str == str then "Yes" else "No"

```

# B

そのまま。

```haskell:b.hs
import Data.List

solve :: Int -> Int -> Int -> [Int]
solve a b k =
  if b-a+1 > 2*k then [a..a+k-1] ++ [(b-k+1)..b]
  else [a..b]
    
main = do
  [a,b,k] <- map read . words <$> getLine :: IO [Int]
  mapM print (solve a b k)
```

# C

case部分が汚いが一応通る。もう少しスマートに書きたい。

```haskell:c.hs
import Data.List

solve :: Int -> Int -> Int -> Int
solve a b c =
  (div (z - x) 2) + (div (z - y) 2) + 
   case ((z - x) `mod` 2) + ((z - y) `mod`2) of
     0 -> 0
     1 -> 2
     2 -> 1
  where
    [x,y,z] = sort [a,b,c]


main = do
  [a,b,c] <- map read . words <$> getLine :: IO [Int]
  print $ solve a b c
```

# D

これで動かないことも知ってるしそもそもTLE...
あとで書き直します。

```haskell:d.hs
import Control.Monad
import Data.List

solve :: [[Int]] -> [Int]
solve [] = []
solve ([a,b]:qs) =
  e : solve qs
  where
    maxInt = 10^10^10
    e = length  [(x,y) | x<-[1..(max a b)],y<-[1..(max a b)],x/=a&&y/=b&&x*y<a*b]
  

main = do
  q <- read <$> getLine ::IO Int
  ql <- replicateM q $ map read . words <$> getLine ::IO [[Int]]
  mapM print $ solve ql
```
React v16で実装された new Context APIを使って、Reduxへ別れを告げる

![alt](https://user-images.githubusercontent.com/26253721/39765058-e8d0eae4-531b-11e8-9305-4c852f269517.png)
React v16でContext APIが新しくなりました。
このContextを使うことで、これまでサードパーティーのライブラリに頼っていたstate管理をreact本来の機能で実装できるようになりました。
しかしfacebookの例により、シンプルで柔軟性に富む代わりに実際の運用が難しいです。

それではreactのContext APIをstate管理に使う際のメリットデメリットについて書きます。

メリット
1. 記述量が圧倒的に少ない。reduxの1/3。
2. stateだけでなく、変数を渡せる。
3. 可読性が高くシンプルなコードが書ける。
4. 学習コストが低い。
5. react hookのuseReducerと共に使うとかなりスケールする。
デメリット
1. ContainerコンポーネントでJSXが純粋なViewでなくなり、ネストが2段深くなる。
2. 複数のstoreからcontextを利用しようとすると、記述が増える。
3. storeが一つでないのでスパゲッティになりやすい。
4. contextを親のstateに入れないと、renderが何回も呼ばれる。（後述）

## Context APIの要素
Context APIは三つの要素のみで成り立ちます。
### 1. React.createContext
後述するProvider, Consumerをペアで作ります。
例　const {Provider, Consumer} = React.createContext;
// 以下のように名前をつけることもできます。
const RootCotext = React.createContext;

### 2. Provider
Consumerに、context(state)を渡す為のコンポーネントです。
reduxのprovider, createStoreの役割です。
### 3. Consumer
Providerからcontext(state)を受け取ります。
reduxのconnect,mapStateToProps,mapDispatchToPropsの役割です。

### それでは実例を見てみましょう。
Text　はReactNativeの要素で文字列を表示します。
従来はこのようにpropsをバケツリレーして渡していました。

```js

// App.js
const Grandson = (props) => (
  <Text>{props.name}</Text>
);

const Son = (props) => (
  <Grandson name={props.name}/>
);

export default class Father extends Component {
  render() {
    return (
      <Son name='カバ' />
  );
}
```
次にContextを使って擬似global stateを実現してみます。

```js
// App.js
import React, {Component} from 'react'
import {Text} from 'react-native'

// contextの作成。
const RootContext = React.createContext()

const Grandson = () => (
  <RootContext.Consumer>
    {context=> 
      <Text>{context.name}</Text>
    }
  </RootContext.Consumer>
)

const Son = () => (
  <Grandson />
)

export default class Father extends Component {
  render() {
    return (
      <RootContext.Provider value={{name: 'kaba'}}>
        <Son />
      </RootContext.Provider>
    )
  }
}
```

これで父コンポーネントから孫コンポーネントへstate（今回は変数）を渡すことができるようになりました。
このように擬似global変数を作れました。
ただ一つ注意点があって、valueに、オブジェクトを直に渡すと、画面描画時に、毎回オブジェクトが生成されメモリの無駄なので、

```jsx
export default class Father extends Component {
  state = {name: 'kaba'}

  render() {
    return (
      <RootContext.Provider value={this.state}>
        <Son />
      </RootContext.Provider>
    )
  }
}
```
のように、contextはstateの中に入れておくとパフォーマンスの問題が起こりません。


## 結論
小規模アプリの開発には向いている。
非同期もasync, awaitで解決できそうだ。
combineReducerもどきも独自ルールで作れる。
しかし、それ以外の用途ではredux, mobxを使用した方が使い勝手がいい。
結局シンプルすぎて、独自ルールを追加しないとやっていけないのが辛い。
チーム開発では推奨できない。
だだし、疎結合なので、reduxへの移行も比較的簡単だ。
十分に実用的なので、個人では使っていきたい。

実務で使う場合は、以下の記事を参考にされたし!
[React v16で実装された new Context APIを使って、Reduxへ別れを告げる②](https://qiita.com/loverails/items/b8dc97384951f785322d)

## Unstated
実は、このContext Apiを超薄く拡張し、実用レベルにまでしたライブラリがある。
unstatedだ。
[reduxを捨ててunstatedを使う理由](https://qiita.com/kaba/items/b05f680f850dd46548f3)
2019年からreactを使う人はこれを使うといい。star5000越えで、今reactで一番人気のあるreduxの代用だ。
unstatedはわずか200行のライブラリだ。テストもしやすいのでベテランエンジニアにこそオススメしたい。
私は実務で使っている。
ブラウザのコンソールで主要JavaScriptライブラリのバージョンを確認する方法

# きっかけ
これまで様々な Web サイトや Web アプリケーションを制作・開発してきたなかで、機能改修を行う際にバージョンを確認したい時があったため、まとめることにした。
また、どんなライブラリー/バージョンで動作しているのか興味本位で知りたい時に、Developer Tools の Console で簡単に知れたら良いなと思ったため。

本記事ではライブラリーのバージョン確認に重きを置いている。「どんなライブラリーがロードされているか」を知る方法には、Developer Tools の Elements タブやソースを表示する等で推察してほしい。

# 各ライブラリーのバージョンを確認する
## jQuery
まだまだ無数のWebサイトの制作・運用の前線で活躍するjQueryのバージョン確認方法。

```js
$.fn.jquery
// "1.11.3", "3.2.1", ...
```

余談になるが、jQueryの公式サイトでも1.x系で運用されていることにビックリしている。

## AngularJS
公式ドキュメントの [API Reference](https://docs.angularjs.org/api/ng/object/angular.version) に記述がある。

```js
angular.version.full
// "1.4.7", "1.5.11", ...
```

## Angular
Angularは、初期化時に`<body>`配下に出来るAppComponent（一般的には`<app-root>`要素）に対して`ng-version`属性が付与されるため、比較的簡単に確認できる。

```js
$('[ng-version]').getAttribute('ng-version');
// "4.4.4", "5.2.0", ...
```

# React
React に関しては良い方法が思い当たらなかった。
CDN 経由でHTMLファイルで直接から React をロードしている場合は、`React.version;`で取得できるようだが、ビルドツールを用いて構築する現代ではあまり用いることはできないだろう。

React v16 以降で React DevTools 拡張機能をインストールしている環境であれば下記の1行で取得できるが、素直に React DevTools を使った方が良いのではと思える。

```js
JSON.stringify(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).match(/"version"\:"([0-9\.]+)"/)[1];
// "16.2.0"
```

# Vue.js
グローバル変数に`Vue`オブジェクトが生成されているため、`version`プロパティを参照すれば良い。

```js
Vue.version;
// "1.0.24", "2.4.2", ...
```

# Riot.js（v2 以降）
こちらもグローバル変数に`riot`オブジェクトが生成されているため、`version`プロパティを参照すれば良い。

```js
riot.version;
// "v2.2.1", "v3.9.1"
```
Python-style decorator in Rust

Pythonには`@`でデコレータを定義する文法があります

https://docs.python.jp/3/glossary.html#term-decorator

```python
def f(...):
    ...
f = staticmethod(f)

@staticmethod
def f(...):
    ...
```

この糖衣構文は存外便利なのでRustでも導入してみましょう。
デコレータは関数を受け取って関数を返すので[impl Trait](impl-trait)を使用すれば簡単に定義できますね。

```rust

fn logging<F>(func: F) -> impl Fn(i32) -> i32
where
    F: Fn(i32) -> i32,
{
    move |i| {
        println!("Input = {}", i);
        let out = func(i);
        println!("Output = {}", out);
        out
    }
}
```

ここでは`i32`をもらって`i32`を返す関数を対象に、入力値と出力値を標準出力に出すデコレータを定義してみました。これは簡単につかえます：

```rust
fn add2(i: i32) -> i32 {
    i + 2
}

fn main() {
    let add2 = logging(add2);
    add2(2);
}
```

Pythonにおける`@`デコレータ構文はこの代入部分`logging(add2)`をあらかじめしておいてくれる糖衣構文でした。これをproc-macroで作ってみましょう：

```rust
use proc_macro::TokenStream;
use syn::*;

#[proc_macro_attribute]
pub fn deco(attr: TokenStream, func: TokenStream) -> TokenStream {
    let func = func.into();
    let attr = parse_attr(attr);
    let item_fn: ItemFn = syn::parse2(func).expect("Input is not a function");
    let vis = &item_fn.vis;
    let ident = &item_fn.ident;
    let block = &item_fn.block;

    let decl: FnDecl = *item_fn.decl;
    let inputs = &decl.inputs;
    let output = &decl.output;

    // (a: i32, b: f64) -> (a, b)のように引数だけ抜き出している
    let input_values: Vec<_> = inputs
        .iter()
        .map(|arg| match arg {
            &FnArg::Captured(ref val) => &val.pat,
            _ => unreachable!(""),
        })
        .collect();

    let caller = quote!{
        #vis fn #ident(#inputs) #output {
            let f = #attr(deco_internal);
            return f(#(#input_values,) *);

            fn deco_internal(#inputs) #output #block
        }
    };
    caller.into()
}
```

これを用いると次のようにデコレータをかけます：

```rust
#[deco(logging)]
fn add2(i: i32) -> i32 {
    i + 2
}

fn main() {
    add2(2);
}
```

このように関数に対してもproc-macroでコードを生成することができます。

問題点
------

Pythonの場合には`*args, **kwds`の構文によって自由に引数を設定できたが、それが難しい。コードの生成時には引数のリストが取得できるので、`logging`をproc-macroとして実装するならば簡単だが、Rustの関数として実装する場合は不可能となる。

最後に
------
コードはこちら
https://github.com/termoshtt/deco
nodeパッケージのダウングレード

使えないpackageがあったので、webpackをversion4からversion3へダウングレード。

[Releases · webpack/webpack](https://github.com/webpack/webpack/releases) よりversionの確認。

```
npm install webpack@3.10.0 --save
```

`./node_modules/.bin/webpack-dev-server` が消えるので次のコマンドを実行。

```
yarn install
```

yarn でやると消えないっぽい。

```
yarn upgrade webpack@3.10.0
```


### 参考
- [javascript \- How to downgrade version of Webpack? \- Stack Overflow](https://stackoverflow.com/questions/43589964/how-to-downgrade-version-of-webpack)
- [webpack\-dev\-serverがCannot read property 'compile' of undefinedエラーを吐く \- てくのろーぐ](http://masahira.hatenablog.com/entry/2018/03/05/211015)
HTTPステータスをテストする方法

任意のHTTPステータスのテストをするときに便利なサイトを見つけたので備忘録とリンクとして残しておきます。便利すぎておしっこ出そう。

**httpus - https://httpstat.us**

ASP.NETを使ってるのが渋い。

```
$ curl -i  httpstat.us/200
HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 6
Content-Type: text/plain; charset=utf-8
Server: Microsoft-IIS/10.0
X-AspNetMvc-Version: 5.1
Access-Control-Allow-Origin: *
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=89d63535b73ac702aaebfff48d7c5b55c5a76b46550f31ebb8421b9d6ccfe162;Path=/;HttpOnly;Domain=httpstat.us
Date: Sat, 07 Apr 2018 15:27:46 GMT

200 OK
$ curl -i  httpstat.us/301
HTTP/1.1 301 Moved Permanently
Cache-Control: private
Content-Length: 21
Content-Type: text/plain; charset=utf-8
Location: https://httpstat.us
Server: Microsoft-IIS/10.0
X-AspNetMvc-Version: 5.1
Access-Control-Allow-Origin: *
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=89d63535b73ac702aaebfff48d7c5b55c5a76b46550f31ebb8421b9d6ccfe162;Path=/;HttpOnly;Domain=httpstat.us
Date: Sat, 07 Apr 2018 15:22:08 GMT

301 Moved Permanently
```
Docker for MacでROSの亀さんと戯れた

# この記事について
ROSの初心者が、あろうことかほぼ使ったことないDocker上でROSのプログラミングに挑戦しようとして、いきなりチュートリアルでくじけそうになりながらもなんとか亀さんを動かすまでの記録です。

なぜDocker上でROSを動かすのかというと、

- MacにもROSはあったりするけどUbuntuほどサポートされていない。
- Dockerでやれば他の人とも簡単に開発環境を共有できる
- Mac上の環境がぐちゃぐちゃにならない

などの理由があります。

この記事はロポットプログラミングやりたいけどMacから離れられない人に役に立つでしょう。

初心者のため間違いなどもあると思いますが、お気付きでしたらご指摘ください。

# 参考URL
[Using ROS with Docker in macOS](https://www.xiaokeyang.com/blog/using_ros_with_docker_in_macos)

[Docker + ROS(kinetic)でチュートリアル](https://qiita.com/Leonardo-mbc/items/cfd38a4fae8667593cf1)

# 前準備

## Docker for macをインストールして立ち上げておく
Docker Community Edition for Macを[Docker store](https://store.docker.com/editions/community/docker-ce-desktop-mac)からダウンロードしてインストールします。立ち上げると画面右上に鯨のような船のアイコンが表示されます。

## Xquartzをインストールしておく
[ここ](https://www.xquartz.org)から`.dmg`ファイルをダウンロードしてインストールします。起動したら`環境設定->セキュリティ`と進んで`ネットワーク・クライアントからの接続を許可`にチェックを入れます。
Docker上でGUIを動かすのに使います。

# コンテナ一つで亀さんを動かす
参考URLにあげたやり方ではどちらもコンテナ一つでノードを動かしていて、ネットワークの設定をするのが面倒です。
ここでは`docker run`の代わりに`docker exec`を使ってネットワークの設定なしにチュートリアルの亀さんを動かしてみます。

## Dockerの準備
### Dockefile
ワーキングディレクトリに以下のようなDockerfileを準備します。

```
# Dockerfileの中身
FROM ros:kinetic

RUN apt-get update \
  && apt-get install -y ros-kinetic-ros-tutorials \
    ros-kinetic-common-tutorials \
    && rm -rf /var/lib/apt/lists/
```

### Docker image をbuildする
以下のコマンドでdocke imageをbuildします。

```
docker build -t ros-tutorials .
```

### Docker runでコンテナを起動する
Docker runでコンテナを起動して、roscoreでmasterノードを立ち上げます。
ただし、ここでは亀さんが出てくる窓を映すためにディスプレイの設定をする必要があります。
また、後で同じコンテナに入るために`--name`オプションでわかりやすい名前をつけておきます。

以下のコマンドでディスプレイを設定しmasterノードを立ち上げます。

```
open -a Xquartz
ip=$(ifconfig en0 | grep inet | awk '$1=="inet" {print $2}')
echo $ip
xhost + $ip
docker run --rm -e DISPLAY=$ip:0 --name ros-test ros-tutorials roscore
```

### 起動したコンテナでturtlesimを実行する
上のコマンドを実行するとターミナルは入力を受け付けなくなるので、新しいターミナルを立ち上げturtlesimを実行します。

```
# hostのMac内
docker exec -it ros-test bin/bash
# 上で立ち上げたコンテナ内部
source opt/ros/kinetic/setup.bash
rosrun turtlesim turtlesim_node
```
これで画面に亀が出てきます。最後に同じようにしてキーボード入力を受け付けるノードを立ち上げます。

```
# hostのMac内
docker exec -it ros-test bin/bash
# 上で立ち上げたコンテナ内部
source opt/ros/kinetic/setup.bash
rosrun turtlesim turtle_teleop_key
```

最後に入力したターミナルをアクティブにして上下左右キーを押せば亀さんが動くはずです。
亀さんのいる窓をアクティブにしても亀さんは動きませんので注意しましょう。

わざわざ`docker exec`するたびに`source opt/ros/kinetic/setup.bash`するのも面倒なのなんかいい方法ありませんかね。

SLAMがやりたくて始めたROSですが、先はまだまだ長そうです。
Flaskでデータのラベリングサイトを作成する

復習がてら「[Pythonによるスクレイピング&機械学習](http://www.socym.co.jp/support/s-1079)」の７章を読んでいる。
すると画像データのラベリングをする部分があった。
よく見るとphpで書かれていたのでまあせっかくだしpythonで書いてみようと思ったので作ってみた。

## 環境
* python 3.6.0
* Flask 0.12.2

## ディレクトリ構造
```
.
├── labelling.py　：　Flaskファイル
├── static
│   ├── gyudon　：　まだラベリングしていない画像フォルダ
│   └── labeled　：　ラベリングした画像フォルダ
│       ├── beni
│       ├── cheese
│       ├── kimuti
│       ├── negi
│       ├── normal
│       └── other
└── templates
    └── index.html

```

## HTML
とりあえず雑なHTMLを書いてみる。

```templates/index.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>画像ラベリングサイト</title>
</head>
<body>
    <h1>画像を分類してください</h1>
    <img src="{{ img }}" style="width: 500px;">
    <form action="{{ url_for('labelling')  }}" method="POST">
      <input type="hidden" name="img_path" value="{{ img }}">
      
      {% if category_list %}

      {% for category in category_list %}
      <input type="radio" name="category" value="{{ category }}">
      {{ category }}
      <br/>
      {% endfor %}

      {% else %}
      static/labeledにカテゴリーフォルダを作成してください。

      {% endif %}
      
      <input type="submit" value="送信">
    </form>
</body>
</html>
```
表示されている画像を見て分類を行うformを作成。
フォームで送信するのは分類するカテゴリと画像のファイルパス

## Flask

```labelling.py 
from flask import Flask, render_template, request, redirect, url_for
import glob
import os
import shutil


app = Flask(__name__)

@app.route("/")
def index():

    # 画像ファイルパスを取得
    img_path = glob.glob("static/gyudon/*")
    # 分類するフォルダ名を取得
    category_path = [os.path.basename(path) for path in glob.glob("static/labeled/*")]
    return render_template('index.html', img=img_path[0], category_list=category_path)

@app.route("/labelling", methods=['POST'])
def labelling():

    # 分類するフォルダパスを取得
    category_path = os.path.join("static", os.path.join("labeled", request.form['category']))
    # ファイルの移動
    shutil.move(request.form['img_path'], category_path)
    return redirect("/")

if __name__ == "__main__":
    app.debug = True
    app.run()
```

## 実行
実行してみるとこんな感じ
<img width="619" alt="スクリーンショット 2018-04-08 0.12.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/176149/295501d1-49ce-01d0-6f21-e37985b800d1.png">

## 感想
Flaskはファイル構造も容易であったり、一つのファイルで管理できるのがいいなぁと実感。
『Amazon Web Services 基礎からのネットワーク＆サーバー構築 改訂版』学習メモ

参考：[Amazon Web Services 基礎からのネットワーク＆サーバー構築 改訂版](http://amzn.asia/4NyI6qs) 

## 1. サーバーとは
- `Linux/Windows Server`など、サーバー用OSをインストールしたコンピュータ
- サーバーにどのようなソフトウェアをインストールするかでサーバーの役割が決定する。

サーバーには複数のソフトウェアをインストールすることもできる。
例）`webサーバーソフト` + `DBソフト` = `webサーバー兼DBサーバー`

## 2. サーバーの構成
### 2.1 どのようなサーバーが必要か
| 用途 | サーバー種類 | 説明 | 
|:--- |:--------- |:-----|
| webサイト | webサーバー | webの機能のソフトウェアをインストールしたもの |
| データベース | DBサーバー | DB機能のソフトウェアをインストールしたもの |
| メール | メールサーバー | メールの送受信機能のソフトウェアをインストールしたもの |

### 2.2 サーバー構築に必要な知識
1. サーバーOSのインストール方法
2. 各ソフトウェア(※)のインストール方法や設定

(※) 各ソフトウェアの例

| 用途 | ソフトウェア |
|:------ |:----- |
| webサーバー | Apache, nginx |
| DBサーバー | MySQL, PostgreSQL |
| メールサーバー | Sendmail, Postfix |


## 3. ネットワークの構成
- `TCP/IP(プロトコル)`を使用
- `TCP/IP`では、それぞれのサーバーにIPアドレスを振る(他の機器と重複しない)。
- インターネット通信をするには`ルーター`を用いる。
- 各サーバーでは`ルーター`にデータが流れる構成にする。
- インターネットでは`ドメイン名`(例：www.example.jp)を用いてアクセスする。
- `DNSサーバー`の設定が必要

### 3.1 ネットワーク構築に必要な知識
- `IPアドレス`に関する知識
  - `IPアドレス`をどのように定めるか。
  - `ルーター`を介したインターネットとデータの流れをどのように制御するか。
- `DNSサーバー`に関する知識
  - `ドメイン名`と`IPアドレス`を結びつける方法。
  - `ドメイン名`と`IPアドレス`がどのように相互変換されているか。

### 3.2 問題を解決する様々なツール・コマンド
#### 3.2.1 ネットワーク関連のコマンド
- ping
- traceroute
- telnet
- nslookup
- dig

#### 3.2.2 流れるデータを覗き見るには
- ネットワークの生のデータ
  - Wireshark
- HTTPプロトコルに限ったデバッグ
  - webブラウザ付属のデバッグツール

## 4. 公開 or 隠蔽されたネットワーク
| 公開 | 隠蔽 |
|:------ |:----- |
|パブリックサブネット | プライベートサブネット |
|インターネットに接続され、公開されている。 | インターネットに直接接続せず、隠されている。|
| webサーバー | DBサーバー |
DBサーバーには`NAT(※)`を用いる。

### 4.1 `(※)NAT(Network Address Translation)`とは
- 内部だけで通用するアドレスを、外部と通信できるアドレスへ変換する技術。
- `NAT`を導入すると、「`片方向だけの通信を許可する`」ことができる。

| アクセスの方向 | 可否 |
|:-----------|:------:|
| DBサーバからインターネット接続 | ○ |
| インターネットからDBサーバー接続 | × |

## 5. AWSの`リージョン`と`アベイラビリティーゾーン`
- 世界各地に分散されたデータセンター群のことを`リージョン`と呼ぶ。
- それぞれの`リージョン`は、「`アベイラビリティゾーン(Availabillity Zone : AZ)`」に分割されている。
- それぞれの`アベイラビリティゾーン`は物理的に距離が離されて独立したファシリティを用いている(耐障害性を高めるため)。

## 6. `ネットワーク`と`Amazon VPC`
- AWSでネットワークを作るには`Amazon VPC`と呼ばれる領域を作成する。
- `Amazon VPC`を作る際、`どのようなIPアドレス範囲を使うか`を指定する。
- `Amazon VPC`を分割したネットワークのことを`サブネット`と呼ぶ。
- `サブネット`内にサーバー(`Amazon EC2`)を配置することができる。

## 7. `サーバー`と`Amazon EC2インスタンス`
- AWSでサーバーを作るには、`Amazon EC2`を用いる。
- 各サーバーの個体は`インスタンス`(仮想的なサーバー)と呼ばれる。
- インスタンス作成時には、CPUのスペックやディスク容量を決めることができる。
rubyとselenuimでsend_keysが使えないときの代替策

#作戦
・入力したい文字列をクリップボードへコピー
・入力したいところへカーソルを合わせる
・貼り付け

#クリップボードコピー用のgem

```shell

gem install clipboard
```

#クリップボードへコピー
```ruby

require 'clipboard'
Clipboard.copy('入力したい文字列') 
```

#入力したいところへカーソルを合わせる
```ruby

driver.find_element(:name, '入力したいとこのname').click
```

#ctrl+vを実施
```ruby
driver.action.key_down(:control).send_keys('v').key_up(:control).perform 
```

#あとがき

なんかこんなエラーが出るんですsend_keys使うと。。。
これの対処法知ってたら教えてください。

```cmd
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/
selenium-webdriver-3.11.0/lib/selenium/webdriver/remote/
response.rb:69:in `assert_ok': unknown error: call function result missing 'value'
(Selenium::WebDriver::Error::UnknownError)

//出力されるログ
[mmdd/hhmmss.XXX:ERROR:process_reader_win.cc(123)] NtOpenThread:
 {アクセス拒否} プロセスはオブジェクトのアクセスを要求しましたが、アクセス権が与えられていません。 (0xc0000022)
[mmdd/hhmmss.XXX:ERROR:exception_snapshot_win.cc(88)] thread ID 36952 not found in process
[mmdd/hhmmss.XXX:WARNING:crash_report_exception_handler.cc(62)] ProcessSnapshotWin::Initialize failed

```
続・WSL(Ubuntu)でnode.jsの開発をする準備

#はじめに
この記事は[WSL(Ubuntu)でnode.jsの開発をする準備](https://qiita.com/knockout103/items/a9669fe05d2e235a45cb)の訂正版です。

# 前回記事の問題点 - aptで入れたnodeは古い
nodeのバージョンが古かった！
ネット上のサンプルコードが動かない！
調べてみたら、バージョンは4台。

最新は9.11.1。
（いずれも2018年4月時点）

# 入れ替える
## 削除する
最初から入れなければこの手順は不要。

aptコマンドで削除する。下記のコマンドで消えたっぽい

```shell-session
$ sudo apt purge nodejs
$ sudo apt autoremove
```

##　新しいnodejsのバージョン導入
### nodebrew のインストール
nodebrewはnodejsのパッケージ管理ツールだそうだ。
https://qiita.com/kent_ocean/items/dc252b5d8183dfc6da57 を参考にさせていただきました。

```shell_session
$ curl -L git.io/nodebrew | perl - setup
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
# source ~/.bashrc
```

必要に応じて環境変数を登録（自分は.bashrcへ追記した）

## nodejsのインストール

```shell-session
$ nodebrew install-binary latest
```

## 使用するバージョンの設定
install-binaryだけだと、ダウンロードされるけど動かない。
~/.nodebrew/node配下にダウンロードされるだけ。
下記コマンドで確認すると、currentがnone。

```shell-session
$ nodebrew ls
v9.11.1

current: none
```

以下のコマンドを打つと、~/.nodebrew/current 配下にコピーされる。

```shell-session
$ nodebrew use latest
$ nodebrew ls
v9.11.1

current: v9.11.1
```

# 確認

```shell-session
$ node -v
v9.11.1
$ npm -v
5.6.0
```

# まとめ
aptが簡単なのでつい使ってしまうけど、手抜きせずちゃんと調べよう。
電気系プログラミングガチ素人が、Xamarinでアプリ開発する話　2日目　~Helloアプリをつくりたい~

# まえがき

この記事は「Skype工学勉強会」の「アプリ作成部屋　Xamarin」での活動をまとめて記録したものです。参考書が、マイクロソフトさんから布教されておりますので、そちらを和訳しつつ、まとめて記事にしていく流れになっております。
しかし、当方、タグの通り、「電気系」の学生で「ガチ素人」であるため、先輩にまさかりを投げてもらいながら、覚えていく所存でございます。また、もし他に指摘点などございましたらぜひともよろしくおねがいします。

↓Xamarinの布教用PDF、Kindle版もございますので、英語読める方、ぜひとも。
https://blogs.msdn.microsoft.com/microsoft_press/2016/03/31/free-ebook-creating-mobile-apps-with-xamarin-forms/

##初日の振り返り
C#はいいぞ
Xamarinはいいぞ

# 前回に引き続き
使用されているOSによって共通するような、スイッチやトグルなどは、もちろん、差異のある部分も補完される

#XAMLについて
ASP.NETとどうように、外見の編集はXAMLで行う。そして、挙動について、（イベントハンドル）については、C#のコードで書いていく。（ココらへんがASP.NETと同様）

# チャプター２　「APPづくりにメスを入れよう」
* page
* layout
* view
の３種類で構成されている（OSの垣根を超えるため、この３種に絞ったようです）
## page
1ページのレイアウトのこと。
## layout

## view

ここらへんの和訳が曖昧でしたので書けませんでした。後ほど！

#Hello Worldつくろうぜ
新規作成→CrosspatformApp→Portableの方を選択→で作成完了！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/244181/d7ccee6a-78d5-f85a-ab53-7651f4a54d75.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/244181/8c74a065-19c5-1456-94ca-373584ae4bb8.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/244181/ae99531a-ac88-eb26-c5b0-58c13731d441.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/244181/b9ef52e6-317d-d0fb-918f-255629a6f7bb.png)

#あとがき
HELLOまでいけなかった・・・
次回は２１ページから！
新卒のvim日記 day3【備忘録】

# はじめに
day3は、vimを触る時間がなかったので、あまり覚える時間がなかったので覚えきれているか不安。新卒の1週間乗り切ったので初めての土日をまったり過ごしたい。

今日覚えたのは、検索・削除について覚えました。

# 検索・削除
前方向・後ろ方向への検索・削除もすることができます。
検索についても、再検索を行うことにより、カーソル持っている行以前の行、後の行を検索することができます。後ろの方へ移動する場合は小文字で、前の方へ移動する場合は大文字で操作するようです。

|機能|前方向|後ろ方向|
|:--|:--|:--|
|検索|/|?|
|再検索|N|n|
|削除|X|x|

カーソル以降の文字を全て削除する場合は`D`で削除することができます。

# 備忘録
今日は検索と削除を勉強しました。今日のvim日記は短かったですが、研修の内容はめっちゃ濃かったです。
研修中のメモはなるべくvimで取るように&normalモードで操作することを基本として頑張っています。もはやvim最高じゃない？と思い始めました。来週も頑張っていきたいです。

← [day2](https://qiita.com/4geru/items/4da4691d92e9c9615ded) | <strong>day3</strong> | [day4](https://qiita.com/4geru/items/048359a4bada4c50cf8a) →
# 参考文献
[viコマンド一覧表](http://yamabito.main.jp/linux/vi_commands.htm)
shellコマンド個人的備忘集

未経験から3年で使用したshellコマンドの中で個人的に使うコマンドをまとめておきます。
OJT中によく聞かれたコマンドも記載しておきます。

## ssh-keygen
rsaのssh-key生成

```shell
ssh-keygen -t rsa
```

known_hostsから特定のhostを削除

```shell
# 特定のホストをremove
ssh-keygen -R github.com
```

## ssh
github, bitbucketなどでsshで接続できることを確認する

```shell
# ssh-keygenでssh-keyを作成済. githubに公開鍵の設定済
ssh -T github.com
```

awsのec2インスタンスにsshで接続する

```shell
# xxx.pemの秘密鍵をimport
ssh -i ~/.ssh/xxx.pem ex2-user@xxx.yyy.zzz
```

ポートフォワードする

```shell
# remoteサーバーにsshで接続して、ローカルの8080のポートのアクセスをremoteサーバー自身の80のポートにフォワード
ssh -L 8080:127.0.0.1:80 remote
# remoteサーバーにsshで接続して、remoteサーバー経由で別サーバーのポートをフォワード
ssh -L 8080:other:80 remote
```

## chown
ファイルの所有者を変更

```shell
chown www-data index.html
# r:recursiveで再帰的に変更
chown -R www-data:www-data /var/www/html/
```
## chmod
ファイルの権限を変更

```shell
chmod 777 index.html
# 再帰的(recursive)に変更
chmod -R 777 xxx/
```

## sudo
root権限で実行

```shell
sudo chown -R www-data:www-data /var/www/html
```

## su
ユーザーの切替

```shell
# rootで実行. shellの環境変数を引き継ぎ
sudo su
# rootで実行. shellの環境変数初期化
# - は -l と同義. ログインシェルの起動をするため環境変数が初期化される
sudo su -
```

## touch
新規ファイルを作る

```shell
touch index.html
#次でも代用可
echo > index.html  # 上書き
echo >> index.html # 追記
```


## find

ファイルを検索する

```shell
# htmlファイルを検索
find . -name '*.html'
```
grepと組み合わせたりします

```shell
find . | grep '*.html'
```
lsの場合もあります

```shell
ls -al | grep '*.html'
```
## rm
ファイルを削除する

```shell
rm index.html
```
node_modulesなどをディレクトリごと削除したりします

```shell
# 再帰的(recursive)に強制(force)削除
rm -rf node_modules/
```

## cp
ファイルのコピー

```shell
cp ./a.js ./b.js
# 再帰的(recursive)にコピー
cp -R ./a ./b
```

## mv
ファイルの移動

```shell
mv ./a.js ./b.js
# 再帰的(recursive)にコピー
mv -R ./a ./b
```

## nslookup
DNSでIPアドレスが解決できるか等を試す

```shell
nslookup www.google.com
```

## tail
ログファイルの監視

```shell
# f:followでファイルの更新を監視
tail -f access.log
```

## du
ファイルサイズの確認

```shell
du node_modules/
# sortも利用した場合. 数値(number)として降順(reverse)でソート
du node_modules/ | sort -nr
# さらに上位10件の取得
du node_modules/ | sort -nr | head -10
```
Rails carrierwave fog rmagickで画像アップロード

プロダクト開発でアイコンやバックグラウドイメージをアップロードできるようにしたいので試しに使用してみました。
すでに色々な方々が試しているみたいですが、自分なりの備忘として残しておきます。
環境変数はハードコーディングせずに[gem:dotenv](https://github.com/bkeepers/dotenv)を使用して実装しています。

## carrierwave

```config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    region: ENV['AWS_REGION'],
    path_style: true
  }
  config.fog_public = true
  config.fog_attributes = {'Cache-Control' => 'public, max-age=86400'}
  config.remove_previously_stored_files_after_update = false
  config.cache_storage = :fog

  case Rails.env
  when 'production'
    config.fog_directory  = ENV['AWS_S3_BUCKET']
  end
end
# 日本語の文字化けを防ぐ
CarrierWave::SanitizedFile.sanitize_regexp = /[^[:word:]\.\-\+]/
```

## Uploader

```app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::RMagick

  storage :fog
  def store_dir
    "images/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  version :thumb do
    process resize_to_fit: [100, 100]
  end

  def extension_whitelist
    %w(jpg jpeg png)
  end

  def filename
    "image_#{model.id}.#{file.extension}" if original_filename
  end
end
```

## Model
```
class User < ApplicationRecord
  mount_uploader :icon, ImageUploader
end
```

参考
https://qiita.com/msyk_tym/items/7d1c8e3666c11741d2de
http://morizyun.github.io/blog/carrierwave-image-uploader-rails/
https://github.com/carrierwaveuploader/carrierwave
atom + markdown-preview-enhanced（MPE)環境でASCIIMathを使う。

[ASCIIMath](http://asciimath.org/)は、非常に短い文字数で数式を表現できる記法です。
Markdownのコンセプトと相性が良いと思うのですが、atomでASCIIMathを使えることを謳っているプラグインを見つけられませんでした。
atomのプラグインである[MPE](https://atom.io/packages/markdown-preview-enhanced)は、数式のレンダリングで[Mathjax](https://docs.mathjax.org/en/latest/index.html)を選べます。
MathjaxはASCIIMathに対応していますが、MPEでは有効化されていないようです。
おそらく以下の理由で意図的に有効化していないのだと思います。

- ASCIIMathのデリミタ ` が、インラインコードのデリミタとかぶる。
- MPEのデフォルトの数式レンダラKaTeXは、ASCIIMathに対応していない。  

つまり以下で説明する方法でASCIIMathを有効化すると、その文章では`はインラインコード用としては使えなくなります。

Windows10でのみ確認済ですが、おそらく他のOSでも同じでしょう。

---
1. atomおよびMPEのインストールについてはここで説明を省略する。
2. `%USERPROFILE%\.mume\mathjax_config.js`を編集
	1. extentionsリストの先頭に'asciimath2jax.js'を追加する。
	2. jaxリストの先頭に、'input/AsciiMath'を追加する。 

記述例:

```
module.exports = {
  extensions: ['asciimath2jax.js','tex2jax.js'],
  jax: ['input/AsciiMath','input/TeX','output/HTML-CSS'],
  messageStyle: 'none',
  tex2jax: {
    processEnvironments: false,
    processEscapes: true
  },
  TeX: {
    extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
  },
  'HTML-CSS': { availableFonts: ['TeX'] }
}
``` 

3. atomのFileメニューのSetting→Packagesからmarkdown-preview-enhanced→Settingをクリック。
	1. Math Rendering Optionを"KaTeX"から"MathJax"に変更する。
	2. Inline Indicatorリストの先頭に、["\`", "\`"]を追加する。
PHP + Visual Studio Codeの開発環境を作る


## 入れるもの
- PHP Extension Pack
    - 以下が入る
        - PHP IntelliSense
        - PHP Debug
- PHP DocBlocker
- phpcs
- php cs fixer
- PHP Mess Detector
- PHP Namespace Resolver

# メモ

## PHP IntelliSense
PHP7+じゃないとダメです
※デフォルトPHP7の環境なら特に何もしなくても大丈夫

PHP7以外の環境の場合、Visual Studio Codeのユーザー設定にPHP7のパスを設定する
自分の環境はphpenv使ってるので以下を設定しました

```ユーザー設定
"php.executablePath": "/Users/xxxxx/.phpenv/versions/7.1.10/bin/php",
```

## phpcs
phpcsが入ってないとダメなのでインストール
[PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer)に書いてあるので好きな方法で

今回はcomposerでインストールする

```
$ composer global require "squizlabs/php_codesniffer=*"
```

`.bash_profile`でcomposerでインストールされるパスを通しておきます
VSCodeの個人設定でも設定できるのでココはご自由に

```.bash_profile
export $HOME/.composer/vendor/bin
```

ユーザー設定には以下を追加しました

```ユーザー設定
"phpcs.standard": "PSR2",

// 上でパスを通してない場合のみ、パスを通してれば不要
"phpcs.executablePath": "/Users/xxxxx/.composer/vendor/bin/phpcs",
```

## php cs fixer
[php-cs-fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer)が入ってないと動かない
MacユーザーはbrewでインストールすればOK

```
$ brew upgrade php-cs-fixer
```

## PHP Mess Detector
デフォルトだと結構うるさいのでルール設定したほうが良いです。

個人設定には自分ルールのXMLのパスを設定すればOKです

```
"phpmd.rules": "/path/to/phpmd_ruleset.xml",
```

### ruleset
細かい作り方は[Documentation](https://phpmd.org/documentation/creating-a-ruleset.html)を参照

↓↓適当に作ったルール↓↓

```phpmd_ruleset.xml
<?xml version="1.0"?>
<ruleset name="My first PHPMD rule set"
         xmlns="http://pmd.sf.net/ruleset/1.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://pmd.sf.net/ruleset/1.0.0
                     http://pmd.sf.net/ruleset_xml_schema.xsd"
         xsi:noNamespaceSchemaLocation="
                     http://pmd.sf.net/ruleset_xml_schema.xsd">
    <description>
        My custom rule set that checks my code...
    </description>

    <rule ref="rulesets/cleancode.xml">
        <exclude name="StaticAccess" />
    </rule>
    
    <rule ref="rulesets/codesize.xml" />
    <rule ref="rulesets/controversial.xml" />
    <rule ref="rulesets/design.xml" />
    <rule ref="rulesets/naming.xml">
        <properties>
            <property name="maximum" value="30" />
        </properties>
    </rule>
    <rule ref="rulesets/unusedcode.xml" />
</ruleset>
```
Vuexでnamespacedを使う時にexport default new Vuex.Storeにしたらエラーが出た

## 問題
vuexで`namespaced: true`なmodulesをstoreにしようとしたらエラーが出た。  
以下が動かない  

```js:src/comopnents/a-counter
computed: {
  ...mapGetters("a", [
    "count"
  ])
},
```
## 問題の箇所
```js:src/store/index.html
export default new Vuex.Store({
  modules: {
    a,
    b
  }
```
```js:src/index.js
import store from './store'
```
## 変更
```js:src/store/index.html
export const store = new Vuex.Store({
  modules: {
    a,
    b
  }
```
```js:src/index.js
import {store} from './store'
```

## 結果
変更すると`namespaced: true`なmodulesをstoreにして、  
mapが使えるようになった。

```js:src/comopnents/a-counter
computed: {
  ...mapGetters("a", [
    "count"
  ])
},
```
PythonでMySQLクエリの処理時間を計測して可視化する

「このクエリくっそ重すぎワロタw」となった時、いくつかチューニングをして、効果測定をします。
その時に、圧倒的に速くなっているならまだしも、数%の改善であれば、何度も実行しないと誤差であることを拭いきれません。

PythonからMySQLにつないで、数10回~数100回同じクエリを叩いて、2つのクエリ（この場合だと改善前と改善後）の処理時間を比較してみましょう。

## 環境
* OS: Mac El Capitan
* Python : 3.6.2
* MySQL : 5.7.18


## mysqlclientのインストール 
```unix
pip install mysqlclient
```

## 必要なパッケージをimport

```python
%matplotlib inline
import MySQLdb
import time
import numpy as np
import matplotlib.pyplot as plt
```

## MySQLに接続
※ Jupyter notebookから書いています。

```python
connection = MySQLdb.connect(user='db_user', host='db_host', db='db_name', password='db_password')
cursor = connection.cursor()
```

## クエリを書く
とりあえず、query1を改善前、query2を改善後のクエリとしましょう。（まぁ普通に全く違うクエリですが）

```python 
query1 = "SELET * FROM sample"
query2 = "SELECT COUNT(*) FROM sample WHERE category = 999"
```

## 2つのクエリを100回ずつ実行

`time.time`でそれを実行した時の時間が取れます。それをクエリ実行前と実行後で取得して、引き算をしてあげるだけです。

```python
exec_count = 100
x_axis = np.array(range(0,exec_count))
sql1_results = np.array([])
sql2_results = np.array([])

for i in range(0, exec_count):
    start = time.time()
    cursor.execute(sql1)
    end = time.time()
    sql1_results = np.append(sql1_results, [end-start])
    
for i in range(0, exec_count):
    start = time.time()
    cursor.execute(sql2)
    end = time.time()
    sql2_results = np.append(sql2_results, [end-start])
```

## 計測結果を折れ線グラフで可視化
matplotlibを使って可視化してあげます。

```python
x_axis = np.array(range(0,exec_count))
p1 = plt.plot(x_axis, query1_results, linestyle="solid")
p2 = plt.plot(x_axis, query2_results, linestyle="dashed")
plt.legend((p1[0], p2[0]), ("query1", "query2"), loc=2)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209160/c716fc98-3945-b16e-4619-8867b4fc86eb.png)
そうするとオレンジの折れ線（改善後）のほうが速くなっていることが一目瞭然なわけです。

アベレージでみると

```python
np.average(query1_results) # 0.085642900466918942
np.average(query2_results) # 0.039277324676513674
```
query2のほうが1/2以上速いという結果になります。
onsen-UIとCordova組み合わせでも、喋った

MonacaでHTML5の音声読み上げの機能を使おうとすると、Safariでは動くけど、Androidでは、下記のコードが未定義になりデバッグができないとか、iOSでもダメとか色々とネットで書かれています。

```js
var meg = new SpeechSynthesisUtterance(text);
```

それで、サードパーティー製のTTSのプラグインを、使おうという記事もあります。
Monacaでは、有料プランでないとCardovaのプラグインを追加できないので、この方法は私はできないです。

そんなこともあり、必死になってVisualstudioとonsenUIとCordovaの組み合わせで、アプリを作る環境を作りたかったのです。

ようやく、意図した通りにアプリが動くようになり、実機デバッグで、センサーの挙動が予定通り読み取りできるか判断する段階に入りました。

エミュレーターも、プラグインのエミュレーターができるようで、センサーの状態が表示されたり、値を入力できる表示が出ました。

私は、このプラグインを使いたいと思い、プラグインの追加の記事など色々と関連記事を書きながらアプリ制作をしています。

https://github.com/vilic/cordova-plugin-tts

エミュレーターの段階ですが、びっくりしたことがあります。
それは、Cordovaのプラグインを読み込むコードを書かなくても、エミュレーターが喋ったのです。
それに、センサーも、Cordovaのプラグインを読み込まなくても、イベントが起きているようなのです。

これで、実機でデバッグしてセンサーの読み込みが成功したら、HTML５の機能を使ってネイティブに近いアプリ開発ができることになります。

UIは、onsenUIやJQuery Mobileなどを使いたいです。
以前アプリを作った時は、JQuery Mobileを使っていました。
でも、onsenUIの方が、DOMが深くならないのでお勧めとネットで書かれていたので、onsenUIを使っていこうと思っています。

まだ、実機では未確認なのですが、エミュレーターの段階で喋ったので、びっくりしたので記事を書きました。
アプリが完成したら、記事を書きたいと思います。
TensorFlow  Object Detection API ：利用するためのフォルダー構造

# フォルダー構造とプログラム実行フォルダー
Object Detection APIを利用するためには、プログラムやパラメータファイル、画像ファイルなどを置いておくフォルダー構造をあらかじめ決めておくと、わかりやすくなる。チュートリアルのPythonプログラムをベースにして、あまり変えないフォルダー構造がよいと思う:point_up:
ちなみに、Object Detection APIを利用するための全体の流れを[前回の記事][link-1]に書いたので、合わせて見ていただくと、「物体検出はこんな感じで動かすのか〜」というのが、なんとなくわかると思う:thinking:
[link-1]:https://qiita.com/t_kawa1/items/bc197b45a070b1548d80
![物体検出プロセス_フォルダー構造.jpg](https://qiita-image-store.s3.amazonaws.com/0/225748/a7498a14-0382-fad2-d363-02e7b7a60501.jpeg)
Ruby on Rails Tutorial ３章　個人的詰まった場所メモ

# 隙あらば自分語り
三章はほとんど詰まることもなく、サクサク進みました。内容もわかりやすいし、物体を作ってる感が強くて楽しい。本当です。
二章まではMVCとかRESTとか、観念的な話がやや多かったのでついていきづらいところがあった。めっちゃ重要なんだけど脳みそを内容が滑っていく感覚がすごい。
もうちょっと、実際MVCとかは使うようになってから見返して「あーこういうことか」みたいに納得したほうがいいんじゃないっすかね？　後々やります
そんなわけで三章、悪くなかった。
**一か所を除いてな！**

## 目標
　唐突に二章から始まるわ内容はただの羅列だわで自分のブログ構成能力の低さを実感したわけですが、書いておきたいと思います
今から一か月以内、五月以内にTutorialを全部終わらせて何らかのウェブサービスを作る、学生の身分なんでインターンとか探せたらなおよし
　そもそも僕がRails Tutorialを始めたのは、金欲しいしプログラミングやるか→言語はRubyがいいらしい→Railsってチュートリアル手厚いし評判ええやんけ！　やったろ！　
的な低い意識によるものです。ちなみに、ちょっとだけrubyをかじったのでdefとかは何となくわかります。もうちょいちゃんとやったほうがいいなとは思ってます。

　先日大阪で開催されたゲームカンファレンス2018に行きまして（プログラミングはほぼわかんないので目的はタクシューさんの逆転裁判のトリックあれこれでした）そこでUnityすげー！　ってなっちゃったんで今後本当にRubyでやっていきたいかはわかんないなこれ　
　でも一個プログラミングの規則を覚えておくとほかのやつ覚えるとき役立つっていうし……でもUnityってプログラミングできなくてもゲーム作れちゃったりするらしいな……じゃあこれやるよりUnityでさっさとなんかゲーム作ったほうがよくない……？　あれ……？

まぁいっか！！！！！！

# 詰まった場所
　本筋とは関係ない場所で、クッソ詰まりました。三章は主にプログラムとテストが主題なんですけど、テスト結果が盛大にバグってまして。3run.... みたいな結果は表示されないわ、意味不明のコードが大量に湧いて出てくるわで、一章あたり二日で終わらせるはずのペースが大幅に狂いました。そりゃほっといても解決するんですが、今後テストのたびにこんな画面見たくなかったんです
**原因：railsとminitestの競合**
これが原因みたいです。この辺を何とかしたら解決しました。
以下、参考にさせていただいたサイト
[Rails Tutorialでtest実行時の警告](https://qiita.com/beplocks661/items/18bed80bd295f3fed7cd)
[「プロを目指す人のためのRuby入門」でテスト失敗時に実行結果が正常に表示されない場合](https://qiita.com/jnchito/items/1e928f8088b2cc6bd3fa)
この記事、それと感想欄がめちゃくちゃ助かりました。
このバグ、主に三つに解決法が分かれてまして、
上のやつがrailsを5.1.5にアップデートすることで治り、
そのちょっと下がdb:migrateを使うと治ります。
下の大量のコードは、minitest5.10.3をGemfileに入力して……つまるところダウングレードして、それで治ります。わかるわけないだろ

具体的なコードは省略しますけど、bundle updateとrails db:migrateだけでなんとかできるはずです
おんなじバグに遭遇した方は役立ててください
変数・ファイルをjoinするワンライナー

# One line join function in shell script

joinってのはimplodeとか文字列結合の方のです。
joinコマンドは便利だけど、別機能ですし。

IFSいじるのは戻し忘れ怖いし、ワンラインで行きたい気持ちがあります。
複数行出力させて```paste -s -d```するんですが、
読み込み元に応じた出力方式を忘れるので、その備忘録。
囲み文字 : ```'```, デリミタ : ```,```でSQLのIN句パターンです。

```bash
# 配列から生成
list=(
'foo'
'bar'
'hoge hoge'
)
joined=$(printf "'%s'\n" "${list[@]}" | paste -s -d ,)

# 複数行の文字列から生成
list='
foo
bar
hoge hoge
'
joined=$(echo "$list" | sed -e '/^$/d' -e "s/.\+/'&'/" | paste -s -d ,)
joined=$(echo "$list" | awk 'NF > 0 {print "'\''"$0"'\''"}' | paste -s -d ,)

# ファイルから生成
cat list
# =>
# foo
# bar
# hoge hoge
joined=$(sed "s/.\+/'&'/g" list | paste -s -d ,)

# 結果
echo $joined
# => 'foo','bar','hoge hoge'
```
Visual Studio CommunityでCordovaとonsen-UIで環境作る

先日からVisualstudioでCordovaとonsen-UIを使ったアプリ開発ができるように取り組んできました。

ようやくJavaScriptの動きも大方でき上ったので、fileの配置も落ち着いたと思い記事を書きました。

metaタグは、下記の感じで良いと思います。


```
<link rel="stylesheet" type="text/css" href="css/onsenui.css" />
<link rel="stylesheet" type="text/css" href="css/onsen-css-components.css" />
<link rel="stylesheet" type="text/css" href="css/ionicons/css/ionicons.min.css">
<script src="js/onsenui.min.js"></script>
```

フォルダの構成は、こんなかんじです。
![キャプチャ1.PNG](https://qiita-image-store.s3.amazonaws.com/0/20977/801064e9-29f1-4d45-b6ca-0012a2a45b4a.png)


CSSのフォルダの中は、こんなかんじです。
![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/20977/df7776bc-0267-42b0-fd3f-61087d5f63ec.png)

jsフォルダの中は、こんな感じです。
![キャプチャ3.PNG](https://qiita-image-store.s3.amazonaws.com/0/20977/7f6eeb7c-e4ac-6ce8-de83-12cd783cee9b.png)


ひょっとしたら不要なファイルやフォルダが、含まれているかもしれません。
これらのファイルは、onsen-UIのサイトでダウンロードしました。
Zipファイルを解凍して、取り出しました。
Jetson TX1にSynergyをインストールしてみた


## 環境
- JetPack 3.3
- synergy-core (2.0.13)

## インストール
```
$ sudo apt install cmake libcurl4-gnutls-dev libxtst-dev
$ git clone https://github.com/symless/synergy-core.git
$ cd synergy-core
$ mkdir build && cd build
$ cmake ../
$ make -j2
$ sudo cp bin/synergy-core /usr/bin/

# synergy v1の場合は、libssl-dev qt5-default libavahi-compat-libdnssd-devが必要かも。
```
インストール先はパスが通っていれば任意。


## ログイン時に自動起動

```
$ gnome-session-properties
```

下記の内容で登録する。
Name: Synergy
Command: synergy-core --client X.X.X.X
Comment: Share your keyboard and mouse over a network
(X.X.X.X はサーバーIPアドレス)

## その他
セキュリティを気にしないのであればnvidiaアカウントの自動ログインをONにしておく。
[GitHub] リポジトリの所有者を変更するのに失敗した話

現在所属している会社では、元々2人で開発していたのもあって
個人アカウントのprivateリポジトリにCollaboratorを追加して運用していました。

少し人も増えて管理が面倒になって来たのでOrganizationアカウントに移行したいということになり、
やってみたら、**リポジトリを消してしまう** という大変な過ちを犯してしまった話です...

# 個人アカウントからOrganizationアカウントに移行する方法を考える

1. アカウントをそのままOrganizationに変える
    - 個人アカウントとはいっても、会社用のアカウントではあったので、これもアリだった
    - https://github.com/settings/organizations
        - ↑ `Turn xxx into an organization` をすると出来る
    - ただし、ssh keyが消えるよ的なwarningが出る
        - ↑これが原因でGitHub連携してるサービスが軒並みエラーになると面倒だな、、、(未検証)
2. Organizationを新規に作成してリポジトリを移す
    - 新しく作成して、移すのであれば、GitHub連携しているサービスは、個別に紐付けなおしていけばいいから安全そう
    - しかし、このリポジトリを移す方法を間違えて後に悲劇を生む

# Organizationを作成する

- Organizationを新規作成
- 元のリポジトリの所有アカウントをメンバーに追加

# リポジトリを移行する

**結論を言うと**
`Settings`>`Options`>`Transfer ownership`
で、リポジトリの所有権をそのままorganizationに移すべきでした。

しかし、この機能の存在を知らなかった為に
`Organizationにforkする` という方法を取ってしまいました。(**※やってはいけなかった**)
この方法だと、PRの履歴が消えてしまうけど、まぁしょうがないか、と。

# 元のリポジトリを削除したら...

さぁ、これで古いリポジトリは不要になったので、消そう！ということで
意気揚々と `Delete this repository` という `Danger Zone` ってしっかり書いてある事をやったわけです。

数日後...

```
Aさん: あれ？なんかXXXのリポジトリが404なんですけど、権限の問題ですかね...
```

え？いや、そんなはずは...
確認してみると、確かに無い。権限で見れないわけではなく、 `存在しない`

え、もしかして、privateリポジトリって、fork元消すと、fork先も消えるの？？？？

# ForkとTransferOwnershipを検証してみる

ここで始めて `Transfer ownership` という文字が目に入り。
え、所有権を移すこと出来るの...ってことに気づきました。

なので、試してみました。

## 事前準備

- テスト用に `fork-test` という名前の空リポジトリを作成(また、消してしまうとまずいので)
- XXXというアカウントからYYYというOrganizationに`fork-test`をforkしておく

## fork元を削除してみる

- 削除する時にwarningが出る
    - `This action cannot be undone. This will permanently delete the XXX/fork-test repository, wiki, issues, and comments, and remove all collaborator associations. This will not change your billing plan. If you want to downgrade, you can do so in your Billing Settings. Please type in the name of the repository to confirm.`
    - (´・ω・｀)
- **fork先も消えた**

なるほど...

## forkした状態でtransfer ownershipしてみる

- もう一度、`fork-test`を作成してforkしておく
- transfer ownership実行
    - **同名のリポジトリ(?)があるのでforkできない**
    - エラーメッセージ: `YYY/fork-test already exists`

## forkしたリポジトリをrenameしてからtransfer ownershipしてみる

- `YYY/fork-test` -> `YYY/fork-test-renamed` に変更
- transfer ownership実行
    - **transfer出来ない**
    - エラーメッセージ: `YYY already has a repository in the XXX/fork-test network`

## fork先を消してからtransfer ownershipしてみる

- fork先を削除
    - forkしてない状態にする
    - **当然といえば当然だけど、fork先を削除してもfork元は消えなかったです**
- transfer ownership実行
    - **出来た**
    - **PRも残っている**

## publicなリポジトリで同じ事をやってみた

**publicリポジトリはfork元を削除してもfork先は消えなかった**


# まとめ

- **リポジトリを移したい時は`Transfer ownership`しましょう**
    - forkの本来の使い方を考えれば当然といえば当然ですね...
- **privateなリポジトリをforkされている場合、fork元を消すとfork先も消える**
    - fork元の権限でfork先を個別に削除するということはおそらくできないので
    - fork元を削除した時にfork先が残ってしまうのはたしかに困るのかもしれない
- ちなみに、消してしまったリポジトリは、メンバーのローカルにあるのをかき集めてなんとか復旧させました
    - いろんな連携してたサービスのwebhookとかが消えて関連づけ直す必要があり、かなり大変でした
    - PR履歴は消えてしまったけど、幸いにも消えたリポジトリはサービスとは関係ないリポジトリだったので、諦めるという判断で合意した
LVMチートシート

# LVMとは
複数のディスクの複数のパーティションを組み合わせて、大きな一つのディスクを作ることができる。さらにそのディスクをパーティションに切り分けられる。

- LVMで使われる複数のディスクの複数のパーティションのことを`物理ボリューム`と呼ぶ
- 大きな一つのディスクのことを`ボリュームグループ`と呼ぶ。これ自体も複数作れる。
- ボリュームグループのなかのパーティションを`論理ボリューム`と呼ぶ。普通にext4などでフォーマットしてマウントできる。

# 物理ボリューム

```
## 物理ボリュームの作成（パーティションをLVM管理下に置く）
pvcreate /dev/sda1
pvcreate /dev/sda2
…

## 物理ボリュームの解除（パーティションをLVM管理下に置かない）
pvremove /dev/sda1
…
```

# ボリュームグループ

```
## ボリュームグループの作成
vgcreate Vol1 /dev/sda1 /dev/sda2

## ボリュームグループに論理ボリュームを追加
vgextend Vol1 /dev/sdb1

## ボリュームグループの削除（無効化）
vgchange -a n Vol1

## ボリュームグループから論理ボリュームを取り除く(先に上記の無効化をしなければならない)
vgreduce Vol1 /dev/sdb1
vgremove Vol1

```

# 論理ボリューム

```
## 論理ボリューム（パーティション）の作成
lvcreate -L 10G Vol1 -n lvolroot
lvcreate -l 100%FREE Vol1 -n lvolhome
…

## 論理ボリュームの拡張（resize2fsも必要）
lvextend -L +10G Vol1/lvolroot

## 論理ボリュームの縮小（resize2fsも必要）
lvreduce -L -10G Vol1/lvolroot

## 論理ボリュームの削除
lvremove Vol1/lvolroot
```

# 情報表示

```
lvmdiskscan
vgscan
pvs
pvdisplay
vgdisplay
lvdisplay

```
[機械学習]Anaconda3でPythonをインストールしようとしてハマった

# きっかけ
何か機械学習を触ってみたいと思い、[Umedy](https://www.udemy.com)で機械学習の適当な講座を購入してみた。
早速[Anaconda３をインストール](https://www.anaconda.com/download)して、機械学習の勉強が始まるかと思いきや…

# Pythonが古いバージョンのまま
Anacondaを使ってPythonの3.6をインストールした。
そのあと、確認のためpythonのバージョンを確認してみると…

```
$ python --version
Python 2.7.10

$ which python
/usr/bin/python
```

何故か古いバージョンのまま！よくあるPATHが通ってない問題だと思って、

```
vi ~/.bash_profile
```

で環境変数の設定を確認してみたところ、

```
export PATH="/Users/kouch/anaconda3/bin:$PATH"
```
と最後の行にしっかり記述が！どうしてAnacondaのPythonを参照してくれないのか。
PATHの優先度の問題なのかもしれないなどと色々調べてみたら、結構初歩的なところでハマっていた。


# 編集しただけではPATHは通らないらしい！
.bash_profileなどを編集したあとはsourceコマンドを打たないとPATHが通らないらしい。

```
$ source ~/.bash_profile
 
$ python --version      
Python 3.6.4 :: Anaconda, Inc.

$ which python          
/Users/kouch/anaconda3/bin/python

```

これでちゃんとPATHが通りました。

Umedyの質問欄をみていたら同じように困っている人が意外と多かったので記事にしてみました。
これで機械学習の勉強が始められますね。
Proxy配下のWindows Server 2016でWindows Updateできるようにする

Proxy配下のWindows Server 2016でWindows Updateするためのメモ
意外にハマったのでメモ

#設定方法
(1)Internet ExplorerのオプションでProxyの設定を実施

(2)コマンドプロンプトから以下のコマンドを実施

`netsh winhttp set proxy IPアドレス:ポート番号`

(3)設定が正しくされたか確認

```
netsh winhttp show proxy

現在の WinHTTP プロキシ設定:

    プロキシ サーバー:  IPアドレス:ポート番号
    バイパス一覧     : (なし)
```

#切り戻し方法

コマンドプロンプトから以下のコマンドを実行すればProxy設定を削除できます。
`netsh winhttp reset proxy`
プログラミングで小数はヤバイんだぜ？という話。

プログラミングで小数を扱う時は細心の注意が必要です。
この春からお仕事でプログラムを書くことを始めた方もいらっしゃると思うので、注意喚起の目的で、できるだけわかりやすく、理由込みで説明してみます。
知ってる人には常識ですが、知らない人には大きな落とし穴です。ヤバさを知らなそうな人がいたら、教えてあげてください。

# なぜ、小数はヤバイのか。
結論から言うと、実世界が10進数で計算するのが殆どになのに、コンピュータが2進数で数を扱うためです。基数を変換しつつ小数を計算するのがヤバイのです。

では、なぜ基数を変換しつつ小数を扱うとヤバイのでしょうか？
まずは、3進数と10進数とで説明します。

# 3進数の0.1って？
3進数の0.1とは、3回足すと1になる数字です。0.1+0.1=0.2。0.2+0.1は繰り上がって1ですね。
分数で表すと1/3のことです。
では、10進数において、1/3とは何でしょうか？3回足すと1になる数字。それは
0.3333333333333333333・・・・・・
無限小数ですね。
3進数では有限小数だった0.1が、10進数では無限小数になります。
そして、コンピュータのリソースは有限なので、無限小数は保持できません。64bit 浮動小数点型だと、保持できる小数は最大16桁程度です。
そのために、コンピュータで小数を持つ時は近似値で持つことがあります。
もし、コンピュータが10進数で数字を持っていたとしたら、1/3 は 0.3333333333333333 として保持されることになるでしょう。これがヤバイのです。

# 2進数で表現できない値。
基数によって表現できる小数が違うことをを1/3を例に記しました。
では、2進数で無限小数になってしまう10進数とは何でしょう？
たとえば、10進数の0.2は、2進数では表現できません。
0.001100110011・・・・
と無限小数になります。
なぜ、0.001100110011・・・・になるかは[tmt's mathemaTeX page!のPDF](http://www4.airnet.ne.jp/tmt/mathfaq/00110011.pdf)が詳しく説明してくれています。
ので、10進数の0.2はコンピュータ（の通常の浮動小数点型変数）では正確に持つことはできません。近似値を持つことになってしまいます。

# 計算誤差が起きる。
このことで、小数をプログラミングで扱うと問題がおきます。

```javascript
const num = 0.2 + 0.1;
console.log("0.2 + 0.1 = " + num);
> 0.2 + 0.1 = 0.30000000000000004
```
0.3のはずが、0.00000000000000004 増えてしまってますね。これが問題なのです。
従量料金計算などで小数を使った場合、誤請求が発生してしまうかもしれません。恐ろしい。

# ではどうするか？
通常の変数で小数を扱うのではなく、ライブラリを通して計算するようにしましょう。
JavaScriptでは、[BigDecimal.js](https://github.com/dtrebbien/BigDecimal.js/)や[bignumber.js](http://mikemcl.github.io/bignumber.js/)を使いましょう。
Java では標準ライブラリのBigDecimalクラスを使って計算しましょう。
他の言語でも、だいたい「BigDecimal」や「decimal」のような名前のライブラリがあります。

# 結論
小数を正確に計算したい時は、ライブラリを通して計算するようにしましょう。
ただ、描画の高さ計算等、そんなに正確に計算しなくてもいい時は、ライブラリではなく、素の変数で計算したほうがいいかもしれません。ライブラリは正確に計算するために、速度を犠牲にしていることがあるためです。

以上です。