OmniAICreator/Qiita-1.07M huggingface dataset:
Go 1.8.7, 1.9.4, 1.10rc2 がリリース（セキュリティ・アップデート）

（あとでブログで書くための草稿版）

Go 1.8.7, 1.9.4, 1.10rc2 がリリースされた。脆弱性 [CVE-2018-6574](https://cve.mitre.org/cgi-bin/cvename.cgi?name=2018-6574) の修正を含む。

- [cmd/go: arbitrary code execution during “go get” · Issue #23672 · golang/go](https://github.com/golang/go/issues/23672)

cgo 周りのインシデントのようだ。

> When cgo is enabled, the build step during “go get” invokes the host C compiler, gcc or clang, adding compiler flags specified in the Go source files. Both gcc and clang support a plugin mechanism in which a shared-library plugin is loaded into the compiler, as directed by compiler flags. This means that a Go package repository can contain an attack.so file along with a Go source file that says (for example) `// #cgo CFLAGS: -fplugin=attack.so`, causing the attack plugin to be loaded into the host C compiler during the build. Gcc and clang plugins are completely unrestricted in their access to the host system.

修正内容は以下の通り。

> The fix changes “go build” (used during “go get” and “go install”) to limit the flags that can appear in Go source file `#cgo` directives to a list of allowed compiler flags; `-fplugin=` and other variants are not on the allowed list. The same restrictions are applied to compiler flags obtained from pkg-config. Flags obtained from the environment variables `$CGO_CFLAGS` and so on are not restricted, since those variables can only be set by the user running the build. To change the set of allowed compiler flags, new environment variables `$CGO_CFLAGS_ALLOW` and `$CGO_CFLAGS_DISALLOW` can set to regular expressions matching additional allowed and disallowed flags.

影響度（CVSS）に関する情報は見当たらない。そのうち [Red Hat あたり](https://access.redhat.com/security/security-updates/ "Red Hat Product Advisories - Red Hat Customer Portal")で出るかな。
ReactNative+Genymotionでローカルサーバーへアクセスできない

ReactNativeでアプリ開発をしていると、IOレイヤでdevelopmentとproductionで接続に行くサーバを分けるような実装が必要になる場合が多い。以下のように、開発時はローカルサーバへアクセスし、プロダクションビルドではネットワークごしのリモートサーバへアクセスする、などのようなかたちだ。

```js
const SERVER_URL = 
  process.env.NODE_ENV === 'development' ?
    'http://localhost:3000' :
    'https://my-production-url.com'
```
これで、開発時は`localhost:3000`で立っているサーバへ繋ぎにいきそうだが、Androidで **Genymotion** を使う場合だとこれではダメで、`Network Error`がでる。というのも、アプリ側から見える`localhost`はエミュレータ自体を指しているからだ。

なので、Androidの場合のみ、ローカルサーバへ繋ぐにはエミュレータ側で指定された特殊なホスト、すなわちエミュレータ自体が起動しているホストに繋がる `10.0.3.2` を見なければならない。そのため、以下のように`Platform#select`を使ってiosとandroidの環境で開発時のホストを出し分けるのがよい。

```js
import { Platform } from 'react-native';

const SERVER_URL = 
  process.env.NODE_ENV === 'development' ?
    Platform.select({
      ios: 'http://localhost:3000',
      android: 'http://10.0.3.2:3000'
    }) :
    'https://my-production-url.com'
```
参考: https://github.com/facebook/react-native/issues/10404#issuecomment-335604489
webstormでXPathの検索方法

##XPath検索画面の表示
WebStorm(2017.1)で説明します。
###【Find by XPath】
- ツールバーからの場合：[Edit]→[Find]→[Find by XPath]

- ショートカットの場合：[option+command+X]押下後→[F]
<img width="868" alt="スクリーンショット 2017-10-08 22.33.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/104348/5dc2f19e-e2b3-2dff-33c8-ec354f3a1e95.png">

<img width="599" alt="スクリーンショット 2017-10-08 22.21.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/104348/279d5e45-6a17-76b1-4045-1cdeef07b161.png">

##基本的な検索方法
|プロジェクト内から検索したい項目|XPathコマンド|
|:----------------|:------------------|
|.hoge|/descendant::*[contains(concat(" ",@class," ")," hoge ")]|
|.hoge > li|/descendant::*[contains(concat(" ",@class," ")," hoge ")]/li|
|.fuga .piyo|/descendant::*[contains(concat(" ",@class," ")," fuga ")]//*[contains(concat(" ",@class," ")," piyo ")]|

#参考記事
- CSS3セレクタとXPathでの表現の対応表http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm
- クローラ作成に必須！XPATHの記法まとめ
https://qiita.com/rllllho/items/cb1187cec0fb17fc650a
NativeScriptでネイティブライブラリのTypeScript定義ファイルを自動生成する

# なぜ必要なのか

NativeScriptで外部のネイティブライブラリ(例えばFacebook SDKなど)を使うプラグインを書いたとき、そのライブラリが持っているAPIはTypeScriptで利用、補完ができません。なぜならTypeScriptの定義が無いから。自前で定義をつくることもできますが、クラス、enumやintefaceなどが大量にあるSDKだとめちゃくちゃ大変です。そんなときのためにNativeScriptでは、定義の自動生成の仕組みを用意してくれています。

# iOS SDKのTypeScript定義を生成する

まずは自作プラグインをつくってネイティブライブラリをインストールしましょう。
自作のプラグインによるネイティブSDK利用については、別途記事を書きたいと思っています。

インストールできたら、プロジェクトルートで以下のコマンドを叩きましょう。

```shell-session
TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typings" tns build ios
```

ビルドが終わると、typings というフォルダができて、その中にはi386, x86_64というフォルダがあります。どちらかを開きましょう(どちらの中身も同じです) 
中にはTypeScriptの定義ファイル(.d.ts)がギッシリできています。

```shell-session
~/typings/i386 $ ls
objc!ARKit.d.ts                   objc!MediaPlayer.d.ts
objc!AVFoundation.d.ts            objc!MediaToolbox.d.ts
objc!AVKit.d.ts                   objc!MessageUI.d.ts
objc!Accelerate.d.ts              objc!Messages.d.ts
objc!Accounts.d.ts                objc!Metal.d.ts
objc!AdSupport.d.ts               objc!MetalKit.d.ts
objc!AddressBook.d.ts             objc!MetalPerformanceShaders.d.ts
objc!AddressBookUI.d.ts           objc!MobileCoreServices.d.ts
objc!AppleTextureEncoder.d.ts     objc!ModelIO.d.ts
objc!AssetsLibrary.d.ts           objc!MultipeerConnectivity.d.ts
objc!AudioToolbox.d.ts            objc!NetworkExtension.d.ts
objc!CFNetwork.d.ts               objc!NewsstandKit.d.ts
・・・・・つづく
```

この中から自分に必要な定義ファイルを抜き出して使いましょう。

# Android SDKのTypeScriptの定義を生成する

プロジェクトルートにて以下のコマンドでビルドしましょう。

```shell-session
tns build android --androidTypings
```

プロジェクトルートに android.d.ts ファイルが出来ているはずです。

## AndroidライブラリのTypeScript定義を作成する

https://github.com/NativeScript/android-dts-generator

を使ってjar/aarのライブラリのd.tsを出力できます。


# 自作プラグインで定義ファイルを使えるようにするには
以下のようにプラグインのルートに`typings`フォルダをつくってあげてそこに定義ファイルを置き、index.d.tsから参照するようにすると、プラグインを使う側とすると、index.d.ts だけを参照するだけで必要な全ての定義ファイルを読み込むことが出来ます。

```sh
plugin-root
└index.d.ts
└typings
　└objc!xxxxx.d.ts
```

```typescript:[plugin-root]/index.d.ts
/// <reference path="./typings/objc!xxxxx.d.ts" />
```

`tns plugin add [your plugin]` にてプラグインのインストール後、
プロジェクトルートの references.d.ts などに
/node_modules/[あなたのプラグインプロジェクト]/index.d.ts への参照を追記すれば、
開発環境でネイティブライブラリのAPIが使えるようになります。

```typescript:[project-root]/references.d.ts
/// <reference path="./node_modules/<your plugin folder>/index.d.ts" />
```
中小企業IT・IoT化支援のMZプラットフォームを使ってみる

#概要
中小企業の情報エンジニアが気軽にプログラミング（高級言語の理解を前提とせずに）できるように開発された
Javaベースのアプリケーションが図的なプログラミング（PLCのラダー図のような感じ？）環境です．

#公式ページ
- MZプラットフォームユーザー会（ここでダウンロードできます）
 - https://ssl.monozukuri.org/mzplatform/
 - 開発元は，「国立研究開発法人 産業技術総合研究所 製造技術研究部門」です．
- インストールガイド ver3.6
 - https://ssl.monozukuri.org/mzplatform/mzpf_docs/3.6/manual/installguide.pdf

#特徴
- 基本的にはプログラミングの知識が無くても利用可能です．
- 個人的には，オブジェクト志向のプログラミングを知っていれば理解しやすいです．
- マニュアルも整備されているので，マニュアルの記載ルールを理解すると独自にチュートリアルを進めることが可能です．
- ただ，テキストエディタのコーディングでプログラミングをされる方にはまどろっこしく感じるかもしれません．
- ダウンロードしてインストールすると３０日間試用ができます．
  - 気に入ったらユーザー登録をすれば，無料で使い続けることができます．
  - 商用利用も，開発元と技術移転契約をするとできます．

#切っ掛け
知り合いの中小企業の社長さんからMZプラットフォーム（MZ：エムジィーと呼ぶのが正式らしいが，エムゼットでも良いらしい）を使ってみました．気軽にWindows用業務ソフトを開発するには，いい方法の一つだと思っていますので，これから（平成３０年２月）勉強しようと思っています．長いお付き合いになりそうなので，防備録をかねて掲示板を投稿することにしました．

#IoT化したい「打点カウンタ」をMZプラットフォームに接続してみた

地元企業の[精密プレス工業株式会社](http://www.hukugou.com/category/1347009.html)様からお願いされている[打点カウンタ](http://www.hukugou.com)をMZプラットフォームに接続してみました．
- [打点カウンタをMZプラットフォームに接続してみた](https://qiita.com/tmdoi/items/407bf6ce6aea6fa228c5)

#ネットワーク越しにデータベースのアクセス成功
やっとネットワーク越しにデータベースのアクセスが成功しました．時間のあるとに，別スレッドとして，まとめたいと思います．まずは，ここにお世話になったサイトをまとめておきます．MySQL側でちゃんとネットワーク越しにアクセスする設定が必要なのですね．MySQLの上級者であれば当然のことばかりですが，入門者には，初めての事だらけでした．

- [WEBサービス創造記](http://linuxserver.jp/サーバ構築/db/mysql/外部接続許可設定)　ネットワークからアクセスするための設定
- [Yukun's Blog](http://www.yukun.info/blog/2008/10/create-user-grant-password.html)　ユーザに対する権限の付与

#MySQL5.7をインストール

データベースへのアクセスが必須になることから普段使っているMacBook AirにMySQLをインストールすることにしました.そして，使い方に慣れるために「MySQL入門」を復習した．MZプラットフォームからMySQLデータベースにアクセスするにはJDBCをDLして，インストールすることが必要．データベースに外部からアクセスするためのMySQLの設定が必要．
いろいろとMySQLの設定をするためにMySQL Workbenchをインストールして使ってみることにしました．

- [備忘録１：MZプラットフォームのためにMySQLをインストール](https://qiita.com/tmdoi/items/0a23692fe76fe146cdf6)
- [MySQL入門](https://qiita.com/okamuuu/items/c4efb7dc606d9efe4282)
- [MySQL用のJDBCのダウンロードページ--version5.1.22](https://downloads.mysql.com/archives/c-j/)
- [MySQLにネット越しにアクセスする設定](https://qiita.com/m-shin/items/770c1c54a889bf060751)
- [MySQL Workbench 6.3 をインストールしてみた](https://dev.mysql.com/downloads/workbench/)←ダウンロードサイト
- [MySQL Workbenchで参考にしたサイト](http://proengineer.internous.co.jp/content/columnfeature/6605#section302)

#履歴
- 2018.02.22 更新：MySQL Workbenchのインストールを追記
- 2018.02.19 更新：MySQLにネット越しにアクセスする設定を追記
- 2018.02.18 更新：MySQL入門にリンクとJDBCの追記
- 2018.02.13 更新：シリアル通信接続を追加
- 2018.02.12 更新：MySQLのインストールを追加
- 2018.02.10 更新：構成更新， インストールガイドのリンク追加
- 2018.02.08 投稿
Building Microservices on Kubernetes - Developer week 2018

#kubernetes with micro service by VMware

https://twitter.com/boskey

## Market Trend

- There are so many application with mobile devices (apps)
 - Move fast or Lose out
 - Application are being Modernized

## Result of the Market Trend

- Continues creating infra structure
 - Beyond Applications
  - That's why container is growing up

## Container system

- Work same as developers laptop.

I don't care about infra structure.
 but care about how to develop, push, and behave.

## kubernetes

- Demo

# Summary

- もはやモバイル端末を意識せずにアプリケーション開発は無い
- モバイルアプリの開発ライフサイクルは短い
- 速まる開発速度に追いつけなければ敗退するのみ
- アプリ開発においてインフラは前提条件
- よりフレキシブルなインフラのオペレーションスキームが必須
- ・・・で、kubernetes
- ネットワークはどうするか
 - VMware NSX-T で仮想する
 - VM Node管理はBOSH がよさげ
- データ
 - Volumeで共有して頑張りましょう

こんなイメージ
 
![2018-02-07 14.54.11.jpg](https://qiita-image-store.s3.amazonaws.com/0/82979/e77a5524-3815-a424-4387-80eb32e7b048.jpeg)
俺言語 その4

#概要
俺言語をやってみた。
javascriptを試して見た。

#写真
![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/n/b/G/nbGc.jpg?t=1518039260)

#サンプルコード

fizzbuzz

```
var str = "";
var i;
for (i = 1; i <= 100; i++)
{
	str = i;
	if (i % 15 == 0)
	{
		str = "FizzBuzz";
	}
	else if (i % 3 == 0)
	{
		str = "Fizz";
	}
	else if (i % 5 == 0)
	{
		str = "Buzz";
	}
	print(str);
}
```

zundoko

```
i = 0; 
while (i < 4) 
{ 
	k = ransu(); 
	if  (k < 1) 
	{ 
		print(" zun"); 
		i++; 
	} 
	else 
	{ 
		print(" doko"); 
		i = 0;  
	} 
} 
print(" doko"); 
print(" ki yo shi!!");
```

#成果物
http://jsdo.it/ohisama1/nbGc

#感想
組み込むだけなら、evalで充分。

以上。
俺言語 その3

#概要
俺言語をやってみた。
スタックマシーンでバイトコードインタープリタを書いてみたけど、しっくりこないので、BASICを試して見た。

#写真
![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/K/E/V/KEVS.jpg?t=151804393)

#Palo Alto Tiny Basicの概要

コマンド
NEW	 プログラムクリア
LIST [行番号]	プログラムをリストする
RUN	 プログラムを実行する
行番号 文	プログラムへ行番号を付けて文を登録する
行番号	プログラム中の行番号の文を削除

文
LET   代入リスト	代入
PRINT 印刷リスト	印刷
INPUT 入力リスト	入力
GOTO  式	式をもつ行番号へ制御を移す
GOSUB 式	式をもつ行番号へサブルーチンコールする
RETURN	サブルーチンから返る
IF 式	式が真(0以外)なら残りの行を実行。偽(0)なら次の行へ
FOR 変数=式1 TO 式2 [STEP 式3]	変数を式1から式2まで式3の刻みで繰り返す
NEXT 変数	
STOP	終了
REM	コメント

関数
RND(式)	1～式の乱数
ABS(式)	絶対値

#サンプルコード

fizzbuzz

```
10 FOR I=1 TO 100
20 IF I-(I/15)*15 = 0 GOTO 80
30 IF I-(I/3)*3 = 0 GOTO 100
40 IF I-(I/5)*5 = 0 GOTO 120
50 PRINT I,
60 NEXT I
70 STOP
80 PRINT " FizzBuzz",
90 GOTO 60
100 PRINT " Fizz",
110 GOTO 60
120 PRINT " Buzz",
130 GOTO 60    
```

zundoko

```
10 Z=0
20 R=RND(2)-1
30 IF R GOTO 70
40 PRINT "ZUN "
50 Z=Z+1
60 GOTO 100
70 Z=0
80 PRINT "DOKO "
90 GOTO 20
100 IF Z#4 GOTO 20
110 PRINT "DOKO KI YO SHI!!" 
```

#成果物
http://jsdo.it/ohisama1/KEVS

#感想
会話的に、書けるのは、いい。

以上。
IntelliJのキーボードショートカット（Mac）

# ドキュメントっぽいもの
* [Intellij IDEA 2017.03 ヘルプ](https://pleiades.io/help/idea/meet-intellij-idea.html)
* [Intellij IDEA Default Keymap 日本語版](https://pleiades.io/sites/willbrains.jp/keymap/pdf/shortcut_intellij_mac.pdf)
* [IntelliJ IDEAのショートカット：トップ 15](https://blog.jetbrains.com/ja/2020/03/12/2848/)

# ショートカット

## 編集系

### 新しく行を作成して移動

行の途中にカーソルがあるときに押すと、その行の上or下に新しい行を追加して、カーソルがその行の先頭に移動する。
補完などでカーソルが行中にあるとき、いちいち行頭/行末にカーソルを移動してエンターしなくていいので便利。

* Start New Line: `Shift + Enter`
* Start New Line Before Current: `Opt + Cmd + Enter`

https://blog.jetbrains.com/idea/2022/01/starting-a-new-line-of-code-how-many-keystrokes-does-it-usually-take-you/

### 最後の編集箇所に移動

* Last Edit Location: `Cmd + Shift + Delete`

### Statement Completion

https://www.jetbrains.com/help/idea/auto-completing-code.html#statements_completion

* Cmd + Shift + Enter
* 文末にコロンを打つほかに、メソッドの `() {}` や `if () {}` を補完したり実は高機能

## 移動
### 何かしらの名前で移動
* クラス名 `Cmd + O`
* ファイル名 `Cmd + Shift + O`
* シンボル名 `Cmd + Opt + O`
* アクション名 `Cmd + Shift + A`
* 上記すべてから `Shift*2`

### いまいるところから辿って移動
* 実装クラスに移動 `Cmd + Opt + B`
* 宣言に移動 `Cmd + B`

### 最近XXしたYYに移動
* 最近見たファイル `Cmd + E`
* 最近編集したファイル `Cmd + E*2`
* 最近見た行 `Cmd + Shift + E`
* 最近編集した行 `Cmd + Shift + E*2`

### エラーに移動
* 次のエラー `F2`
* 前のエラー `Shift + F2`

### テストクラスとテスト対象クラスを行き来する
* `Cmd + Shift + T`

## リファクタリング

* リファクタリングポップアップを開く `Ctrl + T`
* 名前変更 `Shift + F6`

## Version Control

### バージョン管理のXXを開く
* Git ツールウィンドウを開く `Cmd + 9`
* Commit ツールウィンドウを開く `Cmd + 0`
* Commit ツールウィンドウでDiffを見る `Cmd + D`

### コミットする

* VCS Operation ポップアップを開く `Ctrl + V`
* Version Control ツールウィンドウを開く（コミットメッセージにカーソルが当たる） `Cmd + K`

### ブランチの切り替え / 作成 / チェックアウト

* `Ctrl + V` → `7` or `branch で検索`

### プッシュする
* Push Commit ダイアログ を開く `Cmd + Shift + K`

### プルする

* Update Project `Cmd + T`

## コードリファレンス情報

公式ページ：[英語](https://www.jetbrains.com/help/idea/viewing-reference-information.html) / [日本語](https://pleiades.io/help/idea/viewing-reference-information.html)

* Quick Definition `Opt + Space` / `Cmd + Y`
* Parameter Info `Cmd + P`
* Quick Documentation `F1`
* Type Info `Shift + Ctrl + P`
* Context Info `Shift + Ctrl + Q`

## ツールウィンドウ
https://www.jetbrains.com/help/idea/tool-windows.html#general-tool-windows-layout

* Show Terminal window: `opt + F12`
* Hide All Tool Windows: `Cmd + Shift + F12`
  * テスト実行したあとなど、ツールウィンドウでエディタが狭くなったときに

## その他
* 使用箇所を表示(ツールウィンドウ) `opt + F7`
* 使用箇所を表示(ポップアップ) `cmd + opt + F7`
* クラス名で移動 `cmd + o`
* ファイル名で移動 `cmd + shift + o`
* シンボル名で移動 `cmd + opt + o`
* 名前変更 `shift + fn + F6`
* 行コメント `cmd + /`
* 複数行コメント `cmd + opt + /`
* エディタ内のウィンドウ移動 `opt + tab`
* ウィンドウ内のタブ移動 `cmd + shift + [` `cmd + shift + ]`
* Structure （ツールウィンドウ） `cmd + 7`
* Structure (ポップアップ） `cmd + F12`
Virtualenvwrapper-powershellのインストールでのエラー

pipを用いてインストールするコマンド（powershell）は、

```powershell:
pip install virtualenvwrapper-powershell
```

しかし、これを実行したところ次のようなエラーが返ってきた。

```powershell:
File "c:\python27\lib\urllib2.py", line 556, in http_error_default raise HTTPError(req.get_full_url(), code, msg, hdrs, fp)
urllib2.HTTPError: HTTP Error 403: SSL is required
Command "python setup.py egg_info" failed with error code 1 in c:\users\...\virtualenvwrapper-powershell\
```

これに関し、web上では様々な人が同じトラブルに遭遇しているようで、しかしながら解決策も環境の条件などで複数提案されているようなイメージだったので、自分の場合の解決策も挙げておこうと思ったのが本ページの目的。
pythonのversionは2.7。

自分の場合、インストールを完了させるために注意すべきことは3点。

**1. web上からパッケージをダウンロードして、直接setup.pyを起動させる**
ダウンロード先（記事投稿時点の最新版）はhttps://pypi.python.org/pypi/virtualenvwrapper-powershell/12.7.8
ダウンロードファイルを解凍し、ディレクトリ内のsetup.pyを次のコマンド（powershell）で走らせる。

```powershell:
python setup.py install
```

この時点では、先ほどと同じようなエラーが返ってくる。

```powershell:
  File "C:\Python27\lib\urllib2.py", line 556, in http_error_default
    raise HTTPError(req.get_full_url(), code, msg, hdrs, fp)
urllib2.HTTPError: HTTP Error 403: SSL is required
```

**2. distribute_setup.pyをmanualで編集する**

この作業が必要なので、わざわざパッケージをダウンロードしている。setup.pyと同じディレクトリに置かれているこのファイルを開き、次のような書き換えをして、SSL接続に対応させる。

```powershell:
http --> https
```

自分と全く同じ条件の場合、この's'をつけるだけの作業で正常にインストールが完了する。


**3. 最新版のパッケージをダウンロードする**

実は自分の場合、はじめはなぜかwebでヒットした2.7.1 versionの古いパッケージを用いていた。しかし、これを使うと、次のような入力の数が対応していないというエラーが出てくる。

```powershell:
  File "build\bdist.win-amd64\egg\setuptools\command\easy_install.py", line 539, in process_distribution
TypeError: __init__() takes exactly 2 arguments (4 given)
```

**1. 　** に示したページの最新版を使うべき。
ReactでGoogleMapsを使う

##はじめに
ReactでGoogleMapsを使う際に、Mapをコンポーネントとして実装するならこれが一番だと思います。
生のJSのように導入しようとしたら、うまくいかなかったのでメモ。

##環境構築
1.モジュールをインストールする。
　```npm install --save react-google-map react-google-maps-loader```
2. APIキーの取得
　[ここ](https://developers.google.com/maps/documentation/javascript/?hl=ja)からAPIキーの取得ができます。

##使用例
```javascript:map.jsx
import React from "react"
import ReactGoogleMapLoader from "react-google-maps-loader"
import ReactGoogleMap from "react-google-map"

const bnCoord = {
  lat: 44.597923,
  lng: 0.873799,
}

const Map = () => (
    <ReactGoogleMapLoader
      params={{
        key: "取得したキーをここに入力する",
      }}
      style={{height: "100%"}}
      render={googleMaps => {
        return (
          googleMaps && (
            <ReactGoogleMap
              googleMaps={googleMaps}
              coordinates={[
                {
                  title: "Bosc Nègre",
                  position: bnCoord,
                },
              ]}
              center={bnCoord}
              zoom={8}
            />
          )
        )
      }}
    />
)

export default Map
```
[golang]暗号通貨の計算する時に気をつけたい事

ethereumとかで今の残高に0.000000000000000001ETH足したらいくらになるよ。みたいな計算の時の話。

普通に小数だしfloat64だろ〜って感じで

```go
current := 0.123456789012345678
price   := 0.000000000000000001
total := current + price
```
とか[やる](https://play.golang.org/p/7JxejjpilZO)と、結果は

```
0.12345678901234568
```

となる。本当は

```
0.123456789012345679
```

になってほしいのに…。

これは、golangのfloat64がIEEE754に準拠しているために起こる丸め誤差である。

https://golang.org/ref/spec#Numeric_types

このような大きな桁数の計算を行う場合、golangにはbigというモジュールが存在する。

bigにはbig.Floatとbig.Intがあるが、ここでは[gethの実装](https://github.com/ethereum/go-ethereum/search?utf8=✓&q=`big.Int`&type=)に習いbig.Intを使って計算する。（つまり単位weiで計算する）

```go
current := big.NewInt(123456789012345678)
price := big.NewInt(1)
total := new(big.Int).Add(current, price)
fmt.Print(total)
```

結果は

```
123456789012345679 // = 0.123456789012345679ETH
```
となった。
実機テストの際に、task failed with exit 1 signal 0 {が表示された

#発生シーン
xcodeで簡単なアプリを作成し、実機でテストを使用しようとした時に表示され、接続ができなかった

#原因
・秘密鍵に対応する公開鍵が、KeychainAccessに登録されていないとのこと
https://qiita.com/ngo275/items/caa3408aa6edeea30964
→症状としてはこんな感じに近い。

#対処法
下記を参照に、公開鍵と秘密鍵を消して順番通り行なったが、「指定された項目がキーチェーン内に見つかりませんでした」と表示され、解決できず。
http://www.weblog-life.net/entry/xcode_debug_error

大人しく、公開鍵と秘密鍵を消す前の段階にTime machineで戻り、[Xcode]-[Preference]-[Accounts]でアカウント設定、[Launchpad]-[キーチェーンアクセス]-[証明書アシスタント]-[認証局に証明書を要求]で、下記のURLの1.3から順に行なった結果、正常につながり、実機でも動作が確認できた。
http://mattsudev.hatenablog.com/entry/2015/09/30/152037

#総括
・初心者は不安になることがあるが、秘密鍵と公開鍵は無意味に消去しない(もしかしたら当たり前かもしれないが、、、)
・大体の場合は、Apple IDの秘密鍵に対応する公開鍵がキーチェーンに登録されていないことが原因である
Missing :controller key on routes definition, please check your routes.の対処法

routes.rbを以下のようにした時にエラーが出ました。

``` routes.rb
Rails.application.routes.draw do
  root 'static_pages/home'
  get 'static_pages/help'
  get 'static_pages/about'
  get 'static_pages/contact'
end
```

**Missing :controller key on routes definition, please check your routes.**

これは、
`root ‘static_pages/home’`を`root ‘static_pages#home’`に変更することによってエラーが解消されました。

stack overflowなどをのぞいていたら、rootは特別なケースだと記されていました。
rootを使用する際には、
`root ‘static_pages#home’`
この形にする必要があるようです。
opencv-pythonで画像処理した画像をiTerm上で表示する

## 概要
最近[iTerm](https://www.iterm2.com/index.html)を使い始めました。
画像をターミナル上で表示できるの便利ですよね。
それでipython上でopencvで画像処理してたんですけど、処理した画像をターミナル上で表示できたらいいなーっと思ったんでメモ

## 環境
- macOS 10.12.6
- iTerm2 3.1.5
- Python 3.6.0
- opencv-python 3.4.0.12
- ipython 6.1.0

## 前提
[imgcat](https://www.iterm2.com/utilities/imgcat)を公式から落として、path通して実行できるようにしておきます。

## 実装
[ドキュメント](https://docs.python.jp/3.6/library/subprocess.html#subprocess.run)によれば、subprocess.runのinput引数にbyte sequenceを入れるとstdinに渡されるみたいなんで、imageのbytesをstdinでimgcatで渡してあげます

```py3
import cv2
import subprocess

def imgprint(image, format='.png'):
    _, buf = cv2.imencode(format, image)
    subprocess.run('imgcat', input=buf.tobytes())

```

<img width="407" alt="スクリーンショット 2018-02-08 1.18.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/137148/f88d7d3e-15bd-cd1a-8f26-93e58b5bf8ce.png">

できました！

## おわりに
地味に初投稿記事でした🤔(めっちゃ緊張した、、、)

とりあえず知識アウトプットする癖つけたい

## 参考
- <https://qiita.com/uiureo/items/be92c8fdaeaec9b506e4>
- <http://uphy.hatenablog.com/entry/2016/12/11/110703>
RxJSのbindNodeCallbackの使い道をようやく発見した

(2018年11月6日 update: RxJS 6 の記法に合わせた)

RxJSの`bindCallback`とか`bindNodeCallback`とかいうObservableのcreate関数があります。ほとんどの人はその存在さえ知らないと思いますが。
どういう使い道があるんだろうと思うだけで全く使うことを考えてはいなかったのですが、理解してみたらそれなりに使い道があるということがわかったのでメモを残します。

今回はMySQLを叩くライブラリ( https://www.npmjs.com/package/mysql )と組み合わせて`bindNodeCallback`を使ったサンプルコードを書きます。

## bindNodeCallback

- `bindNodeCallback(fs.readFile)`のように使うと`fs.readFile`をObservableに変換しつつコールバックの第一引数を自動的にObserverのerrorにバインドする。
- `bindNodeCallback`により生成された関数の戻り値は`[arg1, arg2, ...]`のように配列で返される。
- 第一引数がエラー情報ではない普通の(?)コールバックをラップするときは`bindCallback`を使う。
- DB操作系のライブラリと組み合わせるとすごく捗りそう。

以下イメージが伝わるつもりで書いたサンプルコードです。

```ts:index.ts
import * as mysql from 'mysql';
import { bindNodeCallback, Observable, of } from 'rxjs';
import { map, tap, concatMap } from 'rxjs/operators';

type QueryCallback = (query: string) => Observable<[Record<string, any>[], any]>;

const connection = mysql.createConnection({
  host: '127.0.0.1',
  user: 'user', // <= set your username
  password: 'password' // <= set your password
});
const connect$ = bindNodeCallback(connection.connect.bind(connection)); // <= !?
const query$ = bindNodeCallback(connection.query.bind(connection)) as QueryCallback; // <= !?
const end$ = bindNodeCallback(connection.end.bind(connection)); // <= !?

async function main() {
  console.log('start');
  await of(true) // falsyな値だとストリームが流れないのでtrueを入れただけ。
    .pipe(
      concatMap(() => connect$()),
      concatMap(() => query$('create database if not exists hoge;')),
      concatMap(() => query$('show databases;')),
      map(([results, fields]) => results),
      tap(results => console.log(results)),
      concatMap(() => end$())
    )
    .toPromise();
  console.log('finished');
}

main().catch(console.error);
```

出力はこのようになります。

```txt:OUTPUT
start
[ RowDataPacket { Database: 'information_schema' },
  RowDataPacket { Database: 'hoge' },
  RowDataPacket { Database: 'mysql' },
  RowDataPacket { Database: 'performance_schema' },
  RowDataPacket { Database: 'sys' } ]
finished
```

`{ Database: 'hoge' }`が作成されたことがわかります。

## まとめ

Observableに変換するために`connection.connect.bind(connection))`のように関数を`bind`して与える必要がありますが、それでも一行で書けてエラーハンドリングまで済んでいるというのが感動的です。

使ってみたら超絶便利だったので特にDBアクセス周りでどんどん使ってみようと思いました。
DOMの子要素をchildNodesで取得しても配列処理できな時の対処法

## 背景
DOMの子要素を取得して, 子要素の中にあるテキストを抜き出したかった.

##問題

childNodesで子要素を取得してmapで処理しようとすると, mapは使えないといわれる.

``` javascript
const nodes = document.body.childNodes;
const texts = nodes.map(k=>k.querySelector("a").textContent) // map使えない
console.log(nodes)
```

## 原因
childNodesはNodelistというオブジェクトを返す.

```javascript
console.log(nodes) //ex. Nodelist (4) [...]
````

## 対処法
Arrayに変換する. 

- ES6での表現

```JavaScript
const nodes = [...document.body.childNodes]; // これで変換
```

+ 従来の表現

```javascript
const nodes = document.body.childNodes;
const nodeList = Array.prototype.slice.apply(nodes) //これで変換
```

後はmap, reduce, など普通に使えるようになる.

[jsnote](https://toyoharu-nishikawa.github.io/jsnote/)にサンプル載せました.
https://toyoharu-nishikawa.github.io/jsnote/#sample=sample/JavaScript/childNodes.js
HTML buttonクリックでURLを実行（カンタンに実装したい）

# 経緯

最近、自分の実力をつけるために勉強を色々初めてPython＋Webを進めていました。
適当にBootstrap4を使いながらUI設計をしていました。とくにHTML5やPythonの経験も多いわけでなく、自分の勉強のために今いろいろ作っていて、ハマってしまった内容がありましたのでそのメモです。
※HTMLとCSSの知識は10年ぐらい前にテキストベースのホームページを作っていたぐらいです。JSも全然書けない。
Node.jsとかReactとか、はたまたCSSフレームワークとかの存在なんて知らなかった・・・

#本題

実装する時に、画面に

> [完了] [編集] [削除]

こんなかんじでボタンを配置したくなることってないですか？
で、自分の場合はそんな風に置いていたんだけど、URL処理の実装をしても動作しているように思えない。
なんでやー～～～って思ってたので色々調べてた。
コードは以下の通り。

```HTML
    <button action="comp/{{id}}">完了</button>
    <button action="edit/{{id}}">編集</button>
    <button action="del/{{id}}">削除</button>
```

URLでIDを渡して、処理終了後にRedirectするつもりだった。

#対策

どうやら`form`で囲ってあげればいいらしい。
一部ページでは`<form action="button-click" method="POST">`など固定して、Python側でどのボタンが押されたのかなど、エレメントを解析するみたいな記述もあったが、正直プロトタイピングレベルの内容でそこまでやるか？って思ってた。

で、さらにいろいろと調べていたトコロ、以下の記事を見つけた。

[[HTML] button要素をリンクにしたい[追記]](https://qiita.com/Koizumi-Greenwich/items/fce9ab49f1279cd0c51f)

この記事によると、各ボタンで処理を分けたい場合は`formaction`で定義してあげるといいらしい。
親エレメントのformにかかれている`action`を上書きして処理をするためらしい。

というわけで、先程のコードに実装。

```HTML
<form>
    <button formaction="comp/{{id}}">完了</button>
    <button formaction="edit/{{id}}">編集</button>
    <button formaction="del/{{id}}">削除</button>
</form>
```

無事、実行できました。

## 自分のコメント
最近やっとフロントエンド設計、サーバーサイド設計などの概念を理解し始めたトコロ。まだNode.jsがなんなのかもReactがなんなのかもわかっていない自分です。単語の間違いや誤記などありましたらお気軽にコメントや編集リクエストいただけると助かります。
JavaScriptで要ログインサイトのデータ収集サービスを作ってみる(part4)

全くのJavaScript初心者から学習してきた流れとか、方法とか色々書きます。
# 作りたい物
ログインが必要なサイトからデータを集めるサービス。

要は、某アーケード音ゲーのスコアツールを作ってみたいということです。
（他スコアツールを参考にしながら作っています。）

# やること
- ログイン状態で、任意のJavaScriptを実行→<a href='https://qiita.com/Teara/items/33dd70984b641661f77b'>part1</a>でやりました
- JavaScriptで欲しいデータのあるHTMLの収集・スコアの抽出→<a href='https://qiita.com/Teara/items/b234ccd5ec581bccc4b5#_reference-2b9cc84078f413b272c4'>part2</a>と<a　href='https://qiita.com/Teara/items/8c0cee66054f1e3d25e6'>part3</a>で
- 抽出したスコアを何かしらの形式で出力しDL→今回

# DLの実装
調べてみたら<a href='https://kuroeveryday.blogspot.jp/2016/05/file-download-from-browser.html'>こんな記事</a>があったので、ここを参考にしました。
ただ、今回はGoogleChromeのみ対応する予定なのでChromeのみ書きました。

非同期処理(スコア取得処理)をDL前に行うのでDeferredを含めた関数にしています。

```javascript:data_DL.js
// ファイルダウンロード処理
var handleDownload =function(scoreStr){
	var dfr = $.Deferred();
	var a = document.createElement('a');
	a.download = 'scoreList.csv';
	a.target   = '_blank';

    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
    var blob = new Blob([ bom, scoreStr ], { "type" : "text/csv" });

	a.href = window.URL.createObjectURL(blob);
 	a.click();
    dfr.resolve();
    return dfr;
 }
```

参考サイトと少し違うところはwindow.webkitURL.createObjectURLではなく、window.URL.createObjectURLを使っています。
最初はwindow.webkitURL.createObjectURL使ってたんですが、Chromeちゃんに非推奨だよと怒られたので...


あとCSVにする際にExcelで読める様にするために　var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);　とか入れてますが、なんかうまくいきません。
もちょっと頑張ってみます。


次回もあったらよろしくお願いします。
疑似カナのスクリプト

### ユーザー名に紐づくデータ、例えば記事IDは、疑似カナにすると覚えやすい。
```js

let fn={}
;
fn.rkana=(l=6)=>{
 const c = "abcdefghijklmnopqrstuvwxyz"
 ,b = "aiueo"
 ,mf =Math.floor
 ,mr =Math.random
 ;
 return Array.from({length: isNaN(l)?6:l})
   .map( (v,i)=>(i%2)?b[mf(mr()*b.length)]:c[mf(mr()*c.length)].toUpperCase() ).join('')
}
;/*html*/
let log =(str)=>{let a=document.createElement('li'); a.innerText=str; document.body.appendChild(a)}
,c=0
,id = setInterval(()=>{log(fn.rkana(6));c++; if(c>10) clearInterval(id)},500)
;
```
```
//output
PuToYa
WoWeYa
HaJiVe
XiXoOa
BaOiEi
JaWeCe
MeCeXo
UoUoMo
BoFaFu
ViCeXo
XaIoDu
```
### ６文字IDの３文字疑似カナは万を越える。十分実用に耐える。
IE11でdisplay: flexで並べた画像がカラム落ちするー

```
<ul class="list">
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
</ul>
```

```
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .list li {
    width: calc(100% / 3);
  }
```

こんな感じで画像を3列にぴったり並べて、画面幅で折り返すようなレイアウトを作りました。

基本的にこれで問題ないのですが、IE11でウィンドウサイズを変化させると一定間隔で3列→2列を繰り返しすようになってしまいました。

## ドウシテコウナッタ？？
おそらく flexitemの幅を calcで計算してしまってるため、割り切れない数字のためこんなことになってるんだと思います。

なので、ちょっと調整してみました。

```
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .list li {
    width: calc((100% / 3) - .01px); ← 修正
  }
```

割り切れないのが問題なら、少し減らしてやればいんじゃね？ってことで - .01px を加えて見ました。

そうすると、カラム落ちもなくなり、全ブラウザで期待する表示となりました。

.01px だったら見た目には全くわからないので、もしIE11で同様な現象に遭遇した場合はやって見てもいいのではないでしょうか。
正規表現で括弧内（キャプチャ部分）を抽出する

#正規表現を使用して文字列内の特定の文字を抽出
結果を真偽値 ( true / false )で返して欲しければtest()を使用。
検索結果を取得する場合はmatch()かexec()を使用する。gオプションを使用しなければ取得結果は同じ。
キャプチャで特定の文字を抽出する場合はexecメソッドを使用する。
以下はキャプチャでの抽出例

```Javascript
//url('xxx')、url(xxx)のような記述のimgパスのxxxの部分を抽出
var str = "url('fuga.png') url(moge.png)";
const regexp = /url\(["']?([a-zA-Z0-9_\.\/\-]+)["']?\)/g;

let match;
let matches = [];
while ((match = regexp.exec(str))!== null) {
  matches.push(match[1]);
}
console.log(matches);
```

##regex.test(str)
```Javascript
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var regexp = /[A-E]/;

if(regexp.test(str)) {
 console.log("match!");
}else{
 console.log("unmatch!");
}
```

##str.match(regexp)
```Javascript
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var regexp = /[A-E]/gi;
var matches_array = str.match(regexp);

console.log(matches_array);//["A", "B", "C", "D", "E", "a", "b", "c", "d", "e"]
```

##regexp.exec(str);
```Javascript
var str = "abbcdefabh";
var regexp = /ab*/g;

var myArray;
while ((myArray = regexp.exec(str)) !== null) {
 var msg = myArray[0] + " を見つけました。";
  msg += "次のマッチは " + regexp.lastIndex + " からです。";
  console.log(msg);
}
```
```js
var str = "ABCDEFGほげほげHIJKLMNOPQRSTUVWXYZ"
var isHoge = /ほげほげ/.test(str);
console.log(isHoge);
```
##おすすめ正規表現チェッカー
- 正規表現チェッカー JavaScript版
https://www.softel.co.jp/labs/tools/regex/

- RebExr （リアルタイムでヒットするかどうかをチェック）
https://regexr.com



##参考サイト・参考記事
■MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test


■JavaScriptの動かないコード（中級編） 正規表現の括弧キャプチャを，グローバルで繰り返しmatchできない （gオプションを付けると部分文字列の抽出が無効）
http://language-and-engineering.hatenablog.jp/entry/2016/06/04/JavaScript%E3%81%AE%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%EF%BC%88%E4%B8%AD%E7%B4%9A%E7%B7%A8%EF%BC%89_%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E3%81%AE%E6%8B%AC

■Javascriptによる正規表現まとめ
http://yut.hatenablog.com/entry/20110305/1299318337
■JavaScriptの正規表現で文字列を抜き出す「グループ化」
http://www.koikikukan.com/archives/2013/04/02-003300.php
■ある文字から改行までを選択する
http://info.yadoku.com/archives/2886
HandBrakeCLIでチャプターごとに動画を分割

HandBrake(GUI)でもチャプターごとに分割できるが、何回も操作が必要なので...
Macだと良いソフトが無さげだったので、HandBrakeCLI使うと簡単にできることを備忘録&紹介。

```splitByChapter.sh
#!/bin/sh

# 42チャプターに分かれているmovie.m4vを分割
for var in {1..42}
do
    file="${var}.m4v"
    HandBrakeCLI -c $var -i movie.m4v -o $file
done
```
ルパン風タイプ音をChromeで実現

# ルパン三世風のタイプ音を実現したかった

## 前置き
むかし、こんな動画を見た
[職場のPCのキー音とエンター音ルパンのに変えたら滅茶苦茶怒られた](https://www.youtube.com/watch?v=ExqqhdsVXzc "YouTube")

この動画を見たとき、正直、自分も作りたいと思った、けどすべての入力に対して、
キーの監視をしようものなら、PC自体にめっちゃ負担かかるし（あんま気にしてないけど）
C#やらC++でデスクトップアプリケーション作らなきゃいけないし正直めんどくさい。
バックグランドで動くようにして〜すべてのキーにマップ張って〜とかやりたくない。

丁度、自分がChromeExtensionを作るのにハマっていた、のとJavaScriptに抵抗が最近なくなった
そんで同じようなExtension作ってやろうと思った、
__(本当はElectronで作ろうと思ったけどめんどかった）__

![image.png](https://qiita-image-store.s3.amazonaws.com/0/105255/b2e5783a-eefd-cd24-ed44-3591bef6bd37.png)

どうでもいいが最近JavaScript扱えるようになって、ここ最近JavScriptしか触ってない。
デキることの幅が増えたし、JavaScriptは色々楽しい。
今後はElectronでなんかおもちゃを作っていこうと思う。

## うごき

[そーす＠ぎっとはぶ](https://github.com/aznalo/LupinSound "GitHub")

そんなに大したことはしていないが、manifest.jsonでは、大体の入力ページで
こいつを動かしたいので、**matches** にてワイルドカード使って`https://*/*`と
指定する。これで`http`と`https`まあおまけで`file`から始まるurl上の`input`or`textarea` tag では動く,`div`とかで入力ボックス作ってるサイトは知らん(´・ω・`)

~~~json 
{
	"name": "Typing Sound with Lupin",
	"version": "x.x.x",
	"manifest_version": 2,
	"content_scripts": [
		{
			"matches": ["https://*/*", "http://*/*", "file://*/*"],
			"js": [
				"scripts/jquery.min.js",
				"main.js"
			]
		}
	],
	"web_accessible_resources": [
		"sounds/enter.wav",
		"sounds/input.mp3"
	]
}

~~~

生でJs扱うのは危ないので**Jquery**を使って、行きます。
扱う音声ファイルは、`web_accessible_resources`で有効化してます。

なんか `ion`とかいうJavaScriptだけで音声再生できるクエリがあったけど、
うまく動かなかったので HTML5+Jqueryの最近よくある(?)感じでやっていきます

~~~js
  $("body").append('<audio id="input"> <source src="' + chrome.extension.getURL('sounds/input.mp3') + '" type="audio/mp3"> </audio>')
  $("body").append('<audio id="enter"> <source src="' + chrome.extension.getURL('sounds/enter.wav') + '" type="audio/wav"> </audio>')
~~~

読み込んだWebPageの最後尾にSEファイルを読み込ませさせます。

あとはかんたんで`input`と`textarea`に対して、`keyup`のイベントを設定して、
文字が入力されたら、そのたびに関数が実行されるので、関数内でSEを再生させればいいですね。

~~~js
$("input,textarea").keyup( input => {
    if ( input.key === "Enter" ) {
      $('#enter')[0].play();
    } else {
      $('#input')[0].currentTime = 0;
      $('#input')[0].play();
    }
  });
~~~

`keyup`の引数(input)に`key`を指定して、何のキーが押されたか取得することがデキるので
`Enter`が押された、ときだけ`てれれ〜〜〜てってっててってててて〜`というのを再生するように
指定しています。また`currentTime`は現在のSEが再生中でも強制終了し、次のSEを再生させる
停止ボタンのような役割です、これがあると`か、か、か、か、か、代わりは居るもの` と
連続再生が可能になりますね。


~~~js
$(() => {
  $("body").append('<audio id="input"> <source src="' + chrome.extension.getURL('sounds/input.mp3') + '" type="audio/mp3"> </audio>')
  $("body").append('<audio id="enter"> <source src="' + chrome.extension.getURL('sounds/enter.wav') + '" type="audio/wav"> </audio>')
  $("input,textarea").keyup( input => {
    if ( input.key === "Enter" ) {
      $('#enter')[0].play();
    } else {
      $('#input')[0].currentTime = 0;
      $('#input')[0].play();
    }
  });
});

~~~


## つくってみて

結構楽しかった2時間ぐらいでぱぱっと作ったおもちゃだけど、疲れたときなどに、
たまにONにして、楽しもうと思う。

前置きにも書いたが、JavaScriptの可能性はやばい。

気になる方はぜひ入れてみてください、
crxファイルをダウンロードして `chrome://extension`にアクセスして、
ドラックアンドドロップするだけです。

[ダウンロード](https://github.com/aznalo/LupinSound/releases "GitHub")
【問題解決】Quick JUnitで新規JUnitクラスを作成する際、ソースフォルダに期待してないパスが設定されている



# 環境
* Eclipse pleiades: Oxygen.2 Release (4.7.2)
     -   Quick JUnit プラグイン	0.7.0.201204240825	
* Spring Boot 1.5.9
* Java8

# やりたいこと
プロジェクトに、以下のソースフォルダが存在します。

* src/main/java/
* src/main/resources/
* src/test/java/
* src/test/resources

`src/main/java`に存在するJavaクラスに対応する、テストクラスを作成したいです。
テストクラスの作成は、Quick JUnitのショートカット`Ctlr + 9`で実行します。
`Ctrl + 9`の動作は、以下の通りです。

>テストクラスとテスト対象クラス間を移動。テストクラスが無ければスケルトン生成。

http://eclipse-cheatsheet.readthedocs.io/en/latest/eclipse-cheatsheet-windows.html 引用

# 問題

`Ctrl+9`を押すと、「新規JUnitテスト・ケース」が開き、ソース・フォルダーには`src/test/resources`が設定されていました。

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/8749c67a-3c61-4600-bed2-98d7988d9652.png)

Javaのテストクラスは`src/test/resource`でなく`src/test/java`に配置したいです。
ソースフォルダ―の値を直接修正すればよいのですが、新規作成する度に修正するのは面倒です。


# 解決
Eclipseで「プロジェクトのプロパティ→Javaのビルドパス→順序およびエクスポート」を開き、`src/test/java`を`src/test/resources`より上に配置しました。

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/afea2b54-a73d-6575-092c-e98fdbd417bd.png)

対応後は、「新規JUnitテスト・ケース」ダイアログを開いたとき、ソースフォルダに`src/test/java`が設定されるようになりました。


# 補足
* Eclipseの「順序およびエクスポート」は`.classpath`ファイルに定義されています。
millisecのgetリクエストをキャッシュさせない。

### urlのパラメータ末尾にランダムな値を入れる。
```js
//ex) superagent
return req.get(url).set(...)
   .query({_:Date.now() +''+performance.now().toString().replace('.','') }) //no-chash
   .then(res=>res.body)
```
### 秒単位でも問題ない場合
```
.query({_:Date.now()})
```
### Date系がない場合
```
.query({_:Math.floor(Math.random()*10000000000000)})
```
### 更新したデータによってcacheの切り替えをする場合。
```
//hashが被ればcacheデータを使ってくれる。ブラウザなどに依存。
.query({_:md5(newdata)})
```
rails server で Address already in use された時の解決方法（Cloud9）

Cloud9でRuby on Railsの実装をしている時にエラーが出たので、その対処方法をメモ。

#エラー（Address already in use）が発生

いつものごとくアプリケーションを起動しようと思って`rails s`したら怒られた。
下のエラー。

```
Address already in use
```

これ以外にもいろいろ書いてあったが、まとめると「portが使用中ですよ」と言ってる。

コレじゃ困るので、その解決方法を2つ。

#解決方法１

何はともあれ、プロセスを見てみる。

```
ps -ax | grep rails
```

該当のportを使用しているプロセスがあれば、killする。

```
sudo kill -9 プロセス番号
```

#解決方法２

今回の場合はこっちで直った。困った時の再起動。

Cloud9のダッシュボード画面、右上のあたりをクリックして、「Restart」ボタンを押下。

![Screen Shot 2018-02-07 at 23.32.35 .jpg](https://qiita-image-store.s3.amazonaws.com/0/93776/a5e12e63-7cfd-303a-c357-915cb2b25b3d.jpeg)


何秒間か待てばOK。

これで`rails s`が無事に動いた。
UnityでつくったWindowsアプリでQRコードを読み込む

#概要
Unityで出力したWindowsアプリ上で、QRコードを読み込んでみた
といっても、QRコードリーダを使うだけです。

#環境
実行OS：Windows10Home 64bit
QRコードリーダー：QK20-U（https://www.denso-wave.com/ja/adcd/product/qrcode/scanner/qk20.html ）
QRコード作成サイト：https://qr.quel.jp/form_bsc_url.php
![IMG_1763.JPG](https://qiita-image-store.s3.amazonaws.com/0/24266/1d070082-31b2-a216-5d11-8816c0254e32.jpeg)


#準備
##1:QRコードリーダの設定
1.ドライバインストール
https://www.denso-wave.com/ja/adcd/download/category/soft-driver/Active-USB-COM.html
※途中で、QRコードリーダつなげと注意がでます。繋いでください
※QRコードリーダの設定を変えるため、一旦ドライバをいれます。QRコードリーダの設定済みならいらない。




2.スキャナ設定ソフトのインストール
https://www.denso-wave.com/ja/adcd/download/series/qk/qk12_qk20_qk21/list.html
スキャナ設定ソフト"Scanner Setting 2D"（国内専用） をダウンロード（ログイン状態にしてからね）



3.スキャナ設定ソフトで”USBキーボードインターフェース”モードにする

3.1設定ソフト起動
起動時にCOMポート聞かれるけど、デバイスまねーじゃーみればすぐわかるよ
![デバイスマネージャー.PNG](https://qiita-image-store.s3.amazonaws.com/0/24266/9d0cce58-64da-4bba-2136-26fc349f1f6d.png)
3.2インターフェースの項目で、”USBキーボード”選択
3.3キーボードタイプを、今物理的に使っているキーボードタイプに合わせてください。
3.4メニューの”ファイル”から”設定データの反映”をクリック。

※設定ソフトは”USBキーボードインターフェースモード”だと使えないため
もう1度設定を変えたいなら、
マニュアル（https://www.denso-wave.com/ja/adcd/download/series/qk/qk12_qk20_qk21/list.html ）参考に、設定をデフォルトに戻してから、3.1の処理してください。


4.読み込めるか実験する
QRコード：https://sakudev1.sysken.tokyo/
![url1.png](https://qiita-image-store.s3.amazonaws.com/0/24266/1c11ce70-5608-3171-caa4-fd22400645ed.png)


4.1 メモ帳を開く
4.2 表示された文字列が正しいか、比較してください


# Unityで実行ファイル出力して実験
Unityのシーンファイルに、InputFieldを追加して、フォーカス当てて、QRコード読み込むだけ

動作動画：https://youtu.be/8ZdQVpdATm8

#考察
とりあえずはできた。

現在の方法だと、InputFieldが必要かつフォーカス当たっている必要がある
KeyCodeの文字列変換実装したほうがよいかも
Excel ショートカット(数式表示)

#数式表示のためのショートカット
シート全体が数式表示になるので、ベタ打ち箇所を発見しやすくなるよ！
`Ctrl` ＋ `Shift` ＋ `@`

初めて知ったけど、これは便利。
Excelのショートカットなめてた。奥深い！

これが
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234144/4ac5f5e8-ddb5-1874-b6b2-01945a5c66e3.png)

`Ctrl＋Shift＋@`で

こうなる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234144/d60e69a5-def8-e888-ee3f-3bf38c39daea.png)

元に戻すときは、もう一度`Ctrl＋Shift＋@`

おしまい
【SQL】実行の順序


実行の順序忘れないようにメモ(・∀・)

上 → 先
下 → 後

|〜句|内容|
|:---|------------:|
|from|テーブル指定|
|join|テーブルの結合|
|where|条件指定|
|group by|グループ化|
|sum,avgなど|関数|
|having|集計後の絞り込み|
|select, distinct|検索|
|order by|並べ替え|
|limit|取得件数の指定|
[Android] Unsupported method: BaseConfig.getApplicationIdSuffix() - Solved


#Problem

```groovy
dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3' <== Genninn
        classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.2'
        classpath 'com.github.dcendents:android-maven-plugin:1.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
```

>Error:Unsupported method: BaseConfig.getApplicationIdSuffix().
The version of Gradle you connect to does not support that method.
To resolve the problem you can change/upgrade the target version of Gradle you connect to.
Alternatively, you can ignore this exception and read other information from the model.
Consult IDE log for more details (Help | Show Log)


#Solution


```groovy
dependencies {
        classpath 'com.android.tools.build:gradle:2.3.2' <== koko kaeru
        classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.2'
        classpath 'com.github.dcendents:android-maven-plugin:1.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
```

#Edit


```groovy
dependencies {
        classpath 'com.android.tools.build:gradle:2.3.2' <== koko kaeru
        classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.2'
        classpath 'com.github.dcendents:android-maven-gradle-plugin:1.4.1' <== koko mo 

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
```
EclipseでビルドしようとしてJNI shared libraryのエラーが出た場合の対処

すごい今更ですが久しぶりにEclipseでJava触って遊ぼうとしたら、
色々環境がおかしくなってたのかビルドでエラーが出た。

"Failed to load the JNI shared library "C:\java\bin..\jre\bin\client\jvm.dll"

解決するには？ってことでググれば分かったんですが、作業メモな感じで。

Ａ．PCの環境とJavaの環境が合ってるか確認しましょう。
　　PCが64bitでJavaが32bitだと出るようです。
　　※私の場合は32bit入れててダメだったので、64bit入れたらすぐ直りました。

ちょっとしたメモでした。
WebpackのCommonJSプロジェクトをES Modulesに移行する

プロジェクトでシステムやコードの書き方などを新しいものに移行する場合、移行中の「つなぎ目」がいちばん厄介になることも少なくありません。今回は、WebpackでまとめていたCommonJSプロジェクトをES Modulesに移行するにあたって、どんなことが起きたかという話です。

# 移行を考えたきっかけ

ES Modulesがブラウザで導入されたのを知って面白そうだなと思っていたのですが、Webpack環境でわざわざCommonJSから移行するインセンティブはあまりありませんでした。ところが、ES Modulesだけに使える[最適化プラグインの存在を知った](https://qiita.com/jkr_2255/items/83de78d8bf621d9fb03e)などの事情もあって、「せっかくだし移行してみるか」と思い始めた次第です。

なお、コード自体はBabelに通すES6で書いていて、通常のJavaScript以外にRiot.jsのタグもある、という状況です。

# Module or CommonJS?

最新のNode.jsでは`.mjs`という拡張子にすることでES Modulesを識別する仕組みになっていますが、Webpack 3ではそうではなく、「Modulesとしての`import`もしくは`export`の行がある」ならES Modulesと判定するようになっています。

なお、ES Modulesと判定されたコードの中に`module.exports`があるとさすがに正常に動作しませんが、`require`のほうは正常に動作します。たとえば「トップレベル以外で`require`しているために、容易に移動できない」ような場合にも、とりあえずはそのまま進めることができます[^1]。

逆に、既存のCommonJSに`import`や`export`が入ると、ES Modulesとみなされます。ES6からの変換に必要なコードを[`babel-plugin-transform-runtime`](https://babeljs.io/docs/plugins/transform-runtime/)で補おうとしたところ、コードが`import`で入ってしまったために、既存のCommonJSコードが壊れる、というトラブルになりました。

# CommonJSとES Modulesのやり取り

まず、既存のnpmモジュールはほぼ全てCommonJSということもあって、それに対応できるように、ES Modulesの`import`でもCommonJSをロードすることは問題なくできるようになっています。

一方で、ES Modulesで`export`したものをCommonJSとして`require`した場合には、状況によって動作が違ってきます。

* 副作用だけ取得する場合（`require('...');`）…特に問題なし
* 名前付きの`export`の場合（`const {foo, bar} = require('...');`）…読み込みは問題ないけど。`export`した側のTree Shakingなどが効かなくなる
* `export default`の場合…`require('...').default`のように明示的に`default`を拾う必要が生じてしまう

ということで、まずはエントリポイント・イベント登録だけ・Riotタグ[^2]のような「`export`がないもの」からES Modulesとして書き直すのがいい、ということになりそうです。


[^1]: `riot-tag-loader`が[`require`固定でコードを生成する](https://github.com/riot/tag-loader/issues/16)ので、これをなんとかしないと混在したままとなってしまいます。
[^2]: `riot.tag2(...)`のように登録してしまうので、`import`で取ってきた値は特に不要です。
vagrant sshを使用せずにsshをするための設定

vagrant sshで仮想マシンにログインできなくなった。
別の方法を探して試したらうまくいったのでメモ。

```bash
$ cd test  # Vagrantfileのあるディレクトリ
$ vagrant up
$ vagrant ssh-config --host hostname >> ~/.ssh/config
$ ssh hostname  #上の設定が終わればどこでも
```

--host で指定したhostnameを変更すれば複数設定可能。
ただし、VM複数起動する場合はportとipを変えなきゃ起動しなかった気がする。

※ちなみにcygwin使ってます。多分gitbashとかでも同じだと思う。
変数や関数に名前を付けるときによく使われる省略形

初カキコ…ども…

初心者の方がだんだんプログラミングできるようになってくると、次に他人が書いたコードを見る or 他人にコードを見せるケースが増えてくると思うんです。
そうなると人のコードの理解を速くしたい！、分かりやすいコードを書きたいってなりますよね？私はそうでした。
そこで今回は変数や関数に名前を付けるときに参考になるような省略形をまとめてみました。

# 変数によく使われるもの
|略称|元になった単語、由来|用途|
|:--:|:--:|:--:|
|c, ch|Character|1文字扱う変数|
|s, str|String|文字列を入れるとき|
|i, j, k |fortranの暗黙の型宣言 | 整数。特にループのカウントによく使われる |
|buf, buff | Buffer | バッファ。一時的にデータを保存する場所 |
|temp|temporary|とりあえず、仮の|
| n, num | Number of ~ | 整数、何らかの数を指す |
| x, y, z | (x,y,z) | 座標 |
| r | Radius | 半径 |
| p | Pointer | ポインタ変数とそうでない変数を区別したいとき |
| rect | Rectangle | 長方形 |
|func|function|関数|
|arg|argument|引数|


これらの表現がよく使われます。
またよく使われるがゆえに他の関数でも頻繁に使用するので、使用する際にはスコープ（変数が使用できる範囲）をローカルに留めておくのを強くお勧めします。
例えば略し方によってはstrがstringかもしれないし、startかもしれない…混乱しますね。

# システムハンガリアン記法
変数や関数の型が分かるようにつける接頭語。今では非推奨。

| 略称 | 単語 | 意味 |
|:--:|:--:|:--:|
|b|BOOL型|true/falseを返す論理型|
|by|BYTE|バイト型　符号なし1バイト整数|
|n,i|Number,Integer|整数型|
|ui|unsigned int|符号なし整数|
|w|WORD|ワード型|
|dw|DWORD|ダブルワード型|
|h|HANDLE|ハンドル型|

 ただし現在では、
 ・修正の際にデータ型を変更すると変数名も変えなきゃいけなくなるので面倒。保守の障害になる。
 ・Microsoftでは過去に採用されたが.NET Framework で廃止。
 と今ではあまり使われなくなりました。過去のソースを読むときに役立てるくらいでちょうどいいかも。
そもそもVisual StudioなどのIDEでは変数にマウスを乗せれば型が表示されますしおすし。不必要な情報は追加しないというのもプログラミングでは大事な考え方です。

# 母音を消して略すパターン
| 略称 | 単語 | 用途 |
|:--:|:--:|:--:|
|ctr|Control|制御、指令（値）|
|trgt|Target|対象、目標（値）|
|cmd|Command|指令|
|msg|messege|(処理に関する)メッセージ|
|spd|Speed|速度|
|mv|Move|動作|
|cnst|Constant|一定、定速|
|md|Mode|モード|
|sts|Status|ステータス|
|cnfg|configure|(設計)構造|

母音を消しても良く使われる単語なら何を指しているのか把握しやすいので、これらの表現も良く使われます。

# まとめ
よく使われるパターンを覚えておくと人のコードを読むのが楽になる、自分が書くときに統一感が出る、名前が冗長じゃなくなる、といいことずくめです。
上記に挙げた以外にも命名規則はありますし、2(to)や4(for)などのスラングも使えます。
自分でも色々調べてみてください。

# 参考文献
* 日向俊二著　「知らないと恥をかくプログラミングの常識」 アスキー・メディアワークス
* システムハンガリアン記法は時代遅れ？　http://blogs.itmedia.co.jp/yohei/2008/04/post-fcac.html
$_GETの値チェック

非常に基礎的な内容なのですが忘れっぽい未来の自分へのメッセージとして書いていきます

自分はPHPでクエリのパラメータを取得する際に

```php
$q = (isset($_GET["q"]) ? $_GET["q"] : "");
```

みたいな書き方をよくするんですが
```$_GET["q"]```の中身は
``` https://qiita.com?q= ```の時は空文字
``` https://qiita.com ```の時は未定義

結果は同じでも挙動が違うのを度々忘れてしまうので
たまにページング用のページ番号取得するときにあれ？ってなります

```php
$page_no = (isset($_GET["page_no"]) ? $_GET["page_no"] : 1);
```

と書くと```$_GET["page_no"]```は
``` https://qiita.com?page_no= ```だと1
``` https://qiita.com ```だと空文字

まぁ取得したあとにしっかりとバリデートすればいいだけの話なんですが。。。

最終的にページ番号のような1以上の整数が欲しい場合にはphpの型のゆるさに甘えて

```php
$page_no = (!empty($_GET["page_no"]) ? intval($_GET["page_no"]) : 1);
```

という書き方にたどり着きました
nullも""も0も"0"も全部1にしちゃいます

負の数はabs()でも使いますか。。。
突き詰めるともっといい方法はいくらでもありますがemptyって便利だなぁって話でした
LTするならCarbon使ってコードをオシャレに見せようぜ！

## かっこよくコードを見せたい！！


LTする機会があったのでコードをどうシート内で見せるか。
シンタックスハイライト自分で色変えてくのも手間だし。。。

と、そんなときにかっこよくコードを画像にできるサービスがあったので紹介。
ちなみにこんなかんじ！！

![carbon (5).png](https://qiita-image-store.s3.amazonaws.com/0/186028/002ebf93-4a9c-a330-44ef-497856dc1158.png)

carbonというサービス!!
https://carbon.now.sh
>Create and share beautiful images of your source code.
>Start typing or drop a file into the text area to get started.

>あなたのコードを美しい画像でシェアしましょう！
>タイピングしたり、ファイルをテキストエリアにドロップしたりしてはじめてね！


とのこと。

# 設定できること  

* デザインテーマ選択  
* 言語ごとのシンタックスハイライト。ほとんどの言語対応できる。  
* ドロップシャドウの有無。また影のつけ方。  
* paddingの設定  
* 角丸ありかなしか。  
* 左上のコントローラーの有無、デザイン設定  
* フォント、フォントサイズ選択  
* 行数表示

とにかく自由！！こんな感じにもできるよ！！

![carbon (7).png](https://qiita-image-store.s3.amazonaws.com/0/186028/def5a0d6-ccb5-feb0-5073-d99b427f8667.png)

PythonのコードでテーマをSolarized(Light)に
そいで行数表示してみた。

いいねー！　　
ただ画像だからコピペできない故、ブログとかには向かないかもだけど、
プレゼンとかSNS用だったら、かっこよくできる。
Reactで管理画面をつくるときに便利だったライブラリ集と所感

主に未来の自分用

## [material-ui](https://github.com/mui-org/material-ui)
* Material DesignをReactでコンポーネント化したもの
* UIパーツになっているのでパパっと使えるし、あとでカスタマイズするときもけっこう融通が効く
* ~~現在1.0.0がbetaでアップデートが激しく破壊的変更も多いので、場面に合わせてStableとどちらを採用するか決めるのがよい。~~
* v1がStableになった

## [react-admin](https://github.com/marmelab/react-admin)

* REST API（やGraphQL）を叩くクライアントとして最適化された感じの管理画面コンポーネント集
* インデックスがあって、閲覧ページがあって、登録ページがあって、みたいなよくある画面が素早くつくれる
* Material UIを内部で使っていて、さらに管理画面用に高レベルなコンポーネント（テーブルとか新規作成フォームとか）が実装されている
* カスタマイズ性もまぁまぁ高い。CRUDではないエンドポイントでも拡張可能。
* create-react-appからはじめる形（= exampleプロジェクトをコピペではない）なのが個人的に好き

## [DevExtreme React Grid](https://github.com/DevExpress/devextreme-reactive)
* いわゆるデータテーブル系
* フィルタ、ソート、仮想テーブル（無限スクロール）、追加・編集など基本的なものに一通り対応している
* カスタマイズ性も割とある。セルのレンダラーを独自のReactコンポーネントにできる
* ControlledとUncontrolledに対応してるので、カジュアルに使ってもreduxとかでstate管理してもよい
* Material UIとBootstrapの2種類のスタイルが提供されている
* ExcelやSpreadsheet的なコントロールポイント掴んでグイっと複数セルに展開するような操作はできない

## [@handsontable/react](https://github.com/handsontable/react-handsontable)
* HandsontableのReact wrapper
* いわゆるExcel的な操作ができる
* カラム間（水平方向）でセルを展開できる（いろいろ探したが他に対応してるライブラリが見つからず）
* セルのレンダラーにReactコンポーネントを使いたいときは[react-lru](https://github.com/zekedroid/react-lru)を使うとよい

## [react-infinite](https://github.com/seatgeek/react-infinite)
* いわゆる無限スクロールを簡単に実装できる

## ~~[react-sizeme](https://github.com/ctrlplusb/react-sizeme)~~
* 無限スクロールする要素をレスポンシブにしたいときに便利
* windowのリサイズ時にサイズをpropsとして得られる

## [react-use-dimensions](https://github.com/Swizec/useDimensions)
* react-sizeme がhooksに対応してないのでこちらに移行

## [~~react-chartjs-2~~](https://github.com/jerairrest/react-chartjs-2)
* chart.jsのReact wrapper
* [react-chartjsのv2ブランチ](https://github.com/reactjs/react-chartjs/tree/chartjs-v2)は使ってないのでどっちがいいのかはわからない
* [recharts](https://github.com/recharts/recharts)というReactに最適化されたチャートライブラリもあって、Reactらしくかけて気持ちいいが、今のところやや低機能でけっきょくchart.js使うことにした

## [apexcharts](https://apexcharts.com/)
* 今っぽいおしゃれチャートがかける
* 機能も充実してる

## [maruware/material-ui-basic-layout](https://github.com/maruware/material-ui-basic-layout)

同じようなレイアウトよく組むのでcomponentにした。

## [maruware/material-ui-login](https://github.com/maruware/material-ui-login)

ログイン画面がいつもほしいのでcomponentにした。


またなんか見つかったら追記する